@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

:root {
  --main-color: #aacf53;
  --primary-color: rgb(170, 207, 83);
  --secondary-color: #82ae46;
  --tertiary-color: #757F96;
  --quaternary-color: #b0b0b0;
  --font-size: 1vw;
  --margin-top: 6%;
}

body {
  color: #333;
}

:a {
  --text-color: #333;
}

.body-text {
  writing-mode: vertical-rl;
  text-align: center;
  margin: 10vh auto;
  font-size: 20vw;
  white-space: nowrap;
  font-size: 5vw;
}

.header,
.footer,
.left,
.right {
  position: fixed;
  padding: 1rem;
  text-align: center;
  color: #fff;
  transition: transform 0.3s;
  z-index: 1000;
}

.footer {
  right: 0;
  bottom: 0;
  width: 4vw;
  height: 4vw;
  border-radius: 50%;
  font-size: .8vw;
  background-color: var(--main-color);
}

.footer span {
  display: block;
  font-size: 2vw;
}

.left,
.right {
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.left {
  left: 0;
}
.right {
  right: 0;
}

.header {
  top: 0;
  left: 0;
  width: 100%;
  height: 6vw;
  display: flex;
  box-shadow: inset 0 -.7vw rgba(0,0,0,1), inset 0 .7vw rgba(0,0,0,1);
  background-color: #fff;
}

.header .heder-rogo {
  width: 9%;
  margin-top: 1%;
  margin-left: 1%;
}

.header .heder-rogo img {
  width: 100%;
}

.header nav {
  width: 48%;
  margin-left: 1%;
  margin-right: .5%;
}

.header nav ul {
  display: flex;
  list-style-type: none;
}

.header nav ul li {
  width: calc(100% / 6);
}

.header nav ul li a {
  text-decoration: none;
  color: #333;
  font-size: .8vw;
}

.header nav ul li a .li-img {
  width: 50%;
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
  
}
.header nav ul li a .hotel-img {
  width: 45%;
}
.header nav ul li a .tour-img {
  width: 58%;
}

.header nav ul li a .li-img img {
  width: 100%;
}

.wrapper {
  text-align: center;
  padding: 1%;
  margin-left: .5%;
  border: 1px solid #333;
  border-radius: .5vw;
}

.wrapper > div {
  padding: 2%;
  text-align: center;
  color: #333;
  font-size: .8vw;
  
}

/* カレンダー */



/* ヘッダースライド写真 */
/* 親要素ごと相対単位の幅を決めて中央寄せ */
.swiper {
  width: 80%;
  margin-top: 8vw;
  margin-left: auto;
  margin-right: auto;
}
/* imgにもwidth: 100%;を指定して拡大縮小を可能にしている */
/* 矢印、ボタン色変更はswiper-bundle.cssで変更する */
.swiper-slide img {
  width: 100%;
  vertical-align: bottom;
}

.click-box {
  width: 7%;
  margin-left: .5vw;
  border-radius: .5vw;
  background-color: var(--main-color);
}

.click-box a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 3vw;
  transition: .5s;
}

.click-box a:hover {
  color: var(--tertiary-color);
  transition: .5s;
}

.click-box a i {
  margin-top: 1.5vw;
}

/* メイン */

.sec1-banar h2 {
  margin-top: 10%;
  text-align: center;
  font-size: 2.6vw;
}

.banar-content {
  display: flex;
  width: 90%;
  margin-top: 4%;
  margin-left: auto;
  margin-right: auto;
}


.banar-img {
  width: 100%;
  margin-left: 3%;
}

.banar-img img {
  width: 100%;
}



.sec2-area-contant {
  display: flex;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.area-map {
  width: 50%;
  margin-top: 12%;
  margin-left: 5%;
}

.area-map img {
  width: 100%;
}


/* タブ全体を囲むコンテナの設定 */
.tab-switch {
  display: flex; /* タブを横並びに配置 */
  flex-wrap: wrap; /* 幅を超えたら折り返し */
  max-width: 380px; /* コンテナの最大幅を指定 */
  margin-top: 10vw;
  margin-left: 5%;
  justify-content: center; /* タブを中央に寄せる */
}

.tab-switch:after {
content: ''; /* 空の擬似要素を作成 */
width: 100%; /* 幅をコンテナ全体に設定 */
height: 1px; /* 線の高さを1pxに設定 */
background-color: var(--tertiary-color); /* 線の色 */
display: block; /* ブロック要素として表示 */
order: -1; /* 擬似要素を上部に配置 */
margin-top: -5px; /* タブボタンから-5pxの余白を設定 */
}

/* 各タブボタンの設定 */
.tab-switch > label {
  flex: 1 1 auto; /* タブボタンが均等に幅をとるが、幅を超えると折り返す */
  order: -1; /* タブボタンを上部に配置 */
  position: relative; /* 子要素の絶対位置指定の基準 */
  padding: .4em .6em; /* 上下に0.7em、左右に1emの内側余白 */
  background-color: #f2f3f4; /* タブボタンの背景色 */
  color: #999; /* 文字色をグレーに設定 */
  text-align: center; /* 文字を中央揃え */
  cursor: pointer; /* カーソルをポインターに変更 */
  transition:.3s all;/*変化を滑らかに*/
  
}

/* タブボタンのホバーおよび選択状態のスタイル */
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
  background-color: var(--tertiary-color); /* ホバー/選択時の背景色 */
  color: #fff; /* ホバー/選択時の文字色 */
}

