@charset "UTF-8"; /* ========================================================= Toll revision modal + follow banner (English / current site -> advance-search EN) 2026-06-15 / Phase C - 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 modal 44-428 / PC banner 44-938 / SP 44-682, 44-1097) - tokens: blue #3756a2 / blue_hovered #3263b7 / blue_mat #e3f4ff yellow #ffff22 / green(close) #007b8e / gray #f4f4f4 / toggle #274388 / text #333 - Font: Source Sans Pro (existing EN site font) ========================================================= */ body.tr-noscroll { overflow: hidden; } /* PC-only line break (hidden on SP) */ .tr-br-pc { display: none; } @media (min-width: 768px) { .tr-br-pc { display: inline; } } /* External-link icon: design SVG (blue fill #3756A2 + white stroke = white outline on blue bg) */ .tr-ext { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; background: url(/en/img/icon_blank.svg) no-repeat center / contain; vertical-align: -0.1em; } /* ===================== Modal ===================== */ .tr-modal { position: fixed; inset: 0; 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: 620px; max-width: 100%; box-sizing: border-box; background: #fff; padding: 48px 24px 24px; /* 角丸なし（デザイン準拠） */ font-family: "Source Sans Pro", sans-serif; } .tr-modal__box:focus { outline: none; } .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__lead { margin: 0; font-size: 24px; line-height: 1.6; color: #333; } .tr-modal__date { /* "October 1, 2026." — blue + yellow underline */ color: #3756a2; font-weight: 600; border-bottom: 4px solid #ffff22; white-space: nowrap; } .tr-modal__panel { margin-top: 24px; padding: 24px; text-align: center; background: #e3f4ff; } .tr-modal__panelTxt { margin: 0; font-size: 18px; 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; line-height: 1.6; text-decoration: none; } .tr-modal__btn:hover { background: #3263b7; } /* blue_hovered */ .tr-modal__btnTxt { min-width: 0; text-align: center; } .tr-modal__btn .tr-divider { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.5); } .tr-modal__note { /* PC: centered one line / SP: hanging-indent left */ display: flex; justify-content: center; gap: 4px; align-items: flex-start; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: #333; } .tr-modal__noteMark { flex-shrink: 0; } /* beat existing a:link/visited/hover (color/underline) */ #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; } /* ===================== Follow banner ===================== */ .tr-banner { position: fixed; top: 140px; /* NOTE: verify against real injected header height */ right: 22px; z-index: 1000000; display: none; /* shown by JS after the modal closes */ font-family: "Source Sans Pro", sans-serif; } .tr-banner.is-visible { display: block; } .tr-banner__body { position: relative; width: 254px; box-sizing: border-box; padding: 20px 24px; background: #3756a2; border-radius: 4px; box-shadow: 0 0 24px rgba(126, 166, 186, 0.16); } .tr-banner__body:hover { background: #3263b7; } .tr-banner__link { display: block; color: #fff; text-decoration: none; font-size: 18px; line-height: 1.3; } #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__link .tr-ext { margin-left: 6px; } /* toggle (- / +): round, white ring, viewport-fixed so it never shifts */ .tr-banner__toggle { position: fixed; top: 124px; right: 8px; width: 32px; height: 32px; padding: 0; box-sizing: border-box; background: #274388; 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: invert (white face, dark-blue ring + icon) */ .tr-banner__toggle:hover { background: #fff; border-color: #274388; } .tr-banner__toggle:hover::before, .tr-banner__toggle:hover::after { background: #274388; } .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 (no shift) */ .tr-banner.is-collapsed .tr-banner__toggle::after { opacity: 1; } /* becomes + */ /* ===================== Focus visibility (keyboard only) ===================== */ .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; } /* ===================== Print ===================== */ @media print { .tr-modal, .tr-banner { display: none !important; } } /* ===================== SP (<=767px) ===================== */ @media (max-width: 767px) { /* modal: text left-aligned, close button (40px) outside the box (above, right) */ .tr-modal__box { padding: 40px 16px 0; } .tr-modal__close { width: 40px; height: 40px; top: -48px; right: 0; } .tr-modal__head { text-align: left; } .tr-modal__lead { font-size: 22px; } .tr-modal__panel { margin: 24px -16px 0; padding: 16px; text-align: left; } .tr-modal__panelTxt { font-size: 16px; } /* button: full-width, text left (wraps internally) + divider/icon stay right on one row */ .tr-modal__btn { width: 100%; box-sizing: border-box; flex-wrap: nowrap; gap: 16px; padding: 12px 16px 12px 20px; } .tr-modal__btnTxt { flex: 1 1 auto; text-align: left; } .tr-modal__note { justify-content: flex-start; text-align: left; } /* 左寄せ＋ぶら下げ */ .tr-modal__noteTxt { flex: 1; min-width: 0; } /* 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; } }