/* ============================================================
   CHiiRu — WordPress（Lightning子テーマ）用スタイル
   2026-08-24 作成 / 2026-08-24 改訂1・改訂2・改訂3

   ■改訂3で追加・修正したこと（2026-08-24）
     1. 見出し・アイキャッチ文字の下に出ていた青い線を除去
        （Lightning本体が h1〜h6 等に持つ既定の下線がここまで来ていた。
        既に一度、同じ理由でヘッダー／フッターが壊れているため、
        今回は h1〜h6・.eyebrow・p を広めに防御リセットしている）
     2. ロゴ画像が読み込めなかった時の代替表示（alt文字）に
        ブランドのフォント・色を当てた（ロゴ本体のアップロードは別途必要）
     3. アクセントカラーを #FF9F1C → #FFD23F に変更
        （--chiiru-accent2 の値を直しただけなので、差し色5箇所＋
        タグライン下線＋ハンバーガーメニューのホバー色に自動で反映される）
     4. 🆕 ページトップへ戻るボタン（右下・全ページ共通）
     5. 🆕 ハンバーガーメニューのデザイン強化
        （MENU の英字あしらい・傘の透かし・項目の順送りアニメーション・
        ホバー色を #FFD23F に）
     6. 🆕 スクロールで文字が下から現れるギミック（showBottom）を追加
        （本文（ABOUT・ACCESS・BLOGの見出しとリード文）に適用）

   ■改訂1・改訂2で直したこと
     1. 配色を「水色ベース（A案）」に変更（トップページは青が正・8/22決定）
        オレンジは差し色としてのみ使用（下線・区切り線・アイコン）
     2. Lightning本体と同じクラス名 site-header / site-footer を使っていたため
        Lightningのスタイルが流れ込んでいた
        → chiiru-header / chiiru-footer に改名
     3. Lightningのヘッダー・フッター・スライダーを隠すセレクタを
        実物のHTMLに合わせて修正
     4. 「追加CSSクラス」への依存をやめ、body:has(.chiiru) で自動判定
     5. ヘッダーの重なり順（z-index）を Lightning より確実に前面へ

   ⚠️ 未対応（実物を見比べないと直せないため保留）
     ・ブログカードの枠のイメージ
     ・フッターナビの色味
     Chrome拡張が切断中で staging と chiiru.com を並べて確認できなかった。
     スクリーンショットを共有いただくか、拡張の再接続後にあらためて直す。

   ■貼り付け先：Lightning子テーマの style.css
   ■貼り付け位置：先頭のテーマ情報コメントのすぐ下（@importを先頭に置くため）

   ■設計方針
     すべてのルールを「.chiiru」で囲み、Lightning本体と衝突させない。
     HTML側も各ブロックが <div class="chiiru"> で始まる。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Noto+Sans+JP:wght@300;400;500;700&family=Zen+Old+Mincho:wght@400;500;700&display=swap');


/* ============================================================
   0. Lightning既定の部品を隠して、全幅で表示する
   ------------------------------------------------------------
   ★「追加CSSクラス」の入力は不要です。
     body:has(.chiiru) ＝「このデザインのブロックが置かれているページ」
     を自動で判定するため、貼るだけで効きます。
     （念のため body.home でも効くようにしてあります）
   ★セレクタは chiiru.com の実物のHTMLを確認して書いています
   ============================================================ */

/* Lightningのヘッダー・フッター・トップスライダー・モバイルメニューを隠す */
body:has(.chiiru) #site-header,
body:has(.chiiru) > header.site-header,
body:has(.chiiru) .ltg-slide,
body:has(.chiiru) .lightning_swiper,
body:has(.chiiru) > footer.site-footer,
body:has(.chiiru) .site-body-bottom,
body:has(.chiiru) .vk-mobile-nav-menu-btn,
body:has(.chiiru) .vk-mobile-nav,
body:has(.chiiru) .breadcrumb,
body:has(.chiiru) .page-header,
body.home #site-header,
body.home > header.site-header,
body.home .ltg-slide,
body.home .lightning_swiper,
body.home > footer.site-footer,
body.home .site-body-bottom,
body.home .vk-mobile-nav-menu-btn,
body.home .vk-mobile-nav,
body.home .breadcrumb,
body.home .page-header { display: none !important; }