/* ラジオボタン自体は非表示 */
.tab-switch input {
  display: none; /* ラジオボタンを見えなくする */
}

/* タブコンテンツのスタイル */
.tab-switch > div {
  display: none; /* 初期状態ではコンテンツを非表示に */
  width: 100%; /* コンテンツの幅を全体に設定 */
  padding: 1.5em 1em; /* 上下に1.5em、左右に1emの内側余白 */
border:1px solid var(--tertiary-color);
}

/* 選択されたタブのコンテンツを表示 */
.tab-switch label:has(:checked) + div {
  display: block; /* 選択されたタブのコンテンツを表示 */
}

.area-flexbox {
  display: flex;
}

.area-title {
  width: 24%;
  margin-left: 1rem;
}

.area-title img {
  display: inline-block;
  width: 100%;
}

.area-title + p {
  margin-top: .1rem;
  margin-left: 1rem;
  font-size: var(--font-size);
  
}

.tab-content > div {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2%;
}

.tab-content > div img {
  width: 100%;
}

.tab-content > p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-size);
}


/* 
.box2.active {
  
}

.box3.active {
  height: 10.8vw;  1番liの数がある分高さを設ける 2.7vw×4
  transition: 1s;
}
 */



.footer-top-img {
  width: 30%;
  margin-left: 60%;
}

.footer-top-img img {
  width: 100%;
}

.cstm-clip-upper-r {
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  height:5vw;
  background-color:var(--main-color);
  margin-bottom: --1vw;
}

footer {
  background-color: var(--main-color);
}

footer h4 {
  padding: 2%;
  text-align: center;
  font-size: 2vw;
}


/* アコーディオンメニュー */
.acd-check{
  display: none;
}
.acd-label{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background: #333;
  color: #fffffc;
  display: block;
  margin-bottom: 1px;
  padding: 10px;
  border-radius: .5vw;
  font-size: 1.4vw;
  transition: .5s;
}

.acd-label:hover {
  background-color: var(--quaternary-color);
  color: #333;
  transition: .5s;
}


.acd-label span {
  margin-left: 5%;
  margin-right: 3%;
  font-size: 1.8vw;
}

.acd-content{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #333;
  height: 0;
  opacity: 0;
  padding: 0 10px;
  transition: .5s;
  visibility: hidden;
  border-radius: .5vw;
  line-height: 2;
  font-size: var(--font-size);
}

.flexbox {
  display: flex;
}

.flexbox > p {
  margin-left: 3%;
}

.flexbox p a {
  text-decoration: none;
  color: var(--text-color);
  transition: .5s;
}

.flexbox p a:hover {
  text-decoration: underline var(--tertiary-color);
  color: var(--tertiary-color);
  transition: .5s;
}

.acd-check:checked + .acd-label + .acd-content{
  height: 40px;
  opacity: 1;
  padding: 10px;
  visibility: visible;
}



footer .footer-flexbox {
  display: flex;
  width: 80%;
  margin-top: var(--margin-top);
  margin-left: auto;
  margin-right: auto;
}

footer .footer-flexbox .footer-box {
  width: 22%;
  margin-left: 2%;
  
}

footer .footer-flexbox .footer-box h5 {
  margin-bottom: 5%;
  font-size: 1.2vw;
}

footer .footer-flexbox .footer-box p {
  line-height: 2;
  font-size: .9vw;
}

footer .footer-flexbox .footer-box p a {
  text-decoration: none;
  color: var(--text-color);
}

footer .footer-flexbox .footer-box p a:hover {
  color: var(--tertiary-color);
  text-decoration: underline var(--tertiary-color);
}

footer .footer-flexbox .footer-pay {
  width: 22%;
  margin-left: 4%;
}

footer .footer-flexbox .footer-pay h5 {
  margin-bottom: 2%;
  font-size: 1.2vw;
}

footer .footer-flexbox .footer-pay .card {
  display: flex;
  margin-bottom: 6%;
}

footer .footer-flexbox .footer-pay .card .pay-img {
  width: 15%;
  margin-left: 4%;
}

footer .footer-flexbox .footer-pay .card .pay-img img {
  width: 100%;
  vertical-align: bottom;
}

footer .footer-flexbox .footer-pay .card .pay-img:nth-of-type(1), .pay-img:nth-of-type(2), .pay-img:nth-of-type(3) {
  margin-top: 2%;
}

footer .footer-flexbox .footer-pay .icon {
  display: flex;
}

footer .footer-flexbox .footer-pay .icon a {
  display: inline-block;
  width: calc(100% / 5);
  margin-left: 4%;
}

footer .footer-flexbox .footer-pay .icon a .fa-brands {
  font-size: 2vw;
}

footer .footer-flexbox .footer-pay .icon a .fa-instagram {
  background-image: linear-gradient(25deg, #4C64D3, #CF2E92, #F26939, #FFDD83);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

footer .footer-flexbox + p {
  margin-top: var(--margin-top);
  text-align: center;
  font-size: .8vw;
}