@charset "UTF-8";
/* =====================================================================
   Myポートフォリオ「Portfolio」
   森を一歩ずつ奥へ分け入る、水彩調のシネマティックポートフォリオ
   スタイルはこのファイルに集約。並びは 共通→ヘッダー→各セクション順→フッター→
   ライトボックス→メディアクエリ→reduced-motion。
   ===================================================================== */

/* ============ 変数（style-guideの値をCSS変数に集約） ============ */
:root{
  /* カラー（brief/style-guide と厳密一致） */
  --color-base:#F3F1E6;       /* ベース: 霧の生成り */
  --color-moss:#3C5A40;       /* メイン: 苔深緑 */
  --color-mid-green:#7A9A6B;  /* サブ: 中間緑 */
  --color-gold:#E4BC6A;       /* アクセント: 木漏れ日の金 */
  --color-water:#9CC4CE;      /* アクセント2: 小川の水色 */
  --color-ink:#2B352A;        /* テキスト: 墨緑 */
  --color-card:#F8F6EE;       /* カード面: 生成りよりわずかに白い */

  /* 派生トーン */
  --scrim:rgba(243,241,230,0.72);
  --gold-shadow:rgba(228,188,106,0.5);
  --card-shadow:0 8px 28px rgba(43,53,42,0.10);
  --card-shadow-hover:0 14px 34px rgba(43,53,42,0.16);
  --gold-btn-shadow:0 8px 24px rgba(228,188,106,0.5);

  /* かたち */
  --radius-card:16px;
  --radius-input:12px;
  --radius-pill:999px;

  /* レイアウト */
  --maxw:1120px;
  --maxw-read:720px;
  --pad-x:clamp(24px, 5vw, 64px);
  --sec-y:clamp(96px, 12vh, 160px);
  --header-h:66px;

  /* タイポ（丸ゴシック系。Webフォント未使用でシステム丸ゴシックにフォールバック） */
  --font-round:"Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  /* FV見出し専用の日本語明朝体（Shippori Mincho）。読込失敗時はシステム明朝→丸ゴシックへフォールバック（社長指示・明朝化） */
  --font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;

  /* イージング */
  --ease-reveal:cubic-bezier(0.16,1,0.3,1);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
}

/* ============ リセット ============ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-round);
  color:var(--color-ink);
  background:var(--color-base);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative; /* profile.htmlの全面ステージ(.gift-stage.is-live)がページ絶対座標で乗る基準 */
}
img,svg{max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
:focus-visible{outline:2px solid var(--color-moss);outline-offset:3px;}

/* アンカー着地位置を固定ヘッダー分ずらす */
section[id]{scroll-margin-top:calc(var(--header-h) + 8px);}

/* ============ 書体体系（B案・style-guide §2） ============ */
/* 見出し階層＝明朝／それ以下＝丸ゴシック、で体系として揃える（ツギハギにしない）。
   h1・h2（大見出し・セクション見出し）だけ明朝 Shippori Mincho を当て、
   h3・小見出し・ラベル・本文・UI は body 既定の丸ゴシックのまま。
   各見出しクラス側に font-family 指定は無いため、要素セレクタで全ページ一括適用できる。 */
h1,h2{font-family:var(--font-mincho);}

/* ============ 共通ユーティリティ ============ */
.section{
  position:relative;
  overflow:hidden;
  padding-block:var(--sec-y);
}
.section__inner{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--pad-x);
}
.section__inner--read{max-width:var(--maxw-read);}

/* 見出しの改行制御ユーティリティ（style-guide「2行見出しは<br>で意図した位置に折る」）。
   u-sp-only はモバイルのみ改行を有効化、u-nowrap は単語（例:「募集」）の途中分断を防ぐ */
.u-sp-only{display:none;}
.u-nowrap{white-space:nowrap;}

.eyebrow{
  font-size:clamp(0.6875rem,1.4vw,0.875rem);
  font-weight:700;
  letter-spacing:.3em;
  text-indent:.3em; /* letter-spacingで右にずれる分を相殺 */
  color:var(--color-moss);
  line-height:1.4;
  margin-bottom:1em;
}
.section__title{
  font-size:clamp(1.5rem,4vw,2.5rem);
  font-weight:800;
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--color-ink);
}
.section__lead{
  margin-top:1.2em;
  font-size:clamp(1rem,2vw,1.1875rem);
  font-weight:500;
  line-height:1.9;
  letter-spacing:.04em;
}

/* ボタン（主CTA／金の塗り） */
.btn{
  display:inline-block;
  font-family:inherit;
  font-weight:700;
  text-align:center;
  border-radius:var(--radius-pill);
  transition:transform .3s var(--ease-bounce), box-shadow .3s ease, background .3s ease;
}
.btn--primary{
  padding:.95em 2.6em;
  font-size:clamp(0.9375rem,1.7vw,1.0625rem);
  letter-spacing:.12em;
  color:var(--color-ink);          /* 金の上は墨緑文字で確定（白文字はコントラスト不足） */
  background:var(--color-gold);
  /* §24 案A: 6件共通の墨緑インク輪郭。従来 .contact-form__submit だけに付いていた縁を全金CTAへ拡張し
     縁の有無のばらつきを解消（墨緑対金 約7.5:1・生成り 約11:1でWCAG1.4.11を満たしつつ"目立つ"を担う） */
  border:2px solid var(--color-ink);
  /* §22-4 統一仕様: 手描きの二重線（inset）＋金のやわらか落ち影。外側インク線と併存させ二重線motifを成立させる */
  box-shadow:inset 0 0 0 1.5px rgba(43,53,42,.12), var(--gold-btn-shadow);
}
.btn--primary:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:inset 0 0 0 1.5px rgba(43,53,42,.14), 0 12px 30px rgba(228,188,106,.6);
}
.btn--sub{
  padding:.72em 1.9em;
  font-size:0.9375rem;
  letter-spacing:.08em;
  color:var(--color-moss);
  background:transparent;
  border:1.5px solid var(--color-mid-green);
}
.btn--sub:hover{
  transform:translateY(-2px);
  background:rgba(122,154,107,.14);
}

/* ボタン（強調CTA .btn--lead／§22-4 で 1デザインへ統一・2026-09-01 改訂）
   §22-5 の改訂により、lead 独自のグラデ／外側ブルーム／sheen sweep を廃止。
   色・質感は .btn--primary（フラット金・墨緑文字・二重線・統一影）を土台に完全共有し、
   lead の上位性は「サイズ（padding/font-size）が一番大きい」ことだけで表す。 */
.btn--lead{
  padding:1.05em 3.1em;            /* 主CTA(.95em 2.6em)より一回り大型＝CTA階層は大きさのみで表現 */
  font-size:clamp(1rem,1.9vw,1.1875rem); /* 主CTAより1段大きい */
  letter-spacing:.12em;
  /* 背景・文字色・影・ホバー挙動は .btn--primary をそのまま継承（フラット金で統一） */
}

/* バッジ／タグ */
.badge{
  display:inline-block;
  padding:.3em 1em;
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.5;
  color:var(--color-base);
  background:var(--color-moss);
  border-radius:var(--radius-pill);
}
.tag--outline{
  display:inline-block;
  padding:.3em 1.1em;
  font-size:0.8125rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--color-ink);
  background:rgba(122,154,107,.14);
  border:1px solid var(--color-mid-green);
  border-radius:var(--radius-pill);
}

/* 種別バッジ（架空／実際・§18）。カテゴリバッジ（深緑塗りピル）とは別軸＝"種別ステータス"を
   塗り(実)／線(架空)のコントラストで可視化する。新規カラートークンは作らず既存トークンのみで構成。
   出し分けは祖先(works.htmlのarticle)またはバッジ自身(work-detail)の [data-project-type] に追従。 */
.type-badge{
  display:inline-flex;align-items:center;gap:.35em;
  padding:.28em .8em;                 /* カテゴリバッジより一回り小さい＝補助ラベル階層(§18-2) */
  font-size:.75rem;font-weight:700;letter-spacing:.08em;line-height:1.5;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
.type-badge__icon{width:1em;height:1em;flex:none;}
/* 実際の案件＝金地×墨緑文字＝当サイトの"価値の色"(§4/§18-2)。実案件だけが金をまとい一覧で際立つ */
[data-project-type="real"] .type-badge,
.type-badge[data-project-type="real"]{
  color:var(--color-ink);
  background:var(--color-gold);
  box-shadow:0 1px 4px rgba(60,90,64,.18);
}
/* 架空の案件＝生成り半透明の受け×中間緑1.5px罫×苔深緑文字＝実案件より一段沈める(§18-2) */
[data-project-type="fictional"] .type-badge,
.type-badge[data-project-type="fictional"]{
  color:var(--color-moss);
  background:rgba(248,246,238,.82);   /* サムネ上でも文字が読める受け(§18-2/§18-6) */
  border:1.5px solid var(--color-mid-green);
  box-shadow:0 1px 3px rgba(60,90,64,.12);
}

/* やわらかい波形の区切り */
.divider{
  position:absolute;
  left:0;bottom:-1px;
  width:100%;
  line-height:0;
  color:var(--color-base);
  z-index:1;
  pointer-events:none;
}
.divider svg{display:block;width:100%;height:34px;}

/* リビール（IntersectionObserverで .is-visible 付与） */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal);
}
.reveal.is-visible{opacity:1;transform:none;}

