/* =========================================================================
   ベトナム食堂 アンダオ ── オープン告知LP
   スマートフォンを第一に。温かく、素朴に、読みやすく。
   ========================================================================= */

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",
              "Yu Gothic",system-ui,sans-serif;
  font-size:16px;
  line-height:1.95;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.has-palbar{ padding-bottom:5.5rem; }

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:"Zen Maru Gothic","Zen Kaku Gothic New",sans-serif;
  font-weight:700; line-height:1.55; margin:0;
}

a{ color:var(--accent-2); }

.skip{
  position:absolute; left:-9999px;
  background:var(--accent); color:var(--on-accent);
  padding:.7rem 1rem; z-index:200;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:3px solid var(--sub); outline-offset:2px; }

.wrap{ width:100%; max-width:40rem; margin:0 auto; padding:0 1.35rem; }

.sec{ padding:3.4rem 0; }
.sec-2{ background:var(--paper-2); }

.sec-h{
  font-size:clamp(1.3rem,5.2vw,1.7rem);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.55rem;
}
.sec-h::before{
  content:""; flex:none;
  width:.4rem; height:1.35em; border-radius:999px;
  background:linear-gradient(var(--accent),var(--sub));
}

.body{ margin:0 0 1rem; font-size:1rem; }
.body:last-child{ margin-bottom:0; }

/* =========================================================================
   確認バー
   ========================================================================= */
.preview-bar{
  background:var(--accent-2); color:#fff;
  padding:.6rem 1rem; text-align:center;
  font-size:.8rem; line-height:1.7;
}

/* =========================================================================
   ファーストビュー
   ========================================================================= */
.hero{ position:relative; overflow:hidden; }

.hero-photo{ position:absolute; inset:0; margin:0; z-index:0; background:var(--paper); }
.hero-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  filter:saturate(.88);
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  /* 対応していないブラウザ向けの下地 */
  background:var(--paper); opacity:.9;
}
@supports (background: color-mix(in srgb, red 50%, transparent)){
  .hero-photo::after{
    opacity:1;
    background:linear-gradient(180deg,
      color-mix(in srgb, var(--paper) 90%, transparent) 0%,
      color-mix(in srgb, var(--paper) 87%, transparent) 45%,
      color-mix(in srgb, var(--paper) 97%, transparent) 100%);
  }
}

.hero-inner{
  position:relative; z-index:1;
  /* ★左右は .wrap の余白を残す（padding の一括指定にしないこと） */
  padding-top:2.4rem;
  padding-bottom:2.8rem;
  text-align:center;
}

.hero-logo{ width:min(52vw,10.5rem); margin:0 auto 1.1rem; }
.hero-logo img{ width:100%; filter:drop-shadow(0 2px 10px rgba(0,0,0,.10)); }

.hero-badge{
  display:inline-block;
  background:var(--accent); color:var(--on-accent);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:.85rem; letter-spacing:.1em;
  padding:.3rem 1rem; border-radius:999px;
  margin:0 0 .9rem;
  box-shadow:var(--shadow);
}

/* ★店名は基準より1.2倍 */
.hero-name{
  font-size:clamp(1.74rem,7.2vw,2.4rem);
  margin:0 0 .2rem;
}
.hero-name-en{
  font-size:.98rem; letter-spacing:.22em;
  color:var(--accent-2); margin:0 0 1.5rem;
  font-family:"Zen Maru Gothic",sans-serif;
}

.hero-lead{
  font-size:clamp(1.3rem,5.6vw,1.85rem);
  line-height:1.75; margin:0 0 1rem;
}
/* ★<br> の改行が生きるよう、狭い画面では少しだけ字を詰める */
.hero-body{
  font-size:clamp(.85rem,3.75vw,.95rem);
  color:var(--ink-soft);
  margin:0 auto 1.6rem; max-width:28rem;
}

