@charset "UTF-8";

/* =========================================================
   教材照合メモ／教材に掲載されていないCSSの一覧
   照合元：『よくわかる はじめてのHTML＆CSSコーディング
   HTML Living Standard準拠』（全288ページ）

   前半では各セレクターの直前に「どの部分か」、各宣言の右側に
   「プロパティと値が何をするか」をコメントで説明します。
   後半の「最終ブラッシュアップ」は前半の基本指定を上書きするため、
   同じセレクターが再登場します。後半は関連宣言の直前に目的をまとめ、
   個々の基本プロパティは前半の同名プロパティコメントと対応させます。

   【教材に掲載され、このサイトで使っている主なCSS】
   ・色・文字：color、background、background-color、font-family、
     font-size、font-weight、line-height、text-align、text-decoration、text-shadow
   ・余白・寸法：width、height、max-width、margin系、padding系
   ・枠・影：border、border-top、border-bottom、border-left、
     border-radius、border-collapse、box-shadow
   ・配置：display、position、top、right、bottom、left
   ・その他：@charset、@media、:hover、linear-gradient()、rgba()

   【教材外：共通値・関数／使用位置】
   ・:root、--color-*などのカスタムプロパティ、var()：
     01で色・影・共通幅を一括管理します。
   ・min()、calc()、clamp()：01、ヒーロー、レスポンシブで幅・高さ・文字を可変にします。
   ・radial-gradient()、blur()、cubic-bezier()：
     24で背景装飾、背景ぼかし、動きの速度調整に使います。
   ・repeat()、1fr、svh、vw、currentColor、!important：
     Gridの列、端末高、可変文字、現在色、動きを減らす優先指定に使います。

   【教材外：レイアウト／使用位置】
   ・display: inline-block：必須ラベルとフッターリンクを、幅を持てる行内要素にします。
   ・Flexbox（使用許可済み）：display: flex / inline-flex、flex、
     flex-direction、flex-wrap、flex-basis、flex-shrink、align-items、
     align-content、align-self、justify-content、gap。
     ヘッダー、ボタン列、カード本文、詳細、メニューで使います。
   ・Grid：display: grid、grid-template-columns、grid-column。
     物件一覧、サービス、写真、フッター、学習手順で使います。
   ・box-sizing（reset.css）、min-width、min-height、max-height、aspect-ratio：
     箱の寸法計算、最小・最大寸法、写真比率を安定させます。
   ・object-fit、object-position：ヒーローと物件写真の切り抜きをそろえます。

   【教材外：表示・文字・操作／使用位置】
   ・overflow / overflow-x、opacity、visibility、clip、
     filter、pointer-events、resize：はみ出し、表示状態、切り抜き、操作可否を調整します。
   ・border-color、border-top-color、border-bottom-color、border-spacing：
     24と26で枠色や表セル間隔を上書きします。
   ・font（短縮形）、font-feature-settings、letter-spacing、vertical-align、
     white-space、text-rendering、text-decoration-color、text-underline-offset：
     フォーム、字間、読みやすさ、リンク下線を調整します。
   ・outline、outline-offset、cursor：キーボードの現在位置と操作可能状態を示します。
   ・z-index、inset、position: sticky / fixed：ヘッダー、TOPリンク、
     写真上の文字、追従サイドカードの重なりと位置を制御します。
   ・transform、transition、transition-duration、animation-duration、
     animation-iteration-count、translateY()、rotate()、scale()：
     hover反応、3本線の×印化、動きの抑制に使います。
   ・rect()：メニューボタンの読み上げ用文字を視覚的に隠します。
   ・scroll-behavior、scroll-margin-top、scroll-padding-top：
     ページ内移動と固定ヘッダー分の停止位置を調整します。
   ・backdrop-filter、-webkit-backdrop-filter、-webkit-font-smoothing、
     -webkit-tap-highlight-color：
     対応ブラウザー向けのぼかし、文字描画、タッチ表示の補助です。

   【教材外：セレクター・状態／使用位置】
   ・::before、::after、::selection、::placeholderとcontentプロパティ：
     装飾線、矢印、選択色、入力例を作ります。
   ・:focus、:focus-visible、:checked、:disabled、:root：
     キーボード操作、メニュー開閉、デモ送信不可、変数定義に使います。
   ・:not()、:nth-child()、:first-child、:last-child、>、+、~：
     対象を子・順番・隣接・後続関係で限定します。
   ・@media (prefers-reduced-motion: reduce)：
     動きを減らす端末設定ではtransitionなどを実質停止します。

   JavaScriptは使用していません。タブレット・スマートフォンのメニューは
   checkboxのchecked状態と兄弟セレクター（~）だけで開閉します。
========================================================= */

/* =========================================================
   01. サイト全体の基本設定
   ・ページ全体の色、文字、行間、共通幅を決めます。
   ・最初に基本をまとめることで、各ページの見た目を統一します。
========================================================= */
:root {
  --color-text: #1d2721; /* 本文の基本文字色です。濃い緑がかった黒で読みやすくします。 */
  --color-sub: #646d66; /* 説明文や住所など、補助テキスト用の色です。 */
  --color-bg: #f7f6f1; /* ページ全体の背景色です。白より少し温かい色にします。 */
  --color-white: #ffffff; /* カードやフォームの背景に使う白です。 */
  --color-brand: #143524; /* 青葉不動産のメインカラーとして使う深い緑です。 */
  --color-brand-light: #2f5a44; /* グラデーションやhoverに使う明るめの緑です。 */
  --color-accent: #b99445; /* 見出しラベルや装飾線に使う金色です。 */
  --color-border: #ded8ca; /* カードや表の境界線に使う薄いベージュです。 */
  --shadow-card: 0 16px 34px rgba(30, 45, 38, 0.10); /* カードを少し浮かせる影です。 */
  --shadow-hover: 0 24px 46px rgba(30, 45, 38, 0.16); /* hover時に使う強めの影です。 */
  --container-width: 1240px; /* 本文エリアの最大幅です。 */
}

/* body：全ページ共通の土台です。 */
body {
  color: var(--color-text); /* サイト全体の文字色を指定します。 */
  background-color: var(--color-bg); /* ページ全体の背景色を指定します。 */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; /* 本文用フォントを指定します。 */
  line-height: 1.85; /* 日本語の文章を読みやすくするため、行間を広めにします。 */
  letter-spacing: 0.03em; /* 文字が詰まって見えないように、少しだけ字間を広げます。 */
}

/* main：本文全体です。 */
main {
  overflow: hidden; /* 大きな画像や影が原因で横スクロールが出るのを防ぎます。 */
}

/* .containerなど：横幅をそろえる共通クラスです。 */
.container,
.section-block,
.path-panel,
.breadcrumb,
.category-links {
  width: min(100% - 48px, var(--container-width)); /* 画面幅から左右24pxずつ引き、最大幅を1240pxに制限します。 */
  margin-left: auto; /* ブロックを中央寄せにします。 */
  margin-right: auto; /* ブロックを中央寄せにします。 */
}

/* .eyebrow：英字の小見出しです。 */
.eyebrow {
  margin-bottom: 10px; /* 下の見出しとの距離を作ります。 */
  color: var(--color-accent); /* 金色でアクセントを付けます。 */
  font-family: "Cinzel", serif; /* 英字がきれいに見えるフォントを使います。 */
  font-size: 13px; /* 主見出しより控えめなサイズにします。 */
  letter-spacing: 0.22em; /* 英字らしく文字間を広げます。 */
}

/* h1〜h3：見出し共通のフォント設定です。 */
h1,
h2,
h3 {
  font-family: "Noto Serif JP", serif; /* 見出しは明朝体にして落ち着いた印象にします。 */
  font-weight: 600; /* 太すぎず、見出しとして認識しやすい太さにします。 */
  line-height: 1.45; /* 見出しが複数行になったときの詰まりを防ぎます。 */
}

/* h2：セクション見出しのサイズです。 */
h2 {
  font-size: clamp(28px, 3vw, 38px); /* 画面幅に合わせて自然に拡大縮小します。 */
}

/* .section-block：通常セクションの上下余白です。 */
.section-block {
  padding-top: 84px; /* セクション上側に大きめの余白を作ります。 */
  padding-bottom: 84px; /* セクション下側にも同じ余白を作ります。 */
}

/* .section-lead：見出し下の説明文です。 */
.section-lead {
  margin-top: 12px; /* 見出しとの距離を作ります。 */
  color: var(--color-sub); /* 補助文として少し薄い色にします。 */
}

/* =========================================================
   02. ボタンとリンク
   ・主要ボタン、サブボタン、テキストリンクを統一します。
========================================================= */
.button-primary,
.button-secondary,
.header-button,
.form-submit {
  display: inline-flex; /* 文字を上下左右中央にしやすくします。 */
  align-items: center; /* ボタン内の文字を縦方向中央にそろえます。 */
  justify-content: center; /* ボタン内の文字を横方向中央にそろえます。 */
  min-height: 50px; /* クリックしやすい高さを確保します。 */
  padding: 12px 26px; /* 文字の左右に十分な余白を作ります。 */
  border-radius: 999px; /* 角を大きく丸め、ボタンらしく見せます。 */
  font-weight: 700; /* ボタン文字を太くし、クリック要素だと分かりやすくします。 */
  cursor: pointer; /* マウスを乗せたときにクリック可能だと伝えます。 */
  transition-duration: 0.25s; /* hover時の動きをなめらかにします。 */
}

.button-primary,
.header-button,
.form-submit {
  color: var(--color-white); /* 濃い背景に白文字を載せます。 */
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light)); /* 深い緑のグラデーションにします。 */
  border: 0; /* 標準の枠線を消します。 */
  box-shadow: 0 12px 24px rgba(20, 53, 36, 0.18); /* ボタンに軽い浮遊感を出します。 */
}

.button-secondary {
  color: var(--color-brand); /* 白背景に合わせて深い緑の文字にします。 */
  background-color: var(--color-white); /* サブボタンは白背景にします。 */
  border: 1px solid #c8ad63; /* 金色系の枠線を付けます。 */
}

.button-primary:hover,
.button-secondary:hover,
.header-button:hover,
.form-submit:hover,
.property-card:hover,
.path-card:hover {
  transform: translateY(-3px); /* hover時に少し上へ動かし、反応があることを伝えます。 */
}

.text-link,
.more,
.path-card a {
  color: var(--color-brand); /* リンクをブランドカラーにします。 */
  font-weight: 700; /* リンクを本文より目立たせます。 */
}

.text-link::after,
.more::after,
.path-card a::after,
.button-primary::after,
.button-secondary::after,
.header-button::after {
  content: "→"; /* リンクやボタンの右側に矢印を表示します。 */
  margin-left: 10px; /* 文字と矢印の間に余白を作ります。 */
}

/* =========================================================
   03. ヘッダー
   ・ロゴ、ナビゲーション、電話番号、ボタンを横並びにします。
========================================================= */
.site-header {
  position: sticky; /* スクロールしても画面上部に残します。 */
  top: 0; /* stickyの固定位置を画面上端にします。 */
  z-index: 100; /* ヒーロー画像やカードより前面に表示します。 */
  background-color: rgba(255, 255, 255, 0.96); /* 画像の上でも読みやすい白背景にします。 */
  border-bottom: 1px solid #e7e1d6; /* ヘッダー下に細い境界線を入れます。 */
}

