@charset "utf-8";
/* CSS Document */
/*↓フォントについて*/
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
/*↓基本の設定*/
body {
  width: 100%;
  background-color: #F8F6EE;
  color: #2A2A2A;
  line-height: 2.3;
  letter-spacing: 0.1em;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}
img {
  max-width: 100%;
}
#gallery {
  background-color: #ffffff;
}
h2 {
  font-size: 32px;
  font-weight: bolder;
  text-align: center;
  line-height: 1.3;
}
/*↓ヘッダー*/
header {
  position: relative;
}
header h1 {
  position: absolute;
}
header h1 img { /*ロゴ*/
  max-width: 300px;
}
/*↓メニューボタン*/
/* モーダルを開くボタンのスタイル */
.open-modal {
  position: fixed; /*右下に固定*/
  bottom: 5vh;
  right: 5vw;
  display: inline-block; /*ここから下、MENUボタンのデザイン*/
  background: #ffffff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  font-weight: bold;
  color: #87befd;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
  box-shadow: 0px 0px 0px 5px #ffffff;
  border: dashed 3px #87befd;
  transition: .4s;
  z-index: 10000;
}
.open-modal:hover { /*ホバー時に色変更*/
  background: #87befd;
  box-shadow: 0px 0px 0px 5px #87befd;
  border: dashed 3px #ffffff;
  color: #ffffff;
}
/* モーダルウィンドウの基本スタイル */
.modal {
  display: none; /* デフォルトでは非表示に設定 */
  position: fixed; /* モーダルがページ全体に固定されるように設定 */
  top: 0; /* ページの最上部からスタート */
  left: 0; /* ページの最左端からスタート */
  width: 100%; /* モーダルが画面全体の幅を占める */
  height: 100%; /* モーダルが画面全体の高さを占める */
  background-color: rgba(255, 255, 255, 0.9); /* 背景を半透明の白に設定（モーダルの背後が見えるように） */
  z-index: 10001;
}
.modal-content {
  position: fixed; /* モーダル内容が画面上に固定されるように設定 */
  top: 50%; /* 縦方向の中央に配置 */
  left: 50%; /* 横方向の中央に配置 */
  transform: translate(-50%, -50%); /* 完全に中央に配置するための補正 */
  padding: 15vw 22vw; /* モーダル内の余白を設定 */
  width: 70vw; /* モーダルの幅 */
  height: 70vh; /* モーダルの高さ */
  background-color: #fefefe; /* モーダルの背景色を白に設定 */
  border: 1px solid #87befd; /* 境界線の色をブルーに設定 */
  border-radius: 10px; /* モーダルの角を丸くするための半径 */
  color: #2F2F2F;
  font-weight: 700;
}
/* モーダルを閉じるボタン（×）のスタイル */
#closeModal {
  position: absolute; /* モーダル内で絶対位置に配置 */
  display: flex; /* ボタン内のテキストが中央に配置されるようにフレックスボックスを使用 */
  align-items: center; /* ボタン内のテキストを縦方向に中央揃え */
  justify-content: center; /* ボタン内のテキストを横方向に中央揃え */
  top: -5%; /* モーダル内容の上部から離れた位置に配置 */
  right: -5%; /* モーダル内容の右端から離れた位置に配置 */
  font-size: 28px; /* 閉じるボタンのフォントサイズ */
  font-weight: 400; /* 閉じるボタンのフォントを太字に設定 */
  cursor: pointer; /* ホバー時にポインタが表示されるように設定 */
  color: #FFF; /* 閉じるボタンのテキストカラーを白に設定 */
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  background-color: #87befd; /* ボタンの背景色をブルーに設定 */
  border: #87befd; /* ボタンの境界線を背景と同じ色に設定 */
  border-radius: 50%; /* ボタンを丸くするための半径 */
}
#myModal .modal-content ul li:hover {
  color: #9B9B9B;
}
/*↓ファーストビュー*/
.firstView { /*スライドショーの親要素*/
  position: relative;
}
/*===========↓トップページ===========*/
.topText { /*スライドショー上の文字*/ /*子要素*/
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 5px #404040;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.topText p {
  margin: 20px;
}
/*スライドショー*/
.slideshow { /*親要素　写真を重ねるため*/
  position: relative;
  z-index: -10000;
  height: 90vh;
}
/*.slideshow img { 子要素　写真を重ねるため
	display: block;
  position: absolute;
  width: 100%;
  object-fit: cover;
}*/
.back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: rotation 25s infinite;
}
.back1 img {
  animation-delay: 0;
}
.back2 img {
  animation-delay: 5s;
}
.back3 img {
  animation-delay: 10s;
}
.back4 img {
  animation-delay: 15s;
}
.back5 img {
  animation-delay: 20s;
}
@keyframes rotation {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/*↑スライドショー*/
/*↓コンセプト*/
#concept img {
  width: 55%;
  height: auto;
  object-fit: cover;
}
#concept {
  display: flex;
  padding: 45px 0 150px;
}
#concept h2 {
  padding-top: 6em;
  padding-bottom: 2.5em;
  display: block;
  width: 5.4em;
}
.concept_paragraph {
  padding: 0 7% 50px;
}
#concept p {
  padding: 2em 0;
}
/*↓ギャラリー*/
#gallery {
  padding: 150px 0;
}
#gallery h2 {
  display: block;
  width: 5.4em;
  margin-left: 8%;
  padding-bottom: 1.5em;
}
.gallery {
  display: grid;
  grid-template-columns: 33% 17% 17% 33%;
  grid-template-rows: 33vw 33vw 33vw;
}
.item01 {
  grid-column: 1/2;
  grid-row: 1/2;
}
.item02 {
  grid-column: 2/4;
  grid-row: 1/2;
}
.item03 {
  grid-column: 4/5;
  grid-row: 1/2;
}
.item04 {
  grid-column: 1/3;
  grid-row: 2/3;
}
.item05 {
  grid-column: 3/5;
  grid-row: 2/3;
}
.item06 {
  grid-column: 1/2;
  grid-row: 3/4;
}
.item07 {
  grid-column: 2/4;
  grid-row: 3/4;
}
.item08 {
  grid-column: 4/5;
  grid-row: 3/4;
}
#gallery li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/*↓プラン*/
#plan {
  padding: 150px 0;
}
#plan h2 {
  padding-bottom: 1.5em;
}
#plan h2 .plan_h2 { /*「について」を小さくする*/
  font-size: 20px;
}
.plan { /*３項目を横並びにする*/
  display: flex;
  padding: 0 15%;
}
.plan .plan_detail {
  /*display: block;*/
  width: 25vw;
  background-color: #ffffff;
  border-radius: 2em;
  padding: 3vw 0;
  margin: 3vw 2vw;
  line-height: 1.8;
}
.plan h3 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 1vw;
  text-align: center;
  position: relative; /*見出しの下に短い下線引くため*/
}
.plan h3::before { /*見出しの下に短い下線*/
  background-color: #B7B7B7;
  border-radius: 5px;
  bottom: -5px;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 70px;
}
.plan .plan_detail ul {
  text-align: center;
  padding: 2em 0;
}
.plan .plan_detail ul li {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1em;
}
.plan .plan_detail ul li:nth-child(2) { /*２時間の上の隙間を広げる*/
  margin-top: 0.8em;
}
.plan .plan_detail ul li span { /*(データ)を小さくする*/
  font-size: 11px;
}
.plan .plan_detail .price {
  font-size: 29px;
  font-weight: bolder
}
.plan .plan_detail p {
  padding: 0 2vw;
}
#plan > p a {
  display: block;
  width: 5.5em;
  margin: 5vh auto 0;
  padding: 0 auto;
  border-bottom: 3px dotted #2A2A2A;
  line-height: 1.7; /*文字と点線を近づけるため*/
}
#plan > p a:hover {
  color: #9B9B9B;
  border-bottom-color: #9B9B9B;
}
/*↓予約*/
/*足跡の大きさや位置を決める*/
#reservation .footimg img {
  display: block;
  width: 7vw;
}
#foot1 {
  margin-left: 49vw;
}
#foot2 {
  margin-left: 44vw;
}
#foot3 {
  margin-left: 50vw;
}
#foot4 {
  margin-left: 46vw;
  margin-top: 2vw;
}
.yoyaku { /*予約するボタンの画像*/
  display: block;
  width: 20vw;
  margin: 0 auto;
}
.yoyaku:hover {
  transform: rotate(15deg);
}
#reservation {
  padding: 0;
}
/*===========↑トップページ===========*/
/*===========↓料金・プランページ===========*/
/*縦並びにするため、トップページとタグを変えた*/
.plan_detail {
  width: 80vw;
  margin: 3vw auto;
  background-color: #ffffff;
  border-radius: 2em;
  padding: 3vw 0;
}
.plan_detail h3 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 1vw;
  text-align: center;
  position: relative; /*見出しの下に短い下線引くため*/
}
.plan_detail h3::before {
  background-color: #B7B7B7;
  border-radius: 5px;
  bottom: -5px;
  content: "";
  height: 3px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 70px;
}
.plan_detail ul {
  text-align: center;
  padding: 2em 0;
}
.plan_detail ul li {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1em;
}
.plan_detail ul li:nth-child(2) { /*２時間の上の隙間を広げる*/
  margin-top: 0.8em;
}
.plan_detail ul li span { /*(データ)を小さくする*/
  font-size: 11px;
}
.plan_detail .price {
  font-size: 29px;
  font-weight: bolder
}
.plan_detail p {
  padding: 0 10vw;
  text-align: center;
}
.slider {
  padding: 15vw;
}
.plan_page #plan {
  padding-top: 20vh;
  padding-bottom: 5vh;
}
.plan_page h1 img {
  width: 200px;
  object-fit: contain;
  margin-left: 20px;
}
.plan_page .price {
  margin-top: 10px;
}
.plan_page p {
  text-align: center;
  margin: 0 10vw;
}
.above {
  margin: 0 5vw;
}
.under {
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.7;
}
/*↓フッター*/
footer {
  font-size: 10px;
  text-align: center;
}
@media screen and (max-width: 640px) {
  /*===========↓トップページ===========*/
  header h1 img { /*ロゴ*/
    width: 150px;
  }
  body {
    line-height: 2.0;
    letter-spacing: 0.1em;
  }
  h2 {
    font-size: 20px;
    line-height: 1.3;
  }
  p {
    font-size: 12px;
    font-weight: lighter;
  }
  /*↓メニューボタン*/
  /* モーダルを開くボタンのスタイル */
  .open-modal {
    bottom: 3vh;
    right: 3vw;
    width: 80px;
    height: 80px;
    line-height: 1.3;
    letter-spacing: 0.1em;
    font-size: 13px;
  }
  .modal-content {
    font-size: 11px;
    /*transform: tranlate(-10px);*/
    height: 50%;
  }
  .modal-content ul li {
    width: 70vw;
    line-height: 3;
  }
  #close_modal {
    width: 20px; /* ×のボタンの幅 */
    height: 20px;
  }
  /*↓ファーストビュー*/
  .topText p {
    font-size: 14px;
    margin: 20px 5px;
  }
  .slideshow {
    width: 100%;
    height: 85vh;
    object-fit: cover;
  }
  .back3 img { /*スライドショーーーーーーーの表示位置*/
    /*transform: translateX(-50px);*/
  }
  .back4 img {
    /*transform: translateX(250px);*/
  }
  /*スライドショー位置の調整*/
  .slideshow .back2 img {
    object-position: 45% center;
  }
  .slideshow .back3 img {
    object-position: 75% center;
  }
  .slideshow .back4 img {
    object-position: 15% center;
  }
  .slideshow .back5 img {
    object-position: 20% center;
  }
  /*↓コンセプト*/
  #concept img {
    width: 80%;
    height: 60%;
    object-fit: cover;
  }
  #concept {
    display: block;
    padding: 45px 0 75px;
  }
  #concept h2 {
    padding-top: 4em;
    padding-bottom: 0.5em;
    margin-left: 58%;
  }
  .concept_paragraph {
    padding: 5px 10%;
  }
  .smanone { /*改行なし*/
    display: none;
  }
  /*↓ギャラリー*/
  #gallery {
    padding: 90px 0 120px;
    ;
  }
  #gallery h2 {
    margin-left: 15vw;
  }
  .gallery {
    grid-template-columns: 50% 50%;
    grid-template-rows: 50vw 50vw 50vw 50vw 50vw;
  }
  .item01 {
    grid-column: 1/2;
    grid-row: 1/2;
  }
  .item02 {
    grid-column: 2/3;
    grid-row: 1/2;
  }
  .item04 {
    grid-column: 1/3;
    grid-row: 2/3;
  }
  .item03 {
    grid-column: 1/2;
    grid-row: 3/4;
  }
  .item06 {
    grid-column: 2/3;
    grid-row: 3/4;
  }
  .item05 {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  .item07 {
    grid-column: 1/2;
    grid-row: 5/6;
  }
  .item08 {
    grid-column: 2/3;
    grid-row: 5/6;
  }
  /*↓プラン*/
  #plan {
    padding: 90px 0 20px;
  }
  #plan h2 .plan_h2 { /*「について」を小さくする*/
    font-size: 12px;
  }
  #plan h2 {
    margin: 20px auto 30px;
  }
  .plan {
    display: block;
  }
  #plan .plan .plan_detail {
    width: 90%;
    padding: 20px;
    margin: 20px auto;
  }
  .plan h3 {
    font-size: 16px;
  }
  #plan .plan_detail li {
    font-size: 20px;
    line-height: 0.9em;
  }
  #plan .plan_detail li span {
    font-size: 9px;
  }
  .plan_detail h3::before {
    width: 50px;
    height: 2px;
  }
  #plan > p a { /*詳しくみる*/
    width: 5.8em;
  }
  /*↓予約*/
  #reservation .footimg img {
    width: 15vw;
  }
  #foot1 {
    margin-left: 47vw;
  }
  #foot2 {
    margin-left: 39vw;
  }
  #foot3 {
    margin-left: 48vw;
  }
  #foot4 {
    margin-left: 42vw;
  }
  #reservation a img { /*予約するボタンの画像*/
    width: 40%;
  }
  /*===========↑トップページ===========*/
  /*===========↓料金・プランページ===========*/
  .plan_page #plan > p {
    font-size: 10px;
    width: 80%;
  }
  .plan_page #plan h2 .plan_h2 { /*「について」を小さくする*/
    font-size: 12px;
  }
  #plan h2 {
    padding-bottom: 0;
  }
  #plan .plan_detail p {
    padding: 0;
  }
  .under p {
    font-size: 10px;
  }
  #plan a img { /*予約ボタン*/
    width: 150px;
  }
  #plan .plan_detail {
    padding: 40px 0 40px;
  }
}