@charset "utf-8";
/* ============================
loading view
===============================*/
#loading {
  width: 100%;
  height: 100vh;
  transition: all 0.4s;
  background-color: var(--primary-white, #FCFAF7);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;
  z-index: 99999;
}

.dots{
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -50px;
}

.dot__item{
  transition: all 500ms ease;
  background: var(--primary-green);
  height: 10px;
  width: 10px;  
  display: inline-block;
  border-radius: 10px;
  animation: wave 2s ease  infinite;
}  

.dot__item:nth-child(1){  animation-delay: 0; }
.dot__item:nth-child(2){  animation-delay: 100ms; }
.dot__item:nth-child(3){  animation-delay: 200ms; }
.dot__item:nth-child(4){  animation-delay: 300ms; }
.dot__item:nth-child(5){  animation-delay: 400ms; }
.dot__item:nth-child(6){  animation-delay: 500ms; }
.dot__item:nth-child(7){  animation-delay: 600ms; }
.dot__item:nth-child(8){  animation-delay: 700ms; }

@keyframes wave{
  0%, 40%, 100% { 
    transform: translate(0, 0);
    background-color: var(--primary-green);    
  }
  10% { 
    transform: translate(0, -15px); 
    background-color: #CDDA65;    
  }  
}

/* end of loading */
#loading.fadeout {
  opacity: 0;
  visibility: hidden;
}

/* fade in container */
.container {
  opacity: 0;
  transition: opacity 1.5s ease;
}

.container.open {
  opacity: 1;
}

/* ============================
modal
===============================*/
.modal {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity .5s ease;
}

.modal.is-hidden {
  opacity: 0;
}

.modal__bg {
  width: 100%;
  height: 100vh;
  background-color: rgba(30,30,30,0.9);
}

.modal__wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 50px 50px;
  background-color: var(--primary-white);
}

.modal__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}

.modal__txt span {
  font-weight: 500;
  color: #A63B2E;
}

.modal__closeBtn {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
  font-size: 2.0rem;
  font-weight: 500;
}

/* ============================
top coomon
===============================*/
.section {
  margin: 96px var(--contentPadding-sp) 0;
}

.section:nth-of-type(even) .section__desc-title {
  text-align: right;
}