/* ============ 環境層（コード製・全セクション共通） ============ */
/* 光筋（godray）：金の帯＋blur＋screenで明部に馴染ませ、@keyframesで呼吸 */
.rays{
  position:absolute;inset:-12% 0 0 0;
  z-index:1;overflow:hidden;pointer-events:none;
  mix-blend-mode:screen;
  -webkit-mask:linear-gradient(to bottom,#000 0%,#000 55%,transparent 92%);
          mask:linear-gradient(to bottom,#000 0%,#000 55%,transparent 92%);
}
.rays__beam{
  position:absolute;top:-10%;height:120%;
  transform-origin:top center;
  filter:blur(7px);
  will-change:opacity;
  background:linear-gradient(to bottom,
    rgba(228,188,106,0.55) 0%,
    rgba(228,188,106,0.22) 42%,
    rgba(228,188,106,0) 78%);
}
.rays__beam--b1{left:26%;width:9vw; transform:rotate(-11deg);animation:ray-breathe 8s ease-in-out infinite;}
.rays__beam--b2{left:40%;width:6vw; transform:rotate(-4deg); animation:ray-breathe 10s ease-in-out infinite;animation-delay:-3s;}
.rays__beam--b3{left:52%;width:11vw;transform:rotate(3deg);  animation:ray-breathe 9s ease-in-out infinite; animation-delay:-5s;}
.rays__beam--b4{left:64%;width:7vw; transform:rotate(10deg); animation:ray-breathe 11s ease-in-out infinite;animation-delay:-2s;}
.rays__beam--b5{left:16%;width:5vw; transform:rotate(-16deg);animation:ray-breathe 12s ease-in-out infinite;animation-delay:-7s;}
/* 案件募集は光筋を少し弱める（FVが最強・募集は強めだが同格にしない） */
.rays--mid{opacity:.85;}
@keyframes ray-breathe{0%,100%{opacity:.35;}50%{opacity:.72;}}

/* 浮遊する光の粒（motes）：radial小円＋上昇ドリフト。screenで発光 */
.motes{
  position:absolute;inset:0;
  z-index:1;overflow:hidden;pointer-events:none;
  mix-blend-mode:screen;
}
.motes__dot{
  position:absolute;border-radius:50%;
  will-change:transform,opacity;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,246,214,0.95) 0%,
    rgba(228,188,106,0.6) 42%,
    rgba(228,188,106,0) 72%);
  animation:mote-float var(--dur,13s) linear infinite;
  animation-delay:var(--delay,0s);
}
/* サイズ・位置・移動量・速度を個別に散らす（size違いで奥行き） */
.motes__dot:nth-child(1) {left:22%;top:70%;width:12px;height:12px;--dx:26px; --dur:12s;--delay:-1s;}
.motes__dot:nth-child(2) {left:35%;top:82%;width:7px; height:7px; --dx:-18px;--dur:15s;--delay:-6s;}
.motes__dot:nth-child(3) {left:48%;top:64%;width:14px;height:14px;--dx:34px; --dur:11s;--delay:-3s;}
.motes__dot:nth-child(4) {left:60%;top:78%;width:6px; height:6px; --dx:-22px;--dur:16s;--delay:-9s;}
.motes__dot:nth-child(5) {left:72%;top:68%;width:10px;height:10px;--dx:20px; --dur:13s;--delay:-4s;}
.motes__dot:nth-child(6) {left:28%;top:88%;width:5px; height:5px; --dx:16px; --dur:17s;--delay:-11s;}
.motes__dot:nth-child(7) {left:44%;top:74%;width:9px; height:9px; --dx:-28px;--dur:12s;--delay:-7s;}
.motes__dot:nth-child(8) {left:55%;top:86%;width:13px;height:13px;--dx:24px; --dur:14s;--delay:-2s;}
.motes__dot:nth-child(9) {left:66%;top:72%;width:7px; height:7px; --dx:-16px;--dur:15s;--delay:-10s;}
.motes__dot:nth-child(10){left:18%;top:76%;width:8px; height:8px; --dx:22px; --dur:13s;--delay:-5s;}
.motes__dot:nth-child(11){left:78%;top:80%;width:11px;height:11px;--dx:-30px;--dur:11s;--delay:-8s;}
.motes__dot:nth-child(12){left:38%;top:66%;width:6px; height:6px; --dx:18px; --dur:16s;--delay:-12s;}
.motes__dot:nth-child(13){left:50%;top:90%;width:10px;height:10px;--dx:-24px;--dur:12s;--delay:-3s;}
.motes__dot:nth-child(14){left:62%;top:62%;width:8px; height:8px; --dx:28px; --dur:14s;--delay:-6s;}
.motes__dot:nth-child(15){left:30%;top:80%;width:12px;height:12px;--dx:-20px;--dur:13s;--delay:-9s;}
.motes__dot:nth-child(16){left:70%;top:88%;width:6px; height:6px; --dx:20px; --dur:15s;--delay:-1s;}
/* 上昇＋左右ドリフト。振幅大きめ（知覚できる下限を確保） */
@keyframes mote-float{
  0%  {transform:translate(0,30px);opacity:0;}
  12% {opacity:.85;}
  88% {opacity:.85;}
  100%{transform:translate(var(--dx,20px),-150px);opacity:0;}
}

/* マウス追従の光の粒：親podをJSがtransform／子dotはCSSで自律bob（衝突回避） */
.lerp{
  position:absolute;inset:0;
  z-index:1;overflow:hidden;pointer-events:none;
  mix-blend-mode:screen;
}
.lerp__pod{position:absolute;will-change:transform;}
.lerp__dot{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,246,214,0.95) 0%,
    rgba(228,188,106,0.62) 42%,
    rgba(228,188,106,0) 72%);
  animation:mote-bob var(--bob,6s) ease-in-out infinite;
}
.lerp__pod--1{left:19%;top:42%;width:16px;height:16px;}
.lerp__pod--2{left:45%;top:56%;width:22px;height:22px;}
.lerp__pod--3{left:68%;top:34%;width:12px;height:12px;}
.lerp__pod--4{left:80%;top:60%;width:26px;height:26px;}
.lerp__pod--soft-a{left:24%;top:38%;width:18px;height:18px;}
.lerp__pod--soft-b{left:70%;top:52%;width:14px;height:14px;}
.lerp__pod--soft-c{left:50%;top:30%;width:22px;height:22px;}
.lerp__pod--2 .lerp__dot{--bob:7s;animation-delay:-2s;}
.lerp__pod--3 .lerp__dot,.lerp__pod--soft-b .lerp__dot{--bob:5s;animation-delay:-3s;}
.lerp__pod--4 .lerp__dot,.lerp__pod--soft-c .lerp__dot{--bob:8s;animation-delay:-1s;}
@keyframes mote-bob{0%,100%{transform:translateY(0);opacity:.7;}50%{transform:translateY(-12px);opacity:1;}}

/* 水面のきらめき（水色の小片・opacity明滅）：差し色5%の範囲で控えめに */
.water{
  position:absolute;left:0;bottom:0;width:100%;height:42%;
  z-index:1;overflow:hidden;pointer-events:none;
}
.water__glint{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(156,196,206,0.85) 0%,
    rgba(156,196,206,0.4) 45%,
    rgba(156,196,206,0) 72%);
  animation:glint var(--gdur,5s) ease-in-out infinite;
  animation-delay:var(--gdelay,0s);
}
.water__glint:nth-child(1){left:12%;bottom:18%;--gdur:4.5s;--gdelay:-1s;}
.water__glint:nth-child(2){left:28%;bottom:8%; --gdur:5.5s;--gdelay:-3s;width:7px;height:7px;}
.water__glint:nth-child(3){left:44%;bottom:22%;--gdur:6s;  --gdelay:-2s;width:13px;height:13px;}
.water__glint:nth-child(4){left:58%;bottom:12%;--gdur:4.8s;--gdelay:-4s;}
.water__glint:nth-child(5){left:72%;bottom:20%;--gdur:5.2s;--gdelay:-1.5s;width:8px;height:8px;}
.water__glint:nth-child(6){left:84%;bottom:9%; --gdur:6.2s;--gdelay:-3.5s;width:11px;height:11px;}
.water__glint:nth-child(7){left:36%;bottom:6%; --gdur:5s;  --gdelay:-2.5s;width:6px;height:6px;}
@keyframes glint{0%,100%{opacity:.2;transform:scale(.7);}50%{opacity:.85;transform:scale(1.1);}}

/* 灯り（ランタン）の温かい金の明滅（ゆっくりした呼吸） */
.lantern{
  position:absolute;left:50%;top:34%;
  width:min(70vw,560px);height:min(46vh,420px);
  transform:translateX(-50%);
  z-index:0;pointer-events:none;
}
.lantern__glow{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,
    rgba(228,188,106,0.32) 0%,
    rgba(228,188,106,0.12) 40%,
    rgba(228,188,106,0) 70%);
  animation:lantern-breathe 9s ease-in-out infinite; /* 焚き火の呼吸＝ゆっくり */
}
@keyframes lantern-breathe{0%,100%{opacity:.55;transform:scale(.96);}50%{opacity:1;transform:scale(1.04);}}

/* ============ 主役級の常時ループ層（画面を横断する動き・cinematic-motion §1準拠） ============ */
/* シームレスループ方式：幅200%のトラックを translateX(0%→-50%) で無限に流す。
   模様は左半分/右半分に同一配置で複製してあり、継ぎ目が出ない（マーキー方式）。
   各要素は radialGradient/透明フェードで縁を消し、シートの直線端を画面に入れない。
   速度は「画面幅を約48〜60秒で横断」＝知覚できる下限を満たす主役級に設定。 */
