/* 硬派の型。施工・製造・運送・士業。
   色は題材から取る。板金屋の材料＝銅の緑青（ろくしょう）と真鍮。
   ★写真が無くても崩れないこと。写真ゼロでも売り物に見えるよう、
     色の帯・大きな数字・明朝の大見出しで見せ場を作る。
   ★webフォントは読み込まない（外部に依存すると、切れたときに壊れる）。
     見出しは日本語の明朝を指定し、太さと字間で作る。 */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --ink:    #0c1210;   /* ほぼ黒。わずかに緑寄り */
  --sub:    #55635e;
  --line:   #dde4e1;
  --bg:     #ffffff;
  --tint:   #f2f5f4;
  --deep:   #103b36;   /* 銅の緑青。濃い帯に使う */
  --deeper: #0a2a26;
  --brass:  #c9a227;   /* 真鍮。数字と罫だけに使う */
  --onDeep: #eaf2ef;
  --wide: 1120px;
  --gothic: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "MS PMincho", serif;
}
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--gothic); line-height: 1.9; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }

h1, h2, h3 { line-height: 1.35; margin: 0 0 .6em; }
h1, h2 { font-family: var(--mincho); font-weight: 700; letter-spacing: .04em; }
h1 { font-size: clamp(2.1rem, 7vw, 4.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; }
p { margin: 0 0 1em; }

/* 上の帯 */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: var(--wide); margin: 0 auto; padding: 20px;
}
.brand { font-family: var(--mincho); font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: .06em; }
.site-head nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-head nav a { color: var(--sub); text-decoration: none; font-size: .9rem; padding-bottom: 3px; }
.site-head nav a:hover { color: var(--ink); }
.site-head nav a.here { color: var(--ink); border-bottom: 2px solid var(--brass); }

section { max-width: var(--wide); margin: 0 auto; padding: 76px 20px; }

