/* ==============================================
Makeshop LP カスタムCSS（最終完成版）
============================================== */

/* --- Swiper / BxSlider 関連の調整 --- */
.swiper-container .bx-wrapper {
    border: none;
}
.swiper-container .bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
    position: static !important;
}
.new-item-swiper-container {
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
}
.swiper-button-next,
.swiper-button-prev {
    top: 44%;
}
.new-item-yaji {
    top: 32%;
}
.bx-wrapper .bx-pager {
    color: #666;
    background: #000000;
}
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus,
.bx-wrapper .bx-pager.bx-default-pager a:hover {
    background: #ffffff !important;
}

/* --- 画像コンテンツと「丸近の強み」セクションの基本スタイル --- */
/* ★修正: 「丸近の強み」セクション内の各画像（image-content、image_wrap）のレスポンシブ対応 */
.image-content {
    object-fit: contain; /* 画像全体が収まるように縮小表示 */
    display: block;
    width: 100%; /* 親要素の幅に合わせて幅を調整 */
    height: auto; /* 高さは自動調整で縦横比を維持 */
}
.image_wrap {
    overflow: hidden;
    max-width: 400px; /* デスクトップでの画像の最大幅（PC表示のflex-basisの代わり） */
    margin: 0 auto 20px auto; /* 中央寄せと下の余白 */
}

/* --- 「丸近の強み」セクション --- */
#index_clinic {
    max-width: 730px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    overflow-x: hidden;
}
#index_clinic .index_cb_catch {
    text-align: center;
    margin-bottom: 30px;
}
#index_clinic .item.clearfix {
    display: flex;
    flex-direction: column; /* スマホデフォルトは縦並び */
    align-items: center;
    text-align: left;
    margin-bottom: 40px;
}
/* ★変更: `image_wrap img` の定義は `image-content` と統合したため削除 */
/* #index_clinic .image_wrap img {
    max-width: 100%;
    height: auto;
} */
#index_clinic .title_area {
    width: 100%;
}
#index_clinic .title_area h4 {
    font-size: 1.2em;
    margin-bottom: 10px;
}
#index_clinic .title_area p {
    font-size: 0.9em;
    line-height: 1.6;
}
/* ★追加: 「丸近の強み」テキストのサイズ調整 */
.index_cb_catch .index-title .strong-point-text {
    font-size: 0.7em; /* 親要素（h2）の70%のサイズ */
}
/* ★追加: デスクトップ版のデフォルトスタイル（「～食卓に、笑顔と感動を～」タイトル） */
.section-title.index-title {
    text-align: center; /* タイトルを中央揃えにする */
    font-size: 30px; /* デスクトップのデフォルトサイズ */
    margin-bottom: 20px; /* タイトルの下部に余白 */
}
/* ★修正: `index_cb_catch .desc` の `color` 指定を削除/調整 */
.index_cb_catch .desc {
    font-size: 20px; /* デスクトップの説明文サイズ */
    line-height: 1.6;
    /* color: #555; */ /* ← ここをコメントアウトまたは削除して黒（デフォルト）に戻す */
}


/* --- INFORMATIONセクション --- */
.info-item-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
}
.info-item {
    display: flex;
    flex-direction: column; /* スマホデフォルトは縦並び */
    align-items: center;
    text-align: left;
    width: 100%;
}
.info-item .info-text {
    margin-bottom: 20px;
}
.info-item .info-image img {
    max-width: 100%;
    height: auto;
}

/* --- 商品配送時のご案内セクション --- */
.delivery-info-container {
    max-width: 630px;
    margin: 20px auto;
    padding: 15px;
    background-color: transparent;
    text-align: left;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #fff;
}
.delivery-info-container p {
    margin-bottom: 10px;
    line-height: 1.6;
}
.delivery-info-container p:last-child {
    margin-bottom: 0;
}

/* --- モーダルウィンドウのスタイル --- 
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 8px;
    position: relative;
    width: 90%;
    max-width: 730px;
    max-height: 90vh;
    overflow-y: auto;
    color: #333;
}
.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 2em;
    color: #888;
    cursor: pointer;
}
.modal-close-btn:hover {
    color: #000;
}
.modal-title {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
}
.company-profile-modal-body {
    text-align: left;
    font-size: 0.9em;
}
body.modal-open {
    overflow: hidden;
}
*/

