:root{--navy:#1b2430;--navy2:#222c3a;--line:rgba(255,255,255,.12);--accent:#d9480f;--accent-d:#b93a08;--accent-l:#ff8a4c;--ink:#1d2733;--sub:#5d6b7c;--bd:#e3e8ee;--soft:#f3f5f8;--w:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--navy);color:var(--ink);font-family:system-ui,"Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;font-size:15px;line-height:1.85;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p,figure{margin:0}
code{background:var(--soft);padding:1px 6px;border-radius:4px;font-size:.92em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
.wrap.narrow{max-width:900px}
.br-m{display:none}
/* 入口タブ */
.top-tabs{background:#10161e;color:#aab4c2;font-size:12px}
.top-tabs-in{max-width:var(--w);margin:0 auto;padding:0 32px;height:38px;display:flex;align-items:center;gap:22px}
.tt-label{color:#fff;font-weight:700;letter-spacing:.1em;white-space:nowrap}
.tt-links{display:flex;gap:4px;flex:1;overflow:hidden}
.tt-links a{display:flex;align-items:center;gap:6px;padding:0 12px;height:38px;white-space:nowrap;border-bottom:2px solid transparent}
.tt-links a:hover{color:#fff;border-bottom-color:var(--accent)}
.d{width:8px;height:8px;border-radius:50%;display:inline-block}
.d1{background:#4aa3ff}.d2{background:#b184ff}.d3{background:#ff8a4c}.d4{background:#3ddc97}.d5{background:#7289da}
.tt-r{display:flex;gap:18px;margin-left:auto;white-space:nowrap}
.tt-r a:hover{color:#fff}
/* お知らせ帯 */
.notice{background:#fff3ec;color:#7a2d08;font-size:13px}
.notice-in{max-width:var(--w);margin:0 auto;padding:9px 32px;display:flex;gap:10px;align-items:center}
.notice-in i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.notice-in a:hover{text-decoration:underline}
/* ヘッダー(浮く) */
.hd{position:sticky;top:10px;z-index:50;padding:0 20px;margin-bottom:-74px;pointer-events:none}
.hd-in{pointer-events:auto;max-width:var(--w);margin:10px auto 0;height:64px;padding:0 14px 0 24px;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(10,16,24,.28);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:9px;white-space:nowrap;color:var(--ink)}
.brand b{font-size:22px;letter-spacing:.14em}
.brand span:last-child{color:var(--sub);font-size:12px;letter-spacing:.1em}
.mark{display:inline-block;width:5px;height:22px;background:var(--accent)}
.gnav{display:flex;align-items:center;gap:2px}
.gnav>a{padding:8px 11px;font-size:13px;font-weight:700;color:#3a4756;border-radius:8px;white-space:nowrap}
.gnav>a:hover{background:var(--soft);color:var(--accent)}
.gnav>a[aria-current="page"]{color:var(--accent)}
.gnav-cta{display:flex;gap:8px;margin-left:10px}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:9px 20px;border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.04em;white-space:nowrap;border:2px solid transparent;transition:background .2s,color .2s,transform .2s}
.pill-go{background:var(--accent);color:#fff}
.pill-go:hover{background:var(--accent-d);transform:translateY(-1px)}
.pill-line{border-color:#c9d2dc;color:#3a4756;background:#fff}
.pill-line:hover{border-color:var(--accent);color:var(--accent)}
.pill-line-d{border-color:var(--accent);color:var(--accent);background:#fff}
.pill-line-d:hover{background:var(--accent);color:#fff}
.pill-xl{padding:16px 46px;font-size:16px}
.pill.wide{display:flex;width:100%}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--bd);border-radius:8px;cursor:pointer;padding:0;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ヒーロー */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(27,36,48,.78),rgba(27,36,48,.94)),url(/assets/hero-1.jpg) center/cover}
.hero-in{position:relative;max-width:var(--w);margin:0 auto;padding:150px 32px 120px;text-align:center}
.hero-tag{display:inline-block;font-size:12px;letter-spacing:.2em;color:var(--accent-l);border:1px solid rgba(255,138,76,.5);padding:5px 16px;border-radius:999px}
.hero h1{margin-top:22px;font-size:clamp(34px,5.4vw,64px);line-height:1.3;letter-spacing:.06em}
.hero-sub{margin-top:18px;color:#cfd8e3;font-size:clamp(14px,1.5vw,17px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:48px auto 0;max-width:980px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats li{padding:22px 10px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.stats li:first-child{border-left:0}
.sl{font-size:12px;color:#aab6c5;letter-spacing:.1em}
.sn{font-size:15px}
.sn b{font-size:44px;line-height:1.2;color:#fff;margin-right:3px}
.sd{font-size:12px;color:#aab6c5}
.hero-cta{margin-top:40px}
.foot-s{margin-top:18px;font-size:11px;color:#8b98a8}
/* シート */
.sheet{position:relative;background:#fff;border-radius:34px 34px 0 0;margin-top:-34px;padding:56px 0 20px}
.sheet.flat{margin-top:-30px;padding:64px 0 80px;min-height:320px}
.sheet section{margin-bottom:84px}
.sheet section:last-child{margin-bottom:40px}
/* ピックアップ */
.pickup{position:relative}
.car-ctl{position:absolute;right:32px;top:-6px;display:flex;gap:8px}
.car-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--bd);background:#fff;font-size:22px;line-height:1;color:var(--ink);cursor:pointer}
.car-btn:hover{border-color:var(--accent);color:var(--accent)}
.car{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 0 8px;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.pk{flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-width:230px}
.pk-img{position:relative;aspect-ratio:16/10;border-radius:14px;background-size:cover;background-position:center;overflow:hidden;transition:transform .3s}
.pk:hover .pk-img{transform:translateY(-3px)}
.pk-img em{position:absolute;left:10px;top:10px;font-style:normal;font-size:11px;font-weight:700;background:var(--accent);color:#fff;padding:2px 10px;border-radius:999px}
.pk-1{background-image:linear-gradient(135deg,rgba(27,36,48,.25),rgba(27,36,48,.65)),url(/assets/hero-1.jpg)}
.pk-2{background-image:linear-gradient(135deg,rgba(27,36,48,.25),rgba(27,36,48,.65)),url(/assets/hero-2.jpg)}
.pk-3{background-image:linear-gradient(135deg,rgba(27,36,48,.25),rgba(27,36,48,.65)),url(/assets/hero-3.jpg)}
.pk-4{background-image:linear-gradient(135deg,rgba(27,36,48,.25),rgba(27,36,48,.65)),url(/assets/about.jpg)}
.pk-lab{margin-top:8px;font-size:12px;color:var(--accent);font-weight:700}
.pk-tt{font-size:14px;font-weight:700;line-height:1.6}
.pk time{font-size:12px;color:var(--sub)}
/* 見出し */
.sec-tag{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.14em;justify-content:center}
.sec-tag i{width:8px;height:8px;background:var(--accent);border-radius:2px;transform:rotate(45deg)}
.sec-h{margin-top:8px;text-align:center;font-size:clamp(22px,3vw,32px);line-height:1.5;letter-spacing:.05em}
.sec-h span{color:var(--accent)}
.lead{margin-top:14px;text-align:center;color:var(--sub)}
/* 特長 */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.fcard{background:var(--soft);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.fcard:nth-child(n+4){grid-column:span 1}
.fic{width:54px;height:54px;border-radius:14px;background:var(--navy);display:grid;place-items:center;color:var(--accent-l);font-weight:700;font-size:20px}
.f-lang:before{content:"文"}.f-free:before{content:"¥0"}.f-docs:before{content:"</>"}.f-safe:before{content:"盾"}.f-credit:before{content:"礼"}
.f-free:before,.f-docs:before{font-size:15px}
.ftag{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.16em;margin-top:6px}
.fcard h3{font-size:18px;line-height:1.5}
.fcard p:not(.ftag){font-size:14px;color:var(--sub)}
.more-l{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--accent)}
.more-l:after{content:" ›"}
.more-l:hover{text-decoration:underline}
/* 安全 */
.panel-blue{background:var(--navy);color:#fff;border-radius:28px;padding:56px 44px}
.panel-blue .sec-tag{color:var(--accent-l)}
.panel-blue .sec-h span{color:var(--accent-l)}
.panel-blue .lead{color:#b8c3d1}
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.pt{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;padding:22px}
.pn{font-size:26px;font-weight:700;color:var(--accent-l);letter-spacing:.06em}
.pt h3{font-size:16px;margin:4px 0 6px}
.pt p{font-size:13px;color:#b8c3d1;line-height:1.8}
.btn-row{display:flex;gap:12px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.panel-blue .pill-line-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.panel-blue .pill-line-d:hover{background:#fff;color:var(--navy)}
/* プラン */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;align-items:stretch}
.plan{position:relative;border:1px solid var(--bd);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;gap:10px;background:#fff}
.plan-rec{border:2px solid var(--accent);box-shadow:0 12px 36px rgba(217,72,15,.12)}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:3px 16px;border-radius:999px}
.plan-n{text-align:center;font-weight:700;font-size:17px}
.price{text-align:center;font-size:14px}
.price b{font-size:46px;line-height:1.2;margin-right:2px}
.price small{color:var(--sub)}
.plan ul{display:flex;flex-direction:column;gap:7px;margin:8px 0 14px;font-size:14px}
.plan li{padding-left:22px;position:relative}
.plan li:before{content:"";position:absolute;left:3px;top:.62em;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.plan .pill{margin-top:auto}
.foot-d{margin-top:20px;font-size:12px;color:var(--sub);text-align:center}
.foot-d a{color:var(--accent);text-decoration:underline}
/* 流れ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.step{position:relative;background:var(--soft);border-radius:18px;padding:28px 26px}
.step:not(:last-child):after{content:"›";position:absolute;right:-18px;top:50%;transform:translateY(-50%);font-size:30px;color:var(--accent);z-index:1}
.sn2{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;background:var(--accent);color:#fff;padding:2px 12px;border-radius:999px}
.step h3{margin:12px 0 6px;font-size:18px}
.step p{font-size:14px;color:var(--sub)}
/* ニュース */
.news{margin-top:32px;border-top:1px solid var(--bd)}
.news a{display:flex;align-items:center;gap:16px;padding:18px 8px;border-bottom:1px solid var(--bd)}
.news a:hover{background:var(--soft)}
.news time{color:var(--sub);font-size:13px;white-space:nowrap}
.news .tag{font-size:11px;font-weight:700;color:var(--accent);border:1px solid var(--accent);padding:1px 12px;border-radius:999px;white-space:nowrap}
.news .tt{flex:1;font-size:14px}
.news i{font-style:normal;color:var(--accent);font-size:20px}
/* FAQ */
.faqs{margin-top:32px;max-width:900px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:12px}
.faqs details{border:1px solid var(--bd);border-radius:14px;background:#fff}
.faqs summary{list-style:none;cursor:pointer;padding:18px 54px 18px 18px;position:relative;font-weight:700;display:flex;gap:12px;align-items:baseline}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary:after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--accent);font-weight:400}
.faqs details[open] summary:after{content:"−"}
.q{flex:none;color:var(--accent);font-size:18px}
.faqs details p{padding:0 22px 20px 48px;font-size:14px;color:var(--sub)}
/* ガイド */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.gc{display:flex;flex-direction:column;gap:4px;border:1px solid var(--bd);border-radius:18px;padding:26px;transition:border-color .2s,transform .2s}
.gc:hover{border-color:var(--accent);transform:translateY(-3px)}
.gi{width:46px;height:46px;border-radius:12px;background:var(--soft);display:grid;place-items:center;color:var(--accent);font-weight:700;margin-bottom:8px}
.g1:before{content:"声"}.g2:before{content:"API"}.g3:before{content:"VR"}
.g2:before,.g3:before{font-size:13px}
.gc b{font-size:16px}
.gc small{color:var(--sub);font-size:13px}
/* CTA */
.cta-band{background:linear-gradient(120deg,var(--navy) 30%,#2a3a52);color:#fff;text-align:center;padding:72px 24px}
.cta-in h2{font-size:clamp(24px,3.2vw,36px);line-height:1.5;letter-spacing:.06em}
.cta-in p{margin-top:12px;color:#c3cdda}
.cta-in p:last-child{margin-top:28px}
/* サブページ */
.pg-hero{background:var(--navy);color:#fff;padding:150px 0 90px}
.pg-hero .k{font-size:12px;font-weight:700;letter-spacing:.34em;color:var(--accent-l);margin-bottom:10px}
.pg-hero h1{font-size:clamp(28px,4vw,44px);letter-spacing:.06em}
.pg-hero .lead{text-align:left;color:#b8c3d1}
.chips{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.chips a{border:1px solid var(--line);padding:5px 18px;border-radius:999px;font-size:13px}
.chips a:hover{background:var(--accent);border-color:var(--accent)}
.list .item{display:grid;grid-template-columns:260px 1fr;gap:32px;padding:34px 0;border-top:1px solid var(--bd)}
.list .item:last-child{border-bottom:1px solid var(--bd)}
.item h2{font-size:22px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tags span{font-size:11px;font-weight:700;background:var(--soft);padding:2px 12px;border-radius:999px;color:var(--sub)}
.tags span:first-child{background:var(--navy);color:#fff}
.item-r ul{margin:10px 0;display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--sub)}
.item-r li{padding-left:16px;position:relative}
.item-r li:before{content:"";position:absolute;left:2px;top:.8em;width:6px;height:6px;background:var(--accent);border-radius:50%}
.links{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.lnk{color:var(--accent);font-weight:700;font-size:14px}
.lnk:hover{text-decoration:underline}
.about{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.about-body p{margin-bottom:16px}
.about-body a{color:var(--accent);text-decoration:underline}
.big{font-size:20px;font-weight:700;line-height:1.8}
.ph{margin-top:24px}.ph img{border-radius:16px}.ph figcaption{font-size:11px;color:var(--sub);margin-top:6px}
.panel{background:var(--soft);border-radius:18px;padding:26px}
.lab{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.14em}
.panel ul{margin:10px 0 16px;display:flex;flex-direction:column;gap:6px}
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{display:block;border:1px solid var(--bd);border-radius:18px;padding:28px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card h2{font-size:20px;margin:6px 0}
.card p:last-child{font-size:14px;color:var(--sub)}
.small{margin-top:26px;font-size:13px;color:var(--sub)}
/* フッター */
.ft-share{background:#fff;display:flex;gap:14px;justify-content:center;align-items:center;padding:20px;font-size:13px;border-top:1px solid var(--bd)}
.ft-share span{font-weight:700;letter-spacing:.14em;color:var(--sub)}
.ft-share a{border:1px solid var(--bd);padding:4px 20px;border-radius:999px;color:var(--ink)}
.ft-share a:hover{border-color:var(--accent);color:var(--accent)}
.ft-dark{background:#10161e;color:#aab4c2;padding:56px 0 34px}
.ft-in{max-width:var(--w);margin:0 auto;padding:0 32px}
.ft-h{font-size:13px;font-weight:700;color:#fff;letter-spacing:.1em;margin-bottom:12px}
.svc-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:34px}
.sp{border:1px solid rgba(255,255,255,.2);padding:6px 20px;border-radius:999px;color:#fff;font-size:13px}
.sp:hover{background:var(--accent);border-color:var(--accent)}
.ft-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:30px;border-top:1px solid var(--line)}
.ft-cols ul{display:flex;flex-direction:column;gap:8px;font-size:13px}
.ft-cols a:hover{color:#fff;text-decoration:underline}
.ft-note{margin-top:34px;font-size:12px;line-height:1.8}
.ft-copy{margin-top:10px;font-size:11px;color:#7d8998}
.ft-copy a{text-decoration:underline}
/* アニメ */
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* タブレット */
@media (max-width:1100px){
  .gnav>a{padding:8px 7px;font-size:12px}
  .gnav-cta .pill-line{display:none}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .pts{grid-template-columns:repeat(2,1fr)}
  .pk{flex-basis:calc((100% - 20px)/2)}
}
/* スマホ */
@media (max-width:860px){
  .wrap,.top-tabs-in,.notice-in,.ft-in{padding-left:18px;padding-right:18px}
  .br-m{display:inline}
  .tt-links a:nth-child(n+3),.tt-r a:first-child{display:none}
  .tt-links{flex:none}
  .tt-r{margin-left:auto}
  .hd{padding:0 10px}
  .hd-in{padding:0 8px 0 16px;border-radius:12px;position:relative}
  .burger{display:block}
  .gnav{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(10,16,24,.3);flex-direction:column;align-items:stretch;padding:12px;gap:0}
  .gnav.open{display:flex}
  .gnav>a{padding:13px 12px;font-size:14px;border-bottom:1px solid var(--bd);border-radius:0}
  .gnav-cta{margin:12px 0 2px;flex-direction:column}
  .gnav-cta .pill-line{display:inline-flex}
  .hero-in{padding:120px 18px 90px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats li:nth-child(3){border-left:0}
  .stats li:nth-child(n+3){border-top:1px solid var(--line)}
  .sn b{font-size:36px}
  .sheet{padding-top:44px;border-radius:26px 26px 0 0}
  .car-ctl{display:none}
  .pk{flex-basis:78%}
  .fgrid,.plans,.steps,.gcards,.cards2,.pts{grid-template-columns:1fr}
  .step:not(:last-child):after{content:"⌄";right:50%;top:auto;bottom:-24px;transform:translateX(50%)}
  .panel-blue{padding:38px 20px;border-radius:22px}
  .plans{gap:30px}
  .list .item{grid-template-columns:1fr;gap:10px}
  .about{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:repeat(2,1fr)}
  .news a{flex-wrap:wrap;gap:6px 10px}
  .news .tt{flex:1 1 100%;order:3}
  .news i{display:none}
  .pg-hero{padding:120px 0 64px}
}