*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
}
.wrap{max-width:750px;margin:0 auto;}
/* キャンペーン一時停止／完全終了バナー（通常はhidden属性で非表示） */
.campaign-end-banner{max-width:750px;width:100%;margin:0 auto;}
.campaign-end-banner[hidden]{display:none;}
img{display:block;max-width:100%;height:auto;}
/* FV（CTA・タイトル・2x2ナビは fv.webp の上に絶対配置） */
.fv-block{position:relative;}
.fv-block .fv-bg{width:100%;}
.fv-cta{
  display:block;
  position:absolute;
  top:47%;
  left:50%;
  transform:translateX(-50%);
  width:86%;
  max-width:560px;
  z-index:2;
  animation:fv-cta-bob 2s ease-in-out infinite;
}
/* 延長verで再開している期間はFV画像内のCTA位置が変わるため調整する */
.fv-cta.is-extended{top:50%;}
/* CTAボタンが上下にぷかぷか浮くアニメーション（中央寄せのtranslateX(-50%)は維持したまま
   translateYだけを動かす） */
@keyframes fv-cta-bob{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(-8px);}
}
@media (prefers-reduced-motion: reduce){
  .fv-cta{animation:none;}
}
/* 今のあなたのライフステージは？ タイトル */
.stage-title{
  position:absolute;
  top:63.5%;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  max-width:460px;
}
/* 2x2 ライフステージ ナビ（クイック選択） */
.stage-nav-grid{
  position:absolute;
  top:75%;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  width:92%;
  max-width:600px;
  align-items: end;
}
.stage-nav-grid a{display:block;}
.stage-nav-grid img{
  width:100%;
}
/* 縦リボンナビ（カテゴリ切替タブ／デフォルトは妊活中） */
.stage-ribbon-nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  width:94%;
  margin:0 auto 15px;
  padding:0;
}
.stage-ribbon-nav button{
  display:block;
  width:100%;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}
.stage-ribbon-nav img{
  width:100%;
  filter:grayscale(1) brightness(.35);
  transition:filter .15s ease;
}
.stage-ribbon-nav button.is-active img{
  filter:none;
}
/* ライフステージ カテゴリパネル（常に全カテゴリを表示。ribbonナビはオファータブの切替のみに使用） */
/* 背景画像に見出し・タグライン・イラストが焼き込み済みのため、
   各セクションはその画像をそのまま背景として使い、画像と同じ縦横比で
   高さを確保する（幅750pxデザイン基準）。product-cardは画像内の余白部分に
   product-card-group（親要素）ごと絶対配置する。 */
.stage-panels{position:relative;}
.stage-section{
  position:relative;
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 100%;
}
.stage-section.precon{
  background-image:url("https://belta-shop.bbo-tech.com/campaign/belta_restartcp2608_st_sleep/belta_restartcp2608_st_sleep_bg-pregnancy.webp");
  aspect-ratio:750/963;
}
.stage-section.maternity{
  background-image:url("https://belta-shop.bbo-tech.com/campaign/belta_restartcp2608_st_sleep/belta_restartcp2608_st_sleep_bg-maternity.webp");
  aspect-ratio:750/618;
}
.stage-section.childcare{
  background-image:url("https://belta-shop.bbo-tech.com/campaign/belta_restartcp2608_st_sleep/belta_restartcp2608_st_sleep_bg-childcare.webp");
  aspect-ratio:750/638;
}
.stage-section.beauty{
  background-image:url("https://belta-shop.bbo-tech.com/campaign/belta_restartcp2608_st_sleep/belta_restartcp2608_st_sleep_bg-beauty.webp");
  aspect-ratio:750/1326;
}
/* product-card群をまとめて絶対配置する親要素（カード1枚ずつに数値指定しない） */
.product-card-group{
  position:absolute;
  left:0;
  right:0;
}
.stage-section.precon .product-card-group{top:30%;}
@media (max-width: 769px) {
  .stage-section.precon .product-card-group{top:28%;}
}
.stage-section.maternity .product-card-group{top:43%;}
.stage-section.childcare .product-card-group{top:43%;}
.stage-section.beauty .product-card-group{top:19.5%;}
.product-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  max-width:640px;
  margin:0 auto 20px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
