@charset "utf-8";
/* =========================================================
   湖南建築（工務店デモ）— 2026-08-03 全面改訂
   骨格：G型（巨大タイポ）× フルブリード写真帯の二層
        ＋ 12カラムを敷いた上で崩す ＋ 読み物は680pxに閉じる
   方針：装飾を足さない。写真は画面端まで。色は弁柄1色。
   動き：静かな土台4つ ＋ 見せ場3つ。@supports でガードし非対応でも情報が
        欠けない。prefers-reduced-motion への追従は 2026-08-15 に廃止
        （営業デモは動きが商材・詳細は「動き」節の冒頭コメント）。
   判断の記録は ../../説明.md ／ 観察は ../../参考観察.md
   ========================================================= */

/* ---------- ページ遷移（M4）：CSS2行。非対応は普通の遷移になるだけ ---------- */
@view-transition{ navigation: auto }

/* =========================================================
   トークン
   ========================================================= */
:root{
  /* 直書きの16進は7つ。派生は color-mix（直前行に必ずフォールバックを置く） */
  --paper:   #f5f3ee;   /* 漆喰白（ベース70%） */
  --paper-2: #ebe7df;   /* 一段沈めた面 */
  --ink:     #1c1b19;   /* 墨（25%） */
  --ink-2:   #141311;   /* 採用帯だけ一段暗くして、同じ墨のフッターと面で分ける */
  --brand:   #8c3b2e;   /* 弁柄（5%） */
  --line:    #d8d2c6;
  --white:   #fff;

  --ink-soft:  #5a564f;
  --ink-soft:  color-mix(in oklab, var(--ink) 70%, var(--paper));
  /* モルタルは 46% だとコントラスト3.23:1（AA未達）だった。
     当てている先が10〜14pxの小文字（工期・地域・建物）に集中しているので62%へ落とす */
  --mortar:    #5f5c56;
  --mortar:    color-mix(in oklab, var(--ink) 62%, var(--paper));
  --brand-dk:  #6f2d23;
  --brand-dk:  color-mix(in oklab, var(--brand) 84%, var(--ink));
  /* 固定レールの縦罫。墨地の上では消えてほしいので、白ではなく「墨の薄め」で引く。
     不透明な明色で引くと、採用帯とフッターを白い線が縦に貫く */
  --rail-line: rgba(28,27,25,.16);
  --rail-line: color-mix(in srgb, var(--ink) 16%, transparent);

  /* 版面。読み物は680pxに閉じ、写真は端まで出す二層 */
  --maxw:    1180px;
  --measure: 680px;
  --gutter:  clamp(20px, 4vw, 48px);
  --rail:    56px;
  --hdr:     64px;

  /* モーションは2値だけ。「ease」「.3s」のような既定っぽい値は主役に使わない */
  --t-hover: 120ms linear;
  --t-enter: 900ms cubic-bezier(.23, 1, .32, 1);

  --radius: 2px;   /* ほぼ角。工務店は「かっちり」が合う */

  /* 文字の段。むやみに増やすとテンプレっぽく見えるので7段に絞る。
     見出しは clamp() で可変にするので、ここには入れない。 */
  --fs-xxs: 10px;    /* 縦組みレール・ふりがな */
  --fs-xs:  11px;    /* 英字ラベル・タグ */
  --fs-s:   12.5px;  /* 注記・日付・コピーライト */
  --fs-m:   14px;    /* ナビ・項目名・補足の本文 */
  --fs-b:   15px;    /* 本文まわり */
  --fs-l:   17px;    /* 小見出し */
  --fs-xl:  19px;    /* 屋号 */

  --sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  --disp: "Zen Kaku Gothic New", var(--sans);
  /* 2026-08-15 再設計：英字の見せ場を作る2書体。
     HAFURIのWork Sans・津田左官のDINは使わない（実在2社のクローン回避） */
  --en:     "Archivo", "Helvetica Neue", Arial, sans-serif;
  --script: "Italianno", cursive;
  /* 見出しはオールド明朝（2026-08-15 村田さん「雰囲気にあわせて」→3案比較からB採用）。
     全画面写真×明朝で「壮大」を作る。本文・ナビ・ボタン・数字はゴシックのまま＝読みやすさ維持。
     他デモとの被り：Shippori Mincho（和み）・細明朝（ピアノ）・活版明朝（自社）とは別書体 */
  --mincho: "Zen Old Mincho", "Yu Mincho", "游明朝", serif;
}

/* =========================================================
   リセットと下地
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  /* stickyヘッダーの下に隠れないように（WCAG 2.2 SC 2.4.11 Focus Not Obscured） */
  scroll-padding-top: calc(var(--hdr) + 8px);
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.9;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
p{ margin:0 }
ul,ol,dl,dd{ margin:0; padding:0 }
li{ list-style:none }

h1,h2,h3{ font-family:var(--mincho); margin:0 }
h1{ font-weight:900; letter-spacing:.005em; line-height:1.3 }   /* 明朝はゴシックほど詰めない */
h2{ font-weight:900; letter-spacing:.005em; line-height:1.4 }
h3{ font-weight:700; letter-spacing:.01em; line-height:1.5 }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--white);
  padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:0 }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px }

/* 読み上げ専用 */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* =========================================================
   版面：12カラムを敷いた上で崩す
   1120pxの箱に全部そろえるのが、いちばんテンプレっぽく見える。
   だから「文字は狭く・写真は端まで」の二層にする。
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--maxw)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.layout > *      { grid-column: wide }   /* 既定は1180pxの段 */
.layout > .u-full{ grid-column: full }   /* 写真帯だけ画面端まで */
.u-read          { max-width: var(--measure) }

/* gridの子は既定が min-width:auto なので、中身が縮まず親をはみ出す。
   明示的に0を入れて横スクロール事故を防ぐ。 */
.layout > *, .g12 > *{ min-width:0 }

.g12{
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  gap: clamp(16px, 2vw, 28px);
}

.sec{ padding-block: clamp(64px, 9vw, 116px) }
.sec-2{ background:var(--paper-2) }

/* =========================================================
   文字の型
   ========================================================= */
.eyebrow{
  font-family:var(--disp); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.3em; line-height:1;
  color:var(--brand);
}
.eyebrow-l{ color:rgba(255,255,255,.72) }

.sec-title{
  font-size:clamp(26px, 3.4vw, 40px); margin-top:18px;
}
.sec-title-l{ color:var(--white) }

/* 改行の制御（2026-08-05）
   keep-all + break-word は「1行に収まらない長フレーズが任意の位置で折れる」
   （例：探して／います）ため撤去した。かわりに三段構え：
   ・.nb … 折りたくないフレーズを inline-block で確定制御（全ブラウザ）
   ・auto-phrase … Chrome/Edge は文節単位で自動改行
   ・text-wrap:pretty … 行末に1〜2文字だけ残る孤立を避ける */
.nb{ display:inline-block }
@supports (word-break: auto-phrase){
  main :is(h1,h2,h3,p,li,dd,dt){ word-break: auto-phrase }
}
p, dd, li{ text-wrap: pretty }

.lede{ margin-top:20px; color:var(--ink-soft); font-size:var(--fs-b); line-height:2 }

/* 数字を弁柄で大きく */
.n{ color:var(--brand); font-size:1.16em; letter-spacing:-.03em }

