@charset "UTF-8"; /* ========================================================= 料金改定対応 FVお知らせ帯＋追従バナー（事前検索サイト→現行サイト導線） 2026-06-15 / 工程B（事前検索サイト・日本語） - キャンペーン用の独立ファイル。撤去時は本ファイルと index.html の 該当マークアップ・の読込・直前のJS読込を削除すれば原状復帰可。 - デザイン: Figma 6OOW45EqW2gp1tAKmuZRhX（PC帯 8-20 / PCバナー 17-260 / SP帯 23-530 ほか） - color tokens: blue #3756a2 / light-blue #b2e6ff / light-blue_hover #c8edff yellow #ffff22 / toggle #7acdf6 / toggle_icon #274388 / white - 挙動: FVお知らせ帯がスクロールで画面外になったら追従バナーを表示（JS/IntersectionObserver） ========================================================= */ /* SP専用の改行（PCでは無効） */ .tr-br-sp { display: none; } /* 外部リンク（別タブ）アイコン：共通 blank_icon.png を mask で currentColor 着色 （青背景＝白／淡青背景＝青 と、リンク文字色に追従して色が変わる） */ .tr-ext { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url(/img/common/blank_icon.png) no-repeat center / contain; mask: url(/img/common/blank_icon.png) no-repeat center / contain; vertical-align: -0.1em; } /* mask 非対応ブラウザ向けフォールバック（画像をそのまま表示） */ @supports not ((-webkit-mask: url("x")) or (mask: url("x"))) { .tr-ext { background-color: transparent; background: url(/img/common/blank_icon.png) no-repeat center / contain; } } /* ===================== FVお知らせ帯 ===================== */ .tr-notice { width: 100%; background: #3756a2; } .tr-notice__inner { /* 帯コンテンツ（デザイン準拠で約1100px・中央寄せ） */ width: 92%; max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 24px 0; box-sizing: border-box; } .tr-notice__text { flex: 1 1 0; min-width: 0; color: #fff; } /* 流動幅・leadは成り行きで折返し */ .tr-notice__lead { margin: 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700; line-height: 1.6; } .tr-notice__date { display: inline-flex; align-items: baseline; gap: 2px; border-bottom: 6px solid #ffff22; /* 黄色アンダーライン */ } .tr-notice__date .tr-num { font-size: 32px; } .tr-notice__date .tr-unit { font-size: 20px; } .tr-notice__leadtxt { font-size: 20px; } .tr-notice__note { /* ※ をぶら下げインデント（折返し行は本文位置に揃う） */ display: flex; gap: 4px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; font-weight: 400; line-height: 1.6; color: #fff; } .tr-notice__noteMark { flex-shrink: 0; } .tr-notice__noteTxt { flex: 1; min-width: 0; } .tr-notice__btn { display: flex; align-items: center; gap: 24px; flex: 1 1 0; /* 外枠に対してリキッド（流動幅） */ min-width: 0; min-height: 72px; /* 文言折返し時も崩れないよう min-height */ padding: 8px 32px; border-radius: 4px; background: #b2e6ff; color: #3756a2; text-decoration: none; font-family: "Noto Sans JP", sans-serif; } .tr-notice__btn:hover { background: #c8edff; } /* light-blue01-hovered */ .tr-notice__btnTxt { flex: 1 1 auto; /* テキストが伸び、区切り線＋アイコンを右端へ */ min-width: 0; font-weight: 700; line-height: 1.6; font-size: 16px; } .tr-notice__btnDate { display: inline-flex; align-items: baseline; gap: 2px; } .tr-notice__btnDate .tr-num { font-size: 28px; } .tr-notice__btnDate .tr-unit { font-size: 16px; } .tr-notice__divider { width: 1px; height: 40px; flex-shrink: 0; background: rgba(55, 86, 162, 0.5); } .tr-notice__btn .tr-ext { width: 16px; height: 16px; } /* 既存サイトの a:link/a:visited/a:hover(色・下線)より詳細度を上げて確実に適用 */ #trNotice .tr-notice__btn, #trNotice .tr-notice__btn:link, #trNotice .tr-notice__btn:visited, #trNotice .tr-notice__btn:hover { color: #3756a2; text-decoration: none; } /* ===================== 追従バナー ===================== */ .tr-banner { position: fixed; top: 140px; /* ※実サイトのヘッダー実高に被らないか要実機確認 */ right: 22px; z-index: 1000000; display: none; /* 帯がスクロールアウトするとJSで表示 */ font-family: "Noto Sans JP", sans-serif; } .tr-banner.is-visible { display: block; } .tr-banner__body { position: relative; width: max-content; box-sizing: border-box; padding: 16px 40px; background: #b2e6ff; border-radius: 4px; box-shadow: 0 0 24px rgba(126, 166, 186, 0.16); } .tr-banner__body:hover { background: #c8edff; } .tr-banner__link { display: flex; flex-direction: column; gap: 4px; color: #3756a2; text-decoration: none; } #trBanner .tr-banner__link, #trBanner .tr-banner__link:link, #trBanner .tr-banner__link:visited, #trBanner .tr-banner__link:hover { color: #3756a2; text-decoration: none; } .tr-banner__line1 { text-align: left; font-weight: 700; line-height: 1.6; } .tr-banner__line1 .tr-num { font-size: 22px; } .tr-banner__line1 .tr-unit { font-size: 14px; } .tr-banner__line2 { font-size: 16px; font-weight: 700; line-height: 1.3; } .tr-banner__line2 .tr-ext { margin-left: 6px; } /* 開閉トグル（− / ＋）。丸形・白い外周リング・viewport固定で位置不動。 */ .tr-banner__toggle { position: fixed; top: 124px; right: 8px; width: 32px; height: 32px; padding: 0; box-sizing: border-box; background: #7acdf6; /* light-blue__+- */ border: 2px solid #fff; /* 外周の白い丸枠 */ border-radius: 50%; cursor: pointer; z-index: 1; } .tr-banner__toggle::before, /* 横棒（常時表示 → −） */ .tr-banner__toggle::after { /* 縦棒（折りたたみ時のみ → ＋） */ content: ""; position: absolute; top: 50%; left: 50%; background: #274388; /* アイコンは濃青（既定・hover共通） */ } .tr-banner__toggle::before { transform: translate(-50%, -50%); width: 12px; height: 2px; } .tr-banner__toggle::after { transform: translate(-50%, -50%); width: 2px; height: 12px; opacity: 0; } /* hover：地と枠を反転（白地＋淡青枠、アイコンは濃青のまま） */ .tr-banner__toggle:hover { background: #fff; border-color: #7acdf6; } /* 折りたたみ時：本体を隠す。トグルはfixedのため位置はそのまま（動かない） */ .tr-banner.is-collapsed .tr-banner__body { display: none; } .tr-banner.is-collapsed .tr-banner__toggle { width: 40px; height: 40px; top: 120px; right: 4px; } /* ＋は40px・中心固定で位置不動 */ .tr-banner.is-collapsed .tr-banner__toggle::after { opacity: 1; } /* ＋ にする */ /* ===================== フォーカス可視化（キーボード操作のみ） ===================== */ .tr-notice__btn:focus-visible, .tr-banner__link:focus-visible { outline: 2px solid #3756a2; outline-offset: 2px; } .tr-banner__toggle:focus-visible { outline: 2px solid #274388; outline-offset: 2px; } /* ===================== 印刷時は非表示 ===================== */ @media print { .tr-banner { display: none !important; } } /* ===================== SP（〜767px） ===================== */ @media (max-width: 767px) { .tr-br-sp { display: inline; } /* 帯：縦積み・中央寄せ（leadのみ中央、注記とボタンは左寄せ） */ .tr-notice__inner { flex-direction: column; align-items: center; gap: 24px; padding: 20px 0; } .tr-notice__text { flex: none; width: 100%; } /* 縦積みでは流動flexを解除 */ .tr-notice__lead { text-align: center; } .tr-notice__btn { flex: none; width: 100%; min-height: 0; padding: 12px 20px; } .tr-notice__btnTxt { text-align: left; } /* デザイン: ボタン文言は左寄せ */ /* バナー */ .tr-banner { top: 90px; right: 16px; } .tr-banner__body { padding: 12px 16px; } .tr-banner__line1 .tr-num { font-size: 18px; } .tr-banner__line1 .tr-unit { font-size: 12px; } .tr-banner__line2 { font-size: 14px; } .tr-banner__toggle { width: 32px; height: 32px; top: 74px; right: 8px; } .tr-banner.is-collapsed .tr-banner__toggle { top: 70px; right: 4px; } } /* ===================== 検索枠 .littleTitle 横のNEXCO注記（2カラム） ===================== */ /* タイトルは固定幅で左、注記は残り幅で右（狭いカラムでは注記内で折り返す＝2カラム維持） */ .littleTitle--withNote { display: flex; align-items: baseline; gap: 4px 12px; } .littleTitle__txt { flex-shrink: 0; } .littleTitle__note { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; align-items: baseline; font-size: 12px; font-weight: 400; line-height: 1.4; color: #333; } .littleTitle__noteMark { flex-shrink: 0; } /* ※ をリストマーク化 */ .littleTitle__noteTxt { flex: 1; min-width: 0; } /* 折返し行は本文位置に揃う（ぶら下げ） */