/* ==========================================================================
   すし将 おせち2026 特設ページ - メインスタイル
   ========================================================================== */

/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.7;
    color: #2c2c2c;
    background-color: #fafafa;
    overflow-x: hidden;
}

/* コンテナ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 日本語テキスト */
.japanese-text {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */

#header {
    background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
    color: #fff;
    padding: 20px 0;
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="40" cy="80" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    pointer-events: none;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-main {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #f4d03f;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.logo-sub {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.2em;
    color: #e8e8e8;
    margin-top: -5px;
}

.header-message p {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.1rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #f4d03f;
}

/* ==========================================================================
   ヒーローセクション
   ========================================================================== */

#hero {
    background: linear-gradient(135deg, #f8f5f0 0%, #fff 50%, #f8f5f0 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
      height: auto;        /* 中身に応じた高さ */
  min-height: 80vh;   /* どうしても全画面にしたいならこっち */
  z-index: 1;
}

#hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(244, 208, 63, 0.1) 0%, transparent 50%);
    animation: rotate 20s linear infinite;
}




.tier-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.tier-image img {
    max-width: 500px;
    height: auto;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}



/* スマホ版（縦並びに強制） */
@media (max-width: 768px) {
  .tier-content,
  .tier-content.reverse {
    flex-direction: column; /* 縦並びに統一 */
  }

  .tier-image {
    order: 1; /* 画像を先に: これで画像が上に来ます */
  }

  .tier-info {
    order: 2; /* テキストを後に: これでテキストが下に来ます */
  }
}






.img-content {
    text-align: right;
}

.img-content img {
    display: inline-block;
}


/* PC版（デフォルト） */
.tier-content {
  display: flex;
  gap: 40px;
  align-items: center;
}

.tier-content.reverse {
  flex-direction: row-reverse; /* PCでは交互配置 */
}

/* PC版（デフォルト） */
.tier-content {
  display: flex;
  gap: 40px;
  align-items: center;
}

.tier-content.reverse {
  flex-direction: row-reverse; /* PCでは交互配置 */
}




@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    min-height: 400px;
}

.hero-text {
    padding: 0 20px;
}

.hero-title {
    margin-bottom: 30px;
}

.main-title {
    display: block;
    font-family: 'Noto Serif JP', serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #2c1810;
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
}

.sub-title {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: #8b4513;
    letter-spacing: 0.2em;
    margin-top: 10px;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    font-family: 'Noto Sans JP', sans-serif;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder {
    width: 400px;
    height: 300px;
    background: linear-gradient(135deg, #f4d03f 0%, #e8c547 100%);
    border: 3px solid #2c1810;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #2c1810;
    font-family: 'Noto Sans JP', sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.image-placeholder:hover {
    transform: translateY(-5px);
}

.image-placeholder i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.image-placeholder p {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ==========================================================================
   セクション共通
   ========================================================================== */

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.5rem;
    font-weight: 600;
    color: #2c1810;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #f4d03f 0%, #e8c547 100%);
    border-radius: 2px;
}

.section-description {
    font-size: 1.1rem;
    color: #666;
    font-family: 'Noto Sans JP', sans-serif;
}

/* ==========================================================================
   三段重セクション
   ========================================================================== */

#osechi-tiers {
    padding: 30px 0;
    background: #fff;
}

.tier-section {
    margin-bottom: 80px;
    padding: 40px 0;
}

.tier-section:nth-child(even) {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    margin: 80px 40px;
    padding: 60px 50px;
    border-radius: 20px;
}

.tier-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.tier-content.reverse {
    direction: rtl;
}

.tier-content.reverse > * {
    direction: ltr;
}

.tier-info {
    padding: 0 20px;
}

.tier-header {
    margin-bottom: 30px;
}

.tier-title {
    font-family: 'Noto Serif JP', serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: #2c1810;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    position: relative;
}

.tier-title::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 40px;
    background: linear-gradient(135deg, #f4d03f 0%, #e8c547 100%);
    border-radius: 3px;
}

.tier-concept {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.1rem;
    color: #8b4513;
    font-weight: 400;
    line-height: 1.6;
}

.tier-items {
    margin-top: 30px;
}

.item-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: rgba(244, 208, 63, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.item:hover {
    background: rgba(244, 208, 63, 0.2);
    border-left-color: #f4d03f;
    transform: translateX(5px);
}

.item i {
    color: #8b4513;
    font-size: 1.1rem;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.item span {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.95rem;
    color: #333;
    font-weight: 400;
}

.item-count {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    color: #8b4513;
    font-weight: 500;
    text-align: right;
    font-style: italic;
}

.tier-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.tier-section .image-placeholder {
    width: 350px;
    height: 280px;
}

h4 {
    margin-bottom: 5px;
}

/* ==========================================================================
   特徴セクション
   ========================================================================== */

#features {
    padding: 100px 0;
    background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 100%);
    color: #fff;
    position: relative;
}

#features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain2" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="30" cy="30" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="70" cy="60" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="50" cy="90" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain2)"/></svg>');
    pointer-events: none;
}

#features .container {
    position: relative;
    z-index: 1;
}

