/* ===== Theme ===== */
:root{
  --accent: #e88945;           /* メインカラー */
  --accent-strong: #cf6f32;    /* 濃いめ同系色（ボタンhoverなど） */
  --accent-soft: #ffe9da;      /* 薄め同系色（背景ティント） */
  --ink: #2c2c2c;
  --ink-weak: #666;
  --line: #e9e9e9;
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}

img{max-width:100%; height:auto; vertical-align:middle}
.nowrap{white-space:nowrap}
.sp-only{display:inline}
.pc-only{display:none}
.container{width:min(1080px, 92%); margin-inline:auto}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.4em; padding:.9rem 1.4rem;
  border-radius:999px; border:2px solid transparent; font-weight:700;
  text-decoration:none; transition:.2s ease; box-shadow:var(--shadow);
}
.btn:focus-visible{outline:3px solid #0000; box-shadow:0 0 0 4px rgba(232,137,69,.35)}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-strong); transform:translateY(-1px)}
.btn--outline{background:#fff; color:var(--accent); border-color:var(--accent)}
.btn--outline:hover{background:var(--accent-soft)}

.section{padding:56px 0}
.section--tint{background:var(--accent-soft)}
.sec-title{
  margin:0 0 16px; font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight:800; color:var(--accent-strong); letter-spacing:.02em; text-align: center;
}
.sec-lead{font-size:clamp(1rem, 1.6vw, 1.05rem); color:var(--ink)}
.sec-lead.center{text-align:center}
.checklist{margin:.8rem 0 0; padding:0 0 0 1.2em}
.checklist li{margin:.25rem 0}
.section__cta{margin-top:22px; text-align:center}

/* ===== ① Hero ===== */
/* ===== ① Hero 修正 ===== */
.hero {
    position: relative;
    color: #fff;
    isolation: isolate;
  }
  
  .hero__media img {
    width: 100%;
    height: auto;           /* vh固定を外して自然な高さに */
    object-fit: cover;
    display: block;
    opacity: 1;             /* 透明度を戻す */
  }
  
  .hero::after {
    display: none;          /* グラデーション重ね不要なら消す */
  }
  
  .hero__content {
    position: relative;     /* absolute を relative に修正 */
    inset: auto;            /* 位置指定をリセット */
    z-index: auto;
    padding: 40px 20px;
    text-align: center;
    color: var(--ink);      /* 背景が白いので文字色も黒に */
  }
  
  .hero__subtitle {
    color: var(--ink-weak); /* サブコピーはグレーで落ち着かせる */
  }
.hero__about{
  display:flex; flex-wrap:wrap; gap:.5rem .8rem; align-items:center;
  background:#fff; color:var(--ink); border-radius:var(--radius);
  padding:.6rem .9rem; max-width:840px; box-shadow:var(--shadow);
}
.hero__about strong{color:var(--accent-strong)}
.hero__cta{margin-top:14px}

/* ===== ③ Cards ===== */
.grid{display:grid; gap:18px}
.grid--cards{grid-template-columns:repeat(1, 1fr)}
.card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.card__thumb{position:relative; aspect-ratio: 16 / 10; background:#f7f7f7}
.card__thumb img{width:100%; height:100%; object-fit:cover}
.badge{
  position:absolute; top:10px; left:10px;
  padding:.25rem .5rem; border-radius:999px; font-size:.8rem; font-weight:800;
}
.badge--new{background:var(--accent); color:#fff}
.card__body{padding:16px}
.card__title{margin:0 0 6px; font-size:1.1rem; font-weight:800}
.card__text{margin:0 0 10px; color:var(--ink-weak)}
.tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0}
.tags li{
  padding:.25rem .55rem; border-radius:999px; background:#f4f4f4; font-size:.85rem
}

/* ===== ④ Feature (3個入り) ===== */
.feature{display:grid; gap:18px; align-items:center}
.feature__media{order:-1}
.variants{margin:14px 0 0}
.variants__row{display:grid; grid-template-columns: 1fr; gap:6px; padding:10px 0; border-bottom:1px dashed var(--line)}
.variants dt{font-weight:800; color:#333}
.variants dd{margin:0; color:var(--ink-weak)}

/* ===== Footer ===== */
.footer{padding:28px 0; background:#fafafa; border-top:1px solid var(--line)}
.footer__inner{display:flex; justify-content:space-between; align-items:center}
.to-top{color:var(--accent-strong); text-decoration:none}
.to-top:hover{text-decoration:underline}

/* ===== Responsive ===== */
@media (min-width: 720px){
  .pc-only{display:inline}
  .sp-only{display:none}
  .hero__media img{height:64vh}
  .grid--cards{grid-template-columns:repeat(3, 1fr)}
  .feature{grid-template-columns: 1.2fr 1.6fr}
  .variants__row{grid-template-columns: 240px 1fr}
}
@media (min-width: 1024px){
  .grid--cards{grid-template-columns:repeat(5, 1fr)}
}
/* =========================
   視認性・余白・タイポ最終調整
   ========================= */

/* ベースの読みやすさ */
body {
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.95;
    letter-spacing: 0.01em;
  }
  
  /* コンテナとセクション余白 */
  .container { width: min(1080px, 92%); }
  .section { padding: 34px 0; }              /* +12px */
  .section--tint { background: var(--accent-soft); }
  
  /* セクション見出し・導入文 */
  .sec-title {
    margin: 0 0 18px;
    font-size: clamp(1.5rem, 3vw, 2rem);     /* 少し大きめ */
    font-weight: 800;
    color: var(--accent-strong);
  }
  .sec-lead {
    font-size: clamp(1.02rem, 1.7vw, 1.12rem);
    color: var(--ink);
  }
  .sec-lead.center { text-align: center; }
  
  /* ヒーロー：画像→テキストの縦積み（背景にしない前提） */
  .hero { color: var(--ink); }
  .hero__media img {
    width: 100%;
    height: auto;
    display: block;
  }
  .hero__content {
    position: relative; inset: auto; z-index: auto;
    padding: clamp(24px, 4vw, 40px) 20px 0;
    text-align: center;
  }
  .eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: .38rem .75rem;
    border-radius: 999px;
    background: rgba(232,137,69,.12);
    color: var(--accent-strong);
    font-weight: 700;
  }
  .hero__title {
    margin: 0 0 10px;
    font-size: clamp(1.7rem, 5.2vw, 2.7rem);
    line-height: 1.25;
    font-weight: 900;
  }
  .hero__subtitle { color: var(--ink-weak); }
  
  /* 「福箱とは？」枠：白ベースに自然に溶け込ませる */
  .hero__about {
    display: inline-flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center;
    background: none; box-shadow: none; border-radius: 0;
    padding: .6rem .9rem; max-width: 840px; color: var(--ink);
  }
  .hero__about strong { color: var(--accent-strong); }
  .hero__cta { margin-top: 16px; }
  
  /* CTAボタン：サイズと視線誘導を強化 */
  .btn {
    padding: 1rem 1.6rem;
    box-shadow: var(--shadow);
    font-size: clamp(.95rem, 1.7vw, 1rem);
  }
  .btn--primary { background: var(--accent); color: #fff; border-color: transparent; }
  .btn--primary:hover { background: #dc7d3b; transform: translateY(-1.5px); }
  .btn--outline { background: #fff; color: var(--accent); border-color: var(--accent); }
  .btn--outline:hover { background: #fff2e8; }
  
  /* カード（6個入りラインアップ） */
  .grid { display: grid; gap: 22px; }
  .grid--cards { grid-template-columns: repeat(1, 1fr); }
  .card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
  .card__thumb { aspect-ratio: 16 / 10; background: #f7f7f7; position: relative; }
  .card__title { font-size: 1.14rem; margin: 0 0 6px; font-weight: 800; }
  .card__text { font-size: .98rem; color: var(--ink-weak); margin: 0 0 12px; }
  .tags { gap: 6px; }
  .tags li { font-size: .82rem; background: #f3f3f3; }
  
  /* 3個入りセクション */
  .feature { display: grid; gap: 20px; align-items: center; }
  .variants { margin-top: 16px; }
  .variants__row {
    grid-template-columns: 1fr;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
  }
  .variants dt { font-weight: 800; color: #333; }
  .variants dd { margin: 0; color: var(--ink-weak); }
  
  /* セクション末尾CTAの余白 */
  .section__cta { margin-top: 24px; text-align: center; }
  
  /* フッター */
  .footer { padding: 30px 0; background: #fafafa; border-top: 1px solid var(--line); }
  .footer__inner { display: flex; justify-content: space-between; align-items: center; }
  
  /* レスポンシブ：カード列数とレイアウト */
  @media (min-width: 720px) {
    .pc-only { display: inline; }
    .sp-only { display: none; }
    .grid--cards { grid-template-columns: repeat(2, 1fr); }
    .feature { grid-template-columns: 1.15fr 1.6fr; }
    .variants__row { grid-template-columns: 250px 1fr; }
  }
  @media (min-width: 980px) {
    .grid--cards { grid-template-columns: repeat(4, 1fr); } /* 4列に抑えて読みやすく */
  }
  /* ===== 6個入り：強調レイアウト ===== */
.feature--prime {
  gap: clamp(18px, 3vw, 28px);
}
.feature--prime .feature__media img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 720px){
  .feature--prime {
    grid-template-columns: 1.3fr 1.7fr; /* 3個入りより画像をやや大きく */
  }
}

/* A〜Eの丸バッジ */
.alpha-badge{
  display:inline-grid; place-items:center;
  width:1.9rem; height:1.9rem; margin-right:.5rem;
  border-radius:50%;
  background: var(--accent);
  color:#fff; font-weight:800; font-size:.95rem;
  transform: translateY(-1px);
}

/* NEWフラグ */
.flag-new{
  display:inline-block; margin-left:.6rem;
  padding:.18rem .5rem; border-radius:999px;
  background: #ff784e; color:#fff; font-weight:800; font-size:.8rem;
}

/* バリエーションの読みやすさ強化 */
.variants--alpha .variants__row{
  padding: 12px 0;
  border-bottom: 1px dashed #b7b7b7;
}
.variants--alpha dt{
  font-weight: 800; color:#333; display:flex; align-items:center; column-gap:.25rem;
}
.variants--alpha dd{
  margin:.25rem 0 0; color: var(--ink-weak);
}

/* CTAを本文寄りに（左寄せ） */
.section__cta--left{ text-align:center; margin-top: 20px; }
@media (max-width: 719.98px){
  .section__cta--left{ text-align:center; }
}
/* ===== Hero About（福箱とは？） ===== */
.hero__about {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  align-items: center;

  background: #fff;
  color: var(--ink);
  padding: 1rem 1.2rem;
  max-width: 840px;
  margin: 1rem auto;
  
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
}

.hero__about strong {
  color: var(--accent-strong);
  font-weight: 800;
}

/* ===== Checklist（装飾付きリスト） ===== */
.checklist {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  margin: .5rem 0;
  padding-left: 1.8rem;
  line-height: 1.6;
}

.checklist li::before {
  content: "✔";              /* アイコン */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}
/* ===== 見出し横サイズ・ピル ===== */
.sec-title .size-pill{
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: .28em .6em;
  margin-left: .55rem;
  border-radius: 999px;
  border: 2px solid var(--accent-strong);
  background: #fff;
  color: var(--accent-strong);
  font-weight: 800;

  /* 見出しに対して相対サイズで大きめに見せる */
  font-size: clamp(.82rem, 1.1em, 1.05rem);
  vertical-align: .06em;         /* ベースライン微調整 */
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

/* 6個入り＝主役感を少し強く（塗りつぶし） */
.sec-title .size-pill--prime{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(232,137,69,.25);
}

/* スマホで改行が欲しい場合のオプション（必要なら .size-pill--break を付与） */
@media (max-width: 719.98px){
  .sec-title .size-pill--break{ display: inline-block; margin-left: .45rem; }
}
/* 3個入りも6個入りと同じA～Dバッジにする */
.variants dt {
  display: flex;
  align-items: center;
  column-gap: .4rem;
}
/* 薄めの背景色（3個入り専用） */
.section--tint-light {
  background: #fff4ec; /* #e88945 の薄めトーン（6個入りよりさらに薄い） */
  margin-top: 2em;
}
  /* 本文をセンター寄せ */
.sec-lead {
  text-align: center;
}

/* チェックリスト：縦並び＋中央寄せ */
.checklist {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: inline-block;   /* リスト全体を中央に */
  text-align: left;        /* 各行の文字は左揃え */
}

.checklist li {
  position: relative;
  margin: .4rem 0;
  padding-left: 1.8rem;    /* ✔ の位置分余白 */
}

.checklist li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
}

/* ===== Checklist 強調版（縦並び＋中央寄せのまま） ===== */
.checklist--em{
  /* 既に inline-block + 中央配置ならそのままでOK。
     親が中央寄せでない場合に備え、ここでも中央寄せにしておく */
  display: inline-block;
  text-align: left;

  /* 視認性アップ：淡い同系色の背景＋細い枠＋角丸 */
  background: #fff4ec;                 /* #e88945 の薄いトーン */
  border: 1px solid #ffd9c5;           /* なじむ薄い枠線 */
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);  /* ほんのり持ち上げる */

  /* ブロックとしての余白 */
  margin: 12px auto;
}

.checklist--em li{
  position: relative;
  margin: .5rem 0;
  padding-left: 2.1rem;                /* バッジ分のインデント */
  font-size: clamp(1.02rem, 1.9vw, 1.12rem);  /* ほんの少し大きく */
  line-height: 1.8;
}

/* 丸バッジ（オレンジ＋白文字）でチェックを明快に */
.checklist--em li::before{
  content: "✔";
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  left: 0;
  top: .2rem;

  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 2px 6px rgba(232,137,69,.35);
}

/* モバイルでの詰まり感を軽減 */
@media (max-width: 719.98px){
  .checklist--em{ padding: 12px 14px; }
  .checklist--em li{ padding-left: 1.9rem; }
}
.radius-img img{
border-radius: var(--radius);
box-shadow: var(--shadow);
}

/* メタ情報＋CTAをまとめて右寄せ */
.product-block__meta-wrap {
  text-align: right;
  margin-top: 12px;
}

.product-block__meta {
  display: inline-flex;
  gap: .8rem;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.price {
  color: #e88945;
  font-size: 1.2rem;
  font-weight: 700;
}

.shipping {
  border: 1.5px solid #e88945;
  background: #fff;
  color: #e88945;
  font-size: .85rem;
  padding: .2em .8em;
  border-radius: 999px;
  font-weight: 600;
}

/* CTAボタンも右寄せ */
.product-block__cta .btn {
  display: inline-block;
}
@media (max-width: 719.98px) {
  .product-block__meta-wrap {
      text-align: center;
  }
}