/** Shopify CDN: Minification failed

Line 41:0 All "@import" rules must come first

**/
/* 1. shopifyが自動生成するセクションの親要素をフックにする */
#shopify-section-header,
#shopify-section-sections--header {
  background-color: #FFEB82 !important; /* 親要素自体の背景色を塗り替える必要がある場合のみ!important（ここだけは親のインラインスタイル対策で許容されるケースが多いです） */
}

/* 2. 明莉さんのカスタムヘッダーのクラス（詳細度を強めるため、要素名とクラスを連結） */
header.a-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #FFEB82; /* これでナビ全体が#FFEB82になります */
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}

/* 3. 子要素（ナビゲーション）の横並び設定 */
header.a-header-custom .your-nav-class { /* ※実際のナビクラス名に合わせてください */
  display: flex;
  align-items: center;
  gap: 20px; /* メニュー間の余白 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 4. スマホ対応やJS用のクラスも詳細度を高めて準備しておく */
header.a-header-custom.is-active {
  /* JSでメニューを開いたときのスタイル */
}

/* ==========================================================================
🌐 1. フォントの読み込み（Google Fonts: Zen Maru Gothic）
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');


/* ==========================================================================
🎨 2. サイト全体の共通設定（カラー・フォント）
   ========================================================================== */
:root {
    /* メインで使う背景色たちをあらかじめ登録！ */
    --color-cream: #FAF6EE;        /* 全体のベースのクリーム色 */
    --color-green: #CBD9AD;        /* イベントエリアなどの優しい黄緑 */
    --color-red: #7C131A;          /* 総選挙エリアの深い赤 */
    --color-pink: #F8A5B7;         /* フッターの可愛いピンク */
    --color-text: #4A3B32;         /* 文字用の優しいブラウン（真っ黒にしないのがプロのコツ！） */
}

/* サイト全体の初期化 */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Zen Maru Gothic', sans-serif;
    color: #4A3B32;
    line-height: 1.7;
    overflow-x: hidden;
    background-color: #ffffff;

    /* 🌟【大解放！】body自体は画面の端から端まで100%フルサイズにする */
    margin: 0;
    width: 100%;
    /* max-width: 1200px; ⬅️ 😱これを完全に消去します！ */

    /* 📄 背景画像の設定 */
    background-image: url('main-back.webp');
    background-position: center top;
    background-repeat: repeat-y;
    
    /* 💡 背景画像は、真ん中の1200px幅のエリアに綺麗に収まるように微調整 */
    background-size: 1200px auto; 
}

.wrapper {
    width: 100%;
    max-width: 1200px !important; /* 💡 中身を縛る役目をここにバトンタッチ！ */
    margin: 0 auto !important;    /* 💡 これで真ん中寄せになる */
}

main, section {
    width: 100%;
    max-width: 100% !important; /* 💡 制限を完全に解除して画面いっぱいにする */
    margin: 0;
}

.container,
.three-column-container,
.footer-container {
    width: 100%;
    max-width: 1200px !important; /* 💡 1200pxに収めたいのは「中身」だけ！ */
    margin: 0 auto !important;    /* 💡 これで中身だけが綺麗に真ん中に寄る */
    box-sizing: border-box;
}

/* 📸 中にある画像（THEOのロボットなど）がスマホからはみ出さないためのお守り */
img {
    max-width: 100%;
    height: auto;
}


/* リンクのデフォルトの線を消す */
a {
    text-align: center;
    text-decoration: none;
    color: inherit;
}

/* リストの・を消す（フッターなどで大活躍！） */
ul, li {
    list-style: none;
}

/* 画像が箱からはみ出さないようにするプロの基本設定 */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* ==========================================================================
    ⏳ 画面全体のローディング演出
   ========================================================================== */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FAF6F0; /* サイトの背景ベージュに合わせる */
    z-index: 999999; /* 一番手前に出す */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 読み込みが終わったらJavaScriptでこのクラスをつけて消す */
#loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
    color: #4A3B32;
    font-size: 14px;
}

/* 🌀 バウム画像をくるくる回すアニメーション */
.loading-baum {
    width: 120px;
    height: auto;
    margin-bottom: 16px;
    animation: spin-baum 2s infinite linear; /* 2秒かけて1回転をずっと繰り返す */
}

@keyframes spin-baum {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

header {
    width: 100%;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFEB82; 
    position: relative;
    z-index: 100; /* 💡 10000もいかなくて100くらいで十分最前面にきます */
}

/* ==========================================================================
🌟 メニューが開いている間（is-active）の調整
========================================================================== */

/* 1. ヘッダーの黄色い背景を透明にする */
body:has(.global-nav.is-active) header {
    background-color: transparent;
    box-shadow: none;
}

/* 2. メニューが開いている間、ロゴ（h1）をフワッと消す */
body:has(.global-nav.is-active) header h1 {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* 3. メニューが開いている間、PC用ナビもフワッと消す */
body:has(.global-nav.is-active) .pc-nav {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* ロゴのサイズ調整 */
header h1 img {
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px; 
    width: auto;
}

/* ナビゲーションの中の「ul」を横並びにする */
.pc-nav ul {
    display: flex;
    gap: 50px; 
    align-items: center;
    justify-content: space-between; 
    width: 100%;
    box-sizing: border-box;
}

/* メニューの文字のデザイン */
.pc-nav a {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);   
    transition: color 0.3s ease; 
}

.pc-nav a:hover {
    color: #ffaf3f;
}

/* ==========================================================================
📱 グランドメニュー（スマホ・ハンバーガー用ナビ）
   ========================================================================== */
.global-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(250, 246, 238, 0.95); 
    z-index: 90; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    opacity: 0;             
    visibility: hidden;    
    transition: opacity 0.4s ease, visibility 0.4s ease; 
}

.global-nav.is-active {
    opacity: 1;
    visibility: visible;
}

.global-nav ul {
    display: flex;
    flex-direction: column; 
    gap: 25px;              
}

/* ==========================================================================
🍔 ハンバーガーボタン（通常時）
   ========================================================================== */
.hamburger-btn {
    position: relative; 
    z-index: 110; /* 💡 メニュー（z-index: 90）より常に上に置くことで、×になっても絶対押せるお守り */
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}

.hamburger-btn span {
    display: inline-block;
    position: absolute;
    left: 13px;
    width: 24px;
    height: 2px;
    background-color: var(--color-text); 
    border-radius: 2px;
    transition: all 0.4s ease; 
}

.hamburger-btn span:nth-of-type(1) { top: 18px; }
.hamburger-btn span:nth-of-type(2) { top: 25px; }
.hamburger-btn span:nth-of-type(3) { top: 32px; }

.hamburger-btn:hover {
    opacity: 0.6;               
    transform: scale(1.05);     
}

/* ==========================================================================
⚡ クリックされて「active」がついたとき（メニューが開いた後）
   ========================================================================== */
.hamburger-btn.active {
    /* 💡 ここはPC版のヘッダーの位置から飛び出して画面に固定したいので、
       スマホ対応時に上書きしやすいよう、最低限の!importantに留めます */
    position: fixed;
    display: block; 
    top: 24px;    
    right: 40px;  
    width: 50px;
    height: 50px;
}

/* 📋 メニュー内のリンク文字 */
.global-nav ul li a {
    font-size: 18px; 
    display: block; 
    padding: 10px 0;
    text-decoration: none;
    transition: all 0.2s ease; 
}

.global-nav ul li a:hover {
    color: #ffaf3f; 
}

/* ==========================================================================
❌ ×マークへの変身アニメーション
   ========================================================================== */
.hamburger-btn.active span:nth-of-type(1) {
    top: 22px;
    left: 15px;
    transform: translateY(3px) rotate(-45deg);
    width: 22px;
}

.hamburger-btn.active span:nth-of-type(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-of-type(3) {
    top: 30px;
    left: 15px;
    transform: translateY(-5px) rotate(45deg);
    width: 22px;
}

/* ==========================================================================
📸 メインキービジュアルスライダー（位置・余白の完全補正）
   ========================================================================== */
.key-visual-slider {
    /* 🌟【左の隙間対策】親要素のpaddingを完全に無視して画面端に張り付ける設定 */
    width: 100vw ; 
    max-width: 100vw ;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    /* 🌟【下の隙間対策】下のAboutセクションとの間隔（カンプに合わせて30px〜50px等に調整してね） */
    margin-top: 0;
    margin-bottom: 40px ; 
    overflow: hidden;
}

/* 画像の設定はこれで確定！ */
.slider-area img {
    width: 100vw ;
    min-width: 100vw ;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ==========================================================================
🔮 Slickが自動生成するドットボタン（丸ぽち）の位置調整
   ========================================================================== */
/* 💡 ドットボタンが下がりすぎて下の隙間を作っていた犯人を捕まえて位置を上げます */
.key-visual-slider .slick-dots {
    bottom: 20px ; /* 🌟 画像の「内側（下から20pxの位置）」に強制的に潜り込ませます！ */
    z-index: 10;            /* 画像の下に隠れないように手前に出すお守り */
}

/* （おまけ）ドットの色をバウム博っぽく可愛いブラウンにする設定 */
.key-visual-slider .slick-dots li button:before {
    color: #4A3B32 ; /* 💡 丸ぽちの色を優しいブラウンに */
    font-size: 10px;           /* 丸ぽちのサイズ */
}

/* ==========================================================================
🔄 【完全版】Aboutの横スライドバウム（PC用）
   ========================================================================== */
.about-mini-baum-top {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    height: 60px !important; 
    margin-top: -100px !important; 
    margin-bottom: 50px !important;
    
    background-image: url('about-mini-baum1.webp') !important; 
    background-repeat: repeat-x !important;
    background-position: 0 center !important;
    background-size: auto 60px !important; /* 🌟 縦幅60pxに固定して潰れ防止 */
    
    z-index: 10 !important;
    animation: loop-about-left 15s linear infinite !important; /* 🎬 15秒で左へ */
}

.about-mini-baum-bottom {
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    height: 60px !important;
    margin-top: 50px !important;
    margin-bottom: 0 !important;
    
    background-image: url('about-mini-baum2.webp') !important; 
    background-repeat: repeat-x !important;
    background-position: 0 center !important;
    background-size: auto 60px !important;
    
    z-index: 10 !important;
    animation: loop-about-right 15s linear infinite !important; /* 🎬 15秒で右へ */
}

/* ==========================================================================
🌀 アニメーションの基本ルール（絶対にズレない500pxループ）
   ========================================================================== */
@keyframes loop-about-left {
    0% { background-position: 0 center; }
    100% { background-position: -500px center; }
}

@keyframes loop-about-right {
    0% { background-position: 0 center; }
    100% { background-position: 500px center; }
}
/* ==========================================================================
🌀 安全に1コマ分だけきれいに無限ループさせる設定（1920pxのズレを解消！）
   ========================================================================== */
@keyframes loop-background-safe {
    0% {
        background-position: 0 center;
    }
    100% {
        /* 🌟 background-size で指定した「250px」と完全に同じマイナスの値にします */
        background-position: -250px center; 
    }
}

@keyframes loop-background-safe-reverse {
    0% {
        background-position: 0 center;
    }
    100% {
        /* 🌟 下のラインは右に向かって流れるようにプラスの値にします */
        background-position: 250px center; 
    }
}

/* ==========================================================================
    ⬜ 通常のタイトル（リボンがいらないところはこれだけが適用される）
   ========================================================================== */
.section-title {
    font-size: 28px !important;
    font-weight: bold;
    color: #4A3B32; /* 元の文字色 */
    text-align: center;
    margin: 0 auto 40px !important;
    background: none !important; /* 背景をなしにする */
    padding: 0 !important;
}

/* ==========================================================================
    🎀 リボンをつけたいタイトルだけ（.ribbon-title がついているh2）
   ========================================================================== */
.ribbon-title {
    /* 🌟 display: table に切り替えることで、
       親要素の設定に関係なく、このリボン自体が自力で「 margin: 0 auto 」でド真ん中に歩いていけるようになります！ */
    display: table !important; 
    position: relative !important;
    
    /* 🌟 背景画像やその他の設定（今あるものをそのまま残してね） */
    background-image: url('title-ribbon-back@2x.webp') !important; 
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    color: var(--color-text) !important;
    
    /* 🌟 上下左右の余白（文字が真ん中に来るように微調整した数値） */
    padding: 12px 80px 35px 80px !important; 
    
    /* 🌟【超重要】左右の margin を auto にして、強制的にセンターに配置！ */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 50px !important; 
    
    z-index: 5;
}

/* 🛠️ もし画像自体に余白が入っていて小さくなる場合は、
   以下の font-size を少しだけ大きく（例: 32px）するか、padding を広げて画像を大きく引き伸ばしてね！ */

/* ==========================================================================
    🍩 別のバウム画像を使うリボン（タイプ2）
   ========================================================================== */
.ribbon-type2 {
    /* 🌟 新しいバウム画像の指定 */
    background-image: url(smaii-title-frame.webp) !important; 
    
    /* 🌟【超重要】これで永遠ループを阻止！1個だけ表示にします */
    background-repeat: no-repeat !important;
    
    /* 🌟【超重要】小さくなった画像を文字のド真ん中に配置する */
    background-position: center center !important;
    
    /* 💡 画像自体の大きさ（好みのサイズに微調整してね！） */
    background-size: 100px auto !important; 
    
    padding: 12px 80px 20px 80px !important; 
}

/* 🌟 フワッと出したい要素（セクションや白い箱など）にこのクラスをつけます */
.fade-in-target {
    opacity: 0;                    /* 最初は透明 */
    transform: translateY(30px);   /* ちょっと下に下げておく */
    transition: opacity 0.8s ease, transform 0.8s ease; /* 0.8秒かけて滑らかに動かす */
}

/* 🌟 画面内に入ってきたら、JSがこのクラスを自動で追加して表示させます */
.fade-in-target.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important; /* 元の高さに戻る */
}

/* ==========================================================================
📖 Aboutセクション（ベースの箱）
   ========================================================================== */
.about {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative; /* 💡 中の要素がズレないようにベースを固定 */
}

.about-1{
    margin-top: 80px;
    margin-bottom: 95px;
}

.about-2{
    margin-top: 80px;
    margin-bottom: 95px;
}

.about-3{
    margin-top: 80px;
    margin-bottom: 95px;
}

/* ==========================================================================
    📖 Aboutセクション（ベースの箱）
   ========================================================================== */
.about {
    width: 100%;
    max-width: 1200px; /* 💡 カンプ全体の基準幅 */
    margin: 0 auto;
    text-align: center;
    position: relative; /* 💡 写真たちを空中浮遊させるための壁になります */
    padding: 60px 0;    /* 上下のドットラインとの間のゆったりした余白 */
    overflow: visible; 
}

/* 🏷️ セクションのタイトル */
.section-title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
    position: relative;
    z-index: 5; /* 💡 背景のバウムより前に出す */
}

/* 📝 本文 */
.about p {
    font-size: 16px;
    line-height: 3.5; 
    letter-spacing: 0.03em;
    position: relative;
    z-index: 5; 
    font-weight: 700;
    max-width: 1000px;
    margin: 0 auto;
}

.about-1 { margin-bottom: 30px; }
.about-2 { margin-bottom: 30px; }
.about-3 { margin-bottom: 60px; } /* 💡 pxを忘れず持たせる設定 */


/* ==========================================================================
    🎨 【左側】巨大背景バウム ＆ 左下の丸写真（CSSだけで配置）
   ========================================================================== */
   /* 🍩 左の大きな背景バウム */
html body .about::before {
    content: "" !important;
    position: absolute !important;
    top: 45% !important;
    left: -230px !important; /* 💡 1200pxの檻から左側へカンプ通りにはみ出させる位置 */
    transform: translateY(-50%) !important;
    
    /* 🎯 【大復活】スマホの100%を完全に上書きして、PC版の絶対正義である「700pxの正方形」を強制固定！ */
    width: 700px !important; 
    height: 700px !important;
    
    background-image: url('big-baum.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    z-index: 1 !important; 
}

/* 📸 左下の小さな丸写真 */
.about-1::before {
    content: "";
    position: absolute;
    bottom: -200px; /* 💡 本文1の横あたりの位置に調整 */
    left: 80px;
    
    /* 💡 丸写真のサイズ（カンプに合わせて調整） */
    width: 200px;
    height: 200px;
    
    background-image: url('image1.webp');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 6; /* 一番手前 */
}


/* ==========================================================================
    📸 【右側】3つの丸写真を縦に配置（CSSだけで配置）
   ========================================================================== */
/* 右上：焼き機の写真 */
.about-1::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -10px;
    
    width: 196px;
    height: 196px;
    
    background-image: url('image2.webp');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 6;
}

/* 右真ん中：棒バウムの写真（少し右にはみ出す） */
.about-2::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -90px; /* 💡 カンプ通り、1200pxの枠より少し右へ出す */
    
    width: 190px;
    height: 190px;
    
    background-image: url('image3.webp');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 6;
}

/* 右下：会場の写真 */
.about-3::after {
    content: "";
    position: absolute;
    bottom: -50px;
    right: 40px;
    
    width: 180px;
    height: 180px;
    
    background-image: url('image4.webp');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 6;
}



/* ==========================================================================
    🍪 共通バウムボタンのデザイン（もっと見る / オンラインショップ）
   ========================================================================== */
.common-btn-wrapper {
    text-align: center;
    margin-top: 0;
    position: relative;
    top: -60px; /* 💡 マイナスの数字を大きくするほど、ボタンだけが単独で上に上がります */
}

