@charset "UTF-8";
/* CSS Document */

:root {
    --primary-red: #B00000;
    --secondary-black: #000;
    --text-white: #fff;
	
	--image-margin-x: 5%; /* 例: 左右のマージン */
    --header-height-desktop: 100px; /* 例: デスクトップヘッダーの高さ */
    --scroll-margin-adjustment: 20px; /* 例: スクロールマージンの微調整 */

    /* ヘッダーの高さに関連する変数 */
    --header-height-desktop: 80px;
    --header-height-tablet: 70px;
    --header-height-mobile: 60px;
    --header-height-small-mobile: 50px;

    /* スクロールマージンの調整値 */
    --scroll-margin-adjustment: 10px; /* ヘッダーの高さに少し余裕を持たせるための調整 */

    /* スライドショーのカスタマイズ変数 */
    --image-width: 960px;        /* 各画像の固定幅 */
    --image-height: 700px;       /* 各画像の固定高さ */
    --image-margin-x: 30px;      /* スライドショーコンテナの左右マージン */
    --overlay-logo-width-vw: 25vw; /* 例: ビューポート幅の20%に設定 */
    --welcome-image-width: 400px; /* ウェルカム画像のデフォルト幅 */
    --welcome-image-margin: 50px; /* 右下からのマージン */

    /* 新着情報セクションの変数 */
    --news-section-padding-top: 100px;
    --news-box-width: 1280px;
    --news-box-padding: 30px;
    --news-item-margin-bottom: 20px;
    --news-title-en-letter-spacing: 0.1em; /* 新たに定義 */

    /* 調理人イラスト (yukiri.png) の変数 */
    --illust-width: 500px;
    --illust-right-offset: 100px;
    --illust-bottom-offset: 50px;
    --illust-animation-distance: 15px;
    --illust-animation-duration: 0.5s; /* この変数を使う場合は、animation-durationの値を設定 */
}

html, body {
    height: 100%; /* htmlとbodyの高さが100%になるようにする */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 水平スクロールを抑制 */
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--primary-red);
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    /* フッターを最下部に固定するためのFlexbox設定 */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ビューポートの高さの最低値を設定 */
}

/* メインコンテンツエリア */
.main-content {
    position: relative;
    text-align: center;
    /* margin-bottom: 100px; */ /* mainコンテンツ全体の最下部マージン - 削除しました */
    flex-grow: 1; /* 利用可能なスペースを埋めるように拡張 */
}

/* フッター */
.main-footer {
    flex-shrink: 0; /* フッターが縮まないようにする */
    background-color: var(--secondary-black);
    color: var(--text-white);
    text-align: center;
    padding: 10px 0px; /* 変更を反映 */
    font-size: 0.4em;
    width: 100%; /* 幅を確実に100%にする */
	margin: 0 auto;
}



/* -------------------------------------------------
    特殊画像（ラーメン丼など）
------------------------------------------------- */
.bottom-left-image {
    position: absolute; /* 親要素 #greeting を基準に配置 */
    top: 50%; /* #greeting の中央に縦方向で配置 */
    left: -300px; /* 左からの位置をさらに調整して大きく見せる */
    transform: translateY(-50%); /* 自身の高さの半分を上にずらして中央揃え */
    z-index: 5000;
    width: 100%; /* 親要素の幅いっぱいに広がるように設定 */
    max-width: 900px; /* 最大幅を拡大 */
    height: auto;
    animation: bounceUpDown var(--illust-animation-duration) ease-in-out infinite alternate;
    animation-delay: 0.1s; /* アニメーション開始の遅延 */
    pointer-events: none; /* 画像の下の要素がクリックできるよう透過 */
}
@media (max-width: 1024px) {
    .bottom-left-image {
        left: -300px;
        max-width: 900px;
    }
}
@media (max-width: 768px) {
    .bottom-left-image {
        left: -150px; /* ★X軸調整: より右に移動させる (画面内に入りやすく) */
        max-width: 700px;
        /* Y軸調整が必要な場合、ここに 'top: X%;' や 'transform: translateY(-Y%);' を追加 */
        /* 例: top: 60%; transform: translateY(-60%); // 少し下にずらす */
    }
}
@media (max-width: 480px) {
    .bottom-left-image {
        position: absolute; /* ★念のため明示的に指定★ */
        left: 50%;           /* 親要素の水平方向中央を基準にする */
        top: 80%;            /* 縦方向の位置はそのまま */
        transform: translate(-0%, -100%); /* 自身の幅と高さの半分をずらして完全に中央寄せ */
        
        width: 150px; /* ★スマホで適切なサイズを明示的に指定★ */
        /* max-width: 500px; は他のメディアクエリで設定済みであれば、ここでは省略可 */
        height: auto; /* 縦横比維持のため */
        /* その他のアニメーションやz-indexなどはそのまま */
    }

}

.fixed-ramen-icon {
    position: absolute; /* ★重要：画面に固定する */
    width: 300px; /* 画像の幅を調整（例: 80px） */
    height: auto; /* 高さ自動調整 */
    z-index: 1000; /* 他のどの要素よりも手前に表示 */
    pointer-events: none; /* クリックイベントを透過 */
}
@media (max-width: 768px) {
    .fixed-ramen-icon {
        width: 50px; /* ★ものすごく小さくする★ */
        top: 20px;   /* 位置を調整 */
        left: 20px;  /* 位置を調整 */
    }
}
@media (max-width: 480px) {
    .fixed-ramen-icon {
        width: 100px; /* ★さらに小さくする★ */
        top: 15px;   /* 位置を調整 */
        left: 15px;  /* 位置を調整 */
    }
}

