@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - faq.css
   よくあるご質問ページ
======================================== */

/* ========================================
   ページ全体の背景
   ※ 共通（common.css）では faq を含む7ページグループに crepe-color-bg.webp を敷いているが、
     よくあるご質問ページだけベージュの紙目（beige-bg.webp）に差し替える。
   ※ タイル幅は他ページの紙目（white-bg.webp など）と同じ 600px に揃えている。
======================================== */
body.page-faq {
    background-image: url('../images/beige-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

/* ========================================
   本文の幅をブレークポイントごとに切り替える。
   ※ faq.php は .section--pad + .inner--lg（セクション側がパディングを持ち、
     .inner側はmax-widthと中央寄せだけを持つ構成（.sec-links-guide-wrapと同じ考え方）。
     padding-inlineは.section--pad > .innerで。0に打ち消されているので、
     ベース値のmax-widthもgutterを含めず素の幅（--section-width-sm）のままにする。
   ※ 768px以上は下の@mediaで既定の1200pxに上書きする。
   ※ セレクタは.innerと両方含む形（.inner.inner--lg）にして、common.cssの
     .section--pad>.inner.inner--lg（同じ詳細度）と詳細度を揃えている。
     faq.cssはcommon.cssより後に読み込まれるので、同一詳細度でもこちらが勝つ。
======================================== */
.faq-section .inner.inner--lg {
    max-width: var(--section-width-sm);
}

/* 768px以上：セクションの最大幅を880pxに指定する（.inner--lgの既定値を上書き）。 */
@media (min-width: 768px) {
    .faq-section .inner.inner--lg {
        max-width: 880px;
    }
}

/* ========================================
   カテゴリタブ
======================================== */
.faq-tabs {
    position: relative;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-sm);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

/* 内側の縁取り。.faq-cardと同じ手法（額装のような二重の縁）。 */
.faq-tabs::before {
    content: '';
    position: absolute;
    inset: 0.5rem;
    z-index: 1;
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: calc(var(--radius-lg) - 0.5rem);
    pointer-events: none;
}

.faq-tabs > * {
    position: relative;
    z-index: 1;
}

.faq-tabs__label {
    margin-bottom: 0.875rem;
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    color: var(--color-title);
}

.faq-tabs__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.faq-tab {
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-text);
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition), transform var(--transition);
}

.faq-tab:hover {
    border-color: var(--color-gold);
    color: var(--color-primary-dark);
    transform: translateY(-2px);
}

.faq-tab.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

@media (min-width: 576px) {
    .faq-tabs__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media (min-width: 768px) {
    .faq-tabs {
        padding: var(--spacing-md);
    }
    .faq-tabs__label {
        font-size: 1rem;
    }
    .faq-tab {
        font-size: 0.9375rem;
        padding: 0.875rem 1.25rem;
    }
}

/* ========================================
   コンテンツ
======================================== */
.faq-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxl);
}

/* ========================================
   メインカード
======================================== */
.faq-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.faq-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

/* 内側の縁取り。カードの外周そのものではなく、少し内側に控えた位置に敷く
（額装のような二重の縁の見え方。.link-panelなど他のカードと同じ手法で、オーナメント画像の
ような装飾は使わない）。 */
.faq-card::before {
    content: '';
    position: absolute;
    inset: 0.5rem;
    z-index: 1;
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: calc(var(--radius-lg) - 0.5rem);
    pointer-events: none;
    transition: border-color var(--transition);
}

.faq-card.is-open {
    box-shadow: var(--shadow-md);
}

.faq-card.is-open::before {
    border-color: var(--color-gold);
}

/* 質問行。アイコン→「Q.質問」の順で縦に並べ、中心揃えにする。 */
.faq-card__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-sm) 1rem;
    text-align: center;
}

/* 質問ごとに登録できるFont Awesomeアイコン（urlフィールド、未入力時はfa-circle-question）を、
丸バッジ（円形・ゴールドの縁取り）に入れて一番上に単独で置く。 */
.faq-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-light);
    border: 1px solid rgba(191, 160, 106, 0.45);
    color: var(--color-gold);
    font-size: 1.125rem;
}

