@charset "UTF-8";

/* ============================================================
   FILE STRUCTURE (ファイル構造)
   整理されたスタイルの構成
============================================================ */

/*
1. COMMON STYLES (共通スタイル)
   - 基本的なリセットとユーティリティクラス
   - 表示制御クラス（PC・タブレット・スマホ）

2. HEADER STYLES (ヘッダー)
   - ヘッダー基本設定
   - ヘッダーナビゲーション（基本スタイル）
   - 固定ヘッダー用の上書き
   - レスポンシブ対応（1100px以下、690px以下、466px以下）

3. FOOTER STYLES (フッター)
   - フッター基本設定
   - フッター構成要素
   - レスポンシブ対応

4. COMMON PARTS STYLES (共通パーツ)
   - 各ページで使用される共通コンポーネント

5. TOP PAGE STYLES (トップページ)
   - PCサイズ
   - タブレットサイズ
   - スマホサイズ

6. CONCEPT PAGE STYLES (コンセプトページ)
   - PCサイズ
   - タブレットサイズ
   - スマホサイズ

7. ROOMPLAN PAGE STYLES (ルームプランページ)
   - PCサイズ
   - スマホサイズ

8. DESIGN PAGE STYLES (デザインページ)
   - PCサイズ
   - タブレットサイズ
   - スマホサイズ

9. RESULT PAGE STYLES (実績ページ)
   - PCサイズ
   - スマホサイズ

10. STRUCTURE & SECURITY PAGE STYLES (構造・セキュリティページ)
   - PCサイズ
   - タブレットサイズ
   - スマホサイズ

11. GALLERY PAGE STYLES (ギャラリーページ)
   - PCサイズ
   - スマホサイズ

12. OUTLINE PAGE STYLES (物件概要ページ)
   - PCサイズ
   - タブレットサイズ
   - スマホサイズ

13. LOCATION PAGE STYLES (ロケーションページ)
   - PCサイズ
   - タブレットサイズ
   - スマホサイズ

14. REQUEST PAGE STYLES (資料請求ページ)
   - PCサイズ
   - タブレットサイズ
   - スマホサイズ
============================================================ */

/* ============================================================
   COMMON STYLES (共通スタイル)
   基本的なリセットとユーティリティクラス
============================================================ */

/* 共通設定 */
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

