/* fullpage */
#fp-nav{ margin: 0; top: calc( 50% + var(--header_height) ); transform: translateY(-50%); }
#fp-nav.left{ left: 95rem; }
#fp-nav ul,
.fp-slidesNav ul{ display: flex; flex-direction: column; gap: 50rem; }
#fp-nav ul li,
.fp-slidesNav ul li{ margin: 0; width: 5rem; height: 5rem; }
#fp-nav ul li a,
.fp-slidesNav ul li a{ position: relative; background: #fff; border-radius: 50%; }
#fp-nav ul li a::before,
.fp-slidesNav ul li a::before{ content: ''; position: absolute; inset: -13rem; }
#fp-nav ul li a span,
.fp-slidesNav ul li a span{ margin: 0; inset: 0; width: auto; height: auto; background: rgba(255, 255, 255, 0.2); opacity: 0; transition: .4s;}
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li a.active span,
.fp-slidesNav ul li:hover a.active span{ margin: 0; inset: -13rem; width: auto; height: auto; opacity: 1; }

/* common */
.common__h2{ width: 100%; font-size: var(--font_size55); font-weight: 900; color: var(--gray); }
.common__p{ margin-top: 18rem; }
@media(max-width: 1279px) or (max-height:799px){
	.fp-section.fp-table, .fp-slide.fp-table, .fp-tableCell{ height: auto!important; }
    .common_padding_y{ padding: 70rem 0; }
}

/* visual */
.main_visual{ height: 100%; color: var(--white); }
.main_visual .swiper-slide{ position: relative; background: var(--black); }
.main_visual .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / cover; }
.main_visual .slide1::before{ background-image: url("/images/main/img_visual3.jpg"); /* background-position-x: 84%; */ }
.main_visual .slide2::before{ background-image: url("/images/main/img_visual2_2.jpg"); /* background-position-x: 65%; */ }
.main_visual .slide3::before{ background-image: url("/images/main/img_visual4.jpg"); }
.main_visual__inr{ display: flex; align-items: center; padding-top: 4.3%; box-sizing: border-box; }
.main_visual__h2{ font-size: var(--font_size74); font-weight: 800; line-height: 1.4; }
.main_visual__p{ margin-top: 1.13636364em; font-size: var(--font_size22); line-height: 1.63636364; }
.main_visual .common__a{ margin-top: 65rem; }
.main_visual__contorl{ display: flex; justify-content: center; align-items: center; gap: 32rem; position: absolute; right: 0; bottom: 0; width: min(376rem, 50%); padding: 0 5.2%; background: var(--secondary); box-sizing: border-box; font-size: 12rem; z-index: 1; }
.main_visual__btn{ position: relative; width: 9rem; height: 9rem; background: 0; color: inherit; }
.main_visual__btn::before{ content: ''; position: absolute; inset: -.5em; }
.main_visual__btn::after{ content: ''; position: absolute; inset: 0; background: currentColor; }
.main_visual__btn:not(.pause)::after{ clip-path: polygon(0% 0%, 0% 100%, 33.3% 100%, 33.3% 0, 66.6% 0, 66.6% 100%, 33.3% 100%, 33.3% 100%, 100% 100%, 100% 0%); }
.main_visual__btn.pause::after{ clip-path: polygon(85% 50%, 15% 0%, 15% 100%); }
.main_visual__pager{ display: flex; justify-content: space-between; align-items: center; }
.main_visual__bar{ position: relative; width: 80rem; height: 2rem; background: rgba(255, 255, 255, 0.2); }
.main_visual__bar::before{ content: ''; position: absolute; inset: 0; width: 0; background: currentColor; }
@media(prefers-reduced-motion:no-preference){
    .main_visual .swiper-slide-active::before{ animation: slide_bg 3s both; }
    @keyframes slide_bg {
        0%{ transform: scale(1.05); }
        100%{ transform: scale(1); }
    }
    .main_visual__h2{ opacity: 0; }
    .main_visual__p{ opacity: 0; }
    .main_visual .common__a{ opacity: 0; }
    .main_visual .swiper-slide-active .main_visual__h2{ animation: visual_txt .6s .3s both; }
    .main_visual .swiper-slide-active .main_visual__p{ animation: visual_txt .6s .5s both; }
    .main_visual .swiper-slide-active .common__a{ animation: visual_txt .6s .7s both; }
    @keyframes visual_txt {
        0%{ transform: translateX(20px); opacity: 0; }
        100%{ transform: translateX(0); opacity: 1; }
    }
    .main_visual__bar.play::before{ animation: pager_ani 5s linear both; }
    @keyframes pager_ani {
        0%{ width: 0; }
        100%{ width: 100%; }
    }
}
@media(min-width: 768px){
    .main_visual__contorl{ height: 100rem; border-radius: 50rem 0 0 0; }
}
@media(min-width:768px) and (max-width: 1279px){
	.main_visual{ aspect-ratio: 1920/970; }
}
@media (max-width: 1279px){
	.main_visual{ margin-top: var(--header_height); }
}
@media(max-width: 767px){
	.main_visual{ aspect-ratio: 1/1; }
	.main_visual .swiper-slide::before{ opacity: .5; }
    .main_visual__contorl{ height: 75rem; border-radius: 37.5rem 0 0 0; }
}

