/* すべて .ob の中だけに効くスタイル（既存サイトのページに貼り付けても干渉しにくい） */
body { margin:0; background:#F5F9FA; }
.ob {
  --ink:#182B52; --slot:#F28A1F; --slot-text:#B9530A; --slot-tint:#FEF1E1; --paper:#F5F9FA; --white:#FFFFFF; --sub:#56627A; --line:#D9E4EA;
  color:var(--ink); background:var(--paper);
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  font-size:16px; line-height:1.85; letter-spacing:.02em; -webkit-font-smoothing:antialiased;
}
.ob *, .ob *::before, .ob *::after { box-sizing:border-box; }
.ob img { max-width:100%; display:block; }
.ob a { color:inherit; }
.ob a:focus-visible, .ob button:focus-visible, .ob summary:focus-visible { outline:3px solid var(--slot); outline-offset:3px; border-radius:6px; }
.ob .wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.ob .narrow { max-width:720px; }
.ob section { padding:88px 0; }
.ob h2, .ob .hero .tagline, .ob h3 { word-break:auto-phrase; }
.ob h2 { font-size:clamp(24px, 3.4vw, 32px); font-weight:900; line-height:1.45; margin:0 0 18px; letter-spacing:.03em; }
.ob h3 { font-size:18px; font-weight:700; line-height:1.5; margin:0 0 8px; }
.ob p { margin:0 0 1em; }
.ob .lead-text { color:var(--sub); max-width:40em; }

/* ボタン */
.ob .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 28px; border-radius:12px; font:inherit; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer; transition:background-color .15s, color .15s, border-color .15s; }
.ob .btn-main { background:var(--ink); color:#fff; border:2px solid var(--ink); }
.ob .btn-main:hover { background:#22396b; }
.ob .btn-ghost { background:transparent; color:var(--ink); border:2px solid var(--line); }
.ob .btn-ghost:hover { border-color:var(--slot); }

/* ヘッダー */
.ob .top { position:sticky; top:0; z-index:20; background:rgba(245,249,250,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--line); }
.ob .top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; }
.ob .top img { height:30px; width:auto; }
.ob .top .btn { min-height:40px; padding:0 18px; font-size:14px; border-radius:10px; }

/* ファーストビュー：背景は1週間のカレンダーの縦線 */
.ob .hero { position:relative; overflow:hidden; padding:72px 0 80px; }
.ob .hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(to right, rgba(242,138,31,.14) 1px, transparent 1px);
  background-size:calc(100% / 7) 100%; mask-image:linear-gradient(to bottom, #000 30%, transparent 95%); -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 95%); }
.ob .hero .wrap { position:relative; display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:56px; align-items:center; }
.ob .hero h1 { margin:0; font-weight:900; line-height:1.1; }
.ob .hero h1 .name { display:block; font-size:clamp(40px, 6.2vw, 76px); letter-spacing:.04em; white-space:nowrap; }
/* 予約画面の「時間枠」と同じ形で、サブタイトルを見せる */
.ob .hero h1 .slotname { display:inline-block; margin-top:18px; padding:8px 22px; font-size:clamp(18px, 2.6vw, 26px); font-weight:700; letter-spacing:.08em;
  border:2px solid var(--slot); border-radius:12px; background:var(--slot-tint); color:var(--ink); }
.ob .hero .tagline { margin:30px 0 14px; font-size:clamp(19px, 2.4vw, 24px); font-weight:700; line-height:1.6; }
.ob .hero .desc { color:var(--sub); max-width:34em; margin-bottom:30px; }
.ob .hero .ctas { display:flex; flex-wrap:wrap; gap:12px; }
.ob .hero .ctanote { margin-top:14px; font-size:13px; color:var(--sub); }
.ob .phone { justify-self:center; width:min(300px, 80vw); border-radius:38px; padding:12px; background:var(--ink); box-shadow:0 30px 60px -24px rgba(24,43,82,.45); }
.ob .phone .screen { border-radius:28px; overflow:hidden; background:#fff; aspect-ratio:390 / 760; }
.ob .phone .screen img { width:100%; height:100%; object-fit:cover; object-position:top; }
.ob .phone-cap { margin-top:14px; font-size:12px; color:var(--sub); text-align:center; }

/* お悩み */
.ob .worries { background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ob .worries ul { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; }
.ob .worries li { position:relative; padding-left:30px; }
.ob .worries li::before { content:""; position:absolute; left:2px; top:.55em; width:16px; height:16px; border-radius:50%; border:2px solid var(--sub); opacity:.55; }

/* ブランドロゴ */
.ob .brand { display:flex; align-items:center; gap:8px; text-decoration:none; }
.ob .brand .mk { width:38px; display:block; } .ob .brand .mk svg { display:block; width:100%; height:auto; }
.ob .brand .wm { font-family:Poppins,'Zen Kaku Gothic New',sans-serif; font-weight:600; font-size:24px; line-height:1; letter-spacing:-.01em; }
.ob .brand .ka { font-size:10px; font-weight:700; color:var(--sub); letter-spacing:.06em; align-self:flex-end; padding-bottom:3px; }
.ob .hero h1 .name { font-family:Poppins,'Zen Kaku Gothic New',sans-serif; font-weight:600; font-size:clamp(36px, 9.6vw, 58px); letter-spacing:-.015em; line-height:1.05; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; white-space:nowrap; }
.ob .hero h1 .name small { font-family:'Zen Kaku Gothic New',sans-serif; font-size:clamp(12px, 1.5vw, 15px); font-weight:700; letter-spacing:.08em; color:var(--sub); }
/* お悩み：方眼紙の背景＋アンダーライン */
.ob .worries { background-color:#EEF1F3;
  background-image:linear-gradient(rgba(24,43,82,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(24,43,82,.08) 1px, transparent 1px);
  background-size:24px 24px; background-position:-1px -1px; }
.ob .worries li { padding-left:0; font-weight:500; }
.ob .worries li::before { display:none; }
.ob .worries .ul { text-decoration:underline; text-decoration-color:var(--slot); text-decoration-thickness:2px; text-underline-offset:6px; }

.ob .worry-grid { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:40px; align-items:center; }
.ob .worry-grid h2 { margin-bottom:8px; }
.ob .worries ul { grid-template-columns:1fr !important; gap:18px 0 !important; }
.ob .worry-fig { justify-self:center; width:min(380px, 100%); }
.ob .ill { display:block; width:100%; height:auto; }
/* 連携ロゴ */
.ob .card .ico.logos { display:flex; align-items:center; justify-content:center; width:fit-content; min-width:84px; padding:0 24px; border-radius:42px; gap:12px; }
.ob .card .ico img { display:block; height:40px; width:auto; }
.ob .card .ico.logos img { height:36px; }

/* 解決 */
.ob .points { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; margin-top:36px; }
.ob .points h3 { padding-top:16px; border-top:3px solid var(--slot); }
.ob .points p { color:var(--sub); font-size:15px; margin:0; }

/* デモ */
.ob .demo { background:var(--ink); color:#fff; }
.ob .demo .lead-text { color:rgba(255,255,255,.78); }
.ob .browser { margin-top:32px; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 30px 70px -30px rgba(0,0,0,.55); }
.ob .browser .bar { display:flex; align-items:center; gap:7px; height:40px; padding:0 16px; background:#EEF3F5; color:var(--sub); font-size:12px; }
.ob .browser .bar i { width:10px; height:10px; border-radius:50%; background:#C9D5DB; display:block; }
.ob .browser .bar span { margin-left:10px; }
.ob .browser iframe { display:block; width:100%; height:1120px; border:0; background:var(--paper); }
.ob .demo .note { margin-top:16px; font-size:13px; color:rgba(255,255,255,.7); }

/* できること */
.ob .shots { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; margin:36px 0 12px; }
.ob .shots figure { margin:0; }
.ob .shots .frame { border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff; aspect-ratio:390 / 600; }
.ob .shots .frame img { width:100%; height:100%; object-fit:cover; object-position:top; }
.ob .shots figcaption { margin-top:10px; font-size:14px; font-weight:700; }
.ob .shots-note { font-size:12px; color:var(--sub); margin-bottom:48px; }
.ob .groups { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:44px 56px; }
.ob .group .tag { display:inline-block; padding:4px 16px; margin-bottom:14px; border:2px solid var(--slot); border-radius:10px; background:var(--slot-tint); font-weight:700; }
.ob .group ul { margin:0; padding-left:1.2em; }
.ob .group li { margin:4px 0; }
.ob .group li.opt::marker { color:var(--slot); }
.ob .group .optlabel { display:inline-block; font-size:12px; color:var(--slot-text); border:1px solid var(--slot); border-radius:6px; padding:0 6px; margin-left:6px; line-height:1.6; vertical-align:2px; }

/* 機能カード（アイコン＋説明） */
.ob .features { background:#FFF6EC; }
.ob .cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; margin-top:8px; }
.ob .card { background:#fff; border-radius:20px; padding:28px 26px 26px; text-align:center; box-shadow:0 6px 18px -8px rgba(24,43,82,.18); }
.ob .card h3 { font-size:17px; margin:0 0 18px; }
.ob .card .optlabel { display:inline-block; font-size:11px; color:var(--slot-text); border:1px solid var(--slot); border-radius:6px; padding:0 6px; margin-left:6px; line-height:1.6; vertical-align:2px; font-weight:500; }
.ob .card .ico { width:84px; height:84px; margin:0 auto 18px; border-radius:50%; background:var(--slot-tint); color:var(--slot-text); display:grid; place-items:center; }
.ob .card .ico svg { width:34px; height:34px; }
.ob .card p { margin:0; text-align:left; font-size:14px; line-height:1.8; color:var(--sub); }
/* ファーストビューの会議ツール */
.ob .meet { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 26px; padding:12px 18px; background:#fff; border:1px solid var(--line); border-radius:14px; width:fit-content; max-width:100%; }
.ob .meet .lbl { font-size:13px; font-weight:700; }
.ob .meet .lbl small { display:block; font-size:11px; font-weight:500; color:var(--sub); letter-spacing:.02em; }
.ob .meet .logos { display:flex; align-items:center; gap:18px; }
.ob .meet .zoom svg { display:block; height:20px; width:auto; }
.ob .meet .gmeet { display:block; height:26px; width:auto; }

/* 比較表 */
.ob .compare { background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ob .table-scroll { overflow-x:auto; margin-top:28px; -webkit-overflow-scrolling:touch; }
.ob table { width:100%; min-width:680px; border-collapse:collapse; font-size:15px; }
.ob th, .ob td { padding:16px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.ob thead th { font-size:14px; color:var(--sub); font-weight:500; }
.ob tbody th { font-weight:700; width:22%; }
.ob .is-ob { background:var(--slot-tint); }
.ob thead .is-ob { color:var(--ink); font-weight:900; border-radius:12px 12px 0 0; }
.ob td.is-ob { font-weight:700; }
.ob .table-note { font-size:12px; color:var(--sub); margin-top:12px; }

/* おすすめ */
.ob .fits { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 40px; }
.ob .fits li { position:relative; padding:14px 0 14px 34px; border-bottom:1px solid var(--line); }
.ob .fits li::before { content:""; position:absolute; left:2px; top:1.25em; width:18px; height:10px; border-left:3px solid var(--slot); border-bottom:3px solid var(--slot); transform:rotate(-45deg); }

.ob .fit-grid { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:40px; align-items:center; }
.ob .fit-fig { justify-self:center; width:min(380px, 100%); }
.ob .fit-grid .fits { grid-template-columns:1fr; margin-top:20px; }

/* 料金 */
.ob .price { background:var(--white); border-top:1px solid var(--line); }
.ob .price-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; }
.ob .price-head .monthly { font-weight:700; color:var(--slot-text); }
.ob .plans { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; margin-top:28px; }
.ob .plan { border:2px solid var(--line); border-radius:18px; padding:28px; background:#fff; }
.ob .plan.rich { border-color:var(--ink); }
.ob .plan h3 { font-size:19px; }
.ob .plan .amount { font-size:40px; font-weight:900; letter-spacing:.02em; line-height:1.3; margin:6px 0 2px; }
.ob .plan .amount small { font-size:15px; font-weight:500; margin-left:4px; color:var(--sub); }
.ob .plan .kind { font-size:13px; color:var(--sub); margin-bottom:16px; }
.ob .plan ul { margin:0; padding-left:1.2em; }
.ob .plan li { margin:4px 0; }
.ob .support { margin-top:24px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 24px; border-top:1px solid var(--line); }
.ob .support div { padding:16px 0; border-bottom:1px solid var(--line); }
.ob .support dt { font-size:13px; color:var(--sub); }
.ob .support dd { margin:2px 0 0; font-weight:700; }
.ob .price-note { font-size:13px; color:var(--sub); margin-top:16px; }

/* 導入の流れ（順番がある内容なので番号を付ける） */
.ob .steps { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px; counter-reset:step; }
.ob .steps li { counter-increment:step; }
.ob .steps li::before { content:counter(step); display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:2px solid var(--slot); background:var(--slot-tint); font-weight:900; font-size:18px; margin-bottom:14px; }
.ob .steps p { font-size:15px; color:var(--sub); margin:0; }

/* よくある質問 */
.ob .faq details { border-bottom:1px solid var(--line); }
.ob .faq details:first-of-type { border-top:1px solid var(--line); }
.ob .faq summary { list-style:none; cursor:pointer; padding:20px 44px 20px 0; font-weight:700; position:relative; }
.ob .faq summary::-webkit-details-marker { display:none; }
.ob .faq summary::after { content:""; position:absolute; right:10px; top:50%; width:10px; height:10px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:translateY(-70%) rotate(45deg); transition:transform .2s; }
.ob .faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.ob .faq details p { margin:0 0 20px; color:var(--sub); }

/* 運営者 */
.ob .about { background:var(--white); border-top:1px solid var(--line); }
.ob .about .wrap { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:48px; align-items:start; }
.ob .about img { width:200px; height:auto; }
.ob .about dl { margin:16px 0 0; }
.ob .about dl div { display:flex; gap:16px; padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; }
.ob .about dt { width:5em; flex-shrink:0; color:var(--sub); }
.ob .about dd { margin:0; }

/* 最後の呼びかけ */
.ob .last { background:var(--ink); color:#fff; text-align:center; padding:96px 0; }
.ob .last p { color:rgba(255,255,255,.8); }
.ob .last .btn-main { background:#fff; color:var(--ink); border-color:#fff; margin-top:16px; }
.ob .last .btn-main:hover { background:var(--slot-tint); }

.ob .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* フッター */
.ob .foot { padding:32px 0 40px; font-size:12px; color:var(--sub); }
.ob .foot p { margin:0 0 8px; }

/* ファーストビューの演出は1回だけ（動きを減らす設定の方には出さない） */
@media (prefers-reduced-motion: no-preference) {
  .ob .hero h1 .slotname { animation:ob-pick .6s .35s both cubic-bezier(.2,.8,.2,1); }
  .ob .phone { animation:ob-rise .8s .15s both cubic-bezier(.2,.8,.2,1); }
  @keyframes ob-pick { from { background:transparent; border-color:var(--line); } to { background:var(--slot-tint); border-color:var(--slot); } }
  @keyframes ob-rise { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
}

@media (max-width: 900px) {
  .ob .fit-grid { grid-template-columns:1fr; gap:24px; }
  .ob .fit-fig { width:min(300px, 80%); order:2; }
  .ob .worry-grid { grid-template-columns:1fr; gap:24px; }
  .ob .worry-fig { width:min(300px, 80%); }
  .ob .cards { grid-template-columns:1fr 1fr; }
  .ob section { padding:64px 0; }
  .ob .hero { padding:48px 0 64px; }
  .ob .hero .wrap { grid-template-columns:1fr; gap:48px; }
  .ob .points, .ob .groups, .ob .plans, .ob .support { grid-template-columns:1fr; }
  .ob .points { gap:28px; }
  .ob .steps { grid-template-columns:1fr 1fr; }
  .ob .about .wrap { grid-template-columns:1fr; gap:24px; }
  .ob .browser iframe { height:1250px; }
}
@media (max-width: 600px) {
  .ob .cards { grid-template-columns:1fr; }
  .ob .worries ul, .ob .fits, .ob .steps { grid-template-columns:1fr; }
  .ob .shots { grid-template-columns:1fr; max-width:320px; }
  .ob .hero .ctas .btn { width:100%; }
  .ob .top img { height:24px; }
  .ob .brand .mk { width:30px; } .ob .brand .wm { font-size:19px; } .ob .brand .ka { display:none; }
  .ob .plan { padding:22px; }
}