.ramen-img-half {
    position: absolute; /* 画面に固定する */
    bottom: 0px; /* 画面下からの位置を調整 */
    right: -100px; /* ★右からのオフセットを調整し、より多くの部分が見えるようにする★ */
    width: 600px; /* 画像のデフォルト幅 */
    height: auto;
    z-index: 5000; /* z-indexを5に設定し、テキストよりは下、背景よりは上程度に調整 */
    pointer-events: none; /* クリックイベントを透過 */
}
@media (max-width: 1024px) {
    .ramen-img-half {
        width: 400px; /* タブレット用に調整 */
        right: -320px; /* ★右からのオフセットを調整★ */
        bottom: -50px; /* 下からのオフセットを調整 */
    }
}
@media (max-width: 768px) {
    .ramen-img-half {
        width: 300px; /* スマホ用に調整 */
        right: -240px; /* ★右からのオフセットを調整★ */
        bottom: 30px; /* 下からのオフセットを調整 */
    }
}
@media (max-width: 480px) {
    .ramen-img-half {
        width: 200px; /* 小さいスマホ用に調整 */
        right: 0px; /* ★右からのオフセットを調整★ */
        bottom: 320px; /* 変更を反映：画面一番下に配置 */
    }
}


/* -------------------------------------------------
    ヘッダーとナビゲーション
------------------------------------------------- */
.header {
    width: 100%;
    height: var(--header-height-desktop);
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 990;
    box-sizing: border-box;
    background-color: var(--primary-red);
}
@media (max-width: 1024px) {
    .header {
        height: var(--header-height-tablet);
    }
}
@media (max-width: 768px) {
    .header {
        height: var(--header-height-mobile);
        padding: 0 20px;
    }
}
@media (max-width: 480px) {
    .header {
        height: var(--header-height-small-mobile);
        padding: 0 15px;
    }
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-decoration: none;
    margin-top: 50px;
}

.logo img {
    max-height: 100%;
    width: auto;
    display: block;
}
@media (max-width: 1024px) {
    .logo img {
        max-height: 80%;
    }
}
@media (max-width: 768px) {
    .logo img {
        max-height: 80%;
    }
}
@media (max-width: 480px) {
    .logo img {
        max-height: 80%;
    }
}

/* -------------------------------------------------
    バーガーメニュー
------------------------------------------------- */
.burger-menu-icon {
    width: 60px;
    height: 60px;
    background-color: var(--secondary-black);
    position: fixed;
    top: 35px;
    right: 30px;
    z-index: 9999;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
@media (max-width: 1024px) {
    .burger-menu-icon {
        top: 30px;
    }
}
@media (max-width: 768px) {
    .burger-menu-icon {
        width: 50px;
        height: 50px;
        top: 25px;
        right: 20px;
    }
}
@media (max-width: 480px) {
    .burger-menu-icon {
        width: 45px; /* 適切なサイズに修正 */
        height: 45px; /* 適切なサイズに修正 */
        top: 20px;   /* 位置を調整 */
        right: 15px; /* 位置を調整 */
        /* left: 15px; は削除 */
    }
}

.burger-menu-icon .burger-lines {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 768px) {
    .burger-menu-icon .burger-lines {
        width: 25px;
    }
}
@media (max-width: 480px) {
    .burger-menu-icon .burger-lines {
        width: 20px;
    }
}

.burger-menu-icon .burger-lines span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-white) !important; /* ★強制的に白にする★ */
    transition: all 0.3s ease;
    opacity: 1 !important; /* ★強制的に表示する★ */
}

.burger-menu-icon.active .burger-lines span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger-menu-icon.active .burger-lines span:nth-child(2) {
    opacity: 0;
}

.burger-menu-icon.active .burger-lines span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9990;
    pointer-events: none; /* ★修正: 閉じている間はクリック・スワイプを透過する */
}

.overlay-menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* ★修正: 開いている間はクリック・スワイプを受け付ける */
}

.overlay-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.overlay-menu nav ul li {
    margin: 20px 0;
}

.overlay-menu nav ul li a {
    color: var(--text-white);
    font-size: 2.5em;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}
@media (max-width: 1024px) {
    .overlay-menu nav ul li a {
        font-size: 2em;
    }
}
@media (max-width: 768px) {
    .overlay-menu nav ul li a {
        font-size: 1.8em;
    }
}
@media (max-width: 480px) {
    .overlay-menu nav ul li a {
        font-size: 1.5em;
    }
}

.overlay-menu nav ul li a:hover {
    color: var(--primary-red);
}

