/*
 * Bucket Miles 検索画面
 */

/* ========================================
   SWELL固定ページのレイアウト調整
======================================== */

/*
 * 検索ページだけに適用します。
 * 現在の固定ページIDは53です。
 */

/* パンくずを非表示 */
body.page-id-53 #breadcrumb,
body.page-id-53 .p-breadcrumb,
body.page-id-53 .c-breadcrumb {
    display: none !important;
}

/* 固定ページタイトル「マイル検索」を非表示 */
body.page-id-53 .c-pageTitle,
body.page-id-53 .l-mainContent__inner>h1,
body.page-id-53 main#main_content>h1 {
    display: none !important;
}

/* サイドバーを非表示 */
body.page-id-53 #sidebar,
body.page-id-53 .l-sidebar {
    display: none !important;
}

/* 本文エリアを全幅にする */
body.page-id-53 #content,
body.page-id-53 .l-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.page-id-53 #main_content,
body.page-id-53 .l-mainContent {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-id-53 .l-mainContent__inner,
body.page-id-53 .post_content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * SWELLの本文幅を突き抜けて、
 * ブラウザ幅いっぱいに表示します。
 */
.bucket-app {
    width: 100vw;
    margin-left: calc(50% - 50vw);

    color: #102343;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "Noto Sans JP",
        "Yu Gothic",
        sans-serif;
}

/* ========================================
   ヒーローエリア
======================================== */

.bucket-hero {
    position: relative;

    min-height: 700px;
    padding: 62px 24px 58px;

    /*
     * 左側を少し暗くして、
     * 白いキャッチコピーを読みやすくします。
     */
    background:
        linear-gradient(90deg,
            rgba(7, 26, 56, 0.34) 0%,
            rgba(7, 26, 56, 0.13) 46%,
            rgba(7, 26, 56, 0.03) 100%),
        url("/wp-content/uploads/2026/08/hero.png");

    background-size: cover;
    background-position: 58% center;
    background-repeat: no-repeat;
}

.bucket-hero__inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* ========================================
   キャッチコピー
======================================== */

.bucket-copy {
    width: 100%;
    max-width: 900px;

    margin-bottom: 32px;

    color: #ffffff;

    /*
     * PCでは少し左へ動かして、
     * カードとの位置をずらします。
     */
    transform: translateX(-30px);

    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.32);
}

.bucket-copy h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(34px, 3.2vw, 52px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: 0.02em;

    /*
     * PCでは1行表示に固定します。
     */
    white-space: nowrap;
}

.bucket-copy p {
    margin: 15px 0 0;

    color: rgba(255, 255, 255, 0.94);

    font-size: clamp(16px, 1.7vw, 21px);
    font-weight: 600;
}

/* ========================================
   検索カード
======================================== */

.bucket-card {
    width: min(100%, 830px);

    margin-top: 10px;
    padding: 34px 38px 36px;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;

    box-shadow:
        0 24px 65px rgba(4, 27, 63, 0.25);

    backdrop-filter: blur(8px);
}

/* ========================================
   往復・片道・複数都市タブ
======================================== */

.bucket-tabs {
    display: flex;

    margin-bottom: 30px;

    border-bottom: 1px solid #e3e8ef;
}

.bucket-tab {
    position: relative;

    flex: 1;

    padding: 15px 12px;

    color: #6a7482;
    background: transparent;

    border: 0;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.2s,
        background-color 0.2s;
}

.bucket-tab::after {
    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 3px;

    background: transparent;
    border-radius: 3px 3px 0 0;

    content: "";
}

.bucket-tab.is-active {
    color: #1769e0;
}

.bucket-tab.is-active::after {
    background: #1769e0;
}

.bucket-tab:hover {
    color: #1769e0;
    background: #f7faff;
}

/* ========================================
   フォーム全体
======================================== */

.bucket-form__row {
    display: flex;
    align-items: flex-end;

    gap: 18px;

    margin-bottom: 22px;
}

/*
 * 搭乗クラス・出発日・復路日を
 * PCでは3列で表示します。
 */
.bucket-form__dates {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

/*
 * 出発地・交換ボタン・目的地を
 * 3列に並べます。
 */
.bucket-form__route {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 48px minmax(0, 1fr);
}

.bucket-field {
    min-width: 0;
    flex: 1;
}

.bucket-field label {
    display: block;

    margin-bottom: 8px;

    color: #172640;

    font-size: 14px;
    font-weight: 700;
}

.bucket-field select,
.bucket-field input {
    width: 100%;
    height: 54px;

    padding: 0 16px;

    color: #172640;
    background: #ffffff;

    border: 1px solid #ccd6e4;
    border-radius: 10px;

    font-size: 15px;

    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

.bucket-field select:hover,
.bucket-field input:hover {
    border-color: #9fb3ce;
}

.bucket-field select:focus,
.bucket-field input:focus {
    border-color: #1769e0;
    outline: 0;

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, 0.13);
}

/* ========================================
   出発地・目的地の交換ボタン
======================================== */

.bucket-swap {
    align-self: flex-end;

    width: 48px;
    height: 48px;

    margin-bottom: 3px;

    color: #174a8b;
    background: #ffffff;

    border: 1px solid #ccd6e4;
    border-radius: 50%;

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.25s,
        background-color 0.2s,
        border-color 0.2s;
}

.bucket-swap:hover {
    background: #edf5ff;
    border-color: #1769e0;

    transform: rotate(180deg);
}

/* ========================================
   検索ボタン
======================================== */

.bucket-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;
    height: 58px;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #1769e0 0%,
            #0d58cc 100%);

    border: 0;
    border-radius: 10px;

    box-shadow:
        0 9px 22px rgba(23, 105, 224, 0.25);

    font-size: 17px;
    font-weight: 750;

    cursor: pointer;

    transition:
        transform 0.2s,
        box-shadow 0.2s,
        filter 0.2s;
}