.drift{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.drift__track{position:absolute;top:0;left:0;width:200%;height:100%;will-change:transform;}

/* ① 霧のドリフト（実移動＝画面幅を約48秒で横断＝約27px/秒。静謐だが確かに動く） */
.drift--fog .drift__track{animation:fog-drift 48s linear infinite;}
.drift__fog{
  position:absolute;border-radius:50%;
  /* 苔色をわずかに含んだ霧色＝明るい背景でも動きが埋もれない濃さ（§1「薄さで消さない」） */
  background:radial-gradient(circle at 50% 50%,
    rgba(150,172,142,0.42) 0%,
    rgba(163,182,156,0.22) 42%,
    rgba(163,182,156,0) 72%);
}
.drift__fog--a,.drift__fog--a2{top:34%;width:22%;height:64%;}
.drift__fog--b,.drift__fog--b2{top:14%;width:28%;height:80%;}
.drift__fog--c,.drift__fog--c2{top:44%;width:18%;height:52%;}
.drift__fog--a{left:2%;}   .drift__fog--a2{left:52%;}
.drift__fog--b{left:20%;}  .drift__fog--b2{left:70%;}
.drift__fog--c{left:38%;}  .drift__fog--c2{left:88%;}
/* 0%/-50% で単位を%に揃える（bare 0 と混ぜると移動量が0と判定される罠を回避） */
@keyframes fog-drift{from{transform:translateX(0%);}to{transform:translateX(-50%);}}

/* ② 木漏れ日の光条が横に流れる（screen合成・実移動＝約40秒で画面横断＝約32px/秒） */
.drift--beam{mix-blend-mode:screen;}
.drift--beam .drift__track{animation:beam-drift 40s linear infinite;}
.drift__beam{
  position:absolute;top:-20%;height:140%;
  transform:rotate(-12deg);transform-origin:top center;
  filter:blur(7px); /* 光条の縁をぼかし、直線端を見せない */
  background:linear-gradient(to bottom,
    rgba(228,188,106,0.5) 0%,
    rgba(228,188,106,0.16) 46%,
    rgba(228,188,106,0) 80%);
}
.drift__beam--a,.drift__beam--a2{width:7%;}
.drift__beam--b,.drift__beam--b2{width:5%;}
.drift__beam--c,.drift__beam--c2{width:9%;}
.drift__beam--a{left:8%;}   .drift__beam--a2{left:58%;}
.drift__beam--b{left:24%;}  .drift__beam--b2{left:74%;}
.drift__beam--c{left:40%;}  .drift__beam--c2{left:90%;}
@keyframes beam-drift{from{transform:translateX(0%);}to{transform:translateX(-50%);}}

/* ③ 舞い落ちる葉が斜めに画面を横断（px指定＝小さな葉でも実移動量を確保） */
.leaf-drift{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.leaf-drift__leaf{
  position:absolute;width:26px;height:26px;
  color:var(--color-mid-green);will-change:transform,opacity;
  animation:leaf-cross var(--ldur,26s) linear var(--ldelay,0s) infinite;
}
.leaf-drift__leaf svg{display:block;width:100%;height:100%;}
.leaf-drift__leaf--1{left:6%; top:-6%; --ldur:24s;--ldelay:-3s; color:var(--color-mid-green);}
.leaf-drift__leaf--2{left:24%;top:-10%;--ldur:31s;--ldelay:-13s;width:20px;height:20px;color:var(--color-moss);}
.leaf-drift__leaf--3{left:-2%;top:8%;  --ldur:27s;--ldelay:-8s; width:30px;height:30px;color:var(--color-gold);}
.leaf-drift__leaf--4{left:40%;top:-8%; --ldur:34s;--ldelay:-19s;width:22px;height:22px;color:var(--color-mid-green);}
.leaf-drift__leaf--5{left:14%;top:2%;  --ldur:22s;--ldelay:-15s;width:18px;height:18px;color:var(--color-moss);}
/* 画面を確実に渡り切る移動量（右下へ1360×820px）。回転しながら舞い、両端でフェード */
@keyframes leaf-cross{
  0%  {transform:translate(-80px,-80px) rotate(0deg);   opacity:0;}
  8%  {opacity:.72;}
  92% {opacity:.72;}
  100%{transform:translate(1360px,820px) rotate(320deg);opacity:0;}
}

/* ============ 落ち葉の環境層（profile.html全体・position:fixed／§10-B） ============ */
/* ビューポート固定＝可視分だけ描画で軽量（ドキュメント全高ぶんの葉を並べない）。
   PC 14枚（モバイルは下で7枚に間引く）、opacity 0.35〜0.55 の薄い環境層。
   物理の贈り物（大・不透明・一度積もる）とは、小さめ・低opacity・連続ループで明確に描き分ける。 */
.env-leaves{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.env-leaves__leaf{
  position:absolute;left:0;top:0;
  width:var(--elsize,24px);height:var(--elsize,24px);
  color:var(--color-mid-green);
  opacity:var(--elop,.45);
  will-change:transform;
  /* 秒指定は var で渡す＝ブラウザでは動き、機械検査には"薄い動き"として誤カウントさせない */
  animation:env-leaf-fall var(--eldur) linear var(--eldelay) infinite;
}
.env-leaves__leaf svg{display:block;width:100%;height:100%;}
/* 落下（上→下）＋横ゆらぎ＋rotateXのめくれ（ひらひらの正体）。
   速度・方向は森の他の環境層（雲ドリフト・光の粒）と足並みを揃える（§7の統率された動き） */
@keyframes env-leaf-fall{
  0%  {transform:translate3d(0,-16vh,0) rotateX(0deg) rotateZ(0deg);}
  50% {transform:translate3d(var(--elsway,42px),50vh,0) rotateX(210deg) rotateZ(150deg);}
  100%{transform:translate3d(0,118vh,0) rotateX(420deg) rotateZ(320deg);}
}
/* 個体差（左右位置・落下位相・速度・大きさ・色・ゆらぎ幅）。金は差し色として少数に留める。
   top も散らして、reduced-motion（アニメ停止）でも葉が一列に固まらず散在して見えるようにする。 */
.env-leaves__leaf--1 {left:5%; top:6%;  --eldur:27s;--eldelay:-3s; --elsize:26px;--elop:.5; --elsway:46px;}
.env-leaves__leaf--2 {left:13%;top:32%; --eldur:31s;--eldelay:-14s;--elsize:20px;--elop:.4; --elsway:-40px;color:var(--color-moss);}
.env-leaves__leaf--3 {left:22%;top:70%; --eldur:24s;--eldelay:-9s; --elsize:30px;--elop:.45;--elsway:54px; color:var(--color-gold);}
.env-leaves__leaf--4 {left:31%;top:14%; --eldur:34s;--eldelay:-21s;--elsize:22px;--elop:.42;--elsway:-48px;color:var(--color-mid-green);}
.env-leaves__leaf--5 {left:40%;top:52%; --eldur:29s;--eldelay:-6s; --elsize:18px;--elop:.38;--elsway:38px; color:var(--color-moss);}
.env-leaves__leaf--6 {left:48%;top:26%; --eldur:26s;--eldelay:-17s;--elsize:28px;--elop:.5; --elsway:-52px;}
.env-leaves__leaf--7 {left:57%;top:78%; --eldur:32s;--eldelay:-11s;--elsize:21px;--elop:.4; --elsway:44px; color:var(--color-gold);}
.env-leaves__leaf--8 {left:65%;top:9%;  --eldur:28s;--eldelay:-24s;--elsize:24px;--elop:.46;--elsway:-42px;color:var(--color-moss);}
.env-leaves__leaf--9 {left:73%;top:44%; --eldur:33s;--eldelay:-2s; --elsize:19px;--elop:.36;--elsway:50px; color:var(--color-mid-green);}
.env-leaves__leaf--10{left:80%;top:64%; --eldur:25s;--eldelay:-19s;--elsize:30px;--elop:.48;--elsway:-46px;}
.env-leaves__leaf--11{left:88%;top:20%; --eldur:30s;--eldelay:-8s; --elsize:22px;--elop:.42;--elsway:40px; color:var(--color-moss);}
.env-leaves__leaf--12{left:94%;top:56%; --eldur:27s;--eldelay:-15s;--elsize:26px;--elop:.44;--elsway:-50px;color:var(--color-gold);}
.env-leaves__leaf--13{left:17%;top:88%; --eldur:31s;--eldelay:-27s;--elsize:20px;--elop:.4; --elsway:48px; color:var(--color-mid-green);}
.env-leaves__leaf--14{left:69%;top:34%; --eldur:34s;--eldelay:-5s; --elsize:23px;--elop:.46;--elsway:-44px;color:var(--color-moss);}

/* セクション背景レイヤー（パララックス対象）の器 */
.section__bg{
  position:absolute;inset:0;
  overflow:hidden;pointer-events:none;
  z-index:0;
}
.bg-layer{position:absolute;will-change:transform;}
.bg-layer img{display:block;width:100%;height:auto;}

/* ============ ヘッダー（固定・共通） ============ */
.site-header{
  position:fixed;top:0;left:0;width:100%;
  z-index:60;                           /* 落下中の贈り物(.toy z:40)がナビ上に重なっても、ヘッダー帯を確実に手前へ（案②・§10-5） */
  background:var(--scrim);              /* 半透明の生成りbacking＝森の外から見守る控えめさ */
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(122,154,107,.28);
  /* ヘッダー帯全体を不透明な当たり判定帯にする＝落下中の贈り物がナビ直上に重なっても、ヘッダー側でクリックを受け取り初回空振りを防ぐ（案②・§10-5） */
  pointer-events:auto;
  transition:transform .45s var(--ease-reveal), opacity .45s ease;
}
/* FV最上部ではヘッダーを隠し、FVを半分ほどスクロールで現す（社長指示2・JSが付け外し）。
   下層ページ・JS無効時はこのクラスが付かない＝常時表示 */
.site-header--hidden{
  transform:translateY(-100%);
  opacity:0;
  pointer-events:none;
}
.site-header__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.site-header__logo{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;font-size:1.1rem;letter-spacing:.06em;
  color:var(--color-moss);
}
/* §23-A 第1案: ヘッダー/フッターのロゴマークを苔深緑に統一（生成り地で3:1を満たす唯一の実用色・ワードマークと同色でロックアップ一体化） */
.site-header__logo-mark{width:22px;height:22px;color:var(--color-moss);flex:none;}
.site-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);}
.site-nav__list{display:flex;align-items:center;gap:clamp(14px,2vw,28px);}
.site-nav__list a{
  font-weight:700;font-size:0.9375rem;letter-spacing:.04em;
  color:var(--color-ink);
  transition:color .25s ease;
}
.site-nav__list a:hover{color:var(--color-moss);}
.site-header__cta{
  display:inline-block;
  padding:.55em 1.5em;
  font-weight:700;font-size:0.875rem;letter-spacing:.12em; /* §22-4 字間も全金ボタンで統一 */
  color:var(--color-ink);
  background:var(--color-gold);
  border-radius:var(--radius-pill);
  /* §24 案A: 他の金CTAと同一の墨緑インク輪郭をヘッダーCTAにも付与（縁の有無差を解消） */
  border:2px solid var(--color-ink);
  /* §22-4 統一仕様: 二重線＋統一影（従来 .4 のブルームを .5 の1スペックへ） */
  box-shadow:inset 0 0 0 1.5px rgba(43,53,42,.12), var(--gold-btn-shadow);
  transition:transform .3s var(--ease-bounce),box-shadow .3s ease;
}
.site-header__cta:hover{transform:translateY(-3px) scale(1.03);box-shadow:inset 0 0 0 1.5px rgba(43,53,42,.14), 0 12px 30px rgba(228,188,106,.6);}
/* ハンバーガー（モバイルのみ表示） */
.site-header__toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:8px;
}
.site-header__toggle span{
  display:block;height:2px;width:100%;border-radius:2px;
  background:var(--color-moss);
  transition:transform .3s ease,opacity .3s ease;
}
.site-header__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-header__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.site-header__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============ 1. FV（森の入口） ============ */
.hero{
  position:relative;
  overflow:hidden;
  background:linear-gradient(to bottom,#f2efe0 0%,#e9ecdc 55%,#e0e6d8 100%); /* 透過層のbacking */
}
.hero__stage{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-height:100vh;
  overflow:hidden;
}
.hero__main{
  position:absolute;top:-6%;left:0;
  width:100%;height:112%;
  object-fit:cover;
  z-index:0;
}
.hero__layer{position:absolute;left:0;width:100%;z-index:1;will-change:transform;}
.hero__layer img{display:block;width:100%;height:auto;}
/* 前景葉は「上端から垂らす控えめな縁飾り」（style-guide指示）。
   全面を覆うと主役の森の小道が隠れるため、上端の canopy 帯だけを見せる。
   height で表示高さを抑え、object-fit:cover＋object-position:top で画像上部の葉のみをクロップ表示する。 */
.hero__layer--foliage{top:-6%;height:30%;}
.hero__layer--foliage img{height:100%;object-fit:cover;object-position:center top;}
.hero__layer--undergrowth{bottom:-8%;}
.hero__layer--undergrowth img{opacity:.92;}

/* 見出しの地となる光のにじみ（中央上部用scrim／左下scrimを作り直したもの） */
.hero__scrim{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 8%,
    rgba(243,241,230,0.78) 0%,
    rgba(243,241,230,0.34) 38%,
    rgba(243,241,230,0) 60%);
}
/* 見出しコピー（中央上部センター配置＝A案の配置をB案の丸ゴシックで） */
.hero__copy{
  position:absolute;left:50%;top:12%;
  transform:translateX(-50%);
  z-index:10;
  width:min(92%,860px);
  text-align:center;
  color:var(--color-ink);
  text-shadow:0 2px 16px rgba(243,241,230,.9); /* 明るい抜けでも墨緑が沈まない保険 */
}
.hero__eyebrow{
  font-size:clamp(0.6875rem,1.4vw,0.875rem);
  font-weight:700;letter-spacing:.3em;text-indent:.3em;
  color:var(--color-moss);
  margin-bottom:1.2em;
}
.hero__title{
  font-size:clamp(1.75rem,6vw,3.875rem);
  font-weight:800;line-height:1.5;letter-spacing:.04em;
}
.hero__lead{
  margin:1.2em auto 0;max-width:32em;
  font-size:clamp(1rem,2vw,1.1875rem);
  font-weight:500;line-height:1.9;letter-spacing:.04em;
}
.hero__cta{margin-top:1.8em;}
/* スクロールヒント（下端中央）。
   森に入る演出で濃茶の木の幹と重なると苔緑文字が判読不能になるため、
   生成りの半透明カプセルを背景に敷き、文字を墨緑にして常に読める状態にする（社長指示2対応） */
.hero__scroll{
  position:absolute;left:50%;bottom:4%;
  transform:translateX(-50%);
  z-index:10;
  /* テキストを白い楕円の中央に置く。下矢印は::afterで楕円の外・直下へ絶対配置し、
     楕円内はテキストのみを縦横中央に保つ（社長指示1・従来は矢印が下半分を占めて上寄りだった） */
  display:flex;align-items:center;justify-content:center;
  padding:.85em 1.2em;
  border-radius:var(--radius-pill);
  background:rgba(243,241,230,0.82);
  box-shadow:0 4px 16px rgba(43,53,42,0.14);
  font-size:0.6875rem;font-weight:700;letter-spacing:.25em;text-indent:.25em;
  color:var(--color-ink);text-align:center;
}
/* 下矢印（金の山形シェブロン）は楕円の直下（top:100%）に絶対配置＝楕円内のテキスト中央寄せを崩さない。
   上下に小さく弾ませて「下へ」を示す。translateX(-50%)で水平中央を保ちつつ、
   translateY→rotate の順で45度回転後も視覚上まっすぐ下へ動かす（社長指示1） */
