@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-origin: border-box;
}
@font-face {
  font-family: "Phenomena";
  src: url("../font/Phenomena-Regular.otf") format("opentype");
  font-display: swap;
}
:root {
  --main-primary: #d0e7ff;
  --main-secondary: #ffefcc;
  --main-teritory: #ffe3f4;
  --txt-primary: #4c5456;
  --txt-color-blk: #000;
  --color-blue-1: #2579cd;
  --color-blue-2: #6aa8ff;
  --color-blue-3: #e7f3ff;
  --txt-orange-1: #ffae00;
  --txt-orange-2: #ff7300;
  --txt-pink: #ff8bd3;
  --txt-light_pink: #ffecf8;
  --txt-light_orange: #fff6e4;
  --footer-bg: #c9e1ee;
  --color-white: #fff;
  font-size: 10px;
  --font-phenomena: "Phenomena";
  --font-sans-jp: "Noto Sans JP", sans-serif;
}
html {
  scroll-behavior: smooth;
}
body {
  display: block;
  overflow-x: hidden;
  width: 100%;
  font-style: normal;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--txt-primary);
  background-color: var(--color-white);
}
/*====================================*/
/* base contents */
/*====================================*/
p {
  font-size: 1.6rem;
  line-height: 1.6;
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}
ul li {
  color: currentColor;
}
img {
  width: 100%;
  height: auto;
  overflow: hidden;
  object-fit: cover;
  display: block;
}
p {
  line-height: 1.6;
}
/* ------------------------
    edit contents
------------------------- */
/* 指定フォント ここから */

/* ----pc,sp/on_off---- */
.pc {
  display: block !important;
}
.pc_flex {
  display: flex;
}
.sp {
  display: none !important;
}
@media (max-width: 768px) {
  .pc {
    display: none !important;
  }
  .pc_flex {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  
}
/* ------------------------
  mv
------------------------- */
.mv {
  position: relative;
  padding-bottom: 53px;
}
.mv .nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  display: flex;
}
.mv .nav .nav-item {
  clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
}
.mv .nav .nav-item.color-1 {
  background: var(--main-primary);
  transition: background 0.5s ease;
}
.mv .nav .nav-item.color-1 a {
  color: var(--color-blue-2);
  padding: 21px 120px 25px;
  transition: color 0.5s ease;
}
.mv .nav .nav-item.color-1:hover {
  background: var(--color-blue-2);
}
.mv .nav .nav-item.color-1:hover a {
  color: var(--main-primary);
}
.mv .nav .nav-item.color-2 {
  background: var(--main-secondary);
  transition: background 0.5s ease;
}
.mv .nav .nav-item.color-2 a {
  color: var(--txt-orange-1);
  padding: 21px 62px 25px;
  transition: color 0.5s ease;
}
.mv .nav .nav-item.color-2:hover {
  background: var(--txt-orange-1);
}
.mv .nav .nav-item.color-2:hover a {
  color: var(--main-secondary);
}
.mv .nav .nav-item.color-3 {
  background: var(--main-teritory);
  transition: background 0.5s ease;
}
.mv .nav .nav-item.color-3 a {
  color: var(--txt-pink);
  padding: 21px 93px 25px;
  transition: color 0.5s ease;
}
.mv .nav .nav-item.color-3:hover {
  background: var(--txt-pink);
}
.mv .nav .nav-item.color-3:hover a {
  color: var(--main-teritory);
}
.mv .nav .nav-item a {
  display: block;
  /* padding: 21px 120px 25px; */
  font-size: 4.6rem;
  font-weight: 700;
  text-align: center;
  font-family: var(--font-phenomena);
  width: fit-content;
  margin: auto;
  max-width: 311px;
}
.intro {
  margin: 115px auto 165px;
  text-align: center;
}
.intro h3 {
  color: var(--color-blue-1);
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 47px;
}
.intro p {
  color: var(--txt-primary);
  font-size: 2.4rem;
  font-weight: 400;
}
/* ------------------------
  main
------------------------- */
.main_contents {
  position: relative;
  z-index: 0;
}
.main_contents .content {
  padding: 126px 0;
  max-width: 1436px;
  margin: auto;
}
.main_contents .section_title {
  text-align: center;
  margin-bottom: 69px;
}
.main_contents .section_title h2 {
  font-size: 12.8rem;
  font-weight: 700;
  font-family: var(--font-phenomena);
}
.main_contents .section_title p {
  color: var(--txt-color-blk);
  font-size: 3.4rem;
  font-weight: 400;
}
.main_contents .content {
  position: relative;
  z-index: 1;
}
.main_contents .content .section_containter {
  position: relative;
  padding-bottom: 113px;
}
.main_contents .content .section_containter .box_img {
  position: relative;
  z-index: 1;
  width: fit-content;
}
.main_contents .content .section_containter .box_img img {
  width: auto;
}
.main_contents .content .section_containter .box_details {
  position: absolute;
  z-index: 0;
  background: var(--color-white);
  padding: 42px 39px 86px 151px;
  bottom: 0;
  left: 666px;
}
.main_contents .content .section_containter .box_details .box_title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 22px;
}
.main_contents .content .section_containter .box_details .box_text {
  color: var(--txt-primary);
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 22px;
}
.main_contents .content .section_containter .box_details .btn {
  margin-left: auto;
  width: fit-content;
  border-radius: 5px;
}
.main_contents .content .section_containter .box_details .btn a {
  color: var(--color-white);
  padding-right: 24px;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
}
.main_contents .decor-1,
.main_contents .decor-2,
.main_contents .decor-3,
.main_contents .decor-4 {
  position: absolute;
  top: 0;
  z-index: 0;
}
.main_contents .decor-1,
.main_contents .decor-3 {
  left: 0;
}
.main_contents .decor-2,
.main_contents .decor-4 {
  right: 0;
}

