/* 第4版の見た目（2026-11-15）。v3.css のあとに読む。
   考え方：このページ自体が「添削されている」ように見せる（ペンの線、問いの札）。映像の現場の空気（シーン番号、タイムコード、上映室のように暗い実績の章）。
   文字を主役にして、雛形の「見出し＋箱」の繰り返しから外れる。 */

html[data-theme="1"]{--pen:#2747E6;--pen-hl:rgba(39,71,230,.16)}
html[data-theme="2"]{--pen:#C27A2C;--pen-hl:rgba(194,122,44,.2)}
html[data-theme="3"]{--pen:#111114;--pen-hl:#C6F432}
html:not([data-theme]){--pen:#002266;--pen-hl:rgba(0,34,102,.12)}

/* ---- ペンの線（v4.js が見出しの中に、行ごとに重ねる） ---- */
.mk{position:relative}
.penbox{position:absolute;inset:0;pointer-events:none;z-index:0}
.pen{position:absolute;overflow:visible;pointer-events:none}
.pen path{fill:none;stroke:var(--pen);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .75s cubic-bezier(0.65,0,0.35,1)}
.pen.on path{stroke-dashoffset:0}
.tagline .pen path{stroke-width:5px}
.pen-underline{z-index:-1}
/* 案3：下線は黄緑の蛍光ペン（文字の下に太く引く） */
html[data-theme="3"] .pen-underline path{stroke:var(--pen-hl);stroke-width:14px;stroke-linecap:butt}
html[data-theme="3"] .tagline .pen-underline path{stroke-width:26px}
h1,h2,.tagline,.why .a{isolation:isolate}
/* ペンの線は「動きを減らす」設定でも描く（線を引くだけの小さな動き） */

/* ---- 冒頭：大きな言葉を主役に、文と写真を下に組む ---- */
html[data-theme] .hero .hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tag tag" "copy cards";gap:48px 64px;align-items:start;min-height:0;padding-top:72px;padding-bottom:88px}
html[data-theme] .hero .hgrid>*{max-width:none}
html[data-theme] .tagline{grid-area:tag;font-size:clamp(40px,6.6vw,88px);line-height:1.12;letter-spacing:-0.02em;color:var(--navy)}
html[data-theme] .hero:has([data-mk=strike]) .tagline{font-size:clamp(48px,9.6vw,136px);line-height:1.06}
html[data-theme] .hcopy{grid-area:copy;display:grid;gap:22px;align-content:start}
html[data-theme] .hcopy h1{font-size:clamp(20px,2vw,26px);line-height:1.55}
html[data-theme] .hcards{grid-area:cards;position:relative;inset:auto;right:auto;top:auto;bottom:auto;width:auto;height:420px;margin:0}
@media (max-width:860px){
  html[data-theme] .hero .hgrid{grid-template-columns:1fr;grid-template-areas:"tag" "copy" "cards";gap:28px;padding-top:40px;padding-bottom:56px}
  html[data-theme] .hcards{height:320px}
}
/* 取り消し線のあとに出る、3つの問いの札 */
.hnotes{position:absolute;left:100%;top:-.1em;display:flex;gap:8px;margin-left:.4em;pointer-events:none}
.hnotes b{font:700 clamp(12px,1.2vw,16px)/1 var(--font);letter-spacing:0;color:var(--pen);background:var(--surface,#fff);border:1.5px solid var(--pen);border-radius:3px;padding:7px 10px;white-space:nowrap;opacity:0;transform:translateY(8px) scale(.6);transition:opacity .3s linear calc(var(--i) * 140ms),transform .45s cubic-bezier(0.34,1.56,0.64,1) calc(var(--i) * 140ms)}
.hnotes.on b{opacity:1;transform:none}
html[data-theme="3"] .hnotes b{color:#111114;border-color:#111114;background:#C6F432}
@media (max-width:860px){.hnotes{left:0;top:auto;bottom:-2.2em;margin:0}}

/* ---- シーン番号とタイムコード ---- */
.sc{display:block;margin-bottom:18px;font:600 12px/1 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--sub)}
.sc::before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--pen);vertical-align:1px}
.cta .sc,#works .sc{color:inherit;opacity:.8}

/* ---- 流れる帯 ---- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--bg)}
.mq-row{display:flex;width:max-content;animation:mq 60s linear infinite}
.mq-row span{font:600 clamp(28px,4.4vw,56px)/1.1 var(--font-d);letter-spacing:-0.01em;color:transparent;-webkit-text-stroke:1.2px var(--navy);white-space:nowrap;padding-right:.5em}
.marquee:hover .mq-row,.marquee.still .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none}}

/* ---- 悩み：吹き出しをつなぐ線 ---- */
.wlines{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.wlines path{fill:none;stroke:var(--ink);stroke-width:1.2px;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;transition:stroke-dashoffset 1.2s cubic-bezier(0.65,0,0.35,1)}
.wlines.on path{stroke-dashoffset:0}
.worries li.deco{z-index:1}
.worries li:not(.deco){z-index:2}

/* ---- 3つの特徴：番号を大きな中抜きの数字に ---- */
.pillars li{grid-template-columns:92px 1fr;align-items:center;padding:18px 0}
.pillars .no{font:700 clamp(40px,4.4vw,64px)/1 var(--font-d);letter-spacing:-0.02em;color:transparent;-webkit-text-stroke:1.4px var(--navy)}

/* ---- 実績：上映室のように暗い面にする ---- */
html[data-theme] #works{background:var(--navy);color:#fff}
html[data-theme] #works h2,html[data-theme] #works .lead{color:#fff}
html[data-theme] #works .lead{color:var(--onDark)}
html[data-theme] #works .ring{background:color-mix(in srgb,var(--navy) 86%,#fff)}
html[data-theme] #works .worklist button{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
html[data-theme] #works .worklist .n{color:var(--onDark)}
html[data-theme] #works .worklist button:focus-visible{outline-color:#fff}
html[data-theme] #works .mk .pen path{stroke:#fff}
@media (hover:hover){html[data-theme] #works .worklist button:hover{color:var(--onDark)}}

/* ---- 呼びかけ：箱をやめ、目立たせる色の面を横いっぱいに ---- */
html[data-theme] section:has(>.wrap>.cta){background:var(--acc);padding:0}
html[data-theme] .cta{background:none;border-radius:0;padding:88px 0;color:var(--on-acc)}
html[data-theme] .cta h2{color:var(--on-acc);font-size:clamp(30px,4.6vw,60px);line-height:1.2}
html[data-theme] .cta p{color:var(--on-acc);opacity:.92}
html[data-theme] .cta .btn-p{background:var(--navy);color:#fff;border-color:var(--navy)}
html[data-theme="3"] .cta .btn-p{background:#111114;color:#C6F432;border-color:#111114}
html[data-theme] .cta :focus-visible{outline-color:var(--on-acc)}
html[data-theme] section#contact{padding-top:96px}

/* ---- 見出しを少し大きく、言葉を主役に ---- */
html[data-theme] .h-sec{font-size:clamp(30px,4.4vw,52px)}

/* 呼びかけの面ではシーン番号の点を文字の色に */
html[data-theme] .cta .sc::before{background:currentColor}


/* ===== 第5版（2026-11-15）の直し ===== */
/* ペンの色：文字の色と同じ系統にならない色にする。案1は紺の文字にオレンジのペン、案3は黄緑の蛍光ペンを文字の下に */
html[data-theme="1"]{--pen:#F2771A}
html[data-theme="2"]{--pen:#C27A2C}
html[data-theme="3"]{--pen:#C6F432}
html[data-theme="3"] .pen path{stroke-width:10px;stroke-linecap:round}
html[data-theme="3"] .tagline .pen path{stroke-width:18px}
html[data-theme="3"] .pen{mix-blend-mode:multiply}
html[data-theme="3"] .pen-strike,html[data-theme="3"] .pen-circle{z-index:-1}

/* ローンチセール：1行目「ローンチセール」、2行目「2027年1月15日までのご契約」 */
html[data-theme] .hero .badge b{display:block;margin:0 0 4px}
html[data-theme] .hero .badge span{font-size:13px}

/* 流れる帯：中抜きの文字をやめ、塗りの文字で小さめに流す */
.marquee{padding:16px 0}
.mq-row span{color:var(--navy);-webkit-text-stroke:0;font:600 clamp(20px,2.6vw,32px)/1.2 var(--font-d)}

/* 悩み：見出しは1行。線は使わない。吹き出しを増やし、言葉だけの小さな吹き出しも混ぜる */
#worries .h-sec .br{display:inline}
.wlines{display:none}
.worries{height:640px}
.worries li.deco.q{width:auto;min-width:44px;height:44px;padding:0 10px;display:grid;place-items:center;font:800 18px/1 var(--font-d)}
.worries li.deco.w{width:auto;height:auto;padding:7px 12px;font:600 13px/1.3 var(--font);white-space:nowrap;color:var(--sub)}
.worries li.deco::after{width:10px;height:10px;bottom:-6px}
@media (max-width:860px){
  .worries{height:auto}
  .worries li.deco{position:absolute;left:var(--x);top:var(--y)}
  .worries li.deco.w{display:none}
  .worries li.deco.w:nth-child(-n+10){display:block}
}
/* 吹き出しの位置の調整台（?layout=1） */
.worries.layouting li{cursor:grab;touch-action:none;outline:1px dashed rgba(0,0,0,.25)}
.layoutbox{position:fixed;right:12px;bottom:12px;z-index:95;width:320px;background:#fff;color:#111;border:1px solid #111;border-radius:12px;padding:14px;font:500 12px/1.5 "Noto Sans JP",sans-serif;display:grid;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.layoutbox p{margin:0}.layoutbox textarea{height:120px;font:11px/1.4 ui-monospace,monospace}.layoutbox button{min-height:36px;border:1px solid #111;border-radius:6px;background:#fff;cursor:pointer}

/* C05：AIに同じ頼み方でつくらせた「似た画面」 */
.mockgrid{gap:14px}
.mock14{grid-template-columns:repeat(7,1fr);gap:10px}
.mock.gen{background:#fff;display:flex;flex-direction:column;padding:6% 7%;gap:7%;overflow:hidden;aspect-ratio:16/10}
.mock.gen .lab{position:absolute;left:8px;top:6px}
.g-nav{display:flex;gap:6%;align-items:center}
.g-nav b{height:3px;width:10%;background:#D7DBF5;border-radius:2px}
.g-nav b:first-child{width:16%;background:var(--c1)}
.g-nav em{margin-left:auto;width:14%;height:7px;border-radius:99px;background:var(--c1)}
.g-hero{display:flex;gap:7%;align-items:center;flex:1}
.g-txt{display:flex;flex-direction:column;gap:9%;flex:1;height:100%;justify-content:center}
.g-txt b{display:block;height:5px;border-radius:3px;background:#C9CEF2}
.g-txt .g-badge{width:30%;height:5px;background:color-mix(in srgb,var(--c2) 35%,#fff)}
.g-txt .g-h{height:9px;width:90%;background:linear-gradient(90deg,var(--c1),var(--c2))}
.g-txt .g-h2{height:9px;width:62%;background:#1E2140}
.g-txt .g-p{width:80%}
.g-txt .g-btn{height:10px;width:34%;border-radius:99px;background:var(--c1)}
.g-img{flex:0 0 38%;align-self:stretch;border-radius:8px;background:linear-gradient(135deg,var(--c1),var(--c2));opacity:.85}
.g-cards{display:flex;gap:5%}
.g-cards b{flex:1;height:10px;border-radius:4px;background:#EEF0FB}
.mock.l-center .g-hero{flex-direction:column;text-align:center}
.mock.l-center .g-txt{align-items:center;width:100%}
.mock.l-center .g-img{display:none}
.mock.l-right .g-hero{flex-direction:row-reverse}
.mock14 .mock.gen{padding:7% 8%}
.mock14 .g-txt b{height:3px}.mock14 .g-txt .g-h,.mock14 .g-txt .g-h2{height:5px}.mock14 .g-txt .g-btn{height:6px}.mock14 .g-cards b{height:5px}
@media (max-width:760px){.mock14{grid-template-columns:repeat(4,1fr)}}

.mock.gen b{display:block;font-size:0}
/* 作品のウィンドウ：映像（YouTube・Vimeo）とサムネイル */
dialog.work .vid{position:relative;overflow:hidden}
dialog.work .vid.has{display:block}
dialog.work .vid iframe,dialog.work .vid img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
dialog.work dl{grid-template-columns:7em 1fr}
dialog.work dd a{word-break:break-all}

/* ===== 第6版（2026-11-15）：LPごとの色。白と黒を土台に、1色だけ置く（G2が良いとした「白黒とライム」の作り） ===== */
/* デザイン顧問＝ライム（案3のまま）、AI顧問＝ミント、AI構築支援＝イエロー */
html[data-lp="ai"][data-theme="3"]{--acc:#5CE6C3;--pen:#5CE6C3;--pen-hl:#5CE6C3;--mid:#0B6B57;--acc-text:#0B6B57;--slate:#6CC8AE;--pale:#BFF3E3;--light:#ECFCF7;--line:#C8F1E3;--bg2:#E6FBF4;--stage:#DDF8EE;--ghost:#8FDDC6;--field:#2E9C80;--okbg:#D9F7EC;--photo-back:#5CE6C3;--dark2:#0E2A22;--onDark:#D4F7EC;--accent2:#0B6B57;
  --ring:#111114,#0B6B57,#0E2A22,#145C4B,#1C7A63,#0F1F1A,#16493D,#111114,#22806A,#0D3A30}
html[data-lp="build"][data-theme="3"]{--acc:#FFD43B;--pen:#FFD43B;--pen-hl:#FFD43B;--mid:#7A5A00;--acc-text:#7A5A00;--slate:#D9B23A;--pale:#FFEFA8;--light:#FFFBE6;--line:#F7E7A6;--bg2:#FFF7D1;--stage:#FFF2BF;--ghost:#E8CB6A;--field:#A07A00;--okbg:#FFF2C2;--photo-back:#FFD43B;--dark2:#2A220A;--onDark:#FFF3C7;--accent2:#7A5A00;
  --ring:#111114,#7A5A00,#2A220A,#5C4500,#8F6B00,#1E1806,#4A3800,#111114,#9C7600,#332700}
/* 実績の輪：背景は透過（格子なし） */
.ring,html[data-theme] .ring,html[data-theme] #works .ring{background:transparent}
/* 作品の一覧：開ける作品だけ矢印を出す */
.worklist .wk{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font:500 15px/1.5 var(--font);color:var(--ink);opacity:.75}
html[data-theme] #works .worklist .wk{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.worklist .go{margin-left:auto}
dialog.work .caselink{margin:12px 0 0}
dialog.work .caselink[hidden]{display:none}