.header-inner {
  width: min(100% - 48px, 1400px); /* ヘッダー専用の最大幅を設定します。 */
  margin: 0 auto; /* ヘッダー内容を中央に配置します。 */
  padding: 14px 0; /* ヘッダーの上下余白です。 */
  display: flex; /* ロゴ、ナビ、連絡先、ボタンを横並びにします。 */
  align-items: center; /* すべての部品を縦方向中央にそろえます。 */
  justify-content: space-between; /* 左右に部品を広げます。 */
  gap: 24px; /* 部品同士の間隔を作ります。 */
}

.site-logo {
  flex-shrink: 0; /* ロゴが縮みすぎないようにします。 */
}

.site-logo img {
  width: 230px; /* ロゴの横幅を指定します。 */
}

.global-nav {
  flex: 1; /* ナビゲーションが残り幅を使えるようにします。 */
}

.global-nav ul {
  display: flex; /* メニュー項目を横並びにします。 */
  justify-content: center; /* ナビを中央寄せにします。 */
  align-items: center; /* メニュー項目を縦方向中央にそろえます。 */
  flex-wrap: nowrap; /* PC用ナビを1行に保ち、狭くなる前にハンバーガーへ切り替えます。 */
  gap: 10px 24px; /* 行間と列間をまとめて指定します。 */
}

.global-nav a {
  position: relative; /* 下線の疑似要素を配置する基準にします。 */
  display: block; /* クリック範囲を文字の周囲まで広げます。 */
  padding: 6px 0; /* 文字の上下にクリックしやすい余白を作ります。 */
  font-weight: 500; /* 通常の本文より少し太くします。 */
}

.global-nav a::after {
  content: ""; /* 下線用の空要素を作ります。 */
  position: absolute; /* リンク文字の下に自由配置します。 */
  left: 0; /* 下線を左端から始めます。 */
  bottom: 0; /* 下線を文字の下に置きます。 */
  width: 0; /* 通常時は下線を表示しません。 */
  height: 1px; /* 下線の太さを指定します。 */
  background-color: var(--color-accent); /* 下線を金色にします。 */
  transition-duration: 0.25s; /* 下線が伸びる動きをなめらかにします。 */
}

.global-nav a:hover::after,
.global-nav a.is-current::after {
  width: 100%; /* hover時と現在ページでは下線を全幅にします。 */
}

.header-contact {
  min-width: 170px; /* 電話番号が不自然に改行されないようにします。 */
  text-align: right; /* 電話番号と営業時間を右揃えにします。 */
}

.header-tel {
  font-size: 21px; /* 電話番号を目立たせます。 */
  font-weight: 700; /* 太字で視認性を上げます。 */
  line-height: 1.2; /* 上下の詰まりを抑えます。 */
}

.header-time {
  color: var(--color-sub); /* 営業時間は補助情報として少し薄くします。 */
  font-size: 12px; /* 電話番号より小さくします。 */
}

/* =========================================================
   04. トップページのヒーロー
   ・トップページの大きな写真とキャッチコピーです。
   ・文字の箱を独立させ、レイアウト崩れを防ぎます。
========================================================= */
.home-hero {
  position: relative; /* 背景画像、黒い薄幕、文字を重ねる基準にします。 */
  min-height: 720px; /* PCで十分な高さを確保します。 */
  display: flex; /* 文字の箱を縦方向中央に置くために使います。 */
  align-items: center; /* 文字の箱を縦方向中央に配置します。 */
  overflow: hidden; /* 画像や影がはみ出した場合に隠します。 */
}

.home-hero__image {
  position: absolute; /* セクション全体に画像を重ねます。 */
  inset: 0; /* 上下左右すべて0にして全面配置します。 */
  width: 100%; /* 横幅を全面にします。 */
  height: 100%; /* 高さもセクションに合わせます。 */
  object-fit: cover; /* 画像の比率を保ちながら全面表示します。 */
  object-position: center; /* 画像の中央を基準に表示します。 */
}

.home-hero::before,
.page-hero::before,
.detail-hero::before {
  content: ""; /* 文字を読みやすくするための半透明レイヤーです。 */
  position: absolute; /* 画像の上に重ねます。 */
  inset: 0; /* セクション全体に広げます。 */
  background: linear-gradient(90deg, rgba(15, 26, 20, 0.70), rgba(15, 26, 20, 0.18)); /* 左側を濃くして文字を読みやすくします。 */
  z-index: 1; /* 画像より前、文字より後ろに置きます。 */
}

.home-hero__content {
  position: relative; /* z-indexを効かせるために指定します。 */
  z-index: 2; /* 黒い薄幕より前面に表示します。 */
  color: var(--color-white); /* ヒーロー内の文字を白にします。 */
}

.home-hero__content h1 {
  max-width: 780px; /* 長すぎる行にならないよう幅を制限します。 */
  font-size: clamp(38px, 5vw, 64px); /* 画面幅に合わせて大きさを調整します。 */
}

.home-hero__content p:not(.eyebrow) {
  max-width: 660px; /* 説明文が横に伸びすぎないようにします。 */
  margin-top: 20px; /* 見出しとの距離を作ります。 */
  font-size: 17px; /* 通常本文より少し大きくします。 */
}

.button-row {
  display: flex; /* ボタンを横並びにします。 */
  flex-wrap: wrap; /* スマホで折り返せるようにします。 */
  gap: 14px; /* ボタン同士の間隔です。 */
  margin-top: 30px; /* 説明文とボタンの間隔です。 */
}

/* =========================================================
   05. 下層ページと詳細ページのヒーロー
========================================================= */
.page-hero,
.detail-hero {
  position: relative; /* 写真と文字を重ねる基準にします。 */
  min-height: 430px; /* 下層ページのアイキャッチとして十分な高さを確保します。 */
  display: flex; /* 文字を縦方向中央に配置するために使います。 */
  align-items: center; /* 文字を縦方向中央にします。 */
  overflow: hidden; /* 写真のはみ出しを隠します。 */
}

.page-hero__image,
.detail-hero__image {
  position: absolute; /* 背景写真として全面に配置します。 */
  inset: 0; /* 上下左右に広げます。 */
  width: 100%; /* 横幅を全面にします。 */
  height: 100%; /* 高さを全面にします。 */
  object-fit: cover; /* 写真の比率を保ちながら表示します。 */
  object-position: center; /* 写真の中心を優先します。 */
}

.page-hero__content,
.detail-hero__content {
  position: relative; /* z-indexを使うために指定します。 */
  z-index: 2; /* 黒い薄幕より前面に出します。 */
  color: var(--color-white); /* 写真上で読める白文字にします。 */
}

.page-hero__content h1,
.detail-hero__content h1 {
  font-size: clamp(34px, 4vw, 52px); /* 下層ページの大見出しサイズです。 */
}

.page-hero__content p:not(.eyebrow),
.detail-hero__content p:not(.eyebrow) {
  max-width: 720px; /* 説明文の行が長すぎないようにします。 */
  margin-top: 14px; /* 見出しとの距離を作ります。 */
}

/* =========================================================
   06. トップページの導線カード
========================================================= */
.path-panel {
  margin-top: 34px; /* ヒーローに重ねず、安定した余白で配置します。 */
  display: flex; /* 3つの導線カードを横並びの基本形で配置します。 */
  flex-wrap: wrap; /* タブレット幅では自動的に折り返し、窮屈な3列崩れを防ぎます。 */
  gap: 24px; /* カード同士の間隔を作ります。 */
}

.path-card {
  flex: 1 1 320px; /* 各カードに最低幅の目安を持たせ、狭い画面では自然に折り返します。 */
  min-width: 0; /* flex子要素の中身が原因で横幅があふれるのを防ぎます。 */
  background-color: var(--color-white); /* カード背景を白にします。 */
  border: 1px solid var(--color-border); /* カードの輪郭を作ります。 */
  box-shadow: var(--shadow-card); /* カードを少し浮かせます。 */
  transition-duration: 0.25s; /* hover時の動きをなめらかにします。 */
  overflow: hidden; /* 画像の角やはみ出しをカード内に収めます。 */
}

.path-card img {
  width: 100%; /* カード幅いっぱいに写真を表示します。 */
  aspect-ratio: 4 / 3; /* 3枚の写真比率を統一します。 */
  object-fit: cover; /* 写真を切り抜いて比率をそろえます。 */
}

.path-card__body {
  padding: 24px; /* 文章エリアの内側余白です。 */
}

.path-card h2 {
  margin-bottom: 10px; /* 見出しと本文の間隔です。 */
  font-size: 23px; /* 導線カードの見出しサイズです。 */
}

.path-card__body p {
  color: var(--color-sub); /* 説明文を少し落ち着かせ、見出しとリンクのメリハリを作ります。 */
}

.path-card a {
  display: inline-block; /* margin-topを効かせるために指定します。 */
  margin-top: 18px; /* 本文とリンクの間隔です。 */
}

/* =========================================================
   07. 物件カード一覧
========================================================= */
.section-head {
  display: flex; /* 見出しブロックとリンクを横並びにします。 */
  align-items: flex-end; /* 下端をそろえて自然に見せます。 */
  justify-content: space-between; /* 左に見出し、右にリンクを置きます。 */
  gap: 20px; /* 折り返し時の余白を確保します。 */
  margin-bottom: 34px; /* カード一覧との距離を作ります。 */
}

.property-grid {
  display: flex; /* 物件カードを横並びにします。 */
  flex-wrap: wrap; /* 画面幅に応じて折り返します。 */
  gap: 28px; /* カード同士の間隔です。 */
}

.property-card {
  width: calc((100% - 56px) / 3); /* 通常は3列表示にします。 */
  background-color: var(--color-white); /* カード背景を白にします。 */
  border: 1px solid var(--color-border); /* カードの輪郭を作ります。 */
  box-shadow: var(--shadow-card); /* カードに軽い影を付けます。 */
  transition-duration: 0.25s; /* hover時の動きをなめらかにします。 */
}

.property-grid--wide .property-card {
  width: calc((100% - 84px) / 4); /* 物件一覧ページではPCで4列表示にします。 */
}

.property-card:hover {
  box-shadow: var(--shadow-hover); /* hover時は影を強くして浮いた印象にします。 */
}

.property-photo {
  position: relative; /* 種別ラベルを写真上に重ねる基準にします。 */
}

.property-photo img {
  width: 100%; /* 写真をカード幅いっぱいにします。 */
  aspect-ratio: 4 / 3; /* すべての物件写真を同じ比率にします。 */
  object-fit: cover; /* 写真を切り抜いてカード比率に合わせます。 */
}

.property-photo span {
  position: absolute; /* 写真の上にラベルを重ねます。 */
  left: 14px; /* 左からの位置です。 */
  top: 14px; /* 上からの位置です。 */
  padding: 6px 12px; /* ラベル内側の余白です。 */
  color: var(--color-white); /* ラベル文字を白にします。 */
  background-color: rgba(20, 53, 36, 0.92); /* 半透明の緑背景にします。 */
  font-size: 12px; /* ラベル文字を小さめにします。 */
  font-weight: 700; /* ラベルを読みやすく太字にします。 */
}

.property-body {
  padding: 22px; /* カード本文の内側余白です。 */
}

.property-body h3 {
  margin-bottom: 10px; /* 物件名と交通情報の間隔です。 */
  font-size: 21px; /* 物件名のサイズです。 */
}

