/* =========================================================
   口臭検査結果説明ツール v1  style.css
   iPad横画面 / 16:9 / スクロールなし1画面完結 / 印刷A4縦
   ========================================================= */

:root{
  /* ---- 配色：白基調 + 清潔感のあるティール ---- */
  --bg:        #f3f8f9;
  --surface:   #ffffff;
  --ink:       #214b54;   /* 濃いティールグレー（本文） */
  --ink-soft:  #4f7178;
  --line:      #d9e8ea;
  --primary:   #1f9aa8;   /* メインのティール */
  --primary-d: #157884;
  --primary-l: #e4f4f5;
  --mint:      #eef7f3;

  /* ---- ガス別カラー ---- */
  --h2s:    #2f7fd1;  --h2s-l:  #e6f0fb;   /* 青 */
  --ch3sh:  #e0892f;  --ch3sh-l:#fbefdf;   /* オレンジ */
  --dms:    #8a6cc6;  --dms-l:  #efe9f9;   /* 紫 */

  --shadow: 0 2px 10px rgba(33,75,84,.07);
  --radius: 18px;

  --tabbar-h: 70px;
  --navbar-h: 56px;
}

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  overflow:hidden;                 /* 横スクロール禁止・1画面 */
}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:18px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

/* ============ 上部タブバー ============ */
.tabbar{
  height:var(--tabbar-h);
  display:flex; align-items:center; gap:18px;
  padding:0 20px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:fixed; inset:0 0 auto 0; z-index:50;
}
.brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.brand-mark{ font-size:24px; }
.brand-text{ font-weight:700; color:var(--primary-d); font-size:16px; white-space:nowrap; }
.tabs{ display:flex; gap:6px; flex:1; }
.tab{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  height:50px;
  border:1px solid var(--line);
  background:#fbfdfd;
  color:var(--ink-soft);
  border-radius:12px;
  font-size:13.5px; font-weight:600;
  padding:0 2px;
  cursor:pointer;
  transition:.15s;
  -webkit-tap-highlight-color:transparent;
}
.tab .tab-no{
  font-size:11px; line-height:1;
  color:#9fbabd;
  font-weight:700;
}
.tab:hover{ border-color:var(--primary); }
.tab.is-active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:var(--shadow);
}
.tab.is-active .tab-no{ color:rgba(255,255,255,.8); }

/* ============ ステージ・ページ ============ */
.stage{
  position:fixed;
  top:var(--tabbar-h); left:0; right:0; bottom:var(--navbar-h);
  overflow:hidden;
}
.page{ display:none; height:100%; flex-direction:column; }
.page.is-active{ display:flex; }

.page-body{
  flex:1;
  min-height:0;
  padding:30px 34px 26px;
  overflow:hidden;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; }
.col-wide-left{ grid-template-columns:1.5fr 1fr; }
.col-wide-right{ grid-template-columns:1fr 1.25fr; }
.col-left,.col-right{ min-width:0; display:flex; flex-direction:column; }
.col-center{ justify-content:center; }

/* ============ Page 1：導入（上段2カラム＋下段フロー帯） ============ */
.p1-body{ display:flex; flex-direction:column; gap:18px; }
.p1-top{ flex:1; min-height:0; align-items:center; }
.p1-top .p1-img{ flex:0 1 auto; max-height:100%; align-self:center; width:100%; }
.p1-top .p1-img .img-ph{ min-height:200px; max-height:380px; }

.p1-flow{
  flex:1; min-height:0;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px 24px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
}
.p1-flow-title{ margin:0; font-size:19px; color:var(--primary-d); font-weight:700; }
.p1-flow-steps{ flex:1; min-height:0; display:flex; align-items:stretch; gap:14px; }
.p1-step{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:8px;
  background:var(--mint); border:1px solid #d6ebe8; border-radius:13px;
  padding:16px 18px;
}
.p1-step-head{ display:flex; align-items:center; justify-content:space-between; }
.p1-step-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:16px; font-weight:700;
  flex-shrink:0;
}
.p1-step-icon{ font-size:26px; }
.p1-step-body{ flex:1; display:flex; flex-direction:column; gap:6px; }
.p1-step-body h3{ margin:0; font-size:17px; color:var(--primary-d); line-height:1.35; }
.p1-step-body p{ margin:0; font-size:15px; line-height:1.55; color:var(--ink); flex:1; }
.p1-step-memo{
  margin-top:auto; font-size:13px; color:var(--primary-d);
  background:#fff; border:1px solid #cfe8e8; border-radius:9px;
  padding:7px 10px;
}
.p1-arrow{ display:flex; align-items:center; font-size:24px; color:var(--primary); flex-shrink:0; }

