@charset "UTF-8";
/*!
 * skyshika-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)）へ強制するが、skyshika 本文はゴシック前提。
 * 本文見出しをゴシックへ戻す（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 でアニメーション再生。 */
.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 の
 * 基本スタイル。新宿版には無い skyshika 固有の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 クラスを使う旧来マークアップと衝突する。
 * 意味論的に再定義し、モダンな media query で出し分け。
 *   .pc = PC画面（769px以上）でのみ表示
 *   .sp = SP画面（768px以下）でのみ表示
 */

@media print, screen and (min-width: 769px) {
  .site-shell--static-v2 .sp {
    display: none !important;
  }
  .site-shell--static-v2 br.sp {
    display: inline !important;
    content: '';
  }
}

@media screen and (max-width: 768px) {
  .site-shell--static-v2 .pc {
    display: none !important;
  }
  .site-shell--static-v2 br.pc {
    display: inline !important;
    content: '';
  }
}