@charset "UTF-8";

/* ============================================================
   Bakery Chappie 夏ギフト特集LP
   カンプ: 夏のギフトLP.png (1440 x 12137)
   色はすべてカンプからのスポイト実測値
   ============================================================ */

:root{
  --beige:        #F0DEC1;  /* 背景ベージュ（カンプ実測。デザインシステムの#F6EBD6ではない） */
  --beige-deep:   #E7C598;  /* 早割リボンの濃いベージュ */
  --blue-light:   #BEE1E9;  /* セクション背景の薄い水色 */
  --blue:         #7EC8D8;  /* 差し色の水色（早割帯・バッジ・フッター線） */
  --brown:        #3E2C23;  /* 濃茶（文字・お知らせバー・クロージング） */
  --orange:       #F06723;  /* CTA・価格 */
  --card:         #FFFDF8;  /* カードの白 */

  --w-outer: 1280px;        /* 外側コンテンツ幅 */
  --w-inner:  988px;        /* 第2コンテンツ幅（選ばれる理由カード等） */
  --gutter:    16px;        /* 左右最低余白 */

  --f-sans:  "Noto Sans JP", system-ui, sans-serif;
  --f-serif: "Noto Serif JP", serif;
  --f-disp:  "Yusei Magic", "Noto Sans JP", sans-serif;
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--beige);
  color:var(--brown);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.8;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }

.content{
  width:min(var(--w-outer), 100% - var(--gutter)*2);
  margin-inline:auto;
}