.custom-btn-link {
    display: inline-block;
    text-decoration: none;
}

.btn-container {
    position: relative; /* 💡 文字を中央に浮かせるための壁 */
    width: 150px;       /* 💡 カンプのボタンの大きさに合わせて調整してね */
    height: 150px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.btn-container:hover {
    transform: scale(1.05); /* ボタンにホバーした時も少しぷにっと大きく */
}

/* ボタンの背景画像 */
.btn-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* ボタンの中の文字 */
.btn-text {
    position: relative;
    z-index: 2; /* 💡 画像の上に乗せる */
    color: #4A3B32; /* 優しいブラウン */
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    text-align: center;
    margin: 0;
}

/* ==========================================================================
    🟢 会場でのイベントセクション（縦幅を狭める）
   ========================================================================== */
.event {
    width: 100%;
    text-align: center; 
    margin: 0 auto;
    max-width: none !important;
    
    /* 💡 60px ➔ 80px にして、ボタンの下側にも優雅な余白をプラス！ */
    padding: 60px 0 80px 0; 
    
    /* 🎨 緑色の面積を 66% ➔ 86% までガツンと下に引き伸ばす！ */
    background-image: linear-gradient(
        to bottom, 
        rgba(160, 212, 104, 0.5) 0%, 
        rgba(160, 212, 104, 0.5) 86%, /* 💡 ここを 86% に増やして緑を下に広げる */
        transparent 86%,               /* 💡 切り替わりポイントも 86% に揃える */
        transparent 100%
    );
}

/* ==========================================================================
    🎪 会場でのイベント：タイトルの両端にガーランドをつける
   ========================================================================== */
#event .ribbon-title {
    position: relative !important; /* 💡 ガーランドをタイトルの左右に固定する基準点 */
}

/* ✨ 左右のガーランド共通設定（サイズや動きのベース） */
#event .ribbon-title::before,
#event .ribbon-title::after {
    content: "" !important;
    position: absolute !important; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    
    /* 💡 カンプの大きさに合わせて、ガーランドのサイズを自由に調整してね */
    width: 300px !important;
    height: 200px !important;
    
    /* 💡 縦方向の真ん中寄せ（リボンの高さの中央に合わせる魔法） */
    top: 50% !important;
    transform: translateY(-50%) !important;    
    z-index: 2 !important;
}

/* 👈 左側のガーランド */
#event .ribbon-title::before {
    background-image: url('garland@2x.webp') !important; 
    left: -310px !important;   
}

/* 👉 右側のガーランド */
#event .ribbon-title::after {
    background-image: url('garland@2x.webp') !important; 
    right: -310px !important; 
}

/* ✨ 左右のガーランド共通設定（サイズや動きのベース） */
#event .ribbon-title::before,
#event .ribbon-title::after {
    content: "" !important;
    position: absolute !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    
    width: 300px !important;   /* 💡 横幅 */
    height: 200px !important;  /* 💡 縦幅（基本はwidthと同じ数字でOK） */
    
    top: 140% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}

/* 📝 リード文（下のスライダーとの隙間を詰める） */
.event-lead {
    font-size: 16px;
    line-height: 1.8;
    color: #4A3B32;
    max-width: 600px; 
    margin: 0 auto 24px; 
    font-weight: 700;
    text-align: center;
}

/* ==========================================================================
    🍪 イベントスライダー
   ========================================================================== */
/* 🟢 スライダー全体の檻（PCは1200pxで中央寄せ、スマホは画面いっぱい） */
.event-swiper,
html body .event-swiper {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    overflow: hidden !important; /* はみ出たバウムを綺麗に隠す */
    padding: 40px 0 !important;
}

/* 📦 中のレール（JSの動きを止めて、CSSのアニメーションで左へ流す！） */
.event-swiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: max-content !important; /* 中身のサイズに合わせて横長に広げる */
    
    /* 🎬 sidebaum達と同じ魔法！30秒かけて左へ滑らかに無限ループ */
    animation: flow-event-cards 30s linear infinite !important; 
}

/* 🎫 カード1枚ずつのサイズ（PCもスマホもこれでサイズが完全固定されて崩れない！） */
.event-swiper .swiper-slide {
    flex-shrink: 0 !important;
    width: 240px !important; /* カードの横幅 */
    margin: 0 15px !important; /* カード同士の心地よい隙間 */
}

/* ==========================================================================
🌀 sidebaum譲りの「絶対にズレない＆途切れない」無限ループ命令
   ========================================================================== */
@keyframes flow-event-cards {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 💡 カードの幅(240px) + 隙間(15px×2=30px) = 270px の倍数分だけ左に動かすと綺麗に繋がります */
        transform: translateX(-1080px); 
    }
}

/* 📦 スライド1枚ずつの箱（横に並んだときに潰れないようにする） */
.swiper-slide {
    flex-shrink: 0 !important;
    width: 200px; /* 💡 動かない間の仮のサイズ。カンプの見た目に合わせて調整してね */
    height: auto;
}
/* 🌟 2枚の画像を「絶対に同じ場所」に重ねるための親の箱 */
.baum-frame-wrapper {
    position: relative !important; /* 💡 基準の壁 */
    width: 240px !important;       /* 💡 カンプの円のサイズに合わせて調整してね */
    height: 240px !important;      /* 💡 縦横は必ず同じ数字にする */
    margin: 0 auto !important;
    display: block !important;     /* 💡 flexの影響をここで完全に断ち切るお守り */
}

/* 🎨 【下層】ベースになる可愛いバウムフレーム */
.slider-frame {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 1 !important;         /* 下に敷く */
}

/* 📸 【上層】フレームの上にピッタリ重ねるアイコン写真 */
.slider-photo {
    position: absolute !important;
    top: 52% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* つねに真ん中に乗せる魔法 */
    
    /* 💡 フレームの内側に綺麗に収まるように、サイズを少し小さく絞る */
    width: 78% !important;         
    height: 78% !important;
    
    object-fit: cover !important;
    border-radius: 50% !important; /* 綺麗な丸型に切り抜く */
    z-index: 2 !important;         /* 🌟 フレームの上に重ねる！ */
}

.event-section .common-btn-wrapper,
#event .common-btn-wrapper {
    /* 🌟 ここで上のコンテンツとのすき間を自由にコントロール！ */
    /* いま詰まっていたら 40px や 60px に広げて下に押し下げます */
    margin-top: 50px !important; 
    
    /* 🌟 もしボタンの「下の余白」もあけたい場合はここを調整 */
    margin-bottom: 20px !important; 
    
    display: flex;
    justify-content: center; /* ボタンを中央配置 */
    width: 100%;
}

/* ==========================================
    オンラインショップセクション（もこもこ背景完全版）
========================================== */
.EC {
    position: relative;
    
    /* さっき作ったもこもこ背景画像を指定（パスやファイル名は実際の環境に合わせてね！） */
    background-image: url(ec-back.png); 
    background-repeat: no-repeat;
    background-size: 85% auto; /* 画面の横幅・縦幅にぴったりフィットさせる */
    background-position: right center;
    
    /* 💡 clip-pathは削除しました */
    
    /* 斜めから「もこもこ」に変わったので、上下の余白は文字の被り具合を見て微調整してください */
    padding: 100px 0 120px 0;
    width: 100%;
}

/* タイトルの位置（もこもこに被らないように調整） */
.EC .section-title {
    margin-bottom: 40px;
}

/* コンテンツ全体の配置調整（中央寄せ用の箱） */
.EC-bottom-box {
    max-width: 1200px; /* サイトの共通幅 */
    margin: 0 auto;
    margin-top: -10px;
}

/* 横並びのレイアウトの土台 */
.EC-content-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px; /* 文字とカート画像の間の隙間 */
}

/* コピーテキスト（pタグ） */
.EC-lead {
    flex: 1;                     
    max-width: 420px;            
    font-size: 18px;             
    line-height: 2;              
    color: #4A3B32;              
    text-align: left;     
    margin-left: 17%;
    margin-top: -73px;
    font-weight: 700;
}

/* 右側のゆらゆらカート画像 */
.EC-img {
    width: 48%;                  
    max-width: 450px;            
    height: auto;
    
    /* ★修正：飛び出す量を「-160px」から「-80px」へ減らします！ */
    margin-top: -80px;          
    
    position: relative;
    z-index: 10;
    
    /* アニメーションはそのまま */
    animation-name: yurayura;    
    animation-duration: 3s;      
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
}

/* ゆらゆらキーフレーム */
@keyframes yurayura {
    0% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-6px) rotate(-0.5deg); }
    66% { transform: translateY(6px) rotate(0.5deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* ボタンの調整 */
/* 共通の !important を力づくで上書きしてボタンを上に上げる */
#EC .common-btn-wrapper.EC-btn {
    margin-top: -120px !important; /* ★こっちも「!important」をつけて強制最優先にします */
    position: relative !important;
    z-index: 20 !important;        /* 背景に埋もれないように最前面へ */
    display: flex;                 /* 中央寄せにするために追加 */
    justify-content: center;       /* 中央寄せにするために追加 */
}
/* ==========================================================================
    🍩 画面全体をぶち抜く1本道のサイドバウム（優先度MAX版）
   ========================================================================== */
#MainContent {
    position: relative !important;
    overflow: visible !important;
}

/* 👈 左側のバウム設定 */
#MainContent::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;

    top: 377vh !important; 
    bottom: -6vh !important;
    
    height: auto !important; 
    width: 60px !important;
    left: 20px !important;
    
    background-image: url('online-mini-baum1.webp') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    
    /* 🎯 優先度をガツンと上げて、白い背景たちの「手前」に引っ張り出す！ */
    z-index: 10 !important; 
    
    pointer-events: none;
    animation: baum-scroll-vertical 12s linear infinite !important;
}

/* 👉 右側のバウム設定 */
#MainContent::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    
    top: 377vh !important; 
    bottom: -6vh !important;
    
    height: auto !important;
    width: 60px !important;
    right: 20px !important;
    
    background-image: url('online-mini-baum2.webp') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    
    /* 🎯 右側も手前に引っ張り出す！ */
    z-index: 10 !important; 
    
    pointer-events: none;
    animation: baum-scroll-vertical 12s linear infinite !important;
}

/* ==========================================================================
    🤍 参加企業（Brand Listセクション）完全決定版CSS
   ========================================================================== */
.wrapper {
    width: 100%;
    overflow: hidden;
}

.brand-list {
    width: 100%;
    max-width: none !important;
    background-image: url('brand-back.png'); 
    background-repeat: no-repeat;
    
    background-size: 50% auto;       
    background-position: 0 35%; /* 👈 画面を見ながら 70%〜85% の間で微調整してみてな！ */
    
    padding: 100px 0 120px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 40px;
}

.brand-list .section-title {
    margin-bottom: 50px; 
}

/* 📦 左右の箱を並べる親のコンテナ（上揃えに変更！） */
.brand-list .section-container {
    display: flex !important;
    /* 💡 space-betweenをやめて、中央に寄せ合う形にします */
    justify-content: center !important; 
    /* 💡 下揃え（flex-end）から、上揃え（flex-start）にチェンジ！
       これで、左側の箱が右側の画像の上端とピッタリ同じ高さまで自動で跳ね上がります！ */
    align-items: flex-start !important;        
    
    width: 100% !important;
    max-width: 1100px !important; /* 👈 左右の間に少し余裕を持たせるために1100pxに広げました */             
    margin: 0 auto !important;
    padding: 0 20px !important;
    position: relative !important; 
}

/* ⬅️ 左側エリア（ここは元のシンプルな状態で固定！） */
.left-content-wrapper {
    width: 40% !important;                     
    text-align: center !important;
    position: relative !important;
    left: -40px !important; 
    margin-top: 0 !important; /* 余計なマージンは完全にゼロに */
}

/* 📝 260社様の3行文章（ここで文字だけを下げる！） */
.brand-list-text {
    font-size: 15px !important;
    font-weight: 700 ;
    line-height: 2.4 !important; 
    color: #4A3B32 !important;
    text-align: center !important;
    max-width: 450px !important; 
    margin: 80px auto 0 auto !important;
    position: relative !important;
    top: -18px !important; 
}

/* 🎯 左側のボタン単独の設定（数値を増やしてさらに下げます） */
.left-content-wrapper .common-btn-wrapper {
    position: relative !important;
    top: 0 !important;
    
    /* 💡 ここを変更！ 
       10px から 40px に増やしました。これでボタンだけがさらに下に押し下げられます！ */
    margin-top: 30px !important; /* 👈 右側の「お問い合わせ」ボタンと綺麗に並ぶまで、50px、60pxと調整してみてな！ */
    
    margin-bottom: 0 !important;
    display: block !important;
}

/* 🔢 「260」の数字 */
.brand-list-text .num-large {
    font-size: 28px !important;       
    font-weight: bold !important;     
    color: #4A3B32 !important;        
    vertical-align: center !important; 
    margin: 0 4px !important;
}

/* ➡️ 右側エリア（企業さまへ） */
.brand-list .right-content-wrapper {
    width: 46% !important;                     
    text-align: center !important;
    padding-top: 0 !important; 
    position: relative !important;
    right: -70px !important; 

    top: 50px !important; /* 💡 左右差をどれくらいつけたいかで、40px や 60px に調整してね */
}

/* 📸 右側の案内画像の設定（文字入り地図） */
.brand-list img:not(.btn-bg-img) {
    width: 100% !important;
    
    /* 💡 【大きくする調整】
       460pxからサイズアップして、文字も地図もドーンと見やすくします！ */
    max-width: 520px !important; /* 👈 もっと大きくしたい時は 550px や 580px にしてみて！ */               
    height: auto !important;
    margin: 0 auto 24px !important; 
    display: block !important;
}

.right-content-wrapper .common-btn-wrapper {
    position: relative !important;
    display: block !important;
    
    /* 💥 【解決策】ボタンが上に持っている強烈なオレンジ色のマージンを完全に消し去ります！ 
       これで、地図画像にパツパツに押し下げられていた力が消滅します */
    margin-top: 0 !important; 
    margin-bottom: 0 !important;

    top: -90px !important; /* 👈 もっと上に上げたい時は -100px や -120px に増やしてな！ */
    left: 200px !important; /* 👈 もっと右に寄せたい時は 50px や 60px に増やしてな！ */

    margin-bottom: -110px;
}

#brand-list.brand-list {
    padding: 100px 0 0 0 !important; 
    /* 💡 もし大元の外枠に margin-bottom が残っていたら、ここで完全消去して下のセクションを引っ張り上げる！ */
    margin-bottom: 80px !important; 
}

/* ==========================================================================
    🎈 地図画像（日本地図）がぷかぷか優しく浮き沈みするループアニメーション
   ========================================================================== */

/* 1. 地図画像に対して、アニメーションの動きをセットします */
.brand-list img[src*="baum-map_3@2x.webp"] {
    /* 💡 puka-puka という名前のアニメーションを、
       3.5秒かけて、緩急をつけて（ease-in-out）、無限にループ（infinite）させます */
    animation: puka-puka 3.5s ease-in-out infinite !important;
    
    display: block !important;
    position: relative !important;
}

/* 2. 動かす中身（キーフレーム）を定義します（上下に4pxだけ優しく動かす） */
@keyframes puka-puka {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* 💡 1番上で5pxだけ浮き上がります */
    }
    100% {
        transform: translateY(0); /* 💡 ゆっくり元の位置に戻ります */
    }
}

/* ==========================================================================
    📅 次回のバウムクーヘン博覧会
   ========================================================================== */
.next-expo {
    width: 100%;
    max-width: none !important;
    
    padding: 60px 0 80px;
    text-align: center;
    position: relative;
}

.next-expo .section-container {
    display: flex;
    justify-content: space-between; 
    align-items: center;            
    
    width: 100%;
    max-width: 850px;              
    margin: 0 auto;
    padding: 0 90px !important; 
    
    position: relative;
    z-index: 5;
}

.next-expo-title {
    width: 100% !important;
    text-align: center !important; 
    margin-bottom: 50px !important; 
}

