:root {
  --f13:clamp(0.75rem, 0.728rem + 0.099vw, 0.813rem);
  --f14:clamp(0.813rem, 0.790rem + 0.099vw, 0.875rem);
  --f16:clamp(0.875rem, 0.830rem + 0.199vw, 1rem);
  --f17:clamp(0.938rem, 0.886rem + 0.235vw, 1.063rem);
  --f20:clamp(1.063rem, 0.995rem + 0.298vw, 1.25rem);
  --f22:clamp(1.063rem, 1.1rem + 0.497vw, 1.375rem);
  --f24:clamp(1.313rem, 1.245rem + 0.298vw, 1.5rem);
  --f28:clamp(1.35rem, 1.311rem + 0.398vw, 1.75rem);
  --f32:clamp(1.4rem, 1.121rem + 0.795vw, 2rem);
  --f36:clamp(1.5rem, 0.75rem + 1.25vw, 2.25rem);
  --f40:clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem);
  --f42:clamp(1.5rem, 1.097rem + 1.789vw, 2.625rem);
  --f48:clamp(2rem, 1.642rem + 1.59vw, 3rem);
  --f54:clamp(2.25rem, 1.847rem + 1.789vw, 3.375rem);
  --f64:clamp(2.625rem, 2.133rem + 2.187vw, 4rem);
  --f72:clamp(2.7rem, 2.263rem + 2.386vw, 4.5rem);
  --f106:clamp(3rem, 1.703rem + 5.765vw, 6.625rem);
  --f160:clamp(3.25rem, 0.873rem + 10.141vw, 10rem);
}

@font-face {
  src: url("../font/NotoSansJP-Light.woff") format("woff");
  font-family: "Noto Sans JP";
  font-weight: 300;
  font-display: swap;
}
@font-face {
  src: url("../font/NotoSansJP-Regular.woff") format("woff");
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url("../font/NotoSansJP-Medium.woff.woff") format("woff");
  font-family: "Noto Sans JP";
  font-weight: 500;
  font-display: swap;
}
@font-face {
  src: url("../font/NotoSansJP-Bold.woff") format("woff");
  font-family: "Noto Sans JP";
  font-weight: 600;
  font-display: swap;
}
@font-face {
  src: url("../font/NotoSerifJP-Regular.woff") format("woff");
  font-family: "Noto Serif JP";
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url("../font/NotoSansJP-Regular.woff") format("woff");
  font-family: "Roboto";
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url("../font/Roboto-Medium.woff") format("woff");
  font-family: "Roboto";
  font-weight: 500;
  font-display: swap;
}
.key-wrap {
  position: relative;
  z-index: 9999;
}
.key-wrap #key-visual {
  position: relative;
  width: 95%;
  margin: 80px 0 0 auto;
}
@media screen and (max-width: 1024px) {
  .key-wrap #key-visual {
    margin: 70px 0 0 auto;
  }
}
@media screen and (max-width: 480px) {
  .key-wrap #key-visual {
    margin: 60px 0 0 auto;
  }
}
.key-wrap #key-visual .key-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .key-wrap #key-visual .key-inner {
    border-radius: 0;
    width: 100%;
  }
}
.key-wrap #key-visual .key-inner .key-txt {
  position: absolute;
  bottom: 4vw;
  left: 4vw;
  z-index: 1;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.key-wrap #key-visual .key-inner .key-txt h1 {
  font-family: "Noto Serif JP";
  font-size: var(--f42);
  color: #fff;
  letter-spacing: 0.2em;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}
@media screen and (max-width: 480px) {
  .key-wrap #key-visual .key-inner .key-txt h1 {
    font-size: var(--f32);
    letter-spacing: 0.1em;
    margin: 0.3em 0 0.5em 0;
  }
}
.key-wrap #key-visual .key-inner .key-txt .subtitle {
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--f20);
  color: #fff;
  font-weight: 400;
  background: #B06452;
  padding: 0.1em 1em;
  border-radius: 50px;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}
