@charset "UTF-8";
html {
  background: #f2f1e9;
}
@media screen and (max-width: 447px) {
  html {
    font-size: calc(16 / 448 * 100vw);
  }
}

body {
  font-family: "Shippori Mincho B1", "Yu Mincho", "游明朝", serif;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #231815;
}
body.js-drawer_show {
  overflow: hidden;
}

html,
body {
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.sp-only {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.pc-only {
  display: block;
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.container {
  max-width: calc(25.75rem + 1.125rem * 2);
  margin-inline: auto;
}

.inner {
  padding-inline: 1.125rem;
}

.heading {
  text-align: center;
}

.heading__en {
  display: grid;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.375rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.1em;
  color: #b4b4b5;
}

.heading__ja {
  display: grid;
  width: fit-content;
  padding-inline: 0.3125rem;
  margin-top: 0.375rem;
  margin-inline: auto;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, rgba(238, 226, 194, 0.8) 0%, rgba(238, 226, 194, 0) 86.4%);
}
.heading__ja.--plain {
  width: auto;
  background: none;
}

.heading__en-base,
.heading__en-clone,
.heading__ja-base,
.heading__ja-clone {
  grid-column: 1/2;
  grid-row: 1/2;
  width: fit-content;
  margin-inline: auto;
}

.chevron {
  width: 5.625rem;
  aspect-ratio: 90/31;
  margin-inline: auto;
  background: url(../img/about/about_chevron.svg) no-repeat center/contain;
}

@keyframes submit-sweep {
  from {
    translate: -100% 0;
  }
  to {
    translate: 100% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .form__submit.is-sending::after {
    animation: none;
  }
}
.main {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 448px) minmax(0, 1fr);
}

.main__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.main__bg img {
  position: sticky;
  top: calc(100vh - max(100vh, 99.765625vw));
  display: block;
  width: 100%;
  height: max(100vh, 99.765625vw);
  object-fit: cover;
  object-position: center top;
}

.column {
  grid-column: 2;
  background: #f2f1e9;
}

.fv {
  position: relative;
  height: 100vh;
  background: url(../img/fv/fv_bg.webp) no-repeat center center/cover;
  color: #fff;
  text-align: center;
}

.fv__inner {
  padding-top: 1.625rem;
}

.fv__kicker {
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
}

.fv__title {
  margin-top: 0.5rem;
  font-size: 2.125rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.fv__logo {
  position: absolute;
  left: 50%;
  bottom: 2.0625rem;
  translate: -50% 0;
  width: 18.75rem;
}

.fv__logo-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.fv__logo-mark {
  width: 17.625rem;
  aspect-ratio: 282/37;
  margin-top: 0.75rem;
  margin-inline: auto;
}

.stage {
  grid-column: 1;
  justify-self: end;
  width: 100%;
  max-width: calc((1440px - 448px) / 2);
  position: relative;
}
@media (max-width: 1300px) {
  .stage {
    display: none;
  }
}

.stage__watermark {
  position: absolute;
  top: 53px;
  left: 10.09%;
  width: 93px;
  aspect-ratio: 93/670;
}

.stage__vertical {
  position: absolute;
  top: 63px;
  left: 45.19%;
  width: 86px;
  height: fit-content;
  writing-mode: vertical-rl;
  font-size: 32px;
  line-height: 2.1;
  letter-spacing: 0.16em;
  color: #231815;
}

.sidenav {
  grid-column: 3;
  padding-bottom: 50px;
}
@media (max-width: 1300px) {
  .sidenav {
    display: none;
  }
}

.sidenav__sticky {
  position: sticky;
  top: 0;
  padding-top: 53px;
}

.sidenav__list {
  display: grid;
  row-gap: 12px;
  max-width: 252px;
  margin-inline: 80px 84px;
}

.sidenav__item {
  position: relative;
}

.sidenav__link {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding-inline: 16px 44px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #fff;
  background: linear-gradient(90deg, #c79f62 0%, #693f15 100%);
  transition: opacity 0.3s ease;
}
.sidenav__link::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 37px;
  aspect-ratio: 37/9;
  background: url(../img/common/common_arrow.svg) no-repeat center/contain;
}
@media (any-hover: hover) {
  .sidenav__link:hover {
    opacity: 0.75;
  }
}
.sidenav__link:focus-visible {
  outline: 2px solid #693f15;
  outline-offset: 2px;
}

.sidenav__bnr {
  aspect-ratio: 288/180;
  margin-top: 40px;
  max-width: 288px;
  margin-inline: 60px 68px;
}

.sidenav__bnr a {
  display: block;
  transition: opacity 0.3s ease;
}
@media (any-hover: hover) {
  .sidenav__bnr a:hover {
    opacity: 0.8;
  }
}

.about {
  padding-top: 2.75rem;
  position: relative;
}

.about__ahirai {
  position: absolute;
  top: 1.875rem;
  right: 0.625rem;
  width: 6.875rem;
  height: auto;
  aspect-ratio: 110/94;
  rotate: -348deg;
}

.about__title {
  text-align: center;
  font-weight: 500;
}

.about__title-sub {
  display: block;
  font-size: 1.1875rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.about__title-main {
  display: block;
  margin-top: 0.1875rem;
  font-size: 1.5625rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

.about__lead {
  margin-top: 1.3125rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.96;
  letter-spacing: 0;
}

.about__cycle {
  margin-top: 3rem;
  margin-inline: -0.34375rem;
}

.about .chevron {
  margin-top: 1.6875rem;
}

.about__catch {
  margin-top: 0.875rem;
  text-align: center;
  font-size: 1.875rem;
  line-height: 2;
  letter-spacing: 0.04em;
}

.system {
  padding-top: 3.4375rem;
}

.system__label {
  width: fit-content;
  margin-inline: auto;
  padding: 0.3125rem 1.625rem;
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  color: #3d322d;
  background: #f0ecdc;
}

.system__usage {
  margin-top: 0.9375rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: #006934;
}

.system__flow {
  margin-top: 1.4375rem;
  margin-inline: -0.84375rem;
}

.system__note {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  color: #006934;
}

.system__steps {
  margin-top: 2.125rem;
}

.system__step {
  position: relative;
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  column-gap: 1.375rem;
  align-items: center;
}
.system__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.625rem;
  width: 1px;
  height: calc(100% + 2rem);
  background: #fff;
}

.system__step + .system__step {
  margin-top: 2rem;
}

.system__step-title {
  display: grid;
  place-content: center;
  width: 5.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  background: #fff;
}

.system__step-body {
  font-size: 0.84375rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.sanpo {
  padding-top: 3.6875rem;
  padding-bottom: 3.6875rem;
}

.sanpo__title {
  max-width: 18.375rem;
  margin-inline: auto;
}

.sanpo__figure {
  margin-top: -1.9375rem;
}

.design {
  padding-top: 3.9375rem;
  padding-bottom: 3rem;
  background: #ffffff;
}

.design__lead {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 2.28;
  letter-spacing: 0.06em;
}

.design__photos {
  display: grid;
  row-gap: 0.875rem;
  margin-top: 1.3125rem;
}

.design__note {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.design__interior {
  max-width: 21.6875rem;
  margin-top: 0.75rem;
  margin-inline: auto;
}

.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 21.75rem;
  margin-top: 1.0625rem;
  margin-inline: auto;
  padding-block: 0.5rem;
  border-top: 1px solid #231815;
  border-bottom: 1px solid #231815;
}

.price__label {
  align-self: center;
  font-size: 0.8125rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.price__num {
  margin-left: 0.5rem;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.price__unit {
  font-size: 1.375rem;
}

.price__tax {
  font-size: 1.0625rem;
}

.plan {
  padding-top: 2.875rem;
  padding-bottom: 1.5625rem;
}

.plan__list {
  display: grid;
  row-gap: 1.875rem;
  margin-top: 2.1875rem;
}

.plan__photo {
  position: relative;
  overflow: hidden;
}

.plan__ribbon {
  position: absolute;
  top: 0;
  left: 0;
  width: 7.3125rem;
  aspect-ratio: 1;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: #cfbfa2;
}
.plan__ribbon.--dark {
  background: #231815;
}

.plan__ribbon-text {
  position: absolute;
  top: 2.25rem;
  left: 0;
  width: 5.375rem;
  text-align: center;
  rotate: -45deg;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: #fff;
}

.plan__title {
  margin-top: 1.125rem;
  padding-bottom: 0.625rem;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #231815;
}

.plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.75rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid #231815;
}

.plan__price-label {
  align-self: center;
  font-size: 0.75rem;
  line-height: 1.25;
}

.plan__price-num {
  margin-left: 0.625rem;
  font-size: 2.375rem;
  line-height: 1;
}

.plan__price-unit {
  font-size: 1.3125rem;
}

.plan__price-tax {
  font-size: 0.9375rem;
}

.plan__table {
  width: 100%;
  margin-top: 0.875rem;
  font-size: 0.84375rem;
  letter-spacing: 0.02em;
  border-collapse: collapse;
}

.plan__table th {
  padding-block: 0.0625rem;
  padding-left: 2rem;
  font-weight: 400;
  text-align: left;
}

.plan__table td {
  padding-block: 0.0625rem;
  padding-right: 2.875rem;
  text-align: right;
}

.plan__table tfoot th,
.plan__table tfoot td {
  padding-top: 0.5rem;
  border-top: 1px solid #231815;
}

.plan__table tfoot th {
  padding-left: 1.5rem;
}

.plan__tag {
  width: fit-content;
  margin-top: 0.75rem;
  padding: 0.0625rem 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  border: 1px solid #231815;
}

.plan__note {
  margin-top: 0.375rem;
  padding-left: 0.75rem;
  font-size: 0.6875rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.plan__capacity {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
}

.plan__capacity .plan__tag {
  margin-top: 0;
}

.panel {
  background: #ffffff;
}

.flow {
  padding-top: 3.625rem;
}

.flow__list {
  margin-top: 2.25rem;
  text-align: center;
}

.flow__item {
  font-size: 1.375rem;
  letter-spacing: 0.1em;
}
.flow__item:not(:last-child)::after {
  content: "";
  display: block;
  width: 2.375rem;
  aspect-ratio: 38/18;
  margin-block: 1rem;
  margin-inline: auto;
  background: url(../img/flow/flow_chevron.svg) no-repeat center/contain;
}

.faq {
  padding-top: 3.3125rem;
  padding-bottom: 5.9375rem;
}

.faq__list {
  margin-top: 3.375rem;
}

.faq__item + .faq__item {
  margin-top: 1.875rem;
}

.faq__q {
  padding-bottom: 0.375rem;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  border-bottom: 1px dotted #231815;
}

.faq__a {
  margin-top: 0.375rem;
  padding-left: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.contact {
  padding-top: 3.875rem;
  padding-bottom: 3.375rem;
}

.contact__body {
  margin-top: 2.1875rem;
}

.form__done {
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity 0.6s ease, translate 0.6s ease;
  border: 1px solid #000;
  padding: 20px;
}
.form__done.is-shown {
  opacity: 1;
  translate: 0 0;
}
.form__done:focus-visible {
  outline: 2px solid #ab9262;
  outline-offset: 0.5rem;
}

.form__done-title {
  font-size: 1.25rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
}

.form__done-text {
  margin-top: 1.375rem;
  font-size: 0.875rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
}

.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__field-error {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: #a33f36;
}

.form__input[aria-invalid=true],
.form__textarea[aria-invalid=true] {
  border-color: #a33f36;
}

.form__error {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #a33f36;
}

.form__radios {
  display: flex;
  column-gap: 4.25rem;
  padding-left: 0.75rem;
}

.form__radio {
  display: inline-flex;
  align-items: center;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
}

.form__radio input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
}

.form__radio span {
  position: relative;
  padding-left: 1.375rem;
}
.form__radio span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 0.875rem;
  aspect-ratio: 1;
  border: 1px solid #231815;
  border-radius: 50%;
}
.form__radio span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  translate: 0 -50%;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #231815;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.form__radio input[type=radio]:checked + span::after {
  opacity: 1;
}

.form__radio input[type=radio]:focus-visible + span::before {
  outline: 2px solid #ab9262;
  outline-offset: 2px;
}

.form__row {
  margin-top: 0.9375rem;
}

.form__label {
  display: block;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
}

.form__require {
  color: #ab9262;
}

.form__input,
.form__textarea {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-family: inherit;
  font-size: 16px;
  color: #231815;
  background: #fff;
  border: 1px solid #b5aea4;
}
.form__input:focus-visible,
.form__textarea:focus-visible {
  outline: 2px solid #ab9262;
  outline-offset: 1px;
}

.form__textarea {
  height: 12.0625rem;
  resize: vertical;
}

.form__submit {
  display: block;
  width: 100%;
  margin-top: 2.125rem;
  padding-block: 0.375rem;
  font-family: inherit;
  font-size: 1.1875rem;
  letter-spacing: 0.14em;
  color: #fff;
  background: #ab9262;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  position: relative;
  overflow: hidden;
}
@media (any-hover: hover) {
  .form__submit:not(:disabled):hover {
    opacity: 0.8;
  }
}
.form__submit:disabled {
  cursor: wait;
}
.form__submit:focus-visible {
  outline: 2px solid #693f15;
  outline-offset: 2px;
}
.form__submit.is-sending::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  animation: submit-sweep 1.6s ease-in-out infinite;
}

.footer {
  grid-column: 1/-1;
  padding-block: 47px 52px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

.footer__mark {
  display: block;
  width: 60px;
  aspect-ratio: 60/59;
  margin-inline: auto;
}

.footer__name {
  margin-top: 20px;
  font-size: 22px;
  letter-spacing: 0.1em;
}

.footer__address {
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.footer__tel {
  margin-top: 2px;
  font-size: 21px;
  letter-spacing: 0.04em;
}

.footer__tel-label {
  font-size: 13px;
}