@media (max-width: 769px) {
  .product-card{
    width:90%;
  }
}
.product-card img.product-photo{width:100%;display:block;}
.product-card .cta-wrap{
  position:absolute;
  right:5%;
  bottom:9%;
  width:47%;
  max-width:280px;
}
@media (max-width: 769px) {
  .product-card .cta-wrap{
    right:3%;
  }
}
.product-card .cta-wrap a{display:block;}
.product-card .cta-wrap img{width:100%;display:block;}
/* オファー タブ切替（tab-group / panel-group） */
.tab-group{
  display:none;
  background:#fff;
  overflow:hidden;
  max-width:680px;
  margin:24px auto 0;
  text-align:left;
}
.tab-group.is-active{display:block;}
.tab-group .tab{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:5px;
}
.tab-group .tab.tab-cols-1{grid-template-columns:1fr;}
.tab-group .tab.tab-cols-2{grid-template-columns:1fr 1fr;}
.tab-group .tab.tab-cols-3{grid-template-columns:1fr 1fr 1fr;}
.tab-group .tab li{cursor:pointer;}
.tab-group .tab li img{
  width:100%;
  display:block;
  /* filter: grayscale(.6); */
  /* opacity: .7; */
}
.tab-group .tab li.tab_selected img{
  /* filter: none; */
  /* opacity: 1; */
}
.tab-group .tab li.tab-label{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-align:center;
  /* background: #eee; */
  /* color: #666; */
  /* font-weight: bold; */
  /* font-size: 14px; */
  /* padding: 16px 8px; */
}
.tab-group .tab li.tab-label.tab_selected{
  background:#fff;
  color:#DE4798;
}
.tab-group .panel-group{list-style:none;margin:0;}
.tab-group .panel-group li{display:none;}
.tab-group .panel-group li.is-show{display:block;}
.tab-group .panel-group img{width:100%;display:block;}
.offer-placeholder{
  padding:60px 24px;
  text-align:center;
  color:#555;
  font-size:15px;
  line-height:1.8;
  border:1px dashed #ccc;
  border-radius:12px;
}
/* ログイン方法アコーディオン */
.login-accordion{
  max-width:680px;
  margin:0 auto 8px;
  padding:0 16px;
}
.login-toggle{
  display:block;
  width:100%;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}
.login-toggle img{width:100%;}
.login-content{
  display:none;
  text-align:left;
  padding:18px 22px;
  border:1px solid #ddd;
  border-top:none;
  border-radius:0 0 10px 10px;
  font-size:14px;
  line-height:1.8;
  color:#444;
  background:#fafafa;
}
.login-content.is-open{display:block;}
/* ============================================================
   商品詳細スライドイン（product-photo クリック→右からスライド＋フェードで表示）
   ============================================================ */
.product-card img.product-photo[data-detail-target]{cursor:pointer;}
.product-detail{
  position:fixed;
  top:0;
  bottom:0;
  left:50%;
  width:100%;
  max-width:750px;
  background:#fff;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateX(100%);
  /* visibilityはtransform/opacityのアニメーションが終わってから切り替える
     （閉じる時に .35s 遅延させることで、右へフェードアウトし切るまで
     表示を維持する。即座にvisibility:hiddenになると「パッと消える」ように
     見えてしまうため） */
  transition:transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
}
.product-detail.is-open{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateX(0);
  /* 開く時はvisibilityを遅延なく即座にvisibleへ */
  transition:transform .35s ease, opacity .35s ease, visibility 0s linear 0s;
}
.product-detail-scroll{padding-bottom:100px;}
/* 見出し部分（バッジ＋商品名）：添付いただいたデザインに合わせ、
   ヘッダー行全体をテーマカラーで塗りつぶしたバーにし、その上に
   白い縁取りの「妊活中」バッジ＋白文字の商品名を横並びで乗せる */
.product-detail-hero-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--detail-accent-color,#FA774B);
  padding:10px 14px;
}
.product-detail-stage-badge{
  flex:0 0 auto;
  background:transparent;
  border:1.5px solid #fff;
  color:#fff;
  font-size:12px;
  font-weight:bold;
  line-height:1;
  padding:5px 10px;
  border-radius:6px;
}
.product-detail-hero-title{
  flex:0 1 auto;
  font-size:16px;
  font-weight:bold;
  color:#fff;
  text-align:center;
}
.product-detail-photo-wrap img{
  width:100%;
  height:auto;
  display:block;
}
.product-detail-photo-placeholder{
  width:100%;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#f7f6f4;
  border-radius:12px;
  color:#999;
  font-size:14px;
  padding:20px;
}
.product-detail-body{padding:20px 0;}
.product-detail-lead{
  font-size:14px;
  line-height:1.9;
  color:#444;
  margin:0 0 20px;
}
@media (max-width: 769px) {
  .product-detail-lead{
    margin:0 10px 20px;
  }
}
.product-detail-diagram-placeholder{
  width:100%;
  aspect-ratio:1/1;
  max-width:320px;
  margin:0 auto 20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fdece4;
  color:#c8683f;
  font-size:14px;
  font-weight:bold;
  padding:20px;
}
/* 「商品詳細」「よくある質問」見出しはどちらもテーマカラーで塗りつぶしたバーにする
   （商品/カテゴリごとに --detail-accent-color で色が変わる。角丸は使用しない） */