/* --- レスポンシブテーブルのスタイル --- */
.responsive-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}
.responsive-table-container table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
}
.responsive-table-container th,
.responsive-table-container td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}
.responsive-table-container th {
    background-color: #f9f9f9;
    width: 30%;
}

/* ==============================================
CTAボタン / お知らせバー / カートボタン
============================================== */


/* --- 追従CTAボタン（画面右上/画面下部） --- */
#fixed-cta-buttons {
    position: fixed;
    z-index: 9999;
}
.cta-button a {
    display: block;
    padding: 14px;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    border: none;
    /*box-shadow:inset 0 0 0 2px #5f5f5f;  ★ここを追加: 内側のゴールドライン */
    background-color: #f40010;
    border-radius: 5px; /* ★ここを追加: 角を丸くする (既存になければ) */
}
.cta-button a:hover {
    background-color: #d1000e;
    /*box-shadow:inset 0 0 0 2px #5f5f5f;  ホバー時のライン色（例:少し明るいゴールド） */
    transform: translateY(-2px);
}

/* --- カートボタン --- */
.header-cart a,
.header-cart-btn a {
    background-image: none !important;
    background-color: #f40010 !important;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- お知らせバー --- */
.header-news-wrap {
    background-image: none;
    background-color: #f40010;
}
.header-news-wrap .news-swiper-container {
    width: 100%;
}
.header-news-wrap li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    gap: 8px;
}
.header-news-wrap .news-list-title {
    white-space: nowrap;
}
.header-news-wrap .news-list-title a,
.header-news-wrap .header-news-list-icon {
    color: #FFFFFF !important;
}

/* ==============================================
「蟹料理専門店」ボタンのカラー修正
============================================== */
/* 「蟹料理専門店」ボタンの通常時のスタイル */
.cta-button-restaurant a {
    background-color: #5f5f5f !important;
    border-radius: 5px; /* ★ここを追加: 角丸が適用されるように */
    box-shadow: inset 0 0 0 2px #5f5f5f; /* ★ここを追加: 個別のゴールドライン */
}
/* 「蟹料理専門店」ボタンにマウスを乗せた時のスタイル */
.cta-button-restaurant a:hover {
    background-color: #5f5f5f !important;
    box-shadow: inset 0 0 0 2px #5f5f5f; /* ★ここを追加: ホバー時のライン色 */
}

/* ==============================================
レスポンシブ設定 (PC / スマホ)
============================================== */

/* --- PCモードのスタイル (769px以上) --- */
@media screen and (min-width: 769px) {
    /* PC: 追従CTAボタンの位置 */
    body > #fixed-cta-buttons {
        /* top: 32px !important;  この行は削除またはコメントアウト */
        bottom: 25px; /* 画面下端からの距離を調整（例: 25px） */
        right: 60px;  /* 画面右端からの距離を調整（例: 60px）。カートボタンの右からのピクセル数に合わせる */
        width: auto;
        display: flex;
        gap: 10px;
    }
    .cta-button a {
        width: 160px;
        border-radius: 5px;
    }
    /* PC: お知らせバーの高さ */
    .header-news-wrap li {
        padding: 10px 1.5em;
    }
    /* PC: お知らせバー内のスライドの高さ */
    .header-news-wrap .swiper-slide {
        height: 34px !important; /* PCでは34pxに固定 */
    }
    /* PC: 「丸近の強み」レイアウト */
    #index_clinic .item.clearfix {
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
    #index_clinic .item:nth-of-type(even) {
        flex-direction: row-reverse;
    }
    /* ★修正: 「丸近の強み」セクション内の各画像（image_wrap）のレスポンシブ対応 */
    #index_clinic .image_wrap {
        /* flex-basis: 250px; */ /* この行をコメントアウトするか削除 */
        flex-shrink: 0;
        margin-bottom: 0;
        max-width: 400px; /* デスクトップで表示される最大の幅（必要に応じて調整） */
        width: 100%; /* 親要素の幅に合わせて柔軟に対応 */
        height: auto; /* 高さは自動調整で縦横比を維持 */
    }
    #index_clinic .title_area {
        flex-grow: 1;
    }
    /* PC: INFORMATIONセクションレイアウト */
    .info-item {
        flex-direction: row;
        align-items: flex-start;
    }
    .info-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    .info-item .info-text {
        flex: 1;
        padding-right: 30px;
        margin-bottom: 0;
    }
    .info-item:nth-child(even) .info-text {
        padding-right: 0;
        padding-left: 30px;
    }
    .info-item .info-image {
        flex-shrink: 0;
        width: 300px;
    }
    /* ★追加: タブレット向けのタイトル調整 */
    .section-title.index-title {
        font-size: 28px; /* タブレット向けにタイトルサイズを調整 */
    }
    .index_cb_catch .index-title .strong-point-text {
        font-size: 0.75em; /* タブレットで調整する場合 */
    }
    .index_cb_catch .desc {
        font-size: 18px; /* タブレット向けに説明文サイズを調整 */
    }
}