.property-body p {
  font-size: 14px; /* カード本文を少し小さくして情報量を収めます。 */
}

.address {
  color: var(--color-sub); /* 住所は補助情報として薄い色にします。 */
}

.card-bottom {
  display: flex; /* 価格と詳細リンクを左右に分けます。 */
  justify-content: space-between; /* 左右の端に配置します。 */
  align-items: flex-end; /* 下端をそろえます。 */
  gap: 12px; /* 狭い画面での間隔です。 */
  margin-top: 18px; /* 上の住所との距離を作ります。 */
}

.price {
  color: var(--color-brand); /* 価格をブランドカラーで強調します。 */
  font-size: 22px; /* 価格をカード内で目立たせます。 */
  font-weight: 700; /* 太字で価格を強調します。 */
}

/* =========================================================
   08. コンセプト・サービス・会社案内
========================================================= */
.concept-layout,
.company-layout,
.contact-layout,
.detail-layout {
  display: flex; /* 2カラムレイアウトを作ります。 */
  gap: 48px; /* 左右カラムの間隔です。 */
  align-items: flex-start; /* カラム上端をそろえます。 */
}

.concept-text,
.concept-photo,
.contact-layout > div,
.detail-main {
  flex: 1; /* 2カラムの幅を柔軟に分けます。 */
}

/* company-content：文章側を写真側より少し広くし、会社概要を読みやすくします。 */
.company-content {
  flex: 1.08; /* 右側の写真より少し広い比率で伸縮させます。 */
}

.concept-photo img,
.company-photos img,
.contact-side img,
.detail-gallery img {
  width: 100%; /* 親要素の幅いっぱいに表示します。 */
  border: 1px solid var(--color-border); /* 写真にも細い枠線を付けます。 */
  box-shadow: var(--shadow-card); /* 写真に軽い奥行きを出します。 */
  object-fit: cover; /* 写真を指定比率に切り抜きます。 */
}

.concept-photo img,
.contact-side img {
  aspect-ratio: 4 / 3; /* 写真の高さを安定させます。 */
}

.company-photos {
  flex: 0.92; /* 左側の文章より少し小さい幅で伸縮させます。 */
  display: flex; /* 会社写真を大1枚・小2枚の構成で並べます。 */
  flex-wrap: wrap; /* 1枚目の下へ2枚目と3枚目を折り返します。 */
  gap: 20px; /* 写真同士の間隔です。 */
}

.company-photos img {
  aspect-ratio: 4 / 3; /* 会社写真の比率を統一します。 */
}

/* 受付写真：写真エリアの先頭で横幅いっぱいに見せます。 */
.company-photos img:first-child {
  aspect-ratio: 16 / 10; /* メイン写真を横長にし、縦方向の過剰な余白を抑えます。 */
}

/* 打ち合わせ・ラウンジ写真：下段で2枚を同じ幅に並べます。 */
.company-photos img:not(:first-child) {
  width: calc((100% - 20px) / 2); /* 写真間の20pxを除いた幅を2等分します。 */
}

/* company-principles：会社紹介文と会社概要表の間に接客方針を置きます。 */
.company-principles {
  margin-top: 32px; /* 導入文との間に区切りとなる余白を作ります。 */
  padding: 26px 28px; /* 方針を読みやすいカード状に見せる内側余白です。 */
  background-color: #f4f1e9; /* 会社概要表と区別できる淡い生成り色です。 */
  border-left: 4px solid var(--color-accent); /* ブランドの金色で内容の始まりを示します。 */
}

.company-principles h3 {
  color: var(--color-brand); /* 小見出しをブランドの濃い緑にします。 */
  font-size: 20px; /* 本文より大きく、主見出しより控えめにします。 */
}

/* company-principle-list：3つの方針を縦方向へ均等に並べます。 */
.company-principle-list {
  margin-top: 18px; /* 小見出しと最初の方針の間隔です。 */
  display: flex; /* 各方針の間隔をまとめて管理します。 */
  flex-direction: column; /* 方針を上から順番に読み進められる縦並びにします。 */
  gap: 14px; /* 方針同士の間隔です。 */
}

.company-principle-list li {
  padding-top: 14px; /* 区切り線と文字の間に余白を作ります。 */
  border-top: 1px solid #ddd5c6; /* 各方針を細い線で区切ります。 */
}

.company-principle-list li:first-child {
  padding-top: 0; /* 最初の方針には不要な上余白を付けません。 */
  border-top: 0; /* 最初の方針の上側には区切り線を付けません。 */
}

.company-principle-list strong,
.company-principle-list span {
  display: block; /* 方針名と説明を上下2段にします。 */
}

.company-principle-list strong {
  color: var(--color-brand); /* 方針名を濃い緑で強調します。 */
  font-size: 15px; /* 説明文との差が分かる大きさにします。 */
}

.company-principle-list span {
  margin-top: 4px; /* 方針名と説明文の間隔です。 */
  color: var(--color-sub); /* 説明文を補助色にします。 */
  font-size: 14px; /* カード内で簡潔に読める大きさです。 */
}

.company-content > p:not(.eyebrow) {
  margin-top: 18px; /* 会社紹介の段落同士へ読みやすい間隔を付けます。 */
  color: #3f4b44; /* 本文を落ち着いた濃いグレーグリーンにします。 */
}

/* company-profile：2カラムの下へ会社概要を横幅いっぱいに配置します。 */
.company-profile {
  margin-top: 64px; /* 導入エリアと会社概要の間隔です。 */
  padding-top: 56px; /* 区切り線から見出しまでの余白です。 */
  border-top: 1px solid var(--color-border); /* 上の2カラムと会社概要を区切ります。 */
}

.company-profile .info-table {
  margin-top: 28px; /* 会社概要の見出しと表の間隔です。 */
}

.point-list {
  margin-top: 24px; /* 本文とリストの間隔です。 */
}

.point-list li {
  position: relative; /* 丸印を配置する基準にします。 */
  padding-left: 22px; /* 丸印の分だけ文章を右にずらします。 */
  margin-bottom: 10px; /* 項目同士の間隔です。 */
}

.point-list li::before {
  content: ""; /* 行頭の丸印を作ります。 */
  position: absolute; /* liの左側に自由配置します。 */
  left: 0; /* 左端に置きます。 */
  top: 13px; /* 一行目の高さに合わせます。 */
  width: 8px; /* 丸印の横幅です。 */
  height: 8px; /* 丸印の高さです。 */
  border-radius: 50%; /* 正円にします。 */
  background-color: var(--color-accent); /* 金色の丸印にします。 */
}

.service-list {
  display: flex; /* サービスカードを横並びにします。 */
  gap: 24px; /* カード同士の間隔です。 */
  margin-top: 28px; /* 見出しとの距離を作ります。 */
}

.service-card {
  flex: 1; /* 3つのカード幅を均等にします。 */
  padding: 28px; /* カード内側の余白です。 */
  background-color: var(--color-white); /* カード背景を白にします。 */
  border: 1px solid var(--color-border); /* カードの輪郭です。 */
  box-shadow: var(--shadow-card); /* カードの影です。 */
}

.service-card__num {
  margin-bottom: 10px; /* 番号と見出しの間隔です。 */
  color: var(--color-accent); /* 番号を金色にします。 */
  font-family: "Cinzel", serif; /* 番号を英字風のフォントにします。 */
  font-size: 22px; /* 番号を少し大きく見せます。 */
}

/* =========================================================
   09. フォーム・表・地図
========================================================= */
.info-table {
  width: 100%; /* 表を親要素の横幅いっぱいにします。 */
  margin-top: 26px; /* 上の文章との距離を作ります。 */
  background-color: var(--color-white); /* 表全体の背景を白にします。 */
  border: 1px solid var(--color-border); /* 表の外枠です。 */
}

.info-table th,
.info-table td {
  padding: 16px 18px; /* セル内の余白です。 */
  border-bottom: 1px solid #eee9dd; /* 行の区切り線です。 */
  text-align: left; /* 表の文字を左寄せにします。 */
  vertical-align: top; /* 複数行でも上端をそろえます。 */
}

.info-table th {
  width: 28%; /* 項目名列の幅です。 */
  background-color: #f0ece1; /* 項目名セルを薄い背景で区別します。 */
  font-weight: 700; /* 項目名を太字にします。 */
}

.contact-form,
.side-card,
.detail-main,
.detail-side,
.map-panel,
.map-box {
  background-color: var(--color-white); /* ボックス背景を白にします。 */
  border: 1px solid var(--color-border); /* ボックスの輪郭です。 */
  box-shadow: var(--shadow-card); /* ボックスに軽い影を付けます。 */
  padding: 32px; /* ボックス内側の余白です。 */
}

/* detail-side内のside-card：広告バナーのように強すぎる見え方を避けるため、
   情報ボックスとして落ち着いた見た目になるように見出しサイズ・余白・背景色を細かく調整します。 */
