/* ==========================================================
   foundation.css - しげの家 デザインシステム
   PC実測値 + SP(650pxカンプ)基準のVW完全可変設計
   ========================================================== */

:root {
    /* --- 1. 基本色 --- */
    --bg-color: #e4dfd6;
    --text-color: #493d37;
    --white: #ffffff;

    /* --- 2. レイアウト & フォント --- */
    --wrapper-width: 1100px;
    --font-serif: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;

    /* --- 3. PC版：標準タイポグラフィ（下層ページ基準） --- */
    --base-fs: 18px;
    --base-lh: 35px;
    --base-ls: 0.05em;
    --h2-fs: 30px;
    /* 30px デミボールド */
    --h2-ls: 0.1em;
    /* 文字間100 = 0.1em */
    --h2-mt: 60px;
    --h2-mb: 30px;

    /* --- 4. PC版：縦書きタイポグラフィ --- */
    --v-text-fs: 17px;
    --v-text-lh: 3.5;
    --v-text-ls: 0.05em;

    /* --- 5. PC版：ボタン（268x49） --- */
    --btn-w: 268px;
    --btn-h: 49px;
    --btn-bg: #493d37;
    --btn-fs: 15px;
    --btn-ls: 0.1em;
    --btn-pad-l: 55px;

    /* --- 6. PC版：余白スケール --- */
    --space-s: 20px;
    --space-m: 40px;
    --space-l: 80px;
    --space-xl: 120px;
}

/* ==========================================================
   スマホ版：650pxカンプに基づくVW計算法律
   ========================================================== */
@media (max-width: 768px) {
    :root {
        /* タイポグラフィ */
        --sp-base-fs: 3.38vw;
        /* 22px相当 */
        --sp-base-lh: 6.92vw;
        /* 45px相当 */
        --sp-h2-fs: 4.62vw;
        /* 30px相当(30/650*100) */
        --sp-v-text-fs: 3.08vw;
        /* 20px相当 */
        --sp-v-text-lh: 9.23vw;
        /* 60px相当 */

        /* 余白：左右40pxマージンを死守 (40/650*100) */
        --sp-side-padding: 6.15vw;
        --sp-h2-mt: 12.31vw;
        /* 80px相当 */
        --sp-h2-mb: 6.15vw;
        /* 40px相当 */
        --sp-space-l: 18.46vw;
        /* 120px相当 */

        /* ボタン（可変設計） */
        --sp-btn-w: 43.85vw;
        /* 285px/650px相当 */
        --sp-btn-h: 7.69vw;
        /* 50px/650px相当 */
        --sp-btn-fs: 2.77vw;
        /* 18px/650px相当 */
        --sp-btn-pad-l: 3.08vw;
        /* 20px/650px相当 */

        /* 矢印（可変 50x7） */
        --sp-arrow-w: 7.69vw;
        --sp-arrow-h: 1.08vw;
        --sp-arrow-r: 3.08vw;
    }
}

/* ==========================================================
   基本スタイル適用
   ========================================================== */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-serif);
    font-size: var(--base-fs);
    line-height: var(--base-lh);
    letter-spacing: var(--base-ls);
    overflow-x: hidden;
    width: 100%;
    margin: 0;
}

/* --- コンテナ設定：左右マージン40pxの自動化 --- */
.l-container {
    width: 100%;
    max-width: var(--wrapper-width);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .l-container {
        padding-right: var(--sp-side-padding);
        padding-left: var(--sp-side-padding);
    }
}

/* ==========================================================
   見出しルール（下層30px / トップ40px）
   ========================================================== */
h2 {
    font-size: var(--h2-fs);
    letter-spacing: var(--h2-ls);
    margin-top: var(--h2-mt);
    margin-bottom: var(--h2-mb);
    font-weight: 600;
    /* デミボールド */
    text-align: center;
}

/* トップページの見出しだけ大きくする場合に使用 */
.c-h2--top {
    font-size: 40px;
}

@media (max-width: 768px) {
    h2 {
        font-size: var(--sp-h2-fs);
        margin-top: var(--sp-h2-mt);
        margin-bottom: var(--sp-h2-mb);
    }

    .c-h2--top {
        font-size: 6.15vw;
        /* スマホのトップは40px相当 */
    }
}

/* ==========================================================
   共通コンポーネント：ボタン (.c-btn)
   ========================================================== */
.c-btn {
    display: flex;
    align-items: center;
    width: var(--btn-w);
    height: var(--btn-h);
    background-color: var(--btn-bg);
    color: var(--white);
    font-size: var(--btn-fs);
    font-weight: 600;
    letter-spacing: var(--btn-ls);
    text-decoration: none;
    padding-left: var(--btn-pad-l);
    position: relative;
    border-radius: 0;
    transition: opacity 0.3s;
    box-sizing: border-box;
}

.c-btn:hover {
    opacity: 0.8;
}

/* 特殊矢印：PC版（40x12） */
.c-btn::after {
    content: "";
    width: 40px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 11h40M33 1l7 10' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .c-btn {
        width: var(--sp-btn-w);
        height: var(--sp-btn-h);
        font-size: var(--sp-btn-fs);
        padding-left: var(--sp-btn-pad-l);
        margin-left: auto;
        margin-right: auto;
    }

    /* 特殊矢印：スマホ版（50x7） */
    .c-btn::after {
        width: var(--sp-arrow-w);
        height: var(--sp-arrow-h);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='7' viewBox='0 0 50 7'%3E%3Cpath d='M0 6h50M43 0l7 6' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
        right: var(--sp-arrow-r);
    }
}

/* ==========================================================
   ユーティリティ
   ========================================================== */
.u-v-to-h {
    writing-mode: vertical-rl;
}

@media (max-width: 768px) {
    .u-v-to-h {
        writing-mode: horizontal-tb !important;
    }
}