/* --- スマホモードのスタイル (768px以下) --- */
@media screen and (max-width: 768px) {
    /* スマホ: 追従CTAボタンの位置 */
    #fixed-cta-buttons {
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
    }
    .cta-button {
        flex: 1;
    }
    .cta-button-shop a {
        border-right: 1px solid rgba(255, 255, 255, 0.3);
    }
    /* スマホ: フッターの余白 */
    footer {
        margin-bottom: 50px;
    }
    /* スマホ: お知らせバーの高さ */
    .header-news-wrap li {
        padding: 8px 1em;
    }
    /* スマホ: お知らせバー内のスライドの高さ */
    .header-news-wrap .swiper-slide {
        height: 38px !important; /* スマホでは38pxに固定 */
    }
    /* スマホ: ヘッダーの背景色 */
    .header-inner-wrap {
        background: #222222 !important;
    }
    /* スマホ: レスポンシブテーブルのスタイル */
    .responsive-table-container table {
        min-width: 320px;
    }
    .responsive-table-container th,
    .responsive-table-container td {
        padding: 8px;
        font-size: 0.85em;
    }
    .responsive-table-container th {
        width: 120px;
    }
    /* ★修正: 「丸近の強み」画像をスマホでフル幅表示に */
    #index_clinic .image_wrap {
        width: 100%; /* 親要素の幅いっぱいに広げる */
        max-width: 100%; /* 最大幅の制限も解除（スマホでは常に100%にする） */
        height: auto; /* 高さは自動 */
        margin: 0; /* 中央寄せのmarginをリセット */
        margin-bottom: 20px; /* 下部の余白は残すか調整 */
    }
    #index_clinic .image_wrap img.image-content {
        width: 100%; /* 画像自体も親要素の幅いっぱいに広げる */
        height: auto; /* アスペクト比を維持 */
        object-fit: contain; /* 画像全体が収まるように縮小表示 */
    }
    /* ★追加: 各コンテンツブロックに左右のパディングを追加 */
    #index_clinic .item.clearfix {
        padding: 0 !important; /* 左右にパディングを追加して、端に寄りすぎないようにする */
        box-sizing: border-box;
    }
    /* ★追加: INFORMATIONセクションのタイトル */
    .section-title.index-title {
        font-size: 20px; /* スマートフォンでタイトルを小さくする */
        padding: 0 15px; /* 左右にパディングを追加して、画面端に寄りすぎないようにする */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
        margin-bottom: 15px; /* スマホでの余白を調整 */
    }
    /* ★追加: INFORMATIONセクション全体の余白調整（任意） */
    .section.recommend-item {
        padding: 20px 0; /* セクション全体の上下のパディングを調整 */
    }
    /* ★追加: スマートフォン向けの「丸近の強み」テキストサイズ調整 */
    .index_cb_catch {
        padding: 0 15px; /* 左右に少しパディングを追加して、画面端に文字が寄りすぎないようにする */
    }
    .index_cb_catch .index-title {
        font-size: 24px; /* スマートフォンでのタイトルサイズを小さくする */
        margin-bottom: 10px;
    }
    .index_cb_catch .desc {
        font-size: 16px; /* スマートフォンでの説明文サイズを小さくする */
    }
    .index_cb_catch .index-title .strong-point-text {
        font-size: 0.8em; /* スマホで調整する場合 */
    }
}

