/*
================================================================
  おせち料理コンテンツ追加スタイルシート (最終版)
  - 作成日: 2023-10-27
  - このファイルは common3.css の後に読み込んでください。
================================================================
*/

/* ================================================================
  1. 全体・セクションレイアウト
================================================================ */
main {
  background-color: transparent;
  padding: 0;
  box-shadow: none;
}

.hero,
.content-section {
  padding: clamp(40px, 5vw, 60px);
  border-radius: 16px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.content-section {
  margin-top: 40px;
}

/* ================================================================
  2. セクション別 背景設定
================================================================ */
/* ヒーローセクション */
#hero-section {
  background-image: url("/img/usr/goods/26osechi/common/bg_hero.jpg");
}
.hero-text {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(5px);
}

/* 注目のお料理セクション */
#dishes-section {
  background-image: url("/img/usr/goods/26osechi/common/bg_dishes.jpg");
  padding: 40px clamp(20px, 4vw, 50px);
}
#featured-dishes {
  background-image: url("/img/usr/goods/26osechi/common/bg_gold1.jpg");
  background-repeat: no-repeat;
  padding: 40px clamp(20px, 4vw, 50px);
}
/* お品書きセクション */
#menu-section {
  background-image: url("/img/usr/goods/26osechi/common/bg_menu.jpg");
}

/* こだわりセクション */
#commitment-section {
  background-image: url("/img/usr/goods/26osechi/common/bg_commitment.jpg");
  padding: 50px;
}

/* ================================================================
  3. 各要素の個別スタイル
================================================================ */

/* --- 3.1. セクションタイトル --- */
.section-title {
  /* 共通のテキストシャドウ */
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

/* 金色のライン装飾 (共通) */
.section-title::before,
.section-title::after {
  display: block !important;
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #b59a4d, transparent);
  top: -15px;
}
.section-title::after {
  top: auto;
  bottom: -15px;
}

/* 注目のお料理タイトル (個別調整) */
#dishes-section .section-title {
  margin: 0 auto 40px; /* 下マージン確保 */
  border: 2px solid #d4af37;
}
#dishes-section .section-title::before {
  top: -20px;
}
#dishes-section .section-title::after {
  bottom: -20px;
}

/* お品書きタイトル (個別調整) */
#menu-section .section-title {
  text-shadow: 0px 0px 8px rgba(212, 175, 55, 0.5),
    2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* こだわりタイトル (個別調整) */
#commitment-section .section-title {
  display: block;
  max-width: 640px;
  margin: 0 auto 50px;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  font-size: clamp(22px, 1.2vw + 1rem, 28px);
  font-weight: 700;
  text-align: center;
  position: relative;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(4px);
  color: #3d2b00;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
  border: none;
}
#commitment-section .section-title::before {
  top: -20px;
}
#commitment-section .section-title::after {
  bottom: -20px;
}

/* --- 3.2. キャッチフレーズ --- */
.section-catch {
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
  background-color: rgba(0, 0, 0, 0.3);
  display: inline-block;
  padding: 0.3em 0.8em;
  border-radius: 6px;
  margin-top: 25px;
}
#commitment-section .section-catch {
  display: none;
}

/* --- 3.3. コンテンツカード (注目のお料理, お品書き) --- */
.dish-item {
  background-color: rgba(255, 255, 255, 0.95);
  padding: clamp(16px, 2.5vw, 24px);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(90, 20, 20, 0.1);
  border: 1px solid #f0e0e0;
}
.tier-item,
.menu-summary {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* お品書きリストの可読性向上 */
.tier-item p {
  line-height: 2.2;
  letter-spacing: 0.05em;
  color: #555;
}

/* ホバーエフェクト */
.dish-item,
.tier-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.dish-item:hover,
.tier-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* --- 3.4. こだわりセクションの要素 --- */
#commitment-section .commitment-container {
  background-color: rgba(255, 255, 255, 0.95);
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px #d4af37;
  border-radius: 8px;
  border: none;
}

/* のし画像 */
#commitment-section .commitment-text-area:first-of-type::before {
  content: "";
  display: block;
  background-image: url("/img/usr/goods/26osechi/common/noshi.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  max-width: 300px;
  height: 30px;
  margin: 0 auto 20px;
}

/* ================================================================
  4. レスポンシブ調整
================================================================ */
@media (max-width: 768px) {
  .content-section {
    margin-top: 20px;
  }
  .hero,
  .content-section {
    padding: 30px 18px;
  }
}