/* ===== リセット ===== */
*, *::before, *::after { box-sizing: border-box; } /* 実サイトと同じ前提。これが無いと最大幅 1250px に左右の余白が足されて広がる */
html { font-size: 16px; -webkit-text-size-adjust: 100%; } /* 直書き: rem の基準を 16px に固定（実サイトの vw 指定は真似しない） */
body {
  margin: 0;
  background: var(--gii-color-bg-page);
  color: var(--gii-color-text-primary);
  font-family: var(--gii-typography-body-base-font-family);
  font-size: var(--gii-typography-body-base-font-size);
  line-height: var(--gii-typography-body-base-line-height);
  font-feature-settings: var(--gii-font-feature-palt); /* 実サイトの body と同じ "palt"（プロポーショナル詰め） */
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; color: inherit; }
.cross-inner a { color: var(--gii-color-link-default); text-decoration: none; transition: opacity .3s; } /* 直書き: .3s */
.cross-inner a:hover { opacity: var(--gii-opacity-hover); } /* GII のリンクは hover で色を変えず、薄くする */

/* ===== 器（本文の最大幅 1250px、左右の余白は PC 25px / SP 12px が自動で切り替わる） ===== */
.cross-inner { width: 100%; max-width: var(--gii-layout-container-max-width); margin: 0 auto; padding: 0 var(--gii-layout-gutter); }

/* ===== ヘッダー上段（実サイトは .l-inner を使わず画面幅いっぱい。左 40px ＋ 中身の左右 20px） ===== */
.cross-header-top { background: var(--gii-header-top-background); height: var(--gii-header-top-height); padding-left: var(--gii-header-top-padding-left); }
.cross-header-top__inner { height: 100%; margin: 0 var(--gii-header-top-inner-margin-x); display: flex; align-items: center; justify-content: space-between; }
.cross-logo img { width: var(--gii-header-logo-width); height: auto; }
.cross-logo:hover { opacity: 1; } /* 実サイトもロゴは hover で薄くしない（元CSS .p-header__logo:hover { opacity: 1 }） */
.cross-header-top__right { display: flex; align-items: center; height: 100%; }
.cross-util { display: flex; align-items: center; height: 100%; }
.cross-util a { height: 100%; display: grid; grid-auto-flow: column; align-items: center; gap: var(--gii-header-utility-link-gap); padding: 0 var(--gii-header-utility-link-padding-x);
  color: var(--gii-header-utility-link-text);
  font-family: var(--gii-header-utility-link-typography-font-family); font-size: var(--gii-header-utility-link-typography-font-size);
  font-weight: var(--gii-header-utility-link-typography-font-weight); line-height: var(--gii-header-utility-link-typography-line-height);
  letter-spacing: var(--gii-header-utility-link-typography-letter-spacing); }
.cross-util img { width: var(--gii-header-utility-link-icon-size); height: var(--gii-header-utility-link-icon-size); max-width: none; }
.cross-menu-btn { width: var(--gii-header-menu-button-width); height: 100%; padding: 21px; border: 0; background: none; cursor: pointer; /* 直書き: 21px（元CSS 1.3125rem。SP は上下左右が揃わないのでトークンにしていない） */
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.cross-menu-btn span { display: block; width: var(--gii-header-menu-button-line-width); height: var(--gii-header-menu-button-line-height); background: var(--gii-header-menu-button-line-color); }

/* ===== ヘッダー下段（グローバルナビ帯） ===== */
.cross-header-band { background: var(--gii-header-band-background); height: var(--gii-header-band-height); padding: 0 var(--gii-header-band-padding-x); }
.cross-header-band__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--gii-space-16); }
.cross-nav { display: flex; gap: var(--gii-space-6); } /* 実測 .p-header__btnList の gap 6px（SP 4px）。space の刻みをそのまま使う */
.cross-nav-btn { position: relative; display: inline-grid; grid-auto-flow: column; align-items: center; gap: var(--gii-header-nav-button-gap);
  padding: var(--gii-header-nav-button-padding-y) var(--gii-space-18) var(--gii-header-nav-button-padding-y) var(--gii-header-nav-button-padding-left); /* 右 18px: 矢印の無いボタンの実測（header.navButton.paddingRight の gii.variants） */
  background: var(--gii-header-nav-button-background); color: var(--gii-header-nav-button-text);
  border: var(--gii-border-width-2) solid var(--gii-header-nav-button-background); border-radius: var(--gii-header-nav-button-radius);
  font-family: var(--gii-header-nav-button-typography-font-family); font-size: var(--gii-header-nav-button-typography-font-size);
  font-weight: var(--gii-header-nav-button-typography-font-weight); line-height: var(--gii-header-nav-button-typography-line-height); white-space: nowrap;
  transition: color .3s, border-color .3s; } /* 直書き: .3s */
.cross-nav-btn img { width: var(--gii-header-nav-button-icon-size); height: var(--gii-header-nav-button-icon-size); max-width: none; } /* max-width: none: 帯が狭いときにアイコンが潰れないように */
.cross-nav-btn:hover { opacity: 1; color: var(--gii-header-nav-button-hover-text); border-color: var(--gii-header-nav-button-hover-border-color); }
/* 開閉矢印のあるボタン（実サイトはドロップダウンが開く「レポートを探す」だけ） */
.cross-nav-btn--menu { padding-right: var(--gii-header-nav-button-padding-right); }
.cross-nav-btn--menu::after { content: ""; position: absolute; top: 50%; right: var(--gii-header-nav-button-arrow-right); translate: 0 -50%;
  width: var(--gii-header-nav-button-arrow-width); height: var(--gii-header-nav-button-arrow-height);
  mask: var(--gii-mask-icon-arrow-select) no-repeat center / contain; background-color: var(--gii-header-nav-button-arrow); }
.cross-nav-btn br { display: none; } /* SP だけ2行にする改行 */
.cross-search { display: flex; }
.cross-search input[type=text] { width: var(--gii-header-search-input-width); height: var(--gii-header-search-height); border: 0; padding: 0 var(--gii-header-search-input-padding-x);
  font-size: var(--gii-header-search-input-font-size); background: var(--gii-header-search-background);
  border-radius: var(--gii-header-search-radius) 0 0 var(--gii-header-search-radius); }
/* 検索ボタンは実サイトと同じ input[type=image]。object-fit: scale-down で虫眼鏡は SVG の原寸（33×31）のまま中央に出る */
.cross-search input[type=image] { width: var(--gii-header-search-height); height: var(--gii-header-search-height); border: var(--gii-header-search-button-border);
  background: var(--gii-header-search-button-background); border-radius: 0 var(--gii-header-search-radius) var(--gii-header-search-radius) 0; object-fit: scale-down; cursor: pointer; }

/* ===== パンくず（ホームと区切りは実物のアイコン。元CSS .c-breadcrumb__link::before と同じ組み方） ===== */
.cross-breadcrumb { background: var(--gii-breadcrumb-background); padding: 36px 0 var(--gii-breadcrumb-padding-bottom); } /* 直書き: 上 36px（実測 padding-top 178px − 固定ヘッダーの高さ 142px） */
.cross-breadcrumb ol { font-size: var(--gii-typography-body-base-font-size); line-height: var(--gii-typography-body-base-line-height); } /* 第4回: 親は実測どおり 16px・行の高さ 24px（.c-breadcrumb）。文字の体裁はリンクと現在地にだけ当てる */
.cross-breadcrumb li { display: inline; }
.cross-breadcrumb li + li { margin-left: var(--gii-breadcrumb-gap); }
.cross-breadcrumb li::before { content: ""; display: inline-block; width: var(--gii-breadcrumb-arrow-width); height: var(--gii-breadcrumb-arrow-height);
  margin-right: var(--gii-breadcrumb-icon-gap); translate: 0 var(--gii-breadcrumb-arrow-offset-y);
  background: var(--gii-asset-icon-bread-arrow) no-repeat center / contain; } /* 区切り矢印の色は SVG に固定（#666） */
