@charset "utf-8";
/* CSS Document */

:root{
  /* 既存のブランド変数… */
  --brand-primary: #93a06d;
  --brand-accent:  #978764;
  --brand-bg:      #f9fae9;
  --brand-subtle:  #c7c9ac;

  --text-main:  #404040;
  --text-muted: #666666;
  --line:       #dfe3d2;

  --maxw: 1200px;
  --gap:  24px;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,.06);

  /* ▼セール色（固定値で定義／推奨色） */
  --sale-bg: #de5b41;    /* コーラル系（セール帯・ワッペン用） */
}
    /* ベース */
    *,*::before,*::after{ box-sizing: border-box; }
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
      font-size:16px;
      line-height:1.9;
      color:var(--text-main);
      background:#fff;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    img{ max-width:100%; height:auto; vertical-align:middle; }
    a{ color:inherit; text-decoration:none; }
    main{ width:100%; }

    /* コンテナ */
    .container{
      width:100%;
      max-width:var(--maxw);
      margin:0 auto;
      padding: 0 16px;
    }

    /* ヘッダー（横幅MAX） */
    .hero{
      width:100%;
      position:relative;
      overflow:hidden;
      background: #fff;
    }
    .hero picture, .hero img{ display:block; width:100%; }
    .hero-badge{
      position:absolute; right:2%; bottom:2%;
      background:rgba(255,255,255,.92);
      color:#1a1a1a;
      padding:.35rem .75rem;
      border-radius: 999px;
      font-size:.85rem;
      box-shadow: var(--shadow);
    }

    /* リードテキスト（中央寄せ） */
    .lead{
      background: linear-gradient(180deg, #fff 0%, var(--brand-bg) 100%);
      padding: 40px 0 48px;
    }
    .lead .text{
      max-width: 860px;
      margin: 0 auto;
      text-align:center;
      font-size: 1.05rem;
      color: var(--text-main);
      letter-spacing: .02em;
    }
    .lead .text strong{
      display:block;
      font-size: 1.24rem;
      margin-bottom: .3rem;
    }

    /* 特典セクション */
    .benefits{
      padding: 28px 0 18px;
      background:#fff;
    }
    .benefits .grid{
　　  display:grid;
 　　 gap: var(--gap);
  　　margin-top: 16px;
    }

    .benefit-card{
　　  background:#fff;
 　　 border: 1px solid var(--line);
 　　 border-radius: var(--radius);
 　　 overflow:hidden;
 　　 box-shadow: var(--shadow);
    }




/* ===== 特典の先頭に出す「会員様限定スペシャルセール実施中」帯 ===== */
.benefit-lead {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #ffffff;
  background: #de5b41;
  padding: 14px 10px;
  border-radius: 8px;
  margin: 0 auto 20px;
  width: fit-content;
  max-width: 90%;
  box-shadow: var(--shadow);
}

/* SP時は幅いっぱいで見せる */
@media (max-width: 640px){
  .benefit-lead{
    width: 100%;
    border-radius: 0;
  }
}



/* 特典画像の比率安定（任意） */
.benefit-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 10 / 3;     /* 1000×300 と同じ比率 */
  object-fit: cover;         /* 画像はすでにぴったり比率なので基本はノークロップ */
  background:#fff;           /* 万一の白フチを自然に見せる */
}

/* キャプション */
.benefit-card .cap{
  padding: 12px 14px;
  font-size: .95rem;
  color: var(--text-main);
  border-top: 1px solid var(--line);
  background: #fafafa;
}

/* コードコピーのUI */
.copy-wrap{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 12px 14px 16px;
  background: var(--brand-bg);
  border-top: 1px dashed var(--brand-subtle);
}

.code-chip{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: #fff;
  border: 1px solid var(--brand-subtle);
  color: #1a1a1a;
  padding: 8px 12px;
  border-radius: 8px;
  letter-spacing: .08em;
}

.copy-btn{
  background: var(--brand-primary);
  color:#fff;
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.copy-btn:hover{ opacity: .9; }
.copy-btn:disabled{ opacity:.6; cursor: not-allowed; }

/* コピー結果のトースト */
.copy-toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #1a1a1a;
  color:#fff;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: .9rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 1000;
}
.copy-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}


/* --- SP（640px以下）：枚数に関わらず縦並び・幅100% --- */
@media (max-width: 640px){
  .benefits .grid{
    grid-template-columns: 1fr; /* 常に1列 */
    justify-items: stretch;     /* 幅いっぱいに */
  }
  .benefit-card{
    width: 100%; /* 画面幅いっぱい */
  }
}