/* ---------- 共通: セクション見出し ---------- */
.sec-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:var(--f-disp);
  font-size:40px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.04em;
}
.sec-title__chappy{
  width:116px;            /* カンプ実測: 見えている犬の高さ96px（素材234pxのうち犬は194px） */
  flex:none;
  display:block;          /* 書き出し素材が丸マスク済みのため、CSS側のマスクは不要 */
}
.sec-title__chappy img{ width:100%; height:auto; display:block; }
.sec-title__text{ display:block; }
.sec-title__sub{
  display:block;
  margin-top:8px;
  font-family:var(--f-sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
}

/* ---------- 共通: 波の区切り ----------
   左右端の高さが揃っていないためタイル（繰り返し）は不可。
   width:100% + height:auto の等倍拡大にして継ぎ目をなくす。 */
.wave{
  display:block;
  width:100%;
  height:auto;
  position:relative;
  z-index:1;
}
.wave--bottom{ margin-bottom:-1px; }   /* 拡大時の隙間対策 */

/* ---------- 共通: 背景の線画装飾（透過17%） ---------- */
.deco{
  position:absolute;
  opacity:.17;
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* ============================================================
   お知らせバー
   ============================================================ */
.notice-bar{
  background:var(--brown);
  color:#fff;
  text-align:center;
  padding:10px var(--gutter);
}
.notice-bar p{
  font-size:13px;
  line-height:22px;
  letter-spacing:.02em;
}

/* ============================================================
   FV
   ============================================================ */
.fv{
  position:relative;
  height:55.14vw;          /* カンプ 794/1440 */
  max-height:900px;
  min-height:430px;
  overflow:hidden;
}
.fv__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.fv__logo{
  position:absolute;
  left:5%;                /* カンプ実測: 円の左端x72 */
  top:6.55%;              /* カンプ実測: 円の上端y94 */
  z-index:2;
  width:9.8vw;            /* カンプ実測: 直径141px */
  max-width:141px;
  min-width:76px;
}
.fv__logo img{ width:100%; height:auto; }

.fv__actions{
  position:absolute;
  right:4.58%;            /* カンプ実測: 右端から66px */
  top:2.52%;              /* カンプ実測: FV上端から20px */
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  z-index:2;
}
.btn-back,
.btn-cta-outline{
  display:flex;
  align-items:center;
  justify-content:center;
  width:274px;            /* カンプ実測 */
  height:52px;            /* カンプ実測 */
  padding:0 16px;
  border-radius:999px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.03em;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-back{
  background:rgba(255,255,255,.5);   /* 白の透過50% */
  color:var(--brown);
  border:5px solid var(--brown);     /* カンプ実測 */
  font-weight:700;
}
.btn-cta-outline{
  background:rgba(255,255,255,.5);   /* 白の透過50% */
  color:var(--orange);
  border:4px solid var(--orange);    /* カンプ実測 */
  font-weight:700;
}
.btn-back:hover{ background:rgba(255,255,255,.72); }
.btn-cta-outline:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(240,103,35,.28); }

.fv__title{
  position:absolute;
  left:15.6%;
  top:5.3%;
  z-index:2;
  font-family:var(--f-serif);
  font-weight:700;
  font-size:4.45vw;          /* カンプ 64/1440 */
  line-height:1.42;
  letter-spacing:.06em;
  color:var(--brown);
  -webkit-text-stroke:3px #F6EBD6;  /* カンプ実測: クリーム色のフチ。中央基準なので外側は約2px */
  paint-order:stroke fill;          /* フチを文字の後ろに描く */
  /* iOS Safariでは、Webフォント読み込み完了時の再描画でtext-strokeが消える不具合が知られているため、
     専用の描画レイヤーを強制して回避する(見た目は変わらない) */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.fv__title-l1,
.fv__title-l2{ display:block; }
.fv__title-l2{ margin-left:1.1em; }

.fv__period{
  position:absolute;
  right:4.58%;            /* カンプ実測: 右端から66px */
  bottom:6.55%;           /* カンプ実測: FV下端から52px */
  z-index:2;
}
/* カンプ実測: バッジの上辺にひょっこり乗り、下半身はバッジに隠れる */
.fv__period-chappy{
  position:absolute;
  left:11px;              /* カンプ実測 */
  bottom:52px;            /* バッジの上辺に前足を掛ける */
  width:58px;
  z-index:2;              /* 前足がバッジの上に見えるように */
}
.fv__period-badge{
  position:relative;
  z-index:1;
  background:var(--blue);
  color:#fff;
  font-size:19px;         /* カンプ実測: 文字の幅180px */
  font-weight:700;
  letter-spacing:.04em;
  line-height:1;
  padding:21px 40px;      /* カンプ実測: バッジ幅260px */
  border-radius:4px;
}

/* ============================================================
   早割特典
   ベース = 可変レイアウト（どの幅でも破綻しない）
   1280px以上 = カンプ実測値をそのまま当てる
   ============================================================ */
.early{
  position:relative;
  background:var(--blue);
  overflow:hidden;
}
/* SVGリボンの上に足りない分のベージュを継ぎ足す（カンプ実測: 帯上端から24px下に47pxぶん） */
.early::before{
  content:"";
  position:absolute;
  left:0;
  top:1.667vw;
  width:100%;
  height:3.264vw;
  background:var(--beige);
  z-index:0;
}
.early__ribbon{
  position:absolute;
  left:0;
  top:4.93vw;
  width:100%;
  height:auto;
  z-index:0;
}
.early__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:28px;
  min-height:375px;
  padding:34px 0;
}

/* 縦書きの「早割特典」札 */
.early__label{
  flex:none;
  width:86px;
  min-height:224px;
  background:url(../image/deco/early_bird_label.svg) no-repeat center/100% 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-rl;
  font-size:24px;
  font-weight:700;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--brown);
}

/* テキストだけを囲む枠。561px以上ではalign-self:stretch+padding-topで
   「波(リボン)の下＝水色部分」だけを基準に中央配置する（下のメディアクエリ参照）。
   label・rollは不透明な背景を持つので波に重なっても問題ないが、テキストは背景が
   透明なため、波の上に乗ると読みにくくなる。560px以下の専用デザインでは
   波との重なりが起きない配置になっているため、この調整は適用しない。 */
.early__copy-wrap{
  flex:1 1 auto;
  min-width:0;
}
.early__copy{
  min-width:0;
  text-align:center;
}
.early__lead{ line-height:1.35; word-break:keep-all; }  /* 「チャッピー自/慢の」のような語中改行を防ぐ */
.early__date{
  font-size:35px;
  font-weight:700;
  color:var(--orange);
  letter-spacing:.02em;
}
.early__lead-sub{
  font-size:18px;
  font-weight:500;
  color:var(--brown);
}
.early__main{
  font-size:34px;
  font-weight:700;
  color:var(--orange);
  letter-spacing:.02em;
  line-height:1.35;
}
.early__note{
  margin-top:26px;
  font-size:13px;
  color:var(--brown);
  letter-spacing:.02em;
}
.early__roll{
  flex:none;
  width:240px;
  height:240px;
  border-radius:50%;
  object-fit:cover;
}

/* --- 561px以上: カンプ(1440px)の実測値をvw基準にして連続的にスケールする ---
   固定pxだと「1280px未満で階段状の配置が崩れる」という手戻りが出たため、
   vw + clamp() に置き換え、561pxから1440px以上まで同じ見た目のまま滑らかに縮小させる。
   下限(clampの最小値)は700px前後でも詰まりすぎない値を目視で調整。 */
@media (min-width:561px){
  .early__inner{
    /* カンプ実測は109pxだったが、写真をflexアイテムに戻したことでテキストに残る幅が
       減り、実測したテキストの必要幅(436.6px@1440px)に対して足りなくなり2行に
       折り返る不具合が出た。余白を切り詰めてテキストの幅を確保する（詳細は下のroll・mainも同様）。 */
    padding-right:clamp(30px, 4.86vw, 70px);
  }
  .early__label{
    margin-left:clamp(60px, 10.14vw, 146px);   /* カンプ実測: 1440pxで左端x226 */
    width:clamp(56px, 5.97vw, 86px);
    min-height:clamp(150px, 15.56vw, 224px);
    font-size:clamp(16px, 1.67vw, 24px);
  }
  .early__copy-wrap{
    align-self:stretch;      /* 帯の全高に広げ、その中でpadding-topぶん波を避ける */
    display:flex;
    align-items:center;
    padding-top:clamp(70px, 14.07vw, 203px);  /* カンプ実測: 波の下端12.57vw + 余白1.5vw */
  }
  .early__copy{
    text-align:left;
    margin-left:clamp(16px, 3.19vw, 46px);     /* カンプ実測: 1行目の左端x388 */
    /* 縦位置は .early__copy-wrap の align-items:center に任せる（波を避けた範囲内で中央）。
       以前は帯全体の中央にtopオフセットで寄せていたが、狭い画面では札・写真とバランスが
       崩れる不具合があり、さらにそのオフセットのせいで広い画面では波に文字が乗る不具合もあった。 */
  }
  .early__date{ font-size:clamp(20px, 2.43vw, 35px); }
  .early__lead-sub{ font-size:clamp(12px, 1.25vw, 18px); }
  .early__main{
    margin-left:clamp(50px, 9.72vw, 140px);    /* カンプ実測179pxから縮小（テキスト幅確保のため） */
    font-size:clamp(18px, 2.36vw, 34px);
  }
  .early__note{
    margin-left:clamp(80px, 13.68vw, 197px);   /* カンプ実測: 注記の左端x585 */
    font-size:clamp(10px, 0.90vw, 13px);
  }
  /* 写真は絶対配置にせず、通常のflexアイテムとして幅を確保する。
     絶対配置だとテキスト側が「写真の分の幅」を一切考慮せずnowrapで伸びてしまい、
     フォントの実際のレンダリング幅がわずかに違う環境（ブラウザ・OSの違い）で
     写真の下に文字が隠れる事故が起きた。flexアイテムに戻すことで、テキストの
     使える幅が自動的に「写真の分だけ狭く」計算されるようになる。
     white-space:nowrapも外し、万一幅が足りない場合は消えずに折り返すようにした。 */
  .early__roll{
    /* .early__inner の gap:28px と二重にならないよう、その分を差し引いた値にする。
       カンプ実測の余白(109px相当)から縮めてテキスト側の幅を確保している */
    margin-left:clamp(12px, 4.72vw - 28px, 40px);
    width:clamp(150px, 16.67vw, 240px);
    height:clamp(150px, 16.67vw, 240px);
  }
}

/* ============================================================
   選ばれる理由
   ============================================================ */
.reason{
  position:relative;
  background:var(--beige);
  padding:114px 0 0;      /* カンプ実測: 見出し上端y1326 */
  overflow:hidden;
}
.reason .content{ position:relative; z-index:1; }

.reason__list{
  display:flex;
  justify-content:center;
  gap:44px;
  width:min(var(--w-inner), 100%);
  margin:63px auto 0;     /* カンプ実測: カード上端y1478 */
  padding-bottom:98px;    /* カンプ実測: カード下端から波の上端まで182px */
}
.reason-card{
  flex:1 1 0;
  max-width:300px;
  min-height:418px;
  background:var(--card);
  border-radius:20px;
  padding:44px 24px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  box-shadow:0 2px 12px rgba(62,44,35,.06);
}
.reason-card__icon{
  width:126px;
  height:126px;
  border-radius:50%;
  background:var(--brown);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.reason-card__icon img{ width:114px; }  /* カンプ実測: 円126pxに対しアイコンの描画幅76px */
.reason-card__title{
  margin-top:30px;
  font-size:20px;
  font-weight:700;
  line-height:1.55;
  letter-spacing:.02em;
}
.reason-card__text{
  margin-top:16px;
  font-size:14px;
  line-height:1.75;
  letter-spacing:.01em;
}

/* 背景の線画装飾 */
.deco--scallop{
  left:6%;                /* カンプ実測: 左端に食い込ませない */
  top:170px;
  width:270px;
  transform:rotate(-8deg);
}
.deco--starfish{
  right:-1%;
  top:465px;              /* 波との重なり防止のため上に調整 */
  width:265px;
  transform:rotate(14deg);
}

/* ============================================================
   共通パーツ（追加分）
   ============================================================ */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sp-only{ display:none; }


/* オレンジ塗りのボタン */
.btn-buy{
  display:block;
  width:100%;
  border:0;
  background:var(--orange);
  color:#fff;
  font-family:var(--f-sans);
  font-size:17px;
  font-weight:700;
  letter-spacing:.04em;
  padding:15px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-buy:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(240,103,35,.32); filter:brightness(1.04); }

/* オレンジ枠の白ボタン */
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:186px;
  height:44px;
  padding:0 26px;
  background:#fff;
  color:var(--orange);
  border:2px solid var(--orange);
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-outline:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(240,103,35,.24); }

/* ============================================================
   商品ラインナップ
   ============================================================ */
.lineup{
  position:relative;
  background:var(--blue-light);
  padding:116px 0 0;
}
.lineup__list{
  display:flex;
  gap:40px;
  margin-top:52px;
}
.pcard{
  flex:1 1 0;
  min-width:0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 3px 14px rgba(62,44,35,.07);
}
.pcard__photo{ position:relative; }
.pcard__photo img{ width:100%; aspect-ratio:620/445; object-fit:cover; }
.tag{
  position:absolute;
  top:14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  padding:5px 12px;
  border-radius:999px;
  line-height:1.4;
}
.tag--free{ left:14px; background:var(--orange); color:#fff; }  /* カンプ実測: オレンジ塗り＋白文字 */
.tag--noshi{ right:14px; background:var(--blue); color:#fff; }

.pcard__body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:14px 30px 30px;
}
/* 匠カードの内訳サムネイル */
.pcard__thumbs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:0 0 20px;
}
.pcard__thumbs li{
  flex:0 1 100px;       /* 幅が足りなければ縮む。伸びはしない */
  max-width:100px;      /* カンプ実測: 直径100px */
  height:auto;
  aspect-ratio:1;       /* 縮んでも正円を保つ */
  border-radius:50%;
  overflow:hidden;
  border:2px solid #E4D9C6;
  background:#fff;
  cursor:pointer;
  transition:border-color .2s ease, transform .2s ease;
}
.pcard__thumbs li img{ width:100%; height:100%; object-fit:cover; }
.pcard__thumbs li.is-current{ border-color:var(--orange); }
.pcard__thumbs li:hover{ transform:translateY(-2px); }

.pcard__use{
  align-self:flex-start;
  background:var(--brown);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  padding:5px 14px;
  border-radius:999px;
}
/* 「一番人気！」のリボン */
.pcard__ribbon{
  position:relative;
  margin:16px 16px 18px;   /* カンプ: 写真に重ねない */
  background:var(--brown);
  color:#fff;
  text-align:center;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  padding:16px 40px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%, 22px 50%);
}
.pcard__name{
  margin-top:12px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.5;
}
.pcard__lead{
  margin-top:10px;
  font-size:13px;
  line-height:1.85;
  padding-left:12px;
}
.pcard__label{
  margin-top:18px;
  font-size:13px;
  font-weight:700;
  padding-left:12px;
}
.pcard__items{
  margin-top:2px;
  padding-left:24px;
  font-size:13px;
  line-height:1.9;
}
.pcard__note{
  margin-top:16px;
  font-size:12px;
  padding-left:12px;
}
.pcard__price{
  margin-top:auto;
  padding-top:20px;
  text-align:right;
  color:var(--orange);
}
.pcard__price-num{ font-size:27px; font-weight:700; letter-spacing:.01em; }
.pcard__price-tax{ font-size:12px; margin-left:5px; }
.pcard__body .btn-buy{ margin-top:12px; }