/* =========================================================
   ボタン（形の規律：角丸は 2px か 999px の二択）
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--disp); font-weight:700; font-size:var(--fs-b); letter-spacing:.04em;
  min-height:52px; padding:14px 28px;                 /* WCAG 2.5.8 の24pxを余裕でクリア */
  border-radius:var(--radius); border:1.5px solid transparent;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  cursor:pointer;
}
.btn-brand{ background:var(--brand); color:var(--white) }
.btn-brand:hover{ background:var(--brand-dk) }
.btn-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55) }
.btn-light:hover{ background:var(--white); color:var(--ink); border-color:var(--white) }
.btn-wide{ width:100% }

/* 矢印つきテキストリンク（ボタンを目立たせないほうが上質に見える） */
.tlink{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-family:var(--disp); font-weight:700; font-size:var(--fs-m); letter-spacing:.04em;
  border-bottom:1px solid var(--line); color:var(--ink);
  transition: color var(--t-hover), border-color var(--t-hover);
}
.tlink::after{ content:"→"; transition: transform var(--t-hover) }
.tlink:hover{ color:var(--brand); border-color:var(--brand) }
.tlink:hover::after{ transform:translateX(4px) }

/* =========================================================
   ヘッダー
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  view-transition-name: site-header;   /* ページ遷移で据え置く */
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  height:var(--hdr);
  width:min(var(--maxw), 100% - var(--gutter) * 2); margin-inline:auto;
}
/* スクロールで濃くなる罫線（M3）。非対応ブラウザでは最初から見えているだけ */
.site-header::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:var(--line);
}

.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; min-height:44px }
.brand-mark{
  width:26px; height:26px; background:var(--brand); flex:0 0 auto;
  clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);  /* 家型 */
}
.brand-mark.is-light{ background:var(--white) }
.brand-text{
  font-family:var(--disp); font-weight:900; font-size:var(--fs-xl); letter-spacing:.06em;
  display:flex; align-items:baseline; gap:8px; white-space:nowrap;
}
.brand-text small{ font-size:var(--fs-xxs); font-weight:500; color:var(--mortar); letter-spacing:.16em }
.brand-text.is-light{ color:var(--white) }
.brand-text.is-light small{ color:rgba(255,255,255,.62) }

.gnav{
  display:flex; gap:28px; margin-left:auto;
  font-family:var(--disp); font-weight:500; font-size:var(--fs-m); letter-spacing:.05em;
}
.gnav a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--ink-soft); transition:color var(--t-hover);
}
.gnav a:hover{ color:var(--brand) }
.gnav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -1px 0 var(--brand) }

.header-cta{ flex:0 0 auto; min-height:40px; padding:10px 20px; font-size:var(--fs-m) }

.navtoggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-left:auto; padding:0;
  background:none; border:1px solid var(--line); border-radius:var(--radius); cursor:pointer;
}
.navtoggle span{
  display:block; width:19px; height:1.5px; background:var(--ink); margin-inline:auto;
  transition: transform 200ms linear, opacity var(--t-hover);
}
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

/* =========================================================
   左右の縦組みレール
   左＝アイデンティティ（地域と創業年を常時出す）／右＝ご相談
   1180 + 56×2 = 1292 なので、1280pxでは重なる。閾値は1360px。
   ========================================================= */
.rail{
  position:fixed; top:var(--hdr); bottom:0; width:var(--rail); z-index:40;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; pointer-events:none;
}
.rail > *{ pointer-events:auto }
.rail-l{ left:0; border-right:1px solid var(--rail-line) }
.rail-r{ right:0; border-left:1px solid var(--rail-line) }

/* 創業年も地域名と同じ縦組みにそろえる。
   44pxの円に「昭和58年」は収まらず、左右に8pxはみ出していた（2026-08-14） */
.rail-txt, .rail-badge{
  writing-mode:vertical-rl; font-family:var(--disp); font-weight:700;
  font-size:var(--fs-xxs); letter-spacing:.34em; color:var(--mortar);
}
.rail-rule{ width:1px; height:clamp(40px, 10vh, 96px); background:var(--rail-line) }

.rail-cta, .rail-tel{
  writing-mode:vertical-rl; display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; padding-block:16px;
  font-family:var(--disp); font-weight:700; letter-spacing:.22em;
  transition: color var(--t-hover);
}
.rail-cta{ font-size:var(--fs-s); color:var(--brand) }
.rail-tel{ font-size:var(--fs-xs); color:var(--mortar); letter-spacing:.14em }
.rail-cta:hover, .rail-tel:hover{ color:var(--ink) }

@media (min-width:1360px){
  .rail{ display:flex }
}

/* =========================================================
   モバイルの下部固定バー（電話を親指の届く位置に置く）
   ========================================================= */
.callbar{
  position:fixed; inset:auto 0 0 0; z-index:45;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--paper); border-top:1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:56px; padding:8px 10px; text-align:center;
  font-family:var(--disp); font-weight:700; font-size:var(--fs-s); letter-spacing:.06em;
}
.callbar a + a{ border-left:1px solid var(--line) }
.callbar small{ font-size:var(--fs-xxs); font-weight:500; color:var(--mortar); letter-spacing:.04em }
.callbar .is-cta{ background:var(--brand); color:var(--white) }
.callbar .is-cta small{ color:rgba(255,255,255,.75) }
body{ padding-bottom:64px }

@media (min-width:1000px){
  .callbar{ display:none }
  body{ padding-bottom:0 }
}

/* =========================================================
   ヒーロー（G型：巨大タイポ）
   h1 を1画面目の上のほうに置くのが最大の目的。
   初版のBentoは h1 が top=661px にあり、1366×768 では画面外だった。
   ========================================================= */
.hero{ position:relative; padding-block: clamp(44px, 7vh, 84px) clamp(36px, 6vh, 68px) }
.hero-body{ position:relative; z-index:1 }
.hero h1{
  margin-top:20px;
  font-size:clamp(38px, 6.6vw, 82px);
}
/* .hero-lead / .hero-act / .hero-tel は 2026-08-15 のヒーロー簡素化で撤去した
   （リード文とCTAをヒーローから外したため。導線はヘッダー・レール・下部バー） */

/* ヒーロー写真背景（2026-08-05 村田さん指示）：
   下にあった写真帯をヒーローに統合し、見出しの背景にする。
   文字は白に反転し、墨のスクリム（左が濃い斜めグラデ）で読ませる。
   2026-08-15 フィードバック：「最初は『わっ、すげえ』となる壮大な感じに」。
   全画面（100svh−ヘッダー）に広げ、文字は地域ラベルと見出しだけに絞った。
   リード文・筆記体・SCROLL誘導・CTAはヒーローから撤去（導線はヘッダー／レール／下部バーが持つ） */
