/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;

    font-size:16px;

}

body{

    font-family:"Noto Sans JP",sans-serif;

    color:#ffffff;

    background:#111111;

    line-height:1.8;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

a{

    text-decoration:none;

    color:inherit;

    transition:.35s ease;

}

img{

    display:block;

    width:100%;

    height:auto;

}

ul,
ol{

    list-style:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font:inherit;

}


/* ==========================================================
   HEADER
========================================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:84px;

    z-index:1000;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    background:rgba(0,0,0,.18);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.header .wrap,
.header-inner{

    width:min(1240px,92%);

    height:100%;

    margin:0 auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo,
.header-logo{

    font-size:1.55rem;

    font-weight:700;

    letter-spacing:.22em;

    color:#ffffff;

}

.btn-header,
.header-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:180px;

    height:52px;

    border-radius:999px;

    background:#D6B15A;

    color:#111111;

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.08em;

}

.btn-header:hover,
.header-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(214,177,90,.28);

}


/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

    width:100%;

    min-height:100vh;

    overflow:hidden;

}
.hero-bg{

    position:absolute;
    inset:0;

    background-image:url("../img/01_fv/fv-hero-v01.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;

    transform:scale(1.08);

    animation:heroZoom 6s ease-out forwards;

    z-index:0;

}
    

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        rgba(0,0,0,.82) 0%,

        rgba(0,0,0,.60) 30%,

        rgba(0,0,0,.28) 58%,

        rgba(0,0,0,.05) 100%

    );

    z-index:1;

}


/* ==========================================================
   HERO CONTAINER
========================================================== */

.hero-container{

    position:relative;

    z-index:2;

    width:min(1240px,92%);

    min-height:100vh;

    margin:0 auto;

    padding-top:140px;

    padding-bottom:140px;

    display:flex;

    align-items:center;

}

.hero-content{

    width:100%;

    max-width:620px;

    position:relative;

    z-index:3;

}
/* ==========================================================
   BRAND
========================================================== */

.hero-brand{

    margin-bottom:36px;

}

.brand-logo{

    font-family:"Noto Serif JP",serif;

    font-size:2.35rem;

    font-weight:500;

    line-height:1.15;

    letter-spacing:.04em;

    color:#ffffff;

    margin-bottom:8px;

}

.brand-sub{

    display:inline-block;

    font-size:.82rem;

    font-weight:500;

    letter-spacing:.32em;

    text-transform:uppercase;

    color:#D6B15A;

}


/* ==========================================================
   HERO TITLE
========================================================== */

.hero-title{

    margin-top:24px;

    margin-bottom:34px;

    font-family:"Noto Serif JP",serif;

     font-size:2.2rem;

    font-weight:700;

    line-height:1.4;

    letter-spacing:.02em;
    word-break: keep-all;

    color:#ffffff;

    text-wrap:balance;

    text-shadow:

        0 4px 18px rgba(0,0,0,.28);

}


/* ==========================================================
   HERO DESCRIPTION
========================================================== */

.hero-description{
    line-height:1.9;
    margin-bottom:28px;
}


/* ==========================================================
   GOLD LINE
========================================================== */

.hero-line{
    margin-bottom:28px;
}

.hero-line::after{

    content:"";

    position:absolute;

    left:0;

    top:-3px;

    width:18px;

    height:8px;

    background:#D6B15A;

    border-radius:999px;

    opacity:.35;

}
/* ==========================================================
   PRICE
========================================================== */

.hero-price{

    margin-bottom:36px;

}

.price-label{

    display:block;

    margin-bottom:12px;

    font-size:.92rem;

    font-weight:500;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#D6B15A;

}

.price-box{

    display:flex;

    align-items:flex-end;

    gap:10px;

}

.price-main{

    font-family:"Noto Serif JP",serif;

    font-size:clamp(4rem,7vw,5.8rem);

    font-weight:700;

    line-height:1;

    color:#ffffff;

    letter-spacing:-.03em;

}

.price-tax{

    font-size:1rem;

    font-weight:400;

    color:rgba(255,255,255,.82);

    margin-bottom:12px;

    letter-spacing:.08em;

}


/* ==========================================================
   CTA BUTTON
========================================================== */

.hero-btn{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:340px;

    height:64px;

    padding:0 32px;

    border:1px solid rgba(214,177,90,.85);

    border-radius:999px;

    background:rgba(255,255,255,.02);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#ffffff;

    font-size:.98rem;

    font-weight:600;

    letter-spacing:.08em;

    transition:

        background .35s ease,

        color .35s ease,

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

.hero-btn:hover{

    background:#D6B15A;

    color:#111111;

    border-color:#D6B15A;

    transform:translateY(-3px);

    box-shadow:0 18px 45px rgba(214,177,90,.30);

}

.hero-btn span:first-child{

    flex:1;

}

.hero-btn-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.28);

    font-size:1.2rem;

    transition:inherit;

}

