/* ================= ヘッダー専用スタイル ================= */
        .font-eng { font-family: 'Roboto', sans-serif; }
        .dropdown-panel { display: none; opacity: 0; transform: translateY(10px); transition: all 0.2s ease-out; pointer-events: none; z-index: 9999; }
        .group:hover .dropdown-panel { display: block; opacity: 1; transform: translateY(0); pointer-events: auto; }
        .bg-euro-blue { background-color: #2c82c9; } .bg-euro-dark { background-color: #20639b; }
        .bg-hoteco-blue { background-color: #2980b9; } .bg-hoteco-dark { background-color: #1f618d; }
        .bg-ground-green { background-color: #10b981; } .bg-ground-dark { background-color: #059669; }
        .bg-wc-navy { background-color: #1e3a8a; } 

        /* ================= Transfer Intro Styles ================= */
        .transfer-intro-section { background: #fff; padding-bottom: 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; }
        .transfer-hero { position: relative; height: 320px; background: linear-gradient(rgba(0, 60, 120, 0.6), rgba(0, 60, 120, 0.4)), #0056b3; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin-bottom: 40px; border-radius: 0 0 12px 12px; }
        .transfer-hero h2 { font-size: 34px; font-weight: 800; margin: 0 0 15px; text-shadow: 0 2px 5px rgba(0,0,0,0.3); line-height: 1.3; }
        .transfer-hero p { font-size: 16px; font-weight: 500; max-width: 800px; margin: 0 auto; line-height: 1.6; }
        .usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 1140px; margin: 0 auto; padding: 0 20px; transform: translateY(-30px); }
        .usp-card { background: #fff; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); text-align: center; border: 1px solid #eef2f7; transition: transform 0.3s; overflow: hidden; display: flex; flex-direction: column; }
        .usp-card:hover { transform: translateY(-5px); border-color: var(--primary-color); }
        .usp-icon { margin-bottom: 20px; display: block; height: 200px; width: 100%; }
        .usp-icon img { width: 100%; height: 100%; object-fit: cover; }
        .usp-title { font-size: 18px; font-weight: 700; color: #2c3e50; margin-bottom: 10px; display: block; padding: 0 20px; }
        .usp-desc { font-size: 13px; color: #666; line-height: 1.6; text-align: center; padding: 0 20px 30px; margin: 0; }

        @media (max-width: 768px) {
            .usp-grid { grid-template-columns: 1fr; transform: none; margin-top: 20px; padding-bottom: 30px; }
            .transfer-hero { height: 260px; }
            .transfer-hero h2 { font-size: 24px; padding: 0 15px; }
        }

        /* ================= 既存ページのCSS ================= */
        :root { --primary-color: #0088cc; --primary-dark: #006699; --accent-color: #ff6b6b; --bg-color: #f4f7f9; --text-main: #2c3e50; --text-sub: #7f8c8d; --border-color: #e0e0e0;
            /* カラーパレットの定義 */
            --b2b-bg-main: #ffffff;
            --b2b-bg-page: #f8fafc;
            --b2b-bg-disabled: #f1f5f9;      /* お問い合わせマスの背景（トーンダウン） */
            --b2b-border-default: #e2e8f0;    /* 通常の枠線 */
            --b2b-border-hover: #94a3b8;     /* ホバー時の枠線 */
            --b2b-border-active: #2563eb;    /* 選択中の枠線（メインブランド青） */
            
            /* テキストカラー */
            --b2b-text-main: #0f172a;        /* 基本の文字（濃いスレート） */
            --b2b-text-muted: #475569;       /* 曜日などの補助文字 */
            --b2b-text-price: #2563eb;       /* 金額：信頼と即時確定を表す青 */
            --b2b-text-inquiry: #64748b;     /* お問い合わせ：控えめなグレー */
            --b2b-text-disabled-num: #94a3b8;/* お問い合わせ日の日付数字 */
}
        body { font-family: "Noto Sans JP", sans-serif; margin: 0; padding: 0; color: var(--text-main); line-height: 1.6; }
main {
    background-color: var(--bg-color);
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
        .page-section { display: none; opacity: 0; transition: opacity 0.3s; }
        .page-section.active { display: block; opacity: 1;padding-bottom: 30px;}
        a { text-decoration: none; color: inherit; transition: 0.2s; }
        ul { list-style: none; padding: 0; margin: 0; }
        main .container, footer .container, .transfer-intro-section .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

        .btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 30px; border-radius: 50px; font-weight: 700; cursor: pointer; border: none; transition: transform 0.2s, box-shadow 0.2s; font-size: 1rem; }
        .btn-primary { background-color: var(--primary-color); color: #fff; box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3); }
        .btn-primary:hover { background-color: var(--primary-dark); transform: translateY(-2px); }
        .btn-outline { border: 2px solid var(--primary-color); color: var(--primary-color); background: #fff; }
        .btn-outline:hover { background-color: var(--primary-color); color: #fff; }
        .btn-block { display: flex; width: 100%; box-sizing: border-box; }

        /* Footer */
        .site-footer { background-color: #fff; color: var(--text-sub); padding: 50px 0 30px; border-top: 1px solid #eee; margin-top: 60px; text-align: center; }
        .footer-logo h4 { color: var(--primary-color); font-size: 18px; font-weight: 800; margin: 0 0 10px; }
        .footer-desc { font-size: 13px; margin-bottom: 30px; color: #999; }
        .footer-nav-list { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; flex-wrap: wrap; }
        .footer-nav-list a { font-weight: 700; color: var(--text-main); font-size: 14px; }
        .footer-nav-list a:hover { color: var(--primary-color); }
        .footer-legal-list { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
        .footer-legal-list a { font-size: 12px; color: #999; }
        .footer-legal-list a:hover { text-decoration: underline; color: var(--primary-color); }
        @media (min-width: 769px) { .footer-legal-list li:not(:last-child)::after { content: "|"; margin-left: 20px; color: #ddd; } }
        .copyright { font-size: 11px; color: #ccc; border-top: 1px solid #f5f5f5; padding-top: 20px; margin-top: 20px; }

        /* LIST & DETAIL STYLES */
        .list-page-wrapper { display: grid; grid-template-columns: 260px 1fr; gap: 30px; padding: 40px 0; align-items: start; }
        .filter-sidebar { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); border: 1px solid var(--border-color); position: sticky; top: 80px; }
        .sidebar-search-box { position: relative; margin-bottom: 25px; }
        .sidebar-search-box input { width: 100%; padding: 12px 40px 12px 15px; border: 2px solid #eee; border-radius: 50px; font-size: 13px; box-sizing: border-box; background: #fdfdfd; transition: border-color 0.2s; }
        .sidebar-search-box input:focus { outline: none; border-color: var(--primary-color); background: #fff; }
        .filter-header { font-size: 16px; font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
        .filter-group { margin-bottom: 20px; }
        .filter-group-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--primary-color); }
        .accordion-item { border-bottom: 1px solid #f0f0f0; }
        .accordion-btn { width: 100%; background: none; border: none; text-align: left; padding: 12px 0; font-size: 14px; font-weight: 700; color: var(--text-main); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
        .accordion-content { display: none; padding-bottom: 15px; padding-left: 5px; }
        .accordion-content.show { display: block; }
        .checkbox-label { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; color: #555; cursor: pointer; }
        .checkbox-label input { margin-right: 8px; accent-color: var(--primary-color); }
        
        .product-card { background: #fff; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 20px; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; cursor: pointer; }
        .product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.06); border-color: #bce0fd; }
        .card-body { padding: 25px; display: flex; flex-direction: column; }
        .card-tags { margin-bottom: 12px; }
.card-id{
font-size: 12px; color: #666; margin-bottom: 5px; font-weight: bold;
}
#page-detail.card-id{
    font-size: 14px;
}
        .tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; margin-right: 5px; background: #eee; color: #666; font-weight: 500;}
        .tag.blue { background: #e0f2fe; color: #0088cc; }
        .tag.orange { background: #fff3cd; color: #856404; }
        .card-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; line-height: 1.4; color: #2c3e50; transition: color 0.2s;}
        .product-card:hover .card-title { color: var(--primary-color); }
        .card-desc { font-size: 14px; color: #7f8c8d; margin-bottom: 15px; }
        .card-specs { font-size: 13px; color: #555; margin-bottom: 20px; font-weight: bold; }

        /* Detail (1カラム化) */
        .detail-page-wrapper { padding: 40px 0; display: block; }
/*        .breadcrumb { margin-bottom: 20px; font-size: 13px; color: #888; }*/
        .breadcrumb { margin-bottom: 10px;font-size: 13px;color: #888;margin-top: 0 !important;padding-top: 20px; }
        .breadcrumb span { margin: 0 5px; }
        .detail-title { font-size: 28px; font-weight: 800; margin-bottom: 10px; line-height: 1.4; }
        
        .gallery-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; height: 350px; margin-bottom: 60px; }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
        .gallery-sub { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }

        .info-section { background: #fff; border-radius: 12px; padding: 30px; margin-bottom: 30px; border: 1px solid var(--border-color); }
        .section-h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; color: var(--text-main); }
        .spec-table { width: 100%; border-collapse: collapse; font-size: 14px; }
        .spec-table th { width: 30%; text-align: left; padding: 12px; background: #f9f9f9; color: #555; border-bottom: 1px solid #eee; }
        .spec-table td { padding: 12px; border-bottom: 1px solid #eee; }
        .highlight-list { padding-left: 0; list-style: none; margin: 0; }
        .highlight-list li { margin-bottom: 8px; padding-left: 20px; position: relative; font-size: 14px; color: #444; }
        .highlight-list li::before { content: '✔'; color: var(--primary-color); position: absolute; left: 0; font-weight: bold; }

        /* カレンダー専用スタイル */
        .calendar-section { background: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 25px; margin-bottom: 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
        .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .cal-btn { background: #f0f0f0; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 700; color: #333; transition: background 0.2s; }
        .cal-btn:hover { background: #e0e0e0; }
        .cal-title { font-size: 20px; font-weight: 800; color: var(--wc-navy, #1e3a8a); }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
        .cal-day-header { text-align: center; font-weight: 700; font-size: 14px; padding-bottom: 10px; }
        .cal-day-header.sunday { color: #d92d20; }
        .cal-day-header.saturday { color: #2c82c9; }
        .cal-cell { border: 1px solid #eef2f7; border-radius: 6px; padding: 12px 5px; text-align: center; min-height: 90px; display: flex; flex-direction: column; justify-content: flex-start; cursor: pointer; transition: all 0.2s; background: #fff; }
        .cal-cell:hover:not(.empty):not(.disabled) { border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(0, 136, 204, 0.15); transform: translateY(-2px); }
        .cal-cell.empty { background: transparent; border: none; cursor: default; }
        .cal-cell.disabled { cursor: not-allowed; opacity: 0.6; background: #fafafa; }
        .cal-cell.selected { background: #f0f8ff; border: 2px solid var(--primary-color); }
        .cal-date { font-size: 15px; font-weight: 700; margin-bottom: 2px; color: #333; }
        .cal-status { font-size: 18px; font-weight: bold; margin-top: auto; }
        .status-o { color: var(--primary-color); }
        .status-tri { color: #f59e0b; }
        .cal-legend { font-size: 12px; margin-top: 15px; color: #555; display: flex; gap: 15px; justify-content: flex-end;}
.cal-cell {
    min-height: 50px;
/*s*/
}
.cal-cell.type-inquiry {
/*    cursor: auto;*/
    background: none;
/*    pointer-events: none;*/
}
.cal-cell.type-inquiry.past{
cursor: auto;
pointer-events: none;
}
.cal-cell .no-price{
        font-size: 12px; font-weight:bold; color:#555; margin: 4px 0;
    }
.cal-cell .price{
        font-size: 12px; font-weight:bold;color: var(--b2b-text-price); margin: 4px 0;
    }
.cal-cell.selected {
    border: 2px solid var(--b2b-border-active);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    background-color: rgba(37, 99, 235, 0.02);
    padding: 15px 7px;
}
.cal-cell.type-inquiry:hover {
    background-color: #e2e8f0;
}
.cal-cell.type-inquiry .day-number {
    color: var(--b2b-text-disabled-num);
}
.cal-cell.type-inquiry {
    background-color: var(--b2b-bg-disabled);
}
.cal-cell:not(.type-inquiry):not(.selected):hover {
    border-color: var(--b2b-border-hover);
    background-color: #f8fafc;
}
        /* Application & Confirm (1カラム化) */
        .app-grid { display: block; max-width: 900px; margin: 0 auto; }
        .app-card { background: #fff; border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); border: 1px solid #eee; }
        .app-h3 { font-size: 18px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f0f0f0; color: var(--text-main); font-weight: 700;}
        
        .form-page-header { background:#f0f4f8; padding:30px 0; margin-bottom:40px; }
        .form-control { width: 100%; padding: 12px; border: 2px solid #eef2f7; border-radius: 8px; font-size: 15px; box-sizing: border-box; transition: 0.2s; }
        .form-control:focus { outline: none; border-color: var(--primary-color); background: #fff; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .form-group { margin-bottom: 20px; }
        .booking-label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 13px; color: #555;}
        .label-required::after { content: "必須"; background: #d92d20; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }
        .label-optional::after { content: "任意"; background: #95a5a6; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }

        .confirm-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 30px; }
        .confirm-table th { width: 30%; background: #f9f9f9; padding: 12px; text-align: left; border-bottom: 1px solid #eee; color: #555; }
        .confirm-table td { padding: 12px; border-bottom: 1px solid #eee; }
        .confirm-section-title { font-size: 16px; font-weight: 800; margin-bottom: 15px; color: var(--primary-color); border-left: 4px solid var(--primary-color); padding-left: 10px; }
        
        /* 統一されたサンクス画面用スタイル */
        .thanks-form-card { background: #fff; border: 1px solid #eee; border-radius: 6px; padding: 60px 20px; margin-bottom: 25px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); text-align: center; }
        .thanks-complete-icon { font-size: 50px; color: #4CAF50; margin-bottom: 10px; }
        .thanks-inquiry-number-box { background: #fff; border: 2px dashed #ccc; padding: 20px; display: inline-block; border-radius: 8px; margin: 30px 0; }
        .thanks-inquiry-num { font-size: 28px; font-weight: bold; color: var(--primary-color); letter-spacing: 1px; }
.gallery-grid > .gallery-item {
width: 590px;
    height: 430px;
}

.gallery-sub .gallery-item {
    width: 300px;
    height: 210px;
}
        @media (max-width: 900px) {
            .list-page-wrapper { grid-template-columns: 1fr; }
            .filter-sidebar { position: static; margin-bottom: 30px; order: -1; }
            .form-row { grid-template-columns: 1fr; }
        }
.custom-inquiry-btn { display: inline-block;background-color: var(--primary-color); color: #fff; padding: 16px 50px; border-radius: 50px; font-size: 16px; font-weight: bold; text-decoration: none; transition: 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; }
.custom-inquiry-btn:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); }

span.nobtn {
    padding: 8px 16px;
    width: 70px;
    box-sizing: border-box;
}

header .container {
    padding: 0 20px;
    width: calc(100% - 40px);
}

/* ============================================
   #page-detail スマホ調整（ヘッダー・フッターは対象外）
   ============================================ */
@media (max-width: 768px) {

    /* タイトル・パンくず */
    #page-detail .breadcrumb {
        font-size: 12px;
        margin-top: 0px !important;
    }
    #page-detail .detail-title {
        font-size: 19px;
        line-height: 1.5;
        margin-bottom: 8px;
    }
    #page-detail .card-id {
        font-size: 11px;
    }
    #page-detail .card-tags .tag {
        font-size: 10px;
        padding: 2px 6px;
        margin-right: 4px;
        margin-bottom: 4px;
        display: inline-block;
    }

    /* ギャラリー画像（バス／ドライバー／ネームボード） */
    #page-detail .gallery-grid {
        grid-template-columns: 1fr;
        height: auto;
        gap: 8px;
    }
    #page-detail .gallery-grid > .gallery-item img {
        height: 200px;
    }
    #page-detail .gallery-sub {
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    #page-detail .gallery-sub .gallery-item img {
        height: 110px;
    }

    /* 各セクション共通（サービスの特徴／車両情報／日本語サービス／注意事項） */
    #page-detail .info-section {
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    #page-detail .section-h3 {
        font-size: 15px;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    #page-detail .highlight-list li {
        font-size: 13px;
        margin-bottom: 12px;
    }

    /* 車両・荷物情報テーブル → 縦積みに変更 */
    #page-detail .spec-table,
    #page-detail .spec-table tbody,
    #page-detail .spec-table tr {
        display: block;
        width: 100%;
    }
    #page-detail .spec-table th,
    #page-detail .spec-table td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        font-size: 13px;
    }
    #page-detail .spec-table th {
        border-bottom: none;
        padding: 10px 12px 4px;
        background: #fff;
        color: var(--primary-color, #0088cc);
    }
    #page-detail .spec-table td {
        padding: 0 12px 12px;
    }

    /* 利用日カレンダー */
    #page-detail .calendar-section {
        padding: 14px;
        margin-bottom: 16px;
    }
    #page-detail .calendar-header {
        margin-bottom: 12px;
    }
    #page-detail .cal-title {
        font-size: 15px;
    }
    #page-detail .cal-btn {
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
    }
    #page-detail .nobtn {
        width: 50px;
        padding: 6px 10px;
    }
    #page-detail .calendar-grid {
        gap: 3px;
    }
    #page-detail .cal-day-header {
        font-size: 11px;
        padding-bottom: 6px;
    }
    #page-detail .cal-cell {
        min-height: 42px;
        padding: 6px 2px;
    }
    #page-detail .cal-cell.selected {
        padding: 8px 2px;
    }
    #page-detail .cal-date {
        font-size: 11px;
        margin-bottom: 0;
    }
    #page-detail .cal-cell .price,
    #page-detail .cal-cell .no-price {
        font-size: 9px;
        line-height: 1.3;
        margin: 2px 0 0;
    }

    /* 「次へ進む」ボタン（インラインstyleで幅固定のため!importantで上書き） */
    #page-detail #btn-next {
        width: 100% !important;
        max-width: 100%;
        padding: 14px !important;
        font-size: 15px !important;
    }

    /* 注意事項テキストエリア（文字サイズを少し詰める） */
    #page-detail .info-section:last-child {
        font-size: 12px;
        line-height: 1.7;
    }
.gallery-grid > .gallery-item {
width: 100%;
        max-width: 100%;
        height: auto;
}
.gallery-sub .gallery-item {
    width: auto;
    height: auto;
}
    #page-detail .gallery-grid > .gallery-item img {
        /* height: 200px; */
        max-width: 100%;
        height: auto;
    }
.gallery-grid {
    margin-bottom: 15px;
}
}

/* さらに狭い画面（〜400px）向けの追加微調整 */
@media (max-width: 400px) {
    #page-detail .cal-cell .price,
    #page-detail .cal-cell .no-price {
        font-size: 8px;
    }
    #page-detail .cal-date {
        font-size: 10px;
    }
}


@media (min-width: 768px) {
    .filter-sidebar {
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-sizing: border-box;

        /* Firefox */
        scrollbar-width: none;

        /* IE・旧Edge */
        -ms-overflow-style: none;
    }

    /* Chrome・Edge・Safari */
    .filter-sidebar::-webkit-scrollbar {
        display: none;
    }
}