/* =====================================================================
   lisas atelier ― どの部品でも使う形（base.css）
   デザイン担当 2026-10-31（ハイライト式のひな形から、このお客様に合わせて変えた所に【lisas】の印）。
   読み込む順：tokens.css → base.css → 部品の style.css
   - 部品はここにある形を使い、同じ形を自分で作り直さない。
   - 値は tokens.css の変数だけ。クラスの一覧と使い方は design.md「base.css のクラス一覧」。
   - テーマでフォントを別に読み込むときは、下の @import の1行を消す。
   - 形を変えるのはデザイン担当だけ。
   - 【lisas】で変えた所：英字の小見出しの印（輪 → 花）・文字のロゴ（花の印・ATELIER の青）・
     「DM で相談」のボタン（.btn--dm。今ある .btn--line も同じ見た目）・#works の縦 3:4 の枠（.ph--3x4）・
     料金の「円」を本文の字に・select の矢印の色。
   ===================================================================== */
/* 【テーマ】fonts/fonts.css は、テーマが別の stylesheet として先に読む（@import はやめた。theme の readme.txt） */

/* ---------- 1. 下地 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4)); /* 近道で飛んだ見出しが上の帯に隠れない */
  scroll-padding-bottom: var(--page-bottom);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100svh;
  padding-bottom: var(--page-bottom); /* 下に固定の「DM で相談」で最後の行・ボタンが隠れない */
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  line-break: strict;          /* 行の頭に「ゃ」「ー」「、」などを置かない */
  overflow-wrap: anywhere;     /* 長い英字・URLだけ、はみ出すときに折る */
  text-wrap: pretty;           /* 最後の行が1〜2文字にならないように（使えるブラウザだけ。中の要素にも効く） */
  hanging-punctuation: allow-end; /* 行末の「、。」をぶら下げる（iPhoneのSafari） */
  -webkit-font-smoothing: antialiased;
}

/* data-theme を付けた枠（拡大表示など）の中も、その明るさの文字の色になる */
[data-theme] { color: var(--color-text); }

/* 【lisas】花の形（ロゴ・英字の小見出しの印）と、紙ひこうきの形（「DM で相談」の印）。色ではなく形なので base.css に置く */
:root {
  --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23000'%3E%3Cellipse cx='10' cy='5' rx='3.4' ry='4.7'/%3E%3Cellipse cx='10' cy='5' rx='3.4' ry='4.7' transform='rotate(72 10 10)'/%3E%3Cellipse cx='10' cy='5' rx='3.4' ry='4.7' transform='rotate(144 10 10)'/%3E%3Cellipse cx='10' cy='5' rx='3.4' ry='4.7' transform='rotate(216 10 10)'/%3E%3Cellipse cx='10' cy='5' rx='3.4' ry='4.7' transform='rotate(288 10 10)'/%3E%3C/g%3E%3C/svg%3E");
  --plane: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFDF6' d='M1.6 7.2 14.6 1.4 6.9 8.7ZM14.6 1.4 10 14.6 7.7 9.5Z'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul, ol)[class] { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
:where(a, button, label, summary, [role="button"]) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
::selection { background: var(--color-accent-soft); color: var(--color-text); }

/* ---------- 2. 文字と改行 ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-head);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;          /* 行の長さをそろえ、1〜2文字だけの行を作らない */
}
@supports (word-break: auto-phrase) {
  h1, h2, h3, h4 { word-break: auto-phrase; } /* 使えるブラウザ（Chrome）では文節で自動改行 */
}
/* 文節の切れ目（<wbr>）と空白・句読点の所でだけ改行する。
   見出し・ボタン・ラベルで、自分で <wbr> を入れたものだけに付ける。<wbr> と <wbr> の間は全角10文字まで
   （1行に入らない長さの文節は、行の端で切れて1文字だけの行ができるため）。 */
.phrase {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }

.nobr { display: inline-block; } /* 文節を1つにまとめる（中では改行しない。行より長いときだけ折れる） */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 文章の中のリンク（クラスのない a） */
a:not([class]) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: .25em;
}
@media (hover: hover) {
  a:not([class]):hover { color: var(--color-accent-text); text-decoration-color: currentColor; }
}
/* 「くわしく見る」などの文字だけのリンク */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--tap);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-btn);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: .3em;
}
@media (hover: hover) {
  .link:hover { color: var(--color-accent-text); text-decoration-color: currentColor; }
}

.fine {                         /* 注意書き・補足 */
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-sub);
}

