/* =====================================================
   takeout.css　Ver 2.2（2025-10-31）
   テイクアウト専用スタイルシート
   -----------------------------------------------------
   【目次】
   1. ベーススタイル
   2. レイアウトコンテナ
   3. 見出し・テキスト
   4. メニューグリッド（PC4列固定／SP1列）
   5. 画像・コンテンツボックス（ズーム付）
   6. ボタン・価格表示
   7. フッター非表示
   8. スマホ対応（@media）
   ===================================================== */

/* -----------------------------------------------------
   1. ベーススタイル
   ----------------------------------------------------- */
body.takeout {
  font-family: "Noto Serif JP", serif;
  color: #333;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* -----------------------------------------------------
   2. レイアウトコンテナ
   ----------------------------------------------------- */
#contents {
  max-width: 1400px; /* ← コンテナを少し広げる */
  margin: 0 auto;
  padding: 2em 1em;
}
#contents-main {
  width: 100%;
}

/* -----------------------------------------------------
   3. 見出し・テキスト
   ----------------------------------------------------- */
#contents-main h1 {
  text-align: center;
  font-size: 1.8rem;
  color: #6a0f16;
  font-weight: bold;
  margin-bottom: 1em;
}
#contents-main p {
  line-height: 1.8;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 2em;
}



/* -----------------------------------------------------
   4. メニューグリッド（PC3列固定／SP float対応）
   Ver3.8.1（SP強制1列化修正版）
   ----------------------------------------------------- */

/* ====== PC：3列グリッド表示 ====== */
#contents-main .menu-all {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  justify-items: center !important;
  align-items: start !important;
  margin: 2.5em auto !important;
  padding: 0 !important;
  max-width: 960px !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

/* --- カード --- */
#contents-main .menu-all li {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  padding: 8px !important;
  width: 100% !important;
  max-width: 300px !important;
  transition: 0.3s !important;
  overflow: hidden !important;
  text-align: center !important;
}
#contents-main .menu-all li:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

/* --- 画像（PC） --- */
#contents-main .menu-all li img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-bottom: 1px solid #eee !important;
  border-radius: 6px 6px 0 0 !important;
  background-color: #f9f9f9 !important;
}

/* --- 商品タイトル --- */
#contents-main .menu-all li h2 {
  font-size: 1.05rem !important;
  color: #6a0f16 !important;
  font-weight: 700 !important;
  margin: 0.5em 0 0.3em !important;
  line-height: 1.4 !important;
}

/* --- 価格 --- */
#contents-main .menu-all li p.price {
  color: #6a0f16 !important;
  font-weight: bold !important;
  font-size: 1.05rem !important;
  margin-top: 0.4em !important;
}

/* --- カートボックス --- */
#contents-main .menu-all li .cart-box {
  margin-top: 0.6em !important;
}

/* --- 見出し --- */
#contents-main h3 {
  text-align: center !important;
  font-family: "Noto Serif JP", serif !important;
  font-size: 1.7rem !important;
  color: #6a0f16 !important;
  margin: 3em 0 1em !important;
}

/* ====== タブレット（2列） ====== */
@media screen and (max-width: 1024px) {
  #contents-main .menu-all {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    max-width: 640px !important;
  }
}

/* ====== スマホ（768px以下）強制1列・float表示 ====== */
@media screen and (max-width: 768px) {

  /* グリッドを完全解除 */
  #contents-main .menu-all {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  #contents-main .menu-all li {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
    padding: 10px !important;
    text-align: left !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }

  /* --- 画像を左に固定 --- */
  #contents-main .menu-all li img {
    float: left !important;
    width: 40% !important;
    max-width: 140px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-right: 12px !important;
    margin-bottom: 5px !important;
  }

  /* --- テキスト部 --- */
  #contents-main .menu-all li h2 {
    font-size: 1rem !important;
    color: #6a0f16 !important;
    font-weight: 700 !important;
    margin: 0 0 0.2em !important;
    line-height: 1.4 !important;
  }

  #contents-main .menu-all li p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin: 0.3em 0 !important;
  }

  #contents-main .menu-all li p.price {
    color: #6a0f16 !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    margin-top: 0.4em !important;
  }

  /* --- カートボックス --- */
  #contents-main .menu-all li .cart-box {
    margin-top: 0.5em !important;
    clear: both !important;
  }

  #contents-main .menu-all li .cart-box input[type="submit"] {
    background-color: #6a0f16 !important;
    color: #fff !important;
    padding: 0.3em 0.8em !important;
    border-radius: 4px !important;
    border: none !important;
    font-size: 0.9rem !important;
  }
}



/* -----------------------------------------------------
   5. 画像・コンテンツボックス（ズーム付）
   ----------------------------------------------------- */