/* 20250915_★修正: `image-wrapper` クラスのスタイル（一番最初のトップ画像用） */
.image-wrapper {
    max-width: 600px; /* 700px * 0.8 = 560px */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}
.responsive-image {
    max-width: 100%;
    height: auto;
    display: block;
}
/* ★追加: `image-wrapper` スマホ向け調整 */
@media (max-width: 768px) {
    .image-wrapper {
        padding: 0 10px;
    }
}
/* ★追加: タブレット向けのタイトル調整（重複を解消してここにまとめる） */
@media (min-width: 769px) and (max-width: 1024px) {
    .section-title.index-title {
        font-size: 28px; /* タブレット向けにタイトルサイズを調整 */
    }
    .index_cb_catch .index-title {
        font-size: 30px; /* タブレット向けにタイトルサイズを調整 */
    }
    .index_cb_catch .desc {
        font-size: 18px; /* タブレット向けに説明文サイズを調整 */
    }
    .index_cb_catch .index-title .strong-point-text {
        font-size: 0.75em; /* タブレットで調整する場合 */
    }
}

/* 「丸近の強み」セクションの画像コンテナ */
#index_clinic .image_wrap {
    /* height: auto;  ← この行は削除またはコメントアウト */
    height: 250px; /* 例: 画像コンテナの固定の高さを設定 (PC向け) */
    position: relative; /* object-positionのために必要 */
    overflow: hidden; /* はみ出た部分を非表示にするために必須 */
    max-width: 400px; /* デスクトップでの画像の最大幅は維持 */
    margin: 0 auto 20px auto; /* 中央寄せと下の余白は維持 */
}

#index_clinic .image_wrap img.image-content {
    /* width: 100%; /* 親要素の幅に合わせて幅を調整 */
    /* height: auto; /* 高さは自動調整で縦横比を維持 */
    object-fit: cover; /* コンテナを埋めるように画像を拡大・トリミング */
    object-position: bottom; /* 画像の下を基準に表示し、上側をトリミング */
    width: 100%; /* 親要素の幅に合わせる */
    height: 100%; /* 親要素の高さに合わせる */
    display: block; /* 画像のレイアウトを調整 */
}

/* PCモード (769px以上) での調整 */
@media screen and (min-width: 769px) {
    #index_clinic .image_wrap {
        height: 250px; /* PCでの画像コンテナの推奨高さ（必要に応じて調整） */
    }
}

/* スマートフォンモード (768px以下) での調整 */
@media screen and (max-width: 768px) {
    #index_clinic .image_wrap {
        /* スマホではPCよりも高さを抑えるなど、バランスを調整 */
        height: 180px; /* 例: スマホでの画像コンテナの高さ */
        width: 100%; [cite_start]/* スマホでは幅を100%に広げる */ [cite: 156]
        max-width: 100%; [cite_start]/* スマホでは最大幅も100% */ [cite: 157]
        margin: 0 auto 20px auto; /* スマホでも中央寄せと余白を維持 */
        padding: 0 !important; [cite_start]/* 必要であればパディングを追加 */ [cite: 164]
        box-sizing: border-box; [cite_start]/* パディングを含めて幅を計算 */ [cite: 165]
    }
    #index_clinic .image_wrap img.image-content {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom;
    }
}

/* 「丸近の強み」セクションの画像コンテナ */
#index_clinic .image_wrap {
    height: 250px; /* 例: 画像コンテナの固定の高さを設定 (PC向け) */
    position: relative;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto 20px auto;
}

#index_clinic .image_wrap img.image-content {
    object-fit: cover; /* コンテナを埋めるように画像を拡大・トリミング */
    object-position: 50% 30%; /* ★変更点: 水平方向は中央(50%)、垂直方向は上寄り(30%) */
    width: 100%;
    height: 100%;
    display: block;
}