.cross-breadcrumb li:first-child::before { width: var(--gii-breadcrumb-home-size); height: var(--gii-breadcrumb-home-size); translate: 0 var(--gii-breadcrumb-home-offset-y);
  background-image: var(--gii-asset-icon-bread-home); } /* ホームの色は SVG に固定（#0b6bbf） */
.cross-breadcrumb a, .cross-breadcrumb [aria-current] { font-family: var(--gii-breadcrumb-typography-font-family); font-size: var(--gii-breadcrumb-typography-font-size); font-weight: var(--gii-breadcrumb-typography-font-weight); line-height: var(--gii-breadcrumb-typography-line-height); }
.cross-breadcrumb a { color: var(--gii-breadcrumb-link); }
.cross-breadcrumb [aria-current] { color: var(--gii-breadcrumb-current); }

/* ===== ページ見出し（カテゴリーページの h1.c-title4.--flex と同じ: 分野アイコン＋文字＋グラデーションの下線） ===== */
.cross-title { display: flex; align-items: center; gap: var(--gii-page-title-icon-gap); padding-bottom: 14px; position: relative; color: var(--gii-page-title-text); /* 直書き: 下線との間 14px */
  font-family: var(--gii-typography-heading-h1-font-family); font-size: var(--gii-typography-heading-h1-font-size);
  font-weight: var(--gii-typography-heading-h1-font-weight); line-height: var(--gii-typography-heading-h1-line-height); }
.cross-title img { flex: none; width: var(--gii-page-title-icon-size); height: auto; }
.cross-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 90px; height: 4px; /* 直書き: 下線の幅 90px・高さ 4px */
  border-radius: var(--gii-page-title-underline-radius); background: var(--gii-page-title-underline); }
.cross-lead { margin-top: var(--gii-space-20); font-family: var(--gii-typography-body-lead-font-family); font-size: var(--gii-typography-body-lead-font-size); font-weight: var(--gii-typography-body-lead-font-weight);
  line-height: var(--gii-typography-body-lead-line-height); letter-spacing: var(--gii-typography-body-lead-letter-spacing); }

/* ===== 2カラム（グリッド規則: サイドバー固定幅 ＋ 本文は残り全部 minmax(0, 1fr)） ===== */
.cross-2col { display: grid; grid-template-columns: var(--gii-layout-sidebar-width) minmax(0, 1fr); column-gap: var(--gii-layout-column-gap-category); padding-bottom: var(--gii-space-80); }
.cross-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gii-space-40); align-content: start; min-width: 0; } /* minmax(0, 1fr): 中の表が長くても列が広がらない（表は .cross-table-wrap の中で横スクロール） */

/* 白いカード（レポート一覧カード c-card2 と同じ面） */
.cross-card { background: var(--gii-card-report-background); border-radius: var(--gii-card-report-radius); padding: var(--gii-card-report-padding-y) var(--gii-card-report-padding-x); }
/* ブロック見出し（c-title3: オレンジの丸＋文字） */
.cross-section-title { display: flex; align-items: center; gap: var(--gii-section-title-gap); color: var(--gii-section-title-text);
  font-family: var(--gii-section-title-typography-font-family); font-size: var(--gii-section-title-typography-font-size);
  font-weight: var(--gii-section-title-typography-font-weight); line-height: var(--gii-section-title-typography-line-height); }
.cross-section-title::before { content: ""; flex: none; width: var(--gii-section-title-dot-size); height: var(--gii-section-title-dot-size); border-radius: 50%; background: var(--gii-section-title-dot); } /* 直書き: 円 50%（radius.circle は DTCG 準拠版では除外しているため） */
.cross-body { margin-top: var(--gii-space-16); font-family: var(--gii-typography-body-default-font-family); font-size: var(--gii-typography-body-default-font-size); font-weight: var(--gii-typography-body-default-font-weight);
  line-height: var(--gii-typography-body-default-line-height); letter-spacing: var(--gii-typography-body-default-letter-spacing); }

/* 比較表（本文中の市場統計の表と同じ色） */
.cross-table-wrap { margin-top: var(--gii-space-16); overflow-x: auto; }
.cross-table { width: 100%; border-collapse: collapse; border: var(--gii-table-border); background: var(--gii-table-cell-background); }
.cross-table th { background: var(--gii-table-header-background); color: var(--gii-table-header-text); padding: 5px; /* 直書き: セルの内側 5px */
  font-family: var(--gii-table-header-typography-font-family); font-size: var(--gii-table-header-typography-font-size); font-weight: var(--gii-table-header-typography-font-weight); line-height: var(--gii-table-header-typography-line-height); }
.cross-table td { padding: 5px 5px 5px 14px; color: var(--gii-table-cell-text); border-top: var(--gii-table-border); /* 直書き: 5px / 14px */
  font-family: var(--gii-table-cell-typography-font-family); font-size: var(--gii-table-cell-typography-font-size); font-weight: var(--gii-table-cell-typography-font-weight); line-height: var(--gii-table-cell-typography-line-height); }
.cross-table td:first-child { font-weight: var(--gii-table-cell-typography-row-head-font-weight); }
.cross-note { margin-top: var(--gii-space-8); color: var(--gii-color-text-muted); font-size: var(--gii-typography-caption-muted-font-size); line-height: var(--gii-typography-caption-muted-line-height); }

/* ===== ボタン（c-btn1 相当。アイコン＋文字のグリッド: [アイコン 22px][文字][22px] で文字はボタンの中央） ===== */
.cross-btns { display: grid; grid-template-columns: repeat(3, 256px); row-gap: var(--gii-space-16); justify-items: start; margin-top: var(--gii-space-24); } /* 直書き: 列の幅 256px（第4回。実測の位置から割り出した値: 実サイトの3つのボタンの左端は 256px おき（x = 112 / 368 / 624）で、各ボタンは列の左に寄る。.p-detail__topBtnList 自体は計測しておらず、外側の左余白 約44px は再現していない。README 注意21） */
.cross-btn { display: inline-grid; grid-template-columns: var(--gii-button-icon-box-size) 1fr var(--gii-button-icon-box-size); align-items: center; gap: var(--gii-button-icon-gap);
  text-align: center; border-radius: var(--gii-button-primary-radius); transition: background-color .3s, color .3s; } /* 直書き: .3s */
.cross-btn:hover { opacity: 1; } /* a:hover の「薄くする」を打ち消す（ボタンは色の反転で hover を表す） */
.cross-btn__icon { display: grid; place-items: center; width: var(--gii-button-icon-box-size); height: var(--gii-button-icon-box-size); }
.cross-btn__icon::before { content: ""; display: block; width: var(--gii-button-icon-size); height: var(--gii-button-icon-size); background-color: currentColor;
  mask: var(--cross-icon) no-repeat center / contain; transition: background-color .3s; } /* --cross-icon に var(--gii-mask-icon-…) を入れる（file:// でも効く data URI 版。README「asset トークン」） */
.cross-btn--primary { background: var(--gii-button-primary-background); color: var(--gii-button-primary-text);
  border: var(--gii-button-primary-border-width) solid var(--gii-button-primary-border-color); box-shadow: var(--gii-button-primary-shadow);
  padding: var(--gii-button-primary-cart-padding-y) var(--gii-button-primary-cart-padding-x); min-width: var(--gii-size-button-min-width);
  font-family: var(--gii-button-primary-typography-font-family); font-size: var(--gii-button-primary-typography-font-size); font-weight: var(--gii-button-primary-typography-font-weight); line-height: var(--gii-button-primary-typography-line-height); }
.cross-btn--primary .cross-btn__icon { color: var(--gii-button-primary-icon-color); }
.cross-btn--primary:hover { background: var(--gii-button-primary-hover-background); color: var(--gii-button-primary-hover-text); }
.cross-btn--primary:hover .cross-btn__icon { color: var(--gii-button-primary-hover-text); }
.cross-btn--cta { background: var(--gii-button-cta-background); color: var(--gii-button-cta-text); border: var(--gii-border-width-2) solid var(--gii-button-cta-border-color);
  box-shadow: var(--gii-button-cta-shadow); padding: 15.2px var(--gii-button-cta-padding-x); /* 直書き: 上下 15.2px（3ページで1要素だけの値。README 注意11） */
  font-family: var(--gii-button-cta-typography-font-family); font-size: var(--gii-button-cta-typography-font-size); font-weight: var(--gii-button-cta-typography-font-weight); line-height: var(--gii-button-cta-typography-line-height); }
