/* ==========================
HERO
========================== */
.faq-hero{
    position:relative;
    height:65vh;
    min-height:550px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.faq-hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.faq-hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.55),
        rgba(0,0,0,.20)
    );
}

.faq-hero-content{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:700px;
}

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

.faq-en{
    display:block;
    color:#D5A28A;
    letter-spacing:.35em;
    font-size:12px;
    margin-bottom:15px;
    font-weight:700;
}

.faq-hero h1{
    font-family:'Shippori Mincho',serif;
    font-size:clamp(34px,4vw,55px);
    color:#fff;
    margin-bottom:20px;
}

.faq-hero p{
    color:#fff;
    line-height:2;
}

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

.faq-section{
    background:#FDF8F4;
}

.faq-list{
    max-width:900px;
    margin:0 auto;
}

.faq-item{

    background:#fff;

    border-radius:28px;

    margin-bottom:20px;

    overflow:hidden;

    box-shadow:
    0 15px 50px rgba(0,0,0,.04);

    transition:.4s;
}

.faq-item:hover{

    transform:translateY(-3px);
}

.faq-question{

    display:flex;

    align-items:center;

    gap:20px;

    padding:32px 40px;

    cursor:pointer;
}

.faq-q{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#E8B8A0;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;
}

.faq-question h3{

    flex:1;

    font-size:18px;

    color:#4A433F;

    margin:0;

    font-weight:500;

    line-height:1.8;
}

.faq-icon{

    font-size:28px;

    color:#D5A28A;

    transition:.4s;
}

/* 回答 */

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .5s ease;

    background:#FCF8F4;

    display:flex;

    gap:20px;
}

.faq-a{

    margin:30px 0 30px 40px;

    width:44px;

    height:44px;

    border-radius:50%;

    background:#D5A28A;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;
}

.faq-answer p{

    margin:30px 40px 30px 0;

    color:#666;

    line-height:2.2;
}

/* 開いた状態 */

.faq-item.active .faq-answer{

    max-height:2000px;
}

.faq-item.active .faq-icon{

    transform:rotate(45deg);
}

.faq-tabs{

    display:flex;

    justify-content:center;

    gap:15px;

    margin:60px 0;
}

.faq-tab{

    border:none;

    background:#fff;

    padding:16px 32px;

    border-radius:999px;

    cursor:pointer;

    font-size:15px;

    color:#666;

    transition:.4s;

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

.faq-tab.active{

    background:#D5A28A;

    color:#fff;
}

.faq-tab:hover{

    transform:translateY(-2px);
}

.faq-group{

    display:none;
}

.faq-group.active{

    display:block;
}

/* ========================================
SP
======================================== */

@media(max-width:768px){

    .faq-question{
        padding:24px 20px;
        gap:15px;
    }

    .faq-question h3{
        font-size:15px;
    }

    .faq-a{
        margin-left:20px;
    }

    .faq-answer p{
        margin-right:20px;
        font-size:14px;
    }
}
/* ========================================
CTA
======================================== */

.cta-section{

    background:#FDF8F4;
}

.cta-card{

    max-width:900px;

    margin:0 auto;

    background:#fff;

    padding:90px 60px;

    border-radius:40px;

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(0,0,0,.05);
}

/* 上部ライン */

.cta-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:180px;

    height:4px;

    background:
    linear-gradient(
        90deg,
        #E8B8A0,
        #D5A28A,
        #E8B8A0
    );

    border-radius:999px;
}

/* 装飾 */

.cta-card::after{

    content:"";

    position:absolute;

    right:-80px;

    bottom:-80px;

    width:220px;

    height:220px;

    background:
    radial-gradient(
        circle,
        rgba(232,184,160,.18),
        transparent 70%
    );

    border-radius:50%;
}

.cta-en{

    display:block;

    color:#D5A28A;

    font-size:12px;

    letter-spacing:.35em;

    font-weight:700;

    margin-bottom:20px;
}

.cta-card h2{

    font-family:'Shippori Mincho',serif;

    font-size:clamp(28px,4vw,42px);

    color:#4A433F;

    line-height:1.8;

    margin-bottom:25px;

    font-weight:500;
}

.cta-card p{

    color:#7A6F67;

    line-height:2.2;

    margin-bottom:35px;
}

/* ポイント */

.cta-info{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:45px;
}

.cta-info span{

    background:#F8F2EC;

    color:#7A6F67;

    padding:10px 18px;

    border-radius:999px;

    font-size:13px;
}

/* ボタン */

.cta-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:320px;

    height:64px;

    padding:0 40px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        #D5A28A,
        #E8B8A0
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    letter-spacing:.08em;

    transition:.4s;

    box-shadow:
    0 20px 50px rgba(213,162,138,.25);
}

.cta-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 30px 60px rgba(213,162,138,.35);
}

/* ========================================
SP
======================================== */

@media(max-width:768px){

    .cta-card{

        padding:60px 25px;

        border-radius:28px;
    }

    .cta-card h2{

        font-size:28px;
    }

    .cta-btn{

        min-width:100%;

        height:58px;
    }

    .cta-info{

        gap:10px;
    }

    .cta-info span{

        font-size:12px;
    }

.faq-hero h1{
    font-size:30px;
}
}
@media(max-width:768px){

    .faq-item.active .faq-answer{

        max-height:2000px;

    }

    .faq-answer{

        gap:12px;

    }

    .faq-a{

        margin:25px 0 25px 20px;

    }

    .faq-answer p{

        margin:25px 20px 25px 0;

        font-size:14px;

        line-height:2;

    }

}