/* ========================================
   RESET & BASE
======================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  background-color: #fcf5eb;
  color: #362e26;
  line-height: 1.8;
  font-size: 16px;
  overflow-x: hidden;
}

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

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

ul {
  list-style: none;
}

/* ========================================
   SCROLL REVEAL（スクロールでふわり表示）
   背景は固定し、中身（デザイン）のみアニメーション
======================================== */
/* 各項目を「ふわり＋下から上」で表示（JSが .reveal セクション内の
   各項目に .reveal-item を付与。同じ親の項目は順番にスタッガー） */
.reveal-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* JS無効時は常に表示（.reveal-item はJSが付与するため、未付与＝表示） */
@media (scripting: none) {
  .reveal-item {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
   SECTION HEADER (共通)
======================================== */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header__en {
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #7f4d1b;
  font-weight: 400;
  margin-bottom: 6px;
}

.section-header__ja {
  font-size: 34px;
  font-weight: 300;
  color: #362e26;
  letter-spacing: 0.05em;
}

.section-header--light .section-header__en,
.section-header--light .section-header__ja {
  color: #fcf5eb;
}

.section-header--green .section-header__ja {
  color: #20391a;
}

.section-header--left {
  text-align: left;
}

/* ========================================
   HEADER
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(60px, 5.21vw, 100px);
  z-index: 100;
  background-color: #20391a;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 clamp(16px, 2.08vw, 40px);
}

.header__logo a {
  display: block;
}

.header__logo img {
  height: clamp(36px, 3.125vw, 60px);
  width: auto;
}

.header__nav ul {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

.header__nav li {
  height: 100%;
}

.header__nav li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 clamp(8px, 0.94vw, 18px);
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s;
}

.header__nav li a:hover {
  opacity: 0.7;
}

.header__nav-ja {
  display: block;
  font-size: clamp(10px, 0.83vw, 16px);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: clamp(2px, 0.21vw, 4px);
}

.header__nav-en {
  display: block;
  font-size: clamp(8px, 0.625vw, 12px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1;
}

.header__nav-contact-item a {
  padding: 0 !important;
}

.header__nav-contact {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: clamp(90px, 7.8vw, 150px);
  height: clamp(26px, 2.08vw, 40px) !important;
  border: 1px solid #fff;
  color: #fff !important;
  font-size: clamp(10px, 0.83vw, 16px) !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-left: clamp(10px, 1.04vw, 20px);
  flex-direction: row !important;
  transition: background 0.2s, color 0.2s !important;
}

.header__nav-contact:hover {
  background-color: #fff !important;
  color: #20391a !important;
  opacity: 1 !important;
}

.header__hamburger {
  display: none;
}

/* ========================================
   MAIN VISUAL
======================================== */
.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

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

.mv__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* スマホのみ表示する改行 */
.br-sp {
  display: none;
}

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

/* 右上タグライン：ヘッダー高さ分下げた位置 */
.mv__tagline {
  position: absolute;
  top: calc(clamp(60px, 5.21vw, 100px) + clamp(43px, 3.8vw, 73px));
  right: clamp(30px, 3.125vw, 60px);
}

.mv__tagline img {
  display: block;
  width: clamp(268px, 27.86vw, 535px);
  height: auto;
}

/* 左・限定棟バッジ */
.mv__badge {
  position: absolute;
  bottom: calc(clamp(80px, 8.3vw, 160px) + clamp(113px, 11.74vw, 225px) + 100px);
  left: 7%;
}

.mv__badge img {
  display: block;
  width: clamp(134px, 13.92vw, 267.3737px);
  height: auto;
}

/* 左下コピーエリア */
.mv__copy {
  position: absolute;
  bottom: calc(clamp(80px, 8.3vw, 160px) + 70px);
  left: clamp(50px, 5.21vw, 100px);
}

.mv__copy img {
  display: block;
  width: clamp(415px, 43.23vw, 830px);
  height: auto;
}

/* 最下部バー：MV画像に重なる */
.mv__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  height: clamp(80px, 8.3vw, 160px);
  padding: 0 clamp(60px, 12vw, 230px);
}

.mv__bar-desc {
  flex: 1;
  color: #fff;
  font-size: clamp(10px, 1.04vw, 20px);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

.mv__bar-divider {
  width: 1px;
  height: clamp(40px, 4.2vw, 80px);
  background-color: #ccc;
  flex-shrink: 0;
  margin: 0 2%;
}

.mv__bar-spec {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2vw, 40px);
}

.mv__bar-spec-item {
  display: flex;
  align-items: baseline;
  gap: 0.3vw;
  color: #fff;
  white-space: nowrap;
}

.mv__bar-spec-label {
  font-size: clamp(20px, 2.08vw, 40px);
  font-weight: 400;
  letter-spacing: 0.05em;
}

.mv__bar-spec-num {
  font-size: clamp(35px, 3.65vw, 70px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1;
  transform: skewX(-10deg);
  display: inline-block;
}

.mv__bar-spec-unit {
  font-size: clamp(20px, 2.08vw, 40px);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* ========================================
   TOPICS / 新着情報
======================================== */
.topics {
  background-color: #362e26;
  padding: clamp(50px, 5.1vw, 98px) clamp(120px, 18.75vw, 360px);
}

.topics__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.13vw, 60px);
}

/* 左：見出しエリア */
.topics__head {
  width: clamp(140px, 13vw, 250px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.topics__en {
  font-size: 13px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.15em;
  margin-bottom: 0;
}

.topics__ja {
  font-size: 34px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 48px;
}

.topics__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fcf5eb;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.2s;
}

.topics__more:hover {
  opacity: 0.7;
}

.topics__more-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #fcf5eb;
  font-size: 13px;
  flex-shrink: 0;
}

.topics__more-text {
  white-space: nowrap;
}

/* 右：ニュースリスト */
.topics__list {
  flex: 1;
  list-style: none;
  border-top: 1px solid gray;
}

.topics__item {
  border-bottom: 1px solid gray;
}

.topics__link {
  display: flex;
  align-items: center;
  padding: 22px 0;
  text-decoration: none;
  transition: opacity 0.2s;
}

.topics__link:hover {
  opacity: 0.7;
}

.topics__date {
  flex-shrink: 0;
  width: 96px;
  font-size: 16px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.topics__tag {
  flex-shrink: 0;
  width: auto;
  margin-right: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.topics__text {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin: 0;
}

.topics__arrow {
  flex-shrink: 0;
  color: #fff;
  font-size: 16px;
  margin-left: 30px;
}

.arrow {
  font-size: 13px;
}

/* ========================================
   CONCEPT
======================================== */
.concept {
  position: relative;
  background-color: #20391a;
  height: 966px;
}

/* 写真：個別絶対配置 */
.concept__grid {
  position: absolute;
  inset: 0;
}

.concept__cell {
  position: absolute;
  overflow: hidden;
}

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

/* concept_02：左上 */
.concept__cell--tl {
  width: 23.07%;
  left: 18.75%;
  top: 5.18%;
}

/* concept_01：右上 */
.concept__cell--tr {
  width: 21.3%;
  right: 18.75%;
  top: 0;
}

/* concept_03：左下 */
.concept__cell--bl {
  width: 24.48%;
  left: 18.75%;
  bottom: calc(8.28% + 80px);
}

/* concept_04：右下 */
.concept__cell--br {
  width: 22.58%;
  right: 18.75%;
  bottom: calc(8.28% + 80px);
}

/* テキストオーバーレイ */
.concept__overlay {
  position: absolute;
  inset: 0;
}

/* タイトル：ページ中央 */
.concept__header {
  position: absolute;
  top: 20.78%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.concept__deco {
  display: block;
  width: 1px;
  height: 20px;
  background-color: #fcf5eb;
  margin-bottom: 20px;
}

.concept__en {
  font-size: 13px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.15em;
}

.concept__ja {
  font-size: 34px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

/* リードコピー */
.concept__lead {
  position: absolute;
  top: calc(39.52% - 40px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-size: 35px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-shadow: 0 0 34px rgba(0, 0, 0, 0.75);
}

/* ========================================
   DESIGN / 暮らしやすさを考えた設計
======================================== */
.design {
  background-color: #20391a;
  padding-bottom: 20px;
}

.design__inner {
  display: flex;
  padding-left: clamp(120px, 18.75vw, 360px);
}

.design__title-col {
  width: 150px;
  flex-shrink: 0;
  padding-top: 0;
}

.design__title-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 40px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
}

.design__main {
  flex: 1;
  padding-top: 0;
}

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

.design__desc {
  font-size: 16px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  line-height: 1.75;
  padding-top: 43px;
  padding-right: clamp(120px, 18.75vw, 360px);
  margin: 0;
}

.design__sep {
  height: 1px;
  background-color: #fcf5eb;
  width: 1200px;
  margin: 96px auto 78px;
}

/* 設備一覧 */
.features {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.features__title {
  font-size: 40px;
  font-weight: 400;
  color: #ebe4db;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 74px;
  padding-top: 74px;
}

.features__title-emphasis {
  position: relative;
  display: inline-block;
  font-size: 57px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.features__title-emphasis::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 7px;
  background:
    radial-gradient(circle at 28.5px 3.5px, #ebe4db 3.5px, transparent 3.5px),
    radial-gradient(circle at 87.9px 3.5px, #ebe4db 3.5px, transparent 3.5px);
}

.features__hero {
  display: flex;
  gap: clamp(40px, 4.17vw, 80px);
  padding-bottom: 49px;
}

.features__hero-img {
  flex: 0 0 48.75%;
}

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

.features__hero-text {
  flex: 1;
  padding-top: 70px;
}

.features__desc {
  font-size: 16px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  line-height: 1.75;
  margin: 0;
}

.features__row {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.features__row--2col,
.features__row--3col,
.features__row--4col {
  flex-wrap: nowrap;
}

.features__row:last-child {
  margin-bottom: 78px;
}

.features__item {
  background-color: transparent;
  flex-shrink: 0;
}

.features__img {
  width: 277.5px;
  height: 181px;
  overflow: hidden;
}

.features__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}


.features__label {
  font-size: 15px;
  font-weight: 500;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  padding-top: 10px;
  margin: 0;
  text-align: center;
}

.features__name {
  font-size: 20px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin: 0;
  text-align: center;
}

/* ========================================
   VR
======================================== */
.vr {
  background-color: #000;
  padding: 126px 0 97px;
}

.vr__title {
  font-size: 30px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 0 0 0;
}

.vr__block {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 56px;
}

.vr__label {
  height: 50px;
  background-color: #20391a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
}

.vr__label-type {
  font-size: 30px;
  margin: 0 10px;
}

.vr__embed {
  width: 100%;
  aspect-ratio: 1000 / 490;
  background-color: #111;
  margin-top: 20px;
  position: relative;
}

.vr__embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* VR拡大ボタン（スマホ/タブレットでkrpano標準の全画面ボタンが出ない端末向け）
   PCはkrpano標準ボタンがあるため非表示、≤1024pxのみ表示 */
.vr__fs-btn {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1024px) {
  .vr__fs-btn { display: flex; }
}

/* 擬似全画面（iOS等、本物のフルスクリーン非対応端末用） */
.vr__embed.is-zoomed {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  margin-top: 0;
  z-index: 9999;
}

.is-vr-zoom {
  overflow: hidden;
}

/* ========================================
   PLAN
======================================== */
.plan {
  background-color: #20391a;
  padding-bottom: 100px;
}

/* セクションヘッダー */
.plan__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  margin-bottom: 56px;
}

.plan__deco {
  display: block;
  width: 1px;
  height: 20px;
  background-color: #fcf5eb;
  margin-bottom: 20px;
}

.plan__en {
  font-size: 13px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.15em;
  margin: 0;
}

.plan__ja {
  font-size: 34px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin: 0;
}

/* タブ */
.plan__tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 47px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.plan__tab {
  width: 286.67px;
  flex-shrink: 0;
  height: 56.9px;
  background: #20391a;
  border: 1px solid #fff;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  transition: background 0.2s;
}

.plan__tab-letter {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
}

.plan__tab::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translateY(-50%) rotate(-45deg);
}

.plan__tab--active {
  background-color: #000;
}

.plan__tab--active::after {
  transform: translateY(-75%) rotate(45deg);
}

.plan__tab:hover:not(.plan__tab--active) {
  background-color: #1a3015;
}

/* コンテンツブロック */
.plan__block {
  max-width: 1000px;
  margin: 0 auto;
}

.plan__block--hidden {
  display: none;
}

/* 号棟ラベル */
.plan__lot-label {
  display: inline-block;
  width: 131.7px;
  height: 45px;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 間取りエリア */
.plan__floorplan {
  background-color: #fcf5eb;
  margin-bottom: 0;
}

.plan__floorplan-inner {
  display: flex;
  align-items: flex-start;
  padding: 30px 68px 20px;
  gap: 40px;
}

.plan__floorplan-img {
  flex: 1;
  max-width: 62%;
  height: auto;
  object-fit: contain;
}

#planB .plan__floorplan-img,
#planC .plan__floorplan-img {
  height: 550px;
  object-fit: contain;
}

/* スマホ専用の縦長間取り画像（通常は非表示） */
.plan__floorplan-img-sp {
  display: none;
}

/* 間取り拡大ボタン（通常は非表示・スマホで表示） */
.plan__zoom {
  display: none;
}

/* ライトボックス表示中は背面スクロールを固定 */
html.is-lightbox-open,
body.is-lightbox-open {
  overflow: hidden;
  touch-action: none;
}

/* 拡大表示（ライトボックス） */
.plan__lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.88);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}

.plan__lightbox.is-open {
  display: flex;
}

.plan__lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: none;
  transform-origin: center center;
  will-change: transform;
}

.plan__lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.plan__room-img {
  width: 246px;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
  align-self: center;
}

/* スペックエリア */
.plan__spec {
  background-color: #fcf5eb;
  margin-top: 0;
  padding: 0;
}

.plan__spec-inner {
  padding: 30px 68px 40px;
}

.plan__spec-title {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #20391a;
  margin: 0 0 16px;
  text-align: center;
}

.plan__spec-area {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #362e26;
  margin: 0 0 20px;
  text-align: center;
}

.plan__spec-divider {
  height: 1px;
  background-color: #20391a;
  margin-bottom: 20px;
  width: 100%;
}

.plan__payment {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #362e26;
  line-height: 1.9;
  margin: 0;
  text-align: center;
}

/* お問い合わせエリア（常時表示） */
.plan__contact {
  max-width: 1000px;
  margin: 47px auto 0;
  background-color: #000;
  background-image: url('img/contact_banner_pc.png');
  background-size: cover;
  background-position: center;
  display: flex;
  min-height: 300px;
}

.plan__contact-left {
  flex: 1;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan__contact-en {
  font-size: 13px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.15em;
  margin: 0 0 0;
}

.plan__contact-ja {
  font-size: 34px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin: 0 0 16px;
}

.plan__contact-hours {
  font-size: 16px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin: 0;
}

.plan__contact-right {
  flex: 1;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.plan__contact-tel-block,
.plan__contact-mail-block {
  display: flex;
  flex-direction: column;
}

.plan__contact-tel-label,
.plan__contact-mail-label {
  font-size: 16px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}

.plan__contact-tel {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 40px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.plan__contact-tel-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.plan__contact-tel-icon img {
  width: 54.0001px;
  height: 35.4303px;
}

.plan__contact-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 20px 0;
}

.plan__contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  background-color: #20391a;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.2s;
}

.plan__contact-mail-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.plan__contact-mail-icon img {
  width: 30px;
  height: 21.5282px;
}

.plan__contact-btn:hover {
  opacity: 0.8;
}

/* ========================================
   LOCATION
======================================== */
.location {
  background-color: #fcf5eb;
  padding-bottom: 100px;
}

.location__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 96px;
  padding-bottom: 40px;
}

.location__deco {
  display: block;
  width: 1px;
  height: 20px;
  background-color: #7f4d1b;
  margin-bottom: 10px;
}

.location__en {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #7f4d1b;
  margin: 0;
}

.location__ja {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #7f4d1b;
  margin: 0;
}

.location__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.location__map {
  display: none; /* map_pc.png を非表示 */
  margin-bottom: 30px;
}

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

.location__grid {
  display: grid;
  grid-template-columns: repeat(3, 381px);
  gap: 29px 29px;
}

.location__photo {
  width: 381px;
  height: 221px;
  object-fit: cover;
  display: block;
}

.location__label {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #362e26;
  margin: 5px 0 0;
}

.location__access {
  margin-top: 65px;
}

.location__access-title {
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #7f4d1b;
  text-align: center;
  margin-bottom: 30px;
}

.location__access-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 30px;
  list-style: none;
}

/* スマホ専用1列リスト（通常は非表示） */
.location__access-col--sp {
  display: none;
}

.location__access-col {
  list-style: none;
  padding: 0;
  margin: 0;
}

.location__access-col li {
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #362e26;
  line-height: 1.9;
}

/* お問い合わせサイドバー */
.contact-side__inner {
  padding: 40px 0;
}

.contact-side__en {
  font-size: 13px;
  letter-spacing: 0.15em;
  color: rgba(252, 245, 235, 0.6);
  margin-bottom: 6px;
}

.contact-side__ja {
  font-size: 34px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.contact-side__hours {
  font-size: 15px;
  color: rgba(252, 245, 235, 0.8);
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.contact-side__tel-label,
.contact-side__mail-label {
  font-size: 14px;
  color: rgba(252, 245, 235, 0.7);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.contact-side__tel {
  display: block;
  font-size: 28px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
  transition: opacity 0.2s;
}

.contact-side__tel:hover {
  opacity: 0.7;
}

.contact-side__mail-btn {
  display: block;
  text-align: center;
  border: 1px solid #fcf5eb;
  color: #fcf5eb;
  padding: 14px 20px;
  font-size: 15px;
  letter-spacing: 0.05em;
  transition: background 0.2s, color 0.2s;
}

.contact-side__mail-btn:hover {
  background-color: #fcf5eb;
  color: #20391a;
}

/* ========================================
   POINT / こだわり
======================================== */
.point {
  background-color: #20391a;
  padding-bottom: 100px;
}

.point__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 50px;
}

.point__deco {
  display: block;
  width: 1px;
  height: 20px;
  background-color: #fcf5eb;
  margin-bottom: 10px;
}

.point__en {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #fcf5eb;
  margin: 0;
}

.point__ja {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #fcf5eb;
  margin: 0;
}

.point__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.point__subtitle {
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.point__subtitle-emphasis {
  position: relative;
  display: inline-block;
  font-size: 57.9px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.point__subtitle-emphasis::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 7px;
  background:
    radial-gradient(circle at 31px 3.35px, #fcf5eb 3.35px, transparent 3.35px),
    radial-gradient(circle at 91px 3.35px, #fcf5eb 3.35px, transparent 3.35px),
    radial-gradient(circle at 146.4px 3.35px, #fcf5eb 3.35px, transparent 3.35px),
    radial-gradient(circle at 207px 3.35px, #fcf5eb 3.35px, transparent 3.35px);
}

.point__lead {
  text-align: center;
  font-size: 16px;
  font-weight: 300;
  color: #ebe4db;
  letter-spacing: 0.05em;
  line-height: 1.9;
  margin-bottom: 60px;
}

.point__hero {
  margin-bottom: 0;
}

.point__hero picture {
  display: block;
  width: 100%;
}

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

.point__sep {
  height: 1px;
  background-color: #fcf5eb;
  margin: 50px 0;
}

.point__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}

.point__item-title {
  font-size: 26px;
  font-weight: 600;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  text-align: center;
}

.point__img {
  width: 100%;
  overflow: hidden;
  margin-bottom: 20px;
}

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

.point__item-text {
  font-size: 16px;
  font-weight: 300;
  color: #ebe4db;
  letter-spacing: 0.05em;
  line-height: 1.9;
}

/* 省エネ認証 */
.cert {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* 見出し：左右にライン */
.cert__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 22px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

.cert__title::before,
.cert__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #fcf5eb;
}

.cert__title span {
  flex: 0 0 auto;
}

/* 5つの認証ロゴ：PCは横一列、SPは3+2で折返し */
.cert__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
}

.cert__logo {
  width: clamp(120px, 15vw, 160px);
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .cert__title {
    gap: 16px;
    margin-bottom: 28px;
  }
  /* スマホは3列2行（4つなので3+1）・左揃え */
  .cert__logos {
    gap: 12px;
    justify-content: flex-start;
  }
  .cert__logo {
    width: calc((100% - 24px) / 3);
  }
}

/* ========================================
   OUTLINE / 物件概要
======================================== */
.outline {
  background-color: #fcf5eb;
  padding-bottom: 100px;
}

.outline__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 50px;
}

.outline__deco {
  display: block;
  width: 1px;
  height: 20px;
  background-color: #7f4d1b;
  margin-bottom: 10px;
}

.outline__en {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #7f4d1b;
  margin: 0;
}

.outline__ja {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #7f4d1b;
  margin: 0;
}

.outline__table-wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.outline__table {
  width: 100%;
  border-collapse: collapse;
}

.outline__table th,
.outline__table td {
  height: 55px;
  padding: 0 20px;
  border-bottom: 0.46px solid gray;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-align: left;
  vertical-align: middle;
  color: #362e26;
  font-weight: 400;
}

.outline__table th {
  width: 190px;
  min-width: 190px;
  background-color: #e5e6d8;
  white-space: nowrap;
}

.outline__table tr:first-child th,
.outline__table tr:first-child td {
  border-top: 0.46px solid gray;
}

/* ========================================
   ABOUT US
======================================== */
.about {
  background-color: #20391a;
  padding-bottom: 80px;
}

.about__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 50px;
}

.about__deco {
  display: block;
  width: 1px;
  height: 20px;
  background-color: #fcf5eb;
  margin-bottom: 10px;
}

.about__en {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #ebe4db;
  margin: 0;
}

.about__ja {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #fcf5eb;
  margin: 0;
}

.about__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.about__sub {
  font-size: 20px;
  font-weight: 400;
  color: #ebe4db;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  text-align: center;
}

.about__sep {
  height: 0.46px;
  background-color: #fcf5eb;
  margin-bottom: 44px;
}

.about__desc {
  font-size: 16px;
  font-weight: 400;
  color: #ebe4db;
  letter-spacing: 0.05em;
  line-height: 1.875;
  margin-bottom: 40px;
}

.about__more-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.about__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid gray;
  font-size: 13px;
  color: #fcf5eb;
  font-weight: 300;
  flex-shrink: 0;
}

.about__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 300;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.2s;
}

.about__more:hover {
  opacity: 0.7;
}

/* ========================================
   CONTACT / お問い合わせ
======================================== */
.contact {
  background-color: #20391a;
}

.contact__banner {
  background-image: url('img/contact_pc.png');
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-bottom: 60px;
}

.contact__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 10px;
}

.contact__deco {
  display: block;
  width: 1px;
  height: 20px;
  background-color: #fcf5eb;
  margin-bottom: 10px;
}

.contact__en {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #ebe4db;
  margin: 0;
}

.contact__ja {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #fcf5eb;
  margin: 0;
}

.contact__tel-block {
  margin-bottom: 30px;
}

.contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 70px;
  font-weight: 400;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: opacity 0.2s;
}

.contact__tel:hover {
  opacity: 0.8;
}

.contact__tel-icon {
  width: 76px;
  height: 49.8647px;
}

.contact__sep {
  height: 1px;
  background-color: #fcf5eb;
  max-width: 1000px;
  margin: 0 auto 30px;
}

.contact__catch {
  font-size: 30px;
  font-weight: 400;
  color: #ebe4db;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.contact__hours {
  font-size: 20px;
  font-weight: 400;
  color: #ebe4db;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}

.contact__form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 400px;
  height: 69px;
  background-color: #20391a;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 0.2s;
}

.contact__form-btn:hover {
  background-color: #2d5125;
}

.contact__mail-icon {
  width: 30px;
  height: 21.5px;
}

.contact__form {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.form-row {
  margin-bottom: 30px;
}

.form-row label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fcf5eb;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.required {
  display: inline-block;
  background-color: #20391a;
  color: #fcf5eb;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  background-color: rgba(252, 245, 235, 0.15);
  border: 1px solid rgba(252, 245, 235, 0.4);
  color: #fcf5eb;
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.2s;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: rgba(252, 245, 235, 0.4);
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: #fcf5eb;
  background-color: rgba(252, 245, 235, 0.2);
}

.form-submit {
  display: block;
  width: 100%;
  padding: 18px;
  background-color: #20391a;
  color: #fcf5eb;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.form-submit:hover {
  background-color: #2d5125;
}

/* ========================================
   FOOTER
======================================== */
.footer {
  background-color: #362e26;
  padding: 60px 0 50px;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.footer__logo {
  margin-bottom: 50px;
}

.footer__logo img {
  width: 200px;
  height: 116.8333px;
  display: block;
  margin: 0 auto;
}

.footer__offices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 30px;
}

.footer__office {
  color: #ebe4db;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.875;
  padding: 0 60px;
  text-align: center;
}

.footer__office-divider {
  width: 1px;
  height: 100px;
  background-color: #fff;
  flex-shrink: 0;
}

.footer__sep {
  height: 1px;
  background-color: #fff;
  margin: 0 0 40px;
}

.footer__nav {
  margin-bottom: 60px;
}

.footer__nav ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__nav li::before {
  content: '｜';
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.footer__nav li:last-child::after {
  content: '｜';
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.footer__nav a {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer__nav a:hover {
  opacity: 0.7;
}

.footer__copy {
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.05em;
}

/* ========================================
   PDFダウンロードバナー
======================================== */
.dl-banner {
  text-align: center;
  padding: 0 20px;
  margin: 60px 0;
}

.dl-banner__link {
  display: inline-block;
  width: 100%;
  max-width: 1000px;
  transition: opacity 0.2s;
}

.dl-banner__link:hover {
  opacity: 0.85;
}

.dl-banner__link img {
  width: 100%;
  height: auto;
  display: block;
}

/* features内のバナーは二重パディングを避けるため左右0に */
.features .dl-banner {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767px) {
  .dl-banner {
    margin: 32px 0;
  }
}

/* ========================================
   RESPONSIVE - TABLET (768px〜1200px / 1200px以下で自動調整)
======================================== */
@media (max-width: 1200px) {

  /* --- TOPICS：本文を縮小・折り返し可能に --- */
  .topics__text {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  /* --- DESIGN：区切り線とfeaturesを可変に --- */
  .design__sep {
    width: auto;
    margin-left: 40px;
    margin-right: 40px;
  }

  .features {
    padding-left: 40px;
    padding-right: 40px;
  }

  .features__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .features__img {
    width: 100%;
    height: auto;
    aspect-ratio: 277.5 / 180.5;
  }

  /* --- VR --- */
  .vr__block {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* --- PLAN --- */
  .plan__tabs {
    padding-left: 40px;
    padding-right: 40px;
  }

  .plan__tab {
    width: auto;
    flex: 1;
    min-width: 0;
  }

  .plan__block {
    padding-left: 40px;
    padding-right: 40px;
  }

  .plan__contact {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* --- LOCATION：写真グリッドを可変3列に --- */
  .location__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .location__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .location__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 381 / 221;
  }

  /* --- POINT --- */
  .point__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* --- OUTLINE --- */
  .outline__table-wrap {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* --- ABOUT --- */
  .about__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* --- CONTACT --- */
  .contact__sep {
    margin-left: 40px;
    margin-right: 40px;
  }
}

/* ========================================
   RESPONSIVE - MV（タブレット〜スマホ 1024px以下）
   MVはタブレットもスマホと同じレイアウト
======================================== */
@media (max-width: 1024px) {

  .mv {
    height: auto;
    overflow: visible;
    padding-top: 110vw; /* 写真エリアの高さ */
  }

  .mv__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110vw;
    z-index: 0;
  }

  .mv__bg img {
    object-position: center;
  }

  /* タグライン：写真右上 */
  .mv__tagline {
    top: 17vw;
    right: 4vw;
    left: auto;
    width: 74vw;
    height: auto;
    background: none;
    padding: 0;
    z-index: 2;
  }

  .mv__tagline img {
    width: 100%;
    height: auto;
    max-width: none;
  }

  /* バッジ：写真左 */
  .mv__badge {
    top: 28vw;
    bottom: auto;
    left: 2.5vw;
    z-index: 2;
  }

  .mv__badge img {
    width: 27vw;
  }

  /* メインコピー：写真下部・全幅 */
  .mv__copy {
    top: 83vw;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    background: none;
    padding: 0;
    z-index: 2;
  }

  .mv__copy img {
    width: 100%;
    height: auto;
    max-width: none;
  }

  /* スペックバー：写真下・黒背景（タブレットはPC同様の横並び） */
  .mv__bar {
    position: relative;
    height: auto;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0;
    padding: 28px 40px;
    background-color: #000;
  }

  .mv__bar-desc {
    flex: 1;
    font-size: 15px;
    line-height: 1.9;
    text-align: center;
  }

  /* MV内のスマホ改行はタブレットでも有効（4行維持） */
  .mv__bar-desc .br-sp {
    display: inline;
  }

  .mv__bar-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    margin: 0;
    flex-shrink: 0;
  }

  .mv__bar-spec {
    flex: 1;
    justify-content: center;
    gap: 24px;
  }

  .mv__bar-spec-label {
    font-size: 16px;
  }

  .mv__bar-spec-num {
    font-size: 34px;
  }

  .mv__bar-spec-unit {
    font-size: 16px;
  }

  /* --- HEADER（タブレット〜スマホ：ハンバーガー、80px・ロゴ拡大） --- */
  .header {
    height: 80px;
  }

  .header__inner {
    padding: 0 20px;
  }

  .header__logo img {
    height: 40px;
  }

  .header__nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: #20391a;
    z-index: 99;
    overflow-y: auto;
    padding: 10px 0 40px;
  }

  .header__nav.is-open {
    display: block;
  }

  .header__nav ul {
    flex-direction: column;
    height: auto;
    align-items: flex-start;
  }

  .header__nav li {
    height: auto;
    width: 100%;
    position: relative;
  }

  /* 区切り線を左右20px内側に */
  .header__nav li::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
  }

  /* お問い合わせ（CONTACT）下の線はなし */
  .header__nav-contact-item::after {
    display: none;
  }

  .header__nav li a {
    flex-direction: row;
    gap: 10px;
    padding: 20px 24px;
    height: auto;
    justify-content: flex-start;
  }

  .header__nav-ja {
    font-size: 20px;
    margin-bottom: 0;
  }

  .header__nav-en {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.5);
  }

  .header__nav-contact-item {
    padding: 24px;
  }

  .header__nav-contact {
    width: 100% !important;
    height: 48px !important;
    font-size: 15px !important;
    margin-left: 0 !important;
    justify-content: center !important;
  }

  .header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }

  .header__hamburger span {
    display: block;
    width: 40px;
    height: 1px;
    background-color: #fff;
    transition: transform 0.3s, opacity 0.3s;
    transform-origin: center;
  }

  .header__hamburger.is-open span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .header__hamburger.is-open span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* --- TOPICS（タブレット〜スマホ） --- */
  .topics {
    padding: 50px 50px;
  }

  .topics__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* 見出しブロックを展開し「詳しく見る」をリスト下（右下）へ */
  .topics__head {
    display: contents;
  }

  .topics__en {
    order: 1;
  }

  .topics__ja {
    order: 2;
    font-size: 26px;
    margin-bottom: 24px;
  }

  .topics__list {
    order: 3;
  }

  .topics__more {
    order: 4;
    align-self: flex-end;
    margin-top: 32px;
  }

  .topics__link {
    flex-wrap: wrap;
    padding: 16px 0;
  }

  .topics__date {
    width: auto;
    font-size: 14px;
  }

  .topics__tag {
    width: auto;
    font-size: 13px;
    margin-left: 12px;
  }

  .topics__text {
    flex-basis: 100%;
    width: 100%;
    margin-top: 8px;
    font-size: 14px;
  }

  .topics__arrow {
    display: none;
  }

  /* --- CONCEPT（タブレット：写真を大きめ・端寄りに、高さを詰める） --- */
  .concept {
    height: 760px;
  }

  /* 高さを詰めた分、リード文を下げて見出しとの間隔を元に戻す */
  .concept__lead {
    top: 39.52%;
  }

  /* concept_01：右上（大きめ） */
  .concept__cell--tr {
    width: 33%;
    right: 3%;
    top: 3%;
  }

  /* concept_02：左上（家族写真の右） */
  .concept__cell--tl {
    width: 27%;
    left: 13%;
    top: 5%;
  }

  /* concept_03：左下（大きめ・少し下へ） */
  .concept__cell--bl {
    width: 34%;
    left: 7%;
    bottom: calc(8.28% + 55px);
  }

  /* concept_04：右下（少し下へ） */
  .concept__cell--br {
    width: 32%;
    right: 12%;
    bottom: calc(8.28% + 55px);
  }

  /* --- DESIGN（タブレット〜スマホ：縦書きタイトル左＋写真右＋説明文下） --- */
  .design {
    padding-bottom: 40px;
  }

  .design__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
    padding-left: 50px;
  }

  .design__title-col {
    flex: 0 0 40px;
    width: 40px;
    padding: 0;
  }

  .design__title-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 30px;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .design__main {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0;
  }

  .design__photo img {
    height: 270px;
    object-fit: cover;
  }

  .design__desc {
    font-size: 15px;
    padding: 28px 16px 0 0;
    line-height: 1.95;
  }

  .design__sep {
    width: auto;
    margin: 36px 16px 0;
  }

  /* タブレット：全体の左右パディングを50pxに統一 */
  .vr__block,
  .plan__tabs,
  .location__inner,
  .point__inner,
  .outline__table-wrap,
  .about__inner,
  .features,
  .footer {
    padding-left: 50px;
    padding-right: 50px;
  }

  /* ロケーション：タブレットは周辺環境リストを3列→2列に */
  .location__access-list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* POINT（タブレット）：サブタイトルを「沖縄仕様」から改行、こだわり3列→1列 */
  .point__subtitle .br-sp {
    display: inline;
  }

  .point__items {
    grid-template-columns: 1fr;
  }

  /* --- FOOTER（タブレット〜スマホ：ロゴ中央・住所縦積み・ナビ非表示） --- */
  .footer__logo {
    margin-bottom: 56px;
  }

  .footer__logo img {
    width: 220px;
    height: auto;
  }

  .footer__offices {
    flex-direction: column;
    gap: 40px;
  }

  .footer__office {
    padding: 0;
    font-size: 16px;
    line-height: 2;
  }

  .footer__office-divider {
    width: 100%;
    height: 1px;
  }

  /* フッターナビと offices 下の区切り線を非表示 */
  .footer__sep,
  .footer__nav {
    display: none;
  }

  .footer__copy {
    font-size: 13px;
    margin-top: 48px;
  }

  /* --- FEATURES（タブレット〜スマホ：タイトル2行・●、4列→2列） --- */
  .features__title {
    font-size: 26px;
    padding-top: 50px;
    margin-bottom: 36px;
    line-height: 1.5;
  }

  /* タブレットはタイトルを1行に（改行を無効化、スマホは2行のまま） */
  .features__title .br-sp {
    display: none;
  }

  .features__title-emphasis {
    font-size: 30px;
  }

  .features__title-emphasis::before {
    display: block;
    top: -4px;
    height: 7px;
    background:
      radial-gradient(circle at 15px 3.5px, #ebe4db 3px, transparent 3px),
      radial-gradient(circle at 46px 3.5px, #ebe4db 3px, transparent 3px);
  }

  .features__hero {
    flex-direction: column;
    gap: 24px;
    padding-bottom: 40px;
  }

  .features__hero-img {
    flex: none;
    width: 100%;
  }

  .features__hero-text {
    padding-top: 0;
  }

  .features__desc {
    font-size: 15px;
    line-height: 1.95;
  }

  .features__row,
  .features__row--2col,
  .features__row--3col,
  .features__row--4col {
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
  }

  .features__row:last-child {
    margin-bottom: 50px;
  }

  .features__item {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
    min-width: 0;
  }

  .features__img {
    width: 100%;
    height: auto;
    aspect-ratio: 277.5 / 180.5;
  }

  /* --- PLAN（タブレット〜スマホ：中身はスマホレイアウト／タブは各幅維持） --- */
  .plan {
    padding-bottom: 60px;
  }

  .plan__header {
    padding-top: 60px;
    margin-bottom: 32px;
  }

  .plan__ja {
    font-size: 26px;
  }

  .plan__block {
    padding: 0 50px;
  }

  .plan__floorplan-inner {
    flex-direction: column;
    align-items: center;
    padding: 50px;
    gap: 20px;
  }

  /* 縦長専用画像に差し替え、PC間取り・外観は非表示 */
  .plan__floorplan-img,
  .plan__room-img {
    display: none;
  }

  .plan__floorplan-img-sp {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 拡大ボタン（右下） */
  .plan__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 44px;
    height: 44px;
    background-color: #20391a;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    border: none;
    cursor: pointer;
  }

  .plan__lot-label {
    width: 110px;
    height: 40px;
    font-size: 16px;
  }

  .plan__spec-inner {
    padding: 24px 50px 50px;
  }

  .plan__spec-title {
    font-size: 26px;
  }

  .plan__spec-area {
    font-size: 15px;
  }

  /* 説明文（お支払い例）：左揃え・14px */
  .plan__payment {
    text-align: left;
    font-size: 14px;
  }

  .plan__contact {
    flex-direction: column;
    margin: 32px 50px 0;
    min-height: 0;
    padding: 0;
  }

  .plan__contact-left {
    padding: 30px 24px 0;
    text-align: center;
  }

  .plan__contact-right {
    text-align: center;
  }

  .plan__contact-tel-block,
  .plan__contact-mail-block {
    align-items: center;
  }

  .plan__contact-tel {
    justify-content: center;
  }

  .plan__contact-en {
    font-size: 13px;
  }

  .plan__contact-ja {
    font-size: 30px;
    margin-bottom: 12px;
  }

  .plan__contact-hours {
    font-size: 13px;
  }

  .plan__contact-right {
    padding: 20px 24px 24px;
  }

  .plan__contact-tel-label,
  .plan__contact-mail-label {
    font-size: 18px;
  }

  .plan__contact-tel {
    font-size: 34px;
    gap: 14px;
  }

  .plan__contact-tel-icon img {
    width: 48px;
    height: auto;
  }
}

/* ========================================
   RESPONSIVE - MOBILE (767px以下)
======================================== */
@media (max-width: 767px) {

  /* スマホのみ改行を有効化 */
  .br-sp {
    display: inline;
  }

  /* TOPICSの左右パディングはスマホは20px（タブレットのみ50px） */
  .topics {
    padding: 50px 20px;
  }

  /* DESIGN：スマホは従来値（タイトル21px・gap12px・padding16px）を維持 */
  .design__inner {
    gap: 12px;
    padding-left: 16px;
  }

  .design__title-vertical {
    font-size: 21px;
  }

  /* --- MV：スマホはバーを縦積み中央に戻す --- */
  .mv__bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    padding: 36px 24px;
  }

  .mv__bar-desc {
    text-align: center;
  }

  .mv__bar-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
    margin: 0;
  }

  .mv__bar-spec {
    justify-content: center;
    gap: 28px;
  }

  /* --- HEADER（スマホは60px・ロゴ28px） --- */
  .header {
    height: 60px;
  }

  .header__logo img {
    height: 28px;
  }

  .header__nav {
    top: 60px;
    height: calc(100vh - 60px);
  }

  /* --- CONCEPT --- */
  .concept {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 50px 16px 60px;
  }

  /* グリッドを解除し、各写真を縦に散らす */
  .concept__grid {
    display: contents;
  }

  .concept__cell {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
  }

  /* concept_01：上・右寄せ（大きめ） */
  .concept__cell--tr {
    order: 1;
    width: 62%;
    align-self: flex-end;
  }

  /* concept_02：左寄せ・01に少し重ねる */
  .concept__cell--tl {
    order: 2;
    width: 44%;
    align-self: flex-start;
    margin-left: 6%;
    margin-top: -8%;
  }

  /* タイトル（01・02 と 04・03 の間） */
  .concept__overlay {
    order: 3;
    position: static;
    margin: 44px 0;
  }

  /* concept_04：左寄せ */
  .concept__cell--br {
    order: 4;
    width: 48%;
    align-self: flex-start;
    margin-left: 6%;
  }

  /* concept_03：下・右寄せ（大きめ） */
  .concept__cell--bl {
    order: 5;
    width: 82%;
    align-self: flex-end;
    margin-top: 8%;
  }

  .concept__header {
    position: static;
    margin-bottom: 28px;
  }

  .concept__deco {
    height: 20px;
    margin-bottom: 16px;
  }

  .concept__en {
    font-size: 13px;
    letter-spacing: 0.15em;
    margin-bottom: 0;
  }

  .concept__ja {
    font-size: 26px;
  }

  .concept__lead {
    position: static;
    transform: none;
    left: auto;
    white-space: nowrap;
    font-size: 19px;
    margin-top: 0;
    line-height: 2.1;
    letter-spacing: 0.01em;
    text-shadow: none;
  }

  /* --- FEATURES（スマホ固有：パディング・ラベル/名称サイズ） --- */
  .features {
    padding: 0 20px;
  }

  /* スマホはタイトルを2行に（タブレットの1行指定を上書き） */
  .features__title .br-sp {
    display: inline;
  }

  /* スマホは2列の間隔10px（タブレットの20pxを上書き） */
  .features__row,
  .features__row--2col,
  .features__row--3col,
  .features__row--4col {
    gap: 10px;
  }

  .features__item {
    flex: 0 0 calc(50% - 8px);
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }

  .features__label {
    font-size: 9px;
  }

  .features__name {
    font-size: 12px;
  }

  /* --- VR --- */
  .vr {
    padding: 60px 20px;
  }

  .vr__title {
    font-size: 26px;
  }

  .vr__block {
    padding: 32px 0 0;
  }

  .vr__label {
    height: 44px;
    font-size: 15px;
  }

  .vr__label-type {
    font-size: 20px;
  }

  .vr__embed {
    aspect-ratio: 1000 / 560;
  }

  /* --- PLAN：スマホはタブを縦並びに（中身は1024ブロックで共通） --- */
  .plan__tabs {
    flex-direction: column;
    gap: 8px;
    padding: 0 20px;
    max-width: none;
  }

  /* スマホはプランのパディングを20pxに（タブレットの50pxを上書き） */
  .plan__block {
    padding: 0 20px;
  }

  .plan__floorplan-inner {
    padding: 20px;
  }

  .plan__spec-inner {
    padding: 24px 20px;
  }

  /* スマホはお問い合わせを左寄せに戻す（タブレットの中央寄せを上書き） */
  .plan__contact-left,
  .plan__contact-right {
    text-align: left;
  }

  .plan__contact-tel-block,
  .plan__contact-mail-block {
    align-items: stretch;
  }

  .plan__contact-tel {
    justify-content: flex-start;
  }

  .plan__contact {
    margin: 32px 20px 0;
  }

  .plan__tab {
    width: 100%;
    flex: none;
    height: 52px;
    font-size: 17px;
  }

  .plan__tab-letter {
    font-size: 20px;
  }

  .plan__tab::after {
    right: 18px;
    width: 8px;
    height: 8px;
  }

  /* --- LOCATION --- */
  .location {
    padding-bottom: 60px;
  }

  .location__header {
    padding-top: 60px;
    padding-bottom: 32px;
  }

  .location__ja {
    font-size: 26px;
  }

  .location__inner {
    padding: 0 20px;
  }

  .location__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .location__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 381 / 221;
  }

  .location__label {
    font-size: 12px;
  }

  .location__access {
    margin-top: 40px;
  }

  .location__access-title {
    font-size: 20px;
  }

  .location__access-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* スマホは3列リストを隠し、専用1列リストを表示 */
  .location__access-col {
    display: none;
  }

  .location__access-col--sp {
    display: block;
  }

  .location__access-col li {
    font-size: 13px;
  }

  /* スマホ1列リストは折り返さず1行に収める */
  .location__access-col--sp li {
    white-space: nowrap;
    font-size: 12.5px;
    letter-spacing: 0;
  }

  /* --- POINT --- */
  .point {
    padding-bottom: 60px;
  }

  .point__header {
    padding-top: 60px;
    padding-bottom: 32px;
  }

  .point__ja {
    font-size: 26px;
  }

  .point__inner {
    padding: 0 20px;
  }

  .point__subtitle {
    font-size: 26px;
    line-height: 1.5;
    margin-bottom: 36px;
  }

  .point__subtitle-emphasis {
    font-size: 30px;
  }

  .point__subtitle-emphasis::before {
    display: block;
    top: -3px;
    height: 7px;
    background:
      radial-gradient(circle at 15px 3.5px, #fcf5eb 3px, transparent 3px),
      radial-gradient(circle at 46px 3.5px, #fcf5eb 3px, transparent 3px),
      radial-gradient(circle at 77px 3.5px, #fcf5eb 3px, transparent 3px),
      radial-gradient(circle at 108px 3.5px, #fcf5eb 3px, transparent 3px);
  }

  .point__lead {
    text-align: left;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
  }

  .point__item-text {
    font-size: 15px;
    line-height: 1.7;
  }

  .point__sep {
    margin: 30px 0;
  }

  .point__items {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .point__item-title {
    font-size: 22px;
  }

  /* --- OUTLINE --- */
  .outline {
    padding-bottom: 60px;
  }

  .outline__header {
    padding-top: 60px;
    padding-bottom: 32px;
  }

  .outline__ja {
    font-size: 26px;
  }

  .outline__table-wrap {
    padding: 0 20px;
  }

  .outline__table {
    table-layout: fixed;
  }

  .outline__table th,
  .outline__table td {
    display: block;
    width: 100%;
    height: auto;
    padding: 12px 16px;
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .outline__table th {
    min-width: 0;
    border-bottom: none;
  }

  /* --- ABOUT --- */
  .about {
    padding-bottom: 60px;
  }

  .about__header {
    padding-top: 60px;
    padding-bottom: 20px;
  }

  .about__ja {
    font-size: 26px;
    text-align: center;
    line-height: 1.4;
    margin-top: 6px;
  }

  .about__inner {
    padding: 0 20px;
  }

  .about__sub {
    font-size: 18px;
    text-align: center;
  }

  .about__sep {
    margin-bottom: 25px;
  }

  .about__desc {
    font-size: 15px;
    line-height: 1.7;
  }

  .about__desc br {
    display: none;
  }

  /* --- CONTACT --- */
  .contact__banner {
    padding-bottom: 50px;
  }

  .contact__header {
    padding-top: 60px;
  }

  .contact__ja {
    font-size: 26px;
  }

  .contact__tel {
    font-size: 40px;
    gap: 10px;
  }

  .contact__tel-icon {
    width: 44px;
    height: 28.9px;
  }

  .contact__catch {
    font-size: 22px;
  }

  .contact__hours {
    font-size: 15px;
  }

  .contact__sep {
    max-width: none;
    margin: 0 20px 24px;
  }

  .contact__form-btn {
    width: calc(100% - 40px);
    max-width: 360px;
  }

  /* --- FOOTER（スマホはパディング20px、レイアウトは1024ブロック共通） --- */
  .footer {
    padding: 56px 20px 40px;
  }

}

/* MVオーバーレイ画像：WPテーマの img{max-width:100%} で潰れる対策
   → コンテナ側に幅を持たせ、画像は width:100% にする */
.mv__tagline { width: clamp(268px, 27.86vw, 535px); }
.mv__badge   { width: clamp(134px, 13.92vw, 267.3737px); }
.mv__copy    { width: clamp(415px, 43.23vw, 830px); }
.mv__tagline img,
.mv__badge img,
.mv__copy img { width: 100%; height: auto; }

@media (max-width: 1024px) {
  .mv__tagline { width: 74vw; }
  .mv__badge   { width: 27vw; }
  .mv__copy    { width: 100%; }
}

/* WPテーマ page.css の「.mv img { position:absolute; top:50%; left:50%;
   transform:translate(-50%,-50%); height:300px; object-fit:cover }」が
   MVの各画像を強制的に中央寄せ・固定高さにしてくる干渉を打ち消す */
.mv__bg img,
.mv__tagline img,
.mv__badge img,
.mv__copy img {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  object-fit: fill;
}
.mv__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv__tagline img,
.mv__badge img,
.mv__copy img {
  width: 100%;
  height: auto;
}

/* ========================================
   ローディング画面（初回訪問のみ・最低3秒・フェードアウト）
   背景＝pc/sp画像切替、中央＝文字画像、文字下＝白線プログレスバー
======================================== */
.preloading {
  overflow: hidden;
}

.preloader-skip .preloader {
  display: none !important;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #20391a;
  background-image: url('img/shiyo_loading_pc.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  visibility: visible;
  /* opacityはゆっくりフェード、visibilityはフェード完了後に切替（フェードを途中で打ち切らない） */
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

@media (max-width: 767px) {
  .preloader {
    background-image: url('img/shiyo_loading_sp.png');
  }
}

.preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preloader__text {
  display: block;
  width: min(46vw, 500px);
  height: auto;
}

@media (max-width: 767px) {
  .preloader__text {
    width: 76vw;
  }
}

.preloader__bar {
  width: min(34vw, 460px);
  max-width: 80vw;
  height: 2px;
  margin-top: 24px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.preloader__bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  /* 3秒かけて 0→100%（JS transitionの発火競合を避け、確実に動かす）
     ※ JS側の最低表示時間 MIN=3000ms と一致させること
     背景＋文字画像の読込が終わるまでは一時停止（バーだけ先行しない） */
  animation: preloaderBar 3s linear forwards;
  animation-play-state: paused;
}

/* 画像読込完了でバー開始 */
.preloader.is-ready .preloader__bar-fill {
  animation-play-state: running;
}

@keyframes preloaderBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}