/* メニュー・料金のページ（2026-10-06・案 U1「カード 3 枚を並べて比べる」を組み込み）。土台は ../site.css */
.wrap-rel{position:relative}
.icon-check{width:16px;height:16px;flex:none;margin-top:4px}
.ph{display:inline-block}

/* 共通: 明るい帯（ひまわり畑の写真） */
.band-hero{position:relative;overflow:hidden;color:#fff;text-align:center}
.band-hero > img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.band-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(20,80,140,.25),rgba(20,80,140,0) 40%,rgba(255,251,239,0) 70%);pointer-events:none}
.band-hero .in{position:relative;z-index:1}
.band-hero h1{font-weight:400;letter-spacing:.2em;margin:0;text-shadow:0 1px 8px rgba(30,90,150,.55)}
.band-hero .kicker{text-shadow:0 1px 6px rgba(30,90,150,.55)}
.recb{display:inline-block;background:var(--yellow);color:#5A4300;font-size:11px;font-weight:700;border-radius:99px;padding:1px 11px;letter-spacing:.06em;text-shadow:none}
.price{font-family:"Zen Kaku Gothic Antique",sans-serif;font-weight:500;color:#7A5A10}
.chip{display:inline-block;background:#fff;border:1px solid #F0E3B8;border-radius:99px;padding:1px 11px;font-size:11.5px;color:var(--ink)}
.checks{list-style:none;margin:0;padding:0}
.checks li{display:flex;gap:7px;margin:0 0 6px;font-size:13.5px;line-height:1.7}
.gold-frame{position:relative;background:#FFFBEF;border-radius:10px;box-shadow:0 4px 18px rgba(150,120,40,.12)}
.gold-frame:before{content:"";position:absolute;inset:6px;border:1px solid #E2C46A;border-radius:6px;pointer-events:none}
.gold-frame:after{content:"";position:absolute;inset:10px;border:1px solid rgba(226,196,106,.5);border-radius:4px;pointer-events:none}
.spec2{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:13.5px}
.spec2 dt{color:var(--muted);white-space:nowrap}
.spec2 dd{margin:0}
.cta-wrap{text-align:center;margin:22px 0 0}
.cta-wrap .btn-y{padding:12px 46px;font-size:15px}


/* ───────── U1 カード 3 枚を並べる ───────── */
.u1 .band-hero{min-height:200px}
.u1 .band-hero .in{padding:76px 16px 40px}
.u1 .band-hero h1{font-size:24px}
.u1 .band-hero p{margin:4px 0 0;font-size:12.5px;text-shadow:0 1px 6px rgba(30,90,150,.55)}
.u1 .plans{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 7% 18px;margin:0;scrollbar-width:none}
.u1 .plans::-webkit-scrollbar{display:none}
.u1 .plan{flex:0 0 86%;scroll-snap-align:center;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(150,120,40,.14);overflow:hidden;position:relative;border:2px solid transparent}
.u1 .plan.rec{border-color:var(--yellow)}
/* 絵は主役（月・ひまわり・お花）が枠の真ん中に来るように寄せる。--y は絵ごとの縦位置（10/9 りの・menu-art-an の B 案） */
.u1 .plan .art{aspect-ratio:16/10;background:#FFFBEF center var(--y,19%)/108% auto no-repeat;position:relative}
.u1 .plan .recb{position:absolute;left:50%;top:10px;transform:translateX(-50%)}
.u1 .plan .body{padding:14px 18px 20px;display:flex;flex-direction:column;flex:1}
.u1 .plan h2{font-weight:500;font-size:20px;letter-spacing:.1em;text-align:center;margin:0;color:var(--ink-d)}
.u1 .plan .one{text-align:center;font-size:12px;color:var(--muted);margin:2px 0 10px;min-height:3.2em}
.u1 .plan .price{display:block;text-align:center;font-size:26px;margin:0 0 4px}
.u1 .plan .meta{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.u1 .plan h3{font-size:12px;color:var(--gold-d);font-weight:500;margin:10px 0 6px;letter-spacing:.08em}
.u1 .plan .checks{flex:1}
.u1 .plan .btn-y{display:block;text-align:center;margin-top:14px;padding:11px}
.u1 .dots{display:flex;justify-content:center;gap:10px}
.u1 .dots span{width:9px;height:9px;border-radius:50%;background:#E3DCC6}
.u1 .dots span.on{background:var(--yellow)}
@media (min-width:760px){
  .u1 .band-hero{min-height:280px}.u1 .band-hero h1{font-size:36px}.u1 .band-hero .in{padding-top:110px}.u1 .band-hero p{font-size:16px}
  .u1 .plans{overflow:visible;max-width:1160px;margin:0 auto;padding:-40px 24px 0;align-items:stretch;gap:24px;margin-top:-60px;position:relative;z-index:2;padding:0 24px}
  .u1 .plan{flex:1}
  .u1 .plan.rec{transform:translateY(-16px)}
  .u1 .plan h2{font-size:26px}.u1 .plan .one{font-size:14px}.u1 .plan .price{font-size:32px}.u1 .checks li{font-size:15px}
  .u1 .dots{display:none}
}

/* 見出しを畑の写真の上でも読めるように（下にうっすら影） */
.band-hero:after{background:linear-gradient(rgba(20,80,140,.25),rgba(20,80,140,0) 35%,rgba(20,80,140,0) 50%,rgba(25,55,35,.42) 100%)}
.band-hero h1,.band-hero .kicker,.band-hero p{text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 14px rgba(20,50,30,.55)}
.u1 .plans{position:relative}
.u3 .band-hero .in{padding-bottom:22px}
/* 畑の上に重なる見出しは、すりガラスの白い板にのせる（スマホは全案、PC は U1・U3） */
.ttl-box{display:inline-block}
@media (max-width:759px){
  .ttl-box{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;padding:8px 22px 10px;box-shadow:0 4px 16px rgba(20,60,110,.15)}
  .ttl-box *,.ttl-box{text-shadow:none!important;color:var(--ink-d)}
  .ttl-box .kicker{color:var(--muted)}
  .s1 .band-hero .kicker{margin-top:0}
  .s1 .ttl-box{margin-top:16px}
}
@media (min-width:760px){
  .u1 .ttl-box,.u3 .ttl-box{background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:18px;padding:12px 40px 14px;box-shadow:0 4px 16px rgba(20,60,110,.15)}
  .u1 .ttl-box *,.u3 .ttl-box *{text-shadow:none!important;color:var(--ink-d)}
}

/* PC: カードがトップ画像にかぶらないように、画像の下に並べる（案 U1 からの変更・りの指摘 10/6） */
@media (min-width:760px){
  .u1 .plans{margin-top:0;padding:56px 24px 0}
  .u1 .band-hero .in{padding-bottom:56px}
}
/* メニューの位置へ飛んだとき、ヘッダーの下に隠れないように */
.u1 .plan{scroll-margin-top:16px}