button {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

html {
  overflow: auto;
  font-family: sans-serif;
  font-size: 10px;
  line-height: 1.15;
}

body {
  background-color: #fff;
  overflow: hidden;
  color: #231815;
  font-family: "Shippori Mincho", serif, "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic,
    "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.08rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

p {
  margin: 0;
}

h1 {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

a {
  color: #231815;
  text-decoration: none;
  transition: opacity 1s, filter 1s;
}

a:hover {
  transition: opacity 1s, filter 1s;
  filter: brightness(1.5);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

img {
  align-items: center;
  vertical-align: middle;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ============================================================
   DISPLAY CONTROL CLASSES (表示制御クラス)
   PC、タブレット、スマホの表示制御
============================================================ */

/* PC表示制御 */
.pc {
  display: block;
}

.sp {
  display: none;
}

.tab {
  display: none;
}
/* .pcと.tabが両方指定されている場合はタブレットでも表示 */
.pc.tab {
  display: block;
}
/* タブレット表示制御（1100px以下） */
@media screen and (max-width: 1100px) {
  .pc {
    display: none;
  }

  .sp {
    display: none;
  }

  .tab {
    display: block;
  }
}

/* スマホ表示制御（550px以下） */
@media screen and (max-width: 550px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }

  .tab {
    display: none;
  }
  .pc.tab {
    display: none;
  }
  /* .spと.tabが両方指定されている場合はスマホでも表示 */
  .sp.tab {
    display: block;
  }
}

/* ユーティリティクラス */
.bold {
  font-weight: bold;
}

.wrapper {
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 0 15px;
}

.flex {
  display: flex;
}

.w-1120 {
  max-width: 1130px;
  margin: 0 auto;
  padding: 0 5px;
}

.w-1100 {
  max-width: 1110px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-1050 {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-1030 {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-1010 {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-1000 {
  max-width: 1010px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-970 {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 5px;
}

.w-900 {
  max-width: 910px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-890 {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-880 {
  max-width: 890px;
  margin: 0 auto;
  padding: 0 5px;
}

.w-850 {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-835 {
  max-width: 845px;
  margin: 0 auto;
  padding: 0 5px;
}
.w-790 {
  max-width: 800px;
  margin: 0 auto;
  padding: 5px;
}

.w-750 {
  max-width: 760px;
  margin: 0 auto;
  padding: 5px;
}
.w-670 {
  max-width: 680px;
  margin: 0 auto;
  padding: 5px;
}
.btn {
  display: none;
}

.none {
  display: none;
}
.mb0 {
  margin-bottom: 0;
}
.mb-60 {
  margin-bottom: 60px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

#opv-wrap,
#header {
  /* display: none; */
}

.c-center {
  text-align: center;
}

#page-top {
  font-size: 12px;
  position: fixed;
  z-index: 100;
  right: 20px;
  bottom: 20px;
}

#page-top a {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50px;
  display: block;
  color: #fff;
  font-family: "Cinzel", serif;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  width: 60px;
  padding: 25px 0 15px 0;
  position: relative;
  z-index: 100;
}

#page-top a:hover {
  background: #999;
  text-decoration: none;
}

#page-top a::before {
  content: "\f102";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 8px;
  left: 24px;
}

/* JS ふわっ */
/*==================================================
ふわっ
===================================*/

/* fadeUp */

.fadeUp {
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeUpTrigger {
  opacity: 0;
}

.location-logo .fadeUp {
  animation-duration: 1.5s;
}

/* 順番に現れる------------------------------------------ */
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box {
  opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
  opacity: 0;
  animation-name: fadeUpAnime;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* じわっと表示アニメーション */
.gentleFade {
  opacity: 0;
  animation-name: gentleFadeAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes gentleFadeAnime {
  from {
    opacity: 0;
  }

  50% {
    /* opacity: 0.3; */
  }

  to {
    opacity: 1;
  }
}

/* ============================================================
   HEADER STYLES
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   HEADER BASIC SETTINGS (ヘッダー基本設定)
============================================================ */
.header {
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  z-index: 5;
}

/* ============================================================
   HEADER COMPONENTS (ヘッダー構成要素)
============================================================ */

/* sp-header (スマホ用ヘッダー) */
.sp-header {
  display: none;
}

/* header-top (ヘッダートップエリア) */
.header-top {
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  max-width: 1115px;
  margin: 0 auto;
  padding: 0;
  /* MV動画の為のheader調整 */
}

/* header-wrap (ヘッダーラップ) */
.header-wrap-right {
  padding-right: 40px;
}

/* header-logo (ロゴエリア) */
.header-logo {
  padding: 0 15px 0 45px;
}

.header-logo img {
  vertical-align: baseline;
  width: 100%;
  padding-top: 10px;
}

/* header-top-right (右側エリア) */
.header-top-right {
  align-items: end;
  justify-content: flex-end;
  column-gap: 12px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}

/* bukken (物件リンク) */
.bukken {
  margin-bottom: 8px;
}

.bukken:first-of-type {
  letter-spacing: -0.01em;
  margin-right: 10px;
}

.bukken a {
  color: #000;
  font-size: 11px;
  font-weight: 600;
}

/* header-bg01, header-bg02 (ボタンエリア) */
.header-bg01 a {
  display: block;
  color: #000;
  font-weight: 600;
  line-height: 38px;
  text-align: center;
  padding: 2px;
}

.header-bg02 a {
  background: #800020;
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 38px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.1em;
  width: 200px;
  padding: 8px;
  position: relative;
}

/* ============================================================
   HEADER NAVIGATION STYLES (ヘッダーナビゲーション)
============================================================ */

/* 基本スタイル */
.gnav {
  background: #fff;
  /* padding-bottom: 6px; */
  z-index: 999;
}

/* g-navi IDセレクタ（HTMLとの互換性のため） */
#g-navi {
  background: #fff;
  padding-bottom: 6px;
  z-index: 999;
}

#g-navi2 {
  background: #fff;
  padding-bottom: 6px;
  z-index: 999;
}

/* 基本スタイル */
.header-nav {
  display: flex;
  justify-content: space-around;
  max-width: 1035px;
  margin: 0 auto;
}

.header-nav-item {
  border-left: solid 1px #666;
  text-align: center;
  width: calc((100% - 10px) / 8);
  padding: 6px 5px 6px;
}

.header-nav-item:last-child {
  border-right: solid 1px #666;
}

.header-nav-item.active {
  position: relative;
}

.header-nav-item.active::after {
  content: "";
  background-color: #b69b78;
  display: block;
  width: 100%;
  height: 6px;
  position: absolute;
  bottom: -6px;
  left: 1px;
}

.header-nav-item a {
  color: #000;
  font-weight: 700;
  line-height: 0.9em;
}

.header-nav-item .p {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 5px;
}
.container.open .header-nav-item .p {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 5px;
}

.header-nav-item span {
  color: #b69b78;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* 無効なリンクのスタイル */
.header-nav-item a[href="#"] {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

/* ============================================================
   FIXED HEADER (スクロール時ヘッダー)
============================================================ */
#fixed-header {
  background: rgba(255, 255, 255, 0.85);
  text-align: center;
  transition: top 0.5s;
  box-sizing: border-box;
  width: 100%;
  position: fixed;
  z-index: 100;
  top: -160px;
}

#fixed-header.is-show {
  top: 0;
}

#fixed-header .header-top {
  padding: 0;
}

/* ============================================================
   FIXED HEADER OVERRIDES (固定ヘッダー用の上書き)
============================================================ */

#fixed-header .header-nav-item {
  padding: 6px 5px 2px;
}

#fixed-header .gnav {
  margin-top: 0px;
  margin-bottom: 0;
  padding: 0;
  /* padding-bottom: 6px; */
}

#fixed-header .header-logo img {
  padding-top: 10px;
}

/* ============================================================
   RESPONSIVE STYLES - HEADER
============================================================ */

@media screen and (max-width: 1090px) {
  .header-nav-item {
    margin-bottom: 14px;
    padding: 0 20px;
  }
}

@media screen and (max-width: 1100px) {
  /* ハンバーガーメニューボタン */
  .btn {
    /* ボタンの配置位置 */
    display: block;
    cursor: pointer;
    /* ボタンの大きさ */
    width: 32px;
    height: 46px;
    position: fixed;
    /* 最前面に */
    z-index: 10;
    top: 12px;
    right: 16px;
  }

  /* ============================================================
     HAMBURGER MENU LINES (ハンバーガーメニュー線)
  ============================================================ */

  /* 真ん中のバーガー線 */
  .btn-line {
    background-color: #333;
    display: block;
    /* バーガー線の色 */
    transition: 0.2s;
    /* バーガー線の位置基準として設定 */
    width: 100%;
    /* 線の長さと高さ */
    height: 2px;
    position: relative;
  }

  /* 上下のバーガー線 */
  .btn-line::before,
  .btn-line::after {
    content: "";
    background-color: #333;
    transition: 0.8s;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .btn-line::before {
    /* 上の線の位置 */
    transform: translateY(-10px);
  }

  .btn-line::after {
    /* 下の線の位置 */
    transform: translateY(10px);
  }

  /* メニューオープン時 */
  .btn-line.open {
    background-color: transparent;
    /* 真ん中の線を透明に */
  }

  .btn-line.open::before,
  .btn-line.open::after {
    content: "";
    background-color: #333;
    /* 上下の線の色を変える */
    transition: 0.8s;
  }

  .btn-line.open::before {
    transform: rotate(45deg);
    /* 上の線を傾ける */
  }

  .btn-line.open::after {
    transform: rotate(-45deg);
    /* 下の線を傾ける */
  }

  /* ハンバーガーメニューコンテナ */
  .container {
    transition: 0.8s;
    position: fixed;
    top: 65px;
    right: -120%;
  }

  .container.open {
    transition: 0.8s;
    top: 65px;
    right: 0;
  }

  /* ハンバーガーメニュー */
  .header-top {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
  }

  /* ヘッダーナビゲーションのレスポンシブ対応 */
  .header-nav-item {
    margin-bottom: 10px;
  }

  .header-nav-item a {
    color: #000;
    line-height: 1.2em;
  }

  .header-nav-item.active::after {
    content: none;
  }

  .header-nav-item {
    border-left: none;
    width: 100%;
  }

  .header-nav-item:last-child {
    border-right: none;
  }

  .header-nav-item.active {
    border-bottom: none;
  }

  /* ヘッダー全体のレスポンシブ対応 */
  #header-height,
  #header-height2,
  .header {
    background: rgba(255, 255, 255, 0.85);
  }

  /* ナビゲーションのレスポンシブ対応 */
  .gnav {
    background: none;
    height: calc(100vh - 133px);
  }

  #g-navi {
    background: transparent;
  }

  .header-nav {
    display: flex;
    flex-direction: column;
    justify-content: start;
    transition: 0.3s;
    width: 80%;
    height: auto;
    margin-left: auto;
  }

  /* ヘッダー右側のレスポンシブ対応 */
  .header-wrap-right {
    margin: auto;
    padding: 0;
    position: absolute;
    right: 0;
    bottom: 15%;
    left: 0;
  }

  /* ロゴのレスポンシブ対応 */
  .header-logo {
    padding: 0 15px;
  }

  .header-logo img {
    width: 75%;
  }

  /* ヘッダートップ右側のレスポンシブ対応 */
  .header-top-right {
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 140px;
    margin: 0 auto;
  }

  /* sp header */
  .header {
    height: 65px;
    position: fixed;
  }

  .sp-header {
    display: block;
    height: 65px;
  }

  .sp-header img {
    max-width: 300px;
  }

  .sp-header p {
    text-align: left;
    width: 100%;
    padding: 5px 15px;

    display: flex;
    align-items: center;
    height: 100%;
  }

  /* fixed-header スマホ時は非表示 */
  #fixed-header {
    display: none;
  }
}

/* ============================================================
   HEADER RESPONSIVE STYLES - SMALLER BREAKPOINTS
   (より小さいブレークポイント用のレスポンシブスタイル)
============================================================ */

@media screen and (max-width: 690px) {
  /* ロゴのレスポンシブ対応 */
  .header-logo img {
    width: 80%;
  }

  .header-logo {
    text-align: center;
  }

  .header-wrap-right {
    bottom: 8%;
  }
}

@media screen and (max-width: 466px) {
  /* ロゴのレスポンシブ対応 */
  .header-logo img {
    max-width: 340px;
  }
}
@media screen and (max-width: 350px) {
  .sp-header img {
    max-width: 200px;
  }
}
/* ============================================================
   FOOTER STYLES
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   FOOTER BASIC SETTINGS (フッター基本設定)
============================================================ */
footer {
  position: relative;
  z-index: 2;
}

/* ============================================================
   FOOTER COMPONENTS (フッター構成要素)
============================================================ */

/* footer-tel (電話エリア) */
.footer-tel-flex {
  align-items: center;
  justify-content: space-between;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 37px 40px 35px 15px;
}

.footer-tel-cap {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tel-img {
  width: 100% !important;
  max-width: 345px;
  margin: 0 5px;
}

.businesshours {
  font-size: 9px;
  font-weight: 600;
}
.instagram-link {
  font-size: 35px;
}
/* footer-menu (フッターメニュー) */
.footer-menu {
  background: -moz-linear-gradient(
    0% 50% 0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: -webkit-gradient(
    linear,
    0% 50%,
    100% 50%,
    color-stop(0, rgba(162, 144, 128, 1)),
    color-stop(0.0255, rgba(192, 173, 149, 1)),
    color-stop(0.0485, rgba(170, 151, 131, 1)),
    color-stop(0.0718, rgba(154, 136, 118, 1)),
    color-stop(0.0905, rgba(149, 131, 114, 1)),
    color-stop(0.138, rgba(163, 144, 126, 1)),
    color-stop(0.1555, rgba(169, 150, 131, 1)),
    color-stop(0.2483, rgba(222, 201, 177, 1)),
    color-stop(0.2847, rgba(238, 217, 191, 1)),
    color-stop(0.3155, rgba(245, 224, 198, 1)),
    color-stop(0.3259, rgba(246, 227, 206, 1)),
    color-stop(0.3399, rgba(247, 229, 210, 1)),
    color-stop(0.3633, rgba(246, 227, 206, 1)),
    color-stop(0.3837, rgba(244, 222, 196, 1)),
    color-stop(0.4971, rgba(209, 189, 167, 1)),
    color-stop(0.6105, rgba(174, 155, 134, 1)),
    color-stop(0.6342, rgba(165, 147, 127, 1)),
    color-stop(0.711, rgba(142, 124, 107, 1)),
    color-stop(0.7587, rgba(133, 116, 100, 1)),
    color-stop(0.814, rgba(126, 110, 94, 1)),
    color-stop(0.8379, rgba(129, 114, 98, 1)),
    color-stop(0.8627, rgba(140, 125, 111, 1)),
    color-stop(0.8634, rgba(140, 125, 111, 1)),
    color-stop(0.8983, rgba(165, 145, 128, 1)),
    color-stop(0.9506, rgba(143, 127, 111, 1)),
    color-stop(1, rgba(113, 99, 88, 1))
  );
  background: -o-linear-gradient(
    0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  width: 100%;
  height: 45px;
  padding: 12px 15px 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A29080', endColorstr='#716358' ,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A29080', endColorstr='#716358', GradientType=1);
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav-item {
  width: 117px;
  position: relative;
}

.footer-nav-item:first-child {
  margin-left: -50px;
}

.footer-nav-item:last-child {
  width: 160px;
}

.footer-nav-item.active {
  color: #fff;
}

.footer-nav-item + .footer-nav-item {
  border-left: 1px solid #8c8c8c;
}

.footer-nav-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 3px;
}

.footer-nav-item .p {
  margin: 0;
}

/* 無効なリンクのスタイル */
.footer-nav-item a[href="#"] {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

/* c-bg-black (黒背景エリア) */
.c-bg-black {
  background-color: rgba(0, 0, 0, 1);
  padding-inline: 15px;
}

.bottom-logo-flex {
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 25px;
}

.bottom-logo-flex .b-solid {
  border-right: solid 1px;
  border-left: solid 1px;
  color: #fff;
  font-size: 6.5px;
  padding: 0 5px;
}

/* copy (コピーライト) */
.copy {
  color: #fff;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  line-height: 1;
  text-align: center;
  padding: 5px 0 65px 0;
}

.copy small {
  font-size: 10px;
  line-height: 1;
}

/* footer-bottom-flex (フッターボトム) */
.footer-bottom-flex {
  display: grid;
  text-align: center;
  margin: 0 auto;
  padding-top: 40px;
  grid-template-columns: 1fr 1fr 1fr;
}

.footer-bottom-flex-item {
  display: block;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

/* contact用のスタイル */
.contact-w-1120 .c-bg-black {
  background-color: #fff;
}

/* ============================================================
   RESPONSIVE STYLES - FOOTER
============================================================ */

@media screen and (max-width: 900px) {
  .footer-tel-flex {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding-inline: 15px;
  }

  .footer-tel-cap {
    text-align: center;
  }

  .tel-img {
    margin: 5px auto;
  }

  /* フッターナビゲーションを3x3グリッドに変更 */
  .footer-menu {
    height: 120px;
  }

  .footer-nav {
    display: grid;
    gap: 10px 0;
    max-width: 600px;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
  }

  .footer-nav-item {
    text-align: center;
    width: auto;
  }

  .footer-nav-item:first-child {
    margin-left: 0;
  }

  .footer-nav-item:last-child {
    width: auto;
  }

  .footer-nav-item + .footer-nav-item {
    border-left: none;
  }

  .footer-bottom-flex {
    grid-template-columns: none;
  }

  .footer-bottom-flex-item {
    justify-content: center;
    margin: 5px 0;
  }

  .copy {
    padding: 20px 0;
  }
}

@media screen and (max-width: 550px) {
  .footer-bottom-flex {
    text-align: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding-bottom: 30px;
    padding-left: 0;
  }

  .footer-bottom-flex-item {
    justify-content: start;
  }

  .bottom-logo-flex {
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .bottom-logo-flex .b-solid {
    border: none;
    margin-bottom: 2rem;
  }
}

/* ============================================================
   COMMON PARTS STYLES (各ページ共通パーツ)
   全ページで使用される共通コンポーネント
============================================================ */
main.no-pt {
  /* padding-topは JavaScript で制御されない */
}

/* ------------
共通タイトル・キャプション・ボタン類
------------------------------------------------*/
.bg {
  background-image: url("../img/common/takasu-bg.webp");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

/* 共通のタイトルスタイル */
.c-title {
  background: -moz-linear-gradient(
    0% 609.01% 0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: -webkit-linear-gradient(
    0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: -webkit-gradient(
    linear,
    0% 609.01%,
    100% 609.01%,
    color-stop(0, rgba(162, 144, 128, 1)),
    color-stop(0.0255, rgba(192, 173, 149, 1)),
    color-stop(0.0485, rgba(170, 151, 131, 1)),
    color-stop(0.0718, rgba(154, 136, 118, 1)),
    color-stop(0.0905, rgba(149, 131, 114, 1)),
    color-stop(0.138, rgba(163, 144, 126, 1)),
    color-stop(0.1555, rgba(169, 150, 131, 1)),
    color-stop(0.2483, rgba(222, 201, 177, 1)),
    color-stop(0.2847, rgba(238, 217, 191, 1)),
    color-stop(0.3155, rgba(245, 224, 198, 1)),
    color-stop(0.3259, rgba(246, 227, 206, 1)),
    color-stop(0.3399, rgba(247, 229, 210, 1)),
    color-stop(0.3633, rgba(246, 227, 206, 1)),
    color-stop(0.3837, rgba(244, 222, 196, 1)),
    color-stop(0.4971, rgba(209, 189, 167, 1)),
    color-stop(0.6105, rgba(174, 155, 134, 1)),
    color-stop(0.6342, rgba(165, 147, 127, 1)),
    color-stop(0.711, rgba(142, 124, 107, 1)),
    color-stop(0.7587, rgba(133, 116, 100, 1)),
    color-stop(0.814, rgba(126, 110, 94, 1)),
    color-stop(0.8379, rgba(129, 114, 98, 1)),
    color-stop(0.8627, rgba(140, 125, 111, 1)),
    color-stop(0.8634, rgba(140, 125, 111, 1)),
    color-stop(0.8983, rgba(165, 145, 128, 1)),
    color-stop(0.9506, rgba(143, 127, 111, 1)),
    color-stop(1, rgba(113, 99, 88, 1))
  );
  background: -o-linear-gradient(
    0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(162, 144, 128, 1) 0%,
    rgba(192, 173, 149, 1) 2.55%,
    rgba(170, 151, 131, 1) 4.85%,
    rgba(154, 136, 118, 1) 7.18%,
    rgba(149, 131, 114, 1) 9.05%,
    rgba(163, 144, 126, 1) 13.8%,
    rgba(169, 150, 131, 1) 15.55%,
    rgba(222, 201, 177, 1) 24.83%,
    rgba(238, 217, 191, 1) 28.47%,
    rgba(245, 224, 198, 1) 31.55%,
    rgba(246, 227, 206, 1) 32.59%,
    rgba(247, 229, 210, 1) 33.99%,
    rgba(246, 227, 206, 1) 36.33%,
    rgba(244, 222, 196, 1) 38.37%,
    rgba(209, 189, 167, 1) 49.71%,
    rgba(174, 155, 134, 1) 61.05%,
    rgba(165, 147, 127, 1) 63.42%,
    rgba(142, 124, 107, 1) 71.1%,
    rgba(133, 116, 100, 1) 75.87%,
    rgba(126, 110, 94, 1) 81.4%,
    rgba(129, 114, 98, 1) 83.79%,
    rgba(140, 125, 111, 1) 86.27%,
    rgba(140, 125, 111, 1) 86.34%,
    rgba(165, 145, 128, 1) 89.83%,
    rgba(143, 127, 111, 1) 95.06%,
    rgba(113, 99, 88, 1) 100%
  );

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#A29080', endColorstr='#716358' ,GradientType=0)";
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A29080', endColorstr='#716358', GradientType=1);
}

.c-title img {
  width: auto;
  height: 31px;
}

/* 共通のキャプションスタイル */

/* 共通のボタンスタイル */

/* 共通のアイコン・装飾要素 */

/* 共通のレイアウトパーツ */
/* コンテンツ共通レイアウト */
.c__content .wrapper {
  position: relative;
  top: 0;
}

.c__content .flex {
  justify-content: space-between;
}

@media screen and (max-width: 550px) {
  .bg {
    background-size: auto 100vh;
  }

  .c-title {
    height: 70px;
  }

  .c-title img {
    height: 20px;
  }
}

/* ============================================================
   TOP PAGE STYLES (トップページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   TOP PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------------------------------------------------------
   2. OPENING ANIMATION SECTION
   オープニングアニメーション（.start-mv）
------------------------------------------------------------ */

/* アニメーション時間のCSS変数 */
:root {
  --opening-logo-animation-duration: 0.8s;
  --opening-fadeout-bg-duration: 0.5s;
  --opening-fadeout-start-duration: 0.5s;
}

/* スタート画面全体 */
.start {
  background-color: #fff;
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 9000;
  top: 0;
  left: 0;
}

/* 背景画像 */
.start-bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 9001;
  top: 0;
  left: 0;
}

.start-bg img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* ロゴ */
.start-logo {
  opacity: 0;
  transition: opacity var(--opening-logo-animation-duration) ease-out;
  transform: translate(-50%, -50%);
  position: fixed;
  z-index: 9002;
  top: 45.5%;
  left: 50%;
}

.start-logo img {
  transition: transform var(--opening-logo-animation-duration) ease-out;
  transform: scale(1.5);
  max-width: 280px;
  height: auto;
  object-position: center center;
}

/* ロゴアニメーション用クラス */
.start-logo.show {
  opacity: 1;
}

.start-logo.show img {
  transform: scale(1);
}

/* 背景フェードアウト用 */
.start-bg.fadeout {
  opacity: 0;
  transition: opacity var(--opening-fadeout-bg-duration) ease-out;
}

/* 白背景もフェードアウト */
.start.fadeout {
  background-color: rgba(255, 255, 255, 0);
  transition: background-color var(--opening-fadeout-start-duration) ease-out;
}

/* ------------------------------------------------------------
   3. TOP VIDEO SECTION
   メインビデオセクション（#video）
------------------------------------------------------------ */

/* ビデオボックス */
.video-box {
  width: 100%;
  position: relative;
}

.video-box img,
.video-box video {
  width: 100%;
  z-index: -1;
  object-fit: contain;
}

/* トップビデオ */
.top-video {
  position: relative;
}

.top-video p {
  color: red;
  width: fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  z-index: 1;
  inset: 0;
}

/* テキストオーバーレイ */
.text-overlay {
  pointer-events: none;
  opacity: 1;
  width: 80%;
  /* 画面幅1500pxの時に837pxで表示されるようにvw単位で設定 */
  /* 計算式: 837px ÷ 1500px × 100 = 55.8vw */
  max-width: calc(837 / 1500 * 100vw);
  height: fit-content;
  margin: auto;
  position: absolute;
  z-index: 1;
  inset: 0;
}

.catch-text-svg {
  width: 100%;
  height: auto;
}

.catch-text-svg {
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.6))
    drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.4));
}

/* アクセス情報ボックス（takasu-access-box） */
.takasu-access-box {
  background-image: url(../img/top/takasu-access-bg.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 170px;
  position: relative;
}

.takasu-access {
  width: auto;
  height: 110px;
  margin-top: 10px;
}

/* ------------------------------------------------------------
   4. MAIN CONTENT SECTION
   メインコンテンツ（.bg > .top__flame-box）
------------------------------------------------------------ */

/* トップコンテンツ */
.top {
  position: relative;
}

.top__content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.top__content.wrapper {
  padding-top: 35px;
  padding-bottom: 110px;
}

/* サブコピー */
p.sub-copy {
  font-size: 25px;
  font-weight: 700;
}

/* キャプション */
.top__content .cap {
  font-size: 31px;
}

/* トップフレックス02（3つの魅力画像） */
.top-flex02 {
  display: flex;
  align-items: center;
  justify-content: space-around;
  column-gap: 20px;
  max-width: 1000px;
  margin: 35px auto 50px;
}

/* 近日分譲開始予定 */
p.coming-soon {
  color: #b4272d;
  font-size: 46px;
  font-weight: 700;
}
p.grandopen {
  max-width: 66%;
  width: 100%;
  margin: 0 auto;
}
p.price {
  max-width: 70%;
  width: 100%;
  margin: 45px auto;
}
@media screen and (max-width: 1100px) {
  p.price {
    max-width: 100%;
    width: 100%;
    margin: 45px auto;
  }
  p.grandopen {
    max-width: 100%;
  }
}
/* 資料請求受付開始 */
/* .request-start {
  color: #b4272d;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 45px;
}

.request-start span {
  display: block;
  font-size: 0.8em;
  margin: 7px 0 15px;
} */

/* 資料請求ボタン */
.to-form {
  width: 100%;
  margin-bottom: 60px;
}

.to-form a {
  background: #800020;
  display: inline-block;
  color: #fff;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 28px;
  letter-spacing: -0.05em;
  width: 100%;
  max-width: 710px;
  padding: 15px 10px;
}

/* 予告広告ノーティス */
.top.notice {
  margin-top: 45px;
  margin-bottom: 20px;
}

.top.notice-ttl {
  background: transparent;
  border-right: 1px solid #231815;
  border-left: 1px solid #231815;
  color: #231815;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4em;
  height: 23px;
}

.top.notice-explain {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  letter-spacing: -0em;
  padding-left: 13px;
}

/* 下部説明文 */
.top__bottom-p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-align: left;
  letter-spacing: -0em;
  max-width: 725px;
}

/* ============================================================
   TOP PAGE - TABLET SIZE STYLES (タブレットサイズ)
============================================================ */

@media screen and (max-width: 1100px) {
  .text-overlay {
    width: 100%;
    max-width: 70%;
  }

  #video,
  .c-mv2 {
    padding-top: 65px;
  }

  .takasu-access-box {
    height: 100px;
  }

  .takasu-access {
    height: 65px;
    margin-top: 5px;
  }

  p.coming-soon {
    font-size: 4.5vw;
  }

  .request-start {
    font-size: 8vw;
  }

  .top.notice {
    flex-wrap: nowrap;
  }

  .top.notice-ttl {
    letter-spacing: 0;
    max-width: 90px;
  }
}

/* ============================================================
   TOP PAGE - SMARTPHONE SIZE STYLES (スマホサイズ)
============================================================ */

@media screen and (max-width: 550px) {
  .text-overlay {
    max-width: 80%;
  }

  .takasu-access-box {
    height: 60px;
  }

  .takasu-access-box img {
    height: 35px;
  }

  p.request-start {
    font-size: 40px;
  }

  p.coming-soon {
    font-size: 25px;
  }

  .to-form a {
    font-size: 22px;
    max-width: 400px;
  }

  p.sub-copy {
    font-size: 20px;
  }

  .top-flex02 {
    flex-direction: column;
    gap: 15px;
    max-width: 70%;
  }

  .top.notice {
    flex-wrap: wrap;
  }

  .top.notice-explain {
    padding-left: 0;
  }
}

/* ============================================================
   CONCEPT PAGE STYLES (コンセプトページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   CONCEPT PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------
concept .bg (コンセプト背景)
------------------------------------------------*/
.concept .bg::before {
  content: none;
}

/* ------------
concept-main-img (コンセプトメイン画像)
------------------------------------------------*/
.concept-main-img {
  position: relative;
  /* top: -300px; */
}

.concept-main-img img {
  width: 100%;
  height: 100%;
}

/* ------------
concept__content .c-center (コンセプトコンテンツ中央)
------------------------------------------------*/
.concept__content .c-center {
  position: relative;
  /* height: 100vw; */
}
.concept__content {
  background: #1b1441;
}
/* ------------
concept-cont (コンセプトコンテンツ)
------------------------------------------------*/
.concept-cont {
  position: absolute;
  bottom: 30px;
  text-align: center;
  width: 100%;
  font-size: 13px;
  color: #fff;
}

/* ------------
pc-base (PC基本表示)
------------------------------------------------*/
.pc-base {
  display: block;
}

/* ------------
sp-690 (スマホ690px表示)
------------------------------------------------*/
.sp-690 {
  display: none;
}

/* ------------
concept .main-ttl::after (コンセプトメインタイトル疑似要素)
------------------------------------------------*/
.concept .main-ttl::after {
  display: none;
}

/* ------------
concept-p (コンセプト段落)
------------------------------------------------*/
.concept-p {
  margin-bottom: 30px;
}

/* ============================================================
   CONCEPT PAGE - TABLET SIZE STYLES (タブレットサイズ)
============================================================ */

@media screen and (max-width: 769px) {
  .concept-cont {
    font-size: 12px;
    padding: 0 55px;
    bottom: 20px;
  }
}

/* ============================================================
   CONCEPT PAGE - PC SIZE STYLES (691px以上)
============================================================ */

@media screen and (min-width: 691px) {
  .pc-base {
    display: block;
  }

  .concept__content .c-center {
    /* margin-bottom: 80px; */
  }

  .concept-cont {
    display: none;
  }
}

/* ============================================================
   CONCEPT PAGE - SMARTPHONE SIZE STYLES (690px以下)
============================================================ */

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

  .pc-base {
    display: none;
  }

  .concept-cont {
    bottom: 10px;
    padding: 0 10px;
  }

  .concept .c-bg {
    background-position: 50% 64px;
  }
}

/* ============================================================
   CONCEPT PAGE - SMARTPHONE SIZE STYLES (450px以下)
============================================================ */

@media screen and (max-width: 450px) {
  .concept-cont {
    bottom: 12px;
    font-size: 11px;
  }

  .concept-p {
    margin-bottom: 14px;
  }

  .concept .c-title {
    height: 320px;
  }
}

/* ============================================================
   CONCEPT PAGE - SMARTPHONE SIZE STYLES (400px以下)
============================================================ */

@media screen and (max-width: 400px) {
  .concept-cont {
    bottom: 20px;
  }
}

/* ============================================================
   CONCEPT PAGE - SMARTPHONE SIZE STYLES (370px以下)
============================================================ */

@media screen and (max-width: 370px) {
  .concept-cont {
    font-size: 11px;
    bottom: 7px;
  }

  .pc-base {
    display: none;
  }
}

/* ============================================================
   ROOMPLAN PAGE STYLES (ルームプランページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   ROOMPLAN PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------
roomplan__content-inside (ルームプランコンテンツ内部)
------------------------------------------------*/
.roomplan__content-inside {
  position: relative;
  z-index: 2;
  padding-top: 60px;
}
.roomplan-title {
  font-size: 24px;
  letter-spacing: 0.1em;
  margin-top: 0;
  margin-bottom: 55px;
}
/* ------------
roomplan-list (ルームプランリスト)
------------------------------------------------*/
.roomplan-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  width: 100%;
  justify-content: center;
  padding-bottom: 120px;
  max-width: 810px;
  margin: 0 auto;
}

/* ------------
roomplan h4 (ルームプラン見出し)
------------------------------------------------*/
.roomplan h4 {
  margin-bottom: 60px;
}

/* ------------
room-design-ttl (ルームデザインタイトル)
------------------------------------------------*/
.room-design-ttl {
  margin-bottom: 35px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}
.room-design-ttl img {
  max-width: 440px;
  margin: 0 auto;
}
.roomdesign-title {
  font-size: 30px;
  letter-spacing: 0.15em;
  margin-top: 0;
  margin-bottom: 12px;
}
/* ------------
room-design-cap (ルームデザインキャプション)
------------------------------------------------*/
.room-design-cap {
  margin-bottom: 60px;
  line-height: 2;
}

/* ------------
rp-img-box (ルームプラン画像ボックス)
------------------------------------------------*/
.rp-img-box img {
  margin-bottom: 3rem;
}

.rp-img-box02 {
  gap: 2rem;
  margin-bottom: 0;
  justify-content: center;
}
.modaal-gallery-item.is_active img {
  max-width: 700px;
  padding: 30px;
}

.modaal-gallery-next-inner {
  display: none;
}
/* ------------
rp-bottom-cap (ルームプラン下部キャプション)
------------------------------------------------*/
.rp-bottom-cap {
  font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  letter-spacing: -0.02em;
  padding-bottom: 80px;
  margin-top: 15px;
}

/* ============================================================
   ROOMPLAN PAGE - SMARTPHONE SIZE STYLES (690px以下)
============================================================ */

@media screen and (max-width: 690px) {
  .roomplan-title {
    font-size: 20px;
    margin-bottom: 50px;
  }
  .roomplan-list {
    grid-template-columns: 1fr;
    padding-bottom: 50px;
    gap: 15px;
  }
  .room-design-ttl img {
    max-width: 70%;
  }
  .roomdesign-title {
    font-size: 20px;
  }
  .rp-img-box02 {
    display: block;
  }

  .rp-img-box img {
    width: 100%;
    margin-bottom: 2rem;
  }
  .rp-bottom-cap {
    font-size: 12px;
  }
}

/* ============================================================
   DESIGN PAGE STYLES (デザインページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   DESIGN PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------
design__content (デザインコンテンツ)
------------------------------------------------*/
.design .c__content {
  padding-top: 0;
}

.design .c__content .c-center {
  padding-top: 65px;
  padding-bottom: 60px;
}

.design .concept-main-img {
  margin-bottom: 60px;
}

/* ------------
design h3 (デザイン見出し)
------------------------------------------------*/
.design h3 {
  height: 70px;
  text-align: left;
  margin-bottom: 50px;
}

.design h3 img {
  max-width: 95%;
  width: auto;
  height: 100%;
}

/* ------------
design h4 (デザインサブ見出し)
------------------------------------------------*/
.design-imgs h4 {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.18em;
  margin-bottom: 35px;
}

/* ------------
design-cap (デザインキャプション)
------------------------------------------------*/
.design-cap {
  font-size: 17px;
  line-height: 2;
  text-align: center;
  margin-bottom: 35px;
}

/* ------------
design-imgs (デザイン画像コンテナ)
------------------------------------------------*/
.design-imgs {
  margin-top: 85px;
}
.design-cap + h4 {
  margin-top: 65px;
}
/* ------------
design-image (デザイン画像)
------------------------------------------------*/
.design-image {
  margin-bottom: 30px;
}
.landplan-section {
  margin-top: 90px;
}
.landplan-section h4 {
  font-size: 43px;
  letter-spacing: 0.16em;
  margin-top: 0;
  margin-bottom: 30px;
  margin-top: 40px;
}
.landplan-section h4 span {
  font-size: 1.4em;
  font-style: italic;
  font-weight: normal;
  letter-spacing: -0.01em;
  margin-right: 0.2em;
}
.design h3.h3-landplan {
  margin-top: 125px;
  margin-bottom: 25px;
}
.h4-landplan {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  margin-bottom: 15px;
  margin-top: 45px;
}
.landplan-item-flex {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px 50px;
  margin-top: 80px;
}

.landplan-item {
  width: 100%;
}
/* ------------
design-cap-bottom (デザイン下部キャプション)
------------------------------------------------*/
.design-cap-bottom {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  letter-spacing: -0.001em;
  margin-top: 90px;
}

/* ------------
sp-br (スマホ改行)
------------------------------------------------*/
.sp-br {
  display: none;
}

/* ============================================================
   DESIGN PAGE - TABLET SIZE STYLES (タブレットサイズ)
============================================================ */

@media screen and (max-width: 1100px) {
  .design h3.h3-landplan {
    margin-top: 50px;
  }
  .design h3 {
    height: 50px;
    margin-left: -20vw;
  }

  .landplan-section h4,
  .h4-landplan {
    font-size: 25px;
  }

  .design-cap {
    font-size: 16px;
  }

  /* タブレットサイズでは2カラムに変更 */
  .landplan-item-flex {
    /* grid-template-columns: 1fr 1fr; */
    gap: 10px 20px;
  }
}

/* ============================================================
   DESIGN PAGE - SMARTPHONE SIZE STYLES (スマホサイズ)
============================================================ */

@media screen and (max-width: 550px) {
  .design .c__content .c-center {
    padding-top: 30px;
    padding-bottom: 50px;
  }

  .design .concept-main-img {
    margin-bottom: 30px;
  }

  .design h3 {
    height: 50px;
    margin-bottom: 20px;
  }

  .design h3 img {
    margin-left: -5vw;
    max-width: 100%;
  }

  .design h4 {
    font-size: 18px;
    margin-bottom: 25px;
  }

  .design-cap {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 40px;
  }

  .design-imgs {
    margin-top: 50px;
  }

  .design-image {
    margin-bottom: 30px;
  }

  /* スマホサイズでは1カラムに変更 */
  .landplan-item-flex {
    grid-template-columns: 1fr;
    max-width: 90%;
    gap: 20px;
  }

  .sp-br {
    display: inline;
  }
}

/* ============================================================
   RESULT PAGE STYLES (実績ページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   RESULT PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------
result__content-inside (実績コンテンツ内部)
------------------------------------------------*/
.result__content-inside {
  padding-top: 50px;
  padding-bottom: 70px;
}

/* ------------
result-logo (実績ロゴ)
------------------------------------------------*/
.result-logo {
  max-width: 180px;
  width: 100%;
  margin: 0 auto 45px;
}

/* ------------
result__content h4 (実績コンテンツ見出し)
------------------------------------------------*/
.result__content h4 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 40px;
  letter-spacing: 0.075em;
}

.result__content h4.mb-10 {
  margin-bottom: 10px;
}

/* ------------
side-border (左右装飾線付きタイトル)
------------------------------------------------*/
.side-border {
  position: relative;
}

.side-border::before,
.side-border::after {
  content: "";
  position: absolute;
  top: 60%;
  width: 105px;
  height: 1px;
  background: #000;
}

.side-border::before {
  left: -125px;
}

.side-border::after {
  right: -125px;
}

/* ------------
result-about (実績説明文)
------------------------------------------------*/
p.result-about {
  font-size: 18px;
  line-height: 2.1;
  letter-spacing: -0.08em;
}

/* ------------
result__content p.small (実績コンテンツ小文字)
------------------------------------------------*/
.result__content p.small {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: right;
  margin-top: 35px;
  padding-right: 30px;
}
/* ============================================================
   RESULT PAGE - SMARTPHONE SIZE STYLES (スマホサイズ)
============================================================ */

@media screen and (max-width: 550px) {
  .result-logo {
    max-width: 135px;
  }

  .result__content h4 {
    font-size: 20px;
    letter-spacing: 0;
  }

  .side-border::before,
  .side-border::after {
    width: 50px;
  }

  .side-border::before {
    left: -70px;
  }

  .side-border::after {
    right: -70px;
  }

  p.result-about {
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: 0;
    text-align: left;
  }

  .result__content p.small {
    font-size: 8px;
    padding-right: 0;
    margin-top: 20px;
  }
}
/* ============================================================
   EQUIPMENT & STRUCTURE COMMON STYLES (設備・仕様 & 構造・セキュリティ 共通スタイル)
   両ページで共通して使用されるスタイル
============================================================ */

/* ============================================================
   COMMON STYLES - PC SIZE (共通スタイル - PCサイズ)
============================================================ */

/* ページタイトルSVG（両ページ共通） */
.structure .page-title-svg,
.equipment .page-title-svg {
  height: 70px;
  margin-top: -50px;
}

/* ページ内リンクのターゲット要素にスクロールマージンを追加（両ページ共通） */
#security,
#structure,
#ecology,
#kitchen,
#bathroom,
#microbubble,
#powderroom,
#toilet,
#others,
#storage {
  scroll-margin-top: 180px;
}

/* ------------
ページコンテンツ内部（両ページ共通）
------------------------------------------------*/
.structure__content-inside {
  position: relative;
  z-index: 2;
  padding-top: 55px;
}

/* ------------
page-btn (ページ内リンクボタン)
------------------------------------------------*/
.page-btn {
  justify-content: space-around;
  max-width: 990px;
  margin: 0 auto;
  gap: 25px;
  margin-bottom: 65px;
}
.page-btn.eq-link {
  flex-wrap: wrap;
}

/* 1行目：4カラム（gap 25px × 3箇所 = 75px を4つで分配） */
.page-btn.eq-link li:nth-child(-n + 4) {
  flex: 0 0 calc((100% - 75px) / 4);
  max-width: calc((100% - 75px) / 4);
}

/* 2行目：2カラム（gap 25px × 1箇所 = 25px を2つで分配） */
.page-btn.eq-link li:nth-child(n + 5) {
  flex: 0 0 calc((100% - 25px) / 2);
  max-width: calc((100% - 25px) / 2);
}

/* カテゴリリンクボタン（設備仕様・その他 / セキュリティ・構造） */
.page-btn--category {
  gap: 30px;
  margin-bottom: 20px;
}
.page-btn.page-btn--category li {
  max-width: 480px;
}
.page-btn--category li:first-of-type {
  background: -webkit-linear-gradient(
    0deg,
    rgba(173, 160, 146, 1) 0%,
    rgba(199, 185, 166, 1) 2.55%,
    rgba(182, 168, 151, 1) 4.53%,
    rgba(166, 153, 138, 1) 7.04%,
    rgba(161, 148, 133, 1) 9.05%,
    rgba(175, 161, 145, 1) 14.23%,
    rgba(179, 165, 149, 1) 15.55%,
    rgba(224, 209, 191, 1) 24.83%,
    rgba(235, 221, 202, 1) 28.03%,
    rgba(242, 228, 209, 1) 31.55%,
    rgba(243, 230, 214, 1) 32.38%,
    rgba(244, 232, 218, 1) 33.99%,
    rgba(243, 230, 214, 1) 36.62%,
    rgba(242, 227, 207, 1) 38.37%,
    rgba(213, 199, 182, 1) 49.71%,
    rgba(183, 169, 152, 1) 61.05%,
    rgba(179, 165, 149, 1) 62.18%,
    rgba(156, 142, 128, 1) 70.62%,
    rgba(147, 133, 121, 1) 75.87%,
    rgba(140, 128, 115, 1) 81.4%,
    rgba(144, 132, 119, 1) 83.95%,
    rgba(153, 142, 130, 1) 86.34%,
    rgba(175, 161, 146, 1) 89.83%,
    rgba(156, 144, 130, 1) 95.06%,
    rgba(128, 119, 108, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(173, 160, 146, 1) 0%,
    rgba(199, 185, 166, 1) 2.55%,
    rgba(182, 168, 151, 1) 4.53%,
    rgba(166, 153, 138, 1) 7.04%,
    rgba(161, 148, 133, 1) 9.05%,
    rgba(175, 161, 145, 1) 14.23%,
    rgba(179, 165, 149, 1) 15.55%,
    rgba(224, 209, 191, 1) 24.83%,
    rgba(235, 221, 202, 1) 28.03%,
    rgba(242, 228, 209, 1) 31.55%,
    rgba(243, 230, 214, 1) 32.38%,
    rgba(244, 232, 218, 1) 33.99%,
    rgba(243, 230, 214, 1) 36.62%,
    rgba(242, 227, 207, 1) 38.37%,
    rgba(213, 199, 182, 1) 49.71%,
    rgba(183, 169, 152, 1) 61.05%,
    rgba(179, 165, 149, 1) 62.18%,
    rgba(156, 142, 128, 1) 70.62%,
    rgba(147, 133, 121, 1) 75.87%,
    rgba(140, 128, 115, 1) 81.4%,
    rgba(144, 132, 119, 1) 83.95%,
    rgba(153, 142, 130, 1) 86.34%,
    rgba(175, 161, 146, 1) 89.83%,
    rgba(156, 144, 130, 1) 95.06%,
    rgba(128, 119, 108, 1) 100%
  );
}

.page-btn--category li:last-of-type {
  background: -webkit-linear-gradient(
    0deg,
    rgba(239, 238, 235, 1) 0%,
    rgba(233, 231, 227, 1) 0%,
    rgba(219, 216, 214, 1) 6.3%,
    rgba(181, 177, 179, 1) 18.33%,
    rgba(152, 148, 153, 1) 26.4%,
    rgba(248, 248, 248, 1) 52.25%,
    rgba(234, 233, 234, 1) 58.78%,
    rgba(197, 194, 196, 1) 71.33%,
    rgba(140, 135, 138, 1) 87.64%,
    rgba(219, 220, 220, 1) 100%,
    rgba(180, 180, 181, 1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(239, 238, 235, 1) 0%,
    rgba(233, 231, 227, 1) 0%,
    rgba(219, 216, 214, 1) 6.3%,
    rgba(181, 177, 179, 1) 18.33%,
    rgba(152, 148, 153, 1) 26.4%,
    rgba(248, 248, 248, 1) 52.25%,
    rgba(234, 233, 234, 1) 58.78%,
    rgba(197, 194, 196, 1) 71.33%,
    rgba(140, 135, 138, 1) 87.64%,
    rgba(219, 220, 220, 1) 100%,
    rgba(180, 180, 181, 1) 100%
  );
}

.page-btn li {
  max-width: 315px;
  width: 100%;
  background: #231f4f;
  position: relative;
}
.page-btn li::before {
  content: "";
  display: block;
  width: 17px;
  height: 17px;
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  background: #bca78e;
  position: absolute;
  bottom: 3px;
  right: 3px;
}
.page-btn--category li::before {
  background: #211815;
}
.page-btn li a {
  font-size: 22px;
  font-weight: bold;
  /* letter-spacing: -0.1em; */
  color: #ffffff;
  padding: 12px;
  width: 100%;
  display: block;
  text-align: center;
  position: relative;
}
.page-btn--category li a {
  color: #211815;
}

/* ------------
フレックスボックスレイアウト（両ページ共通）
画像と説明文を横並びに配置
------------------------------------------------*/

/* 基本フレックスボックス：画像と説明文を横並びに */
.structure-flexbox01 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 40px;
}

/* マージンなしバリエーション */
.structure-flexbox01.mb0 {
  margin-bottom: 0;
}

/* キッチンセクション用のマージン調整 */
.kitchen .structure-flexbox01 {
  margin-bottom: 80px;
}

/* 構造・セキュリティページの説明文スタイル */
.structure .explain {
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  margin-top: -0.3em;
  line-height: 1.4;
  letter-spacing: -0em;
}

/* 各セクションごとの説明文幅 */
.security-system .explain {
  max-width: 265px;
}

.dimple-key .explain,
.color-monitor .explain,
.security-camera .explain {
  max-width: 270px;
}

.elevator-security .explain {
  max-width: 175px;
}
/* ------------
structure-flexbox02 (Tebra（テブラ）キーシステム)
------------------------------------------------*/
.structure-flexbox02 {
  display: grid;
  grid-template-columns: 265px 310px 400px;
  grid-template-areas:
    "text1 text1 key"
    "text2  reader key";
  gap: 30px 20px;
  margin-top: 15px;
  margin-bottom: 20px;
  justify-content: space-between;
}

/* Tebraキー説明文1 */
.structure-flexbox02 .tebra-text1 {
  grid-area: text1;
}
.structure-flexbox02 .tebra-text1 .explain {
  max-width: 100%;
}

/* Tebraキー説明文2 */
.structure-flexbox02 .tebra-text2 {
  grid-area: text2;
  max-width: 280px;
}

/* Tebra共用部リーダ画像 */
.structure-flexbox02 .tebra-reader {
  grid-area: reader;
}
.structure-flexbox02 .tebra-reader img {
  margin-bottom: 20px;
}

/* Tebraキー画像 */
.structure-flexbox02 .tebra-key {
  grid-area: key;
}
/* ------------
st-flex-ttl (構造フレックスタイトル)
------------------------------------------------*/
.st-flex-ttl {
  font-weight: 700;
  font-size: 24px;
  text-align: left;
  letter-spacing: -0.07em;
  margin-bottom: 25px;
}
.st-flex-ttl.c-center {
  text-align: center;
}

.kitchen .st-flex-ttl {
  margin-top: 1em;
  margin-bottom: 0.8em;
}
.delica-img {
  height: 20px;
  width: fit-content;
  margin-top: -5px;
  margin-inline: 5px;
}
.kitchen-desc {
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.1em;
  line-height: 1.7;
  margin-bottom: 2em;
}
.microbubble .w-670 {
  margin-bottom: 60px;
}
/* ------------
グリッドレイアウト（両ページ共通）
画像を格子状に配置するためのグリッドシステム
------------------------------------------------*/

/* 基本グリッド：2カラム */
.structure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 50px;
}

/* 1カラムグリッド（マイクロバブルバス用） */
.structure-grid_1 {
  grid-template-columns: 1fr;
}
.structure-grid_1 li {
  display: flex;
}
.structure-grid_1 li.rev {
  flex-direction: row-reverse;
}
.structure-grid_1 li img {
  max-width: 50%;
}
.structure-grid_1 li img.mr-65 {
  margin-right: 65px;
  max-width: calc(50% - 65px);
}

/* 3カラムグリッド（キッチン用） */
.structure-grid_3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px 30px;
}

/* キッチンの画像14を2行分の高さに */
.structure-grid_3 li:nth-child(9) {
  grid-row: span 2;
}

/* キッチンの画像15を2カラム分の幅に */
.structure-grid_3 li:nth-child(10) {
  grid-column: span 2;
}

/* 4カラムグリッド（バスルーム・洗面室・トイレ用） */
.structure-grid_4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px 20px;
}

/* 各セクションの最初の2つの画像を2カラム分の幅に */
.bathroom .structure-grid_4 li:nth-child(1),
.bathroom .structure-grid_4 li:nth-child(2),
.powderroom .structure-grid_4 li:nth-child(1),
.powderroom .structure-grid_4 li:nth-child(2),
.toilet .structure-grid_4 li:nth-child(1),
.toilet .structure-grid_4 li:nth-child(2) {
  grid-column: span 2;
}

/* バスルームの最後の2つの画像を2カラム分の幅に */
.bathroom .structure-grid_4 li:nth-last-child(-n + 2) {
  grid-column: span 2;
}

/* セクション固有のギャップ設定 */
.bathroom .structure-grid_4,
.powderroom .structure-grid_4,
.toilet .structure-grid_4 {
  gap: 20px;
}

/* ------------
bg-wh (白背景エリア)
------------------------------------------------*/
.bg-wh {
  background: rgba(255, 255, 255, 0.7);
  padding: 30px;
  padding-bottom: 45px;
  padding-top: 35px;
  color: #211815;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

.bg-wh h4 {
  font-size: 24px;
  text-align: left;
  letter-spacing: -0.07em;
  margin-bottom: 10px;
}

.bg-wh img {
  margin-bottom: 0;
}

/* ------------
st-content-flex (構造コンテンツフレックス)
------------------------------------------------*/
.st-content-flex {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto auto auto auto;
  gap: 15px;
  row-gap: 8px;
  margin-top: 45px;
}

/* すべてのliをcontents化 */
.st-content-flex li {
  display: contents;
}

/* テキストエリア内のdivもcontents化 */
.st-content-flex li > div {
  display: contents;
}

/* .pcと.tabクラスがついていてもcontentsを優先 */
.st-content-flex li.pc,
.st-content-flex li.tab,
.st-content-flex li.pc.tab {
  display: contents;
}

/* スラブ厚テキスト */
.st-content-flex .slab-text .ex-top:not(.sub) {
  grid-row: 1;
  grid-column: 1 / 3;
}
.st-content-flex .slab-text .ex-top.sub {
  grid-row: 2;
  grid-column: 1 / 3;
}

/* 戸境壁テキスト */
.st-content-flex .wall-text .ex-top:not(.sub) {
  grid-row: 1;
  grid-column: 3 / 5;
}
.st-content-flex .wall-text .ex-top.sub {
  grid-row: 2;
  grid-column: 3 / 5;
}

/* 溶接閉鎖フープ筋テキスト */
.st-content-flex .hoop-text .ex-top:not(.sub) {
  grid-row: 1;
  grid-column: 5 / 7;
}
.st-content-flex .hoop-text .ex-top.sub {
  grid-row: 2;
  grid-column: 5 / 7;
}

/* コンクリート構成概念図（PC/TAB版） */
.st-content-flex .concrete-img.pc p,
.st-content-flex .concrete-img.tab p {
  grid-row: 3;
  grid-column: 1 / -1;
  text-align: center;
  width: 100%;
  margin: 40px auto;
}

/* コンクリート構成概念図（SP版）- PC表示時は非表示 */
.st-content-flex .concrete-img.sp p {
  display: none;
}

.st-content-flex .concrete-img.pc img,
.st-content-flex .concrete-img.tab img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* 柱の断面概念図（SP版）- PC表示時は非表示 */
.st-content-flex .column-img p {
  display: none;
}

/* 劣化軽減テキスト（左半分 = 50%） */
.st-content-flex .deterioration-text .ex-bottom:not(.sub) {
  grid-row: 4;
  grid-column: 1 / 4;
}
.st-content-flex .deterioration-text .ex-bottom.sub {
  grid-row: 5;
  grid-column: 1 / 4;
}

/* かぶり厚テキスト（右半分 = 50%） */
.st-content-flex .cover-text .ex-bottom:not(.sub) {
  grid-row: 4;
  grid-column: 4 / 7;
}
.st-content-flex .cover-text .ex-bottom.sub {
  grid-row: 5;
  grid-column: 4 / 7;
}
.st-content-flex p {
  color: #211815;
  text-align: left;
  font-weight: 600;
}

/* ------------
ex-top, ex-bottom (説明テキスト)
------------------------------------------------*/
/* 上部説明文（タイトル） */
.st-content-flex p.ex-top {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 320px;
  line-height: 1.5;
}
.st-content-flex p.ex-top.sub {
  font-size: 16px;
  font-weight: 500;
}

/* 下部説明文（タイトル） */
.st-content-flex p.ex-bottom {
  font-size: 22px;
  font-weight: 800;
}
.st-content-flex p.ex-bottom.sub {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.1em;
}

/* ------------
c-ttl (コンテンツタイトル)
------------------------------------------------*/
.structure__content-inside h3 {
  text-align: center;
  color: #211815;
  padding-bottom: 30px;
}
h3 p.c-ttl {
  font-size: 42px;

  line-height: 1;
  margin-bottom: 20px;
  margin-top: 50px;
  position: relative;
}
h3 p.c-ttl span {
  font-size: 17px;
  letter-spacing: 0.15em;

  position: absolute;
  bottom: 5px;
}
h3 p.c-ttl + p,
.top-cap {
  font-size: 20px;
  font-weight: 800;
}

/* ------------
img.eco (エコロゴ)
------------------------------------------------*/
img.eco {
  margin: 0;
}

/* ------------
ecology-flex (エコロジーフレックス)
------------------------------------------------*/
.ecology-flex {
  display: grid;
  grid-template-columns: 485px 530px;
  gap: 10px;
  text-align: left;
  align-items: center;
  margin-bottom: 55px;
}

/* .ecology-text - テキスト全体のコンテナ（必要に応じてスタイルを追加） */

/* エコロジータイトル（サブ） */
.ecology-title.sub {
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.1em;
}
.ecology-title {
  font-weight: 900;
  font-size: 35px;
  letter-spacing: 0.1em;
}
/* エコロジータイトル説明文 */
.ecology-title-desc {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.08em;
  margin-bottom: 0.5em;
}
.ecology-desc {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.04em;
  max-width: 90%;
  line-height: 1.7;
}
/* エコロジー注釈 */
.ecology-note {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.05em;
}
.equipment-note {
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: -0.13em;
}
.toilet .equipment-note {
  margin-top: 42px;
  font-size: 10px;
  text-align: right;
}
.kitchen .equipment-note {
  margin-top: 35px;
  text-align: right;
}
.bathroom .equipment-note {
  margin-top: 35px;
  text-align: left;
}
/* .ecology-img - 画像コンテナ（必要に応じてスタイルを追加） */

/* ------------
ecology-second (エコロジー第2セクション)
------------------------------------------------*/
.ecology-second {
  text-align: left;
}

/* ------------
eco-flex (エコフレックス)
------------------------------------------------*/
.ecology-flex.ecojose {
  grid-template-columns: 415px 645px;
  align-items: start;
  margin-bottom: 0;
}
.eco-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.eco-flex p {
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 0.01em;
}
.eco-img {
  margin-left: 1rem;
}

/* ------------
bottom-small (下部小文字)
------------------------------------------------*/
.bottom-small {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: left;
  padding-top: 40px;
  padding-bottom: 30px;
}

/* ============================================================
   COMMON STYLES - TABLET SIZE (共通スタイル - タブレットサイズ)
   設備・仕様 & 構造・セキュリティ 両ページ対応
============================================================ */

@media screen and (max-width: 1100px) {
  /* タブレットサイズではヘッダーが小さくなるため、スクロールマージンを調整（両ページ共通） */
  #security,
  #structure,
  #ecology,
  #kitchen,
  #bathroom,
  #microbubble,
  #powderroom,
  #toilet,
  #others,
  #storage {
    scroll-margin-top: 100px;
  }

  .page-btn {
    padding-inline: 30px;
    gap: 15px;
  }
  .page-btn li {
    max-width: 50%;
  }
  .page-btn--category {
    gap: 20px;
  }
  .ecology-flex {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .ecology-desc {
    max-width: 100%;
  }
  .ecology-flex.ecojose {
    grid-template-columns: 1fr 1fr;
  }
  /* タブレットサイズではeq-linkを2カラムに */
  .page-btn.eq-link li:nth-child(-n + 4),
  .page-btn.eq-link li:nth-child(n + 5) {
    flex: 0 0 calc(50% - 8px);
    max-width: calc(50% - 8px);
  }

  .structure-flexbox02 {
    display: grid;
    grid-template-columns: 63% 33%;
    grid-template-areas:
      "text1 text1 "
      "text2 reader"
      "key key";
    gap: 20px;
  }
  .structure-flexbox02 .tebra-text2 {
    max-width: 100%;
  }
}

/* ============================================================
   COMMON STYLES - TABLET SIZE (共通スタイル - 900px以下)
   設備・仕様 & 構造・セキュリティ 両ページ対応
============================================================ */

@media screen and (max-width: 900px) {
  h3 p.c-ttl span {
    position: unset;
    display: block;
    margin-top: 0.5em;
  }
  .st-content-flex {
    display: block;
  }
  .st-content-flex p.ex-top {
    max-width: 100%;
  }
  .structure-flexbox01 {
    display: block;
  }
  .structure .explain {
    max-width: 100%;
    margin-bottom: 2rem;
    text-align: left;
  }
  .structure-grid.structure-grid_3,
  .structure-flexbox01.structure-grid_4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .bathroom .structure-grid_4,
  .powderroom .structure-grid_4,
  .toilet .structure-grid_4 {
    gap: 20px;
    grid-template-columns: 1fr 1fr;
  }
  .structure-grid {
    grid-template-columns: 1fr;
  }
  .structure-grid {
    padding-bottom: 30px;
    gap: 50px;
  }
  .microbubble .structure-grid {
    gap: 0;
  }
  .structure-flexbox01.dimple-key img,
  .structure-flexbox01.color-monitor img,
  .structure-flexbox01.security-camera img,
  .structure-flexbox01.elevator-security img {
    max-width: 30%;
    margin-inline: auto;
    display: block;
  }
  .structure-flexbox01.elevator-security img {
    max-width: 70%;
  }
  .structure-grid_1 li img.mr-65 {
    margin-right: 20px;
    max-width: calc(50% - 20px);
  }

  .ecology-flex.ecojose {
    grid-template-columns: 1fr;
    margin-bottom: 60px;
  }

  p.grid-img {
    text-align: center;
  }
  .bottom-small {
    padding: 30px;
  }
}

/* ============================================================
   COMMON STYLES - SMARTPHONE SIZE (共通スタイル - スマホサイズ)
   設備・仕様 & 構造・セキュリティ 両ページ対応
============================================================ */

@media screen and (max-width: 550px) {
  /* スマホサイズではヘッダーの高さが65pxなので、スクロールマージンを調整（両ページ共通） */
  #security,
  #structure,
  #ecology,
  #kitchen,
  #bathroom,
  #microbubble,
  #powderroom,
  #toilet,
  #others,
  #storage {
    scroll-margin-top: 80px;
  }

  .structure .page-title-svg,
  .equipment .page-title-svg {
    max-width: 90%;
  }

  /* スマホサイズではeq-linkを1カラムに */
  .page-btn.eq-link li:nth-child(-n + 4),
  .page-btn.eq-link li:nth-child(n + 5) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  h3 p.c-ttl span {
    position: unset;
    display: block;
    margin-top: 0.5em;
  }
  .bg-wh {
    padding: 35px 15px;
  }
  .structure-flexbox02 {
    grid-template-columns: auto;
    grid-template-areas:
      "text1 "
      "text2 "
      "reader"
      "key ";
    gap: 10px;
  }
  .structure__content-inside h3 {
    padding-inline: 15px;
  }
  .structure-flexbox02 .tebra-text1 .explain {
    margin-bottom: 0;
  }
  .structure-flexbox01.dimple-key img,
  .structure-flexbox01.color-monitor img,
  .structure-flexbox01.security-camera img {
    max-width: 50%;
  }
  .structure-flexbox01.elevator-security img {
    max-width: 100%;
  }
  .eco-flex {
    display: block;
  }

  .eco-img {
    text-align: right;
    max-width: 55%;
    margin-left: auto;
  }
  .ecology-title {
    font-size: 30px;
  }
  .ecology-title.sub {
    font-size: 20px;
  }
  .st-flex-ttl,
  .bg-wh h4,
  .st-content-flex p.ex-top,
  .st-content-flex p.ex-bottom,
  .ecology-title-desc,
  .eco-flex p {
    font-size: 19px;
  }
  .st-flex-ttl {
    margin-bottom: 1em;
  }
  h3 p.c-ttl + p,
  .top-cap,
  .kitchen-desc {
    font-size: 16px;
  }
  .delica-img {
    height: 16px;
  }
  .structure .explain,
  .st-content-flex p.ex-top.sub,
  .st-content-flex p.ex-bottom.sub,
  .ecology-desc {
    font-size: 15px;
  }
  .equipment-note {
    font-size: 10px;
  }
  .st-content-flex li {
    display: block;
    margin-bottom: 30px;
  }
  .st-content-flex li.pc,
  .st-content-flex li.tab,
  .st-content-flex li.pc.tab {
    display: none;
  }
  .st-content-flex .concrete-img.sp p,
  .st-content-flex .column-img p {
    display: block;
  }
  .microbubble .w-670 {
    margin-bottom: 20px;
  }
  .structure-grid_1 li {
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    flex-direction: column-reverse;
  }
  .structure-grid_1 li.rev {
    flex-direction: column-reverse;
  }
  .structure-grid_1 li img.mr-65,
  .structure-grid_1 li img {
    max-width: 100%;
    margin: 0;
  }
  .structure-grid.structure-grid_3,
  .structure-flexbox01.structure-grid_4,
  .bathroom .structure-grid_4,
  .powderroom .structure-grid_4,
  .toilet .structure-grid_4 {
    gap: 10px;
  }
  .page-btn {
    display: block;
  }

  .page-btn li a {
    margin: 0 auto;
  }
  .page-btn li a {
    font-size: 16px;
  }
  .page-btn li {
    margin-bottom: 1rem;
    margin-inline: auto;
    max-width: 100%;
  }
  .page-btn.page-btn--page-link li,
  .page-btn.eq-link li:nth-child(-n + 4),
  .page-btn.eq-link li:nth-child(n + 5) {
    max-width: 80%;
  }
  h3 p.c-ttl {
    font-size: 35px;
  }
  h3 .c-ttl {
    margin-top: 80px;
  }
  .bottom-small {
    padding: 15px;
  }
}

/* ============================================================
   GALLERY PAGE STYLES (マンションギャラリー案内図ページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   GALLERY PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------
gallery .c-title img (ギャラリータイトル画像)
------------------------------------------------*/
.gallery .c-title img {
  height: 28px;
}

/* ------------
gallery__content .wrapper (ギャラリーコンテンツラッパー)
------------------------------------------------*/
.gallery__content .wrapper {
  padding-top: 50px;
  padding-bottom: 65px;
}

/* ------------
gallery__content .img01 (ギャラリー画像01)
------------------------------------------------*/
.gallery__content .img01 {
  max-width: 777px;
  width: 95%;
  margin: 0 auto 45px;
}

/* ------------
gallery__content .img02 (ギャラリー画像02)
------------------------------------------------*/
.gallery__content .img02 {
  max-width: 777px;
  width: 95%;
  margin: 0 auto;
}

/* ============================================================
   GALLERY PAGE - SMARTPHONE SIZE STYLES (スマホサイズ)
============================================================ */

@media screen and (max-width: 550px) {
  .gallery .c-title img {
    height: 40px;
  }

  .gallery__content .img01,
  .gallery__content .img02 {
    width: 100%;
  }

  .gallery__content .img01 {
    margin-bottom: 30px;
  }
}
/* ============================================================
   OUTLINE PAGE STYLES (物件概要ページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   OUTLINE PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------
outline__content (物件概要コンテンツ)
------------------------------------------------*/
.outline__content .wrapper {
  font-family: "Zen Kaku Gothic New", sans-serif;
  padding-top: 40px;
  padding-bottom: 60px;
}

/* notice (予告広告) */
.notice {
  align-items: center;
  margin-bottom: 30px;
}

.notice-ttl {
  background: #231815;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 100%;
  max-width: 110px;
  height: 35px;
  padding: 10px;
}

.notice-explain {
  font-size: 9px;
  width: 100%;
  max-width: 718px;
  position: relative;
}

.notice-explain p {
  font-size: 9px;
  font-weight: lighter;
  letter-spacing: -0.01em;
}

/* table (物件概要テーブル) */
.table {
  border: 1px solid #5a5958;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 2.5em;
  text-align: left;
  padding: 5px;
}

.table th,
.outline__content table td {
  border: 1px solid #5a5958;
  line-height: 1.8;
}

.table th {
  background: #d3c8c1;
  font-size: 14px;
  text-align: center;

  letter-spacing: 0.5em;
  /* width: 280px; */
  width: 306px;
  padding: 5px;
}

.table td {
  background: #fff;
  font-size: 14px;
  padding: 8px 10px 8px 50px;
}

.table td.red {
  color: #ff0000;
}

.table + .w-850 {
  margin-top: 10px;
}

.table-br {
  display: block;
}

/* ============================================================
   LOCATION PAGE STYLES (ロケーションページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* ============================================================
   LOCATION PAGE - PC SIZE STYLES (PCサイズ)
============================================================ */

/* ------------
page-mv (ページメインビジュアル全体)
------------------------------------------------*/
.page-mv .c-bg {
  position: relative;
}

.page-mv .c-title img {
  width: auto;
  height: 100%;
  margin: 0 auto;
}

/* ------------
page-title-svg (ページタイトルSVG)
------------------------------------------------*/
.page-title-svg {
  height: 100px;
  margin-top: -60px;
  filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.8))
    drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.7)) drop-shadow(-3px -3px 6px rgba(0, 0, 0, 0.6));
}

