@charset "UTF-8";
html{
  scroll-behavior: smooth;
}

/* 見出しデザイン */
.m2{
  padding: 50px;
  font-size: clamp(calc(20rem/16),calc(48 / 1440 * 100vw),calc(54rem/16));
  /* font-size: ; */
}

.m3{
  padding: 50px;
}

.g1{
  /* font-size: calc(32/1440*100vw);  */
  font-size: clamp(calc(20rem/16),calc(32 / 1440 * 100vw),calc(32rem/16));
  text-align: center;
  padding: 50px;
}

/* 五感 */

/* スクロール */
.gokan-title{
  font-weight: normal;
  font-size: calc(48/1440*100vw);
  letter-spacing: -0.023em;
  padding: 150px 0 100px;
}
.gokan{
  padding: 100px 0 29vw;
}
.gokan-list{
  display: flex;
  justify-content: center;
  gap: 10px;
  color: #eee;
}
.gokan-list-item{
  max-width: 225px;
  width: 20%;
  position: relative;
}
.gokan-list-item a{
  display: block;
  position: relative;
}
.gokan-list-item a::before,
.gokan-list-item a::after{
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 450 / 130;
  background-color: #00356E;
  clip-path: polygon(0 76%, 100% 0, 100% 24%, 0% 100%);
  position: absolute;
}
.gokan-list-item a::before{
  left: 0;
  top: 0;
  translate: 0 -120%;
}
.gokan-list-item a::after{
  right: 0;
  bottom: 0;
  translate: 0 120%;
}
.gokan-list-item .outline{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  row-gap: 20px;
  background-color: #00356E;
  /* height: calc(572/1440*100vw); */
  /* max-height: 600px; */
  /* min-height: 400px; */
  padding: 20% 15px 0;
  position: relative;
  /* clip-path: polygon(0 8%, 100% 0, 100% 92%, 0% 100%); */
}
.gokan-list-item .outline::before,
.gokan-list-item .outline::after{
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 450 / 100;
  background-color: #00356E;
  position: absolute;
  left: 0;
}
.gokan-list-item .outline::before{
  top: 0;
  translate: 0 -99%;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.gokan-list-item .outline::after{
  bottom: 0;
  translate: 0 99%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.gokan-list-item .ja{
  writing-mode: vertical-rl;
  /* font-size: calc(52/1440*100vw); */
  font-size: clamp( calc(28rem/16) , calc(40/1440*100vw) , calc(52rem/16) );
  letter-spacing: 0.2em;
  height: 5em;
}
.gokan-list-item .en{
  display: inline-block;
  /* font-size: calc(48/1440*100vw); */
  font-size: clamp( calc(44rem/16) , calc(40/1440*100vw) , calc(48rem/16) );
  color: rgba(255,255,255,.3);
  line-height: 1;
  rotate: 90deg;
  translate: 0 -40px;
  transform-origin: left bottom;
  position: absolute;
  left: 0;
  top: 0;
}
.gokan-list-item .color{
  font-size: clamp( calc(14rem/16) , calc(26/1440*100vw) , calc(32rem/16) );
  width: 100%;
  height: 25vw;
  aspect-ratio: 1 / 1.3;
  color: #fff;
  padding: 50% 0 40px;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  translate: 0 100%;
}
.gokan-list-item .color-list{
  list-style: none;
}
.gokan-list-item .color::after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  aspect-ratio: 450 / 100;
  left: 0;
  bottom: 0;
  translate: 0 99%;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
:root{
  --gokan_pink:#D70B5C;
  --gokan_blue:#5DB6D9;
  --gokan_purpole:#6161AC;
  --gokan_orange:#DC9A00;
  --gokan_green:#A2B700;
  --gokan_light_pink:#ffe1ed;
  --gokan_light_blue:#94c6d9;
  --gokan_light_purpole:#bcbce5;
  --gokan_light_orange:#f3dda9;
  --gokan_light_green:#d9e780;

}
.gokan-list-item .color1,
.gokan-list-item .color1::after{background-color: var(--gokan_pink);}
.gokan-list-item .color2,
.gokan-list-item .color2::after{background-color: var(--gokan_blue);}
.gokan-list-item .color3,
.gokan-list-item .color3::after{background-color: var(--gokan_purpole);}
.gokan-list-item .color4,
.gokan-list-item .color4::after{background-color: var(--gokan_orange);}
.gokan-list-item .color5,
.gokan-list-item .color5::after{background-color: var(--gokan_green);}


/* 主な活動 */
#activity{
  padding-top: 103px;
  margin-top: -103px;
}

.activity ul{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  justify-items: center;
}
@media screen and (min-width:620px){
  .activity ul{
    display: grid;
    grid-template-columns: repeat(3,calc(100%/3));
    justify-items: center;
  }
}

.activity img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  filter: drop-shadow(8px 8px 0 transparent);
  transform: translateZ(0);
  transition: filter .2s;
}