/* stay */
.main_contents.stay {
  background: var(--color-blue-3);
}
.main_contents.stay .section_title h2 {
  color: var(--color-blue-2);
}
.main_contents .stay_content .section_containter .box_details .box_title {
  color: var(--color-blue-2);
}
.stay_content .section_containter .box_details .btn {
  background: var(--color-blue-2);
}
.stay_content .section_containter .box_details .btn a .txt:hover {
  color: var(--main-primary);
}
.type-1.btn-wrap.-wh::before {
  background: var(--color-blue-1);
}

/* restaurant */
.main_contents.restaurant {
  background: var(--txt-light_orange);
}
.main_contents.restaurant .section_title h2 {
  color: var(--txt-orange-1);
}
.main_contents .restaurant_content .section_containter .box_details .box_title {
  color: var(--txt-orange-2);
}
.main_contents .restaurant_content .section_containter {
  padding-top: 47px;
}
.main_contents .restaurant_content .section_containter .box_details {
  position: relative;
  width: fit-content;
  left: 0;
  bottom: 0;
  padding: 42px 173px 50px 68px;
}
.main_contents .restaurant_content .section_containter .box_img {
  position: absolute;
  top: 0;
  right: 0;
}
.restaurant_content .section_containter .box_details .btn.type-3 {
  background: linear-gradient(90deg, #9e71ff 0%, #ff5ea0 53.37%, #ffe459 100%);
}
.type-3.btn-wrap.-wh::before {
  background: linear-gradient(90deg, #7040e0 0%, #ff2d84 53.37%, #ffcf00 100%);
}
.restaurant_content .section_containter .box_details .btn.type-4 {
  margin-top: 22px;
  background: #02c755;
}
.type-4.btn-wrap.-wh::before {
  background: linear-gradient(90deg, #00e063 0%, #02c755 53.37%, #00a844 100%);
}

/* acitvity */
.main_contents.activity {
  background: var(--txt-light_pink);
}
.main_contents.activity .section_title h2 {
  color: var(--txt-pink);
}
.main_contents .activity_content .section_containter {
  padding-bottom: 120px;
}
.main_contents .activity_content .containter_type-2 {
  margin-top: 105px;
}
.main_contents .activity_content .containter_type-2 .box_details {
  position: relative;
  width: fit-content;
  left: 0;
  bottom: 0;
  padding: 76px 175px 65px 68px;
}
.main_contents .activity_content .containter_type-2 .box_img {
  position: absolute;
  bottom: 0;
  right: 0;
}
.main_contents .activity_content .section_containter .box_details .box_title {
  color: var(--txt-pink);
}
.main_contents .activity_content .containter_type-2 .box_details .box_text {
  margin-bottom: 49px;
}
.activity_content .section_containter .box_details .btn {
  background: var(--txt-pink);
}
.activity_content .section_containter .box_details .btn a .txt:hover {
  color: var(--txt-pink);
}
.type-2.btn-wrap.-wh::before {
  background: var(--main-teritory);
}

/* information */
.main_contents.information {
  background: #F7FBFF;
}
.main_contents.information .content {
  padding: 71px 0 126px;
}
.main_contents.information .section_title {
  margin-bottom: 40px;
}
.main_contents.information .section_title h2 {
  font-size: 10.8rem;
}
.main_contents.information .section_title h2,
.main_contents.information .section_title p {
  color: var(--color-blue-2);
}
.main_contents.information .content .section_containter {
  padding-bottom: 0;
}
.main_contents.information .content .section_containter .infor_text {
  text-align: center;
  color: var(--txt-primary);
  font-size: 2.4rem;
  font-weight: 400;
}
/* ------------------------
  footer
------------------------- */
footer {
  background: #C9E1EE;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 18px 0 37px;
}
.copyright p {
  color: var(--txt-primary);
  font-size: 2rem;
  font-weight: 400;
  line-height: normal;
}
/* ------------------------
  common_btn
------------------------- */
.btn-wrap {
  align-content: center;
  border-radius: 0.5rem;
  height: auto;
  transform: translate(0px, 0px);
  transition-duration: 600ms;
  width: auto;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .btn-wrap {
    width: 100%;
  }
}

.btn-wrap.-wh {
  position: relative;
  transition: color 0.5s ease;
  background: #fff;
}

.btn-wrap.-wh:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-wrap.-wh::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
  border-radius: 0.5rem;
}

.side__icn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.side__icn > img {
  height: 1.5rem;
  width: 1.5rem;
}

.btn-wrap a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-wrap:hover {
  opacity: 1;
}

.btn-wrap .txt {
  color: var(--color-white);
  font-size: 2.6rem;
  font-weight: 600;
  height: auto;
  line-height: 1.01;
  opacity: 1;
  text-align: left;
  transform: translate(0px, 0px);
  transition-duration: 600ms;
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
  padding: 13px 0 16px 112px;
}

.btn-icn__box {
  position: relative;
  align-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0);
  border-radius: 0;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 2rem;
  justify-content: center;
  margin: 0px 0px 0px 68px;
  overflow-x: visible;
  overflow-y: visible;
  transform: scale(1, 1);
  width: 2rem;
  max-width: calc(100% - 30px);
  display: flex;
}

.top__arrow {
  backdrop-filter: brightness(100%);
  flex: none;
  height: auto;
  transition-duration: 0ms;
  width: 25px;
  z-index: 3;
  max-width: 100%;
  display: flex;
  position: relative;
  z-index: 1;
}

.btn-wrap:hover .top__arrow {
  opacity: 0;
  transform: translate(10px, 0px);
  transition-duration: 600ms;
}

.btn-icn__box .bottom__arrow__box {
  align-content: center;
  align-items: center;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  left: 0;
  margin: 0 0 0 0;
  padding: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
  max-width: 100%;
  display: flex;
}

.btn-icn__box .bottom__arrow {
  flex: none;
  height: auto;
  transform: translate(-10px, 0px);
  opacity: 0;
  position: absolute;
  transition-delay: 0ms;
  transition-duration: 0ms;
  width: 25px;
  max-width: 100%;
}

.btn-wrap:hover .btn-icn__box .bottom__arrow {
  opacity: 1;
  transform: translate(0px, 0px);
  transition-delay: 250ms;
  transition-duration: 600ms;
}

.back-to-top {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  left: unset;
  width: 48px;
  height: 48px;
  background: var(--main-primary);
  color: var(--color-blue-2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  transform: translateY(20px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}
@media (min-width: 768px) {
  .back-to-top {
    width: 56px;
    height: 56px;
  }
}
.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.back-to-top:hover {
  background: var(--color-blue-2);
  color: var(--main-primary);
}
.back-to-top:focus {
  outline: 2px solid var(--color-blue-1);
  outline-offset: 2px;
}
.back-to-top-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}
@media (min-width: 768px) {
  .back-to-top__icon {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
  }
}
/* =============================================
   RESPONSIVE: section_containter
   ============================================= */
@media screen and (min-width: 769px) and (max-width: 1440px) {
  /* Button txt */
  .btn-wrap .txt {
    font-size: clamp(1.6rem, 1.8vw, 2.6rem);
    padding: clamp(10px, 0.9vw, 13px) 0 clamp(12px, 1.1vw, 16px) clamp(60px, 7.8vw, 112px);
  }

  /* Nav */
  .mv .nav .nav-item a {
    font-size: clamp(2.8rem, 3.2vw, 4.6rem);
  }
  .mv .nav .nav-item.color-1 a {
    padding: clamp(14px, 1.5vw, 21px) clamp(40px, 8.3vw, 120px) clamp(16px, 1.7vw, 25px);
  }
  .mv .nav .nav-item.color-2 a {
    padding: clamp(14px, 1.5vw, 21px) clamp(20px, 4.3vw, 62px) clamp(16px, 1.7vw, 25px);
  }
  .mv .nav .nav-item.color-3 a {
    padding: clamp(14px, 1.5vw, 21px) clamp(30px, 6.5vw, 93px) clamp(16px, 1.7vw, 25px);
  }

  .main_contents .content .section_containter {
    padding-bottom: clamp(60px, 7.8vw, 113px);
    margin: 0 24px;
    margin-top: clamp(55px, 7.8vw, 105px);
  }
  .main_contents .content .section_containter .box_img {
    width: 53.5%;
  }
  .main_contents .content .section_containter.containter_type-2 .box_img {
    width: 47%;
  }
  .main_contents .content .section_containter .box_img img {
    width: 100%;
    display: block;
  }
  .main_contents .content .section_containter .box_details .box_title {
    font-size: clamp(2.4rem, 2.8vw, 4rem);
    margin-bottom: clamp(12px, 1.5vw, 22px);
  }
  .main_contents .content .section_containter .box_details .box_text {
    font-size: clamp(1.6rem, 1.7vw, 2.4rem);
    margin-bottom: clamp(12px, 1.5vw, 22px);
  }
  .main_contents .stay_content .section_containter .box_details {
    left: 48%;
    padding: clamp(20px, 2.9vw, 42px) clamp(16px, 2.7vw, 39px) clamp(40px, 6vw, 86px) clamp(16px, 10.5vw, 151px);
  }
  /* Restaurant */
  .main_contents .restaurant_content .section_containter .box_details {
    padding: clamp(20px, 2.9vw, 42px) clamp(40px, 12vw, 173px) clamp(24px, 3.5vw, 50px) clamp(20px, 4.7vw, 68px);
    right: 48%;
  }
  /* Activity */
  .main_contents .activity_content .section_containter .box_details {
    padding: clamp(30px, 4.7vw, 67px) clamp(16px, 2.6vw, 38px) clamp(30px, 4.6vw, 66px) clamp(16px, 10.6vw, 152px);
    left: 48%;
  }
  .main_contents .activity_content .section_containter.containter_type-2 .box_details {
    padding: clamp(36px, 5.3vw, 76px) clamp(60px, 12.2vw, 175px) clamp(30px, 4.5vw, 65px) clamp(24px, 4vw, 68px);
    left: 0;
  }
  .main_contents .decor-3,.main_contents .decor-4 {
    width: 20%;
  }
  .main_contents .decor-1,.main_contents .decor-2 {
    width: 53%;
  }
}
@media screen and (max-width: 768px) {
  .mv {
    padding-bottom: 0;
  }
  .intro {
    max-width: fit-content;
    margin: 37px auto;
    text-align: left;
  }
  .intro h3 {
    font-size: 2rem;
    max-width: fit-content;
    margin: 0 auto 15px;
  }
  .intro p {
    text-align: center;
    font-size: 1.6rem;
    margin: 0 28px;
  }
  .main_contents .content {
    padding: 40px 0;
  }
  .main_contents .section_title {
    margin-bottom: 4rem;
  }
  .main_contents .section_title h2 {
    font-size: 3.6rem;
  }
  .main_contents .section_title p {
    font-size: 1.4rem;
  }
  .main_contents .content .section_containter {
    padding-bottom: 0;
  }
  .main_contents .content .section_containter .box_img {
    width: 100%;
    padding: 0 20px 15px;
  }
  .main_contents .content .section_containter .box_img img {
    width: 100%;
    display: block;
  }
  .main_contents .content .section_containter .box_details {
    position: static;
    /* width: 100%; */
    width: auto;
    left: auto;
    bottom: auto;
    padding: 20px 13px;
    margin: 0 20px;
  }
  .main_contents .content .section_containter .box_details .box_title {
    font-size: 2rem;
    margin-bottom: 16px;
  }
  .main_contents .content .section_containter .box_details .box_text {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }
  .main_contents .restaurant_content .section_containter {
    padding-top: 0;
    display: flex;
    flex-direction: column-reverse;
  }
  .main_contents .restaurant_content .section_containter .box_img {
    position: static;
  }
  .main_contents .restaurant_content .section_containter .box_details {
    padding: 20px 13px;
  }
  .main_contents .activity_content .section_containter .box_details {
    padding: 20px 13px;
  }
  .main_contents .activity_content .containter_type-2 {
    margin-top: 35px;
  }
  .main_contents .activity_content .containter_type-2 .box_img {
    position: static;
  }
  .main_contents.information .content {
    padding: 30px 0;
  }
  .main_contents.information .section_title {
    margin-bottom: 21px;
  }
  .main_contents.information .section_title h2 {
    font-size: 2.8rem;
  }
  .main_contents.information .content .section_containter {
    padding: 0 22px;
  }
  .main_contents.information .content .section_containter .infor_text {
    font-size: 1.5rem;
  }
  .main_contents .decor-3,.main_contents .decor-4 {
    width: 20%;
  }
  .main_contents .decor-1,.main_contents .decor-2 {
    width: 53%;
  }
  .btn-wrap .txt {
    font-size: 2rem;
    padding-left: 75px;
  }
  .main_contents .content .section_containter .box_details .btn {
    margin: auto;
  }
  .restaurant_content .section_containter .box_details .btn.type-4 {
    margin-top: 10px;
  }
  .copyright p {
    text-align: center;
      font-size: 1.4rem;
      padding: 0 12px;
  }
}

/* =============================================
   SCROLL ANIMATION
   ============================================= */
.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.main_contents.restaurant .section_title.anim-fade-up {
  transition-delay: 0s;
}
.main_contents.restaurant .box_img.anim-fade-up {
  transition-delay: 0.15s;
}
.main_contents.restaurant .box_details.anim-fade-up {
  transition-delay: 0.3s;
}