/* =========================================================================
   itonami.css — イトナミ設計室（架空）／パースの回廊
   -------------------------------------------------------------------------
   3D（scenes/plates.js）が最初から最後まで背後に居続ける前提のCSS。
   だから本文側は「地を塗らない」。塗るのは、文字を読ませるための
   ベール（.itn-veil）だけ。ここが編集誌型（白い紙を敷く）との分かれ目。

   組み方の骨:
     ・.itn-scene が1区間＝板1枚ぶんの担当（data-plate を持つ）
     ・.itn-show  見せ場。文字はキャプション1行だけ。板が全面に出る
     ・.itn-read  読ませる。文字は片側に寄り、板は逆側へ逃げて沈む
     ・.itn-veil  文字側だけを暗くするグラデーション。板の明暗に依存せず
                  コントラストを保証する（写真が明るくても文字が死なない）

   最後に読み込む（brand.css より後勝ち）。
   ========================================================================= */

:root {
  --ink: #F2EFE9;
  --ink-dim: rgba(242, 239, 233, .72);
  --ink-faint: rgba(242, 239, 233, .30);
  --bg: #0E1014;
  --bg-2: #171A20;
  --accent: #E7A93C;
  --paper: #F4F2ED;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

/* 舞台は器（canvas はページ全体へ移される）。高さは持たせない。
   持たせると最初の1画面が空になり、FVが1画面ぶん下へ押し出される。
   ★brand.css の `.has-page-canvas[data-progress="…"] .bs-stage` は詳細度が
   高いので、同じ形で書かないと勝てない（後勝ちにはならない）。2026-08-04 実測 */
.has-page-canvas[data-progress="scroll"] .bs-stage,
.has-page-canvas[data-progress="page"] .bs-stage,
[data-progress] .bs-stage,
.bs-stage { height: 0; }
.has-page-canvas[data-progress="scroll"] .bs-stage__sticky,
.has-page-canvas[data-progress="page"] .bs-stage__sticky,
[data-progress] .bs-stage__sticky,
.bs-stage__sticky { position: static; height: 0; overflow: visible; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: .04em;
}

.itn-script { position: relative; z-index: 1; }

/* ヘッダーは写真の上に浮かせる。brand.css の
   `.has-page-canvas .bs-header { position: relative }` は本文を流す前提の指定で、
   ここでは FV が1画面ぶん下へ落ちてしまう */
.has-page-canvas .bs-header,
.bs-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; }

/* ---------- 区間の共通 ---------- */
.itn-scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
  isolation: isolate;
}
.itn-scene > *:not(.itn-veil):not(.itn-fallback) { position: relative; z-index: 2; }

/* ---------- ベール（文字を読ませるための地） ----------
   板そのものを暗くすると写真が死ぬ。文字の側だけを沈めるほうが、
   写真は写真のまま残り、文字はしっかり立つ。 */
.itn-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* ★区間の上下端でベールを 0 に落とす。横方向のグラデーションだけだと、
     区間の境目で「濃さが急に変わる横線」が出る（2026-08-04 実測）。
     mask なら、中身のグラデーションが何であっても端が必ず消える */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.itn-veil--left {
  background: linear-gradient(100deg,
    rgba(14, 16, 20, .93) 0%,
    rgba(14, 16, 20, .82) 26%,
    rgba(14, 16, 20, .44) 54%,
    rgba(14, 16, 20, 0) 82%);
}
.itn-veil--right {
  background: linear-gradient(260deg,
    rgba(14, 16, 20, .93) 0%,
    rgba(14, 16, 20, .82) 26%,
    rgba(14, 16, 20, .44) 54%,
    rgba(14, 16, 20, 0) 82%);
}
/* 結びの下はフッター（不透明）が続くので、下端は落とさない */
.itn-veil--bottom {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 100%);
  background: linear-gradient(6deg,
    rgba(14, 16, 20, .94) 0%,
    rgba(14, 16, 20, .74) 34%,
    rgba(14, 16, 20, .22) 68%,
    rgba(14, 16, 20, 0) 100%);
}
/* ★区間ごとに上端を沈めると、区間の境目に水平の線が1本出る（2026-08-04 実測）。
   沈めるのはヘッダーの下だけにして、しかも固定で1枚。継ぎ目が生まれない */
.bs-header::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 170px; z-index: -1;
  background: linear-gradient(180deg, rgba(14, 16, 20, .74), rgba(14, 16, 20, 0));
  pointer-events: none;
}