/* ============================================================
   比較表
   ============================================================ */
.compare{
  width:min(var(--w-inner), 100%);
  margin:76px auto 0;
  border-collapse:separate;
  border-spacing:0;
  border-radius:8px;
  overflow:hidden;
  font-size:13px;
  line-height:1.7;
  background:#fff;
}
.compare th,
.compare td{ padding:18px 18px; text-align:left; vertical-align:middle; }
.compare thead th{
  background:var(--brown);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  padding:16px 18px;
}
.compare__corner{ width:110px; }
.compare tbody th{
  width:110px;
  text-align:center;   /* カンプ: 項目名は中央揃え */
  font-weight:700;
  font-size:13px;
}
.compare tbody tr:nth-child(odd) th,
.compare tbody tr:nth-child(odd) td{ background:var(--beige); }
.compare tbody tr:nth-child(even) th,
.compare tbody tr:nth-child(even) td{ background:#fff; }
.compare .is-accent{ color:var(--orange); }

/* ============================================================
   送料無料帯
   ============================================================ */
.shipping{
  width:min(var(--w-inner), 100%);
  margin:118px auto 200px;   /* 上下の間隔（波との間隔は下マージンに集約） */
}
.shipping__stage{
  position:relative;         /* 砂州はこの中の「カードだけ」を基準に中央配置する */
  padding:35px 0;            /* カード上下の余白（対称にして中心=カード中心にする） */
}
/* 砂州はフルブリードにしない（要件定義§14の例外）。白カードを中央に囲む程度の大きさに留める */
.shipping__sandbar{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:1120px;          /* カード(988px)の周囲にちらっと覗く程度 */
  max-width:120%;
  height:auto;
  z-index:0;
  pointer-events:none;
}
.shipping__card{
  position:relative;
  z-index:1;
  background:#fff;
  border-radius:6px;
  text-align:center;
  padding:24px 24px 22px;
}
.shipping__lead{ line-height:1.4; }
.shipping__lead strong{ font-size:23px; font-weight:700; letter-spacing:.01em; }
.shipping__lead span{ font-size:15px; }
.shipping__sub{ margin-top:12px; font-size:14px; }
.shipping__sub s{ opacity:.75; }
.shipping__zero{ color:var(--orange); font-size:24px; font-weight:700; }
.shipping__note{ margin-top:4px; font-size:11px; }

/* ============================================================
   ギフト対応について
   ============================================================ */
.gift{
  position:relative;
  background:var(--beige);
  padding:172px 0 160px;
  overflow:hidden;
}
.gift .content{ position:relative; z-index:1; }

.gbox{
  width:min(var(--w-inner), 100%);
  margin:88px auto 0;
  background:#CFAE83;          /* カンプ実測 */
  border-radius:10px;
  padding:26px;
}
.gbox__head{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:19px;
  font-weight:500;
  letter-spacing:.04em;
  padding:4px 0 26px 6px;
}
.gbox__no{
  width:44px;
  height:44px;
  flex:none;
  border-radius:50%;
  background:var(--brown);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  font-weight:700;
}
.gbox__card{
  background:#fff;
  border-radius:8px;
  padding:36px 40px;
}
.grow{ display:flex; gap:32px; align-items:flex-start; }
.grow + .grow{ margin-top:32px; padding-top:32px; border-top:1px solid #E4D9C6; }
.grow__photo{
  flex:none;
  width:340px;
  aspect-ratio:340/232;
  object-fit:cover;
  border-radius:3px;
}
.grow__text{ flex:1; min-width:0; padding-top:6px; }
.grow__text h4{ font-size:17px; font-weight:700; letter-spacing:.02em; }
.grow__text p{ margin-top:11px; font-size:14px; line-height:1.8; padding-left:6px; }
.grow__text h4 + p{ margin-top:14px; }
.grow__note{ font-size:12px; }
.glink{ text-decoration:underline; text-underline-offset:3px; }

.gbox__foot{
  display:flex;
  align-items:center;
  gap:22px;
  padding:30px 6px 6px;
}
.gbox__foot img{
  width:104px;
  height:104px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
}
.gbox__foot p{ font-size:14px; line-height:1.9; }

.gicons{ display:flex; gap:30px; }
.gicons li{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;    /* カンプ: 均等配置＋中央揃え */
  text-align:center;
}
.gicons__box{
  display:flex;
  align-items:center;
  justify-content:center;
  width:118px;
  height:118px;
  border-radius:8px;
  background:#D3B48A;          /* カンプ実測 */
}
.gicons__box img{ width:62px; }
.gicons p{ margin-top:16px; font-size:13.5px; line-height:1.75; }

/* 背景の線画装飾 */
.deco--starfish2{ left:1114.7px; top:398.8px; width:322.8px; height:381.7px; transform:rotate(24deg); }   /* Figma実測(1728:613) */
.deco--conch{ left:114px; top:1445px; width:147px; transform:scaleX(-1) rotate(60deg); }   /* カンプ実測(高さ230pxを基準に算出)。水平反転+60度回転 */
.deco--coral{ left:1213px; top:2267.9px; width:182px; opacity:1; }   /* coral_figma.pngは画像自体がすでに透過済みのため、共通クラスの17%と掛け算にならないよう打ち消す */

/* ============================================================
   お客様の声
   ============================================================ */
.voice{
  position:relative;
  background:var(--beige);
  padding:130px 0 0;
  overflow:hidden;
}
.voice .content{ position:relative; z-index:1; }
.deco--palm{
  left:clamp(400px, 47.2vw, 700px);   /* カンプ実測(1440px時680px)をvw化し、幅が変わっても追従するように */
  top:90px;                /* カンプ実測: 波の上から生えるよう上下位置を調整 */
  width:clamp(400px, 47.2vw, 700px);
  opacity:1;     /* SVG内で既に40%。カンプも40% */
}
.voice__list{
  display:flex;
  gap:44px;
  margin-top:56px;
}
.vcard{ flex:1 1 0; min-width:0; }
.vcard__face{
  display:block;
  width:186px;   /* カンプ実測 */
  height:186px;
  margin:0 auto;
  border-radius:50%;
  overflow:hidden;       /* カンプ: 背景の縁は無し */
}
.vcard__face img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.vcard__bubble{
  position:relative;
  margin-top:18px;
  background:#fff;
  border-radius:10px;
  padding:22px 22px 18px;
  font-size:13.5px;
  line-height:1.85;
}
.vcard__bubble::before{
  content:"";
  position:absolute;
  left:50%;
  top:-11px;
  transform:translateX(-50%);
  border:11px solid transparent;
  border-top:0;
  border-bottom-color:#fff;
}
.vcard__who{ margin-top:12px; text-align:center; font-size:12px; }
.voice__note{ margin-top:22px; text-align:center; font-size:11px; }

/* ============================================================
   お届けスケジュール
   ============================================================ */
.sched{
  position:relative;
  background:var(--blue-light);
  padding:112px 0 0;
}
.cal{
  width:min(700px, 100%);   /* カンプ実測 */
  margin:44px auto 0;
}
.cal__head{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-bottom:12px;
}
.cal__head li{
  background:var(--brown);
  color:#fff;
  text-align:center;
  font-size:12px;
  font-weight:700;
  padding:5px 0;
  border-radius:5px;
}
.cal__row{ position:relative; padding-bottom:58px; }   /* カンプ実測: 行間104px */
.cal__days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}
.cal__days li{
  position:relative;
  justify-self:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fff;
  color:var(--brown);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-disp);
  font-size:19px;
  line-height:1;
}
.cal__days li.is-deadline{ background:var(--orange); color:#fff; }
.cal__days li.is-arrive{ background:none; }
.cal__days li.is-arrive img{ width:64px; }
.cal__days li.is-arrive span{
  position:absolute;
  right:-2px;
  bottom:-2px;
  font-size:13px;
}
/* 期間を示す線 */
.cal__bar{
  position:absolute;
  left:calc((var(--from) + .5) * (100% / 7));
  width:calc((var(--to) - var(--from)) * (100% / 7));
  top:calc(46px + 8px);
  height:4px;
  border-radius:2px;
}
.cal__bar::after{
  content:"";
  position:absolute;
  right:-5px;
  top:50%;
  width:13px;
  height:13px;
  border-radius:50%;
  transform:translateY(-50%);
  background:inherit;
}
.cal__bar--orange{ background:var(--orange); }
.cal__bar--beige{ background:#D3B48A; }
.cal__bar--beige::after{ left:-5px; right:auto; }
.cal__bar--end::after{ left:auto; right:-5px; }
.cal__tag{
  position:absolute;
  left:calc((var(--at) + .5) * (100% / 7));
  top:calc(46px + 2px);
  font-size:11px;
  white-space:nowrap;
  transform:translateX(-50%);
}
.cal__tag--sm{ font-size:10px; top:calc(46px + 20px); }

.sched__note{ margin-top:14px; text-align:center; font-size:12px; }
.sched__cta{ margin-top:20px; text-align:center; padding-bottom:150px; }

/* ============================================================
   よくあるご質問
   ============================================================ */
.faq{
  position:relative;
  background:var(--beige);
  padding:148px 0 138px;
  overflow:hidden;
}
.faq .content{ position:relative; z-index:1; }
.deco--scallop2{ right:14px; bottom:110px; width:145px; transform:rotate(-37deg); }   /* Figma実測: -37度回転。下端の余白を確保 */

.faq__list{
  width:min(var(--w-inner), 100%);
  margin:60px auto 0;
}
.faq__item + .faq__item{ margin-top:22px; }
.faq__q{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--brown);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:19px 24px;
  font-family:var(--f-sans);
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:left;
  cursor:pointer;
}
.faq__badge{ font-size:13px; font-weight:700; flex:none; }
.faq__text{ flex:1; }
.faq__mark{
  position:relative;
  width:16px;
  height:16px;
  flex:none;
}
.faq__mark::before,
.faq__mark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:opacity .2s ease;
}
.faq__mark::before{ width:14px; height:1.6px; }
.faq__mark::after{ width:1.6px; height:14px; }
.faq__item.is-open .faq__mark::after{ opacity:0; }
.faq__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .25s ease;
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a-inner{
  overflow:hidden;
  display:flex;
  gap:14px;
  background:#fff;         /* カンプ: 回答は白背景 */
  border-radius:8px;
  margin-top:0;
  padding:0 24px;
  transition:padding .25s ease, margin .25s ease;
}
.faq__item.is-open .faq__a-inner{ margin-top:10px; padding:18px 24px; }
.faq__badge--a{ color:var(--orange); }
.faq__a p{ flex:1; font-size:14px; line-height:1.9; }