@media screen and (max-width: 768px) {
  .key-wrap #key-visual .key-inner .key-txt .subtitle {
    font-size: var(--f16);
  }
}
@media screen and (max-width: 480px) {
  .key-wrap #key-visual .key-inner .key-txt .subtitle {
    padding: 0.1em 0.7em;
    font-size: var(--f14);
    letter-spacing: 0.04rem;
  }
}
.key-wrap #key-visual .key-inner .key-txt .subtxt {
  color: #fff;
  font-weight: 400;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .key-wrap #key-visual .key-inner .key-txt .subtxt {
    font-size: var(--f16);
  }
}
@media screen and (max-width: 480px) {
  .key-wrap #key-visual .key-inner .key-txt .subtxt {
    font-size: var(--f14);
  }
}
.key-wrap #key-visual .slide {
  position: relative;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100 - 80px);
}
@media screen and (max-width: 1024px) {
  .key-wrap #key-visual .slide {
    height: calc(var(--vh, 1vh) * 100 - 70px);
  }
}
@media screen and (max-width: 480px) {
  .key-wrap #key-visual .slide {
    height: calc(var(--vh, 1vh) * 100 - 60px);
  }
}
@media screen and (max-width: 768px) {
  .key-wrap #key-visual .slide:nth-child(1) img {
    -o-object-position: 46%;
       object-position: 46%;
  }
}
@media screen and (max-width: 768px) {
  .key-wrap #key-visual .slide:nth-child(2) img {
    -o-object-position: 52%;
       object-position: 52%;
  }
}
@media screen and (max-width: 768px) {
  .key-wrap #key-visual .slide:nth-child(3) img {
    -o-object-position: 64%;
       object-position: 64%;
  }
}
@media screen and (max-width: 768px) {
  .key-wrap #key-visual .slide:nth-child(4) img {
    -o-object-position: 98%;
       object-position: 98%;
  }
}
.key-wrap #key-visual .slide .top-inner {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100 - 80px);
  width: 100%;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .key-wrap #key-visual .slide .top-inner {
    height: calc(var(--vh, 1vh) * 100 - 70px);
  }
}
@media screen and (max-width: 480px) {
  .key-wrap #key-visual .slide .top-inner {
    height: calc(var(--vh, 1vh) * 100 - 60px);
  }
}
.key-wrap #key-visual .slide .top-inner img {
  border-radius: 140px 0 0 0;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 1024px) {
  .key-wrap #key-visual .slide .top-inner img {
    border-radius: 80px 0 0 0;
  }
}
@media screen and (max-width: 480px) {
  .key-wrap #key-visual .slide .top-inner img {
    border-radius: 40px 0 0 0;
  }
}

