/* ===================================================================
スタイルカスタム用クラス 対応表

クラス名               | 対応するHTML要素
-----------------------|---------------------------------------------
searchRoomOuter        | 外側ラッパーdiv（旧 #searchRoomBar）
searchRoomWrap         | 中央寄せラッパーdiv（旧 .wrap）
searchFormRoot         | form要素本体
formTitle              | タイトルブロックdiv（「宿泊ご予約」を囲むdiv）
formTitleIcon          | タイトル横の虫眼鏡アイコンspan
formFields             | フィールド全体を囲むdiv（旧 .inner）
fieldCheckin           | 「宿泊日」欄のdiv
fieldLabel             | 各ラベル（宿泊日/1部屋あたり/泊数/部屋数/日付未定）
noDateLabel            | 「日付未定」ラベル（fieldLabelと併用）
checkinUnit            | 年/月/日のselectを囲むspan（3箇所）
checkinUnitSuffix      | 年/月/日のem要素（3箇所）
fieldCheckinInput      | 日付テキスト入力欄（input type="text"）
noDateBox              | 「日付未定」を囲むspan
noDateCheckbox         | 「日付未定」のチェックボックス（input type="checkbox"）
fieldAdults            | 「1部屋あたり」欄のdiv
fieldNights            | 「泊数」欄のdiv
fieldRooms             | 「部屋数」欄のdiv
fieldSelect            | 各select要素共通（年/月/日/人数/泊数/部屋数）
submitGroup            | 送信ボタン+プラン一覧ボタンを縦に並べるラッパーdiv
submitButton           | 送信ボタン（input type="submit"）
planListButton         | 「プラン一覧」リンクボタン（a要素）
linkList               | 予約確認等のリンク一覧ul
linkItem               | 各リンクのa要素
=================================================================== */

/* ===== 外側ラッパー ===== */
.searchRoomOuter {
    background: url(../images/common/bg_gold.png) repeat;
    padding: 20px 0;
    margin: 30px 0;
}

.searchRoomWrap {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    letter-spacing: -.40em;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    /* 768px以上ではPC用レイアウトが崩れないよう1200px固定に戻す（767px以下はSP用レイアウトのため影響なし） */
    .searchRoomWrap {
        width: 1200px;
    }
}

@media screen and (max-width: 767px) {
    .searchRoomOuter {
        padding: 30px 0;
    }

    .searchRoomWrap {
        padding: 0 3%;
    }
}

/* ===== タイトル部分 =====
   ※アイコンはiconLoupeの実画像パスが不明のためインラインSVGで代用しています。
     実際の画像がある場合は .formTitleIcon 内のsvgをbackground-imageに差し替えてください。 */
.formTitle h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #7d6e29;
    font-weight: bold;
    font-size: 1.7rem;
    letter-spacing: 0.1em;
    text-align: left;
}

.formTitleIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin: 2px 8px 0 0;
    color: #7d6e29;
    transition: all 0.2s;
}

@media screen and (min-width: 768px) {
    .searchFormRoot {
        display: flex;
        align-items: center;
    }

    .formTitle {
        width: 140px;
        flex-shrink: 0;
        position: relative;
    }

    /* 縦の区切り線（旧 #searchRoomBar .left::after を再現） */
    .formTitle::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        width: 1px;
        height: 100px;
        margin: -50px 0 0 0;
        border-right: 1px solid #7d6e29;
    }
}

@media screen and (max-width: 767px) {
    .formTitle {
        margin-bottom: 1rem;
    }

    .formTitle h3 {
        justify-content: center;
        text-align: center;
        margin: 0 0 15px;
        padding: 0 0 10px;
        border-bottom: 1px solid #7d6e29;
    }
}

/* ===== 予約確認・キャンセル・ログイン・新規会員登録 リンクリスト ===== */
@media screen and (min-width: 768px) {
    .linkList {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        flex: 0 0 150px;
        width: 150px;
        height: 100%;
        margin: 0 0 0 15px;
        list-style: none;
        padding: 0;
    }

    .linkList li {
        margin: 0;
    }

    .linkItem {
        display: inline-block;
        color: #534815;
        font-size: 1.4rem;
        letter-spacing: 0.01em;
        line-height: 1.3;
        text-decoration: underline;
        background: url(../images/common/icon_arrow_gold_dot.png) no-repeat 0 center;
        background-size: 4px 7px;
        padding: 0 0 0 9px;
    }

    @media (hover: hover) and (pointer: fine) {
        .linkItem:hover {
            text-decoration: none;
        }
    }
}

