@charset "UTF-8";
@font-face {
  font-family: "Predia Mincho Fallback";
  src: url("../fonts/predia-mincho-fallback.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ==========================================================
  Tokens（CSSカスタムプロパティ）
  全ページ共通。JS側からも参照するため :root のまま維持する。
========================================================== */
:root {
  --font-ryumin-times: 'Times New Roman', Times, 'a-otf-ryumin-pr6n', serif;
  --font-tel: var(--font-ryumin-times);
  --font-inquiry: var(--font-ryumin-times);
  /* Trajan Pro 3（Typekit、Semibold=600のみキットに追加）。CONTENTS見出し・
     .pointGrid__catなど英字ラベル用 */
  --font-trajan: 'trajan-pro-3', serif;
  --color-main: #231815; /* images/common/ogp.jpg の実ロゴから抽出 */
  --color-accent: #bd9460; /* images/common/ogp.jpg の実ロゴ（アンダーライン）から抽出 */
  --color-text: #333333;
  --color-bg: #ffffff;
  /* 260901hachiojiaccess.pdf のデザインから抽出したアイボリー背景色。
     .bg-sub（交互セクション背景）用トークン。サイト全体で再利用されます。 */
  --color-bg-sub: #f1eee0;
  --color-border: #e0ddd5;
  /* ACCESSページの導入セクション（ページ見出し直下）用グラデーション。
     260901hachiojiaccess.pdf から抽出。 */
  --c-access-grad-start: #5c6982;
  --c-access-grad-end: #6d5b77;
  /* TOPページ「TIMELESS DESIGN」意匠row（7分割スプレッドセクション）用の
     グラデーション・アクセント色。サイトで使用する紫系背景の参考画像から
     色を抽出（左端→右端の単純な横方向線形グラデーション）。 */
  --c-top-grad-start: #657185;
  --c-top-grad-end: #79677c;
  --c-top-olive: #8d8355;
  --c-top-label: #797c4c;
  /* TOPページ「TIMELESS DESIGN」意匠rowの背景②（.row__col--cream）用、
     淡いピンク系5段グラデーション（確認済みモックアップ timeless-design.html
     から移植。上→下の縦方向グラデーション）。 */
  --c-top-pink-1: #f9f5e6;
  --c-top-pink-2: #f1eae4;
  --c-top-pink-3: #f3e1de;
  --c-top-pink-4: #f9e8dd;
  --c-top-pink-5: #faf5e0;
  /* リュウミンR（Typekit）が読み込めない環境（ローカルプレビュー等）向けに、
     CJK縦書き（tategaki）の字形・句読点位置を正しく持つ明朝体フォールバックを
     厚めに指定。総称ファミリー serif は必ず最後に置くこと。
     ※ var(--font-base) の直後に別フォントを追加連結しても、途中に serif が
     あるとそこで解決が終わってしまい後続は無効になるため、フォールバックは
     必ずこの変数自体の中で完結させる */
  --font-base: 'a-otf-ryumin-pr6n', 'YuMincho', '游明朝体', 'Yu Mincho', '游明朝', 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'MS Mincho', 'Noto Serif CJK JP', serif;
  /* FIXME:サイト方針として、見出し・本文とも明朝タイプ（var(--font-base)）に統一しています*/
  --font-sans: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --pc-width: 1500px;
  --header-height-pc: 100px;
  --header-height-sp: 64px;
  /* --header-nav-height-pc：PC幅ヘッダー直下の横並びグローバルナビ
     （.gHeaderNav、nav.scss参照）の高さ。本文オフセット等は--header-height-pcとの
     合算値（--header-total-height-pc）を使う。SPはハンバーガーの1段構成のため
     --header-height-spのみを使用する。 */
  --header-nav-height-pc: 48px;
  /* --header-nav-badge-gap：.gHeaderNav__list の各項目に付く「NEW」バッジ
     （nav.scss、li.new::before、top: -16px で項目の上にはみ出す形で配置）が
     .gHeader（直上のヘッダー本体）と重ならないよう、.gHeaderNavの上部に確保する
     余白。.gHeaderNavのheight・padding-topと、本文オフセット用の
     --header-total-height-pc/tabの両方に足し込んで整合させている。 */
  --header-nav-badge-gap: 18px;
  --header-total-height-pc: calc(var(--header-height-pc) + var(--header-nav-height-pc) + var(--header-nav-badge-gap));
  /* --header-nav-height-tab：.gHeaderNavが1280px未満（タブレット幅〜PC幅の途中まで）で
     上段6項目・下段5項目の2段組みになる際の高さ（--header-nav-height-pcの2倍＝1行48px×2段）。
     1280px以上で1段（11項目横並び）に戻るため、そこでは--header-nav-height-pcを使う。 */
  --header-nav-height-tab: 96px;
  --header-total-height-tab: calc(var(--header-height-pc) + var(--header-nav-height-tab) + var(--header-nav-badge-gap));
  /* SP固定下部ナビ（.spFixedNav、nav.scss参照）の高さ。#siteFooterのSP時
     padding-bottomはこの値に合わせて算出する（アイコン＋ラベルの実高さより
     余裕を持たせた値。spFixedNav側の内容が変わった場合はここも更新すること） */
  --spfixed-nav-height-sp: 70px;
  /* ヘッダー／グローバルナビ／フッター（黒地セクション）用トークン */
  --c-bg: #141210;
  --c-bg-soft: #1c1a17;
  --c-cream: #f3ede2;
  --c-cream-dim: #cfc6b4;
  --c-gold: #b7975c;
  --c-gold-lt: #93824b;
  --c-line: rgba(243, 237, 226, 0.16);
  /* フッターテンプレート専用トークン。既存の--c-gold（ナビ等のゴールド）とは
     別の色として定義しています。--c-footer-ctaは現在フッター内では未使用ですが、
     他ページから参照される可能性を考慮し残しています。 */
  --c-footer-reserve: #8b0a11; /* 「ご来場予約」「ご来場者様限定ページ」ボタン背景（赤） */
  --c-footer-cta: #f1cd50;
}

/* ==========================================================
  リセット
========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Webフォント読み込み中はシステムフォントで表示（Typekit読み込み中のFOUC対策。
   Adobe Fonts読み込みスクリプトがhtmlへ付与するwf-loadingクラスに対応。
   読み込み完了/タイムアウト後はwf-active/wf-inactiveに置き換わり解除される） */
html.wf-loading body,
html.wf-loading body * {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Predia Mincho Fallback", serif !important;
}

html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

/* iOS Safari等が電話番号・住所等を自動リンク化した際のスタイル抑制
   （本プロジェクトのHTML内には存在しない属性ですが、ブラウザ側が動的に付与するため保持） */
a[x-apple-data-detectors],
a[x-apple-data-detectors-type] {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

main {
  background: #fff !important;
}

img {
  display: block;
  vertical-align: bottom;
  width: 100%;
  /* width:100%化に伴う縦横比崩れ防止。個別に幅を指定したい画像（ロゴ等）は、
     より詳細度の高いクラス指定でwidth/heightを上書きしてください
     （既存の .gHeader__logo img 等と同様）。 */
  height: auto;
}

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

ul,
ol {
  list-style: none;
}

/* slick（TOPページのMVスライダーで使用）の初期化時にJSが自動付与するクラス */
.slick-dots,
.slick-dots li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.slick-dots li button:before {
  color: transparent !important;
  display: none;
}

/* ==========================================================
  ベース（フォント指定等）
========================================================== */
html {
  background: #fff !important;
  background-color: #fff !important;
  -webkit-text-size-adjust: 100%;
  font-size: 87.5%;
  scroll-behavior: smooth;
  font-family: var(--font-base);
  /* ハンバーガーメニューを開くとbody.menu-open{overflow:hidden}
     （scss/nav.scss参照）で縦スクロールバーが消え、その分だけビューポート幅が
     広がって固定ヘッダー等の横位置がガタつく（開閉でズレる）現象への対応。
     スクロールバー表示・非表示にかかわらず常にその分の余白を確保 */
  scrollbar-gutter: stable;
}

button {
  font-family: var(--font-base);
  font-weight: 300;
  font-style: normal;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* フォント（ベース）＋ 本プロジェクト固有の上書き */
body {
  font-family: var(--font-base);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt";
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* 固定ヒーロー画像（.heroFixed。下記参照）を左右1pxずつはみ出させて隙間を隠しているため、
     横スクロールバーが出ないようここで吸収しています。 */
  overflow-x: hidden;
  line-height: 1.8;
  font-size: 14px;
  /* ヘッダーが常時ソリッド背景の固定ヘッダーのため、その高さ分だけ本文を下にずらし、
     各ページ先頭のMV／見出しがヘッダーの下に埋もれないようにしています。 */
  padding-top: var(--header-height-sp);
}
@media (min-width: 769px) {
  body {
    /* PC幅はヘッダー本体＋横並びナビ(.gHeaderNav)の2段構成のため、
       本文の押し下げ量は合算値を使用。769〜1279pxは.gHeaderNavが上段6項目・
       下段5項目の2段組み（--header-total-height-tab）、1280px以上は1段
       （--header-total-height-pc）に戻る（nav.scss参照） */
    padding-top: var(--header-total-height-tab);
  }
}
@media (min-width: 769px) and (min-width: 1280px) {
  body {
    padding-top: var(--header-total-height-pc);
  }
}

sup {
  font-size: 12px;
  vertical-align: text-top;
  letter-spacing: 0;
}

/* ==========================================================
  動作（hover）
  ※サイト全体のa/buttonに適用される汎用hoverです。より詳細度の高い
    個別クラスのhover指定（.more-link a:hover 等）はそちらが優先されます。
========================================================== */
a:hover,
button:hover {
  opacity: 0.5;
  transition: 0.5s;
}

a:hover img,
button:hover img {
  opacity: 0.5;
  transition: 0.5s;
}

/* ==========================================================
  PC / SP 出し分け
========================================================== */
.pc {
  display: block;
}

.sp {
  display: none;
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* PC／SP出し分け用の改行ユーティリティ（br.pc / br.sp） */
br.sp {
  display: none;
}

@media (max-width: 768px) {
  br.pc {
    display: none;
  }
  br.sp {
    display: inline;
  }
}
/* ==========================================================
  視覚的に隠すが読み上げ・SEOには読ませるユーティリティ（.sr-only）
  用途：header.html／footer.htmlが共通パーツのため見た目上のh1がページごとに
  出せない下層ページで、.pageIntro__title（h1）に物件名・ページ名を
  補足するために使用（見た目は英字ラベルのみ表示） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
  画像キャプション（メインビジュアル右下等に使用）
========================================================== */
.relative {
  position: relative;
}

.imgcap {
  text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px;
  color: #fff;
  font-size: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 3px 5px;
  align-self: flex-start;
  z-index: 1;
}
.imgcap.l {
  right: unset;
  left: 0;
}
.imgcap.bl {
  text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px;
  color: #000;
}
.imgcap.n {
  display: flex;
  align-items: center;
  bottom: -10px;
}
.imgcap.n img {
  width: 30px;
  margin-left: 1em;
}
@media (max-width: 768px) {
  .imgcap.n img {
    width: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================================
  ここから下：旧 style.css の「複数ページ共通」部分を移設
============================================================ */
/* ------------------------------------------------------------
  レイアウト共通
------------------------------------------------------------ */
.inner {
  max-width: var(--pc-width);
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 768px) {
  .inner {
    padding: 0 20px;
  }
}

/* ------------------------------------------------------------
  プレースホルダー画像（gaiyo.htmlの間取り図で使用）
------------------------------------------------------------ */
.ph-img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #eee, #eee 12px, #e2e2e2 12px, #e2e2e2 24px);
  border: 1px dashed #b3b3b3;
  color: #777;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
}
.ph-img span {
  display: block;
}
.ph-img.ratio-4-3 {
  aspect-ratio: 4 / 3;
}

/* ------------------------------------------------------------
  スクロールインアニメーション（common.js の .slidein / .scrollin と対応）
------------------------------------------------------------ */
.slidein {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.slidein.scrollin {
  opacity: 1;
  transform: translateY(0);
}

/* .slideinと同じ仕組み（common.js側でIntersectionObserverがビューポート進入を検知）
   だが、トリガークラスが.scrollinではなく.active、transitionが1s（.slideinは0.8s）。
   使い分けは任意ですが、既存セクションは.slideinのままにし、.fadeInは
   新規箇所から使う想定です。 */
.fadeIn {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.fadeIn.active {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
  一文字ずつのフェードイン（fx-chars）
  ------------------------------------------------------------

  JS本体はjs/common.js（GSAP／ScrollTriggerのCDN読み込みを前提とし、
  未読み込みのページでは何もしないようガードしています）。
  displayのみ!importantを付けているのは、ページ側に
  「span { display: block; }」等の要素セレクタがあると詳細度で負けて
  文字が縦積みになってしまうのを防ぐためです。opacity/transform/filterは
  JS(GSAP)側がインラインstyleで書き換えるため、!importantを付けると
  アニメーションが動かなくなります。 */
.fx-chars__char {
  display: inline-block !important;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
}

.no-anim .fx-chars__char {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ------------------------------------------------------------
  共通見出し・セクション
------------------------------------------------------------ */
section {
  padding: 60px 0;
}
@media (min-width: 769px) {
  section {
    padding: 100px 0;
  }
}
section.bg-sub {
  background-color: var(--color-bg-sub);
  background-image: var(--bg-texture);
  background-repeat: repeat;
}

.section-title {
  font-family: var(--font-base);
  font-size: 26px;
  text-align: center;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  color: var(--color-main);
}
.section-title .en {
  display: block;
  font-size: 12px;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
  font-family: var(--font-sans);
}

.section-lead {
  text-align: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 40px;
}

@media (min-width: 769px) {
  .section-title {
    font-size: 34px;
  }
  .section-lead {
    font-size: 15px;
  }
}
/* パンくず */
/* FIXME:bulma.css が独自の .breadcrumb コンポーネント（a { display:flex; justify-content:center } 等）を
   持っており、同名クラスのままだとレイアウトが崩れるため .pageCrumb に変更しています。 */
.pageCrumb {
  font-size: 12px;
  color: #888;
  padding: 16px 0;
}
.pageCrumb a {
  color: var(--color-main);
}
.pageCrumb a:hover {
  text-decoration: underline;
}

/* ページ導入見出し（グラデーション背景＋大見出し。写真の無いページ用）
   ACCESS／OUTLINE／MAPページで同じ配置で使う共通コンポーネントです。
   タイトル（__title）には Typekit「meno-banner」を指定しています（3ページ共通）。
   使い方：
     <section class="pageIntro has-bg" data-mv>
       <div class="inner">
         <p class="pageCrumb pageCrumb--light">...</p>
         <h1 class="pageIntro__title">ACCESS</h1>
         <p class="pageIntro__catch">...</p>
         <p class="pageIntro__lead">...</p>
       </div>
     </section> */
.pageIntro {
  background-color: #be9461;
  color: #fff;
  padding: 30px 0;
  text-align: center;
}
@media (min-width: 769px) {
  .pageIntro {
    padding: 40px 0;
  }
}
.pageIntro__title {
  font-family: "meno-banner", serif;
  font-weight: 800;
  font-style: normal;
  font-size: 30px;
  letter-spacing: 0.3em;
  text-align: center;
}
@media (min-width: 769px) {
  .pageIntro__title {
    font-size: 40px;
  }
}
.pageIntro__title span {
  display: block;
  font-size: 14px;
  font-weight: 400;
}
.pageIntro__catch {
  font-family: var(--font-base);
  font-size: 15px;
  letter-spacing: 0.26em;
  line-height: 1.9;
  margin: 0 0 18px;
}
.pageIntro__lead {
  font-size: 12px;
  line-height: 2.25;
  letter-spacing: 0.36em;
  color: #fff;
  max-width: 760px;
  margin: 0 auto 40px;
}
@media (min-width: 769px) {
  .pageIntro__catch {
    font-size: 20px;
  }
  .pageIntro__lead {
    font-size: 14px;
    margin-bottom: 56px;
  }
}

.pageCrumb--light {
  color: rgba(255, 255, 255, 0.75);
}
.pageCrumb--light a {
  color: #fff;
}

/* ページ見出し（下層ページ共通。写真つきページで使用） */
.page-heading {
  background: var(--color-bg-sub);
  text-align: center;
  padding: 50px 20px;
}
.page-heading h1 {
  font-family: var(--font-base);
  font-size: 28px;
  letter-spacing: 0.08em;
  color: var(--color-main);
  margin: 0 0 8px;
}
.page-heading .en {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
@media (min-width: 769px) {
  .page-heading h1 {
    font-size: 36px;
  }
}
.page-heading.has-photo {
  /* ページ見出し：背景写真つき */
  position: relative;
  background: var(--color-main);
  padding: 0;
  overflow: hidden;
}
.page-heading.has-photo img {
  width: 100%;
  aspect-ratio: 1500 / 480;
  object-fit: cover;
}
@media (max-width: 768px) {
  .page-heading.has-photo img {
    aspect-ratio: 375 / 260;
  }
}
.page-heading.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(35, 24, 21, 0.35), rgba(35, 24, 21, 0.65));
}
.page-heading.has-photo .heading-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.page-heading.has-photo h1 {
  color: #fff;
}

/* ============================================================
  赤グラデーションCTAボタン（「エントリーはこちら」等）
  以前は top.scss / plan.scss にそれぞれ同じ内容が重複定義されていた
  共通パーツのため、2026.09.26にこちらへ統合しました。
  色違いバリエーション（.btn_bg_gold 等）は使用するページ側のscssに残しています。
============================================================ */
.btn_bg {
  padding: 10px 0;
  margin: 0 auto;
  /* 角丸の設定 */
  border-radius: 8px;
  /* 1. ベースの赤グラデーション（真ん中をわずかに明るく） */
  background: radial-gradient(circle at center, #9e191e 0%, #831014 100%);
  /* 2 & 3. 複数のbox-shadowを重ねて立体的な「フチ」と「影」を同時に作る */
  box-shadow: inset 0 7px 7px 0 rgba(255, 255, 255, 0.25), inset 0 -6px 10px -2px rgba(0, 0, 0, 0.65), inset 0 0 12px 2px rgba(0, 0, 0, 0.45), 0 2px 4px 0 rgba(0, 0, 0, 0.15);
  text-align: center;
  color: #fff;
  max-width: 400px;
  width: 100%;
  font-size: 1.4rem;
  letter-spacing: 0.16em;
}

.btn_bg_gold {
  background: radial-gradient(circle at center, #8a7c2e 0%, #766925 100%);
}

.btn_bg_gray {
  background: radial-gradient(circle at center, #b5b6b8 0%, #a4a5a7 100%);
}

@media (max-width: 768px) {
  .btn_bg .spFixedNav__icon {
    width: 20px;
    height: 20px;
  }
}
.btn_bg .spFixedNav__icon + span {
  font-size: 1.143rem;
}

.entryGuide__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* もっと見るリンク */
.more-link {
  display: block;
  text-align: center;
  margin-top: 32px;
}
.more-link a {
  display: inline-block;
  padding: 14px 48px;
  border: 1px solid var(--color-main);
  color: var(--color-main);
  font-size: 13px;
  letter-spacing: 0.1em;
  transition: background 0.3s ease, color 0.3s ease;
}
.more-link a:hover {
  background: var(--color-main);
  color: #fff;
}/*# sourceMappingURL=common.css.map */