@charset "utf-8";

/* ===== Theme Vars (Italy) ===== */
:root{
  --italy-green: #008C45;
  --italy-red:   #CD212A;
  --ink:         #1a1a1a;
  --muted:       #6b747c;
  --brand:       #0e2a1f;
  --paper:       #ffffff;
  --bg:          #F3F1EB;

  --radius: 16px;
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --shadow-soft: 0 6px 18px rgba(0,0,0,.06);
  --max: 1200px;
}

/* ===== Base ===== */
html,body{height:100%}
body{
  margin:0;
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  letter-spacing: .02em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.2s ease}

/* ===== Fade ===== */
.fade{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.fade.show{ opacity:1; transform:none; }

/* ===== Eyecatch / Masthead ===== */
.masthead-ec{
  position: relative;
  overflow: clip;
  background: linear-gradient(120deg,#ffffff 0 60%, #f0f7f2 100%);
}
.masthead-ec__media{
  margin:0; line-height:0;
  overflow: hidden;
}
.masthead-ec__media img{ width:100%; height:100%; object-fit:cover; }
.masthead-ec__inner{
  position: absolute; inset:auto 24px 48px 24px;
  max-width: var(--max); margin-inline:auto; left:0; right:0;
  color:#0e2a1f; text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.masthead-ec__title{
  margin:0 0 .25rem 0;
  font-family:"Cormorant Garamond", ui-serif, Georgia, "Hiragino Mincho ProN", serif;
  font-size: clamp(28px, 5vw, 56px); line-height:1.1; letter-spacing:.02em;
}
.masthead-ec__title span{
  font-size: clamp(12px, 1.6vw, 16px);
  letter-spacing:.08em; margin-left:.6rem; font-weight:700; opacity:.85;
}
.masthead-ec__lead{
  margin-top:.25rem; font-weight:600; color:#264338;
  background: rgba(255,255,255,.6); display:inline-block; padding:.25rem .5rem; border-radius:8px;
}
.masthead-ec__flagline{
  height:10px; width:100%;
  background: linear-gradient(90deg, var(--italy-green) 0 33%, #ffffff 33% 66%, var(--italy-red) 66% 100%);
}

/* ===== Showcase (split layout) ===== */
.showcase{
  max-width: var(--max);
  margin: 48px auto;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 28px;
  padding: 0 24px;
  align-items: stretch;
}
.showcase--reverse{ grid-template-columns: .9fr 1.1fr; }
.showcase__media{
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);
  background:#fff;
  display: flex;
  align-items: center;
}
.showcase__media img{ width:100%; height:auto; }

.showcase__panel{
  position:relative;
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,.05);
  padding: 26px 26px 20px;
  display:flex; flex-direction:column;
}
.panel__eyebrow{
  position:absolute; left:0; top:0; height:38px; padding:0 12px 0 60px;
  display:flex; align-items:center; gap:8px;
  color:#173628; font-weight:700; letter-spacing:.06em;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  background:linear-gradient(90deg, rgba(0,140,69,.12), rgba(255,255,255,0));
}
.panel__eyebrow::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:50px;
  background: linear-gradient(180deg, var(--italy-green) 0 34%, #ffffff 34% 66%, var(--italy-red) 66% 100%);
  border-top-left-radius: var(--radius);
}
.panel__title{
  margin-top:28px;
  font-family:"Cormorant Garamond", serif;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height:1.2; color:#0e2a1f; letter-spacing:.02em;
}
.panel__subtitle{ color:#6b747c; margin:.3rem 0 1rem; }
.panel__desc{ color:#223b32; }

/* ===== Showcase NEW Badge ===== */
.showcase__media {
  position: relative; /* バッジを絶対配置するため必須 */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
}

.showcase__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--italy-red); /* イタリア赤を利用 */
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .05em;
  border-radius: 999px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Variants（PC=横並びグリッド / SP=縦積み） ===== */
.variants{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  column-gap:16px;
  row-gap:40px;
  padding-bottom:30px;
}
.variant{
  background:#fff; border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px; box-shadow: var(--shadow-soft);
  padding:10px; display:flex; flex-direction:column; gap:10px; min-height:100%;
}
.variant img{ border-radius: 10px; width:100%; height:160px; object-fit:contain; }
.variant__meta{
    display: flex;
  flex-direction: column;
  align-items: flex-start;
   gap:8px; flex-wrap:wrap;
  font-size:.95rem;

}
.variant__pill{
  display:inline-block; border-radius:999px; padding:.1rem .55rem;
  background:#eef5f0; color:#2d5b47; border:1px solid #dde6df; font-size:.8rem;
}
.variant__name{ font-weight:700; color:#223b32; }
.variant__price{ margin-left:0; font-weight:700; color:#CD212A; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:40px; padding:0 14px; border-radius:999px; border:1px solid #e1e5e3; background:#fff;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
.btn--primary{ background: var(--italy-red); border-color:transparent; color:#fff; }

/* ===== CTA Rail ===== */
.cta-rail{ max-width: var(--max); margin: 24px auto 56px; padding: 0 24px; }
.btn-rail{
  display:block; text-align:center; padding:14px 18px; border-radius:999px;
  color:#fff; font-weight:700; letter-spacing:.04em;
  background: var(--italy-green);
  box-shadow: var(--shadow-soft);
}
.btn-rail:hover{ filter: brightness(1.05); }

/* ===== Footer ===== */
footer{ background:#0f2e24; color:#000; }
.footer__inner{
  max-width: var(--max); margin-inline:auto; padding:28px 24px; text-align:center; opacity:.92;
  border-top:4px solid transparent;
  background-image: linear-gradient(90deg, var(--italy-green) 0 33%, #ffffff 33% 66%, var(--italy-red) 66% 100%);
  background-origin: border-box; background-clip: border-box;
}

/* ===== Responsive ===== */
@media (max-width: 1080px){
  .showcase,.showcase--reverse{ grid-template-columns: 1fr; }
  .showcase__media{ order:1; }
  .showcase__panel{ order:2; }
  .showcase--reverse .showcase__media{ order:1; }
  .showcase--reverse .showcase__panel{ order:2; }
}

@media (max-width: 800px){
  /* PC横2列 → タブレット以下は1列 */
  .variants{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  /* スマホ：縦積み（横スクロールなし／オーバーフロー無し） */
  .masthead-ec__inner{ inset:auto 16px 28px 16px; }
  .variants{
    display:grid;
    grid-template-columns: 1fr;
    gap:40px;
    overflow: visible;           /* 横スクロール無効 */
  }
  .variant img{ height:auto; }   /* 画像縦横比を自然に */
}