/* 野球ママの豆知識 — 図解の置き場
   ★スマホで試合中に引く前提。1タップで目的の図解に着くこと最優先。
   色は投稿の base-style.css と揃えている（クリーム地・濃紺・緑） */
:root{
  --cream:#FDF6E3; --navy:#1F2C3D; --green:#0F7B4F; --red:#C4342A;
  --line:#E4DCC6; --card:#fff;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--cream); color:var(--navy);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  line-height:1.75; font-size:16px;
}
a{color:var(--green);}
main{max-width:720px; margin:0 auto; padding:0 16px 48px;}

/* ヘッダー */
.hd{background:var(--navy); padding:12px 16px;}
.hd-l{color:#fff; font-weight:700; text-decoration:none; font-size:15px;}

/* トップ */
.hero{padding:28px 0 8px;}
.hero h1{font-size:24px; line-height:1.4; margin:0 0 12px;}
.hero p{margin:0; font-size:15px;}
.ix{margin:28px 0 0;}
.ix h2{
  font-size:16px; margin:0 0 8px; padding:0 0 6px;
  border-bottom:2px solid var(--green); color:var(--green);
}
.ix ul{list-style:none; margin:0; padding:0;}
.ix li{border-bottom:1px solid var(--line);}
/* ★指で押す前提。1行の当たり判定を大きく取る */
.ix li a{display:block; padding:13px 4px; text-decoration:none; color:var(--navy);}
.ix li a:active{background:#fff;}

/* 記事 */
.art{padding:22px 0 0;}
.cat{
  display:inline-block; margin:0 0 8px; padding:3px 10px; border-radius:999px;
  background:var(--green); color:#fff; font-size:12px; font-weight:700;
}
.art h1{font-size:22px; line-height:1.45; margin:0 0 6px;}
.lead{margin:0 0 16px; font-size:14px; color:#5A6472;}
/* 図解が主役。画面幅いっぱいに置く */
.zu{display:block; width:100%; height:auto; border-radius:10px; background:#fff;}
.tx{margin:22px 0 0;}
.tx p{margin:0 0 16px;}

.cta{
  margin:28px 0 0; padding:14px 16px; background:#fff;
  border:2px solid var(--green); border-radius:10px; text-align:center; font-weight:700;
}
.cta a{text-decoration:none;}

/* フッター */
.ft{border-top:1px solid var(--line); margin-top:40px; padding:20px 16px 40px; text-align:center;}
.ft p{margin:0 0 10px; font-size:14px;}
.ft-s{font-size:12px; color:#6B7280; line-height:1.7;}

@media(min-width:600px){
  body{font-size:17px;}
  .hero h1{font-size:28px;}
  .art h1{font-size:26px;}
}

/* ── 商品（Amazonアソシエイト）
   ★画像は使わない。運営規約 IPライセンス(h)が画像の保存・キャッシュを禁じている。
   ★価格も書かない。(i)が価格に日時の併記を求めるため。 */
.shop{
  margin:34px 0 0; padding:16px 16px 18px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
}
.shop-pr{
  display:inline-block; margin:0 0 10px; padding:2px 8px;
  background:#6B7280; color:#fff; font-size:13px; font-weight:700;
  border-radius:4px; letter-spacing:.06em;
}
.shop h2{
  margin:0 0 12px; font-size:16px; line-height:1.5;
  padding-bottom:8px; border-bottom:2px solid var(--line);
}
.shop ul{list-style:none; margin:0; padding:0;}
.shop li{padding:0; border-bottom:1px solid var(--line);}
.shop li:last-child{border-bottom:none;}
/* ★リンクはブロックにして上下に余白を持たせる。スマホで指が乗る高さを稼ぐため
   （テキストのままだと19pxしかなく押しにくい） */
.shop li a{display:block; padding:13px 0 4px; font-weight:700; font-size:15px; line-height:1.5;}
.nt{display:block; padding-bottom:12px; font-size:13px; line-height:1.65; color:#5A6472;}
.nt-c{color:var(--red); font-weight:700;}
.shop-n{margin:12px 0 0; font-size:12px; line-height:1.7; color:#6B7280;}

/* 商品ブロックの中にも開示文言を出す。
   ★条文が求めるのは「目立つように明示」なので、フッターだけに小さく置くのは弱い。
     商品リンクのすぐ下＝実際に読む位置に、本文と同じ大きさで置く。（2026-08-20） */
.shop-d{
  margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line);
  font-size:15px; line-height:1.7; color:var(--navy); font-weight:700;
}

/* 開示文言（運営規約 第5条・全ページのフッターに出す）
   ★12px/#6B7280 では弱かったので、本文と同じ大きさ・濃さにした。 */
.ft-a{
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.7; color:var(--navy);
}