.cross-btn--cta .cross-btn__icon { color: var(--gii-button-cta-icon-color); }
.cross-btn--cta:hover { background: var(--gii-button-cta-hover-background); color: var(--gii-button-cta-hover-text); }
.cross-btn--cta:hover .cross-btn__icon { color: var(--gii-button-cta-hover-text); }
.cross-btn--secondary { background: var(--gii-button-secondary-background); color: var(--gii-button-secondary-text); border: var(--gii-button-secondary-border);
  box-shadow: var(--gii-button-secondary-shadow); padding: var(--gii-button-secondary-padding-y) var(--gii-button-secondary-padding-x); min-width: var(--gii-button-secondary-min-width);
  font-family: var(--gii-button-secondary-typography-font-family); font-size: var(--gii-button-secondary-typography-font-size); font-weight: var(--gii-button-secondary-typography-font-weight); line-height: var(--gii-button-secondary-typography-line-height); }
.cross-btn--secondary .cross-btn__icon { color: var(--gii-button-secondary-icon-color); }
.cross-btn--secondary:hover { background: var(--gii-button-secondary-hover-background); color: var(--gii-button-secondary-hover-text); }
.cross-btn--secondary:hover .cross-btn__icon { color: var(--gii-button-secondary-hover-text); }
/* 右端に白い丸＋矢印のボタン（フッターの c-btn1 --footer）: [文字][丸 22px]、文字は左寄せ */
.cross-btn--arrow { grid-template-columns: 1fr var(--gii-button-icon-box-size); text-align: left; }
.cross-btn--arrow .cross-btn__icon { border-radius: 50%; background: var(--gii-button-arrow-background); } /* 直書き: 円 50% */
.cross-btn--arrow .cross-btn__icon::before { --cross-icon: var(--gii-mask-icon-arrow); width: var(--gii-button-arrow-width); height: var(--gii-button-arrow-height); background-color: var(--gii-button-arrow-color); }
.cross-btn--arrow:hover .cross-btn__icon { background: var(--gii-button-primary-hover-text); }
.cross-btn--arrow:hover .cross-btn__icon::before { background-color: var(--gii-button-primary-hover-background); }

/* ===== 出典レポートのカード（一覧カード c-card2 と同じ: タグ・表紙・タイトル・メタ情報・チェックボックス） ===== */
.cross-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gii-card-report-gap); margin-top: var(--gii-space-20); }
.cross-src { background: var(--gii-card-report-background); border-radius: var(--gii-card-report-radius); padding: var(--gii-card-report-padding-y) var(--gii-card-report-padding-x); display: flex; flex-direction: column; }
.cross-src__tags { display: flex; flex-wrap: wrap; gap: var(--gii-badge-gap); }
.cross-src__tag { background: var(--gii-badge-background); color: var(--gii-badge-text); border-radius: var(--gii-badge-radius); padding: 0 var(--gii-badge-padding-x);
  font-family: var(--gii-badge-typography-font-family); font-size: var(--gii-badge-typography-font-size); font-weight: var(--gii-badge-typography-font-weight); line-height: var(--gii-badge-typography-line-height); }
.cross-src__head { display: grid; grid-template-columns: var(--gii-card-report-cover-width) minmax(0, 1fr); gap: var(--gii-card-report-head-gap); margin-top: var(--gii-space-12); padding-bottom: var(--gii-space-20); border-bottom: var(--gii-card-report-divider); }
.cross-src__cover img { width: var(--gii-card-report-cover-width); border: var(--gii-card-report-cover-border); }
.cross-src__title { color: var(--gii-card-report-title-text); font-family: var(--gii-card-report-title-typography-font-family); font-size: var(--gii-card-report-title-typography-font-size);
  font-weight: var(--gii-card-report-title-typography-font-weight); line-height: var(--gii-card-report-title-typography-line-height); letter-spacing: var(--gii-card-report-title-typography-letter-spacing); }
.cross-src__en { margin-top: 7px; color: var(--gii-card-report-subtitle-text); font-family: var(--gii-card-report-subtitle-typography-font-family); font-size: var(--gii-card-report-subtitle-typography-font-size); /* 直書き: 7px（実測 .c-card2__enTitle margin-top） */
  font-weight: var(--gii-card-report-subtitle-typography-font-weight); line-height: var(--gii-card-report-subtitle-typography-line-height); letter-spacing: var(--gii-card-report-subtitle-typography-letter-spacing); }
.cross-src__meta { margin-top: var(--gii-space-20); }
.cross-src__meta div { display: grid; grid-template-columns: var(--gii-meta-label-min-width) minmax(0, 1fr); gap: var(--gii-space-8); align-items: start; }
.cross-src__meta div { margin-top: var(--gii-meta-value-row-gap); } /* 第4回: 先頭の行にも当てる（実測では先頭の .c-card2__infoItem にも margin-top 8px があり、区切り線から最初の行まで 20 + 8 = 28px） */
.cross-src__meta dt { background: var(--gii-meta-label-background); border: var(--gii-meta-label-border); border-radius: var(--gii-meta-label-radius); text-align: center; color: var(--gii-meta-label-text-in-card);
  font-family: var(--gii-meta-label-typography-in-card-font-family); font-size: var(--gii-meta-label-typography-in-card-font-size); font-weight: var(--gii-meta-label-typography-in-card-font-weight); line-height: var(--gii-meta-label-typography-in-card-line-height); }
.cross-src__meta dd { margin-top: 1px; color: var(--gii-meta-value-text); /* 直書き: 1px（実測 .c-card2__infoItemValue margin-top） */
  font-family: var(--gii-meta-value-typography-font-family); font-size: var(--gii-meta-value-typography-font-size); font-weight: var(--gii-meta-value-typography-font-weight); line-height: var(--gii-meta-value-typography-line-height); }
.cross-src__meta dd a { color: var(--gii-meta-value-link); }
.cross-src__meta .usd { font-size: var(--gii-price-usd-typography-in-card-font-size); }
.cross-src__meta .note { color: var(--gii-price-note-text); }
.cross-src__check { margin-top: auto; padding-top: var(--gii-card-report-checkbox-row-padding-top); text-align: center; }
.cross-src__check input { position: absolute; opacity: 0; pointer-events: none; }
.cross-src__check label { position: relative; display: inline; padding-left: var(--gii-card-report-checkbox-label-padding-left); color: var(--gii-card-report-checkbox-text); cursor: pointer;
  font-family: var(--gii-card-report-checkbox-typography-font-family); font-size: var(--gii-card-report-checkbox-typography-font-size); font-weight: var(--gii-card-report-checkbox-typography-font-weight); line-height: var(--gii-card-report-checkbox-typography-line-height); }
.cross-src__check label::before { content: ""; position: absolute; left: 0; top: 0; width: var(--gii-checkbox-size); height: var(--gii-checkbox-size);
  background: var(--gii-checkbox-background); border: var(--gii-checkbox-border); border-radius: var(--gii-checkbox-radius); }
/* チェックしたとき（第5回で実測 checkbox.*）: 枠の色はそのまま、地が青になり白いチェック（asset.icon.check。SVG が白で固定なのでそのまま背景に置く） */
.cross-src__check input:checked + label::before { background: var(--gii-checkbox-checked-background) var(--gii-asset-icon-check) no-repeat center / var(--gii-checkbox-mark-width) var(--gii-checkbox-mark-height); }
/* キーボードで来た時の枠（第5回で実測 focus.ring。実サイトは label に outline を付ける）。第5回: label は実サイトと同じ inline・枠は top: 0
   （inline の label の outline は、はみ出した枠も囲む。実サイトの focus の切り出し measured/ref/category_checkbox_card_focus.png と同じ形） */