/* ヒーロー：全幅の濃い帯。ここが派手さの本体 */
.hero {
  max-width: none; padding: 0;
  background: linear-gradient(160deg, var(--deep) 0%, var(--deeper) 100%);
  color: var(--onDeep); position: relative; overflow: hidden;
}
.hero::after {                       /* 斜めの罫。金属の折り目のつもり */
  content: ""; position: absolute; inset: auto -10% -40% 55%;
  height: 70%; background: rgba(201,162,39,.10); transform: skewX(-18deg);
}
.hero-inner { max-width: var(--wide); margin: 0 auto; padding: 100px 20px 92px; position: relative; z-index: 1; }
.eyebrow { color: var(--brass); font-size: .8rem; letter-spacing: .34em; margin: 0 0 22px; }
.hero h1 { margin-bottom: .5em; text-wrap: balance; }
.hero .lead { color: rgba(234,242,239,.82); font-size: 1.05rem; max-width: 38em; }
.hero-call {
  display: inline-block; margin-top: 26px; padding: 15px 40px;
  background: var(--brass); color: #17210f; font-weight: 700;
  text-decoration: none; letter-spacing: .1em; border-radius: 2px;
}
.hero-call:hover { background: #d8b33c; }

/* 実績の数字 */
.stats { max-width: none; padding: 0; background: var(--ink); color: var(--onDeep); }
.stat-row {
  max-width: var(--wide); margin: 0 auto; padding: 34px 20px;
  display: grid; gap: 8px 26px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b {
  font-family: var(--mincho); font-size: clamp(1.9rem, 5vw, 2.7rem);
  color: var(--brass); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.stat span { font-size: .8rem; letter-spacing: .16em; color: rgba(234,242,239,.7); }

/* 濃い帯のセクション */
.band { max-width: none; background: var(--deep); color: var(--onDeep); }
.band > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.band h2 { color: var(--onDeep); }
.band .card { background: rgba(255,255,255,.06); border: 0; }
.band .card h3 { color: var(--brass); }
.band .card p { color: rgba(234,242,239,.78); }

.lead { font-size: 1.02rem; color: var(--sub); max-width: 44em; }
.page-head { padding-bottom: 12px; }
.page-head h1 { font-size: clamp(1.8rem, 5vw, 3rem); }

/* 並べるもの */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  border: 1px solid var(--line); border-top: 3px solid var(--brass);
  padding: 26px 22px; background: var(--bg);
}
.card.plain { border: 0; border-top: 3px solid var(--brass); background: var(--tint); }
.card p { margin: 0; color: var(--sub); font-size: .94rem; }

.photo { margin: 0; }
.photo img { display: block; width: 100%; }

/* 会社概要の表 */
.profile { width: 100%; border-collapse: collapse; }
.profile th, .profile td { text-align: left; padding: 18px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.profile th { width: 11em; color: var(--sub); font-weight: 600; white-space: nowrap; letter-spacing: .08em; font-size: .9rem; }

/* 連絡先 */
#cta { max-width: none; background: var(--ink); color: var(--onDeep); }
#cta > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }
#cta h2 { color: var(--onDeep); }
#cta .lead { color: rgba(234,242,239,.78); }
.big { font-family: var(--mincho); font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: .06em; margin: 0 0 .2em; }
.big a { text-decoration: none; color: var(--brass); font-variant-numeric: tabular-nums; }
.small { color: rgba(234,242,239,.65); font-size: .85rem; letter-spacing: .08em; }

/* 下の帯 */
.site-foot { background: var(--deeper); color: rgba(234,242,239,.7); }
.site-foot p { max-width: var(--wide); margin: 0 auto; padding: 30px 20px; font-size: .85rem; letter-spacing: .06em; }

a:focus-visible, .hero-call:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

@media (max-width: 640px) {
  section { padding: 52px 18px; }
  .hero-inner { padding: 68px 18px 60px; }
  .site-head { padding: 16px 18px; }
}

/* ──────────────────────────────────────────────
   動き
   ★JavaScriptは使わない。売り文句が「壊れない・月額0円」なので、
     動くものを1つ入れると、そこが将来の故障点になる。CSSだけなら壊れようがない。
   ★対応していないブラウザでは、ただ最初から見えているだけ。中身は欠けない。
   ────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes drift { from { transform: skewX(-18deg) translateX(-2%); } to { transform: skewX(-18deg) translateX(4%); } }

/* 開いた瞬間、上から順に立ち上がる */
.hero .eyebrow   { animation: rise .7s .05s both cubic-bezier(.2,.7,.2,1); }
.hero h1         { animation: rise .9s .18s both cubic-bezier(.2,.7,.2,1); }
.hero .lead      { animation: rise .9s .34s both cubic-bezier(.2,.7,.2,1); }
.hero-call       { animation: rise .8s .50s both cubic-bezier(.2,.7,.2,1); }
.hero::after     { animation: drift 16s ease-in-out infinite alternate; }

/* 数字は、線を引くように出す */
.stat b { animation: wipe 1s .3s both cubic-bezier(.2,.7,.2,1); }
.stat:nth-child(2) b { animation-delay: .45s; }
.stat:nth-child(3) b { animation-delay: .6s; }
.stat:nth-child(4) b { animation-delay: .75s; }

/* 触ったときの手応え */
.card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-top-width .2s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(12,18,16,.10); border-top-width: 6px; }
.band .card:hover { background: rgba(255,255,255,.11); box-shadow: none; }
.hero-call { transition: transform .25s, background .25s, box-shadow .25s; }
.hero-call:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,162,39,.28); }
.site-head nav a { transition: color .2s, border-color .2s; }
.big a { transition: opacity .2s; }
.big a:hover { opacity: .78; }
.profile tr { transition: background .25s; }
.profile tr:hover { background: var(--tint); }

