@charset "UTF-8";
/*//////////SPサイズ///////////*/
@media screen and (max-width:480px) {

/** ==============================
 *  固定ヘッダー（スクロール時に表示）SP用 - 修正案
 * ============================== **/
/* ヘッダー全体 */
#fixed-header {
  height: 14vw;
  padding: 0 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6); /* 半透明の白 */
  backdrop-filter: blur(10px); /* 背景をぼかす */
  -webkit-backdrop-filter: blur(10px); /* Safari対応 */
  width: 100%;
  z-index: 10000;
  transition: top 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* 薄い下線で締める */
}

.show-fixed-header{
    position: fixed;
    top: 0 !important;
}
/* ロゴ */
.fixed-logo img {
  height: 9vw;
  width: auto;
}

/* バーガーメニュー */
#burger-menu {
  width: 8vw;
  height: 8vw;
  position: relative;
  z-index: 9999;
  background: none;
  border: none;
  cursor: pointer;
}

/* 線スタイル */
.burger-lines,
.burger-lines::before,
.burger-lines::after {
  content: "";
  display: block;
  background-color: #514540;
  height: 1px;
  width: 8vw;
  transition: all 0.3s ease;
}

.burger-lines::before {
  transform: translateY(-2.5vw);
}
.burger-lines::after {
  transform: translateY(2.5vw);
}

/** ==============================
 *  スライドメニュー（SP用）
 * ============================== **/
#slide-menu {
  position: fixed;
  top: 0;
  right: -100vw; /* SPは全幅を覆う */
  width: 100vw;
  height: 100vh;
  background-color: #514540;
  z-index: 10000;
  transition: right 0.4s ease-in-out;
  display: flex;
  flex-direction: column;
  padding: 6vw 4vw;
}

.show-slide-menu {
  right: 0 !important;
}
.show-fixed-buttons {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 0vw) !important;
}

/* メニューリスト */
#slide-menu ul {
  list-style: none;
  padding: 0;
  margin: 10vw 0 0;
  display: flex;
  flex-direction: column;
  gap: 5vw;
}

/* メニュー項目 */
#slide-menu li {
  padding: 0;
}

/* メニューリンク */
#slide-menu a {
  font-size: 5vw;
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  display: block;
  text-align: center;
}
#slide-menu a:hover {
  opacity: 0.8;
}

/* メニューの区切り線 */
.menu-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 5vw 0;
}

/* 電話番号エリア */
.menu-contact {
  text-align: center;
  margin-top: 5vw;
}
.menu-contact .phone-number {
  font-size: 6vw;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 0.2rem;
  padding-bottom: 2vw;
}
.menu-contact .business-hours {
  font-size: 3.5vw;
  font-weight: 300;
  color: #ffffff;
}

/* 閉じるボタン */
.close-menu {
  position: absolute;
  top: 4vw;
  right: 4vw;
  width: 6vw;
  height: 6vw;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-menu::before,
.close-menu::after {
  content: "";
  position: absolute;
  width: 6vw;
  height: 1px;
  background-color: #ffffff;
  top: 50%;
  left: 50%;
  transform-origin: center;
}
.close-menu::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-menu::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/** ==============================
 *  固定ボタン（スクロール時に表示）SP用（横並び対応）
 * ============================== **/

#fixed-buttons {
  position: fixed;
  bottom: -20vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1px;
  width: 100vw;
  z-index: 10000;
  transition: bottom 0.4s ease-in-out, opacity 0.5s ease;
}

.show-fixed-buttons {
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

.fixed-btn {
  flex: 1 1 33.33%;
  height: 12vw;
  line-height: 12vw;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  background-color: #5a4233;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
  white-space: nowrap;
}

.fixed-btn-primary {
  background-color: #5a4233;
}

.fixed-btn:hover,
.fixed-btn-primary:hover {
  opacity: 0.9;
}



/** ==============================
 *  ファーストビュー（SP用）調整版
 * ============================== **/

#first-view {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #514540;
  clip-path: none;
  overflow: hidden;
  padding-top: 14vw;
}