.detail-side .side-card {
  position: sticky; /* PCではスクロール時に見失いにくいよう、サイドバー内で少し追従させます。 */
  top: 96px; /* 固定ヘッダーと重ならない位置から追従を開始します。 */
  padding: 28px 26px; /* 通常のカードより少し締まった余白にして、広告っぽい大げささを抑えます。 */
  background: linear-gradient(180deg, #fffefa 0%, #fbf8f1 100%); /* 白ベースのやさしい背景で案内感を出します。 */
  box-shadow: 0 10px 24px rgba(30, 45, 38, 0.08); /* 影を弱めにして落ち着いた印象にします。 */
}

.detail-side .side-card h2 {
  margin-bottom: 12px; /* 見出しと説明文の間隔を十分に取り、窮屈さをなくします。 */
  font-size: 24px; /* 目立ちすぎない上品なサイズに調整します。 */
}

.detail-side .side-card p {
  color: var(--color-sub); /* 説明文は少し控えめな色にして本文とのトーンをそろえます。 */
  font-size: 15px; /* 補助説明として読みやすい標準サイズにします。 */
  line-height: 1.9; /* 読みやすい行間を確保します。 */
}

.contact-form p {
  margin-top: 18px; /* フォーム項目同士の間隔です。 */
}

.contact-form label {
  display: block; /* ラベルを入力欄の上に表示します。 */
  margin-bottom: 8px; /* ラベルと入力欄の間隔です。 */
  font-weight: 700; /* ラベルを読みやすく太字にします。 */
}

.contact-form input,
.contact-form textarea {
  width: 100%; /* 入力欄をフォーム幅いっぱいにします。 */
  padding: 13px 14px; /* 入力文字と枠線の間に余白を作ります。 */
  border: 1px solid #cfc8b7; /* 入力欄の枠線です。 */
  background-color: var(--color-white); /* 入力欄背景を白にします。 */
}

.contact-form textarea {
  min-height: 170px; /* 相談内容の入力欄を大きめにします。 */
  resize: vertical; /* 縦方向だけサイズ変更できるようにします。 */
}

.contact-side > * + * {
  margin-top: 24px; /* 右カラム内の要素同士の間隔です。 */
}

.contact-tel {
  color: var(--color-brand); /* 電話番号をブランドカラーにします。 */
  font-size: 28px; /* 電話番号を大きく表示します。 */
  font-weight: 700; /* 太字で目立たせます。 */
}

.map-panel iframe,
.map-box iframe {
  display: block; /* iframe下の余白を防ぎます。 */
  width: 100%; /* 地図を横幅いっぱいにします。 */
  height: 320px; /* 地図の高さを指定します。 */
  margin-top: 20px; /* 地図と上の文章の間隔です。 */
  border: 0; /* iframeの標準枠線を消します。 */
}

/* =========================================================
   10. 物件詳細ページ
========================================================= */
.detail-main {
  flex: 1; /* 詳細本文を広めに使います。 */
}

.detail-side {
  width: 330px; /* サイドバーの幅を固定し、本文とのバランスを取ります。 */
  flex: none; /* flexによって縮みすぎないようにします。 */
}

.detail-price {
  display: flex; /* 種別ラベルと価格を横並びにします。 */
  flex-wrap: wrap; /* 狭い画面では折り返します。 */
  align-items: center; /* 縦方向中央にそろえます。 */
  gap: 18px; /* ラベルと価格の間隔です。 */
  margin-bottom: 18px; /* 下の説明文との間隔です。 */
}

.detail-price span {
  padding: 6px 14px; /* 種別ラベルの内側余白です。 */
  color: var(--color-white); /* ラベル文字を白にします。 */
  background-color: var(--color-brand); /* ラベル背景を深い緑にします。 */
  font-size: 13px; /* ラベル文字サイズです。 */
  font-weight: 700; /* ラベルを太字にします。 */
}

.detail-price strong {
  color: var(--color-brand); /* 価格をブランドカラーにします。 */
  font-size: 30px; /* 価格を大きく見せます。 */
}

.detail-gallery {
  display: flex; /* 詳細写真2枚を横並びにします。 */
  gap: 20px; /* 写真同士の間隔です。 */
  margin-top: 30px; /* 上の説明文との間隔です。 */
  margin-bottom: 34px; /* 下の見出しとの間隔です。 */
}

.detail-gallery img {
  width: calc((100% - 20px) / 2); /* 2枚を同じ幅にします。 */
  aspect-ratio: 4 / 3; /* 写真比率を統一します。 */
}

.side-button {
  width: 100%; /* サイドバー内のボタンを横幅いっぱいにします。 */
  min-height: 48px; /* タップしやすさを保ちながら大きすぎない高さにします。 */
  margin-top: 28px; /* 説明文とボタンの距離を少し広げて、広告風の詰まりを防ぎます。 */
  font-size: 15px; /* ボタン文字を少し整えて落ち着いた見た目にします。 */
}

/* =========================================================
   11. パンくず・カテゴリリンク・CTA
========================================================= */
.breadcrumb {
  padding-top: 20px; /* ヒーローとパンくずの間隔です。 */
}

.breadcrumb ol {
  display: flex; /* パンくず項目を横並びにします。 */
  flex-wrap: wrap; /* 長い場合は折り返します。 */
  gap: 8px; /* 項目同士の間隔です。 */
  color: var(--color-sub); /* 補助情報として薄い色にします。 */
  font-size: 13px; /* パンくず用の控えめな文字サイズです。 */
}

.breadcrumb li::after {
  content: ">"; /* 階層の区切り記号です。 */
  margin-left: 8px; /* 文字と区切り記号の距離です。 */
}

.breadcrumb li:last-child::after {
  content: ""; /* 最後の項目だけ区切り記号を消します。 */
}

.category-links {
  display: flex; /* カテゴリリンクを横並びにします。 */
  flex-wrap: wrap; /* 狭い画面では折り返します。 */
  gap: 12px; /* リンク同士の間隔です。 */
  padding-top: 24px; /* パンくずとの距離を作ります。 */
}

.category-links a {
  padding: 10px 24px; /* リンクをボタン風に見せる余白です。 */
  border: 1px solid #c8ad63; /* 金色系の枠線です。 */
  background-color: var(--color-white); /* 背景を白にします。 */
  color: var(--color-brand); /* 文字色を深い緑にします。 */
  font-weight: 700; /* リンクを太字にします。 */
}

.cta-section {
  display: flex; /* 文章とボタンを横並びにします。 */
  align-items: center; /* 縦方向中央にそろえます。 */
  justify-content: space-between; /* 左右に配置します。 */
  gap: 24px; /* 折り返し時の余白です。 */
  padding: 40px; /* CTA内側の余白です。 */
  color: var(--color-white); /* 濃い背景に白文字を載せます。 */
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-light)); /* 深い緑の背景です。 */
}

/* =========================================================
   12. フッターとページトップボタン
========================================================= */
.page-top {
  position: fixed; /* 画面右下に固定表示します。 */
  right: 22px; /* 右端からの位置です。 */
  bottom: 22px; /* 下端からの位置です。 */
  z-index: 100; /* 他の要素より前に出します。 */
  width: 56px; /* ボタンの横幅です。 */
  height: 56px; /* ボタンの高さです。 */
  display: flex; /* 文字を中央に置きます。 */
  align-items: center; /* 縦方向中央にします。 */
  justify-content: center; /* 横方向中央にします。 */
  color: var(--color-white); /* 文字を白にします。 */
  background-color: var(--color-brand); /* 背景を深い緑にします。 */
  border-radius: 50%; /* 正円にします。 */
  font-size: 12px; /* TOP文字を小さめにします。 */
  font-weight: 700; /* 文字を太くします。 */
}

