@charset "UTF-8";

/* ==========================================================================
    TOP page style
============================================================================= */
.mv {
  position: relative;
}

.mv__lead {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 40px 0 40px 0;
  position: absolute;
  padding: 50px;
  top: 3.4722vw;
  left: 3.4722vw;
  line-height: 1.4375;
  z-index: 10;
}

.mv__lead .label {
  background-color: #231815;
  color: #fff;
  display: block;
  font-size: 1.6rem;
  font-weight: 300;
  margin-block: 10px 7px;
  padding: 4px 4px 6px;
  text-align: center;
}

.mv__lead .ttl {
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: 7.2px;
  line-height: 1.444;
}

.mv__slide img {
  min-height: 600px;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.mv__line {
  background-color: #55c36a;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.mv__line .icon {
  position: absolute;
  top: -5px;
  right: 10px;
  right: 0.6944vw;
}

@media screen and (min-width: 767.98px) {
  .mv__line {
    border-radius: 50%;
    gap: 1vw;
    padding-block: 70px;
    min-width: 300px;
    min-height: 300px;
    position: absolute;
    bottom: -8.5416vw;
    right: 3.4722vw;
    height: 25.556vw;
    width: 25.556vw;
  }
}

@media screen and (max-width: 768px) {
  .mv__lead {
    padding: 35px;
    top: 30px;
    left: 20px;
  }

  .mv__lead .txt {
    font-size: 1.3rem;
  }

  .mv__lead .ttl {
    font-size: 2.5rem;
    text-align: center;
  }

  .mv__line {
    padding-block: 50px 30px;
    position: relative;
    gap: 20px;
  }

  .mv__line .icon {
    left: 0;
    right: 0;
    margin-inline: auto;
    top: -30px;
  }

  .mv__slide img {
    min-height: inherit;
    height: 400px;
  }
}

.intro {
  background-color: #eaeaea;
  padding-block: 150px 0;
}

.intro__inner {
  position: relative;
}

.intro__inner::after {
  background: url("../images/intro_bg.svg") no-repeat center top/auto 14.66vw;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: -14.666vw;
  height: 14.666vw;
  width: 100vw;
  z-index: 10;
}

.intro__list .figure {
  -webkit-margin-after: 14px;
  margin-block-end: 14px;
}

.intro__bg {
  position: relative;
}

.intro__bg img {
  height: 600px;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.intro__text {
  background-color: rgba(35, 24, 21, 0.9);
  color: #fff;
  display: inline-block;
  font-size: 2rem;
  letter-spacing: 6px;
  -webkit-margin-after: 20px;
  margin-block-end: 20px;
  padding: 10px 25px 10px 35px;
}

.intro__text-group {
  position: absolute;
  left: 4.166vw;
  top: 180px;
  z-index: 20;
}

@media screen and (max-width: 768px) {
  .intro {
    padding-block: 100px 0;
  }

  .intro__text {
    font-size: 1.6rem;
    padding: 10px 20px;
    line-height: 1.8;
  }

  .intro__text-group {
    left: 0;
    top: 90px;
    -webkit-margin-end: 20px;
    margin-inline-end: 20px;
  }
}

.forte .hgroup .footprints {
  right: 20px;
}

.forte__list {
  counter-reset: item;
}

.forte__list>li {
  position: relative;
}

.forte__list>li::before {
  content: "";
  top: 0;
  left: 0;
  border-bottom: 5em solid transparent;
  border-left: 5em solid #231815;
  position: absolute;
  z-index: 10;
}

.forte__list>li::after {
  color: #fff;
  counter-increment: item;
  content: '0' counter(item);
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
}

.forte__list .figure {
  -webkit-margin-after: 30px;
  margin-block-end: 30px;
}

.forte__list .detail .lead {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 7.2px;
  line-height: 1.555;
  -webkit-margin-after: 14px;
  margin-block-end: 14px;
}

.forte__list .detail .txt {
  font-size: 1.4rem;
}

.forte+.sec-line {
  -webkit-transform: translateY(150px);
  transform: translateY(150px);
  margin-top: -150px;
}

.voice {
  background-color: #eaeaea;
  padding-block: 300px;
}

.voice .hgroup .footprints {
  left: 10px;
}

.voice__list>li+li {
  -webkit-margin-before: 62px;
  margin-block-start: 62px;
}

.voice__list .figure {
  font-weight: bold;
  text-align: center;
}

.voice__list .figure .icon {
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: -ms-grid;
  display: grid;
  -webkit-margin-after: 10px;
  margin-block-end: 10px;
  margin-inline: auto;
  place-content: center;
  width: 190px;
  height: 190px;
}

.voice__list .figure .icon img {
  -webkit-margin-before: 38px;
  margin-block-start: 38px;
}

.voice__list .detail {
  background-color: #fff;
  border-radius: 40px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  padding: 35px 40px 40px;
  position: relative;
}

.voice__list .detail::before {
  background-color: #fff;
  content: "";
  height: calc(26px / 2 * tan(60deg));
  width: 26px;
  position: absolute;
}

.voice__list .detail .lead {
  font-size: 1.8rem;
  font-weight: bold;
  -webkit-margin-after: 15px;
  margin-block-end: 15px;
}

.voice__list .detail .txt {
  font-size: 1.4rem;
}

.voice__list .detail .tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  -webkit-margin-before: 20px;
  margin-block-start: 20px;
}

.voice__list .detail .tags .tag-item {
  background-color: #231815;
  color: #fff;
  -ms-flex-preferred-size: calc(50% - 5px);
  flex-basis: calc(50% - 5px);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 2;
  text-align: center;
  padding: 4px;
}

.voice+.sec-line {
  -webkit-transform: translateY(-150px);
  transform: translateY(-150px);
  margin-bottom: -150px;
}

@media screen and (min-width: 767.98px) {
  .voice__list>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 34px;
  }

  .voice__list>li .figure {
    -ms-flex-preferred-size: 190px;
    flex-basis: 190px;
  }

  .voice__list>li .detail {
    -ms-flex-preferred-size: calc(100% - 190px - 34px);
    flex-basis: calc(100% - 190px - 34px);
  }

  .voice__list>li .detail::before {
    background-color: #fff;
    content: "";
    -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
    left: -24px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .voice__list>li:nth-child(even) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .voice__list>li:nth-child(even) .detail::before {
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    left: inherit;
    right: -24px;
  }
}

@media screen and (max-width: 768px) {
  .voice {
    padding-block: 200px;
  }

  .voice__list .detail {
    -webkit-margin-before: 30px;
    margin-block-start: 30px;
    padding: 25px 30px;
  }

  .voice__list .detail::before {
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    top: -20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

.flow {
  position: relative;
}

.flow .hgroup .footprints {
  right: 20px;
}

.flow__list {
  counter-reset: flow;
}

.flow__list>li {
  background-color: #eaeaea;
  -webkit-margin-start: 100px;
  margin-inline-start: 100px;
  position: relative;
}

.flow__list>li:not(:last-child)::after {
  background-color: #231815;
  content: "";
  position: absolute;
  width: 2px;
  height: calc(100% + 65px);
  top: 50%;
  left: -45px;
}

.flow__list>li+li {
  -webkit-margin-before: 65px;
  margin-block-start: 65px;
}

.flow__list>li .icon {
  background-color: #231815;
  border-radius: 50%;
  color: #fff;
  display: -ms-grid;
  display: grid;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  place-content: center;
  position: absolute;
  left: -100px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 110px;
  height: 110px;
  z-index: 10;
}

.flow__list>li .icon::after {
  counter-increment: flow;
  content: '0' counter(flow);
  font-size: 3rem;
  text-align: center;
}

.flow__list>li .ttl {
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 2.2px;
}

.flow__img {
  -webkit-transform: translateY(-2.22vw);
  transform: translateY(-2.22vw);
  position: absolute;
  right: 4.166vw;
  width: 28.125vw;
}

@media screen and (min-width: 767.98px) {
  .flow .hgroup {
    -webkit-margin-after: 80px;
    margin-block-end: 80px;
  }

  .flow__list>li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .flow__list>li .ttl {
    -webkit-border-end: solid 1px #fff;
    border-inline-end: solid 1px #fff;
    -ms-flex-preferred-size: 20.416vw;
    flex-basis: 20.416vw;
    padding: 46px 10px;
    text-align: center;
  }

  .flow__list>li .txt {
    -ms-flex-preferred-size: calc(100% - 20.416vw);
    flex-basis: calc(100% - 20.416vw);
    -webkit-padding-start: 3.055vw;
    padding-inline-start: 3.055vw;
  }
}

@media screen and (max-width: 768px) {
  .flow__list>li {
    -webkit-margin-start: 70px;
    margin-inline-start: 70px;
    padding: 20px 20px 30px;
  }

  .flow__list>li:not(:last-child)::after {
    left: -32px;
  }

  .flow__list>li .icon {
    font-size: 1.6rem;
    left: -70px;
    width: 80px;
    height: 80px;
  }

  .flow__list>li .icon::after {
    font-size: 2.4rem;
  }

  .flow__list>li .ttl {
    -webkit-border-after: solid 1px #fff;
    border-block-end: solid 1px #fff;
    margin: 0 -20px 15px;
    padding: 0 20px 15px;
  }

  .flow__img {
    right: 0;
    height: 200px;
    -o-object-fit: contain;
    object-fit: contain;
    width: auto;
  }
}

.faq {
  background-color: #5f5755;
}

.faq .hgroup {
  color: #fff;
}

.faq .hgroup .footprints {
  left: 10px;
}

.faq__list details {
  background-color: #fff;
  border-radius: 40px 0 40px 0;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  padding: 0 40px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.faq__list details+details {
  -webkit-margin-before: 40px;
  margin-block-start: 40px;
}

.faq__list details summary {
  font-size: 1.8rem;
  list-style: none;
  line-height: 1.555;
  padding-block: 40px;
  -webkit-padding-start: 40px;
  padding-inline-start: 40px;
  position: relative;
}

.faq__list details summary::-webkit-details-marker {
  display: none;
}

.faq__list details summary::before {
  content: "Q";
  font-size: 2.8rem;
  font-weight: bold;
  position: absolute;
  left: 0;
  line-height: 1;
}

.faq__list details summary::after {
  font-family: "Font Awesome 6 Free";
  content: '\2b';
  font-size: 2.8rem;
  font-weight: 900;
  position: absolute;
  right: 0;
  line-height: 1;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.faq__list details[open] {
  -webkit-padding-after: 40px;
  padding-block-end: 40px;
}

.faq__list details[open] summary {
  -webkit-padding-after: 25px;
  padding-block-end: 25px;
}

.faq__list details[open] summary::after {
  content: '\f068';
  top: calc(50% + 8px);
}

.faq__list details .txt {
  background-color: #eaeaea;
  display: block;
  font-size: 1.4rem;
  padding: 20px;
}

@media screen and (min-width: 767.98px) {
  .faq .hgroup {
    -webkit-margin-after: 80px;
    margin-block-end: 80px;
  }
}

@media screen and (max-width: 768px) {
  .faq__list details {
    padding: 0 30px;
  }

  .faq__list details summary {
    padding-inline: 20px;
  }

  .faq__list details summary::before {
    left: -10px;
  }

  .faq__list details summary::after {
    right: -10px;
  }
}

.reservation {
  -webkit-padding-before: 80px;
  padding-block-start: 80px;
}

.reservation .slider {
  -webkit-margin-after: 150px;
  margin-block-end: 150px;
}

.reservation .slider .item {
  margin-inline: 20px;
}

.reservation .hgroup .footprints {
  right: 20px;
}

.reservation .check {
  margin-block: 10px 60px;
}

@media screen and (max-width: 768px) {
  .reservation .slider {
    -webkit-margin-after: 100px;
    margin-block-end: 100px;
  }
}

/*# sourceMappingURL=maps/top.css.map */