/* =============================================================
   Osechi LP – 完全版 (旧デザイン＋レスポンシブ俯瞰)
   Scope root: #lp-osechi
============================================================= */
#lp-osechi, #lp-osechi * { box-sizing: border-box; }

#lp-osechi {
  --color-main:#111; --color-sub:#555; --color-accent:#b78e2f;
  --btn-bg:#b78e2f; --btn-hover:#9e7a1e;
  background:#fff; color:var(--color-main);
  max-width:1100px; margin:0 auto; padding:40px 20px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* ===== ヘッダー ===== */
.osechi-header{ margin:0 0 28px; }
.osechi-eyecatch{ font-size:12px; letter-spacing:.08em; opacity:.7; margin:0; }
.osechi-title{ font-size:clamp(22px,3vw,32px); margin:.35em 0 .25em; font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; font-weight:700; }
.osechi-lead{ color:var(--color-sub); margin:0; font-size:17px; }

/* ===== notice ブロック ===== */
.notice{ border:2px solid var(--color-accent); border-radius:10px; background:#fffcf5; padding:16px 18px; margin:18px auto; }
.notice__title{ margin:0 0 8px; font-weight:900; font-size:130%; color:#000; font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; display:flex; align-items:center; gap:10px; }
.notice__title::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--color-accent); display:inline-block; }
.notice p{ margin:.2em 0; line-height:1.8; }
.notice strong{ color:#000; }

/* ===== メインKV ===== */
.mv{ margin:14px 0 24px; border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.08); }
.mv picture, .mv img{ width:100%; height:auto; display:block; object-fit:cover; }

/* ===== 1 column grid ===== */
.osechi-grid{ display:grid; grid-template-columns:1fr; gap:28px; }

/* ===== item card (ext -> body -> top) ===== */
.box{ background:#fff; border:1px solid #e6e2d5; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 14px rgba(0,0,0,.06); position:relative; }
.box-media{ margin:0; }
.box-media--ext{ order:1; }
.box-body{ order:2; padding:18px; display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center; }
.box-media--top{ order:3; }
.box-media img{ width:100%; height:auto; display:block; object-fit:cover; }

.box-title{ font-size:22px; margin:0; color:#111; font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; }
.box-catch{ font-size:16px; font-weight:600; color:var(--color-accent); margin:4px 0 10px; font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; }
.box-desc{ font-size:14px; line-height:1.7; color:var(--color-sub); padding:0 10px; width:100%; overflow-wrap:anywhere; word-break:break-word; }

.box-meta{ margin:6px 0 0; display:grid; gap:6px; width:100%; padding:0 10px; }
.box-meta-row{ display:grid; grid-template-columns:88px 1fr; gap:8px; font-size:14px; }
.box-meta-row dt{ color:#777; text-align:left; }
.box-meta-row dd{ margin:0; color:#111; text-align:left; }

.limited-chip{ position:absolute; top:-10px; left:-10px; width:64px; height:64px; border-radius:50%; background:var(--color-accent); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1; box-shadow:0 2px 8px rgba(0,0,0,.15); }
.limited-chip .t{ font-size:10px; }
.limited-chip .n{ font-size:18px; font-weight:800; margin:2px 0 1px; }
.limited-chip .u{ font-size:12px; }

.box-cta{ margin-top:auto; display:flex; justify-content:center; width:100%; padding:8px 10px 2px; }
.btn{ display:inline-block; background:var(--btn-bg); color:#fff; padding:10px 24px; border-radius:6px; text-decoration:none; text-align:center; font-weight:700; transition:.3s; min-width:180px; }
.btn:hover{ background:var(--btn-hover); }

/* ===== セクションタイトル ===== */
.sec-title{ text-align:center; font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; font-size:clamp(24px,2.6vw,28px); margin:36px 0 16px; }

/* ===== flow ===== */
.flow{ margin:28px 0 0; }
.flow__list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.flow__item{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; padding:12px; border:1px dashed #e6e2d5; border-radius:10px; background:#fffef9; }
.flow__no{ width:40px; height:40px; border-radius:50%; background:var(--color-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.flow__body h4{ margin:.2em 0; font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; }
.flow__body p{ margin:.2em 0; color:var(--color-sub); }

/* ===== 俯瞰ブロック（新規追加） ===== */
.box-top{ padding:14px 14px 18px; }
.box-top-inner{ display:flex; gap:24px; align-items:flex-start; }
.box-top-media{ flex:0 0 50%; max-width:50%; }
.box-top-media picture, .box-top-media img{ display:block; width:100%; height:auto; border-radius:8px; object-fit:cover; }
.box-top-text{ flex:1; }
.box-top-title{ font-size:18px; font-weight:700; margin:4px 0 8px; font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; }
.box-top-items{ list-style:none; padding:0; margin:0; columns:2; column-gap:16px; }
.box-top-items li{ break-inside:avoid; margin:0 0 6px; font-size:14px; color:#333; }

@media (max-width:768px){
  .box-top-inner{ flex-direction:column; gap:12px; }
  .box-top-media{ max-width:100%; flex:0 0 auto; }
  .box-top-items{ columns:1; }
}

/* === PCだけ：俯瞰画像（.box-media--top）を500×500・中央寄せ === */
@media (min-width: 769px) {
  #lp-osechi .box-media--top {
    text-align: center;           /* 画像の中央寄せ補助 */
  }
  #lp-osechi .box-media--top img {
    display: block;
    width: 500px !important;
    height: 500px !important;
    object-fit: cover;
    margin: 0 auto;               /* 画像を中央寄せ */
  }
}

#lp-osechi .box-media--top img{width:500px;height:500px;object-fit:cover;display:block;margin:0 auto;}

/* ===== メニュー & アレルギー ===== */
#lp-osechi .menu {
  margin: 16px 0 24px;
  padding: 16px;
  border: 1px solid #e6e2d5;
  border-radius: 12px;
  background: #fffef9;
}
#lp-osechi .menu__head {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
}
#lp-osechi .menu__name {
  font-family: "Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0;
}
#lp-osechi .menu__meta {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  font-size: 18px; color: #333;
}
#lp-osechi .menu__price { font-weight: 700; }
#lp-osechi .menu__web  { color: var(--color-accent); font-weight: 700; }
#lp-osechi .menu__size, 
#lp-osechi .menu__limit { opacity: .85; }

#lp-osechi .menu__blocks {
  display: grid; gap: 10px;
}
#lp-osechi .menu-block {
  padding: 10px 12px;
  border: 1px dashed #e6e2d5;
  border-radius: 10px;
  background: #fff;
}
#lp-osechi .menu-block__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  font-family: "Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}
#lp-osechi .menu-list {
  margin: 0; padding-left: 1.2em; /* 日本語の箇条書きに合わせて */
  columns: 2; column-gap: 18px;
  font-size:70%;
  
}
#lp-osechi .menu-list li { 
	margin: 0 0 4px; 
	break-inside: avoid; 
	font-size: 13px;
}