/* ---------- 3. フォーカスの見え方 ---------- */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
/* 写真の上・端まで並ぶ写真のボタン：内側に白い線＋外にフォーカスの色の線 */
.focus-in:focus-visible {
  outline: 3px solid var(--color-on-photo-text);
  outline-offset: -5px;
  box-shadow: 0 0 0 2px var(--color-focus);
}

/* ---------- 4. 並べ方 ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--w-main) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--text { max-width: calc(var(--w-text) + var(--gutter) * 2); }
.sec { padding-block: calc(var(--sec-space) / 2); } /* 続けて置くと、間が --sec-space になる */
.stack > * + * { margin-top: var(--stack, 1em); }    /* 文章のかたまり（段落の間） */

/* ---------- 5. セクションの見出し ---------- */
.sec-head {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-bottom: var(--head-gap);
  text-align: center;
}
.sec-head--start { justify-items: start; text-align: start; }
.sec-en {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: var(--fw-en);
  font-size: var(--fs-en);
  line-height: 1.2;
  letter-spacing: var(--ls-en);
  color: var(--color-accent-text);
}
.sec-en::before {               /* 【lisas】小さな花（ロゴの花と同じ形・差し色のピンク） */
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--color-accent);
  -webkit-mask: var(--flower) center / contain no-repeat;
  mask: var(--flower) center / contain no-repeat;
}
.sec-title { font-size: var(--fs-lg); }
.sec-lead {
  max-width: 32em;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-text-sub);
}
.sub-title { font-size: var(--fs-md); }

/* ---------- 6. 文字のロゴ ---------- */
/* 【lisas】<a class="logo" href="#top"><span class="logo-flower" aria-hidden="true"></span>LISA’S <span class="logo-accent">ATELIER</span></a>
   今のサイトの上の帯のロゴ（✿ LISA’S ATELIER：花はピンク・LISA’S は紺・ATELIER は青）と同じ並びと色で、字は DM Serif Display */
.logo {
  display: inline-block;
  color: var(--color-text);
  font-family: var(--font-en);
  font-weight: var(--fw-en);
  font-size: var(--fs-logo);
  line-height: 1.1;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.logo-flower {                  /* 【lisas】ロゴの花（✿ の字は使わない：フォントにない端末があるため、形で描く） */
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-right: .32em;
  vertical-align: -.06em;
  background: var(--color-accent);
  -webkit-mask: var(--flower) center / contain no-repeat;
  mask: var(--flower) center / contain no-repeat;
}
.logo-accent { color: var(--color-primary); }  /* 【lisas】ロゴの「ATELIER」（青） */
.logo--lg { font-size: var(--fs-logo-lg); text-align: center; } /* フッター：下に .logo-ja を置く */
.logo-heart {
  margin-inline: .05em;
  color: var(--color-accent);
  font-family: var(--font-serif);   /* 記号（♡ など）は、英字のフォントにないことがあるので見出しのフォントの字にする */
  font-size: .82em;
}
.logo-ja {                      /* ロゴの下の日本語の名前（改行して下に出る） */
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: var(--color-text-sub);
}
/* 丸いアイコン（文字のロゴの丸）：プロフィールの丸。3段の文字で、輪は .ring
   <span class="logo-mark ring" role="img" aria-label="お店の名前">
     <span>1段目</span><span>2段目</span><span>3段目</span></span> */
.logo-mark {
  display: inline-grid;
  place-content: center;
  justify-items: center;
  flex: none;
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-en);
  font-weight: var(--fw-en);
  font-size: calc(var(--avatar) * .155); /* iPhone 13px・PC 20px */
  line-height: 1.12;
  letter-spacing: .05em;
  white-space: nowrap;
}
.logo-mark > .logo-flower { margin: 0 0 .18em; width: 1em; height: 1em; } /* 【lisas】丸いアイコンの1段目の花 */

/* 丸の輪（ハイライト・プロフィール）：すき間（地の色）＋差し色の輪が外側に広がる。
   場所は取らないので、まわりを --ring-gap＋--ring-w 以上あける */
.ring {
  box-shadow:
    0 0 0 var(--ring-gap) var(--color-bg),
    0 0 0 calc(var(--ring-gap) + var(--ring-w)) var(--color-ring);
}

/* 近道（上の帯・小部屋の帯の、セクションへ飛ぶ文字のリンク）。今いる所に aria-current="true" */
.shortcuts {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: var(--space-1);
}
.shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 var(--space-2);
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.shortcut[aria-current]:not([aria-current="false"]) {
  color: var(--color-text);
  box-shadow: inset 0 -2px 0 var(--color-accent);
}
@media (hover: hover) {
  .shortcut:hover { color: var(--color-text); }
}