/* ------------
location__content (ロケーションコンテンツ)
------------------------------------------------*/
.location__content-inside {
  padding-top: 70px;
}

.location__content .access-title {
  margin-bottom: 30px;
}

.location__content .takasu-access {
  height: 115px;
}

.location__content .access-catch {
  font-size: 24px;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 35px;
}

.location__content .access-description {
  margin-bottom: 40px;
}

.location__content .access-description p {
  font-size: 18px;
  font-weight: 800;
  line-height: 2.2;
  letter-spacing: -0.02em;
}

/* ------------
location-images (ロケーション画像)
------------------------------------------------*/

.location-images {
  margin-bottom: 80px;
  position: relative;
}

.location-images::before {
  content: "";
  background-image: url(../img/location/livegracefully.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: block;
  width: 466px;
  height: 148px;
  position: absolute;
  z-index: 1;
  right: 210px;
  bottom: -65px;
  filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, 0.8))
    drop-shadow(-2px -2px 4px rgba(0, 0, 0, 0.7)) drop-shadow(-3px -3px 6px rgba(0, 0, 0, 0.6));
}

.location-image-item {
  width: 100%;
  max-width: calc(100% / 3);
}

/* ------------
access-detail (アクセス詳細)
------------------------------------------------*/
.access-detail.map01 {
  padding-top: 10px;
}
.access-detail.map02 {
  padding-top: 35px;
  padding-inline: 15px;
}
.access-map {
  /* border: 1px solid #211815; */
  margin-bottom: 55px;
}

