/* 高齢者向け仕様: 大きな字(本文20px+/見出し28px+)・高コントラスト(7:1目安)・タップ48px+ */
:root{
  --ink:#1A1A1A;
  --paper:#FFFDF7;
  --line:#E2DCCE;
  --accent:#1A5E3A;       /* 落ち着いた緑・公式感 */
  --accent-ink:#0F3D24;
  --muted:#5A5448;
  --sel:#EAF2EC;
  --warn-bg:#FFF4E5;
  --warn-line:#E0A85A;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{background:var(--paper); color:var(--ink);}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:20px; line-height:1.7;
  display:flex; flex-direction:column; min-height:100vh;
}
.app{width:100%; max-width:480px; margin:0 auto; padding:16px 18px 8px; flex:1; display:flex; flex-direction:column;}

/* 進捗 */
.progress{height:10px; background:var(--line); border-radius:5px; overflow:hidden;}
.progress i{display:block; height:100%; width:0; background:var(--accent); border-radius:5px; transition:width .25s ease;}
.progress-text{margin:8px 2px 14px; font-size:16px; color:var(--muted); font-weight:700;}

/* カード */
.card{background:var(--paper); flex:1;}
.card h1{font-size:30px; line-height:1.35; font-weight:800; margin-bottom:14px;}
.card p{font-size:20px; margin-bottom:16px;}
.card .body{color:var(--ink);}

/* 注意ボックス */
.notice-box{background:var(--warn-bg); border:2px solid var(--warn-line); border-radius:14px; padding:18px 18px; font-size:20px; font-weight:700;}
.notice-headline{font-size:24px; font-weight:800; color:var(--accent-ink); line-height:1.4; margin-bottom:12px;}
.notice-body{font-size:20px; font-weight:700; line-height:1.7;}

/* 非公式表示 */
.disclaimer{margin-top:18px; background:#FBF6EC; border:2px dashed var(--line); border-radius:14px; padding:16px; font-size:18px; color:var(--muted); line-height:1.6;}

/* 選択肢リスト(働き方) */
.opts{display:flex; flex-direction:column; gap:14px; margin-top:6px;}
.opt{border:2px solid var(--line); border-radius:16px; padding:18px; background:#fff;}
.opt .plain{font-size:20px; font-weight:800;}
.opt .arrow{color:var(--muted); font-size:18px; margin:6px 0;}
.opt .official{font-size:21px; font-weight:800; color:var(--accent-ink); background:var(--sel); border-radius:10px; padding:10px 12px; display:inline-block;}

/* 和暦変換ツール */
.wareki{margin-top:6px;}
.wareki .row{display:flex; gap:10px; align-items:stretch;}
.wareki select{flex:1; font-size:22px; font-weight:700; padding:16px 44px 16px 12px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); min-height:60px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 7l6 7 6-7z' fill='%231A5E3A'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:22px;}
.wareki .result{margin-top:18px; text-align:center; background:var(--sel); border:2px solid var(--accent); border-radius:16px; padding:20px;}
.wareki .result .label{font-size:17px; color:var(--muted); font-weight:700;}
.wareki .result .seireki{font-size:48px; font-weight:800; color:var(--accent-ink); line-height:1.1;}
.wareki .result .seireki small{font-size:22px;}
.wareki .result.empty .seireki{color:var(--muted); font-size:24px;}

/* リンクアウト */
.linkout-btn{display:block; width:100%; background:var(--accent); color:#fff; font-size:24px; font-weight:800; text-align:center; padding:24px; border-radius:16px; text-decoration:none; margin-top:10px;}
.return-hint{margin-top:16px; font-size:18px; color:var(--muted); text-align:center; font-weight:700;}
.link-disclosure{margin-top:8px; font-size:18px; color:var(--muted); text-align:center; line-height:1.6;}

/* ナビ */
.nav{display:flex; gap:16px; margin-top:18px; padding:10px 0 8px; position:sticky; bottom:0; background:var(--paper);}
.nav button{flex:1; min-height:60px; font-size:21px; font-weight:800; border-radius:14px; border:2px solid var(--line); cursor:pointer;}
.nav .back{background:#fff; color:var(--muted);}
.nav .next{background:var(--accent); color:#fff; border-color:var(--accent); flex:2;}
.nav button:disabled{opacity:.4;}

/* フッター */
.foot{text-align:center; padding:14px 18px 22px; font-size:14px; color:var(--muted); border-top:1px solid var(--line);}