/* 「Q.」を質問文の先頭に埋め込むバッジ。.faq-sub__headerと同じ手法で、flex + align-items: centerで
確実に上下中央に揃える（vertical-alignだけだとフォントの違いでタカサにズレる）。 */
.faq-card__question {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    text-align: left;
}

.faq-card__q-badge {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 1.05rem;
    color: var(--color-gold);
}

.faq-card__question-text {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.06em;
    color: var(--color-title);
}

/* 回答 */
.faq-card__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-card__answer-inner {
    display: flex;
    gap: 0.625rem;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
    text-align: left;
}

.faq-card__a-badge {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 1.125rem;
    line-height: 1.7;
    color: #C79AA0;
}

.faq-card__answer-text {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text);
}

/* トグルボタン。左右パディングは上の要素（.faq-card__top）と同じvar(--spacing-sm)に揃える。
下パディングは、カードの内側の縁取り（.faq-card::before、inset: 0.5rem）までの
余白を加味して、通常のパディング（0.75rem）に0.5remを足す。 */
.faq-card__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.75rem var(--spacing-sm) calc(0.75rem + 0.5rem);
    border-top: 1px dashed var(--color-border);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--color-primary-dark);
    transition: background-color var(--transition), color var(--transition);
}

.faq-card__toggle:hover {
    color: var(--color-gold);
}

/* テキストと矢印アイコンをまとめて入れるカプセル型のピル。カード幅いっぼい（.faq-card__toggleの幅）に広げる。
通常時の枠線は、.faq-tabと同じ控えめな--color-borderにし（currentColorだとテキストと同じ濃い茶色になり、
白いカードの上で浮いて見えてしまうため）、ホバー時だけゴールドに変わる。 */
.faq-card__toggle-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: border-color var(--transition);
}

.faq-card__toggle:hover .faq-card__toggle-pill {
    border-color: var(--color-gold);
}

.faq-card__toggle-icon {
    font-size: 0.6875rem;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-card.is-open .faq-card__toggle-icon {
    transform: rotate(180deg);
}

@media (min-width: 576px) {
    .faq-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        /* カードの高さは行ごとに揃える（grid の align-items: stretch は行単位で効く）。
           ※ 以前はどれか1枚でも開くと .faq-cards 全体に has-open が付き、
             align-items: start（＝全カードが中身なりの高さ）に切り替わっていた。
             align-items はグリッド全体にかかるので、開いたカードとは関係のない
             上の行のカードまで高さが変わってしまっていた（揃えられていた分が縮む）。 */
        align-items: stretch;
    }

    /* 開いているカードと同じ行のカードだけ、引き伸ばしを解除して中身なりの高さにする。
       これで、カードを開いても隣のカードの背が伸びない。
       ※ 付与するのは faq.js（行の判定は offsetTop の一致で行う）。 */
    .faq-card.is-row-start {
        align-self: start;
    }
}

@media (min-width: 1024px) {
    .faq-card__question-text {
        font-size: 1.0625rem;
    }
}

/* ========================================
   サブ質問（アコーディオン）
======================================== */
.faq-sub__list {
    border-top: 1px solid rgba(191, 160, 106, 0.3);
}

.faq-sub__item {
    border-bottom: 1px solid rgba(191, 160, 106, 0.3);
}

.faq-sub__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.125rem 0.25rem;
    text-align: left;
    transition: color var(--transition);
}

.faq-sub__q-badge {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 1.125rem;
    line-height: 1;
    color: var(--color-gold);
}

.faq-sub__q {
    flex: 1;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: var(--color-title);
}

.faq-sub__toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-primary-dark);
    font-size: 0.625rem;
    transition: background-color var(--transition), border-color var(--transition),
                color var(--transition);
}

.faq-sub__header:hover .faq-sub__toggle {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-white);
}

.faq-sub__toggle-icon {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-sub__item.is-open .faq-sub__toggle {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-white);
}

