/* ==========================================================================
   OPTIMA BOOKING v2 専用 CSS
   ==========================================================================
   - 【トップKV下】(.optima-search--main) と
   - 【ナビ側 iframe】(.optima-search--navi) で共有
   - SCSSビルド (common.css) には乗らない独立ファイル
   - 読込元:
     - 親ページ: header.php からの <link>
     - ナビ iframe: parts/booking/optima-navi.php からの <link>
   ========================================================================== */

/* ==========================================================================
   共通（両バリアント）
   ========================================================================== */

/* 並び順 (.sort) は非表示（search-module.js が動的挿入するが UX上不要） */
.optima-search--main .sort,
.optima-search--main fieldset.sort,
.optima-search--main #sort,
.optima-search--navi .sort,
.optima-search--navi fieldset.sort,
.optima-search--navi #sort { display: none !important; }

/* 受入不可の子供区分（child2/4/5）は非表示
   ※ OPTIMA URL には child2/3/4/5 を 0 で送る必要があるが、 値は bridge JS で補完済
   ※ 2026-05-25 仕様変更：no-bed-and-meal (child5) → meal-only (child3) に表示切替 */
.optima-search--main .bed-and-meal,
.optima-search--main .bed-only,
.optima-search--main .no-bed-and-meal,
.optima-search--navi .bed-and-meal,
.optima-search--navi .bed-only,
.optima-search--navi .no-bed-and-meal { display: none !important; }

/* option はドロップダウンの白背景で読めるよう暗色 */
.optima-search--main option,
.optima-search--navi option { color: #333; }

/* select 右端の V字矢印（v1 .booking-box-content-item-data::after 相当） */
.optima-search--main fieldset.nights,
.optima-search--main fieldset.rooms,
.optima-search--main fieldset.adults,
.optima-search--main fieldset.children .children-selects > div,
.optima-search--navi fieldset.nights,
.optima-search--navi fieldset.rooms,
.optima-search--navi fieldset.adults,
.optima-search--navi fieldset.children .children-selects > div {
    position: relative;
}
.optima-search--main fieldset.nights::after,
.optima-search--main fieldset.rooms::after,
.optima-search--main fieldset.adults::after,
.optima-search--main fieldset.children .children-selects > div::after,
.optima-search--navi fieldset.nights::after,
.optima-search--navi fieldset.rooms::after,
.optima-search--navi fieldset.adults::after,
.optima-search--navi fieldset.children .children-selects > div::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 14px;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(135deg);
    pointer-events: none;
}

/* 日付指定なしチェック時に search-module.js が .nights を display:none にするが、
   UI上は表示し続けたいので !important で上書き                                  */
.optima-search--main fieldset.nights,
.optima-search--navi fieldset.nights { display: block !important; }

/* fieldset.checkin: カレンダーアイコン absolute 配置のため relative */
.optima-search--main fieldset.checkin,
.optima-search--navi fieldset.checkin {
    position: relative;
}
.optima-search--main fieldset.checkin > .optima-search__input--checkin {
    letter-spacing: .1em;
    padding-left: 36px; /* カレンダーアイコン分 */
}

/* カレンダーアイコン (v1 .booking-box-calendar .booking-box-content-item-data::before 相当) */
.optima-search--main fieldset.checkin::before,
.optima-search--navi fieldset.checkin::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 36px;
    background-image: url("/common/images/share/icon/icon_calendar.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    pointer-events: none;
}
/* ナビ側は input の左にも padding 必要 */
.optima-search--navi fieldset.checkin .optima-search__input--checkin { padding-left: 36px; }

/* 「日付指定なし」チェックボックス（search-module.js が #no_checkin span 内に注入）
   ※ このクラスは日付指定なし専用 */