#top-container #concept {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 6em 0 6em auto;
}
@media screen and (max-width: 1024px) {
  #top-container #concept {
    padding-top: 10em;
  }
}
@media screen and (max-width: 768px) {
  #top-container #concept {
    flex-direction: column;
    width: 90%;
    margin: 3em auto;
  }
}
@media screen and (max-width: 768px) {
  #top-container #concept {
    padding-top: 6em;
  }
}
#top-container #concept .concept-txt {
  width: 45%;
  padding: 2em 0;
}
@media screen and (max-width: 1024px) {
  #top-container #concept .concept-txt {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #top-container #concept .concept-txt {
    width: 100%;
    padding: 0.5em 0;
  }
}
#top-container #concept .concept-txt .page-title-left {
  position: relative;
}
#top-container #concept .concept-txt .page-title-left::before {
  content: "";
  background: url(../images/concept-img.svg) no-repeat;
  background-size: contain;
  width: 370px;
  height: 280px;
  position: absolute;
  bottom: 0;
  left: -27%;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  #top-container #concept .concept-txt .page-title-left::before {
    width: 270px;
    height: 180px;
  }
}
@media screen and (max-width: 768px) {
  #top-container #concept .concept-txt .page-title-left::before {
    width: 220px;
    height: 130px;
    left: -70px;
  }
}
#top-container #concept .concept-txt .sub-title {
  margin: 0.7em 0;
}
@media screen and (max-width: 1500px) {
  #top-container #concept .concept-txt .sub-title {
    margin: 0.5em 0;
  }
}
@media screen and (max-width: 1500px) {
  #top-container #concept .concept-txt p {
    font-size: var(--f17);
  }
}
@media screen and (max-width: 1500px) {
  #top-container #concept .concept-txt p .sp {
    display: none;
  }
}
#top-container #concept .concept-txt p span {
  color: #B06452;
  font-size: var(--f24);
  font-weight: 400;
}
@media screen and (max-width: 1500px) {
  #top-container #concept .concept-txt p span {
    font-size: var(--f20);
  }
}
#top-container #concept figure {
  width: 50%;
  height: 100vh;
  align-self: flex-start;
}
@media screen and (max-width: 1024px) {
  #top-container #concept figure {
    width: 45%;
  }
}
@media screen and (max-width: 768px) {
  #top-container #concept figure {
    width: 100%;
    margin-top: 1em;
    height: -moz-fit-content;
    height: fit-content;
  }
}
@media screen and (max-width: 480px) {
  #top-container #concept figure {
    width: 100%;
    margin-top: 0;
  }
}
#top-container #concept figure img {
  border-radius: 160px 0 0 160px;
  -o-object-position: left;
     object-position: left;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100vh;
}
@media screen and (max-width: 1024px) {
  #top-container #concept figure img {
    border-radius: 80px 0 0 80px;
  }
}
@media screen and (max-width: 768px) {
  #top-container #concept figure img {
    width: 100%;
    height: 360px;
    -o-object-position: top;
       object-position: top;
    border-radius: 60px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #concept figure img {
    width: 100%;
    height: 280px;
    -o-object-position: top;
       object-position: top;
    border-radius: 30px;
  }
}
#top-container .splide {
  position: relative;
}
#top-container .splide::before {
  content: "";
  background: url(../images/concept-img2.svg) no-repeat;
  background-size: contain;
  width: 234px;
  height: 348px;
  position: absolute;
  left: 0;
  top: -180px;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  #top-container .splide::before {
    width: 204px;
    height: 318px;
    top: -150px;
  }
}
@media screen and (max-width: 480px) {
  #top-container .splide::before {
    width: 164px;
    height: 278px;
    top: -110px;
  }
}
#top-container #about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 6em auto 6em 0;
}
@media screen and (max-width: 768px) {
  #top-container #about {
    flex-direction: column-reverse;
    width: 90%;
    margin: 3em auto;
  }
}
@media screen and (max-width: 480px) {
  #top-container #about {
    padding-top: 7em;
  }
}
#top-container #about .about-txt {
  width: 45%;
  padding: 2em 0;
}
@media screen and (max-width: 1024px) {
  #top-container #about .about-txt {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  #top-container #about .about-txt {
    width: 100%;
    padding: 0.5em 0;
  }
}
#top-container #about .about-txt .page-title-left {
  position: relative;
}
#top-container #about .about-txt .page-title-left span {
  line-height: 0.7;
}
#top-container #about .about-txt .page-title-left::before {
  content: "";
  background: url(../images/about-img.svg) no-repeat;
  background-size: contain;
  width: 250px;
  height: 225px;
  position: absolute;
  bottom: -1em;
  left: -12%;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  #top-container #about .about-txt .page-title-left::before {
    bottom: -0.5em;
    width: 220px;
    height: 130px;
  }
}
@media screen and (max-width: 768px) {
  #top-container #about .about-txt .page-title-left::before {
    width: 200px;
    height: 110px;
    left: -60px;
  }
}
#top-container #about .about-txt .sub-title {
  margin: 0.7em 0 0 0;
}
@media screen and (max-width: 1500px) {
  #top-container #about .about-txt .sub-title {
    margin: 0.5em 0 0 0;
  }
}
@media screen and (max-width: 1500px) {
  #top-container #about .about-txt p {
    font-size: var(--f17);
  }
}
@media screen and (max-width: 1500px) {
  #top-container #about .about-txt p .sp {
    display: none;
  }
}
#top-container #about .about-txt p span {
  color: #B06452;
  font-size: var(--f24);
  font-weight: 400;
}
@media screen and (max-width: 1500px) {
  #top-container #about .about-txt p span {
    font-size: var(--f20);
  }
}
#top-container #about figure {
  width: 50%;
  height: 100vh;
  align-self: flex-start;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media screen and (max-width: 1024px) {
  #top-container #about figure {
    width: 45%;
  }
}
@media screen and (max-width: 768px) {
  #top-container #about figure {
    width: 100%;
    margin-top: 1em;
    height: auto;
  }
}
@media screen and (max-width: 480px) {
  #top-container #about figure {
    width: 100%;
    margin-top: 0.5em;
  }
}
#top-container #about figure img {
  -o-object-position: left;
     object-position: left;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  #top-container #about figure img {
    height: 300px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #about figure img {
    height: 200px;
  }
}
@media screen and (max-width: 768px) {
  #top-container #about figure img:nth-child(1) {
    border-radius: 60px 0 0 0;
  }
}
@media screen and (max-width: 480px) {
  #top-container #about figure img:nth-child(1) {
    border-radius: 30px 0 0 0;
  }
}
#top-container #about figure img:nth-child(2) {
  border-radius: 0 160px 0 0;
}
@media screen and (max-width: 1024px) {
  #top-container #about figure img:nth-child(2) {
    border-radius: 0 80px 0 0;
  }
}
@media screen and (max-width: 768px) {
  #top-container #about figure img:nth-child(2) {
    border-radius: 0 60px 0 0;
  }
}
@media screen and (max-width: 480px) {
  #top-container #about figure img:nth-child(2) {
    border-radius: 0 30px 0 0;
  }
}
@media screen and (max-width: 768px) {
  #top-container #about figure img:nth-child(3) {
    border-radius: 0 0 0 60px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #about figure img:nth-child(3) {
    border-radius: 0 0 0 30px;
  }
}
#top-container #about figure img:nth-child(4) {
  border-radius: 0 0 160px 0;
}
@media screen and (max-width: 1024px) {
  #top-container #about figure img:nth-child(4) {
    border-radius: 0 0 80px 0;
  }
}
@media screen and (max-width: 768px) {
  #top-container #about figure img:nth-child(4) {
    border-radius: 0 0 60px 0;
  }
}
@media screen and (max-width: 480px) {
  #top-container #about figure img:nth-child(4) {
    border-radius: 0 0 30px 0;
  }
}
#top-container #menu {
  max-width: 1500px;
  width: 90%;
  margin: 12em auto 0 auto;
}
@media screen and (max-width: 1240px) {
  #top-container #menu {
    margin: 8em auto 0 auto;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu {
    margin: 6em auto 0 auto;
  }
}
#top-container #menu .page-title-center {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
#top-container #menu .page-title-center::before {
  content: "";
  background: url(../images/menu-img.svg) no-repeat;
  background-size: contain;
  width: 262px;
  height: 248px;
  position: absolute;
  bottom: -1em;
  right: -140px;
  z-index: -1;
}
@media screen and (max-width: 1500px) {
  #top-container #menu .page-title-center::before {
    width: 182px;
    height: 168px;
    right: -100px;
  }
}
@media screen and (max-width: 768px) {
  #top-container #menu .page-title-center::before {
    width: 152px;
    height: 128px;
    right: -80px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .page-title-center::before {
    width: 132px;
    height: 118px;
    right: -70px;
  }
}
#top-container #menu .page-title-center span {
  line-height: 0.7em;
}
#top-container #menu .menu-list {
  display: grid;
  gap: 2em;
  margin-top: 2em;
}
@media screen and (max-width: 768px) {
  #top-container #menu .menu-list {
    margin-top: 1em;
  }
}
#top-container #menu .menu-list .menu-box {
  background: #fff;
  border-radius: 260px;
  padding: 4em 6em;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box {
    border-radius: 120px;
    padding: 2em 3em;
  }
}
@media screen and (max-width: 768px) {
  #top-container #menu .menu-list .menu-box {
    border-radius: 60px;
    padding: 2em 3em;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box {
    border-radius: 24px;
    padding: 1em;
  }
}
#top-container #menu .menu-list .menu-box h3 {
  font-size: var(--f36);
  color: #B06452;
  font-family: "Noto Serif JP";
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
  border-bottom: 1px solid #D4D4D4;
  position: relative;
  padding-left: 76px;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box h3 {
    font-size: var(--f32);
    padding-left: 60px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box h3 {
    font-size: var(--f28);
    padding-left: 48px;
    line-height: 1.1;
  }
}
#top-container #menu .menu-list .menu-box h3::before {
  content: "";
  background: url(../images/menu-time.svg) no-repeat;
  background-size: contain;
  width: 62px;
  height: 62px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.5em;
  margin: auto;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box h3::before {
    width: 50px;
    height: 50px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box h3::before {
    width: 40px;
    height: 40px;
  }
}
#top-container #menu .menu-list .menu-box .menu-contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box .menu-contents {
    gap: 1em;
  }
}
@media screen and (max-width: 768px) {
  #top-container #menu .menu-list .menu-box .menu-contents {
    grid-template-columns: 1fr;
    gap: 3em;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box .menu-contents {
    gap: 2em;
  }
}
#top-container #menu .menu-list .menu-box .menu-contents figure {
  width: 100%;
}
#top-container #menu .menu-list .menu-box .menu-contents figure img {
  width: 100%;
}
#top-container #menu .menu-list .menu-box .menu-contents .menu-subtitle {
  font-size: var(--f32);
  color: #B06452;
  font-family: "Noto Serif JP";
  margin-top: 0.3em;
}
#top-container #menu .menu-list .menu-box .menu-contents .detail {
  position: relative;
  background: #FBEFF0;
  padding: 1.5em 1em 1em 1em;
  margin-top: 2em;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box .menu-contents .detail {
    padding: 1em 1em 1em 1em;
    margin-top: 1.5em;
  }
}
#top-container #menu .menu-list .menu-box .menu-contents .detail h4 {
  background: #B06452;
  font-feature-settings: "palt";
  font-family: "Noto Serif JP";
  color: #fff;
  text-align: center;
  border-radius: 50px;
  padding: 0.2em 2em;
  position: absolute;
  top: -1em;
  width: -moz-fit-content;
  width: fit-content;
  left: 0;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box .menu-contents .detail h4 {
    font-size: var(--f17);
    padding: 0.2em 0.8em;
  }
}
#top-container #menu .menu-list .menu-box .menu-contents .detail p {
  font-size: var(--f17);
  color: #606060;
  line-height: 1.4;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box .menu-contents .detail p {
    font-size: var(--f16);
  }
}
#top-container #menu .menu-list .menu-box .menu-contents dl {
  overflow: hidden;
}
#top-container #menu .menu-list .menu-box .menu-contents dl div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#top-container #menu .menu-list .menu-box .menu-contents dl dt {
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--f32);
  font-family: "Noto Serif JP";
  font-weight: 400;
  background: #fff;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  #top-container #menu .menu-list .menu-box .menu-contents dl dt {
    font-size: var(--f24);
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box .menu-contents dl dt {
    font-size: var(--f20);
  }
}
#top-container #menu .menu-list .menu-box .menu-contents dl dd {
  width: -moz-fit-content;
  width: fit-content;
  background: #fff;
  font-size: var(--f28);
  font-family: "Roboto";
  font-weight: 400;
  font-feature-settings: "palt";
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  #top-container #menu .menu-list .menu-box .menu-contents dl dd {
    font-size: var(--f24);
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box .menu-contents dl dd {
    font-size: var(--f20);
  }
}
#top-container #menu .menu-list .menu-box .menu-contents dl dd::before {
  content: "";
  width: 100vw;
  height: 1px;
  position: absolute;
  background-image: linear-gradient(to right, rgb(101, 97, 114), rgb(101, 97, 114) 1px, transparent 3px, transparent 6px);
  background-size: 8px 1px;
  background-position: bottom;
  background-repeat: repeat-x;
  top: 0;
  bottom: 0;
  right: 205px;
  margin: auto;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  #top-container #menu .menu-list .menu-box .menu-contents dl dd::before {
    right: 160px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box .menu-contents dl dd::before {
    right: 130px;
  }
}
#top-container #menu .menu-list .menu-box .menu-contents dl dd span {
  font-size: var(--f17);
}
@media screen and (max-width: 1024px) {
  #top-container #menu .menu-list .menu-box .menu-contents dl dd span {
    font-size: var(--f14);
  }
}
@media screen and (max-width: 768px) {
  #top-container #menu .menu-list .menu-box:nth-last-child(-n+2) .menu-contents {
    gap: 1em;
  }
}
#top-container #menu .menu-list .menu-box:last-child {
  position: relative;
}
#top-container #menu .menu-list .menu-box:last-child::after {
  content: "";
  background: url(../images/menu-img2.svg);
  background-size: contain;
  width: 218px;
  height: 238px;
  position: absolute;
  right: -20px;
  bottom: -80px;
  z-index: -1;
}
@media screen and (max-width: 1240px) {
  #top-container #menu .menu-list .menu-box:last-child::after {
    bottom: -110px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .menu-list .menu-box:last-child::after {
    width: 118px;
    height: 138px;
    bottom: -68px;
  }
}
#top-container #menu .bnr-line {
  max-width: 690px;
  width: 90%;
  display: block;
  margin: 5em auto 0 auto;
}
@media screen and (max-width: 768px) {
  #top-container #menu .bnr-line {
    margin: 3em auto 0 auto;
  }
}
@media screen and (max-width: 480px) {
  #top-container #menu .bnr-line {
    width: 100%;
    margin: 2em auto 0 auto;
  }
}
#top-container #menu .bnr-line:hover {
  opacity: 0.8;
}
#top-container #menu .bnr-line img {
  height: -moz-fit-content;
  height: fit-content;
}
#top-container #message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 6em 0 6em auto;
}
@media screen and (max-width: 768px) {
  #top-container #message {
    flex-direction: column;
    width: 90%;
    margin: 3em auto;
  }
}
#top-container #message .message-txt {
  width: 50%;
  padding: 2em 0;
}
@media screen and (max-width: 768px) {
  #top-container #message .message-txt {
    width: 100%;
    padding: 0.5em 0;
  }
}
#top-container #message .message-txt .page-title-left {
  position: relative;
}
#top-container #message .message-txt .page-title-left::before {
  content: "";
  background: url(../images/message-img.svg) no-repeat;
  background-size: contain;
  width: 218px;
  height: 205px;
  position: absolute;
  bottom: 0;
  left: 360px;
  z-index: -1;
}
@media screen and (max-width: 1500px) {
  #top-container #message .message-txt .page-title-left::before {
    left: 34%;
    width: 188px;
    height: 175px;
  }
}
@media screen and (max-width: 1024px) {
  #top-container #message .message-txt .page-title-left::before {
    width: 155px;
    height: 145px;
    left: 40%;
  }
}
@media screen and (max-width: 768px) {
  #top-container #message .message-txt .page-title-left::before {
    width: 125px;
    height: 115px;
    left: -50px;
  }
}
#top-container #message .message-txt .sub-title {
  margin: 0.7em 0 0.3em 0;
}
@media screen and (max-width: 1500px) {
  #top-container #message .message-txt .sub-title {
    margin: 0.5em 0 0.3em 0;
  }
}
@media screen and (max-width: 1500px) {
  #top-container #message .message-txt p {
    font-size: var(--f17);
  }
}
@media screen and (max-width: 1500px) {
  #top-container #message .message-txt p .sp {
    display: none;
  }
}
#top-container #message .message-txt .name {
  font-family: "Noto Serif JP";
  font-size: var(--f20);
  line-height: 1;
  text-align: right;
  margin-top: 2em;
}
@media screen and (max-width: 480px) {
  #top-container #message .message-txt .name {
    font-size: var(--f17);
    margin-top: 1em;
  }
}
#top-container #message .message-txt .name span {
  font-size: var(--f32);
  line-height: 1.2;
}
@media screen and (max-width: 480px) {
  #top-container #message .message-txt .name span {
    font-size: var(--f24);
  }
}
#top-container #message figure {
  width: 45%;
  height: 100vh;
  align-self: flex-start;
}
@media screen and (max-width: 768px) {
  #top-container #message figure {
    width: 100%;
    margin-top: 1em;
    height: -moz-fit-content;
    height: fit-content;
  }
}
@media screen and (max-width: 480px) {
  #top-container #message figure {
    width: 100%;
  }
}
#top-container #message figure img {
  border-radius: 160px 0 0 160px;
  -o-object-position: right;
     object-position: right;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100vh;
}
@media screen and (max-width: 1024px) {
  #top-container #message figure img {
    border-radius: 80px 0 0 80px;
  }
}
@media screen and (max-width: 768px) {
  #top-container #message figure img {
    width: 100%;
    height: 360px;
    -o-object-position: top;
       object-position: top;
    border-radius: 60px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #message figure img {
    width: 100%;
    height: 280px;
    -o-object-position: top;
       object-position: top;
    border-radius: 30px;
  }
}
#top-container #reserve {
  background: linear-gradient(90deg, rgb(207, 122, 90), rgb(149, 90, 76));
}
@media screen and (max-width: 768px) {
  #top-container #reserve {
    margin-top: 7em;
  }
}
@media screen and (max-width: 480px) {
  #top-container #reserve {
    margin-top: 5em;
  }
}
#top-container #reserve .reserve-wrap {
  background: url(../images/reserve-bg.svg) no-repeat center;
  background-size: cover;
  padding: 5em;
}
@media screen and (max-width: 768px) {
  #top-container #reserve .reserve-wrap {
    padding: 3em;
  }
}
@media screen and (max-width: 480px) {
  #top-container #reserve .reserve-wrap {
    padding: 2.5em 0.5em;
  }
}
#top-container #reserve .page-title-center {
  color: #fff;
  line-height: 1.2;
}
#top-container #reserve .page-title-center span {
  color: #FBCD43;
  line-height: 1.2;
}
#top-container #reserve p {
  text-align: center;
  color: #fff;
  margin: 2em 0 1em 0;
}
@media screen and (max-width: 768px) {
  #top-container #reserve p {
    margin: 1em 0;
    font-size: var(--f16);
  }
}
#top-container #reserve .bnr-line {
  height: -moz-fit-content;
  height: fit-content;
  display: block;
  max-width: 880px;
  width: 90%;
  margin: 0 auto 1em auto;
}
#top-container #reserve .bnr-line img {
  height: -moz-fit-content;
  height: fit-content;
}
#top-container #reserve .pay {
  max-width: 880px;
  width: 90%;
  margin: 0 auto;
  border: 1px solid #E6D3D4;
  padding: 1em 0 0.5em 0;
  background: #9F5A48;
}
@media screen and (max-width: 480px) {
  #top-container #reserve .pay {
    padding: 0.5em 0 0.3em 0;
  }
}
#top-container #reserve .pay h3 {
  font-size: var(--f28);
  font-weight: 500;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 480px) {
  #top-container #reserve .pay h3 {
    font-size: var(--f20);
  }
}
#top-container #reserve .pay p {
  font-size: var(--f17);
  margin-top: 0.5em;
}
@media screen and (max-width: 480px) {
  #top-container #reserve .pay p {
    font-size: var(--f16);
    margin-top: 0.3em;
    margin-bottom: 0;
  }
}
#top-container #access {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  #top-container #access {
    flex-direction: column;
  }
}
#top-container #access .page-title-left {
  position: relative;
  z-index: -1;
  line-height: 1;
}
#top-container #access .page-title-left::before {
  content: "";
  background: url(../images/access-img.svg) no-repeat;
  background-size: contain;
  width: 223px;
  height: 170px;
  position: absolute;
  bottom: -1em;
  left: -80px;
  z-index: -1;
}
@media screen and (max-width: 1500px) {
  #top-container #access .page-title-left::before {
    width: 193px;
    height: 140px;
  }
}
@media screen and (max-width: 1024px) {
  #top-container #access .page-title-left::before {
    left: -50px;
    width: 163px;
    height: 110px;
  }
}
#top-container #access .page-title-left span {
  line-height: 1;
}
#top-container #access .access-txt, #top-container #access iframe {
  width: 50%;
}
@media screen and (max-width: 768px) {
  #top-container #access .access-txt, #top-container #access iframe {
    width: 100%;
  }
}
#top-container #access .access-txt {
  background: #fff;
  padding: 3em 5em;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 1240px) {
  #top-container #access .access-txt {
    padding: 4em 3em;
  }
}
@media screen and (max-width: 1024px) {
  #top-container #access .access-txt {
    padding: 4em 2em 3em 2em;
  }
}
#top-container #access .access-txt dl {
  margin-top: 1em;
}
#top-container #access .access-txt dl .info {
  border-bottom: 1px solid #D4D4D4;
  padding: 1em 0;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  #top-container #access .access-txt dl .info {
    flex-direction: column;
    padding: 0.5em 0;
  }
}
#top-container #access .access-txt dl .info:first-child {
  border-top: 1px solid #D4D4D4;
}
#top-container #access .access-txt dl .info dt, #top-container #access .access-txt dl .info dd {
  font-size: var(--f20);
  font-feature-settings: "palt";
}
@media screen and (max-width: 1240px) {
  #top-container #access .access-txt dl .info dt, #top-container #access .access-txt dl .info dd {
    font-size: var(--f17);
  }
}
#top-container #access .access-txt dl .info dt {
  width: 120px;
}
@media screen and (max-width: 1024px) {
  #top-container #access .access-txt dl .info dt {
    width: 100px;
  }
}
@media screen and (max-width: 480px) {
  #top-container #access .access-txt dl .info dt {
    width: 100%;
  }
}
#top-container #access .access-txt dl .info dd {
  width: calc(100% - 120px);
  line-height: 1.4;
}
@media screen and (max-width: 1024px) {
  #top-container #access .access-txt dl .info dd {
    width: calc(100% - 100px);
  }
}
@media screen and (max-width: 480px) {
  #top-container #access .access-txt dl .info dd {
    width: 100%;
  }
}
#top-container #access .access-txt dl .info dd span {
  color: #828282;
  font-size: var(--f16);
  line-height: 1.1;
}
#top-container #access .access-txt dl .info dd span a {
  color: #828282;
}
@media screen and (max-width: 480px) {
  #top-container #access .access-txt dl .info dd span a {
    pointer-events: all;
  }
}
#top-container #access .access-txt dl .info dd a {
  text-decoration: underline;
}
#top-container #access iframe {
  height: auto;
}
@media screen and (max-width: 768px) {
  #top-container #access iframe {
    height: 280px;
  }
}
#top-container #sns {
  max-width: 800px;
  width: 90%;
  margin: 0 auto;
}
#top-container #sns .sns-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2em;
  margin-top: 8em;
}
@media screen and (max-width: 1024px) {
  #top-container #sns .sns-list {
    margin-top: 5em;
  }
}
#top-container #sns .sns-list .sns-item {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 2em;
}
@media screen and (max-width: 480px) {
  #top-container #sns .sns-list .sns-item {
    border-radius: 12px;
    padding: 1em;
  }
}
#top-container #sns .sns-list .sns-item .page-title-center {
  font-size: var(--f24);
  margin-bottom: 1em;
}
@media screen and (max-width: 480px) {
  #top-container #sns .sns-list .sns-item .page-title-center {
    margin-bottom: 0.5em;
    font-size: var(--f17);
  }
}
#top-container #sns .sns-list .sns-item .page-title-center span {
  font-size: var(--f42);
  line-height: 1.2;
}
@media screen and (max-width: 480px) {
  #top-container #sns .sns-list .sns-item .page-title-center span {
    font-size: var(--f36);
  }
}
#top-container #sns .sns-list .sns-item .btn {
  margin: 1em auto 0 auto;
}
#top-container #sns .sns-list .sns-item:nth-child(1) figure {
  background: url(../images/sns-bg.webp) no-repeat center;
  background-size: cover;
  height: 330px;
  display: grid;
  place-items: center;
}
@media screen and (max-width: 480px) {
  #top-container #sns .sns-list .sns-item:nth-child(1) figure {
    height: 200px;
  }
}
#top-container #sns .sns-list .sns-item:nth-child(1) figure img {
  max-width: 360px;
  width: 90%;
  margin: 0 auto;
}
#top-container #sns .sns-list .sns-item:nth-child(1)::before {
  content: "";
  background: url(../images/sns-img01.svg) no-repeat;
  background-size: contain;
  width: 220px;
  height: 267px;
  position: absolute;
  top: -110px;
  left: -70px;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  #top-container #sns .sns-list .sns-item:nth-child(1)::before {
    width: 180px;
    height: 227px;
    top: -80px;
  }
}
#top-container #sns .sns-list .sns-item:nth-child(1)::after {
  content: "";
  background: url(../images/sns-img02.svg) no-repeat;
  background-size: contain;
  width: 307px;
  height: 232px;
  position: absolute;
  bottom: -80px;
  right: -180px;
  z-index: -1;
}
@media screen and (max-width: 1024px) {
  #top-container #sns .sns-list .sns-item:nth-child(1)::after {
    width: 167px;
    height: 192px;
    right: -90px;
    bottom: -100px;
  }
}

#contents-404 {
  width: min(90%, 1240px);
  margin: 0 auto;
}
#contents-404 h2 {
  text-align: center;
  font-size: var(--f36);
  font-family: "Noto Serif JP";
}
@media screen and (max-width: 480px) {
  #contents-404 h2 {
    font-size: var(--f24);
  }
}
#contents-404 p {
  text-align: center;
}/*# sourceMappingURL=style.css.map */