/* PCモード (769px以上) での調整 */
@media screen and (min-width: 769px) {
    #index_clinic .image_wrap {
        height: 250px; /* PCでの画像コンテナの推奨高さ（必要に応じて調整） */
    }
    #index_clinic .image_wrap img.image-content {
        object-position: 50% 30%; /* ★変更点: PCでも上寄り(30%)に */
    }
}

/* スマートフォンモード (768px以下) での調整 */
@media screen and (max-width: 768px) {
    #index_clinic .image_wrap {
        height: 180px; /* 例: スマホでの画像コンテナの高さ */
        width: 100%;
        max-width: 100%;
        margin: 0 auto 20px auto;
        padding: 0 !important;
        box-sizing: border-box;
    }
    #index_clinic .image_wrap img.image-content {
        object-fit: cover;
        object-position: 50% 30%; /* ★変更点: スマホでも上寄り(30%)に */
    }
}

/* 「丸近の強み」セクションの画像とテキストの50:50調整 */
@media screen and (min-width: 769px) {
    #index_clinic .item.clearfix {
        display: flex;
        flex-direction: row; /* PCでは横並び */
        align-items: flex-start; /* 垂直方向の上揃え（コンテンツの量に合わせて調整） */
        width: 100%;
        gap: 20px; /* 画像とテキストの間に余白を入れる */
    }

    #index_clinic .item:nth-of-type(even) {
        flex-direction: row-reverse; /* 偶数番目の項目は左右を反転 */
    }

    #index_clinic .image_wrap {
        flex: 0 0 calc(50% - 10px); /* ★変更点: 全体の50%からgapの半分を引いた幅に */
        height: 250px; /* 画像コンテナの固定の高さを設定 (PC向け) - 以前のご要望からの継続 */
        position: relative;
        overflow: hidden;
        max-width: none; /* 元のmax-widthは解除し、flexの計算に任せる */
        margin-bottom: 0; /* PCでは下マージン不要 */
        margin-left: 0;   /* 中央寄せのリセット */
        margin-right: 0;  /* 中央寄せのリセット */
    }

    #index_clinic .image_wrap img.image-content {
        object-fit: cover; /* コンテナを埋めるように画像を拡大・トリミング */
        object-position: 50% 30%; /* 画像の上寄り表示 - 以前のご要望からの継続 */
        width: 100%; /* 親要素の幅いっぱいに画像を表示 */
        height: 100%; /* 親要素の高さいっぱいに画像を表示 */
        display: block;
    }

    #index_clinic .title_area {
        flex: 0 0 calc(50% - 10px); /* ★変更点: 全体の50%からgapの半分を引いた幅に */
        width: auto; /* flexの計算に任せるためwidthをautoに */
    }
}

/* スマートフォンモード (768px以下) の調整 (既存の縦並びを維持) */
@media screen and (max-width: 768px) {
    #index_clinic .item.clearfix {
        flex-direction: column; /* スマホでは縦並びを維持 */
        align-items: center; /* 中央揃え */
        padding: 0 !important; /* 左右にパディングを追加して、端に寄りすぎないようにする */ [cite: 164]
        box-sizing: border-box; /* パディングを含めて幅を計算 */ [cite: 165]
    }
    #index_clinic .image_wrap {
        width: 100%; /* 親要素の幅いっぱいに広げる */ [cite: 156]
        max-width: 100%; /* 最大幅の制限も解除（スマホでは常に100%にする） */ [cite: 157]
        height: 180px; /* 例: スマホでの画像コンテナの高さ - 以前のご要望からの継続 */
        margin: 0 auto 20px auto; /* 中央寄せと下の余白 */ [cite: 159]
        padding: 0; /* パディングはarticle全体に適用されているためリセット */
    }
    #index_clinic .image_wrap img.image-content {
        width: 100%; /* 画像自体も親要素の幅いっぱいに広げる */ [cite: 161]
        height: 100%; /* アスペクト比を維持 */ [cite: 162]
        object-fit: cover; /* 画像全体が収まるように縮小表示 */ [cite: 163]
        object-position: 50% 30%; /* スマホでも上寄り(30%)に */
    }
    #index_clinic .title_area {
        width: 100%; /* スマホではテキスト領域もフル幅 */
    }
}