.first-view-inner {
  position: relative;
  width: 100vw;
  min-height: calc(100svh - 30vw - env(safe-area-inset-bottom, 0px));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 左上の装飾画像 */
.first-view-left-img {
  width: 100vw;
  opacity: 0.3;
  position: absolute;
  top: 15vw;
  left: -15vw;
  z-index: 1;
}

/* タイトル画像（ロゴ） */
.first-view-title {
  position: relative;
  top: auto;
  left: auto;
  width: 80vw;
  margin: 0 auto 4vw auto;
  font-size: 5rem;
  font-weight: 400;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  z-index: 2;
}

/* サブタイトル */
.first-view-subtitle {
  position: relative;
  top: auto;
  left: auto;
  width: 80vw;
  margin: 0 auto 3vw auto;
  font-size: 4rem;
  line-height: 6rem;
  font-weight: 300;
  padding-bottom: 1rem;
  color: #fff;
  letter-spacing: 0.2rem;
  font-family: 'Noto Serif JP', serif;
  z-index: 2;
}

.first-view-subtitle span {
  font-size: 5.8rem;
}

/* ボタン群 */
.first-view-buttons {
  position: relative;
  top: auto;
  left: auto;
  width: 80vw;
  display: flex;
  flex-direction: column;
  gap: 2vw;
  z-index: 2;
}

.first-view-buttons .btn {
  width: 100%;
  height: 10vw;
  line-height: 10vw;
  font-size: 2.4rem;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  color: #ffffff;
  background-color: #BC9D5D;
  border: none;
  transition: 0.3s ease-in-out;
}

/* 右上のアクセス画像 */
.first-view-access-img {
  position: absolute;
  top: 0vw;
  right: 0vw;
  width: 50vw;
  z-index: 1;
  opacity: 0.7;
}



/** ==============================
 *  iPhone SEなど低めの画面用
 * ============================== **/

@media screen and (max-width:480px) and (max-height:700px) {
  .first-view-inner {
    justify-content: flex-start;
  }

  .first-view-title {
    width: 78vw;
    margin-top: 17vw;
    margin-bottom: 3vw;
  }

  .first-view-subtitle {
    font-size: 3.8rem;
    line-height: 5.1rem;
    margin-bottom: 2.5vw;
  }

  .first-view-subtitle span {
    font-size: 5.5rem;
  }

  .first-view-buttons {
    gap: 1.8vw;
  }

  .first-view-buttons .btn {
    height: 9.8vw;
    line-height: 9.8vw;
    font-size: 2.3rem;
  }

  .first-view-access-img {
    width: 45vw;
  }
}

/** ==============================
 *  コンセプト（SP用）
 * ============================== **/
#concept {
  position: relative;
  width: 100%;
  padding: 12vw 0;
  text-align: center;
}
.concept-section-title {
	font-size: 1.5rem;
	padding-bottom: 5vw;
	font-family: 'Noto Serif JP', serif;
	color: #BB9D5D;
}
.concept-title-jp {
  font-size: 3rem;
  padding-bottom: 3vw;
  color:#514540;
  display:inline-block;
}
.concept-title-img {
  width: 50vw;
  margin: 5vw auto 5vw;
}
.concept-text {
  font-size: 2.2rem;
  line-height: 4rem;
  font-weight: 400;
  width: 90%;
  margin: 5vw auto;
  text-align: justify;
   font-feature-settings: "palt" 1, "pkna" 1;
}
.concept-image {
  width: 90vw;
  height: 50vw;
  margin: 8vw auto 0;
  overflow: hidden;
}
.concept-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.concept-image-caption {
  width: 90vw;
  font-size: 1.6rem;
  text-align: right;

  margin: 1.5vw auto 0;
}

/** ==============================
 *  豊中市 小曽根の魅力（SP用：テキスト部分）
 * ============================== **/

#ozone-area {
  position: relative;
  width: 100%;
  padding: 15vw 0;
  background-color: #514540;
  text-align: center;
}

/* セクションタイトル */
.ozone-area-section-title {
  font-weight: 300;
  color: #d2b780;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 5vw;
}

.ozone-area-section-title .title-jp {
  display: block;
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 400;
  margin-bottom: 0vw;
}

.ozone-area-section-title .title-en {
  display: block;
  font-size: 1.5rem;
  line-height: 4rem;
  font-weight: 400;
  letter-spacing: 0.2rem;
}

/* 大タイトル */
.ozone-area-main-title {
  font-size: 3rem;
  line-height: 5rem;
  font-weight: 400;
  font-family: 'Noto Serif JP', serif;
  color: #d2b780;
  margin-bottom: 6vw;
  letter-spacing: 0.3rem;
}

/* 説明テキスト */
.ozone-area-text {
  font-size: 2.2rem;
  line-height: 4rem;
  font-weight: 400;
  letter-spacing: 0.2rem;
  color: #EDE6DC;
  width: 85%;
  margin: 0 auto 10vw auto;
  text-align: justify;
  font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-feature-settings: "palt" 1, "pkna" 1;
}

/** ==============================
 *  豊中市 小曽根の魅力（SP用：画像ギャラリー）
 * ============================== **/

.ozone-area-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列レイアウトに変更 */
  gap: 3vw;
  width: 90%;
  margin: 0 auto 0vw auto;
  height: auto;
}
.ozone-area-gallery img:nth-child(1),
.ozone-area-gallery img:nth-child(4),
.ozone-area-gallery img:nth-child(7),
.ozone-area-gallery img:nth-child(10){
  grid-column: span 2; /* 最初の2つを2カラム分使って2列に見せる */
}

.ozone-area-gallery img:nth-child(),
.ozone-area-gallery img:nth-child(),
.ozone-area-gallery img:nth-child() {
  grid-column: span 1; /* 3列に戻す */
}