.next-expo-title h1 {
    font-size: 28px !important;
    color: #4A3B32;
    margin: 0;
    display: block !important; 
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* ==========================================================================
    ⬅️ 左側カラム：巨大バウムクーヘンの文字入れエリア
   ========================================================================== */
.next-expo .left-content-wrapper {
    width: 60%; 
    display: flex;
    justify-content: center;
    
    margin-left: 20px !important; /* 💡 画面を見ながら 10px や 30px に微調整してね */
}

/* 🍩 巨大丸バウムの箱（さらにサイズアップ！） */
.event-container {
    background-image: url('next-event-back.webp'); 
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain; 
    width: 520px !important;
    height: 520px !important;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center !important;
    padding: 40px !important; 
    
    box-shadow: none !important; 
    background-color: transparent !important; 
    
    margin: 0 auto !important;
}
/* ✍️ 丸バウムの中の文字たち（カンプのサイズ感に同期） */
.event-container p, .event-container h3 {
    text-shadow: 
        2px  2px 0 #fff, -2px  2px 0 #fff,  2px -2px 0 #fff, -2px -2px 0 #fff,
        2px  0px 0 #fff, -2px  0px 0 #fff,  0px  2px 0 #fff,  0px -2px 0 #fff,
        1px  2px 0 #fff, -1px  2px 0 #fff,  1px -2px 0 #fff, -1px -2px 0 #fff,
        2px  1px 0 #fff, -2px  1px 0 #fff,  2px -1px 0 #fff, -2px -1px 0 #fff;
    
    line-height: 1.1 !important; 
}

.event-sub-title { 
    font-size: 23px !important; 
    color: #4A3B32 !important; 
    font-weight: 700 !important; 
    margin-bottom: 10px !important; 
}

.event-sub-title-2 { 
    font-size: 50px !important; 
    color: #4A3B32 !important; 
    font-weight: 700 !important; 
    margin-top: 0 !important;
    margin-bottom: 20px !important; 
    white-space: nowrap;
}

.event-date { 
    font-size: 27px !important; 
    color: #4A3B32 !important; 
    font-weight: 700 !important; 
    margin-bottom: 6px !important; 
}

.event-time { 
    font-size: 28px !important; 
    color: #4A3B32 !important; 
    font-weight: 700 !important; 
    margin-bottom: 10px !important; 
}

.event-time-2 { 
    font-size: 20px !important; 
    color: #4A3B32 !important; 
    margin-bottom: 30px !important; 
}

.event-attention { 
    font-size: 14px !important; 
    color: #66554B !important; 
    line-height: 1.4 !important; 
    max-width: 320px !important; 
    margin: 0 auto !important; 
    text-shadow: none !important; 
}
/* ==========================================================================
    ➡️ 右側カラム
   ========================================================================== */
.next-expo .right-content-wrapper {
    width: 45%;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    gap: 16px; 
}

.sns-link, .event-map, .bland-list-link, .-button {
    width: 100% !important;
    max-width: 290px !important; 
    height: 95px !important; 
    border-radius: 12px;
    overflow: hidden;
    display: block;
}

.event-map {
    width: 100% !important;
    max-width: 290px !important; 
    height: 250px !important;          
    
    border-radius: 12px;
    overflow: hidden;
}

.sns-button, .bland-list-button, .sns-button img, .bland-list-button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* 💡 縦横比を保ったまま長方形の箱にフィットさせる */
    display: block;
}

/* ==========================================================================
    🚩 次回のバウムクーヘン博覧会：右側ボタンカスタマイズ
   ========================================================================== */

.right-content-wrapper .next-btn {
    display: flex !important;
    flex-direction: column;    
    justify-content: center;
    align-items: center;
    
    width: 100% !important;
    max-width: 290px;          
    height: 72px;   
    
    background-image: url('next-event-buttom2.webp') !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    
    font-family: 'Zen Maru Gothic', sans-serif;
    color: var(--color-text);  
    font-weight: bold;
    font-size: 17px;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
    
    margin: 15px 0 !important; 
    transition: all 0.3s ease !important;
}

.right-content-wrapper .next-btn:hover {
    opacity: 0.85 !important;
    transform: translateY(-2px) !important; 
    cursor: pointer;
}

.right-content-wrapper .event-map {
    margin: 15px 0 !important;
    width: 100%;
    max-width: 290px;          
}
.right-content-wrapper .event-map iframe {
    width: 100% !important;
    height: 250px !important;  
    border-radius: 8px;        
}

.right-content-wrapper .next-btn.btn-instagram {
    font-weight: bold !important;
    font-size: 16px !important;   
    line-height: 1.3 !important;  
    height: 72px !important;       
    padding: 6px 10px !important;  
}

/* ==========================================================================
    side-baum　左右のデコレーション（小さくリピート・エラー修正版）
   ========================================================================== */
.next-expo .side-decoration {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px !important;       
    z-index: 1;
    pointer-events: none;
    background-repeat: repeat-y; 
    background-size: 100% auto;
}

/* ⬅️ 左側の専用ミニバウム縦リピート */
.next-expo .line-left { 
    left: 10px !important; 
    
    /* 🌟【ここを修正！】 
        画像のあとの「'」をしっかり閉じて、最後に「;」をつけ、
       さらに波括弧「}」で確実に閉じます！ */
    background-image: url('next-mini-baum1.webp') !important; 
}

/* ➡️ 右側の専用ミニバウム縦リピート */
.next-expo .line-right { 
    right: 10px !important; /* 💡 画面右端からの距離 */
    background-image: url('next-mini-baum2.webp') !important; 
}

/* HTMLの元のimgを非表示にするお守り */
.next-expo .side-decoration img { 
    display: none !important; 
}




/* ==========================================================================
    🗳️ バウムクーヘン総選挙（awardセクション）
   ========================================================================== */
.award {
    width: 100%;
    max-width: none !important;
    background-color: #7A121A;  /* 🌟 カンプの深みのある高貴なダークレッド */
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

#award {
    position: relative !important; /* 💡 キラキラの位置をここを基準に決めるお守り */
    width: 100%;
    overflow: hidden !important;  /* 💡 はみ出たキラキラを隠すお守り */
}

/* 📦 メインの3カラムコンテナ */
.award .three-column-container {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 💡 縦のド真ん中で揃える */
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.three-column-container {
    position: relative;
    z-index: 5; /* バウムや文字をキラキラより手前に出す */
}


/* ==========================================================================
    🏆 awardセクション 全体設定（絶対配置の基準にするため）
   ========================================================================== */

#award img[src*="kirakira"] {
    position: absolute !important; /* 💡 自由な場所に置くための設定 */
    z-index: 1 !important;        /* 💡 バウム画像の後ろに隠す設定 */
    pointer-events: none;         /* マウスが反応しないようにする */
    height: auto !important;
    width: 50px !important; 
    animation: 3s ease-in-out infinite; 
}

/* ==========================================================================
    ⬅️ 左側カラムのキラキラ位置調節（column-left-img 内）
   ========================================================================== */
.column-left-img {
    position: relative;
    /* 💡 バウム画像をキラキラより手前に出す */
    z-index: 10;
}

/* 1個目のキラキラ（kirakira2-1.svg） */
.column-left-img img:nth-child(2) {
    /* 🌟 ここをいじって場所を決めます（左端から・上から） */
    left: -30px !important;   /* 💡 バウム画像の左側にはみ出させる */
    top: 50px !important;    /* 💡 上からの距離 */
    width: 70px !important;  /* 💡 このキラキラだけ個別に小さくする */
}

/* 2個目のキラキラ（kirakira1-2.svg） */
.column-left-img img:nth-child(3) {
    /* 🌟 ここをいじって場所を決めます（右側から・下から） */
    right: 20px !important;   /* 💡 バウム画像の右側に寄せる */
    bottom: -10px !important; /* 💡 バウム画像の下側にはみ出させる */
    width: 100px !important; /* 💡 このキラキラだけ個別に少し大きくする */
}

/* ==========================================================================
    ✨ キラキラをピカピカ明滅させるアニメーション設定
   ========================================================================== */
/* 共通設定にアニメーションのスイッチを追加！ */
#award img[src*="kirakira"] {
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none;
    height: auto !important;
    width: 50px !important; 
    
    /* 🌟 アニメーションを発動（2秒かけてループ、滑らかに繰り返す） */
    animation: kirakira-blink 2s infinite ease-in-out;
}

/* 💡 キラキラごとに動くタイミング（ズレ）を作って自然に見せる */
.column-left-img img:nth-child(2) { animation-delay: 0s; }
.column-left-img img:nth-child(3) { animation-delay: 0.5s; }
.column-right-img img:nth-child(2) { animation-delay: 0.3s; }
.column-right-img img:nth-child(5) { animation-delay: 0.8s; }

/* 🎬 ピカピカ光るアニメーションの本体（透明度とサイズが変わる） */
@keyframes kirakira-blink {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.1); /* 💡 一番光る時に少しぷくっと大きくなる */
    }
}



/* ==========================================================================
    ➡️ 右側カラムのキラキラ位置調節（新・5個のimg対応版）
   ========================================================================== */
.column-right-img {
    position: relative;
    z-index: 10;
}

/* 🌟 1個目のキラキラ（上から2番目のimg：山梨・時のなる木バウムの近く） */
.column-right-img img:nth-child(2) {
    /* 💡 ここをいじって1個目の位置を決めます（右端から・上から） */
    right: -25px !important;  /* 右側にはみ出させる */
    top: 15px !important;     /* 上からの位置 */
    width: 80px !important;   /* キラキラのサイズ */
    transform: rotate(20deg) !important; /* ほんの少し傾けてニュアンスを出す */
}

/* 🌟 2個目のキラキラ（一番下・5番目のimg：三重バウムや新しい山梨バウムの近く） */
.column-right-img img:nth-child(5) {
    /* 💡 ここをいじって2個目の位置を決めます（左側から・下から） */
    left: -35px !important;   /* 左側にはみ出させる */
    bottom: 20px !important;  /* 下からの位置 */
    width: 90px !important;   /* キラキラのサイズ */
    opacity: 0.85 !important;  /* ほんのり透けさせてバウムを主役に */
}

/* ==========================================================================
    🏛️ 3カラムの中身（左・中央・右）の配置
   ========================================================================== */

/* ⬅️ 左のカラム（バウム1個 ＋ キラキラ） */
.award .column-left-img {
    width: 25%;
    position: relative;
    display: flex;
    justify-content: center;
    left: 30px;
}

/* 左のバウムをちょっとオシャレに傾ける */
.award .column-left-img img:not([alt*="きらきら"]) {
    width: 100%;
    height: auto;
    transform: rotate(-8deg); /* 💡 左に少し傾けて躍動感を出す */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3)); /* 高級感のある影 */
    position: relative;
    z-index: 2;
}

/* ➡️ 右のカラム（バウム3個が重なり合うオシャレ配置） */
.award .column-right-img {
    width: 25%;
    position: relative;
    height: 390px; /* バウムを重ねるための高さの確保 */
}

/* 右側のバウム3つを絶対配置（お互いに少し重ねる） */
.award .column-right-img img:not([alt*="きらきら"]) {
    position: absolute;
    width: 170px; /* バウム1個あたりのサイズ。カンプに合わせて微調整してね */
    height: auto;
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.3));
    z-index: 2;
}

/* ==========================================================================
    🍩 右側カラムのバウム3つを個別に動かす設定
   ========================================================================== */
.column-right-img {
    position: relative;
    z-index: 10;
}

/* 🌟 1個目のバウム（全体の1番目：山梨・エレン） */
.award .column-right-img img:nth-child(1) {
    position: absolute !important; /* 💡 動かすために絶対配置が必要！ */
    top: 10px !important;
    left: 10px !important;
    transform: rotate(5deg) !important;
    z-index: 2 !important;
    width: 124px;
}

/* 🌟 2個目のバウム（全体の4番目：山梨・エイト） */
/* HTMLで「ときもわ」と「エイト」の順番が逆になっていたら、ここを調整してね！ */
.award .column-right-img img:nth-child(4) {
    position: absolute !important;
    top: 150px !important;
    right: 10px !important;
    transform: rotate(-10deg) !important;
    z-index: 4 !important; /* 💡 キラキラや他のバウムより絶対手前に出す数字 */
    width: 120px;
}

/* 🌟 3個目のバウム（全体の3番目：三重・ときもわ） */
.award .column-right-img img:nth-child(3) {
    position: absolute !important;
    bottom: 10px !important;
    left: 30px !important;
    transform: rotate(8deg) !important;
    z-index: 2 !important;
}

/* ✨ 左右共通：キラキラエフェクトをバウムの背景に大きく広げる */
.award .column-left-img img[alt*="きらきら"],
.award .column-right-img img[alt*="きらきら"] {
    position: absolute;
    width: 130%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* バウムの後ろに回す */
    opacity: 0.7; /* ほんのり馴染ませる */
    pointer-events: none;
}

.cake-container { position: relative !important; }

/* 共通設定 */
.cake-container > img[alt*="きらきら"] {
    position: absolute !important;
    width: 35px !important;
    z-index: 3 !important;
    pointer-events: none;
    animation: kirakira-blink 2s infinite ease-in-out;
}

/* 1個目（左上あたり） */
.cake-container img:nth-child(2) {
    top: -15px !important;
    left: -10px !important;
    animation-delay: 0s;
}

/* 2個目（右下あたり） */
.cake-container img:nth-child(3) {
    bottom: -13px !important;
    right: -10px !important;
    animation-delay: 0.5s;
}

/* ==========================================================================
    バウムクーヘン総選挙中央のカラム：ロゴ ＋ メッセージ
   ========================================================================== */
.award .column-center-text p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #ffffff !important;   /* 💡 濁りのない綺麗なホワイトに一発変更！ */
    font-weight: 700 !important; /* 💡 しっかり太字（ボールド）で読みやすく */
    margin: 30px;
    
    /* 🎨 ガタガタの原因になっていた重たいフチの命令を、完全に消去してリセット！ */
    text-shadow: none !important; 
}

/* 総選挙ロゴ */
.award .award-logo {
    width: 100%;
    max-width: 380px; /* ロゴのサイズ感 */
    height: auto;
    margin-bottom: 25px;
}

/* ==========================================================================
    📋 バウムクーヘン総選挙の楽しみ方エリア（award-how-to）
========================================================================== */
.award-how-to {
    width: 100%;
    max-width: none !important;
    background-color: #7A121A; 
    padding: 60px 0 80px;
    text-align: center;
}

.award-how-to .section-title {
    color: var(--color-text)!important;
    margin-bottom: 20px;
}

/* 💡 1〜4のステップを美しく横並びにするコンテナ */
.award-how-to .how-to-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 💡 上のラインで綺麗に揃える */
    width: 100%;
    max-width: 1050px;
    margin: 40px auto 0;
    padding: 0 30px;
}

/* 📦 ステップ1つ1つの四角い箱 */
.how-to-item {
    width: 23%; /* 4つ並ぶので約4分の1の幅 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* 🔢 大きくて可愛いステップ数字 (1, 2, 3, 4) */
.how-to-number {
    font-size: 32px;
    color: #ffffff; /* 総選挙のメインカラーと同期 */
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 900;
    margin: 0 0 10px 0;
}

/* 📝 ステップの説明テキスト */
.how-to-text {
    font-size: 14px;
    line-height: 1.6;
    color: #ffffff;
    font-weight: 700;
    margin: 0 0 20px 0;
    min-height: 68px; /* 💡 文字数が違っても、下のアイコンの位置が綺麗に揃うお守り */
}

/* 🎨 ステップ下部の可愛いイラストアイコン */
.how-to-item img {
    width: 100%;
    max-width: 110px; /* アイコンの最大サイズ。カンプに合わせて調整してね */
    height: auto;
    display: block;
    margin-top: auto; /* 💡 箱の最下部にピタッと揃える */
}

.how-to-item .how-to-item-2-2{
    width: 160%;
    max-width: 160px; /* アイコンの最大サイズ。カンプに合わせて調整してね */
    height: auto;
    display: block;
    margin-top: auto; /* 💡 箱の最下部にピタッと揃える */
}

.how-to-item .how-to-item-2-3{
    width: 160%;
    max-width: 160px; /* アイコンの最大サイズ。カンプに合わせて調整してね */
    height: auto;
    display: block;
    margin-top: auto; /* 💡 箱の最下部にピタッと揃える */
}

/* ⚠️ ステップ3だけの小さな注意書き（※ノベルティは〜） */
.how-to-note {
    font-size: 11px;
    color: #ffffff;
    line-height: 1.4;
    margin: 10px 0 0 0;
    position: absolute;
    bottom: -45px; /* 💡 アイコンの下側にひょっこり配置して邪魔しないようにする */
    width: 140%;   /* 横幅を少し広げて折り返しを防ぐ */
    left: -20%;
}

/* ==========================================================================
    🏆 過去のグランプリ
========================================================================== */
.past-grandprix-section {
    width: 100%;
    max-width: none !important;
    background-color: #7A121A; 
    padding: 40px 0 80px; 
    text-align: center;
    position: relative;
}

.past-grandprix-section .section-title {
    color: #ffffff !important;
    margin-bottom: 50px; /* 💡 隙間をきゅっと詰める */
}

/* ==========================================================================
    🏆 過去のグランプリ　セクション内のリボンタイトル文字色変更
========================================================================== */
.past-grandprix-section .ribbon-title {
    color: var(--color-text) !important;
}

/* ==========================================================================
    🏆 グランプリセクション用のホバーガイド
   ========================================================================== */
.gp-hover-guide {
    font-size: 14px !important;
    color: #FFF5EE !important; /* エンジ色に映える、温かみのある白 */
    margin-top: 15px !important;
    margin-bottom: 35px !important;
    text-align: center !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
}

/* 🖱️ 指マークのアイコンをピコピコ動かす設定 */
.gp-hover-guide i {
    margin-right: 6px;
    color: #F4C430; /* トロフィーとお揃いの綺麗なゴールド */
    animation: gp-mouse-bounce 0.8s infinite alternate;
    display: inline-block;
}

@keyframes gp-mouse-bounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-3px) scale(1.05); }
}

/* ==========================================================================
    🏟️ 過去のグランプリ　トロフィーと4つの箱が1画面にきゅっと集まるステージ
   ========================================================================== */
.grandprix-stage {
    position: relative;
    width: 100%;
    max-width: 1000px;   /* 🌟 全体の横幅を1100pxから960pxにきゅっと絞る！ */
    height: 600px;     /* 🌟 ステージの全体の縦幅を520pxにコンパクト化！ */
    margin: 0 auto 30px;
    padding: 0;
    display: block !important;
}

/* ==========================================================================
    🏆 過去のグランプリ　中央トロフィー ＆ 被りを完全に消し去る注釈テキスト
   ========================================================================== */
