@charset "UTF-8";
/* CSS Document */

.webfont {
  transform: rotate(0.001deg);
}
.over {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.aspect {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.imgLarge img {
  aspect-ratio: 6 / 4;
  object-fit: cover;
}

/* セクション全体 */
.headSection {
  width: 100%;
  overflow: hidden;
  padding-top: 130px !important;
  padding-bottom: 0 !important;
}

/* ヘッダー・テキスト領域 */
.Head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.Head .inner {
  display: inline-block;
}

/* 'ROOMS'（上からふわっとフェードイン） */
.Head .en {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-size: clamp(3.2rem, 6.6vw, 6.6rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  opacity: 0;
  animation: headFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* '客室紹介'（ROOMSに少し遅れてフェードイン） */
.Head h1 {
  font-weight: 500;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  letter-spacing: 0.1em;
  margin-top: clamp(8px, 1.2vw, 20px);
  line-height: 1.4;

  opacity: 0;
  animation: headFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

/* 中央の縦線（上から下へスーッと伸長） */
.Head .line {
  width: 1px;
  height: clamp(60px, 9vw, 130px);
  background-color: #000000;
  margin-top: clamp(25px, 7vw, 84px);
  margin-bottom: calc(clamp(60px, 9vw, 130px) * -0.5);
  position: relative;
  z-index: 3;

  /* 上端を起点に縦に伸ばす */
  transform-origin: top center;
  transform: scaleY(0);
  animation: lineGrowDown 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.45s forwards;
}

/* 写真エリア（伸びてきた線を受け止めるようにフェード＆微ズームアウト） */
.image-wrap {
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.image-wrap img {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 539; /* デザインカンプ通りの比率を自動維持 */
  max-height: 70vh; /* 縦が長すぎる超ワイド画面での溢れ防止（保険） */
  object-fit: cover;
  display: block;

  opacity: 0;
  animation: imageReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}

/* =========================================
   アニメーション定義（Keyframes）
   ========================================= */

/* テキスト：下からふんわり */
@keyframes headFadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 縦線：上から下へ伸びる */
@keyframes lineGrowDown {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

/* 画像：少し拡大した状態から収まりつつフェードイン */
@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- スマホ表示の最適化（幅 768px 以下） --- */
@media (max-width: 768px) {
  .headSection {
    padding-top: 65px;
  }
  .Head .en {
    letter-spacing: 0.08em;
  }
  .Head h1 {
    letter-spacing: 0.18em;
  }
  .image-wrap img {
    aspect-ratio: 6 / 4;
    object-fit: cover;
  }
}

/* =========================================
   MAPページ専用スタイル
   ========================================= */

/* 写真エリアのサイズ制限・中央配置・枠線・フェードイン */
.mapPage .image-wrap {
  max-width: 841px;
  width: 90%;
  margin-inline: auto;
  border: 1px solid #162d1f;
  box-sizing: border-box;

  /* 縦線到達後の画像表示タイミング（0.65s開始）に合わせて枠ごとフェードイン */
  opacity: 0;
  animation: mapFrameFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards;
}

/* PC時の画像サイズ・比率指定 */
.mapPage .image-wrap img {
  width: 100%;
  height: 482px;
  max-height: none;
  min-height: auto;
  object-fit: cover;
}

/* 枠線のフェードインアニメーション定義 */
@keyframes mapFrameFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* スマホ表示時（縮小に合わせてアスペクト比を維持） */
@media (max-width: 768px) {
  .mapPage .image-wrap {
    width: 91.5%;
  }

  .mapPage .image-wrap img {
    height: auto;
    aspect-ratio: 841 / 482;
  }
}

.fAddress h2,
.title1,
.ul4 > li h4 {
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  line-height: 2em;
  font-weight: 700;
  display: flex;
  align-items: center;
  grid-gap: 8px;
}

.subHead {
  margin-bottom: 32px;
}
.subHead > *:not(:last-child) {
  margin-bottom: 8px;
}
.subHead h2 {
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  line-height: 1.3em;
  font-weight: 500;
}
.subHead .en {
  color: #162d1f;
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1.1em;
}
h3 {
  font-size: clamp(1.8rem, 3.2vw, 3.2rem);
  line-height: 1.5em;
  font-weight: 500;
}
.lead {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.9em;
  font-weight: 500;
  text-align: center;
}
.num {
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.textR {
  text-align: right;
}
.width1 {
  max-width: 924px;
}

/* flex */
.flex,
.column2,
.column3,
.column4 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.column2 {
  grid-gap: 24px 80px;
}
.column3 {
  grid-gap: 24px 32px;
}
.column4 {
  grid-gap: 12px 40px;
}
.column2 > *,
.column3 > *,
.column4 > * {
  width: 100%;
}

/* COLOR */
.col1 {
  color: #162d1f;
}

/* BG */
.bg1 {
  background: #162d1f;
}
.bg1 * {
  color: #ffffff !important;
}
.bg2 {
  background: #e8f1fa;
}
.bg3 {
  background: #f0f0f0;
}
.bg4 {
  border: #c8c8c8 1px solid;
}
.bgW {
  background: #ffffff;
}

/* TRIANGLE */
.triangle {
  background: #000000;
  width: 60px;
  height: calc(tan(60deg) * 60px / 2);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tUp {
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tRight {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tDown {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tLeft {
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

/* BTN */
.btn {
  width: 100%;
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
}
.btn > * {
  background: #162d1f;
  color: #ffffff;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  line-height: 56px;
  font-weight: 700;
  text-align: center;
  border-radius: 40px;
  display: block;
}
.bg1 .btn > * {
  background: #ffffff;
  color: #162d1f !important;
}
.contactWrap {
  background: url("../images/common/contact_bg.jpg") center center no-repeat;
  background-size: cover;
  color: #ffffff;
  height: 60vw;
  padding: 24px 5.33%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contactWrap .inner > *:not(:last-child) {
  margin-bottom: 32px;
}
.contactWrap .textWrap h2 {
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  line-height: 1.5em;
  font-weight: 500;
}
.contactWrap .textWrap .en {
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.5em;
}
.contactWrap .lead {
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.8em;
}
.contactWrap .btn > * {
  background: #ffffff;
  color: #141414;
}
.home .contactWrap .inner > *:not(:last-child) {
  margin-bottom: 24px;
}

/* UL */
main ul:not([class]) > li,
main ul.space > li {
  padding-left: 1.6em;
  text-align: justify;
}
main ul:not([class]) > li::before,
main ul.space > li::before {
  content: "・";
  display: block;
  position: absolute;
  left: 0.3em;
  top: 0;
}
main ul.space > li:not(:last-child) {
  margin-bottom: 16px;
}
.ul1 > li:not(:last-child) {
  padding-bottom: 40px;
  margin-bottom: 40px;
}
.ul1 > li:not(:last-child)::after {
  content: "";
  border-bottom: #ffffff 1px solid;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
}
.ul1 > li > *:not(:last-child) {
  margin-bottom: 24px;
}
.ul1 h3 {
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 700;
}
.ul1 p {
  text-align: justify;
}
.ul2 > li {
  background: #ffffff;
  padding: 32px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 24px;
}
.ul2 > li:not(:last-child) {
  margin-bottom: 24px;
}
.ul2 > li .note > *:not(:last-child) {
  margin-bottom: 16px;
}
.ul2 > li .mapWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 32px 24px;
}
.ul2 > li .mapWrap .embed {
  padding-top: 76.25%;
}
.ul2 > li .imgWrap {
  border-top: #c8c8c8 1px solid;
  padding-top: 32px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 16px 24px;
}
.ul2 > li .imgWrap figure img {
  margin-bottom: 8px;
}
.ul2 > li .imgWrap figcaption {
  font-weight: 700;
}
.ul3 > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 24px 60px;
}
.ul3 > li:not(:last-child) {
  margin-bottom: 32px;
}
.ul3 > li .note > *:not(:last-child) {
  margin-bottom: 24px;
}
.ul4 > li {
  background: #e8f1fa;
  padding: 24px 16px;
}
.ul4 > li:not(:last-child) {
  margin-bottom: 16px;
}
.ul5 > li {
  border-bottom: #ffffff 1px solid;
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  grid-gap: 16px;
}
.ul5 > li:not(:last-child) {
  margin-bottom: 12px;
}
.ul6 {
}
.ul6 > li {
  border: #c8c8c8 1px solid;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ul6 > li h4 {
  font-size: clamp(1.7rem, 2vw, 2rem);
  line-height: 1.5em;
}
.ul6 > li .en {
  color: #969696;
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  line-height: 1.5em;
}
.ul7 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 24px 40px;
}
.ul7 > li {
  border: #ffffff 1px solid;
  width: 100%;
  padding: 32px 24px;
}
.ul7 > li > *:not(:last-child):not(.num) {
  margin-bottom: 16px;
}
.ol1 {
  counter-reset: item;
}
.ol1 > li:not(:last-child) {
  margin-bottom: 40px;
}
.ol1 > li > *:not(:last-child) {
  margin-bottom: 24px;
}
.ol1 > li > h3 {
  padding-left: 1.8em;
}
.ol1 > li > h3::before {
  font-family: "Inter", system-ui;
  counter-increment: item;
  content: counter(item, decimal-leading-zero);
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem);
  line-height: 1.5em;
  position: absolute;
  left: 0px;
  top: 0px;
}
.ol1 .ul3 > li {
  border: #c8c8c8 1px solid;
  padding: 32px 16px;
  grid-gap: 24px 48px;
}
.ol1 .ul3 > li .note h3 {
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
}
.ol1 .ul3 > li .note > *:not(:last-child) {
  margin-bottom: 16px;
}
.annotation {
}
.annotation > * {
  padding-left: 1.5em;
}
.annotation > *::before {
  content: "※";
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
}

/* DL */
dl:not([class]) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em 2em;
}
.dl1 {
  border-bottom: #c8c8c8 1px solid;
}
.dl1 > * {
  border-top: #c8c8c8 1px solid;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  grid-gap: 16px;
}
.dl1 dt {
  width: 26%;
  font-weight: 700;
}
.dl1 dd {
  flex: 1;
}
.dl1 dd > *:not(:last-child) {
  margin-bottom: 16px;
}

/* iframe */
.embed {
  width: 100%;
  padding-top: 56.25%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.embed iframe,
.embed object,
.embed embed {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Top */
.Main .over {
  text-align: right;
}
.Main .over::before {
  content: "";
  background: url("../images/top/bg1.png") center center no-repeat;
  background-size: contain;
  width: 30vw;
  height: 30vw;
  display: block;
  position: absolute;
  left: -3vw;
  bottom: -10vw;
}
.Main .over img {
  width: 80vw;
}
.Main h1 {
  position: absolute;
  left: 0;
  top: 6vw;
}
.Main h1 span {
  background: #000000;
  color: #ffffff;
  margin-bottom: 8px;
  padding: 8px 16px;
  font-size: clamp(2rem, 4.8vw, 4.8rem);
  line-height: 1.1em;
  font-weight: 600;
  display: block;
}
.home .Company .contWrap .note .en,
.home .Service .contWrap .note .en {
  font-family: "Inter", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(6rem, 10vw, 10rem);
  line-height: 1.1em;
  position: absolute;
}
.home .Company .contWrap .note > *:not(:last-child):not(h2),
.home .Service .contWrap .note > *:not(:last-child):not(h2) {
  margin-bottom: 32px;
}
.home .Company .contWrap .note > h2,
.home .Service .contWrap .note > h2 {
  margin-bottom: 24px;
}
.home .Company .itemWrap {
  text-align: center;
}
.home .Company .itemWrap {
  margin-bottom: 64px;
}
.home .Company .itemWrap > *:not(:last-child) {
  margin-bottom: 32px;
}
.home .Company .itemWrap h3 span {
  border-bottom: #162d1f 3px solid;
  padding-bottom: 8px;
  display: inline-block;
}
.home .Company .itemWrap .ul6 {
  display: flex;
  flex-wrap: wrap;
}
.home .Company .contWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 32px 100px;
}
.home .Company .contWrap .note .en {
  color: #f0f0f0;
}
.home .Company .contWrap .note p {
  text-align: justify;
}
.home .Service {
  background-image: url("../images/top/bg2.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100vw auto;
}
.home .Service .contWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 56px 0;
}
.home .Service .contWrap .note .en {
  color: rgba(0, 0, 0, 0.1) !important;
  mix-blend-mode: multiply;
}
.home .Service .contWrap .note .title1::before {
  color: #ffffff;
}

/* Page */
.Page .cont > *:not(:last-child) {
  margin-bottom: 48px;
}
.Page .contWrap {
  display: flex;
  justify-content: space-between;
  grid-gap: 32px 72px;
}
.Page .contWrap .note > *:not(:last-child) {
  margin-bottom: 32px;
}
.Page .contWrap .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Business */
main section:not(.Head):not(.full).Service.Page {
  padding-bottom: 0;
}
.serviceWrap .inner .bgW {
  padding: 0 16px;
}
.serviceWrap .inner .bgW > section:not(:last-child):not(.Link)::after {
  content: "";
  background: #162d1f;
  width: 100vw;
  height: 1px;
  display: block;
  position: absolute;
  left: calc(50% - 50vw);
  bottom: 0;
}
.serviceWrap .pNav {
  padding-top: 32px;
  font-weight: 700;
  display: flex;
  grid-gap: 2em;
}
.serviceWrap .pNav a {
  display: flex;
  align-items: center;
  grid-gap: 10px;
}
.serviceWrap .pNav a i {
  background: #162d1f;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
}
.serviceWrap .pNav a i::after {
  content: "";
  border-top: #ffffff 2px solid;
  border-right: #ffffff 2px solid;
  width: 0.4em;
  height: 0.4em;
  margin-left: 10px;
  display: block;
  position: absolute;
  left: calc(50% - 0.9em);
  top: calc(50% - 0.4em);
  transform: rotate(135deg);
}
.License h3 {
  text-align: center;
}

.Overview .partnerWrap {
  padding: 32px 16px;
}
.Overview .partnerWrap > *:not(:last-child) {
  margin-bottom: 8px;
}
.Overview .partnerWrap .column3 {
  grid-gap: 8px 32px;
}
.History {
}

.Contact.Page .telWrap,
.Contact.Page .formWrap {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 16px;
}
.Contact.Page .telWrap h3,
.Contact.Page .formWrap h3 {
  margin-bottom: 20px;
}
.telWrap {
  text-align: center;
}
.telWrap > *:not(:last-child) {
  margin-bottom: 10px;
}
.telWrap .num * {
  color: #162d1f;
}
.telWrap .num > *:not(:last-child) {
  margin-right: 10px;
}
.telWrap .num span {
  font-size: clamp(2.4rem, 3.8vw, 3.8rem);
  line-height: 1.2em;
}
.telWrap .num a {
  font-size: clamp(3.2rem, 5.6vw, 5.6rem);
  line-height: 1.2em;
}
.telWrap .hour {
  font-size: clamp(1.6rem, 2vw, 2rem);
  line-height: 1.2em;
}
.formWrap {
  text-align: center;
}

/*SP
-------------------------------------------------------*/
@media screen and (max-width: 767px) {
  /* flex */
  .flex:not(.flexFix) {
    flex-direction: column;
  }

  /* iframe */

  /* BTN*/

  /* UL */

  /* DL */

  /* Top */
  .home .Company,
  .home .Service {
    overflow: hidden;
  }
  .home .Company .itemWrap .sub > *:not(:first-child) {
    margin-bottom: -1vw;
  }
  .home .Company .itemWrap .sub .ul6 > *:not(:last-child) {
    margin-bottom: -1vw;
  }
  .home .Company .itemWrap .ul6 > li {
    width: 23%;
  }
  .home .Company .itemWrap .ul6 > li:not(:first-child) {
    margin-left: -2%;
  }
  .home .Company .itemWrap .ul6 > li:not(:first-child):nth-child(5) {
    margin-left: 10.5%;
  }
  .home .Company .contWrap .note .en,
  .home .Service .contWrap .note .en {
    left: -3rem;
    top: -36px;
  }
  .home .Service .contWrap .note h3 {
    margin-bottom: 0 !important;
  }

  /* Page */
  .Page .contWrap {
    flex-wrap: wrap;
  }
  .Page .contWrap .img {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: -56px;
  }

  .Requirements.Page .column2 {
    grid-gap: 0;
  }
  .Requirements.Page .column2 > *:not(:last-child).dl1 {
    border-bottom: none;
  }

  .formWrap iframe {
    height: 760px !important;
  }
}

/*PC
-------------------------------------------------------*/
@media print, screen and (min-width: 768px) {
  .imgLarge img {
    aspect-ratio: 4 / 1;
  }
  .Head h1 {
  }
  .subHead {
  }

  /* flex */
  .flex.sb {
    justify-content: space-between;
  }
  .flex.center {
    justify-content: center;
  }
  .flex.vcenter {
    align-items: center;
  }
  .column2 > * {
    width: calc((100% - 80px) / 2);
    height: auto;
  }
  .column3 > * {
    width: calc((100% - (32px * 2)) / 3);
    height: auto;
  }
  .column4 > * {
    width: calc((100% - (40px * 3)) / 4);
    height: auto;
  }

  /* BG */

  /* BTN */
  .btn {
  }
  .btn > * {
    width: 100%;
    height: 64px;
    padding: 0 16px;
    line-height: 64px;
  }
  .btn.pc {
    display: block;
  }
  .btn > *:hover {
    background: #162d1f;
    color: #ffffff;
  }
  .bg1 .btn > *:hover {
    background: #162d1f;
    color: #ffffff !important;
  }
  .contactWrap {
    height: 380px;
    padding: 40px;
  }
  .contactWrap .inner > *:not(:last-child) {
    margin-bottom: 48px;
  }
  .home .contactWrap {
    padding: 64px 40px;
  }
  .home .contactWrap .inner > *:not(:last-child) {
    margin-bottom: 32px;
  }
  .home .contactWrap .btn > *:hover {
    color: #ffffff;
  }

  /* UL */
  .ul1 > li:not(:last-child) {
    padding-bottom: 80px;
    margin-bottom: 80px;
  }
  .ul2 > li {
    padding: 40px 48px;
    grid-gap: 48px 24px;
  }
  .ul2 > li:not(:last-child) {
    margin-bottom: 48px;
  }
  .ul2 > li .note {
    width: 27%;
    max-width: 288px;
  }
  .ul2 > li .img,
  .ul2 > li .mapWrap {
    flex: 1;
  }
  .ul2 > li .mapWrap > * {
    width: calc((100% - 24px) / 2);
  }
  .ul2 > li .mapWrap .embed {
    padding-top: 32.25%;
  }
  .ul2 > li .imgWrap {
    padding-top: 48px;
  }
  .ul2 > li .imgWrap > * {
    width: calc((100% - 48px) / 3);
  }
  .ul3 > li:not(:last-child) {
    margin-bottom: 56px;
  }
  .ul3 > li .note {
    flex: 1;
  }
  .ul3 > li .note > *:not(:last-child) {
    margin-bottom: 32px;
  }
  .ul3 > li .img {
    width: 40%;
    max-width: 400px;
  }
  .ul4 > li {
    padding: 32px 40px;
  }
  .ul4 > li:not(:last-child) {
    margin-bottom: 24px;
  }
  .ul7 > li {
    width: calc((100% - 40px) / 2);
    padding: 32px 40px;
  }
  .ol1 > li:not(:last-child) {
    margin-bottom: 100px;
  }
  .ol1 > li > *:not(:last-child) {
    margin-bottom: 32px;
  }
  .ol1 .ul3 > li {
    padding: 48px;
  }
  .ol1 .ul3 > li .note > *:not(:last-child) {
    margin-bottom: 24px;
  }

  /* DL */
  dl:not([class]),
  .dl1 {
    grid-gap: 1.5em 2em;
  }
  .dl1 dt {
    width: 32%;
    max-width: 200px;
  }

  /* Top */
  main.home section:not(.Head):not(.full) {
  }
  .Main .over::before {
    width: 40vw;
    height: 40vw;
    left: -3vw;
    bottom: -15vw;
  }
  .Main .over img {
    width: 75vw;
  }
  .Main h1 {
    left: 0;
    top: 8vw;
  }
  .home .Company .contWrap .note .en,
  .home .Service .contWrap .note .en {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    left: -11rem;
    top: 0;
  }
  .home .Company .contWrap .note,
  .home .Service .contWrap .note {
    flex: 1;
  }
  .home .Company .contWrap .note > *:not(:last-child):not(h2),
  .home .Service .contWrap .note > *:not(:last-child):not(h2) {
    margin-bottom: 48px;
  }
  .home .Company .contWrap .note .btn,
  .home .Service .contWrap .note .btn {
    margin-left: 0;
  }
  .home .Company .itemWrap {
    margin-bottom: 104px;
  }
  .home .Company .itemWrap > *:not(:last-child) {
    margin-bottom: 40px;
  }
  .home .Company .itemWrap .sub {
    padding: 0 26px;
  }
  .home .Company .itemWrap .sub > *:not(:first-child) {
    margin-top: -10px;
  }
  .home .Company .itemWrap .sub > *:nth-child(2n + 2) {
    justify-content: flex-end;
  }
  .home .Company .itemWrap .ul6 > li {
    width: 12.65%;
  }
  .home .Company .itemWrap .ul6 > li:not(:first-child) {
    margin-left: -1%;
  }
  .home .Company .contWrap .img {
    width: 54%;
    max-width: 648px;
  }
  .home .Company .contWrap .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .home .Service .contWrap > * {
    width: 50%;
  }
  .home .Service::before {
    content: "";
    border-left: #ffffff 1px solid;
    height: 100%;
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
  }
  .home .Service .contWrap {
    align-items: flex-start;
  }
  .home .Service .contWrap > .note {
    padding-right: 80px;
    position: sticky;
    left: 0;
    top: 40px;
  }
  .home .Service .contWrap > .sub .ul1 > li {
    padding-left: 80px;
  }
  .home .Service .contWrap > .sub .ul1 > li:not(:last-child)::after {
    width: 50vw;
  }

  /* Page */
  .Page .cont > *:not(:last-child) {
    margin-bottom: 64px;
  }
  .Page .contWrap {
  }
  .Page .contWrap > * {
    width: calc((100% - 72px) / 2);
  }
  .Page .contWrap .note > *:not(:last-child) {
    margin-bottom: 40px;
  }
  .Page .contWrap .img {
    width: 50vw;
    margin-right: calc(50% - 50vw);
    margin-top: -136px;
    margin-bottom: -136px;
  }
  .gridWrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-gap: 48px 64px;
  }

  .serviceWrap .inner .bgW {
    padding: 0 100px;
  }
  .serviceWrap .pNav {
    padding-top: 56px;
    grid-gap: 4em;
  }

  .Overview .partnerWrap {
    padding: 40px;
  }
  .History .inner {
    display: flex;
    justify-content: space-between;
    grid-gap: 40px;
  }
  .History .inner .subHead {
    width: 26%;
  }
  .History .inner .dl1 {
    flex: 1;
  }

  .Requirements.Page .column2 {
    align-items: flex-start;
  }

  .Contact.Page .telWrap,
  .Contact.Page .formWrap {
    padding: 56px 48px;
  }
}

/* 01_トップ */

/* =========================================
   ヒーローセクション全体
   ========================================= */
.heroSection {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh; /* モダンブラウザ用（アドレスバー対策） */
  min-height: 600px;
  overflow: hidden;
  background-color: #172b20; /* 読み込み時のフォールバック背景色 */
}

/* 背景画像エリア（スライドラッパー） */
.heroImageWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

/* 背景スライド単体（重なり順はJSで動的に制御） */
.heroSlide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* 2秒かけて滑らかにフェード */
  transition: opacity 2s ease-in-out;
}

/* アクティブなスライドを表示 */
.heroSlide.isActive {
  opacity: 1;
}

.heroBackgroundImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* アクティブ時に等速（linear）で8秒かけて縮小し続ける */
.heroSlide.isActive .heroBackgroundImage {
  animation: heroBgZoom 8s linear forwards;
}

/* =========================================
   コンテンツエリア
   ========================================= */
.heroContentContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000; /* スライダーのz-index加算より常に前面に維持 */
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  pointer-events: none; /* 下層への操作阻害を防ぐ */
}

/* 中央ロゴ */
.heroLogoBlock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 20px;
  pointer-events: auto;
}

.heroLogoImage {
  max-width: 350px;
  width: 100%;
  height: auto;
  opacity: 0;
  /* ロゴ出現アニメーション（0.3s遅延） */
  animation: heroFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* 左下テキストグループ（PC） */
.heroTextGroup {
  position: absolute;
  bottom: 60px;
  left: 60px;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.heroMainCopy {
  font-family: "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  opacity: 0;
  /* メインコピー出現アニメーション（0.8s遅延） */
  animation: heroFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

.heroSubCopy {
  font-family: "Poppins", sans-serif;
  /* font-size: 15px; */
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.05em;
  opacity: 0;
  /* サブコピー出現アニメーション（1.1s遅延） */
  animation: heroFadeUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}

/* =========================================
   アニメーション定義（Keyframes）
   ========================================= */
/* 背景：1.12倍から等速で滑らかに縮小 */
@keyframes heroBgZoom {
  0% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* テキスト・ロゴ：下からふんわりフェードイン */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   レスポンシブ対応（スマートフォン）
   ========================================= */
@media (max-width: 768px) {
  .heroSection {
    height: 100vh;
    height: 100svh; /* アドレスバー表示時の高さで固定（ガタつき防止） */
    min-height: 560px;
  }

  /* 【追加】SP時のみ背景の上に薄い黒オーバーレイを重ねる */
  .heroImageWrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(
      0,
      0,
      0,
      0.2
    ); /* 暗さの調整（0.2〜0.35程度が目安） */
    z-index: 9999; /* 動的に増えるスライドより上、テキスト(10000)より下に配置 */
    pointer-events: none;
  }

  /* SPはFlexboxで上下左右中央に集約配置 */
  .heroContentContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    gap: 36px;
  }

  /* absoluteを解除して中央配置にフィットさせる */
  .heroLogoBlock {
    position: static;
    transform: none;
    padding: 0;
    width: auto;
  }

  .heroLogoImage {
    width: 270px;
    max-width: 100%;
  }

  /* absoluteを解除 */
  .heroTextGroup {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    text-align: center;
    width: 100%;
  }

  .heroMainCopy {
    font-size: 22px;
    margin-bottom: 12px;
    line-height: 1.6;
  }

  .heroSubCopy {
    font-size: 12px;
    line-height: 1.5;
  }

  .heroSubCopy br {
    display: none;
  }
}

/* ===================================================
   ニュースセクション（PC表示ベース）
=================================================== */

.newsSection {
  background-color: #162d1f;
  color: #ffffff;
  padding: 80px 0 !important;
}

.newsContainer {
  display: flex;
  align-items: flex-start;
  gap: 147px;
}

/* 見出し */
.newsHeading {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1;
  flex-shrink: 0;
}

/* お知らせリスト */
.newsList {
  list-style: none;
  flex-grow: 1;
}

.newsItem {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* 基本スタイル */
.newsLink {
  display: flex;
  align-items: center;
  padding: 24px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

/* 1番目の li の中の newsLink だけ padding-top を 0 にする */
.newsItem:first-child .newsLink {
  padding-top: 0;
}

.newsLink:hover {
  /* opacity: 0.7; */
}

/* 日付 */
.newsDate {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  width: 140px;
  flex-shrink: 0;
}

/* タイトルテキスト */
.newsTitle {
  font-weight: 500;
  line-height: 1;
}

/* レスポンシブ対応 (タブレット・スマートフォン) */
@media (max-width: 768px) {
  .newsSection {
    padding: 56px 0 !important;
  }

  .newsContainer {
    flex-direction: column;
    gap: 24px;
  }

  .newsList {
    width: 100%;
  }

  .newsLink {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 18px 0;
  }

  .newsDate {
    width: auto;
  }
}

/* ===================================================
   上部画像
=================================================== */
.mainTopFigure {
  margin: 0;
  width: 100%;
}

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

/* ===================================================
   メインコンセプトセクション（PC表示ベース）
=================================================== */
.mainConceptSection {
  padding: 124px 0 0 0 !important;
  text-align: center;
}

.conceptLabelMain {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  color: #162d1f;
}

.mainConceptTitle {
  font-family: "Noto Serif JP", serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
  white-space: nowrap;
}

.mainConceptLead {
  margin-bottom: 2em;
}

.mainConceptTextBody p {
  margin-bottom: 2em;
}

.mainConceptTextBody p:last-of-type {
  margin-bottom: 0;
}

.conceptScrollLine {
  width: 1px;
  height: 173px;
  background-color: #000000;
  margin: 60px auto 0;
  transform-origin: top center;
}

/* ===================================================
   特徴紹介セクション（PC表示ベース・画像1枚統合版）
=================================================== */
.conceptFeatureSection {
  padding: 98px 0 187px !important;
  overflow: hidden;
}

.conceptFeatureContainer {
  position: relative;
}

.conceptFeatureRow {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 35px;
}

.conceptFeatureRow:last-child {
  margin-bottom: 0;
}

/* 左上の CONCEPT ラベル（1300pxインナーの左端に揃える） */
.conceptLabelSide {
  position: absolute;
  top: -60px;
  left: calc((100% - 100vw) / 2 + 30px);
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #333;
}

@media (min-width: 1300px) {
  .conceptLabelSide {
    left: -92px;
  }
}

/* テキスト設定 */
.home .featureTitle,
.featureTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.featureDescription {
  max-width: 260px;
}

/* 画像ブロック共通設定 */
.conceptFeatureImage {
  flex: 1;
}

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

/* -----------------------------------------
   特徴1：景観（テキスト左 / 画像右）
----------------------------------------- */
.viewFeatureRow {
  justify-content: space-between;
}

.viewFeatureRow .conceptFeatureText {
  margin-top: 50px;
}

.viewFeatureRow .conceptFeatureImage {
  flex: 1;
  max-width: 698px;
}

/* -----------------------------------------
   特徴2：温泉（画面左端へフルブリード / テキスト右）
----------------------------------------- */
.spaFeatureRow {
  justify-content: flex-start;
  align-items: flex-end;
}

.spaFeatureRow .fullBleedImageBlock {
  flex: none;
  width: 45vw;
  margin-left: calc(50% - 50vw);
}

.spaFeatureRow .conceptFeatureText {
  padding-left: 87px;
  margin-bottom: 27px;
}

/* -----------------------------------------
   特徴3：テラスと愛犬（テキスト左寄り深め / 画像右）
----------------------------------------- */
.terraceFeatureRow {
  justify-content: space-between;
}

.terraceFeatureRow .conceptFeatureText {
  padding-left: 130px;
  margin-bottom: 100px;
}

.terraceFeatureRow .conceptFeatureImage {
  flex: 1;
  max-width: 681px;
}

/* ===================================================
   スクロール連動アニメーション共通設定
=================================================== */
/* 最上部画像：位置を動かさず、その場でフェードイン */
.mainTopFigure.js-scroll-trigger {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mainTopFigure.is-active {
  opacity: 1;
}

/* 子要素（テキスト・各ブロック）：下から上へのフェードイン */
.js-scroll-trigger .anim-child {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-scroll-trigger.is-active .anim-child {
  opacity: 1;
  transform: translateY(0);
}

/* スクロール線：上から伸びるアニメーション */
.js-scroll-trigger .anim-line {
  opacity: 0;
  transform: scaleY(0);
  transition:
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.8s ease;
}

.js-scroll-trigger.is-active .anim-line {
  opacity: 1;
  transform: scaleY(1);
}

/* -----------------------------------------
   時間差（transition-delay）設定
----------------------------------------- */
/* メインコンセプト */
.mainConceptSection.is-active .conceptLabelMain {
  transition-delay: 0.1s;
}
.mainConceptSection.is-active .mainConceptTitle {
  transition-delay: 0.25s;
}
.mainConceptSection.is-active .mainConceptLead {
  transition-delay: 0.4s;
}
.mainConceptSection.is-active .mainConceptTextBody p:nth-child(1) {
  transition-delay: 0.55s;
}
.mainConceptSection.is-active .mainConceptTextBody p:nth-child(2) {
  transition-delay: 0.7s;
}
.mainConceptSection.is-active .mainConceptTextBody p:nth-child(3) {
  transition-delay: 0.85s;
}
.mainConceptSection.is-active .mainConceptTextBody p:nth-child(4) {
  transition-delay: 1s;
}
.mainConceptSection.is-active .anim-line {
  transition-delay: 1.15s;
}

/* 特徴紹介各行 */
.conceptFeatureRow.is-active .conceptLabelSide {
  transition-delay: 0.1s;
}
.conceptFeatureRow.is-active .conceptFeatureImage {
  transition-delay: 0.25s;
}
.conceptFeatureRow.is-active .conceptFeatureText {
  transition-delay: 0.45s;
}

/* ===================================================
   レスポンシブ対応（スマホ: 768px以下）
=================================================== */
@media (max-width: 768px) {
  .mainConceptSection {
    padding: 56px 0 0 0 !important;
  }

  .mainConceptTitle {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .conceptScrollLine {
    height: 100px;
    margin-top: 40px;
  }

  .conceptFeatureSection {
    padding: 40px 0 56px 0 !important;
  }

  .conceptFeatureRow {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
  }

  .conceptLabelSide {
    position: static;
    left: auto;
    margin-bottom: 24px;
  }

  .conceptFeatureImage {
    order: 1;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .conceptFeatureText {
    order: 2;
    padding: 0 !important;
    margin-top: 32px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  .viewFeatureRow .conceptFeatureText,
  .spaFeatureRow .conceptFeatureText,
  .terraceFeatureRow .conceptFeatureText {
    margin-top: 32px !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
  }

  .featureTitle {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .home .featureTitle,
  .featureTitle {
    margin-bottom: 20px;
  }

  .featureDescription {
    max-width: 100%;
    text-align: justify;
  }

  .spaFeatureRow .fullBleedImageBlock {
    margin-left: 0;
  }
}

/* ===================================================
   ルームセクション（PC表示ベース）
=================================================== */

/* セクション全体 */
.roomsSection {
  width: 100%;
  border-top: 1px solid #162d1f;
  border-bottom: 1px solid #162d1f;
  padding: 0 !important;
}

.roomsInner {
  display: flex;
  align-items: stretch; /* 左カラムが右コンテンツと同じ高さまで伸びるように設定 */
}

/* 左側見出しエリア（縦書き） */
.roomsHeaderBlock {
  width: 110px;
  flex-shrink: 0;
  border-right: 1px solid #707070;
  padding-top: 80px;
  display: flex;
  justify-content: center;
}

/* PC時のsticky追従設定 */
.roomsHeadingGroup {
  position: sticky;
  top: 100px; /* スクロール時に固定させたい画面上部からの距離 */
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.roomsEnTitle {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.roomsJaTitle {
  writing-mode: vertical-rl;
  font-family: "Noto Serif JP", serif;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.4em;
  line-height: 1;
}

/* 右側メインエリア */
.roomsMainContent {
  flex-grow: 1;
  min-width: 0;
}

/* 画像ギャラリー（Swiper制御） */
.roomsGallery {
  width: 100%;
  overflow: hidden;
}

/* 途切れず滑らかに流すためのlinearイージング */
.roomsGallery .swiper-wrapper {
  transition-timing-function: linear !important;
}

.roomsGalleryItem {
  width: 480px; /* スライド1枚あたりの横幅 */
  height: 480px;
  flex-shrink: 0;
}

.roomsImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 下部コンテンツ */
.roomsDetailBlock {
  padding: 80px 80px 100px 87px;
}

.roomsCatchTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.roomsDescriptionWrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

/* ボタン全体リンク */
.roomsDetailButton {
  display: inline-flex;
  gap: 2px;
  text-decoration: none;
  color: #172820;
  flex-shrink: 0;
}

@media print, screen and (min-width: 768px) {
  .roomsDetailButton:hover {
    color: #ffffff;
  }

  .roomsDetailButton:hover .roomsButtonLabel,
  .roomsDetailButton:hover .roomsButtonArrow {
    background-color: #162d1f;
  }

  .roomsDetailButton:hover .arrowIcon {
    stroke: #ffffff;
  }
}

.roomsButtonLabel {
  width: 196px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.roomsButtonArrow {
  width: 64px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 0.2s ease;
}

.roomsDetailButton .arrowIcon {
  width: 18px;
  height: 18px;
  stroke: #172820;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* レスポンシブ対応 */
@media (max-width: 960px) {
  .roomsDescriptionWrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .roomsGalleryItem {
    width: 360px;
    height: 360px;
  }
}

@media (max-width: 768px) {
  .roomsSection {
    padding-bottom: 50px;
  }

  .roomsInner {
    flex-direction: column;
  }

  .roomsHeaderBlock {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #707070;
    padding: 24px 20px;
    justify-content: flex-start;
  }

  /* SP時はsticky解除 */
  .roomsHeadingGroup {
    position: static;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: 16px;
  }

  .roomsEnTitle,
  .roomsJaTitle {
    writing-mode: horizontal-tb;
  }

  .roomsJaTitle {
    font-size: 24px;
    letter-spacing: 0.2em;
  }

  .roomsEnTitle {
  }

  .roomsGallery {
    margin-bottom: 40px;
  }

  .roomsGalleryItem {
    width: 260px;
    height: 260px;
  }

  .roomsDetailBlock {
    padding: 0 5.33% 56px 5.33%;
  }

  .roomsCatchTitle {
    margin-bottom: 24px;
  }

  .roomsDetailButton {
    display: flex;
    width: 100%;
    max-width: 262px;
    margin: 0 auto;
  }

  .roomsButtonLabel {
    width: auto;
    flex: 1;
    height: 50px;
  }

  .roomsButtonArrow {
    width: 50px;
    height: 50px;
  }
}

/* ===================================================
   ローカルエリアセクション（PC表示ベース）
=================================================== */

/* セクション全体 */
.localAreaSection {
  width: 100%;
  padding: 20px 0 0 0 !important;
  box-sizing: border-box;
}

/* 上部メインビジュアル */
.localAreaHero {
  width: 97.6%;
  margin: 0 auto;
  overflow: hidden;
}

.localAreaHero .heroImage {
  width: 100%;
  height: auto;
  display: block;
}

/* コンテンツエリア (PC) */
.localAreaContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  display: grid;
  grid-template-columns: 278px 1fr 278px;
  grid-template-areas:
    "left head right"
    "left btn  right";
  align-items: start;
  justify-content: space-between;
  position: relative;
}

/* テキスト部 */
.localAreaHead {
  grid-area: head;
  text-align: center;
  padding: 159px 20px 0;
  max-width: 500px;
  margin: 0 auto;
}

.localAreaButtonArea {
  grid-area: btn;
  text-align: center;
  padding-bottom: 80px;
}

.localAreaSubTitle {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.localAreaMainTitle {
  font-family: "Noto Serif JP", serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 50px;
}

.localAreaCatchTitle {
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 25px;
}

.localAreaDescription {
  margin-bottom: 60px;
}

/* PC画像配置（Figma数値通り） */
.spotImageBlock {
  width: 278px;
  height: auto;
}

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

.leftSpotImage {
  grid-area: left;
  margin-top: 226px;
}

.rightSpotImage {
  grid-area: right;
  margin-top: -85px;
  z-index: 2;
}

/* ボタン */
.localAreaDetailButton {
  display: inline-flex;
  gap: 2px;
  text-decoration: none;
  color: #172820;
}

@media print, screen and (min-width: 768px) {
  .localAreaDetailButton:hover {
    color: #ffffff;
  }

  .localAreaDetailButton:hover .localAreaButtonText,
  .localAreaDetailButton:hover .localAreaButtonArrow {
    background-color: #162d1f;
  }

  .localAreaDetailButton:hover .arrowIcon {
    stroke: #ffffff;
  }
}

.localAreaButtonText {
  width: 196px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.localAreaButtonArrow {
  width: 64px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s;
}

.localAreaDetailButton .arrowIcon {
  width: 18px;
  height: 18px;
  stroke: #172820;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}

/* 下部ナビゲーションカード */
.guideNavContainer {
  margin: 98px auto 0;
  padding: 0 1.2%;
  display: flex;
  gap: 13px;
}

.guideNavCard {
  flex: 1;
  background-color: #162d1f;
  border: 1px solid #162d1f;
  color: #ffffff;
  text-decoration: none;
  height: 245px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition:
    background-color 0.2s,
    color 0.2s;
}

@media print, screen and (min-width: 768px) {
  .guideNavCard:hover {
    background-color: #ffffff;
    color: #162d1f;
  }
}

.guideNavTitle {
  font-size: clamp(1.8rem, 2vw, 2rem);
  line-height: 1;
  letter-spacing: 0.1em;
}

/* =========================================
   レスポンシブ対応（タブレット・スマホ: 900px以下）
   ========================================= */
@media (max-width: 900px) {
  .localAreaContainer {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "head  head"
      "left  right"
      "btn   btn";
    gap: 20px 12px;
    padding: 0 5.33%;
  }

  .localAreaHead {
    padding: 40px 0 0;
    max-width: 100%;
  }

  .localAreaMainTitle {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .localAreaCatchTitle {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .localAreaCatchTitle br,
  .localAreaDescription br {
  }

  .localAreaDescription {
    margin-bottom: 10px;
  }

  /* SP時の2枚横並び画像（マージン打ち消し） */
  .spotImageBlock {
    width: 100%;
    max-width: 100%;
    margin-top: 0 !important;
  }

  .spotImageBlock img {
    aspect-ratio: 280 / 454;
    object-fit: cover;
  }

  /* ボタン */
  .localAreaButtonArea {
    padding-bottom: 20px;
    margin-top: 10px;
  }

  .localAreaDetailButton {
    display: flex;
    width: 100%;
    max-width: 262px;
    margin: 0 auto;
  }

  .localAreaButtonText {
    width: auto;
    flex: 1;
    height: 50px;
  }

  .localAreaButtonArrow {
    width: 50px;
    height: 50px;
  }

  .guideNavContainer {
    flex-direction: column;
    padding: 0 20px;
    margin-top: 30px;
    gap: 12px;
  }

  .guideNavCard {
    flex: initial;
    height: 60px;
  }
}

/* ===================================================
   周辺観光セクション アニメーション設定
=================================================== */

/* 上部ヒーロー画像：その場でフェードイン */
.localAreaHeroAnim.js-scroll-trigger {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.localAreaHeroAnim.is-active {
  opacity: 1;
}

/* コンテンツ群の時間差ディレイ設定 */
.localAreaContainer.is-active .localAreaHead {
  transition-delay: 0.15s;
}

.localAreaContainer.is-active .rightSpotImage {
  transition-delay: 0.35s; /* 右画像（山にかかる画像）を先に */
}

.localAreaContainer.is-active .leftSpotImage {
  transition-delay: 0.5s; /* 左画像を次に */
}

.localAreaContainer.is-active .localAreaButtonArea {
  transition-delay: 0.65s; /* ボタンを最後に表示 */
}

/* ===================================================
   アクセスセクション（PC表示ベース）
=================================================== */

/* セクションレイアウト */
.home .accessSection {
  width: 100%;
  padding: 80px 40px;
}

.home .accessContainer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 60px;
}

/* 左側：情報エリア */
.accessInfoBlock {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
}

.home .accessHeading {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  line-height: 1;
  letter-spacing: 0.05em;
  font-weight: 400;
  margin-bottom: 48px;
}

/* 住所 */
.accessAddressGroup {
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 32px;
}

.postalCode {
  display: block;
}

/* アクセス方法 */
.accessMethodList {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 48px;
}

.methodHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.methodIcon {
  width: 18px;
  height: 18px;
  color: #333333;
  flex-shrink: 0;
}

.methodTitle {
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  font-weight: 700;
}

.methodDetail {
  line-height: 1.7;
}

/* ボタン全体リンク */
.accessDetailButton {
  margin-top: auto;
  display: inline-flex;
  gap: 2px;
  text-decoration: none;
  color: #172820;

  max-width: 262px;
}

@media print, screen and (min-width: 768px) {
  /* ホバー時の挙動（背景色 #162D1F / 文字色・矢印色 #FFF） */
  .accessDetailButton:hover {
    color: #ffffff;
  }

  .accessDetailButton:hover .accessButtonLabel,
  .accessDetailButton:hover .accessButtonArrow {
    background-color: #162d1f;
  }

  .accessDetailButton:hover .arrowIcon {
    stroke: #ffffff;
  }
}

/* 左側：テキストエリア（Figma: W196px / H64px / #F0F0F0 / R5） */
.accessButtonLabel {
  width: 196px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* 右側：矢印エリア（Figma: W64px / H64px / #F0F0F0 / R5） */
.accessButtonArrow {
  width: 64px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: background-color 0.2s ease;
}

/* 矢印SVGアイコン */
.accessDetailButton .arrowIcon {
  width: 18px;
  height: 18px;
  stroke: #172820;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* レスポンシブ対応 (スマホ時) */
@media screen and (max-width: 768px) {
  .accessDetailButton {
    display: flex;
    width: 100%;
  }

  .accessButtonLabel {
    width: auto;
    flex: 1;
    height: 50px;
  }

  .accessButtonArrow {
    width: 50px;
    height: 50px;
  }
}

/* 右側：マップエリア */
.accessMapBlock {
  flex: 1;
  min-height: 420px;
}

.accessGoogleMap {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}

/* =========================================
   レスポンシブ対応（タブレット・スマートフォン）
   ========================================= */
@media (max-width: 860px) {
  .home .accessSection {
    padding: 50px 20px;
  }

  .home .accessContainer {
    flex-direction: column;
    gap: 0; /* 各要素のmarginで余白制御するため0に設定 */
  }

  /* 子要素をフラットに展開（orderによる並び替えを有効化） */
  .accessInfoBlock {
    display: contents;
  }

  /* 1. 見出し */
  .home .accessHeading {
    order: 1;
    margin-bottom: 24px;
  }

  /* 2. Googleマップ（見出し直下に配置） */
  .accessMapBlock {
    order: 2;
    flex: auto;
    width: 100%;
    min-height: 320px;
    height: 320px;
    margin-bottom: 32px;
  }

  .accessGoogleMap {
    min-height: 320px;
  }

  /* 3. 住所 */
  .accessAddressGroup {
    order: 3;
    margin-bottom: 28px;
  }

  /* 4. アクセス方法 */
  .accessMethodList {
    order: 4;
    margin-bottom: 36px;
  }

  /* 5. アクセスページボタン */
  .accessDetailButton {
    order: 5;
    display: flex;
    width: 100%;
    margin: 0 auto;
    margin-top: 0;
  }

  .accessButtonLabel {
    width: auto;
    flex: 1;
    height: 50px;
  }

  .accessButtonArrow {
    width: 50px;
    height: 50px;
  }
}

/* 02_客室 */
/* セクション全体 */
.facilityIntroSection {
  padding: 142px 0 0 0 !important;
}

/* 上部：キャッチコピー・リード文 */
.facilityIntroHeader {
  text-align: center;
  margin-bottom: 170px;
}

.facilityMainCatchphrase {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 50px;
}

.facilityDescriptionBlock {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.facilityDescriptionText {
  line-height: 2;
}

/* 下部：3カラム画像カードエリア */
.facilityFeatureGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 10px;
}

.facilityFeatureCard {
  position: relative;
  height: 542px;
  overflow: hidden;
  background-color: #f0f0f0;
}

/* 背景画像 */
.facilityFeatureImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 文字視認性を高めるための下部グラデーションと段階的ぼかし */
.facilityFeatureOverlay {
  /* position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 280px;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.25) 100%
  );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: -webkit-linear-gradient(top, transparent 0%, black 100%);

  pointer-events: none; */
}

/* 画像上のテキストコンテンツ */
.facilityFeatureContent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 29px;
  color: #ffffff;
  z-index: 1;
}

.facilityFeatureTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 9px;
}

.facilityFeatureText {
}

/* レスポンシブ対応 (タブレット・スマホ) */
@media (max-width: 900px) {
  .facilityFeatureGrid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .facilityFeatureCard {
    height: 380px;
  }
}

@media (max-width: 768px) {
  .facilityIntroSection {
    padding: 56px 0 !important;
  }

  .facilityIntroHeader {
    margin-bottom: 56px;
  }

  .facilityMainCatchphrase {
    margin-bottom: 24px;
  }

  .facilityDescriptionBlock {
    gap: 16px;
  }

  .facilityFeatureCard {
    height: 340px;
  }

  .facilityFeatureContent {
    padding: 24px 5.33%;
  }

  /* 背景画像そのものの明るさを少し落とす（文字位置に一切干渉しません） */
  .facilityFeatureImage {
    filter: brightness(0.85);
  }

  /* SPではオーバーレイ要素の装飾を無効化 */
  .facilityFeatureOverlay {
    display: none;
  }
}

/*.  01 Yof - 04 Mone */
.roomShowcaseSection {
  padding: 169px 0 143px 0 !important;
}

/* --- コンテナ基本設計 --- */
.roomGallerySection {
  margin-bottom: 130px;
}

.roomGallerySection:last-child {
  margin-bottom: 0;
}

/* タイトル・タグ */
.roomHeader {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}

.roomTitle {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 200;
  line-height: 1;
  margin: 0;
}

.roomNumber {
}

.roomTag {
  font-size: 12px;
  line-height: 1;
  border: 1px solid #162d1f;
  padding: 2.5px 6.5px;
  vertical-align: middle;
}

/* ギャラリー全体のレイアウト（Flex） */
.roomGalleryContainer {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* --- 左側：メインスライダー --- */
.mainSliderWrapper {
  flex: 1 1 76%;
  min-width: 0;
}

.mainSliderContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #f5f5f5;
}

.gallerySlide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
  z-index: 1;
}

.gallerySlide.isActive {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.gallerySlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* スライダー矢印ナビゲーション */
.sliderArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 画面幅約1400px前後（13〜14インチ）で最大値64pxに到達 */
  width: clamp(38px, 4.5vw, 64px);
  height: clamp(38px, 4.5vw, 64px);
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

@media print, screen and (min-width: 768px) {
  .sliderArrow:hover {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #ffffff;
  }
}

.sliderArrowPrev {
  left: 16px;
}
.sliderArrowNext {
  right: 16px;
}

/* --- 矢印（CSS背景画像） --- */
.sliderArrow::after {
  content: "";
  display: block;
  /* PC時に 20px × 12px、スマホ時に約 12px × 7.2px へ自動スケール */
  width: clamp(12px, 1.4vw, 20px);
  height: clamp(7.2px, 0.85vw, 12px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.sliderArrowPrev::after {
  background-image: url("../images/rooms/arrow_prev.svg");
}

.sliderArrowNext::after {
  background-image: url("../images/rooms/arrow_next.svg");
}

/* --- 右側：サムネイルグリッド --- */
.thumbnailGrid {
  flex: 0 0 24%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
}

.thumbnailItem {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.65;
  transition:
    opacity 0.3s ease,
    transform 0.2s ease;
}

@media print, screen and (min-width: 768px) {
  .thumbnailItem:hover {
    opacity: 0.9;
  }
}

.thumbnailItem.active {
  opacity: 1;
}

.thumbnailItem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- レスポンシブ対応 (768px未満) --- */
@media (max-width: 768px) {
  .roomShowcaseSection {
    padding: 56px 0 !important;
  }

  .roomGallerySection {
    margin-bottom: 56px;
  }

  .roomHeader {
    gap: 20px;
    margin-bottom: 20px;
  }

  .roomTitle {
    font-size: 30px;
  }

  .roomGalleryContainer {
    flex-direction: column;
    gap: 8px;
  }

  .mainSliderWrapper {
    width: 100%;
  }

  .mainSliderContainer {
    aspect-ratio: 4 / 3;
  }

  .thumbnailGrid {
    width: 100%;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    aspect-ratio: auto;
    gap: 6px;
  }

  .thumbnailItem {
    aspect-ratio: 1 / 1;
  }

  .sliderArrowPrev {
    left: 8px;
  }
  .sliderArrowNext {
    right: 8px;
  }
}

/* 設備・備品 */

/* メインラッパー */
.roomSpecSection {
  background-color: rgba(22, 45, 31, 0.02);
  padding: 122px 0 115px 0 !important;
}

/* セクションタイトル */
.roomSpecTitle {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 65px;
}

/* アイコン・バッジリスト */
.facilityBadgeList {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 60px;
  list-style: none;
  flex-wrap: wrap;
}

.facilityBadgeItem {
  text-align: center;
  border: 1px solid #162d1f;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.1em;
  background-color: #ffffff;
  min-width: 210px;
}

/* スペック表 */
.specTableList {
  max-width: 813px;
  margin: 0 auto;
  margin-bottom: 145px;
}

.specTableRow {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid rgba(22, 45, 31, 0.2);
}

/* 最初の要素のみ上部パディングを0にする */
.specTableRow:first-of-type {
  padding-top: 0;
}

.specTableLabel {
  width: 35.7%;
  font-size: clamp(1.5rem, 1.6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.specTableValue {
  width: 64.3%;
  letter-spacing: 0.05em;
}

/* ナビゲーションバナーエリア */
.bottomNavigationGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;

  padding: 0px 1.2%;
}

.bottomNavigationCard {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #162d1f;
  border: 1px solid #162d1f;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none;
  height: 245px;
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}

@media print, screen and (min-width: 768px) {
  .bottomNavigationCard:hover {
    background-color: #ffffff;
    color: #162d1f;
  }
}

.bottomNavigationTitle {
  font-size: clamp(1.8rem, 2vw, 2rem);
  letter-spacing: 0.1em;
  line-height: 1;
}

/* レスポンシブ対応 (768px以下) */
@media (max-width: 768px) {
  .roomSpecSection {
    padding: 56px 0 !important;
  }

  .roomSpecTitle {
    margin-bottom: 40px;
  }

  .facilityBadgeList {
    gap: 8px;
    margin-bottom: 36px;
  }

  .facilityBadgeItem {
  }

  .specTableList {
    margin-bottom: 40px;
  }

  .specTableRow {
    flex-direction: column;
    gap: 6px;
    padding: 14px 0;
  }

  .specTableLabel,
  .specTableValue {
    width: 100%;
  }

  .bottomNavigationGrid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0px 5.33%;
  }

  .bottomNavigationCard {
    height: 60px;
  }
}

/* 03_ご利用案内 */

/* セクション全体のベース設定 */
.reservationGuideSection {
  padding: 148px 0 !important;
}

/* 中央配置と幅制限 */
.reservationGuideContainer {
  text-align: center;
}

/* ガイダンステキストのスタイル */
.reservationGuideText {
}

/* レスポンシブ対応（スマートフォン・タブレット向け） */
@media screen and (max-width: 768px) {
  .reservationGuideSection {
    padding: 56px 0 !important;
  }

  .reservationGuideText {
  }
}

/* ===================================================
   ご利用案内（User Guide）
=================================================== */
.userGuideSection {
  border-top: 1px solid #162d1f;
  padding: 122px 0 118px 0;
}

.userGuideContainer {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

/* 左側：大見出し */
.guideSectionHeader {
  flex: 1;
}

.guideSectionTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 右側：案内リスト（PC時 1240px中の813px比率: 約65.56%） */
.guideInfoList {
  width: 65.56%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* 各行アイテム */
.guideInfoItem {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid rgba(22, 45, 31, 0.2);
}

.guideInfoItem:first-child {
  padding-top: 0;
}

/* 項目名（左列） */
.guideItemTerm {
  width: 35.67%;
  font-size: clamp(1.5rem, 1.6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* 項目内容（右列） */
.guideItemDescription {
  width: 64.33%;
  letter-spacing: 0.05em;
}

/* リンクスタイル */
.guideTextLink {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 愛犬同伴ルールの箇条書き */
.petRulesList {
  list-style: none;
  padding-left: 0;
}

.petRuleItem {
  position: relative;
  padding-left: 1em;
  text-indent: -1em;
}

.petRuleItem::before {
  content: "・";
}

.petRuleNote {
  padding-left: 1em;
}

/* 利用規約ボタン */
.agreementButtonContainer {
  margin-top: 16px;
}

/* ボタン全体リンク */
.agreementButton {
  display: inline-flex;
  gap: 2px;
  text-decoration: none;
  color: #172820;
}

@media print, screen and (min-width: 768px) {
  /* ホバー時の設定 */
  .agreementButton:hover {
    color: #fff;
  }

  .agreementButton:hover .agreementButtonLabel,
  .agreementButton:hover .agreementButtonIcon {
    background-color: #162d1f;
  }

  .agreementButton:hover .arrowRightIcon {
    stroke: #fff;
  }
}

/* 左側：テキストエリア */
.agreementButtonLabel {
  background-color: #f0f0f0;
  border-radius: 5px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 24px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* 右側：矢印エリア */
.agreementButtonIcon {
  width: 64px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* 右向き矢印アイコン */
.agreementButton .arrowRightIcon {
  width: 18px;
  height: 18px;
  stroke: #172820;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* レスポンシブ対応 (768px以下) */
@media screen and (max-width: 768px) {
  .agreementButton {
    display: flex;
    width: 100%;
  }

  .agreementButtonLabel {
    flex: 1;
    height: 50px;
    padding: 0;
    font-size: 13px;
  }

  .agreementButtonIcon {
    width: 50px;
    height: 50px;
  }
}

/* ===================================================
   よくあるご質問（FAQ）
=================================================== */
.faqSection {
  border-top: 1px solid #162d1f;
  padding: 122px 0 118px 0;
}

.faqContainer {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

/* 左側：セクション大見出し */
.faqSectionHeader {
  flex: 1;
}

.faqSectionTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 右側：質問・回答リスト（PC時 1240px中の813px比率: 約65.56%） */
.faqList {
  width: 65.56%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* 各Q&Aアイテム */
.faqItem {
  padding: 24px 0;
  border-bottom: 1px solid rgba(22, 45, 31, 0.2);
}

.faqItem:first-child {
  padding-top: 0;
}

/* 質問タイトル（疑似要素とぶら下げインデント） */
.faqQuestionText {
  font-size: clamp(1.5rem, 1.8vw, 1.8rem);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-left: 1.5em;
  text-indent: -1.5em;
}

.faqQuestionText::before {
  content: "Q. ";
}

/* 回答テキスト */
.faqAnswerText {
  letter-spacing: 0.05em;
}

/* 回答内のインラインリンク */
.faqInlineLink {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

@media print, screen and (min-width: 768px) {
  .faqInlineLink:hover {
    opacity: 0.7;
  }
}

/* ===================================================
   レスポンシブ対応 (768px未満)
=================================================== */
@media (max-width: 767px) {
  .userGuideSection,
  .faqSection {
    padding: 56px 0;
  }

  .userGuideContainer,
  .faqContainer {
    flex-direction: column;
    gap: 20px;
  }

  .guideSectionHeader,
  .guideInfoList,
  .faqSectionHeader,
  .faqList {
    width: 100%;
  }

  .guideInfoItem {
    flex-direction: column;
    gap: 8px;
    padding: 20px 0;
  }

  .guideItemTerm,
  .guideItemDescription {
    width: 100%;
  }

  .faqItem {
    padding: 20px 0;
  }

  .faqQuestionText {
    margin-bottom: 10px;
  }

  .faqAnswerText {
    text-align: justify;
  }
}

/* ===================================================
   各種規約セクション
=================================================== */
.termsSection {
  border-top: 1px solid #162d1f;
  padding: 107px 0 !important;
}

/* タイトル */
.termsSectionTitle {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 35px;
}

/* ボタン群グリッド */
.termsLinkList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 988px;
  margin: 0 auto;
}

/* 各リンクターゲット（ボタングループ） */
.termsLinkItem {
  display: flex;
  gap: 2px;
  text-decoration: none;
  color: #172820;
}

@media print, screen and (min-width: 768px) {
  .termsLinkItem:hover {
    color: #fff;
  }

  .termsLinkItem:hover .termsLabelBox,
  .termsLinkItem:hover .termsArrowBox {
    background-color: #162d1f;
  }

  .termsLinkItem:hover .arrowRightIcon {
    stroke: #fff;
  }
}

/* 左側：テキストエリア */
.termsLabelBox {
  flex: 1;
  background-color: #f0f0f0;
  border-radius: 5px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 12px;
  text-align: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* 右側：矢印エリア */
.termsArrowBox {
  width: 64px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* 右向き矢印アイコン */
.arrowRightIcon {
  width: 18px;
  height: 18px;
  stroke: #172820;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* レスポンシブ対応 (タブレット・スマホ) */
@media screen and (max-width: 768px) {
  .termsSection {
    padding: 56px 0 !important;
  }

  .termsSectionTitle {
    margin-bottom: 30px;
  }

  .termsLinkList {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 262px;
    margin: 0 auto;
  }

  .termsLabelBox {
    height: 50px;
  }

  .termsArrowBox {
    width: 50px;
    height: 50px;
  }
}

/* 04_アクセス */
/* ナビゲーションコンテナ */
.accessGuideSection {
  padding: 93px 0 !important;
}

.pageNavigation {
  max-width: 1108px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 各アンカーボタングループ */
.navLinkItem {
  display: flex;
  gap: 2px;
  text-decoration: none;
  color: #172820;
}

@media print, screen and (min-width: 768px) {
  /* ホバー時の設定 */
  .navLinkItem:hover {
    color: #fff;
  }

  .navLinkItem:hover .navLabelBox,
  .navLinkItem:hover .navArrowBox {
    background-color: #162d1f;
  }

  .navLinkItem:hover .arrowDownIcon {
    stroke: #fff;
  }
}

/* 左側：テキストエリア */
.navLabelBox {
  flex: 1;
  background-color: #f0f0f0;
  border-radius: 5px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 12px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* 右側：矢印エリア */
.navArrowBox {
  width: 64px;
  height: 64px;
  background-color: #f0f0f0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

/* 下向き矢印アイコン */
.arrowDownIcon {
  width: 18px;
  height: 18px;
  stroke: #172820;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* レスポンシブ対応 (タブレット・スマホ) */
@media screen and (max-width: 900px) {
  .pageNavigation {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .navLabelBox {
    height: 50px;
  }

  .navArrowBox {
    width: 50px;
    height: 50px;
  }
}

@media screen and (max-width: 480px) {
  .accessGuideSection {
    padding: 56px 0 0 0 !important;
  }

  .pageNavigation {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 262px;
    margin: 0 auto;
  }

  .navLabelBox {
    height: 50px;
  }

  .navArrowBox {
    width: 50px;
    height: 50px;
  }
}

/* アクセス */

.accessPage .accessSection {
  padding: 92px 0 132px 0 !important;
}

.accessPage .accessContainer {
}

/* マップエリア */
.mapWrapper {
  width: 100%;
  margin-bottom: 107px;
  overflow: hidden;
}

.mapImage {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.accessPage .map {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* モバイル: 16:9 (9 / 16 * 100) */
  height: 0;
}

.accessPage .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* PC向け設定 */
@media (min-width: 768px) {
  .accessPage .map {
    padding-top: calc(460 / 1240 * 100%); /* 約 37.1% */
    max-width: 1240px;
    margin-inline: auto;
  }
}

/* アクセス詳細セクション */
.accessContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
  padding: 0 !important;
}

/* 左側情報エリア */
.accessInfo {
  flex: 1;
  max-width: 367px;
}

.accessHeading {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 50px;
}

.addressGroup {
  margin-bottom: 35px;
  line-height: 1.7;
}

.postalCode {
  display: block;
}

.transportBlock {
  margin-bottom: 32px;
}

.transportHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 15px;
}

.transportIcon {
  width: 26px;
  height: 26px;
  fill: #162d1f;
  flex-shrink: 0;
}

.transportDescription {
  line-height: 1.7;
}

/* 右側写真エリア */
.facilityPhotoWrapper {
  flex: 1.1;
}

.facilityPhoto {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 813 / 479;
}

/* レスポンシブ対応 (タブレット・スマホ) */
@media screen and (max-width: 768px) {
  .accessPage .accessSection {
    padding: 56px 0 !important;
  }

  .accessContainer {
  }

  .mapWrapper {
    margin-bottom: 40px;
  }

  .mapImage {
    height: 260px;
  }

  .accessPage .map {
    min-height: 320px;
    height: 320px;
  }

  .accessContent {
    flex-direction: column;
    gap: 20px;
  }

  .accessInfo {
    max-width: 100%;
  }

  .accessHeading {
    margin-bottom: 24px;
  }

  .facilityPhotoWrapper {
    width: 100%;
  }

  .facilityPhoto {
    aspect-ratio: 6 / 4;
    object-fit: cover;
  }
}

.map {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9のアスペクト比 */
  height: 0;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 施設案内 */

.facilityGuideSection {
  border-top: 1px solid #162d1f;
  padding: 104px 0 111px 0 !important;
}

/* タイトル */
.sectionTitle {
  text-align: center;

  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 63px;
}

/* 施設情報リスト（定義リスト形式） */
.facilityInfoList {
  max-width: 813px;
  margin: 0 auto 103px;
}

.facilityInfoItem {
  display: flex;
  border-bottom: 1px solid rgba(22, 45, 31, 0.2);
  padding: 20px 0;
}

.facilityInfoItem:first-child {
  padding-top: 0;
}

.facilityInfoTerm {
  width: 32%;
  font-weight: 500;
  flex-shrink: 0;
}

.facilityInfoDescription {
  width: 68%;
}

.facilityInfoLink {
  color: inherit;
  text-decoration: none;
}

@media print, screen and (min-width: 768px) {
  .facilityInfoLink:hover {
    text-decoration: underline;
  }
}

/* ギャラリー / 特徴エリア（3カラム） */
.facilityFeatureGallery {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.featureCard {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.featureImageWrapper {
  width: 100%;
  margin-bottom: 33px;
  overflow: hidden;
}

.featureImage {
  width: 100%;
  height: auto;
  display: block;
}

.accessPage .featureTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.6rem, 1.8vw, 1.8rem);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.featureText {
  letter-spacing: 0;
}

/* レスポンシブ対応 (タブレット・スマホ) */
@media screen and (max-width: 768px) {
  .facilityGuideSection {
    padding: 56px 0 !important;
  }

  .sectionTitle {
    margin-bottom: 35px;
  }

  .facilityInfoList {
    margin-bottom: 50px;
  }

  .facilityInfoItem {
  }

  .facilityInfoTerm {
    width: 38%;
  }

  .facilityInfoDescription {
    width: 62%;
  }

  .facilityFeatureGallery {
    flex-direction: column;
    gap: 35px;
  }

  .featureImage {
    height: auto;
  }
}

/* 全体コンテナ（左右2分割） */
.companyContactSection {
  display: flex;
  min-height: 520px;
}

/* 共通カラムスタイル */
.companyInfoBlock,
.contactInfoBlock {
  flex: 1;
  padding: 118px 5.33% 134px 5.33% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.companyContactSection .sectionHeading {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 43px;
}

/* ── 左側：運営会社 ── */
.companyInfoBlock {
  background-color: rgba(22, 45, 31, 0.1);
}

.companyTableWrapper {
  width: 100%;
  max-width: 559px;
}

.companyInfoList {
  width: 100%;
  margin-bottom: 50px;
}

.companyInfoRow {
  display: flex;
  border-bottom: 1px solid rgba(22, 45, 31, 0.2);
  padding: 20px 0;
}

/* 最初の要素のみ上部パディングをゼロにする */
.companyInfoRow:first-child {
  padding-top: 0;
}

.companyInfoTerm {
  width: 32%;
  font-weight: 500;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.companyInfoDescription {
  width: 68%;
  letter-spacing: 0.05em;
}

.companyInfoLink {
  color: inherit;
  text-decoration: none;
}

/* 公式サイトボタン全体 */
.companyContactSection .officialSiteButton {
  display: flex;
  justify-content: center;
  gap: 2px;
  width: 262px; /* テキスト196px + 矢印64px + gap 2px */
  margin: 0 auto; /* 左右中央揃え */
  text-decoration: none;
  color: #ffffff;
}

@media print, screen and (min-width: 768px) {
  /* ホバー時の挙動（白背景・緑文字・緑枠線） */
  .companyContactSection .officialSiteButton:hover {
    color: #162d1f;
  }

  .companyContactSection .officialSiteButton:hover .buttonText,
  .companyContactSection .officialSiteButton:hover .buttonArrowWrapper {
    background-color: #ffffff;
    border-color: #162d1f;
  }

  .companyContactSection .officialSiteButton:hover .arrowIcon {
    stroke: #162d1f;
  }
}

/* 左側：テキストエリア（Figma: W196px / H64px） */
.buttonText {
  width: 196px;
  height: 64px;
  background-color: #162d1f;
  border-radius: 5px;
  border: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* 右側：矢印エリア（Figma: W64px / H64px） */
.buttonArrowWrapper {
  width: 64px;
  height: 64px;
  background-color: #162d1f;
  border-radius: 5px;
  border: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* 右向き矢印アイコン */
.arrowIcon {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}

/* レスポンシブ対応 (スマホ時) */
@media screen and (max-width: 768px) {
  .companyContactSection .officialSiteButton {
    display: flex;
    width: 100%;
    max-width: 262px;
    margin: 0 auto;
  }

  .buttonText {
    width: auto;
    flex: 1;
    height: 50px;
  }

  .buttonArrowWrapper {
    width: 50px;
    height: 50px;
  }
}

/* ── 右側：お問合せ ── */
.contactInfoBlock {
  background-color: #162d1f;
  color: #ffffff;
}

.contactLeadText {
  color: #ffffff;
  margin-bottom: 33px;
  text-align: center;
  letter-spacing: 0;
}

.contactCardGroup {
  width: 100%;
  max-width: 366px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contactCard {
  border: 1px solid #ffffff;
  border-radius: 5px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  display: block;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

@media print, screen and (min-width: 768px) {
  .contactCard:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.7);
  }
}

.contactCardLabel {
  font-size: 0.8rem;
  margin-bottom: 6px;
  color: #d1dad4;
  display: block;
  letter-spacing: 0.05em;
}

.contactCardMainValue {
  font-size: 1.35rem;
  font-family: "Century Gothic", Arial, sans-serif;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  font-weight: normal;
}

.contactCardSubText {
  font-size: 0.72rem;
  color: #a8b8ae;
  display: block;
}

/* ── レスポンシブ対応 (タブレット・スマートフォン) ── */
@media screen and (max-width: 860px) {
  .companyContactSection {
    flex-direction: column;
  }

  .companyContactSection .sectionHeading {
    margin-bottom: 30px;
  }

  .companyInfoBlock,
  .contactInfoBlock {
    padding: 56px 5.33% !important;
  }

  .companyTableWrapper,
  .contactCardGroup {
    max-width: 100%;
  }

  .companyInfoBlock {
    align-items: flex-start;
  }

  .companyInfoList {
    margin-bottom: 40px;
  }

  .sectionHeading {
    width: 100%;
    margin-bottom: 30px;
  }

  .contactCardMainValue {
    font-size: 1.2rem;
  }
}

/* 05_周辺MAP */
/* セクション全体のベース設定 */
.sightseeingGuideSection {
  padding: 84px 0 120px 0 !important;
}

/* 中央配置と幅制限 */
.sightseeingGuideContainer {
  text-align: center;
}

/* ガイダンスのテキストスタイル */
.sightseeingGuideText {
}

/* レスポンシブ対応（スマートフォン・タブレット向け） */
@media screen and (max-width: 768px) {
  .sightseeingGuideSection {
    padding: 56px 0 !important;
  }

  .sightseeingGuideText {
  }
}

/* ============================================================
   2. Layout System（共通セクション構造）
   ============================================================ */
.pageSectionWrapper {
  display: flex;
  position: relative;
  margin-bottom: 0;
  border-top: 1px solid #162d1f;
}

.pageSectionWrapper:last-of-type {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   左側：サイドバー（スクロール追従ラベルエリア）
   ------------------------------------------------------------ */
.sidebarLabelColumn {
  width: 85px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  position: relative;
}

.sidebarLabelColumn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: #162d1f;
}

.verticalSectionTitle {
  position: sticky;
  top: 60px;
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.4rem, 1.6vw, 1.6rem);
  letter-spacing: 0.05em;
  text-align: center;
  height: fit-content;
  padding: 88px 0;
  z-index: 10;
}

/* ------------------------------------------------------------
   右側：メインコンテンツエリア
   ------------------------------------------------------------ */
.mainContentArea {
  flex: 1;
  padding: 80px 0 100px 0;
  background-color: #fff;
}

.pageSectionWrapper.foodsSectionWrapper {
  background-color: #f7f7f6;
}

.pageSectionWrapper.foodsSectionWrapper .mainContentArea {
  background-color: #f7f7f6;
}

/* ------------------------------------------------------------
   セクション共通パーツ
   ------------------------------------------------------------ */
.mapPage .sectionHeading {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.05em;
}

.mapPage .sightseeingSection .sectionHeading {
  margin-bottom: 43px;
}

.mapPage .restaurantSection .sectionHeading {
  margin-bottom: 28px;
}

.mapPage .shoppingSectionContentArea .sectionHeading {
  margin-bottom: 38px;
}

.contentCardGrid {
  display: grid;
  gap: 20px;
}

/* ============================================================
   3. Responsive Styles（共通レスポンシブ）
   ============================================================ */
@media screen and (max-width: 768px) {
  .pageSectionWrapper {
    flex-direction: column;
  }

  .sidebarLabelColumn {
    width: 100%;
    height: 60px;
    position: static;
    border-bottom: 1px solid #162d1f;
  }

  .sidebarLabelColumn::after {
    display: none;
  }

  .verticalSectionTitle {
    position: static;
    writing-mode: horizontal-tb;
    line-height: 60px;
    top: auto;
    letter-spacing: 0.2em;
    margin-top: 0;
    padding: 0;
  }

  .mainContentArea {
    padding: 40px 0 80px 0;
  }

  .sectionHeading {
    text-align: center;
  }

  .mapPage .sightseeingSection .sectionHeading,
  .mapPage .restaurantSection .sectionHeading,
  .mapPage .shoppingSectionContentArea .sectionHeading {
    margin-bottom: 30px;
  }

  .contentCardGrid {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
}

@media screen and (max-width: 580px) {
  .conditionLegendList {
    justify-content: center;
    gap: 15px;
  }
}

/* ============================================================
   4. TOURISM Section特有のスタイル
   ============================================================ */
.tourismCardGrid {
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 50px;
}

.tourismSpotItem {
  display: flex;
  flex-direction: column;
}

.tourismSpotPhoto {
  width: 100%;
  aspect-ratio: 550/390;
  margin-bottom: 39px;
}

.tourismSpotTitle {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 2.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0 0 22px;
}

.tourismSpotDescription {
  margin: 0;
  letter-spacing: 0;
}

@media screen and (max-width: 768px) {
  .tourismCardGrid {
    gap: 40px;
  }
  .tourismSpotPhoto {
    margin-bottom: 15px;
  }
  .tourismSpotTitle {
    margin-bottom: 10px;
  }
  .tourismSpotDescription {
    text-align: justify;
  }
}

/* ============================================================
   5. FOODS Section特有のスタイル
   ============================================================ */
.restaurantHeader {
  margin-bottom: 24px;
}

.conditionLegendList {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

/* 凡例専用のラッパー */
.legendIconWrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border: none; /* 既存のborderは消す */
}

.legendIconWrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #162d1f;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
  box-sizing: border-box;
}

.legendItem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legendIcon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}

.restaurantCardGrid {
  grid-template-columns: repeat(4, 1fr);
}

.restaurantCard {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

.restaurantThumbnailWrapper {
  width: 100%;
  aspect-ratio: 272 / 189;
  overflow: hidden;
  background-color: #e5e5e5;
}

.restaurantThumbnailImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.restaurantCardBody {
  padding: 27px 23px 30px 23px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.restaurantTitleGroup {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-bottom: 10px;
}

.restaurantNumberCircle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24.8px;
  height: 24.8px;
  border-radius: 50%;
  background-color: #162d1f;
  color: #ffffff;
  font-size: 12.8px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-top: 1px;
  flex-shrink: 0;
}

.restaurantName {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
}

.restaurantDescription {
  line-height: 1.7;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.restaurantMetaInfo {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0;
}

.restaurantAccess {
  margin-bottom: 8px;
}

/* サービスアイコンリスト */
.serviceIconList {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

/* アイコンの外枠（背景色は常に透過せず固定） */
.serviceIconWrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: #f7f7f7;
  flex-shrink: 0;
}

/* アイコン画像本体 */
.serviceIcon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  opacity: 1;
}

/* 無効時：背景はそのままにアイコン描画のみ透過 */
.serviceIcon.is-disabled {
  opacity: 0.1;
}

/* 公式サイトボタン（カード幅全幅） */
.mapPage .officialSiteButton {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: #162d1f;
  text-decoration: none;
  background-color: #ffffff;
  border-top: 1px solid rgba(22, 45, 31, 0.2);
  border-right: none;
  border-bottom: none;
  border-left: none;
}

@media print, screen and (min-width: 768px) {
  .mapPage .officialSiteButton:hover {
    background-color: #162d1f;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (max-width: 1100px) {
  .restaurantCardGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 850px) {
  .restaurantCardGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .restaurantCardBody {
    padding: 27px 5.33%;
  }

  .restaurantDescription {
    text-align: justify;
  }

  .mapPage .officialSiteButton {
    padding: 16px 0;
  }

  .conditionLegendList {
    gap: 16px;
  }
}

/* ============================================================
   6. SHOP Section特有のスタイル
   ============================================================ */
.shopCardGrid {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.shopCard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shopInfoBody {
  background-color: rgba(22, 45, 31, 0.05);
  padding: 30px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.shopTitleGroup {
  display: flex;
  align-items: start;
  margin-bottom: 10px;
}

.shopNumberCircle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #162d1f;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 12.8px;
  line-height: 1;
  width: 24.8px;
  height: 24.8px;
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 1px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.shopName {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  flex: 1;
}

.shopDetailList {
  list-style: none;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
}

.shopOfficialSiteLink {
  display: block;
  background-color: rgba(22, 45, 31, 0.05);
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border-top: 1px solid rgba(22, 45, 31, 0.2);
}

@media print, screen and (min-width: 768px) {
  .shopOfficialSiteLink:hover {
    background-color: #162d1f;
    color: #ffffff;
    opacity: 1;
  }
}

@media screen and (max-width: 1024px) {
  .shopCardGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .shopInfoBody {
  }

  .shopOfficialSiteLink {
    padding: 16px 0;
  }
}