.hero-open{
  display:inline-flex; flex-direction:column; gap:.1rem;
  background:var(--card); border:1px solid var(--rule);
  border-radius:.7rem; padding:.75rem 1.5rem; margin:0 0 1.5rem;
  box-shadow:var(--shadow);
}
.hero-open b{
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:1.12rem; color:var(--accent-2);
}
.hero-open span{ font-size:.78rem; color:var(--ink-faint); letter-spacing:.06em; }

.hero-imgnote{
  margin:1.4rem 0 0; font-size:.72rem; line-height:1.7;
  color:var(--ink-faint);
}

/* ── ボタン ───────────────────────────────────────────── */
.btns{ display:flex; flex-direction:column; gap:.6rem; max-width:19rem; margin:0 auto; }

.btn{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.95rem 1.2rem; border-radius:999px;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:1rem;
  text-decoration:none; border:1px solid transparent;
  box-shadow:var(--shadow);
  transition:transform .15s, filter .15s;
}
.btn:active{ transform:translateY(1px); }
.btn-tel{ background:var(--accent); color:var(--on-accent); }
.btn-tel:hover{ filter:brightness(1.05); }
.btn-map{ background:var(--card); color:var(--ink); border-color:var(--rule-strong); }
.btn svg{ flex:none; }

/* =========================================================================
   写真
   ========================================================================= */
.photo{ margin:1.6rem 0 0; }
.photo img{
  width:100%; border-radius:.7rem;
  border:1px solid var(--rule); box-shadow:var(--shadow);
}
.photo figcaption{
  margin-top:.5rem; font-size:.78rem; color:var(--ink-faint); line-height:1.7;
}

.guide{
  display:block; margin:1.3rem 0 0; padding:.9rem 1.1rem;
  background:var(--card); border:1px solid var(--rule);
  border-left:4px solid var(--accent); border-radius:.5rem;
}
.guide b{
  display:block; font-family:"Zen Maru Gothic",sans-serif;
  font-size:.88rem; color:var(--accent-2); margin-bottom:.25rem;
}
.guide span{ display:block; font-size:.92rem; line-height:1.9; }

/* ── 写真の組み：1枚目は横いっぱい／残りは半分ずつ ────── */
.photo-set{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  margin:1.6rem 0 0;
}
.photo-set .ps-item{ margin:0; min-width:0; }
.photo-set .ps-main{ grid-column:1 / -1; }
.photo-set img{
  width:100%; height:100%; object-fit:cover;
  border-radius:.7rem;
  border:1px solid var(--rule); box-shadow:var(--shadow);
}
.photo-set .ps-item:not(.ps-main) img{ aspect-ratio:4/3; }

.photo-note{
  margin:1.4rem 0 0; padding:.7rem .9rem;
  background:var(--paper-3); border-radius:.5rem;
  font-size:.75rem; line-height:1.8; color:var(--ink-soft);
}

/* =========================================================================
   お品書き
   ========================================================================= */
/* =========================================================================
   オープニングキャンペーン
   ========================================================================= */