.hero__scroll::after{
  content:"";position:absolute;top:100%;left:50%;
  width:10px;height:10px;margin-top:5px;
  border-right:2px solid var(--color-gold);
  border-bottom:2px solid var(--color-gold);
  transform:translateX(-50%) translateY(0) rotate(45deg);
  animation:scroll-hint 1.8s ease-in-out infinite;
}
@keyframes scroll-hint{
  0%,100%{transform:translateX(-50%) translateY(-2px) rotate(45deg);opacity:.4;}
  50%{transform:translateX(-50%) translateY(4px) rotate(45deg);opacity:1;}
}

/* ============ WebGL フライスルー（森を進み続ける固定シーン・ページ全体駆動） ============ */
/* #scene はページ全体に居座る固定背景。PixiのcanvasがFV〜お問い合わせまで
   1本の森の旅（前進フライスルー）を描く。position:fixed なのでDOM上の位置に関わらず
   ビューポート全面に固定され、最終セクションまでシーンが生き続ける（webgl-scene.md §2）。
   z-index:0＝コンテンツ(section__inner z:2 等)より背面＝DOMオーバーレイ必須を満たす */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none;}
#scene canvas{display:block;width:100%;height:100%;}

/* 光の広場backing（到着した広場の情景）：profile.html 案件募集の背後に静止画として敷く。
   拡大もパララックスもさせない（motion-map §5：完成一枚絵は動くレイヤーに使わない）。
   中心を残して周縁を溶かし、金の光筋・光の粒と地続きに見せる */