.activity li:hover img {
  filter: drop-shadow(8px 8px 0 #DB292C);
}

/* ポップオーバー */
.selecter-item {
  width: 200px;
  height: 200px;
  position: relative;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* 背景色の設定 */
.selecter-item.cat.pink{background-color: var(--gokan_light_pink);}
.selecter-item.cat.blue{background-color: var(--gokan_light_blue);}
.selecter-item.cat.purpole{background-color: var(--gokan_light_purpole);}
.selecter-item.cat.orange{background-color: var(--gokan_light_orange);}
.selecter-item.cat.green{background-color: var(--gokan_light_green);}

.selecter-item-button {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}
.selecter-item .number {
  width: 100%;
  
}

.modal-item {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  scale: 0 1;
  transition: scale 0s 0.3s,opacity 0.3s ease-in-out;
}
.modal-item.active {
  opacity: 1;
  scale: 1 1;
  transition: 0s;
}
.modal-item-center {
  width: 80%;
  padding: 40px;
  background-color: #172245;
  color: #fff;
  position: relative;
  scale: 0 1;
  transition: 0.3s ease-in-out;
}
.active .modal-item-center {
  scale: 1 1;
}
.modal-item-center::before, .modal-item-center::after {
  content: "";
  display: block;
  width: 100%;
  height: 20%;
  background-color: #172245;
  position: absolute;
  left: 0;
}
.modal-item-center::before {
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  top: 0;
  translate: 0 -99%;
}
.modal-item-center::after {
  clip-path: polygon(0 0, 0 100%, 100% 0);
  bottom: 0;
  translate: 0 99%;
}
.modal-item-center-main {
  display: flex;
  justify-content: space-between;
}
.modal-item-center-photo {
  width: 47%;
}
.modal-item-center-txt {
  width: 47%;
}
.modal-item-center-txt h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.modal-item-center button {
  display: block;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  color: #172245;
  font-weight: 900;
  font-size: 1.125rem;
  padding: 20px;
  margin-top: 40px;
  border-radius: 20px;
}

@keyframes modalopen {
  0% {
    opacity: 0;
    scale: 0 1;
  }
  100% {
    opacity: 1;
    scale: 1 1;
  }
}
@keyframes modalclose {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes modalmainclose {
  0% {
    display: block !important;
  }
  100% {
    display: block !important;
  }
}


/* スライダー*/
.slider{
  margin: 0 40px;
  max-width: 900px;
  width: 80%;
}

/* .slick-img{
border-radius: 1em;
overflow: hidden;
width: 300px;
height: 30vw;
max-height: 600px;
object-fit: cover;
} */
.slider-img img {
  height: auto;
  width: 100%;
}
.thumbnail{
margin: 0 10vw;
}
.slick-img{
/* border-radius: 1em; */
overflow: hidden;
width: 70%;
height:40vw;
object-fit: cover;
}

.thumbnail-img{
/* border-radius: 1em; */
overflow: hidden;
width: 100%;
object-fit: cover;
padding: 0 4%;
}

.text-slider{
font-size: 1.5rem;
font-family: 'Kaisei Opti', serif;
margin-bottom: 15px;
font-weight:bold;
display: none;
}

.text-slider_2{
font-size: 1rem;
margin-bottom: 20px;
}

.nearby_facilities
{
width: 100%;
}
.space{
background-color: #fff;
padding: 5px;
}
.txt{
text-align: center;
}

/* .slick-prev:before,
.slick-next:before
{
    color: #DB292C;
}

.slick-prev:hover:before,
.slick-next:hover:before{
    color: blue;
}

.slick-dots li.slick-active button:before
{
    color: #DB292C;
} */


/* GSAP用css */
.gokan-list-item .color{
  opacity: 0;
  translate: 0 0;
}
.gokan-list-item .color.is-active{
  opacity: 1;
  translate: 0 100%;
}
.gokan-list-item .color1{transition: 0.7s 0.9s ease-out;}
.gokan-list-item .color2{transition: 0.7s 1.0s ease-out;}
.gokan-list-item .color3{transition: 0.7s 1.2s ease-out;}
.gokan-list-item .color4{transition: 0.7s 1.4s ease-out;}
.gokan-list-item .color5{transition: 0.7s 1.7s ease-out;}


@media screen and (max-width: 650px) {
  .gokan{
    padding: 100px 0 30vw;
  }
  .activity img {
    width: 70%;
    aspect-ratio: 1/1;
    object-fit: contain;
    filter: drop-shadow(8px 8px 0 transparent);
    transition: filter .2s;
    filter: drop-shadow(8px 8px 0 #DB292C);
  }  
}