.ozone-area-gallery img:nth-child(),
.ozone-area-gallery img:nth-child(),
.ozone-area-gallery img:nth-child(),
.ozone-area-gallery img:nth-child() {
  grid-column: span 2; /* 2列に見せる */
}
/* 画像設定 */
.ozone-area-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 画像キャプション */
.ozone-area-caption {
  font-size: 3.2vw;
  color: #c6b8a5;
  text-align: right;
  margin-top: 2vw;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/** ==============================
 *  魅力詳細セクション（SP用）
 * ============================== **/

#ozone-details {
  width: 100%;
  padding: 0;
  background-color: #a5b4c2;
}

/* グリッド → 縦積みに変更 */
.ozone-details-grid {
  display: block;
}

/* 左側画像（上部に表示） */
.ozone-details-image {
  width: 100%;
  height: auto;
}
.ozone-details-image picture img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* テキストエリア全体（画像含む） */
.ozone-details-content {
	display: block;
	background-color: #7D7468;
	color: #ffffff;
}

/* 上部の画像（横長 → 高さ固定） */
.ozone-details-content-image {
  width: 100%;
  height: 40vw;
  overflow: hidden;
}
.ozone-details-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキスト外枠 */
.ozone-details-inner {
  padding: 8vw 7vw;
}

/* テキスト内側 */
.ozone-details-textbox {
  padding: 0 0 10vw 0;
}

/* 見出し */
.ozone-details-title {
  font-size: 2.6rem;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 1vw;
}

/* 本文 */
.ozone-details-text {
  font-size: 2.2rem;
  font-weight: 300;
  font-family: 'Noto Serif JP', serif;
  line-height: 180%;
  letter-spacing: 0.1rem;
}

/** ==============================
 *  タウンデザイン全体（SP用）
 * ============================== **/
#town-design {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 0 0 12vw 0; /* 下部の余白を広めに調整 */
}

/* メイン画像 */
.town-design-image {
  overflow: hidden;
  width: 100%;
  height: 33vh; /* SPでは高さを拡張してダイナミックに */
  display: flex;
  align-items: center;
  justify-content: center;
}
.town-design-image img {
  width: 120%; /* 少し拡大して余白調整しやすく */
  height: 120%;
  object-fit: cover;
}

/** ==============================
 * パララックス用画像調整（SP用）
 * ============================== **/
.parallax-img {
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* キャプション */
.town-design-caption {
  font-size: 1.6rem;
  color: #8c8274;
  text-align: right;
  margin-top: 2vw;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* タイトルブロック */
.town-design-title {
  text-align: center;
  margin: 10vw 0 6vw 0;
}

/* ロゴ */
.town-design-title img {
  width: 50vw;
  max-width: 100%;
  padding-right: 0;
}

/* TOWN DESIGN */
.town-design-subtitle {
  font-size: 2rem;
  font-weight: 300;
  color: #A68859;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.15rem;
  margin-top: 2vw;
}

/* テキストボックス */
.town-design-textbox {
  width: 90%;
  margin: 6vw auto;
  text-align: center;
}

/* メインタイトル */
.town-design-main-title {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  color: #514540;
  margin-bottom: 4vw;
  letter-spacing: 0.15rem;
}

/* 本文 */
.town-design-text {
	font-size: 2.2rem;
	font-weight: 400;
	line-height: 180%;
	text-align: justify;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 0.1rem;

}

/* 区画イメージ */
.town-design-map img {
  width: 100%;
  height: auto;
}

/** ==============================
 *  ギャラリー ヘッダー（SP用）
 * ============================== **/
.gallery-header {
  text-align: center;
  margin-bottom: 8vw;
  padding: 4vw 0;
}

/* メインタイトル */
.gallery-title {
  display: block;
  font-size: 3rem;
  line-height: 4rem;
  font-weight: 400;
  font-family: 'Noto Serif JP', serif;
  color: #514540;
  letter-spacing: 0.15rem;
    padding: 0 0 3vw 0;
}

/* サブタイトル */
.gallery-subtitle {
  display: block;
  font-size: 1.5rem;
  line-height: 4rem;
  font-weight: 400;
  color: #A68859;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  margin-bottom: 2vw;
  line-height: 1.4;  margin-bottom: 5vw;
}

/* 説明文 */
.gallery-description {
  font-size: 2rem;
  font-weight: 300;
  text-align: center;
  margin: 0 6vw;
  line-height: 1.7;
  font-feature-settings: "palt"1, "pkna"1; 
}

/** ==============================
 *  ギャラリー共通設定（SP用）
 * ============================== **/
.gallery-wrapper {
  width: 100%;
  padding: 0 0 5vw 0;
  
}

/* 各ギャラリーブロック */
.gallery-block {
  width: 100%;

}

/* 共通の左右2分割 → 縦並びに変更 */
.gallery-inner,
.gallery-inner-reverse,
.gallery-inner-a,
.gallery-inner-three {
  display: flex;
  flex-direction: column;
  column-gap: 2vw; 
  width: 100%;
}

/* 画像リスト（3列→2列に変更） */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2vw; 
}
/** ==============================
 * gallery-inner-a_block 構成（SP用 再構築）
 * ============================== **/

.gallery-inner-a_block {
  display: grid;
  grid-template-rows: 1fr auto;
  column-gap: 2vw; 
  width: 100%;

}

/* 1枚目の画像（上部） */
.gallery-inner-a_block > img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 下部の grid-pair（横2列） */
.gallery-inner-a_block .grid-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2vw; 
 
}
.gallery-inner-a_block .grid-pair img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.gallery-inner-b_block {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 2vw; 
  width: 100%;

}
.gallery-inner-b_block img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 横に2分割 */
  column-gap: 2vw; 
  width: 100%; 
}
.column-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
/* 横に3分割 
.three-column-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 2vw;
  width: 100%;
}*/

