@charset 'shift_jis';

/**
 * 温泉TOPの検索パネルUI
 */

/* 日付選択 */
.jlnpc-checkInOut {
  float: none;
  height: 40px;
}

.jlnpc-date-picker-items {
  position: relative;
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 308px;
  border: 1px solid #bcb6b3;
  border-radius: 4px;
  background-color: #fff;
}

.jlnpc-date-picker-items .jlnpc-date-picker-item:first-of-type {
  float: left;
  border-right: 1px solid #bcb6b3;
}

.jlnpc-date-picker-items .jlnpc-date-picker-item {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
}

.jlnpc-date-picker-items .jlnpc-date-picker-item label {
  font-size: 10px;
  line-height: 1;
  position: absolute;
  top: 5px;
  left: 8px;
  cursor: pointer;
  color: #918b8a;
}

.jlnpc-date-picker-items .jlnpc-date-picker-item input {
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 12px 20px 0 8px;
  cursor: pointer;
  text-align: left;
  border: none;
  background-color: transparent;
}

.jlnpc-date-picker-items .jlnpc-top__date-picker--disabled input {
  color: #ccc;
  background-color: #eee;
}

#jsi-jalan-date-picker--from #jsi-jalan-date-picker--to {
  font-size: 14px;
}

.jlnpc-stayInfo {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  padding-top: 10px;
  padding-left: 30px;
}

.jlnpc-stayInfo .item {
  float: left;
}

.jlnpc-stayCountTxt {
  font-size: 13px;
  padding-top: 1px;
  text-align: right;
  color: #3b1800;
}

/* カレンダー */
#ui-datepicker-div,
#ui-datepicker-div * {
  font-family: -apple-system, BlinkMacSystemFont, YuGothic, '\30D2\30E9\30AE\30CE\89D2\30B4\0020\0050\0072\006F\004E\0020\0057\0033', 'Hiragino Kaku Gothic ProN', '\30E1\30A4\30EA\30AA', Meiryo, '\FF2D\FF33\0020\FF30\30B4\30B7\30C3\30AF', 'MS PGothic', sans-serif;
}

.ui-datepicker {
  font-size: 14px;
  z-index: 2110;
  display: none;
  padding: 12px 30px;
  color: #3b1800;
  border: 1px solid #bcb6b3;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 3px 2px 0 rgb(0 0 0 / 50%);
}

.jlnpc-top__datepickerTo__calendar::before,
.jlnpc-top__datepickerFrom__calendar::before {
  position: absolute;
  z-index: 2;
  top: -16px;
  margin-left: -22px;
  content: '';
  border: 8px solid transparent;
  border-bottom: 8px solid #fff;
}

.jlnpc-top__datepickerTo__calendar::after,
.jlnpc-top__datepickerFrom__calendar::after {
  position: absolute;
  z-index: 1;
  top: -19px;
  visibility: visible;
  margin-left: -23px;
  content: '';
  border: 9px solid transparent;
  border-bottom: 9px solid #bcb6b3;
}

.jlnpc-top__datepickerFrom__calendar::before,
.jlnpc-top__datepickerFrom__calendar::after {
  left: 24%;
}

.jlnpc-top__datepickerTo__calendar::before,
.jlnpc-top__datepickerTo__calendar::after {
  left: 52%;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 83%;
  margin: 0 auto;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  font: 0/0 a;
  position: absolute;
  top: 10px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-size: 24px auto;
  text-shadow: none;
}

.ui-datepicker .ui-datepicker-prev {
  left: 10px;
  background: url('/assets/img/common/icons/icon_arrowLeft.svg') no-repeat 0 0;
}

.ui-datepicker .ui-datepicker-next {
  right: 10px;
  background: url('/assets/img/common/icons/icon_arrowRight.svg') no-repeat 0 0;
}

.ui-datepicker-title {
  font-weight: bold;
  padding-bottom: 5px;
  text-align: center;
}

.ui-datepicker-group-first .ui-datepicker-year::after {
  margin-right: 0;
}

.ui-datepicker-year::after {
  display: inline-block;
  content: '年';
}

.ui-helper-clearbox::after {
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '';
}

.ui-datepicker table {
  line-height: 1.8;
  border-collapse: collapse;
}

.ui-datepicker th {
  font-weight: normal;
}

.ui-datepicker th,
.ui-datepicker td {
  padding: 1px;
  text-align: center;
}

.ui-datepicker th,
.ui-datepicker td {
  padding: 0;
}

