:root{
  /* 色：モノクロ（暖かい中性グレー）。色はこのサイトでは写真だけが持つ */
  --sumi:#141311; --sumi-deep:#000000;
  --ink:#26241f; --paper:#ffffff; --off:#f4f2ef;
  --champ:#c8c3ba; --silver:#8d8880;
  /* 差し色の金。--gold は1px罫線と枠線だけ（明るいので文字には使わない）。
     文字と塗りには --gold-deep を使う（白文字とのコントラストを4.5以上に保つため）。 */
  --gold:#b39456; --gold-deep:#806530; --gold-darkest:#65502a; --gold-pale:#d8c79b;
  --rule:#e0ddd7; --muted:#6e6a63;
  --serif:"Noto Serif JP",'Hiragino Mincho ProN',serif;
  --sans:"Noto Sans JP","Hiragino Sans",sans-serif;
  /* 寸法：骨格の出どころ.md 参照 */
  --page:1200px; --gut:clamp(20px,5vw,56px);
  --gap:33px;                      /* 要素間＝本文の行送り（16×2.08） */
  --sec:clamp(72px,9vw,120px);     /* セクション間 120px */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:2.08;letter-spacing:.06em;font-feature-settings:"palt" 1;line-break:strict;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--sumi);outline-offset:3px}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.col{max-width:34em}
.sec p:not(.note):not(.sign):not(.fv__sub){max-width:34em}
.sec .note{max-width:40em}

/* ── 繰り返す約束：区切りは面ではなく1pxの罫線 ── */
.rule{height:1px;background:var(--sumi);border:0;margin:0}
.rule--silver{background:var(--silver)}
.rule--soft{background:var(--rule)}

/* ── 見出し：巨大な欧文明朝＋直下に画面幅いっぱいの1px ── */
.sec{padding-block:var(--sec)}
.sec--off{background:var(--off)}
.sechead{margin-bottom:var(--gap);display:flex;flex-direction:column;align-items:flex-start}
/* 和文を主役に。英字はその下の小さなラベル（表示順だけ入れ替える） */
.sechead__jp{order:1}
.sechead__en{order:2}
.sechead .rule{order:3}
/* 和文を主役に。明朝で大きく、字間は広げすぎない。
   英字はその下に小さなラベルとして置く */
.sechead__jp{display:block;margin:0;max-width:100%;word-break:keep-all;overflow-wrap:break-word;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.52rem,3.5vw,2.72rem);line-height:1.55;letter-spacing:.1em;
  color:var(--sumi);word-break:auto-phrase;text-wrap:balance}
.sechead__en{display:block;margin-top:14px;font-family:var(--serif);font-weight:300;
  font-size:clamp(.72rem,1vw,.88rem);line-height:1.8;letter-spacing:.3em;
  color:var(--muted);text-indent:0}
.sechead .rule{margin-top:26px;background:var(--gold);transform-origin:left center}
/* 見出しの金線は、画面に入ってから左から右へ一度だけ引かれる。
   JSが .rule--anim を付けた線だけ畳んでおく（JSの無いページでは今までどおり出しっぱなし） */
.rule--anim{transform:scaleX(0);transition:transform 1.25s cubic-bezier(.22,1,.36,1)}
.rule--anim.is-drawn{transform:scaleX(1)}
h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.62rem,3.6vw,3rem);line-height:1.62;
  letter-spacing:.08em;word-break:auto-phrase;text-wrap:balance}