.three-column-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.gallery-inner-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2vw; 
  width: 100%;
}
.gallery-inner-three img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.grid-item{
   
}
.three-column-grid {

}

/* 個別の画像 */
.image-grid img,
.grid-item img,
.center-grid img,
.column-grid img,
.three-column-grid img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  padding-bottom: 2vw;
}
/* 単独画像 */
.single-image {
  width: 100%;

}

/** ==============================
 *  周辺環境（LOCATION） セクション（SP用）
 * ============================== **/
.location-section {
  width: 100%;
  padding: 10vw 0;
  text-align: center;
}

/* タイトルエリア */
.location-header {
  margin-bottom: 6vw;
}

/* メインタイトル */
.location-title {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  line-height: 4rem;
  font-family: 'Noto Serif JP', serif;
  color: #514540;
  letter-spacing: 0.15rem;
}

/* サブタイトル（英字） */
.location-subtitle {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 4rem;
  color: #A68859;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  margin-bottom: 2vw;
}

/* リード文 */
.location-description {
  font-size: 3rem;
  font-weight: 300;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  margin: 4vw auto;
  line-height: 1.6;
  font-feature-settings: "palt"1, "pkna"1;
  width: 90%;
  letter-spacing: 0.2rem;
}

/* サブテキスト */
.location-text {
  font-size: 2.2rem;
  line-height: 4rem;
  font-weight: 400;

  text-align: justify;
  margin: 0 auto 6vw;
  font-feature-settings: "palt"1, "pkna"1;
  letter-spacing: 0.15rem;
  width: 90%;
}

/* 画像エリア */
.location-image {
  position: relative;
  width: 100%;
  height: 33vh;
  margin: 0 auto 5vw;
  overflow: hidden;
  
  display: flex;
  justify-content: right; /* 水平方向中央揃え */
  align-items: center;     /* 垂直方向中央揃え */
}

/* 公園の画像 */
.location-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* キャプション */
.image_caption {
  position: absolute;
  right: 2vw;
  bottom: 2vw;
  font-size: 1.6rem;
  color: #FFF;
  z-index: 10;
}

/* 公園の説明文 */
.location-text-block {
  width: 90%;
  margin: 4vw auto 0;
  text-align: justify;
  font-size: 2.2rem;
  line-height: 4rem;
  font-weight: 400;
  color: #514540;
  letter-spacing: 0.15rem;
  font-feature-settings: "palt"1, "pkna"1;
}

/** ==============================
 *  最寄りの駅 セクション（SP用）
 * ============================== **/
.station-section {
  width: 90vw;
  padding: 10vw 0;
  margin: auto;
}

/* タイトルエリア */
.station-header {
  text-align: left;
  margin-bottom: 5vw;
}

/* セクションタイトル */
.station-title {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  color: #514540;
  letter-spacing: 0.15rem;
  line-height: 1.4;
  margin-bottom: 1.5vw;
}

/* タイトル下の罫線 */
.station-line {
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #A68859 40%, #C4B8AE 40%);
}

/* 駅情報グリッド：1列表示 */
.station-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0vw;
  width: 100%;

}

/* 各駅の情報 */
.station-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

}

/* 駅画像 */
.station-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}


/* 駅情報 */
.station-info {
width: 100%;
  text-align: left;
    margin: 2vw auto 8vw auto;
	
}

/* 駅までの距離 */
.station-distance {
  font-size: 2.2rem;
  font-weight: 400;
  color: #514540;
  letter-spacing: 0.1rem;
  margin-bottom: 1vw;
}

/* 駅名 */
.station-name {
  font-size: 2.2rem;
  font-weight: 700;
  color: #514540;
  line-height: 1.5;
}

/* Googleマップ埋め込み用コンテナ */
.map-container {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  pointer-events: none;
}

/* iframeのスタイル */
.map-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: auto;
}

/** ==============================
 * アクセス（ACCESS） セクション（SP用）
 * ============================== **/
.access-section {
  width: 100%;
  padding: 12vw 0 14vw 0;
  text-align: center;
}

/* 内側のコンテンツを囲むコンテナ */
.access-container {
  width: 95%;
  margin: auto;
  background-color: #FFFFFF;
  padding: 10vw 0 0 0;
}

/* タイトルエリア */
.access-header {
  margin-bottom: 6vw;
}
.access-title {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.2rem;
  line-height: 4rem;
  color: #514540;
}
.access-subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  margin-bottom: 3vw;
  line-height: 4rem;
  color: #A68859;
}

