@charset "utf-8";
/* =========================================================
   トップページ専用（2026年10月）
   メイン画像を固定し、その上を本文が重なりながらスクロール
   （「ご案内・お知らせ」の横帯は全ページ共通のため sip2026.css に移しました）
   ※ sip2026.css の後に読み込みます
   ========================================================= */

/* ---------- 1. メイン画像の上を本文がスクロール ---------- */
:root { --sip-head-h: 72px; }              /* ヘッダーの高さ（画像を止める位置） */
@media (max-width: 960px) { :root { --sip-head-h: 60px; } }

.sip-top .sip-visual.is-image {
  position: sticky;
  top: var(--sip-head-h);
  z-index: 0;
}
/* 画面より画像が大きい場合だけ、上下を少しだけ切って画面内に収める */
.sip-top .sip-visual.is-image img {
  max-height: calc(100vh - var(--sip-head-h));
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% 30%;
  will-change: transform, filter;
}

/* 画像より後ろの部分（本文〜フッター）を前面に重ねる */
.sip-over {
  position: relative;
  z-index: 1;
  background: var(--white);
  box-shadow: 0 -14px 30px rgba(20, 60, 100, .18);
}

/* 動きを減らす設定の方には、固定表示を行わない */
@media (prefers-reduced-motion: reduce) {
  .sip-top .sip-visual.is-image { position: relative; top: auto; }
  .sip-top .sip-visual.is-image .sip-visual-bg { transform: none !important; filter: none !important; }
}

/* ---------- 2. ロゴ・キャッチフレーズを写真の上部（メニューから少し離した位置）に重ねる ---------- */
/* 写真は上端を基準に表示し、ロゴ・キャッチフレーズは写真の幅に合わせて同じ位置・大きさで重なります
   （スカイツリー・東京タワーが隠れない位置） */
.sip-top .sip-visual.is-image .sip-visual-bg { object-position: 50% 0; }
.sip-top .sip-visual.is-image img.sip-visual-catch {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: 43.56%;             /* 写真の幅に対する大きさ（白いぼかし部分を含む） */
  height: auto;
  max-height: none;
  margin-top: -0.515%;       /* 写真の幅に対する割合：ロゴの上に少しすき間ができる位置 */
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  will-change: auto;
}

/* スマートフォン：写真が小さいので、ロゴ・キャッチフレーズを少し大きめに */
@media (max-width: 640px) {
  .sip-top .sip-visual.is-image img.sip-visual-catch { width: 62%; margin-top: 0; }
}