@charset "utf-8";
/* 共通ソース 
--------------------------------------------------
・ヘッダー・フッターなど各ページ共通ソースです
・下部ディレクトリの共通ソース（キービジュアル等）も含みます
・２ページ以上またぐソースは全てこちらに記述します
--------------------------------------------------
*/

/* 
--------------------------------------------------
宿泊予約 検索
--------------------------------------------------
*/
.top--book--wrap {
  margin-bottom: 50px;
}
.top--book--inner--input {
  justify-content: flex-start;
}
.top--book--date {
  margin-right: 30px;
}
.top--book--inner--input > div {
  flex-wrap: wrap;
}
.top--book--inner--input input {
  width: 128px;
  margin-left: 0;
}
.top--book--inner--input .top--book--stay select,
.top--book--inner--input .top--book--room select {
  margin-left: 0;
}
.top--book--inner--input > div > p:first-child {
  width: 100%;
  margin-bottom: 10px;
  margin-right: 0;
}
.top--book--people p:nth-child(4) {
  margin-right: 15px;
}
.top--book--inner--submit div:nth-child(3) a {
  background: linear-gradient(to bottom, #5e4b2b, #867657);
}
.top--book--inner--submit div:nth-child(3) a:hover {
  background: linear-gradient(to top, #5e4b2b, #867657);
  border: solid 1px #fff;
}
/* 子供人数設定 */
.top--book--child {
  flex-direction: column;
  position: relative;
}
.top--book--inner--input > div > p.top--book--child--text {
  background-color: #e7e5dc;
  width: 200px;
  height: 45px;
  padding-left: 25px;
  margin: auto 30px 0 0;
  display: flex;
  align-items: center;
}
.top--book--inner--input > div > p.top--book--child--text::after {
  width: 11px;
  height: 8px;
  margin-left: auto;
  margin-right: 15px;
  display: block;
  content: "";
  background-image: url(../img/top/top--child--arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.top--book--inner--input > div > p.top--book--child--text.active::before {
  display: block;
  content: "";
  width: 200px;
  height: 20px;
  position: absolute;
  top: 65px;
  left: 0;
  background-color: #e7e5dc;
}
.top--book--inner--input > div > p.top--book--child--text.active::after {
  transform: rotate(180deg);
}
.top--book--inner--input .top--book--child--inner {
  display: none;
  width: 1000px;
  background-color: #e7e5dc;
  z-index: 1;
  position: absolute;
  top: 80px;
  left: -644px;
}
.top--book--child--inner > div {
  display: flex;
  flex-direction: column;
}
.top--book--child--inner {
  padding: 30px;
}
.top--book--child--inner ul {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-right: auto;
}
.top--book--child--inner div > p {
  font-weight: bold;
  margin-right: auto;
  margin-bottom: 10px;
}
.top--book--child--inner--top {
  margin-bottom: 30px;
}
.top--book--child--inner ul li {
  display: flex;
  align-items: center;
  line-height: 1.25;
  margin-right: 30px;
}
.top--book--child--inner ul li:first-child {
  margin-left: 10px;
}
.top--book--child--inner ul li:last-child {
  margin-right: 0;
}
@media screen and (max-width: 1000px) {
  .top--book--date {
    margin-right: 0;
  }
  .top--book--inner--input input {
    width: 12vw;
  }
  /* 子供人数設定 */
  .top--book--inner--input > div > p.top--book--child--text {
    width: 18vw;
    padding-left: 2.5vw;
    margin: auto 3vw 0 0;
  }
  .top--book--inner--input > div > p.top--book--child--text.active::before {
    width: 18vw;
  }
  .top--book--inner--input .top--book--child--inner {
    width: 100vw;
    padding: 30px 5%;
    left: -66.2vw;
  }
}
@media screen and (max-width: 767px) {
  .header--reservation--bg {
    height: 100%;
    height: -webkit-fill-available;
  }
  .header--reservation > ul {
    height: 100%;
    overflow-y: scroll;
  }
  .header--reservation > ul > li:first-child {
    top: -2vw;
  }
  .top--book--wrap {
    margin-bottom: 0;
  }
  .top--book--inner--input > div > p:first-child {
    width: auto;
    margin-bottom: 0;
    width: 22.5%;
  }
  .top--book--inner--input input {
    width: 77.5%;
    margin-right: 0;
  }
  .top--book--inner--input .top--book--room select {
    padding-left: 33vw;
  }
  /* 子供人数設定 */
  .top--book--inner--input > div > p.top--book--child--text {
    width: 100%;
    height: 12.5vw;
  }
  .top--book--inner--input .top--book--child--inner {
    width: 100%;
    padding: 5vw 5%;
    top: 12vw;
    left: 0;
  }
  .top--book--child--inner div > p {
    margin-right: auto !important;
    margin-bottom: 3.5vw !important;
  }
  .top--book--child--inner ul {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .top--book--child--inner ul li {
    width: 49%;
    margin: 0;
  }
  .top--book--child--inner ul li p:nth-child(2) {
    width: 50%;
  }
  .top--book--child--inner ul li:first-child {
    margin: 0;
    margin-bottom: 3.5vw;
  }
  .top--book--inner--input > div > p.top--book--child--text.active {
    margin-bottom: 90vw;
  }
  .top--book--inner--input > div > p.top--book--child--text.active::before {
    display: none;
  }
  .top--book--inner--input .top--book--child--inner select {
    padding-left: 2.5vw !important;
    width: 16.5vw;
  }
}

/* 
--------------------------------------------------
モーダル 宿泊予約 検索
--------------------------------------------------
*/
.header--reservation .top--book--child--inner p::after {
display: none;
}
.header--reservation .top--book--child p {
margin-right: auto;
}
.header--reservation .top--book--child > p {
margin-bottom: 0;
}
.header--reservation .top--book--child--inner {
display: none;
flex-direction: column;
}
.header--reservation .top--book--child--inner ul {
flex-wrap: wrap;
}
.header--reservation .top--book--child--inner > div {
width: 100%;
max-width: 450px;
padding: 0;
margin-bottom: 15px;
}
.header--reservation
.top--book--child--inner
> div
li:nth-child(3)
p:first-child,
.header--reservation
.top--book--child--inner
> div
li:nth-child(4)
p:first-child {
width: 45%;
margin-right: 0;
}
.header--reservation .top--book--child ul li {
width: 42.5%;
}
.header--reservation .top--book--child ul li:first-child {
margin-left: 0;
margin-bottom: 10px;
}
.header--reservation .top--book--child ul li:nth-child(2) {
margin-bottom: 10px;
}
.header--reservation .top--book--child--inner ul li {
margin-right: 5%;
}
.header--reservation .top--book--child ul li,
.header--reservation .top--book--child ul li p {
text-align: left;
padding: 0;
margin-bottom: 0;
}
.header--reservation .top--book--child ul li p small {
font-size: 0.9em;
}
.header--reservation .top--book--child p.sp--blc {
display: none;
}
.header--reservation .top--book--child p.pc--blc {
display: block;
}
@media screen and (max-width: 768px) {
.header--reservation .top--book--child p.sp--blc {
  display: block;
}
.header--reservation .top--book--child p.pc--blc {
  display: none;
}
}

/* 
--------------------------------------------------
黒ボタンテンプレ
--------------------------------------------------
*/
.cmn--btn-—color-—bk {
  color: #fff;
  border: solid 1px #333;
  background-color: #333;
}
.cmn--btn-—color-—bk:hover {
  color: #333;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .cmn--btn-—color-—bk {
    width: 62vw;
  }
}

/* 
--------------------------------------------------
下部ディレクトリ共通
-------------------------------------------------- 
*/
/* 下部ディレクトリ・キービジュアル */
.cmn--keyvis--wrap {
  background-image: url(../img/common/dammy--keyvis.jpg);
}
.cmn--keyvis--wrap .cmn--keyvis--text {
  top: 52.5%;
}
.cmn--keyvis--wrap h1 {
  text-align: center;
  font-weight: 300;
  letter-spacing: 0;
  margin-bottom: 30px;
}
.cmn--keyvis--wrap p {
  font-size: 24px;
  letter-spacing: .15em;
  text-indent: .15em;
}
.cmn--keyvis--wrap p::before,
.cmn--keyvis--wrap p::after {
  display: none;
}
@media screen and (max-width: 767px) {
  .cmn--keyvis--wrap img {
    width: 45%;
  }
  .cmn--keyvis--wrap h1 {
    letter-spacing: .1em;
    text-indent: .1em;
    margin-bottom: 3vw;
  }
  .cmn--keyvis--wrap p {
    font-size: 4vw;
  }
}

/* パンくず */
.cmn--pankuzu--wrap ul {
  margin-left: 110px;
  margin-top: 0;
}
.cmn--pankuzu--wrap ul li,
.cmn--pankuzu--wrap ul li a {
  color: #fff;
}
.cmn--pankuzu {
  background-color: #7c6e53;
  width: 1100px;
  height: 30px;
  margin: 0 auto;
  position: relative;
  left: -100px;
  display: flex;
  align-items: center;
}
.cmn--pankuzu::before, 
.cmn--pankuzu::after {
  display: block;
  content: "";
  position: absolute;
}
.cmn--pankuzu::before {
  width: 600px;
  height: 30px;
  background-color: #7c6e53;
  left: -600px;
}
.cmn--pankuzu::after {
  width: 30px;
  height: 30px;
  background-image: url(../img/common/cmn--pankuzu--after.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  right: 0;
}
@media screen and (max-width: 1200px) {
  .cmn--pankuzu--wrap ul {
    margin-left: 110px;
  }
  .cmn--pankuzu {
    width: 91.6%;
    left: -120px;
  }
}
@media screen and (max-width: 768px) {
  .cmn--pankuzu {
    width: 75%;
    left: 0;
    height: 2vw;
    margin-left: 0;
  }
  .cmn--pankuzu::before {
    display: none;
  }
  .cmn--pankuzu::after {
    width: 2vw;
    height: 2vw;
  }
}

/* 下部ディレクトリ・リード文 */
.cmn--read--wrap {
  height: 435px;
  background-image: url(../img/common/cmn--read--icon.svg);
  background-size: 342px 250px;
  background-repeat: no-repeat;
  background-position: center;
}
.cmn--read--wrap p {
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: .01em;
  text-indent: .01em;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.cmn--read--wrap p small {
  font-size: .875em;
}
@media screen and (max-width: 768px) {
  .cmn--read--wrap {
    height: 56vw;
    background-size: 45vw;
  }
  .cmn--read--wrap p {
    font-size: 4.25vw;
  }
}

/* 小見出しテンプレ */
.cmn--resort--heading {
  text-align: center;
  margin-bottom: 50px;
}
.cmn--resort--heading-S {
  margin-bottom: 45px;
}
.cmn--resort--heading h2 {
  color: #b2ada0;
  font-size: 72px;
  margin-bottom: 25px;
}
.cmn--resort--heading-S h2 {
  font-size: 48px;
}
.cmn--resort--heading p {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .cmn--resort--heading,
  .cmn--resort--heading-S {
    margin-bottom: 5vw;
  }
  .cmn--resort--heading h2,
  .cmn--resort--heading-S h2 {
    font-size: 8.5vw;
    margin-bottom: 5vw;
  }
  .cmn--resort--heading p {
    font-size: 3.75vw;
  }
}

/* table テンプレ */
table.cmn--resort--table tr {
  border-top: dotted 1px #867657;
}
table.cmn--resort--table tr:last-child {
  border-bottom: dotted 1px #867657;
}
table.cmn--resort--table th,
table.cmn--resort--table td {
  font-weight: 500;
  line-height: 1.5;
  padding: 20px 20px 15px;
  background-color: #fff;
}
table.cmn--resort--table th:first-child,
table.cmn--resort--table td:first-child {
  color: #fff;
  background-color: #a49882;
}
@media screen and (max-width: 768px) {
  table.cmn--resort--table th,
  table.cmn--resort--table td {
    font-size: 3.75vw;
    padding: 4vw 4vw 3vw;
  }
}