/* 医療費スキャン 公式サイトのテーマCSS（Connect-CMS のテーマ管理に全置換で貼る）。
   正はこのファイル。CMS 側で直したら必ずここへ戻す。
   色はアプリ（lib/theme.dart の AppTheme.seed）とアイコン（assets/icon/icon.png）に合わせる。 */
:root{
  --ims-primary:#1F7A6D;
  --ims-primary-dark:#175E54;
  --ims-accent:#A0DED3;
  --ims-bg:#F6F7F6;
  --ims-ink:#1F2A28;
  --ims-ink-sub:#55615E;
  --ims-border:#DDE3E1;
}

/* 共通ヘッダー */
.ims-header{background:#fff;border-bottom:1px solid var(--ims-border);}
.ims-nav{box-sizing:border-box;max-width:1080px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.ims-brand{display:flex;align-items:center;gap:10px;color:var(--ims-ink);text-decoration:none;}
.ims-brand:hover{text-decoration:none;color:var(--ims-ink);}
.ims-brand img{width:40px !important;height:40px !important;border-radius:9px;flex:none;}
.ims-brand-text{display:flex;flex-direction:column;line-height:1.25;}
.ims-brand-name{font-weight:800;font-size:18px;color:var(--ims-primary);}
.ims-brand-sub{font-size:11px;color:var(--ims-ink-sub);}
.ims-nav-links{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:700;}
.ims-nav-links a{color:var(--ims-ink-sub);white-space:nowrap;}
.ims-nav-links a:hover{color:var(--ims-primary);}

/* 共通フッター */
.ims-footer{background:var(--ims-primary);}
.ims-foot{box-sizing:border-box;max-width:1080px;margin:0 auto;padding:28px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:var(--ims-accent);font-size:13px;}
.ims-foot-links{display:flex;flex-wrap:wrap;gap:8px 24px;}
.ims-foot a{color:var(--ims-accent);}
.ims-foot a:hover{color:#fff;}

@media (max-width:480px){
  .ims-brand img{width:34px !important;height:34px !important;border-radius:8px;}
  .ims-brand-name{font-size:16px;}
  .ims-brand-sub{display:none;}
  .ims-nav-links{font-size:13px;gap:14px;}
  .ims-foot{flex-direction:column;align-items:flex-start;}
}
/* ナビ3項目を 375px 幅で1行に収めるため、狭い幅では「使い方・」を落として「サポート」だけにする */
@media (max-width:400px){
  .ims-nav-long{display:none;}
}
/* トップの節へのリンク（/#features 等）で、見出しが画面の端に張り付かないように */
.ims-top [id]{scroll-margin-top:12px;}

/* 見出しは全ページで3段に揃える（2026-11-04）。
   - ページの見出し：本文の h1／本文エリア先頭のフレームのタイトル
   - 節の見出し    ：本文の h2／フレームのタイトル／固定記事の中の h2（左に緑の太線）
   - 小見出し      ：本文の h3／フォームのフレームのタイトル（下に薄い線）
   サポートページは「固定記事 → FAQ → 固定記事 → フォーム」と別プラグインが並ぶので、
   フレームのタイトル（.card-header）も本文の見出しと同じ形にする。 */
.ims-page h1,
#ccMainArea > [id^="frame-"]:first-child .card-header{background:transparent;border:0;border-radius:0;padding:0;margin:8px 0 16px;font-size:28px;font-weight:800;line-height:1.4;color:var(--ims-primary);}
.ims-page h2,
#ccMainArea .card-header,
#ccMainArea .plugin-contents .card-body > h2{background:transparent;border:0;border-left:5px solid var(--ims-primary);border-radius:0;padding:2px 0 2px 12px;margin:40px 0 16px;font-size:22px;font-weight:800;line-height:1.4;color:var(--ims-ink);}
#ccMainArea .card-header,
#ccMainArea .plugin-contents .card-body > h2:first-child{margin-top:0;}
.ims-page h3,
#ccMainArea .plugin-forms .card-header{background:transparent;border:0;border-bottom:2px solid var(--ims-accent);border-radius:0;padding:0 0 6px;margin:28px 0 12px;font-size:17px;font-weight:800;line-height:1.4;color:var(--ims-ink);}
#ccMainArea .plugin-forms .card-header{margin-top:0;}
@media (max-width:480px){
  .ims-page h1,
  #ccMainArea > [id^="frame-"]:first-child .card-header{font-size:22px;}
  .ims-page h2,
  #ccMainArea .card-header,
  #ccMainArea .plugin-contents .card-body > h2{font-size:19px;margin-top:32px;}
  #ccMainArea .card-header,
  #ccMainArea .plugin-contents .card-body > h2:first-child{margin-top:0;}
  .ims-page h3,
  #ccMainArea .plugin-forms .card-header{font-size:16px;}
}

/* 本文ページ（プライバシーポリシー・特商法）。本文を .ims-page で包む */
.ims-page{color:var(--ims-ink);line-height:1.8;}
.ims-page a{color:var(--ims-primary);text-decoration:underline;}
.ims-page table th{background:var(--ims-bg);white-space:nowrap;width:1%;}
.ims-page thead th:first-child{width:22%;white-space:normal;}
.ims-page thead th:not(:first-child){width:auto;}
@media (max-width:480px){
  .ims-page table th{white-space:normal;width:30%;}
}

/* 本文エリアのフレーム（プラグイン）の間を空けて、節の切れ目を見せる */
#ccMainArea > [id^="frame-"] ~ [id^="frame-"]{margin-top:48px;}
/* 固定記事のすぐ後のフォームは、同じ節の続き（「お問い合わせ」→ フォーム） */
#ccMainArea > .plugin-contents + .plugin-forms{margin-top:20px;}
@media (max-width:480px){
  #ccMainArea > [id^="frame-"] ~ [id^="frame-"]{margin-top:36px;}
  #ccMainArea > .plugin-contents + .plugin-forms{margin-top:16px;}
}

/* よくある質問・ボタン */
#ccMainArea .card-body a:not(.btn){color:var(--ims-primary);}
#ccMainArea .faq-list-item h5{font-size:16px;font-weight:800;}
#ccMainArea .badge-primary{background:var(--ims-primary);}
#ccMainArea .btn-primary{background:var(--ims-primary);border-color:var(--ims-primary);}
#ccMainArea .btn-primary:hover{background:var(--ims-primary-dark);border-color:var(--ims-primary-dark);}

/* ===== トップページ（docs/site/top.html。本文を .ims-top で包む） =====
   帯（背景色の節）を画面の幅いっぱいに出すため、この記事を含む枠だけ CMS の .container の幅制限を外す。
   中身の幅は .ims-top-wrap（ヘッダー・フッターと同じ 1080px）で揃える。 */
:root{
  --ims-tint:#E8F4F1;
  --ims-white:#FFFFFF;
  --ims-cam:#16201E;
  --ims-sheet-head:#EEF1F0;
  --ims-paper:#FBFBF8;
}
#ccMainArea .plugin-contents > .container:has(.ims-top){max-width:none;padding-left:0;padding-right:0;}
#ccMainArea .plugin-contents .card:has(.ims-top){margin-bottom:0 !important;}
.ims-top{color:var(--ims-ink);line-height:1.8;font-size:15px;}
.ims-top *{box-sizing:border-box;}
.ims-top h1,.ims-top h2,.ims-top h3,.ims-top p,.ims-top ul,.ims-top ol{margin:0;}
.ims-top-wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

/* ヒーロー */
.ims-top-hero{background:linear-gradient(180deg,var(--ims-tint) 0%,var(--ims-white) 100%);overflow:hidden;}
.ims-top-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-top:56px;padding-bottom:48px;}
.ims-top-eyebrow{font-size:13px;font-weight:700;color:var(--ims-primary);letter-spacing:.06em;margin-bottom:10px !important;}
.ims-top h1{margin-bottom:18px;font-size:40px;line-height:1.35;font-weight:800;color:var(--ims-ink);text-wrap:balance;}
.ims-top h1 em{font-style:normal;color:var(--ims-primary);background:linear-gradient(transparent 68%,var(--ims-accent) 68%);}
.ims-top-lead{margin-bottom:24px !important;font-size:16px;color:var(--ims-ink-sub);max-width:34em;}
.ims-top-lead strong{color:var(--ims-ink);}
.ims-top-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px !important;padding:0;list-style:none;}
.ims-top-chips li{background:var(--ims-white);border:1px solid var(--ims-border);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:700;}
.ims-top-chips .ims-top-chip-key{color:var(--ims-primary);}
.ims-top-stores{display:flex;flex-wrap:wrap;gap:12px;}
.ims-top-store{display:flex;flex-direction:column;justify-content:center;min-width:168px;height:52px;padding:0 18px;border-radius:10px;background:var(--ims-ink);color:var(--ims-white);font-size:16px;font-weight:700;line-height:1.2;}
.ims-top-store small{font-size:10.5px;font-weight:400;opacity:.75;}
.ims-top-store-soon{background:var(--ims-white);color:var(--ims-ink-sub);border:1.5px dashed var(--ims-border);}
.ims-top-stores-note{font-size:12.5px;color:var(--ims-ink-sub);margin-top:10px !important;}

/* ヒーローのスマホの絵（読み取り画面をCSSで描いた見本） */
.ims-top-phone-col{display:flex;justify-content:center;}
.ims-top-phone{position:relative;width:268px;max-width:100%;aspect-ratio:268/548;border-radius:38px;background:var(--ims-ink);padding:10px;box-shadow:0 24px 48px -18px rgba(23,94,84,.45);}
.ims-top-screen{height:100%;border-radius:29px;overflow:hidden;background:radial-gradient(120% 80% at 50% 45%,#3A4A46 0%,var(--ims-cam) 70%);display:flex;flex-direction:column;color:var(--ims-white);}
.ims-top-row{display:flex;justify-content:space-between;gap:6px;}
.ims-top-cam-top{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 8px;font-size:11px;}
.ims-top-cam-x{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:12px;}
.ims-top-cam-cnt{background:rgba(255,255,255,.15);border-radius:999px;padding:2px 10px;}
.ims-top-toast{margin:4px 12px 0;background:var(--ims-white);border-radius:12px;padding:8px 11px;font-size:10.5px;line-height:1.5;color:var(--ims-ink);border-left:4px solid var(--ims-primary);}
.ims-top-toast b{display:block;color:var(--ims-primary);font-size:11px;}
/* 四隅の鉤（かぎ）は背景のグラデーション8本で描く（空の要素を置かないため） */
.ims-top-frame{position:relative;margin:18px 14px 0;aspect-ratio:1.414/1;
  background:
    linear-gradient(var(--ims-accent),var(--ims-accent)) top left/22px 3px,
    linear-gradient(var(--ims-accent),var(--ims-accent)) top left/3px 22px,
    linear-gradient(var(--ims-accent),var(--ims-accent)) top right/22px 3px,
    linear-gradient(var(--ims-accent),var(--ims-accent)) top right/3px 22px,
    linear-gradient(var(--ims-accent),var(--ims-accent)) bottom left/22px 3px,
    linear-gradient(var(--ims-accent),var(--ims-accent)) bottom left/3px 22px,
    linear-gradient(var(--ims-accent),var(--ims-accent)) bottom right/22px 3px,
    linear-gradient(var(--ims-accent),var(--ims-accent)) bottom right/3px 22px;
  background-repeat:no-repeat;}
.ims-top-frame::after{content:"";position:absolute;left:8px;right:8px;height:2px;top:50%;background:var(--ims-accent);box-shadow:0 0 8px var(--ims-accent);animation:ims-top-scan 2.6s ease-in-out infinite;}
@keyframes ims-top-scan{0%,100%{top:14%}50%{top:84%}}
.ims-top-receipt{position:absolute;inset:12px 14px;background:var(--ims-paper);color:var(--ims-ink);border-radius:2px;transform:rotate(-1.5deg);padding:6px 9px;display:flex;flex-direction:column;gap:1px;font-size:7.5px;line-height:1.5;box-shadow:0 4px 10px rgba(0,0,0,.35);}
.ims-top-receipt-title{font-size:8.5px;font-weight:800;text-align:center;letter-spacing:.3em;}
.ims-top-receipt-total{margin-top:auto;font-weight:800;border-top:1px solid #D3D8D6;padding-top:2px;}
.ims-top-frame-cap{text-align:center;color:rgba(255,255,255,.8);font-size:9.5px;margin-top:6px;}
.ims-top-list{margin:auto 10px 0;background:rgba(255,255,255,.1);border-radius:12px;padding:6px 10px;font-size:9.5px;line-height:1.9;}
.ims-top-list .ims-top-row{border-bottom:1px solid rgba(255,255,255,.1);}
.ims-top-list .ims-top-row:last-child{border-bottom:0;}
.ims-top-cam-btns{display:flex;justify-content:space-around;align-items:center;padding:10px 0 18px;font-size:10px;}
.ims-top-cam-btns span{height:32px;min-width:44px;border-radius:999px;background:rgba(255,255,255,.15);display:grid;place-items:center;padding:0 10px;}
.ims-top-cam-btns .ims-top-cam-end{background:var(--ims-white);color:var(--ims-ink);font-size:11px;font-weight:700;padding:0 18px;}
.ims-top-sample{position:absolute;right:-6px;bottom:-28px;font-size:11px;color:var(--ims-ink-sub);}

/* 節の共通 */
.ims-top-sec{padding:72px 0;}
.ims-top-alt{background:var(--ims-bg);}
.ims-top h2{margin-bottom:12px;font-size:28px;font-weight:800;line-height:1.4;color:var(--ims-ink);text-wrap:balance;}
.ims-top-sub{margin-bottom:36px !important;color:var(--ims-ink-sub);max-width:40em;}
.ims-top-note{margin-top:22px !important;font-size:13.5px;color:var(--ims-ink-sub);}
#ccMainArea .ims-top-note a{color:var(--ims-primary);text-decoration:underline;}

/* 3ステップ */
.ims-top-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0;list-style:none;counter-reset:ims-st;}
.ims-top-steps li{position:relative;background:var(--ims-white);border:1px solid var(--ims-border);border-radius:14px;padding:26px 22px 22px;counter-increment:ims-st;min-width:0;}
.ims-top-steps li::before{content:"STEP " counter(ims-st);display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ims-white);background:var(--ims-primary);border-radius:6px;padding:1px 8px;margin-bottom:12px;}
.ims-top-steps li:not(:last-child)::after{content:"";position:absolute;top:50%;right:-15px;width:10px;height:10px;border-top:2.5px solid var(--ims-accent);border-right:2.5px solid var(--ims-accent);transform:translateY(-50%) rotate(45deg);}
.ims-top h3{margin-bottom:6px;font-size:18px;font-weight:800;line-height:1.5;color:var(--ims-ink);}
.ims-top-steps p{font-size:14px;color:var(--ims-ink-sub);}

/* CSVの見本（医療費集計フォーム風。行番号は8行目＝見出し、9行目から貼る） */
.ims-top-sheet-box{background:var(--ims-white);border:1px solid var(--ims-border);border-radius:12px;overflow:hidden;}
.ims-top-sheet-cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:10px 16px;background:var(--ims-sheet-head);border-bottom:1px solid var(--ims-border);font-size:12.5px;color:var(--ims-ink-sub);}
.ims-top-sheet-cap b{color:var(--ims-ink);}
.ims-top-sheet-scroll{overflow-x:auto;}
.ims-top-sheet{border-collapse:collapse;width:100%;min-width:860px;margin:0;font-size:12.5px;line-height:1.45;}
.ims-top-sheet th,.ims-top-sheet td{border:1px solid var(--ims-border);padding:6px 8px;text-align:left;vertical-align:middle;}
.ims-top-sheet .ims-top-col th{background:var(--ims-sheet-head);color:var(--ims-ink-sub);font-weight:500;text-align:center;font-size:11.5px;padding:3px;}
.ims-top-sheet .ims-top-lbl th{background:var(--ims-tint);font-weight:700;font-size:11.5px;color:var(--ims-ink);}
.ims-top-sheet .ims-top-rn{background:var(--ims-sheet-head);color:var(--ims-ink-sub);text-align:center;width:36px;font-weight:500;}
.ims-top-num{text-align:right !important;font-variant-numeric:tabular-nums;}
.ims-top-flag{color:var(--ims-primary);font-weight:700;white-space:nowrap;}
.ims-top-empty{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--ims-bg) 6px 7px);}
.ims-top-sheet tbody tr:first-child td:not(.ims-top-rn){box-shadow:inset 0 2px 0 var(--ims-primary);}
.ims-top-sheet-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px !important;padding:0;list-style:none;font-size:13.5px;color:var(--ims-ink-sub);}
.ims-top-sheet-notes li{min-width:0;}
.ims-top-sheet-notes b{display:block;color:var(--ims-ink);font-size:14px;}

