:root {
  --viewport-width: min(100vw, 2000px);
  --b: calc(var(--viewport-width) / 160);
}

/*
Theme Name: Twenty Twenty-one Child
Version: 1.6
Template: twentytwentyone
*/
* {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
}

#kurashibi p {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(1.4rem, 12px);
  font-weight: 500;
  line-height: 3.5;
  letter-spacing: 0.1em;
}
#kurashibi p.rl {
  text-align: start;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
@media screen and (max-width: 1000px) {
  #kurashibi .btn-pc {
    display: none;
  }
}
#kurashibi .btn-sp {
  display: none;
}
@media screen and (max-width: 1000px) {
  #kurashibi .btn-sp {
    display: block;
  }
}
#kurashibi .btn__link--text {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
}
#kurashibi .fixed-footer-cta {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
@media screen and (max-width: 1000px) {
  #kurashibi .fixed-footer-cta {
    left: auto;
    right: 5%;
    transform: translateX(0%);
  }
}
#kurashibi .fixed-footer-cta button {
  font-size: max(1.4rem, 14px);
  line-height: 1;
  padding: max(1.9rem, 15px) max(3.7rem, 22px) max(1.6rem, 15px);
  background-color: #EBEAE9;
  border-radius: 50px;
  margin-bottom: max(3.8rem, 20px);
  transition: 0.3s;
}
@media screen and (max-width: 1000px) {
  #kurashibi .fixed-footer-cta button {
    margin-bottom: max(14.6rem, 56px);
  }
}
#kurashibi .fixed-footer-cta button:hover {
  opacity: 0.5;
}
#kurashibi #hero h2 {
  font-size: max(6rem, 60px);
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 550px) {
  #kurashibi #hero h2 {
    font-size: 40px;
  }
}
#kurashibi #hero p {
  font-size: max(1.5vw, 18px);
}
#kurashibi #intro {
  background: #fff;
}
#kurashibi #intro .intro__wrapper {
  padding-top: max(10rem, 70px);
}
#kurashibi #intro .intro__wrapper p.rl {
  text-align: start;
}
@media screen and (max-width: 550px) {
  #kurashibi #intro .intro__wrapper p.rl {
    text-align: center;
  }
}
#kurashibi #intro .intro__wrapper .intro__text {
  margin-bottom: max(17rem, 100px);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 5rem;
}
#kurashibi #intro .intro__wrapper .intro__text h3, #kurashibi #intro .intro__wrapper .intro__text p {
  writing-mode: vertical-rl;
  text-align: start;
}
#kurashibi #intro .intro__wrapper .intro__text h3 {
  font-size: max(2.2rem, 18px);
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
}
#kurashibi #intro .intro__wrapper .intro__content {
  display: flex;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content {
    flex-direction: column !important;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content1 {
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content1 {
    width: 100%;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content1 .imageBox {
  width: 67%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content1 .imageBox {
    width: 95%;
    margin-right: 5%;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content1 .imageBox img {
  transform: translateX(-19%);
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content1 .imageBox img {
    transform: translateX(0%);
  }
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content1 .textBox {
    margin: max(15rem, 50px) 0;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content2 {
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  margin-top: -2%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content2 {
    width: 100%;
    margin-top: 0;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content2 .imageBox {
  width: 35%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content2 .imageBox {
    width: 65%;
    margin-right: 5%;
    margin-left: 30%;
  }
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content2 .textBox {
    margin: max(15rem, 50px) 0;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content3 {
  gap: 5%;
  align-items: center;
}
#kurashibi #intro .intro__wrapper .intro__content.content3 .imageBox {
  width: 35%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content3 .imageBox {
    width: 70%;
  }
}
@media screen and (max-width: 550px) {
  #kurashibi #intro .intro__wrapper .intro__content.content3 .imageBox {
    width: 100%;
  }
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content3 .textBox {
    margin: max(15rem, 50px) 0;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content4 {
  background: url("../images/kurashibi-image4.webp");
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: relative;
  margin-top: max(21rem, 100px);
}
#kurashibi #intro .intro__wrapper .intro__content.content4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, from(gray), to(rgba(128, 128, 128, 0)));
  background: linear-gradient(to right, gray, rgba(128, 128, 128, 0));
  mix-blend-mode: multiply;
}
#kurashibi #intro .intro__wrapper .intro__content.content4 .textBox {
  position: relative;
}
#kurashibi #intro .intro__wrapper .intro__content.content4 .textBox .rl {
  color: #FFFFFF;
  margin-top: 23%;
}
#kurashibi #intro .intro__wrapper .intro__content.content5 {
  gap: 5%;
  align-items: center;
  flex-direction: row-reverse;
  margin-top: max(15.9rem, 100px);
}
#kurashibi #intro .intro__wrapper .intro__content.content5 .imageBox {
  width: 28%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content5 .imageBox {
    width: 60%;
    margin-left: 40%;
  }
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content5 .textBox {
    margin: max(15rem, 50px) 0;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content6 {
  gap: 6%;
  align-items: center;
  margin-top: max(9rem, 50px);
}
#kurashibi #intro .intro__wrapper .intro__content.content6 .imageBox {
  width: 58%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content6 .imageBox {
    width: 80%;
    margin-right: 20%;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content6 .imageBox img {
  transform: translateX(-21.5%);
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content6 .imageBox img {
    transform: translateX(0%);
  }
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content6 .textBox {
    margin: max(15rem, 50px) 0;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content7 {
  align-items: end;
  justify-content: space-between;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content7 {
    align-items: center;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content7 .imageBox.image1 {
  width: 25%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content7 .imageBox.image1 {
    width: 40%;
    margin-left: 60%;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content7 .imageBox.image1 img {
  aspect-ratio: 419/325;
}
#kurashibi #intro .intro__wrapper .intro__content.content7 .imageBox.image2 {
  width: 38%;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content7 .imageBox.image2 {
    width: 65%;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content7 .imageBox.image2 img {
  aspect-ratio: 45/68;
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content7 .textBox {
    margin: max(15rem, 50px) 0;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content8 {
  flex-direction: column;
  align-items: center;
  margin-top: max(21.2rem, 100px);
  gap: max(7.85rem, 25px);
}
@media screen and (max-width: 1000px) {
  #kurashibi #intro .intro__wrapper .intro__content.content8 {
    width: 100%;
  }
}
#kurashibi #intro .intro__wrapper .intro__content.content8 .lineBox .line {
  position: relative;
  width: max(0.1rem, 1px);
  height: max(23rem, 100px);
  background: rgba(59, 49, 40, 0.15);
}
#kurashibi #intro .intro__wrapper .intro__content.content8 .lineBox .line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.4s ease-in-out;
}
#kurashibi #intro .intro__wrapper .intro__content.content8 .lineBox .line.active::before {
  transform: scaleY(0);
}
#kurashibi #floor {
  background: #fff;
}
#kurashibi #floor .floor__wrapper {
  padding-top: max(6rem, 40px);
  padding-bottom: max(16rem, 100px);
}
#kurashibi #floor .floor__wrapper h3 {
  text-align: center;
  margin-bottom: max(7rem, 50px);
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(2.2rem, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
}
#kurashibi #floor .floor__wrapper .floor__content {
  display: flex;
  gap: max(4.4rem, 20px);
}
@media screen and (max-width: 1000px) {
  #kurashibi #floor .floor__wrapper .floor__content {
    flex-direction: column;
  }
  #kurashibi #floor .floor__wrapper .floor__content .imageBox:nth-of-type(2) {
    width: 40%;
    margin: 0 auto;
  }
}
#kurashibi #venue {
  background: #fff;
}
#kurashibi #venue .venue__wrapper {
  padding-top: max(6rem, 40px);
  padding-bottom: max(16rem, 100px);
  border-bottom: max(0.1rem, 1px) solid rgba(59, 49, 40, 0.15);
}
#kurashibi #venue .venue__wrapper h3 {
  text-align: center;
  margin-bottom: max(7rem, 50px);
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(2.2rem, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
}
#kurashibi #venue .venue__wrapper .venue__content--map iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 8/3;
}
@media screen and (max-width: 1000px) {
  #kurashibi #venue .venue__wrapper .venue__content--map iframe {
    aspect-ratio: 2/1;
  }
}
@media screen and (max-width: ) {
  #kurashibi #venue .venue__wrapper .venue__content--map iframe {
    aspect-ratio: 5/4;
  }
}
#kurashibi #venue .venue__wrapper .floor__content {
  display: flex;
  gap: max(4.4rem, 20px);
}
@media screen and (max-width: 1000px) {
  #kurashibi #venue .venue__wrapper .floor__content {
    flex-direction: column;
  }
}
#kurashibi #venue .venue__wrapper .btn {
  text-align: center;
  margin-top: max(4.8rem, 20px);
}
#kurashibi #contact {
  background: #fff;
}
#kurashibi #contact .contact__wrapper {
  padding-top: max(16rem, 100px);
  padding-bottom: max(20rem, 100px);
}
#kurashibi #contact .contact__wrapper .contact__content {
  display: flex;
  gap: max(9.5rem, 15px);
}
@media screen and (max-width: 1000px) {
  #kurashibi #contact .contact__wrapper .contact__content {
    flex-direction: column;
  }
}
#kurashibi #contact .contact__wrapper .contact__content .textBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#kurashibi #contact .contact__wrapper .contact__content .textBox__inner h3 {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(2.2rem, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  margin-bottom: max(2rem, 5px);
}
#kurashibi #contact .contact__wrapper .contact__content .textBox .btn {
  text-align: right;
}
#kurashibi #contact .contact__wrapper .contact__content .mapBox {
  display: flex;
  gap: max(2rem, 15px);
}
@media screen and (max-width: 550px) {
  #kurashibi #contact .contact__wrapper .contact__content .mapBox {
    flex-direction: column;
    gap: 40px;
  }
}
#kurashibi #contact .contact__wrapper .contact__content .mapBox__inner {
  width: max(37.5rem, 240px);
}
@media screen and (max-width: 1000px) {
  #kurashibi #contact .contact__wrapper .contact__content .mapBox__inner {
    width: 100%;
  }
}
#kurashibi #contact .contact__wrapper .contact__content .mapBox__inner iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 38/25;
}
#kurashibi #contact .contact__wrapper .contact__content .mapBox__inner .mapBox__title {
  display: flex;
  align-items: center;
  gap: max(1rem, 10px);
  margin-top: max(2.5rem, 20px);
  margin-bottom: max(2.5rem, 20px);
}
#kurashibi #contact .contact__wrapper .contact__content .mapBox__inner .mapBox__title--icon {
  flex-shrink: 0;
  width: max(1rem, 10px);
}
#kurashibi #contact .contact__wrapper .contact__content .mapBox__inner .mapBox__title--text {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(1.4rem, 12px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}
#kurashibi #contact .contact__wrapper .contact__content .mapBox__inner address {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(1.4rem, 12px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
}
#kurashibi #contact .contact__wrapper .btn-sp {
  margin-top: max(10rem, 50px);
  text-align: right;
}
#kurashibi section#common-section .section-title .section-title__sub {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(1.8rem, 16px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
#kurashibi section#common-section p {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-size: max(1.4rem, 12px);
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: 0.1em;
}