.cross-src__check input:focus-visible + label { outline: var(--gii-focus-ring-width) solid var(--gii-focus-ring-color); outline-offset: var(--gii-focus-ring-offset); }

/* ===== 左サイドバー（カテゴリーページの左ナビ .p-nav と同じ） ===== */
.cross-side-nav { background: var(--gii-side-nav-background); border-radius: var(--gii-side-nav-radius); }
.cross-side-nav__head { padding: var(--gii-side-nav-head-padding-top) var(--gii-side-nav-padding-right) var(--gii-side-nav-padding-bottom) var(--gii-side-nav-padding-left); border-bottom: var(--gii-side-nav-divider); }
.cross-side-nav__title { display: flex; align-items: center; gap: var(--gii-section-title-gap);
  font-family: var(--gii-side-nav-title-typography-font-family); font-size: var(--gii-side-nav-title-typography-font-size); font-weight: var(--gii-side-nav-title-typography-font-weight); line-height: var(--gii-side-nav-title-typography-line-height); }
.cross-side-nav__title::before { content: ""; flex: none; width: var(--gii-section-title-dot-size); height: var(--gii-section-title-dot-size); border-radius: 50%; background: var(--gii-section-title-dot); } /* 直書き: 円 50% */
.cross-side-nav__parent { display: grid; grid-template-columns: var(--gii-side-nav-parent-arrow-width) minmax(0, 1fr); align-items: center; gap: var(--gii-side-nav-parent-gap); margin-top: var(--gii-space-16); }
.cross-side-nav__parent::before { content: ""; width: var(--gii-side-nav-parent-arrow-width); height: var(--gii-side-nav-parent-arrow-height); background: var(--gii-asset-icon-arrow-select) no-repeat center / contain; } /* 色は SVG に固定（#afafaf） */
.cross-side-nav__parent a { color: var(--gii-side-nav-parent-text); font-family: var(--gii-side-nav-current-typography-font-family); font-size: var(--gii-side-nav-current-typography-font-size); font-weight: var(--gii-side-nav-current-typography-font-weight); line-height: var(--gii-side-nav-current-typography-line-height); }
.cross-side-nav__menu { display: grid; gap: var(--gii-space-12); padding: var(--gii-side-nav-padding-top) var(--gii-side-nav-padding-right) var(--gii-side-nav-head-padding-top) var(--gii-side-nav-padding-left); }
.cross-side-nav__menu a { color: var(--gii-side-nav-level1-text); font-family: var(--gii-side-nav-level1-typography-font-family); font-size: var(--gii-side-nav-level1-typography-font-size); font-weight: var(--gii-side-nav-level1-typography-font-weight); line-height: var(--gii-side-nav-level1-typography-line-height); }
.cross-side-nav__menu a.is-current { color: var(--gii-side-nav-current-text); }
.cross-count { color: var(--gii-side-nav-count-text); font-family: var(--gii-side-nav-count-typography-font-family); font-size: var(--gii-side-nav-count-typography-font-size); font-weight: var(--gii-side-nav-count-typography-font-weight); } /* 名前と件数の間は実サイトと同じく HTML の空白1つ */
.cross-side-btn { width: 100%; min-width: 0; margin-top: var(--gii-space-24); padding: var(--gii-button-primary-sidebar-padding-y) var(--gii-button-primary-sidebar-padding-x); } /* サイドバーのボタンは寸法だけ sidebar 用 */

/* ===== フッター ===== */
.cross-footer { background: var(--gii-color-bg-surface); border-top: var(--gii-footer-border); padding: var(--gii-footer-padding-top) 0 var(--gii-footer-padding-bottom); }
.cross-footer__inner { max-width: var(--gii-footer-inner-max-width); margin: 0 auto; padding: 0 var(--gii-layout-gutter); }
.cross-footer__content { display: grid; grid-template-columns: var(--gii-footer-logo-width) minmax(0, 1fr); column-gap: 66px; } /* 直書き: 66px（実測の位置: 右列の左端 284px − 左列の右端 218px） */
.cross-footer__left { text-align: center; }
.cross-footer__logo img { width: var(--gii-footer-logo-width); }
.cross-footer__company { margin-top: var(--gii-footer-company-name-margin-top); color: var(--gii-footer-company-name-text);
  font-family: var(--gii-footer-company-name-typography-font-family); font-size: var(--gii-footer-company-name-typography-font-size); font-weight: var(--gii-footer-company-name-typography-font-weight); line-height: var(--gii-footer-company-name-typography-line-height); }
.cross-footer__group { margin-top: 1.6px; font-family: var(--gii-footer-group-name-typography-font-family); font-size: var(--gii-footer-group-name-typography-font-size); /* 直書き: 1.6px（実測 .p-footer__groupName margin-top） */
  font-weight: var(--gii-footer-group-name-typography-font-weight); line-height: var(--gii-footer-group-name-typography-line-height); }
.cross-footer__desc { margin-top: var(--gii-footer-company-desc-margin-top); padding-top: var(--gii-footer-company-desc-padding-top); border-top: var(--gii-footer-company-desc-border); color: var(--gii-footer-company-desc-text);
  font-family: var(--gii-footer-company-desc-typography-font-family); font-size: var(--gii-footer-company-desc-typography-font-size); font-weight: var(--gii-footer-company-desc-typography-font-weight); line-height: var(--gii-footer-company-desc-typography-line-height); }
.cross-footer__actions { display: grid; gap: var(--gii-space-12); margin-top: var(--gii-space-24); } /* 実測の位置: 会社説明の下 24px、ボタンの間 12px */
.cross-footer-btn { width: 100%; min-width: 0; padding: var(--gii-button-primary-footer-padding-y) var(--gii-button-primary-footer-padding-x); } /* フッターのボタンは寸法だけ footer 用 */
.cross-footer__phone { display: grid; grid-template-columns: var(--gii-footer-phone-icon-size) auto; justify-content: start; align-items: center; gap: var(--gii-footer-phone-gap); margin-top: var(--gii-space-24); color: var(--gii-footer-phone-text);
  font-family: var(--gii-footer-phone-typography-font-family); font-size: var(--gii-footer-phone-typography-font-size); font-weight: var(--gii-footer-phone-typography-font-weight); line-height: var(--gii-footer-phone-typography-line-height); }
.cross-footer__phone img { width: var(--gii-footer-phone-icon-size); height: var(--gii-footer-phone-icon-size); }
.cross-footer__hours { margin-top: var(--gii-footer-hours-margin-top); color: var(--gii-footer-hours-text);
  font-family: var(--gii-footer-hours-typography-font-family); font-size: var(--gii-footer-hours-typography-font-size); font-weight: var(--gii-footer-hours-typography-font-weight); line-height: var(--gii-footer-hours-typography-line-height); }
.cross-footer__social { display: flex; justify-content: flex-start; gap: var(--gii-footer-social-gap); margin-top: var(--gii-footer-social-margin-top); } /* 第4回: 実サイトと同じく左寄せ（第3回は Google のボタンを省いたので中央に置いていた） */
.cross-footer__social img { width: var(--gii-footer-social-icon-size); height: var(--gii-footer-social-icon-size); }
.cross-footer__nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gii-space-24); align-content: start; } /* 実測の位置: 5列・列の間 24px */
.cross-footer__nav h3 { position: relative; padding-bottom: var(--gii-space-12); border-bottom: var(--gii-footer-nav-title-border); color: var(--gii-footer-nav-title-text);
  font-family: var(--gii-footer-nav-title-typography-font-family); font-size: var(--gii-footer-nav-title-typography-font-size); font-weight: var(--gii-footer-nav-title-typography-font-weight); line-height: var(--gii-footer-nav-title-typography-line-height); }
/* 見出しの下線の左端の色付き部分。計測していない（::before をプローブしていなかった）ので、元CSS common_prod.css の
   .p-footer__navTitle::before の宣言を写した。#deb200 は3ページの計測に現れない色なのでトークンに無い（README 注意4） */
