/* mainbanner */
.catalog-container{position: relative;padding: 8rem 2.8rem;}
.main-banner {padding:2.8rem;}
.main-banner:after{display:none;}
.main-banner .swiper-slide .pc-view {height:auto;}
.main-banner .banner { border-radius:1.2rem; overflow:hidden}
.main-banner .control-box {display:flex; align-items: center; justify-content: center; position:absolute; left:50%; bottom:2.8rem; transform:translateX(-50%); z-index:10;}
.main-banner .control-box .navi-box {display:flex; align-items:center; margin-left:4rem;}
.main-banner .control-box .navi-box .swiper-button-prev {position:static;}
.main-banner .control-box .navi-box .swiper-button-next {position:static;}
.main-banner .control-box .swiper-pagination {position:static; width:auto;}
.main-banner .control-box .swiper-pagination .swiper-pagination-bullet {width:.8rem; height:.8rem; background:#838a8f; transition:.7s all cubic-bezier(.22,.61,.36,1);}
.main-banner .control-box .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:9.6rem; background:#fff; border-radius:10px;}
.main-banner .control-box .swiper-button-next,
.main-banner .control-box .swiper-button-prev {width:1.2rem; height:2rem; margin-top:0; background:url('/img/main/icon_swiper_arrow.png') no-repeat center / cover;}
.main-banner .control-box .swiper-button-next {transform:rotate(180deg);}
.main-banner .control-box .swiper-button-next:after,
.main-banner .control-box .swiper-button-prev:after {content:"";}
.main-banner .control-box #controlBtn {width:2.4rem; height:2.4rem; padding:0; margin:0 1rem;}
.main-banner .control-box #controlBtn img {margin:0 auto;}
.main-top-container{padding-top:2.8rem;}

.main-class-tab {display:flex;}
.main-class-tab li.main-class-tab-item a {height: 4rem;font-size: 1.4rem;transition-property: all;transition-duration: .2s;transition-timing-function: cubic-bezier(.645, .045, .355, 1);display: inline-flex;align-items: center;box-sizing: border-box;padding-right: 1.6rem;padding-left: 1.6rem;border: .1rem solid #333;border-radius: 10rem;font-weight: 300;color: #fff;line-height: 1.12;}
.main-class-tab li.main-class-tab-item + li{margin-left:1.2rem;}
.main-class-tab li.main-class-tab-item a.active, .main-class-tab li.main-class-tab-item.active a {background:#ff6a3d; border:1px solid #ff6a3d; color:#000;}

.main-class-container{display:flex; gap:1.0rem; flex-wrap: wrap;}
.catalog-list{min-width: 16rem; max-width: calc(25% - .8rem); margin-top:4.8rem}
.cardbanner-container {display: block;    width: 100%;}
.cardbanner-figure, .cardbanner-imageWrapper {position: relative;display: block;overflow: hidden;}
.cardbanner-imageWrapper {background: linear-gradient(90deg, #222 40%, #2a2a2a 50%, #222 60%);background-size: 300% auto;animation: CardBanner_draw-backdrop__IRJAQ 3s infinite;border-radius: .8rem;aspect-ratio: 16 / 9;}
.cardbanner-image {object-fit: cover;width: 100%;height: 100%; margin:0 auto;}
.cardbanner-caption {position: relative;margin-top: 2.4rem;margin-right: 1.6rem;margin-left: 1.6rem;}
.cardbanner-caption span {font-size:1.2rem; color:#ff6a3d; margin-bottom:0.6rem; display:block;}
.cardbanner-title {display: block;display: -webkit-boxoverflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-overflow: ellipsis;word-wrap: normal;width: -moz-fit-content;width: fit-content;margin-bottom: .6rem;font-weight: 300;word-break: keep-all;max-width: 30rem;font-size: 1.6rem;line-height: 1.25;letter-spacing: -.04em;}

.catalog-container.catalog-container:before {content: "";position: absolute;top: 0;right: 0rem;left: 0rem;height: .1rem;background-color: #333;}
.catalog-slideContainer {position: relative;}
.catalog-slideContainer .swiper .swiper-slide{border-radius:1.2rem; overflow:hidden;}

.swiper-btn-wrapper .swiper-button-prev, .swiper-btn-wrapper .swiper-button-next {transition-property: background-color;transition-duration: .2s;transition-timing-function: cubic-bezier(.645, .045, .355, 1);position: absolute;z-index: 11;display: flex;border-radius: 50%;transform: translateY(-50%);align-items: center;justify-content: center;width:3.6rem;height:3.6rem;background:#222 ;box-sizing:border-box;color: transparent;top:50%;margin:0;}
.swiper-btn-wrapper .swiper-button-prev{left:-1.8rem;}
.swiper-btn-wrapper .swiper-button-next{right:-1.8rem;}
.swiper-btn-wrapper .swiper-button-prev:after {display:block; background: url('/2025/common/img/icon/icon-arrow-left.png') no-repeat center / cover;background-size:1.4rem auto; }
.swiper-btn-wrapper .swiper-button-next:after {display:block; background: url('/2025/common/img/icon/icon-arrow-right.png') no-repeat center / cover; background-size:1.4rem auto; }
.swiper-btn-wrapper .swiper-button-prev.portfolio-prev, .swiper-btn-wrapper .swiper-button-next.portfolio-next { margin-top:-2rem;}

.portfolioSwiper .swiper-slide em{position:relative; width:100%; padding-bottom:100%; display:block; margin-bottom:1.2rem;}

.portfolioSwiper .cardbanner-imageWrapper {padding-bottom:42.5%;}
.portfolioSwiper .cardbanner-image {left: 50%;-o-object-fit: cover;object-fit: cover;position: absolute;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);opacity: 1;}