/* 本文エリアの横幅制限（1140px）と余白を解除して全幅にする */
body:has(.chiiru) .site-body,
body:has(.chiiru) .site-body-container,
body:has(.chiiru) .main-section,
body:has(.chiiru) .entry,
body:has(.chiiru) .entry-body,
body.home .site-body,
body.home .site-body-container,
body.home .main-section,
body.home .entry,
body.home .entry-body {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body:has(.chiiru) .entry-body > *,
body.home .entry-body > * { margin-top: 0; margin-bottom: 0; }

/* 管理バー（ログイン中のみ表示される黒い帯）とヘッダーが重ならないように */
body.admin-bar .chiiru .chiiru-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .chiiru .chiiru-header { top: 46px; }
}


/* ============================================================
   1. 色と文字の設定（デザインの土台）
   ------------------------------------------------------------
   ★キーカラー＝水色。--chiiru-mizu-deep を変えると全体の青が変わります
   ★オレンジ（--chiiru-accent2）は差し色専用です
   ============================================================ */
.chiiru {
  /* ブランドカラー：水色（A案） */
  --chiiru-mizu:      #B8DCE4;  /* やわらかい水色 */
  --chiiru-mizu-deep: #6FB4C9;  /* ロゴの青・アクセント */
  --chiiru-mizu-dark: #3F5A66;  /* 深い海の色・本文の濃い色 */
  --chiiru-mizu-mist: #E4F0F3;  /* ごく薄い水色：背景用 */

  /* 差し色：イエロー（2026-08-24変更 ─ 旧#FF9F1Cから統一。
     下線・区切り線・アイコン・ハンバーガーメニューのホバー色に使用） */
  --chiiru-accent2:   #FFD23F;

  /* グレー */
  --chiiru-hai:       #EDEEEE;
  --chiiru-hai-light: #F6F7F7;
  --chiiru-hai-mid:   #D5D8D8;
  --chiiru-hai-dark:  #8A9095;

  /* 文字と背景 */
  --chiiru-white:     #FFFFFF;
  --chiiru-paper:     #FBFCFC;
  --chiiru-ink:       #2B3840;
  --chiiru-ink-soft:  #667079;

  --bg:          var(--chiiru-white);
  --fg1:         var(--chiiru-ink);
  --fg2:         var(--chiiru-ink-soft);
  --fg3:         var(--chiiru-hai-dark);
  --border:      var(--chiiru-hai-mid);
  --border-soft: var(--chiiru-hai);

  /* フォント */
  --font-display:    'Cormorant Garamond', 'Zen Old Mincho', serif;
  --font-jp-display: 'Zen Old Mincho', 'Noto Serif JP', serif;
  --font-body:       'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono:       'SF Mono', 'JetBrains Mono', 'Menlo', monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);

  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg1);
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

.chiiru *,
.chiiru *::before,
.chiiru *::after { box-sizing: border-box; }

.chiiru h1, .chiiru h2, .chiiru h3,
.chiiru h4, .chiiru h5, .chiiru h6,
.chiiru p, .chiiru ul, .chiiru li { margin: 0; padding: 0; }
.chiiru ul { list-style: none; }
.chiiru img { max-width: 100%; height: auto; }
.chiiru a { text-decoration: none; }

/* Lightning本体が見出しや段落に持っている既定の下線・影を防御的に打ち消す。
   （EARTHING／ACCESS／BLOG の下に出ていた青い線の原因）
   ヘッダー／フッターの時と同じ「同じ要素に外側のCSSが被さる」問題。 */
.chiiru h1, .chiiru h2, .chiiru h3,
.chiiru h4, .chiiru h5, .chiiru h6,
.chiiru p, .chiiru .eyebrow, .chiiru .section-title {
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
}
/* Lightningは見出しに ::after（content:"." の細い棒）で下線を足してくる。
   ブログ記事タイトルの下に出ていた線の正体はこれ。
   見出しと段落に限って ::before / ::after を打ち消す。
   （メニューの下線や View more の矢印など、こちらが意図して使っている
     ::after は .chiiru 内の別セレクタなので影響しない） */
.chiiru h1::before, .chiiru h1::after,
.chiiru h2::before, .chiiru h2::after,
.chiiru h3::before, .chiiru h3::after,
.chiiru h4::before, .chiiru h4::after,
.chiiru h5::before, .chiiru h5::after,
.chiiru h6::before, .chiiru h6::after {
  display: none !important;
  content: none !important;
}

/* ロゴ画像が読み込めない間の代替表示（alt文字）に、ブランドらしい見た目を当てる。
   ★logo01 をアップロードしてsrcを差し替えれば、この指定は使われなくなる */