/* 下までたどり着いたところで出す。対応していなければ最初から見えている */
@supports (animation-timeline: view()) {
  section:not(.hero):not(.stats) h2,
  .card, .stat, .profile tr, .page-head h1, section .lead, .big {
    animation: rise .7s both cubic-bezier(.2,.7,.2,1);
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
  .stat b { animation: none; opacity: 1; clip-path: none; }
  .hero .eyebrow, .hero h1, .hero .lead, .hero-call { animation-timeline: auto; }
}

/* 動きが苦手な人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ──────────────────────────────────────────────
   流れと、お客様の声
   ★番号は「本当に順序があるもの」にだけ振る。ここは相談→現調→見積→工事なので正当。
     何をされるか分からないのが、いちばん不安。だからここが効く。
   ────────────────────────────────────────────── */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.step {
  position: relative; padding: 30px 0 30px 84px;
  border-bottom: 1px solid var(--line);
}
.step:last-child { border-bottom: 0; }
.step::before {                       /* 縦につながる線。順序を目で分からせる */
  content: ""; position: absolute; left: 27px; top: 58px; bottom: -1px;
  width: 2px; background: var(--line);
}
.step:last-child::before { display: none; }
.step-no {
  position: absolute; left: 0; top: 26px;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mincho); font-size: 1.5rem; color: var(--brass);
  border: 2px solid var(--brass); background: var(--bg);
  font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: .3em; }
.step p { margin: 0; color: var(--sub); }

.voice-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.voice { margin: 0; padding: 30px 26px 24px; background: rgba(255,255,255,.06); position: relative; }
.voice::before {
  content: "”"; position: absolute; top: -6px; left: 18px;
  font-family: var(--mincho); font-size: 4.5rem; line-height: 1;
  color: var(--brass); opacity: .5;
}
.voice blockquote { margin: 0 0 14px; padding: 0; color: var(--onDeep); font-size: 1.02rem; }
.voice figcaption { color: rgba(234,242,239,.62); font-size: .82rem; letter-spacing: .1em; }

/* 動き：順に立ち上がる */
@supports (animation-timeline: view()) {
  .step, .voice {
    animation: rise .7s both cubic-bezier(.2,.7,.2,1);
    animation-timeline: view(); animation-range: entry 0% cover 26%;
  }
}
.step-no { transition: transform .3s cubic-bezier(.2,.7,.2,1), background .3s, color .3s; }
.step:hover .step-no { transform: scale(1.06); background: var(--brass); color: #17210f; }
.voice { transition: background .3s; }
.voice:hover { background: rgba(255,255,255,.11); }

@media (max-width: 640px) {
  .step { padding-left: 62px; }
  .step-no { width: 44px; height: 44px; font-size: 1.15rem; top: 24px; }
  .step::before { left: 21px; top: 50px; }
}

/* 数字の見せ方をジョグワークスに合わせる。
   数値を大きく、単位を小さく横に、説明を下に。分けたほうが数字が立つし桁も読める。
   ★4つ目が「埼玉 県西部」のように、数字でない項目も同じ枠に入る。
     数字を持っていない客の逃げ道になるので、そこも同じ形で通す。 */
.stat-row { padding: 44px 20px; gap: 22px 30px; }
.stat b { display: flex; align-items: baseline; gap: .35em; line-height: 1.1; margin-bottom: 6px; }
.stat b i {
  font-family: var(--gothic); font-style: normal; font-weight: 600;
  font-size: .34em; letter-spacing: .1em; color: rgba(234,242,239,.72);
  white-space: nowrap;
}
.stat span { font-size: .78rem; letter-spacing: .14em; }
.stat + .stat { position: relative; }
.stat + .stat::before {          /* 項目のあいだに細い罫。金属板の継ぎ目のつもり */
  content: ""; position: absolute; left: -15px; top: 6px; bottom: 6px;
  width: 1px; background: rgba(234,242,239,.14);
}
@media (max-width: 640px) {
  .stat + .stat::before { display: none; }
  .stat-row { padding: 32px 18px; }
}

/* ヒーローに写真を薄く敷く。
   ★文字の下に写真を置くと、写真か文字かどちらかが負ける。背景に回して
     濃い色を上からかけると、両方立つ（2026-08-20 本間さん「薄めで」）。
   ★写真が無ければ has-photo が付かないので、これまで通り色だけになる。 */
.hero.has-photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-photo);
  background-size: cover; background-position: 62% 45%;
  opacity: .30;
  filter: saturate(.72) contrast(1.04);
}
.hero.has-photo {
  background:
    linear-gradient(100deg, var(--deeper) 6%, rgba(16,59,54,.86) 46%, rgba(16,59,54,.42) 100%),
    linear-gradient(160deg, var(--deep) 0%, var(--deeper) 100%);
}
.hero.has-photo .hero-inner { padding-top: 116px; padding-bottom: 108px; }
.hero.has-photo .lead { max-width: 32em; }