.cross-footer__nav h3::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 22px; height: 2px; background: linear-gradient(90deg, var(--gii-color-brand-deep) 54.81%, #deb200 100%); } /* 直書き: 元CSSの宣言 */
.cross-footer__nav ul { display: grid; gap: var(--gii-space-16); margin-top: var(--gii-space-24); } /* 実測の位置: 見出しの下 24px、リンクの間 16px */
.cross-footer__nav ul a { display: grid; grid-template-columns: var(--gii-footer-nav-link-marker-width) minmax(0, 1fr); align-items: start; gap: var(--gii-footer-nav-link-gap); color: var(--gii-footer-nav-link-text);
  font-family: var(--gii-footer-nav-link-typography-font-family); font-size: var(--gii-footer-nav-link-typography-font-size); font-weight: var(--gii-footer-nav-link-typography-font-weight);
  line-height: var(--gii-footer-nav-link-typography-line-height); letter-spacing: var(--gii-footer-nav-link-typography-letter-spacing); }
.cross-footer__nav ul a::before { content: ""; width: var(--gii-footer-nav-link-marker-width); height: var(--gii-footer-nav-link-marker-height); margin-top: var(--gii-footer-nav-link-marker-offset-y); background: var(--gii-footer-nav-link-marker-color); }
.cross-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--gii-footer-bottom-gap); margin-top: var(--gii-footer-bottom-margin-top); }
.cross-footer__links { display: flex; flex-wrap: wrap; gap: var(--gii-space-24); } /* 実測の位置: リンクの間 24px */
.cross-footer__links a { color: var(--gii-footer-bottom-link-text); font-family: var(--gii-footer-bottom-link-typography-font-family); font-size: var(--gii-footer-bottom-link-typography-font-size);
  font-weight: var(--gii-footer-bottom-link-typography-font-weight); line-height: var(--gii-footer-bottom-link-typography-line-height); }
.cross-copyright { color: var(--gii-footer-copyright-text); font-family: var(--gii-footer-copyright-typography-font-family); font-size: var(--gii-footer-copyright-typography-font-size); line-height: var(--gii-footer-copyright-typography-line-height); }

/* ===== ページトップボタン（スクロールすると出る。実サイトと同じ fixed の丸） ===== */
.cross-pagetop { position: fixed; right: var(--gii-footer-pagetop-right); bottom: var(--gii-footer-pagetop-bottom); z-index: 10; width: var(--gii-footer-pagetop-size); height: var(--gii-footer-pagetop-size);
  display: flex; align-items: center; justify-content: center; border-radius: 50%; border: var(--gii-footer-pagetop-border); background: var(--gii-footer-pagetop-background); cursor: pointer; /* 直書き: 円 50% */
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cross-pagetop.is-active { opacity: 1; visibility: visible; }
.cross-pagetop img { width: var(--gii-footer-pagetop-icon-size); height: auto; aspect-ratio: 1; object-fit: contain; transition: transform .3s; }
.cross-pagetop:hover img { transform: translateY(-5px); } /* 直書き: 元CSS translateY(-0.3125rem) */


/* =====================================================================
   第5回で追加した部品（実測＝GII に実在する部品 ／ 派生＝実在しないので既存トークンの参照だけで作った部品）
   ===================================================================== */
/* ===== カードを並べるグリッド（派生 cardGrid.*）。カードの高さは行ごとに揃う（grid の既定 align-items: stretch） ===== */
.cross-grid { display: grid; column-gap: var(--gii-card-grid-3col-column-gap); row-gap: var(--gii-card-grid-3col-row-gap); }
.cross-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cross-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gii-card-grid-2col-column-gap); row-gap: var(--gii-card-grid-2col-row-gap); }
.cross-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gii-card-grid-4col-column-gap); row-gap: var(--gii-card-grid-4col-row-gap); }
.cross-grid > * { min-width: 0; } /* 長い単語で列がはみ出さないように */

/* ===== 数値カード（派生 card.generic.stat）: 大きな数字＋単位＋ラベル＋前期比 ===== */
/* 第8回: 縁ラインの禁止（ユーザー決定 2026-10-08）。上端の線（::before）をやめ、白地＋1px の薄い罫線で全周を囲む（方向1 ヘアライン） */
.cross-stat { background: var(--gii-card-generic-stat-background); border: var(--gii-card-generic-stat-border); border-radius: var(--gii-card-generic-stat-radius); padding: var(--gii-card-generic-stat-padding-y) var(--gii-card-generic-stat-padding-x); }
.cross-stat__label { color: var(--gii-card-generic-stat-label-text); font-family: var(--gii-card-generic-stat-label-typography-font-family); font-size: var(--gii-card-generic-stat-label-typography-font-size); font-weight: var(--gii-card-generic-stat-label-typography-font-weight); line-height: var(--gii-card-generic-stat-label-typography-line-height); }
.cross-stat__value { margin-top: var(--gii-space-12); color: var(--gii-card-generic-stat-value-text); font-family: var(--gii-card-generic-stat-value-typography-font-family); font-size: var(--gii-card-generic-stat-value-typography-font-size); font-weight: var(--gii-card-generic-stat-value-typography-font-weight); line-height: var(--gii-card-generic-stat-value-typography-line-height); }
.cross-stat__unit { margin-left: var(--gii-space-4); font-family: var(--gii-card-generic-stat-unit-typography-font-family); font-size: var(--gii-card-generic-stat-unit-typography-font-size); font-weight: var(--gii-card-generic-stat-unit-typography-font-weight); }
.cross-stat__delta { margin-top: var(--gii-space-8); font-family: var(--gii-card-generic-stat-delta-typography-font-family); font-size: var(--gii-card-generic-stat-delta-typography-font-size); font-weight: var(--gii-card-generic-stat-delta-typography-font-weight); line-height: var(--gii-card-generic-stat-delta-typography-line-height); }
.cross-stat__delta.is-up { color: var(--gii-card-generic-stat-delta-up); }
.cross-stat__delta.is-down { color: var(--gii-card-generic-stat-delta-down); }

/* ===== アイコンカード（派生 card.generic.icon。実在するメリットのカード card.feature から派生）: アイコン＋見出し＋説明 ===== */
.cross-icon-card { background: var(--gii-color-bg-surface); border: var(--gii-card-generic-icon-border); border-radius: var(--gii-card-generic-icon-radius); padding: var(--gii-card-generic-icon-padding-y) var(--gii-card-generic-icon-padding-x); text-align: center; }
.cross-icon-card img { height: var(--gii-card-generic-icon-icon-height); width: auto; margin: 0 auto; }
.cross-icon-card h3 { margin-top: var(--gii-card-generic-icon-title-margin-top); color: var(--gii-card-generic-icon-title-text); font-family: var(--gii-card-generic-icon-title-typography-font-family); font-size: var(--gii-card-generic-icon-title-typography-font-size); font-weight: var(--gii-card-generic-icon-title-typography-font-weight); line-height: var(--gii-card-generic-icon-title-typography-line-height); }
.cross-icon-card p { margin-top: var(--gii-card-generic-icon-body-margin-top); text-align: left; font-family: var(--gii-card-generic-icon-body-typography-font-family); font-size: var(--gii-card-generic-icon-body-typography-font-size); font-weight: var(--gii-card-generic-icon-body-typography-font-weight); line-height: var(--gii-card-generic-icon-body-typography-line-height); letter-spacing: var(--gii-card-generic-icon-body-typography-letter-spacing); }

