/* ===================================================================
 * 案B＋C の書体と色の見直し（2026-09-26）
 * 方針: 明朝や筆記体のような「和」を強く感じる書体は使わない。
 *   taste-skill（leonxlnx/taste-skill）の規則に合わせる:
 *   - 見出しは個性のあるゴシック 1 系統。強調は同じ書体の太さと色で行う（別の書体を混ぜない）
 *   - 強調色は 1 色だけ。彩度を 80% 未満に落とす
 *   - 文字は背景に対して十分なコントラスト（本文 4.5:1 以上）
 *   - 各区画の上の英字の小見出し（eyebrow）は並べない
 * index.html と status.html の最後に読み込み、style.css / status.css を上書きする。
 * =================================================================== */
:root{
  /* 書体: 日本語は LINE Seed JP、数字と英字は Outfit、時刻などの UI は DM Mono */
  --font:"LINE Seed JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  --mincho:var(--font);
  --latin:"Outfit","Helvetica Neue",Arial,sans-serif;
  --serif-it:var(--latin);

  /* 色: 背景はクリームから中立の白へ。オレンジは同じ色相のまま落ち着かせる */
  --bg:#F7F7F5;
  --grey:#F2F2EF;
  --ink:#2F3338;
  --ink-2:#5A5F66;   /* 背景に対して 6.0:1 */
  --ink-3:#767B82;   /* 小さな補足だけに使う */
  --line:#E3E3DE;
  --accent:#E4683A;        /* 彩度 76%。飾り、強調の文字、線 */
  --accent-deep:#E4632F;   /* ボタンの押したとき、強調の文字 */
  --accent-btn:#F07A45;    /* ボタンの地。明るいオレンジ（利用者の指示で明るさを優先） */
  --accent-soft:#FBEBE3;
  --pink:#F6E6DE;
  --pink-deep:#E9B8A2;
  --shadow:0 18px 50px rgba(47,51,56,.09);
  --shadow-sm:0 6px 18px rgba(47,51,56,.06);
}
body{background:var(--bg);color:var(--ink);font-family:var(--font);letter-spacing:.01em}

/* 見出し: 太さと大きさで階層をつくる。字間は詰め気味 */
h1,h2,h3,.h1,.h2,
.status-page .h1,.status-page .h2{font-family:var(--font);font-weight:700;letter-spacing:.02em}
.h1,.status-page .h1{font-size:clamp(36px,4.3vw,58px);line-height:1.38}
.h2,.status-page .h2{font-size:clamp(24px,2.6vw,36px);line-height:1.55}
.h1 em{color:var(--accent)}

/* 英字の小見出しは出さない（見出しだけで伝わる） */
.eyebrow{display:none}
.sec-head .eyebrow+.h2,.sec-head .h2{margin-top:0}

/* 暦や和の月名などの飾りは外す */
.almanac,.m-jp{display:none}

/* 斜体の英字（Cormorant）は、数字と英字の書体にそろえる */
.m-num{font-family:var(--latin);font-style:normal;font-weight:500;font-size:52px;letter-spacing:-.01em}
.m-en{font-family:var(--latin);letter-spacing:.14em}
.hero-art figcaption i{font-family:var(--latin);font-style:normal;font-weight:500;font-size:15px;letter-spacing:.04em}

/* 読ませる大きな一文（共感）もゴシックで */
.big-read{font-family:var(--font);font-weight:700;letter-spacing:.04em;font-size:clamp(24px,3vw,38px);line-height:1.8}

/* カードや返事の吹き出しの文字（明朝だったもの） */
.card-tag,.bubble,.rq blockquote,.rc-card{font-family:var(--font);font-weight:400}
.m-name{font-family:var(--font);font-weight:700;letter-spacing:.04em}

/* 数字は Outfit で等幅に */
.ring-center b,.florist-facts b,.bd b,.total,.hero-facts b{font-family:var(--latin);font-variant-numeric:tabular-nums}

/* ボタン: 明るいオレンジ。白い文字は太く、少しだけ影をつけて読みやすくする */
.btn-accent{background:linear-gradient(180deg,#F5854F,var(--accent-btn));color:#fff;box-shadow:0 10px 26px rgba(240,122,69,.34);text-shadow:0 1px 1px rgba(160,60,20,.28)}
.btn-accent:hover{background:linear-gradient(180deg,#F07A45,#E86C35)}
.btn-accent .ic{background:rgba(255,255,255,.26)}
.btn-plain{border-color:var(--ink);color:var(--ink)}
.ah-state,.md-tag{color:var(--accent-deep)}
.ti{background:var(--accent-btn)}

/* 花屋さん向けの区画など、ピンクの地は少し軽く */
.florist{background:linear-gradient(180deg,var(--pink),#FBF1EC)}

/* 改行: 文節の区切り（公開時に assemble-site.mjs が入れる <wbr>）でだけ改行する。
   Safari は auto-phrase に対応しないため、keep-all と <wbr> で Chrome と同じ位置で折り返す */
body{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
h1,h2,h3,p,li,dt,dd,figcaption,summary,blockquote,small,.m-note,.sub,.lead{word-break:keep-all;overflow-wrap:anywhere}
.nw{white-space:nowrap}
@media (max-width:600px){
  /* 共感の一文は、1 行が画面に収まる大きさにする（収まらないと括弧の前で折れる） */
  .big-read{font-size:clamp(17px,5.2vw,22px);letter-spacing:.02em}
}

/* 料金: 期間ごとの料金（内訳は載せない） */
.plans li{align-items:baseline}
.plans li span{font-weight:700}
.plans b{font-size:20px}
.plans b small{margin-left:6px;font-family:var(--font);font-size:12px;font-weight:400;color:var(--ink-2)}
.plans-note{margin:-8px 0 18px;font-size:12px;color:var(--ink-2)}

/* ロゴ（2026-09-27、利用者が作成した KATACHIDE のロゴ）。明るい地は黒、暗い地は白 */
.brand img{height:18px;width:auto;display:block}
.foot .brand img{height:16px}
@media (max-width:600px){.brand img{height:15px}}