.menu-box {
  padding: 1em;
  overflow: hidden;
  border-radius: 6px;
}
.menu-box img {
  width: 100%;
  aspect-ratio: 1 / 1; /* ← 正方形を維持 */
  object-fit: cover;
  height: auto;
  border-radius: 6px;
  margin-bottom: 0.5em;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.menu-all li:hover .menu-box img {
  transform: scale(1.05);
  filter: brightness(1.05);
}
.menu-box .noimg {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #f2f2f2;
  border-radius: 6px;
  display: block;
}
.menu-box h2 {
  font-size: 1.1rem;
  margin: 0.4em 0 0.3em;
  color: #222;
  font-weight: 600;
}
.menu-box p {
  font-size: 0.95rem;
  margin: 0.3em 0;
  line-height: 1.6;
}

/* -----------------------------------------------------
   6. ボタン・価格表示
   ----------------------------------------------------- */
.price {
  font-weight: 700;
  color: #6a0f16;
  font-size: 1.1rem;
  text-align: right;
}
.cart-box {
  padding: 0.8em 0 1em;
  font-size: 0.95rem;
}
.cart-box select,
.cart-box input[type="submit"] {
  font-size: 0.95rem;
  padding: 0.4em 0.7em;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.cart-box input[type="submit"] {
  background-color: #6a0f16;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-left: 0.5em;
  transition: background 0.3s;
}
.cart-box input[type="submit"]:hover {
  background-color: #a41b26;
}

/* -----------------------------------------------------
   7. フッター非表示
   ----------------------------------------------------- */
#footer {
  display: none !important;
}

/* -----------------------------------------------------
   8. スマホ対応（@media）
   ----------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .menu-all {
    grid-template-columns: repeat(2, 1fr); /* タブレットは2列 */
    gap: 16px;
  }
}
@media screen and (max-width: 768px) {
  .menu-all {
    grid-template-columns: 1fr; /* スマホは1列 */
    gap: 16px;
  }
  .menu-box h2 {
    font-size: 1rem;
  }
  .menu-all .mtitle {
    font-size: 1.1rem;
    margin-top: 1.5em;
  }
  #contents-main p {
    font-size: 0.95rem;
    text-align: left;
  }
  .menu-all li:hover .menu-box img {
    transform: none;
    filter: none;
  }
}


/* =====================================================
   takeout.css Ver1.6（幅50px現象修正）
   ===================================================== */

/* --- 旧指定を完全リセット --- */
#contents-main .menu-all {
  all: unset; /* ← 旧CSSの影響を一度リセット */
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 2em 1em;
  box-sizing: border-box;
}

#contents-main .menu-all li {
  all: unset; /* ← inline-blockなど全解除 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  transition: 0.3s;
}

#contents-main .menu-all li:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  transform: translateY(-4px);
}

/* --- 画像正方形 --- */
#contents-main .menu-all img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* --- タイトル／価格 --- */
#contents-main .menu-all h2,
#contents-main .menu-all p {
  margin: 0.5em 0;
  padding: 0 1em;
  font-size: 1rem;
  line-height: 1.5;
}
#contents-main .menu-all .price {
  color: #6a0f16;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 1em;
}

/* --- スマホ --- */
@media screen and (max-width: 768px) {
  #contents-main .menu-all {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------
   Ver5.0 タイトル余白20px＋SP白帯除去＋.menu-box幅調整
   ----------------------------------------------------- */

/* === 全体背景統一・余白除去 === */
html,
body.takeout {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #f8f2eb !important;
}

body.takeout #back,
body.takeout main,
body.takeout #contents,
body.takeout #contents-main,
body.takeout #contents-main .inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #f8f2eb !important;
}

/* === タイトル画像 === */
body.takeout #contents-main h1 {
  margin-top: 20px !important;
  padding: 0 !important;
  line-height: 0 !important;
}
body.takeout #contents-main h1 img {
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ==============================================
   スマホ表示調整：カード幅拡張＆横並び最適化
   ============================================== */
@media screen and (max-width: 768px) {

  html,
  body.takeout,
  body.takeout #back,
  body.takeout main,
  body.takeout #contents,
  body.takeout #contents-main,
  body.takeout #contents-main .inner {
    background-color: #f8f2eb !important;
  }

  body.takeout #contents-main h1 {
    margin-top: 16px !important;
  }

  /* === 各カード === */
  body.takeout .menu-box {
    width: 95% !important;              /* ← 画面いっぱいに広げる */
    margin: 10px auto !important;       /* ← 左右中央寄せ */
    padding: 10px !important;           /* ← 内側余白を適度に */
    display: block !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border-radius: 8px;
    overflow: hidden;
  }

  /* === 画像を左に、テキストを右に === */
  body.takeout .menu-box img {
    width: 40% !important;
    height: auto !important;
    float: left !important;
    margin-right: 12px !important;
    border-radius: 6px;
    object-fit: cover !important;
  }

  /* === テキストコンテンツを右側に配置 === */
  body.takeout .menu-box h2,
  body.takeout .menu-box p,
  body.takeout .menu-box .price,
  body.takeout .menu-box .cart-box {
    text-align: left !important;
    float: none !important;
    width: auto !important;
  }

  /* === ボタンの配置を安定化 === */
  body.takeout .menu-box .cart-box {
    margin-top: 6px !important;
  }

  /* === float解除 === */
  body.takeout .menu-box::after {
    content: "";
    display: block;
    clear: both;
  }
}

/* =====================================================
   Ver5.1 SPカード幅拡張（ボタン切れ修正）
   ===================================================== */
@media screen and (max-width: 768px) {

  /* menu-all内のliに直接適用（上書き最優先） */
  body.takeout #contents-main .menu-all li {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px auto !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* 画像とテキストの横並びを調整 */
  body.takeout #contents-main .menu-all li img {
    float: left !important;
    width: 38% !important;
    max-width: 140px !important;
    height: auto !important;
    margin-right: 12px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
  }

  /* テキストエリア */
  body.takeout #contents-main .menu-all li h2,
  body.takeout #contents-main .menu-all li p,
  body.takeout #contents-main .menu-all li .price,
  body.takeout #contents-main .menu-all li .cart-box {
    text-align: left !important;
    float: none !important;
    width: auto !important;
  }

  /* ボタンがはみ出さないように */
  body.takeout #contents-main .menu-all li .cart-box {
    clear: both !important;
    margin-top: 8px !important;
    display: block !important;
  }

  /* clearfix */
  body.takeout #contents-main .menu-all li::after {
    content: "" !important;
    display: block !important;
    clear: both !important;
  }
}