/*
CSS コード案内：この style.css 一つで管理する。

C = Common：全ページで共用するルール
H = Home：ホームページだけに適用するルール
P = Page：子ページ本文に適用するルール
番号は検索用の目印。適用範囲はセレクターで決まり、番号に優先順位はない。

【C：全ページ共通】
C-00 基本設定：ボックスのサイズ計算
  C-00-TYPE 共通書体・文字サイズ・行間（文字設定の編集入口）
C-01 ヘッダーとナビゲーション：基本配置・リンクの変化・言語メニュー
C-02 モバイル表示：メニューの切り替えと狭い画面の配置
C-03 共通フッター：配置・文字・リンクの状態
C-04 ページ内リンク：スクロールの動き

【H：ホームページ専用】
H-00 画像と見出し・段落の下準備
H-01 ページ全体の背景・文字・行間
H-02 産地紹介・商品・ニュースの共通幅と余白
H-03 首画面：イラスト・キャラクター・文字の重ね合わせ
  H-03-E 雲野のひとこと：書体・傾き・画面幅ごとの配置
  H-03-F 前に出る爪先と飾り：元のキャラクターと同じ位置に重ねる
H-04 産地紹介：二列配置・図文配置・番号・区切り線・見出し装飾
  H-04-G スマートフォンの発見手記：見出しと挿絵・本文の読み分け
H-05 商品紹介：見出し・分類表示・四列のカード配置
H-06 ニュース：キャラクター・新聞の配置と紙の影
H-07 一覧リンク：共通の装飾と操作時の表示
H-08 スマートフォン：余白と文字サイズ

【P：子ページ本文】
P-00 共通の本文と見出し
P-01 パンくずと資料一覧
P-02 商品一覧と商品詳細
P-03 ブランド画像と狭い画面対応
P-04 産地紹介プレビュー：O-01〜O-04 の四区画・位置図・日文本文
P-05 雲野のこと：標語・産地への入口・キャラクター・ロゴの見本紙
P-06 新しい子ページ共通：本文・区画・ボタン・案内
P-07 知る・楽しむ：記事一覧・記事本文・目次
P-08 ショッピング：分類・商品資料・販売案内
P-09 法人・企業・お問い合わせ・採用：用途別の配置
P-10 新しい子ページ：幅が狭い画面での最低限の折り返し
P-11 商品一覧・九つの豆の詳細・ドリップバッグ商品情報
P-12 雲野のこと：ブランド理念・キャラクター・ブランドストーリー

2026-10-23：全ページの CSS を代行補完。既存の学習用番号は維持する。
新しい知識は同名の CSS 学習ノートにまとめる。色は現段階の表示用でありブランド色の最終決定ではない。

【値の読み方】
プロパティは「何を変えるか」、値は「どう変えるか」を表す。
各宣言の下に注釈を置き、複数の値は対応する位置に意味を示す。
日本語の表示幅はエディターのフォントによって多少変わる。
margin・padding：一つなら四辺／二つなら上下・左右。
三つなら上・左右・下／四つなら上・右・下・左（時計回り）。
gap：一つなら行間・列間とも同じ／二つなら行間・列間。
border-right・border-bottom：このファイルでは「線幅 線種 色」の順。
clamp(最小値, 希望値, 最大値)：希望値を上下限の範囲に収める。
単位：px = CSS ピクセル、vw = ビューポート幅の 1%、fr = Grid の空き幅の配分単位。
letter-spacing の em は、その要素の文字サイズを基準にする。
% の基準はプロパティによって異なる。各宣言の説明を参照する。

【セレクターの読み方】
.class名 = 同じ class を持つ要素／#id名 = その id を持つ要素。
A B = A の内側にある B／A > B = A の直接の子である B。
カンマで並べたセレクターには、同じ宣言をまとめて適用する。
@media = 条件を満たすときだけ内側のルールを適用する。

Ctrl + F で「[番号] 開始」を検索する。
編集範囲は同じ番号の開始・終了コメントの間。両方のコメントは残す。
C のルールは全ページで利用し、H のルールは .home-page の中に限定する。
*/

/* ==================== C：全ページ共通 ==================== */

/* [C-00] 開始：全ページ共通の基本設定 */
/* 全ページの要素と疑似要素で、余白と枠線を指定サイズに含める */
*,
*::before,
*::after {
    box-sizing: border-box;
    /*          サイズの計算方法 */
}
/* [C-00-TYPE] 開始：全サイト共通の文字設定 */
/* 同じ役割には同じサイズを使う。数値の変更はここで一度だけ行う。 */
:root {
    --font-ui: "Meiryo", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
    /*          優先1       優先2         macOSの代替書体           総称 */
    --type-page: 50px;          /* 内部ページの主見出し */
    --type-section: 30px;       /* 各区画の見出し */
    --type-subheading: 22px;    /* 区画内の小見出し */
    --type-card-title: 22px;    /* 商品・記事カードの名前 */
    --type-intro: 22px;         /* 導入文。主見出しより小さくする */
    --type-body: 19px;          /* 普通の本文 */
    --type-card-body: 16px;     /* カード内の短い説明 */
    --type-caption: 15px;       /* 図注・補足説明 */
    --type-ui: 16px;            /* 表・入力欄・小さい見出し */
    --type-link: 17px;          /* 本文内の案内リンク */
    --type-nav: 16px;           /* PCの主要ナビゲーション */
    --type-meta: 14px;          /* 日付・カテゴリー・補助ナビ */
    --type-small: 12px;         /* 準備中ラベル・短い補助表示 */
    --type-number: 22px;        /* 章番号・手順番号 */
    --type-hero-copy: clamp(16px, 1.4vw, 19px);
    /* 首画面は絵に重なるため、本文だけ画面幅に合わせて調節する。 */
    --leading-body: 1.85;
    --leading-heading: 1.45;
    --weight-body: 500;
}

/* 画面が狭いときも、各ページで別々の値を作らず共通値を切り替える。 */
@media (max-width: 1023px) {
    :root { --type-page: 40px; --type-section: 28px; }
}
@media (max-width: 767px) {
    :root {
        --type-body: 18px;
        --type-subheading: 21px;
        --type-card-title: 20px;
        --type-intro: 20px;
        --type-hero-copy: 16px;
    }
}
body, button, input, select, textarea { font-family: var(--font-ui); }
body { font-weight: var(--weight-body); }
main :is(h1, h2, h3) { font-weight: 700; }
/* 長い記事名は意味のまとまりで改行する。狭い画面でもはみ出さない。 */
.heading-phrase { display: inline-block; max-width: 100%; vertical-align: top; }
/* 画像のLogo、首画面の展示見出し、雲野の手書き台詞は表現上の例外。 */
/* [C-00-TYPE] 終了：全サイト共通の文字設定 */

/* [C-00-BASE] 開始：全ページの本文と画像の基本 */
body {
    margin: 0;
    /*       ページ外周の既定余白を外す */

    background-color: #fffef9;
    /*                 全ページの背景色 */

    color: #252923;
    /*      基本の文字色 */

    font-family: var(--font-ui);
    /* 共通書体。[C-00-TYPE] の --font-ui を参照する。 */

    font-size: var(--type-body);
    /*          本文の基本サイズ */

    line-height: var(--leading-body);
    /*            文字サイズに対する行高の倍率 */

    overflow-wrap: anywhere;
    /*              長い URL なども必要な時だけ折り返す */
}

img {
    display: block;
    /*        行下の隙間をなくす */

    max-width: 100%;
    /*          親の内容幅を超えない */

    height: auto;
    /*       元の縦横比を保つ */
}

a {
    text-underline-offset: 6px;
    /*                      文字と下線の距離 */
}

a:focus-visible,
summary:focus-visible {
    outline: 2px solid #18596b;
    /*        太さ 種類  色 */

    outline-offset: 4px;
    /*               要素とフォーカス枠の間隔 */
}

/* [C-00-BASE] 終了：全ページの本文と画像の基本 */

/* [C-00] 終了：全ページ共通の基本設定 */

/* [C-01] 開始：共通ヘッダーとナビゲーション */
/* ヘッダー全体：ロゴと右側のナビゲーションを横並びにする */
.site-header {
    display: flex;
    /*       配置・表示方法 */

    align-items: center;
    /*           交差方向の揃え方 */

    gap: 40px;
    /*   行間・列間 */

    padding: 24px 32px;
    /*       上下 左右 */
}

/* 上下のナビゲーションだけを横並びにし、入れ子の言語一覧は除く */
.header-nav > nav > ul {
    display: flex;
    /*       配置・表示方法 */

    justify-content: flex-end;
    /*               主方向の揃え方 */

    flex-wrap: wrap;
    /*         折り返し */

    gap: 12px 20px;
    /*   行間 列間 */

    list-style: none;
    /*          箇条書き記号 */

    margin: 0;
    /*      四辺 */

    padding: 0;
    /*       四辺 */
}

/* 上層の補助ナビゲーション：文字を小さくし、下に余白を設ける */
.utility-nav {
    margin-bottom: 20px;
    /*             下の外側余白 */

    font-size: var(--type-meta);
    /*         文字サイズ */

    line-height: 1.5;
    /*           文字サイズに対する行高の倍率 */
}

/* 下層のメインナビゲーション：文字を大きく、やや太くする */
.main-nav {
    font-size: var(--type-nav);
    /*         文字サイズ */

    font-weight: 600;
    /*           文字の太さ */

    line-height: 1.5;
    /*           文字サイズに対する行高の倍率 */
}

/* ロゴ領域が縮まないようにする */
.logo {
    flex-shrink: 0;
    /*           縮小率（0 は縮めない） */
}

/* 右側のナビゲーションに残りの幅を割り当てる */
.header-nav {
    flex: 1;
    /*    残り幅の配分（拡大 1・縮小 1・基準幅 0%） */
}

/* [C-01-DETAIL] 開始：ロゴとナビゲーションの表示 */
.site-header {
    background-color: #ffffff;
    /*                背景色（現在のロゴ画像の白地に合わせる） */

    color: #252923;
    /*     文字色 */

    font-family: var(--font-ui);
    /* 共通書体。[C-00-TYPE] の --font-ui を参照する。 */
}

.site-header .logo img {
    display: block;
    /*       画像の行下の隙間を防ぐ */

    width: 200px;
    /*     現在の HTML と同じ表示幅 */

    max-width: 100%;
    /*         親の内容幅を上限にする */

    height: auto;
    /*      画像の縦横比を保つ */
}

.header-nav .utility-nav {
    padding-bottom: 12px;
    /*              文字と区切り線の間の余白 */

    border-bottom: 1px  solid #a8cdce;
    /*             太さ 種類  色（仮設定） */
}
/* [C-01-DETAIL] 終了：ロゴとナビゲーションの表示 */

/* [C-01-LINK] 開始：ナビゲーションリンクの色と変化 */
/* 変化の指定は通常状態に書き、マウスを離した時にも適用する */
.site-header a {
    color: #252923;
    /*     通常時のリンク文字色 */

    text-decoration: none;
    /*               通常時の下線を外す */

    transition: color 0.2s ease;
    /*          対象  時間 変化の仕方 */
}

.site-header a:hover,
.site-header a:focus-visible {
    color: #18596b;
    /*     状態が変わった時の文字色 */

    text-decoration: underline;
    /*               下線を付ける */
}

.site-header a:focus-visible {
    outline: 2px  solid #18596b;
    /*       太さ 種類  色 */

    outline-offset: 4px;
    /*              外枠とリンクの間隔 */
}

/* 動きを減らす設定では、色を即座に切り替える */
@media (prefers-reduced-motion: reduce) {
    .site-header a {
        transition: none;
        /*          時間をかけた変化を使わない */
    }
}
/* [C-01-LINK] 終了：ナビゲーションリンクの色と変化 */

/* [C-01-LANGUAGE] 開始：PC ナビゲーション内の言語メニュー */
/* 言語一覧を配置する基準にする */
.header-nav .language-menu {
    position: relative;
    /*        子要素の絶対配置の基準 */
}

.header-nav .language-menu > summary {
    cursor: pointer;
    /*      クリックできることを示す手形 */
}

.header-nav .language-menu > summary:focus-visible {
    outline: 2px  solid #18596b;
    /*       太さ 種類  色 */

    outline-offset: 4px;
    /*              外枠と文字の間隔 */
}

/* 開いた時だけ一覧を表示し、ナビゲーションの高さは変えない */
.header-nav .language-menu[open] > ul {
    position: absolute;
    /*        通常の配置から外して重ねる */

    top: 100%;
    /*   親要素の下端 */

    right: 0;
    /*     親要素の右端に揃える */

    z-index: 10;
    /*       首画面より手前に表示する */

    display: grid;
    /*       言語を縦に並べる */

    gap: 12px;
    /*   各言語の間隔 */

    width: 220px;
    /*     一覧の表示幅 */

    margin: 8px 0   0;
    /*      上  左右 下 */

    padding: 16px;
    /*       四辺の内側余白 */

    list-style: none;
    /*          箇条書き記号を外す */

    background-color: #ffffff;
    /*                一覧の背景色 */

    border: 1px  solid #d7ded8;
    /*      太さ 種類  色 */

    box-shadow: 0    6px  16px #00000014;
    /*          横   縦   ぼかし 色（透明度付き） */
}

/* [C-01-LANGUAGE-OPEN] 開始：開いた時の見出し（学習用） */
.header-nav .language-menu[open] > summary {
    color: #18596b;
    /*     メニューを開いている時の文字色 */
}
/* [C-01-LANGUAGE-OPEN] 終了：開いた時の見出し（学習用） */
/* [C-01-LANGUAGE] 終了：PC ナビゲーション内の言語メニュー */
/* [C-01-FINISH] 開始：二層ナビゲーションの仕上げ */
.site-header {
    position: relative;
    /*         ドロップダウンの重なりを管理する */

    z-index: 10;
    /*        首画面より手前に置く */

    gap: 32px;
    /*    ロゴとナビゲーションの間隔 */

    padding: 20px clamp(20px, 3vw, 56px);
    /*        上下  左右の可変余白 */

    background-color: #fffef9;
    /*                 透明ロゴの下の背景色 */
}

.header-nav {
    min-width: 0;
    /*          Flex の子が内容幅より小さくなれるようにする */
}

.header-nav > nav > ul {
    align-items: center;
    /*            項目を縦方向の中央に揃える */
}

.header-nav .main-nav > ul {
    display: grid;
    /*        六つの主項目を同じ行に配置する */

    grid-template-columns: 1fr 1fr 1.1fr 0.9fr 1.4fr 1.2fr;
    /*                      各項目に配分する幅の比率 */

    gap: 16px;
    /*    各項目の間隔 */

    text-align: center;
    /*           項目内の文字を中央に揃える */
}

.header-nav .main-nav {
    font-size: var(--type-nav);
    /*          準備中の表示を含む PC 主項目の文字サイズ */
}

.header-nav .utility-nav {
    position: relative;
    /*         下の装飾線の配置基準 */

    border-bottom: 0;
    /*              既存の細線を手描き風の線に置き換える */

    margin-bottom: 14px;
    /*              下段までの間隔 */

    padding-bottom: 16px;
    /*               文字と区切り線の間隔 */
}

.header-nav .utility-nav::after {
    content: "";
    /*        装飾用の空要素を作る */

    position: absolute;
    /*         ナビゲーションの下辺に重ねる */

    left: 0;
    /*     左端 */

    right: 0;
    /*      右端 */

    bottom: 0;
    /*       下端 */

    height: 3px;
    /*       区切り線の厚み */

    background-color: #51b7bd;
    /*                 首画面に合わせた青緑色 */

    border-radius: 60% 35% 50% 40%;
    /*              四隅を変えて柔らかい線にする */

    pointer-events: none;
    /*               装飾で操作を妨げない */
}

.site-header .nav-status {
    display: block;
    /*        準備中の表示を次の行に置く */

    font-size: var(--type-small);
    /*          補助表示の文字サイズ */

    font-weight: 400;
    /*            通常の太さ */

    line-height: 1.5;
    /*            補助表示の行高 */

    color: #626860;
    /*      補助表示の文字色 */
}

.header-nav .utility-nav > ul {
    gap: 12px 24px;
    /*    行間 列間 */
}

.header-nav .language-menu > summary {
    padding: 6px 0;
    /*        上下 左右の操作範囲 */
}

@media (min-width: 1440px) {
    .site-header .logo img {
        width: 240px;
        /*      広い PC 画面でのロゴ幅 */
    }

    .header-nav .main-nav {
        font-size: var(--type-nav);
        /*          広い画面での主項目の文字サイズ */
    }
}

/* [C-01-FINISH] 終了：二層ナビゲーションの仕上げ */

/* [C-01] 終了：共通ヘッダーとナビゲーション */

/* [C-02] 開始：共通ヘッダーのモバイル表示 */
.mobile-actions {
    display: none;
    /*        PC ではモバイル入口を隠す */
}

@media (max-width: 1023px) {
    .site-header {
        gap: 16px;
        /*    ロゴと操作部分の間隔 */

        padding: 16px 20px;
        /*        上下 左右の余白 */
    }

    .site-header .logo img {
        width: 168px;
        /*      タブレットでのロゴ幅 */
    }

    .header-nav {
        display: none;
        /*        二層 PC ナビを隠す */
    }

    .mobile-actions {
        display: flex;
        /*        買い物入口とメニューを横並びにする */

        align-items: center;
        /*            縦方向の中央に揃える */

        justify-content: flex-end;
        /*                右側に寄せる */

        gap: 16px;
        /*    入口の間隔 */

        margin-left: auto;
        /*            余った左側の空間を使う */

        font-size: var(--type-meta);
        /*          入口の文字サイズ */
    }

    .mobile-menu > summary {
        cursor: pointer;
        /*       開閉できることを示す */

        padding: 10px 0;
        /*        上下 左右の操作範囲 */
    }

    .mobile-menu[open] > nav {
        position: absolute;
        /*         ヘッダー直下に重ねる */

        top: 100%;
        /*    ヘッダーの下端 */

        left: 0;
        /*     左端 */

        right: 0;
        /*      右端 */

        max-height: 75vh;
        /*           開いた一覧が画面より長くなりすぎない */

        overflow-y: auto;
        /*           一覧が長い時は中で縦にスクロールする */

        padding: 20px;
        /*        一覧の四辺の余白 */

        background-color: #fffef9;
        /*                 一覧の背景色 */

        border-top: 1px solid #d7ded8;
        /*           太さ 種類  色 */

        box-shadow: 0 12px 20px #00000014;
        /*           横 縦 ぼかし 色 */
    }

    .mobile-menu nav ul {
        list-style: none;
        /*           リスト記号を消す */

        margin: 0;
        /*       外側余白を消す */

        padding: 0;
        /*        内側余白を消す */
    }

    .mobile-menu nav > ul {
        display: grid;
        /*        二列の一覧にする */

        grid-template-columns: repeat(2, minmax(0, 1fr));
        /*                      2 列  最小  最大の幅 */

        gap: 8px 16px;
        /*    行間 列間 */
    }

    .mobile-menu nav > ul + ul {
        margin-top: 20px;
        /*           主要項目と補助項目の間隔 */

        padding-top: 20px;
        /*            区切り線の下の余白 */

        border-top: 1px solid #d7ded8;
        /*           太さ 種類  色 */
    }

    .mobile-menu nav a,
    .mobile-menu nav > ul > li > span,
    .mobile-menu .language-menu > summary {
        display: block;
        /*        項目全体に操作しやすい広さを持たせる */

        padding: 10px 0;
        /*        上下 左右の余白 */
    }

    .mobile-menu .language-menu > summary {
        display: list-item;
        /*        言語メニューの開閉マーカーを残す */

        cursor: pointer;
        /*       開閉操作を示す */
    }

    .mobile-menu .language-menu[open] > ul {
        padding: 8px 0;
        /*        上下 左右の余白 */

        font-size: var(--type-meta);
        /*          言語一覧の文字サイズ */
    }

    .mobile-menu .language-menu li + li {
        margin-top: 10px;
        /*           二番目以降の言語との間隔 */
    }
}

@media (max-width: 479px) {
    .site-header {
        gap: 10px;
        /*    狭い画面の項目間隔 */

        padding: 12px;
        /*        四辺の余白 */
    }

    .site-header .logo img {
        width: 116px;
        /*      小さいスマートフォンでのロゴ幅 */
    }

    .mobile-actions {
        gap: 12px;
        /*    買い物とメニューの間隔 */

        font-size: var(--type-meta);
        /*          入口の文字サイズ */
    }
}

/* [C-02] 終了：共通ヘッダーのモバイル表示 */


/* [C-03] 開始：全ページ共通のフッター */

/* [C-03-A] 開始：フッターの基本配置 */

.site-footer {
    background-color: #e7efe3;
    /*                背景色（仮設定） */

    color: #252923;
    /*     文字色 */

    padding: 48px 20px 24px;
    /*       上 / 左右 / 下の内側余白 */

    font-family: var(--font-ui);
    /*           使用可能なフォントを左から選ぶ */

    font-size: var(--type-meta);
    /*         基本の文字サイズ */

    line-height: 1.8;
    /*           文字サイズに対する行高の倍率 */
}

.site-footer h2,
.site-footer p,
.site-footer dl,
.site-footer dd {
    margin: 0;
    /*      四辺の外側余白 */
}

.site-footer img {
    display: block;
    /*       ブロックとして表示する */

    max-width: 100%;
    /*         親の内容幅を上限にする */

    height: auto;
    /*      画像の縦横比を保つ */
}

.site-footer .footer-top,
.site-footer .footer-main,
.site-footer .footer-company,
.site-footer .footer-bottom {
    max-width: 1160px;
    /*         内容幅の上限 */

    margin: 0 auto;
    /*      上下 / 左右（自動で中央配置） */
}

