/* でんおちくん - 説明ページ共通スタイル（使い方／計算根拠／免責事項／運営者情報／プライバシーポリシー／更新履歴）
   index.html本体のインラインCSSとは独立したファイル。デザイントークンは本体の:rootと揃えている。
   本体（index.html）のCSSはこのファイルの影響を受けない（本体は引き続きインラインCSSのみで完結する）。 */

:root{
  --bg:#0f1720;
  --card:#182430;
  --card2:#1f2e3d;
  --line:#2c3e50;
  --accent:#3aa0ff;
  --accent2:#f5a623;
  --text:#eef3f8;
  --sub:#9db0c3;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Yu Gothic","Meiryo","Hiragino Sans",system-ui,sans-serif;
  padding-bottom:40px;
  line-height:1.8;
  -webkit-tap-highlight-color:transparent;
}
header{
  background:linear-gradient(135deg,#1f6feb,#123a63);
  padding:22px 16px 18px;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}
header h1{margin:0;font-size:1.2rem;letter-spacing:.03em;}
header p{margin:6px 0 0;font-size:.8rem;color:#d7e8ff;}
header a{color:inherit;text-decoration:none;}

main{max-width:640px;margin:0 auto;padding:20px 16px;}

main h1{font-size:1.3rem;margin:0 0 16px;color:var(--text);}
main h2{font-size:1.05rem;margin:28px 0 10px;color:var(--accent2);letter-spacing:.02em;}
main h3{font-size:.95rem;margin:20px 0 8px;color:var(--text);}
main p{margin:0 0 12px;font-size:.92rem;color:var(--text);}
main ul,main ol{margin:0 0 12px;padding-left:1.4em;font-size:.92rem;}
main li{margin-bottom:6px;}
main a{color:var(--accent);}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  margin-bottom:16px;
}

.note{
  font-size:.8rem;color:var(--sub);line-height:1.7;
  background:var(--card2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;margin:14px 0;
}

.backlink{
  display:inline-block;margin-bottom:18px;
  font-size:.85rem;color:var(--accent);text-decoration:none;
}
.backlink:before{content:"← ";}

.warnbox{
  background:rgba(245,166,35,.1);border:1px solid var(--accent2);
  border-radius:12px;padding:12px 14px;font-size:.8rem;color:#f2d9ad;line-height:1.7;margin:14px 0;
}

.sitenav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;
  font-size:.75rem;color:var(--sub);
}
.sitenav a{color:var(--sub);text-decoration:none;padding:2px 4px;}
.sitenav a:hover,.sitenav a:focus{color:var(--accent);}
.sitenav .sep{color:var(--line);}

footer{
  text-align:center;color:var(--sub);font-size:.72rem;
  padding:24px 16px 8px;line-height:2;
}
footer .appname{color:var(--sub);display:block;margin-top:10px;}

@media (max-width:480px){
  main{padding:16px 12px;}
  main h1{font-size:1.15rem;}
  main h2{font-size:1rem;}
}