@charset "UTF-8";

/* index.html~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.header {
  background-color: rgba(0, 0, 0, 0.2);
}

.header a {
  background-color: #ffffffac;
  font-size: 20px;
}

.header ul {
  display: flex;
}

.header ul li {
  float: left;
}

.header {
  position: fixed;
  /* 画面上部に固定 */
  top: 0;
  /* 最初は画面外に隠す */
  width: 100%;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.2);
  transition: top 0.3s ease-in-out;
  /* スムーズなアニメーション */
  z-index: 1000;
  /* 他の要素より手前に表示 */
}

/* ナビゲーションのリンクスタイル（任意） */
.header nav a {
  color: white;
  text-decoration: none;
  margin-right: 20px;
}

/* 表示時に適用するクラス */
.header.is-visible {
  top: 0;
  /* 画面内へ表示 */
}

/* 非表示時に適用するクラス */
.header.is-hidden {
  top: -60px;
  /* ナビゲーションの高さ分だけ上へ移動（適宜調整） */
}

/* コンテンツ部分に余白を確保 */
body {
  padding-top: 60px;
  /* ナビゲーションの高さに応じて調整 */
}

body {
  max-width: 1536px;
  margin-left: 20px;
  margin-right: 20px;
  font-family: serif;
}

p,
li {
  line-height: 25px;
}


.wrap {
  flex-wrap: wrap;
}


/* navの背景----------------------------------------------------------------------------- */
div.nav {
  background-image: url(../images/haikei.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* h1------------------------------------------------------------------------------------ */
.big h1 {
  font-size: 70px;
  -webkit-text-stroke: 1px rgb(150, 208, 242);
  /*h1だけ水色をつけている*/
  position: relative;
  color: #6e83f9;
  line-height: 1.4;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.7));
  /*文字の下に反射してるように文字を映す*/
}


/* マウスストーカー~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}*/

.mouse {
  width: 10px;
  height: 10px;
  background: rgb(0, 255, 195);
  border-radius: 50%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  ;
}



/* ヘッダー~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
header img {
  /* border: 1px solid #f00; */
  display: block;
  /* margin: 0 auto; */
  width: 100%;
}


.big {
  position: relative;
  /*img要素に合わせて幅を調整*/
}

.big h1 {
  position: absolute;
  /* これで画像の上に文字を置くことを指定する */
  top: 0%;
  /* 文字を上から50%の位置に移動 */
  left: 0%;
  /* 文字を左から50%の位置に移動 */
  transform: translate(50%, 160%);
  /*トップとレフトで文字を動かして文字の位置をここで微調整をして合わせる・・・なんとなく絶妙な位置ｗ */
  color: rgb(192, 244, 210);
  /* 文字の色を白にする */
  background-color: rgba(0, 0, 0, 0.2);
  /* ここで文字の後ろに黒色？の背景色を付ける */
  padding: 10px;
  /*文字の後ろの影の大きさを調整 */
}

/*ナビゲーション~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^*/

nav {
  /* border: 1px solid #f00; */
  color: #000;
  /* display: block; */
  display: inline-flex;
  /*インラインボックスに変える*/
  padding: 0;
  position: relative;
  /*ここを親要素にして基準にする*/
  margin: 20px auto;
}

nav ul {
  /* border: 1px solid #f00; */
  margin: 0 auto;
  list-style: none;
  /*リストの点や番号を消す*/
}

nav a {
  /* border: 1px solid #f00; */
  display: block;
  padding: 10px 10px;
  margin: 20px;
  text-decoration: none;
  color: #333;
   background-color: rgba(44, 252, 189, 0.2);
  border-radius: 5px;
  transition: transform 0.3s ease;
  /* ホバーが解除されたときのアニメーション */
}

/* ホバー時にゆらゆらさせるアニメーション */
nav a:hover {
  animation: wobble 0.8s infinite;
}

/* キーフレームでゆらゆらするをつけるための数値 */
@keyframes wobble {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-3deg);
  }

  75% {
    transform: rotate(3deg);
  }
}

.indexfooter {
  position: absolute; /* 親要素（body）基準で絶対配置 */
  bottom: -670px; /* bodyの一番下に配置 */
  width: 100%; /* 画面全体に広がるように */
  background-color: hsla(0, 0%, 33%, 0.5); /* 背景色（例） */
  text-align: center; /* テキストを中央揃え */
  padding: 20px 0; /* 上下の余白 */
  height: 60px; /* フッターの具体的な高さを指定 */
}

