/* VoiceLetter HP v2
   色：白と黒だけ。色はロゴのグラデーション（声の波）に限る。端末の設定でダーク／ライト、右上のボタンでも切り替え。
   文字：Noto Sans JP（見出し600・本文400）＋ 英字は Inter。 */
:root{
  --bg:#FFFFFF; --bg2:#F5F5F7; --fg:#0A0A0A; --sub:#6B6B6B; --line:rgba(10,10,10,.12);
  --g1:#0866FF; --g2:#FF23FA;              /* 声の波の色：Meta のブルー → ロゴのピンク（鮮やかな色が出る画面では下の P3 の色） */
  --w1:#8544F1; --w2:#DB60FF; --w3:#FD6AFB;  /* 文字ロゴ（logo_text）のグラデーション（測った色） */
}
@media (color-gamut: p3){ :root{ --g1:color(display-p3 0 .36 1); --g2:color(display-p3 1 .06 1); } } /* 今の色を鮮やかに（本人 2026-10-16） */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#000000; --bg2:#0D0D0F; --fg:#F5F5F5; --sub:#8E8E8E; --line:rgba(245,245,245,.14); }
}
:root[data-theme="dark"]{ --bg:#000000; --bg2:#0D0D0F; --fg:#F5F5F5; --sub:#8E8E8E; --line:rgba(245,245,245,.14); }

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:"Inter","Noto Sans JP",system-ui,sans-serif;color:var(--fg);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-break:strict;word-break:auto-phrase;overflow-x:hidden;
  transition:background-color .5s ease,color .5s ease}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--g1);outline-offset:4px;border-radius:6px}

/* 開いたとき */
.intro{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;pointer-events:none}
.intro-bg{position:absolute;inset:0;background:var(--bg)}
.intro-glow{position:absolute;inset:0;overflow:hidden;opacity:0}
.intro-glow i{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(90px)}
.intro-glow .ga{left:-32vmax;top:-34vmax;background:radial-gradient(circle,var(--g1) 0%,transparent 62%)}
.intro-glow .gb{right:-32vmax;bottom:-34vmax;background:radial-gradient(circle,var(--g2) 0%,transparent 62%)}
:root{--glow:.30}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--glow:.62} }
:root[data-theme="dark"]{--glow:.62}
/* ロゴ（マーク＋文字の横並び）。大きさはマークの高さ --ih から決める */
.lock{--ih:clamp(62px,15vw,176px);--iw:calc(var(--ih)*496/336);--wh:calc(var(--ih)*.44);--ww:calc(var(--wh)*817/115);--gap:calc(var(--ih)*.22);
  position:relative;width:calc(var(--iw) + var(--gap) + var(--ww));height:var(--ih);visibility:hidden} /* 部品の絵がそろってから見せる */
.ico{position:absolute;left:0;top:0;width:var(--iw);height:var(--ih);z-index:2}
.ico .env{position:absolute;inset:0;width:100%;height:100%}
.heart{position:absolute;will-change:transform}
.heart img{display:block;width:100%;height:100%}
.heart .bar{position:absolute;border-radius:999px;background:var(--bg);transform:scaleY(0)}
.word{clip-path:inset(-60% -200% -60% calc(var(--gap)*-.5));position:absolute;left:calc(var(--iw) + var(--gap));top:calc((var(--ih) - var(--wh))/2 + var(--ih)*.06);width:var(--ww);height:var(--wh);z-index:1}
.word .ch{position:absolute;top:0;height:100%;opacity:0;background:url(assets/logo_text_trim.png) no-repeat;background-size:var(--ww) var(--wh)}
.js .intro{display:flex} /* JavaScript が動くときだけ */
.burst{position:absolute;inset:0;background:linear-gradient(120deg,var(--b1),var(--b2));opacity:0} /* 色（--b1・--b2）は main.js の「開いたとき」が決める */
.is-ready .intro{display:none}