.hero.hero-photo{
  overflow:hidden;
  min-height: calc(100vh - var(--hdr));
  min-height: calc(100svh - var(--hdr));
  /* 2026-08-15 村田さん指示：文字は1行・小さめ・余白を使う。
     左上版と中央版を実見比較して「中央配置」に決定（共和木材の「中央キャッチ＋薄い下線＋余白」型） */
  align-content:center;
  padding-block: clamp(56px, 8vh, 120px);
}
.hero-photo h1{ font-size:clamp(30px, 4.4vw, 58px); white-space:nowrap }
.hero-photo .hero-body{ text-align:center }
.hero-photo .hero-body .hero-rule{ margin-inline:auto }
@media (max-width:640px){
  .hero-photo h1{ white-space:normal }   /* 幅が足りない端末では普通に折り返す */
}
/* 見出しの下で細い線がシャッと伸びる（共和木材の下線の手筋） */
.hero-rule{
  display:block; width:min(44vw, 520px); height:1px;
  margin-top:clamp(22px, 3.5vh, 38px);
  background:rgba(255,255,255,.55);
  transform-origin:left;
}
/* 写真をゆっくり寄せる（S2）ので、はみ出しをここで止める。
   止めないと 1360px 以上で写真が左右のレールの下へ漏れる */
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden }
/* 縦組みレールが出る幅では、写真はレールの内側いっぱいまで
   （レールの罫と写真の端を揃える。レールの細字を写真に重ねない） */
@media (min-width:1360px){
  .hero-bg{ inset:0 var(--rail) }
}
.hero-bg img{ width:100%; height:100%; object-fit:cover }
/* スライドショー（2026-08-15 村田さん指示：ズームしながら、しばらくしたらもう1枚へ）。
   2枚を重ねてCSSだけでクロスフェード。動きを切っている人には1枚目だけ見せる */
.hero-slide{ position:absolute; inset:0 }
.hero-slide-2{ opacity:0 }
/* スクリム：見出しが中央配置になったので、左寄りの斜めグラデをやめて左右対称に */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:rgba(28,27,25,.46);
  background:color-mix(in srgb, var(--ink) 46%, transparent);
}
.hero-photo h1{ color:var(--white) }
.hero-photo .n{
  color:#d3b4af;
  color:color-mix(in oklab, var(--brand) 38%, var(--white));
}

/* 下層ページの見出し。トップのヒーローより一段小さくする */
.phero{ position:relative; padding-block: clamp(36px, 5vh, 68px) clamp(24px, 3.5vh, 44px) }
.phero h1{ margin-top:18px; font-size:clamp(30px, 4.6vw, 56px) }
.phero .lede{ margin-top:22px }
/* 見出しの下の余白と .sec の上の余白が二重に積まれ、1366×768では
   初期画面の19%が空白帯になっていた。下層ページだけ詰める */
.phero + .sec{ padding-top: clamp(24px, 3vw, 40px) }

/* =========================================================
   フルブリード写真帯（S2：真パララックス）
   ========================================================= */
.band-in{ overflow:hidden; aspect-ratio: 21 / 9; background:var(--paper-2) }
.band-in img{ width:100%; height:100%; object-fit:cover }
/* ヒーロー写真と同じ扱い。レールが出る幅では写真をレールの内側で止める。
   止めないと、右レールの電話番号が写真（about は空）の上に載って読めない */
@media (min-width:1360px){
  .band-in{ margin-inline:var(--rail) }
}

/* =========================================================
   横スクロール施工ギャラリー（S1）
   土台＝ふつうに横スワイプできる帯。
   対応ブラウザ かつ 動きOK かつ 900px以上 のときだけピン留めに切り替える。
   ========================================================= */
.gal{ padding-block: clamp(64px, 9vw, 116px) }
.gal-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 32px }
.gal-note{ font-size:var(--fs-s); color:var(--mortar) }

.gal-scroller{
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding-inline: var(--gutter);
  margin-top: clamp(32px, 4vw, 56px);
  scrollbar-width:thin;
}
.gal-track{
  display:flex; gap: clamp(16px, 2vw, 28px);
  width:max-content; padding-block:4px;
  padding-inline-end: var(--gutter);
}
.gal-item{ flex:0 0 min(76vw, 500px); scroll-snap-align:center }
.gal-item > a{ display:block }
.gal-fig{
  display:block; overflow:hidden; aspect-ratio:16/10; background:var(--paper-2);
  border-radius:var(--radius);
}
.gal-fig img{ width:100%; height:100%; object-fit:cover; transition: transform 400ms cubic-bezier(.23,1,.32,1) }
.gal-item > a:hover .gal-fig img{ transform:scale(1.03) }
.gal-cap{ display:block; margin-top:16px }
.gal-cap b{
  display:inline-block; font-family:var(--disp); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.16em; color:var(--brand);
  border:1px solid var(--brand); border-radius:999px; padding:3px 12px;
}
.gal-cap strong{ display:block; margin-top:10px; font-family:var(--disp); font-weight:700; font-size:var(--fs-l); line-height:1.5 }
.gal-cap i{ display:block; margin-top:6px; font-style:normal; font-size:var(--fs-s); color:var(--mortar); letter-spacing:.04em }

/* =========================================================
   施工事例（works.html：2カラム交互。単純な左右反転にせず幅も変える）
   ========================================================= */
.case{
  align-items:center;
  padding-block: clamp(40px, 5vw, 64px);
  border-top:1px solid var(--line);
}
.case:first-of-type{ border-top:0; padding-top:0 }
/* grid-row を明示するのが要点。
   写真を右（6/13）に置くと、本文（1/6）は「もう通り過ぎた列」になるため、
   gridの既定の詰め方（sparse）では次の行へ落ちてしまい、横に並ばない。 */
.case-fig{
  grid-row:1; grid-column:1 / 8;
  overflow:hidden; aspect-ratio:16/10; border-radius:var(--radius); background:var(--paper-2);
}
.case-fig img{ width:100%; height:100%; object-fit:cover }
.case-body{ grid-row:1; grid-column:8 / 13 }
/* 偶数は左右を入れ替え、かつ幅も変える（単純な鏡像にしない） */
.case:nth-of-type(even) .case-fig{ grid-column:6 / 13 }
.case:nth-of-type(even) .case-body{ grid-column:1 / 6 }

.case-tag{
  display:inline-block; font-family:var(--disp); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.16em; color:var(--brand);
  border:1px solid var(--brand); border-radius:999px; padding:3px 13px;
}
.case-body h3{ font-size:clamp(19px, 2.2vw, 26px); margin-top:16px }
.case-body > p{ margin-top:14px; color:var(--ink-soft); font-size:var(--fs-b) }
.case-meta{
  display:flex; flex-wrap:wrap; gap:0 32px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}
.case-meta div{ display:flex; flex-direction:column }
/* 工期・地域・建物・完成は、この見本でいちばん読ませたい情報なので10pxまで落とさない */
.case-meta dt{ font-family:var(--disp); font-weight:700; font-size:var(--fs-xs); letter-spacing:.16em; color:var(--mortar) }
.case-meta dd{ font-family:var(--disp); font-weight:700; font-size:var(--fs-b); margin-top:2px }

/* カードから詳細ページへ。写真とタイトルの両方を押せるようにする。
   写真側の <a> は読み上げでは同じリンクの重複になるので aria-hidden で外してある */
.case-fig > a{ display:block; height:100% }
.case-body h3 a{ transition: color var(--t-hover) }
.case-body h3 a:hover{ color:var(--brand) }

/* =========================================================
   施工事例の詳細（works-*.html）
   図版は一覧のカードと同じ 16:10。形が変わらないので、
   ページ遷移の共有要素モーフ（S3）が歪まずに繋がる。
   新しい動きは足していない（見せ場3つの上限のため）。
   ========================================================= */
/* 一覧へ戻る導線。tlink の矢印を order で頭に回して左向きにする */
.cd-back{ margin-bottom:16px }
.cd-back::after{ content:"←"; order:-1 }
.cd-back:hover::after{ transform:translateX(-4px) }