.site-footer .footer-top {
    display: flex;
    /*       横に並べる */

    justify-content: space-between;
    /*               余った幅を間に置いて左右に分ける */

    align-items: center;
    /*           上下の中央揃え */

    flex-wrap: wrap;
    /*         狭い場合は折り返す */

    gap: 24px;
    /*   行間・列間 */

    padding-bottom: 40px;
    /*              下の内側余白 */
}

.site-footer .footer-tagline {
    font-size: var(--type-section);
    /*         ブランドの言葉の文字サイズ */

    font-weight: 700;
    /*           文字の太さ */
}

.site-footer .footer-tagline span {
    display: block;
    /*       二行目として表示する */

    color: #477b73;
    /*     二行目の文字色（仮設定） */
}

.site-footer .footer-main {
    display: grid;
    /*       案内を Grid で配置する */

    gap: 32px;
    /*   行間・列間 */

    padding: 32px 0;
    /*       上下 / 左右の内側余白 */

    border-top: 1px solid #c9d5c6;
    /*          太さ / 種類 / 色 */
}

.site-footer .footer-nav h2,
.site-footer .footer-company h2 {
    font-size: var(--type-ui);
    /*         小見出しの文字サイズ */

    margin-bottom: 16px;
    /*             下の外側余白 */
}

.site-footer .footer-nav ul {
    display: grid;
    /*       案内リンクを縦に配置する */

    gap: 12px;
    /*   項目の間隔 */

    list-style: none;
    /*          箇条書き記号を消す */

    margin: 0;
    /*      四辺の外側余白 */

    padding: 0;
    /*       四辺の内側余白 */
}

.site-footer .footer-company {
    padding: 24px 0;
    /*       上下 / 左右の内側余白 */

    border-top: 1px solid #c9d5c6;
    /*          太さ / 種類 / 色 */
}

.site-footer .footer-company dl {
    display: flex;
    /*       会社情報を横に並べる */

    flex-wrap: wrap;
    /*         幅が足りない場合は折り返す */

    gap: 16px 32px;
    /*   行間 / 列間 */
}

.site-footer .footer-company dl > div {
    display: flex;
    /*       項目名と内容を横に並べる */

    gap: 16px;
    /*   項目名と内容の間隔 */
}

.site-footer .footer-company address {
    font-style: normal;
    /*          標準の斜体を通常の文字に戻す */

    margin-top: 16px;
    /*          上の外側余白 */
}

.site-footer .footer-bottom {
    display: flex;
    /*       方針・言語・著作権を横に並べる */

    flex-wrap: wrap;
    /*         幅が足りない場合は折り返す */

    gap: 16px 24px;
    /*   行間 / 列間 */

    padding-top: 24px;
    /*           上の内側余白 */

    border-top: 1px solid #c9d5c6;
    /*          太さ / 種類 / 色 */

    font-size: var(--type-small);
    /*         補助情報の文字サイズ */
}

/* [C-03-SNS] ロゴ・見出し・二つのアイコンを同じ中心線にそろえる */
.site-footer .footer-brand {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding: clamp(24px, 4vw, 44px) 0;
}

.site-footer .footer-brand > a img {
    display: block;
    width: clamp(150px, 18vw, 200px);
    height: auto;
}

.site-footer .footer-social h2 {
    margin: 0;
    text-align: center;
    color: #365e54;
    font-size: 0.875rem;
    font-weight: 600;
}

.site-footer .footer-social-links {
    display: grid;
    grid-template-columns: repeat(3, 44px);
    /* 3列目はLINE公式アカウント用。公開時にリンクを追加する。 */
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.site-footer .footer-social-links a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.site-footer .footer-social-links svg {
    width: 24px;
    height: 24px;
}

.site-footer .footer-social-links a:hover,
.site-footer .footer-social-links a:focus-visible {
    background: #d6e4d6;
}

.site-footer .footer-languages {
    display: flex;
    /*       言語名を横に並べる */

    flex-wrap: wrap;
    /*         幅が足りない場合は折り返す */

    gap: 12px;
    /*   言語名の間隔 */
}

.site-footer .copyright {
    margin-left: auto;
    /*           左の余白を自動で取り、右に寄せる */
}

/* ビューポート幅が 1024px 以上のときに適用 */
@media (min-width: 1024px) {
    .site-footer .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /*                     同じ幅の案内列を三つ */
    }
}

/* [C-03-A] 終了：フッターの基本配置 */

/* [C-03-LINK] 開始：フッターリンクの状態 */

.site-footer a {
    color: #252923;
    /*     通常時のリンク文字色 */

    text-decoration: none;
    /*               通常時の下線を外す */
}

/* マウスを重ねた時と、キーボード操作などで焦点を示す時の共通設定 */
.site-footer a:hover,
.site-footer a:focus-visible {
    color: #18596b;
    /*     状態が変わった時の文字色 */

    text-decoration: underline;
    /*               下線を付ける */
}

.site-footer a:focus-visible {
    outline: 2px solid #18596b;
    /*       太さ / 種類 / 色（焦点を示す外枠） */

    outline-offset: 4px;
    /*              外枠とリンクの間隔 */
}

/* [C-03-LINK] 終了：フッターリンクの状態 */

/* [C-03-FINISH] 開始：ブランド帯と狭い画面への対応 */
.site-footer {
    padding: 0 20px 24px;
    /*        上 左右 下 */

    background-image: linear-gradient(#fffef9 0 190px, #e7efe3 190px);
    /*                 上のブランド帯から下の青緑への背景 */

    border-bottom: 10px solid #9cbcaf;
    /*              太さ 種類  色 */
}

.site-footer .footer-top {
    min-height: 190px;
    /*           上のブランド帯の最小の高さ */

    padding: 36px 0;
    /*        上下 左右 */
}

.site-footer .footer-tagline {
    font-size: var(--type-section);
    /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */
}

.site-footer .footer-main {
    border-top: 0;
    /*           背景の切り替えを境界に使う */

    padding: 48px 0;
    /*        上下 左右 */
}

.site-footer .go-top {
    display: inline-flex;
    /*        文字と矢印を横に並べる */

    align-items: center;
    /*            中央に揃える */

    gap: 16px;
    /*    文字と矢印の間隔 */
}

.site-footer .go-top::after {
    content: "↑";
    /*        上へ戻る装飾の矢印 */

    display: grid;
    /*        矢印を中央配置する箱 */

    place-items: center;
    /*            縦横の両方向で中央に揃える */

    width: 44px;
    /*      円の幅 */

    height: 44px;
    /*       円の高さ */

    border: 1px solid #9cbcaf;
    /*       太さ 種類 色 */

    border-radius: 50%;
    /*              正方形を円形にする */
}

@media (min-width: 768px) and (max-width: 1023px) {
    .site-footer .footer-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /*                      三列の案内グループ */
    }

}

@media (max-width: 767px) {
    .site-footer .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /*                      二列の案内グループ */

        gap: 32px 20px;
        /*    行間 列間 */
    }


    .site-footer .footer-company dl > div {
        flex-wrap: wrap;
        /*          長い会社名や住所を折り返す */
    }

    .site-footer .copyright {
        width: 100%;
        /*      著作権表示を独立した行にする */

        margin-left: 0;
        /*            左寄せに戻す */
    }
}

/* [C-03-FINISH] 終了：ブランド帯と狭い画面への対応 */

/* [C-03] 終了：全ページ共通のフッター */

/* [C-04] 開始：ページ内リンクのスクロール */
/* [C-04-SCROLL] 開始：ページ全体のスクロール方法 */
/* html はページ全体のスクロールを設定する対象 */
html {
    scroll-behavior: smooth;
    /*               滑らかにスクロールする */
}
/* [C-04-SCROLL] 終了：ページ全体のスクロール方法 */

/* 利用者が動きを減らす設定を選んでいる場合は、通常の移動に戻す */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        /*               スムーズな移動を使わない */
    }
}
/* [C-04] 終了：ページ内リンクのスクロール */

/* ==================== H：ホームページ専用 ==================== */

/* [H-00] 開始：ホームページの画像と文字の下準備 */
/* 画像は親要素からはみ出さず、縦横比を保つ */
.home-page img {
    display: block;
    /*       配置・表示方法 */

    max-width: 100%;
    /*         幅の上限（基準となる箱に対する割合） */

    height: auto;
    /*      高さ（auto は画像の比率を保つ） */
}

/* 見出しと段落の余白は、各区画で後から設定する */
.home-page h1,
.home-page h2,
.home-page h3,
.home-page p {
    margin: 0;
    /*      四辺 */
}
/* [H-00] 終了：ホームページの画像と文字の下準備 */

/* [H-01] 開始：ホームページ全体の背景・文字・行間 */
.home-page {
    /* ブラウザー標準の外側余白をなくす */

    margin: 0;
    /*      四辺 */

    /* 背景色と文字色：現在の参考デザインに合わせた仮設定 */

    background-color: #fffef9;
    /*                背景色 */

    color: #252923;
    /*     文字色 */

    /* 日本語の表示に使用するフォント */

    font-family: var(--font-ui);
    /* 共通書体。[C-00-TYPE] の --font-ui を参照する。 */

    /* 基本の文字サイズと行の高さ */

    font-size: var(--type-body);
    /*         文字サイズ */

    line-height: var(--leading-body);
    /*           文字サイズに対する行高の倍率 */
}
/* [H-01] 終了：ホームページ全体の背景・文字・行間 */

/* [H-02] 開始：ホームページの内容幅と余白 */
/* 首画面は全面のイラストを使うため、この共通幅には含めない */
.home-page .home-yunnan,
.home-page .home-products,
.home-page .home-news {
    /* 内容幅を制限し、中央配置と内側の余白を設定する */

    max-width: 1440px;
    /*         幅の上限 */

    margin: 0    auto;
    /*      上下 左右（自動） */

    padding: 64px 32px;
    /*       上下 左右 */
}
/* [H-02] 終了：ホームページの内容幅と余白 */

/* [H-03] 開始：PC 首画面の重ね合わせ */
/* 768px 以上は横長の構図、767px 以下は縦長の構図を使う */
/* ビューポート幅が 768px 以上のときに適用 */
@media (min-width: 768px) {
    /* [H-03-A] 開始：配置の基準と重ね方 */
    /* 首画面を、文字や装飾の配置基準にする */
    .home-page .hero {
        position: relative;
        /*        配置方法 */

        z-index: 0;
        /*       重なり順 */
    }

    /* 文字・キャラクター・前景を通常の縦並びから外す */
    .home-page .hero-copy,
    .home-page .hero-mascot,
    .home-page .hero-foreground {
        position: absolute;
        /*        配置方法 */
    }
    /* [H-03-A] 終了：配置の基準と重ね方 */

    /* [H-03-B] 開始：画像の寸法と装飾の配置 */
    /* 主イラストは通常の流れに残し、首画面の高さを確保する */
    .home-page .hero-art img,
    .home-page .hero-mascot img,
    .home-page .hero-foreground img {
        width: 100%;
        /*     幅（基準となる箱に対する割合） */
    }

    /* 主イラストと同じ大きさ・同じ座標で前景を重ねる */
    .home-page .hero-foreground {
        top: 0;
        /*   上端からの距離 */

        left: 0;
        /*    左端からの距離 */

        width: 100%;
        /*     幅（基準となる箱に対する割合） */

        z-index: 2;
        /*       重なり順 */

        pointer-events: none;
        /*              マウス操作の対象 */
    }

    /* 透明な余白を含めた仮配置。PC プレビューで輪郭を確認する */
    .home-page .hero-mascot {
        top: 72.76%;
        /*   上端からの距離（首画面の高さが基準） */

        left: 80.8%;
        /*    左端からの距離（首画面の幅が基準） */

        width: 17.49%;
        /*     幅（基準となる箱に対する割合） */

        z-index: 1;
        /*       重なり順 */
    }
    /* [H-03-B] 終了：画像の寸法と装飾の配置 */

    /* [H-03-C] 開始：左側の文字領域 */
    .home-page .hero-copy {
        top: 17%;
        /*   上端からの距離（首画面の高さが基準） */

        left: 4.5%;
        /*    左端からの距離（首画面の幅が基準） */

        width: 31%;
        /*     幅（基準となる箱に対する割合） */

        z-index: 3;
        /*       重なり順 */
    }

    /* [H-03-C-TITLE] 開始：首画面の見出し */
    /* 字間を設けても一行目が収まりやすいよう、文字サイズを調整する */
    .home-page .hero-copy h1 {
        font-size: clamp(32px, 4.2vw, 68px);
        /*               最小  可変   最大 */

        line-height: 1.4;
        /*           文字サイズに対する行高の倍率 */
        /* 見出しの文字を太くする */

        font-weight: 700;
        /*           文字の太さ */
        /* 文字サイズに応じて字間を少し広げる */

        letter-spacing: 0.02em;
        /*              追加する字間（文字サイズが基準） */
    }
    /* [H-03-C-TITLE] 終了：首画面の見出し */

    .home-page .hero-title-line {
        display: block;
        /*       配置・表示方法 */
    }

    /* 首画面の本文：見出しとの間隔・文字サイズ・行の高さ */
    .home-page .hero-description {
        margin-top: 24px;
        /*          上の外側余白 */

        font-size: var(--type-hero-copy);
        /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */

        line-height: 1.9;
        /*           文字サイズに対する行高の倍率 */
    }
    /* [H-03-C] 終了：左側の文字領域 */
}
/* [H-03-D] 開始：画面幅に合わせた首画面 */
@media (min-width: 768px) {
    .home-page .hero-description {
        max-width: 88%;
        /*         右側の山の輪郭に本文が重ならない幅 */
    }
}

.home-page .hero {
    max-width: 1680px;
    /*          大画面でも絵と文字の間隔が広がりすぎない */

    margin: 0 auto;
    /*       上下 左右中央 */
}

.home-page .hero picture {
    display: block;
    /*        画像の行下の隙間をなくす */
}

@media (min-width: 768px) and (max-width: 1199px) {
    .home-page .hero-copy {
        top: 9%;
        /*    狭い横画面では文字の開始位置を上げる */

        width: 34%;
        /*      読みやすい本文の幅 */
    }

    .home-page .hero-copy h1 {
        font-size: clamp(28px, 3.7vw, 44px);
        /*          最小   可変   最大 */
    }

    .home-page .hero-description {
        font-size: var(--type-hero-copy);
        /*          本文は縮めすぎない */

        line-height: 1.8;
        /*            本文の行高 */

        margin-top: 16px;
        /*           見出しと本文の間隔 */
    }
}