/* ------------
life-info-title (生活情報タイトル)
------------------------------------------------*/
.life-info-title {
  font-size: 25px;
  font-weight: 700;
  margin-top: 60px;
  margin-bottom: 20px;
}

/* ------------
c-cap (キャプション)
------------------------------------------------*/
.c-cap {
  font-size: 30px;
  position: relative;
}

.c-cap::after {
  content: "";
  background-image: url(../img/common/parts-under.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 50%;
  display: block;
  width: 100%;
  height: 10px;
  position: absolute;
  bottom: -20px;
}

/* ------------
life-info-flex (生活情報フレックス)
------------------------------------------------*/
.life-info-flex {
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  margin-bottom: 20px;
}

/* ------------
フォントサイズクラス (walk-time, walk-time-number, distance-info)
------------------------------------------------*/
.walk-time {
  font-size: 1.1em;
}

.walk-time-number {
  font-size: 1.5em;
}

.distance-info {
  font-size: 0.6em;
  font-weight: 400;
}

/* 距離と徒歩時間の表示用クラス */
.meter {
  /* 距離の表示 */
}

.walk {
  /* 徒歩時間の表示 */
}

/* ------------
life-info-flex li (生活情報リストアイテム)
------------------------------------------------*/
.life-info-flex li {
  width: 100%;
  max-width: 325px;
}

.life-info-flex li p {
  font-size: 14px;
  letter-spacing: -0.04em;
}

.life-info-flex li p .walk-time {
  margin-left: 0.5em;
}

.life-info-flex li p .walk-time-number {
  margin-inline: 0.1em;
}

/* ------------
location-information-box (ロケーション情報ボックス)
------------------------------------------------*/
.location-information-box {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 0 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
}

/* ------------
location-information-item (ロケーション情報アイテム)
------------------------------------------------*/
.location-information-item {
  width: 330px;
  height: auto;
}

/* ------------
justify-bet (両端揃え)
------------------------------------------------*/
.justify-bet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.4;
  position: relative;
}
.stn-name + .justify-bet {
  margin-top: -0.4em;
}