.optima-search--main .optima-search__nodate,
.optima-search--navi .optima-search__nodate,
.optima-search--main #no_checkin,
.optima-search--navi #no_checkin {
    display: block;
    margin-top: 0;
    height: 32px;
    font-size: 12px;
    color: #fff;
}
.optima-search--main .optima-search__nodate label,
.optima-search--navi .optima-search__nodate label,
.optima-search--main #no_checkin label,
.optima-search--navi #no_checkin label {
    display: flex;
    align-items: center;
    justify-content: center; /* checkbox を中央寄せ */
    gap: 4px;
    cursor: pointer;
    color: #fff;
    font-weight: normal;
    font-size: 0; /* label のテキストは legend に移ったので非表示（checkbox だけ表示） */
    line-height: 1.2;
    height: 36px;
}
/* v1（ダイレクトイン）と同じカスタムチェックボックスデザインに */
.optima-search--main #no_checkin input[type="checkbox"],
.optima-search--navi #no_checkin input[type="checkbox"] {
    position: relative;
    width: 20px;
    height: 20px;
    border: 0;
    background: 0;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    flex: 0 0 auto;
}
.optima-search--main #no_checkin input[type="checkbox"]::before,
.optima-search--navi #no_checkin input[type="checkbox"]::before {
    content: "";
    display: inline-block;
    position: absolute;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.optima-search--main #no_checkin input[type="checkbox"]:checked::after,
.optima-search--navi #no_checkin input[type="checkbox"]:checked::after {
    content: "";
    display: inline-block;
    position: absolute;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    height: 4px;
    width: 8px;
    transform: rotate(-45deg);
    top: 35%;
    left: 25%;
}
/* checkin_date_input（テキストinput）は非表示（日付未定時に search-module.js が disabled で挿入する隠れinput） */
.optima-search--main #checkin_date_input,
.optima-search--navi #checkin_date_input { display: none; }