.overlay-welcome-image {
    position: absolute;
    width: var(--welcome-image-width);
    height: auto;
    right: var(--welcome-image-margin);
    bottom: var(--welcome-image-margin);
    opacity: 0; /* ★修正: 初期状態は透明 */
    visibility: hidden; /* ★修正: 初期状態は非表示 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1010;
}

/* ★追加: overlay-menuが開いた時に welcome-image を表示する */
.overlay-menu.open .overlay-welcome-image {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1024px) {
    .overlay-welcome-image {
        --welcome-image-width: 250px;
        --welcome-image-margin: 40px;
    }
}
@media (max-width: 768px) {
    .overlay-welcome-image {
        --welcome-image-width: 200px;
        --welcome-image-margin: 30px;
    }
}
@media (max-width: 480px) {
    .overlay-welcome-image {
        --welcome-image-width: 150px;
        --welcome-image-margin: 20px;
    }
}


/* -------------------------------------------------
    スライドショー
------------------------------------------------- */
.js-slideshow-container {
    position: relative;
    width: calc(100vw - (var(--image-margin-x) * 2));
    max-width: 100%;
    margin: 50px var(--image-margin-x) 0 var(--image-margin-x);
    height: var(--image-height);
    overflow: hidden;
    box-sizing: border-box;
    background-color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 1024px) {
    .js-slideshow-container {
        margin-top: 40px;
    }
}
@media (max-width: 768px) {
    :root {
        --image-margin-x: 15px; /* スマートフォン用のマージン変数を設定 */
    }
    .js-slideshow-container {
        width: calc(100% - (var(--image-margin-x) * 2)); /* 親要素の幅からマージンを引くように修正 */
        margin: 30px auto 0 auto;
        height: 350px;
        /* --image-margin-x: 15px; */ /* ここでの直接指定は不要になります */
    }
}
@media (max-width: 480px) {
    :root {
        --image-margin-x: 15px; /* スマートフォン用のマージン変数を設定 */
    }
    .js-slideshow-container {
        width: calc(100% - (var(--image-margin-x) * 2)); /* 親要素の幅からマージンを引くように修正 */
        margin: 30px auto 0 auto; /* 変更を反映 */
        height: 350px;
        /* --image-margin-x: 15px; */ /* ここでの直接指定は不要になります */
    }
}

.js-slideshow-track {
    display: flex;
    height: 100%;
    will-change: transform; /* アニメーション最適化 */
}

.js-slideshow-track img {
    width: var(--image-width);
    height: var(--image-height);
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
@media (max-width: 768px) {
    .js-slideshow-track img {
        width: 100%;
        height: 100%;
    }
}
@media (max-width: 480px) {
    .js-slideshow-track img {
        width: 100%;
        height: 100%;
    }
}

.slideshow-overlay-logo {
    position: absolute;
    width: var(--overlay-logo-width-vw);
    height: auto;
    top: 650px; /* スライドショー内の位置 */
    left: 70px;
    transform: none; /* 不要なtransformは削除 */
    z-index: 10;
    pointer-events: none; /* ロゴのクリックを透過させる */
}
@media (max-width: 1024px) {
    .slideshow-overlay-logo {
        --overlay-logo-width-vw: 25vw;
        top: 600px;
        left: 80px;
    }
}
@media (max-width: 768px) {
    .slideshow-overlay-logo {
        width: var(--overlay-logo-width-vw);
        top: 230px; /* 高さを350pxに合わせたロゴの位置を調整 */
        left: 60px;
    }
}
@media (max-width: 480px) {
    .slideshow-overlay-logo {
        width: var(--overlay-logo-width-vw);
        top: 330px; /* 高さを350pxに合わせたロゴの位置を調整 */
        left: 20px;
    }
}

/* -------------------------------------------------
    新着情報セクションのスタイル
------------------------------------------------- */
.news-section {
    padding: var(--news-section-padding-top) var(--image-margin-x) 50px var(--image-margin-x);
    text-align: center;
    position: relative;
    min-height: 500px; /* コンテンツが少なくてもイラストが隠れないように */
    z-index: 100; /* 他の要素との重なり順 */
    /* ページ内リンクの飛び先調整 */
    scroll-margin-top: calc(var(--header-height-desktop) + var(--scroll-margin-adjustment));
}
@media (max-width: 1024px) {
    .news-section {
        --news-section-padding-top: 80px;
        scroll-margin-top: calc(var(--header-height-tablet) + var(--scroll-margin-adjustment));
    }
}
@media (max-width: 768px) {
    .news-section {
        --news-section-padding-top: 60px;
        padding: 60px var(--image-margin-x) 50px var(--image-margin-x); /* var(--image-margin-x) を使用 */
        scroll-margin-top: calc(var(--header-height-mobile) + var(--scroll-margin-adjustment));
    }
}
@media (max-width: 480px) {
    .news-section {
        --news-section-padding-top: 40px;
        padding: 40px var(--image-margin-x) 50px var(--image-margin-x); /* var(--image-margin-x) を使用 */
        min-height: 300px;
        scroll-margin-top: calc(var(--header-height-small-mobile) + var(--scroll-margin-adjustment));
    }
}

.news-title-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}

.news-title-ja {
    font-family: 'Zen Old Mincho', serif;
    font-size: 2em;
    color: var(--text-white);
    margin: 0;
    writing-mode: vertical-rl; /* ベンダープレフィックスは最新環境では不要な場合が多い */
    text-orientation: upright;
    white-space: nowrap;
    letter-spacing: 0.1em;
    z-index: 500;
}
@media (max-width: 1024px) {
    .news-title-ja {
        font-size: 3em;
    }
}
@media (max-width: 768px) {
    .news-title-ja {
        font-size: 2.5em;
    }
}
@media (max-width: 480px) {
    .news-title-ja {
        font-size: 1.5em;
    }
}

.news-title-en {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.8em;
    color: var(--text-white);
    background-color: var(--secondary-black);
    padding: 5px 15px;
    border-radius: 9999px;
    display: inline-block;
    margin-top: 10px;
    letter-spacing: var(--news-title-en-letter-spacing);
}
@media (max-width: 1024px) {
    .news-title-en {
        font-size: 1.1em;
    }
}
@media (max-width: 768px) {
    .news-title-en {
        font-size: 0.5em;
    }
}
@media (max-width: 480px) {
    .news-title-en {
        font-size: 0.9em;
    }
}

.news-list-container {
    background-color: var(--text-white);
    max-width: var(--news-box-width); /* Desktop: 1280px */
    margin: 0 auto;
    padding: var(--news-box-padding); /* Desktop: 30px */
    box-sizing: border-box;
    color: var(--secondary-black);
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1024px) {
    .news-list-container {
        --news-box-width: 900px;
        --news-box-padding: 25px;
    }
}
@media (max-width: 768px) {
    .news-list-container {
        width: 100%;
        margin: 0 auto; /* 中央寄せを維持 */
        --news-box-padding: 20px;
    }
}
@media (max-width: 480px) {
    .news-list-container {
        width: 100%;
        margin: 0 auto; /* 中央寄せを維持 */
        --news-box-padding: 15px;
    }
}

.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--news-item-margin-bottom);
    border-bottom: 1px solid #ccc;
    padding-bottom: calc(var(--news-item-margin-bottom) / 2);
}
@media (max-width: 1024px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

.news-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.news-date {
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
}
@media (max-width: 1024px) {
    .news-date {
        margin-right: 0;
        margin-bottom: 5px;
    }
}
@media (max-width: 768px) {
    .news-date {
        margin-right: 0;
        margin-bottom: 5px;
    }
}

.news-text {
    flex-grow: 1;
    margin: 0;
}

/* -------------------------------------------------
    湯切りのおっさんイラスト
------------------------------------------------- */
.news-section-illust {
    position: absolute;
    width: var(--illust-width);
    height: auto;
    right: var(--illust-right-offset);
    bottom: var(--illust-bottom-offset);
    z-index: 2000;
    pointer-events: none;
    animation: bounceUpDown var(--illust-animation-duration) ease-in-out infinite alternate;
    animation-delay: 0.5s; /* アニメーション開始の遅延 */
}
@media (max-width: 1024px) {
    .news-section-illust {
        --illust-width: 250px;
        --illust-right-offset: -10px;
        --illust-bottom-offset: -40px;
        --illust-animation-distance: 8px;
    }
}
@media (max-width: 768px) {
    .news-section-illust {
        --illust-width: 200px;
        --illust-right-offset: 0px;
        --illust-bottom-offset: -30px;
        --illust-animation-distance: 6px;
    }
}
@media (max-width: 480px) {
    .news-section-illust {
        --illust-width: 200px; /* 変更を反映 */
        --illust-right-offset: 0px;
        --illust-bottom-offset: 280px; /* 変更を反映 */
        --illust-animation-distance: 5px;
    }
}

/* -------------------------------------------------
    goodのおっさんイラスト
------------------------------------------------- */
.section-illust.ossan-illust {
    position: absolute; /* 絶対配置 */
    bottom: 0;
    left: -90px; /* 左からの位置 */
    z-index: 10; /* 他のコンテンツとの重なり順 */
    max-width: 300px;
    height: auto;
    animation: bounceUpDown var(--illust-animation-duration) ease-in-out infinite alternate;
    animation-delay: 0.3s; /* アニメーション開始の遅延 */
}
@media (max-width: 1024px) {
    .section-illust.ossan-illust {
        left: 0px; /* タブレットでは少し内側にする */
        width: 150px;
    }
}
@media (max-width: 768px) {
    .section-illust.ossan-illust {
        left: -20px; /* スマホでは少しはみ出すようにする */
        width: 120px;
    }
}
@media (max-width: 480px) {
    .section-illust.ossan-illust {
        left: -20px; /* 小さいスマホではさらに調整 */
        width: 140px;
    }
}

/* -------------------------------------------------
    ご挨拶セクション全体 (#greeting)
------------------------------------------------- */
#greeting {
    padding: 50px var(--image-margin-x) 100px var(--image-margin-x); /* 上下左右のパディング */
    text-align: center; /* タイトルグループを中央寄せ */
    position: relative; /* 子要素のabsoluteの基準にするため */
    z-index: 4400; /* 他のセクションとの重なり順 */
    scroll-margin-top: calc(var(--header-height-desktop) + var(--scroll-margin-adjustment)); /* ページ内リンク用 */
    /* background-color: #f8f8f8; */ /* デフォルトの背景色（黒い背景ブロックの外側） */
}

