@charset "UTF-8";
:root {
    --color-light-gray: #F4F3EF; 	/* ベージュ背景色 */
    --color-brown: #5D4C2E; 		/* 濃いブラウン */
    --color-orange: #E87F00; 		/* オレンジ */
    --color-green: #779851; 		/* 濃い緑 */
    --color-light-green: #85B74C; 	/* 薄い緑 */
}

/* =======================
   FAQ ページ共通
   ======================= */

/* セクション（「予約・支払いに関して」など）のブロック */
.faq-section {
    margin: 100px 0;
}

/* セクション見出し */
.faq .c_h2 {
    text-align: center;
    margin-bottom: 40px;
}

/* Q&A 全体の横幅を制御（中央寄せ） */
.faq-list {
    /* max-width: 60%; */
    width: 75%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 各 Q&A の間隔 */
.faq-item {
    margin-bottom: 56px;
}

/* 質問行 */
.faq-item__q {
    font-weight: 700;
    line-height: 3.2rem;
    color: var(--color-brown);
    font-family: 'Noto Serif JP', serif;
    font-size: 2.0rem;
}

/* 先頭の「Q」アイコン部分 */
.faq-item__icon {
    display: inline-block;
    margin-right: 0.4em;
    color: var(--color-orange); /* サイト全体と同じオレンジ */
    font-weight: 700;
    font-size: 2.4rem;
}

/* 回答テキスト */
.faq-item__a {
    margin-top: 4px;
    line-height: 1.6;
    font-weight: 400;
}

.faq-item__a__hmt {
    margin-top: 20px;
}

/* ●の文章 */
.faq-item__a__select {
    margin-top: 20px;
}

/* ●の文章 上マージン無し */
.faq-item__a__select__nmt {
    margin-top: 0;
}

/* 「≫ ○○はこちら」のリンク */
a.faq-link {
    color: var(--color-brown);
    text-decoration: underline;
}

/* 電話番号リンクをオレンジ色にする */
.faq-list a[href^="tel"] {
    color: var(--color-orange);
    text-decoration: underline;
}

/* =======================
   レスポンシブ対応（SP）
   ======================= */

@media screen and (max-width: 767px) {

    /* ページ全体の左右の余白を持たせる */
    .faq {
        padding: 0 4%;
    }

    /* セクション間の余白を少し詰める */
    .faq-section {
        margin: 40px 0;
    }

    /* 横幅は画面いっぱいに */
    .faq-list {
        width: 87%;
        /* max-width: 100%; */
        margin: 0 auto;
    }

    /* Q&A同士の間隔を少しコンパクトに */
    .faq-item {
        margin-bottom: 24px;
    }

    /* 質問文字を少し小さくする */
    .faq-item__q {
        font-size: 1.7rem;
        line-height: 1.7;
    }

    /* Qアイコンも少し小さくする */
    .faq-item__icon {
        font-size: 2.0rem;
    }

    /* 長文回答の行間を少しだけ詰める */
    .faq-item__a {
        line-height: 1.8;
    }
}