:root {
  --ink: #0e0e0e;
  --ink2: #3a3a3a;
  --ink3: #6e6e6e;
  --ink4: #b8b8b8;
  --teal: #45afc1;
  --teal-soft: #eef8fa;
  --voice: #6f93cf;
  --voice-soft: rgba(111,147,207,0.12);
  --voice-dark: #4f72b3;
  --pm: #8a9096;
  --pm-dark: #5c6167;
  --pm-soft: #f3f4f6;
  --line: #e8e8e8;
  --paper: #ffffff;
  --en: "Helvetica Neue", "Arial", sans-serif;
  --jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #fff; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { font-family: var(--jp); line-height: 1.6; }
a { color: inherit; }

/* 見出しの改行崩れ対策：日本語の孤立改行を防ぐ */
.h2, .diff-t, .plan-name, .hero-head {
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* ── 共通 ── */
section { padding: 120px 48px; }
/* 2026-09-23 hotfix: 固定ヘッダー(height:60px)分だけ #hash ジャンプ位置を下げる */
section[id] { scroll-margin-top: 60px; }
.inner { max-width: 1040px; margin: 0 auto; }
.eyebrow {
  font-family: var(--en); font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 28px;
}
.h2 {
  font-size: clamp(27px, 4vw, 46px); font-weight: 500;
  letter-spacing: 0.005em; line-height: 1.42; color: var(--ink);
  margin-bottom: 24px;
  word-break: keep-all; overflow-wrap: normal; text-wrap: balance;
}
.h2 b { font-weight: 700; }
.lead {
  font-size: 15px; font-weight: 400; line-height: 2.0;
  color: var(--ink2); max-width: 560px;
}

/* reveal */
html.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.16,.7,.3,1), transform .9s cubic-bezier(.16,.7,.3,1); }
html.js .rv.in { opacity: 1; transform: none; }
@media print { .rv { opacity: 1 !important; transform: none !important; } }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

