/* =========================================================
   Mango Terrace - index02 (テストトップ) 専用スタイル
   既存 style.css / common.css 等とクラス名が衝突しないよう
   .phone スコープ＋独自クラス名で構成。
   ========================================================= */

:root{
  --orange:#f29200;
  --orange-d:#ec6a0a;
  --orange-cta:#e8650e;
  --red:#e8482a;
  --ink:#3f3327;
  --ink-soft:#6b5d4e;
  --cream:#fbf2e3;
  --cream-line:#efe2cd;
  --gold:#c9a13b;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ink);
  background:#e9e4dc;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  line-height:1;
}

/* 画像未配置時のプレースホルダ */
.is-ph{
  position:relative;
}
img.is-ph{
  visibility:hidden;
}
img.is-ph::after{
  visibility:visible;
  content:"画像";
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;letter-spacing:.2em;
  background:
    linear-gradient(135deg,#ffd27a 0%,#ff9f3c 45%,#ff7a2e 100%);
}

/* スマホ枠 */
.phone{
  max-width:430px;
  margin:0 auto;
  background:#fff;
  min-height:100vh;
  box-shadow:0 0 40px rgba(0,0,0,.12);
  padding-bottom:24px; /* tabbar 一旦非表示のため余白縮小（復活時は74pxに戻す） */
  position:relative;
  overflow:hidden;
}

/* ===== ヘッダー ===== */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid #f0ede7;
  background:#fff;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ffb43c,#ff7a18);
  color:#fff;
}
.brand-mark .material-symbols-outlined{font-size:24px;}
.brand-text strong{
  display:block;font-family:"Noto Serif JP",serif;
  font-size:20px;font-weight:700;letter-spacing:.02em;color:#4a3b2a;
}
.brand-text small{display:block;font-size:11px;color:var(--ink-soft);letter-spacing:.1em;}
.header-nav{display:flex;gap:18px;}
.hn-item{
  background:none;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;color:#5b5042;font-family:inherit;
}
.hn-item .material-symbols-outlined{font-size:26px;color:#4a3b2a;}

/* ===== ヒーロー ===== */
.hero{position:relative;overflow:hidden;background:#fdf4e8;}
/* メイン画像はキャッチコピー・バッジを画像内に内包したため、トリミングせず全体表示 */
.hero-img{width:100%;height:auto;display:block;}
.hero-img.is-ph{height:240px;}                       /* 画像未配置時のプレースホルダ用 */
/* メイン上部レイヤーの文言・バッジ・ドットは画像に含むため非表示 */
.hero-copy,.hero-badge,.hero-dots{display:none !important;}
.hero-copy{position:absolute;top:34px;left:24px;right:24px;}
.hero-lead{
  margin:0 0 4px;font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:21px;color:var(--orange);
}
.hero-title{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:34px;line-height:1.25;color:#3a2c1c;
  text-shadow:0 1px 8px rgba(255,255,255,.6);
}
.hero-title .accent{
  font-size:46px;color:var(--red);
  text-shadow:0 2px 10px rgba(255,255,255,.7);
}
.hero-desc{
  margin:14px 0 0;font-size:14px;color:#4a3b2a;font-weight:500;
  text-shadow:0 1px 6px rgba(255,255,255,.7);
}
.hero-ribbon{
  display:inline-block;margin:22px 0 0;
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:18px;color:var(--orange-d);line-height:1.5;
  padding-bottom:6px;
  border-bottom:2px dotted var(--orange);
}
.hero-badge{
  position:absolute;right:18px;bottom:34px;
  width:118px;height:118px;border-radius:50%;
  background:#fffdf6;border:3px solid #f0d99a;
  box-shadow:0 6px 18px rgba(180,130,30,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#7a5a14;
}
.hero-badge .badge-crown{font-size:17px;color:var(--gold);margin-bottom:-3px;}
.badge-label{font-size:9px;font-weight:700;line-height:1.15;}
.badge-score{font-family:"Noto Serif JP",serif;font-size:26px;font-weight:900;color:#5a4310;line-height:1;}
.badge-stars{font-size:9px;color:#f2a900;letter-spacing:.5px;}
.hero-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;gap:7px;justify-content:center;}
.hero-dots span{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.18);}
.hero-dots span.on{background:var(--orange);}

/* ===== 特長 ===== */
.features{
  display:flex;align-items:stretch;
  background:var(--cream);
  padding:16px 8px;
}
.feat{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;padding:0 6px;position:relative;
}
.feat + .feat::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;
  border-left:1px solid var(--cream-line);
}
.feat .material-symbols-outlined{font-size:30px;color:var(--orange);}
.feat-txt b{display:block;font-size:13px;color:#4a3b2a;}
.feat-txt small{display:block;font-size:9.5px;color:#8a7c6b;margin-top:2px;}

/* ===== セクション共通 ===== */
.section{padding:30px 18px 10px;text-align:center;}
.eyebrow{
  margin:0;font-family:"Dancing Script",cursive;
  font-size:22px;color:var(--orange);font-weight:700;
}
.eyebrow::before,.eyebrow::after{content:"❀";font-size:13px;margin:0 8px;vertical-align:middle;color:#f3b54a;}
.section-title{
  margin:2px 0 0;font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:25px;color:#3a2c1c;letter-spacing:.04em;
}
.title-rule{display:inline-block;width:40px;height:3px;border-radius:2px;background:var(--orange);margin-top:10px;}

/* ===== 商品カード ===== */
.product-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;
}
/* 商品1点表示（画面幅ギリギリまで） */
.product-single{
  margin-top:8px;
  max-width:none;
  margin-left:auto;margin-right:auto;
}
.product-single .card-name{font-size:16px;}
.product-single .card-desc{font-size:12.5px;}
.card{
  background:#fff;border-radius:14px;overflow:hidden;text-align:left;
  box-shadow:0 6px 18px rgba(120,90,40,.10);
  border:1px solid #f3ece1;
  display:flex;flex-direction:column;
}
.card-thumb{position:relative;aspect-ratio:16/9;background:#fbe9cf;}  /* 商品画像は横長・低めに */
.card-thumb img{width:100%;height:100%;object-fit:cover;}
.card-thumb img.is-ph{width:100%;height:100%;}
.card-ribbon{
  position:absolute;top:8px;left:8px;
  width:52px;height:52px;border-radius:50%;
  background:rgba(60,45,25,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;font-weight:700;line-height:1.2;
  border:2px solid rgba(255,255,255,.5);
}
.card-body{padding:12px 12px 14px;display:flex;flex-direction:column;flex:1;}
.card-name{margin:0;font-size:15px;font-weight:700;color:#3a2c1c;}
.card-desc{margin:6px 0 10px;font-size:11.5px;color:#7a6c5b;line-height:1.5;flex:1;}
.card-unit{
  align-self:flex-start;font-size:11px;color:#6b5d4e;
  background:#f4efe7;border-radius:5px;padding:3px 9px;margin-bottom:8px;
}
.card-price{margin:0 0 12px;color:var(--orange-cta);font-weight:500;font-size:13px;}
.card-price strong{font-size:25px;font-weight:900;letter-spacing:-.01em;}
.card-price small{font-size:11px;color:#8a7c6b;}
.card-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--orange-cta);color:#fff;font-weight:700;font-size:13px;
  padding:11px;border-radius:30px;
  box-shadow:0 4px 10px rgba(232,101,14,.3);
  transition:background .15s;
}
.card-btn:hover{background:#d4570a;}
.card-btn .material-symbols-outlined{font-size:18px;}

.prod-dots{display:flex;gap:6px;justify-content:center;margin:20px 0 4px;}
.prod-dots span{width:7px;height:7px;border-radius:50%;background:#e3d9c9;}
.prod-dots span.on{background:var(--orange);}

/* ===== ギフトバナー ===== */
.gift-banner{
  position:relative;display:block;margin:18px 14px 26px;
  border-radius:16px;overflow:hidden;min-height:96px;
  background:linear-gradient(90deg,#fde9c4,#fbdca0);
}
.gift-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;}
.gift-bg.is-ph{position:absolute;inset:0;width:100%;height:100%;}
.gift-inner{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:16px 14px;
}
.gift-icon{font-size:34px;color:var(--orange-cta);}
.gift-text b{
  display:block;font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:21px;color:var(--orange-cta);
}
.gift-text small{display:block;font-size:11px;color:#6b5135;margin-top:3px;line-height:1.4;}
.gift-arrow{
  margin-left:auto;color:#fff;background:var(--orange);
  border-radius:50%;font-size:24px;padding:6px;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
}

/* ===== フッター ===== */
.site-footer{
  margin-top:18px;
  text-align:center;
  font-size:11px;letter-spacing:.02em;line-height:1.6;
  color:#9a8f80;
  background:#fff;
  border-top:1px solid #f0ede7;
  padding:20px 16px calc(20px + env(safe-area-inset-bottom,0));
}

/* ===== タブバー ===== */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:430px;
  display:flex;background:#fff;
  border-top:1px solid #efeae1;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom,0));
  z-index:20;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;color:#9a8f80;
}
.tab .material-symbols-outlined{font-size:24px;}
.tab.is-active{color:var(--orange);}
.tab.is-active .material-symbols-outlined{
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
}

@media (max-width:380px){
  .hero-title{font-size:30px;}
  .hero-title .accent{font-size:40px;}
}


/* ===== 完売御礼（2026シーズン販売終了） ここから ===== */
.soldout-bar{
  background:linear-gradient(180deg,#5c3718 0%,#4a2c14 100%);
  color:#fff;text-align:center;padding:18px 20px 20px;
}
.soldout-bar__ttl{
  margin:0;font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:30px;letter-spacing:.14em;text-indent:.14em;line-height:1.2;
}
.soldout-bar__txt{
  margin:10px 0 0;font-size:14px;font-weight:700;line-height:1.7;
  color:#ffe9c9;
}
.soldout-bar__note{
  margin:10px 0 0;font-size:11.5px;line-height:1.7;color:#e6d3ba;
}
.card-soldout{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  background:rgba(60,45,25,.62);color:#fff;
  font-family:"Noto Sans JP",sans-serif;font-weight:900;
  font-size:26px;letter-spacing:.16em;text-indent:.16em;text-align:center;
  padding:10px 0;
  border-top:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
}
.card-thumb img{filter:grayscale(.4) brightness(.96);}
.card-btn.is-soldout{
  background:#b7ada0;color:#fff;cursor:default;box-shadow:none;
}
.card-btn.is-soldout:hover{background:#b7ada0;}
@media (max-width:380px){
  .soldout-bar__ttl{font-size:26px;}
  .card-soldout{font-size:22px;}
}
/* ===== 完売御礼 ここまで ===== */