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

/* =========================
   共通レイアウト
   ========================= */

/* 全体の共通幅（ヘッダーなどで使用） */
body {
	font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
	font-weight: 300;
	font-style: normal;
}

img {
	max-width: 100%;
	height: auto;
}
a,
a img {
  transition: opacity 0.4s ease, filter 0.4s ease;
}

/* =========================
   ヘッダー
   ========================= */

header {
  max-width: 1200px;           /* コンテンツ最大幅 */
  margin: 0 auto;              /* 中央寄せ */
  padding: 10px 0;             /* 上下の余白 */
  display: flex;
  align-items: center;         /* 縦方向センター */
  justify-content: space-between;
}

/* ロゴ */
header .logo {
  flex-shrink: 0;
}

header .logo img {
  display: block;
  height: 40px;                /* デザインに合わせて調整 */
  width: auto;
}

/* グローバルナビ（右側） */
header > ul {
  display: flex;
  align-items: center;
  gap: 24px;                   /* 各メニューの間隔 */
  list-style: none;
}

header > ul li {
	line-height: 100%;
}

/* テキストメニュー（物件概要／現地案内図） */
header > ul li a {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #2b2118;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
	line-height: 100%;
}

header > ul li a span {
  display: inline-block;
  margin-right: 4px;           /* ▶ と文字の間隔 */
  font-size: 11px;
}

/* 画像ボタン・TELアイコン（資料請求／来場予約／電話） */
header > ul li a img {
  display: block;
  height: 32px;                /* デザインに合わせて調整 */
  width: auto;
}

/* ホバー時（PC用） */
header > ul li a:hover {
  opacity: 0.8;
}

/* =========================
   グローバルナビ
   ========================= */

.global-nav {
  width: 100%;
  background: linear-gradient(90deg, #3b3045, #000); /* 上部の濃いグラデーション帯 */
}

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

.global-nav__inner ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  list-style: none;
}

.global-nav__inner ul li {
  flex: 1 1 0;
  text-align: center;
  position: relative;
}

/* 左端以外の区切り線 */
.global-nav__inner ul li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background-color: rgba(255, 255, 255, 0.4);
}

.global-nav__inner ul li a {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  letter-spacing: 0.15em;
  color: #ffffff;
  text-decoration: none;
}

/* ホバー時のトーン変化（PC） */
.global-nav__inner ul li a:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.global-nav__inner ul li a.nl {
	color:#6B6B6B;
}

/* =========================
   資料請求／来場予約 CTA
   ========================= */

.cta-block {
  padding: 80px 0 60px;
  background-color: #ffffff;
}

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

/* ボタン２つを中央に横並び */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 80px;               /* ボタン間の間隔 */
  margin-bottom: 40px;
}

.cta-buttons__item img {
  display: block;
  height: 70px;            /* デザインに合わせて調整可 */
  width: auto;
}

/* 注意文 */
.cta-note {
  max-width: 1000px;        /* テキスト幅をやや狭める */
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
  color: #333333;
  text-align: left;
}

/* =========================
   フッターリンク
   ========================= */

.footer-nav {
  width: 100%;
  background: linear-gradient(90deg, #3b3045, #000); /* ご指定のグラデーション */
  color: #ffffff;
	font-family: "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3",
               "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.footer-nav__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 0 36px;
  display: flex;
  justify-content: space-between;
  column-gap: 80px;
  font-size: 11px;
}

/* 各グループ（左：物件／右：会社） */
.footer-nav__group {
  flex: 1 1 0;
}

.footer-nav__title {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: 0.12em;
}

/* グループ内のカラム配置 */
.footer-nav__cols {
  display: flex;
  column-gap: 40px;
}

.footer-nav__cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav__cols li {
  margin-bottom: 6px;
}

/* 矢印付きテキストリンク */
.footer-nav__cols a {
  position: relative;
  display: inline-block;
  padding-left: 14px;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.08em;
	line-height: 100%;
}

.footer-nav__cols a::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  line-height: 1.6;
}

/* ホバー時（PC） */
.footer-nav__cols a:hover {
  opacity: 0.8;
}

.footer-nav__cols a.nl {
	color: #6A6A6A !important;
}

.footer-nav a {
	color: #FFF;
	font-size: 100%;
}

/* =========================
   フッター：ロゴ＆コピーライト
   ========================= */

.footer-bottom {
  background-color: #ffffff;
  color: #000000;
  padding: 24px 0 40px;
  /* 下段もゴシック系に */
  font-family: "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3",
               "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

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

/* ロゴ3ブロック並び */
.footer-bottom__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 40px;
  margin-bottom: 10px;
}

.footer-bottom__logo-main,
.footer-bottom__logo-just,
.footer-bottom__tel img {
  display: block;
  height: 60px;          /* 必要に応じて微調整してください */
  width: auto;
}

/* JUST ロゴだけ少し小さめにしたい場合はコメント解除
.footer-bottom__logo-just {
  height: 50px;
}
*/

/* 電話ブロック（テキスト＋画像） */
.footer-bottom__tel {
  text-align: left;
}