.campaign{
  margin:1.6rem 0 .4rem;
  padding:1.2rem 1.2rem 1.3rem;
  background:var(--card);
  border:2px solid var(--accent);
  border-radius:.8rem;
  box-shadow:var(--shadow);
}
.cp-badge{
  display:inline-block; margin:0 0 .55rem;
  padding:.38rem 1.05rem; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:.88rem; letter-spacing:.06em;
}
.cp-period{
  margin:0 0 .35rem; font-size:1.05rem; font-weight:700;
  color:var(--accent-2); letter-spacing:.02em;
  white-space:pre-line; line-height:1.5;
}
.cp-headline{
  margin:0 0 1rem;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:clamp(1.15rem,4.8vw,1.45rem); line-height:1.6; color:var(--ink);
}
.cp-extend{
  margin:0 0 1rem; padding:.7rem .9rem;
  background:var(--accent-wash); border-left:4px solid var(--accent);
  border-radius:0 .45rem .45rem 0;
  font-size:.86rem; line-height:1.9; color:var(--ink);
}
.cp-row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem;
  padding:.5rem 0; border-top:1px solid var(--rule);
}
.cp-key{ flex:none; font-size:.78rem; color:var(--ink-faint); min-width:5.5rem; }
.cp-val{ font-size:.95rem; }
.cp-price-wrap{ display:inline-flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; }
.cp-price-net{
  font-size:.76rem; font-weight:400; color:var(--ink-faint);
  letter-spacing:0; white-space:nowrap;
}
.cp-row-main .cp-price{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:clamp(1.3rem,5.5vw,1.6rem); color:var(--accent-2);
  font-variant-numeric:tabular-nums;
}
.cp-addlead{ margin:.9rem 0 .4rem; font-size:.88rem; color:var(--ink-soft); }
.cp-addons{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.cp-addons li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:.7rem;
  padding:.55rem .8rem; border-radius:.45rem;
  background:var(--accent-wash);
  font-size:.92rem;
}
.cp-add-desc{
  display:block; margin-top:.15rem;
  font-size:.76rem; line-height:1.7; color:var(--ink-soft); font-weight:400;
}
.cp-add-name{ flex:1 1 auto; min-width:7rem; }
.cp-add-price{
  flex:none; text-align:right; white-space:nowrap;
  font-family:"Zen Maru Gothic",sans-serif;
  color:var(--accent-2); font-variant-numeric:tabular-nums;
}
.cp-add-price b{ display:block; font-weight:700; }
.cp-add-price span{
  display:block; margin-top:.05rem;
  font-size:.7rem; font-weight:400; color:var(--ink-faint);
}
.cp-total{
  margin:.9rem 0 0; padding:.7rem .9rem;
  background:var(--paper-2); border-radius:.45rem;
  font-size:.88rem; line-height:1.85; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cp-note{ margin:.7rem 0 0; font-size:.76rem; line-height:1.8; color:var(--ink-faint); }

/* お品書きの中の「期間限定」バッジ */
.menu-item-camp{
  display:inline-block; margin-top:.4rem;
  padding:.26rem .75rem; border-radius:999px;
  background:var(--accent); color:var(--on-accent);
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:.89rem; line-height:1.6;
  font-variant-numeric:tabular-nums;
}

/* 数量限定などの但し書き */
.menu-group-limit{
  margin:.6rem 0 0; padding:.55rem .8rem;
  background:var(--sub-wash); border-left:3px solid var(--sub);
  border-radius:0 .4rem .4rem 0;
  font-size:.83rem; line-height:1.8; color:var(--ink);
}

/* アレルギーに関わる表記（まぜビーフンのピーナッツなど）
   ★営業上の但し書き（.menu-group-limit）と見分けがつくよう、
     朱色の枠にしています。安全に関わるので目立たせること。 */
.menu-group-allergen{
  margin:.6rem 0 0; padding:.6rem .9rem;
  background:var(--accent-wash); border-left:4px solid var(--accent);
  border-radius:0 .4rem .4rem 0;
  font-size:.85rem; line-height:1.85; color:var(--ink);
}
.menu-group-allergen b{
  display:block; margin-bottom:.1rem;
  font-family:"Zen Maru Gothic",sans-serif;
  font-size:.8rem; letter-spacing:.04em; color:var(--accent-2);
}

/* アレルギーのお断り */
.note-takeout{
  margin-top:.6rem; padding:.6rem .85rem;
  background:var(--card); border:1px solid var(--rule); border-radius:.45rem;
  color:var(--ink);
}
.note-allergy{
  margin-top:.6rem; padding:.6rem .85rem;
  background:var(--paper-3); border-radius:.45rem;
  color:var(--ink-soft);
}

/* 電話ボタンのそばの注意書き */
.tel-notes{
  list-style:none; margin:.9rem auto 0; padding:0;
  max-width:22rem; display:grid; gap:.25rem;
}
.tel-notes li{
  font-size:.78rem; line-height:1.75; color:var(--ink-soft);
  padding-left:1em; text-indent:-1em;
}
.tel-notes li::before{ content:"※"; margin-right:.15em; }

/* 地図が準備中のときの案内 */
.map-pending{
  margin:0; padding:.7rem .9rem;
  background:var(--paper-3); border-radius:.45rem;
  font-size:.85rem; line-height:1.8; color:var(--ink-soft);
}

.menu-group{ margin:1.9rem 0 0; }
.menu-group:first-child{ margin-top:1.4rem; }
.menu-group-name{
  font-size:1.05rem; color:var(--accent-2);
  padding:0 0 .45rem; margin:0;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}
.menu-group-note{
  margin:.7rem 0 0; font-size:.82rem; line-height:1.85; color:var(--ink-soft);
}

.menu-list{ list-style:none; margin:.6rem 0 0; padding:0; }
.menu-item{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.95rem 0; border-bottom:1px dashed var(--rule);
}
.menu-item:last-child{ border-bottom:none; }
.menu-item-main{ flex:1 1 auto; min-width:0; }
.menu-item-name{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:1.05rem;
}
.menu-item-sub{
  font-size:.76rem; color:var(--ink-faint); letter-spacing:.04em;
  font-style:italic; margin-top:.1rem;
}
.menu-item-desc{ font-size:.85rem; color:var(--ink-soft); line-height:1.8; margin-top:.25rem; }
.menu-item-compare{
  display:inline-block; margin-top:.4rem;
  padding:.18rem .55rem; border-radius:999px;
  background:var(--accent-wash); border:1px solid var(--accent);
  font-size:.74rem; line-height:1.6; color:var(--accent-2);
  font-variant-numeric:tabular-nums;
}
.menu-item-price{
  flex:none; text-align:right;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  color:var(--accent-2); font-variant-numeric:tabular-nums;
}
.menu-item-price .price-in{ display:block; }
.menu-item-price .price-net{
  display:block; margin-top:.05rem;
  font-size:.68rem; font-weight:400; color:var(--ink-faint);
  letter-spacing:0; white-space:nowrap;
}

.pending{
  margin:1.3rem 0 0; padding:1.1rem 1.2rem;
  background:var(--accent-wash); border:1px dashed var(--rule-strong);
  border-radius:.6rem; font-size:.92rem; line-height:1.9; color:var(--ink-soft);
}

.note{
  margin:1.1rem 0 0; font-size:.78rem; line-height:1.8; color:var(--ink-faint);
}

/* =========================================================================
   料理をつくる人
   ========================================================================= */
.chef{
  background:var(--card); border:1px solid var(--rule);
  border-radius:.8rem; padding:1.5rem 1.4rem; box-shadow:var(--shadow);
}
.chef-lead{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:1.1rem; color:var(--accent-2);
  margin:0 0 1rem; line-height:1.7;
}
.chef-name{
  font-family:"Zen Maru Gothic",sans-serif; font-size:1.2rem; font-weight:700;
  margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid var(--rule);
  text-align:right;
}
.chef-name small{ display:block; font-size:.75rem; color:var(--ink-faint); font-weight:400; }

/* =========================================================================
   店づくり
   ========================================================================= */
/* ── これから目指す姿（イメージ画） ────────────────────── */
.dream{
  margin:1.8rem 0 0; padding:1rem 1rem 1.1rem;
  background:var(--card);
  border:1px dashed var(--rule-strong); border-radius:.8rem;
}
.dream-label{
  display:flex; align-items:flex-start; gap:.4rem;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:.92rem; line-height:1.7; color:var(--accent-2);
  margin:0 0 .8rem;
}
.dream-label::before{ content:"✎"; flex:none; font-size:1.05em; }
.dream img{
  width:100%; border-radius:.5rem;
  border:1px solid var(--rule);
}
.dream-cap{
  margin:.6rem 0 0; font-size:.74rem; line-height:1.7; color:var(--ink-faint);
}
.dream-cap::before{ content:"※"; margin-right:.15em; }

.notyet{ list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.5rem; }
.notyet li{
  display:flex; gap:.5rem; align-items:flex-start;
  padding:.7rem .9rem; border-radius:.5rem;
  background:var(--sub-wash); font-size:.88rem; line-height:1.8;
}
.notyet li::before{ content:"🔨"; flex:none; }

/* =========================================================================
   店舗情報
   ========================================================================= */
.info{
  margin:1.4rem 0 0;
  background:var(--card); border:1px solid var(--rule);
  border-radius:.8rem; overflow:hidden; box-shadow:var(--shadow);
}
.info div{
  display:grid; grid-template-columns:6.2rem 1fr; gap:.6rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.info div:last-child{ border-bottom:none; }
.info dt{ margin:0; font-size:.8rem; color:var(--ink-faint); }
.info dd{ margin:0; font-size:.95rem; }
.info dd.wait{ color:var(--ink-faint); font-size:.88rem; }
.info dd a{ color:var(--accent-2); font-weight:700; text-decoration:none; }
.info dd a:hover{ text-decoration:underline; }
.info-tel{ font-size:1.15rem !important; letter-spacing:.04em; }

/* =========================================================================
   予約
   ========================================================================= */
.sec-tel{ background:var(--accent-wash); text-align:center; }
/* 営業時間ボックス（お問い合わせ欄） */
.hours-box{
  max-width:22rem; margin:0 auto 1rem; padding:.9rem 1.1rem;
  background:var(--card); border:1px solid var(--rule); border-radius:.6rem;
  box-shadow:var(--shadow); text-align:left;
}
.hours-box div{
  display:grid; grid-template-columns:5.4rem 1fr; gap:.5rem;
  padding:.4rem 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.hours-box div:last-child{ border-bottom:none; }
.hours-box dt{ margin:0; font-size:.78rem; color:var(--ink-faint); }
.hours-box dd{ margin:0; font-size:.98rem; font-weight:700; }

/* 特別営業のお知らせ */
.special-notice{
  max-width:22rem; margin:0 auto 1.4rem; padding:.75rem 1rem;
  background:var(--accent); color:var(--on-accent);
  border-radius:.6rem; text-align:left;
}
.special-notice b{
  display:block; font-family:"Zen Maru Gothic",sans-serif;
  font-size:1rem; line-height:1.6;
}
.special-notice span{
  display:block; margin-top:.2rem; font-size:.78rem; line-height:1.7; opacity:.92;
}

.tel-big{
  display:inline-block; margin:.6rem 0 .3rem;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:clamp(1.55rem,7.5vw,2.1rem);
  color:var(--accent-2); text-decoration:none;
  letter-spacing:.03em; font-variant-numeric:tabular-nums;
}
.tel-sub{ font-size:.82rem; color:var(--ink-soft); margin:0 0 1.3rem; }

/* =========================================================================
   SNS
   ========================================================================= */
.sns{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }

/* =========================================================================
   フッター
   ========================================================================= */
.foot{
  background:var(--paper-3); padding:2.4rem 0 2.8rem;
  font-size:.82rem; color:var(--ink-soft); line-height:1.9;
}
.foot-name{
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:1.05rem; color:var(--ink); margin:0 0 .1rem;
}
.foot-en{ font-size:.72rem; letter-spacing:.2em; color:var(--accent-2); margin:0 0 1rem; }
.foot dl{ margin:0 0 1.2rem; }
.foot dl div{ display:flex; gap:.6rem; padding:.15rem 0; }
.foot dt{ flex:none; width:4.5rem; color:var(--ink-faint); }
.foot dd{ margin:0; }
.foot-notes{ list-style:none; margin:0 0 1.2rem; padding:0; font-size:.75rem; }
.foot-notes li{ padding-left:1em; text-indent:-1em; margin-bottom:.3rem; }
.foot-notes li::before{ content:"・"; }
.foot-copy{ font-size:.72rem; color:var(--ink-faint); margin:0; }

/* =========================================================================
   ふわっと出す
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================================
   広めの画面
   ========================================================================= */
@media (min-width:46rem){
  body{ font-size:16.5px; }
  .sec{ padding:4.2rem 0; }
  .hero-inner{ padding:3.4rem 0 3.8rem; }
  .btns{ flex-direction:row; max-width:none; justify-content:center; }
  .btn{ min-width:13rem; }
}

/* =========================================================================
   お知らせ（他のページへのご案内）
   ★data.js の notice.text が空なら、この欄はそもそも出ません。
   ========================================================================= */
.notice{
  display:block; width:100%; max-width:40rem;
  margin:0 auto; padding:1.4rem 1.35rem;
  background:linear-gradient(170deg,#1F3A5F,#2C4F79);
  color:#F3EFE8; text-align:center;
}
.notice-text{
  margin:0 0 1rem; font-size:.95rem; line-height:2;
}
.notice-btn{
  display:inline-block; padding:.7rem 1.7rem; border-radius:999px;
  background:#C8A45C; color:#1F3A5F; text-decoration:none;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:.92rem;
}

/* =========================================================================
   料理の写真（data.js の img に場所が入った品だけ出ます）
   ========================================================================= */
.menu-item.has-img{ align-items:center; }
.menu-item-img{
  flex:none; width:4.6rem; height:4.6rem; margin-right:.2rem;
  border-radius:.55rem; overflow:hidden;
  border:1px solid var(--rule); background:var(--paper-2);
}
.menu-item-img img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:40rem){
  .menu-item-img{ width:5.6rem; height:5.6rem; }
}

/* =========================================================================
   看板料理（feature: true かつ写真がある品だけ。お品書きの上に大きく）
   ========================================================================= */
.showcase{ margin:0 0 2.2rem; padding:1.3rem 1rem 1.5rem; border-radius:1rem; }
.showcase-h{
  margin:0 0 1.1rem; text-align:center; font-family:"Zen Maru Gothic",sans-serif;
  font-size:1.05rem; letter-spacing:.18em;
}
.showcase-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1rem .8rem;
}
@media (min-width:40rem){ .showcase-list{ grid-template-columns:repeat(3,1fr); } }
.sc-img{ aspect-ratio:1/1; overflow:hidden; }
.sc-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-name{ display:block; font-weight:700; font-size:.92rem; line-height:1.4; }
.sc-price{ display:block; font-size:.85rem; }
/* 背景 */
.sc-bg-navy{ color:#F3EFE8;
  background:radial-gradient(circle,rgba(200,164,92,.28) 0 1.5px,transparent 2.5px) 0 0/22px 22px,
             linear-gradient(160deg,#1F3A5F,#2C4F79); }
.sc-bg-green{ color:#F3EFE8;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0 1.5px,transparent 2.5px) 0 0/22px 22px,
             linear-gradient(160deg,#2F5D46,#3E7358); }
.sc-bg-cream{ color:#2B2723;
  background:radial-gradient(circle,rgba(200,164,92,.35) 0 1.5px,transparent 2.5px) 0 0/22px 22px,#F6EFE3; }
.sc-bg-navy .showcase-h, .sc-bg-green .showcase-h{ color:#C8A45C; }
.sc-bg-cream .showcase-h{ color:#1F3A5F; }
/* 形：写真カード */
.sc-card .sc-item{
  background:#fff; color:#2B2723; border-radius:.8rem; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.sc-card .sc-cap{ padding:.55rem .7rem .7rem; }
.sc-card .sc-price{ color:#B8862B; font-weight:700; }
/* 形：丸く切り抜いて貼る */
.sc-circle .sc-item{ text-align:center; }
.sc-circle .sc-img{ border-radius:50%; border:5px solid #fff; box-shadow:0 8px 18px rgba(0,0,0,.3); }
.sc-circle .sc-item:nth-child(odd) .sc-img{ transform:rotate(-3deg); }
.sc-circle .sc-item:nth-child(even) .sc-img{ transform:rotate(3deg); }
.sc-circle .sc-cap{
  display:inline-block; position:relative; margin-top:-.9rem; padding:.3rem .8rem;
  max-width:94%; background:#fff; color:#1F3A5F; border-radius:.9rem;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.sc-circle .sc-name{ font-size:.8rem; line-height:1.35; }
.sc-circle .sc-price{ font-size:.78rem; color:#B8862B; font-weight:700; }