/* Imalog 販売ページ（index と法務3ページ）。見た目は本体 panhouse.jp（手島さんのデザイン）に揃える＝本体の /assets/style.css を先に読み、色・書体・角丸・影・ボタン・ヘッダー・足もとは本体の物を使う。このファイルは本体に無い Imalog の部品だけを、本体の変数（--ink・--blue・--r-card・--shadow-card など）で書く。色や数値をここに写さない（本体を直せばこちらも揃う）。
   外部の読み込みなし（書体は /imalog/assets/fonts/ に自前で置く。表示回数は Cloudflare が配るときに足す Cookie なしの解析で数える＝privacy.html 1節） */

.ima { font-feature-settings: "palt" 0; }
.ima-no-shadow {
  --ima-corporate-blue: var(--blue);
  --ima-corporate-blue-deep: var(--blue-deep);
}
/* Imalogの本文と製品の足もとにだけ差し色を設定する。 */
.ima-no-shadow main, .ima-no-shadow .ima-foot {
  --blue: #D83325;
  --blue-deep: #B42B1F;
  --blue-pale: #FBEAE8;
  --navy: #B42B1F;
}
/* パンくずとロゴ下の説明文は、本体のブランド色を引き継ぐ。 */
.ima-no-shadow .site-breadcrumbs, .ima-no-shadow .ima-head > .container > .side-sub {
  --blue: var(--ima-corporate-blue);
  --blue-deep: var(--ima-corporate-blue-deep);
}
/* 販売ページの影をすべて外す（共通ナビ・FAQ・疑似要素も含む）。 */
.ima-no-shadow, .ima-no-shadow *, .ima-no-shadow *::before, .ima-no-shadow *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}
.ima h1, .ima h2, .ima h3, .ima p, .ima li, .ima td, .ima th, .ima summary { word-break: auto-phrase; line-break: strict; }
/* auto-phrase が無い Safari は、<wbr> を置いた見出しだけ文節の切れ目で折る */
@supports not (word-break: auto-phrase) { .ima :is(h1, h2, h3, summary):has(wbr) { word-break: keep-all; overflow-wrap: anywhere; } }
.ima h1, .ima h2, .ima h3, .ima summary, .ima .btn-pill { font-feature-settings: "palt" 1; }
.ima .nw { white-space: nowrap; }
.ima .num { font-family: var(--font-num); }
.ima main a:not(.btn-pill) { color: var(--blue); }
.ima main a:not(.btn-pill):hover { color: var(--blue-deep); text-decoration: underline; }
.ima code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; background: var(--bg); border-radius: var(--r-sm); padding: 1px 6px; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ima-wide { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* 冒頭（本体の .page-head の形） */
.ima-head { padding-bottom: clamp(32px, 4vw, 48px); }
.ima-name { display: flex; align-items: center; gap: 18px; }
.ima-name a { display: flex; align-items: center; gap: inherit; color: inherit; }
.ima-mark { width: .62em; height: .62em; flex: none; }
/* 生成ロゴの透明余白は SVG の表示範囲で除く。既存の見出し行の高さを保つ。 */
.ima-name--wordmark { position: relative; display: block; height: 1em; }
.ima-wordmark { position: absolute; bottom: 0; left: 0; display: block; width: 3.56em; max-width: 100%; height: auto; }
.ima-h1 { margin-top: 34px; font-size: clamp(30px, 4vw, 48px); line-height: 1.45; font-weight: 700; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.ima-head .lead { max-width: 760px; }
.ima-requirement { max-width: 760px; margin-top: 12px; font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.ima-demo-intro { margin-top: 40px; }
.ima-demo-intro h2 { font-size: 20px; line-height: 1.6; font-weight: 700; color: var(--ink); }
.ima-demo-intro p { max-width: 760px; margin-top: 8px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.ima-demo-intro + .ima-wide .hero-movie { margin-top: 20px; }

/* 冒頭だけを左右に並べ、PC画面から動画を拡大できるようにする。 */
.ima-fv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px; margin: 34px -56px 0; padding: 56px; border-radius: 24px; background: var(--blue); }
.ima-fv :is(.ima-h1, .lead, .ima-requirement) { color: #fff; }
.ima-fv .ima-demo-open:focus-visible { outline-color: #fff; }
.ima-fv-copy, .ima-fv-demo { min-width: 0; }
.ima-fv-tagline { margin-bottom: 12px; font-size: 14px; line-height: 1.8; font-weight: 600; color: #fff; }
.ima-fv-brand { display: flex; align-items: baseline; gap: 16px; font-family: var(--font-en); font-size: clamp(64px, 6vw, 88px); line-height: 1.2; font-weight: 700; color: #fff; }
.ima-fv-brand span { font-family: var(--font-jp); font-size: 16px; font-weight: 600; white-space: nowrap; }
.ima-fv-copy .ima-h1 { margin-top: 24px; font-size: clamp(30px, 2.8vw, 40px); text-wrap: balance; }
.ima-fv-copy .lead { font-weight: 700; text-wrap: pretty; }
.ima-fv-pain { max-width: 760px; margin-top: 20px; font-size: 15px; line-height: 1.9; color: #fff; text-wrap: pretty; }
.ima-demo-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 12px 10px; font-size: 13px; font-weight: 700; color: var(--blue); }
.ima-demo-meta span { font-size: 12px; font-weight: 500; }
.ima-laptop { position: relative; padding: 0 12px 16px; }
.ima-laptop::after { content: ""; position: absolute; inset: auto 0 0; height: 16px; border-radius: 2px 2px 14px 14px; background: var(--line); }
.ima-laptop::before { content: ""; position: absolute; bottom: 10px; left: 41%; width: 18%; height: 6px; border-radius: 0 0 6px 6px; background: var(--ink-mute); z-index: 1; }
.ima-laptop-screen { position: relative; border: 10px solid var(--ink); border-top-width: 22px; border-radius: 14px 14px 4px 4px; background: var(--ink); }
.ima-laptop-screen::before { content: ""; position: absolute; top: -14px; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: var(--ink-mute); }
.ima-demo-open { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--blue); cursor: pointer; }
.ima-laptop-screen > video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; }
.ima-demo-open-hint { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--blue); border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 600; }
.ima-demo-open-hint svg { width: 16px; height: 16px; flex: none; }
.ima-demo-open:focus-visible, .ima-demo-close:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.ima-laptop-screen .movietoggle { right: 10px; bottom: 10px; z-index: 1; }
.ima-fv-demo-title { margin: 0 12px 16px; font-size: 18px; line-height: 1.6; font-weight: 700; color: #fff; text-align: center; text-wrap: balance; }
.ima-demo-dialog { width: min(1180px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 16px; border: 0; border-radius: var(--r-card); background: var(--surface); color: var(--ink); }
.ima-demo-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.ima-demo-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ima-demo-dialog-head h2 { font-size: 18px; line-height: 1.6; text-wrap: balance; }
.ima-demo-dialog-head small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.ima-demo-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; }
.ima-demo-close svg { width: 22px; height: 22px; }
.ima-demo-dialog video { display: block; width: 100%; height: auto; max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); object-fit: contain; background: #000; border-radius: 4px; }
.ima-demo-error { margin-top: 12px; font-size: 14px; }
@media (max-width: 1400px) {
  .ima-fv { margin-inline: -40px; padding-inline: 40px; }
  .ima-head .ima-toc { margin-inline: -40px; }
}
@media (max-width: 1000px) {
  .ima-fv { grid-template-columns: 1fr; gap: 32px; }
  .ima-fv-demo { width: 100%; max-width: 680px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .ima-fv { margin: 24px -12px 0; padding: 36px 12px; }
  .ima-fv-copy .ima-h1 { font-size: 30px; }
  .ima-fv-brand { gap: 10px; }
  .ima-fv-brand span { font-size: 13px; }
  .ima-laptop { padding-inline: 8px; }
  .ima-laptop-screen { border-width: 7px; border-top-width: 20px; }
  .ima-demo-open-hint { left: 6px; bottom: 6px; padding: 7px 9px; font-size: 11px; }
  .ima-demo-dialog { padding: 12px; }
  .ima-demo-dialog-head h2 { font-size: 16px; }
}
.ima-toc { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 32px -56px 0; }
.ima-toc-label { margin-right: 8px; font-family: var(--font-en); font-size: 13px; font-weight: 700; color: var(--ink); }
.ima main .ima-toc a { flex: 1 1 auto; padding: 8px 16px; border-radius: 999px; background: var(--blue); box-shadow: var(--shadow-card); font-size: 13.5px; font-weight: 500; color: #fff; text-align: center; }
.ima main .ima-toc a:hover { background: var(--blue-deep); color: #fff; }
.entry2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.entry { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 32px 32px 30px; }
.entry .sec-sub { margin-top: 0; }
.entry .big { font-size: 24px; line-height: 1.5; font-weight: 700; color: var(--ink); margin: 12px 0 8px; font-feature-settings: "palt" 1; }
.entry .big small { font-size: 16px; font-weight: 600; }
.entry p { font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.entry .ctarow { justify-content: flex-end; margin-top: auto; padding-top: 24px; }
.ctarow { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 34px; }
.more { font-size: 14.5px; font-weight: 600; }
.more::after { content: " \203A"; }
.btn-pill.is-soon, .btn-pill.is-soon:hover { border-color: var(--line); color: var(--ink-mute); background: var(--surface); cursor: default; }
.btn-pill.is-soon::after { display: none; }
.soon { font-size: 13px; color: var(--ink-mute); }

/* 冒頭の短い動画（音なし・くり返し）。携帯は縦長の別の動画。PC は画面の高さに合わせて幅を抑える＝動画の下端（「送信はしていません」）まで1画面に入る */
.shot { margin: 40px auto 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); background: var(--surface); }
.shot img { width: 100%; height: auto; }
.hero-movie { position: relative; max-width: clamp(640px, calc((100vh - 140px) * 16 / 9), 1156px); }
.hero-movie video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #fff; }
/* 一時停止: 動画の右下に重ねる丸いボタン（44px・本体の丸ボタンの形） */
.movietoggle { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--blue); color: #fff; cursor: pointer; }
.movietoggle:hover { background: var(--blue-deep); }
.movietoggle:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.movietoggle svg { width: 20px; height: 20px; fill: currentColor; }
.movietoggle .i-play, .movietoggle.paused .i-pause { display: none; }
.movietoggle.paused .i-play { display: block; }
.movie { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 40px auto 0; border-radius: var(--r-card); background: #000; box-shadow: var(--shadow-card); }

/* 動画を静止画と見分けられる差し色のフレーム。再生操作は既存のものを使う。 */
.ima .ima-video-frame { margin: 40px auto 0; padding: 10px; border-radius: var(--r-card); background: var(--blue); }
.ima .ima-video-frame video { display: block; margin: 0; border-radius: max(4px, calc(var(--r-card) - 6px)); }
.ima-video-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 2px 4px 12px; color: #fff; }
.ima-video-label > span { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.ima-video-label svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ima-video-label small { font-size: 12px; line-height: 1.6; }
.ima-video-frame .movietoggle { right: 24px; bottom: 24px; }
.ima .speedmovie.ima-video-frame { margin-top: 20px; }
@media (max-width: 734px) {
  .ima .ima-video-frame { margin-top: 28px; padding: 8px; }
  .ima-video-label { gap: 4px 10px; padding-bottom: 10px; }
  .ima-video-frame .movietoggle { right: 18px; bottom: 18px; }
}

/* 節（地は本体の灰 --bg。1つおきに白い角丸の箱＝本体の .rounded-block の形） */
.ima-sec { padding: 104px 0; }
.ima-sec.is-white { background: var(--surface); border-radius: var(--r-section); margin: 0 var(--edge); }
.ima-sec .sec-sub { margin-top: 0; color: var(--blue); }
.ima-h2 { margin-top: 14px; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.45; font-weight: 700; color: var(--ink); }
.para { max-width: 760px; margin-top: 28px; font-size: 16px; line-height: 2; color: var(--ink-soft); }
.note, .notes2 { max-width: 760px; margin-top: 24px; font-size: 13px; line-height: 1.8; color: var(--ink-mute); }
.notes2 li + li { margin-top: 4px; }
.caption { margin-top: 14px; font-size: 12px; line-height: 1.7; color: var(--ink-mute); text-align: center; }
.ima .section-notes { max-width: none; margin-top: 24px; font-size: 12px; line-height: 1.8; color: var(--ink-soft); text-align: right; }
.ima .section-notes :is(p, ul, li) { max-width: none; margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.ima .section-notes > * + *, .ima .section-notes li + li { margin-top: 4px; }
.subhead { margin-top: 72px; font-size: 22px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.sublead { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.vlead { margin-top: 56px; font-size: 17px; line-height: 1.7; font-weight: 700; color: var(--ink); }

/* 白い箱（本体のカード: 白・角 8px・影） */
.card, .fact, .step, .where3 > div, .rule, .exline, .price, .cprice-box { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.ima-sec.is-white :is(.card, .fact, .where3 > div, .rule, .exline, .cprice-box) { background: var(--bg); box-shadow: none; }

/* 速さ */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin-top: 32px; }
.ima #speed .facts { max-width: none; }
.fact { padding: 30px 30px 28px; }
.fact .k { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.fact .big { margin: 4px 0 8px; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--blue); }
.fact .big .num { font-size: 44px; font-weight: 600; letter-spacing: -.01em; }
.fact p:not(.k):not(.big) { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.fact p.fnote { margin-top: 10px; font-size: 12.5px; color: var(--ink-mute); }
.speedmovie { max-width: 1156px; margin: 0 auto; }
.speedmovie .movie { margin-top: 20px; background: #fff; }
.srcnote { max-width: 760px; margin-left: auto; margin-right: auto; }
.srcnote a { text-decoration: underline; }

/* 頼み方 */
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.card { padding: 32px 28px 30px; }
.card .scene { font-size: 13px; font-weight: 700; color: var(--blue); }
.card h3 { margin: 10px 0 12px; font-size: 20px; line-height: 1.6; font-weight: 700; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.card p { font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }
.ima #ask .promises.asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ima #ask .asks .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
.ima #ask .asks h3 { position: relative; min-height: calc(3.2em + 40px); align-content: center; text-align: center; margin: 12px 0 24px; padding: 20px 24px; border-radius: 999px; background: var(--bg); }
.ima #ask .asks h3::before, .ima #ask .asks h3::after { content: ""; position: absolute; display: block; width: 0; height: 0; border: 20px solid transparent; border-radius: 50%; transform: rotate(-45deg); pointer-events: none; }
.ima #ask .asks h3::before { left: 25%; bottom: -15px; border-left-color: var(--bg); border-bottom-color: var(--bg); }
.ima #ask .asks h3::after { left: calc(25% + 15px); bottom: -20px; border-left-color: var(--surface); border-bottom-color: var(--surface); }
.exline { max-width: 760px; margin-top: 20px; padding: 22px 26px; }
.ima #ask :is(.exline, .notes2) { max-width: none; }
.exline .k { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.exline p { font-size: 15px; line-height: 1.8; color: var(--ink); }

/* 録音ボタンはない */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 56px; }
.feature .shot { margin: 0; }
.feature .ftext h3 { margin-bottom: 14px; font-size: 24px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.feature .ftext p { font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.feature .ftext p + p { margin-top: 6px; }
.feature .fact .k { margin-bottom: 6px; }
.screenshot { margin-top: 56px; }

/* PC の中: 3列の図 */
.where3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.where3 > div { padding: 28px 26px; border: 2px solid transparent; }
.ima-sec.is-white .where3 > .mine { background: var(--surface); border-color: var(--blue); }
.where3 h3 { margin-bottom: 8px; font-size: 18px; line-height: 1.5; font-weight: 700; color: var(--ink); }
.where3 p { font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }

/* 自分で使う: 値段の箱（値段1行＋条件3行・札は使わない） */
.ima #personal :is(.para, .howto, .price, .steps, .note) { max-width: none; }
.price { max-width: 760px; margin-top: 40px; padding: 40px 44px; text-align: center; }
.ima #personal .price { border: 3px solid var(--blue); }
.price .sale-status { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--blue); }
.price .buy-lead { margin: 24px auto 20px; max-width: 560px; font-size: 15px; line-height: 1.8; color: var(--ink); text-wrap: pretty; }
.pricebig { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pricebig .num { font-size: 56px; font-weight: 600; letter-spacing: -.01em; }
.ima .pricebig .num { font-family: "DIN Alternate", "D-DIN", "Bahnschrift", var(--font-num); }
.pricebig small { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.pnotes { width: fit-content; max-width: 100%; margin: 20px auto 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: left; }
.pnotes li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.8; color: var(--ink-soft); }
.pnotes li + li { margin-top: 6px; }
.pnotes li::before, .mlist li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.price .ctarow { justify-content: center; margin-top: 28px; }

/* 買ったあと: 3行 */
.steps { --step-x: 24px; --step-y: 18px; max-width: 760px; margin-top: 20px; counter-reset: s; }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: var(--step-y) var(--step-x); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.steps li + li { margin-top: 10px; }
.steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: calc(var(--step-x) + 13px); top: calc(var(--step-y) + 30px); bottom: calc(-10px - var(--step-y)); width: 4px; background: var(--blue); opacity: .35; }
.steps .n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--font-num); font-size: 14px; font-weight: 600; }
.steps p { font-size: 15px; line-height: 1.8; color: var(--ink); padding-top: 2px; }
/* 赤い点は製品の「記録中」の印。使うのはロゴ（Imalog の印）と手順3の2か所だけ */
.rec { white-space: nowrap; }
.rec::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 4px 1px 2px; border-radius: 50%; background: var(--blue); vertical-align: middle; }

/* 会社で入れる */
.ima #company :is(.para, .rule, .spec, .cprice-box, .howto, .also) { max-width: none; }
.ima #company > .container > .ctarow { justify-content: flex-end; }
.ima #company .ctarow .also { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.ima #company .ctarow .btn-pill { flex-shrink: 0; }
.rule { max-width: 760px; margin-top: 36px; padding: 26px 30px; }
.rule h3 { margin-bottom: 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
.rule p { font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.spec { max-width: 760px; margin-top: 28px; }
.spec summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; border-radius: var(--r-card); background: var(--blue-pale); color: var(--blue); font-size: 15px; font-weight: 700; }
.spec summary::-webkit-details-marker { display: none; }
.spec summary::after { content: "+"; font-family: var(--font-en); font-size: 24px; font-weight: 300; line-height: 1; }
.spec[open] summary::after { content: "\2212"; }
.ima .spec::details-content { opacity: 0; transition: opacity 180ms ease-out, content-visibility 180ms allow-discrete; }
.ima .spec[open]::details-content { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ima .spec::details-content { transition: none; }
}
.spec table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.spec th { width: 180px; padding-right: 20px; font-weight: 700; color: var(--ink); }
.spec td { color: var(--ink-soft); }
.cprice-box { max-width: 760px; margin-top: 28px; padding: 8px 28px 18px; }
.cprice li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; font-size: 15px; color: var(--ink); }
.cprice li + li { border-top: 1px solid var(--line); }
.cprice b { font-size: 18px; font-weight: 700; white-space: nowrap; }
.cprice b .num { font-size: 22px; font-weight: 600; }
.cpnote { font-size: 13px; color: var(--ink-mute); }
.howto { max-width: 760px; margin-top: 14px; font-size: 13px; line-height: 1.8; color: var(--ink-mute); }
.also { max-width: 760px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.8; color: var(--ink-soft); }

/* 買う前に */
.qa { margin-top: 40px; border-top: 1px solid var(--line); }
.qrow { display: grid; grid-template-columns: 320px 1fr; gap: 40px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.qa h3 { font-size: 17px; line-height: 1.6; font-weight: 700; color: var(--ink); }
.qa p { font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.qa p + p { margin-top: 8px; }
.mlist li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.9; color: var(--ink-soft); }
.mlist li + li { margin-top: 8px; }
.mlist b { display: inline-block; min-width: 5.5em; margin-right: 6px; font-weight: 700; color: var(--ink); }

/* よくある質問（PCでは2列・4行） */
.ima .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; max-width: none; margin-top: 36px; }
.ima .faq details { min-width: 0; margin-bottom: 0; }
.ima .faq summary { min-height: 128px; padding: 20px 18px; gap: 10px; align-items: center; }
.ima .faq summary .q, .ima .faq summary::after { flex: none; }
.ima .faq .a { padding: 0 18px 20px; overflow-wrap: anywhere; }
.ima .faq .a code { font-size: 13px; }
.ima .faq details[open] .a { animation: ima-faq-answer-in 180ms ease-out; }
.ima .ima-faq-cta-lead { margin-top: 32px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.6; color: var(--ink); text-align: center; }
.ima .ima-faq-cta { justify-content: center; margin-top: 16px; }
@keyframes ima-faq-answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ima .faq details[open] .a { animation: none; }
}

/* Imalog の足もと（法務4つと注記・本体の足もとの上の白い1段） */
.ima-foot { margin: 24px var(--edge) 0; padding: 28px 0; background: var(--surface); border-radius: var(--r-section); font-size: 12.5px; line-height: 1.8; color: var(--ink-mute); }
.ima-no-shadow #faq { padding-bottom: 32px; }
.ima-no-shadow .ima-foot { margin-top: 0; padding: 20px 0; background: transparent; border-radius: 0; text-align: center; }
.ima-no-shadow .ima-foot .flinks { justify-content: center; }
.ima-no-shadow .ima-foot + .footer-action-cta { margin-top: 24px; }
.ima-foot .flinks { display: flex; flex-wrap: wrap; gap: 6px 0; }
.ima-foot .flinks a { padding: 0 14px; border-left: 1px solid var(--line); color: var(--ink-soft); font-weight: 600; }
.ima-foot .flinks a:first-child { padding-left: 0; border-left: 0; }
.ima-foot .flinks a:hover { color: var(--blue); }
.ima-foot .notes { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ima-foot .notes a { color: var(--blue); }
.ima .site-footer { margin-top: 24px; }

/* 法務のページ（本体のプライバシーポリシーと同じ .legal-wrap に入れる） */
.ima-legal .ima-head .side-sub { font-size: 16px; }
.ima-legal-sec { padding-top: 48px; }
.ima-legal .legal-wrap h3 { margin: 28px 0 8px; font-size: 16px; font-weight: 700; color: var(--ink); }
.ima-legal .legal-wrap p + p { margin-top: 10px; }
.ima-legal .legal-wrap ol, .ima-legal .legal-wrap ul { padding-left: 1.5em; margin-top: 8px; }
.ima-legal .legal-wrap ol { list-style: decimal; }
.ima-legal .legal-wrap ul { list-style: disc; }
.ima-legal .legal-wrap li { margin-bottom: 6px; }
.ima-legal .legal-wrap a { color: var(--blue); overflow-wrap: anywhere; }
.ima-legal .legal-wrap tbody th { width: 30%; vertical-align: top; }
.ima-legal .legal-wrap td { vertical-align: top; }
.ima-legal .legal-wrap td p, .ima-legal .legal-wrap td li { font-size: 13px; }
.ima-legal .back { display: inline-block; margin-top: 40px; font-size: 14px; font-weight: 600; }

/* 1000 幅以下 */
@media (max-width: 1000px) {
  .promises, .where3 { grid-template-columns: 1fr; gap: 12px; }
  .ima #ask .asks h3 { min-height: calc(4.8em + 40px); }
  .ima #ask .promises.asks { grid-template-columns: 1fr; }
  .ima .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 767 幅以下（携帯・本体と同じ切れ目） */
@media (max-width: 767px) {
  .ima .faq { grid-template-columns: 1fr; gap: 12px; }
  .ima .faq summary { min-height: 0; padding: 20px 18px; }
  .ima-wide { padding: 0 20px; }
  .ima-name { gap: 12px; }
  .ima-h1 { margin-top: 24px; }
  .ima-demo-intro { margin-top: 32px; }
  .ima-demo-intro h2 { font-size: 18px; }
  .ima-head .ima-toc { gap: 6px; margin: 24px -12px 0; }
  .ima main .ima-toc a { padding: 7px 12px; font-size: 12.5px; }
  .entry2 { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .entry { padding: 24px 22px 22px; }
  .entry .big { font-size: 20px; }
  .ima-sec { padding: 72px 0; }
  .shot { margin-top: 32px; }
  .hero-movie { max-width: none; }
  .hero-movie video { aspect-ratio: 900 / 1100; }
  .movietoggle { right: 10px; bottom: 10px; }
  .movie { margin-top: 28px; }
  .facts { grid-template-columns: 1fr; gap: 10px; }
  .fact { padding: 20px 18px; }
  .fact .big .num { font-size: 34px; }
  .feature { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .feature .ftext h3 { font-size: 20px; }
  .price { padding: 28px 22px; }
  .pricebig .num { font-size: 44px; }
  .pricebig small { display: block; margin-top: 8px; }
  .steps { --step-x: 18px; --step-y: 16px; }
  .steps li { gap: 12px; }
  .subhead { margin-top: 56px; font-size: 19px; }
  .rule { padding: 22px 20px; }
  .spec tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .spec th, .spec td { display: block; width: auto; border: 0; padding: 0; }
  .spec th { font-size: 12.5px; color: var(--ink-mute); padding-bottom: 2px; }
  .cprice-box { padding: 4px 20px 14px; }
  .cprice li { flex-direction: column; gap: 2px; }
  .ima #company .ctarow .also { flex-basis: 100%; }
  .qrow { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .mlist b { display: block; }
  .ima-foot .flinks { flex-direction: column; gap: 4px; }
  .ima-foot .flinks a { padding: 0; border-left: 0; }
  .ima-legal .legal-wrap table tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; }
  .ima-legal .legal-wrap table th, .ima-legal .legal-wrap table td { display: block; width: auto; border: 0; padding: 4px 0; background: none; }
  .ima-legal .legal-wrap tbody th { color: var(--ink-mute); font-size: 12.5px; }
  .ima-legal .legal-wrap table thead { display: none; }
  .ima-legal .legal-wrap td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--ink-mute); }
}
.ima main .ima-name a, .ima main .ima-name a:hover { color: var(--ink); text-decoration: none; }