/* 色は実物の管理画面（admin-ui/css/style.css）から取った */
:root{
--ground:#ffffff; /* カード・表など、内容を載せる面 */
--page:#f5f8fc; /* ページ全体の紙の色（真っ白より目が疲れにくい） */
--soft:#e8eff8;
--ink:#1c1c1e;
--muted:#586170;
--line:#e3e8ef;
--navy:#1f2c44;
--blue:#2b6cb0;
--blue-ink:#ffffff;
--link:#2b6cb0;
/* ★申し込みボタンだけ、青の反対色のオレンジにする。
青＝信頼・安心（ページ全体の基調）／オレンジ＝行動をうながす色。
反対色どうしなので、ボタンだけが浮き上がって最初に目に入る。
赤は「警告・危険」に読まれるため使わない。 */
--cta:#ED6C00; /* 明るいオレンジ（ボタンの塗り） */
--cta-dark:#CE5D00; /* 押したとき・カーソルを載せたとき */
--cta-ink:#B45309; /* 白い背景に文字として出すとき（読みやすさを保つため濃いめ） */
--cta-soft:#FFF3E6;
--cta-line:#FBD3AE;
/* 色のついた背景（紺・オレンジ）の上に置く文字 */
--on-dark:#ffffff;
/* 紺色の帯の中の、補助的な文字（ロゴの説明語・メニュー） */
--navy-sub:#d7dee9;
--font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
}
/* ★暗い配色へは切り替えない。見る人の画面の設定が暗くても、この明るい配色のまま出す。
（色はすべて上の :root に書いてあるので、背景が透けることはない） */
*{box-sizing:border-box}
/* ★margin:0 が無いとブラウザ既定の 8px が出て、ヘッダーの周りにすき間ができる */
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.85;padding-inline:20px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin-inline:auto}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:.01em}
/* ★日本語の折り返しの決まりごと
word-break:auto-phrase … 文節の切れ目で折り返す（「こ／んなことで」を防ぐ）
▼ 使ってよいのは【見出しと短い文】だけ。
本文に当てると、行の右側が大きく余って読みにくくなる
text-wrap:pretty … ★使わない。Safari では行がかなり短くなり、
本文の右側に大きな空白ができる（iPhone で実害）
＝ 本文は「ふつうの折り返し」にして、幅いっぱいまで文字を入れる */
h1,h2,h3,h4,h5,.bubble,.lbl,.btn,.btn-line{word-break:auto-phrase}
/* よくあるご質問の答えも、助詞の前で切れないように文節で折り返す */
.faq .ans{word-break:auto-phrase}
h2{font-size:clamp(22px,2.8vw,28px);line-height:1.5}
h3{font-size:17px;line-height:1.6}
p{margin:0}
a{color:var(--link)}
.muted{color:var(--muted)}
.btn{display:inline-block;background:var(--cta);color:var(--on-dark);text-decoration:none;font-weight:700;font-size:15px;padding:12px 22px;border-radius:4px}
.btn:hover{background:var(--cta-dark)}
.btn:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
a:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.link-more{font-size:15px;font-weight:500}
/* ヘッダー */
.top{display:flex;align-items:center;gap:18px;padding-block:18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font-weight:700;font-size:17px;line-height:1.25}
.logo small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap}
.top nav{display:flex;gap:17px;font-size:14px;margin-left:auto;flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a:hover{color:var(--link)}
/* 冒頭 */
.hero{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:34px;align-items:start;padding-block:36px 48px}
.hero h1{font-size:clamp(28px,3.9vw,42px);line-height:1.42}
/* 英語版は単語が長く、日本語と同じ大きさだと4行に折れる（1280pxで実測）。少し小さくする */
html[lang="en"] .hero h1{font-size:clamp(24px,2.3vw,28px);line-height:1.3}
/* タイ語・ベトナム語版（/th/・/vi/）：その言語の字を持つ書体を先に置く。見出しの大きさは英語版と同じ考え方 */
html[lang="th"]{--font:"Noto Sans Thai","Noto Sans JP",system-ui,sans-serif}
html[lang="vi"]{--font:"Noto Sans","Noto Sans JP",system-ui,sans-serif}
html[lang="th"] .hero h1,html[lang="vi"] .hero h1{font-size:clamp(26px,2.8vw,34px);line-height:1.35}
/* 現地通貨の目安（ドルの価格の下に小さく） */
.price-local{margin:0;font-size:13px;color:var(--muted)}
.hero .lead{margin-top:16px;color:var(--muted);font-size:15.5px}
.hero .act{margin-top:20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cap{font-size:12px;color:var(--muted);margin-top:10px}
/* 右の管理画面の上端を、見出し「はじめてでも、」の文字の高さにそろえる
囲み文字の高さ 29px ＋ その下の余白 16px ＋ 見出しの行の上の空き 約9px */
.stage-fig{margin:50px 0 0}
/* 本物の画面の再現（常に実物と同じ明るい見た目） */
.shot{border:1px solid #d3d7df;border-radius:6px;overflow:hidden;background:#f4f5f7;box-shadow:0 12px 32px -18px rgba(20,30,50,.35);min-width:0}
/* ★中の再現（横1440px）は position:absolute で浮かせる。
浮かせないと「中身の最小幅＝1440px」が親へ伝わり、ページ全体が
1440px幅になって、狭い画面で右がはみ出す（スマホで発覚） */
.viewport{position:relative;overflow:hidden;background:#f4f5f7;width:100%;min-width:0;aspect-ratio:16/9}
.viewport > .app{position:absolute;top:0;left:0}
.app{display:flex;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;color:#1c1c1e;background:#f4f5f7;line-height:1.5;transform-origin:0 0;font-size:14px}
.app *{box-sizing:border-box}
.a-side{width:220px;flex:none;background:#1f2c44;color:#fff;display:flex;flex-direction:column;padding:16px 12px}
.a-title{font-weight:700;padding:4px 10px 16px;font-size:14px}
.a-nav{display:flex;flex-direction:column;gap:2px}
.a-link{display:flex;align-items:center;gap:8px;color:#cdd6e5;font-size:13px;padding:9px 10px;border-radius:6px}
.a-link.active{background:#2b6cb0;color:#fff;font-weight:700}
.a-link.child{padding-left:24px;font-size:12px}
.a-badge{margin-left:auto;background:#d64545;color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px}
.a-btn{display:inline-block;padding:10px 18px;border-radius:6px;background:#2b6cb0;color:#fff;font-size:14px;white-space:nowrap}
.a-btn.ghost{background:#4a5a75}
.a-btn.off{background:#9db4c9}
.a-rbtn{display:inline-block;padding:5px 12px;border:1px solid #c7c9cf;border-radius:6px;background:#fff;font-size:13px;white-space:nowrap}
.a-logout{margin-top:auto;text-align:center}
.a-main{flex:1;min-width:0;padding:24px 20px}
.a-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.a-head h4{font-size:18px;margin:0}
.a-updated{margin-left:auto;color:#888;font-size:12px}
.a-cards{display:flex;gap:12px;margin-bottom:16px}
.a-card{flex:1;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0001;padding:14px 16px}
.a-card .l{font-size:12px;color:#666}
.a-card .v{font-size:26px;font-weight:700;margin-top:4px}
.a-card .v.alert{color:#c0392b}
.a-pane{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0001;padding:16px;margin-bottom:20px}
.a-pane h5{font-size:14px;margin:0 0 12px;color:#555}
.a-table{width:100%;border-collapse:collapse;font-size:14px}
.a-table th,.a-table td{text-align:left;padding:10px 8px;border-bottom:1px solid #eceef2}
.a-table th{color:#666;font-size:12px;font-weight:700}
.a-st{font-size:12px;font-weight:700;border-radius:999px;padding:2px 10px;white-space:nowrap}
.a-st.normal{background:#eafaf0;color:#1c7a45}
.a-st.partial{background:#fdf3e0;color:#a2690f}
/* 配信管理（content.html）の3列 */
.a-cols{display:grid;grid-template-columns:minmax(160px,1fr) 1.6fr 2.8fr;gap:16px;align-items:start}
.a-cols .a-pane{margin-bottom:0}
.g-row{padding:8px 10px;border:1px solid #e3e8ee;border-radius:8px;margin-bottom:6px}
.g-row.sel{background:#e6f0fa;border-color:#2b6cb0}
.g-name{font-weight:600;font-size:13px}
.g-st{font-size:12px;color:#444;margin-top:1px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle}
.dot.normal{background:#1c7a45}.dot.partial{background:#a2690f}
.sub{font-size:12px;color:#888;margin-top:2px}
.search{border:1px solid #d5d9e0;border-radius:8px;padding:8px 10px;font-size:13px;color:#999;margin-bottom:12px;background:#fff}
.v-card{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid #e3e6eb;border-radius:8px;background:#fff;margin-bottom:8px}
.chk{width:15px;height:15px;border:1.5px solid #8a8f98;border-radius:3px;flex:none;margin:0 4px}
.chk.on{background:#2b6cb0;border-color:#2b6cb0;position:relative}
.chk.on::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.thumb{width:96px;height:54px;border-radius:6px;flex:none}
.v-meta{min-width:0;flex:1}
.v-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-dead{font-size:12px;color:#59636e;margin-top:2px}
.pl-head{display:flex;align-items:baseline;gap:8px}
.pl-head h5{flex:1}
.pl-note{margin:0 0 8px;padding:6px 8px;font-size:12px;line-height:1.5;color:#2c5282;background:#ebf4ff;border-radius:6px}
.pl-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #e3e8ee;border-radius:8px;background:#fff;margin-bottom:6px}
.pl-order{font-weight:700;width:20px;text-align:right;color:#555;flex:none}
.pl-thumb{width:72px;height:40px;border-radius:4px;flex:none}
.pl-title{flex:1;font-size:13px}
.pl-h{color:#999}
.pl-x{color:#c53030;font-size:14px}
.pl-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #e3e8ee;margin-top:10px;padding-top:10px;font-size:13px}
.pl-foot span{display:flex;gap:8px;align-items:center}
/* サムネイルの代わり（動画の1コマに見立てた色面） */
.t1{background:#c9542f}.t2{background:#2f6f8f}.t3{background:#d9b341}.t4{background:#4c7a4f}.t5{background:#6b5a8e}
/* 本文の区切り */
.part{padding-block:72px;border-top:1px solid var(--line)}
/* ★見出しと説明文は横幅いっぱいまで使う。
以前は 640px で止めていたが、右側に大きな空白ができていた */
.part-head{max-width:none;display:grid;gap:12px;margin-bottom:36px}
.part-head p{color:var(--muted)}
.tour{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:start}
.tour + .tour{margin-top:64px}
.tour .txt{display:grid;gap:14px;padding-top:6px}
.tour .txt p{color:var(--muted);font-size:15.5px}
.tour ol{margin:0;padding-left:1.3em;display:grid;gap:6px;font-size:15px}
.tour ol li::marker{color:var(--muted)}
/* 呼び方・配信・表示のカスタム（画面紹介の3つ目） */
.custom-block{margin-top:64px;border-top:1px solid var(--line);padding-top:40px}
.cb-head{max-width:none;display:grid;gap:12px;margin-bottom:8px}
.cb-head h3{font-size:clamp(22px,2.8vw,28px);line-height:1.5}
.cb-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center;
padding:22px 0}
.cb-txt h4{font-size:16px;font-weight:700;margin:0 0 6px}
.cb-txt p{color:var(--muted);font-size:14.5px}
.cb-note{margin-top:14px;color:var(--muted);font-size:12.5px;line-height:1.7}
/* 配信の仕方の小さな絵（常時ループ／センサー連動） */
/* 他社システムとの対比（機能が多い画面 ↔ 使う機能だけの画面） */
.vsmap{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:560px}
.vs-col{border:1px solid var(--line);border-radius:8px;background:var(--ground);padding:14px;display:grid;gap:10px;align-content:start}
.vs-col.is-ours{border:2px solid var(--cta);background:var(--cta-soft)}
.vs-ttl{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center}
.vs-col.is-ours .vs-ttl{color:var(--cta-ink)}
.vs-screen{display:flex;background:#fff;border:1px solid #d3d7df;border-radius:4px;overflow:hidden;height:96px}
.vs-screen .sb{width:28%;background:#6b7584;display:flex;flex-direction:column;gap:3px;padding:6px 5px}
.vs-screen .sb i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
.vs-screen.ours .sb{background:#1f2c44;gap:6px}
.vs-screen.ours .sb i{height:6px}
.vs-screen.ours .sb i.on{background:#2b6cb0}
.vs-screen .mn{flex:1;background:#f4f5f7;padding:6px;display:grid;gap:3px}
.vs-screen .mn.many{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:3px}
.vs-screen .mn.many .tb{grid-column:1/-1;display:flex;gap:2px}
.vs-screen .mn.many .tb u{flex:1;height:7px;border-radius:1px;background:#dfe3e9}
.vs-screen .mn.many b{background:#fff;border:1px solid #e3e8ee;border-radius:2px;
display:flex;flex-direction:column;justify-content:center;gap:2px;padding:3px}
.vs-screen .mn.many b::before,.vs-screen .mn.many b::after{content:"";display:block;height:3px;border-radius:1px;background:#d9dee6}
.vs-screen .mn.many b::after{width:60%}
/* 実物の「端末・グループ管理」に近い形：絞り込みの行＋端末の一覧表 */
.vs-screen .mn.real{grid-template-columns:34% 1fr;align-items:stretch;gap:5px;padding:6px}
.vs-screen .side{display:grid;gap:4px;align-content:start;background:#fff;border:1px solid #e3e8ee;border-radius:3px;padding:4px}
.vs-screen .side g{display:block;height:14px;border:1px solid #e3e8ee;border-radius:2px;background:#fff}
.vs-screen .side g.sel{border-color:#2b6cb0;background:#eef4fb}
.vs-screen .main{display:grid;grid-template-rows:1fr;min-width:0}
.vs-screen .tools{display:flex;gap:4px;align-items:center}
.vs-screen .tools s{height:11px;border-radius:2px;text-decoration:none}
.vs-screen .tools s.sel{width:34%;background:#fff;border:1px solid #c7c9cf}
.vs-screen .tools s.btn{width:30%;background:#2b6cb0}
.vs-screen .pane{background:#fff;border:1px solid #e3e8ee;border-radius:3px;padding:5px;
display:flex;flex-direction:column;gap:5px;justify-content:center}
.vs-screen .pane em{display:flex;align-items:center;gap:4px;height:7px}
.vs-screen .pane em.hd{height:4px;background:#eceef2;border-radius:2px}
.vs-screen .pane em.row u{display:block;height:4px;border-radius:2px;background:#d9dee6;text-decoration:none}
.vs-screen .pane em.row u:first-child{width:42%;background:#c3cad4}
.vs-screen .pane em.row u:nth-child(2){width:26%}
.vs-screen .pane em.row k{margin-left:auto;width:16%;height:6px;border-radius:3px}
.vs-screen .pane em.row k.ok{background:#bfe6d0}
.vs-screen .pane em.row k.ng{background:#f6cfcb}
.vs-note{font-size:12px;line-height:1.6;color:var(--muted);text-align:center}
.vs-col.is-ours .vs-note{color:var(--cta-ink)}
.vs-note b{color:var(--ink)}
.vs-col.is-ours .vs-note b{color:var(--cta-ink)}
.vs-caption{grid-column:1/-1;margin-top:2px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.vs-caption b{color:var(--ink)}
@media (max-width:620px){.vsmap{grid-template-columns:1fr}}
/* 契約プランとシステム側の作り方の対応 */
.planmap{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.15fr);gap:8px 6px;align-items:center;max-width:560px}
.pm-ttl{font-size:12px;font-weight:700;color:var(--muted);padding-bottom:2px}
.pm-plan{border:1.5px solid var(--navy);border-radius:6px;background:var(--ground);padding:11px 12px;
font-size:13.5px;font-weight:700;line-height:1.5}
.pm-arrow{text-align:center;color:var(--cta);font-weight:700}
.pm-note{grid-column:1/-1;margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--muted)}
.pm-note b{color:var(--ink)}
.cb-sub{margin-top:8px;font-size:13.5px;color:var(--muted)}
.pm-set{border:1.5px solid var(--cta);border-radius:6px;background:var(--cta-soft);color:var(--cta-ink);
padding:8px 12px;display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;line-height:1.4}
.pm-set svg{width:62px;height:35px;flex:none}
@media (max-width:620px){
.planmap{grid-template-columns:1fr;gap:4px}
.planmap .pm-ttl:nth-of-type(2){display:none}
.pm-arrow{transform:rotate(90deg);margin:2px 0}
}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:560px}
.mode{border:1px solid var(--line);border-radius:6px;background:var(--ground);padding:12px 10px;
display:grid;gap:3px;justify-items:center;text-align:center}
.mode svg{width:100%;max-width:96px;height:auto}
.mode b{font-size:13.5px}
.mode span{font-size:12px;color:var(--muted);line-height:1.6}
.rename{display:flex;align-items:center;gap:14px;margin:0;max-width:560px}
.rn-col{flex:1;min-width:0;display:grid;gap:6px}
.rn-cap{font-size:12px;font-weight:700;color:var(--muted)}
.rn-card{background:var(--navy);border-radius:6px;padding:12px}
.rn-menu{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.rn-menu li{color:#cdd6e5;font-size:12.5px;line-height:1.6;padding:7px 10px;border-radius:5px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rn-menu li.on{background:var(--blue);color:#fff;font-weight:700}
.rn-menu li.mark{background:rgba(237,108,0,.16);border:1px dashed var(--cta);color:#ffd9b8;padding-block:6px}
.rn-arrow{color:var(--cta);font-size:22px;font-weight:700;flex:none}
/* よく選ばれる3つの機能 */
.pick3{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pick{border:1px solid var(--line);border-radius:6px;background:var(--ground);padding:22px;display:grid;gap:10px;align-content:start}
/* ★2つの絵は【高さ】をそろえる。幅を基準にすると絵の縦横比の差で
見出しの位置がずれる（カメラの絵のほうが縦長なため） */
.pick svg{height:110px;width:auto;max-width:100%;justify-self:start;
font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif}
.pick-note{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
.pick h4{margin:0;font-size:16.5px;font-weight:700}
.pick p{color:var(--muted);font-size:14.5px}
/* すべての機能（折りたたみ） */
/* 仕様表 */
/* 乗り換え */
.switch{background:var(--ground);border-block:1px solid var(--line);margin-inline:-20px;padding-inline:20px}
.switch .part{border-top:0}
/* 狭い画面でも「PCと同じ並び」を保つため、表ごと縮めて見せる箱 */
.fitbox{position:relative;overflow:hidden;width:100%}
.fitbox > .fitin{position:absolute;top:0;left:0;transform-origin:top left}
/* 他社との比較（自社の列を1列だけ強調し、対応状況は記号で見せる） */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;background:var(--ground);min-width:640px}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:14px 16px;text-align:center;vertical-align:middle}
.cmp thead th{background:var(--soft);color:var(--muted);font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}
.cmp tbody th{text-align:left;font-weight:700;font-size:13.5px;color:var(--ink);background:var(--ground);width:34%}
.cmp tbody tr:nth-child(even) th,.cmp tbody tr:nth-child(even) td{background:#fbfcfe}
.cmp .main{display:block;font-weight:700}
.cmp .sub{display:block;margin-top:3px;font-size:12px;font-weight:400;color:var(--muted);line-height:1.6}
.cmp .big{font-size:21px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cmp .unit{font-size:13px;margin-left:2px}
.cmp .mk{font-size:22px;line-height:1}
.cmp .mk.ok{color:var(--cta)}
.cmp .mk.no{color:#b9c0cb}
/* 自社の列：左右の枠と色で1本の柱に見せる */
.cmp .cmp-ours{background:var(--cta-soft);color:var(--cta-ink);
border-left:2px solid var(--cta);border-right:2px solid var(--cta)}
.cmp thead .cmp-ours{background:var(--cta);color:var(--on-dark);border-top:2px solid var(--cta);
border-top-left-radius:6px;border-top-right-radius:6px;font-size:14px}
.cmp thead .cmp-ours .tagline{display:block;font-size:11px;font-weight:700;opacity:.9;margin-bottom:2px}
.cmp tbody tr:last-child .cmp-ours{border-bottom:2px solid var(--cta);
border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.cmp tbody tr:nth-child(even) .cmp-ours{background:#ffeedd}
.cmp .sub{word-break:auto-phrase}
/* 乗り換え */
.switch{background:var(--ground);border-block:1px solid var(--line);margin-inline:-20px;padding-inline:20px}
.switch .part{border-top:0}
.os{width:100%;border-collapse:collapse;font-size:15px;background:var(--ground)}
.os th,.os td{text-align:left;padding:14px 16px;border:1px solid var(--line);vertical-align:top}
.os thead th{font-size:13px;color:var(--muted);font-weight:500;background:var(--soft)}
.os tbody th{font-weight:700;white-space:nowrap}
.os td{color:var(--muted)}
.how{margin-top:40px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px}
.how ol{margin:0;padding-left:1.3em;display:grid;gap:12px}
.how li b{display:block}
.how li span{color:var(--muted);font-size:15px}
/* 上に張り付くヘッダー */
section[id],div[id=switch]{scroll-margin-top:72px}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy);border-bottom:0;margin-inline:-20px;padding-inline:20px;box-shadow:0 1px 10px rgba(23,33,51,.18)}
.topbar .logo{color:var(--on-dark)}
.topbar .logo small{color:var(--navy-sub)}
.topbar nav a{color:var(--navy-sub)}
.topbar nav a:hover{color:var(--on-dark)}
.topbar nav .nav-switch{color:#FFC68A;font-weight:700}
.topbar nav .nav-switch:hover{color:var(--on-dark)}
.topbar .btn-line{border-color:var(--on-dark);color:var(--on-dark);background:transparent}
.topbar .btn-line:hover{background:rgba(255,255,255,.14)}
.topbar .top{border-bottom:0;padding-block:12px}
.top .btn{padding:8px 16px;font-size:14px}
.btn-line{display:inline-block;border:1.5px solid var(--cta);color:var(--cta-ink);text-decoration:none;font-weight:700;font-size:15px;padding:10.5px 20px;border-radius:4px;background:var(--ground)}
.btn-line:hover{background:var(--cta-soft)}
.top .btn-line{padding:7px 14px;font-size:14px}
/* 冒頭の要点と入口の振り分け */
.points{margin:32px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}
.points li{display:flex;align-items:center;gap:6px}
.points li::before{content:"";width:12px;height:7px;border:solid var(--cta);border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-2px)}
.fork{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
/* 区画の終わりに置く申し込み欄 */
.cta-band{margin-top:56px;padding:22px 24px;border:1px solid var(--cta-line);border-radius:6px;background:var(--cta-soft);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cta-band p{font-weight:700}
.cta-band p small{display:block;font-weight:400;font-size:14px;color:var(--muted)}
.cta-band .acts{display:flex;gap:10px;flex-wrap:wrap}
.switch .cta-band{background:var(--cta-soft)}
/* よくある質問 */
.faq{border-top:1px solid var(--ink);background:var(--ground)}
/* よくある質問：文字と「＋」の左右の余白は、上下の余白（18px）とそろえる */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 56px 18px 18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:14px;font-size:22px;font-weight:400;color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq summary:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.faq .ans{padding:0 18px 18px;color:var(--muted)}
/* フォーム */
.form{border:1px solid var(--line);border-radius:6px;padding:24px;display:grid;gap:16px;background:var(--ground)}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.form legend,.form label{font-size:14px;font-weight:700;padding:0}
.form .req{font-size:11px;color:#c0392b;font-weight:700;margin-left:6px}
.form .opt{font-size:11px;color:var(--muted);font-weight:400;margin-left:6px}
.kind{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kind label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:4px;padding:10px 12px;font-weight:500;cursor:pointer}
.kind label:has(input:checked){border-color:var(--cta);background:var(--cta-soft)}
.kind input{accent-color:var(--cta)}
.field{display:grid;gap:6px}
.form input[type=text],.form input[type=email],.form select,.form textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--ground);border:1px solid #b9bfca;border-radius:4px;padding:10px 12px}
.form textarea{min-height:88px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--link);outline-offset:0;border-color:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form button{font:inherit;font-weight:700;font-size:16px;background:var(--cta);color:var(--on-dark);border:0;border-radius:4px;padding:14px;cursor:pointer}
.form button:hover{background:var(--cta-dark)}
.form .note{font-size:12px;color:var(--muted)}
.sent{border:1px solid var(--cta);background:var(--cta-soft);border-radius:4px;padding:12px 14px;font-size:14px}
/* 送信できなかったときの知らせ（赤は「警告」に読まれるので、ここだけ使う） */
.err{border:1px solid #c0392b;background:#fdf0ee;color:#8f2a1f;border-radius:4px;padding:12px 14px;font-size:14px}
.form [aria-invalid="true"]{border-color:#c0392b;outline:2px solid #f2b8b0}
.form button:disabled{opacity:.6;cursor:wait}
.consent{font-size:12.5px;color:var(--muted);line-height:1.7}
/* ボット用の欄：人には見えず、読み上げにも出ない（display:none はボットに見抜かれやすいので使わない） */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
/* スマホの下に固定する申し込みボタン */
.mbar{display:none}
/* お悩み */
.worry{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
/* 課題は「吹き出し＋担当者」で見せる（日本の会社向けLPの定番） */
.bubbles{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
.worry-item{display:grid;gap:6px;justify-items:start}
.bubble{position:relative;width:100%;background:var(--ground);border:1.5px solid var(--line);
border-radius:10px;padding:16px 18px;font-weight:700;font-size:15.5px;line-height:1.7}
.bubble::before,.bubble::after{content:"";position:absolute;left:26px;border:9px solid transparent}
.bubble::before{bottom:-19px;border-top-color:var(--line)}
.bubble::after{bottom:-17px;border-top-color:var(--ground)}
.who{width:34px;height:34px;margin-left:14px}
.worry .answer{margin-top:22px;font-weight:700}
.worry .answer span{display:block;font-weight:400;color:var(--muted);font-size:15px;margin-top:6px}
/* 冒頭の料金（見出しの下・カードは使わず罫線で区切る） */
/* 料金は縦に並べる（配信システム → 端末 → 注釈） */
.pricelist{margin:16px 0 2px;display:grid;grid-template-columns:auto auto;gap:6px 32px;justify-content:start}
.lbl{font-size:11.8px;font-weight:700;color:var(--cta-ink)}
.price{display:flex;align-items:baseline;gap:2px;margin-top:1px;flex-wrap:nowrap;white-space:nowrap;
font-size:14.3px;font-weight:700;color:var(--cta-ink)}
.price .num{font-size:clamp(22.3px,2.25vw,28.3px);line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.price .per{font-size:11.8px;font-weight:700;color:var(--cta-ink);margin-left:3px}
.price .from{font-size:14.3px}
.pnote{margin:6px 0 0;font-size:10.8px;line-height:1.6;color:var(--cta-ink);text-align:left}
/* 見出しの上に置く機能の囲み文字 */
.target{margin:0 0 12px;font-size:13px;font-weight:700;color:var(--navy);line-height:1.6;
padding-left:10px;border-left:3px solid var(--cta)}
.feat-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;line-height:1.5}
.feat-top span{border:1.5px solid var(--cta);color:var(--cta-ink);background:var(--cta-soft);border-radius:3px;padding:3px 12px;font-size:13.5px;font-weight:700}
/* 書き出した CSV の説明文 */
.report-txt{display:grid;gap:12px}
.report-txt ul{margin:0;padding-left:1.2em;color:var(--muted);font-size:15px;display:grid;gap:6px}
.report-note{font-size:13.5px;color:var(--muted)}
/* 書き出した CSV の見本（表計算ソフトで開いた様子） */
.csv-fig{margin:0}
.xl{border:1px solid #c6c9ce;border-radius:5px;overflow:hidden;background:#fff;
font-family:"Segoe UI",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif}
.xl-bar{display:flex;align-items:center;justify-content:space-between;background:#217346;color:#fff;
font-size:12.5px;font-weight:700;padding:8px 12px}
.xl-dots{display:flex;gap:5px}
.xl-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}
.xl-formula{display:flex;align-items:center;gap:10px;padding:6px 10px;background:#f3f3f3;
border-bottom:1px solid #d0d7de;font-size:12px;color:#333}
.xl-name{min-width:46px;padding:3px 6px;background:#fff;border:1px solid #d0d7de;border-radius:2px;font-size:11.5px}
.xl-fx{color:#666;font-style:italic}
.xl-val{color:#333}
.xl-table{width:100%;border-collapse:collapse;font-size:11.5px;background:#fff;min-width:0;color:#1c1c1e;table-layout:fixed}
.xl-table th,.xl-table td{border:1px solid #d0d7de;padding:6px 8px;text-align:left;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.xl-table col.c-date{width:14%}
.xl-table col.c-grp{width:14%}
.xl-table col.c-vid{width:28%}
.xl-table col.c-num{width:10%}
.xl-table col.c-sex{width:20%}
.xl-table thead th{background:#f3f3f3;color:#555;font-weight:600;text-align:center;font-size:11.5px}
.xl-table tbody th{background:#f3f3f3;color:#555;font-weight:600;text-align:center;width:28px;font-size:11.5px}
.xl-table .xl-corner{width:28px}
.xl-table .hd{font-weight:700;background:#fafafa}
.xl-table .sel{outline:2px solid #217346;outline-offset:-2px}
.xl-table .n{text-align:right;font-variant-numeric:tabular-nums}
.xl-table .tot{background:#eef6f1;font-weight:700}
.xl-tabs{display:flex;gap:4px;padding:6px 8px;background:#f3f3f3;border-top:1px solid #d0d7de}
.xl-tab{background:#fff;border:1px solid #d0d7de;border-bottom:0;border-radius:3px 3px 0 0;
padding:4px 12px;font-size:11.5px;color:#217346;font-weight:700}
/* 専用端末 */
.merits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.merit{border:1px solid var(--line);border-radius:6px;padding:22px;display:grid;gap:10px;align-content:start;background:var(--ground)}
.merit h3{font-size:16.5px}
.merit p{color:var(--muted);font-size:15px}
.merit svg{width:100%;max-width:96px;height:auto}
.hw-note{margin-top:24px;font-size:15px;color:var(--muted)}
/* カードの注記は白い枠の外へ（1枚にだけ入れると、ほかのカードに空白が残るため） */
.merit-note{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
/* お問い合わせ */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.contact .intro p{color:var(--muted);margin-top:14px}
.contact .intro ul{margin:18px 0 0;padding-left:1.2em;color:var(--muted);font-size:15px;display:grid;gap:4px}
.contact .box{border:1px solid var(--line);border-radius:6px;padding:24px;display:grid;gap:12px}
.contact .box small{font-size:12px;color:var(--muted)}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;padding-block:26px;border-top:1px solid var(--line);font-size:14px}
.foot-nav a{color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--link)}
footer{border-top:1px solid var(--line);padding-block:24px 36px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* 規約類と著作権表示（他社LPと同じく、1行に並べる。ポリシーは会社HPを新しいタブで開く） */
.foot-legal{display:flex;gap:6px 20px;flex-wrap:wrap}
.foot-legal a{color:inherit;text-decoration:none}
.foot-legal a:hover{color:var(--link);text-decoration:underline}
/* ───────── 画面の幅に合わせた調整（レスポンシブ）─────────
広い画面 1181px〜 左に文章・右に管理画面の2列
中くらい 881〜1180 2列のまま、余白と文字を少し詰める
せまい 〜880px 1列に積む（文章 → 管理画面）
スマホ 〜700px 画面下に申し込みボタンを固定、上のメニューは隠す
小さい端末 〜520px 表と料金を縦に積み、ボタンを横幅いっぱいに
★「〜」の指定は「その幅【以下】」に当たる。上から順に上書きされる */
@media (max-width:1180px){
.hero{grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:28px}
.stage-fig{margin-top:46px}
.points{margin-top:24px;gap:6px 18px;font-size:13.5px}
.wrap{max-width:100%}
}
@media (max-width:1024px){
.hero{grid-template-columns:1fr 1fr;gap:24px}
.stage-fig{margin-top:40px}
.points{margin-top:18px}
.tour,.how,.contact,.worry{gap:28px}
.merits{gap:14px}
}
@media (max-width:620px){
.bubbles{grid-template-columns:1fr}
}
@media (max-width:880px){
.hero,.tour,.how,.contact,.worry,.merits,.cb-row,.pick3{grid-template-columns:1fr}
.cb-row{gap:16px;padding:20px 0}
.hero{gap:26px;padding-block:28px 40px}
.stage-fig{margin-top:4px} /* 1列になるので、ずらしは不要 */
.points{margin-top:14px}
.worry{gap:20px}
.part{padding-block:56px}
.top nav{margin-left:0;gap:16px;font-size:13px}
.logo small{display:none}
}
/* ★701〜1023px ではメニューを全部並べるとヘッダーが2段に折れる（実測で約975pxまで折れる。日英とも）。
※言語の切り替えをヘッダーに足すと約1055pxまで折れた（2026-10-10 に試して、切り替えは置かないことにした）。
「乗り換えをご検討の方」だけ残す（2つ目の読み手の入口・色付きで強調しているため）。
ほかの項目はフッターのメニューにある。700px以下はメニューごと隠す（下の指定） */
@media (max-width:1023px){
.top nav a:not(.nav-switch){display:none}
.top nav{margin-left:auto}
}
@media (max-width:700px){
.mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;
background:var(--ground);box-shadow:0 -2px 12px rgba(23,33,51,.12);
border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.mbar a{flex:1;text-align:center;padding-inline:8px}
body{padding-bottom:78px} /* 下の固定ボタンに本文が隠れないようにする */
.top nav{display:none}
.topbar .btn-line{display:none} /* ヘッダーは「試用を申し込む」1つに絞る */
.kind,.two{grid-template-columns:1fr}
h2{font-size:21px}
.part{padding-block:44px}
.hero h1{font-size:30px}
.points{font-size:13.5px}
}
@media (max-width:560px){
.rename{flex-direction:column;align-items:stretch}
.rn-col{width:100%}
.rn-arrow{align-self:center;transform:rotate(90deg)}
}
@media (max-width:520px){
.pricelist{grid-template-columns:1fr;gap:10px}
/* ボタンは縦に積む（横に2つ並べると文字が折り返して押しにくい） */
.hero .act{flex-direction:column;align-items:stretch;gap:10px;width:100%}
.hero .act .btn,.hero .act .btn-line{text-align:center;padding-inline:12px}
.cta-band .acts{flex-direction:column;align-items:stretch;width:100%}
.cta-band{padding:18px}
.cta-band .acts{width:100%}
.cta-band .acts a{flex:1;text-align:center}
.form,.contact .box{padding:18px}
.faq summary{padding:16px 46px 16px 14px}
.faq summary::after{right:14px;top:12px}
.faq .ans{padding:0 14px 16px}
.worry li{padding:14px 12px 14px 38px}
.worry li::before{left:12px}
.merit{padding:18px}
}
/* ───────── 補助クラス（HTML の style 属性の代わり）─────────
★CSP で style 属性を禁止しているため、HTML に style="…" を書かない。
余白を1か所だけ変えたいときは、ここにクラスを足す。
ファイルの最後に置くのは、同じ強さの指定より後ろで勝たせるため */
.app.is-1440{width:1440px;min-height:810px}
.u-m0{margin:0}
.u-mb0{margin-bottom:0}
.u-mt4{margin-top:4px}
.u-ml-auto{margin-left:auto}
.u-bt0{border-top:0}
/* 英語版の見出し: 行の区切りは
で決め、1行の中では折らない（#658） */
.nw{white-space:nowrap}
/* ブラウザの翻訳中（main.js が html に is-translated を付ける）は、文の長さが変わるので折り返しを許す */
html.is-translated .nw,html.is-translated .logo small{white-space:normal}
html.is-translated .price{white-space:normal;flex-wrap:wrap}
/* ── 運用ガイド（/guide/・#658） ─────────────────────────────────
★本文の幅は 760px にして【真ん中に置く】（左寄せの上限幅は右に大きな空白を作る＝手引きの落とし穴）
★表は横にはみ出させない（スマホでは文字を小さくし、折り返す） */
a.logo{color:inherit;text-decoration:none}
.g-article{max-width:760px;margin-inline:auto;padding-block:32px 72px}
.crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs a{color:var(--muted)}
.g-article h1{font-size:clamp(25px,3vw,32px);line-height:1.45;margin-top:14px;word-break:keep-all;overflow-wrap:anywhere}
/* ★記事の題名は keep-all ＋ （build_guide.py の h1 の ^）で、折れる所を決める。auto-phrase だと「人感／センサー」のように切れた */
/* 副題は ^ を書かないので、文節で折る（keep-all のままだと「6つの手／順」のように1字だけ落ちた・2026-10-26） */
.g-article h1 .g-sub{display:block;font-size:.62em;font-weight:500;color:var(--muted);margin-top:4px;word-break:auto-phrase}
.g-meta{font-size:13px;color:var(--muted);margin-top:10px}
.g-lead{margin-top:24px;padding:18px 20px;background:var(--ground);border-left:4px solid var(--blue);border-radius:4px;font-weight:500}
.toc{margin-top:28px;padding:16px 20px 18px;background:var(--soft);border-radius:6px}
.toc b{display:block;font-size:14px}
.toc ol{margin:6px 0 0;padding-left:1.5em}
.toc a{color:var(--link)}
.g-article h2{font-size:clamp(20px,2.4vw,24px);line-height:1.5;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);scroll-margin-top:84px}
.g-article p{margin:14px 0 0}
.g-article ul,.g-steps{margin:14px 0 0;padding-left:1.4em}
.g-article li+li{margin-top:6px}
.g-steps b{color:var(--ink)}
.g-check{list-style:none;padding-left:0 !important}
.g-check li{padding-left:1.6em;position:relative}
.g-check li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border:2px solid var(--blue);border-radius:3px}
.g-table{width:100%;border-collapse:collapse;margin-top:16px;background:var(--ground);font-size:15px;line-height:1.7}
.g-table th,.g-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.g-table thead th{background:var(--soft);font-weight:700;word-break:auto-phrase}
.g-fig{margin:20px 0 0}
.g-fig .cap{font-size:13px;color:var(--muted);margin-top:8px}
/* LP から運用ガイドへの案内は「注記」と同じ見た目・位置にする（LP の中で目立たせない・2026-10-11 依頼者） */
.guide-note{margin:14px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}
.guide-note a,.pick-note a{color:inherit}
/* 乗り換えの章は「見出し｜3段階」の2列。案内は3段階の列の下へ（1列のときはその列） */
.how .guide-note{grid-column:-2/-1;margin-top:-26px}
@media (max-width:1024px){.how .guide-note{margin-top:-14px}}
/* 横並びの図：図ごと中央にそろえ、説明文はそれぞれの絵の下に置く */
.g-fig .modes-cap{margin-inline:auto}
.modes-cap .cap{text-align:center}
/* 前の節と話がつながる見出しは、区切り線を引かない */
.g-article h2.g-cont{border-top:0;padding-top:0;margin-top:44px}
.g-article .faq{margin-top:16px}
.g-mid{margin-top:40px}
.g-article > .cta-band:last-of-type{margin-top:56px}
.g-related{margin-top:56px}
.g-related h2{margin-top:0}
.g-related ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.g-related li+li{margin-top:0}
.g-related a{display:block;padding:16px 18px;background:var(--ground);border:1px solid var(--line);border-radius:6px;color:var(--ink);text-decoration:none}
.g-related a:hover{border-color:var(--blue)}
.g-related b{display:block;color:var(--link)}
.g-related span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.g-related small{display:block;font-size:12px;color:var(--muted);margin-top:6px}
.g-list{margin-top:28px}
@media (max-width:620px){
.g-table{font-size:14px}
.g-table th,.g-table td{padding:8px}
}
/* 運用ガイド：今いる場所（ヘッダー）・見出し画像・一覧のサムネイル */
.topbar nav .nav-current{color:var(--on-dark);font-weight:700;border-bottom:2px solid var(--cta)}
@media (max-width:1023px){.top nav a.nav-current{display:inline}}
.g-eye{display:block;width:100%;height:auto;margin-top:20px;border-radius:6px}
.g-list a{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center}
.g-list img{width:100%;height:auto;border-radius:4px}
@media (max-width:560px){.g-list a{grid-template-columns:1fr}}
.g-note{font-size:13px;color:var(--muted)}
/* 折らない見出し（.nw）は、言葉の長いタイ語・ベトナム語ではスマホの幅に収まらない。狭い画面だけ折ってよい */
@media (max-width:620px){html[lang="th"] .part-head .nw,html[lang="vi"] .part-head .nw{white-space:normal}}
/* 320px 前後の小さなスマホ：英語の見出しも収まらないので折ってよい。ヘッダーのボタンも詰める */
@media (max-width:360px){
.part-head .nw{white-space:normal}
.topbar .btn{padding-inline:12px;font-size:13px}
}