.chiiru .brand img,
.chiiru .footer-logo {
  font-family: var(--font-jp-display, serif);
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--chiiru-mizu-dark, #3F5A66);
}


/* ============================================================
   2. ヘッダー
   ============================================================ */
/* z-index を高くしているのは、Lightning側の要素より必ず前面に出すため。
   （.chiiru の親要素が重なり順のグループを作ってしまうことへの保険） */
.chiiru .chiiru-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  transition: box-shadow .32s var(--ease), padding .32s var(--ease);
}
.chiiru .chiiru-header.scrolled {
  box-shadow: 0 1px 0 rgba(63,90,102,0.06);
  padding: 14px 40px;
}
.chiiru .chiiru-header .brand img { height: 38px; display: block; width: auto; }
/* タグライン。
   2026-08-24：中央ではなく「メインビジュアル右上の列」に合わせて右寄せ。
   ハンバーガーの左どなりに置き、ヒーロー右カラム（ボタン3つの列）と
   縦のラインが揃うようにしている。
   ★位置を微調整したい場合は margin-right の値を変えてください。 */
.chiiru .chiiru-header .tagline {
  font-family: var(--font-jp-display);
  font-size: 12px;
  color: var(--fg2);
  letter-spacing: 0.14em;
  margin-left: auto;
  margin-right: 28px;
}
/* ▼差し色オレンジ①：タグラインの下線 */
.chiiru .chiiru-header .tagline span {
  border-bottom: 1px solid var(--chiiru-accent2);
  padding-bottom: 3px;
}

/* ハンバーガーボタン */
.chiiru .burger {
  width: 40px; height: 26px; background: transparent; border: 0;
  position: relative; cursor: pointer; padding: 0;
}
.chiiru .burger span {
  position: absolute; left: 4px; right: 4px; height: 1px;
  background: var(--fg1); transition: transform .3s var(--ease), opacity .2s;
}
.chiiru .burger span:nth-child(1) { top: 5px; }
.chiiru .burger span:nth-child(2) { top: 12px; }
.chiiru .burger span:nth-child(3) { top: 19px; }
.chiiru .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.chiiru .burger.open span:nth-child(2) { opacity: 0; }
.chiiru .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* メニューの中身
   ------------------------------------------------------------
   ★以前は hidden 属性で表示/非表示していたが、hidden は display:none に
     なるためトランジションが効かなかった。is-open クラスに変更し、
     常にDOMには存在させたまま opacity/visibility で切り替えることで
     開閉のアニメーションが効くようにした（JS側もあわせて変更）。 */
.chiiru .menu-overlay {
  position: fixed; inset: 0; z-index: 9985;
  background: rgba(255,255,255,0.98);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
  overflow: hidden;
}
.chiiru .menu-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .35s var(--ease);
}

/* 傘の透かし（背景の装飾。「素っ気ない」の対策） */
.chiiru .menu-overlay::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 380px; height: 280px;
  transform: translate(-50%, -46%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140'%3E%3Cg fill='none' stroke='%233F5A66' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 80 Q60 10 130 78'/%3E%3Cpath d='M45 55 Q60 68 76 78'/%3E%3Cpath d='M80 22 Q80 55 80 78'/%3E%3Cpath d='M115 55 Q95 68 80 78'/%3E%3Cpath d='M80 78 L80 128'/%3E%3Cpath d='M80 128 Q72 132 68 128'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.06;
  pointer-events: none;
}

/* MENU の英字あしらい（BLOGセクションの eyebrow と同じ見せ方） */
.chiiru .menu-overlay .menu-eyebrow {
  position: relative;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--chiiru-mizu-dark);
  margin-bottom: 32px;
  text-align: center;
}