/* 写真がある側（右）に文字を重ねない。狭い画面では下に流れるので、そのときは全幅 */
@media (min-width: 900px) {
  .hero.has-photo .hero-inner > * { max-width: 60%; }
  .hero.has-photo .hero-call { max-width: none; }
}
@media (max-width: 899px) {
  .hero.has-photo::before { background-position: 70% 40%; opacity: .22; }
}

/* ロゴ */
.brand .logo { display: block; height: 44px; width: auto; }
@media (max-width: 640px) { .brand .logo { height: 34px; } }

/* 施工事例：写真つきのカード */
.works { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.work { border: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.work-photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); }
.work-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-words { padding: 24px 22px; border-top: 3px solid var(--brass); }
.work-words h3 { margin-bottom: .4em; }
.work-words p { margin: 0; color: var(--sub); font-size: .94rem; }
.work { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.work:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(12,18,16,.12); }
.work-photo img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.work:hover .work-photo img { transform: scale(1.04); }

/* 下層ページの写真は、帯として全幅に置く */
.photo { max-width: none; }
.photo img { max-height: 46vh; object-fit: cover; }

@supports (animation-timeline: view()) {
  .work { animation: rise .7s both cubic-bezier(.2,.7,.2,1);
          animation-timeline: view(); animation-range: entry 0% cover 24%; }
}

/* ロゴをもっと大きく。3:1の横長なので、高さを上げると横も伸びる。
   2026-08-20 本間さん「ロゴめっちゃ小さいのでもっと存在感あってもいい」 */
.brand .logo { height: 72px; }
.site-head { padding-top: 22px; padding-bottom: 22px; }
@media (max-width: 900px) { .brand .logo { height: 58px; } }
@media (max-width: 640px) {
  .brand .logo { height: 46px; }
  .site-head { padding-top: 16px; padding-bottom: 16px; gap: 10px; }
}

/* 帯の写真は、切り取る位置を1枚ずつ指定できる（style で上書き）。
   既定は上寄り＝枠の中で被写体が下に来る。顔が切れないところを優先する。 */
.photo img { object-position: 50% 30%; }

/* ──────────────────────────────────────────────
   2026-08-20 本間さん「3枚の画像はもっと小さくていい。おっさんの顔近すぎて怖い。
   ロゴはもっとでかく。あと2.5倍くらい」
   ────────────────────────────────────────────── */

/* 人の写真は帯にしない。全幅に伸ばすと顔が拡大されて、近すぎて怖くなる。
   切り取らずに、そのままの形で小さく置く。場面が全部見えるほうが伝わる。 */
.photo {
  max-width: var(--wide); margin: 0 auto; padding: 46px 20px 0;
  display: flex; justify-content: center;
}
.photo img {
  width: 100%; max-width: 620px; height: auto; max-height: none;
  object-fit: contain; object-position: center;
}

/* ロゴをさらに大きく。看板のつもりで置く */
.brand .logo { height: 180px; }
.site-head { padding-top: 26px; padding-bottom: 26px; align-items: center; }
@media (max-width: 1000px) { .brand .logo { height: 120px; } }
@media (max-width: 640px)  { .brand .logo { height: 82px; } }

/* ──────────────────────────────────────────────
   2026-08-20 本間さん「すごい微妙じゃない？」
   写真を単独で置いていたので、上に空白ができ、下は足元の帯に食い込み、
   表とも関係のない長方形が浮いていた。間隔の問題ではなく置き方の問題。
   中身と横に並べる。写真が「そのページの話の一部」に見えるようにする。
   ────────────────────────────────────────────── */

.split {
  display: grid; gap: 44px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}