h3{margin:0;font-size:.98rem;font-weight:700;line-height:1.85;letter-spacing:.06em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.note{color:var(--muted);font-size:.86rem;line-height:1.95}

/* ── ヘッダー ── */
.hd{position:fixed;inset:0 0 auto;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.hd__in{display:flex;align-items:center;gap:26px;padding-block:14px}
.hd img{height:26px;width:auto}

/* ── 写真には一切フィルタをかけない ──
   色も階調も撮影者の仕事の一部なので、モノクロ化もコントラスト調整も行わない。
   紙面（文字・罫線・背景）だけをモノクロに保ち、色を持つのは写真だけという構成にする。 */
.hd nav{margin-left:auto;display:flex;gap:26px;font-size:.84rem;letter-spacing:.14em}
.hd nav a{display:grid;gap:1px;justify-items:center;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.hd nav .ja{font-size:.8rem;letter-spacing:.1em;line-height:1.35}
.hd nav .en{font-size:.56rem;letter-spacing:.24em;color:var(--muted);line-height:1.35}
.hd nav a:hover{border-bottom-color:var(--silver);color:var(--sumi)}
@media(max-width:820px){.hd nav{display:none}}

/* ── ボタン（欠落していたため復元。ホバーは色だけ動かす） ── */
/* ── ボタン：金を差し色に使う。1px罫線の矩形で、面は深い金で塗る。
   光沢などの動く装飾は入れない（色の変化だけで見せる）。 */
.btn{position:relative;display:flex;justify-content:center;align-items:center;
  max-width:240px;padding:20px 30px;border:1px solid var(--sumi);border-radius:2px;
  background:transparent;color:var(--sumi);
  font:inherit;font-weight:500;font-size:.88rem;letter-spacing:.16em;
  transition:background-color .38s ease,color .38s ease,border-color .38s ease}
/* 枠線の版（脇役）：墨の枠 → 墨の塗り。金は主役のボタンに取っておく */
.btn:hover{background:var(--sumi);color:#fff;border-color:var(--sumi)}
/* 塗りの版：明るい地のボタンは墨で塗る。金は罫線・日付・料金の印と、
   濃い地のお問い合わせ節に残す（全部を金にすると「申し込み」の合図が消える）。
   ホバーで金へ変わる＝押せることは色の変化だけで示す */
.btn--fill{background:var(--sumi);color:#fff;border-color:var(--sumi)}
.btn--fill:hover{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}

.btn--sm{padding:14px 20px;font-size:.8rem}
/* 日本語＝HTMLの実テキスト（クローラが読むのはこちら）。英語は属性から出してホバー時だけ重ねる */
.btn__t{position:relative;display:block;overflow:hidden}
.btn__ja{display:block;transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
.btn__en{position:absolute;inset:0;display:grid;place-items:center;
  transform:translateY(105%);opacity:0;
  transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .2s ease}
.btn__en::before{content:attr(data-en);font-size:.7rem;font-weight:500;letter-spacing:.14em;white-space:nowrap;
  margin-right:-.14em}  /* 字間は最後の文字の後ろにも入る。その分だけ戻して中央を合わせる */
@media(max-width:480px){.btn__en::before{letter-spacing:.1em;margin-right:-.1em}}
@media(hover:hover){
  .btn:hover .btn__ja{transform:translateY(-130%);opacity:0}
  .btn:hover .btn__en{transform:translateY(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .btn,.btn__ja,.btn__en{transition:none}
}
/* セクション末尾の「一覧を見る」。本文との間は vo の段間と同じ呼吸で空ける */
.secmore{margin-top:clamp(38px,4.2vw,60px)}
.secmore .btn{margin:0 auto}

/* ── セクションのラベル（金の枠） ── */
.label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--sumi);
  border:1px solid var(--silver);border-radius:2px;padding:4px 10px 3px}

/* ── 冒頭の一続き：FVが薄れて風景が現れ、言葉が少し遅れて出る ── */
/* 260vh ＝ 最初の100vh（ヒーローが止まっている分）＋ ピンが効く160vh。
   紙芝居をやめた時点で、末尾の100vhが「何も起きない送り」になっていたので詰めた（400vh→260vh）。
   JS側は total=offsetHeight-innerHeight でピンの全区間を演出に使い、
   仕上がりは p=0.86 付近。残りの14%だけ完成した場面を止めておく */
/* 黒い面に覆わせるぶんの余白が要るのはPCだけ。狭い画面では元の丈に戻す */
.op{position:relative;height:260vh}
@media(min-width:761px){.op{height:340vh}}
.op__anchor{position:absolute;top:52%;left:0;width:1px;height:1px}
.op__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
/* 写真3枚を右側に組む。段を揃えず、1枚を画面の右端へ抜かす（アニヴェルセル型）
   寸法は画面の高さ基準にして、背の低い窓でも下がはみ出さないようにする */
.pv{position:absolute;top:0;right:0;width:52%;height:100%;will-change:transform}
@media(max-width:1150px){.pv{width:48%}}
.pv figure{margin:0;overflow:hidden;background:var(--off)}
.pv figure img{width:100%;height:100%;object-fit:cover;display:block;transition:filter 1s ease}
/* 現れた直後はカラーのまま。1秒おいてJSが is-mono を付け、モノクロへ沈む。ホバーで色が戻る */
.pv figure.is-mono img{filter:grayscale(1)}
.pv figure.is-mono:hover img{filter:grayscale(0)}
@media(hover:none){.pv figure.is-mono img{filter:none}}
@media(prefers-reduced-motion:reduce){
  .pv figure img{transition:none;filter:grayscale(1)}
  .pv figure:hover img{filter:grayscale(0)}
}
/* A（主役）とC（下）は同じ列に入れて必ず接するようにする。高さは列を62:38で分けるので
   窓の高さが変わっても離れない。Bだけ絶対配置で右端へ抜かす。 */
/* A（主役・縦長）とC（下・横長）は右端を30%の位置で揃え、縦に接する。
   B（小）はAの右に残る余白を埋め、画面の右端にぴたりと接する。
   高さは画面比で決め、幅は max-width で抑えて文字に寄らないようにする。 */
.pv .pv__a{position:absolute;right:30%;top:9%;height:48%;aspect-ratio:5/6;max-width:56%}
.pv .pv__b{position:absolute;right:0;top:33%;height:24%;width:30%}
.pv .pv__c{position:absolute;right:30%;top:57%;height:30%;aspect-ratio:2/1;max-width:64%}
.pv__b,.pv__c{opacity:0;will-change:opacity,transform}
.op__scrim{display:none}
.op__words{position:absolute;inset:0;display:grid;align-items:center;opacity:0;will-change:opacity,transform}
/* width:100% がないと .wrap が内容幅に縮んで中央へ寄り、写真に重なる */
.op__words > .wrap{width:100%}
.op__words .sechead,.op__words .words{max-width:min(32em,46vw)}
.op__fv{position:absolute;inset:0;z-index:3;will-change:opacity}
@media(max-width:900px){
  /* 狭い画面では主役1枚を背面に回して、上から白のベールをかける */
  .pv{width:100%}
  .pv .pv__a{inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto}
  .pv__a img{object-position:72% center}
  .pv__b,.pv__c{display:none}
  .op__scrim{display:block;position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(255,255,255,.95) 0%,rgba(255,255,255,.9) 46%,
      rgba(255,255,255,.55) 78%,rgba(255,255,255,.18) 100%)}
  .op__words{align-items:start;padding-top:calc(clamp(56px,14vw,96px) + 48px)}
  .op__words .sechead,.op__words .words{max-width:none}
}
/* 紙芝居（前の場面が止まったまま次が覆い被さる）は2026-10-11にやめた。
   Portraitは普通に上へ流れ、その下に動画が見える空きを置いている。 */
main{position:relative;z-index:1;background:var(--paper)}

/* 動きを減らす設定：ピンを解いて上から順に並べる */
@media(prefers-reduced-motion:reduce){
  .op{height:auto}
  .op__pin{position:static;height:auto}
  .pv{position:relative;width:100%;height:auto;display:grid;grid-template-columns:2fr 1fr 1fr;
    gap:10px;padding:var(--gut)}
  .pv .pv__a,.pv .pv__b,.pv .pv__c{position:static;width:auto;max-width:none;height:auto;inset:auto;
    aspect-ratio:3/4;opacity:1!important;transform:none!important}
  .pv .pv__b,.pv .pv__c{display:block;aspect-ratio:1/1}
  .op__scrim{display:none}
  .op__words{position:relative;opacity:1!important;transform:none!important;padding-block:var(--sec)}
  .op__fv{position:relative;opacity:1!important}
}

/* ── FV：写真フルブリード ── */
.fv{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--paper)}
/* 右寄せの cover。左端から約550pxは白飛びした窓なので、切れるのはそこだけで分からない。
   右側（髪）は横方向には一切切られない。縦は上を残すため35%に寄せる */
.fv img{width:100%;height:100%;object-fit:cover;object-position:right 35%}
@media(max-width:820px){
  /* 縦長の画面では contain だと写真が小さくなるため、顔に寄せて切る */
  .fv img{object-fit:cover;object-position:87% center}
}
/* 写真の左端は純白→薄い窓の描写へ切り替わる境目が縦線に見えるため、白へ溶かして消す */
.fv::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,#fff 0%,#fff 11%,rgba(255,255,255,.55) 22%,rgba(255,255,255,0) 34%)}

/* ── FVが動画のとき ──
   素材は 1080×1920 の縦動画。PCは横幅いっぱい×100vhなので上下が大きく切れる。
   全尺をコンタクトシートで検分して、顔が残る位置が 35% と分かったのでそこで切る
   （50%＝中央だと首から下しか映らないカットが出る）。
   左端の白フェードは top.jpg 専用の処理なので、動画のときは消す。 */
.fv--movie::before{display:none}
.fv--movie video{width:100%;height:100%;object-fit:cover;object-position:50% 35%;
  display:block;background:var(--paper)}
@media(max-width:820px){
  /* 縦長の画面では縦動画をそのまま流す（左右がわずかに切れるだけ） */
  .fv--movie video{object-position:50% 50%}
}
/* 既定のベールは top.jpg（白とびした明るい1枚）に合わせて全面に白を敷いている。
   動画は暗いカットも通るので、同じ量を敷くと映像全体が乳白色になって力が落ちる。
   白は「名前が乗る足元」だけに寄せ、中段は素のまま通す。 */
.fv--movie .fv__veil{
  background:linear-gradient(to bottom,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,0) 50%,
    rgba(255,255,255,.55) 78%,
    rgba(255,255,255,.95) 92%,
    #fff 100%)}
.fv__veil{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,.5) 62%,rgba(255,255,255,.88) 86%,rgba(255,255,255,1) 100%)}
.fv__in{position:absolute;left:0;right:0;bottom:clamp(34px,5vw,68px);z-index:2}
.fv__name{font-family:var(--serif);font-weight:300;font-style:italic;color:var(--sumi);line-height:1;
  font-size:clamp(2.6rem,8.4vw,6rem);letter-spacing:.01em}
.fv__sub{margin-top:14px;color:var(--ink);font-size:.86rem;letter-spacing:.24em}
.fv__scroll{position:absolute;right:var(--gut);bottom:clamp(34px,5vw,68px);z-index:2;color:var(--sumi);
  display:flex;flex-direction:column;align-items:center;gap:14px}
.fv__scroll span{writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.3em}
/* 細い線：上から引かれ、下へ抜けていく（文字は動かさない） */
.fv__scroll i{position:relative;width:1px;height:52px;background:rgba(38,36,31,.16);overflow:hidden}
.fv__scroll i::after{content:'';position:absolute;inset:0;background:var(--sumi);
  transform:scaleY(0);transform-origin:top;
  animation:scrollDrop 2.4s cubic-bezier(.66,0,.34,1) infinite}
@keyframes scrollDrop{
  0%   {transform:scaleY(0);transform-origin:top}
  42%  {transform:scaleY(1);transform-origin:top}
  58%  {transform:scaleY(1);transform-origin:bottom}
  100% {transform:scaleY(0);transform-origin:bottom}
}
@media(prefers-reduced-motion:reduce){
  .fv__scroll i::after{animation:none;transform:scaleY(1)}
}

/* ── 言葉（Joの実文） ── */
.words{max-width:40em}
.words p{font-family:var(--serif);font-size:clamp(1.02rem,1.9vw,1.24rem);line-height:2.3;letter-spacing:.09em}
/* 指定位置の改行。2行目は499px必要なので、それが入る幅でだけ効かせる。
   それより狭い画面では改行をやめ、文節単位の自然な折返しに任せる（崩れを防ぐ） */
.words .wbr{display:none}
@media(min-width:1200px){.words .wbr{display:inline}}
.words .sign{margin-top:26px;font-family:var(--serif);font-style:italic;color:var(--sumi);letter-spacing:.1em}

/* ── ギャラリー：比率混在、約2割をフルブリード ── */
/* ギャラリー：段組みの masonry。列の中を縦に流し、隣の列と段を揃えない */
.gal{columns:4;column-gap:14px}
/* 撮影実績の一覧は1枚を大きく見せる（2026-10-08に4段→3段へ） */
/* 壁として見せたいので、一覧だけ紙面より広く取る */
.wrap--wide{max-width:1680px}
.gal--page{columns:3;column-gap:clamp(14px,1.6vw,22px)}
@media(max-width:1100px){.gal.gal--page{columns:2}}
@media(max-width:700px){.gal.gal--page{columns:1;column-gap:0}}
.gal figure{margin:0 0 14px;break-inside:avoid}
/* 作品は元の比率のまま出す。aspect-ratio と cover は構図を変える加工にあたるため使わない */
.gal img{display:block;width:100%;height:auto;border-radius:4px}
@media(max-width:1180px){.gal{columns:3}}
.gal__more{margin-top:calc(var(--gap) * 1.3);display:flex;justify-content:center}
@media(max-width:700px){.gal{columns:2;column-gap:10px}.gal figure{margin-bottom:10px}}
/* 全幅の写真帯。ページと一緒に動かす（背景固定にすると帯の中で写真が滑り、
   直下のギャラリーが動いて見えるためやめた） */
.bleed{position:relative;margin-inline:calc(50% - 50vw);margin-block:var(--sec);
  height:clamp(300px,52vw,700px);overflow:hidden;background:var(--off)}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ── ギャラリー以降の全セクションの背面（TOPだけ） ──
   main の中に貼り付く1画面ぶんの層。負のマージンで高さは食わない。
   z-index:-1 なので、main の中身は全部この上に乗る。
   ぼかすと縁が透けるので、一回り大きく敷いてからはみ出しを切る。
   ぼかしているのは背面だけで、作品そのものには一切フィルタをかけていない。 */
main.hasbg{background:transparent;
  /* 背面に濃淡が出るぶん、淡い文字をこの中だけ濃くする（全フレームで実測）。
     --champ は装飾の数字に使っているので触らない */
  --muted:#5f5b55; --silver:#5f5b55}
.pagebg{position:sticky;top:0;z-index:-1;height:100vh;margin-bottom:-100vh;
  pointer-events:none;overflow:hidden}
.pagebg video{position:absolute;top:-6%;left:-6%;width:112%;height:112%;max-width:none;
  object-fit:cover;filter:blur(26px) saturate(.7);opacity:.15;display:block}
/* 地色を敷く節は、下の動画が透けるように薄める */
main.hasbg .sec--off{background:rgba(244,242,239,.82)}
main.hasbg .ct{background:rgba(20,19,17,.9)}
/* 金茶の小さい文字は、この背面だと3.9:1まで落ちるのでいちばん濃い金に寄せる
   （ボタンの塗りには使っている色なので、文字の箇所だけを指定する） */
main.hasbg .flow li.is-on i,
main.hasbg .ec__badge span{color:var(--gold-darkest)}
@media(max-width:820px){
  .pagebg video{filter:blur(20px) saturate(.7)}
}
@media(prefers-reduced-motion:reduce){
  .pagebg video{opacity:.1}
  .galsec__run{animation:none}
}

/* 背景固定のパララックス版（プロフィールと料金の間の1枚だけ）。
   ・transform は position:fixed の基準を作ってしまうので使わない
   ・clip-path:inset(0) で fixed の子を帯の中に切り抜く（iOS Safari でも効く。
     background-attachment:fixed はiOSで崩れるため使わない）
   ・すぐ下に写真の集まりが来る場所では使わない（集まりが動いて見える） */
.bleed--fixed{clip-path:inset(0);background:var(--ink)}
.bleed--fixed img{position:fixed;inset:auto;top:0;left:0;width:100vw;height:100vh;height:100svh;
  filter:grayscale(1);transition:filter .7s ease}
/* モノクロで待機し、帯に触れると色が戻る（他セクションと同じ作法）。タッチ端末は常にカラー */
.bleed--fixed:hover img{filter:grayscale(0)}
@media(hover:none){.bleed--fixed img{filter:none}}
@media(prefers-reduced-motion:reduce){
  .bleed--fixed{clip-path:none}
  .bleed--fixed img{position:absolute;inset:0;width:100%;height:100%}
}
@media(prefers-reduced-motion:reduce){
  .bleed{clip-path:none;height:auto}
  .bleed img{position:static;width:100%;height:clamp(240px,42vw,560px)}
}

/* ── 撮影：スクロールで写真が切り替わるピン留め区画 ── */
/* 4段階（写真3枚＋最後のテキスト）。1段あたり約420pxのスクロールになる長さ */
/* ── セクションの中身の現れ方（下から薄く上がる） ──
   .wrap の直下だけが対象。全幅の帯は .wrap の外なので transform がかからない */
.is-rv main.hasbg .wrap > *{opacity:0;transform:translateY(34px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.19,1,.22,1)}
.is-rv main.hasbg .wrap > *.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .is-rv main.hasbg .wrap > *{opacity:1;transform:none;transition:none}
}

/* ── 撮影のご依頼 ──
   絞り（六角アパーチャー）の演出は外した（2026-10-11・将太さんの指示）。
   中央に寄せる。背面の動画はページ全体の層（.pagebg）に任せている。 */
/* この節だけ背面の動画を通さない（左右に流れる作品と白い霞だけにする）。
   1画面ぶん貼り付けて、送ると中身が下へ消え、入れ替わりに受けの一文が上がってくる */
/* プロフィールの紹介映像。肩書きと名前を一行に並べ、その下に16:9で大きく置く */
.pvid{padding-top:0}
.pvid__name{display:flex;align-items:baseline;flex-wrap:wrap;
  gap:clamp(12px,2.2vw,32px);margin:0 0 clamp(18px,2.8vw,32px)}
.pvid__role{font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(.88rem,1.6vw,1.22rem);letter-spacing:.01em;line-height:1.3}
.pvid__nm{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.75rem,5vw,3.5rem);letter-spacing:.07em;line-height:1.14}
.pvid__media{margin:0}
.pvid__media video,.pvid__media iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:#000;border:0;object-fit:cover}
@media(max-width:600px){
  .pvid__name{display:block}
  .pvid__role{display:block;margin-bottom:6px}
}

/* 言葉だけの帯。セクションの切れ目に挟むひと息。
   全画面にはせず、前後のセクションが上下に見える高さで止める（区切りとして働かせる）。
   背景は紙で塞ぐので、背面の動画はここだけ見えない */
.say{position:relative;background:var(--sumi);
  min-height:55vh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(56px,7vw,96px)}
.say__in{width:100%}
.say__en{margin:0;font-family:var(--serif);font-weight:400;color:#fff;
  font-size:clamp(1.5rem,4.2vw,3.25rem);line-height:1.34;letter-spacing:.03em;text-wrap:balance}
.say__ja{margin:1.25em auto 0;max-width:34em;color:rgba(255,255,255,.80);
  font-size:clamp(.88rem,1.5vw,1.1rem);line-height:2.05;letter-spacing:.1em;text-wrap:balance}
/* 折り返しは句点の切れ目だけ。「引き出す」を割らない */
.say__ja span{display:inline-block}
.say--one .say__ja{margin-top:0;max-width:30em;font-family:var(--serif);color:#fff;
  font-size:clamp(1.04rem,2.5vw,1.82rem);line-height:2.05;letter-spacing:.07em;text-wrap:balance}
/* Portraitは貼り付けを外したあと、空の白を1画面ぶん送る。
   main ごとその空白に食い込ませ、Portraitの言葉と帯が続けて見えるようにする。
   （帯だけに負のmarginを付けても .pagebg の -100vh と相殺して効かない） */
@media(min-width:761px){
  main.hasbg{position:relative;z-index:1;margin-top:-100vh}
  /* 1枚目の帯はPortraitを覆い切る役なので全画面。2枚目は区切りのままでよい */
  main.hasbg > section.say:first-of-type{min-height:100vh}
}
@media(max-width:760px){.say{min-height:0;padding-block:clamp(64px,13vw,104px)}}

.shoot{position:relative;background:var(--paper);height:270vh}
.shoot__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;align-items:center}
/* 左右に流す作品。中央の文章に寄らないよう、内側へ向けて消す */
.shcol{position:absolute;top:0;bottom:0;width:clamp(150px,16vw,250px);overflow:hidden;z-index:1;
  pointer-events:none;opacity:.62;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
.shcol--l{left:0}
.shcol--r{right:0}
/* 内側（中央寄り）へ向けて薄れる。2枚のマスクを掛け合わせる */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  .shcol--l{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),
                       linear-gradient(to right,#000 0,#000 48%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),
                       linear-gradient(to right,#000 0,#000 48%,transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect}
  .shcol--r{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),
                       linear-gradient(to left,#000 0,#000 48%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%),
                       linear-gradient(to left,#000 0,#000 48%,transparent 100%);
    -webkit-mask-composite:source-in; mask-composite:intersect}
}
.shcol__run{position:absolute;top:0;left:0;width:100%;display:grid;gap:clamp(10px,1.2vw,18px);
  will-change:transform}
.shcol__run img{width:100%;height:auto;display:block}
/* 文章に重なる幅しかない画面では出さない */
@media(max-width:1000px){ .shcol{display:none} }
/* ピンを解く：狭い画面と、動きを減らす設定 */
.shoot.is-static{height:auto}
.shoot.is-static .shoot__pin{position:static;height:auto;display:block;
  padding-block:calc(var(--sec) * 1.15)}
.shoot.is-static .shoot__in{opacity:1!important;transform:none!important}
.shoot.is-static .shoot__ph{display:none}
.shoot.is-static .shoot__cta{position:static;opacity:1!important;transform:none!important;
  pointer-events:auto;margin-top:clamp(56px,7vw,104px);display:block}

.shoot__in{position:relative;z-index:2;text-align:center;width:100%;
  will-change:opacity,transform}
/* 文字のうしろに白いぼんやりした円を置く。左右に流れる作品の上に薄い霞がかかり、
   見出しから受けの一文までが浮き上がる（文字そのものには何もしない） */
.shoot__in::before{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-10%;transform:translateX(-50%);
  width:min(1020px,108%);height:92%;
  background:radial-gradient(58% 46% at 50% 42%,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.90) 36%,
    rgba(255,255,255,.60) 62%,
    rgba(255,255,255,.18) 82%,
    rgba(255,255,255,0) 100%);
  filter:blur(16px)}
@media(max-width:1000px){ .shoot__in::before{width:118%;height:88%} }
.shoot__in .sechead{margin-bottom:calc(var(--gap) * 1.3)}
.sechead--c{align-items:center}
.sechead--c .sechead__en{margin-right:-.3em}
.sechead--c .rule{max-width:120px;margin-inline:auto}
/* 行は左ぞろえのまま、かたまりを中央に置く（1行ずつ中央にすると読みにくい） */
.shoot__list{max-width:32em;margin-inline:auto;text-align:left}
.shoot__in .needs__lead{max-width:none;margin-top:calc(var(--gap) * 1.4);text-align:center;
  font-weight:600;font-size:clamp(1.2rem,2.1vw,1.62rem);line-height:1.95;
  word-break:auto-phrase;text-wrap:balance}
/* 受けの一文のときだけ浮かぶ笑顔の1枚。文字の足元は白くぼかして守る */
.shoot__ph{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;overflow:hidden}
.shoot__ph img{position:absolute;bottom:0;width:auto;max-width:none;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%)}
/* 横幅が狭いときは中央の一文に寄らないよう、人物の幅で頭打ちにする */
/* 画面端ではなく中央の一文を基準に置く。端から離れすぎないよう max() で止める */
.shoot__ph--l{left:max(-3vw,calc(50% - 719px));bottom:0;height:min(50vh,30vw);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)}
.shoot__ph--r{right:max(-3vw,calc(50% - 680px));height:min(78vh,52vw)}

/* 受けの一文とボタン。上の内容と同じ場所に重ねて置き、入れ替わりに現れる */
.shoot__cta{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  text-align:center;padding-inline:var(--gut);opacity:0;pointer-events:none;
  will-change:opacity,transform}
.shoot__cta.is-on{pointer-events:auto}
.shoot__close{margin:0 auto;max-width:none;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.56rem,3.6vw,2.85rem);line-height:1.68;letter-spacing:.1em;
  word-break:auto-phrase;text-wrap:balance}