@media screen and (max-width: 767px) {
    .linkList {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        width: 100%;
        margin: 1rem 0 0;
        list-style: none;
        padding: 20px 0 0;
        border-top: 1px dotted rgba(125,110,41,0.6);
    }

    .linkList li {
        margin: 0;
    }

    .linkItem {
        display: flex;
        align-items: center;
        padding: 8px 8px 8px 16px;
        border: 1px solid rgba(125,110,41,0.6);
        border-radius: 2px;
        color: #534815;
        font-size: 1.3rem;
        letter-spacing: 0.03em;
        text-decoration: none;
        background: url(../images/common/icon_arrow_gold_dot.png) no-repeat 8px center;
        background-size: 4px 7px;
    }
}

/* ===== ラベル共通 ===== */
.fieldLabel {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .3rem;
    letter-spacing: 0.05rem;
}

.noDateLabel {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

/* ===== 日付テキスト入力欄 ===== */
.fieldCheckinInput {
    display: block;
    width: 100%;
}

/* ===== 送信ボタン ===== */
.submitButton {
    padding: 31px 6px 31px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/common/icon_arrow_white.png) no-repeat #7d6e29 22px center;
    background-size: 7px 13px;
    border: none;
    border-radius: 0 !important;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 1.5rem;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: bold;
}
@media (hover: hover) and (pointer: fine) {
    .submitButton:hover {
        opacity: .5;
    }
}

/* ===== プラン一覧ボタン（空室検索ボタンの下に配置） ===== */
.planListButton,
.planListButton:visited,
.planListButton:active {
    padding: 10px 6px 10px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../images/common/icon_arrow_white.png) no-repeat #534815 22px center;
    background-size: 7px 13px;
    border: none;
    cursor: pointer;
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 1.5rem;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.3s;
    font-weight: bold;
}
@media (hover: hover) and (pointer: fine) {
    .planListButton:hover {
        opacity: .5;
        color: #fff;
    }
}

/* 隠しフィールド（機能要件のため属性セレクタのまま維持） */
.formFields input[name="dt"] {
    display: none !important;
}

/* flatpickrが動的生成するカレンダーヘッダー(年月表示)（decoupleできない例外） */
.flatpickr-current-month {
    font-size: 135%;
    line-height: inherit;
    font-weight: 300;
    color: inherit;
    position: absolute;
    width: 75%;
    left: 12.5%;
    padding: 7.48px 0 0 0;
    line-height: 1;
    height: 34px;
    display: inline-block;
    text-align: center;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    letter-spacing: 0.1rem;
}
.flatpickr-current-month input.cur-year {
    background: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    cursor: text;
    padding: 0 0 0 .5ch;
    margin: 0;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    line-height: inherit;
    height: auto;
    border: 0;
    border-radius: 0;
    vertical-align: initial;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    letter-spacing: 0.1rem;
}

/**
* カレンダータイプ（flatpickr-wrapperはライブラリが動的生成するため、
* このセレクタ自体はdecoupleできません）
*/
.searchFormRoot[data-calendar] .fieldCheckin .flatpickr-wrapper {
    background-color: #fff;
    border: 1px solid #a29f93; /* 旧selectと同じ枠線色に統一 */
}

.searchFormRoot[data-calendar] .fieldCheckin .flatpickr-wrapper[disabled="disabled"] {
    opacity: .5;
}

.searchFormRoot[data-calendar] .fieldCheckin .flatpickr-wrapper::before {
    content: '';
    display: inline-block;
    margin-right: .3rem;
    background-size: 100% auto;
    width: 1rem;
    height: 1.2rem;
    transform: translate(.5rem, .5rem);
    background-image: none; /* 旧ソースのカレンダーアイコン画像パスが不明のため未設定。パスが分かれば設定します */
    background-repeat: no-repeat;
    pointer-events: none;
}

.searchFormRoot[data-calendar] .fieldCheckin .flatpickr-wrapper .fieldCheckinInput {
    background-color: transparent;
    border: none;
    cursor: pointer;
    appearance: none;
    margin-left: -1.3rem;
    padding: 0.5rem;
    padding-left: 1.8rem;
    font-size: 1.6rem;
}

/* flatpickrが動的生成するカレンダー内の日付セル（decoupleできない例外） */
.searchFormRoot[data-calendar] .fieldCheckin .flatpickr-day {
    letter-spacing: 0.05rem;
}

/* select（旧デザインの白背景・枠線・フォントを再現。矢印は旧仕様通りブラウザ標準のまま） */
.fieldSelect {
    padding: 4px 24px 4px 6px;
    display: block;
    background-color: #fff;
    border: 1px solid #a29f93;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237d6e29'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
}

/* checkInn / Out */
.fieldCheckin br {
    display: none;
}

.checkinUnit {
    display: inline-block;
    letter-spacing: 0.05rem;
}

