@charset "UTF-8";

/* ============================================================
   BASE.CSS
   共通設計トークン・ベーススタイル
   個別セクションのスタイルはここに書かない
   ============================================================ */


/* ============================================================
   Design Tokens
   ============================================================ */
:root {

    /* ── Background ── */
    --color-bg:                      #FAF7F5;
    --color-bg-gradient-start:       #FAF7F5;
    --color-bg-gradient-mid:         #FCD3CD;
    --color-bg-gradient-end:         #E9A58A;
    --color-white:                   #FFFFFF;

    /* ── Text ── */
    --color-text-main:               #272727;
    --color-text-sub:                #8D8D8D;
    --color-text-accent:             #EA9B8D;

    /* ── Primary (salmon pink) ── */
    --color-primary-main:            #EA9B8D;
    --color-primary-accent:          #D66A4E;
    --color-primary-supplementary:   #F3CEC9;

    /* ── Secondary (warm gray) ── */
    --color-secondary-main:          #E0D8D3;
    --color-secondary-accent:        #BFAFA4;
    --color-secondary-supplementary: #F5EFEB;

    /* ── Divider ── */
    --color-divider:                 #BFAFA4;

    /* ── Typography ── */
    --font-heading:  "Cormorant Garamond", serif; /* 英字見出し・ロゴ */
    --font-body-en:  "Inter", sans-serif;     /* 英字本文       */
    --font-body-ja:  "Noto Sans JP", sans-serif; /* 日本語本文  */

    /* Fluid font sizes（390px〜1680px で滑らかにスケール） */
    --fs-h1:    clamp(3.2rem, 6vw,   6.4rem);
    --fs-h2:    clamp(2.4rem, 4vw,   4.8rem);
    --fs-h3:    clamp(1.8rem, 2.5vw, 3.2rem);
    --fs-h4:    clamp(1.4rem, 1.8vw, 2.0rem);
    --fs-body:  clamp(1.4rem, 1.2vw, 1.6rem);
    --fs-small: clamp(1.1rem, 0.9vw, 1.2rem);

    /* Line heights */
    --lh-heading: 1.2;
    --lh-body:    1.75;

    /* Letter spacing */
    --ls-heading: 0.01em;  /* Cormorant Garamond 見出し用 */
    --ls-body:    0.04em;  /* 日本語本文・説明テキスト用   */

    /* ── Layout ── */
    --container-max:  1680px;
    --container-px:   clamp(16px, 7.29vw, 140px);  /* 横余白：1920px 基準 140px / 390px で 28px */
    --section-py:     clamp(64px, 10vw, 160px); /* 縦余白：390px で 64px、広い画面で最大 160px */

    /* ── Spacing scale ── */
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:   16px;
    --sp-4:   24px;
    --sp-5:   32px;
    --sp-6:   64px;
    --sp-7:   128px;
    --sp-8:   160px;

    /* ── Border radius ── */
    --radius-sm: clamp(3px, 0.28vw, 4px);
    --radius-md: clamp(6px, 0.56vw, 8px);
    --radius-lg: clamp(12px, 1.11vw, 16px);

    /* ── Transitions ── */
    --transition-base: 300ms ease-out;
    --transition-nav:  500ms ease-in-out;
}


/* ============================================================
   Base Element Overrides
   （reset.css が先に読み込まれる前提。重複は最小化）
   ============================================================ */

/* html: スクロール動作を追加（reset.css に未記載） */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* body: 背景・フォント・カラーを新デザインに更新 */
body {
    background-color: var(--color-bg);
    color: var(--color-text-main);
    font-family: var(--font-body-ja);
    font-size: 1.6rem;   /* html 62.5% ベース → 16px */
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;  /* blob 等の横溢れによるスクロールバーを防ぐ */
}

/* 見出し：serif（Warbler Banner）を共通適用 */
h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: var(--lh-heading);

    /* Figma との差異を縮める
       Figma は kern / liga / calt を自動有効化するがブラウザは明示が必要 */
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    font-variant-ligatures: common-ligatures contextual;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* サブ見出し：Inter（英字系） */
h4, h5, h6 {
    font-family: var(--font-body-en);
    font-weight: 400;
    line-height: var(--lh-heading);
}

/* リンク：hover 色だけ追加（color/text-decoration は reset.css で済み） */
a:hover {
    color: var(--color-text-accent);
    transition: color var(--transition-base);
}

/* 画像：display block を追加（reset.css に未記載） */
img {
    display: block;
}

/* ボタン：フォーム・ハンバーガー等の素地リセット */
button {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: 1;
}

/* 入力フィールド共通リセット */
input,
textarea,
select {
    appearance: none;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-body-en);
    font-size: var(--fs-body);
    color: var(--color-text-main);
    width: 100%;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-sub);
}


/* ============================================================
   Layout Utilities
   ============================================================ */

/* コンテナ：最大幅 1680px・可変横余白 */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

/* セクション共通縦余白（個別セクションで上書き可） */
section {
    padding-block: var(--section-py);
    padding-inline: var(--container-px);
}