/* ================================================================
   つみき ご提案・設計図ページ 共通スタイル
   （香盤メーカー使い方ページの世界観を踏襲）
   使うページ：kotonoha-teian.html / keashikaku-tsukaikata.html /
              deai-tsukaikata.html / mitsumori-tsukaikata.html
   ================================================================ */
:root{
  /* ⚠️ --muted は #77736B だと紙の上で 4.2 しか差が無かった（目安4.5）。
     リード文・Q&Aの答え・表の見出しが全部これ。地が --surface のときも 4.5 を
     超えるところまで濃くする（#6C6860 ＝ 紙4.96／面4.58）。 */
  --paper:#F4F2EE; --surface:#ECE9E3; --ink:#242321; --muted:#6C6860;
  --hair:#D8D4CC; --ghost:#BEB9B0; --control:#F8F7F4;
  --mark:#B4562E;                       /* 図の注釈（番号・矢印） */
  /* アプリ画面の再現に使う色（中立トーン） */
  --app-ink:#1f2933; --app-subtle:#52606d; --app-line:#e4e7eb; --app-surface:#f5f7fa;
  --ng:#ef4444; --ok:#10b981; --warnc:#f59e0b;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Hiragino Maru Gothic ProN',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
  line-height:1.8; -webkit-font-smoothing:antialiased;
  padding:0 20px calc(56px + env(safe-area-inset-bottom));
  font-size:15px;
}
.wrap{max-width:1180px; margin:0 auto;}
a{color:var(--ink);}
main,section,.split>*,.cols>*,figure.shot{min-width:0;}
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* ================= 提案バナー ================= */
.banner{
  margin:14px 0 0; background:#F7EFEA; border:1px solid #E4CFC2;
  border-radius:14px; padding:12px 16px; font-size:13px; color:#8a3e22;
  display:flex; gap:10px; align-items:flex-start;
}
.banner b{color:#7a3016;}
.banner .ic{flex:none; font-weight:700;}

/* ================= 見出し ================= */
header{padding:40px 0 4px;}
.kicker{font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--muted); margin-bottom:10px;}
h1{font-size:29px; font-weight:700; letter-spacing:.03em; line-height:1.4;}
header .lead{margin-top:12px; font-size:15px; color:var(--muted); max-width:1000px;}
.openapp{margin-top:20px;}
.openapp a{
  display:inline-block; background:var(--ink); color:var(--paper);
  text-decoration:none; border-radius:999px; padding:10px 22px;
  font-size:14.5px; font-weight:700;
}
.openapp a.ghost{background:none; color:var(--ink); border:1.5px solid var(--hair); margin-left:8px;}
h2{
  font-size:21px; font-weight:700; letter-spacing:.02em; line-height:1.5;
  margin:0 0 20px; padding-bottom:12px; border-bottom:1.5px solid var(--hair);
  display:flex; align-items:center; gap:11px;
}
h2 .num{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:var(--paper); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
h3{font-size:15.5px; font-weight:700; margin:0 0 8px;}
section{padding:44px 0 4px; scroll-margin-top:20px;}
p{margin:9px 0;}
.muted{color:var(--muted);}
.small{font-size:13px;}

/* ================= 全体レイアウト ================= */
.layout{display:block;}
aside.toc{
  background:var(--control); border:1px solid var(--hair); border-radius:18px;
  padding:16px 20px; margin-top:26px;
}
aside.toc .t{font-size:11.5px; font-weight:700; letter-spacing:.12em; color:var(--muted); margin-bottom:8px;}
aside.toc ol{margin:0; padding-left:1.35em;}
aside.toc li{margin:2px 0; font-size:14px;}
/* もくじは指で押す入口。44px を確保する（本文の途中のリンクは対象外） */
aside.toc a{display:inline-flex; align-items:center; min-height:44px;}
aside.toc a{text-decoration:none; border-bottom:1px solid var(--hair);}

/* ================= 部品 ================= */
.cols{display:grid; gap:16px;}
.card{
  background:var(--control); border:1px solid var(--hair); border-radius:18px;
  padding:18px 20px;
}
.card h3{margin-bottom:6px;}
.card .where{font-size:12.5px; color:var(--muted); margin-bottom:8px;}
.card .where b{color:var(--ink);}
ul.tight{margin:8px 0; padding-left:1.25em;}
ul.tight li{margin:5px 0;}
ul.tight li::marker{color:var(--ghost);}
ol.tight{margin:8px 0; padding-left:1.35em;}
ol.tight li{margin:5px 0;}

.note{
  border-left:4px solid var(--ghost); background:var(--control);
  border-radius:0 12px 12px 0; padding:14px 16px; margin:16px 0; font-size:14px;
}
.note .title{display:block; font-weight:700; margin-bottom:3px;}
.warn{border-left-color:#B03A22; background:#F7EFEA;}
.warn .title{color:#94301b;}
.good{border-left-color:var(--ok); background:#EEF7F2;}
.good .title{color:#0a7048;}

kbd{
  display:inline-block; background:#fff; border:1px solid var(--hair);
  border-bottom-width:2px; border-radius:7px; padding:0 8px;
  font-family:inherit; font-size:13.5px; font-weight:700; white-space:nowrap;
}
.path{font-size:13px; color:var(--muted);}
.path b{color:var(--ink); font-weight:700;}
.tag{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em;
  border-radius:999px; padding:3px 11px; background:var(--surface); color:var(--muted);}

/* 流れ図 */
.flow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 4px;}
.flow .box{
  background:#fff; border:1px solid var(--hair); border-radius:13px;
  padding:10px 16px; font-size:14px; font-weight:700;
}
.flow .arw{color:var(--mark); font-weight:700; font-size:17px;}

/* 比較・一覧表 */
table.cmp{border-collapse:collapse; width:100%; margin:12px 0; font-size:14px; background:#fff;
  border:1px solid var(--hair); border-radius:14px; overflow:hidden;}
table.cmp th, table.cmp td{border-bottom:1px solid var(--hair); padding:11px 14px; text-align:left; vertical-align:top;}
table.cmp thead th{background:var(--surface); font-size:12.5px; color:var(--muted); font-weight:700;}
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td{border-bottom:none;}
table.cmp tbody th{font-weight:700; white-space:nowrap;}

/* ================= 提案カード（トップページ） ================= */
.ideas{display:grid; gap:16px; margin-top:8px;}
.idea{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--control); border:1px solid var(--hair); border-radius:22px;
  padding:22px 24px; transition:transform .12s ease, border-color .12s ease;
}
.idea:active{transform:scale(.99);}
.idea:hover{border-color:var(--ghost);}
.idea .l, .idea .r{min-width:0;}
.idea .no{display:block; font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--mark);}
.idea .nm{font-size:20px; font-weight:700; margin:6px 0 2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.idea .sub{display:block; font-size:13.5px; color:var(--muted); margin-bottom:2px;}
.idea .r{margin-top:12px;}
.idea .fit{display:block; font-size:13.5px;}
.idea .fit b{color:var(--ink);}
.idea .go{display:inline-block; margin-top:14px; font-size:13.5px; font-weight:700; color:var(--mark);}

/* ================= アプリ画面の再現（図） ================= */
figure.shot{margin:0; padding-inline:16px;}
.screen{
  position:relative; border:1px solid var(--app-line); border-radius:14px; background:#fff;
  padding:14px; color:var(--app-ink); font-size:13px; line-height:1.6;
  box-shadow:0 1px 3px rgba(36,35,33,.06);
}
.screen .bar{
  display:flex; align-items:center; gap:8px; margin:-14px -14px 12px; padding:10px 14px;
  border-bottom:1px solid var(--app-line); background:#fff; border-radius:14px 14px 0 0;
}
.screen .bar .ttl{font-weight:700; font-size:13.5px;}
.screen .bar .gear{margin-left:auto; border:1px solid var(--app-line); border-radius:9px; padding:2px 9px; font-size:11.5px;}
.screen .tabs{display:flex; gap:14px; margin:-6px 0 12px; font-size:12.5px; color:var(--app-subtle); flex-wrap:wrap;}
.screen .tabs .on{color:var(--app-ink); font-weight:700; border-bottom:2px solid var(--app-ink); padding-bottom:3px;}
.screen .lbl{font-size:11px; color:var(--app-subtle); font-weight:700; letter-spacing:.04em;}
.screen .btn{
  display:inline-block; border:1px solid var(--app-line); background:#fff; border-radius:9px;
  padding:5px 12px; font-size:12.5px; font-weight:600;
}
.screen .btn.pri{background:var(--app-ink); color:#fff; border-color:var(--app-ink);}
.screen .dash{border:1px dashed var(--app-line); border-radius:11px; background:var(--app-surface); padding:12px;}
.screen .row{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--app-line);}
.screen .row:last-child{border-bottom:none;}
.screen .big{font-size:26px; font-weight:800; letter-spacing:.01em;}
.screen .money{display:flex; justify-content:space-between; font-size:12.5px; padding:4px 0;}
.screen .money.total{border-top:1.5px solid var(--app-ink); margin-top:6px; padding-top:8px; font-weight:800; font-size:14px;}
figcaption{font-size:12px; color:var(--muted); margin-top:8px;}

/* 注釈：番号ピンと矢印 */
.pin{
  position:absolute; z-index:3; width:22px; height:22px; border-radius:50%;
  background:var(--mark); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
}
ol.pins{margin:10px 0 0; padding:0; list-style:none; counter-reset:p;}
ol.pins li{
  counter-increment:p; position:relative; padding-left:30px; margin:7px 0; font-size:13.5px;
}
ol.pins li::before{
  content:counter(p); position:absolute; left:0; top:3px;
  width:20px; height:20px; border-radius:50%; background:var(--mark); color:#fff;
  font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
}

/* チップ・バッジ */
.chip{display:inline-block; border-radius:999px; padding:2px 10px; font-size:12px; font-weight:600;}
.chip.ok{background:var(--ok); color:#fff;}
.chip.warnb{background:#fef3c7; color:#92400e;}
.chip.dang{background:#fee2e2; color:#b91c1c;}
.chip.line{background:#fff; border:1px solid var(--app-line); color:var(--app-subtle); font-weight:500;}
.chip.dark{background:var(--app-ink); color:#fff;}
.dot{width:9px; height:9px; border-radius:50%; display:inline-block; flex:none;}
.dot.g{background:var(--ok);} .dot.y{background:var(--warnc);} .dot.r{background:var(--ng);}

/* できる人マトリクス表 */
table.grid{border-collapse:collapse; width:100%; font-size:12px;}
table.grid th, table.grid td{border:1px solid var(--app-line); padding:6px 7px; text-align:center;}
table.grid thead th{background:var(--app-surface); color:var(--app-subtle); font-weight:400; font-size:11px;}
table.grid tbody th{text-align:left; font-weight:600; background:#fff; white-space:nowrap;}
table.grid td.y{background:#ecfdf5; color:#047857; font-weight:700;}
table.grid td.n{color:var(--app-line);}

/* かんばん列 */
.kanban{display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.kanban .col{flex:1 0 30%; min-width:96px; background:var(--app-surface); border:1px solid var(--app-line); border-radius:10px; padding:8px;}
.kanban .col .h{font-size:11px; font-weight:700; color:var(--app-subtle); margin-bottom:6px; display:flex; justify-content:space-between;}
.kanban .cardlet{background:#fff; border:1px solid var(--app-line); border-radius:8px; padding:6px 8px; margin-bottom:6px; font-size:11.5px; font-weight:600;}
.kanban .cardlet .m{font-size:10.5px; color:var(--app-subtle); font-weight:400;}

/* 棒グラフ（媒体別集計） */
.bars{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.bars .b{display:flex; align-items:center; gap:8px; font-size:12px;}
.bars .b .nm{width:78px; flex:none; color:var(--app-subtle);}
.bars .b .bar{height:16px; background:var(--app-ink); border-radius:4px;}
.bars .b .v{font-weight:700;}

/* カレンダー（行事・レク） */
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; font-size:11px;}
.cal .hd{text-align:center; color:var(--app-subtle); font-weight:700; font-size:10px; padding:2px 0;}
.cal .d{background:var(--app-surface); border:1px solid var(--app-line); border-radius:6px; min-height:38px; padding:3px 4px; text-align:left; color:var(--app-subtle);}
.cal .d.dim{opacity:.4;}
.cal .d .n{font-size:10px; font-weight:700; color:var(--app-ink);}
.cal .d .ev{display:block; margin-top:2px; font-size:9.5px; font-weight:700; border-radius:4px; padding:1px 3px; line-height:1.35;}
.cal .d .ev.a{background:#e0f2fe; color:#075985;}
.cal .d .ev.b{background:#fef3c7; color:#92400e;}
.cal .d .ev.c{background:#dcfce7; color:#166534;}

/* Q&A */
.qa{background:var(--control); border:1px solid var(--hair); border-radius:16px; padding:15px 18px;}
.qa .q{font-weight:700; font-size:14.5px;}
.qa .a{margin-top:5px; color:var(--muted); font-size:13.5px; line-height:1.75;}

footer{
  margin-top:56px; padding-top:20px; border-top:1px solid var(--hair);
  /* --ghost（1.75）は線と記号のための色。読む文字には使わない。 */
  font-size:12.5px; color:var(--muted); text-align:center; line-height:2;
}
footer a{color:var(--muted); display:inline-flex; align-items:center; min-height:44px;}

/* ================= 横幅を使う（タブレット以上） ================= */
@media (min-width:720px){
  .cols.c2{grid-template-columns:1fr 1fr;}
  .cols.c3{grid-template-columns:1fr 1fr 1fr;}
  .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,400px); gap:28px; align-items:start;}
  .split.wide{grid-template-columns:minmax(0,1fr) minmax(340px,480px);}
  .split.flip{grid-template-columns:minmax(300px,400px) minmax(0,1fr);}
  /* 提案カードを横並び（見出し | 施設に合う理由）にして横幅を使う */
  .idea{display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); column-gap:0; align-items:start; padding:24px 28px;}
  .idea .l{padding-right:34px;}
  .idea .r{margin-top:0; padding-left:34px; border-left:1px solid var(--hair);}
  .idea .sub{margin-bottom:0;}
}
@media (min-width:1000px){
  body{max-width:none; padding-left:32px; padding-right:32px;}
  .wrap{max-width:1240px;}
  .layout{display:grid; grid-template-columns:210px minmax(0,1fr); gap:48px; align-items:start;}
  aside.toc{position:sticky; top:26px; margin-top:44px; background:none; border:none; padding:0;}
  aside.toc li{margin:4px 0; font-size:13.5px;}
  aside.toc a{border-bottom:none;}
  aside.toc a:hover{border-bottom:1px solid var(--hair);}
  h1{font-size:33px;}
  section{padding:52px 0 4px;}
  /* 広い画面では見出しブロックをやや広く、余白も少しゆったり */
  .idea{grid-template-columns:minmax(260px,340px) minmax(0,1fr); padding:26px 32px;}
  .idea .nm{font-size:21px;}
}

/* ================= 印刷（A4のPDFになる） ================= */
@media print{
  @page{margin:15mm 13mm;}
  body{background:#fff; color:#000; font-size:10pt; padding:0;}
  .wrap{max-width:none;}
  .layout{display:block;}
  aside.toc,.openapp{display:none;}
  header{padding-top:0;}
  section{padding:16pt 0 0;}
  h2{margin-bottom:10pt; page-break-after:avoid;}
  h3{page-break-after:avoid;}
  .card,.note,.screen,.qa,figure.shot,table.cmp,.idea{page-break-inside:avoid;}
  .card,.note,.qa,.idea{background:#fff;}
  .screen{box-shadow:none;}
  .split{display:grid; grid-template-columns:1fr 300px; gap:14pt;}
  .cols.c2{grid-template-columns:1fr 1fr;}
  .cols.c3{grid-template-columns:1fr 1fr 1fr;}
  footer{color:#555;}
}