/* =====================================================================
   ftj.theme_ui_header_2026.css
   新テーマ（styles2026.css）用ヘッダースタイル
   既存の ftj.theme_ui_header.css + ftj.theme_ui_header_add.css を統合。
   ※ 全セレクタを .header 配下にスコープし、ヘッダー内のみで有効。
      本文へは影響しません（.frk-sky / .br-container-box には依存しません）。
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. layout & spacing tokens
   旧 ftj.theme_ui_grid_2026.css からヘッダーで実際に使用していた
   レイアウト／余白のみを移植し、コンポーネント専用クラスへ再編。
   （汎用グリッド grid / row / col / container--wide は廃止）
   --------------------------------------------------------------------- */
.header {
  --space-unit: 1rem;
  --space-xs: calc(0.25 * var(--space-unit));
  --space-sm: calc(0.5 * var(--space-unit));
  --space-md: calc(1 * var(--space-unit));
  --space-lg: calc(1.5 * var(--space-unit));
  --space-xl: calc(2 * var(--space-unit));
  --space-xxl: calc(3.5 * var(--space-unit));
  --space-xxxl: calc(7 * var(--space-unit))
}

@media (min-width:1200px) {
  .header {
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(1 * var(--space-unit));
    --space-md: calc(1.5 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.5 * var(--space-unit));
    --space-xxl: calc(4.5 * var(--space-unit));
    --space-xxxl: calc(9 * var(--space-unit))
  }
}

/* ---------------------------------------------------------------------
   1. color & typography tokens
   旧 ftj.theme_ui_color_2026.css からヘッダーで実際に使用していた
   トークンのみを移植。styles2026.css は別命名体系（--color-std-* 等）
   のため名称衝突は無い。未使用トークンは移植せず破棄。
   共通基盤（色プリミティブ／フォント／panel／title／icon／alert 等）と
   ヘッダー固有トークン（--header-* / --nav-* / --search-*）をまとめて
   .header 配下にスコープする。
   --------------------------------------------------------------------- */
.header {
  /* font families / weights */
  --font-regular: "TTCommonsProRegular","Noto Sans JP Regular", arial, sans-serif;
  --font-medium: "TTCommonsProMedium","Noto Sans JP Medium", arial, sans-serif;
  --font-semibold: "TTCommonsProDemiBold","Noto Sans JP Bold", arial, sans-serif;
  --font-bold: "TTCommonsProBold","Noto Sans JP Black", arial, sans-serif;
  --font-weight-regular: normal;
  --font-weight-medium: normal;
  --font-weight-semibold: normal;
  --font-weight-bold: normal;
  /* color primitives */
  --ft-sky-blue: #3769ff;
  --ft-sky-blue-rgb: 55, 105, 255;
  --ft-sky-blue-1: #ddeaff;
  --ft-sky-blue-2: #91b9ff;
  --ft-sky-blue-3: #5291ff;
  --ft-sky-blue-4: #1446e1;
  --ft-sky-blue-5: #345edd;
  --ft-teal: #00bfb3;
  --ft-teal-2: #72dbd5;
  --ft-teal-3: #00a096;
  --ft-teal-4: #00847d;
  --ft-purple: #6730e3;
  --ft-orange: #e24100;
  --ft-orange-2: #ff9665;
  --ft-berry-4: #dc0546;
  --ft-morningstar-yellow: #f7bc00;
  --ft-light-grey: #f4f4f4;
  --ft-grey-1: #e6e6e6;
  --ft-grey-2: #bfbfbf;
  --ft-grey-3: #8c8c8c;
  --ft-grey-4: #595959;
  --transparent: transparent;
  --white: #ffffff;
  --black: #212121;
  /* derived / semantic */
  --brand-1: var(--ft-sky-blue);
  --brand-2: var(--ft-sky-blue);
  --brand-3: var(--ft-sky-blue-1);
  --greyscale-1: var(--ft-grey-4);
  --greyscale-2: var(--ft-grey-3);
  --greyscale-3: var(--ft-grey-2);
  --greyscale-4: var(--ft-grey-1);
  --greyscale-5: var(--ft-light-grey);
  --body-copy: var(--black);
  --border: var(--ft-grey-1);
  --focus-outline: var(--black);
  --focus-outline-size: 3px;
  --link-text: var(--ft-sky-blue-4);
  --info-alert: var(--ft-sky-blue);
  --success-confirm: var(--ft-teal-4);
  --caution-warning: var(--ft-orange-2);
  --error-alert: var(--ft-berry-4);
  --icon-fill: var(--ft-sky-blue);
  --icon-hover: #345edd;
  --morningstar-ratings: var(--ft-morningstar-yellow);
  --transition-basic: 0.4s ease-out all;
  --modal-background: var(--black);
  --z-index-highest-2: 5;
  --z-index-highest-3: 6;
  /* 本文(styles2026.css の Tailwind)は z-50 のスティッキーナビや z-10 のグラデーション帯を使うため、
     モバイルナビとその背景はそれを上回る値にする。デスクトップのメガメニュー(z-index:60)より上。 */
  --z-index-modal-basic: 69;
  --z-index-modal-higher: 70;
  --z-index-mobile-mega-navigation: 70;
  --box-shadow-basic: 0 0.5rem 0.6875rem -0.5rem rgba(var(--ft-sky-blue-rgb), 0.2);
  --btn-tertiary-text: var(--black);
  --title-text-basic: inherit;
  --title-text-primary: var(--ft-sky-blue);
  --title-text-secondary: var(--brand-1);
  --title-text-dark: var(--ft-sky-blue);
  --title-text-search: var(--ft-sky-blue);
  /* panel */
  --panel-basic-bg: none;
  --panel-basic-text: var(--body-copy);
  --panel-primary-bg: var(--ft-sky-blue);
  --panel-primary-bg-text: var(--white);
  --panel-dark-bg: var(--brand-2);
  --panel-dark-bg-text: var(--white);
  --panel-light-bg: var(--ft-sky-blue-1);
  --panel-light-text: var(--black);
  --panel-white-bg: var(--white);
  --panel-white-bg-text: var(--black);
  --panel-grey-bg: var(--ft-light-grey);
  --panel-dark-grey-bg: var(--ft-light-grey);
  --panel-grey-bg-text: var(--black);
  --panel-dark-grey-text: var(--body-copy);
  --panel-highlight-bg: var(--ft-sky-blue-1);
  --panel-highlight-bg-text: var(--black);
  --panel-secondary-a-bg: var(--white);
  --panel-digital-theme-teal-bg: #1b676b;
  --panel-digital-theme-teal-bg-text: var(--white);
  --panel-fund-header: var(--ft-sky-blue-1);
  --panel-fund-header-text: var(--black);
  --panel-hover-border: var(--ft-sky-blue);
  --panel-compact-hover-border: var(--ft-sky-blue);
  --panel-notification-alert: var(--info-alert);
  --panel-notification-confirm: var(--success-confirm);
  --panel-notification-warning: var(--caution-warning);
  --panel-notification-error: var(--error-alert);
  /* header 固有 */
  --header-links: var(--ft-sky-blue-4);
  --header-border: var(--ft-grey-1);
  --header-logo-text: var(--ft-sky-blue);
  --header-mobile-sign-in-btn: var(--ft-sky-blue);
  --header-mobile-sign-in-btn-text: var(--white);
  --header-mobile-active-login-bg: var(--white);
  --header-mobile-active-login-text: var(--ft-sky-blue-4);
  --header-mobile-active-bg: var(--ft-sky-blue-1);
  --header-mobile-active-text: var(--ft-sky-blue-4);
  --header-mobile-global-nav-item-text: var(--ft-sky-blue-4);
  --header-mobile-global-nav-item-link: var(--ft-sky-blue-4);
  --header-mobile-lang-border: var(--ft-grey-2);
  --header-mobile-lang-link: var(--ft-sky-blue-4);
  --header-mobile-nav-search-container-bg: var(--white);
  --header-mobile-sign-in-container-bg: var(--white);
  --header-mobile-search-bg: var(--white);
  --header-mobile-search-btn-icon: var(--ft-sky-blue-4);
  --header-mobile-toggle-nav-btn: var(--white);
  --header-mobile-toggle-nav-btn-text: var(--ft-sky-blue-4);
  --header-mobile-toggle-active-bg: #3769ff;
  --header-mobile-toggle-active-text: var(--white);
  --header-global-nav-text: var(--ft-sky-blue-4);
  --header-site-nav-text: var(--ft-sky-blue-4);
  --header-site-nav-active-border: var(--ft-teal);
  --header-site-nav-focus-outline: var(--ft-sky-blue);
  --header-mega-menu-bg: var(--white);
  --header-mega-menu-text: var(--ft-sky-blue-4);
  --header-mega-menu-icon: var(--ft-teal);
  --search-button-bg: var(--white);
  --search-button-text: var(--ft-sky-blue-4);
  --nav-border: var(--ft-grey-1);
  --nav-dark-bg: var(--white);
  --nav-dark-text: var(--ft-sky-blue-4);
  --nav-dark-border: var(--brand-3);
  --nav-dark-icon-color: var(--ft-teal);
  --nav-dark-sub-item-text: var(--ft-sky-blue-4);
  --nav-light-bg: var(--white);
  --nav-light-text: var(--ft-sky-blue);
  --nav-light-border: var(--brand-3);
  --nav-light-icon-color: var(--ft-teal);
  --nav-light-item-bg: var(--white);
  --nav-light-item-text-1: var(--ft-sky-blue-4);
  --nav-light-item-text-2: var(--ft-teal);
  --nav-light-sub-item-text: var(--ft-sky-blue-4)
}