.checkinUnitSuffix {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    padding: 0 10px 0 3px;
}

/* 「日付未定」の見た目カスタマイズ用（ここから自由にpadding/marginを編集してください） */
.noDateBox {
    padding: 0;
    margin: 0;
}

.noDateCheckbox {
    padding: 0;
    margin: 0 0 0 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 1px solid #a29f93;
    border-radius: 2px;
    cursor: pointer;
    transform: none;
    transition: background-color .2s, border-color .2s;
}

.noDateCheckbox:checked {
    background-color: #7d6e29; /* ボタンと同じ配色 */
    border-color: #7d6e29;
}

/* チェックマーク（矢印アイコンと同じ「線を回転」手法で自前描画） */
.noDateCheckbox::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.noDateCheckbox:checked::after {
    display: block;
}

.noDateCheckbox:focus-visible {
    outline: 2px solid #7d6e29;
    outline-offset: 2px;
}

/**
 * 768px以上
 */
@media screen and (min-width: 768px) {
    .formFields {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: 100px;
    }

    .noDateBox {
        display: block;
        width: 5rem;
        margin-left: .3rem;
        align-self: center;
    }

    .noDateLabel {
        margin-bottom: 0;
    }

    .fieldSelect {
        display: block;
        width: 100%;
        font-size: 1.6rem;
    }

    .searchFormRoot[data-calendar] .fieldCheckin {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 39%;
        margin: 0 15px 0 15px;
        height: 100%;
        align-content: center;
    }

    /* 「宿泊日」ラベルの隣に「日付未定」チェックボックスを配置（HTML順序は変更せずorderのみで制御） */
    .fieldCheckin > .fieldLabel {
        width: auto;
        order: 1;
    }

    .fieldCheckin .noDateBox {
        order: 2;
        width: 100px;
        margin-left: 0;
    }

    .fieldCheckin .flatpickr-wrapper {
        order: 3;
        display: flex;
        width: 100%;
    }

    .searchFormRoot[data-calendar] .fieldAdults {
        width: 17%;
        padding: 0px 15px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px dotted rgba(125,110,41,0.6);
        border-left: 1px dotted rgba(125,110,41,0.6);
    }

    .searchFormRoot[data-calendar] .fieldNights,
    .searchFormRoot[data-calendar] .fieldRooms {
        width: 17%;
        padding: 0px 15px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-right: 1px dotted rgba(125,110,41,0.6);
    }

    .searchFormRoot[data-calendar] .submitGroup {
        width: 20%;
        margin: 0 0 0 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: center;
    }

    .submitGroup .submitButton {
        width: 100%;
        margin: 0;
        flex: 1;
        padding: 10px 6px 10px 16px;
        background-position: 30px center;
        font-size: 1.5rem;
    }

    .submitGroup .planListButton {
        flex: 1;
        padding: 10px 6px 10px 16px;
        background-position: 29px center;
        font-size: 1.5rem;
    }
}

/**
 * 1024px以下
 */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .fieldSelect {
        display: block;
    }
}

/**
 * 767px以下
 */
@media screen and (max-width: 767px) {
    .flatpickr-calendar, .flatpickr-days {
        width: auto !important;
    }

    .flatpickr-calendar {
        max-width: 100%;
        box-sizing: border-box;
        left: 0 !important;
        right: auto !important;
        z-index: 1001 !important; /* #topcontrol(z-index:1000)より手前に表示するため */
    }

    .flatpickr-calendar,
    .flatpickr-days,
    .dayContainer {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .flatpickr-day {
        width: 14.2857143% !important;
        max-width: none !important;
    }

    .formFields {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem 4%;
    }

    .fieldCheckin {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .noDateBox {
        display: block;
        margin-top: .3rem;
    }

    .fieldAdults,
    .fieldRooms,
    .fieldNights {
        width: 48%;
    }

    .submitGroup {
        width: 100%;
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .submitGroup .submitButton {
        width: 100%;
        margin: 0;
        padding: 20px 6px 20px 22px;
    }

    .submitGroup .planListButton {
        padding: 20px 6px 20px 22px;
    }

    .fieldSelect {
        width: 100%;
        font-size: 1.5rem;
    }

    .fieldCheckin > .fieldLabel {
        width: 100%;
    }

    /* 日付入力欄の文字サイズ(SP幅のみ) */
    .fieldCheckin .flatpickr-wrapper .fieldCheckinInput {
        font-size: 1.5rem;
    }

    /**
   * カレンダータイプ
   */
    .fieldCheckin .flatpickr-wrapper {
        flex: 1;
        display: flex;
    }

    .fieldCheckin .noDateBox {
        width: 100%;
    }
}