/* ==========================================================================
   ツアーカードをカルーセル（横スクロール）化する追加CSS
   ========================================================================== */

/* 元の.main-inと同じ最大幅を設定して中央に寄せる */
.carousel-container {
    width: 100%;
    max-width: 1200px; /* vipツアー様のPC版コンテンツ幅に合わせて調整してください */
    margin: 0 auto;
    padding: 0 15px;  /* スマホ等で画面端に張り付かないための左右余白 */
    box-sizing: border-box;
}

/* 全体を包むラッパー */
.carousel-wrapper {
    position: relative;
    width: 100%;
    margin: 20px 0;
}

/* 1. 親要素（コンテナ）の横スクロール設定 */
.tour-col3-box {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 20px !important;
    padding-bottom: 15px !important;
    scroll-behavior: smooth;
    grid-template-columns: none !important;
}

/* 2. 子要素（各カード）の幅設定 */
.tour-col3-box .tour-col3 {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 85vw !important;
    float: none !important;
    margin: 0 !important;
}

/* 3. 左右のナビゲーションボタン */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 10;
    transition: all 0.2s ease;
    cursor: pointer;
}

.carousel-btn:hover {
    background-color: #ff9900;
    color: #fff;
    border-color: #ff9900;
}

/* ボタンをコンテナの少し外側に浮かせる（好みに応じて 0px などに調整してください） */
.prev-btn { left: -22px; }
.next-btn { right: -22px; }

/* スマホ・タブレット（タッチデバイス）ではボタンを非表示 */
@media (max-width: 1024px) {
    .carousel-btn {
        display: none !important;
    }
}


/* 4. スクロールバーのデザイン */
.tour-col3-box::-webkit-scrollbar {
    height: 6px;
}
.tour-col3-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.tour-col3-box::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}
.tour-col3-box::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* 1. カード自体に配置の基準点をしっかり設定 */
.tour-col3-box .tour-col3 {
    position: relative !important; /* ラベルをカード基準で配置するため */
    box-sizing: border-box !important;
}

/* 2. ラベル（tour-confirmed）の配置と幅をPC用に適正化 */
.tour-col3-box .tour-confirmed {
    position: absolute !important;
    top: 10px !important;    /* 上からの位置（既存デザインに合わせて微調整してください） */
    left: 10px !important;   /* 左からの位置 */
    z-index: 1 !important;    /* 画像より前面に出す */
    
    /* 横幅が潰れて改行されたり崩れたりするのを防ぐ */
    width: auto !important;
    max-width: calc(100% - 20px) !important;
    white-space: nowrap !important; /* テキストの意図しない改行を防ぐ */
    
    /* 万が一、元々floatやdisplay: blockで崩れている場合の対策 */
    float: none !important;
    display: inline-block !important;
}

/* 3. ラベルの下にある画像やコンテンツが上に潜り込まないようにする対策 */
/*（もし画像の上に重なるデザインではなく、上に押し出されて崩れている場合用） */
.tour-col3-box .tour-col3 > a,
.tour-col3-box .tour-col3 > div {
    display: block !important;
    width: 100% !important;
}

/* ==========================================================================
   価格枠（大人1名あたり〜）の崩れを直す修正CSS
   ========================================================================== */

/* 1. カード自体の内部構造を縦並び（Flex）に統一して高さを揃える */
.tour-col3-box .tour-col3 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* コンテンツと価格枠を上下に綺麗に割り振る */
    height: 100% !important; /* すべてのカードの高さを統一 */
    min-height: 420px !important; /* カード全体の最低限の高さ（既存の高さに合わせて要調整） */
    background: #fff !important;
    box-sizing: border-box !important;
}

/* 2. カード内のリンク（aタグ）や全体ラッパーも縦いっぱいに広げる */
.tour-col3-box .tour-col3 > a {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* 3. 価格や料金が書いてある枠（おそらくクラス名に「price」や「money」が含まれる要素、または下部の枠） */
/* ※一般的なvipツアーの仕様に合わせて、下部エリア全体の幅と配置を固定します */
.tour-col3-box .tour-col3 [class*="price"],
.tour-col3-box .tour-col3 [class*="money"],
.tour-col3-box .tour-col3 .tour-price-box { /* 想定される価格枠のクラス名 */
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-top: auto !important; /* 自動的にカードの最下部に押し下げる */
    box-sizing: border-box !important;
    float: none !important;
}

/* 4. 価格枠の中のテキストや数字の折り返し・潰れを防止 */
.tour-col3-box .tour-col3 [class*="price"] *,
.tour-col3-box .tour-col3 [class*="money"] * {
    white-space: nowrap !important; /* 「大人1名あたり」や金額が途中で改行されるのを防ぐ */
    display: inline-block !important;
}

/* 5. タイトルや詳細テキスト部分が伸びすぎた場合の調整 */
.tour-col3-box .tour-col3 .tour-ttl, 
.tour-col3-box .tour-col3 dt, 
.tour-col3-box .tour-col3 dd {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}