.stage-trophy {
    position: absolute;
    top: 50%; /* ステージの真ん中 */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px !important; 
    z-index: 10;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4));
    
    /* 💡 画像と文字を縦に並べる設定 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* トロフィー画像自体に高さをしっかり持たせて、文字を下に押し出す */
.stage-trophy img {
    width: 100% !important;
    height: 220px !important; /* 💡 高さを120pxに固定して、存在感をキープ */
    display: block !important;
    object-fit: contain !important;
}

/* 📝 HTMLで入れてくれた注釈テキスト（絶対に被らせない！） */
.stage-trophy p,
.stage-trophy div,
.stage-trophy .trophy-caption {
    display: block !important;
    width: 340px !important; /* 横幅を広くして絶対に潰さない */
    
    /* 🌟【ここが決定打！】
    トロフィーの真下から「45px」という圧倒的な距離を引き離します！
       これでゴールドの台座に文字が被ることが物理的に不可能になります */
    margin-top: 45px !important; 
    
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.7) !important; /* 上品な半透明の白 */
    font-weight: normal !important;
    text-align: center !important;
    line-height: 1.4 !important;
    white-space: nowrap !important; /* 勝手に改行させない */
}


/* ==========================================================================
    📦 過去のグランプリ４シーズンの配置（箱のサイズ）
   ========================================================================== */
.result-item {
    position: absolute;
    width: 300px !important;       
    height: 270px !important;    
    background: #500A10 !important; 
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 16px 12px;
    box-sizing: border-box;
    text-align: center;
}

/* 大会名テキスト */
.result-year {
    display: block;
    font-size: 18px; /* 💡 ボックスに合わせて少し大きく */
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 12px;
}

/* ==========================================================================
    過去のグランプリ　４シーズンの配置
   ========================================================================== */

/* ① 左上 (2025 spring) */
.grandprix-stage .item-top-left { 
    top: 10px !important;     
    left: 20px !important;
    right: auto !important;
    bottom: auto !important;  
}

/* ② 右上 (2025 AW) */
.grandprix-stage .item-top-right { 
    top: 10px !important;     
    right: 20px !important;   /* 💡 ちゃんと右側に配置 */
    left: auto !important;    /* 左からの引っ張りをリセット */
    bottom: auto !important;
}

/* ③ 左下 (2025 final) */
.grandprix-stage .item-bottom-left { 
    bottom: 10px !important;  
    left: 20px !important; 
    top: auto !important;     
    right: auto !important;
}

/* ④ 右下 (2026 spring) */
.grandprix-stage .item-bottom-right { 
    bottom: 10px !important;  
    right: 20px !important;   /* 💡 ちゃんと右側に配置 */
    left: auto !important;    /* 左からの引っ張りをリセット */
    top: auto !important;
}
/* ==========================================================================
    📊過去のグランプリ 白いステップ線（大きくなった箱に合わせて位置を最適化）
   ========================================================================== */
.podium-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    height: 180px; /* 💡 高さを160pxに広げてバウムをのびのび配置 */
    position: relative;
    padding-bottom: 25px; 
}

/* 各順位の部屋 */
.podium-rank {
    width: 32%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible !important;
    z-index: 1; 
    transition: z-index 0.1s step-start;
    
}

.rank-1st { order: 2; width: 40%; } 
.rank-2nd { order: 1; }
.rank-3rd { order: 3; }

/* 🌟【バウム接地位置の微調整】白線の真上にピタッと着地させる数値 */
.rank-1st .cake-container { transform: translateY(-42px); z-index: 10; } 
.rank-2nd .cake-container { transform: translateY(-20px); }              
.rank-3rd .cake-container { transform: translateY(-10px); }                

/* 🥇 ホバー内の順位バッジ（「1」「2」「3」の丸いバッジ） */
.rank-badge {
    font-size: 11px !important;    /* 👈 ここの数値を大きくするとバッジの文字が大きくなります */
    background: #ffffff !important;
    color: #7A121A !important;
    padding: 2px 6px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important; /* 👈 バッジと商品名の間の隙間の広さです */
}

/* 📝 ホバー内の商品名・企業名（「兵庫県 / ○○バウム」などのテキスト） */
.cake-name {
    font-size: 12px !important;    /* 👈 ここを 13px や 14px にすると、商品名がさらに大きくなります！ */
    color: #ffffff !important;
    line-height: 1.4 !important;   /* 👈 2行になったときの行の間隔（高密度にするなら 1.2 などに） */
    font-weight: 700 !important;
    text-align: center !important;
    transform: none !important;
    width: 100% !important;
    word-break: break-all;
}

/* 💡 白い階段状のステップ線（サイズアップに合わせて高さを調整） */
.podium-rank::after {
    position: absolute;
    left: 0;
    width: 100%;
    background: transparent !important; 
    border: none;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px; /* 💡 数字も読みやすく拡大 */
}

/* 🥈 2位の台座線 */
.rank-2nd::after {
    content: "2";
    bottom: -15px;
    height: 30px;
    border-top: 1.5px solid rgba(255, 255, 255, 0.5);   
    border-right: 1px solid rgba(255, 255, 255, 0.5); 
    padding-top: 2px;
}

/* 🥇 1位の台座線 */
.rank-1st::after {
    content: "1";
    bottom: -15px;
    height: 50px;
    border-top: 1.5px solid #ffffff; 
    border-left: 2px solid rgb(255, 255, 255); 
    border-right: 2px solid rgb(255, 255, 255); 
    font-size: 14px; /* 💡 1位の数字を大きく */
    color: #ffffff;
    padding-top: 2px;
}

/* ==========================================================================
    🧱 3位の台座・線（本体の箱の設定）
   ========================================================================== */
.rank-3rd {
    position: relative !important;
    /* 💡 今かかっている高さや枠線の指定はここに残す */
}

/* ==========================================================================
    🎨 【前半の修正】3位の台座線（線を描くことだけに集中させる）
   ========================================================================== */
.rank-3rd::before {
    content: "" !important; /* 🌟 ここは空っぽにする（文字は入れない！） */
    position: absolute !important;
    bottom: -10px !important;
    left: 0 !important;
    width: 100% !important;
    height: 10px !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.5) !important;  
    border-left: 1px solid rgba(255, 255, 255, 0.5) !important; 
    box-sizing: border-box !important;
}

/* ==========================================================================
    🔢表彰台 【後半の修正】数字の「3」だけ（線とは別レイヤーで自由に動かす）
   ========================================================================== */
.rank-3rd::after {
    content: "3" !important; /* 🌟 文字だけをここに入れる */
    position: absolute !important;
    
    /* 🌟【文字位置の調整】このマイナスの数字を大きくすれば、線は動かずに「3」だけが下がります！ */
    bottom: -25px !important; 
    
    left: 50% !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    
    /* ⚠️ ここには border や padding などの「線」の命令は一切書かない！ */
    color: #FFFFFF; /* 文字色（必要なら） */
    font-size: 14px; /* 文字サイズ（必要なら） */
}

/* ==========================================================================
    🍩 過去のグランプリ　バウム画像 ＆ ホバーマスク（箱をぶち抜いて大きくはみ出す魔法！）
   ========================================================================== */
/* 親のボックス（.result-item）のはみ出し制限を解除するお守り */
.grandprix-stage .result-item {
    overflow: visible !important; /* 💡 絶対に中身を隠さない設定に変更 */
}

.grandprix-stage .podium-rank:hover {
    z-index: 50 !important;
}

.cake-container {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: visible !important; /* 💡 ここもはみ出しを許可！ */
    z-index: 10 !important;
    
}

/* 通常時のバウムクーヘン画像 */
.cake-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* マウスを乗せたときに、バウムも少し拡大 */
.cake-container:hover img {
    transform: scale(1.05);
}

/* ==========================================================================
    💥award 過去のグランプリ　白線を絶対に下に沈めて透けさせない設定
   ========================================================================== */
/* 通常時のバウムクーヘン画像の部屋のはみ出し制限をクリア */
.cake-container {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: visible !important; 
    
    /* 🌟【ここを追加！】
        バウムとホバーが入っているこの部屋自体に z-index: 10 を指定して、
       床に描いてある白線（::after）よりも手前のレイヤーに引っ張り出します！ */
    z-index: 10 !important; 
}

/* 🌟 ホバー時に現れる赤い文字マスク（設定アップデート） */
.cake-overlay {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    
    width: 190px !important;
    height: 140px !important;
    
    transform: translate(-50%, -50%) scale(0.8) !important;
    
    /* 💡 背景色を「完全に不透明な赤（rgbaの1）」にして、後ろの白線を1ミリも通さない壁にします！ */
    background: rgba(50, 4, 8, 1.0) !important; 
    
    border: 2px solid rgba(255, 255, 255, 0.3); 
    border-radius: 12px !important; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.6) !important; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px !important;
    box-sizing: border-box;
    
    /* 通常時は非表示 */
    opacity: 0 !important; 
    pointer-events: none;
    
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    
    /* 🌟【ここが最重要！】
        同じ部屋の白線やバウム画像よりも、圧倒的に高い数値を指定して
       最前面にワープさせます */
    z-index: 100 !important; 
}

/* ホバー時の挙動（キープ） */
.cake-container:hover .cake-overlay {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important; 
    pointer-events: auto;
}

/* ==========================================================================
    ✉️ PC版：インフォメーション（横幅をスリムに戻して、スマホ版とも喧嘩させない！）
   ========================================================================== */

.info-section {
    width: 150%;
    box-sizing: border-box;

    padding-top: 20px !important; 
    
    padding-bottom: -150px !important; 
    padding-left: 0 !important;
    padding-right: 0 !important;

    margin-top: 20px !important; 
}

.info-flex-container {
    display: flex !important;
    justify-content: space-between !important; 
    align-items: flex-start !important;       
    width: 100% !important;
    
    max-width: 850px !important;              
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important; 
    align-items: flex-start !important;
    padding: 0 !important;                
}

.info-title-sns.ribbon-type2 {
    display: block !important;
    width: 100% !important;
    max-width: 180px !important;    /* 💡 リボンの画像の横幅（100px〜120px程度）に合わせて制限 */
    margin: 0 auto 20px auto !important; /* 💡 左右を auto にして、見出しの塊ごとド真ん中へ！ */
    text-align: center !important;  /* 💡 文字を真ん中に */
    
    /* 🎯 【大修正】ズレの原因になっていた左右の 80px パディングを、
       上下にだけ効くようにギュッと絞ってリセットします！ */
    padding: 12px 0 15px 0 !important; 
    
    /* 🎨 バウム背景の位置とサイズを中央にガチッと固定 */
    background-position: center center !important;
    background-size: contain !important; /* 💡 または 100px auto など、見栄えの良いサイズに */
}

/* ⬅️ 左カラム（ニュース）：全体の58%の幅でのびのび広げる */
.info-column-left {
    display: block !important;
    width: 58% !important;     
}

/* ➡️ 右カラム（SNS）：全体の38%の幅でコンパクトに引き締める */
.info-column-right {
    display: block !important;
    width: 38% !important;     
}

/* 🏢 白い箱たちのデザイン */
.news-box, .sns-box {
    width: 100% !important; 
    background: #ffffff !important;
    border-radius: 16px !important; 
    padding: 30px 24px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important; 
    margin: 0 !important;   
    box-sizing: border-box !important;
}

/* ==========================================================================
    🔔 ニュースエリア内の詳細デザイン（アコーディオン）
   ========================================================================== */
.info-title-news {
    text-align: center;
}

.news-list {
    display: flex !important;
    flex-direction: column !important;
    margin: 30px 0 15px !important; 
    width: 100% !important;
}

.news-item {
    display: flex !important;
    justify-content: space-between;
    flex-direction: column !important; 
    border-bottom: 1px solid #EAEAEA !important; 
    width: 100% !important;
}

.news-item-visible {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    width: 100% !important;
    cursor: pointer;
    gap: 24px;
}

.news-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important; 
    text-align: left !important; 
}

.news-date {
    font-size: 13px !important;
    color: #A0A0A0 !important;
    font-family: monospace !important;
    white-space: nowrap !important; 
}

.news-text {
    font-size: 13px !important;
    color: #333333 !important;
    text-align: left !important;
}

.news-arrow {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #BCBCBC;
    border-right: 2px solid #BCBCBC;
    transform: rotate(45deg); 
    margin-right: 5px;
    flex-shrink: 0; 
    transition: transform 0.3s ease;
}

.news-content {
    max-height: 0;           
    overflow: hidden;        
    transition: max-height 0.3s ease, padding 0.3s ease; 
    padding: 0 10px;
    text-align: left;
}

.news-item.is-open .news-content {
    max-height: 200px;       
    padding: 10px 10px 20px; 
}

.news-item.is-open .news-arrow {
    transform: rotate(135deg) !important; 
}

/* ==========================================================================
    📱 SNSエリア内の詳細デザイン
   ========================================================================== */
.sns-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px; 
    margin-top: 24px;
}

.sns-icons a {
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease; 
}

.sns-icons a:hover {
    transform: scale(1.4); 
    opacity: 0.8;          
    filter: sepia(1) saturate(5) hue-rotate(340deg); 
}

.sns-icons img {
    width: 40px;  
    height: auto;
}


/* ==========================================================================
    🧁 main-footer（絶対に崩れない・なみなみ出現版）
   ========================================================================== */
.main-footer {
    width: 100% !important;
    display: block !important;
    clear: both !important;
    
    /* 💡 ベースはシンプルなピンク一色にします */
    background: #F37D95 !important; 
    
    /* 🌟 ここが超重要！フッターの「上フチ」を擬似要素の基準にする設定 */
    position: relative !important;
    
    /* 💡 なみなみの高さ分、上の余白を少しだけ余裕持たせます */
    padding: 110px 0 30px; 
    color: #FFFFFF;
    box-sizing: border-box;
    margin-top: 50px; 
}

/* 🌟 フッターの上に、CSSだけで描いた「なみなみ帯」をピタッと重ねる魔法 */
.main-footer::before {
    content: "" !important;
    position: absolute !important;
    
    /* 💡 フッターの「一番上」に配置する */
    top: -14px !important; 
    left: 0 !important;
    
    /* 💡 画面の端から端まで100%広げる */
    width: 100% !important;
    
    /* 💡 なみなみの高さ（ここを15pxにします） */
    height: 15px !important;
    
    /* 💡 白い背景（または上のセクションの背景）からピンクの丸を削り出す魔法のグラデーション */
    background-image: radial-gradient(circle at 10px 15px, #F37D95 10px, transparent 11px) !important;
    
    /* 💡 なみなみの横幅（20pxごとに波が1個ループします） */
    background-size: 20px 15px !important;
    background-repeat: repeat-x !important;
    
    z-index: 1 !important;
}

/* 📦 内側のコンテンツを囲むコンテナ */
.footer-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;                 /* 💡 ロゴとナビゲーションの間のすき間 */
    max-width: 1100px;         /* サイト全体の共通幅に合わせる */
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* 🖼️ ロゴボックスの設定 */
.footer-logo-box {
    flex-shrink: 0;
    margin-top: 10px;          /* カンプの高さに合わせた微調整 */
}

.footer-logo-box img {
    width: 140px;              /* カンプのロゴのサイズ感に調整 */
    height: auto;
}

/* ==========================================================================
    🗺️ footer-nav（リンクエリアの3カラム横並び）
   ========================================================================== */
.footer-nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 60px;                 /* 💡 1列目、2列目、3列目の間の絶妙な余白 */
    flex-grow: 1;
}

/* 📋 各リンクの列（共通ルール） */
.footer-links-col {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;                 /* 💡 箇条書きリンクの上下の心地いい間隔 */
}

.footer-links-col a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 16px;
    white-space: nowrap;

    transition: color 0.2s ease; 
}

/* 🌟 フッターの文字にホバーしたときの設定 */
.footer-links-col a:hover {
    color: #ae4b5f !important; /* 💡 マウスを乗せたときに、可愛い薄ピンクに変わります（好みの色に変えてもOK！） */
}

/* 💡 カンプの箇条書きの「白い丸（・）」を擬似要素で再現 */
.footer-links-col li {
    position: relative;
    padding-left: 20px;        /* 丸の分の左余白 */
}

.footer-links-col li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;                /* 白い丸のサイズ */
    height: 8px;
    background-color: #FFFFFF;
    border-radius: 50%;        /* 綺麗な正円にする */
}

/* ==========================================================================
    📊 footer【右側】ユーハイムHP / THEO、縦線、SNSアイコンのグループ
   ========================================================================== */
.footer-links-col-right-group {
    position: relative;
    padding-left: 60px;        /* 💡 左側の縦の区切り線の分の余白 */
    display: flex;
    flex-direction: column;
    gap: 45px;                 /* リンクとSNSアイコンの上下のすき間 */
}

/* 🌟 カンプにある「キレイな白い縦の区切り線」を爆誕させる魔法 */
.footer-links-col-right-group::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;                /* 線の太さ */
    height: 100%;              /* 列全体の高さに合わせる */
    background-color: rgba(255, 255, 255, 0.6); /* ほんのり透ける上品な白線 */
}

/* 🔗 右側のスペシャルリンク（ユーハイム等の列は「白い丸」を消す） */
.special-links li {
    padding-left: 0;
}
.special-links li::before {
    display: none;             /* 💡 ここだけ白い丸を非表示にする */
}

.special-links a {
    font-weight: bold;         /* カンプ通り少し太字に */
}