/* ── HEADER ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px; height: 60px;
}
.brand {
  font-family: var(--en); font-size: 17px; font-weight: 400;
  letter-spacing: 0.1em; color: var(--ink); text-decoration: none;
  display: flex; align-items: baseline; gap: 9px;
}
.brand .sub { font-size: 9px; letter-spacing: 0.22em; color: var(--ink3); text-transform: uppercase; }
.head-cta {
  font-family: var(--en); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--teal); color: #fff; border: none;
  padding: 11px 22px; cursor: pointer; text-decoration: none;
}

/* ── HERO ── */
.hero {
  padding: 0 48px; min-height: 100dvh;
  display: flex; align-items: center; position: relative;
}
.hero-inner { max-width: 1040px; margin: 0 auto; padding: 80px 0 60px; text-align: center; width: 100%; }
.hero-logo-wrap { margin: 0 auto 40px; max-width: 187px; }
.hero-logo-img { width: 100%; height: auto; display: block; }
/* 2026-09-23 hotfix: 画像読み込み前から高さを確保し、#hash ジャンプ後のズレを防ぐ */
.hero-logo-img { aspect-ratio: auto 705 / 730; }
.hero-head {
  font-size: clamp(28px, 5.2vw, 52px); font-weight: 700;
  letter-spacing: .005em; line-height: 1.32; color: var(--ink);
  margin: 0 auto 24px; max-width: 620px;
  word-break: keep-all; text-wrap: balance;
}
.hero-head b { color: var(--teal); font-weight: 700; }
.hero-tag {
  font-size: clamp(13.5px, 1.8vw, 15px); font-weight: 400; letter-spacing: .03em;
  color: var(--ink2); line-height: 1.95; margin: 0 auto 30px; max-width: 480px;
  text-align: center; word-break: normal; overflow-wrap: break-word;
  line-break: strict; text-wrap: pretty;
}
.hero-powered {
  font-family: var(--en); font-size: 11px; letter-spacing: .14em;
  color: var(--ink3); margin-bottom: 40px;
}
.hero-powered b { color: var(--teal); font-weight: 500; }
.dl-store-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.dl-store-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: #fff; padding: 11px 20px;
  text-decoration: none; border-radius: 9px;
}
.dl-store-text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.dl-store-sub { font-family: var(--en); font-size: 9px; letter-spacing: .06em; opacity: .72; }
.dl-store-name { font-family: var(--en); font-size: 15px; font-weight: 500; letter-spacing: .01em; }
.cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); }
.cue .bar { width: 1px; height: 40px; background: var(--ink4); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100%{ transform: scaleY(.4); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }

/* ── SHOWCASE (UIモック) ── */
.showcase { background: #fff; }
.showcase .eyebrow { text-align: left; }
.showcase .h2 { text-align: left; max-width: 720px; }
.showcase .lead { text-align: left; margin-bottom: 8px; }
/* 見出し＋イズ 横並び */
.sc-head { display: flex; align-items: center; gap: 44px; justify-content: space-between; }
.sc-head-text { flex: 1; }
.iz-figure { flex-shrink: 0; text-align: center; margin: 0; }
.iz-img {
  width: 132px; height: 132px; border-radius: 50%; display: block;
  background: var(--teal-soft);
  box-shadow: 0 8px 30px -10px rgba(69,175,193,.45);
}
.iz-cap {
  margin-top: 12px; font-size: 11px; letter-spacing: .04em; color: var(--ink3);
  font-family: var(--jp);
}
.showcase-grid {
  margin-top: 72px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: start;
}
.sc-col { text-align: center; }
.sc-eyebrow {
  display: inline-block; font-family: var(--jp); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--teal); margin-bottom: 16px;
  background: var(--teal-soft); padding: 7px 18px; border-radius: 30px;
}
.sc-title { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; letter-spacing: .01em; color: var(--ink); line-height: 1.5; margin-bottom: 12px; }
.sc-sub { font-size: 13.5px; color: var(--ink2); line-height: 1.75; margin-bottom: 36px; max-width: 380px; margin-left: auto; margin-right: auto; }
/* スマホ筐体 */
.phone {
  width: 300px; margin: 0 auto;
  background: #0e0e0e; border-radius: 42px; padding: 9px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.3);
}
.phone-screen { background: #fff; border-radius: 34px; overflow: hidden; position: relative; }
/* ステータスバー */
.phone-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 22px 6px; font-family: var(--en); font-size: 11px; font-weight: 600; color: #0e0e0e; position: relative; }
.phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 78px; height: 19px; background: #0e0e0e; border-radius: 12px; }
.phone-status .st-r { display: flex; align-items: center; gap: 5px; font-size: 10px; }
.phone-batt { border: 1px solid #0e0e0e; border-radius: 3px; padding: 1px 3px; font-size: 8px; font-weight: 700; }
/* アプリヘッダー */
.app-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px; }
.app-bar .ab-menu { width: 30px; height: 30px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink2); }
.app-bar .ab-logo { font-family: var(--en); font-weight: 700; font-size: 19px; color: #0e0e0e; letter-spacing: -.02em; line-height: 1; }
.app-bar .ab-logo small { display: block; font-size: 5px; letter-spacing: .14em; color: var(--ink3); font-weight: 500; margin-top: 1px; }
.app-bar .ab-ava { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#d8b08c,#9a6b4d); }
/* チャット領域 */
.chat { padding: 6px 14px 0; height: 396px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 8px; max-width: 100%; }
.msg.user { justify-content: flex-end; }
.bubble { font-size: 11px; line-height: 1.65; border-radius: 14px; padding: 10px 12px; text-align: left; }
.msg.user .bubble { background: #0e0e0e; color: #fff; border-bottom-right-radius: 4px; max-width: 78%; }
.msg.is .bubble { background: #f4f4f5; color: #1a1a1a; border-bottom-left-radius: 4px; }
.msg.is { align-items: flex-start; }
.iz-ava { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #6fc6d6, #45afc1); margin-top: 2px; }
.bubble b { font-weight: 700; }
.bubble .q { color: var(--teal); font-weight: 700; }
/* 提案カード */
.sg-card { background: #fff; border: 1px solid #ececec; border-radius: 12px; padding: 11px 12px; text-align: left; box-shadow: 0 4px 14px -10px rgba(0,0,0,.2); }
.sg-no { font-size: 10px; color: var(--ink3); font-weight: 600; margin-bottom: 3px; }
.sg-name { font-size: 13px; font-weight: 700; color: #0e0e0e; margin-bottom: 4px; }
.sg-desc { font-size: 10px; color: var(--ink2); line-height: 1.5; margin-bottom: 9px; }
.sg-row { display: flex; gap: 10px; }
.sg-meta { flex: 1; }
.sg-label { font-size: 9px; color: var(--ink3); font-weight: 600; margin: 7px 0 3px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 9px; padding: 2px 6px; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.chip.g { color: #2e8b6f; border-color: #b6e3d3; background: #effaf5; }
.chip.v { color: #7a5bd0; border-color: #d6c9f3; background: #f5f1ff; }
.chip.o { color: #c08a2e; border-color: #f0dcb0; background: #fef7e8; }
.chip.n { color: var(--ink2); border-color: #e2e2e2; background: #f6f6f6; }
.sg-img { flex: 0 0 64px; }
.sg-img div { width: 64px; height: 78px; border-radius: 8px; background: linear-gradient(150deg,#c9a884,#8a6549); }
/* 入力バー */
.app-input { display: flex; align-items: center; gap: 8px; padding: 9px 14px 12px; border-top: 1px solid #f0f0f0; background: #fff; }
.app-input .ai-plus { width: 24px; height: 24px; border-radius: 50%; background: #f0f0f0; color: var(--ink2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.app-input .ai-field { flex: 1; font-size: 11px; color: var(--ink3); background: #f4f4f5; border-radius: 16px; padding: 7px 12px; text-align: left; }
.app-input .ai-send { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }
.sc-cap { margin-top: 22px; font-size: 12px; color: var(--ink3); letter-spacing: .03em; }

/* ── PLANS ── */
.plans { background: #fff; }
.plans .lead { margin-bottom: 56px; }
.plans-sub {
  font-size: clamp(18px, 2.4vw, 26px); font-weight: 500; color: var(--ink);
  line-height: 1.6; letter-spacing: .005em; max-width: 620px; margin-bottom: 64px;
}
.plans-sub b { font-weight: 700; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 32px 26px; display: flex; flex-direction: column; position: relative; background: #fff;
}
.plan-feat { border: 2px solid var(--teal); box-shadow: 0 18px 50px -28px rgba(69,175,193,.55); }
/* Pro Max = Proより一段上質。淡いグラデ背景＋締まった枠 */
.plan-max {
  border: 1px solid #c9cdd2;
  background: linear-gradient(180deg, #f5f6f8 0%, #ffffff 60%);
  box-shadow: 0 22px 60px -34px rgba(14,17,18,.5);
}
.plan-max .plan-name { color: var(--ink); }
.plan-max .plan-engine { color: var(--pm-dark); border-color: var(--pm); background: #fff; }
.plan-max .plan-list li::before { color: var(--pm-dark); }
.plan-flag {
  position: absolute; top: -12px; left: 26px; right: 26px;
  background: var(--teal); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; padding: 5px 12px; border-radius: 20px;
  white-space: nowrap; text-align: center; width: fit-content; margin: 0 auto;
}
.plan-name { font-family: var(--en); font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.plan-role { font-size: 12px; color: var(--ink3); letter-spacing: .04em; margin-bottom: 22px; }
.plan-price { font-family: var(--en); font-weight: 300; line-height: 1; margin-bottom: 4px; color: var(--ink); }
.plan-price b { font-size: 38px; font-weight: 700; }
.plan-price small { font-size: 13px; color: var(--ink2); font-family: var(--jp); }
.plan-price.free b { color: var(--ink2); }
.plan-engine {
  display: inline-block; font-family: var(--en); font-size: 10px; letter-spacing: .1em;
  color: var(--teal); border: 1px solid var(--teal); border-radius: 20px;
  padding: 4px 11px; margin: 14px 0 20px;
}
.plan-engine.haiku { color: var(--ink3); border-color: var(--line); }
.plan-line { height: 1px; background: var(--line); margin-bottom: 20px; }
.plan-list { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 11px; }
.plan-list li { font-size: 13px; color: var(--ink2); line-height: 1.6; padding-left: 22px; position: relative; }
.plan-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; color: var(--teal); font-weight: 700; font-size: 12px; }
.plan-list li.off { color: var(--ink4); }
.plan-list li.off::before { content: "—"; color: var(--ink4); font-weight: 400; }
.plan-note { margin-top: 22px; font-size: 12px; color: var(--ink3); line-height: 1.8; }
.plan-tag { display: inline-block; margin-top: 18px; font-size: 11px; font-weight: 500; color: var(--teal); letter-spacing: .04em; }

/* is VOICE（オーナー向け）＝横長1枚。色は voice 系 */
.plan-voice {
  grid-column: 1 / -1; margin-top: 8px;
  border: 1px solid var(--voice); background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 70%);
  box-shadow: 0 22px 60px -34px rgba(79,114,179,.45);
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; align-items: start;
}
.plan-voice .plan-flag { left: 26px; right: auto; margin: 0; background: var(--voice); }
.plan-voice .plan-name { color: var(--voice-dark); }
.plan-voice .plan-engine { color: var(--voice-dark); border-color: var(--voice); }
.plan-voice .plan-list li::before { color: var(--voice); }
.plan-voice .plan-line { display: none; }
.plan-voice .pv-right { display: flex; flex-direction: column; padding-top: 6px; }
.plan-voice .pv-hook { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.plan-voice .plan-note { margin-top: 18px; }
.plan-voice .plan-tag { color: var(--voice-dark); border-bottom: 1px solid var(--voice-dark); padding-bottom: 2px; text-decoration: none; font-weight: 700; width: fit-content; }
@media (max-width: 880px) {
  .plan-voice { grid-template-columns: 1fr; gap: 6px; }
}

/* ── COMPARE (ChatGPT比較) ── */
.compare { background: #0e1112; color: #fff; }
.compare .eyebrow { color: var(--teal); }
.compare .h2 { color: #fff; max-width: 740px; }
.compare .lead { color: rgba(255,255,255,.62); max-width: 620px; }
.ctable { width: 100%; border-collapse: collapse; margin-top: 52px; font-size: 13px; table-layout: fixed; }
.ctable th, .ctable td { padding: 16px 8px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.1); vertical-align: middle; }
.ctable thead th { font-weight: 500; font-size: 12px; letter-spacing: .02em; color: rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.22); }
.ctable thead th.gpt-col { color: rgba(255,255,255,.7); font-family: var(--jp); font-weight: 500; font-size: 11.5px; line-height: 1.35; }
.ctable thead th.is-col { color: rgba(255,255,255,.92); font-family: var(--en); font-weight: 600; font-size: 13px; }
/* is Pro = メイン強調（ティール） */
.ctable thead th.pro-col { color: var(--teal); font-family: var(--en); font-weight: 700; font-size: 14px; letter-spacing: .01em; }
.ctable .pro-col { background: rgba(69,175,193,.13); }
.ctable thead th.pro-col { background: rgba(69,175,193,.13); border-bottom: 1px solid rgba(69,175,193,.5); }
.ctable td.pro-col .mk.yes { color: var(--teal); }
/* is Pro Max = 控えめ。美容外に広がる点だけ一段強く（白枠付きティール塗り丸） */
.ctable thead th.max-col { color: rgba(255,255,255,.95); font-family: var(--en); font-weight: 600; font-size: 13px; letter-spacing: .01em; }
/* Pro Max列＝白っぽいグラデ背景（プランカードのplan-maxと世界観を合わせる） */
.ctable .max-col { background: rgba(255,255,255,.07); }
.ctable thead th.max-col {
  background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 100%);
  border-bottom: 1px solid rgba(255,255,255,.32);
}
.ctable td.row-label { color: #fff; font-weight: 500; text-align: left; width: 28%; font-size: 13px; line-height: 1.5; }
/* ○△×マーク */
.mk { display: inline-block; font-size: 19px; line-height: 1; font-weight: 700; }
.mk.yes { color: var(--teal); }
.mk.mid { color: rgba(255,255,255,.5); font-size: 17px; }
.mk.no { color: rgba(255,255,255,.24); }
/* Pro Maxの拡張ポイント：塗りつぶしティール丸＋白枠で一段強調 */
.mk.plus {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); color: #fff; font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 10px -2px rgba(69,175,193,.6);
}
.ctable td.pro-col .mk.yes { color: var(--teal); }
.mk-note { display: block; font-size: 10px; font-weight: 400; letter-spacing: .01em; margin-top: 5px; color: rgba(255,255,255,.5); }
.mk-note.hl { color: rgba(255,255,255,.85); margin-top: 7px; }
.compare-foot { margin-top: 40px; font-size: 13.5px; line-height: 2.0; color: rgba(255,255,255,.7); max-width: 680px; }
.compare-foot b { color: #fff; font-weight: 600; }

/* ── CTA ── */
.cta { background: #fff; text-align: center; }
.cta .h2 { margin: 0 auto 16px; max-width: 640px; text-align: center; text-wrap: normal; }
.cta-sub { font-size: 14.5px; color: var(--ink2); font-weight: 400; line-height: 1.9; margin-bottom: 36px; }
.cta .dl-store-row { margin-bottom: 18px; }
.cta-launch { font-family: var(--en); font-size: 11px; letter-spacing: .16em; color: var(--ink3); }

/* ── FOOTER ── */
.site-footer { padding: 56px 48px; }
.foot-top { max-width: 1040px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fmeta { font-family: var(--en); font-size: 11px; line-height: 1.9; color: var(--ink3); letter-spacing: .04em; text-align: right; }

/* ── RESPONSIVE ── */
@media (max-width: 880px) {
  section { padding: 84px 28px; }
  header, .hero { padding-left: 28px; padding-right: 28px; }
  .hero-tag { max-width: 340px; font-size: 14px; line-height: 1.95; }
  .h2 { font-size: clamp(23px, 6.4vw, 34px); }
  .hero-head { font-size: clamp(26px, 7.6vw, 42px); }
  /* スマホでは見出しの孤立改行防止より折り返し優先（右はみ出し防止） */
  .h2, .hero-head, .hero-tag, .diff-t, .plan-name {
    word-break: normal; overflow-wrap: break-word; text-wrap: pretty;
  }
  .site-footer { padding: 48px 28px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 56px; margin-top: 48px; }
  .sc-head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .iz-figure { align-self: center; }
  .iz-img { width: 108px; height: 108px; }
  .phone { width: 280px; }
  .plan-grid { grid-template-columns: 1fr; }
  .ctable { font-size: 11px; margin-top: 40px; }
  .ctable th, .ctable td { padding: 11px 4px; }
  .ctable td.row-label { width: 30%; font-size: 11px; line-height: 1.4; }
  .ctable thead th.gpt-col, .ctable thead th.is-col { font-size: 11px; }
  .ctable thead th.pro-col { font-size: 11.5px; }
  .ctable thead th.max-col { font-size: 11px; }
  .mk { font-size: 16px; }
  .mk.mid { font-size: 15px; }
  .mk.plus { width: 22px; height: 22px; font-size: 12px; }
  .mk-note { font-size: 9px; margin-top: 3px; }
}
@media (max-width: 520px) {
  .head-cta { padding: 9px 14px; font-size: 10px; }
  .brand .sub { display: none; }
  .ctable td.row-label { width: 26%; }
}

/* ── 追加：機能セクション ── */
.feat { background:#fff; }
.feat.alt { background:#fafbfb; }
.feat-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center; }
.feat-grid.rev > .feat-text { order:2; } .feat-grid.rev > .feat-visual { order:1; }
.feat .h2 { margin-bottom:18px; word-break: normal; overflow-wrap: break-word; }
.feat-grid > * { min-width:0; }
.feat .lead { margin-bottom:28px; }
.more { font-family: var(--jp); font-size:14px; font-weight:700; color: var(--teal); text-decoration:none; border-bottom:1px solid var(--teal); padding-bottom:2px; }
.more:hover { color:#2a8a9a; border-color:#2a8a9a; }
.feat-visual { display:flex; justify-content:center; }
.shot { width:280px; margin:0 auto; border-radius:34px; overflow:hidden; background:#0e0e0e; padding:9px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.3); }
.shot img { display:block; width:100%; height:auto; border-radius:26px; }
/* 2026-09-23 hotfix: 画像読み込み前から高さを確保し、#hash ジャンプ後のズレを防ぐ */
.shot img { aspect-ratio: auto 640 / 1384; }
.shot img[src$="shot-protalk.png"] { aspect-ratio: auto 720 / 1563; }
/* is VOICE マッチング図 */
.match { width:100%; max-width:440px; display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }
.mcol { display:flex; flex-direction:column; gap:10px; }
.mcol .who { font-family: var(--jp); font-size:11px; font-weight:700; letter-spacing:.08em; color: var(--ink3); text-align:center; margin-bottom:2px; }
.mbub { font-size:12.5px; line-height:1.7; padding:10px 13px; border-radius:14px; background:#fff; border:1px solid var(--line); color: var(--ink2); }
.mcol.left .mbub { border-bottom-left-radius:4px; }
.mcol.right .mbub { border-bottom-right-radius:4px; background: var(--teal-soft); border-color: transparent; }
.mcenter { display:flex; flex-direction:column; align-items:center; gap:6px; }
.mcenter img { width:72px; height:72px; border-radius:50%; background: var(--teal-soft); box-shadow: 0 8px 30px -10px rgba(69,175,193,.45); }
.mcenter span { font-size:10.5px; letter-spacing:.06em; color: var(--ink3); }
.mline { height:1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); width:100%; }
/* 薬剤サポートの3段 */
.flow3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); margin-top:8px; }
.flow3 div { padding:22px 20px; border-right:1px solid var(--line); }
.flow3 div:last-child { border-right:0; }
.flow3 b { display:block; font-size:14px; margin-bottom:6px; }
.flow3 p { font-size:12.5px; line-height:1.8; color: var(--ink2); }
/* Google Play 準備中 */
.dl-store-btn.soon { opacity:.45; pointer-events:none; }
.qr-inline { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:22px; color: var(--ink3); font-size:11.5px; }
.qr-inline img { width:76px; height:76px; border:1px solid var(--line); }
/* お問い合わせ */
.contact { background:#fafbfb; text-align:center; }
.contact .h2 { text-align:center; margin:0 auto 14px; }
.contact p { font-size:14px; color: var(--ink2); margin-bottom:22px; }
.contact a.mail { font-family: var(--en); font-size:20px; letter-spacing:.04em; color: var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); }
.foot-links { max-width:1040px; margin:22px auto 0; font-size:11.5px; color: var(--ink3); display:flex; gap:18px; flex-wrap:wrap; }
.foot-links a { color: var(--ink3); text-decoration:none; }
/* 詳細ページ */
.sub-hero { padding:80px 48px 60px; }
.sub-hero .inner { max-width:760px; }
.sub-hero .h2 { word-break:normal; overflow-wrap:anywhere; }
.sub-body { padding:0 48px 100px; }
.sub-body .inner { max-width:760px; margin:0 auto; }
.sub-body h3 { font-size:20px; font-weight:700; margin:56px 0 14px; letter-spacing:.01em; }
.sub-body p { font-size:15px; line-height:2.0; color: var(--ink2); margin-bottom:16px; }
.sub-body ul { margin:0 0 16px 1.3em; color: var(--ink2); font-size:15px; line-height:2.0; }
.sub-body .chat { height:auto; overflow:visible; background:#fafbfb; border:1px solid var(--line); border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:10px; margin:20px 0 28px; }
.sub-body .cb { max-width:88%; padding:12px 16px; border-radius:16px; font-size:14px; line-height:1.8; }
.sub-body .cb.u { align-self:flex-end; background: var(--teal-soft); border-bottom-right-radius:4px; }
.sub-body .cb.i { align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:4px; }
.sub-body .cb.i small { display:block; font-size:11px; color: var(--ink3); margin-bottom:4px; }
.cards3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:12px 0 8px; }
.cards3 div { border:1px solid var(--line); padding:20px; }
.cards3 b { display:block; font-size:16px; margin-bottom:4px; }
.cards3 i { display:block; font-style:normal; font-size:12.5px; color: var(--teal); margin-bottom:8px; }
.cards3 p { font-size:13px; margin:0; line-height:1.8; }
.pricebox { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:12px 0; }
.pricebox div { border:1px solid var(--line); padding:20px; }
.pricebox div.hi { border-color: var(--teal); }
.pricebox b { display:block; font-size:15px; }
.pricebox .pv { font-family: var(--en); font-size:24px; font-weight:600; margin:4px 0 8px; }
.pricebox .pv small { font-family: var(--jp); font-size:12px; color: var(--ink3); font-weight:400; margin-left:4px; }
.pricebox p { font-size:13px; margin:0; line-height:1.8; }
.back { display:inline-block; margin-bottom:22px; font-size:13px; color: var(--ink3); text-decoration:none; }
.back:hover { color: var(--teal); }
@media (max-width: 880px) {
  .feat-grid { grid-template-columns:1fr; gap:36px; }
  .feat-grid.rev > .feat-text { order:1; } .feat-grid.rev > .feat-visual { order:2; }
  .shot { width:250px; }
  .flow3 { grid-template-columns:1fr; } .flow3 div { border-right:0; border-bottom:1px solid var(--line); } .flow3 div:last-child { border-bottom:0; }
  .sub-hero { padding:56px 28px 40px; } .sub-body { padding:0 28px 80px; }
  .cards3, .pricebox { grid-template-columns:1fr; }
  .match { grid-template-columns:1fr; } .mcol { flex-direction:row; flex-wrap:wrap; } .mcol .who { width:100%; } .mline { display:none; }
}

/* ── is VOICE 全幅ステージ ── */
.voice .h2, .voice .lead { text-align:center; margin-left:auto; margin-right:auto; }
.voice .eyebrow { text-align:center; }
.voice-stage { display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center; margin-top:48px; }
.vcol { display:flex; flex-direction:column; gap:18px; }
.vp { display:grid; grid-template-columns:56px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:start; }
.vp img { grid-row:1/3; width:56px; height:56px; border-radius:50%; object-fit:cover; background:var(--teal-soft); }
.vp span { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ink3); }
.vp p { font-size:13.5px; line-height:1.7; color:var(--ink); background:#fff; border:1px solid var(--line); padding:10px 14px; border-radius:14px; border-top-left-radius:4px; margin-top:4px; }
.vcol.right .vp p { background:var(--teal-soft); border-color:transparent; }
.vcenter { display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 8px; }
.vcenter img { width:96px; height:96px; border-radius:50%; background:var(--teal-soft); box-shadow:0 8px 30px -10px rgba(69,175,193,.45); }
.vcenter span { font-size:11.5px; letter-spacing:.06em; color:var(--ink3); text-align:center; white-space:nowrap; }
@media (max-width:880px){
  .voice-stage { grid-template-columns:1fr; gap:24px; }
  .vcenter { order:2; } .vcol.right { order:3; }
  .hero { min-height:auto; padding-top:80px; padding-bottom:80px; }
}

/* ── is VOICE ペア表示 ── */
.voice-sub { text-align:center; font-size:15px; color:var(--ink2); margin:0 auto 36px; }
.vpairs { display:flex; flex-direction:column; gap:22px; max-width:900px; margin:0 auto; }
.vpair { display:grid; grid-template-columns:1fr 72px 1fr; gap:10px; align-items:center; }
.vp.l, .vp.r { display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:start; }
.vp.r { grid-template-columns:1fr 48px; }
.vp.l img { grid-row:1/3; grid-column:1; }
.vp.r img { grid-row:1/3; grid-column:2; }
.vp.r span, .vp.r p { grid-column:1; text-align:right; }
.vp.l p { border-top-left-radius:4px; }
.vp.r p { border-top-right-radius:4px; border-top-left-radius:14px; background:var(--teal-soft); border-color:transparent; }
.vp img { width:48px; height:48px; }
.vlink { display:flex; align-items:center; justify-content:center; gap:0; }
.vlink i { flex:1; height:1px; background:var(--teal); opacity:.6; }
.vlink img { width:40px; height:40px; border-radius:50%; background:var(--teal-soft); flex:none; box-shadow:0 6px 18px -8px rgba(69,175,193,.5); }
.vcap { text-align:center; font-size:13px; color:var(--ink3); margin-top:26px; }
@media (max-width:880px){
  .vpair { grid-template-columns:1fr 44px 1fr; gap:6px; }
  .vp.l, .vp.r { grid-template-columns:34px 1fr; column-gap:6px; }
  .vp.r { grid-template-columns:1fr 34px; }
  .vp img { width:34px; height:34px; }
  .vp span { font-size:9.5px; letter-spacing:.02em; }
  .vp p { font-size:11.5px; padding:8px 10px; line-height:1.55; }
  .vlink img { width:30px; height:30px; }
}
/* ── 薬剤サポート ── */
.maker .h2, .maker .lead { text-align:left; }
.maker-grid { margin-top:56px; }
.soon-tag { font-size:10px; letter-spacing:.06em; color:var(--ink3); border:1px solid var(--line); border-radius:20px; padding:1px 8px; margin-left:6px; background:#fff; vertical-align:middle; }
.maker-msg { margin-top:64px; padding:32px; border:1px solid var(--line); background:#fff; max-width:760px; }
.maker-msg h3 { font-size:18px; font-weight:700; margin-bottom:10px; }
.maker-msg p { font-size:14px; line-height:1.9; color:var(--ink2); margin-bottom:16px; }

/* showcase 見出しとイズを横並び（スマホでも） */
@media (max-width:880px){
  .sc-head { flex-direction:row; align-items:center; gap:16px; }
  .sc-head-text { flex:1; min-width:0; }
  .sc-h2 { font-size:clamp(21px,6vw,28px); word-break:keep-all; }
  .iz-figure { align-self:center; }
  .iz-img { width:84px; height:84px; }
  .iz-cap { font-size:10px; }
}

/* maker.html screenshots row */
.maker-shots { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:32px 0 8px; }
.maker-shots .shot { width:100%; max-width:240px; }
.shots-note { font-size:12px; color:var(--ink3); text-align:center; margin:0 0 36px; }
@media (max-width: 760px) {
  .maker-shots { grid-template-columns:1fr; gap:28px; }
  .maker-shots .shot { max-width:250px; }
}

.maker-shots.two { grid-template-columns:repeat(2,1fr); max-width:560px; margin-left:auto; margin-right:auto; }
.maker-shots.two > div { text-align:center; }
.shot-cap { font-size:12px; color:var(--ink3); margin:12px 0 0; }
@media (max-width: 760px) { .maker-shots.two { grid-template-columns:1fr; } }

.sub-body h3.sec-head { display:flex; align-items:center; gap:18px; margin-top:56px; }
.sub-body h3.sec-head span { white-space:nowrap; }
.sub-body h3.sec-head::after { content:""; flex:1; height:2px; background:var(--teal); opacity:.7; }
.cards3 i { letter-spacing:.06em; }

/* ── 機能見出し（番号・機能名・コピー） ── */
.f-no { font-family: var(--jp); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--teal); margin-bottom: 18px; }
.f-name { font-size: clamp(32px, 4.8vw, 54px); font-weight: 700; line-height: 1.18; letter-spacing: .01em; color: var(--ink); margin: 0 0 18px; word-break: keep-all; }
.f-tag { display: inline-block; font-size: clamp(13px, 1.3vw, 15px); font-weight: 700; letter-spacing: .06em; color: var(--teal); background: var(--teal-soft); border-radius: 30px; padding: 6px 14px; margin-left: 14px; vertical-align: middle; line-height: 1.4; white-space: nowrap; }
.f-tag.soon { color: var(--ink3); background: #fff; border: 1px solid var(--line); }
.f-copy { font-size: clamp(19px, 2.3vw, 27px); font-weight: 500; line-height: 1.6; color: var(--ink); margin: 0 0 22px; word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.f-copy b { font-weight: 700; }
.showcase .f-copy { margin-bottom: 14px; }
.feat .f-copy { margin-bottom: 18px; }
.voice .f-no, .voice .f-name, .voice .f-copy { text-align: center; }
.voice .f-copy { margin-left: auto; margin-right: auto; }
.plans .f-no, .plans .f-name, .plans .f-copy { text-align: center; }
.maker .f-no, .maker .f-name, .maker .f-copy { text-align: left; }
@media (max-width: 880px) {
  .f-name { font-size: clamp(28px, 8vw, 40px); }
  .f-tag { display: block; width: fit-content; margin: 12px 0 0; }
  .voice .f-tag, .plans .f-tag { margin-left: auto; margin-right: auto; }
  .f-copy { font-size: clamp(17px, 4.8vw, 22px); word-break: normal; overflow-wrap: break-word; text-wrap: pretty; }
}

/* ── ステップ型の下層ページ（roadmap） ── */
.step { margin-top: 72px; }
.step:first-child { margin-top: 24px; }
.step-no { font-family: var(--en); font-size: 12px; font-weight: 600; letter-spacing: .28em; color: var(--teal); margin-bottom: 10px; }
.sub-body h3.step-title { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; margin: 0 0 16px; line-height: 1.3; letter-spacing: .01em; }
.sub-body p.step-lead { font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1.8; margin-bottom: 12px; }
.sub-body p.step-lead b { font-weight: 700; }
.sub-body p.note { font-size: 13px; color: var(--ink3); border-left: 2px solid var(--line); padding-left: 14px; margin-top: 24px; line-height: 1.9; }
.sub-body p.plan-note { margin-top: 64px; font-size: 14px; color: var(--ink3); text-align: center; }
.step .cards3 { margin-top: 20px; }
.step .maker-shots.two { margin-top: 28px; }
/* スクショ待ちの枠 */
.shot.ph { background: #f3f4f5; border: 1px dashed #c9ced3; box-shadow: none; padding: 0; margin: 28px auto 0; aspect-ratio: 280 / 580; display: flex; align-items: center; justify-content: center; text-align: center; }
.shot.ph span { font-size: 12px; line-height: 1.9; color: var(--ink3); }
.shot.ph.wide { width: 100%; max-width: 760px; aspect-ratio: 16 / 10; border-radius: 18px; }
/* is Pro Max の枠（グレー系） */
.promax-box { margin-top: 32px; background: #f4f4f5; border: 1px solid #e4e5e7; border-radius: 16px; padding: 22px 24px; }
.promax-box .pm-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #5c6066; background: #e8e9eb; border-radius: 20px; padding: 4px 12px; margin-bottom: 10px; }
.promax-box b { display: block; font-size: 16px; color: #2b2e33; margin-bottom: 6px; }
.promax-box p { font-size: 14px; color: #5c6066; margin: 0; line-height: 1.9; }
@media (max-width: 880px) { .step { margin-top: 56px; } .shot.ph.wide { aspect-ratio: 4 / 3; } }

.doc-shot { margin: 28px auto 0; max-width: 760px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(0,0,0,.35); background: #fff; }
.doc-shot img { display: block; width: 100%; height: auto; }

.sub-hero .page-title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; margin: 0; letter-spacing: .01em; }
.sub-body h4.sub-head { font-size: 17px; font-weight: 700; margin: 28px 0 12px; }
.order-list { list-style: none; margin: 0 0 20px; padding: 4px 0 0; border-top: 1px solid var(--line); counter-reset: ol; }
.order-list li { counter-increment: ol; display: grid; grid-template-columns: 28px 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.order-list li::before { content: counter(ol); grid-row: 1 / 3; font-family: var(--en); font-size: 14px; color: var(--ink3); padding-top: 3px; }
.order-list li b { font-size: 16px; color: var(--ink); }
.order-list li span { font-size: 14px; line-height: 1.9; color: var(--ink2); }

.sub-hero.compact { padding-bottom: 8px; }
.sub-hero.compact .eyebrow { margin-bottom: 14px; }
.sub-hero.compact + .sub-body .step:first-child { margin-top: 40px; }

.sub-body h1.step-title { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; margin: 0 0 16px; line-height: 1.3; letter-spacing: .01em; }
.sub-hero.compact { padding-bottom: 0; }
.sub-hero.compact .back { margin-bottom: 0; }
.sub-hero.compact + .sub-body .step:first-child { margin-top: 36px; }

/* 対象別の大見出し（voice） */
.aud { margin-top: 36px; padding-top: 28px; border-top: 2px solid var(--ink); }
.aud + .step { margin-top: 40px; }
.step + .aud { margin-top: 88px; }
.aud-no { font-family: var(--jp); font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--teal); margin-bottom: 12px; }
.sub-body .aud-title { font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.25; margin: 0 0 12px; letter-spacing: .01em; word-break: keep-all; overflow-wrap: anywhere; }
.sub-body p.aud-lead { font-size: 16px; color: var(--ink2); margin: 0; }
@media (max-width: 880px) { .sub-body .aud-title { word-break: normal; } .step + .aud { margin-top: 64px; } }

.academy .f-copy { max-width: 720px; }
.academy .lead { text-align: left; margin: 0 0 28px; max-width: 720px; }
.academy .doc-shot { margin-top: 8px; }
.academy .promax-box { max-width: none; margin: 28px 0 0; }

.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.doc-grid .doc-shot { margin: 0; max-width: none; }
.doc-grid .sc-cap { text-align: center; margin-top: 10px; }
@media (max-width: 880px) { .doc-grid { grid-template-columns: 1fr; gap: 28px; } }

.step + .aud { margin-top: 88px; }
.cards3 + .sec-head { margin-top: 72px; }

.step .chat { margin-top: 24px; }
.step .cards3 { margin-top: 20px; }


/* ── voice.html：ページ全体を voice 系に ── */
.voice-page .step-no, .voice-page .aud-no, .voice-page .cards3 i { color: var(--voice-dark); }
.voice-page .aud { border-top-color: var(--voice-dark); }
.voice-page .sub-body h3.sec-head::after { background: var(--voice); }
.voice-page .sub-body .cb.u { background: var(--voice-soft); }
.voice-page .back:hover { color: var(--voice-dark); }
.voice-page .cards3 div { border-color: rgba(111,147,207,.45); }