/* ==========================================================================
 tokens.css ― 庭生ししくら デモサイト

 役割：デザイントークン・リセット・ベースタイポグラフィのみ。DOM非依存。
 厳守：クラスセレクタを1つも含まない。
 セクション固有のスタイル・コンポーネント・レイアウトは書かない。
 ========================================================================== */

/* --------------------------------------------------------------------------
 1. デザイントークン（カスタムプロパティ）
 -------------------------------------------------------------------------- */
:root {
 /* カラーパレット：A案「里の朝」（【シート】値・1文字も変更していない） */
 --c-green-deep : #16261D; /* 最暗部。demo-bar・footer・cta-bar の地色 */
 --c-green : #24402F; /* 主色。header地・見出し文字・電話ボタン地 */
 --c-green-soft : #E4E9E2; /* 淡い面。trust・company */
 --c-bg : #F7F2E7; /* 基本背景（生成り） */
 --c-bg-dim : #EFE7D5; /* 交互背景 */
 --c-surface : #FFFFFF; /* カード地・入力欄地 */
 --c-text : #221F1C; /* 本文（墨） */
 --c-text-muted : #4F4B42; /* 補足文字 */
 --c-line : #D9D0BC; /* 罫線（装飾。非必須境界には使わない） */
 --c-accent : #A85C32; /* 差し色（土色・銅）。罫線・アイコン・図版の線のみ。面・文字にしない */
 --c-accent-deep: #7C4325; /* 差し色の濃色。hover用 */
 --c-error : #911F18; /* フォームのバリデーションエラー専用 */

 /* 余白スケール（8px基準。で */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;

 /* コンテンツ最大幅 */
  --content-max: 1080px;

 /* ブレークポイント：注記・JS参照専用。@media の条件式には使えないため直値を書く */
  --bp-md: 600px;
  --bp-lg: 900px;
  --bp-xl: 1200px;

 /* z-index階層 */
  --z-base    : 0;
  --z-raised  : 10;
  --z-overlay : 90;  /* ドロワーの背景暗転。header(100)より下、cta-bar(200)より下 */
  --z-sticky  : 100;
  --z-cta-bar : 200;
  --z-nav     : 300;

 /* 書体スタック（【シート/】見出し=Shippori Mincho・本文=Noto Sans JP。
 フォールバックは本書で選定。Google Fonts の読み込み自体は index.html が担当） */
  --font-heading: "Shippori Mincho", "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "MS PMincho", serif;
 /* 屋号の文字組み専用（筆文字）。ヘッダー・フッターの屋号にのみ使う */
  /* 受話器のアイコン（SVGをデータURIで持つ。外部ファイルを増やさない） */
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  --font-brand: "Yuji Syuku", "Shippori Mincho", 游明朝体, "Yu Mincho", YuMincho, serif;
  --font-body   : "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

 /* 固定要素の高さと --offset-top（。〜899px時の値） */
  --demobar-h : 36px;
  --header-h  : 56px;
 --offset-top: calc(var(--demobar-h) + var(--header-h)); /* 92px */

 /* ダークモード非対応（【シート】）。UA既定のダーク配色に引きずられないよう明示する */
  color-scheme: light;
}

@media (min-width: 900px) {
  :root {
    --demobar-h : 40px;
    --header-h  : 72px;
 --offset-top: calc(var(--demobar-h) + var(--header-h)); /* 112px */
  }
}

/* --------------------------------------------------------------------------
 2. リセット／ノーマライズ
 -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 最小対応幅320pxで横スクロールを発生させない土台。
   overflow-x: hidden を使うと overflow-y が auto に変わり、
   スクロールの入れ物が body 側へ移るため position: sticky が効かなくなる。
   clip なら入れ物が変わらず、ヘッダーの追尾を壊さない */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
 3. ベースタイポグラフィ。要素セレクタのみ）
 -------------------------------------------------------------------------- */
html {
 font-size: 100%; /* 1rem = 16px（基準） */
}

body {
  font-family: var(--font-body);
  font-weight: 400;
 font-size: 0.9375rem; /* 15px（360px時） */
 line-height: 1.8; /* 360px時 */
 letter-spacing: 0.02em; /* 見出しもここから継承する */
  color: var(--c-text);
  background-color: var(--c-bg);
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-heading);
}