.ui-datepicker .ui-datepicker-calendar th:nth-of-type(6) {
  color: #1094e7;
}

.ui-datepicker .ui-datepicker-calendar th:nth-of-type(7) {
  color: #e8104a;
}

.ui-datepicker .ui-datepicker-calendar a:hover {
  color: #3b1800;
  background-color: #fef5d8;
}

.ui-datepicker .ui-datepicker-calendar .ui-datepicker-saturday a:hover {
  color: #1094e7;
}

.ui-datepicker .ui-datepicker-calendar .ui-datepicker-sunday a:hover,
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-holiday a:hover {
  color: #e8194a;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 1px 3px;
  /*
	/jalan/common/styles/dafault.cssで!important指定されているため、
	ここでも!important指定して優先度を上回る必要あり。
	*/

  text-decoration: none !important;
}

.ui-datepicker td a {
  font-weight: bold;
  padding: 4px 6px;
  color: #3b1800;
}

.ui-datepicker td.ui-state-disabled span {
  font-weight: bold;
  padding: 4px 6px;
  color: #ccc;
}

.ui-datepicker td.jlnpc-datepicker-startDay a,
.ui-datepicker td.jlnpc-datepicker-endDay a,
.ui-datepicker td.jlnpc-datepicker-startDay span,
.ui-datepicker td.jlnpc-datepicker-endDay span {
  color: #fff;
  background-color: #e77611;
}

.ui-datepicker .ui-datepicker-current-day a {
  background-color: #e77611;
}

.ui-datepicker .ui-datepicker-saturday a {
  color: #1094e7;
}

.ui-datepicker .ui-datepicker-sunday a,
.ui-datepicker .ui-datepicker-holiday a {
  color: #e8194a;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled {
  cursor: default;
  background-image: none;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
}

.ui-datepicker-buttonpane {
  text-align: right;
}

.ui-datepicker-buttonpane button {
  cursor: pointer;
}

.ui-datepicker-buttonpane .ui-priority-primary {
  font-size: 12px;
  font-weight: bold;
  padding: 0 0 0 15px;
  color: #1558ce;
  border: none;
  background: url('/assets/img/common/icons/icon_close_gra.svg') left center no-repeat;
}

.ui-datepicker-buttonpane .ui-priority-primary span {
  position: relative;
}

.ui-datepicker-buttonpane .ui-priority-primary:hover {
  color: #ff7d00;
}

.ui-datepicker-buttonpane .ui-priority-secondary {
  display: none;
}

.jlnpc-datepicker-effectiveScope {
  background-color: #fce3d5;
}

/* 部屋割りパネル */
div#roompanel-block {
  position: absolute;
  z-index: 15000;
  top: 0;
  left: 0;
  display: none;
  width: 550px;
}

div#roompanel-block * {
  color: #3b1800;
}

#roompanel-block #roompanel[id] {
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
  padding: 16px;
  border: 1px solid #bcb6b3;
  border-radius: 8px;
  background-color: #fff;
}

.jlnpc-styleguidScope .roomPanel__row+.roomPanel__row {
  margin-top: 16px;
}

.jlnpc-styleguidScope .roomPanel__rowTitle {
  font-weight: bold;
  text-align: left;
  color: #3b1800;
}

.jlnpc-styleguidScope table {
  border-spacing: 0;
  border-collapse: collapse;
}

.jlnpc-styleguidScope .roomPanel__layoutTable {
  margin-top: 8px;
  color: #3b1800;
}

.jlnpc-styleguidScope .roomPanel__layoutTable_td {
  padding: 0;
}

.jlnpc-styleguidScope .roomPanel__adultTable {
  width: 80px;
  color: #3b1800;
}

.jlnpc-styleguidScope .roomPanel__th {
  font-size: 12px;
  font-weight: bold;
  line-height: 21px;
  width: 88px;
  height: 23px;
  text-align: center;
  border: 1px solid #bcb6b3;
  background-color: #f7f5f2;
}

.jlnpc-styleguidScope .roomPanel__td {
  font-size: 0;
  width: 88px;
  height: 60px;
  padding-bottom: 8px;
  text-align: center;
  vertical-align: top;
  border: 1px solid #bcb6b3;
}

.jlnpc-styleguidScope .roomPanel__selectboxWrapper {
  position: relative;
  display: inline-block;
  margin-top: 2px;
}

.jlnpc-styleguidScope .roomPanel__selectboxWrapper--noLabel {
  margin-top: 25px;
}

