/*
Theme Name: 旅房はなえみ
Theme URI: https://ryobou-hanaemi.com/
Author: 旅房はなえみ
Author URI: https://ryobou-hanaemi.com/
Description: 北海道小樽・朝里川温泉「旅房はなえみ」オリジナルテーマ。プライベートサウナと全天候型BBQを主役に、自然と癒しを大きな写真で見せる。20〜30代・インバウンドを想定したスマートフォンファースト設計。
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hotel-hanaemi
Tags: custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-thumbnails, responsive-layout, theme-options, translation-ready, one-column, two-columns, wide-blocks

旅房はなえみ - サウナとBBQを主役にしたモダンな宿テーマ
*/

/* ==========================================================================
   CSS変数（デザイントークン）

   配色の考え方:
   サウナの「温冷交代」をブランドカラーの軸に据える。
   森（深緑）を土台に、炎のオレンジと水風呂のターコイズを対に置く。
   この3色をそのまま3つの予約導線に割り当て、色を導線の識別子にする。
     炎  = サウナ当日予約（電話）… 最優先・最も目立つ
     水  = サウナ事前予約（Web）
     森  = 宿泊予約（Web）
   ========================================================================== */
:root {
  /* --- 森（ベース）: 朝里の深い森 --- */
  --color-forest-900: #14261f;
  --color-forest-700: #1e4338;
  --color-forest-500: #2c5f4f;
  --color-forest-300: #4f8a76;

  /* --- 水（クール）: 水風呂・朝里ダム湖のターコイズ --- */
  --color-aqua-600: #2a9d8a;
  --color-aqua-500: #35b8a2;
  --color-aqua-300: #7fd6c7;
  --color-aqua-100: #d9f2ed;

  /* --- 炎（ホット）: 薪ストーブ・BBQの熾火 --- */
  --color-ember-600: #c9512a;
  --color-ember-500: #e2673a;
  --color-ember-300: #f0a382;
  --color-ember-100: #fbe8e0;

  /* --- 砂・木肌（背景） --- */
  --color-sand-50: #faf8f4;
  --color-sand-100: #f2ede4;
  --color-sand-200: #e4dcd0;

  /* --- セマンティック（既存コードとの互換を保つ） --- */
  --color-primary: var(--color-forest-500);
  --color-primary-light: var(--color-forest-300);
  --color-primary-dark: var(--color-forest-700);
  --color-accent: var(--color-ember-500);
  --color-accent-light: var(--color-ember-300);
  --color-beige: var(--color-sand-50);
  --color-beige-dark: var(--color-sand-100);

  /* ニュートラル */
  --color-white: #ffffff;
  --color-off-white: #fafafa;
  --color-gray-100: #f5f4f2;
  --color-gray-200: #eceae6;
  --color-gray-300: #ddd9d3;
  --color-gray-500: #948f88;
  --color-gray-700: #57534e;
  --color-gray-900: #1c1b19;
  --color-black: #101010;

  /* タイポグラフィ
     明朝（和風旅館の記号）をやめ、ゴシックに統一。
     20〜30代・インバウンド向けにモダンで可読性の高い印象へ。
     Webフォントは使わず端末標準で完結させ、スマホの表示速度を優先する。 */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

  /* スペーシング */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  
  /* ブレークポイント（JS参照用） */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  
  /* トランジション */
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* ボーダー */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-gray-900);
  background-color: var(--color-white);
}

/* 見出しはゴシックの太字＋やや広めの字間で、素材写真に負けない強さを出す */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base), opacity var(--transition-base);
}

a:hover {
  color: var(--color-primary-dark);
  opacity: 0.9;
}

/* ==========================================================================
   レイアウト
   ========================================================================== */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ==========================================================================
   ユーティリティ
   ========================================================================== */
.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;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}