/* Pikaday カレンダー（既存サイト相当） */
.pika-lendar th:first-child,
.pika-lendar td:first-child .pika-button { color: #f00; }
.pika-lendar th:last-child,
.pika-lendar td:last-child .pika-button { color: #00f; }
.is-selected .pika-button {
    background: #33aaff; color: #fff;
    box-shadow: inset 0 1px 3px #178fe5; border-radius: 3px;
}
.pika-button:hover { background: #ff8000; color: #fff; border-radius: 3px; }
.is-disabled .pika-button { background: #D5E9F7 !important; }

/* ==========================================================================
   【トップKV下】.optima-search--main
   ========================================================================== */

/* タブが flex shrink で縮められないよう固定（v2 form が widely になるため） */
.l-top-booking .booking-box-tab-list { flex-shrink: 0; }

/* 外側ラッパ (booking-form--v2 / optima-booking--main) を flex で
   1行目: 入力 + ボタン、 2行目: リンク（カラム落ち、 PC/SP共通） */
.booking-form--v2.optima-booking--main {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
    padding: 0 16px;
}
/* PC: ボタンは flex item として 右側に配置（上下中央 + 微調整 16px 下げ） */
.booking-form--v2.optima-booking--main .optima-booking__submit-wrap {
    margin: 0;
    align-self: center;
    position: relative;
    top: 16px;
}
.booking-form--v2.optima-booking--main .optima-booking__frame {
    flex: 1 1 0;
    min-width: 0;
}
.booking-form--v2.optima-booking--main .booking-box-other-wrap {
    flex: 0 0 100%;
    width: 100%;
    align-self: stretch;
}
/* テキストリンクを横並びに（common.css の flex-direction: column を上書き） */
.booking-form--v2.optima-booking--main .booking-box-other-wrap .booking-box-other-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.booking-form--v2.optima-booking--main .booking-box-other-wrap .booking-box-other-item {
    margin: 0 !important;
    flex: 0 0 auto;
}
@media (max-width: 1400px) {
    .booking-form--v2.optima-booking--main .booking-box-other-wrap {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 24px;
    }
    .booking-form--v2.optima-booking--main .booking-box-other-wrap .booking-box-other-list {
        flex-direction: column !important;
    }
}
.booking-form--v2.optima-booking--main .optima-booking__submit-wrap .booking-box-search-button {
    width: 100%;
    cursor: pointer;
}

.optima-search--main { box-sizing: border-box; }
/* PC: 全要素1行に横並び。 SP の @media で wrap に切替 */
.optima-search--main .optima-search__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

/* 上段（静的）: checkin が 1fr で残り全部、 他は固定 → これで 1段目を全幅使い切る */
.optima-search--main fieldset.checkin { flex: 0 0 200px; width: 200px; min-width: 0; }
.optima-search--main fieldset.nodate  { flex: 0 0 60px; position: relative; left: -16px; }
.optima-search--main fieldset.nights  { flex: 0 0 70px; }
.optima-search--main fieldset.rooms   { flex: 0 0 70px; }

/* 下段（動的追加）: 大人 / 小学生 / 幼児 を独自幅で配置。 上段の grid 列とは無関係 */
.optima-search--main fieldset.adults  { flex: 0 0 70px; max-width: 70px; }
.optima-search--main fieldset.children {
    flex: 0 0 auto;
    min-width: 0;
}
/* children fieldset 内のレイアウト（1箇所に統合） */
.optima-search--main fieldset.children > legend,
.optima-search--navi fieldset.children > legend { display: none; }

.optima-search--main fieldset.children .children-selects {
    display: flex;
    gap: 8px 12px;
    width: 350px;
}
.optima-search--main fieldset.children .children-selects > div {
    min-width: 0;
    display: block;
    overflow: visible; /* label テキストが 70px 外にはみ出してOK */
}
/* それぞれ 70px ずつに */
.optima-search--main fieldset.children .children-selects > .child1,
.optima-search--main fieldset.children .children-selects > .meal-only {
    flex: 0 0 70px;
    width: 70px;
}
/* label テキスト（小学生 / 幼児 (布団・食事不要)）は改行禁止、 70px枠を超えて表示 */
.optima-search--main fieldset.children .children-selects > div > label {
    display: block;
    white-space: nowrap;
    overflow: visible;
}
.optima-search--main fieldset.children .children-selects > div > label {
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 0 4px;
}
.optima-search--main fieldset.children .children-selects > div > label select {
    margin-top: 2px;
    min-width: 0;
    width: 100%;
}
/* PC: JS で挿入された <br>（幼児<br>(布団・食事不要)）を非表示 → 1行表示
   ※ .optima-br-xs-only / .optima-br-sp-only は別ルールで制御するため除外 */
.optima-search--main fieldset.children .children-selects > .meal-only > label > br:not(.optima-br-xs-only):not(.optima-br-sp-only) {
    display: none;
}
/* PC：英語の場合のみ <br> を有効化（infant<br>(No bedding or<br>meals provided) で3行）
   ※ 上の :not() ルールに specificity 負けないよう同じ :not() を付ける */
.optima-search--main fieldset.children .children-selects > .meal-only > label.lang-en > br:not(.optima-br-xs-only):not(.optima-br-sp-only) {
    display: initial;
}

/* SP: booking-form--v2 を縦並び、 入力部分は wrap で複数行に
   ボタンの absolute も解除、 padding-right も reset */
@media (max-width: 1400px) {
    .booking-form--v2.optima-booking--main {
        flex-direction: column;
        align-items: stretch;
        padding-block: 0;
        padding-inline: 0;
    }
    .booking-form--v2.optima-booking--main .optima-booking__submit-wrap {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        margin: 32px 0 0;
        height: auto;
        top: auto;
    }
    /* frame を SP で 100%幅に明示（PC の flex:1 1 0 が column時にはみ出すケース対策） */
    .booking-form--v2.optima-booking--main .optima-booking__frame {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .optima-search--main .optima-search__inner {
        flex-wrap: wrap;
        gap: 32px 10px;
        align-items: flex-end;
    } /* SP では wrap で複数行、 row 32px / column 10px、 各行内は下端揃え */
    /* 上段：チェックイン (残り) ＋ 日程未定 (60px) で横並び1行
       PC で width:220px / nodate に position:relative; left:-16px が当たってるので reset
       1行目に "checkin + nodate" がぴったり 100% 収まるよう calc 指定 → 残りは次行に wrap */
    .optima-search--main fieldset.checkin {
        width: auto;
        flex: 1 1 calc(100% - 76px); /* 100% - nodate(60) - gap(16) */
        min-width: 0;
    }
    .optima-search--main fieldset.nodate  {
        flex: 0 0 60px;
        position: static;
        left: auto;
    }
    /* 英語のみ SP：nodate を 90px (Undecided が収まる) + checkin の calc も更新 */
    body.optima-lang-en .optima-search--main fieldset.checkin {
        flex: 1 1 calc(100% - 106px); /* 100% - nodate(90) - gap(16) */
    }
    body.optima-lang-en .optima-search--main fieldset.nodate {
        flex: 0 0 90px;
    }
    /* 英語 SP：基本 font-size 12px（< 768px） */
    body.optima-lang-en .optima-search--main input[type="text"],
    body.optima-lang-en .optima-search--main select,
    body.optima-lang-en .optima-search--main .optima-search__input {
        font-size: 12px;
    }
    /* 中段：泊数 ＋ 室数 を均等 2列（gap 16px） */
    .optima-search--main fieldset.nights  { flex: 1 1 calc(50% - 8px); }
    .optima-search--main fieldset.rooms   { flex: 1 1 calc(50% - 8px); }
    /* 下段：大人 ｜ 小学生 ｜ 幼児 を 3等分（adults:children = 1:2 で、 children 内を 1:1） */
    .optima-search--main fieldset.adults  {
        flex: 1 1 0;
        max-width: none;
    }
    .optima-search--main fieldset.children {
        flex: 2 1 0;
        min-width: 0;
    }
    .optima-search--main fieldset.children .children-selects {
        width: 100%;
        gap: 8px 10px;
    }
    .optima-search--main fieldset.children .children-selects > .child1,
    .optima-search--main fieldset.children .children-selects > .meal-only {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }
    /* SP のみ：全要素（チェックイン含む）を text-align: center */
    .optima-search--main fieldset.checkin,
    .optima-search--main fieldset.nights,
    .optima-search--main fieldset.rooms,
    .optima-search--main fieldset.adults,
    .optima-search--main fieldset.children .children-selects > .child1,
    .optima-search--main fieldset.children .children-selects > .meal-only {
        text-align: center;
    }
    .optima-search--main fieldset.checkin legend,
    .optima-search--main fieldset.nights legend,
    .optima-search--main fieldset.rooms legend,
    .optima-search--main fieldset.adults legend,
    .optima-search--main fieldset.children .children-selects > .child1 > label,
    .optima-search--main fieldset.children .children-selects > .meal-only > label {
        text-align: center;
        line-height: 1.5;
    }
    /* checkin input はカレンダーアイコンが左 absolute にあるので、 padding 左右対称で視覚中央に */
    .optima-search--main fieldset.checkin > .optima-search__input--checkin {
        text-align: center;
        padding-left: 36px;
        padding-right: 36px;
    }
    .optima-search--main fieldset.nights select,
    .optima-search--main fieldset.rooms select,
    .optima-search--main fieldset.adults select,
    .optima-search--main fieldset.children .children-selects > div > label > select {
        text-align: center;
        text-align-last: center;
    }
    /* SP のみ：下の段（adults / children）のテキスト部分を 2em 高さで揃える
       （幼児が改行で2行になっても、 小学生・大人と select の位置が一致するよう、
        text領域だけ 2em 確保し、 select は通常位置で下に配置） */
    .optima-search--main fieldset.adults > legend {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 2em;
        line-height: 1;
        padding: 0;
        box-sizing: border-box;
    }
    /* child1 / meal-only の div を flex 化 → 中の label が高さ100%で stretch 可能に */
    .optima-search--main fieldset.children .children-selects > div {
        display: flex;
        flex-direction: column;
    }
    .optima-search--main fieldset.children .children-selects > div > label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end; /* テキスト + select を下寄せ → select の下端が揃う */
        line-height: 1;
        padding: 0;
        flex: 1 1 auto; /* 親 div の高さに追従 */
    }
    /* select は text 直後（余白 2px） */
    .optima-search--main fieldset.children .children-selects > div > label > select {
        margin-top: 2px;
        width: 100%;
    }
    /* SP: PC で非表示にしている <br> を改行として有効化
       ただし .optima-br-xs-only は別ルール（〜767pxのみ表示）に任せて除外 */
    .optima-search--main fieldset.children .children-selects > .meal-only > label > br:not(.optima-br-xs-only) {
        display: initial;
    }
    /* SP：PC英語用 padding-top 調整を打ち消す */
    body.optima-lang-en .optima-search--main fieldset.checkin .optima-search__label,
    body.optima-lang-en .optima-search--main fieldset.nights .optima-search__label,
    body.optima-lang-en .optima-search--main fieldset.rooms legend,
    body.optima-lang-en .optima-search--main fieldset.adults legend,
    body.optima-lang-en .optima-search--main fieldset.children .children-selects > .child1 > label {
        padding-top: 0;
    }
    .optima-search--main .field-button,
    .optima-search--main .optima-search__button-wrap {
        flex: 0 0 auto;
        width: 100%;
        margin: 8px 0 0;
    }
}

/* 英語：input/select の letter-spacing 解除（PC・SP共通） */
body.optima-lang-en .optima-search--main input[type="text"],
body.optima-lang-en .optima-search--main select,
body.optima-lang-en .optima-search--main .optima-search__input {
    letter-spacing: normal;
}

/* JS で挿入する SP 専用 <br>（中国語 zh-cn/zh-tw の幼児ラベル全角「（」 前など） */
.optima-br-sp-only {
    display: none;
}
@media (max-width: 1400px) {
    .optima-br-sp-only {
        display: block; /* <br> を確実に改行として描画 */
    }
}

/* JS で挿入する XS（〜767px）のみ表示する <br>
   （中国語の「（不提供寢具和餐點）」 の「和」 前で SP 端末用に追加改行） */
.optima-br-xs-only {
    display: none;
}
@media (max-width: 767px) {
    .optima-br-xs-only {
        display: block;
    }
}


/* =====================================================
   英語のみ SP：input/select の font-size 段階調整
   - 基本 (< 768px): 12px（SP @media 内で指定済）
   - 768〜991px: 16px
   - 992〜1400px: 20px（共通の PC ベース 20px と一致）
   ===================================================== */
@media (min-width: 768px) and (max-width: 1400px) {
    body.optima-lang-en .optima-search--main input[type="text"],
    body.optima-lang-en .optima-search--main select,
    body.optima-lang-en .optima-search--main .optima-search__input {
        font-size: 16px;
    }
}
@media (min-width: 992px) and (max-width: 1400px) {
    body.optima-lang-en .optima-search--main input[type="text"],
    body.optima-lang-en .optima-search--main select,
    body.optima-lang-en .optima-search--main .optima-search__input {
        font-size: 20px;
    }
}

/* =====================================================
   英語のみ：1400〜1499px ではボタンを「最大サイズ（min-width 172/padding 24）」 ではなく
   「中間サイズ（min-width 128/padding 16/radius 28）」 のまま維持
   → 1500px から最大サイズ（他言語は 1440px から最大、 現状のまま）
   ===================================================== */
@media (max-width: 1499px) {
    body.optima-lang-en .booking-form--v2.optima-booking--main .booking-box-search-button {
        min-width: 128px;
        padding: 16px;
        border-radius: 28px;
    }
}

/* =====================================================
   英語ラベル（lang=en）：PC 専用調整（SPは通常のSPレイアウトに従う）
   ※ @media (min-width: 1401px) で PC のみに限定
   ===================================================== */
@media (min-width: 1401px) {
    body.optima-lang-en .optima-search--main fieldset.nights,
    body.optima-lang-en .optima-search--main fieldset.rooms,
    body.optima-lang-en .optima-search--main fieldset.adults {
        flex: 0 0 90px;
        max-width: none;
    }
    body.optima-lang-en .optima-search--main fieldset.nodate {
        flex: 0 0 80px;
        max-width: none;
    }
    body.optima-lang-en .optima-search--main fieldset.children .children-selects > .child1,
    body.optima-lang-en .optima-search--main fieldset.children .children-selects > .meal-only {
        flex: 0 0 100px;
        width: 100px;
        min-width: 0;
        max-width: none;
    }
    /* PC 英語のみ：ラベル文字の高さ揃え（行数差を padding-top で吸収）
       - checkin "Check-in"（1行） → 上に 2em 詰める
       - nights "Number of Nights"（2行になり得る）→ 上に 1em
       - rooms legend → 上に 1em */
    body.optima-lang-en .optima-search--main fieldset.checkin .optima-search__label,
    body.optima-lang-en .optima-search--main fieldset.nodate .optima-search__label {
        padding-top: 2em;
    }
    body.optima-lang-en .optima-search--main fieldset.nights .optima-search__label {
        padding-top: 1em;
    }
    body.optima-lang-en .optima-search--main fieldset.rooms legend {
        padding-top: 1em;
    }
    body.optima-lang-en .optima-search--main fieldset.adults legend {
        padding-top: 2em;
    }
    /* PC 英語：children 内 label の nowrap を解除（長文は折り返し OK） */
    body.optima-lang-en .optima-search--main fieldset.children .children-selects > div > label {
        white-space: normal;
    }
    /* ただし meal-only は label.lang-en に <br> 入れて改行制御済 → nowrap 維持で意図せぬ折り返し防止 */
    body.optima-lang-en .optima-search--main fieldset.children .children-selects > .meal-only > label.lang-en {
        white-space: nowrap;
        padding-top: 1em;
    }
    /* PC 英語：input/select は font-size 16px（letter-spacing は @media 外で全幅指定） */
    body.optima-lang-en .optima-search--main input[type="text"],
    body.optima-lang-en .optima-search--main select,
    body.optima-lang-en .optima-search--main .optima-search__input {
        font-size: 16px;
    }
    /* PC 英語：checkin 幅 170px（fz縮小で 200px は不要） */
    body.optima-lang-en .optima-search--main fieldset.checkin {
        flex: 0 0 170px;
        width: 170px;
    }
}

/* fieldset の枠（border は input/select 側に集約してラインを揃える） */
.optima-search--main fieldset,
.optima-search--main .optima-search__field {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
    color: #fff;
}

/* legend (ラベル) */
.optima-search--main legend,
.optima-search--main .optima-search__label {
    padding: 0 4px;
    font-size: 12px;
    color: #fff;
    line-height: 1;
}

/* input / select（高さ・下ボーダーを統一してラインを揃える） */
.optima-search--main input[type="text"],
.optima-search--main select,
.optima-search--main .optima-search__input {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.4);
    padding: 0;
    margin: 0;
    font-family: "Montserrat", "Zen Kaku Gothic New", sans-serif !important;
    font-size: 20px;
    font-weight: bold;
    line-height: 36px;
    height: 36px;
    letter-spacing: .15em;
    background: transparent;
    outline: none;
    box-sizing: border-box;
    color: #fff;
}
.optima-search--main input[id^="checkin_date"],
.optima-search--main .optima-search__input--checkin {
    cursor: pointer;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

/* 検索ボタン */
.optima-search--main .field-button,
.optima-search--main .optima-search__button-wrap { margin: 0; }
.optima-search--main .sub-bgcolor,
.optima-search--main .optima-search__submit {
    background: #33aaff;
    color: #fff;
    border: 0;
    padding: 10px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    border-radius: 3px;
    white-space: nowrap;
}
.optima-search--main .sub-bgcolor:hover,
.optima-search--main .optima-search__submit:hover { background: #2196e0; }

/* ==========================================================================
   【ナビ側 iframe】.optima-search--navi
   iframe 内のドキュメントなので body 自体のスタイルも含む
   ========================================================================== */

body.optima-iframe-body {
    margin: 0;
    padding: 8px;
    background: transparent;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}
/* iframe は common.css を読み込まないので select の native 矢印が出てしまう
   → V字擬似要素と二重表示防止のため明示的に消す */
body.optima-iframe-body select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

.optima-search--navi { display: block; }
.optima-search--navi .optima-search__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.optima-search--navi .optima-search__field,
.optima-search--navi fieldset.rooms,
.optima-search--navi fieldset.adults,
.optima-search--navi fieldset.children {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    color: #fff;
}

/* ナビ側 children 内の子供 select 構造 */
.optima-search--navi fieldset.children .children-selects {
    display: flex; gap: 6px 10px;
}
.optima-search--navi fieldset.children .children-selects > div {
    flex: 1 1 120px;
    display: block;
}
.optima-search--navi fieldset.children .children-selects > div > label {
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 0 4px;
}
.optima-search--navi fieldset.children .children-selects > div > label select { margin-top: 2px; }

.optima-search--navi .optima-search__label,
.optima-search--navi fieldset.rooms legend,
.optima-search--navi fieldset.adults legend,
.optima-search--navi fieldset.children legend {
    padding: 0 6px;
    font-size: 12px;
    color: #fff;
}

.optima-search--navi .optima-search__input,
.optima-search--navi input[type="text"],
.optima-search--navi select {
    display: block;
    padding: 0;
    margin: 0;
    font-family: "Montserrat", "Zen Kaku Gothic New", sans-serif !important;
    font-size: 20px;
    font-weight: bold;
    line-height: 36px;
    height: 36px;
    letter-spacing: .15em;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.4);
    background: transparent;
    outline: none;
    color: #fff;
}

/* ナビ側 iframe は common.css 非読込のため、 既存 .button-cyan / .booking-box-search-button を独自定義 */
.optima-iframe-body .button-cyan {
    color: #fff;
    background-color: #00adb8;
    border: 0;
    transition: .3s;
    cursor: pointer;
}
.optima-iframe-body .button-cyan:hover,
.optima-iframe-body .button-cyan:focus,
.optima-iframe-body .button-cyan:active {
    color: #fff;
    background-color: #99e8ed;
    text-decoration: none;
}
.optima-iframe-body .booking-box-search-button {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    color: #fff;
    border: 0;
    border-radius: 28px;
}
.optima-iframe-body .form-button-search-image {
    width: 16px;
    height: 16px;
}

/* ナビ側 iframe 用：booking-box-other リンク（縦並び） */
.optima-iframe-body .booking-box-other-wrap {
    width: 100%;
    margin-top: 32px;
}
.optima-iframe-body .booking-box-other-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.optima-iframe-body .booking-box-other-item {
    margin: 0;
}
.optima-iframe-body .booking-box-other-link {
    color: #fff;
    font-size: 13px;
    text-decoration: none;
}
.optima-iframe-body .booking-box-other-link:hover {
    opacity: .7;
}
/* KV下と同じ「>」 アイコン（common.css L1137-1148 と同等） */
.optima-iframe-body .booking-box-other-link::before {
    content: "";
    position: relative;
    top: -2px;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}