.sectionTitle {
  font-size: 4.0rem;
  font-weight: 500;
  color: var(--primary-green, #2E4A3F);
}

.sectionSubTitle {
  margin-top: 8px;
  color: var(--primary-gray, #7F7F7F);
}

.intro__wrap {
  margin-top: 48px;
}

.intro__catchCopy {
  font-size: 2.0rem;
  color: var(--primary-green, #2E4A3F);
}

.intro__text {
  align-self: stretch;
  line-height: 2;
  margin-top: 56px;
  color: var(--primary-black, #1C1C1C);
}

.common__btn-container {
  text-align: right;
  margin-top: 56px;
}

.commonBtn {
  font-size: 1.8rem;
  display: inline-block;
  position: relative;
}

.commonBtn::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--primary-black);
  position: absolute;
  bottom: -4px;
  left: 0;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform 0.3s;
}

.commonBtn:hover::after {
  transform: scale(1, 1);
}


.section__img {
  margin-top: 56px;
}

/* top common pc  */
@media screen and (min-width: 1025px) {
  .section {
    margin: 250px 0 0;
  }

  .section:nth-of-type(even) .section__desc-title {
    text-align: left;
  }
  
  .section__container {
    display: flex;
    gap: 9.23%;
  }

  .section__container.order--normal {
    margin-left: var(--contentPadding-pc);
  }

  .section__container.order--reverse {
    margin-right: var(--contentPadding-pc);
    flex-direction: row-reverse;
  }

  .section__desc {
    width: 66.2%;
    max-width: 470px;
  }

  .sectionTitle {
    font-size: 5.0rem;
    font-weight: 500;
  }

  .sectionSubTitle {
    font-size: 2.0rem;
  }

  .intro__wrap {
    margin: 96px 4px 0;
  }

  .intro__catchCopy {
    font-size: 2.4rem;
  }

  .intro__text {
    font-size: 1.8rem;
  }

  .common__btn__container {
    text-align: right;
  }

  .common__btn {
    font-size: 1.8rem;
    display: inline-block;
  }

  .section__img {
    margin: 0;
    width: 100%;
  }
}/* pc 1025px */

/* ============================
homeMv
===============================*/
.homeMv {
  position: relative;
}

.homeMv__wrap {
  width: 100%;
  height: 350vh;
}

.homeMv__img {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
}

.homeMv__mask {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.homeMvImg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: none;
}

.homeMv__catch {
  margin: auto 13.5%;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.0rem;
  color: var(--primary-whiteLow, #F1F1F1);
  transition: opacity 1.0s ease;
}

.scrollBar {
  width: 1px;
  height: 80px;
  background-color: #B4B1A8;
  position: fixed;
  bottom: 0%;
  left: 50%;
  transition: opacity 1.0s ease;
  animation-name: bar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes bar {
  0% {
    clip-path: inset(0% 0% 100% 0%);
  }
  50% {
    clip-path: inset(0% 0% 0% 0%);
  }
  100% {
    clip-path: inset(100% 0% 0% 0%);
  }
}

body.scrolled .homeMv__catch,
body.scrolled .scrollBar {
  opacity: 0;
}

/* homeMv pc */
@media screen and (min-width: 769px) {
  .homeMv__catch {
    left: 15%;
  }
}

@media screen and (min-width: 1025px) {
  .homeMv__catch {
    margin: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.4rem;
  }

  .scrollBar {
    height: 130px;
  }
}/* pc 1025px */

/* ============================
section__concept
===============================*/
.section__top-concept {
  position: relative;
}
.section__img--concept {
  width: 100%;
  aspect-ratio: 1/1.65;
  position: relative;
}

.conceptImg--back__mask {
  width: 100%;
  aspect-ratio: 1/1.19;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.conceptImg--back,
.conceptImg--front {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  object-fit: cover;
}

.conceptImg--front__mask {
  width: 52.2%;
  aspect-ratio: 1/1.36;
  position: absolute;
  top: 55%;
  left: 42%;
  overflow: hidden;
}

.catch__img {
  width: 100%;
  aspect-ratio: 1/1.825;
  margin: 50px 0 0;
  position: relative;
}

.catch__img .catchImg__mask {
  position: absolute;
  overflow: hidden;
}

.catchImg__mask.mask1 {
  width: 58.25%;
  aspect-ratio: 1/0.6;
  top: 0;
  left: 0;
}

.catchImg__mask.mask2 {
  width: 65%;
  aspect-ratio: 1/0.6;
  top: 22%;
  right: -4.26%;
}

.catchImg__mask.mask3 {
  width: 43.7%;
  aspect-ratio: 1/1.07;
  top: 38%;
  left: 5%;
}

.catchImg__mask.mask4 {
  width: 40.81%;
  aspect-ratio: 1;
  top: 57.8%;
  right: 5%;
}

.catchImg__mask.mask5 {
  width: 43.7%;
  aspect-ratio: 1/0.76;
  top: 78.3%;
  left: 17%;
}

.catchImg__mask:nth-child(1..5) {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  object-fit: cover;
}

/* section__concept pc */
@media screen and (min-width: 1025px) {
  .section__img--concept {
    aspect-ratio: 1/1.05;
  }

  .conceptImg--back__mask {
    width: 80.5%;
    top: 0;
    left: 19.8%;
  }

  .conceptImg--front__mask {
    width: 40.9%;
    aspect-ratio: 1/1.35;
    top: 47%;
    left: 0;
  }

  .catch__img {
    aspect-ratio: 1/0.69;
    margin: 100px 0 0;
  }

  .catchImg__mask.mask1 {
    width: 33.3%;
    aspect-ratio: 1/0.63;
    top: 0;
    left: 12.5%;
  }

  .catchImg__mask.mask2 {
    width: 37.5%;
    aspect-ratio: 1/0.61;
    top: 21.9%;
    right: 12.5%;
  }

  .catchImg__mask.mask3 {
    width: 21.5%;
    aspect-ratio: 1/1.07;
    top: 33.3%;
    left: 31.5%;
  }

  .catchImg__mask.mask4 {
    width: 18.6%;
    aspect-ratio: 1;
    top: 66.3%;
    right: 26.2%;
  }

  .catchImg__mask.mask5 {
    width: 22.9%;
    aspect-ratio: 1/0.76;
    top: 74.8%;
    left: 27%;
  }

  .catchImg__mask:nth-child(1..5) {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    backface-visibility: hidden;
    object-fit: cover;
  }
}/* pc 1025px */

/* ============================
footprints--first
===============================*/
.footprints--first {
  position: absolute;
}

.footprints--first .footprints--kamoshika {
  width: 300px;
  height: 400px;
}

.kamoshikaFoot--first {
  opacity: 0;
}

/* footprints--first pc */
@media screen and (min-width: 1025px) {
  .footprints--first {
    position: absolute;
    right: 0;
    transform: translateY(-20%);
  }

  .footprints--first .footprints--kamoshika {
    width: 600px;
    height: 800px;
    transform: scale(-1, 1);
  }
}/* pc 1025px */

/* ============================
section__room
===============================*/
.section__img--room {
  width: 100%;
  aspect-ratio: 1/0.95;
  position: relative;
}

.roomImg--back__mask {
  width: 100%;
  aspect-ratio: 1/0.7;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.roomImg--back,
.roomImg--front {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  object-fit: cover;
}

.roomImg--front__mask {
  width: 43.7%;
  aspect-ratio: 1/1.17;
  position: absolute;
  top: 46.3%;
  right: -4.2%;
  overflow: hidden;
}

/* section__room pc */
@media screen and (min-width: 1025px) {
  .section.section__top-room {
    margin-top: 350px;
  }


  .section__img--room {
    aspect-ratio: 1/1.05;
  }

  .roomImg--back__mask {
    aspect-ratio: 1/0.774;
  }

  .roomImg--front__mask {
    width: 42.2%;
    aspect-ratio: 1/1.17;
    top: 47.4%;
    right: -9%;
  }
}/* pc 1025px */

/* ============================
section__food
===============================*/
.section__img--food {
  width: 100%;
  aspect-ratio: 1/1.31;
  position: relative;
}

.foodImg--big__mask {
  width: 100%;
  aspect-ratio: 1/0.7;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.foodImg--big,
.foodImg--small,
.foodImg--medium {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  object-fit: cover;
}

.foodImg--small__mask {
  width: 43.7%;
  aspect-ratio: 1/0.71;
  position: absolute;
  top: 58.4%;
  left: -4.2%;
  overflow: hidden;
}

.foodImg--medium__mask {
  width: 58.3%;
  aspect-ratio: 1/0.7;
  position: absolute;
  top: 69.1%;
  right: 2%;
  overflow: hidden;
}

/* section__food pc */
@media screen and (min-width: 1024px) {
  .section__img--food {
    aspect-ratio: 1/1.5;
  }

  .foodImg--big__mask {
    aspect-ratio: 1/0.774;
  }

  .foodImg--small__mask {
    width: 49.3%;
    aspect-ratio: 1/0.71;
    top: 72%;
    left: -10%;
  }

  .foodImg--medium__mask {
    width: 70.4%;
    aspect-ratio: 1/0.7;
    top: 52%;
    right: 9%;
  }
}
@media screen and (min-width: 1440px) {
  .section__img--food {
    aspect-ratio: 1/1.29;
  }

  .foodImg--small__mask {
    top: 67.2%;
    left: -41.5%;
  }

  .foodImg--medium__mask {
    top: 61.7%;
  }
}/* pc 1440px */

/* ============================
footprints--second
===============================*/
.footprints--second {
  position: absolute;
  transform: translate(-28%, -20%);
}

.footprints--second .footprints--kamoshika {
  width: 300px;
  height: 400px;
}

.kamoshikaFoot--second {
  opacity: 0;
}

@media screen and (min-width: 1025px) {
  .footprints--second {
    position: absolute;
    transform: translate(0, -30%);
  }

  .footprints--second .footprints--kamoshika {
    width: 600px;
    height: 800px;
  }
}/* pc 1025px */

/* ============================
section__experience
===============================*/
.section__img--experience {
  width: 100%;
  aspect-ratio: 1/0.99;
  position: relative;
}

.experienceImg--back__mask {
  width: 100%;
  aspect-ratio: 1/0.7;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.experienceImg--back,
.experienceImg--front {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  backface-visibility: hidden;
  object-fit: cover;
}

.experienceImg--front__mask {
  width: 58.3%;
  aspect-ratio: 1/0.7;
  position: absolute;
  top: 61%;
  right: 9.3%;
  overflow: hidden;
}

/* section__experience pc */
@media screen and (min-width: 1025px) {
  .section__img--experience {
    aspect-ratio: 1/1.05;
  }

  .experienceImg--back__mask {
    aspect-ratio: 1/0.774;
  }

  .experienceImg--front__mask {
    width: 56.3%;
    aspect-ratio: 1/0.7;
    bottom: 0;
    right: -9%;
  }
}/* pc 1025px */

/* ============================
section__access
===============================*/
.section.section__top-access {
  margin: 96px 0;
}

.section__top-access .section__desc-title {
  margin: 0 var(--contentPadding-sp);
}

.accessMap--sp {
  width: 100%;
  height: auto;
}

.accessMapImg--sp {
  width: 100%;
}

.access__text {
  margin: 0 var(--contentPadding-sp);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.access__text-adress {
  font-size: 1.8rem;
  line-height: 2;
}

.access__text-transportation {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transportationCategory {
  font-size: 2.0rem;
  line-height: 2;
  color: var(--primary-green, #2E4A3F);
}

.distance,
.transportationDetail {
  font-family: "Noto Serif JP", serif;
}

.access__map {
  display: none;
}

/* section__access pc */
@media screen and (min-width: 1025px) {
  .section.section__top-access {
    margin: 200px 0;
  }

  .section__top-access .section__container {
    gap: 0;
  }

  .access__container {
    width: 100%;
    max-width: 469px;
  }

  .section__top-access .section__desc-title {
    margin: 0;
  }
  
  .accessMap--sp {
    display: none;
  }

  .access__text {
    position: relative;
    margin: 48px 0 0;
    gap: 48px;
  }

  .access__map {
    width: 100%;
    display: block;
  }
}/* pc 1025px */