/* ============================================================
   クロージング
   ============================================================ */
.closing{
  background:var(--brown);
  color:var(--beige);
  text-align:center;
  padding:150px 0 120px;
}
.closing__title{
  font-family:var(--f-serif);
  font-weight:700;
  font-size:63px;   /* カンプ実測: 見出しの横幅835px */
  letter-spacing:.06em;
  line-height:1.4;
  color:var(--beige);
}
.closing__lead{ margin-top:8px; font-size:15px; letter-spacing:.02em; color:#fff; }   /* カンプ実測: 見出しのベージュと違い白 */
.closing__lead strong{ font-size:21px; font-weight:700; }
.closing__list{
  display:flex;
  justify-content:center;
  gap:90px;
  margin-top:62px;
  width:min(var(--w-inner), 100%);
  margin-inline:auto;
}
.closing__list li{ flex:1 1 0; min-width:0; }
.closing__photo{
  display:block;
  width:190px;   /* カンプ実測 */
  height:190px;
  margin:0 auto 26px;
  border-radius:50%;
  overflow:hidden;
}
.closing__photo img{ width:100%; height:100%; object-fit:cover; }
.closing__note{ margin-top:28px; font-size:14px; color:#fff; }   /* カンプ実測: 見出しのベージュと違い白 */

/* ============================================================
   フッター
   ============================================================ */
.site-footer{
  background:var(--brown);
  color:var(--beige);
  border-top:20px solid var(--blue);
  padding:60px 0 38px;
}
.site-footer__top{
  display:flex;
  align-items:flex-start;
}
.site-footer__logo{ flex:none; width:118px; margin-left:167px; }  /* カンプ実測: ロゴ x247-364 */
.site-footer__nav{ display:flex; gap:70px; margin-left:138px; padding-top:10px; }  /* カンプ実測: ナビ左端x514 */
.site-footer__nav ul li + li{ margin-top:9px; }
.site-footer__nav a{ font-size:14px; }
.site-footer__nav a:hover{ text-decoration:underline; text-underline-offset:3px; }
.site-footer__sns{ display:flex; gap:10px; margin-left:105px; padding-top:10px; }  /* カンプ実測: SNS左端x1027 */
.site-footer__sns img{ width:26px; filter:brightness(0) invert(1); }  /* 塗り指定が無く黒のため、濃茶背景で沈まないよう白に */

.site-footer__badges{
  display:flex;
  justify-content:center;
  gap:36px;
  margin-top:42px;
}
.site-footer__badges li{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
}
.fbadge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:none;
  border-radius:50%;
  border:1.5px solid var(--beige);   /* カンプ: アイコンは丸で囲まれている */
}
.site-footer__badges img{ width:20px; }

.site-footer__links{
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid rgba(240,222,193,.28);
  text-align:center;
  font-size:11px;
}
.site-footer__links a{ text-decoration:underline; text-underline-offset:3px; }
.site-footer__demo{
  margin-top:6px;
  text-align:center;
  font-size:11px;
  opacity:.85;
}
.site-footer__copy{ margin-top:8px; text-align:center; font-size:13px; }

/* ============================================================
   トップへ戻る（画面固定・ジャンプアニメーション＋効果音）
   ============================================================ */
#backToTop{
  position:fixed;
  right:28px;
  bottom:24px;
  z-index:90;
  border:none;
  background:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
#backToTop.is-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
#backToTop:hover{ transform:translateY(-3px); }
.btt-label{
  font-size:15px;
  font-weight:700;
  color:var(--brown);
  text-shadow:0 1px 4px rgba(240,222,193,.9);
}
.chappie-stage{
  position:relative;
  width:98px;
  height:157px;
}
.chappie-sprite{
  position:absolute;
  inset:0;
  width:98px;
  height:157px;
  filter:drop-shadow(0 3px 6px rgba(62,44,35,.25));
  background-image:url("../image/backtotop/jump_sprite.png");
  background-repeat:no-repeat;
  background-size:392px auto;
  background-position:0 0;  /* 待機時＝しゃがみ姿勢（1コマ目） */
}
.chappie-sprite.is-playing{
  animation:chappie-jump .56s steps(3) 1;  /* forwardsなし＝終了後は自動でしゃがみ姿勢に戻る */
}
@keyframes chappie-jump{
  from{ background-position:0 0; }
  to  { background-position:-294px 0; }
}
@media (max-width:560px){
  /* fixed-cta（追従CTAバー、高さ約70px）と重ならないよう底上げする */
  #backToTop{ right:14px; bottom:calc(74px + env(safe-area-inset-bottom)); }
  .chappie-stage{ width:74px; height:118px; }
  .chappie-sprite{ width:74px; height:118px; background-size:296px auto; }
  @keyframes chappie-jump{ from{ background-position:0 0; } to{ background-position:-222px 0; } }
  .btt-label{ font-size:13px; }
}

/* ============================================================
   スマホの追従CTAバー
   ============================================================ */
.fixed-cta{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(62,44,35,.92);
  transform:translateY(110%);
  transition:transform .25s ease;
  display:none;
}
.fixed-cta.is-visible{ transform:translateY(0); }
.fixed-cta a{
  display:block;
  background:var(--orange);
  color:#fff;
  text-align:center;
  font-size:16px;
  font-weight:700;
  letter-spacing:.04em;
  padding:14px;
  border-radius:999px;
}

/* ============================================================
   レスポンシブ
   スマホ方針: 商品カードは1列・写真は画面幅いっぱい・装飾はすべて残す
   ============================================================ */
@media (max-width:900px){
  .sec-title{ font-size:30px; gap:10px; }
  /* --- 追加セクション --- */
  .lineup__list{ gap:24px; }
  .pcard__body{ padding:18px 18px 20px; }
  .pcard__name{ font-size:18px; }
  .pcard__thumbs{ gap:10px; }
  .grow{ gap:20px; }
  .grow__photo{ width:240px; }
  .gicons{ gap:18px; }
  .gicons__box{ width:88px; height:88px; }
  .gicons__box img{ width:52px; }
  .voice__list{ gap:22px; }
  .vcard__face{ width:120px; height:120px; }
  .closing__title{ font-size:34px; }
  .closing__list{ gap:32px; }
  .site-footer__top{ gap:26px; flex-wrap:wrap; }
  .site-footer__nav{ gap:32px; }

  .sec-title__chappy{ width:83px; }

  .early__inner{ gap:24px; min-height:320px; }
  /* 文字サイズ・インデント・写真サイズは561px以上の共通ルール(clamp)で連続的にスケールするため、
     ここでは固定pxの上書きをしない（過去、この固定値のせいで階段状の配置が崩れる不具合があった） */

  .reason__list{ gap:24px; padding-bottom:110px; }
  .reason-card{ padding:32px 16px 26px; min-height:0; }
  .reason-card__icon{ width:100px; height:100px; }
  .reason-card__icon img{ width:90px; }
  .reason-card__title{ font-size:17px; margin-top:22px; }
  .reason-card__text{ font-size:13px; }
}

@media (max-width:560px){
  body{ font-size:15px; }
  /* --- 追加セクション: スマホ --- */
  .pc-only{ display:none; }
  .sp-only{ display:inline; }

  /* 幅が狭いとカードに重なってしまうため、小さめの背景装飾はスマホで非表示 */
  .deco--starfish2, .deco--conch, .deco--coral, .deco--scallop2{ display:none; }

  .lineup{ padding-top:52px; }
  .lineup__list{ flex-direction:column; gap:28px; margin-top:30px; }
  .pcard{ border-radius:12px; }
  /* 写真に重ねない（PCと同じくカンプ通り）。4つが収まるよう中央寄せ */
  .pcard__thumbs{ padding-left:0; justify-content:center; gap:8px; margin:0 0 16px; }
  .pcard__ribbon{ margin:14px 0 14px; font-size:12.5px; padding:12px 30px; }
  .pcard__name{ font-size:17px; }
  .pcard__lead,.pcard__items,.pcard__label{ font-size:12.5px; }
  .pcard__price-num{ font-size:24px; }
  .btn-buy{ font-size:15px; padding:13px 16px; }

  .compare{ margin-top:34px; font-size:11px; }
  .compare th,.compare td{ padding:10px 8px; }
  .compare thead th{ font-size:11px; padding:11px 8px; }
  .compare__corner,.compare tbody th{ width:64px; text-align:center; font-size:11px; }

  .shipping{ margin:56px auto 54px; }
  .shipping__stage{ padding:20px 0; }
  .shipping__card{ padding:22px 16px 20px; }
  .shipping__lead strong{ font-size:17px; }
  .shipping__lead strong:last-of-type{ display:block; }   /* 「どちらも」から改行 */
  .shipping__lead span{ font-size:13px; display:block; }  /* 「この特集の」からも改行し、意図通り3行構成にする */
  .shipping__zero{ font-size:20px; }

  .gift{ padding:60px 0 56px; }
  .gbox{ margin-top:26px; padding:14px; border-radius:8px; }
  .gbox__head{ font-size:16px; gap:10px; padding-bottom:12px; }
  .gbox__no{ width:36px; height:36px; font-size:16px; }
  .gbox__card{ padding:16px; }
  /* 写真は画面幅いっぱいに近づけ、テキストは下へ */
  .grow{ flex-direction:column; gap:14px; }
  .grow__photo{ width:100%; }
  .grow__text{ padding-top:0; }
  .grow__text p{ font-size:12.5px; padding-left:0; }
  .gbox__foot{ gap:14px; padding:16px 0 2px; }
  .gbox__foot img{ width:76px; height:76px; }
  .gbox__foot p{ font-size:12px; }
  .gicons{ flex-direction:column; gap:16px; }
  .gicons li{ display:flex; align-items:center; gap:16px; }
  .gicons__box{ width:68px; height:68px; flex:none; }
  .gicons__box img{ width:40px; }
  .gicons p{ margin-top:0; font-size:12.5px; }

  .voice{ padding-top:24px; }
  .voice__list{ flex-direction:column; gap:26px; margin-top:28px; }
  .vcard{ display:flex; align-items:center; gap:16px; }
  .vcard__face{ width:88px; height:88px; margin:0; flex:none; }
  .vcard__bubble{ margin-top:0; flex:1; padding:16px 16px 12px; font-size:12.5px; }
  .vcard__bubble::before{ left:-10px; top:34px; transform:none; border:10px solid transparent; border-left:0; border-right-color:#fff; }
  .vcard__who{ text-align:right; font-size:11px; }
  .deco--palm{ left:50%; top:110px; width:320px; transform:translateX(-42%); }

  .sched{ padding-top:56px; }
  .cal{ margin-top:26px; }
  .cal__head{ gap:4px; }
  .cal__head li{ font-size:10px; }
  .cal__days{ gap:4px; }
  .cal__days li{ width:38px; height:38px; font-size:15px; }
  .cal__days li.is-arrive img{ width:34px; }
  .cal__row{ padding-bottom:30px; }
  .cal__bar{ top:calc(38px + 6px); }
  .cal__tag{ top:calc(38px + 9px); font-size:9.5px; }
  .cal__tag--sm{ font-size:9px; }
  .sched__cta{ padding-bottom:80px; }

  .faq{ padding:58px 0 50px; }
  .faq__list{ margin-top:28px; }
  .faq__q{ padding:13px 16px; font-size:13.5px; gap:10px; }
  .faq__a > p{ font-size:13px; padding:0 16px; }
  .faq__item.is-open .faq__a > p{ padding:13px 16px 2px; }

  .closing{ padding:56px 0 48px; }
  .closing__title{ font-size:25px; letter-spacing:.04em; }
  .closing__lead{ font-size:13px; }
  .closing__lead strong{ font-size:17px; }
  .closing__list{ flex-direction:column; align-items:center; gap:28px; margin-top:32px; }
  .closing__photo{ width:118px; height:118px; margin-bottom:16px; }
  .closing__note{ font-size:13px; }

  .site-footer{ border-top-width:14px; padding:32px 0 20px; }
  .site-footer__top{ flex-direction:column; align-items:center; gap:22px; text-align:center; margin-left:0; }
  .site-footer__logo{ width:112px; margin-left:0; }
  .site-footer__nav{ gap:8px 40px; flex-wrap:wrap; justify-content:center; text-align:center; margin-left:0; }
  .site-footer__nav ul{ display:flex; flex-direction:column; align-items:center; }
  .site-footer__nav a{ font-size:13px; }
  .site-footer__sns{ margin-left:0; justify-content:center; }
    .site-footer__badges{ gap:16px; margin-top:26px; flex-wrap:wrap; }
  .site-footer__badges li{ font-size:11.5px; }
  .site-footer__badges img{ width:18px; }
  .site-footer__links{ font-size:10px; }

  /* 追従CTAバーはスマホのみ */
  .fixed-cta{ display:block; }
  body{ padding-bottom:0; }


  /* PCの flex:1 1 0 は縦積みにすると「高さ0」として効いてしまうため、
     縦積みになる要素はすべて解除する */
  .reason-card,
  .pcard,
  .vcard,
  .gicons li,
  .closing__list li{ flex:none; }


  .notice-bar p{ font-size:11px; }

  /* FV: 写真は画面幅いっぱい。縦を確保してコピーとバッジの居場所を作る */
  .fv{ height:auto; min-height:0; max-height:none; aspect-ratio:auto; }
  .fv__photo{ position:static; width:100%; height:76vw; min-height:300px; }
  .fv__logo{ left:12px; top:10px; width:66px; min-width:0; }
  .fv__actions{
    position:static;
    flex-direction:row;
    gap:8px;
    padding:12px var(--gutter);
    background:var(--beige);
  }
  .btn-back,.btn-cta-outline{
    flex:1 1 0;
    height:44px;
    padding:0 8px;
    font-size:12px;
  }
  .fv__title{
    left:var(--gutter);
    top:auto;
    bottom:auto;
    top:92px;
    font-size:30px;
    letter-spacing:.04em;
  }
  .fv__title-l2{ margin-left:.8em; }
  .fv__period{ right:var(--gutter); bottom:auto; top:calc(76vw - 62px); }
  /* PCの bottom:52px はスマホの小さいバッジだと浮いてしまうので縮める */
  .fv__period-chappy{ width:42px; left:8px; bottom:22px; }
  .fv__period-badge{ font-size:12px; padding:9px 12px; }

  /* 早割: ラベルは左端ギリギリ／写真は右にはみ出して切る（要件定義§14） */
  .early{ overflow:hidden; }
  .early__inner{
    gap:14px;
    min-height:0;
    padding:34px 0 30px;
    align-items:center;
  }
  .early__label{
    width:52px;
    min-height:150px;
    font-size:15px;
    letter-spacing:.34em;
    text-indent:.34em;
    border-width:1.5px;
  }
  /* テキストは帯全体でなく「波の下＝水色が見える範囲」の中で中央に来るようにする。
     帯全体を基準に中央配置すると、波の装飾ぶん常に視覚的に上寄りに見えてしまう
     （561px以上の.early__copy-wrapと同じ理由。波の下端12.57vwから、
     .early__innerのpadding-top34pxぶんを引いた値をpadding-topにする）。 */
  .early__copy-wrap{
    align-self:stretch;
    display:flex;
    align-items:center;
    padding-top:clamp(18px, 14.07vw - 34px, 45px);
  }
  .early__copy{ text-align:left; }
  .early__date{ font-size:22px; }
  .early__lead-sub{ font-size:13px; }
  .early__main{ font-size:19px; }
  .early__note{ margin-top:14px; font-size:10px; }
  .early__roll{
    position:absolute;
    right:-46px;
    top:50%;
    transform:translateY(-50%);
    width:140px;
    height:140px;
    margin:0;
    z-index:-1;
    opacity:.9;
  }

  .reason{ padding-top:56px; }
  .reason__list{
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-top:32px;
    padding-bottom:70px;
  }
  .reason-card{
    width:100%;
    max-width:none;
    flex-direction:row;
    align-items:center;
    text-align:left;
    gap:18px;
    padding:20px 18px;
  }
  .reason-card__icon{ width:74px; height:74px; }
  .reason-card__icon img{ width:68px; }
  .reason-card__title{ margin-top:0; font-size:16px; }
  .reason-card__text{ margin-top:6px; font-size:12.5px; }
  .reason-card__title br,
  .reason-card__text br{ display:none; }
  .reason-card__body{ flex:1; }

  .deco--scallop{ width:140px; top:175px; left:-10px; }   /* チャッピーと近すぎたため、選ばれる理由1番目のアイコンの後ろに少し見える程度まで下げた */
  .deco--starfish{ width:150px; top:auto; bottom:90px; right:-6%; }
}