@charset "UTF-8";
/* =========================
変数 
============================*/
body {
  --s-val: 10px;
  --max-w-menu: 1635px;
  --w-menu: 87vw;
  --base-color: #000;
  --base-color-2: #555;
  --color-dark-blue: #052850;
  --border-color: #555;
  --color-bg-main: #E7E4DD;
  --color-bg-gray: #F7F7F7;
}

/* レスポンシブ */
@media screen and (max-width: 767px) {
  body {
    --s-val: 9px;
  }
}
@media screen and (max-width: 540px) {
  body {
    --w-menu: 100%;
  }
}
/* =========================
ページ内共通 
============================*/
body {
  --page-pdg-inline: calc(var(--s-val) * 2);
  --max-w-out: calc(1200px + calc(var(--page-pdg-inline) * 2));
  --max-w-in: calc(1100px + calc(var(--page-pdg-inline) * 2));
  --max-w-offset: calc(1320 / 1440 * 100%);
  --color-bg-txt: #C7C7C7;
  --border-position: 8.3vw;
}

.page-main img {
  display: block;
}

.cta-banner {
  position: fixed;
  right: 0;
  top: calc(var(--s-val) * 20);
  z-index: 990;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: 0.15em;
  color: #fff;
  background-color: var(--color-dark-blue);
  padding: calc(var(--s-val) * 1) calc(var(--s-val) * 0.5);
  aspect-ratio: 60/170;
  height: calc(var(--s-val) * 17);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-top-left-radius: calc(var(--s-val) * 1);
  border-bottom-left-radius: calc(var(--s-val) * 1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.cta-banner.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* レスポンシブ ============= */
@media screen and (min-width: 1100px) {
  body {
    --border-position: 6vw;
  }
}
@media screen and (max-width: 540px) {
  .cta-banner {
    border-radius: 0;
    top: auto;
    bottom: 0;
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
    width: 100%;
    aspect-ratio: initial;
    height: auto;
    padding: calc(var(--s-val) * 1.5) calc(var(--s-val) * 0.5);
  }
}
/* =========================
page-top 
============================*/
.page-top {
  border-bottom: 1px solid var(--border-color);
  padding: 0 0 calc(var(--s-val) * 6.3) var(--page-pdg-inline);
  position: relative;
}
.page-top::before {
  content: "";
  display: block;
  width: 100%;
  height: 180%;
  background-color: var(--color-bg-main);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.page-top__lead {
  -webkit-padding-start: calc(var(--s-val) * 5);
          padding-inline-start: calc(var(--s-val) * 5);
  width: 92.7%;
  margin-inline: auto 0;
}
.page-top__heading {
  font-size: calc(var(--s-val) * 4);
  color: var(--color-dark-blue);
}
.page-top__content {
  -webkit-margin-before: calc(var(--s-val) * 1);
          margin-block-start: calc(var(--s-val) * 1);
}

/* レスポンシブ ============= */
@media screen and (max-width: 960px) {
  .page-top::before {
    height: 100%;
  }
  .page-top__lead {
    -webkit-padding-start: calc(var(--s-val) * 5);
            padding-inline-start: calc(var(--s-val) * 5);
    width: 92.7%;
    margin-inline: auto 0;
    position: relative;
  }
  .page-top__lead::after {
    content: "";
    display: block;
    width: 1px;
    height: 335%;
    background-color: var(--border-color);
    position: absolute;
    top: calc(var(--s-val) * 1.2);
    left: 0;
    z-index: -1;
  }
}
@media screen and (max-width: 767px) {
  .page-top {
    padding: 0 var(--page-pdg-inline) calc(var(--s-val) * 6.3);
  }
  .page-top__lead {
    width: 88.5%;
    padding: 0;
  }
  .page-top__lead::after {
    left: -6vw;
  }
  .page-top__heading {
    font-size: calc(var(--s-val) * 3.5);
    line-height: 1.4em;
  }
}
/* =========================
fv 
============================*/
.fv {
  position: relative;
}
.fv__main {
  position: relative;
}
.fv__lead-wrap {
  max-width: 534px;
  width: 40%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  background-color: #fff;
  padding: calc(var(--s-val) * 5) calc(var(--s-val) * 3) calc(var(--s-val) * 7);
}
.fv__lead {
  max-width: 334px;
  margin-inline: auto;
}
.fv__heading {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.2em;
}
.fv__content p {
  -webkit-margin-before: calc(var(--s-val) * 2);
          margin-block-start: calc(var(--s-val) * 2);
}
.fv__content p:first-of-type {
  -webkit-margin-before: calc(var(--s-val) * 2.5);
          margin-block-start: calc(var(--s-val) * 2.5);
}
.fv__slider {
  width: 91.875%;
  margin-inline: auto 0;
  position: relative;
}
.fv__slider::after {
  content: "";
  display: block;
  width: 1px;
  height: 50%;
  background-color: var(--border-color);
  position: absolute;
  top: calc(var(--s-val) * -15);
  left: -1px;
  z-index: -1;
}
.fv .slick-dotted.slick-slider {
  margin-bottom: calc(var(--s-val) * 13);
}
.fv .slick-dots {
  bottom: -65px;
  width: 38%;
}
.fv__slider-img {
  aspect-ratio: 1323/597;
  width: 100%;
}
.fv__slider-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.fv__sub-img {
  max-width: 580px;
  width: 53%;
  position: absolute;
  right: 4%;
  bottom: calc(var(--s-val) * 7);
}
.fv__bg-txt {
  font-size: calc(var(--s-val) * 7.3);
  font-weight: 500;
  line-height: 1.15em;
  color: var(--color-bg-txt);
  opacity: 0.5;
  width: 86%;
  margin-inline: auto;
  padding-inline: var(--page-pdg-inline);
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .fv__lead-wrap {
    max-width: 420px;
    padding: calc(var(--s-val) * 4) calc(var(--s-val) * 3) calc(var(--s-val) * 3);
  }
  .fv__heading {
    font-size: calc(var(--s-val) * 3.5);
  }
  .fv__content p:first-of-type {
    -webkit-margin-before: calc(var(--s-val) * 2);
            margin-block-start: calc(var(--s-val) * 2);
  }
}
@media screen and (max-width: 960px) {
  .fv__lead-wrap {
    max-width: 100%;
    width: 100%;
    position: initial;
    -webkit-transform: initial;
            transform: initial;
    background: none;
    padding: calc(var(--s-val) * 6) var(--page-pdg-inline) calc(var(--s-val) * 3) 15%;
  }
  .fv__lead {
    max-width: 100%;
  }
  .fv__slider {
    width: 100%;
    max-width: 100%;
  }
  .fv__slider-img {
    aspect-ratio: 3/2;
  }
  .fv .slick-dots {
    bottom: -29px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 4%;
  }
  .fv .slick-dotted.slick-slider {
    margin-bottom: calc(var(--s-val) * 5);
  }
  .fv__bg-txt {
    font-size: calc(var(--s-val) * 4);
    width: 100%;
    padding-inline: 5% var(--page-pdg-inline);
  }
  .fv__sub-img {
    width: 45%;
    bottom: 4%;
  }
}
@media screen and (max-width: 540px) {
  .fv__content br {
    display: none;
  }
  .fv .slick-dotted.slick-slider {
    margin-bottom: calc(var(--s-val) * 4);
  }
  .fv__bg-txt {
    padding-inline: 5% var(--page-pdg-inline);
  }
}
/* =========================
roof 
============================*/
.roof {
  padding: 0 var(--page-pdg-inline) 0 0;
  -webkit-margin-before: 7%;
          margin-block-start: 7%;
}
.roof__block {
  max-width: var(--max-w-offset);
  width: 100%;
  margin-inline: 0 auto;
  position: relative;
}
.roof__block::before {
  content: "";
  display: block;
  width: 100%;
  height: 79%;
  background-color: var(--color-bg-gray);
  position: absolute;
  top: 16%;
  left: 0;
  z-index: -10;
}
.roof__block::after {
  content: "";
  display: block;
  width: 1px;
  height: 150%;
  background-color: var(--border-color);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.roof__item {
  --w-img: calc(810 / 1320 * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.roof__txt {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: 0.15em;
  width: calc(100% - var(--w-img));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 calc(var(--s-val) * 5);
}
.roof__heading {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.6em;
}
.roof__content {
  margin-right: calc(var(--s-val) * 3.2);
}
.roof__content p {
  line-height: 2.5em;
}
.roof__img {
  width: var(--w-img);
  position: relative;
}
.roof__sub-img {
  width: 70%;
  position: absolute;
  bottom: -46%;
  left: 5%;
}
.roof__bg-txt {
  text-align: right;
  font-size: calc(var(--s-val) * 5.8);
  font-weight: 500;
  line-height: 1.15em;
  color: var(--color-bg-txt);
  opacity: 0.5;
  -webkit-margin-before: calc(var(--s-val) * 18);
          margin-block-start: calc(var(--s-val) * 18);
  -webkit-padding-end: calc(var(--s-val) * 6);
          padding-inline-end: calc(var(--s-val) * 6);
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .roof__item {
    --w-img: 50%;
  }
}
@media screen and (max-width: 960px) {
  .roof__block {
    max-width: 95%;
  }
  .roof__block::before {
    top: 5.5%;
    height: 91.5%;
  }
  .roof__block::after {
    height: 170%;
  }
  .roof__item {
    --w-img: 94%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--s-val) * 4);
  }
  .roof__txt {
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
    white-space: initial;
    width: 94%;
    padding: 0 0 0 calc(var(--s-val) * 5);
  }
  .roof__heading {
    font-size: calc(var(--s-val) * 3.5);
    line-height: 1.2em;
  }
  .roof__content {
    -webkit-margin-before: 2%;
            margin-block-start: 2%;
    max-width: 525px;
    margin-right: 0;
  }
  .roof__content p {
    line-height: 2em;
  }
  .roof__content br {
    display: none;
  }
  .roof__bg-txt {
    -webkit-margin-before: 35%;
            margin-block-start: 35%;
    -webkit-padding-end: 5%;
            padding-inline-end: 5%;
  }
}
@media screen and (max-width: 540px) {
  .roof {
    -webkit-margin-before: 12%;
            margin-block-start: 12%;
  }
  .roof__block::before {
    top: 7%;
    height: 89%;
  }
  .roof__block::after {
    height: 111%;
  }
  .roof__txt {
    padding: 0 0 0 6%;
  }
  .roof__heading br {
    display: none;
  }
  .roof__content {
    -webkit-margin-before: 4%;
            margin-block-start: 4%;
  }
}
/* =========================
spa 
============================*/
.spa {
  padding: calc(var(--s-val) * 11) 0 0 var(--page-pdg-inline);
  -webkit-margin-before: 10.5%;
          margin-block-start: 10.5%;
  border-top: 1px solid var(--border-color);
}
.spa__block {
  max-width: var(--max-w-offset);
  width: 100%;
  margin-inline: auto 0;
  position: relative;
}
.spa__block::before {
  content: "";
  display: block;
  width: 100%;
  height: 77%;
  background-color: var(--color-bg-gray);
  position: absolute;
  top: 18%;
  left: 0;
  z-index: -10;
}
.spa__block::after {
  content: "";
  display: block;
  width: 1px;
  height: 150%;
  background-color: var(--border-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.spa__item {
  --w-img: calc(810 / 1320 * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.spa__txt {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: 0.15em;
  width: calc(100% - var(--w-img));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 calc(var(--s-val) * 5);
}
.spa__heading {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.6em;
}
.spa__content {
  margin-right: calc(var(--s-val) * 3.2);
}
.spa__content p {
  line-height: 2.5em;
}
.spa__img {
  width: var(--w-img);
  position: relative;
}
.spa__sub-img {
  width: 83%;
  position: absolute;
  bottom: -62%;
  left: 8%;
}
.spa__bg-txt {
  font-size: calc(var(--s-val) * 5.8);
  font-weight: 500;
  line-height: 1.15em;
  color: var(--color-bg-txt);
  opacity: 0.5;
  -webkit-margin-before: calc(var(--s-val) * 18);
          margin-block-start: calc(var(--s-val) * 18);
  -webkit-padding-start: calc(var(--s-val) * 8);
          padding-inline-start: calc(var(--s-val) * 8);
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .spa__item {
    --w-img: 50%;
  }
}
@media screen and (max-width: 960px) {
  .spa__block {
    max-width: 95%;
  }
  .spa__block::before {
    top: 5.5%;
    height: 91.5%;
  }
  .spa__block::after {
    height: 160%;
  }
  .spa__item {
    --w-img: 94%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--s-val) * 4);
  }
  .spa__txt {
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
    white-space: initial;
    width: 94%;
  }
  .spa__heading {
    font-size: calc(var(--s-val) * 3.5);
    line-height: 1.2em;
  }
  .spa__content {
    -webkit-margin-before: 2%;
            margin-block-start: 2%;
    max-width: 525px;
    margin-right: 0;
  }
  .spa__content p {
    line-height: 2em;
  }
  .spa__content br {
    display: none;
  }
  .spa__img {
    margin-inline: auto 0;
  }
  .spa__bg-txt {
    -webkit-margin-before: 45%;
            margin-block-start: 45%;
    padding-inline: 6% 5%;
  }
}
@media screen and (max-width: 540px) {
  .spa {
    -webkit-margin-before: 10%;
            margin-block-start: 10%;
    padding: 18% 0 0 var(--page-pdg-inline);
  }
  .spa__block::before {
    top: 7%;
    height: 89%;
  }
  .spa__block::after {
    height: 113%;
  }
  .spa__txt {
    padding: 0 3% 0 7%;
  }
  .spa__heading br {
    display: none;
  }
  .spa__content {
    -webkit-margin-before: 4%;
            margin-block-start: 4%;
  }
}
/* =========================
kitchen 
============================*/
.kitchen {
  padding: calc(var(--s-val) * 11) 0 0 var(--page-pdg-inline);
  -webkit-margin-before: 15%;
          margin-block-start: 15%;
  border-top: 1px solid var(--border-color);
}
.kitchen__block {
  max-width: var(--max-w-offset);
  width: 100%;
  margin-inline: 0 auto;
  position: relative;
}
.kitchen__block::before {
  content: "";
  display: block;
  width: 100%;
  height: 79%;
  background-color: var(--color-bg-gray);
  position: absolute;
  top: 16%;
  left: 0;
  z-index: -10;
}
.kitchen__block::after {
  content: "";
  display: block;
  width: 1px;
  height: 150%;
  background-color: var(--border-color);
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.kitchen__item {
  --w-img: calc(810 / 1320 * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.kitchen__txt {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: 0.15em;
  width: calc(100% - var(--w-img));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 calc(var(--s-val) * 5);
}
.kitchen__heading {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.6em;
}
.kitchen__content {
  margin-right: calc(var(--s-val) * 3.2);
}
.kitchen__content p {
  line-height: 2.5em;
}
.kitchen__img {
  width: var(--w-img);
  position: relative;
}
.kitchen__sub-img {
  width: 83%;
  position: absolute;
  bottom: -61%;
  left: 5%;
}
.kitchen__bg-txt {
  text-align: right;
  font-size: calc(var(--s-val) * 5.8);
  font-weight: 500;
  line-height: 1.15em;
  color: var(--color-bg-txt);
  opacity: 0.5;
  -webkit-margin-before: calc(var(--s-val) * 18);
          margin-block-start: calc(var(--s-val) * 18);
  -webkit-padding-end: calc(var(--s-val) * 6);
          padding-inline-end: calc(var(--s-val) * 6);
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .kitchen__item {
    --w-img: 50%;
  }
}
@media screen and (max-width: 960px) {
  .kitchen {
    -webkit-margin-before: 9%;
            margin-block-start: 9%;
    padding: calc(var(--s-val) * 11) 0 0 0;
  }
  .kitchen__block {
    max-width: 95%;
  }
  .kitchen__block::before {
    top: 5.5%;
    height: 91.5%;
  }
  .kitchen__block::after {
    height: 170%;
  }
  .kitchen__item {
    --w-img: 94%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--s-val) * 4);
  }
  .kitchen__txt {
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
    white-space: initial;
    width: 94%;
    padding: 0 0 0 13.5%;
  }
  .kitchen__heading {
    font-size: calc(var(--s-val) * 3.5);
    line-height: 1.2em;
  }
  .kitchen__content {
    -webkit-margin-before: 2%;
            margin-block-start: 2%;
    max-width: 525px;
    margin-right: 0;
  }
  .kitchen__content p {
    line-height: 2em;
  }
  .kitchen__content br {
    display: none;
  }
  .kitchen__bg-txt {
    -webkit-margin-before: 42%;
            margin-block-start: 42%;
    -webkit-padding-end: 5%;
            padding-inline-end: 5%;
  }
}
@media screen and (max-width: 540px) {
  .kitchen {
    -webkit-margin-before: 12%;
            margin-block-start: 12%;
  }
  .kitchen__block::before {
    top: 7%;
    height: 89%;
  }
  .kitchen__block::after {
    height: 111%;
  }
  .kitchen__txt {
    padding: 0 0 0 9%;
  }
  .kitchen__heading br {
    display: none;
  }
  .kitchen__content {
    -webkit-margin-before: 4%;
            margin-block-start: 4%;
  }
}
/* =========================
work 
============================*/
.work {
  padding: calc(var(--s-val) * 11) 0 0 var(--page-pdg-inline);
  -webkit-margin-before: 16.5%;
          margin-block-start: 16.5%;
  border-top: 1px solid var(--border-color);
}
.work__block {
  max-width: var(--max-w-offset);
  width: 100%;
  margin-inline: auto 0;
  position: relative;
}
.work__block::before {
  content: "";
  display: block;
  width: 100%;
  height: 77%;
  background-color: var(--color-bg-gray);
  position: absolute;
  top: 18%;
  left: 0;
  z-index: -10;
}
.work__block::after {
  content: "";
  display: block;
  width: 1px;
  height: 150%;
  background-color: var(--border-color);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.work__item {
  --w-img: calc(810 / 1320 * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.work__txt {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: 0.15em;
  width: calc(100% - var(--w-img));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 calc(var(--s-val) * 5);
}
.work__heading {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.6em;
}
.work__content {
  margin-right: calc(var(--s-val) * 3.2);
}
.work__content p {
  line-height: 2.5em;
}
.work__img {
  width: var(--w-img);
  position: relative;
}
.work__sub-img {
  width: 79%;
  position: absolute;
  bottom: -63%;
  left: 12%;
}
.work__bg-txt {
  font-size: calc(var(--s-val) * 5.8);
  font-weight: 500;
  line-height: 1.15em;
  color: var(--color-bg-txt);
  opacity: 0.5;
  -webkit-margin-before: calc(var(--s-val) * 18);
          margin-block-start: calc(var(--s-val) * 18);
  -webkit-padding-start: calc(var(--s-val) * 8);
          padding-inline-start: calc(var(--s-val) * 8);
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .work__item {
    --w-img: 50%;
  }
}
@media screen and (max-width: 960px) {
  .work {
    -webkit-margin-before: 9%;
            margin-block-start: 9%;
  }
  .work__block {
    max-width: 95%;
  }
  .work__block::before {
    top: 5.5%;
    height: 91.5%;
  }
  .work__block::after {
    height: 160%;
  }
  .work__item {
    --w-img: 94%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--s-val) * 4);
  }
  .work__txt {
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
    white-space: initial;
    width: 94%;
  }
  .work__heading {
    font-size: calc(var(--s-val) * 3.5);
    line-height: 1.2em;
  }
  .work__content {
    -webkit-margin-before: 2%;
            margin-block-start: 2%;
    max-width: 525px;
    margin-right: 0;
  }
  .work__content p {
    line-height: 2em;
  }
  .work__content br {
    display: none;
  }
  .work__img {
    margin-inline: auto 0;
  }
  .work__bg-txt {
    -webkit-margin-before: 40%;
            margin-block-start: 40%;
    padding-inline: 6% 5%;
  }
}
@media screen and (max-width: 540px) {
  .work {
    -webkit-margin-before: 10%;
            margin-block-start: 10%;
    padding: 18% 0 0 var(--page-pdg-inline);
  }
  .work__block::before {
    top: 7%;
    height: 89%;
  }
  .work__block::after {
    height: 113%;
  }
  .work__txt {
    padding: 0 0 0 7%;
  }
  .work__heading br {
    display: none;
  }
  .work__content {
    -webkit-margin-before: 4%;
            margin-block-start: 4%;
  }
  .work__bg-txt {
    -webkit-margin-before: 38%;
            margin-block-start: 38%;
    padding-inline: 6%;
  }
}
/* =========================
kids 
============================*/
.kids {
  padding: calc(var(--s-val) * 11) 0 0 var(--page-pdg-inline);
  -webkit-margin-before: 15%;
          margin-block-start: 15%;
  border-top: 1px solid var(--border-color);
}
.kids__block {
  max-width: var(--max-w-offset);
  width: 100%;
  margin-inline: 0 auto;
  position: relative;
}
.kids__block::before {
  content: "";
  display: block;
  width: 100%;
  height: 79%;
  background-color: var(--color-bg-gray);
  position: absolute;
  top: 16%;
  left: 0;
  z-index: -10;
}
.kids__block::after {
  content: "";
  display: block;
  width: 1px;
  height: 135%;
  background-color: var(--border-color);
  position: absolute;
  top: -40%;
  right: 0;
  z-index: -1;
}
.kids__item {
  --w-img: calc(810 / 1320 * 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.kids__txt {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  white-space: nowrap;
  letter-spacing: 0.15em;
  width: calc(100% - var(--w-img));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0 calc(var(--s-val) * 5);
}
.kids__heading {
  font-size: calc(var(--s-val) * 4);
  line-height: 1.6em;
}
.kids__content {
  margin-right: calc(var(--s-val) * 3.2);
}
.kids__content p {
  line-height: 2.5em;
}
.kids__img {
  width: var(--w-img);
  position: relative;
}
.kids__sub-img {
  width: 79%;
  position: absolute;
  bottom: -58%;
  left: 5%;
}
.kids__bg-txt {
  text-align: right;
  font-size: calc(var(--s-val) * 5.8);
  font-weight: 500;
  line-height: 1.15em;
  color: var(--color-bg-txt);
  opacity: 0.5;
  -webkit-margin-before: calc(var(--s-val) * 18);
          margin-block-start: calc(var(--s-val) * 18);
  -webkit-padding-end: calc(var(--s-val) * 6);
          padding-inline-end: calc(var(--s-val) * 6);
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .kids__item {
    --w-img: 50%;
  }
}
@media screen and (max-width: 960px) {
  .kids {
    -webkit-margin-before: 9%;
            margin-block-start: 9%;
    padding: calc(var(--s-val) * 11) 0 0 0;
  }
  .kids__block {
    max-width: 95%;
  }
  .kids__block::before {
    top: 5.5%;
    height: 91.5%;
  }
  .kids__block::after {
    height: 142%;
    top: -45%;
  }
  .kids__item {
    --w-img: 94%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--s-val) * 4);
  }
  .kids__txt {
    -webkit-writing-mode: initial;
        -ms-writing-mode: initial;
            writing-mode: initial;
    white-space: initial;
    width: 94%;
    padding: 0 0 0 13.5%;
  }
  .kids__heading {
    font-size: calc(var(--s-val) * 3.5);
    line-height: 1.2em;
  }
  .kids__content {
    -webkit-margin-before: 2%;
            margin-block-start: 2%;
    max-width: 525px;
    margin-right: 0;
  }
  .kids__content p {
    line-height: 2em;
  }
  .kids__content br {
    display: none;
  }
  .kids__bg-txt {
    -webkit-margin-before: 42%;
            margin-block-start: 42%;
    -webkit-padding-end: 5%;
            padding-inline-end: 5%;
  }
}
@media screen and (max-width: 540px) {
  .kids {
    -webkit-margin-before: 12%;
            margin-block-start: 12%;
  }
  .kids__block::before {
    top: 7%;
    height: 89%;
  }
  .kids__block::after {
    height: 142%;
    top: -46%;
  }
  .kids__txt {
    padding: 0 0 0 9%;
  }
  .kids__heading br {
    display: none;
  }
  .kids__content {
    -webkit-margin-before: 4%;
            margin-block-start: 4%;
  }
}
/* =========================
gallery 
============================*/
.gallery {
  border-top: 1px solid var(--border-color);
  padding: calc(var(--s-val) * 10) var(--page-pdg-inline) 0;
  -webkit-margin-before: 20%;
          margin-block-start: 20%;
  position: relative;
}
.gallery::before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: var(--color-bg-main);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.gallery::after {
  content: "";
  display: block;
  width: 1px;
  height: 108%;
  background-color: var(--border-color);
  position: absolute;
  top: -8%;
  left: var(--border-position);
  z-index: -1;
}
.gallery__lead {
  text-align: center;
}
.gallery__heading {
  color: var(--color-dark-blue);
  font-size: calc(var(--s-val) * 4);
  font-weight: bold;
}
.gallery__sub-heading {
  font-size: calc(var(--s-val) * 2.8);
  -webkit-margin-before: calc(var(--s-val) * 1);
          margin-block-start: calc(var(--s-val) * 1);
}
.gallery__content {
  -webkit-margin-before: calc(var(--s-val) * 1.5);
          margin-block-start: calc(var(--s-val) * 1.5);
}
.gallery__block {
  max-width: var(--max-w-in);
  margin-inline: auto;
  padding-inline: var(--page-pdg-inline);
  -webkit-margin-before: calc(var(--s-val) * 7);
          margin-block-start: calc(var(--s-val) * 7);
}
.gallery__item {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 265px));
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(var(--s-val) * 1.3);
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .gallery {
    -webkit-margin-before: 10%;
            margin-block-start: 10%;
    padding: calc(var(--s-val) * 8) var(--page-pdg-inline) 0;
  }
  .gallery::after {
    height: 103%;
    top: -3%;
  }
  .gallery__lead {
    padding-inline: 10%;
  }
  .gallery__content {
    max-width: 560px;
    margin-inline: auto;
  }
}
@media screen and (max-width: 767px) {
  .gallery::before {
    height: 42%;
  }
  .gallery::after {
    height: 36%;
    top: -5%;
  }
  .gallery__heading {
    font-size: calc(var(--s-val) * 3.5);
  }
  .gallery__sub-heading {
    font-size: calc(var(--s-val) * 2.5);
  }
  .gallery__block {
    padding: 0;
  }
  .gallery__item {
    grid-template-columns: repeat(auto-fit, minmax(150px, 150px));
  }
}
/* =========================
showroom 
============================*/
.showroom {
  border-top: 1px solid var(--border-color);
  padding: calc(var(--s-val) * 10) var(--page-pdg-inline) 0;
  -webkit-margin-before: 20%;
          margin-block-start: 20%;
  position: relative;
}
.showroom::before {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background-color: var(--color-bg-main);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}
.showroom::after {
  content: "";
  display: block;
  width: 1px;
  height: 108%;
  background-color: var(--border-color);
  position: absolute;
  top: -8%;
  right: var(--border-position);
  z-index: -1;
}
.showroom__lead {
  text-align: center;
}
.showroom__heading {
  color: var(--color-dark-blue);
  font-size: calc(var(--s-val) * 4);
  font-weight: bold;
}
.showroom__sub-heading {
  font-size: calc(var(--s-val) * 2.8);
  -webkit-margin-before: calc(var(--s-val) * 1);
          margin-block-start: calc(var(--s-val) * 1);
  line-height: 1.5em;
}
.showroom__block {
  max-width: var(--max-w-in);
  margin-inline: auto;
  padding-inline: var(--page-pdg-inline);
  -webkit-margin-before: calc(var(--s-val) * 7);
          margin-block-start: calc(var(--s-val) * 7);
}
.showroom__item {
  max-width: 789px;
  width: 100%;
  margin-inline: auto;
}
.showroom__info {
  -webkit-margin-before: calc(var(--s-val) * 8);
          margin-block-start: calc(var(--s-val) * 8);
}
.showroom table, .showroom tbody {
  width: 100%;
}
.showroom table, .showroom td, .showroom th {
  border-collapse: collapse;
}
.showroom th, .showroom td {
  border-top: 1px solid #C7C7C7;
  padding: calc(var(--s-val) * 1.5) calc(var(--s-val) * 2);
}
.showroom tr:last-of-type th, .showroom tr:last-of-type td {
  border-bottom: 1px solid #C7C7C7;
}
.showroom th {
  background: var(--color-bg-gray);
  width: 31.6%;
  text-align: left;
}
.showroom th p {
  max-width: 4em;
  margin-inline: auto;
}
.showroom td {
  background-color: #fff;
  width: 68.4%;
}
.showroom td p {
  max-width: 350px;
  margin-inline: auto;
}
.showroom__access {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: calc(var(--s-val) * 2);
  -webkit-margin-before: calc(var(--s-val) * 6);
          margin-block-start: calc(var(--s-val) * 6);
}
.showroom__access-item {
  width: 100%;
}
.showroom__access-ttl {
  background-color: var(--color-bg-gray);
  padding: calc(var(--s-val) * 1) calc(var(--s-val) * 2);
  font-size: calc(var(--s-val) * 1.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(var(--s-val) * 1.5);
}
.showroom__access-item--train .showroom__access-ttl::before {
  content: "";
  display: block;
  width: calc(var(--s-val) * 2);
  aspect-ratio: 80/112;
  background: url(../images/common/icon-train.webp) no-repeat;
  background-size: contain;
}
.showroom__access-item--car .showroom__access-ttl::before {
  content: "";
  display: block;
  width: calc(var(--s-val) * 3);
  aspect-ratio: 120/92;
  background: url(../images/common/icon-car.webp) no-repeat;
  background-size: contain;
}
.showroom__access-content {
  -webkit-margin-before: calc(var(--s-val) * 2);
          margin-block-start: calc(var(--s-val) * 2);
}
.showroom__access-content p {
  line-height: 1.8em;
}

/* レスポンシブ ============= */
@media screen and (max-width: 1100px) {
  .showroom {
    padding: calc(var(--s-val) * 9) var(--page-pdg-inline) 0;
    -webkit-margin-before: 15%;
            margin-block-start: 15%;
  }
  .showroom::after {
    height: 68.6%;
  }
  .showroom__lead {
    padding-inline: 10%;
  }
}
@media screen and (max-width: 767px) {
  .showroom {
    padding: 17% var(--page-pdg-inline) 0;
  }
  .showroom::before {
    height: 38%;
  }
  .showroom::after {
    height: 28%;
    top: -6%;
  }
  .showroom__heading {
    font-size: calc(var(--s-val) * 3.5);
  }
  .showroom__sub-heading {
    font-size: calc(var(--s-val) * 2.5);
    line-height: 1.3em;
  }
  .showroom__block {
    -webkit-margin-before: calc(var(--s-val) * 5.5);
            margin-block-start: calc(var(--s-val) * 5.5);
  }
  .showroom__info {
    -webkit-margin-before: 9%;
            margin-block-start: 9%;
  }
  .showroom__access {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--s-val) * 4);
    -webkit-margin-before: 9%;
            margin-block-start: 9%;
  }
  .showroom__access-item {
    max-width: 100%;
  }
}
/* =========================
map 
============================*/
.map {
  -webkit-margin-before: calc(var(--s-val) * 16);
          margin-block-start: calc(var(--s-val) * 16);
}
.map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 1440/654;
}

/* レスポンシブ ============= */
@media screen and (max-width: 767px) {
  .map {
    -webkit-margin-before: calc(var(--s-val) * 12);
            margin-block-start: calc(var(--s-val) * 12);
  }
}