/* 特長。アイコンは ::before に背景で描く（CMS の編集で svg や空の要素が落ちないように） */
.ims-top-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px;}
.ims-top-feat{position:relative;padding-left:60px;min-width:0;}
.ims-top-feat::before{content:"";position:absolute;left:0;top:0;width:44px;height:44px;border-radius:12px;background:var(--ims-tint) no-repeat center/24px 24px;}
.ims-top-ic-scan::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M7 12h10'/%3E%3C/svg%3E");}
.ims-top-ic-dup::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2M11 14l2 2 4-4'/%3E%3C/svg%3E");}
.ims-top-ic-family::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17.5' cy='9.5' r='2.5'/%3E%3Cpath d='M15.5 14.6A5 5 0 0 1 21.5 19'/%3E%3C/svg%3E");}
.ims-top-ic-year::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");}
.ims-top-feat h3{font-size:17px;margin-bottom:4px;}
.ims-top-feat p{font-size:14px;color:var(--ims-ink-sub);}

/* 「端末の外に出ません」の帯 */
.ims-top-privacy{margin-top:48px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--ims-primary);border-radius:16px;padding:24px 28px;}
.ims-top-privacy::before{content:"";width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0DED3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") no-repeat center/26px 26px;}
.ims-top-privacy h3{color:var(--ims-white);font-size:18px;margin-bottom:2px;}
.ims-top-privacy p{font-size:13.5px;color:var(--ims-accent);line-height:1.7;}
#ccMainArea .ims-top-privacy a{color:var(--ims-white);font-weight:700;font-size:14px;white-space:nowrap;}

/* 料金 */
.ims-top-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:820px;}
.ims-top-plan{border:1px solid var(--ims-border);border-radius:16px;padding:26px 26px 22px;background:var(--ims-white);min-width:0;}
.ims-top-plan-paid{border:2px solid var(--ims-primary);}
.ims-top-plan-name{font-size:14px;font-weight:700;color:var(--ims-ink-sub);}
.ims-top-price{margin:4px 0 12px !important;font-size:34px;font-weight:800;line-height:1.2;color:var(--ims-ink);}
.ims-top-plan-paid .ims-top-price{color:var(--ims-primary);}
.ims-top-price small{font-size:14px;font-weight:700;color:var(--ims-ink-sub);margin-left:6px;}
.ims-top-plan ul{padding-left:1.2em;font-size:14px;color:var(--ims-ink-sub);}