/* ---------- 7. ボタン ---------- */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  --btn-bd: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: var(--btn-h);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-btn);
  text-align: center;
  text-decoration: none;
  text-wrap: balance;            /* 2行になるときは行の長さをそろえる（<wbr> の所で切るなら .phrase も付ける） */
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { --btn-bg: var(--color-primary-hover); --btn-bd: var(--color-primary-hover); }
}
.btn:active { transform: scale(.98); }
.btn--ghost {                    /* 枠だけ（2番目のボタン） */
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-bd: var(--color-text);
}
.btn--soft {                     /* うすい地（3番目・小さな操作） */
  --btn-bg: var(--color-accent-soft);
  --btn-fg: var(--color-text);
  --btn-bd: transparent;
}
@media (hover: hover) {
  .btn--ghost:hover { --btn-bg: var(--color-accent-soft); --btn-bd: var(--color-text); }
  .btn--soft:hover { --btn-bg: var(--color-accent-soft); --btn-bd: var(--color-border-strong); }
}
/* 【lisas】「DM で相談」（Instagram DM）：ピンクの丸い印に紙ひこうき（地は主なボタンの色のまま。LINE の緑にしない）。
   新しく書くときは .btn--dm。ひな形の .btn--line も同じ見た目にした（文字とクラスは予約担当・ナビ担当・案内担当が直す）。
   Instagram のロゴ・虹色のグラデーションは使わない（ブランドの決まりがあるため） */
.btn--dm::before,
.btn--line::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--plane) 46% 54% / 12px no-repeat, var(--color-dm);
}
.btn--lg { min-height: var(--btn-h-lg); padding-inline: var(--space-6); }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 丸いアイコンのボタン（閉じる・戻る・メニュー・ライト／ダーク） */
.btn-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn-icon svg { width: var(--icon); height: var(--icon); }
.btn-icon--outline { border-color: var(--color-border); background: var(--color-surface); }
.btn-icon--photo { background: var(--color-on-photo); color: var(--color-on-photo-text); } /* 写真の上に置くとき */
@media (hover: hover) {
  .btn-icon:not(.btn-icon--photo):hover { background: var(--color-accent-soft); }
}

/* ---------- 8. チップ（選ぶ・絞り込む） ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--chip-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-body);
  line-height: var(--lh-tight);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.chip > input {                 /* <label class="chip"><input type="radio"> の形 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip:has(> input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* 選んだチップ：主な色（--color-primary）の地＋✓（色だけに頼らない）。
   :has() を知らない古いブラウザで他の行まで消えないよう、button の形と label の形を分けて書く */
.chip[aria-pressed="true"],
.chip[aria-selected="true"],
.chip[aria-checked="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.chip:has(> input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.chip[aria-pressed="true"]::before,
.chip[aria-selected="true"]::before,
.chip[aria-checked="true"]::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--chip-check) center / contain no-repeat;
  mask: var(--chip-check) center / contain no-repeat;
}
.chip:has(> input:checked)::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--chip-check) center / contain no-repeat;
  mask: var(--chip-check) center / contain no-repeat;
}
.chip { --chip-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4 4.8 9 10 3.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chip[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.chip:has(> input:disabled) { opacity: .45; cursor: not-allowed; }
@media (hover: hover) {
  .chip:hover { border-color: var(--color-text); }
}
.chip-count {                   /* チップの中の件数 */
  font-family: var(--font-num);
  font-weight: var(--fw-num);
  font-size: 1.15em;
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- 9. タグ（押せない小さなラベル：税込・スタジオ など） ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-sub);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-body);
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: middle;
}
.tag--accent { border-color: transparent; background: var(--color-accent-soft); color: var(--color-accent-text); }

/* ---------- 10. 写真の枠 ---------- */
.ph {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--ratio, var(--ratio-4x3));
  border-radius: var(--radius-photo);
  background: var(--color-mat);
}
.ph > img, .ph > picture, .ph > picture > img, .ph > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%); /* 顔の位置などは style="--pos: 50% 30%" */
}
.ph--1x1 { --ratio: var(--ratio-1x1); }
.ph--4x3 { --ratio: var(--ratio-4x3); }
.ph--4x5 { --ratio: var(--ratio-4x5); }
.ph--3x4 { --ratio: var(--ratio-3x4); }   /* 【lisas】#works の縦 3:4（正方形の写真を切る位置は --pos。design.md「写真の枠」） */
.ph--contain > img, .ph--contain > picture > img { object-fit: contain; } /* 切らずに全体（まわりは台紙の色） */
.ph--flat { border-radius: 0; }           /* 3列の一覧など */
.ph--round { border-radius: 50%; }        /* 丸（ハイライト・プロフィール） */
.ph--empty::after {                        /* 写真がまだない枠（無地）。data-label に向きを書く */
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-text-sub);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}
button.ph { width: 100%; padding: 0; border: 0; cursor: zoom-in; }