/* ---------- 書体 ---------- */
.itn-kicker { letter-spacing: .28em; text-transform: uppercase; color: var(--ink-faint); }
.itn-display,
.itn-h2,
.itn-h3,
.itn-quote,
.itn-caption {
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: .04em;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* ---------- 1｜ファーストビュー ---------- */
.itn-hero { align-items: center; }
.itn-hero__body { max-width: min(46rem, 100%); }
.itn-display {
  font-size: clamp(2.3rem, 5.6vw, 5.2rem);
  line-height: 1.16;
  margin: 1.1rem 0 1.8rem;
  text-shadow: 0 2px 40px rgba(10, 12, 16, .72);
}
.itn-line { display: block; }
.itn-hero__note {
  font-size: clamp(.95rem, 1.35vw, 1.12rem);
  line-height: 2.0;
  color: var(--ink-dim);
  max-width: 34rem;
}

/* ---------- 2｜見せ場（板が全面に出る区間） ---------- */
.itn-show {
  min-height: 118svh;
  align-items: flex-end;
  padding-bottom: clamp(4rem, 14svh, 10rem);
}
/* 見せ場は下だけ静かに沈めて、キャプションを箱に入れずに読ませる。
   箱で囲うと、写真の前に紙が1枚出てくる。
   ★帯の**両端を 0 にする**こと。区間の端でベールが濃いまま終わると、
     次の区間との境目に水平の線が1本出る（2026-08-04 実測） */
.itn-show::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60svh; z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg,
    rgba(14, 16, 20, 0) 0%,
    rgba(14, 16, 20, .62) 12%,
    rgba(14, 16, 20, .86) 30%,
    rgba(14, 16, 20, .40) 64%,
    rgba(14, 16, 20, 0) 100%);
}
.itn-caption {
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  line-height: 1.8;
  max-width: 32rem;
  padding: 0 0 0 1.2rem;
  margin: 0;
  border-left: 1px solid rgba(231, 169, 60, .60);
  text-shadow: 0 2px 26px rgba(10, 12, 16, .85);
}
.itn-caption--right {
  margin-left: auto; text-align: right;
  padding: 0 1.2rem 0 0;
  border-left: 0; border-right: 1px solid rgba(231, 169, 60, .60);
}

/* ---------- 3｜読ませる区間 ---------- */
.itn-read { align-items: center; }
.itn-read--left { justify-content: flex-start; }
.itn-read--right { justify-content: flex-end; }
.itn-col { width: min(38rem, 100%); }

.itn-h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  margin: .9rem 0 1.6rem;
}
.itn-h3 {
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
  margin: .5rem 0 .6rem;
}
.itn-lede p,
.itn-prose p,
.itn-step p:not(.bs-meta) {
  font-size: clamp(.92rem, 1.15vw, 1.0rem);
  line-height: 2.05;
  color: var(--ink-dim);
  margin: 0 0 1.05rem;
}

.itn-list { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.9rem; }
.itn-list li { padding-left: 1.2rem; border-left: 1px solid rgba(242, 239, 233, .18); }
.itn-list h3 {
  font-family: "Zen Old Mincho", serif; font-weight: 400;
  font-size: clamp(1.0rem, 1.45vw, 1.2rem); margin: .45rem 0 .5rem;
}
.itn-list p:not(.bs-meta) { font-size: .9rem; line-height: 1.95; color: var(--ink-dim); margin: 0; }

.itn-step { margin: 2.4rem 0 0; padding-top: 1.9rem; border-top: 1px solid rgba(242, 239, 233, .14); }

.itn-quote {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  margin: 3.4rem 0 1.9rem;
  color: var(--ink);
}

/* ---------- 5｜結び ---------- */
/* 結びは「最後の1画面に CTA とフッターが収まる」ことを優先する。
   下余白を取りすぎると、最下部で見出しがヘッダーに切られて尻切れに見える */
.itn-cta {
  align-items: flex-end; min-height: 104svh;
  padding-bottom: clamp(2.4rem, 5vh, 4rem);
}
.itn-cta__body { width: min(42rem, 100%); }
.itn-cta__note { font-size: clamp(.92rem, 1.15vw, 1.0rem); line-height: 2.0; color: var(--ink-dim); }
.itn-cta__btn { margin-top: 1.9rem; }

/* ---------- フッター ---------- */
.itn-footer {
  position: relative; z-index: 2;
  /* 不透明にしない。結びの板を微かに透かすことで、
     最後の1画面まで 3D が続く */
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(7px);
  padding: clamp(2.4rem, 5vh, 3.6rem) var(--pad) clamp(5rem, 8vh, 3.4rem);
  border-top: 1px solid rgba(242, 239, 233, .12);
}
.itn-wrap { width: min(72rem, 100%); margin-inline: auto; }
.itn-footer__blocks {
  display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: 2rem;
}
.itn-footer__blocks p:not(.bs-meta) { font-size: .9rem; line-height: 1.9; color: var(--ink-dim); margin: .5rem 0 1rem; }
.itn-fiction {
  font-size: .8rem; line-height: 1.9; color: var(--ink-faint);
  padding: 1rem 1.2rem; margin: 0 0 1.4rem;
  border: 1px solid rgba(242, 239, 233, .16);
}
.itn-fiction strong { color: var(--ink-dim); font-weight: 400; }
.itn-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding-top: 1.4rem; border-top: 1px solid rgba(242, 239, 233, .10);
}
.bs-footer__links { display: flex; gap: 1.4rem; }

/* ---------- 3Dが無いときの代役 ----------
   `.no-3d` は index.html の先頭スクリプトが付ける（WebGL不可のときと、
   スクリプトが起動しなかったとき）。display:none のあいだ background-image は
   取りに行かれないので、3Dが動く環境では5枚ぶんの通信がまるごと発生しない。
   ★`:not(.has-3d)` で書くと、3Dが立ち上がるまでの数秒で全部落ちてくる。 */
