@charset "UTF-8";
/* ============================================================
   MegRoom — megroom.jp（事業者向けサイト）
   設計メモ
   - 見出しは明朝（Shippori Mincho）、本文と画面の見本はゴシック（Zen Kaku Gothic New）
   - 色はロゴの青1色を主役に。シアンは「同期中」の点など小さな印だけ
   - 枠線と影は画面の見本にだけ使い、文章は罫線と余白で区切る
   - レイアウトは左揃え、本文の幅は最大 1080px
   ============================================================ */

:root {
  --ink: #1B2026;
  --ink-2: #4A5464;
  --ink-3: #68727F;
  --line: #E2E6EC;
  --line-2: #CBD2DB;
  --paper: #FFFFFF;
  --mist: #F4F6F9;
  --blue: #0B4CF8;
  --blue-deep: #0A3FCB;
  --blue-tint: #EBF0FF;
  --cyan: #02D7D8;
  --ok: #1A8A4E;
  --shadow: 0 1px 2px rgba(27, 32, 38, .04), 0 12px 32px rgba(27, 32, 38, .08);
  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "BIZ UDPMincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --max: 1080px;
  --gutter: 20px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
  font-feature-settings: "palt" 0;
}
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--blue-deep); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 800px; }
.num { font-variant-numeric: tabular-nums; }
.nb { display: inline-block; }

h1, h2, h3 { margin: 0; line-height: 1.45; }
h1, .sec h2, .phead h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; }
h3 { font-weight: 700; }

