/* hero-buycard.css — トップページ ファーストビュー「購入カード」
   index.html の <section class="hero hero-v2"> に data-fv="card" を付けると有効になります。
   元に戻すとき: data-fv="card" を外し、.fv-card と .fv-sub のブロックを削除する。
   既存のCSSは変更していません。 */

/* 1) 最初の画面から外すもの(HTMLは残したまま非表示) */
.hero[data-fv="card"] .hero-actions,
.hero[data-fv="card"] .hero-pricerow,
.hero[data-fv="card"] .hero-photos .hero-pkg,
.hero[data-fv="card"] .hero-photos .hero-imgnote,
.hero[data-fv="card"] .hero-lead span:nth-child(2){display:none !important}

/* 2) 購入カード */
.hero[data-fv="card"] .fv-card{display:flex;align-items:stretch;gap:20px;width:100%;max-width:560px;box-sizing:border-box;margin:20px 0 0;padding:16px;background:#fff;border:1px solid #EADFD5;border-radius:14px;box-shadow:0 18px 40px rgba(120,80,60,.14)}
.hero[data-fv="card"] .fv-card-img{position:relative;flex:none;width:214px;min-height:168px;margin:0;border-radius:8px;overflow:hidden}
.hero[data-fv="card"] .fv-card-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero[data-fv="card"] .fv-card-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:3px 0;background:rgba(30,24,20,.62);color:#fff;font-size:11px;line-height:1.4;letter-spacing:.04em;text-align:center;white-space:nowrap}
.hero[data-fv="card"] .fv-card-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.hero[data-fv="card"] .fv-plan{margin:0;font-size:15px;font-weight:700;line-height:1.5;letter-spacing:.06em;color:#8A5A45;white-space:nowrap}
.hero[data-fv="card"] .fv-price{margin:2px 0 0;display:flex;align-items:baseline;gap:6px;font-size:16px;line-height:1.15;color:#4A423E;white-space:nowrap}
.hero[data-fv="card"] .fv-price b{font-family:"Noto Serif JP",serif;font-size:44px;font-weight:600;letter-spacing:.01em;color:#8A3E28}
.hero[data-fv="card"] .fv-note{margin:6px 0 0;font-size:13px;line-height:1.6;color:#5A504B}
.hero[data-fv="card"] .fv-note span{display:inline-block;white-space:nowrap}
.hero[data-fv="card"] .fv-buy{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:999px;background:#B5593C;color:#fff !important;font-size:19px;font-weight:700;letter-spacing:.1em;text-decoration:none !important;white-space:nowrap;box-shadow:0 10px 22px rgba(138,62,40,.26);transition:background .2s,transform .2s,box-shadow .2s}
.hero[data-fv="card"] .fv-buy:hover{background:#A34A3A;transform:translateY(-1px);box-shadow:0 14px 26px rgba(138,62,40,.32)}
.hero[data-fv="card"] .fv-buy:focus-visible{outline:3px solid #1F3A93;outline-offset:3px}
.hero[data-fv="card"] .fv-buy svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 3) カード下の補足(通常価格・商品ページへのリンク) */
.hero[data-fv="card"] .fv-sub{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;font-size:14px;line-height:1.7;color:#5A504B}
.hero[data-fv="card"] .fv-sub span{white-space:nowrap}
.hero[data-fv="card"] .fv-sub a{color:#2B2624 !important;text-decoration:underline;text-underline-offset:5px;white-space:nowrap}
.hero[data-fv="card"] .fv-sub a:hover{color:#8A3E28 !important}

/* 4) ヘッダー右上の購入ボタンを塗りつぶす */
.site-header nav.main-nav a.nav-cta.nav-cta{background:#B5593C !important;border-color:#B5593C !important;color:#fff !important}
.site-header nav.main-nav a.nav-cta.nav-cta:hover{background:#A34A3A !important;box-shadow:0 8px 18px rgba(138,62,40,.28) !important}
.site-header nav.main-nav a.nav-cta.nav-cta::after{color:rgba(255,255,255,.78) !important}

/* 5) PC: 成分の帯と品質の帯を、最初の画面のすぐ下へ送る */
@media (min-width:961px){
  .hero[data-fv="card"] .hero-grid{min-height:calc(100svh - 88px)}
  .hero[data-fv="card"].hero-v2 .hv2-photo{height:calc(100svh - 19px)}
}

/* 6) スマホ */
@media (max-width:560px){
  .hero[data-fv="card"] .fv-card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px 14px;max-width:none;margin-top:16px;padding:14px}
  .hero[data-fv="card"] .fv-card-img{width:104px;min-height:0;height:92px}
  .hero[data-fv="card"] .fv-card-img figcaption{font-size:10px;letter-spacing:0;padding:2px 0}
  .hero[data-fv="card"] .fv-card-body{display:contents}
  .hero[data-fv="card"] .fv-plan{font-size:13px}
  .hero[data-fv="card"] .fv-price{font-size:13px;gap:5px}
  .hero[data-fv="card"] .fv-price b{font-size:34px}
  .hero[data-fv="card"] .fv-note{margin-top:4px;font-size:12px}
  .hero[data-fv="card"] .fv-buy{grid-column:1 / -1}
  .hero[data-fv="card"] .fv-sub{margin-top:10px;font-size:13px;gap:2px 20px}
}

/* 7) 写真は切り抜かず、風景ごと全体を見せる。枠は白い箱をやめ、パールホワイトのもやの上にのせる。
      通常購入の行はカードの中へ。「画像はイメージです」は右下の小さな札に（2026-10-05） */
.hero[data-fv="card"] .fv-card{max-width:660px;border:0;border-radius:26px;
  background:radial-gradient(120% 150% at 40% 45%,rgba(255,255,255,.9) 0%,rgba(255,253,249,.78) 55%,rgba(255,250,240,.5) 100%);
  box-shadow:0 0 34px 18px rgba(255,252,246,.78),0 0 90px 40px rgba(250,236,208,.42)}
.hero[data-fv="card"] .fv-card-img{flex:0 1 340px;width:auto;min-width:160px;min-height:0;align-self:center;border-radius:12px;box-shadow:0 10px 26px rgba(120,80,60,.18)}
.hero[data-fv="card"] .fv-card-img img{position:static;width:100%;height:auto}
.hero[data-fv="card"] .fv-card-img figcaption{left:auto;right:6px;bottom:6px;padding:2px 9px;border-radius:999px;background:rgba(30,24,20,.5);font-size:10.5px}
.hero[data-fv="card"] .fv-card-body{flex:1 0 248px}
.hero[data-fv="card"] .fv-reg{margin:8px 0 0;padding-top:7px;border-top:1px solid rgba(138,90,69,.2);font-size:13.5px;line-height:1.5;color:#5A504B}
.hero[data-fv="card"] .fv-reg span{display:inline-block;white-space:nowrap}
.hero[data-fv="card"] .fv-reg b{font-family:"Noto Serif JP",serif;font-size:18px;font-weight:600;color:#6B4A3C;margin:0 1px 0 4px}
/* スマホ：左に写真（全体）、右にプランと価格。その下に注記・通常購入・購入ボタン */
@media (max-width:560px){
  .hero[data-fv="card"] .fv-card{grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:start;gap:8px 12px;border-radius:20px;
    box-shadow:0 0 22px 10px rgba(255,252,246,.8),0 0 60px 24px rgba(250,236,208,.4)}
  .hero[data-fv="card"] .fv-info{display:contents}
  .hero[data-fv="card"] .fv-card-img{grid-row:1 / span 2;width:auto;height:auto;min-width:0;align-self:center}
  .hero[data-fv="card"] .fv-card-img figcaption{right:4px;bottom:4px;padding:1px 6px;font-size:9px;letter-spacing:0}
  .hero[data-fv="card"] .fv-plan{align-self:end;white-space:normal;line-height:1.45}
  .hero[data-fv="card"] .fv-plan span{display:block}
  .hero[data-fv="card"] .fv-plan .sep{display:none}
  .hero[data-fv="card"] .fv-price{align-self:start;margin-top:0}
  .hero[data-fv="card"] .fv-note,.hero[data-fv="card"] .fv-reg{grid-column:1 / -1;margin-top:0}
  .hero[data-fv="card"] .fv-note{font-size:11.5px}
  .hero[data-fv="card"] .fv-reg{padding-top:6px;font-size:12px}
  .hero[data-fv="card"] .fv-reg b{font-size:15px}
}
/* ごく幅の狭いスマホ：写真を上、文字を下に重ねる */
@media (max-width:350px){
  .hero[data-fv="card"] .fv-card{grid-template-columns:minmax(0,1fr)}
  .hero[data-fv="card"] .fv-card-img{grid-row:auto}
  .hero[data-fv="card"] .fv-plan span{display:inline}
  .hero[data-fv="card"] .fv-plan .sep{display:inline}
  .hero[data-fv="card"] .fv-buy{grid-column:auto}
}
/* 8) モニター募集の札（「初回限定」の左端にそろえて、カードの上の縁にのせる。押すとモニター募集ページへ）（2026-10-05） */
.hero[data-fv="card"] .fv-card{position:relative}
.hero[data-fv="card"] .fv-card-body{position:relative}
.hero[data-fv="card"] .fv-monitor{position:absolute;left:0;top:-30px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,#C9678C,#A9476F);color:#fff !important;font-size:12.5px;font-weight:700;letter-spacing:.04em;line-height:1.4;text-decoration:none !important;white-space:nowrap;box-shadow:0 6px 14px rgba(169,71,111,.28);transition:transform .2s,box-shadow .2s}
.hero[data-fv="card"] .fv-monitor:hover{transform:translateY(-1px);box-shadow:0 9px 18px rgba(169,71,111,.34)}
@media (min-width:561px) and (max-width:1399px){ .hero[data-fv="card"] .fv-monitor{padding:5px 10px;font-size:12px;letter-spacing:.02em} }
@media (max-width:560px){ .hero[data-fv="card"] .fv-monitor{left:14px;top:-13px;padding:4px 12px;font-size:12px} }
/* 9) 写真を大きく、切らずに全部見せる（花・海・景色ごと）。
      PCの中くらいの画面ではカードを右へ広げて写真の幅を確保。
      スマホでは写真を横いっぱいに置き、価格の右に購入ボタン（2026-10-05） */
@media (min-width:961px) and (max-width:1399px){ .hero[data-fv="card"] .fv-card{width:calc(100% + max(0px,57.5vw - 550px))} }
@media (max-width:560px){
  .hero[data-fv="card"] .fv-card{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px}
  .hero[data-fv="card"] .fv-card-img{grid-column:1 / -1;grid-row:auto;width:100%;align-self:auto}
  .hero[data-fv="card"] .fv-card-img figcaption{right:6px;bottom:6px;padding:2px 8px;font-size:10px}
  .hero[data-fv="card"] .fv-plan{grid-column:1 / -1;align-self:auto;white-space:nowrap}
  .hero[data-fv="card"] .fv-plan span,.hero[data-fv="card"] .fv-plan .sep{display:inline}
  .hero[data-fv="card"] .fv-price{align-self:center}
  .hero[data-fv="card"] .fv-buy{grid-column:2;grid-row:3;height:48px;gap:7px;font-size:16px;letter-spacing:.06em}
  .hero[data-fv="card"] .fv-buy svg{width:17px;height:17px}
}
@media (max-width:350px){
  .hero[data-fv="card"] .fv-card{grid-template-columns:minmax(0,1fr)}
  .hero[data-fv="card"] .fv-buy{grid-column:1 / -1;grid-row:auto;height:52px;font-size:18px;letter-spacing:.1em}
}
/* 10) 呼びかけの一文（見出しのすぐ上）（2026-10-05） */
.hero[data-fv="card"] p.fv-call{margin:8px 0 2px;font-family:"Noto Serif JP",serif;font-weight:600;font-size:clamp(17px,1.3vw,20px);line-height:1.6;letter-spacing:.06em;color:#8A4A35}
.hero[data-fv="card"] p.fv-call span{display:inline-block;white-space:nowrap}
.hero[data-fv="card"] p.fv-call b{font-weight:700;color:#A9476F}
.hero[data-fv="card"] p.fv-call::before,.hero[data-fv="card"] p.fv-call::after{content:none !important;display:none !important}
@media (min-width:1200px){ .hero[data-fv="card"] p.fv-call{white-space:nowrap} }
@media (max-width:560px){ .hero[data-fv="card"] p.fv-call{margin:10px 0 8px} }
@media (max-width:350px){ .hero[data-fv="card"] p.fv-call{font-size:16px;letter-spacing:.03em} }
/* 11) カプセルの手前の問いかけと、説明文の幅（2026-10-05） */
.hero[data-fv="card"] p.fv-ask{margin:16px 0 -4px;font-family:"Noto Serif JP",serif;font-weight:600;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.6;letter-spacing:.06em;color:#8A4A35}
.hero[data-fv="card"] p.fv-ask span{display:inline-block;white-space:nowrap}
.hero[data-fv="card"] p.fv-ask b{font-weight:700;color:#A9476F}
@media (min-width:1200px){ .hero[data-fv="card"] p.fv-ask{white-space:nowrap} }
@media (min-width:961px) and (max-width:1399px){ .hero[data-fv="card"] .hero-lead{width:calc(100% + max(0px,57.5vw - 550px));max-width:660px} }
@media (min-width:961px){
  .hero[data-fv="card"] p.fv-call{margin-top:0}
  .hero[data-fv="card"] .fv-card{margin-top:14px}
  .hero[data-fv="card"] p.fv-ask{margin-top:12px}
  .hero[data-fv="card"] .nh-cap-wrap,.hero[data-fv="card"] .nh-labcap-wrap{margin-top:8px}
}