/* ------------
stn-name (駅名)
------------------------------------------------*/
.stn-name {
  text-align: left;
  width: fit-content;
}
.stn-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.05em;
}
/* ------------
distance (距離)
------------------------------------------------*/
.distance {
  text-align: right;
  width: fit-content;
}

.distance {
  margin-left: auto;
}
.distance .meter {
  display: inline-block;
  position: relative;
  width: 4.2em;
  padding-left: 1em;
  letter-spacing: -0.1em;
}
.distance .walk {
  display: inline-block;
  position: relative;
  width: 4.5em;
  padding-left: 2em;
  margin-left: 0.2em;
}
.distance .meter::before,
.distance .walk::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 100%;
}
.distance .meter::before {
  content: "約";
  display: block;
}
.distance .walk::before {
  content: "徒歩";
  display: block;
  width: 2em;
}
/* ------------
location-information-ttl (ロケーション情報タイトル)
------------------------------------------------*/
.location-information-ttl {
  background-color: #000;
  color: #fff;
  font-size: 13px;
  line-height: 2;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}

/* ------------
location-notice (ロケーション注意事項)
------------------------------------------------*/
.location-notice {
  padding-bottom: 75px;
  padding-left: 1em;
}

.location-notice p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  text-align: left;
  letter-spacing: -0.01em;
}