/* ===== 見出し＋本文だけの最小カード（派生 card.generic.plain） ===== */
.cross-plain { background: var(--gii-card-generic-plain-background); border-radius: var(--gii-card-generic-plain-radius); padding: var(--gii-card-generic-plain-padding-y) var(--gii-card-generic-plain-padding-x); }
.cross-plain--subtle { background: var(--gii-card-generic-plain-background-subtle); }
.cross-plain h3 { color: var(--gii-card-generic-plain-title-text); font-family: var(--gii-card-generic-plain-title-typography-font-family); font-size: var(--gii-card-generic-plain-title-typography-font-size); font-weight: var(--gii-card-generic-plain-title-typography-font-weight); line-height: var(--gii-card-generic-plain-title-typography-line-height); letter-spacing: var(--gii-card-generic-plain-title-typography-letter-spacing); }
.cross-plain p { margin-top: var(--gii-card-generic-plain-gap); font-family: var(--gii-card-generic-plain-body-typography-font-family); font-size: var(--gii-card-generic-plain-body-typography-font-size); font-weight: var(--gii-card-generic-plain-body-typography-font-weight); line-height: var(--gii-card-generic-plain-body-typography-line-height); letter-spacing: var(--gii-card-generic-plain-body-typography-letter-spacing); }

/* ===== サムネイルが上のカード（派生 card.generic.imageTop）: 記事一覧の定番 ===== */
.cross-post { display: flex; flex-direction: column; gap: var(--gii-card-generic-image-top-gap); background: var(--gii-card-generic-image-top-background); border-radius: var(--gii-card-generic-image-top-radius); padding: var(--gii-card-generic-image-top-padding); color: inherit; }
.cross-post:hover { opacity: var(--gii-card-generic-image-top-hover-opacity); }
.cross-post img { width: 100%; aspect-ratio: var(--gii-card-generic-image-top-aspect-ratio); object-fit: cover; border-radius: var(--gii-card-generic-image-top-image-radius); }
.cross-post__title { color: var(--gii-card-generic-image-top-title-text); font-family: var(--gii-card-generic-image-top-title-typography-font-family); font-size: var(--gii-card-generic-image-top-title-typography-font-size); font-weight: var(--gii-card-generic-image-top-title-typography-font-weight); line-height: var(--gii-card-generic-image-top-title-typography-line-height); letter-spacing: var(--gii-card-generic-image-top-title-typography-letter-spacing); }
.cross-post__excerpt { color: var(--gii-card-generic-image-top-excerpt-text); font-family: var(--gii-card-generic-image-top-excerpt-typography-font-family); font-size: var(--gii-card-generic-image-top-excerpt-typography-font-size); font-weight: var(--gii-card-generic-image-top-excerpt-typography-font-weight); line-height: var(--gii-card-generic-image-top-excerpt-typography-line-height); letter-spacing: var(--gii-card-generic-image-top-excerpt-typography-letter-spacing); }
.cross-post__meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gii-article-meta-gap); color: var(--gii-card-generic-image-top-meta-text); font-family: var(--gii-card-generic-image-top-meta-typography-font-family); font-size: var(--gii-card-generic-image-top-meta-typography-font-size); font-weight: var(--gii-card-generic-image-top-meta-typography-font-weight); line-height: var(--gii-card-generic-image-top-meta-typography-line-height); }
.cross-post__meta .cross-src__tag { line-height: var(--gii-badge-typography-line-height); }

/* ===== 図版（派生 chart.*）: インライン SVG の色・文字・線はすべて CSS 変数で塗る ===== */
.cross-chart { background: var(--gii-chart-plot-background); border-radius: var(--gii-radius-md); padding: var(--gii-chart-plot-padding); }
.cross-chart h3 { font-family: var(--gii-chart-title-typography-font-family); font-size: var(--gii-chart-title-typography-font-size); font-weight: var(--gii-chart-title-typography-font-weight); line-height: var(--gii-chart-title-typography-line-height); }
.cross-chart svg { display: block; width: 100%; height: auto; margin-top: var(--gii-space-8); overflow: visible; }
.cross-chart svg text { font-family: var(--gii-chart-axis-label-typography-font-family); font-size: var(--gii-chart-axis-label-typography-font-size); font-weight: var(--gii-chart-axis-label-typography-font-weight); fill: var(--gii-chart-axis-label-text); font-feature-settings: var(--gii-font-feature-palt); }
.cross-chart svg text.lbl { font-family: var(--gii-chart-data-label-typography-font-family); font-size: var(--gii-chart-data-label-typography-font-size); font-weight: var(--gii-font-weight-bold); fill: var(--gii-chart-data-label-text); }
.cross-chart svg text.lbl-in { fill: var(--gii-chart-data-label-text-inside); }
.cross-chart .s1 { fill: var(--gii-chart-series-1); } .cross-chart .s2 { fill: var(--gii-chart-series-2); } .cross-chart .s3 { fill: var(--gii-chart-series-3); }
.cross-chart .s4 { fill: var(--gii-chart-series-4); } .cross-chart .s5 { fill: var(--gii-chart-series-5); } .cross-chart .s6 { fill: var(--gii-chart-series-6); }
.cross-chart .axis { stroke: var(--gii-chart-axis-line); stroke-width: var(--gii-chart-axis-line-width); }
.cross-chart .grid { stroke: var(--gii-chart-grid-line); stroke-width: var(--gii-chart-grid-line-width); }
.cross-chart .ln { fill: none; stroke-width: var(--gii-chart-line-width); stroke-linejoin: round; }
.cross-chart .ln.s1 { stroke: var(--gii-chart-series-1); } .cross-chart .ln.s2 { stroke: var(--gii-chart-series-2); }
.cross-chart .pt { stroke: var(--gii-chart-line-point-stroke); stroke-width: var(--gii-chart-line-width); }
/* 第9回: 円グラフの扇形の白い境界線は廃止（ユーザー決定 2026-10-09）。.slice に stroke は付けない */
.cross-legend { display: flex; flex-wrap: wrap; gap: var(--gii-space-4) var(--gii-chart-legend-gap); margin-top: var(--gii-space-12); color: var(--gii-chart-legend-text); font-family: var(--gii-chart-legend-typography-font-family); font-size: var(--gii-chart-legend-typography-font-size); font-weight: var(--gii-chart-legend-typography-font-weight); line-height: var(--gii-chart-legend-typography-line-height); }
.cross-legend span { display: inline-flex; align-items: center; gap: var(--gii-chart-legend-marker-gap); }
.cross-legend i { width: var(--gii-chart-legend-marker-size); height: var(--gii-chart-legend-marker-size); border-radius: var(--gii-radius-xs); }
.cross-legend .s1 { background: var(--gii-chart-series-1); } .cross-legend .s2 { background: var(--gii-chart-series-2); } .cross-legend .s3 { background: var(--gii-chart-series-3); }
.cross-legend .s4 { background: var(--gii-chart-series-4); } .cross-legend .s5 { background: var(--gii-chart-series-5); } .cross-legend .s6 { background: var(--gii-chart-series-6); }

/* ===== ブログ記事風の本文（実測: 見出し heading.section・リスト list.*・図版 figure ／ 派生: 引用・注意書き・図版の説明） ===== */
.cross-article { background: var(--gii-color-bg-surface); border-radius: var(--gii-radius-md); padding: var(--gii-space-40); }
.cross-h2 { position: relative; padding-bottom: var(--gii-heading-section-padding-bottom); border-bottom: var(--gii-heading-section-border); color: var(--gii-heading-section-text);
  font-family: var(--gii-heading-section-typography-font-family); font-size: var(--gii-heading-section-typography-font-size); font-weight: var(--gii-heading-section-typography-font-weight); line-height: var(--gii-heading-section-typography-line-height); letter-spacing: var(--gii-heading-section-typography-letter-spacing); }
