@charset "UTF-8";

:root {
  --color-primary:#A48C78;
  --color-sub:#9B7C62;
  --color-accent:#A42928;
  --color-black:#4D4D4D;
  --color-gray:#808080;
  --color-bg:#cccccc;

  --font-jp:"Zen Kaku Gothic New", sans-serif;
  --font-en:"Outfit", sans-serif;
}
/* ---------------------------------------common set */
/* -------------------------
   共通設定
------------------------- */
html {
  font-size: 1px;
  overscroll-behavior: none;
  scroll-behavior: smooth;
}
/* -------------------------
   スマホ（〜767px）
   → 375px幅を基準に拡大
------------------------- */
@media (max-width: 767px) {
  html {
    font-size: calc(100vw / 375);
  }
}
/* -------------------------
   タブレット（768〜1180px）
------------------------- */
@media (min-width: 768px) and (max-width: 1180px) {
  html {
    font-size: calc(100vw / 1180);
  }
}
/* CSS STYLE */
body {
  font-family: var(--font-jp);
  font-size: 16rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2;
  color: var(--color-black);
  background: var(--color-bg);
}
@media only screen and (max-width: 959px) {
  body {
    font-size: 15rem;
  }
}
* {
  box-sizing: border-box;
}
a,
a img {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
a:hover img {
  opacity: 0.7;
}
img {
  max-width: 100%;
  height: auto;
}
strong {
  font-weight: 700;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
@media only screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* KEYFRAMES */
@keyframes zoomout {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}
@keyframes loop {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* PARTS */
.inner {
  position: relative;
  width: min(calc(100% - 80rem),1360rem);
  margin: auto;
  @media (width < 768px) {
    width: calc(100% - 48rem);
  }
}
.fade {
  opacity: 0;
  transition: opacity 0.8s linear;
  &.is-show {
    opacity: 1;
  }
}
.fade-b {
  position: relative;
  opacity: 0;
  transform: translate(0, 20rem);
  transition: opacity 0.8s linear transform 0.8s linear;
  &.is-show {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.hr {
  display: block;
  width: 0;
  height: 1rem;
  border: 0;
  color: transparent;
  transition: width 0.8s linear;
  margin: 0;
  padding: 0;
  &.is-show {
    width: 100%;
  }
}
/* HEADER */
header {
  width: 100%;
  height: 100svh;
  border-top: var(--color-gray) 5rem solid;
  position: relative;
  z-index: 1;
  overflow: hidden;
  h1 {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 17.8vh;
    z-index: 2;
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
}
@media (max-width: 767px) {
  header {
    border-top: var(--color-gray) 8rem solid;
    h1 {
      width: 100%;
      height: auto;
      top: auto;
      bottom: 9.9svh;
    }
    p {
      font-size: min(13vw,56rem);
      line-height: 1.4em;
      br {
        display: block;
      }
    }
  }
}
.mainslide {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: relative;
  li {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 1;
    &.active {
      opacity: 1;
      z-index: 2;
      img {
        animation: zoomout 6s linear forwards;
      }
    }
    &.leaving {
      opacity: 0;
      z-index: 1;
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      will-change: transform;
    }
  }
}
/* FOOTER */
.stickybtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rem;
  writing-mode: vertical-rl;
  background: #fff;
  border: var(--color-black) 1rem solid;
  width: 68rem;
  height: 233rem;
  position: fixed;
  bottom: 34rem;
  right: 16rem;
  z-index: 99;
  font-size: 20rem;
  font-weight: 500;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.stickybtn.is-show {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 767px) {
  .stickybtn {
    width: 100%;
    writing-mode: horizontal-tb;
    height: 48rem;
    right: 0;
    bottom: 0;
    font-size: 16rem;
  }
}
footer {
  border-top: var(--color-bg) 7rem solid;
  border-bottom: var(--color-primary) 4rem solid;
  background: #fff;
  padding-top: 113rem;
  padding-bottom: 130rem;
  .inner {
    position: relative;
  }
  dl {
    display: flex;
    align-items: center;
    &:first-of-type {
      padding-bottom: 72rem;
      margin-bottom: 72rem;
      border-bottom: rgba(77,77,77,.2) 1rem solid;
      img {
        width: 301rem;
      }
    }
    &:last-of-type {
      img {
        width: 262rem;
      }
    }
    dt,dd {
      font-size: 16rem;
      letter-spacing: 0.08em;
    }
    dt {
      width: 360rem;
      img {
        display: block;
      }
    }
    dd {
      flex-shrink: 1;
      font-size: 16rem;
    }
    .blank {
      text-decoration: underline;
      &::after {
        content: "";
        display: inline-block;
        width: 12rem;
        aspect-ratio: 1 / 1;
        background: url(../img/blank-b.svg) center no-repeat;
        background-size: contain;
        margin-left: 4rem;
      }
    }
    .tel {
      display: inline-block;
      pointer-events: none;
      margin-right: 24rem;
    }
  }
  .copy {
    font-size: 12rem;
    font-weight: 500;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opcity .8s linear;
    transition-delay: 1s;
  }
  .inner {
    &.is-show {
      .copy {
        opacity: 1;
      }
    }
  }
}
@media (max-width: 767px) {
  footer {
    border-top: 0;
    padding-top: 40rem;
    padding-bottom: 40rem;
    dl {
      display: block;
      &:first-of-type {
        padding-bottom: 40rem;
        margin-bottom: 40rem;
        img {
          width: 226rem;
        }
      }
      &:last-of-type {
        img {
          width: 180rem;
        }
      }
      dt {
        width: 100%;
        img {
          display: block;
          margin-bottom: 32rem;
        }
      }
      dd {
        font-size: 14rem;
        line-height: 1.5;
        p {
          padding-bottom: 12rem;
        }
      }
      .blank {
        text-decoration: underline;
        &::after {
          content: "";
          display: inline-block;
          width: 12rem;
          aspect-ratio: 1 / 1;
          background: url(../img/blank-b.svg) center no-repeat;
          background-size: contain;
          margin-left: 4rem;
        }
      }
      .tel {
        display: inline-block;
        pointer-events: none;
        margin-right: 24rem;
      }
    }
    .copy {
      font-size: 10rem;
      font-weight: 500;
      position: relative;
      right: auto;
      bottom: auto;
      padding-top: 40rem;
    }
    .inner {
      &.is-show {
        .copy {
          opacity: 1;
        }
      }
    }
  }
}
/* CONTENTS */
.lb-ttl {
  display: flex;
  align-items: center;
  gap: 40rem;
  font-size: 48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  span {
    display: block;
    font-size: 24rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }
  hr {
    display: block;
    width: 2rem;
    height: 39rem;
    background: var(--color-black);
    border: 0;
    color: transparent;
  }
}
@media (max-width: 767px) {
  .lb-ttl {
    display: block;
    font-size: 32rem;
    line-height: 1.5;
    position: relative;
    span {
      font-size: 16rem;
      margin-top: 16rem;
    }
    hr {
      display: block;
      width: 8rem;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      transform: translateX(-24rem);
    }
  }
}
.lb-sub {
  padding-left: 80rem;
  position: relative;
  font-size: 28rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
  b {
    display: block;
    font-family: var(--font-en);
    font-size: 32rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-bg);
    position: absolute;
    left: 0;
    top: 0;
    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 2rem;
      background: var(--color-bg);
    }
  }
  span {
    display: block;
    font-size: 24rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
}
@media (max-width: 767px) {
  .lb-sub {
    padding-left: 56rem;
    font-size: 20rem;
    line-height: 1.5;
    b {
      font-size: 28rem;
    }
    span {
      font-size: 16rem;
      margin-top: 16rem;
    }
  }
}
.lb-lead {
  overflow: hidden;
  text-align: center;
  padding-block: 250rem;
  position: relative;
  z-index: 1;
  background: #fff;
  p {
    font-size: 24rem;
    position: relative;
    margin-bottom: 40rem;
    &.line {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1em;
      margin-bottom: 80rem;
      &::before {
        content: "";
        display: block;
        width: 70rem;
        height: 1rem;
        background: var(--color-black);
      }
    }
  }
  h2 {
    font-size: 40rem;
    font-weight: 500;
    letter-spacing: 0.08em;
  }
  .bg {
    display: block;
    max-width: auto;
    width: auto;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    &.fade {
      transition: 1.2s linear;
    }
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
@media (max-width: 767px) {
  .lb-lead {
    padding-block: 120rem;
    p {
      font-size: 16rem;
      &.line {
        margin-bottom: 40rem;
        &::before {
          width: 50rem;
        }
      }
    }
    h2 {
      font-size: 28rem;
    }
  }
}
.lb-about {
  padding-top: 180rem;
  overflow: hidden;
  position: relative;
  z-index: 3;
  padding-bottom: 170rem;
  &::before {
    content: "";
    display: block;
    width: 640rem;
    height: 640rem;
    border-radius: 50%;
    background: rgba(244,244,244,.3);
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-150rem,-150rem);
  }
  .loop {
    width: 100%;
    display: flex;
    gap: 70rem;
    animation: loop 80s -40s linear infinite;
    margin-bottom: 140rem;
    p {
      display: flex;
      img {
        max-width: 1986rem;
        height: auto;
      }
    }
  }
  .flb {
    display: flex;
    justify-content: space-between;
    h2 {
      font-size: 48rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1.45;
      margin-bottom: 80rem;
    }
    p {
      font-size: 20rem;
      line-height: 2.4;
      margin-bottom: 32rem;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
    .txt {
      flex-shrink: 1;
    }
    figure {
      width: 416rem;
      img {
        display: block;
      }
      &.fade {
        transition-delay: 0.6s;
      }
    }
  }
}
@media (max-width: 767px) {
  .lb-about {
    padding-top: 77rem;
    padding-bottom: 40rem;
    &::before {
      width: 440rem;
      height: 440rem;
      left: auto;
      right: 0;
      transform: translate(143rem,-143rem);
    }
    .loop {
      gap: 32rem;
      animation: loop 30s -15s linear infinite;
      margin-bottom:45rem;
      p {
        img {
          max-width: 904rem;
        }
      }
    }
    .flb {
      display: block;
      h2 {
        font-size: 28rem;
        margin-bottom: 32rem;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 8rem;
          height: 100%;
          background: var(--color-black);
          position: absolute;
          left: 0;
          top: 0;
          transform: translateX(-24rem);
        }
      }
      p {
        font-size: 16rem;
        line-height: 1.5;
      }
      .txt {
        padding-bottom: 40rem;
      }
      figure {
        width: 100%;
        &.fade {
          transition-delay: 0;
        }
      }
    }
  }
}
.lb-project {
  position: relative;
  z-index: 2;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 670rem;
    background: var(--color-primary);
    position: absolute;
    left: 0;
    bottom: -1rem;
    z-index: -1;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
  }
  &::after {
    content: "";
    display: block;
    width: 268rem;
    aspect-ratio: 537 / 1360;
    background: url(../img/tree1@2x.webp) center no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateY(-267rem);
    z-index: 1;
  }
  .box {
    background: #F4F4F4;
    padding: 64rem 80rem;
    display: flex;
    gap: 80rem;
    position: relative;
    z-index: 2;
    hr {
      display: block;
      width: 1rem;
      height: auto;
      background: var(--color-gray);
    }
    h3 {
      font-family: var(--font-en);
      font-size: 32rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.25;
      color: var(--color-primary);
      margin-bottom: 32rem;
    }
    .left {
      flex-shrink: 0;
      p {
        font-size: 18rem;
        font-weight: 500;
        line-height: 1.78;
      }
    }
    .right {
      flex-shrink: 1;
      p {
        font-size: 16rem;
        line-height: 1.8;
      }
    }
  }
}
@media (max-width: 767px) {
  .lb-project {
    &::before {
      height: 157rem;
    }
    &::after {
      width: 172rem;
      transform: translateY(-50%);
    }
    .box {
      padding: 40rem 24rem;
      display: block;
      hr {
        width: 100%;
        height: 1rem;
      }
      h3 {
        font-size: 24rem;
        margin-bottom: 16rem;
      }
      .left {
        text-align: center;
        width: 100%;
        padding-bottom: 24rem;
        p {
          line-height: 1.5;
        }
      }
      .right {
        width: 100%;
        padding-top: 24rem;
        p {
          line-height: 1.5;
        }
      }
    }
  }
}
.lb-promise {
  background: var(--color-primary);
  padding-top: 190rem;
  position: relative;
  z-index: 1;
  .lb-ttl {
    color: #fff;
    margin-bottom: 78rem;
    hr {
      background: #fff;
    }
  }
  .hr {
    background: rgba(255,255,255,.2);
    margin-bottom: 140rem;
  }
  .lb-sub {
    margin-bottom: 80rem;
    color: #fff;
  }
  .flb {
    display: flex;
    justify-content: space-between;
    padding-bottom: 160rem;
    .txt {
      width: min(47%,640rem);
    }
    .img {
      width: min(45.5%,620rem);
      flex-shrink: 0;
      overflow: hidden;
    }
    ul {
      display: flex;
      gap: 36rem;
      &:first-of-type {
        margin-bottom: 40rem;
      }
      figure {
        display: block;
        position: relative;
      }
      figcaption {
        display: inline-block;
        padding: 8rem 16rem;
        background: #F4F4F4;
        position: absolute;
        left: 0;
        bottom: 0;
        font-weight: 500;
      }
      img {
        display: block;
      }
      .before {
        width: 39.5%;
        figcaption {
          font-size: 10rem;
        }
      }
      .after {
        width: 53%;
        opacity: 0;
        transition: opacity 0.8s linear;
        transition-delay: 1s;
        figcaption {
          font-size: 14rem;
        }
      }
      .arrow {
        margin-top: 25rem;
        transform: translateX(-100%);
        transition: transform 0.6s linear;
        transition-delay: 0.3s;
      }
      &.is-show {
        .after {
          opacity: 1;
        }
        .arrow {
          transform: translateX(0);
        }
      }
    }
  }
  p {
    color: #fff;
    font-size: 20rem;
    line-height: 1.8;
  }
  a {
    text-decoration: underline;
    &::after {
      content: "";
      display: inline-block;
      width: 12rem;
      aspect-ratio: 1 / 1;
      background: url(../img/blank.svg) center no-repeat;
      background-size: contain;
      margin-left: 4rem;
    }
  }
  .bg {
    background: #987B63;
    padding-top: 160rem;
    padding-bottom: 180rem;
    position: relative;
    &::before,&::after {
      content: "";
      display: block;
      position: absolute;
    }
    &::before {
      width: 208rem;
      aspect-ratio: 416 / 831;
      background: url(../img/tree2@2x.webp) center no-repeat;
      background-size: 100% auto;
      top: 0;
      left: 0;
      transform: translateY(-50%);
    }
    &::after {
      width: 219rem;
      aspect-ratio: 219 / 389;
      background: url(../img/tree3@2x.webp) center no-repeat;
      background-size: 100% auto;
      right: 0;
      bottom: 165rem;
    }
    .inner {
      display: grid;
      grid-template-columns: 47% 47%;
      justify-content: space-between;
    }
    .box {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      img {
        display: block;
        margin-bottom: 56rem;
      }
    }
  }
  .slider-nav {
    display: none;
  }
}
@media (max-width: 767px) {
  .lb-promise {
    padding-top: 94rem;
    z-index: 5;
    .lb-ttl {
      margin-bottom: 56rem;
    }
    .hr {
      display: none;
    }
    .lb-sub {
      margin-bottom: 32rem;
    }
    .slider-wrapper {
      overflow: hidden;
      position: relative;
    }
    .slider-nav {
      display: flex;
      justify-content: center;
      gap: 8rem;
      margin-top: 16rem;
      margin-bottom: 40rem;
    }
    .slider-nav button {
      width: 32rem;
      height: 4rem;
      border: none;
      background: rgba(255,255,255,.6);
      padding: 0;
      cursor: pointer;
      transition: background 0.2s;
    }
    .slider-nav button.is-active {
      background: #fff;
    }
    .flb {
      display: block;
      padding-bottom: 14rem;
      .txt {
        width: 100%;
        padding-bottom: 49rem;
      }
      .img {
        width: 100%;
      }
      ul {
        display: flex;
        gap: 0;
        transition: transform 0.35s ease;
        will-change: transform;
        .before {
          width: 100%;
        }
        li {
          flex: 0 0 100%;
          img {
            width: 100%;
          }
        }
        .after {
          width: 100%;
          opacity: 1;
          transition-delay: 0;
        }
        .arrow {
          margin-top: 17.5rem;
        }
      }
    }
    p {
      font-size: 16rem;
    }
    a {
      &::after {
        width: 9rem;
      }
    }
    .bg {
      padding-top: 64rem;
      padding-bottom: 100rem;
      &::before {
        width: 118rem;
      }
      &::after {
        width: 125rem;
        bottom: 0;
        transform: translateY(50%);
      }
      .inner {
        display: block;
      }
      .box {
        display: block;
        &:nth-of-type(1) {
          margin-bottom: 64rem;
        }
        img {
          margin-bottom: 32rem;
        }
      }
    }
  }
}
.lb-point {
  background: #F7F7F7;
  padding-top: 190rem;
  padding-bottom: 200rem;
  position: relative;
  z-index: 1;
  &::before,&::after {
    content: "";
    display: block;
    width: 568rem;
    height: 382rem;
    position: absolute;
    background: #fff;
  }
  &::before {
    top: 0;
    right: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  &::after {
    left: 0;
    bottom: 0;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }
  .lb-ttl {
    margin-bottom: 80rem;
  }
  .hr {
    background: rgba(77,77,77,0.2);
    margin-bottom: 140rem;
  }
  .flb {
    display: flex;
    align-items: center;
    margin-bottom: 140rem;
    &:nth-of-type(odd) {
      flex-direction: row-reverse;
    }
    &:last-of-type {
      margin-bottom: 0;
    }
  }
  figure {
    display: block;
    width: 52.5%;
    img {
      display: block;
    }
  }
  .txt {
    width: 47.5%;
    text-align: center;
  }
  h3 {
    font-family: var(--font-jp);
    font-size: 32rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.25;
    color: var(--color-bg);
    margin-bottom: 40rem;
  }
  p {
    font-size: 24rem;
    font-weight: 500;
  }
  ul {
    padding-top: 56.5rem;
    display: flex;
    justify-content: center;
    gap: 24rem;
    a {
      display: inline-block;
      padding: 16rem 56rem;
      position: relative;
      overflow: hidden;
      color: #fff;
      background: var(--color-sub);
      border: var(--color-sub) 1rem solid;
      z-index: 1;
      &::before {
        content: "";
        display: inline-block;
        width: 11rem;
        aspect-ratio: 1 / 1;
        background: url(../img/down.svg) center no-repeat;
        background-size: 100% auto;
        margin-right: 9.5rem;
        filter: brightness(0) invert(1);
      }
      &::after {
        content: "";
        display: block;
        width: 160%;
        height: 100%;
        background: #fff;
        position: absolute;
        top: 0;
        left: -30%;
        transform: translateX(-100%) skewX(-45deg);
        transition: transform .3s linear;
        z-index: -1;
      }
      &:hover {
        color: var(--color-sub);
        &::before {
          filter: none;
        }
        &::after {
          transform: translateX(0) skewX(-45deg);
        }
      }
    }
  }
}
@media (max-width: 767px) {
  .lb-point {
    padding-top: 100rem;
    padding-bottom: 100rem;
    &::before,&::after {
      width: 274rem;
      height: 184rem;
    }
    .lb-ttl {
      margin-bottom: 56rem;
    }
    .hr {
      display: none;
    }
    .flb {
      display: block;
      margin-bottom: 80rem;
    }
    figure {
      width: 100%;
    }
    .txt {
      width: 100%;
      padding-top: 32rem;
      padding-inline: 24rem;
    }
    h3 {
      font-size: 24rem;
      margin-bottom: 16rem;
    }
    p {
      font-size: 20rem;
    }
    ul {
      padding-top: 24rem;
      gap: 24rem;
      a {
        padding: 16rem 32rem
      }
    }
  }
}
.lb-life {
  position: relative;
  padding-top: 190rem;
  &::before {
    content: "";
    display: block;
    width: 692rem;
    aspect-ratio: 346 / 213;
    background: url(../img/tree4@2x.webp) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
  }
  .lb-ttl {
    margin-bottom: 78rem;
    margin-inline: auto;
  }
  .hr {
    background: rgba(77,77,77,.2);
    margin-bottom: 132rem;
  }
  .lead {
    /*text-align: center;*/
    padding-bottom: 118rem;
    h3 {
      font-size: 32rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.5;
      margin-bottom: 40rem;
    }
    p {
      font-size: 24rem;
      font-weight: 500;
      br {
        display: none;
        @media (width < 1289px) {
          display: block;
        }
      }
    }
  }
  .rooms {
    background: #F4F4F4;
    position: relative;
    z-index: 1;
    .hr {
      margin-bottom: 0;
      margin-top: 225rem;
    }
  }
  .ttl {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80rem;
    figure {
      width: 83%;
      img {
        display: block;
      }
    }
    h3 {
      text-align: center;
      color: var(--color-sub);
      font-family: var(--font-en);
      font-size: 40rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      padding-top: 30rem;
      b {
        display: block;
        font-family: var(--font-en);
        font-size: 140rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0;
      }
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        font-family: var(--font-jp);
        font-size: 28rem;
        font-weight: 700;
        color: var(--color-black);
        text-align: left;
        border-top: rgba(77,77,77,.4) 2rem solid;
        padding-top: 32rem;
      }
    }
  }
  .img {
    display: block;
    margin-bottom: 160rem;
    img {
      display: block;
      width: 100%;
      height: auto;
    }
  }
  .flb {
    display: flex;
    justify-content: space-between;
    h4 {
      font-size: 32rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 1.4;
      margin-bottom: 54rem;
    }
    p {
      font-size: 20rem;
      font-weight: 400;
      line-height: 1.8;
    }
    .txt {
      width: 50%;
    }
    figure {
      display: block;
      width: 48%;
      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }
  }
  dl {
    margin-top: 40rem;
    display: flex;
    flex-wrap: wrap;
    dt,dd {
      font-size: 16rem;
      font-weight: 400;
      letter-spacing: 0;
    }
    dt {
      width: 96rem;
    }
    dd {
      width: calc(100% - 96rem);
    }
  }
  #a-room {
    padding-bottom: 200rem;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 1076rem;
      clip-path: polygon(0 0, 100% 0, 0 100%);
      background: var(--color-bg);
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .ttl {
      padding-right: max(40rem,calc((100% - 1360rem) / 2))
    }
  }
  #b-room {
    padding-bottom: 200rem;
    position: relative;
    z-index: 1;
    &::after {
      content: "";
      display: block;
      width: 568rem;
      height: 382rem;
      background: #fff;
      position: absolute;
      right: 0;
      bottom: 0;
      clip-path: polygon(100% 0, 100% 100%, 0 100%);
      z-index: -1;
    }
    .ttl {
      padding-left: max(40rem,calc((100% - 1360rem) / 2));
    }
  }
}
@media (max-width: 767px) {
  .lb-life {
    padding-top: 100rem;
    &::before {
      width: 329rem;
    }
    .lb-ttl {
      margin-bottom: 56rem;
      width: calc(100% - 48rem);
    }
    .hr {
      display: none;
    }
    .lead {
      padding-bottom: 40rem;
      padding-inline: 24rem;
      h3 {
        font-size: 24rem;
        margin-bottom: 24rem;
      }
      p {
        font-size: 20rem;
      }
    }
    .rooms {
      .hr {
        margin-bottom: 0;
        margin-top: 225rem;
      }
    }
    .inner {
      width: 100%;
    }
    .ttl {
      justify-content: flex-start;
      margin-bottom: 24rem;
      figure {
        width: 100%;
      }
      h3 {
        text-align: left;
        font-size: 14rem;
        padding-top: 0;
        display: flex;
        align-items: center;
        gap: 20rem;
        margin-bottom: 40rem;
        padding-left: 24rem;
        div {
          text-align: center;
        }
        b {
          font-size: 56rem;
        }
        span {
          display: block;
          width: auto;
          -webkit-writing-mode: horizontal-tb;
          writing-mode: horizontal-tb;
          font-size: 24rem;
          border-top: 0;
          border-left: rgba(77,77,77,.4) 2rem solid;
          padding-top: 0;
          padding-left: 20rem;
        }
      }
    }
    .img {
      margin-bottom: 54rem;
      width: calc(100% - 24rem);
      margin-left: auto;
    }
    .flb {
      display: block;
      padding-inline: 24rem;
      h4 {
        font-size: 20rem;
        margin-bottom: 24rem;
      }
      p {
        font-size: 16rem;
        line-height: 1.5;
      }
      .txt {
        width: 100%;
        padding-bottom: 40rem;
      }
      figure {
        width: 100%;
      }
    }
    #a-room {
      padding-bottom: 56rem;
      &::before {
        height: 250rem;
      }
      .ttl {
        padding-right: 24rem;
        flex-direction: column-reverse;
      }
    }
    #b-room {
      padding-bottom: 100rem;
      &::after {
        width: 274rem;
        height: 184rem;
      }
      .ttl {
        padding-left: 0;
        padding-right: 24rem;
        flex-direction: column;
      }
    }
  }
}
.lb-area {
  padding-top: 190rem;
  padding-bottom: 160rem;
  position: relative;
  z-index: 1;
  &::before,&::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
  }
  &::before {
    width: 745rem;
    aspect-ratio: 745 / 353;
    background: url(../img/tree5@2x.webp) center no-repeat;
    background-size: 100% auto;
    left: 0;
    bottom: 0;
  }
  &::after {
    width: 670rem;
    height: 466rem;
    background: var(--color-primary);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    right: 0;
    bottom: 0;
  }
  .lb-ttl {
    margin-bottom: 78rem;
  }
  .hr {
    margin-bottom: 140rem;
    background: rgba(77,77,77,.2);
  }
  .flb {
    display: flex;
    justify-content: space-between;
    .txt {
      width: 42%;
    }
    .img {
      width: 57.7%;
      li {
        &:nth-child(1) {
          width: 85%;
          margin-left: auto;
          margin-bottom: 100rem;
        }
        &:nth-child(2) {
          width: 50%;
        }
      }
    }
    h3 {
      font-size: 32rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      line-height: 2;
      margin-bottom: 56rem;
    }
    p {
      font-size: 20rem;
      margin-bottom: 32rem;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
@media (max-width: 767px) {
  .lb-area {
    padding-top: 100rem;
    padding-bottom: 92rem;
    &::before {
      width: 175rem;
      aspect-ratio: 176 / 369;
      background: url(../img/tree5-sp@2x.webp) center no-repeat;
      background-size: 100% auto;
      left: auto;
      bottom: auto;
      top: 0;
      right: 0;
    }
    &::after {
      width: 274rem;
      height: 184rem;
    }
    .inner {
      width: 100%;
    }
    .lb-ttl {
      width: calc(100% - 48rem);
      margin: 0 auto 56rem;
    }
    .hr {
      display: none;
    }
    .flb {
      display: block;
      .txt {
        width: 100%;
        padding-bottom: 40rem;
        padding-inline: 24rem;
      }
      .img {
        width: 100%;
        li {
          &:nth-child(1) {
            width: calc(100% - 24rem);
            margin-bottom: 24rem;
          }
          &:nth-child(2) {
            width: 69%;
          }
        }
      }
      h3 {
        font-size: 28rem;
        line-height: 1.5;
        margin-bottom: 31rem;
      }
      p {
        font-size: 16rem;
        margin-bottom: 16rem;
        br {
          display: none;
        }
      }
    }
  }
}
.lb-furniture {
  padding-top: 190rem;
  padding-bottom: 200rem;
  background: url(../img/furniture.webp) center center no-repeat,var(--color-gray);
  background-size: cover;
  color: #fff;
  .lb-ttl {
    margin-bottom: 78rem;
    hr {
      background: #fff;
    }
  }
  .hr {
    background: rgba(255,255,255,.2);
    margin-bottom: 140rem;
  }
  .lead {
    padding-bottom: 120rem;
    p {
      font-size: 20rem;
      font-weight: 400;
      line-height: 1.8;
    }
  }
  .img {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 40rem 29rem;
    padding-bottom: 24rem;
    li {
      position: relative;
      img {
        display: block;
      }
      span {
        display: inline-block;
        padding: 12rem 20rem;
        background: var(--color-primary);
        color: #fff;
        font-size: 20rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
  }
}
@media (max-width: 767px) {
  .lb-furniture {
    padding-top: 100rem;
    padding-bottom: 100rem;
    background: url(../img/furniture-sp.webp) center center no-repeat,var(--color-gray);
    background-size: cover;
    .lb-ttl {
      margin-bottom: 56rem;
    }
    .hr {
      display: none;
    }
    .lead {
      padding-bottom: 88rem;
      p {
        font-size: 16rem;
        line-height: 1.5;
      }
    }
    .img {
      grid-template-columns: repeat(2,1fr);
      gap: 14rem 7rem;
      li {
        span {
          padding: 6rem 12rem;
          font-size: 12rem;
        }
      }
    }
  }
  .att {
    font-size: 14rem;
  }
}
.lb-lounge {
  padding-top: 190rem;
  padding-bottom: 200rem;
  background: #F4F4F4;
  position: relative;
  z-index: -1;
  &::before,&::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
  }
  &::before {
    width: 660rem;
    height: 466rem;
    background: var(--color-primary);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    top: 0;
    right: 0;
  }
  &::after {
    width: 200rem;
    aspect-ratio: 50 / 89;
    background: url(../img/tree6@2x.webp) center no-repeat;
    background-size: contain;
    right: 0;
    bottom: 0;
  }
  .lb-ttl {
    margin-bottom: 78rem;
  }
  .hr {
    background: rgba(77,77,77,.2);
    margin-bottom: 140rem;
  }
  h3 {
    font-size: 32rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 74rem;
  }
  .flb {
    padding-left: max(40rem,calc((100% - 1360rem) / 2));
    display: flex;
    justify-content: space-between;
    margin-bottom: 160rem;
    figure {
      width: 49%;
    }
    .txt {
      width: 50%;
      div.fade {
        margin-bottom: 44rem;
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
  .map {
    aspect-ratio: 17 / 10;
    iframe {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
#map {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .lb-lounge {
    padding-top: 80rem;
    padding-bottom: 100rem;
    &::before {
      width: 274rem;
      height: 184rem;
    }
    &::after {
      width: 120rem;
    }
    .lb-ttl {
      margin-bottom: 56rem;
    }
    .hr {
      display: none;
    }
    h3 {
      font-size: 28rem;
      margin-bottom: 48rem;
      line-height: 1.5;
    }
    .flb {
      padding-left: 24rem;
      justify-content: flex-start;
      flex-direction: column-reverse;
      margin-bottom: 40rem;
      figure {
        width: 100%;
        margin-bottom: 32rem;
      }
      .txt {
        width: 100%;
        padding-right: 24rem;
        .fade {
          margin-bottom: 24rem;
        }
      }
    }
    .map {
      aspect-ratio: 327 / 280;
    }
  }
}