@charset "UTF-8";

/* ===============================================
  Base — 変数・リセット・タイポグラフィ
=============================================== */

/* ブレイクポイント（mobile-first / min-width）
   sp  : 〜767px   ベース（メディアクエリなし）
   tbs : 768px〜   タブレット縦
   tbl : 1024px〜  タブレット横・小型ノート
   pc  : 1280px〜  デスクトップ
   ※ sp 専用の上書きは max-width: 767px */

/* ==============================
  :root（プロジェクトカラー）
============================== */
:root {
    --color-primary: #B39B36;
    --color-accent: #BF0008;
    --color-text: #111111;

    --color-link: #111111;
    --color-link-hover: var(--color-primary);
    --color-link-visited: #111111;

    --color-black: #111111;
    --color-white: #FFFFFF;
    --color-light-gray: #FAFAF7;
    --color-dark-gray: #8C8C8C;
    --color-gray-btn-shadow: #D1D5DB;

    --color-light-gold: #F7F6F0;

    /* 基準文字 */
    --text-base-sp:  1.6rem;
    --text-base-pc:  1.8rem;
    --text-base-max: 2.2rem;

    /* セクション上下 padding */
    --sec-pd-sm: 3em;    /* 48px */
    --sec-pd-md: 5em;    /* 80px */
    --sec-pd-lg: 7.5em;  /* 120px */
    --sec-pd-first-top: 3em;

    /* inner 縦積み gap */
    --inner-stack-sm: 2em;    /* 32px */
    --inner-stack-md: 3em;    /* 48px */
    --inner-stack-lg: 4.5em;  /* 72px */
}

/* ==============================
  Reset
============================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
    font-size: var(--text-base-sp);
    letter-spacing: 0.06em;
    line-height: 2;
    color: var(--color-text);
    overflow-x: hidden;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* tbs〜tbl: 768px で 16px → 1280px で 18px */
@media (min-width: 768px) {
    body {
        font-size: clamp(
            var(--text-base-sp),
            calc(var(--text-base-sp) + (100vw - 768px) / 256),
            var(--text-base-pc)
        );
    }
}

/* pc: 1280px で 18px → 1920px で 22px */
@media (min-width: 1280px) {
    body {
        font-size: clamp(
            var(--text-base-pc),
            calc(var(--text-base-pc) + (100vw - 1280px) / 160),
            var(--text-base-max)
        );
    }
}

/* ==============================
  基本タグ
============================== */
ul, ol {
    list-style: none;
}

dt, dd, figure, p {
    margin: 0;
}

::spelling-error,
::grammar-error {
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    color: var(--color-link);
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: normal;
    transition: color 0.3s;
}

a img {
    display: inline-block;
}

@media (hover: hover) {
    a:hover {
        color: var(--color-link-hover);
    }
    a:hover img {
        opacity: 0.8;
    }
}

a:visited {
    color: var(--color-link-visited);
}

/* ==============================
  Material Symbols
============================== */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25em;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ==============================
  スクロールバー
============================== */
::-webkit-scrollbar,
.scrollable-element::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
.scrollable-element::-webkit-scrollbar-track {
    background-color: var(--color-light-gray);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb,
.scrollable-element::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover,
.scrollable-element::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--color-primary) 80%, black 20%);
}

/* ==============================
  Typography
============================== */

/* 見出し */
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.heading-1 { font-size: 1.4em; }
.heading-2 { font-size: 1.25em; }
.heading-3 { font-size: 1.15em; }
.heading-4 { font-size: 1.05em; }
.heading-5 { font-size: 1em; }
.heading-6 { font-size: 0.95em; }

@media (min-width: 768px) {
    .heading-1 { font-size: 2.364em; } /* 52px */
    .heading-2 { font-size: 2.182em; } /* 48px */
    .heading-3 { font-size: 1.818em; } /* 40px */
    .heading-4 { font-size: 1.591em; } /* 35px */
    .heading-5 { font-size: 1.364em; } /* 30px */
    .heading-6 { font-size: 1.227em; } /* 27px */
}

/* 本文テキスト */
.txt-lead {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.txt {
    line-height: 2;
    letter-spacing: 0.05em;
}

.txt-caption {
    font-size: 0.818em; /* 18px */
    line-height: 1.6;
    color: var(--color-dark-gray);
}

/* テキストグループ */
.txt-group {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

/* フォントファミリー・ウェイト */
.font-gothic {
    font-family: '游ゴシック', 'YuGothic', 'MS PGothic', 'ＭＳ Ｐゴシック', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
}

.font-min {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
}

.font-en {
    font-family: 'Oswald', sans-serif;
}

.font-italic { font-style: italic; }
.font-en-medium { font-weight: 500; }
.font-bold { font-weight: 700 !important; }
.font-black { font-weight: 900; }

/* 文字サイズ */
.fz-xl { font-size: 1.364em !important; } /* 30px */
.fz-lg { font-size: 1.227em !important; } /* 27px */
.fz-md { font-size: 1em !important; }    /* 22px */
.fz-sm { font-size: 0.636em !important; } /* 14px */
.fz-xs { font-size: 0.545em !important; } /* 12px */

.lh-lg { line-height: 2 !important; }
.lh-md { line-height: 1.8 !important; }
.lh-sm { line-height: 1.6 !important; }
.lh-xs { line-height: 1.4 !important; }