.shoot__act{margin:calc(var(--gap) * 1.3) 0 0}
.shoot__act .btn{margin-inline:auto;font-size:.94rem;padding:22px 42px;max-width:280px}
.shoot__list .needs li{border-bottom-color:rgba(38,36,31,.2)}
.shoot__list .needs li i{color:#3b372f}
.shoot__in .sechead--c .sechead__jp{color:var(--sumi)}

/* ── 撮影：こんな方へ ── */
.needs{padding:0;margin:0;list-style:none}
.needs li{list-style:none;padding:17px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:38px 1fr;gap:12px;
  font-family:var(--serif);font-size:1.02rem;letter-spacing:.08em}
.needs li i{font-style:normal;font-family:var(--serif);color:var(--silver);font-size:.8rem;letter-spacing:.12em;padding-top:5px}
.needs li{color:var(--ink)}
/* 一覧を受ける一文。節の締めなので明朝で少し大きく */
.needs__lead{margin:var(--gap) 0 0;font-family:var(--serif);font-size:clamp(1.02rem,1.6vw,1.22rem);
  line-height:1.9;letter-spacing:.08em;color:var(--sumi)}
/* ── お客様の声：文字だけで組む（お客様ご本人の写真は持っていないため） ── */
/* 縦並び。お名前を左の柱に置いて、金の罫線が端まで content を持つ行にする。
   DOMは引用→お名前の順（読み上げの順序を保つ）で、見た目だけ grid で入れ替える。 */
/* ── お客様の声：暖かい暗い地に反転（2026-10-11） ──
   言葉そのものが主役になる唯一の節なので、地を沈めて目を止める。
   純黒ではなく茶に寄せた墨（#2b2622）。金の罫線がここで初めて映える。
   背面の動画がうっすら透けるよう、少しだけ透かしている（お問い合わせ節と同じ作法） */
/* 紙芝居：撮影の節が貼り付いたまま、この節が上へせり上がって覆う。
   覆う側なので地は不透明（透かすと下の白い節が透けて濁る） */
.vosec{background:#2b2622;color:#fff}
@media(min-width:1001px){
  /* Shootingの後ろではなくなったので、せり上がりは外す */
  .vosec{position:relative;z-index:1}
}
@media(prefers-reduced-motion:reduce){
  .vosec{position:static;margin-top:0}
}
.vosec .sechead__jp{color:#fff}
.vosec .sechead__en{color:rgba(255,255,255,.68)}
.vosec .vo__item p{color:rgba(255,255,255,.9)}
.vosec .vo__item figcaption{color:#fff}
.vosec .vo__item figcaption span{color:rgba(255,255,255,.62)}
/* ボタンは濃い地の作法にそろえる（淡い金の枠 → ホバーで塗り） */
.vosec .btn{color:var(--gold-pale);border-color:var(--gold-pale);background:transparent}
.vosec .btn:hover{background:var(--gold-pale);color:var(--sumi);border-color:var(--gold-pale)}

/* ── お客様の声：本の1ページのような組みに（2026-10-11 改） ──
   名前は引用の下へ。区切りは全幅の罫線ではなく、短い金の線。
   1件目だけ大きく置いて、読み出しをつくる */
.vo{margin-top:calc(var(--gap) * 1.6);max-width:34em;margin-inline:auto}
.vo__item{display:block;margin:0;padding-top:0;border-top:0}
.vo__item + .vo__item{margin-top:clamp(44px,5vw,78px);padding-top:clamp(42px,4.6vw,72px);
  position:relative}
.vo__item + .vo__item::before{content:'';position:absolute;top:0;left:0;
  width:64px;height:1px;background:var(--gold)}
.vo__item blockquote{margin:0}
.vo__item p{margin:0;max-width:none;font-family:var(--serif);font-weight:300;
  font-size:1.04rem;line-height:2.3;letter-spacing:.07em;color:var(--ink);text-wrap:pretty}
/* 1件目は少し大きく。ここから読み始めてもらう */
.vo__item:first-child p{font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:2.25;font-weight:300}
.vo__item figcaption{margin-top:clamp(18px,2vw,28px);text-align:right;
  font-size:.84rem;letter-spacing:.16em;color:var(--sumi)}
.vo__item figcaption span{margin-left:6px;font-size:.72rem;letter-spacing:.1em;color:var(--muted)}
@media(max-width:820px){
  /* 左の柱を置く幅がないので、引用の下にお名前を戻す */
  .vo__item{grid-template-columns:minmax(0,1fr)}
  .vo__item blockquote{grid-area:auto}
  .vo__item figcaption{grid-area:auto;margin-top:clamp(18px,4vw,26px);padding-top:0;line-height:1.8}
}

/* ── FLOW：スクロールに合わせて線が引かれ、通過した段だけが立ち上がる ── */
.flow{position:relative;margin:calc(var(--gap) * 1.5) 0 0;padding:0;list-style:none}
.flow::before,.flow::after{content:'';position:absolute;left:31px;top:18px;width:1px}
.flow::before{bottom:18px;background:var(--rule)}
.flow::after{height:var(--p,0px);background:var(--sumi);max-height:calc(100% - 36px)}
.flow li{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:0 clamp(24px,3vw,44px);
  align-items:baseline;padding:clamp(32px,3.4vw,50px) 0;border-bottom:1px solid var(--rule)}
.flow li:last-child{border-bottom:0}
/* 番号は背景色を敷いて線を跨ぐ（線の上に乗っているように見せる） */
.flow i{position:relative;z-index:1;font-style:normal;font-family:var(--serif);font-size:1.7rem;
  font-weight:300;line-height:1;letter-spacing:.06em;text-align:center;color:var(--champ);
  background:var(--off);padding:10px 0;transition:color .55s ease}
.flow li.is-on i{color:var(--gold-deep)}
.flow p{margin:0;font-size:1rem;line-height:2.15;opacity:.3;transform:translateY(10px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1)}
.flow li.is-on p{opacity:1;transform:none}
/* 撮影そのものが本番なので、ここだけ明朝で大きく組む（1行しかない段の間も埋まる） */
.flow--key p{font-family:var(--serif);font-size:1.3rem;line-height:1.7;letter-spacing:.06em}
.flow time{font-size:.68rem;letter-spacing:.26em;color:var(--muted);white-space:nowrap;
  opacity:0;transition:opacity .65s ease .12s}
.flow li.is-on time{opacity:1}
@media(max-width:600px){
  .flow li{grid-template-columns:50px 1fr;gap:0 18px;padding:30px 0}
  .flow::before,.flow::after{left:25px}
  .flow time{grid-column:2;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
  .flow p,.flow time,.flow i{transition:none}
  .flow::after{height:calc(100% - 28px)}
}

/* ── News：日付の3段組み ── */
@media(max-width:700px){}
/* ── メニュー／料金：左に見出しとボタン、右に料金の行 ── */
.pl2__list{margin-top:0}
.pl2__cta{margin-top:calc(var(--gap) * 1.4);max-width:280px;padding:22px 34px}
/* 料金の前提（税込・含まれるもの）と、法人向けの個別見積もりの注記 */
.pl2__lead{margin:0 0 calc(var(--gap) * 1.1);font-size:.92rem;letter-spacing:.06em;line-height:1.9;color:var(--muted)}
.pl2__note{margin:calc(var(--gap) * 1.1) 0 0;font-size:.84rem;letter-spacing:.04em;line-height:1.9;color:var(--muted)}
/* 行：プラン名＋内容＋料金＋丸い矢印。写真は置かない
   （撮影風景の写真が無く、作品を料金の横に飾りで置くと意味づけができないため） */
.pl2__list{padding:0;list-style:none}
.pl2__list li{border-bottom:1px solid var(--rule)}
/* 1行目の上は見出しの罫線が兼ねる（50px間隔で同じ線が2本並ぶのを避ける） */
.pl2__list a{display:grid;
  grid-template-columns:clamp(112px,15vw,216px) minmax(0,1fr) auto 34px;
  gap:clamp(18px,2vw,32px);align-items:start;padding:clamp(26px,3vw,40px) 0}
.pl2__body{display:block}
/* 札は名前の列（152px）に収まらないので、折り返して名前の下に置く */
.pl2__name{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:2px;
  font-family:var(--serif);font-size:1.12rem;letter-spacing:.12em;color:var(--sumi)}
/* 名前の列は最小112px。BEAUTY CONSULTING は字間.2emのままだと156px必要で箱から出るので、
   タブレット帯だけ字を詰めて、入らなければ2行に折り返す */
.pl2__name{min-width:0;overflow-wrap:break-word}
@media(max-width:1000px){
  .pl2__name{font-size:1rem;letter-spacing:.12em}
}
@media(min-width:721px) and (max-width:1000px){
  /* 112pxだと CONSULTING（127px）が入らない。縦積みに切り替わる手前の帯だけ列を広げる */
  .pl2__list a{grid-template-columns:136px minmax(0,1fr) auto 34px}
}
.pl2__tag{flex:0 0 auto;font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  color:var(--paper);background:var(--gold-deep);border-radius:2px;padding:3px 7px 2px}
.pl2__ttl{display:block;font-size:.98rem;font-weight:700;letter-spacing:.05em;line-height:1.7}
.pl2__inc{display:block;margin-top:10px;font-size:.84rem;line-height:1.9;color:var(--muted);text-wrap:pretty}
/* 料金は装飾フォントを使わず本文書体で組む */
/* 金額でないものは少し小さく、控えめに */
.pl2__fee--txt{font-size:.82rem!important;color:var(--muted)!important;letter-spacing:.1em!important}
.pl2__fee{display:block;margin-top:2px;font-size:1.02rem;letter-spacing:.04em;
  color:var(--ink);text-align:right;white-space:nowrap}
/* 金額に添える「（税込）」。数字より小さく、同じ行に収める */
.pl2__tax{font-size:.72em;letter-spacing:.04em;color:var(--muted)}
.pl2__list i{position:relative;display:block;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--rule);transition:background-color .25s ease,border-color .25s ease}
.pl2__list i::before{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;
  margin:-3px 0 0 -4px;border-top:1px solid var(--muted);border-right:1px solid var(--muted);
  transform:rotate(45deg);transition:border-color .25s ease}
.pl2__list a:hover i{background:var(--sumi);border-color:var(--sumi)}
.pl2__list a:hover i::before{border-color:#fff}
.pl2__list a:hover .pl2__ttl{color:var(--sumi)}
@media(max-width:720px){
  /* 4列を置く幅がないので、プラン名→内容→料金の縦積みにして矢印だけ右に出す */
  .pl2__list a{grid-template-columns:minmax(0,1fr) 28px;gap:12px 16px}
  .pl2__name{grid-area:1 / 1;margin-top:0}
  .pl2__body{grid-area:2 / 1}
  .pl2__fee{grid-area:3 / 1;margin-top:0;text-align:left}
  .pl2__list i{grid-area:1 / 2;width:28px;height:28px;align-self:center}
}
/* 補足（追加写真・申し込み方法） */
.pl__opt{display:grid;grid-template-columns:auto 1fr;gap:0 24px;margin:var(--sec) 0 0;
  border-top:1px solid var(--rule)}
.pl__opt dt{padding:16px 0 0;font-size:.8rem;letter-spacing:.1em;color:var(--muted)}
.pl__opt dd{margin:0;padding:16px 0 0;font-size:.92rem;letter-spacing:.04em}
.pl__opt dt:not(:first-of-type),.pl__opt dd:nth-of-type(n+2){border-top:1px solid var(--rule);margin-top:16px;padding-top:16px}
/* 見出しのすぐ下に置くときは、セクション間の余白ではなく見出し直下の間隔にする */
.sechead + .pl__opt{margin-top:40px}
.pl__opt .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
@media(max-width:900px){
  .pl__opt{grid-template-columns:1fr;gap:0}
  .pl__opt dd{padding-top:6px}
  .pl__opt dt:not(:first-of-type){margin-top:16px;padding-top:16px}
  .pl__opt dd:nth-of-type(n+2){border-top:0;margin-top:0;padding-top:6px}
}

/* ── イベント：カード2枚。日付の札を写真の左上に重ねる ── */
/* 常に2枚表示。左右のボタンと自動送りで切り替える */
.ec{position:relative;margin-top:calc(var(--gap) * 1.4)}
.ec__view{overflow:hidden}
.ec__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - clamp(12px,1.7vw,24px));
  gap:clamp(24px,3.4vw,48px);transition:transform .8s cubic-bezier(.4,0,.2,1)}
/* 左右のボタン。写真の高さの中央に置く */
.ec__nav{position:absolute;top:calc((100% - 28.125vw) / 2 + 14.06vw);z-index:2;
  width:44px;height:44px;border:1px solid var(--rule);border-radius:50%;background:var(--paper);
  cursor:pointer;transition:background-color .25s ease,border-color .25s ease}
.ec__nav::before{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -5px;
  border-top:1px solid var(--sumi);border-right:1px solid var(--sumi);transform:rotate(45deg);
  transition:border-color .25s ease}
.ec__nav--prev{left:-22px}
.ec__nav--prev::before{margin-left:-3px;transform:rotate(-135deg)}
.ec__nav--next{right:-22px}
.ec__nav:hover{background:var(--sumi);border-color:var(--sumi)}
.ec__nav:hover::before{border-color:#fff}
.ec__nav:disabled{opacity:.3;cursor:default}
/* 何枚目を見ているかの目印 */
.ec__dots{display:flex;justify-content:center;gap:9px;margin-top:calc(var(--gap) * 1.2)}
.ec__dots span{width:7px;height:7px;border-radius:50%;background:var(--rule);transition:background-color .3s ease}
.ec__dots span.is-on{background:var(--sumi)}
.ec__item{display:flex;flex-direction:column}
.ec__ph{position:relative;margin-bottom:22px}
/* 写真の高さ属性が告知物によってまちまち（900/450）なので、低い方の450pxに固定して段差をなくす */
.ec__ph img{display:block;width:100%;height:450px;object-fit:cover;border-radius:3px}
/* 日付の札。写真の角から少しはみ出させる */
.ec__badge{position:absolute;top:-14px;left:-14px;min-width:92px;padding:10px 12px 8px;
  background:var(--paper);border:1px solid var(--rule);text-align:center;border-radius:2px}
.ec__badge span{display:block;font-size:.68rem;letter-spacing:.14em;color:var(--gold-deep);line-height:1.6}
.ec__badge b{display:block;font-family:var(--serif);font-weight:400;font-size:2.15rem;line-height:1.05;
  letter-spacing:.02em;color:var(--sumi)}
.ec__badge hr{margin:6px 14px;border:0;border-top:1px solid var(--gold-pale)}
.ec__item h3{margin:0;font-size:1.02rem;font-weight:700;line-height:1.85;letter-spacing:.04em}
.ec__time{margin:12px 0 0;font-size:.86rem;letter-spacing:.06em;color:var(--muted)}
/* ボタンは横幅いっぱい。ホバーで塗りに変え、丸い矢印は動かさない */
.ec__btn{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  margin-top:auto;padding:17px 22px;border:1px solid var(--sumi);border-radius:3px;color:var(--sumi);
  font-size:.92rem;font-weight:700;letter-spacing:.06em;text-align:center;
  transition:background-color .25s ease,color .25s ease}
.ec__btn i{position:relative;display:block;width:26px;height:26px;border-radius:50%;
  background:var(--sumi);transition:background-color .25s ease}
.ec__btn i::before{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;
  margin:-3px 0 0 -4px;border-top:1px solid #fff;border-right:1px solid #fff;
  transform:rotate(45deg);transition:border-color .25s ease}
.ec__btn:hover{background:var(--sumi);color:#fff;border-color:var(--sumi)}
.ec__btn:hover i{background:#fff}
.ec__btn:hover i::before{border-color:var(--sumi)}
.ec__item h3 + .ec__time{margin-bottom:var(--gap)}
@media(max-width:820px){
  /* 狭い画面では2枚だと1枚が小さすぎるので1枚ずつ送る */
  .ec__track{grid-auto-columns:100%;gap:0}
  .ec__nav{top:auto;bottom:-6px;width:40px;height:40px}
  .ec__nav--prev{left:calc(50% - 52px)}
  .ec__nav--next{right:calc(50% - 52px)}
  .ec__dots{margin-top:calc(var(--gap) * 2.6)}
}

/* ── News：日付と見出しだけの一覧 ── */
.nx{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,3vw,44px);margin-top:var(--sec)}
.nx__label{padding-top:4px}
.nx__en{display:block;font-family:var(--serif);font-weight:300;font-size:1.9rem;
  line-height:1.1;letter-spacing:.16em;color:var(--sumi)}
.nx__jp{display:block;margin-top:12px;font-size:.78rem;letter-spacing:.26em;color:var(--muted)}
.nx__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.nx__list li{border-bottom:1px solid var(--rule)}
/* 日付を上段・見出しを下段・矢印を右に。配置を明示しないと本文が矢印の列に入る */
.nx__list a{display:grid;grid-template-columns:1fr 34px;grid-template-rows:auto auto;
  column-gap:20px;padding:22px 0;transition:color .25s ease}
.nx__list time{grid-column:1;grid-row:1;font-size:.78rem;letter-spacing:.1em;color:var(--muted)}
.nx__list p{grid-column:1;grid-row:2;margin:8px 0 0;font-size:.98rem;line-height:1.8}
.nx__list i{grid-column:2;grid-row:1 / 3;align-self:center}
.nx__list a:hover p{color:var(--sumi)}
/* 丸い矢印。ホバーで動かさず、色と罫線だけ変える */
/* 一覧の行末の丸い矢印。ホバーで動かさず、塗りと色だけ変える */
.nx__list i{position:relative;display:block;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--rule);transition:background-color .25s ease,border-color .25s ease}
.nx__list i::before{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;
  margin:-3px 0 0 -4px;border-top:1px solid var(--muted);border-right:1px solid var(--muted);
  transform:rotate(45deg);transition:border-color .25s ease}
.nx__list a:hover i{background:var(--sumi);border-color:var(--sumi)}
.nx__list a:hover i::before{border-color:#fff}
/* 「お知らせ一覧を見る」はサイト共通のボタンに揃える */
.nx__more{margin-top:30px}
@media(max-width:700px){
  .nx{grid-template-columns:1fr;gap:20px}
  .nx__list a{grid-template-columns:1fr 26px;gap:12px}
  .nx__list i{width:26px;height:26px}
}


/* ── Profile ── */
.pf{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,60px);align-items:start}
@media(max-width:860px){.pf{grid-template-columns:1fr}}
/* SNS：小さく2つ並べる。ホバーで動かさず色だけ変える */
.sns{display:flex;gap:18px;margin:20px 0 0;padding:0;list-style:none}
.sns a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);
  font-size:.74rem;letter-spacing:.1em;transition:color .25s ease}
.sns svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.sns a:hover{color:var(--sumi)}
.pf__more{margin-top:var(--gap)}
.pf__more .btn{max-width:240px}
.pf img{border-radius:5px;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 20%}
.credits{margin-top:var(--gap);border-top:1px solid var(--sumi)}
.credits div{padding:15px 0;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:130px 1fr;gap:16px}
.credits dt,.credits b{font-size:.78rem;letter-spacing:.16em;color:var(--sumi);font-weight:700}
.credits p{margin:0;font-size:.88rem;line-height:1.95;color:var(--ink)}
@media(max-width:640px){.credits div{grid-template-columns:1fr;gap:4px}}

/* ── Contact ── */
.ct{background:var(--sumi);color:#fff;padding-block:var(--sec)}
.ct .sechead__jp{color:#fff}
.ct .sechead__en{color:rgba(255,255,255,.66)}
.ct .rule{background:var(--gold-pale)}
.ct .sechead__jp{color:var(--champ)}
.ct__acts{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,22px);margin-top:calc(var(--gap) * 1.2)}
.ct__acts .btn{max-width:none;padding:20px 34px}
.ct__acts .btn:not(.btn--ghost){background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
/* 濃い地では墨に反転できないので、明るい金に振って目立たせる（白は使わない） */
.ct__acts .btn:not(.btn--ghost):hover{background:var(--gold);color:var(--sumi);border-color:var(--gold)}
/* 濃い地の上の版。白の罫線で、ホバーで白の塗りに反転する */
.btn--ghost{background:transparent;color:var(--gold-pale);border-color:var(--gold-pale)}
.btn--ghost:hover{background:var(--gold-pale);color:var(--sumi);border-color:var(--gold-pale)}
@media(max-width:600px){
  .ct__acts{flex-direction:column}
  .ct__acts .btn{width:100%;padding:16px 20px}
}

/* ── 下部固定CTA：3つに絞る ── */
.bar{display:none}   /* PCでは出さない。ヘッダーナビで足りるため */
@media(max-width:820px){
  .bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(3,1fr);
    background:var(--paper);border-top:1px solid var(--sumi)}
  body{padding-bottom:62px}  /* 固定バー58px＋余白4px。54pxだと footer の末尾がバーに潜る */
  .fv__in{bottom:calc(54px + clamp(26px,4vw,48px))}
  .fv__scroll{bottom:calc(54px + clamp(26px,4vw,48px))}
}
.bar a{padding:15px 8px;text-align:center;font-size:.82rem;letter-spacing:.14em;border-left:1px solid var(--rule);
  transition:background-color .25s,color .25s}
.bar a:first-child{border-left:0}
.bar a:hover{background:var(--off);color:var(--sumi)}
.bar a.is-key{background:var(--sumi);color:#fff}
.bar a.is-key:hover{background:var(--gold-deep)}

/* ── フッター：お問い合わせと同じ濃い地に、細い罫線で区切って続ける ── */
.ft{background:var(--sumi);color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.16)}
.ft__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,64px);
  padding-block:clamp(44px,5vw,72px)}
.ft__logo{margin:0;font-family:var(--serif);font-style:italic;font-size:1.3rem;letter-spacing:.06em;color:#fff}
.ft__tag{margin:10px 0 0;font-size:.74rem;line-height:1.9;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.ft__h{margin:0 0 18px;font-size:.7rem;font-weight:700;letter-spacing:.26em;color:var(--gold-pale)}
.ft__col ul{margin:0;padding:0;list-style:none}
.ft__col li + li{margin-top:11px}
.ft__soon{font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.4)}
.ft__col a{font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.72);
  transition:color .25s ease}
.ft__col a:hover{color:#fff}
/* フッターのSNSは白抜き */
.sns--ft{margin-top:22px;gap:20px}
.sns--ft a{color:rgba(255,255,255,.6)}
.sns--ft a:hover{color:#fff}
.ft__end{border-top:1px solid rgba(255,255,255,.14)}
.ft__endin{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;padding-block:20px}
.ft__copy{margin:0;font-size:.74rem;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.ft__note{margin:0 0 0 auto;font-size:.72rem;letter-spacing:.06em;color:rgba(255,255,255,.45)}
@media(max-width:820px){
  .ft__in{grid-template-columns:1fr;gap:34px}
  .ft__note{margin-left:0}
}
@media(max-width:820px){.ft{padding-bottom:62px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* ── 下層ページ共通 ── */
.sub .hd{position:sticky}
.sub__head{padding-bottom:0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:calc(var(--gap) * 1.2);
  font-size:.74rem;letter-spacing:.14em;color:var(--muted)}
.crumb a{color:var(--muted);transition:color .25s ease}
.crumb a:hover{color:var(--sumi)}
.crumb span[aria-hidden]{color:var(--champ)}
.sub__lead{max-width:34em;margin:calc(var(--gap) * 1.2) 0 0;
  font-size:.98rem;line-height:2.15;letter-spacing:.05em;color:var(--ink)}

/* ── お問い合わせフォーム ── */
.cfw{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(32px,4.5vw,80px);align-items:start}
.cfw__side{position:sticky;top:calc(clamp(56px,14vw,96px) + 24px)}
.cfw__h{margin:0;font-family:var(--serif);font-weight:300;font-size:1.6rem;
  line-height:1.3;letter-spacing:.12em;color:var(--sumi)}
.cfw__t{margin:18px 0 0;font-size:.88rem;line-height:2.05;letter-spacing:.04em;color:var(--muted)}
.cfw__side .btn{margin-top:calc(var(--gap) * 1.1)}
.cf__row + .cf__row{margin-top:clamp(24px,2.6vw,34px)}
.cf label{display:flex;align-items:center;gap:10px;margin-bottom:12px;
  font-size:.82rem;letter-spacing:.16em;color:var(--sumi)}
.cf label span{font-size:.6rem;font-weight:700;letter-spacing:.1em;color:var(--paper);
  background:var(--sumi);border-radius:2px;padding:3px 7px 2px}
.cf input,.cf select,.cf textarea{display:block;width:100%;box-sizing:border-box;
  padding:15px 17px;font:inherit;font-size:.96rem;color:var(--ink);letter-spacing:.04em;
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  transition:border-color .25s ease}
.cf textarea{resize:vertical;line-height:2}
.cf select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 21px) 50%,calc(100% - 15px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--sumi)}
.cf input::placeholder,.cf textarea::placeholder{color:var(--champ)}
.cf__note{margin:calc(var(--gap) * 1.1) 0 0;font-size:.78rem;line-height:1.9;color:var(--muted)}
.cf__note .ft__soon{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cf__send{margin-top:var(--gap);max-width:240px;border:0;cursor:pointer}
@media(max-width:900px){
  .cfw{grid-template-columns:1fr;gap:var(--sec)}
  .cfw__side{position:static}
}

/* ── ギャラリーの入口：写真を隙間なく敷き詰めた1枚の面（2026-09-29） ──
   ・各画像の flex-basis をアスペクト比に比例させ、flex-grow で行幅を埋める。
     幅が比率どおりに配分されるので、同じ行の写真は高さが揃い、トリミングが要らない
   ・gap は 0。写真どうしが直接触れて、全体がひとつの四角になる
   ・作品はモノクロ既定、ホバー／フォーカスで面ごと発色（Jo Moriyama様の許可取得済み・2026-09-28）
   ・ホバーで変えるのは色と罫線だけ。transform・影・寸法は触らない
   ・タッチ端末はホバーが存在せずモノクロで固定されるため、常にカラーで出す */
/* ── 撮影実績：中央の塊のまわりにも、同じモザイクをぼかして敷く ──
   ぼかすと縁が透けるので一回り大きく敷き、上から地色を重ねて文字を守る */
.galsec{position:relative;overflow:hidden;
  /* 背面を上下いっぱいまで出すぶん、この節の淡い文字だけ濃くする
     （#5f5b55 のままだと見出しの副題とラベルが3.5:1まで落ちる） */
  --muted:#4a463f}
.galsec > .wrap{position:relative;z-index:1}
/* ページより遅く動かすぶん、上下左右に逃げしろが要る（JSで最大±200px動かす）。
   ％ではなく px で取る（SPだと18%が169pxしかなく、上に31pxの隙間が出た） */
.galsec__bg{position:absolute;inset:-240px;pointer-events:none;overflow:hidden;will-change:transform}
/* 同じ1枚を2組、横に並べて流す。1組ぶん送ったところで先頭に戻るので継ぎ目が出ない。
   画像は高さで合わせる（object-fit:cover にすると横が切れて端と端がつながらなくなる） */
.galsec__run{position:absolute;top:0;left:0;height:100%;display:flex;
  animation:galrun 90s linear infinite;will-change:transform}
@keyframes galrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.galsec__bg img{flex:0 0 auto;height:100%;width:auto;max-width:none;display:block;opacity:.8}
.galsec__bg .m-sp{display:none}
/* 文字が乗る帯（見出し・ラベル・ボタン）だけ地色を厚く重ね、
   中央の塊の高さの帯は薄くして写真が分かるようにする。
   中央の塊は不透明なので、この帯で見えているのは左右の余白だけ */
/* 地色は節そのものに重ねる。背面は -5% ずつ外へ出しているので、
   背面側に重ねると％が5%ずれて、文字の帯の保護が効かなくなる（実際に踏んだ） */
.galsec::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(244,242,239,.78) 0%,
    rgba(244,242,239,.72) 8%,
    rgba(244,242,239,.72) 21%,
    rgba(244,242,239,.44) 27%,
    rgba(244,242,239,.44) 67%,
    rgba(244,242,239,.72) 74%,
    rgba(244,242,239,.72) 93%,
    rgba(244,242,239,.78) 100%)}
@media(max-width:760px){   /* 中央のモザイクの切り替えと同じ境目にそろえる */
  .galsec__bg .m-pc{display:none}
  .galsec__bg .m-sp{display:block}
  /* SPは塊の下端が少し上に来るので、地色の立ち上がりを前倒しする */
  .galsec::after{background:linear-gradient(to bottom,
    rgba(244,242,239,.78) 0%,
    rgba(244,242,239,.74) 7%,
    rgba(244,242,239,.74) 20%,
    rgba(244,242,239,.46) 26%,
    rgba(244,242,239,.46) 65%,
    rgba(244,242,239,.74) 71%,
    rgba(244,242,239,.74) 94%,
    rgba(244,242,239,.78) 100%)}
}
.galcover{display:block}
/* モザイクは行ごとに結合済みの1枚画像（img/mosaic_pc.jpg / mosaic_sp.jpg）。
   タイル1枚ずつ読み込むとリクエストが数十本になるため、速度対策として合成してある。
   写真を差し替えるときは合成し直すこと（作品を1枚ずつ見せる gallery.html は今までどおり個別読み込み）。 */
.mosaic{display:block;line-height:0;font-size:0;
  border-radius:4px;overflow:hidden;background:var(--off)}
.mosaic img{width:100%;height:auto;display:block;
  filter:grayscale(1);transition:filter .7s ease}
.galcover:hover .mosaic img,
.galcover:focus-visible .mosaic img{filter:grayscale(0)}
/* 下の「一覧を見る」に触れたときも、同じように色が戻る（行き先が同じなので挙動をそろえる） */
#gallery:has(.secmore a:hover) .mosaic img,
#gallery:has(.secmore a:focus-visible) .mosaic img{filter:grayscale(0)}
.mosaic--sp{display:none}
@media(max-width:760px){
  .mosaic--pc{display:none}
  .mosaic--sp{display:block}
}
@media(hover:none){.mosaic img{filter:none}}
@media(prefers-reduced-motion:reduce){.mosaic img{transition:none}}

.galcover__body{display:flex;justify-content:flex-end;align-items:baseline;gap:24px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  transition:border-top-color .38s ease}
.galcover:hover .galcover__body,
.galcover:focus-visible .galcover__body{border-top-color:var(--gold)}
.galcover__label{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.galcover__ja{font-size:.9rem;font-weight:500;letter-spacing:.14em;white-space:nowrap}
.galcover__en{font-family:var(--serif);font-weight:300;font-size:.72rem;letter-spacing:.2em;color:var(--muted);white-space:nowrap}
@media(max-width:700px){
  .galcover__body{flex-direction:column;align-items:flex-start;gap:12px}
  .galcover__label{align-items:flex-start;text-align:left}
}

/* ── 撮影実績 一覧ページ ── */
.gtop{padding-block:clamp(56px,7vw,96px) clamp(44px,6vw,72px)}
.gtop__lead{margin:var(--gap) 0 0;max-width:34em}
.gnote{margin:calc(var(--gap) * .6) 0 0;padding:14px 18px;border-left:2px solid var(--gold);
  background:var(--off);font-size:.86rem;line-height:1.95;color:var(--muted);max-width:40em}
.gback{display:flex;justify-content:center;margin-top:var(--sec)}

/* 一覧の1枚：段組みの中で写真と一言を1つの塊として扱う */
.gal--page{margin-top:var(--gap)}
.gal--page figure{margin:0 0 clamp(16px,1.8vw,26px);break-inside:avoid}
.gal--page figcaption{margin-top:9px;padding-top:8px;border-top:1px solid var(--rule);
  font-family:var(--serif);font-size:.84rem;line-height:1.85;color:var(--muted);
  transition:border-top-color .38s ease,color .38s ease}
.gal--page figure:hover figcaption{border-top-color:var(--gold);color:var(--ink)}

/* 覆いは見せるだけの層。当たり判定を持つとPortraitの3枚にホバーが届かない */
.fv__veil,.op__scrim{pointer-events:none}
/* Portraitの文字ブロックは画面いっぱいに重なるので、当たり判定は文字の箱だけに戻す。
   これをしないと右側の写真3枚にカーソルが届かず、ホバーで色が戻らない */
.op__words{pointer-events:none}
.op__words .sechead,.op__words .words{pointer-events:auto}

/* ══ 下層ページの追加（2026-10-08）══════════════════════════
   行き先が #contact に逃げていた導線を、実ページに差し替えたときの追加分。
   既存の部品（.ec__item / .ec__badge / .ec__btn / .vo / .pl__opt）は作り直さず流用し、
   ここで足すのは「静的に並べる器」と「文書ページの組み」だけ。
   ────────────────────────────────────────── */

/* 現在のページをナビで示す。動かすのは罫線の色だけ */
.hd nav a[aria-current]{border-bottom-color:var(--gold)}

/* メニューは下に層を持つ。ホバーでもキーボードでも開く。
   中の項目は動かさず、地の色だけで反応させる */
.hdm{position:relative}
.hdm__p{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:13.5em;margin-top:10px;padding:9px 0;
  background:#fff;border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 12px 32px rgba(20,19,17,.09);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease}
.hdm:hover .hdm__p,.hdm:focus-within .hdm__p{opacity:1;visibility:visible;pointer-events:auto}
/* ボタンと層のあいだをホバーで渡れるようにする */
.hdm::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}
.hd nav .hdm__p a{display:block;padding:8px 22px;border-bottom:0;
  font-size:.78rem;letter-spacing:.1em;line-height:1.9;color:var(--ink);white-space:nowrap}
.hd nav .hdm__p a:hover{background:var(--off);color:var(--sumi)}
.hd nav .hdm__p a.hdm__sep{margin-top:9px;padding-top:15px;border-top:1px solid var(--rule)}
.hdm__t .ja::after{content:'';display:inline-block;margin-left:.5em;
  border:3.5px solid transparent;border-top-color:var(--silver);
  vertical-align:.1em}


/* ── これからの会：写真を持たない会を日付の柱で組む ──
   告知ビジュアルが無い会に作品写真を当てると、その写真がその会のものだと読まれる。
   だから写真を置かず、日付・内容・ボタンの3列で成立させる。 */
.evt{margin:calc(var(--gap) * 1.4) 0 0;padding:0;list-style:none}
.evt__item{display:grid;grid-template-columns:clamp(92px,9.5vw,120px) minmax(0,1fr) auto;
  column-gap:clamp(24px,3.4vw,52px);row-gap:var(--gap);align-items:start;
  padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--gold)}
.evt__item + .evt__item{margin-top:clamp(38px,4.2vw,64px)}
.evt__d{text-align:center}
.evt__d span{display:block;font-size:.68rem;letter-spacing:.14em;color:var(--gold-deep);line-height:1.6}
.evt__d b{display:block;font-family:var(--serif);font-weight:400;font-size:2.3rem;line-height:1.05;
  letter-spacing:.02em;color:var(--sumi)}
.evt__d hr{margin:6px 12px;border:0;border-top:1px solid var(--gold-pale)}
.evt__b h3{margin:0;font-size:1.06rem;font-weight:700;line-height:1.85;letter-spacing:.04em}
.evt__m{margin:12px 0 0;font-size:.86rem;line-height:1.95;letter-spacing:.06em;color:var(--muted)}
.evt__b p + p{margin:14px 0 0;font-size:.95rem;line-height:2.1;letter-spacing:.05em;max-width:34em}
/* ボタンは .ec__btn の見た目を流用する。グリッドの3列目に置くので余白だけ上書き */
.evt__btn{margin-top:0;align-self:start;min-width:224px}
@media(max-width:860px){
  .evt__item{grid-template-columns:72px minmax(0,1fr)}
  .evt__d b{font-size:1.9rem}
  .evt__btn{grid-column:1 / -1;min-width:0}
}

/* ── これまでの会：送りを持たないカードの並び（.ec の自動送りは使わない） ── */
.evg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,48px);margin-top:calc(var(--gap) * 1.4)}
.evg .ec__time{margin-bottom:0}   /* ボタンが無いので下の余白は要らない */
@media(max-width:820px){.evg{grid-template-columns:1fr}}

/* ── 文書ページ（ポリシー・規約）──
   .sec を使わないのは、.sec の p が34emに制限されて定義リストと幅が揃わないため。
   余白は .sec と同じ var(--sec) を使うので、見た目の間隔は他のセクションと同じ。 */
.docsec{padding-block:var(--sec)}
.doc{max-width:35em}
.doc h2{margin:calc(var(--sec) * .5) 0 0;padding-bottom:12px;border-bottom:1px solid var(--sumi);
  font-size:1rem;font-weight:700;line-height:1.9;letter-spacing:.1em}
.doc > p:first-child{margin-top:0}
.doc p{margin:var(--gap) 0 0;font-size:.95rem;line-height:2.1;letter-spacing:.05em}
.doc ul,.doc ol{margin:var(--gap) 0 0;padding-left:1.3em}
.doc li{margin-top:10px;font-size:.95rem;line-height:2.1;letter-spacing:.05em}
.doc a{border-bottom:1px solid var(--rule);transition:border-bottom-color .25s ease}
.doc a:hover{border-bottom-color:var(--gold)}
.doc dl{display:grid;grid-template-columns:clamp(140px,15vw,200px) minmax(0,1fr);
  margin:var(--gap) 0 0;border-top:1px solid var(--sumi)}
.doc dt{padding:16px 0;font-size:.82rem;letter-spacing:.14em;line-height:1.9;color:var(--sumi);
  border-bottom:1px solid var(--rule)}
.doc dd{margin:0;padding:16px 0;font-size:.92rem;line-height:1.95;letter-spacing:.04em;
  border-bottom:1px solid var(--rule)}
@media(max-width:700px){
  .doc dl{grid-template-columns:1fr}
  .doc dt{padding-bottom:0;border-bottom:0}
  .doc dd{padding-top:8px}
}
.doc__rev{margin:var(--sec) 0 0;padding-top:18px;border-top:1px solid var(--rule);
  font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
/* Jo様に確認が要る箇所。見た目には出さない（2026-10-24 将太さん指示）。
   要素とクラスは残すので grep -c todo で残数を数えられる。
   mark は既定で黄色く塗られるため、背景と文字色を明示して消している */
.todo{background:none;color:inherit;font-style:normal;padding:0}
/* 記録のカードに添える、当時の告知ページへの小さなリンク */
.evg__src{margin:12px 0 0;font-size:.8rem;letter-spacing:.06em;color:var(--muted)}
.evg__src a{border-bottom:1px solid var(--rule);transition:border-bottom-color .25s ease,color .25s ease}
.evg__src a:hover{border-bottom-color:var(--gold);color:var(--sumi)}

/* 和文の折返し：最後の1行に1〜2文字だけ残る形を避ける（下層ページの本文に限定） */
.sub__lead,.doc p,.doc li,.evt__b p{text-wrap:pretty}
/* 言葉の引用をTOP以外で使う場合。40emのままだと「なのだ」が割れるので行長を詰める */
.sec .words{max-width:32em}
.sec .words p{word-break:auto-phrase}
/* 記録のカードは告知ビジュアルを全部見せる（.ec の450px固定は文字を切ってしまう） */
.evg .ec__ph img{height:auto}
/* 見出しの直後に定義リストが来るとき、同じ線が30px間隔で2本並ぶので上の罫線は見出しに兼ねさせる */
.doc h2 + dl{margin-top:0;border-top:0}

/* ── お客様の声 一覧（2026-10-08）──
   長短の差が大きいので段組みmasonryで流す。1枚＝1人の言葉として切らさない。
   .vo（TOPの3件）は名前を左の柱に置く組みなので、こちらは別に用意した。 */
.vqs{columns:2;column-gap:clamp(26px,3vw,52px);margin-top:calc(var(--gap) * 1.4)}
@media(max-width:860px){.vqs{columns:1}}
.vq{break-inside:avoid;margin:0 0 clamp(26px,3vw,44px);padding-top:clamp(22px,2.4vw,32px);
  border-top:1px solid var(--gold)}
.vq blockquote{margin:0}
.vq p{margin:0 0 1.1em;font-family:var(--serif);font-size:.96rem;line-height:2.15;
  letter-spacing:.05em;text-wrap:pretty}
.vq p:last-child{margin-bottom:0}
/* 「迷っている方へ」の答えは、これから申し込む方に向いた言葉なので区別して組む */
.vq__ans{margin-top:18px;padding:16px 18px;background:var(--paper);border-radius:3px}
.vq__ans b{display:block;margin-bottom:10px;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;color:var(--gold-deep)}
.vq__ans p{font-size:.9rem;line-height:2.05;color:var(--ink)}
.vq figcaption{margin-top:16px;font-size:.78rem;letter-spacing:.16em;color:var(--muted)}
.vq figcaption span{margin-left:4px;font-size:.7rem;letter-spacing:.1em}
/* 一覧の折りたたみ（JSで付ける。JSが無ければ全件そのまま出る） */
.vq--fold{display:none}
.vqs__more{margin-top:clamp(28px,3vw,44px)}
.vqs__more .btn{cursor:pointer;font-family:inherit}

/* ── 下層ページの冒頭（2026-10-08）──
   写真家のサイトなので、各ページの入口に作品を一列で置く。
   ・帯の縦横比は中の写真の比率の合計（--sum）で決める。こうすると各枚が原寸の比率ちょうどに
     収まるので、どの画面幅でもトリミングが起きない（object-fit:cover は保険）
   ・写真どうしは接する。1枚ずつの輪郭は被写体の違いで分かる
   ・狭い画面は3枚目以降を外し、--sum-sp（先頭2枚の合計）に切り替える */
.shero{padding-bottom:clamp(36px,4vw,60px)}
.shero .sub__lead,.shero .gtop__lead{margin-top:calc(var(--gap) * .9)}
.hrow{display:flex;width:100%;aspect-ratio:var(--sum);background:var(--off)}
.hrow figure{flex:var(--r) 1 0;margin:0;min-width:0;line-height:0;overflow:hidden}
.hrow img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){
  .hrow{aspect-ratio:var(--sum-sp)}
  .hrow__sp-off{display:none}
}

/* ── 撮影実績ページ：黒の紙面＋冒頭を右から左へ流す（2026-10-08）──
   写真展の壁に見えるよう、このページだけ紙面を黒に反転する。
   帯は同じ並びを2組置き、1組分の幅だけ左へ送って先頭に戻す（切れ目が出ない）。
   **ホバーでは止めない**。止めると流れが主役ではなく操作対象に見えるため。 */
.mq{display:flex;width:100%;overflow:hidden;background:#000;
  height:clamp(230px,32vw,440px)}
.mq__track{display:flex;flex:0 0 auto;height:100%;
  animation:mqflow 70s linear infinite}
.mq__track figure{flex:0 0 auto;margin:0 2px 0 0;line-height:0}
.mq__track img{display:block;height:100%;width:auto}
@keyframes mqflow{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* 動きを減らす設定のときだけ止める（ホバーでは止めない） */
@media(max-width:700px){.mq{height:320px}}   /* 狭い画面は1枚の見え幅を確保する */
@media(prefers-reduced-motion:reduce){.mq__track{animation:none}}

/* 黒の紙面。色の指定はこのページの中だけに閉じる */
.gal-dark{background:var(--sumi-deep);color:rgba(255,255,255,.82)}
/* main は紙芝居のために白で塗ってある（190行目）。黒の紙面ではそれを外す */
.gal-dark main{background:var(--sumi-deep)}
.gal-dark .hd{background:rgba(8,8,8,.92);border-bottom-color:rgba(255,255,255,.14)}
.gal-dark .hd nav a{color:rgba(255,255,255,.82)}
.gal-dark .hd nav .en{color:rgba(255,255,255,.42)}
.gal-dark .hd nav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.gal-dark .hd nav a[aria-current]{border-bottom-color:var(--gold)}
.gal-dark .sec--off{background:#101010}
.gal-dark .sechead__jp{color:#fff}
.gal-dark .sechead__en{color:rgba(255,255,255,.62)}
.gal-dark .crumb,.gal-dark .crumb a{color:rgba(255,255,255,.5)}
.gal-dark .crumb a:hover{color:#fff}
.gal-dark .crumb span[aria-hidden]{color:rgba(255,255,255,.28)}
.gal-dark .gtop__lead{color:rgba(255,255,255,.78)}
/* 一言は壁の額に添えたキャプションのつもりで、少し落とす */
.gal-dark .gal--page figcaption{color:rgba(255,255,255,.5);border-top-color:rgba(255,255,255,.18)}
.gal-dark .gal--page figure:hover figcaption{color:#fff;border-top-color:var(--gold)}
.gal-dark .btn{color:var(--gold-pale);border-color:var(--gold-pale);background:transparent}
.gal-dark .btn:hover{background:var(--gold-pale);color:var(--sumi);border-color:var(--gold-pale)}
.gal-dark .ft{border-top-color:rgba(255,255,255,.14)}
.gal-dark .bar{background:#0a0a0a;border-top-color:rgba(255,255,255,.22)}
.gal-dark .bar a{color:rgba(255,255,255,.8);border-left-color:rgba(255,255,255,.14)}
.gal-dark .bar a:hover{background:#1a1a1a;color:#fff}
.gal-dark .bar a.is-key{background:#fff;color:var(--sumi)}
.gal-dark .bar a.is-key:hover{background:#e8e4dc}


/* ── 下層ページのヘッダー写真（2026-10-08）────────────────────────
   5枚並びの .hrow をやめ、1枚で受ける。セクションタイトルは写真の左下。
   写真そのものには一切手を触れない（[[作品の色は作者のもの]]）。
   文字を読ませるための影は、写真の上に別の層として敷く＝「現れ方」だけで作る。 */
.phero{position:relative;width:100%;aspect-ratio:16/9;max-height:74vh;overflow:hidden;background:var(--off)}
.phero img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%)}
/* 文字の足元だけを沈める層。上58%は素のまま＝作品に影を落とさない */
.phero__veil{position:absolute;inset:0;pointer-events:none;
  /* 写真に白い部分があると見出しが負けるので、足元を十分に沈める */
  background:
    linear-gradient(to top, rgba(8,7,6,.88) 0%, rgba(8,7,6,.76) 18%, rgba(8,7,6,.64) 32%, rgba(8,7,6,.28) 58%, rgba(8,7,6,0) 82%),
    linear-gradient(to right, rgba(8,7,6,.30) 0%, rgba(8,7,6,.08) 48%, rgba(8,7,6,0) 74%)}
.phero__in{position:absolute;left:0;right:0;bottom:0;padding-bottom:clamp(26px,3.6vw,56px)}
.phero .sechead__jp{color:#fff}
.phero .sechead__en{color:rgba(255,255,255,.78)}
.phero .rule{margin-top:20px;width:clamp(56px,6vw,96px);background:var(--gold)}
/* 縦位置の作品が素材なので、狭い画面では縦に伸ばして切り落としを減らす */
@media(max-width:700px){.phero{aspect-ratio:4/5;max-height:none}}

/* 写真が主役のページでは、見出しの下のリードから始める */
.shero--undergphoto{padding-top:clamp(40px,5vw,72px)}


/* ── 撮影実績：1枚を開いて見る（2026-10-08）──────────────────────
   背景をぼかして奥へ退かせ、作品だけが手前に浮く。
   ぼかすのは「背景」であって写真ではない。.lb__img にフィルタは一切かけない。 */
.lb{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:1fr auto;
  padding:clamp(56px,7vw,86px) clamp(18px,4vw,60px) clamp(20px,3vw,40px);
  background:rgba(6,6,6,.78);
  opacity:0;visibility:hidden;transition:opacity .34s ease,visibility 0s linear .34s}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .lb{background:rgba(6,6,6,.52);
    -webkit-backdrop-filter:blur(22px) saturate(.88);backdrop-filter:blur(22px) saturate(.88)}
}
.lb.is-open{opacity:1;visibility:visible;transition-delay:0s}
.lb__fig{grid-row:1;margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(14px,1.6vw,22px)}
.lb__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px;
  /* 浮かせているのは影と縮尺だけ。写真の色には触れない */
  box-shadow:0 42px 96px rgba(0,0,0,.62),0 6px 22px rgba(0,0,0,.45);
  transform:scale(.955) translateY(12px);opacity:0;
  transition:transform .44s cubic-bezier(.2,.72,.2,1),opacity .32s ease}
.lb.is-open .lb__img{transform:none;opacity:1}
.lb__cap{grid-row:2;margin:0;text-align:center;font-family:var(--serif);
  font-size:clamp(.95rem,.38vw + .88rem,1.1rem);line-height:1.9;letter-spacing:.08em;
  color:rgba(255,255,255,.82);
  opacity:0;transition:opacity .32s ease .1s}
.lb.is-open .lb__cap{opacity:1}
.lb__count{display:block;margin-top:6px;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.22em;color:rgba(255,255,255,.44)}
/* 操作は3つだけ。閉じる・前・次 */
.lb__btn{position:absolute;z-index:2;display:grid;place-items:center;width:50px;height:50px;
  padding:0;border:1px solid rgba(255,255,255,.26);border-radius:50%;background:rgba(0,0,0,.26);
  color:#fff;font-size:17px;line-height:1;cursor:pointer;
  transition:background .3s ease,border-color .3s ease}
.lb__btn:hover{background:rgba(0,0,0,.52);border-color:rgba(255,255,255,.6)}
.lb__close{top:clamp(14px,2vw,26px);right:clamp(14px,2.4vw,34px)}
.lb__prev{left:clamp(10px,1.8vw,26px);top:50%;transform:translateY(-50%)}
.lb__next{right:clamp(10px,1.8vw,26px);top:50%;transform:translateY(-50%)}
@media(max-width:700px){
  .lb{padding:clamp(54px,12vw,70px) 12px 22px}
  .lb__btn{width:42px;height:42px}
  /* 前後は写真の左右に置く。下に寄せると追従ナビ（.bar）とぶつかる */
  .lb__prev{left:6px}
  .lb__next{right:6px}
}
/* 開いている間は追従ナビを引っ込める。ぼかし越しに文字が残ると写真と喧嘩する */
.lb-open .bar{opacity:0;visibility:hidden;transition:opacity .2s ease}
/* 開いている間は後ろを動かさない */
.lb-open,.lb-open body{overflow:hidden}
/* 一覧の1枚は押せる。枠も影も付けない＝見た目は変えずに当たり判定だけ持たせる */
.gal--page figure img{cursor:zoom-in}
@media(prefers-reduced-motion:reduce){
  .lb,.lb__img,.lb__cap{transition-duration:.01ms}
  .lb__img{transform:none}
}

/* 一覧の説明文を一段大きく（2026-10-08・将太さんの指示） */
.gal--page figcaption{font-size:clamp(.92rem,.3vw + .845rem,1.02rem);line-height:1.78}

/* ══ 撮影のご依頼ページ（2026-10-08 再構成）══════════════════
   申し込みを止めているのは「自分なんかが」という迷い。
   紙面の作法（1pxの罫線・金の差し色・明朝の引用）はそのままに、
   「迷い」と「そのあと」を左右に置いて、間に1本だけ金の線を通す。 */
.turn{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:calc(var(--gap) * 1.4)}
.turn__col{padding-right:clamp(24px,3vw,56px)}
.turn__col--after{padding:0 0 0 clamp(24px,3vw,56px);border-left:1px solid var(--gold)}
.turn__label{margin:0 0 calc(var(--gap) * .8);font-size:.7rem;font-weight:700;letter-spacing:.26em;
  color:var(--muted)}
.turn__col--after .turn__label{color:var(--gold-deep)}
.turn__q{margin:0;padding-top:clamp(18px,2vw,26px)}
.turn__q + .turn__q{margin-top:clamp(18px,2vw,26px);border-top:1px solid var(--rule)}
.turn__q p{margin:0;font-family:var(--serif);font-size:1rem;line-height:2.15;letter-spacing:.05em;
  color:var(--muted);text-wrap:pretty;max-width:none}
/* 「終わったあと」の側だけ本文の濃さに戻す。迷いの側は少し退かせる */
.turn__col--after .turn__q p{color:var(--ink)}
@media(max-width:760px){
  .turn{grid-template-columns:1fr}
  .turn__col{padding-right:0}
  .turn__col--after{margin-top:var(--gap);padding:var(--gap) 0 0;border-left:0;border-top:1px solid var(--gold)}
}

/* 流れの各段に、その段について書かれた実際の声を添える */
.flow--voice li{grid-template-columns:62px minmax(0,1fr) auto}
.flow__v{display:block;grid-column:2 / -1;margin-top:14px;padding-left:16px;
  border-left:1px solid var(--gold-pale);
  font-family:var(--serif);font-size:.88rem;line-height:2;letter-spacing:.04em;color:var(--muted);
  opacity:.3;transition:opacity .65s ease}
.flow--voice li.is-on .flow__v{opacity:1}
.flow__v::before{content:'「'}
.flow__v::after{content:'」'}
@media(max-width:600px){.flow--voice li{grid-template-columns:50px 1fr}}
@media(prefers-reduced-motion:reduce){.flow__v{opacity:1;transition:none}}

/* ためらいへの答え。問いを明朝で立て、答えは本文書体で受ける */
.qa{margin:calc(var(--gap) * 1.4) 0 0;border-top:1px solid var(--sumi)}
.qa dt{padding:clamp(24px,2.6vw,34px) 0 0;font-family:var(--serif);font-size:1.08rem;
  line-height:1.9;letter-spacing:.06em;color:var(--sumi)}
.qa dt::before{content:'Q';margin-right:14px;font-size:.78rem;letter-spacing:.14em;color:var(--gold-deep)}
/* 答えのあとに添える、実際にいただいた声。答えと声を混ぜないよう1段下げる */
.qa__v{display:block;margin-top:14px;padding-left:16px;border-left:1px solid var(--rule);
  font-size:.86rem;line-height:1.95;color:var(--muted);font-style:normal}
.qa__v::before{content:'「'}
.qa__v::after{content:'」'}
.qa dd{margin:10px 0 0;padding:0 0 clamp(24px,2.6vw,34px) 29px;border-bottom:1px solid var(--rule);
  font-size:.95rem;line-height:2.1;letter-spacing:.05em;max-width:40em;text-wrap:pretty}

/* 作品を4枚だけ見せる段。冒頭の帯と同じ組み方（比率どおり・トリミングなし）で、紙面の中に収める */
.hrow--inset{margin-top:calc(var(--gap) * 1.2);gap:2px;background:transparent}

/* お問い合わせ帯の一文 */
.ct__lead{margin:calc(var(--gap) * .9) 0 0;font-size:.95rem;line-height:2.1;letter-spacing:.05em;
  color:var(--champ);max-width:36em}


/* 右下に常駐するLINE友だち追加の入口。下部バーのあるスマホには出さない。
   ヒーローを過ぎてから現れる（JSで is-on が付く） */
.lnf{position:fixed;right:clamp(18px,2.2vw,34px);bottom:clamp(18px,2.2vw,34px);z-index:45;
  display:none;align-items:center;gap:9px;
  padding:14px 22px;border-radius:999px;
  background:var(--sumi);color:#fff;text-decoration:none;
  font-size:.82rem;letter-spacing:.12em;line-height:1;
  box-shadow:0 10px 28px rgba(20,19,17,.22);
  opacity:0;pointer-events:none;transition:opacity .4s ease,background-color .25s ease}
/* LINEの緑の角丸に白い吹き出し。ひと目でLINEの友だち追加だと分かる形 */
.lnf::before{content:'';width:22px;height:22px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect width='22' height='22' rx='6' fill='%2306C755'/%3E%3Cpath d='M11 5C7.1 5 4 7.5 4 10.6c0 2.8 2.5 5.1 5.8 5.5.2 0 .5.2.6.4l.1.9c0 .3.3.4.5.3 1.9-1 4.6-2.9 5.7-4.5.6-.8.9-1.7.9-2.6C18 7.5 14.9 5 11 5z' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat}
.lnf.is-on{opacity:1;pointer-events:auto}
.lnf:hover{background:var(--gold-deep)}
@media(min-width:1001px){.lnf{display:inline-flex}}
@media(prefers-reduced-motion:reduce){.lnf{transition:none}}



/* メニューの締めのボタン2つ */
/* ボタン2つを並べる。.secmore .btn の margin:0 auto が効くと離れるので打ち消す */
.secmore--two{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.secmore--two .btn{margin:0}

/* 撮影のご依頼の中身（メニューページ）。中央寄せ。
   本文用の max-width が効いて左に寄るので、直下だけ打ち消す */
.msh{text-align:center;margin-top:calc(var(--gap) * 1.4)}
.msh > *{margin-inline:auto;max-width:none}
.msh .needs{max-width:33em;text-align:left}
.msh .needs__lead{margin-top:calc(var(--gap) * 1.35);max-width:30em;text-align:center;
  font-weight:600;font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.95}
.msh__close{margin:calc(var(--gap) * 1.7) auto 0;font-family:var(--serif);font-weight:400;
  color:var(--ink);font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:.08em;line-height:1.5}
.msh__act{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
  margin:calc(var(--gap) * 1.25) auto 0}
.msh__act .btn{margin:0}


/* 作品が流れる帯。同じ並びを2組置き、1組ぶん送ったところで先頭に戻すので継ぎ目は出ない */
.strip{position:relative;overflow:hidden;background:var(--sumi);
  height:clamp(190px,24vw,330px)}
.strip__run{display:flex;width:max-content;height:100%;
  animation:striprun 70s linear infinite;will-change:transform}
.strip__run img{flex:0 0 auto;height:100%;width:auto;max-width:none;display:block}
@keyframes striprun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* 見たい1枚で止められるように */
.strip:hover .strip__run{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.strip__run{animation:none}}

/* 作品を敷き詰めるタイル。文字の節のなかに作品の量を見せる */

/* 本文の左右を作品で埋める。文字だけの節にしないための列 */
.shooting-sec{position:relative;overflow:hidden}
.shooting-sec > .wrap{position:relative;z-index:1}
.flank{position:absolute;inset:0;pointer-events:none}
.flank__col{position:absolute;top:0;bottom:0;width:clamp(130px,16vw,250px);
  display:grid;gap:4px;align-content:start;overflow:hidden}
.flank__col--l{left:0}
.flank__col--r{right:0}
.flank img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
@media(min-width:1101px){
  /* 白い面を中央に置き、モザイクを左右に逃がす */
  .shooting-sec > .wrap{max-width:min(880px, 100vw - 2 * (16vw + 40px))}
}
@media(max-width:1100px){.flank{display:none}}

/* 節の背面にうっすら敷く風景。作品に手は入れず、見え方（不透明度と紙のヴェール）だけで沈める */
.hasscape{position:relative;overflow:hidden}
.hasscape > .wrap{position:relative;z-index:1}
.secscape{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.secscape img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 58%;
  opacity:.26;display:block}
/* 風景の上に白い面を置いて、見出しから本文までをその上で読ませる */
.hasscape > .wrap{background:rgba(255,255,255,.78);
  padding:clamp(34px,4.6vw,66px) clamp(22px,3.6vw,58px);
  border-radius:3px;box-shadow:0 20px 54px rgba(20,19,17,.07)}
@media(max-width:760px){
  .hasscape > .wrap{margin-inline:clamp(12px,3vw,20px);
    padding:clamp(26px,6vw,40px) clamp(18px,4.5vw,28px)}
}

.secscape::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(244,242,239,.42) 0%,rgba(244,242,239,.20) 42%,rgba(244,242,239,.42) 100%)}

/* プロフィールの入口の一文。本文より大きく、明朝で */
.pf__catch{margin:0 0 calc(var(--gap) * .85);font-family:var(--serif);font-weight:400;
  color:var(--ink);font-size:clamp(1.2rem,2.2vw,1.72rem);line-height:1.9;letter-spacing:.06em;
  text-wrap:balance;max-width:none}

/* Joさん本人の言葉を載せる節。読ませる組みにする */
.vision__lead{margin:0 0 calc(var(--gap) * .9);font-family:var(--serif);font-weight:400;
  color:var(--ink);font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:.14em;line-height:1.7}
.words--vision{max-width:34em}
.words--vision p{margin-top:1.5em}
.words--vision p:first-child{margin-top:0}
.vision__key{color:var(--ink);font-weight:600}

/* 当日のこと／納品のこと：通過した行だけ濃くなる（フローと同じ作法） */
.pl__opt dt,.pl__opt dd{opacity:.3;transform:translateY(10px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1)}
.pl__opt dt.is-on,.pl__opt dd.is-on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .pl__opt dt,.pl__opt dd{opacity:1;transform:none;transition:none}
}

/* 写真を置かないプロフィール（本文1列＋SNSを下に） */
.pf--nophoto{display:block}
.pf--nophoto .sns{margin-top:calc(var(--gap) * 1.1)}

/* 撮影コンセプトの結びの一行 */
.pf__sign{margin-top:calc(var(--gap) * .8);font-family:var(--serif);font-style:italic;
  color:var(--muted);letter-spacing:.08em}

/* 撮影コンセプト：小見出しと、結びの一行 */
.pf__eyebrow{margin:0 0 .9em;font-size:.84rem;letter-spacing:.2em;color:var(--muted)}
.pf__key{margin-top:1.5em;font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(1.02rem,1.6vw,1.18rem);letter-spacing:.06em}

/* 本文のあとに置く一枚。文章と同じ列幅に収める */
.portfig{margin:calc(var(--sec) * .55) 0 0}
.portfig img{display:block;width:100%;height:auto;border-radius:3px}
@media(min-width:901px){.portfig{max-width:46em}}

/* 現場でJoさんが口にした言葉 */
.jow{margin:0;padding:0;list-style:none;max-width:40em}
.jow li{padding:22px 0;border-top:1px solid var(--rule)}
.jow li:first-child{border-top:0;padding-top:0}
.jow i{display:block;font-style:normal;font-size:.78rem;letter-spacing:.16em;color:var(--muted)}
.jow b{display:block;margin-top:8px;font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.06rem,1.9vw,1.36rem);line-height:2;letter-spacing:.04em}
.jow__note{margin-top:calc(var(--gap) * .8);font-size:.84rem;color:var(--muted)}

/* 引用（お客様の言葉） */
.jq{margin:calc(var(--gap) * 1.1) 0 0;padding-left:20px;border-left:1px solid var(--gold);max-width:38em}
.jq p{margin:0;font-family:var(--serif);font-size:.98rem;line-height:2.15;color:var(--body,var(--ink))}
.jq cite{display:block;margin-top:10px;font-style:normal;font-size:.78rem;letter-spacing:.14em;color:var(--muted)}

/* 撮影のご依頼：作品16点のモノクロモザイクを1枚敷く */
.secscape--mos img{opacity:.92;object-position:50% 50%}
.secscape--mos::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(252,251,249,.34), rgba(252,251,249,.12) 42%, rgba(252,251,249,.42))}
.secscape--mos .mos-sp{display:none}
@media(max-width:760px){
  .secscape--mos .mos-pc{display:none}
  .secscape--mos .mos-sp{display:block}
}
.shooting-sec > .wrap{background:rgba(255,255,255,.90)}
/* 背面のモザイクは節いっぱい（inset:0）。下にも上と同じ余白を取り、
   白い面の下にモザイクが見えるようにする（2026-10-23） */
.shooting-sec{padding-bottom:var(--sec)}

/* 活動内容の中に置く小見出し（撮影実績・発信） */
.actx{margin-top:clamp(30px,4.2vw,52px)}
.actx__h{margin:0 0 14px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.02rem,1.5vw,1.2rem);letter-spacing:.09em;color:var(--sumi)}
.actx__h::after{content:"";display:block;width:34px;height:1px;margin-top:10px;background:rgba(32,30,26,.22)}
.sns--act{margin-top:0}

/* ── メニューページ：撮影会・リトリート・ビューティーコンサルの説明 ──
   左に名前、右に中身。狭い画面では縦に積む。区切りは面ではなく1pxの罫線 */
.prg{margin-top:clamp(30px,4vw,48px)}
.prg__item{padding-block:clamp(26px,3.4vw,42px);border-top:1px solid var(--rule)}
.prg__item:last-child{border-bottom:1px solid var(--rule)}
.prg__h{margin:0 0 14px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.12rem,1.8vw,1.38rem);letter-spacing:.1em;color:var(--sumi);line-height:1.6}
.prg__en{display:block;margin-top:7px;font-family:var(--sans);
  font-size:.66rem;letter-spacing:.2em;color:var(--muted)}
.prg__b > p{margin:0 0 13px;font-size:.95rem;line-height:2.05;letter-spacing:.05em;max-width:34em}
.prg__b > p:last-child{margin-bottom:0}
.prg__m{color:var(--muted);font-size:.86rem;letter-spacing:.07em}
.prg__note{color:var(--muted);font-size:.86rem}
.prg__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.prg__act .btn{margin:0}
@media(min-width:901px){
  .prg__item{display:grid;grid-template-columns:clamp(180px,19vw,230px) minmax(0,1fr);
    gap:0 clamp(26px,3.2vw,48px);align-items:start}
  .prg__h{margin:0}
}

/* ヘッダーが固定なので、アンカーで飛んだときに見出しが隠れないよう着地点を下げる */
section[id],.prg__item[id]{scroll-margin-top:clamp(74px,9vh,104px)}

/* ギャラリーに添える、掲載のご連絡先 */
.galnote{margin:18px 0 0;font-size:.84rem;letter-spacing:.05em;line-height:1.95;color:var(--muted)}
.galnote a{border-bottom:1px solid var(--rule);padding-bottom:1px}
.galnote a:hover{color:var(--sumi);border-bottom-color:var(--sumi)}.galnote--foot{margin-top:clamp(30px,4vw,48px);padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid var(--rule)}

/* お問い合わせフォーム：迷惑メール対策の見えない欄と、送信結果の表示 */
.cf__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cf__status{margin:18px 0 0;font-size:.88rem;line-height:1.9;letter-spacing:.04em}
.cf__status.is-ok{color:var(--gold-deep)}
.cf__status.is-ng{color:#a2402e}
.cf__send:disabled{opacity:.5;cursor:default}

/* 文章を言葉の区切りで折り返す */
.words .nb{display:inline-block}

/* プロフィール：撮影の考え方（5つの要素） */
.ph__h{margin:calc(var(--gap) * 2) 0 0;font-family:var(--serif);font-weight:400;font-size:1.25rem;letter-spacing:.12em}
.ph__five{margin-top:24px}
.ph__five dt{font-family:var(--serif);font-size:1.5rem;letter-spacing:0;color:var(--gold-deep);padding-top:10px}
.ph__five dd{line-height:2}
.ph__end{margin:calc(var(--gap) * 1.2) 0 0;font-family:var(--serif);font-size:1.05rem;letter-spacing:.08em}
/* 5つの要素：火の行だけ炎の色と写真 */
.ph__five dt.ph__fire{color:#d9541e;background:linear-gradient(180deg,#ec7a26 0%,#d4421a 55%,#9e2410 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ph__img{display:block;width:100%;aspect-ratio:16/5;height:auto;object-fit:cover;margin-top:16px;border-radius:3px}
.ph__five dt.ph__light{background:linear-gradient(180deg,#f4d27a 0%,#d9a441 55%,#a8782a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ph__five dt.ph__water{background:linear-gradient(180deg,#5fc4ea 0%,#1f86c4 55%,#0f4f86 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}