.jlnpc-styleguidScope .roomPanel__selectboxWrapper::after {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  content: '';
  transform: rotate(45deg);
  pointer-events: none;
  border-right: 2px solid #918b8a;
  border-bottom: 2px solid #918b8a;
}

#roompanel-block #roompanel .roomPanel__selectbox {
  font-size: 12px;
  display: flex;
  align-items: center;
  width: 46px;
  height: 26px;
  padding: 0 10px 0 8px;
  cursor: pointer;
  border: 1px solid #bcb6b3;
  border-radius: 4px;
  background-color: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.jlnpc-styleguidScope .roomPanel__mei {
  font-size: 12px;
  margin-left: 4px;
  vertical-align: 1px;
}

#roompanel-block #roompanel .roomPanel__childLabel.roomPanel__childLabel {
  font-size: 10px;
  margin: 8px 0 0 0;
}

#roompanel-block .roomPanel__closeButton {
  font-size: 12px;
  font-weight: bold;
  position: relative;
  display: block;
  margin: 16px 0 0 auto;
  padding-left: 16px;
  cursor: pointer;
  color: #1558ce;
  border: 0;
  background-color: transparent;
  appearance: none;
}

#roompanel-block .roomPanel__closeButton:hover {
  color: #e78a13;
}

#roompanel-block .roomPanel__closeButton::before {
  font-family: jalan-iconfont;
  font-size: 11px;
  position: absolute;
  top: 5px;
  left: 0;
  content: '\F062';
  color: #918b8a;
}

.jlnpc-styleguidScope .roomPanel__childTable {
  margin-left: 12px;
  table-layout: fixed;
  color: #3b1800;
}

.jlnpc-styleguidScope .roomPanel__childTableCol:first-of-type {
  width: 80px;
}

.jlnpc-styleguidScope .roomPanel__childTableCol:nth-of-type(2) {
  width: 90px;
}

.jlnpc-styleguidScope .roomPanel__childTableCol:nth-of-type(3) {
  width: 82px;
}

.jlnpc-styleguidScope .roomPanel__childTableCol:nth-of-type(4) {
  width: 82px;
}

.jlnpc-styleguidScope .roomPanel__childTableCol:nth-of-type(5) {
  width: 90px;
}

/***** style調整 *****/
/* Base */
#onsen #search-date * {
  font-family: -apple-system, BlinkMacSystemFont, YuGothic, '\30D2\30E9\30AE\30CE\89D2\30B4\0020\0050\0072\006F\004E\0020\0057\0033', 'Hiragino Kaku Gothic ProN', '\30E1\30A4\30EA\30AA', Meiryo, '\FF2D\FF33\0020\FF30\30B4\30B7\30C3\30AF', 'MS PGothic', sans-serif;
  box-sizing: border-box;
  padding-bottom: 0;
}
#onsen  #search-date {
  padding-bottom: 16px;
}

#search-date a,
#search-date a:link {
  color: #1558ce;
}

#search-date a:hover {
  color: #e78a13;
}

/* h2タイトル */
#onsen #search-date .module-header .img {
  height: 22px;
}

html[xmlns] .main .column .module .module-content {
  left: 0;
  width: 100%;
  padding: 10px 10px 16px;
}

/* 日付 */
.jlnpc-checkInOut {
  display: flex;
}

.jlnpc-checkInOut .jlnpc-top__date-picker {
  display: flex;
  align-items: center;
}

.jlnpc-date-picker-items .jlnpc-date-picker-item input {
  height: 40px;
  color: #3b1800;
}

.jlnpc-date-picker-items .jlnpc-top__date-picker--disabled input {
  color: #ccc;
}

.jlnpc-date-picker-items .jlnpc-top__date-picker--disabled label {
  color: #918b8a;
}

.jlnpc-stayInfo {
  display: flex;
  justify-content: space-between;
  height: 16px;
  margin: 4px 0 10px;
  padding: 0 0 0 30px;
}

.item__datecheck .c-input-checkbox {
  font-size: 13px;
  display: flex;
  align-items: center;
  color: #3b1800;
}

#datecheck {
  display: none;
}

/* 人数エリア */
.jlnpc-searchPanel__inputRow {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

/* 選択中の温泉エリア */
#onsenSearchPanel {
  float: none;
}

#onsenSearchPanel .onsenSearchPanelCurrent {
  display: flex;
  align-items: center;
}

