/* ========================================================================== style.css ICHIE NO YADO ー デザイントークン（色・文字・余白の基準値）と全体の土台。 色の値の根拠は README.md の「Design Tokens」。 #655641 より薄い色を明るい背景の上で使わないこと（コントラスト基準 約4.5:1を下回るため）。 文字サイズについて：README確定値は小さめ（11〜13px中心）だったが、27インチ4K／ 24インチFullHDなど大きめのモニターで実際に読みづらいとのフィードバックを受け、 本文・ラベル系を中心に全体を引き上げている（クライアント確認済みの確定値からの 意図的な変更点。文字間隔(letter-spacing)や行間の比率など、デザインの雰囲気は 維持したままサイズだけを調整した）。 フォントについて：和文（Shippori Mincho）・欧文（Cormorant Garamond）ともに Google Fontsは使用しない。理由は、外部サーバーへの通信を待たずに済むぶん 表示が速く安定すること、通信環境が悪くても文字化け・フォント欠落が起きない ことの2点。そのため assets/fonts/ に置いたローカルのWOFF2ファイルを、 下の @font-face でこのファイル自身が直接読み込んでいる。 ウェイトの使い分け方針（和文・欧文とも同じ3段構成）： 和文 Shippori Mincho（400 / 500 / 700 の3ファイルのみを使用） 400 Regular … ヒーロー見出し・セクション大見出し・イントロ本文など 「大きく見せる」文字。太くしすぎず明朝体の繊細さと余韻を残す 500 Medium … 本文・説明文など「読ませる」文字（bodyの既定値）。 400だと細く見えやすく、700だとやや重くにじんで見えるため、 長文の可読性は500がちょうどよいバランスになる 700 Bold … ナビ・CTA・ボタン・カードタイトル・フォームラベルなど、 短くて操作に関わる重要な文字。長文の本文には使わない 欧文 Cormorant Garamond（400 / 500 / 700 の3ファイルのみを使用） 400 Regular … 大きめの英字見出し・装飾的な英字・数字を美しく見せる箇所 500 Medium … ABOUT / WELCOME などの小さい英字ラベル（400だと細く見えるため） 700 Bold … JP/EN切替・カレンダー数字・料金表示など視認性が必要な英字 （コピーライトなど控えめに見せたい箇所は700にしない） 「大きな見出しは400・本文は500・UIや短い重要文字は700」という考え方は 和文・欧文で共通。ItalicやLightのウェイトは今回使用していない。 font-synthesis: none によりブラウザ側の疑似太字生成を無効化し、 必ず上記の実ウェイトファイルだけを使用する（無いウェイトを勝手に太らせない）。 日本語本文のletter-spacingについて：本文は0.02em〜0.04em程度（このファイルでは 0.03emに統一）にとどめている。見出しのように広げすぎると、長文では文字と文字の 間が間延びして読みにくくなるため、本文だけは字間を締めている。 フォントサイズについて：html { font-size: 100%; }（=16px）を基準に、 font-sizeはpxではなくremで指定している（16px = 1rem。例: 15px = 0.9375rem）。 line-heightは単位なし（例: line-height: 2.2）、letter-spacingは元のem指定を そのまま維持している。 ========================================================================== */ /* @font-face … 和文フォント（Shippori Mincho）をローカルのWOFF2から読み込む。 ウェイトごとに別ファイルなので、font-weightをそれぞれ指定して束ねている */ @font-face { font-family: "Shippori Mincho"; /* --font-jp から参照する名前 */ src: url("/assets/fonts/ShipporiMincho-400.woff2") format("woff2"); /* Regular実体ファイル */ font-weight: 400; /* このファイルが担当するウェイト */ font-style: normal; /* 斜体ではない通常書体 */ font-display: swap; /* 読み込み中はフォールバック体で即表示し、後で差し替える */ } @font-face { font-family: "Shippori Mincho"; /* --font-jp から参照する名前 */ src: url("/assets/fonts/ShipporiMincho-500.woff2") format("woff2"); /* Medium実体ファイル */ font-weight: 500; /* このファイルが担当するウェイト */ font-style: normal; /* 斜体ではない通常書体 */ font-display: swap; /* 読み込み中はフォールバック体で即表示し、後で差し替える */ } @font-face { font-family: "Shippori Mincho"; /* --font-jp から参照する名前 */ src: url("/assets/fonts/ShipporiMincho-700.woff2") format("woff2"); /* Bold実体ファイル */ font-weight: 700; /* このファイルが担当するウェイト */ font-style: normal; /* 斜体ではない通常書体 */ font-display: swap; /* 読み込み中はフォールバック体で即表示し、後で差し替える */ } /* @font-face … 欧文フォント（Cormorant Garamond）をローカルのWOFF2から読み込む */ @font-face { font-family: "Cormorant Garamond"; /* --font-en から参照する名前 */ src: url("/assets/fonts/CormorantGaramond-400.woff2") format("woff2"); /* Regular実体ファイル */ font-weight: 400; /* このファイルが担当するウェイト */ font-style: normal; /* 斜体ではない通常書体 */ font-display: swap; /* 読み込み中はフォールバック体で即表示し、後で差し替える */ } @font-face { font-family: "Cormorant Garamond"; /* --font-en から参照する名前 */ src: url("/assets/fonts/CormorantGaramond-500.woff2") format("woff2"); /* Medium実体ファイル */ font-weight: 500; /* このファイルが担当するウェイト */ font-style: normal; /* 斜体ではない通常書体 */ font-display: swap; /* 読み込み中はフォールバック体で即表示し、後で差し替える */ } @font-face { font-family: "Cormorant Garamond"; /* --font-en から参照する名前 */ src: url("/assets/fonts/CormorantGaramond-700.woff2") format("woff2"); /* Bold実体ファイル */ font-weight: 700; /* このファイルが担当するウェイト */ font-style: normal; /* 斜体ではない通常書体 */ font-display: swap; /* 読み込み中はフォールバック体で即表示し、後で差し替える */ } /* .en … 英字部分に明示的にCormorant Garamondを当てたいときに使う汎用クラス。 既存要素の多くは var(--font-en) を直接指定済みだが、今後の追加要素向けに用意 */ .en { font-family: "Cormorant Garamond", serif; /* 欧文フォントを直接指定 */ } /* :root … サイト全体で使う色・文字・余白の変数（デザイントークン）をまとめて定義 */ :root { /* 背景色 */ --color-bg-main: #EFE7D9; /* サイト全体のメイン背景（生成りベージュ） */ --color-bg-section: #E9DFCD; /* セクションを少し濃い色にしたいときの背景（一段濃いベージュ） */ --color-bg-card: #F6F0E4; /* カードや入力欄など、一段明るい背景 */ --color-bg-dark: #211D18; /* 予約セクション・フッターなどの暗い背景（墨色） */ --color-bg-dark-card: #2C261F; /* 暗い背景の中でさらにカードを目立たせる背景 */ /* ブランドカラー・強調色 */ --color-brand: #8C5A32; /* CTAボタンやリンクのブランドブラウン */ --color-brand-hover-dark: #6F4526; /* ブラウンボタンのホバー時（暗い背景の上） */ --color-brand-hover-light: #A3693B; /* ブラウンボタンのホバー時（明るい背景の上） */ --color-accent-gold: #C3A079; /* 番号・料金など強調したい文字のゴールド */ /* 明るい背景の上で使う文字色 */ --color-text-strong: #211D18; /* 一番濃い文字色（見出しなど） */ --color-text-base: #3A3128; /* 標準的な文字色 */ --color-text-base-2: #4A4038; /* 標準的な文字色（本文用のやや違う濃さ） */ --color-text-soft: #5C5044; /* 少し薄い文字色（説明文など） */ --color-text-muted: #655641; /* コントラスト基準ギリギリの薄さ。これより薄くしないこと */ /* 暗い背景の上で使う文字色 */ --color-text-on-dark: #F2EADC; /* 暗い背景の上のメイン文字色 */ --color-text-on-dark-2: #E7DCC9; /* 暗い背景の上のメイン文字色（フッター用） */ --color-text-on-dark-muted: #B4A48C; /* 暗い背景の上の補助文字色 */ --color-text-on-dark-muted-2: #A3957F; /* 暗い背景の上の補助文字色（フッター用） */ --color-text-on-dark-muted-3: #8E8271; /* 暗い背景の上のさらに薄い補助文字色 */ --color-text-on-dark-muted-4: #8A7C68; /* 暗い背景の上の一番薄い補助文字色（コピーライト等） */ /* 罫線の色 */ --border-light: rgba(33, 29, 24, .08); /* 明るい背景の上の薄い罫線 */ --border-light-strong: rgba(33, 29, 24, .14); /* 明るい背景の上の少し濃い罫線 */ --border-dark: rgba(242, 234, 220, .14); /* 暗い背景の上の罫線 */ --border-dark-2: rgba(231, 220, 201, .14); /* 暗い背景の上の罫線（フッター用） */ /* 予約カレンダーの状態別カラー */ --color-cal-available-bg: #F6F0E4; /* 空室ありセルの背景 */ --color-cal-available-text: #4A4038; /* 空室ありセルの文字色 */ --color-cal-few-bg: #F0E3CD; /* 残りわずかセルの背景 */ --color-cal-few-text: #8C5A32; /* 残りわずかセルの文字色 */ --color-cal-full-bg: #E4DAC7; /* 満室セルの背景 */ --color-cal-full-text: #9C8F7B; /* 満室セルの文字色 */ /* フォント */ --font-jp: "Shippori Mincho", serif; /* 和文用フォント（ローカルWOFF2） */ --font-en: "Cormorant Garamond", serif; /* 欧文・数字用フォント（ローカルWOFF2） */ /* レイアウトの基準値 */ --container-max: 1180px; /* コンテンツの最大幅 */ --container-max-narrow: 820px; /* イントロなど、狭めのコンテンツ幅 */ --container-pad: clamp(20px, 5vw, 40px); /* コンテナの左右余白 */ --section-pad-y: clamp(64px, 10vw, 124px); /* セクションの上下余白 */ --header-height: 47px; /* ヘッダーの高さ（アンカー移動時のズレ調整に使用） */ } * { box-sizing: border-box; } /* 全要素の幅計算にpaddingとborderを含める（サイズがずれないようにする） */ /* html … remの基準（1rem=16px）とページ内スムーススクロールの設定 */ html { font-size: 100%; /* ブラウザの既定フォントサイズ（通常16px）をそのままremの基準にする */ scroll-behavior: smooth; /* #idへのジャンプをカクッとではなく滑らかに動かす */ } /* body … ページ全体の基本フォント・文字色・背景の初期設定 */ body { margin: 0; /* ブラウザ標準の余白を消す */ background: var(--color-bg-main); /* サイト全体の背景色 */ color: var(--color-text-strong); /* サイト全体の基本文字色 */ font-family: var(--font-jp); /* 基本フォントは和文明朝体 */ font-weight: 500; /* 「読ませる文章」の既定ウェイトはMedium。見出しやUIは各クラスで400/700に上書きする */ font-synthesis: none; /* 実ファイルに無いウェイト・斜体をブラウザが疑似生成するのを防ぐ */ -webkit-font-smoothing: antialiased; /* Mac系ブラウザで文字を綺麗に表示する */ text-wrap: pretty; /* 段落の折り返しの見た目を整える */ } img { display: block; max-width: 100%; } /* 画像下の余白をなくし、親要素より大きくならないようにする */ /* a … リンクの基本色とホバー時の色 */ a { color: var(--color-brand); /* リンクの基本色はブランドブラウン */ text-decoration: none; /* 下線を消す */ } a:hover { color: var(--color-text-strong); } /* ホバー時は濃い文字色に変える */ /* border-radius は全要素で0（意図的な意匠）。角丸を足さないこと */ img, button, input, select, textarea, a { border-radius: 0; } /* 画像・ボタン・入力欄・リンクすべて角丸なし */ button, input, select, textarea { font-family: inherit; } /* フォーム部品にも親と同じフォントを適用する */ /* prefers-reduced-motion … 「アニメーションを減らす」設定のユーザー向けに、動きをほぼ無効化する */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* 滑らかスクロールを無効化 */ * { animation-duration: .01ms !important; transition-duration: .01ms !important; } /* すべてのアニメーションを瞬時にする */ } /* .visually-hidden … 画面には見えないが、スクリーンリーダーには読み上げさせたい要素用 */ .visually-hidden { position: absolute; /* 通常の流れから外す */ width: 1px; height: 1px; /* 見た目上は点のように小さくする */ padding: 0; margin: -1px; /* はみ出しをなくす */ overflow: hidden; /* 内容がはみ出しても隠す */ clip: rect(0, 0, 0, 0); /* 表示範囲をゼロにする（読み上げは可能） */ white-space: nowrap; /* 折り返しによるレイアウト崩れを防ぐ */ border: 0; /* 枠線なし */ } /* ========================================================================== レイアウトの土台（コンテナ・セクション背景） ========================================================================== */ /* .container … 中身の幅を最大1180pxに揃えて中央寄せする共通の箱 */ .container { max-width: var(--container-max); /* 最大幅を制限 */ margin: 0 auto; /* 左右中央寄せ */ padding-inline: var(--container-pad); /* 画面が狭いときのための左右余白 */ } .container--narrow { max-width: var(--container-max-narrow); } /* イントロ用の狭いコンテナ幅 */ /* セクション背景のルール（README指示#3対応）: .section が基本形。--light と --warm の2色を、通常のセクションで使い分ける。 --dark（予約・フッターなど）はこのローテーションに含めない例外扱い。 */ .section { padding: var(--section-pad-y) 0; /* セクション共通の上下余白 */ } .section--light { background: var(--color-bg-main); } /* 明るい方の背景色 */ .section--warm { background: var(--color-bg-section); } /* やや濃い方の背景色 */ /* .section--dark … 暗い背景を使う汎用の例外クラス */ .section--dark { background: var(--color-bg-dark); /* 暗い背景色 */ color: var(--color-text-on-dark); /* 暗い背景に合わせた明るい文字色 */ } /* 予約セクションはlight/warmのローテーションに含めない意図的な例外。 暗い背景と、独自の余白ルール（下の.booking-grid参照）を持つ */ .section--booking { background: var(--color-bg-dark); /* 予約セクションの暗い背景 */ color: var(--color-text-on-dark); /* 暗い背景に合わせた明るい文字色 */ } [id] { scroll-margin-top: var(--header-height); } /* id付き要素へジャンプしたとき、固定ヘッダー分の高さをよける */ /* ========================================================================== ボタン・リンク ========================================================================== */ /* .btn … すべてのボタン共通の基本スタイル（CTA/ボタンは操作に関わる重要文字なのでBold） */ .btn { display: inline-block; /* テキストのように扱いつつ幅高さを指定できるようにする */ font-family: var(--font-jp); /* 和文フォント */ font-weight: 700; /* CTA/ボタンは視認性重視のBold */ font-size: 0.9375rem; /* 15px相当（読みやすさのため13.5pxから拡大） */ letter-spacing: .2em; /* 文字間を広めに取る */ padding: 16px 40px; /* ボタン内側の余白 */ text-align: center; /* 文字を中央寄せ */ border: 0; /* 枠線なし */ cursor: pointer; /* マウスカーソルを指マークにする */ white-space: nowrap; /* ボタン内の文字を折り返さない */ } /* .btn--primary … ブランドカラーの塗りつぶしボタン（予約・送信など主要アクション） */ .btn--primary { background: var(--color-brand); /* ブランドブラウンで塗りつぶす */ color: #F9F4E9; /* 白に近いクリーム色の文字 */ } .btn--primary:hover { background: var(--color-brand-hover-dark); color: #F9F4E9; } /* ホバー時は濃いブラウンに */ .btn--on-dark:hover { background: var(--color-brand-hover-light); color: #FBF6EC; } /* 暗い背景上のボタンのホバー色 */ /* .btn--outline … 枠線だけのボタン（サブアクション用） */ .btn--outline { background: transparent; /* 背景は透明 */ border: 1px solid var(--color-brand); /* ブランドカラーの枠線 */ color: var(--color-brand); /* 文字もブランドカラー */ } .btn--outline:hover { background: var(--color-brand); color: #F9F4E9; } /* ホバー時は塗りつぶしに反転 */ .btn--block { display: block; width: 100%; } /* 横幅いっぱいに広げたいときに使う修飾クラス */ /* .text-link … 「◯◯を見る →」のような矢印付きテキストリンク（CTA的な役割のためBold） */ .text-link { display: inline-flex; /* 文字と矢印画像を横並びにする */ align-items: center; /* 縦方向を中央揃え */ gap: 14px; /* 文字と矢印の間隔 */ font-weight: 700; /* CTA的なリンクなのでBold */ font-size: 0.9375rem; /* 15px相当（読みやすさのため13pxから拡大） */ letter-spacing: .12em; /* 文字間隔 */ color: var(--color-brand); /* ブランドカラー */ white-space: nowrap; /* 折り返さない */ } .text-link:hover { color: var(--color-text-strong); } /* ホバー時は濃い文字色に */ .text-link img { width: 44px; height: auto; } /* 矢印画像のサイズ指定 */ /* ========================================================================== ヘッダー ヘッダーの「フルナビ表示 ⇔ ハンバーガー表示」の切り替えは、固定の画面幅ではなく assets/js/header-nav-fit.js がロゴとナビ文字の実際の隙間を測って .site-header に is-compact クラスを付け外しすることで行っている （ロゴと文字の間が20px未満になったらハンバーガーに切り替える、という指示に対応）。 767px以下のスマホ幅では、JS未実行時の保険として下部の @media でも強制的に ハンバーガー表示にしている。 ========================================================================== */ /* .site-header … 画面上部に固定される（sticky）共通ヘッダー本体 */ .site-header { position: sticky; /* スクロールしても画面上部に張り付く */ top: 0; /* 張り付く位置は画面のてっぺん */ z-index: 20; /* 他のコンテンツより手前に表示する */ background: rgba(239, 231, 217, .94); /* 半透明のベージュ背景 */ backdrop-filter: blur(6px); /* 背景を少しぼかしてすりガラス風にする */ border-bottom: 1px solid var(--border-light); /* 下端の薄い罫線 */ } /* .site-header__inner … ロゴ・ナビ・ハンバーガーを横並びにする内側の箱 */ .site-header__inner { max-width: var(--container-max); /* 中身の最大幅 */ margin: 0 auto; /* 中央寄せ */ padding: 14px clamp(16px, 4vw, 40px); /* 内側の余白 */ display: flex; /* 横並びレイアウト */ align-items: center; /* 縦方向を中央揃え */ justify-content: space-between; /* ロゴとナビを両端に配置 */ gap: 18px; /* 要素同士の間隔 */ flex-wrap: nowrap; /* 折り返さない（折り返すとロゴとナビが重なって見えるため） */ min-height: var(--header-height); /* 最低限の高さを確保 */ } /* .site-header__logo … ロゴ画像とリンクをまとめた箱 */ .site-header__logo { display: flex; /* 画像を含む要素を横並びにできるようにする */ align-items: center; /* 縦方向中央揃え */ gap: 14px; /* 要素間の間隔 */ color: var(--color-text-strong); /* リンクの文字色（今は文字なし） */ flex: none; /* 幅が縮まないようにする */ } .site-header__logo img { height: 44px; width: auto; object-fit: contain; } /* ロゴ画像の表示サイズと比率維持 */ /* .site-nav … フル表示時（is-compactでないとき）に見せる横並びのグローバルナビ（ナビなのでBold） */ .site-nav { display: flex; /* 横並びにする */ align-items: center; /* 縦方向中央揃え */ justify-content: flex-end; /* 右寄せにする */ gap: clamp(8px, 1.3vw, 22px); /* 項目同士の間隔（画面幅で微調整） */ font-weight: 700; /* ナビゲーションなのでBold */ font-size: 0.84375rem; /* 13.5px相当（読みやすさのため11.5pxから拡大） */ letter-spacing: .02em; /* 文字間隔 */ flex-wrap: nowrap; /* 折り返さない（1行に収める） */ flex: 1; /* 余ったスペースを埋める */ min-width: 0; /* flexアイテムが縮められるようにする（はみ出し防止） */ } .site-nav__link { color: var(--color-text-base); white-space: nowrap; } /* 文字色と折り返し禁止（ウェイトは親.site-navの700を継承） */ /* .lang-switch … 「JP / EN」の言語切替表示（欧文フォントの視認性が必要な重要表示なので700） */ .lang-switch { font-family: var(--font-en); /* 欧文フォント */ font-weight: 700; /* 視認性が必要な英字表示なのでBold */ font-size: 0.84375rem; /* 13.5px相当（読みやすさのため12pxから拡大） */ letter-spacing: .14em; /* 文字間隔 */ color: var(--color-text-muted); /* 薄めの文字色 */ white-space: nowrap; /* 折り返さない */ border-left: 1px solid var(--border-light-strong); /* 左側の区切り線 */ padding-left: clamp(10px, 1.6vw, 20px); /* 区切り線とのすき間 */ } .lang-switch__current { color: var(--color-text-strong); } /* 現在選択中の言語だけ濃い色にする */ /* .site-header__cta … ヘッダー右端の「空室を確認する」ボタン（CTAなのでBold） */ .site-header__cta { background: var(--color-brand); /* ブランドブラウンで塗りつぶす */ color: var(--color-bg-card); /* 明るい文字色 */ font-weight: 700; /* CTAなのでBold */ padding: 10px 16px; /* ボタン内側の余白 */ font-size: 0.84375rem; /* 13.5px相当（読みやすさのため11.5pxから拡大） */ letter-spacing: .06em; /* 文字間隔 */ white-space: nowrap; /* 折り返さない */ } .site-header__cta:hover { background: var(--color-brand-hover-dark); color: var(--color-bg-card); } /* ホバー時は濃いブラウン */ /* .nav-toggle … ハンバーガーボタン。通常は非表示で、.is-compactのときだけ表示する */ .nav-toggle { display: none; /* デフォルトは非表示 */ flex-direction: column; /* 3本線を縦に並べる */ gap: 5px; /* 線同士の間隔 */ background: none; /* 背景なし */ border: 0; /* 枠線なし */ padding: 8px; /* タップ範囲を広げるための余白 */ cursor: pointer; /* 指マークにする */ } .nav-toggle__bar { width: 22px; height: 2px; /* 1本の線の太さと長さ */ background: var(--color-text-strong); /* 線の色 */ } /* is-compact … header-nav-fit.js が「ロゴとナビの隙間が20px未満」と判定したときに .site-header へ付けるクラス。フルナビを隠してハンバーガーボタンを表示する */ .site-header.is-compact .site-nav { display: none; } /* フルナビを隠す（中の言語切替・CTAも一緒に隠れる） */ .site-header.is-compact .nav-toggle { display: flex; } /* ハンバーガーボタンを表示する */ /* .nav-drawer … ハンバーガーを押すと開く全画面メニュー。 767px以下のスマホ幅に限らず、is-compact状態であれば画面幅に関わらず開けるよう、 位置指定などの見た目は幅の条件を付けずにここで定義している */ .nav-drawer { display: none; /* 通常は非表示 */ position: fixed; /* 画面に対して固定表示 */ inset: var(--header-height) 0 0 0; /* ヘッダー直下から画面下端まで覆う */ z-index: 19; /* ヘッダーの下、他要素より上に表示 */ background: var(--color-bg-main); /* サイト基本背景色 */ padding: 24px var(--container-pad) calc(100px + env(safe-area-inset-bottom)); /* 下部固定バー分の余白も確保 */ overflow-y: auto; /* 項目が多いときは縦スクロール可能に */ } .nav-drawer.is-open { display: block; } /* JSがこのクラスを付けたときだけドロワーを表示する */ /* .nav-drawer__link … ドロワー内の各ナビリンク（ナビなのでBold） */ .nav-drawer__link { display: block; /* 1項目1行にする */ font-weight: 700; /* ナビなのでBold */ padding: 16px 0; /* タップしやすい高さを確保 */ font-size: 1rem; /* 16px相当（読みやすさのため15pxから拡大） */ letter-spacing: .06em; /* 文字間隔 */ color: var(--color-text-base); /* 標準文字色 */ border-bottom: 1px solid var(--border-light); /* 項目同士の区切り線 */ } /* .nav-drawer__lang … ドロワー内の言語切替（.lang-switchと同じ役割なので700） */ .nav-drawer__lang { margin-top: 20px; /* 上のリンク一覧との間隔 */ font-family: var(--font-en); /* 欧文フォント */ font-weight: 700; /* 視認性が必要な英字表示なのでBold */ font-size: 0.90625rem; /* 14.5px相当（読みやすさのため13pxから拡大） */ letter-spacing: .14em; /* 文字間隔 */ color: var(--color-text-muted); /* 薄めの文字色 */ } /* ========================================================================== ヒーロー（ファーストビュー） ========================================================================== */ /* .hero … 画面いっぱいに表示する背景写真＋キャッチコピーのブロック */ .hero { position: relative; /* 中の絶対配置要素の基準にする */ min-height: clamp(460px, 78vh, 780px); /* 画面の高さに応じた最低高さ */ display: grid; /* 中央寄せにグリッドを使う */ place-items: center; /* 縦横ともに中央揃え */ overflow: hidden; /* はみ出た部分を隠す */ } /* .hero__bg … ヒーロー背景の写真 */ .hero__bg { position: absolute; /* 親要素いっぱいに敷き詰める */ inset: 0; /* 上下左右すべて0（親にぴったり合わせる） */ width: 100%; /* 幅いっぱい */ height: 100%; /* 高さいっぱい */ object-fit: cover; /* 縦横比を保ったまま切り抜いて敷き詰める */ } /* .hero__veil … 写真の上に重ねる暗いグラデーション（文字を読みやすくする） */ .hero__veil { position: absolute; /* 写真の上に重ねる */ inset: 0; /* 写真と同じ範囲を覆う */ background: linear-gradient(180deg, rgba(20,16,12,.288) 0%, rgba(20,16,12,.46) 55%, rgba(20,16,12,.575) 100%); /* 上から下に向かって暗くなるグラデーション */ } /* .hero__content … キャッチコピーとCTAボタンをまとめる箱 */ .hero__content { position: relative; /* 背景・ベールより手前に表示する */ text-align: center; /* 文字を中央寄せ */ padding: clamp(60px, 12vh, 120px) 24px; /* 上下左右の余白 */ display: flex; /* 縦並びレイアウト */ flex-direction: column; /* 要素を縦に積む */ align-items: center; /* 横方向中央揃え */ gap: 26px; /* 要素同士の間隔 */ } /* .hero__eyebrow … 「NIKKO ／ PRIVATE VILLA」の小さい英字見出し（欧文フォントなのでウェイトは400固定） */ .hero__eyebrow { margin: 0; /* 余分な余白をリセット */ font-family: var(--font-en); /* 欧文フォント */ font-weight: 400; /* Cormorant Garamondの読み込み済みウェイトに合わせて固定 */ font-size: 0.8125rem; /* 13px相当（読みやすさのため11pxから拡大） */ letter-spacing: .26em; /* 文字間を大きく開ける */ color: #E8DCC7; /* 明るいクリーム色 */ white-space: nowrap; /* 折り返さない */ } /* .hero__title … メインキャッチコピー（h1見出し。大きく見せる文字なのでRegular=400） */ .hero__title { margin: 0; /* 余分な余白をリセット */ font-weight: 400; /* 明朝体の細さ・上品さを見せるRegular */ font-size: clamp(2rem, 4.4vw, 3.75rem); /* 32px〜60px相当（読みやすさのため上限を拡大） */ letter-spacing: .16em; /* 文字間を広めに */ line-height: 1.75; /* 行間を広めに */ color: #FBF6EC; /* ほぼ白に近いクリーム色 */ text-shadow: 0 2px 24px rgba(20,16,12,.5); /* 写真の上でも読みやすくする影 */ } /* .hero__subtitle … 「日光 一棟貸し古民家宿」のサブコピー */ .hero__subtitle { margin: 0; /* 余分な余白をリセット */ font-size: clamp(0.875rem, 1.3vw, 1.0625rem); /* 14px〜17px相当（読みやすさのため上限を拡大） */ letter-spacing: .2em; /* 文字間隔 */ color: #EDE2CE; /* 明るいクリーム色 */ } .hero .btn { margin-top: 8px; border: 1px solid rgba(249,244,233,.25); } /* ヒーロー内のCTAボタンだけ上余白と薄い枠線を追加 */ .hero .btn:hover { background: var(--color-bg-card); color: var(--color-brand-hover-dark); } /* ホバー時は明るい色に反転 */ /* ========================================================================== イントロ（ウェルカム文） ========================================================================== */ /* .intro … ヒーロー直後の、宿の性格を語る短い文章ブロック */ .intro { margin: 0 auto; /* 中央寄せ */ padding: var(--section-pad-y) var(--container-pad); /* 上下左右の余白 */ text-align: center; /* 文字を中央寄せ */ } .intro__icon { width: 74px; height: auto; margin: 0 auto 34px; opacity: .85; } /* 装飾イラストのサイズ・中央寄せ・下余白・少し透過 */ /* .intro__eyebrow … 「WELCOME」の小さい英字ラベル（400だと細く見えるためMedium=500） */ .intro__eyebrow { margin: 0 0 34px; /* 下だけ余白を作る */ font-family: var(--font-en); /* 欧文フォント */ font-weight: 500; /* 小さい英字ラベルなのでMedium */ font-size: 0.84375rem; /* 13.5px相当（読みやすさのため12pxから拡大） */ letter-spacing: .38em; /* 文字間を大きく開ける */ color: var(--color-brand); /* ブランドカラー */ } /* .intro__body … イントロの大きな文章（「大きく見せる」文字なのでRegular=400） */ .intro__body { margin: 0; /* 余分な余白をリセット */ font-weight: 400; /* 明朝体の繊細さ・上品さを見せるRegular */ font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); /* 17px〜21px相当（読みやすさのため上限を拡大） */ line-height: 2.5; /* 行間を広めに取り、余韻を出す */ letter-spacing: .08em; /* 文字間隔 */ color: var(--color-text-base); /* 標準文字色 */ } .intro__divider { /* セクション末の区切り罫線画像 */ width: min(280px, 70%); /* 幅は280pxまたは画面幅の70%の小さい方 */ height: auto; /* 高さは画像の比率のまま */ margin: clamp(44px, 7vw, 72px) auto 0; /* 上に余白をとって中央寄せ */ opacity: .7; /* 少し透過させる */ } /* ========================================================================== 共通見出しパーツ（section-heading.html用のスタイル） ========================================================================== */ /* .section-heading__eyebrow … 各セクション共通の、小さい英字見出し（欧文フォントなのでウェイトは400固定） */ .section-heading__eyebrow { margin: 0 0 14px; /* 下だけ余白を作る */ font-family: var(--font-en); /* 欧文フォント */ font-weight: 500; /* 小さい英字ラベルなのでMedium */ font-size: 0.8125rem; /* 13px相当（読みやすさのため11.5pxから拡大） */ letter-spacing: .38em; /* 文字間を大きく開ける */ color: var(--color-brand); /* ブランドカラー */ } .section--booking .section-heading__eyebrow { color: var(--color-accent-gold); } /* 予約セクション内だけゴールド色にする */ /* .section-heading__title … 各セクション共通の、大きい日本語見出し（大きく見せる文字なのでRegular=400） */ .section-heading__title { margin: 0; /* 余分な余白をリセット */ font-weight: 400; /* 明朝体の上品さを見せるRegular */ font-size: clamp(1.625rem, 2.8vw, 2.375rem); /* 26px〜38px相当（読みやすさのため上限を拡大） */ letter-spacing: .18em; /* 文字間を広めに（明朝体の「間」を作る） */ } .section-heading__title--sm { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.8; } /* About/Contact/Access用の少し小さいサイズ（24px〜36px相当） */ /* .section-heading__desc … 見出し下の短い説明文（「読ませる」文章なのでMedium。長文なのでletter-spacingは0.03em程度に抑える） */ .section-heading__desc { margin: 14px 0 0; /* 上だけ余白を作る */ font-weight: 500; /* 読ませる文章なのでMedium */ font-size: 0.9375rem; /* 15px相当（読みやすさのため13pxから拡大） */ line-height: 2.2; /* 行間を広めに */ letter-spacing: .03em; /* 文字間隔（本文は広げすぎない） */ color: var(--color-text-soft); /* 少し薄めの文字色 */ } .section-heading--center { text-align: center; } /* 見出しブロックを中央寄せにする修飾クラス */ .section-heading--center .section-heading__title { margin-bottom: 18px; } /* 中央寄せ時は見出し下にも余白を作る */ .section-heading--center .section-heading__desc { margin-top: 0; } /* 中央寄せ時は上余白を見出し側に任せる */ .section--booking .section-heading { margin-bottom: clamp(36px, 6vw, 64px); } /* 予約セクションの見出し下の余白 */ #nikko .section-heading { margin-bottom: clamp(32px, 5vw, 56px); } /* 日光セクションの見出し下の余白 */ .contact-section .section-heading__desc, .access-section .section-heading__desc { margin-bottom: 22px; } /* お問い合わせ／アクセスの見出しリード文の下余白 */ /* ========================================================================== 3つのハイライト ========================================================================== */ /* .highlights__grid … ハイライトカード3枚を横並びにするグリッド */ .highlights__grid { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* 幅に応じて自動で列数調整 */ gap: clamp(28px, 5vw, 64px); /* カード同士の間隔 */ } /* .highlight-card … ハイライトカード1枚分の箱 */ .highlight-card { display: flex; /* 縦並びレイアウト */ flex-direction: column; /* 要素を縦に積む */ gap: 16px; /* 要素同士の間隔 */ text-align: center; /* 文字を中央寄せ */ align-items: center; /* 横方向も中央揃え */ } /* .highlight-card__no … カード内の「01」「02」「03」の番号（欧文フォントなのでウェイトは400固定） */ .highlight-card__no { font-family: var(--font-en); /* 欧文フォント */ font-weight: 400; /* Cormorant Garamondの読み込み済みウェイトに合わせて固定 */ font-size: 1.75rem; /* 28px相当（読みやすさのため26pxから拡大） */ letter-spacing: .14em; /* 文字間隔 */ color: var(--color-accent-gold); /* ゴールド色で強調 */ } /* .highlight-card__title … カード内の見出し（カードタイトルなのでBold） */ .highlight-card__title { margin: 0; /* 余分な余白をリセット */ font-weight: 700; /* カードタイトルなのでBold */ font-size: 1.125rem; /* 18px相当（読みやすさのため16pxから拡大） */ letter-spacing: .05em; /* 文字間隔 */ color: var(--color-text-strong); /* 濃い文字色 */ white-space: nowrap; /* 折り返し禁止（デザイン崩れ防止） */ } /* .highlight-card__body … カード内の説明文（読ませる文章なのでMedium。長文なのでletter-spacingは0.03em程度に抑える） */ .highlight-card__body { margin: 0; /* 余分な余白をリセット */ font-weight: 500; /* 読ませる文章なのでMedium */ font-size: 0.9375rem; /* 15px相当（読みやすさのため13pxから拡大） */ line-height: 2.1; /* 行間 */ letter-spacing: .03em; /* 文字間隔（本文は広げすぎない） */ color: var(--color-text-soft); /* 薄めの文字色 */ max-width: 280px; /* 1行が長くなりすぎないよう幅を制限 */ } /* ========================================================================== 客室・空間 ========================================================================== */ /* .rooms-header … 見出しとリード文を左右に並べる行 */ .rooms-header { display: flex; /* 横並びレイアウト */ align-items: flex-end; /* 下端で揃える */ justify-content: space-between; /* 両端に配置 */ gap: 24px; /* 要素間の間隔 */ flex-wrap: wrap; /* 入りきらなければ折り返す */ margin-bottom: clamp(32px, 5vw, 56px); /* 下のギャラリーとの間隔 */ } .rooms-header .section-heading__desc { max-width: 430px; margin-top: 0; } /* リード文の最大幅と上余白の調整 */ /* .rooms-gallery … 客室写真をタイル状に並べるグリッド */ .rooms-gallery { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 幅に応じて自動で列数調整 */ gap: clamp(12px, 1.6vw, 20px); /* 写真同士の間隔 */ } .rooms-gallery__item { margin: 0; min-width: 0; } /* 写真1枚分の箱の余白リセットとはみ出し防止 */ .rooms-gallery__item--wide { grid-column: span 2; } /* 1枚目の写真だけ横2マス分に広げる */ .rooms-gallery__item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; } /* 通常サイズの写真の比率と切り抜き方 */ .rooms-gallery__item--wide img { aspect-ratio: 16/10; } /* 横長写真だけ比率を変える */ /* .rooms-gallery__caption … 写真の下に表示するキャプション文字（小さく視認性を確保したいのでBold） */ .rooms-gallery__caption { margin-top: 12px; /* 写真とのすき間 */ font-weight: 700; /* 小さい文字の視認性確保のためBold */ font-size: 0.8125rem; /* 13px相当（読みやすさのため11.5pxから拡大） */ letter-spacing: .14em; /* 文字間隔 */ color: var(--color-text-muted); /* 薄めの文字色 */ } /* .rooms-footer … スペック情報と「すべて見る」リンクの行 */ .rooms-footer { display: flex; /* 横並びレイアウト */ flex-wrap: wrap; /* 入りきらなければ折り返す */ gap: 18px; /* 要素間の間隔 */ align-items: center; /* 縦方向中央揃え */ justify-content: space-between; /* 両端に配置 */ margin-top: clamp(28px, 4vw, 48px); /* ギャラリーとの間隔 */ padding-top: 26px; /* 罫線とのすき間 */ border-top: 1px solid var(--border-light-strong); /* 上端の区切り線 */ } /* .rooms-footer__specs … 「最大4名／専用キッチン…」のスペック表示（読ませる文章なのでMedium） */ .rooms-footer__specs { margin: 0; /* 余分な余白をリセット */ font-weight: 500; /* 読ませる文章なのでMedium */ font-size: 0.90625rem; /* 14.5px相当（読みやすさのため12.5pxから拡大） */ letter-spacing: .03em; /* 文字間隔（本文は広げすぎない） */ color: var(--color-text-soft); /* 薄めの文字色 */ white-space: nowrap; /* 折り返し禁止 */ } /* ========================================================================== 宿について ========================================================================== */ /* .about__grid … 左＝写真／右＝テキストの2カラムレイアウト */ .about__grid { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 幅に応じて自動で列数調整（狭ければ1列に） */ gap: clamp(32px, 6vw, 72px); /* 写真とテキストの間隔 */ align-items: center; /* 縦方向中央揃え */ } .about__photo { width: 100%; aspect-ratio: 5/6; object-fit: cover; min-width: 0; } /* 玄関写真の比率と切り抜き方 */ .about__body { min-width: 0; } /* テキスト側の箱がはみ出さないようにする */ /* .about__lead … 本文段落（「宿についての文章」なのでMedium。長文なのでletter-spacingは0.03em程度に抑える） */ .about__lead { margin: 0 0 22px; /* 下だけ余白を作る（段落間） */ font-weight: 500; /* 読ませる文章なのでMedium */ font-size: 0.96875rem; /* 15.5px相当（読みやすさのため13.5pxから拡大） */ line-height: 2.3; /* 行間 */ letter-spacing: .03em; /* 文字間隔（本文は広げすぎない） */ color: var(--color-text-base-2); /* 標準文字色 */ } .about__lead:last-of-type { margin-bottom: 34px; } /* 最後の段落だけ下の余白を広めに */ /* .about__cta-row … 「宿について詳しく」リンクと装飾イラストを並べる行 */ .about__cta-row { display: flex; /* 横並びレイアウト */ align-items: center; /* 縦方向中央揃え */ gap: 22px; /* 要素間の間隔 */ flex-wrap: wrap; /* 入りきらなければ折り返す */ } .about__cta-row img { width: 54px; height: auto; opacity: .8; } /* 装飾イラストのサイズと少しの透過 */ /* .about__divider … セクション末の区切り罫線画像 */ .about__divider { width: min(240px, 60%); /* 幅は240pxまたは画面幅の60%の小さい方 */ height: auto; /* 高さは画像の比率のまま */ margin: clamp(48px, 8vw, 90px) auto 0; /* 上に余白をとって中央寄せ */ opacity: .6; /* 少し透過させる */ display: block; /* 中央寄せのため、blockとして扱う */ } /* ========================================================================== 予約・空室確認 ========================================================================== */ /* .booking-grid … 左＝カレンダー／右＝予約フォームの2カラムレイアウト */ .booking-grid { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 幅に応じて自動で列数調整 */ gap: clamp(20px, 3vw, 36px); /* カレンダーとフォームの間隔 */ align-items: start; /* 上端で揃える */ } /* .calendar-card … 空室カレンダーのカード全体 */ .calendar-card { background: var(--color-bg-card); /* 明るいカード背景 */ color: var(--color-text-strong); /* 濃い文字色 */ padding: clamp(22px, 3vw, 34px); /* カード内側の余白 */ min-width: 0; /* はみ出し防止 */ } /* .calendar-card__header … 月表示と「BEDS24 LIVE」を並べる行 */ .calendar-card__header { display: flex; /* 横並びレイアウト */ align-items: center; /* 縦方向中央揃え */ justify-content: space-between; /* 両端に配置 */ margin-bottom: 22px; /* 下の曜日行との間隔 */ } /* .calendar-card__month … 「2026年10月」の表示（視認性が必要な重要表示なので700） */ .calendar-card__month { font-weight: 700; font-size: 1.0625rem; letter-spacing: .16em; } /* 17px相当（読みやすさのため15pxから拡大） */ /* .calendar-card__live … 「BEDS24 LIVE」ラベル（小さい英字ラベルなのでMedium=500） */ .calendar-card__live { font-family: var(--font-en); /* 欧文フォント */ font-weight: 500; /* 小さい英字ラベルなのでMedium */ font-size: 0.78125rem; /* 12.5px相当（読みやすさのため11pxから拡大） */ letter-spacing: .28em; /* 文字間を大きく開ける */ color: var(--color-text-muted); /* 薄めの文字色 */ } /* .calendar-card__weekdays / __days … 曜日行と日付セルを7列グリッドで揃える */ .calendar-card__weekdays, .calendar-card__days { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(7, minmax(0, 1fr)); /* 7列（日〜土）に均等分割 */ gap: 6px; /* セル同士の間隔 */ } /* .calendar-card__weekdays … 曜日見出し行だけの追加スタイル（小さい英字ラベルなのでMedium=500） */ .calendar-card__weekdays { font-family: var(--font-en); /* 欧文フォント */ font-weight: 500; /* 小さい英字ラベルなのでMedium */ font-size: 0.78125rem; /* 12.5px相当（読みやすさのため11pxから拡大） */ letter-spacing: .12em; /* 文字間隔 */ color: var(--color-text-muted); /* 薄めの文字色 */ margin-bottom: 8px; /* 日付セルとの間隔 */ text-align: center; /* 中央寄せ */ } /* .calendar-day … 日付セル1つ分の共通スタイル（色は状態別クラスで変える） */ .calendar-day { aspect-ratio: 1; /* 正方形にする */ display: flex; /* 中の数字・記号を並べるため */ flex-direction: column; /* 縦に積む */ align-items: center; /* 横方向中央揃え */ justify-content: center; /* 縦方向中央揃え */ gap: 2px; /* 数字と記号の間隔 */ border: 1px solid rgba(33,29,24,.10); /* 薄い枠線 */ min-width: 0; /* はみ出し防止 */ } /* .calendar-day__n … 日付の数字部分（視認性が必要な重要表示なので700） */ .calendar-day__n { font-family: var(--font-en); font-weight: 700; font-size: 0.9375rem; } /* 15px相当（読みやすさのため13pxから拡大） */ /* .calendar-day__mark … ○△×記号部分（視認性重視のためBold） */ .calendar-day__mark { font-weight: 700; font-size: 0.75rem; letter-spacing: .04em; } /* 12px相当（読みやすさのため10pxから拡大） */ .calendar-day--empty { background: transparent; border-color: transparent; } /* 月初の空白セル（枠線も消す） */ .calendar-day--available { background: var(--color-cal-available-bg); color: var(--color-cal-available-text); } /* 空室ありセルの配色 */ .calendar-day--few { background: var(--color-cal-few-bg); color: var(--color-cal-few-text); } /* 残りわずかセルの配色 */ .calendar-day--full { background: var(--color-cal-full-bg); color: var(--color-cal-full-text); } /* 満室セルの配色 */ /* .calendar-legend … カレンダー下の「○空室あり／△残りわずか／×満室」の凡例（視認性重視のためBold） */ .calendar-legend { display: flex; /* 横並びレイアウト */ font-weight: 700; /* 小さい文字の視認性確保のためBold */ gap: 20px; /* 項目同士の間隔 */ margin-top: 20px; /* カレンダー本体との間隔 */ font-size: 0.8125rem; /* 13px相当（読みやすさのため11pxから拡大） */ letter-spacing: .1em; /* 文字間隔 */ color: var(--color-text-muted); /* 薄めの文字色 */ flex-wrap: wrap; /* 入りきらなければ折り返す */ } /* .booking-form-card … 予約フォームのカード全体 */ .booking-form-card { background: var(--color-bg-dark-card); /* 暗めのカード背景 */ border: 1px solid var(--border-dark); /* 薄い枠線 */ padding: clamp(22px, 3vw, 34px); /* カード内側の余白 */ display: flex; /* 縦並びレイアウト */ flex-direction: column; /* 要素を縦に積む */ gap: 18px; /* 要素同士の間隔 */ min-width: 0; /* はみ出し防止 */ } /* .booking-form-card__plan … プラン名（小見出し的な役割なのでBold） */ .booking-form-card__plan { margin: 0 0 8px; font-weight: 700; font-size: 1rem; letter-spacing: .16em; color: var(--color-text-on-dark); } /* 16px相当（読みやすさのため14pxから拡大） */ /* .booking-form-card__note … プラン補足・時間案内など（「予約フォーム内の通常文字」なのでbody既定のMediumを使用） */ .booking-form-card__note { margin: 0; font-size: 0.8125rem; letter-spacing: .1em; color: var(--color-text-on-dark-muted); } /* 13px相当（読みやすさのため11.5pxから拡大） */ /* .booking-form-card__price … 料金表示の行 */ .booking-form-card__price { margin: 0; /* 余分な余白をリセット */ display: flex; /* 数字と単位を横並びに */ align-items: baseline; /* 文字のベースラインで揃える */ gap: 10px; /* 数字と単位の間隔 */ color: var(--color-accent-gold); /* ゴールド色で強調 */ } /* .booking-form-card__price-value … 料金の数字部分（視認性が必要な重要表示なので700） */ .booking-form-card__price-value { font-family: var(--font-en); font-weight: 700; font-size: clamp(1.875rem, 3.4vw, 2.625rem); letter-spacing: .06em; } /* 30px〜42px相当（読みやすさのため上限を拡大） */ .booking-form-card__price-unit { font-size: 0.875rem; letter-spacing: .14em; } /* 「／ 泊」の単位部分。14px相当（読みやすさのため12pxから拡大） */ /* .field-grid … チェックイン／チェックアウトの入力欄を横並びにする */ .field-grid { display: grid; /* グリッドレイアウト */ grid-template-columns: 1fr 1fr; /* 2等分の2列 */ gap: 12px; /* 入力欄同士の間隔 */ } /* .field … 予約フォーム内の1項目分（ラベル＋入力欄）の共通スタイル（フォームラベルなのでBold） */ .field { display: flex; /* 縦並びレイアウト */ flex-direction: column; /* ラベルの下に入力欄を配置 */ gap: 8px; /* ラベルと入力欄の間隔 */ font-weight: 700; /* フォームラベルなのでBold */ font-size: 0.8125rem; /* ラベルの文字サイズ。13px相当（読みやすさのため11pxから拡大） */ letter-spacing: .14em; /* 文字間隔 */ color: var(--color-text-on-dark-muted); /* ラベルの文字色 */ min-width: 0; /* はみ出し防止 */ } /* .field 内の入力欄（date/select/textarea）共通の見た目。 親.fieldのBold（ラベル用）を打ち消し、入力される通常文字はMedium（本文用）に戻す */ .field input, .field select, .field textarea { background: transparent; /* 背景は透明（カードの色をそのまま活かす） */ border: 1px solid var(--border-dark); /* 薄い枠線 */ color: var(--color-text-on-dark); /* 入力文字の色 */ font-weight: 500; /* フォーム内の通常文字はMediumに戻す */ padding: 12px; /* 内側の余白 */ font-family: var(--font-jp); /* 和文フォント */ font-size: 0.90625rem; /* 14.5px相当（読みやすさのため12.5pxから拡大） */ min-width: 0; /* はみ出し防止 */ } /* .booking-form-card__hint … フォーム下の補足案内文（説明文なのでbody既定のMediumを使用） */ .booking-form-card__hint { margin: 0; font-size: 0.8125rem; line-height: 1.9; letter-spacing: .08em; color: var(--color-text-on-dark-muted-3); } /* 13px相当（読みやすさのため11pxから拡大） */ /* ========================================================================== 日光の楽しみ方 ========================================================================== */ /* .nikko-grid … 3枚のスポットカードを横並びにするグリッド */ .nikko-grid { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 幅に応じて自動で列数調整 */ gap: clamp(16px, 2.4vw, 28px); /* カード同士の間隔 */ } .nikko-card { min-width: 0; } /* カードがはみ出さないようにする */ .nikko-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } /* 写真の比率と切り抜き方（object-positionは各記事で個別指定） */ /* .nikko-card__title … カード内見出し（カードタイトルなのでBold） */ .nikko-card__title { margin: 18px 0 10px; font-weight: 700; font-size: 1.0625rem; letter-spacing: .14em; } /* 17px相当（読みやすさのため15pxから拡大） */ /* .nikko-card__body … カード内説明文（「日光の楽しみ方の本文」なのでMedium。長文なのでletter-spacingは0.03em程度に抑える） */ .nikko-card__body { margin: 0; font-weight: 500; font-size: 0.90625rem; line-height: 2.1; letter-spacing: .03em; color: var(--color-text-soft); } /* 14.5px相当（読みやすさのため12.5pxから拡大） */ /* .nikko-divider … セクション末の区切り罫線画像 */ .nikko-divider { width: min(300px, 70%); /* 幅は300pxまたは画面幅の70%の小さい方 */ height: auto; /* 高さは画像の比率のまま */ margin: clamp(44px, 7vw, 80px) auto 0; /* 上に余白をとって中央寄せ */ opacity: .55; /* 少し透過させる */ display: block; /* 中央寄せのため、blockとして扱う */ } /* ========================================================================== お問い合わせ／アクセス ========================================================================== */ /* .contact-access-grid … 左＝お問い合わせ／右＝アクセスの2カラムレイアウト */ .contact-access-grid { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 幅に応じて自動で列数調整 */ gap: clamp(32px, 5vw, 64px); /* 2つの列の間隔 */ align-items: start; /* 上端で揃える */ } .contact-section, .access-section { min-width: 0; } /* どちらもはみ出さないようにする */ .contact-form { display: flex; flex-direction: column; gap: 16px; } /* フォーム内の項目を縦に並べる */ /* .form-field … お問い合わせフォームの1項目分（ラベル＋入力欄。フォームラベルなのでBold） */ .form-field { display: flex; /* 縦並びレイアウト */ flex-direction: column; /* ラベルの下に入力欄を配置 */ gap: 8px; /* ラベルと入力欄の間隔 */ font-weight: 700; /* フォームラベルなのでBold */ font-size: 0.8125rem; /* ラベルの文字サイズ。13px相当（読みやすさのため11.5pxから拡大） */ letter-spacing: .14em; /* 文字間隔 */ color: #6E6154; /* ラベルの文字色 */ } /* .form-field 内の入力欄（text/email/textarea）共通の見た目。 親.form-fieldのBold（ラベル用）を打ち消し、入力される通常文字はMedium（本文用）に戻す */ .form-field input, .form-field textarea { background: var(--color-bg-card); /* 明るいカード背景色 */ border: 1px solid var(--border-light-strong); /* 薄い枠線 */ padding: 14px; /* 内側の余白 */ font-family: var(--font-jp); /* 和文フォント */ font-weight: 500; /* フォーム内の通常文字はMediumに戻す */ font-size: 0.9375rem; /* 15px相当（読みやすさのため13pxから拡大） */ color: var(--color-text-strong); /* 入力文字の色 */ } .form-field textarea { resize: vertical; } /* テキストエリアは上下方向にだけリサイズ可能にする */ .contact-form .btn { align-self: flex-start; } /* 送信ボタンを幅いっぱいにせず左寄せにする */ /* .access-map … 地図（Google Maps）を表示する予定の枠 */ .access-map { width: 100%; /* 横幅いっぱい */ aspect-ratio: 16/11; /* 地図らしい横長の比率 */ border: 1px solid var(--border-light-strong); /* 薄い枠線 */ background: var(--color-bg-card); /* 明るい背景色 */ display: grid; /* 中のラベルを中央寄せするため */ place-items: center; /* 縦横ともに中央揃え */ text-align: center; /* 文字も中央寄せ */ padding: 16px; /* 内側の余白 */ } /* .access-map__label … 地図が入るまでの仮ラベル文字（等幅フォントのためウェイト方針の対象外。従来通り400） */ .access-map__label { font-family: ui-monospace, Menlo, monospace; /* 等幅フォント（プレースホルダーであることを示す） */ font-weight: 400; /* 元の見た目を維持（bodyの700を継承させない） */ font-size: 0.78125rem; /* 12.5px相当（読みやすさのため10.5pxから拡大） */ letter-spacing: .08em; /* 文字間隔 */ color: var(--color-text-muted); /* 薄めの文字色 */ line-height: 1.8; /* 行間 */ } /* .access-list … 所在地・最寄駅などを項目名／値の形で並べるリスト（「アクセス情報」なのでMedium。長文ではないがletter-spacingは0.03em程度に抑える） */ .access-list { margin: 26px 0 0; /* 地図との間隔 */ display: grid; /* グリッドレイアウト */ grid-template-columns: max-content 1fr; /* 左＝項目名（幅は内容に合わせる）／右＝値 */ gap: 14px 22px; /* 行間と列間の間隔 */ font-weight: 500; /* 読ませる情報文なのでMedium */ font-size: 0.90625rem; /* 14.5px相当（読みやすさのため12.5pxから拡大） */ letter-spacing: .03em; /* 文字間隔（本文は広げすぎない） */ color: var(--color-text-base-2); /* 標準文字色 */ } .access-list dt { color: var(--color-text-muted); white-space: nowrap; } /* 項目名（所在地など）の色と折り返し禁止 */ .access-list dd { margin: 0; } /* 値側の余分な余白をリセット */ /* .access-icons … お問い合わせフォーム／電話へのアイコンリンクを並べる行 */ .access-icons { display: flex; /* 横並びレイアウト */ gap: 34px; /* アイコン同士の間隔 */ margin-top: 30px; /* リストとの間隔 */ flex-wrap: wrap; /* 入りきらなければ折り返す */ align-items: flex-end; /* 下端で揃える */ } .access-icons img { width: auto; height: 78px; } /* アイコン画像の高さ指定（文字が焼き込まれているためこれ以上縮小しない） */ /* ========================================================================== フッター ========================================================================== */ /* .site-footer … フッター全体（暗い背景） */ .site-footer { background: var(--color-bg-dark); /* 暗い背景色 */ color: var(--color-text-on-dark-2); /* 明るめの文字色 */ padding: clamp(48px, 8vw, 88px) 0 34px; /* 上下の余白 */ } /* .footer-grid … ロゴ列・サイト案内・ご利用案内・お問い合わせを横並びにする */ .footer-grid { display: grid; /* グリッドレイアウト */ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 幅に応じて自動で列数調整 */ gap: clamp(20px, 2.4vw, 40px); /* 列同士の間隔 */ } .footer-col__logo { width: 150px; height: auto; margin-bottom: 24px; } /* フッターロゴのサイズと下余白 */ /* .footer-col__about … 事業者情報（読ませる情報文なのでMedium。長文なのでletter-spacingは0.03em程度に抑える） */ .footer-col__about { margin: 0; font-weight: 500; font-size: 0.84375rem; line-height: 2.1; letter-spacing: .03em; color: var(--color-text-on-dark-muted-2); } /* 13.5px相当（読みやすさのため11.5pxから拡大） */ /* .footer-col … フッター内の1列分の共通スタイル（本文相当のMediumを既定にし、リンクだけ下でナビ用のBoldに上書き） */ .footer-col { display: flex; flex-direction: column; gap: 13px; font-size: 0.90625rem; letter-spacing: .12em; } /* 14.5px相当（読みやすさのため12.5pxから拡大） */ /* .footer-col a … 列内のナビリンク（ナビなのでBold） */ .footer-col a { font-weight: 700; color: var(--color-text-on-dark-2); } /* サイト案内・ご利用案内などのリンク */ /* .footer-col__title … 各列の見出し（「サイト案内」等。指定に基づき英字ラベル扱いのMedium。 日本語だがShippori Minchoにも実際に500のウェイトファイルがあるため、そのまま実ウェイトで描画される） */ .footer-col__title { font-weight: 500; font-size: 0.78125rem; letter-spacing: .28em; color: var(--color-text-on-dark-muted-2); margin-bottom: 5px; } /* 12.5px相当（読みやすさのため11pxから拡大） */ /* .footer-col__note … 受付時間などの補足文（説明文なのでMedium。長文なのでletter-spacingは0.03em程度に抑える） */ .footer-col__note { margin: 4px 0 0; font-weight: 500; font-size: 0.8125rem; line-height: 1.9; letter-spacing: .03em; color: var(--color-text-on-dark-muted-2); } /* 13px相当（読みやすさのため11pxから拡大） */ /* .footer-bottom … フッター最下段：言語切替とコピーライトの行 */ .footer-bottom { display: flex; /* 横並びレイアウト */ align-items: center; /* 縦方向中央揃え */ justify-content: space-between; /* 両端に配置 */ gap: 20px; /* 要素間の間隔 */ flex-wrap: wrap; /* 入りきらなければ折り返す */ margin: clamp(36px, 5vw, 60px) 0 0; /* 上の列群との間隔 */ padding-top: 22px; /* 罫線とのすき間 */ border-top: 1px solid var(--border-dark-2); /* 上端の区切り線 */ } /* .footer-bottom__lang … 言語切替（視認性が必要な重要表示なので700） */ .footer-bottom__lang { font-family: var(--font-en); font-weight: 700; font-size: 0.875rem; letter-spacing: .2em; color: var(--color-text-on-dark-muted-2); } /* 14px相当（読みやすさのため12.5pxから拡大） */ .footer-bottom__lang a:first-child { color: var(--color-text-on-dark-2); } /* 現在選択中の言語（JP）だけ明るい色に */ /* .footer-bottom__copyright … コピーライト表記（控えめに見せたい箇所なので700にせずRegular=400のまま） */ .footer-bottom__copyright { font-family: var(--font-en); font-weight: 400; font-size: 0.75rem; letter-spacing: .22em; color: var(--color-text-on-dark-muted-4); } /* 12px相当（読みやすさのため10.5pxから拡大） */ /* ========================================================================== パンくずリスト ========================================================================== */ /* .breadcrumbs … 下層ページ用のパンくずリスト（assets/js/breadcrumbs.jsが生成。ナビなのでBold） */ .breadcrumbs { max-width: var(--container-max); /* コンテンツと同じ最大幅 */ margin: 0 auto; /* 中央寄せ */ padding: 18px var(--container-pad) 0; /* ヘッダーとの間隔・左右余白 */ display: flex; /* 横並びレイアウト */ flex-wrap: wrap; /* 入りきらなければ折り返す */ gap: 8px; /* 項目同士の間隔 */ font-weight: 700; /* ナビゲーションなのでBold */ font-size: 0.8125rem; /* 13px相当（読みやすさのため11.5pxから拡大） */ letter-spacing: .06em; /* 文字間隔 */ color: var(--color-text-muted); /* 薄めの文字色 */ } .breadcrumbs__link { color: var(--color-text-muted); } /* 途中階層のリンク色 */ .breadcrumbs__link:hover { color: var(--color-text-strong); } /* ホバー時は濃い色に */ .breadcrumbs__current { color: var(--color-text-base); } /* 現在ページ（リンクなし）の色 */ .breadcrumbs__sep { color: var(--border-light-strong); } /* 区切り記号「/」の色 */ /* ========================================================================== スマホ用：画面下部固定CTAバー ========================================================================== */ /* .mobile-cta-bar … スマホ幅だけ画面下部に固定表示する予約導線バー */ .mobile-cta-bar { display: none; /* 通常は非表示（767px以下で表示に切り替える） */ position: fixed; /* 画面に対して固定表示 */ left: 0; right: 0; bottom: 0; /* 画面下端いっぱいに配置 */ z-index: 30; /* 他の要素より手前に表示する */ background: var(--color-bg-card); /* 明るいカード背景色 */ border-top: 1px solid var(--border-light-strong); /* 上端の区切り線 */ padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); /* iPhoneのホームバー分を避けた下余白 */ gap: 10px; /* ボタン同士の間隔 */ align-items: center; /* 縦方向中央揃え */ } .mobile-cta-bar .btn { flex: 1; padding: 13px; min-height: 44px; } /* メインCTAは幅を伸ばし、タップしやすい高さにする */ .mobile-cta-bar .btn--outline { flex: 0 0 auto; width: 88px; min-height: 44px; padding: 13px 8px; } /* 問い合わせボタンは幅固定 */ /* ========================================================================== レスポンシブ：スマホ幅（767px以下）の上書きスタイル ワイヤーフレームファイルにSP版レイアウトの詳細あり。 ヘッダーのハンバーガー切り替え自体はJS（is-compactクラス）で行うため、 ここではグリッドの列数や下部固定バーなど「物理的な画面の狭さ」に関わる スタイルのみを扱う。 ========================================================================== */ /* 画面幅が767px以下のときだけ適用される上書きスタイル一式 */ @media (max-width: 767px) { .mobile-cta-bar { display: flex; } /* 画面下部固定CTAバーを表示する */ body { padding-bottom: 66px; } /* 下部固定バーとコンテンツが重ならないよう本文に余白を追加 */ /* 客室ギャラリーはスマホ幅で2列表示にする */ .rooms-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); /* 常に2列にする */ } .rooms-gallery__item--wide { grid-column: span 2; } /* 1枚目の写真は2列分の幅のまま維持 */ /* 日光カードはスマホ幅で横スワイプのカルーセルにする */ .nikko-grid { grid-auto-flow: column; /* カードを横方向に並べていく */ grid-auto-columns: 78%; /* 1枚あたりの幅（次のカードが少し見えるようにする） */ grid-template-columns: none; /* PC用の列指定を解除 */ overflow-x: auto; /* 横方向にスクロール可能にする */ scroll-snap-type: x mandatory; /* スワイプ時にカード単位でピタッと止まるようにする */ padding-bottom: 4px; /* スクロールバー分の余白 */ -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールを有効にする */ } .nikko-card { scroll-snap-align: start; } /* 各カードの左端でスナップさせる */ .field-grid { grid-template-columns: 1fr; } /* チェックイン／アウトの入力欄を1列に積む */ /* 入力欄はスマホ幅でタップしやすいよう高さ44px以上を確保する */ .form-field input, .form-field textarea, .field input, .field select { min-height: 44px; } /* タップ領域確保のための最低高さ */ } /* 極端に狭い画面（480px以下）では、JSが未実行/失敗していても最低限ハンバーガー 表示になるようにする保険。通常はheader-nav-fit.jsのis-compact判定が先に効く */ @media (max-width: 480px) { .site-nav { display: none; } /* フルナビを強制的に隠す */ .nav-toggle { display: flex; } /* ハンバーガーボタンを強制的に表示する */ }