@media (width < 768px) {
    .home-page .hero {
        display: grid;
        /*        タイトル・山景・紹介文の順に配置する */

        grid-template-rows: auto min(92vw, 460px) auto;
        /*                  タイトル 山景               紹介文 */

        position: relative;
        /*         重なりの基準 */

        isolation: isolate;
        /*          首画面の重なりをこの区画内に限定する */
    }

    .home-page .hero-art,
    .home-page .hero-mascot,
    .home-page .hero-foreground {
        grid-area: 2 / 1;
        /*          山景の二段目でレイヤーを重ねる */
    }

    .home-page .hero-art,
    .home-page .hero-foreground {
        align-self: end;
        /*           同じ下端に絵を揃える */

        width: 100%;
        /*      画面幅に合わせる */

        height: 100%;
        /*       二段目の高さに合わせる */

        min-height: 0;
        /*           元画像の高さでグリッドが広がるのを防ぐ */

        position: relative;
        /*        内側の画像を置く基準 */

        overflow: hidden;
        /*        上側の空白を表示領域の外で切り取る */
    }

    .home-page .hero-art img,
    .home-page .hero-foreground img,
    .home-page .hero-mascot img {
        width: 100%;
        /*      親の幅に合わせる */
    }

    /* 同じ幅の原画を下端基準で表示し、上側の余白だけを切り取る */
    .home-page .hero-art picture,
    .home-page .hero-foreground picture {
        position: absolute;
        /*        山景の表示窓を基準に配置する */

        bottom: 0;
        /*      画像の下端を揃える */

        width: 100%;
        /*     元の縦横比を保つ幅 */
    }

    .home-page .hero-art picture {
        bottom: 24px;
        /*      杯を少し上げ、セリフとの間に空間を作る */
    }

    .home-page .hero-art {
        mask-image: linear-gradient(to bottom, transparent, #000 32px);
        /*                          上端から32pxだけ背景へなじませる */
    }

    .home-page .hero-copy {
        display: contents;
        /*       この箱だけを配置から外し、h1 と p を親グリッドに参加させる */
    }

    .home-page .hero-copy h1 {
        grid-area: 1 / 1;
        /*          一段目にタイトルを置く */

        padding: 18px 24px 14px;
        /*        上 左右 下 */

        z-index: 3;
        /*       タイトルを前に表示する */

        font-size: clamp(30px, 7.8vw, 52px);
        /*          最小   可変   最大 */

        line-height: 1.4;
        /*            見出しの行高 */

        letter-spacing: 0.02em;
        /*               文字間の余白 */
    }

    .home-page .hero-title-line {
        display: block;
        /*        一杯に。を次の行にする */
    }

    .home-page .hero-description {
        grid-area: 3 / 1;
        /*          三段目に紹介文を置き、先に山景を見せる */

        margin: 20px 24px 0;
        /*       上 左右 下 */

        padding-left: 14px;
        /*             細い縦線と本文の距離 */

        border-left: 2px solid #8bbdb4;
        /*           太さ 種類 色：手記の導入を示す */

        font-size: var(--type-hero-copy);
        /*         読みやすい本文サイズを保つ */

        line-height: 1.8;
        /*           紹介文の行高 */

        color: #48534b;
        /*     見出しより柔らかな文字色 */
    }

    .home-page .hero-mascot {
        align-self: end;
        /*           絵の下端を位置の基準にする */

        justify-self: end;
        /*             右側に寄せる */

        width: 30%;
        /*      スマートフォン構図でのキャラクター幅 */

        margin-right: 3%;
        /*             右端の余白 */

        margin-bottom: 14%;
        /*              下端からの位置 */

        z-index: 1;
        /*        前景の後ろに置く */
    }

    .home-page .hero-foreground {
        z-index: 2;
        /*        キャラクターの下部に前景を重ねる */

        pointer-events: none;
        /*               前景をクリックの対象にしない */
    }
}

/* [H-03-D] 終了：画面幅に合わせた首画面 */

/* [H-03-E] 開始：雲野のひとこと */
/* セリフで使う文字だけを収めた軽量のローカル書体。利用許諾は fonts フォルダーに保存する */
@font-face {
    font-family: "Yunno Dialogue";
    /*            この CSS で使う書体の呼び名 */

    src: url("../assets（网页素材）/fonts（字体）/yunno-dialogue-v01.woff2") format("woff2");
    /*   CSS から見たフォントファイルへの相対パス                         形式 */

    font-style: normal;
    /*          通常の字形 */

    font-weight: 400;
    /*           このファイルに含まれる太さ */

    font-display: swap;
    /*            読み込み中は代替書体で表示し、準備できたら切り替える */
}

/* 雲野の口元に近づけ、短い発声線で話し手を示す。ボタンではない */
.home-page .hero-dialogue {
    position: absolute;
    /*        首画面を基準に配置する */

    z-index: 4;
    /*       雲（2）と爪先・飾り（3）より手前に表示する */

    left: 63%;
    /*    首画面の左端からの距離 */

    bottom: 5%;
    /*      首画面の下端からの距離 */

    width: 21%;
    /*     雲野の左側に用意する文字領域 */

    color: #18596b;
    /*     山の青緑に合わせた文字色 */

    text-shadow: 0 1px 2px #fffef9, 0 0 6px #fffef9;
    /*           横 縦 ぼかし 色：淡い縁取りで背景の筆跡から文字を分ける */

    font-family: "Yunno Dialogue", "UD Digi Kyokasho NK-B", "Hiragino Maru Gothic ProN", sans-serif;
    /*            専用書体を優先し、使えない場合は右の書体へ順に進む */

    font-weight: 700;
    /*           セリフを太めに表示する。400 の書体からブラウザーが太字を補う */

    font-size: clamp(17px, 1.5vw, 24px);
    /*               最小   可変   最大 */

    line-height: 1.35;
    /*           文字サイズに対する行高の倍率 */

    text-align: center;
    /*          三行の中心をそろえる */

    transform: rotate(-7deg);
    /*         反時計回りに 7 度傾ける。元の配置領域は変わらない */

    transform-origin: center;
    /*                回転の中心を箱の中央に置く */
}

/* 擬似要素の短い二本線：矢印や吹き出し枠を使わず、声の出る方向を示す */
.home-page .hero-dialogue::before,
.home-page .hero-dialogue::after {
    content: "";
    /*        装飾用の空の箱を作る */

    position: absolute;
    /*        セリフの箱を基準に配置する */

    right: -12px;
    /*     雲野側の端から少し外へ出す */

    top: 26%;
    /*   あいさつの高さに合わせる */

    width: 12px;
    /*      短い発声線の長さ */

    height: 3px;
    /*       線の太さ */

    border-radius: 50%;
    /*              両端を柔らかくする */

    background: currentColor;
    /*          セリフと同じ文字色を使う */

    transform: rotate(-24deg);
    /*         上側の発声線の向き */

    pointer-events: none;
    /*              飾りを操作対象にしない */
}

.home-page .hero-dialogue::after {
    top: 43%;
    /*   下側の発声線の高さ */

    width: 9px;
    /*      二本の長さに少し差を付ける */

    transform: rotate(18deg);
    /*         下側の発声線の向き */
}

.home-page .hero-dialogue-greeting,
.home-page .hero-dialogue-line {
    display: block;
    /*       各セリフを一行ずつ表示する */
}

.home-page .hero-dialogue-greeting {
    margin-bottom: 4px;
    /*             あいさつと続きの間隔 */

    font-size: clamp(24px, 2.3vw, 36px);
    /*               最小   可変   最大 */

    line-height: 1.3;
    /*           大きい文字の行高 */
}

/* 横長のタブレット：左端へ離さず、雲野のすぐ左下に配置する */
@media (min-width: 768px) and (max-width: 1199px) {
    .home-page .hero {
        margin-bottom: 20px;
        /*             絵の下へ出るセリフのための余裕 */
    }

    .home-page .hero-dialogue {
        left: 54%;
        /*    雲野に近い右側へ配置する */

        bottom: -18px;
        /*      杯を避け、絵の下端から少し下へ出す */

        width: 30%;
        /*     文字を極端に縮めず三行に収める幅 */

        transform: rotate(-5deg);
        /*         話しかける方向へ少し傾ける */

        font-size: 16px;
        /*         読みやすい本文の大きさ */

        line-height: 1.25;
        /*           三行の高さを抑える */
    }

    .home-page .hero-dialogue-greeting {
        font-size: 22px;
        /*         あいさつの強弱 */
    }
}

/* 少し広いタブレットでは、雲野の口元に近い雲の上へ戻す */
@media (min-width: 960px) and (max-width: 1199px) {
    .home-page .hero {
        margin-bottom: 0;
        /*             セリフが絵に収まるため追加余白を外す */
    }

    .home-page .hero-dialogue {
        left: 63%;
        /*    杯の右側、雲野の左側 */

        bottom: 4%;
        /*      絵の内側の雲に重ねる */

        width: 21%;
        /*     三行をまとめる幅 */
    }
}

/* 縦長のスマートフォン：絵の下部で雲野の左側に配置する */
@media (width < 768px) {
    .home-page .hero-dialogue {
        position: relative;
        /*        首画面全体ではなく、二段目の山景に所属させる */

        grid-area: 2 / 1;
        /*          キャラクターと同じ段に置く */

        align-self: end;
        /*           山景の下端を基準にする */

        justify-self: start;
        /*             左からの位置指定を使う */

        left: 26%;
        /*    左の山脊を避け、雲野に近づける */

        bottom: max(22px, calc(14vw - 32px));
        /*      最小余白を保ち、広い画面では雲野と一緒に上げる */

        width: 44%;
        /*     右側の雲野と重ならない文字領域 */

        font-size: clamp(16px, 3vw, 20px);
        /*               最小   可変 最大 */

        transform: rotate(-3deg);
        /*         狭い画面では傾きを弱め、杯との間隔を保つ */
    }

    .home-page .hero-dialogue-greeting {
        font-size: clamp(22px, 4.4vw, 28px);
        /*               最小   可変  最大 */
    }
}
/* 小さなスマートフォン：杯の下に三行を収め、文字は 16px を保つ */
@media (max-width: 479px) {
    .home-page .hero-dialogue {
        bottom: 22px;
        /*      雲野の口元の高さにあいさつを合わせる */

        font-size: 16px;
        /*         続きの文字サイズ */

        line-height: 1.25;
        /*           三行の高さを整える */

        transform: none;
        /*         狭い余白では回転させず、文字を読みやすく保つ */
    }

    .home-page .hero-dialogue-greeting {
        font-size: 20px;
        /*         本文より一段大きいあいさつ */

        line-height: 1.2;
        /*           あいさつの行高 */

        margin-bottom: 2px;
        /*             続きとの間隔 */
    }
}
/* [H-03-E] 終了：雲野のひとこと */

/* [H-03-F] 開始：雲から前に出る爪先と飾り */
/* hero-mascot と同じ位置・寸法を共有し、このクラスで前後関係だけを変える */
.home-page .hero-mascot-front {
    z-index: 3;
    /*       元のキャラクター（1）→ 雲（2）→ 爪先・飾り（3）→ セリフ（4） */

    pointer-events: none;
    /*              透明な装飾レイヤーは操作の対象にしない */
}
/* [H-03-F] 終了：雲から前に出る爪先と飾り */

/* [H-03] 終了：PC 首画面の重ね合わせ */

/* [H-04] 開始：雲南コーヒーの発見ノート */
/* [H-04-A] 開始：見出しと本文の下準備 */
.home-page .home-yunnan > h2 {
    margin-bottom: 32px;
    /*             下の外側余白 */

    font-size: var(--type-section);
    /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */

    line-height: var(--leading-heading);
    /*           文字サイズに対する行高の倍率 */

    font-weight: 700;
    /*           文字の太さ */
}

.home-page .yunnan-layout h3 {
    margin-bottom: 16px;
    /*             下の外側余白 */

    font-size: var(--type-subheading);
    /*         文字サイズ */

    line-height: var(--leading-heading);
    /*           文字サイズに対する行高の倍率 */

    font-weight: 700;
    /*           文字の太さ */
}

.home-page .yunnan-layout p {
    font-size: var(--type-body);
    /*         文字サイズ */

    line-height: var(--leading-body);
    /*           文字サイズに対する行高の倍率 */
}

.home-page .yunnan-art {
    margin: 16px 0;
    /*      上下 左右 */
}
/* [H-04-A] 終了：見出しと本文の下準備 */

/* [H-04-B] 開始：PC の二列配置 */
/* ビューポート幅が 1024px 以上のときに適用 */
@media (min-width: 1024px) {
    .home-page .yunnan-layout {
        /* 三つの区画をグリッドで配置する */

        display: grid;
        /*       配置・表示方法 */
        /* 左列を右列より少し広くする */

        grid-template-columns: 1.2fr 1fr;
        /*                     左列  右列 */

        gap: 32px;
        /*   行間・列間 */
    }

    .home-page .yunnan-origin {
        /* 産地の区画を上から二行分に配置する */

        grid-row: 1 / span 2;
        /*        開始線 / 使用する行数 */
    }
}
/* [H-04-B] 終了：PC の二列配置 */

/* [H-04-C] 開始：PC 各区画の画像と文字の配置 */
/* ビューポート幅が 1024px 以上のときに適用 */
@media (min-width: 1024px) {
    /* 左列：風景画像、見出し、本文の順に表示する */
    .home-page .yunnan-origin {
        display: grid;
        /*       配置・表示方法 */

        gap: 16px;
        /*   行間・列間 */

        align-content: start;
        /*             行全体の揃え方 */
    }

    .home-page .yunnan-origin > .yunnan-art {
        grid-row: 1;
        /*        開始する横線の番号 */

        margin: 0;
        /*      四辺 */
    }

    .home-page .yunnan-origin > .yunnan-art img {
        width: 100%;
        /*     幅（基準となる箱に対する割合） */
    }

    .home-page .yunnan-origin > h3 {
        margin-bottom: 0;
        /*             下の外側余白 */
    }

    /* [H-04-C-MAP] 開始：豆種と味わいの共通配置図 */
    .home-page .yunnan-beans,
    .home-page .yunnan-flavor {
        display: grid;
        /*       配置・表示方法 */

        grid-template-columns: 1fr  128px;
        /*                     左列 右列 */

        gap: 16px 24px;
        /*   行間 列間 */

        align-content: start;
        /*             行全体の揃え方 */

        grid-template-areas:
        /* 引用符一組が一行、空白で区切った名前が各列を表す */
            "heading art"
            /* 上段：左は見出し、右は画像 */
            "body    art";
            /* 下段：左は本文。同じ art が上下につながる */
    }
    /* [H-04-C-MAP] 終了：豆種と味わいの共通配置図 */

    /* 配置図で使う名前を各要素に割り当てる */
    .home-page .yunnan-beans > h3,
    .home-page .yunnan-flavor > h3 {
        /* 見出しを上段に配置する */

        grid-area: heading;
        /*         配置図の領域名 */

        margin-bottom: 0;
        /*             下の外側余白 */
    }

    .home-page .yunnan-beans > p,
    .home-page .yunnan-flavor > p {
        /* 本文を下段に配置する */

        grid-area: body;
        /*         配置図の領域名 */
    }

    .home-page .yunnan-beans > .yunnan-art,
    .home-page .yunnan-flavor > .yunnan-art {
        /* 右列の画像を上段・下段にまたがるよう配置する */

        grid-area: art;
        /*         配置図の領域名 */

        margin: 0;
        /*      四辺 */
    }

    /* 右の画像列に合わせ、縦横比を保って縮小する */
    .home-page .yunnan-beans > .yunnan-art img,
    .home-page .flavor-cup {
        width: 100%;
        /*     幅（基準となる箱に対する割合） */
    }

    /* 風味を表す三枚の小さな画像を横に並べる */
    .home-page .flavor-notes {
        display: flex;
        /*       配置・表示方法 */

        flex-wrap: wrap;
        /*         折り返し */

        gap: 8px;
        /*   行間・列間 */

        margin-top: 16px;
        /*          上の外側余白 */
    }

    .home-page .flavor-notes img {
        width: 36px;
        /*     幅 */
    }
}
/* [H-04-C] 終了：PC 各区画の画像と文字の配置 */

/* [H-04-D] 開始：番号と区画の区切り線 */
/* 三つの番号を共通の色・大きさ・間隔で表示する。色は仮設定。 */
.home-page .home-yunnan .section-number {
    color: #d8752a;
    /*     文字色 */

    font-size: var(--type-number);
    /*         文字サイズ */

    font-weight: 700;
    /*           文字の太さ */

    margin-right: 12px;
    /*            右の外側余白 */
}

/* ビューポート幅が 1024px 以上のときに適用 */
@media (min-width: 1024px) {
    /* [H-04-D-LINE] 開始：産地区画の右側の線 */
    .home-page .yunnan-origin {
        /* 内容と右側の線の間に余白を確保する */

        padding-right: 24px;
        /*             右の内側余白 */

        border-right: 1px  solid #d7ded8;
        /*            太さ 種類  色 */
    }
    /* [H-04-D-LINE] 終了：産地区画の右側の線 */

    /* 豆種と味わいの間を細い線で区切る */
    .home-page .yunnan-beans {
        padding-bottom: 24px;
        /*              下の内側余白 */

        border-bottom: 1px  solid #d7ded8;
        /*             太さ 種類  色 */
    }
}
/* [H-04-D] 終了：番号と区画の区切り線 */

/* [H-04-E] 開始：小見出しの淡い色の装飾 */
/* 見出しの幅に合わせて、装飾を置く基準を作る */
.home-page .yunnan-layout h3 {
    position: relative;
    /*        装飾を配置する基準 */

    z-index: 0;
    /*       見出し内の重なり順の基準 */

    width: fit-content;
    /*     内容に合わせた幅 */

    max-width: 100%;
    /*         親の内容幅を上限にする */

    padding-right: 12px;
    /*             文字の右側の内側余白 */
}

/* [H-04-E-AFTER] 開始：見出しの下に重ねる色の帯 */
/* HTML のタグを増やさず、装飾専用の箱を生成する */
.home-page .yunnan-layout h3::after {
    content: "";
    /*       空の内容で装飾用の箱を生成する */

    position: absolute;
    /*        見出しを基準に重ねて配置 */

    left: 48px;
    /*    左端からの距離（番号の部分を避ける） */

    right: 0;
    /*     右端からの距離 */

    bottom: 4px;
    /*      下端からの距離 */

    height: 12px;
    /*      帯の高さ */

    background-color: #d8eff0;
    /*                帯の色（仮設定） */

    z-index: -1;
    /*       見出し内で文字より後ろに置く */

    pointer-events: none;
    /*              装飾をマウス操作の対象から外す */
}
/* [H-04-E-AFTER] 終了：見出しの下に重ねる色の帯 */
/* [H-04-E] 終了：小見出しの淡い色の装飾 */
/* [H-04-F] 開始：発見ノートの仕上げと縦並び */
.home-page .yunnan-layout > section {
    min-width: 0;
    /*          長い文章でも列の幅を押し広げない */
}

.home-page .yunnan-layout {
    display: grid;
    /*        狭い画面でも区画間隔を管理する */

    gap: 36px;
    /*    区画同士の間隔 */
}

.home-page .yunnan-art img {
    width: 100%;
    /*      画像を区画の幅に合わせる */
}

.home-page .yunnan-beans .yunnan-art,
.home-page .flavor-art {
    max-width: 220px;
    /*          縦長の挿絵が大きくなりすぎない */

    margin: 16px auto;
    /*       上下 左右中央 */
}

.home-page .flavor-notes {
    display: flex;
    /*        味わいの小さな挿絵を横に並べる */

    gap: 8px;
    /*    挿絵の間隔 */

    margin-top: 16px;
    /*           カップとの間隔 */
}

.home-page .flavor-notes img {
    width: calc((100% - 16px) / 3);
    /*      2 個分の隙間を引いて 3 枚に配分する */

    max-width: 64px;
    /*          小さな挿絵の上限 */
}

.home-page .home-yunnan .section-number {
    display: inline-grid;
    /*        番号を小さな円の中央に置く */

    place-items: center;
    /*            縦横の中央 */

    width: 46px;
    /*      番号枠の幅 */

    height: 46px;
    /*       番号枠の高さ */

    border: 1px solid #d8752a;
    /*       太さ 種類 色 */

    border-radius: 48% 52% 45% 55%;
    /*              少し不均等な丸い輪郭 */

    font-size: var(--type-number);
    /*          番号のサイズ */
}

.home-page .yunnan-layout h3::after {
    left: 58px;
    /*     番号を避けて文字の下から始める */
}

@media (min-width: 1024px) {
    .home-page .yunnan-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        /*                      左列と右列の幅の配分 */

        gap: 28px 36px;
        /*    行間 列間 */
    }

    .home-page .yunnan-beans,
    .home-page .yunnan-flavor {
        grid-template-columns: minmax(0, 1fr) 112px;
        /*                      本文の可変幅と挿絵の固定幅 */

        gap: 16px 20px;
        /*    行間 列間 */
    }

    .home-page .yunnan-beans .yunnan-art,
    .home-page .flavor-art {
        margin: 0;
        /*       PC 配置では自動中央寄せを外す */

        align-self: start;
        /*           挿絵を上に揃える */
    }
}

@media (max-width: 1023px) {
    .home-page .yunnan-layout > section + section {
        border-top: 1px solid #d7ded8;
        /*           太さ 種類 色 */

        padding-top: 32px;
        /*            次の区画の始まりの余白 */
    }
}

/* [H-04-F] 終了：発見ノートの仕上げと縦並び */

/* [H-04-G] 開始：スマートフォンの発見手記 */
/* PC の二列配置は変更せず、768px 未満だけを編集する */
@media (width < 768px) {
    .home-page .home-yunnan {
        padding: 36px 24px 44px;
        /*        上 左右 下：導入文から自然につなぐ */
    }

    .home-page .home-yunnan > h2 {
        margin-bottom: 24px;
        /*             最初の項目までの余白 */

        font-size: var(--type-section);
        /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */

        line-height: var(--leading-heading);
        /*           二行見出しの間隔 */

        letter-spacing: 0.02em;
        /*               控えめな文字間隔 */
    }

    .home-page .yunnan-title-line {
        display: block;
        /*       意味の切れ目で二行に分ける */
    }

    .home-page .yunnan-title-line:last-child {
        color: #18596b;
        /*     雲南を示す行を青緑にする */

        font-size: var(--type-section);
        /*         一行目に対する倍率 */
    }

    .home-page .yunnan-layout {
        gap: 24px;
        /*    手記の三項目の間隔 */
    }

    .home-page .yunnan-layout > section {
        display: grid;
        /*        挿絵を二つの文章の間に入れ、読むリズムを作る */

        grid-template-columns: minmax(0, 1fr);
        /*                     通し幅の一列 */

        grid-template-areas: "heading" "lead" "art" "body";
        /*                    見出し・導入文・挿絵・詳しい手記の順 */

        align-items: center;
        /*           小見出しと挿絵の高さを中央に揃える */

        gap: 14px;
        /*   各要素の縦の間隔 */
    }

    .home-page .yunnan-layout > section + section {
        padding-top: 22px;
        /*            区切り線から次の項目まで */
    }

    .home-page .yunnan-layout h3 {
        grid-area: heading;
        /*         上段左に置く */

        display: flex;
        /*       番号と小見出しを一行にまとめる */

        flex-direction: row;
        /*              番号と小見出しを横にまとめる */

        align-items: baseline;
        /*           番号と見出しの文字の基準線を揃える */

        gap: 12px;
        /*   番号と文字の間隔 */

        margin: 0;
        /*      既存の下余白を外す */

        padding: 0;
        /*       右側の余白を外す */

        font-size: var(--type-subheading);
        /*         小見出しの大きさ */
    }

    .home-page .yunnan-layout h3::after {
        left: 36px;
        /*    番号の右から見出しの下に帯を置く */

        height: 8px;
        /*       控えめな下線の厚み */
    }

    .home-page .home-yunnan .section-number {
        width: auto;
        /*     数字に必要な幅 */

        height: auto;
        /*      円形の固定高さを外す */

        border: 0;
        /*       丸枠を外し、手記の番号として扱う */

        margin: 0;
        /*      左右の余白を外す */

        font-size: var(--type-number);
        /*         小見出しより小さい番号 */

        letter-spacing: 0.08em;
        /*               数字の字間 */
    }

    .home-page .yunnan-layout > section > p {
        display: contents;
        /*       HTML の文章を保持し、二つのまとまりを別の行へ配置する */
    }

    .home-page .yunnan-reading-part {
        display: block;
        /*       文章のまとまりを一つの箱として扱う */

        grid-area: lead;
        /*         最初の文章を挿絵の前へ置く */

        font-size: var(--type-body);
        /*         導入の文章を少し大きくする */

        line-height: var(--leading-body);
        /*           読みやすい行高 */

        color: #294b48;
        /*     導入文を落ち着いた青緑で区別する */
    }

    .home-page .yunnan-reading-part + .yunnan-reading-part {
        grid-area: body;
        /*         続きの文章を挿絵の後へ置く */

        margin: 0;
        /*      間隔は親の gap で管理する */

        font-size: var(--type-body);
        /*         詳しい手記も小さくしすぎない */

        color: #48534b;
        /*     導入文と補足文に穏やかな強弱を付ける */
    }

    .home-page .yunnan-layout .yunnan-art {
        grid-area: art;
        /*         二つの文章の間に置く大きな挿絵 */

        width: min(100%, 360px);
        /*      欄の幅に収めつつ、十分な大きさで見せる */

        max-width: none;
        /*          共通の上限を解除する */

        margin: 0 auto;
        /*      上下 左右：挿絵を中央に置く */
    }

    .home-page .yunnan-layout .yunnan-art > img {
        width: 100%;
        /*      挿絵欄の幅 */

        height: 184px;
        /*       文章を分ける挿絵の高さ */

        object-fit: contain;
        /*          切り取らず、原画全体を収める */
    }

    .home-page .yunnan-beans .yunnan-art {
        width: min(80%, 270px);
        /*      縦長の枝は横長の風景より少し狭い枠に収める */
    }

    .home-page .yunnan-layout .flavor-art {
        width: min(90%, 290px);
        /*      カップと風味の組み合わせの幅 */

        display: grid;
        /*        カップと風味の小図を横にまとめる */

        grid-template-columns: minmax(0, 1fr) 48px;
        /*                     カップの可変幅 風味の小図 */

        gap: 8px;
        /*   二列の間隔 */

        align-items: center;
        /*           高さの中央を揃える */
    }

    .home-page .flavor-notes {
        flex-direction: column;
        /*              風味の三図を縦に並べる */

        gap: 4px;
        /*   小図の間隔 */

        margin: 0;
        /*      カップとの上余白を外す */
    }

    .home-page .flavor-notes img {
        width: 48px;
        /*      風味を見分けられる大きさ */

        height: 48px;
        /*       正方形の表示枠 */

        object-fit: contain;
        /*          元の形を保つ */
    }
}
/* [H-04-G] 終了：スマートフォンの発見手記 */

/* [H-04] 終了：雲南コーヒーの発見ノート */

/* [H-05] 開始：ホームページの商品紹介 */
/* [H-05-A] 開始：見出しと分類表示の下準備 */
.home-page .home-products .section-heading {
    display: flex;
    /*       見出しと一覧リンクを横に並べる */

    justify-content: space-between;
    /*               余った幅を間に置き、左右に分ける */

    align-items: center;
    /*           上下の中央揃え */

    flex-wrap: wrap;
    /*         幅が足りない場合は折り返す */

    gap: 16px 24px;
    /*   行間 列間 */

    margin-bottom: 24px;
    /*              下の外側余白 */
}

.home-page .home-products h2 {
    font-size: var(--type-section);
    /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */

    line-height: var(--leading-heading);
    /*           文字サイズに対する行高の倍率 */
}

/* 一覧リンクの色と装飾は [H-07] で共通管理する */

/* 分類は表示のみ。絞り込み機能はまだ付けない。 */
.home-page .product-categories {
    display: flex;
    /*       分類名を横に並べる */

    flex-wrap: wrap;
    /*         幅が足りない場合は折り返す */

    gap: 12px 24px;
    /*   行間 列間 */

    list-style: none;
    /*          箇条書き記号を消す */

    margin: 0  0  32px;
    /*      上 左右 下 */

    padding: 0;
    /*       四辺の内側余白 */
}
/* [H-05-A] 終了：見出しと分類表示の下準備 */

/* [H-05-B] 開始：商品カードの共通設定 */
.home-page .product-grid {
    display: grid;
    /*       カードを Grid で配置する */

    gap: 32px 24px;
    /*   行間 列間 */

    list-style: none;
    /*          箇条書き記号を消す */

    margin: 0;
    /*      四辺の外側余白 */

    padding: 0;
    /*       四辺の内側余白 */
}

/* [H-05-B-IMAGE] 開始：商品画像の比率と収め方 */
.home-page .product-image img {
    width: 100%;
    /*     カード内の画像枠の幅に合わせる */

    /* 高さは H-00 の auto を使い、下の比率から決める */
    aspect-ratio: 3 / 2;
    /*            横  縦 */

    object-fit: contain;
    /*          画像全体を比率を保って収める */
}
/* [H-05-B-IMAGE] 終了：商品画像の比率と収め方 */

.home-page .product-image p {
    margin-top: 8px;
    /*          上の外側余白 */

    font-size: var(--type-caption);
    /*         準備中表示の文字サイズ */

    color: #626860;
    /*     補助文字の色（仮設定） */
}