/* 本文中に置く写真の箱。詳細ページの主写真・サブ写真・about・recruit で共用する。
   トーン（saturate .94 / contrast 1.02）は recrop.py が書き出しのときに焼いてあるので、
   CSSの filter は当てない（当てると二重にかかる） */
.figbox{ overflow:hidden; aspect-ratio:16/10; border-radius:var(--radius); background:var(--paper-2) }
.figbox img{ width:100%; height:100%; object-fit:cover }

.figblock{ margin-top: clamp(36px, 4.5vw, 60px) }
.figblock figcaption{ margin-top:14px; font-size:var(--fs-s); color:var(--mortar); letter-spacing:.02em }

/* 読み物の小見出し。sec-title より一段小さく、重さは h3 にそろえる */
.cd-h2{ font-weight:700; font-size:clamp(18px, 2vw, 23px); margin-top: clamp(34px, 4vw, 48px) }
.cd-h2:first-child{ margin-top:0 }

/* 前後の事例（5件で循環） */
.cd-nav{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top: clamp(24px, 3vw, 36px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cd-nav a{ display:flex; flex-direction:column; gap:9px; padding-block:26px; min-height:44px }
.cd-nav a:first-child{ padding-right: clamp(18px, 2.4vw, 32px) }
.cd-nav a + a{
  border-left:1px solid var(--line); padding-left: clamp(18px, 2.4vw, 32px);
  align-items:flex-end; text-align:right;
}
.cd-nav small{
  font-family:var(--disp); font-weight:700; font-size:var(--fs-xxs);
  letter-spacing:.18em; color:var(--mortar);
}
.cd-nav b{
  font-family:var(--disp); font-weight:700; font-size:var(--fs-m); line-height:1.7;
  transition: color var(--t-hover);
}
.cd-nav a:hover b{ color:var(--brand) }
.cd-all{ margin-top:26px }

@media (max-width:640px){
  .cd-nav{ grid-template-columns:1fr }
  .cd-nav a:first-child{ padding-right:0; padding-bottom:22px }
  .cd-nav a + a{
    border-left:0; border-top:1px solid var(--line); padding-left:0;
    align-items:flex-start; text-align:left;
  }
}

/* =========================================================
   罫線区切りの縦積みリスト＋左に番号
   2026-08-16 から 404 のページ内リンク一覧だけで使う。
   index の「できること」は、番号・見出し・説明が横に散って
   粗く見えたため、この型をやめて .can（下の節）へ移行した。
   ========================================================= */
.can-list{ margin-top: clamp(32px, 4vw, 52px); border-top:1px solid var(--line) }
.can-list li{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap: clamp(8px, 2vw, 28px);
  align-items:baseline; padding-block: clamp(30px, 3.6vw, 46px);
  border-bottom:1px solid var(--line);
}
/* 番号は極細の大型英字数字（ゴースト）。2026-08-15：11pxの弁柄番号は
   行が薄く「安っぽい」評価だったため、番号を面の主役に格上げした */
.can-no{
  grid-column:1 / 3;
  font-family:var(--en); font-weight:200; font-size:clamp(38px, 4.2vw, 64px);
  letter-spacing:.02em; line-height:1;
  color:rgba(28,27,25,.20);
  color:color-mix(in srgb, var(--ink) 20%, transparent);
}
.can-list h3{ grid-column:3 / 6; font-size:clamp(20px, 2vw, 26px) }
.can-list p{ grid-column:6 / 13; color:var(--ink-soft); font-size:var(--fs-b) }
.can-note{ margin-top:30px; color:var(--ink-soft); font-size:var(--fs-m); line-height:2 }

/* =========================================================
   できること（index）：写真×ウィジェット4枠
   2026-08-16 作り直し。写真（d-shinchiku＝足場ごしの小屋組み）は
   見出しからノートまでの全行に全幅で敷き、スクリムを縦グラデーションにして
   場所ごとに役割を変える：見出し＝濃いめ（可読性優先・写真は気配）／
   カードまわり＝薄め（写真が「写真」として見える）／ノート＝また濃いめ。
   グラデ両端は漆喰白ベタ＝紙地（.secの余白）と縫い目なくつながる。
   カードは不透明の面＋ヘアライン。立体感は「カードが無地・地が写真」の差で
   出す（影は使わない）。直後が墨地のAREAなので、ここは暗くしない。
   ========================================================= */
.can .sec-head{ grid-row:1; position:relative; z-index:1; margin-bottom: clamp(32px, 4vw, 52px) }
/* 写真：.u-full（全幅の段）で行1〜3（見出し〜ノート）に重ねる。
   .layout は行を宣言しない暗黙グリッドなので grid-row:1/-1 は効かない＝ 1/4 と明示 */
.can-bg{
  grid-row:1 / 4;
  position:relative; overflow:hidden; pointer-events:none;
}
.can-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* 縦グラデのスクリム（手筋は .hero-bg::after と同じ）。数値は現物確認で決定：
   88%＝大見出しが小屋組みの線に負けない濃さ／56%＝木の色と骨組みが
   「写真」として読める薄さ（PCはカード行が26〜74%、SPは17〜84%に乗る） */
.can-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    #f5f3ee 0%, rgba(245,243,238,.88) 16%,
    rgba(245,243,238,.56) 30%, rgba(245,243,238,.56) 72%,
    rgba(245,243,238,.88) 88%, #f5f3ee 100%);
  background:linear-gradient(180deg,
    var(--paper) 0%, color-mix(in srgb, var(--paper) 88%, transparent) 16%,
    color-mix(in srgb, var(--paper) 56%, transparent) 30%,
    color-mix(in srgb, var(--paper) 56%, transparent) 72%,
    color-mix(in srgb, var(--paper) 88%, transparent) 88%,
    var(--paper) 100%);
}
.can-grid{
  grid-row:2; position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap: clamp(14px, 1.8vw, 24px);
}
/* 枠＝面＋ヘアライン。中は左＝和文見出し＋説明／右＝特大ゴースト番号。
   説明文は1行で右側が空くため、番号に横幅を使わせて「意図した余白」に変える */
.can-grid li{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  column-gap: clamp(18px, 2.4vw, 36px); align-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding: clamp(22px, 2.6vw, 32px) clamp(22px, 2.8vw, 40px);
}
/* 番号は共通の .can-no（極細大型英字ゴースト）を右列いっぱいに */
.can-grid .can-no{
  grid-column:2; grid-row:1 / 3; align-self:center;
  font-size:clamp(48px, 4.8vw, 76px); margin:0;
}
.can-grid h3{ grid-column:1; grid-row:1; align-self:end; font-size:clamp(19px, 1.9vw, 24px) }
/* 見出しの下に弁柄の短罫。sec-rule（36px）の縮小形で、見出しシステムと同じDNA */
.can-grid h3::after{
  content:""; display:block; width:20px; height:2px; background:var(--brand);
  margin-top:12px;
}
.can-grid p{
  grid-column:1; grid-row:2; margin-top:10px;
  color:var(--ink-soft); font-size:var(--fs-b); line-height:1.9;
}
.can .can-note{ grid-row:3; position:relative; z-index:1; margin-top: clamp(28px, 3.5vw, 44px) }

/* =========================================================
   数字（about）：等幅3カードにせず、段違いに置く
   ========================================================= */
.figs{ margin-top: clamp(32px, 4vw, 56px) }
.fig-n{ display:flex; flex-direction:column }
/* 2026-08-15：段違い配置をやめて上端を揃えた（村田さん指摘「20pxだけ下がっていて違和感」。
   意図した段差でも、ズレに見えるならデザインの負け）。indexの墨地の数字列と同じ横一列 */
.fig-n:nth-child(1){ grid-column:1 / 5 }
.fig-n:nth-child(2){ grid-column:5 / 9 }
.fig-n:nth-child(3){ grid-column:9 / 13 }
.fig-num{
  font-family:var(--disp); font-weight:900; font-size:clamp(40px, 5.4vw, 68px);
  color:var(--brand); letter-spacing:-.03em; line-height:1.05;
}
.fig-num span{ font-size:.38em; color:var(--ink); margin-left:4px; letter-spacing:0 }
/* 説明文だけに当てる。`.fig-n p` だと詳細度(0,1,1)が .fig-num(0,1,0) に勝ち、
   数字まで14pxの墨グレーで描かれてしまう */
.fig-n > p:not(.fig-num){ margin-top:14px; font-size:var(--fs-m); color:var(--ink-soft) }

/* =========================================================
   読み物ブロック（about導線）
   ========================================================= */
.read{ position:relative }
.read .lede{ margin-top:24px }
.read .tlink{ margin-top:30px }

/* 読み物＋実物写真の2カラム。
   右側の空白は線画や図版でなく、現場の実写真で埋める（2026-08-05 村田さん指示） */
.read-2col{ display:grid; gap: clamp(24px, 4vw, 56px); align-items:center }
@media (min-width:1100px){
  .read-2col{ grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr) }
}
.read-photo{ margin:0 }
.read-photo img{ width:100%; height:auto; display:block; border-radius:var(--radius) }