.footer-bottom__tel-lead {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* コピーライト */
.footer-bottom__copy {
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
}


/* =========================
   ハンバーガー共通
   ========================= */

.nav-toggle {
  display: none; /* PCでは非表示 */
}

@media (min-width: 769px) {
	.sp {
		display: none;
	}
}

/* =========================
   SPレイアウト
   ========================= */

@media (max-width: 768px) {

  /* ヘッダー：ロゴ左＋ハンバーガー右上 */
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    max-width: none;
    padding: 10px 16px;
    background: #ffffff;      /* 下のコンテンツが透けないように */
  }
  body {
    padding-top: 64px;        /* ヘッダーの高さに合わせて調整 */
  }

  /* ヘッダー右側のリンクは SP では使わない */
  header .header-links {
    display: none;
  }

  /* ハンバーガーボタン */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    position: absolute;
    right: 16px;
    top: 18px;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    height: 2px;
    background: #2b2118;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* グローバルナビ本体 */
  .global-nav {
    display: none; /* デフォルトは閉じる（JSで .nav-open を付けた時に表示） */
    position: fixed;
    top: 64px;            /* ヘッダー高さと揃える */
    left: 0;
    right: 0;
    z-index: 900;
    background: linear-gradient(90deg, #3b3045, #000);
  }

  body.nav-open .global-nav {
    display: block;
  }

  .global-nav__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 8px 16px 16px;
    max-height: calc(100vh - 64px);  /* 画面下までスクロール可能に */
    overflow-y: auto;
    font-family: "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3",
                 "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* ===== 上段：グローバルナビ（ロケーション〜クオリティ） ===== */

  .global-nav__inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;           /* PC の flex を解除 → 縦並びに */
  }

  .global-nav__inner ul li {
    position: static;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  /* 左の縦ボーダーを消す */
  .global-nav__inner ul li + li::before {
    content: none !important;
  }

  .global-nav__inner ul li a {
    display: block;
    padding: 12px 0;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .global-nav__inner ul li a:hover {
    opacity: 0.8;
  }

  /* ===== 下段：物件概要〜来場予約（.sp の li） ===== */

  /* SP 専用 li を表示・2カラムレイアウトに */
  .global-nav__list .sp {
    display: inline-block;
    width: 46%;
	  border: #575757 solid 1px;
	  margin: 5px;
  }

  /* 最初の .sp グループの手前だけ線を入れて区切りに */
  .global-nav__list .sp:first-of-type {
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .global-nav__list .sp a {
    padding: 8px 0;
    font-size: 13px;
  }

  /* ===== 最下段：電話番号（div.sp） ===== */

  .global-nav__inner > .sp {
    display: block;
    text-align: center;
    margin-top: 8px;
  }

  .global-nav__inner > .sp img {
    display: block;
    margin: 4px auto 0;
    max-width: 100%;
    height: auto;
    filter: invert(1);   /* 暗い背景で見えるように反転 */
  }
	
  /* ===== 資料請求／来場予約 CTA（SP） ===== */

  .cta-block {
    padding: 40px 0 32px;        /* 上下の余白を少し詰める */
  }

  .cta-block__inner {
    max-width: none;             /* 幅制限を解除して */
    padding: 0 16px;             /* 画面左右に16pxの余白 */
    box-sizing: border-box;
  }

  /* ボタンは縦並び＆中央寄せ */
  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 16px;                   /* ボタン同士の間隔 */
    margin-bottom: 24px;
  }

  .cta-buttons__item img {
    height: 56px;                /* 少しだけ小さめに */
    width: auto;
  }

  /* 注意文：スマホで読みやすい文字サイズと行間に */
  .cta-note {
    max-width: none;
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    text-align: left;
  }
	

/* ===== フッターリンク（SP） ===== */
.footer-nav__inner {
  max-width: none;
  padding: 24px 16px 28px;
  box-sizing: border-box;
  flex-direction: column;   /* 左右2カラム → 上下に積む */
  row-gap: 24px;
  font-size: 12px;
}

.footer-nav__group {
  width: 100%;
}

.footer-nav__title {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-align: left;
}

/* ▼ リンク部分を2段組にする ▼ */
.footer-nav__cols {
  display: block;
  column-count: 2;          /* 2列に分割 */
  column-gap: 32px;         /* 列間の余白 */
}

.footer-nav__cols ul {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  break-inside: avoid;      /* リスト途中で列をまたがないように */
}

.footer-nav__cols li {
  margin: 0 0 4px;
}
/* ▲ ここまで2列指定 ▲ */

.footer-nav__cols a {
  position: relative;
  display: inline-block;
  padding-left: 12px;       /* ▶ の分だけ少し左余白 */
  color: #ffffff;
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.footer-nav__cols a::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  line-height: 1.6;
}
	
.footer-nav__cols a.nl {
	color: #6A6A6A !important;
}

  /* ===== フッター下段（ロゴ＋TEL＋コピーライト／SP） ===== */

  .footer-bottom {
    padding: 28px 0 32px;
  }

  .footer-bottom__inner {
    max-width: none;
    padding: 0 16px 0;
    box-sizing: border-box;
  }

  /* ロゴ類は縦並びセンター */
  .footer-bottom__logos {
    flex-direction: column;
    align-items: center;
    row-gap: 18px;
    margin-bottom: 18px;
  }

  .footer-bottom__logo-main,
  .footer-bottom__logo-just {
    height: 52px;          /* ← 40px → 52px にアップ */
    width: auto;
  }

  /* 電話ブロック */
  .footer-bottom__tel {
    text-align: center;
  }

  .footer-bottom__tel-lead {
    margin: 0 0 6px;
    font-size: 12px;       /* 少し大きく */
    letter-spacing: 0.08em;
  }

  .footer-bottom__tel img {
    display: block;
    margin: 0 auto;
    max-width: 280px;      /* 電話画像自体を少し大きめに */
    width: 100%;
    height: auto;
  }

  /* コピーライト */
  .footer-bottom__copy {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: center;
  }

}

/* =========================
   スクロール時フェードイン
   ========================= */

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

/* 画面内に入った状態 */
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 動画酔い対策：モーション軽減指定の人にはアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================
   上に戻るボタン
   ========================= */

.page-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background-color: #20253a;
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-top:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .page-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top {
    transition: none;
  }
}