/* 上の帯 */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,3.6vw,52px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px)} /* 下の文字と重ならないよう、半透明＋ぼかし */
.brand img{height:26px;display:block} /* 余白を切り落とした画像なので、文字そのものの高さ */
.nav nav{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);font-size:15px;font-weight:500;letter-spacing:.01em}
.nav nav a{color:var(--fg);opacity:.72;transition:opacity .2s}
.nav nav a:hover{opacity:1}
.theme{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line)}
.theme svg{width:17px;height:17px;fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;grid-area:1/1}
.theme .moon{fill:var(--fg);stroke:none}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block} :root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme .sun{display:block} :root:not([data-theme="light"]) .theme .moon{display:none} }

/* 一番上〜3区切り目（声の波が貼りついて形を変える） */
.stage{height:420vh;position:relative}
.stage-pin{position:sticky;top:0;height:100vh;overflow:hidden}
#wave,#wave-glow{position:absolute;inset:0;width:100%;height:100%;display:block}
#wave-glow{filter:blur(16px) saturate(1.3);opacity:.5} /* 光のにじみ */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) #wave-glow{opacity:.95;mix-blend-mode:screen} }
:root[data-theme="dark"] #wave-glow{opacity:.95;mix-blend-mode:screen}
:root[data-look="plain"] #wave-glow{display:none} /* 光らせない見え方 */
.scene{position:absolute;left:clamp(20px,6vw,96px);right:clamp(20px,6vw,96px)}
.s1{top:24vh}
.kicker{font-size:13px;font-weight:500;color:var(--sub);letter-spacing:.04em;margin-bottom:22px}
h1{font-family:"Noto Sans JP",sans-serif;font-weight:600;font-size:clamp(34px,4.4vw,68px);line-height:1.3;letter-spacing:.02em}
.js .s2,.js .s3{opacity:0}
/* JavaScript が動かないとき：場面を重ねず、上から順に並べる（監査 2回目 軽N2） */
html:not(.js) .stage{height:auto}
html:not(.js) .stage-pin{position:static;height:auto;overflow:visible;padding:120px 0 40px}
html:not(.js) #wave,html:not(.js) #wave-glow{display:none}
html:not(.js) .scene{position:static;margin-bottom:96px}
.s2{top:30vh;text-align:center}
.s2 p{margin-left:auto;margin-right:auto}
.s3{top:18vh;text-align:right}
.s3 p{margin-left:auto}
.scene h2{font-family:"Noto Sans JP",sans-serif;font-weight:600;font-size:clamp(30px,3.8vw,58px);line-height:1.35;letter-spacing:.02em}
.scene p{margin-top:26px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(15px,1.15vw,17px);line-height:2;color:var(--sub);max-width:34em}