/* -------------------------------------------------
    ご挨拶セクション内のタイトルグループ (.news-title-group)
------------------------------------------------- */
.news-title-group {
    /* ★修正: ここに黒い背景ブロックとの間隔を設定 */
    margin-bottom: 120px; /* タイトルと黒い背景の間に120pxの余白を設定 */
    /* text-align: center; */ /* 親の #greeting に指定されているので不要な場合も */
}



/* -------------------------------------------------
    ご挨拶画像の黒い背景ブロック (.greeting-background-block)
------------------------------------------------- */
.greeting-background-block {
    background-color: #000000; /* 黒色に設定 */
    height: 800px; /* 固定の高さ800px */
    
    /* ★修正: position関連を削除して通常のドキュメントフローに戻す */
    /* width: 100vw; の代わりに left/right 0 を使用して全幅を確保 */
    position: relative; /* z-indexと全幅を確保しつつフローに留まる */
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; /* ビューポート幅の100% */
    
    margin-top: 0; /* news-title-groupのmargin-bottomで調整するため0にする */
    margin-bottom: 30px; /* 下部の余白 */
    box-sizing: border-box; /* パディングを幅に含める */
    z-index: 4400; /* 画像 (4500, 4600) より低く設定 */
    overflow: hidden; /* 画像がはみ出さないように */
}


/* -------------------------------------------------
    ご挨拶画像 (img/greeting.png) (.size_2)
------------------------------------------------- */
/* .greeting-background-block の中の .size_2 */
.greeting-background-block .size_2 {
    position: absolute; /* 親 (greeting-background-block) を基準に絶対配置 */
    width: auto; /* デフォルトの幅 (黒い背景内での幅) */
    max-width: auto; /* 最大幅 */
    height: 700px;
    object-fit: contain; /* 画像全体が表示されるように調整 */
    z-index: 4500; /* ramen_img.png (z-index: 4500) より高く設定 */
    
    /* 黒い背景ブロック内での位置調整 - 完全中央寄せ */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}




