/* ==================================================
   FAQ / GUIDE — EDITORIAL WHITE PATCH
   Load this AFTER style-clean-final.css
================================================== */

.faq-page .faq-list{
    width:100%;
    max-width:680px;
    margin:0 auto;
    background:#fff;
}

.faq-page .faq-item,
.faq-page .faq-item:hover,
.faq-page .faq-item.active,
.faq-page .faq-item:has(.faq-answer.active){
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    margin:0;
    padding:0;
    border:0;
    border-bottom:1px solid #dedede;
    background:#fff;
    box-shadow:none;
    overflow:visible;
}

.faq-page .faq-item:first-child{
    border-top:1px solid #dedede;
}

.faq-page .faq-number,
.faq-page .faq-item.active .faq-number,
.faq-page .faq-item:has(.faq-answer.active) .faq-number{
    width:50px;
    min-width:50px;
    height:54px;
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 0 0 4px;
    border:0;
    background:#fff;
    color:#77716a;
    font-size:11px;
    font-weight:400;
    line-height:1;
    letter-spacing:.08em;
}

.faq-page .faq-question,
.faq-page .faq-question:hover,
.faq-page .faq-question:active,
.faq-page .faq-question:visited{
    flex:1;
    height:54px;
    min-height:54px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:minmax(0,1fr) 18px;
    align-items:center;
    column-gap:10px;
    padding:0 4px 0 0;
    background:#fff;
    color:#393633;
    font-size:12px;
    font-weight:400;
    line-height:1.45;
    letter-spacing:.025em;
    text-align:left;
}

.faq-page .faq-question > *:not(.faq-icon){
    min-width:0;
    margin:0;
    padding:0;
    text-align:left;
}

.faq-page .faq-icon,
.faq-page .faq-question .faq-icon{
    width:18px;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#8f816f;
    font-size:10px;
    line-height:1;
}

.faq-page .faq-answer,
.faq-page .faq-answer.active{
    width:100%;
    padding:0 18px 20px 50px;
    border:0;
    background:#fff;
}

.faq-page .faq-answer.active{
    padding-top:8px;
}

.faq-page .faq-answer p{
    max-width:none;
    margin:0;
    background:#fff;
    color:#5b5650;
    font-size:11px;
    font-weight:400;
    line-height:2;
    letter-spacing:.015em;
    text-align:left;
}

.faq-page .faq-answer p + p{
    margin-top:10px;
}

@media(max-width:768px){

    .faq-page .faq-list{
        width:calc(100% - 24px);
        max-width:340px;
        margin:0 auto;
    }

    .faq-page .faq-number{
        width:42px;
        min-width:42px;
        height:56px;
        min-height:56px;
        font-size:10px;
    }

    .faq-page .faq-question{
        height:56px;
        min-height:56px;
        grid-template-columns:minmax(0,1fr) 16px;
        column-gap:8px;
        padding-right:2px;
        font-size:10.5px;
        line-height:1.5;
    }

    .faq-page .faq-icon,
    .faq-page .faq-question .faq-icon{
        width:16px;
        font-size:9px;
    }

    .faq-page .faq-answer,
    .faq-page .faq-answer.active{
        padding:0 10px 20px 42px;
    }

    .faq-page .faq-answer.active{
        padding-top:8px;
    }

    .faq-page .faq-answer p{
        font-size:9.5px;
        line-height:2;
    }
}

/* ==================================================
   FAQ / GUIDE — FINAL CENTERED ROW + WIDER DESKTOP
   - Centers question text vertically within divider rows
   - Widens desktop FAQ area
================================================== */

@media(min-width:769px){

    .faq-page .faq-list{
        max-width:820px;
    }

    .faq-page .faq-number{
        height:60px;
        min-height:60px;
    }

    .faq-page .faq-question{
        height:60px;
        min-height:60px;
        display:grid;
        grid-template-columns:minmax(0,1fr) 18px;
        align-items:center;
        padding-top:0;
        padding-bottom:0;
    }

    .faq-page .faq-question > *:not(.faq-icon){
        align-self:center;
        display:flex;
        align-items:center;
        min-height:100%;
    }
}