/* typography tokens（title--h6 等の解決用。webフォントは styles2026.css 側で読込済み） */
.header {
  --fonts-base-font-size-mobile: 1rem;
  --fonts-base-font-size-tablet: calc( 1rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-base-font-size-small-desktop: calc( 1rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-base-font-size-desktop: calc( 1rem + 0.125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-base-font-size-large-desktop: 1.125rem;
  --fonts-base-font-family: var(--font-regular);
  --fonts-base-font-weight: var(--font-weight-regular);
  --fonts-base-line-height: ;
  --fonts-xxl-font-size-mobile: 3.0517578125rem;
  --fonts-xxl-font-size-tablet: calc( 3.0517578125rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-xxl-font-size-small-desktop: calc( 3.0517578125rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-xxl-font-size-desktop: calc( 3.0517578125rem + 0.3814697266 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-xxl-font-size-large-desktop: 3.4332275391rem;
  --fonts-xxl-font-family: var(--font-bold);
  --fonts-xxl-font-weight: var(--font-weight-semibold);
  --fonts-xxl-line-height: 1.25;
  --fonts-xl-font-size-mobile: 2.44140625rem;
  --fonts-xl-font-size-tablet: calc( 2.44140625rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-xl-font-size-small-desktop: calc( 2.44140625rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-xl-font-size-desktop: calc( 2.44140625rem + 0.3051757813 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-xl-font-size-large-desktop: 2.7465820313rem;
  --fonts-xl-font-family: var(--font-bold);
  --fonts-xl-font-weight: var(--font-weight-bold);
  --fonts-xl-line-height: 1.25;
  --fonts-h1-font-size-mobile: 2.44140625rem;
  --fonts-h1-font-size-tablet: calc( 2.44140625rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h1-font-size-small-desktop: calc( 2.44140625rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h1-font-size-desktop: calc( 2.44140625rem + 0.3051757813 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h1-font-size-large-desktop: 2.7465820313rem;
  --fonts-h1-font-family: var(--font-bold);
  --fonts-h1-font-weight: var(--font-weight-bold);
  --fonts-h1-line-height: 1.25;
  --fonts-h1--reg-font-size-mobile: 2.44140625rem;
  --fonts-h1--reg-font-size-tablet: calc( 2.44140625rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h1--reg-font-size-small-desktop: calc( 2.44140625rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h1--reg-font-size-desktop: calc( 2.44140625rem + 0.3051757813 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h1--reg-font-size-large-desktop: 2.7465820313rem;
  --fonts-h1--reg-font-family: var(--font-bold);
  --fonts-h1--reg-font-weight: var(--font-weight-bold);
  --fonts-h1--reg-line-height: 1.25;
  --fonts-h2-font-size-mobile: 1.953125rem;
  --fonts-h2-font-size-tablet: calc( 1.953125rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h2-font-size-small-desktop: calc( 1.953125rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h2-font-size-desktop: calc( 1.953125rem + 0.244140625 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h2-font-size-large-desktop: 2.197265625rem;
  --fonts-h2-font-family: var(--font-bold);
  --fonts-h2-font-weight: var(--font-weight-bold);
  --fonts-h2-line-height: 1.25;
  --fonts-h2--reg-font-size-mobile: 1.953125rem;
  --fonts-h2--reg-font-size-tablet: calc( 1.953125rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h2--reg-font-size-small-desktop: calc( 1.953125rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h2--reg-font-size-desktop: calc( 1.953125rem + 0.244140625 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h2--reg-font-size-large-desktop: 2.197265625rem;
  --fonts-h2--reg-font-family: var(--font-bold);
  --fonts-h2--reg-font-weight: var(--font-weight-bold);
  --fonts-h2--reg-line-height: 1.25;
  --fonts-h3-font-size-mobile: 1.5625rem;
  --fonts-h3-font-size-tablet: calc( 1.5625rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h3-font-size-small-desktop: calc( 1.5625rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h3-font-size-desktop: calc( 1.5625rem + 0.1953125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h3-font-size-large-desktop: 1.7578125rem;
  --fonts-h3-font-family: var(--font-medium);
  --fonts-h3-font-weight: var(--font-weight-medium);
  --fonts-h3-line-height: 1.25;
  --fonts-h3--reg-font-size-mobile: 1.5625rem;
  --fonts-h3--reg-font-size-tablet: calc( 1.5625rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h3--reg-font-size-small-desktop: calc( 1.5625rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h3--reg-font-size-desktop: calc( 1.5625rem + 0.1953125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h3--reg-font-size-large-desktop: 1.7578125rem;
  --fonts-h3--reg-font-family: var(--font-medium);
  --fonts-h3--reg-font-weight: var(--font-weight-medium);
  --fonts-h3--reg-line-height: 1.25;
  --fonts-h4-font-size-mobile: 1.25rem;
  --fonts-h4-font-size-tablet: calc( 1.25rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h4-font-size-small-desktop: calc( 1.25rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h4-font-size-desktop: calc( 1.25rem + 0.15625 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h4-font-size-large-desktop: 1.40625rem;
  --fonts-h4-font-family: var(--font-semibold);
  --fonts-h4-font-weight: var(--font-weight-semibold);
  --fonts-h4-line-height: 1.25;
  --fonts-h4--reg-font-size-mobile: 1.25rem;
  --fonts-h4--reg-font-size-tablet: calc( 1.25rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h4--reg-font-size-small-desktop: calc( 1.25rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h4--reg-font-size-desktop: calc( 1.25rem + 0.15625 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h4--reg-font-size-large-desktop: 1.40625rem;
  --fonts-h4--reg-font-family: var(--font-regular);
  --fonts-h4--reg-font-weight: var(--font-weight-regular);
  --fonts-h4--reg-line-height: 1.25;
  --fonts-h5-font-size-mobile: 1rem;
  --fonts-h5-font-size-tablet: calc( 1rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h5-font-size-small-desktop: calc( 1rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h5-font-size-desktop: calc( 1rem + 0.125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h5-font-size-large-desktop: 1.125rem;
  --fonts-h5-font-family: var(--font-semibold);
  --fonts-h5-font-weight: var(--font-weight-semibold);
  --fonts-h5-line-height: 1.25;
  --fonts-h5--reg-font-size-mobile: 1rem;
  --fonts-h5--reg-font-size-tablet: calc( 1rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h5--reg-font-size-small-desktop: calc( 1rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h5--reg-font-size-desktop: calc( 1rem + 0.125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h5--reg-font-size-large-desktop: 1.125rem;
  --fonts-h5--reg-font-family: var(--font-bold);
  --fonts-h5--reg-font-weight: var(--font-weight-bold);
  --fonts-h5--reg-line-height: 1.25;
  --fonts-h6-font-size-mobile: 1rem;
  --fonts-h6-font-size-tablet: calc( 1rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-h6-font-size-small-desktop: calc( 1rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-h6-font-size-desktop: calc( 1rem + 0.125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-h6-font-size-large-desktop: 1.125rem;
  --fonts-h6-font-family: var(--font-bold);
  --fonts-h6-font-weight: var(--font-weight-bold);
  --fonts-h6-line-height: 1.25;
  --fonts-p--b-font-size-mobile: 1rem;
  --fonts-p--b-font-size-tablet: calc( 1rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-p--b-font-size-small-desktop: calc( 1rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-p--b-font-size-desktop: calc( 1rem + 0.125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-p--b-font-size-large-desktop: 1.125rem;
  --fonts-p--b-font-family: var(--font-semibold);
  --fonts-p--b-font-weight: var(--font-weight-semibold);
  --fonts-p--b-line-height: 1.5;
  --fonts-p-font-size-mobile: 1rem;
  --fonts-p-font-size-tablet: calc( 1rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-p-font-size-small-desktop: calc( 1rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-p-font-size-desktop: calc( 1rem + 0.125 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-p-font-size-large-desktop: 1.125rem;
  --fonts-p-font-family: var(--font-regular);
  --fonts-p-font-weight: var(--font-weight-regular);
  --fonts-p-line-height: 1.5;
  --fonts-small-font-size-mobile: 0.8rem;
  --fonts-small-font-size-tablet: calc( 0.8rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-small-font-size-small-desktop: calc( 0.8rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-small-font-size-desktop: calc( 0.8rem + 0.1 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-small-font-size-large-desktop: 0.9rem;
  --fonts-small-font-family: var(--font-regular);
  --fonts-small-font-weight: var(--font-weight-regular);
  --fonts-small-line-height: 1.5;
  --fonts-small--b-font-size-mobile: 0.8rem;
  --fonts-small--b-font-size-tablet: calc( 0.8rem + 0 * ( ( 100vw - 768px) / 432 ) );
  --fonts-small--b-font-size-small-desktop: calc( 0.8rem + 0 * ( ( 100vw - 1200px) / 400 ) );
  --fonts-small--b-font-size-desktop: calc( 0.8rem + 0.1 * ( ( 100vw - 1600px) / 300 ) );
  --fonts-small--b-font-size-large-desktop: 0.9rem;
  --fonts-small--b-font-family: var(--font-semibold);
  --fonts-small--b-font-weight: var(--font-weight-semibold);
  --fonts-small--b-line-height: 1.5;
  --head-font-family: var(--font-bold);
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProRegular";
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    src: url("../font/TTCommonsProRegular.woff") format("woff"),url("../font/TTCommonsProRegular.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProMedium";
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    src: url("../font/TTCommonsProMedium.woff") format("woff"),url("../font/TTCommonsProMedium.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProDemiBold";
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    src: url("../font/TTCommonsProDemiBold.woff") format("woff"),url("../font/TTCommonsProDemiBold.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProLight";
    font-style: normal;
    font-weight: 300;
    font-stretch: normal;
    src: url("../font/TTCommonsProLight.woff") format("woff"),url("../font/TTCommonsProLight.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProBold";
    font-style: normal;
    font-weight: 700;
    font-stretch: normal;
    src: url("../font/TTCommonsProBold.woff") format("woff"),url("../font/TTCommonsProBold.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProLightItalic";
    font-style: italic;
    font-weight: 300;
    font-stretch: normal;
    src: url("../font/TTCommonsProLightItalic.woff") format("woff"),url("../font/TTCommonsProLightItalic.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProItalic";
    font-style: italic;
    font-weight: 400;
    font-stretch: normal;
    src: url("../font/TTCommonsProItalic.woff") format("woff"),url("../font/TTCommonsProItalic.woff2") format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "TTCommonsProBoldItalic";
    font-style: italic;
    font-weight: 700;
    font-stretch: normal;
    src: url("../font/TTCommonsProBoldItalic.woff") format("woff"),url("../font/TTCommonsProBoldItalic.woff2") format("woff2")
}
/*==Noto Sans JP==*/
/*Thin*/
@font-face {
  font-family: 'Noto Sans JP Thin';
  src: url('../font/Noto_Sans_JP/NotoSansJP-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

/*Light*/
@font-face {
  font-family: 'Noto Sans JP Light';
  src: url('../font/Noto_Sans_JP/NotoSansJP-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/*Regular*/
@font-face {
  font-family: 'Noto Sans JP Regular';
  src: url('../font/Noto_Sans_JP/NotoSansJP-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/*Midium*/
@font-face {
  font-family: 'Noto Sans JP Medium';
  src: url('../font/Noto_Sans_JP/NotoSansJP-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

/*Bold*/
@font-face {
  font-family: 'Noto Sans JP Bold';
  src: url('../font/Noto_Sans_JP/NotoSansJP-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/*Black*/
@font-face {
  font-family: 'Noto Sans JP Black';
  src: url('../font/Noto_Sans_JP/NotoSansJP-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

.header {
  min-height: 4rem;
  border-bottom: .0625rem solid var(--header-border)
}
.header a {
  text-decoration: none;
}
.header div, .header span, .header a, .header img, .header p, .header strong, .header nav {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
.header nav {
  display: block;
}
.header img {
  border: 0;
  -ms-interpolation-mode: bicubic;
}
.header button {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  line-height: normal;
  text-transform: none;
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
  color: var(--body-copy);
}
.header button[disabled] {
  cursor: default;
}
.header button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.header ::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
.header ::selection {
  background: #b3d4fc;
  text-shadow: none;
}
.header img {
  vertical-align: middle;
}
.header b,
.header strong {
  font-family: var(--head-font-family);
}

/** 新スタイル上書き用 **/
.header ul li {
  margin-left: 0;
  padding: 0;
  list-style-type: none;
}
.header .header__grid {
  margin: 0 .5rem
}

.header .header__row {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto
}

.header .header__col {
  box-sizing: border-box;
  padding: 0 .5rem;
  min-height: 1px;
  width: 100%
}

/* メガメニュー内 NEW バッジ（旧 .frk-sky .new + padding-left--xs） */
.header .new {
  padding-left: var(--space-xs);
  color: var(--ft-orange);
  font-size: 0.6em;
  font-weight: bold;
}

@media (min-width:768px) {
  .header .header__grid {
    margin: 0 .25rem
  }

  .header .header__col {
    padding: 0 .75rem
  }
}

@media (min-width:1600px) {
  .header .header__grid {
    margin: 0 3rem
  }

  .header .header__col {
    padding: 0 1rem
  }
}

@media (min-width:1900px) {
  .header .header__grid {
    margin: 0 5rem
  }

  .header .header__col {
    padding: 0 1rem
  }
}

/* ---------------------------------------------------------------------
   1. header base
   --------------------------------------------------------------------- */

.header .header__wrapper {
  margin-left: -1rem
}

.header .header-logo {
  width: 10.3125rem;
  height: 3.9375rem;
  padding-left: 1rem;
  display: inline-flex;
  align-items: center
}

.header .header-logo .header-logo__text {
  font-family: var(--fonts-small--b-font-family);
  font-weight: var(--fonts-small--b-font-weight);
  line-height: var(--fonts-small--b-line-height);
  font-size: var(--fonts-small--b-font-size-mobile);
  color: var(--header-logo-text);
  text-transform: uppercase
}

@media (min-width:768px) and (max-width:1200px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-small--b-font-size-tablet)
  }
}

@media (min-width:1200px) and (max-width:1600px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-small--b-font-size-small-desktop)
  }
}

@media (min-width:1600px) and (max-width:1900px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-small--b-font-size-desktop)
  }
}

@media (min-width:1900px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-small--b-font-size-large-desktop)
  }
}

.header .header-logo .header-logo__text--link {
  color: var(--header-links)
}

.header .mobile {
  display: inline-flex;
  position: absolute;
  right: 0
}

.header .mobile__toggle {
  background: var(--header-mobile-toggle-nav-btn);
  color: var(--header-mobile-toggle-nav-btn-text);
  border: none;
  border-left: .0625rem solid var(--header-border);
  height: 4rem;
  width: 4rem
}

.header .mobile__toggle:focus {
  outline: var(--focus-outline-size) solid var(--focus-outline);
  outline-offset: -.1875rem
}

.header .mobile__toggle:focus:not(:focus-visible) {
  outline: none
}

.header .mobile__toggle--active {
  background: var(--header-mobile-toggle-active-bg);
  color: var(--header-mobile-toggle-active-text)
}

.header .mobile__toggle .mobile-toggle__icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.header .global-nav-mobile {
  display: inline-flex;
  flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 1rem
}

.header .global-nav-mobile__list {
  margin: 0;
  padding: 0 2rem;
  list-style: none;
  display: flex;
  flex-direction: column
}

.header .global-nav-mobile--item {
  color: var(--header-mobile-global-nav-item-text);
  padding: .5rem 0;
  margin-top: var(--space-xs);
  line-height: 1.5
}
.header .global-nav-mobile--item a {
  display: inline-block;
}

.header .global-nav-mobile--link {
  text-decoration: none;
  color: var(--header-mobile-global-nav-item-link);
  font-family: var(--fonts-small-font-family);
  font-weight: var(--fonts-small-font-weight);
  line-height: var(--fonts-small-line-height);
  font-size: var(--fonts-small-font-size-mobile)
}

@media (min-width:768px) and (max-width:1200px) {
  .header .global-nav-mobile--link {
    font-size: var(--fonts-small-font-size-tablet)
  }
}

@media (min-width:1200px) and (max-width:1600px) {
  .header .global-nav-mobile--link {
    font-size: var(--fonts-small-font-size-small-desktop)
  }
}

@media (min-width:1600px) and (max-width:1900px) {
  .header .global-nav-mobile--link {
    font-size: var(--fonts-small-font-size-desktop)
  }
}

@media (min-width:1900px) {
  .header .global-nav-mobile--link {
    font-size: var(--fonts-small-font-size-large-desktop)
  }
}

.header .global-nav-mobile--link:hover {
  text-decoration: underline;
  background: none
}

.header .mobile-nav-container {
  height: 0;
  width: 100%;
  position: fixed;
  top: auto;
  margin-top: .125rem;
  z-index: var(--z-index-mobile-mega-navigation);
  right: 0;
  background-color: var(--header-mobile-nav-search-container-bg);
  overflow-x: hidden;
  transition: var(--transition-basic)
}

.header .mobile-nav-container-active {
  height: 100%
}

.header .global, .header .site-nav {
  display: none
}

.header .role-selector__trigger {
  border: none;
  padding: 0;
  background: transparent;
  text-decoration: none;
  color: var(--header-links);
  font-family: var(--fonts-small-font-family);
  font-weight: var(--fonts-small-font-weight);
  line-height: var(--fonts-small-line-height);
  font-size: var(--fonts-small-font-size-mobile)
}

@media (min-width:768px) and (max-width:1200px) {
  .header .role-selector__trigger {
    font-size: var(--fonts-small-font-size-tablet)
  }
}

@media (min-width:1200px) and (max-width:1600px) {
  .header .role-selector__trigger {
    font-size: var(--fonts-small-font-size-small-desktop)
  }
}

@media (min-width:1600px) and (max-width:1900px) {
  .header .role-selector__trigger {
    font-size: var(--fonts-small-font-size-desktop)
  }
}

@media (min-width:1900px) {
  .header .role-selector__trigger {
    font-size: var(--fonts-small-font-size-large-desktop)
  }
}

.header .role-selector__trigger:hover {
  text-decoration: underline
}

.header .role-selector__trigger:focus {
  outline: var(--focus-outline-size) solid var(--focus-outline)
}

.header .role-selector__trigger:focus:not(:focus-visible) {
  outline: none
}

.header .header__country-hub {
  font-family: var(--fonts-small-font-family);
  font-weight: var(--fonts-small-font-weight);
  line-height: var(--fonts-small-line-height);
  font-size: var(--fonts-small-font-size-mobile);
  display: flex;
  padding: 1rem 2rem;
  line-height: 150%
}

@media (min-width:768px) and (max-width:1200px) {
  .header .header__country-hub {
    font-size: var(--fonts-small-font-size-tablet)
  }
}

@media (min-width:1200px) and (max-width:1600px) {
  .header .header__country-hub {
    font-size: var(--fonts-small-font-size-small-desktop)
  }
}

@media (min-width:1600px) and (max-width:1900px) {
  .header .header__country-hub {
    font-size: var(--fonts-small-font-size-desktop)
  }
}

@media (min-width:1900px) {
  .header .header__country-hub {
    font-size: var(--fonts-small-font-size-large-desktop)
  }
}

@media (min-width:768px) {
  .header {
    z-index: var(--z-index-modal-higher)
  }

  .header .mobile-nav-container {
    z-index: var(--z-index-modal-higher);
    right: 0;
    width: 46.875%
  }

  .header .modal-background {
    z-index: var(--z-index-modal-basic);
    position: fixed;
    top: 4.0625rem;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--modal-background);
    opacity: .5;
    transition: var(--transition-basic)
  }

  .header .header__wrapper {
    margin-left: 0;
    margin-right: 0
  }

  .header .header-logo {
    padding-left: 0
  }

  .header .header-logo .header-logo__text {
    font-family: var(--fonts-p--b-font-family);
    font-weight: var(--fonts-p--b-font-weight);
    line-height: var(--fonts-p--b-line-height);
    font-size: var(--fonts-p--b-font-size-mobile);
    color: var(--header-logo-text);
    text-transform: uppercase
  }
}

@media (min-width:768px) and (min-width:768px) and (max-width:1200px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-p--b-font-size-tablet)
  }
}

@media (min-width:768px) and (min-width:1200px) and (max-width:1600px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-p--b-font-size-small-desktop)
  }
}

@media (min-width:768px) and (min-width:1600px) and (max-width:1900px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-p--b-font-size-desktop)
  }
}

@media (min-width:768px) and (min-width:1900px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-p--b-font-size-large-desktop)
  }
}

@media (min-width:1024px) {
  .header {
    min-height: 8.625rem;
    border-bottom: .0625rem solid var(--header-border)
  }

  .header .mobile-nav-container {
    z-index: var(--z-index-modal-higher);
    right: 0;
    width: 41.02%
  }

  .header .header__wrapper .modal-background {
    transition: var(--transition-basic)
  }

  .header .header-logo {
    padding-left: .5rem;
    width: 13rem;
    min-width: 12.8125rem;
    display: inline-flex;
    height: 2.8125rem;
    margin-top: 1rem;
    margin-bottom: 1rem
  }

  .header .header-logo .header-logo__text {
    font-family: var(--fonts-h5-font-family);
    font-weight: var(--fonts-h5-font-weight);
    line-height: var(--fonts-h5-line-height);
    font-size: var(--fonts-h5-font-size-mobile)
  }
}

@media (min-width:1024px) and (min-width:768px) and (max-width:1200px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-h5-font-size-tablet)
  }
}

@media (min-width:1024px) and (min-width:1200px) and (max-width:1600px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-h5-font-size-small-desktop)
  }
}

@media (min-width:1024px) and (min-width:1600px) and (max-width:1900px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-h5-font-size-desktop)
  }
}

@media (min-width:1024px) and (min-width:1900px) {
  .header .header-logo .header-logo__text {
    font-size: var(--fonts-h5-font-size-large-desktop)
  }
}

@media (min-width:1024px) {
  .header .global {
    box-sizing: border-box;
    display: inline-flex;
    float: right;
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-items: center;
    min-height: 2.55375rem
  }

  .header .global-nav {
    display: inline-flex
  }

  .header .global-nav__list {
    margin: 0;
    list-style: none;
    display: flex;
    padding: 0
  }

  .header .global-nav--item {
    height: auto;
    padding: .125rem;
    color: var(--header-global-nav-text);
    margin-top: 0;
    display: inline-flex;
    align-items: center
  }

  .header .global-nav--item:last-child {
    border-right: 0;
    padding-right: 0
  }
}

@media (min-width:1024px) {
  .header .global-nav--link {
    text-decoration: none;
    color: var(--header-global-nav-text);
    font-family: var(--fonts-small-font-family);
    font-weight: var(--fonts-small-font-weight);
    line-height: var(--fonts-small-line-height);
    font-size: var(--fonts-small-font-size-mobile);
    padding: 0 1rem;
    border-right: .0625rem solid var(--header-border);
    max-width: 10.625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
  }
}

@media (min-width:1024px) and (min-width:768px) and (max-width:1200px) {
  .header .global-nav--link {
    font-size: var(--fonts-small-font-size-tablet)
  }
}

@media (min-width:1024px) and (min-width:1200px) and (max-width:1600px) {
  .header .global-nav--link {
    font-size: var(--fonts-small-font-size-small-desktop)
  }
}

@media (min-width:1024px) and (min-width:1600px) and (max-width:1900px) {
  .header .global-nav--link {
    font-size: var(--fonts-small-font-size-desktop)
  }
}

@media (min-width:1024px) and (min-width:1900px) {
  .header .global-nav--link {
    font-size: var(--fonts-small-font-size-large-desktop)
  }
}

@media (min-width:1024px) {
  .header .global-nav--link:hover {
    text-decoration: underline;
    background: none
  }

  .header .site-nav {
    display: inline-block;
    padding: 1.5rem 0 0
  }

  .header .site-nav__list {
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
    display: flex
  }

  .header .site-nav--item {
    position: relative;
    padding-right: .5rem
  }

  .header .site-nav--link {
    font-family: var(--fonts-p--b-font-family);
    font-weight: var(--fonts-p--b-font-weight);
    line-height: var(--fonts-p--b-line-height);
    font-size: var(--fonts-p--b-font-size-mobile);
    padding-top: .0625rem;
    padding-bottom: 1rem;
    background: transparent;
    border: none;
    border-bottom: .4375rem solid transparent;
    color: var(--header-site-nav-text);
    text-decoration: none;
    text-align: left;
    display: flex;
    height: 100%;
    box-sizing: border-box
  }
}

@media (min-width:1024px) and (min-width:768px) and (max-width:1200px) {
  .header .site-nav--link {
    font-size: var(--fonts-p--b-font-size-tablet)
  }
}

@media (min-width:1024px) and (min-width:1200px) and (max-width:1600px) {
  .header .site-nav--link {
    font-size: var(--fonts-p--b-font-size-small-desktop)
  }
}

@media (min-width:1024px) and (min-width:1600px) and (max-width:1900px) {
  .header .site-nav--link {
    font-size: var(--fonts-p--b-font-size-desktop)
  }
}

@media (min-width:1024px) and (min-width:1900px) {
  .header .site-nav--link {
    font-size: var(--fonts-p--b-font-size-large-desktop)
  }
}

@media (min-width:1024px) {
  .header .site-nav-container {
    width: 100%
  }

  .header .active .header__mega-menu {
    visibility: visible;
    display: flex
  }

  .header .header__mega-menu {
    visibility: hidden;
    position: absolute;
    z-index: 60;
    border: .0625rem solid var(--greyscale-3);
    padding: var(--space-md);
    background-color: var(--header-mega-menu-bg);
    margin-top: 0;
    color: var(--header-mega-menu-text);
    line-height: 1.5;
    box-shadow: 0 .3125rem .625rem rgba(0, 0, 0, .25);
    flex-direction: column
  }

  .header .header__mega-menu a.site-nav--active-link {
    border-bottom: none
  }

  .header .header__mega-menu-nav {
    list-style: none;
    display: flex;
    padding: 0;
    margin-bottom: auto;
  }

  .header .header__mega-menu-nav a {
    color: var(--header-mega-menu-text);
    text-decoration: none;
    display: inline-flex
  }

  .header .header__mega-menu-nav a:hover {
    text-decoration: underline
  }

  .header .header__mega-menu-nav a:focus {
    background-color: var(--header-mega-menu-bg)
  }

  .header .header__mega-menu-nav-list {
    margin-right: var(--space-md)
  }

  .header .header__mega-menu-nav-list:first-child {
    margin-left: 0
  }

  .header .header__mega-menu-nav-list:last-child {
    margin-right: 0
  }

  .header .header__mega-menu-title {
    margin-bottom: var(--space-xs);
    font-family: var(--head-font-family);
    font-size: 1.25rem
  }

  .header .header__mega-menu-title-wrapper {
    display: inline-flex
  }

  .header .header__mega-menu-title-name {
    margin-right: .25rem;
    overflow-wrap: nowrap;
  }
}

@media (min-width:1024px) {
  .header .header__mega-menu-single-column .header__mega-menu-nav-list {
    white-space: nowrap;
  }

  .header #mobileNavContainer, .header .global-nav-mobile, .header .mobile {
    display: none
  }

  .header .header__country-hub {
    padding: 0
  }
}

@media (min-width:1200px) {
  .header .site-nav {
    padding: 1rem 0 0
  }

  .header .site-nav--item {
    padding-right: 1rem
  }
}


@media print {
  .header {
    height: auto;
    border-bottom: .0625rem solid #333;
    margin-bottom: 1rem
  }

  .header .global, .header .site-nav-container {
    display: none !important
  }

  .header #mobileNavContainer, .header .mobile {
    display: none
  }
}







/* logo */
.header .logo {
  margin-top: 1rem
}

.header .logo__img {
  max-width: 100%;
  height: auto;
  background-repeat: no-repeat
}

.header .logo__img--header-variant {
  width: var(--header-logo-mobile-img)
}

.header .logo__img--header-variant:focus {
  background-color: var(--white)
}

.header .logo__link {
  display: inline-block
}

.header .logo__link:focus {
  outline: var(--focus-outline-size) solid var(--focus-outline)
}

.header .logo__link:focus:not(:focus-visible) {
  outline: none
}

.header .logo--header-variant {
  margin-top: 0
}

.header .logo--header-variant {
  padding-left: 0;
  padding-right: 0
}

@media (min-width:1200px) {
  .header .logo {
    margin-top: inherit
  }

  .header .logo__img--header-variant {
    width: var(--header-logo-img)
  }
}


/* header sp */
.header .navigation {
  overflow: hidden;
  width: 100%;
  word-wrap: normal;
  list-style-type: none;
  -webkit-padding-start: 0;
  padding-inline-start: 0;
  margin: 0
}

.header .navigation--dark {
  background: var(--nav-dark-bg);
  color: var(--nav-dark-text)
}

.header .navigation--dark .navigation__icon {
  color: var(--nav-dark-icon-color)
}

.header .navigation a {
  color: inherit;
  text-decoration: none;
  cursor: pointer
}

.header .navigation a:hover {
  text-decoration: underline;
  background: none
}

.header .navigation__active--dark {
  border: var(--nav-dark-border);
  background-color: var(--nav-dark-bg)
}

.header .navigation__block:focus {
  border: var(--focus-outline-size) solid var(--focus-outline)
}

.header .navigation__menu {
  padding: 1rem 2rem;
  height: 3.5rem;
  font-family: var(--fonts-p-font-family);
  font-weight: var(--fonts-p-font-weight);
  line-height: var(--fonts-p-line-height);
  font-size: var(--fonts-p-font-size-mobile);
  cursor: pointer
}

@media (min-width:768px) and (max-width:1200px) {
  .header .navigation__menu {
    font-size: var(--fonts-p-font-size-tablet)
  }
}

@media (min-width:1200px) and (max-width:1600px) {
  .header .navigation__menu {
    font-size: var(--fonts-p-font-size-small-desktop)
  }
}

@media (min-width:1600px) and (max-width:1900px) {
  .header .navigation__menu {
    font-size: var(--fonts-p-font-size-desktop)
  }
}

@media (min-width:1900px) {
  .header .navigation__menu {
    font-size: var(--fonts-p-font-size-large-desktop)
  }
}

.header .navigation__menu--bold {
  font-family: var(--fonts-p--b-font-family);
  font-weight: var(--fonts-p--b-font-weight);
  line-height: var(--fonts-p--b-line-height);
  font-size: var(--fonts-p--b-font-size-mobile)
}

@media (min-width:768px) and (max-width:1200px) {
  .header .navigation__menu--bold {
    font-size: var(--fonts-p--b-font-size-tablet)
  }
}

@media (min-width:1200px) and (max-width:1600px) {
  .header .navigation__menu--bold {
    font-size: var(--fonts-p--b-font-size-small-desktop)
  }
}

@media (min-width:1600px) and (max-width:1900px) {
  .header .navigation__menu--bold {
    font-size: var(--fonts-p--b-font-size-desktop)
  }
}

@media (min-width:1900px) {
  .header .navigation__menu--bold {
    font-size: var(--fonts-p--b-font-size-large-desktop)
  }
}

.header .navigation__menu:hover {
  text-decoration: underline
}

.header .navigation__menu:focus {
  outline: var(--focus-outline-size) solid var(--focus-outline)
}

.header .navigation__menu:focus:not(:focus-visible) {
  outline: none
}

.header .navigation--align-right {
  float: right
}

.header .navigation__item {
  list-style-type: none;
  padding: 0;
  display: none;
  font-family: var(--fonts-p-font-family);
  font-weight: var(--fonts-p-font-weight);
  line-height: var(--fonts-p-line-height);
  font-size: var(--fonts-p-font-size-mobile)
}

@media (min-width:768px) and (max-width:1200px) {
  .header .navigation__item {
    font-size: var(--fonts-p-font-size-tablet)
  }
}

@media (min-width:1200px) and (max-width:1600px) {
  .header .navigation__item {
    font-size: var(--fonts-p-font-size-small-desktop)
  }
}

@media (min-width:1600px) and (max-width:1900px) {
  .header .navigation__item {
    font-size: var(--fonts-p-font-size-desktop)
  }
}

@media (min-width:1900px) {
  .header .navigation__item {
    font-size: var(--fonts-p-font-size-large-desktop)
  }
}

.header .navigation__item--dark {
  color: var(--nav-dark-text);
  background: var(--nav-dark-bg)
}

.header .navigation__item--dark .navigation__icon {
  color: var(--nav-dark-icon-color)
}

.header .navigation__item__menu {
  padding: .5rem 2rem .5rem 3rem;
  cursor: pointer
}

.header .navigation__item__menu:hover {
  text-decoration: underline
}

.header .navigation__item__menu:focus-visible {
  outline: none
}

.header .navigation__item__menu:focus {
  border: var(--focus-outline-size) solid var(--focus-outline)
}

.header .navigation__item--show {
  display: block
}

/* ---------------------------------------------------------------------
   2. header add（追加・上書きスタイル）
   --------------------------------------------------------------------- */

.header a.site-nav--link:hover {
  text-decoration: none;
}
.header .navigation a {
  color: var(--link-text);
}
@media (min-width: 1024px){
  .header .modal-background {
    display: none;
  }
}
.header .navigation__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
}

.header .favorite_fund-button {
  background: var(--search-button-bg);
  color: var(--search-button-text);
  border: none;
  border-left: .0625rem solid var(--border);
  height: 4rem;
  width: 4rem
}
.header .favorite_fund-link {
  display:inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align:center;
}
.header .favorite_fund-link .eds-icon {
  padding-left: 0;
}
.header .favorite_fund-link .eds-icon .icon {
  width: 2rem;
  height: 2rem;
}
.header .fav-icon {
  color: var(--search-button-text);
  width: 2rem;
  height: 2rem;
  padding: 0;
}


/* pc mega menu */

@media (min-width:1024px) {
  .header .header__mega-menu-nav a {
    align-items: center;
  }
  
  .header .header__mega-menu-title-name {
    font-family: var(--fonts-p--b-font-family);
    font-weight: var(--fonts-p--b-font-weight);
    line-height: var(--fonts-p--b-line-height);
    font-size: var(--fonts-p--b-font-size-mobile);
  }
}

@media (min-width:1024px) and (min-width:768px) and (max-width:1200px) {
  .header .header__mega-menu-title-name {
    font-size: var(--fonts-p--b-font-size-tablet);
    display: inline-block;
    padding-top: 0.2em;
  }
}

@media (min-width:1024px) and (min-width:1200px) and (max-width:1600px) {
  .header .header__mega-menu-title-name {
    font-size: var(--fonts-p--b-font-size-small-desktop);
  }
}

@media (min-width:1024px) and (min-width:1600px) and (max-width:1900px) {
  .header .header__mega-menu-title-name {
    font-size: var(--fonts-p--b-font-size-desktop);
  }
}

@media (min-width:1024px) and (min-width:1900px) {
  .header .header__mega-menu-title-name {
    font-size: var(--fonts-p--b-font-size-large-desktop)
  }
}

/* ---------------------------------------------------------------------
   3. uplift (ftj.theme.css の add 20250212 ブロックを移植)
   --------------------------------------------------------------------- */
/** add 20250212 **/

@media (min-width: 1024px) {
  .header .global:has(.global-utility-nav__uplift) {
    width: 100%;
    display: flex;
  }
  .header .global-utility-nav__uplift {
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-grow: 0;
  }
  .header .global-utility-nav__uplift--status {
    font-family: var(--fonts-small--b-font-family);
    font-weight: var(--fonts-small--b-font-weight);
    line-height: var(--fonts-small--b-line-height);
    font-size: var(--fonts-small--b-font-size-mobile);
    margin: auto;
  }
}
@media (min-width: 1024px) and (min-width: 768px) and (max-width: 1200px) {
  .header .global-utility-nav__uplift--status {
    font-size: var(--fonts-small--b-font-size-tablet);
  }
}
@media (min-width: 1024px) and (min-width: 1200px) and (max-width: 1600px) {
  .header .global-utility-nav__uplift--status {
    font-size: var(--fonts-small--b-font-size-small-desktop);
  }
}
@media (min-width: 1024px) and (min-width: 1600px) and (max-width: 1900px) {
  .header .global-utility-nav__uplift--status {
    font-size: var(--fonts-small--b-font-size-desktop);
  }
}
@media (min-width: 1024px) and (min-width: 1900px) {
  .header .global-utility-nav__uplift--status {
    font-size: var(--fonts-small--b-font-size-large-desktop);
  }
}
@media (min-width: 1024px) {
  .header .header__utility-nav--background {
    background-color: #001e62;
  }
  .header .header__wrapper--uplift .global {
    margin-top: 0.6875rem;
    margin-bottom: 0.6875rem;
  }
  .header .global-utility-nav__uplift .uplift-button-link-style {
    background: transparent;
    color: #fff;
    margin-left: 0.5rem;
    border: 1px solid white;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-family: var(--fonts-small-font-family);
    font-weight: var(--fonts-small-font-weight);
    line-height: var(--fonts-small-line-height);
    font-size: var(--fonts-small-font-size-mobile);
  }
}
@media (min-width: 1024px) and (min-width: 768px) and (max-width: 1200px) {
  .header .global-utility-nav__uplift .uplift-button-link-style {
    font-size: var(--fonts-small-font-size-tablet);
  }
}
@media (min-width: 1024px) and (min-width: 1200px) and (max-width: 1600px) {
  .header .global-utility-nav__uplift .uplift-button-link-style {
    font-size: var(--fonts-small-font-size-small-desktop);
  }
}
@media (min-width: 1024px) and (min-width: 1600px) and (max-width: 1900px) {
  .header .global-utility-nav__uplift .uplift-button-link-style {
    font-size: var(--fonts-small-font-size-desktop);
  }
}
@media (min-width: 1024px) and (min-width: 1900px) {
  .header .global-utility-nav__uplift .uplift-button-link-style {
    font-size: var(--fonts-small-font-size-large-desktop);
  }
}

/* ---------------------------------------------------------------------
   4. ftj theme overrides (header / nav) - ftj.theme.css 末尾より移植
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .header button.site-nav--link{
    padding-left: 6px;
    padding-right: 6px

  }

      .header .site-nav--link,
  .header .site-nav--link:visited {color: var(--header-site-nav-active-text);
                               color: #212121; 
                              }
  .header .global-nav--link {
                               color: #212121; 
    
  }
    .header .header__mega-menu-title-name {
        color: #001e62;
    }
}
.header .navigation a {
                               color: #212121; 
  
}
.header .navigation--dark {
        color: #001e62;
}
.header .link--basic {
        color: #001e62;

  
}
.header .navigation--dark .navigation__icon {
        color: #001e62;
}

.header .fav-icon {
        color: #001e62;
}
.header .mobile__toggle {
        color: #001e62;}
@media (min-width: 1024px) {
.header .site-nav--item.list__item.active .carrot-active,
.header .site-nav--item.list__item .carrot-inactive{
  display: inline-flex;
  align-items: center;
  
}
.header .site-nav--item.list__item.active .carrot-inactive,
.header .site-nav--item.list__item .carrot-active{
  display: none;
  
}}
@media (min-width: 1024px) {
 .header   .site-nav--link .icon--small {
        width: 12px;
        height: 12px;
        color: #3769ff;
        cursor: default;
    }
}
@media (min-width: 1024px) {
    .header .header__mega-menu-title {
        font-size: 16px;
        font-weight: var(--fonts-p--b-font-weight);
        border-bottom: 1px solid #ecedee;
        padding-bottom: .5rem;
        margin-bottom: .625rem;
    }
}

/* ---------------------------------------------------------------------
   5. コンポーネント基本スタイル
   旧 ftj.theme_ui_icon.css から header で実際に使用される分のみを移植。
   ※ icon 系（.eds-icon / .icon / .icon--small / .icon--large）は
      ftj.theme_ui_header.js が要素の生成・検索に使用するため汎用クラス名を維持。
   ※ notification / panel / eds-title はサイトアラート削除に伴い未使用のため除去。
   --------------------------------------------------------------------- */
/* icon（旧 ftj.theme_ui_icon.css） */
.header .eds-icon {
  display: inline-flex;
  padding-left: var(--space-xs);
}

.header .eds-icon .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 0;
  fill: currentColor;
  stroke: currentColor;
}

.header .eds-icon .icon--small {
  width: .75rem;
  height: .75rem;
}

.header .eds-icon .icon--large {
  width: 2.5rem;
  height: 2.5rem;
}