#lp-osechi .menu__allergy {
  margin: 10px 0 0;
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}
#lp-osechi .menu__allergy strong { color: #111; }

/* SPは1カラムに */
@media (max-width: 768px){
  #lp-osechi .menu-list { columns: 1; }
}
#lp-osechi .box-cta {
  text-align: center;
  margin: 24px 0 40px;
}
#lp-osechi .box-cta .btn {
  display: inline-block;
  background: #a60000; /* ワインレッド系 */
  color: #fff;
  padding: 12px 28px;
  border-radius: 2px;
  font-size: 18px;
  font-family: "Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
  text-decoration: none;
  font-weight: 700;
  transition: opacity .3s;
}
#lp-osechi .box-cta .btn:hover {
  opacity: 0.8;
}
#lp-osechi .menu {
  clear: both; /* ← これで画像やfloat要素の下に配置される */
}
#lp-osechi .box-cta {
  clear: both;
}
/* 上段（.box.item）と下段（.box-append）を一体化して見せる */
#lp-osechi .box.item {
  border: 1px solid #e6e2d5;
  border-bottom: none;               /* 下側を開けて連結 */
  border-radius: 12px 12px 0 0;      /* 角丸は上だけ */
  background: #fff;
  margin: 24px auto 0;
  max-width: 1100px;                 /* 必要に応じて幅を合わせる */
}
#lp-osechi .box-append {
  border: 1px solid #e6e2d5;
  border-top: none;                  /* 上側を開けて連結 */
  border-radius: 0 0 12px 12px;      /* 角丸は下だけ */
  background: #fff;
  padding: 16px;
  max-width: 1100px;
  margin: 0 auto 40px;               /* 上段にピタッと連結、下だけ余白 */
}

/* 既存のメニュー装飾を箱の中で馴染ませる（必要なら） */
#lp-osechi .box-append .menu {
  margin: 0;                         /* 二重余白を抑止 */
  border: 1px dashed #e6e2d5;
  border-radius: 10px;
  background: #fffef9;
  padding: 12px;
}

/* CTAを中央寄せ */
#lp-osechi .box-append .box-cta {
  text-align: center;
  margin: 18px 0 4px;
}
#lp-osechi .box-append .box-cta .btn {
  display: inline-block;
  background: #a60000;
  color: #fff;
  padding: 12px 28px;
  border-radius: 1px;
  font-size: 16px;
  text-decoration: none;
  font-weight: 700;
  transition: opacity .3s;
}
#lp-osechi .box-append .box-cta .btn:hover { opacity: .8; }

/* スマホ最適化（必要に応じて） */
@media (max-width: 768px){
  #lp-osechi .box.item,
  #lp-osechi .box-append {
    max-width: 100%;
    border-radius: 0;                 /* スマホはフラットでも◎ */
  }
}
#lp-osechi .box.item.full {
  border: 1px solid #e6e2d5;
  border-radius: 12px;
  background: #fff;
  margin: 24px auto;
  max-width: 1100px;
}
#lp-osechi .box-core {
  padding-bottom: 16px;
}
#lp-osechi .box-extra {
  padding: 16px;
  border-top: 1px dashed #e6e2d5;
  background: #fffef9;
  border-radius: 0 0 12px 12px;
}
#lp-osechi .box-extra .box-cta {
  text-align: center;
  margin-top: 20px;
}
/* PCは固定 500×500 */
@media screen and (min-width: 769px) {
  #lp-osechi .box-media--top img {
    width: 500px;
    height: 500px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }
}

/* スマホは横幅いっぱい・高さ自動 */
@media screen and (max-width: 768px) {
  #lp-osechi .box-media--top img {
    width: 100%;
    height: auto;
    max-width: 500px; /* 元画像より大きくならないよう保護 */
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }
}