/* 📱 フッターのSNSアイコン */
.footer-sns-icons {
    display: flex;
    align-items: center;
    gap: 24px;                 /* アイコン同士の間隔 */
}

.footer-sns-icons a {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-sns-icons a:hover {
    transform: scale(1.3);     /* ホバーでぷくっと */
    opacity: 1;
}

.footer-sns-icons img {
    width: 28px;               /* カンプ通りのサイズ感 */
    height: auto;
}

/* ==========================================================================
    🔒 footer-copyright（一番下のコピーライト）
   ========================================================================== */
.footer-copyright {
    text-align: center;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8); /* 💡 少しだけ不透明度を下げて上品に */
    margin-top: 80px;          /* ナビゲーションとの間の広いすき間 */
    letter-spacing: 0.05em;    /* 文字の間隔を少し広げて美しく */
}


/* ==========================================================================
🕒 Coming Soon ページ専用のスタイル
   ========================================================================== */
.coming-soon-container {
    text-align: center;
    padding: 100px 20px; /* 上下に広めの余白をとって画面中央っぽく見せる */
    min-height: 60vh;    /* フッターが上に上がってこないように高さを確保 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.coming-soon-container h2 {
    font-size: 40px;
    color: var(--color-text);
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.coming-soon-container p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 40px;
}

/* 戻るボタンの装飾（バウム博に合わせた色にしてね！） */
.btn-back-home {
    display: inline-block;
    padding: 12px 32px;
    background-color: #FFEB82; /* ヘッダーとお揃いの黄色 */
    color: var(--color-text);
    font-weight: 700;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-back-home:hover {
    background-color: #ffaf3f; /* ホバーでちょっと濃いオレンジに */
    transform: translateY(-2px);
}

/* ==========================================================================
🌀 バウムクーヘン円形ローディングアニメーション
   ========================================================================== */

/* ローディングの中身全体を中央に寄せる */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 🌀 円形に並べるための親の土台 */
.baum-circle-stage {
    position: relative;
    width: 240px;  /* 円全体の大きさ */
    height: 240px;

    margin-top: 60px;
    margin-bottom: 90px;

    animation: spin-circle 4s infinite linear; 
}

/* 🧱 8個のバウム共通の設定 */
.circle-baum {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55px;  /* バウム1個のサイズ（お好みで調整してね！） */
    height: auto;
    /* 💡 基準点を画像のど真ん中（50%, 50%）にするお守り */
    margin-top: -27.5px; /* widthの半分 */
    margin-left: -27.5px;
}

/* 🌟【超重要】8個のバウムをそれぞれ45度ずつズラして、外側に55px押し出す魔法 */
.circle-baum:nth-child(1) { transform: rotate(0deg) translateY(-110px); }
.circle-baum:nth-child(2) { transform: rotate(45deg) translateY(-110px); }
.circle-baum:nth-child(3) { transform: rotate(90deg) translateY(-110px); }
.circle-baum:nth-child(4) { transform: rotate(135deg) translateY(-110px); }
.circle-baum:nth-child(5) { transform: rotate(180deg) translateY(-110px); }
.circle-baum:nth-child(6) { transform: rotate(225deg) translateY(-110px); }
.circle-baum:nth-child(7) { transform: rotate(270deg) translateY(-110px); }
.circle-baum:nth-child(8) { transform: rotate(315deg) translateY(-110px); }

/* 🌟 グルグル回すアニメーションの命令 */
@keyframes spin-circle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* テキストのフォント調整 */
.loading-text {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: 700;
    color: var(--color-text);
    font-size: 15px;
}

/* ==========================================================================
📢 event.htmlページ専用のスタイル
   ========================================================================== */
.event-detail-section {
    padding-bottom: 80px;
    background-color: #FAF6F0;
    margin-top: -30px;
}

.event-main-visual {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 40px;
    text-align: center;
}

.event-main-visual img {
    width: 100%;
    height: auto;
    border-radius: 0 0 20px 20px; /* 下側だけ少し丸めて可愛く */
}

.event-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.event-container h2 {
    font-size: 36px;
    color: var(--color-text);
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.event-lead {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 50px;
}

/* 各イベント内容のカード */
.event-content-box {
    text-align: left;
    background-color: #ffffff;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.event-content-box h3 {
    font-size: 20px;
    color: #ffaf3f; /* バウム色オレンジ */
    margin-bottom: 15px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.event-content-box p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text);
}

/* ==========================================================================
🎪 event,html グリッド配置＆ボタンアニメーション
========================================================================== */

/* 📦 9個のボタンを綺麗に3列に並べる親の箱 */
.events-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 💡 カンプ通り「均等に3列」並べる魔法 */
    gap: 40px 30px; /* 💡 ボタン同士の間隔（上下に40px、左右に30pxの隙間） */
    max-width: 1000px; /* 全体の横幅（カンプに合わせて調整してね） */
    margin: 0 auto;
    padding: 60px 20px;
}

/* 🎫 ボタン1個全体の共通設定 */
.event-btn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* 🌟【超重要】中身を「上」から順番に詰めて配置する命令に変える！ */
    justify-content: flex-start; 
    
    text-decoration: none;
    text-align: center;
    width: 100%;
    
    /* 💡【高さのお守り】もしグリッド内で全体の高さがズレるなら、
       ボタン自体の高さを100%にして箱のサイズを揃えてあげます */
    height: 100%; 

    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

/* ✍️ イベントセクションの導入リード文 */
.events-section-lead {
    text-align: center;         /* 🌟 文字を完全に「真ん中寄せ」にする魔法 */
    font-family: 'Zen Maru Gothic', sans-serif; /* お揃いの丸ゴシック */
    font-size: 15px;            /* 💡 読みやすいすっきりしたサイズ（カンプに合わせてね） */
    color: var(--color-text);   /* ベースの文字色 */
    line-height: 1.8;           /* 💡 行間を広めにとって、3行の文章をゆったり読ませる */
    letter-spacing: 0.05em;     /* ほんの少し文字の間隔をあけて洗練された印象に */
    
    /* 📐 周りとの余白調整 */
    margin-top: 25px;           /* 💡 上のリボンタイトルとの間の距離 */
    margin-bottom: 45px;        /* 💡 下の9個のバウムグリッドとの間の距離 */
}

/* 🌀 イラストとフレームが重なる二重構造の維持 */
.baum-frame-wrapper {
    position: relative;
    width: 160px;  
    height: 160px;
    margin: 0 auto 15px !important; /* 💡 まずバウムと見出し(h3)の距離を15pxに固定 */
}

.slider-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* フレームを上にする */
}

.slider-photo {
    position: absolute;
    top: 10px; /* フレームの内側に少し収まるように微調整（数字は直してね） */
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}

/* ✍️ ボタンの下のテキスト装飾 */
.event-btn-txt {
    width: 100%;
    margin: 0 auto;
}

/* ✍️ イベント名（h3） */
.event-btn-txt h3 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 16px;
    color: var(--color-text);
    margin: 0 0 8px 0 !important; 
    line-height: 1.4;

    /* 🌟【ここを追加！】アンダーラインの魔法 */
    display: inline-block;        /* 💡 線の長さを「文字の長さ」にぴったり合わせる設定 */
    border-bottom: 3px solid #ffaf3f; /* 💡 線の太さ（3px）と種類（一本線）とお揃いのオレンジ色 */
    padding-bottom: 4px;
}

/* 🌟【新しく上書き】追加した一言テキストのスタイル */
.event-btn-copy-txt {
    font-size: 13px;             /* 💡 ちょっと小さめの可愛いサイズ */
    color: var(--color-text);              /* 💡 文字色は好みに合わせて調整してね */
    line-height: 1.5;
    margin: 0 0 10px 0 !important; /* 💡 この一言テキストの下に10pxの余白を固定 */
    font-weight: 500;
}

/* ✍️ 一番下の「タップして詳細を見る」 */
/* ✍️ 一番下の「タップして詳細を見る」 */
.event-btn-item .event-btn-more {
    font-size: 15px;
    color: #ffaf3f !important; /* 🌟 頭に親のクラス名をつけて、後ろに !important を追加！ */
    font-weight: bold;
    margin: 0 !important;
}

/* ==========================================================================
event-html-btn-ホバー（タップ）アニメーション
========================================================================== */
.event-btn-item:hover {
    /* 🌟 マウスを載せたら、少し上にフワッと浮き上がりながら「1.05倍」にコミカルに大きく弾みます！ */
    transform: translateY(-8px) scale(1.05);
    
    /* 💡 ほんのり明るくして「ボタン感」を演出 */
    filter: brightness(1.03); 
}

/* スマホ等でタップした瞬間、ちょっと沈むリアルなボタン演出 */
.event-btn-item:active {
    transform: translateY(-2px) scale(0.98);
}

/* ==========================================================================
⚙️ ポップアップ詳細（モーダル）のスタイル
========================================================================== */

/* 画面全体を覆う暗い背景（初期状態は透明で隠す） */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 🌟 JSでこのクラスがついたらフワッと出現 */
.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    z-index: 99999;
    pointer-events: auto;
}

/* 真ん中に出てくる白い詳細ウィンドウ */
.modal-window {
    background-color: #FAF6F0; /* サイトのお揃いクリーム色 */
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    padding: 40px 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    /* ちょっと下から上に浮き上がるアニメーション */
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.modal-overlay.is-open .modal-window {
    transform: translateY(0);
}

/* ❌ 閉じるボタン */
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    color: var(--color-text);
    cursor: pointer;
}

/* 中身のレイアウト */
.modal-content {
    text-align: center;
}
.modal-baum-frame img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}
.modal-content h2 {
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--color-text);
}
.modal-desc {
    font-size: 15px;
    line-height: 1.8;
    text-align: center;
    color: var(--color-text);
}

/* ==========================================================================
    🎪 モーダル内：外部リンクアクセス
   ========================================================================== */
.ext-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* 文字と矢印の間の隙間 */
    margin-top: 20px;
    padding: 10px 24px;
    background-color: #ffffff; /* ナビバーに合わせた白ベース */
    color: #4A3B32; /* サイト全体のメインの文字色 */
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border: 2px solid #4A3B32; /* 枠線をつけてボタン感をアップ */
    border-radius: 50px; /* ナビバーの雰囲気に合わせた丸み */
    position: relative;
    transition: all 0.3s ease; /* ホバー時にふわっと動かすお守り */
    cursor: pointer;
}

/* 🎯 アンダーラインみたいな右矢印（→）を疑似要素で追加 */
.ext-link-btn::after {
    content: "→";
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    transition: transform 0.3s ease; /* 矢印だけを少し動かすための設定 */
}

/* ✨ ナビバーと同じ感じのホバー効果（背景色を反転させて、矢印をちょっと右に動かす） */
.ext-link-btn:hover {
    background-color: #4A3B32; /* ナビバーのホバーに合わせた濃い茶色 */
    color: #ffffff; /* 文字を白抜きにする */
}

/* 🔥 ホバーした時に、矢印だけがピョコッと右にスライドする可愛い演出 */
.ext-link-btn:hover::after {
    transform: translateX(4px);
}

/* ==========================================================================
⚙️ event,html side-baum
========================================================================== */

/* 📦 親のセクションを基準点にする */
.events-list-section {
    position: relative; /* 🌟 これが無いとバウムがどっか行っちゃうので必須！ */
    overflow: hidden;   /* 💡 画面の横スクロールを防ぐお守り */
    padding-top: 60px;
}


/* 共通設定 */
.events-list-section .side-decoration {
    position: absolute;
    top: -1500px;
    bottom: 0;
    width: 45px !important;       /* 💡 カンプに合わせたミニバウムの横幅（調整してね） */
    z-index: 1;
    pointer-events: none;
    background-repeat: repeat-y;  /* 🌟 縦にずらーっとリピートさせる魔法 */
    background-size: 100% auto;

    animation: flow-baum 20s linear infinite;
}

/* ⬅️ 左側はそのまま下に流す */
.events-list-section .line-left { 
    left: 20px !important; 
    background-image: url('../img/next-event/next-mini-baum1.webp') !important; 
}

/* ➡️ 右側はちょっと変化をつけて逆向き（上）に流すとおしゃれ！ */
.events-list-section .line-right { 
    right: 20px !important; 
    background-image: url('../img/next-event/next-mini-baum2.webp') !important; 
    animation: flow-baum-reverse 20s linear infinite; /* 🌟 逆方向アニメーション */
}

/* ==========================================================================
    🎬 背景が滑らかにループして流れるアニメーションの命令
   ========================================================================== */
@keyframes flow-baum {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 500px; /* 💡 画像の高さ分だけ下にスライドさせてループさせる */
    }
}

@keyframes flow-baum-reverse {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -500px; /* 💡 上に向かって流れる */
    }
}

/* ==========================================================================
    🚩 event.html専用：左右のガーランドサイズ修正版
   ========================================================================== */

/* 📦 3つのパーツを横一列に並べて真ん中に集める箱 */
.event-title-wrapper {
    display: flex !important;
    justify-content: center !important; /* 🌟 左右・リボンをすべて中央に集める */
    align-items: center !important;     /* 🌟 上下の高さを中央で揃える */
    gap: 25px !important;               /* 💡 リボンと旗の間のスキマ */
    
    margin: 10px auto 20px !important;  /* 📐 上下のセクションとの絶妙な隙間 */
    width: 100% !important;
}

/* ⬅️ 左側のガーランド調整 */
.event-title-wrapper .garland-left {
    width: 230px !important;   
    height: auto !important;
    pointer-events: none;
    
    /* 🌟【追加】もし左側が見えないなら、画像をパタッと反転させてみる！ */
    transform: scaleX(-1) !important; 
}

/* ➡️ 右側のガーランド調整 */
.event-title-wrapper .garland-right {
    width: 230px !important;   
    height: auto !important;
    pointer-events: none;
    
    /* 🌟 左側を反転させるので、右側は逆にそのまま（transformなし）にするか、
       もしこれで左右が逆転したら、こっちに transform: scaleX(-1) !important; をつけてね！ */
}

/* リボンタイトルの余計なマージンをリセット */
.event-title-wrapper .ribbon-title {
    margin: 0 !important;
    flex-shrink: 0;            /* 💡 画面が狭くなってもリボンが潰れないようにするお守り */
}


/* 🚫 画面の右側にはみ出たバグ要素を強制的に見えなくして、横スクロールを絶対阻止する呪文 */
html, body {
    overflow-x: hidden !important;
}






/* ==========================================================================
    📱 スマホ用（画面幅が768px以下になったら『この箱の中身』だけが発動！）
   ========================================================================== */