@media(max-width:768px){

    .faq-page .faq-number{
        height:58px;
        min-height:58px;
    }

    .faq-page .faq-question{
        height:58px;
        min-height:58px;
        align-items:center;
        padding-top:0;
        padding-bottom:0;
    }

    .faq-page .faq-question > *:not(.faq-icon){
        align-self:center;
        display:flex;
        align-items:center;
        min-height:100%;
    }
}

/* ==================================================
   FAQ / GUIDE — BALANCED FINAL ADJUSTMENT
   Smaller desktop width, true vertical centering,
   and tighter mobile rows.
================================================== */

@media(min-width:769px){

    .faq-page .faq-list{
        max-width:740px;
    }

    .faq-page .faq-number{
        width:46px;
        min-width:46px;
        height:52px;
        min-height:52px;
        font-size:10.5px;
    }

    .faq-page .faq-question{
        height:52px;
        min-height:52px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding:0 8px 0 0;
        font-size:11.5px;
        line-height:1.35;
    }

    .faq-page .faq-question > *:not(.faq-icon){
        min-height:0;
        margin:0;
        padding:0;
        display:block;
        line-height:1.35;
        text-align:left;
    }

    .faq-page .faq-icon,
    .faq-page .faq-question .faq-icon{
        margin-left:auto;
        width:18px;
        flex:0 0 18px;
    }
}

@media(max-width:768px){

    .faq-page .faq-list{
        width:calc(100% - 34px);
        max-width:320px;
    }

    .faq-page .faq-number{
        width:38px;
        min-width:38px;
        height:44px;
        min-height:44px;
        font-size:9px;
    }

    .faq-page .faq-question{
        height:44px;
        min-height:44px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding:0 6px 0 0;
        font-size:9.5px;
        line-height:1.35;
        letter-spacing:.01em;
    }

    .faq-page .faq-question > *:not(.faq-icon){
        min-height:0;
        margin:0;
        padding:0;
        display:block;
        line-height:1.35;
        text-align:left;
    }

    .faq-page .faq-icon,
    .faq-page .faq-question .faq-icon{
        margin-left:auto;
        width:14px;
        flex:0 0 14px;
        font-size:8px;
    }

    .faq-page .faq-answer,
    .faq-page .faq-answer.active{
        padding:6px 8px 16px 38px;
    }

    .faq-page .faq-answer p{
        font-size:9px;
        line-height:1.9;
    }
}

/* ==================================================
   FAQ / GUIDE — H2 MARGIN RESET
   The question is an <h2>, so the browser's default
   heading margins were pushing the text upward.
================================================== */

.faq-page h2.faq-question{
    margin:0;
    padding-top:0;
    padding-bottom:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    line-height:1.35;
}

.faq-page h2.faq-question .faq-icon{
    margin-left:auto;
    align-self:center;
}

@media(max-width:768px){

    .faq-page h2.faq-question{
        margin:0;
        padding-top:0;
        padding-bottom:0;
        display:flex;
        align-items:center;
        line-height:1.35;
    }
}

/* ==================================================
   FAQ / GUIDE — MOBILE FINISH + INTERACTION
   - Centers and reduces the mobile tabs
   - Gives the FAQ list balanced side margins
   - Makes mobile rows more compact
   - Uses a subtle warm-gray hover/focus color
================================================== */

/* Desktop interaction: subtle and easy to understand */
@media (hover:hover) and (pointer:fine){

    .faq-page .faq-question{
        transition:
            color .22s ease,
            transform .22s ease;
        transform-origin:left center;
    }

    .faq-page .faq-question:hover{
        color:#81715f;
        transform:scale(1.012);
    }

    .faq-page .faq-question:hover .faq-icon{
        color:#81715f;
    }
}

.faq-page .faq-question:focus-visible{
    color:#81715f;
    outline:1px solid #cfc6bb;
    outline-offset:4px;
}

.faq-page .faq-question.open,
.faq-page .faq-question.open .faq-icon{
    color:#81715f;
}