.split .photo { padding: 0; max-width: none; display: block; }
.split .photo img { max-width: 100%; width: 100%; border-radius: 2px; }
.split-main { min-width: 0; }
.split-main .lead { max-width: none; }
.split .profile th { width: 8.5em; }

/* 横に並べたときは、写真の頭を中身の頭にそろえる */
@media (min-width: 861px) {
  .split .photo { position: sticky; top: 24px; }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split .photo img { max-width: 560px; margin: 0 auto; }
}

/* ──────────────────────────────────────────────
   2026-08-20 本間さん「なんかだせーなー。画像か？画像やめるか。
   3枚のおっさんの画像はやめましょう。もう少しかっこよくして」

   人物写真を外した。濃い帯と明朝と真鍮で組んだところに普通の人物写真が入ると、
   そこで急に平凡になる。写真は「屋根の上」と「施工事例」だけ残す。
   代わりに、下層ページも濃い帯で始める。白い小さな見出しで始まるのが
   いちばん平凡に見えていた原因。
   ────────────────────────────────────────────── */

.page-head {
  max-width: none; padding: 0;
  background: linear-gradient(150deg, var(--deep) 0%, var(--deeper) 100%);
  color: var(--onDeep); position: relative; overflow: hidden;
}
.page-head::after {                      /* ヒーローと同じ折り目 */
  content: ""; position: absolute; inset: auto -10% -55% 62%;
  height: 100%; background: rgba(201,162,39,.09); transform: skewX(-18deg);
}
.page-head-inner {
  max-width: var(--wide); margin: 0 auto; padding: 68px 20px 60px;
  position: relative; z-index: 1;
}
.page-head .eyebrow { margin-bottom: 16px; }
.page-head h1 {
  font-size: clamp(2rem, 5.5vw, 3.4rem); margin: 0;
  animation: rise .8s .1s both cubic-bezier(.2,.7,.2,1);
}
.page-head .eyebrow { animation: rise .7s .02s both cubic-bezier(.2,.7,.2,1); }

/* 帯のすぐ下は、少し詰める */
.page-head + section { padding-top: 56px; }

/* 採用・お問い合わせの導入文は大きく置く */
.big-lead {
  font-family: var(--mincho); font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.9; color: var(--ink); max-width: 30em; letter-spacing: .03em;
}

/* 会社概要の表を、もう少し構えのあるものに */
.profile th, .profile td { padding: 22px 10px; }
.profile th { color: var(--sub); font-size: .85rem; letter-spacing: .12em; }
.profile td { font-size: 1.02rem; }
.profile tr:first-child th, .profile tr:first-child td { border-top: 2px solid var(--ink); }

@media (max-width: 640px) {
  .page-head-inner { padding: 48px 18px 42px; }
  .profile th { width: 7em; }
}

/* ──────────────────────────────────────────────
   2026-08-20 本間さん「その帯もなんか違う」
   濃い帯の見出しは、どのテンプレにもある一番ありふれた作り。それが理由だと思う。
   案A（quiet）：白のまま、明朝の大見出しと真鍮の細い罫だけ。
   濃い色はホームの見せ場に取っておく。全ページを濃くすると、ホームが目立たない。
   ────────────────────────────────────────────── */

.page-head.quiet {
  background: none; color: var(--ink); overflow: visible;
  border-top: 3px solid var(--brass);
}
.page-head.quiet::after { display: none; }
.page-head.quiet .page-head-inner { padding: 78px 20px 30px; }
.page-head.quiet h1 {
  font-size: clamp(2.2rem, 6.5vw, 4rem); margin: 0 0 .25em;
  letter-spacing: .06em;
}
.page-head.quiet .kicker {
  margin: 0; color: var(--sub); font-size: .72rem; letter-spacing: .34em;
  animation: rise .7s .18s both cubic-bezier(.2,.7,.2,1);
}
.page-head.quiet + section { padding-top: 34px; }

@media (max-width: 640px) {
  .page-head.quiet .page-head-inner { padding: 52px 18px 22px; }
}

/* ──────────────────────────────────────────────
   案C：見出しを左の柱に置いて、中身を右に流す（雑誌のような組み）
   読み進めても見出しが残るので、いま何のページを見ているかが分かる。
   狭い画面では、ふつうに上下に並ぶ。
   ────────────────────────────────────────────── */