/* --- PC（641px以上） --- */
@media (min-width: 641px){

  /* 2枚以上：最大3列で中央寄せ */
  .benefits .grid{
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    justify-items: center;    /* 各カードを中央寄せ */
    justify-content: center;  /* グリッド全体を中央寄せ */
  }
  .benefit-card{
    width: 100%;
    max-width: 1000px;        /* 上限は実寸（画像は比率固定） */
  }


  /* 1枚だけのときは、実寸基準（1000px）で中央に */
  .benefits .grid > .benefit-card:only-child{
    width: 60%;          
    max-width: 90vw;          /* 画面より大きい場合に収める */
    min-width: 540px;         /* 極端に小さくならない下限（任意で調整可） */
    justify-self: center;     /* 中央寄せ */
  }

  /* 1枚のときはグリッドを1列化（中央寄せ用） */
  .benefits .grid:has(> .benefit-card:only-child){
    grid-template-columns: 1fr;
    justify-items: center;
  }

}


    /* セクション共通 */
    .section{
      padding: 56px 0;
    }
    .section.headed{
      background: var(--brand-bg);
    }
    .section h2{
      font-weight:700;
      text-align:center;
      font-size: 1.55rem;
      letter-spacing:.06em;
      margin: 0 0 16px;
      color:#1a1a1a;
    }
    .section p.leadcap{
      text-align:center;
      color: var(--text-muted);
      margin: 0 auto 26px;
      max-width: 780px;
      font-size: .98rem;
    }
    .section .tag{
      display:block;
      width: fit-content;
      background: var(--brand-accent);
      color:#fff;
      font-size:.85rem;
      padding: .28rem .7rem;
      border-radius: 999px;
      margin: 0 auto 12px;
      letter-spacing:.05em;
    }

    /* 商品グリッド */
    .grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--gap);
    }
    @media (max-width: 1024px){
      .grid{ grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 640px){
      .grid{ grid-template-columns: repeat(2, 1fr); }
    }

    .product{
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--radius);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      transition: transform .2s ease, box-shadow .2s ease;
      position: relative;
    }
    .product:hover{
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }
    .product .thumb{
      aspect-ratio: 4 / 3;
      background: #f2f2f2;
      display:block;
      width:100%;
      object-fit:cover;
    }
    .product .body{
      padding: 12px;
      display:flex;
      flex-direction:column;
      gap: 8px;
      flex:1;
    }
    .product .name{
      font-size: .98rem;
      line-height:1.5;
      min-height: 2.9em; /* 2行想定で高さ安定 */
    }
    .product .price{
      margin-top:auto;
      text-align:right;
      font-weight:700;
      color:#1a1a1a;
    }
    .product .badge{
      position:absolute;
      left: 8px; top: 8px;
      background: var(--brand-primary);
      color:#fff;
      font-size: .78rem;
      padding: .2rem .5rem;
      border-radius: 6px;
    }

    /* 小要素 */
    .note{
      text-align:center;
      font-size:.9rem;
      color: var(--text-muted);
      margin-top:8px;
    }

    /* CTA（任意） */
    .cta{
      text-align:center;
      margin-top: 28px;
    }
    .btn{
      display:inline-block;
      background: var(--brand-primary);
      color:#fff;
      padding: 14px 28px;
      border-radius: 999px;
      font-weight:700;
      letter-spacing:.08em;
      box-shadow: var(--shadow);
    }
    .btn:hover{ opacity:.9; }


/* PC表示時にヒーロー画像を70%縮小して中央寄せ */
@media (min-width: 641px) {
  .hero {
    /* 背景色は維持して画面幅いっぱい、画像だけ縮小 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0; /* 必要なら上下余白をここで調整 */
  }
  .hero picture {
    /* 中央寄せのためコンテンツ幅を画像に合わせる */
    display: block;
    width: 70%;
    max-width: 70%;
    /* 画像に角丸や影を付けたい場合はここで */
  }
  .hero picture img {
    width: 100%;
    height: auto;
  }

  /* 任意：バッジを縮小画像の右下に相対配置したいとき */
  .hero {
    position: relative;
  }
  .hero-badge {
    /* 画像の右下に被せるイメージ。余白は微調整してください。 */
    right: 16%;
    bottom: 4%;
  }
}