/* -------------------------------------------------
    ご挨拶セクション関連のメディアクエリ
------------------------------------------------- */

@media (max-width: 1024px) {
    #greeting {
        padding-top: 40px;
        padding-bottom: 80px;
    }
    .news-title-group {
        margin-bottom: 100px; /* タブレット向けに調整 */
    }
    .greeting-background-block {
        height: 700px; /* 黒い背景ブロックの高さ調整 */
        margin-bottom: 20px; /* 下部マージンも調整 */
    }
    .greeting-background-block .size_2 {
        width: 95%; /* タブレットでさらに大きく */
        max-width: 600px; /* 最大幅も調整 */
    }
    .bottom-left-image {
        width: 250px; /* 例: 幅を小さく */
        left: 3%;
        bottom: -30px;
    }
}

@media (max-width: 768px) {
    #greeting {
        padding-top: 30px;
        padding-bottom: 60px;
    }
    .news-title-group {
        margin-bottom: 80px; /* スマホ向けに調整 */
    }
    .greeting-background-block {
        height: 600px; /* 黒い背景ブロックの高さ調整 */
        margin-bottom: 15px; /* 下部マージンも調整 */
    }
    .greeting-background-block .size_2 {
        width: 100%; /* スマホで最大幅に */
        max-width: 500px; /* 最大幅も調整 */
    }
    .bottom-left-image {
        width: 200px; /* 例: 幅をさらに小さく */
        left: 2%;
        bottom: -20px;
    }
}

@media (max-width: 480px) {
    #greeting {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .news-title-group {
        margin-bottom: 60px; /* 小さいスマホ向けに調整 */
    }
    .greeting-background-block {
        height: 400px; /* 黒い背景ブロックの高さ調整 */
        margin-bottom: 10px; /* 下部マージンも調整 */
    }
    .greeting-background-block .size_2 {
        width: 100%; /* 小さいスマホで最大幅に */
        max-width: 400px; /* 最大幅も調整 */
        height: 380px; /* ★修正: 画像の高さを380pxに指定★ */
        object-fit: contain; /* アスペクト比を維持しつつ収める（歪む可能性あり） */
    }
    .bottom-left-image {
        width: 150px; /* 例: 幅をさらに小さく */
        left: 0%;
        bottom: -10px;
    }
}



/* -------------------------------------------------
    おしながきのブロック（既存のメニュー）
------------------------------------------------- */
#menu {
    padding: 50px 30px 0px 30px;
    text-align: center;
    position: relative;
    z-index: 4000;
    /* scroll-margin-topは上で一括設定済み */
}
/* ページ内リンクの飛び先調整（一括で設定） */
#menu,
#commitment,
#contact {
    scroll-margin-top: calc(var(--header-height-desktop) + var(--scroll-margin-adjustment));
}
@media (max-width: 1024px) {
    #menu,
    #commitment,
    #contact {
        scroll-margin-top: calc(var(--header-height-tablet) + var(--scroll-margin-adjustment));
    }
}
@media (max-width: 768px) {
    #menu,
    #commitment,
    #contact {
        scroll-margin-top: calc(var(--header-height-mobile) + var(--scroll-margin-adjustment));
    }
    /* additional-menu-section のパディングに var(--image-margin-x) を適用済みなので、
       ここでは個別の要素の幅を 100% に設定して、親のパディングに合わせる */
    .menu-items-container {
        padding-left: 0;
        padding-right: 0;
    }
    .menu-item {
        width: 100%; /* 親の幅に合わせる */
        max-width: none; /* 最大幅の制約を解除 */
        padding: 0px; /* スマートフォン表示時のパディングを0pxに設定 */
    }
}
@media (max-width: 480px) {
    #menu,
    #commitment,
    #contact {
        scroll-margin-top: calc(var(--header-height-small-mobile) + var(--scroll-margin-adjustment));
    }
    .menu-items-container {
        padding-left: 0;
        padding-right: 0;
    }
    .menu-item {
        width: 100%; /* 親の幅に合わせる */
        max-width: none; /* 最大幅の制約を解除 */
        padding: 0px; /* スマートフォン表示時のパディングを0pxに設定 */
    }
}


.menu-image {
    opacity: 0;           /* 初期状態: 透明 */
    transform: scale(1.5); /* 初期状態: 1.5倍に拡大 */
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out; 
}

.menu-image.fade-in {
    opacity: 1;           /* アニメーション後: 不透明 */
    transform: scale(1);   /* アニメーション後: 元のサイズに戻る */
}

/* -------------------------------------------------
    スマホ用のスタイル調整 (768px以下のデバイス)
    透明からフェードインのみ（拡大・縮小ギミックなし）
------------------------------------------------- */
@media (max-width: 768px) {
    .menu-image {
        opacity: 0;           /* ★初期状態は透明のまま★ */
        transform: scale(1);  /* ★初期状態を元のサイズにする（拡大・縮小ギミックを無効化）★ */
        transition: opacity 0.8s ease-in-out; /* ★opacity のトランジションのみ残す★ */
        /* transform のトランジションを削除することで、拡大・縮小アニメーションがなくなる */

        /* max-width: none; は、もし必要ならここに追加 */
        max-width: none;
    }

    /* .menu-image.fade-in はこのメディアクエリ内では特に変更不要 */
    /* 適用されれば opacity: 1; transform: scale(1); となり、フェードインアニメーションになる */
}