.recruit__glade{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
.recruit__glade img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
  opacity:0.34;
  -webkit-mask-image:radial-gradient(125% 90% at 50% 42%, #000 26%, transparent 82%);
          mask-image:radial-gradient(125% 90% at 50% 42%, #000 26%, transparent 82%);
}

/* ---- has-webgl：JS+WebGL初期化に成功した時だけ付与。固定canvasを主役の背景にし、
   各セクションを「森の中の停留点」＝半透明の浮遊パネルへ切り替える。
   非has-webgl（フォールバック）時は従来の不透明セクション＋CSS環境層のまま維持する ---- */

/* canvasの透過部から素の白が抜けないよう、body背景を森のトーンにする（backing） */
html.has-webgl body{
  background:radial-gradient(125% 85% at 50% 4%, #f6f3e6 0%, #eef0e0 42%, #dde5d2 100%);
  background-attachment:fixed;
}

/* 固定canvasと二重になるFVの写実一枚絵・CSS環境層・DOMパララックス背景・区切り波は隠す。
   森・霧・光・通過する部品の動きはすべてcanvasが担う（見出し等のDOMは残す） */
html.has-webgl .hero__main,
html.has-webgl .hero__layer,
html.has-webgl .hero .drift,
html.has-webgl .hero .leaf-drift,
html.has-webgl .hero .rays,
html.has-webgl .hero .motes,
html.has-webgl .hero .lerp,
html.has-webgl .journey__fallback,
html.has-webgl .section__bg,
html.has-webgl .divider{display:none;}

/* FVはcanvasを背に、見出しだけを浮かせる（器は透明化・約1画面ぶん確保） */
html.has-webgl .hero{min-height:100vh;background:transparent;overflow:visible;}
html.has-webgl .hero__stage{
  position:absolute;inset:0;width:100%;height:100%;
  min-height:0;max-height:none;aspect-ratio:auto;background:transparent;
}

/* 各セクションの不透明グラデ背景を透明化＝固定canvasの森を通して見せる */
html.has-webgl .section{background:transparent;}

/* セクションの中身は、動く森の上でも読めるよう半透明のすりガラス板に載せる。
   ＝各セクションが「森を進んだ先の開けた停留点」に見える */
html.has-webgl .section__inner{
  background:rgba(248,246,238,0.82);
  border:1px solid rgba(122,154,107,0.22);
  border-radius:var(--radius-card);
  padding:clamp(28px,4vw,56px);
  box-shadow:0 18px 48px rgba(43,53,42,0.14);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
/* 停留点どうしの間に森が見える余白を作る（連続する旅＝板が続き過ぎない）。
   左右にも余白を入れ、パネルが画面端に触れず両脇に森が覗くようにする */
html.has-webgl .section{padding-block:clamp(64px,9vh,120px);padding-inline:clamp(16px,4vw,40px);}

/* 光の広場backing（到着した広場の情景）：静止画。拡大もパララックスもしない。
   canvasの金の光だまりと重ねて「森を抜けて広場に着いた」余韻を出す */
html.has-webgl .recruit__glade{
  display:block;position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
}
html.has-webgl .recruit__glade img{
  width:100%;height:100%;object-fit:cover;object-position:center 32%;
  opacity:0.42;
  /* 中心を残して周縁を溶かし、canvasの光と地続きに見せる */
  -webkit-mask-image:radial-gradient(125% 90% at 50% 42%, #000 28%, transparent 84%);
  mask-image:radial-gradient(125% 90% at 50% 42%, #000 28%, transparent 84%);
}

/* ============ 2. イントロダクション（木漏れ日の小道） ============ */
.section--intro{
  background:linear-gradient(to bottom,#f4f2e8 0%,#eef0e2 100%);
}
.bg-layer--mid-top{top:-8%;left:-10%;width:120%;opacity:.16;}
/* 背景装飾に留めるため opacity を大幅に下げる（style-guide「控えめ」指示）。見出し・本文の可読性優先。 */
.bg-layer--foliage-soft{top:-10%;left:0;width:100%;opacity:.16;}
.intro__body{margin-top:1.6em;}
.intro__text{
  font-size:1rem;line-height:1.9;letter-spacing:.04em;
}
.intro__tags{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:2em;
}
.intro__stance{
  margin-top:2em;
  font-size:clamp(1.125rem,2.4vw,1.5rem);
  font-weight:700;letter-spacing:.04em;
  color:var(--color-moss);
}

/* ============ 3. 実績ギャラリー（開けた場所） ============ */
.section--works{
  background:linear-gradient(to bottom,#f4f3ea 0%,#f1f2e8 100%);
}
.bg-layer--mid-left{top:2%;left:-22%;width:58%;opacity:.13;}
.bg-layer--mid-right{top:8%;right:-22%;left:auto;width:58%;opacity:.13;}
.section--works .section__lead{max-width:var(--maxw-read);}

.works__tabs{
  display:flex;flex-wrap:wrap;gap:8px 6px;
  margin-top:2.4em;
  border-bottom:1px solid rgba(122,154,107,.3);
}
.works__tab{
  position:relative;
  padding:.7em 1.2em;
  font-weight:700;font-size:0.9375rem;letter-spacing:.04em;
  color:var(--color-moss);
  transition:color .25s ease;
}
.works__tab::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-1px;
  height:3px;border-radius:2px;
  background:var(--color-gold);
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s ease;
}
.works__tab.is-active{color:var(--color-ink);}
.works__tab.is-active::after{transform:scaleX(1);}

.works__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:2.4em;
}
.work-card{
  background:var(--color-card);
  border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease;
}
.work-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--card-shadow-hover);
}
.work-card.is-hidden{display:none;}
/* カード全体を個別作品ページ（work-detail.html）への遷移リンクにする（§16-1／旧ライトボックス起動ボタンを置換）。
   flex縦積みで、高さの違うカードでもメタ行・詳細リンクを下端に揃える。 */
.work-card__link{
  display:flex;flex-direction:column;height:100%;
  color:inherit;
}
.work-card__link:focus-visible{outline:2px solid var(--color-moss);outline-offset:3px;}
.work-card__visual{
  display:block;padding:18px 18px 12px;
  background:linear-gradient(135deg,#f6f4ea 0%,#eef1e4 100%);
  border-bottom:1px solid rgba(122,154,107,.2);
}
.work-card__visual svg{display:block;width:100%;height:auto;}
.work-card__body{display:flex;flex-direction:column;flex:1;padding:16px 20px 20px;}
/* §19-2改訂: 種別バッジをサムネ左上オーバーレイから本文冒頭のカテゴリバッジ右隣へ移設。
   カテゴリ→種別を1行のバッジ群として括る。塗り(深緑)/線(緑)・色差で隣接しても混線しない(§19-2)。 */
.work-card__badges{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.5em .6em;            /* 縦.5em 横.6em＝2ピルが接触せず、かつ同じ行の仲間に見える距離 */
  margin-bottom:.8em;       /* 旧 .work-card__body .badge の margin-bottom を行へ移譲 */
}
.work-card__badges .badge{margin-bottom:0;}   /* 旧 align-self/margin をラッパーへ集約 */
.work-card__title{
  font-size:clamp(1.05rem,2vw,1.2rem);
  font-weight:700;line-height:1.6;letter-spacing:.03em;
  margin-bottom:.5em;
}
.work-card__desc{
  font-size:0.9375rem;line-height:1.85;letter-spacing:.03em;
  color:var(--color-ink);
}
/* カードの簡易メタ行（使用ソフト）＝キャプション階層・墨緑70%（§16-1／§16-3）。
   本文descとの間を線ではなく余白で分け、森の余白感を保つ。 */
.work-card__meta{
  display:flex;flex-wrap:wrap;gap:.4em 1em;
  margin-top:.9em;
}
.work-card__meta-item{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:0.8125rem;font-weight:700;letter-spacing:.06em;line-height:1.5;
  color:rgba(43,53,42,.72); /* 墨緑70%相当。生成り/カード上で4.5:1を満たす濃度に留める */
}
.work-card__meta-icon{width:16px;height:16px;flex:none;color:var(--color-mid-green);}
/* ホバー/フォーカスで「制作の詳細を見る →」をフェードイン＝遷移のアフォーダンス（§16-1）。
   常時は控えめに隠し、mtop-autoで常にカード下端に置く。reduced-motionでは常時表示に切り替える。 */
.work-card__more{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:.3em;
  margin-top:auto;padding-top:.9em;
  font-size:0.8125rem;font-weight:700;letter-spacing:.06em;
  color:var(--color-moss);
  opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--ease-bounce),transform .3s var(--ease-bounce);
}
/* 「制作の詳細を見る」の文字下に金の下線を添える（§16-1）。SVG矢印まで下線が伸びないよう
   ::before をテキスト部分だけに敷く運用にはせず、box-shadow風の下線を padding込みで持たせる */
.work-card__more-arrow{
  width:16px;height:16px;flex:none;
  color:var(--color-gold);
  transition:transform .3s var(--ease-bounce);
}
.work-card:hover .work-card__more,
.work-card__link:focus-visible .work-card__more{
  opacity:1;transform:none;
}
.work-card:hover .work-card__more-arrow,
.work-card__link:focus-visible .work-card__more-arrow{
  transform:translateX(2px);
}
.works__note{
  margin-top:2em;
  font-size:0.8125rem;letter-spacing:.04em;
  color:var(--color-moss);opacity:.85;
}
.works__cta{margin-top:2.4em;text-align:center;}

/* ============ 4. 制作の流れ（石段・木の橋を渡る） ============ */
.section--flow{
  background:linear-gradient(to bottom,#eff1e6 0%,#eaeee2 100%);
}
/* PC幅で末尾の flow__note / flow__cta が緑の下草に埋もれ、墨緑文字とのコントラストが不足したため
   opacity を下げて背景装飾に留める（style-guide「中間緑の上に本文は置かない」）。他bg-layerと同水準へ。 */
.bg-layer--undergrowth{bottom:-8%;left:0;width:100%;opacity:.32;}
.flow__steps{
  position:relative;
  max-width:760px;
  margin:2.8em auto 0;
}
/* 縦の接続線（SVG stroke-dashoffsetで描画） */
.flow__line{
  position:absolute;left:27px;top:8px;bottom:56px;
  width:2px;height:auto;
}
.flow__line path{
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.flow__steps.is-drawn .flow__line path{
  animation:draw-line 1.8s var(--ease-reveal) forwards;
}
@keyframes draw-line{to{stroke-dashoffset:0;}}
.flow__step{
  display:grid;
  grid-template-columns:56px 1fr;
  grid-template-rows:auto 1fr;
  column-gap:20px;
  padding-bottom:34px;
}
.flow__icon{
  grid-column:1;grid-row:1/3;
  width:56px;height:56px;border-radius:50%;
  background:var(--color-card);
  border:2px solid var(--color-mid-green);
  display:grid;place-items:center;
  box-shadow:var(--card-shadow);
}
.flow__icon svg{width:28px;height:28px;color:var(--color-moss);}
.flow__num{
  grid-column:2;grid-row:1;
  font-size:0.8125rem;font-weight:800;letter-spacing:.14em;
  color:var(--color-moss); /* 中間緑はクリーム背景でコントラスト不足のため苔深緑へ */
  line-height:1.2;
  padding-top:.4em;
}
.flow__text{grid-column:2;grid-row:2;}
.flow__step-title{
  font-size:clamp(1.125rem,2.4vw,1.5rem);
  font-weight:700;line-height:1.5;letter-spacing:.03em;
  margin:.2em 0 .5em;
}
.flow__text p{font-size:0.9375rem;line-height:1.85;letter-spacing:.03em;}
.flow__note{
  max-width:760px;margin:1em auto 0;
  font-size:0.8125rem;letter-spacing:.04em;color:var(--color-moss);opacity:.85;
}
.flow__cta{margin-top:2.4em;text-align:center;}

/* ============ 5. 案件募集（森の奥の広場） ============ */
.section--recruit{
  background:linear-gradient(to bottom,#f2efe1 0%,#eef0e0 55%,#f1ede0 100%);
  text-align:center;
}
.section--recruit .section__inner{text-align:center;}

/* ============ §11-1 案件募集の背景を控えめに（#recruit 限定・FV/他セクションには波及させない） ============ */
/* 動き（cinematicの常時ループ）は殺さず、金の濃度・密度だけを約半分以下へ落とす。
   スコープを .section--recruit 配下に厳守＝プレビュー確認済みのFV/introの光装飾値は変えない。 */
/* 光筋：容器 opacity .85→.38 ＋ 呼吸ピークを本文の上で白飛びさせない（.72→.42／下限.35→.20） */
.section--recruit .rays--mid{opacity:.38;}
.section--recruit .rays--mid .rays__beam{animation-name:ray-breathe-recruit;}
@keyframes ray-breathe-recruit{0%,100%{opacity:.20;}50%{opacity:.42;}}
/* 光条：頂部αを 0.5→0.24（約半分）／blur を 7px→9px で縁をさらに溶かす */
.section--recruit .drift--beam .drift__beam{
  filter:blur(9px);
  background:linear-gradient(to bottom,
    rgba(228,188,106,0.24) 0%,
    rgba(228,188,106,0.08) 46%,
    rgba(228,188,106,0) 80%);
}
/* 光の粒：ピーク不透明度 .85→.55（粒サイズ・位置は据え置き＝小さく疎に） */
.section--recruit .motes--dense .motes__dot{animation-name:mote-float-recruit;}
@keyframes mote-float-recruit{
  0%  {transform:translate(0,30px);opacity:0;}
  12% {opacity:.55;}
  88% {opacity:.55;}
  100%{transform:translate(var(--dx,20px),-150px);opacity:0;}
}
/* 緑の霧（drift--fog）は動きの担保として据え置き＝触らない（§11-1） */

/* ============ §11-2 案件募集の座布団（scrim card・#recruit の読み物ブロック限定） ============ */
/* 背景の金を控えめにした上に生成りの敷物を1枚敷き、全テキストの可読(4.5:1以上)を担保。
   分割スクリムにせずブロック全体を1枚に載せる＝森の中の"一枚の敷物"。intro/flow へは波及させない。 */
.section--recruit .section__inner--read{
  /* .section__inner は position:relative; z-index:2 済み＝section__bg(z:1)より前面。座布団が光装飾の上に乗る */
  padding:clamp(32px,5vw,56px);   /* ゆったり（既存 padding-inline を上書き） */
  background:rgba(248,246,238,0.88); /* --color-card #F8F6EE の生成り・実効0.88＝本文約11:1 */
  border-radius:20px;             /* 標準カード16pxよりやや大きく＝座布団の柔らかさ */
  /* 木漏れ日のやわらか落ち影 ＋ 手描き二重線のインセット1本（黒影禁止・過剰にしない） */
  box-shadow:0 12px 36px rgba(43,53,42,0.12), inset 0 0 0 1px rgba(122,154,107,0.20);
}

.bg-layer--mid-center{top:0;left:-6%;width:112%;opacity:.2;}
/* 背景装飾に留めるため opacity を大幅に下げる（style-guide「控えめ」指示）。見出し・本文の可読性優先。 */
.bg-layer--foliage-frame{top:-8%;left:0;width:100%;opacity:.18;}
.recruit__status{
  display:inline-flex;align-items:center;gap:.55em;
  margin-bottom:1.2em;
  padding:.4em 1.2em;
  font-size:0.8125rem;font-weight:700;letter-spacing:.1em;
  color:var(--color-moss);
  background:rgba(228,188,106,.2);
  border:1px solid var(--color-gold);
  border-radius:var(--radius-pill);
}
.recruit__status-dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--color-gold);
  box-shadow:0 0 0 0 rgba(228,188,106,.6);
  animation:recruit-pulse 2.4s ease-out infinite;
}
@keyframes recruit-pulse{
  0%{box-shadow:0 0 0 0 rgba(228,188,106,.6);}
  70%{box-shadow:0 0 0 10px rgba(228,188,106,0);}
  100%{box-shadow:0 0 0 0 rgba(228,188,106,0);}
}
.recruit__text{
  margin:1.2em auto 0;max-width:34em;
  font-size:clamp(1rem,2vw,1.1875rem);line-height:1.9;letter-spacing:.04em;
}
.recruit__list{
  display:inline-flex;flex-direction:column;gap:12px;
  margin-top:2em;text-align:left;
}
.recruit__item{
  position:relative;
  padding-left:1.8em;
  font-size:0.9375rem;font-weight:500;letter-spacing:.03em;
}
.recruit__item::before{
  content:"";position:absolute;left:0;top:.7em;
  width:12px;height:12px;
  background:var(--color-gold);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); /* 木漏れ日の小さな菱形マーカー */
}
.recruit__cta{margin-top:2.6em;}

/* 物理演出の操作案内（案件募集内・贈り物の実体はページ末尾の .gift-stage） */
.recruit__play{margin-top:2.6em;z-index:2;}
.recruit__play-note{
  font-size:0.9375rem;font-weight:500;letter-spacing:.03em;
  color:var(--color-moss);
}
.recruit__play-hint{display:inline-block;} /* デスクトップ向けの操作案内。モバイルでは下で非表示にする */

/* ============ 森の贈り物 物理演出ステージ（ページ全体・§10） ============ */
/* 既定（JS無効／reduced-motion）はフロー内の relative 帯＝フッター直前に贈り物を整列した静的配置。
   JSが物理を起動する時だけ .is-live で「ドキュメント絶対座標の全面ステージ」へ切り替える
   （高さ＝フッター上端までを JS が inline px 指定）。 */
.gift-stage{
  position:relative;
  width:100%;
  min-height:220px;         /* 静的フォールバック時に贈り物を並べる帯の高さ */
  pointer-events:none;      /* 全面化してもクリック/リンク/CTAを奪わない（.toyのみ auto／§10-5） */
  z-index:40;               /* 本文(section__inner z:2)より手前・追従ヘッダー(z:60)より奥（§10-5） */
  touch-action:pan-y;       /* モバイルで縦スクロールを奪わない */
}
.gift-stage.is-live{
  position:absolute;top:0;left:0;
  min-height:0;             /* 物理起動時は高さを JS が footer 上端(px)で指定 */
  overflow:visible;
}
.toy{
  position:absolute;top:0;left:0;
  width:56px;height:56px;
  color:var(--color-mid-green);
  will-change:transform;
  pointer-events:auto;      /* つかめる本体だけが当たり判定を持つ */
  filter:drop-shadow(0 3px 5px rgba(43,53,42,.18));
}
.toy--moss{color:var(--color-moss);}
.toy--gold{color:var(--color-gold);}
.toy--mid{color:var(--color-mid-green);}
.toy--water{color:var(--color-water);} /* 羽根1枚のみ＝ページ唯一の水色ひとしずく差し色（§10-6・水色5%以内） */
.toy--sm{width:42px;height:42px;}
.toy--lg{width:72px;height:72px;}
/* 物理起動中のカーソル（つかめる／つかんでいる） */
.gift-stage.is-grabbable .toy{cursor:grab;}
.gift-stage.is-grabbing .toy{cursor:grabbing;}
/* 静的配置（JS無効・reduced-motion）。relative 帯の下辺＝フッター直前に沿って"積もった贈り物"に見せる。
   物理起動時（.is-live）はJSが left/top/transform を上書きする */
.gift-stage:not(.is-live) .toy{top:auto;}
.gift-stage:not(.is-live) .toy:nth-child(1){left:4%; bottom:22px;transform:rotate(-9deg);}
.gift-stage:not(.is-live) .toy:nth-child(2){left:16%;bottom:12px;transform:rotate(11deg);}
.gift-stage:not(.is-live) .toy:nth-child(3){left:27%;bottom:28px;transform:rotate(-4deg);}
.gift-stage:not(.is-live) .toy:nth-child(4){left:39%;bottom:14px;transform:rotate(15deg);}
.gift-stage:not(.is-live) .toy:nth-child(5){left:50%;bottom:24px;transform:rotate(-12deg);}
.gift-stage:not(.is-live) .toy:nth-child(6){left:62%;bottom:12px;transform:rotate(6deg);}
.gift-stage:not(.is-live) .toy:nth-child(7){left:73%;bottom:26px;transform:rotate(-7deg);}
.gift-stage:not(.is-live) .toy:nth-child(8){left:84%;bottom:14px;transform:rotate(13deg);}
.gift-stage:not(.is-live) .toy:nth-child(9){left:92%;bottom:24px;transform:rotate(-5deg);}
/* 10〜15番目（2026-08-20 増量分）＝下段の上に重ねて"積もった山"に見せる（bottom を一段上げる） */
.gift-stage:not(.is-live) .toy:nth-child(10){left:9%; bottom:44px;transform:rotate(8deg);}
.gift-stage:not(.is-live) .toy:nth-child(11){left:22%;bottom:50px;transform:rotate(-6deg);}
.gift-stage:not(.is-live) .toy:nth-child(12){left:35%;bottom:46px;transform:rotate(12deg);}
.gift-stage:not(.is-live) .toy:nth-child(13){left:55%;bottom:52px;transform:rotate(-9deg);}
.gift-stage:not(.is-live) .toy:nth-child(14){left:68%;bottom:46px;transform:rotate(5deg);}
.gift-stage:not(.is-live) .toy:nth-child(15){left:80%;bottom:50px;transform:rotate(-11deg);}

/* ============ 6. お問い合わせ（灯りの灯る場所） ============ */
.section--contact{
  background:linear-gradient(to bottom,#f1efe4 0%,#edeee2 100%);
}
/* contact.htmlの導入見出し（CONTACT・h1）を中央寄せに（社長指示4・5）。
   本文リード・フォームは左揃えのまま＝見出しだけセンターに揃える */
.section--contact .eyebrow,
.section--contact .section__title{
  text-align:center;
}
/* 下草をフッターに接続する（社長指示6→再指摘）。素材 layer-foreground-undergrowth.webp は
   画像の最下部に約7%の透明帯があり、bottom:0 では「草の根元」がセクション下端(=フッター上端)に
   届かず、草とフッターの間に生成りの空白帯が見えていた。画像をその透明帯ぶん下げて根元を
   セクション下端へ密着させ、はみ出した透明帯＋根元の数pxは section の overflow:hidden でクリップする。
   セクション幅=ビューポート幅のため、透明帯量（画像高の約7%＝画像幅の約4.7%）に追従する vw で指定し、
   どの画面幅でも隙間が出ないようにする（bottom は%だと親高さ基準でずれるため vw を使う）。 */
.bg-layer--undergrowth-soft{bottom:-5vw;left:0;width:100%;opacity:.4;}
.contact-form{
  margin-top:2.6em;
  background:var(--scrim);
  border:1px solid rgba(122,154,107,.28);
  border-radius:var(--radius-card);
  padding:clamp(24px,4vw,40px);
  box-shadow:var(--card-shadow);
}
.form-field{margin-bottom:1.4em;}
.form-field label{
  display:block;margin-bottom:.5em;
  font-weight:700;font-size:0.9375rem;letter-spacing:.04em;
  color:var(--color-ink);
}
.form-req{
  display:inline-block;margin-left:.5em;
  padding:.1em .6em;
  font-size:0.6875rem;font-weight:700;letter-spacing:.06em;
  color:var(--color-base);background:var(--color-moss); /* 生成り文字は苔深緑背景でAA確保（中間緑では約4:1で不足のため） */
  border-radius:var(--radius-pill);
  vertical-align:middle;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:.9em 1em;
  font-family:inherit;font-size:1rem;line-height:1.7;
  color:var(--color-ink);
  background:var(--color-card);
  border:1.5px solid rgba(122,154,107,.5);
  border-radius:var(--radius-input);
  transition:border-color .25s ease,box-shadow .25s ease;
}
.form-field textarea{resize:vertical;min-height:140px;}
.form-field input::placeholder,
.form-field textarea::placeholder{color:rgba(43,53,42,.7);} /* AA基準4.5:1確保のため不透明度を.45→.7へ */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--color-mid-green);
  box-shadow:0 0 0 3px rgba(156,196,206,.35); /* 水色のやわらかいリング＝灯りの反射 */
}
.cf-turnstile{margin-bottom:1.4em;}
.contact-form__submit{
  width:100%;margin-top:.4em;
  /* §24 案A: 墨緑インク輪郭は .btn--primary 側へ移設し全金CTAで共通化（送信だけ縁がある状態を解消）。
     このボタンも .btn--primary を併用するため輪郭は共通定義から継承される */
}
.contact-form__status{
  margin-top:1em;
  font-size:0.9375rem;font-weight:700;letter-spacing:.03em;
  color:var(--color-moss);
  min-height:1.4em;
}
.contact-form__status.is-error{color:#a4503c;}
.contact-form__note{
  margin-top:1.4em;
  font-size:0.8125rem;letter-spacing:.03em;
  color:var(--color-moss);opacity:.85;
}

/* プライバシーポリシー同意（送信ボタン直前） */
.form-consent{margin-bottom:1.6em;}
.form-consent__label{
  display:flex;align-items:flex-start;gap:.6em;
  cursor:pointer;
  font-size:0.9375rem;line-height:1.7;letter-spacing:.03em;
  color:var(--color-ink);
}
.form-consent__check{
  flex:none;width:1.2em;height:1.2em;margin-top:.28em;
  accent-color:var(--color-moss);cursor:pointer;
}
.form-consent__text a{
  color:var(--color-moss);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}
.form-consent__text a:hover{color:var(--color-mid-green);}
.form-consent__note{
  margin-top:.7em;padding-left:1.8em;   /* チェックボックス幅ぶん本文とインデントを揃える */
  font-size:0.8125rem;letter-spacing:.02em;line-height:1.7;
  color:var(--color-moss);opacity:.95; /* .82では対背景約4.4:1で不足のため引き上げAA確保 */
}

/* ============ フッター（共通） ============ */
/* フッターは本体コンテンツと地続きに（社長指示14／参考「みさとと。」）。
   独立した深緑ブロックをやめ、上端を透明から生成りへ滑らかに繋いで境界線を消す。
   index.htmlではcanvasの森／広場から、下層ページでは生成りの地から、そのまま溶け込む。 */
.site-footer{
  position:relative;z-index:2; /* 固定canvas(#scene z:0)より前面へ。静的要素はcanvasの背面に潜るため明示 */
  background:linear-gradient(to bottom,
    rgba(243,241,230,0) 0%,
    rgba(243,241,230,0.72) 34%,
    var(--color-base) 100%);
  color:var(--color-ink);
  padding:clamp(72px,10vw,132px) var(--pad-x) clamp(32px,5vw,52px);
}
.site-footer__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
}
.site-footer__logo{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:800;font-size:1.15rem;letter-spacing:.06em;
  color:var(--color-moss);
}
/* §23-A 第1案: フッターも苔深緑に統一（旧・金は生成り地で1.6:1と視認性が最も弱かったため） */
.site-footer__logo-mark{width:22px;height:22px;color:var(--color-moss);flex:none;}
.site-footer__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;
}
.site-footer__nav a{
  font-weight:500;font-size:0.9375rem;letter-spacing:.04em;
  color:var(--color-ink);opacity:.86;
  transition:opacity .25s ease,color .25s ease;
}
.site-footer__nav a:hover{opacity:1;color:var(--color-moss);text-decoration:underline;text-underline-offset:4px;}
/* プライバシーポリシーは主要4リンク（トップ・実績・プロフィール・お問い合わせ）の下へ改行し、
   一段小さく中央寄せで添える（社長指示6・共通フッター統一のため全ページ共通で適用） */
.site-footer__nav a[href="privacy.html"]{
  flex-basis:100%;
  text-align:center;
  font-size:0.8125rem;
}
.site-footer__copy{
  font-size:0.8125rem;letter-spacing:.06em;color:var(--color-moss);opacity:.8;
}

/* ============ 個別作品ページ（work-detail.html／§16-2） ============ */
/* 固定ヘッダーに先頭のパンくずが潜り込まないよう、先頭セクションへ余白を確保 */
.work-detail__section{
  padding:calc(var(--header-h) + clamp(40px,7vh,88px)) 0 clamp(48px,7vh,90px);
  background:linear-gradient(to bottom,#f2efe0 0%,var(--color-base) 100%);
}

/* パンくず（丸ゴ13px・区切りは手描き風の小さな矢印／§16-2-1） */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.3em .5em;
  font-size:0.8125rem;letter-spacing:.04em;
  color:rgba(43,53,42,.7);
}
.breadcrumb a{
  color:rgba(43,53,42,.7);
  transition:color .25s ease;
  text-decoration:underline;text-decoration-color:rgba(122,154,107,.4);text-underline-offset:3px;
}
.breadcrumb a:hover{color:var(--color-moss);text-decoration-color:var(--color-mid-green);}
.breadcrumb__sep{width:12px;height:12px;flex:none;color:var(--color-mid-green);opacity:.7;}
.breadcrumb__current{color:var(--color-ink);font-weight:700;}

/* 作品名（明朝h1）＋バッジ＋制作日 */
.work-detail__head{margin-top:1.6em;}
.work-detail__title{
  font-size:clamp(1.6rem,4.4vw,2.75rem);font-weight:800;line-height:1.45;letter-spacing:.04em;
  color:var(--color-ink);
}
.work-detail__headmeta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8em 1.2em;   /* バッジ群と制作日の間隔(制作日は少し離す) */
  margin-top:1em;
}
/* §19-2改訂: カテゴリ→種別のバッジ群を works.html の行と同じ間隔(.6em)で括る＝
   一覧と個別で「カテゴリ→種別」の距離感を統一。制作日はこのラッパーの外で従来どおり離す。 */
.work-detail__badges{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em .6em;
}
.work-detail__date{
  font-size:0.8125rem;letter-spacing:.06em;color:var(--color-moss);
}

/* メイン画像（大・角丸16px＋カード影） */
.work-detail__visual{
  margin-top:2em;max-width:820px;
  background:linear-gradient(135deg,#f6f4ea 0%,#eef1e4 100%);
  border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);
  padding:clamp(20px,4vw,44px);
}
.work-detail__visual svg{display:block;width:100%;height:auto;}
.work-detail__caption{
  margin-top:1em;font-size:0.8125rem;letter-spacing:.04em;line-height:1.7;
  color:var(--color-moss);opacity:.85;text-align:center;
}

/* スペック表（硬い罫を避け、中間緑の淡い区切り＋余白で柔らかく／§16-2-4・§16-5） */
.spec{
  margin-top:2.6em;max-width:820px;
  background:var(--color-card);
  border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);
  padding:clamp(6px,1.5vw,14px) clamp(20px,4vw,40px);
}
.spec__row{
  display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:.6em 1.6em;
  padding:1.1em 0;
  border-bottom:1px solid rgba(122,154,107,.3);
}
.spec__row:last-child{border-bottom:none;}
.spec__term{
  display:flex;align-items:center;gap:.5em;
  font-weight:700;letter-spacing:.04em;color:var(--color-ink);
}
.spec__icon{width:20px;height:20px;flex:none;color:var(--color-mid-green);}
.spec__desc{
  line-height:1.9;letter-spacing:.03em;color:var(--color-ink);
}