/* 4〜6：大手の会社のページのように、余白で見せる。色は声の波のグラデーションだけ */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,6vw,96px)}
.two{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,120px);align-items:center}
section.service,section.howto,section.safe,section.vision,section.contact{padding:clamp(96px,14vw,200px) 0;border-top:1px solid var(--line)}
section.service{border-top:0;overflow-x:clip} /* iPhone の後ろの光が横にはみ出さないように（監査 2回目 軽N1） */
.service h2,.howto h2,.safe h2,.vision h2,.contact h2{font-family:"Noto Sans JP",sans-serif;font-weight:600;font-size:clamp(28px,3.2vw,48px);line-height:1.4;letter-spacing:.02em}
.lead{margin-top:28px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(16px,1.3vw,19px);line-height:2;max-width:30em}
.facts{list-style:none;margin-top:48px;display:grid;gap:26px}
.facts li{display:grid;grid-template-columns:3px 1fr;column-gap:20px;font-family:"Noto Sans JP",sans-serif}
.facts li::before{content:"";grid-row:1/3;border-radius:3px;background:linear-gradient(var(--g1),var(--g2))} /* 紫を使わない（監査 2026-10-16 中1） */
.facts b{font-weight:600;font-size:17px}
.facts span{color:var(--sub);font-size:15px;line-height:1.9;margin-top:4px}
.links{margin-top:48px;display:flex;flex-wrap:wrap;gap:14px}
.link{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:40px;border:1px solid var(--line);font-family:"Noto Sans JP",sans-serif;font-size:15px;font-weight:500;transition:border-color .2s}
.link:hover{border-color:var(--fg)}
.device{position:relative;justify-self:center;width:min(320px,70vw)}
.device .glow{position:absolute;inset:8% -18%;border-radius:50%;background:linear-gradient(120deg,var(--g1),var(--g2));filter:blur(60px);opacity:.45}
.device .phone{position:relative;border-radius:54px;padding:9px;background:#0B0B0B;box-shadow:0 0 0 1px rgba(127,127,127,.25),0 30px 80px rgba(0,0,0,.18)}
.device .phone img{display:block;width:100%;border-radius:46px} /* 本物の iPhone の画面（時刻の帯つき）なので枠は細く */
/* 使い方：ファンと演者の2列。本番の画面＋3段 */
.howto-grid{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
.who{font-family:"Noto Sans JP",sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--sub);margin-bottom:24px;
  display:flex;align-items:center;gap:12px}
.who::before{content:"";width:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--g1),var(--g2))}
.flow-body{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:clamp(24px,3vw,40px);align-items:center}
.phone.sm{border-radius:34px;padding:6px;background:#0B0B0B;box-shadow:0 0 0 1px rgba(127,127,127,.25),0 24px 60px rgba(0,0,0,.16)}
.phone.sm img{display:block;width:100%;border-radius:29px}
.howto-steps{list-style:none;counter-reset:st;display:grid;gap:26px;font-family:"Noto Sans JP",sans-serif}
.howto-steps li{counter-increment:st;display:grid;grid-template-columns:auto 1fr;column-gap:14px}
.howto-steps li::before{content:attr(data-n);grid-row:1/3;font-family:"Inter",sans-serif;font-size:13px;font-weight:600;line-height:1.9;
  background:linear-gradient(90deg,var(--g1),var(--g2));-webkit-background-clip:text;background-clip:text;color:transparent}
.howto-steps b{font-weight:600;font-size:17px}
.howto-steps span{color:var(--sub);font-size:15px;line-height:1.9;margin-top:2px}
/* 使い方：LP と同じ作り（2026-10-17 CEO「もっとLPの工夫を見習ってほしい」）。区間を止めて、ファンと演者を混ぜた使われる順の1つの話で進める（01 演者 → 02・03 ファン → 04 演者 → 05 ファン → 06 演者）。
   今の側は「ファン」（ブルー）・「演者」（ピンク）の札に色が付く。画面は次の画面が上から重なって入る（前の画面は次が入りきるまで残す＝灰色が挟まらない）。動かすのは main.js */
.phone.sm{position:relative;overflow:hidden}
.phone.sm img+img{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;object-position:top}
.howto:not(.is-flow) .phone.sm img+img{display:none} /* 動きが使えないときは 01 の画面だけ・全部並べる */
.howto .who span{display:inline-block;padding:6px 16px;border-radius:999px;transition:background-color .35s ease,color .35s ease}
.howto.is-flow .who::before{display:none}
.howto.is-flow .who span{background:var(--bg2);color:var(--sub)}
.howto.is-flow .flow.on[data-who="fan"] .who span{background:#0866FF;color:#fff}
.howto.is-flow .flow.on[data-who="art"] .who span{background:#FD6AFB;color:#fff} /* LP の札と同じ色（字は白＝CEO 2026-10-17） */
@media (color-gamut: p3){ .howto.is-flow .flow.on[data-who="art"] .who span{background:color(display-p3 1 .36 1)} }
.howto.is-flow .howto-track{height:calc(100vh + 6 * 60vh);height:calc(100svh + 6 * 60svh)}
.howto.is-flow .howto-pin{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;padding-top:var(--navh,72px);display:flex;align-items:center}
.howto.is-flow .howto-pin > .wrap{width:100%}
.howto.is-flow .howto-grid{margin-top:0}
.howto.is-flow .flow{transition:opacity .45s ease}
.howto.is-flow .flow:not(.on){opacity:.32}
.howto.is-flow .howto-steps li{opacity:.3;transition:opacity .35s ease,transform .35s ease}
.howto.is-flow .howto-steps li.on{opacity:1}
.howto-dots{display:none}
.howto.is-flow .howto-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:clamp(28px,5vh,56px)}
.howto-dots i{position:relative;width:36px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.howto-dots i::after{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--f,0));background:#0866FF}
.howto-dots i[data-who="art"]::after{background:#FD6AFB} /* 線は今の側の色（演者＝ピンク・ファン＝ブルー） */
/* 安心して使えるように：2×2 */
.safe-list{list-style:none;margin-top:64px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px) clamp(40px,6vw,96px);font-family:"Noto Sans JP",sans-serif}
.safe-list li{border-top:1px solid var(--line);padding-top:26px;display:grid;gap:8px;align-content:start}
.safe-list b{font-weight:600;font-size:17px}
.safe-list span{color:var(--sub);font-size:15px;line-height:1.9}
.steps{list-style:none;margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,64px)}
.steps li{border-top:1px solid var(--line);padding-top:28px;font-family:"Noto Sans JP",sans-serif}
.steps .mini{display:block;width:100%;height:56px;margin-bottom:22px}
.steps b{font-weight:500;font-size:clamp(16px,1.35vw,20px);line-height:1.8}
.cards{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* 「誰か」で選ぶ札だけ。資料請求は下の1行に（2026-10-16） */
@media (max-width:1100px){ .cards{grid-template-columns:repeat(2,1fr)} }
.card{display:flex;flex-direction:column;gap:8px;padding:28px 24px;border:1px solid var(--line);border-radius:20px;font-family:"Noto Sans JP",sans-serif;transition:border-color .2s,transform .2s}
.card b{font-weight:600;font-size:16px}
.nw{white-space:nowrap} /* 言葉の途中で折り返さない。iPhone の Safari は word-break:auto-phrase が効かず「ら、」「た。」だけが次の行に落ちた（2026-10-17 CEO「『ら、』だけ改行されてるの嫌」） */
.ph{white-space:nowrap} /* phrase.js が言葉ごとに分けた所（Safari だけ） */
html.phrase-test body,html.phrase-test .lp{word-break:normal} /* ?phrase=1：手元の Chrome で Safari の折り返しを見る */
.card b .nw{white-space:nowrap;color:inherit;font-size:inherit;margin:0} /* 「の方」だけが次の行に落ちないように（説明文の見た目はうつさない） */
.card span{color:var(--sub);font-size:14px}
.card:hover{border-color:var(--fg);transform:translateY(-2px)}
.sub-links{margin-top:28px;display:grid;gap:8px;font-family:"Noto Sans JP",sans-serif;font-size:14px;color:var(--sub)} /* 資料請求とヘルプは札と分けて小さく（2026-10-16 本人） */
.sub-links a{color:var(--fg);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
/* 下の帯：参考は Apple・SmartHR・LayerX・Anthropic の下の帯（2026-10-16 に見た）。地の色を少し変え、文字は小さく */
.foot{background:var(--bg2);border-top:1px solid var(--line);padding:clamp(56px,7vw,88px) 0 32px;font-family:"Noto Sans JP",sans-serif}
.foot-top{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,3.6fr);gap:clamp(32px,4vw,64px)}
.foot-brand img{height:22px;display:block}
.foot-brand p{margin-top:14px;font-size:13px;color:var(--sub)}
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1fr 1.5fr;gap:clamp(24px,3vw,40px)}
.foot h3{font-size:12px;font-weight:600;letter-spacing:.04em;margin-bottom:16px}
.foot-cols nav a{display:block;font-size:13px;color:var(--sub);line-height:1.6;padding:5px 0;transition:color .2s}
.foot-cols nav a:hover,.foot-bottom a:hover{color:var(--fg)}
.foot-co dl{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:8px;font-size:12px;line-height:1.7}
.foot-co dt{color:var(--sub);white-space:nowrap}
.foot-co dd{color:var(--fg);opacity:.86}
.foot-bottom{margin-top:clamp(48px,6vw,72px);padding-top:20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.foot-bottom small{font-size:12px;color:var(--sub)}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:6px 0;font-size:12px}
.foot-bottom nav a{color:var(--sub);padding:0 12px;border-left:1px solid var(--line)}
.foot-bottom nav a:first-child{border-left:0;padding-left:0}
@media (max-width:1000px){ .foot-top{grid-template-columns:1fr} }
@media (max-width:760px){ .foot-cols{grid-template-columns:1fr 1fr} .foot-co{grid-column:1/-1} .foot-bottom{flex-direction:column-reverse;align-items:flex-start} .foot-bottom nav a{border-left:0;padding:0 18px 0 0} }
.js .reveal{opacity:0;transform:translateY(18px)}
.is-static .reveal{opacity:1;transform:none}

@media (max-width:1100px){ .howto-grid{grid-template-columns:1fr} .flow-body{grid-template-columns:minmax(0,200px) minmax(0,420px)}
  .howto.is-flow .flow{grid-area:1/1} .howto.is-flow .flow:not(.on){opacity:0;pointer-events:none} /* 1列のときはファンと演者を同じ所に重ね、今の側だけ見せる */ } /* 画面の横に文が入る幅がないときは、ファン・演者を縦に */
@media (max-width:760px){
  .two{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .howto-grid,.safe-list{grid-template-columns:1fr}
  .flow-body{grid-template-columns:1fr;gap:32px} .phone.sm{width:180px;justify-self:center} /* スマホでは画面を上、3段を下に */
  .phone-stick{display:grid;justify-items:center}
  /* スマホ：札・画面・今の項目の文を1つだけ（LP と同じ）。低い画面（Safari のバーが出ているとき）でも収まるよう画面を小さく */
  .howto.is-flow .who{justify-content:center;margin-bottom:16px}
  .howto.is-flow .flow-body{gap:22px}
  .howto.is-flow .phone.sm{width:min(210px,calc((100svh - var(--navh,72px) - 250px) / 2.17))} /* 札・文・線の分（約250px）だけ引いて、残りいっぱいに（CEO 2026-10-17「少しモックが小さい」） */
  .howto.is-flow .howto-track{margin-top:calc(28px - var(--navh,72px) - 12px)} /* 止まる前も、見出しのすぐ下に札が来るように（上の帯の分だけ寄せる） */
  .howto.is-flow .howto-pin{align-items:flex-start;padding-top:calc(var(--navh,72px) + 12px)} /* 上に寄せて、見出し「使い方」との間を空けない（CEO 2026-10-17「余白が結構ある」） */
  .howto.is-flow .howto-steps{display:grid;gap:0;min-height:96px}
  .howto.is-flow .howto-steps li{grid-area:1/1;align-content:start;opacity:0;transform:translateY(14px)} /* 重ねた項目の高さに合わせて、見出しと説明の間が空かないように */
  .howto.is-flow .howto-steps li.on{opacity:1;transform:none}
  .cards{grid-template-columns:1fr 1fr}
  .nav nav a:not([href="#contact"]):not([href="#company"]){display:none} /* スマホでもお問い合わせと会社情報（下の帯）へは飛べるように */
  .card{padding:22px 18px}
  .brand img{height:20px} .nav nav{gap:14px;font-size:13px} /* スマホでロゴと帯の文字がくっつかないように */
  .brand img{height:21px}
  .s1{top:20vh}
}
@media (prefers-reduced-motion:reduce){ body{transition:none} }