@media screen and (max-width: 768px) {
    
    /* 📦 1. まずは親コンテナを縦並びに変える */
    .section-container {
        flex-direction: column !important; 
        align-items: center !important;    
    }

    /* ⬅️ ➡️ 2. 左右の箱をどっちも画面幅いっぱいに広げる */
    .left-content-wrapper,
    .right-content-wrapper {
        width: 100% !important; /* 横幅いっぱい（スマホサイズ）にする */
        left: 0 !important;      /* PC版で横にズラしてた設定をリセット！ */
        margin: 0 auto !important;
    }

    /* スマホ版では左右の飾りバウムを非表示にする */
    .side-baum-area::before,
    .side-baum-area::after {
        display: none !important;
    }

    /* ==========================================================================
        🎀 共通リボンタイトルのスマホ対応
       ========================================================================== */
    .ribbon-title {
        font-size: 16px !important; 
        padding: 8px 40px 24px 40px !important; 
        margin-bottom: 30px !important; 
    }

    /* ==========================================================================
        🍩 タイプ2のリボンタイトル
       ========================================================================== */
    .ribbon-type2 {
        background-size: 80px auto !important; 
        padding: 8px 40px 15px 40px !important; 
    }

    /* ==========================================================================
        📱 スマホ用 nav
       ========================================================================== */
    /* 1. PC用の横長メニューを完全に消す */
    .pc-nav {
        display: none !important;
    }

    /* 2. ヘッダーをスマホサイズに整える */
    header {
        padding: 10px 20px !important;
        height: 70px !important;
        background-color: #FFEB82 !important; 
    }

    /* 3. ロゴ（h1）を画面の「ド真ん中」に配置 */
    header h1 {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; 
        margin: 0 !important;
    }

    header h1 img {
        height: 50px !important; 
        width: auto !important;
    }

    /* 4. ハンバーガーボタンの位置をスマホの右端に固定 */
    .hamburger-btn {
        position: absolute !important;
        right: 20px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* 5. メニューが開いたとき（.active）の×ボタンの位置 */
    .hamburger-btn.active {
        position: fixed !important;
        top: 30px !important;
        right: 20px !important;
    } 

    /* ==========================================================================
        📱📸 メインビジュアルスライダーのスマホ対応
       ========================================================================== */
    .key-visual-slider {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-bottom: 20px !important; 
    }

    .slider-area img {
        width: 100vw !important;
        min-width: 100vw !important;
        height: 300px !important; 
        object-fit: cover !important; 
    }

    /* ==========================================================================
        📱🍩 ミニバウム流れるライン（上）
       ========================================================================== */
    .about-mini-baum-top {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    height: 50px !important; 
    margin-top: -75px !important; 
    margin-bottom: 25px !important;
    background-size: auto 50px !important; 
    
    /* 🌟 左へ滑らかに流れる（25秒）。ここを15sにすると速くなり、40sにすると遅くなります！ */
    animation: baum-flow-left-sp 40
     linear infinite !important; 
}

    /* ==========================================================================
        📱📖 Aboutセクションのスマホ対応
       ========================================================================== */
    .about {
        max-width: 100% !important;
        padding: 40px 0 !important; 
    }

    /* 🏷️ タイトルをスマホサイズに＆絶対に1行でスマートに収める */
    .about .section-title.ribbon-title {
        font-size: clamp(14px, 4.5vw, 22px) !important; 
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important; 
        
        width: 90% !important;
        max-width: 340px !important; 
        margin: 0 auto 30px auto !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 📝 本文の文字サイズと行間をスマホ用にギュッと調整 */
    .about p {
        font-size: 13px !important;
        line-height: 2.2 !important; 
        max-width: 100% !important;
        margin-bottom: 40px !important;
        padding: 0 20px !important; 
        position: relative !important;
        z-index: 10 !important; 
    }

    /* 🍩 【左の巨大背景バウム】スマホでは画面いっぱいに広げる */
    .about::before {
        width: 100% !important; 
        height: 100% !important; 
        left: 38% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; 
        opacity: 0.1 !important; 
        z-index: 1 !important;
        background-size: cover !important;

        background-size: contain !important; /* 💡 coverからcontainに変えることで、画像が切れるのを防いで枠内に最大表示する！ */
        background-repeat: no-repeat !important; /* 💡 念のため画像がリピートしないように */
        background-position: center !important;  /* 💡 ど真ん中に配置 */
    }

    /* 📸 【左下の丸写真1】 */
    .about-1::before {
        width: 120px !important;
        height: 120px !important;
        left: -20px !important; 
        bottom: auto !important;
        top: 10% !important;
        opacity: 0.15 !important; 
        z-index: 2 !important;
    }

    /* 📸 【右上：焼き機の写真2】 */
    .about-1::after {
        width: 110px !important;
        height: 110px !important;
        right: -30px !important; 
        top: 35% !important;
        opacity: 0.15 !important;
        z-index: 2 !important;
    }

    /* 📸 【右真ん中：棒バウムの写真3】 */
    .about-2::after {
        width: 130px !important;
        height: 130px !important;
        left: -40px !important;
        right: auto !important;
        top: 60% !important;
        opacity: 0.15 !important;
        z-index: 2 !important;
    }

    /* 📸 【右下：会場の写真4】 */
    .about-3::after {
        width: 120px !important;
        height: 120px !important;
        right: -20px !important;
        bottom: 5% !important;
        opacity: 0.15 !important;
        z-index: 2 !important;
    }

    /* ==========================================================================
        📱🔙 ミニバウム流れるライン（下）
    ========================================================================== */
    .about-mini-baum-bottom {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    height: 50px !important;
    margin-top: 40px !important;
    margin-bottom: 0 !important;
    background-size: auto 50px !important;
    
    /* 🌟 アニメーション名を loop-about-right に統一！ */
    animation: loop-about-right 1s linear infinite !important; 
}
    /* ==========================================================================
        📱🎪 会場でのイベントセクション スマホ対応
       ========================================================================== */
    .event {
        padding: 30px 0 !important;
        background-image: linear-gradient(
            to bottom, 
            rgba(160, 212, 104, 0.5) 0%, 
            rgba(160, 212, 104, 0.5) 75%, 
            transparent 75%, 
            transparent 100%
        ) !important;
        margin-bottom: 0 !important; /* 💡 念のため !important をつけて確実に効かせる */
    }

    /* 🏷️ タイトル（1行死守） */
    #event .section-title.ribbon-title {
        font-size: clamp(15px, 4.5vw, 22px) !important; 
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
        width: 90% !important;
        max-width: 340px !important;
        margin: 0 auto 20px auto !important;
    }

    /* 🙅‍♀️ スマホ版だけガーランドを完全に非表示 */
    #event .ribbon-title::before,
    #event .ribbon-title::after {
        display: none !important;
    }

    /* 📝 リード文の調整 */
    .event-lead {
        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 0 20px !important;
        margin-bottom: 15px !important;
    }

    
/* 📱 スマホ（768px以下）の時の調整 */
@media screen and (max-width: 768px) {
    .event-swiper {
        max-width: 100vw !important; /* スマホ画面いっぱいはみ出しを許可 */
    }
    
    /* 📦 中のレール：スマホだけスピードを上げてキビキビ動かす！ */
    .event-swiper .swiper-wrapper {
        /* 🌟 ここを「30s」から「12s」に変更してスピードアップ！ */
        animation: flow-event-cards-sp 12s linear infinite !important; 
    }
    
    .event-swiper .swiper-slide {
        width: 200px !important; /* スマホ用に少しだけコンパクトに */
        margin: 0 10px !important;
    }
    
    /* 🌀 スマホ専用の無限ループ命令（名前も競合しないように -sp をつけて分離） */
    @keyframes flow-event-cards-sp {
        0% { 
            transform: translateX(0); 
        }
        100% { 
            /* 💡 カードの幅(200px) + 隙間(10px×2=20px) = 220px の4枚分（-880px）でピタッとループ */
            transform: translateX(-880px); 
        }
    }
}

    /* 🔘 ボタンマージン */
    #event .common-btn-wrapper { 
        margin-top: 10px !important; 
        margin-bottom: 10px !important; 
    }


