:root{--paper:#FFFFFF;--ink:#1D1E20;--sub:#5B5E63;--rule:#D9D7D2;--line:#BFC3C8;--red:#E50027;--h-c:#F3F4F5;--h-bg:#E8EBEE;--h-edge:#CED4DA;--h-text:#172033;--h-sub:#4B5566;--sec:#EEF1F4;
 --hh:64px;--gut:clamp(20px,4vw,40px);--max:1240px;--sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;--ease:cubic-bezier(.22,.61,.36,1);
 --phx:max(12px,calc((100vw - var(--max)) / 2 + var(--gut) / 2));color-scheme:light only;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(var(--hh) + 16px);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.9;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}ul,ol{padding:0;list-style:none}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nb{display:inline-block;white-space:nowrap;max-width:100%}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
p,li,dd,h3{text-wrap:pretty}
/* 左の余白の赤い再生ヘッド(会社HPと同じ位置) */
.ph{position:fixed;top:0;bottom:0;left:var(--phx);width:2px;margin-left:-1px;background:var(--red);opacity:.9;z-index:35;pointer-events:none}
.ph i{position:absolute;left:50%;top:calc(var(--hh) + 14px);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red)}
/* ヘッダー */
.hd{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);border-bottom:1px solid var(--rule)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:var(--hh)}
.logo{display:block;width:136px}
.gnav{display:flex;align-items:center;gap:4px}
.gnav a{display:inline-flex;align-items:center;height:44px;padding:0 14px;font-size:14px;font-weight:500}
.gnav a:hover{text-decoration:underline;text-underline-offset:6px}
.gnav a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.gnav .cta{margin-left:12px;border:1px solid var(--ink);border-radius:999px;padding:0 20px}
.menu{display:none;position:relative}
.menu summary{list-style:none;display:inline-flex;align-items:center;height:40px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;font-size:14px;cursor:pointer;background:#fff}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:#fff}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 2 * var(--gut)));background:#fff;border:1px solid var(--ink);border-radius:8px;padding:6px 18px}
.menu nav a{display:block;padding:13px 0;border-bottom:1px solid var(--rule);font-weight:700}
.menu nav a:last-child{border-bottom:0}
/* ボタン(会社HPと同じ黒い丸ボタン) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 32px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-weight:700;font-size:16px;transition:background .2s var(--ease),color .2s var(--ease)}
.btn:hover{background:#fff;color:var(--ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
/* 最初の画面 */
.hero{background:radial-gradient(75% 90% at 60% 20%,var(--h-c) 0%,var(--h-bg) 60%,var(--h-edge) 100%);border-bottom:1px solid var(--rule)}
.hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px clamp(40px,6vw,96px);align-items:center;padding-block:clamp(56px,8vw,112px) clamp(48px,6vw,80px)}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--h-sub)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--red);flex:none}
.hero h1{margin-top:18px;font-size:clamp(32px,4.6vw,58px);line-height:1.35;font-weight:700;color:var(--h-text);letter-spacing:.02em;font-feature-settings:"palt"}
.hero h1 span{display:inline-block;white-space:nowrap}
.hero .lead{margin-top:22px;font-size:clamp(15.5px,1.35vw,17px);color:var(--h-sub);max-width:36em}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px 16px;margin-top:30px}
.wave{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:22px 22px 18px}
.wave .top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sub);margin-bottom:12px}
.wave .top b{color:var(--ink);font-size:13.5px}
.wave svg{display:block;width:100%;height:auto}
.wave ol{margin-top:14px;border-top:1px solid var(--rule)}
.wave li{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:13.5px;line-height:1.6}
.wave li span{color:var(--sub);font-variant-numeric:tabular-nums}
.wave .note{margin-top:10px;font-size:12px;color:var(--sub)}
/* 節 */
.sec{padding-block:clamp(72px,9vw,128px)}
.sec.mist{background:var(--sec)}
.sh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.sh .k{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--sub);letter-spacing:.06em}
.sh h2{margin-top:12px;font-size:clamp(26px,3.2vw,40px);line-height:1.45;font-weight:700;letter-spacing:.02em;font-feature-settings:"palt"}
.sh p{color:var(--sub);font-size:16px}
/* できること */
.svc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--ink)}
.svc article{padding:28px 28px 30px 0;border-bottom:1px solid var(--rule)}
.svc article + article{padding-left:28px;border-left:1px solid var(--rule)}
.svc .no{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.08em}
.svc .feat{display:inline-block;margin-left:10px;font-size:12px;font-weight:700;color:#fff;background:var(--red);border-radius:999px;padding:1px 10px;vertical-align:1px}
.svc h3{margin-top:10px;font-size:clamp(20px,2vw,24px);font-weight:700;line-height:1.5}
.svc p{margin-top:10px;font-size:15.5px}
.svc ul{margin-top:14px;border-top:1px solid var(--rule)}
.svc li{padding:8px 0 8px 16px;border-bottom:1px solid var(--rule);font-size:14.5px;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.svc ul.ex li{padding:12px 0 12px 16px;line-height:1.75}
.svc ul.ex li b{display:block;font-size:15.5px;margin-bottom:2px}
.svc ul.ex li::before{top:22px}
/* ナレーションの強み */
.str{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.str div{padding:26px 26px 28px 0;border-bottom:1px solid var(--rule)}
.str div + div{padding-left:26px;border-left:1px solid var(--rule)}
.str b{display:block;font-size:19px;font-weight:700;line-height:1.5}
.str p{margin-top:8px;font-size:15.5px}
.uses{margin-top:40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px clamp(40px,6vw,96px)}
.uses h3{font-size:18px;font-weight:700}
.uses ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--rule)}
.uses li{padding:12px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
/* 分担の表 */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px}
.tbl th,.tbl td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.tbl thead th{border-bottom:1px solid var(--ink);font-size:16px}
.tbl tbody th{width:18%;font-weight:700;color:var(--sub);font-size:14.5px}
/* 実績・権利 */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(40px,6vw,96px)}
.box{border-top:1px solid var(--ink);padding-top:22px}
.box h3{font-size:20px;font-weight:700}
.box p{margin-top:10px;font-size:15.5px}
.box ul{margin-top:12px;border-top:1px solid var(--rule)}
.box li{padding:10px 0 10px 18px;border-bottom:1px solid var(--rule);font-size:15px;position:relative}
.box li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:1px;background:var(--ink)}
/* 進め方 */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--ink)}
.flow li{padding:22px 18px 24px 0;border-bottom:1px solid var(--rule)}
.flow li + li{padding-left:18px;border-left:1px solid var(--rule)}
.flow span{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.08em}
.flow b{display:block;margin-top:6px;font-size:18px}
.flow p{margin-top:6px;font-size:14.5px;color:var(--sub)}
/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:16px;align-items:center;padding:20px 0;font-weight:700;font-size:16.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:20px;height:20px;position:relative}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:1.5px;background:var(--ink);transition:transform .2s}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .a{padding:0 0 22px;font-size:15.5px;color:var(--ink)}
/* 相談 */
.ask{background:var(--h-bg);border-top:1px solid var(--rule)}
.ask-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding-block:clamp(56px,7vw,96px)}
.ask h2{font-size:clamp(24px,3vw,36px);font-weight:700;line-height:1.5;color:var(--h-text)}
.ask p{margin-top:10px;color:var(--h-sub)}
/* フッター */
.ft{border-top:1px solid var(--rule);padding-block:32px 48px;font-size:13px;color:var(--sub)}
.ft-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.ft img{width:96px}
.ft nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.ft nav a{text-decoration:underline;text-underline-offset:5px}
.ft p{margin-left:auto}
@media (max-width:1060px){.svc{grid-template-columns:minmax(0,1fr)}.svc article,.svc article + article{padding:24px 0;border-left:0}}
@media (max-width:960px){
  .hero-in,.sh,.uses,.two,.ask-in{grid-template-columns:minmax(0,1fr)}
  .str{grid-template-columns:minmax(0,1fr)}.str div,.str div + div{padding:22px 0;border-left:0}
  .flow{grid-template-columns:minmax(0,1fr)}.flow li,.flow li + li{padding:18px 0;border-left:0}
}
@media (max-width:860px){.gnav{display:none}.menu{display:block}}
@media (max-width:620px){
  :root{--hh:56px}.logo{width:112px}.ph{width:1.5px}.ph i{width:10px;height:10px;margin:-5px 0 0 -5px}
  .hero h1{font-size:clamp(28px,8.4vw,36px)}
  .hero .acts .btn{flex:1 1 100%}
  .uses ul{grid-template-columns:minmax(0,1fr)}
  .tbl th,.tbl td{padding:14px 10px}.tbl tbody th{width:5.5em}
  .ask-in .btn{width:100%}
  .ft p{margin-left:0}
  
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* AIナレーションの試聴 */
.wave .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.wave .t{display:grid;line-height:1.4}
.wave .t b{font-size:14px;color:var(--ink)}
.wave .t small{font-size:12px;color:var(--sub)}
.vs-play{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;flex:none;transition:background .2s,color .2s}
.vs-play:hover{background:#fff;color:var(--ink)}
.vs-play i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.vs-play[aria-pressed="true"] i{width:10px;height:12px;border:0;background:linear-gradient(90deg,currentColor 0 35%,transparent 35% 65%,currentColor 65%)}
.vs-list{margin-top:14px;border-top:1px solid var(--rule)}
.wave .vs-list li{display:block;padding:0;border-bottom:1px solid var(--rule);font-size:inherit}
.vs-list button{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:44px;padding:6px 4px;border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink);text-align:left;cursor:pointer}
.vs-list button:hover{background:var(--sec)}
.vs-list button[aria-current="true"]{font-weight:700}
.vs-list button[aria-current="true"] .n{color:var(--red)}
.vs-list .n{color:var(--sub);font-variant-numeric:tabular-nums;font-size:12.5px}
.vs-list em{font-style:normal;color:var(--sub);font-size:12.5px;font-variant-numeric:tabular-nums}

/* VoiceStudioの節 */
.vs-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(40px,6vw,96px);align-items:start}
.vs-logo{background:#2C2C2C;border-radius:12px;padding:22px 26px}
.vs-logo img{width:100%;max-width:320px;height:auto}
.wave.cmp .script{margin-top:14px;font-size:14px;line-height:1.8;color:var(--ink)}
.wave.cmp .script small{display:block;font-size:12px;color:var(--sub);margin-bottom:2px}
.shots{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1200/950;object-fit:contain;object-position:center top;background:transparent}
.shot figcaption{margin-top:12px;font-size:15px;line-height:1.8}
.shot figcaption b{display:block;font-size:17px;font-weight:700;margin-bottom:2px}
@media (max-width:960px){.vs-intro{grid-template-columns:minmax(0,1fr)}.vs-logo{max-width:420px}}
@media (max-width:620px){.shots{grid-template-columns:minmax(0,1fr);gap:32px}}

/* The header, drawer, footer and red playhead use v21's shared markup. */
.eoto-ai-page .hero{height:auto}
.eoto-ai-page #service{background:var(--paper)}
.eoto-ai-page .svc{gap:0;align-items:stretch}
.eoto-ai-page .box{border:0;border-top:1px solid var(--ink);border-radius:0;padding:22px 0 0;font-size:inherit;line-height:inherit}
.eoto-ai-page .hero .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.eoto-ai-page .hero .btn:hover{background:#fff;color:var(--ink)}
.eoto-ai-page .hero .btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.eoto-ai-page .hero .btn.line:hover{background:var(--ink);color:#fff}
.eoto-ai-page .sec + .sec{border-top:0}
.eoto-ai-page .gnav a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.eoto-ai-page #phDot{top:calc(var(--hh) + 14px)}
.eoto-ai-page.admin-bar #phDot{top:calc(var(--hh) + 46px)}
@media(max-width:782px){.eoto-ai-page.admin-bar #phDot{top:calc(var(--hh) + 60px)}}