/* できてえらいね！スタンプ — アプリの説明ページ（2026-09-26）
   はじめて Web版に来た人を、本体の entry.js がここへ案内する。色はアプリ本体とそろえる */

/* === tokens === */
:root{
  --bg1:#fff4d6; --bg2:#ffe1ec; --card:#ffffff; --ink:#5b4636; --muted:#8a7461;
  --pink:#ff7fa8; --pink-d:#ff5a8c; --mint:#7fd6c2; --mint-d:#3fae95;
  --line:#f0d9c0; --shadow:rgba(180,120,90,.25);
}

/* === base === */
*{ box-sizing:border-box; }
html,body{ margin:0; }
h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:inherit; margin:0; }
figure{ margin:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI",sans-serif;
  color:var(--ink); background:linear-gradient(160deg,var(--bg1),var(--bg2));
  line-height:1.8; font-size:16px; overflow-x:hidden;
}
a{ color:var(--pink-d); }

/* === hero === */
.hero_in{ max-width:560px; margin:0 auto; padding:40px 16px 28px; text-align:center; }
.hero_icon{ display:block; margin:0 auto; width:96px; height:96px; border-radius:24px; box-shadow:0 8px 20px var(--shadow); }
.hero_tag{ display:inline-block; margin-top:16px; background:#fff; color:var(--pink-d); font-weight:800; font-size:14px;
  padding:4px 14px; border-radius:999px; box-shadow:0 3px 10px var(--shadow); }
.hero_ttl{ margin-top:12px; font-size:34px; font-weight:900; line-height:1.2; text-shadow:0 2px 0 #fff; }
.pink{ color:var(--pink-d); }
.hero_sub{ margin:14px 0 0; font-weight:800; font-size:17px; }

/* === buttons === */
.cta{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.btn{ display:block; padding:15px 12px; border-radius:16px; font-weight:900; font-size:17px; text-decoration:none; text-align:center; }
.btn_play{ background:var(--pink-d); color:#fff; box-shadow:0 6px 16px rgba(255,90,140,.4); }
.btn_play.is_off{ background:#e9d9cb; color:#9a8470; box-shadow:none; pointer-events:none; }
.btn_try{ background:#fff; color:var(--mint-d); border:3px solid var(--mint); }
.btn:active{ transform:scale(.97); }
.cta_note{ margin:12px 0 0; font-size:13px; color:var(--muted); }

/* === sections === */
.wrap{ max-width:760px; margin:0 auto; padding:8px 16px 32px; }
.feat{ display:flex; gap:24px; align-items:center; background:var(--card); border-radius:24px;
  padding:20px; margin-top:20px; box-shadow:0 5px 14px var(--shadow); }
.feat:nth-child(even){ flex-direction:row-reverse; }
.shot{ flex:0 0 200px; }
.shot img{ display:block; width:100%; height:auto; border-radius:18px; border:1px solid var(--line); }
.feat_txt{ flex:1; min-width:0; }
.feat_ttl{ font-size:21px; font-weight:900; margin-bottom:6px; }
.feat_txt p{ margin:0; }
.feat_txt p + p{ margin-top:8px; }

.ex{ margin-top:28px; }
.ex .sec_ttl{ text-align:center; }
.ex_lead{ margin:0 4px; font-size:14px; color:var(--muted); text-align:center; }
.ex_item{ background:var(--card); border-radius:24px; padding:20px; margin-top:14px; box-shadow:0 5px 14px var(--shadow);
  border-left:7px solid var(--pink); }
.ex_ttl{ font-size:18px; font-weight:900; margin-bottom:6px; }
.ex_item p{ margin:0; }
.ex_item p + p{ margin-top:8px; }
.ex_fig{ margin:4px 0 12px; }
.ex_fig img{ display:block; width:100%; max-width:420px; height:auto; margin:0 auto; }
.ex_item p + .ex_fig{ margin-top:14px; }
.ex_item .ex_set{ margin-top:10px; font-size:13px; color:var(--muted); background:#fff7ec; border-radius:10px; padding:6px 10px; }

.price,.iphone{ background:var(--card); border-radius:24px; padding:20px; margin-top:20px; box-shadow:0 5px 14px var(--shadow); }
.sec_ttl{ font-size:20px; font-weight:900; margin-bottom:10px; }
.iphone p{ margin:0; }
.tbl{ width:100%; border-collapse:collapse; font-size:15px; }
.tbl th,.tbl td{ border:1px solid var(--line); padding:10px; text-align:left; vertical-align:top; }
.tbl th{ background:#fff7ec; font-weight:900; white-space:nowrap; }
.small{ font-size:12px; font-weight:700; }
.note{ margin:10px 0 0; font-size:13px; color:var(--muted); }
.cta_bottom{ max-width:560px; margin:8px auto 0; }

/* === footer === */
.foot{ text-align:center; font-size:13px; color:var(--muted); padding:20px 16px 36px; }
.foot p{ margin:4px 0; }

/* === phone === */
@media (max-width:600px){
  .feat,.feat:nth-child(even){ flex-direction:column; text-align:left; }
  .shot{ flex:0 0 auto; width:64%; max-width:240px; }
  .tbl th{ white-space:normal; width:34%; }
}