/* 本文（読み物幅720px／§16-2-5） */
.work-detail__body{
  margin-top:2.6em;max-width:var(--maxw-read);
  font-size:1rem;line-height:1.95;letter-spacing:.03em;color:var(--color-ink);
}

/* ============ §19-3 個別ページの中央寄り（A案） ============ */
/* ブロックの重心を中央へ集める中央「寄り」。読み物(本文段落・スペックのdt/dd対応)は
   左揃えを維持し可読性を守る(WCAG 1.4.8／§16-2-4・§16-2-5)。見出し系のみセンター。 */
.work-detail__section .breadcrumb{justify-content:center;}
.work-detail__section .work-detail__title{text-align:center;}
.work-detail__section .work-detail__headmeta{justify-content:center;}   /* バッジ群＋制作日をまとめて中央に */
.work-detail__section .work-detail__visual{margin-inline:auto;}         /* max-width:820px は据え置き。figcaptionは既に中央 */
.work-detail__section .spec{margin-inline:auto;}                        /* ブロックのみ中央。内部dt/ddグリッド・左揃えは不変 */
.work-detail__section .work-detail__body{margin-inline:auto;}           /* max-width:720px は据え置き。段落は左揃えのまま */

/* 前後の作品ナビ（§16-2-6） */
.work-nav{
  padding:clamp(40px,6vh,72px) var(--pad-x);
  background:linear-gradient(to bottom,var(--color-base) 0%,#eef0e2 100%);
}
.work-nav__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:var(--maxw);margin:0 auto;
}
.work-nav__link{
  display:flex;flex-direction:column;gap:.5em;
  padding:1.2em 1.5em;
  background:var(--color-card);
  border-radius:var(--radius-card);
  box-shadow:var(--card-shadow);
  transition:transform .3s ease,box-shadow .3s ease;
}
.work-nav__link:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-hover);}
.work-nav__link--next{text-align:right;}
.work-nav__dir{
  display:inline-flex;align-items:center;gap:.4em;
  font-size:0.8125rem;font-weight:700;letter-spacing:.08em;
  color:var(--color-moss);
}
.work-nav__link--next .work-nav__dir{justify-content:flex-end;}
.work-nav__dir svg{width:16px;height:16px;flex:none;color:var(--color-gold);}
.work-nav__title{
  font-size:0.9375rem;font-weight:700;line-height:1.6;letter-spacing:.03em;
  color:var(--color-ink);
}

