@charset "utf-8";

body {
  background-color: #fff;
}

.header__logo {
    margin-top: 8px;
    width: 120px;
    height: auto;
}

.header__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.header {
  margin-bottom: 100px;

}
.reserveBtn {
  position: fixed;
  right: 0;
  top: 30%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  background-color: var(--primary-orange);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 30px 20px;
  border-radius: 25px 0 0 25px;
  transition: background-color 0.3s;
  z-index: 1000;
  text-orientation: upright;
  letter-spacing: 0.2em;

}

.reserveBtn:hover {
  background-color: #FF8769;
}

.reserveBtn__icon {
  width: 1.1em;
  height: auto;
  vertical-align: middle;
  transform: translateX(-0.2em);
  margin-top: -5px;
}


.reserveBtn:hover {
  background-color: #FF8769;
}



.section__title {
  z-index: 1000;
}


@media (max-width: 767px) {

      .header__logo img {
        width: 100px;
        height: auto;
        margin-top: 5px;
        transition: none;
    }

    .header.shrink .header__logo img {
        display: none;

    }

  .section__txt {
    font-size: 1.6rem;
    padding-top: 20px;
    margin: 0 auto;
  }

  .reserve-tab {
    display: none;

  }

    .reserveBtn {
    position: fixed;
    bottom: 0;
    top: auto;
    right: 0;
    left: 0;
    transform: none;
    margin: 0 auto;
    width: 55%;
    height: 50px;
    border-radius: 20px 20px 0 0;
    background-color: var(--primary-orange);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    z-index: 9999;
    padding: 0;
    letter-spacing: 0.1em;
      max-width: 300px;
  }

  .reserveBtn__icon {
    width: 1em;
    height: auto;
    margin-left: 0.5em;
    transform: translateY(0.2em);
  }


}

@media (max-width: 1110px) and (min-width: 768px) {
  .inner {
    padding-right: 30px;
  }
}

/* Relax */

.section--relax {
  position: relative;
  margin-top: 180px;
}


.relax__list {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 1200px;
  margin: 50px auto;
overflow: visible;
}


@media (max-width: 767px) {

  .section--relax {
    margin-top: 140px;
    
  }

.relax__list {
      flex-direction: column; 
    align-items: center;   
    gap: 30px;
    margin-bottom: 100px;
}

  .relax__img {
    max-width: 80%;       
  }


}


/* アニメーション */
.relax__img {
  width: 100%;
  max-width: 30%;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 2s ease, transform 2s ease;
}



.relax__img.active {
  opacity: 1;
  transform: translateY(0);
}

.relax__img:nth-child(1) { transition-delay: 0s; }
.relax__img:nth-child(2) { transition-delay: 0.5s; }
.relax__img:nth-child(3) { transition-delay: 1s; }

.section--relax {
  overflow: visible;
}
.relax__list {
  overflow: visible;
}


/* space */

/* =========================================
   Our Space セクション全体
========================================= */
.section--space {
  position: relative;
  padding: 200px 0;
  margin-bottom: 200px;
  background-color: #fff;
  z-index: 0;
}

.section--space::before {
  content: "";
  position: absolute;
  top: 5%;
  left: -5%;     
  right: 8%;      
  height: 100%;
  background-color: #F8F1EE;
  border-radius: 80px;
  z-index: -1;    
}

/* =========================================
   レイアウト全体
========================================= */
.parent {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 200px;
}

.div1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 300px;
}

.layout {
  width: 80%;
  height: auto;
  position: relative;
  z-index: 1;
  transform: translateX(-10%);
}

.layout__sp {
  display: none;
}

/* =========================================
   各スペース要素（絶対配置）
========================================= */
.div2, .div3, .div4, .div5, .div6, .div7 {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  z-index: 2; 
}

/* reception（左上） */
.div2 { top: -20%; left: 0%; }

/* toilet（右上） */
.div3 { top: -20%; left: 40%; }

/* toyshelf（右上寄り） */
.div4 { top: 20%; right: 0%; }

/* photospace（右下寄り） */
.div5 { top: 60%; right: 0%; }

/* table（左下） */
.div6 { bottom: -30%; left: 0%; }

/* bench（右下） */
.div7 { bottom: -30%; left: 40%; }

/* =========================================
   共通デザイン
========================================= */
.space__img {
  width: 300px;
  max-width: 90%;
  height: auto;
  border-radius: 12px;
}

.space__name {
  font-size: 2.5rem;
  color: var(--primary-orange);
  font-weight: 500;
}