.home-page .product-name {
    margin-top: 12px;
    /*          上の外側余白 */

    font-size: var(--type-card-title);
    /*         商品名の文字サイズ */

    line-height: var(--leading-heading);
    /*           文字サイズに対する行高の倍率 */
}

.home-page .product-category {
    margin-top: 4px;
    /*          上の外側余白 */

    font-size: var(--type-meta);
    /*         分類名の文字サイズ */

    color: #626860;
    /*     補助文字の色（仮設定） */
}
/* [H-05-LINK] 商品名と分類のリンク。既存の本文色を引き継ぐ。 */
.home-page .product-name a,
.home-page .product-categories a {
    color: inherit;
    /*     親要素の商品名・分類の色 */

    text-decoration-thickness: 1px;
    /*                         下線の太さ */
}

.home-page .product-name a:hover,
.home-page .product-categories a:hover {
    color: #18596b;
    /*     ホバー時のブランド共通色 */
}
/* [H-05-B] 終了：商品カードの共通設定 */

/* [H-05-C] 開始：PC の四列配置 */
/* ビューポート幅が 1024px 以上のときに適用 */
@media (min-width: 1024px) {
    .home-page .product-grid {
        grid-template-columns: repeat(4,   1fr);
        /*                           回数  各列の幅 */
    }
}
/* [H-05-C] 終了：PC の四列配置 */
/* [H-05-D] 開始：分類と画面幅ごとの列数 */
.home-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /*                      基本は二列、PC は四列 */
}

.home-page .product-card {
    min-width: 0;
    /*          カード内の長い文字を折り返せるようにする */
}

.home-page .product-categories {
    padding-bottom: 16px;
    /*               区切り線までの余白 */

    border-bottom: 1px solid #d7ded8;
    /*              太さ 種類 色 */

    font-size: var(--type-meta);
    /*          分類ラベルの文字サイズ */

    color: #626860;
    /*      分類ラベルの文字色 */
}

.home-page .product-categories li + li {
    padding-left: 20px;
    /*             前の分類との間隔 */

    border-left: 1px solid #d7ded8;
    /*            太さ 種類 色 */
}

@media (min-width: 1024px) {
    .home-page .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /*                      PC は四列、内容による押し広げを防ぐ */
    }
}

@media (max-width: 479px) {
    .home-page .product-grid {
        grid-template-columns: minmax(0, 1fr);
        /*                      小さい画面は一列にして画像と名前を読みやすくする */
    }
}

/* [H-05-D] 終了：分類と画面幅ごとの列数 */

/* [H-05] 終了：ホームページの商品紹介 */

/* [H-06] 開始：ホームページのニュース */
/* [H-06-A] 開始：見出しとキャラクターの下準備 */
.home-page .home-news > h2 {
    margin-bottom: 32px;
    /*              下の外側余白 */

    font-size: var(--type-section);
    /*         文字サイズ */

    line-height: var(--leading-heading);
    /*           文字サイズに対する行高の倍率 */
}

.home-page .news-scene {
    display: grid;
    /*       キャラクターと新聞を Grid で配置する */

    gap: 32px;
    /*   行間・列間 */

    align-items: end;
    /*           各項目を下側に揃える */
}

.home-page .news-mascot img {
    width: 100%;
    /*     キャラクターの箱の幅に合わせる */

    max-width: 360px;
    /*         画像の幅の上限 */
}
/* [H-06-A] 終了：見出しとキャラクターの下準備 */

/* [H-06-PAPER] 開始：新聞の面と影 */
.home-page .news-paper {
    background-color: #fffef9;
    /*                紙の色（仮設定） */

    border: 1px  solid #d7ded8;
    /*      太さ 種類  色 */

    padding: 32px;
    /*       四辺の内側余白 */

    box-shadow: 8px 10px 0      #e5e9df;
    /*          横  縦   ぼかし 色 */
}
/* [H-06-PAPER] 終了：新聞の面と影 */

/* [H-06-B] 開始：記事の文字と間隔 */
.home-page .news-list {
    display: grid;
    /*       記事を Grid で配置する */

    gap: 24px;
    /*   行間・列間 */

    list-style: none;
    /*          箇条書き記号を消す */

    margin: 0  0  24px;
    /*      上 左右 下 */

    padding: 0;
    /*       四辺の内側余白 */
}

.home-page .news-meta {
    display: flex;
    /*       分類と日付を横に並べる */

    flex-wrap: wrap;
    /*         幅が足りない場合は折り返す */

    gap: 8px  16px;
    /*   行間 列間 */

    margin-bottom: 12px;
    /*              下の外側余白 */

    font-size: var(--type-meta);
    /*         補助情報の文字サイズ */

    color: #626860;
    /*     補助情報の文字色（仮設定） */
}

.home-page .news-title {
    font-size: var(--type-card-title);
    /*         記事見出しの文字サイズ */

    line-height: var(--leading-heading);
    /*           文字サイズに対する行高の倍率 */
}

.home-page .news-featured .news-title {
    font-size: var(--type-card-title);
    /*         大きく紹介する記事の文字サイズ */
}

.home-page .news-summary {
    margin-top: 16px;
    /*          上の外側余白 */

    line-height: 1.8;
    /*           文字サイズに対する行高の倍率 */
}

.home-page .news-paper > .section-link {
    display: block;
    /*       独立した箱として表示する */

    width: fit-content;
    /*     リンクの内容に合わせた幅 */

    margin-left: auto;
    /*           左の余白を自動で取り、右へ寄せる */

    /* 色と装飾は [H-07] で共通管理する */
}
/* [H-06-B] 終了：記事の文字と間隔 */

/* [H-06-C] 開始：PC の新聞レイアウト */
/* ビューポート幅が 1024px 以上のときに適用 */
@media (min-width: 1024px) {
    .home-page .news-scene {
        grid-template-columns: 300px 1fr;
        /*                     左列  右列 */
    }

    .home-page .news-list {
        grid-template-columns: 1.2fr 1fr;
        /*                     左列  右列 */
    }

    .home-page .news-featured {
        grid-row: 1 / span 2;
        /*        開始線 / 使用する行数 */

        padding-right: 24px;
        /*             右の内側余白 */

        border-right: 1px  solid #d7ded8;
        /*            太さ 種類  色 */
    }
}
/* [H-06-C] 終了：PC の新聞レイアウト */
/* [H-06-D] 開始：新聞を読むの場面と紙の仕上げ */
.home-page .home-news {
    position: relative;
    /*         背景装飾の配置基準 */

    isolation: isolate;
    /*          この区画内で背景の重なりを管理する */
}

.home-page .home-news::before {
    content: "";
    /*        背景用の空要素 */

    position: absolute;
    /*         通常の並びから外す */

    left: 0;
    /*     左端 */

    bottom: 24px;
    /*       下端からの距離 */

    width: 45%;
    /*      淡い色の広がり */

    height: 260px;
    /*       淡い色の高さ */

    background: radial-gradient(ellipse, #dceadd, transparent 70%);
    /*           中心から外側へ透明にする */

    z-index: -1;
    /*        内容の後ろに置く */

    pointer-events: none;
    /*               操作の対象から外す */
}

.home-page .news-paper {
    position: relative;
    /*         紙の装飾の基準 */

    min-width: 0;
    /*          記事の折り返しを許す */

    padding: 40px;
    /*        紙の内側余白 */

    border-top: 3px double #9cbcaf;
    /*           太さ 種類 色 */
}

.home-page .news-paper::after {
    content: "";
    /*        紙の折り返しを表す空要素 */

    position: absolute;
    /*         紙の右下に配置する */

    right: 0;
    /*      右端 */

    bottom: 0;
    /*       下端 */

    width: 28px;
    /*      折り返しの幅 */

    height: 28px;
    /*       折り返しの高さ */

    background: linear-gradient(135deg, transparent 50%, #dce5d7 50%);
    /*           斜めの境界で折り返しを表す */

    pointer-events: none;
    /*               操作を妨げない */
}

.home-page .news-mascot {
    align-self: end;
    /*           椅子の下端を揃える */
}

.home-page .news-mascot img {
    margin: 0 auto;
    /*       左右中央に置く */
}

.home-page .news-category {
    color: #477b73;
    /*      記事分類の文字色 */

    border-bottom: 2px solid #cfe0d4;
    /*              太さ 種類 色 */
}

.home-page .news-paper > .section-link {
    margin-top: 24px;
    /*           記事一覧との間隔 */
}

@media (min-width: 1024px) {
    .home-page .news-scene {
        grid-template-columns: minmax(220px, 0.7fr) minmax(0, 2fr);
        /*                      キャラクターの列と新聞の列 */

        gap: 0;
        /*    キャラクターを紙に近づける */
    }

    .home-page .news-mascot {
        position: relative;
        /*         紙に少し重なるキャラクターの位置基準 */

        z-index: 1;
        /*        キャラクターを紙より手前に置く */

        margin-right: -24px;
        /*             紙の余白へ少し重ねる */
    }

    .home-page .news-paper {
        padding-left: 48px;
        /*             キャラクターと記事の間に余白を確保する */
    }

    .home-page .news-list {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        /*                      主記事と小記事の配分 */
    }

    .home-page .news-item:last-child {
        border-top: 1px solid #d7ded8;
        /*           太さ 種類 色 */

        padding-top: 24px;
        /*            二つの小記事の間隔 */
    }
}

@media (max-width: 1023px) {
    .home-page .news-mascot img {
        max-width: 220px;
        /*          縦並びではキャラクターを少し小さくする */
    }

    .home-page .news-paper {
        padding: 28px;
        /*        狭い画面の紙の余白 */
    }

    .home-page .news-item + .news-item {
        border-top: 1px solid #d7ded8;
        /*           太さ 種類 色 */

        padding-top: 24px;
        /*            各記事を線と余白で区切る */
    }
}

/* [H-06-D] 終了：新聞を読むの場面と紙の仕上げ */

/* [H-06] 終了：ホームページのニュース */

/* [H-07] 開始：ホームページの一覧リンク */
/* 商品一覧とニュース一覧の入口に同じ装飾を使う */
.home-page .section-link {
    color: #18596b;
    /*     通常時のリンク文字色 */

    font-weight: 600;
    /*           文字の太さ */

    text-decoration: underline;
    /*               下線を付ける */

    /* [H-07-OFFSET] 開始：下線の位置（学習用） */
    text-underline-offset: 6px;
    /*                     下線の位置を下へずらす距離 */
    /* [H-07-OFFSET] 終了：下線の位置（学習用） */
}

.home-page .section-link:hover,
.home-page .section-link:focus-visible {
    color: #477b73;
    /*     操作時のリンク文字色 */
}

.home-page .section-link:focus-visible {
    outline: 2px  solid #18596b;
    /*       太さ 種類  色 */

    outline-offset: 4px;
    /*              外枠とリンクの間隔 */
}
/* [H-07] 終了：ホームページの一覧リンク */

/* [H-08] 開始：スマートフォンの余白と文字サイズ */
@media (max-width: 767px) {
    .home-page .home-yunnan,
    .home-page .home-products,
    .home-page .home-news {
        padding: 48px 20px;
        /*        上下 左右の余白 */
    }

    .home-page .home-yunnan > h2,
    .home-page .home-products h2 {
        font-size: var(--type-section);
        /*          小さい画面の区画見出し */
    }

    .home-page .yunnan-layout h3 {
        font-size: var(--type-subheading);
        /*          小見出しの文字サイズ */
    }

    .home-page .news-featured .news-title {
        font-size: var(--type-card-title);
        /*          主記事見出しの文字サイズ */
    }
}

/* [H-08] 終了：スマートフォンの余白と文字サイズ */

/* [P-00] 開始：子ページ共通の本文と見出し */
.sub-page {
    max-width: 1120px;
    /*          子ページ本文の最大幅 */

    min-height: 55vh;
    /*           準備中の短いページにも読みやすい余白を保つ */

    margin: 0 auto;
    /*       上下 左右中央 */

    padding: 32px 32px 80px;
    /*        上 左右 下 */
}

.sub-page h1,
.sub-page h2,
.sub-page h3,
.sub-page p,
.sub-page dl,
.sub-page dd {
    margin: 0;
    /*       本文内の既定余白を統一する */
}

.sub-page h1 {
    font-size: var(--type-page);
    /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */

    line-height: var(--leading-heading);
    /*            ページ見出しの行高 */

    margin: 32px 0 24px;
    /*       上 左右 下 */
}

.sub-page h2 {
    font-size: var(--type-section);
    /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */

    line-height: var(--leading-heading);
    /*            区画見出しの行高 */

    margin-bottom: 24px;
    /*              見出しと内容の間隔 */
}

.sub-page h3 {
    font-size: var(--type-subheading);
    /*          小見出しの文字サイズ */

    margin-bottom: 12px;
    /*              小見出しの下の余白 */
}

.sub-page > section {
    padding: 36px 0;
    /*        上下 左右の余白 */

    border-top: 1px solid #d7ded8;
    /*           太さ 種類 色 */

    margin-top: 32px;
    /*           前の区画との間隔 */
}

.sub-page p + p {
    margin-top: 16px;
    /*           続く段落との間隔 */
}

.sub-page a {
    color: #18596b;
    /*      子ページのリンク文字色 */
}

.sub-page a:hover,
.sub-page a:focus-visible {
    color: #477b73;
    /*      操作時の文字色 */
}

.sub-page address {
    font-style: normal;
    /*           連絡先を斜体にしない */

    margin-top: 20px;
    /*           本文との間隔 */
}

/* [P-00] 終了：子ページ共通の本文と見出し */

/* [P-01] 開始：パンくずと資料一覧 */
.breadcrumb {
    display: flex;
    /*        現在位置を横に並べる */

    flex-wrap: wrap;
    /*          狭い画面では折り返す */

    gap: 8px 12px;
    /*    行間 列間 */

    font-size: var(--type-meta);
    /*          現在位置の文字サイズ */

    color: #626860;
    /*      現在位置の文字色 */
}

/* [P-01-LINK] 閲覧済みでもパンくずの文字色を統一する。 */
.breadcrumb a,
.breadcrumb a:visited {
    color: #18596b;
    /*      共通のリンク色 */
    text-underline-offset: 4px;
    /*                     下線と文字の間隔 */
}

.breadcrumb > * + *::before {
    content: "/";
    /*        二つ目以降の項目の前に区切りを付ける */

    margin-right: 12px;
    /*             区切りと項目の間隔 */

    color: #9cbcaf;
    /*      区切りの色 */
}

.sub-page dl > div {
    display: grid;
    /*        項目名と説明を二列にする */

    grid-template-columns: 180px minmax(0, 1fr);
    /*                      項目名の幅 説明の可変幅 */

    gap: 12px 24px;
    /*    行間 列間 */

    padding: 16px 0;
    /*        上下 左右 */

    border-bottom: 1px solid #d7ded8;
    /*              太さ 種類 色 */
}

.sub-page dt {
    font-weight: 600;
    /*            項目名を少し太くする */
}

.availability-status {
    margin-top: 20px;
    /*           前の説明との間隔 */

    padding: 16px 20px;
    /*        上下 左右 */

    background-color: #edf3ec;
    /*                 準備中の案内の背景色 */

    border-left: 3px solid #9cbcaf;
    /*            太さ 種類 色 */
}

/* [P-01] 終了：パンくずと資料一覧 */

/* [P-02] 開始：商品一覧と商品詳細 */
.products-page .product-card {
    display: grid;
    /*        商品画像と説明の配置を管理する */

    gap: 16px;
    /*    要素の間隔 */
}

.products-page .product-image img,
.product-detail-page > .product-image img {
    width: 100%;
    /*      画像を枠に合わせる */

    aspect-ratio: 3 / 2;
    /*             幅と高さの比率 */

    object-fit: contain;
    /*           画像全体を切らずに収める */
}

.sub-page .product-image p {
    margin-top: 8px;
    /*           仮画像の下の余白 */

    font-size: var(--type-caption);
    /*          画像の説明サイズ */

    color: #626860;
    /*      画像の説明の文字色 */
}

.product-detail-page > .product-image {
    max-width: 680px;
    /*          商品画像の最大幅 */

    margin: 32px auto 48px;
    /*       上 左右中央 下 */
}

.brewing-steps {
    display: grid;
    /*        手順の間隔を管理する */

    gap: 24px;
    /*    手順同士の間隔 */

    padding-left: 28px;
    /*             標準の番号用の余白 */

    margin: 24px 0;
    /*       上下 左右 */
}

.brewing-steps li::marker {
    color: #d8752a;
    /*      手順番号の色 */

    font-weight: 700;
    /*            手順番号の太さ */
}

@media (min-width: 768px) {
    .products-page .product-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /*                      画像と説明を同じ幅にする */

        column-gap: 40px;
        /*           左右の列間隔 */
    }

    .products-page .product-card > .product-image {
        grid-column: 1;
        /*            画像は左列 */

        grid-row: 1 / span 5;
        /*         右側の五つの要素にまたがせる */
    }

    .products-page .product-card > :not(.product-image) {
        grid-column: 2;
        /*            画像以外の内容は右列 */
    }

    .brewing-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /*                      三つの手順を横並びにする */

        gap: 32px;
        /*    手順間の余白 */
    }
}

/* [P-02] 終了：商品一覧と商品詳細 */

/* [P-03] 開始：ブランド画像と子ページの狭い画面対応 */
.about-origin-art {
    max-width: 820px;
    /*          産地イラストの最大幅 */

    margin: 28px auto 0;
    /*       上 左右中央 下 */
}

.about-origin-art img {
    width: 100%;
    /*      産地イラストを枠に合わせる */
}

.about-mascot-art {
    max-width: 320px;
    /*          キャラクターの最大表示幅 */

    margin: 28px auto 0;
    /*       上 左右中央 下 */
}

.about-mascot-art img {
    width: 100%;
    /*      キャラクターを枠に合わせる */
}

@media (max-width: 767px) {
    .sub-page {
        padding: 24px 20px 56px;
        /*        上 左右 下 */
    }

    .sub-page > section {
        padding: 28px 0;
        /*        上下 左右 */

        margin-top: 24px;
        /*           前の区画との間隔 */
    }

    .sub-page dl > div {
        grid-template-columns: minmax(0, 1fr);
        /*                      項目名の下に説明を置く */

        gap: 6px;
        /*    項目名と説明の間隔 */
    }
}

/* [P-03-A] 開始：ホームとブランド紹介から産地紹介への入口 */
.home-page .yunnan-origin-entry {
    margin-top: 32px;
    /*           発見ノート本文と入口の間隔 */

    text-align: right;
    /*          読み終えた位置に入口を置く */
}

.origin-entry-link {
    display: inline-flex;
    /*        文字と矢印を横に並べる */

    align-items: center;
    /*          縦方向の中央 */

    gap: 24px;
    /*    文字と矢印の間隔 */

    margin-top: 20px;
    /*           紹介文とリンクの間隔 */

    padding: 14px 22px;
    /*        上下 左右 */

    border: 1px solid #18596b;
    /*      太さ 種類 色 */

    border-radius: 4px;
    /*             角を少し丸める */

    background: #fffef9;
    /*          ホームと同じ生成り色 */

    color: #18596b;
    /*     ホームと同じ青緑色 */

    font-size: var(--type-link);
    /*         入口の文字サイズ */

    font-weight: 600;
    /*           本文より少し太い文字 */

    text-decoration: none;
    /*              枠が目印になるので下線は外す */
}

.origin-entry-link:hover,
.about-page .origin-entry-link:hover {
    background: #e9f3ef;
    /*          マウスを重ねたときの淡い青緑 */

    color: #18596b;
    /*     操作時も読みやすい濃さを保つ */
}

.origin-entry-link:focus-visible {
    outline: 3px solid #18596b;
    /*       太さ 種類 色：キーボード操作の現在位置 */

    outline-offset: 4px;
    /*               枠とフォーカス線の間隔 */
}

@media (min-width: 1024px) {
    .about-page .about-origin-entry {
        display: grid;
        /*        イラストと紹介を二列にする */

        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        /*                     左：画像         右：紹介 */

        column-gap: 48px;
        /*          二列の間隔 */

        align-items: center;
        /*          画像と紹介の中心をそろえる */
    }

    .about-origin-entry > h2 {
        grid-column: 1 / -1;
        /*           始点 終点：見出しは二列全体を使う */
    }

    .about-origin-entry .about-origin-art {
        grid-column: 1;
        /*           画像は左列 */

        grid-row: 2;
        /*        見出しの次の行 */

        margin: 0;
        /*      従来の画像上余白を外す */
    }

    .about-origin-entry-copy {
        grid-column: 2;
        /*           紹介と入口は右列 */

        grid-row: 2;
        /*        画像と同じ行 */
    }
}
/* [P-03-A] 終了：産地紹介への入口 */

/* [P-03] 終了：ブランド画像と子ページの狭い画面対応 */


