/*
 * CORTOMUSO v4 トップページ用 CSS
 * 出典: cortomuso-v4-preview.html の <style> をそのまま分離。
 * 変更点: リール枠を動画と同じ 3:4 にした部分（.phone / .phone-screen / .reel-video / .reel-play）のみ。
 * 読み込み: functions.php の cm_v4_enqueue_assets()（トップページのときだけ）
 */
:root{
  color-scheme: light;
  --ink:#1E1E1E; --paper:#FFFFFF; --accent:#FFD23F; --blue:#3A6FE0; --red:#E5484D; --green:#2FA36B;
  --muted:#5A5750; --soft:#F3F1EC; --board-text:#D9D5CC;
  --pad: clamp(20px, 4.4vw, 64px);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: light; --paper:#FFFFFF; --ink:#1E1E1E; } }
:root[data-theme="dark"]{ color-scheme: light; --paper:#FFFFFF; --ink:#1E1E1E; }
html{ scroll-padding-top: env(safe-area-inset-top, 0px); }
*,*::before,*::after{ box-sizing: border-box; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; text-decoration:none; }
img,svg,video{ max-width:100%; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
.brico{ font-family:"Bricolage Grotesque","Arial Rounded MT Bold",sans-serif; }
.dot{ font-family:"DotGothic16","Osaka-Mono",monospace; }
.wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--pad); }

/* header */
.site-header{ display:flex; justify-content:space-between; align-items:center; padding-block:26px; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo span{ font-size:clamp(22px,2vw,28px); font-weight:800; letter-spacing:-.02em; }
.nav{ display:flex; gap:32px; align-items:center; }
.nav a.dot{ font-size:15px; }
.pill{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; padding:12px 22px; border:3px solid var(--ink); border-radius:999px; background:var(--accent); box-shadow:4px 4px 0 var(--ink); transition:transform .2s, box-shadow .2s; }
.pill:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.menu-btn{ display:none; width:48px; height:48px; border:3px solid var(--ink); border-radius:12px; background:var(--accent); box-shadow:3px 3px 0 var(--ink); align-items:center; justify-content:center; cursor:pointer; }
.drawer{ display:none; }

/* hero */
.hero{ display:grid; grid-template-columns: 7fr 5fr; grid-template-areas:"text board"; gap:24px; align-items:center; padding-top:40px; }
.hero-text{ grid-area:text; display:flex; flex-direction:column; gap:26px; }
.chip{ align-self:flex-start; font-size:14px; padding:8px 14px; border:3px solid var(--ink); border-radius:999px; }
.hero h1{ margin:0; font-size:clamp(84px, 10.8vw, 156px); font-weight:800; line-height:.92; letter-spacing:-.04em; }
.hero h1 .stop{ color:var(--accent); -webkit-text-stroke:4px var(--ink); }
.nose-note{ position:absolute; left:clamp(330px, 39vw, 560px); top:clamp(90px, 10.5vw, 150px); display:flex; flex-direction:column; gap:2px; }
.nose-note span{ font-size:17px; font-weight:700; transform:rotate(-4deg); }
.lead{ margin:0; font-size:clamp(21px,2vw,28px); font-weight:700; letter-spacing:.06em; }
.sub{ margin:0; font-size:16px; line-height:2; max-width:36em; }

.board-wrap{ grid-area:board; position:relative; width:min(500px,100%); justify-self:center; transform:rotate(1.5deg); }
.board{ background:var(--ink); border-radius:20px; padding:22px 26px; display:flex; flex-direction:column; gap:14px; box-shadow:10px 10px 0 var(--accent); }
.board-top{ display:flex; justify-content:space-between; align-items:center; }
.board hr{ border:0; border-top:2px dashed var(--muted); margin:0; }
.b-row{ display:grid; grid-template-columns:44px 104px minmax(0,1fr) 20px; align-items:center; gap:14px; min-height:44px; border-radius:8px; }
.b-row:hover .b-desc{ color:#fff; }
.b-num{ width:44px; height:44px; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:24px; }
.b-name{ font-size:28px; color:#fff; }
.b-desc{ font-size:15px; color:var(--board-text); transition:color .2s; }
.b-arrow{ font-size:16px; color:var(--muted); }
.b-row:hover .b-arrow{ color:var(--accent); }
.cursor{ display:inline-block; width:10px; height:18px; background:var(--accent); vertical-align:middle; }

.track{ width:100%; overflow:hidden; margin-top:-6px; }
.track svg{ display:block; width:100%; height:auto; }

/* section heads */
section.block{ padding-block:clamp(72px,8vw,120px); }
.shead{ display:flex; align-items:center; gap:20px; margin-bottom:clamp(32px,4.4vw,64px); }
.rbadge{ background:var(--ink); color:var(--accent); font-size:20px; padding:8px 14px; border-radius:10px; }
.shead h2{ margin:0; font-size:clamp(44px,4.4vw,64px); font-weight:800; letter-spacing:-.03em; }
.shead .jp{ font-size:15px; font-weight:700; letter-spacing:.1em; }
.shead .rule{ flex-grow:1; border-top:3px dashed var(--ink); transform-origin:left; }
.shead .more{ font-size:14px; padding:10px 0; }

/* reel */
.reel{ display:grid; grid-template-columns: 1fr; gap:24px; align-items:center; justify-items:center; }  /* v4 変更（2026-09）：文章を外し、動画の枠を中央の1列に */
.reel-copy{ display:flex; flex-direction:column; gap:22px; padding-left:8%; }
.reel-copy p.big{ margin:0; font-size:clamp(20px,2.4vw,34px); font-weight:700; line-height:1.6; letter-spacing:.04em; }
.reel-copy p{ margin:0; font-size:16px; line-height:2; }
.phone{ justify-self:center; width:min(320px,70vw); border:5px solid var(--ink); border-radius:42px; padding:13px; background:#fff; box-shadow:12px 12px 0 var(--accent); transform:rotate(-2deg); }
.phone-screen{ position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; border-radius:28px; background:var(--soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
/* reel video（v4 追加：動画と同じ 3:4 の画面。contain なので上下左右とも切れない） */
.reel-video{ display:block; width:100%; height:100%; object-fit:contain; background:var(--soft); }
.reel-play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; padding:0; border:0; background:transparent; cursor:pointer; border-radius:50%; }
.reel-play[hidden]{ display:none; }
.reel-play svg{ display:block; width:100%; height:100%; }

/* gates */
.gates{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; align-items:start; }
.gate{ display:flex; flex-direction:column; border:4px solid var(--ink); border-radius:20px; overflow:hidden; background:#fff; box-shadow:8px 8px 0 var(--ink); transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
.gate:hover{ transform:translate(4px,4px); box-shadow:4px 4px 0 var(--ink); }
.gate:nth-child(2){ margin-top:36px; } .gate:nth-child(3){ margin-top:72px; }
.gate-head{ border-bottom:4px solid var(--ink); padding:14px 24px; display:flex; justify-content:space-between; align-items:center; color:#fff; }
.gate-head .n{ font-size:44px; font-weight:800; line-height:1; }
/* v4 追加（文言変更 2026-09）：帯の大きな数字をなくしても帯の高さ（76px）を保つ */
.gate-head{ min-height:76px; }
.gate svg.illo{ align-self:center; margin-top:18px; width:min(280px,80%); height:auto; }
.gate-body{ display:flex; flex-direction:column; gap:12px; padding:12px 28px 28px; }
.gate-body .t{ font-size:52px; font-weight:800; letter-spacing:-.03em; }
.gate-body .h{ font-size:20px; font-weight:700; }
.gate-body .d{ font-size:14px; line-height:1.95; }
.gate-body .go{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:16px; border-top:3px dashed var(--ink); font-size:15px; font-weight:700; }

/* about */
.about{ display:grid; grid-template-columns: 6fr 5fr; gap:clamp(24px,6vw,96px); align-items:center; }
.about h3{ margin:0 0 22px; font-size:clamp(24px,2.6vw,36px); font-weight:700; line-height:1.6; letter-spacing:.06em; }
.about p{ margin:0 0 18px; font-size:15px; line-height:2.1; letter-spacing:.04em; max-width:32em; }
.pf svg{ width:100%; height:auto; display:block; }

/* works */
.table{ border:4px solid var(--ink); border-radius:18px; overflow:hidden; }
.thead,.trow{ display:grid; grid-template-columns:120px minmax(0,1fr) 320px 60px; align-items:center; padding:14px 32px; }
.thead{ background:var(--ink); color:var(--accent); font-size:14px; }
.trow{ padding-block:26px; transition:background .25s; }
.trow + .trow{ border-top:3px dashed var(--ink); }
.trow:hover{ background:#FFF3C2; }
.trow .no{ font-size:26px; } .trow .nm{ font-size:20px; font-weight:700; } .trow .wk{ font-size:14px; } .trow .ar{ font-size:20px; justify-self:end; }

/* contact */
.contact{ display:flex; align-items:flex-end; gap:40px; }
.ticket{ position:relative; flex-grow:1; display:grid; grid-template-columns:minmax(0,1fr) 300px; border:4px solid var(--ink); border-radius:24px; background:#fff; box-shadow:10px 10px 0 var(--ink); transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
.ticket:hover{ transform:translate(5px,5px) rotate(-.5deg); box-shadow:5px 5px 0 var(--ink); }
.t-main{ display:flex; flex-direction:column; gap:18px; padding:40px 48px; }
.t-main .ttl{ font-size:clamp(26px,2.8vw,38px); font-weight:700; letter-spacing:.04em; }
.t-main .txt{ font-size:15px; line-height:2; }
.t-main .meta{ display:flex; gap:28px; font-size:15px; flex-wrap:wrap; }
.t-stub{ border-left:4px dashed var(--ink); background:var(--accent); border-radius:0 20px 20px 0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; padding:24px; }
.t-stub .in{ font-size:78px; font-weight:800; line-height:.9; letter-spacing:-.03em; }
/* v4 追加（文言変更 2026-09）：「相談する →」を1行で。券の右側（幅300px）に収まる大きさ */
.t-stub .in.in-jp{ font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif; font-size:40px; font-weight:700; line-height:1.2; letter-spacing:.02em; white-space:nowrap; }
.notch{ position:absolute; right:280px; width:36px; height:36px; border-radius:50%; background:#fff; border:4px solid var(--ink); }
.notch.top{ top:-22px; clip-path:inset(50% -10px -10px -10px); }
.notch.bot{ bottom:-22px; clip-path:inset(-10px -10px 50% -10px); }
.contact-horse{ flex-shrink:0; }

/* footer */
footer{ background:var(--ink); color:#fff; margin-top:40px; }
.ticker-wrap{ overflow:hidden; padding:18px 0; border-bottom:2px dashed var(--muted); }
.ticker{ display:flex; width:max-content; gap:48px; font-size:16px; color:var(--accent); white-space:nowrap; animation:marquee 40s linear infinite; }
.foot{ display:flex; justify-content:space-between; align-items:center; padding-block:28px; }

/* ===== motion ===== */
.draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 2.2s cubic-bezier(.45,0,.3,1) .2s forwards; }
.pop{ animation:pop .5s cubic-bezier(.3,1.5,.5,1) both; transform-box:fill-box; transform-origin:center bottom; }
.p1{ animation-delay:1.6s } .p2{ animation-delay:1.8s } .p3{ animation-delay:2s }
.runW{ animation:runW 10s cubic-bezier(.3,0,.6,1) 2.2s infinite both; }
.runY{ animation:runY 10s cubic-bezier(.3,0,.6,1) 2.2s infinite both; }
.gallop{ animation:gallop .3s ease-in-out infinite; }
.legA{ animation:legs .26s steps(1) infinite; } .legB{ animation:legs .26s steps(1) -.13s infinite; }
.flash{ animation:flash 10s linear 2.2s infinite both; }
.stamp{ animation:stamp 10s linear 2.2s infinite both; transform-box:fill-box; transform-origin:center; }
.blink{ animation:blink 1.1s steps(2,start) infinite; }
.drift{ animation:drift 10s ease-in-out infinite alternate; }
.fade{ animation:fadeUp 1s cubic-bezier(.2,.8,.2,1) both; }
.d1{ animation-delay:.1s } .d2{ animation-delay:.3s } .d3{ animation-delay:.5s }

/* scroll reveals (JS adds .in) */
.js [data-reveal="head"] .rbadge{ transform:scale(0); transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.js [data-reveal="head"] .rule{ transform:scaleX(0); transition:transform .9s cubic-bezier(.6,0,.2,1) .15s; }
.js [data-reveal="head"].in .rbadge{ transform:none; }
.js [data-reveal="head"].in .rule{ transform:scaleX(1); }
.js .gate[data-reveal]{ opacity:0; translate:0 -40px; rotate:-3deg; transition:opacity .4s, translate .7s cubic-bezier(.3,1.5,.5,1), rotate .7s cubic-bezier(.3,1.5,.5,1), transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
.js .gate[data-reveal].in{ opacity:1; translate:0 0; rotate:0deg; }
.js .phone[data-reveal]{ opacity:0; translate:0 60px; rotate:6deg; transition:opacity .5s, translate .9s cubic-bezier(.3,1.4,.5,1), rotate .9s cubic-bezier(.3,1.4,.5,1); }
.js .phone[data-reveal].in{ opacity:1; translate:0 0; rotate:0deg; }
.pf .hA,.pf .hB{ transition:transform 1.3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.js .pf .hA{ transform:translateX(-260px); opacity:0; }
.js .pf .hB{ transform:translateX(-300px); opacity:0; }
.js .pf.in .hA{ transform:none; opacity:1; transition-delay:.2s; }
.js .pf.in .hB{ transform:none; opacity:1; transition-delay:.25s; }
.js .pf .pflash{ opacity:0; }
.js .pf.in .pflash{ animation:flashOnce .6s ease-out 1.45s both; }
.js .pf .bubble{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:left bottom; transition:transform .45s cubic-bezier(.3,1.6,.5,1) 1.8s, opacity .2s 1.8s; }
.js .pf.in .bubble{ opacity:1; transform:none; }
.js .ticket[data-reveal]{ opacity:0; translate:-40px 0; transition:opacity .4s, translate .8s cubic-bezier(.3,1.4,.5,1), transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s; }
.js .ticket[data-reveal].in{ opacity:1; translate:0 0; }

@keyframes draw{ to{ stroke-dashoffset:0 } }
@keyframes pop{ from{ opacity:0; transform:scale(.5) } to{ opacity:1; transform:none } }
@keyframes runW{ 0%{ transform:translateX(-320px); opacity:1 } 72%{ transform:translateX(990px) } 86%{ transform:translateX(1170px) } 97%{ transform:translateX(1170px); opacity:1 } 100%{ transform:translateX(1170px); opacity:0 } }
@keyframes runY{ 0%{ transform:translateX(-400px); opacity:1 } 72%{ transform:translateX(950px) } 86%{ transform:translateX(1182px) } 97%{ transform:translateX(1182px); opacity:1 } 100%{ transform:translateX(1182px); opacity:0 } }
@keyframes follow{ 0%{ transform:translateX(0) } 72%{ transform:translateX(-390px) } 86%,100%{ transform:translateX(-620px) } }
@keyframes gallop{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-7px) rotate(-2deg) } }
@keyframes legs{ 0%{ opacity:1 } 50%{ opacity:0 } }
@keyframes flash{ 0%,85.5%{ opacity:0 } 86.5%{ opacity:.9 } 90%,100%{ opacity:0 } }
@keyframes flashOnce{ 0%{ opacity:0 } 25%{ opacity:.95 } 100%{ opacity:0 } }
@keyframes stamp{ 0%,86%{ opacity:0; transform:scale(1.9) rotate(-12deg) } 88%{ opacity:1; transform:scale(1) rotate(-12deg) } 97%{ opacity:1; transform:scale(1) rotate(-12deg) } 100%{ opacity:0; transform:scale(1) rotate(-12deg) } }
@keyframes blink{ to{ visibility:hidden } }
@keyframes drift{ from{ transform:translateX(0) } to{ transform:translateX(70px) } }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }

/* ===== mobile ===== */
@media (max-width: 900px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  .drawer{ display:none; flex-direction:column; gap:4px; padding:8px 0 20px; }
  .drawer.open{ display:flex; }
  .drawer a{ min-height:48px; display:flex; align-items:center; font-size:17px; border-bottom:2px dashed var(--ink); }
  .hero{ grid-template-columns:1fr; grid-template-areas:"text" "track" "board"; padding-top:20px; }
  .hero .track{ grid-area:track; margin-inline:calc(var(--pad) * -1); width:auto; }
  .nose-note{ position:static; flex-direction:row; align-items:center; margin-top:-10px; }
  .nose-note svg{ display:none; }
  .nose-note span::before{ content:"↑ "; }
  .chip{ font-size:12px; padding:6px 12px; border-width:2.5px; }
  .hero h1 .stop{ -webkit-text-stroke:3px var(--ink); }
  .board-wrap{ transform:rotate(1deg); margin-top:8px; }
  .board{ padding:18px; box-shadow:8px 8px 0 var(--accent); }
  .b-row{ grid-template-columns:36px 76px minmax(0,1fr); gap:10px; }
  .b-num{ width:36px; height:36px; font-size:20px; }
  .b-name{ font-size:21px; } .b-desc{ font-size:13px; } .b-arrow{ display:none; }
  .track.mobile-follow svg{ width:1010px; animation:follow 10s cubic-bezier(.3,0,.6,1) 2.2s infinite both; }
  .shead{ gap:12px; } .shead .jp{ font-size:12px; } .rbadge{ font-size:16px; padding:6px 10px; }
  .reel{ grid-template-columns:1fr; } .reel-copy{ padding-left:0; }
  .gates{ grid-template-columns:1fr; gap:36px; }
  .gate:nth-child(2),.gate:nth-child(3){ margin-top:0; }
  .gate{ box-shadow:6px 6px 0 var(--ink); border-width:3.5px; }
  .gate-body{ padding:8px 20px 22px; } .gate-body .t{ font-size:40px; } .gate-body .h{ font-size:17px; } .gate-body .d{ font-size:13px; }
  .about{ grid-template-columns:1fr; }
  .thead{ display:none; }
  .trow{ grid-template-columns:48px minmax(0,1fr) 24px; grid-template-areas:"no nm ar" "no wk ar"; padding:18px; row-gap:4px; }
  .trow .no{ grid-area:no; font-size:20px; } .trow .nm{ grid-area:nm; font-size:16px; } .trow .wk{ grid-area:wk; font-size:12px; } .trow .ar{ grid-area:ar; }
  .contact{ flex-direction:column; align-items:stretch; }
  .ticket{ grid-template-columns:1fr; box-shadow:6px 6px 0 var(--ink); }
  .t-main{ padding:26px 22px; }
  .t-stub{ border-left:0; border-top:3.5px dashed var(--ink); border-radius:0 0 20px 20px; flex-direction:row; justify-content:space-between; }
  .t-stub .in{ font-size:44px; }
  .t-stub .in.in-jp{ font-size:28px; }
  .notch{ display:none; }
  .contact-horse{ display:none; }
  .foot{ flex-direction:column; align-items:flex-start; gap:10px; }
}
/* v4 修正（2026-09）：スマホ幅では全体の img,svg,video{max-width:100%} が .track.mobile-follow svg の width:1010px より優先され、
   絵が画面幅に縮んだまま follow（1010px 用の移動量）で画面外へ流れ、馬が一度も画面に入らなかった。
   動きを減らす設定がないときだけ上限を外す（設定ありの人は、これまでどおり絵全体を画面幅で表示）。 */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  .track.mobile-follow svg{ max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .draw{ stroke-dashoffset:0; }
  .js .gate[data-reveal],.js .phone[data-reveal],.js .ticket[data-reveal]{ opacity:1; translate:none; rotate:none; }
  .js .pf .hA,.js .pf .hB,.js .pf .bubble{ opacity:1; transform:none; }
  .js [data-reveal="head"] .rbadge,.js [data-reveal="head"] .rule{ transform:none; }
}

/* v4 追加（2026-09）：WORKS のカテゴリーの印（WEB / MUSIC / LIVE / AI）と、リンクのない行（匿名の案件など） */
.trow .wk-cat{ display:inline-block; margin-right:10px; padding:0 8px; border:2px solid var(--ink); border-radius:6px; font-size:12px; line-height:1.7; vertical-align:1px; }
.trow-nolink:hover{ background:transparent; }

/* =========================================================================
 * v4 ブラッシュアップ（2026-09・指示書10）：主役と余白の整理。トップだけに効くよう、各セクションの id（#reel など）と .hero で絞っている。
 * 文言・色・線の太さ・動き（JS）は変えない。変更前は work/deploy/v10_before/v4.css。
 * ========================================================================= */

/* FV：競馬の図を「背景・世界観」の位置へ下げる（H1 → 掲示板 → レース、の順に強い） */
.hero .nose-note span{ font-size:15px; color:var(--muted); }            /* 注釈は小さく、墨より一段弱い色（既存の色） */
.hero .nose-note svg{ width:64px; height:auto; stroke:var(--muted); }
.hero .track .drift{ opacity:.45; }                                     /* 雲 */
.hero .track path.draw{ stroke:var(--muted); }                         /* コースの線・目盛り・ゴールの柱（馬・看板・ハナ差の印は墨のまま） */

/* REEL：動画の枠を約1.35倍に。PC は中央から少し右へずらし、左の見出しと対角でつり合わせる */
#reel{ padding-bottom:clamp(48px,5vw,72px); }                            /* Reel → Services を少し詰める */
#reel .phone{ width:clamp(300px,30vw,440px); position:relative; left:clamp(0px,6vw,96px); }

/* SERVICES：本文を読みやすく。PC はずらした配置のまま、カードの高さをそろえて下端も同じ段差にする */
#gates{ padding-top:clamp(56px,6vw,88px); padding-bottom:clamp(88px,10vw,150px); }  /* Services → About を少し広げる */
#gates .gate-body{ flex:1; padding:14px 30px 30px; }
#gates .gate-body .d{ font-size:15px; line-height:2; }
#gates .gate-body .go{ margin-top:auto; }

/* ABOUT：絵 47 : 文 53 に寄せ、文章側を少し強く。「あと一押し」は枠を外し、小さな赤い文字だけにする */
#about{ padding-top:clamp(80px,9.5vw,140px); }
#about .about{ grid-template-columns:9fr 10fr; }
#about .about h3{ font-size:clamp(26px,3vw,42px); }
#about .about p{ font-size:16px; }
#about .pf .bubble path{ display:none; }
#about .pf .bubble text{ font-size:18px; }

/* WORKS：2件を小さな選抜の掲載として見せる（上下を詰める）。カテゴリーの印を少しだけ読みやすく */
#works{ padding-top:clamp(64px,7vw,104px); padding-bottom:clamp(40px,4.5vw,64px); }  /* Works → Contact を少し詰める */
#works .trow .wk-cat{ font-size:13px; padding:1px 9px; }

/* CONTACT：馬を券に寄せ、券の方を向かせる（左右反転） */
#contact{ padding-top:clamp(56px,6vw,88px); }
#contact .contact{ gap:0; }
#contact .contact-horse{ transform:scaleX(-1); margin-left:-20px; }

@media (min-width: 901px){
  #gates .gates{ align-items:stretch; }
  #gates .gate:nth-child(1){ margin-bottom:72px; }   /* 段差 0 / 36 / 72px はそのまま。下にも同じだけ空けて、3枚を同じ高さにする */
  #gates .gate:nth-child(2){ margin-bottom:36px; }
}
@media (max-width: 900px){
  #reel .phone{ width:min(340px,82vw); left:0; }
  #gates .gate-body{ padding:10px 22px 24px; }
  #gates .gate-body .d{ font-size:14px; line-height:1.95; }
  #about .about{ grid-template-columns:1fr; }   /* スマホは縦1列のまま（上の 9fr 10fr を打ち消す） */
  #about .about h3{ font-size:26px; }
  #about .about p{ font-size:15px; }   /* スマホは元の大きさ（16px だと幅375で「…名前で／す。」と1文字だけ落ちる） */
  #about .pf .bubble text{ font-size:24px; }   /* スマホは絵が縮むので、赤い文字が小さくなりすぎないように（表示は約14px） */
  #works .trow .wk-cat{ font-size:12px; }
}

/* =========================================================================
 * v4 ロゴの活用（2026-09・指示書12）。画像は assets/img/logo/（正式ロゴから tools/make_logo_assets.py で作成。形・比率は変えていない）
 * 使う場所：ヘッダー（正式ロゴ・小）／ABOUT（シンボルの透かし）／フッター（白抜きの正式ロゴ・大）／相談券（シンボルの印）
 * ========================================================================= */

/* ヘッダー：シンボル＋ロゴタイプ。ナビより強くしすぎない大きさ */
.logo{ gap:12px; }
.logo img{ display:block; width:auto; }
.logo .logo-mark{ height:44px; }
.logo .logo-type{ height:17px; }

/* ABOUT：シンボルを文章の後ろに大きく薄く（元画像の大きさ以下で表示し、拡大しない） */
#about .about{ position:relative; isolation:isolate; }
#about .about::before{ content:""; position:absolute; z-index:-1; top:50%; right:clamp(0px,4vw,64px); width:clamp(150px,17vw,246px); aspect-ratio:246/445; transform:translateY(-50%); background:url(../img/logo/symbol-black.png) center/contain no-repeat; opacity:.04; pointer-events:none; }

/* 相談券：黄色い部分の右下に、シンボルを薄い印として（「相談する →」が主役。文字の位置は動かさない）。
   比較した案：A＝黄色面の下部に小さく（「相談する →」が上へ約20px動き、スマホでは横に詰まる）→ 不採用。B＝右下の透かし → 採用（PC のみ） */
#contact .t-stub{ position:relative; overflow:hidden; }
#contact .t-stub > span{ position:relative; z-index:1; }
#contact .t-stub::after{ content:""; position:absolute; right:-10px; bottom:-36px; width:92px; aspect-ratio:246/445; background:url(../img/logo/symbol-black.png) center/contain no-repeat; opacity:.12; pointer-events:none; }

/* フッター：白抜きの正式ロゴを大きく。既存の言葉・メニュー・著作権表示を整理 */
footer .foot-brand{ display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(32px,6vw,96px); padding-block:clamp(40px,5vw,64px) clamp(28px,3vw,40px); }
.foot-logo{ flex-shrink:0; }
.foot-logo img{ display:block; height:clamp(120px,11vw,160px); width:auto; }
.foot-main{ display:flex; flex-direction:column; align-items:flex-end; gap:24px; text-align:right; }
.foot-copy{ margin:0; display:flex; flex-direction:column; gap:8px; }
.foot-en{ font-size:clamp(26px,2.6vw,36px); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.foot-jp{ font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--board-text); }
.foot-nav{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 28px; }
.foot-nav a{ font-size:15px; color:#fff; transition:color .2s; }
.foot-nav a:hover{ color:var(--accent); }
.foot-bottom{ border-top:2px dashed var(--muted); padding-block:18px 24px; font-size:12px; color:var(--board-text); }

@media (max-width: 900px){
  .logo{ gap:9px; }
  .logo .logo-mark{ height:36px; }
  .logo .logo-type{ height:14px; }
  #about .about::before{ top:auto; bottom:-8px; right:0; transform:none; width:150px; }   /* スマホは文章の後ろ（下側）に */
  #contact .t-stub::after{ display:none; }   /* スマホの黄色い部分は横1列で狭く、文字に重なるので出さない */
  footer .foot-brand{ flex-direction:column; align-items:flex-start; gap:22px; padding-block:32px 22px; }   /* スマホはフッターが縦に長くなりすぎないよう詰める */
  .foot-logo img{ height:96px; }
  .foot-main{ align-items:flex-start; text-align:left; gap:16px; }
  .foot-nav{ display:grid; grid-template-columns:repeat(3,max-content); gap:12px 28px; justify-content:start; }
}

/* =========================================================================
 * v4 FV の見出しを少し斜めに（2026-09・指示書13）。「Win by a nose.」（黄色い句点を含む）だけ。ほかの要素は水平のまま。
 * h1 には表示時の動き（.fade＝transform を使う）があるため、transform ではなく rotate で傾ける（動きの指定に上書きされない）。
 * ========================================================================= */
.hero h1{ rotate:-2deg; transform-origin:0 50%; }
@media (max-width: 900px){
  .hero .nose-note{ margin-top:0; padding-left:4px; }   /* スマホ：注釈が「a nose.」のすぐ下に詰まって見えるので、少し下・少し右へ（元は margin-top:-10px） */
}

/* =========================================================================
 * v4 FV の見出しをタイポグラフィの塊に（2026-09・指示書14）。改行を「Win」／「by a nose.」にし、1行目を大きく・2行目を横長に。
 * 大きさはロゴ活用サンプルを基準に、画面幅に合わせて変える（スマホ：Win＝画面幅の約47%、by a nose.＝約78%。PC：左の列の中で最大）。
 * 文字幅の実測（Bricolage Grotesque 800・字間 -0.05em）：Win＝1.56em、by a nose.＝3.99em。傾き（rotate:-2deg）は指示書13のまま。
 * ========================================================================= */
.hero h1{ letter-spacing:-.05em; line-height:.84; }
.hero h1 .h1-win,.hero h1 .h1-nose{ display:block; }
.hero h1 .h1-win{ font-size:min(17.6vw,253px); }   /* 2026-09 修正：「Win」の n の右端が、下の「nose」の n の右端を越えない大きさ（by a nose. の約1.44倍。越えない上限は約1.49倍） */
.hero h1 .h1-nose{ font-size:min(12.2vw,176px); padding-bottom:.06em; }   /* 「by」の y の下と、次の「あと一押しを、つくる。」の間を少しだけ空ける */
/* PC：2行目が長くなったので、注釈「＝ハナ差のこと」は短い1行目「Win」の右へ移し、矢印は下（nose）を指す向きに（上下反転） */
.hero .nose-note{ left:calc(min(27.5vw,395px) + 32px); top:calc(min(17.6vw,253px) * .2); flex-direction:column-reverse; }
.hero .nose-note svg{ transform:scaleY(-1); }
@media (max-width: 900px){
  .hero h1 .h1-win{ font-size:27.4vw; }    /* Win＝画面幅の約43%（n の右端を下の nose の n にそろえる大きさ） */
  .hero h1 .h1-nose{ font-size:19vw; }      /* by a nose.＝約76%（傾けても右の余白が残る大きさ） */
  .hero .nose-note{ left:auto; top:auto; flex-direction:row; margin-top:4px; }   /* スマホはこれまでどおり見出しの下（矢印の絵は出さない） */
}
@media (max-width: 900px){
  .site-header{ padding-block:16px 20px; }   /* 2026-09（指示書14 追加）：スマホのヘッダーの上の余白を詰める（26px→16px。ロゴとボタンが10px上へ。高さ 100→84px。上下の中央ぞろえはそのまま） */
}