h1 {
 /* ファーストビューの縦書きキャッチ（`.hero__catch`）。h1はページに1つだけ（【シート】） */
  font-weight: 700;
 font-size: clamp(1.75rem, 1.25rem + 2.22vw, 2.5rem); /* 28px@360px → 40px@900px+ */
 line-height: 1.5; /* 360px時 */
}

/* 縦書きはファーストビューの見出しだけに限定する。
   要素セレクタのままだと 404 ページの見出しまで縦書きになる。
   text-orientation の追加指定は不要（実測で確認済み） */
#hero-title {
  writing-mode: vertical-rl;
}

h2 {
 /* セクション見出し。全セクションでlight面のみに登場するため色を一律できる */
  font-weight: 700;
 font-size: clamp(1.375rem, 1.04rem + 1.48vw, 1.875rem); /* 22px@360px → 30px@900px+ */
 line-height: 1.5; /* 360px時 */
  color: var(--c-green);
}

h3 {
 /* カード・ステップ見出し。用途により文字色が異なる（は--c-green、は--c-text）ため
 色はここではしない。文字サイズ・行間・字間のみを基準として定義する */
  font-weight: 500;
 font-size: 1.125rem; /* 18px（〜899px） */
  line-height: 1.6;
}

@media (min-width: 900px) {
  h1,
  h2 {
 line-height: 1.4; /* 900px以上。`03`は「1.4〜1.45」と幅で示すため下限を採用 */
  }

  h3 {
 font-size: 1.25rem; /* 20px */
  }

  body {
 font-size: 1rem; /* 16px */
    line-height: 1.85;
  }
}

a {
 /* 色は文脈（背景の明暗）依存のためしない。周囲の文字色を継承する中立な既定値のみ設定する */
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
 4. アンカー遷移の余白とスクロール挙動
 scroll-margin-topはヘッダー高のみを使う。demo-barはスクロールで流れて消えるため含めない
 対象はヘッダーナビ6項目＋フッターナビ8項目＋先頭へ戻る（#hero）の全遷移先
 -------------------------------------------------------------------------- */
#hero,
#concept,
#services,
#works,
#reasons,
#flow,
#faq,
#company,
#contact {
  scroll-margin-top: var(--header-h);
}

/*
 セクション名を押したときは、瞬間移動ではなくスクロールして移動する（2026-09-10 依頼者指示）。
 CSSだけで完結させ、JSに依存させない（JS無効時も同じ挙動になる）。
 動作低減設定のユーザーには瞬間移動へ戻す（§6の全称セレクタはscroll-behaviorに効かないため個別に指定する）。
*/
html {
  scroll-behavior: smooth;
}

/* この既定を打ち消す html.js-smooth-scroll は layout.css §3-C にある。
   本ファイルはクラスセレクタを持たない決まりのため、そちらに置いている */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
 5. フォーカスリング共通定義（【シート】太さ3px以上・比3:1以上・オフセット2px）
 light面の既定値。dark面（header・footer・cta-bar等）で --c-surface に変える場合は
 outline（ショートハンド）ではなく outline-color のみを上書きすること
 -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
 6. 動作低減設定（【シート】）
 ここでの無効化は全称セレクタ（詳細度0）のため、クラスセレクタで定義される
 transition/animation（`.btn`等）には効かない。各コンポーネント側の
 reduced-motion対応はのとおりが個別に実装する
 -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

/* ---------------------------------------------------------------------------
 日本語の折り返し
 語の途中で改行されると読みづらく、意味の切れ目も見失う。
 - word-break: auto-phrase … ブラウザが文節（意味の塊）で折り返す
 - text-wrap: balance … 見出しの各行の長さを揃える
 - text-wrap: pretty … 本文の最終行が1〜2文字だけ残るのを避ける
 いずれも未対応ブラウザでは宣言ごと無視されるため、安全に上乗せできる
 --------------------------------------------------------------------------- */

h1,
h2,
h3 {
  word-break: auto-phrase;
  text-wrap: balance;
}

p,
li,
dd,
dt,
figcaption,
label,
button,
a {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* 404 ページ用。このページは tokens.css だけを読み込むため、
   リンクのタップ領域はここで確保する */
.link-404 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--c-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}