.cross-h2::before { content: ""; position: absolute; left: 0; bottom: calc(var(--gii-heading-section-accent-height) * -1); width: var(--gii-heading-section-accent-width); height: var(--gii-heading-section-accent-height); background: var(--gii-gradient-title2); }
.cross-article p { margin-top: var(--gii-space-16); font-family: var(--gii-typography-body-default-font-family); font-size: var(--gii-typography-body-default-font-size); font-weight: var(--gii-typography-body-default-font-weight); line-height: var(--gii-typography-body-default-line-height); letter-spacing: var(--gii-typography-body-default-letter-spacing); }
.cross-ul { display: grid; gap: var(--gii-list-bullet-item-gap); margin-top: var(--gii-list-bullet-margin-top); }
.cross-ul li { position: relative; padding-left: var(--gii-list-bullet-padding-left); font-family: var(--gii-list-bullet-typography-font-family); font-size: var(--gii-list-bullet-typography-font-size); font-weight: var(--gii-list-bullet-typography-font-weight); line-height: var(--gii-list-bullet-typography-line-height); letter-spacing: var(--gii-list-bullet-typography-letter-spacing); }
.cross-ul li::before { content: ""; position: absolute; left: var(--gii-list-bullet-marker-left); top: var(--gii-list-bullet-marker-top); width: var(--gii-list-bullet-marker-size); height: var(--gii-list-bullet-marker-size); border-radius: 50%; background: var(--gii-list-bullet-marker-color); }
.cross-ol { counter-reset: num; margin-top: var(--gii-list-bullet-margin-top); }
.cross-ol li { position: relative; counter-increment: num; padding-left: var(--gii-list-ordered-padding-left); font-family: var(--gii-list-ordered-typography-font-family); font-size: var(--gii-list-ordered-typography-font-size); font-weight: var(--gii-list-ordered-typography-font-weight); line-height: var(--gii-list-ordered-typography-line-height); letter-spacing: var(--gii-list-ordered-typography-letter-spacing); }
.cross-ol li + li { margin-top: var(--gii-list-ordered-item-gap); }
.cross-ol li::before { content: counter(num) "."; position: absolute; left: 0; top: 0; color: var(--gii-list-ordered-marker-color); }
/* 第8回: 左の縦線をやめ、白地＋全周 1px の罫線。引用であることは左上の欧文の引用符（“）で示す（本文と出典は右の列） */
.cross-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--gii-blockquote-mark-gap); margin: var(--gii-space-16) 0 0; padding: var(--gii-blockquote-padding-y) var(--gii-blockquote-padding-x); background: var(--gii-blockquote-background); border: var(--gii-blockquote-border); border-radius: var(--gii-blockquote-radius); color: var(--gii-blockquote-text);
  font-family: var(--gii-blockquote-typography-font-family); font-size: var(--gii-blockquote-typography-font-size); font-weight: var(--gii-blockquote-typography-font-weight); line-height: var(--gii-blockquote-typography-line-height); letter-spacing: var(--gii-blockquote-typography-letter-spacing); }
.cross-quote::before { content: "\201C"; grid-row: 1 / span 2; color: var(--gii-blockquote-mark-color); font-family: var(--gii-blockquote-mark-typography-font-family); font-size: var(--gii-blockquote-mark-typography-font-size); font-weight: var(--gii-blockquote-mark-typography-font-weight); line-height: var(--gii-blockquote-mark-typography-line-height); }
.cross-quote > * { grid-column: 2; margin: 0; }
.cross-article .cross-quote > p { margin-top: 0; } /* 本文の段落の上余白（.cross-article p）を引用の中では当てない */
.cross-quote cite { display: block; margin-top: var(--gii-space-8); font-style: normal; font-family: var(--gii-blockquote-cite-font-family); font-size: var(--gii-blockquote-cite-font-size); line-height: var(--gii-blockquote-cite-line-height); }
/* 第8回: 左の線をやめ、白地＋全周 1px の罫線。見出しの前にセクション見出しと同じ丸い印（色は見出しの文字と同じ） */
.cross-callout { margin-top: var(--gii-space-16); padding: var(--gii-callout-note-padding-y) var(--gii-callout-note-padding-x); background: var(--gii-callout-note-background); border: var(--gii-callout-note-border); border-radius: var(--gii-callout-note-radius); }
.cross-callout b { display: flex; align-items: center; gap: var(--gii-callout-note-title-dot-gap); color: var(--gii-callout-note-title-text); font-family: var(--gii-callout-note-title-typography-font-family); font-size: var(--gii-callout-note-title-typography-font-size); font-weight: var(--gii-callout-note-title-typography-font-weight); line-height: var(--gii-callout-note-title-typography-line-height); }
.cross-callout b::before { content: ""; flex: none; width: var(--gii-callout-note-title-dot-size); height: var(--gii-callout-note-title-dot-size); border-radius: 50%; background: currentColor; }
.cross-callout--warning { background: var(--gii-callout-warning-background); border: var(--gii-callout-warning-border); border-radius: var(--gii-callout-warning-radius); }
.cross-callout--warning b { color: var(--gii-callout-warning-title-text); gap: var(--gii-callout-warning-title-dot-gap); }
.cross-callout--warning b::before { width: var(--gii-callout-warning-title-dot-size); height: var(--gii-callout-warning-title-dot-size); }
.cross-article .cross-callout p { margin-top: var(--gii-space-4); }
.cross-figure { margin-top: var(--gii-space-24); }
.cross-figure img { width: 100%; aspect-ratio: var(--gii-figure-image-aspect-ratio); object-fit: cover; border-radius: var(--gii-figure-image-radius); }
.cross-figure figcaption { margin-top: var(--gii-figure-caption-margin-top); color: var(--gii-figure-caption-text); font-family: var(--gii-figure-caption-typography-font-family); font-size: var(--gii-figure-caption-typography-font-size); font-weight: var(--gii-figure-caption-typography-font-weight); line-height: var(--gii-figure-caption-typography-line-height); }

/* ===== よくあるご質問（実測 accordion.faq。details/summary なので JS なしで開閉できる） ===== */
.cross-faq { display: grid; gap: var(--gii-accordion-faq-gap); margin-top: var(--gii-space-20); }
.cross-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) var(--gii-accordion-faq-icon-size); align-items: center; gap: var(--gii-accordion-faq-summary-gap); list-style: none; cursor: pointer;
  padding: var(--gii-accordion-faq-summary-padding-y) var(--gii-accordion-faq-summary-padding-right) var(--gii-accordion-faq-summary-padding-y) var(--gii-accordion-faq-summary-padding-left);
  background: var(--gii-accordion-faq-summary-background); border: var(--gii-accordion-faq-summary-border); border-bottom: var(--gii-accordion-faq-summary-border-bottom); border-radius: var(--gii-accordion-faq-summary-radius); }
.cross-faq summary::-webkit-details-marker { display: none; }
.cross-faq details[open] summary { border-bottom-left-radius: var(--gii-accordion-faq-summary-open-radius-bottom); border-bottom-right-radius: var(--gii-accordion-faq-summary-open-radius-bottom); }
.cross-faq summary:focus-visible { outline: var(--gii-focus-ring-width) solid var(--gii-focus-ring-color); outline-offset: var(--gii-focus-ring-offset); }
.cross-faq__q { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gii-accordion-faq-summary-mark-gap); align-items: center; }
.cross-faq__mark { color: var(--gii-accordion-faq-question-text); font-family: var(--gii-accordion-faq-question-typography-font-family); font-size: var(--gii-accordion-faq-question-typography-font-size); font-weight: var(--gii-accordion-faq-question-typography-font-weight); line-height: var(--gii-accordion-faq-question-typography-line-height); }
.cross-faq__title { color: var(--gii-accordion-faq-title-text); font-family: var(--gii-accordion-faq-title-typography-font-family); font-size: var(--gii-accordion-faq-title-typography-font-size); font-weight: var(--gii-accordion-faq-title-typography-font-weight); line-height: var(--gii-accordion-faq-title-typography-line-height); letter-spacing: var(--gii-accordion-faq-title-typography-letter-spacing); }
.cross-faq__icon { position: relative; width: var(--gii-accordion-faq-icon-size); height: var(--gii-accordion-faq-icon-size); border-radius: 50%; border: var(--gii-accordion-faq-icon-border); background: var(--gii-accordion-faq-icon-background); }
.cross-faq__icon::before, .cross-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; background: var(--gii-accordion-faq-icon-bar-color); transition: opacity .3s; } /* 直書き: .3s（元CSS の transition） */
.cross-faq__icon::before { width: var(--gii-accordion-faq-icon-bar-length); height: var(--gii-accordion-faq-icon-bar-thickness); }
.cross-faq__icon::after { width: var(--gii-accordion-faq-icon-bar-thickness); height: var(--gii-accordion-faq-icon-bar-length); }
.cross-faq details[open] .cross-faq__icon::after { opacity: var(--gii-accordion-faq-icon-open-vertical-opacity); } /* 開くと縦棒が消えて「−」 */
.cross-faq__body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--gii-accordion-faq-body-gap); background: var(--gii-accordion-faq-body-background);
  border: var(--gii-accordion-faq-body-border); border-top: 0; border-radius: 0 0 var(--gii-radius-md) var(--gii-radius-md);
  padding: var(--gii-accordion-faq-body-padding-top) var(--gii-accordion-faq-body-padding-right) var(--gii-accordion-faq-body-padding-bottom) var(--gii-accordion-faq-body-padding-left); }
