@charset "utf-8";
/* CSS Document */
/*--------------------
スクロールのcss
--------------------*/
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');
.scroll_down {
  position: absolute;
  top: 1350px;
  left: 90%;
}
.scroll_down a {
  position: absolute;
  left: 10px;
  bottom: 87px;
  color: #fff;
  font-size: 14px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-lr;
  text-decoration: none;
  text-transform: uppercase;
}
.scroll_down:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #DAA520;
  animation:
    circlemove 2.2s ease-in-out infinite, cirlemovehide 2.2s ease-out infinite;
}
@keyframes circlemove {
  0% {
    bottom: 160px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes cirlemovehide {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
.scroll_down:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 160px;
  background: #DAA520;
}
/*--------------------
PCファーストビューのcss
--------------------*/
.first-view {
  height: calc(100vh - 100px);
  background-image: url("../img/spa2.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#top h2 {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 32px;
  font-weight: 200;
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 10px;
  margin-right: 15%;
  text-shadow: #000 1px 0 10px;
  letter-spacing: 0.045em;
  display: inline-block;
}
#top h3 {
  font-weight: 100;
}
.lead p {
  text-align: center;
  margin-top: 100px;
  line-height: 1.7;
}
.link-button-area {
  margin: 80px auto;
  text-align: center;
}
.link-button {
  background-color: #731224;
  display: inline-block;
  min-width: 300px;
  font-size: 1.5rem;
  line-height: 2rem;
  padding: 10px;
    cursor: pointer;
}
.link-button:hover {
  background-color: chocolate;
}
@media(max-width:800px) {
  .scroll_down {
    display: none;
  }
  #top h2 {
    margin-right: 10%;
  }
  #top p {
    font-size: 16px;
  }
}
@media(max-width:900px) {
  #top h2 {
    font-size: 32px;
  }
}
/*--------------------
pcトップ　ご宿泊のcss
--------------------*/
/*.wrapper {
  width: 90%;
  margin: auto;
}*/
.stay-area h3::before {
  content: '';
  display: block;
  background: url(../img/orange.png) no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
.stay-area h3 {
  display: block;
  margin: 30px auto;
  text-align: center;
  font-size: 28px;
  width: 200px;
  /*  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;*/
}
.stay-area h3::after {
  content: '';
  display: block;
  background-color: #DAA520;
  width: 150px;
  height: 1px;
  margin: 20px auto 0 auto;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider01 img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider01 .slick-slide {
  margin: 0 10px; /*スライド左右の余白調整*/
}
/*--------------------
pcトップ　お知らせのcss
--------------------*/
.news-area h3::before {
  content: '';
  display: block;
  background: url(../img/orange.png) no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
.news-area h3 {
  display: block;
  margin: 30px auto;
  text-align: center;
  font-size: 28px;
  width: 200px;
}
.news-area h3::after {
  content: '';
  display: block;
  background-color: #DAA520;
  width: 150px;
  height: 1px;
  margin: 20px auto 0 auto;
}
.news-contents {
  max-width: 550px;
  text-align: center;
  margin: auto;
}
.news-area p {
  display: inline-block;
  text-align: left;
}
.news-area p::before {
  content: '';
  display: block;
  width: 550px;
  height: 1px;
  background-color: #DAA520;
  margin: 10px auto 10px auto;
}
.news-contents {
  width: 650px;
}
.news-contents p {
  text-align: left;
  padding: 5px 0;
}
.news-area p:nth-child(3)::after {
  content: '';
  display: block;
  width: 550px;
  height: 1px;
  background-color: #DAA520;
  margin: 20px auto 0;
}
/*--------------------
pcトップ　お問い合わせのcss
--------------------*/
.contact-area h3::before {
  content: '';
  display: block;
  background: url(../img/orange.png) no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
.contact-area h3 {
  display: block;
  margin: 30px auto;
  text-align: center;
  font-size: 28px;
  width: 200px;
  /*  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;*/
}
.contact-area h3::after {
  content: '';
  display: block;
  background-color: #DAA520;
  width: 150px;
  height: 1px;
  margin: 20px auto 0 auto;
}
.contact-area p {
  text-align: center;
}
/*--------------------
pcトップ　アクセスのcss
--------------------*/
.map h3::before {
  content: '';
  display: block;
  background: url(../img/orange.png) no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
.map h3 {
  display: block;
  margin: 30px auto;
  text-align: center;
  font-size: 28px;
  width: 200px;
  /*  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;*/
}
.map h3::after {
  content: '';
  display: block;
  background-color: #DAA520;
  width: 150px;
  height: 1px;
  margin: 20px auto 0 auto;
}
.sub-title01 {
  display: block;
  margin: 30px auto;
  font-size: 24px;
  width: 60px;
  text-align: center;
}
.sub-title02 {
  display: block;
  margin: 30px auto;
  font-size: 24px;
  width: 50px;
  text-align: center;
}
.sub-title03 {
  display: block;
  margin: 30px auto;
  font-size: 24px;
  width: 80px;
  text-align: center;
}
.sub-title04 {
  display: block;
  margin: 30px auto;
  font-size: 24px;
  width: 80px;
  text-align: center;
}
/*--------------------
pcトップ　地図エリアのcss
--------------------*/
.map iframe {
  display: block;
  width: 80%;
  height: 400px;
  margin: 30px auto 10px auto;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.map p {
  text-align: center;
}
/*--------------------
pcトップ　フォトギャラリーのcss
--------------------*/
.photo h3::before {
  content: '';
  display: block;
  background: url(../img/orange.png) no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
.photo h3 {
  display: block;
  margin: 30px auto;
  text-align: center;
  font-size: 28px;
  width: 300px;
}
.photo h3::after {
  content: '';
  display: block;
  background-color: #DAA520;
  width: 150px;
  height: 1px;
  margin: 20px auto 30px auto;
}
.photo p {
  text-align: center;
}
.photo ul {
  margin-top: 30px;
}
/*==================================================
ギャラリーのためのcss
===================================*/
.gallery {
  columns: 4; /*段組みの数*/
  padding: 0 15px; /*ギャラリー左右に余白をつける*/
  margin: 0;
}
.gallery li {
  margin-bottom: 20px; /*各画像下に余白をつける*/
  list-style: none;
}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img {
  width: 100%;
  height: auto;
  vertical-align: bottom; /*画像の下にできる余白を削除*/
}
/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
  .gallery {
    columns: 3;
  }
}
@media only screen and (max-width: 768px) {
  .gallery {
    columns: 2;
  }
}
/*‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
幅800pxまでのトップページcss
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐*/
@media(max-width:800px) {
  #top h2 {
    font-size: 24px;
  }
  #top p {
    text-align: left;
    width: 90%;
    margin: auto;
  }
  .news-contents {
    max-width: 300px;
  }
  .news-area p::before {
    width: 280px;
    margin: auto;
  }
  .news-area p:nth-child(3)::after {
    width: 280px;
    margin: auto;
  }
  #top .footer p {
    text-align: center;
  }
}
/*--------------------
--------------------
ここから下層ページ
pc　aboutページのcss
--------------------
--------------------*/
.about-first-view {
  height: calc(100vh - 100px);
  background-image: url("../img/roomspa01.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-title h2 {
  display: flex;
  text-align: left;
  font-size: 30px;
  font-weight: 100;
  margin: 80px;
  position: relative;
}
.about-title h2::before {
  content: '';
  display: block;
  background: url("../img/ashirai02.png") no-repeat center / contain;
  width: 65px;
  height: 40px;
  margin-right: 10px;
}
.about-title h2::after {
  content: '';
  width: 330px;
  height: 2px;
  display: inline-block;
  background-color: #DAA520;
  position: absolute;
  bottom: -10px;
  left: auto;
}
#about h3 {
  font-size: 30px;
  font-weight: 100;
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 10px;
  text-shadow: #000 1px 0 10px;
  letter-spacing: 0.045em;
  display: inline-block;
}
/*==================================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}
/*
==================================================
cssだけでふわっ
===================================*/
#about dl {
  display: block;
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
#about .main p {
  text-align: center;
  line-height: 1.7;
}
#about .lead {
  margin-top: 20px;
}
.motif {
  width: 50px;
  margin: 200px auto;
}
.about-contents {
  width: 90%;
  margin: auto;
}
.about-contents img {
  width: 70%;
  margin: auto;
  position: relative;
}
.about-contents img::after {
  content: "";
  width: 50%;
  height: 830px;
  background: url("../img/pattern.png") repeat 0 0;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1
}
/*ヘッダーのずれを直すためのコメントアウト
li {
  margin-top: 120px;
}*/
#about dt {
  font-size: 30px;
  margin-top: 30px;
  display: flex;
}
#about dt::before {
  content: '';
  display: block;
  background: url("../img/ashirai01.png") no-repeat center / contain;
  width: 65px;
  height: 40px;
  margin-right: 10px;
}
#about dd {
  text-align: left;
  font-size: 16px;
  margin-top: 20px;
  position: relative;
  left: 15%;
  line-height: 1.8;
}
/*--------------------
ここから下層ページ
sp　aboutページのcss
--------------------*/
@media(max-width:800px) {
  #about h2 {
    font-size: 24px;
    margin: 80px 0 60px 0;
  }
  #about h3 {
    font-size: 24px;
  }
  #about .lead {
    margin: 20px 15px 0 15px;
    text-align: left;
  }
  #about p {
    font-size: 16px;
  }
  .about-contents img {
    width: 100%;
    height: auto;
  }
  .motif {
    width: 25px;
    margin: 150px auto;
  }
  #about dt {
    font-size: 24px;
    align-items: center;
  }
  #about dd {
    font-size: 16px;
    left: 0%;
  }
}
@media (min-width:801px) and (max-width:1100px) {
  #about h2 {
    font-size: 35px;
    margin: 80px 0 60px 0;
  }
  #about h3 {
    font-size: 32px;
  }
  #about dd {
    left: 0%;
  }
  .about-contents img {
    width: 100%;
    height: auto;
  }
}
/*--------------------
--------------------
ここから下層ページ
pc　stayページのcss
--------------------
--------------------*/
.stay-first-view {
  height: calc(100vh - 100px);
  background-image: url("../img/room01.jpeg");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
#stay h2 {
  font-weight: 100;
  text-align: left;
    font-size: 30px;
  margin: 80px;
  display: flex;
  position: relative;
}
#stay h2::before {
  content: '';
  display: block;
  background: url("../img/ashirai02.png") no-repeat center/ contain;
  width: 65px;
  height: 40px;
  margin-right: 10px;
}
#stay h2::after {
  content: '';
  width: 330px;
  height: 2px;
  display: inline-block;
  background-color: #DAA520;
  position: absolute;
  bottom: -10px;
  left: auto;
}
#stay h3 {
  font-size: 40px;
  font-weight: 100;
  backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 10px;
  text-shadow: #000 1px 0 10px;
  letter-spacing: 0.045em;
  display: inline-block;
}
#stay h4 {
  text-align: center;
  font-size: 32px;
  font-weight: 100;
}
#stay h4::before {
  content: '';
  display: block;
  background: url("../img/orange.png") no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