/* ==========================================================================
        📱🛒 オンラインショップ以降のセクション（EC・ブランド・次回expo）スマホ対応
========================================================================== */
    
    .side-baum-area {
        display: contents !important; /* 💡外枠を空気（存在しないもの）にする魔法の指定 */
        background-image: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --------------------------------------------------------------------------
        スマホ🛒 オンラインショップ（EC）
       -------------------------------------------------------------------------- */
    
    /* 🟦 【超重要！】PC版の強力な.wrapperを力技で黙らせる最強の指定 */
    .side-baum-area + .wrapper,
    div.wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: auto !important;
    }
    
    .EC {
        padding: 3px 0 !important; /* 💡 10pxから20pxにして少しだけ綺麗に余白を持たせる */
        background-size: 100% auto !important;
        background-position: center 42% !important; 
    }
    /* 🏷️ タイトル（1行死守） */
    .EC .section-title.ribbon-title {
        font-size: clamp(15px, 4.5vw, 22px) !important; 
        white-space: nowrap !important;
        width: 90% !important;
        max-width: 340px !important;
        margin: 0 auto 30px auto !important;
    }

    /* 📦 画像が上、文章が下の縦並びにする */
    .EC-content-body {
        display: flex !important;
        flex-direction: column-reverse !important; 
        gap: 20px !important; 
        width: 100% !important;
    }

    /* 📸 上に配置されるカート画像 */
    .EC-img {
        width: 75% !important; 
        max-width: 280px !important;
        margin: 0 auto !important; 
        height: auto !important;
    }

    /* 📝 下に配置される文章 */
    .EC-lead {
        max-width: 100% !important;
        text-align: center !important; 
        margin-left: 0 !important;     
        margin-top: 0 !important;    
        font-size: 14px !important;
        line-height: 1.8 !important;
        padding: 0 20px !important;
        font-weight: 700 !important;
    }

    /* 🔘 「ショップはこちらから」ボタンの位置調整 */
    #EC .common-btn-wrapper.EC-btn {
        margin-top: 78px !important;   /* 💡 マイナスを消して、正の数「30px」でしっかり押し下げる！ */
        margin-bottom: 20px !important; 
        position: relative !important;
        z-index: 20 !important;
        display: flex !important;       /* 中央寄せ */
        justify-content: center !important;
    }

    /* 🔘 ボタンの中のテキスト調整 */
    #EC .common-btn-wrapper.EC-btn .btn-text {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }


    
    /* ==========================================================================
        🎪 参加ブランド一覧セクション（brand-list）スマホ対応
       ========================================================================== */

    #brand-list.brand-list {
        padding: 60px 0 40px !important;    /* 💡 上のパディングをPC版の100pxから10pxに強制リセット！ */
        margin-top: -60px !important;       /* 💡 さらにマイナスマージンで全体を上に50px引っ張り上げる！ */
        
        background-image: url('../img/shop-list/brand-back.png') !important;
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;       
        background-position: center 20% !important; 
    }

    /* 🏷️ タイトル（1行死守） */
    .brand-list .section-title.ribbon-title {
        font-size: clamp(15px, 4.5vw, 22px) !important; 
        white-space: nowrap !important;
        width: 90% !important;
        max-width: 340px !important;
        margin: 0 auto 30px auto !important;
    }

    /* 📦 横並びだった土台を「縦並び」にする */
    .brand-list .section-container {
        display: flex !important;
        flex-direction: column !important; /* 🌟これで上から順に並びます */
        align-items: center !important;    /* 中央寄せ */
        gap: 30px !important;              /* 各エリアの間の隙間 */
        width: 100% !important;
        padding: 0 20px !important;
        margin: 0 auto !important;
    }

    /* ⬅️ 上に配置される260社様の文章エリア */
    .brand-list .left-content-wrapper {
        width: 100% !important; /* 画面幅いっぱい（スマホサイズ）にする */
        text-align: center !important;
        position: relative !important;
        left: 0 !important;      /* 🌟PC版のズラし設定をリセット */
        padding-top: 40px !important; 
        
        margin: 0 auto !important;
    }

    /* 📝 260社様の文章（リード文） */
    .brand-list-text {
        font-size: 14px !important;
        line-height: 1.8 !important; 
        text-align: center !important;
        max-width: 100% !important; 
        margin: 0 auto !important; /* 🌟PC版のネガティブマージンをリセット */
        position: relative !important;
        top: 0 !important;         /* 🌟PC版のズラし設定（top: -18px）をリセット */
        padding: 0 10px !important;
    }


    /* 🔢 「260」の数字をスマホにちょうどいいサイズに */
    .brand-list-text .num-large {
        font-size: 24px !important;       
        font-weight: bold !important;     
    }

    /* 🔘 もっと見るボタンの位置調整 */
    .brand-list .left-content-wrapper .common-btn-wrapper {
        margin-top: 15px !important; /* 文章からちょうどいい距離感にリセット */
        margin-bottom: 15px !important;
    }

    /* ➡️ 下に配置される企業さま募集エリア（地図画像） */
    .brand-list .right-content-wrapper {
        width: 100% !important; /* 画面幅いっぱい（スマホサイズ）にする */
        text-align: center !important;
        position: relative !important;
        right: 0 !important; /* 🌟PC版のズラし設定（right: -50px）をリセット！ */
        margin: 0 auto !important;
    }

    /* 📸 地図案内画像の設定 */
    .brand-list img:not(.btn-bg-img) {
        width: 85% !important; /* スマホ画面で見栄えの良い大きさに */
        max-width: 320px !important;               
        margin: 0 auto 10px auto !important; /* 中央寄せ */
    }

    /* 🔘 地図画像のアニメーションはスマホでも残す（ぷかぷか優しく浮き沈み） */
    .brand-list img[src*="baum-map_3@2x.webp"] {
        animation: puka-puka 3.5s ease-in-out infinite !important;
        display: block !important;
        position: relative !important;
    }

    /* 🔘 下端の「お問い合わせ」ボタンの位置調整 */
    .brand-list .right-content-wrapper .common-btn-wrapper {
        display: block !important;
        top: 0 !important; 
        left: 0 !important; /* 🌟PC版のズラし設定（left: 200px）をリセット */
        margin: 15px auto 0 auto !important; 
    }

    /* ==========================================================================
        🤍 次回のバウムクーヘン博覧会（next-expo）スマホ対応決定版
       ========================================================================== */
    .next-expo {
        padding: 40px 0 50px !important;
    }

    /* 🏷️ タイトル（1行死守＆PC版のh1設定をスマホ用に綺麗に上書き） */
    .next-expo-title .section-title.ribbon-title {
        font-size: clamp(15px, 4.5vw, 22px) !important; 
        white-space: nowrap !important;
        width: 90% !important;
        max-width: 340px !important;
        margin: 0 auto 30px auto !important;
    }
    .next-expo-title h1 {
        font-size: inherit !important; /* ribbon-titleのサイズに合わせる */
        color: inherit !important;
    }

    /* 📦 左右の2カラムを「中央寄せの縦一列」に変える */
    .next-expo .section-container {
        display: flex !important;
        flex-direction: column !important; /* 縦並び */
        align-items: center !important;    /* 中央寄せ */
        gap: 24px !important;              /* 各要素の間の縦の隙間 */
        width: 100% !important;
        padding: 0 20px !important;
    }

    /* ⬅️ 上に配置される名古屋店の詳細丸箱エリア */
    .next-expo .left-content-wrapper {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 🍩 巨大丸バウムの箱（内側のパディングを限界まで削る！） */
    .event-container {
        width: 290px !important;  
        height: 290px !important; 
        margin: 0 auto !important;
        padding: 5px !important;    /* 💡 25px から 「5px」 にガッツリ減らして、文字が広がるスペースを作る！ */
        background-size: contain !important; 
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* ✍️ 丸バウムの中の文字たち（文字サイズを限界までアップ！） */
    .event-container p, .event-container h3 {
        line-height: 1.3 !important; /* 少しだけ行間にゆとりを持たせる */
    }

    .event-sub-title { 
        font-size: 15px !important;  /* 💡 13px ➔ 15px */
        margin-bottom: 6px !important; 
    }

    .event-sub-title-2 { 
        font-size: 32px !important;  /* 💡 24px ➔ 32px に大増量！「松坂屋名古屋店」を主役に！ */
        margin-bottom: 10px !important; 
        font-weight: bold !important;
    }

    .event-date { 
        font-size: 20px !important;  /* 💡 16px ➔ 20px */
        margin-bottom: 6px !important; 
        font-weight: bold !important;
    }

    .event-time { 
        font-size: 18px !important;  /* 💡 16px ➔ 18px */
        margin-bottom: 4px !important; 
    }

    .event-time-2 { 
        font-size: 15px !important;  /* 💡 13px ➔ 15px */
        margin-bottom: 14px !important; 
    }

    .event-attention { 
        font-size: 11px !important;  /* 💡 10px ➔ 11px */
        line-height: 1.4 !important; 
        max-width: 240px !important; 
    }

    .event-swiper { 
        padding: 20px 0 50px !important; 
    }
    
    /* 📦 スライド1枚ずつの箱の横幅を、画面幅の80〜85%（1枚ど真ん中サイズ）に爆上げ！ */
    .event-swiper .swiper-slide { 
        width: 85vw !important; /* 💡 画面横幅の85%を占領させて、左右に次のカードがチラ見えする上品なサイズ */
        max-width: 320px !important; /* 大きくなりすぎ防止の安全弁 */
        margin: 0 10px !important; 
    }

    /* ==========================================================================
       📱🎪 イベントセクション限定：フレームとアイコン写真自体のサイズを爆デカ化！
       ========================================================================== */
    /* 1. 親の箱のサイズ */
    .event .baum-frame-wrapper,
    html body .event .baum-frame-wrapper { 
        width: 260px !important;  
        height: 260px !important; 
        margin: 0 auto 20px auto !important;
    }

    /* 2. 🎨 【上層】もこもこバウムフレーム（写真を上に隠さないように z-index を 2 に！） */
    .event .baum-frame-wrapper .slider-frame,
    html body .event .baum-frame-wrapper .slider-frame {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        object-fit: contain !important;
        
        z-index: 1 !important; 
    }

    /* 3. 📸 【下層】中の丸写真（フレームの下に潜り込ませるために z-index を 1 に！） */
    .event .baum-frame-wrapper .slider-photo,
    html body .event .baum-frame-wrapper .slider-photo {
        width: 78% !important;  
        height: 78% !important;
        top: 52% !important;    
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        
        /* 🔴 ここを「1」にして後ろ側に回します！ 🔴 */
        z-index: 2 !important; 
    }
    
    /* 🌀 バウムフレームと写真を包む丸箱も、スライドいっぱいに大拡大！ */
    .baum-frame-wrapper { 
        width: 260px !important;  /* 💡 180px から 260px に超拡大！ */
        height: 260px !important; /* 💡 縦横お揃いで正円をキープ */
        margin-bottom: 20px !important;
    }

    /* 📸 中のアイコン写真の重なり位置も綺麗にフィットさせる */
    .baum-frame-wrapper .slider-photo {
        width: 78% !important;
        height: 78% !important;
        top: 52% !important;
        left: 50% !important;
    }

    /* ➡️ 下に配置される右側エリア（ボタン・マップの塊） */
    .next-expo .right-content-wrapper {
        width: 100% !important;
        max-width: 290px !important; /* ボタンとマップの横幅を290pxに美しく統一 */
        text-align: center !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important; /* 余白は各パーツのマージンで制御するため一旦0に */
    }

    /* 🔘 共通クラスが持っているPC版の「高さ95px」の呪いを完全解除 */
    .sns-link, .event-map, .bland-list-link, .-button {
        height: auto !important; 
        border-radius: 0;
        overflow: visible;
    }

    /* 🎫 ボタン共通のスマホ上書き設定 */
    .right-content-wrapper .next-btn {
        width: 100% !important;
        max-width: 290px !important;          
        height: 72px !important; /* PC版の可愛い背景サイズを死守 */
        font-size: 15px !important;
        margin: 10px 0 !important; /* スマホ用にボタン上下の隙間を少し詰める */
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* 📝 インスタボタン内の小さな補足文字 */
    .right-content-wrapper .next-btn .btn-sub {
        font-size: 12px !important; 
    }

    /* 🗺️ Googleマップのスマホサイズ化（PC版の競合をすべてシャットアウト） */
    .right-content-wrapper .event-map {
        width: 100% !important;
        max-width: 290px !important; /* ボタンの横幅と1ミリのズレもなく揃える */
        height: 220px !important;    /* スマホで見やすいジャストな高さ */
        margin: 10px 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .right-content-wrapper .event-map iframe {
        width: 100% !important;
        height: 100% !important; /* 親の220pxいっぱいに広げる */
        border-radius: 12px !important;
    }

    /* ==========================================================================
        🗳️ バウムクーヘン総選挙（award）スマホ対応（ロゴ➔バウム➔テキスト版）
       ========================================================================== */
    .award {
        padding: 50px 0 !important;
    }

    /* 📦 大元の3カラムコンテナを縦並びに */
    .award .three-column-container {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        gap: 20px !important; /* スマホで窮屈にならないように少し広げたで！ */
        width: 100% !important;
        padding: 0 20px !important;
    }

    /* 🔄 【るんるん縦並び順調整】
       ロゴ → 1番大きいバウム → 3つ重なりバウム → メッセージ の美しい縦流れ！ */
    .column-center-text { order: 1 !important; width: 100% !important; } /* 親箱は1番上 */
    .column-left-img { order: 2 !important; }   /* 💡 1番大きいバウムをロゴのすぐ下に！ */
    .column-right-img { order: 3 !important; }  /* 💡 3つの重なりバウムをその次に！ */

    /* --------------------------------------------------------------------------
        🏛️ ロゴとメッセージの調整
       -------------------------------------------------------------------------- */
    .award .column-center-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        max-width: 340px !important;
        margin-top: 0 !important;
    }

    /* 👑 ロゴは中央の1番上 */
    .award .award-logo {
        order: 1 !important;
        max-width: 260px !important; 
        margin-bottom: 10px !important;
    }

    /* ✍️ メッセージはバウムの下（1番最後）に配置 */
    .award .column-center-text p {
        order: 4 !important; /* 💡 バウムたちのさらに下に配置するために4に！ */
        font-size: 13px !important;
        line-height: 1.8 !important;
        margin: 25px auto 0 auto !important;
        padding: 0 10px !important;
        text-align: center !important;
        width: 100% !important;
    }
    .award .column-center-text p br {
        display: block !important; /* 👈 無視されていた<br>を、強制的に「改行（ブロック）」として復活させる！ */
    }

    /* --------------------------------------------------------------------------
        🍩 【主役：1番上の大きなバウム】を少し左に寄せる！
       -------------------------------------------------------------------------- */
    .award .column-left-img {
        width: 100% !important;
        max-width: 130px !important; 
        position: relative !important;
        /* 🎯 leftをマイナスにして、主役を左側にひょいっと寄せる！ */
        left: -30px !important;  /* 💡 画面を見ながら「-20px」や「-40px」に微調整してね */
        margin: 15px auto !important;
        top: 1px;
    }

    /* --------------------------------------------------------------------------
        🍩 【下3つのバウム】を右・左・右に散らして、綺麗なジグザグを作る！
       -------------------------------------------------------------------------- */
    .award .column-right-img {
        width: 100% !important;
        max-width: 340px !important; 
        height: 160px !important; /* 💡 縦のジグザグの幅を出すために少し高さを広げたで */
        margin: 10px auto !important;
        position: relative !important;
    }

    /* 🛠️ 4つのバウムが「左上➔右上➔左下➔右下」で完璧なギザギザになる黄金比率！ */
    
    /* 👉 2番目（3つの中の右上の子：黒っぽいエイトコーヒー） */
    .award .column-right-img img:nth-child(4) { 
        width: 100px !important;    /* 💡 サイズも中くらいにしてバランスをとる */
        height: auto !important;
        top: -70px !important;      /* 💡 主役が左に寄った分、こいつを右上の高い位置に配置！ */
        right: 15px !important;     
        left: auto !important; 
    } 

    /* 👈 3番目（3つの中の左下の子：茶色い丸バウム） */
    .award .column-right-img img:nth-child(1) { 
        width: 100px !important;    
        height: auto !important;
        top: -10px !important;       /* 💡 1つ目の右上より少し下げて左側に置く */
        left: 26px !important;      /* 💡 左に寄せてジグザグを強調！ */
    } 
    
    /* 👉 4番目（3つの中の真ん中下の子：ギザギザバウムを右下に流す） */
    .award .column-right-img img:nth-child(3) { 
        width: 130px !important;     
        height: auto !important;
        top: 26px !important;   /* 💡 1番下（右寄り）にドロップ */
        left: auto !important;
        right: 60px !important;     /* 💡 センターじゃなくて、少し右に寄せることで完璧なジグザグの終点にする！ */
        transform: rotate(12deg) !important; /* 角度もちょっとつけてるんるん感を出す */
    }

    /* ✨ 左右のキラキラエフェクトも復活！ */
    .award .column-left-img img[alt*="きらきら"],
    .award .column-right-img img[alt*="きらきら"] {
        width: 110px !important; 
        opacity: 0.6 !important;
    }
    

    /* ==========================================================================
        🗳️ バウムクーヘン総選挙の楽しみ方（award-how-to）スマホ対応（縦並び版）
       ========================================================================== */
    .award-how-to {
        padding: 40px 0 50px !important; /* 上下の余白をスマホ用に少しコンパクトに */
    }


    /* 🏷️ タイトル（About等と揃えて1行死守！） */
    .award-how-to .section-title.ribbon-title {
        font-size: clamp(14px, 4.2vw, 22px) !important; /* 文字数が多いので最小値を14pxに安全マージン */
        white-space: nowrap !important;
        width: 92% !important;
        max-width: 340px !important;
        margin: 0 auto 20px auto !important;
    }

    /* 📦 4並びの横幅コンテナを「中央寄せの縦一列」に変える */
    .award-how-to .how-to-flex-container {
        display: flex !important;
        flex-direction: column !important; /* 🌟縦並びに変更 */
        align-items: center !important;    /* 中央寄せ */
        gap: 45px !important;              /* 💡ステップ同士の縦の隙間をしっかり空ける */
        width: 100% !important;
        max-width: 100% !important;
        margin: 30px auto 0 !important;
        padding: 0 20px !important;
    }

    /* 📦 ステップ1つ1つの四角い箱をスマホ幅いっぱいに広げる */
    .how-to-item {
        width: 100% !important; /* 🌟4分の1から、100%に広げる */
        max-width: 290px !important; /* 横に広がりすぎないようにボタン等と幅を統一 */
        margin-bottom: 0 !important;
    }

    /* 🔢 ステップ数字 (1, 2, 3, 4) */
    .how-to-number {
        font-size: 28px !important; /* スマホ用にほんの少しだけ小さく */
        margin: 0 0 5px 0 !important;
    }

    /* 📝 ステップの説明テキスト */
    .how-to-text {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 0 0 10px 0 !important;
        min-height: auto !important; /* 🌟縦並びになるので、PC版の高さ揃えのお守りはリセット */
    }

    /* 🎨 イラストアイコン */
    .how-to-item img {
        max-width: 130px !important; /* スマホ画面に合わせて少しだけコンパクトに */
        margin: 0 auto !important;   /* 中央寄せ */
    }

    .how-to-item .how-to-item-2-2{
        max-width: 160px !important; /* スマホ画面に合わせて少しだけコンパクトに */
        margin: 0 auto !important;   /* 中央寄せ */
    }

    .how-to-item .how-to-item-2-3{
        max-width: 160px !important; /* スマホ画面に合わせて少しだけコンパクトに */
        margin: 0 auto !important;   /* 中央寄せ */
    }

    /* ⚠️ ステップ3だけの小さな注意書き（大激突を防ぐための完全リセット） */
    .how-to-note {
        position: static !important; /* 🌟【最重要】PC版の空中浮遊を解除して、普通の流れに戻す */
        width: 100% !important;      /* 横幅の広げすぎをリセット */
        left: 0 !important;          /* ズレをリセット */
        bottom: 0 !important;        /* ズレをリセット */
        
        font-size: 11px !important;
        color: #ffffff !important;
        line-height: 1.4 !important;
        margin: 8px auto 0 auto !important; /* アイコンのすぐ下に程よい隙間を開けて着地 */
        text-align: center !important;
    }

    /* ==========================================================================
        🏆 過去のグランプリ（past-grandprix-section）スマホ対応決定版
       ========================================================================== */
    .past-grandprix-section {
        padding: 40px 0 50px !important;
    }

    /* 🏷️ タイトル（1行死守） */
    .past-grandprix-section .section-title.ribbon-title {
        font-size: clamp(15px, 4.5vw, 22px) !important; 
        white-space: nowrap !important;
        width: 90% !important;
        max-width: 340px !important;
        margin: 0 auto 15px auto !important;
    }

    /* 📝 指マークのホバーガイドをスマホ用に変更 */
    .gp-hover-guide {
        font-size: 11px !important;
        line-height: 1.5 !important;
        padding: 0 20px !important;
        margin: 5px auto 25px auto !important;
    }
    /* スマホではタップで見られるので、アイコンの動きはキープ */
    .gp-hover-guide i {
        animation: gp-mouse-bounce 0.8s infinite alternate !important;
    }

    /* 🏟️ 4つの箱とトロフィーを包むステージを「縦一列」に変える */
    .grandprix-stage {
        display: flex !important;
        flex-direction: column !important; /* 🌟縦並び */
        align-items: center !important;
        gap: 35px !important;              /* 各ボックスの間の縦の隙間 */
        width: 100% !important;
        height: auto !important;           /* 💥PC版の「height: 600px;」の呪いを完全解除！ */
        margin: 0 auto 30px auto !important;
    }

    /* 🔄 【配置の並び替えの魔法】
       4つの開催回（.result-item）を上に並べ、トロフィー（.stage-trophy）を狙い通りその下に配置！ */
    .grandprix-stage .result-item { order: 1 !important; }
    .grandprix-stage .stage-trophy { order: 2 !important; } /* 🌟トロフィーがランキングの下に引っ越します */

    /* 📦 各年（4つのシーズン）の箱をスマホサイズに最適化 */
    .grandprix-stage .result-item {
        position: relative !important;     
        width: 100% !important;
        max-width: 310px !important;       
        height: 360px !important; 
        
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 auto !important;
        
        /* 下側のパディングを少し削って、箱全体の底面を伸ばすスペースを作ります */
        padding: 15px 10px 10px 10px !important; 
        border-radius: 12px !important;
    }

    /* 📊 表彰台のラッパー（中身のセット）を箱の真ん中へ押し下げる */
    .grandprix-stage .podium-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        height: auto !important;
        margin-top: 60px !important; 
        
        position: relative !important;
        padding-bottom: 15px !important;
    }

    /* 📅 年度のラベル（2025 spring など） */
    .result-year {
        font-size: 15px !important;
        margin-bottom: 25px !important;    /* 表彰台のバウムと被らないように少し隙間を空ける */
    }

    /* 📊 表彰台のベース（横並び） */
    .podium-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        height: 110px !important;          /* スマホ用にコンパクトな高さに調整 */
        padding-bottom: 15px !important;
    }

    /* 順位の部屋の横幅調整 */
    .podium-rank { width: 31% !important; }
    .rank-1st { width: 38% !important; }

    /* 🌟【バウムの接地位置のスマホ調整】白線の真上に着地するように数値を調整 */
    .rank-1st .cake-container { transform: translateY(-24px) !important; } 
    .rank-2nd .cake-container { transform: translateY(-12px) !important; }              
    .rank-3rd .cake-container { transform: translateY(-6px) !important; }

    /* 📐 白い階段状のステップ線のスマホ調整 */
    .podium-rank::after { font-size: 11px !important; }
    .rank-2nd::after { bottom: -10px !important; height: 18px !important; }
    .rank-1st::after { bottom: -10px !important; height: 30px !important; }
    
    /* 🥉 3位の台座線・数字のスマホ調整 */
    .rank-3rd::before {
        bottom: -6px !important;
        height: 8px !important;
    }
    .rank-3rd::after {
        bottom: -18px !important;
        font-size: 11px !important;
    }

    /* ==========================================================================
        🏆 過去のグランプリ：黒い箱の高さとホバー位置の最終決定版
       ========================================================================== */

    /* 📦 1. 大きな黒い箱（.result-item）の下側の幅（高さ）をきゅっと短くする！ */
    .grandprix-stage .result-item {
        position: relative !important;     
        width: 100% !important;
        max-width: 310px !important;       
        height: 300px !important; /* 💡 360px ➔ 300px に縮めて、下の余分なスキマをカット！ */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 auto !important;
        padding: 15px 10px !important; 
        border-radius: 12px !important;
    }

    /* 🎯 2. 四角いマスク（.cake-overlay）を、どんな部屋のズレも無視して100%バウムの真ん中に重ねる！ */
    .cake-overlay {
        position: absolute !important;       
        
        /* 💡 上下左右50%の位置を狙い撃ちする */
        top: 50% !important;
        left: 50% !important;
        
        /* 💡 自分のサイズ（バウムの枠の大きさ）の半分だけ戻すことで、ズレを完全に相殺してど真ん中に固定！ */
        transform: translate(-50%, -50%) !important; 
        
        /* 💡 バウムの枠のサイズ（約90px）にガチッと合わせることで、絶対に右に寄らへん！ */
        width: 90px !important;            
        height: 90px !important;           
        background: rgba(160, 26, 26, 0.95) !important; 
        border-radius: 8px !important;     /* 明莉お気に入りのしかく枠 */
        
        display: flex !important;
        flex-direction: column !important; 
        justify-content: center !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        
        opacity: 0 !important;             
        visibility: hidden !important;
        transition: opacity 0.2s ease !important;
        z-index: 10 !important;            
    }

    /* 🎯 タップ（ホバー）したときだけ詳細をフワッと見せる */
    .grandprix-stage .cake-container:hover .cake-overlay, 
    .grandprix-stage .cake-container:active .cake-overlay { 
        opacity: 1 !important; 
        visibility: visible !important; 
    }

    /* 🛑 【最重要】スマホを触った時に、PC版の「浮き上がる動き」が発動してガタつくのを完全阻止！ */
    .grandprix-stage .cake-container:hover, 
    .grandprix-stage .podium-rank:hover, 
    .grandprix-stage .result-item:hover { 
        transform: none !important; 
    }

    /* 🌟 各順位のバウムが白線の上にきれいに着地する足元固定（これは絶対に崩さない！） */
    .rank-1st .cake-container { transform: translateY(-24px) !important; position: relative !important; } 
    .rank-2nd .cake-container { transform: translateY(-12px) !important; position: relative !important; }              
    .rank-3rd .cake-container { transform: translateY(-6px) !important; position: relative !important; }
    /* 🥇 順位バッジの調整 */
    .rank-badge {
        font-size: 10px !important;
        padding: 1px 4px !important;
        margin-bottom: 3px !important;
        display: inline-block !important;
    }

    /* 📝 商品名・企業名テキスト */
    .cake-name {
        font-size: 9px !important;        /* 3つ並んでも絶対に崩れない極小サイズ */
        line-height: 1.3 !important;
        color: #ffffff !important;
    }

    /* --------------------------------------------------------------------------
        🏆 【各年の下へ引っ越し】トロフィーエリアのスマホ調整
       -------------------------------------------------------------------------- */
    .grandprix-stage .stage-trophy {
        position: relative !important;     /* 💥PC版の中央絶対配置「absolute」を完全リセット！ */
        top: auto !important;
        left: auto !important;
        transform: none !important;        /* センターズレをリセット */
        width: 100% !important;
        max-width: 280px !important;
        margin: 10px auto 0 auto !important;
        padding-bottom: 60px !important;
    }

    /* トロフィー画像自体のサイズ */
    .stage-trophy img {
        width: 90px !important;            /* スマホ用に可愛いサイズに */
        height: auto !important;           /* 💥PC版の「height: 220px;」の縦長固定を解除 */
        margin: 0 auto !important;
    }

    /* 📝 トロフィーの注釈テキスト（絶対に被らせない！） */
    .stage-trophy .trophy-caption {
        width: 100% !important;            /* 画面に収まるように広げる */
        margin-top: 15px !important;       /* トロフィーとの間に程よい隙間を開ける */
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.8) !important;
        white-space: normal !important;    /* 🌟スマホの横幅に合わせて自動で優しく改行させる */
        line-height: 1.5 !important;
    }

    

    /* ==========================================================================
        ✉️ スマホ版：インフォメーション（上のセクションとの距離感を完全死守！）
       ========================================================================== */
    .info-section {
        /* 🎯 【ここを変更！】トピックスがあったときと同じ距離感を出すために、
           上側のパディングを 「40px」 ➔ 「60px」 に広げて絶妙な隙間をキープします！ */
        padding: 60px 0 40px 0 !important; 
    }

    /* 📦 ニュースとSNSの箱を「中央寄せの縦一列」に変える */
    .info-flex-container {
        display: flex !important;
        flex-direction: column !important; /* 🌟 縦並びに変更 */
        align-items: center !important;
        gap: 24px !important;              /* 白い箱同士の縦の隙間 */
        width: 100% !important;
        padding: 0 20px !important;        /* スマホ用の画面端の余白 */
    }

    /* ⬅️ 【大修正！】ニュースが入った左カラムをスマホでもちゃんと表示する！ */
    .info-column-left {
        display: block !important;         /* 💡 none から block にしてニュースを出現させる！ */
        width: 100% !important;
        padding: 0 !important;
    }
    
    /* ➡️ 右カラム（SNS）の幅もスマホ100%に広げる */
    .info-column-right {
        width: 100% !important;
        padding: 0 !important; 
    }

    /* --------------------------------------------------------------------------
        🔵 ニュースの白い箱（news-box）
       -------------------------------------------------------------------------- */
    .news-box {
        padding: 24px 20px !important;
        width: 100% !important;
        height: auto !important;
        display: block !important; 
        margin: 0 !important; /* 余計なマージンをリセット */
    }

    /* 🏷️ リボン風見出し */
    .info-title-news, .info-title-sns {
        font-size: 18px !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    .news-list {
        margin: 15px 0 !important;
        width: 100% !important;
    }

    /* 📋 ニュースの表側（一行のラッパー） */
    .news-item-visible {
        display: flex !important;
        justify-content: space-between !important; 
        align-items: center !important;
        padding: 12px 0 !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .news-item-left {
        display: flex !important;
        flex-direction: column !important; 
        align-items: flex-start !important; 
        gap: 4px !important; 
    }

    .news-date { font-size: 11px !important; color: #A0A0A0 !important; }
    .news-text { font-size: 13px !important; color: #333333 !important; text-align: left !important; line-height: 1.4 !important; }
    .news-content p { font-size: 12px !important; line-height: 1.5 !important; color: #555555 !important; }

    /* --------------------------------------------------------------------------
        🔴 SNSの白い箱（sns-box）
       -------------------------------------------------------------------------- */
    .sns-box {
        padding: 24px 20px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    .sns-icons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px !important; 
        margin-top: 15px !important;
    }

    .sns-icons img {
        width: 35px !important; 
        height: auto !important;
    }
    /* ==========================================================================
        🔒 フッター（main-footer）スマホ対応決定版
       ========================================================================== */
    .main-footer {
        height: auto !important;
        padding: 60px 0 200px !important; /* なみなみの高さを考慮しつつ上下余白を引き締め */
        margin-top: 40px !important;
        position: relative !important;
    }

    /* 🌟 フッターの上の「なみなみ帯」をスマホの画面幅でも綺麗にループさせるお守り */
    .main-footer::before {
        top: -14px !important;
        height: 15px !important;
        background-size: 20px 15px !important;
    }

    /* 📦 左右の並びを「中央寄せの縦一列」に変える */
    .footer-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 35px !important; /* ロゴとリンク全体の間の隙間 */
        padding: 0 20px !important;
    }

    /* 🖼️ ロゴボックスの中央寄せ */
    .footer-logo-box {
        margin-top: 0 !important;
        text-align: center !important;
    }
    .footer-logo-box img {
        width: 120px !important; /* スマホ画面に合わせてほんのりコンパクトに */
    }

    /* 🗺️ リンクの3カラムエリアを中央縦並びにバラす */
    .footer-nav {
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important; /* 1束ごとの縦の隙間 */
        width: 100% !important;
    }

    /* 📋 リンクの各列の文字サイズと中央寄せ */
    .footer-links-col {
        align-items: center !important;
        gap: 14px !important; /* 箇条書き同士の上下の隙間をスマホ用に少し詰める */
        width: 100% !important;
    }

    .footer-links-col a {
        font-size: 17px !important; /* スマホで読みやすいテキストサイズ */
        white-space: normal !important; /* 🌟長文のリンクがあってもスマホ幅で優しく折り返す設定 */
        text-align: center !important;
        font-weight: 600;
    }

    /* 🙅‍♀️ 【重要リセット】PC版の箇条書きの「白い丸（・）」をスマホでは非表示に */
    .footer-links-col li {
        padding-left: 0 !important; /* 左側の丸ポチ用余白を完全ゼロに */
    }
    .footer-links-col li::before {
        display: none !important; /* 白い丸を消去 */
    }

    /* 📊 【右側グループ】ユーハイムHP / THEO、SNSアイコンの塊 */
    .footer-links-col-right-group {
        padding-left: 0 !important; /* 🌟PC版の「左側の区切り線用余白」を完全リセット */
        align-items: center !important;
        gap: 30px !important; /* リンクとSNSアイコンの間の隙間 */
        width: 100% !important;
    }

    /* 🙅‍♀️ 【重要リセット】PC版の「白い縦の区切り線」をスマホでは完全消去 */
    .footer-links-col-right-group::before {
        display: none !important;
    }

    /* 📱 フッターのSNSアイコンの中央寄せ */
    .footer-sns-icons {
        justify-content: center !important;
        gap: 28px !important; /* アイコン同士のタップしやすい隙間 */
        margin-top: 5px !important;
    }
    .footer-sns-icons img {
        width: 26px !important;
    }

    /* 🔒 コピーライト（一番下） */
    .footer-copyright {
        font-size: 11px !important; 
        margin-top: 40px !important; /* SNSアイコンとの間の隙間 */
        
        /* 💡 【解決策3】PC版の変な引っ張り合いをリセットするためのお守り */
        position: relative !important;
        bottom: 0 !important;
        margin-bottom: 0 !important; 
        
        display: block !important;
    }

    /* ==========================================================================
        🎪 イベントページ（下層）：スマホ用縦並び・引き算レイアウト
       ========================================================================== */
    .events-list-section .side-decoration.line-left,
    .events-list-section .side-decoration.line-right,
    .side-decoration {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    .events-list-section .event-title-wrapper,
    .events-list-section p,
    .events-list-section .event-lead {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important; /* 💡 左右にちょっとだけ安全な余白を作る */
        text-align: center !important;
        white-space: normal !important; /* 💡 縦潰れを強制解除して、普通に横に読ませる */
    }

    .event-title-wrapper .garland-left,
    .event-title-wrapper .garland-right,
    .garland-left,
    .garland-right {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
    }

    .events-list-section .events-section-lead {
        font-size: 13.5px !important; /* 💡 ほんの少しだけ文字を小さくして3行に収まりやすくします */
        line-height: 2.0 !important;   /* 💡 行間をゆったり2倍にして、3行の塊を美しく見せる */
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 25px !important;    /* 💡 左右の余白を少しだけ広げて、文字が3行にカチッと収まるように追い込みます */
        letter-spacing: 0.03em !important;
    }

    /* 🖼️ メインビジュアルの余白調整 */
    .event-main-visual {
        margin-bottom: 25px !important;
    }
    .event-main-visual img {
        /* スマホでは角丸を少し控えめにする（画面にフィットさせるため） */
        border-radius: 0 0 12px 12px !important; 
    }

    /* 📦 セクション全体のコンテナ */
    .event-detail-section {
        padding-bottom: 50px !important;
    }

    /* 🏷️ 見出しとリード文のスマホサイズ化 */
    .event-container h2 {
        font-size: 26px !important; /* 36pxからスマホ用に縮小 */
        margin-bottom: 15px !important;
    }
    .event-lead {
        font-size: 13px !important;
        line-height: 1.7 !important;
        margin-bottom: 30px !important;
    }

    /* 🧱 概要カード（content-box）の調整 */
    .event-content-box {
        padding: 20px !important; /* スマホ用に内側の余白を少し狭める */
        margin-bottom: 20px !important;
    }
    .event-content-box h3 {
        font-size: 18px !important;
    }
    .event-content-box p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* 🎯 【大本命】3列グリッドを「縦1列」に強制組み替え！ */
    .events-grid-container {
        grid-template-columns: 1fr !important; /* 💡 3列から1列（縦並び）に！ */
        gap: 35px 0 !important; /* 💡 左右の隙間をなくして、上下の距離だけにする */
        padding: 30px 20px !important; /* 上下の無駄な余白をギュッと絞る */
    }

    /* 🎫 ボタン全体の調整 */
    .event-btn-item {
        /* さっき大成功した「スマホの押し心地（:active）」をここにも綺麗に継承させるお守り */
        pointer-events: auto !important;
    }

    /* 🍩 バウム写真フレームのサイズ（スマホでも可愛く収まるサイズ） */
    .baum-frame-wrapper {
        width: 140px !important;  
        height: 140px !important;
        margin-bottom: 10px !important;
    }

    /* ✍️ ボタン下のテキスト */
    .event-btn-txt h3 {
        font-size: 15px !important;
    }
    .event-btn-copy-txt {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }
    .event-btn-item .event-btn-more {
        font-size: 14px !important;
    }

    /* 🚪 【モーダル窓】スマホの画面内に綺麗に収める調整 */
    .modal-window {
        width: 85% !important;
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }
    .modal-content h2 {
        font-size: 18px !important;
    }
    .modal-desc {
        font-size: 13px ;
        line-height: 1.6 ;
    }

    /* ==========================================================================
        🍩 スマホ版：イベントのボタン（item）を限界まで爆デカ化！
       ========================================================================== */

    .events-grid-container .event-btn-item {
        width: 100% !important;
        max-width: 350px !important; 
        margin: 0 auto !important;
        padding: 20px !important;    
        background-color: #ffffff !important; 
        border-radius: 15px !important;
        box-shadow: 0 4px 12px rgba(74, 59, 50, 0.08) !important; 
    }


    .events-list-section .baum-frame-wrapper {
        width: 200px !important;  
        height: 200px !important; 
        margin-bottom: 20px !important;
    }

    /* 🎯 ③ テキストエリアも横幅100%に広げて、文字サイズもスマホで見やすい大きさにアップ！ */
    .events-list-section .event-btn-txt {
        width: 100% !important;
    }
    .events-list-section .event-btn-txt h3 {
        font-size: 18px !important; /* 💡 見出しをちょっと大きく */
        margin-bottom: 10px !important;
    }
    .events-list-section .event-btn-copy-txt {
        font-size: 14px !important; /* 💡 説明文も14pxにしてしっかり読ませる */
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }
    .events-list-section .event-btn-item .event-btn-more {
        font-size: 15px !important; /* 💡 「タップして詳細を見る」も目立たせる！ */
    }

/* ==========================================================================
        💥 スマホ版：親指に絶対負けない！大袈裟押し心地アニメーション
========================================================================== */

    .btn-container {
        position: relative !important;
        margin: 0 auto !important;
        filter: drop-shadow(0 8px 16px rgba(74, 59, 50, 0.3)) !important;
        transition: transform 0.05s ease-out, filter 0.05s ease-out !important;

        /* 🔴 以下の3行を新しく追加します！ 🔴 */
        transform: translateZ(0) !important;       /* 💡 iPhoneの描画バグを強制リセットする魔法 */
        -webkit-transform: translateZ(0) !important; /* 💡 古いSafari用のお守り */
        will-change: transform, filter;            /* 💡 ブラウザに「ここは単独で動くよ」と予告してブレを防止 */
    }

    .custom-btn-link:active .btn-container {
        /* 💡 :active 時の縮小アニメーションにも translateZ(0) を巻き込んでブレを徹底防御 */
        transform: scale(0.85) translateZ(0) !important; 
        filter: drop-shadow(0 0px 0px rgba(0, 0, 0, 0)) !important; 
    }

    @media screen and (max-width: 768px) {
    /* 🎯 PC版の「height: 72px !important」を、スマホサイズでは完全にオート（自動）に叩き直す！ */
    html body .right-content-wrapper .next-btn.btn-instagram {
        height: auto !important;
        min-height: 85px !important; /* 💡 2行の文字が綺麗に収まるぷっくりした高さ */
        padding: 10px 12px !important; /* 💡 上下のクッションを程よく空ける */
    }
    

    html body .right-content-wrapper .next-btn.btn-instagram {
        font-size: 16px !important;
        font-weight: bold !important;
        line-height: 1.3 !important; /* 💡 2行がくっつきすぎず、離れすぎない黄金比 */
    }
    }

}/* 🌟 ここでしっかりスマホ用メディアクエリを閉じる！ */

/* ==========================================================================
    🌀 【バグ回避の核】アニメーションの定義はメディアクエリの「外」に配置！
   ========================================================================== */
@keyframes loop-background-sp {
    0% { background-position: 0 center; }
    100% { background-position: -170px center; }

}/* 死んでも消すなこのかっこ */

/* ==========================================================================
   🔥 【完全勝利】インスタボタンをスマホで絶対に大きく・2行にするトドメの指定
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 🎯 1. ボタンの土台（背景画像）の!importantの呪いを破壊して、自動で広がるようにする！ */
    .right-content-wrapper .next-btn.btn-instagram,
    html body .right-content-wrapper a.next-btn.btn-instagram {
        height: auto !important;
        min-height: 85px !important;    /* 💡 2行の文字が綺麗に収まるぷっくりした高さ */
        padding: 12px 10px !important;  /* 💡 上下の余白を広げてボタン自体をぷっくり大きく！ */
    }

    /* 🎯 2. 【大本命】文字を囲んでいる「.btn-sub」を狙い撃ちして、文字サイズを18pxに爆上げする！ */
    .right-content-wrapper .next-btn.btn-instagram .btn-sub,
    html body .right-content-wrapper a.next-btn.btn-instagram .btn-sub {
        font-size: 18px !important;     /* 💡 これでスマホでも絶対に文字が大きく見える！ */
        font-weight: bold !important;
        line-height: 1.4 !important;    /* 2行がくっつきすぎない黄金比率 */
        opacity: 1 !important;          
        display: block !important;      /* 確実に2行の塊として真ん中に配置 */
    }
}


/* ==========================================================================
   🌳 PC版最終兵器：Aboutセクションの設定をどんな檻からも強制救出する設定
   ========================================================================== */
#about.about {
    width: 100% !important;
    max-width: 100% !important; 
    padding: 60px 0 !important;
    position: relative !important;
    left: 0 !important;
    margin: 0 auto !important;
    overflow: visible !important; /* 💡 はみ出しを許可する */
}

/* 巨大背景バウムを画面の左端に固定 */
#about.about::before {
    content: "" !important;
    position: absolute !important;
    top: 45% !important;
    left: calc(50% - 600px - 230px) !important; 
    transform: translateY(-50%) !important;
    width: 700px !important; 
    height: 700px !important;
    background-image: url('big-baum.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 1 !important; 
}

/* 文字や右側の写真を1200pxの基準線に強制整列 */
#about.about .section-title,
#about.about p {
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    z-index: 5 !important;
}


/* ==========================================================================
   🎯 3. ヘッダーカスタム用スタイル（Shopify既存CSSの上書き対策版）
   ========================================================================== */
header.a-header-custom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #FFEB82 !important; /* 可愛いバウム博の黄色 */
    width: 100% !important;
    padding: 20px 40px !important;
    position: relative !important;
    z-index: 100 !important;
}