.site-footer {
  color: var(--color-white); /* フッター内の文字を白にします。 */
  background: linear-gradient(135deg, #0f2d20, #1e4a34); /* フッター背景を濃い緑のグラデーションにします。 */
}

.footer-inner {
  width: min(100% - 48px, var(--container-width)); /* フッター内容を本文幅とそろえます。 */
  margin: 0 auto; /* 中央に配置します。 */
  padding: 44px 0; /* 上下の余白です。 */
  display: flex; /* ロゴ、住所、ナビを横並びにします。 */
  justify-content: space-between; /* 3つの列を左右に広げます。 */
  gap: 34px; /* 列同士の間隔です。 */
}

.footer-brand,
.footer-info,
.footer-nav {
  flex: 1; /* 3つの列を均等に広げます。 */
}

.footer-brand img {
  width: 220px; /* フッター内のロゴ幅です。 */
  padding: 8px; /* ロゴ周囲に余白を作ります。 */
  background-color: var(--color-white); /* 濃色背景でもロゴを見やすくします。 */
}

.footer-brand p,
.footer-info,
.footer-nav {
  font-size: 13px; /* フッター情報は控えめな文字サイズにします。 */
}

.footer-nav li + li {
  margin-top: 8px; /* フッターリンク同士の間隔です。 */
}

.copyright {
  padding: 16px 24px; /* コピーライトの上下左右余白です。 */
  border-top: 1px solid rgba(255, 255, 255, 0.18); /* 上の情報と区切る線です。 */
  text-align: center; /* 文字を中央寄せにします。 */
  font-size: 12px; /* コピーライトを控えめにします。 */
}

/* =========================================================
   13. レスポンシブ対応
   ・タブレットやスマートフォンでレイアウトが崩れないようにします。
========================================================= */
@media (max-width: 1080px) {
  .property-card,
  .property-grid--wide .property-card {
    width: calc((100% - 28px) / 2); /* 物件カードを2列にします。 */
  }

  .concept-layout,
  .company-layout,
  .contact-layout,
  .detail-layout,
  .footer-inner {
    flex-direction: column; /* 2カラムを縦並びに変更します。 */
  }

  .company-content,
  .company-photos {
    width: 100%; /* タブレット以下では文章と写真をどちらも横幅いっぱいにします。 */
  }

  .detail-side {
    width: 100%; /* サイドバーを横幅いっぱいにします。 */
  }

  .detail-side .side-card {
    position: static; /* 縦並びレイアウトではstickyを解除し、流れに沿って自然に配置します。 */
  }

  .service-list {
    flex-wrap: wrap; /* サービスカードを折り返します。 */
  }

  .service-card {
    flex-basis: calc((100% - 24px) / 2); /* サービスカードを2列に近い幅にします。 */
  }
}

@media (max-width: 640px) {
  .container,
  .section-block,
  .path-panel,
  .breadcrumb,
  .category-links,
  .footer-inner {
    width: calc(100% - 28px); /* スマホでは左右14pxの余白を確保します。 */
  }

  .site-logo img {
    width: 210px; /* スマホでロゴを少し小さくします。 */
  }

  .global-nav ul {
    gap: 8px 16px; /* メニューの間隔を狭めます。 */
    font-size: 13px; /* メニュー文字を少し小さくします。 */
  }

  .header-contact {
    display: none; /* スマホでは電話番号を隠し、ヘッダーの高さを抑えます。 */
  }

  .home-hero {
    min-height: 620px; /* スマホでもヒーローの高さを保ちます。 */
  }

  .home-hero__content h1 {
    font-size: 34px; /* スマホ用の主見出しサイズです。 */
  }

  .page-hero,
  .detail-hero {
    min-height: 360px; /* 下層ページのヒーロー高さをスマホ向けに調整します。 */
  }

  .path-panel,
  .section-head,
  .card-bottom,
  .cta-section,
  .detail-gallery,
  .service-list {
    flex-direction: column; /* 横並びを縦並びに変更します。 */
    align-items: flex-start; /* 左揃えで読みやすくします。 */
  }

  .path-panel {
    margin-top: 28px; /* スマホではヒーロー下の余白を少し詰めます。 */
  }

  .section-block {
    padding-top: 58px; /* スマホ用にセクション上余白を調整します。 */
    padding-bottom: 58px; /* スマホ用にセクション下余白を調整します。 */
  }

  .property-card,
  .property-grid--wide .property-card,
  .detail-gallery img,
  .service-card {
    width: 100%; /* スマホではカードや写真を1列表示にします。 */
    flex-basis: auto; /* PC・タブレット用の幅指定を解除します。 */
  }

  .info-table th,
  .info-table td {
    display: block; /* 表をスマホで縦積みにします。 */
    width: 100%; /* セルを横幅いっぱいにします。 */
  }

  .company-principles {
    padding: 22px 20px; /* スマホでは方針カードの左右余白を小さくします。 */
  }

  .contact-form,
  .side-card,
  .detail-main,
  .detail-side,
  .map-panel,
  .map-box {
    padding: 24px; /* スマホではボックス内余白を少し減らします。 */
  }

  .footer-inner {
    gap: 24px; /* フッターの縦並び時の間隔です。 */
  }
}


/* =========================================================
   14. 追加修正：トップ導線画像・キャッチコピー周辺
   ・今回追加した高画質画像がきれいに見えるように、トップページの導線カードを調整します。
   ・カードが3列のまま窮屈になる幅では折り返し、レスポンシブ時の崩れを防ぎます。
========================================================= */
.home-hero__content h1 {
  max-width: 760px; /* 長すぎない行幅にして、キャッチコピーを読みやすくします。 */
  letter-spacing: 0.04em; /* 見出しの文字間を少しだけ広げ、落ち着いた印象にします。 */
}

.home-hero__content p:not(.eyebrow) {
  max-width: 660px; /* リード文の横幅を制限し、横に長くなりすぎるのを防ぎます。 */
}

.path-panel {
  flex-wrap: wrap; /* 導線カードが横幅不足でつぶれないよう、必要に応じて折り返します。 */
  align-items: stretch; /* 折り返しが起きてもカードの高さをそろえやすくします。 */
}

.path-card {
  flex: 1 1 320px; /* 1枚あたりの最低幅を確保し、PCでは3列、狭い幅では2列や1列に変化させます。 */
  min-width: 0; /* カード内の文字量で横幅があふれるのを防ぎます。 */
}

.path-card img {
  height: auto; /* 画像本来の縦横比を保ったうえで、aspect-ratioの枠に合わせます。 */
  object-position: center center; /* 写真の中央を基準に切り抜き、主役が端に寄りすぎないようにします。 */
}

/* =========================================================
   15. 追加修正：物件詳細ページのサイドバー
   ・広告バナーのように見えないよう、影・色・文字サイズを控えめにします。
   ・本文の補足情報として自然に読めるデザインへ変更します。
========================================================= */
.detail-side {
  width: 300px; /* サイドバーを少し細くし、本文の閲覧を邪魔しない幅にします。 */
  flex: none; /* flexの影響で幅が変わりすぎないよう固定します。 */
  padding: 0; /* 外側の余白を消し、内側のside-cardで余白を管理します。 */
  background-color: transparent; /* aside自体は背景を持たせず、広告枠のような大きな面を避けます。 */
  border: 0; /* aside本体の枠線を消し、side-cardだけを情報ボックスとして見せます。 */
  box-shadow: none; /* 大きな影を消して、強い広告感を抑えます。 */
}

.detail-side .side-card {
  position: sticky; /* PCではスクロール時に少し追従し、問い合わせ先を見失いにくくします。 */
  top: 96px; /* 固定ヘッダーと重ならない位置から追従させます。 */
  padding: 24px 22px; /* 余白を控えめにしつつ、文章が詰まらない距離を確保します。 */
  background-color: #fffdf8; /* 真っ白より少し柔らかい背景にして、本文の補足としてなじませます。 */
  border: 1px solid #e2dccf; /* 細い枠線で情報ボックスの範囲を示します。 */
  border-left: 4px solid var(--color-accent); /* 左線だけアクセントを入れ、広告ではなくメモ欄のように見せます。 */
  box-shadow: 0 8px 18px rgba(30, 45, 38, 0.06); /* 影を弱くして、主張しすぎない奥行きにします。 */
}

.side-card__label {
  margin-bottom: 8px; /* ラベルと見出しの距離です。 */
  color: var(--color-accent); /* 小さなラベルをアクセントカラーにします。 */
  font-size: 12px; /* 補助ラベルなので小さめにします。 */
  font-weight: 700; /* 小さい文字でも読めるよう太字にします。 */
  letter-spacing: 0.16em; /* ラベルらしく見えるよう文字間を広げます。 */
}

.detail-side .side-card h2 {
  margin-bottom: 10px; /* 見出しと本文の間隔を整えます。 */
  font-size: 19px; /* 広告見出しのように大きくなりすぎないサイズにします。 */
  line-height: 1.55; /* 2行になっても読みやすい行間です。 */
}

.detail-side .side-card p:not(.side-card__label) {
  color: var(--color-sub); /* 補足説明として少し落ち着いた文字色にします。 */
  font-size: 14px; /* 本文より少し控えめなサイズにします。 */
  line-height: 1.9; /* 小さめの文字でも読みやすくします。 */
}

.detail-side .side-button {
  width: 100%; /* サイドバー内でボタン幅をそろえます。 */
  min-height: 44px; /* 押しやすさを保ちつつ、大きすぎない高さにします。 */
  margin-top: 22px; /* 説明文とボタンの間に余白を作ります。 */
  color: var(--color-brand); /* 強い白抜きボタンを避け、落ち着いた文字色にします。 */
  background: #ffffff; /* 背景を白にして、広告的な強い塗りを抑えます。 */
  border: 1px solid #c8ad63; /* 細い線でボタンとして認識できるようにします。 */
  box-shadow: none; /* 影を消し、控えめな相談導線にします。 */
  font-size: 14px; /* サイドバーの小さな情報ボックスに合わせた文字サイズです。 */
}

/* =========================================================
   16. 追加修正：会社案内・お問い合わせの写真差別化
   ・会社案内は広いオフィスの印象、お問い合わせは相談中の印象になるように見せ方を分けます。
========================================================= */
.company-photos img,
.contact-side img {
  object-position: center center; /* 追加画像の中央を基準に表示し、人物や空間が極端に切れないようにします。 */
}

.contact-side img {
  border-radius: 0; /* 既存デザインに合わせて角丸を使わず、すっきりした写真枠にします。 */
}

/* =========================================================
   17. 追加レスポンシブ調整
   ・タブレットとスマートフォンで、今回変更した導線カードとサイドバーが崩れないようにします。
========================================================= */
@media (max-width: 1080px) {
  .detail-side {
    width: 100%; /* タブレット以下ではサイドバーを本文の下に回し、横幅いっぱいで読みやすくします。 */
  }

  .detail-side .side-card {
    position: static; /* 縦並び時は追従を解除し、自然な文書の流れに戻します。 */
  }
}

@media (max-width: 640px) {
  .home-hero__content h1 {
    font-size: 32px; /* スマートフォンで見出しが大きすぎて折り返しすぎるのを防ぎます。 */
  }

  .path-card {
    flex-basis: 100%; /* スマートフォンでは導線カードを1列にします。 */
  }

  .detail-side .side-card {
    padding: 22px 20px; /* スマートフォンでは左右余白を少し詰め、本文幅を確保します。 */
  }
}


/* =========================================================
   18. 追加修正：トップへ戻るボタンの移動先
   ・各HTMLのbody直下に置いた .top-anchor を、#top の移動先として使います。
   ・固定ヘッダーの高さで移動位置がずれないよう、scroll-margin-topも指定します。
========================================================= */
.top-anchor {
  display: block; /* id付きの移動先として認識しやすいブロック要素にします。 */
  height: 0; /* 画面上に余計な高さを作らないようにします。 */
  scroll-margin-top: 0; /* ページ最上部に戻るボタンなので、余分な上余白を入れません。 */
}

.page-top {
  text-decoration: none; /* リンクの下線を消し、丸ボタンとして見せます。 */
  cursor: pointer; /* クリックできることが分かるようにします。 */
}

/* =========================================================
   19. 追加修正：ヒーロー画像の暗いオーバーレイを軽くする
   ・詳細ページと下層ページの画像が暗く沈みすぎないようにします。
   ・文字可読性は残しつつ、物件写真そのものの明るさを見せます。
========================================================= */
.page-hero::before,
.detail-hero::before {
  background: linear-gradient(90deg, rgba(15, 26, 20, 0.36), rgba(15, 26, 20, 0.06)); /* 暗い薄幕を弱め、写真の見た目を明るくします。 */
}

.home-hero::before {
  background: linear-gradient(90deg, rgba(15, 26, 20, 0.52), rgba(15, 26, 20, 0.10)); /* トップは文字を読ませるため、詳細ページより少しだけ濃くします。 */
}

.page-hero__content,
.detail-hero__content,
.home-hero__content {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); /* オーバーレイを薄くした分、文字に軽い影を付けて読みやすくします。 */
}

/* =========================================================
   20. 追加修正：物件サムネイル画像と詳細画像の見え方をそろえる
   ・一覧カードのサムネイルと、詳細ページのメイン画像を同じ画像に統一しています。
   ・CSS側では明るく、高画質に見えるよう中央切り抜きと背景色を調整します。
========================================================= */
.property-photo {
  background-color: #f4f0e7; /* 画像読み込み中や余白が出た場合の背景色です。 */
}

.property-photo img {
  object-position: center center; /* サムネイルでも詳細ページと近い位置が見えるよう中央基準にします。 */
  filter: none; /* 物件サムネイルに暗い加工をかけないよう明示します。 */
}

.detail-hero__image,
.page-hero__image {
  filter: none; /* ヒーロー画像自体に暗い加工をかけないよう明示します。 */
}

/* =========================================================
   21. 追加レスポンシブ確認用の調整
   ・画像を差し替えたあとも、スマホでカードや詳細ヒーローが崩れないようにします。
========================================================= */
@media (max-width: 640px) {
  .page-hero::before,
  .detail-hero::before {
    background: linear-gradient(180deg, rgba(15, 26, 20, 0.22), rgba(15, 26, 20, 0.42)); /* スマホでは下側の文字が読みやすいよう縦方向の薄幕にします。 */
  }

  .property-photo img {
    aspect-ratio: 4 / 3; /* スマホでも物件カードの写真比率を維持します。 */
  }
}


/* =========================================================
   22. 追加修正：画像フォルダ整理と物件写真の一貫性
   ・image/common はロゴなど共通画像です。
   ・image/pages はトップ、会社案内、お問い合わせなどページ固有画像です。
   ・image/properties/物件名 は物件ごとの外観、内観、眺望・補助写真です。
   ・一覧カードと詳細ページの外観は、同じ物件フォルダ内の main.jpg を参照します。
========================================================= */
.property-photo img {
  object-fit: cover; /* カード内の写真を同じ比率で見せ、一覧の高さをそろえます。 */
  object-position: center center; /* メイン写真の中心を基準に切り抜き、別物件に見えないようにします。 */
}

.detail-hero > img {
  object-fit: cover; /* 詳細ページのメイン写真をヒーロー領域いっぱいに表示します。 */
  object-position: center center; /* 一覧サムネイルと同じ外観が見えるよう中央基準にします。 */
}

.detail-gallery img {
  object-fit: cover; /* 内観・眺望写真の比率を統一し、ギャラリーの高さ崩れを防ぎます。 */
  object-position: center center; /* 室内や窓からの景色が端に切れすぎないよう中央を見せます。 */
}

/* 下層ページと詳細ページの暗いオーバーレイをさらに弱めます。
   画像そのものを確認しやすくしつつ、文字には text-shadow を残して読みやすさを保ちます。 */
.page-hero::before,
.detail-hero::before {
  background: linear-gradient(90deg, rgba(15, 26, 20, 0.22), rgba(15, 26, 20, 0.04));
}

/* トップページだけはキャッチコピーの可読性が必要なので、下層より少しだけ濃い薄幕にします。 */
.home-hero::before {
  background: linear-gradient(90deg, rgba(15, 26, 20, 0.44), rgba(15, 26, 20, 0.08));
}

@media (max-width: 640px) {
  .page-hero::before,
  .detail-hero::before {
    background: linear-gradient(180deg, rgba(15, 26, 20, 0.10), rgba(15, 26, 20, 0.28)); /* スマホでは文字が下に来るため縦方向の薄幕にします。 */
  }
}


/* =========================================================
   23. 物件詳細ページ：追加画像ギャラリー
   ・生成した外観2枚、LDK、寝室、浴室、眺望などを詳細ページに反映します。
   ・figureを使うことで、画像と説明テキストをセットで扱えるようにしています。
========================================================= */
.detail-gallery--expanded {
  display: flex; /* 写真カードを横並びに配置します。 */
  flex-wrap: wrap; /* 画面幅に合わせて2列、1列へ自然に折り返します。 */
  gap: 22px; /* 写真カード同士の間隔です。 */
  margin-top: 32px; /* 物件説明文と写真一覧の間隔です。 */
  margin-bottom: 38px; /* 写真一覧と次の見出しの間隔です。 */
}