#onsenSearchPanel .onsenSearchPanelCurrent .onsenSearchPanelCurrentSelect {
  font-size: 13px;
  float: none;
  width: 308px;
  height: 32px;
  margin: 0;
  padding-left: 8px;
  border-color: #bcb6b3;
  border-radius: 4px;
}

#onsenSearchPanel .onsenSearchPanelCurrent .onsenSearchPanelCurrentSelect::before {
  border-top: 2px solid #918b8a;
  border-right: 2px solid #918b8a;
}

#onsenSearchPanel .onsenSearchPanelCurrent .onsenSearchPanelCurrentSelect span {
  line-height: 30px;
  color: #3b1800;
}

#onsenSearchPanel .onsenSearchPanelList .onsenSearchPanelListInner ul.onsenSearchPanelKenList {
  width: 136px;
  height: 232px;
  border-radius: 8px 0 0 8px;
}

#onsenSearchPanel .onsenSearchPanelList .onsenSearchPanelListInner ul.onsenSearchPanelAreaList {
  left: 136px;
}

#onsenSearchPanel .onsenSearchPanelList .onsenSearchPanelListInner .onsenSearchPanelListOnsenArea {
  height: 232px;
  border-left: none;
  border-radius: 0 8px 8px 0;
}

#onsenSearchPanel .onsenSearchPanelList .onsenSearchPanelListInner .onsenSearchPanelListPref {
  position: relative;
  color: #3b1800;
  background: none;
}

#onsenSearchPanel .onsenSearchPanelList .onsenSearchPanelListInner .onsenSearchPanelListPref::after {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 6px;
  height: 6px;
  margin: auto;
  content: '';
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  pointer-events: none;
  border-right: 2px solid #918b8a;
  border-bottom: 2px solid #918b8a;
}

#onsenSearchPanel .onsenSearchPanelList .onsenSearchPanelListInner .onsenSearchPanelListArea {
  color: #3b1800;
}

#onsenSearchPanel .onsenSearchPanelList .onsenSearchPanelListInner .onsenSearchPanelListOnsenArea ul li {
  color: #3b1800;
  padding-left: 16px;
}

/*　こだわり選択　*/
#onsen form.search-panel div.datekodawari {
  top: 0;
  display: flex;
  float: none;
  overflow: hidden;
  flex-wrap: wrap;
  width: 100%;
  margin: 10px 0;
  padding-top: 8px;
  border-top: 1px solid #ccc;
}

#onsen form.search-panel div.kodawari>span {
  float: none;
}

#onsen form.search-panel div.datekodawari .c-input-checkbox {
  font-size: 13px;
  line-height: 16px;
  display: flex;
  float: none;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 6px;
  color: #3b1800;
}

#onsen form.search-panel div.datekodawari .c-input-checkbox input {
  display: none;
}

.jlnpc-searchPanel__inputValue {
  margin-right: 20px;
}

.jlnpc-searchPanel__inputValue:last-child {
  margin-right: 0;
}

.jlnpc-searchPanel__inputValue p {
  display: flex;
  align-items: center;
}

.jlnpc-searchPanel__inputValue * {
  font-size: 13px;
  color: #3b1800;
}

#adultnum-selecttag {
  display: flex;
  align-items: center;
}

form.search-panel select {
  float: none;
  color: #3b1800;
}

/* submit */
#onsen #search-date div.submit {
  float: none;
  padding: 0;
}