/* 本文中の数字を右列に大きく段違いで置く（写真や図版でなく、文字の再配置で埋める） */
.read-figs{ display:flex; flex-direction:column; gap: clamp(18px, 2.6vw, 30px) }
.read-figs .nfig:nth-child(2){ margin-left: clamp(20px, 4vw, 64px) }
.read-figs .nfig:nth-child(3){ margin-left: clamp(40px, 8vw, 128px) }
.nfig-t{ margin-top:2px; font-size:var(--fs-m); color:var(--ink-soft) }

/* ご相談：電話番号を右列の主役として大きく置く */
.cta-telbox{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block: clamp(22px, 3vw, 38px);
}
.cta-telbox .cta-tel{ margin-top:0 }
.cta-telbox .cta-tel a{ font-size:clamp(34px, 4.2vw, 58px) }

/* =========================================================
   採用の帯（墨地・フルブリード）
   ========================================================= */
/* トップでは直後にフッター（同じ墨地）が続く。1pxの白罫では境界が見えなかったので、
   下端を弁柄4pxで切り、地色も一段落として面そのものを分ける（2026-08-14） */
.recruit{
  position:relative; background:var(--ink-2); color:var(--white); overflow:hidden;
  border-bottom:4px solid var(--brand);
}
.recruit-in{ position:relative; z-index:1; padding-block: clamp(64px, 9vw, 112px) }
.recruit p{ color:rgba(255,255,255,.82) }
.recruit-points{ margin-top:26px; display:flex; flex-direction:column; gap:10px }
.recruit-points li{ position:relative; padding-left:22px; font-size:var(--fs-b); color:rgba(255,255,255,.9) }
.recruit-points li::before{
  content:""; position:absolute; left:0; top:.78em; width:10px; height:1.5px; background:var(--brand);
}
.recruit .btn{ margin-top:32px }
/* ベンガラ格子（配色名の由来）を薄く敷く。
   SVGを background-image でタイルする（<img>だとcurrentColorが効かないため、
   SVG側は白で塗り、濃さはここのopacityで決める）

   ⚠️ SVGは 120×240 で描いてある。実寸のままタイルすること。
      background-size:auto 100% だと帯の高さに合わせて3〜4倍に引き伸ばされ、
      桟が22〜29px幅の縦スラブになる（＝格子ではなく柵に見える） */
.deco-koushi{
  position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:url("../images/deco-koushi.svg") repeat left top;
  background-size:120px 240px;
}

/* =========================================================
   ご相談
   ========================================================= */
.cta-tel{ display:flex; flex-direction:column; gap:4px; margin-top:28px }
.cta-tel a{
  font-family:var(--disp); font-weight:900; font-size:clamp(30px, 4.4vw, 52px);
  letter-spacing:.01em; line-height:1.15; transition:color var(--t-hover);
}
.cta-tel a:hover{ color:var(--brand) }
.cta-tel span{ font-size:var(--fs-s); color:var(--mortar) }

/* 会社概要・募集要項などの定義リスト */
.deflist{ margin-top:clamp(28px,3.5vw,44px); border-top:1px solid var(--line) }
.deflist > div{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:6px clamp(16px,2vw,28px);
  padding-block:18px; border-bottom:1px solid var(--line);
}
.deflist dt{
  grid-column:1 / 4;
  font-family:var(--disp); font-weight:700; font-size:var(--fs-m); letter-spacing:.08em; color:var(--mortar);
}
.deflist dd{ grid-column:4 / 10; font-size:var(--fs-b) }
/* 項目の中身がリンク1つだけのときは、行の高さぶんしか当たり判定がない。
   押しやすいよう上下に余白を足す（WCAG 2.5.8） */
.deflist dd a{
  display:inline-block; padding-block:4px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);
  transition: color var(--t-hover), text-decoration-color var(--t-hover);
}
.deflist dd a:hover{ color:var(--brand); text-decoration-color:var(--brand) }

/* フォーム */
.form{ display:flex; flex-direction:column; gap:18px; margin-top:8px }
.field{ display:flex; flex-direction:column; gap:7px }
.field label{ font-family:var(--disp); font-weight:700; font-size:var(--fs-m); letter-spacing:.06em }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink);   /* 16px未満だとiOSで拡大する */
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; width:100%; min-height:52px;
  transition: border-color var(--t-hover);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brand) }
.field textarea{ resize:vertical; field-sizing:content }
.form-note{ font-size:var(--fs-m); color:var(--brand); min-height:1.4em }

/* ご相談ページ：左にフォーム、右に電話と対応エリア。
   フォームは680pxで閉じるので、それだけを縦に積むと1366pxでは右に700px空く。
   .read-2col（1100pxで割る）を流用しないのは、右列に電話番号を大きく置く型なので、
   レールが出る幅（1360px）と歯を合わせたいため。それ未満は今までどおり縦積み。 */
.contact-2col{ display:grid; gap: clamp(44px, 6vw, 72px) }
.contact-2col .cta-telbox{ margin-top:26px }

@media (min-width:1360px){
  /* HTMLの並びは 電話 → フォーム → 対応エリア のまま（縦積みの読み順を変えない）。
     並べ替えはここで行と列を明示してやる（.case と同じ理由で、
     gridの既定の詰め方では「もう通り過ぎた列」に戻れず次の行へ落ちる） */
  .contact-2col{
    align-items:start;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 64px);
  }
  .contact-2col > .c-form{ grid-column:1; grid-row:1 / span 2 }
  .contact-2col > .c-tel { grid-column:2; grid-row:1 }
  .contact-2col > .c-area{ grid-column:2; grid-row:2 }
  /* 右列は440px前後しかない。定義リストは項目名を上に積む（860px以下と同じ形） */
  .contact-2col .deflist > div{ grid-template-columns:1fr; gap:2px }
  .contact-2col .deflist dt, .contact-2col .deflist dd{ grid-column:1 / -1 }
}