.space__txt {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #4F4F4F;
}
/* ===============================
   タブレット対応（768〜1079px）
================================= */
@media (min-width: 768px) and (max-width: 1079px) {

  .parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 40px;
    max-width: 900px;
    margin: 0 auto 160px;
  }

  .div2, .div3, .div4, .div5, .div6, .div7 {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .layout {
    display: block;
    width: 85%;
    max-width: 500px;
    margin: 0 auto;
  }

  .layout__sp {
    display: none;
  }

  .space__img {
    max-width: 320px;
    width: 100%;
  }


  .div2 .space__img,
  .div3 .space__img,
  .div4 .space__img,
  .div5 .space__img,
  .div6 .space__img,
  .div7 .space__img,
  .div2 .space__name,
  .div3 .space__name,
  .div4 .space__name,
  .div5 .space__name,
  .div6 .space__name,
  .div7 .space__name,
  .div2 .space__txt,
  .div3 .space__txt,
  .div4 .space__txt,
  .div5 .space__txt,
  .div6 .space__txt,
  .div7 .space__txt {
    order: initial !important;
  }
  
    .space-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 40px;
    max-width: 900px;
    margin: 60px auto 0;
  }

  .space-grid > div {
    position: static !important;
    order: initial !important;
  }

  .layout {
    display: block;
    width: 85%;
    max-width: 500px;
    margin: 0 auto 60px;
  }

  .layout__sp {
    display: none;
  }

  .parent {
    display: block;  
  }

  .space-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px 40px;
    max-width: 900px;
    margin: 60px auto 0;
  }

  .space-grid > div {
    position: static !important;
    order: initial !important;
  }

  .layout {
    display: block;
    width: 85%;
    max-width: 500px;
    margin: 0 auto 60px;
  }

  .layout__sp {
    display: block;
    max-width: 500px;
    width: 100%;
    height: auto;
  }

  .layout {
    display: none;
  }

  .div2 .space__img { order: 1 !important; }
  .div2 .space__name { order: 2 !important; }
  .div2 .space__txt  { order: 3 !important; }

  .div3 .space__img { order: 1 !important; }
  .div3 .space__name { order: 2 !important; }
  .div3 .space__txt  { order: 3 !important; }

  .div1 {
  margin-top: 50px;
}

.section--space {
  padding: 200px 0 0;
}

.section--space::before {
  left: 0%;  
  right: 0%;   
}

.div2, .div3, .div4, .div5, .div6, .div7 {
  gap: 5px;
}

  
}

/* ===============================
   SP対応（縦並び）
================================= */

@media (max-width: 767px) {

  .section--space {
  padding: 0;
  margin-bottom: 0;

}

.section--nearby {
  margin-top: 80px;
}

.div1 {
  margin-top: 50px;
}

  .parent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }

  .div2, .div3, .div4, .div5, .div6, .div7 {
    position: static;
  }

.space__img {
  width: 100%;
  max-width: 316px;
  height: auto;
  width: 350px;
  z-index: 2;
}

.space__name {
  font-size: 2.5rem;
  color: var(--primary-orange);
  font-weight: 500;
}

.space__txt {
  font-size: 1.6rem;
}

.section--space {
  padding: 20px 0;

}

.section--space::before {
  left: 0%;      
  right: 0%;      
  top: -1%;
  height: 100%;
  border-radius: 40px;
}

  .parent {
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 80px; 
    margin: 0 auto 100px;
  }

  .div1,
  .div2,
  .div3,
  .div4,
  .div5,
  .div6,
  .div7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 30px;
  }

  .layout__sp {
    display: block;
    max-width: 300px;
    width: 100%;
    height: auto;
  }

  .layout {
    display: none;
  }

  .space__img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .div2,
  .div3 {
    display: flex;
    flex-direction: column; 
  }

    .div2 .space__img,
  .div3 .space__img {
    order: 1;
  }

  .div2 .space__name,
  .div3 .space__name {
    order: 2;
  }

  .div2 .space__txt,
  .div3 .space__txt {
    order: 3;
  }

  .relax__img {
  max-width: 80%;
}

.div2, .div3, .div4, .div5, .div6, .div7 {
  gap: 5px;
}


}



/* nerby store */

.gakudai__logo {
  max-width: 280px;
}

.nearby__item {
  margin-top: 80px;
  margin-bottom: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nerby__txt {
  font-size: 1.6rem;
  padding-bottom: 30px;
}

.nearby__link {
  font-size: 1.6rem;
}

.gakudai__link {
  font-size: 1.6rem;
  color: #E94A1A;

}

.link {
  display: flex;
  gap: 10px;
}

.underline {
  text-decoration: underline solid #E94A1A 2px;
  text-underline-offset: 4px;
}

  .link__sp {
    display: none;
  }

  .link__pc {
    display: block;
  }


@media (max-width: 767px) {

  .section--nearby {
    margin-bottom: 50px;
  }

  .gakudai__logo {
  max-width: 180px;
  margin: 30px auto 10px;
  }
  
  .nearby__item {
    flex-direction: column;
    margin: 0 10% ;
  }

  .link {
    flex-direction:column ;
  }

  .link__pc {
    display: none;
  }

  .link__sp {
    display: block;
  }
}



/* footer color */
.footer {
  background-color: #F8F1EE;
}

.custom-shape-divider-top-1760021289 .shape-fill {
  fill: #fff;
}