/* サポートへの案内 */
.ims-top-cta{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;}
.ims-top-cta h2{margin-bottom:0;}
.ims-top-cta p{margin-top:4px !important;color:var(--ims-ink-sub);font-size:14px;}
#ccMainArea .ims-top a.ims-top-btn{display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:999px;background:var(--ims-primary);color:var(--ims-white);font-weight:700;text-decoration:none;white-space:nowrap;}
#ccMainArea .ims-top a.ims-top-btn:hover{background:var(--ims-primary-dark);}

@media (max-width:860px){
  .ims-top-hero-grid{grid-template-columns:minmax(0,1fr);padding-top:40px;padding-bottom:56px;gap:44px;}
  .ims-top h1{font-size:32px;}
  .ims-top-steps,.ims-top-sheet-notes,.ims-top-feats,.ims-top-plans{grid-template-columns:minmax(0,1fr);}
  .ims-top-steps li:not(:last-child)::after{top:auto;bottom:-15px;right:50%;transform:translateX(50%) rotate(135deg);}
  .ims-top-privacy{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:480px){
  .ims-top-wrap{padding:0 16px;}
  .ims-top h1{font-size:27px;}
  .ims-top-lead{font-size:15px;}
  .ims-top-sec{padding:52px 0;}
  .ims-top h2{font-size:22px;}
  .ims-top-store{min-width:0;flex:1 1 140px;}
}
@media (prefers-reduced-motion:reduce){.ims-top-frame::after{animation:none;}}