/* ヒダネHP 共通（トップ以下の章・サービスページ）。トップ最上部は hero.css。
   色: 最上部だけ地＝ヒダネの赤。ほかは白地（2026-10-22 大石さん指示）。文字・線＝ほぼ黒、強調＝赤、写真＝白黒、灰色の章＝コンクリート */
:root { --red: #c41e24; --ink: #0b0e10; --white: #ffffff; --grey: #cfcfcf; --pad: clamp(16px, 4vw, 64px); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--white); color: var(--ink); font-family: "Noto Sans JP", sans-serif; }
.hero { background: var(--red); }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.en { font-family: "Poppins", sans-serif; font-weight: 800; }
h1, h2, h3, .bubble, .capband span, .pains li, .faq summary, .painpick a { word-break: auto-phrase; text-wrap: balance; }

/* ヘッダー（サービスページ用。トップは hero.css に同じ形） */
.hd { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 28px var(--pad); }
.brand { display: flex; align-items: center; gap: 14px; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 26px; letter-spacing: .04em; }
.brand .ring { width: 48px; height: 48px; border: 5px solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.brand .ring img { width: 26px; }
/* ロゴ: 上は黒一色の正式ロゴをそのまま（2026-10-23 大石さん指定）。黒い帯の上は白地ボックスにカラーの正式ロゴ */
.brand.logo { line-height: 0; }
.brand.logo img { height: 40px; width: auto; }
.brand.logo.plate { background: var(--white); padding: 10px 16px; border-radius: 4px; }
.brand.logo.plate img { height: 30px; }
/* 最初の画面: 「AI」の丸の代わりの白黒素材 */
.coin.mat { background: none; border: 0; border-radius: 0; aspect-ratio: auto; height: auto; display: block; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28)); }
.coin.c1.mat { width: clamp(84px, 7.5vw, 130px); left: 0; top: 8%; }
.coin.c2.mat { width: clamp(120px, 11vw, 190px); right: -4%; top: 50%; }
.stat .coin.mat { width: 54px; filter: none; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); font-weight: 700; font-size: 15px; }
.nav a:not(.cta) { position: relative; }
.nav a:not(.cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:not(.cta):hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.cta { display: inline-block; background: var(--ink); color: var(--white); padding: 12px 30px; transform: skewX(-20deg); font-weight: 900; transition: transform .2s; }
.cta span { display: inline-block; transform: skewX(20deg); }
.cta:hover { transform: skewX(-20deg) translateY(-2px); }

/* 章の共通 */
.sec { position: relative; padding: clamp(80px, 11vw, 160px) var(--pad); overflow: hidden; overflow: clip; }
.in-w { max-width: 1240px; margin: 0 auto; position: relative; }
.ttl { margin-bottom: clamp(40px, 5vw, 72px); }
.ttl.c { text-align: center; }
.ttl small { color: var(--red); display: block; font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(13px, 1vw, 16px); letter-spacing: .3em; margin-bottom: 14px; }
.ttl h2 { font-weight: 900; font-size: clamp(30px, 4.2vw, 64px); line-height: 1.25; letter-spacing: -.005em; }
.ttl p { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.9; margin-top: 22px; max-width: 40em; }
.ttl.c p { margin-left: auto; margin-right: auto; }
/* 見出しの下の警告テープ柄 */
.stripe { display: block; height: 14px; width: min(420px, 70%); margin-top: 22px; background: repeating-linear-gradient(-55deg, var(--ink) 0 11px, transparent 11px 21px); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.16,1,.3,1) .15s; }
.ttl.c .stripe { margin-left: auto; margin-right: auto; transform-origin: center; }
.in .stripe, .stripe.in { transform: scaleX(1); }

/* 斜めの黒い帯（動画の字幕帯） */
.capband { position: relative; margin: clamp(48px, 6vw, 80px) calc(var(--pad) * -1 - 2%) 0; background: var(--ink); transform: skewX(-20deg) translateX(-110%); transition: transform .9s cubic-bezier(.16,1,.3,1); padding: 16px 0; text-align: center; }
.capband span { display: inline-block; transform: skewX(20deg); color: var(--white); font-weight: 900; font-size: clamp(15px, 1.5vw, 22px); letter-spacing: .04em; padding: 0 24px; }
.capband.in { transform: skewX(-20deg) translateX(0); }