#stay h4::after {
  content: '';
  display: block;
  width: 150px;
  height: 2px;
  background-color: #DAA520;
  margin: 30px auto;
}
#stay p {
  text-align: center;
}
.overview h3::before {
  content: '';
  display: block;
  background: url("../img/orange.png") no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
/*--------------------
--------------------
ここから客室タイプ
スライダーのためのcss
--------------------
--------------------*/
.slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}
.slider img {
  width: 60vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}
.slider .slick-slide {
  transform: scale(0.8); /*左右の画像のサイズを80%に*/
  transition: all .5s; /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5; /*透過50%*/
}
.slider .slick-slide.slick-center {
  transform: scale(1); /*中央の画像のサイズだけ等倍に*/
  opacity: 1; /*透過なし*/
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px;
  width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}
.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}
.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}
/*--------------------
ここから客室概要・設備などのcss
--------------------*/
.overview h3::after {
  content: '';
  display: block;
  width: 150px;
  height: 2px;
  background-color: #DAA520;
  margin: 30px auto 0;
}
.overview ul {
  display: flex;
  justify-content: space-evenly;
  margin-top: 80px;
}
.overview li img {
  width: 200px;
  margin: auto;
  background-color: aliceblue;
  border-radius: 50%;
}
.overview p {
  text-align: center;
  margin-top: 10px;
}
.facility h3::before {
  content: '';
  display: block;
  background: url("../img/orange.png") no-repeat center / contain;
  width: 100px;
  height: 58px;
  margin: 300px auto 30px auto;
}
.facility h3::after {
  content: '';
  display: block;
  width: 150px;
  height: 2px;
  background-color: #DAA520;
  margin: 30px auto 0;
}
.facility p {
  margin-top: 30px;
}
.facility img {
  width: 40%;
  height: auto;
  margin-right: 50px;
  margin-left: 50px;
}
.amenity {
  display: flex;
  margin-top: 150px;
  width: 90%;
  align-items: flex-start;
}
.amenity p {
  text-align: left;
}
/*--------------------
ここから下層ページ
sp　stayページのcss
--------------------*/
@media(max-width:800px) {
  #stay h2 {
    font-size: 24px;
    margin: 80px 0 60px 0;
  }
  #stay h3 {
    font-size: 24px;
  }
  #stay p {
    font-size: 16px;
    margin: 15px;
    text-align: left;
  }
  .amenity {
    display: block;
    width: 100%;
  }
  .amenity p {
    max-width: 95%;
    margin: auto;
  }
  .facility img {
    width: 100%;
    margin: auto;
  }
  .overview img {
    max-width: 80%;
  }
  .overview-icon {
    text-align: center;
  }
  #stay .overview-icon p {
    text-align: center;
  }
  #stay .footer-adress p {
    text-align: center;
  }
    #stay .copyright{
        text-align: center;
    }
}
@media (min-width:801px) and (max-width:1100px) {
    #stay .facility p{
        text-align: left;
        margin: 0 20px;
    }
    #stay h2 {
    font-size: 35px;
    margin: 80px 0 60px 0;
  } 
        #stay .copyright{
        text-align: center;
    }
}
/*--------------------
--------------------
ここから下層ページ
pc　contactページのcss
--------------------
--------------------*/
#contact .main {
  max-width: 1000px;
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
}
#contact h2 {
  display: flex;
  text-align: left;
  font-size: 30px;
  font-weight: 100;
  margin-top: 80px;
  position: relative;
}
#contact h2::before {
  content: '';
  display: block;
  background: url("../img/ashirai02.png") no-repeat center / contain;
  width: 65px;
  height: 40px;
  margin-right: 10px;
}
#contact h2::after {
  content: '';
  width: 330px;
  height: 1px;
  display: inline-block;
  background-color: #DAA520;
  position: absolute;
  bottom: -10px;
  left: auto;
}
.contact-lead {
  margin-top: 30px;
}
#contact dt::before {
  display: none;
}
.form-area {
  margin-top: 50px;
  padding: 30px;
  color: #fcfcfc;
  display: flex;
  flex-wrap: wrap;
}
#contact .form-area dt {
  width: 250px;
  padding: 15px 0;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
}
#contact .required::after {
  content: '必須';
  font-size: 11px;
  color: #eb4f32;
  margin-left: 10px;
  vertical-align: middle; /*テキストの縦位置の調整*/
}
#contact .form-area dd {
  width: calc(100% - 250px);
  padding: 15px 0;
}
.input-text {
  width: 400px;
  height: 30px;
  padding-left: 10px;
  padding-right: 10px;
}
.select-box {
  width: 200px;
  height: 30px;
  font-size: 16px;
}
.message {
  width: 80%;
  height: 260px;
  padding: 10px;
  line-height: 1.5;
}
.confirm-text {
  font-size: 14px;
  line-height: 22px;
  margin-top: 30px;
}
.submit-button {
  background-color: #731224;
  color: #fcfcfc;
  display: block;
  width: 180px;
  line-height: 48px;
  font-size: 20px;
  text-align: center;
  margin: 20px auto 0;
  cursor: pointer;
  border: none;
  transition: 0.3s; /*ボタン色が変わるトランジションは要素に入れる。ボタン側に入れない*/
}
.submit-button:hover {
  background-color: #d2691e;
}
.footer {
  margin-top: 100px;
}
/*=============モバイルここから=============*/
@media(max-width: 800px) {
  #contact h2 {
    margin: 20px 0 0 20px;
  }
  .contact-lead {
    margin: 20px;
  }
  .input-text {
    width: 300px;
  }
  #contact .form-area dt, .form-area dd {
    width: 80%;
  }
  .form-area dt {
    padding-bottom: 0;
  }
  .message {
    width: 300px;
  }
  .submit-button {
    width: 80%;
    margin: 20px auto;
  }
  .confirm-text {
    margin: 20px;
  }
}
/*=============ipadここから=============*/
@media (min-width:801px) and (max-width:1100px) {
  #contact h2 {
    margin: 20px 0 0 20px;
  }
  .contact-lead {
    margin: 20px;
  }
  .message {
    width: 500px;
    height: 260px;
  }
  .submit-button {
    width: 180px;
    margin: 20px auto;
  }
  .confirm-text {
    margin: 20px;
  }
}
/*--------------------
--------------------
ここから下層ページ
pc　reserveページのcss
--------------------
--------------------*/
#reserve .main {
  max-width: 1000px;
  margin-top: 75px;
  margin-left: auto;
  margin-right: auto;
}
#reserve h2 {
  display: flex;
  text-align: left;
  font-size: 30px;
  font-weight: 100;
  margin-top: 80px;
  position: relative;
}
#reserve h2::before {
  content: '';
  display: block;
  background: url("../img/ashirai02.png") no-repeat center / contain;
  width: 65px;
  height: 40px;
  margin-right: 10px;
}
#reserve h2::after {
  content: '';
  width: 330px;
  height: 1px;
  display: inline-block;
  background-color: #DAA520;
  position: absolute;
  bottom: -10px;
  left: auto;
}
.rsv-lead {
  margin-top: 30px;
}
#reserve table {
  width: 50%;
  margin: 100px auto;
    border-collapse: collapse;
}
#reserve th, td {
  text-align: center;
  vertical-align: middle;
  border: solid 0.5px #333333;
  color: #333333;
  font-weight: 100;
  padding: 15px;
}
#reserve th{
    background: #40511B;
    color: #fcfcfc;
}
#reserve td{
    background: #f9f7f0;
}
#reserve tr:nth-of-type(2n-1) td{
    background: #ece3ca;
}
@media(max-width:800px){
    #reserve{
    margin: 10px;
    }    
    .rsv-lead{
        width: 90%;
        margin: 20px auto;
    }
#reserve table {
  width: 90%;
  margin:50px auto;
  border-collapse: collapse;
}
    
}
/*=============ipadここから=============*/
@media (min-width:801px) and (max-width:1100px) {
   #reserve h2 { 
    margin: 20px;
}
    .rsv-lead{
        margin-left: 20px;
    }
}