.faq-sub__item.is-open .faq-sub__toggle-icon {
    transform: rotate(180deg);
}

.faq-sub__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-sub__answer-inner {
    display: flex;
    gap: 0.75rem;
    padding: 0 0.25rem 1.25rem 0.25rem;
}

.faq-sub__a-badge {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 1.125rem;
    line-height: 1.9;
    color: #C79AA0;
}

.faq-sub__answer-text {
    font-size: 0.875rem;
    line-height: 1.9;
    color: var(--color-text);
}

@media (min-width: 768px) {
    .faq-sub__q {
        font-size: 1rem;
    }
    .faq-sub__answer-text {
        font-size: 0.9375rem;
    }
}

/* ========================================
   注意書き
======================================== */
.faq-notice {
    position: relative;
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-lg) var(--spacing-sm);
    /* 白い紙目テクスチャ（white-bg.webp）を敷く（.link-panelなど他のカードと同じ作り）。 */
    background-color: var(--color-bg);
    background-image:
        url('../images/white-bg.webp'),
        var(--img-placeholder);
    background-size: 600px auto, auto;
    background-repeat: repeat, repeat;
    background-position: center, center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    text-align: center;
}

/* 内側の縁取り。額装のような二重の縁（.faq-card::before / .link-panel::before と同じ手法）。線はゴールド。 */
.faq-notice::before {
    content: '';
    position: absolute;
    inset: 0.5rem;
    z-index: 1;
    border: 1px solid var(--color-gold);
    border-radius: calc(var(--radius-lg) - 0.5rem);
    pointer-events: none;
}

/* 中身（タイトル・テキスト・ボタン）を縁の上に出す。 */
.faq-notice > * {
    position: relative;
    z-index: 1;
}

.faq-notice__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

.faq-notice__text {
    margin: 0.75rem 0 var(--spacing-md);
    font-size: 0.875rem;
    /* ベース（576未満）はテキストを左揃えにする。576以上は親（.faq-notice）の中央寄せに従う。 */
    text-align: left;
    color: var(--color-title);
}

@media (min-width: 576px) {
    .faq-notice__text {
        text-align: center;
    }
}

/* 2つのボタンの大きさを揃える。
   ※ flex だと中身の文字数なりの幅になる（「お問い合わせ」と「Instagram」で幅が違う）ので、
     等幅のグリッドにする。width: fit-content と組み合わせることで、
     幅の広い方のボタンに合わせて両方が同じ幅になり、全体は中央寄せのままになる。
   ※ 高さはグリッドの既定（stretch）で自動的に揃う。
   ※ 576px未満は1列（縦並び）、576px以上は2列（横並び）。
   ※ minmax(0, 1fr) にしているのは、狭い端末で横にはみ出さずに縮むようにするため。 */
.faq-notice__btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

/* 576px以上は横並びの2列にする（576px未満は上の1列のまま＝縦並び）。
   ※ 縦並びのときも width: fit-content と 1fr の組み合わせで、
     幅の広い方のボタンに合わせて両方が同じ幅になる。 */
@media (min-width: 576px) {
    .faq-notice__btns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.faq-empty {
    padding: var(--spacing-xl) 0;
    text-align: center;
    color: var(--color-title);
}

@media (min-width: 768px) {
    .faq-notice {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    .faq-notice__title {
        font-size: 1.375rem;
    }
}

/* 注意書きのボタン（.btn--outline＝Instagram）を、お知らせのページャー（.news-pager__num）と
   同じ配色（--color-title-brown 基調）に揃える。.btn--outline は共通クラスなので
   このページ内（.page-faq）にだけスコープする（news-detailなどと同じ手法）。 */
.page-faq .faq-notice .btn--outline {
    color: var(--color-title-brown);
    border-color: var(--color-title-brown);
}

.page-faq .faq-notice .btn--outline:hover {
    background-color: var(--color-title-brown);
    border-color: var(--color-title-brown);
    color: var(--color-text-white);
}