/* ---------- 11. カード ---------- */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--card-gap);
  align-items: stretch;          /* 同じ段のカードは同じ高さ */
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  height: 100%;
  padding: var(--card-pad);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
}
.card--soft { border-color: transparent; background: var(--color-bg-sub); box-shadow: none; }
.card-media {                    /* カードの上の写真（ふちまで） */
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--space-1);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.card-title { font-size: var(--fs-md); }
.card-foot {                     /* ボタンはいつもカードの一番下にそろう */
  display: grid;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

/* 項目と中身の表（撮影時間・枚数・住所 など） */
.kv { display: grid; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.kv > div {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: 10px;
  border-bottom: 1px dashed var(--color-border);
}
.kv > div:first-child { border-top: 1px dashed var(--color-border); }
.kv dt { color: var(--color-text-sub); }

/* 料金の数字（文の中の金額には使わない。文の中はふつうの文字） */
.price {
  font-family: var(--font-num);
  font-size: var(--fs-num);
  font-weight: var(--fw-num);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.15;
  letter-spacing: .01em;
  white-space: nowrap;           /* 数字と「円」を離さない */
}
.price small {                   /* 円・〜・から など（【lisas】本文の字の太字。今のサイトの金額と同じ見え方） */
  margin-inline: .08em;
  font-family: var(--font-sans);
  font-size: .5em;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}

/* ---------- 12. 確認中の印・仮の印 ---------- */
.tbd {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px dashed var(--color-tbd-line);
  border-radius: var(--radius-xs);
  background: var(--color-tbd-bg);
  color: var(--color-tbd-text);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: .12em;
}
.tbd-box {                       /* 確認中のことを少し長く書く囲み */
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-tbd-line);
  border-radius: var(--radius-sm);
  background: var(--color-tbd-bg);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.draft {                         /* 【仮】の文（文章が決まるまで） */
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 6px;
  border: 1px dotted var(--color-border-strong);
  border-radius: var(--radius-xs);
  color: var(--color-text-sub);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: .12em;
}

/* ---------- 13. 入力欄 ---------- */
.field { display: grid; gap: 6px; }
.field-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.input {
  display: block;
  width: 100%;
  min-height: var(--btn-h);
  padding: 11px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-input);
  line-height: var(--lh-snug);
}
.input::placeholder { color: var(--color-text-sub); opacity: 1; }
textarea.input { min-height: 132px; resize: vertical; }
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237C8797' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 16px center;
  background-size: 12px;
  background-repeat: no-repeat;
}
.input[aria-invalid="true"] { border-color: var(--color-accent-text); border-width: 2px; }

/* ---------- 14. 各セクションの終わりの相談の場所 ---------- */
[data-slot="line-cta"]:not(:empty) { margin-top: var(--space-6); }

/* ---------- 15. 高いコントラストの設定（Windows など） ---------- */
@media (forced-colors: active) {
  .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-checked="true"] { border-width: 3px; }
  .chip:has(> input:checked) { border-width: 3px; }
  .tbd, .draft { border-style: solid; }
}

/* ---------- 16. 動きを控えめにする設定 ---------- */
/* ふくらむ・流れる動きを止めて、すぐ切り替える。
   - transition：tokens.css の --dur-* が 1ms になるので、時間を --dur-* で書いていれば自動ですぐ切り替わる
     （transitionend も出る）。ここでは transition を書きかえない（visibility 0s などの「すぐ」をこわさないため）。
   - @keyframes の動き（view transition も）：ここでまとめて止める。
   - script で動かすもの（Web Animations・requestAnimationFrame）：部品の script が matchMedia で見て止める。 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* 古いiPhoneで view transition を知らないと、同じ行の他の指定まで消えるので分けて書く */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
  }
  .btn:active { transform: none; }
}

/* LISA brand image: retain its round artwork and adjacent readable site name. */
.logo-lockup { display: inline-flex; align-items: center; gap: 8px; }
.brand-image { display: block; flex: none; width: 40px; height: 40px; }
.footer-logo .brand-image { width: 72px; height: 72px; }
.hero-avatar { display: block; }
.hero-brand-image { display: block; width: 100%; height: 100%; }