/* ---------------------------------------------------------------------------------------- 

    Utility

----------------------------------------------------------------------------------------*/
@import url("https://use.typekit.net/bpk2aae.css");
.op-df{display:block; }
.op-serif{font-family: serif; letter-spacing: 0.2rem; -webkit-font-smoothing: antialiased;}
.op-gotham{font-family: "gotham", sans-serif; letter-spacing: 0.4rem;}
.op-mobile {display: block;}
.op-desktop {display: none;}
.op-w4 { font-weight: 400;}
.op-ls01{letter-spacing: 0.1em;}
.op-lt02 { letter-spacing: 0.2em;}
.op-lt05 { letter-spacing: 0.05em;}
.op-sec-sub-title {font-size: 1.1rem; letter-spacing: 0.2em; position: relative; opacity: .4; display: inline-block; margin-bottom: 3.8rem;}
.op-sec-sub-title p {letter-spacing: 0.16em;}
.op-sec-sub-title::after{content: ""; width: 7.2rem; height: 1px ; background: #333333; display: block; position: absolute;right: -8.2rem;top: 45%;bottom: 50%;}

:root {
  --op-color-main: #E5C5BA;
}
p{color:#333333}

#block-goods-detail--gallery .swiper-button-prev{left: -25px;}
#block-goods-detail--gallery .swiper-button-next{right: -25px;}

/*---------------------------------------------------------------------------------------- 

    Assets/utility

----------------------------------------------------------------------------------------*/
.op-sec{position: relative;}
.op-sec-df{display: flex; flex-wrap: wrap;}
.op-w-100{ max-width: 100vw; margin-left: -2.0rem; width: 100vw; height: 100%;}
.op-special .op-w-100,
.op-lineup .op-w-100,
.op-products .op-w-100{position: absolute; left: 0; background: linear-gradient(#FBF9F8,#fbf9f800); top: 0; z-index: -1;}
.op-special,.op-points{position: relative;}
.op-points .op-w-100{position: absolute; left: 0; background: linear-gradient(#fbf9f800,#FBF9F8); top: 0; z-index: -1;}
.op-other .op-w-100{position: absolute; left: 0; background: #FBF9F8; top: 0; z-index: -1;}
.op-sec-title-en{font-size: 2.0rem; letter-spacing: 0.2em; display: block; margin-bottom:1rem;  -webkit-font-smoothing: antialiased;}
.op-sec-title-ja{font-size: 1.2rem; letter-spacing: 0.1em; display: block; opacity: 0.5;  margin-bottom: 3.5rem;}
.op-sec-title.op-center{text-align: center;}
.op-btn-youcam{ padding: 1.5rem; width: 100%; border: 1px solid #E57777; border-radius: 100vw; display: flex; align-items: center;  justify-content: center; margin: 3rem 0; color: #E57777;}
.op-btn-youcam svg{margin-right: .5rem;}
.op-btn-youcam:hover { opacity: 1;}
.op-btn-youcam:hover{text-decoration: none; opacity: .5;}
.op-btn-youcam{ text-decoration: none;transition: .3s opacity;}

/*---------------------------------------------------------------------------------------- 

    products

----------------------------------------------------------------------------------------*/
.op-point >*:last-child{margin-bottom: 0;}
.op-products{padding: 5.7rem 0;}
.op-products-lists{ display: flex; flex-wrap: wrap;gap: 0.5rem;row-gap: 0.8rem;}
.op-products-list:first-child{  padding-left: 0;}
.op-products-list{ width:calc(25%  - 0.375rem); }
.op-products-list img{ margin-bottom: 0.4rem;}
.op-products-name  { font-size: 0.7rem; letter-spacing: 0.025em; line-height: 1.2;}

/*---------------------------------------------------------------------------------------- 

    lead

----------------------------------------------------------------------------------------*/
.op-lead p {color:white}
.op-lead-text{font-size: 2rem; position: relative;}
.op-lead-text p{position: relative;}
.op-lead-inner{ display: block; align-items: center; width: 100%;}
.op-lead-img {  width: 32.4rem; right:0; position: relative; margin: -8rem 0 0 auto;}
.op-lead-img img{width:100%; aspect-ratio: 717/410;}
.op-lead-text{  padding: 9.6rem  0 12.8rem 0; position: relative; width: 100%; padding-left: 2.5rem;}
.op-lead-text::after{content: ""; width:100%; height: 100%; position: absolute; top: 0; left:0; background: #E5C5BA; z-index: -1;} 
.op-lead-text svg{position: absolute; left: -1rem;top: -4rem;width: 1.5rem;}
/*---------------------------------------------------------------------------------------- 

    points

----------------------------------------------------------------------------------------*/
.op-points{padding-bottom: 6.4rem; padding-top: 8.6rem;}
.op-point{margin-bottom: 5.6rem;}
.op-point:last-child{margin-bottom: 0;}
.op-point-num {color: #E5C5BA; font-weight: 400; display: block;}
.op-point-title{font-size: 1.8rem; margin-bottom: 2.5rem; font-weight: 100; display: flex; letter-spacing: 0.15em;}
.op-point-text{font-size: 1.2rem; margin-bottom: 2.5rem; opacity: .9; letter-spacing: 0.05em;}
.op-point-img{font-size: 1.2rem; margin-bottom: 3rem;}
.op-tags{flex-wrap: wrap;row-gap: .8rem;gap: .4rem;display: flex; opacity: .8; margin-bottom: 0.8rem;}
.op-tag{ padding:0.2rem 0.6rem; border: 1px solid #ABAAA9; display: inline-block; border-radius: 4px; font-size: 1rem; opacity: 0.8;}
.op-points-df .op-point-text{margin-bottom:0.8rem ;}
.op-points-df {display: flex;}
.op-point-img-tag{width:7.2rem ; aspect-ratio: 1/1; height: 100% !important;}
.op-point-texts{width: 100%; }
.op-point-img-tag {margin-right: 2.4rem;}


/*---------------------------------------------------------------------------------------- 

    lineup

----------------------------------------------------------------------------------------*/
.op-lineup{padding: 5.4rem 0 8.6rem 0;}
.op-lineup-item {display: flex; width: 100%; flex-wrap: wrap;}
.op-lineup-item img{width: 100%;}
/*---------------------------------------------------------------------------------------- 

    charts

----------------------------------------------------------------------------------------*/
.op-charts{padding-bottom: 6.4rem; }
.op-charts-imgs.op-df{gap: 3.2rem; justify-content: center;  display: flex; flex-wrap: wrap;}
.op-charts-imgs div{width:100%;}
.op-charts-imgs div img{width:  100%;}
.op-charts-imgs div:nth-child(2){width: calc(100% - 9.85rem); margin: 0 auto;}
/*---------------------------------------------------------------------------------------- 

    other

----------------------------------------------------------------------------------------*/
.op-other{padding: 5.4rem 0; position: relative;}
.op-other-item{padding: 5.6rem 0 2rem 0; background: #fff; text-align: center;}
.op-other-texts{font-size: 1.2rem;}
.op-other-text{font-size: 1.2rem; margin-bottom: 0.8rem; line-height: 1.4; letter-spacing: 0.05em;}
.op-other-link{text-transform: uppercase; letter-spacing: 0.1em; opacity: .5; text-decoration: underline; line-height: 2; text-underline-offset: 4px;}   

.op-other-img{position: relative;width: 20.0rem; display: inline-block; margin: 0 auto;}
.op-other-img-up{aspect-ratio: 274/174.2; }
.op-other-img-products{aspect-ratio: 115/187; position: absolute;top: 0; top: 0; right: -3rem; width: 8.2rem;}
.op-other-img:hover img{ opacity: 1;}
a.op-other-img:hover{text-decoration: none; opacity: .5;}
a.op-other-img{ text-decoration: none;transition: .3s opacity;}
.op-other-item > *{ margin-bottom: 1.5rem;}
.op-other-inner{row-gap:2.4rem; display: flex; flex-wrap: wrap;}
.op-other-item{width: 100%;}
.op-other-item .op-sec-title-ja {margin-bottom: 0;}
.op-other-item .op-sec-title-en{ margin-bottom: 0; letter-spacing: 0.15em;}

/*---------------------------------------------------------------------------------------- 

    Special

----------------------------------------------------------------------------------------*/
.op-special{position: relative; padding: 7rem 0 0 0;}
.op-special-img{text-align: center; position: relative;
    max-width: 100vw;margin-left: -2.0rem;width: 100vw;height: 100%;}
.c-star{position: absolute; aspect-ratio: 1/1;opacity: 0;}
.c-star-wrap{position: absolute;top: 0; width: 100%; height: 100%;}
.c-start-inner  {position: fixed; z-index: 3; pointer-events: none;width: 100%;height: 100vh; display: flex; margin: 0 auto;top: 0;left: 50%;transform: translateX(-50%); position: sticky; top: 0;}
.c-star:nth-child(1) {animation: star 8s infinite;width :22px;top   :102px;right :39px;filter: blur(2px);}
.c-star:nth-child(2) {animation: star 8s infinite; width:28px;top:212px;left:9px;filter: blur(2px);transform: rotate(10deg);animation-delay: .5s;}
.c-star:nth-child(3) {animation: star 8s infinite;width:45px;top:230px;left:19px;filter: blur(1px);transform: rotate(5deg);animation-delay: .7s;}
.c-star:nth-child(4) {animation: star 8s infinite;width:45px;bottom:110px;right:10px;filter: blur(1px);transform: rotate(-5deg);animation-delay: 1.2s;    }
.c-star:nth-child(5) {animation: star 8s infinite;width:22px;bottom:150px;right:10px;filter: blur(2px);transform: rotate(10deg);        animation-delay: 2.5s;    }
@keyframes star{
    0%{opacity: 0;}
    25%{opacity: .5;}
    50%{opacity: .2;}
    70%{opacity: 1;}
    100%{opacity: 0;}
}

/*---------------------------------------------------------------------------------------- 

    レスポンシブ

----------------------------------------------------------------------------------------*/
@media screen and (min-width: 960px) {
    .op-mobile { display: none }
    .op-desktop { display: block;}


    .op-w-100{  margin-left: calc((100vw - 960px) / -2); }
    .op-col2{width:63.7rem;  margin: 0 0 0 auto;}
    .op-col6{width:48rem ;}
    .op-df{display:flex; }
    .op-sec-sub-title {margin-bottom: 4.4rem; }

    #block-goods-detail--gallery .swiper-button-prev{left: -38px;}
    #block-goods-detail--gallery .swiper-button-next{right: -38px;}
    /*---------------------------------------------------------------------------------------- 

        Assets

    ----------------------------------------------------------------------------------------*/
    .op-sec-title-en{font-size: 2.5rem; text-transform: uppercase;}
    .op-sec-title-ja{margin-bottom: 6.4rem;}
    /*---------------------------------------------------------------------------------------- 

        products

    ----------------------------------------------------------------------------------------*/
    .op-products{padding: 12.8rem 0 18.8rem 0;}
    .op-products-lists{ gap: 0.8rem; row-gap: 1.5rem;}
    .op-products-list{ width: 11.2rem;}
    .op-products-name  { font-size: 0.9rem; letter-spacing: 0.0em; opacity: .8;}
    /*---------------------------------------------------------------------------------------- 

        lead

    ----------------------------------------------------------------------------------------*/
    .op-lead-first{ margin-top: 3.8rem;}
    .op-lead p {color:white}
    .op-lead-text{font-size: 2.2rem; position: relative;}
    .op-lead-text p{position: relative;}
    .op-lead-inner{ display: flex; align-items: center; width: 100%;}
    .op-lead-img {  width: 50vw; left: -5.6vw; position: relative; margin: 0;}
    .op-lead-img img{width:100%; aspect-ratio: 717/410;}
    .op-lead-text{  padding: 15vw  0 15vw 0; position: relative; width: 60vw; padding-left: 16.7vw;}
    .op-lead-text::after{content: ""; width:100%; height: 100%; position: absolute; top: 0; left:0; background: #E5C5BA; z-index: -1;} 
    .op-lead-text svg{position: absolute; left: -9rem; top :-9rem; width: auto;}
    /*---------------------------------------------------------------------------------------- 

        points

    ----------------------------------------------------------------------------------------*/
    
    .op-point{margin-bottom: 8rem;}
    .op-points{padding: 12.8rem 0 12.8rem 0;}
    .op-point-title{margin-left: -4rem}
    .op-point-num{width: 4rem;display: inline-block;}
    .op-point-img-tag{width: 7.2rem; aspect-ratio: 1/1;}
    .op-tag{padding:0.4rem 0.8rem;}
    /*---------------------------------------------------------------------------------------- 

        lineup

    ----------------------------------------------------------------------------------------*/
    .op-lineup{padding: 12.8rem 0;}
    .op-lineup-item {display: flex; width: 100%; flex-wrap: wrap;}
    .op-lineup-item img{width: calc(100% / 3);}

    .op,.op-lineup,.op-points,.op-other,.op-charts,.op-special{max-width: 960px;}
    /*---------------------------------------------------------------------------------------- 

        charts

    ----------------------------------------------------------------------------------------*/
    .op-charts{padding-bottom: 18.8rem;}
    .op-charts-left{width: 32.3rem;}
    .op-charts-imgs.op-df{gap: 3.2rem; justify-content: center;display: flex ; flex-wrap: nowrap;  margin: 0;}
    .op-charts-imgs div{height: 38.1rem; width: auto;}
    .op-charts-imgs div:nth-child(2) {width: auto;    }
    .op-charts-imgs div img{height: 100%; width:  auto;}
    /*---------------------------------------------------------------------------------------- 

        other

    ----------------------------------------------------------------------------------------*/
    .op-other{padding: 12.8rem 0;}
    .op-other-inner{gap: 4rem;  flex-wrap: nowrap;}
    .op-other-item{padding: 7rem 0 3rem 0; width: calc(50% - 2rem);}
    .op-other-item > *{ margin-bottom: 3rem;}
    .op-other-text{ margin-bottom: 1.6rem;}
    .op-other-img{width: 27.4rem; }
    .op-other-img-products{  width: 11.4rem; right: -4rem;}

    /*---------------------------------------------------------------------------------------- 

        Special

    ----------------------------------------------------------------------------------------*/
    .op-special{position: relative; padding: 12.8rem 0 16.8rem 0;}
    .op-special-img{width: 100rem;}
    .op-special-img img{margin: 0 auto; z-index: 1; border-radius: 3rem; overflow: hidden;  max-width: 500px;} 
    .op-special-bg{background: #FEDFF1; z-index: -1; overflow: clip;}
    .op-special-bg-inner{width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: sticky; top: 0;}
    .op-special-bg img{width: 100%;}
}
@media screen and (min-width: 960px) and (max-width: 960px) {
    .op-w-100{  margin-left: 0; }
}

.pane-contents{overflow: clip;}