.hero-btn:hover .hero-btn-arrow{

    border-color:#111111;

}

/* ==========================================================
   FOOTER TEXT
========================================================== */

.hero-footer-left{

    position:absolute;

    left:0;

    bottom:42px;

    font-size:.74rem;

    font-weight:500;

    letter-spacing:.28em;

    color:rgba(255,255,255,.55);

    z-index:5;

}

.hero-footer-right{

    position:absolute;

    right:0;

    bottom:42px;

    font-size:.74rem;

    font-weight:500;

    letter-spacing:.28em;

    color:rgba(255,255,255,.55);

    z-index:5;

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

    .hero-container{

        width:min(1380px,90%);

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

    .hero-container{

        padding-top:100px;

        padding-bottom:100px;

    }

    .hero-content{

        max-width:560px;

    }

    .hero-title{

        font-size:3.4rem;

    }

    .price-main{

        font-size:4.5rem;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

  .hero{

    min-height:100svh;

}

.hero-bg{

    background-position:68% center;

}

    .hero-overlay{

        background:linear-gradient(
            180deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.55) 40%,
            rgba(0,0,0,.78) 100%
        );

    }

    .hero-container{

        min-height:100svh;
        padding:100px 0 60px;
        align-items:flex-end;

    }

    .hero-content{

        max-width:100%;

    }

    .brand-logo{

        font-size:1.9rem;

    }

    .hero-title{
    font-size:2.2rem;
    line-height:1.4;
    letter-spacing:.01em;
}

    .hero-description{

        font-size:.96rem;
        line-height:2;

    }

    .price-main{

        font-size:3.8rem;

    }

    .hero-btn{

        width:100%;
        max-width:360px;

    }

    .hero-footer-left{

        position:static;
        margin-top:40px;
        text-align:center;

    }

    .hero-footer-right{

        display:none;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .hero-title{

        font-size:2.1rem;

    }

    .hero-description{

        font-size:.92rem;

    }

    .price-main{

        font-size:2.8rem;

    }

}
/* ==========================================================
   BENEFIT
========================================================== */

.benefit{

    padding:140px 0;

    background:#111111;

}

.benefit-inner{

    width:min(1180px,90%);

    margin:0 auto;

}

.section-en{

    margin-bottom:28px;

    font-size:.9rem;

    letter-spacing:.35em;

    font-weight:600;

    color:#D6B15A;

}

.section-title{

    margin-bottom:36px;

    font-family:"Noto Serif JP",serif;

    font-weight:600;

    line-height:1.32;

    letter-spacing:.02em;

}

@media(max-width:768px){

    .section-title{

        margin-bottom:28px;

        line-height:1.38;

    }

}

.section-text{

    margin-bottom:70px;

    color:rgba(255,255,255,.82);

    line-height:2.05;

    font-size:1.05rem;

}

@media(max-width:768px){

    .section-text{

        margin-bottom:56px;

        line-height:2;

        font-size:1rem;

    }

}
.benefit-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.benefit-card{

    padding:44px;

    border:1px solid rgba(214,177,90,.18);

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-6px);

    border-color:rgba(214,177,90,.55);

}

.benefit-number{

    display:inline-block;

    margin-bottom:24px;

    font-family:"Noto Serif JP",serif;

    font-size:2rem;

    color:#D6B15A;

}

.benefit-card h3{

    font-size:1.3rem;

    margin-bottom:16px;

}

.benefit-card p{

    color:rgba(255,255,255,.78);

    line-height:1.9;

}

@media(max-width:768px){

    .benefit{

        padding:80px 0;

    }

    .section-title{

    line-height:1.38;

}

    .section-text{

    line-height:2;

}

    .benefit-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .benefit-card{

        padding:28px;

    }

}
/* ==========================================================
   PROBLEM
========================================================== */

.problem{

    padding:140px 0;

    background:#0d0d0d;

}

.problem-inner{

    width:min(980px,90%);

    margin:0 auto;

}

.problem-list{

    margin-top:60px;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.problem-list li{

    position:relative;

    padding:28px 30px 28px 72px;

    border:1px solid rgba(214,177,90,.18);

    background:rgba(255,255,255,.02);

    font-size:1.1rem;

    line-height:1.8;

}

.problem-list li::before{

    content:"✓";

    position:absolute;

    left:28px;

    top:50%;

    transform:translateY(-50%);

    width:28px;

    height:28px;

    border-radius:50%;

    background:#D6B15A;

    color:#111;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

}

@media(max-width:768px){

    .problem{

        padding:140px 0;

    }

    .problem-list{

        margin-top:40px;

        gap:16px;

    }

    .problem-list li{

        padding:22px 20px 22px 58px;

        font-size:1rem;

    }

    .problem-list li::before{

        left:18px;

        width:24px;

        height:24px;

        font-size:.85rem;

    }

}
/* ==========================================================
   LIFESTYLE
========================================================== */

.lifestyle{

    background:#111;

    padding:140px 0;

}

.lifestyle-head{

    width:min(1180px,90%);

    margin:0 auto 72px;

}

.lifestyle-gallery{

    display:flex;

    flex-direction:column;

    gap:72px;

}

.lifestyle-gallery figure{

    width:100%;

    margin:0;

}

.lifestyle-gallery img{

    width:100%;

    display:block;

    border-radius:8px;

}

@media(max-width:768px){

    .lifestyle{

        padding:100px 0;

    }

    .lifestyle-head{

        margin-bottom:48px;

    }

    .lifestyle-gallery{

        gap:40px;

    }

    .lifestyle-gallery img{

        border-radius:6px;

    }

}
/* ==========================================================
   FEATURE
========================================================== */

.feature{

    padding:140px 0;

    background:#111111;

}

.feature-inner{

    width:min(1180px,90%);

    margin:0 auto;

}

.feature-grid{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.feature-card{

    padding:42px;

    border:1px solid rgba(214,177,90,.18);

    background:rgba(255,255,255,.02);

}

.feature-number{

    display:block;

    margin-bottom:22px;

    font-family:"Noto Serif JP",serif;

    font-size:2rem;

    color:#D6B15A;

}

.feature-card h3{

    margin-bottom:18px;

    font-size:1.4rem;

    font-weight:700;

}

.feature-card p{

    color:rgba(255,255,255,.78);

    line-height:1.9;

}

@media(max-width:768px){

    .feature{

        padding:80px 0;

    }

    .feature-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:40px;

    }

    .feature-card{

        padding:30px;

    }

}
/* ==========================================================
   PRICE
========================================================== */

.price{

    padding:140px 0;

    background:#0d0d0d;

}

.price-inner{

    width:min(920px,90%);

    margin:0 auto;

    text-align:center;

}

.price-card{

    margin-top:60px;

    padding:60px 40px;

    border:1px solid rgba(214,177,90,.25);

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );

}

.price-label{

    display:inline-block;

    margin-bottom:20px;

    padding:8px 22px;

    border:1px solid #D6B15A;

    color:#D6B15A;

    font-size:.85rem;

    letter-spacing:.18em;

}

.price-menu{

    margin-bottom:18px;

    font-size:1.4rem;

    font-weight:700;

}

.price-value{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:10px;

}

.price-number{

    font-family:"Noto Serif JP",serif;

    font-size:clamp(4rem,8vw,5.8rem);

    line-height:1;

}

.price-unit{

    margin-bottom:12px;

    color:rgba(255,255,255,.75);

}

.price-note{

    margin-top:36px;

    display:flex;

    justify-content:center;

    gap:28px;

    flex-wrap:wrap;

    color:rgba(255,255,255,.65);

    font-size:.92rem;

}

@media(max-width:768px){

    .price{

        padding:140px 0;

    }

    .price-card{

        margin-top:40px;

        padding:40px 24px;

    }

    .price-menu{

        font-size:1.2rem;

    }

    .price-number{

        font-size:3.8rem;

    }

    .price-note{

        flex-direction:column;

        gap:10px;

    }

}
/* ==========================================================
   FAQ
========================================================== */

.faq{

    padding:140px 0;

    background:#111111;

}

.faq-inner{

    width:min(920px,90%);

    margin:0 auto;

}

.faq-list{

    margin-top:60px;

}

.faq-item{

    border-top:1px solid rgba(214,177,90,.18);

}

.faq-item:last-child{

    border-bottom:1px solid rgba(214,177,90,.18);

}

.faq-item summary{

    display:flex;

    align-items:center;

    gap:20px;

    padding:28px 0;

    cursor:pointer;

    list-style:none;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-q{

    color:#D6B15A;

    font-family:"Noto Serif JP",serif;

    font-size:1.4rem;

    flex-shrink:0;

}

.faq-question{

    flex:1;

    font-size:1.12rem;

    font-weight:700;

    line-height:1.6;

}

.faq-icon{

    width:34px;

    text-align:center;

    color:#D6B15A;

    font-size:2rem;

    font-weight:300;

    line-height:1;

    transition:.35s;

    flex-shrink:0;

}

.faq-item[open] .faq-icon{

    transform:rotate(45deg);

}

.faq-answer{

    padding:0 54px 28px;

}

.faq-answer p{

    color:rgba(255,255,255,.78);

    line-height:2;

}

@media(max-width:768px){

    .faq{

        padding:140px 0;

    }

    .faq-list{

        margin-top:40px;

    }

    .faq-item summary{

        gap:14px;

        padding:22px 0;

        align-items:flex-start;

    }

    .faq-q{

        font-size:1.2rem;

    }

    .faq-question{

        font-size:1rem;

    }

    .faq-icon{

        font-size:1.8rem;

        width:28px;

    }

    .faq-answer{

        padding:0 0 22px 38px;

    }

}
/* ==========================================================
   CTA
========================================================== */

.cta{

    padding:140px 0;

    background:#0d0d0d;

}

.cta-inner{

    width:min(760px,90%);

    margin:0 auto;

    text-align:center;

}

.cta-price{

    margin:60px 0 40px;

}

.cta-menu{

    display:block;

    margin-bottom:18px;

    font-size:1.15rem;

    font-weight:700;

    color:#D6B15A;

    letter-spacing:.12em;

}

.cta-value{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:10px;

}

.cta-number{

    font-family:"Noto Serif JP",serif;

    font-size:clamp(4rem,8vw,6rem);

    line-height:1;

    color:#ffffff;

}

.cta-unit{

    margin-bottom:12px;

    color:rgba(255,255,255,.75);

}

.cta-btn{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:min(420px,100%);

    height:72px;

    margin:0 auto;

    padding:0 30px;

    border-radius:999px;

    border:1px solid #D6B15A;

    color:#ffffff;

    background:rgba(255,255,255,.02);

}

.cta-arrow{

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.3);

    display:flex;

    align-items:center;

    justify-content:center;

}

.cta-note{

    margin-top:40px;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px 28px;

}

.cta-note li{

    color:rgba(255,255,255,.72);

    font-size:.95rem;

}

@media(max-width:768px){

    .cta{

        padding:80px 0;

    }

    .cta-price{

        margin:40px 0 30px;

    }

    .cta-number{

        font-size:3.8rem;

    }

    .cta-btn{

        height:64px;

        padding:0 24px;

    }

    .cta-arrow{

        width:36px;

        height:36px;

    }

    .cta-note{

        flex-direction:column;

        gap:10px;

    }

}
/* ==========================================================
   SHOP INFORMATION
========================================================== */

.shop-info{

    padding:140px 0;

    background:#111111;

}

.shop-inner{

    width:min(900px,90%);

    margin:0 auto;

}

.shop-card{

    margin-top:60px;

    padding:48px;

    border:1px solid rgba(214,177,90,.18);

    background:rgba(255,255,255,.02);

}

.shop-category{

    color:#D6B15A;

    letter-spacing:.28em;

    font-size:.8rem;

    margin-bottom:12px;

}

.shop-name{

    font-family:"Noto Serif JP",serif;

    font-size:2rem;

    margin-bottom:40px;

}

.shop-table{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.shop-row{

    display:grid;

    grid-template-columns:140px 1fr;

    padding-bottom:20px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.shop-row:last-child{

    border:none;

    padding-bottom:0;

}

.shop-row dt{

    color:#D6B15A;

    font-weight:700;

}

.shop-row dd{

    color:rgba(255,255,255,.86);

    line-height:1.9;

}

.shop-row a{

    color:#ffffff;

}


/* ==========================================================
   FOOTER
========================================================== */

.footer{

    padding:80px 0;

    background:#090909;

    border-top:1px solid rgba(214,177,90,.15);

}

.footer-inner{

    width:min(900px,90%);

    margin:0 auto;

    text-align:center;

}

.footer-sub{

    color:#D6B15A;

    letter-spacing:.3em;

    font-size:.78rem;

    margin-bottom:18px;

}

.footer-logo{

    width:220px;

    margin:0 auto 40px;

}

.footer-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:320px;

    height:64px;

    margin:0 auto 40px;

    border:1px solid #D6B15A;

    border-radius:999px;

    color:#ffffff;

    transition:.35s;

}

.footer-btn:hover{

    background:#D6B15A;

    color:#111111;

}

.footer-copy{

    color:rgba(255,255,255,.5);

    font-size:.85rem;

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .shop-info{

        padding:80px 0;

    }

    .shop-card{

        padding:30px 24px;

        margin-top:40px;

    }

    .shop-name{

        font-size:1.6rem;

        margin-bottom:28px;

    }

    .shop-row{

        grid-template-columns:1fr;

        gap:8px;

    }

    .shop-row dt{

        margin-bottom:4px;

    }

    .footer{

        padding:60px 0;

    }

    .footer-logo{

        width:170px;

        margin-bottom:30px;

    }

    .footer-btn{

        width:100%;

        max-width:340px;

    }

}
/* ==========================================================
   SECTION
========================================================== */

section{

    padding:140px 0;

}

@media(max-width:768px){

    section{

        padding:100px 0;

    }

}
.section-inner{

    width:min(1120px,90%);

    margin:0 auto;

}

@media(max-width:768px){

    .section-inner{

        width:min(92%,560px);

    }

}
.section-en{

    display:inline-block;

    margin-bottom:28px;

    color:#D6B15A;

    font-size:.88rem;

    font-weight:600;

    letter-spacing:.38em;

    text-transform:uppercase;

}
/* ==========================================================
   SCROLL ANIMATION
========================================================== */
/* ==========================================================
   SCROLL ANIMATION
========================================================== */

/* 初期状態 */
.benefit-inner,
.problem-inner,
.lifestyle-head,
.lifestyle-gallery,
.feature-inner,
.price-inner,
.faq-inner,
.cta-inner,
.shop-inner{

    opacity:0;
    transform:translateY(50px);
    filter:blur(8px);

    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        transform .9s cubic-bezier(.22,1,.36,1),
        filter .9s cubic-bezier(.22,1,.36,1);

}

/* 表示 */
.benefit.is-visible .benefit-inner,
.problem.is-visible .problem-inner,
.lifestyle.is-visible .lifestyle-head,
.lifestyle.is-visible .lifestyle-gallery,
.feature.is-visible .feature-inner,
.price.is-visible .price-inner,
.faq.is-visible .faq-inner,
.cta.is-visible .cta-inner,
.shop-info.is-visible .shop-inner{

    opacity:1;
    transform:translateY(0);
    filter:blur(0);

}
/* ==========================================================
   STAGGER ANIMATION
========================================================== */

.is-visible .section-en,
.is-visible .section-title,
.is-visible .section-text,
.is-visible .benefit-card,
.is-visible .problem-list li,
.is-visible .feature-card,
.is-visible .price-card,
.is-visible .faq-item,
.is-visible .cta-price,
.is-visible .cta-btn,
.is-visible .cta-note,
.is-visible .shop-card,
.is-visible .lifestyle-gallery figure{

    animation:fadeUp .9s cubic-bezier(.22,1,.36,1) both;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}
/* ==========================================================
   DELAY
========================================================== */

.is-visible .section-en{animation-delay:.05s;}

.is-visible .section-title{animation-delay:.15s;}

.is-visible .section-text{animation-delay:.30s;}


/* Benefit */

.is-visible .benefit-card:nth-child(1){animation-delay:.45s;}
.is-visible .benefit-card:nth-child(2){animation-delay:.55s;}
.is-visible .benefit-card:nth-child(3){animation-delay:.65s;}
.is-visible .benefit-card:nth-child(4){animation-delay:.75s;}


/* Problem */

.is-visible .problem-list li:nth-child(1){animation-delay:.40s;}
.is-visible .problem-list li:nth-child(2){animation-delay:.50s;}
.is-visible .problem-list li:nth-child(3){animation-delay:.60s;}
.is-visible .problem-list li:nth-child(4){animation-delay:.70s;}
.is-visible .problem-list li:nth-child(5){animation-delay:.80s;}


/* Lifestyle */

.is-visible .lifestyle-gallery figure:nth-child(1){animation-delay:.40s;}
.is-visible .lifestyle-gallery figure:nth-child(2){animation-delay:.55s;}
.is-visible .lifestyle-gallery figure:nth-child(3){animation-delay:.70s;}
.is-visible .lifestyle-gallery figure:nth-child(4){animation-delay:.85s;}
.is-visible .lifestyle-gallery figure:nth-child(5){animation-delay:1s;}


/* Feature */

.is-visible .feature-card:nth-child(1){animation-delay:.45s;}
.is-visible .feature-card:nth-child(2){animation-delay:.55s;}
.is-visible .feature-card:nth-child(3){animation-delay:.65s;}
.is-visible .feature-card:nth-child(4){animation-delay:.75s;}


/* FAQ */

.is-visible .faq-item:nth-child(1){animation-delay:.40s;}
.is-visible .faq-item:nth-child(2){animation-delay:.50s;}
.is-visible .faq-item:nth-child(3){animation-delay:.60s;}
.is-visible .faq-item:nth-child(4){animation-delay:.70s;}
.is-visible .faq-item:nth-child(5){animation-delay:.80s;}


/* CTA */

.is-visible .cta-price{animation-delay:.35s;}
.is-visible .cta-btn{animation-delay:.55s;}
.is-visible .cta-note{animation-delay:.75s;}


/* SHOP */

.is-visible .shop-card{animation-delay:.35s;}
/* ==========================================================
   HERO ANIMATION
========================================================== */


/* テキスト */

.hero-brand,
.hero-title,
.hero-description,
.hero-line,
.hero-price,
.hero-btn{

    opacity:0;

    transform:translateY(32px);

    animation:heroFade 1s cubic-bezier(.22,1,.36,1) forwards;

}

.hero-brand{

    animation-delay:.25s;

}

.hero-title{

    animation-delay:.45s;

}

.hero-description{

    animation-delay:.70s;

}

.hero-line{

    animation-delay:.90s;

}

.hero-price{

    animation-delay:1.05s;

}

.hero-btn{

    animation-delay:1.25s;

}

/* Keyframes */

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(32px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   BUTTON SHINE
========================================================== */

.hero-btn,
.cta-btn,
.footer-btn{

    position:relative;
    overflow:hidden;
    isolation:isolate;

}

.hero-btn::before,
.cta-btn::before,
.footer-btn::before{

    content:"";

    position:absolute;

    top:-40%;
    left:-35%;

    width:28%;
    height:180%;

    background:rgba(255,255,255,.35);

    filter:blur(12px);

    transform:translateX(-350%) rotate(20deg);

    animation:shine 4.5s linear infinite;

    pointer-events:none;

}

@keyframes shine{

    0%{

        transform:translateX(-350%) rotate(20deg);

    }

    20%{

        transform:translateX(550%) rotate(20deg);

    }

    100%{

        transform:translateX(550%) rotate(20deg);

    }

}
/* ==========================================================
   PREMIUM CARD HOVER
========================================================== */

.benefit-card,
.feature-card{

    position:relative;
    overflow:hidden;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s cubic-bezier(.22,1,.36,1),
        background .45s cubic-bezier(.22,1,.36,1);

}

.benefit-card::before,
.feature-card::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        rgba(214,177,90,.08),
        transparent 55%
    );

    opacity:0;

    transition:opacity .45s cubic-bezier(.22,1,.36,1);

    pointer-events:none;

}

.benefit-card:hover,
.feature-card:hover{

    transform:translateY(-10px);

    border-color:rgba(214,177,90,.55);

    background:rgba(255,255,255,.045);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        0 0 0 1px rgba(214,177,90,.12);

}

.benefit-card:hover::before,
.feature-card:hover::before{

    opacity:1;

}
/* ==========================================================
   IMAGE HOVER
========================================================== */

.lifestyle-gallery{

    overflow:hidden;

}

.lifestyle-gallery figure{

    overflow:hidden;

    border-radius:8px;

}

.lifestyle-gallery img{

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .8s cubic-bezier(.22,1,.36,1);

    transform:scale(1);

}

.lifestyle-gallery figure:hover img{

    transform:scale(1.04);

    filter:brightness(1.05);

}
/* ==========================================================
   HEADER SCROLL
========================================================== */

.header{

    transition:
        background .45s cubic-bezier(.22,1,.36,1),
        backdrop-filter .45s cubic-bezier(.22,1,.36,1),
        border-color .45s cubic-bezier(.22,1,.36,1),
        box-shadow .45s cubic-bezier(.22,1,.36,1);

}

.header.is-scrolled{

    background:rgba(10,10,10,.82);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border-bottom:1px solid rgba(214,177,90,.18);

    box-shadow:0 10px 30px rgba(0,0,0,.25);

}
@keyframes heroZoom{

    from{

        transform:scale(1.08);

    }

    to{

        transform:scale(1);

    }

}
.header-logo{

    display:flex;
    align-items:center;

}

.header-logo-img{

    width:180px;
    height:auto;
    display:block;

}

@media(max-width:768px){

    .header{

        height:72px;

    }

    .header-logo-img{

        width:145px;

    }

    .header-btn{

        width:140px;
        height:44px;
        font-size:.82rem;

    }

}
/* ==========================================================
   SHOP MAP
========================================================== */

.shop-map{

    margin-top:48px;

    border-radius:12px;

    overflow:hidden;

    border:1px solid rgba(214,177,90,.18);

    box-shadow:0 18px 40px rgba(0,0,0,.25);

}

.shop-map iframe{

    display:block;

    width:100%;

}