/* ------------
information-bottom-p (情報下部段落)
------------------------------------------------*/

/* info-date (情報日付) */
.info-date {
  font-size: 15px;
}

/* ============================================================
   LOCATION PAGE - TABLET SIZE STYLES (タブレットサイズ)
============================================================ */
@media screen and (max-width: 1100px) {
  .page-mv .c-title {
    height: calc(65px * 0.7);
  }

  .page-title-svg,
  .structure .page-title-svg,
  .equipment .page-title-svg {
    height: calc(100px * 0.7);
    margin-top: calc(-60px * 0.7);
  }

  .location-images::before {
    width: calc(466px * 0.7);
    height: calc(148px * 0.7);
    right: calc(210px * 0.3);
    bottom: calc(-65px * 0.7);
  }

  .location__content .takasu-access {
    height: calc(115px * 0.7);
  }

  .location__content .access-catch {
    font-size: calc(24px * 0.7);
  }

  .location__content .access-description {
    font-size: calc(18px * 0.7);
  }

  .life-info-flex li p {
    line-height: 1.2;
    margin-top: 0.5em;
  }

  .location-information-box {
    justify-content: center;
  }

  .location-notice {
    max-width: 85%;
    padding-bottom: 50px;
  }
}

/* ============================================================
   LOCATION PAGE - SMARTPHONE SIZE STYLES (スマホサイズ)
============================================================ */