#features .section-title {
    color: #f4d03f;
}

#features .section-title::after {
    background: linear-gradient(90deg, #fff 0%, #f4d03f 100%);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.feature-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.feature-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f4d03f 0%, #e8c547 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    color: #2c1810;
}

.feature-icon i {
    font-size: 2rem;
}

.feature-card h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #f4d03f;
}

.feature-card p {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
    color: #e8e8e8;
}


/* ==========================================================================
    価格セクション
   ========================================================================== */


/* 価格セクションの全体的なスタイル */
.pricing-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
    text-align: center; /* グリッド全体の中央寄せ */
}

/* 価格グリッドのスタイル */
.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* 個々の価格アイテムのスタイル */
.pricing-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px; /* 上下左右の基本パディング */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 300px; /* アイテムの固定幅 */
    transition: transform 0.3s ease-in-out;

    position: relative; /* ★重要: .priceと.limit-text の absolute 配置の基準 */
    
    /* flexboxでのアイテム内の要素の配置 */
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 全体を水平中央寄せ */
    
    /* 価格と限定テキスト分のスペースを確保するための下部パディング */
    /* 価格要素の高さ + bottomからの距離を考慮して調整 */
    padding-bottom: 120px; /* ★調整: 価格と限定テキストの表示エリアを確保 */
}

.pricing-item:hover {
    transform: translateY(-5px);
}

/* 商品画像のスタイル */
.product-image {
    max-width: 100%; /* 親要素の幅に合わせる */
    height: auto; /* アスペクト比を維持 */
    border-radius: 5px;
    margin-bottom: 20px; /* 画像の下の余白 */
    object-fit: cover;
    max-height: 200px;
    display: block; /* 中央寄せのため */
    margin-left: auto;
    margin-right: auto;
}

/* 商品名のスタイル */
.pricing-item h4 {
    font-size: 1.8em;
    color: #333;
    line-height: 1.4;
    text-align: center;
    /* ★調整: h4の下の余白を広げる */
    margin-bottom: 45px; 
    margin-top: 0; /* flex-direction: column; なので上部の余白も0に */
}

/* 限定表記のスタイル */
.limit-text {
    color: red;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    
    /* ★調整: absolute で配置して、h4や価格と重ならないようにする */
    position: absolute; /* .pricing-item を基準に配置 */
    bottom: 80px; /* 価格の上、下端から80px */
    left: 0; /* 左端から */
    right: 0; /* 右端まで */
    margin: 0 auto; /* 中央寄せ */
    width: fit-content; /* テキストの幅に合わせる */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

/* 価格表示のスタイル */
.pricing-item .price {
    /* ★調整: absolute で右下に配置 */
    position: absolute; /* .pricing-item を基準に配置 */
    right: 20px; /* .pricing-itemのpadding-rightに合わせる */
    bottom: 20px; /* .pricing-itemのpadding-bottomに合わせる */
    
    font-size: 2.2em;
    font-weight: bold;
    color: #a30000;
    text-align: right; /* 価格内のテキストを右寄せ */
    line-height: 1.2;
    /* width: calc(100% - 40px); は不要。text-align: right で十分 */
}

/* 小さい文字（本体価格）のスタイル */
.pricing-item .tax-excluded-price {
    font-size: 0.9em;
    color: #666;
    display: block;
    margin-top: 5px; /* 税込価格との間隔 */
}

/* レスポンシブ対応 (任意) */
@media (max-width: 768px) {
    .pricing-item {
        width: 80%;
        max-width: 350px;
        padding-bottom: 120px; /* 小画面でもパディングを確保 */
    }
    .limit-text {
        bottom: 80px; /* 小画面でも位置を調整 */
    }
    .price {
        bottom: 20px; /* 小画面でも位置を調整 */
    }
}
/* ==========================================================================
    価格セクション (修正版)
   ========================================================================== */

/* 価格セクションの全体的なスタイル */
.pricing-section {
    padding: 40px 20px;
    background-color: #f9f9f9;
    text-align: center; /* グリッド全体の中央寄せ */
}

/* 価格グリッドのスタイル */
.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* 個々の価格アイテムのスタイル */
.pricing-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 300px;
    transition: transform 0.3s ease-in-out;

    /* ★画像中央寄せのためのFlexbox設定を維持 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 画像を水平中央寄せ */
    
    /* ★価格・限定表記の配置基準となる設定を復元 */
    position: relative; 
    padding-bottom: 120px; /* 価格エリアのスペース確保 */
}

