@charset "UTF-8";
/*--------------------------------------------------------------
# 新ご予約検索モジュール (optima/test.html)
#
# 旧モジュール（inc/template-reservation.php /
# .module__footer-container__top）のデザイントーンを、
# 要素構成が異なる新モジュール（外部予約エンジンの検索フォーム）に
# 移行するための専用スタイルです。
#
# ※ test.html のHTML構成自体は変更せず、既存要素
#    (#ZenSearchFrom, #searchBox, fieldset.checkin/.nights,
#    .field-button, pikaday) のみを装飾しています。
#
# ※ サイズ・色・余白の数値は旧sassの該当箇所から流用しています。
#    出典：
#    sass/_layout-common.scss  L1314- .module__footer-container__top
#    sass/_layout-pc.scss      L635-  .module__footer-container__top
#    sass/_layout-sp.scss      L622-  .module__footer-container__top
#    sass/_layout-tb.scss      L89-   .module__footer-container__top
--------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP:400&display=swap");
html {
  font-size: 62.5%;
}

/*
breakpoint
*/
/*
@mixin fadeIn() {
    opacity: 0;
    @include anime($sec:1s);
    &.anime{
        opacity: 1;
    }
}
*/
/*--------------------------------------------------------------
# 全体の背景・余白
# 旧：.module__footer-container__top
#   common: background:url(bg-img_b.jpg) center/cover
#   pc    : padding:5em 0
#   sp    : padding:2.5em 0
--------------------------------------------------------------*/
#ZenSearchFrom {
  display: block;
  background-size: cover;
  font-family: "Noto Serif JP", "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMinchoM, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#ZenSearchFrom input,
#ZenSearchFrom select,
#ZenSearchFrom button,
#ZenSearchFrom fieldset,
#ZenSearchFrom legend {
  box-sizing: border-box;
}
#ZenSearchFrom label {
  font-size: 1.4rem;
}
/*--------------------------------------------------------------
# フォーム本体（行の並び）
# 旧：.reserved（&>form{width:100%} / sp:&>form{width:90%;margin:0 auto}）
# 旧モジュールは行(.row)を常に縦積みにしているため、ここも
# ブレークポイントに関わらず column 固定にする。
--------------------------------------------------------------*/
#searchBox {
  display: flex;
  width: 100%;
  margin: 0 auto;
  max-width: 1025px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  row-gap: 20px;
}

/*--------------------------------------------------------------
# 各項目共通（チェックイン・泊数 = 旧.rowに相当）
# 旧：
#   common: .row{padding-bottom:15px;display:flex;align-items:center}
#   sp/tb : .row{padding-bottom:10px;display:block}
#   pc    : label.formLabel{padding-right:20px;width:95px;font-size:1.4rem;color:$clrGreen}
--------------------------------------------------------------*/
#searchBox fieldset {
  border: none;
  margin: 0;
  padding: 0 0 0 10px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px; /* 要素間の隙間 */
  flex-basis: 48%;
  border-left: 1px solid #013238;
}
#searchBox fieldset legend {
  padding: 0;
  margin-bottom: 0.5em;
  font-size: 1.4rem;
  color: #013238;
  letter-spacing: 0.04em;
  float: left;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
  line-height: 1.6em;
}
@media screen and (min-width: 1025px) {
  #searchBox fieldset {
    display: flex;
    align-items: center;
  }
  #searchBox fieldset legend {
    width: 95px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
}

/*--------------------------------------------------------------
# チェックイン（テキスト入力＋pikaday）
# 旧の select と同じ見た目（高さ・背景・枠なし・角丸なし）を踏襲
--------------------------------------------------------------*/
#searchBox fieldset.checkin {
  flex-basis: 100%;
}
#searchBox fieldset.checkin input#checkin_date {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 0;
  background: #fff;
  padding: 0 20px;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMinchoM, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #000;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
@media screen and (min-width: 1025px) {
  #searchBox fieldset.checkin input#checkin_date {
    width: 380px;
  }
}
#searchBox fieldset.checkin #no_checkin {
  display: block;
}

/*--------------------------------------------------------------
# 子供欄
--------------------------------------------------------------*/
#searchBox fieldset.children .child1 label select {
  margin-left: 10px;
}

/*--------------------------------------------------------------
# select共通デザイン
# #numOfNights限定ではなく、fieldset内のselect全般（今後追加
# されるものも含む）に同じ見た目を自動適用する。
# 旧：.reserved select{width:100px;height:40px;border-radius:0;
#                       border:none;background:$clrWhite;padding-left:20px;
#                       font-size:1.5rem} + .formArrow（矢印アイコン）
#
# 注：<select>はブラウザの置換要素のため::before/::afterで矢印を
#     描画できない（どのブラウザも非対応）。そのためappearanceは
#     リセットせず、ブラウザ標準の矢印をそのまま表示する。
--------------------------------------------------------------*/
#searchBox fieldset select {
  width: 160px;
  height: 40px;
  border: none;
  border-radius: 0;
  background: #fff;
  padding: 0 20px;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMinchoM, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #000;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

/*--------------------------------------------------------------
# 送信ボタン
# 旧：.link{margin:0 auto;display:flex;width:300px;height:50px;
#            color:$clrWhite;background:$clrGreen;justify-content:center;
#            align-items:center}
#   pc: hoverで背景/文字色を反転（@include anime）
#   sp/tb: width:100%
--------------------------------------------------------------*/
#searchBox .field-button {
  margin: 1.5em 0 0;
  text-align: center;
  flex-basis: 100%;
}
#searchBox .field-button input.sub-bgcolor {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: none;
  background: #013238;
  color: #fff;
  font-size: 1.5rem;
  font-family: "Noto Serif JP", "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMinchoM, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  cursor: pointer;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.12, 0.25, 1);
  -ms-transition-duration: 0.3s;
  -ms-transition-timing-function: cubic-bezier(0, 0.12, 0.25, 1);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0, 0.12, 0.25, 1);
  -moz-transition-duration: 0.3s;
  -moz-transition-timing-function: cubic-bezier(0, 0.12, 0.25, 1);
  transition-property: background-color, color;
}
@media screen and (min-width: 1025px) {
  #searchBox .field-button input.sub-bgcolor {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  #searchBox .field-button input.sub-bgcolor:hover {
    background-color: #fff;
    color: #013238;
  }
}

/*--------------------------------------------------------------
# pikaday カレンダー（外部ウィジェット）の配色をブランドトーンへ
# test.html内の<style>にある初期色（赤/青/オレンジ）を、
# 本サイトのグリーン基調に合わせて上書きします。
--------------------------------------------------------------*/
.pika-single {
  font-family: "Noto Serif JP", "游明朝体", YuMincho, "游明朝 Medium", "Yu Mincho Medium", "游明朝", "Yu Mincho", YuMinchoM, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  border-color: #013238;
}

.pika-lendar th:first-child,
.pika-lendar td:first-child .pika-button,
.pika-lendar th:last-child,
.pika-lendar td:last-child .pika-button {
  color: #013238;
}

.has-event .pika-button {
  color: #013238;
  background: #F3F4F2;
}

.is-selected .pika-button {
  color: #fff;
  background: #013238;
  box-shadow: inset 0 1px 3px #001D22;
}

.pika-button:hover,
.pika-row.pick-whole-week:hover .pika-button {
  color: #fff;
  background: #013238;
}

.pika-today .pika-button {
  background: #F3F4F2;
}/*# sourceMappingURL=optima.css.map */