.editorial { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.editorial > section { max-width: none; padding-left: 0; padding-right: 0; }

@media (min-width: 900px) {
  .editorial {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 56px; align-items: start;
  }
  .editorial > .page-head.aside { grid-column: 1; grid-row: 1 / 40; position: sticky; top: 30px; }
  .editorial > section:not(.page-head) { grid-column: 2; }
  .editorial > #cta { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; }
}

.page-head.aside { background: none; color: var(--ink); overflow: visible; }
.page-head.aside::after { display: none; }
.page-head.aside .page-head-inner { max-width: none; padding: 76px 0 20px; }
.page-head.aside h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .5em;
  letter-spacing: .08em; writing-mode: horizontal-tb;
}
.page-head.aside .kicker {
  margin: 0; color: var(--brass); font-size: .7rem; letter-spacing: .34em;
  padding-top: 14px; border-top: 2px solid var(--brass); display: inline-block;
}
.editorial > section:not(.page-head) { padding-top: 76px; }
.editorial > #cta { background: var(--ink); color: var(--onDeep); padding: 48px 28px; }
.editorial > #cta > * { max-width: none; }

@media (max-width: 899px) {
  .page-head.aside .page-head-inner { padding: 52px 0 18px; }
  .editorial > section:not(.page-head) { padding-top: 30px; }
}

/* 施工事例に番号は振らない。並べて見せる型なので、順番に意味がない。
   ★番号は「1枚ずつめくる型」のためにHTMLへ入れてある。ここでは出さない。 */
.work-index, .work-no { display: none; }

/* 施工事例は並べて見せるので、横に流す足場は使わない（ただの入れ物のまま） */
.works-track, .works-pin { display: contents; }

