@charset "UTF-8";
/* ==========================================================================
株式会社EYAN / AMAcode ― v3「合言葉で回る会社」
黒×白の交互反転＋赤は点（5%）。文字だけで組む（画像ゼロ＝差し替え待ちゼロ）。
独自装置：①合言葉ターミナル ②赤い句点「。」 ③スラッシュ見出し /service
========================================================================== */
:root{
--ink:#0d0d0d;
--paper:#ffffff;
--red:#E60012;
--grey-ink:rgba(255,255,255,.62); /* 黒面の補助文字 */
--grey-paper:rgba(13,13,13,.62); /* 白面の補助文字 */
--line-ink:rgba(255,255,255,.24);
--line-paper:rgba(13,13,13,.18);
--font-disp:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
--font-body:"Noto Sans JP",sans-serif;
--font-serif:"Shippori Mincho",serif;
--font-mono:"IBM Plex Mono",monospace;
--nav-h:72px;
--wrap:1180px;
--pad:clamp(84px,11vw,150px); /* GO寄りのたっぷり余白 */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
margin:0;
font-family:var(--font-body);
font-size:16px;line-height:1.8;
color:var(--paper);
background:var(--ink);
word-break:auto-phrase;text-wrap:pretty;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s,background .25s,opacity .25s}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,dt{margin:0}
::selection{background:var(--red);color:#fff}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
/* ==========================================================================
共通装置
========================================================================== */
/* 赤い句点 */
.rp{color:var(--red);font-style:normal;font-weight:inherit}
/* スラッシュ見出し */
.slab{
font-family:var(--font-mono);font-size:13px;font-weight:500;
letter-spacing:.14em;margin-bottom:26px;
}
.slab b{color:var(--red);font-weight:700;margin-right:1px}
/* 点滅カーソル */
.cursor{
display:inline-block;width:.5em;height:1em;margin-left:.08em;
background:var(--red);vertical-align:baseline;transform:translateY(.12em);
animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
/* 行が下から立ち上がる（GO式・1行ずつ） */
.lr{display:block;overflow:hidden}
.lr>span{display:block;transform:translateY(112%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.lr.is-in>span{transform:none}
/* ふわっと出る（汎用）※動きは控えめ。主役は背景の動き（2026-08-01） */
[data-rv]{opacity:0;transform:translateY(13px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
[data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.lr>span{transform:none;transition:none}
[data-rv]{opacity:1;transform:none;transition:none}
.cursor{animation:none}
}
/* 慣性スクロール（JSがbodyに .smooth を付けたときだけ有効）
⚠️ 切るときは main.js の SMOOTH = false にする */
body.smooth>main{
position:fixed;top:0;left:0;width:100%;
will-change:transform;backface-visibility:hidden;
}
/* スクロール連動のズレ（data-para="-24" のように移動量pxを書く） */
[data-para]{will-change:transform}
/* 面（バンド）：黒と白を交互に */
.band{padding:var(--pad) 0}
.b-ink{background:var(--ink);color:var(--paper)}
.b-paper{background:var(--paper);color:var(--ink)}
/* 背景で漂う文字（canvas）。黒い面の後ろで > / 。 _ がゆっくり流れる */
.glyph-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero,.contact{position:relative;overflow:hidden}
.hero .wrap,.contact .wrap,.scroll-cue{position:relative;z-index:1}
/* カスタムカーソル（赤い点）。JSが body.cursor-on を付けたときだけ有効
⚠️ 消したいときは main.js の CURSOR = false */
body.cursor-on,body.cursor-on *{cursor:none!important}
#cursorDot{
position:fixed;top:0;left:0;z-index:99999;pointer-events:none;
width:10px;height:10px;border-radius:50%;background:var(--red);
display:flex;align-items:center;justify-content:center;
opacity:0;
transition:width .22s,height .22s,opacity .2s;
}
#cursorDot span{
font-family:var(--font-mono);font-weight:700;font-size:15px;line-height:1;
color:#fff;opacity:0;transition:opacity .18s;
}
#cursorDot.on-link{width:36px;height:36px}
#cursorDot.on-link span{opacity:1}
/* 各面の大見出し */
.disp{
font-family:var(--font-disp);font-weight:900;
font-size:clamp(40px,7.6vw,96px);line-height:1.16;letter-spacing:-.04em;
margin-bottom:.35em;
}
.band-sub{font-size:clamp(15px,1.5vw,18px);font-weight:500;line-height:2;max-width:820px}
.b-ink .band-sub{color:var(--grey-ink)}
.b-paper .band-sub{color:var(--grey-paper)}
/* ⚠️ ページの軸を1本にする。
宣言文・お問い合わせだけ中央だったので、他のセクションが「中心じゃない」と見えていた。
見出し（/slab・大見出し・リード）は全セクション中央に揃える。ヒーローだけは左のまま。
※中身のリスト類は左揃えのまま（中央にすると読みにくくなるため） */
.band:not(.hero) .slab,
.band:not(.hero) .disp,
.band:not(.hero) .band-sub{text-align:center}
.band:not(.hero) .band-sub{margin-left:auto;margin-right:auto}
/* 幅の狭い箱は中央に置いて、右だけ余るのをなくす */
.calc,.term,.fee-list,.faq-list,.term-note{margin-left:auto;margin-right:auto}
.term-note{text-align:center}
/* ==========================================================================
セクションに添える写真（全部モノクロ・遅延読み込み）
========================================================================== */
.sec-photo{margin:44px auto 0;max-width:900px}
.sec-photo img{width:100%;height:auto;display:block}
.sec-photo figcaption{
margin-top:10px;text-align:center;font-size:12px;letter-spacing:.02em;
}
.b-paper .sec-photo figcaption{color:var(--grey-paper)}
.b-ink .sec-photo figcaption{color:var(--grey-ink)}
/* ⚠️ 言い切り3本は写真を入れない。1本だけ写真があると「そこだけ何？」になる（2026-08-01 本人指摘）。
写真を足すならバンドの下に .sec-photo で1枚、3本の外に置く。 */
/* 見出し・短文の折り返しを、語の途中で切らせない（日本語向け）
⚠️ 手動
で改行位置を固定しない。画面幅が変わると必ずどこかで崩れる */
.disp,.contact-disp,.svc-title,.works-list h3,.topics-list h3,.voice h3,
.faq-list summary,.reasons li,.flow-steps h3,.pd-title,.calc-title,
.fee-list em,.hero-tag,.punch p{word-break:auto-phrase}
.disp,.contact-disp,.svc-title,.flow-steps h3,.voice h3,.faq-list summary{text-wrap:balance}
/* ここだけは絶対に途中で折らない、という語に付ける */
.nw{white-space:nowrap}
/* ==========================================================================
ローダー
========================================================================== */
/* ローダー：EYANが1文字ずつ打たれ、最後にYが赤くなる（2026-08-12 差し替え）
⚠️ 画像は使わない。GPTの連番7枚は文字の大きさ・位置がフレームごとに13%／39pxずれていて、
パラパラ再生するとロゴが揺れる。完成形2枚は透過なし・計3.5MB。ここは図形（SVG）で描く。 */
#loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;transition:transform .65s cubic-bezier(.7,0,.2,1)}
/* 大きさ：字の高さ＝ロゴ幅の約1/4。PCで約87px、スマホで約64px（2026-08-12 本人指摘で縮小） */
.ld-svg{width:min(38vw,340px);height:auto;overflow:visible}
@media (max-width:640px){.ld-svg{width:min(62vw,250px)}}
.ld-l path{fill:var(--paper)}
.ld-l{opacity:0;animation:ld-type 0s steps(1) forwards;animation-delay:var(--d,0s)}
@keyframes ld-type{to{opacity:1}}
/* 打ち終わってからYが赤くなる */
.ld-y path{transition:fill .3s ease}
body.ld-done .ld-y path{fill:var(--red)}
/* 左右の赤い細線（ロゴの締め）。打ち終わりで出る */
.ld-bar{fill:var(--red);opacity:0;animation:ld-fade .3s ease 1.02s forwards}
@keyframes ld-fade{to{opacity:1}}
/* カーソル：文字が増えるたびに右へ跳び、打ち終わりで消える */
.ld-cur{
fill:var(--red);
animation:ld-blink .5s steps(1) infinite, ld-move .92s steps(1) forwards, ld-off .18s ease .9s forwards;
}
@keyframes ld-blink{50%{opacity:0}}
/* カーソルの居場所＝いま打った字のすぐ右（字の幅＋字間に合わせてある） */
@keyframes ld-move{
0%{transform:translateX(0)}
21.7%{transform:translateX(80px)}
39.1%{transform:translateX(176px)}
56.5%{transform:translateX(252px)}
73.9%{transform:translateX(348px)}
100%{transform:translateX(348px)}
}
@keyframes ld-off{to{opacity:0}}
body.loaded #loader{transform:translateY(-101%)}
body.loaded #loader{pointer-events:none}
/* 動きを減らす設定の人には、完成形をそのまま出す */
@media (prefers-reduced-motion:reduce){
.ld-l{opacity:1;animation:none}
.ld-y path{fill:var(--red)}
.ld-bar{opacity:1;animation:none}
.ld-cur{display:none}
}
/* ==========================================================================
ナビ（黒・1本）
========================================================================== */
#mainNav{
position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1100;
background:var(--ink);border-bottom:1px solid var(--line-ink);
display:flex;align-items:center;gap:20px;padding:0 clamp(16px,3vw,36px);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lm-mark{display:flex;flex-direction:column;gap:4px;width:30px}
.lm-mark i{
display:block;height:5px;background:var(--paper);border-radius:1px;
transform-origin:left center;
}
.lm-mark i:nth-child(1){width:100%}
.lm-mark i:nth-child(2){width:74%}
.lm-mark i:nth-child(3){width:48%}
.lm-mark.big{width:48px}
.lm-mark.big i{height:8px;background:var(--red)}
/* ロゴが上から1本ずつ描かれる（散らかったものが整う、という会社の思想そのもの）
⚠️ 止めたいときは JS の LOGO_DRAW = false
⚠️ 隠す指定を静的に書かない。アニメが走らない環境でロゴが消えるため、
「隠す」はキーフレームの中だけに置き、backwards で待機中も0にする。 */
.lm-mark.draw.go i{animation:lmDraw .5s cubic-bezier(.2,.8,.3,1) backwards}
.lm-mark.draw.go i:nth-child(1){animation-delay:.05s}
.lm-mark.draw.go i:nth-child(2){animation-delay:.19s}
.lm-mark.draw.go i:nth-child(3){animation-delay:.33s}
@keyframes lmDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
.lm-mark.draw.go i{animation:none}
}
.lm-name{font-family:var(--font-disp);font-weight:900;font-size:14px;line-height:1.15;letter-spacing:-.02em;color:var(--paper)}
.lm-name small{display:block;font-size:9.5px;font-weight:500;letter-spacing:.16em;opacity:.7}
.nav-menu{display:flex;align-items:center;gap:clamp(14px,2vw,26px);margin-left:auto}
.nav-menu>li>a{font-size:13px;font-weight:500;color:var(--paper);padding:8px 0;white-space:nowrap;opacity:.85;position:relative}
.nav-menu>li>a:hover{opacity:1;color:#fff}
/* ホバーで赤い線が左から走る（赤い点カーソルの代わりの反応） */
.nav-menu>li:not(.nav-cta)>a::after{
content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
background:var(--red);transform:scaleX(0);transform-origin:left;
transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav-menu>li:not(.nav-cta)>a:hover::after{transform:scaleX(1)}
.nav-cta a{
background:var(--red);color:#fff!important;opacity:1!important;
font-family:var(--font-disp);font-weight:700;padding:10px 22px!important;
}
.nav-cta a:hover{background:#fff;color:var(--ink)!important}
.nav-toggle{display:none}
/* ==========================================================================
1. ヒーロー
========================================================================== */
.hero{
min-height:100svh;display:flex;align-items:center;position:relative;
padding-top:calc(var(--nav-h) + 40px);padding-bottom:80px;
}
/* ⚠️ .hero は display:flex なので、.wrap は放っておくと「中身の幅」に縮んで
中央寄せになる（文字が左端に揃わない）。必ず幅いっぱいに張らせる。 */
.hero>.wrap{width:100%;flex:1 1 auto}
/* ヒーローの写真。PC＝右側に大きく、スマホ＝背景に薄く敷く */
.hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* スマホ：文字が主役なので薄く落として、左上から黒でぼかす */
@media (max-width:899px){
.hero-photo{opacity:.22}
.hero-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(100deg,var(--ink) 18%,transparent 85%);
}
}
/* PC：右側だけに置き、文字は左半分に収める（写真の上に文字を乗せない） */
@media (min-width:900px){
.hero-photo{left:auto;right:0;width:40%}
.hero-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--ink) 0%,rgba(13,13,13,.55) 22%,transparent 60%);
}
/* 写真40%＋文字58%。この組み合わせなら1280pxでも重ならない（実測） */
.hero>.wrap>*{max-width:58%}
}
.hero-lead{font-family:var(--font-disp);font-weight:700;font-size:clamp(17px,2.1vw,27px);letter-spacing:-.01em;color:var(--paper)}
/* ==========================================================================
吹き出し（誰かが話しかけてくる場所にだけ使う）
⚠️ 飾りで乱発しない。「人の声」の場所だけ。
========================================================================== */
.bubble{
display:inline-block;position:relative;
max-width:100%; /* ⚠️ 無いとスマホで画面外へ突き抜ける */
background:var(--paper);color:var(--ink);
padding:13px 22px;border-radius:7px;
line-height:1.6;letter-spacing:-.01em;
box-sizing:border-box;
}
/* しっぽ（左下から出る） */
.bubble::after{
content:"";position:absolute;left:28px;bottom:-11px;
width:0;height:0;
border-right:17px solid transparent;
border-top:12px solid var(--paper);
}
/* 白い面では黒い吹き出しに反転 */
.b-paper .bubble{background:var(--ink);color:var(--paper)}
.b-paper .bubble::after{border-top-color:var(--ink)}
/* 赤い吹き出し（ここぞの一言用） */
.bubble.red{background:var(--red);color:#fff}
.bubble.red::after{border-top-color:var(--red)}
/* しっぽを右下から出す版 */
.bubble.tail-r::after{left:auto;right:28px;border-right:0;border-left:17px solid transparent}
/* 見出しの中に置く小さめの吹き出し（下に行が続くので余白を確保） */
.bubble.bub-sm{padding:8px 16px;border-radius:6px;margin-bottom:14px}
.bubble.bub-sm::after{left:20px;bottom:-9px;border-right:13px solid transparent;border-top:10px solid var(--paper)}
.b-ink .bubble.bub-sm::after{border-top-color:var(--paper)}
.hero-display{
margin:20px 0 30px;
font-family:var(--font-disp);font-weight:900;
/* ⚠️ 大きくしすぎると、写真に幅を取られて1行3文字になり縦長になる。
PCで「それ、一人で」が1行に収まる上限が110px。 */
font-size:clamp(58px,9vw,110px);line-height:1.04;letter-spacing:-.055em;
}
.hero-display .lr{padding-bottom:.06em;margin-bottom:-.06em}
/* スマホだけ「それ、／一人で」で折る。PCでは1行にする */
@media (min-width:900px){.br-sm{display:none}}
/* 見出しを .lr で隠すとき、字の下（descender）が切れないように逃がす */
.disp .lr,.contact-disp .lr{padding-bottom:.08em;margin-bottom:-.08em}
.hero-tag{
display:inline-block;background:var(--red);color:#fff;
font-family:var(--font-disp);font-weight:900;
font-size:clamp(15px,1.7vw,21px);letter-spacing:.01em;line-height:1.5;
padding:11px 22px;
}
/* 「作業する」の白抜き。前後に息継ぎを作らないと、隣の「AI」とくっついて読めない */
.hero-tag b{
background:#fff;color:var(--red);
padding:2px 9px;margin:0 6px;border-radius:3px;
letter-spacing:.02em;
}
.hero-h1{margin-top:18px;font-weight:700;font-size:clamp(14px,1.35vw,17px);line-height:1.7;color:var(--grey-ink);letter-spacing:0}
.hero-by{margin-top:8px;font-family:var(--font-mono);font-size:12px;color:var(--grey-ink)}
.scroll-cue{
position:absolute;left:28px;bottom:22px;
font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;color:var(--grey-ink);
padding-left:44px;
}
.scroll-cue::before{
content:"";position:absolute;left:0;top:50%;width:34px;height:1px;background:var(--red);
animation:cue 2s ease-in-out infinite;transform-origin:left;
}
@keyframes cue{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
/* ==========================================================================
2. 宣言（明朝）
========================================================================== */
.manifesto{max-width:900px;margin:0 auto;text-align:center}
#manifesto .slab{text-align:center}
.m-line{
font-family:var(--font-serif);font-weight:600;
font-size:clamp(19px,2.9vw,34px);line-height:2.1;letter-spacing:.04em;
}
.m-line:first-child{
font-size:clamp(26px,4.2vw,50px);font-weight:700;line-height:1.7;
margin-bottom:.5em;letter-spacing:.02em;
}
/* 宣言の根拠となる数字（白面・赤いマーカー線） */
.proof-nums{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;
max-width:900px;margin:70px auto 0;text-align:left;
}
.pnum b{
display:block;width:max-content;
font-family:var(--font-mono);font-weight:700;
font-size:clamp(30px,3.8vw,46px);letter-spacing:-.03em;line-height:1.25;
/* 文字の下に線を敷く。文字にかぶせない（かぶると数字が読めない） */
padding:0 3px 6px;
border-bottom:5px solid var(--red);
}
.pnum b small{font-size:.5em;font-weight:500;letter-spacing:0}
.pnum span{display:block;margin-top:10px;font-size:13.5px;color:var(--grey-paper);line-height:1.8}
.proof-note{max-width:900px;margin:20px auto 0;text-align:left;font-size:12.5px;color:var(--grey-paper)}
/* ==========================================================================
3. 言い切り3本柱
========================================================================== */
.punch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.punch li{padding:0 28px;border-left:1px solid var(--line-ink)}
.punch li:first-child{padding-left:0;border-left:0}
.punch li:last-child{padding-right:0}
.pn{display:block;font-family:var(--font-mono);font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--red);margin-bottom:16px}
/* 手動
をやめ、幅に応じて意味の切れ目で折り返させる。
「一人／雇おか」のように語の途中で切れるのを防ぐ */
.punch h2{
font-family:var(--font-disp);font-weight:900;
/* ⚠️ 3列のとき、真ん中の列は約300pxしかない。
「その日に決まります。」(10字) が1行に収まる上限が32px。大きくすると枠から出る。 */
font-size:clamp(23px,2.6vw,32px);line-height:1.36;letter-spacing:-.045em;
word-break:auto-phrase;text-wrap:balance;
}
.punch p{margin-top:18px;font-size:14.5px;line-height:2;color:var(--grey-ink)}
.punch small{display:block;margin-top:8px;font-size:12px;opacity:.8;line-height:1.7}
/* ==========================================================================
4. 合言葉ターミナル
========================================================================== */
.term{
margin-top:54px;background:#111;color:#eee;
border:1px solid rgba(13,13,13,.9);border-radius:12px;
box-shadow:0 24px 60px -30px rgba(13,13,13,.45);
overflow:hidden;max-width:860px;
}
.term-bar{
display:flex;align-items:center;gap:7px;
background:#1d1d1d;padding:12px 16px;border-bottom:1px solid #000;
}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#3a3a3a}
.term-bar i:first-child{background:var(--red)}
.term-bar span{margin-left:10px;font-family:var(--font-mono);font-size:12px;color:#888;letter-spacing:.06em}
.term-body{padding:26px 26px 30px;min-height:170px;font-family:var(--font-mono)}
.t-in{font-size:clamp(16px,1.9vw,21px);font-weight:700;letter-spacing:.02em}
.t-in b{color:var(--red);margin-right:10px;font-weight:700}
.t-in .cursor{transform:translateY(.16em)}
.t-out{
margin-top:16px;padding-left:26px;position:relative;
font-family:var(--font-body);font-size:clamp(14px,1.6vw,17px);line-height:1.9;color:#c9c9c9;
opacity:0;transition:opacity .5s ease;
}
.t-out::before{content:"↳";position:absolute;left:0;top:0;color:var(--red);font-family:var(--font-mono)}
.t-out.show{opacity:1}
.term-note{margin-top:18px;font-size:13px;color:var(--grey-paper)}
/* ==========================================================================
5. サービス
========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:64px}
.svc-title{
font-family:var(--font-disp);font-weight:900;
font-size:clamp(24px,2.8vw,36px);letter-spacing:-.04em;line-height:1.3;
padding-bottom:18px;border-bottom:2px solid var(--paper);margin-bottom:6px;
}
.svc-link{
display:flex;align-items:center;gap:10px;
padding:15px 2px;font-size:15px;font-weight:500;color:var(--grey-ink);
border-bottom:1px solid var(--line-ink);
}
.svc-link i{flex:0 0 auto;width:7px;height:7px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:rotate(45deg);transition:transform .25s}
.svc-link:hover{color:#fff}
.svc-link:hover i{transform:rotate(45deg) translate(3px,-3px)}
/* ==========================================================================
6. 導入事例（行リスト）
========================================================================== */
.works-list{margin-top:56px;border-top:1px solid var(--line-paper);counter-reset:wk}
.works-list li{
display:flex;align-items:baseline;gap:clamp(18px,3vw,44px);
padding:30px 6px;border-bottom:1px solid var(--line-paper);
position:relative;transition:padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.works-list li::before{
content:"/";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
color:var(--red);font-family:var(--font-mono);font-weight:700;font-size:20px;
opacity:0;transition:opacity .25s,left .3s;
}
.works-list li:hover{padding-left:26px}
.works-list li:hover::before{opacity:1;left:4px}
.wn{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--grey-paper);flex:0 0 auto}
.works-list h3{font-family:var(--font-disp);font-weight:700;font-size:clamp(18px,2.2vw,27px);letter-spacing:-.03em;line-height:1.5}
.works-list p{margin-top:4px;font-size:14px;color:var(--grey-paper);line-height:1.9}
/* ==========================================================================
7. お客様の声（レール）
========================================================================== */
.voice-rail{
margin-top:56px;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.voice-track{display:flex;gap:22px;width:max-content;animation:rail 46s linear infinite}
.voice-rail:hover .voice-track{animation-play-state:paused}
@keyframes rail{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.voice-track{animation:none}}
.voice{
width:min(380px,80vw);flex:0 0 auto;
padding:0 0 26px; /* しっぽと差出人のぶんを下に空ける */
}
/* 声そのものを吹き出しに。しっぽの下に会社名が来る＝誰が言ったかが繋がる */
.voice h3{
position:relative;
background:var(--paper);color:var(--ink);
padding:28px 26px;border-radius:8px;
font-family:var(--font-disp);font-weight:700;
font-size:clamp(17px,1.9vw,23px);line-height:1.6;letter-spacing:-.03em;
}
.voice h3::after{
content:"";position:absolute;left:30px;bottom:-12px;
width:0;height:0;
border-right:18px solid transparent;
border-top:13px solid var(--paper);
}
/* 差出人は吹き出しの外（＝しゃべった人）。黒面に置くので白文字 */
.voice .v-who{
margin:26px 0 0 30px;font-size:12.5px;color:var(--grey-ink);
display:flex;align-items:center;gap:8px;
}
/* 流れる帯（voice面の下端。白フチ文字がゆっくり横へ） */
.marquee{overflow:hidden;margin-top:72px}
.marquee-track{display:flex;width:max-content;animation:mq 38s linear infinite;will-change:transform}
.marquee-track span{
font-family:var(--font-disp);font-weight:900;white-space:nowrap;
font-size:clamp(44px,7.6vw,100px);letter-spacing:-.03em;line-height:1.25;
color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);
}
.marquee-track b{color:var(--red);-webkit-text-stroke:0px;font-weight:900}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* 磁石ボタン */
.magnet{transition:transform .18s ease-out}
/* ⚠️ ダミー表示。本物の声に差し替えたらHTML側のを消す */
.v-dummy{
margin-left:auto;flex:0 0 auto;
font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
color:var(--red);border:1px solid var(--red);border-radius:3px;padding:1px 5px;
}
/* ==========================================================================
8. 選ばれる理由
========================================================================== */
.reasons{margin-top:56px;border-top:1px solid var(--line-paper)}
.reasons li{
display:flex;gap:22px;align-items:baseline;
padding:26px 4px;border-bottom:1px solid var(--line-paper);
font-family:var(--font-disp);font-weight:700;
font-size:clamp(18px,2.4vw,32px);line-height:1.5;letter-spacing:-.03em;
}
.rn{font-family:var(--font-mono);font-weight:700;font-size:.95em;color:var(--red);flex:0 0 auto}
/* ==========================================================================
9. 料金
========================================================================== */
.fee-list{margin-top:56px;border-top:2px solid var(--paper);max-width:900px}
.fee-list li{border-bottom:1px solid var(--line-ink)}
.fee-open{
display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;
width:100%;padding:24px 6px;background:none;border:0;color:inherit;
font:inherit;text-align:left;cursor:pointer;position:relative;
transition:background .2s,padding-left .25s;
}
.fee-open:hover{background:rgba(255,255,255,.05);padding-left:16px}
.fee-more{
margin-left:auto;flex:0 0 auto;font-style:normal;
font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
color:var(--red);border:1px solid var(--red);border-radius:3px;padding:4px 10px;
transition:background .2s,color .2s;
}
.fee-open:hover .fee-more{background:var(--red);color:#fff}
.fee-list span{font-family:var(--font-disp);font-weight:700;font-size:17px;min-width:170px}
.fee-list b{
font-family:var(--font-mono);font-weight:700;
font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em;
padding:0 4px 5px;
border-bottom:4px solid var(--red);
}
.fee-list b small{font-size:.55em;font-weight:500;margin-left:2px}
.fee-list em{font-style:normal;font-size:13.5px;color:var(--grey-ink)}
/* ⚠️「おすすめ」を名前の中に入れると、その行だけ名前が広がって金額が右にずれる
（実測：スマホで金額の左端が 162px→192px）。行の上辺に浮かせて、列幅に影響させない。 */
.fee-list .rec{position:relative}
.fee-list .rec::before{
content:"いちばん選ばれています";
position:absolute;top:0;right:6px;transform:translateY(-50%);
font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.02em;
color:#fff;background:var(--red);padding:3px 10px;white-space:nowrap;pointer-events:none;
}
.fee-list li:last-child{border-bottom:2px solid var(--paper)}
/* 料金の小見出し（初期研修の3つ／そのあとの任意オプション） */
.fee-cap{
max-width:900px;margin:52px auto 0;display:flex;align-items:center;
gap:6px 14px;flex-wrap:wrap;text-align:left;
}
.fee-cap b{font-family:var(--font-disp);font-weight:700;font-size:clamp(17px,2vw,21px);letter-spacing:-.01em}
.fee-cap span{
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
color:var(--red);border:1px solid var(--red);border-radius:3px;padding:3px 9px;
}
.fee-cap+.fee-list{margin-top:18px}
/* 伴走＝3プランの「あとに足すもの」。横並びに見せると安いほうを選ばれてしまう。
左の赤線と字下げで「上にぶら下がっている」形にする。 */
.fee-opt{max-width:900px;margin:36px auto 0;padding-left:22px;border-left:3px solid var(--red)}
.fee-opt .fee-cap{margin:0}
.fee-plus{font-style:normal;font-family:var(--font-mono);font-weight:700;font-size:22px;color:var(--red);line-height:1}
.mo-list{margin-top:14px;border-top:1px solid var(--line-ink)}
.mo-list li:last-child{border-bottom:1px solid var(--line-ink)}
.fee-optnote{margin-top:14px;font-size:13px;line-height:1.9;color:var(--grey-ink)}
.fee-optnote b{color:var(--paper)}
.note{margin-top:20px;font-size:13px;color:var(--grey-ink);line-height:1.9}
/* プランの中身ポップアップ（native