/* ===== 対象商品（Featured Item） ===== */
.featured {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.featured .head {
  text-align: center;
  margin-bottom: 18px;
}
.featured .head .eyecatch {
  display: inline-block;
  background: #de5b41;
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .35rem .8rem;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-size: .95rem;
}
.featured .wrap {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}
.featured .visual {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.featured .visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 18 / 12 ;  /* 横長商品ビジュアルを想定。必要に応じて変更可 */
  object-fit: cover;
}
.featured .meta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 20px;
}
.featured .name {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 8px;
  color: #1a1a1a;
}
.featured .price {
  font-weight: 800;
  font-size: 1.25rem;
  color: #1a1a1a;
  margin: 0 0 12px;
}
.featured .desc {
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.9;
}
.featured .cta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.featured .btn-primary {
  display: inline-block;
  background: var(--brand-primary);
  color: #fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: var(--shadow);
}
.featured .btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* セール帯（任意）：ベネフィットの先頭テキストと色を合わせたい場合 */
.featured .sale-ribbon {
  display: inline-block;
  background: var(--sale-bg, #de5b41); /* 変数があれば使い、なければコーラル */
  color: #fff;
  font-weight: 800;
  padding: .25rem .6rem;
  border-radius: 6px;
  margin-left: .5rem;
}

/* SPレイアウト（〜640px）：縦並び／幅いっぱい */
@media (max-width: 640px){
  .featured { padding: 28px 0; }
  .featured .wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .featured .name { font-size: 1.2rem; }
  .featured .price { font-size: 1.15rem; }
}


/* ===== Featured 商品のワッペン（バッジ） ===== */
.badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

/* アイコン風の丸 */
.badge::before{
  content: "";
  display:inline-block;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
}

/* 送料無料：ブランドのグリーンをベースに安心感のある配色 */

.badge--shipping{
  color: #ffffff;
  background: #d6a440;
  border: 1px solid #bc8f34;
}

.badge--no-commit{
  color: #ffffff;
  background: var(--sale-bg);
  border: 1px solid color-mix(in srgb, var(--sale-bg), #000 12%);
}

/* コントラストの確保：ダークモードや背景差異を想定して僅かに濃くする（任意） */
@media (hover:hover){
  .badge:hover{
    filter: saturate(1.05) brightness(.98);
  }
}

/* SPでの読みやすさ */
@media (max-width: 640px){
  .badges{
    gap: 10px;
    margin: 8px 0 12px;
  }
  .badge{
    font-size: .92rem; /* 指タップ配慮で少し大きめ */
  }
}


/* 定期販売ブロック内の価格だけコーラル色に */
#subscription .price{
  color: var(--sale-bg, #de5b41); /* 変数が無ければ #de5b41 を使用 */
}


/* ===== 定期販売 見出し直下のワッペン（中央寄せ） ===== */
#subscription .sub-badges{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 8px auto 22px;   /* 見出し群との間隔 */
  padding: 0 12px;
}

#subscription .sub-badges .badge{
  position: static;              /* カード用の absolute を無効化 */
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .32rem .7rem;
  border-radius: 10px;           /* pill より“ラベル”寄りに */
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.04); /* 主CTAより弱い影でボタン見え回避 */
}

/* 小さな丸アイコン（任意） */
#subscription .sub-badges .badge::before{
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
}

/* 色：送料無料（アンバー） */
#subscription .sub-badges .badge--shipping{
  color: #ffffff;
  background: #d6a440;
  border: 1px solid #bc8f34;
}

/* 色：30日間返品保証付き（ティール） */
#subscription .sub-badges .badge--return{
  color: #ffffff;
  background: #56a6a0;
  border: 1px solid #458f89;
}

/* SP：やや大きめ＆左右に余裕 */
@media (max-width: 640px){
  #subscription .sub-badges{
    margin: 10px auto 20px;
    padding: 0 8px;
    gap: 10px;
  }
  #subscription .sub-badges .badge{
    font-size: .98rem;
  }
}

/* ===== ブランドサイト遷移バナー（タイトル無し版） ===== */
.brandsite {
  margin: 20px auto 0; /* 上は「商品一覧を見る」ボタンとの距離。適宜調整OK */
}
.brandsite .banner-wrap {
  display: flex;
  justify-content: center; /* 中央寄せ */
}

/* バナー本体（角丸＋影） */
.brandsite__banner {
  display: block;
  border-radius: 14px;            /* 角を少し丸く */
  overflow: hidden;               /* 角丸を画像に反映 */
  box-shadow: 0 8px 24px rgba(0,0,0,.12); /* ほんのり影 */
  transition: transform .2s ease, box-shadow .2s ease;
}
.brandsite__banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* 画像の比率（添付バナーの横長比率を踏襲） */
.brandsite__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 980 / 367; /* 画像差し替え時は必要に応じ変更可 */
  object-fit: cover;
  background: #fff;
}

/* PC：横幅40%に縮小して中央配置 */
@media (min-width: 641px){
  .brandsite__banner { width: 40%; max-width: 600px; }
}


/* SP：幅80%に縮小＆中央寄せ（既存のFlex中央寄せを活用） */
@media (max-width: 640px){
  .brandsite__banner {
    width: 80%;
    border-radius: 10px; /* 角丸は前回どおり。お好みで調整可 */
  }
}

/* バナー下の注意書きとの間隔を追加 */
.brandsite__spacer { height: 28px; } /* 数値はお好みで */


.note .guide-link{
  color: #7a7a7a;            /* ほぼグレー → 目立ちすぎない */
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.note .guide-link:hover{
  color: #555;               /* ほんの少し濃くなるだけ */
}