/* =========================================================
   フッター
   ========================================================= */
.site-footer{
  background:var(--ink); color:rgba(255,255,255,.75); padding-block:52px 44px;
  /* 採用帯（墨地）との境界は、採用帯側の弁柄4px＋地色の差でつけている。
     ここに置いていた1pxの白罫は、どちらの面でも見えなかったので外した（2026-08-14） */
}
.foot-top{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap }
.fnav{
  display:flex; flex-wrap:wrap; gap:8px 24px;
  font-family:var(--disp); font-weight:500; font-size:var(--fs-m); letter-spacing:.05em;
}
.fnav a{
  display:inline-flex; align-items:center; min-height:44px;
  color:rgba(255,255,255,.75); transition:color var(--t-hover);
}
.fnav a:hover{ color:var(--white) }
.copy{
  margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--fs-s); letter-spacing:.06em; text-align:center; color:rgba(255,255,255,.55);
}

/* 見本を見た人がPageCraftへ戻れる導線（デモ共通） */
.democredit{
  text-align:center; margin-top:16px; font-size:var(--fs-s); line-height:2.1;
  color:rgba(255,255,255,.6); letter-spacing:.04em;
}
/* 文中のリンクなので WCAG 2.5.8 の対象外だが、押しやすいよう上下に余白を足す */
.democredit a{
  display:inline-block; padding-block:4px;
  color:#e6ded6; text-decoration:underline; text-underline-offset:3px;
}
.democredit a:hover{ color:var(--white) }
.democredit .dcbtn{
  display:inline-flex; align-items:center; min-height:44px; margin-top:10px; padding:11px 22px;
  text-decoration:none; border:1px solid rgba(255,255,255,.34); border-radius:999px;
  color:var(--white); letter-spacing:.06em;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.democredit .dcbtn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.6) }

/* =========================================================
   2026-08-15 全面再設計（基準サイト＝HAFURI・味つけ＝津田左官）
   村田さん評価「AIで作った感・テンプレっぽい・チープ」への回答。
   足したのは4つの語彙：
   ① 見出しシステム（EN大ラベル＋和文見出し＋弁柄の短罫）… 全セクションで繰り返す
   ② 英字の見せ場（ゴースト見出し・筆記体の重ね・縦書きEN）
   ③ 墨地×滋賀県境線画の場面転換（deco-shiga.svg は国土数値情報を加工した実物由来）
   ④ 縦書きの和文キャッチ×写真
   観察の記録は ../../参考観察.md「追加観察（2026-08-15）」
   ========================================================= */

/* ---------- ① 見出しシステム ---------- */
.sec-en{
  font-family:var(--en); font-weight:600; font-size:clamp(13px, 1.2vw, 15px);
  letter-spacing:.34em; line-height:1; text-transform:uppercase;
  color:var(--brand);
}
.sec-en span{
  font-family:var(--disp); font-weight:500; font-size:var(--fs-xs);
  letter-spacing:.2em; color:var(--mortar); margin-left:14px; text-transform:none;
}
.sec-head .sec-title{ margin-top:14px }
.sec-rule{ display:block; width:36px; height:2px; background:var(--brand); margin-top:22px }
/* 中央揃えの型（HAFURI）。ギャラリー・できること等の「一覧もの」で使う */
.sec-head--c{ display:flex; flex-direction:column; align-items:center; text-align:center }
/* 墨地の上（.sec-dark と採用帯）ではラベルを少し明るく */
:is(.sec-dark, .recruit) .sec-en{ color:#c9948b; color:color-mix(in oklab, var(--brand) 52%, var(--white)) }
:is(.sec-dark, .recruit) .sec-en span{ color:rgba(255,255,255,.55) }
:is(.sec-dark, .recruit) .sec-rule{ background:color-mix(in oklab, var(--brand) 70%, var(--white)) }

/* ---------- ② 英字の見せ場 ---------- */
/* ENゴースト見出し（HAFURIの薄グレー大英字）。読み物の背面ではなく直前に置く */
.ghost{
  font-family:var(--en); font-weight:200; text-transform:uppercase;
  font-size:clamp(44px, 6.4vw, 92px); letter-spacing:.01em; line-height:1.02;
  color:rgba(28,27,25,.10);
  color:color-mix(in srgb, var(--ink) 10%, transparent);
  user-select:none; pointer-events:none;
}
/* 筆記体の重ね（津田左官の署名）。見出しの右肩に沿わせる */
.script{
  font-family:var(--script); font-weight:400; line-height:1;
  color:var(--brand); transform:rotate(-6deg);
  letter-spacing:.01em; white-space:nowrap;
}
/* ヒーローの筆記体（Since 1983）は 2026-08-15 フィードバックで撤去。
   筆記体の重ねは職人セクション（.crafts-script）の1箇所だけに絞った */
/* 縦書きEN（セクション脇に立てる） */
.tate-en{
  writing-mode:vertical-rl; font-family:var(--en); font-weight:500;
  font-size:var(--fs-xs); letter-spacing:.32em; text-transform:uppercase;
  color:var(--mortar);
}
.sec-dark .tate-en{ color:rgba(255,255,255,.45) }

/* ---------- ④ 縦書きの和文キャッチ ---------- */
.tate-catch{
  writing-mode:vertical-rl; font-family:var(--mincho); font-weight:700;
  font-size:clamp(15px, 1.4vw, 18px); line-height:2.2; letter-spacing:.3em;
  color:var(--ink);
}

/* ---------- 自己紹介2カラム（HAFURIの型：ゴースト見出し＋両端揃え本文｜写真ブリード｜縦書き） ---------- */
.intro{ position:relative }
.intro-grid{
  display:grid; gap: clamp(28px, 4vw, 56px);
  align-items:center;
}
@media (min-width:1100px){
  .intro-grid{
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr) auto;
  }
}
.intro-copy .lede{ text-align:justify }
.intro-photo{ margin:0 }
.intro-photo img{ width:100%; height:auto; border-radius:var(--radius) }
.intro-tate{ display:none }
@media (min-width:1100px){
  .intro-tate{ display:block; justify-self:end }
}

/* 両端揃え（印刷物の落ち着き）。和文はjustifyでも字間が破綻しにくい */
.jtext{ text-align:justify }

/* ゴースト見出しは次のグリッドに少し食い込ませる（浮いて見えないように）。
   スマホでは食い込みをやめる（ENラベルがゴーストの2行目に重なって読みにくい） */
.intro .ghost{ margin-bottom: calc(clamp(18px, 2.6vw, 34px) * -1) }
@media (max-width:640px){
  .intro .ghost{ margin-bottom:10px }
}

/* 墨地セクションの本文は地図と重ならない幅に閉じる */
.dark-in{ position:relative; z-index:1; max-width:820px }
.sec-dark .lede{ max-width:36em }