.bucket-button:hover {
    filter: brightness(1.06);

    transform: translateY(-1px);

    box-shadow:
        0 13px 28px rgba(23, 105, 224, 0.32);
}

.bucket-button:active {
    transform: translateY(0);
}

.bucket-button__icon {
    font-size: 20px;
    line-height: 1;
}

/* ========================================
   人気の検索
======================================== */

.bucket-popular {
    padding: 38px 24px 48px;

    background: #f8fafc;
}

.bucket-popular__inner {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    border: 0 !important;
}

.bucket-popular h2 {
    margin: 0 0 20px;
    padding: 0 !important;

    color: #12233f;
    background: transparent;

    border: 0 !important;

    font-size: 23px;
    font-weight: 750;
    line-height: 1.4;
}

.bucket-popular__list {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 14px;
}

.bucket-popular__list button {
    min-height: 48px;

    padding: 10px 14px;

    color: #1a2d4e;
    background: #ffffff;

    border: 1px solid #e4eaf2;
    border-radius: 999px;

    box-shadow:
        0 4px 12px rgba(19, 46, 85, 0.04);

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.2s,
        background-color 0.2s,
        border-color 0.2s,
        transform 0.2s,
        box-shadow 0.2s;
}

.bucket-popular__list button:hover {
    color: #1769e0;
    background: #edf5ff;
    border-color: #bdd5f7;

    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(23, 105, 224, 0.09);
}

/* ========================================
   タブレット表示
======================================== */

@media (max-width: 900px) {

    .bucket-hero {
        min-height: auto;

        padding: 60px 22px;

        background-position: 62% center;
    }

    .bucket-copy {
        transform: none;
    }

    .bucket-card {
        width: min(100%, 760px);
    }

    .bucket-popular__list {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* ========================================
   スマートフォン表示
======================================== */

@media (max-width: 700px) {

    .bucket-hero {
        padding: 42px 14px;

        background-position: 67% center;
    }

    .bucket-copy {
        margin-bottom: 24px;

        transform: none;
    }



    .bucket-copy p {
        font-size: 15px;
    }

    .bucket-card {
        margin-top: 0;
        padding: 23px 18px 25px;

        border-radius: 16px;
    }

    .bucket-tabs {
        margin-bottom: 24px;
    }

    .bucket-tab {
        padding: 13px 5px;

        font-size: 14px;
    }

    .bucket-form__row,
    .bucket-form__route,
    .bucket-form__dates {
        display: block;

        margin-bottom: 0;
    }

    .bucket-field {
        margin-bottom: 18px;
    }

    /* 出発日の下だけ少し余白を追加 */
    .bucket-field input[type="date"] {
        margin-bottom: 12px;
    }

    .bucket-swap {
        display: none;
    }

    .bucket-button {
        height: 55px;
        margin-top: 16px;
    }

    .bucket-popular {
        padding: 30px 15px 38px;
    }

    .bucket-popular h2 {
        font-size: 20px;
    }

    .bucket-popular__list {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .bucket-popular__list button {
        min-height: 44px;

        padding: 9px 10px;

        font-size: 12px;
    }

    /* スマホの見出しを2行で綺麗に表示 */
    .bucket-copy h1 {
        font-size: 34px;
        line-height: 1.2;
        letter-spacing: -0.02em;
        white-space: normal;
        word-break: keep-all;
    }

    /* 1行目と2行目を分けて固定 */
    .bucket-copy h1 .bucket-copy-line {
        display: block;
        white-space: nowrap;
    }

    /* スマホの入力欄の高さを統一 */
    .bucket-field input[type="date"],
    .bucket-field select {
        width: 100%;
        height: 54px;
        min-height: 54px;
        padding: 0 14px;
        box-sizing: border-box;
        font-size: 16px;
    }

    /* iPhoneでdate入力だけ巨大化するのを防ぐ */
    .bucket-field input[type="date"] {
        appearance: none;
        -webkit-appearance: none;
        line-height: 54px;
    }
}

/* Bucket Miles検索画面があるページだけ、自動タイトルを消す */
body:has(.bucket-app) h1.c-pageTitle,
body:has(.bucket-app) .c-pageTitle,
body:has(.bucket-app) .p-pageTitle {
    display: none !important;
}

/* タイトルを消した後に残る上側の空白を詰める */
body:has(.bucket-app) .l-mainContent__inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 自動タイトルを消したあとに残る上部の空白を削除 */
body:has(.bucket-app) .l-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body:has(.bucket-app) .l-mainContent {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body:has(.bucket-app) .l-mainContent__inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body:has(.bucket-app) .post_content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* タイトル周辺の空要素も高さごと消す */
body:has(.bucket-app) .c-pageTitle,
body:has(.bucket-app) .p-pageTitle,
body:has(.bucket-app) .l-mainContent__inner>header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}