@charset "UTF-8";
/*!
 * landmark-bridge.css — 新CSS(v2)と旧本文CSS(content.css/sp.css)の架け橋。
 *
 * 役割:
 * 1. foundation.css が本文へ当てる過度なグローバルルールを緩和
 *    （見出しの明朝体強制、SP .inner 幅 !important 強制 等）
 * 2. wow-shim.js + animate.css 連携（.wow の初期状態と発火）
 * 3. 新v2枠組み（site-header-v2 等）と旧本文レイアウトの共存調整
 *
 * ハイブリッド移行における「本文崩れを防ぐ最小限の接着剤」。
 */

/* ============================================
 * 1. foundation.css 本文影響の緩和
 * ============================================ */

/* foundation.css は .site-shell--static:not(.hypersensitivity) #content h2/h3/h4 を
 * 明朝体（var(--site-font-display)）へ強制するが、landmark 本文はゴシック前提。
 * 本文見出しをゴシックへ戻す（h1 ページヘッダは v2 デザインで明朝維持）。 */
.site-shell--static-v2 #content h2,
.site-shell--static-v2 #content h3,
.site-shell--static-v2 #content h4,
.site-shell--static-v2 #content h5,
.site-shell--static-v2 #content h6 {
  font-family: var(--site-font-body, "Noto Sans JP", sans-serif);
}

/* SP で .site-shell #content .inner の幅が !important で強制される問題を緩和。
 * 旧本文の .inner は独自幅（PC 1000px 等）を持つため、SP だけ流体幅へ寄せる。 */
@media screen and (max-width: 1023px) {
  .site-shell--static-v2 #content .inner {
    /* foundation.css の !important を上書きするため、より詳細なセレクタで同等 !important。
     * 旧本文の意図（SP はほぼ全幅）を尊重しつつ、最小限の左右余白を確保。 */
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* foundation.css が #content の padding を 0 にするため、
 * 旧本文が期待する上下余白を復元。 */
.site-shell--static-v2 #content {
  padding-bottom: 0;
}

/* PC で #content の margin-top:46px（固定ナビ分）は v2 ナビ高さに合わせる。
 * 旧ナビ（.pc.new）と新ナビ（.site-nav-v2）の高さ差を吸収。 */
@media print, screen and (min-width: 1024px) {
  .site-shell--static-v2 #content {
    margin-top: 0;
  }
}

/* ============================================
 * 2. wow-shim.js + animate.css 連携（安全なフォールバック付き）
 * ============================================ */

/* .wow 要素は既定で表示（真っ白リスクを排除）。
 * wow-shim.js が IntersectionObserver でビューポート进入時に
 * .animated クラスを付与し、animate.css のアニメーションを発火。
 * JS が無効・失敗しても要素は表示されたまま。 */
.wow {
  visibility: visible;
  animation-fill-mode: both;
}

/* wow-shim.js が付与する .animated でアニメーション再生。
 * animate.css の fadeIn/fadeInUp 等が適用される。 */
.wow.animated {
  visibility: visible;
}

/* ============================================
 * 3. v2 枠組みと旧本文の共存調整
 * ============================================ */

/* 旧ナビ（nav.pc / navi.inc 出力）と新 v2 ヘッダが並存する index.php で、
 * レイアウト衝突を防ぐ。index.php は show_top_header:false で v2 ヘッダを
 * 出さないため、旧ナビだけが表示される構造を維持。 */
body#home.site-shell--static-v2 #wrapper > nav.pc {
  position: relative;
}

/* v2 フッタ（#f_bg）内の旧構造（.footer-content, .info, .footer-center 等）が
 * footer-v2.css と共存できるよう、競合しやすいプロパティを調整。 */
.site-shell--static-v2 #f_bg .footer-content {
  display: block;
}

/* 旧SPCTA（.footer-btn）と新v2 CTA（.footer-btn via cta-v2.css）の重複回避。
 * 旧本文の .footer-btn は cta-v2.css で上書きされるため、意図通りに固定表示。 */
.site-shell--static-v2 .footer-btn {
  z-index: 100;
}

/* page-header-v2.css が #page-header に flex レイアウトを当てるが、
 * 旧本文の #page-header は中央寄せ h1 のみのシンプル構造。
 * 最小高さとパディングを旧デザインに寄せる。 */
@media screen and (max-width: 1023px) {
  .site-shell--static-v2 #page-header .inner {
    min-height: auto;
    padding: 20px 16px;
  }
}

/* ============================================
 * 4. モバイルナビ第2階層（treatment サブメニュー）
 * ============================================ */

/* site_render_static_v2_mobile_nav が出力する .site-mobile-nav-v2__submenu の
 * 基本スタイル。新宿版には無い landmark 固有の2段構造。 */
.site-mobile-nav-v2__submenu {
  list-style: none;
  margin: 4px 0 8px;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--sv2-rule, rgba(95, 75, 50, 0.14));
}

.site-mobile-nav-v2__submenu li a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--sv2-ink-muted, #6a5b47);
  text-decoration: none;
  transition: color 0.18s ease;
}

.site-mobile-nav-v2__submenu li a:hover {
  color: var(--sv2-accent-ink, #5c4620);
}

/* ============================================
 * 5. .pc / .sp 出し分け（モダン media query）
 * ============================================ */

/* shell-v2.css が SP(max-width:1023px) で .site-shell--static-v2 .pc を
 * display:none にするが、これは .pc/.sp クラスを使う旧来のマークアップと
 * 衝突する。ここで .pc/.sp を意味論的に再定義し、モダンな media query で
 * 出し分け（ !important で shell-v2.css の上書きに勝つ）。
 *
 * 意味:
 *   .pc = PC画面（タブレット横以上）でのみ表示
 *   .sp = SP画面（タブレット縦以下）でのみ表示
 *
 * ブレイクポイントは旧CSS（max-width:480px / min-width:481px）の厳しい
 * 分割ではなく、モダンな 768px（タブレット境界）を採用。
 * 本文の <br class="sp"> 等の細かい改行制御もこれで機能する。
 */

/* PC画面（769px以上）: .pc 表示、.sp 非表示 */
@media print, screen and (min-width: 769px) {
  .site-shell--static-v2 .sp {
    display: none !important;
  }
}

/* SP画面（768px以下）: .sp 表示、.pc 非表示 */
@media screen and (max-width: 768px) {
  .site-shell--static-v2 .pc {
    display: none !important;
  }
}

/* <br class="sp"> / <br class="pc"> の改行制御。
 * 上記ルールで display:none になるが、br要素は初期値 display:block 相当なので
 * 表示時は inline 扱いで改行として機能するよう明示。 */
@media print, screen and (min-width: 769px) {
  .site-shell--static-v2 br.sp {
    display: inline !important;
    content: '';
  }
}
@media screen and (max-width: 768px) {
  .site-shell--static-v2 br.pc {
    display: inline !important;
    content: '';
  }
}