.itn-fallback { display: none; }
html.no-3d .itn-fallback {
  display: block;
  position: absolute; inset: 0; z-index: 0; margin: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
html.no-3d .itn-fallback[data-src="pers-1"] { background-image: url("../img/pers-1.webp"); }
html.no-3d .itn-fallback[data-src="pers-2"] { background-image: url("../img/pers-2.webp"); }
html.no-3d .itn-fallback[data-src="pers-3"] { background-image: url("../img/pers-3.webp"); }
html.no-3d .itn-fallback[data-src="pers-4"] { background-image: url("../img/pers-4.webp"); }
html.no-3d .itn-fallback[data-src="pers-5"] { background-image: url("../img/pers-5.webp"); }

/* ---------- 縦画面 ---------- */
@media (max-width: 860px) {
  .itn-scene { padding: clamp(4.5rem, 10vh, 7rem) var(--pad); }
  .itn-read--right { justify-content: flex-start; }
  .itn-col { width: 100%; }
  .itn-caption { max-width: 100%; }
  .itn-caption--right {
    text-align: left; margin-left: 0;
    border-right: 0; border-left: 1px solid rgba(231, 169, 60, .55);
  }
  /* 縦画面は横に逃がす余地が無いので、ベールを縦にする。
     ここも両端を 0 にして、区間の境目に線が出ないようにする */
  .itn-veil--left,
  .itn-veil--right {
    background: linear-gradient(180deg,
      rgba(14, 16, 20, 0) 0%,
      rgba(14, 16, 20, .66) 13%,
      rgba(14, 16, 20, .76) 46%,
      rgba(14, 16, 20, .66) 87%,
      rgba(14, 16, 20, 0) 100%);
  }
  .itn-show { min-height: 92svh; }
  .itn-hero__note br { display: none; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .itn-scene { min-height: auto; }
  .itn-show { min-height: 60svh; }
}

/* ══════════════════════════════════════════════════════════
   山場：線から家が建つ
   ──────────────────────────────────────────────────────────
   ★最初は「黒地に白い線＋左に文章」だけで組んで、内田に
   「デザインがなさすぎる」と言われた（2026-08-06）。原因は2つ。
   ①文字が線の上に直接乗っていて、両方が読めない
   ②設計事務所なのに、図面の言語をひとつも使っていない
   だから、この区間だけ「1枚の図面」として組み直してある。
   図面枠・表題欄・工程表・通り芯。文章は自分の面の上に置く。
   ══════════════════════════════════════════════════════════ */
.itn-frame {
  min-height: 360svh;
  padding: 0;
  display: block;
}

/* ---- 図面枠。画面の内側に細い罫を回すだけで「図面だ」と伝わる ---- */
.itn-sheet {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  pointer-events: none;
  z-index: 1;
}
.itn-sheet::before {
  content: "";
  position: absolute;
  inset: 4.2svh 3.4vw;
  border: 1px solid rgba(242, 239, 233, .13);
}
/* 四隅の目印（トンボ）。細部があると図面に見える */
.itn-sheet::after {
  content: "";
  position: absolute;
  inset: 4.2svh 3.4vw;
  background:
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) left top / 26px 1px no-repeat,
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) left top / 1px 26px no-repeat,
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) right bottom / 26px 1px no-repeat,
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) right bottom / 1px 26px no-repeat;
  opacity: .55;
}

/* ---- 左の面。★文章は必ず自分の地の上に置く。
       線の上に直接置くと、線も文字も両方死ぬ ---- */
