@charset "UTF-8"; /* ========================================================= Toll revision FV notice band + follow banner (English / advance-search site -> current site EN) 2026-06-15 / Phase D - Campaign-only standalone file. To remove: delete this file plus the markup, the link and the script in en/index.html. - Design: Figma 6OOW45EqW2gp1tAKmuZRhX (PC band 44-492 / SP band 44-846 / PC banner 44-1150) - tokens: blue #3756a2 / light-blue #b2e6ff / light-blue_hover #c8edff yellow #ffff22 / toggle #7acdf6 / toggle_icon #274388 / white - Font: Source Sans Pro. Behavior: band scrolls out -> banner shows (IntersectionObserver) ========================================================= */ /* External-link icon: design SVG (light-blue fill #B2E6FF + blue stroke = blue outline on light-blue bg) */ .tr-ext { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; background: url(/en/img/icon_blank.svg) no-repeat center / contain; vertical-align: -0.1em; } /* ===================== FV notice band ===================== */ .tr-notice { /* 親コンテナ幅いっぱい（100vwは縦スクロールバー幅分はみ出すため不使用） */ width: 100%; background: #3756a2; } .tr-notice__inner { width: 92%; max-width: 1312px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 0; box-sizing: border-box; font-family: "Source Sans Pro", sans-serif; } .tr-notice__text { flex: 1 1 0; min-width: 0; color: #fff; } .tr-notice__lead { margin: 0; font-size: 28px; line-height: 1.6; } .tr-notice__date { /* "October 1, 2026." white + yellow underline */ font-weight: 600; border-bottom: 4px solid #ffff22; white-space: nowrap; } .tr-notice__note { /* hanging-indent (continuation aligns under the text) */ display: flex; gap: 4px; align-items: flex-start; margin: 8px 0 0; font-size: 18px; line-height: 1.6; color: #fff; } .tr-notice__noteMark { flex-shrink: 0; } .tr-notice__noteTxt { flex: 1; min-width: 0; } .tr-notice__btn { flex: 1 1 0; /* liquid（最大594pxで頭打ち） */ max-width: 594px; min-width: 0; box-sizing: border-box; /* max-width:594 を総幅(border-box)基準に */ display: flex; align-items: center; gap: 24px; min-height: 72px; padding: 8px 32px; border-radius: 4px; background: #b2e6ff; color: #3756a2; text-decoration: none; font-family: "Source Sans Pro", sans-serif; font-size: 18px; line-height: 1.3; } .tr-notice__btn:hover { background: #c8edff; } .tr-notice__btnTxt { flex: 1 1 auto; min-width: 0; } .tr-notice__btnTxt .tr-bold { font-weight: 700; } .tr-notice__divider { width: 1px; height: 40px; flex-shrink: 0; background: rgba(55, 86, 162, 0.5); } #trNotice .tr-notice__btn, #trNotice .tr-notice__btn:link, #trNotice .tr-notice__btn:visited, #trNotice .tr-notice__btn:hover { color: #3756a2; text-decoration: none; } /* ===================== Follow banner ===================== */ .tr-banner { position: fixed; top: 140px; /* NOTE: verify against real injected header height */ right: 22px; z-index: 1000000; display: none; font-family: "Source Sans Pro", sans-serif; } .tr-banner.is-visible { display: block; } .tr-banner__body { position: relative; width: 255px; box-sizing: border-box; padding: 20px 24px; 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: block; color: #3756a2; text-decoration: none; font-size: 18px; font-weight: 600; line-height: 1.3; } #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__link .tr-ext { margin-left: 6px; width: 12px; height: 12px; } /* toggle (- / +): open 32px, collapsed 40px, center-fixed (no shift) */ .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; /* dark-blue icon (default & 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; } .tr-banner__toggle:hover { background: #fff; border-color: #7acdf6; } .tr-banner.is-collapsed .tr-banner__body { display: none; } .tr-banner.is-collapsed .tr-banner__toggle { width: 40px; height: 40px; top: 120px; right: 4px; } /* + is 40px, center-fixed */ .tr-banner.is-collapsed .tr-banner__toggle::after { opacity: 1; } /* becomes + */ /* ===================== Focus visibility (keyboard only) ===================== */ .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; } /* ===================== Print ===================== */ @media print { .tr-banner { display: none !important; } } /* ===================== SP (<=767px) ===================== */ @media (max-width: 767px) { /* band: stacked, heading centered, note + button left */ .tr-notice__inner { flex-direction: column; align-items: center; gap: 24px; padding: 20px 0; } .tr-notice__text { flex: none; width: 100%; } .tr-notice__lead { font-size: 22px; text-align: center; } .tr-notice__note { font-size: 14px; } .tr-notice__btn { flex: none; width: 100%; max-width: none; flex-wrap: nowrap; gap: 12px; min-height: 0; padding: 12px 16px 12px 20px; } .tr-notice__btnTxt { font-size: 16px; } /* banner */ .tr-banner { top: 90px; right: 16px; } .tr-banner__body { width: 200px; padding: 16px; } .tr-banner__link { font-size: 16px; } .tr-banner__toggle { width: 32px; height: 32px; top: 74px; right: 8px; } .tr-banner.is-collapsed .tr-banner__toggle { top: 70px; right: 4px; } }