.page-title{
  font-size:26px;
  font-weight:700;
  color:var(--primary-d);
  margin:0 0 16px;
  letter-spacing:.01em;
}
.sub-title{ font-size:20px; color:var(--primary-d); margin:0 0 12px; }

/* ---- 汎用カード ---- */
.card-list{ display:flex; flex-direction:column; gap:14px; }
.info-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:5px solid var(--primary);
  border-radius:14px;
  padding:18px 20px;
  font-size:20px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:12px;
}
.bullet-dot{ width:12px;height:12px;border-radius:50%;background:var(--primary);flex-shrink:0; }
.info-card strong{ color:var(--primary-d); }

/* ---- 画像エリア（プレースホルダー） ---- */
.img-area{ margin:0; display:flex; flex-direction:column; flex:1; min-height:0; }
.img-inline{ flex:0 0 auto; margin-top:14px; }
.img-ph{
  flex:1; min-height:120px;
  position:relative;
  background:var(--mint);
  border:2px dashed #b6d8d6;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.img-ph.slim{ min-height:96px; max-height:130px; }
.img-ph img{ max-width:100%; max-height:100%; object-fit:contain; }
.img-fallback{
  display:none;
  flex-direction:column; align-items:center; gap:8px;
  color:var(--ink-soft);
}
.img-ph.img-missing .img-fallback{ display:flex; }
/* 画像が正常に読み込めたら、点線プレースホルダーからクリーンな枠へ */
.img-ph.img-loaded{
  flex:0 1 auto; min-height:0;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:0;
}
.img-ph.img-loaded img{ width:100%; height:auto; max-height:100%; border-radius:13px; }
.img-icon{ font-size:42px; opacity:.65; }
.img-name{ font-size:13px; font-family:monospace; color:#7fa3a6; }
figcaption{ text-align:center; margin-top:8px; font-size:15px; color:var(--ink-soft); }

/* ---- 注記 ---- */
.note{ font-size:13px; color:var(--ink-soft); margin:14px 0 0; line-height:1.5; }

/* ============ Page 2：入力 + グラフ ============ */
.input-block{ display:flex; flex-direction:column; gap:14px; }
.num-field{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:14px 18px; box-shadow:var(--shadow);
}
.input-block{ display:flex; flex-direction:column; gap:22px; flex:1; justify-content:center; }
.num-field{
  border:1px solid var(--line);
  border-radius:16px; padding:26px 28px; box-shadow:var(--shadow);
}
.num-name{ font-size:23px; font-weight:700; }
.num-name small{ display:block; font-size:15px; font-weight:500; color:var(--ink-soft); margin-top:4px; }
.gas-h2s{ color:var(--h2s); }
.gas-ch3sh{ color:var(--ch3sh); }
.gas-dms{ color:var(--dms); }
.num-input-wrap{ display:flex; align-items:center; gap:8px; }
.num-input-wrap input{
  width:150px; font-size:32px; font-weight:700; text-align:right;
  padding:12px 16px; border:2px solid var(--line); border-radius:14px;
  color:var(--ink); background:#fff;
}
.num-input-wrap input:focus{ outline:none; border-color:var(--primary); }
.unit{ color:var(--ink-soft); font-size:17px; }

.chart{ display:flex; flex-direction:column; justify-content:center; gap:34px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:30px; box-shadow:var(--shadow); flex:1; }
.chart-row{ display:grid; grid-template-columns:1fr; gap:10px; }
.chart-head{ display:flex; justify-content:space-between; align-items:baseline; }
.chart-name{ font-weight:700; font-size:20px; }
.chart-judge{ font-size:17px; font-weight:700; color:var(--ink-soft); }
.chart-track{
  position:relative; height:38px; background:#eef4f5; border-radius:19px; overflow:hidden;
}
.chart-fill{ height:100%; width:0; border-radius:19px; transition:width .35s ease; }
.chart-fill.gas-h2s{ background:linear-gradient(90deg,#5ea3e0,var(--h2s)); }
.chart-fill.gas-ch3sh{ background:linear-gradient(90deg,#e6a85a,var(--ch3sh)); }
.chart-fill.gas-dms{ background:linear-gradient(90deg,#a98fd6,var(--dms)); }
.chart-tick{ position:absolute; top:0; bottom:0; width:2px; background:rgba(33,75,84,.18); z-index:2; }
.chart-tick.mild{ left:33.3%; }
.chart-tick.high{ left:66.6%; }
.chart-val{ font-size:15px; color:var(--ink-soft); text-align:right; }

.result-row{ display:flex; gap:16px; margin-top:20px; flex-wrap:wrap; flex-shrink:0; }
.result-pill{
  flex:1; min-width:0;
  background:var(--primary-l); border:1px solid #bfe2e5; border-radius:16px;
  padding:20px 22px; font-size:18px; color:var(--primary-d);
}
.result-pill strong{ font-size:21px; }
.result-pill.subtle{ background:#fbfdfd; border-color:var(--line); color:var(--ink); }

/* ============ Page 3：ガスカード ============ */
#page-3 .page-body{ display:flex; flex-direction:column; }
.three-col{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; flex:1; grid-template-rows:1fr; }
.gas-card{
  background:var(--surface); border:1px solid var(--line);
  border-top:6px solid var(--primary); border-radius:16px;
  padding:14px 22px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:7px;
}
.border-h2s{ border-top-color:var(--h2s); }
.border-ch3sh{ border-top-color:var(--ch3sh); }
.border-dms{ border-top-color:var(--dms); }
.gas-card-title{ font-size:24px; margin:0; }
.gas-card-title small{ display:block; font-size:14px; color:var(--ink-soft); font-weight:600; margin-top:1px; }

.gas-info-row{ display:flex; flex-direction:row; gap:8px; }
.gas-info-box{
  flex:1; min-width:0;
  background:var(--mint); border:1px solid #d6ebe8; border-radius:11px;
  padding:8px 12px;
}
.gas-info-label{
  display:inline-block; font-size:12.5px; font-weight:700; color:var(--primary-d);
  background:#fff; border:1px solid #cfe8e8; border-radius:8px;
  padding:1px 8px; margin-bottom:3px;
}
.gas-info-box p{ margin:0; font-size:14px; line-height:1.35; color:var(--ink); }

.tick-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; flex:1; justify-content:space-between; }
.tick-list li{ position:relative; padding:5px 0 5px 26px; font-size:16px; line-height:1.4; border-bottom:1px solid var(--line); }
.tick-list li:last-child{ border-bottom:none; }
.tick-list li::before{ content:"✓"; position:absolute; left:0; top:5px; color:var(--primary); font-weight:700; font-size:16px; }
.tick-list li strong{ color:var(--ink); }
.gas-card-desc{ margin:0; font-size:15px; color:var(--ink-soft); background:var(--mint); padding:11px 16px; border-radius:12px; line-height:1.55; }

/* ============ Page 4：原因タイプ ============ */
.p4-body{ display:flex; flex-direction:column; gap:14px; }
.p4-top{ flex:1.1; min-height:0; }
.p4-top .p4-img{ flex:0 1 auto; max-height:100%; align-self:center; width:100%; }
.p4-top .p4-img .img-ph{ min-height:160px; max-height:320px; }

.type-result{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; }
.type-empty{ color:var(--ink-soft); background:var(--surface); border:1px dashed var(--line); border-radius:14px; padding:24px; font-size:18px; }
.type-main{
  background:var(--primary-l); border:1px solid #bfe2e5; border-left:6px solid var(--primary);
  border-radius:16px; padding:18px 24px; box-shadow:var(--shadow);
  flex:1.3; display:flex; flex-direction:column; justify-content:center; min-height:0;
}
.type-main .type-tag{ font-size:14px; font-weight:700; color:var(--primary-d); background:#fff; display:inline-block; padding:4px 12px; border-radius:20px; margin-bottom:10px; }
.type-main h2{ font-size:25px; margin:0 0 8px; color:var(--primary-d); }
.type-main p{ margin:0; font-size:17px; line-height:1.5; }
.vas-echo:not(:empty){ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; font-size:16px; }
.vas-echo strong{ color:var(--primary-d); }

.type-secondary{
  flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:12px 20px; box-shadow:var(--shadow);
}
.type-secondary-label{ font-size:13px; font-weight:700; color:var(--primary-d); }
.type-secondary ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.type-secondary li{ font-size:15px; line-height:1.4; color:var(--ink); }

/* ---- 原因タイプ早見表 ---- */
.p4-types{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; }
.p4-types-title{ margin:0; font-size:23px; color:var(--primary-d); font-weight:700; }
.p4-type-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:10px; }
.p4-type-card{
  background:var(--surface); border:1.5px solid var(--line); border-radius:14px;
  padding:10px 18px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:4px; min-height:0; overflow:hidden;
  justify-content:center;
  transition:.15s;
}
.p4-type-card .p4-type-head{ display:flex; align-items:flex-start; gap:6px; flex-wrap:wrap; }
.p4-type-card .p4-type-head h3{ flex:1; min-width:0; }
.p4-type-card .p4-type-icon{ font-size:26px; }
.p4-type-card h3{ margin:0; font-size:19px; color:var(--primary-d); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.p4-type-card p{ margin:0; font-size:15.5px; line-height:21.7px; height:43.4px; color:var(--ink-soft); overflow:hidden; flex-shrink:0; }
.p4-type-card.is-current{
  border-color:var(--primary); border-width:2px;
  background:var(--primary-l);
  box-shadow:0 0 0 3px rgba(31,154,168,.15);
}
.p4-type-card.is-current h3{ color:var(--primary-d); }
.p4-current-badge{
  flex-shrink:0;
  font-size:14px; font-weight:700; color:#fff; background:var(--primary);
  border-radius:8px; padding:5px 12px; white-space:nowrap;
}
.p4-type-card.is-secondary{
  border-color:#cfe2c8; background:#f6faf4;
}
.p4-secondary-badge{
  flex-shrink:0;
  font-size:14px; font-weight:700; color:#5a8a4a; background:#e7f3e1;
  border:1px solid #cfe2c8;
  border-radius:8px; padding:5px 12px; white-space:nowrap;
}
.p4-types .note{ margin:0; flex-shrink:0; }

/* ============ Page 5：チェック + VAS ============ */
#page-5 .page-body{ display:flex; flex-direction:column; }
#page-5 .page-title{ flex-shrink:0; }
.check-and-vas{ display:grid; grid-template-columns:1fr 300px; gap:20px; flex:1; min-height:0; }
.check-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1.25fr 1.15fr 0.8fr; gap:9px; overflow:hidden; }
.check-cat{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:9px 14px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.check-cat h3{
  margin:0 0 3px; font-size:18px; color:var(--primary-d);
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--line); padding-bottom:5px; flex-shrink:0;
}
.check-cat.span2{ grid-column:span 2; }
.check-cat.span3{ grid-column:span 3; }
.chk{
  display:flex; align-items:center; gap:7px;
  padding:2px 4px; font-size:16px; cursor:pointer; border-radius:8px;
  -webkit-tap-highlight-color:transparent; line-height:1.3;
}
.chk:hover{ background:var(--mint); }
.chk input{ width:21px; height:21px; accent-color:var(--primary); flex-shrink:0; }
.chk.span-half{ display:inline-flex; width:calc(50% - 4px); }
.chk-items{ display:flex; flex-wrap:wrap; flex:1; align-content:space-evenly; min-height:0; }
.cat5 .chk{ width:calc(50% - 2px); }
.cat8 .chk-items{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px 10px; align-content:space-evenly; }
.cat8 .chk{ width:auto; font-size:15px; }

.vas-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:14px;
}
.vas-head{ display:flex; flex-direction:column; gap:3px; }
.vas-title{ font-size:21px; font-weight:700; color:var(--primary-d); }
.vas-current{ font-size:16px; font-weight:700; color:var(--primary); }
.vas-scale{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.vas-btn{
  aspect-ratio:1/1; border:1.5px solid var(--line); background:#fbfdfd;
  border-radius:11px; font-size:21px; font-weight:700; color:var(--ink-soft);
  cursor:pointer; transition:.12s; -webkit-tap-highlight-color:transparent;
}
.vas-btn:hover{ border-color:var(--primary); }
.vas-btn.is-sel{ background:var(--primary); color:#fff; border-color:var(--primary); }
.vas-ends{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); white-space:nowrap; gap:8px; }
.vas-legend{ list-style:none; margin:0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:10px; flex:1; justify-content:center; }
.vas-legend li{ display:flex; align-items:center; gap:10px; font-size:16px; color:var(--ink); }
.vas-dot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.dot-low{ background:#3a8f7a; }
.dot-mid{ background:#c07a1f; }
.dot-high{ background:#b15a3a; }
.vas-info-card{
  background:var(--mint); border:1px solid #cce6e3;
  border-radius:12px; padding:14px 16px;
}
.vas-info-card h3{ margin:0 0 6px; font-size:16px; color:var(--primary-d); }
.vas-info-card p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink); }

/* ============ Page 6：改善プラン（中心＋確認＋共通ケア） ============ */
#page-6 .page-body{ display:flex; flex-direction:column; }
.plan6{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.plan6 .type-empty{ margin:auto 0; }
.plan6-grid{
  flex:1; min-height:0;
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px; align-items:stretch;
}
.p6card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
}
.p6card h2{
  margin:0 0 9px; font-size:16.5px; color:var(--primary-d);
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.p6card h2 .p6ico{ font-size:19px; }
/* 左：プランランキング */
.central-card{ border-left:6px solid var(--primary); background:linear-gradient(180deg,var(--primary-l),#fff 55%); gap:8px; }
.plan-rank{ border-radius:11px; }
.plan-rank-1{
  flex:2; min-height:0; display:flex; flex-direction:column; justify-content:space-between;
  background:#fff; border:1.5px solid #bfe2e5; padding:11px 13px;
}
.rank-head{ display:flex; align-items:center; gap:8px; margin-bottom:7px; flex-shrink:0; }
.rank-tag{ font-size:12.5px; font-weight:700; padding:4px 12px; border-radius:18px; white-space:nowrap; }
.rank-tag-1{ background:var(--primary); color:#fff; }
.rank-tag-sub{ background:#e6f4ee; color:#3a8f7a; border:1px solid #bfe0d2; }
.rank-title{ font-size:24px; font-weight:700; color:var(--primary-d); margin:0 0 7px; line-height:1.3; }
.rank-ico{ font-size:23px; margin-right:5px; }
.rank-detail{ margin:0 0 4px; font-size:15px; line-height:1.5; color:var(--ink); }
.rank-effect{
  margin:0 0 4px; font-size:13.5px; font-weight:700; color:#3a8f7a;
  background:#eef8f3; border-radius:8px; padding:6px 9px; align-self:flex-start;
}
.rank-flow{ display:flex; flex-direction:column; gap:6px; margin:0 0 4px; }
.rank-flow-step{ flex-shrink:0; }
.rank-flow-step{
  display:flex; align-items:center; gap:10px; font-size:16px; color:var(--ink);
  background:var(--mint); border-radius:9px; padding:8px 12px;
}
.rf-no{
  width:21px; height:21px; border-radius:50%; background:var(--primary); color:#fff;
  font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rank-note{ margin:0; font-size:13px; color:var(--ink-soft); background:var(--mint); border-radius:9px; padding:7px 10px; line-height:1.45; }
.plan-rank-sub{ background:#fff; border:1px solid var(--line); padding:9px 12px; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.plan-rank-sub .rank-head{ margin-bottom:4px; }
.rank-sub-title{ font-size:17px; font-weight:700; color:var(--primary-d); }
.rank-ico-s{ font-size:18px; margin-right:4px; }
.rank-sub-detail{ margin:0 0 4px; font-size:13.5px; line-height:1.5; color:var(--ink); }
.rank-sub-effect{ margin:0; font-size:12px; font-weight:700; color:#3a8f7a; background:#eef8f3; border-radius:8px; padding:4px 8px; align-self:flex-start; flex-shrink:0; }
/* 3プラン時の圧縮表示 */
.plans-3 .rank-title{ font-size:21px; margin:0 0 6px; }
.plans-3 .rank-detail{ font-size:14px; margin:0 0 8px; }
.plans-3 .rank-effect{ margin:auto 0 0; }
.plans-3 .rank-note{ display:none; }
.plans-3 .rank-sub-detail{ font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2-point p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.plan-rank-sub.compact{ padding:6px 12px; gap:2px; }
.plan-rank-sub.compact .rank-sub-effect{ display:none; }
.plan-rank-1.compact{ padding:8px 11px; }
.plan-rank-1.compact .rank-title{ font-size:21px; margin:0 0 4px; }
.plan-rank-1.compact .rank-note{ padding:6px 9px; }
/* 中央：一緒に確認すること */
.aux-list{ list-style:none; margin:0; padding:0; flex:1; min-height:0; display:flex; flex-direction:column; gap:7px; overflow:hidden; justify-content:space-between; }
.aux-list li{
  position:relative;
  background:var(--mint); border:1px solid #d6ebe8; border-radius:10px;
  padding:8px 11px 8px 36px;
}
.aux-list li::before{
  content:""; position:absolute; left:11px; top:11px;
  width:15px; height:15px; border:2px solid var(--primary); border-radius:5px;
}
.aux-main{ font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.35; }
.aux-sub{ font-size:13px; color:var(--ink-soft); line-height:1.4; margin-top:2px; }
/* 右：今日からの共通ケア */
.care-card{ background:#f8fcfc; }
.care-list{ list-style:none; margin:0; padding:0; flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; overflow:hidden; justify-content:space-evenly; }
.care-list li{ position:relative; padding-left:25px; line-height:1.4; }
.care-list li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--primary); font-weight:700; font-size:16px; }
.care-main{ display:block; font-size:15.5px; font-weight:700; color:var(--ink); }
.care-tip{ display:block; font-size:13px; color:var(--ink-soft); margin-top:1px; }
.care-point{
  margin-top:10px; background:#fff; border:1px solid #d6ebe8; border-radius:10px;
  padding:9px 11px; flex-shrink:0;
}
.care-point h3{ margin:0 0 5px; font-size:14.5px; color:var(--primary-d); }
.care-point p{ margin:0; font-size:13px; line-height:1.5; color:var(--ink-soft); }
/* 再測定目安バー */
.remeasure-bar{
  flex-shrink:0;
  background:var(--primary-l); border:1px solid #bfe2e5; border-radius:13px;
  padding:13px 18px; font-size:16px; color:var(--primary-d);
  display:flex; align-items:center; gap:10px;
}
.remeasure-bar strong{ font-weight:700; }
.remeasure-bar .rm-ico{ font-size:18px; }

.summary-msg{
  margin-top:18px; background:var(--mint); border:1px solid #cce6e3;
  border-radius:14px; padding:18px; font-size:17px; line-height:1.6;
}

/* ============ Page 7：補助ケアの理由 ============ */
#page-7 .page-body{ display:flex; flex-direction:column; gap:10px; }
.support-grid{
  flex:75; min-height:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.sup-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; justify-content:space-between; min-height:0; overflow:hidden;
}
.sup-top{ flex-shrink:0; }
.sup-mid{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:8px; overflow:hidden; }
.sup-card h2{
  margin:0 0 7px; font-size:19px; color:var(--primary-d);
  display:flex; align-items:center; gap:7px; flex-shrink:0;
}
.sup-ico{ font-size:21px; }
.sup-body{ margin:0; font-size:15.5px; line-height:1.55; color:var(--ink); }
.sup-sub{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-soft); background:var(--mint); border-radius:9px; padding:9px 12px; flex-shrink:0; }
.sup-catch{
  margin:0; font-size:14.5px; font-weight:700; color:#fff;
  border-radius:8px; padding:7px 11px; display:block; line-height:1.4;
}
.sup-checks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.sup-checks li{
  position:relative; padding-left:23px; font-size:15px; line-height:1.4; color:var(--ink);
}
.sup-checks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--primary-d); font-weight:700; }
.sup-target{
  margin:0; font-size:13px; line-height:1.45; color:var(--ink-soft);
}
.sup-warn{
  margin:0; font-size:13.5px; line-height:1.45; color:var(--ink-soft);
  background:#f5f7f7; border:1px solid var(--line); border-radius:9px; padding:8px 11px; flex-shrink:0;
}

/* なぜ必要？：青緑 */
.sup-why{ border-left:6px solid var(--primary); }
.sup-formula{
  display:flex; flex-wrap:wrap; align-items:center; gap:7px;
  font-size:14.5px; font-weight:700; color:var(--ink);
}
.sup-f-item{ background:var(--primary-l); border-radius:8px; padding:7px 11px; }
.sup-f-op,.sup-f-eq{ color:var(--primary-d); font-size:15px; }
.sup-f-result{
  background:var(--primary); color:#fff; border-radius:8px; padding:7px 11px;
  line-height:1.35; font-size:14.5px;
}

/* ポイックウォーター：水色 */
.sup-poic{ border-left:6px solid var(--h2s); background:linear-gradient(180deg,var(--h2s-l),#fff 45%); }
.sup-poic .sup-catch{ background:var(--h2s); }

/* 善玉菌タブレット：薄緑 */
.sup-probio{ border-left:6px solid #5fae7a; background:linear-gradient(180deg,#eaf6ee,#fff 45%); }
.sup-probio .sup-catch{ background:#5fae7a; }

/* おすすめの使い方：白背景＋青緑ライン */
.sup-flow-card{
  flex:25; min-height:0;
  background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--primary);
  border-radius:14px; box-shadow:var(--shadow); padding:6px 18px;
  display:flex; flex-direction:column; gap:4px; justify-content:center; overflow:hidden;
}
.sup-flow-card h2{
  margin:0; font-size:17px; color:var(--primary-d);
  display:flex; align-items:center; gap:7px; flex-shrink:0;
}
.sup-flow-steps{
  display:flex; align-items:center; gap:10px;
}
.sup-flow-step{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:8px;
  background:var(--mint); border-radius:10px; padding:8px 14px;
  font-size:15px; line-height:1.3; color:var(--ink);
}
.sf-no{
  width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff;
  font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sf-arrow{ color:var(--primary-d); font-size:20px; font-weight:700; flex-shrink:0; }
.sup-flow-foot{ flex-shrink:0; display:flex; flex-direction:column; gap:1px; }
.sup-flow-card .sup-sub{ margin:0; padding:5px 11px; }
.sup-mini{ margin:0; font-size:11px; color:var(--ink-soft); line-height:1.3; }

@media (max-width:980px){
  .support-grid{ grid-template-columns:1fr; }
  .sup-flow-steps{ flex-direction:column; align-items:stretch; }
  .sf-arrow{ transform:rotate(90deg); align-self:center; }
}

/* ============ Page 7：まとめシート ============ */
.page8-body{ overflow-y:auto; padding:18px 24px; }
.page8-tools{ margin-bottom:18px; }
.page8-intro{ font-size:15px; color:var(--ink); margin:0 0 10px; }
.tool-buttons{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  border:1.5px solid var(--primary); background:#fff; color:var(--primary-d);
  padding:13px 20px; border-radius:12px; font-size:16px; font-weight:700;
  cursor:pointer; transition:.12s; -webkit-tap-highlight-color:transparent;
}
.btn:hover{ background:var(--primary-l); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ background:var(--primary-d); }
.caution{ font-size:13px; color:var(--ink-soft); margin:12px 0 0; }

/* ---- 印刷対象シート（画面プレビュー） ---- */
#print-summary{ display:flex; justify-content:center; }
.ps-sheet{
  width:100%; max-width:780px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:26px 30px; box-shadow:var(--shadow);
}
.ps-header{ text-align:center; border-bottom:2px solid var(--primary); padding-bottom:12px; margin-bottom:16px; }
.ps-header h1{ font-size:24px; margin:0 0 6px; color:var(--primary-d); }
.ps-sub{ margin:0; font-size:13px; color:var(--ink-soft); }
.ps-sec{ margin-bottom:14px; }
.ps-sec h2{ font-size:16px; margin:0 0 8px; color:var(--primary-d); border-left:4px solid var(--primary); padding-left:8px; }
.ps-two{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ps-table{ width:100%; border-collapse:collapse; font-size:14px; }
.ps-table th,.ps-table td{ border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.ps-table thead th{ background:var(--mint); color:var(--primary-d); }
.ps-table th{ background:var(--mint); width:34%; white-space:nowrap; }
.ps-num{ width:90px; }
.ps-result-judge{ font-weight:700; }
.judge-low{ color:#3a8f7a; }
.judge-mid{ color:#c07a1f; }
.judge-high{ color:#b15a3a; }
.ps-num-cell{ font-size:12px; color:var(--ink-soft); }
.ps-type-box{ background:var(--primary-l); border-radius:10px; padding:12px 14px; font-size:15px; }
.ps-type-box strong{ color:var(--primary-d); }
.ps-safe{ background:var(--mint); border-radius:10px; padding:10px 12px; font-size:13px; margin-top:8px; }
.ps-note{ font-size:12px; color:var(--ink-soft); margin:6px 0 0; }
.ps-vas-line{ font-size:16px; }
.ps-vas-line strong{ font-size:20px; color:var(--primary-d); }
.ps-vas-interp{ font-size:14px; color:var(--ink-soft); }
.ps-findings{ margin:0; padding-left:18px; font-size:13.5px; columns:2; }
.ps-findings li{ margin-bottom:3px; break-inside:avoid; }
.ps-findings.single{ columns:1; }
.ps-plans{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ps-plan{ background:var(--mint); border-radius:10px; padding:10px 12px; }
.ps-plan h3{ margin:0 0 5px; font-size:14px; color:var(--primary-d); }
.ps-plan ul{ margin:0 0 4px; padding-left:16px; font-size:12.5px; }
.ps-plan p{ margin:0; font-size:12px; color:var(--ink-soft); }
.ps-checklist{ margin:0; padding:0; list-style:none; font-size:14px; }
.ps-checklist li{ margin-bottom:6px; }
.ps-todo,.ps-warn{ background:#fbfdfd; border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.ps-warn-lead{ margin:0 0 6px; font-size:13px; }
.ps-warnlist{ margin:0; padding-left:18px; font-size:12.5px; color:var(--ink-soft); }
.ps-support{ background:var(--mint); border:1px solid #cce6e3; border-radius:10px; padding:10px 14px; }
.ps-support-lead{ margin:0 0 5px; font-size:12.5px; line-height:1.5; color:var(--ink); }
.ps-support-list{ margin:0; padding-left:18px; font-size:13px; line-height:1.5; }
.ps-support-list li{ margin-bottom:3px; }
.ps-support-flow{ margin:4px 0 0; font-size:12px; color:var(--primary-d); font-weight:700; }
.ps-handwrite{ border-top:1px dashed var(--line); padding-top:12px; }
.ps-date{ font-size:15px; margin:0 0 10px; }
.ps-hw-label{ font-size:13px; margin:0 0 6px; }
.ps-hw-grid{ display:flex; flex-wrap:wrap; gap:10px 24px; font-size:14px; }
.ps-closing{ background:var(--primary-l); border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.6; margin:14px 0 8px; }
.ps-foot{ text-align:center; }

/* ============ 印刷：#print-summary のみ A4縦1枚に確実に収める ============ */
@page{ size:A4 portrait; margin:8mm; }
@media print{
  /* すべて非表示にして、まとめシートだけ表示 */
  html,body{ overflow:visible !important; height:auto !important; background:#fff; }
  body *{ visibility:hidden; }
  #print-summary, #print-summary *{ visibility:visible; }
  .no-print{ display:none !important; }
  .tabbar,.page8-tools,.img-area{ display:none !important; }

  /* レイアウトを印刷用に解除 */
  .stage{ position:static !important; inset:auto !important; overflow:visible !important; }
  .page{ display:none !important; }
  .page#page-8{ display:block !important; height:auto !important; }
  .page8-body{ overflow:visible !important; padding:0 !important; }
  .page-body{ padding:0 !important; overflow:visible !important; }

  #print-summary{
    position:absolute; left:0; top:0; width:100%;
    display:block;
    font-size:8pt; line-height:1.28;
  }
  .ps-sheet{ max-width:none; width:100%; border:none; border-radius:0; box-shadow:none; padding:0; }
  .ps-sheet *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .ps-header{ padding-bottom:5px; margin-bottom:7px; }
  .ps-header h1{ font-size:14pt; margin:0 0 2px; }
  .ps-sub{ font-size:7.2pt; }
  .ps-sec{ break-inside:avoid; margin-bottom:5px; }
  .ps-sec h2{ font-size:9pt; margin:0 0 3px; }
  .ps-two{ gap:10px; }
  .ps-table{ font-size:7.6pt; }
  .ps-table th,.ps-table td{ padding:3px 5px; }
  .ps-type-box{ padding:6px 9px; font-size:8.2pt; }
  .ps-safe{ padding:5px 8px; font-size:7.4pt; margin-top:4px; }
  .ps-note{ font-size:6.8pt; margin-top:2px; }
  .ps-vas-line{ font-size:8.6pt; }
  .ps-vas-line strong{ font-size:10.5pt; }
  .ps-vas-interp{ font-size:7.6pt; }
  .ps-findings{ font-size:7.6pt; padding-left:14px; }
  .ps-findings li{ margin-bottom:1px; }
  .ps-plans{ gap:6px; }
  .ps-plan{ padding:6px 8px; }
  .ps-plan h3{ font-size:8pt; margin:0 0 2px; }
  .ps-plan ul{ font-size:7.2pt; padding-left:13px; }
  .ps-plan ul li{ margin-bottom:0; }
  .ps-todo,.ps-warn{ padding:6px 9px; }
  .ps-checklist{ font-size:8pt; }
  .ps-support{ padding:5px 9px; margin-bottom:5px; }
  .ps-support-lead{ font-size:6.8pt; margin-bottom:2px; }
  .ps-support-list{ font-size:7.2pt; padding-left:13px; }
  .ps-support-list li{ margin-bottom:0; }
  .ps-support-flow{ font-size:7px; margin-top:2px; }
  .ps-checklist li{ margin-bottom:2px; }
  .ps-warn-lead{ font-size:7.6pt; margin-bottom:2px; }
  .ps-warnlist{ font-size:7.2pt; padding-left:14px; }
  .ps-warnlist li{ margin-bottom:0; }
  .ps-handwrite{ padding-top:6px; }
  .ps-date{ font-size:8.6pt; margin:0 0 5px; }
  .ps-hw-label{ font-size:7.6pt; margin-bottom:3px; }
  .ps-hw-grid{ font-size:8pt; gap:5px 16px; }
  .ps-closing{ padding:7px 11px; font-size:7.8pt; margin:7px 0 4px; line-height:1.4; }
  .ps-foot{ font-size:6.6pt; }
}

/* ============ 下部ナビゲーションバー ============ */
.navbar{
  height:var(--navbar-h);
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 16px;
  background:var(--surface);
  border-top:1px solid var(--line);
}
.nav-btn{
  min-width:120px; height:44px;
  border:1.5px solid var(--primary); border-radius:12px;
  background:var(--primary); color:#fff;
  font-size:16px; font-weight:700; cursor:pointer;
  transition:.12s; -webkit-tap-highlight-color:transparent;
}
.nav-btn:hover{ background:var(--primary-d); border-color:var(--primary-d); }
.nav-btn:disabled{
  background:#eef4f5; color:#a9c4c7; border-color:var(--line);
  cursor:default;
}
.nav-center{ display:flex; align-items:baseline; gap:10px; color:var(--ink); min-width:0; }
.nav-pos{ font-size:15px; font-weight:700; color:var(--primary-d); }
.nav-name{ font-size:16px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }

/* ============ レスポンシブ（小さめ端末保険） ============ */
@media (max-width:980px){
  .three-col{ grid-template-columns:1fr; }
  .check-grid{ grid-template-columns:repeat(2,1fr); }
}