/* ---------- ③ 墨地×県境線画の場面転換 ---------- */
.sec-dark{
  position:relative; background:var(--ink); color:var(--white); overflow:hidden;
}
.sec-dark .sec-title{ color:var(--white) }
.sec-dark .lede{ color:rgba(255,255,255,.82) }
.sec-dark .tlink{ color:var(--white); border-color:rgba(255,255,255,.4) }
.sec-dark .tlink:hover{ color:#d8aca4; color:color-mix(in oklab, var(--brand) 40%, var(--white)); border-color:currentColor }
/* 県境線画（deco-map）は 2026-08-15 フィードバックで撤去。
   「地図の背景は津田左官の丸パクリ感がある」（村田さん）。
   かわりに好評だった縦書きENを右端に立てる（.dark-tate） */
.dark-tate{
  position:absolute; right:clamp(20px, 4vw, 64px); top:50%; transform:translateY(-50%);
  font-size:clamp(12px, 1.2vw, 15px); letter-spacing:.5em;
}
@media (max-width:860px){
  .dark-tate{ display:none }   /* 狭い幅では本文に被るので出さない */
}
/* 墨地の上の数字（弁柄そのままでは1.8:1で沈む） */
.sec-dark .fig-num{ color:#d8aca4; color:color-mix(in oklab, var(--brand) 40%, var(--white)) }
.sec-dark .fig-num span{ color:rgba(255,255,255,.85) }
.sec-dark .nfig-t{ color:rgba(255,255,255,.66) }
/* 墨地では数字を横一列に（帯の中で段違いは窮屈） */
.dark-figs{
  display:flex; flex-wrap:wrap; gap: clamp(24px, 4.5vw, 72px);
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top:1px solid rgba(255,255,255,.16);
}

/* ---------- 縦書き見出し×写真（職人セクション） ---------- */
.crafts{ position:relative }
.crafts-grid{
  display:grid; gap: clamp(24px, 4vw, 48px);
  align-items:stretch;
}
@media (min-width:900px){
  .crafts-grid{ grid-template-columns: auto minmax(0, 1fr) minmax(0, 46%) }
}
.crafts-title{
  writing-mode:vertical-rl; font-family:var(--mincho); font-weight:900;
  font-size:clamp(30px, 3.6vw, 52px); line-height:1.4; letter-spacing:.14em;
  margin:0;
}
@media (max-width:899px){
  .crafts-title{ writing-mode:horizontal-tb; font-size:clamp(26px, 6vw, 36px) }
}
.crafts-body{ align-self:center }
.crafts-body .lede{ text-align:justify }
.crafts-photo{ margin:0; position:relative }
.crafts-photo img{ width:100%; height:100%; object-fit:cover; border-radius:var(--radius) }
/* 筆記体を写真の左肩に重ねる */
.crafts-script{
  position:absolute; top:-0.42em; left:clamp(-18px, -2vw, -34px); z-index:1;
  font-size:clamp(52px, 6vw, 96px);
}
/* 縦積みになる幅では、直前のリンクに筆記体が被らないよう写真側に間を取る */
@media (max-width:899px){
  .crafts-photo{ margin-top: clamp(30px, 8vw, 48px) }
  .crafts-script{ top:-0.52em; left:0; font-size:clamp(44px, 11vw, 64px) }
}

/* スクロール誘導（SCROLL＋伸縮線）は 2026-08-15 フィードバックで撤去
   （「壮大なファーストビューに文字は要らない」） */

/* =========================================================
   動き
   ------------------------------------------------------------------
   事故が構造的に起きない書き方にしてある：
   opacity:0 は「JSが動いている（.js-enter が付いている）」の内側にしか
   書かない。だからJSが動かない環境でも要素が消えることはない。

   ★ 2026-08-15：prefers-reduced-motion のガードは全て外した（村田さん指示）。
   OSの「アニメーション効果」オフの環境でデモが完全に静止して見え、
   「動きがない」と評価された。営業デモは動きそのものが商材であり、
   実在の参考サイト（津田左官・HAFURI等）もこの設定に追従していない。
   本番納品時に reduce 対応を入れるかはお客様と相談して決める。
   ========================================================= */

/* ① 土台：何も起きなくても全部見える */
.enter{ opacity:1; transform:none }

/* ② 入場（M1）：IntersectionObserver で一発トリガー＋transition
      2026-08-14に animation-timeline:view() のスクラブから乗り換えた。
      スクラブはスクロールを途中で止めると半端な透明度のまま固まり、
      イージングの「決まり」が出ない（理由は ../../説明.md に記録）。
      .js-enter は main.js が付ける。付かない＝JSが動いていない環境では①のまま。 */
  .js-enter .enter{
    opacity:0; transform:translateY(18px);
    transition: opacity var(--t-enter), transform var(--t-enter);
    transition-delay: var(--d, 0ms);
  }
  .js-enter .enter.is-in{ opacity:1; transform:none }

  /* 緩急：同じ行・同じグリッドに並ぶものは90msずつ遅らせる。
     一斉に出ると、中身より先に「一律に動いている」ことが見えてしまう */
  :is(.read-2col, .contact-2col, .figs, .can-grid, .gal-track) > .enter:nth-child(2){ --d: 90ms }
  :is(.read-2col, .contact-2col, .figs, .can-grid, .gal-track) > .enter:nth-child(3){ --d: 180ms }
  :is(.read-2col, .contact-2col, .figs, .can-grid, .gal-track) > .enter:nth-child(n+4){ --d: 270ms }

/* ③ 写真だけ語彙を変える：文字はフェード、写真は左から布をめくるワイプ。
      手筋の出どころは有限会社津田左官工業所（../../../資料/デザイン参考サイト.md §1）。
      写真そのものが .enter のときは上げない＝ワイプ1語彙で出す。

      ⚠️ 切るのは「見張っている要素の内側」だけにすること。
         IntersectionObserver は要素自身の clip も面積に数えるので、
         見張っている要素そのものを inset(0 100% 0 0) で切ると面積ゼロになり、
         いつまでも交差しない＝自分で自分のトリガーを潰す。
         だから写真の箱が .enter 自身のときは、箱ではなく中の <img> を切る。 */
  .js-enter .enter :is(.case-fig, .figbox, .read-photo, .gal-fig),
  .js-enter .enter:is(.case-fig, .figbox, .read-photo, .gal-fig) img{
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--t-enter);
    transition-delay: var(--d, 0ms);
  }
  .js-enter .enter:is(.case-fig, .figbox, .read-photo, .gal-fig){
    transform:none;
    transition: opacity 500ms cubic-bezier(.23, 1, .32, 1);
    transition-delay: var(--d, 0ms);
  }
  .js-enter .enter.is-in :is(.case-fig, .figbox, .read-photo, .gal-fig),
  .js-enter .enter.is-in:is(.case-fig, .figbox, .read-photo, .gal-fig) img{
    clip-path: inset(0);
  }

/* ④ ヘッダー罫線（M3）：スクロール0→64pxで濃くなる */
@supports (animation-timeline: scroll()){
  @keyframes hdr-rule{ from{ opacity:0 } to{ opacity:1 } }
  .site-header::after{
    animation: hdr-rule linear both;
    animation-timeline: scroll(root);
    animation-range: 0 64px;
  }
}

/* ⑤ ヒーロー（S2の復旧）：写真がゆっくり寄る＋見出しが順に立ち上がる
      2026-08-05に写真帯をヒーローへ統合したとき、S2の対象が about.html の
      .band-in だけになり、トップの第一画面から動きが消えていた（2026-08-14に発見）。
      スクロール連動ではなく時間で動かすので、開いた瞬間に一度だけ決まる。
      JSは要らない。
      2026-08-16：ズームを 24s → 15s →（同日さらに「あと若干だけ速く」）→ 12s。
      倍率1.05は据え置きで、秒数だけで速さを作っている。 */
  @keyframes hero-zoom{
    from{ transform:scale(1) }
    to  { transform:scale(1.05) }
  }
  .hero-bg img{ animation: hero-zoom 12s cubic-bezier(.4, 0, .6, 1) infinite alternate }

  /* スライドの入れ替え：16秒周期。7.5秒ずつ見せて、1秒で溶けるように交代。
     ズーム（上のhero-zoom）は各スライドの<img>が独立に持っているので、
     切り替わった先も「寄っている途中」の絵になる */
  @keyframes hero-fade-a{
    0%{ opacity:1 } 47%{ opacity:1 } 53%{ opacity:0 } 97%{ opacity:0 } 100%{ opacity:1 }
  }
  @keyframes hero-fade-b{
    0%{ opacity:0 } 47%{ opacity:0 } 53%{ opacity:1 } 97%{ opacity:1 } 100%{ opacity:0 }
  }
  .hero-slide{ animation: hero-fade-a 16s linear infinite }
  .hero-slide-2{ animation-name: hero-fade-b }

  @keyframes hero-rule-in{
    from{ transform:scaleX(0) }
    to  { transform:scaleX(1) }
  }

  @keyframes hero-in{
    from{ opacity:0; transform:translateY(14px) }
    to  { opacity:1; transform:none }
  }
  .hero-photo .hero-body > *{ animation: hero-in var(--t-enter) both }
  .hero-photo .hero-body > *:nth-child(2){ animation-delay:120ms }
  .hero-photo .hero-body > *:nth-child(3){ animation-delay:240ms }
  .hero-photo .hero-body > *:nth-child(4){ animation-delay:360ms }
  /* 見出し下の線：フェードでなく、文字が立ち上がったあと左からシャッと伸びる。
     hero-in（上の > * 指定）より後ろに書いて上書きする */
  .hero-photo .hero-body > .hero-rule{
    animation: hero-rule-in 1000ms cubic-bezier(.77, 0, .18, 1) 560ms both;
  }

/* ⑥ フルブリード写真帯のドリフト（about.html の .band-in） */
@supports (animation-timeline: view()){
    @keyframes band-drift{
      from{ transform:translateY(-12%) }
      to  { transform:translateY(0) }
    }
    .band-in img{
      height:124%;
      animation: band-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
}

/* ⑦ 横スクロールギャラリーのピン留め（S1）
      モバイルでは触るほうが自然なので、900px以上でだけ切り替える。
      見出しもピンの中に入れて、写真が流れているあいだも文脈が消えないようにする。

      ⚠️ .gal-stage の高さは「ピンの1画面 ＋ 横に動かしたい距離」。
         写真を増やしたら、ここも 1枚につき +22vh を目安に伸ばすこと。
         短すぎると一瞬で流れ切り、長すぎるとスクロールを取られた感じになる。 */
@supports (animation-timeline: view()){
  @media (min-width:900px){
    .gal-stage{
      height:170vh;                    /* = 100vh + 写真4枚ぶん */
      view-timeline-name: --gal;
      view-timeline-axis: block;
      /* ピンは top:var(--hdr) で止まるのに、タイムラインは画面の上端を基準にする。
         この64pxのズレを入れないと、ピンが始まった瞬間にもう横へ動いていて、
         1枚目が左に切れた状態で現れる。 */
      view-timeline-inset: var(--hdr) 0;
    }
    .gal-pin{
      position:sticky; top:var(--hdr);
      height:calc(100vh - var(--hdr));
      height:calc(100svh - var(--hdr));
      display:flex; flex-direction:column; justify-content:center;
      gap: clamp(24px, 3vw, 44px);
    }
    .gal-scroller{
      overflow:hidden; padding-inline:0; margin-top:0;
    }
    .gal-track{
      padding-inline: var(--gutter);
      animation: gal-x linear both;
      animation-timeline: --gal;
      animation-range: contain 0% contain 100%;
    }
    @keyframes gal-x{
      from{ transform:translateX(0) }
      /* 走り終わりで右端がそろう。100%は自分の幅ぶん */
      to  { transform:translateX(calc(100vw - 100% - 4px)) }
    }
  }
}

/* ⑧ ページ遷移（M4）の味つけ */
::view-transition-group(root){
  animation-duration:260ms;
  animation-timing-function:cubic-bezier(.23, 1, .32, 1);
}
/* 共有要素モーフ（S3）：indexのギャラリー写真が works の同じ写真へ繋がって飛ぶ。
   CSPで style="..." が使えないので、クラスで1件ずつ名前を振る。
   名前は1ページの中で重複させないこと。 */
.vt-case-1{ view-transition-name: case-1 }
.vt-case-2{ view-transition-name: case-2 }
.vt-case-3{ view-transition-name: case-3 }
.vt-case-4{ view-transition-name: case-4 }
.vt-case-5{ view-transition-name: case-5 }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:1000px){
  .header-cta{ display:none }
  .gnav{
    position:absolute; left:0; right:0; top:var(--hdr);
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height 260ms linear;
  }
  .gnav.is-open{ max-height:70vh }
  .gnav a{ padding:14px 22px; border-top:1px solid var(--line) }
  .navtoggle{ display:flex }
}

@media (max-width:860px){
  .can-list li{ grid-template-columns:1fr; gap:4px }
  .can-no, .can-list h3, .can-list p{ grid-column:1 / -1 }
  .can-grid{ grid-template-columns:1fr }
  .deflist > div{ grid-template-columns:1fr; gap:2px }
  .deflist dt, .deflist dd{ grid-column:1 / -1 }
  .foot-top{ flex-direction:column; align-items:flex-start; gap:18px }
  /* 12カラムのまま gap を広げると、gap11個分だけで画面幅を超えて横スクロールになる。
     スマホでは素直に1カラムへ畳む。 */
  .case, .figs{ grid-template-columns:1fr }
  /* 縦積みにするので grid-row の固定も外す（残すと写真と本文が重なる） */
  .case-fig, .case-body,
  .case:nth-of-type(even) .case-fig, .case:nth-of-type(even) .case-body{
    grid-column:1 / -1; grid-row:auto;
  }
  .case-body{ margin-top:24px }
  .fig-n:nth-child(1), .fig-n:nth-child(2), .fig-n:nth-child(3){
    grid-column:1 / -1; margin-top:0;
  }
  .figs{ gap:36px }
}

@media (max-width:640px){
  :root{ --hdr:56px }
  body{ font-size:var(--fs-b) }
  .hero{ padding-block:32px 28px }
  .hero h1{ margin-top:16px }
  .band-in{ aspect-ratio:16/10 }
  .gal-item{ flex:0 0 82vw }
}

/* =========================================================
   動きを減らす設定への追従は 2026-08-15 に廃止（村田さん指示）。
   理由は「動き」節の冒頭コメントを参照。ここにあった
   @media (prefers-reduced-motion: reduce) の全停止ブロックは削除した。
   本番納品時に reduce 対応を戻す場合は git 履歴から復元できる。
   ========================================================= */