/* お知らせバーの文字列位置調整 - スクロール時のずれ対策（align-items: start と padding-top） */

/* PCとスマホ共通で適用される基本設定 */
.header-news-wrap .swiper-slide {
    height: 38px !important; /* バー全体の高さを34pxで固定 */
    line-height: 1 !important;
    display: flex !important;
    align-items: flex-start !important; /* ★変更点: 垂直方向の上揃えに変更 */
    justify-content: flex-start !important;
    overflow: hidden !important;
}

.header-news-wrap li {
    display: flex !important;
    align-items: flex-start !important; /* ★変更点: 垂直方向の上揃えに変更 */
    width: 100% !important;
    height: 100% !important; /* 親である swiper-slide の高さに合わせる */
    margin: 0 !important;
    padding-left: 1em !important; /* 左右のpaddingは維持 */
    padding-right: 1em !important; /* 左右のpaddingは維持 */
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.header-news-wrap .news-list-title a,
.header-news-wrap .header-news-list-icon {
    display: flex !important;
    align-items: flex-start !important; /* ★変更点: 垂直方向の上揃えに変更 */
    height: 100% !important;
    line-height: 1.2 !important; /* テキストの行の高さ */
    text-decoration: none !important;
    vertical-align: middle !important;
}

.header-news-wrap .news-list-detail {
    display: flex !important;
    align-items: flex-start !important; /* ★変更点: 垂直方向の上揃えに変更 */
    height: 100% !important;
    line-height: 1 !important;
}

.header-news-wrap .news-list-detail p.news-list-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important; /* テキストの行の高さ */
}

/* PCモード (min-width: 769px) のみの調整 */
@media screen and (min-width: 769px) {
    .header-news-wrap li {
        /* PCでの上パディングを調整して中央に持ってくる */
        padding-top: 8px !important; /* 例: これまでのPCのpadding-topより少し増やす */
        padding-bottom: 10px !important; /* 必要に応じて調整 */
    }
     /* PC: お知らせバー全体の高さ調整 */
    .header-news-wrap .news-swiper-container {
        height: 38px !important; /* スライドの高さに合わせる */
    }
}

/* スマートフォンモード (max-width: 768px) のみの調整 */
@media screen and (max-width: 768px) {
    .header-news-wrap li {
        /* スマホでの上パディングを調整して中央に持ってくる */
        padding-top: 10px !important; /* 例: これまでのスマホのpadding-topよりさらに増やす */
        padding-bottom: 8px !important; /* これまでのpadding-bottomをさらに減らす、または負の値に（最終手段） */
    }
    /* スマホ: お知らせバー全体の高さ調整 */
    .header-news-wrap .news-swiper-container {
        height: 38px !important; /* スライドの高さに合わせる */
    }
}

/* --- 蟹料理専門店プルアップメニューのスタイル --- */
.cta-button-restaurant {
    position: relative; /* 子要素の絶対配置の基準にする */
}

.restaurant-main-link {
    /* 既存のボタンのスタイルを維持しつつ、必要であれば追加 */
}

.restaurant-dropdown-menu{
    position: absolute;
    bottom: 100%; /* 親ボタンの真上に配置（プルアップ） */
    right: 0; /* 親ボタンの右端に合わせる */
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #222222; /* メニューの背景色（ボタンと合わせるか調整） */
    border-radius: 5px;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* 上方向の影 */
    /* min-width: 150px; /* ★この行を削除またはコメントアウト */
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
    overflow: hidden; /* ★この行を追加 (はみ出し対策) */
}

.cta-button-restaurant.is-active .restaurant-dropdown-menu {
    opacity: 1; /* 表示時に透明度を戻す */
    visibility: visible; /* 表示 */
    transform: translateY(0); /* 初期位置から本来の位置に戻す（アニメーション用） */
}

.restaurant-dropdown-menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* メニュー項目間の区切り線 */
    /* ★ここから追加・修正: 各項目を初期状態で非表示にする (JSアニメーション用) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* 少し下にずらしておく */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* アニメーション設定 */
}

.restaurant-dropdown-menu li:last-child {
    border-bottom: none; /* 最後の項目は区切り線なし */
}