.chiiru .menu-overlay ul {
  position: relative;
  display: flex; flex-direction: column; gap: 24px; text-align: center;
}
.chiiru .menu-overlay li {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
/* 項目が上から順番に現れる（開いた瞬間の素っ気なさ対策） */
.chiiru .menu-overlay.is-open li { opacity: 1; transform: translateY(0); }
.chiiru .menu-overlay li:nth-child(1) { transition-delay: .08s; }
.chiiru .menu-overlay li:nth-child(2) { transition-delay: .14s; }
.chiiru .menu-overlay li:nth-child(3) { transition-delay: .20s; }
.chiiru .menu-overlay li:nth-child(4) { transition-delay: .26s; }
.chiiru .menu-overlay li:nth-child(5) { transition-delay: .32s; }

/* メニュー項目＝英字（小）＋日本語（大）の2行構成 */
.chiiru .menu-overlay a {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px;
  color: var(--fg1);
  padding-bottom: 4px;
  transition: color .25s;
}
.chiiru .menu-overlay .menu-en {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--chiiru-hai-dark);
  /* letter-spacing のぶん右に寄って見えるのを打ち消す */
  text-indent: 0.3em;
  transition: color .25s;
}
.chiiru .menu-overlay .menu-jp {
  font-family: var(--font-jp-display);
  font-size: 26px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  line-height: 1.4;
}
/* ホバー時に下からアクセントカラーの下線が伸びる */
.chiiru .menu-overlay a::after {
  content: '';
  position: absolute; left: 50%; bottom: -2px;
  width: 0; height: 1px;
  background: var(--chiiru-accent2);
  transition: width .3s var(--ease), left .3s var(--ease);
}
.chiiru .menu-overlay a:hover,
.chiiru .menu-overlay a:hover .menu-en { color: var(--chiiru-accent2); }
.chiiru .menu-overlay a:hover::after { width: 100%; left: 0; }

@media (max-width: 480px) {
  .chiiru .menu-overlay .menu-jp { font-size: 21px; }
  .chiiru .menu-overlay .menu-en { font-size: 9px; }
  .chiiru .menu-overlay ul { gap: 20px; }
}


/* ============================================================
   3. メインビジュアル（ヒーロー）
   ============================================================ */
.chiiru .hero {
  padding: 88px 40px 40px;
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 40px 1fr 84px;
  gap: 24px;
  align-items: stretch;
  background: #fff;
}
.chiiru .hero-vertical {
  writing-mode: vertical-rl;
  font-family: var(--font-jp-display);
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--fg3);
  padding-top: 40px;
  align-self: flex-start;
}
.chiiru .hero-visual {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  min-height: calc(100vh - 200px);
  background: var(--chiiru-mizu-mist);
}
.chiiru .hero-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  max-width: none;
}
.chiiru .hero-slide {
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity;
}
.chiiru .hero-slide.is-active { opacity: 1; }

.chiiru .hero-dots {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 20px;
  display: flex; justify-content: center; gap: 10px;
}
.chiiru .hero-dot {
  width: 8px; height: 8px; padding: 0;
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.chiiru .hero-dot.is-active { background: rgba(255,255,255,0.95); transform: scale(1.15); }

.chiiru .hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
  /* 水色ベース：青みのある薄いオーバーレイ */
  background: linear-gradient(180deg, rgba(63,90,102,0.10) 0%, rgba(63,90,102,0.28) 100%);
  padding: 40px;
  text-align: center;
}
.chiiru .hero-umbrella { width: 200px; height: auto; opacity: 0.9; margin-bottom: 8px; }
/* スマホ専用の一文。パソコンでは左の縦書きが出るので隠す */
.chiiru .hero-sub-sp { display: none; }
.chiiru .hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 300;
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 0 1px 20px rgba(0,0,0,0.15);
  line-height: 1.2;
}

/* 右側のボタン3つ */
.chiiru .hero-cta-rail {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 32px;
}
.chiiru .cta-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
}
.chiiru .cta-item .cta-icon {
  width: 54px; height: 54px;
  border: 1px solid var(--chiiru-mizu-deep);
  color: var(--chiiru-mizu-deep);
  display: flex; align-items: center; justify-content: center;
  border-radius: 2px;
  transition: all .32s var(--ease);
}
.chiiru .cta-item:hover .cta-icon { background: var(--chiiru-mizu-deep); color: #fff; }
.chiiru .cta-item .cta-label {
  font-family: var(--font-jp-display);
  font-size: 11px;
  color: var(--fg1);
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: color .32s var(--ease);
}
.chiiru .cta-item:hover .cta-label { color: var(--chiiru-mizu-dark); }

/* お知らせ */
.chiiru .news-banner {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
  padding: 20px;
  font-size: 13px;
  color: var(--fg1);
  flex-wrap: wrap;
}
.chiiru .news-date {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--chiiru-mizu-dark);
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
}
.chiiru .news-divider { width: 1px; height: 14px; background: var(--border); }
.chiiru .news-msg { color: var(--fg2); letter-spacing: 0.04em; }


/* ============================================================
   4. 各セクション共通のパーツ
   ============================================================ */
