/* ----------------------------------------------
   Base
---------------------------------------------- */
:root{
  --bg:#ffffff; --ink:#151515; --muted:#777; --line:#e9e9e9;
  --container: min(1120px, 92vw);
}
*{ box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  background: var(--bg); color: var(--ink);
  font-family: 'Lato', '游ゴシック', sans-serif;
  line-height: 1.75; font-weight: 300; letter-spacing: .02em;
}
img{ display:block; width:100%; height:auto; }
.container{ width: var(--container); margin-inline: auto; }

/* ----------------------------------------------
   Header（元デザイン）
---------------------------------------------- */
.site-header{
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.header-inner{
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 16px; padding: 14px 8px;
}
.logo{
  font-family: 'Lato','游ゴシック',sans-serif;
  font-weight: 300; letter-spacing:.03em;
  text-decoration: none; color: var(--ink); font-size: 20px;
}

/* ----------------------------------------------
   Image Panel（PC=3列）
---------------------------------------------- */
.image-panel{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 12px 0 32px;
}
.panel-card{ display:block; position:relative; overflow:hidden; border:1px solid var(--line); background:#f6f6f6; aspect-ratio: 3/4; }
.panel-card img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
.panel-card:hover img{ transform: scale(1.03); }
@media (max-width: 960px){ .image-panel{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .image-panel{ grid-template-columns: repeat(2, 1fr); gap:10px; } }

/* ----------------------------------------------
   Gift block（モーダルに流用される情報）
---------------------------------------------- */
.meta-title{ margin: 0 0 8px; font-weight: 400; font-size: 18px; display:flex; flex-direction:column; gap:6px; }
.meta-title .label{ font-size:12px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; font-weight:400; }

.spec{
  border-top:1px solid var(--line); margin:0 0 16px; padding-top:12px;
  display:grid; gap:10px;
}
.spec > div{
  display:grid; grid-template-columns: minmax(96px, 120px) 1fr;
  gap:12px; padding-bottom:8px; border-bottom:1px dashed var(--line);
  align-items:start;
}
.spec dt{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.spec dd{
  margin:0;
  /* —— 自然な折り返し（PC/スマホ共通） —— */
  white-space: normal;
  word-break: keep-all;        /* 単語の途中で極力折らない */
  overflow-wrap: anywhere;     /* ただし長い連結語は安全に折る */
  hyphens: auto;               /* 必要時のみハイフン（対応ブラウザ） */
  text-wrap: pretty;           /* 可能なら見栄え良く */
  line-break: strict;          /* 和文禁則 */
  /* 重要：PCで“勝手にカラムが増える”のを防止 */
  column-count: 1 !important;
  column-gap: 0 !important;
}

.btn{ display:inline-block; margin-top:16px; padding:10px 16px; border-radius:999px; border:1px solid var(--ink); text-decoration:none; color:var(--ink); font-size:14px; }
.btn:hover{ background: var(--ink); color:#fff; }

/* ----------------------------------------------
   Modal（[open] で表示：JSと一致）
---------------------------------------------- */
.gift-modal{
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px);
  z-index: 50;
  padding: clamp(10px, 3.5vw, 16px); /* 画面端の安全域 */
}
.gift-modal[open]{ display:flex; }

.gift-modal__dialog{
  width: min(920px, 94vw);
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  display:grid; grid-template-columns: 1.1fr .9fr;  /* PC: 画像/情報の2カラム */
  max-height: 92dvh; position: relative;
}
.gift-modal__media{ background:#f6f6f6; border-right:1px solid var(--line); }
.gift-modal__media img{ width:100%; height:100%; object-fit:cover; }
.gift-modal__meta{
  padding: 18px 18px 24px;
  overflow:auto; -webkit-overflow-scrolling: touch;
  /* PCでも自然な折り返しを徹底 */
  white-space: normal; word-break: keep-all; overflow-wrap: anywhere; hyphens: auto; text-wrap: pretty; line-break: strict;
}
.gift-modal__close{
  position:absolute; top:10px; right:10px;
  border:1px solid var(--line); background:#fff; border-radius:999px;
  width:36px; height:36px; cursor:pointer;
}

/* モーダルを開いたときに背景スクロールを止める（JSで body に付与） */
.noscroll{ overflow:hidden; }
html.noscroll, body.noscroll{ height:100%; overflow:hidden; }
.gift-modal, .gift-modal__dialog, .gift-modal__meta{ overscroll-behavior: contain; }

/* ----------------------------------------------
   Smartphone（画像上／情報下・上下余白あり・隙間なし）
---------------------------------------------- */
@media (max-width: 800px){
  .gift-modal__dialog{
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 2 * clamp(10px, 3.5vw, 16px));
    grid-template-rows: min(52dvh, 56vh) 1fr; /* 上=画像 / 下=情報 */
    border-radius: 12px; margin:auto; overflow:hidden;
    will-change: transform;
  }
  .gift-modal__media{
    border-right:none; border-bottom:1px solid var(--line);
  }
  .gift-modal__media img{
    width:100%; height:100%; object-fit:cover;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .gift-modal__meta{
    display:flex; flex-direction:column;
    padding: 0px 16px 28px;
    overflow:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior: contain; scrollbar-gutter: stable both-edges;
    background:#fff;
  }
  /* sticky 見出し：画像との継ぎ目に隙間を作らない */
  #giftModalTitle{
    position: sticky; top:0;
    margin: 0 0 14px; /* 負のマージンは使わない */
    padding: 12px 0; background:#fff; z-index:10;
    border-bottom: 1px solid var(--line);
    transform: translateZ(0);
    backface-visibility: hidden;
    box-shadow: 0 0 0 1px #fff inset; /* サブピクセル隙間のマスク */
  }
  #giftModalTitle::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#fff;
    pointer-events:none;
  }
}

/* ----------------------------------------------
   Footer
---------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); padding: 40px 0 56px; color:var(--muted); font-size:13px; text-align:center; }

/* ----------------------------------------------
   ボタン非表示（指定番号）
   002、005、008、019、028、039
---------------------------------------------- */
.gift-block[data-number="002"] .cta,
.gift-block[data-number="005"] .cta,
.gift-block[data-number="008"] .cta,
.gift-block[data-number="019"] .cta,
.gift-block[data-number="028"] .cta,
.gift-block[data-number="039"] .cta{
  display: none !important;
}

/* ▼ スマホでは必ず閉じるボタンを表示する */
@media (max-width: 800px) {
  .gift-modal__close {
    display: block !important;
    z-index: 9999;
  }
}