.detail-gallery__item {
  width: calc((100% - 22px) / 2); /* PCでは2列表示にします。 */
  margin: 0; /* figureが持つ初期余白を消し、CSSで余白を管理します。 */
  background-color: #ffffff; /* キャプションを含む写真カードの背景です。 */
  border: 1px solid var(--color-border); /* 写真カード全体の輪郭です。 */
  box-shadow: var(--shadow-card); /* 写真カードに軽い奥行きを出します。 */
}

.detail-gallery__item img {
  width: 100%; /* 写真をカード幅いっぱいに広げます。 */
  aspect-ratio: 4 / 3; /* 全写真の縦横比をそろえ、レイアウトの高さ崩れを防ぎます。 */
  object-fit: cover; /* 写真を枠いっぱいに見せるため、余白が出ないように切り抜きます。 */
  border: 0; /* 既存のimg枠線指定を打ち消し、カード側の枠線だけにします。 */
  box-shadow: none; /* 既存のimg影を消し、カード側の影だけにします。 */
}

.detail-gallery__item figcaption {
  padding: 10px 14px 12px; /* キャプションの内側余白です。 */
  color: var(--color-sub); /* 写真説明なので本文より少し控えめな色にします。 */
  font-size: 13px; /* 写真説明として読みやすい小さめの文字サイズです。 */
  font-weight: 700; /* カテゴリー名として判別しやすくします。 */
  letter-spacing: 0.08em; /* 写真カテゴリーらしい整った見た目にします。 */
}

@media (max-width: 640px) {
  .detail-gallery__item {
    width: 100%; /* スマートフォンでは写真カードを1列にして見やすくします。 */
  }
}


/* =========================================================
   24. サイト全体の最終ブラッシュアップ
   写真を主役にしながら、余白・文字・操作感・スマホ表示を整えます。
========================================================= */
/* html：ページ内リンクの移動を滑らかにし、固定ヘッダー分の停止位置を空けます。 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 118px;
}

/* body：背景に薄い円形グラデーションを重ね、日本語の字詰めと描画を整えます。 */
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(185, 148, 69, 0.055), transparent 28rem),
    var(--color-bg);
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ::selection：ドラッグして選択した文字と背景の色です。 */
::selection {
  color: #ffffff;
  background-color: var(--color-brand-light);
}

/* リンクとフォーム部品：タッチ時の標準ハイライトを消し、サイトの表示へ統一します。 */
a,
button,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* :focus-visible：キーボード操作中の位置を金色の外枠で示します。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(185, 148, 69, 0.72);
  outline-offset: 4px;
}