#onsen #search-date div.submit .search-panel-researchButton {
  font-size: 16px;
  font-weight: bold;
  line-height: 38px;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  color: #fff;
  border: 1px solid #2171e0;
  border-radius: 4px;
  background: #2297f4;
  background: -webkit-gradient(linear, left top, left bottom, from(#38affc), to(#0174e7));
  background: -webkit-linear-gradient(#38affc, #0174e7);
  background: linear-gradient(#38affc, #0174e7);
}

#onsen #search-date div.submit .search-panel-researchButton:hover {
  color: #cde9f7;
  background: #2f5fd9;
  background: -webkit-gradient(linear, left top, left bottom, from(#2182e7), to(#3844ce));
  background: -webkit-linear-gradient(#2182e7, #3844ce);
  background: linear-gradient(#2182e7, #3844ce);
}


/* checkbox */
#onsen #search-date .c-input-checkbox span {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: -2px;
  margin-right: 4px;
  vertical-align: text-top;
  border: 2px solid #bcb6b3;
  border-radius: 2px;
  background-color: #fff;
}

#onsen #search-date .c-input-checkbox input:checked+span::after {
  position: absolute;
  top: 0;
  left: 3px;
  display: inline-block;
  box-sizing: border-box;
  width: 6px;
  height: 10px;
  content: '';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

#onsen #search-date .c-input-checkbox input:checked+span {
  border: 2px solid #e77611;
  background-color: #e77611;
}

/* select */
.c-input-select {
  position: relative;
}

.c-input-select select {
  font-size: 13px;
  line-height: 32px;
  position: relative;
  box-sizing: border-box;
  width: 54px;
  height: 32px;
  margin-right: 0;
  padding: 0 24px 0 8px;
  cursor: pointer;
  color: #333;
  border: 1px solid #bcb6b3;
  border-radius: 4px;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.c-input-select::after {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 6px;
  height: 6px;
  content: '';
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  pointer-events: none;
  border-right: 2px solid #918b8a;
  border-bottom: 2px solid #918b8a;
}

/* icon-font */
@font-face {
  font-family: 'jalan-iconfont';
  src: url('/assets/jalan-iconfont/jalan-iconfont.eot');
  src: url('/assets/jalan-iconfont/jalan-iconfont.woff') format('woff'),
    url('/assets/jalan-iconfont/jalan-iconfont.ttf') format('truetype');
}

.ji {
  font-family: 'jalan-iconfont' !important;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  text-decoration: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ji::before {
  position: absolute;
  top: 0;
  left: 0;
}

.ji::after {
  position: relative;
}

#search-date .ji {
  font-size: 20px;
  margin-right: 10px;
  color: #965a22;
}

#search-date .ji-calendar::before {
  content: '\F00C';
  color: #fff;
}

#search-date .ji-calendar::after {
  content: '\F057';
}

#search-date .ji-people {
  font-size: 22px;
  margin-right: 8px;
}

#search-date .ji-people::after {
  content: '\F0A1';
}

#search-date .ji-onsen::after {
  content: '\F09E';
}

#onsenSearchPanel .onsenSearchPanelList {
  position: absolute;
  z-index: 400;
  top: 32px;
  left: 30px;
  display: none;
  overflow: hidden;
  width: 409px;
  height: 232px;
  border-radius: 8px;
}

/* キーワード検索 */
#search-keyword * {
  font-family: -apple-system, BlinkMacSystemFont, YuGothic, '\30D2\30E9\30AE\30CE\89D2\30B4\0020\0050\0072\006F\004E\0020\0057\0033', 'Hiragino Kaku Gothic ProN', '\30E1\30A4\30EA\30AA', Meiryo, '\FF2D\FF33\0020\FF30\30B4\30B7\30C3\30AF', 'MS PGothic', sans-serif;
  box-sizing: border-box;
}

#search-keyword a,
#ssearch-keyword a:link {
  color: #1558ce;
}

#search-keyword a:hover {
  color: #e78a13;
}

#keyword-search-form #search-keyword .keyword_box {
  display: flex;
  width: auto;
  padding: 0 10px;
}
#keyword-search-form  #search-keyword p.ranking {
  display: inline-block;
}
#keyword-search-form #search-keyword .keyword_txt {
  float: none;
}

#search-keyword #input-keyword {
  width: 270px;
  height: 30px;
  margin: 0 8px 0 0;
  padding: 4px 8px;
  border: 1px solid #bcb6b3;
  border-radius: 4px;
}

#search-keyword #research {
  font-size: 14px;
  font-weight: bold;
  line-height: 26px;
  display: inline-block;
  width: 60px;
  height: 30px;
  cursor: pointer;
  text-align: center;
  text-decoration: none !important;
  color: #fff;
  border: 1px solid #2171e0;
  border-radius: 4px;
  background: #2297f4;
  background: -webkit-gradient(linear, left top, left bottom, from(#38affc), to(#0174e7));
  background: -webkit-linear-gradient(#38affc, #0174e7);
  background: linear-gradient(#38affc, #0174e7);
}

#search-keyword #research:hover {
  color: #cde9f7;
  background: #2f5fd9;
  background: -webkit-gradient(linear, left top, left bottom, from(#2182e7), to(#3844ce));
  background: -webkit-linear-gradient(#2182e7, #3844ce);
  background: linear-gradient(#2182e7, #3844ce);
}

#keyword-search-form #search-keyword p.keyword_msg {
  font-size: 11px;
  padding: 4px 10px 8px;
  color: #5b4843;
}


/* 余白調整 */
.u-mr-4 {
  margin-right: 4px !important;
}

.u-ml-4 {
  margin-left: 4px !important;
}