@charset "UTF-8";

/* =========================================================
   おうち遊び特集 LP  ―  通常フロー（レスポンシブ）版
   - ページは幅390px基準・中央寄せ。PCは左右余白を #FEC39B
   - 縦は「上から積む」通常フロー。写真は width:100% で可変
   - 商品はCSSグリッド。写真上の文字/バッジ/ボタンだけ
     figure内で % 指定の絶対配置（＝figureに追従する相対配置）
   - すべて #athome 配下にスコープ
   ========================================================= */

#athome {
  --ah-orange: #FEC39B;   /* PC左右余白 */
  --ah-blue:   #4740C6;   /* 見出し・本文の基調カラー */
  --ah-green:  #C8F5D6;   /* 見出しタブ */
  --ah-white:  #FFFFFF;
  color: var(--ah-blue);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
#athome *, #athome *::before, #athome *::after { box-sizing: border-box; }
#athome img { max-width: 100%; }

/* 画面全体：オレンジ地の中央に390pxのページ */
#athome.ah-lp {
  display: flex;
  justify-content: center;
  width: 100%;
  background: var(--ah-orange);
}
#athome .ah-page {
  width: 100%;
  max-width: 390px;
  background: var(--ah-orange);
  overflow: hidden;
}

/* ===== 汎用：全幅画像ブロック ===== */
#athome .ah-block-img {
  display: block;
  width: 100%;
  height: auto;
}
/* アイキャッチ：上下に余白 */
#athome .ah-eyecatch { margin: 18px 0 37px; }

/* ===== 導入テキスト ===== */
#athome .ah-intro {
  margin: 0;
  padding: 18px 20px 24px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  white-space: pre-line;
}

/* ===== ナビ画像（カテゴリ／年齢／ノベルティ）＝画像＋透明リンク ===== */
#athome .ah-nav {
  position: relative;
  margin: 0 0 8px;
}
#athome .ah-nav > img { display: block; width: 100%; height: auto; }
#athome .ah-ov-link { position: absolute; display: block; }
/* カテゴリ索引ナビ：下に余白 */
#athome #ah-cat-nav { margin-bottom: 76px; }

/* ===== セクション ===== */
#athome .ah-sec { padding: 0 0 44px; }
#athome .ah-sec-ttl,
#athome .ah-sec-ttl-img {
  margin: 20px 0 14px;
  padding: 0;
}
/* テキスト見出し：左端の緑タブ風 */
#athome .ah-sec-ttl {
  display: inline-block;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ah-blue);
  padding: 10px 18px 10px 20px;
  background: var(--ah-green);
  border-radius: 0 25px 25px 0;
}
#athome .ah-sec-ttl-img {
  line-height: 0;
  position: relative;
  z-index: 2;              /* 下の特集写真より前面 */
  margin: 20px 0 -97px;    /* 下方向を負にして特集写真に少し重ねる */
}
#athome .ah-sec-ttl-img > img { width: auto; max-width: 90%; height: auto; }

#athome .ah-sec-lead {
  margin: 12px 20px;
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-line;
}

/* ===== 特集写真（写真＋上乗せ要素） ===== */
#athome .ah-feature {
  position: relative;
  margin: 0 0 16px;
  line-height: 0;
}
#athome .ah-feature > img,
#athome .ah-feature > video { display: block; width: 100%; height: auto; object-fit: cover; }
#athome .ah-feature > video.ah-vid-round { border-radius: 0 15% 0 0; }  /* 右上のみ角丸 */
#athome .ah-feature > video.ah-vid-round--left { border-radius: 15% 0 0 0; }  /* 左上のみ角丸 */
#athome .ah-feature .ah-ov { position: absolute; margin: 0; line-height: 1.4; }
#athome .ah-feature .ah-ov.ah-tag { line-height: 1; }

/* 特集写真上の動画（右上だけ角丸） */
#athome .ah-feature .ah-ov-video {
  display: block;
  height: auto;
  border-radius: 0 14px 0 0;   /* 右上のみ角丸 */
  object-fit: cover;
}

/* 写真上リード（アウトライン付き） */
#athome .ah-lead {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ah-blue);
  -webkit-text-stroke: 3px #E8FFEF;
  paint-order: stroke fill;
}
/* 特集商品名 */
#athome .ah-feat-name {
  font-family: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ah-blue);
}
#athome .ah-note {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 9px;
  color: #595757;
}

/* 「詳しくみる」ボタン */
#athome .ah-btn-detail { display: block; }
#athome .ah-btn-detail > img { width: 100%; height: auto; display: block; }

/* 特集写真の全面リンク（最前面でクリックを受ける） */
#athome .ah-feature-link {
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 3;
}

/* ===== 商品グリッド ===== */
#athome .ah-grid {
  list-style: none;
  margin: 0 0 8px;
  padding: 0 20px;
  display: grid;
  gap: 30px 19px;
}
#athome .ah-grid--2 { grid-template-columns: repeat(2, 1fr); }
#athome .ah-feature + .ah-grid--2 { margin-top: 48px; }
#athome .ah-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }

#athome .ah-card { display: flex; flex-direction: column; }
/* リンクが画像＋タグ＋商品名を内包（テキスト部分もクリック可） */
#athome .ah-card-link { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
#athome .ah-card-link > img:not(.ah-card-ico) {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}
#athome .ah-card-ico {
  position: absolute;
  right: 8px; top: 6px;
  width: 40px; height: 40px;
  object-fit: contain;
}
#athome .ah-card-ico--left { left: 8px; right: auto; }
#athome .ah-card .ah-tag { align-self: flex-start; margin: 8px 0 0; }
#athome .ah-name {
  margin: 5px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ah-blue);
  white-space: pre-line;
}

/* ===== 月齢タグ ===== */
#athome .ah-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
#athome .ah-tag--light { background: #DAD9F4; color: var(--ah-blue); }
#athome .ah-tag--mid   { background: #918CDD; color: #fff; }
#athome .ah-tag--dark  { background: #4740C6; color: #fff; }

/* ===== PC表示（幅790px・商品4列・商品名12px） ===== */
@media (min-width: 800px) {
  #athome .ah-page { max-width: 790px; }
  #athome .ah-grid--2 { grid-template-columns: repeat(4, 1fr); }
  #athome .ah-name { font-size: 12px; }
  #athome .ah-intro { text-align: center; }
}