/* [P-04] 開始：雲南の産地紹介。origin-page のみに適用する */
/* [P-04-A] 開始：読み幅・日本語・写真の共通設定 */
.origin-page {
    --origin-ink: #244b43;
    /* このページで繰り返し使う文字色 */
    --origin-rule: #d5dbce;
    /* 区切り線の共通色 */
}
.origin-page .origin-main {
    overflow-wrap: normal;
    /* 通常の折り返しを使う */
    word-break: normal;
    /* 英単語も強制的に一文字ずつ分割しない */
    line-break: strict;
    /* 日本語の句読点などを行頭に置かない禁則処理 */
}
.origin-page .origin-main :is(h1, h2, h3, p, figure) {
    margin: 0;
    /* 余白は各区画でまとめて指定する */
}
.origin-page .origin-wrap {
    width: min(1280px, calc(100% - 96px));
    /*         最大幅            左右合計の余白 */
    margin-inline: auto;
    /* 左右の外側余白を均等にして中央へ */
}
.origin-page .origin-breadcrumb {
    width: min(1280px, calc(100% - 96px));
    margin: 24px auto 0;
    /*       上   左右  下 */
    display: flex;
    flex-wrap: wrap;
    /* 狭い画面では折り返す */
    gap: 8px;
    font-size: var(--type-meta);
    color: #526358;
}
.origin-page .origin-main a {
    color: inherit;
    text-underline-offset: 5px;
    /* 下線と文字の間隔 */
}
.origin-page .origin-main a:focus-visible {
    outline: 2px solid #297b70;
    /*       太さ 種類   色 */
    outline-offset: 5px;
}
.origin-page .origin-skip {
    position: absolute;
    top: -100px;
    left: 20px;
    z-index: 30;
    /* 他の箱より前に表示する順番 */
    padding: 12px;
    background: #fffef9;
}
.origin-page .origin-skip:focus { top: 12px; }
.origin-page .origin-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #48766a;
    font-size: var(--type-meta);
    letter-spacing: .1em;
    /* 文字間隔 */
    font-weight: 700;
}
.origin-page .origin-kicker > span {
    color: #a65d36;
    font-size: var(--type-number);
    font-weight: 500;
}
.origin-page .origin-main h1 {
    font-size: var(--type-page);
    /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */
    line-height: var(--leading-heading);
    /* 文字サイズに対する一行の高さ */
    letter-spacing: .025em;
}
.origin-page .origin-main h2 {
    max-width: 26em;
    font-size: var(--type-section);
    line-height: var(--leading-heading);
}
.origin-page .origin-main h3 {
    font-size: var(--type-subheading);
    line-height: var(--leading-heading);
}
.origin-page .origin-word {
    white-space: nowrap;
    /* 見出しを意味のまとまりごとに改行し、一文字だけの行を避ける */
}
.origin-page .origin-prose {
    min-width: 0;
    /* 長い文章がグリッドの幅を押し広げない */
    font-size: var(--type-body);
    line-height: var(--leading-body);
    color: #344238;
}
.origin-page .origin-prose p + p {
    margin-top: 1.2em;
    /* 二段落目以降の外側余白 */
}
.origin-page .origin-photo img {
    display: block;
    width: 100%;
    height: auto;
    /* 元の縦横比と右下のAI表示を切らずに保つ */
}
.origin-page .origin-photo figcaption,
.origin-page .origin-ai-note {
    font-size: var(--type-caption);
    line-height: 1.85;
    color: #566357;
}
.origin-page .origin-photo figcaption { margin-top: 10px; }
.origin-page .origin-section { padding-block: 72px; }
/*                                              上下の内側余白 */
.origin-page .origin-section-head { margin-bottom: 36px; }
.origin-page .origin-section-head h2,
.origin-page .origin-subhead h3 { margin-top: 12px; }
.origin-page .origin-subhead { margin-bottom: 32px; }
/* [P-04-A] 終了 */