/* product */
.main_product{ display: flex; align-items: center; position: relative; height: 100%; background: #fafafa url("/images/main/img_product_bg.jpg") no-repeat 50% 0% / 100% 66.2%; box-sizing: border-box; }
.main_product__inr{ height: auto; }
.main_product__title_box{ display: flex; flex-wrap: wrap; column-gap: 1em; color: var(--white); }
.main_product .common__h2-strong{ color: var(--white); }
.main_product .common__p{ flex: 1; }
.main_product__control{ display: flex; gap: 29rem; align-self: flex-end; }
.main_product__btn{ position: relative; width: 13rem; height: 23rem; background: 0; }
.main_product__btn::before{ content: ''; position: absolute; inset: -.667em -1em; }
.main_product__btn-img{ display: block; width: 100%; height: 100%; object-fit: contain; }
.main_product__swiper{ margin-top: 77rem; }
.main_product__img{ display: block; aspect-ratio: 1/1; width: 100%; }
.main_product__category{ display: block; margin-top: 25rem; font-size: 15rem; font-weight: 700; color: var(--primary); }
.main_product__title{ display: block; margin-top: 9rem; font-size: 18rem; font-weight: 600; color: #333; }
@media(prefers-reduced-motion:no-preference) and (min-width: 1280px){
    .main_product__title_box{ transform: translateY(20rem); opacity: 0; transition: .4s; }
    .fp-completely .main_product__title_box{ transform: translateY(0); opacity: 1; }

    .main_product__swiper{ transform: translateY(20rem); opacity: 0; transition: .4s .3s; }
    .fp-completely .main_product__swiper{ transform: translateY(0); opacity: 1; }
}
@media(min-width: 1280px){
    .main_product{ padding-top: calc( var(--header_height) + 4.3% ); }
}
@media(min-width: 1650px){
    .main_product_scroll{ display: flex; justify-content: center; align-items: center; gap: 15rem; position: absolute; inset: 0 0 0 auto; width: 100rem; padding-top: 15.3%; background: var(--white); border-left: 1px solid var(--border); box-sizing: border-box; text-transform: uppercase; writing-mode: vertical-rl; font-size: 12rem; font-weight: 300; letter-spacing: .25em; color: var(--gray); fill: currentColor; pointer-events: none; }
}
@media(max-width: 1649px){
    .main_product_scroll{ display: none; }
}

/* notice */
.main_notice{ height: 100%; background: url("/images/main/img_notice_bg.jpg") no-repeat 50% / cover; box-sizing: border-box; }
.main_notice__title_box{ display: flex; flex-wrap: wrap; justify-content: space-between; }
.main_notice .common__h2-strong{ color: var(--black); }
.main_notice__ul{ display: grid; margin-top: 72rem; background: #fff; border: 1rem solid var(--border); box-shadow: 3rem 4rem 33.25rem 1.75rem rgba(0, 0, 0, 0.15); }
.main_notice__a{ display: block; padding: 45rem 14%; }
.main_notice__category{ display: block; font-weight: 600; color: var(--gray); }
.main_notice__title{ margin-top: 41rem; font-weight: 600; color: #333; }
.main_notice__comments{ margin-top: 16rem; min-height: calc( 3em * 1.66666667 ); font-size: 15rem; line-height: 1.66666667; color: #888; -webkit-line-clamp: 3; }
.main_notice__date{ display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: 43rem; padding-top: 30rem; border-top: 1rem solid; font-style: italic; font-size: 14rem; }
.main_notice__date::after{ content: ''; display: inline-block; position: relative; right: 2rem; width: 6rem; height: 6rem; border: solid currentColor; border-width: 1rem 1rem 0 0; transform: rotate(45deg); }
@media(hover:hover){
    .main_notice__date{ border-color: var(--border); color: #888; }
    .main_notice__a:hover .main_notice__date{ border-color: currentColor; color: #333; }
}
@media(hover:none){
    .main_notice__date{ border-color: currentColor; color: #333; }
}
@media(prefers-reduced-motion:no-preference) and (min-width: 1280px){
    .main_notice__title_box{ transform: translateY(20rem); opacity: 0; transition: .4s; }
    .fp-completely .main_notice__title_box{ transform: translateY(0); opacity: 1; }

    .main_notice__ul{ transform: translateY(20rem); opacity: 0; transition: .4s .3s; }
    .fp-completely .main_notice__ul{ transform: translateY(0); opacity: 1; }
}
@media(prefers-reduced-motion:no-preference){
    .main_notice__date{ transition: .4s; }
}
@media(min-width:768px) and (max-width:1279px){
    .main_notice__ul{ grid-template-columns: repeat(3, 1fr); }
    .main_notice__li:nth-of-type(4){ display: none; }
}
@media(min-width: 1280px){
    .main_notice{ padding-top: calc( var(--header_height) + 7.2% ); }
    .main_notice__ul{ grid-template-columns: repeat(4, 1fr); }
}
@media(max-width: 768px){
    .main_notice__ul{ grid-template-columns: repeat(1, 1fr); }
    .main_notice__li:not(:first-child){ display: none; background: red; }
	.main_notice__a{ display: block; padding: 40rem 30rem; }
}