/* EARTHING／ACCESS／BLOG の英字。
   2026-08-24 修正：色をデザイン案と同じ #6FB4C9（--chiiru-mizu-deep）に。
   誤って濃い #3F5A66（--chiiru-mizu-dark）にしていた。 */
.chiiru .eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.32em;
  color: var(--chiiru-mizu-deep);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.chiiru .section-title {
  font-family: var(--font-jp-display);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 500;
  color: var(--fg1);
  letter-spacing: 0.1em;
  line-height: 1.5;
  margin: 0 0 20px;
}
.chiiru .section-lead {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg2);
  line-height: 2;
}


/* ============================================================
   5. ABOUT（アーシング／詩）
   ============================================================ */
.chiiru .about {
  padding: 128px 40px 40px;
  background: #fff;
  position: relative;
}
.chiiru .about-inner {
  position: relative;
  max-width: 1100px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 56px;
  align-items: stretch;
}
.chiiru .about-left {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  flex: 1.25 1 480px;
  min-width: 0;
}
/* ★左側の背景写真はここで差し替えます（横1600〜2560px推奨・500KB以下） */
.chiiru .about-left-bg {
  position: absolute; inset: 0;
  background: url('https://staging.moregreen-lab.com/chiiru/assets/about_bg.jpg') center center / cover no-repeat;
}
.chiiru .about-left-body { position: relative; padding: 56px 40px; }
.chiiru .about-right { flex: 1 1 360px; min-width: 0; }
.chiiru .about-left .eyebrow,
.chiiru .about-left .about-title {
  text-shadow: 0 1px 3px rgba(255,255,255,0.9), 0 0 14px rgba(255,255,255,0.7);
}
.chiiru .about-title {
  font-family: var(--font-jp-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  color: var(--fg1);
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.chiiru .about-title-jp {
  display: inline-block;
  font-size: 0.7em;
  color: var(--chiiru-mizu-dark);
  margin-top: 12px;
  letter-spacing: 0.10em;
  white-space: nowrap;  /* 途中改行を禁止（スマホでは解除） */
}
.chiiru .about-poem {
  font-family: var(--font-jp-display);
  font-size: 17px;
  color: var(--fg1);
  line-height: 2.4;
  letter-spacing: 0.14em;
}
/* ▼差し色オレンジ②：区切り線 */
.chiiru .about-divider {
  width: 40px; height: 1px; background: var(--chiiru-accent2);
  margin: 40px 0;
}
.chiiru .about-msg {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg2);
  line-height: 2.2;
  letter-spacing: 0.06em;
}

/* 自動で流れる写真スライダー */
.chiiru .about-image {
  position: relative;
  margin: 96px auto 0;
  max-width: 100%;
  overflow: hidden;
}
.chiiru .about-image-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: chiiru-image-scroll 36s linear infinite;
}
.chiiru .about-image-track img {
  width: 420px; aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; display: block; flex-shrink: 0;
  max-width: none;
}
@keyframes chiiru-image-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   6. ACCESS（アクセス）
   ============================================================ */
.chiiru .access {
  padding: 128px 40px;
  background: var(--chiiru-hai-light);
}
.chiiru .access-header {
  max-width: 780px; margin: 0 auto 64px;
  text-align: center;
}
.chiiru .access-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: start;
}
.chiiru .map-frame {
  aspect-ratio: 3/2;
  background: var(--chiiru-mizu-mist);
  border: 1px solid var(--border);
  overflow: hidden;
}
.chiiru .access-info { display: flex; flex-direction: column; gap: 32px; }
.chiiru .info-block {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.chiiru .info-block:last-child { border-bottom: 0; }
.chiiru .info-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-jp-display);
  font-size: 13px;
  color: var(--chiiru-mizu-dark);
  letter-spacing: 0.2em;
  font-weight: 500;
}
/* ▼差し色オレンジ③：アクセスのアイコン */
.chiiru .info-label svg { color: var(--chiiru-accent2); flex-shrink: 0; }
.chiiru .info-value {
  font-size: 14px;
  color: var(--fg1);
  line-height: 1.9;
  letter-spacing: 0.04em;
}
.chiiru .info-value p { margin: 0 0 6px; }
.chiiru .info-sub {
  color: var(--fg3); font-size: 12px;
  margin-top: 6px !important; line-height: 1.8;
}
.chiiru .info-sub a {
  color: var(--chiiru-mizu-dark);
  border-bottom: 1px solid var(--chiiru-accent2);
}


/* ============================================================
   7. BLOG（日々の記録）
   ============================================================ */