.cross-faq__body .cross-faq__mark { color: var(--gii-accordion-faq-answer-text); }
.cross-faq__body p { color: var(--gii-color-text-primary); font-family: var(--gii-accordion-faq-answer-text-typography-font-family); font-size: var(--gii-accordion-faq-answer-text-typography-font-size); font-weight: var(--gii-accordion-faq-answer-text-typography-font-weight); line-height: var(--gii-accordion-faq-answer-text-typography-line-height); letter-spacing: var(--gii-accordion-faq-answer-text-typography-letter-spacing); }
.cross-faq__body a { color: var(--gii-accordion-faq-answer-link); }

/* ===== 定義の表組み（実測 table.definition。会社概要の dl） ===== */
.cross-deflist { margin-top: var(--gii-space-20); border: var(--gii-table-definition-border); border-radius: var(--gii-table-definition-radius); overflow: hidden; }
.cross-deflist > div { display: grid; grid-template-columns: var(--gii-table-definition-term-width) minmax(0, 1fr); }
.cross-deflist > div + div { border-top: var(--gii-table-definition-row-divider); }
.cross-deflist dt { background: var(--gii-table-definition-term-background); color: var(--gii-table-definition-term-text); border-right: var(--gii-table-definition-term-divider); padding: var(--gii-table-definition-term-padding-y) var(--gii-table-definition-term-padding-x);
  font-family: var(--gii-table-definition-term-typography-font-family); font-size: var(--gii-table-definition-term-typography-font-size); font-weight: var(--gii-table-definition-term-typography-font-weight); line-height: var(--gii-table-definition-term-typography-line-height); letter-spacing: var(--gii-table-definition-term-typography-letter-spacing); }
.cross-deflist dd { background: var(--gii-table-definition-desc-background); color: var(--gii-table-definition-desc-text); padding: var(--gii-table-definition-desc-padding-y) var(--gii-table-definition-desc-padding-x);
  font-family: var(--gii-table-definition-desc-typography-font-family); font-size: var(--gii-table-definition-desc-typography-font-size); font-weight: var(--gii-table-definition-desc-typography-font-weight); line-height: var(--gii-table-definition-desc-typography-line-height); letter-spacing: var(--gii-table-definition-desc-typography-letter-spacing); }
.cross-ext { display: inline-flex; align-items: center; gap: var(--gii-link-external-gap); color: var(--gii-link-external-text); }
.cross-ext::after { content: ""; width: var(--gii-link-external-icon-size); height: var(--gii-link-external-icon-size); background-color: var(--gii-link-external-icon-color); mask: var(--gii-mask-icon-blank) no-repeat center / contain; }
.cross-ext:hover { opacity: var(--gii-link-external-hover-opacity); }
.cross-chart rect[class^="s"] { rx: var(--gii-chart-bar-radius); } /* 棒の先の角丸（SVG の rx を CSS で指定。Chrome・Safari・Firefox で有効） */
.cross-chart--stacked rect[class^="s"] { rx: var(--gii-chart-stack-segment-radius); } /* 第9回: 積み上げ横棒のセグメントは角丸なし（単独の横棒・縦棒は上の 2px のまま） */
.cross-chart circle.pt { r: var(--gii-chart-line-point-radius); }
/* 注: SVG の中の棒の太さ（20）・間（8 / 16）・点の半径は viewBox の座標で描いている。値は chart.bar.thickness / gap / groupGap・chart.line.pointRadius と同じ数にしてある（座標なので var() は使えない） */

/* ===== SP（767px 以下） =====
   値の切り替え（文字サイズ・余白・アイコンの大きさなど）は gii-tokens.css の @media が自動でやる。
   ここに書くのは「部品の非表示・並び替え・1カラム化」で、トークンでは表せないので各ページで書く */
@media (max-width: 767px) {
  .cross-util span { display: none; }      /* 非表示: ヘッダー上段のリンクは SP ではアイコンだけ（実サイトと同じ） */
  .cross-util a { padding: 0 var(--gii-space-8); }
  .cross-menu-btn { padding: 18px 13px 17px; } /* 直書き: 実測 SP の padding（18 / 13 / 17 / 13） */
  .cross-header-band { padding-top: var(--gii-space-8); padding-bottom: var(--gii-space-8); } /* SP の帯の上下 8px・間 4px は実サイトの SP スクリーンショットから読んだ値（計測していない） */
  .cross-header-band__inner { display: block; }
  .cross-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gii-space-4); }
  .cross-nav-btn, .cross-nav-btn--menu { display: flex; flex-direction: column; justify-content: center; height: 60px; padding: var(--gii-header-nav-button-padding-y); border: 0; /* 直書き: 60px（実測 SP の高さ） */
    box-shadow: inset 0 0 3px #0191db; text-align: center; white-space: normal; } /* 直書き: mobile_prod.css:82 の SP 用の内側影（README 注意6） */
  .cross-nav-btn--menu::after { display: none; }
  .cross-nav-btn br { display: inline; }
  .cross-search { margin-top: var(--gii-space-4); }
  .cross-search input[type=text] { flex: 1; width: auto; min-width: 0; }
  .cross-breadcrumb { padding-top: var(--gii-space-24); padding-bottom: var(--gii-space-24); }
  .cross-btns { display: flex; flex-wrap: wrap; gap: var(--gii-space-16); } /* SP は第3回までと同じ折り返し（実サイトの SP は1列・間 8px だが、SP の値は計測していない） */
  .cross-2col { grid-template-columns: minmax(0, 1fr); row-gap: var(--gii-space-24); padding-bottom: var(--gii-space-48); }
  .cross-side { order: 2; }                 /* 並び替え: サイドバーは本文の下へ（実サイトのカテゴリーページは SP で左ナビを隠してボタンで開く） */
  .cross-sources { grid-template-columns: minmax(0, 1fr); }
  .cross-grid--2, .cross-grid--3, .cross-grid--4 { grid-template-columns: minmax(0, 1fr); } /* 第5回: カードのグリッドは SP で1列 */
  .cross-article { padding: var(--gii-space-24) var(--gii-space-16); }
  /* 第6回で訂正: 表組みは SP でも縦に並べない。実サイトの会社概要は SP も「項目名の列 110px ＋ 値」の2列（mobile.css:590、実測 110px 239px）。
     列の幅は gii-tokens.css の SP 上書き（--gii-table-definition-term-width: 110px）で自動的に切り替わる */
  .cross-table th, .cross-table td { white-space: nowrap; } /* 表は折り返さず、.cross-table-wrap の中で横にスクロールさせる */
  .cross-btn--cta, .cross-btn--secondary, .cross-btn--primary { width: 100%; } /* 並び替え: ボタンは縦に1列 */
  .cross-footer__content { grid-template-columns: minmax(0, 1fr); row-gap: var(--gii-space-40); }
  .cross-footer__left { max-width: 261px; margin: 0 auto; } /* 直書き: 実測 SP の社名の幅 261px */
  .cross-footer__nav { grid-template-columns: minmax(0, 1fr); }
  .cross-footer__bottom { display: block; text-align: center; }
  .cross-footer__links { justify-content: center; }
  .cross-copyright { display: block; margin-top: var(--gii-space-16); }
}