@media screen and (max-width: 550px) {
  .page-mv-image {
    height: 50vh;
  }

  .page-mv-image img {
    width: auto;
    height: 100%;
    object-fit: cover;
  }

  .location__content-inside {
    padding-top: 30px;
  }

  .page-title-svg,
  .structure .page-title-svg,
  .equipment .page-title-svg {
    height: calc(100px * 0.5);
    margin-top: calc(-60px * 0.5);
  }

  .location__content .takasu-access {
    height: auto;
  }

  .location-images {
    flex-wrap: wrap;
  }

  .location-image-item {
    max-width: 100%;
  }

  .location-images::before {
    width: 70%;
    right: 20px;
  }

  .access-detail {
    padding-top: 0;
  }

  .life-info-title {
    font-size: 20px;
    font-weight: 700;
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .life-info-flex {
    flex-wrap: wrap;
    justify-content: center;
  }

  .life-info-flex li p {
    margin-top: 0;
  }
}

/* ============================================================
   OUTLINE PAGE - TABLET SIZE STYLES (タブレットサイズ)
============================================================ */

@media screen and (max-width: 900px) {
  /* noticeセクションのレスポンシブ対応 */
  .notice {
    flex-wrap: wrap;
    row-gap: 0.5em;
  }

  /* テーブルのレスポンシブ対応 */
  .table td {
    padding: 8px 10px 8px 15px;
  }
}

@media screen and (max-width: 690px) {
  /* outline.html */
  .outline__content .wrapper {
    top: 0;
  }
}

/* ============================================================
   OUTLINE PAGE - SMARTPHONE SIZE STYLES (スマホサイズ)
============================================================ */

@media screen and (max-width: 550px) {
  .table th,
  .table td {
    text-align: left;
    margin: 0 auto;
  }

  .table th {
    letter-spacing: 0;
    width: 34%;
  }

  .table td {
    padding: 5px;
  }
}

/* ============================================================
   REQUEST PAGE STYLES (資料請求ページ)
   HTML要素の順序に合わせて整理
============================================================ */

/* 資料請求ページのスタイルは別ファイル（ph-takasu.css）に記述済み */

/* 250902add */
#myVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity 1s ease-out;
  z-index: 8999;
}