header.a-header-custom h1 img {
    height: 60px !important;
    width: auto !important;
    display: block !important;
}

header.a-header-custom .pc-nav ul {
    display: flex !important;
    gap: 50px !important;
    align-items: center !important;
    justify-content: space-between !important;
}

header.a-header-custom .pc-nav a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    transition: color 0.3s ease !important;
}

header.a-header-custom .pc-nav a:hover {
    color: #ffaf3f !important;
}

header.a-header-custom {
    background-color: #FFEB82 !important;
}

/* ==========================================================================
    🍩 EC〜awardまでのside-baum（トップページ用・完全決定版）
   ========================================================================== */
.side-baum-area {
    width: 100% !important;
    position: relative !important; /* 🌟 左右のバウムを絶対配置するための基準の壁 */
    background: none !important;   /* 余計な背景はカット */
    overflow: visible !important;  /* 🌟 左右にはみ出して表示させるため必須 */
}

/* 👈 左側のバウム設定 */
.side-baum-area::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    
    /* 🌟 topの数値を「px」ではなく、Aboutの下端を狙い撃ちした「vh」にする！ */
    top: 358vh !important; /* 💻 画面1.4個分下がったところ（ちょうどECの少し上）からスタート */
    
    bottom: -27vh !important;
    height: auto !important; /* 縦幅を自動で伸ばす */
    width: 60px !important;
    left: 20px !important;
    
    background-image: url('online-mini-baum1.webp') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    z-index: 2 !important;
    pointer-events: none;
    animation: baum-scroll-vertical 12s linear infinite !important;
}

/* 👉 右側のバウム設定 */
.side-baum-area::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    
    top: 358vh !important; /* 👈 左右でお揃いにする */
    
    bottom: -27vh !important;
    height: auto !important;
    width: 60px !important;
    right: 20px !important;
    
    background-image: url('online-mini-baum2.webp') !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;
    z-index: 2 !important;
    pointer-events: none;
    animation: baum-scroll-vertical 12s linear infinite !important;
}

/* 👉 右側のバウム専用の位置と画像の指定 */
.side-baum-area::after {
    right: 20px !important; /* 右端からの距離 */
    background-image: url('online-mini-baum2.webp') !important; /* 🌟 Shopifyアセット画像を直接呼び出す */
}

/* 🎬 背景画像が滑らかにループして流れるアニメーションの設定 */
@keyframes baum-scroll-vertical {
    0% {
        background-position: center top -50px; 
    }
    100% {
        background-position: center top 150px; /* 💡 画像1ループ分の高さ分スライドさせる */
    }
}

/* 📱 スマホ版（画面幅が1200px以下）では邪魔になるので非表示にする */
@media screen and (max-width: 1200px) {
    .side-baum-area::before,
    .side-baum-area::after {
        display: none !important;
    }
}

/* ==========================================================================
    🚨 【下層ページ流出対策】一時的にすべてのサイドバウムを強制非表示
   ========================================================================== */
#MainContent::before,
#MainContent::after,
.side-baum-wrapper,
.sidebaum,
.side-baum-area,
.side-baum-area::before,
.side-baum-area::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
  animation: none !important;
}