/* ===== 色とサイズの設定（ここを変えると全体の見た目が変わります） ===== */
:root{
  --ink:#1c2024;
  --ink-soft:#5c6670;
  --ink-faint:#8a939c;
  --paper:#ffffff;
  --wash:#f4f7f6;
  --line:#e2e8e7;
  --mint:#0f8a6a;
  --mint-wash:#e8f4f0;
  --amber:#96590a;
  --amber-wash:#fdf2df;
  --amber-line:#f0d5a3;
  --radius:10px;
  --max:720px;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--wash);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-text-size-adjust:100%;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 16px 40px;}

/* ===== ヘッダー ===== */
.site-head{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:20px 16px;
  margin-bottom:20px;
}
.site-name{
  max-width:var(--max);margin:0 auto 4px;
  font-size:20px;font-weight:700;letter-spacing:.02em;
}
.site-tag{
  max-width:var(--max);margin:0 auto;
  font-size:13px;color:var(--ink-soft);line-height:1.6;
}

/* ===== 広告枠 ===== */
.ad-slot{
  background:var(--paper);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  min-height:100px;
  display:flex;align-items:center;justify-content:center;
  margin:20px 0;
  overflow:hidden;
}
.ad-label{font-size:11px;color:var(--ink-faint);}

/* ===== 目次 ===== */
.toc{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:24px;
}
.toc-head{
  display:flex;align-items:center;gap:6px;
  background:none;border:none;padding:0;margin:0 0 8px;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);
  cursor:pointer;
}
.toc-mark{font-size:11px;color:var(--ink-soft);}
.toc-group{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink);}
.toc-list{list-style:none;margin:0;padding:0;}
.toc-list li{border-bottom:1px solid var(--line);}
.toc-list a{
  display:block;padding:11px 4px;
  color:var(--mint);text-decoration:none;font-size:15px;
}
.toc-list a:hover,.toc-list a:focus{background:var(--mint-wash);}
.toc-more{
  margin-top:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:7px 16px;font-family:inherit;font-size:14px;color:var(--ink);cursor:pointer;
}
.toc-more:hover{background:var(--wash);}

/* ===== アプリ紹介セクション ===== */
.app{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 16px;
  margin-bottom:20px;
  scroll-margin-top:16px;
}
.app-head{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.app-icon{
  width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--mint-wash);color:var(--mint);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;
}
.app-name{margin:0;font-size:19px;font-weight:700;line-height:1.4;}
.app-cat{
  display:inline-block;margin-bottom:12px;
  background:var(--mint-wash);color:var(--mint);
  font-size:12px;padding:2px 10px;border-radius:999px;
}
.app-feats{margin:0 0 14px;padding:0;list-style:none;}
.app-feats li{
  font-size:14px;color:var(--ink-soft);
  padding-left:14px;position:relative;line-height:1.75;
}
.app-feats li::before{content:"・";position:absolute;left:0;}

/* ▼ 特典バッジ（このサイトの主役） */
.bonus{
  background:var(--amber-wash);
  border:1px solid var(--amber-line);
  border-radius:var(--radius);
  padding:12px 14px;
  margin-bottom:14px;
}
.bonus-text{
  margin:0;font-size:15px;font-weight:700;color:var(--amber);line-height:1.6;
}
.bonus-rate{
  margin:4px 0 0;font-size:13px;color:var(--amber);opacity:.85;
}

.app-steps{margin:0 0 14px;padding:0;list-style:none;counter-reset:step;}
.app-steps li{
  counter-increment:step;
  font-size:14px;padding-left:26px;position:relative;margin-bottom:6px;line-height:1.7;
}
.app-steps li::before{
  content:counter(step);
  position:absolute;left:0;top:3px;
  width:19px;height:19px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  font-size:11px;display:flex;align-items:center;justify-content:center;
}

.app-dl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.app-dl a{
  flex:1 1 130px;text-align:center;
  background:var(--mint);color:#fff;text-decoration:none;
  padding:11px 12px;border-radius:8px;font-size:14px;font-weight:700;
}
.app-dl a:hover{opacity:.9;}

.code-box{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin-bottom:12px;
}
.code-label{margin:0;font-size:11px;color:var(--ink-soft);}
.code-value{margin:0;font-size:17px;font-weight:700;letter-spacing:.06em;word-break:break-all;}
.code-copy{
  flex:none;background:var(--paper);border:1px solid var(--ink);border-radius:6px;
  padding:7px 14px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer;
}
.code-copy:hover{background:var(--wash);}
.code-copy.done{background:var(--mint);border-color:var(--mint);color:#fff;}

.app-body{font-size:14px;color:var(--ink-soft);white-space:pre-wrap;margin:0 0 12px;}
.app-caution{
  font-size:13px;color:var(--ink-soft);
  border-left:3px solid var(--amber-line);padding:2px 0 2px 10px;margin:0;
}

.loading{text-align:center;color:var(--ink-faint);font-size:14px;padding:32px 0;}

/* ===== フッター ===== */
.site-foot{
  background:var(--paper);border-top:1px solid var(--line);
  padding:24px 16px;
}
.foot-note,.foot-links,.foot-copy{max-width:var(--max);margin:0 auto;}
.foot-note{font-size:12px;color:var(--ink-soft);line-height:1.7;margin-bottom:12px;}
.foot-links{list-style:none;padding:0;display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.foot-links a{color:var(--mint);text-decoration:none;font-size:13px;}
.foot-copy{font-size:12px;color:var(--ink-faint);}

/* ===== 管理画面 ===== */
.admin-wrap{max-width:900px;margin:0 auto;padding:24px 16px 60px;}
.admin-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;margin-bottom:20px;
}
.admin-card h2{margin:0 0 14px;font-size:16px;font-weight:700;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;color:var(--ink-soft);margin-bottom:4px;}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:9px 11px;background:var(--paper);
}
.field textarea{line-height:1.7;resize:vertical;}
.field .hint{font-size:12px;color:var(--ink-faint);margin:4px 0 0;line-height:1.6;}
.row{display:flex;gap:12px;flex-wrap:wrap;}
.row .field{flex:1 1 180px;}
.btn{
  font-family:inherit;font-size:14px;padding:10px 18px;border-radius:6px;cursor:pointer;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);
}
.btn:hover{background:var(--wash);}
.btn-main{background:var(--ink);color:var(--paper);}
.btn-main:hover{opacity:.88;background:var(--ink);}
.btn-danger{border-color:#b3392f;color:#b3392f;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.admin-list{list-style:none;margin:0;padding:0;}
.admin-list li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-radius:6px;padding:9px 12px;margin-bottom:7px;
}
.admin-list button{
  background:none;border:none;font-family:inherit;font-size:15px;color:var(--mint);
  cursor:pointer;padding:0;text-align:left;flex:1;
}
.badge{font-size:11px;padding:2px 9px;border-radius:999px;flex:none;}
.badge-pub{background:var(--mint-wash);color:var(--mint);}
.badge-draft{background:var(--amber-wash);color:var(--amber);}
.msg{font-size:13px;margin:10px 0 0;}
.msg-ok{color:var(--mint);}
.msg-ng{color:#b3392f;}