.restaurant-dropdown-menu li a {
    display: block;
    /* ★修正: 右側のパディングを調整 */
    padding: 10px 15px; /* 例: 左右のパディングをなくす */
    /* または padding: 10px 5px; など、好みに合わせて調整 */
    color: #FFFFFF; /* メニュー項目の文字色 */
    text-decoration: none;
    text-align: center; /* テキストを中央寄せ */
    font-size: 14px;
    white-space: nowrap; /* テキストが途中で改行しないように */
    transition: background-color 0.2s ease;
    border-radius: 0;
}

.restaurant-dropdown-menu li:first-child a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.restaurant-dropdown-menu li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.restaurant-dropdown-menu li a:hover {
    background-color: #444444 !important; /* ホバー時の背景色 */
}

/* 各メニュー項目が現れるときのクラス */
.restaurant-dropdown-menu li.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* スマホモードでの調整（必要であれば） */
@media screen and (max-width: 768px) {
    .restaurant-dropdown-menu {
        /* 必要であれば調整 */
    }
}

/* --- バナーセクション（ふるさと納税）のスタイル --- */
.banner-section {
    margin-bottom: 64px; /* セクション下の余白 */
    padding: 0 15px; /* 左右の余白 */
    box-sizing: border-box;
}

.banner-grid {
    display: grid;
    gap: 20px; /* バナー間の隙間 */
    max-width: 1200px; /* 横幅の最大値 */
    margin: 0 auto; /* 中央寄せ */
}

.banner-item img {
    display: block;
    width: 100%; /* 親要素の幅に合わせて画像を伸縮 */
    height: auto; /* 縦横比を維持 */
}

/* PCモード (769px以上) での調整 */
@media screen and (min-width: 769px) {
    .banner-grid {
        grid-template-columns: repeat(2, 1fr); /* 2列均等幅 */
    }
}

/* スマートフォンモード (768px以下) での調整 */
@media screen and (max-width: 768px) {
    .banner-grid {
        grid-template-columns: 1fr; /* 1列にする */
    }
    .banner-section {
        margin-bottom: 40px; /* スマホでの余白調整 */
        padding: 0 10px; /* スマホでの左右の余白調整 */
    }
}


/* --- 新しい3列バナーセクションのスタイル --- */
.three-banner-section {
    margin-bottom: 64px; /* セクション下の余白 */
    padding: 0 15px; /* 左右の余白 */
    box-sizing: border-box;
}

.three-banner-grid {
    display: grid;
    gap: 20px; /* バナー間の隙間を20pxに設定 */
    max-width: 1200px; /* 横幅の最大値を1000pxに設定 */
    margin: 0 auto; /* 中央寄せ */
    grid-template-columns: repeat(3, 1fr); /* PCで3列均等幅 */
}

/* 各バナー内の画像が親要素にフィットするように */
.three-banner-grid .banner-item img {
    display: block;
    width: 100%; /* 親要素の幅に合わせて画像を伸縮 */
    height: auto; /* 縦横比を維持 */
}

/* スマートフォンモード (768px以下) での調整 */
@media screen and (max-width: 768px) {
    .three-banner-grid {
        grid-template-columns: 1fr; /* スマホでは1列にする */
        gap: 15px; /* スマホでのバナー間の隙間（調整可能） */
    }
    .three-banner-section {
        margin-bottom: 40px; /* スマホでのセクション下の余白調整 */
        padding: 0 10px; /* スマホでの左右の余白調整 */
    }
}

/* ★★★ここから追加: 中間サイズのPC画面での調整（PCモードのみに適用）★★★ */
/* 画面幅が769pxから1024pxのPC/タブレット横向き時 */
@media screen and (min-width: 769px) and (max-width: 1366px) {
    body > #fixed-cta-buttons {
        right: 15px; /* この範囲の画面幅では右から20pxに上書き */
    }
}
/* ★★★追加ここまで★★★ */

/* touch_blocker */
.touch_blocker{
    display: none;
}

@media(max-width:768px){
    .touch_blocker{
        display:block;
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:transparent;
        z-index:10;
    }
}