.lead { font-size: 17px; color: var(--ink-2); }
.note { font-size: 13px; color: var(--ink-3); line-height: 1.7; margin: 0; }
.fine { font-size: 13px; color: var(--ink-3); line-height: 1.7; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px; border: 1px solid var(--blue);
  background: var(--blue); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.3;
  cursor: pointer; text-align: center;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.btn.line { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn.line:hover { background: var(--mist); color: var(--ink); border-color: var(--ink-3); }
.btn.small { padding: 9px 16px; font-size: 14px; }
.btn.is-off, .btn:disabled { background: var(--mist); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.site-header .top { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { height: 22px; width: auto; display: block; }
.brand .for { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; padding-top: 2px; }
.hdr-right { display: flex; align-items: center; gap: 14px; }
.hdr-right .btn { white-space: nowrap; }
.hdr-link { font-size: 14px; color: var(--ink); text-decoration: none; }
.hdr-link:hover { color: var(--blue); }

/* 主要ページのナビ（デスクトップは横並び、スマホはメニューに格納） */
.nav-row { border-top: 1px solid var(--line); }
.nav-row .wrap { display: flex; gap: 2px; }
.nav-row a { padding: 11px 13px 9px; font-size: 14px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-row a:hover { color: var(--ink); }
.nav-row a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 700; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; line-height: 1.2; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before { content: ""; width: 14px; height: 10px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat; }
.menu[open] summary { background: var(--mist); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 90px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; z-index: 40; }
.menu-panel a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); line-height: 1.5; }
.menu-panel a small { display: block; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.menu-panel a:hover { background: var(--mist); }
.menu-panel a[aria-current="page"] { background: var(--blue-tint); color: var(--blue-deep); }
.menu-panel .sep { border-top: 1px solid var(--line); margin: 6px 4px; }
@media (min-width: 900px) { .menu { display: none; } }
@media (max-width: 899px) { .nav-row { display: none; } .hdr-link { display: none; } }
@media (max-width: 520px) { .brand .for { display: none; } .menu summary { padding: 9px 10px; } .menu summary .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .btn.small { padding: 9px 14px; } }

/* ---------- sections ---------- */
.sec { padding-block: 72px; }
.sec.alt { background: var(--mist); }
.sec.tight { padding-block: 48px 64px; }
.sec h2 { font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 14px; }
.sec .intro { margin: 0 0 36px; max-width: 42em; color: var(--ink-2); }
.h-sub { font-size: 20px; font-weight: 700; margin: 44px 0 14px; line-height: 1.5; }
.h-sub:first-child { margin-top: 0; }
@media (max-width: 720px) { .sec { padding-block: 52px; } .sec.tight { padding-block: 36px 48px; } }

/* 見出しの小さな補足（ページ上部） */
.phead { padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.phead h1 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 8px; }
.phead p { margin: 0; color: var(--ink-2); max-width: 46em; }

/* ---------- hero ---------- */
.hero { padding: 56px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 56px; align-items: center; }
@media (max-width: 940px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; } .hero { padding: 40px 0 48px; } }
.hero h1 { font-size: clamp(29px, 4vw, 40px); line-height: 1.45; margin-bottom: 20px; }
.hero .lead { margin: 0 0 28px; max-width: 32em; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .terms { margin: 24px 0 0; font-size: 14px; color: var(--ink-2); max-width: 34em; }
.hero .terms b { color: var(--ink); font-weight: 700; }

/* ---------- 予約表（ホームの主役） ---------- */
.board { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 14px; box-shadow: var(--shadow); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.board-title { font-weight: 700; font-size: 15px; }
.board-date { font-size: 13px; color: var(--ink-3); }
.slots { list-style: none; margin: 0; padding: 0; }
.slot { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-height: 40px; }
.slot time { font-size: 12px; color: var(--ink-3); padding-top: 3px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.slot .lane { border-top: 1px solid var(--line); padding: 4px 0 4px 8px; }
.bk { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-radius: 7px; padding: 6px 10px; font-size: 13px; line-height: 1.4; }
.bk b { font-weight: 700; }
.bk .src { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.bk.direct { background: var(--blue-tint); }
.bk.direct .src { background: var(--blue); color: #fff; }
.bk.platform { background: var(--mist); }
.bk.platform .src { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
.bk.buffer { background: repeating-linear-gradient(135deg, #fff 0 5px, var(--mist) 5px 10px); color: var(--ink-3); font-size: 12px; padding: 4px 10px; }
.bk.open { border: 1px dashed var(--line-2); color: var(--ink-3); background: #fff; }
.board-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(2, 215, 216, .18); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .board .bk.direct { animation: land .5s ease-out both; }
  .board .slot:nth-child(2) .bk { animation-delay: .2s; }
  .board .slot:nth-child(6) .bk { animation-delay: .4s; }
  .board .slot:nth-child(9) .bk { animation-delay: .6s; }
  @keyframes land { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 480px) {
  .board { padding: 14px 12px 12px; }
  .slot { grid-template-columns: 40px minmax(0, 1fr); }
  .bk { flex-direction: column; align-items: flex-start; gap: 3px; }
  .bk.buffer, .bk.open { flex-direction: row; }
}

/* ---------- ホームの各部 ---------- */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; gap: 20px; } }
.door { border-top: 2px solid var(--ink); padding-top: 16px; }
.door h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin-bottom: 4px; }
.door .who { font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }
.door p { margin: 0; color: var(--ink-2); font-size: 15px; }
.door .we { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); padding-left: 12px; border-left: 2px solid var(--blue); line-height: 1.7; }
.door .we b { color: var(--ink); display: block; }

.venues { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0; padding: 0; }
.venues li { font-size: 14px; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 4px 14px; }

.keep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .keep { grid-template-columns: 1fr; gap: 24px; } }
.keep p { margin: 0 0 14px; color: var(--ink-2); }
.keep p:last-child { margin-bottom: 0; }

.steps-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
@media (max-width: 760px) { .steps-mini { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps-mini { grid-template-columns: 1fr; } }
.steps-mini li { counter-increment: s; border-top: 1px solid var(--line-2); padding-top: 12px; font-size: 15px; color: var(--ink-2); }
.steps-mini li::before { content: counter(s); display: block; font-family: var(--font-display); font-size: 22px; color: var(--blue); line-height: 1; margin-bottom: 6px; }
.steps-mini b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; }
@media (max-width: 860px) { .home-grid { grid-template-columns: 1fr; gap: 28px; } }
.news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.news li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.news li > a { font-weight: 700; text-decoration: none; min-width: 7em; }
.news li > a:hover { text-decoration: underline; }
.news li > span { color: var(--ink-2); font-size: 14px; }
.news time { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 4.5em; }

/* ---------- サービス概要 ---------- */
.dg { width: 100%; max-width: 760px; height: auto; display: block; margin: 8px 0 12px; }
.dg text { font-family: var(--font-body); font-size: 14px; fill: var(--ink); }
.dg .box { fill: #fff; stroke: var(--line-2); }
.dg .box.main { fill: var(--blue-tint); stroke: var(--blue); }
.dg .box.soft { fill: var(--mist); stroke: var(--line); }
.dg .arrow { stroke: var(--ink-3); fill: none; stroke-width: 1.5; }
.dg .arrow.blue { stroke: var(--blue); }
.dg .head { fill: var(--ink-3); }
.dg .head.blue { fill: var(--blue); }
.dg .small { font-size: 12px; fill: var(--ink-3); }
.dg .label { font-size: 12px; fill: var(--ink-2); }
.dg .strong { font-weight: 700; }
.dg-cap { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; }

.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }
.bf { border-top: 1px solid var(--line-2); padding: 18px 0 20px; }
.bf h3 { font-size: 17px; margin-bottom: 6px; }
.bf p { margin: 0; color: var(--ink-2); font-size: 15px; }

.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; background: #fff; }
.compare th, .compare td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 13px; color: var(--ink-3); font-weight: 700; background: var(--mist); }
.compare thead th.us { color: var(--blue-deep); }
.compare tbody th { font-weight: 700; width: 26%; }
.compare td.us { background: var(--blue-tint); font-weight: 700; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

/* ---------- 画面の見本（共通の枠） ---------- */
.screen, .browser, .console { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }

.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .phones { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }
.phone { margin: 0; }
.phone .screen { max-width: 300px; margin: 0 auto; border-radius: 26px; }
.ph-bar { background: var(--mist); color: var(--ink); padding: 12px 16px; font-weight: 700; font-size: 14px; text-align: center; border-bottom: 1px solid var(--line); }
.ph-bar.lx { background: #06C755; color: #fff; border-bottom: 0; }
.ph-body { padding: 16px; min-height: 360px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.6; }
.ph-lang { display: flex; gap: 4px; align-self: flex-end; font-size: 11px; }
.ph-lang span { padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); }
.ph-lang .on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ph-label { font-weight: 700; }
.ph-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ph-slots span { text-align: center; padding: 6px 0; border-radius: 6px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ph-slots .x { background: var(--mist); color: var(--ink-3); text-decoration: line-through; }
.ph-slots .sel { background: var(--blue); color: #fff; border-color: var(--blue); }
.ph-sum { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; }
.ph-btn { margin-top: auto; background: var(--blue); color: #fff; text-align: center; border-radius: 8px; padding: 10px; font-weight: 700; }
.ph-btn.green { background: #06C755; }
.ph-field { display: flex; flex-direction: column; color: var(--ink-3); font-size: 11px; }
.ph-field span { color: var(--ink); font-size: 13px; border-bottom: 1px solid var(--line); padding: 3px 0 5px; }
.ph-check { padding-left: 22px; position: relative; }
.ph-check::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 3px; background: var(--blue); }
.ph-note { color: var(--ink-3); font-size: 12px; }
.ph-done { font-size: 18px; font-weight: 700; color: var(--blue-deep); margin-top: 16px; }
.ph-line { background: var(--mist); border-radius: 8px; padding: 10px; }
.phone figcaption { max-width: 300px; margin: 14px auto 0; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.phone figcaption b { display: block; color: var(--ink); font-size: 15px; }

.notes-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 44px; }
.notes-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .notes-row, .notes-row.four { grid-template-columns: 1fr; } }
.notes-row > div { border-top: 1px solid var(--line-2); padding: 16px 0 8px; }
.notes-row h3 { font-size: 16px; margin-bottom: 6px; }
.notes-row p { margin: 0; color: var(--ink-2); font-size: 14px; }

.browser .br-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--mist); border-bottom: 1px solid var(--line); }
.br-dots { display: flex; gap: 6px; }
.br-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.br-url { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 3px 14px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.br-page { padding: 16px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.site-top { display: flex; justify-content: space-between; align-items: center; }
.site-top b { font-size: 16px; }
.room { width: 100%; height: auto; border-radius: 10px; display: block; }
.site-info { display: flex; justify-content: space-between; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.site-name { font-weight: 700; font-size: 17px; }
.site-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.site-tags span { font-size: 12px; background: var(--mist); border-radius: 99px; padding: 2px 10px; }
.site-price { text-align: right; }
.site-price small { display: block; color: var(--ink-3); font-size: 12px; }
.site-price b { font-size: 22px; font-weight: 700; }
.site-cal { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.site-cal > span:first-child { font-weight: 700; margin-right: 4px; }
.site-cal .ok, .site-cal .ng { padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.site-cal .ok { background: var(--blue-tint); border-color: var(--blue-tint); color: var(--blue-deep); font-weight: 700; }
.site-cal .ng { background: var(--mist); color: var(--ink-3); text-decoration: line-through; }

.map { position: relative; height: 170px; overflow: hidden; background: #EAF1E6; }
.map .road { position: absolute; background: #fff; }
.map .r1 { left: -10%; right: -10%; top: 58%; height: 16px; transform: rotate(-8deg); }
.map .r2 { top: -10%; bottom: -10%; left: 38%; width: 12px; transform: rotate(12deg); }
.map .r3 { left: 55%; right: -10%; top: 22%; height: 9px; transform: rotate(20deg); }
.map .pin { position: absolute; left: 50%; top: 40%; width: 26px; height: 26px; margin: -26px 0 0 -13px; background: var(--blue); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0 0 3px #fff; }
.map .pin-label { position: absolute; left: 50%; top: 42%; transform: translateX(-50%); margin-top: 8px; background: #fff; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 700; box-shadow: 0 1px 0 var(--line); }
.mapx .ph-body { min-height: 0; border-top: 1px solid var(--line); }
.mp-name { font-size: 20px; font-weight: 700; }
.mp-cat { color: var(--ink-2); }
.mp-open { color: var(--ok); font-weight: 700; }
.mp-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.mp-actions span { text-align: center; border: 1px solid var(--line); border-radius: 99px; padding: 6px 0; font-weight: 700; font-size: 12px; color: var(--blue); }
.mp-actions .main { background: var(--blue); color: #fff; border-color: var(--blue); }
.mp-link { font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 8px; }

.chat { background: #EEF3F8; gap: 8px; min-height: 0; }
.msg { background: #fff; border-radius: 4px 14px 14px 14px; padding: 8px 11px; max-width: 85%; line-height: 1.55; }
.msg.me { align-self: flex-end; background: #B6F0B0; border-radius: 14px 4px 14px 14px; }
.menu-grid { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-radius: 10px; overflow: hidden; }
.menu-grid span { background: #fff; text-align: center; padding: 12px 0; font-weight: 700; }
.menu-grid span:first-child { background: var(--blue); color: #fff; }

.pay { gap: 9px; min-height: 0; }
.pay-sum { background: var(--mist); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.pay-sum > div:first-child { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 12px; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; }
.pay-total b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-when { font-size: 11px; color: var(--blue-deep); font-weight: 700; }
.pay-wallet { background: var(--ink); color: #fff; text-align: center; border-radius: 8px; padding: 9px; font-weight: 700; }
.pay-or { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 11px; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay-field { border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px; display: flex; flex-direction: column; }
.pay-field span { font-size: 10px; color: var(--ink-3); }
.pay-field b { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay .ph-check { font-size: 11px; line-height: 1.5; }
.pay-by { text-align: center; font-size: 11px; color: var(--ink-3); }

.portal { gap: 14px; }
.pt-search { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-q, .pt-when { flex: 1 1 140px; border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px; }
.pt-go { background: var(--blue); color: #fff; border-radius: 8px; padding: 8px 18px; font-weight: 700; }
.pt-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-filters span { font-size: 12px; border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; }
.pt-filters .on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pt-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .pt-list { grid-template-columns: 1fr; } }
.pt-card { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-img { height: 84px; border-radius: 8px; margin-bottom: 6px; }
.pt-img.a { background: linear-gradient(135deg, var(--blue-tint), #C9D6FF); }
.pt-img.b { background: linear-gradient(135deg, #DDF9F9, #A8EEEE); }
.pt-img.c { background: linear-gradient(135deg, #EDEFF3, #D4DCEB); }
.pt-card b { font-size: 14px; }
.pt-card small { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.pt-card span { font-size: 13px; font-weight: 700; }

.console { margin: 0; }
.c-top { display: flex; justify-content: space-between; align-items: center; background: var(--mist); color: var(--ink); padding: 11px 18px; font-size: 14px; border-bottom: 1px solid var(--line); }
.c-title { font-weight: 700; }
.c-tabs { display: flex; gap: 14px; color: var(--ink-3); }
.c-tabs b { color: var(--ink); border-bottom: 2px solid var(--blue); padding-bottom: 2px; }
.c-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 960px) { .c-body { grid-template-columns: 1fr; } }
.c-scroll { overflow-x: auto; }
.c-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.c-table th, .c-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.c-table th { color: var(--ink-3); font-weight: 700; font-size: 12px; }
.c-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.tag.d { background: var(--blue); color: #fff; }
.tag.pf { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); }
.c-side { border-left: 1px solid var(--line); background: var(--mist); padding: 14px; display: grid; gap: 10px; align-content: start; }
@media (max-width: 960px) { .c-side { border-left: 0; border-top: 1px solid var(--line); } }
.c-card { background: #fff; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; border: 1px solid var(--line); }
.c-card span { font-size: 12px; color: var(--ink-3); }
.c-card b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-bars { background: #fff; border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; font-size: 12px; border: 1px solid var(--line); }
.c-bars > span { color: var(--ink-3); }
.c-bars div { position: relative; height: 22px; background: var(--mist); border-radius: 4px; }
.c-bars i { position: absolute; inset: 0 auto 0 0; background: var(--blue-tint); border-radius: 4px; }
.c-bars em { position: relative; font-style: normal; padding-left: 8px; line-height: 22px; }

/* ---------- 導入イメージ（タブ） ---------- */
.ex-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; border-bottom: 1px solid var(--line-2); }
.ex-tabs button { font-size: 14px; font-weight: 700; padding: 10px 14px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ex-tabs button:hover { color: var(--ink); }
.ex-tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.ex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; padding-top: 28px; }
.ex[hidden] { display: none; }
@media (max-width: 900px) { .ex { grid-template-columns: 1fr; gap: 28px; } }
.ex-copy h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin-bottom: 10px; }
.ex-copy p { color: var(--ink-2); margin: 0 0 16px; }
.ex-copy .note { margin-top: 4px; }
.ex .browser { margin: 0; }

.checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.checks.two { grid-template-columns: 1fr 1fr; gap: 10px 32px; margin-bottom: 0; }
@media (max-width: 760px) { .checks.two { grid-template-columns: 1fr; } }
.checks li { padding-left: 24px; position: relative; color: var(--ink-2); font-size: 15px; }
.checks li::before { content: ""; position: absolute; left: 3px; top: .7em; width: 10px; height: 6px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }

/* ---------- 機能一覧 ---------- */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 960px) { .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fgrid { grid-template-columns: 1fr; } }
.fg { border-top: 2px solid var(--ink); padding: 14px 0 20px; }
.fg h2 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 6px; }
.fg ul { list-style: none; margin: 0; padding: 0; }
.fg li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fg li b { display: block; font-size: 15px; }
.fg li span { font-size: 13px; color: var(--ink-2); }

/* ---------- 料金 ---------- */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.prices > div { padding: 22px 24px 22px 0; }
.prices > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.prices .what { font-size: 14px; color: var(--ink-2); }
.prices .amt { font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.prices .amt small { font-size: 14px; font-weight: 700; margin-left: 3px; }
.prices p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 760px) { .prices { grid-template-columns: 1fr; } .prices > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
@media (max-width: 860px) { .sim { grid-template-columns: 1fr; } }
.sim-in { padding: 26px; border-right: 1px solid var(--line); }
@media (max-width: 860px) { .sim-in { border-right: 0; border-bottom: 1px solid var(--line); } }
.sim label { display: block; font-weight: 700; margin-bottom: 10px; }
.sim-field { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--ink); padding-bottom: 4px; }
.sim-field input { font-size: 34px; font-weight: 700; width: 100%; border: 0; outline: none; background: transparent; font-variant-numeric: tabular-nums; color: var(--ink); padding: 0; min-width: 0; }
.sim-field input:focus-visible { outline: none; }
.sim-field:focus-within { border-bottom-color: var(--blue); }
.sim-field span { font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips button { font-size: 13px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sim-out { padding: 26px; background: var(--mist); }
.sim-out dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; column-gap: 16px; }
.sim-out dt { color: var(--ink-2); font-size: 15px; }
.sim-out dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-out .total { border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 4px; font-size: 16px; color: var(--ink); font-weight: 700; }
.sim-out .total + dd { border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 4px; font-size: 22px; }
.sim-out p { font-size: 12px; color: var(--ink-3); margin: 16px 0 0; line-height: 1.7; }

.acc { border-top: 1px solid var(--line-2); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; font-weight: 700; font-size: 16px; position: relative; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.acc details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.acc .body { padding: 0 0 22px; color: var(--ink-2); max-width: 48em; }
.acc .body > :first-child { margin-top: 0; }
.acc .body p { margin: 0 0 12px; }
.acc .body ol { margin: 0 0 12px; padding-left: 1.5em; }
.acc .body li { margin: 4px 0; }
.acc .body .fine { margin-top: 8px; }
.acc .body .table-wrap { margin: 4px 0 12px; }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: f; }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .flow { grid-template-columns: 1fr; } }
.flow li { counter-increment: f; border-top: 1px solid var(--line-2); padding-top: 12px; }
.flow li::before { content: counter(f); display: block; font-family: var(--font-display); font-size: 22px; color: var(--blue); line-height: 1; margin-bottom: 6px; }
.flow strong { display: block; font-size: 16px; margin-bottom: 2px; }
.flow span { color: var(--ink-2); font-size: 14px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top; }
.table-wrap thead th { background: var(--mist); font-size: 13px; color: var(--ink-2); }
.table-wrap tr:last-child td, .table-wrap tr:last-child th { border-bottom: 0; }
.table-wrap td.num, .table-wrap th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- よくある質問 ---------- */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; font-weight: 700; font-size: 16px; position: relative; line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details p { margin: 0 0 20px; color: var(--ink-2); max-width: 46em; }

/* ---------- デモ ---------- */
.demo { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.demo-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.demo-name { font-size: 22px; font-weight: 700; }
.demo-sub { font-size: 14px; color: var(--ink-2); }
.demo-lang { display: flex; gap: 4px; }
.demo-lang button, .demo-days button, .demo-times button { font-size: 14px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
.demo-lang button[aria-pressed="true"], .demo-days button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.demo-times button[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.demo-times button:disabled { background: var(--mist); color: var(--ink-3); text-decoration: line-through; cursor: not-allowed; border-color: var(--line); }
.demo-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 860px) { .demo-body { grid-template-columns: 1fr; } }
.demo-body > div { padding: 20px 22px; }
.demo-step { font-weight: 700; margin: 6px 0 10px; }
.demo-days, .demo-times { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.demo-times button { min-width: 72px; font-variant-numeric: tabular-nums; }
.demo-hint { color: var(--ink-3); margin: 0; }
.demo-sum { background: var(--mist); padding: 20px 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) { .demo-sum { border-left: 0; border-top: 1px solid var(--line); } }
.demo-when { font-weight: 700; }
.demo-price { display: flex; justify-content: space-between; border-top: 1px solid var(--line-2); padding-top: 10px; }
.demo-price b { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-pol { font-size: 12px; color: var(--ink-2); line-height: 1.7; }
.demo-msg { font-size: 13px; color: var(--blue-deep); font-weight: 700; }

/* ---------- お問い合わせ ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
@media (max-width: 600px) { .cform { grid-template-columns: 1fr; } }
.cform label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.cform .full { grid-column: 1 / -1; }
.cform input, .cform select, .cform textarea { font-weight: 400; font-size: 16px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-tint); }
.cform-foot { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.aside-box { border-top: 2px solid var(--ink); padding-top: 16px; }
.aside-box + .aside-box { margin-top: 28px; }
.aside-box h3 { font-size: 16px; margin-bottom: 8px; }
.aside-box p { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.aside-box ol { margin: 0; padding-left: 1.4em; color: var(--ink-2); font-size: 15px; }
.mail-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-line code { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--ink); background: var(--mist); padding: 4px 10px; border-radius: 6px; user-select: all; }
.copy { font-size: 13px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; color: var(--ink); }
.copy:hover { background: var(--mist); }

/* ---------- お申し込み ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.plan { border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.plan.main { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.plan .what { font-weight: 700; color: var(--ink-2); font-size: 14px; }
.plan .amt { font-size: 30px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.plan .amt small { font-size: 14px; font-weight: 700; margin-left: 2px; }
.plan p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.plan .btn { margin-top: auto; }
table.kv-mini th { width: 22%; background: var(--mist); white-space: nowrap; font-weight: 700; }
@media (max-width: 600px) { table.kv-mini th, table.kv-mini td { display: block; width: 100%; } table.kv-mini th { border-bottom: 0; padding-bottom: 2px; } }

/* ---------- ページ末尾（次に読む＋相談） ---------- */
.pagefoot { border-top: 1px solid var(--line); background: var(--mist); }
.pagefoot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-block: 44px; }
@media (max-width: 860px) { .pagefoot .wrap { grid-template-columns: 1fr; gap: 28px; } }
.nextlink { display: block; text-decoration: none; color: var(--ink); }
.nextlink small { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.nextlink b { font-family: var(--font-display); font-weight: 600; font-size: 22px; display: block; line-height: 1.4; }
.nextlink span { display: block; color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.nextlink:hover b { color: var(--blue); }
.ask h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin-bottom: 8px; }
.ask p { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; }
.ask .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ask .row span { font-size: 14px; color: var(--ink-2); }

.band { background: var(--ink); color: #fff; padding-block: 56px; }
.band h2 { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: clamp(22px, 3vw, 28px); margin-bottom: 10px; }
.band p { color: #C9D1D9; margin: 0 0 24px; max-width: 40em; }
.band p:last-child { margin-bottom: 0; }
.band .btn { background: #fff; color: var(--ink); border-color: #fff; }
.band .btn:hover { background: var(--blue-tint); color: var(--ink); border-color: var(--blue-tint); }

/* ---------- 規約などの文書ページ ---------- */
.doc { padding: 48px 0 80px; }
.doc .wrap { max-width: 800px; }
.doc h1 { font-size: clamp(26px, 3.6vw, 32px); margin-bottom: 8px; }
.doc .meta { color: var(--ink-3); font-size: 14px; margin: 0 0 32px; }
.doc h2 { font-size: 18px; font-weight: 700; margin: 36px 0 8px; }
.doc p, .doc li { font-size: 15px; }
.doc p { margin: 8px 0; }
.doc ol { padding-left: 1.6em; margin: 8px 0; }
.doc ol li { margin: 4px 0; }
.doc table.kv th { width: 30%; background: var(--mist); font-weight: 700; }
@media (max-width: 600px) { .doc table.kv th, .doc table.kv td { display: block; width: 100%; } .doc table.kv th { border-bottom: 0; padding-bottom: 2px; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 40px; font-size: 13px; color: var(--ink-3); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--blue); }

/* ---------- お知らせ（ホーム上部の細い帯） ---------- */
.news-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--mist); }
.news-strip .wrap { display: flex; gap: 8px 24px; align-items: baseline; flex-wrap: wrap; padding-block: 12px; font-size: 14px; }
.news-strip .lbl { font-weight: 700; color: var(--ink-2); }
.news-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.news-strip li { display: flex; gap: 10px; }
.news-strip time { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.cform label .req { font-weight: 500; font-size: 11px; color: var(--blue-deep); margin-left: 6px; }
.cform label { flex-direction: column; }
.cform .lt { display: flex; align-items: center; gap: 6px; }
.cform label .req { margin: 0; }
.scroll-hint { display: none; }
@media (max-width: 960px) { .scroll-hint { display: inline; } }

.sec h2.h-sub { font-size: clamp(21px, 2.6vw, 26px); }

/* ---------- 仕組みの図（HTMLで組む。スマホでは縦に並ぶ） ---------- */
.fmap { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); align-items: start; margin: 12px 0 8px; }
.fm-col { display: flex; flex-direction: column; gap: 10px; }
.fm-step { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.fm-step span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; }
.fm-card { border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; background: #fff; font-weight: 700; font-size: 15px; line-height: 1.5; }
.fm-card small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.fm-card.main { background: var(--blue-tint); border-color: var(--blue); }
.fm-card.soft { background: var(--mist); border-color: var(--line); }
.fm-arrow { align-self: center; height: 2px; background: var(--blue); position: relative; margin: 0 6px; margin-top: 40px; }
.fm-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; border: 6px solid transparent; border-left: 8px solid var(--blue); border-right: 0; }
.fm-sync { align-self: center; font-size: 12px; color: var(--ink-2); padding: 18px 0 18px 22px; position: relative; }
.fm-sync::before { content: ""; position: absolute; left: 8px; top: 2px; bottom: 2px; width: 2px; background: var(--ink-3); }
.fm-sync::after { content: ""; position: absolute; left: 4px; top: 0; width: 10px; height: 100%; background:
  linear-gradient(135deg, transparent 50%, var(--ink-3) 50%) 0 0 / 5px 5px no-repeat,
  linear-gradient(225deg, transparent 50%, var(--ink-3) 50%) 5px 0 / 5px 5px no-repeat,
  linear-gradient(45deg, transparent 50%, var(--ink-3) 50%) 0 100% / 5px 5px no-repeat,
  linear-gradient(315deg, transparent 50%, var(--ink-3) 50%) 5px 100% / 5px 5px no-repeat; }
.fm-down { align-self: center; width: 2px; height: 22px; background: var(--ink-3); position: relative; }
.fm-down::after { content: ""; position: absolute; left: -5px; bottom: -1px; border: 6px solid transparent; border-top: 8px solid var(--ink-3); border-bottom: 0; }
@media (max-width: 860px) {
  .fmap { grid-template-columns: 1fr; gap: 0; }
  .fm-arrow { width: 2px; height: 28px; margin: 10px auto; align-self: center; }
  .fm-arrow::after { right: auto; left: -5px; top: auto; bottom: -1px; border: 6px solid transparent; border-top: 8px solid var(--blue); border-bottom: 0; }
}

.fm-arrow { align-self: start; margin-top: 74px; }
.fm-syncnote { display: none !important; }
@media (max-width: 860px) {
  .fm-arrow { margin: 12px auto; }
  .fm-wide { display: none; }
  .fm-syncnote { display: block !important; margin-top: 8px !important; padding-top: 8px; border-top: 1px solid rgba(11,76,248,.2); color: var(--ink-2) !important; }
}

/* デモ：開始・終了の選択 */
.demo-guide { margin: -4px 0 10px; font-size: 14px; color: var(--ink-2); min-height: 3.4em; line-height: 1.7; }
.demo-times button.can-end { border-color: var(--blue); color: var(--blue-deep); }
.demo-times button.in-range { background: var(--blue-tint); border-color: var(--blue-tint); color: var(--blue-deep); }
.demo-times button.is-start, .demo-times button.is-end { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.demo-times button.taken { text-decoration: line-through; }
.demo-times button:disabled:not(.taken) { text-decoration: none; opacity: .6; }
.demo-reset { font-size: 13px; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; color: var(--ink); }
.demo-legend { font-size: 12px; color: var(--ink-3); margin: -8px 0 10px; }
.ph-slots .rng { background: var(--blue-tint); border-color: var(--blue-tint); color: var(--blue-deep); }

/* ---------- デモ：なぞって選ぶタイムライン ---------- */
.tl { margin: 4px 0 10px; }
.tl-labels { position: relative; height: 18px; font-size: 11px; color: var(--ink-3); margin-right: 24px; font-variant-numeric: tabular-nums; }
.tl-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tl-labels span:first-child { transform: none; }
.tl-grid { display: grid; grid-template-columns: repeat(26, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; margin-right: 24px; }
.tl-grid.off { opacity: .5; pointer-events: none; }
.tl-cell { height: 48px; background: #fff; border-left: 1px dashed var(--line); position: relative; }
.tl-cell.hour { border-left: 1px solid var(--line-2); }
.tl-cell:first-child { border-left: 0; }
.tl-cell:hover:not(.taken):not(.sel) { background: var(--mist); }
.tl-cell.taken { background: repeating-linear-gradient(135deg, var(--mist) 0 4px, #E4E8EE 4px 8px); cursor: not-allowed; }
.tl-cell.sel { background: var(--blue-tint); }
.tl-cell.sel { background: #D6E1FF; }
.tl-cell.edge-a { box-shadow: inset 4px 0 0 var(--blue); }
.tl-cell.edge-b { box-shadow: inset -4px 0 0 var(--blue); }
.tl-cell.edge-a.edge-b { box-shadow: inset 4px 0 0 var(--blue), inset -4px 0 0 var(--blue); }
.tl-cell.sel + .tl-cell.sel { border-left-color: transparent; }
.tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: var(--ink-3); margin: 8px 0 14px; }
.tl-legend .lg { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line-2); display: inline-block; margin-left: 6px; }
.tl-legend .lg:first-child { margin-left: 0; }
.tl-legend .lg.free { background: #fff; }
.tl-legend .lg.sel { background: var(--blue-tint); border-color: var(--blue); }
.tl-legend .lg.taken { background: repeating-linear-gradient(135deg, var(--mist) 0 3px, #E4E8EE 3px 6px); }
.tl-selects { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.tl-selects label { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-3); gap: 4px; }
.tl-selects select { font-size: 16px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); min-width: 110px; }
@media (max-width: 600px) {
  /* スマホは縦のタイムライン（上から下へなぞる） */
  .tl-labels { display: none; }
  .tl-grid { grid-template-columns: 1fr; margin-right: 0; }
  .tl-cell { height: 26px; border-left: 0; border-top: 1px dashed var(--line); padding-left: 60px; }
  .tl-cell.hour { border-top: 1px solid var(--line-2); }
  .tl-cell:first-child { border-top: 0; }
  .tl-cell.hour::before { content: attr(data-t); position: absolute; left: 10px; top: 3px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
  .tl-cell.hour { border-left: 0; }
  .tl-cell.sel.hour::before { color: var(--blue-deep); font-weight: 700; }
  .tl-cell.edge-a { box-shadow: inset 0 4px 0 var(--blue); }
  .tl-cell.edge-b { box-shadow: inset 0 -4px 0 var(--blue); }
  .tl-cell.edge-a.edge-b { box-shadow: inset 0 4px 0 var(--blue), inset 0 -4px 0 var(--blue); }
  .tl-cell.sel + .tl-cell.sel { border-top-color: transparent; }
}
@media (max-width: 600px) { .demo-guide { min-height: 5.1em; } }

.mini-tl { display: grid; gap: 4px; }
.mini-lb { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mini-bar { display: grid; grid-template-columns: repeat(16, 1fr); height: 34px; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.mini-bar i { border-left: 1px dashed var(--line); }
.mini-bar i:first-child { border-left: 0; }
.mini-bar i.x { background: repeating-linear-gradient(135deg, var(--mist) 0 3px, #E4E8EE 3px 6px); }
.mini-bar i.s { background: #D6E1FF; border-left-color: transparent; }
.mini-bar i.a { box-shadow: inset 3px 0 0 var(--blue); }
.mini-bar i.b { box-shadow: inset -3px 0 0 var(--blue); }
.mini-hint { font-size: 11px; color: var(--blue-deep); font-weight: 700; }

/* ---------- 仕組み（3段の流れ＋同期の帯） ---------- */
.dg-cap { font-size: 16px; color: var(--ink-2); margin: 0 0 20px; max-width: 44em; }
.pipe { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr); align-items: stretch; }
.pipe-card { border: 1px solid var(--line-2); border-radius: 12px; padding: 20px 20px 18px; background: #fff; display: flex; flex-direction: column; }
.pipe-card.main { border-color: var(--blue); background: var(--blue-tint); }
.pipe-no { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.pipe-card.main .pipe-no { background: var(--blue); }
.pipe-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 6px; }
.pipe-card p { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.pipe-tags { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.pipe-tags li { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 99px; background: var(--mist); border: 1px solid var(--line); }
.pipe-list { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.pipe-card.main .pipe-list { border-top-color: rgba(11,76,248,.2); }
.pipe-list li { font-size: 13px; padding-left: 18px; position: relative; color: var(--ink); }
.pipe-list li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 8px; height: 5px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.pipe-arrow { align-self: center; justify-self: center; width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 12px solid var(--blue); }
.pipe-sync { margin-top: 16px; display: flex; gap: 16px; align-items: center; border: 1px dashed var(--line-2); border-radius: 12px; padding: 16px 20px; background: var(--mist); }
.pipe-sync p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.pipe-sync b { color: var(--ink); display: block; font-size: 15px; }
.pipe-sync-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line-2); position: relative; }
.pipe-sync-ic span { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--ink-2); }
.pipe-sync-ic span:first-child { top: 15px; }
.pipe-sync-ic span:last-child { top: 23px; }
.pipe-sync-ic span:first-child::after { content: ""; position: absolute; right: -2px; top: -4px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--ink-2); }
.pipe-sync-ic span:last-child::after { content: ""; position: absolute; left: -2px; top: -4px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 6px solid var(--ink-2); }
@media (max-width: 860px) {
  .pipe { grid-template-columns: 1fr; }
  .pipe-arrow { margin: 8px auto; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 12px solid var(--blue); border-bottom: 0; }
  .pipe-sync { align-items: flex-start; }
}

/* 下の区切り線を3枚でそろえる */
.pipe-tags, .pipe-list { height: 76px; align-content: flex-start; }
.pipe-tags { align-items: flex-start; }
.pipe-sync-ic { width: 40px; height: 40px; border: 0; background: none; border-radius: 0; }
@media (max-width: 860px) { .pipe-tags, .pipe-list { height: auto; } }

/* 比較表：スマホでは行ごとに縦に積む */
@media (max-width: 640px) {
  .compare-wrap { border: 0; border-radius: 0; overflow: visible; }
  .compare { min-width: 0; display: block; }
  .compare thead { display: none; }
  .compare tbody, .compare tr { display: block; }
  .compare tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #fff; }
  .compare tbody th, .compare td { display: block; width: auto; border: 0; padding: 10px 14px; }
  .compare tbody th { background: var(--mist); font-size: 14px; border-bottom: 1px solid var(--line); }
  .compare td::before { content: attr(data-l); display: block; font-size: 12px; color: var(--ink-3); font-weight: 700; margin-bottom: 2px; }
  .compare td.us::before { color: var(--blue-deep); }
  .compare td.us { background: var(--blue-tint); }
}
@media (max-width: 600px) { .c-table .c-sp { display: none; } }