/* 地図。★この型で唯一、外を読みにいく部品。後から読み込む */
.map { border: 1px solid var(--line, #dcd7cf); overflow: hidden; line-height: 0; }
.map iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 640px) { .map iframe { height: 300px; } }
.map-stand-in {
  border: 1px dashed var(--line, #dcd7cf); padding: 62px 32px; text-align: center;
  color: #7b7268; font-size: .84rem; letter-spacing: .1em; line-height: 2.2;
}


/* ──────────────────────────────────────────────
   受け皿：CSSのスクロール連動が効かない端末のため

   2026-08-21、JSの決めを直した。外の部品はゼロのまま、自前・インライン・
   数十行だけ使う。CSSのスクロール連動は2023年からの新しい機能で、少し古い端末
   （特にSafari）では効かない＝何も動かない。そこを埋める。

   ★隠す指定は、JSが付ける .js-motion の下にしか置かない。
     JSが死ねば何も隠れず、中身は最初から全部読める。
   ────────────────────────────────────────────── */

html.js-motion .stat, html.js-motion .card, html.js-motion .step,
html.js-motion .voice, html.js-motion .work, html.js-motion .big-lead,
html.js-motion .profile tr { opacity: 0; }
html.js-motion .in { animation: rise .8s ease both; }

/* ──────────────────────────────────────────────────────────────
   見せ場：斜めの幕（2026-08-21 作り直し）

   本間さん「全部硬派もシンプルもやわらかもやり直しです」。
   この型の背骨は「折り目（skewX -18deg）」。見せ場もそこで作る。

   1. 開いた瞬間、濃い面が斜めに割れて写真が現れる（1回だけ）
   2. 下へ送ると、写真が縮んで帯に収まる
   3. 施工事例は、斜めのワイプで現れる

   ★写真が無ければ幕も出ない。色だけのヒーローのまま、何も欠けない。
   ★動きを止めている人・古い端末では、はじめから写真が帯として出ている。
   ────────────────────────────────────────────────────────────── */

.hero.has-photo .hero-shot,
.hero:not(.has-photo) .hero-shot { display: none; }

.hero.has-back { padding: 0; }
.hero.has-back .hero-shot {
  position: sticky; top: 0; z-index: 0;
  height: 66vh; overflow: hidden;
  background-image: var(--hero-back);
  background-size: cover; background-position: var(--hero-back-at, 50% 40%);
  display: block;
}
/* 斜めの幕。開いた瞬間だけ、濃い面が右へ滑って写真が出る */
.hero.has-back .hero-shot::after {
  content: ""; position: absolute; inset: -20% -30%;
  background: linear-gradient(160deg, var(--deep) 0%, var(--deeper) 100%);
  transform: skewX(-18deg) translateX(0);
  animation: curtain 1.5s cubic-bezier(.72, 0, .18, 1) .15s both;
}
.hero.has-back .hero-inner {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, var(--deep) 0%, var(--deeper) 100%);
}

@keyframes curtain {
  from { transform: skewX(-18deg) translateX(0); }
  to   { transform: skewX(-18deg) translateX(140%); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero.has-back .hero-shot {
      height: 100svh;
      animation: settle-fold linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 76vh;
    }
  }
}
@keyframes settle-fold {
  from { height: 100svh; }
  to   { height: 46svh; }
}

/* 施工事例：斜めのワイプで現れる。並べて見せる型なので、めくらない */
.work-photo { overflow: hidden; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .work-photo img {
      animation: fold-in .9s cubic-bezier(.72, 0, .18, 1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 52%;
    }
  }
}
html.js-motion .work-photo img { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
html.js-motion .work.in .work-photo img {
  animation: fold-in .9s cubic-bezier(.72, 0, .18, 1) both;
}
@keyframes fold-in {
  from { clip-path: polygon(0 0, 0 0, -22% 100%, -22% 100%); }
  to   { clip-path: polygon(0 0, 122% 0, 100% 100%, 0 100%); }
}

/* 1枚ずつ遅らせる。★全部が同時に出ると、板が1枚動いただけに見えて、札に見えない。 */
html.js-motion .stat-row > :nth-child(2).in, html.js-motion .cards > :nth-child(2).in,
html.js-motion .steps > :nth-child(2).in, html.js-motion .voice-row > :nth-child(2).in { animation-delay: .09s; }
html.js-motion .stat-row > :nth-child(3).in, html.js-motion .cards > :nth-child(3).in,
html.js-motion .steps > :nth-child(3).in, html.js-motion .voice-row > :nth-child(3).in { animation-delay: .18s; }
html.js-motion .stat-row > :nth-child(4).in, html.js-motion .cards > :nth-child(4).in,
html.js-motion .steps > :nth-child(4).in { animation-delay: .27s; }
html.js-motion .cards > :nth-child(5).in, html.js-motion .steps > :nth-child(5).in { animation-delay: .36s; }
html.js-motion .cards > :nth-child(6).in, html.js-motion .steps > :nth-child(6).in { animation-delay: .45s; }


/* ──────────────────────────────────────────────
   ページを移っても、切り替わらずに繋がる

   2026-08-21、試作で本間さんに見てもらって「いいですね」。本番へ入れる。
   ★これはCSSだけの仕事。JavaScriptは1行も足していない。
     ブラウザに2024年から入った仕組みで、jQuery時代の作りでは原理的にできない。
   ★対応していない端末では、ふつうにページが切り替わるだけ。中身は何も欠けない。
   ★上の並び（店名と献立）には同じ名前を付けてある。ページを移っても、そこだけは
     動かずに残る。動かないものが1つあると、移動が「同じ建物の中の移動」に見える。
   ────────────────────────────────────────────── */

@view-transition { navigation: auto; }

.site-head { view-transition-name: site-head; }

::view-transition-group(*) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.2, .84, .24, 1);
}
::view-transition-group(site-head) { animation-duration: .01s; }

::view-transition-new(root) { animation: page-wipe .68s cubic-bezier(.72, 0, .18, 1) both; }
::view-transition-old(root) { animation: page-hold .68s linear both; }
@keyframes page-wipe {
  from { clip-path: polygon(0 0, 0 0, -26% 100%, -26% 100%); }
  to   { clip-path: polygon(0 0, 126% 0, 100% 100%, 0 100%); }
}
@keyframes page-hold { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}