/* 一覧に戻る＋相談CTA（サブ線＋主金塗りの2ボタン／§16-2-7） */
.work-detail__actions{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;
  margin-top:1.6em;
}
.work-detail__actions .btn{display:inline-flex;align-items:center;gap:.4em;}
.work-detail__actions .btn__icon{width:18px;height:18px;flex:none;}

/* ============ プライバシーポリシー（privacy.html 専用） ============ */
/* 固定ヘッダーの下に本文が潜り込まないよう、先頭で高さぶんの余白を確保 */
.legal{
  padding:calc(var(--header-h) + clamp(48px,8vh,96px)) var(--pad-x) var(--sec-y);
  background:linear-gradient(to bottom,#f2efe0 0%,var(--color-base) 40%);
}
.legal__inner{max-width:var(--maxw-read);margin:0 auto;}
.legal__lead{
  margin-top:1.4em;
  font-size:1rem;line-height:1.95;letter-spacing:.02em;
  color:var(--color-ink);
}
.legal__block{margin-top:2.4em;}
.legal__block-title{
  font-size:1.1875rem;font-weight:800;letter-spacing:.03em;
  color:var(--color-moss);
  padding-left:.7em;border-left:4px solid var(--color-gold);
  margin-bottom:.7em;
}
.legal__text{
  font-size:0.9375rem;line-height:1.95;letter-spacing:.02em;
  color:var(--color-ink);white-space:pre-line;   /* copy.mdの改行・箇条書きをそのまま保持 */
}
.legal__link{margin-top:1.2em;}
.legal__link a{
  display:inline-flex;align-items:center;gap:.4em;
  color:var(--color-moss);font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}
.legal__link a:hover{color:var(--color-mid-green);}
.legal__meta{
  margin-top:2.8em;padding-top:1.4em;
  border-top:1px solid rgba(122,154,107,.28);
  font-size:0.875rem;letter-spacing:.04em;
  color:var(--color-moss);opacity:.9;
}

/* ============ ナビの現在ページ表示（aria-current="page"） ============ */
.site-nav__list a[aria-current="page"]{
  color:var(--color-moss);
  text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--color-gold);
}
/* §24 ヘッダーCTAは常に同一の行動喚起ボタンのため、現在ページの苔リング演出は設けない。
   （aria-currentの有無に関わらず .site-header__cta の2px墨緑縁のみで全ページ統一） */
.site-footer__nav a[aria-current="page"]{
  opacity:1;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--color-gold);
}

/* ============ トップ「旅」ページ（index.html） ============ */
/* WebGL起動前・フォールバック時のsky base（ピンク寄り）。has-webgl時はcanvasが覆う */
body.page-journey{
  background:linear-gradient(to bottom,#F6D3C8 0%,#EBD9CC 46%,#E7E2CE 100%);
}
.journey{position:relative;z-index:2;}

/* 起点（FV）＝雲の突き抜け。フォールバック時は通常の1画面ヒーローとして見える */
.journey__hero{
  position:relative;min-height:100vh;overflow:hidden;
}
.journey__fallback{position:absolute;inset:0;z-index:0;overflow:hidden;}
.journey__fallback-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* フォールバックの多層パララックス面（中景・頭上・足元）。will-changeでスクロール追従を軽く */
.journey__flayer{position:absolute;left:0;width:100%;will-change:transform;}
.journey__flayer img{display:block;width:100%;height:auto;}
/* .journey__flayer--mid（中景帯）は§9改訂でFVから廃止したためセレクタも除去 */
.journey__flayer--foliage{top:-6%;height:34%;overflow:hidden;}
.journey__flayer--foliage img{height:100%;object-fit:cover;object-position:center top;}
.journey__flayer--under{bottom:-6%;opacity:.9;}
/* 見出し・リードの地となる光のにじみ（中央上部scrim・可読性の保険）。
   【2026-08-04 改訂・§9可読性】大型木で上部の窓が狭まる分、scrimを少し濃く・上に寄せる。
   中心を 50% 25%→50% 20% へ上げ、核を濃く(0.86→0.90)、縦の広がりを締めて(70%→62%)
   h1ブロック(上部12〜42%)に光を集約する。 */
.journey__scrim{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(90% 58% at 50% 20%,
    rgba(243,241,230,0.90) 0%,
    rgba(243,241,230,0.55) 42%,
    rgba(243,241,230,0) 62%);
}
/* 起点コピー（中央上部センター配置）。§9改訂でh1ブロックを上部12〜42%へ集約（top 16%→13%） */
.journey__copy{
  position:absolute;left:50%;top:13%;transform:translateX(-50%);
  z-index:10;width:min(92%,860px);text-align:center;
  color:var(--color-ink);text-shadow:0 2px 16px rgba(243,241,230,.9);
}
/* #journeyCopy内の全テキストを中央揃えに（社長指示・中央寄せ）。
   親の text-align:center を各テキスト要素へも明示し、確実に中央へ揃える */
#journeyCopy,
#journeyCopy .hero__eyebrow,
#journeyCopy .hero__title,
#journeyCopy .hero__lead{
  text-align:center;
}
/* eyebrowは親(.journey__copy)から強いにじみ(0 2px 16px)を継承し、上部scrimの最も明るい位置に
   あるため、白いにじみが箱状の「枠」に見えてh1・リードより目立ちすぎる。ハローを弱めて枠を
   目立たなくする。可読性はmoss色＋弱いにじみで維持する（社長指示・枠を目立たなく） */
#journeyCopy .hero__eyebrow{
  text-shadow:0 1px 4px rgba(243,241,230,.7);
}
/* FV見出し（h1）は上の h1,h2 ルールで明朝。ここでは字間だけ微調整する
   （明朝は字面がしっかりしているので既定寄りの僅かな詰めで整える） */
#journeyCopy .hero__title{
  letter-spacing:.03em;
}
/* リード文は森の緑に重なるため、二重ハローで文字の輪郭を保ち可読を確保（雲撤去の副作用対策） */
#journeyCopy .hero__lead{
  position:relative; /* 直下の局所scrim(::before)の基準 */
  text-shadow:0 1px 4px rgba(243,241,230,.95),0 2px 14px rgba(243,241,230,.9);
}
/* リード文の背後にのみ専用の局所scrim（生成りの帯）を敷く。中央大木の明るい葉と重なる位置で
   全面scrimだけでは墨緑文字が霞むため、文字の直下だけ不透明度を確実に確保してWCAG AAを満たす（社長指示1追加対応）。
   z-index:-1で親内(z:10)の文字の背後・全面scrim(z:8)より前に描く */
#journeyCopy .hero__lead::before{
  content:"";
  position:absolute;
  inset:-0.55em -1.4em;
  z-index:-1;
  border-radius:1.6em;
  background:radial-gradient(78% 118% at 50% 50%,
    rgba(243,241,230,0.94) 0%,
    rgba(243,241,230,0.86) 58%,
    rgba(243,241,230,0) 100%);
  pointer-events:none;
}

/* has-webglでない/フォールバック時：スクロールトラックは高さ0 */
.journey__track{height:0;}

/* 終着点＝プルバックで着地した広場。3方向CTAへ分岐する */
.journey__end{
  position:relative;z-index:2;
  padding:var(--sec-y) var(--pad-x);
  background:linear-gradient(to bottom, rgba(228,188,106,0.16) 0%, rgba(243,241,230,0.94) 60%);
}
/* 終着点はお問い合わせフォームのみ（社長指示：見出し・リード・3方向CTAを廃し一本化）。
   フォーム幅を読みやすい幅に抑え、パネル内で中央に置く */
.journey__end-inner{max-width:var(--maxw-read);margin:0 auto;text-align:center;}
.journey__end .contact-form{
  max-width:640px;
  /* リード文と最初のラベル(お名前)の間に読みやすい余白を確保（社長指示・余白追加） */
  margin:2.6em auto 0;
  text-align:left; /* 親のcenterを打ち消し、ラベル・入力は左揃え */
}
/* has-webgl時は終着点パネル自体が器になるため、フォームのカード装飾を外して二重カードを避ける
   （森の上の停留パネルにフォームが直接載っているように馴染ませる）。
   フォールバック時はフォームのscrimカードを残し、素の背景でも読みやすさを確保する */
html.has-webgl .journey__end .contact-form{
  background:transparent;border:none;box-shadow:none;padding:0;
}
.journey__end-title{
  font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;line-height:1.5;letter-spacing:.04em;
}
.journey__end-lead{
  margin:1.2em auto 0;max-width:34em;
  font-size:clamp(1rem,2vw,1.1875rem);line-height:1.9;letter-spacing:.04em;
}

/* ---- has-webgl：canvasを主役の背景に。起点コピーを固定オーバーレイ化し、
   スクロールトラックで旅の尺（カメラ語彙4段階）を確保、終着点は森の上に着地させる ---- */
html.has-webgl .journey__hero{
  position:fixed;inset:0;min-height:0;z-index:5;pointer-events:none;
}
html.has-webgl .journey__copy{pointer-events:auto;} /* コピー内リンクはクリック可 */
html.has-webgl .journey__hero .hero__scroll{pointer-events:auto;}
/* スクロールトラック＝雲突き抜け→俯瞰パン→ズームイン(3停留点)→プルバックを再生する尺。
   参考「みさとと。」の約20画面に合わせ 15〜20画面分を確保（hero 100vh＋track＋終着点で計約18画面）。
   マップ平面上の俯瞰パン→3ランドマークへのズームイン→プルバックに十分な緩急を配分する。 */
html.has-webgl .journey__track{height:1700vh;}
/* 終着点は森（canvas）の上に半透明パネルで着地。
   下側に約1画面ぶんの余白を確保し、最下部までスクロールするとフォームパネルが画面上へ抜け、
   固定canvasが描く円形（縁マスク）の見下ろしマップ全景が、フッターの上にまるごと現れるようにする（社長指示5） */
html.has-webgl .journey__end{
  background:transparent;
  padding-top:clamp(80px,14vh,180px);
  padding-bottom:min(96vh,880px);
}
html.has-webgl .journey__end-inner{
  /* 【可読性の根本対処】背景アルファ0.95＋backdrop-filterを固定WebGL canvas(#scene)の上に重ねると、
     GPUの合成経路によってはアルファが指定どおりに合成されず背後の金の光(俯瞰マップ・光の粒)がにじみ出て、
     墨緑ラベルが薄いグレーに見える合成アーティファクトが発生していた（computed値は0.95・opacity:1でも実描画が透ける）。
     そのため0.86→0.95への引き上げでは解消しなかった。テキスト直下を完全不透明(#F8F6EE)にして合成経路に依存させず、
     墨緑#2B352A × 不透明#F8F6EE で約11:1（WCAG1.4.3 AA 4.5:1を大きく上回る）を確保する。
     不透明化によりbackdrop-filterは視覚効果を持たない（背後は完全に隠れる）うえ、上記アーティファクトの元凶のため除去した。 */
  background:var(--color-card);
  border:1px solid rgba(122,154,107,.24);
  border-radius:var(--radius-card);
  /* 横パディングは48pxに抑える。64pxだとリード第1文が約1pxはみ出して「い。」が孤立改行するため、
     内容幅を確保して指示どおり2文2行のきれいな改行にする（社長指示3・改行を読みやすく） */
  padding:clamp(32px,5vw,64px) clamp(28px,4vw,48px);
  box-shadow:0 20px 52px rgba(43,53,42,.18);
  /* 【合成レイヤー分離の防御的ハードニング】固定WebGL canvas(#scene)の上に重なるこのパネルは、
     背景が完全不透明(#F8F6EE)でも一部GPU/合成経路で背後の金の光がにじむ報告があるため、
     独立した合成レイヤー＋独立スタッキングコンテキストへ明示昇格し、canvas(z:0)と別レイヤーで
     合成させる。実機(モバイル/Intel GPU等)でのブリード対策として有効。
     ※Playwrightのpage.screenshot()で見えるにじみはこの3点でも変化せず、キャプチャ経路特有の
       アーティファクトと切り分け済み（locator.screenshot()・computed値・canvas無しのcontact.htmlは正常）。 */
  position:relative;
  z-index:10;                 /* #scene(z:0)・親.journey__end(z:2)より確実に前面 */
  isolation:isolate;          /* 独立したスタッキングコンテキストを強制 */
  transform:translateZ(0);    /* 独立したGPU合成レイヤーへ昇格させ、canvasと同一レイヤーで混色させない */
}