#myVideo video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
/* 250917add */
.top-mv-logo_v2 {
  position: absolute;
  top: 11vw;
  left: 16.5vw;
  max-width: 33.5%;
  width: 100%;
  opacity: 0;
}
@media screen and (max-width: 550px) {
  .top-mv-logo_v2 {
    top: 20vw;
  }
}
/* 250919 */
/* メインビジュアルロゴ　ふわっと出現 */
.top-mv-logo {
  position: absolute;
  top: 11vw;
  left: 16.5vw;
  max-width: 33.5%;
  width: 100%;
  opacity: 0;
}
@media screen and (max-width: 550px) {
  .top-mv-logo {
    top: 112px;
    left: 72px;
  }
}

/* 251008 */
.insta {
  width: 30px;
  height: 30px;
}

/* 251010 */
@media screen and (max-width: 690px) {
  .concept__content {
    background: #251e54;
    padding-bottom: 15px;
  }

  .concept-cont {
    position: relative;
    bottom: 0;
    margin-top: -60vw;
    /* z-index: 10; */
    z-index: 3;
  }
}

/* 251014 */
.privacy {
  font-family: "Shippori Mincho", serif, "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic,
    "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.privacy_main_title {
  font-size: 24px;
  font-weight: 500;
}
.privacy p {
  margin-bottom: 10px;
}
.privacy_title {
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
}

.privacy_list li {
  text-indent: -1rem;
  padding-left: 1rem;
  margin-bottom: 5px;
}
.privacy_list.--type01 {
  margin-bottom: 10px;
}
.privacy_list.--type02 {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.privacy_list.--type03 {
  padding-left: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.t-right {
  text-align: right;
}
.footer-menu {
  font-weight: bold;
}


/* 251029 */
.w-100{
  width: 100%;
}
.mt-30{
  margin-top: 30px;
}
.mt-40{
  margin-top: 40px;
}

.design .page-mv-image img{
width: 100%;
}

.design-imgs h4{
  width: auto;
}
.design-imgs h4 img{
  width: auto ;
  max-width: 400px ;
}


/* 251030 疑似要素文字化けしたため修正*/

.distance_list{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-left: auto;
  width: 100%;
  max-width: 127px;

}
.distance_item{
  display: flex;
  width: 100%;
  max-width: 61px;
  justify-content: space-between;
}
.distance_sub_text{
  margin-right: 2px;
}