@charset "UTF-8"; /* ========================================================= 料金改定対応 モーダル＋追従バナー（現行サイト→事前検索サイト導線） 2026-06-15 / 工程A（現行サイト・日本語） - キャンペーン用の独立ファイル。撤去時は本ファイルと index.html の 該当マークアップ・の読込・直前のJS読込を削除すれば原状復帰可。 - デザイン: Figma 6OOW45EqW2gp1tAKmuZRhX（PCモーダル 1-2 / PCバナー 8-42 ほか） - color tokens: blue #3756a2 / blue_mat #e3f4ff / yellow #ffff22 green(close) #007b8e / gray #f4f4f4 / text #333 ========================================================= */ /* モーダル表示中は背面スクロールを固定（既存Colorbox挙動に準拠） */ body.tr-noscroll { overflow: hidden; } /* SP専用の改行（PCでは無効） */ .tr-br-sp { display: none; } /* 外部リンク（別タブ）アイコン 共通アイコン /img/common/blank_icon.png を filter で白化して使用 （青背景上で使うが共通アイコンの白版実体が無いため反転で対応） */ .tr-ext { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background: url(/img/common/blank_icon.png) no-repeat center / contain; filter: brightness(0) invert(1); vertical-align: -0.1em; } /* ===================== モーダル ===================== */ .tr-modal { position: fixed; inset: 0; /* 既存サイトに z-index 100000〜999999 の固定UIがあるため最前面に置く */ z-index: 1000001; display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; } .tr-modal.is-open { display: flex; } .tr-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .tr-modal__box { position: relative; z-index: 1; width: 598px; max-width: 100%; box-sizing: border-box; background: #fff; border-radius: 8px; padding: 48px 24px 24px; font-family: "Noto Sans JP", sans-serif; } .tr-modal__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; background: #f4f4f4; border: 0; cursor: pointer; } .tr-modal__close::before, .tr-modal__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 2px; background: #007b8e; } .tr-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); } .tr-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .tr-modal__head { text-align: center; } .tr-modal__date { display: inline-flex; align-items: baseline; gap: 2px; color: #3756a2; font-weight: 700; line-height: 1.6; border-bottom: 6px solid #ffff22; } .tr-modal__date .tr-num { font-size: 28px; } .tr-modal__date .tr-unit { font-size: 18px; } .tr-modal__lead { margin: 4px 0 0; font-size: 24px; font-weight: 500; line-height: 1.6; color: #333; } .tr-modal__panel { margin-top: 24px; padding: 24px; text-align: center; background: #e3f4ff; } .tr-modal__panelTxt { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.6; color: #333; } .tr-modal__btn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; padding: 8px 12px 8px 24px; background: #3756a2; border-radius: 4px; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.6; text-decoration: none; } .tr-modal__btn:hover { background: #3263b7; } /* blue_hovered */ .tr-modal__btnTxt { min-width: 0; text-align: center; } /* 狭幅で折り返せるように */ /* 既存サイトの a:link/a:visited/a:hover(色・下線) より詳細度を上げて確実に適用 */ #trModal .tr-modal__btn, #trModal .tr-modal__btn:link, #trModal .tr-modal__btn:visited, #trModal .tr-modal__btn:hover, #trModal .tr-modal__btn .tr-modal__btnTxt { color: #fff; text-decoration: none; } .tr-modal__btn .tr-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.5); } .tr-modal__note { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #333; } /* ===================== 追従バナー ===================== */ .tr-banner { position: fixed; top: 140px; /* ※実サイトのヘッダー実高に被らないか要実機確認 */ right: 22px; /* 本体は端から22px。トグルが端から8pxに来る配置 */ z-index: 1000000; /* 既存固定UIより前面・モーダルよりは背面 */ 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: #3756a2; border-radius: 4px; box-shadow: 0 0 24px rgba(126, 166, 186, 0.16); } .tr-banner__link { display: flex; flex-direction: column; gap: 4px; color: #fff; text-decoration: none; } /* カード hover：背景を blue_hovered に（トグルは別hover・既定のまま） */ .tr-banner__body:hover { background: #3263b7; } /* 既存サイトの a:link/a:visited(color) より詳細度を上げて白文字を確実に適用 */ #trBanner .tr-banner__link, #trBanner .tr-banner__link:link, #trBanner .tr-banner__link:visited, #trBanner .tr-banner__link:hover { color: #fff; text-decoration: none; } .tr-banner__line1 { /* span を inline 配置（数字と単位はベースライン揃え）。flexのmin-width:auto回避 */ 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; } /* 開閉トグル（− / ＋）。丸形・白い外周リング・本体右上にはみ出して配置。 削除はさせず常に導線を確保 */ .tr-banner__toggle { /* viewport基準の固定位置。開閉どちらでも同じ場所に留まり位置がズレない。 本体(top:140/right:22)の右上に重なる座標 = top:124 / right:8 */ position: fixed; top: 124px; right: 8px; width: 32px; height: 32px; padding: 0; box-sizing: border-box; background: #274388; /* 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: #fff; } .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: #274388; } .tr-banner__toggle:hover::before, .tr-banner__toggle:hover::after { background: #274388; } /* 折りたたみ時：本体を隠す。トグルは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; } /* ＋ にする */ /* ===================== SP（〜767px） ===================== */ @media (max-width: 767px) { .tr-br-sp { display: inline; } /* SP専用の改行を有効化 */ /* 日付サイズはPCと同じ(28/18)。SPでは縮小しない */ .tr-modal__box { padding: 40px 16px 0; } /* 下paddingなし＝青パネルを底まで伸ばす */ /* SPでは×ボタンを白box外側（上・右端揃え）に配置（デザイン準拠） */ .tr-modal__close { width: 40px; height: 40px; top: -48px; right: 0; } .tr-modal__lead { font-size: 20px; } /* 青パネルは白box幅いっぱい＋下角丸（デザインSP準拠） */ .tr-modal__panel { margin: 24px -16px 0; padding: 24px 16px; border-radius: 0 0 8px 8px; } /* ボタンは固定264px・2行テキスト・区切り線＋アイコンは横並び維持 */ .tr-modal__btn { width: 264px; max-width: 100%; gap: 16px; } .tr-modal__btnTxt { text-align: left; } .tr-modal__note { text-align: left; } .tr-banner { top: 90px; right: 16px; } /* SP: 本体16px・トグルが端8pxに */ .tr-banner__body { width: max-content; 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; } /* トグルfixed位置：本体(top:90)の右上に重なる top:78 / right:8 */ .tr-banner__toggle { width: 32px; height: 32px; top: 74px; right: 8px; } .tr-banner.is-collapsed .tr-banner__toggle { top: 70px; right: 4px; } } /* ===================== フォーカス可視化（キーボード操作のみ） ===================== */ /* ダイアログboxは自動フォーカスするが枠は出さない（二重枠防止） */ .tr-modal__box:focus { outline: none; } /* ×・トグルは白枠(デザイン)と重ならないようキーボード時のみ緑枠 */ .tr-modal__close:focus-visible, .tr-banner__toggle:focus-visible { outline: 2px solid #007b8e; outline-offset: 2px; } .tr-modal__btn:focus-visible, .tr-banner__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ===================== 印刷時は非表示 ===================== */ @media print { .tr-modal, .tr-banner { display: none !important; } } /* ===================== 検索枠 .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; } /* 折返し行は本文位置に揃う（ぶら下げ） */