/* ボタン（斜めの黒い帯） */
.btnrow { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.b-main { display: inline-flex; align-items: center; background: var(--ink); color: var(--white); font-weight: 900; font-size: clamp(15px, 1.25vw, 19px); padding: 18px 40px; transform: skewX(-20deg); transition: transform .2s; }
.b-main > span { display: inline-flex; gap: 12px; transform: skewX(20deg); }
.b-main i { font-style: normal; transition: transform .2s; }
.b-main:hover i { transform: translateX(6px); }
.b-sub { display: inline-flex; align-items: center; font-weight: 900; font-size: clamp(14px, 1.15vw, 17px); padding: 15px 30px; border: 3px solid var(--ink); transform: skewX(-20deg); transition: background .2s, color .2s; }
.b-sub > span { transform: skewX(20deg); }
.b-sub:hover { background: var(--ink); color: var(--white); }
.b-white { background: var(--white); color: var(--ink); }

/* スクロールで登場 */
[data-rv] { opacity: 0; transform: translateY(36px); transition: opacity .7s ease-out, transform .8s cubic-bezier(.16,1,.3,1); }
[data-rv="l"] { transform: translateX(-60px); }
[data-rv="r"] { transform: translateX(60px); }
[data-rv="pop"] { transform: scale(.4) rotate(-20deg); transition-timing-function: ease-out, cubic-bezier(.34,1.56,.64,1); }
[data-rv].in { opacity: 1; transform: none; }
[data-d="1"] { transition-delay: .12s; } [data-d="2"] { transition-delay: .24s; } [data-d="3"] { transition-delay: .36s; } [data-d="4"] { transition-delay: .48s; }

/* 黒丸の輪・AIコイン */
.ringbg { position: absolute; border-radius: 50%; border: clamp(26px, 3.4vw, 56px) solid var(--ink); aspect-ratio: 1; }
.aicoin { display: inline-grid; place-items: center; width: 1.2em; aspect-ratio: 1; border-radius: 50%; background: var(--red); border: .12em solid var(--ink); font-family: "Poppins", sans-serif; font-weight: 800; font-size: .62em; line-height: 1; }

/* ---------- 0. こんな悩み、ありませんか？（トップ直下・白地） ----------
   スクロール量で site.js が動かす: 赤の上に白が丸く広がる → PCの画面に悩みのチャット →
   「ヒダネが解決します」を入力・送信 → 画面の中へ入り、灰色の章へつながる */
.worry { position: relative; height: 1400vh; background: var(--red); }
.worry-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; }
.worry-bg { position: absolute; inset: 0; background: var(--white); clip-path: circle(calc(var(--r, 0) * 1%) at 50% 56%); }
.worry-ttl { position: absolute; left: var(--pad); right: var(--pad); top: clamp(56px, 9vh, 100px); z-index: 2; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s cubic-bezier(.16,1,.3,1); }
.worry-ttl small { display: block; font-size: clamp(11px, .9vw, 14px); letter-spacing: .3em; margin-bottom: 10px; color: var(--red); }
.worry-ttl h2 { font-weight: 900; font-size: clamp(30px, 4vw, 60px); line-height: 1.25; }
.worry-ttl .stripe { margin: 16px auto 0; transform-origin: center; }
.worry.t .worry-ttl { opacity: 1; transform: none; }
.worry.t .worry-ttl .stripe { transform: scaleX(1); }
.worry.z .worry-ttl { opacity: 0; transform: translateY(-30px); }
.worry-zoom { position: absolute; inset: 0; will-change: transform; }
.worry-pc { --lh: min(135vh, 1250px); position: absolute; left: 50%; top: calc(58vh - var(--lh) * .25); height: var(--lh); aspect-ratio: 2 / 3; transform: translate(-50%, 60px); opacity: 0; transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s; }
.worry.t .worry-pc { transform: translate(-50%, 0); opacity: 1; }
.worry-pc > img { width: 100%; height: 100%; }
/* PCの画面＝チャット */
.worry-scr { position: absolute; left: 13.7%; top: 10.3%; width: 72.9%; height: 29.3%; background: var(--white); overflow: hidden; display: flex; flex-direction: column; font-size: 14px; }
.chat-hd { display: flex; align-items: center; gap: .45em; padding: .55em .9em; border-bottom: 2px solid var(--ink); font-weight: 900; font-size: .9em; }
.chat-hd img { width: 1.2em; }
.chat-log { list-style: none; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .5em; padding: .6em .9em; overflow: hidden; }
.chat-log .m { word-break: auto-phrase; align-self: flex-start; max-width: 84%; background: #ececec; border-radius: 1em 1em 1em .25em; padding: .5em .85em; font-weight: 700; line-height: 1.4; opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: translateY(.8em); transition: opacity .3s, transform .4s cubic-bezier(.34,1.56,.64,1), max-height .35s, padding .35s; }
.chat-log .m.on { opacity: 1; max-height: 6em; padding-top: .5em; padding-bottom: .5em; transform: none; }
.chat-log .me { align-self: flex-end; display: flex; align-items: center; gap: .45em; background: var(--red); color: var(--white); font-weight: 900; border-radius: 1em 1em .25em 1em; }
.chat-log .me img { width: 1.15em; }
.chat-in { display: flex; align-items: center; gap: .15em; border-top: 2px solid var(--ink); padding: .5em .9em; min-height: 2.6em; }
.chat-in .typed { font-weight: 900; }
.chat-in .caret, .worry-scr .caret { width: 2px; height: 1.15em; background: var(--red); animation: blink 1s steps(1) infinite; }
.chat-in .send { margin-left: auto; background: var(--ink); color: var(--white); font-size: .8em; padding: .25em .8em; border-radius: 3px; transition: background .2s; }
.worry.typing .chat-in .send { background: var(--red); }
@keyframes blink { 50% { opacity: 0; } }
/* 画面の中へ入る前に、画面を「PCの中」と同じ見た目（白地＋上の黒い帯）にする。電源が切れる時はこれが縮む */
.scr-fill { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: var(--white); }
.scr-fill i { position: absolute; left: 0; right: 0; top: 0; height: 5%; background: var(--ink); }
.worry.off .worry-scr { background: #050505; }
.worry.off .chat-hd, .worry.off .chat-log, .worry.off .chat-in { visibility: hidden; }

/* PCの中（画面いっぱい）: ヒダネのロゴがカーソルになり、3つの仕事を片づける。アプリ風の画面 */
.desk { position: absolute; inset: 0; z-index: 6; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
  background: #f4f2ee radial-gradient(rgba(11, 14, 16, .09) 1px, transparent 1.4px) 0 0 / 22px 22px; }
.desk.on { opacity: 1; visibility: visible; }
.desk-bar { position: relative; height: 40px; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 12px; }
.desk-bar > span { display: flex; align-items: center; gap: 8px; }
.db-l { font-family: "Poppins", sans-serif; font-weight: 800; letter-spacing: .12em; }
.db-l img { width: 17px; }
.db-c { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 700; background: rgba(255, 255, 255, .1); border-radius: 99px; padding: 3px 14px; }
.db-c b { font-family: "Poppins", sans-serif; color: var(--red); font-size: 14px; }
.db-st { font-weight: 700; }
.db-st i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25); }
.desk-ttl { text-align: center; margin-top: clamp(12px, 2.6vh, 28px); }
.desk-ttl small { display: block; color: var(--red); font-size: 11px; letter-spacing: .3em; }
.desk-ttl b { display: block; font-weight: 900; font-size: clamp(18px, 2.2vw, 30px); margin-top: 2px; }

.win { position: absolute; left: 50%; top: 54%; width: min(1060px, 92vw); height: min(56vh, 540px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 10px 10px 0 var(--red), 0 30px 60px -24px rgba(0, 0, 0, .35);
  opacity: 0; transform: translate(-50%, -50%) translateY(40px) scale(.96); transition: opacity .35s, transform .55s cubic-bezier(.16,1,.3,1); }
.win.act { opacity: 1; transform: translate(-50%, -50%); }
.win.done { opacity: 0; transform: translate(-50%, -50%) translateX(-90px) scale(.96); }
.win header { flex: none; height: 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-bottom: 1px solid #e6e3de; background: #fbfaf8; }
.lights { display: flex; gap: 7px; }
.lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--red); }
.lights i:nth-child(2) { background: var(--ink); }
.lights i:nth-child(3) { background: #d3d0ca; }
.win header b { font-weight: 700; font-size: 13px; }
.win header em { justify-self: end; display: flex; align-items: center; gap: 5px; font-style: normal; background: var(--ink); color: var(--white); font-family: "Poppins", sans-serif; font-weight: 800; font-size: 11px; padding: 3px 10px 3px 6px; border-radius: 99px; }
.win header em img { width: 14px; }
.wbody { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 170px 1fr; }
.side { background: #f7f5f1; border-right: 1px solid #e6e3de; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: #6b6b6b; }
.side-hd { display: flex; align-items: center; gap: 6px; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .1em; color: var(--ink); margin-bottom: 10px; }
.side-hd img { width: 15px; }
.side span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; }
.side span i { width: 14px; height: 14px; border-radius: 4px; border: 2px solid currentColor; }
.side span.cur { background: var(--white); color: var(--ink); box-shadow: 0 1px 0 #e6e3de, inset 3px 0 0 var(--red); }
.pane { min-height: 0; padding: clamp(14px, 2vw, 26px); }
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(14px, 2vw, 24px); }
.split.b { grid-template-columns: 1.25fr .75fr; }
.split.c { grid-template-columns: .9fr 1.1fr; }
.pane small { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; color: #8a8780; letter-spacing: .04em; margin-bottom: 10px; }
.pane small img { width: 13px; }
.tl { font-weight: 500; font-size: 13.5px; line-height: 1.75; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path .6s steps(16); }
.tl.on { clip-path: inset(0 0 0 0); }
.stamp { position: absolute; right: 16px; bottom: 16px; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--red); color: var(--red); background: rgba(255, 255, 255, .85); display: grid; place-items: center; text-align: center; font-weight: 900; font-size: 13px; line-height: 1.3; opacity: 0; transform: rotate(-14deg) scale(2); transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.stamp.on { opacity: .95; transform: rotate(-14deg) scale(1); }
.sendbtn { display: inline-block; background: #d3d0ca; color: var(--white); font-weight: 900; font-size: 12.5px; padding: 8px 16px; border-radius: 8px; transition: background .25s; }
.sendbtn.on { background: var(--red); }
.card { background: var(--white); border: 1px solid #e6e3de; border-radius: 10px; box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .35); }
/* 01 リサーチ → 資料 */
.split.r { grid-template-columns: 1fr 1.1fr; }
.web { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.search { display: flex; align-items: center; gap: 8px; background: var(--white); border: 2px solid var(--ink); border-radius: 99px; padding: 6px 16px; }
.search > i { font-style: normal; font-size: 16px; color: var(--red); }
.search .tl { font-weight: 700; }
.results { list-style: none; display: grid; gap: 7px; }
.results li { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--white); border: 1px solid #e6e3de; border-radius: 10px; padding: 8px 12px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s; }
.results li.on { opacity: 1; transform: none; }
.results span { font-size: 11.5px; color: #8a8780; line-height: 1.4; }
.results span b { display: block; color: var(--ink); font-size: 13px; }
.results em { font-style: normal; flex: none; font-weight: 900; font-size: 10.5px; color: var(--white); background: var(--red); border-radius: 99px; padding: 3px 9px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.results em.on { opacity: 1; transform: none; }
.slide { position: relative; align-self: center; aspect-ratio: 16 / 10; background: var(--white); border: 1px solid #e6e3de; border-radius: 8px; box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .45); overflow: hidden; }
.slide::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--red); }
.sl-in { padding: 22px 22px 16px; }
.tl.stt { font-weight: 900; font-size: 18px; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.slide ul { list-style: none; margin-top: 10px; display: grid; gap: 4px; }
.slide li { font-weight: 700; font-size: 12.5px; padding-left: 16px; position: relative; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.slide li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--red); transform: skewX(-20deg); }
.slide li.on { opacity: 1; transform: none; }
.mini { position: absolute; right: 22px; bottom: 22px; width: 30%; height: 34%; display: flex; align-items: flex-end; gap: 10%; border-bottom: 2px solid var(--ink); }
.mini i { flex: 1; height: 0; background: var(--ink); transition: height .5s cubic-bezier(.16,1,.3,1); }
.mini i:last-child { background: var(--red); }
.mini i.on { height: var(--h); }
.pg { position: absolute; left: 22px; bottom: 10px; font-size: 10px; color: #8a8780; }
.slide .stamp { right: auto; left: 38%; bottom: 14%; }
/* 02 公式LINE */
.split.l { grid-template-columns: 1.3fr .7fr; }
.steps-l { display: flex; flex-direction: column; min-height: 0; }
.steps-l ol { list-style: none; display: grid; gap: 8px; }
.steps-l li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; background: var(--white); border: 1px solid #e6e3de; border-radius: 10px; padding: 9px 12px; opacity: .35; transition: opacity .3s, border-color .3s, box-shadow .3s; }
.steps-l li.on { opacity: 1; border-color: var(--ink); box-shadow: inset 3px 0 0 var(--red); }
.steps-l li > i { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font-style: normal; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 13px; }
.steps-l span { font-size: 11.5px; color: #8a8780; line-height: 1.4; }
.steps-l span b { display: block; color: var(--ink); font-size: 13.5px; }
.steps-l em { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: var(--white); display: grid; place-items: center; font-weight: 900; font-size: 12px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.steps-l em.on { opacity: 1; transform: none; }
.bar2 { position: relative; height: 8px; border-radius: 99px; background: #e6e3de; margin-top: 14px; overflow: hidden; }
.bar2 i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); border-radius: 99px; transition: width .5s; }
.bar2 i.on { width: var(--w); }
.lphone { justify-self: center; align-self: center; height: 100%; max-height: 360px; aspect-ratio: 9 / 18; background: var(--ink); border-radius: 26px; padding: 8px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.ph-scr { position: relative; height: 100%; border-radius: 19px; background: #e9eef3; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.ph-hd { margin: 0 -10px; background: var(--white); text-align: center; font-weight: 900; font-size: 11px; padding: 14px 0 8px; border-bottom: 1px solid #dde3e8; }
.ph-msg { align-self: flex-start; background: var(--white); border-radius: 14px 14px 14px 4px; padding: 8px 10px; font-weight: 700; font-size: 11px; line-height: 1.5; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.ph-cpn { align-self: flex-start; background: var(--red); color: var(--white); border-radius: 12px; padding: 8px 12px; font-weight: 900; font-size: 12px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.ph-cpn b { display: block; font-size: 10px; font-weight: 700; opacity: .85; }
.ph-msg.on, .ph-cpn.on { opacity: 1; transform: none; }
.ph-menu { margin: auto -10px -10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #dde3e8; padding-top: 2px; }
.ph-menu i { aspect-ratio: 1.25; background: var(--white); transition: background .3s; }
.ph-menu i.on { background: var(--ink); }
.ph-menu i.on:nth-child(odd) { background: var(--red); }
.ph-rsv { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-8deg) scale(1.6); white-space: nowrap; border: 2px solid var(--red); color: var(--red); background: var(--white); font-weight: 900; font-size: 11px; padding: 4px 10px; border-radius: 6px; opacity: 0; transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.ph-rsv.on { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg); }
/* 03 動画編集 → 投稿 */
.split.v { grid-template-columns: 1.45fr .55fr; }
.editor { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.preview { position: relative; flex: 1; min-height: 0; background: var(--ink); border-radius: 8px; overflow: hidden; }
.preview img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .85; }
.telop { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%) skewX(-12deg) scale(.6); background: var(--red); color: var(--white); font-weight: 900; font-size: 15px; padding: 4px 14px; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.telop.on { opacity: 1; transform: translateX(-50%) skewX(-12deg); }
.ph-play { position: absolute; left: 12px; top: 10px; font-style: normal; color: var(--white); font-size: 12px; background: rgba(0, 0, 0, .5); border-radius: 99px; padding: 2px 9px; }
.tracks { position: relative; display: grid; gap: 4px; background: #23272b; border-radius: 8px; padding: 8px 10px; }
.trk { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px; }
.trk b { color: #9aa0a6; font-size: 10px; font-weight: 700; }
.trk span { position: relative; height: 16px; background: #2f3439; border-radius: 4px; }
.trk span i { position: absolute; left: var(--x); top: 0; bottom: 0; width: 0; border-radius: 4px; background: #e9e6e1; transition: width .35s; }
.trk span i.t { background: var(--red); }
.trk span i.m { background: repeating-linear-gradient(90deg, #6b737a 0 2px, transparent 2px 5px); }
.trk span i.on { width: var(--w); }
.head { position: absolute; top: 4px; bottom: 4px; left: 50px; width: 2px; background: var(--red); opacity: 0; }
.head.on { opacity: 1; animation: scrub 3s linear infinite; }
@keyframes scrub { from { left: 50px; } to { left: calc(100% - 12px); } }
.export { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.export small { margin: 0; }
.export span { height: 8px; border-radius: 99px; background: #e6e3de; overflow: hidden; }
.export span i { display: block; height: 100%; width: 0; background: var(--red); transition: width 1.2s ease-out; }
.export span i.on { width: 100%; }
.post { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid #e6e3de; border-radius: 10px; padding: 14px; }
.post label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12.5px; opacity: .35; transition: opacity .3s; }
.post label i { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--ink); display: grid; place-items: center; font-style: normal; font-size: 11px; color: transparent; transition: background .2s, color .2s; }
.post label.on { opacity: 1; }
.post label.on i { background: var(--red); border-color: var(--red); color: var(--white); }
.cap2 { font-size: 11px; color: #555; font-weight: 700; background: #f7f5f1; border-radius: 6px; padding: 6px 8px; opacity: 0; transition: opacity .3s; }
.cap2.on { opacity: 1; }
.post .sendbtn { margin-top: auto; text-align: center; }

/* 共通: 終わりの通知 */
.toast { position: absolute; right: 18px; top: 14px; z-index: 2; display: flex; gap: 10px; align-items: center; background: var(--ink); color: var(--white); border-radius: 12px; padding: 10px 16px 10px 12px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.toast.on { opacity: 1; transform: none; }
.wB .toast { right: auto; left: 196px; top: auto; bottom: 16px; }
.wC .toast { right: auto; left: 200px; top: 14px; }
.toast > i { width: 24px; height: 24px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; }
.toast span { font-size: 11.5px; line-height: 1.45; color: #cfcfcf; }
.toast b { display: block; color: var(--white); font-size: 13px; }
/* カーソル＝ヒダネのロゴ */
.aicur { position: absolute; z-index: 8; left: 0; top: 0; width: 58px; height: 58px; border-radius: 50%; background: var(--red); border: 6px solid var(--ink); display: grid; place-items: center; transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s; pointer-events: none; animation: pulse 1.2s infinite; }
.aicur img { width: 56%; }
.aicur.show { opacity: 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(196, 30, 36, .45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(196, 30, 36, 0); } }
.desk-cap { position: absolute; left: 0; right: 0; bottom: clamp(10px, 2.2vh, 24px); }
.desk-cap .capband { margin: 0 -2%; }
.desk-note { text-align: center; font-weight: 500; font-size: 11px; color: #6b6b6b; margin-top: 8px; }

/* 支援の流れ: 動画＋短い説明 */
.vbox { position: relative; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 9; border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--red); background: var(--ink); overflow: hidden; }
.vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 14px; padding: clamp(14px, 2.6vw, 34px); background: linear-gradient(to top, rgba(11, 14, 16, .35), transparent 45%); border: 0; cursor: pointer; color: var(--white); font-family: inherit; }
.play i { width: clamp(60px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--red); border: clamp(6px, .7vw, 10px) solid var(--ink); position: relative; transition: transform .2s; }
.play i::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: .55em 0 .55em .9em; border-color: transparent transparent transparent var(--white); font-size: clamp(18px, 2vw, 26px); }
.play:hover i { transform: scale(1.06); }
.play span { margin-bottom: clamp(12px, 1.9vw, 30px); background: var(--ink); color: var(--white); font-weight: 900; font-size: 15px; padding: 8px 20px; transform: skewX(-20deg); display: inline-flex; gap: 8px; align-items: baseline; }
.play span small { font-family: "Poppins", sans-serif; font-size: 12px; color: var(--red); }
.vbox.playing .play { display: none; }
.steps4 { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1080px; margin: 34px auto 0; }
.steps4 li { border-top: 5px solid var(--ink); padding-top: 14px; }
.steps4 b { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 14px; color: var(--red); }
.steps4 h3 { font-weight: 900; font-size: clamp(22px, 2vw, 30px); margin-top: 2px; }
.steps4 p { font-weight: 700; font-size: 14px; line-height: 1.7; margin-top: 6px; }

br.sp { display: none; }
/* ---------- 下層ページ（build_pages.py） ---------- */
.redsec { background: var(--red); }
.redsec .ttl small, .redsec .ey { color: var(--ink); }
.ey { letter-spacing: .3em; font-size: 14px; color: var(--red); }
.mission .ey + h2 { margin-top: 14px; }
.mission .btnrow { justify-content: center; }
.msg { max-width: 46em; display: grid; gap: 18px; font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 2; }
.msg .sign { font-weight: 900; text-align: right; margin-top: 8px; }
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.people article { border-top: 6px solid var(--ink); padding-top: 18px; }
.people h3 { font-weight: 900; font-size: clamp(24px, 2.2vw, 32px); margin: 12px 0 8px; }
.people p { font-weight: 700; font-size: 15px; line-height: 1.85; }
.role { display: inline-block; background: var(--red); color: var(--white); font-weight: 900; font-size: 13px; padding: 4px 16px; transform: skewX(-20deg); }
.role > span { display: inline-block; transform: skewX(20deg); }
.sub-h { font-weight: 900; font-size: clamp(20px, 1.8vw, 26px); margin: clamp(48px, 6vw, 80px) 0 20px; }
.roster { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.roster li { background: var(--ink); color: var(--white); padding: 18px 18px 20px; }
.roster b { color: var(--red); font-size: 20px; }
.roster h3 { font-weight: 900; font-size: 18px; margin: 6px 0 4px; }
.roster p { font-weight: 700; font-size: 13px; line-height: 1.6; color: #cfcfcf; }
.redsec .roster li { box-shadow: 6px 6px 0 rgba(0, 0, 0, .25); }
.cardlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 28px); }
.lcard { display: flex; flex-direction: column; gap: 10px; background: var(--white); border: 3px solid var(--ink); padding: 24px 24px 22px; box-shadow: 8px 8px 0 var(--red); transition: transform .2s; }
a.lcard:hover { transform: translate(-3px, -3px); }
.lcard .tag { align-self: flex-start; background: var(--ink); color: var(--white); font-weight: 900; font-size: 12px; padding: 3px 14px; transform: skewX(-20deg); }
.lcard .tag > span { display: inline-block; transform: skewX(20deg); }
.lcard h3 { font-weight: 900; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; }
.lcard p { font-weight: 700; font-size: 14px; line-height: 1.8; flex: 1; }
.lcard .more { font-weight: 900; font-size: 14px; color: var(--red); }
.box.lk { display: block; transition: transform .2s; }
.box.lk:hover { transform: translate(-3px, -3px); }
.box.lk p { font-weight: 700; font-size: 15px; line-height: 1.8; }
.chiplist { display: flex; flex-wrap: wrap; gap: 10px; }
.chiplist span { background: var(--ink); color: var(--white); font-weight: 900; font-size: 15px; padding: 8px 18px; transform: skewX(-12deg); }
.chips.dark span { border-color: var(--ink); color: var(--ink); }
.chips.dark { justify-content: flex-start; }
.legal { max-width: 900px; display: grid; gap: 34px; }
.lg h2 { font-weight: 900; font-size: clamp(18px, 1.6vw, 22px); border-left: 8px solid var(--red); padding-left: 14px; margin-bottom: 12px; }
.lg p { font-weight: 500; font-size: 15px; line-height: 1.95; }
.lg-sign { font-weight: 700; font-size: 14px; line-height: 1.9; text-align: right; }
@media (max-width: 900px) { .people, .cardlist { grid-template-columns: 1fr; } .roster { grid-template-columns: 1fr 1fr; } }

/* 実績のカード: 7件で段が余らないよう、広い画面は4列・1件目を2枚分（cases.css の後でも効くよう #case で指定） */
@media (min-width: 1101px) { #case .hc-list:has(> .hc-card:nth-child(7):last-child) { grid-template-columns: repeat(4, 1fr); } #case .hc-card:first-child:nth-last-child(7) { grid-column: span 2; } }
@media (min-width: 901px) and (max-width: 1100px) { #case .hc-list { grid-template-columns: repeat(2, 1fr); } #case .hc-card:first-child:nth-last-child(odd) { grid-column: span 2; } }

/* 86.4% を強調（2026-10-23 大石さん指定）: 白い数字を黒い斜めの帯に載せる */
.hero .stat b { display: inline-block; font-size: clamp(44px, 4.4vw, 70px); color: var(--white); background: var(--ink); padding: 4px .3em 2px; margin: 6px 0 4px; transform: skewX(-12deg); box-shadow: 6px 6px 0 rgba(0, 0, 0, .25); }
.hero .stat small { font-size: 13px; }
.jp-stat .bignum b { color: var(--white); background: var(--ink); padding: 0 .28em; transform: skewX(-12deg); box-shadow: 10px 10px 0 rgba(0, 0, 0, .25); }
.jp-stat .bignum b > * { transform: skewX(12deg); }
.jp-stat .bignum b sub { font-size: .5em; }
.jp-stat .bignum b .aicoin { display: none; }
.jp-stat .bignum small { margin-bottom: 14px; }

/* 「AI導入は、お早めに！」の章は赤地（2026-10-23 大石さん指定） */
#start { background: var(--red); }
#start .ttl small { color: var(--ink); }
#start .road p { color: var(--ink); }
#start .start-top { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: center; margin-bottom: clamp(40px, 5vw, 72px); }
#start .start-top .ttl { margin-bottom: 0; }
/* 日本企業のAI導入の数字（赤地にそのまま。コンクリートの札は 2026-10-23 大石さん指示で外した） */
.jp-stat { padding: 0; }
.jp-stat .japan .ai, .jp-stat .aicoin { background: var(--white); }
.jp-stat .japan { font-size: clamp(48px, 7vw, 116px); }
.jp-stat .bignum { margin-top: clamp(16px, 2vw, 28px); }
.jp-stat .bignum small { font-size: clamp(13px, 1.2vw, 17px); }
.jp-stat .bignum b { font-size: clamp(56px, 6.6vw, 108px); }
.jp-stat .bignum em { font-size: 11px; }
@media (max-width: 900px) { #start .start-top { grid-template-columns: 1fr; } }

/* 助成金: 最大75% */
.env .pct { font-weight: 900; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; margin: 4px 0; }
.env .pct em { font-style: normal; font-family: "Poppins", sans-serif; color: var(--red); font-size: 2em; margin: 0 2px; }
/* 締めくくり: 無料の2つ */
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); max-width: 1000px; margin: 0 auto; }
.offer { background: var(--white); color: var(--ink); padding: clamp(24px, 3vw, 40px); box-shadow: 10px 10px 0 var(--red); display: flex; flex-direction: column; gap: 14px; }
.offer .ofn { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .25em; color: var(--red); }
.offer h3 { font-weight: 900; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; }
.offer p { font-weight: 700; font-size: 15px; line-height: 1.85; flex: 1; }
.offer .b-main { align-self: flex-start; background: var(--ink); color: var(--white); }
.closing { text-align: center; font-weight: 900; font-size: clamp(22px, 2.6vw, 38px); margin-top: clamp(36px, 4vw, 56px); }
.sub-note { text-align: center; font-size: 12px; color: #bdbdbd; margin-top: 16px; }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; } .offer .b-main { align-self: stretch; } }


/* 最初の画面: 見出しとスマホの間のすき間に、白黒の小物を「みっけ」のように敷き詰める（PC幅だけ・順にフェードイン） */
.xmat { position: absolute; z-index: 2; left: 40%; top: 100px; bottom: 96px; width: 25vw; pointer-events: none; }
.hero .visual { z-index: 3; }
.xm { position: absolute; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3)); opacity: 0; animation: xfade .8s ease-out forwards; }
@keyframes xfade { to { opacity: 1; } }
/* 文章: 誰の・何の・どこの */
.who { font-weight: 900; font-size: clamp(16px, 1.5vw, 23px); margin: -8px 0 14px; }
@media (min-width: 901px) { .hero .lead { max-width: calc(38vw - 64px); } .hero .haz { max-width: calc(39vw - 72px); } }
@media (min-width: 901px) and (max-width: 1200px) { .hero .btns { gap: 10px; } .hero .btn-main, .hero .btn-sub { padding: 13px 20px; font-size: 14px; } }
/* 研修ページ: 大見出しの上にサービス名 */
/* サービス名: 赤い地の大きな札を一番上に（2026-10-23 大石さん指定） */
.svcname { margin-bottom: 18px; }
.svcname span { display: inline-block; background: var(--red); color: var(--white); font-weight: 900; font-size: clamp(22px, 2.2vw, 32px); padding: 8px 30px; transform: skewX(-20deg); box-shadow: 6px 6px 0 var(--ink); }
@keyframes spin { to { rotate: 360deg; } }


/* 仕組みが会社の中に残る: 会社のビル */
.office { position: relative; width: min(100%, 360px); margin-left: auto; }
.office .ob { width: 100%; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.16,1,.3,1); }
.house-wrap.in .office .ob { clip-path: inset(0 0 0 0); }
.office::after { content: ""; position: absolute; left: -14%; right: -14%; bottom: -3px; height: 6px; background: var(--ink); }
.office .mk { position: absolute; right: -8%; top: 8%; width: 30%; background: var(--red); border: 6px solid var(--ink); border-radius: 50%; padding: 5%; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) 1.1s; }
.house-wrap.in .office .mk { transform: scale(1); }
.house-wrap .thumb { z-index: 2; }

/* 助成金のご相談: 国会 */
.sub-vis .diet { position: absolute; left: 0; top: 6%; width: 100%; opacity: 0; transform: translateY(30px); transition: opacity .6s, transform .9s cubic-bezier(.16,1,.3,1); }
.sub-vis.in .diet { opacity: 1; transform: none; }
.sub-vis .diet { width: 118%; left: -12%; top: 14%; }
/* コインをつまんだ手が、国会の上へ降りてくる */
.sub-vis img.hand { left: 34%; top: -14%; width: 22%; z-index: 3; transition-delay: .3s; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%); }
.sub-vis .env { left: 46%; top: 56%; width: 50%; }
@media (max-width: 900px) {
  .xmat { display: none; }
  .office { width: 64%; margin: 0 auto; }
  .house-wrap { margin-bottom: 40px; }
  .house-wrap .thumb { width: 34%; bottom: -6%; }
  .sub-vis .diet { width: 100%; left: 0; top: 18%; }
  .sub-vis img.hand { left: 38%; top: -6%; width: 20%; }
  .sub-vis { margin-top: 30px; }
}



/* ---------- 1. 世の中の数字（灰色の章） ---------- */
.grey { background: linear-gradient(rgba(214, 214, 214, .62), rgba(214, 214, 214, .62)), url(concrete.webp) center top / 1600px auto; }
.japan { font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(64px, 13vw, 210px); line-height: 1; letter-spacing: .06em; display: flex; justify-content: center; align-items: center; gap: .02em; }
.japan span { display: inline-block; opacity: 0; transform: translateY(-80px); transition: opacity .3s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.japan .ai { width: .92em; aspect-ratio: 1; border-radius: 50%; border: .1em solid var(--ink); background: var(--red); display: inline-grid; place-items: center; font-size: .5em; width: 1.84em; letter-spacing: 0; }
.japan.in span { opacity: 1; transform: none; }
.japan.in span:nth-child(2) { transition-delay: .08s; } .japan.in span:nth-child(3) { transition-delay: .35s; } .japan.in span:nth-child(4) { transition-delay: .16s; } .japan.in span:nth-child(5) { transition-delay: .24s; }
.bignum { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.bignum small { font-weight: 900; font-size: clamp(16px, 1.6vw, 24px); }
.bignum b { font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(72px, 11vw, 170px); line-height: 1.05; display: flex; align-items: baseline; gap: 12px; }
.bignum b .aicoin { font-size: .55em; align-self: center; }
.bignum b sub { font-size: .32em; vertical-align: baseline; }
.bignum em { font-style: normal; font-weight: 500; font-size: 12px; margin-top: 6px; }
.grey-hands { display: flex; justify-content: center; gap: clamp(16px, 6vw, 120px); margin-top: clamp(40px, 6vw, 80px); }
.grey-hands img { width: min(620px, 80%); }

/* ---------- 2. 変えられる仕事 ---------- */
.jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
.job { position: relative; background: var(--white); padding: 26px 26px 30px; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.job .ph { height: 190px; display: grid; place-items: center; margin: -6px 0 16px; background: var(--red); }
.job .ph img { max-height: 168px; width: auto; }
.job h3 { font-weight: 900; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; }
.job h3 small { display: block; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .2em; color: var(--red); margin-bottom: 6px; }
.job .bef { font-weight: 700; font-size: 14px; margin-top: 14px; padding: 10px 12px; background: #eee; }
.job .aft { font-weight: 900; font-size: 15px; line-height: 1.7; margin-top: 10px; }
.job .aft::before { content: "→ "; color: var(--red); }
.note { font-weight: 500; font-size: 12px; line-height: 1.8; margin-top: 28px; }

/* ---------- 4. 支援メニュー ---------- */
.svc { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 90px); padding: clamp(36px, 5vw, 72px) 0; border-top: 4px solid var(--ink); }
.svc:last-child { border-bottom: 4px solid var(--ink); }
.svc:nth-child(even) .svc-ph { order: 2; }
.svc-ph { position: relative; aspect-ratio: 1.15; display: grid; place-items: center; }
.svc-ph .ringbg { width: 74%; left: 13%; top: 6%; }
.svc-ph img { position: relative; width: 78%; max-height: 92%; object-fit: contain; }
/* 縦長の写真（手を挙げる手）は、枠の高さに合わせて小さく収める */
.svc-ph img[src$="raise-hand.webp"] { width: auto; height: 86%; max-height: none; }
.phero .vis img[src$="raise-hand.webp"] { width: auto; height: 84%; max-height: none; }
.svc-ph .bubble { position: absolute; left: 0; top: 2%; max-width: 62%; background: var(--white); padding: 14px 18px; border-radius: 18px 18px 18px 4px; font-weight: 900; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.6; z-index: 2; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--red); }
.svc-tx .en { font-size: clamp(13px, 1vw, 15px); letter-spacing: .25em; }
.svc-tx h3 { font-weight: 900; font-size: clamp(26px, 3vw, 44px); line-height: 1.3; margin: 10px 0 6px; }
.svc-tx .name { display: inline-block; background: var(--red); color: var(--white); font-weight: 900; font-size: clamp(20px, 2vw, 28px); padding: 8px 28px; transform: skewX(-20deg); box-shadow: 6px 6px 0 var(--ink); margin-bottom: 18px; }
.svc-tx .name + .en { display: block; }
.svc-tx .name > span { display: inline-block; transform: skewX(20deg); }
.svc-tx p { font-weight: 700; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.95; margin-top: 18px; }

/* ---------- 5. 導入事例 ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.case { background: var(--ink); color: var(--white); padding: 30px 26px 32px; position: relative; }
.case .tag { display: inline-block; background: var(--red); color: var(--ink); font-weight: 900; font-size: 12px; padding: 3px 14px; transform: skewX(-20deg); }
.case .tag > span { display: inline-block; transform: skewX(20deg); }
.case h3 { font-weight: 900; font-size: clamp(19px, 1.6vw, 23px); margin: 14px 0 20px; }
.case .bef { font-weight: 700; font-size: 14px; line-height: 1.7; color: #bdbdbd; }
.case .arrow { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 26px; color: var(--red); margin: 8px 0; line-height: 1; }
.case .aft { font-weight: 900; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }

/* ---------- 6. 選ばれる理由（伴走トレーナー＋仕組みが会社に残る） ---------- */
.withyou { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 48px); }
.withyou .l { font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(28px, 3.6vw, 60px); text-align: right; }
.withyou .r { font-weight: 900; font-size: clamp(26px, 3.4vw, 56px); }
.hazc { width: clamp(220px, 28vw, 420px); aspect-ratio: 1; border-radius: 50%; padding: clamp(14px, 1.6vw, 24px); background: repeating-linear-gradient(-55deg, var(--ink) 0 14px, var(--red) 14px 26px); }
.hazc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.reasons { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 100px); align-items: center; margin-top: clamp(80px, 9vw, 140px); }
.house-wrap { position: relative; }
.house { position: relative; width: min(100%, 420px); aspect-ratio: .86; margin-left: auto; background: var(--red); clip-path: polygon(50% 0, 100% 26%, 100% 100%, 0 100%, 0 26%); display: grid; place-items: center; padding-top: 22%; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 72%; }
.grid i { aspect-ratio: 1; background: var(--white); transform: scale(0); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.house-wrap.in .grid i { transform: scale(1); }
.house .mk { position: absolute; left: 50%; top: 56%; width: 22%; transform: translate(-50%, -50%) scale(0); background: var(--white); border-radius: 50%; padding: 4%; transition: transform .5s cubic-bezier(.34,1.56,.64,1) 1.4s; }
.house-wrap.in .house .mk { transform: translate(-50%, -50%) scale(1); }
.house-wrap .thumb { position: absolute; left: -6%; bottom: -8%; width: 46%; }
.rlist { list-style: none; display: grid; gap: 26px; }
.rlist li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.rlist .n { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 18px; background: var(--ink); color: var(--white); padding: 6px 14px; transform: skewX(-20deg); }
.rlist .n > span { display: inline-block; transform: skewX(20deg); }
.rlist h3 { font-weight: 900; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.4; }
.rlist p { font-weight: 700; font-size: 15px; line-height: 1.85; margin-top: 6px; }

/* ---------- 7. 助成金のご相談 ---------- */
.subsidy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.sub-vis { position: relative; aspect-ratio: 1.1; }
.sub-vis .hand { position: absolute; left: 4%; top: -4%; width: 56%; transform: translateY(-40%); opacity: 0; transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .5s; }
.sub-vis.in .hand { transform: none; opacity: 1; }
.env { position: absolute; left: 30%; top: 36%; width: 52%; aspect-ratio: 1.5; background: #f4ece4; border: 4px solid var(--ink); transform: rotate(-5deg); padding: 6% 7%; box-shadow: 10px 10px 0 var(--ink); }
.env b { font-weight: 900; font-size: clamp(20px, 2vw, 30px); display: block; }
.env small { font-weight: 700; font-size: clamp(11px, .9vw, 13px); }
.env img { position: absolute; right: 8%; bottom: 10%; width: 16%; }
.heart { position: absolute; right: 0; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--red); display: grid; place-items: center; color: var(--white); font-size: clamp(28px, 3vw, 48px); }
.sub-tx p { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.95; margin-top: 18px; }
.sub-tx .small { font-size: 13px; font-weight: 500; }

/* ---------- 8. 相談から開始まで ---------- */
.road { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: rd; }
.road li { position: relative; }
.road .tg { display: block; background: var(--ink); color: var(--white); text-align: center; padding: 14px 6px; transform: skewX(-20deg); font-weight: 900; font-size: clamp(14px, 1.2vw, 18px); }
.road .tg > span { display: inline-block; transform: skewX(20deg); }
.road .tg b { font-family: "Poppins", sans-serif; color: var(--red); margin-right: 8px; }
.road p { font-weight: 700; font-size: 14px; line-height: 1.8; margin-top: 16px; padding: 0 4px; }

/* ---------- 9. よくある質問 ---------- */
.faq { max-width: 920px; margin: 0 auto; display: grid; gap: 14px; }
.faq details { background: var(--white); border: 3px solid var(--ink); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 22px; font-weight: 900; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: "Poppins", sans-serif; font-weight: 800; color: var(--red); font-size: 22px; }
.faq summary::after { content: "+"; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 26px; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 22px 58px; font-weight: 700; font-size: 15px; line-height: 1.9; }

/* ---------- 10. その先に・会社概要・相談 ---------- */
.grow { text-align: center; }
.grow .pl { position: relative; width: min(520px, 80%); margin: 0 auto; }
.grow .kg { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%) rotate(-4deg); font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(30px, 4.4vw, 64px); white-space: nowrap; letter-spacing: .02em; }
.company { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.ctable { width: 100%; border-collapse: collapse; }
.ctable th, .ctable td { text-align: left; padding: 18px 8px; border-bottom: 3px solid var(--ink); font-size: 15px; line-height: 1.7; vertical-align: top; }
.ctable th { width: 7.5em; font-weight: 900; white-space: nowrap; }
.ctable td { font-weight: 700; }
.ctable tr:first-child th, .ctable tr:first-child td { border-top: 3px solid var(--ink); }
.contact { background: var(--ink); color: var(--white); }
.contact .ttl h2 { color: var(--white); }
.contact .stripe { background: repeating-linear-gradient(-55deg, var(--red) 0 11px, transparent 11px 21px); }
.contact .b-main { background: var(--red); color: var(--ink); }
.contact .b-sub { border-color: var(--white); }
.contact .b-sub:hover { background: var(--white); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.chips span { border: 2px solid var(--white); padding: 4px 14px; font-weight: 700; font-size: 13px; }
.contact .btnrow { justify-content: center; }
.tel { text-align: center; margin-top: 30px; font-weight: 700; font-size: 14px; line-height: 1.8; }
.tel b { font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); }

/* フッター: コンクリートの壁紙（2026-10-23 大石さん指定） */
.ft { background: linear-gradient(rgba(214, 214, 214, .62), rgba(214, 214, 214, .62)), url(concrete.webp) center top / 1600px auto; color: var(--ink); padding: 50px var(--pad) 40px; }
.ft .in-w { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; }
.ft nav { display: flex; flex-wrap: wrap; gap: 14px 28px; font-weight: 700; font-size: 14px; }
.ft p { width: 100%; font-size: 12px; line-height: 1.9; color: #2b2b2b; }

/* ---------- サービスページ ---------- */
.subnav { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0 var(--pad); margin-top: -6px; }
.subnav a { font-weight: 900; font-size: 13px; padding: 6px 16px; border: 2px solid var(--ink); transform: skewX(-20deg); }
.subnav a > span { display: inline-block; transform: skewX(20deg); }
.subnav a[aria-current] { background: var(--ink); color: var(--white); }
.phero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(40px, 6vw, 90px) var(--pad) clamp(80px, 9vw, 130px); position: relative; }
.phero .kick { font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(13px, 1vw, 16px); letter-spacing: .3em; }
.phero h1 { font-weight: 900; font-size: clamp(36px, 4.6vw, 76px); line-height: 1.22; margin-top: 16px; }
.phero .lead { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.95; margin-top: 26px; max-width: 34em; }
.phero .vis { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.phero .vis .ringbg { width: 82%; left: 9%; top: 9%; }
.phero .vis img { position: relative; width: 84%; max-height: 90%; object-fit: contain; }
.phero .vis .mk { position: absolute; width: 22%; right: 2%; bottom: 4%; background: var(--red); border: clamp(6px, .6vw, 10px) solid var(--ink); border-radius: 50%; padding: 4%; }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.pains li { list-style: none; background: var(--white); border-radius: 22px 22px 22px 4px; padding: 24px 24px; font-weight: 900; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.7; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--red); }
.outs { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); counter-reset: o; }
.outs li { border-top: 6px solid var(--ink); padding-top: 18px; }
.outs .num { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 54px; line-height: 1; -webkit-text-stroke: 2px var(--ink); color: transparent; }
.outs h3 { font-weight: 900; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.4; margin-top: 10px; }
.outs p { font-weight: 700; font-size: 15px; line-height: 1.9; margin-top: 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.box { background: var(--white); padding: clamp(24px, 3vw, 40px); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--red); }
.box h3 { font-weight: 900; font-size: clamp(20px, 1.8vw, 26px); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.box h3 .en { font-size: 12px; letter-spacing: .2em; color: var(--red); }
.box ul { list-style: none; display: grid; gap: 12px; }
.box li { font-weight: 700; font-size: 15px; line-height: 1.7; padding-left: 26px; position: relative; }
.box li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; background: var(--red); transform: skewX(-20deg); }
.box .note { margin-top: 18px; }
.pr { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; list-style: none; }
.pr li { border: 3px solid var(--ink); padding: 20px 18px; }
.pr b { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 30px; display: block; line-height: 1; }
.pr h3 { font-weight: 900; font-size: 18px; margin-top: 10px; }
.pr p { font-weight: 700; font-size: 14px; line-height: 1.8; margin-top: 8px; }
.others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.others a { background: var(--ink); color: var(--white); padding: 22px 22px; display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: center; transition: transform .2s; }
.others a:hover { transform: translateY(-4px); }
.others img { width: 70px; height: 70px; object-fit: contain; background: var(--red); border-radius: 50%; padding: 6px; }
.others b { font-weight: 900; font-size: 16px; display: block; }
.others small { font-weight: 700; font-size: 12px; color: #bdbdbd; }
.commit { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.commit li { background: var(--ink); color: var(--white); padding: 28px 24px; }
.commit b { font-family: "Poppins", sans-serif; color: var(--red); font-size: 30px; }
.commit h3 { font-weight: 900; font-size: 20px; line-height: 1.45; margin-top: 8px; }
.commit p { font-weight: 700; font-size: 14px; line-height: 1.85; margin-top: 10px; color: #dcdcdc; }
.painpick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.painpick a { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; background: var(--white); padding: 22px 24px; border-radius: 22px 22px 22px 4px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--red); font-weight: 900; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; transition: transform .2s; }
.painpick a:hover { transform: translate(-3px, -3px); }
.painpick a small { display: block; font-size: 13px; color: var(--red); margin-top: 6px; }
.painpick a i { font-style: normal; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 22px; }
.mission { text-align: center; }
.mission h2 { font-weight: 900; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.4; }
.mission p { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 2; max-width: 38em; margin: 28px auto 0; }

/* ---------- スマホ幅 ---------- */
@media (max-width: 900px) {
  .worry-pc { --lh: 88vh; top: calc(56vh - var(--lh) * .25); }
  .desk-bar { height: 36px; font-size: 11px; padding: 0 12px; }
  .db-c { display: none; }
  .win { top: 52%; height: 58vh; border-radius: 12px; box-shadow: 6px 6px 0 var(--red), 0 20px 40px -20px rgba(0, 0, 0, .35); }
  .wbody { grid-template-columns: 1fr; }
  .side, .web, .lphone, .post { display: none; }
  .split.r, .split.l, .split.v { grid-template-columns: 1fr; }
  .slide { align-self: start; }
  .preview { min-height: 120px; }
  .tl { font-size: 12.5px; white-space: normal; }
  .stamp { width: 64px; height: 64px; font-size: 11px; }
  .slide .stamp { left: 26%; bottom: 6%; }
  .toast, .wB .toast, .wC .toast { left: 12px; right: 12px; top: auto; bottom: 12px; }
  .aicur { width: 44px; height: 44px; border-width: 4px; }
  .desk-cap .capband span { font-size: 12.5px; }
  .steps4 { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .vbox { box-shadow: 6px 6px 0 var(--red); }
  .play { justify-content: flex-end; padding: 10px; }
  .play i { width: 46px; border-width: 4px; }
  .play i::after { font-size: 14px; }
  .play span { display: none; }
  br.sp { display: inline; }
  .nav a:not(.cta) { display: none; }
  .hd { padding: 20px var(--pad); }
  .brand { font-size: 22px; }
  .brand .ring { width: 42px; height: 42px; }
  .brand.logo img { height: 28px; }
  .brand.logo.plate { padding: 8px 12px; }
  .brand.logo.plate img { height: 22px; }
  .jobs, .cases, .pains, .outs, .commit, .others { grid-template-columns: 1fr; }
  .flow-wrap { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .svc:nth-child(even) .svc-ph { order: 0; }
  .svc-ph { max-width: 460px; width: 100%; margin: 0 auto; }
  .withyou { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .withyou .l { text-align: center; }
  .reasons, .subsidy, .company, .two, .phero { grid-template-columns: 1fr; }
  .house { margin: 0 auto; width: min(80%, 360px); }
  .house-wrap .thumb { left: 0; }
  .road { grid-template-columns: 1fr; gap: 20px; }
  .road p { margin-top: 10px; }
  .pr { grid-template-columns: 1fr 1fr; }
  .painpick { grid-template-columns: 1fr; }
  .phero .vis { max-width: 420px; width: 100%; margin: 0 auto; order: -1; }
  .grey-hands img { width: 48%; }
  .ctable th { width: 5.5em; }
  .ctable th, .ctable td { font-size: 14px; padding: 14px 4px; }
  .faq details p { padding-left: 22px; }
}
@media (max-width: 520px) {
  .pr { grid-template-columns: 1fr; }
  .b-main, .b-sub { width: 100%; justify-content: center; padding-left: 20px; padding-right: 20px; font-size: 14px; }
  .capband span { font-size: 14px; padding: 0 12px; }
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .worry { height: auto; }
  .desk { display: none; }
  .worry-ttl, .worry-pc, .worry.t .worry-pc { opacity: 1; transition: none; }
  .worry-ttl { transform: none; }
  .worry-pc { transform: translate(-50%, 0); }
  .chat-log .m { opacity: 1; max-height: none; padding-top: .5em; padding-bottom: .5em; transform: none; transition: none; }
  .chat-in .caret { animation: none; }
  html { scroll-behavior: auto; }
  [data-rv], .japan span, .stripe, .capband, .grid i, .house .mk, .sub-vis .hand { transition: none !important; }
  [data-rv], .japan span { opacity: 1; transform: none; }
  .stripe { transform: scaleX(1); }
  .capband { transform: skewX(-20deg); }
  .grid i { transform: scale(1); }
  .house .mk { transform: translate(-50%, -50%) scale(1); }
  .sub-vis .hand { opacity: 1; transform: none; }
}
#case .hc-results b { word-break: keep-all; font-size: clamp(22px, 1.9vw, 30px); }
/* 相談ボタン: 緊急ボタンの形（警告テープ柄の台座＋赤い押しボタン） */
#start .start-cta { display: flex; flex-direction: column; align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.panic { position: relative; display: grid; place-items: center; width: clamp(210px, 20vw, 280px); aspect-ratio: 1; }
.panic-base { position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(-45deg, var(--ink) 0 16px, #f2c200 16px 32px); box-shadow: 0 14px 0 rgba(0, 0, 0, .35); }
.panic-base::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--ink); }
.panic-btn { position: relative; z-index: 1; width: 70%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--white);
  background: radial-gradient(circle at 35% 30%, #ff6b6b 0, #e2232a 32%, #a3141a 78%, #7d0d12 100%); box-shadow: 0 10px 0 #5e080c, inset 0 -6px 12px rgba(0, 0, 0, .3), inset 0 6px 10px rgba(255, 255, 255, .25);
  transition: transform .12s, box-shadow .12s; animation: panicGlow 1.6s ease-in-out infinite; }
.panic-btn small { font-size: clamp(11px, 1vw, 14px); letter-spacing: .3em; opacity: .85; }
.panic-btn b { font-weight: 900; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.panic-btn em { font-style: normal; font-weight: 900; font-size: 12px; background: var(--white); color: var(--red); padding: 1px 10px; border-radius: 99px; margin-top: 4px; }
.panic:hover .panic-btn { transform: translateY(3px); box-shadow: 0 7px 0 #5e080c, inset 0 -6px 12px rgba(0, 0, 0, .3), inset 0 6px 10px rgba(255, 255, 255, .25); }
.panic:active .panic-btn { transform: translateY(9px); box-shadow: 0 1px 0 #5e080c, inset 0 -3px 8px rgba(0, 0, 0, .35); }
@keyframes panicGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); } 50% { filter: drop-shadow(0 0 18px rgba(255, 255, 255, .55)); } }
.panic-cap { margin-top: 26px; font-weight: 900; font-size: clamp(15px, 1.3vw, 18px); }
@media (prefers-reduced-motion: reduce) { .panic-btn { animation: none; } }

/* フッター: 3列のメニュー */
.ft-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 24px clamp(32px, 5vw, 80px); }
.ft-cols nav { display: flex; flex-direction: column; gap: 10px; font-weight: 700; font-size: 14px; }
.ft-cols nav b { font-weight: 900; font-size: 13px; letter-spacing: .1em; color: var(--red); margin-bottom: 4px; }
.ft-cols a:hover { text-decoration: underline; }
@media (max-width: 900px) { .ft-cols { grid-template-columns: 1fr 1fr; } }

/* 宣言の章: 課題先進国 → バツ → 解決先進国へ（札がバーン） → 地域・人・企業に ヒダネを */
.manifest { text-align: center; padding-top: clamp(90px, 12vw, 180px); padding-bottom: clamp(90px, 12vw, 180px); }
.mf-stage { position: relative; display: inline-block; }
.mf-old { position: relative; display: inline-block; font-weight: 900; font-size: clamp(54px, 10vw, 168px); line-height: 1.1; letter-spacing: .02em; color: var(--ink); transition: color .5s 1s; }
.mf-old i { position: absolute; left: -4%; right: -4%; top: 50%; height: clamp(10px, 1.4vw, 22px); margin-top: calc(clamp(10px, 1.4vw, 22px) / -2); background: var(--red); transform-origin: center; clip-path: inset(0 100% 0 0); transition: clip-path .45s cubic-bezier(.7,0,.3,1); }
.mf-old .x1 { rotate: -14deg; }
.mf-old .x2 { rotate: 14deg; clip-path: inset(0 0 0 100%); }
.manifest.in .mf-old { color: #9a9a9a; }
.manifest.in .mf-old .x1 { clip-path: inset(0); transition-delay: .35s; }
.manifest.in .mf-old .x2 { clip-path: inset(0); transition-delay: .75s; }
.mf-new { position: absolute; left: 50%; top: 50%; z-index: 2; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(3.2); }
.mf-new span { display: inline-block; background: var(--ink); color: var(--white); font-weight: 900; font-size: clamp(34px, 6vw, 100px); padding: .12em .5em; transform: skewX(-14deg); box-shadow: 12px 12px 0 var(--red); }
.manifest.in .mf-new { animation: slam .5s 1.3s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes slam { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(3.2); } 60% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(.94); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); } }
.manifest.in .mf-stage { animation: shake .4s 1.62s; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -10px 4px; } 40% { translate: 8px -4px; } 60% { translate: -6px 2px; } 80% { translate: 4px -2px; } }
.mf-lines { margin-top: clamp(60px, 8vw, 110px); display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 900; line-height: 1.25; }
.mf-lines span { font-size: clamp(28px, 4.2vw, 64px); opacity: 0; transform: translateY(40px); transition: opacity .6s, transform .8s cubic-bezier(.16,1,.3,1); }
.mf-lines .mf-big { font-size: clamp(48px, 8vw, 132px); color: var(--red); }
.manifest.in .mf-lines span:nth-child(1) { opacity: 1; transform: none; transition-delay: 2.2s; }
.manifest.in .mf-lines span:nth-child(2) { opacity: 1; transform: none; transition-delay: 2.7s; }
@media (prefers-reduced-motion: reduce) {
  .mf-old i { clip-path: inset(0) !important; transition: none; } .mf-old { color: #9a9a9a; }
  .mf-new { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg); animation: none !important; }
  .mf-lines span { opacity: 1; transform: none; transition: none; } .mf-stage { animation: none !important; }
}

/* 最初の画面: ヒダネの印が薄く出て消える → 見出しなどが順に出る（2026-10-23 大石さん指定） */
.hero .intro-mark { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; opacity: 0; animation: introMark 1.7s ease-in-out forwards; }
.hero .intro-mark img { width: min(36vw, 360px); }
@keyframes introMark { 0% { opacity: 0; transform: scale(.92); } 35% { opacity: .22; transform: scale(1); } 70% { opacity: .22; } 100% { opacity: 0; transform: scale(1.06); } }
.hero .who { opacity: 0; animation: up .6s 2.45s ease-out forwards; }
.hero .btns { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .hero .intro-mark { display: none; } .hero .who { opacity: 1; animation: none; } }
/* 下層ページの写真: 縦長でも枠に収める */
.phero .vis img { width: auto; height: auto; max-width: 84%; max-height: 80%; }

/* AI社員の組織図 */
.org { display: flex; flex-direction: column; align-items: center; }
.o-human { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--ink); color: var(--white); padding: 18px 40px; transform: skewX(-12deg); box-shadow: 8px 8px 0 var(--red); }
.o-human > * { transform: skewX(12deg); }
.o-human .en { color: var(--red); font-size: 12px; letter-spacing: .3em; }
.o-human b { font-weight: 900; font-size: clamp(20px, 2vw, 28px); }
.o-human small { font-weight: 700; font-size: 12px; color: #cfcfcf; }
.o-line { width: 4px; height: clamp(28px, 4vw, 48px); background: var(--ink); }
.om { position: relative; display: flex; flex-direction: column; background: var(--white); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--red); overflow: hidden; }
.om img { width: 100%; aspect-ratio: 420 / 483; object-fit: cover; object-position: top; display: block; border-bottom: 3px solid var(--ink); }
.om figcaption { padding: 10px 12px 12px; display: grid; gap: 2px; }
.om b { font-weight: 900; font-size: 16px; }
.om span { font-weight: 700; font-size: 12px; line-height: 1.5; color: #555; }
.om.big { width: clamp(180px, 18vw, 240px); box-shadow: 8px 8px 0 var(--red); }
.om.big b { font-size: 20px; }
.om.big figcaption { text-align: center; }
.o-teams { position: relative; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); padding-top: clamp(28px, 4vw, 48px); }
.o-teams::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 4px; background: var(--ink); }
.ot { position: relative; display: flex; flex-direction: column; gap: 12px; }
.ot::before { content: ""; position: absolute; top: calc(clamp(28px, 4vw, 48px) * -1); left: 50%; width: 4px; height: clamp(28px, 4vw, 48px); margin-left: -2px; background: var(--ink); }
.ot-h { text-align: center; background: var(--red); color: var(--white); font-weight: 900; font-size: clamp(15px, 1.3vw, 18px); padding: 10px 8px; display: grid; gap: 2px; transform: skewX(-10deg); }
.ot-h > * { transform: skewX(10deg); }
.ot-h .en { font-size: 11px; letter-spacing: .25em; color: var(--ink); }
.ot-m { display: grid; gap: 12px; }
@media (max-width: 900px) {
  .o-teams { grid-template-columns: 1fr; padding-top: 0; }
  .o-teams::before, .ot::before { display: none; }
  .ot-m { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .om figcaption { padding: 6px 6px 8px; } .om b { font-size: 12px; } .om span { font-size: 10px; }
  .ot { margin-bottom: 18px; }
}
/* 組織図: チームの社員は横長（顔写真＋名前・担当） */
.ot-m .om { flex-direction: row; align-items: stretch; }
.ot-m .om img { width: 38%; aspect-ratio: 1; object-position: 50% 8%; border-bottom: 0; border-right: 3px solid var(--ink); }
.ot-m .om figcaption { align-self: center; padding: 8px 10px; }
.om.big img { aspect-ratio: 1; object-position: 50% 8%; }
@media (max-width: 900px) {
  .ot-m { grid-template-columns: 1fr; }
  .ot-m .om img { width: 30%; }
  .om b { font-size: 15px; } .om span { font-size: 12px; }
}

/* ---------- AI社員: エージェント紹介（黒地＋イメージカラー。押すと任務の面） ---------- */
.agents-sec { background: var(--ink); color: var(--white); }
.agents-sec .ttl h2, .agents-sec .ttl p { color: var(--white); }
.agents-sec .stripe { background: repeating-linear-gradient(-55deg, var(--red) 0 11px, transparent 11px 21px); }
.agents { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.agent { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #15191c; border: 2px solid #2a2f33; }
.agent.lead { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
.ag-face { all: unset; position: absolute; inset: 0; cursor: pointer; display: block; }
.ag-face:focus-visible { outline: 4px solid var(--c); outline-offset: -4px; }
.ag-band { position: absolute; top: -20%; bottom: -20%; left: 46%; width: 34%; background: var(--c); transform: skewX(-24deg); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.ag-band::after { content: ""; position: absolute; top: 0; bottom: 0; left: 108%; width: 18%; background: var(--c); opacity: .45; }
.ag-word { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); font-size: clamp(80px, 13vw, 210px); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .22); white-space: nowrap; }
.agent.lead .ag-word { font-size: clamp(100px, 16vw, 260px); }
.ag-img { position: absolute; right: 6%; bottom: -2%; height: 108%; width: auto; max-width: 60%; object-fit: contain; object-position: bottom; filter: drop-shadow(-12px 10px 0 rgba(0, 0, 0, .45)); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.agent.lead .ag-img { right: 18%; height: 116%; }
.ag-face:hover .ag-img { transform: translateY(-8px) scale(1.03); }
.ag-face:hover .ag-band { transform: skewX(-24deg) translateX(-12px); }
.ag-txt { position: absolute; left: 6%; top: 10%; bottom: 10%; width: 46%; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.ag-code { font-size: 12px; letter-spacing: .25em; color: var(--c); }
.ag-dept { font-weight: 700; font-size: clamp(12px, 1vw, 14px); color: #bfc5ca; }
.ag-name { font-weight: 900; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.15; margin-top: 4px; text-shadow: 3px 3px 0 #000; }
.ag-role { align-self: flex-start; background: var(--c); color: var(--ink); font-weight: 900; font-size: clamp(12px, 1vw, 14px); padding: 4px 12px; transform: skewX(-14deg); margin-top: 6px; }
.ag-chev { color: var(--c); font-weight: 900; font-size: 22px; letter-spacing: -.1em; margin-top: auto; }
.ag-no { font-size: 13px; color: #9aa1a6; }
.ag-no b { font-size: 34px; color: var(--white); margin-right: 2px; }
.ag-tate { position: absolute; right: 2.4%; top: 6%; writing-mode: vertical-rl; border: 1.5px solid rgba(255, 255, 255, .5); padding: 8px 3px; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 10px; letter-spacing: .3em; color: rgba(255, 255, 255, .7); z-index: 2; }
.ag-hint { position: absolute; right: 3%; bottom: 5%; z-index: 3; background: var(--white); color: var(--ink); font-weight: 900; font-size: 12px; padding: 5px 12px; transform: skewX(-14deg); }
/* 任務の面（押すと右からスライド） */
.ag-back { position: absolute; inset: 0; z-index: 5; background: var(--c); color: var(--ink); padding: clamp(18px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; transform: translateX(101%); transition: transform .5s cubic-bezier(.16,1,.3,1); overflow: auto; }
.agent.open .ag-back { transform: none; }
.ag-back .ag-code { color: var(--ink); opacity: .7; }
.ag-desc { font-weight: 900; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.75; }
.ag-motto { font-weight: 900; font-size: clamp(14px, 1.2vw, 17px); background: var(--ink); color: var(--white); padding: 8px 14px; align-self: flex-start; transform: skewX(-10deg); }
.ag-sk { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ag-sk li { border: 2px solid var(--ink); font-weight: 900; font-size: 13px; padding: 3px 10px; }
.ag-close { all: unset; cursor: pointer; align-self: flex-end; margin-top: auto; background: var(--ink); color: var(--white); font-weight: 900; font-size: 13px; padding: 6px 14px; }
@media (max-width: 900px) {
  .agents { grid-template-columns: 1fr; }
  .agent, .agent.lead { aspect-ratio: 4 / 3; }
  .agent.lead .ag-img { right: 4%; height: 108%; }
  .ag-txt { width: 54%; }
  .ag-word, .agent.lead .ag-word { font-size: 110px; }
}
@media (prefers-reduced-motion: reduce) { .ag-back, .ag-img, .ag-band { transition: none; } }
/* エージェント: 部署名が長いと名前と重なるので、説明の札は名前の下に収める */
.ag-role { max-width: 100%; white-space: normal; line-height: 1.4; }
.ag-txt { z-index: 4; }
.ag-txt .ag-name, .ag-txt .ag-role { position: relative; }

/* ---------- AIツール（AI社員のペット＝派遣エージェント）: 赤×白黒の中で、立体のキャラが「別の世界から来た」ように目立つ ---------- */
.pethero { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(40px, 6vw, 90px) var(--pad) clamp(70px, 8vw, 120px); background: var(--red); overflow: hidden; }
.pethero .kick { color: var(--ink); }
.pethero h1 { font-weight: 900; font-size: clamp(34px, 4.4vw, 70px); line-height: 1.22; margin-top: 14px; }
.pethero .lead { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.95; margin-top: 24px; max-width: 32em; }
.ph-vis { position: relative; display: grid; place-items: center; }
.ph-ring { position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 55%, rgba(255, 255, 255, .0) 56%), repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .35) 0 6deg, transparent 6deg 12deg); }
.ph-vis img { position: relative; width: 100%; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .35)); animation: petBob 4s ease-in-out infinite; }
@keyframes petBob { 50% { translate: 0 -10px; } }
.ph-stamp { position: absolute; right: 2%; top: 4%; border: 4px solid var(--ink); color: var(--ink); font-family: "Poppins", sans-serif; font-weight: 800; font-size: clamp(12px, 1.1vw, 16px); line-height: 1.1; letter-spacing: .1em; padding: 8px 12px; transform: rotate(10deg); background: rgba(255, 255, 255, .8); }
.pets-sec { background: var(--ink); color: var(--white); }
.pets-sec .ttl h2, .pets-sec .ttl p, .pets-sec .note { color: var(--white); }
.pets-sec .stripe { background: repeating-linear-gradient(-55deg, var(--red) 0 11px, transparent 11px 21px); }
.pets { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.pet { position: relative; display: flex; flex-direction: column; background: var(--white); color: var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 4px var(--c), 10px 10px 0 4px var(--red); }
.pet-id { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--c); color: var(--white); }
.pet-id .hole { width: 22px; height: 10px; border-radius: 99px; background: var(--ink); opacity: .55; }
.pet-id .en { font-size: 11px; letter-spacing: .2em; }
.pet-id .pet-en { margin-left: auto; font-size: 14px; letter-spacing: .1em; }
.pet-pic { position: relative; height: 230px; display: grid; place-items: end center; background: radial-gradient(circle at 50% 60%, #fff 0 40%, #f3f1ee 70%); overflow: hidden; }
.pet-band { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, transparent 0 18px, color-mix(in srgb, var(--c) 18%, transparent) 18px 36px); }
.pet-pic img { position: relative; height: 92%; width: auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .18)); transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.pet:hover .pet-pic img { transform: translateY(-8px) rotate(-3deg); }
.pet-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pet-who { font-weight: 900; font-size: 12px; color: var(--c); filter: brightness(.8); }
.pet h3 { font-weight: 900; font-size: 26px; line-height: 1.2; display: grid; gap: 4px; }
.pet h3 small { font-size: 14px; color: #555; }
.pet ul { list-style: none; display: grid; gap: 6px; }
.pet li { font-weight: 700; font-size: 14px; line-height: 1.6; padding-left: 20px; position: relative; }
.pet li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.pet-where { font-weight: 700; font-size: 13px; background: #f3f1ee; padding: 8px 12px; border-radius: 8px; display: flex; gap: 10px; }
.pet-where b { color: var(--red); white-space: nowrap; }
.pet-more { margin-top: auto; align-self: flex-start; font-weight: 900; font-size: 12px; color: #888; border: 2px dashed #ccc; padding: 4px 10px; border-radius: 99px; }
@media (max-width: 900px) { .pethero { grid-template-columns: 1fr; } .ph-vis { order: -1; max-width: 460px; margin: 0 auto; } .pets { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ph-vis img { animation: none; } }
/* ペットのカード: 全身が見えるように収める */
.pet-pic { height: 260px; place-items: center; padding: 14px 0 10px; }
.pet-pic img { height: 100%; max-width: 86%; object-fit: contain; }
.pethero .kick { font-family: "Poppins", sans-serif; font-weight: 800; letter-spacing: .3em; }
.pet-pic { display: block; }
.pet-pic img { position: absolute; left: 50%; top: 12px; bottom: 8px; height: calc(100% - 20px); width: auto; max-width: 86%; transform: translateX(-50%); }
.pet:hover .pet-pic img { transform: translateX(-50%) translateY(-8px) rotate(-3deg); }
.redsec .two { align-items: start; }
.pet-cta { margin-top: auto; align-self: stretch; justify-content: center; font-size: 15px; padding: 14px 20px; background: var(--ink); }
.pet-cta:hover { background: var(--red); }
.pets-sec .mission .b-main { background: var(--red); color: var(--white); }
.pets-sec .mission h2 { color: var(--white); }
/* 1週間 無料トライアルの申込 */
.trial { background: var(--red); }
.tr-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.tr-side .kick { letter-spacing: .3em; font-size: 14px; }
.tr-side h1 { font-weight: 900; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.25; margin-top: 12px; }
.tr-side .lead { font-weight: 700; font-size: 16px; line-height: 1.9; margin-top: 20px; }
.tr-pet { margin-top: 26px; background: var(--white); border-radius: 18px; padding: 18px; text-align: center; box-shadow: 10px 10px 0 var(--ink); }
.tr-pet img { height: 240px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.tr-pet p { font-weight: 900; font-size: 16px; margin-top: 8px; }
.tr-form { background: var(--white); border: 3px solid var(--ink); padding: clamp(20px, 3vw, 40px); display: grid; gap: 16px; box-shadow: 12px 12px 0 var(--ink); }
.tr-form label { display: grid; gap: 6px; font-weight: 900; font-size: 15px; }
.tr-form .req { display: inline-block; margin-left: 8px; background: var(--red); color: var(--white); font-size: 11px; padding: 1px 8px; vertical-align: middle; }
.tr-form input, .tr-form select, .tr-form textarea { font: inherit; font-weight: 700; font-size: 16px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 0; background: #faf8f5; color: var(--ink); width: 100%; }
.tr-form input:focus, .tr-form select:focus, .tr-form textarea:focus { outline: 3px solid var(--red); outline-offset: 0; }
.tr-submit { border: 0; cursor: pointer; justify-content: center; background: var(--red); color: var(--white); font-family: inherit; margin-top: 6px; }
.tr-msg { font-weight: 900; font-size: 14px; color: var(--red); min-height: 1.4em; }
@media (max-width: 900px) { .tr-grid { grid-template-columns: 1fr; } .tr-pet img { height: 180px; } }
.tr-form label { grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.tr-form label > input, .tr-form label > select, .tr-form label > textarea { grid-column: 1 / -1; }
.tr-form .req { justify-self: start; margin-left: 0; }

/* ---- AI社員: 最初の画面＝スーツの12人が横一列 ---- */
.teamhero { background: var(--red); padding: clamp(40px, 5vw, 80px) 0 0; overflow: hidden; }
.th-tx { padding: 0 var(--pad); max-width: 1240px; margin: 0 auto; text-align: center; }
.th-tx .kick { letter-spacing: .3em; font-size: 14px; }
.th-tx h1 { font-weight: 900; font-size: clamp(34px, 5vw, 80px); line-height: 1.2; margin-top: 12px; }
.th-tx .stripe { margin-left: auto; margin-right: auto; }
.th-tx .lead { font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.9; max-width: 40em; margin: 20px auto 0; }
.th-tx .btnrow { justify-content: center; }
.th-line { position: relative; margin-top: clamp(28px, 4vw, 56px); }
.th-line img { position: relative; z-index: 2; display: block; width: min(100%, 1800px); margin: 0 auto; }
.th-band { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: var(--ink); z-index: 1; }

/* ---- エージェント: 表の面の文字を大きく ---- */
.ag-name { font-size: clamp(34px, 4.2vw, 64px); }
.agent:not(.lead) .ag-name { font-size: clamp(30px, 3.4vw, 52px); }
.ag-role { font-size: clamp(14px, 1.3vw, 20px); padding: 6px 16px; }
.ag-dept { font-size: clamp(14px, 1.2vw, 18px); }
.ag-code { font-size: 14px; }
.ag-no b { font-size: 46px; }
/* ---- エージェント: 任務の面＝図 ---- */
.ag-back { gap: 14px; }
.ag-bhead { display: flex; align-items: center; gap: 14px; }
.ag-bname { font-weight: 900; font-size: clamp(20px, 2vw, 30px); }
.ag-bhead .ag-close { margin: 0 0 0 auto; }
.ag-desc { font-size: clamp(15px, 1.3vw, 20px); }
.ag-flow { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: f; }
.ag-flow li { position: relative; background: rgba(255, 255, 255, .78); border: 2px solid var(--ink); padding: 12px 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ag-flow li:not(:last-child)::after { content: ""; position: absolute; right: -19px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-left: 12px solid var(--ink); }
.ag-flow .en { font-size: 10px; letter-spacing: .15em; opacity: .7; }
.ag-flow b { font-weight: 900; font-size: clamp(13px, 1.1vw, 16px); }
.ag-flow p { font-weight: 700; font-size: clamp(12px, .95vw, 14px); line-height: 1.6; }
.ag-flow .human { background: var(--ink); color: var(--white); }
.ag-bfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.agent.lead .ag-flow p { font-size: clamp(13px, 1.05vw, 15px); }
.agent:not(.lead) { aspect-ratio: auto; min-height: 380px; }
.agent:not(.lead) .ag-flow { grid-template-columns: 1fr 1fr; }
.agent:not(.lead) .ag-flow li:nth-child(2)::after { display: none; }
@media (max-width: 900px) {
  .agent, .agent.lead { aspect-ratio: auto; min-height: 340px; }
  .ag-flow, .agent:not(.lead) .ag-flow { grid-template-columns: 1fr; gap: 14px; }
  .ag-flow li:not(:last-child)::after { right: 50%; top: auto; bottom: -16px; margin: 0 -9px 0 0; border: 9px solid transparent; border-top: 10px solid var(--ink); }
  .ag-name, .agent:not(.lead) .ag-name { font-size: 30px; }
  .agent.open { min-height: 0; }
  .agent.open .ag-face { position: relative; height: 340px; display: none; }
  .agent.open .ag-back { position: relative; transform: none; }
}

/* ---- AIツール: 最初の画面の6匹を横一列・大きく ---- */
.pethero { grid-template-columns: 1fr; text-align: center; padding-bottom: 0; }
.pethero .ph-tx { max-width: 900px; margin: 0 auto; }
.pethero .stripe { margin-left: auto; margin-right: auto; }
.pethero .btnrow { justify-content: center; }
.ph-row { position: relative; margin: 0 calc(var(--pad) * -1); }
.ph-row img { position: relative; z-index: 2; display: block; width: min(100%, 1600px); margin: 0 auto; filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .3)); }
.ph-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: var(--ink); z-index: 1; }
.ph-row .ph-stamp { z-index: 3; right: 4%; top: -6%; }
/* ---- AIツール: 詳細のパネル（押すと下から出る） ---- */
.pet-detail { position: absolute; inset: 0; z-index: 4; background: var(--white); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; transform: translateY(101%); transition: transform .45s cubic-bezier(.16,1,.3,1); overflow: auto; border-top: 10px solid var(--c); }
.pet.open .pet-detail { transform: none; }
.pd-head { display: flex; align-items: center; }
.pd-head .en { font-size: 11px; letter-spacing: .15em; color: #777; }
.pd-close { all: unset; cursor: pointer; margin-left: auto; background: var(--ink); color: var(--white); font-weight: 900; font-size: 12px; padding: 5px 12px; }
.pet-detail h4 { font-weight: 900; font-size: 24px; display: grid; gap: 2px; }
.pet-detail h4 small { font-size: 13px; color: #555; }
.pet-detail ul { list-style: none; display: grid; gap: 8px; }
.pet-detail li { font-weight: 700; font-size: 13.5px; line-height: 1.6; padding-left: 20px; position: relative; }
.pet-detail li::before { content: "✓"; position: absolute; left: 0; color: var(--c); font-weight: 900; filter: brightness(.8); }
.pd-note { font-size: 12px; color: #666; font-weight: 700; }
.pet-detail .b-main { margin-top: auto; justify-content: center; background: var(--red); color: var(--white); }
.pet-cta { border: 0; cursor: pointer; font-family: inherit; color: var(--white); }
/* 任務の面を開いたら、カードの高さを中身に合わせる（全部見えるように） */
.agent.open { aspect-ratio: auto !important; min-height: 0 !important; }
.agent.open .ag-face { display: none; }
.agent.open .ag-back { position: relative; inset: auto; transform: none; overflow: visible; }
/* AIツールの最初の画面: 6匹の全身が最初の画面に入るように */
.pethero { padding-top: clamp(28px, 4vw, 56px); }
.pethero h1 { font-size: clamp(30px, 3.6vw, 58px); }
.pethero .lead { margin-top: 14px; }
.pethero .btnrow { margin-top: 20px; }
.ph-row { margin-top: 18px; }
.ph-row img { width: auto; max-width: 100%; height: min(44vh, 600px); object-fit: contain; }
.ph-row .ph-stamp { top: auto; bottom: 30%; right: 3%; }
.ph-row img { height: min(38vh, 560px); }
.pethero .lead { font-size: clamp(14px, 1.05vw, 16px); }
.ph-row .ph-stamp { bottom: auto; top: -80px; right: 6%; }
@media (max-width: 900px) { .ph-row img { height: auto; width: 100%; } .ph-row .ph-stamp { top: -50px; } }
@media (max-width: 900px) { .ph-row .ph-stamp { display: none; } }

/* ---------- 無料特典（全ページ共通の章・入口の帯・上のメニュー） ---------- */
.anchor { position: relative; top: -20px; display: block; }
.contact .offer { position: relative; }
.perk-tag { display: inline-block; align-self: flex-start; background: var(--ink); color: var(--white); font-weight: 900; font-size: 12px; padding: 3px 12px; transform: skewX(-12deg); }
.perks-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1000px; margin: 22px auto 0; }
.perk-s { background: #1d2226; border: 2px solid #3a4046; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.perk-s .ofn { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .25em; color: var(--red); }
.perk-s .perk-tag { background: #3a4046; }
.perk-s h3 { font-weight: 900; font-size: 18px; line-height: 1.4; }
.perk-s p { font-weight: 700; font-size: 13px; line-height: 1.75; color: #cfcfcf; flex: 1; }
.perk-s .b-main { align-self: stretch; justify-content: center; font-size: 14px; padding: 11px 16px; background: var(--white); color: var(--ink); }
.perk-more { text-align: center; font-weight: 700; font-size: 14px; margin-top: 22px; color: #cfcfcf; }
.perk-more a { color: var(--white); text-decoration: underline; }
.nav-perk { position: relative; color: var(--red) !important; font-weight: 900; }
.nav-perk::before { content: "FREE"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: "Poppins", sans-serif; font-size: 9px; letter-spacing: .15em; color: var(--ink); }
.perkstrip { background: var(--ink); color: var(--white); border-top: 4px solid var(--red); }
.ps-in { max-width: 1400px; margin: 0 auto; padding: 16px var(--pad); display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); }
.ps-h { flex: none; display: grid; font-weight: 900; font-size: 18px; line-height: 1.2; }
.ps-h .en { font-size: 10px; letter-spacing: .25em; color: var(--red); }
.ps-items { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ps-items a { display: grid; gap: 2px; background: #1d2226; border-left: 4px solid var(--red); padding: 8px 12px; transition: background .2s; }
.ps-items a:hover { background: #2a3035; }
.ps-items b { font-weight: 900; font-size: 14px; }
.ps-items small { font-weight: 700; font-size: 11px; color: #aeb4b9; }
.ps-all { flex: none; font-weight: 900; font-size: 13px; border: 2px solid var(--white); padding: 8px 14px; transform: skewX(-12deg); }
@media (max-width: 900px) {
  .perks-s { grid-template-columns: 1fr; }
  .ps-in { flex-wrap: wrap; }
  .ps-items { grid-template-columns: 1fr 1fr; width: 100%; }
  .ps-all { display: none; }
  .nav .nav-perk { display: inline-block !important; font-size: 13px; }
  .nav-perk::before { display: none; }
}

/* ---------- 押したい3つ（大きく・3列）と、毎月20社限定の表示 ---------- */
.offers.three { grid-template-columns: repeat(3, 1fr); max-width: 1240px; }
.offers.three .offer { padding: clamp(22px, 2.4vw, 34px); border-top: 8px solid var(--red); }
.offers.three .offer h3 { font-size: clamp(22px, 2vw, 30px); }
.offer .perk-tag { font-size: clamp(15px, 1.3vw, 19px); padding: 6px 16px; background: var(--red); }
.perk-hot { position: absolute; top: -18px; right: 14px; background: var(--ink); color: var(--white); font-weight: 900; font-size: 13px; letter-spacing: .1em; padding: 6px 14px; transform: rotate(4deg); box-shadow: 4px 4px 0 var(--red); }
.perk-limit { max-width: 1240px; margin: 0 auto 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; background: var(--white); color: var(--ink); padding: 14px 20px; transform: skewX(-6deg); box-shadow: 8px 8px 0 var(--red); }
.perk-limit > * { transform: skewX(6deg); }
.perk-limit b { font-weight: 900; font-size: clamp(18px, 1.9vw, 26px); }
.perk-limit em { font-style: normal; color: var(--red); font-size: 1.25em; }
.pl-left { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: clamp(14px, 1.2vw, 17px); }
.pl-left .pl-num { font-family: "Poppins", sans-serif; font-weight: 800; color: var(--red); font-size: 1.9em; line-height: 1; }
.pl-bar { display: inline-flex; gap: 3px; }
.pl-bar i { width: 7px; height: 18px; background: var(--red); }
.pl-bar i.off { background: #d4d4d4; }
.ps-limit { flex: none; display: grid; gap: 2px; margin: 0; padding: 0; background: none; box-shadow: none; transform: none; color: var(--white); text-align: center; }
.ps-limit > * { transform: none; }
.ps-limit b { font-size: 14px; color: var(--red); }
.ps-limit .pl-left { font-size: 12px; gap: 6px; justify-content: center; }
.ps-limit .pl-bar { display: none; }
@media (max-width: 1100px) { .offers.three { grid-template-columns: 1fr; max-width: 640px; } }
@media (max-width: 900px) { .ps-limit { width: 100%; } .perk-limit { transform: none; } .perk-limit > * { transform: none; } }
.offers.three + .perks-s { margin-top: 40px; }
.offers.three .b-main span { white-space: nowrap; }
.pl-left > span { white-space: nowrap; }
@media (max-width: 600px) { .perk-limit { padding: 14px 12px; } .pl-left { flex-wrap: wrap; justify-content: center; gap: 6px 14px; } .pl-bar { order: 3; width: 100%; justify-content: center; } .pl-bar i { width: 6px; height: 14px; } }
@media (max-width: 900px) { .ps-items { flex: 0 0 100%; } .ps-h { grid-auto-flow: column; gap: 10px; align-items: baseline; } }
/* 上のメニューの「無料特典」：赤地で見えるように黒文字＋白い札（2026-10-23 大石さん「見えない」） */
.nav .nav-perk { color: var(--ink) !important; background: var(--white); padding: 4px 12px; }
.nav .nav-perk::before { top: -18px; }
.nav .nav-perk::after { display: none; }
.nav .nav-perk { border: 2px solid var(--ink); }

/* ---------- フォーム共通（相談・資料・トライアル・診断レポート） ---------- */
.lf-h { font-weight: 900; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.3; margin-top: 12px; }
.tr-side .lead a { color: var(--white); text-decoration: underline; }
.lf-alt { margin-top: 26px; background: var(--ink); color: var(--white); padding: 18px 20px; display: grid; gap: 8px; }
.lf-alt b { font-weight: 900; font-size: 16px; }
.lf-alt p { font-weight: 700; font-size: 14px; line-height: 1.8; }
.lf-alt a:not(.b-main) { color: var(--white); text-decoration: underline; }
.lf-alt .b-main { justify-self: start; background: var(--white); color: var(--ink); font-size: 14px; }
.lf-context { background: var(--ink); color: var(--white); font-weight: 900; font-size: 15px; padding: 10px 14px; }
.lf-context b { color: #ff6b6b; }
.lf-picks { display: grid; gap: 10px; }
.tr-form label.lf-pick { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--ink); padding: 14px; cursor: pointer; background: #faf8f5; }
.lf-pick input { width: auto !important; margin-top: 4px; accent-color: var(--red); }
.lf-pick span { display: grid; gap: 4px; }
.lf-pick small { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .15em; color: var(--red); }
.lf-pick b { font-weight: 900; font-size: 17px; }
.lf-pick em { font-style: normal; font-weight: 700; font-size: 13px; line-height: 1.7; color: #444; }
.lf-pick:has(input:checked) { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); background: var(--white); }
.lf-msg a { color: var(--ink); text-decoration: underline; margin-left: 6px; }
.tr-form .note a { text-decoration: underline; }
.lf-preview { border: 2px dashed #999; padding: 10px 12px; font-size: 13px; }
.lf-preview summary { font-weight: 900; cursor: pointer; }
.lf-preview pre { white-space: pre-wrap; word-break: break-all; font-size: 12px; margin-top: 8px; max-height: 260px; overflow: auto; }

/* ---------- AI活用度診断（ページの中で動く10問） ---------- */
.dg-sec .in-w { max-width: 860px; }
.dg, .dg-res { background: var(--white); color: var(--ink); border: 3px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); padding: clamp(22px, 3.4vw, 48px); }
.dg-top { display: flex; align-items: center; gap: 14px; font-weight: 900; }
.dg-top .en { font-size: 11px; letter-spacing: .25em; color: var(--red); }
.dg-bar { flex: 1; height: 8px; background: #e4e4e4; position: relative; }
.dg-bar i { position: absolute; inset: 0 auto 0 0; background: var(--red); transition: width .3s; }
.dg-cat { margin-top: 22px; font-size: 11px; letter-spacing: .25em; color: #777; }
.dg-q { font-weight: 900; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; margin-top: 6px; }
.dg-a { display: grid; gap: 10px; margin-top: 20px; }
.dg-a button { display: flex; gap: 14px; align-items: center; text-align: left; font: inherit; font-weight: 700; font-size: 16px; padding: 14px 16px; border: 2px solid var(--ink); background: #faf8f5; color: var(--ink); cursor: pointer; transition: background .15s, transform .15s; }
.dg-a button .en { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--ink); color: var(--white); font-weight: 800; }
.dg-a button:hover, .dg-a button.on { background: var(--white); border-color: var(--red); transform: translateX(4px); }
.dg-a button:hover .en, .dg-a button.on .en { background: var(--red); }
.dg-back, .dg-again { margin-top: 18px; font: inherit; font-weight: 900; font-size: 14px; background: none; border: 0; color: var(--ink); text-decoration: underline; cursor: pointer; }
.dg-badge { font-size: 12px; letter-spacing: .3em; color: var(--red); }
.dg-lv { font-weight: 900; font-size: clamp(28px, 3.4vw, 48px); margin-top: 6px; }
.dg-score { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 18px; margin-top: 4px; }
.dg-head { font-weight: 900; font-size: 20px; line-height: 1.6; margin-top: 18px; }
.dg-desc { font-weight: 700; font-size: 15px; line-height: 1.9; margin-top: 10px; }
.dg-course { margin-top: 20px; background: var(--ink); color: var(--white); padding: 14px 18px; display: grid; gap: 4px; }
.dg-course small { font-weight: 700; font-size: 12px; color: #aaa; }
.dg-course b { font-weight: 900; font-size: 19px; }
.dg-next { margin: 18px 0 0 1.2em; display: grid; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.7; list-style: decimal; }
.dg-res .btnrow { margin-top: 26px; }
.dg-report { margin-top: 34px; border-top: 3px solid var(--ink); padding-top: 22px; }
.dg-report h3 { font-weight: 900; font-size: 18px; margin-bottom: 14px; }
.dg-report .tr-form { box-shadow: none; }

/* ---------- 記事ページ共通（診断の結果・マンガ・メソッド・ジャーナル・ニュース） ---------- */
.art-hero { background: var(--red); padding: clamp(28px, 4vw, 56px) var(--pad) clamp(48px, 6vw, 90px); }
.art-hero .in-w { max-width: 980px; }
.art-hero .kick { font-weight: 800; font-size: clamp(12px, .95vw, 15px); letter-spacing: .3em; margin-top: 18px; }
.art-hero h1 { font-weight: 900; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.3; margin-top: 12px; }
.art-hero .lead { font-weight: 700; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.95; margin-top: 22px; max-width: 46em; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 900; font-size: 14px; margin-top: 18px; }
.art-meta span { background: var(--ink); color: var(--white); padding: 3px 10px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; font-weight: 700; font-size: 12px; }
.crumbs li + li::before { content: "／"; margin: 0 6px; opacity: .6; }
.crumbs a { text-decoration: underline; }
.checks { display: grid; gap: 10px; max-width: 46em; }
.checks li { position: relative; padding: 12px 14px 12px 46px; background: var(--white); border: 2px solid var(--ink); font-weight: 700; font-size: 15px; line-height: 1.7; }
.checks li::before { content: "✓"; position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--red); color: var(--white); font-weight: 900; font-size: 14px; }
.lv-nav { margin-bottom: 36px; }
.lv-nav a { font-family: "Poppins", sans-serif; }
.days3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) { .days3 { grid-template-columns: 1fr; } }

/* ---------- マンガ（1ページずつ。JSが無い時は縦に全部並ぶ） ---------- */
.mg-sec { background: var(--ink); color: var(--white); }
.mg { max-width: 640px; margin: 0 auto; }
.mg-pages { display: grid; gap: 12px; }
.mg-pages img { width: 100%; height: auto; background: #222; }
.mg.js .mg-pages { display: block; position: relative; cursor: pointer; user-select: none; }
.mg.js .mg-pages img { display: none; }
.mg.js .mg-pages img.on { display: block; }
.mg-ctl { display: none; }
.mg.js .mg-ctl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; }
.mg-ctl button { font: inherit; font-weight: 900; font-size: 22px; width: 56px; height: 48px; background: var(--red); color: var(--white); border: 0; cursor: pointer; transform: skewX(-12deg); }
.mg-ctl button:disabled { opacity: .3; cursor: default; }
.mg-c { font-family: "Poppins", sans-serif; font-weight: 800; font-size: 18px; min-width: 5em; text-align: center; }
.mg-end { background: var(--red); padding: clamp(24px, 4vw, 48px); text-align: center; display: grid; gap: 14px; justify-items: center; }
.mg-end .en { letter-spacing: .3em; font-size: 13px; }
.mg-end h2 { font-weight: 900; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; }
.mg-end p { font-weight: 700; line-height: 1.8; }
.mg-end .btnrow { justify-content: center; }
.mg-again { font: inherit; font-weight: 900; background: none; border: 0; color: var(--white); text-decoration: underline; cursor: pointer; }
.mg-pdf { text-align: center; margin-top: 18px; font-weight: 700; }
.mg-pdf a { text-decoration: underline; }
.mg-eps { justify-content: center; margin-top: 28px; }
.mg-sec .b-sub { color: var(--white); border-color: var(--white); }
.mg-pages[hidden] { display: none !important; }

/* ---------- 記事の本文 ---------- */
.prose { max-width: 780px; }
.prose h2 { font-weight: 900; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.45; margin: 56px 0 18px; padding-left: 16px; border-left: 8px solid var(--red); }
.prose h3 { font-weight: 900; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; margin: 36px 0 12px; }
.prose p { font-weight: 500; font-size: 16px; line-height: 2; margin-top: 14px; }
.prose ul, .prose ol { margin: 16px 0 0 1.4em; display: grid; gap: 8px; font-size: 16px; line-height: 1.85; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li::marker { color: var(--red); }
.prose strong { font-weight: 900; background: linear-gradient(transparent 62%, rgba(196, 30, 36, .22) 62%); }
.prose a { color: var(--red); text-decoration: underline; font-weight: 700; }
.prose figure { margin: 28px 0; } .prose figure img { width: 100%; height: auto; }
.prose figcaption { font-size: 13px; color: #666; margin-top: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 2px solid var(--ink); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: var(--ink); color: var(--white); font-weight: 900; }
.prose blockquote { border-left: 6px solid var(--ink); padding: 6px 0 6px 16px; margin-top: 18px; font-weight: 700; }
.tldr { background: var(--ink); color: var(--white); padding: 22px 24px; box-shadow: 8px 8px 0 var(--red); }
.tldr b { font-weight: 900; font-size: 15px; letter-spacing: .1em; color: #ff8a8a; }
.tldr ul { margin-top: 10px; }
.callout { margin-top: 22px; border: 3px solid var(--ink); background: #fff7f7; padding: 16px 18px; }
.callout b { font-weight: 900; color: var(--red); }
.callout p { margin-top: 6px; font-weight: 700; }
.rel { display: grid; gap: 10px; max-width: 780px; }
.rel a { display: block; font-weight: 900; font-size: 16px; padding: 14px 16px; background: var(--white); border: 2px solid var(--ink); }
.rel a:hover { border-color: var(--red); color: var(--red); }
.art-thumb { margin: 0 0 28px; } .art-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.author { display: flex; gap: 16px; align-items: center; margin-top: 48px; padding: 18px; background: var(--ink); color: var(--white); }
.author img { width: 72px; height: 72px; object-fit: cover; object-position: top; background: var(--red); flex: none; }
.author p { margin: 0; display: grid; gap: 2px; font-size: 13px; line-height: 1.6; }
.author small { font-size: 11px; color: #aaa; } .author b { font-size: 18px; font-weight: 900; }
.nw-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.nw-filter button { font: inherit; font-weight: 900; font-size: 14px; padding: 7px 16px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; transform: skewX(-12deg); }
.nw-filter button.on { background: var(--ink); color: var(--white); }
.nw-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nw { display: grid; gap: 8px; align-content: start; background: var(--white); border: 2px solid var(--ink); padding: 18px; transition: transform .2s, box-shadow .2s; }
.nw:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--red); }
.nw[hidden] { display: none; }
.nw-meta { display: flex; gap: 10px; align-items: center; font-family: "Poppins", sans-serif; font-weight: 800; font-size: 12px; }
.nw-meta b { font-family: "Noto Sans JP", sans-serif; font-weight: 900; background: var(--red); color: var(--white); padding: 2px 8px; }
.nw h3 { font-weight: 900; font-size: 17px; line-height: 1.5; }
.nw p { font-weight: 500; font-size: 13px; line-height: 1.75; color: #444; }
@media (max-width: 1000px) { .nw-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .nw-list { grid-template-columns: 1fr; } }
.mg-end[hidden] { display: none; }
.mg-sec .b-main { background: var(--red); color: var(--white); }

/* ---------- ボタンの上からペットがのぞく（AI社員ページ→AIツール） ---------- */
.peek { position: relative; display: inline-flex; margin-top: 40px; }
.btnrow:has(.peek) { align-items: flex-end; }
.peek-pet { position: absolute; bottom: 100%; right: 22%; width: 49px; height: 56px; overflow: hidden; pointer-events: none; }
.peek-pet img { position: absolute; left: 0; top: 12px; width: 49px; height: 67px; transform: translateY(100%); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .25s; }
.btnrow.in .peek-pet img { transform: translateY(0); }
.peek:hover .peek-pet img { transform: translateY(-8px); transition-delay: 0s; transition-duration: .3s; }
@media (prefers-reduced-motion: reduce) { .peek-pet img, .btnrow.in .peek-pet img, .peek:hover .peek-pet img { transform: none; transition: none; } }
/* 前足まで見えるように少し大きく（見える高さ＝ボタンの約8割） */
.peek { margin-top: 46px; }
.peek-pet { width: 52px; height: 60px; }
.peek-pet img { width: 52px; height: 71px; }

/* ---------- 動画（短いものは自動再生・長いものは再生ボタン）と下の説明 ---------- */
.vfig { margin: clamp(28px, 4vw, 48px) auto 0; max-width: 1080px; }
.vsec { padding-top: clamp(20px, 3vw, 40px) !important; padding-bottom: clamp(20px, 3vw, 40px) !important; }
.vsec .vfig { margin-top: 0; }
.vbox.auto:not(.manual) .play { display: none; }
.vcap { margin-top: 14px; font-weight: 700; font-size: 14px; line-height: 1.8; color: inherit; opacity: .85; }
.redsec .vfig { margin-top: 40px; }
.redsec .vbox { box-shadow: 12px 12px 0 var(--ink); }
@media (max-width: 900px) { .redsec .vbox { box-shadow: 6px 6px 0 var(--ink); } }
/* 6匹ぜんぶがボタンの上からのぞく（2026-10-23 大石さん「全員六体ここにつけよ」） */
.peek-pets { position: absolute; bottom: 100%; left: 9%; right: 13%; display: flex; justify-content: center; pointer-events: none; }
.peek-pets .peek-pet { position: relative; right: auto; bottom: auto; flex: none; height: 58px; margin: 0 -3px; overflow: hidden; }
.peek-pets .peek-pet img { position: absolute; left: 0; top: 12px; width: 100%; height: 66px; transition-delay: calc(.25s + var(--d, 0s)); }
.peek:hover .peek-pets .peek-pet img { transition-delay: var(--d, 0s); }
/* トップのサービス欄：手を挙げる写真だけ枠が縦に伸びていた（688px）→ 枠の高さの中に収める（2026-10-23 大石さん「他のサービスと縦幅違う」） */
.svc-ph img[src$="raise-hand.webp"] { position: absolute; left: 50%; bottom: 0; top: auto; height: 94%; width: auto; max-height: none; max-width: none; transform: translateX(-50%); }
.pl-note { flex-basis: 100%; text-align: center; font-weight: 700; font-size: 12px; color: #555; }
/* 今月分が埋まった時：翌月分の先行受付（0とは出さない） */
.pl-tag { display: inline-block; background: var(--red); color: var(--white); font-weight: 900; padding: 2px 10px; margin-right: 8px; transform: skewX(-12deg); }
.pl-sub { font-weight: 700; font-size: 13px; color: #666; }
.ps-limit .pl-sub { color: #aaa; font-size: 11px; }
.ps-limit .pl-tag { padding: 0 6px; margin-right: 4px; }
.ps-limit b.pl-tag { color: var(--white); font-size: 12px; }

/* ---------- スマホのヘッダー：ボタンの文字を折らない（2026-10-23 大石さん「無料特/典」「相談す/る」と折れる） ---------- */
.hd { gap: 10px; }
.hd .brand.logo { flex: 0 1 auto; min-width: 0; }
.nav { flex: 0 0 auto; }
.nav a, .nav .cta span { white-space: nowrap; }
@media (max-width: 900px) {
  .nav { gap: 10px; }
  .cta { padding: 11px 20px; font-size: 14px; }
  .nav .nav-perk { padding: 4px 10px; }
}
@media (max-width: 480px) {
  .hd { padding: 16px var(--pad); }
  .brand.logo img { height: 22px; }
  .nav { gap: 8px; }
  .cta { padding: 9px 14px; font-size: 13px; }
  .nav .nav-perk { font-size: 12px; padding: 3px 7px; border-width: 2px; }
}
@media (max-width: 359px) {
  .brand.logo img { height: 18px; }
  .cta { padding: 8px 11px; font-size: 12px; }
  .nav .nav-perk { font-size: 11px; padding: 3px 5px; }
}
/* 速さの直し（2026-10-23）：最初の画面の写真と輪が出るまでの待ちを短くする（動きはそのまま） */
.hero .phone { animation-delay: .35s; }
.hero .bigring { animation-delay: .2s; }
/* 文字はページを出し終えてから読む（速さの直し）。届くまでは端末の日本語の文字で出す */
html, body { font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
.en, .brand, .ttl small { font-family: "Poppins", "Noto Sans JP", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif; }