.pricing-item:hover {
    transform: translateY(-5px);
}

/* 商品画像のスタイル */
.product-image {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 20px;
    object-fit: cover;
    max-height: 200px;
    /* ★画像中央寄せを確実にするための設定を維持 */
    display: block; 
    margin-left: auto;
    margin-right: auto;
}

/* 商品名のスタイル */
.pricing-item h4 {
    font-size: 1.8em;
    color: #333;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 45px; 
    margin-top: 0;
}

/* 限定表記のスタイル */
.limit-text {
    color: red;
    font-size: 0.9em;
    font-weight: bold;
    text-align: center;
    
    /* ★限定表記の絶対配置を復元 */
    position: absolute; 
    bottom: 80px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    width: fit-content;
    white-space: nowrap;
}

/* 価格表示のスタイル */
.pricing-item .price {
    /* ★価格の絶対配置を復元 */
    position: absolute; 
    right: 20px; 
    bottom: 20px; 
    
    font-size: 2.2em;
    font-weight: bold;
    color: #a30000;
    text-align: right; /* 価格内のテキストを右寄せ */
    line-height: 1.2;
}

/* 小さい文字（本体価格）のスタイル */
.pricing-item .tax-excluded-price {
    font-size: 0.9em;
    color: #666;
    display: block;
    margin-top: 5px;
}

/* レスポンシブ対応 (任意) */
@media (max-width: 768px) {
    .pricing-item {
        width: 80%;
        max-width: 350px;
        padding-bottom: 120px;
    }
    .limit-text {
        bottom: 80px;
    }
    .pricing-item .price {
        bottom: 20px;
    }
}
/* ==========================================================================
   問い合わせセクション
   ========================================================================== */

#contact {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f5f0 0%, #fff 50%, #f8f5f0 100%);
}

.contact-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.contact-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 40px;
    font-family: 'Noto Sans JP', sans-serif;
}

.contact-details {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    background: rgba(244, 208, 63, 0.1);
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.contact-item:hover {
    border-color: #f4d03f;
    background: rgba(244, 208, 63, 0.2);
}

.contact-item i {
    color: #8b4513;
    font-size: 1.2rem;
    margin-right: 10px;
}

.contact-item span {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}



/* ==========================================================================
   フッター
   ========================================================================== */
footer {
  padding: 40px 0;
}

html, body {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* ←ここが可変領域になる */
}

footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 20px;
}

#footer {
    background: #2c1810;
    color: #fff;
    padding: 40px 0;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f4d03f;
    margin-bottom: 5px;
}

.footer-logo p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    color: #ccc;
}

.footer-info p {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    color: #ccc;
}

/* ==========================================================================
   アニメーション
   ========================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* スクロール時のフェードイン効果用クラス */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====== Footer をページ下部に固定する（推奨） ====== */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ビューポートと同じ高さを確保 */
}

/* body の直下にある要素（ヘッダー〜main相当）が可変領域を埋めるようにする。
   HTMLに <main> を入れられるなら main { flex: 1 } を使うのがクリーン */
#header,
#hero,
#osechi-tiers,
#features,
.pricing-section,
#contact {
  /* 基本はそのままでOK。必要なら個別調整 */
}

/* これでフッターを自動的に下に押し出せる */
#footer {
  margin-top: 20px;
  margin-bottom: 0%;
  /* 既存のスタイルは残す（色やpaddingなど） */
  background: #2c1810;
  color: #fff;

  width: 100%;
}

/* フッター内の横並びが幅超えでスクロールを発生させないように */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap; /* 小さい画面では折り返す */
}