/* skip-link：通常は画面外へ置き、フォーカス時だけ本文へのリンクを表示します。 */
.skip-link {
  position: fixed;
  left: 18px;
  top: 12px;
  z-index: 1000;
  padding: 10px 16px;
  color: #ffffff;
  background-color: var(--color-brand);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ヘッダー：半透明の白背景とぼかしで、背後の写真上でも文字を読みやすくします。 */
.site-header {
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(222, 216, 202, 0.82);
  box-shadow: 0 8px 30px rgba(20, 53, 36, 0.045);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* header-inner：最終版のヘッダー高と上下余白です。 */
.header-inner {
  min-height: 86px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ロゴ、ナビ、電話、問い合わせボタン：ヘッダー内のサイズと字間を調整します。 */
.site-logo img {
  width: 214px;
  height: auto;
}

.global-nav ul {
  gap: 8px 26px;
}

.global-nav a {
  color: #26342c;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.global-nav a:hover,
.global-nav a.is-current {
  color: var(--color-brand);
}

.global-nav a::after {
  height: 2px;
  border-radius: 2px;
}

.header-tel {
  color: var(--color-brand);
  font-family: "Cinzel", serif;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.header-button {
  min-height: 44px;
  padding: 10px 21px;
  font-size: 13px;
}

/* home-hero：svhとcalc()で、端末の表示領域からヘッダー分を引いた高さを基準にします。 */
.home-hero {
  min-height: min(760px, calc(100svh - 86px));
}

/* ヒーロー本文：見出し幅、可変文字サイズ、上下余白を整えます。 */
.home-hero__content {
  padding-top: 86px;
  padding-bottom: 138px;
}

.home-hero__content h1 {
  max-width: 820px;
  font-size: clamp(42px, 5.25vw, 70px);
  line-height: 1.34;
  letter-spacing: 0.055em;
}

.home-hero__content p:not(.eyebrow) {
  max-width: 700px;
  font-size: 18px;
  line-height: 2;
}

/* ヒーローの疑似要素：写真左側を少し暗くし、白い見出しを読みやすくします。 */
.home-hero::before {
  background:
    linear-gradient(90deg, rgba(10, 31, 22, 0.66) 0%, rgba(10, 31, 22, 0.26) 54%, rgba(10, 31, 22, 0.06) 100%),
    linear-gradient(0deg, rgba(10, 31, 22, 0.2), transparent 42%);
}

/* 下層ページのヒーロー：高さ、文字位置、写真上のグラデーションを統一します。 */
.page-hero,
.detail-hero {
  min-height: 460px;
}

.page-hero::before,
.detail-hero::before {
  background: linear-gradient(90deg, rgba(10, 31, 22, 0.48) 0%, rgba(10, 31, 22, 0.1) 62%, transparent 100%);
}

.page-hero__content,
.detail-hero__content {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-hero__content h1,
.detail-hero__content h1 {
  letter-spacing: 0.07em;
}

/* eyebrow：小見出しをFlexboxで装飾線と横並びにします。 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ::beforeは空文字を生成し、小見出し左側の金色の線として使います。 */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  flex: none;
  background-color: currentColor;
}

/* トップ導線：ヒーローへ重ねる位置と、カード共通の枠・角丸を整えます。 */
.path-panel {
  position: relative;
  z-index: 3;
  margin-top: -78px;
  align-items: stretch;
}

/* カード：hover時の枠色・影・写真拡大をtransitionで滑らかに変えます。 */
.path-card,
.property-card,
.service-card,
.detail-gallery__item {
  border-color: rgba(215, 207, 191, 0.92);
  border-radius: 3px;
  overflow: hidden;
}

.path-card {
  border-top: 3px solid transparent;
  box-shadow: 0 18px 42px rgba(24, 51, 36, 0.13);
}

.path-card:hover {
  border-top-color: var(--color-accent);
  box-shadow: 0 24px 54px rgba(24, 51, 36, 0.18);
}

.path-card img,
.property-photo img {
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.path-card:hover img,
.property-card:hover .property-photo img {
  transform: scale(1.035);
}

.path-card__body {
  padding: 28px 28px 30px;
}

.path-card h2 {
  font-size: 24px;
}

/* セクション：最終版の上下余白、見出し間隔、導入文幅です。 */
.section-block {
  padding-top: 104px;
  padding-bottom: 104px;
}

.section-head {
  margin-bottom: 40px;
}

.section-lead {
  max-width: 760px;
  line-height: 1.95;
}

/* 物件カード：Flexboxで本文を縦に並べ、価格行をカード下端へそろえます。 */
.property-grid {
  align-items: stretch;
}

.property-card {
  position: relative;
  box-shadow: 0 12px 32px rgba(30, 45, 38, 0.09);
}

.property-card > a {
  display: flex;
  height: 100%;
  flex-direction: column;
}

/* 写真ラベル：画像左上へ絶対配置し、半透明背景で分類を示します。 */
.property-photo {
  overflow: hidden;
}

.property-photo span {
  left: 16px;
  top: 16px;
  padding: 6px 13px;
  background-color: rgba(14, 50, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 1px;
  letter-spacing: 0.06em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* 物件本文：flex: 1で残り高を使い、カードごとの高さをそろえます。 */
.property-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}

.property-body h3 {
  color: #17281e;
  font-size: 20px;
}

.property-body .address {
  margin-top: 2px;
  font-size: 12px;
}

.card-bottom {
  margin-top: auto;
  padding-top: 20px;
}

.price {
  font-family: "Noto Serif JP", serif;
  font-size: 21px;
}

.more {
  white-space: nowrap;
}

/* コンセプト・サービス：写真、文章、装飾線の最終的な見え方です。 */
.concept-layout {
  align-items: center;
}

.concept-text > p:not(.eyebrow) {
  margin-top: 22px;
  color: #3f4b44;
}

.concept-photo img,
.company-photos img,
.contact-side img {
  border-radius: 3px;
}

.service-card {
  position: relative;
  min-height: 224px;
  padding: 34px 30px;
  box-shadow: 0 10px 28px rgba(30, 45, 38, 0.07);
}

.service-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background-color: var(--color-accent);
}

.service-card__num {
  font-size: 18px;
  letter-spacing: 0.12em;
}

.service-card h3 {
  margin-bottom: 12px;
  font-size: 23px;
}

/* パンくず・カテゴリリンク：現在位置と絞り込み導線を分かりやすくします。 */
.breadcrumb {
  padding-top: 24px;
}

.breadcrumb a {
  text-decoration: underline;
  text-decoration-color: rgba(20, 53, 36, 0.28);
  text-underline-offset: 4px;
}

.category-links a {
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.category-links a:hover {
  color: #ffffff;
  background-color: var(--color-brand);
  transform: translateY(-2px);
}

/* フォーム・詳細カード：枠線、影、角丸を共通化します。 */
.contact-form,
.side-card,
.detail-main,
.map-panel,
.map-box {
  border-color: rgba(215, 207, 191, 0.9);
  border-radius: 3px;
  box-shadow: 0 14px 36px rgba(30, 45, 38, 0.085);
}

.detail-main {
  padding: 40px;
}

.detail-main > h2 {
  margin-top: 44px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 27px;
}

.detail-gallery__item {
  box-shadow: 0 8px 24px rgba(30, 45, 38, 0.08);
}

.detail-gallery__item img {
  transition: transform 0.5s ease;
}

.detail-gallery__item:hover img {
  transform: scale(1.02);
}

/* 物件概要表：セルの二重線を避け、最終行の下線を消します。 */
.info-table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 3px;
}

.info-table tr:last-child th,
.info-table tr:last-child td {
  border-bottom: 0;
}

.info-table th {
  color: #27372e;
  background-color: #f0ede4;
}

.contact-form,
.map-panel,
.map-box {
  padding: 38px;
}

/* 入力欄：必須ラベル、入力例、フォーカス、デモ送信不可の状態を示します。 */
.form-intro {
  color: var(--color-sub);
  font-size: 14px;
}

.required-label {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  color: #ffffff;
  background-color: var(--color-brand-light);
  border-radius: 1px;
  font-size: 10px;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}

.contact-form input,
.contact-form textarea {
  border-radius: 2px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9a9e99;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-brand-light);
  background-color: #fffefb;
  box-shadow: 0 0 0 4px rgba(47, 90, 68, 0.1);
  outline: none;
}

.form-demo-note {
  padding: 12px 14px;
  color: #6d644f;
  background-color: #f5f0e4;
  border-left: 3px solid var(--color-accent);
  font-size: 12px;
}

.form-submit:disabled {
  color: rgba(255, 255, 255, 0.82);
  background: #76847b;
  box-shadow: none;
  cursor: not-allowed;
}

/* CTA：円形の疑似要素を背景装飾にし、本文はz-indexで前面へ置きます。 */
.cta-section {
  position: relative;
  overflow: hidden;
  padding: 50px 54px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  box-shadow: 0 20px 44px rgba(20, 53, 36, 0.16);
}

.cta-section::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -150px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  pointer-events: none;
}

.cta-section > * {
  position: relative;
  z-index: 1;
}

/* TOPリンク：画面右下の固定位置、サイズ、hover反応を整えます。 */
.page-top {
  right: 24px;
  bottom: 24px;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 10px 24px rgba(14, 42, 29, 0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.page-top:hover {
  background-color: var(--color-brand-light);
  transform: translateY(-3px);
}

/* フッター：3列Grid、背景、リンク、デモ注意書きの最終デザインです。 */
.site-footer {
  margin-top: 28px;
  background:
    radial-gradient(circle at 80% 10%, rgba(185, 148, 69, 0.12), transparent 26rem),
    linear-gradient(135deg, #0d2a1d, #1b4530);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr 0.72fr;
  gap: 56px;
  padding-top: 58px;
  padding-bottom: 40px;
}

.footer-brand img {
  width: 210px;
  border-radius: 2px;
}

.footer-brand p {
  max-width: 390px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.9;
}

.footer-info {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.9;
}

.footer-info p + p {
  margin-top: 8px;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 8px 24px;
}

.footer-nav li + li {
  margin-top: 0;
}

.footer-nav a {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.footer-nav a:hover {
  color: #e1c47c;
  border-bottom-color: currentColor;
}

.demo-notice {
  width: min(100% - 48px, var(--container-width));
  margin: 0 auto;
  padding: 20px 0 24px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  line-height: 1.85;
}

.demo-notice__label {
  color: #e1c47c;
  font-family: "Cinzel", serif;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.copyright {
  color: rgba(255, 255, 255, 0.62);
  background-color: rgba(5, 21, 14, 0.18);
  letter-spacing: 0.08em;
}

/* 1080px以下：フッターを2列にし、ナビを次の行へ回します。 */
@media (max-width: 1080px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-nav {
    grid-column: 1 / -1;
    grid-template-columns: repeat(7, auto);
    justify-content: start;
  }
}

/* 860px以下：ロゴと主要レイアウトを小画面向けに調整します。 */
@media (max-width: 860px) {
  html {
    scroll-padding-top: 126px;
  }

  .site-logo img {
    width: 180px;
  }

  .home-hero {
    min-height: 670px;
  }

  .home-hero__content {
    padding-top: 76px;
    padding-bottom: 126px;
  }

  .path-panel {
    margin-top: -66px;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* 640px以下：本文をほぼ1列にし、余白と文字サイズを小画面向けにします。 */
@media (max-width: 640px) {
  html {
    scroll-padding-top: 116px;
  }

  .home-hero {
    min-height: 640px;
  }

  .home-hero__content {
    padding-top: 62px;
    padding-bottom: 110px;
  }

  .home-hero__content h1 {
    font-size: clamp(34px, 10.3vw, 42px);
    line-height: 1.45;
  }

  .home-hero__content p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.9;
  }

  .page-hero,
  .detail-hero {
    min-height: 380px;
  }

  .page-hero::before,
  .detail-hero::before {
    background: linear-gradient(180deg, rgba(10, 31, 22, 0.08), rgba(10, 31, 22, 0.52));
  }

  .page-hero__content,
  .detail-hero__content {
    align-self: flex-end;
    padding-bottom: 44px;
  }

  .path-panel {
    margin-top: -48px;
  }

  .section-block {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .section-head {
    margin-bottom: 30px;
  }

  .property-grid {
    gap: 22px;
  }

  .detail-main {
    padding: 26px 22px;
  }

  .detail-main > h2 {
    font-size: 24px;
  }

  .contact-form,
  .map-panel,
  .map-box {
    padding: 26px 22px;
  }

  .cta-section {
    padding: 38px 28px;
  }

  .page-top {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
  }

  .footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 44px;
  }

  .footer-nav {
    grid-column: auto;
    grid-template-columns: 1fr 1fr;
  }

  .demo-notice {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 22px;
  }
}

/* 動きを減らす設定：滑らかなスクロールやtransitionを実質的に停止します。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   25. タブレット・スマートフォン用ハンバーガーメニュー
   JavaScriptは使わず、チェックボックスのON/OFFで開閉します。
========================================================= */
/* チェックボックス本体はすべての画面幅で表示しません。
   labelからchecked状態だけを切り替えることで、入力欄へフォーカスが移動して
   ページのスクロール位置が変わる現象を防ぎます。 */
.menu-toggle,
.menu-button {
  display: none;
}

/* 1180px以下では、2段表示になる前にPC用ナビからハンバーガーへ切り替えます。 */
@media (max-width: 1180px) {
  /* header-inner：メニューをヘッダー直下へ絶対配置する基準にします。 */
  .header-inner {
    position: relative;
    width: calc(100% - 28px);
    min-height: auto;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* menu-button：3本線を縦方向に並べた46px四方の操作領域です。 */
  .menu-button {
    width: 46px;
    height: 46px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: none;
    border: 1px solid var(--color-border);
    background-color: #ffffff;
    cursor: pointer;
  }

  /* menu-button__line：3本線。checked時に回転・透明化して×印へ変えます。 */
  .menu-button__line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-brand);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  /* menu-button__text：「メニュー」の文字は読み上げ用に残して視覚的に隠します。 */
  .menu-button__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* キーボードでチェックボックスへ移動したとき、隣のlabelに外枠を表示します。 */
  .menu-toggle:focus-visible + .menu-button {
    outline: 3px solid rgba(185, 148, 69, 0.72);
    outline-offset: 3px;
  }

  /* 1本目と3本目を回転し、2本目を透明にして×印を作ります。 */
  .menu-toggle:checked + .menu-button .menu-button__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle:checked + .menu-button .menu-button__line:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle:checked + .menu-button .menu-button__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* 切り替え後は補助情報を隠し、ロゴ左・メニューボタン右の位置を一定にします。 */
  .header-contact,
  .header-button {
    display: none;
  }

  /* global-nav：閉じた状態は高さ0・非表示。ヘッダー直下へ配置します。 */
  .global-nav {
    position: absolute;
    left: -14px;
    right: -14px;
    top: 100%;
    width: auto;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background-color: #ffffff;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 18px 30px rgba(20, 53, 36, 0.12);
    transition: max-height 0.25s ease, opacity 0.2s ease;
  }

  /* checkboxがcheckedのときだけ、後続兄弟（~）のナビを開きます。 */
  .menu-toggle:checked ~ .global-nav {
    max-height: 380px;
    visibility: visible;
    opacity: 1;
  }

  /* メニュー項目：Flexboxを縦方向にし、各リンクを1列で表示します。 */
  .global-nav ul {
    width: 100%;
    padding: 8px 22px 12px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* 2項目目以降に区切り線を入れ、現在ページは左線で示します。 */
  .global-nav li + li {
    border-top: 1px solid #eee9dd;
  }

  .global-nav a {
    padding: 11px 2px;
    font-size: 14px;
  }

  .global-nav a::after {
    display: none;
  }

  .global-nav a.is-current {
    padding-left: 12px;
    border-left: 3px solid var(--color-accent);
  }
}


/* =========================================================
   26. 学習ページ
   learning.htmlのコード表、横スクロール、学習手順を整えます。
========================================================= */
/* code：タグ名、属性、プロパティ、値を本文と区別して表示します。 */
code {
  padding: 2px 6px; /* コード文字の周囲に小さな余白を作ります。 */
  color: #173f2b; /* コードをブランドカラー系の濃い緑にします。 */
  background-color: #eef2ed; /* 本文と区別できる薄い緑の背景にします。 */
  border: 1px solid #dbe4dc; /* コード範囲を示す細い枠線です。 */
  border-radius: 2px; /* 枠の角を少しだけ丸めます。 */
  font-family: Consolas, "Courier New", monospace; /* 記号を見分けやすい等幅書体にします。 */
  font-size: 0.92em; /* 周囲の文章より少し小さくします。 */
}

/* learning-status：教材掲載・教材外・使用許可の区分を小さなラベルで示します。 */
.learning-status {
  display: inline-block; /* 行内に置きながら上下左右の余白を持たせます（教材外の値です）。 */
  padding: 3px 9px; /* ラベル文字の周囲に小さな余白を作ります。 */
  color: #ffffff; /* 濃い背景上の文字を白にします。 */
  background-color: var(--color-brand-light); /* 教材掲載は緑色で示します。 */
  border-radius: 2px; /* ラベルの角を少し丸めます。 */
  font-size: 11px; /* 表の本文より小さくします。 */
  font-weight: 700; /* 区分名を読み取りやすく太字にします。 */
  white-space: nowrap; /* 「使用許可」などを途中で改行しません（教材外プロパティです）。 */
}

/* 教材外は金色、使用許可は明るい青緑で区別します。 */
.learning-status--extra {
  color: #3b2d0f; /* 金色背景で読める濃い茶色にします。 */
  background-color: #e1c47c; /* 教材外の補足項目を金色で示します。 */
}

.learning-status--allowed {
  background-color: #2e6f68; /* 使用許可された機能を青緑色で示します。 */
}

/* learning-section：連続する学習表を細い上線で区切ります。 */
.learning-section {
  border-top: 1px solid var(--color-border); /* 前の学習項目との境界を示します。 */
}

/* learning-table-wrap：小画面では表だけを横へスクロールできる箱です。 */
.learning-table-wrap {
  overflow-x: auto; /* 表が画面幅を超えたとき、ページ全体ではなく表だけを横スクロールさせます。 */
  border-radius: 3px; /* 内側の表と同じ角丸にします。 */
  box-shadow: 0 12px 32px rgba(30, 45, 38, 0.07); /* 表を背景から控えめに浮かせます。 */
}

/* learning-table：3列の説明が潰れない最小幅を確保します。 */
.learning-table {
  min-width: 780px; /* 狭い画面ではwrap側の横スクロールを使います。 */
  margin-top: 0; /* 外側のwrapで位置を管理するため、共通表の上余白を消します。 */
}

/* 1列目：タグ名やプロパティ名を読みやすい幅にします。 */
.learning-table th:first-child,
.learning-table td:first-child {
  width: 28%; /* 3列中の約3割を用語列に割り当てます。 */
}

/* learning-code：CSSの1行例を独立したコード見本として見せます。 */
.learning-code {
  margin-top: 24px; /* 見出しとコード見本の間を空けます。 */
  padding: 18px 20px; /* コード見本の内側に読みやすい余白を作ります。 */
  overflow-x: auto; /* 長いコードが小画面ではみ出す場合に横スクロールさせます。 */
  color: #ffffff; /* 濃い背景上の文字を白にします。 */
  background-color: var(--color-brand); /* コード見本を深い緑の背景で強調します。 */
  border-left: 4px solid var(--color-accent); /* 左の金色線で見本だと示します。 */
}

.learning-code code {
  padding: 0; /* 親要素に余白があるため、code自身の余白を消します。 */
  color: inherit; /* 親の白文字を引き継ぎます。 */
  background-color: transparent; /* 親の深緑背景をそのまま見せます。 */
  border: 0; /* 1行例ではcodeの個別枠線を消します。 */
  white-space: nowrap; /* CSSの1行例を途中で折り返しません。 */
}

/* learning-steps：4段階の手順をGridで横並びにします。 */
.learning-steps {
  display: grid; /* 手順カードを行と列で整列します。 */
  grid-template-columns: repeat(4, 1fr); /* 4項目を同じ幅の4列にします。 */
  gap: 18px; /* 手順カード同士の間隔です。 */
}

.learning-steps li {
  min-height: 190px; /* 文章量が違ってもカードの高さをそろえます。 */
  padding: 28px 24px; /* カード内側の余白です。 */
  display: flex; /* 番号代わりの語句と説明を縦に並べます。 */
  flex-direction: column; /* 主軸を上から下へ変更します。 */
  gap: 14px; /* 語句と説明の間隔です。 */
  background-color: var(--color-white); /* カード背景を白にします。 */
  border: 1px solid var(--color-border); /* 手順ごとの境界線です。 */
  border-top: 3px solid var(--color-accent); /* 手順カード上部に金色の印を付けます。 */
  box-shadow: var(--shadow-card); /* ほかのカードと同じ影を付けます。 */
}

.learning-steps strong {
  color: var(--color-brand); /* 各手順の中心語をブランドカラーにします。 */
  font-family: "Noto Serif JP", serif; /* 見出しと同じ明朝体を使います。 */
  font-size: 22px; /* 説明文より大きくします。 */
}

.learning-steps span {
  color: var(--color-sub); /* 説明文を補助色にします。 */
}

/* 1080px以下：4列の手順を2列へ変更します。 */
@media (max-width: 1080px) {
  .learning-steps {
    grid-template-columns: 1fr 1fr; /* タブレットでは2列にします。 */
  }
}

/* 640px以下：手順を1列にし、表のセル余白を少し小さくします。 */
@media (max-width: 640px) {
  .learning-steps {
    grid-template-columns: 1fr; /* スマートフォンでは1列にします。 */
  }

  .learning-steps li {
    min-height: 0; /* 1列では内容に合わせた高さへ戻します。 */
  }

  .learning-table th,
  .learning-table td {
    padding: 14px; /* 小画面で表を見渡しやすい余白にします。 */
  }

  .learning-code {
    padding: 16px; /* 小画面ではコード見本の左右余白を少し狭めます。 */
  }
}


/* =========================================================
   27. お問い合わせページのレイアウト整理
   contact.htmlのフォームと補助情報を、幅・高さ・余白がそろう
   2カラムとして表示し、タブレット以下では1カラムにします。
========================================================= */
/* contact-layout：左のフォームを少し広くし、左右のカード下端をそろえます。 */
.contact-layout {
  gap: 36px; /* フォームと案内カードの間隔を整えます。 */
  align-items: stretch; /* 左右のカードを同じ高さまで伸ばします。 */
}

.contact-layout > .contact-form {
  flex: 1.18; /* 入力欄へ十分な横幅を割り当てます。 */
  min-width: 0; /* 長い入力例があってもカラムからはみ出さないようにします。 */
  padding: 42px; /* フォーム全体の内側余白を均等にします。 */
}

.contact-layout > .contact-side {
  flex: 0.82; /* 電話・アクセス案内をフォームより少し狭い幅にします。 */
  min-width: 0; /* 地図が親要素の幅を押し広げないようにします。 */
}

/* contact-form：説明文、入力欄、注意書き、ボタンの間隔を段階的にそろえます。 */
.contact-form > .eyebrow {
  margin-top: 0; /* カード先頭の英字ラベルに不要な上余白を付けません。 */
}

.contact-form .form-intro {
  max-width: 620px; /* 説明文の1行が長くなりすぎないようにします。 */
  margin-top: 14px; /* 見出しと説明文の距離です。 */
  line-height: 1.9; /* 短い案内文を読みやすくします。 */
}

.contact-form form {
  margin-top: 28px; /* 説明文と最初の入力項目の間隔です。 */
}

.contact-form .form-field {
  margin-top: 0; /* 共通のp要素に付いた上余白をいったん解除します。 */
}

.contact-form .form-field + .form-field {
  margin-top: 20px; /* 2つ目以降の入力項目を同じ間隔で並べます。 */
}

.contact-form input,
.contact-form textarea {
  min-height: 50px; /* すべての入力欄に押しやすく読みやすい高さを確保します。 */
  line-height: 1.65; /* 入力文字と複数行の相談内容を読みやすくします。 */
}

.contact-form textarea {
  min-height: 190px; /* 相談内容を入力しやすい高さにそろえます。 */
}

.contact-form .form-demo-note {
  margin-top: 24px; /* 入力欄とデモ注意書きの間隔です。 */
  line-height: 1.75; /* 小さな注意書きを読みやすくします。 */
}

.contact-form .form-actions {
  margin-top: 18px; /* 注意書きと送信ボタンの間隔です。 */
}

.contact-form .form-submit {
  width: 100%; /* 送信ボタンを入力欄と同じ幅にします。 */
}

.form-submit:disabled:hover {
  transform: none; /* 使用できないデモボタンはhoverしても動かしません。 */
}

/* contact-side：分かれていた写真・電話・地図を1枚のカードとしてまとめます。 */
.contact-side {
  display: flex; /* 写真、電話案内、地図を1つの流れとして並べます。 */
  flex-direction: column; /* 上から写真、電話、地図の順番にします。 */
  overflow: hidden; /* 写真と地図をカードの枠内へ収めます。 */
  background-color: var(--color-white); /* 案内カードの背景を白にします。 */
  border: 1px solid rgba(215, 207, 191, 0.9); /* フォームと同じ濃さの枠線です。 */
  border-radius: 3px; /* フォームと同じ小さな角丸にします。 */
  box-shadow: 0 14px 36px rgba(30, 45, 38, 0.085); /* フォームと同じ奥行きを付けます。 */
}

.contact-side > * + * {
  margin-top: 0; /* 旧レイアウトの箱同士に付いていた余白を解除します。 */
}

.contact-side .contact-side__image {
  display: block; /* 画像下に生じる行内要素の隙間を防ぎます。 */
  width: 100%; /* 案内カードの横幅いっぱいにします。 */
  aspect-ratio: 16 / 10; /* 横長写真にして縦方向の過剰な高さを抑えます。 */
  object-fit: cover; /* 枠内へ余白なく写真を収めます。 */
  border: 0; /* 外側カードが枠を持つため画像自身の枠を消します。 */
  border-radius: 0; /* カード内で写真だけに角丸を付けません。 */
  box-shadow: none; /* 外側カードの影だけを使います。 */
}

.contact-side__body,
.contact-map {
  padding: 30px 32px; /* 電話案内と地図案内の左右余白をそろえます。 */
}

.contact-side__body {
  border-top: 1px solid var(--color-border); /* 写真と電話案内の境界を示します。 */
}

.contact-side__body h2 {
  margin-top: 4px; /* 英字ラベルと見出しを近づけます。 */
  font-size: 28px; /* 右カラム内で大きすぎない見出しサイズです。 */
}

.contact-side__body .contact-tel {
  margin-top: 12px; /* 見出しと電話番号の間隔です。 */
  font-size: clamp(24px, 2.5vw, 32px); /* カラム幅に合わせて電話番号を調整します。 */
  letter-spacing: 0.03em; /* 数字の並びを読みやすくします。 */
}

/* contact-info-list：受付時間と所在地の項目名・内容を整列します。 */
.contact-info-list {
  margin-top: 20px; /* 電話番号と補足情報の間隔です。 */
}

.contact-info-list li {
  padding: 13px 0; /* 各案内項目の上下余白です。 */
  display: flex; /* 項目名と内容を横並びにします。 */
  align-items: flex-start; /* 複数行の住所を上端にそろえます。 */
  gap: 14px; /* 項目名と内容の間隔です。 */
  border-top: 1px solid #eee9dd; /* 各案内項目を細い線で区切ります。 */
}

.contact-info-list strong {
  flex: 0 0 72px; /* 項目名の幅を固定して内容の開始位置をそろえます。 */
  color: var(--color-brand); /* 項目名をブランドカラーにします。 */
  font-size: 13px; /* 補助ラベルとして控えめな大きさにします。 */
}

.contact-info-list span {
  flex: 1; /* 残りの幅を住所や時間の表示に使います。 */
  min-width: 0; /* 長い住所が横へはみ出すのを防ぎます。 */
  color: var(--color-sub); /* 補助情報を落ち着いた文字色にします。 */
  font-size: 13px; /* 右カラム内に収まりやすい大きさです。 */
  line-height: 1.75; /* 住所が2行になっても読みやすくします。 */
}

/* contact-map：カード下部を伸縮可能な地図案内にします。 */
.contact-map {
  flex: 1; /* フォームとの高さ差を地図部分で自然に吸収します。 */
  display: flex; /* 説明文と地図を縦方向へ整列します。 */
  flex-direction: column; /* ラベル、見出し、説明、地図の順に並べます。 */
  border-top: 1px solid var(--color-border); /* 電話案内との境界を示します。 */
}

.contact-map h3 {
  margin-top: 4px; /* 英字ラベルと見出しを近づけます。 */
  color: var(--color-brand); /* 地図案内の見出しをブランドカラーにします。 */
  font-family: "Noto Serif JP", serif; /* ページ内の見出しと書体をそろえます。 */
  font-size: 23px; /* 右カラム用の小見出しサイズです。 */
}

.contact-map > p:not(.eyebrow) {
  margin-top: 10px; /* 見出しと来店説明の間隔です。 */
  color: var(--color-sub); /* 説明文を補助色にします。 */
  font-size: 13px; /* 地図上の説明として控えめにします。 */
  line-height: 1.8; /* 2～3行の説明を読みやすくします。 */
}

.contact-map iframe {
  flex: 1; /* カードの残りの高さへ地図を広げます。 */
  width: 100%; /* 地図を案内欄の横幅いっぱいにします。 */
  min-height: 240px; /* 地図として確認しやすい最低限の高さです。 */
  margin-top: 18px; /* 説明文と地図の間隔です。 */
  border: 0; /* iframeの標準枠線を消します。 */
}

/* 1080px以下：フォームと案内カードを同じ幅の縦並びにします。 */
@media (max-width: 1080px) {
  .contact-layout > .contact-form,
  .contact-layout > .contact-side {
    width: 100%; /* 2つのカードを本文幅いっぱいにします。 */
    flex: auto; /* PC用の左右比率を解除します。 */
  }

  .contact-side .contact-side__image {
    aspect-ratio: 16 / 7; /* 横幅が広いタブレットでは写真の高さを抑えます。 */
  }
}

/* 640px以下：カード内余白と案内情報を小画面向けに整えます。 */
@media (max-width: 640px) {
  .contact-layout {
    gap: 28px; /* フォームと案内カードの縦方向の間隔です。 */
  }

  .contact-layout > .contact-form {
    padding: 28px 22px; /* スマホで入力幅を確保できる余白にします。 */
  }

  .contact-side .contact-side__image {
    aspect-ratio: 16 / 10; /* スマホでは相談スペースの写真を見やすい高さへ戻します。 */
  }

  .contact-side__body,
  .contact-map {
    padding: 24px 20px; /* スマホで案内文の横幅を確保します。 */
  }

  .contact-info-list li {
    flex-direction: column; /* 項目名と内容を上下に並べます。 */
    gap: 4px; /* 項目名と内容を近づけます。 */
  }

  .contact-info-list strong {
    flex-basis: auto; /* PC用の固定幅を解除します。 */
  }

  .contact-map iframe {
    min-height: 220px; /* スマホ画面で地図が大きくなりすぎない高さです。 */
  }
}