.product-detail-section-title{
  font-size:15px;
  font-weight:bold;
  text-align:center;
  color:#fff;
  background:var(--detail-accent-color,#FA774B);
  padding:10px 14px;
  margin:28px 0 0;
}
.product-detail-section-title.faq-title{
  padding:12px 20px;
  margin:32px 0 0;
}
/* 商品詳細テーブル（開閉なしの行／開閉ありのアコーディオン行） */
.detail-table{border-bottom:1px solid #eee;}
.detail-row{
  border-top:1px dotted #eee;
  padding:14px 10px;
  font-size:14px;
  color:#333;
}
.detail-row:first-child{border-top:none;}
.detail-row-static{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.detail-row-static .detail-row-label{color:#777;}
.detail-row-static .detail-row-value{flex:1;}
.detail-row-expandable{padding:0;}
.detail-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  border:none;
  background:none;
  padding:14px 10px;
  font-size:14px;
  color:#333;
  text-align:left;
  cursor:pointer;
}
.detail-toggle .icon-plus{
  position:relative;
  width:14px;
  height:14px;
  flex:0 0 14px;
}
.detail-toggle .icon-plus::before,
.detail-toggle .icon-plus::after{
  content:"";
  position:absolute;
  background:var(--detail-accent-color,#c8683f);
  transition:opacity .15s ease;
}
.detail-toggle .icon-plus::before{top:6px;left:0;width:14px;height:2px;}
.detail-toggle .icon-plus::after{top:0;left:6px;width:2px;height:14px;}
/* 開いた状態は「＋」の縦棒だけを消して「－」にする（回転させて×にはしない） */
.detail-row-expandable.is-open .detail-toggle .icon-plus::after{opacity:0;}
.detail-row-content{
  display:none;
  padding:0 10px 16px;
  font-size:14px;
  line-height:1.8;
  color:#555;
}
.detail-row-expandable.is-open .detail-row-content{display:block;}
/* よくある質問（FAQ） */
.faq-accordion{border-bottom:1px solid #eee;}
.faq-item{border-top:1px solid #eee;}
.faq-question{
  display:flex;
  align-items:flex-start;
  gap:5px;
  width:100%;
  border:none;
  background:none;
  padding:16px 10px;
  font-size:14px;
  font-weight:bold;
  color:#333;
  text-align:left;
  cursor:pointer;
}
.faq-question .q-mark{
  flex:0 0 auto;
  color:var(--detail-accent-color,#FA774B);
  font-weight:bold;
}
.faq-question .icon-plus{
  position:relative;
  width:14px;
  height:14px;
  flex:0 0 14px;
  margin-left:auto;
  margin-top:2px;
}
.faq-question .icon-plus::before,
.faq-question .icon-plus::after{
  content:"";
  position:absolute;
  background:var(--detail-accent-color,#c8683f);
  transition:opacity .15s ease;
}
.faq-question .icon-plus::before{top:6px;left:0;width:14px;height:2px;}
.faq-question .icon-plus::after{top:0;left:6px;width:2px;height:14px;}
/* 開いた状態は「＋」の縦棒だけを消して「－」にする（回転させて×にはしない） */
.faq-item.is-open .faq-question .icon-plus::after{opacity:0;}
.faq-answer .a-mark{
  color:var(--detail-accent-color,#FA774B);
  font-weight:bold;
  margin-right:4px;
}
.faq-answer{
  display:none;
  padding:0 4px 18px 28px;
  font-size:13px;
  line-height:1.9;
  color:#555;
}
.faq-item.is-open .faq-answer{display:block;}
/* 画面下部に固定表示される「戻る」バー */
.detail-back-bar{
  position:fixed;
  left:50%;
  bottom:0;
  width:100%;
  max-width:750px;
  transform:translateX(-50%);
  background:#fff;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:1001;
  text-align:center;
  opacity:0;
  visibility:hidden;
  /* 商品詳細パネルのスライドアウトと同時にフェードアウトさせる
     （表示のON/OFFをdisplayで即切り替えず、opacityでパネルと一緒にフェードさせる） */
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.detail-back-bar.is-visible{
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.detail-back-btn{
  display:inline-block;
  width:100%;
  max-width:500px;
  padding:14px 0;
  border-radius:999px;
  border:none;
  background:var(--detail-accent-color,#FA774B);
  color:#fff;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
}
body.detail-open{overflow:hidden;}
.img-wrap {
    position: relative;
}
.pass-text {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    font-size: 23px;
    font-weight: 700;
    font-family: "Yu Gothic", YuGothic, sans-serif;
}
@media (max-width: 769px) {
    .pass-text {
        font-size: 14px;
        white-space: nowrap;
        z-index: 2;
    }
}
.pass-text a {
    color: inherit;
    text-underline-offset: 5px;
    text-decoration: underline 1px;
}
.acd_btn {
  appearance: none;
  display: block;
  width: 100%;
  line-height: 0;
  vertical-align: top;
  cursor: pointer;
  border-width: 0px;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  background: transparent;
  padding: 0px;
}