/* アクセス見出し（中間リード） */
.access-lead {
  font-size: 3rem;
  font-weight: 300;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  margin: 4vw auto;
  line-height: 1.6;
  font-feature-settings: "palt"1, "pkna"1;
  width: 90%;
  letter-spacing: 0.2rem;
}


/* リード文 */
.access-description {
  font-size: 2.2rem;
  font-weight: 400;
  font-family: 'Noto Serif JP', serif;
  text-align: justify;
  margin: 4vw auto 6vw auto;
  line-height: 4rem;
  font-feature-settings: "palt"1, "pkna"1;
  width: 90%;

}

/* アクセス情報エリア：縦2分割 */
.access-box-container {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #DDD0C0;
  margin-bottom: 6vw;
}

/* 各アクセスボックス */
.access-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6vw;
  background-color: #FFFFFF;
  text-align: center;
  border-bottom: 1px solid #DDD0C0;
}
.access-box:last-child {
  border-bottom: none;
}

/* 明朝体を適用 */
.access-box * {
  font-family: 'Noto Serif JP', serif;
}

/* 駅名タイトル */
.access-station {
  font-size: 2rem;
  font-weight: 500;
  color: #514540;
  margin-bottom: 2vw;
}
.access-main-station {
  font-size: 3rem;
  font-weight: 300;
  color: #514540;
  margin-bottom: 2vw;
}

/* 時間リスト */
.access-time-group {
  font-size: 1.8rem;
  font-weight: 300;
  color: #514540;
  line-height: 1.6;
  text-align: left;
}
.access-time span {
  color: #A68859;
  font-size: 2.6rem;
  font-weight: 700;
}

/* 路線図エリア */
.access-image {
  width: 90%;
  margin: 0 auto;
}
.access-image img {
  width: 100%;
  height: auto;
  display: block;
}

/** ==============================
 * プラン（PLAN）セクション（SP用）
 * ============================== **/
.plan-section {
  background-color: #514540;
  clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0% 100%, 0 95%, 0 0);
  padding: 20vh 0 5vh 0;
  color: #ffffff;
  text-align: center;
}

/* 子1：タイトル */
.plan-header {
  margin-bottom: 6vw;
}
.plan-title {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 2vw;
  letter-spacing: 0.2rem;
  line-height: 1.3;
  color: #D1B06E;
}
.plan-subtitle {
  font-size: 1.8rem;
  font-weight: 300;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  margin-bottom: 3vw;
  line-height: 1.3;
  color: #e9dfd1;
}

/* 子2：設計士紹介エリア */
.architect-message {
  background-color: #ffffff;
  color: #514540;
  width: 90%;
  margin: 0 auto 6vw auto;
  display: flex;
  flex-direction: column;
  gap: 5vw;
  padding: 6vw;
  text-align: left;
}
.architect-image img {
  width: 100%;
  height: auto;
  display: block;
}
.architect-heading {
  font-size: 2.8rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  margin-bottom: 4vw;
  letter-spacing: 0.3rem;
  color: rgba(167,167,167,1.00);
}
.architect-description {
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 8vw;
  text-align: justify;
  font-feature-settings: "palt"1, "pkna"1;
}
.architect-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2vw;
}
.architect-logo {
  width: 12vw;
  height: auto;
}
.architect-info {
  font-size: 2rem;
  line-height: 1.6;
}
.architect-office {
  font-weight: 700;
}
.architect-name span {
  font-size: 2.4rem;
  font-weight: 300;
  font-family: 'Noto Serif JP', serif;
  margin: 0 1rem;
}