.itn-frame__rail {
  position: sticky;
  top: 14svh;
  z-index: 3;
  /* ★余白を惜しまない。図面枠から離し、内側も広く取る。
     詰めると「情報が置いてあるだけ」になり、ゆとりが無い画面に見える
     （2026-08-06 内田指摘）。設計事務所の版面は余白が主役。 */
  width: min(26rem, 40vw);
  margin-left: max(7.6vw, calc(3.4vw + 3.4rem));
  padding: 2.6rem 2.4rem 2.4rem;
  background: linear-gradient(180deg,
    rgba(11, 13, 16, .90) 0%,
    rgba(11, 13, 16, .84) 62%,
    rgba(11, 13, 16, .66) 100%);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-left: 1px solid rgba(231, 169, 60, .42);
}
.itn-frame__lead {
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.1vw, 1.78rem);
  line-height: 1.44;
  letter-spacing: .05em;
  word-break: auto-phrase;
  color: var(--ink);
}
.itn-frame__end {
  margin-top: 2.1rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(242, 239, 233, .12);
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: clamp(1.12rem, 1.7vw, 1.42rem);
  line-height: 1.44;
  letter-spacing: .05em;
  word-break: auto-phrase;
  color: var(--accent, #E7A93C);
}

/* ---- 工程表。いま組んでいる段だけが灯る。3Dと同じ進行度で動く ---- */
.itn-frame__steps {
  list-style: none;
  margin: 2.1rem 0 0;
  padding: 0 0 0 .1rem;
}
.itn-frame__steps li {
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  align-items: baseline;
  column-gap: .9rem;
  padding: .72rem 0;
  border-bottom: 1px solid rgba(242, 239, 233, .07);
  color: rgba(242, 239, 233, .30);
  transition: color .45s ease, opacity .45s ease;
}
.itn-frame__steps li i {
  grid-row: span 2;
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .14em;
  color: rgba(242, 239, 233, .26);
  transition: color .45s ease;
}
.itn-frame__steps li span {
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: 1.0rem;
  letter-spacing: .14em;
  color: inherit;
}
.itn-frame__steps li em {
  grid-column: 2;
  font-style: normal;
  font-size: .79rem;
  line-height: 1.72;
  margin-top: .2rem;
  color: inherit;
  opacity: .74;
}
/* 窓の外の段は出さない。パネルの高さを一定に保つ（→ itonami-frame.js） */
.itn-frame__steps li[data-far="1"] { display: none; }
/* 済んだ工程 */
.itn-frame__steps li[data-state="past"] { color: rgba(242, 239, 233, .56); }
.itn-frame__steps li[data-state="past"] i { color: rgba(242, 239, 233, .40); }
/* いま組んでいる工程 */
.itn-frame__steps li[data-state="now"] {
  color: var(--ink);
  border-bottom-color: rgba(231, 169, 60, .5);
}
.itn-frame__steps li[data-state="now"] i { color: var(--accent, #E7A93C); }
.itn-frame__steps li[data-state="now"] em { opacity: 1; }

/* ---- 表題欄。図面の右下にあるあれ。
       ★図面枠（.itn-sheet）の内側に絶対配置する。本文の流れに置くと
       画面下で切れる（2026-08-06：sticky で組んで「設計」の行が欠けた）。 ---- */
.itn-title {
  position: absolute;
  right: calc(3.4vw + 1px);
  bottom: calc(4.2svh + 1px);
  width: max-content;
  padding: .95rem 1.35rem 1rem;
  border: 1px solid rgba(242, 239, 233, .16);
  background: rgba(11, 13, 16, .74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.itn-title__name {
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: 1.02rem;
  letter-spacing: .16em;
  color: var(--ink);
  margin-bottom: .7rem;
}
.itn-title__meta {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1.15rem;
  row-gap: .3rem;
  margin: 0;
  font-size: .64rem;
  letter-spacing: .1em;
}
.itn-title__meta dt { color: rgba(242, 239, 233, .32); }
.itn-title__meta dd { margin: 0; color: rgba(242, 239, 233, .62); }

/* ---- 縦画面。線は上、文章は下。重ねると両方読めない ---- */
@media (max-aspect-ratio: 1/1) {
  .itn-frame { min-height: 320svh; }
  .itn-frame__rail {
    top: auto;
    position: sticky;
    top: 52svh;
    width: auto;
    margin: 0 5.2vw;
    padding: 1.25rem 1.15rem 1.3rem;
  }
  /* ★縦画面では8段を並べない。画面からはみ出して常駐CTAに隠れる
     （2026-08-06 実測）。いま組んでいる一段だけを出すと、
     3Dと文章が1対1で結びついて、かえって強くなる。 */
  .itn-frame__steps { margin-top: .9rem; min-height: 3.6rem; }
  .itn-frame__steps li { display: none; }
  .itn-frame__steps li[data-state="now"] {
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    padding: .5rem 0 .1rem;
    border-bottom: 0;
  }
  .itn-frame__steps li[data-state="now"] span { font-size: 1.14rem; }
  .itn-frame__steps li[data-state="now"] em { font-size: .8rem; }
  .itn-frame__end { margin-top: 1.05rem; padding-top: .9rem; }
  .itn-title { display: none; }
  .itn-sheet::before { inset: 2.6svh 4.4vw; }
  .itn-sheet::after { display: none; }
}

/* ---- 3Dが無い環境（WebGL不可・動きを減らす設定）---- */
html.no-3d .itn-frame { min-height: 0; padding: 12svh 0; }
html.no-3d .itn-frame__rail {
  position: static; width: auto; margin: 0 7vw;
  background: none; backdrop-filter: none;
}
html.no-3d .itn-frame__steps li { color: rgba(242, 239, 233, .62); }
html.no-3d .itn-sheet,
html.no-3d .itn-title,
html.no-3d .itn-fallback--frame { display: none; }

/* ---- 背の低い画面（ノートPC・1280x720 等）----
   ★余白を広げた版では、5段ぶんの工程表が画面に収まらない
   （2026-08-06 実測：1280x720 で 130px はみ出した）。
   余白は削らず、いま組んでいる段以外の説明文をたたむ。
   見出しだけ残せば流れは追えるし、版面の呼吸は保てる。 */
@media (max-height: 820px) {
  .itn-frame__rail { top: 10svh; padding: 1.9rem 2.1rem 1.9rem; }
  .itn-frame__steps { margin-top: 1.5rem; }
  .itn-frame__steps li { padding: .5rem 0; }
  .itn-frame__steps li:not([data-state="now"]) em { display: none; }
  .itn-frame__end { margin-top: 1.5rem; padding-top: 1.15rem; }
}

/* ---------- フッター（全ページ共通・本番の作り） ---------- */
.itn-fnav {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.6rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(242, 239, 233, .1);
}
.itn-fnav__name {
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: 1.15rem; letter-spacing: .14em; margin: 0 0 .9rem; color: var(--ink);
}
.itn-fnav__note { font-size: .84rem; line-height: 1.95; color: rgba(242, 239, 233, .5); margin: 0; }
.itn-fnav nav ul { list-style: none; margin: .95rem 0 0; padding: 0; display: grid; gap: .72rem; }
.itn-fnav nav a {
  font-size: .86rem; letter-spacing: .05em; color: var(--ink-dim);
  text-decoration: none; transition: color .3s ease;
}
.itn-fnav nav a:hover { color: var(--accent, #E7A93C); }
.itn-note {
  margin: 1.9rem 0 0;
  font-size: .68rem; line-height: 1.85; letter-spacing: .04em;
  color: rgba(242, 239, 233, .26);
}
@media (max-width: 760px) {
  .itn-fnav { grid-template-columns: 1fr 1fr; gap: 2rem 1.4rem; }
  .itn-fnav__brand { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════
   ハンバーガー ＋ 幕（オーバーレイ）
   三本線が、そのまま家の軸組にほどける。
   「線は、暮らしの跡です」という主題と、メニューを開く動作を同じ言語にする。
   ══════════════════════════════════════════════════════════ */
.itn-burger {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-content: center; gap: 7px;
  border: 0; background: none; cursor: pointer;
  z-index: 120;
}
.itn-burger span {
  display: block; width: 26px; height: 1.5px;
  background: var(--ink);
  transition: transform .5s cubic-bezier(.68,-.05,.27,1.05), opacity .3s ease, width .5s ease;
}
.itn-burger:hover span:nth-child(1) { width: 20px; }
.itn-burger:hover span:nth-child(3) { width: 32px; }
/* 開くと、三本が二本の斜線になる＝「線が組まれた」形 */
.is-menu .itn-burger span { width: 28px; }
.is-menu .itn-burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.is-menu .itn-burger span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.is-menu .itn-burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* ---- 幕 ---- */
.itn-menu {
  position: fixed; inset: 0; z-index: 110;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(7rem, 17svh, 11rem) var(--pad) clamp(1.8rem, 4svh, 3rem);
  background: rgba(9, 10, 13, .93);
  backdrop-filter: blur(16px) saturate(.9);
  -webkit-backdrop-filter: blur(16px) saturate(.9);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.is-menu .itn-menu { opacity: 1; visibility: visible; }
.is-menu { overflow: hidden; }

/* 3Dは幕の奥。文字の邪魔をしないよう右へ寄せる */
.itn-menu__canvas {
  position: absolute; inset: 0 0 0 auto;
  width: min(62%, 900px); height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease .12s;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
}
.is-menu .itn-menu__canvas { opacity: 1; }

/* ---- 項目 ---- */
.itn-menu__nav { position: relative; z-index: 2; align-self: center; }
.itn-menu__nav ol { list-style: none; margin: 0; padding: 0; }
.itn-menu__nav li { overflow: hidden; }
.itn-menu__nav a {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  align-items: baseline;
  gap: 0 1.4rem;
  padding: clamp(.7rem, 1.6svh, 1.15rem) 0;
  border-bottom: 1px solid rgba(242, 239, 233, .1);
  text-decoration: none; color: var(--ink);
  width: min(46rem, 100%);
  transform: translateY(115%);
  opacity: 0;
  transition: transform .78s cubic-bezier(.16,1,.3,1), opacity .6s ease,
              border-color .4s ease;
}
.is-menu .itn-menu__nav a { transform: none; opacity: 1; }
/* 1本ずつ、下から引かれてくる */
.is-menu .itn-menu__nav li:nth-child(1) a { transition-delay: .10s; }
.is-menu .itn-menu__nav li:nth-child(2) a { transition-delay: .17s; }
.is-menu .itn-menu__nav li:nth-child(3) a { transition-delay: .24s; }
.is-menu .itn-menu__nav li:nth-child(4) a { transition-delay: .31s; }
.is-menu .itn-menu__nav li:nth-child(5) a { transition-delay: .38s; }

.itn-menu__nav i {
  font-style: normal; font-size: .72rem; letter-spacing: .16em;
  color: rgba(242, 239, 233, .32);
  transition: color .4s ease;
}
.itn-menu__nav span {
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: clamp(1.7rem, 4.6vw, 3.1rem);
  line-height: 1.18; letter-spacing: .06em;
  transition: color .4s ease, transform .55s cubic-bezier(.16,1,.3,1);
  display: inline-block;
}
.itn-menu__nav em {
  grid-column: 2; font-style: normal;
  font-size: .76rem; letter-spacing: .1em;
  color: rgba(242, 239, 233, .34);
  margin-top: .45rem;
  transition: color .4s ease;
}
.itn-menu__nav a:hover,
.itn-menu__nav a:focus-visible { border-bottom-color: rgba(231, 169, 60, .6); }
.itn-menu__nav a:hover i,
.itn-menu__nav a:focus-visible i { color: var(--accent, #E7A93C); }
.itn-menu__nav a:hover span,
.itn-menu__nav a:focus-visible span { color: var(--accent, #E7A93C); transform: translateX(.55rem); }
.itn-menu__nav a:hover em,
.itn-menu__nav a:focus-visible em { color: rgba(242, 239, 233, .6); }
/* 1つに触れているあいだ、他は退く */
.itn-menu__nav:hover a:not(:hover) span { color: rgba(242, 239, 233, .42); }

/* ---- 幕の足元 ---- */
.itn-menu__foot {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: baseline;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(242, 239, 233, .1);
  opacity: 0; transition: opacity .6s ease .48s;
}
.is-menu .itn-menu__foot { opacity: 1; }
.itn-menu__foot a {
  font-size: .78rem; letter-spacing: .08em; color: var(--ink-dim);
  text-decoration: none; transition: color .3s ease;
}
.itn-menu__foot a:hover { color: var(--accent, #E7A93C); }
.itn-menu__foot p { margin: 0; font-size: .72rem; color: rgba(242, 239, 233, .3); }

@media (max-width: 760px) {
  .itn-menu { padding-top: clamp(6rem, 14svh, 9rem); }
  .itn-menu__canvas { width: 100%; opacity: .5;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%); }
  .is-menu .itn-menu__canvas { opacity: .5; }
  .itn-menu__nav a { grid-template-columns: 3rem 1fr; gap: 0 .9rem; }
  .itn-menu__nav em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .itn-menu__nav a { transition-duration: .01s; transform: none; }
  .itn-menu__canvas { display: none; }
}

/* ★幕（z-index 110）を開くと、ヘッダー（60）が下に潜って閉じられなくなる。
   .itn-burger の z-index はヘッダーの重なり文脈の中でしか効かないので、
   ヘッダーごと持ち上げる（2026-08-06 実測で発覚）。 */
.is-menu .bs-header { z-index: 130; }
/* 幕のあいだは「相談する」を隠す。項目 05 と重複して、押し間違いになる */
.is-menu .bs-header__nav .bs-btn { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.bs-header__nav .bs-btn { transition: opacity .35s ease .25s; }

/* ★brand.css は 720px 以下でヘッダーのナビを丸ごと消す（常駐ドックがあるため）。
   その中にハンバーガーが入っているので、いちばん必要な縦画面で
   メニューが開けなくなっていた（2026-08-06 実測）。ここだけ戻す。
   「相談する」は常駐ドックが担うので、縦では出さない。 */
@media (max-width: 720px) {
  .bs-header__nav { display: flex; }
  .bs-header__nav .bs-btn { display: none; }
  /* 縦は線が文字の真後ろに来る。地を濃くして、読みを優先する */
  .itn-menu { background: rgba(9, 10, 13, .955); }
  .itn-menu__canvas { opacity: .34 !important; }
}

/* ══════════════════════════════════════════════════════════
   フッターの家（線 → 家 → 灯り の回収）
   ★スマホのフッターがリンクの羅列になっていたのを作り直した
     （2026-08-06 内田指摘）。直したのは3つ。
     ①締めに絵を置く（3Dの軸組。スクロールで組み上がり、灯が入る）
     ②縦画面ではリンクを2列に詰めず、1列の行にして罫で仕切る
     ③屋号を大きく置いて、固定ヘッダーとぶつからない高さから始める
   ══════════════════════════════════════════════════════════ */
.itn-fhouse {
  position: relative;
  height: clamp(200px, 30svh, 300px);
  margin-bottom: clamp(1.6rem, 4svh, 2.8rem);
  border-bottom: 1px solid rgba(242, 239, 233, .1);
}
.itn-fhouse__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  /* 上と左右を溶かす。四角い箱に見せない */
  -webkit-mask-image: radial-gradient(118% 96% at 50% 108%, #000 46%, transparent 100%);
  mask-image: radial-gradient(118% 96% at 50% 108%, #000 46%, transparent 100%);
}
.itn-fhouse__line {
  position: absolute; left: 0; right: 0; bottom: 1.15rem;
  margin: 0; text-align: center;
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: clamp(.95rem, 1.7vw, 1.2rem);
  letter-spacing: .14em;
  color: rgba(242, 239, 233, .5);
}

/* 屋号を大きく。フッターの頭であることが分かる */
.itn-fnav__brand .bs-btn { margin-top: 1.3rem; }
.itn-fnav__name { font-size: clamp(1.15rem, 2vw, 1.45rem); }

/* ---- 縦画面：2列に詰めず、1列の行にする ---- */
@media (max-width: 760px) {
  .itn-fnav {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding-bottom: 2.2rem;
  }
  .itn-fnav__brand { grid-column: auto; }
  .itn-fnav__name { font-size: 1.35rem; letter-spacing: .16em; }
  .itn-fnav nav ul {
    gap: 0;
    border-top: 1px solid rgba(242, 239, 233, .1);
  }
  .itn-fnav nav li { border-bottom: 1px solid rgba(242, 239, 233, .08); }
  .itn-fnav nav a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .92rem .2rem .92rem 0;
    font-size: .95rem; color: var(--ink);
  }
  /* 行の右端に細い矢印。押せる行であることが分かる */
  .itn-fnav nav a::after {
    content: ""; width: 16px; height: 1px;
    background: rgba(242, 239, 233, .3);
    transition: width .35s ease, background .35s ease;
  }
  .itn-fnav nav a:active::after { width: 24px; background: var(--accent, #E7A93C); }
  .itn-footer__bottom { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .itn-fhouse { height: clamp(210px, 27svh, 280px); }
}

/* 家は締めに置く。フッターの頭に置くと、いちばん下まで行ったとき
   画面の上へ流れてしまって見えない（2026-08-06 実測：スマホで -537px） */
.itn-fhouse {
  margin: clamp(2rem, 5svh, 3.2rem) 0 clamp(1.4rem, 3svh, 2.2rem);
  border-bottom: 0;
  border-top: 1px solid rgba(242, 239, 233, .1);
  padding-top: clamp(1.4rem, 3svh, 2.2rem);
}
@media (max-width: 760px) {
  /* 縦は行数が多く、フッターが伸びすぎる（実測1,424px）。詰める */
  .itn-fnav { gap: 1.7rem; padding-bottom: 1.7rem; }
  .itn-fnav nav a { padding: .74rem .2rem .74rem 0; font-size: .9rem; }
  .itn-fnav__note { font-size: .8rem; line-height: 1.85; }
  .itn-fnav__brand .bs-btn { margin-top: 1rem; }
  .itn-fhouse { margin-top: 1.6rem; padding-top: 1.6rem; }
  .itn-note { margin-top: 1.3rem; }
}

/* ★一文を線の上に重ねると、どちらも読めない（フッターでも同じ轍を踏んだ）。
   canvas の下に場所を空けて、そこに置く。 */
.itn-fhouse { height: clamp(232px, 32svh, 330px); }
.itn-fhouse__canvas { inset: 0 0 2.5rem 0; }
.itn-fhouse__line { bottom: 0; }

/* 一文と線の間をもっと空ける。詰めると、線が文字を横切って読めない */
.itn-fhouse__canvas { inset: 0 0 3.7rem 0; }
.itn-fhouse__line {
  bottom: .35rem;
  color: rgba(242, 239, 233, .62);
  text-shadow: 0 2px 16px rgba(9, 10, 13, .95), 0 0 6px rgba(9, 10, 13, .9);
}

/* ══════════════════════════════════════════════════════════
   締めのCTA（灯りの点いた家を背に置く）
   ★スマホのフッターのボタンが 93×41px・文字10.5px で完全に埋もれていた
     （2026-08-06 実測・内田指摘）。飾りの家とボタンを分けていたのが原因。
     ひとつにまとめて、ここをページの締めにする。
   ══════════════════════════════════════════════════════════ */
.itn-fcta {
  position: relative;
  margin: clamp(2.2rem, 5svh, 3.4rem) 0 clamp(1.6rem, 3svh, 2.4rem);
  padding: clamp(2.4rem, 6svh, 4rem) clamp(1.4rem, 4vw, 3.2rem) clamp(2rem, 4svh, 3rem);
  border: 1px solid rgba(242, 239, 233, .12);
  overflow: hidden;
  isolation: isolate;
}
/* 図面の四隅。細部があると「作られたもの」に見える */
.itn-fcta::before {
  content: ""; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  background:
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) left top / 22px 1px no-repeat,
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) left top / 1px 22px no-repeat,
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) right bottom / 22px 1px no-repeat,
    linear-gradient(var(--accent, #E7A93C), var(--accent, #E7A93C)) right bottom / 1px 22px no-repeat;
  opacity: .5;
}
.itn-fcta__canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(122% 108% at 50% 112%, #000 40%, transparent 100%);
  mask-image: radial-gradient(122% 108% at 50% 112%, #000 40%, transparent 100%);
}
.itn-fcta__in { position: relative; z-index: 1; }
.itn-fcta__h {
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.36; letter-spacing: .05em;
  margin: .9rem 0 0; color: var(--ink);
  word-break: auto-phrase;
  text-shadow: 0 2px 24px rgba(9, 10, 13, .9);
}
.itn-fcta__note {
  margin: 1.1rem 0 0; max-width: 30rem;
  font-size: .86rem; line-height: 1.95; color: var(--ink-dim);
  text-shadow: 0 2px 18px rgba(9, 10, 13, .92);
}
.itn-fcta__line {
  margin: 1.9rem 0 0;
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: .92rem; letter-spacing: .14em;
  color: rgba(242, 239, 233, .5);
  text-shadow: 0 2px 16px rgba(9, 10, 13, .95);
}

/* ---- ボタン。金のベタ塗りは品を落とすのでやめた（2026-08-06 内田指摘）。
       細い罫と余白で見せる。大きさだけは十分に取る ---- */
.itn-bigbtn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 1.8rem;
  margin-top: 1.9rem;
  min-height: 56px;
  padding: 0 1.5rem 0 1.7rem;
  border: 1px solid rgba(231, 169, 60, .5);
  color: var(--ink);
  text-decoration: none;
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: 1.02rem; letter-spacing: .16em;
  background: rgba(11, 13, 16, .5);
  transition: border-color .4s ease, background .4s ease, color .4s ease;
}
.itn-bigbtn i {
  display: block; width: 26px; height: 1px; background: var(--accent, #E7A93C);
  position: relative; transition: width .4s cubic-bezier(.16,1,.3,1);
}
.itn-bigbtn i::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--accent, #E7A93C); border-right: 1px solid var(--accent, #E7A93C);
  transform: rotate(45deg);
}
.itn-bigbtn:hover, .itn-bigbtn:focus-visible {
  border-color: var(--accent, #E7A93C);
  background: rgba(231, 169, 60, .08);
  color: var(--accent, #E7A93C);
}
.itn-bigbtn:hover i, .itn-bigbtn:focus-visible i { width: 40px; }

@media (max-width: 760px) {
  .itn-fcta { padding-inline: 1.3rem; }
  .itn-bigbtn {
    display: flex; width: 100%;
    min-height: 62px; font-size: 1.08rem;
  }
  .itn-fcta__line { margin-top: 1.5rem; font-size: .86rem; }
}

/* ★線が文字を横切って両方読めない。文字の側だけ地を沈める
   （このサイトで3度目の同じ失敗。線ものの上に文字を置くときは必ず地を敷く） */
.itn-fcta::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(102deg,
    rgba(11, 13, 16, .94) 0%,
    rgba(11, 13, 16, .88) 34%,
    rgba(11, 13, 16, .52) 64%,
    rgba(11, 13, 16, .18) 100%);
}
.itn-fcta::before { z-index: 2; }        /* 四隅は地より前 */
@media (max-width: 760px) {
  /* 縦は逃がす場所が無いので、下から強く沈める */
  .itn-fcta::after {
    background: linear-gradient(6deg,
      rgba(11, 13, 16, .96) 0%,
      rgba(11, 13, 16, .90) 46%,
      rgba(11, 13, 16, .62) 78%,
      rgba(11, 13, 16, .30) 100%);
  }
}

/* ══════════════════════════════════════════════════════════
   追従ボタン（縦画面）
   ★brand.css の既定は「濃い丸ピル＋矢印」で、このサイトの語彙と合わない。
     ここでは figure の言語に寄せる。
       ・輪 ＝ ページのどこまで来たかを線で描く（線＝このサイトの主題）
       ・左の小窓 ＝ 家の開口に入る灯り。締めのCTAと同じ合図
       ・地は溶かす。ベタの箱を画面に貼らない
   ══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .itn-dock {
    left: 14px; right: 14px;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 11px 11px 11px 15px;
    border-radius: 6px;
    background: rgba(13, 15, 19, .82);
    backdrop-filter: blur(14px) saturate(.92);
    -webkit-backdrop-filter: blur(14px) saturate(.92);
    border: 1px solid rgba(242, 239, 233, .13);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    /* 出入り。表紙のあいだは出さず、締めのCTAが見えたら引っ込む */
    transform: translateY(calc(120% + env(safe-area-inset-bottom, 0px)));
    opacity: 0;
    transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  }
  .itn-dock[data-show="1"] { transform: none; opacity: 1; }

  /* 左の小窓。家の開口＝灯り */
  .itn-dock__lamp {
    position: relative;
    width: 15px; height: 21px;
    border: 1px solid rgba(231, 169, 60, .55);
    background: linear-gradient(180deg, rgba(231,169,60,.30), rgba(231,169,60,.13));
    box-shadow: 0 0 14px rgba(231, 169, 60, .30);
  }
  .itn-dock__lamp::after {
    content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px;
    width: 1px; background: rgba(231, 169, 60, .45);
  }

  .itn-dock .bs-dock__label {
    font-family: "Zen Old Mincho", "Times New Roman", serif;
    font-size: 1.0rem; font-weight: 400; letter-spacing: .1em;
  }
  .itn-dock .bs-dock__sub {
    font-size: .66rem; letter-spacing: .04em;
    color: rgba(242, 239, 233, .48);
  }

  /* 輪＝読み進み。線が一周すると締めに着く */
  .itn-dock__ring {
    position: relative; width: 44px; height: 44px;
    display: grid; place-items: center;
  }
  .itn-dock__ring svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: rotate(-90deg);
  }
  .itn-dock__ring circle { fill: none; stroke-width: 1.2; }
  .itn-dock__track { stroke: rgba(242, 239, 233, .16); }
  .itn-dock__bar {
    stroke: var(--accent, #E7A93C);
    stroke-linecap: round;
    stroke-dasharray: 119.38;                    /* 2πr（r=19） */
    stroke-dashoffset: calc(119.38 * (1 - var(--p, 0)));
    transition: stroke-dashoffset .18s linear;
  }
  .itn-dock__ring i {
    display: block; width: 13px; height: 1px;
    background: var(--ink); position: relative;
  }
  .itn-dock__ring i::after {
    content: ""; position: absolute; right: 0; top: -3px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--ink); border-right: 1px solid var(--ink);
    transform: rotate(45deg);
  }
  .itn-dock:active { transform: translateY(2px); }
  .itn-dock:active .itn-dock__lamp { box-shadow: 0 0 22px rgba(231, 169, 60, .55); }
}

/* ══════════════════════════════════════════════════════════
   追従ボタンの紋（屋根・糸・土台）
   ★四角い窓の記号ではサイトのモチーフと繋がらない（内田・2026-08-06）。
     ローダーに出るのと同じ紋をそのまま置く。屋根が朱、糸と土台が墨。
     読み進めると紋の朱が濃くなる（輪と同じ合図を、形でも出す）。
   ══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .itn-dock__mark { display: block; width: 22px; height: 23px; }
  .itn-dock__mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .itn-mark__roof {
    fill: var(--accent, #E7A93C);
    opacity: calc(.55 + .45 * var(--p, 0));
    transition: opacity .2s linear;
  }
  .itn-mark__thread { fill: rgba(242, 239, 233, .82); }
  .itn-mark__base { fill: rgba(242, 239, 233, .58); }
}

/* ══════════════════════════════════════════════════════════
   締めのCTAの組み直し
   ★崩れていたのは3か所。①ボタンの中で文字が左、矢印が右端で、
     まん中が空いていた ②添え文が3行目に「ん。」だけ残っていた
     ③一文がボタンの後ろに置かれて、行き止まりに見えていた。
     一文は上へ、添え文は自分で改行、ボタンは中央で組む。
   ══════════════════════════════════════════════════════════ */
.itn-fcta__line {
  margin: 0 0 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(242, 239, 233, .12);
}
.itn-fcta__note { margin-top: 1.2rem; }
.itn-bigbtn {
  justify-content: center;
  gap: 1.1rem;
  padding: 0 2rem;
}
@media (max-width: 760px) {
  .itn-fcta__line { margin-bottom: 1.3rem; padding-bottom: 1rem; font-size: .84rem; }
  .itn-fcta__h { margin-top: .7rem; }
  .itn-bigbtn { margin-top: 1.7rem; }
}

/* ★山場の figure 一式は、区間の外では消す。
   sticky のまま残すと、次のセクション（結び）に図面枠と表題欄が重なる
   （2026-08-06 実測）。--fade は itonami-frame.js が毎フレーム入れる。 */
.itn-sheet,
.itn-frame__rail { opacity: var(--fade, 1); }
.itn-sheet { transition: opacity .25s ease; }

/* 結びのボタン。大見出しに対して小さすぎた（199×48px）。
   ページの締めの一手なので、見出しに釣り合う大きさにする */
.itn-cta__btn {
  min-height: 58px;
  padding-inline: 2.2rem;
  font-family: "Zen Old Mincho", "Times New Roman", serif;
  font-size: 1.02rem;
  letter-spacing: .14em;
}
@media (max-width: 760px) {
  .itn-cta__btn { display: flex; justify-content: center; width: 100%; min-height: 60px; }
}