/* Mobile-only finishing */
@media(max-width:768px){

    .faq-page{
        padding-left:20px;
        padding-right:20px;
    }

    .faq-page > .plan-intro{
        max-width:280px;
        margin-left:auto;
        margin-right:auto;
        font-size:8px;
        line-height:1.9;
        letter-spacing:.01em;
    }

    .faq-page .faq-tabs{
        justify-content:center;
        gap:20px;
        width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .faq-page .faq-tabs a{
        font-size:9px;
        letter-spacing:.02em;
        padding-bottom:5px;
    }

    .faq-page .faq-list{
        width:100%;
        max-width:300px;
        margin-left:auto;
        margin-right:auto;
    }

    .faq-page .faq-number{
        width:36px;
        min-width:36px;
        height:40px;
        min-height:40px;
        padding-left:2px;
        font-size:8.5px;
    }

    .faq-page h2.faq-question{
        height:40px;
        min-height:40px;
        padding:0 4px 0 0;
        font-size:9px;
        line-height:1.3;
        letter-spacing:0;
    }

    .faq-page .faq-icon,
    .faq-page .faq-question .faq-icon{
        width:13px;
        flex:0 0 13px;
        font-size:7.5px;
    }

    .faq-page .faq-answer,
    .faq-page .faq-answer.active{
        padding:6px 8px 15px 36px;
    }

    .faq-page .faq-answer p{
        font-size:8.5px;
        line-height:1.9;
    }
}

/* ==================================================
   FAQ / GUIDE — MOBILE TYPOGRAPHY + ACTIVE NUMBER
   - Makes mobile tabs and questions quieter
   - Highlights only the selected question number
================================================== */

/* Selected/open item: emphasize only the number */
.faq-page .faq-item.active .faq-number,
.faq-page .faq-item:has(.faq-answer.active) .faq-number{
    color:#1f1f1f;
    font-weight:600;
}

/* Keep question text itself calm when open */
.faq-page .faq-question.open,
.faq-page .faq-question.open .faq-icon{
    color:#393633;
}

/* Hover: subtle number emphasis instead of recoloring the whole row */
@media (hover:hover) and (pointer:fine){

    .faq-page .faq-item:hover .faq-number{
        color:#1f1f1f;
        font-weight:600;
    }

    .faq-page .faq-question:hover{
        color:#393633;
        transform:scale(1.008);
    }

    .faq-page .faq-question:hover .faq-icon{
        color:#81715f;
    }
}

/* Mobile-only quieter typography */
@media(max-width:768px){

    .faq-page .faq-tabs{
        gap:18px;
    }

    .faq-page .faq-tabs a{
        font-size:8px;
        font-weight:400;
        letter-spacing:.015em;
    }

    .faq-page h2.faq-question{
        font-size:8.5px;
        font-weight:400;
        line-height:1.35;
        letter-spacing:0;
    }

    .faq-page .faq-number{
        font-size:8px;
        font-weight:400;
    }

    .faq-page .faq-item.active .faq-number,
    .faq-page .faq-item:has(.faq-answer.active) .faq-number{
        color:#1f1f1f;
        font-weight:600;
    }
}
/* ===== MOBILE ELEGANT TYPOGRAPHY ===== */

@media (max-width:768px){

    /* 上の説明 */

    .faq-page > .plan-intro{

        font-size:6px !important;

        line-height:2.2;

        letter-spacing:.08em;

    }

    /* タブ */

    .faq-page .faq-tabs a{

        font-size:6.5px !important;

        letter-spacing:.12em;

        font-weight:400;

    }

    /* 番号 */

    .faq-page .faq-number{

        font-size:6.5px !important;

        letter-spacing:.12em;

    }

    /* 質問 */

    .faq-page h2.faq-question{

        font-size:7px !important;

        line-height:1.45;

        font-weight:400;

        letter-spacing:.02em;

    }

    /* 回答 */

    .faq-page .faq-answer p{

        font-size:6.8px !important;

        line-height:2.2;

        letter-spacing:.02em;

    }

}
@media (max-width:768px){

    .faq-page .faq-list{

        width:260px !important;

        max-width:260px !important;

        margin-left:auto !important;

        margin-right:auto !important;

    }

}
/* ===== Mobile: タブだけ少し大きく ===== */

@media (max-width:768px){

    .faq-page .faq-tabs a{

        font-size:9px !important;

        font-weight:500;

        letter-spacing:.04em;

    }

}
/* ===== Mobile：タブをPCと同じように左寄せ ===== */

@media (max-width:768px){

    .faq-page .faq-tabs{

        display:flex;

        justify-content:flex-start !important;

        gap:22px;

        width:260px;

        margin:0 auto 18px;

    }

    .faq-page .faq-tabs a{

        font-size:9px;

        font-weight:500;

        text-align:left;

    }

}