/* cre8 apps 規約ページ共通スタイル
   アプリ本体のデザイントークンに合わせている（--app / --brand / --bg）。 */
:root{
  /* 明るい配色だけで作っているので、OSがダークテーマでも部品を明るく描かせる
     （宣言しないとスクロールバーやフォーム部品だけが黒くなる） */
  color-scheme: light;
  --bg:#f5f4f1; --card:#fff; --ink:#222; --sub:#8a8a8a;
  --line:#e2e2e0; --app:#1e3a5f; --brand:#ff7800; --red:#b3350f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
     background:var(--bg); color:var(--ink); line-height:1.85; font-size:14.5px;
     -webkit-text-size-adjust:100%}
header{background:var(--app); color:#fff; padding:16px 20px}
header .hw{max-width:820px; margin:0 auto}
header .ttl{font-size:17px; font-weight:700; letter-spacing:.02em}
header .sub{font-size:11.5px; opacity:.72; margin-top:3px}
header a{color:#fff; opacity:.8; font-size:11.5px; text-decoration:none}
header a:hover{opacity:1; text-decoration:underline}
.wrap{max-width:820px; margin:0 auto; padding:22px 20px 60px}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px;
      padding:20px 22px; margin-bottom:14px}
h2{font-size:15.5px; color:var(--app); margin:0 0 10px; padding-bottom:7px;
   border-bottom:2px solid var(--brand); display:inline-block}
h3{font-size:13.5px; margin:16px 0 6px; color:var(--app)}
h3:first-of-type{margin-top:10px}
p{margin:0 0 9px}
ul,ol{margin:0 0 9px 1.35em}
li{margin-bottom:5px}
b,strong{color:var(--red)}
.lead{color:#555; font-size:13px}
/* 表は狭い画面で潰さず、横スクロールさせる */
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0 12px}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
th{background:#faf9f7; font-weight:700; white-space:nowrap}
td b{color:var(--red)}
.toc{background:var(--card); border:1px solid var(--line); border-radius:10px;
     padding:16px 22px; margin-bottom:14px; font-size:13px}
.toc ol{margin:6px 0 0 1.4em; columns:2; column-gap:26px}
.toc a{color:var(--app); text-decoration:none}
.toc a:hover{text-decoration:underline}
.note{background:#fff8f0; border-left:3px solid var(--brand); padding:10px 14px;
      margin:10px 0; font-size:13px; border-radius:0 6px 6px 0}
.todo{background:#fff3cd; border:1px dashed #d39e00; color:#7a5b00; padding:10px 14px;
      margin:10px 0; font-size:12.5px; border-radius:6px}
.todo b{color:#7a5b00}
.meta{color:var(--sub); font-size:12px; text-align:center; margin-top:22px; line-height:1.9}
.meta a{color:var(--sub)}
a{color:#1971c2}
code{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; background:#f2f1ee;
     padding:1px 5px; border-radius:3px; color:#444}
@media (max-width:600px){
  body{font-size:14px}
  .wrap{padding:16px 14px 48px}
  .card{padding:16px 15px; border-radius:8px}
  .toc ol{columns:1}
  .tw table{min-width:520px}
  table{font-size:12.5px}
  th,td{padding:7px 8px}
  th{white-space:normal}
}
@media print{
  body{background:#fff} header{background:#fff; color:#000; border-bottom:2px solid #000}
  .card{border:none; padding:0 0 8px} .toc{display:none}
}