/* 地。要素（本文・見出し・リンク・画像）の素の姿と、どの画面でも使う小さな印（.muted .small .eyebrow .portrait など）。
 * 色・角・字の形は kosei.css の名前で書く。部品ごとの見た目は、それぞれのファイル（index.html の並び）にある。
 * このファイルだけ名前が昔のまま（style.css）なのは、テスト（server/journey-ui.test.mjs）が index.html の style.css?v= を見ているため。 */
* {
  box-sizing: border-box;
}
/* いまの並び（JS は public/js/layout.js でこれを読む。幅は CSS にだけ書く）。区切りは下の各ファイルの @media と同じ。 */
:root {
  --layout-phone: 0;
  --layout-narrow: 0;
  --layout-small: 0;
  --layout-wall: 0;
  --layout-top-phone: 0;
}
@media (max-width: 700px) {
  :root {--layout-phone: 1;}
}
@media (max-width: 900px) {
  :root {--layout-narrow: 1;}
}
@media (max-width: 767px) {
  :root {--layout-small: 1;}
}
@media (min-width: 1024px) {
  :root {--layout-wall: 1;}
}
/* トップのスマホの形（top-hero.css .is-phone。背の低い窓では top-hero.js が高さを測って足す） */
@media (max-width: 759px) {
  :root {--layout-top-phone: 1;}
}
body {
  margin: 0;
  color: var(--text);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-feature-settings: var(--jp-kerning);
  word-break: auto-phrase;
}
p {
  margin: 0;
}
.serif {
  font-family: var(--font-serif);
  font-weight: 500;
}
/* 見出しの段：画面の題 h1（29px）→ 見出し h2（21px）→ 小見出し h3（17px・ゴシック600）。kosei.css の字の段 */
h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-head);
  letter-spacing: var(--track-head);
  line-height: var(--lh-head);
}
h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-title);
  letter-spacing: var(--track-head);
  line-height: var(--lh-title);
}
h3 {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: var(--lh-lead);
}
.eyebrow {
  font-size: var(--fs-tag);
  letter-spacing: var(--track-tag);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.muted {
  color: var(--text-muted);
}
.small {
  font-size: var(--fs-note);
}
.portrait {
  width: 100%;
  height: 210px;
  object-fit: contain;
  display: block;
  background: var(--surface);
}
.initial {
  display: grid;
  place-items: center;
  background: var(--surface-quiet);
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: 2.1875rem;
}
.empty {
  padding: var(--space-7) var(--space-3);
  text-align: center;
  color: var(--text-muted);
}
.error {
  color: var(--text-muted);
}
.raw {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--fs-note);
  line-height: 1.9;
}
.req {
  font-size: var(--fs-tag);
  color: var(--text-mark);
}
/* !important: hidden の付いた要素は、どの class の display 指定（.secondary の inline-flex など）よりも隠す */
[hidden] {
  display: none !important;
}
/* 「｜」で区切った並び（dom.js segsHTML）：項目は折らず、区切りは次の項目の頭に置く（字のまま。位置だけここで動かす）。行の頭に来た区切りは、並びを1字ぶん左へ出して
   その1字ぶんを切り取る（clip-path）ので見えない。行の終わりには区切りが来ない。幅は決め打ちしない */
/* 項目は inline-block（flex の子にすると、文字を写したとき項目ごとに改行が入る） */
span.segs {
  display: inline-block;
  max-width: calc(100% + 1em);
  margin-left: -1em;
  clip-path: inset(0 0 0 1em);
}
span.segs > .seg {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  /* 項目の中では、文節の切れ目でだけ折る（1行より長い項目だけ。auto-phrase の無いブラウザでは keep-all） */
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}
/* 区切りのない最初の項目は、区切りの1字ぶんを空けて、ほかの行の頭とそろえる */
span.segs > .seg:first-child {
  padding-left: 1em;
}
/* segs.js fitSegs が入れる行の切れ目。CSS が作る改行なので、文字を写したときには入らない */
span.segs > .seg-br::before {
  content: '\A';
  white-space: pre;
}
span.segs > .seg > .seg-sep {
  display: inline-block;
  width: 1em;
  text-align: center;
}
/* ひと続きのまま折らない字（区切りの「・」でだけ折る。料金の表のマスなど） */
.nw {
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
a {
  color: var(--fill-text);
}
.quiet {
  font-size: var(--fs-note);
  color: var(--text-muted);
}
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--fill-text);
  outline-offset: 3px;
}
summary {
  cursor: pointer;
  min-height: 44px;
  padding: var(--space-3) 0;
  color: var(--fill);
}
/* !important: 読み込み中の小さな顔を app.js が style="background-image" で敷くので、それより強く消す（全身の肖像の下に透けないように） */
img.portrait {
  background-image: none !important;
}
.wait-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #dbe5f5;
  border-top-color: var(--fill-text);
  border-radius: var(--radius-face);
  animation: ux-wait 0.85s linear infinite;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  /* !important: 動きを減らす設定のときは、どの部品の animation・transition よりも止める */
  * {
    scroll-behavior: auto;
    animation: none !important;
    transition: none !important;
  }
  *::after,
  *::before {
    scroll-behavior: auto;
    animation: none;
    transition: none;
  }
  .wait-spinner {
    animation: none;
  }
}
@keyframes ux-wait {
  to {
    transform: rotate(360deg);
  }
}
/* 理論の英語名（public/js/terms.js）：日本語の見出しの横か下に、小さく薄く添える。学びたい人だけが拾える強さ。
   明朝の見出しの中でも、本文と同じゴシックで出す。 */
.term-en {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-tag);
  font-weight: 400;
  line-height: var(--lh-tag);
  letter-spacing: var(--track-tag);
  white-space: nowrap;
  color: var(--text-faint);
  vertical-align: baseline;
}