/* 480px以下のデバイス（小型スマホ）向け */
@media (max-width: 480px) {
    .menu-image {
        opacity: 0;           /* ★初期状態は透明のまま★ */
        transform: scale(1);  /* ★初期状態を元のサイズにする★ */
        transition: opacity 1.5s ease-in-out; /* ★opacity のトランジションのみ残す★ */
        /* 必要であれば、ここでさらに細かく幅などを調整 */
    }
}


.menu-items-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1280px;
    margin: 50px auto 0 auto;
    padding-bottom: 30px;
    border-bottom: 2px solid #fff;
}

.menu-item {
    background-color: transparent; /* 背景色透明 */
    color: #000; /* 文字色黒 */
    padding: 25px;
    width: 600px; /* 固定幅 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.menu-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: cover;
    border-radius: 3px;
}
@media (max-width: 768px) {
    .menu-image {
        width: 100%; /* 幅を100%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
    }
}
@media (max-width: 480px) {
    .menu-image {
        width: 120%; /* 幅を120%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
    }
}

.menu-description {
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--text-white); /* 白い文字色 */
    text-align: left;
}

.menu-title {
    font-size: 1.8em;
    font-weight: 700;
    margin: 0 auto 0 auto;
    color: #ffc500; /* タイトル色 */
}



.menu-title .highlight-box {
    display: inline-block;
    background-color: black; /* 背景色 */
    color: #EFAD00; /* 文字色 */
    padding: 5px 40px; /* PCでのパディング */
    border-radius: 100px; /* PCでの角丸 */
    white-space: nowrap; /* PCでは改行なし */
    font-size: 1em; /* 親のfont-sizeを継承 */
    font-weight: bold;
}

/* 768px以下のデバイスでの調整（タブレット・スマホ向け） */
@media (max-width: 768px) {
    .menu-title .highlight-box {
        background-color: black; /* 背景色を再度明示的に指定（重要） */
        color: #EFAD00; /* 文字色を再度明示的に指定（重要） */
        padding: 4px 40px; /* スマホで調整したパディング */
        border-radius: 100px; /* スマホで調整した角丸 */
        font-size: 0.8em; /* スマホで絶対単位のフォントサイズ */
        white-space: normal; /* スマホでは改行を許可 */
        display: inline-block; 
        max-width: none;
    }
}

/* 480px以下のデバイスでの調整（小型スマホ向け） */
@media (max-width: 480px) {
    .menu-title .highlight-box {
        background-color: black; /* ここでも明示的に指定 */
        color: #EFAD00; /* ここでも明示的に指定 */
        padding: 3px 30px; /* 小型スマホでさらに調整したパディング */
        border-radius: 100px; /* 小型スマホでさらに調整した角丸 */
        font-size: 0.8em; /* 小型スマホでさらに調整したフォントサイズ */
        white-space: normal; /* 継承されるが念のため */
    }
}



.menu-price {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 auto 0 auto;
    color: var(--text-white); /* 価格色白 */
}

.menu-price .price-yen {
    font-size: 0.7em;
    font-weight: 400;
    margin-left: 0.2em;
}




/* -------------------------------------------------
    新しい独立したメニューセクションのスタイル
------------------------------------------------- */
.additional-menu-section {
    background-color: var(--primary-red);
    padding: 50px var(--image-margin-x) 100px var(--image-margin-x); /* デスクトップのパディングに変数を使用 */
    text-align: center;
    z-index: 2000;
}
@media (max-width: 768px) {
    .additional-menu-section {
        padding: 40px var(--image-margin-x) 80px var(--image-margin-x); /* var(--image-margin-x) を使用 */
    }
}
@media (max-width: 480px) {
    .additional-menu-section {
        padding: 30px var(--image-margin-x) 60px var(--image-margin-x); /* var(--image-margin-x) を使用 */
    }
}