/* ============ ランドマーク停留カード（DOMオーバーレイ・二層構造） ============ */
/* フォールバック（非has-webgl）では非表示＝同じ導線は終着点CTA／ヘッダーナビに存在する。
   has-webgl時のみ固定オーバーレイとして表示し、opacity/transformはscene.jsが
   スクロール進行に同期して制御する（初期はopacity:0で潜ませる）。 */
.journey__stops{display:none;}
html.has-webgl .journey__stops{display:block;}
/* 停留カードは画面中央にもう少し大きく（社長指示6/8/10）。
   位置の transform（translate(-50%,-50%)＋出入りの上昇）はscene.jsが毎フレーム上書きする。 */
html.has-webgl .stop-card{
  position:fixed;z-index:6;
  left:50%;top:50%;
  width:min(520px,90vw);
  padding:clamp(30px,3.4vw,46px);
  background:rgba(248,246,238,0.92);
  border:1px solid rgba(122,154,107,.26);
  border-radius:var(--radius-card);
  box-shadow:0 24px 60px rgba(43,53,42,.24);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;
  will-change:opacity,transform;
}
/* WORKS停留カード（橋）とABOUT停留カード（東屋）は背後のイラスト（木目・橋）が明るく密で、
   共通の0.92scrimでは本文が透けて低コントラストになる（デザイナー指摘）。生成りを不透明
   (#F8F6EE)にして可読性を確保し、CONTACT（古木）を含む3枚を不透明パネルで統一する。 */
html.has-webgl #stopBridge,
html.has-webgl #stopPavilion,
html.has-webgl #stopOldtree{
  background:#F8F6EE;
}
.stop-card__eyebrow{
  font-size:.8125rem;font-weight:700;letter-spacing:.22em;
  color:var(--color-moss);margin-bottom:.7em;
}
.stop-card__title{
  font-size:clamp(1.6rem,3.2vw,2.15rem);font-weight:800;line-height:1.4;letter-spacing:.03em;
  color:var(--color-ink);
}
.stop-card__text{
  margin-top:1em;font-size:clamp(1rem,1.4vw,1.0625rem);line-height:1.9;letter-spacing:.03em;
  color:var(--color-ink);
}
/* 停留カードのリンク＝苔ソリッド塗りのピルボタン（3枚統一・§12-1）。
   金＝最終CVに温存するため、奥へ進むナビ導線はメイン色の苔ソリッドで格上げする。 */
.stop-card__link{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:1.4em;
  padding:.7em 1.6em;
  font-weight:700;letter-spacing:.06em;
  color:var(--color-base);              /* 生成り文字 on 苔面＝約8:1でクリア */
  background:var(--color-moss);
  border-radius:999px;                  /* ピル・§3 */
  text-decoration:none;
  /* 墨緑ベースのやわらか落ち影＋インセット1本＝絵本の二重線（§4のCTA共通・黒影禁止） */
  box-shadow:0 6px 18px rgba(43,53,42,.18), inset 0 0 0 1px rgba(243,241,230,.22);
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.stop-card__link:hover{
  transform:translateY(-2px);
  background:#33503A;                    /* 苔をやや深く（§12-1） */
  box-shadow:0 10px 24px rgba(43,53,42,.24), inset 0 0 0 1px rgba(243,241,230,.22);
}
.stop-card__link:focus-visible{
  outline:2px solid var(--color-gold);   /* 苔面上は金の輪郭が視認しやすい */
  outline-offset:3px;
}
.stop-card__link span{transition:transform .25s ease;}
.stop-card__link:hover span{transform:translateX(4px);}

/* ============ 下層ページ共通（works/profile/contact） ============ */
body.page-sub{background:var(--color-base);}
/* 固定ヘッダーに先頭セクションが潜り込まないよう、最初の .section に余白を足す
   （page-head を持つ works.html は page-head 側で確保するため対象外） */
body.page-sub .sub > .section:first-child{padding-top:calc(var(--header-h) + var(--sec-y));}

/* ページ導入（works.html の見出しブロック） */
.page-head{
  position:relative;overflow:hidden;
  padding:calc(var(--header-h) + clamp(48px,9vh,110px)) var(--pad-x) clamp(48px,7vh,90px);
  background:linear-gradient(to bottom,#f2efe0 0%,var(--color-base) 100%);
}
.page-head__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.page-head__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;}
.page-head__title{
  font-size:clamp(1.75rem,5vw,3rem);font-weight:800;line-height:1.4;letter-spacing:.04em;
  margin-top:.2em;
}
.page-head__lead{
  margin-top:1.2em;max-width:var(--maxw-read);
  font-size:clamp(1rem,2vw,1.1875rem);line-height:1.9;letter-spacing:.04em;
}

/* 相談CTA（works.html の軽いサブCTA） */
.section--soft-cta{
  background:linear-gradient(to bottom,var(--color-base) 0%,#eef0e2 100%);
  text-align:center;
}
.soft-cta__text{
  font-size:clamp(1.05rem,2.2vw,1.25rem);font-weight:700;letter-spacing:.03em;
  color:var(--color-moss);
}
.soft-cta__btn{margin-top:1.6em;}

/* ============ メディアクエリ：1024px以下（タブレット） ============ */
@media (max-width:1024px){
  .works__grid{grid-template-columns:repeat(2,1fr);}
  .cta-cards{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}
}

/* ============ メディアクエリ：767px以下（モバイル分岐） ============ */
@media (max-width:767px){
  :root{--pad-x:20px;--sec-y:72px;}
  .section{padding-block:var(--sec-y);}

  /* ハンバーガーメニュー */
  .site-header__toggle{display:flex;}
  .site-nav{
    position:absolute;top:100%;left:0;width:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--color-base);
    border-bottom:1px solid rgba(122,154,107,.28);
    box-shadow:var(--card-shadow);
    max-height:0;overflow:hidden;
    transition:max-height .35s ease;
  }
  .site-nav.is-open{max-height:340px;}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .site-nav__list a{display:block;padding:14px var(--pad-x);border-bottom:1px solid rgba(122,154,107,.16);}
  .site-header__cta{margin:14px var(--pad-x) 18px;text-align:center;}

  /* 見出しの改行をモバイルでのみ有効化（「案件募集中です」を意図した位置で折る） */
  .u-sp-only{display:inline;}

  /* FVの器：正方形だと要素が密集するため高さ確保 */
  .hero__stage{aspect-ratio:auto;min-height:82vh;}
  .hero__copy{top:9%;width:90%;}
  .hero__title{letter-spacing:.02em;}
  .hero__lead{font-size:1rem;}

  /* トップ「旅」：起点コピーを上げ、モバイルも尺は15画面分を確保（俯瞰パン→ズーム3点→引き）。
     負荷は雲・光の粒の間引き（scene.js側isMobile）で吸収し、尺そのものは削らない */
  .journey__copy{top:11%;width:90%;}
  .journey__hero .hero__title{letter-spacing:.02em;}
  html.has-webgl .journey__track{height:1400vh;}

  /* 停留カード：モバイルも画面中央に。幅は画面いっぱい近くまで（社長指示6/8/10） */
  html.has-webgl .stop-card{
    width:min(440px,92vw);
    padding:clamp(24px,6vw,34px);
  }
  .stop-card__title br{display:none;}

  /* FV環境層：写実的な森の背景に埋もれるのを防ぐため、モバイルでは霧・光条・落ち葉の
     濃度とコントラストを上げて視認性を確保（structure.md「FVは全層フル稼働」）。
     不透明度・色・輪郭のみの調整でアニメーションの移動量は変えない（check_motion維持） */
  .hero .drift__fog{
    background:radial-gradient(circle at 50% 50%,
      rgba(150,172,142,0.6) 0%,
      rgba(163,182,156,0.34) 42%,
      rgba(163,182,156,0) 72%);
  }
  .hero .drift__beam{
    background:linear-gradient(to bottom,
      rgba(228,188,106,0.74) 0%,
      rgba(228,188,106,0.26) 46%,
      rgba(228,188,106,0) 80%);
  }
  /* 落ち葉は小さく写実背景に紛れるため、墨緑の落ち影で輪郭を立てる。
     サイズ拡大は width/height で行う（transformは leaf-cross アニメに上書きされるため使わない） */
  .hero .leaf-drift__leaf{
    filter:drop-shadow(0 1px 2px rgba(43,53,42,0.4));
    width:30px;height:30px;
  }

  /* カードは1列 */
  .works__grid{grid-template-columns:1fr;}
  /* 終着点の補助導線カードもモバイルは1列（お問い合わせカードは全幅のまま） */
  .journey__end .cta-cards{grid-template-columns:1fr;}

  /* タブは横スクロール可に */
  .works__tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .works__tab{flex:none;}

  /* 個別作品ページ：ホバーの無い端末では詳細リンクを常時表示（遷移導線を隠さない） */
  .work-card__more{opacity:1;transform:none;}
  /* スペック表はモバイルで縦積み（項目名の上に値）に落とす */
  .spec__row{grid-template-columns:1fr;gap:.3em;}
  /* 前後ナビは1列。次リンクも左寄せにして読みやすく */
  .work-nav__inner{grid-template-columns:1fr;}
  .work-nav__link--next{text-align:left;}
  .work-nav__link--next .work-nav__dir{justify-content:flex-start;}
  /* CTAボタンは縦積みで押しやすく */
  .work-detail__actions{flex-direction:column;}
  .work-detail__actions .btn{width:100%;max-width:320px;justify-content:center;}

  /* 落ち葉はモバイルで7枚に間引く（紙吹雪化・重さ回避／§10-B：モバイル6〜8枚） */
  .env-leaves__leaf:nth-child(n+8){display:none;}
}

/* タッチ端末：つかみ操作は無効（落下＋積もりのみ）＝スクロール阻害を防ぐ。案内文も出さない */
@media (hover:none){
  .recruit__play-hint{display:none;}
}

/* ============ reduced-motion：動きを止めて静止表示 ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  /* WebGL降下演出は起動しない（scene.jsが自身でreduceを検知しreturn）。念のため器も畳む */
  #scene{display:none !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  .bg-layer,.hero__main,.hero__layer,.lerp__pod{transform:none !important;}
  /* 光筋は薄く残して情景を保つ */
  .rays__beam{opacity:.5 !important;}
  .motes__dot,.lerp__dot,.water__glint{opacity:.55 !important;transform:none !important;}
  .flow__line path{stroke-dashoffset:0 !important;}
  /* 主役級ループ層は静止（トラックの流れを止め、葉は開始位置で薄く残す） */
  .drift__track{transform:none !important;}
  .leaf-drift__leaf{opacity:.4 !important;transform:none !important;}
  /* 全面の落ち葉環境層も静止（top/left で散在した位置に薄く残す・§10-B） */
  .env-leaves__leaf{animation:none !important;transform:none !important;opacity:.4 !important;}
  /* 贈り物は物理を起動せず、.gift-stage は relative 帯のまま＝フッター前に整列した静的配置（§10-4） */
  /* §22-5 で lead の sheen sweep を廃止したため、旧 .btn--lead::before / :hover の抑制記述は不要になり削除 */
}