/* 子3：モデルプラン説明 */
.plan-description-block {
  margin-top: 8vw;
  color: #ffffff;
  padding: 0 6vw;
}
.plan-description-title {
  font-size: 3.2rem;
  line-height: 1.4;
  font-weight: 400;
  color: #D1B06E;
  margin-bottom: 5vw;
  font-family: 'Noto Serif JP', serif;
}
.plan-description-lead {
  font-size: 2.6rem;
  font-weight: 400;
  margin-bottom: 3vw;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.plan-description-text {
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 4rem;
  text-align: left;
  font-feature-settings: "palt"1, "pkna"1;
}

/** ==============================
 * モデルプラン（Model Plan）セクション（SP用）
 * ============================== **/
.model-plan-section {
  padding: 10vw 0;
  text-align: center;
}

/* 親1: タイトル */
.model-plan-header {
  margin-bottom: 6vw;
}

.model-plan-title {
  font-size: 3rem;
  font-weight: 700;
  color: #514540;
  letter-spacing: 0.2rem;
  margin-bottom: 2vw;
    font-family: 'Noto Serif JP', serif;
}

.model-plan-subtitle {
  font-size: 1.8rem;
  font-weight: 300;
  font-family: 'Noto Serif JP', serif;
  color: #A68859;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-bottom: 3vw;
}

/* 親2: 画像 */
.model-plan-image {
  width: 90%;
  margin: 0 auto 4vw auto;
}

.model-plan-image img {
  width: 100%;
  height: auto;
}

.image-caption {
  font-size: 1.4rem;
  font-weight: 300;
  color: #514540;
  margin-top: 1.5vw;
  text-align: right;
}

/* 親3: Gridレイアウト */
.model-plan-grid {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 5vw;
  margin: 0 auto;
}

.model-plan-item {
  text-align: left;
}

.model-plan-item img {
  width: 100%;
  height: auto;
}

.model-plan-item .image-caption {
  font-size: 1.5rem;
  color: #514540;
  margin-top: 1.5vw;
  text-align: right;
}

/** ==============================
 * スキップフロア吹抜けプラン（Skip Plan）セクション SP用
 * ============================== **/
.skip-plan-section {
  padding: 12vw 0 6vw 0;
  text-align: center;
}

.bg_clr {
  background-color: #fefdfc;
}

/* 親をflex化して縦並びに戻す */
.skip-plan-header {
  display: flex;
  flex-direction: column;
  width: 90%;
  margin: 0 auto 6vw auto;
  text-align: center;
}

/* 画像 */
.skip-plan-image img {
  width: 30vw;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* テキスト全体はそのまま */
.skip-plan-text {
  display: flex;
  flex-direction: column;
  gap: 3vw;
  padding: 6vw 4vw 0 4vw;
}

/* タイトル */
.skip-plan-title {
  font-size: 3rem;
  font-weight: 700;
  color: #514540;
  line-height: 4rem;
}



.skip-plan-description {
  font-size: 2.2rem;
  line-height: 4rem;
  font-feature-settings: "palt" 1, "pkna" 1;
  text-align: justify;
}

/* ダークブラウン帯 */
.skip-plan-feature {
  background-color: #514540;
  width: 90%;
  margin: 6vw auto 0 auto;
  padding: 4vw 0;
}

.skip-plan-feature p {
  font-size: 2.6rem;
  font-weight: 400;
  color: #d2b780;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.3;
}

/* 親4: 画像（img_74） */
.skip-plan-image-container {
  height: auto;
  margin-top: 6vw;
  text-align: center;
}

.skip-plan-image-container img {
  width: 90%;
  height: auto;
}

/* 親5: 注釈 */
.skip-plan-note {
  padding-top: 6vw;
  text-align: right;
  font-size: 1.4rem;
  font-weight: 300;
  width: 90%;
  margin: auto;
}

/** ==============================
 * 性能と品質（SPEC）セクション SP用
 * ============================== **/
.spec-section {
  padding: 12vw 0;
  text-align: center;
}

/* タイトル */
.spec-header {
  margin-bottom: 4vw;
}
.spec-title {
  font-size: 3rem;
  line-height: 1.4;
  font-weight: 700;
    color: #514540;
  margin-bottom: 2vw;
  letter-spacing: 0.2rem;
  font-family: 'Noto Serif JP', serif;
}
.spec-subtitle {
  font-size: 2rem;
  font-weight: 400;
  color: #a68859;
  text-transform: uppercase;
  font-family: 'Noto Serif JP', serif;
}

/* 子サブタイトルとコピー */
.spec-text {
  padding: 6vw 4vw;
}

.spec-subtitle-text {
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 4vw;
  font-family: 'Noto Serif JP', serif;
  line-height: 1.6;
  letter-spacing: 0.1rem;
}

.spec-description {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 4rem;
  width: 90%;
  text-align: justify;
  margin: auto;
  font-feature-settings: "palt" 1, "pkna" 1;
}

/* 画像コンテナ（パララックス等） */
.spec-image-container {
  overflow: hidden;
  width: 100%;
  height: 33vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6vw;
}

.spec-image-container img {
  width: 100%;
  height: 120%;
  object-fit: cover;
}
.spec-image-container2{
overflow: hidden;
width: 100%;
height: 25vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spec-image-container2 img{
width: 100%;
height: auto;
}
/* 注釈 */
.spec-note {
  text-align: right;
  font-size: 1.5rem;
  margin-top: 1vw;
  padding-right: 4vw;
  font-weight: 300;
}

/** ==============================
 * 標準仕様（Standard Specs）セクション SP用
 * ============================== **/
.standard-specs-section {
  padding: 10vw 0;
  text-align: center;
}

/* タイトル */
.standard-specs-header {
  margin-bottom: 6vw;
}

.standard-specs-title {
  font-size: 3rem;
  font-weight: 700;
  font-family: 'Noto Serif JP', serif;
  color: #514540;
  margin-bottom: 2vw;
  letter-spacing: 0.15rem;
}

.standard-specs-subtitle {
  font-size: 1.8rem;
  font-weight: 300;
  font-family: 'Noto Serif JP', serif;
  color: #A68859;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

/* キャッチコピー */
.standard-specs-lead {
  font-size: 2.6rem;
  font-weight: 300;
  color: #514540;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 6vw;
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

/* 画像 */
.standard-specs-image {
  width: 90vw;
  margin: 0 auto;
}

.standard-specs-image img {
  width: 100%;
  height: auto;
  display: block;
}

/** ==============================
 * エネファーム type S セクション SP用
 * ============================== **/
.enefarm-section {
  padding: 10vw 0;
  text-align: left;
  color: #514540;
}

/* テキストエリア */
.enefarm-text-container {
  width: 90vw;
  margin: 0 auto 6vw auto;
}

.enefarm-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #b69247;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 5vw;
  letter-spacing: 0.15rem;
}

.enefarm-subtitle {
  font-size: 2.6rem;
  font-weight: 400;
  color: #514540;
  margin-bottom: 4vw;
  line-height: 4rem;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
}

.sp_margin6vw{
padding-bottom: 6vw;
}
.enefarm-description {
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 4rem;
  font-feature-settings: "palt" 1, "pkna" 1;
}

/* 画像 */
.enefarm-image-container {
  width: 95vw;
  margin: 0 auto;
}

.enefarm-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* 区切り線 */
.enefarm-divider {
  width: 90%;
  height: 1px;
  background-color: #ccc;
  margin: 8vw auto;
}

/* セキュリティ部分：SPは縦並び */
.security-container {
  display: block;
  width: 90vw;
  margin: 0 auto;
}

.security-text {
  margin-top: 5vw;
}

/** ==============================
 * 建物性能セクション（SP用）
 * ============================== **/
.building-performance-section {
  padding: 10vw 0;
}

.building-container {
  width: 95vw;
  background-color: #ffffff;
  margin: 0 auto;
  padding: 6vw 0;
}

/* タイトル */
.building-title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  color: #a68859;
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 6vw;
  letter-spacing: 0.2rem;
}

/* 各ブロック */
.building-block {
  width: 90%;
  margin: 0 auto 8vw auto;
}

/* グリッド構成（縦並び） */
.building-grid {
  display: flex;
  flex-direction: column;
  gap: 3vw;
  align-items: center;
}

.building-image img {
  width: 40vw; /* やや小さめのアイコン的サイズ感 */

  height: auto;
  display: block;
}

/* テキストエリア */
.building-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}

.building-subtitle {
  font-size: 3rem;
  font-weight: 700;
  color: #514540;
  margin-bottom: 2vw;
}

.building-text p {
  font-size: 2.2rem;
  line-height: 4rem;
  font-weight: 400;
  font-feature-settings: "palt" 1, "pkna" 1;
  color: #514540;
  text-align: justify;
}

/* 全幅画像 */
.building-fullimage {
  margin-top: 6vw;
}

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

/* 区切り線 */
.building-divider {
  width: 90%;
  height: 1px;
  background-color: #aaa;
  border: none;
  margin: 8vw auto;
}

/** ==============================
 * ZEH住宅セクション（SP用）
 * ============================== **/
.zeh-section {
  padding: 10vw 0;
}

.zeh-container {
  background-color: #ffffff;
  width: 90vw;
  margin: 0 auto;
  padding: 6vw 0;
  text-align: center;
}

.zeh-label {
  display: inline-block;
  background-color: #a68859;
  color: #ffffff;
  font-size: 2.6rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
  margin-bottom: 4vw;
  letter-spacing: 0.1rem;
  font-family: 'Noto Serif JP', serif;
}

.zeh-title {
  font-size: 2.8rem;
  color: #514540;
  font-weight: 700;
  margin-bottom: 6vw;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.15rem;
}

/* テキストブロック */
.zeh-text-block {
  width: 90%;
  margin: 0 auto 6vw auto;
  text-align: left;
}

.zeh-subtitle {
  font-size: 3rem;
  font-weight: 700;
  color: #514540;
  text-align: center;
  margin-bottom: 3vw;
}

.zeh-description {
  font-size: 2.2rem;
  line-height: 4rem;
  color: #514540;
  font-weight: 400;
  font-feature-settings: "palt" 1, "pkna" 1;
}

/* 画像 */
.zeh-image {
  width: 90%;
  margin: 4vw auto;
}

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

/* 区切り線 */
.zeh-divider {
  width: 90%;
  height: 1px;
  background-color: #aaa;
  border: none;
  margin: 8vw auto;
}

/** ==============================
 * アコーディオン（SP用）
 * ============================== **/
.accordion-list {
  width: 95vw;
  margin: 8vw auto;
  font-family: 'Noto Serif JP', serif;
}

.accordion-item {
  margin-bottom: 4vw;
}

.accordion-toggle {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4vw 3vw;
  background-color: #fff;
  border: 1px solid #aaa;
  font-size: 2.4rem;
  font-weight: 400;
  color: #231815;
  letter-spacing: 0.15rem;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-feature-settings: "palt" 1, "pkna" 1;
  transition: background-color 0.3s ease;
}
.accordion-toggle:hover {
  background-color: #F0E7D9;
}

.accordion-label {
  padding-left: 3vw;
  font-family: 'Noto Serif JP', serif;
}

.accordion-corner {
  position: absolute;
  width: 4vw;
  height: 4vw;
  background-color: #d3b98c;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  top: 0;
  left: 0;
  transition: all 0.3s ease;
}
.accordion-toggle.open .accordion-corner {
  clip-path: polygon(0 100%, 100% 100%, 0 0);
  top: auto;
  bottom: 0;
  left: 0;
}

/* アニメーション付き展開設定 */
.accordion-content {
  background-color: #ffffff;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  padding: 0;
}
.accordion-content.open {
  max-height: 5000px;
  opacity: 1;
}

.accordion-inner {
  padding: 8vw 0;
  width: 90vw;
  margin: 0 auto;
  text-align: center;
}

/* タイトル */
.accordion-title-block {
  margin-bottom: 6vw;
}

.accordion-title-line1,
.accordion-title-line2 {
  font-size: 2.6rem;
  line-height: 4rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  color: #a68859;
  letter-spacing: 0.1rem;
}

/* 仕切り線 */
.accordion-divider {
  width: 90%;
  height: 1px;
  background-color: #888;
  border: none;
  margin: 6vw auto;
}

/* 画像 */
.accordion-image {
  width: 90vw;
  margin: auto;
}
.accordion-image picture img {
  width: 100%;
  height: auto;
  display: block;
}

/** ==============================
 * 物件概要セクション（SP用）
 * ============================== **/
.outline-section {
  padding: 0 0 12vw 0;
  background-color: #fff;
  text-align: center;
}

/* 一覧全体 */
.outline-container {
  width: 90vw;
  margin: 0 auto;
  text-align: left;
  padding: 5vw 0 0 0;
  font-family: 'Noto Serif JP', serif;
}

/* タイトル */
.outline-header {
  padding: 10vw 0 0 0;
  margin-bottom: 5vw;
}

/* 見出し用DL構造 */
.outline-list {
  display: flex;
  flex-direction: column;
}

/* 各項目 */
.outline-item {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #aaa;
  padding: 3vw 0;
}

/* ラベル */
.outline-item dt {
	width: 100%;
	font-size: 2rem;
	font-weight: 700;
	color: #514540;
	margin-bottom: 2vw;
	line-height: 1.6;
	padding: 1vw 2vw;
	font-family: 'Noto Sans JP', sans-serif; /* ← ゴシック体を適用 */
	background-image: -webkit-linear-gradient(0deg,rgba(243,238,231,1.00) 0.58%,rgba(255,255,255,1.00) 100%);
	background-image: -moz-linear-gradient(0deg,rgba(243,238,231,1.00) 0.58%,rgba(255,255,255,1.00) 100%);
	background-image: -o-linear-gradient(0deg,rgba(243,238,231,1.00) 0.58%,rgba(255,255,255,1.00) 100%);
	background-image: linear-gradient(90deg,rgba(243,238,231,1.00) 0.58%,rgba(255,255,255,1.00) 100%);
}

/* 内容 */
.outline-item dd {
  width: 100%;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 4rem;
  letter-spacing: 0.1rem;
  padding-left: 2vw;
}


/** ==============================
 * フッター（SP用）
 * ============================== **/
.footer {
  background-color: #4e423c;
  color: #fff;
  padding: 10vw 0 0 0;
  position: relative;
  text-align: center;
}

.footer-logo {
  margin-bottom: 6vw;
}
.footer-logo img {
  width: 45vw;
  height: auto;
}


/** ==============================
 * フッター用 3ボタンデザイン（SP用）
 * ============================== **/
.footer-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
  margin-bottom: 6vw;
}

.footer-buttons .btn {
  width: 70vw;
  height: 11vw;
  line-height: 12vw;
  font-size: 2.4rem;
    text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  color: #ffffff;
  background-color: #BC9D5D;
  border: none;
  transition: 0.3s ease-in-out;
}

/* ホバーはPCのみ反映。SPでは無効でもOK */
.footer-buttons .btn:hover {
  opacity: 0.9;
}

.footer-buttons .btn.btn-primary {
  background-color: #d6b875;
}

/* フッター会社情報・電話 */
.footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
  margin: 0 auto 6vw auto;
}

.footer-company {
  width: 60vw;
  height: auto;
  padding-bottom:3vw
}

.footer-phone {
  width: 85vw;
  height: auto;
}

.footer-company {
  padding: 0;
  margin: 0;
  border: none;
}

.footer-company img,
.footer-phone img {
  width: 100%;
  height: auto;
}

/* コピーライト */
.footer-copyright a {
	font-size: 1.5rem;
	font-weight: 300;
	text-align: center;
	padding: 4vw 3vw;
	display: block;
	color: rgba(217,193,181,1.00);
}

/* ページトップ */
.page-top {
  position: absolute;
  bottom: 4vw;
  right: 4vw;
  width: 12vw;
  height: 12vw;
  font-size: 1.5rem;
  line-height:120%;
  color: #fff;
  border-radius: 50%;
  z-index: 9999;
  background-color: #a68859;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
    .PC {
        display: none;
        max-width: 0%;
        max-height: 0%;
    }
    .SP {}
}