.additional-menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1280px;
    margin: 50px auto 0 auto;
    border-bottom: 2px solid #fff;
    padding-bottom: 50px;
}
@media (max-width: 1024px) {
    .additional-menu-container {
        gap: 30px;
    }
}
@media (max-width: 768px) {
    .additional-menu-container {
        flex-direction: column; /* 縦並びにする */
        align-items: center;
        gap: 30px;
        width: 100%; /* 親要素のパディングを活かすため幅を100%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
    }
}
@media (max-width: 480px) {
    .additional-menu-container {
        width: 100%; /* 親要素のパディングを活かすため幅を100%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
    }
}

.additional-menu-item {
    background-color: #000000;
    color: #FFF;
    padding: 15px; /* デフォルトのパディング */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: calc((1280px - (40px * 2)) / 3); /* 3列横並び計算 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* アイテム内のテキストを中央揃えに保つ */
}
@media (max-width: 1024px) {
    .additional-menu-item {
        width: calc((100% - 30px) / 2); /* 2列表示に調整 */
    }
}
@media (max-width: 768px) {
    .additional-menu-item {
        width: 100%; /* 幅を100%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
        padding: 20px; /* スマートフォン表示時のパディングを20pxに設定 */
        /* アイテム内のテキストは個別に調整するため、ここではtext-alignは変更しない */
    }
    .additional-menu-description {
        text-align: left; /* 説明文を左揃えに修正 */
        width: 100%; /* 親要素の幅に合わせる */
        margin-bottom: 10px; /* マージンを小さくする */
    }
    .additional-menu-title {
        text-align: right; /* タイトルを右揃えに修正 */
        width: 100%; /* 親要素の幅に合わせる */
        margin-bottom: 5px; /* マージンを小さくする */
    }
    .additional-menu-price {
        text-align: right; /* 価格を右揃えに修正 */
        width: 100%; /* 親要素の幅に合わせる */
        margin-top: 0; /* 価格の上のマージンを0にする */
    }
}
@media (max-width: 480px) {
    .additional-menu-item {
        width: 100%; /* 幅を100%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
        padding: 20px; /* スマートフォン表示時のパディングを20pxに設定 */
        /* アイテム内のテキストは個別に調整するため、ここではtext-alignは変更しない */
    }
    .additional-menu-description {
        text-align: left; /* 説明文を左揃えに修正 */
        width: 100%; /* 親要素の幅に合わせる */
        margin-bottom: 10px; /* マージンを小さくする */
    }
    .additional-menu-title {
        text-align: right; /* タイトルを右揃えに修正 */
        width: 100%; /* 親要素の幅に合わせる */
        margin-bottom: 5px; /* マージンを小さくする */
    }
    .additional-menu-price {
        text-align: right; /* 価格を右揃えに修正 */
        width: 100%; /* 親要素の幅に合わせる */
        margin-top: 0; /* 価格の上のマージンを0にする */
    }
}

.additional-menu-image {
    width: 100%; /* 幅を100%に修正 */
    max-width: none; /* モバイルでの最大幅の制約を解除 */
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
    border-radius: 3px;
}
@media (max-width: 1024px) {
    .additional-menu-image {
        max-width: 350px;
    }
}
@media (max-width: 768px) {
    .additional-menu-image {
        width: 100%; /* 幅を100%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
    }
}
@media (max-width: 480px) {
    .additional-menu-image {
        width: 100%; /* 幅を100%に修正 */
        max-width: none; /* モバイルでの最大幅の制約を解除 */
    }
}

.additional-menu-description {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 20px;
}

.additional-menu-title {
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
    color: #EFAD00;
}
@media (max-width: 1024px) {
    .additional-menu-title {
        font-size: 1.6em;
    }
}
@media (max-width: 768px) {
    .additional-menu-title {
        font-size: 1.5em;
    }
}
@media (max-width: 480px) {
    .additional-menu-title {
        font-size: 1.3em;
    }
}

.additional-menu-price {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 auto 0 auto;
    color: #FFF;
}
@media (max-width: 1024px) {
    .additional-menu-price {
        font-size: 1.3em;
    }
}
@media (max-width: 768px) {
    .additional-menu-price {
        font-size: 1.2em;
    }
}
@media (max-width: 480px) {
    .additional-menu-price {
        font-size: 1.0em;
    }
}


/* -------------------------------------------------
    Googleマップのスタイル
------------------------------------------------- */
.map-container {
    position: relative;
    width: calc(100% - (var(--image-margin-x) * 2));
    max-width: auto;
    margin: 50px auto 0 auto;
    height: 400px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Googleマップのiframe自体 */
.google-map {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* contactセクションの調整（もし必要なら） */
#contact {
    padding-bottom: 50px;    
}


/* -------------------------------------------------
    店舗情報セクションのスタイル
------------------------------------------------- */
.store-info-section {
    padding: 50px var(--image-margin-x) 100px var(--image-margin-x);
    text-align: center;
    background-color: var(--primary-red);
    color: var(--text-white);
    scroll-margin-top: calc(var(--header-height-desktop) + var(--scroll-margin-adjustment));
}
@media (max-width: 1024px) {
    .store-info-section {
        padding: 40px var(--image-margin-x) 80px var(--image-margin-x);
    }
}
@media (max-width: 768px) {
    .store-info-section {
        padding: 30px var(--image-margin-x) 60px var(--image-margin-x);
    }
}
@media (max-width: 480px) {
    .store-info-section {
        padding: 20px var(--image-margin-x) 40px var(--image-margin-x);
    }
}

.store-info-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1280px;
    margin: 50px auto 0 auto;
    padding: 30px;
    background-color: var(--secondary-black);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
    .store-info-content {
        gap: 30px;
    }
}
@media (max-width: 768px) {
    .store-info-content {
        flex-direction: column; /* 縦並びにする */
        align-items: center; /* 中央寄せ */
        gap: 25px;
        padding: 20px;
    }
}
@media (max-width: 480px) {
    .store-info-content {
        gap: 20px;
        padding: 15px;
    }
}

.store-image-wrapper {
    flex-shrink: 0; /* 縮まないようにする */
    flex-basis: 500px; /* 画像のベース幅 */
    max-width: 100%; /* 親の幅を超えないように */
    /* 画像のアスペクト比を保ちつつ、レスポンシブに対応 */
}
@media (max-width: 1024px) {
    .store-image-wrapper {
        flex-basis: 400px;
    }
}
@media (max-width: 768px) {
    .store-image-wrapper {
        flex-basis: auto; /* autoに戻す */
        width: 100%; /* 幅を親いっぱいに */
        max-width: 400px; /* 最大幅を設定 */
    }
}

.store-image {
    width: 100%;
    height: auto;
    display: block; /* 余計な余白をなくす */
    border-radius: 4px; /* 画像の角も少し丸くする */
    object-fit: cover;
}

.store-details {
    flex-grow: 1;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    position: relative; /* 子要素のabsolute基準のため */
    z-index: 10; /* テキストを画像の上に表示するため、高めに設定 */
}
@media (max-width: 768px) {
    .store-details {
        padding-left: 0; /* パディングをリセット */
        text-align: center; /* テキストを中央揃え */
    }
    .store-logo-container {
        text-align: left; /* スマホでロゴのコンテナを左寄せ */
    }
    .store-logo-container img {
        margin-left: 0; /* 画像自体の左マージンをリセット */
        margin-right: auto; /* 右マージンを自動にして左に寄せる */
    }
}
@media (max-width: 480px) {
    .store-details {
        padding-left: 0; /* パディングをリセット */
        text-align: center; /* テキストを中央揃え */
    }
    .store-logo-container {
        text-align: left; /* スマホでロゴのコンテナを左寄せ */
    }
    .store-logo-container img {
        margin-left: 0; /* 画像自体の左マージンをリセット */
        margin-right: auto; /* 右マージンを自動にして左に寄せる */
    }
}

.store-details h3 {
    font-family: 'Zen Old Mincho', serif; /* 和風フォント */
    font-size: 2.2em;
    color: #FFD700; /* 目を引く色 */
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}
@media (max-width: 1024px) {
    .store-details h3 {
        font-size: 2em;
    }
}
@media (max-width: 768px) {
    .store-details h3 {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
}
@media (max-width: 480px) {
    .store-details h3 {
        font-size: 1.6em;
    }
}

.store-details p {
    font-size: 1.1em;
    margin-bottom: 10px;
    line-height: 1.6;
}
@media (max-width: 1024px) {
    .store-details p {
        font-size: 1em;
    }
}
@media (max-width: 768px) {
    .store-details p {
        padding-left: 0; /* アイコン用パディングをリセット */
    }
}
@media (max-width: 480px) {
    .store-details p {
        font-size: 0.9em;
    }
}

/* 電話番号のリンクのスタイル調整 */
.store-details p.tel a {
    color: var(--text-white) !important; /* ★白い文字色に強制設定★ */
    text-decoration: none !important; /* ★アンダーラインを強制削除★ */
    font-size: 1.2em; /* フォントサイズを少し大きく */
}


.store-details p.address,
.store-details p.tel,
.store-details p.hours,
.store-details p.holiday,
.store-details p.parking,
.store-details p.payment {
    padding-left: 25px; /* アイコン用のスペース */
    position: relative;
}

.store-details p.address::before {
    content: '🏠'; /* 家の絵文字アイコン */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .store-details p.address::before {
        position: static; /* アイコンをテキストの前に直接表示 */
        transform: none;
        margin-right: 5px; /* テキストとの間にスペース */
    }
}

.store-details p.tel::before {
    content: '📞'; /* 電話の絵文字アイコン */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .store-details p.tel::before {
        position: static; /* アイコンをテキストの前に直接表示 */
        transform: none;
        margin-right: 5px; /* テキストとの間にスペース */
    }
}

.store-details p.hours::before {
    content: '⏰'; /* 時計の絵文字アイコン */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .store-details p.hours::before {
        position: static; /* アイコンをテキストの前に直接表示 */
        transform: none;
        margin-right: 5px; /* テキストとの間にスペース */
    }
}

.store-details p.holiday::before {
    content: '🗓️'; /* カレンダーの絵文字アイコン */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .store-details p.holiday::before {
        position: static; /* アイコンをテキストの前に直接表示 */
        transform: none;
        margin-right: 5px; /* テキストとの間にスペース */
    }
}

.store-details p.parking::before {
    content: '🅿️'; /* 駐車場の絵文字アイコン */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .store-details p.parking::before {
        position: static; /* アイコンをテキストの前に直接表示 */
        transform: none;
        margin-right: 5px; /* テキストとの間にスペース */
    }
}

.store-details p.payment::before {
    content: '💳'; /* クレジットカードの絵文字アイコン */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
@media (max-width: 768px) {
    .store-details p.payment::before {
        position: static; /* アイコンをテキストの前に直接表示 */
        transform: none;
        margin-right: 5px; /* テキストとの間にスペース */
    }
}


/* -------------------------------------------------
    微調整用
------------------------------------------------- */
.size_1 {
    width: 50%;
    height: auto;
}

.size_2 {
    width: 70%;
    height: auto;
	text-align: center;
}

.size_3 {
    width: 80%; /* デスクトップの基準幅 */
    height: auto;
    margin: 0 auto 0 auto;
    margin-bottom: 150px;
    text-align: center;
}

/* 全ての画像に共通の基本スタイル */
.size_3 .desktop-image,
.size_3 .mobile-image {
    width: 100%; /* 親要素いっぱいに表示 */
    height: auto;
    display: block; /* デフォルトでブロック要素 */
}

/* ★修正ここから★ */

/* デフォルト（デスクトップ）ではデスクトップ用画像を表示し、スマホ用画像を非表示 */
.size_3 .desktop-image {
    display: block; /* デスクトップ表示時に確実に表示されるように明示 */
}

.size_3 .mobile-image {
    display: none; /* デフォルトで非表示 */
}

/* ★修正ここまで★ */


/* タブレット以下のサイズになったら */
@media (max-width: 1024px) {
    .size_3 {
        width: 85%;
        margin-bottom: 120px;
    }
}

/* スマートフォン以下のサイズになったら */
@media (max-width: 768px) {
    .size_3 {
        width: 90%;
        margin-bottom: 100px;
    }
    /* ★修正ここから★ */
    /* スマートフォンではデスクトップ用画像を非表示にし、スマホ用画像を表示 */
    .size_3 .desktop-image {
        display: none;
    }
    .size_3 .mobile-image {
        display: block;
    }
    /* ★修正ここまで★ */
}

/* さらに小さいスマートフォン */
@media (max-width: 480px) {
    .size_3 {
        width: 95%;
        margin-bottom: 80px;
    }
}

.tel {
    color: #FFF;
    text-decoration: none;
    font-size: 1.8em;
    vertical-align: -5px;
}


/* -------------------------------------------------
    ブレイクポイントアニメーション
------------------------------------------------- */



/* -------------------------------------------------
    アニメーション定義
------------------------------------------------- */
/* 上下に動くアニメーションの定義 */
@keyframes bounceUpDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(var(--illust-animation-distance)); /* 変数を使用 */
    }
}