/* ----------------------------------------------- */


/* price.html・テーブル~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.rozzi img {
margin-left: 100px;
}

.rozzi h1 {
  margin-left: 100px;
}

.rental h3 {
  text-align: center;
}

.rental {
  /* border: 1px solid #f00; */
  display: grid;
  width: 40%;
  padding: 27px;
  position: absolute;
  transform: translate(130%, -220%);
  border: 8px solid rgb(191, 248, 179);
  border-radius: 10px;
}

.rental::after {
  content: "【販売・貸出し】";
}

/* --------------------------------- */
table {
  margin: 0 auto;
  border-spacing: 0;
  border-collapse: collapse;
  width: 70%;
  margin: 0 auto;
  transform: translate(0%, -150%);
  text-align: center;
}

table,
th,
td {
  border: 1px solid #ccc;
  padding: 0.5em;
  text-align: center;
}

table caption {
  font-size: 0.8em;
  color: #666;
}

.sel1 {
  width: 10%;
}

.sel2 {
  width: 20%;
}

.sel3 {
  width: 20%;
}

.sel4 {
  width: 20%;
}

th {
  background: #3cb371;
  color: #fff;
}

.map {
  /* position: relative;
  left: 50%;
  transform: translate(5%, -83%); */
  position: relative;
  text-align: right;
  top: -375px;
  right: 10%;

}

/*info.html スライドショー~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.osirase h2 {
  font-style: 30px;
  margin-top: 30px;
}


.informaition {
  width: 20px;
  margin: 0 auto;
}

.slideshow-container {
  top: 100%;
}

.osirase h1 {
  text-align: center;
  font-size: 40px;
}

.slideshow-container {
  position: relative;
  /* 子要素を絶対配置にするため */
  position: absolute;
  /*ここで位置を決めるための要素を入れ込み、下のtopとleftで位置を決める*/
  left: 12%;
  width: 500px;
  /* スライドショーの幅を指定（小さめにする） */
  height: 300px;
  /* スライドショーの高さを指定 */
  overflow: hidden;
  /* はみ出した画像を隠す */
  margin: 0 auto;
  /* 中央寄せ */
}

.slideshow-container img {
  position: absolute;
  /* 画像を重ねて配置 */
  top: 0;
  left: 0;
  width: 100%;
  /* コンテナの幅に合わせる */
  height: 100%;
  /* コンテナの高さに合わせる */
  opacity: 0;
  /* 初期状態は非表示にする */
  animation: fadein 18s infinite;
  /* アニメーションを適用（後述） */
  object-fit: cover;
  /* 画像のアスペクト比を保ちつつ表示 */
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  10%,
  20% {
    opacity: 1;
  }

  /* 10%から20%の間で表示 */
  30% {
    opacity: 0;
  }
}

/* 各画像に遅延を設定 */
.slideshow-container img:nth-child(1) {
  animation-delay: 0s;
}

.slideshow-container img:nth-child(2) {
  animation-delay: 3s;
}

/* 3秒遅らせる */
.slideshow-container img:nth-child(3) {
  animation-delay: 6s;
}

.slideshow-container img:nth-child(4) {
  animation-delay: 9s;
}

.slideshow-container img:nth-child(5) {
  animation-delay: 12s;
}

.slideshow-container img:nth-child(6) {
  animation-delay: 15s;
}

.text {
  font-weight: bold;
  color: rgb(110, 250, 206);
}

/* ------------------------------------------- */
.tanosimi {
  width: 700px;
  /* position: relative; */
  top: 165%;
  left: 1%;
  padding: 30px;
  border: 8px solid rgb(191, 248, 179);
  border-radius: 10px;
  position: relative;
  position: absolute;
  transform: translate(105%, -220%);
}

.tanosimi::after {
  content: "楽しみ方は人それぞれ";
}

.syasinn {
  display: flex;
  justify-content: center;
}

.syasinn img {
  width: 300px;
  margin: 10px;
}

.infofooter {
  position: absolute; /* 親要素（body）基準で絶対配置 */
  bottom: -380px; /* bodyの一番下に配置 */
  width: 100%; /* 画面全体に広がるように */
 background-color: hsla(0, 0%, 33%, 0.5); /* 背景色（例） */
  text-align: center; /* テキストを中央揃え */
  padding: 20px 0; /* 上下の余白 */
  height: 60px; /* フッターの具体的な高さを指定 */
}