.chiiru .blog-section { padding: 128px 0 96px; background: #fff; }
.chiiru .blog-header { text-align: center; padding: 0 40px; margin-bottom: 64px; }
.chiiru .blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; width: 100%;
}
.chiiru .blog-card {
  color: inherit;
  display: block;
  transition: opacity .32s var(--ease);
  border: 0;                                    /* Lightningが足す下線を消す */
  border-right: 1px solid var(--border);
}
.chiiru .blog-card:last-child { border-right: 0; }
.chiiru .blog-card:hover .blog-img img { transform: scale(1.04); }
.chiiru .blog-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--chiiru-hai);
}
.chiiru .blog-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.chiiru .blog-body { padding: 24px 32px 32px; }
/* ▼差し色オレンジ④：ブログのカテゴリ名（8/22「ブログのあたりにオレンジを」） */
.chiiru .blog-cat {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--chiiru-accent2);
  text-transform: uppercase;
}
.chiiru .blog-title {
  font-family: var(--font-jp-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--fg1);
  margin: 12px 0;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.chiiru .blog-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg3);
  letter-spacing: 0.14em;
}
.chiiru .blog-more { text-align: center; padding: 64px 40px 0; }
/* ▼差し色オレンジ⑤：View more の下線 */
.chiiru .ghost-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--chiiru-mizu-dark);
  padding: 12px 4px;
  border-bottom: 1px solid var(--chiiru-accent2);
  transition: color .3s;
  text-transform: uppercase;
}
.chiiru .ghost-link:hover { color: var(--chiiru-mizu-deep); }
.chiiru .arr {
  display: inline-block; width: 20px; height: 1px; background: currentColor;
  position: relative;
}
.chiiru .arr::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}


/* ============================================================
   8. フッター
   ★背景の砂の写真はここで差し替えます
   ============================================================ */
/* ★フィルタ（写真の上にかぶせる膜）の色。
   2026-08-24 修正：デザイン案（staging）と同じ「暖かいこげ茶 32%」に戻した。
   誤って「青みグレー 42%」にしていたため、写真が暗く青被りして見えていた。
   数値を上げると暗く、下げると明るくなる。 */