/* [P-04-B] 開始：山地の主写真とページ内案内 */
.origin-page .origin-opening {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    /*                         左の本文             右の主写真 */
    grid-template-areas: "title photo" "intro photo" "note note";
    /* 見出しと導入文を左、写真を右に置く */
    column-gap: 48px;
    row-gap: 26px;
    padding-top: 44px;
    align-items: start;
}
.origin-page .origin-opening-title { grid-area: title; align-self: end; }
.origin-page .origin-opening-title h1 { margin-top: 20px; }
.origin-page .origin-opening-title h1 span { display: block; }
.origin-page .origin-opening-photo { grid-area: photo; }
.origin-page .origin-intro-copy { grid-area: intro; }
.origin-page .origin-opening > .origin-ai-note { grid-area: note; }
.origin-page .origin-contents {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /*                         同じ幅の三列 */
    margin-top: 36px;
    border-block: 1px solid var(--origin-rule);
    /* 上下の線   太さ 種類        共通色 */
}
.origin-page .origin-contents a {
    padding: 20px;
    text-decoration: none;
    font-size: var(--type-meta);
}
.origin-page .origin-contents a + a { border-left: 1px solid var(--origin-rule); }
.origin-page .origin-contents span { margin-right: 16px; color: #a65d36; }
.origin-page .origin-contents a:hover { background: #edf1e7; }
/* [P-04-B] 終了 */

/* [P-04-C] 開始：地図と連続した四段落 */
.origin-page .origin-location { margin-top: 56px; background: #f0f2e9; }
.origin-page .origin-location-layout {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: start;
}
.origin-page .origin-map {
    padding: 24px;
    background: #fffdf6;
    border-top: 3px solid #81a496;
    /*          太さ 種類   色 */
}
.origin-page .origin-map-locator {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--origin-rule);
}
.origin-page .origin-map-locator > img { width: 42%; height: auto; }
.origin-page .origin-map-locator div { display: grid; gap: 8px; }
.origin-page .origin-map-locator span { font-size: var(--type-meta); color: #566357; }
.origin-page .origin-map-locator strong { font-size: var(--type-subheading); color: var(--origin-ink); }
.origin-page .origin-region-map { display: block; width: 100%; height: auto; }
.origin-page .origin-map-note,
.origin-page .origin-source { font-size: var(--type-caption); line-height: 1.8; color: #526358; }
.origin-page .origin-source { display: inline-block; margin-top: 12px; }
/* [P-04-C] 終了 */

/* [P-04-D] 開始：写真と本文を交互に組み合わせる */
.origin-page .origin-story-row {
    display: grid;
    gap: clamp(28px, 4vw, 64px);
    /*         最小    可変   最大：画像と文章の距離 */
    align-items: center;
}
.origin-page .origin-photo-first {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    /*                         写真の列           本文の列 */
}
.origin-page .origin-text-first {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    /*                         本文の列           写真の列 */
}
.origin-page .origin-story-row + .origin-story-row { margin-top: 48px; }
.origin-page .origin-seed-story { padding-top: 36px; border-top: 1px solid var(--origin-rule); }
.origin-page .origin-photo-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
    /* 同じ寸法の写真を二列に並べ、モバイルでは一列にする */
}
.origin-page .origin-harvest-details { margin-top: 32px; }
/* [P-04-D] 終了 */

/* [P-04-E] 開始：日晒の全景・手元・二つの説明を組み合わせる */
.origin-page .origin-harvest { background: #f1f3e9; }
.origin-page .origin-drying-story {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--origin-rule);
}
.origin-page .origin-drying-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-areas: "wide intro" "care detail";
    /* 日晒全景の右に導入文。次の行では本文と翻晒の近景を配置する */
    gap: 32px 56px;
    /*    行間  列間 */
    align-items: center;
}
.origin-page .origin-drying-intro { grid-area: intro; }
.origin-page .origin-drying-wide { grid-area: wide; }
.origin-page .origin-drying-detail { grid-area: detail; }
.origin-page .origin-drying-care { grid-area: care; }
.origin-page .origin-processing-bridge {
    max-width: 70ch;
    /* 長文が横に広がりすぎない幅の上限 */
    margin: 36px auto 0;
    padding-left: 24px;
    border-left: 3px solid #8ba798;
}
/* [P-04-E] 終了 */

/* [P-04-F] 開始：確定した加工・焙煎の五段落と対応写真 */
.origin-page .origin-workshop-story {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--origin-rule);
    scroll-margin-top: 24px;
    /* ページ内リンクで移動したとき、上に残す余白 */
}
.origin-page .origin-workshop-heading {
    max-width: 900px;
    margin-bottom: 40px;
}
.origin-page .origin-workshop-lead { margin-top: 24px; }
.origin-page .origin-roasting-story {
    margin-top: 48px;
    padding: 32px;
    background: #fffdf7;
    /* 焙煎の写真群を紙面のような明るい背景でまとめる */
}
.origin-page .origin-roasting-story > .origin-kicker { margin-bottom: 24px; }
.origin-page .origin-roasting-story .origin-photo-first {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 36px;
}
.origin-page .origin-roasting-details { margin-top: 28px; }
.origin-page .origin-taste-note {
    max-width: 68ch;
    margin: 36px auto 0;
    padding-left: 24px;
    border-left: 3px solid #b97849;
}
.origin-page .origin-facility-note { margin-top: 24px; }
.origin-page .origin-finale {
    display: grid;
    grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 64px;
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--origin-rule);
}
.origin-page .origin-finale > img { width: min(100%, 280px); height: auto; justify-self: center; }
.origin-page .origin-finale .origin-prose { margin-top: 24px; }
.origin-page .origin-product-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    margin-top: 28px;
    padding: 18px 24px;
    border: 1px solid #607d6c;
    background: #fffdf7;
    font-weight: 700;
    text-decoration: none;
}
.origin-page .origin-product-link:hover { background: #e5ece0; }
/* [P-04-F] 終了 */

/* [P-04-G] 開始：タブレット・スマートフォンの読み順と余白 */
@media (max-width: 1099px) {
    /* 条件：表示幅が1099px以下 */
    .origin-page .origin-wrap,
    .origin-page .origin-breadcrumb { width: calc(100% - 56px); }
    .origin-page .origin-opening { column-gap: 28px; }
    .origin-page .origin-location-layout { gap: 32px; }
    .origin-page .origin-story-row,
    .origin-page .origin-drying-layout { column-gap: 28px; }
    .origin-page .origin-roasting-story { padding: 24px; }
}
@media (max-width: 767px) {
    /* 条件：スマートフォンでは順番に一列で読む */
    .origin-page .origin-wrap,
    .origin-page .origin-breadcrumb { width: calc(100% - 40px); }
    .origin-page .origin-breadcrumb { font-size: var(--type-meta); gap: 6px; margin-top: 18px; }
    .origin-page .origin-opening {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "photo" "intro" "note";
        gap: 24px;
        padding-top: 28px;
    }
    .origin-page .origin-main h1 { font-size: var(--type-page); }
    .origin-page .origin-main h2 { font-size: var(--type-section); }
    .origin-page .origin-main h3 { font-size: var(--type-subheading); }
    .origin-page .origin-opening-title h1 { margin-top: 14px; }
    .origin-page .origin-main .origin-opening-photo { margin-inline: -20px; }
    /* 主写真は左右の余白を打ち消して画面幅まで広げる */
    .origin-page .origin-opening-photo figcaption { padding-inline: 20px; }
    .origin-page .origin-prose { font-size: var(--type-body); line-height: var(--leading-body); }
    .origin-page .origin-contents a { font-size: var(--type-meta); padding: 12px 4px; text-align: center; }
    .origin-page .origin-contents span { display: block; margin: 0 0 4px; }
    .origin-page .origin-section { padding-block: 44px; }
    .origin-page .origin-section-head { margin-bottom: 26px; }
    .origin-page .origin-location { margin-top: 36px; }
    .origin-page .origin-location-layout,
    .origin-page .origin-story-row,
    .origin-page .origin-roasting-story .origin-photo-first,
    .origin-page .origin-photo-pair,
    .origin-page .origin-finale {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .origin-page .origin-map { padding: 16px; }
    .origin-page .origin-story-row + .origin-story-row { margin-top: 32px; }
    .origin-page .origin-seed-story { padding-top: 28px; }
    .origin-page .origin-harvest-details { margin-top: 24px; }
    .origin-page .origin-drying-story,
    .origin-page .origin-workshop-story { margin-top: 40px; padding-top: 32px; }
    .origin-page .origin-drying-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "intro" "wide" "care" "detail";
        /* 導入文→全景→手入れの説明→翻晒の写真 */
        gap: 24px;
    }
    .origin-page .origin-processing-bridge,
    .origin-page .origin-taste-note { margin-top: 28px; padding-left: 16px; }
    .origin-page .origin-roasting-story {
        margin-inline: -20px;
        padding: 28px 20px;
        /*         上下 左右：背景だけ画面の端まで広げる */
    }
    .origin-page .origin-finale { margin-top: 32px; padding-top: 32px; }
    .origin-page .origin-finale > img { width: 170px; }
    .origin-page .origin-product-link { display: flex; gap: 20px; padding: 16px; font-size: var(--type-link); }
}
/* [P-04-G] 終了 */

/* [P-04-H] 開始：PC の発見手記。ホームの色・番号・余白に合わせる */
@media (min-width: 1024px) {
    /* PC 専用。既存のスマートフォン設定には影響しない */
    .origin-page {
        --origin-ink: #18596b;
        --origin-rule: #d7ded8;
        /* ホームと共通の青緑・薄い区切り線 */
    }

    .origin-page .origin-wrap,
    .origin-page .origin-breadcrumb {
        width: min(1280px, calc(100% - 64px));
        /*         上限               左右32pxずつ */
    }

    .origin-page .origin-section { padding-block: 64px; }
    .origin-page .origin-section-head { margin-bottom: 28px; }
    .origin-page .origin-prose {
        color: #252923;
        font-size: var(--type-body);
        /*         PC 本文：17pxから一段大きくする */
        font-weight: var(--weight-body);
        /*           少し太くする。見出しの700より軽く保つ */
        line-height: var(--leading-body);
        /* 一行の高さは文字サイズの1.9倍 */
    }
    .origin-page .origin-photo figcaption,
    .origin-page .origin-ai-note,
    .origin-page .origin-map-note,
    .origin-page .origin-source,
    .origin-page .origin-map-locator span,
    .origin-page .origin-breadcrumb,
    .origin-page .origin-contents a {
        font-size: var(--type-caption);
        /*         写真説明・注記・補助案内の文字サイズ */
        font-weight: 500;
        /*           小さな文字も細くなりすぎないようにする */
        line-height: 1.8;
        color: #46544f;
        /*     淡い背景に埋もれない濃さ */
    }
    .origin-page .origin-prose p + p { margin-top: 1em; }
    .origin-page .origin-main h2 { font-size: var(--type-section); line-height: var(--leading-heading); }
    .origin-page .origin-main h3 { line-height: 1.5; }
    .origin-page .origin-kicker { color: #18596b; gap: 12px; }
    .origin-page .origin-kicker > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        border: 1px solid #c6a477;
        /*       太さ 種類    ホームの番号に合わせた茶色 */
        border-radius: 50%;
        color: #b97849;
        font-size: var(--type-number);
        letter-spacing: 0;
    }
    .origin-page .origin-section-head::after {
        content: "";
        display: block;
        width: 112px;
        height: 8px;
        margin-top: 18px;
        background: #d8eff0;
        clip-path: polygon(2% 15%, 100% 0, 97% 88%, 0 100%);
        /* 淡い青のマーカー。ホームの手記見出しにつながる装飾 */
    }

    /* [P-04-H-1] 導入：写真56%、文章44%。三段落は近くにまとめる */
    .origin-page .origin-opening {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
        grid-template-rows: auto 1fr auto;
        gap: 24px 40px;
        padding-top: 36px;
    }
    .origin-page .origin-opening-title { align-self: start; }
    .origin-page .origin-opening-title h1 { margin-top: 16px; }
    .origin-page .origin-intro-copy p + p { margin-top: 12px; }
    .origin-page .origin-contents { margin-top: 28px; }
    .origin-page .origin-contents a { padding: 16px 20px; }
    .origin-page .origin-contents a:hover { background: #edf7f6; }

    /* [P-04-H-2] 位置図：大きな背景面を淡くし、地図と本文の高さを近づける */
    .origin-page .origin-location {
        margin-top: 40px;
        background: #f0f7f5;
    }
    .origin-page .origin-location-layout {
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        gap: 48px;
    }
    .origin-page .origin-map { padding: 20px; background: #fffef9; border-top-color: #55b4bb; }
    .origin-page .origin-map-locator { padding-bottom: 12px; }
    .origin-page .origin-map-locator > img { width: 34%; }
    .origin-page .origin-region-map { max-width: 360px; margin-inline: auto; }

    /* [P-04-H-3] 畑：主写真を横長の一組、果実と生豆は下段の二組にする */
    .origin-page .origin-story-row { gap: 40px; }
    .origin-page .origin-photo-first { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
    .origin-page .origin-garden {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 48px;
        align-items: start;
    }
    .origin-page .origin-garden > .origin-section-head,
    .origin-page .origin-garden > .origin-story-row:first-of-type { grid-column: 1 / -1; }
    .origin-page .origin-garden > .origin-section-head { margin-bottom: 0; }
    .origin-page .origin-garden > .origin-story-row + .origin-story-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        margin-top: 0;
        padding-top: 28px;
        border-top: 1px solid var(--origin-rule);
        align-content: start;
    }
    .origin-page .origin-garden > .origin-text-first > .origin-photo { grid-row: 1; }
    /* 本文は書き換えず、PC でだけ写真を文章の上に並べる */

    /* [P-04-H-4] 収穫と乾燥：主役と補足写真を分け、余白を整理する */
    .origin-page .origin-harvest { background: #fffef9; border-top: 1px solid var(--origin-rule); }
    .origin-page .origin-harvest-details {
        max-width: 1040px;
        margin: 28px auto 0;
        gap: 24px;
        /* 補足二枚は主写真より小さく扱う。切り抜きはしない */
    }
    .origin-page .origin-drying-story,
    .origin-page .origin-workshop-story { margin-top: 48px; padding-top: 40px; }
    .origin-page .origin-drying-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "wide detail" "intro care";
        /* 上段は全景と手元、下段はそれぞれに対応する本文 */
        gap: 20px 48px;
        align-items: start;
    }
    .origin-page .origin-processing-bridge,
    .origin-page .origin-taste-note {
        max-width: 900px;
        margin: 32px auto 0;
        padding: 20px 24px;
        background: #f0f7f5;
        border-left-color: #55b4bb;
    }

    /* [P-04-H-5] 加工：二つの写真と説明を一つの見開きとして読む */
    .origin-page .origin-workshop-story {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 48px;
    }
    .origin-page .origin-workshop-story > :not(.origin-story-row) { grid-column: 1 / -1; }
    .origin-page .origin-workshop-heading { margin-bottom: 0; max-width: 900px; }
    .origin-page .origin-workshop-lead { margin-top: 20px; }
    .origin-page .origin-workshop-story > .origin-story-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        gap: 20px;
        align-items: start;
        margin-top: 0;
    }
    .origin-page .origin-workshop-story > .origin-text-first > .origin-photo { grid-row: 1; }
    .origin-page .origin-roasting-story {
        margin-top: 8px;
        padding: 32px;
        background: #f7f4ea;
        /* 焙煎は暖かい紙色でまとめる */
    }
    .origin-page .origin-roasting-details { max-width: 880px; margin: 28px auto 0; gap: 24px; }
    .origin-page .origin-taste-note { margin-top: 0; border-left-color: #c6a477; background: #f7f4ea; }
    .origin-page .origin-facility-note { margin-top: -16px; }

    /* [P-04-H-6] 一杯への締め：本文の行幅を制限し、ホームのリンク色に戻す */
    .origin-page .origin-finale {
        grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
        gap: 48px;
        margin-top: 40px;
        padding-top: 40px;
    }
    .origin-page .origin-finale .origin-prose { max-width: 40em; margin-top: 20px; }
    .origin-page .origin-product-link { color: #18596b; border-color: #55b4bb; }
    .origin-page .origin-product-link:hover { background: #edf7f6; }
}
/* [P-04-H] 終了：PC 専用。モバイルの再設計は後工程 */
/* [P-04] 終了：雲南の産地紹介 */


/* [P-05] 開始：雲野のこと。brand-page 内だけに適用する */
/* [P-05-A] 読み幅・文字・各区画の共通設定 */
.brand-page {
    background: #fffef9;
    /*          ホームと同じ生成り */
    color: #29352e;
    /*     本文の濃い墨色 */
    font-size: 18px;
    /*         本文の大きさ */
    font-weight: 500;
    /*           細すぎない本文の太さ */
    line-height: 1.9;
    /*           行高：文字サイズの1.9倍 */
}
.brand-page .brand-wrap {
    width: min(1200px, calc(100% - 64px));
    /*        最大幅     左右32pxを除いた幅 */
    margin-inline: auto;
    /*             左右中央 */
}
.brand-page h1, .brand-page h2, .brand-page p, .brand-page figure {
    margin: 0;
    /*      既定余白を外し、下の区画別ルールで調整する */
}
.brand-page .breadcrumb { padding-block: 28px; }
/*                                     上下の余白 */
.brand-page .brand-eyebrow,
.brand-page .brand-logo-label {
    font-size: 13px;
    /*         補助見出し */
    letter-spacing: .18em;
    /*             文字間隔 */
    color: #18596b;
    /*     共通の青緑 */
}
.brand-page h2 {
    font-size: clamp(28px, 3vw, 40px);
    /*               最小 可変 最大 */
    line-height: 1.5;
    /*           見出しの行高 */
    font-weight: 700;
    /*           見出しの太さ */
    text-wrap: balance;
    /*         見出しの行の長さを整える */
}
.brand-page .brand-index {
    display: flex;
    /*       番号と項目を横に並べる */
    align-items: center;
    /*          縦方向の中央 */
    gap: 16px;
    /*   番号と文字の間隔 */
    margin-bottom: 22px;
    /*             見出しとの間隔 */
    color: #18596b;
    font-size: 14px;
    /*         補助項目の文字サイズ */
}
.brand-index > span {
    color: #a4542c;
    /*     ホームの番号に合わせた茶色 */
    font-size: 24px;
    font-style: italic;
    /*          手記のような番号 */
}
.brand-page figcaption {
    font-size: 14px;
    color: #56675f;
    /*     図の説明も読める濃さにする */
}
.brand-page .brand-pending {
    margin-top: 24px;
    /*          見出しとの間隔 */
    color: #56675f;
    font-size: 16px;
    /*         未公開部分の説明 */
}
.brand-page section[id] { scroll-margin-top: 32px; }
/*                                         移動後に見出しの上へ残す余白 */

/* [P-05-B] 導入：大きな標語と椅子でくつろぐ雲野 */
.brand-page .brand-intro { padding-block: 32px 56px; }
/*                                     上    下 */
.brand-page h1 {
    margin-top: 8px;
    font-size: 23px;
    /*         ページ名は標語より控えめにする */
}
.brand-page .brand-slogan {
    margin-block: 28px;
    font-size: clamp(38px, 4.5vw, 66px);
    /*               最小   可変  最大 */
    line-height: 1.5;
    letter-spacing: .04em;
}
.brand-slogan > span { display: block; }
/*                              標語を二行に分ける */
.brand-page .brand-lead { max-width: 34em; }
/*                                  本文の最大行幅 */
.brand-page .brand-intro-art {
    position: relative;
    /*        太陽と背景の位置基準 */
    isolation: isolate;
    /*         装飾の重なりをこの枠内に閉じる */
    max-width: 480px;
    margin: 32px auto 0;
    padding: 32px 48px 12px;
    /*       上 左右 下 */
}
.brand-intro-art::before {
    content: "";
    position: absolute;
    inset: 12% 0 8%;
    /*     上 左右 下 */
    border-radius: 49% 51% 44% 56%;
    /*             四つの角を変えて柔らかな背景にする */
    background: #e6f0e7;
    z-index: -1;
    /*       キャラクターの後ろ */
}
.brand-intro-art img {
    display: block;
    width: 100%;
    height: auto;
    /*      元画像の比率を保つ */
}
.brand-intro-art .brand-sun {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 0;
    right: 24px;
    border-radius: 50%;
    background: #f4ba70;
    /*          ホームの太陽を思わせる差し色 */
    z-index: -1;
}
.brand-intro-art figcaption {
    text-align: center;
    margin-top: 8px;
    letter-spacing: .12em;
    color: #18596b;
}

/* [P-05-C] ページ内案内：線で仕切る三つの入口 */
.brand-page .brand-contents {
    display: flex;
    flex-wrap: wrap;
    /*         狭い画面では順に折り返す */
    border-block: 1px solid #c7d8cd;
    /*           太さ 種類 色：上下の線 */
    margin-bottom: 64px;
}
.brand-contents a {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 280px;
    /*    伸び 縮み 基準幅 */
    padding: 22px 24px;
    color: #18596b;
    font-size: 16px;
    text-decoration: none;
}
.brand-contents a > span:first-child { color: #a4542c; }
.brand-contents a > span:last-child { margin-left: auto; }
/*                                                         矢印を右端へ */
.brand-contents a:hover { background: #edf4ee; }

/* [P-05-D] 産地：淡い背景の見開きと大きな山景 */
.brand-origin {
    background: #eef5ee;
    padding-block: 64px;
}
.brand-page .brand-landscape { margin-bottom: 32px; }
.brand-landscape img { display: block; width: 100%; }
.brand-landscape figcaption { margin-top: 14px; }
.brand-page .brand-subtitle {
    margin-block: 20px;
    font-size: 25px;
    line-height: 1.6;
    color: #18596b;
}
.brand-origin-copy > p:not([class]) { max-width: 25em; }
/*                                                      説明の行を長くしすぎない */

/* [P-05-E] キャラクター：余白の中で表情を見せる */
.brand-page .brand-character { padding-block: 88px; }
.brand-page .brand-character-name {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #c7d8cd;
    /*         太さ 種類 色 */
    font-size: 28px;
    letter-spacing: .1em;
}
.brand-character-name span { font-size: 14px; color: #18596b; }
.brand-page .brand-character-art {
    position: relative;
    max-width: 340px;
    margin: 40px auto 0;
}
.brand-character-art img {
    display: block;
    width: 100%;
    mix-blend-mode: multiply;
    /*             元画像の明るい紙地をページの生成りになじませる */
}
.brand-character-note {
    display: block;
    margin-bottom: 12px;
    text-align: right;
    color: #18596b;
    font-size: 18px;
    transform: rotate(5deg);
    /*         あいさつだけ少し傾ける */
}

/* [P-05-F] デザイン：本文とロゴの見本紙 */
.brand-design {
    background: #f5f1e8;
    padding-block: 72px;
    /*            上下 */
}
.brand-page .brand-logo-sheet {
    background: #fffef9;
    padding: 32px;
    margin-top: 32px;
    border: 1px solid #deded1;
    /*      太さ 種類 色 */
    box-shadow: 5px 5px 0 #e6e2d7;
    /*          横  縦 ぼかし 色 */
}
.brand-logo-sheet img {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 36px auto;
}
.brand-logo-sheet figcaption {
    display: flex;
    justify-content: space-between;
    /*               表記と読みを両端へ */
    padding-top: 16px;
    border-top: 1px solid #deded1;
}

/* [P-05-G] PC 専用：四つの区画を異なる組み方にする */
@media (min-width: 1024px) {
    .brand-page .brand-intro {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        /*                     左：標語 右：雲野 */
        gap: 56px;
        align-items: center;
        padding-block: 20px 64px;
    }
    .brand-page .brand-intro-art { margin: 0; }
    .brand-contents a + a { border-left: 1px solid #c7d8cd; }
    /*                                      太さ 種類 色 */
    .brand-origin-layout {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        /*                     大きな山景 紹介 */
        align-items: center;
        gap: 64px;
    }
    .brand-page .brand-landscape { margin: 0; }
    .brand-page .brand-character {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 80px;
        padding-inline: 64px;
        /*             外側の余白を増やしてキャラクターへ視線を集める */
    }
    .brand-page .brand-character-art { margin: 0 auto; width: 340px; }
    .brand-design-layout {
        display: grid;
        grid-template-columns: .9fr 1.3fr;
        /*                     説明  ロゴ見本 */
        align-items: center;
        gap: 80px;
    }
    .brand-page .brand-logo-sheet { margin: 0; padding: 36px 48px; }
    /*                                                      上下 左右 */
}
/* [P-05] 終了：雲野のこと。スマートフォンの詳細調整は後工程 */


/* [P-06] 開始：新しい子ページ共通。既存のホーム・産地・ブランドページには適用しない */
.editorial-page {
    --page-ink: #263b38;
    /* 本文色を共通の名前で定義する */
    --page-teal: #236d71;
    /* アクセント色を共通の名前で定義する */
    --page-line: #c7d7cd;
    /* 区切り線の色を定義する */
    --page-paper: #fbf8ef;
    /* カスタムプロパティ：この本文内で繰り返し使う色をまとめる */
    max-width: 1280px;
    /* 箱が広がる最大幅 */
    padding: 32px 48px 96px;
    /*        上   左右 下 */
    color: var(--page-ink);
    /* 文字の色 */
    font-size: var(--type-body);
    /* 文字の大きさ */
    font-weight: var(--weight-body);
    /*            本文の細すぎる表示を避ける */
    line-height: var(--leading-body);
    /*            文字サイズに対する行の高さ */
    line-break: strict;
    /*          日本語の行頭・行末の禁則処理 */
    overflow-wrap: anywhere;
    /*             長い英数字だけで箱をはみ出させない */
}

.editorial-page *, .editorial-page *::before, .editorial-page *::after {
    box-sizing: border-box;
    /* 指定した寸法に内側余白と枠線を含める */
}

.editorial-page img {
    display: block;
    /* 箱の並べ方・表示方法 */
    width: 100%;
    /* 横幅 */
    height: auto;
    /* 高さ。auto は元の比率に合わせる */
}

.editorial-page figure {
    margin: 0;
    /* 外側の余白。二値＝上下・左右 */
}

.editorial-page p {
    text-wrap: pretty;
    /* pretty：段落末尾の不自然な短い行を抑える */
}

.editorial-page figcaption, .editorial-page .fine-print {
    font-size: var(--type-caption);
    /* 文字の大きさ */
    line-height: 1.85;
    /* 文字サイズに対する行の高さ */
    color: #59665f;
    /* 文字の色 */
    font-weight: 400;
    /* 文字の太さ */
}

.editorial-page figcaption {
    margin-top: 12px;
    /* 上側の外側余白 */
}

.editorial-page .fine-print {
    margin-top: 16px;
    /* 上側の外側余白 */
}

.editorial-page .eyebrow {
    color: var(--page-teal);
    /* 文字の色 */
    font-size: var(--type-meta);
    /* 文字の大きさ */
    font-weight: 700;
    /* 文字の太さ */
    letter-spacing: .16em;
    /*              文字間。自身の文字サイズを基準とする */
    margin: 0 0 12px;
    /* 外側の余白。二値＝上下・左右 */
}

.editorial-heading {
    padding: 44px 0 48px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
}

.editorial-page h1 {
    font-size: var(--type-page);
    /* 共通サイズ。画面幅ごとの値も [C-00-TYPE] で管理する。 */
    line-height: var(--leading-heading);
    /* 文字サイズに対する行の高さ */
    letter-spacing: .025em;
    /* 文字間の余白 */
    margin: 0 0 22px;
    /* 外側の余白。二値＝上下・左右 */
}

.editorial-page .editorial-lead {
    font-size: var(--type-intro);
    /* 文字の大きさ */
    font-weight: 600;
    /* 文字の太さ */
    line-height: 1.7;
    /* 文字サイズに対する行の高さ */
    margin: 0 0 20px;
    /* 外側の余白。二値＝上下・左右 */
}

.editorial-page h2 {
    font-size: var(--type-section);
    /* 文字の大きさ */
    line-height: var(--leading-heading);
    /* 文字サイズに対する行の高さ */
    margin: 0 0 22px;
    /* 外側の余白。二値＝上下・左右 */
}

.editorial-page h3 {
    font-size: var(--type-subheading);
    /* 文字の大きさ */
    line-height: var(--leading-heading);
    /* 文字サイズに対する行の高さ */
    margin: 0 0 14px;
    /* 外側の余白。二値＝上下・左右 */
}

.editorial-page > section {
    margin-top: 0;
    /* 上側の外側余白 */
    padding: 52px 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    border-top: 1px solid var(--page-line);
    /*           太さ 種類 色 */
}

.editorial-page a:focus-visible, .editorial-page summary:focus-visible {
    outline: 3px solid #ad6a34;
    /* フォーカスを示す外枠 */
    outline-offset: 5px;
    /*              外枠と要素の間隔。キーボード操作の位置を示す */
}

.editorial-page .editorial-link {
    display: inline-flex;
    /* 箱の並べ方・表示方法 */
    align-items: center;
    /* 交差方向のそろえ方 */
    gap: 12px;
    /* 子要素の間隔。二値＝行間・列間 */
    color: var(--page-teal);
    /* 文字の色 */
    font-size: var(--type-link);
    /* 文字の大きさ */
    font-weight: 600;
    /* 文字の太さ */
    text-decoration: none;
    /* リンクなどの文字装飾 */
    border-bottom: 1px solid var(--page-teal);
    /* 下の線：太さ・線の種類・色 */
    padding: 8px 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    margin-top: 20px;
    /* 上側の外側余白 */
}

.editorial-link span {
    margin-left: 12px;
    /* 左側の外側余白 */
}

.editorial-page .editorial-link:hover {
    color: #9a5d2d;
    /* 文字の色 */
    border-color: currentColor;
    /* 線の色 */
}

.editorial-page .editorial-note {
    margin-top: 44px;
    /* 上側の外側余白 */
    padding: 28px 32px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    background: #edf1e7;
    /* 背景の色 */
    border-left: 3px solid #7ba797;
    /*            太さ 種類 色 */
}

.editorial-note h2 {
    font-size: var(--type-subheading);
    /* 文字の大きさ */
    margin-bottom: 12px;
    /* 下側の外側余白 */
}

.editorial-note p {
    max-width: 66ch;
    /* 箱が広がる最大幅 */
}

.editorial-page .status-note {
    padding: 18px 22px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    background: #f0ece2;
    /* 背景の色 */
    font-size: var(--type-meta);
    /* 文字の大きさ */
    line-height: 1.9;
    /* 文字サイズに対する行の高さ */
}

.status-note > span {
    display: block;
    /* 箱の並べ方・表示方法 */
    color: #815532;
    /* 文字の色 */
    font-weight: 700;
    /* 文字の太さ */
    margin-bottom: 4px;
    /* 下側の外側余白 */
}

.editorial-page .plain-status {
    font-size: var(--type-meta);
    /* 文字の大きさ */
    color: #805c3e;
    /* 文字の色 */
}

.editorial-page .editorial-specs > div {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 160px minmax(0, 1fr);
    /*                      項目名 可変の説明欄 */
    gap: 16px 28px;
    /* 子要素の間隔。二値＝行間・列間 */
    padding: 19px 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    border-bottom: 1px solid var(--page-line);
    /* 下の線：太さ・線の種類・色 */
}

.editorial-specs dt {
    font-size: var(--type-ui);
    /* 文字の大きさ */
}

.editorial-specs dd {
    font-size: var(--type-ui);
    /* 文字の大きさ */
}

.editorial-specs .editorial-link {
    margin-top: 0;
    /* 上側の外側余白 */
    padding-block: 0;
    /* 上下方向の内側の余白 */
}

.editorial-page button:disabled {
    padding: 15px 24px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    background: #dedfd7;
    /* 背景の色 */
    color: #565e55;
    /* 文字の色 */
    border: 1px solid #c7ccc1;
    /* 太さ・線の種類・色 */
    border-radius: 3px;
    /* 角の丸み */
    font: inherit;
    /* スタイル・大きさ・書体の順で指定 */
    font-size: var(--type-meta);
    /* 文字の大きさ */
    cursor: not-allowed;
    /* マウスポインターの形 */
    opacity: 1;
    /*       無効な操作だが、案内の文字は薄くしすぎない */
}

.editorial-page :is(section,article,h3,div)[id] {
    scroll-margin-top: 32px;
    /* ページ内移動で上端に確保する余白 */
}

/* [P-06] 終了：新しい子ページ共通 */
/* [P-07] 開始：知る・楽しむ。三列の目次と読み物の二列構成 */
/* タイトルと導入を横に分け、一覧の挿絵を早めに見せる */
.knowledge-page .editorial-heading {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: .85fr 1.15fr;
    /* 列の幅と列数 */
    column-gap: 64px;
    /* 列と列の間隔 */
    border-bottom: 1px solid var(--page-line);
    /* 下の線：太さ・線の種類・色 */
    margin-bottom: 36px;
    /* 下側の外側余白 */
    padding-block: 32px;
    /* 上下方向の内側の余白 */
}

.knowledge-page .editorial-heading > .eyebrow {
    grid-column: 1;
    /* 横方向のグリッド配置位置 */
    grid-row: 1;
    /* 縦方向のグリッド配置位置 */
}

.knowledge-page .editorial-heading > h1 {
    grid-column: 1;
    /* 横方向のグリッド配置位置 */
    grid-row: 2 / 4;
    /* 縦方向のグリッド配置位置 */
}

.knowledge-page .editorial-heading > .editorial-lead {
    grid-column: 2;
    /* 横方向のグリッド配置位置 */
    grid-row: 2;
    /* 縦方向のグリッド配置位置 */
    margin-bottom: 16px;
    /* 下側の外側余白 */
}

.knowledge-page .editorial-heading > p:last-child {
    grid-column: 2;
    /* 横方向のグリッド配置位置 */
    grid-row: 3;
    /* 縦方向のグリッド配置位置 */
    margin-top: 0;
    /* 上側の外側余白 */
    font-size: var(--type-card-body);
    /* 文字の大きさ */
}

.journal-grid {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /*                     同じ幅の三列。minmax の 0 は内容による押し広げを防ぐ */
    gap: 32px;
    /* 子要素の間隔。二値＝行間・列間 */
}

.journal-image {
    position: relative;
    /* 配置方法の基準 */
    display: block;
    /* 箱の並べ方・表示方法 */
    margin-bottom: 24px;
    /* 下側の外側余白 */
}

.journal-image img {
    aspect-ratio: 3 / 2;
    /* 横と縦の比率 */
    object-fit: contain;
    /* 画像を指定範囲へ収める方法 */
}

.journal-number {
    position: absolute;
    /* 配置方法の基準 */
    left: 16px;
    /* 左側からの距離 */
    bottom: -12px;
    /* 下側からの距離 */
    background: var(--page-paper);
    /* 背景の色 */
    color: var(--page-teal);
    /* 文字の色 */
    padding: 2px 12px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    font: italic var(--type-number) var(--font-ui);
    /* スタイル・大きさ・書体の順で指定 */
}

.editorial-page .journal-card h2 {
    font-size: var(--type-card-title);
    /* 文字の大きさ */
    margin-bottom: 14px;
    /* 下側の外側余白 */
}

.journal-card h2 a {
    color: inherit;
    /* 文字の色 */
    text-decoration: none;
    /* リンクなどの文字装飾 */
}

.journal-card > p:not(.eyebrow) {
    font-size: var(--type-meta);
    /* 文字の大きさ */
    line-height: 1.9;
    /* 文字サイズに対する行の高さ */
}

.journal-card .editorial-link {
    font-size: var(--type-link);
    /* 文字の大きさ */
}

.reading-hero {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1fr 1fr;
    /* 列の幅と列数 */
    gap: 56px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: center;
    /* 交差方向のそろえ方 */
    padding-block: 48px;
    /*             上下の余白 */
    border-bottom: 1px solid var(--page-line);
    /* 下の線：太さ・線の種類・色 */
}

.editorial-page .reading-hero h1 {
    font-size: var(--type-page);
    /* 文字の大きさ */
    line-height: var(--leading-heading);
    /* 文字サイズに対する行の高さ */
}

.reading-layout {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 220px minmax(0, 1fr);
    /* 列の幅と列数 */
    gap: 70px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: start;
    /* 交差方向のそろえ方 */
    padding-top: 52px;
    /* 上側の内側余白 */
}

.article-toc {
    position: sticky;
    /* 配置方法の基準 */
    top: 32px;
    /*   スクロール中に目次が止まる画面上端からの距離 */
    border-top: 2px solid var(--page-teal);
    /* 上の線：太さ・線の種類・色 */
    padding-top: 20px;
    /* 上側の内側余白 */
    font-size: var(--type-meta);
    /* 文字の大きさ */
}

.article-toc p {
    font-weight: 700;
    /* 文字の太さ */
}

.article-toc > a {
    display: block;
    /* 箱の並べ方・表示方法 */
    margin-top: 16px;
    /* 上側の外側余白 */
    text-decoration: none;
    /* リンクなどの文字装飾 */
}

.article-body {
    min-width: 0;
    /* 箱が縮む最小幅 */
    max-width: 760px;
    /* 箱が広がる最大幅 */
}

.article-body > section {
    margin-bottom: 48px;
    /* 下側の外側余白 */
}

.article-body > .editorial-note {
    margin-bottom: 48px;
    /* 下側の外側余白 */
}

.recipe-strip {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* 列の幅と列数 */
    gap: 12px;
    /* 子要素の間隔。二値＝行間・列間 */
    margin-top: 28px;
    /* 上側の外側余白 */
    padding: 24px 16px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    background: #edf1e7;
    /* 背景の色 */
}

.recipe-strip > div {
    text-align: center;
    /* 文字をそろえる方向 */
}

.recipe-strip span {
    display: block;
    /* 箱の並べ方・表示方法 */
    font-size: var(--type-meta);
    /* 文字の大きさ */
}

.recipe-strip strong {
    display: block;
    /* 箱の並べ方・表示方法 */
    font-size: var(--type-subheading);
    /* 文字の大きさ */
    color: var(--page-teal);
    /* 文字の色 */
}

.recipe-strip small {
    font-size: var(--type-caption);
    /* 文字の大きさ */
}

.numbered-steps {
    list-style: none;
    /* リストの記号を設定 */
    padding: 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    counter-reset: brew-step;
    /* CSS の連番を初期化 */
}

.numbered-steps > li {
    counter-increment: brew-step;
    /*                 各手順ごとに番号を一つ増やす */
    position: relative;
    /* 配置方法の基準 */
    padding: 0 0 28px 60px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    margin-bottom: 28px;
    /* 下側の外側余白 */
    border-bottom: 1px solid var(--page-line);
    /* 下の線：太さ・線の種類・色 */
}

.numbered-steps > li::before {
    content: counter(brew-step, decimal-leading-zero);
    /*       01、02 の形で番号を表示する */
    position: absolute;
    /* 配置方法の基準 */
    left: 0;
    /* 左側からの距離 */
    top: 0;
    /* 上側からの距離 */
    font: italic var(--type-number) var(--font-ui);
    /* スタイル・大きさ・書体の順で指定 */
    color: #93643a;
    /* 文字の色 */
}

.tool-list > div {
    display: flex;
    /* 箱の並べ方・表示方法 */
    gap: 28px;
    /* 子要素の間隔。二値＝行間・列間 */
    padding: 24px 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    border-bottom: 1px solid var(--page-line);
    /* 下の線：太さ・線の種類・色 */
}

.item-no {
    color: #94623b;
    /* 文字の色 */
    font: italic var(--type-number) var(--font-ui);
    /* スタイル・大きさ・書体の順で指定 */
}

.tool-list .item-no {
    flex-shrink: 0;
    /* 空間不足のときに縮む割合 */
}

.storage-factors {
    display: flex;
    /* 箱の並べ方・表示方法 */
    flex-wrap: wrap;
    /* 横に収まらない要素の折り返し */
    gap: 16px;
    /* 子要素の間隔。二値＝行間・列間 */
    margin-block: 24px;
    /* 上下方向の外側余白 */
}

.storage-factors span {
    border-bottom: 3px solid #9bb8a0;
    /* 下の線：太さ・線の種類・色 */
    padding: 8px 20px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    font-size: var(--type-number);
    /* 文字の大きさ */
}

.article-sources {
    border-top: 1px solid var(--page-line);
    /* 上の線：太さ・線の種類・色 */
    padding-top: 28px;
    /* 上側の内側余白 */
}

.article-body .article-sources h2 {
    font-size: var(--type-subheading);
    /* 文字の大きさ */
}

.article-sources ul {
    padding-left: 20px;
    font-size: var(--type-caption);
    /* 文字の大きさ */
}

.related-reading {
    margin-top: 40px;
    /* 上側の外側余白 */
    padding-top: 36px;
    /* 上側の内側余白 */
    border-top: 1px solid var(--page-line);
    /* 上の線：太さ・線の種類・色 */
}

.related-reading a {
    margin-right: 32px;
    /* 右側の外側余白 */
}

/* [P-07] 終了：知る・楽しむ */
/* [P-08] 開始：ショッピング。商品紹介と購入先を一つのページ内で整理する */
.shop-cover {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1.05fr .95fr;
    /* 列の幅と列数 */
    gap: 72px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: center;
    /* 交差方向のそろえ方 */
    padding-block: 32px 48px;
    /* 上下方向の内側の余白 */
}

.shop-cover .editorial-heading {
    padding: 0 0 16px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
}

.package-cover {
    max-width: 440px;
    /* 箱が広がる最大幅 */
    justify-self: end;
    /* グリッド内で自分自身をそろえる */
}

.package-cover img {
    max-height: 500px;
    /* 画像などの最大の高さ */
    object-fit: contain;
    /* 画像を指定範囲へ収める方法 */
}

.category-nav {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: repeat(4,minmax(0,1fr));
    /* 列の幅と列数 */
    border-block: 1px solid var(--page-teal);
    /* 上下の線：太さ・線の種類・色 */
    margin-bottom: 20px;
    /* 下側の外側余白 */
}

.category-nav a {
    display: flex;
    /* 箱の並べ方・表示方法 */
    align-items: center;
    /* 交差方向のそろえ方 */
    gap: 14px;
    /* 子要素の間隔。二値＝行間・列間 */
    padding: 22px 16px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    text-decoration: none;
    /* リンクなどの文字装飾 */
    font-size: var(--type-meta);
    /* 文字の大きさ */
    font-weight: 600;
    /* 文字の太さ */
}

.category-nav a + a {
    border-left: 1px solid var(--page-line);
    /* 左の線：太さ・線の種類・色 */
}

.category-nav small {
    color: #96653b;
    /* 文字の色 */
    font: italic var(--type-number) var(--font-ui);
    /* スタイル・大きさ・書体の順で指定 */
}

.category-nav a:hover {
    background: #e9eee4;
    /* 背景の色 */
}

.section-heading {
    display: flex;
    /* 箱の並べ方・表示方法 */
    align-items: center;
    /* 交差方向のそろえ方 */
    justify-content: space-between;
    /* 主軸方向の並べ方 */
    gap: 24px;
    /* 子要素の間隔。二値＝行間・列間 */
}

.shop-detail-split {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1fr 1fr;
    /* 列の幅と列数 */
    gap: 64px;
    /* 子要素の間隔。二値＝行間・列間 */
}

.shop-detail-split .editorial-specs > div {
    grid-template-columns: 120px minmax(0,1fr);
    /* 列の幅と列数 */
    padding: 12px 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
}

.bean-grid {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: repeat(3,minmax(0,1fr));
    /* 列の幅と列数 */
    gap: 26px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: start;
    /* 交差方向のそろえ方 */
    margin-top: 32px;
    /* 上側の外側余白 */
}

.bean-card {
    background: #fffdf5;
    /* 背景の色 */
    border: 1px solid #d9ddcf;
    /* 太さ・線の種類・色 */
    padding: 22px 24px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
}

.bean-card-top {
    display: flex;
    /* 箱の並べ方・表示方法 */
    justify-content: space-between;
    /* 主軸方向の並べ方 */
    align-items: center;
    /* 交差方向のそろえ方 */
    border-bottom: 3px solid #7da6a0;
    /* 下の線：太さ・線の種類・色 */
    padding-bottom: 16px;
    /* 下側の内側余白 */
    margin-bottom: 20px;
    /* 下側の外側余白 */
}

.bean-index {
    font: italic var(--type-number) var(--font-ui);
    /* スタイル・大きさ・書体の順で指定 */
    color: var(--page-teal);
    /* 文字の色 */
}

.roast-label {
    font-size: var(--type-small);
    /* 文字の大きさ */
    color: #5f6455;
    /* 文字の色 */
}

.editorial-page .bean-card h3 {
    font-size: var(--type-card-title);
    /* 文字の大きさ */
}

.bean-flavor {
    font-size: var(--type-card-body);
    /* 文字の大きさ */
    line-height: 1.8;
    /* 文字サイズに対する行の高さ */
    min-height: 76px;
    /* 箱の最低限の高さ */
}

.bean-card .fine-print {
    margin-top: 10px;
    /* 上側の外側余白 */
    font-size: var(--type-caption);
    /* 文字の大きさ */
}

.tone-honey .bean-card-top {
    border-color: #d2ad68;
    /* 線の色 */
}

.tone-blend .bean-card-top {
    border-color: #c99988;
    /* 線の色 */
}

.tone-fruit .bean-card-top {
    border-color: #c28d77;
    /* 線の色 */
}

.tone-flower .bean-card-top {
    border-color: #afb4cd;
    /* 線の色 */
}

.tone-round .bean-card-top {
    border-color: #a1b587;
    /* 線の色 */
}

.bean-details {
    margin-top: 16px;
    /* 上側の外側余白 */
    border-top: 1px solid #d9ddcf;
    /* 上の線：太さ・線の種類・色 */
}

.bean-details summary {
    cursor: pointer;
    /* マウスポインターの形 */
    padding-top: 16px;
    /* 上側の内側余白 */
    font-size: var(--type-ui);
    /* 文字の大きさ */
    color: var(--page-teal);
    /* 文字の色 */
}

.bean-details[open] summary {
    margin-bottom: 12px;
    /* 下側の外側余白 */
}

.bean-details .editorial-specs > div {
    display: block;
    /* 箱の並べ方・表示方法 */
    padding: 12px 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
}

.bean-details .editorial-specs dt {
    font-size: var(--type-ui);
    /* 文字の大きさ */
    margin-bottom: 5px;
    /* 下側の外側余白 */
}

.bean-details .editorial-specs dd {
    font-size: var(--type-ui);
    /* 文字の大きさ */
}

/* [GOODS-01] 包装と服飾の図柄は縦横比を保ち、端まで表示する。 */
.goods-showcase {
    margin-block: clamp(32px, 5vw, 72px);
}

.goods-showcase figure {
    margin: 0;
}

.goods-showcase img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.goods-showcase > figure {
    max-width: 880px;
    margin: 1.5rem auto;
}

.goods-showcase figcaption {
    margin-top: .4rem;
    font-size: var(--type-caption);
}

.goods-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 0;
    list-style: none;
}

.goods-series {
    display: grid;
    gap: 2.5rem;
    margin-block: 2rem;
}

.goods-item {
    min-width: 0;
    border-top: 1px solid var(--page-line);
    padding-top: 1.2rem;
}

.goods-item > p { margin-block: .5rem 1rem; }
.goods-item > img { max-width: 480px; }
.goods-shopping > figure { max-width: 600px; }
.goods-showcase .goods-thumb {
    aspect-ratio: 4 / 5;
    object-fit: contain;
    background: #f7f5ef;
}
.merch-card > a:first-child {
    display: block;
    margin-bottom: 1rem;
}
.merch-card > .editorial-link { margin-inline-end: 1rem; }
.goods-detail-img {
    display: block;
    width: 100%;
    max-height: 34rem;
    object-fit: contain;
}

.goods-totes, .goods-pair {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.goods-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}
@media (max-width: 680px) {
    .goods-totes { grid-template-columns: minmax(0, 1fr); }
}

/* [GOODS-02] 一覧は表面のみ。販売案内では選んだ一柄の表裏を並べる。 */
.bookmark-overview {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}
.bookmark-picker { max-width: 42rem; margin: 2rem auto; }
.bookmark-choices:not([hidden]) { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.bookmark-choices button {
    padding: .5rem .85rem;
    border: 1px solid #50716b;
    border-radius: 1.25rem;
    background: transparent;
    color: #234b45;
    font: inherit;
    cursor: pointer;
}
.bookmark-choices button[aria-pressed="true"] { color: white; background: #23594f; }
.bookmark-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.bookmark-track > figure {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
    text-align: center;
}
.bookmark-track .goods-pair { max-width: 22rem; margin-inline: auto; }
.bookmark-track figcaption { font-weight: 600; }
@media (max-width: 680px) {
    .bookmark-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* [G-02] 四つの入口を二段でそろえる。狭い画面では共通の一列に戻る。 */
@media (min-width: 901px) {
    .journal-grid.guide-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* [R-01] 扉絵と目次。紙色はサイトの共通色を使う。 */
.drink-index .recipe-cover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    background: var(--page-paper);
    margin-block: 1rem 0;
}
.recipe-cover > div { padding: clamp(1.25rem, 3vw, 3rem); }
.drink-index .recipe-cover h1 { font-size: clamp(1.7rem, 3.1vw, 2.9rem); line-height: 1.32; }
.recipe-cover h1 span, .recipe-cover h1 small { display: block; }
.recipe-cover h1 small { font-size: .5em; margin-block: .8rem .45rem; }
.recipe-cover p:last-child { max-width: 27em; margin: 0; }
.drink-index .recipe-cover img { align-self: stretch; height: 100%; object-fit: cover; }
.recipe-contents { display: flex; flex-wrap: wrap; gap: .25rem 1.35rem; padding-block: .8rem; border-bottom: 1px solid var(--page-line); }
.recipe-contents a { color: var(--page-teal); text-underline-offset: .25em; padding-block: .35em; }
.recipe-notes { margin-block: .75rem 1.6rem; font-size: .94rem; }
.recipe-notes summary { cursor: pointer; font-weight: 600; }
.recipe-notes p { max-width: 46em; }

/* [R-02] メニューは二列。各行にはグラス、番号、名前をまとめる。 */
.drink-index > section { margin: 0; padding-block: clamp(1.75rem, 4vw, 3.2rem); }
.drink-index .menu-kicker { margin: 0 0 .2rem; font: 700 .75rem/1.4 sans-serif; letter-spacing: .18em; color: var(--page-teal); }
.drink-index section h2 { margin: 0 0 1rem; }
.drink-index section h2 small { display: inline-block; font-size: .55em; color: var(--page-teal); }
.drink-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 4vw, 3rem); }
.drink-index .drink-card {
    display: grid;
    grid-template-columns: clamp(4.5rem, 7.5vw, 6.25rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(.6rem, 1.5vw, 1.15rem);
    padding-block: .75rem;
    border-top: 1px solid var(--page-line);
    text-decoration: none;
    color: inherit;
}
/* 一覧では正方形のイラストを使い、グラスと飾りを全体表示する。 */
.drink-glass { display: block; aspect-ratio: 1; }
.drink-glass img { width: 100%; height: 100%; object-fit: contain; }
.drink-index .drink-label .eyebrow { display: block; margin: 0 0 .25rem; font-size: .72rem; }
.drink-index .drink-card h3 { margin: 0; font-size: clamp(1rem, 1.45vw, 1.2rem); line-height: 1.5; }
.drink-card small { display: block; font-size: .84em; font-weight: 400; }
.drink-arrow { color: var(--page-teal); }
.drink-card:hover h3, .drink-card:focus-visible h3 { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 700px) {
    .drink-index .recipe-cover { grid-template-columns: 1fr; gap: 0; }
    .drink-index .recipe-cover img { height: auto; aspect-ratio: 3 / 2; }
    .drink-index .drink-grid { grid-template-columns: 1fr; }
}
/* [R-03] 個別ページには手描きカードの全体を表示する。 */
.drink-detail header { margin-bottom: 2rem; }
.drink-layout img { display: block; width: 100%; height: auto; }
.drink-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.drink-layout figure { margin: 0; }
.drink-layout h2 { margin: 1.25rem 0 .5rem; }
.drink-layout li { margin-bottom: .45rem; }
@media (max-width: 680px) {
    .drink-layout { grid-template-columns: minmax(0, 1fr); }
    .drink-layout figure { width: min(100%, 23rem); margin-inline: auto; }
}

.planned-categories {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1fr 1fr;
    /* 列の幅と列数 */
    gap: 40px;
    /* 子要素の間隔。二値＝行間・列間 */
    border-top: 1px solid var(--page-line);
    /* 上の線：太さ・線の種類・色 */
    padding-block: 40px;
    /* 上下方向の内側の余白 */
}

.planned-categories > section {
    padding: 16px 28px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    border-left: 2px solid #b9cab5;
    /* 左の線：太さ・線の種類・色 */
}

.channel-panel {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1fr auto;
    /* 列の幅と列数 */
    gap: 40px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: center;
    /* 交差方向のそろえ方 */
    background: #edf1e7;
    /* 背景の色 */
    padding: 32px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
}

.shop-faq {
    margin-top: 28px;
    /* 上側の外側余白 */
}

.shop-faq details {
    border-bottom: 1px solid var(--page-line);
    /* 下の線：太さ・線の種類・色 */
    padding: 20px 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
}

.shop-faq summary {
    cursor: pointer;
    /* マウスポインターの形 */
    font-weight: 600;
    /* 文字の太さ */
}

.shop-faq details p {
    margin-top: 16px;
    /* 上側の外側余白 */
    font-size: var(--type-card-body);
    /* 文字の大きさ */
}

/* [P-08] 終了：ショッピング */
/* [P-09] 開始：法人・企業・お問い合わせ・採用 */
.business-cover {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1.25fr .75fr;
    /* 列の幅と列数 */
    gap: 64px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: center;
    /* 交差方向のそろえ方 */
}

.business-cover figure {
    max-width: 340px;
    /* 箱が広がる最大幅 */
    justify-self: center;
    /* グリッド内で自分自身をそろえる */
}

.business-intro {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1.2fr .8fr;
    /* 列の幅と列数 */
    gap: 80px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: center;
    /* 交差方向のそろえ方 */
}

.business-intro figure {
    max-width: 340px;
    /* 箱が広がる最大幅 */
    justify-self: center;
    /* グリッド内で自分自身をそろえる */
}

.usecase-grid {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: repeat(3,minmax(0,1fr));
    /* 列の幅と列数 */
    gap: 40px;
    /* 子要素の間隔。二値＝行間・列間 */
    margin-top: 40px;
    /* 上側の外側余白 */
}

.usecase-grid article {
    border-top: 2px solid #98b7a8;
    /* 上の線：太さ・線の種類・色 */
    padding-top: 24px;
    /* 上側の内側余白 */
}

.usecase-grid h3 {
    margin-top: 20px;
    /* 上側の外側余白 */
}

.usecase-grid p:not(.item-no) {
    font-size: var(--type-card-body);
    /* 文字の大きさ */
}

.business-flow {
    counter-reset: business-step;
    /* CSS の連番を初期化 */
    list-style: none;
    /* リストの記号を設定 */
    padding: 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    margin: 28px 0 0;
    /* 外側の余白。二値＝上下・左右 */
}

.business-flow li {
    counter-increment: business-step;
    /* CSS の連番を増やす */
    position: relative;
    /* 配置方法の基準 */
    padding: 0 0 28px 72px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    margin-bottom: 24px;
    /* 下側の外側余白 */
    border-bottom: 1px solid var(--page-line);
    /* 下の線：太さ・線の種類・色 */
}

.business-flow li::before {
    content: counter(business-step,decimal-leading-zero);
    /* 疑似要素に表示する内容 */
    position: absolute;
    /* 配置方法の基準 */
    left: 0;
    /* 左側からの距離 */
    top: 0;
    /* 上側からの距離 */
    font: italic var(--type-number) var(--font-ui);
    /* スタイル・大きさ・書体の順で指定 */
    color: #95653b;
    /* 文字の色 */
}

.business-flow p {
    font-size: var(--type-card-body);
    /* 文字の大きさ */
}

.editorial-page .contact-cta {
    display: flex;
    /* 箱の並べ方・表示方法 */
    align-items: center;
    /* 交差方向のそろえ方 */
    justify-content: space-between;
    /* 主軸方向の並べ方 */
    gap: 32px;
    /* 子要素の間隔。二値＝行間・列間 */
}

.contact-cta .editorial-link {
    flex-shrink: 0;
    /* 空間不足のときに縮む割合 */
}

.editorial-page .company-brand-block {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1fr 1fr;
    /* 列の幅と列数 */
    gap: 60px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: center;
    /* 交差方向のそろえ方 */
}

.company-bottom-links {
    display: flex;
    /* 箱の並べ方・表示方法 */
    justify-content: space-between;
    /* 主軸方向の並べ方 */
    gap: 32px;
    /* 子要素の間隔。二値＝行間・列間 */
}

.contact-routing {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 1fr 1fr;
    /* 列の幅と列数 */
    gap: 64px;
    /* 子要素の間隔。二値＝行間・列間 */
}

.contact-page .status-note {
    margin-bottom: 40px;
    /* 下側の外側余白 */
}

.contact-form-preview {
    max-width: 860px;
    /* 箱が広がる最大幅 */
    margin: 30px auto 0;
    /* 外側の余白。二値＝上下・左右 */
    padding: 36px 40px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    background: #f1f0e8;
    /* 背景の色 */
}

.contact-form-preview fieldset {
    margin: 0;
    /* 外側の余白。二値＝上下・左右 */
    padding: 0;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    border: 0;
    /* 太さ・線の種類・色 */
    min-width: 0;
    /* 箱が縮む最小幅 */
}

.contact-form-preview legend {
    font-weight: 700;
    /* 文字の太さ */
    font-size: var(--type-ui);
    /* 文字の大きさ */
    margin-bottom: 24px;
    /* 下側の外側余白 */
}

.form-row {
    display: grid;
    /* 箱の並べ方・表示方法 */
    grid-template-columns: 190px minmax(0,1fr);
    /* 列の幅と列数 */
    gap: 24px;
    /* 子要素の間隔。二値＝行間・列間 */
    align-items: start;
    /* 交差方向のそろえ方 */
    margin-bottom: 24px;
    /* 下側の外側余白 */
}

.form-row label {
    font-size: var(--type-meta);
    /* 文字の大きさ */
    font-weight: 600;
    /* 文字の太さ */
}

.form-row label small {
    font-weight: 400;
    /* 文字の太さ */
    font-size: var(--type-small);
    /* 文字の大きさ */
}

.form-row :is(input,select,textarea) {
    width: 100%;
    /* 横幅 */
    padding: 12px;
    /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    border: 1px solid #bec9bd;
    /* 太さ・線の種類・色 */
    background: #fbfaf5;
    /* 背景の色 */
    color: #56605b;
    /* 文字の色 */
    font: inherit;
    /* スタイル・大きさ・書体の順で指定 */
    font-size: var(--type-ui);
    /* 文字の大きさ */
    border-radius: 2px;
    /* 角の丸み */
    opacity: 1;
    /* 不透明度。1 は完全に表示 */
}

.contact-form-preview > button {
    margin-top: 24px;
    /* 上側の外側余白 */
}

.recruit-page {
    min-height: 72vh;
    /* 箱の最低限の高さ */
}

.recruit-page .editorial-heading {
    max-width: 820px;
    /* 箱が広がる最大幅 */
    padding-top: 64px;
    /* 上側の内側余白 */
}

.recruit-page .editorial-lead {
    font-size: var(--type-intro);
    /* 文字の大きさ */
}

.recruit-notice {
    border-top: 1px solid var(--page-line);
    /* 上の線：太さ・線の種類・色 */
    padding-top: 32px;
    /* 上側の内側余白 */
}

/* [P-09] 終了：法人・企業・お問い合わせ・採用 */
/* [P-10] 開始：本文の最低限の折り返し。モバイルの細かな演出は後工程 */
@media (max-width: 1023px) {
    .editorial-page {
        padding: 24px 28px 72px;
        /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    }

    .journal-grid {
        gap: 22px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .editorial-page .journal-card h2 {
        font-size: var(--type-card-title);
        /* 文字の大きさ */
    }

    .reading-layout {
        grid-template-columns: 170px minmax(0,1fr);
        /* 列の幅と列数 */
        gap: 36px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .reading-hero, .shop-cover {
        gap: 32px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .editorial-page .reading-hero h1 {
        font-size: var(--type-page);
        /* 文字の大きさ */
    }

    .shop-detail-split {
        gap: 28px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .bean-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        /* 列の幅と列数 */
    }

    .category-nav a {
        font-size: var(--type-meta);
        /* 文字の大きさ */
        padding: 18px 10px;
        /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
        gap: 8px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .business-intro {
        gap: 32px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .editorial-page .contact-cta {
        display: block;
        /* 箱の並べ方・表示方法 */
    }

}

@media (max-width: 699px) {
    .editorial-page {
        padding-inline: 20px;
        /* 左右方向の内側の余白 */
        font-size: var(--type-body);
        /* 文字の大きさ */
    }

    .editorial-heading {
        padding-block: 30px;
        /* 上下方向の内側の余白 */
    }

    .editorial-page h2 {
        font-size: var(--type-section);
        /* 文字の大きさ */
    }

    .editorial-page h3 {
        font-size: var(--type-subheading);
        /* 文字の大きさ */
    }

    .editorial-page > section {
        padding-block: 36px;
        /* 上下方向の内側の余白 */
    }

    .journal-grid,.reading-hero,.reading-layout,.shop-cover,.shop-detail-split,.business-intro,.business-cover,.usecase-grid,.editorial-page .company-brand-block,.contact-routing,.planned-categories,.channel-panel {
        grid-template-columns: minmax(0,1fr);
        /* 列の幅と列数 */
        gap: 28px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .journal-grid {
        gap: 42px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .knowledge-page .editorial-heading {
        display: block;
        /* 箱の並べ方・表示方法 */
    }

    .knowledge-page .editorial-heading > .editorial-lead {
        margin-top: 20px;
        /* 上側の外側余白 */
    }

    .reading-hero {
        padding-block: 30px;
        /* 上下方向の内側の余白 */
    }

    .article-toc {
        position: static;
        /* 配置方法の基準 */
    }

    .article-toc > a {
        display: inline-block;
        /* 箱の並べ方・表示方法 */
        margin: 12px 18px 0 0;
        /* 外側の余白。二値＝上下・左右 */
    }

    .recipe-strip {
        gap: 8px;
        /* 子要素の間隔。二値＝行間・列間 */
        padding: 20px 8px;
        /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    }

    .recipe-strip strong {
        font-size: var(--type-subheading);
        /* 文字の大きさ */
    }

    .recipe-strip span {
        font-size: var(--type-meta);
        /* 文字の大きさ */
    }

    .editorial-page .editorial-note {
        padding: 24px 20px;
        /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    }

    .editorial-page .editorial-specs > div {
        grid-template-columns: minmax(0,1fr);
        /* 列の幅と列数 */
        gap: 6px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .package-cover {
        max-width: 320px;
        /* 箱が広がる最大幅 */
        justify-self: center;
        /* グリッド内で自分自身をそろえる */
    }

    .category-nav {
        grid-template-columns: 1fr 1fr;
        /* 列の幅と列数 */
    }

    .category-nav a:nth-child(3) {
        border-left: 0;
        /* 左の線：太さ・線の種類・色 */
    }

    .category-nav a:nth-child(n+3) {
        border-top: 1px solid var(--page-line);
        /* 上の線：太さ・線の種類・色 */
    }

    .bean-grid {
        grid-template-columns: minmax(0,1fr);
        /* 列の幅と列数 */
    }

    .bean-flavor {
        min-height: 0;
        /* 箱の最低限の高さ */
    }

    .section-heading {
        align-items: start;
        /* 交差方向のそろえ方 */
    }

    .section-heading > .plain-status {
        flex-shrink: 0;
        /* 空間不足のときに縮む割合 */
        padding-top: 6px;
        /* 上側の内側余白 */
    }

    .company-bottom-links {
        flex-wrap: wrap;
        /* 横に収まらない要素の折り返し */
    }

    .channel-panel {
        padding: 24px;
        /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    }

    .form-row {
        grid-template-columns: minmax(0,1fr);
        /* 列の幅と列数 */
        gap: 8px;
        /* 子要素の間隔。二値＝行間・列間 */
    }

    .contact-form-preview {
        padding: 24px 20px;
        /* 内側の余白。二値＝上下・左右、三値＝上・左右・下 */
    }

    .business-intro figure, .business-cover figure {
        max-width: 240px;
        /* 箱が広がる最大幅 */
    }

    .business-cover {
        padding-bottom: 32px;
        /* 下側の内側余白 */
    }

}

/* [P-10] 終了：本文の最低限の折り返し */
/* [P-11] 開始：商品一覧と個別商品。ホームの配置には適用しない */
.catalog-page .catalog-grid {
    display: grid;
    /* 子のカードを格子状に並べる */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /*                     列数  各列の最小・最大幅 */
    gap: 44px 28px;
    /*   行間 列間 */
    margin-top: 28px;
    /* 一覧の上側の余白 */
}

.catalog-card-link {
    display: block;
    /* カード全体を一つのリンクにする */
    height: 100%;
    /* 同じ行のカードに高さをそろえる */
    color: inherit;
    /* 親の文字色を引き継ぐ */
    text-decoration: none;
    /* 通常時の下線を外す */
}

.catalog-card-link:hover .catalog-more {
    text-decoration: underline;
    /* 操作できるリンクを下線で示す */
}

.catalog-card-link:focus-visible {
    outline: 2px solid #236d71;
    /*       太さ 種類  色 */
    outline-offset: 6px;
    /* キーボード選択枠とカードの間隔 */
}

.home-page .product-image img.pack-scene,
.catalog-page .coffee-art img.pack-scene,
.coffee-detail-page .coffee-art img.pack-scene,
.bean-card img.pack-scene,
.package-cover img.pack-scene {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    /* 包装のロゴ・豆名・内容量が切れないよう、原画の縦横比を保つ。 */
}

.bean-card img.pack-scene {
    margin-bottom: 1rem;
}

html[lang="en"] .pack-english,
html:not([lang="ja"]) .product-reading {
    display: none;
    /* 英語ページでは主見出しと同じ名前を繰り返さない。 */
}

.catalog-page .coffee-art figcaption {
    margin-top: 6px;
    /* 画像と「準備中」の間隔 */
    font-size: var(--type-caption);
    /* 補足説明の文字サイズ */
}

.catalog-page .catalog-meta {
    display: flex;
    /* 商品種別と焙煎度を横に並べる */
    justify-content: space-between;
    /* 両端に分ける */
    margin: 20px 0 8px;
    /*       上 左右 下 */
    font-size: var(--type-meta);
    /* 補助情報の文字サイズ */
    color: #536c63;
    /* 補助情報の色 */
}

.catalog-page .catalog-item h3 {
    font-size: var(--type-card-title);
    /* 商品名を風味より大きく表示する */
    margin: 0;
    /* 標準の見出し余白をリセットする */
}

.editorial-page .product-reading {
    font-size: var(--type-meta);
    /* 読み仮名の文字サイズ */
    color: #59665f;
    /* 読み仮名の色 */
    margin: 4px 0 14px;
    /*       上 左右 下 */
    letter-spacing: .08em;
    /* 読み仮名の文字間隔 */
}

.catalog-page .catalog-flavor {
    font-size: var(--type-card-body);
    /* 一覧内の参考風味の文字サイズ */
    line-height: 1.8;
    /* 行の高さ */
    min-height: 54px;
    /* 二行分の空間を確保する */
    margin: 0 0 16px;
    /*      上 左右 下 */
}

.catalog-more {
    display: flex;
    /* リンク文と矢印を同じ行に置く */
    justify-content: space-between;
    /* 矢印を右へ寄せる */
    border-top: 1px solid #c7d7cd;
    /*          太さ 種類  色 */
    padding-top: 12px;
    /* 線と文字の間隔 */
    color: #236d71;
    /* アクセント色 */
    font-size: var(--type-link);
    /* リンクの文字サイズ */
}

.catalog-page .catalog-drip,
.coffee-detail-page .coffee-detail-cover {
    display: grid;
    /* 画像と本文を二列にする */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /*                     左列の幅       右列の幅 */
    gap: 64px;
    /* 列の間隔 */
    align-items: center;
    /* 縦方向の中心をそろえる */
}

.coffee-detail-page .coffee-detail-cover {
    padding: 48px 0 60px;
    /*       上  左右 下 */
}

.catalog-page .coffee-package-art img {
    max-height: 340px;
    /* 一覧では商品の画像が大きくなりすぎないようにする */
    object-fit: contain;
    /* 商品イメージを切り取らず表示する */
}

.coffee-detail-page .coffee-package-art img {
    max-height: 530px;
    /* 詳細では箱・個包装が見える高さを確保する */
    object-fit: contain;
    /* 画像全体を表示する */
}

.editorial-page .catalog-pack-size {
    font-size: var(--type-subheading);
    /* 袋数を大きくする */
    font-weight: 700;
    /* 袋数を太字にする */
}

.catalog-pack-size span {
    display: inline-block;
    /* 内容量を一まとまりとして折り返す */
    margin-left: 16px;
    /* 袋数との間隔 */
    font-size: var(--type-subheading);
    /* 内容量の文字サイズ */
    font-weight: 500;
    /* 内容量の文字の太さ */
}

.coffee-detail-page .coffee-info-grid {
    display: grid;
    /* 説明と情報表を並べる */
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    /*                     左列             右列 */
    gap: 64px;
    /* 列の間隔 */
    align-items: start;
    /* 長文を上端でそろえる */
}

.coffee-detail-page .coffee-taste {
    font-size: var(--type-intro);
    /* 参考風味を商品説明より大きくする */
    line-height: 1.8;
    /* 日本語が詰まらない行間 */
    color: #236d71;
    /* 風味のアクセント色 */
}

.coffee-roast span {
    border-left: 1px solid #c7d7cd;
    /*           太さ 種類 色 */
    margin-left: 16px;
    /* 線の外側の間隔 */
    padding-left: 16px;
    /* 線と文字の間隔 */
}

.coffee-detail-page .drip-brew-grid {
    display: grid;
    /* 三つの手順を並べる */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /*                     列数  列の幅 */
    gap: 32px;
    /* 手順間の間隔 */
    padding-left: 24px;
    /* 番号のための空間 */
}

.shopping-page .bean-series {
    font-size: var(--type-meta);
    /* 仕入先の番号を商品番号として見せない */
    letter-spacing: .12em;
    /* 小さな英字の字間 */
    color: #236d71;
    /* アクセント色 */
}

@media (max-width: 1023px) {
    .catalog-page .catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* 中間幅では二列にする */
    }

    .catalog-page .catalog-drip,
    .coffee-detail-page .coffee-detail-cover,
    .coffee-detail-page .coffee-info-grid {
        gap: 32px;
        /* 横幅が狭いときの間隔 */
    }
}

@media (max-width: 680px) {
    .catalog-page .catalog-grid,
    .catalog-page .catalog-drip,
    .coffee-detail-page .coffee-detail-cover,
    .coffee-detail-page .coffee-info-grid,
    .coffee-detail-page .drip-brew-grid {
        grid-template-columns: minmax(0, 1fr);
        /* 狭い画面では一列にする */
    }

    .coffee-detail-page .coffee-detail-cover {
        padding: 28px 0 36px;
        /*       上  左右 下 */
    }

    .coffee-detail-page .coffee-package-art img {
        max-height: 330px;
        /* スマートフォンで画像だけが長くならないようにする */
    }

    .catalog-page .catalog-flavor {
        min-height: 0;
        /* 一列では行の高さをそろえる必要がない */
    }
}
/* [P-11] 終了：商品一覧と個別商品 */

/* [P-12] 開始：ブランド理念・キャラクター・ブランドストーリー */

/* [P-12-01] 文字の階層は [C-00-TYPE] の共通変数を使用する。 */
.about-story-page {
    --ink: #233c37;
    --teal: #28767a;
    --line: #cddbd1;
    color: var(--ink);
    background: #fcfaf3;
    font-family: var(--font-ui);
    font-size: var(--type-body);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
    line-break: strict;
}
.about-story-page *,
.about-story-page *::before,
.about-story-page *::after { box-sizing: border-box; }
.about-story-page .reading-wrap {
    --reading-width: calc((100% - 56px) * .66);
    /* 図文の本文列と、その下の本文・農園図を同じ幅にする。 */
    width: min(1120px, calc(100% - 80px));
    /*         最大幅        画面幅から左右の余白を引く */
    margin-inline: auto;
}
.about-story-page h1,
.about-story-page h2 { margin: 0; letter-spacing: .04em; font-weight: 700; }
.about-story-page p { margin: 0; text-wrap: pretty; }
.about-story-page .page-heading { padding: 24px 0 12px; }
.about-story-page .breadcrumb { margin-bottom: 20px; }
.about-story-page h1 { font-size: var(--type-page); line-height: var(--leading-heading); }
.about-story-page .chapter { padding-block: 36px; }
.about-story-page .chapter + .chapter { border-top: 1px solid var(--line); }
.about-story-page .chapter-head {
    display: flex;
    gap: 18px;
    align-items: baseline;
    /* 数字と章名の文字の基準線をそろえる。 */
    margin-bottom: 24px;
}
.about-story-page .chapter-head span { font: italic var(--type-number) var(--font-ui); color: #956b44; }
.about-story-page .chapter-head h2 { font-size: var(--type-section); line-height: var(--leading-heading); }
.about-story-page .chapter-tagline { font-size: var(--type-body); font-weight: 500; color: #516c63; }
.about-story-page .narrative { min-width: 0; text-align: start; }
.about-story-page .confirmed-copy {
    line-height: var(--leading-body);
    letter-spacing: 0;
    overflow-wrap: break-word;
    word-break: normal;
    /* 日本語の禁則を保ち、長い英単語などのはみ出しを防ぐ。 */
}
.about-story-page .confirmed-copy + .confirmed-copy { margin-top: 22px; }

/* [P-12-02] 左端を共通にし、図文から続く本文も同じ位置から読む。 */
.about-story-page .chapter-layout,
.about-story-page .story-spread {
    display: grid;
    gap: 56px;
    align-items: center;
    /* 短い文章と図の中央をそろえる。図はスクロール追従させない。 */
}
.about-story-page .chapter-layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, .85fr);
    /*                          本文の列            文字素材の列 */
}
.about-story-page .reading-continuation,
.about-story-page .story-lead,
.about-story-page .story-finale {
    width: var(--reading-width);
    /* 冒頭の本文列と右端もそろえ、途中で行の長さを変えない。 */
    margin-inline: 0;
    /* 左右を中央寄せにせず、章見出しと同じ左端から読む。 */
}
.about-story-page .reading-continuation { margin-top: 28px; }
.about-story-page .philosophy-opening > .narrative { grid-column: 1; grid-row: 1; }
.about-story-page .philosophy-signature { position: static; text-align: center; grid-column: 2; grid-row: 1; }
.about-story-page .philosophy-wordmark { display: block; width: 100%; height: auto; }
.about-story-page .philosophy-signature .chapter-tagline {
    margin-top: 18px;
    font-size: var(--type-body);
    text-wrap: balance;
}
.about-story-page .philosophy-wish {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    /*          太さ 種類 色：本文の左端はずらさない。 */
}
.about-story-page .philosophy-wish .confirmed-copy + .confirmed-copy { margin-top: 12px; }

/* [P-12-03] キャラクターの全身を見せ、二段落のルーツ説明と対応させる。 */
.about-story-page .character-opening {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, .85fr);
    /*                          本文の列            画像の列 */
}
.about-story-page .character-opening > .narrative { grid-column: 1; grid-row: 1; }
.about-story-page .character-opening > .scene { grid-column: 2; grid-row: 1; }
.about-story-page .scene { margin: 0; position: static; }
.about-story-page .scene img { display: block; width: 100%; height: auto; }
.about-story-page .character-scene { width: min(100%, 280px); justify-self: center; }

/* [P-12-04A] 地図は大きく、山川と産地を隣で読む。栽培環境はその下に続く。 */
.about-story-page .story-chapter { border-top: 2px solid var(--teal); }
.about-story-page .story-chapter .chapter-head { margin-bottom: 12px; }
.about-story-page .story-chapter > header .chapter-tagline { margin-bottom: 32px; }
.about-story-page .story-lead { margin-bottom: 42px; }
.about-story-page .geography-spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /*                          二段落             地図 */
    align-items: start;
}
.about-story-page .geography-spread > .narrative { grid-column: 1; grid-row: 1; }
.about-story-page .geography-spread > .story-map { grid-column: 2; grid-row: 1; }
.about-story-page .story-map,
.about-story-page .story-landscape { margin: 0; min-width: 0; position: static; }
.about-story-page .story-map img,
.about-story-page .story-landscape img {
    display: block;
    width: 100%;
    height: auto;
    /* 元の縦横比を保つ。地図も風景も切り抜かない。 */
}
.about-story-page .map-image-link { display: block; cursor: zoom-in; }
.about-story-page .story-map a { color: var(--teal); text-underline-offset: 4px; }
.about-story-page figcaption { margin-top: 12px; color: #52665c; font-size: var(--type-caption); line-height: 1.75; }
.about-story-page .map-expand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: var(--type-link); font-weight: 600; }
.about-story-page .map-note { display: block; }
.about-story-page .origin-detail { margin-top: 24px; }

/* [P-12-04B] 農園は上図・下文。一段落を細い列へ押し込まず、本文の左端を共通にする。 */
.about-story-page .craft-spread {
    grid-template-columns: minmax(0, 1fr);
    width: var(--reading-width);
    /* 画像・本文・結びを同じ幅にそろえる。 */
    gap: 32px;
    margin-top: 52px;
    padding-top: 52px;
    border-top: 1px solid var(--line);
}
.about-story-page .story-finale { margin-top: 46px; }
.about-story-page .closing-line {
    margin-top: 32px;
    font-size: var(--type-body);
    font-weight: 600;
    color: var(--teal);
}
.about-story-page .text-link {
    display: inline-flex;
    gap: 28px;
    align-items: center;
    padding-block: 7px;
    border-bottom: 1px solid currentColor;
    color: var(--teal);
    font-size: var(--type-link);
    font-weight: 600;
    text-decoration: none;
}
.about-story-page .text-link:hover { background: #e9f0e4; }
.about-story-page a:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
.about-story-page .closing-links { border-top: 1px solid var(--line); padding-block: 30px 42px; display: flex; justify-content: flex-end; }
.about-story-body .footer-top .footer-tagline { display: none; }
.about-story-body .footer-top { justify-content: flex-end; padding-block: 18px; }

/* [P-12-05] 1023px以下は一列。HTMLと同じ順序で読み、図文の間を詰める。 */
@media (max-width: 1023px) {
    .about-story-page .reading-wrap { --reading-width: 100%; width: calc(100% - 40px); }
    .about-story-page .page-heading { padding: 22px 0 18px; }
    .about-story-page h1 { font-size: var(--type-page); }
    .about-story-page .chapter { padding-block: 36px; }
    .about-story-page .chapter-head { gap: 12px; margin-bottom: 24px; }
    .about-story-page .chapter-head h2 { font-size: var(--type-section); }
    .about-story-page .chapter-tagline,
    .about-story-page .philosophy-signature .chapter-tagline { font-size: var(--type-body); }
    .about-story-page .chapter-layout,
    .about-story-page .story-spread { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .about-story-page .philosophy-wordmark { width: min(300px, 88%); margin-inline: auto; }
    .about-story-page .philosophy-signature .chapter-tagline { margin-top: 12px; }
    .about-story-page .character-scene { width: 230px; }
    .about-story-page .character-opening > .narrative,
    .about-story-page .character-opening > .scene,
    .about-story-page .philosophy-opening > .narrative,
    .about-story-page .philosophy-signature,
    .about-story-page .geography-spread > .narrative,
    .about-story-page .geography-spread > .story-map { grid-column: auto; grid-row: auto; }
    .about-story-page .reading-continuation { margin-top: 26px; }
    .about-story-page .story-lead { margin-bottom: 28px; }
    .about-story-page .craft-spread { margin-top: 34px; padding-top: 34px; }
    .about-story-page .story-finale { margin-top: 28px; }
    .about-story-page .philosophy-wish { padding-top: 20px; }
    .about-story-page .text-link { gap: 16px; min-height: 44px; }
}

/* [P-12-06] 小画面も共通の本文サイズを使用し、長文をはみ出させない。 */
@media (max-width: 600px) {
    .about-story-page { font-size: var(--type-body); }
    .about-story-page .reading-wrap { width: calc(100% - 36px); }
    .about-story-page .confirmed-copy { line-height: var(--leading-body); letter-spacing: 0; }
    .about-story-page .confirmed-copy + .confirmed-copy { margin-top: 22px; }
}

/* [P-12] 終了：ブランド紹介ページ専用 */

/* [C-SEARCH] 開始：サイト内検索。共通の文字サイズ・配色を使用する */
.site-search-form {
    max-width: 800px;
    /* 入力欄が広がる最大幅 */
    margin-top: 24px;
    /* 上側の余白 */
}
.site-search-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    /* 表示方法・下余白・文字の太さ */
}
.search-input-row {
    display: flex;
    gap: 12px;
    /* 横並びと要素間の余白 */
}
.search-input-row input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid #bec9bd;
    /*      太さ 種類  色 */
    border-radius: 4px;
    background: #fbfaf5;
    color: #263e3c;
    font: inherit;
}
.search-input-row button {
    padding: 12px 28px;
    border: 1px solid #176b70;
    border-radius: 4px;
    background: #176b70;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    /* マウスで押せることを示す */
}
.search-page :is(input, button, a):focus-visible {
    outline: 3px solid #b87232;
    outline-offset: 4px;
    /* キーボード操作時の枠：太さ・種類・色、枠の間隔 */
}
.search-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    /* 幅が足りないときは次の行へ送る */
}
.search-suggestions a {
    padding: 7px 16px;
    border: 1px solid #bec9bd;
    border-radius: 24px;
    color: #176b70;
    font-size: var(--type-ui);
    text-decoration: none;
}
.search-suggestions a:hover {
    background: #edf3ed;
}
.search-results {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}
.search-results > li {
    padding: 28px 0;
    border-top: 1px solid #d7ded8;
    /*          太さ 種類  色 */
}
.search-results h3 {
    margin: 8px 0 12px;
    font-size: var(--type-card-title);
}
.search-results h3 a {
    color: #176b70;
    text-underline-offset: 5px;
}
.search-results p {
    max-width: 65ch;
    overflow-wrap: anywhere;
    /* 長い英数字でも箱からはみ出さない */
}
.search-results .search-result-category {
    margin: 0;
    font-size: var(--type-meta);
    color: #666c62;
}
@media (max-width: 767px) {
    .search-input-row button { padding: 12px 18px; }
}
/* [C-SEARCH] 終了：サイト内検索 */

/* [C-LANG] 開始：言語ごとの文字組み。共通の文字サイズ階層は維持する */
html[lang="zh-CN"] {
    --font-ui: "Microsoft YaHei", "PingFang SC", "Meiryo", sans-serif;
    /* 中国語の字形に合う書体 */
}
html[lang="en"] {
    --font-ui: Arial, "Yu Gothic", sans-serif;
    /* 英文の単語を自然な幅で表示する */
}
html[lang="en"] main {
    word-break: normal;
    /* 単語の途中での不要な改行を避ける */
}
.footer-languages a[aria-current="page"],
.language-menu a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
    /* 現在表示している言語を示す */
}
@media (min-width: 1024px) {
    html[lang="en"] .home-page .hero-copy h1 {
        font-size: clamp(36px, 3.5vw, 56px);
        /* 最小値・画面幅に応じた値・最大値。英語の二行見出し用 */
    }
}
html[lang="en"] .origin-page .origin-word {
    white-space: normal;
    /* 日本語の固定した語句幅を、英文では自然な折り返しに戻す */
}
html[lang="en"] .product-reading,
html[lang="zh-CN"] .product-reading {
    display: none;
    /* 日本語の読み仮名欄。翻訳後の同名重複を避ける */
}
/* [C-LANG] 終了：言語ごとの文字組み */