/* pricehtml~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.price img {
  position: relative;
  left: 40px;
}

/* ----------------------------------------- */

.site {
  /* border: 1px solid #f00; */
  width: 700px;
  position: relative;
  left: 5%;
  padding: 30px;
  border: 8px solid rgb(191, 248, 179);
  border-radius: 10px;
}

.site::after {
  content: "サイト案内";
  position: absolute;
  top: -15px;
  left: 13px;
  background: #fff;
  font-size: 1em;
  font-weight: bold;
  color: #6ef8b3;
  padding: 0 8px;
}

/* ------------------------------------------ */

.shower {
  width: 700px;
  position: relative;
  top: 50px;
  left: 5%;
  padding: 30px;
  border: 8px solid rgb(191, 248, 179);
  border-radius: 10px;
}

.shower::after {
  content: "シャワーのご使用について";
}

/* ------------------------------------- */

.tanosimi::after,
.rental::after,
.shower::after {
  /* border: 1px solid #f00; */
  position: absolute;
  top: -15px;
  left: 13px;
  background: #fff;
  font-size: 1em;
  font-weight: bold;
  color: rgb(110, 250, 206);
  padding: 0 8px;
}

/* ACCESS.html~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
address {
  width: 900px;
}

.syasinn {
  text-align: center;
}
.syasinn iframe {
display: block;
margin: 0 auto;
}

.pricefooter {
  position: absolute; /* 親要素（body）基準で絶対配置 */
  bottom: -720px; /* bodyの一番下に配置 */
  width: 100%; /* 画面全体に広がるように */
  background-color: #f0f0f0; /* 背景色（例） */
  text-align: center; /* テキストを中央揃え */
  padding: 20px 0; /* 上下の余白 */
  height: 60px; /* フッターの具体的な高さを指定 */
}

.accessfooter {
   position: absolute; /* 親要素（body）基準で絶対配置 */
  bottom: -105px; /* bodyの一番下に配置 */
  width: 100%; /* 画面全体に広がるように */
  background-color: hsla(0, 0%, 33%, 0.5);/* 背景色（例） */
  text-align: center; /* テキストを中央揃え */
  padding: 20px 0; /* 上下の余白 */
  height: 60px; /* フッターの具体的な高さを指定 */
}

/* ここから観光・飲食店~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.about {
  background-image: url(../images/sougenn.png);
}

.kannkou {
  /* border: 1px solid #f00; */

  display: block;
  width: 80%;
  padding-left: 10%;
  margin: 0 auto;
  background-image: url(../images/kannbann.png);
  background-size: cover;
  background-position: center -180px;
  height: 800px;
}

/* .naname  {
  transform: rotate(-15deg);逆時計回りに動かす
} */

.kannkou h2 {
  border-left: 5px solid rgb(191, 248, 179);
}

.fild1,
.fild2,
.fild3 {
  border-radius: 10px;
  width: 80%;
  display: flex;
  justify-content: center;
  /* 水平方向の中央寄せ */
  align-items: center;
  /* 垂直方向の中央寄せ */
  height: 200px;
  /* 親要素の高さ */
}

.fild1,
.fild2,
.fild3 img {
  border: 1px solid #000;
}

.fild1,
.fild2,
.fild3 {
  position: relative;
  margin: 2em 0;
  padding: 0.5em 1em;
  border: solid 3px lch(92.34% 41.11 138.08 / 0.208);
  /* border-radius: 8px; */
}

.fild1 .box-title,
.fild2 .box-title,
.fild3 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: rgba(220, 248, 213, 0.719);
  color: #000000;
  font-weight: bold;
}

.fild1 p,
.fild2 p,
.fild3 p {
  color: #000000;
  margin: 0;
  padding: 0;
}

/* .fild1, .fild2, .fild3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right;
} */

.kannkou h2,
.fild1 {
  transform: translateY(25px);
}

.fild2 {
  transform: translateY(60px);
}

.fild3 {
  transform: translateY(105px);
}

.kannkoufooter {
   position: absolute; /* 親要素（body）基準で絶対配置 */
  bottom: -267px; /* bodyの一番下に配置 */
  width: 100%; /* 画面全体に広がるように */
  background-color: hsla(0, 0%, 33%, 0.5);/* 背景色（例） */
  text-align: center; /* テキストを中央揃え */
  padding: 20px 0; /* 上下の余白 */
  height: 60px; /* フッターの具体的な高さを指定 */
}

/* レスポンシブ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (max-width:1024px) {


















}