.chiiru .chiiru-footer {
  background:
    linear-gradient(rgba(46,36,22,0.32), rgba(46,36,22,0.32)),
    url('https://moregreen-lab.com/optimized/260820/260820_04.webp') center center / cover no-repeat;
  color: #fff;
  padding: 64px 40px 32px;
}
.chiiru .footer-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.chiiru .footer-logo { height: 48px; width: auto; filter: brightness(0) invert(1); }
.chiiru .footer-tag {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.32em;
  font-style: italic;
  color: rgba(255,255,255,0.85);
}
.chiiru .footer-links {
  display: flex; gap: 32px; margin-top: 12px;
  flex-wrap: wrap; justify-content: center;
}
.chiiru .footer-links a {
  color: rgba(255,255,255,0.85);
  font-family: var(--font-jp-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  transition: color .2s;
}
.chiiru .footer-links a:hover { color: #fff; }
.chiiru .footer-copy {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.65);
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: 24px;
  width: 100%;
  text-align: center;
}


/* ============================================================
   8.5 ページトップへ戻るボタン（全ページ共通）
   ------------------------------------------------------------
   HTML／表示・非表示の制御は chiiru-00-common.html 側にある。
   ============================================================ */
.chiiru .chiiru-backtotop {
  position: fixed; right: 24px; bottom: 24px; z-index: 9980;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--chiiru-accent2);
  border-radius: 50%;
  color: var(--chiiru-accent2);
  box-shadow: 0 4px 16px rgba(63,90,102,0.18);
  cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease),
              visibility 0s linear .3s, background .2s ease, color .2s ease;
}
.chiiru .chiiru-backtotop.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .2s ease, color .2s ease;
}
.chiiru .chiiru-backtotop:hover { background: var(--chiiru-accent2); color: #fff; }
.chiiru .chiiru-backtotop svg { width: 18px; height: 18px; }
@media (max-width: 600px) {
  .chiiru .chiiru-backtotop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}


/* ============================================================
   8.6 スクロールで文字が下から現れるギミック（showBottom）
   ------------------------------------------------------------
   2026-08-24 追加。ご指定のコードをそのまま反映（SCSSのネストを
   通常のCSSに直しただけで、動きの仕組みは変えていない）。
   本文（ABOUT・ACCESS・BLOGの見出し／リード文）に適用ずみ。
   文字を1文字ずつ span.char に分割して isActive で順番に立ち上がらせる。
   分割そのものは chiiru-00-common.html 内のJSが自動で行うため、
   本文のHTML側は showBottom / headline / description のクラスを
   付けるだけでよい（1文字ずつ手で書く必要はない）。
   ============================================================ */
.chiiru .showBottom {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
.chiiru .showBottom .char {
  display: inline-block;
  transform-origin: 50% 100%;
  translate: 0 100%;
}
.chiiru .showBottom .headline,
.chiiru .showBottom .description > span {
  display: block;
  overflow: hidden;
  line-height: 1;
}
.chiiru .showBottom.isActive .headline .char {
  --delay: 0.02s;
  translate: 0;
  /* indexの2乗の遅延時間とすることで段々と出現が遅くなる */
  transition: translate 1s var(--ease-out-quart)
    calc((var(--delay) * var(--index) * var(--index)));
}
.chiiru .showBottom.isActive .description .char {
  --delay: 0.004s;
  translate: 0;
  transition: translate 1s var(--ease-out-quart)
    calc(var(--delay) * var(--index) * var(--index) * 0.01);
}
/* ↑ここまでがご指定のコード（そのまま）。

   ------------------------------------------------------------
   以下は独自追加（行間の復旧）
   ------------------------------------------------------------
   ご指定のコードは .headline と .description > span に line-height:1 を
   指定する仕様。文字を下から出すために「1行ぶんの高さで切り取る」必要が
   あるためで、これ自体は正しい。
   ただし line-height:1 のままだと複数行の見出し・本文が
   ぎゅうぎゅうに詰まって見える（「都心のすぐそばに／逗子・葉山で過ごす半日」で
   発生していた現象）。
   そこで JS 側で <br> ごとに1行ずつ span に包み、
   行と行の“あいだ”にだけ余白を足して元のゆったりした行間に戻している。
   ★詰め具合はこの2つの数値で調整できます */
.chiiru .showBottom .headline > span,
.chiiru .showBottom .description > span {
  display: block;
  overflow: hidden;
  line-height: 1;
}
/* 行間はデザイン案（staging）の line-height を実測して、
   そこから 1（＝文字の高さ）を引いた値を余白として与えている。
     例）ACCESS見出し：line-height 1.5 → 余白 0.5em
   これで元のデザインと同じ行間に見える。 */
.chiiru .showBottom .headline > span:not(:last-child),
.chiiru .showBottom .description > span:not(:last-child) {
  margin-bottom: var(--line-gap, 0.5em);
}
.chiiru .showBottom .section-title { --line-gap: 0.50em; }  /* 実測 1.5 */
.chiiru .showBottom .about-title   { --line-gap: 0.60em; }  /* 実測 1.6 */
.chiiru .showBottom .section-lead  { --line-gap: 1.00em; }  /* 実測 2.0 */
.chiiru .showBottom .about-poem    { --line-gap: 1.40em; }  /* 実測 2.4 */
.chiiru .showBottom .about-msg     { --line-gap: 1.20em; }  /* 実測 2.2 */

/* 見出しの中に入れ子の span（.about-title-jp など）がある場合、
   上の「> span」指定が効いてしまうと改行や字下げが崩れるため打ち消す */
.chiiru .showBottom .headline > span > span,
.chiiru .showBottom .description > span > span { display: inline; overflow: visible; }


/* ============================================================
   9. スマートフォン・タブレット対応
   ============================================================ */
@media (max-width: 900px) {
  .chiiru .chiiru-header { padding: 14px 20px; }
  .chiiru .chiiru-header .tagline { display: none; }
  .chiiru .hero { padding: 74px 20px 20px; grid-template-columns: 24px 1fr 68px; gap: 12px; }
  .chiiru .hero-vertical { font-size: 11px; letter-spacing: 0.3em; }
  .chiiru .hero-cta-rail { gap: 20px; }
  .chiiru .cta-item .cta-icon { width: 44px; height: 44px; }
  .chiiru .about-image-track img { width: 320px; }
  .chiiru .about,
  .chiiru .access,
  .chiiru .blog-section { padding-left: 20px; padding-right: 20px; }
  .chiiru .about-inner { flex-direction: column; gap: 40px; }
  .chiiru .about { padding-top: 88px; }
  .chiiru .about-left-body { padding: 40px 24px; }
  .chiiru .about-title-jp { white-space: normal; }
  .chiiru .access-grid { grid-template-columns: 1fr; gap: 40px; }
  .chiiru .blog-grid { grid-template-columns: 1fr; }
  .chiiru .blog-card { border-right: 0; border-bottom: 1px solid var(--border); }
}


/* ------------------------------------------------------------
   9-2. スマートフォン（〜600px）のメインビジュアル最適化
   ------------------------------------------------------------
   ★ここが「スマホで最適化されていない」の対応箇所。
     PCは「縦書き｜写真｜ボタン3つ」の横3列だが、スマホでその3列を
     そのまま維持すると、写真の幅が画面の6割ほどまで痩せたうえに
     高さだけ 100vh 近く残るため、極端に細長い写真になっていた。
     スマホでは縦積みに変更する：
       ① 写真は画面いっぱいの幅で、縦長すぎない比率に
       ② 縦書きのコピーは写真の上に重ねる（場所を取らせない）
       ③ ボタン3つは写真の下に横並び
   ------------------------------------------------------------ */
@media (max-width: 600px) {

  /* ヘッダー：タグラインをロゴの上に、中央揃え・横書きで置く */
  .chiiru .chiiru-header {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
    padding: 10px 16px;
  }
  .chiiru .chiiru-header .tagline {
    display: block;              /* 900px以下で消していたのを復活 */
    order: -1;                   /* ロゴより前＝上の行へ */
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .chiiru .hero {
    display: block;               /* 3列グリッドをやめる */
    min-height: 0;                /* 100vhの縛りを外す */
    position: relative;
    padding: 92px 0 24px;         /* 左右の余白をゼロに＝写真を画面いっぱいに */
  }

  /* ① 写真：画面幅いっぱい（フルブリード）・4:5の縦長 */
  .chiiru .hero-visual {
    min-height: 0;
    aspect-ratio: 4 / 5;
    width: 100%;
    border-radius: 0;
  }
  .chiiru .hero-overlay { padding: 20px; gap: 10px; }
  .chiiru .hero-umbrella { width: 108px; margin-bottom: 0; }
  .chiiru .hero-title {
    font-size: 26px;
    letter-spacing: 0.08em;
    line-height: 1.35;
  }

  /* ② 「海と山に囲まれた…」は英字の下に、中央揃え・横書きで表示。
        パソコン用の縦書き（.hero-vertical）はスマホでは隠す。 */
  .chiiru .hero-vertical { display: none; }
  .chiiru .hero-sub-sp {
    display: block;
    font-family: var(--font-jp-display);
    font-size: 11px;
    letter-spacing: 0.16em;
    line-height: 1.9;
    color: rgba(255,255,255,0.94);
    text-align: center;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
    margin-top: 2px;
  }

  /* ③ ボタン3つは写真の下に横並び */
  .chiiru .hero-cta-rail { padding: 0 16px; }
  .chiiru .news-banner { padding-left: 16px; padding-right: 16px; }
  .chiiru .hero-cta-rail {
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    gap: 8px;
    margin-top: 22px;
  }
  .chiiru .cta-item { flex: 1; gap: 6px; }
  .chiiru .cta-item .cta-icon { width: 42px; height: 42px; }
  .chiiru .cta-item .cta-icon svg { width: 22px; height: 22px; }
  .chiiru .cta-item .cta-label { font-size: 10px; letter-spacing: 0.06em; }

  /* お知らせは縦積みにして読みやすく */
  .chiiru .news-banner {
    flex-direction: column;
    gap: 6px;
    padding: 20px 4px 0;
    font-size: 12px;
    text-align: center;
  }
  .chiiru .news-divider { display: none; }

  /* 流れる写真スライダーもスマホ幅に合わせる */
  .chiiru .about-image-track { gap: 12px; }
  .chiiru .about-image-track img { width: 240px; }
  .chiiru .about-image { margin-top: 64px; }

  /* 見出し・余白の詰め */
  .chiiru .about { padding: 72px 20px 32px; }
  .chiiru .access { padding: 72px 20px; }
  .chiiru .blog-section { padding: 72px 0 64px; }
  .chiiru .access-header { margin-bottom: 40px; }
}


/* ============================================================
   10. 動きを減らす設定の方への配慮（触らないでください）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .chiiru .hero-slide { transition: none; }
  .chiiru .about-image-track { animation: none; }
  .chiiru .showBottom .char { transition: none !important; translate: 0 !important; }
  .chiiru .menu-overlay li { transition: none !important; }
}