/* ============================================================================
   株式会社Remind — 下層 31 枚が共通で読む 1 枚
   ----------------------------------------------------------------------------
   読み込む順（_殻.html）:
       <link href="../oki-copy/style.css">   ← トップと同じ 1 枚。**必ず先**
       <link href="./lower.css">             ← このファイル

   ★ 土台は OKI。この 1 枚の大半は
     scratchpad/site-audit/oki/lower/rules/*.css（OKI の下層で実際に効いている規則を
     CDP で抜いたもの）を**原文のまま**並べたもの。式・イージング・所要時間・
     @media の入れ子・宣言の順序は 1 文字も書き直していない。

   ★ 別の会社から差し替えたのは 4 つだけ（§7）。OKI が持っていない／OKI より
     明確に良いものに限る。残り 4 部品（オムロンの一覧・丹青社のフォーム・
     村田の節・日本製鉄の見出し帯）は**使っていない** — OKI が同じ部品を持つため。

   ── 原文から触った 3 か所（これ以外は 1 文字も変えていない）──────────────
     1. --color-oki-red / --color-oki-red2 の**中身**を青に（#003678 / #001f45）。
        変数名も参照している側も原文のまま。
     2. --scrollbar-width: 15px → 0px。OKI は実行時に JS が実測値を書き込むので
        CSS の 15px は誰も使わない。静的に写すと 15px が生きてしまい全寸法が
        約 1% ずれる（oki/lower/shell.md §10）。トップの script.js も同じ値を書く。
     3. 和文書体 Saans-* / MFW-YuGo*（モリサワの契約書体）→
        "Noto Sans JP", system-ui, sans-serif。重さは font-weight 側に残っている
        （790 / 800 / 700 / 670 / 570）ので、可変フォントを読めば階段は保たれる。

   ── 落としたもの（理由つき）────────────────────────────────────────────
     ・shell.css の [data-toggle-show-content-yoko]（入場アニメ 5 本）
       初期値が opacity:0 / translate(-50px) で、可視に戻すのは JS。
       レイアウトに置くと「JS が来ないと見出しが出ない」= M-033 そのもの。
       OKI 自身の注意書き（shell.md §10）にも「写すなら初期値を可視に」とある。
     ・form.css の A系（旧 CGI フォーム・527 行）
       #contentsArea{width:882px} の固定幅と、素の input{} / th,td{} という
       文書全体に効く規則を持つ。OKI 自身の実測ノート（form.md §0）が
       「写すなら B系。A系は見た目が使えない」と結論している。
     ・parts3 の list（オムロン）/ form（丹青社）/ section（村田）/ pagehead（日本製鉄）
       OKI が同じ部品を持つ。とくに**ページ頭の見出し帯は OKI の
       block-title-base.page-name**（§1-3）で、日本製鉄の heading1 は使わない。
   ============================================================================ */


/* ==========================================================================
   §1  OKI shell.css — 殻（ヘッダーの状態 / 器 / 見出し帯 / パンくず /
        左の追従ナビ / 末尾の兄弟ページ一覧 / 節トップのヒーロー）
   ========================================================================== */

/* =========================================================================
 * OKI 下層ページの「殻」— 実際に効いている規則だけを CDP で抜いたもの
 *
 * 取得元 (すべて @1440 / html[lang=ja] / headless Chrome)
 *   第3階層(記事型)  https://www.oki.com/global/ja/profile/greet/
 *   第3階層(一覧型)  https://www.oki.com/global/ja/press/press-release/
 *   第2階層(節トップ) https://www.oki.com/global/ja/profile/
 *   対照(トップ)      https://www.oki.com/global/ja/
 *   原文CSS           https://www.oki.com/global/assets/css/style.css (665,097 bytes)
 *
 * 触ったのは 2 点だけ。それ以外は原文のまま（式・イージング・入れ子・順序）。
 *   1. `:where([data-component-id=…])` を外した（特異度 0 なので効き方は変わらない）
 *   2. --color-oki-red / --color-oki-red2 を指示どおり青に差し替えた（下の TOKENS 参照）
 * ========================================================================= */


/* ---------------------------------------------------------------- TOKENS
 * 殻が使う分だけ。全量は ../../rules/root.css（トップ抽出時のもの）にある。
 * --scrollbar-width は JS が実測して 0px を書き込んでいた（headless 実測）。
 * つまり calc(N / var(--screen-size) * (100vw - 0px)) = 1440px 時ちょうど N px。 */
:root{
  --scrollbar-width: 0px;
  --effective-viewport-width: 100vw;
  --column-size: 24;
  --screen-size: 390;
  --column-unit: calc( 100 / var(--column-size) * (var(--effective-viewport-width) - var(--scrollbar-width)) * .01 );
  --header-size: 56px;
  --page-name-mt: 126;
  --breed: calc(50% - (50vw - var(--scrollbar-width) * .5));

  /* 色（OKI の赤の位置に青を入れた。原文は red:#ff0000 / red2:#e90000） */
  --color-oki-red:  #003678;
  --color-oki-red2: #001f45;
  --color-oki-black:  #0d0d0d;
  --color-oki-black2: #282828;
  --color-oki-gray:  #909090;
  --color-oki-gray3: #ededed;
  --color-oki-gray5: #e6e6e6;
  --color-oki-white: #fbfbfb;
  --color-oki-bg-gray: #f4f4f4;
  --color-oki-bg-gray-dark-0-8: rgba(237, 237, 237, .8);

  --layer-drawer: 10;
  --easing-1: cubic-bezier(.18, .06, .23, 1);
  --easing-2: cubic-bezier(.36, .04, .23, 1);
  --easing-3: cubic-bezier(.43, .05, .17, 1);
  --easing-5: cubic-bezier(.55, .05, .22, .99);
  --duration-300: .3s;
  --duration-800: .8s;
}
@media (min-width: 1024px){
  :root{ --screen-size: 1440; --column-size: 48; --page-name-mt: 238; }
}


/* ================================================================ 1. ヘッダー
 * 規則そのものはトップと同一（../../rules/headernav.css に 345 本のうちの一部として既出）。
 * ここに載せるのは「トップと下層で状態が分かれる 4 本」だけ。
 * 分岐は class ではなく、body の中身と body の inline style で決まる。 */

.header-static{position:absolute;top:0;right:0;left:0;z-index:calc(var(--layer-drawer) - 1)}

/* 既定 = 下層。記号が赤・字が黒 */
.header{--logo-symbol-fill: var(--color-oki-red);--logo-type-fill: var(--color-oki-black);transition-duration:var(--duration-500);transition-property:top;transition-timing-function:var(--easing-2)}

/* トップだけ。本文に [data-header-style=skeleton] の器があると両方 白 になる */
body:has([data-header-style=skeleton]) .header-static{--logo-symbol-fill: var(--color-oki-white);--logo-type-fill: var(--color-oki-white)}

/* 下層（skeleton が無い側）だけ。言語ボタン・問い合わせボタンに灰の面と blur が付く */
body:not(:has([data-header-style=skeleton])) .header-static .button-language{--button-language-background: var(--color-oki-bg-gray-dark-0-8);--button-language-text: var(--color-oki-black);--button-blur-color-text: var(--color-oki-black);--button-blur-color-bg: var(--color-oki-bg-gray-dark-0-8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body:not(:has([data-header-style=skeleton])) .header-static .button-contact{--button-language-background: var(--color-oki-bg-gray-dark-0-8);--button-language-text: var(--color-oki-black);--button-blur-color-text: var(--color-oki-black);--button-blur-color-bg: var(--color-oki-bg-gray-dark-0-8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body:not(:has([data-header-style=skeleton])) .header-static .button-language:hover{--button-language-text: var(--color-oki-white);--button-blur-color-text: var(--color-oki-white)}
body:not(:has([data-header-style=skeleton])) .header-static .button-contact:hover{--button-language-text: var(--color-oki-white);--button-blur-color-text: var(--color-oki-white)}

/* 上端の 32px はトップ／下層の違いではなく、通知帯があるかどうか。
 * トップだけ body の inline style が --notification-size:1 だった（下層は 0）。 */
body:has(.notification-base[data-status=shown]) .header{top:calc((6 + 42 * var(--notification-size)) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
body:has(.notification-base[data-status=shown]) .header{top:calc((4 + 28 * var(--notification-size)) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
body:has(.notification-base[data-status=hidden]) .header{top:0}

/* 現在地の赤い丸帯。トップには現在地が無いので出ない＝下層でだけ点く。
 * 実測: 下層は .header-navigation-desktop の inline style が `--track-in: 1`（JS が書く）で
 *       #e90000 / 87.45 x 38px / 角丸 6px の帯が出る。トップは --track-in: 0 で opacity: 0。
 * 幅と x も JS が --track-item-width / --track-item-x に実測値を書く。
 * ↓ --track-in の既定値だけを抜いた（原文はこの変数を含む長い 1 本。全文は
 *    ../../rules/headernav.css の .header-navigation-desktop を参照）。 */
.header-navigation-desktop{--track-in: 0}
.header-navigation-desktop .track{position:absolute;inset:0;padding-top:calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));pointer-events:none}
.header-navigation-desktop .track-item{display:grid;position:relative;right:0;align-content:center;justify-content:center;place-content:center;transform:translate(var(--track-item-x, var(--initial-track-item-x)));transition-duration:var(--track-item-duration, var(--duration-300));transition-property:transform;width:1px;height:100%}
.header-navigation-desktop .track-item-inner{opacity:var(--track-in);transition-duration:var(--duration-300);transition-property:opacity,transform,width;border-radius:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-red2);width:var(--track-item-width, var(--initial-track-item-width));height:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
.header-navigation-desktop .label[aria-current=page]{color:var(--color-oki-white)}


/* ============================================================ 2. ページの器
 * <main class="t-container"> > .container-block > .header / .body / .footer  */

.t-container{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)}
@media (min-width: 1024px){
.t-container{padding-right:calc(var(--column-unit) * 2);padding-left:calc(var(--column-unit) * 2)}
}

.container-block{--block-margin-default-sp: 50;--block-margin-default-pc: 80;--block-margin-sidenav-sp: 70;--block-margin-sidenav-pc: 130}

/* 見出しブロックを頭から落とす量。SP 126 / PC 238 */
.container-block .header{margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block .body{grid-template-columns:minmax(100%,1fr);margin-top:calc(45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.container-block .body{margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}

.container-block .footer:has(*){margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.container-block .footer:has(*){margin-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.container-block .footer > :first-child{margin-top:0!important}

/* 本文ブロック同士の間。追従ナビがある側は広い（80 → 130） */
.container-block:not(.-has-side) .main > :where(*+*){margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.container-block:not(.-has-side) .main > :where(*+*){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.container-block.-has-side .main > :where(*+*){margin-top:calc(var(--block-margin-sidenav-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.container-block.-has-side .main > :where(*+*){margin-top:calc(var(--block-margin-sidenav-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}


/* ====================================================== 3. ページ見出し（第3階層）
 * <div class="block-title-base">                     ← 記事型はこれ
 *   <div data-toggle-show-content-yoko>
 *     <div class="relative">
 *       <span class="deco-dot block-title-base__decodot" data-size="lg">
 *       <h1 class="title t-headline-3xl">社長メッセージ</h1>
 *     <div class="bar">                              ← 1px の罫
 *     <div class="breadcrumbs desktop-only">         ← 罫の下・右寄せ
 * 欧文＋和文の対にはなっていない。h1 は和文 1 行だけ。 */

.t-headline-3xl{font-weight:790;font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}
@media (min-width: 1024px){
.t-headline-3xl{font-size:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
html[lang=ja] .t-headline-3xl{font-weight:800;font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
html[lang=ja] .t-headline-3xl{font-size:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(1.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}

.block-title-base .title{position:relative;padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.block-title-base .title{padding-right:calc(var(--column-unit) * 1);padding-left:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}

/* 赤い四角の点。h1 の左の余白（38px）に絶対配置で置く。字とは重ならない */
.deco-dot{display:block;width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background:var(--color-oki-red);box-shadow:0 4px 40px #0000001f}
@media (min-width: 1024px){
.deco-dot{border-radius:calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.deco-dot[data-size=lg]{width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.deco-dot[data-size=lg]{width:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
[data-blink-decodot]{opacity:var(--decodot-blink-opacity, 1)}   /* JS が明滅させる */

.block-title-base .block-title-base__decodot{position:absolute;top:calc(7 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.block-title-base .block-title-base__decodot{top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.block-title-base .title .deco-dot{position:absolute;top:.2em;left:0}
.block-title-base [data-toggle-show-content-yoko]{position:relative!important}

/* 罫。背景色ではなく border-bottom。色は黒2 (#282828) */
.block-title-base .bar{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));border-bottom:1px solid var(--color-oki-black2)}
@media (min-width: 1024px){
.block-title-base .bar{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}

.block-title-base .breadcrumbs{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

/* 一覧型（プレスルーム等）は .page-name が付き、margin-top を自分で持つ */
.block-title-base.page-name{margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

/* 記事ページで見出しの下に付く分類チップと日付（プレスリリース詳細で使う） */
.block-title-base .content_wrap{display:flex;flex-wrap:wrap;align-items:center;gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
.block-title-base .category{border:1px solid var(--color-oki-gray5);border-radius:9999px;background:var(--color-oki-gray3);padding:.2em .9em;font-weight:670;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1}
@media (min-width: 1024px){
.block-title-base .category{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
.block-title-base .data.data{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}


/* ============================================================== 4. パンくず
 * <div class="breadcrumbs desktop-only">
 *   <nav class="breadcrumbs-base" aria-label="パンくずリスト">
 *     <ul class="list">
 *       <li class="breadcrumbs-base-item"><span class="deco-dot" data-size="md"><a class="label">
 *       …最後だけ <span class="label" aria-current="page">
 * ・区切りは文字ではなく 4px の赤い角丸四角（deco-dot）。1 つ目だけ display:none
 * ・justify-content:end で右寄せ。flex 一列で、折り返す仕掛けは無い
 * ・1023.98px 以下では .desktop-only が丸ごと消す（SP にパンくずは無い） */

.breadcrumbs-base .list{display:flex;column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));justify-content:end}
html[lang=ja] :is(.breadcrumbs-base .list){font-family:"Noto Sans JP", system-ui, sans-serif}

.breadcrumbs-base .breadcrumbs-base-item{display:flex;column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));align-items:center}

.breadcrumbs-base .label{font-weight:670;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;letter-spacing:-.01em}
.breadcrumbs-base .label:link,.breadcrumbs-base .label:visited{color:var(--color-oki-gray)}
.breadcrumbs-base .label:any-link{color:var(--color-oki-gray)}
/* 現在地は <span>（リンクでない）なので :any-link に当たらず、親から黒を継ぐ */

.breadcrumbs-base .deco-dot{position:relative;top:-.05em;box-shadow:0 4px 40px #0000001f;border-radius:1px}
.breadcrumbs-base .breadcrumbs-base-item:first-child .deco-dot{display:none}

@media (max-width: 1023.98px){
.desktop-only{display:none!important}
}

/* リンクの hover は殻ぜんぶ共通でこれ 1 本（下線ではなく透過） */
[data-hover-fade-target]{transition:opacity var(--duration-800) var(--easing-1)}
@media (any-hover: hover){
[data-hover-fade-target]:any-link:hover{opacity:.7;transition-duration:var(--duration-300)}
[data-hover-fade-root]:any-link:hover [data-hover-fade-target]{opacity:.7;transition-duration:var(--duration-300)}
}


/* ======================================================== 5. 右…ではなく左の追従ナビ
 * 一覧型ページだけ .container-block に -has-side が付き、.body が
 *   grid-template-areas: "side main"  （PC）
 *   grid-template-areas: "main" "side"（SP＝本文の下に落ちる）
 * になる。追従するのは .side で、右端ではなく左列。
 * <div class="side"><nav class="block-side-nav"><p class="back">カテゴリー</p>
 *   <div class="items"><a>すべて</a><a aria-current="true">…</a><a class="sub">…</a> */

.container-block .body:has(.side){display:grid;position:relative;grid-template-areas:"main" "side"}
@media (min-width: 1024px){
.container-block .body:has(.side){grid-template-columns:calc(var(--column-unit) * 9) 1fr;grid-template-areas:"side main";column-gap:calc(var(--column-unit) * 5)}
}
.container-block .side{grid-area:side;align-self:start}
@media (min-width: 1024px){
.container-block .side{position:sticky;top:calc(calc(var(--column-unit) * 1) + var(--header-size));left:0;transition:top var(--duration-300) var(--easing-2)}
}
.container-block .main{grid-area:main}

.block-side-nav{border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-bg-gray);padding:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(37 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.block-side-nav{border-radius:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 1) calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}

.block-side-nav .back{display:flex;column-gap:calc(var(--column-unit) * 1);align-items:center;padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:110%;letter-spacing:-.02em}
.block-side-nav .back{border-bottom:1px solid var(--color-oki-gray5);padding-bottom:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.block-side-nav .back{column-gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
html[lang=ja] :is(.block-side-nav .back){font-style:normal;font-weight:800;font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:120%;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
html[lang=ja] :is(.block-side-nav .back){font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.block-side-nav .back .icon-base{width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-red)}

.block-side-nav .items{display:block;margin-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.block-side-nav .items{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}

.block-side-nav .items a{display:block;position:relative;padding:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-gray);font-style:normal;font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:120%;letter-spacing:-.01em}
@media (min-width: 1024px){
.block-side-nav .items a{padding:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
html[lang=ja] :is(.block-side-nav .items a){font-style:normal;font-weight:inherit;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
html[lang=ja] :is(.block-side-nav .items a){padding:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
html[lang=ja] :is(.block-side-nav .items a):not([aria-current=true]){font-weight:700;font-family:"Noto Sans JP", system-ui, sans-serif}

.block-side-nav .items a.sub{padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
html[lang=ja] .sub:is(.block-side-nav .items a){padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

/* 現在地 = 黒字 ＋ 左端に 4px の赤い点 */
.block-side-nav .items a[aria-current=page],.block-side-nav .items a[aria-current=true]{color:var(--color-oki-black)}
.block-side-nav .items a[aria-current=page]::before,
.block-side-nav .items a[aria-current=true]::before{display:block;position:absolute;top:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));left:0;margin-top:calc(calc(-2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) - .125em);border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-red);width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));content:""}


/* ================================================== 6. ページ末尾の 兄弟ページ一覧
 * .container-block > .footer > .block-navigation-page
 * 左右に --column-unit ぶんはみ出して灰の面を敷く。上下 120px。
 * 見出し（節の名前）を左に置き、リンクの 2 列は 11 カラム右から始める。 */

.block-navigation-page{border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-bg-gray);padding:calc(68 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2)}
@media (min-width: 1024px){
.block-navigation-page{margin-left:calc(var(--column-unit) * -1);padding:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 3);width:calc(100% + calc(var(--column-unit) * 2))}
}
.block-navigation-page .block-navigation-page__list-wrap{margin-top:calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.block-navigation-page .block-navigation-page__list-wrap .block-navigation-page__list{margin-left:calc(var(--column-unit) * 11)}
}
.block-navigation-page .list-link__title{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

/* 見出しは heading-base の data-size="sm"（和文 PC 40px / 行 110% / 800） */
.heading-base{--font-size-sm: calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-sm-desktop: calc(46 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-md: calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-md-desktop: calc(52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-xl: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-xl-desktop: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-sm: calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-sm-desktop: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-xl: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-xl-desktop: calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));position:relative;color:var(--color-oki-black);font-style:normal;font-weight:790;font-size:var(--font-size-md);line-height:110%;letter-spacing:-.02em}
@media (min-width: 1024px){
.heading-base{font-size:var(--font-size-md-desktop)}
}
.heading-base[data-size=sm]{font-size:var(--font-size-sm)}
@media (min-width: 1024px){
.heading-base[data-size=sm]{font-size:var(--font-size-sm-desktop)}
}
html[lang=ja] .heading-base{letter-spacing:calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
html[lang=ja] .heading-base{letter-spacing:calc(1.68 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
html[lang=ja] .heading-base[data-size=sm]{font-size:var(--font-size-ja-sm);font-family:"Noto Sans JP", system-ui, sans-serif}
@media (min-width: 1024px){
html[lang=ja] .heading-base[data-size=sm]{font-size:var(--font-size-ja-sm-desktop);font-style:normal;font-weight:800;line-height:110%;letter-spacing:1.2px}
}

/* リンクの並び（2 列） */
@media (min-width: 1024px){
.list-link.-column-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;grid-column-gap:calc(var(--column-unit) * 2);column-gap:calc(var(--column-unit) * 2)}
}
.list-link .list-link__item{display:flex;position:relative;flex-direction:column;align-items:flex-start;padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:100%}
@media (min-width: 1024px){
.list-link .list-link__item{padding-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
/* 罫は上端だけ本物の border、行間はすべて下の下線アニメが受け持つ */
.list-link li:first-child .list-link__item{border-top:1px solid var(--color-oki-gray5)}
@media (min-width: 1024px){
.list-link.-column-2 li:nth-child(2) .list-link__item{border-top:1px solid var(--color-oki-gray5)}
}

/* 下線 = 2 枚重ね。灰(#e6e6e6)が右から縮み、濃灰(#909090)が左から伸びる */
[data-underline-anime-root]{position:relative}
[data-underline-anime-target]{position:absolute;inset:auto 0 0;margin:auto}
[data-underline-anime-target]::before,[data-underline-anime-target]::after{position:absolute;top:0;left:0;transition:transform var(--duration-300) var(--easing-5),opacity var(--duration-300) var(--easing-1);width:100%;height:1px;content:""}
[data-underline-anime-target]::before{transform:scaleX(1);transform-origin:right;transition-delay:.01s;background-color:var(--color-oki-gray5)}
[data-underline-anime-target]::after{transform:scaleX(.5);transform-origin:left;opacity:0;background-color:var(--color-oki-gray)}
@media (any-hover: hover){
[data-underline-anime-root]:hover [data-underline-anime-target]::after{transform:scaleX(1);opacity:1;transition-delay:.01s}
}
/* 今いるページの行は下線を出しっぱなしにする */
.list-link.-link-behavior--navigation .list-link__item.-current [data-underline-anime-target]::after{transform:scaleX(1)!important;opacity:1!important}


/* =========================================== 7. 節トップ（第2階層）の大見出し
 * /profile/ /business/ は block-title-base を使わない。全画面高のヒーローで、
 * パンくずは見出しの下ではなくヒーローの grid セル（左下）に入る。
 * <div class="hero-base bleed-both">
 *   <div class="content"> <span class="deco-dot hero-base__decodot" data-size="lg">
 *      <h1 class="heading-base" data-size="xl">企業情報</h1>
 *      <p class="description">…</p> <div class="image-sub">
 *   <div class="image-main"> <div class="breadcrumbs"> */

.bleed-both{margin-right:var(--breed);margin-left:var(--breed)}

.hero-base{padding-top:calc(126 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.hero-base{display:grid;grid-template-rows:1fr calc(65 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));grid-template-columns:1fr calc(var(--column-unit) * 21);grid-template-areas:"content image-main" "content breadcrumbs";align-items:center;margin-right:auto;margin-left:auto;padding-top:0;padding-right:calc(var(--column-unit) * 3);padding-left:calc(var(--column-unit) * 4);width:100%;height:100vh}
}
.hero-base .content{grid-area:content;padding-left:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.hero-base .content{padding-left:0}
}
.hero-base .hero-base__decodot{position:absolute;top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));left:calc(-24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
.hero-base .hero-base__decodot{top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));left:calc(-37 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.heading-base[data-size=xl]{font-size:var(--font-size-xl)}
@media (min-width: 1024px){
.heading-base[data-size=xl]{font-size:var(--font-size-xl-desktop)}
.hero-base .heading-base{letter-spacing:-.02em}
}
html[lang=ja] .heading-base[data-size=xl]{font-size:var(--font-size-ja-xl);font-family:"Noto Sans JP", system-ui, sans-serif}
@media (min-width: 1024px){
html[lang=ja] .heading-base[data-size=xl]{font-size:var(--font-size-ja-xl-desktop)}
}
html[lang=ja] :is(.hero-base .heading-base){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
@media (min-width: 1024px){
html[lang=ja] :is(.hero-base .heading-base){font-size:calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.hero-base .hero-base__content-wrap{position:relative!important;padding-right:calc(var(--column-unit) * 1)}
.hero-base .description{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(65 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-weight:570;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:140%;letter-spacing:-.01em}
@media (min-width: 1024px){
.hero-base .description{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:0;width:calc(var(--column-unit) * 9.2);font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
html[lang=ja] :is(.hero-base .description){padding-right:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-weight:570;line-height:160%;letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
.hero-base .image-main{--image-rounded-aspect-ratio: 358/423;grid-area:image-main;margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)}
@media (min-width: 1024px){
.hero-base .image-main{--image-rounded-aspect-ratio: none;margin-top:0;padding-top:calc(114 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:0;padding-left:0;height:100%}
}
.hero-base .image-sub{--image-rounded-aspect-ratio: 270/165;width:calc(var(--column-unit) * 9)}
@media (min-width: 1024px){
.hero-base .image-sub{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}
}
.hero-base .breadcrumbs{grid-area:breadcrumbs}
@media (max-width: 1023.98px){
.hero-base .breadcrumbs-base{display:none}
}
.hero-base .breadcrumbs-base{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}



/* ================================================================ 8. フッター
 * トップと同一。<footer> の markup は 4 ページとも 9,938 bytes / md5 44563116386d で
 * 完全一致した。下層用のサイトマップは増えない。
 * 規則は ../../rules/footer.css（トップ抽出時のもの）をそのまま使う。
 * position:sticky; top:1000px で本文の下から出てくる仕掛けも同じ。 */


/* ==========================================================================
   §2  OKI list.css — 一覧（骨格 / 見出し / 絞り込み / 1 行 / 罫と hover /
        矢印 / ページ送り / 検索欄 / 字 / 0 件）
   ========================================================================== */

/* OKI 下層ページ（プレスルーム一覧）の実規則
 * 取得元: https://www.oki.com/global/assets/css/style.css （サイト全体で 1 本。トップと同一ファイル）
 * 抜いたページ: /global/ja/press/ ほか（list.md に一覧）
 * 原文のまま。:where([data-component-id=…]) だけ外した（特異度 0 なので効き方は不変）。
 *
 * ★ 寸法の読み方（この 1 行が全部を決めている）
 *   calc(N / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))
 *   --screen-size は 390（〜1023px）/ 1440（1024px〜）。
 *   つまり「内容幅がちょうど 1440px のとき N はそのまま N px」で、それ以外では比例で伸縮する。
 *   実測で確認: 内容幅 1440 → 60/270/150/18/35/130px、内容幅 1410 → 58.75/264.375/146.875/17.625/34.27/127.29px
 *   （全部きっかり 1410/1440 = 0.97917 倍。list.md「寸法の実測」参照）
 */

/* ============================================================
   1. 骨格 — main.t-container > .container-block.-has-side
   下層ページの下地。.body:has(.side) が 1024px 以上で "side main" の 2 段組になる。
   .main > * + * の margin-top 130px が節どうしの間隔を一手に決めている。
   ============================================================ */

.t-container {
  padding-right:calc(var(--column-unit) * 1);
  padding-left:calc(var(--column-unit) * 1);
}
@media (min-width: 1024px) {
  .t-container {
    padding-right:calc(var(--column-unit) * 2);
    padding-left:calc(var(--column-unit) * 2);
  }
}
.container-block {
  --block-margin-default-sp: 50;
  --block-margin-default-pc: 80;
  --block-margin-sidenav-sp: 70;
  --block-margin-sidenav-pc: 130;
}
.container-block.-has-side .main>:where(*+*) {
  margin-top:calc(var(--block-margin-sidenav-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block.-has-side .main>:where(*+*) {
    margin-top:calc(var(--block-margin-sidenav-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block.-has-side .main>:where(.-euroland-language+[data-component-id=xc6n2X]) {
  margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block.-has-side .main>:where(.-euroland-language+[data-component-id=xc6n2X]) {
    margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block:not(.-has-side) .main>:where(*+*) {
  margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block:not(.-has-side) .main>:where(*+*) {
    margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .header {
  margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .body {
  grid-template-columns:minmax(100%,1fr);
  margin-top:calc(45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .body {
    margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .body:has(.side) {
  display:grid;
  position:relative;
  grid-template-areas:"main" "side";
}
@media (min-width: 1024px) {
  .container-block .body:has(.side) {
    grid-template-columns:calc(var(--column-unit) * 9) 1fr;
    grid-template-areas:"side main";
    -moz-column-gap:calc(var(--column-unit) * 5);
    column-gap:calc(var(--column-unit) * 5);
  }
}
.container-block .footer .block-teaser-nav+.block-navigation-page {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .footer .block-teaser-nav+.block-navigation-page {
    margin-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .side {
  grid-area:side;
  align-self:start;
}
@media (max-width: 1023.98px) {
  .container-block .side {
    margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
@media (min-width: 1024px) {
  .container-block .side {
    position:sticky;
    top:calc(calc(var(--column-unit) * 1) + var(--header-size));
    left:0;
    transition:top var(--duration-300) var(--easing-2);
  }
}
.container-block .main {
  grid-area:main;
}
@media (max-width: 1023.98px) {
  .container-block .main .block-callout-base {
    margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-callout-base h1.block-heading-base {
    margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-callout-base h2.block-heading-base {
    margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-callout-base .block-image-base .caption {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-right:0;
  padding-left:0;
}
@media (min-width: 1024px) {
  .container-block .main .block-toc-base+h1.block-heading-base {
    margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-toc-base+h2.block-heading-base {
    margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-note-base {
  margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-note-base {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .media-gallery-history+* {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .main *+.media-gallery-history {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .media-gallery-history+* {
    margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main *+.media-gallery-history {
    margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
@media (max-width: 1023.98px) {
  .container-block .main .media-gallery-history+.media-gallery-history {
    margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-paragraph-base+* {
  margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .main *+.block-paragraph-base {
  margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-paragraph-base+* {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main *+.block-paragraph-base {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-paragraph-base+h2 {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-paragraph-base+h2 {
    margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
@media (max-width: 1023.98px) {
  .container-block .main .block-media-feature {
    margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-separator+.block-media-feature {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-separator+.block-media-feature>.block-heading-base {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-note-base+.block-media-feature {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-note-base+.block-media-feature {
    margin-top:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])) {
  margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])) {
    margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-media-feature[data-layout=split][data-size=dense] {
    margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-media-feature[data-layout=split][data-size=dense]+:is(.container-block .main .block-media-feature[data-layout=split][data-size=dense]) {
    margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-media-feature[data-layout=split][data-size=wide] {
    margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-media-feature[data-layout=split][data-size=wide]+:is(.container-block .main .block-media-feature[data-layout=split][data-size=wide]) {
  margin-top:calc(-20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-media-feature[data-layout=split][data-size=wide]+:is(.container-block .main .block-media-feature[data-layout=split][data-size=wide]) {
    margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-link-wide {
  margin-left:calc(var(--column-unit) * -1);
  width:calc(100% + calc(var(--column-unit) * 2));
}
.container-block .main .block-link-wide {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-link-wide {
    margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .button--back-to-page {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  text-align:center;
}
@media (min-width: 1024px) {
  .container-block .main .button--back-to-page {
    margin-top:calc(125 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-note-base+.block-colorized-table {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-note-base+.block-colorized-table {
    margin-top:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-colorized-table+.block-note-base {
  margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-colorized-table+.block-note-base {
    margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-colorized-table+.block-note-base ol {
    margin-left:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
@media (max-width: 1023.98px) {
  .container-block .main .list-link {
    padding-right:calc(var(--column-unit) * 1);
    padding-left:calc(var(--column-unit) * 1);
  }
  .container-block .main .list-link.-column-link-set .list-link__label.line-clamp-2 {
    display:block;
  }
}
@media (min-width: 1024px) {
  .container-block .main .block-heading-base+.block-media-rounded {
    margin-top:calc(62 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-heading-base+.block-colorized-table {
  margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-heading-base+.block-colorized-table {
    margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .block-media-rounded {
  margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .block-media-rounded {
    margin-top:calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.container-block .main .euroland-iframe-wrapper {
  margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .container-block .main .euroland-iframe-wrapper {
    margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  body:has(.notification-base[data-status=shown]) .container-block .side {
    top:calc(calc(var(--column-unit) * 2) + var(--header-size));
  }
  .container-block .main .list-link {
    margin-right:auto;
    margin-left:auto;
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .block-heading-base[data-size=regular] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .block-heading-base[data-size=wide] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .block-image-base[data-size=lg] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .media-gallery-history {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body :is(.media-gallery-history .media-gallery-history__list-area) {
    width:calc(var(--column-unit) * 14);
  }
  .container-block.-has-side .body .block-media-feature[data-size=wide][data-layout=split] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .block-layout-2column {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body :is(.block-link-width-image-title .block-link-width-image-title__link) {
    grid-template-columns:calc(var(--column-unit) * 6) calc(201 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ============================================================
   2. ページ見出しとパンくず — .block-title-base.page-name / .breadcrumbs-base
   
   ============================================================ */

.block-title-base.page-name {
  margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-title-base .title {
  position:relative;
  padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .block-title-base .title {
    padding-right:calc(var(--column-unit) * 1);
    padding-left:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-title-base .title .deco-dot {
  position:absolute;
  top:.2em;
  left:0;
}
.block-title-base .bar {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  border-bottom:1px solid var(--color-oki-black2);
}
@media (min-width: 1024px) {
  .block-title-base .bar {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-title-base .breadcrumbs {
  margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-title-base .block-title-base__decodot {
  position:absolute;
  top:calc(7 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .block-title-base .block-title-base__decodot {
    top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-title-base [data-toggle-show-content-yoko] {
  position:relative!important;
}
.block-title-base .content_wrap {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-left:calc(var(--column-unit) * 1.5);
}
@media (min-width: 1024px) {
  .block-title-base .content_wrap {
    gap:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    margin-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    margin-bottom:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    margin-left:calc(var(--column-unit) * 1.2);
  }
}
.block-title-base .category {
  border:1px solid var(--color-oki-gray5);
  border-radius:9999px;
  background:var(--color-oki-gray3);
  padding:.2em .9em;
  font-weight:670;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1;
}
@media (min-width: 1024px) {
  .block-title-base .category {
    font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-title-base .data.data {
    font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ============================================================
      （つづき）パンくず本体
   パンくずは .breadcrumbs.desktop-only の中。1024px 未満では出ない。
   ============================================================ */

.block-title-base .breadcrumbs {
  margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.breadcrumbs-base .list {
  display:flex;
  -moz-column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  justify-content:end;
}
html[lang=ja] :is(.breadcrumbs-base .list) {
  font-family:"Noto Sans JP", system-ui, sans-serif;
}
.breadcrumbs-base .breadcrumbs-base-item {
  display:flex;
  -moz-column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  align-items:center;
}
.breadcrumbs-base .breadcrumbs-base-item:first-child .deco-dot {
  display:none;
}
.breadcrumbs-base .deco-dot {
  position:relative;
  top:-.05em;
  box-shadow:0 4px 40px #0000001f;
  border-radius:1px;
}
.breadcrumbs-base .label {
  font-weight:670;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:130%;
  letter-spacing:-.01em;
}
.breadcrumbs-base .label:link,.breadcrumbs-base .label:visited {
  color:var(--color-oki-gray);
}
.breadcrumbs-base .label:-moz-any-link {
  color:var(--color-oki-gray);
}
.breadcrumbs-base .label:any-link {
  color:var(--color-oki-gray);
}
.hero-stage .breadcrumbs-base {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (max-width: 1023.98px) {
  .hero-stage .breadcrumbs-base {
    display:none;
  }
}
.hero-base .breadcrumbs {
  grid-area:breadcrumbs;
}
@media (max-width: 1023.98px) {
  .hero-base .breadcrumbs {
    display:none;
  }
}
.investors-hero .breadcrumbs {
  grid-area:breadcrumbs;
  align-self:center;
}
@media (max-width: 1023.98px) {
  .investors-hero .breadcrumbs {
    display:none;
  }
}

/* ============================================================
   3. 絞り込み（カテゴリー）— nav.block-side-nav
   現在地は class ではなく [aria-current=true]。印は ::before の赤い 4x4 の点。
   「現在地でない方」に太字を当てているので、現在地は相対的に細くて黒くなる。
   ============================================================ */

.block-side-nav {
  border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-bg-gray);
  padding:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(37 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .block-side-nav {
    border-radius:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 1) calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-side-nav .back {
  display:flex;
  -moz-column-gap:calc(var(--column-unit) * 1);
  column-gap:calc(var(--column-unit) * 1);
  align-items:center;
  padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-style:normal;
  font-weight:790;
  font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:110%;
  letter-spacing:-.02em;
}
@media (min-width: 1024px) {
  .block-side-nav .back {
    -moz-column-gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    column-gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-side-nav .back {
  border-bottom:1px solid var(--color-oki-gray5);
  padding-bottom:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
html[lang=ja] :is(.block-side-nav .back) {
  font-style:normal;
  font-weight:800;
  font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:120%;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] :is(.block-side-nav .back) {
    font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-side-nav .back .icon-base {
  width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  color:var(--color-oki-red);
}
.block-side-nav .items {
  display:block;
  margin-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .block-side-nav .items {
    margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-side-nav .items a {
  display:block;
  position:relative;
  padding:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  color:var(--color-oki-gray);
  font-style:normal;
  font-weight:670;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:120%;
  letter-spacing:-.01em;
}
@media (min-width: 1024px) {
  .block-side-nav .items a {
    padding:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] :is(.block-side-nav .items a) {
  font-style:normal;
  font-weight:inherit;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:130%;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] :is(.block-side-nav .items a) {
    padding:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-family:"Noto Sans JP", system-ui, sans-serif;
    letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .sub:is(.block-side-nav .items a) {
  padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-side-nav .items a.sub {
  padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
html[lang=ja] :is(.block-side-nav .items a):not([aria-current=true]) {
  font-weight:700;
  font-family:"Noto Sans JP", system-ui, sans-serif;
}
.block-side-nav .items a[aria-current=page],.block-side-nav .items a[aria-current=true] {
  color:var(--color-oki-black);
}
.block-side-nav .items a[aria-current=page]:before {
  display:block;
  position:absolute;
  top:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  left:0;
  margin-top:calc(calc(-2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) - .125em);
  border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-red);
  width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  content:"";
}
.block-side-nav .items a[aria-current=true]:before {
  display:block;
  position:absolute;
  top:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  left:0;
  margin-top:calc(calc(-2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) - .125em);
  border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-red);
  width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  content:"";
}
@media (max-width: 1023.98px) {
  .block-side-nav .items a[data-toc-anchor] {
    color:var(--color-oki-black);
  }
}
.block-side-nav .year-wrapper {
  margin-top:calc(37 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-side-nav .year-select-wrapper {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-bottom:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-gray5);
  width:100%;
  height:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (any-hover: hover) {
  .block-side-nav .year-select-wrapper {
    cursor:pointer;
  }
}
.block-side-nav .year-link-select {
  padding-left:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  width:100%;
  height:100%;
}
@media (any-hover: hover) {
  .block-side-nav .year-link-select {
    cursor:pointer;
  }
}
.block-side-nav .year-link-select {
  word-break:break-all;
  word-wrap:break-word;
}
.block-side-nav .year-link-select option {
  word-break:break-all;
  word-wrap:break-word;
}
.block-side-nav .year-link-list__icon {
  flex-shrink:0;
  margin-right:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  color:var(--color-oki-red);
}
.block-side-nav .year-link-list__icon>svg {
  width:100%;
  height:100%;
}
.block-side-nav select {
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  margin:0;
  outline:none;
  border:none;
  background:none;
  padding:0;
  color:inherit;
  font:inherit;
}

/* ============================================================
   4. 絞り込み（年）— select.year-link-select
   ネイティブの <select>。appearance:none にして右の ▼ は別要素（.year-link-list__icon）。
   ============================================================ */

.block-side-nav .year-wrapper {
  margin-top:calc(37 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-side-nav .year-select-wrapper {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-bottom:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-gray5);
  width:100%;
  height:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (any-hover: hover) {
  .block-side-nav .year-select-wrapper {
    cursor:pointer;
  }
}
.block-side-nav .year-link-select {
  padding-left:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  width:100%;
  height:100%;
}
@media (any-hover: hover) {
  .block-side-nav .year-link-select {
    cursor:pointer;
  }
}
.block-side-nav .year-link-select {
  word-break:break-all;
  word-wrap:break-word;
}
.block-side-nav .year-link-select option {
  word-break:break-all;
  word-wrap:break-word;
}
.block-side-nav .year-link-list__icon {
  flex-shrink:0;
  margin-right:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  color:var(--color-oki-red);
}
.block-side-nav .year-link-list__icon>svg {
  width:100%;
  height:100%;
}

/* ============================================================
   5. 一覧 — ul.list-news-thumbnail.-news-archive
   トップと同じ部品の -news-archive 変種。素の規則は oki/rules/list-news-thumbnail.css にある（トップと同一）。
   ここは -news-archive / -search-results だけを集めたもの。
   ============================================================ */

.list-news-thumbnail.-news-archive li:first-child .list-news-thumbnail__item,.list-news-thumbnail.-search-results div:first-child .list-news-thumbnail__item {
  border-top:1px solid var(--color-oki-gray5);
}
@media (min-width: 1024px) {
  .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item) {
    padding-top:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-bottom:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] :is(.list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item)) {
    padding-top:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-bottom:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item_image) {
    margin-right:calc(var(--column-unit) * 2);
    width:calc(var(--column-unit) * 3);
  }
  .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__title) {
    -webkit-line-clamp:2;
  }
}
#press-page .list-news-thumbnail.-news-archive {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important;
}
#news-page .pickup-area .featured-list .-news-archive li:first-child .list-news-thumbnail__item {
  border-top:none;
}
#news-page .pickup-area .featured-list-normal .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item_image) {
  margin-right:calc(var(--column-unit) * 1);
  width:calc(var(--column-unit) * 5);
}
@media (min-width: 1024px) {
  #news-page .pickup-area .featured-list-normal .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item_image) {
    margin-right:calc(var(--column-unit) * 2);
    width:calc(var(--column-unit) * 8);
  }
}
#news-page .pickup-area.has-pickup .featured-list-pickup.list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item_image) {
  margin-right:0;
  width:100%;
}
.list-news-thumbnail.-news-archive :is(#news-page .pickup-area.has-pickup .featured-list-pickup .list-news-thumbnail__title) {
  -webkit-line-clamp:3;
}
@media (min-width: 1024px) {
  .list-news-thumbnail.-news-archive :is(#news-page .pickup-area.has-pickup .featured-list-normal .list-news-thumbnail__title) {
    -webkit-line-clamp:3;
  }
}
#news-page .pickup-area.has-pickup .featured-list-normal .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item_image) {
  margin-right:calc(var(--column-unit) * 1);
  width:calc(var(--column-unit) * 5);
}
@media (min-width: 1024px) {
  #news-page .pickup-area.has-ourpicks .featured-list-normal .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item_image) {
    margin-right:calc(var(--column-unit) * 1);
    width:calc(var(--column-unit) * 6);
  }
  .list-news-thumbnail.-news-archive :is(#news-page .pickup-area.has-ourpicks .ourpicks .list-news-thumbnail__title.desktop-only) {
    -webkit-line-clamp:3;
  }
  #news-page .pickup-area.has-ourpicks .ourpicks .list-news-thumbnail.-news-archive :is(.list-news-thumbnail .list-news-thumbnail__item_image) {
    margin-right:calc(var(--column-unit) * .5);
  }
}

.max-width--dence {
  margin-right:auto;
  margin-left:auto;
}
@media (min-width: 1024px) {
  .max-width--dence {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
}

/* ============================================================
   6. 行の区切り線と hover — [data-underline-anime-*]
   ★ 行の下の線は要素ではなく ::before（1px / --color-oki-gray5）。要素自体は高さ 0。
   hover では ::after（--color-oki-gray）が左から scaleX(.5)→1 で重なる。
   ============================================================ */

[data-underline-anime-root] {
  position:relative;
}
[data-underline-anime-target] {
  position:absolute;
  inset:auto 0 0;
  margin:auto;
}
[data-underline-anime-target]:before,[data-underline-anime-target]:after {
  position:absolute;
  top:0;
  left:0;
  transition:transform var(--duration-300) var(--easing-5),opacity var(--duration-300) var(--easing-1);
  width:100%;
  height:1px;
  content:"";
}
[data-underline-anime-target]:before {
  transform:scaleX(1);
  transform-origin:right;
  transition-delay:.01s;
  background-color:var(--color-oki-gray5);
}
[data-underline-anime-target]:after {
  transform:scaleX(.5);
  transform-origin:left;
  opacity:0;
  background-color:var(--color-oki-gray);
}
@media (any-hover: hover) {
  [data-underline-anime-root]:hover [data-underline-anime-target]:after {
    transform:scaleX(1);
    opacity:1;
    transition-delay:.01s;
  }
}
.hover[data-underline-anime-root] [data-underline-anime-target]:before {
  transform:scaleX(0) translateZ(0);
  transition-delay:0s;
}
.hover[data-underline-anime-root] [data-underline-anime-target]:after {
  transform:scaleX(1);
  transition-delay:.2s;
}
.list-link.-link-behavior--navigation .list-link__item.-current [data-underline-anime-target]:after {
  transform:scaleX(1)!important;
  opacity:1!important;
}
.block-related-products .underline-anime[data-underline-anime-target] {
  top:0;
}
.block-teaser-nav .underline-anime {
  top:0;
}
.block-toc-base .underline-anime {
  top:0;
}
.investors-hero-link-item [data-underline-anime-target] {
  top:0;
}
.investors-hero-link-item [data-underline-anime-target]:before {
  background-color:var(--color-oki-line-gray-light-0-5);
}
.investors-hero-link-item [data-underline-anime-target]:after {
  background-color:var(--color-oki-line-gray);
}
.home-business-segment .home-business-segment__list_underline[data-underline-anime-target] {
  top:0;
  bottom:auto;
}
.home-business-segment .home-business-segment__list_underline[data-underline-anime-target]:before {
  transform:scaleX(1);
  background-color:#e6e6e666;
}
.home-business-segment .home-business-segment__list_underline[data-underline-anime-target]:after {
  background-color:#e6e6e6;
}

/* ============================================================
   7. 行の矢印 — .arrow-slide-in
   16px の枠 + padding-right 10px（box-sizing:content-box）で rect は 26px。overflow:hidden。
   -arrow-1 が右へ 120% 抜け、-arrow-2 が -250%（= -40px）から 0 へ入る。
   ============================================================ */

.arrow-slide-in {
  flex-shrink:0;
  box-sizing:content-box;
  padding-right:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  width:calc(var(--slide-in-arrow-size, 16) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  overflow:hidden;
  color:var(--color-oki-red);
}
.arrow-slide-in .arrow-slide-in-inner {
  display:flex;
  position:relative;
  justify-content:center;
  align-items:center;
}
.arrow-slide-in .arrow-slide-in__icon {
  aspect-ratio:1/1;
  width:100%;
  height:100%;
}
.arrow-slide-in .arrow-slide-in__icon.-arrow-1 {
  position:absolute;
  transform:translate(0);
  transition:transform .4s var(--easing-2),opacity .5s .2s var(--easing-1);
}
.arrow-slide-in .arrow-slide-in__icon.-arrow-2 {
  transform:translate(-250%);
  opacity:0;
  transition:transform .5s var(--easing-2),opacity .1s var(--easing-1);
}
[data-arrow-slide-in-anime-root]:hover .arrow-slide-in__icon.-arrow-1,[data-arrow-slide-in-anime-root]:focus .arrow-slide-in__icon.-arrow-1 {
  transform:translate(120%);
  opacity:0;
  transition:transform .4s var(--easing-2),opacity .3s var(--easing-1);
}
[data-arrow-slide-in-anime-root]:hover .arrow-slide-in__icon.-arrow-2,[data-arrow-slide-in-anime-root]:focus .arrow-slide-in__icon.-arrow-2 {
  transform:translate(0);
  opacity:1;
  transition:transform .5s 0s var(--easing-2),opacity .3s 0s var(--easing-1);
  transition-delay:.1s;
}

/* ============================================================
   8. ページ送り — nav.pagination
   grid-template-columns:1fr auto 1fr。現在地 .number.-active は色だけ（下線も面も無い）。
   ============================================================ */

@media (max-width: 1023.98px) {
  .pagination {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important;
  }
}
.pagination {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:100%;
}
.pagination .previous-page-container {
  grid-column:1;
  justify-self:start;
}
.pagination .next-page-container {
  grid-column:3;
  justify-self:end;
}
.pagination .pagination-list {
  display:flex;
  grid-column:2;
  justify-content:center;
  align-items:center;
  color:var(--color-oki-gray);
  font-weight:670;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1;
}
@media (min-width: 1024px) {
  .pagination .pagination-list {
    font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.pagination .number {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:0 calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:2.5rem;
}
@media (min-width: 1024px) {
  .pagination .number {
    padding:0 calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.pagination .number.-active {
  color:var(--color-oki-black);
}
.pagination .ellipsis {
  display:block;
  padding:0 calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.pagination .pagination-button {
  --button-base-color-text: var(--color-oki-white);
  --button-base-color-bg: var(--color-oki-red2);
  --initial-opacity: 0;
  --active-translate: 0;
  --active-opacity: 1;
  display:inline-grid;
  align-content:center;
  justify-content:center;
  place-content:center;
  transition-duration:var(--duration-300);
  transition-property:background-color,color,border-color;
  transition-timing-function:var(--easing-0);
  border-radius:calc(5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--button-base-color-bg);
  width:calc(53 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(41 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  color:var(--button-base-color-text);
  line-height:100%;
}
.pagination .pagination-button>span {
  grid-row:-1/1;
  grid-column:-1/1;
  transform-origin:center;
  transition-duration:var(--duration-300);
  transition-property:transform,opacity;
  transition-timing-function:var(--easing-2),var(--easing-0);
}
.pagination .pagination-button[data-icon-direction=left] {
  --initial-translate: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.pagination .pagination-button[data-icon-direction=right] {
  --initial-translate: calc(-15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.pagination .pagination-button .before {
  transform:translate(var(--initial-translate));
  opacity:var(--initial-opacity);
}
.pagination .pagination-button .after {
  transform:translate(var(--active-translate));
  opacity:var(--active-opacity);
}
@media (any-hover: hover) {
  .pagination .pagination-button:hover .before {
    transform:translate(var(--active-translate));
    opacity:var(--active-opacity);
  }
  .pagination .pagination-button:hover .after {
    transform:translate(calc(var(--initial-translate) * -1));
    opacity:var(--initial-opacity);
  }
}
.pagination .pagination-button[disabled] {
  opacity:.2;
  pointer-events:none;
  --button-base-color-bg: var(--color-oki-gray);
}

/* ============================================================
   9. 前へ／次へのボタン — .button-base（-size-md -reverse）
   ★ 無効は class ではなく「href が無いこと」で決まる:
   a.button-base:not([href]) { opacity:.2; pointer-events:none; --button-base-color-bg: var(--color-oki-gray) }
   ============================================================ */

.button-base {
  --button-base-color-text: var(--color-oki-white);
  --button-base-color-bg: var(--color-oki-red2);
  display:inline-flex;
  align-items:center;
  border-radius:calc(5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--button-base-color-bg);
  padding:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  color:var(--button-base-color-text);
  line-height:100%;
  font-feature-settings:"palt" on,"pkna" on,"vkrn" on;
}
@media (min-width: 1024px) {
  .button-base {
    padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-right:calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-left:calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .button-base.-size-lg {
    padding-top:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-right:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-bottom:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-left:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.button-base .icon-base {
  width:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.button-base .icon-base.-icon-type--pdf-simple {
  aspect-ratio:108/53;
  width:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:auto;
}
@media (min-width: 1024px) {
  .button-base .icon-base.-icon-type--pdf-simple {
    width:calc(29 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.button-base .buttonBase__icon--right,.button-base .buttonBase__icon--left {
  flex-shrink:0;
}
.button-base .buttonBase__icon--right {
  padding-left:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .button-base .buttonBase__icon--right {
    padding-left:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.button-base .buttonBase__icon--left {
  padding-right:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .button-base .buttonBase__icon--left {
    padding-right:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.button-base .button-base__label,.button-base .buttonBase__icon--left,.button-base .buttonBase__icon--right {
  transition:transform .5s ease 0s;
}
.button-base .buttonBase__icon--left {
  position:absolute;
  transform:translate3d(calc(var(--distance) * -.8),0,0) scale(.001);
}
@media (any-hover: hover) {
  .button-base:hover .buttonBase__icon--left {
    transform:scale(1);
  }
}
.button-base .button-base__label {
  transform:translateZ(0);
}
@media (any-hover: hover) {
  .button-base:hover .button-base__label {
    transform:translate3d(calc(var(--distance) * .9),0,0) scale(1);
  }
}
.button-base .buttonBase__icon--right {
  transform:translateZ(0);
}
@media (any-hover: hover) {
  .button-base:hover .buttonBase__icon--right {
    transform:translate3d(calc(var(--distance) * .8),0,0) scale(.001);
  }
}
.button-base.-reverse {
  flex-direction:row-reverse;
}
.button-base.-reverse .buttonBase__icon--right {
  padding-right:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .button-base.-reverse .buttonBase__icon--right {
    padding-right:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.button-base.-reverse .buttonBase__icon--left {
  padding-right:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-left:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .button-base.-reverse .buttonBase__icon--left {
    padding-right:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-left:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.button-base[disabled],a.button-base:not([href]) {
  opacity:.2;
  pointer-events:none;
  --button-base-color-bg: var(--color-oki-gray);
}

/* ============================================================
   10. 面のうっすらした反応 — [data-hover-fade-*]
   一覧の行・パンくず・左ナビが共通で使う。
   ============================================================ */

[data-hover-fade-target] {
  transition:opacity var(--duration-800) var(--easing-1);
}
@media (any-hover: hover) {
  [data-hover-fade-root]:link:hover [data-hover-fade-target],[data-hover-fade-root]:visited:hover [data-hover-fade-target] {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-root]:-moz-any-link:hover [data-hover-fade-target] {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-root]:any-link:hover [data-hover-fade-target] {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-target]:link:hover,[data-hover-fade-target]:visited:hover {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-target]:-moz-any-link:hover {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-target]:any-link:hover {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
}

/* ============================================================
   11. 検索欄（一覧の上）— .form-search.news-search
   
   ============================================================ */

.menu-mobile .form-search {
  transition-duration:calc(var(--duration-500) + var(--total) * var(--delay-step) * .5);
  transition-property:transform,opacity;
  transition-timing-function:var(--easing-2),var(--easing-0);
}
.menu-mobile.transition-enter .form-search button {
  transition:transform var(--duration-500) var(--easing-2);
}
.menu-mobile.transition-enter-start .form-search {
  transform:translate(calc(var(--column-unit) * 2));
  opacity:0;
}
.menu-mobile.transition-enter-start .form-search button {
  transform:translate(calc(var(--column-unit) * .5));
}
.menu-mobile.transition-enter-end .form-search {
  transform:translate(0);
  opacity:1;
}
.menu-mobile.transition-enter-end .form-search button {
  transform:translate(0);
}
.menu-mobile.transition-leave-start .form-search {
  opacity:1;
}
.menu-mobile.transition-leave-end .form-search {
  transform:translate(calc(var(--column-unit) * 1));
  opacity:0;
}
.form-search-syncsearch {
  display:block;
  width:100%;
}
.form-search-syncsearch .field-search {
  display:block;
  position:relative;
  width:100%;
}
.form-search-syncsearch .field-search button {
  display:flex;
  position:absolute;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  aspect-ratio:1/1;
  width:auto;
  height:100%;
}
@media (min-width: 1024px) {
  .form-search-syncsearch .field-search button {
    left:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .form-search.news-search :is(.form-search-syncsearch .field-search button) {
    left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.form-search-syncsearch .field-search .icon-base {
  width:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.form-search-syncsearch .field-search input {
  border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-gray3);
  padding-right:1em;
  padding-left:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  width:100%;
  height:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-weight:670;
  font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:100%;
  letter-spacing:-.01em;
}
@media (min-width: 1024px) {
  .form-search-syncsearch .field-search input {
    padding-left:calc(54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .form-search.news-search :is(.form-search-syncsearch .field-search input) {
    padding-left:calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.form-search-syncsearch .field-search input::-moz-placeholder {
  opacity:.8;
  color:var(--color-oki-gray);
}
.form-search-syncsearch .field-search input::placeholder {
  opacity:.8;
  color:var(--color-oki-gray);
}
.form-search-syncsearch .field-search input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance:none;
  cursor:pointer;
  background:linear-gradient(45deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,var(--color-oki-black2) 45%,var(--color-oki-black2) 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,var(--color-oki-black2) 45%,var(--color-oki-black2) 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%);
  width:.7em;
  height:.7em;
}
.form-search-syncsearch .form-search-syncsearch__value {
  display:none;
}
@media (max-width: 1023.98px) {
  #press-page .page-title,#press-page .news-search {
    padding-right:calc(var(--column-unit) * 1);
    padding-left:calc(var(--column-unit) * 1);
  }
}
.form-search {
  display:block;
  width:100%;
}
.form-search .field-search {
  display:block;
  position:relative;
  width:100%;
}
.form-search .field-search button {
  display:flex;
  position:absolute;
  top:0;
  left:0;
  justify-content:center;
  align-items:center;
  aspect-ratio:1/1;
  width:auto;
  height:100%;
}
@media (min-width: 1024px) {
  .form-search .field-search button {
    left:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .form-search.news-search :is(.form-search .field-search button) {
    left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.form-search .field-search .icon-base {
  width:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.form-search .field-search input {
  border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-gray3);
  padding-right:1em;
  padding-left:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  width:100%;
  height:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-weight:670;
  font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:100%;
  letter-spacing:-.01em;
}
@media (min-width: 1024px) {
  .form-search .field-search input {
    padding-left:calc(54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .form-search.news-search :is(.form-search .field-search input) {
    padding-left:calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.form-search .field-search input::-moz-placeholder {
  opacity:.8;
  color:var(--color-oki-gray);
}
.form-search .field-search input::placeholder {
  opacity:.8;
  color:var(--color-oki-gray);
}
.form-search .field-search input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance:none;
  cursor:pointer;
  background:linear-gradient(45deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,var(--color-oki-black2) 45%,var(--color-oki-black2) 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),linear-gradient(135deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,var(--color-oki-black2) 45%,var(--color-oki-black2) 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%);
  width:.7em;
  height:.7em;
}

/* ============================================================
   12. 下層で使う字
   html[lang=ja] の側が実際に効いている値。
   ============================================================ */

.t-text-news-title {
  font-weight:670;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.2;
}
@media (min-width: 1024px) {
  .t-text-news-title {
    font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .t-text-news-title {
  font-style:normal;
  font-weight:700;
  font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:130%;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] .t-text-news-title {
    font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.t-headline-3xl {
  font-weight:790;
  font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.1;
  letter-spacing:-.02em;
}
@media (min-width: 1024px) {
  .t-headline-3xl {
    font-size:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .t-headline-3xl {
  font-weight:800;
  font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] .t-headline-3xl {
    font-size:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(1.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.t-headline-4xs {
  font-weight:790;
  font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  letter-spacing:-.02em;
}
@media (min-width: 1024px) {
  .t-headline-4xs {
    font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .t-headline-4xs {
  font-weight:800;
  font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.4;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.51 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] .t-headline-4xs {
    font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.t-label-2xl {
  font-weight:670;
  font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  letter-spacing:-.01em;
}
@media (min-width: 1024px) {
  .t-label-2xl {
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .t-label-2xl {
  font-weight:700;
  font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] .t-label-2xl {
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.t-label-md {
  font-weight:790;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.2;
  letter-spacing:0em;
}
@media (min-width: 1024px) {
  .t-label-md {
    font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .t-label-md {
  font-weight:800;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.2;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] .t-label-md {
    font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.t-label-sm {
  font-weight:670;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1;
  letter-spacing:0em;
}
@media (min-width: 1024px) {
  .t-label-sm {
    font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .t-label-sm {
  font-weight:700;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] .t-label-sm {
    font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ============================================================
   13. 0 件のときの見せ方 — h2.block-heading-base.t-headline-md
   一覧も送りも出さず、この見出し 1 本だけを置く。文言は「条件に一致するページはありません。」
   ============================================================ */

.t-headline-md {
  font-weight:790;
  font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.2;
  letter-spacing:-.02em;
}
@media (min-width: 1024px) {
  .t-headline-md {
    font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
html[lang=ja] .t-headline-md {
  font-weight:800;
  font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.4;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  html[lang=ja] .t-headline-md {
    font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
.block-heading-base {
  display:flex;
  position:relative;
  margin-right:auto;
  margin-left:auto;
  max-width:calc(var(--column-unit) * 20);
}
@media (min-width: 1024px) {
  .block-heading-base {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .block-heading-base[data-size=dense] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .block-heading-base[data-size=regular] {
    max-width:calc(var(--column-unit) * var(--block-content-regular));
  }
  .block-heading-base[data-size=wide] {
    max-width:calc(var(--column-unit) * var(--block-content-wide));
  }
}
.block-heading-base .deco-dot {
  position:absolute;
  top:.2125em;
}


/* ==========================================================================
   §3  OKI detail.css — 記事・リリース詳細の組版
        （柱の幅・見出し・本文・箇条書き・図・表・注記・関連リンク）
   ========================================================================== */

/* ============================================================
 * OKI 下層（プレスリリース詳細）の実規則
 *   出どころ: https://www.oki.com/global/assets/css/style.css  (md5 770741eaf8c471b7142a25e35edc8f33)
 *   確認した頁: /global/ja/press/2026/{z26028,20260729,z26029}.html
 *   原文のまま。:where([data-component-id=…]) だけ外した（特異度 0 なので効き方は不変）。
 *   計算式・イージング・入れ子・宣言順はいじっていない。
 * ============================================================ */

/* 色だけ差し替える。OKI の赤の位置に自社の青を入れる（それ以外の変数名は原文のまま） */
:root{
  --color-oki-red: #003678;
  --color-oki-red2: #001f45;
}


/* ---------------------------------------------------------------
 * 01 頁の器 — main.t-container / .container-block（縦の間隔の法則はここ）
 * --------------------------------------------------------------- */
.t-container {
  padding-right:calc(var(--column-unit) * 1);
  padding-left:calc(var(--column-unit) * 1);
}
.container-block {
  --block-margin-default-sp: 50;
  --block-margin-default-pc: 80;
  --block-margin-sidenav-sp: 70;
  --block-margin-sidenav-pc: 130;
}
.container-block.-has-side .main>:where(*+*) {
  margin-top:calc(var(--block-margin-sidenav-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block:not(.-has-side) .main>:where(*+*) {
  margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .header {
  margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .button-layout-grid {
  display:flex;
  flex-wrap:wrap;
  gap:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .container-block__button-mt {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important;
}
.container-block .body {
  grid-template-columns:minmax(100%,1fr);
  margin-top:calc(45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .body:has(.side) {
  display:grid;
  position:relative;
  grid-template-areas:"main" "side";
}
.container-block .footer>:first-child {
  margin-top:0!important;
}
.container-block .footer:has(*) {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .side {
  grid-area:side;
  align-self:start;
}
.container-block .main {
  grid-area:main;
}
.container-block .main>:first-child {
  margin-top:0!important;
}
.container-block .main .block-note-base {
  margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .main .block-paragraph-base+* {
  margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .main *+.block-paragraph-base {
  margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .main .block-paragraph-base+h2 {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block .main .button--back-to-page {
  margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  text-align:center;
}
.container-block h1.block-heading-base+* {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h2.block-heading-base+* {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h1.block-heading-base+.block-paragraph-display {
  margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h2.block-heading-base+.block-paragraph-display {
  margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h3.block-heading-base {
  margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h3.block-heading-base+* {
  margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h4.block-heading-base+h3 {
  margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h4.block-heading-base+* {
  margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h5.block-heading-base+* {
  margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h6.block-heading-base+* {
  margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h4.block-heading-base+.list-link {
  margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h5.block-heading-base+.list-link {
  margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.container-block h6.block-heading-base+.list-link {
  margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .t-container {
    padding-right:calc(var(--column-unit) * 2);
    padding-left:calc(var(--column-unit) * 2);
  }
  .container-block.-has-side .main>:where(*+*) {
    margin-top:calc(var(--block-margin-sidenav-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block:not(.-has-side) .main>:where(*+*) {
    margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .button-layout-grid {
    gap:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .container-block__button-mt {
    margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important;
  }
  .container-block .body {
    margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .body:has(.side) {
    grid-template-columns:calc(var(--column-unit) * 9) 1fr;
    grid-template-areas:"side main";
    -moz-column-gap:calc(var(--column-unit) * 5);
    column-gap:calc(var(--column-unit) * 5);
  }
  .container-block .footer:has(*) {
    margin-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .side {
    position:sticky;
    top:calc(calc(var(--column-unit) * 1) + var(--header-size));
    left:0;
    transition:top var(--duration-300) var(--easing-2);
  }
  .container-block .main .block-note-base {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-paragraph-base+* {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main *+.block-paragraph-base {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .block-paragraph-base+h2 {
    margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .button--back-to-page {
    margin-top:calc(125 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h1.block-heading-base+* {
    margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h2.block-heading-base+* {
    margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h1.block-heading-base+.block-paragraph-display {
    margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h2.block-heading-base+.block-paragraph-display {
    margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h3.block-heading-base {
    margin-top:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h3.block-heading-base+* {
    margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h4.block-heading-base+h3 {
    margin-top:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h4.block-heading-base+.list-link {
    margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h5.block-heading-base+.list-link {
    margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h6.block-heading-base+.list-link {
    margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .list-link {
    margin-right:auto;
    margin-left:auto;
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .block-heading-base[data-size=regular] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .block-heading-base[data-size=wide] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .container-block.-has-side .body .block-image-base[data-size=lg] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
}
@media (max-width: 1023.98px) {
  .container-block .side {
    margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block .main .list-link {
    padding-right:calc(var(--column-unit) * 1);
    padding-left:calc(var(--column-unit) * 1);
  }
  .container-block .main .list-link.-column-link-set .list-link__label.line-clamp-2 {
    display:block;
  }
  .container-block h1.block-heading-base {
    margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .container-block h2.block-heading-base {
    margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ---------------------------------------------------------------
 * 02 記事の頭 — .block-title-base（カテゴリ札・題・罫・パンくず）
 * --------------------------------------------------------------- */
.block-title-base.page-name {
  margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-title-base .title {
  position:relative;
  padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-title-base .title .deco-dot {
  position:absolute;
  top:.2em;
  left:0;
}
.block-title-base .bar {
  margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  border-bottom:1px solid var(--color-oki-black2);
}
.block-title-base .breadcrumbs {
  margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-title-base .block-title-base__decodot {
  position:absolute;
  top:calc(7 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-title-base [data-toggle-show-content-yoko] {
  position:relative!important;
}
.block-title-base .content_wrap {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  margin-left:calc(var(--column-unit) * 1.5);
}
.block-title-base .category {
  border:1px solid var(--color-oki-gray5);
  border-radius:9999px;
  background:var(--color-oki-gray3);
  padding:.2em .9em;
  font-weight:670;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1;
}
@media (min-width: 1024px) {
  .block-title-base .title {
    padding-right:calc(var(--column-unit) * 1);
    padding-left:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-title-base .bar {
    margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-title-base .block-title-base__decodot {
    top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-title-base .content_wrap {
    gap:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    margin-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    margin-bottom:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    margin-left:calc(var(--column-unit) * 1.2);
  }
  .block-title-base .category {
    font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ---------------------------------------------------------------
 * 03 パンくず — .breadcrumbs-base
 * --------------------------------------------------------------- */
.breadcrumbs-base .list {
  display:flex;
  -moz-column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  justify-content:end;
}
html[lang=ja] :is(.breadcrumbs-base .list) {
  font-family:"Noto Sans JP", system-ui, sans-serif;
}
.breadcrumbs-base .breadcrumbs-base-item {
  display:flex;
  -moz-column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  align-items:center;
}
.breadcrumbs-base .breadcrumbs-base-item:first-child .deco-dot {
  display:none;
}
.breadcrumbs-base .deco-dot {
  position:relative;
  top:-.05em;
  box-shadow:0 4px 40px #0000001f;
  border-radius:1px;
}
.breadcrumbs-base .label {
  font-weight:670;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:130%;
  letter-spacing:-.01em;
}
.breadcrumbs-base .label:link,.breadcrumbs-base .label:visited {
  color:var(--color-oki-gray);
}
.breadcrumbs-base .label:-moz-any-link {
  color:var(--color-oki-gray);
}
.breadcrumbs-base .label:any-link {
  color:var(--color-oki-gray);
}

/* ---------------------------------------------------------------
 * 04 見出し — .block-heading-base（h2 の点は本文の外／h4 は中）
 * --------------------------------------------------------------- */
.block-heading-base {
  display:flex;
  position:relative;
  margin-right:auto;
  margin-left:auto;
  max-width:calc(var(--column-unit) * 20);
}
h1.block-heading-base .deco-dot {
  left:calc(var(--column-unit) * -1);
}
h2.block-heading-base .deco-dot {
  left:calc(var(--column-unit) * -1);
}
h3.block-heading-base {
  color:var(--color-oki-black2);
}
h3.block-heading-base .deco-dot {
  display:none;
}
h4.block-heading-base,h5.block-heading-base,h6.block-heading-base {
  color:var(--color-oki-black2);
  text-indent:1em;
}
h4.block-heading-base .deco-dot {
  opacity:.5;
}
h5.block-heading-base .deco-dot {
  opacity:.5;
}
h6.block-heading-base .deco-dot {
  opacity:.5;
}
.block-heading-base .deco-dot {
  position:absolute;
  top:.2125em;
}
@media (min-width: 1024px) {
  .block-heading-base {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  *+h1.block-heading-base {
    margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  *+h2.block-heading-base {
    margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  h4.block-heading-base .deco-dot {
    width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  h5.block-heading-base .deco-dot {
    width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  h6.block-heading-base .deco-dot {
    width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
@media (max-width: 1023.98px) {
  h2.block-heading-base .deco-dot {
    top:.38em;
  }
}

/* ---------------------------------------------------------------
 * 05 本文 — .block-paragraph-base
 * --------------------------------------------------------------- */
.block-paragraph-base {
  margin-right:auto;
  margin-left:auto;
  max-width:calc(var(--column-unit) * 20);
  color:var(--color-oki-black2);
}
.block-paragraph-base>*+* {
  margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-paragraph-base li {
  padding-left:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-paragraph-base li+li {
  margin-top:.6em;
}
.block-paragraph-base ol li:before {
  content:counter(block-paragraph-base) ". "!important;
  font-size:100%!important;
}
@media (min-width: 1024px) {
  .block-paragraph-base {
    max-width:calc(var(--column-unit) * 30);
  }
  .block-paragraph-base>*+* {
    margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-paragraph-base li {
    padding-left:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-paragraph-base li+li {
    margin-top:1em;
  }
}

/* ---------------------------------------------------------------
 * 06 箇条書き — .wysiwyg-list-style（ul は 4px の四角／ol は「*N」）
 * --------------------------------------------------------------- */
.wysiwyg-list-style li {
  position:relative;
}
.wysiwyg-list-style li:before {
  display:block;
  position:absolute;
  top:0;
  left:0;
  content:"";
}
.wysiwyg-list-style ul li:before {
  top:.5em;
  border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-gray);
  width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.wysiwyg-list-style ol {
  counter-reset:block-paragraph-base;
  list-style-type:none;
}
.wysiwyg-list-style ol>li {
  counter-increment:block-paragraph-base;
}
.wysiwyg-list-style ol>li:before {
  left:-.15em;
  opacity:.9;
  content:"*" counter(block-paragraph-base) " ";
  font-size:100%;
}
.wysiwyg-list-style ol li ul li:before {
  content:""!important;
}
.wysiwyg-list-style a[href] {
  -webkit-text-decoration:underline;
  text-decoration:underline;
}
.wysiwyg-list-style li>ul,.wysiwyg-list-style li>ol {
  margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .wysiwyg-list-style ol>li:before {
    left:-.3em;
    font-size:90%;
  }
}

/* ---------------------------------------------------------------
 * 07 図とキャプション — figure.block-image-base
 * --------------------------------------------------------------- */
.block-image-base {
  --image-rounded-aspect-ratio: auto;
  margin-right:auto;
  margin-left:auto;
}
.block-image-base .caption {
  margin-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-right:calc(var(--column-unit) * 1);
  padding-left:calc(var(--column-unit) * 1);
  color:var(--color-oki-gray2);
}
@media (min-width: 1024px) {
  .block-image-base[data-size=sm] {
    max-width:calc(var(--column-unit) * 20);
  }
  .block-image-base[data-size=md] {
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .block-image-base[data-size=lg] {
    max-width:calc(var(--column-unit) * 34);
  }
  .block-image-base .caption {
    margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ---------------------------------------------------------------
 * 08 表 — .block-table-wrapper（見出し列 11 カラム固定・行は上下に 1px）
 * --------------------------------------------------------------- */
.block-table-wrapper .block-table {
  margin-right:calc(var(--column-unit) * 1);
  margin-left:calc(var(--column-unit) * 1);
}
.block-table-wrapper .block-row {
  display:block;
  border-top:1px solid var(--color-oki-gray5);
  padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-table-wrapper .block-row:last-of-type {
  border-bottom:1px solid var(--color-oki-gray5);
}
html[lang=ja] :is(.block-table-wrapper .block-row) {
  padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-table-wrapper .block-header {
  display:block;
  color:var(--color-oki-black2);
  text-align:left;
}
.block-table-wrapper .block-data {
  display:block;
  color:var(--color-oki-black2);
}
.block-table-wrapper .block-data ul li {
  padding-left:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-table-wrapper .block-data ol li {
  padding-left:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-table-wrapper .block-data li+li {
  margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-table-wrapper .block-content {
  display:block;
}
.block-table-wrapper .block-content>*+* {
  margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .block-table-wrapper .block-table {
    margin-right:auto;
    margin-left:auto;
    width:100%;
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .block-table-wrapper .block-row {
    display:flex;
    align-items:center;
    padding-top:calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-bottom:calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] :is(.block-table-wrapper .block-row) {
    padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-table-wrapper .block-header {
    flex-shrink:0;
    width:calc(var(--column-unit) * 11);
  }
  .block-table-wrapper .block-data ul li {
    padding-left:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-table-wrapper .block-data ol li {
    padding-left:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-table-wrapper .block-data li+li {
    margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-row.-has-image :is(.block-table-wrapper .block-data) {
    display:flex;
    -moz-column-gap:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    column-gap:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    align-items:flex-start;
  }
  .block-table-wrapper .block-content>*+* {
    margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
@media (max-width: 1023.98px) {
  .block-table-wrapper .block-data {
    margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ---------------------------------------------------------------
 * 09 注記 — .block-note-base
 * --------------------------------------------------------------- */
.block-note-base {
  margin-right:auto;
  margin-left:auto;
  max-width:calc(var(--column-unit) * 20);
  color:var(--color-oki-gray2);
}
.block-note-base>*+* {
  margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-note-base li {
  padding-left:calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.block-note-base li+li {
  margin-top:.6em;
}
@media (min-width: 1024px) {
  .block-note-base {
    max-width:calc(var(--column-unit) * 30);
  }
  .block-note-base>*+* {
    margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-note-base li {
    padding-left:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .block-note-base li+li {
    margin-top:.7em;
  }
}

/* ---------------------------------------------------------------
 * 10 関連リンクの並び — .list-link
 * --------------------------------------------------------------- */
.list-link li:first-child .list-link__item {
  border-top:1px solid var(--color-oki-gray5);
}
.list-link .list-link__category {
  border:1px solid var(--color-oki-gray5);
  border-radius:9999px;
  background-color:var(--color-oki-gray3);
  padding:.2em .9em;
}
.list-link .list-link__item {
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:flex-start;
  padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:100%;
}
.list-link .list-link__label-arrow_wrap {
  display:flex;
  align-items:center;
  width:100%;
}
.list-link .list-link__label {
  margin-right:calc(var(--column-unit) * 1);
}
html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link .list-link__label)) {
  font-family:"Noto Sans JP", system-ui, sans-serif;
  font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  font-style:normal;
  font-weight:570;
  line-height:140%;
  letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.list-link .list-link__arrow {
  flex-shrink:0;
  margin-left:auto;
}
.list-link .list-link__arrow {
  color:var(--color-oki-red);
}
.list-link .list-link__arrow.-pdf {
  width:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:auto;
}
.list-link .list-link__arrow.-external {
  width:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:auto;
}
@media (min-width: 1024px) {
  .container-block .main .list-link {
    margin-right:auto;
    margin-left:auto;
    max-width:calc(var(--column-unit) * var(--block-content-dence));
  }
  .list-link .list-link__item {
    padding-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    padding-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link .list-link__label)) {
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    font-style:normal;
    line-height:150%;
    letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .list-link .list-link__arrow.-pdf {
    margin-right:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .list-link .list-link__arrow.-external {
    width:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}
@media (max-width: 1023.98px) {
  .list-link .list-link__arrow {
    --slide-in-arrow-size: var(14);
  }
}

/* ---------------------------------------------------------------
 * 11 問い合わせ先の箱 — .block-button-link-emphasized
 * --------------------------------------------------------------- */
.block-button-link-emphasized {
  display:flex;
  row-gap:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  flex-direction:column;
  margin-right:auto;
  margin-left:auto;
  border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background-color:var(--color-oki-bg-gray);
  padding:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 1);
}
.block-button-link-emphasized .content-area {
  width:100%;
}
.block-button-link-emphasized .content-area>:first-child {
  margin-top:0!important;
}
.block-button-link-emphasized .button-area {
  flex-shrink:0;
}
.block-button-link-emphasized+.block-button-link-emphasized {
  margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important;
}
@media (min-width: 1024px) {
  .block-button-link-emphasized {
    -moz-column-gap:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    column-gap:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    row-gap:0;
    flex-direction:row;
    align-items:center;
    padding:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    width:calc(var(--column-unit) * 30);
  }
}
@media (max-width: 1023.98px) {
  .block-button-link-emphasized .button-area {
    display:flex;
    justify-content:flex-end;
  }
}

/* ---------------------------------------------------------------
 * 12 下線と淡転（記事内リンクの挙動）
 * --------------------------------------------------------------- */
.line-clamp-2 {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
[data-hover-fade-target] {
  transition:opacity var(--duration-800) var(--easing-1);
}
[data-underline-anime-root] {
  position:relative;
}
[data-underline-anime-target] {
  position:absolute;
  inset:auto 0 0;
  margin:auto;
}
[data-underline-anime-target]:before,[data-underline-anime-target]:after {
  position:absolute;
  top:0;
  left:0;
  transition:transform var(--duration-300) var(--easing-5),opacity var(--duration-300) var(--easing-1);
  width:100%;
  height:1px;
  content:"";
}
[data-underline-anime-target]:before {
  transform:scaleX(1);
  transform-origin:right;
  transition-delay:.01s;
  background-color:var(--color-oki-gray5);
}
[data-underline-anime-target]:after {
  transform:scaleX(.5);
  transform-origin:left;
  opacity:0;
  background-color:var(--color-oki-gray);
}
.hover[data-underline-anime-root] [data-underline-anime-target]:before {
  transform:scaleX(0) translateZ(0);
  transition-delay:0s;
}
.hover[data-underline-anime-root] [data-underline-anime-target]:after {
  transform:scaleX(1);
  transition-delay:.2s;
}
@media (any-hover: hover) {
  [data-hover-fade-root]:link:hover [data-hover-fade-target],[data-hover-fade-root]:visited:hover [data-hover-fade-target] {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-root]:-moz-any-link:hover [data-hover-fade-target] {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-root]:any-link:hover [data-hover-fade-target] {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-target]:link:hover,[data-hover-fade-target]:visited:hover {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-target]:-moz-any-link:hover {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-hover-fade-target]:any-link:hover {
    opacity:.7;
    transition-duration:var(--duration-300);
  }
  [data-underline-anime-root]:hover [data-underline-anime-target]:after {
    transform:scaleX(1);
    opacity:1;
    transition-delay:.01s;
  }
}

/* ---------------------------------------------------------------
 * 13 点 — .deco-dot
 * --------------------------------------------------------------- */
.deco-dot {
  display:block;
  width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  background:var(--color-oki-red);
  box-shadow:0 4px 40px #0000001f;
}
.deco-dot[data-size=lg] {
  width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .deco-dot {
    border-radius:calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .deco-dot[data-size=lg] {
    width:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    height:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

/* ---------------------------------------------------------------
 * 14 字組み — t-headline / t-paragraph / t-label（html[lang=ja] が和文の値）
 * --------------------------------------------------------------- */
.t-headline-3xl {
  font-weight:790;
  font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.1;
  letter-spacing:-.02em;
}
html[lang=ja] .t-headline-3xl {
  font-weight:800;
  font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-headline-md {
  font-weight:790;
  font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.2;
  letter-spacing:-.02em;
}
html[lang=ja] .t-headline-md {
  font-weight:800;
  font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.4;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-headline-4xs {
  font-weight:790;
  font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  letter-spacing:-.02em;
}
html[lang=ja] .t-headline-4xs {
  font-weight:800;
  font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.4;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.51 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-headline-5xs {
  font-weight:790;
  font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  letter-spacing:-.02em;
}
html[lang=ja] .t-headline-5xs {
  font-weight:800;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.4;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-paragraph-md {
  font-weight:570;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.4;
  letter-spacing:-.01em;
}
html[lang=ja] .t-paragraph-md {
  font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.6;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-paragraph-2xs {
  font-weight:570;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  letter-spacing:-.01em;
}
html[lang=ja] .t-paragraph-2xs {
  font-weight:570;
  font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.5;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-paragraph-6xs {
  font-weight:570;
  font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  letter-spacing:.03em;
}
html[lang=ja] .t-paragraph-6xs {
  font-weight:570;
  font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.5;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-label-4xl {
  font-weight:790;
  font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  letter-spacing:-.02em;
}
html[lang=ja] .t-label-4xl {
  font-weight:670;
  font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.3;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
.t-label-md {
  font-weight:790;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.2;
  letter-spacing:0em;
}
html[lang=ja] .t-label-md {
  font-weight:800;
  font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  line-height:1.2;
  font-family:"Noto Sans JP", system-ui, sans-serif;
  letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px) {
  .t-headline-3xl {
    font-size:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-headline-3xl {
    font-size:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(1.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-headline-md {
    font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-headline-md {
    font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-headline-4xs {
    font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-headline-4xs {
    font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-headline-5xs {
    font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-headline-5xs {
    font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-paragraph-md {
    font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-paragraph-md {
    font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    line-height:1.7;
    letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-paragraph-2xs {
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-paragraph-2xs {
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-paragraph-6xs {
    font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-paragraph-6xs {
    font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-label-4xl {
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-label-4xl {
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  .t-label-md {
    font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
  html[lang=ja] .t-label-md {
    font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
    letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}


/* ==========================================================================
   §4  OKI page.css — 固定ページの節の型
        （土台トークン / 節見出し / 2 列 / 沿革 / 子ページ一覧 / 目次 /
         大きい導線 / 拠点一覧 / ボタン / 文字の階段）
   ========================================================================== */

/* OKI 下層ページの実規則。https://www.oki.com/global/assets/css/style.css から原文のまま抜き出し。
   抜いた日: 2026-09-08 / md5 770741eaf8c471b7142a25e35edc8f33 / 665,097 バイト
   @media の入れ子は文脈として保持。:where([data-component-id=…]) は特異度 0 なので外してよい。
   ---- 見に行った下層: /global/ja/profile/ · /profile/info/ · /profile/info/group/ · /profile/history/
        /profile/greet/ · /profile/spirit/ · /business/enterprise/  (1440px で実測) */

/* ==========================================================================
   01 土台のトークン（トップと同一。root.css に既出。下層で使う分だけ再掲）
   ========================================================================== */
:root{--outline-width: 4px;--scrollbar-width: 0px;--page-name-mt: 126}

@media (min-width: 1024px) { :root{--page-name-mt: 238} }

:root{--color-oki-black: #0d0d0d;--color-oki-black2: #282828;--color-oki-gray: #909090;--color-oki-gray2: #717171;--color-oki-gray3: #ededed;--color-oki-gray4: #f2f2f2;--color-oki-gray5: #e6e6e6;--color-oki-white: #fbfbfb;--color-oki-white-0-1: rgba(251, 251, 251, .1);--color-oki-red: #003678;--color-oki-red2: #001f45;--color-oki-red3: #fd9797;--color-oki-red4: #fbe2e2;--color-oki-red5: #fbeeee;--color-oki-line-gray: #e6e6e6;--color-oki-line-gray-dark: #909090;--color-oki-line-gray-light-0-5: rgba(237, 237, 237, .5);--color-oki-bg-gray: #f4f4f4;--color-oki-bg-gray-dark-0-8: rgba(237, 237, 237, .8);--theme-bg-default: #ffffff;--theme-bg-subtle: #f5f7fa;--theme-bg-muted: #e8ecf0;--theme-text-muted: #4a4a4a}

:root{--column-size: 24;--effective-viewport-width: 100vw;--column-unit: calc( 100 / var(--column-size) * (var(--effective-viewport-width) - var(--scrollbar-width)) * .01 );--font-size: 16;--screen-size: 390;--header-size: 56px}

@media (min-width: 1024px) { :root{--screen-size: 1440;--column-size: 48} }

:root{--block-content-dence: 30;--block-content-regular: 36;--block-content-wide: 42}

:root{--layer-floating: 5;--layer-drawer: 10;--layer-top: 9999}

:root{--easing-0: cubic-bezier(.26, .06, 0, 1);--easing-1: cubic-bezier(.18, .06, .23, 1);--easing-2: cubic-bezier(.36, .04, .23, 1);--easing-3: cubic-bezier(.43, .05, .17, 1);--easing-4: cubic-bezier(.47, .16, .24, 1);--easing-5: cubic-bezier(.55, .05, .22, .99);--easing-6: cubic-bezier(.55, .05, .06, 1);--easing-7: cubic-bezier(.69, .01, .2, .99);--easing-8: cubic-bezier(.72, .11, .24, 1);--duration-300: .3s;--duration-500: .5s;--duration-800: .8s;--duration-1200: 1.2s}

:root{--breed: calc(50% - (50vw - var(--scrollbar-width) * .5))}

:root{--swiper-theme-color: #007aff}

/* ==========================================================================
   02 下層の殻 — main.t-container > .container-block > .header / .body / .footer
   ========================================================================== */
.t-container{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)}

@media (min-width: 1024px) { .t-container{padding-right:calc(var(--column-unit) * 2);padding-left:calc(var(--column-unit) * 2)} }

.header:where([data-component-id=evaCxl]) .t-container{display:flex;justify-content:space-between;align-items:center;padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .header:where([data-component-id=evaCxl]) .t-container{padding-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:auto} }

.header:where([data-component-id=evaCxl]) .t-container[data-header-type=dynamic]{transform:translateY(calc((var(--header-size)) * var(--scroll-direction)));opacity:calc(1 - var(--scroll-direction) * -1);transition-duration:var(--duration-500);transition-property:opacity,transform;transition-timing-function:var(--easing-0),var(--easing-2)}

.container-block:where([data-component-id=j64An3]){--block-margin-default-sp: 50;--block-margin-default-pc: 80;--block-margin-sidenav-sp: 70;--block-margin-sidenav-pc: 130}

.container-block:where([data-component-id=j64An3]):not(.-has-side):where([data-component-id=j64An3]) .main>:where(*+*){margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]):not(.-has-side):where([data-component-id=j64An3]) .main>:where(*+*){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .header{margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) .desktop\:max-w-col-30{margin-right:auto;margin-left:auto;max-width:calc(var(--column-unit) * 20)}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .desktop\:max-w-col-30{max-width:calc(var(--column-unit) * 30)} }

.container-block:where([data-component-id=j64An3]) .button-layout-grid{display:flex;flex-wrap:wrap;gap:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .button-layout-grid{gap:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .container-block__button-mt{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .container-block__button-mt{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important} }

.container-block:where([data-component-id=j64An3]) .body{grid-template-columns:minmax(100%,1fr);margin-top:calc(45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .body{margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .body:has(.side){display:grid;position:relative;grid-template-areas:"main" "side"}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .body:has(.side){grid-template-columns:calc(var(--column-unit) * 9) 1fr;grid-template-areas:"side main";-moz-column-gap:calc(var(--column-unit) * 5);column-gap:calc(var(--column-unit) * 5)} }

.container-block:where([data-component-id=j64An3]) .footer>:first-child{margin-top:0!important}

.container-block:where([data-component-id=j64An3]) .footer:has(*){margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .footer:has(*){margin-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .footer .block-teaser-nav+.block-navigation-page{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .footer .block-teaser-nav+.block-navigation-page{margin-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .side{grid-area:side;align-self:start}

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .side{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .side{position:sticky;top:calc(calc(var(--column-unit) * 1) + var(--header-size));left:0;transition:top var(--duration-300) var(--easing-2)} }

.container-block:where([data-component-id=j64An3]) .main{grid-area:main}

.container-block:where([data-component-id=j64An3]) .main>:first-child{margin-top:0!important}

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base h1.block-heading-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base h2.block-heading-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-callout-base .block-image-base .caption{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:0;padding-left:0}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-toc-base+h1.block-heading-base{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-toc-base+h2.block-heading-base{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-note-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-note-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .media-gallery-history+*{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) .main *+.media-gallery-history{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .media-gallery-history+*{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main *+.media-gallery-history{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .media-gallery-history+.media-gallery-history{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+*{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) .main *+.block-paragraph-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+*{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main *+.block-paragraph-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+h2{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+h2{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-separator+.block-media-feature{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-separator+.block-media-feature>.block-heading-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-note-base+.block-media-feature{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-note-base+.block-media-feature{margin-top:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])){margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]+:is(.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]+:is(.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]){margin-top:calc(-20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]+:is(.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-link-wide{margin-left:calc(var(--column-unit) * -1);width:calc(100% + calc(var(--column-unit) * 2))}

.container-block:where([data-component-id=j64An3]) .main .block-link-wide{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-link-wide{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .button--back-to-page{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));text-align:center}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .button--back-to-page{margin-top:calc(125 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-note-base+.block-colorized-table{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-note-base+.block-colorized-table{margin-top:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-colorized-table+.block-note-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-colorized-table+.block-note-base{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-colorized-table+.block-note-base ol{margin-left:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .list-link{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .list-link.-column-link-set .list-link__label.line-clamp-2{display:block} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-heading-base+.block-media-rounded{margin-top:calc(62 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-heading-base+.block-colorized-table{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-heading-base+.block-colorized-table{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-media-rounded{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-rounded{margin-top:calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .euroland-iframe-wrapper{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .euroland-iframe-wrapper{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) h1.block-heading-base{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) h2.block-heading-base{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h1.block-heading-base+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h2.block-heading-base+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h1.block-heading-base+*{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h2.block-heading-base+*{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h1.block-heading-base+.block-paragraph-display{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h2.block-heading-base+.block-paragraph-display{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h1.block-heading-base+.block-paragraph-display{margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h2.block-heading-base+.block-paragraph-display{margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h3.block-heading-base{margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h3.block-heading-base{margin-top:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h3.block-heading-base+*{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h3.block-heading-base+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h4.block-heading-base+h3{margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h4.block-heading-base+h3{margin-top:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h4.block-heading-base+*{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h5.block-heading-base+*{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h6.block-heading-base+*{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h4.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h5.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h6.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h4.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h5.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h6.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

/* ==========================================================================
   03 ページ名（h1）と赤い点と 1px の横罫 — block-title-base
   ========================================================================== */
.heading-menu:where([data-component-id="33wdHd"]) .deco-dot{position:absolute;top:0;left:calc(-14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.deco-dot:where([data-component-id=g6iuKk]){display:block;width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background:var(--color-oki-red);box-shadow:0 4px 40px #0000001f}

.deco-dot[data-size=lg]:where([data-component-id=g6iuKk]){width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .deco-dot:where([data-component-id=g6iuKk]){border-radius:calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .deco-dot[data-size=lg]:where([data-component-id=g6iuKk]){width:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

[data-blink-decodot]{opacity:var(--decodot-blink-opacity, 1)}

.cta-contact:where([data-component-id=dz1MHh]) .deco-dot{border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.menu-desktop:where([data-component-id=jrmHlx]) .heading-menu .deco-dot{border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-title-base.page-name:where([data-component-id=a8gnl8]){margin-top:calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-title-base:where([data-component-id=a8gnl8]) .title{position:relative;padding-left:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-title-base:where([data-component-id=a8gnl8]) .title{padding-right:calc(var(--column-unit) * 1);padding-left:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-title-base:where([data-component-id=a8gnl8]) .title .deco-dot{position:absolute;top:.2em;left:0}

.block-title-base:where([data-component-id=a8gnl8]) .bar{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));border-bottom:1px solid var(--color-oki-black2)}

@media (min-width: 1024px) { .block-title-base:where([data-component-id=a8gnl8]) .bar{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-title-base:where([data-component-id=a8gnl8]) .breadcrumbs{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-title-base:where([data-component-id=a8gnl8]) .block-title-base__decodot{position:absolute;top:calc(7 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-title-base:where([data-component-id=a8gnl8]) .block-title-base__decodot{top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-title-base:where([data-component-id=a8gnl8]) [data-toggle-show-content-yoko]{position:relative!important}

.block-title-base:where([data-component-id=a8gnl8]) .content_wrap{display:flex;flex-wrap:wrap;align-items:center;gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 1.5)}

@media (min-width: 1024px) { .block-title-base:where([data-component-id=a8gnl8]) .content_wrap{gap:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-bottom:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 1.2)} }

.block-title-base:where([data-component-id=a8gnl8]) .category{border:1px solid var(--color-oki-gray5);border-radius:9999px;background:var(--color-oki-gray3);padding:.2em .9em;font-weight:670;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1}

@media (min-width: 1024px) { .block-title-base:where([data-component-id=a8gnl8]) .category{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-title-base:where([data-component-id=a8gnl8]) .data.data{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.breadcrumbs-base:where([data-component-id="77135Z"]) .breadcrumbs-base-item:first-child .deco-dot{display:none}

.breadcrumbs-base:where([data-component-id="77135Z"]) .deco-dot{position:relative;top:-.05em;box-shadow:0 4px 40px #0000001f;border-radius:1px}

.heading-base:where([data-component-id=qpc7C6]) .deco-dot{position:absolute}

.heading-base[data-size=xs]:where([data-component-id=qpc7C6]) .deco-dot{position:relative;margin-bottom:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .heading-base[data-size=xs]:where([data-component-id=qpc7C6]) .deco-dot{margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=sm]:where([data-component-id=qpc7C6]) .deco-dot{top:.2lh;left:calc(var(--column-unit) * -.95)}

@media (max-width: 1023.98px) { .heading-base[data-size=sm]:where([data-component-id=qpc7C6]) .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=md]:where([data-component-id=qpc7C6]) .deco-dot{top:.2lh;left:calc(var(--column-unit) * -1)}

@media (max-width: 1023.98px) { .heading-base[data-size=md]:where([data-component-id=qpc7C6]) .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=lg]:where([data-component-id=qpc7C6]) .deco-dot{top:.2lh;left:calc(var(--column-unit) * -1)}

@media (max-width: 1023.98px) { .heading-base[data-size=lg]:where([data-component-id=qpc7C6]) .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { html[lang=ja] :is(.heading-base[data-size=lg]:where([data-component-id=qpc7C6]) .deco-dot){width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=xl]:where([data-component-id=qpc7C6]) .deco-dot{top:.25lh;left:calc(var(--column-unit) * -1.5)}

.list-link:where([data-component-id=nqdzjf]) .list-link__title.block-heading-base .deco-dot{position:absolute;top:.3em;left:0}

h1.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{left:calc(var(--column-unit) * -1)}

h2.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{left:calc(var(--column-unit) * -1)}

@media (max-width: 1023.98px) { h2.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{top:.38em} }

h3.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{display:none}

h4.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{opacity:.5}

h5.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{opacity:.5}

h6.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{opacity:.5}

@media (min-width: 1024px) { h4.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { h5.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { h6.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{position:absolute;top:.2125em}

.page-our-business .section-lead .heading-base .deco-dot{display:none}

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot{position:relative;top:0;left:0;margin-bottom:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot{margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot){width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot){width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__region-heading .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #group-body .group-body__region-heading .deco-dot{width:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__country-heading .deco-dot{background-color:var(--color-oki-red3);width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #group-body .group-body__country-heading .deco-dot{left:calc(-24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_title .deco-dot{position:absolute;top:.25lh;left:calc(var(--column-unit) * -1)}

.home-business-segment:where([data-component-id=yhkERb]) .deco-dot,.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__image{transform:scale(1.06) translateZ(0);opacity:0;transition:all var(--duration-800) var(--easing-1)}

.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_item.hover .deco-dot{opacity:1;transition-duration:var(--duration-300)}

/* ==========================================================================
   04 パンくず — breadcrumbs-base
   ========================================================================== */
.breadcrumbs-base:where([data-component-id="77135Z"]) .list{display:flex;-moz-column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));justify-content:end}

html[lang=ja] :is(.breadcrumbs-base:where([data-component-id="77135Z"]) .list){font-family:"Noto Sans JP", system-ui, sans-serif}

.breadcrumbs-base:where([data-component-id="77135Z"]) .breadcrumbs-base-item{display:flex;-moz-column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));align-items:center}

.breadcrumbs-base:where([data-component-id="77135Z"]) .breadcrumbs-base-item:first-child .deco-dot{display:none}

.breadcrumbs-base:where([data-component-id="77135Z"]) .deco-dot{position:relative;top:-.05em;box-shadow:0 4px 40px #0000001f;border-radius:1px}

.breadcrumbs-base:where([data-component-id="77135Z"]) .label{font-weight:670;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;letter-spacing:-.01em}

.breadcrumbs-base:where([data-component-id="77135Z"]) .label:link,.breadcrumbs-base:where([data-component-id="77135Z"]) .label:visited{color:var(--color-oki-gray)}

.breadcrumbs-base:where([data-component-id="77135Z"]) .label:-moz-any-link{color:var(--color-oki-gray)}

.breadcrumbs-base:where([data-component-id="77135Z"]) .label:any-link{color:var(--color-oki-gray)}

.hero-stage:where([data-component-id=dc0T8L]) .breadcrumbs-base{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (max-width: 1023.98px) { .hero-stage:where([data-component-id=dc0T8L]) .breadcrumbs-base{display:none} }

/* ==========================================================================
   05 会社概要の表 — block-table-wrapper / block-row / block-header / block-data
   ========================================================================== */
.block-callout-base:has(.block-table-align-right) :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content){padding:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-callout-base:has(.block-table-align-right) :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content){padding:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-table{margin-right:calc(var(--column-unit) * 1);margin-left:calc(var(--column-unit) * 1)}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-table{margin-right:auto;margin-left:auto;width:100%;max-width:calc(var(--column-unit) * var(--block-content-dence))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-row{display:block;border-top:1px solid var(--color-oki-gray5);padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-table-wrapper:where([data-component-id=quaGQt]) .block-row:last-of-type{border-bottom:1px solid var(--color-oki-gray5)}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-row{display:flex;align-items:center;padding-top:calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-row.-business{padding-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-row.-business{padding-top:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-row.-align-items-top{align-items:flex-start}

html[lang=ja] :is(.block-table-wrapper:where([data-component-id=quaGQt]) .block-row){padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-table-wrapper:where([data-component-id=quaGQt]) .block-row){padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-header{display:block;color:var(--color-oki-black2);text-align:left}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-header{flex-shrink:0;width:calc(var(--column-unit) * 11)} }

@media (min-width: 1024px) { .block-row.-business :is(.block-table-wrapper:where([data-component-id=quaGQt]) .block-header){padding-right:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-data{display:block;color:var(--color-oki-black2)}

@media (max-width: 1023.98px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-data{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-data ul li{padding-left:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-data ul li{padding-left:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-data ol li{padding-left:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-data ol li{padding-left:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-data li+li{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-data li+li{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-row.-has-image :is(.block-table-wrapper:where([data-component-id=quaGQt]) .block-data){display:flex;-moz-column-gap:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));align-items:flex-start} }

@media (min-width: 1024px) { .block-row.-business :is(.block-table-wrapper:where([data-component-id=quaGQt]) .block-data){line-height:1.5} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-data__image{flex-shrink:0;width:calc(var(--column-unit) * 10);--image-rounded-size: 4;--image-rounded-aspect-ratio: 180/111;margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-data__image{margin-top:0;width:calc(var(--column-unit) * 6)} }

.block-table-wrapper:where([data-component-id=quaGQt]) .block-content{display:block}

.block-table-wrapper:where([data-component-id=quaGQt]) .block-content>*+*{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-wrapper:where([data-component-id=quaGQt]) .block-content>*+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

:where(.block-callout-base) .block-table-wrapper:where([data-component-id=quaGQt]) .block-table{margin-right:0;margin-left:0}

@media (min-width: 1024px) { :where(.block-callout-base) .block-table-wrapper:where([data-component-id=quaGQt]) .block-table .block-header{width:calc(var(--column-unit) * 7)} }

:where(.block-callout-base) .block-table-wrapper:where([data-component-id=quaGQt]) .t-text-date{margin-right:0}

.contact-block-table-wrapper:where([data-component-id="99pn9h"]){margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:auto;margin-right:auto;border-top:solid 1px var(--color-oki-line-gray);width:100%}

@media (max-width: 1023.98px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]){max-width:calc(var(--column-unit) * 22)} }

@media (min-width: 1024px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-table{width:100%}

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-row{display:flex;justify-content:space-between;border-bottom:solid 1px var(--color-oki-line-gray);padding-top:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (max-width: 1023.98px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-row{flex-direction:column;gap:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-top:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data{display:flex;align-items:center}

@media (max-width: 1023.98px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data:last-child{justify-content:end} }

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data .contact-block-image{flex-shrink:0;border:solid 1px var(--color-oki-line-gray);border-radius:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (max-width: 1023.98px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data .contact-block-image{margin-right:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(65 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data .contact-block-image{margin-right:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data [data-component-id="2jzdct"]{margin-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data [data-component-id="2jzdct"]{padding-left:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-data-links{text-align:right}

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__title{font-weight:700}

@media (max-width: 1023.98px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__title{font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__title{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__title){font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-family:"Noto Sans JP", system-ui, sans-serif}

@media (min-width: 1024px) { html[lang=ja] :is(.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__title){font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__text{margin-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (max-width: 1023.98px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__text{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__text{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__text){font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:150%}

@media (min-width: 1024px) { html[lang=ja] :is(.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-content__text){font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link{display:flex;justify-content:end;align-items:center;margin-left:auto;width:-moz-fit-content;width:fit-content}

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link:not(:first-child){margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link .item-text{font-weight:600}

@media (max-width: 1023.98px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link .item-text{margin-right:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link .item-text{margin-right:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link .item-text){font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link .item-text){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link .item-icon){width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.contact-block-table-wrapper:where([data-component-id="99pn9h"]) .contact-block-link .icon-base{color:var(--color-oki-red)}

.block-table-align-right.-text-align-right :is(.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__table){display:block}

.block-table-align-right.-text-align-right :is(.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__table) tbody{display:block}

@media (max-width: 1023.98px) { .block-table-align-right.-text-align-right :is(.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__table){margin-top:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-row{display:block;padding-top:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (max-width: 1023.98px) { .block-table-align-right.-text-align-right :is(.block-table-align-right:where([data-component-id=quaGQt]) .block-row){padding-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-row{display:flex;padding-top:calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-table-align-right.-text-align-right :is(.block-table-align-right:where([data-component-id=quaGQt]) .block-row){justify-content:flex-end} }

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-row:nth-of-type(1){padding-top:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-row:nth-of-type(1){padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-header{display:block;color:var(--color-oki-black2);text-align:left}

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-header{flex-shrink:0;width:calc(var(--column-unit) * 7)} }

@media (max-width: 1023.98px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-data{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 2)} }

.block-table-align-right.-text-align-right :is(.block-table-align-right:where([data-component-id=quaGQt]) .block-data){text-align:right}

.block-table-align-right:where([data-component-id=quaGQt]) .block-content{display:block}

.block-table-align-right:where([data-component-id=quaGQt]) .block-content>*+*{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-content>*+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-content-list{padding-left:0;list-style:none}

.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data{margin-right:calc(var(--column-unit) * 0);margin-bottom:calc(41 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (max-width: 1023.98px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data{margin-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data+.block-table-align-right__table.block-table-align-right__table{margin-top:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data+.block-table-align-right__table.block-table-align-right__table{margin-top:calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 9)} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data+.block-heading-base+.block-table-align-right__table.block-table-align-right__table{margin-top:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data+.block-heading-base+.block-table-align-right__table.block-table-align-right__table{margin-top:calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 9)} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__table.block-table-align-right__table{margin-top:calc(-26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (max-width: 1023.98px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__table.block-table-align-right__table{margin-top:calc(-26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .block-table-align-right.-text-align-right :is(.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__table){margin-top:calc(-26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-data{display:block;color:var(--color-oki-black2)}

@media (max-width: 1023.98px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-data{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-data .wysiwyg-list-style ul li{padding-left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-table-align-right:where([data-component-id=quaGQt]) .block-data .wysiwyg-list-style ul li:before{content:none}

.block-table-align-right:where([data-component-id=quaGQt]) .block-data .wysiwyg-list-style ul>li+li{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-table-align-right:where([data-component-id=quaGQt]) .block-data ol li{padding-left:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-data ol li{padding-left:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-data ol>li+li{margin-top:.6em}

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-data ol>li+li{margin-top:1em} }

.sustainability-report-eco-page .sustainability-report__block .block-table-wrapper{margin-top:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .sustainability-report-eco-page .sustainability-report__block .block-table-wrapper{margin-top:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

/* ==========================================================================
   06 箇条書き（td の中身） — wysiwyg-list-style
   ========================================================================== */
.block-table-align-right:where([data-component-id=quaGQt]) .block-data .wysiwyg-list-style ul li{padding-left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-table-align-right:where([data-component-id=quaGQt]) .block-data .wysiwyg-list-style ul li:before{content:none}

.block-table-align-right:where([data-component-id=quaGQt]) .block-data .wysiwyg-list-style ul>li+li{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.wysiwyg-list-style li{position:relative}

.wysiwyg-list-style li:before{display:block;position:absolute;top:0;left:0;content:""}

.wysiwyg-list-style ul li:before{top:.5em;border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-gray);width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.wysiwyg-list-style ol{counter-reset:block-paragraph-base;list-style-type:none}

.wysiwyg-list-style ol>li{counter-increment:block-paragraph-base}

.wysiwyg-list-style ol>li:before{left:-.15em;opacity:.9;content:"*" counter(block-paragraph-base) " ";font-size:100%}

@media (min-width: 1024px) { .wysiwyg-list-style ol>li:before{left:-.3em;font-size:90%} }

.wysiwyg-list-style ol li ul li:before{content:""!important}

.wysiwyg-list-style a[href]{-webkit-text-decoration:underline;text-decoration:underline}

.wysiwyg-list-style li>ul,.wysiwyg-list-style li>ol{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

/* ==========================================================================
   07 節見出し — block-heading-base / heading-base
   ========================================================================== */
@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base h1.block-heading-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base h2.block-heading-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-toc-base+h1.block-heading-base{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-toc-base+h2.block-heading-base{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-separator+.block-media-feature>.block-heading-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])){margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-heading-base+.block-media-rounded{margin-top:calc(62 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-heading-base+.block-colorized-table{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-heading-base+.block-colorized-table{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) h1.block-heading-base{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) h2.block-heading-base{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h1.block-heading-base+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h2.block-heading-base+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h1.block-heading-base+*{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h2.block-heading-base+*{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h1.block-heading-base+.block-paragraph-display{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h2.block-heading-base+.block-paragraph-display{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h1.block-heading-base+.block-paragraph-display{margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h2.block-heading-base+.block-paragraph-display{margin-top:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h3.block-heading-base{margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h3.block-heading-base{margin-top:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h3.block-heading-base+*{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h3.block-heading-base+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h4.block-heading-base+h3{margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h4.block-heading-base+h3{margin-top:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) h4.block-heading-base+*{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h5.block-heading-base+*{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h6.block-heading-base+*{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h4.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h5.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h6.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h4.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h5.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h6.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base:where([data-component-id=qpc7C6]){--font-size-xs: calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-xs-desktop: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-sm: calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-sm-desktop: calc(46 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-md: calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-md-desktop: calc(52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-lg: calc(32 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-lg-desktop: calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-xl: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-xl-desktop: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-sm: calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-sm-desktop: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-md: calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-md-desktop: calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-lg: calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-lg-desktop: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-xl: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--font-size-ja-xl-desktop: calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));position:relative;color:var(--color-oki-black);font-style:normal;font-weight:790;font-size:var(--font-size-md);line-height:110%;letter-spacing:-.02em}

@media (min-width: 1024px) { .heading-base:where([data-component-id=qpc7C6]){font-size:var(--font-size-md-desktop)} }

html[lang=ja] .heading-base:where([data-component-id=qpc7C6]){letter-spacing:calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .heading-base:where([data-component-id=qpc7C6]){letter-spacing:calc(1.68 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base:where([data-component-id=qpc7C6]) .deco-dot{position:absolute}

.heading-base[data-size=xs]:where([data-component-id=qpc7C6]){font-size:var(--font-size-xs)}

@media (min-width: 1024px) { .heading-base[data-size=xs]:where([data-component-id=qpc7C6]){font-size:var(--font-size-xs-desktop)} }

.heading-base[data-size=xs]:where([data-component-id=qpc7C6]) .deco-dot{position:relative;margin-bottom:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .heading-base[data-size=xs]:where([data-component-id=qpc7C6]) .deco-dot{margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=sm]:where([data-component-id=qpc7C6]){font-size:var(--font-size-sm)}

@media (min-width: 1024px) { .heading-base[data-size=sm]:where([data-component-id=qpc7C6]){font-size:var(--font-size-sm-desktop)} }

html[lang=ja] .heading-base[data-size=sm]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-sm);font-family:"Noto Sans JP", system-ui, sans-serif}

@media (min-width: 1024px) { html[lang=ja] .heading-base[data-size=sm]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-sm-desktop);font-style:normal;font-weight:800;line-height:110%;letter-spacing:1.2px} }

.heading-base[data-size=sm]:where([data-component-id=qpc7C6]) .deco-dot{top:.2lh;left:calc(var(--column-unit) * -.95)}

@media (max-width: 1023.98px) { .heading-base[data-size=sm]:where([data-component-id=qpc7C6]) .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=md]:where([data-component-id=qpc7C6]){font-size:var(--font-size-md)}

@media (min-width: 1024px) { .heading-base[data-size=md]:where([data-component-id=qpc7C6]){font-size:var(--font-size-md-desktop)} }

html[lang=ja] .heading-base[data-size=md]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-md);font-family:"Noto Sans JP", system-ui, sans-serif;line-height:140%;letter-spacing:calc(.72 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .heading-base[data-size=md]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-md-desktop);font-weight:800;letter-spacing:calc(1.26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=md]:where([data-component-id=qpc7C6]) .deco-dot{top:.2lh;left:calc(var(--column-unit) * -1)}

@media (max-width: 1023.98px) { .heading-base[data-size=md]:where([data-component-id=qpc7C6]) .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=lg]:where([data-component-id=qpc7C6]){font-size:var(--font-size-lg)}

@media (min-width: 1024px) { .heading-base[data-size=lg]:where([data-component-id=qpc7C6]){font-size:var(--font-size-lg-desktop)} }

html[lang=ja] .heading-base[data-size=lg]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-lg);font-family:"Noto Sans JP", system-ui, sans-serif}

@media (min-width: 1024px) { html[lang=ja] .heading-base[data-size=lg]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-lg-desktop)} }

.heading-base[data-size=lg]:where([data-component-id=qpc7C6]) .deco-dot{top:.2lh;left:calc(var(--column-unit) * -1)}

@media (max-width: 1023.98px) { .heading-base[data-size=lg]:where([data-component-id=qpc7C6]) .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { html[lang=ja] :is(.heading-base[data-size=lg]:where([data-component-id=qpc7C6]) .deco-dot){width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.heading-base[data-size=xl]:where([data-component-id=qpc7C6]){font-size:var(--font-size-xl)}

@media (min-width: 1024px) { .heading-base[data-size=xl]:where([data-component-id=qpc7C6]){font-size:var(--font-size-xl-desktop)} }

html[lang=ja] .heading-base[data-size=xl]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-xl);font-family:"Noto Sans JP", system-ui, sans-serif}

@media (min-width: 1024px) { html[lang=ja] .heading-base[data-size=xl]:where([data-component-id=qpc7C6]){font-size:var(--font-size-ja-xl-desktop)} }

.heading-base[data-size=xl]:where([data-component-id=qpc7C6]) .deco-dot{top:.25lh;left:calc(var(--column-unit) * -1.5)}

.list-link:where([data-component-id=nqdzjf]) .list-link__title.block-heading-base{margin-top:0!important;padding-left:.6em;max-width:none}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__title.block-heading-base{padding-left:1em} }

.list-link:where([data-component-id=nqdzjf]) .list-link__title.block-heading-base .deco-dot{position:absolute;top:.3em;left:0}

.block-heading-base:where([data-component-id=xc6n2X]){display:flex;position:relative;margin-right:auto;margin-left:auto;max-width:calc(var(--column-unit) * 20)}

@media (min-width: 1024px) { .block-heading-base:where([data-component-id=xc6n2X]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

@media (min-width: 1024px) { .block-heading-base[data-size=dense]:where([data-component-id=xc6n2X]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

@media (min-width: 1024px) { .block-heading-base[data-size=regular]:where([data-component-id=xc6n2X]){max-width:calc(var(--column-unit) * var(--block-content-regular))} }

@media (min-width: 1024px) { .container-block.-has-side .body .block-heading-base[data-size=regular]:where([data-component-id=xc6n2X]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

@media (min-width: 1024px) { .block-heading-base[data-size=wide]:where([data-component-id=xc6n2X]){max-width:calc(var(--column-unit) * var(--block-content-wide))} }

@media (min-width: 1024px) { .container-block.-has-side .body .block-heading-base[data-size=wide]:where([data-component-id=xc6n2X]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

h1.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{left:calc(var(--column-unit) * -1)}

h2.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{left:calc(var(--column-unit) * -1)}

@media (min-width: 1024px) { *+h1.block-heading-base:where([data-component-id=xc6n2X]){margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { *+h2.block-heading-base:where([data-component-id=xc6n2X]){margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { h2.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{top:.38em} }

h3.block-heading-base:where([data-component-id=xc6n2X]){color:var(--color-oki-black2)}

h3.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{display:none}

h4.block-heading-base:where([data-component-id=xc6n2X]),h5.block-heading-base:where([data-component-id=xc6n2X]),h6.block-heading-base:where([data-component-id=xc6n2X]){color:var(--color-oki-black2);text-indent:1em}

h4.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{opacity:.5}

h5.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{opacity:.5}

h6.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{opacity:.5}

@media (min-width: 1024px) { h4.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { h5.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { h6.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-heading-base:where([data-component-id=xc6n2X]) .deco-dot{position:absolute;top:.2125em}

.page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *){margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

@media (min-width: 1024px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *){margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important} }

.page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

@media (min-width: 1024px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-top:calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important} }

@media (max-width: 1023.98px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-right:calc(var(--column-unit) * 1)!important;margin-left:calc(var(--column-unit) * 1)!important} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .block-heading-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content>.block-heading-base[data-heading-level="3"]:first-child{margin-top:0}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]{font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]{font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]){font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]){font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.page-our-business .section-lead .heading-base .deco-dot{display:none}

.block-teaser-nav:where([data-component-id=h65q7U]) .item-link,.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base{color:var(--color-oki-white)}

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base,.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm,.block-teaser-nav:where([data-component-id=h65q7U]) .item-action{grid-column:-1/1;isolation:isolate}

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base,.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .heading-base,.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm{padding-right:0;padding-left:0} }

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot{position:relative;top:0;left:0;margin-bottom:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot{margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot){width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot){width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base{grid-row:1/2}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .heading-base{width:calc(var(--column-unit) * 14)} }

html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base){font-family:"Noto Sans JP", system-ui, sans-serif}

.block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content{margin-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:110%;letter-spacing:-.02em}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content{margin-bottom:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:120%} }

html[lang=ja] :is(.block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content){font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:800;line-height:160%;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content){font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .hero-base:where([data-component-id=xghRPz]) .heading-base{letter-spacing:-.02em} }

html[lang=ja] :is(.hero-base:where([data-component-id=xghRPz]) .heading-base){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.hero-base:where([data-component-id=xghRPz]) .heading-base){font-size:calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data+.block-heading-base+.block-table-align-right__table.block-table-align-right__table{margin-top:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-table-align-right:where([data-component-id=quaGQt]) .block-table-align-right__data+.block-heading-base+.block-table-align-right__table.block-table-align-right__table{margin-top:calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 9)} }

@media (min-width: 1024px) { #news-page .pickup-area.has-pickup .block-button-link-emphasized .block-heading-base{font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { #news-page .pickup-area.has-ourpicks .block-button-link-emphasized .block-heading-base{font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#news-page .pickup-area.has-ourpicks .ourpicks .block-heading-base{margin-top:0;margin-left:calc(var(--column-unit) * 1);color:var(--color-oki-white)}

@media (min-width: 1024px) { #news-page .pickup-area.has-pickup.has-ourpicks .block-button-link-emphasized .block-heading-base{font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-list-history:where([data-component-id=l7xHUs]) .block-list-history__title .block-heading-base{margin-top:0!important}

#about-gateway .heading-content{font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:790;line-height:110%;letter-spacing:calc(-.52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #about-gateway .heading-content{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:120%} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base{width:100%}

@media (min-width: 1024px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base{max-width:calc(var(--column-unit) * var(--block-content-regular))} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{grid-area:heading-2}

@media (min-width: 1024px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{margin-top:0} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="3"]{grid-area:heading-3}

@media (max-width: 1023.98px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="3"]{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="4"]{grid-area:heading-4;margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="4"]{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .block-heading-base+.block-image-base{margin-top:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="3"]{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{margin-bottom:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .block-heading-base+.block-image-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-size=wide][data-layout=split]:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{margin-bottom:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base+.block-heading-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base+.block-heading-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body h4.block-heading-base{margin-left:calc(var(--column-unit) * -.7)}

.block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base+.list-link{margin-top:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base+.list-link{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

/* ==========================================================================
   08 本文と画像 — block-paragraph-base / block-image-base / image-rounded
   ========================================================================== */
[data-image-scale-anime-target]{--image-scale-size: 1.08;scale:1;transition:scale var(--duration-800) ease}

[data-image-scale-anime-target] img{scale:1;transition:scale var(--duration-800) var(--easing-1)}

@media (any-hover: hover) { [data-image-scale-anime-root]:hover [data-image-scale-anime-target] img{scale:var(--image-scale-size)} }

.cta-contact:where([data-component-id=dz1MHh]) .image-rounded{--image-rounded-size: 4;--image-rounded-aspect-ratio: 162/108;align-self:start;margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(162 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .cta-contact:where([data-component-id=dz1MHh]) .image-rounded{--image-rounded-aspect-ratio: 360/240;grid-area:image;margin-top:0;width:calc(360 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.image-rounded:where([data-component-id=axvJSB]){position:relative;border-radius:calc(var(--image-rounded-size, 10) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));aspect-ratio:var(--image-rounded-aspect-ratio, 1/1);overflow:hidden}

.image-rounded.-has-image-border:where([data-component-id=axvJSB]){border:1px solid var(--color-oki-gray5)}

.image-rounded:where([data-component-id=axvJSB]) img{position:absolute;inset:0;margin:auto;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}

.image-rounded[data-use-image-size=true]:where([data-component-id=axvJSB]){aspect-ratio:auto}

.image-rounded[data-use-image-size=true]:where([data-component-id=axvJSB]) img{position:relative;width:100%;height:auto;-o-object-fit:fill;object-fit:fill}

.container-block:where([data-component-id=j64An3]) .main .block-callout-base .block-image-base .caption{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:0;padding-left:0}

.container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+*{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) .main *+.block-paragraph-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+*{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main *+.block-paragraph-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+h2{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-paragraph-base+h2{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

@media (min-width: 1024px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-top:calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important} }

@media (max-width: 1023.98px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-right:calc(var(--column-unit) * 1)!important;margin-left:calc(var(--column-unit) * 1)!important} }

.block-image-base:where([data-component-id="5qjp3P"]){--image-rounded-aspect-ratio: auto;margin-right:auto;margin-left:auto}

@media (min-width: 1024px) { .block-image-base[data-size=sm]:where([data-component-id="5qjp3P"]){max-width:calc(var(--column-unit) * 20)} }

@media (min-width: 1024px) { .block-image-base[data-size=md]:where([data-component-id="5qjp3P"]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

@media (min-width: 1024px) { .block-image-base[data-size=lg]:where([data-component-id="5qjp3P"]){max-width:calc(var(--column-unit) * 34)} }

@media (min-width: 1024px) { .container-block.-has-side .body .block-image-base[data-size=lg]:where([data-component-id="5qjp3P"]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

.block-image-base:where([data-component-id="5qjp3P"]) .caption{margin-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1);color:var(--color-oki-gray2)}

@media (min-width: 1024px) { .block-image-base:where([data-component-id="5qjp3P"]) .caption{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content>.block-paragraph-base:first-child{margin-top:0}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base>*+*{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-paragraph-base:where([data-component-id=xjuu5t]){margin-right:auto;margin-left:auto;max-width:calc(var(--column-unit) * 20);color:var(--color-oki-black2)}

@media (min-width: 1024px) { .block-paragraph-base:where([data-component-id=xjuu5t]){max-width:calc(var(--column-unit) * 30)} }

.block-paragraph-base:where([data-component-id=xjuu5t])>*+*{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-paragraph-base:where([data-component-id=xjuu5t])>*+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-paragraph-base:where([data-component-id=xjuu5t]) li{padding-left:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-paragraph-base:where([data-component-id=xjuu5t]) li{padding-left:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-paragraph-base:where([data-component-id=xjuu5t]) li+li{margin-top:.6em}

@media (min-width: 1024px) { .block-paragraph-base:where([data-component-id=xjuu5t]) li+li{margin-top:1em} }

.block-paragraph-base:where([data-component-id=xjuu5t]) ol li:before{content:counter(block-paragraph-base) ". "!important;font-size:100%!important}

.block-teaser-nav:where([data-component-id=h65q7U]) .image-rounded{opacity:.4;width:100%;height:100%}

.block-gateway-primary:where([data-component-id=t9ewhw]) .image-rounded{--image-rounded-aspect-ratio: 358/426;height:100%}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .image-rounded{--image-rounded-aspect-ratio: none} }

.innovation-gateway-secondary:where([data-component-id=vqoVVz]) .image-rounded{grid-area:image}

@media (min-width: 1024px) { .innovation-gateway-secondary:where([data-component-id=vqoVVz]) .image-rounded{width:calc(410 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (any-hover: hover) { .innovation-gateway-secondary:where([data-component-id=vqoVVz]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .innovation-gateway-secondary:where([data-component-id=vqoVVz]) .item-link:hover .image-rounded img{scale:1.05} }

.innovation-gateway-secondary:where([data-component-id=vqoVVz-new]) .image-rounded{grid-area:image}

@media (min-width: 1024px) { .innovation-gateway-secondary:where([data-component-id=vqoVVz-new]) .image-rounded{width:calc(410 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (any-hover: hover) { .innovation-gateway-secondary:where([data-component-id=vqoVVz-new]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .innovation-gateway-secondary:where([data-component-id=vqoVVz-new]) .item-link:hover .image-rounded img{scale:1.05} }

@media (any-hover: hover) { .innovation-activity-examples:where([data-component-id="2h2mQp"]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .innovation-activity-examples:where([data-component-id="2h2mQp"]) .item-link:hover .image-rounded img{scale:1.05} }

.hero-base:where([data-component-id=xghRPz]) .image-main .image-rounded{height:100%}

.hero-base:where([data-component-id=xghRPz]) .content .image-rounded{display:none}

@media (min-width: 1024px) { .hero-base:where([data-component-id=xghRPz]) .content .image-rounded{display:block} }

.investors-hero:where([data-component-id=lq3TLM]) .main .image-rounded{height:100%}

.block-list-history:where([data-component-id=l7xHUs]) .block-list-history__content .block-paragraph-base{margin-top:0}

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .image-rounded{grid-area:image}

@media (any-hover: hover) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link:hover .image-rounded img{scale:1.05} }

.technologies-gateway-secondary:where([data-component-id=ivjRsx]) .image-rounded{grid-area:image}

@media (min-width: 1024px) { .technologies-gateway-secondary:where([data-component-id=ivjRsx]) .image-rounded{width:calc(410 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (any-hover: hover) { .technologies-gateway-secondary:where([data-component-id=ivjRsx]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .technologies-gateway-secondary:where([data-component-id=ivjRsx]) .item-link:hover .image-rounded img{scale:1.05} }

@media (any-hover: hover) { .technologies-activity-examples:where([data-component-id="7ckCT2"]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .technologies-activity-examples:where([data-component-id="7ckCT2"]) .item-link:hover .image-rounded img{scale:1.05} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-image-base{grid-area:image}

@media (max-width: 1023.98px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-image-base+.content{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-paragraph-base{grid-area:paragraph}

.block-media-feature:where([data-component-id=ivoFX6]) *+.block-paragraph-base{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .block-heading-base+.block-image-base{margin-top:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .content>.block-paragraph-base{margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .content>.block-paragraph-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .block-heading-base+.block-image-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .block-media-feature[data-size=dense][data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base{padding-right:calc(var(--column-unit) * 2);padding-left:calc(var(--column-unit) * 2)} }

@media (max-width: 1023.98px) { .block-media-feature[data-size=wide][data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)} }

@media (max-width: 1023.98px) { .block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base{margin-left:0;padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1);width:calc(var(--column-unit) * 12);--image-rounded-size: 6} }

@media (max-width: 1023.98px) { .block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base .caption{padding-right:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base .caption{margin-top:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-paragraph-base{margin-top:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-link-width-image-title:where([data-component-id=ariZrp]) .image-rounded{grid-area:image}

@media (any-hover: hover) { .block-link-width-image-title:where([data-component-id=ariZrp]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .block-link-width-image-title:where([data-component-id=ariZrp]) .block-link-width-image-title__link:hover .image-rounded img{scale:1.05} }

.two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .block-image-base{grid-area:auto;width:100%}

@media (max-width: 1023.98px) { .two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .block-image-base{padding-right:calc(var(--column-unit) * 1)!important;padding-left:calc(var(--column-unit) * 1)!important} }

.two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .block-paragraph-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

.block-bg-image-base:where([data-component-id="8xsB9u"]) .block-bg-image-base__content .block-paragraph-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-bg-image-base:where([data-component-id="8xsB9u"]) .block-bg-image-base__content .block-paragraph-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-bg-image-base:where([data-component-id="8xsB9u"]) .block-bg-image-base__content .block-paragraph-base .t-paragraph-6xs{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.home-oki-numbers:where([data-component-id=yfxEAP]) .image-rounded{--image-rounded-size: 0;--image-rounded-aspect-ratio: none;height:100%}

@media (min-width: 1024px) { .home-oki-numbers:where([data-component-id=yfxEAP]) .image-rounded{--image-rounded-size: 10} }

/* ==========================================================================
   09 2列の組み — block-media-feature / block-layout-text-align-right / block-list-3-column / block-callout-base
   ========================================================================== */
@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base h1.block-heading-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-callout-base h2.block-heading-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-callout-base .block-image-base .caption{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:0;padding-left:0}

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-separator+.block-media-feature{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .block-separator+.block-media-feature>.block-heading-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-note-base+.block-media-feature{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-note-base+.block-media-feature{margin-top:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])){margin-top:calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]:not(:has(.block-heading-base[data-heading-level="2"])){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]+:is(.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=dense]){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]+:is(.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]){margin-top:calc(-20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]+:is(.container-block:where([data-component-id=j64An3]) .main .block-media-feature[data-layout=split][data-size=wide]){margin-top:calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *){margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

@media (min-width: 1024px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *){margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important} }

.page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

@media (min-width: 1024px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-top:calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important} }

@media (max-width: 1023.98px) { .page-business .block-heading-base[data-heading-level="2"]:not(.block-callout-base *)+.block-image-base{margin-right:calc(var(--column-unit) * 1)!important;margin-left:calc(var(--column-unit) * 1)!important} }

.page-business .block-callout-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

@media (min-width: 1024px) { .page-business .block-callout-base{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important} }

@media (min-width: 1024px) { .block-layout-text-align-right:where([data-component-id="1u92Cf"]){display:flex;margin-right:auto;margin-left:auto;max-width:calc(var(--column-unit) * 30)} }

@media (min-width: 1024px) { .block-layout-text-align-right:where([data-component-id="1u92Cf"]) .inner{margin-left:auto;max-width:calc(var(--column-unit) * 16)} }

.block-callout-base:where([data-component-id=re178m]){position:relative;margin-right:auto;margin-left:auto;border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-bg-gray)}

@media (min-width: 1024px) { .block-callout-base:where([data-component-id=re178m]){max-width:calc(var(--column-unit) * 30)} }

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content{z-index:1;padding:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-callout-base:where([data-component-id=re178m]) .block-callout-base__content{padding:calc(90 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 3) calc(90 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 4)} }

.block-callout-base:has(.block-table-align-right) :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content){padding:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-callout-base:has(.block-table-align-right) :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content){padding:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content>.block-note-base:first-child{margin-top:0}

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content>.block-heading-base[data-heading-level="3"]:first-child{margin-top:0}

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content>.block-paragraph-base:first-child{margin-top:0}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content){padding:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content){padding:calc(62 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(90 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(63 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(var(--column-unit) * 22)} }

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content)>*{color:var(--color-oki-white)}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content)>*+*{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) ul li:before{background-color:var(--color-oki-white)}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]{font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]{font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]){font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-heading-base[data-heading-level="3"]){font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base>*+*{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-callout-base.-has-bg-image :is(.block-callout-base:where([data-component-id=re178m]) .block-callout-base__content) .block-paragraph-base){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-callout-base:where([data-component-id=re178m]) .block-note-base{color:var(--color-oki-black2)}

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__image-wrapper{position:absolute;top:0;left:0;border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-black);width:100%;height:100%;overflow:hidden}

@media (min-width: 1024px) { .block-callout-base:where([data-component-id=re178m]) .block-callout-base__image-wrapper{border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-callout-base:where([data-component-id=re178m]) .block-callout-base__image{opacity:.6;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}

:where(.block-callout-base) .block-table-wrapper:where([data-component-id=quaGQt]) .block-table{margin-right:0;margin-left:0}

@media (min-width: 1024px) { :where(.block-callout-base) .block-table-wrapper:where([data-component-id=quaGQt]) .block-table .block-header{width:calc(var(--column-unit) * 7)} }

:where(.block-callout-base) .block-table-wrapper:where([data-component-id=quaGQt]) .t-text-date{margin-right:0}

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column{row-gap:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-right:auto;margin-left:auto;width:calc(var(--column-unit) * 16)}

@media (min-width: 1024px) { .block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column{row-gap:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column.-has-image .block-list-3-column_title{margin-left:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column.-has-image .block-list-3-column_description{margin-top:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column{-moz-column-gap:calc(var(--column-unit) * 1.5);column-gap:calc(var(--column-unit) * 1.5);width:calc(var(--column-unit) * 30)} }

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_image{--image-rounded-size: 8;--image-rounded-aspect-ratio: 270/167;width:100%}

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_image.-has-image-border{border:1px solid var(--color-oki-gray5)}

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_description{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_description{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_title_wrap{display:flex;align-items:center;margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:100%}

@media (min-width: 1024px) { .block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_title_wrap{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_title_wrap .list-link__arrow{margin-left:auto}

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_title_with_arraw{margin-right:calc(var(--column-unit) * 1)}

.block-media-feature:where([data-component-id=ivoFX6]){margin-right:auto;margin-left:auto}

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base{width:100%}

@media (min-width: 1024px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base{max-width:calc(var(--column-unit) * var(--block-content-regular))} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{grid-area:heading-2}

@media (min-width: 1024px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{margin-top:0} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="3"]{grid-area:heading-3}

@media (max-width: 1023.98px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="3"]{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="4"]{grid-area:heading-4;margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="4"]{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-image-base{grid-area:image}

@media (max-width: 1023.98px) { .block-media-feature:where([data-component-id=ivoFX6]) .block-image-base+.content{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature:where([data-component-id=ivoFX6]) .block-paragraph-base{grid-area:paragraph}

.block-media-feature:where([data-component-id=ivoFX6]) *+.block-paragraph-base{margin-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-media-feature:where([data-component-id=ivoFX6]) .content{grid-area:content}

.block-media-feature:where([data-component-id=ivoFX6]) .action.action{grid-area:action}

@media (max-width: 1023.98px) { .block-media-feature:where([data-component-id=ivoFX6]) .action.action{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)} }

.block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .block-heading-base+.block-image-base{margin-top:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="3"]{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .content>.block-paragraph-base{margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-media-feature[data-layout=stacked]:where([data-component-id=ivoFX6]) .content>.block-paragraph-base{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{margin-bottom:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .caption{padding-right:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .caption{padding-right:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .content>:first-child{margin-top:0!important} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]){display:grid} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split]:where([data-component-id=ivoFX6]) .block-heading-base+.block-image-base{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split][data-image-position=left]:where([data-component-id=ivoFX6]){grid-template-columns:calc(var(--column-unit) * 14) 1fr;grid-template-areas:"heading-2 heading-2" "image     content" "image     action"} }

@media (min-width: 1024px) { .block-media-feature[data-layout=split][data-image-position=right]:where([data-component-id=ivoFX6]){grid-template-columns:1fr calc(var(--column-unit) * 14);grid-template-areas:"heading-2 heading-2" "content   image" "action    image"} }

@media (min-width: 1024px) { .block-media-feature[data-size=dense]:where([data-component-id=ivoFX6]){-moz-column-gap:calc(var(--column-unit) * 2);column-gap:calc(var(--column-unit) * 2);max-width:calc(var(--column-unit) * var(--block-content-dence))} }

@media (max-width: 1023.98px) { .block-media-feature[data-size=dense][data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base{padding-right:calc(var(--column-unit) * 2);padding-left:calc(var(--column-unit) * 2)} }

@media (min-width: 1024px) { .block-media-feature[data-size=wide][data-layout=split]:where([data-component-id=ivoFX6]) .block-heading-base[data-heading-level="2"]{margin-bottom:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature[data-size=wide][data-layout=split]:where([data-component-id=ivoFX6]){-moz-column-gap:calc(var(--column-unit) * 5);column-gap:calc(var(--column-unit) * 5);max-width:calc(var(--column-unit) * var(--block-content-regular))} }

@media (min-width: 1024px) { .container-block.-has-side .body .block-media-feature[data-size=wide][data-layout=split]:where([data-component-id=ivoFX6]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

@media (max-width: 1023.98px) { .block-media-feature[data-size=wide][data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)} }

@media (min-width: 1024px) { .block-media-feature.-image-sm[data-layout=split][data-image-position=left]:where([data-component-id=ivoFX6]){grid-template-columns:calc(var(--column-unit) * 9) 1fr} }

@media (min-width: 1024px) { .block-media-feature.-image-sm[data-layout=split][data-image-position=right]:where([data-component-id=ivoFX6]){grid-template-columns:1fr calc(var(--column-unit) * 9)} }

@media (max-width: 1023.98px) { .block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base{margin-left:0;padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1);width:calc(var(--column-unit) * 12);--image-rounded-size: 6} }

@media (max-width: 1023.98px) { .block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base .caption{padding-right:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-image-base .caption{margin-top:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-media-feature.-image-sm[data-layout=split]:where([data-component-id=ivoFX6]) .block-paragraph-base{margin-top:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.layout-cluster:where([data-component-id=v47jSS]){display:flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content:center;gap:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important;margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important;margin-right:auto;margin-left:auto;max-width:calc(var(--column-unit) * 20)}

@media (min-width: 1024px) { .layout-cluster:where([data-component-id=v47jSS]){flex-direction:row;flex-wrap:wrap;gap:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));max-width:calc(var(--column-unit) * 30)} }

.two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature{margin-top:0!important}

@media (min-width: 1024px) { .two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature{display:grid;grid-template-rows:subgrid;grid-row-gap:calc(var(--column-unit) * 0);row-gap:calc(var(--column-unit) * 0);grid-row:span 2;width:100%} }

.two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .block-image-base{grid-area:auto;width:100%}

.two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .content{grid-area:auto;width:100%}

@media (max-width: 1023.98px) { .two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .block-image-base{padding-right:calc(var(--column-unit) * 1)!important;padding-left:calc(var(--column-unit) * 1)!important} }

.two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .caption{padding:0}

.two-column-media-layout:where([data-component-id="2a3TEK"])>.block-media-feature .block-paragraph-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))!important}

/* ==========================================================================
   10 沿革 — media-gallery-history（左の図が sticky、右が年の並び）
   ========================================================================== */
.container-block:where([data-component-id=j64An3]) .main .media-gallery-history+*{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) .main *+.media-gallery-history{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .media-gallery-history+*{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main *+.media-gallery-history{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .media-gallery-history+.media-gallery-history{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.media-gallery-history:where([data-component-id="1tjnfr"]){display:flex;-moz-column-gap:calc(var(--column-unit) * 4);column-gap:calc(var(--column-unit) * 4);justify-content:space-between;align-items:flex-start;border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-bg-gray);padding:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"]){padding:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 4)} }

@media (min-width: 1024px) { .container-block.-has-side .body .media-gallery-history:where([data-component-id="1tjnfr"]){max-width:calc(var(--column-unit) * var(--block-content-dence))} }

@media (max-width: 1023.98px) { .media-gallery-history:where([data-component-id="1tjnfr"])>*:nth-child(1){display:none} }

.media-gallery-history:where([data-component-id="1tjnfr"])+.media-gallery-history:where([data-component-id="1tjnfr"]){margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"])+.media-gallery-history:where([data-component-id="1tjnfr"]){margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.media-gallery-history.-image-position-right:where([data-component-id="1tjnfr"]){flex-direction:row-reverse}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__image-area{display:flex;position:sticky;top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));justify-content:center;align-items:center;border-radius:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-black2);aspect-ratio:360/538;width:100%;height:100%} }

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__gallary-image-wrapper{position:relative;border-radius:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));aspect-ratio:240/190;width:calc(var(--column-unit) * 8);overflow:hidden}

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__gallary-image{position:absolute;width:calc(var(--column-unit) * 8);--image-rounded-size: 6;--image-rounded-aspect-ratio: 240/190}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__list-area{flex-shrink:0;width:calc(var(--column-unit) * 20)} }

@media (min-width: 1024px) { .container-block.-has-side .body :is(.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__list-area){width:calc(var(--column-unit) * 14)} }

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__list>li:first-child .media-gallery-history__item{border-top:1px solid var(--color-oki-gray5)}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__item_inner{display:flex;align-items:center;width:100%} }

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__item{display:flex;justify-content:space-between;align-items:flex-end;padding-top:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__item{padding-top:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__year_wrap{display:flex;align-items:center}

.media-gallery-history:where([data-component-id="1tjnfr"]) .mobile-only.media-gallery-history__arrow{margin-left:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.media-gallery-history:where([data-component-id="1tjnfr"]) .desktop-only.media-gallery-history__arrow{flex-shrink:0;margin-left:auto}

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__year{font-weight:790;font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__year{width:calc(var(--column-unit) * 6);font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__title{margin-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__title{margin-top:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__image{--image-rounded-size: 4;--image-rounded-aspect-ratio: 65/51;flex-shrink:0;margin-left:calc(var(--column-unit) * 1.5);width:calc(var(--column-unit) * 4)}

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__gallary-image{transform:scale(1.04);opacity:0;z-index:1;transition:transform .3s var(--easing-1),opacity .3s var(--easing-1)}

.media-gallery-history:where([data-component-id="1tjnfr"]) .media-gallery-history__gallary-image.active{transform:scale(1);opacity:1;z-index:2;transition:transform .5s var(--easing-1),opacity .5s var(--easing-1)}

/* ==========================================================================
   11 子ページ一覧 — block-navigation-page / list-link
   ========================================================================== */
.container-block:where([data-component-id=j64An3]) .footer .block-teaser-nav+.block-navigation-page{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .footer .block-teaser-nav+.block-navigation-page{margin-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .list-link{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)} }

@media (max-width: 1023.98px) { .container-block:where([data-component-id=j64An3]) .main .list-link.-column-link-set .list-link__label.line-clamp-2{display:block} }

.container-block:where([data-component-id=j64An3]) h4.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h5.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.container-block:where([data-component-id=j64An3]) h6.block-heading-base+.list-link{margin-top:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h4.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h5.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) h6.block-heading-base+.list-link{margin-top:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-navigation-page:where([data-component-id="6f3cWA"]){border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-bg-gray);padding:calc(68 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-navigation-page:where([data-component-id="6f3cWA"]){margin-left:calc(var(--column-unit) * -1);padding:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 3);width:calc(100% + calc(var(--column-unit) * 2))} }

.block-navigation-page:where([data-component-id="6f3cWA"]) .block-navigation-page__list-wrap{margin-top:calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-navigation-page:where([data-component-id="6f3cWA"]) .block-navigation-page__list-wrap .block-navigation-page__list{margin-left:calc(var(--column-unit) * 11)} }

@media (min-width: 1024px) { .block-navigation-page:where([data-component-id="6f3cWA"]) .list-link__title{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block .main .list-link:where([data-component-id=nqdzjf]){margin-right:auto;margin-left:auto;max-width:calc(var(--column-unit) * var(--block-content-dence))} }

.list-link:where([data-component-id=nqdzjf]) li:first-child .list-link__item{border-top:1px solid var(--color-oki-gray5)}

.list-link:where([data-component-id=nqdzjf]) li:first-child .list-link__item.-home-highlight-news{border-top:none}

.list-link:where([data-component-id=nqdzjf]) li:first-child .list-link__item.--overline{border-top:none}

.list-link:where([data-component-id=nqdzjf]) .list-link__content_wrap{display:flex;flex-wrap:wrap;align-items:center;gap:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-bottom:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));min-width:calc(var(--column-unit) * 5)}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__content_wrap{flex-direction:column;align-items:flex-start;margin-bottom:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link__item.-news-page.-has-dateline :is(.list-link:where([data-component-id=nqdzjf]) .list-link__content_wrap){margin-bottom:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));min-width:calc(var(--column-unit) * 8)}

@media (min-width: 1024px) { .list-link__item.-news-page.-has-dateline :is(.list-link:where([data-component-id=nqdzjf]) .list-link__content_wrap){flex-direction:row;margin-bottom:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__category{border:1px solid var(--color-oki-gray5);border-radius:9999px;background-color:var(--color-oki-gray3);padding:.2em .9em}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__date{padding-left:calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__item{display:flex;position:relative;flex-direction:column;align-items:flex-start;padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:100%}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__item{padding-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__item.-narrow{padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__item.-narrow{padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .list-link:where([data-component-id=nqdzjf]) .list-link__item.-has-dateline{display:block;padding-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__item.-has-dateline{flex-direction:row} }

.list-link:where([data-component-id=nqdzjf]) .list-link__item.-has-title{display:block;padding-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__item.-has-title{padding-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__item.-news-list-title-simple{padding-top:calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__item.-news-page{padding-top:calc(27 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__item.-news-page{flex-direction:row;padding-top:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__label-arrow_wrap{display:flex;align-items:center;width:100%}

@media (max-width: 1023.98px) { .list-link__item.-has-dateline :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label-arrow_wrap){padding-left:calc(var(--column-unit) * 2)} }

@media (max-width: 1023.98px) { .list-link__item.-has-dateline.-home-highlight-news :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label-arrow_wrap){padding-left:calc(var(--column-unit) * 0)} }

@media (max-width: 1023.98px) { .list-link__item.-has-title :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label-arrow_wrap){display:block} }

.list-link:where([data-component-id=nqdzjf]) .list-link__label{margin-right:calc(var(--column-unit) * 1)}

@media (max-width: 1023.98px) { .list-link__item.-home-highlight-news :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label){margin-top:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .list-link__item.-has-dateline :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label){margin-right:calc(var(--column-unit) * 2)} }

.list-link__item.-has-title .line-clamp-2:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label){display:block;margin-right:calc(var(--column-unit) * 0)}

@media (min-width: 1024px) { .list-link__item.-has-title .line-clamp-2:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label){margin-right:calc(var(--column-unit) * 2)} }

@media (max-width: 1023.98px) { .list-link__item.-news-page.-has-dateline :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label){margin-right:calc(var(--column-unit) * 0)} }

html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label)){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:570;line-height:140%;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label)){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;line-height:150%;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label):has(+.list-link__description)){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:790;line-height:140%;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label):has(+.list-link__description)){font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;line-height:140%;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__description{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-right:calc(var(--column-unit) * 1);color:var(--color-oki-black2)}

@media (max-width: 1023.98px) { .list-link__item.-has-dateline :is(.list-link:where([data-component-id=nqdzjf]) .list-link__description){margin-right:calc(var(--column-unit) * 2)} }

.list-link:where([data-component-id=nqdzjf]) .list-link__arrow{flex-shrink:0;margin-left:auto}

@media (max-width: 1023.98px) { .list-link:where([data-component-id=nqdzjf]) .list-link__arrow{--slide-in-arrow-size: var(14)} }

.list-link:where([data-component-id=nqdzjf]) .list-link__arrow{color:var(--color-oki-red)}

.list-link:where([data-component-id=nqdzjf]) .list-link__arrow.-pdf{width:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:auto}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__arrow.-pdf{margin-right:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__arrow.-external{width:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:auto}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__arrow.-external{width:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .list-link__item.-home-highlight-news :is(.list-link:where([data-component-id=nqdzjf]) .list-link__arrow){display:none} }

@media (max-width: 1023.98px) { .list-link__item.-has-title :is(.list-link:where([data-component-id=nqdzjf]) .list-link__arrow){margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 1)} }

@media (max-width: 1023.98px) { .list-link__item.-news-page.-has-dateline :is(.list-link:where([data-component-id=nqdzjf]) .list-link__arrow){display:none} }

.list-link:where([data-component-id=nqdzjf]) .list-link__title.block-heading-base{margin-top:0!important;padding-left:.6em;max-width:none}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__title.block-heading-base{padding-left:1em} }

.list-link:where([data-component-id=nqdzjf]) .list-link__title.block-heading-base .deco-dot{position:absolute;top:.3em;left:0}

.list-link__item.-has-title :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label_wrap){margin-left:calc(var(--column-unit) * 1)}

@media (min-width: 1024px) { .list-link__item.-has-title :is(.list-link:where([data-component-id=nqdzjf]) .list-link__label_wrap){margin-left:calc(var(--column-unit) * 3)} }

@media (min-width: 1024px) { .list-link.-column-2:where([data-component-id=nqdzjf]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;grid-column-gap:calc(var(--column-unit) * 2);-moz-column-gap:calc(var(--column-unit) * 2);column-gap:calc(var(--column-unit) * 2)} }

@media (min-width: 1024px) { .list-link.-column-2:where([data-component-id=nqdzjf]) li:nth-child(2) .list-link__item{border-top:1px solid var(--color-oki-gray5)} }

.list-link.-link-behavior--navigation:where([data-component-id=nqdzjf]) .list-link__item .list-link__label{opacity:.3;transition:opacity var(--duration-300) var(--easing-1)}

.list-link.-link-behavior--navigation:where([data-component-id=nqdzjf]) .list-link__item.-current .list-link__label{opacity:1;transition:opacity var(--duration-300) var(--easing-1)}

@media (any-hover: hover) { .list-link.-link-behavior--navigation:where([data-component-id=nqdzjf]) .list-link__item:hover .list-link__label{opacity:1} }

.list-link.-link-behavior--navigation:where([data-component-id=nqdzjf]) .list-link__item.-current [data-underline-anime-target]:after{transform:scaleX(1)!important;opacity:1!important}

.list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg{font-weight:570;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;letter-spacing:-.01 em}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg{font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg>:first-child{margin-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg>:first-child{margin-top:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg li{margin-left:calc(var(--column-unit) * 1);padding-left:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg li{padding-left:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg li+li{margin-top:.7em}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link__wysiwyg li+li{margin-top:.98em} }

.block-list-3-column-wrapper:where([data-component-id=dshDGT]) .block-list-3-column .block-list-3-column_title_wrap .list-link__arrow{margin-left:auto}

@media (max-width: 1023.98px) { #ir-news-page .list-link{padding-right:0;padding-left:0} }

#investors-ir-news .investors-ir-news__calendar-list .list-link__item{padding-top:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #investors-ir-news .investors-ir-news__calendar-list .list-link__item{padding-top:calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#investors-ir-news .investors-ir-news__calendar-list .list-link__title{font-style:normal;font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:120%;letter-spacing:-.01em}

@media (min-width: 1024px) { #investors-ir-news .investors-ir-news__calendar-list .list-link__title{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#investors-ir-news .investors-ir-news__calendar-list .list-link__arrow{padding-right:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #investors-ir-news .investors-ir-news__calendar-list .list-link__arrow{padding-right:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) li:first-child .list-link-ir-calendar__item{border-top:1px solid var(--color-oki-gray5)}

.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__item{display:flex;position:relative;flex-direction:column;align-items:flex-start;padding-top:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:100%}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__item{padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__label-arrow_wrap{display:flex;align-items:center;width:100%}

.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__label{display:block;margin-right:calc(var(--column-unit) * 1);font-style:normal;font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:140%;letter-spacing:-.01em}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__label{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { html[lang=ja] :is(.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__label){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__description{margin-top:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-bottom:calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:570;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:140%;letter-spacing:-.01em}

.list-link-ir-calendar__item.-no-description :is(.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__description){margin-top:0;margin-bottom:0}

html[lang=ja] :is(.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__description){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:670;line-height:150%;letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__arrow{flex-shrink:0;margin-left:auto}

@media (max-width: 1023.98px) { .list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__arrow{--slide-in-arrow-size: var(14)} }

.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__arrow{color:var(--color-oki-red)}

.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__arrow.-external{width:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:auto}

@media (min-width: 1024px) { .list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__arrow.-external{width:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link-ir-calendar__item.-no-link :is(.list-link:where([data-component-id=nqdzjf]) .list-link-ir-calendar__arrow){display:none}

.list-link-file:where([data-component-id=pb4mAh]){border-top:1px solid var(--color-oki-line-gray)}

.list-link-file:where([data-component-id=pb4mAh]) .link{display:flex;align-items:center}

.list-link-file:where([data-component-id=pb4mAh]) .link__title{padding-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:1em;padding-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:120%;letter-spacing:-.01em}

@media (min-width: 1024px) { .list-link-file:where([data-component-id=pb4mAh]) .link__title{padding-top:calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.list-link-file:where([data-component-id=pb4mAh]) .link__title){font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-family:"Noto Sans JP", system-ui, sans-serif;font-weight:700;line-height:150%;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.list-link-file:where([data-component-id=pb4mAh]) .link__title){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link-file:where([data-component-id=pb4mAh]) .link__icon{flex-shrink:0;margin-right:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:auto;width:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-red)}

@media (min-width: 1024px) { .list-link-file:where([data-component-id=pb4mAh]) .link__icon{margin-right:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .sustainability-report__top .list-link:where([data-component-id=nqdzjf]){margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .sustainability-report__block .list-link:where([data-component-id=nqdzjf]){margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .sustainability-report__top .list-link:where([data-component-id=nqdzjf]){margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .sustainability-report__block .list-link:where([data-component-id=nqdzjf]){margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.sustainability-report__top .list-link:where([data-component-id=nqdzjf]) .list-link__item{padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.sustainability-report__block .list-link:where([data-component-id=nqdzjf]) .list-link__item{padding-top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

html[lang=ja] :is(.sustainability-report__top .list-link:where([data-component-id=nqdzjf]) .list-link__item){padding-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

html[lang=ja] :is(.sustainability-report__block .list-link:where([data-component-id=nqdzjf]) .list-link__item){padding-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.sustainability-report__top .list-link:where([data-component-id=nqdzjf]) .list-link__label{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.sustainability-report__block .list-link:where([data-component-id=nqdzjf]) .list-link__label{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item .list-link__arrow{display:block}

html[lang=ja] :is(.list-link__label .t-paragraph-lg:is(.sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item)){font-family:"Noto Sans JP", system-ui, sans-serif;font-weight:790}

@media (max-width: 1023.98px) { html[lang=ja] :is(.list-link__label .t-paragraph-lg:is(.sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item)){font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.technologies-otr-single-main .technologies-otr-single-wrapper .technologies-otr-single-block .list-link{padding-left:0;padding-right:0}

.technologies-otr-archives-main .technologies-otr-archives-wrapper .technologies-otr-archives-block [data-component-id=nqdzjf] .list-link__label{font-weight:300;line-height:1.5}

@media (max-width: 1023.98px) { .technologies-otr-archives-main .technologies-otr-archives-wrapper .technologies-otr-archives-block [data-component-id=nqdzjf] .list-link__label{width:calc(276 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id=nqdzjf] .list-link__label){margin-right:calc(var(--column-unit) * 2);font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-weight:800;-webkit-line-clamp:3}

@media (min-width: 1024px) { .list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id=nqdzjf] .list-link__label){font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id=nqdzjf] .list-link__label)){font-family:"Noto Sans JP", system-ui, sans-serif;font-weight:790}

.block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base+.list-link{margin-top:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .block-heading-base+.list-link{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (max-width: 1023.98px) { .block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .list-link{padding:0} }

.block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .list-link__item{padding-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-image-sticky-layout:where([data-component-id=n7ptrT]) .block-image-sticky-layout__body .list-link__item{padding-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-callout-list:where([data-component-id=ifr4q6]) .block-callout-list__content .list-link__item{padding-top:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

/* ==========================================================================
   12 目次 — block-toc-base
   ========================================================================== */
@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-toc-base+h1.block-heading-base{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .main .block-toc-base+h2.block-heading-base{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-toc-base:where([data-component-id=g8dwBg]){margin-right:auto;margin-left:auto;margin-bottom:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-bg-gray);padding:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-toc-base.-hidden:where([data-component-id=g8dwBg]){display:none}

@media (min-width: 1024px) { .block-toc-base:where([data-component-id=g8dwBg]){margin-bottom:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(var(--column-unit) * 30)} }

.block-toc-base:where([data-component-id=g8dwBg]) .list{display:flex;-moz-column-gap:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));row-gap:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));flex-wrap:wrap}

@media (min-width: 1024px) { .block-toc-base:where([data-component-id=g8dwBg]) .list{-moz-column-gap:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));row-gap:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-toc-base:where([data-component-id=g8dwBg]) .item-link{display:inline-flex;position:relative;-moz-column-gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));align-items:center}

.block-toc-base:where([data-component-id=g8dwBg]) .item-icon{flex-shrink:0;width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-toc-base:where([data-component-id=g8dwBg]) .icon-base{color:var(--color-oki-red)}

.block-toc-base:where([data-component-id=g8dwBg]) .underline-anime{top:0}

/* ==========================================================================
   13 大きい導線 — block-gateway-primary / block-gateway-secondary / block-teaser-nav
   ========================================================================== */
.container-block:where([data-component-id=j64An3]) .footer .block-teaser-nav+.block-navigation-page{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .container-block:where([data-component-id=j64An3]) .footer .block-teaser-nav+.block-navigation-page{margin-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.page-our-business .block-teaser-nav{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .page-our-business .block-teaser-nav{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]){--image-rounded-size: 10;--image-rounded-aspect-ratio: 385/253;display:grid;grid-template-columns:auto;grid-auto-rows:1fr;grid-row-gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));row-gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]){--image-rounded-aspect-ratio: 650/456;grid-template-columns:1fr 1fr;-moz-column-gap:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]) .block-teaser-nav-item{display:grid;min-height:calc(256 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .block-teaser-nav-item{grid-template-rows:subgrid;min-height:auto} }

.block-teaser-nav:where([data-component-id=h65q7U]) .item-link,.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base{color:var(--color-oki-white)}

.block-teaser-nav:where([data-component-id=h65q7U]) .icon-base{color:var(--color-oki-red)}

.block-teaser-nav:where([data-component-id=h65q7U]) .item-link{display:grid;position:static;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;padding:calc(27 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 1) calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .item-link{padding:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]) .item-image{position:absolute;inset:0;grid-row:-1/1;grid-column:-1/1;margin:calc(-36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * -1) calc(-30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin:auto;border-radius:calc(var(--image-rounded-size) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-black);overflow:hidden}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .item-image{position:static;margin:calc(-40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(-40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(-50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]) .image-rounded{opacity:.4;width:100%;height:100%}

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base,.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm,.block-teaser-nav:where([data-component-id=h65q7U]) .item-action{grid-column:-1/1;isolation:isolate}

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base,.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm{padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .heading-base,.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm{padding-right:0;padding-left:0} }

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot{position:relative;top:0;left:0;margin-bottom:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot{margin-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot){width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base[data-size=sm] .deco-dot){width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base{grid-row:1/2}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .heading-base{width:calc(var(--column-unit) * 14)} }

html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .heading-base){font-family:"Noto Sans JP", system-ui, sans-serif}

.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm{grid-row:2/3;margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:0;width:calc(var(--column-unit) * 18);letter-spacing:-.01em}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-bottom:calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(226 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .paragraph-sm){font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;line-height:160%;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(260 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]) .item-action{display:flex;position:relative;grid-row:3/4;justify-content:space-between;margin-top:auto;padding-top:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:790;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:100%;font-feature-settings:"palt" on,"pkna" on,"vkrn" on}

@media (min-width: 1024px) { .block-teaser-nav:where([data-component-id=h65q7U]) .item-action{margin-top:0;padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .item-action){font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-family:"Noto Sans JP", system-ui, sans-serif;font-weight:700;line-height:100%;letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-teaser-nav:where([data-component-id=h65q7U]) .item-action){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-teaser-nav:where([data-component-id=h65q7U]) .item-icon{display:grid;margin-right:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));overflow:hidden}

.block-teaser-nav:where([data-component-id=h65q7U]) .icon-base{grid-row:-1/1;grid-column:-1/1;width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-teaser-nav:where([data-component-id=h65q7U]) .icon-base:first-child{translate:-50% 0;opacity:0}

.block-teaser-nav:where([data-component-id=h65q7U]) .icon-base:last-child{translate:0 0;opacity:1}

.block-teaser-nav:where([data-component-id=h65q7U]) .underline-anime{top:0}

@media (any-hover: hover) { .block-teaser-nav:where([data-component-id=h65q7U]) .icon-base{transition-duration:var(--duration-500);transition-property:translate,opacity;transition-timing-function:var(--easing-2),var(--easing-0)} }

@media (any-hover: hover) { .block-teaser-nav:where([data-component-id=h65q7U]) .item-link:hover .icon-base:first-child{translate:0 0;opacity:1} }

@media (any-hover: hover) { .block-teaser-nav:where([data-component-id=h65q7U]) .item-link:hover .icon-base:last-child{translate:50% 0;opacity:0} }

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]){display:grid;grid-column-gap:calc(var(--column-unit) * 3);-moz-column-gap:calc(var(--column-unit) * 3);column-gap:calc(var(--column-unit) * 3);height:calc(100vh - calc(150 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))));min-height:calc(750 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .image{grid-area:image}

.block-gateway-primary:where([data-component-id=t9ewhw]) .image img{transition-duration:var(--duration-500);transition-property:scale,opacity;transition-timing-function:var(--easing-2)}

@media (any-hover: hover) { .block-gateway-primary:where([data-component-id=t9ewhw]) .image a:hover img{scale:1.05;opacity:.9} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .content{display:grid;grid-template-columns:auto;grid-area:content;margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(var(--column-unit) * 2);padding-left:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .content{align-self:center;margin-top:0;padding-right:calc(var(--column-unit) * 1)} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .sub-title{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:110%;letter-spacing:-.02em}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .sub-title{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-right:calc(81 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%} }

html[lang=ja] :is(.block-gateway-primary:where([data-component-id=t9ewhw]) .sub-title){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:800;line-height:160%;letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-gateway-primary:where([data-component-id=t9ewhw]) .sub-title){font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .body{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .body{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { html[lang=ja] :is(.block-gateway-primary:where([data-component-id=t9ewhw]) .body){margin-top:calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-primary:where([data-component-id=t9ewhw]) :has(.sub-title) .body{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) :has(.sub-title) .body{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-gateway-primary[data-description-size=half]:where([data-component-id=t9ewhw]) .body{padding-left:calc(var(--column-unit) * 8)} }

@media (min-width: 1024px) { .block-gateway-primary[data-description-size=full]:where([data-component-id=t9ewhw]) .body{max-width:calc(var(--column-unit) * 16)} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content{margin-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:110%;letter-spacing:-.02em}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content{margin-bottom:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:120%} }

html[lang=ja] :is(.block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content){font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:800;line-height:160%;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.block-gateway-primary:where([data-component-id=t9ewhw]) .heading-content){font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .image-rounded{--image-rounded-aspect-ratio: 358/426;height:100%}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .image-rounded{--image-rounded-aspect-ratio: none} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .button-base{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2em}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .button-base{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-primary:where([data-component-id=t9ewhw]) .button-base+.button-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-gateway-primary:where([data-component-id=t9ewhw]) .button-base+.button-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-gateway-primary[data-image-position=right]:where([data-component-id=t9ewhw]){grid-template-columns:1fr calc(var(--column-unit) * 21);grid-template-areas:"content image"} }

@media (min-width: 1024px) { .block-gateway-primary[data-image-position=left]:where([data-component-id=t9ewhw]){grid-template-columns:calc(var(--column-unit) * 21) 1fr;grid-template-areas:"image content"} }

#about-block-teaser-nav{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #about-block-teaser-nav{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .block-gateway-secondary-item+.block-gateway-secondary-item{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .block-gateway-secondary-item+.block-gateway-secondary-item{margin-top:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(var(--column-unit) * 11)} }

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .block-gateway-secondary-item{--image-rounded-size: 6;--image-rounded-aspect-ratio: 130/162}

@media (min-width: 1024px) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .block-gateway-secondary-item{--image-rounded-size: 10;--image-rounded-aspect-ratio: 300/374} }

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link{display:inline-grid;grid-template-columns:calc(var(--column-unit) * 8) 1fr;grid-template-areas:"image title" "image description" "image icon";-moz-column-gap:calc(var(--column-unit) * 2);column-gap:calc(var(--column-unit) * 2)}

@media (min-width: 1024px) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link{grid-template-rows:1fr repeat(3,auto) 1fr;grid-template-columns:calc(var(--column-unit) * 10) calc(285 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));grid-template-areas:"image ." "image title" "image description" "image icon" "image ."} }

html[lang=ja] :is(.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link){grid-template-columns:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) 1fr}

@media (min-width: 1024px) { html[lang=ja] :is(.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link){grid-template-columns:calc(var(--column-unit) * 10) calc(300 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-title{grid-area:title;font-style:normal;font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:110%;letter-spacing:-.02em}

@media (min-width: 1024px) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-title{align-self:end;font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-title){font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-family:"Noto Sans JP", system-ui, sans-serif}

@media (min-width: 1024px) { html[lang=ja] :is(.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-title){font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:800;line-height:140%;letter-spacing:calc(.9 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-description{grid-area:description;margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-description{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .image-rounded{grid-area:image}

.block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-icon{grid-area:icon;margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-red)}

@media (min-width: 1024px) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-icon{align-self:start;margin-top:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (any-hover: hover) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link{transition-duration:var(--duration-500);transition-property:opacity;transition-timing-function:var(--easing-0)} }

@media (any-hover: hover) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .image-rounded img{transition-duration:var(--duration-500);transition-property:scale;transition-timing-function:var(--easing-2)} }

@media (any-hover: hover) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link:hover{opacity:.9} }

@media (any-hover: hover) { .block-gateway-secondary:where([data-component-id="1fhLgC"]) .item-link:hover .image-rounded img{scale:1.05} }

@media (min-width: 1024px) { #sustainability-block-teaser-nav{margin-top:calc(var(--column-unit) * -1)} }

/* ==========================================================================
   14 拠点・グループ会社の一覧 — group-body__ / worldwide-card
   ========================================================================== */
#group-body .group-body__region{display:none}

#group-body .group-body__region.is-selected{display:block;margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #group-body .group-body__region.is-selected{margin-top:calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__region-heading{margin-left:calc(var(--column-unit) * 1);font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;letter-spacing:-.02em}

@media (min-width: 1024px) { #group-body .group-body__region-heading{font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__region-heading .deco-dot{width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #group-body .group-body__region-heading .deco-dot{width:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__region-list{display:flex;row-gap:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));flex-direction:column;margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #group-body .group-body__region-list{row-gap:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));flex-direction:row;flex-wrap:wrap;margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-right:calc(-22.5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(-22.5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__country{display:none}

#group-body .group-body__country.is-selected{display:flex;flex-direction:column;width:100%}

@media (min-width: 1024px) { #group-body .group-body__country.is-selected{width:auto} }

#group-body .group-body__country-heading{margin-left:calc(var(--column-unit) * 2);font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;letter-spacing:-.02em}

@media (min-width: 1024px) { #group-body .group-body__country-heading{margin-left:calc((22.5 + 24) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__country-heading .deco-dot{background-color:var(--color-oki-red3);width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #group-body .group-body__country-heading .deco-dot{left:calc(-24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

#group-body .group-body__country-list{display:flex;row-gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));flex-wrap:wrap;height:100%}

@media (min-width: 1024px) { #group-body .group-body__country-list{row-gap:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.group-body__country-heading+:is(#group-body .group-body__country-list){margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { #group-body .group-body__country-item{margin-right:calc(22.5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(22.5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.worldwide-card:where([data-component-id="1p7JdS"]){border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-bg-gray);padding-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(var(--column-unit) * 1);padding-bottom:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(var(--column-unit) * 1);width:100%}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]){padding-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(410 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.worldwide-card:where([data-component-id="1p7JdS"]):has(.card-image){padding-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]):has(.card-image){padding-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.worldwide-card:where([data-component-id="1p7JdS"]) .card-image{--image-rounded-size: 6;--image-rounded-aspect-ratio: 324/183}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]) .card-image{--image-rounded-aspect-ratio: 370/208} }

.worldwide-card:where([data-component-id="1p7JdS"]) .card-name,.worldwide-card:where([data-component-id="1p7JdS"]) .card-address,.worldwide-card:where([data-component-id="1p7JdS"]) .card-items{padding-right:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]) .card-name,.worldwide-card:where([data-component-id="1p7JdS"]) .card-address,.worldwide-card:where([data-component-id="1p7JdS"]) .card-items{padding-right:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.worldwide-card:where([data-component-id="1p7JdS"]):has(.card-image) .card-name{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.worldwide-card:where([data-component-id="1p7JdS"]) .card-address{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:570;font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;letter-spacing:-.01em}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]) .card-address{margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));min-height:calc((16 * 1.4 * 2) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:140%} }

html[lang=ja] :is(.worldwide-card:where([data-component-id="1p7JdS"]) .card-address){font-family:"Noto Sans JP", system-ui, sans-serif;line-height:145%}

.worldwide-card:where([data-component-id="1p7JdS"]) .card-items{margin-top:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));border-top:1px solid var(--color-oki-line-gray)}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]) .card-items{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item{display:flex;align-items:center;padding-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item--tel{pointer-events:none}

.worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item--fax{pointer-events:none}

.worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item__icon{flex-shrink:0;width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item__label{flex:1 1 auto;margin-left:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:1em;font-style:normal;font-weight:570;font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;letter-spacing:-.01em}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item__label{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:140%} }

.worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item__arrow{flex-shrink:0;margin-left:auto;padding-right:calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item__arrow{padding-right:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.worldwide-card:where([data-component-id="1p7JdS"]) .card-description{margin-top:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-gray3);padding:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:670;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;letter-spacing:-.01em}

@media (min-width: 1024px) { .worldwide-card:where([data-component-id="1p7JdS"]) .card-description{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.worldwide-card:where([data-component-id="1p7JdS"]) .card-description){font-weight:500}

/* ==========================================================================
   15 関連カード（濃色・写真を敷く） — block-related-products / .card__
   ========================================================================== */
.block-related-products:where([data-component-id="9v2lNn"]){display:grid;grid-template-rows:100%;grid-template-columns:100%;margin-left:calc(var(--column-unit) * -1);width:calc(100% + calc(var(--column-unit) * 2))}

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]){margin-left:calc(var(--column-unit) * -2);width:calc(100% + calc(var(--column-unit) * 4))} }

.block-related-products:where([data-component-id="9v2lNn"]) .content{isolation:isolate}

@media (max-width: 1023.98px) { .block-related-products:where([data-component-id="9v2lNn"]) .content{margin-top:calc(-20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .content{overflow:clip} }

.block-related-products:where([data-component-id="9v2lNn"]) .card{display:block;flex-shrink:0;border-radius:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));aspect-ratio:230/317;width:calc(230 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));scroll-snap-align:center;color:var(--color-oki-white)}

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .card{aspect-ratio:290/400;width:calc(290 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));scroll-snap-align:start} }

.block-related-products:where([data-component-id="9v2lNn"]) .card__bg-image{--image-rounded-aspect-ratio: 230/317;background-color:var(--color-oki-black);width:100%}

.block-related-products:where([data-component-id="9v2lNn"]) .card__bg-image img{opacity:.6}

.block-related-products:where([data-component-id="9v2lNn"]) .card__content-inner{display:flex;position:absolute;top:0;left:0;flex-direction:column;padding-top:calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:100%;height:100%}

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .card__content-inner{padding-top:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(31 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(31 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-related-products:where([data-component-id="9v2lNn"]) .card__dot{display:block;border-radius:calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background:var(--color-oki-red);width:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .card__dot{border-radius:calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.block-related-products:where([data-component-id="9v2lNn"]) .card__title{margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:80%;font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.01em}

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .card__title{font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-related-products:where([data-component-id="9v2lNn"]) .card__title){font-family:"Noto Sans JP", system-ui, sans-serif;line-height:115%}

.block-related-products:where([data-component-id="9v2lNn"]) .card__description{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:70%;color:var(--color-oki-gray3);font-weight:570;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;letter-spacing:-.01em}

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .card__description{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.block-related-products:where([data-component-id="9v2lNn"]) .card__description){font-family:"Noto Sans JP", system-ui, sans-serif}

.block-related-products:where([data-component-id="9v2lNn"]) .card__action{display:flex;justify-content:space-between;margin-top:auto;padding-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.block-related-products:where([data-component-id="9v2lNn"]) .card__action_label{font-weight:790;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1}

.block-related-products:where([data-component-id="9v2lNn"]) .underline-anime[data-underline-anime-target]{top:0}

@media (max-width: 1023.98px) { .block-related-products:where([data-component-id="9v2lNn"]) .track-mobile__title{margin-top:0!important} }

@media (max-width: 1023.98px) { .block-related-products:where([data-component-id="9v2lNn"]) .track-mobile{display:flex;position:relative;-moz-column-gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));flex-wrap:nowrap;margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(calc(280 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * -.5 + calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))));padding-right:calc(var(--column-unit) * 1);padding-left:calc(calc(230 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * .5 + calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))));overflow-x:auto;scroll-snap-type:x mandatory} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .title-button-wrapper{display:flex;position:absolute;top:0;left:calc(var(--column-unit) * 9);flex-direction:column;z-index:10;padding-bottom:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:100%} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .block-heading-base{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .button-group{display:flex;-moz-column-gap:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));z-index:3;margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:auto!important} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .swiper-slide{transition:opacity var(--duration-300) var(--easing-0);padding-left:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:-moz-fit-content;width:fit-content} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) [data-swiper-visibillity=showing]{opacity:1;transition:opacity .3s var(--easing-0) .15s} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) [data-swiper-visibillity=hidden]{opacity:0;transition:opacity .3s var(--easing-0)} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .swiper-slide:last-child{padding-right:calc(var(--column-unit) * 1)} }

@media (min-width: 1024px) { .block-related-products:where([data-component-id="9v2lNn"]) .swiper-slide:first-child{padding-left:calc(var(--column-unit) * 0)} }

/* ==========================================================================
   16 動き — 罫のアニメ / 矢印 / アイコン送り / 淡くする
   ========================================================================== */
[data-hover-fade-target]{transition:opacity var(--duration-800) var(--easing-1)}

@media (any-hover: hover) { [data-hover-fade-root]:link:hover [data-hover-fade-target],[data-hover-fade-root]:visited:hover [data-hover-fade-target]{opacity:.7;transition-duration:var(--duration-300)} }

@media (any-hover: hover) { [data-hover-fade-root]:-moz-any-link:hover [data-hover-fade-target]{opacity:.7;transition-duration:var(--duration-300)} }

@media (any-hover: hover) { [data-hover-fade-root]:any-link:hover [data-hover-fade-target]{opacity:.7;transition-duration:var(--duration-300)} }

@media (any-hover: hover) { [data-hover-fade-target]:link:hover,[data-hover-fade-target]:visited:hover{opacity:.7;transition-duration:var(--duration-300)} }

@media (any-hover: hover) { [data-hover-fade-target]:-moz-any-link:hover{opacity:.7;transition-duration:var(--duration-300)} }

@media (any-hover: hover) { [data-hover-fade-target]:any-link:hover{opacity:.7;transition-duration:var(--duration-300)} }

[data-underline-anime-root]{position:relative}

[data-underline-anime-target]{position:absolute;inset:auto 0 0;margin:auto}

[data-underline-anime-target]:before,[data-underline-anime-target]:after{position:absolute;top:0;left:0;transition:transform var(--duration-300) var(--easing-5),opacity var(--duration-300) var(--easing-1);width:100%;height:1px;content:""}

[data-underline-anime-target]:before{transform:scaleX(1);transform-origin:right;transition-delay:.01s;background-color:var(--color-oki-gray5)}

[data-underline-anime-target]:after{transform:scaleX(.5);transform-origin:left;opacity:0;background-color:var(--color-oki-gray)}

@media (any-hover: hover) { [data-underline-anime-root]:hover [data-underline-anime-target]:after{transform:scaleX(1);opacity:1;transition-delay:.01s} }

.hover[data-underline-anime-root] [data-underline-anime-target]:before{transform:scaleX(0) translateZ(0);transition-delay:0s}

.hover[data-underline-anime-root] [data-underline-anime-target]:after{transform:scaleX(1);transition-delay:.2s}

[data-push-icon-root] :where([data-push-icon-target]){display:grid;flex-shrink:0;overflow:hidden}

[data-push-icon-root] :where(.icon-base){grid-row:-1/1;grid-column:-1/1}

[data-push-icon-root] :where([data-push-icon-target=right]) .icon-base:first-child{translate:-100% 0;opacity:0}

[data-push-icon-root] :where([data-push-icon-target=right]) .icon-base:last-child{translate:0 0;opacity:1}

[data-push-icon-root] :where([data-push-icon-target=down]) :where(.icon-base):first-child{translate:0 -100%;opacity:0}

[data-push-icon-root] :where([data-push-icon-target=down]) :where(.icon-base):last-child{translate:0 0;opacity:1}

[data-push-icon-root] :where([data-push-icon-target=left]) .icon-base:first-child{translate:100% 0;opacity:0}

[data-push-icon-root] :where([data-push-icon-target=left]) .icon-base:last-child{translate:0 0;opacity:1}

@media (any-hover: hover) { [data-push-icon-root] :where(.icon-base){transition-duration:var(--duration-800);transition-property:translate,opacity;transition-timing-function:var(--easing-2),var(--easing-0)} }

@media (any-hover: hover) { [data-push-icon-root]:hover :where([data-push-icon-target=right]) .icon-base:first-child{translate:0 0;opacity:1} }

@media (any-hover: hover) { [data-push-icon-root]:hover :where([data-push-icon-target=right]) .icon-base:last-child{translate:100% 0;opacity:0} }

@media (any-hover: hover) { [data-push-icon-root]:hover :where([data-push-icon-target=down]) .icon-base:first-child{translate:0 0;opacity:1} }

@media (any-hover: hover) { [data-push-icon-root]:hover :where([data-push-icon-target=down]) .icon-base:last-child{translate:0 100%;opacity:0} }

@media (any-hover: hover) { [data-push-icon-root]:hover :where([data-push-icon-target=left]) .icon-base:first-child{translate:0 0;opacity:1} }

@media (any-hover: hover) { [data-push-icon-root]:hover :where([data-push-icon-target=left]) .icon-base:last-child{translate:-100% 0;opacity:0} }

.list-link.-link-behavior--navigation:where([data-component-id=nqdzjf]) .list-link__item.-current [data-underline-anime-target]:after{transform:scaleX(1)!important;opacity:1!important}

.arrow-slide-in:where([data-component-id=dvyslz]){flex-shrink:0;box-sizing:content-box;padding-right:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:calc(var(--slide-in-arrow-size, 16) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));overflow:hidden;color:var(--color-oki-red)}

.arrow-slide-in:where([data-component-id=dvyslz]) .arrow-slide-in-inner{display:flex;position:relative;justify-content:center;align-items:center}

.arrow-slide-in:where([data-component-id=dvyslz]) .arrow-slide-in__icon{aspect-ratio:1/1;width:100%;height:100%}

.arrow-slide-in:where([data-component-id=dvyslz]) .arrow-slide-in__icon.-arrow-1{position:absolute;transform:translate(0);transition:transform .4s var(--easing-2),opacity .5s .2s var(--easing-1)}

.arrow-slide-in:where([data-component-id=dvyslz]) .arrow-slide-in__icon.-arrow-2{transform:translate(-250%);opacity:0;transition:transform .5s var(--easing-2),opacity .1s var(--easing-1)}

[data-arrow-slide-in-anime-root]:hover .arrow-slide-in__icon.-arrow-1,[data-arrow-slide-in-anime-root]:focus .arrow-slide-in__icon.-arrow-1{transform:translate(120%);opacity:0;transition:transform .4s var(--easing-2),opacity .3s var(--easing-1)}

[data-arrow-slide-in-anime-root]:hover .arrow-slide-in__icon.-arrow-2,[data-arrow-slide-in-anime-root]:focus .arrow-slide-in__icon.-arrow-2{transform:translate(0);opacity:1;transition:transform .5s 0s var(--easing-2),opacity .3s 0s var(--easing-1);transition-delay:.1s}

.block-related-products:where([data-component-id="9v2lNn"]) .underline-anime[data-underline-anime-target]{top:0}

.block-teaser-nav:where([data-component-id=h65q7U]) .underline-anime{top:0}

.block-toc-base:where([data-component-id=g8dwBg]) .underline-anime{top:0}

.investors-hero-link-item:where([data-component-id=z9rWXE]) [data-underline-anime-target]{top:0}

.investors-hero-link-item:where([data-component-id=z9rWXE]) [data-underline-anime-target]:before{background-color:var(--color-oki-line-gray-light-0-5)}

.investors-hero-link-item:where([data-component-id=z9rWXE]) [data-underline-anime-target]:after{background-color:var(--color-oki-line-gray)}

.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_underline[data-underline-anime-target]{top:0;bottom:auto}

.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_underline[data-underline-anime-target]:before{transform:scaleX(1);background-color:#e6e6e666}

.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_underline[data-underline-anime-target]:after{background-color:#e6e6e6}

/* ==========================================================================
   17 ボタン — button-base / button-square
   ========================================================================== */
/* .button-base / .buttonBase__icon--* は【トップと同一】。全 51 規則は oki/rules/button-base.css に既出なので
   ここでは繰り返さない。下層で使うのは -size-md（padding 16/23/16/21・角丸 5px・地 --color-oki-red2）。
   下層にしか出てこないのは次の button-square（事業ページの Swiper の送り）だけ。 */

.button-square:where([data-component-id=t25RuN]){--button-base-font-size: 12;--button-base-color-text: var(--color-oki-white);--button-base-color-bg: var(--color-oki-red2);--button-base-color-border: transparent;display:inline-grid;align-content:center;justify-content:center;place-content:center;transition-duration:var(--duration-300);transition-property:background-color,color,border-color;transition-timing-function:var(--easing-0);border:1px solid var(--button-base-color-border);border-radius:calc(5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--button-base-color-bg);width:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--button-base-color-text);line-height:100%}

.button-square:where([data-component-id=t25RuN])>span{grid-row:-1/1;grid-column:-1/1}

@media (min-width: 1024px) { .button-square:where([data-component-id=t25RuN]){width:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.button-square:where([data-component-id=t25RuN]):where([data-variant=primary]){--button-base-color-bg: var(--color-oki-red2);--button-base-color-border: var(--color-oki-red2)}

.button-square:where([data-component-id=t25RuN]):where([data-variant=hollow]){--button-base-color-bg: transparent}

.button-square[data-hollow-style=white]:where([data-component-id=t25RuN]):where([data-variant=hollow]){--button-base-color-border: rgba(255, 255, 255, .3);--button-base-color-text: var(--color-oki-white)}

.button-square[data-hollow-style=lightGray]:where([data-component-id=t25RuN]):where([data-variant=hollow]){--button-base-color-border: color-mix( in srgb, var(--color-oki-gray) 50%, transparent );--button-base-color-text: color-mix( in srgb, var(--color-oki-gray) 50%, transparent )}

@media (any-hover: hover) { .button-square:where([data-component-id=t25RuN]):where([data-variant=hollow]):hover{--button-base-color-border: rgba(255, 255, 255, .7)} }

@media (any-hover: hover) { .button-square[data-hollow-style=lightGray]:where([data-component-id=t25RuN]):where([data-variant=hollow]){--button-base-color-border: color-mix( in srgb, var(--color-oki-gray) 50%, transparent )} }

.button-square:where([data-component-id=t25RuN]):where([data-disabled]){cursor:default;pointer-events:none}

.button-square:where([data-component-id=t25RuN]):disabled{cursor:default;pointer-events:none}

.button-square:where([data-component-id=t25RuN]){--initial-opacity: 0;--active-translate: 0;--active-opacity: 1}

.button-square:where([data-component-id=t25RuN])>span{transform-origin:center;transition-duration:var(--duration-300);transition-property:transform,opacity;transition-timing-function:var(--easing-2),var(--easing-0)}

.button-square[data-icon-direction=left]:where([data-component-id=t25RuN]){--initial-translate: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.button-square[data-icon-direction=right]:where([data-component-id=t25RuN]){--initial-translate: calc(-15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

.button-square:where([data-component-id=t25RuN]) .before{transform:translate(var(--initial-translate));opacity:var(--initial-opacity)}

.button-square:where([data-component-id=t25RuN]) .after{transform:translate(var(--active-translate));opacity:var(--active-opacity)}

@media (any-hover: hover) { .button-square:where([data-component-id=t25RuN]):hover .before{transform:translate(var(--active-translate));opacity:var(--active-opacity)} }

@media (any-hover: hover) { .button-square:where([data-component-id=t25RuN]):hover .after{transform:translate(calc(var(--initial-translate) * -1));opacity:var(--initial-opacity)} }

/* ==========================================================================
   18 文字の階段 — t-headline / t-label / t-paragraph / t-text
   ========================================================================== */
.t-text-default{color:var(--color-oki-black2)}

.t-text-muted{color:var(--theme-text-muted)}

.t-text-primary{color:var(--color-oki-red)}

.t-text-news-title-s{font-weight:670;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2}

@media (min-width: 1024px) { .t-text-news-title-s{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-text-news-title-s{font-style:normal;font-weight:700;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-family:"Noto Sans JP", system-ui, sans-serif}

@media (min-width: 1024px) { html[lang=ja] .t-text-news-title-s{font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-text-news-title{font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2}

@media (min-width: 1024px) { .t-text-news-title{font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-text-news-title{font-style:normal;font-weight:700;font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:130%;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-text-news-title{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-text-date{margin-right:calc(var(--column-unit) * 1);margin-bottom:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-gray2);font-weight:570;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1;letter-spacing:0em;text-align:right}

@media (min-width: 1024px) { .t-text-date{margin-right:auto;margin-left:auto;width:100%;max-width:calc(var(--column-unit) * var(--block-content-dence))} }

.t-headline-3xl{font-weight:790;font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-3xl{font-size:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-3xl{font-weight:800;font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-3xl{font-size:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(1.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-5xl{font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:790;line-height:120%;letter-spacing:calc(-1.12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { .t-headline-5xl{font-size:calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-5xl{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:800;line-height:140%;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.96 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-5xl{font-size:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-2xl{font-weight:790;font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-2xl{font-size:calc(46 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-2xl{font-weight:800;font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-2xl{font-size:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(1.26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-xl{font-weight:790;font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-xl{font-size:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-xl{font-weight:800;font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.72 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-xl{font-size:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:calc(1.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-lg{font-weight:790;font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.15;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-lg{font-size:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-lg{font-weight:800;font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-lg{font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-md{font-weight:790;font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-md{font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-md{font-weight:800;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-md{font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-sm{font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-sm{font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-sm{font-weight:800;font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-sm{font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-xs{font-weight:790;font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-xs{font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3} }

html[lang=ja] .t-headline-xs{font-weight:800;font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.72 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-xs{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-2xs{font-weight:790;font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-2xs{font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-2xs{font-weight:800;font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.72 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-2xs{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-3xs{font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-3xs{font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-3xs{font-weight:800;font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-3xs{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-4xs{font-weight:790;font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-4xs{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-4xs{font-weight:800;font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.51 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-4xs{font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-headline-5xs{font-weight:790;font-size:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-headline-5xs{font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-headline-5xs{font-weight:800;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-headline-5xs{font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-xl{font-weight:790;font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-paragraph-xl{font-size:calc(52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-xl{font-weight:800;font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.72 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-xl{font-size:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(1.26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-lg{font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-lg{font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3} }

html[lang=ja] .t-paragraph-lg{font-weight:700;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-lg{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-2lg{font-weight:790;font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-2lg{font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3} }

html[lang=ja] .t-paragraph-2lg{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:.03em}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-2lg{font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-md{font-weight:570;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-md{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-md{font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.6;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-md{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.7;letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-sm{font-weight:570;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-sm{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.5} }

html[lang=ja] .t-paragraph-sm{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.6;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-sm{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.5;letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-xs{font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-xs{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-xs{font-weight:700;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-xs{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-2xs{font-weight:570;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-2xs{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-2xs{font-weight:570;font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.5;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-2xs{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-3xs{font-weight:570;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-3xs{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-3xs{font-weight:600;font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.5;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-3xs{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-4xs{font-weight:570;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-4xs{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-4xs{font-weight:700;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-4xs{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-5xs{font-weight:570;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-paragraph-5xs{font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-5xs{font-weight:600;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.6;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-5xs{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-paragraph-6xs{font-weight:570;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:.03em}

@media (min-width: 1024px) { .t-paragraph-6xs{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-paragraph-6xs{font-weight:570;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.5;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-paragraph-6xs{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-7xl{font-weight:790;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-label-7xl{font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-7xl{font-weight:800;font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-7xl{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-6xl{font-weight:670;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-label-6xl{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-6xl{font-weight:700;font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-6xl{font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-5xl{font-weight:790;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1;letter-spacing:0em}

@media (min-width: 1024px) { .t-label-5xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-5xl{font-weight:800;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.4;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-5xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-4xl{font-weight:790;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.02em}

@media (min-width: 1024px) { .t-label-4xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-4xl{font-weight:670;font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-4xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-3xl{font-weight:790;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-label-3xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-3xl{font-weight:800;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-3xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-2xl{font-weight:670;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;letter-spacing:-.01em}

@media (min-width: 1024px) { .t-label-2xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-2xl{font-weight:700;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-2xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-xl{font-weight:790;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;letter-spacing:0em}

@media (min-width: 1024px) { .t-label-xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-xl{font-weight:800;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.3;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-xl{font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-lg{font-weight:790;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1;letter-spacing:0em}

@media (min-width: 1024px) { .t-label-lg{font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-lg{font-weight:800;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-lg{font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-md{font-weight:790;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;letter-spacing:0em}

@media (min-width: 1024px) { .t-label-md{font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-md{font-weight:800;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.2;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-md{font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));letter-spacing:calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.t-label-sm{font-weight:670;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1;letter-spacing:0em}

@media (min-width: 1024px) { .t-label-sm{font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] .t-label-sm{font-weight:700;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1;font-family:"Noto Sans JP", system-ui, sans-serif;letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] .t-label-sm{font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label)){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:570;line-height:140%;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label)){font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;line-height:150%;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label):has(+.list-link__description)){font-family:"Noto Sans JP", system-ui, sans-serif;font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:790;line-height:140%;letter-spacing:calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))}

@media (min-width: 1024px) { html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.list-link:where([data-component-id=nqdzjf]) .list-link__label):has(+.list-link__description)){font-size:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;line-height:140%;letter-spacing:calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

:where(.block-callout-base) .block-table-wrapper:where([data-component-id=quaGQt]) .t-text-date{margin-right:0}

html[lang=ja] :is(.list-link__label .t-paragraph-lg:is(.sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item)){font-family:"Noto Sans JP", system-ui, sans-serif;font-weight:790}

@media (max-width: 1023.98px) { html[lang=ja] :is(.list-link__label .t-paragraph-lg:is(.sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item)){font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

.list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id=nqdzjf] .list-link__label){margin-right:calc(var(--column-unit) * 2);font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-weight:800;-webkit-line-clamp:3}

@media (min-width: 1024px) { .list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id=nqdzjf] .list-link__label){font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

html[lang=ja] :is(.list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id=nqdzjf] .list-link__label)){font-family:"Noto Sans JP", system-ui, sans-serif;font-weight:790}

@media (min-width: 1024px) { .block-bg-image-base:where([data-component-id="8xsB9u"]) .block-bg-image-base__content .block-paragraph-base .t-paragraph-6xs{margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }

@media (min-width: 1024px) { .block-bg-image-base:where([data-component-id="8xsB9u"]) .block-bg-image-base__content .t-headline-5xs{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} }


/* ==========================================================================
   §5  OKI form.css の B系だけ — 新 SaaS フォーム（contact.oki.com）
   ========================================================================== */


/* B-0 の変数。form.css は値を**コメントで**しか持っていない（実測値）ので、
   var() が解決できるようにここで宣言する。値はそのコメントのまま。
   OKI の変数（--color-oki-*）ではないので青には置き換えない。 */
.synergy-nform-root{
  --color-submit-button-background: #4D4D51;
  --color-submit-button-font: #FFFFFF;
  --color-title-background: #4D4D51;
  --color-title-font: #FFFFFF;
  --color-property-title-font: #4D4D51;
  --color-background: #FFFFFF;
  --color-form-background: #FFFFFF;
}

/* B-1 の「…上と同じ宣言…」を展開したもの。form.css は select と textarea の共通部分を
   コメントで省略している（原文の実測は select 976×38 / textarea 976×112 で、
   どちらも入力欄と同じ地・枠・角丸・幅を持つ）。書かないとこの 2 つだけ素の見た目になり、
   **入力欄だけ幅が揃わない**（実測 375px で textarea 180px / select 150px）。
   宣言は .TextName--Input のものをそのまま写した。差分（padding-right:30px /
   padding:7px 16px / height:112px / line-height:1.5）は原文の 2 本が**この後で**上書きする。 */
.SingleSelectionPulldown--Select,
.TextMultiLine--Textarea {
  -webkit-appearance: none;
  font-size: 16px;
  padding: 10px 16px;
  outline: none;
  display: block;
  background: #fff;
  border: 1px solid;
  border-color: #d3d3d4;
  border-radius: 4px;
  width: 100%;
  color: #4d4d51;
  -webkit-transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;
}
/* ============================================================================
 * B系 — 新 SaaS フォーム（contact.oki.com / Synergy! nform）
 * OKI が新しく作った窓口はこちら。A系とは別物で、こちらは現代的な作り。
 * 規則は assets.s.msgs.jp/n/form/css/style.css の原文（ベンダー製）。
 * ============================================================================ */

/* --- B-0. 土台と配色の変数（OKI が入れている値・実測） ----------------------
 *   --color-submit-button-background : #4D4D51
 *   --color-submit-button-font       : #FFFFFF
 *   --color-title-background         : #4D4D51
 *   --color-title-font               : #FFFFFF
 *   --color-property-title-font      : #4D4D51
 *   --color-background / --color-form-background : #FFFFFF
 * 26176_js_template.css（OKI の上書き）は書体とヘッダー/フッターだけ:
 *   body { font-family: "Noto Sans JP", sans-serif !important; }
 *   #JS--HeaderTemplate--Wrapper { max-width:1024px; margin:0 auto; padding:29px 0 0; }
 */

.synergy-nform-root *, .synergy-nform-root ::before, .synergy-nform-root ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.synergy-nform-root button, .synergy-nform-root input, .synergy-nform-root select, .synergy-nform-root textarea {
  font-family: inherit;
}
.Frame--ContentWrapper {
  padding: 0 12px;
}
.Input--Title {
  color: var(--color-title-font);
  background-color: var(--color-title-background);
  line-height: 1.5;
  font-weight: normal;
  word-break: break-all;
}
@media (min-width: 576px) {
.Input--Title {
  padding: 18px 24px;
  font-size: 24px;
}
}

/* --- B-1. 入力欄（実測 484 × 46px / 角丸 4px / 枠 1px #d3d3d4 / 16px Noto Sans JP）
 * 種別ごとにクラス名は違うが（TextName-- / TextSingleLine-- / TextZipCode-- …）
 * 中身の宣言は完全に同じ。select と textarea だけ差分がある。 */

.TextName--Input {
  -webkit-appearance: none;
  font-size: 16px;
  padding: 10px 16px;
  outline: none;
  display: block;
  background: #fff;
  border: 1px solid;
  border-color: #d3d3d4;
  border-radius: 4px;
  width: 100%;
  color: #4d4d51;
  -webkit-transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;
}
/* select は右に矢印ぶんの余白（実測 976 × 38px） */
.SingleSelectionPulldown--Select {
  /* …上と同じ宣言… */
  padding-right: 30px;
}
/* textarea（実測 976 × 112px） */
.TextMultiLine--Textarea {
  /* …上と同じ宣言。ただし padding は 7px 16px… */
  padding: 7px 16px;
  height: 112px;
  line-height: 1.5;
}

/* --- B-2. 焦点（実測: 枠が青に変わり、外に 2px の光の輪） ------------------- */
.TextName--Input:focus {
  background-color: #fff;
  border-color: #0f80e9;
  box-shadow: 0px 0px 0px 2px rgba(15, 128, 233, 0.5);
}
.SingleSelectionPulldown--Select:focus {
  background-color: #fff;
  border-color: #0f80e9;
  box-shadow: 0px 0px 0px 2px rgba(15, 128, 233, 0.5);
}

/* --- B-3. ラベルと必須バッジ（実測 バッジ 32px 幅 / 12px bold 白 / 地 #e84b35） */
.TextName--FieldHeading {
  line-height: 1.7;
  font-weight: bold;
  font-size: 16px;
  display: block;
  word-break: break-all;
}
.Input--RequiredLabel {
  width: 32px;
  font-size: 12px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  text-align: center;
  padding: 4px;
  line-height: 1;
  background-color: rgb(232, 75, 53);
  border-radius: 4px;
  white-space: nowrap;
}

/* --- B-4. エラー（空のまま「確認」を押して実際に出したもの） -----------------
 * 入力欄は aria-invalid="true" が付き、枠 #e84b35・地 #ffedeb に変わる。
 * 焦点が当たると輪だけ赤に変わって地は白へ戻る。
 * 一文は入力欄の「下」に role="alert" 付きで出る（実測 高さ 20.4px、余白 4px）。
 * 表の上に GlobalError の要約も出る（実測 976 × 57.8px、下余白 24px）。 */
.TextName--Input[aria-invalid="true"] {
  background: rgb(255, 237, 235);
  border: 1px solid rgb(232, 75, 53);
}
.TextName--Input[aria-invalid="true"]:focus {
  background-color: rgb(255, 255, 255);
  border-color: rgb(232, 75, 53);
  box-shadow: rgba(232, 75, 53, 0.5) 0px 0px 0px 2px;
}
.ItemError {
  margin-top: 4px;
}
.GlobalError {
  margin-bottom: 24px;
}

/* マークアップ（原文）
<div class="TextName--ErrorMessage-PropertyInputWrapper">
<div role="alert" data-nform-error-type="field" id="input_item_2__error" class="ItemError" data-nform-error-property-id="…"><ul><li><div class="errorIcon"></div><div>「お名前」を入力してください。</div></li></ul></div>
</div>                                                                    */

/* --- B-5. 送信ボタン（実測 544 × 59.2px / 角丸 4px / 地 #4D4D51 / 白 16px） --- */
.Submissions--Submission__Next {
  -webkit-appearance: none;
  border: none;
  text-align: center;
  border-radius: 4px;
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  cursor: pointer;
  min-height: 56px;
  line-height: 1.7;
  color: var(--color-submit-button-font, #fff);
  background-color: var(--color-submit-button-background);
  font-size: 16px;
  max-width: 100%;
}
@media (min-width: 576px) {
.Submissions--Submission__Next {
  padding: 16px 96px;
}
}
@media (hover: hover) {
.Submissions--Submission__Next:hover {
  opacity: 0.6;
}
}


/* ==========================================================================
   §6  OKI edge.css — 検索結果・0 件・404・サイトマップ
   ========================================================================== */

/* OKI 下層の周辺ページ — 実際に効いている規則を原文のまま。
 *
 * 取得元（すべて実際に開いた）:
 *   404       https://www.oki.com/global/ja/this-page-does-not-exist/   （HTTP 404 / html lang="en"）
 *   サイトマップ https://www.oki.com/global/ja/sitemap/                    （html lang="ja"）
 *   検索 有り   https://www.oki.com/global/ja/search-results/?query=AI&category=3        （634 件）
 *   検索 0 件   https://www.oki.com/global/ja/search-results/?query=zzqqxxvv999abc&category=3  （0 件）
 *
 * 1440x1000 の headless Chrome / CDP。document.styleSheets を歩いて cssText をそのまま取った。
 * 触ったのは :where([data-component-id=…]) を外したところだけ（特異度 0 なので効き方は変わらない）。
 * ● = この 4 ページのどれかで実際に当たっていた規則。印の無いものは書かれているが当たっていない。
 *
 * 区切りは 1024px。 (max-width:1023.98px) が無印＝スマホ、 (min-width:1024px) が PC。
 * 検索ウィジェットだけ別世代（cmn_2020）で 736px / 1231px の区切りを持つ。
 *
 * 色は OKI の赤 #ff0000 / #e90000 のまま置いてある。写すときは
 *   --color-oki-red:#003678 / --color-oki-red2:#001f45 に入れ替える。
 * 和文書体は Saans-bold, MFW-YuGoStdN-ExtraBold（森澤・買わないと使えない）。
 *   写すときは "Noto Sans JP", system-ui, sans-serif に置き換える。
 */

/* ==================================================================
   01 土台トークン（列と最大幅）   (7 本)
   ================================================================== */
/*●*/ .t-container { padding-right: calc(var(--column-unit) * 1); padding-left: calc(var(--column-unit) * 1); }
/*●*/ .max-width--dence { margin-right: auto; margin-left: auto; }
/*●*/ .header .t-container { display: flex; justify-content: space-between; align-items: center; padding-top: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .header .t-container[data-header-type="dynamic"] { transform: translateY(calc((var(--header-size)) * var(--scroll-direction))); opacity: calc(1 - var(--scroll-direction) * -1); transition-duration: var(--duration-500); transition-property: opacity, transform; transition-timing-function: var(--easing-0),var(--easing-2); }

@media (min-width: 1024px) {
  /*●*/ .t-container { padding-right: calc(var(--column-unit) * 2); padding-left: calc(var(--column-unit) * 2); }
  /*●*/ .max-width--dence { max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /*●*/ .header .t-container { padding-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: auto; }
}

/* ==================================================================
   02 文字の段階（en と html[lang=ja] の 2 本立て。この 4 ページが使う札だけ）   (36 本)
   ================================================================== */
/* */ .t-text-news-title-s { font-weight: 670; font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.2; }
/* */ html[lang="ja"] .t-text-news-title-s { font-style: normal; font-weight: 700; font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-family:"Noto Sans JP", system-ui, sans-serif; }
/* */ .t-text-news-title { font-weight: 670; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.2; }
/* */ html[lang="ja"] .t-text-news-title { font-style: normal; font-weight: 700; font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 130%; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .t-headline-3xl { font-weight: 790; font-size: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.1; letter-spacing: -0.02em; }
/*●*/ html[lang="ja"] .t-headline-3xl { font-weight: 800; font-size: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.3; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .t-headline-md { font-weight: 790; font-size: calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.2; letter-spacing: -0.02em; }
/* */ html[lang="ja"] .t-headline-md { font-weight: 800; font-size: calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.4; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.66 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .t-headline-xs { font-weight: 790; font-size: calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.1; letter-spacing: -0.02em; }
/*●*/ html[lang="ja"] .t-headline-xs { font-weight: 800; font-size: calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.4; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.72 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .t-paragraph-md { font-weight: 570; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.4; letter-spacing: -0.01em; }
/* */ html[lang="ja"] .t-paragraph-md { font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.6; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .t-paragraph-2xs { font-weight: 570; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.3; letter-spacing: -0.01em; }
/* */ html[lang="ja"] .t-paragraph-2xs { font-weight: 570; font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.5; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .t-paragraph-4xs { font-weight: 570; font-size: calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.4; letter-spacing: -0.01em; }
/* */ html[lang="ja"] .t-paragraph-4xs { font-weight: 700; font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.4; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .t-label-md { font-weight: 790; font-size: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.2; letter-spacing: 0em; }
/*●*/ html[lang="ja"] .t-label-md { font-weight: 800; font-size: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.2; font-family:"Noto Sans JP", system-ui, sans-serif; letter-spacing: calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }

@media (min-width: 1024px) {
  /* */ .t-text-news-title-s { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] .t-text-news-title-s { font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .t-text-news-title { font-size: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] .t-text-news-title { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .t-headline-3xl { font-size: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ html[lang="ja"] .t-headline-3xl { font-size: calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); letter-spacing: calc(1.2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .t-headline-md { font-size: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] .t-headline-md { font-size: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); letter-spacing: calc(1.08 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .t-headline-xs { font-size: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.3; }
  /*●*/ html[lang="ja"] .t-headline-xs { font-size: calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.3; letter-spacing: calc(.78 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .t-paragraph-md { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] .t-paragraph-md { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.7; letter-spacing: calc(.54 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .t-paragraph-2xs { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] .t-paragraph-2xs { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); letter-spacing: calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .t-paragraph-4xs { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] .t-paragraph-4xs { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); letter-spacing: calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .t-label-md { font-size: calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ html[lang="ja"] .t-label-md { font-size: calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); letter-spacing: calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   03 下層ページの器 container-block   (72 本)
   ================================================================== */
/*●*/ .container-block { --block-margin-default-sp: 50; --block-margin-default-pc: 80; --block-margin-sidenav-sp: 70; --block-margin-sidenav-pc: 130; }
/* */ .container-block.-has-side .main > :where(* + *) { margin-top: calc(var(--block-margin-sidenav-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block:not(.-has-side) .main > :where(* + *) { margin-top: calc(var(--block-margin-default-sp) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .container-block .header { margin-top: calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block .desktop\:max-w-col-30 { margin-right: auto; margin-left: auto; max-width: calc(var(--column-unit) * 20); }
/* */ .container-block .button-layout-grid { display: flex; flex-wrap: wrap; gap: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block .container-block__button-mt { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) !important; }
/*●*/ .container-block .body { grid-template-columns: minmax(100%, 1fr); margin-top: calc(45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .container-block .body:has(.side) { display: grid; position: relative; grid-template-areas: "main" "side"; }
/* */ .container-block .footer > :first-child { margin-top: 0px !important; }
/*●*/ .container-block .footer:has(*) { margin-top: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block .side { grid-area: side; align-self: start; }
/*●*/ .container-block .main { grid-area: main; }
/* */ .container-block .main > :first-child { margin-top: 0px !important; }
/*●*/ .container-block .main .block-paragraph-base + * { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .container-block .main * + .block-paragraph-base { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block .main .block-paragraph-base + h2 { margin-top: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block .main .button--back-to-page { margin-top: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); text-align: center; }
/* */ .container-block .main .block-heading-base + .block-colorized-table { margin-top: calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block .main .block-media-rounded { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h1.block-heading-base + * { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .container-block h2.block-heading-base + * { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h1.block-heading-base + .block-paragraph-display { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h2.block-heading-base + .block-paragraph-display { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h3.block-heading-base { margin-top: calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h3.block-heading-base + * { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h4.block-heading-base + h3 { margin-top: calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h4.block-heading-base + * { margin-top: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h5.block-heading-base + * { margin-top: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h6.block-heading-base + * { margin-top: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h4.block-heading-base + .list-link { margin-top: calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h5.block-heading-base + .list-link { margin-top: calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .container-block h6.block-heading-base + .list-link { margin-top: calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }

@media (max-width: 1023.98px) {
  /* */ .container-block .side { margin-top: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .container-block .main .list-link { padding-right: calc(var(--column-unit) * 1); padding-left: calc(var(--column-unit) * 1); }
  /*●*/ .container-block .main .list-link.-column-link-set .list-link__label.line-clamp-2 { display: block; }
  /* */ .container-block h1.block-heading-base { margin-top: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .container-block h2.block-heading-base { margin-top: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

@media (min-width: 1024px) {
  /* */ .container-block.-has-side .main > :where(* + *) { margin-top: calc(var(--block-margin-sidenav-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block:not(.-has-side) .main > :where(* + *) { margin-top: calc(var(--block-margin-default-pc) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .desktop\:max-w-col-30 { max-width: calc(var(--column-unit) * 30); }
  /* */ .container-block .button-layout-grid { gap: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .container-block__button-mt { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) !important; }
  /*●*/ .container-block .body { margin-top: calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .container-block .body:has(.side) { grid-template-columns: calc(var(--column-unit) * 9) 1fr; grid-template-areas: "side main"; column-gap: calc(var(--column-unit) * 5); }
  /*●*/ .container-block .footer:has(*) { margin-top: calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .side { position: sticky; top: calc(calc(var(--column-unit) * 1) + var(--header-size)); left: 0px; transition: top var(--duration-300) var(--easing-2); }
  /* */ .container-block .main .block-toc-base + h1.block-heading-base { margin-top: calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .main .block-toc-base + h2.block-heading-base { margin-top: calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .container-block .main .block-paragraph-base + * { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .container-block .main * + .block-paragraph-base { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .main .block-paragraph-base + h2 { margin-top: calc(130 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .main .button--back-to-page { margin-top: calc(125 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .main .block-heading-base + .block-media-rounded { margin-top: calc(62 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .main .block-heading-base + .block-colorized-table { margin-top: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block .main .block-media-rounded { margin-top: calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h1.block-heading-base + * { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .container-block h2.block-heading-base + * { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h1.block-heading-base + .block-paragraph-display { margin-top: calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h2.block-heading-base + .block-paragraph-display { margin-top: calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h3.block-heading-base { margin-top: calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h3.block-heading-base + * { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h4.block-heading-base + h3 { margin-top: calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h4.block-heading-base + .list-link { margin-top: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h5.block-heading-base + .list-link { margin-top: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .container-block h6.block-heading-base + .list-link { margin-top: calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ body:has(.notification-base[data-status="shown"]) .container-block .side { top: calc(calc(var(--column-unit) * 2) + var(--header-size)); }
  /*●*/ .container-block .main .list-link { margin-right: auto; margin-left: auto; max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /* */ .container-block.-has-side .body .block-heading-base[data-size="regular"] { max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /* */ .container-block.-has-side .body .block-heading-base[data-size="wide"] { max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /* */ .container-block.-has-side .body .block-layout-2column { max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /* */ .container-block.-has-side .body :is(.block-link-width-image-title .block-link-width-image-title__link) { grid-template-columns: calc(var(--column-unit) * 6) calc(201 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   04 ページ見出し block-title-base   (15 本)
   ================================================================== */
/*●*/ .block-title-base.page-name { margin-top: calc(var(--page-name-mt) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .block-title-base .title { position: relative; padding-left: calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .block-title-base .title .deco-dot { position: absolute; top: 0.2em; left: 0px; }
/*●*/ .block-title-base .bar { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); border-bottom: 1px solid var(--color-oki-black2); }
/*●*/ .block-title-base .breadcrumbs { margin-top: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .block-title-base .block-title-base__decodot { position: absolute; top: calc(7 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); left: calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .block-title-base [data-toggle-show-content-yoko] { position: relative !important; }
/* */ .block-title-base .content_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-top: calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-bottom: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left: calc(var(--column-unit) * 1.5); }
/* */ .block-title-base .category { border: 1px solid var(--color-oki-gray5); border-radius: 9999px; background: var(--color-oki-gray3); padding: 0.2em 0.9em; font-weight: 670; font-size: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; }

@media (min-width: 1024px) {
  /*●*/ .block-title-base .title { padding-right: calc(var(--column-unit) * 1); padding-left: calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .block-title-base .bar { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .block-title-base .block-title-base__decodot { top: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); left: calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-title-base .content_wrap { gap: calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-top: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-bottom: calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left: calc(var(--column-unit) * 1.2); }
  /* */ .block-title-base .category { font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-title-base .data.data { font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   05 パンくず breadcrumbs-base   (14 本)
   ================================================================== */
/*●*/ .breadcrumbs-base .list { display: flex; column-gap: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); justify-content: end; }
/* */ html[lang="ja"] :is(.breadcrumbs-base .list) { font-family:"Noto Sans JP", system-ui, sans-serif; }
/*●*/ .breadcrumbs-base .breadcrumbs-base-item { display: flex; column-gap: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); align-items: center; }
/*●*/ .breadcrumbs-base .breadcrumbs-base-item:first-child .deco-dot { display: none; }
/*●*/ .breadcrumbs-base .deco-dot { position: relative; top: -0.05em; box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 40px; border-radius: 1px; }
/*●*/ .breadcrumbs-base .label { font-weight: 670; font-size: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 130%; letter-spacing: -0.01em; }
/*●*/ .breadcrumbs-base .label:link, .breadcrumbs-base .label:visited { color: var(--color-oki-gray); }
/*●*/ .breadcrumbs-base .label:any-link { color: var(--color-oki-gray); }
/* */ .hero-stage .breadcrumbs-base { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .hero-base .breadcrumbs { grid-area: breadcrumbs; }
/* */ .investors-hero .breadcrumbs { grid-area: breadcrumbs; align-self: center; }

@media (max-width: 1023.98px) {
  /* */ .hero-stage .breadcrumbs-base { display: none; }
  /* */ .hero-base .breadcrumbs { display: none; }
  /* */ .investors-hero .breadcrumbs { display: none; }
}

/* ==================================================================
   06 赤い点 deco-dot   (36 本)
   ================================================================== */
/*●*/ .deco-dot { display: block; width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); border-radius: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background: var(--color-oki-red); box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 40px; }
/*●*/ .deco-dot[data-size="lg"] { width: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .cta-contact .deco-dot { border-radius: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .heading-base .deco-dot { position: absolute; }
/* */ .heading-base[data-size="xs"] .deco-dot { position: relative; margin-bottom: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .heading-base[data-size="sm"] .deco-dot { top: 0.2lh; left: calc(var(--column-unit) * -.95); }
/* */ .heading-base[data-size="md"] .deco-dot { top: 0.2lh; left: calc(var(--column-unit) * -1); }
/* */ .heading-base[data-size="lg"] .deco-dot { top: 0.2lh; left: calc(var(--column-unit) * -1); }
/* */ .heading-base[data-size="xl"] .deco-dot { top: 0.25lh; left: calc(var(--column-unit) * -1.5); }
/* */ .list-link .list-link__title.block-heading-base .deco-dot { position: absolute; top: 0.3em; left: 0px; }
/* */ h1.block-heading-base .deco-dot { left: calc(var(--column-unit) * -1); }
/*●*/ h2.block-heading-base .deco-dot { left: calc(var(--column-unit) * -1); }
/* */ h3.block-heading-base .deco-dot { display: none; }
/* */ h4.block-heading-base .deco-dot { opacity: 0.5; }
/* */ h5.block-heading-base .deco-dot { opacity: 0.5; }
/* */ h6.block-heading-base .deco-dot { opacity: 0.5; }
/*●*/ .block-heading-base .deco-dot { position: absolute; top: 0.2125em; }
/* */ .page-our-business .section-lead .heading-base .deco-dot { display: none; }
/* */ #group-body .group-body__region-heading .deco-dot { width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ #group-body .group-body__country-heading .deco-dot { background-color: var(--color-oki-red3); width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .home-business-segment .home-business-segment__list_title .deco-dot { position: absolute; top: 0.25lh; left: calc(var(--column-unit) * -1); }
/* */ .home-business-segment .deco-dot, .home-business-segment .home-business-segment__image { transform: scale(1.06) translateZ(0px); opacity: 0; transition: all var(--duration-800) var(--easing-1); }
/* */ .home-business-segment .home-business-segment__list_item.hover .deco-dot { opacity: 1; transition-duration: var(--duration-300); }

@media (max-width: 1023.98px) {
  /* */ .heading-base[data-size="sm"] .deco-dot { width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .heading-base[data-size="md"] .deco-dot { width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .heading-base[data-size="lg"] .deco-dot { width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ h2.block-heading-base .deco-dot { top: 0.38em; }
}

@media (min-width: 1024px) {
  /*●*/ .deco-dot { border-radius: calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .deco-dot[data-size="lg"] { width: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .heading-base[data-size="xs"] .deco-dot { margin-bottom: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); width: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] :is(.heading-base[data-size="lg"] .deco-dot) { width: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ h4.block-heading-base .deco-dot { width: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ h5.block-heading-base .deco-dot { width: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ h6.block-heading-base .deco-dot { width: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ #group-body .group-body__region-heading .deco-dot { width: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ #group-body .group-body__country-heading .deco-dot { left: calc(-24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); width: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   07 節の見出し block-heading-base   (24 本)
   ================================================================== */
/* */ .list-link .list-link__title.block-heading-base { padding-left: 0.6em; max-width: none; margin-top: 0px !important; }
/*●*/ .block-heading-base { display: flex; position: relative; margin-right: auto; margin-left: auto; max-width: calc(var(--column-unit) * 20); }
/* */ h3.block-heading-base { color: var(--color-oki-black2); }
/* */ h4.block-heading-base, h5.block-heading-base, h6.block-heading-base { color: var(--color-oki-black2); text-indent: 1em; }
/* */ #news-page .pickup-area.has-ourpicks .ourpicks .block-heading-base { margin-top: 0px; margin-left: calc(var(--column-unit) * 1); color: var(--color-oki-white); }
/* */ .block-list-history .block-list-history__title .block-heading-base { margin-top: 0px !important; }
/* */ .block-image-sticky-layout .block-image-sticky-layout__body .block-heading-base { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .block-image-sticky-layout .block-image-sticky-layout__body .block-heading-base + .block-heading-base { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .block-image-sticky-layout .block-image-sticky-layout__body h4.block-heading-base { margin-left: calc(var(--column-unit) * -.7); }
/* */ .block-image-sticky-layout .block-image-sticky-layout__body .block-heading-base + .list-link { margin-top: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }

@media (min-width: 1024px) {
  /* */ .list-link .list-link__title.block-heading-base { padding-left: 1em; }
  /*●*/ .block-heading-base { max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /*●*/ .block-heading-base[data-size="dense"] { max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /* */ .block-heading-base[data-size="regular"] { max-width: calc(var(--column-unit) * var(--block-content-regular)); }
  /* */ .block-heading-base[data-size="wide"] { max-width: calc(var(--column-unit) * var(--block-content-wide)); }
  /* */ * + h1.block-heading-base { margin-top: calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ * + h2.block-heading-base { margin-top: calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-related-products .block-heading-base { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ #news-page .pickup-area.has-pickup .block-button-link-emphasized .block-heading-base { font-size: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ #news-page .pickup-area.has-ourpicks .block-button-link-emphasized .block-heading-base { font-size: calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ #news-page .pickup-area.has-pickup.has-ourpicks .block-button-link-emphasized .block-heading-base { font-size: calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-image-sticky-layout .block-image-sticky-layout__body .block-heading-base { margin-top: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-image-sticky-layout .block-image-sticky-layout__body .block-heading-base + .block-heading-base { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-image-sticky-layout .block-image-sticky-layout__body .block-heading-base + .list-link { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   08 本文 block-paragraph-base   (13 本)
   ================================================================== */
/*●*/ .block-paragraph-base { margin-right: auto; margin-left: auto; max-width: calc(var(--column-unit) * 20); color: var(--color-oki-black2); }
/* */ .block-paragraph-base > * + * { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .block-paragraph-base li { padding-left: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .block-paragraph-base li + li { margin-top: 0.6em; }
/* */ .block-paragraph-base ol li::before { content: counter(block-paragraph-base) ". " !important; font-size: 100% !important; }
/* */ .block-list-history .block-list-history__content .block-paragraph-base { margin-top: 0px; }
/* */ .block-bg-image-base .block-bg-image-base__content .block-paragraph-base { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }

@media (min-width: 1024px) {
  /*●*/ .block-paragraph-base { max-width: calc(var(--column-unit) * 30); }
  /* */ .block-paragraph-base > * + * { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-paragraph-base li { padding-left: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-paragraph-base li + li { margin-top: 1em; }
  /* */ .block-bg-image-base .block-bg-image-base__content .block-paragraph-base { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-bg-image-base .block-bg-image-base__content .block-paragraph-base .t-paragraph-6xs { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   09 リンクの列 list-link   (117 本)
   ================================================================== */
/*●*/ .list-link li:first-child .list-link__item { border-top: 1px solid var(--color-oki-gray5); }
/* */ .list-link li:first-child .list-link__item.-home-highlight-news { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
/* */ .list-link li:first-child .list-link__item.--overline { border-top-width: medium; border-top-style: none; border-top-color: currentcolor; }
/* */ .list-link .list-link__content_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-bottom: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); min-width: calc(var(--column-unit) * 5); }
/* */ .list-link__item.-news-page.-has-dateline :is(.list-link .list-link__content_wrap) { margin-bottom: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); min-width: calc(var(--column-unit) * 8); }
/* */ .list-link .list-link__category { border: 1px solid var(--color-oki-gray5); border-radius: 9999px; background-color: var(--color-oki-gray3); padding: 0.2em 0.9em; }
/*●*/ .list-link .list-link__item { display: flex; position: relative; flex-direction: column; align-items: flex-start; padding-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: 100%; }
/*●*/ .list-link .list-link__item.-narrow { padding-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link .list-link__item.-has-title { display: block; padding-bottom: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link .list-link__item.-news-page { padding-top: calc(27 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .list-link .list-link__label-arrow_wrap { display: flex; align-items: center; width: 100%; }
/*●*/ .list-link .list-link__label { margin-right: calc(var(--column-unit) * 1); }
/* */ .list-link__item.-has-title .line-clamp-2:is(.list-link .list-link__label) { display: block; margin-right: calc(var(--column-unit) * 0); }
/* */ html[lang="ja"] :is(.list-link__item .t-paragraph-lg:is(.list-link .list-link__label)) { font-family:"Noto Sans JP", system-ui, sans-serif; font-size: calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-style: normal; font-weight: 570; line-height: 140%; letter-spacing: calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ html[lang="ja"] :is(.list-link__item .t-paragraph-lg:is(.list-link .list-link__label):has(+ .list-link__description)) { font-family:"Noto Sans JP", system-ui, sans-serif; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-style: normal; font-weight: 790; line-height: 140%; letter-spacing: calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link .list-link__description { margin-top: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-right: calc(var(--column-unit) * 1); color: var(--color-oki-black2); }
/*●*/ .list-link .list-link__arrow { flex-shrink: 0; margin-left: auto; }
/*●*/ .list-link .list-link__arrow { color: var(--color-oki-red); }
/* */ .list-link .list-link__arrow.-pdf { width: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: auto; }
/* */ .list-link .list-link__arrow.-external { width: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: auto; }
/* */ .list-link__item.-has-title :is(.list-link .list-link__label_wrap) { margin-left: calc(var(--column-unit) * 1); }
/* */ .list-link.-link-behavior--navigation .list-link__item .list-link__label { opacity: 0.3; transition: opacity var(--duration-300) var(--easing-1); }
/* */ .list-link.-link-behavior--navigation .list-link__item.-current .list-link__label { opacity: 1; transition: opacity var(--duration-300) var(--easing-1); }
/* */ .list-link.-link-behavior--navigation .list-link__item.-current [data-underline-anime-target]::after { transform: scaleX(1) !important; opacity: 1 !important; }
/* */ .list-link .list-link__wysiwyg { font-weight: 570; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.4; }
/* */ .list-link .list-link__wysiwyg > :first-child { margin-top: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link .list-link__wysiwyg li { margin-left: calc(var(--column-unit) * 1); padding-left: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link .list-link__wysiwyg li + li { margin-top: 0.7em; }
/* */ .block-list-3-column-wrapper .block-list-3-column .block-list-3-column_title_wrap .list-link__arrow { margin-left: auto; }
/* */ #investors-ir-news .investors-ir-news__calendar-list .list-link__item { padding-top: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ #investors-ir-news .investors-ir-news__calendar-list .list-link__title { font-style: normal; font-weight: 670; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 120%; letter-spacing: -0.01em; }
/* */ #investors-ir-news .investors-ir-news__calendar-list .list-link__arrow { padding-right: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link li:first-child .list-link-ir-calendar__item { border-top: 1px solid var(--color-oki-gray5); }
/* */ .list-link .list-link-ir-calendar__item { display: flex; position: relative; flex-direction: column; align-items: flex-start; padding-top: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: 100%; }
/* */ .list-link .list-link-ir-calendar__label-arrow_wrap { display: flex; align-items: center; width: 100%; }
/* */ .list-link .list-link-ir-calendar__label { display: block; margin-right: calc(var(--column-unit) * 1); font-style: normal; font-weight: 670; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 140%; letter-spacing: -0.01em; }
/* */ .list-link .list-link-ir-calendar__description { margin-top: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-bottom: calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-style: normal; font-weight: 570; font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 140%; letter-spacing: -0.01em; }
/* */ .list-link-ir-calendar__item.-no-description :is(.list-link .list-link-ir-calendar__description) { margin-top: 0px; margin-bottom: 0px; }
/* */ html[lang="ja"] :is(.list-link .list-link-ir-calendar__description) { font-family:"Noto Sans JP", system-ui, sans-serif; font-size: calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-style: normal; font-weight: 670; line-height: 150%; letter-spacing: calc(.39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link .list-link-ir-calendar__arrow { flex-shrink: 0; margin-left: auto; }
/* */ .list-link .list-link-ir-calendar__arrow { color: var(--color-oki-red); }
/* */ .list-link .list-link-ir-calendar__arrow.-external { width: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: auto; }
/* */ .list-link-ir-calendar__item.-no-link :is(.list-link .list-link-ir-calendar__arrow) { display: none; }
/* */ .list-link-file { border-top: 1px solid var(--color-oki-line-gray); }
/* */ .list-link-file .link { display: flex; align-items: center; }
/* */ .list-link-file .link__title { padding-top: calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-right: 1em; padding-bottom: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-style: normal; font-weight: 670; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 120%; letter-spacing: -0.01em; }
/* */ html[lang="ja"] :is(.list-link-file .link__title) { font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-family:"Noto Sans JP", system-ui, sans-serif; font-weight: 700; line-height: 150%; letter-spacing: calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .list-link-file .link__icon { flex-shrink: 0; margin-right: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left: auto; width: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); color: var(--color-oki-red); }
/* */ .sustainability-report__top .list-link .list-link__item { padding-top: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .sustainability-report__block .list-link .list-link__item { padding-top: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ html[lang="ja"] :is(.sustainability-report__top .list-link .list-link__item) { padding-top: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ html[lang="ja"] :is(.sustainability-report__block .list-link .list-link__item) { padding-top: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .sustainability-report__top .list-link .list-link__label { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .sustainability-report__block .list-link .list-link__label { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item .list-link__arrow { display: block; }
/* */ html[lang="ja"] :is(.list-link__label .t-paragraph-lg:is(.sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item)) { font-family:"Noto Sans JP", system-ui, sans-serif; font-weight: 790; }
/* */ .technologies-otr-single-main .technologies-otr-single-wrapper .technologies-otr-single-block .list-link { padding-left: 0px; padding-right: 0px; }
/* */ .technologies-otr-archives-main .technologies-otr-archives-wrapper .technologies-otr-archives-block [data-component-id="nqdzjf"] .list-link__label { font-weight: 300; line-height: 1.5; }
/* */ .list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id="nqdzjf"] .list-link__label) { margin-right: calc(var(--column-unit) * 2); font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-weight: 800; -webkit-line-clamp: 3; }
/* */ html[lang="ja"] :is(.list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id="nqdzjf"] .list-link__label)) { font-family:"Noto Sans JP", system-ui, sans-serif; font-weight: 790; }
/* */ .block-image-sticky-layout .block-image-sticky-layout__body .list-link__item { padding-top: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }

@media (any-hover: hover) {
  /* */ .list-link.-link-behavior--navigation .list-link__item:hover .list-link__label { opacity: 1; }
}

@media (max-width: 1023.98px) {
  /* */ .list-link .list-link__item.-has-dateline { display: block; padding-top: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link__item.-has-dateline :is(.list-link .list-link__label-arrow_wrap) { padding-left: calc(var(--column-unit) * 2); }
  /* */ .list-link__item.-has-dateline.-home-highlight-news :is(.list-link .list-link__label-arrow_wrap) { padding-left: calc(var(--column-unit) * 0); }
  /* */ .list-link__item.-has-title :is(.list-link .list-link__label-arrow_wrap) { display: block; }
  /* */ .list-link__item.-home-highlight-news :is(.list-link .list-link__label) { margin-top: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link__item.-has-dateline :is(.list-link .list-link__label) { margin-right: calc(var(--column-unit) * 2); }
  /* */ .list-link__item.-news-page.-has-dateline :is(.list-link .list-link__label) { margin-right: calc(var(--column-unit) * 0); }
  /* */ .list-link__item.-has-dateline :is(.list-link .list-link__description) { margin-right: calc(var(--column-unit) * 2); }
  /*●*/ .list-link .list-link__arrow { }
  /* */ .list-link__item.-home-highlight-news :is(.list-link .list-link__arrow) { display: none; }
  /* */ .list-link__item.-has-title :is(.list-link .list-link__arrow) { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left: calc(var(--column-unit) * 1); }
  /* */ .list-link__item.-news-page.-has-dateline :is(.list-link .list-link__arrow) { display: none; }
  /* */ #ir-news-page .list-link { padding-right: 0px; padding-left: 0px; }
  /* */ .list-link .list-link-ir-calendar__arrow { }
  /* */ .sustainability-report__top .list-link { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .sustainability-report__block .list-link { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] :is(.list-link__label .t-paragraph-lg:is(.sustainability-report-eco-page .sustainability-report__block .sustainability-report-eco__item)) { font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .technologies-otr-archives-main .technologies-otr-archives-wrapper .technologies-otr-archives-block [data-component-id="nqdzjf"] .list-link__label { width: calc(276 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-image-sticky-layout .block-image-sticky-layout__body .list-link { padding: 0px; }
}

@media (min-width: 1024px) {
  /* */ .list-link .list-link__content_wrap { flex-direction: column; align-items: flex-start; margin-bottom: calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link__item.-news-page.-has-dateline :is(.list-link .list-link__content_wrap) { flex-direction: row; margin-bottom: calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__date { padding-left: calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .list-link .list-link__item { padding-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .list-link .list-link__item.-narrow { padding-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__item.-has-dateline { flex-direction: row; }
  /* */ .list-link .list-link__item.-has-title { padding-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__item.-news-list-title-simple { padding-top: calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(34 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__item.-news-page { flex-direction: row; padding-top: calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link__item.-has-title .line-clamp-2:is(.list-link .list-link__label) { margin-right: calc(var(--column-unit) * 2); }
  /* */ html[lang="ja"] :is(.list-link__item .t-paragraph-lg:is(.list-link .list-link__label)) { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-style: normal; line-height: 150%; letter-spacing: calc(.48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] :is(.list-link__item .t-paragraph-lg:is(.list-link .list-link__label):has(+ .list-link__description)) { font-size: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-style: normal; line-height: 140%; letter-spacing: calc(.6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__arrow.-pdf { margin-right: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__arrow.-external { width: calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link__item.-has-title :is(.list-link .list-link__label_wrap) { margin-left: calc(var(--column-unit) * 3); }
  /* */ .list-link.-column-2 { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); grid-auto-rows: 1fr; column-gap: calc(var(--column-unit) * 2); }
  /* */ .list-link.-column-2 li:nth-child(2) .list-link__item { border-top: 1px solid var(--color-oki-gray5); }
  /* */ .list-link .list-link__wysiwyg { font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__wysiwyg > :first-child { margin-top: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__wysiwyg li { padding-left: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link__wysiwyg li + li { margin-top: 0.98em; }
  /* */ #investors-ir-news .investors-ir-news__calendar-list .list-link__item { padding-top: calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ #investors-ir-news .investors-ir-news__calendar-list .list-link__title { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ #investors-ir-news .investors-ir-news__calendar-list .list-link__arrow { padding-right: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link-ir-calendar__item { padding-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link-ir-calendar__label { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] :is(.list-link .list-link-ir-calendar__label) { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link .list-link-ir-calendar__arrow.-external { width: calc(19 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link-file .link__title { padding-top: calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ html[lang="ja"] :is(.list-link-file .link__title) { font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link-file .link__icon { margin-right: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .sustainability-report__top .list-link { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .sustainability-report__block .list-link { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .list-link__item .t-paragraph-lg:is(.technologies-otr-main .technologies-otr-section [data-component-id="nqdzjf"] .list-link__label) { font-size: calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /* */ .block-image-sticky-layout .block-image-sticky-layout__body .list-link__item { padding-top: calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .block-callout-list .block-callout-list__content .list-link__item { padding-top: calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   10 矢印 arrow-slide-in   (7 本)
   ================================================================== */
/*●*/ .arrow-slide-in { flex-shrink: 0; box-sizing: content-box; padding-right: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); width: calc(var(--slide-in-arrow-size, 16) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); overflow: hidden; color: var(--color-oki-red); }
/*●*/ .arrow-slide-in .arrow-slide-in-inner { display: flex; position: relative; justify-content: center; align-items: center; }
/*●*/ .arrow-slide-in .arrow-slide-in__icon { aspect-ratio: 1 / 1; width: 100%; height: 100%; }
/*●*/ .arrow-slide-in .arrow-slide-in__icon.-arrow-1 { position: absolute; transform: translate(0px); transition: transform .4s var(--easing-2),opacity .5s .2s var(--easing-1); }
/*●*/ .arrow-slide-in .arrow-slide-in__icon.-arrow-2 { transform: translate(-250%); opacity: 0; transition: transform .5s var(--easing-2),opacity .1s var(--easing-1); }
/*●*/ [data-arrow-slide-in-anime-root]:hover .arrow-slide-in__icon.-arrow-1, [data-arrow-slide-in-anime-root]:focus .arrow-slide-in__icon.-arrow-1 { transform: translate(120%); opacity: 0; transition: transform .4s var(--easing-2),opacity .3s var(--easing-1); }
/*●*/ [data-arrow-slide-in-anime-root]:hover .arrow-slide-in__icon.-arrow-2, [data-arrow-slide-in-anime-root]:focus .arrow-slide-in__icon.-arrow-2 { transform: translate(0px); opacity: 1; transition-property: ; transition-duration: ; transition-timing-function: ; transition-behavior: ; transition-delay: 0.1s; }

/* ==================================================================
   11 サイトマップの 2 段組 block-layout-2column   (5 本)
   ================================================================== */
/*●*/ .block-layout-2column { display: grid; row-gap: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/* */ .block-layout-2column .block-callout-list__item { max-width: calc(var(--column-unit) * 17); }
/* */ .block-layout-2column .block-layout-2column__item + .block-layout-2column__item .block-link-width-image-title { padding-bottom: 0px; }

@media (min-width: 1024px) {
  /*●*/ .block-layout-2column { grid-template-columns: repeat(2, minmax(0px, 1fr)); column-gap: calc(var(--column-unit) * 2); row-gap: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-right: auto; margin-left: auto; max-width: calc(var(--column-unit) * var(--block-content-regular)); }
  /*●*/ .block-layout-2column + .block-layout-2column { margin-top: calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   12 サイトマップの灰カード block-callout-list   (4 本)
   ================================================================== */
/*●*/ .block-callout-list { margin-right: auto; margin-left: auto; border-radius: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color: var(--color-oki-bg-gray); padding: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2); height: 100%; }
/*●*/ .block-callout-list .block-callout-list__content { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }

@media (min-width: 1024px) {
  /*●*/ .block-callout-list { padding: calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2) calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(var(--column-unit) * 2); max-width: calc(var(--column-unit) * 30); }
  /*●*/ .block-callout-list .block-callout-list__content { margin-top: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

/* ==================================================================
   13 検索の入力まわり ss-search / ss-categories   (93 本)
   ================================================================== */
/* */ html[lang="ja"] :is(.syncsearch .ss-categories-container .ss-categories .ss-category-title h4) { font-family:"Noto Sans JP", system-ui, sans-serif; font-weight: 800; font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .syncsearch .pan, .syncsearch .ss-contents-title, .syncsearch .caption, .syncsearch .ss_caption_toggle { display: none; }
/*●*/ .syncsearch div.ss-contents div.ss-search { margin-top: calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-bottom: calc(47 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); border-radius: calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color: var(--color-oki-bg-gray); padding-right: ; padding-left: ; padding-top: calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container { position: relative; }
/*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-input { border: 1px solid var(--color-oki-gray5); border-radius: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color: var(--color-oki-white); padding: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); width: 100%; height: calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-weight: 670; font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 100%; letter-spacing: 0.02em; }
/*●*/ .syncsearch .ss-categories-container { margin-top: calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-right: calc(var(--column-unit) * .5); padding-left: calc(var(--column-unit) * .5); width: 100%; }
/*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-title h4 { font-weight: 790; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; letter-spacing: 0em; }
/*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-field { display: flex; column-gap: calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); flex-wrap: wrap; align-items: center; margin-top: calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; }
/*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-field label { display: inline-block; position: relative; vertical-align: top; padding-top: calc(5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-left: calc(39 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); min-width: 45%; font-weight: 570; font-size: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1.8; letter-spacing: -0.01em; }
/*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-field label::before { top: 0px; bottom: 0px; left: 0px; margin: auto; border: 1px solid var(--color-oki-gray5); border-radius: 999px; background-color: var(--color-oki-white); width: calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); content: ""; }
/*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-field input[type="radio"]:checked + label::after { display: block; position: absolute; top: 0px; bottom: 0px; left: calc((calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) - calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))) / 2); margin: auto; border-radius: 999px; background-color: var(--color-oki-red); width: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); content: ""; }
/*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container .ss-search-button { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color: var(--color-oki-red2); padding-left: 0px; }
/*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container { position: absolute; top: 0px; right: 5px; bottom: 0px; margin: auto; width: calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); max-width: none; }
/*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container { height: calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container input { width: 100%; height: 100%; }
/*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container::before { display: inline-block; position: absolute; inset: 0px; margin: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath d='M56.955 105.902C67.564 105.908 77.8845 102.446 86.3459 96.0425L108.284 117.993C109.418 119.126 110.912 119.826 112.507 119.972C114.103 120.117 115.699 119.7 117.019 118.791C117.66 118.253 118.253 117.66 118.79 117.018C119.699 115.698 120.117 114.101 119.972 112.504C119.826 110.907 119.127 109.412 117.994 108.277L96.0567 86.3262C102.671 77.5039 106.114 66.7051 105.828 55.68C105.542 44.6549 101.543 34.0496 94.4798 25.5828C87.4166 17.1159 77.7028 11.2838 66.9128 9.03162C56.1227 6.7794 44.8887 8.23907 35.0314 13.174C25.1741 18.109 17.2712 26.2301 12.6034 36.2212C7.93566 46.2122 6.7766 57.4878 9.31409 68.2203C11.8516 78.9529 17.9369 88.5136 26.5839 95.353C35.2308 102.192 45.9327 105.91 56.955 105.902ZM56.955 20.3656C64.1802 20.3656 71.2431 22.5094 77.2506 26.5259C83.2582 30.5423 87.9405 36.2511 90.7054 42.9302C93.4704 49.6093 94.1939 56.9589 92.7843 64.0494C91.3747 71.14 87.8955 77.6531 82.7865 82.7651C77.6776 87.8771 71.1683 91.3584 64.082 92.7688C56.9956 94.1792 49.6504 93.4553 42.9752 90.6887C36.3 87.9221 30.5946 83.2371 26.5805 77.226C22.5664 71.215 20.4238 64.1479 20.4238 56.9184C20.435 47.2275 24.2874 37.9366 31.1359 31.0841C37.9844 24.2316 47.2698 20.3769 56.955 20.3656Z' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; width: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); content: ""; }
/*●*/ .syncsearch #ss-content { margin-right: auto; margin-left: auto; }
/*●*/ .syncsearch .ss-navi-title { margin-bottom: 0px; padding: 0px; }
/*●*/ .syncsearch .ss-navi-title h2 { padding-left: 0px; }
/*●*/ .syncsearch .ss-navi-title h2 .ss-navi-title__total { font-weight: 790; font-size: calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; letter-spacing: -0.01em; }
/*●*/ .syncsearch .ss-navi-title h2 .ss-navi-title__text { font-weight: 570; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; }
/*●*/ .syncsearch .ss-navi-title h2 .ss-navi-title__search-word { font-weight: 790; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; }
/*●*/ .syncsearch .ss-navi-title-wrapper { margin-bottom: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-left: calc(var(--column-unit) * 1); }
/*●*/ .syncsearch .ss-navi-title h2::before { position: absolute; top: 0px; bottom: 0px; left: calc(-16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin: auto; border-radius: calc(1 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color: var(--color-oki-red); width: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); content: ""; }
/*●*/ .syncsearch .ss-navi-contents { margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .syncsearch .ss-navi-contents { margin-bottom: 0px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; }
/*●*/ .syncsearch .ss-navi-container { margin-top: 0px; font-weight: 570; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; letter-spacing: -0.01em; }
/*●*/ .syncsearch .ss-highlight { font-weight: 700; }
/*●*/ .syncsearch div.ss-contents a:hover { text-decoration: none; }
/*●*/ .syncsearch .ss-pagination { display: inline-flex; flex-wrap: wrap; margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); width: 100%; color: var(--color-oki-gray); }
/*●*/ .syncsearch .ss-page { display: inline-flex; justify-content: center; align-items: center; color: var(--color-oki-gray); font-weight: 670; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; }
/*●*/ .syncsearch .ss-page { order: 2; padding: 0 calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: 2.5rem; }
/*●*/ .syncsearch .ss-page.ss-select-page { color: var(--color-oki-black); }
/*●*/ .syncsearch .next-page-container.-disabled, .syncsearch .previous-page-container.-disabled { pointer-events: none; }
/* */ .syncsearch .next-page-container.-disabled a { opacity: 0.2; --button-base-color-bg: var(--color-oki-gray); }
/*●*/ .syncsearch .previous-page-container.-disabled a { opacity: 0.2; --button-base-color-bg: var(--color-oki-gray); }
/*●*/ .syncsearch .next-page-container { order: 3; margin-left: auto; }
/*●*/ .syncsearch .previous-page-container { order: 1; margin-right: auto; }
/*●*/ div.ss-contents { margin: 0px auto; width: 100%; }
/*●*/ div.ss-contents *, div.ss-contents ::before, div.ss-contents ::after { box-sizing: border-box; }
/* */ div.ss-contents div.ss-container div#ss-main.sp { display: block; }
/* */ div.headerWrapper #ss-form1 { width: 0px; max-width: 640px; }
/* */ div.ss-contents div.ss-contents-title { box-sizing: border-box; margin-bottom: 30px; background: url("/jp/cmn_2020/img/syncsearch/bg_hd_h1.png") 100% 10% no-repeat rgb(255, 255, 255); padding: 35px 10px; width: 100%; }
/* */ div.ss-contents div.ss-contents-title h1.ss-item { line-height: 1.1; }
/* */ div.ss-contents div.ss-contents-title h1.ss-item { margin: 0px auto; width: 100%; max-width: 1230px; font-weight: 700; font-size: 28px; }
/* */ div.ss-contents div.ss-contents-title h1.ss-item { border-width: 0px; border-style: none; border-radius: 0px; background-color: transparent; padding: 0px; color: rgb(51, 51, 51); }
/*●*/ div.ss-contents div.ss-search { margin: 0px 0px 60px; border-radius: 0px; background-color: rgb(233, 236, 239); padding: 15px; width: 100%; }
/*●*/ div.ss-contents .form-inline { display: flex; flex-flow: wrap; align-items: center; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents { margin-bottom: 20px; width: 100%; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container { max-width: 100%; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-input { display: block; vertical-align: top; transition: none; margin: 0px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0px; background-image: none; background-clip: padding-box; background-color: rgb(255, 255, 255); width: 60%; touch-action: manipulation; color: rgb(73, 80, 87); line-height: 1.25; font-family: inherit; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-input:focus { outline: none; border: 1px solid rgb(85, 166, 248); background-image: none; background-clip: padding-box; background-color: rgb(255, 255, 255); color: rgb(73, 80, 87); line-height: 1.25; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container { display: inline-block; position: relative; vertical-align: top; width: 18%; max-width: 50px; overflow: hidden; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container::before { display: block; position: absolute; top: 2px; left: 15px; pointer-events: none; content: ""; color: rgb(255, 255, 255); font-size: 24px; font-family: ionicons; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container .ss-search-button { display: inline-block; appearance: button; transition: none; cursor: pointer; margin: 0px; border: 1px solid transparent; background-color: rgb(203, 28, 29); padding-left: 40px; touch-action: manipulation; line-height: 1.25; font-family: inherit; user-select: none; text-align: center; white-space: nowrap; }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container .ss-search-button:hover { background-color: rgb(210, 59, 60); }
/*●*/ div.ss-contents div.ss-search .ss-search-contents .caption { margin: 10px 0px 0px; color: rgb(134, 142, 150); font-size: 12px; }
/*●*/ .ss-categories-container .ss-categories .ss-category-field .ss-category { display: none; }
/*●*/ .ss-categories-container .ss-categories .ss-category-field label:nth-of-type(3n+1) { margin-left: 0px; }
/*●*/ .ss-categories-container .ss-categories .ss-category-field label::before { position: absolute; top: -2px; left: -22px; content: ""; color: rgb(173, 181, 189); font-size: 20px; font-family: ionicons; }
/* */ div#ss-main.ie6 div#ss-preview, body.ie7 div#ss-preview { background: url("//image.syncsearch.jp/image/preview.gif") 0px 0px no-repeat; }
/* */ div#ss-main.ie6 div#ss-preview-container, body.ie7 div#ss-preview-container { background: url("//image.syncsearch.jp/image/shadow.png") 0px 0px no-repeat; }

@media (min-width: 1024px) {
  /* */ html[lang="ja"] :is(.syncsearch .ss-categories-container .ss-categories .ss-category-title h4) { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch div.ss-contents div.ss-search { margin-top: calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-right: auto; margin-bottom: calc(64 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left: auto; padding-right: ; padding-left: ; padding-top: calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(32 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); max-width: calc(var(--column-unit) * 34); }
  /*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-input { padding-left: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(53 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-size: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-categories-container { margin-top: calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-right: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-left: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-categories-container .ss-categories { display: flex; flex-flow: row; justify-content: flex-start; align-items: stretch; }
  /*●*/ .syncsearch .ss-categories-container .ss-categories + .ss-categories { margin-top: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-title { flex-shrink: 0; margin-top: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-right: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-title h4 { font-size: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-field { column-gap: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-top: calc(0 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-categories-container .ss-categories .ss-category-field label { min-width: 12em; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container { width: calc(67 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-btn-container { height: calc(43 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch #ss-content { max-width: calc(var(--column-unit) * var(--block-content-dence)); }
  /*●*/ .syncsearch .ss-navi-title-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-left: 0px; }
  /*●*/ .syncsearch .ss-navi-title h2::before { left: calc(-30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); border-radius: calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); width: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-navi-contents { display: flex; margin-top: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-pagination { margin-top: calc(132 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-page { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .syncsearch .ss-page { padding: 0 calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

@media (min-width: 576px) {
  /*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container { display: flex; flex: 0 0 auto; flex-flow: wrap; align-items: center; margin-bottom: 0px; }
  /*●*/ div.ss-contents .form-inline .ss-search-input { display: inline-block; vertical-align: middle; width: auto; }
}

@media only screen and (max-width: 1231px) and (min-width: 736px) {
  /*●*/ div.ss-contents div.ss-container { padding-right: 20px; padding-left: 20px; }
  /* */ div.ss-contents div.ss-contents-title { min-width: auto; min-height: 176px; }
  /* */ div.ss-contents div.ss-contents-title h1.ss-item { width: 100%; max-width: 1230px; }
}

@media only screen and (max-width: 736px) {
  /*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container { overflow: hidden; }
  /*●*/ div.ss-contents div.ss-search .ss-search-contents .ss-search-container .ss-search-input { display: block; float: left; width: 75%; }
  /*●*/ .ss-categories-container .ss-categories .ss-category-field { margin: 0px; padding: 0px; }
  /*●*/ .ss-categories-container .ss-categories + .ss-categories { margin-top: 15px; }
}

@media only screen and (min-width: 1231px) {
  /*●*/ div.ss-contents div.ss-container { margin: 0px auto; width: 100%; }
  /* */ div.ss-contents div.ss-contents-title { min-width: 960px; min-height: 176px; }
  /* */ div.ss-contents div.ss-contents-title h1.ss-item { width: 100%; max-width: 1230px; }
}

/* ==================================================================
   14 検索の件数行 ss-navi   (8 本)
   ================================================================== */
/*●*/ .ss-navi-title { position: relative; margin-bottom: 25px; border-width: 0px; border-style: solid; border-color: rgb(203, 28, 29); border-radius: 0px; background-color: transparent; padding: 5px 0px; color: rgb(51, 51, 51); }
/*●*/ .ss-navi-contents { margin-bottom: 20px; border-bottom: 2px solid rgb(222, 226, 230); padding-bottom: 10px; font-size: 14px; }
/*●*/ .ss-navi-contents .ss-navi-container { flex: 1 0 auto; margin-top: auto; width: 100%; text-align: right; }
/* */ .ss-navi-contents .ss-navi-container .ss-sort { display: inline-block; padding: 0px 1em 0px 0px; }
/* */ .ss-navi-contents .ss-navi-container .ss-sort span { display: inline-block; margin: 0px; padding: 0px 0.25em 0px 0px; font-size: 14px; }
/* */ .ss-navi-contents .ss-navi-container .ss-sort span.selected { pointer-events: none; font-weight: 700; }
/*●*/ .ss-navi-contents .ss-navi-container .ss-detail-container { display: inline-block; }
/* */ .ss-navi-contents .ss-navi-container .ss-detail-container b { font-weight: 700; }

/* ==================================================================
   15 検索の 1 件（トップの list-news-thumbnail に -search-results を足す）   (19 本)
   ================================================================== */
/* */ #ss-result .ss-item .ss-page, #ss-ad-result .ss-ad-item .ss-ad-page { margin: 0px 0px 0px 20px; }
/* */ #ss-result .ss-item .ss-page .ss-title, #ss-ad-result .ss-ad-item .ss-ad-page .ss-ad-title { font-weight: 700; font-size: 18px; }
/* */ #ss-result .ss-item .ss-page .ss-title a::before, #ss-ad-result .ss-ad-item .ss-ad-page .ss-ad-title a::before { display: inline-block; background: url("/jp/cmn_2020/img/syncsearch/arrow_01.png") 2px 5px / 8px 13px no-repeat; width: 1em; height: 1em; content: ""; }
/* */ #ss-result .ss-item .ss-page .ss-summary, #ss-ad-result .ss-ad-item .ss-ad-page .ss-ad-summary { margin-bottom: 1em; color: rgb(102, 102, 102); }
/* */ #ss-result .ss-item .ss-page .ss-url, #ss-ad-result .ss-ad-item .ss-ad-page .ss-ad-url { font-size: 14px; }
/* */ #ss-result .ss-item .ss-page .ss-url a, #ss-ad-result .ss-ad-item .ss-ad-page .ss-ad-url a { color: rgb(0, 34, 153); }
/*●*/ .list-news-thumbnail.-news-archive li:first-child .list-news-thumbnail__item, .list-news-thumbnail.-search-results div:first-child .list-news-thumbnail__item { border-top: 1px solid var(--color-oki-gray5); }
/*●*/ .list-news-thumbnail.-search-results :is(.list-news-thumbnail .list-news-thumbnail__arrow) { width: calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .list-news-thumbnail.-search-results :is(.list-news-thumbnail .list-news-thumbnail__content) { width: 65%; }
/* */ #ss-result .ss-item, #ss-ad-result .ss-ad-item { display: flex; padding: 10px 0px; }
/* */ #ss-result .ss-item + .ss-item, #ss-ad-result .ss-ad-item + .ss-ad-item { border-top: 1px dotted rgb(206, 212, 218); }
/* */ #ss-result .ss-item .ss-image a, #ss-ad-result .ss-ad-item .ss-ad-image a { display: block; }
/* */ #ss-result .ss-item .ss-image a img, #ss-ad-result .ss-ad-item .ss-ad-image a img { vertical-align: middle; border-style: none; width: 120px; max-width: inherit; height: auto; }

@media (min-width: 1024px) {
  /* */ html[lang="ja"] :is(.list-news-thumbnail.-search-results :is(.list-news-thumbnail .list-news-thumbnail__item)) { padding-top: calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .list-news-thumbnail.-search-results :is(.list-news-thumbnail .list-news-thumbnail__item) { padding-top: calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom: calc(38 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .list-news-thumbnail.-search-results :is(.list-news-thumbnail .list-news-thumbnail__item_image) { margin-right: calc(var(--column-unit) * 2); width: calc(var(--column-unit) * 3); }
  /*●*/ .list-news-thumbnail.-search-results :is(.list-news-thumbnail .list-news-thumbnail__content) { width: 77%; }
}

@media only screen and (max-width: 736px) {
  /* */ #ss-result .ss-item .ss-page, #ss-ad-result .ss-ad-item .ss-ad-page { margin: 0px; font-size: 14px; }
  /* */ #ss-result .ss-item .ss-image, #ss-ad-result .ss-ad-item .ss-ad-image { display: none; }
}

/* ==================================================================
   16 検索 0 件のとき   (1 本)
   ================================================================== */
/*●*/ #ss-not-found { margin: 40px 0px; font-size: 14px; }

/* ==================================================================
   17 ページ送り ss-pagination   (29 本)
   ================================================================== */
/*●*/ .pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }
/*●*/ .pagination .previous-page-container { grid-column: 1; justify-self: start; }
/*●*/ .pagination .next-page-container { grid-column: 3; justify-self: end; }
/*●*/ .pagination .pagination-list { display: flex; grid-column: 2; justify-content: center; align-items: center; color: var(--color-oki-gray); font-weight: 670; font-size: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height: 1; }
/*●*/ .pagination .number { display: inline-flex; justify-content: center; align-items: center; padding: 0 calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: 2.5rem; }
/* */ .pagination .number.-active { color: var(--color-oki-black); }
/* */ .pagination .ellipsis { display: block; padding: 0 calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .pagination .pagination-button { --button-base-color-text: var(--color-oki-white); --button-base-color-bg: var(--color-oki-red2); --initial-opacity: 0; --active-translate: 0; --active-opacity: 1; display: inline-grid; place-content: center; transition-duration: var(--duration-300); transition-property: background-color, color, border-color; transition-timing-function: var(--easing-0); border-radius: calc(5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color: var(--button-base-color-bg); width: calc(53 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height: calc(41 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); color: var(--button-base-color-text); line-height: 100%; }
/*●*/ .pagination .pagination-button > span { grid-area: -1 / -1 / 1 / 1; transform-origin: center center; transition-duration: var(--duration-300); transition-property: transform, opacity; transition-timing-function: var(--easing-2),var(--easing-0); }
/*●*/ .pagination .pagination-button[data-icon-direction="left"] { --initial-translate: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .pagination .pagination-button[data-icon-direction="right"] { --initial-translate: calc(-15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
/*●*/ .pagination .pagination-button .before { transform: translate(var(--initial-translate)); opacity: var(--initial-opacity); }
/*●*/ .pagination .pagination-button .after { transform: translate(var(--active-translate)); opacity: var(--active-opacity); }
/* */ .pagination .pagination-button[disabled] { opacity: 0.2; pointer-events: none; --button-base-color-bg: var(--color-oki-gray); }
/* */ .ss-pagination .ss-page-prev { order: 1; margin-left: auto; }
/* */ .ss-pagination:not(:has(> .ss-page-next)) .ss-page-prev { margin-right: 57px; }
/* */ .ss-pagination .ss-page-next { order: 2; margin-right: 5px; }
/* */ .ss-pagination:not(:has(> .ss-page-prev)) .ss-page-next { margin-left: auto; }
/* */ .ss-pagination .ss-page-prev a, .ss-pagination .ss-page-next a { border: 1px solid rgb(203, 28, 29); background-color: rgb(203, 28, 29); color: rgb(255, 255, 255); }
/*●*/ .ss-pagination a:hover { text-decoration: none; }

@media (any-hover: hover) {
  /*●*/ .pagination .pagination-button:hover .before { transform: translate(var(--active-translate)); opacity: var(--active-opacity); }
  /*●*/ .pagination .pagination-button:hover .after { transform: translate(calc(var(--initial-translate) * -1)); opacity: var(--initial-opacity); }
}

@media (max-width: 1023.98px) {
  /*●*/ .pagination { margin-top: calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) !important; }
}

@media (min-width: 1024px) {
  /*●*/ .pagination .pagination-list { font-size: calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
  /*●*/ .pagination .number { padding: 0 calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }
}

@media only screen and (max-width: 736px) {
  /*●*/ .ss-pagination::after { width: 100%; content: ""; }
  /* */ .ss-pagination .ss-page-prev { margin-top: 10px; margin-left: 0px; }
  /* */ .ss-pagination:not(:has(> .ss-page-next)) .ss-page-prev { margin-right: 0px; }
  /* */ .ss-pagination .ss-page-next { margin-top: 10px; margin-left: auto; }
}

/* ==================================================================
   18 出し分け desktop-only / mobile-only / line-clamp   (10 本)
   ================================================================== */
/* */ .line-clamp-1 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
/*●*/ .line-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* */ .line-clamp-3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
/* */ #news-page .pickup-area.has-ourpicks .ourpicks .list-news-thumbnail__title.desktop-only { margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-bottom: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); }

@media (max-width: 1023.98px) {
  /*●*/ .desktop-only { display: none !important; }
}

@media (min-width: 1024px) {
  /*●*/ .mobile-only { display: none !important; }
  /* */ .desktop\:line-clamp-1 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  /* */ .desktop\:line-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  /* */ .desktop\:line-clamp-3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  /* */ .list-news-thumbnail.-news-archive :is(#news-page .pickup-area.has-ourpicks .ourpicks .list-news-thumbnail__title.desktop-only) { -webkit-line-clamp: 3; }
}


/* ==========================================================================
   §7  別の会社に差し替えた 4 部品
   --------------------------------------------------------------------------
   衝突の実測（クラス名の総当たり。OKI の 6 ファイル × 4 部品）:
     pager  × OKI … 0 件（OKI の送りは .pagination / .pagination-list / .number、
                    こちらは .pagesearch-pagination__controls / .pagination-page。
                    .active は OKI では .media-gallery-history__gallary-image.active
                    だけで、こちらは器の中に閉じている）
     filter × OKI … 0 件（全規則が .list-filter の中）。ただし**トップの
                    style.css が素の .flex / .grid / .hidden / .relative を持つ**。
                    filter 側は .list-filter を 1 段かぶせた形（0,2,0）なので
                    器の中では必ず勝つ。器の外へは 1 本も出ない
     table  × OKI … 0 件（.table-layout-v2 の中。OKI の表は .block-table-wrapper）
     article × OKI … **1 件あり** → 下の §7-4 で .rm-article を 1 段かぶせた
   ========================================================================== */


/* ==========================================================================
   §7-1  一覧のページ送り（三菱電機の枠 → 実体は日立製作所）
        出典 parts3/pager.css。OKI の nav.pagination は §2 にそのまま残してある
        （OKI にも送りは在る。ただし「…」も総ページ数も出さない形）
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   pager — 一覧のページ送り（`‹ 1 2 3 … 318 ›` の省略形／総ページ数を出す形）
   ──────────────────────────────────────────────────────────────────────────
   参照元: https://www.hitachi.com/ja-jp/press/ の `.pagesearch-pagination__controls`
           （AEM の `.cmp-pagesearch` 部品。CSS は
             /etc.clientlibs/hitachi/clientlibs/clientlib-site.lc-e2c4abaf….css、
             JS は同 clientlib-site.lc-120cba96….js の module 3953）

   ⚠ 割り当ての訂正（報告に詳しく書いた）
     指示は「三菱電機から取る」だったが、目印として渡された実測値
     —— `1 2 3 … 318` の省略形・総ページ数を出す形・16px —— は
     **三菱電機のものではない。** 三菱電機の一覧（/ja/pr/）にページ送りは無く、
     持っているのはサイト内検索 (/ja/search/mf3/) の MarsFlag 製ページャだけで、
     18px・重さ300・角丸2px・前後2ページの窓のみ・**「…」も総ページ数も出さない**
     （10/836 ページ目の実測: `« ‹ 8 9 [10] 11 12 ›`）。
     目印の 4 つ（16px／「…」／総ページ数／無効の矢印）が全部そろうのは
     `tone/denki-parts-hit-list.json` に測ってある日立のこの部品で、
     `選定.md` の表 2 行目は hit（日立）→ mit（三菱電機）の取り違えと判断した。
     §11「1 社から 1 部品」は割れていない（日立からは他に 1 つも取っていない）。

   原文のまま持ってきたもの（値・式・時間・入れ子）:
     ・器      … display:flex / align-items:center / justify-content:center /
                 gap:1rem / width:100% / margin-bottom:1.5rem
     ・玉      … 2rem × 2rem 固定・border-radius:.25rem・padding:0・position:relative
                 （数字・矢印・「…」の 3 つが同じ 1 本の規則を共有する）
     ・遷移    … transition:background-color .3s ease, border-color .3s ease
     ・矢印の中身 … span を position:absolute / left:0 / right:0 / **top:25%** で置く
                 （2rem の玉に 1rem の字面 → 上 8px。中央寄せは button の既定）
     ・左矢印  … 右矢印と同じ 1 つの絵を transform:rotate(180deg) で回すだけ
     ・現在地／押下／焦点 … 同じ 1 本（濃地＋白字＋outline:none）。
                 **焦点の輪を消す代わりに面を反転させる**のが参照元の作りなので、
                 outline:none も原文のまま残した（見えない焦点にはならない）
     ・無効    … 玉 opacity:.7 / 中の矢印 opacity:.3 / cursor:not-allowed
     ・「…」   … 玉と同じ地・同じ角丸のまま cursor:auto / pointer-events:none /
                 text-align:center（数字と同じ大きさの箱で並ぶ）
     ・数字の大きさ … 参照元はページ送り側で font-size を **1 つも書いていない**。
                 16px/400/lh24px は器からの継承値。ここでは §3「継承の土台」で
                 特異度 0 のまま同じ継承値を再現している（外側が決めれば外側が勝つ）
     ・段の切替 … CSS の @media は **1 本も無い**。幅で変わるのは JS が並べる
                 玉の個数だけ（pager.js。768px 未満で 5 個、以上で 7 個）

   参照元と変えたところ（1 行ずつ）:
     1. 色トークンの中身 … --color-supportive-grey-1 #f4f4f4 → #ededed(--color-oki-gray3)
                          --primary-color #c00 → #003678(--color-oki-red)
                          直書きの #0c0c0c → #0d0d0d(--color-oki-black)
                          直書きの #fff    → #fbfbfb(--color-oki-white)
                          いずれもトークンは**この器の中だけ**に宣言した
                          （--primary-color は名前が一般的すぎて :root では衝突する）
     2. 書体            … 矢印は icomoon の 1 字（content:"\e900"）だった。
                          参照元固有の書体なので持ってこない。同じ 9×16px の箱に
                          収まる素の山形を SVG で置いた（回し方は原文のまま）
     3. 外側のスコープ  … `.cmp-pagesearch`（参照元固有の部品名）を外した。
                          規則同士の優劣は全部そろって 1 段下がるだけなので不変
     4. 素の button の下敷き … 参照元はサイト全体の reset に寄りかかっている
                          （font:inherit / border:0 / box-sizing / disabled）。
                          この 3 本だけを持ってきて `:where()` で器の中に閉じた。
                          **:where は特異度 0 なので、参照元での勝ち負けが変わらない**
                          （素の button:disabled の opacity:.5 に、ページ送りの
                            opacity:.7 が勝つ関係をそのまま保つ）
     5. 文言            … aria-label "Previous"/"Next" → 「前のページ」「次のページ」
   ══════════════════════════════════════════════════════════════════════════ */


/* ── §1 色トークン（中身だけ自社のものに差し替えた） ──────────────────────
   参照元の宣言は `var(--color-supportive-grey-1)` / `var(--primary-color)` の
   ままにして、値をこの器の中で入れ替える。ページ側に同名の変数があっても
   ここから外へは漏れない。 */
.pagesearch-pagination__controls{
  --color-supportive-grey-1: var(--color-oki-gray3, #ededed);  /* 参照元 #f4f4f4 */
  --primary-color:           var(--color-oki-red,   #003678);  /* 参照元 #c00    */
  --pager-ink:               var(--color-oki-black, #0d0d0d);  /* 参照元 #0c0c0c 直書き */
  --pager-paper:             var(--color-oki-white, #fbfbfb);  /* 参照元 #fff    直書き */
}


/* ── §2 素の button の下敷き（参照元のサイト共通 reset から 3 本だけ） ─────
   :where() で特異度 0 に落としてあるので、参照元での「素の button」と
   まったく同じ重さで効く。器の外へは出ない。 */
:where(.pagesearch-pagination__controls) button{
  font: inherit;                       /* button,input,optgroup,select,textarea{font:inherit} */
}
:where(.pagesearch-pagination__controls) button{
  border: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  display: inline-block;               /* flex の子なので実際は block に畳まれる */
  padding: .0625rem 1.0625rem;         /* 下の padding:0 が上書きする */
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}
:where(.pagesearch-pagination__controls) button:disabled{
  cursor: default;
  opacity: .5;                         /* §4 の opacity:.7 が勝つ（参照元と同じ関係） */
  pointer-events: none;
}


/* ── §3 継承の土台（参照元の器から降りてきていた値の再現） ────────────────
   ページ送り自身は font-size を 1 つも持たない。参照元での継承値は
   16px / 400 / line-height 24px だった。:where() なので、組み込む側が
   別の大きさを敷いていればそちらが勝つ。 */
:where(.pagesearch-pagination__controls){
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: var(--pager-ink);
}


/* ── §4 ここから下が参照元の規則そのまま（宣言の並びも原文の順） ──────────
   原文は `.cmp-pagesearch .pagesearch-pagination__controls …`。
   外側の `.cmp-pagesearch` だけを落としてある。 */

.pagesearch-pagination__controls{
  -webkit-box-align: center;
      -ms-flex-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
  width: 100%;
}

.pagesearch-pagination__controls .pagination-btn,
.pagesearch-pagination__controls .pagination-ellipsis,
.pagesearch-pagination__controls .pagination-page{
  background-color: var(--color-supportive-grey-1);
  border-radius: .25rem;
  color: var(--pager-ink);
  cursor: pointer;
  height: 2rem;
  padding: 0;
  position: relative;
  -webkit-transition: background-color .3s ease, border-color .3s ease;
          transition: background-color .3s ease, border-color .3s ease;
  width: 2rem;
}

.pagesearch-pagination__controls .pagination-btn span,
.pagesearch-pagination__controls .pagination-ellipsis span,
.pagesearch-pagination__controls .pagination-page span{
  left: 0;
  position: absolute;
  right: 0;
  top: 25%;
}

.pagesearch-pagination__controls .pagination-btn.active,
.pagesearch-pagination__controls .pagination-btn:active,
.pagesearch-pagination__controls .pagination-btn:focus,
.pagesearch-pagination__controls .pagination-page.active,
.pagesearch-pagination__controls .pagination-page:active,
.pagesearch-pagination__controls .pagination-page:focus{
  background-color: var(--pager-ink);
  color: var(--pager-paper);
  outline: none;
}

.pagesearch-pagination__controls .pagination-btn:hover,
.pagesearch-pagination__controls .pagination-page:hover{
  background-color: var(--primary-color);
  color: var(--pager-paper);
}

.pagesearch-pagination__controls .pagination-btn:disabled,
.pagesearch-pagination__controls .pagination-page:disabled{
  cursor: not-allowed;
  opacity: .7;
}

.pagesearch-pagination__controls .pagination-btn:disabled span,
.pagesearch-pagination__controls .pagination-page:disabled span{
  opacity: .3;
}

.pagesearch-pagination__controls .pagination-page-numbers{
  -webkit-box-align: center;
      -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}

.pagesearch-pagination__controls .pagination-page-numbers .pagination-page{
  margin: 0 auto;
}

.pagesearch-pagination__controls .pagination-page-numbers .pagination-ellipsis{
  cursor: auto;
  pointer-events: none;
  text-align: center;
}


/* ── §5 矢印の絵（icomoon の 1 字を置き換えた分だけ） ─────────────────────
   原文:
     [class*=" icon-"],[class^=icon-]{ … font-family:icomoon!important; line-height:1; … }
     .icon-chevron-right:before{content:"\e900"}
     .icon-chevron-left { transform: rotate(180deg) }
     .icon-chevron-left:before{content:"\e900"}   ← 右と同じ 1 字
   書体は持ってこないので、同じ 9×16px の箱に入る山形を SVG で置く。
   **回し方（左＝右を 180deg）は原文のまま。** */
.pagesearch-pagination__controls [class^="icon-"],
.pagesearch-pagination__controls [class*=" icon-"]{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
}
.pagesearch-pagination__controls .icon-chevron-left{
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.pagesearch-pagination__controls [class^="icon-"] > svg{
  display: block;
  margin: 0 auto;                      /* 参照元は button 既定の中央寄せで字面が中央に来る */
  width: .5625rem;                     /* 参照元の字面の実測 9px */
  height: 1rem;                        /* 参照元の字面の実測 16px（font-size 1rem × line-height 1） */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}


/* ==========================================================================
   §7-2  一覧の絞り込み（良品計画）— 下線タブ
        出典 parts3/filter.css。OKI は年の <select> しか持たず、読者別 5 分類に向かない
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════════
   filter — 一覧の絞り込み（下線タブ ＋ キーワード ＋ 年月 ＋ 分類チェック）

   参照元: https://www.ryohin-keikaku.jp/news の絞り込み区画
           （`div.pt-[40px].pb-[24px].md:pt-[64px]` の中身まるごと）
           ＋ 同サイトのヘッダーナビの下線タブ `button.border-b-2.pb-[2px].text-sm…`

   規則の出どころ（実ファイル）:
     ・https://www.ryohin-keikaku.jp/_next/static/css/f3b923114898fce6.css
       Tailwind v4 の生成物。`@layer base`（preflight ＋ 素の `select`）と
       `@layer components;@layer utilities`（ユーティリティ）に分かれている。
       ※ この CSS は Vercel の Security Checkpoint 越しなので curl では取れない。
         ページの中から `fetch()` して取った（scratchpad/site-audit/mujifilter/mf-pullcss.mjs）
     ・当たっている宣言は CDP の `CSS.getMatchedStylesForNode` で確認
       （mujifilter/mf-dig2.mjs → r2-rules.txt）
     ・:hover / 変数の実値は同 CSS を構文解析して抜いた（mujifilter/grep-*.txt, r3-vars.txt）

   ── 原文のまま持ってきたもの ──────────────────────────────────────────────
     ■ 下線タブ
       .border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}
       .border-transparent{border-color:#0000}
       .border-current{border-color:currentColor}
       .pb-\[2px\]{padding-bottom:2px}
       .tracking-\[0\.7px\]{--tw-tracking:.7px;letter-spacing:.7px}
       .whitespace-nowrap{white-space:nowrap}
       .transition-colors{transition-property:color,background-color,border-color,…}
         + transition-duration:var(--tw-duration,var(--default-transition-duration))  = .15s
         + transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))
                                                                = cubic-bezier(.4,0,.2,1)
       @media (hover:hover){.hover\:border-current:hover{border-color:currentColor}}
       タブ列の入れ子 … div.flex.items-center.gap-6（＝タブ同士の間 24px）
     ■ 入力
       .min-w-0 / .grow / .rounded{border-radius:.25rem} / .bg-gray-100 /
       .px-5{padding-inline:calc(var(--spacing) * 5)} = 20px /
       .py-2{padding-block:calc(var(--spacing) * 2)}  =  8px /
       .text-sm / .text-gray-800 / .placeholder-gray-500::placeholder /
       @media (min-width:1000px){.md\:w-\[335px\]{width:335px} .md\:grow-0{flex-grow:0}}
       → 1440 で 335×38・padding 8px 20px・角丸 4px・罫なし（実測と一致）
     ■ select（**ユーティリティではなく参照元の `@layer base` の素の要素規則**）
       select{border-style:var(--tw-border-style);border-width:1px;
              border-color:var(--color-gray-300);background-color:var(--color-white);
              font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));
              appearance:none;padding-block:8px;padding-inline:20px;
              background-image:url("data:image/svg+xml,…");
              background-position:right 1rem center;background-repeat:no-repeat;
              background-size:12px 8px;border-radius:.25rem;padding-right:3rem}
       無効時 … .cursor-not-allowed / .border-gray-200 / .bg-gray-100 / .text-gray-400
       → 1440 で 119×38（年）・85×38（月）・角丸 4px。実測と一致
     ■ 区画の骨格
       div.pt-[40px].pb-[24px].md:pt-[64px] > div.flex.flex-col.gap-6 >
         form.flex.w-full.items-center.gap-3.md:gap-[12px]
         div.h-0\.5.w-full.bg-gray-200            ← 2px の区切り
         div.grid.grid-cols-[60px_auto].gap-4.md:grid-cols-[103px_auto_auto_1fr].md:gap-6
         div.flex.w-full.gap-4.md:gap-6 > div.flex.grow.flex-col.gap-4.md:gap-3 >
           div.flex.flex-wrap.gap-4.md:gap-6 > button[role=checkbox]
       ラベル列 … .min-w-[60px] →（1000px 以上）.md:min-w-[103px]、.h-[38px] で中央合わせ
       チェック … div.relative.h-5.w-5.shrink-0 > div.h-5.w-5.rounded.border… ＋
                  svg.absolute.inset-0.h-5.w-5（path d="M4 10L8 14L16 6" stroke-width 2）
       媒体条件 … `md:` = **@media (min-width:1000px)**（768px ではない）、
                  hover は `@media (hover:hover)`
       字 … --text-sm/.875rem、--letter-spacing-ja/.05em、--line-height-normal/1.6、
            --font-weight-semibold/600、--font-weight-bold-ja/**600**
            （`font-bold` でも和文は 600 に落ちる。タブが 14px/600 なのはこの規則のため）
       間 … --spacing/.25rem（gap-1=4px / gap-2=8px / gap-3=12px / gap-4=16px / gap-6=24px）

   ── 変えたところ（1 行ずつ）──────────────────────────────────────────────
     1. 名前空間 … すべての規則を `.list-filter ` で囲った。参照元は素の
          Tailwind ユーティリティ（`.flex` `.grid` `.rounded` …）なので、そのまま置くと
          組み込み先の同名クラスと必ずぶつかる。特異度は全規則に一律 +0,1,0 なので
          規則同士の順番は 1 つも変わらない。@media の入れ子はそのまま。
     2. `@layer` を外した … 参照元は `@layer base` と `@layer components;@layer utilities`。
          こちらの土台（preview/oki/style.css）は @layer を 1 つも使っていないので、
          レイヤに入れると土台の非レイヤ規則に全部負ける（M-039）。table.css と同じ扱い。
     3. preflight の当て先 … 参照元 `*,::backdrop,:after,:before{…}` は文書全体に効く。
          ここでは `.list-filter` の中だけに絞った（宣言は原文のまま）。table.css と同じ。
     4. 変数名 … `--spacing` `--color-*` `--text-*` `--tw-*` は名前が一般的すぎるので
          `--flt-` を付けた。**値と式は原文のまま**（`calc(var(--flt-spacing) * 5)` など）。
     5. `--tw-border-style` … 参照元は `@property{initial-value:solid}` で作っている。
          `@property` を持ち込まず `:root` の素の変数にした。値は同じ `solid`。
     6. 色 … 下の :root に 1 行ずつ対応を書いた。とくに 2 つ、**1 つの token を
          「字」と「塗り」で分けた**（参照元は 1 つで兼ねているが、Remind の灰は
          `#6b6b6b` 1 色しか無く、塗りにすると白字が 4.0:1 しか出ないため）。
     7. 書体 … `:lang(ja) .font-bold,:lang(ja) .font-semibold` の
          `Numeric Font, Gothic MB101 DemiBold, …` を `"Noto Sans JP", system-ui, sans-serif` へ。
          `--font-family-sans` も同じ（トンマナ §1「和文は Noto Sans JP」）。
     8. select の三角 … data URI の `stroke='%233C3C43'` を `%236B6B6B` へ（色の置き換え）。
          寸法（12×8px）・位置（right 1rem center）・path は原文のまま。
     9. 落とした分岐 …
          ・タブの `hidden lg:flex`（@media (min-width:1224px)）。参照元はヘッダーなので
            1224px 未満でハンバーガーに畳んで**タブごと消える**。絞り込みのタブが
            スマホで消えるのは困るので外し、代わりに参照元の `.flex-wrap` を足した
            （どちらも参照元にある規則）。
          ・タブの右に立つ 1px の縦罫 `div.ml-5.h-[31px].w-px.bg-gray-900.lg:ml-8`
            （ヘッダー固有の飾り）。
          ・`[[data-hero-overlay=true]_&]:text-white`（ヒーロー写真に重なるときだけ白。
            絞り込みは写真の上に載らないので到達しない）。
          ・`.typesquare_option`（参照元のフォント配信サービスの目印。宣言を持たない）。
     10. 「選択時だけ着色」について … 参照元のヘッダーナビは **選択状態を持っていない**
          （/about も /ir も全項目が `border-transparent`、着色は `:hover` の
          `.hover\:border-current` だけ。CSS に `aria-current` / `aria-selected` /
          `data-active` を使った規則は **0 件**）。着色の半分（`.border-current`）は
          参照元がクラスとして持っているので、**選択タブにはその `.border-current` を
          そのまま当てた**。新しい規則は 1 行も書いていない。
     11. 検品で 3 回直した … ① 部品の根に参照元 body の `.text-sm-body` を畳み忘れて
          select の字送りが `normal` に戻り、幅が 119px ではなく 116px になっていた。
          ② `@layer base` の `a{text-decoration:inherit}` を落としていて、逃げ道リンクが
          既定の下線のままになり `hover:underline` が何も変えていなかった。
          ③ 名前空間を `.list-filter ` と子孫だけにしたので、**根そのものに付く
          `pt-[40px]` / `pb-[24px]` / `md:pt-[64px]` が 1 つも当たらず、区画の上下の
          余白が 0 になっていた**（数字だけ見ていると気づけない。スクリーンショットを
          見て「見出しにくっついている」で分かった）。
          3 つとも**エラーは出ず、見た目もそれらしい**（M-007 / M-019 / M-038 の族）。
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── 変数 ─────────────────────────────────────────────────────────────────────
   左が使う値 / 右のコメントが参照元の値。組み込み時はページの :root へ畳んでよい。 */
:root{
  /* 間・寸法（原文のまま） */
  --flt-spacing: .25rem;

  /* 字（原文のまま。--font-weight-bold-ja が 600 なのが効いている） */
  --flt-text-sm: .875rem;
  --flt-text-sm--line-height: calc(1.25 / .875);
  --flt-font-size-sm: .875rem;
  --flt-letter-spacing-ja: .05em;
  --flt-line-height-normal: 1.6;
  --flt-line-height-relaxed: 2;
  --flt-font-weight-semibold: 600;
  --flt-font-weight-bold: 700;
  --flt-font-weight-bold-ja: 600;

  /* 書体（変更 7）*/
  --flt-font-family-sans: "Noto Sans JP", system-ui, sans-serif;
    /* 元 "Numeric Font","Gothic MB101 Regular","Gothic MB101 Fallback",ui-sans-serif,… */

  /* 動き（原文のまま。ここが .15s / cubic-bezier(.4,0,.2,1) の出どころ）*/
  --flt-default-transition-duration: .15s;
  --flt-default-transition-timing-function: cubic-bezier(.4,0,.2,1);

  /* 枠線の既定（変更 5。元は @property --tw-border-style の initial-value）*/
  --flt-tw-border-style: solid;

  /* 色（変更 6）*/
  --flt-color-white:      var(--color-oki-white, #fbfbfb);     /* 元 #fff      */
  --flt-color-gray-900:   var(--color-oki-black, #0d0d0d);     /* 元 #1d1d1f   字 */
  --flt-color-gray-800:   var(--color-oki-black, #0d0d0d);     /* 元 #3c3c43   字（入力・分類・解除） */
  --flt-color-gray-500:   #6b6b6b;                             /* 元 #9d9da0   プレースホルダ */
  --flt-color-gray-400:   #6b6b6b;                             /* 元 #c4c4c6   無効時の字・解除のホバー
        （Remind の灰は #6b6b6b の 1 色。ここを #6b6b6b、上の 800 を #0d0d0d にしないと
          「解除」の resting と hover が同じ色になり、ホバーが黙って効かなくなる）*/
  --flt-color-gray-300:   var(--color-oki-line-gray, #e6e6e6); /* 元 #d8d8d9   1px の罫 */
  --flt-color-gray-200:   #ededed;                             /* 元 #ebebec   区切りと無効時の罫 */
  --flt-color-gray-100:   #ededed;                             /* 元 #f5f5f5   入力と無効時の地 */

  /* 1 つの token を「字」と「塗り」で分けた 2 つ（変更 6）。
     参照元は --color-gray-800 / --color-gray-900 をそのまま塗りにも使っている。
     Remind の灰は #6b6b6b の 1 色だけで、これを塗りにすると白字が 4.0:1 しか出ない。
     トンマナ §7「塗り（紺）か透過」・§3「差し色は青 1 色」に従って塗りだけ青にした。
     宣言そのものは原文のまま（.bg-gray-800{background-color:var(…)}）。 */
  --flt-color-gray-800-fill: var(--color-oki-red,  #003678);   /* 元 #3c3c43   ボタンの塗り */
  --flt-color-gray-900-fill: var(--color-oki-red,  #003678);   /* 元 #1d1d1f   選択したチェックの地と罫 */
}


/* ══ 参照元 @layer base（変更 2・3：レイヤを外し、当て先を .list-filter の中に絞った）══ */

.list-filter,
.list-filter *,
.list-filter *::before,
.list-filter *::after,
.list-filter *::backdrop{
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

.list-filter button,
.list-filter input,
.list-filter optgroup,
.list-filter select,
.list-filter textarea{
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  opacity: 1;
  background-color: #0000;
  border-radius: 0;
}

.list-filter button,
.list-filter input:where([type="button"], [type="reset"], [type="submit"]){
  appearance: button;
}

/* 参照元 @layer base の `a`。**これを落とすと下線が既定で付いたままになり、
   `hover:underline` が何も変えない**（1 回目の検品で実際にそうなっていた）。 */
.list-filter a{
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/* 参照元の素の `select`。ユーティリティではなくサイト側が `@layer base` に置いている
   1 本で、**この 1 本が「119×38 / 角丸 4px / 1px solid / padding 8px 20px / 右 3rem」の
   全部を持っている**。三角の色だけ変更 8。 */
.list-filter select{
  border-style: var(--flt-tw-border-style);
  border-width: 1px;
  border-color: var(--flt-color-gray-300);
  background-color: var(--flt-color-white);
  font-size: var(--flt-text-sm);
  line-height: var(--flt-tw-leading, var(--flt-text-sm--line-height));
  appearance: none;
  padding-block: 8px;
  padding-inline: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 12px 8px;
  border-radius: .25rem;
  padding-right: 3rem;
}

/* 参照元は <body class="text-sm-body bg-muji-white text-gray-900 antialiased"> と
   `body{font-family:var(--font-family-sans)}` で、この 4 つを文書全体に効かせている。
   単体で使えるように、それを部品の根へ畳んだ（宣言は原文のまま）。
   **`.text-sm-body` を落とすと select と区切りの字送りが `normal` に戻り、
   参照元の実測 ls0.7px と食い違う**（1 回目の検品で実際に食い違って直した）。
   組み込み時は土台側が同じものを持っているはずなので、この 1 本は落としてよい。 */
.list-filter{
  font-family: var(--flt-font-family-sans);
  color: var(--flt-color-gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--flt-font-size-sm);
  letter-spacing: var(--flt-letter-spacing-ja);
  line-height: var(--flt-line-height-relaxed);
}


/* ══ 参照元 @layer components;@layer utilities（変更 1：.list-filter で囲っただけ）══ */

/* ── 並べ方 ── */
.list-filter .flex{ display: flex }
.list-filter .grid{ display: grid }
.list-filter .hidden{ display: none }
.list-filter .flex-col{ flex-direction: column }
.list-filter .flex-wrap{ flex-wrap: wrap }
.list-filter .items-center{ align-items: center }
.list-filter .justify-center{ justify-content: center }
.list-filter .self-start{ align-self: flex-start }
.list-filter .grow{ flex-grow: 1 }
.list-filter .flex-shrink-0,
.list-filter .shrink-0{ flex-shrink: 0 }
.list-filter .relative{ position: relative }
.list-filter .absolute{ position: absolute }
.list-filter .inset-0{ inset: calc(var(--flt-spacing) * 0) }
.list-filter .w-full{ width: 100% }
.list-filter .min-w-0{ min-width: calc(var(--flt-spacing) * 0) }

.list-filter .grid-cols-\[60px_auto\]{ grid-template-columns: 60px auto }

/* ── 間 ── */
.list-filter .gap-1{ gap: calc(var(--flt-spacing) * 1) }
.list-filter .gap-2{ gap: calc(var(--flt-spacing) * 2) }
.list-filter .gap-3{ gap: calc(var(--flt-spacing) * 3) }
.list-filter .gap-4{ gap: calc(var(--flt-spacing) * 4) }
.list-filter .gap-6{ gap: calc(var(--flt-spacing) * 6) }

/* ── 寸法 ── */
.list-filter .h-5{ height: calc(var(--flt-spacing) * 5) }
.list-filter .w-5{ width: calc(var(--flt-spacing) * 5) }
.list-filter .h-0\.5{ height: calc(var(--flt-spacing) * .5) }
.list-filter .h-\[38px\]{ height: 38px }
.list-filter .min-w-\[60px\]{ min-width: 60px }
.list-filter .min-w-\[103px\]{ min-width: 103px }

/* ── 余白 ──
   `pt-[40px]` / `pb-[24px]` / `md:pt-[64px]` の 3 つだけは**部品の根そのもの**に付く
   （参照元 `div.pt-[40px].pb-[24px].md:pt-[64px]`）。名前空間（変更 1）を素朴に
   `.list-filter ` と書くと子孫しか当たらず、**根の余白が黙って 0 になる**ので、
   この 3 本だけ「根そのもの」も並べて書く。特異度は 0,2,0 のままで変わらない。 */
.list-filter.pt-\[40px\],
.list-filter .pt-\[40px\]{ padding-top: 40px }
.list-filter.pb-\[24px\],
.list-filter .pb-\[24px\]{ padding-bottom: 24px }
.list-filter .pb-\[2px\]{ padding-bottom: 2px }
.list-filter .px-5{ padding-inline: calc(var(--flt-spacing) * 5) }
.list-filter .py-2{ padding-block: calc(var(--flt-spacing) * 2) }
.list-filter .px-3{ padding-inline: calc(var(--flt-spacing) * 3) }
.list-filter .py-1\.5{ padding-block: calc(var(--flt-spacing) * 1.5) }

/* ── 形 ── */
.list-filter .rounded{ border-radius: .25rem }
.list-filter .border{ border-style: var(--flt-tw-border-style); border-width: 1px }
.list-filter .border-b-2{ border-bottom-style: var(--flt-tw-border-style); border-bottom-width: 2px }
.list-filter .border-transparent{ border-color: #0000 }
.list-filter .border-current{ border-color: currentColor }
.list-filter .border-gray-300{ border-color: var(--flt-color-gray-300) }
.list-filter .border-gray-200{ border-color: var(--flt-color-gray-200) }
.list-filter .border-gray-900{ border-color: var(--flt-color-gray-900-fill) }

/* ── 地 ── */
.list-filter .bg-white{ background-color: var(--flt-color-white) }
.list-filter .bg-gray-100{ background-color: var(--flt-color-gray-100) }
.list-filter .bg-gray-200{ background-color: var(--flt-color-gray-200) }
.list-filter .bg-gray-800{ background-color: var(--flt-color-gray-800-fill) }
.list-filter .bg-gray-900{ background-color: var(--flt-color-gray-900-fill) }

/* ── 字 ── */
.list-filter .text-sm{
  font-size: var(--flt-text-sm);
  line-height: var(--flt-tw-leading, var(--flt-text-sm--line-height));
}
.list-filter .text-sm,
.list-filter .text-xs{
  letter-spacing: var(--flt-letter-spacing-ja);
  line-height: var(--flt-line-height-normal);
}
.list-filter .text-sm,
.list-filter .text-sm-body{ font-size: var(--flt-font-size-sm) }
.list-filter .text-sm-body{
  letter-spacing: var(--flt-letter-spacing-ja);
  line-height: var(--flt-line-height-relaxed);
}
.list-filter .tracking-\[0\.7px\]{ --flt-tw-tracking: .7px; letter-spacing: .7px }
.list-filter .whitespace-nowrap{ white-space: nowrap }
.list-filter .underline{ text-decoration-line: underline }

.list-filter .text-white{ color: var(--flt-color-white) }
.list-filter .text-gray-900{ color: var(--flt-color-gray-900) }
.list-filter .text-gray-800{ color: var(--flt-color-gray-800) }
.list-filter .text-gray-400{ color: var(--flt-color-gray-400) }
.list-filter .placeholder-gray-500::placeholder{ color: var(--flt-color-gray-500) }

.list-filter .font-semibold{
  --flt-tw-font-weight: var(--flt-font-weight-semibold);
  font-weight: var(--flt-font-weight-semibold);
}
.list-filter .font-bold{
  --flt-tw-font-weight: var(--flt-font-weight-bold);
  font-weight: var(--flt-font-weight-bold);
}
/* 和文だけ 600 に落とす参照元の 2 本（書体名は変更 7 で差し替え）。
   下線タブが `font-bold` なのに 14px/**600** で出るのは、この 2 本があるから。 */
:lang(ja) .list-filter .font-semibold,
[data-locale="ja"] .list-filter .font-semibold{ font-weight: var(--flt-font-weight-semibold) }
:lang(ja) .list-filter .font-bold,
[data-locale="ja"] .list-filter .font-bold{ font-weight: var(--flt-font-weight-bold-ja) }
:lang(ja) .list-filter .font-bold,
:lang(ja) .list-filter .font-semibold,
[data-locale="ja"] .list-filter .font-bold,
[data-locale="ja"] .list-filter .font-semibold{
  font-family: var(--flt-font-family-sans);
  /* 元 Numeric Font, Gothic MB101 DemiBold, Gothic MB101 DemiBold Fallback, ui-sans-serif, … */
}

/* ── 手 ── */
.list-filter .cursor-pointer{ cursor: pointer }
.list-filter .cursor-not-allowed{ cursor: not-allowed }
.list-filter .antialiased{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }

/* ── 動き（ここが .15s / cubic-bezier(.4,0,.2,1)）── */
.list-filter .transition-colors{
  transition-property:
    color, background-color, border-color, outline-color, text-decoration-color,
    fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--flt-tw-ease, var(--flt-default-transition-timing-function));
  transition-duration: var(--flt-tw-duration, var(--flt-default-transition-duration));
}


/* ══ 媒体条件（原文のまま。md: は 768px ではなく 1000px）══ */

@media (min-width: 1000px){
  .list-filter .md\:block{ display: block }
  .list-filter .md\:grow-0{ flex-grow: 0 }
  .list-filter .md\:w-\[335px\]{ width: 335px }
  .list-filter .md\:min-w-\[103px\]{ min-width: 103px }
  .list-filter .md\:mr-\[12px\]{ margin-right: 12px }
  .list-filter .md\:ml-\[-24px\]{ margin-left: -24px }
  .list-filter.md\:pt-\[64px\],
  .list-filter .md\:pt-\[64px\]{ padding-top: 64px }
  .list-filter .md\:gap-3{ gap: calc(var(--flt-spacing) * 3) }
  .list-filter .md\:gap-6{ gap: calc(var(--flt-spacing) * 6) }
  .list-filter .md\:gap-\[12px\]{ gap: 12px }
  .list-filter .md\:grid-cols-\[103px_auto_auto_1fr\]{ grid-template-columns: 103px auto auto 1fr }
}

@media (hover: hover){
  .list-filter .hover\:border-current:hover{ border-color: currentColor }
  .list-filter .hover\:text-gray-400:hover{ color: var(--flt-color-gray-400) }
  .list-filter .hover\:underline:hover{ text-decoration-line: underline }
}


/* ==========================================================================
   §7-3  会社概要の表（帝人）— 罫は border-bottom 1 本
        出典 parts3/table.css。OKI の block-table-wrapper（§3・§4）は記事内の表に残す
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════════
   table — 会社概要の表（th/td 2 列・罫だけで組む型）
   ────────────────────────────────────────────────────────────────────────────
   参照元: https://www.teijin.co.jp/about/company/  （帝人「会社概要」）
   規則の出どころ（実ファイル・原文のまま）:
     https://www.teijin.co.jp/common-files/css/parts_pc.css  1614〜1687 行
       ＋ 1489〜1497 行 `[class^="table-layout"]` / `[class*="table-layout"]`
     https://www.teijin.co.jp/common-files/css/parts_sp.css  1469〜1560 行
       ＋ 1332〜1340 行
     https://www.teijin.co.jp/common-files/css/base.css      28 行（reset）/ 117 行（.gp-w-*per）
   取り方: node rules.mjs で「実際に当たっている宣言」を先に出し、
           そのうえで上の CSS を落として同じ規則を写した（両方一致を確認）。
           実測は node tj-measure.mjs（CDP の getComputedStyle）。

   ── 実測（帝人 /about/company/ 1440px）────────────────────────────────────
     器 .contents-wrap 1200px ／ table.table_inner 1200px（width:100%）
     th 300×73.8px（= 1200 × 25%）  地 #f7f7fa  16px/700  lh 24.8px  pad 24/30
     td 900×73.8px（= 1200 × 75%）  地 #fff     16px/400  lh 24.8px  pad 24/30
     罫: table に border-top 1px #ddd ／ 各セルに border-bottom 1px #ddd
         ＋ 各セルに border-right 1px #ddd（行の最後のセルだけ none）
     角丸 0 ／ 影なし ／ border-collapse: collapse
   ── 実測（同ページ 375px、data-layout-sp="vertical"）──────────────────────
     th/td が display:block・width:100% になって縦に積まれる
     th 375×51px  地 #f7f7fa  14px/700  pad 15px       罫なし（右も下も外す）
     td 375×57px  地 #fff     14px/400  pad 15/15/20   border-bottom 1px #dfdfe3
     tr 108px（= 51 + 57）／ 器は左右 -15px はみ出して画面いっぱいになる
     （帝人の .container が SP で padding:0 15px を持つため。下の「前提」参照）

   ── 罫について（選定.md の記述を実測で訂正した）────────────────────────────
     選定.md は「罫は border-bottom 1px #ddd の 1 本だけ（縦罫なし）」と書いているが、
     実規則には `border-right: 1px solid #ddd` がある。行の最後のセルだけ none に
     しているので、2 列の表では th と td のあいだに 1px の縦罫が 1 本引かれる。
     ここは実規則のまま持ってきた（消していない）。

   ── 原文のまま持ってきたもの ──────────────────────────────────────────────
     セレクタ名（.table-layout-v2 / .table_inner / .cell-style2 / .table_title /
     .table_caption / data-layout-sp="vertical" / .gp-w-025per / .gp-w-075per）、
     入れ子、@media の 2 本（print, screen and (min-width:768px) ／
     only screen and (max-width:767px)）、padding・border・width・vertical-align・
     text-align・font-weight・margin の値、:last-child / th + th の分岐。

   ── 変えたところ（1 行ずつ）──────────────────────────────────────────────
     1. 色トークンの中身だけ差し替え（値の役割と本数は不変）
          #ddd（PC の罫）    → var(--color-oki-line-gray)  #e6e6e6
          #dfdfe3（SP の罫） → var(--color-oki-line-gray)  #e6e6e6
            ※ 参照元は PC と SP で罫の灰を 2 つ使い分けているが、
              トンマナ §3「灰は #6b6b6b（字）と #ededed（面）の 2 つだけ」に従い
              罫は 1 つに寄せた（既存部品 parts2/company.css と同じ寄せ方）
          #f7f7fa（th の地） → var(--color-oki-gray3)      #ededed  ← 選定.md §3 の指定
          #fff（td の地）    → var(--color-oki-white)       #fbfbfb
          #333（字）         → var(--color-oki-black)       #0d0d0d
     2. font-size: 1.6rem → 16px。参照元は html{font-size:62.5%} を敷いていて
        1.6rem = 16px。その前提をこちら側へ持ち込むとページ全体の字が変わるので、
        実測値と同じ px で書いた（.table_caption の 1.6rem も同じ）
     3. 書体: 参照元の "Noto Sans","ヒラギノ角ゴ Pro W3",… → "Noto Sans JP", system-ui,
        sans-serif（トンマナ §1）
     4. .gp-w-025per / .gp-w-075per を .table-layout-v2 の下へスコープした。
        参照元では base.css の全域ユーティリティ（width:N%!important を 100 本）だが、
        !important 付きの汎用名を全域に置くと組み込み側とぶつかるため
     5. reset（margin/padding/border 0・box-sizing・border-collapse）も
        .table-layout-v2 の下へスコープした。参照元は html,body,… と body * に
        当てている（サイト全体の reset）
     6. .cell-style1 の 3 本（#adadad / #787878 / 色付き thead）は落とした。
        この表は thead も cell-style1 も使わない到達しない分岐で、
        残すと灰が 2 つ増えてトンマナ §3 に反するため
     7. 文言は原稿.md §15（会社概要の表）のもの
     8. .table_caption を SP 側にも 1 本足した（参照元は PC 側にしか持たない）。
        margin/weight は PC の同じ規則をそのまま。font-size は宣言しない
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── 前提（参照元の「土台」側から持ってきた 3 つ。組み込み側に既にあれば消してよい）──
   参照元は body に font: 1.8rem/1.55 …（base.css 68 行）を敷いていて、セルは
   行の高さをそこから継いでいる。74px の行 = 24 + 24.8 + 24 + 1 はこの 1.55 が要る。
   SP は 14px/1.5（実測 21px）。参照元の表側の規則は SP で font-size を宣言せず
   継承に任せているので、その継承元をここで作っている。 */
.table-layout-v2{
  color: var(--color-oki-black);
  font-family: "Noto Sans JP", system-ui, sans-serif;   /* 参照元: "Noto Sans", ヒラギノ… */
  font-size: 16px;                                      /* 参照元: body 1.8rem を継いで PC 18px。
                                                           セル側が 1.6rem を宣言するので継承値は
                                                           見えない。SP のために 16 に置いた */
  line-height: 1.55;                                    /* 参照元: body 1.8rem/1.55 */
}
@media only screen and (max-width: 767px){
  .table-layout-v2{
    font-size: 14px;                                    /* 実測: SP のセルは 14px を継承 */
    line-height: 1.5;                                   /* 実測: SP は 21px / 14px = 1.5 */
  }
}
/* 参照元の reset（html,body,… と body * に当たっている分）を部品の中だけに写した */
.table-layout-v2 table,
.table-layout-v2 caption,
.table-layout-v2 tbody,
.table-layout-v2 thead,
.table-layout-v2 tfoot,
.table-layout-v2 tr,
.table-layout-v2 th,
.table-layout-v2 td{
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
.table-layout-v2 table{
  border-collapse: collapse;
  border-spacing: 0;
}
.table-layout-v2,
.table-layout-v2 *,
.table-layout-v2 *::before,
.table-layout-v2 *::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* 参照元 base.css 117 行の全域ユーティリティ 100 本のうち、この表が使う 2 本だけ。
   スコープを .table-layout-v2 の下へ寄せた（変更点 4） */
.table-layout-v2 .gp-w-025per{ width: 25% !important; }
.table-layout-v2 .gp-w-075per{ width: 75% !important; }


/* ══ PC ══ 参照元 parts_pc.css（@media print, screen and (min-width: 768px)）══ */
@media print, screen and (min-width: 768px){

  [class^="table-layout"]{
    overflow-x: auto;
    padding-bottom: 1px;
  }
  [class*="table-layout"] th > *:first-child,
  [class*="table-layout"] th > *:first-child > [class*="heading-lv"],
  [class*="table-layout"] td > *:first-child,
  [class*="table-layout"] td > *:first-child > [class*="heading-lv"]{
    margin-top: 0 !important;
  }

  /* v2 */
  .table-layout-v2{
    margin-top: 1.5em;
  }
  .table-layout-v2 .table_inner{
    width: 100%;
    border-top: 1px solid var(--color-oki-line-gray);     /* 参照元: #ddd */
  }
  .table-layout-v2 caption{
    margin-bottom: .5em;
    text-align: left;
  }
  .table-layout-v2 .table_title{
    margin-bottom: .5em;
    font-weight: 700;
  }
  .table-layout-v2 caption > *:first-child,
  .table-layout-v2 caption > *:first-child > [class*="heading-lv"]{
    margin-top: 0 !important;
  }
  .table-layout-v2 caption > *:last-child{
    margin-bottom: 0 !important;
  }
  .table-layout-v2 .table_caption{
    margin: .5em 0;
    font-size: 16px;                                     /* 参照元: 1.6rem（= 16px） */
    font-weight: 300;
  }
  .table-layout-v2 th,
  .table-layout-v2 td{
    padding: 24px 30px;
    border-right: 1px solid var(--color-oki-line-gray);   /* 参照元: #ddd */
    border-bottom: 1px solid var(--color-oki-line-gray);  /* 参照元: #ddd */
    background-color: var(--color-oki-white);             /* 参照元: #fff */
    font-size: 16px;                                     /* 参照元: 1.6rem（= 16px） */
    font-weight: 400;
    text-align: left;
    vertical-align: top;
  }
  .table-layout-v2 tr > th:last-child,
  .table-layout-v2 tr > td:last-child{
    border-right: none;
  }
  .table-layout-v2 thead th{
    text-align: center;
    vertical-align: middle;
  }
  .table-layout-v2 th > *:first-child,
  .table-layout-v2 th > *:first-child > [class*="heading-lv"],
  .table-layout-v2 td > *:first-child,
  .table-layout-v2 td > *:first-child > [class*="heading-lv"]{
    margin-top: 0 !important;
  }
  .table-layout-v2 .cell-style2{
    background-color: var(--color-oki-gray3);             /* 参照元: #f7f7fa */
  }
  .table-layout-v2 th.cell-style2{
    font-weight: 700;
  }
}


/* ══ SP ══ 参照元 parts_sp.css（@media only screen and (max-width: 767px)）══ */
@media only screen and (max-width: 767px){

  [class^="table-layout"]{
    overflow-x: auto;
    padding-bottom: 1px;
  }
  [class*="table-layout"] th > *:first-child,
  [class*="table-layout"] th > *:first-child > [class*="heading-lv"],
  [class*="table-layout"] td > *:first-child,
  [class*="table-layout"] td > *:first-child > [class*="heading-lv"]{
    margin-top: 0 !important;
  }

  /* v2 */
  .table-layout-v2{
    margin-top: 1.5em;
  }
  .table-layout-v2 .table_inner{
    width: 100%;
    border-top: 1px solid var(--color-oki-line-gray);     /* 参照元: #ddd */
  }
  .table-layout-v2 caption{
    margin-bottom: .75em;
    padding: 0 15px;
    text-align: left;
  }
  .table-layout-v2 .table_title{
    margin-bottom: .5em;
    font-weight: 700;
  }
  .table-layout-v2 caption > *:first-child,
  .table-layout-v2 caption > *:first-child > [class*="heading-lv"]{
    margin-top: 0 !important;
  }
  .table-layout-v2 caption > *:last-child{
    margin-bottom: 0 !important;
  }
  /* 参照元の SP 側には .table_caption が無い（PC 側にしか書かれていない）。
     無いままだと注記が表に貼り付くので、PC と同じ margin/weight をここに置いた。
     font-size は宣言しない（参照元の SP がセルの字も継承に任せているのと同じ）。→ 変更点 8 */
  .table-layout-v2 .table_caption{
    margin: .5em 0;
    font-weight: 300;
  }
  .table-layout-v2 th,
  .table-layout-v2 td{
    padding: 15px;
    border-right: 1px solid var(--color-oki-line-gray);   /* 参照元: #dfdfe3 */
    border-bottom: 1px solid var(--color-oki-line-gray);  /* 参照元: #dfdfe3 */
    background-color: var(--color-oki-white);             /* 参照元: #fff */
    font-weight: 400;
    text-align: left;
    vertical-align: top;
  }
  .table-layout-v2 tr > th:last-child,
  .table-layout-v2 tr > td:last-child{
    border-right: none;
  }
  .table-layout-v2 thead th{
    text-align: center;
    vertical-align: middle;
  }
  .table-layout-v2 th > *:first-child,
  .table-layout-v2 th > *:first-child > [class*="heading-lv"],
  .table-layout-v2 td > *:first-child,
  .table-layout-v2 td > *:first-child > [class*="heading-lv"]{
    margin-top: 0 !important;
  }
  .table-layout-v2 .cell-style2{
    background-color: var(--color-oki-gray3);             /* 参照元: #f7f7fa */
  }
  .table-layout-v2 th.cell-style2{
    font-weight: 700;
  }

  /* 縦積み。参照元の -15px は「SP の器が padding:0 15px を持つ」前提とセット
     （帝人 layout_sp.css 495 行 .container{padding:0 15px 120px}）。
     組み込み側の器が左右 15px を持たないなら、この 1 本を外すこと。 */
  .table-layout-v2[data-layout-sp="vertical"]{
    margin-right: -15px;
    margin-left: -15px;
  }
  .table-layout-v2[data-layout-sp="vertical"] col,
  .table-layout-v2[data-layout-sp="vertical"] tbody,
  .table-layout-v2[data-layout-sp="vertical"] tr,
  .table-layout-v2[data-layout-sp="vertical"] th,
  .table-layout-v2[data-layout-sp="vertical"] td{
    display: block;
    width: 100% !important;
  }
  .table-layout-v2[data-layout-sp="vertical"] th{
    border-right: none;
    border-bottom: none;
  }
  .table-layout-v2[data-layout-sp="vertical"] th + th{
    border-top: 1px solid var(--color-oki-line-gray);     /* 参照元: #dfdfe3 */
  }
  .table-layout-v2[data-layout-sp="vertical"] td{
    padding-bottom: 20px;
  }
}


/* --------------------------------------------------------------------------
   §7-4  記事の見出しの空き（日建設計）— 前 108px・後 24px の非対称
   出典 parts3/article.css §5（原文の margin-block だけ）。

   ★ 採ったのは**空きだけ**。字の大きさ・書体・重さ・柱の幅・本文の組みは
     OKI の detail.css（§3）のまま。だから .m-hdgLg / .m-hdgMd / .m-hdgSm は
     OKI の見出し（.block-heading-base + .t-headline-*）に**足して**使う。

   ★ ここだけ .rm-article を 1 段かぶせた。理由（唯一の実衝突）。
     OKI は見出しの前の空きを **4 本**で決めていて、実測で当たっていたのは次のとおり:
       .container-block .main .block-paragraph-base + h2   (0,3,1) → PC 130px  ← これが勝っていた
       .container-block .main .block-paragraph-base + *    (0,3,0) → PC  50px
       * + h2.block-heading-base                           (0,1,1) → PC 120px
       .container-block h3.block-heading-base              (0,2,1) → PC  48px
     素の .m-hdgLg は (0,1,0)、.rm-article .m-hdgLg でも (0,2,0)、
     .container-block .rm-article .m-hdgLg でも (0,3,0) で、**いちばん強い (0,3,1) に負ける**。
     実測でも 108px のはずが 130px（375px では 67.3px）になっていた ―― エラーは出ない。
     そこで OKI と同じ深さになるよう .container-block .main の下に .rm-article を
     1 段前置して (0,4,0) にした。**宣言は 1 文字も変えていない。**
     したがって .rm-article は .container-block > .body > .main の中に置くこと。
   -------------------------------------------------------------------------- */

.rm-article{
  --block-2xl: 80px;          /* 参照元 article.css §0 の値そのまま */
}
@media screen and (width <= 750px){
  .rm-article{
    --block-2xl: 56px;
  }
}

.container-block .main .rm-article .c-hdg + * {
  margin-top: 0 !important;
}
.container-block .main .rm-article .c-hdg + .c-hdg .m-hdgLg,
.container-block .main .rm-article .c-hdg + .c-hdg .m-hdgMd,
.container-block .main .rm-article .c-hdg + .c-hdg .m-hdgSm {
  margin-top: 0 !important;
}

.container-block .main .rm-article .m-hdgLg {
  margin-block: 108px 24px;
}
@media only screen and (max-width: 750px) {
  .container-block .main .rm-article .m-hdgLg {
    margin-block: 64px 16px;
  }
}

.container-block .main .rm-article .m-hdgMd {
  margin-block: var(--block-2xl) 24px;
}
@media only screen and (max-width: 750px) {
  .container-block .main .rm-article .m-hdgMd {
    margin-block: var(--block-2xl) 16px;
  }
}

.container-block .main .rm-article .m-hdgSm {
  margin-block: 64px 16px;
}
@media only screen and (max-width: 750px) {
  .container-block .main .rm-article .m-hdgSm {
    margin-block: 48px 12px;
  }
}

/* 記事の 1 枚目の見出しだけは、器の頭で 108px を足さない（OKI の .body が
   すでに 100px 空けている）。原文の隣接リセット（.c-hdg + *）と同じ考え方を
   :first-child に当てたもので、宣言は原文の margin-top:0 と同じ。 */
.container-block .main .rm-article > :first-child {
  margin-top: 0;
}


/* ==========================================================================
   §8  この 1 枚の最後の押さえ（2 本だけ。どちらもトップの style.css との衝突）
   ========================================================================== */

/* 8-1  トップの style.css は --scrollbar-width:15px を持っている。読み込み順で
   こちらが後なので 0px が勝つ。OKI 同様、実行時は script.js が実測値を書き込む。 */
:root{
  --scrollbar-width: 0px;
}

/* 8-2  ★ 名前がぶつかっている 1 本。
   トップの style.css は **素の** `.footer` に
     position:sticky; top:100vh; padding:50px 10px 10px; overflow:hidden
   を敷いている（ページのフッター = <footer class="footer"> のためのもの）。
   OKI の下層の器は `.container-block > .footer` という **同じ名前の div** を使う
   （中身は兄弟ページ一覧）。そのまま重ねると一覧が画面の下に貼り付き、
   要らない padding と overflow:hidden まで付いてくる。
   OKI 側の規則（.container-block .footer:has(*){margin-top:140px} など）は
   margin しか宣言していないので、位置と padding は誰も打ち消さない。
   ここだけ素の初期値に戻す。**新しい見た目は 1 つも足していない。** */
.container-block > .footer{
  position: static;
  top: auto;
  padding: 0;
  overflow: visible;
}


/* ==========================================================================
   §9  触れる大きさと字の下限（この 1 枚で「足した」規則はここだけ）
   ========================================================================== */

/* 9-1  12px の床。
   OKI の寸法はすべて calc(N / --screen-size * 内容幅) で、SP の設計幅は 390px。
   375px の窓では全部が 375/390 = 0.9615 倍になるので、**12px の札は 11.54px**になる。
   トップの style.css も同じ問題に max(12px, …) で床を敷いている
   （.footer .bottom .list と .copyright の 2 本）。ここは同じやり方を下層の札へ広げただけで、
   max() の中は OKI の式そのまま。390px 以上では 1px も変わらない。 */
@media (max-width: 389.98px){
  .t-label-xl, .t-label-lg, .t-label-md, .t-label-sm,
  html[lang=ja] .t-label-xl, html[lang=ja] .t-label-lg,
  html[lang=ja] .t-label-md, html[lang=ja] .t-label-sm,
  .block-title-base .category,
  .breadcrumbs-base .label,
  .list-news-thumbnail .list-news-thumbnail__category{
    font-size: max(12px, calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))));
  }
}

/* 9-2  押せるものの床 44px。手は 2 つに分けてある。
     (a) 面が伸びても形が壊れないもの … min-height:44px
         （トップの style.css が .footer .bottom .list a に使っているのと同じ手）
     (b) 玉や 1 行のリンクのように伸ばすと参照元の形が変わるもの
         … 透明な ::after を中央に置いて**当たり判定だけ**広げる。見た目は 1px も動かない。
     どちらも「参照元の寸法を書き換えない」ことを優先している。 */

/* (a) 伸ばしてよいもの */
.header a:has(> .logo){
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.button-menu{
  min-width: 44px;
  min-height: 44px;
}
.block-side-nav .items a{
  display: flex;
  align-items: center;
  min-height: 44px;
}
.list-filter [role="tab"],
.list-filter [role="checkbox"],
.list-filter [data-filter-reset],
.list-filter a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.list-filter input,
.list-filter select,
.list-filter button[type="submit"]{
  min-height: 44px;
}
.synergy-nform-root input,
.synergy-nform-root select{
  min-height: 44px;
}

/* (b) 見た目を動かさず当たり判定だけ広げるもの */
/* パンくずは 12px・高さ 15.6px の 1 行。字を大きくすると OKI の型が崩れるので、
   透明の当たり判定を中央に重ねる。項目どうしの間は 14px + 点 4px + 14px = 32px 空いていて、
   44px にしても片側 4.4px しか出ないので隣とは重ならない。 */
.breadcrumbs-base .label:any-link{
  position: relative;
}
.breadcrumbs-base .label:any-link::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  width: 100%;
  height: 44px;
}
/* 下線タブは「字の幅ぶんだけ下線を引く」のが参照元の形。器を広げると下線も伸びるので、
   ここも当たり判定だけ重ねる。タブどうしの間は gap 24px。 */
.list-filter [role="tab"]{
  position: relative;
}
.list-filter [role="tab"]::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  width: 100%;
  height: 44px;
}
/* 玉は 2rem（32px）で、玉どうしの間は gap 1rem（16px）。
   44px に広げると片側 6px ずつ増えるだけなので、隣の玉とは重ならない（16 > 12）。 */
.pagesearch-pagination__controls .pagination-btn::after,
.pagesearch-pagination__controls .pagination-page::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}


/* ══════════════════════════════════════════════════════════════════════════
   §10  出現（Takram / 移植 1 部品）
   ────────────────────────────────────────────────────────────────────────────
   出どころ: craft/rules/studio-takram.css:25-33
             = craft/rules/_src/studio-takram-1440-5.css:25-33
             = https://www.takram.com/_next/static/immutable/chunks/40rgurvq-v8y0.css
             セレクタ .HomeContentItem-module-scss-module__zVAnPa__root[data-revealed=…]
   ★ 値は 1 つも変えていない（opacity / translateY(8px) / 0.5s / cubic-bezier(0.6, 0, 0.2, 1.05)）。
     クラス名だけ、うちの markup に無いので属性セレクタ側だけを使う。

   ★ M-033（初期値を不可視にして JS で戻す → 全画面白紙）を踏まないための決め:
     **HTML には data-revealed を 1 文字も書かない。** lower.js が付ける。
     だから JS が 1 行も動かない機械では [data-revealed] が 1 つも無く、中身は素で見える。
     参照元が持っている @media (scripting: none) / (prefers-reduced-motion: reduce) の
     逃げ道も原文のまま入れてある（二重の保険）。

   ★ 掛ける先と数は lower.js §3 で決めている（1 ページ 15 個まで＝トンマナ §9 #1 の合格帯 0〜15）。
   ══════════════════════════════════════════════════════════════════════════ */
.container-block [data-revealed="pending"]{ opacity: 0; transform: translateY(8px); }
@media (scripting: none), (prefers-reduced-motion: reduce) {
  .container-block [data-revealed="pending"]{ opacity: 1; transform: none; }
}
.container-block [data-revealed="shown"]{ transition: opacity 0.5s cubic-bezier(0.6, 0, 0.2, 1.05), transform 0.5s cubic-bezier(0.6, 0, 0.2, 1.05); }
@media (prefers-reduced-motion: reduce) {
  .container-block [data-revealed="shown"]{ transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §11  和文の折り返し（NDC / 移植 1 部品）
   ────────────────────────────────────────────────────────────────────────────
   出どころ: craft/rules/design-ndc.css:129-139（._text_1apke_19）
             craft/rules/design-ndc.css:380-387（[lang=ja] ._tagline_1vb9k_35）
             = 日本デザインセンター https://www.ndc.co.jp/ の
               css-ndc-index.C6KN8BkU.css / ab-index.DgmACu1Z.css
   ★ NDC は「1 文字ずつ動かす」代わりに**和文の折り返しに投資している**（craft/design.md motions）。
     本文     … text-wrap: pretty  + word-break: auto-phrase
     短い見出し… word-break: auto-phrase + text-wrap: balance
   ★ 和文は既定で**語の途中で折れる**。auto-phrase は文節で折る（lang="ja" が要る。殻は持っている）。
   ★ 取ったのはこの 4 宣言だけ。同じ規則にある font-family / font-feature-settings /
     letter-spacing は**取らない**（うちの字の設計を上書きしてしまうため）。
   ★ 対応していない機械では 1 つも効かないだけで、折り返しが今のまま＝壊れない。
   ══════════════════════════════════════════════════════════════════════════ */
.container-block .main .block-paragraph-base p{
  text-wrap: pretty;
  word-break: auto-phrase;
}
.container-block .main .block-heading-base > span:last-child,
.container-block .block-title-base .title{
  word-break: auto-phrase;
  text-wrap: balance;
}


/* ══════════════════════════════════════════════════════════════════════════
   §12  節の見出しに罫を引く（Konel / §16 と同じ 1 部品を本文にも当てる）
   ────────────────────────────────────────────────────────────────────────────
   出どころ: craft/rules/studio-konel.css §2・§3
             = craft/rules/_src/studio-konel-1440-27.css:2-3（.css-1gcgofq）
               craft/rules/_src/studio-konel-1440-28.css:2-3（.css-10gp97m の padding）
   ★ oki-copy/style.css §16（フッターのナビ）と**同じ 1 部品**を、こちらにも当てている。
     社を増やしていない（トンマナ §11「1 社から 1 部品まで」）。
   ★ `border-top: 1px solid` と書いて**色を書かない** ＝ 罫の色は見出しの文字色に必ず揃う。
   ★ padding は足さない。Konel も罫を持つ要素（.css-1gcgofq）には padding が無く、
     10px は中の <a> が持っている値なので、器の側に写すと二重になる。
     実測でも padding-top:10px を入れると **4×4px の点（absolute / top:.2125em）だけが
     字から 11px 置き去りになる**（M-038 と同型）。罫は見出しの行の上に直接立つ。
     見出しの上の空き（前 108px）は日建設計の §7-4 のまま。罫はその 108px の下端に立つ。
   ★ なぜ節の見出しなのか: 下層 32 節のうち **罫を 1 本も持たない節が 19**（craft/質素さの診断.md）。
     節を増やさずに密度を足せる場所がここしか無い（本文は「見出し＋段落」しか持っていない）。
   ══════════════════════════════════════════════════════════════════════════ */
.container-block .main > h2.block-heading-base,
.container-block .main > .rm-article > h2.block-heading-base,
/* ↓ craft2/article.css §7 で足した 1 段。テンプレは見出しを <div class="c-hdg"> で包むので、
     `>`（直下）で書いた上の 2 本は記事本文では 1 本も当たっていなかった（M-039 と同型）。
     宣言は §12 の原文と同一。選択子に .c-hdg の 1 段を足しただけ。 */
.container-block .main > .rm-article > .c-hdg > h2.block-heading-base{
  border-top: 1px solid;
}



/* ══════════════════════════════════════════════════════════════════════════
   §13  記事詳細（目次・囲み・引用・表・前後の記事）
   ──────────────────────────────────────────────────────────────────────────
   出どころ: craft2/article.css（2026-09-09 に作り替えた部品を、そのまま土台へ畳んだ）
   1 宣言ごとの出どころは craft2/出典.md の表に同じ順で載せてある。
   ★ 土台へ畳むにあたって変えたのは **選択子だけ** 3 か所（下に ★ 印で書いた）。
     宣言（px・ms・曲線・色）は 1 つも変えていない。
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   article.css — 記事詳細の部品（2026-09-09）
   ----------------------------------------------------------------------------
   読み込む順:
       <link href="../oki-copy/style.css">   ← トップと同じ 1 枚
       <link href="../lower/lower.css">      ← 下層 31 枚の土台（7,890 行）
       <link href="./article.css">           ← このファイル  ★ 必ず最後

   ★ この工程では lower/lower.css と theme-new/ を 1 文字も書き換えていない。
     ここに在るのは「土台に既に在る部品を記事へ配線したときに、それだけでは
     届かない分」だけ。**11 規則・16 宣言**。内訳は
       ・選択子だけ実際の markup に合わせ直したもの（宣言は土台の原文と同一）… 4
       ・別の場所にある同じ宣言を、この場所へ持ってきたもの                … 8
       ・**土台の宣言を意図して変えたもの**                                … 1（§1-3 の色。理由は実測）
       ・既存のトークンだけで組んだ式                                      … 3
     （出典表は craft2/article.md §5 に 1 宣言ずつ）

   ★ 出どころとして認めた 3 つ（トンマナ.md §11 / craft/出典.md の決め）
       (a) 参照元サイトから抜いた実規則 … craft/rules/*.css のファイル名と行
       (b) OKI の実規則 … 既に oki-copy/style.css / lower/lower.css に在るもの
       (c) 既にある変数・クラスの組み合わせ（**新しい値を作らない**）
     **px・ms・曲線・色をこのファイルで新しく決めた箇所は 0 件。**
     図・アイコン・SVG も 1 つも描いていない。

   ★ 動き（transition / animation / transform）は 1 つも足していない。
     止めるのは「記事に新しく持ち込む `.side` が土台の側で持っている transition」
     1 本だけ（§8）。既に在る出現（§10 Takram）と下線（[data-underline-anime-*]）は
     土台側に逃げ道が書いてある。

   ★ 初期値を不可視にして JS で戻す実装はしていない（M-033）。
     目次はサーバが HTML に書く。JS は aria-current を動かすだけで、
     JS が 1 行も動かなくても目次も本文も全部読める。
   ============================================================================ */


/* ==========================================================================
   §1  目次を「追従する左の列」に置く
   --------------------------------------------------------------------------
   使う部品（どちらも土台に在って、記事では 1 度も使っていなかった）:
     .container-block .body:has(.side) … lower.css:282-289（OKI shell.css）
     .block-side-nav                   … lower.css:292-330（OKI shell.css）

   ★ なぜ block-toc-base ではないか（指示から外した 1 点。理由は 3 つとも実測）
     1. `.block-toc-base` の PC 幅は `calc(var(--column-unit)*30)` = 1440 で 900px
        （lower.css:4900）。本文の柱と同じ幅で、9 カラム（270px）の追従列に入らない。
        器の幅を書き換えれば入るが、中の `.list` は `flex-wrap` の横流し
        （lower.css:4902）なので 210px では 1 項目 1 行になり、
        結局 `.block-side-nav .items` と同じ形にしかならない。
     2. 現在地（黒字 ＋ 左端に 4px の青い点）と 44px の当たり判定は
        **`.block-side-nav` 側にだけ既に規則が在る**
        （lower.css:327-329 の `[aria-current=page|true]` / lower.css:7747-7750 の min-height:44px）。
        `.block-toc-base` に同じ見せ方を付けるには、この宣言を書き写すことになる。
     3. `.block-toc-base` の本体は Alpine の `.-hidden`（lower.css:4898）による開閉で、
        開閉を捨てると残るのは灰の器だけ。
     ⇒ `.block-toc-base` の 21 規則は**引き続き未使用**。固定ページ（採用要項など、
        OKI が使っている用途 = oki/lower/page.md §10）に残す。

   ★ 数（実測。seo/html/ の 52 本を数えた）
     h2 は 1 本あたり 最小 5 / 中央 6 / 最大 7 本。h2 の字数は 中央 28 / 最大 45 字。
     文書の高さは 1440px で 16,040px（本文 10,692 字の 1 本を実測）。
     頭に置くだけの目次が画面に居るのは最初の 600px ぶん = **全体の 3.7%**。
     追従にすると 100%。これが器を差し替えた理由の全部。
   ========================================================================== */

/* 1-1  SP は「目次 → 本文」の順に。
   出どころ (c): lower.css:282 の
       .container-block .body:has(.side){ … grid-template-areas:"main" "side" }
   の**並びだけ**入れ替えた。値（"main" / "side"）は原文のもので、新しい値は無い。
   OKI がこれを "main" "side" にしているのは、side の中身が一覧の絞り込み
   （読み終わってから使うもの）だから。目次は本文の前に無いと役に立たない。
   ★ .rm-article-body を付けた頁だけに効く。一覧型 13 枚の並びは 1px も動かない。
   ★ **必ず @media (max-width:1023.98px) に入れること。** 素で書くと特異度 (0,4,0) が
     PC 側の (0,3,0)（lower.css:284・@media の中）に勝ってしまい、1024px 以上でも
     1 列に積まれる（実測: 本文の柱が 900px → 270px に潰れた。エラーは出ない）。 */
@media (max-width: 1023.98px){
  .container-block .body.rm-article-body:has(.side){
    grid-template-areas: "side" "main";
  }
}

/* 1-2  追従列が画面より高いときに最下段が読めなくなるのを止める。
   出どころ (b): oki-copy/style.css:1452（OKI の `.home-oki-numbers .track-mobile{overflow-x:auto}`）と
   lower.css:5245（同じ規則の下層版）。**向きを縦にしただけ。**
   高さの上限は `top` に既に入っている式をそのまま引く:
       lower.css:288  .container-block .side{ top: calc(calc(var(--column-unit)*1) + var(--header-size)) }
   ⇒ 上端がそこに来るので、下に残る高さは 100dvh − その値。新しい数は 1 つも無い。
   ★ 実測（下の §検品）: 7 項目・最長 45 字でも 1440×900 では溢れない。
     溢れるのは縦 700px 未満の窓で、そのときだけこの 2 行が効く。 */
@media (min-width: 1024px){
  /* ★ 土台へ畳むにあたって `.rm-article-body` の 1 段をかぶせた（craft2 の単体版は
     この 1 段が無い）。`.block-side-nav` は recruit / recruit/jobs / entry ほか 5 枚でも
     使われているので、素で書くとその 5 枚の追従列にも上限がかかる。宣言は 1 つも変えていない。 */
  .container-block .body.rm-article-body .side .block-side-nav{
    max-height: calc(100dvh - calc(calc(var(--column-unit) * 1) + var(--header-size)));
    overflow-y: auto;
  }
}

/* 1-3  目次の項目の字の色を、本文と同じ `--color-oki-black2` にする。
   ★ **これが OKI の宣言を意図して変えている唯一の 1 か所**（値は既存トークン。新しい色ではない）。
   出どころ (c): lower.css:2521-2525 `.block-paragraph-base{ … color:var(--color-oki-black2) }`（本文の字の色）。
   何を直したか（実測）:
     `.block-side-nav .items a{ color:var(--color-oki-gray) }`（lower.css:313）は #909090。
     目次の地 `--color-oki-bg-gray` #f4f4f4 に対して **2.90:1** で、14px の字に要る
     4.5:1 に届かない（#717171 の gray2 でも 4.21:1 で届かない）。
   なぜ OKI ではそれで成り立つのか:
     `.block-side-nav` は**カテゴリの絞り込み**で、現在地の 1 つだけが行き先。
     残りを淡くするのは意味がある。**目次は全項目が行き先**なので、同じ淡さは合わない。
   現在地との差は消えない: 現在地は lower.css:327 が `--color-oki-black` #0d0d0d（17.67:1）に上げ、
   さらに lower.css:328-329 の **4px の青い点**が左端に出る。差は「色 ＋ 点」で付く。
   （#282828 は 13.40:1）*/
/* ★ 同じく `.rm-article-body` の 1 段をかぶせた。一覧・採用の 5 枚の絞り込みは
   「現在地以外を淡くする」意味があるので 2.90:1 のまま触らない（article.md の判断どおり）。 */
.container-block .body.rm-article-body .side .block-side-nav .items a{
  color: var(--color-oki-black2);
}

/* 1-4  目次の項目は 2 行で止める。
   出どころ (b): lower.css:2884-2889 の `.line-clamp-2`（-webkit-line-clamp:2 ほか 4 宣言）。
   **クラスを markup 側で付ける**ので、このファイルには 1 宣言も無い。→ article.md §2-1
   （h2 は中央 28 字 = 210px の器で 2 行ちょうど。p90 35 字・最大 45 字の 1〜2 本だけ
     末尾が切れる。切らないと最大 3 行 = 75px になり、7 項目で追従列が 100px 伸びる） */


/* 1-5  現在地の点は 4px。項目を 2 行にしたので、点は 1 行目の高さに置かれたままでよい
   （lower.css:328-329 の top は em 基準。ここでは 1 行も足していない）。 */


/* ==========================================================================
   §2  「ここだけ読めば分かる」の囲み — .block-callout-base
   --------------------------------------------------------------------------
   使う部品: .block-callout-base（lower.css:4359-4423 / **79 規則・使用 0 回**）
   ★ 規則が `:where([data-component-id=re178m])` 付きで写されている。
     :where() は特異度 0 だが **属性は依然として必要**。markup に付け忘れると
     灰の面・角丸 10px・30 カラムの幅が丸ごと効かない（エラーは出ない）。→ article.md §2-2

   ★ 何を囲むか（実測で決めた。文言は 1 文字も作らない）
     52 本**すべて**が「まとめ」を含む h2 を持つ（seo/html/ の 52 本を数えた）。
     その節の本文は 最小 254 / 中央 484 / p90 1,121 / 最大 1,878 字、段落は中央 3 つ。
     ⇒ 記事が自分で書いている要約がすでに在る。**それを囲むだけ**にする。
       （記事の頭に別の要約を置くと、本文に無い文を作ることになる）

   ★ 上下の空きに CSS は要らない。まとめの h2 は .c-hdg に入っているので
     lower.css:7637-7639 `.container-block .main .rm-article .c-hdg + *{margin-top:0!important}`
     が当たり、囲みは h2 の margin-bottom 24px の下に立つ（他のブロックと同じ）。
   ========================================================================== */

/* 2-1  囲みの中の 1 つ目が見出しでも段落でも上の空きを 0 にする。
   出どころ (b): OKI 自身が同じ宣言を 3 本、囲みの中の「1 つ目」に当てている
       lower.css:4371  .block-callout-base__content > .block-note-base:first-child{margin-top:0}
       lower.css:4373  .block-callout-base__content > .block-heading-base[data-heading-level="3"]:first-child{margin-top:0}
       lower.css:4375  .block-callout-base__content > .block-paragraph-base:first-child{margin-top:0}
   テンプレは見出しを `<div class="c-hdg">` で包む（article-parts.php:395）ので、
   囲みの 1 つ目が `.c-hdg` になると上の 3 本はどれも当たらず、
   `.m-hdgMd{margin-block:var(--block-2xl) 24px}` = PC 80px（lower.css:7655-7657）が生きて **箱の中に 80px の空き**が出る。
   宣言は OKI の 3 本と同じ `margin-top:0`。選択子だけ `> :first-child` に広げた。
   ★ 52 本のうち **14 本**のまとめ節が h3 で始まる（実測）。当たるのはその 14 本。 */
.container-block .main .rm-article .block-callout-base__content > :first-child{
  margin-top: 0;
}


/* ==========================================================================
   §3  引用 — <blockquote>
   --------------------------------------------------------------------------
   ⚠ **現物は 0 件。**52 本の本文に <blockquote> は 1 つも無い（実測）。
     `.block-quote` というクラスも OKI 側に 1 本も無い（lower.css / oki-copy/style.css /
     oki/lower/rules/*.css を走査して 0 件。指示にある「block-quote 系」は土台に無い）。
   ⇒ ここに書くのは **予防**。素のままだと blockquote はブラウザ既定
     （margin 40px・見た目の区別なし）で出る＝「引用とわかる印が 1 つも無い」。
     値は 1 つも作っていない。全部よそから来た同じ宣言。
   ========================================================================== */

.container-block .main .rm-article blockquote{
  /* 罫は「行を区切る 1px」だけ。囲みには使わない（トンマナ §4）。
     出どころ (b): lower.css:2643 `.block-table-wrapper .block-row{ border-top:1px solid var(--color-oki-gray5) }`
     の border-top を border-left にしただけ。太さ・種類・色は原文のまま。 */
  border-left: 1px solid var(--color-oki-gray5);
  /* 出どころ (b): lower.css:2616 `.block-image-base .caption{ padding-left:calc(var(--column-unit)*1) }`
     （図の下の説明文が本文からどれだけ下がるか）。同じ 1 カラム。 */
  padding-left: calc(var(--column-unit) * 1);
  /* 出どころ (b): lower.css:2731 `.block-note-base{ color:var(--color-oki-gray2) }` */
  color: var(--color-oki-gray2);
  /* 出どころ (b): oki-copy/style.css:280 `p,h1,h2,h3,figure,hgroup{ margin:0 }`。
     この 1 行に **blockquote が入っていない**ので、ブラウザ既定の
     `margin:1em 40px` がそのまま残る（実測: 本文より左右 40px 内側に寄っていた）。
     同じ宣言を blockquote にも当てているだけで、新しい値ではない。 */
  margin: 0;
}
/* 引用の中の段落どうしの空き。
   出どころ (b): lower.css:2527-2529（SP 20）/ 2544-2546（PC 30）の `.block-paragraph-base > * + *`。
   `.block-paragraph-base` の子は blockquote 自身なので、その中までは届かない。 */
.container-block .main .rm-article blockquote > * + *{
  margin-top: calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}
@media (min-width: 1024px){
  .container-block .main .rm-article blockquote > * + *{
    margin-top: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}


/* ==========================================================================
   §4  注記 — .block-note-base（lower.css:2727-2760 / 32 規則・使用 0 回）
   --------------------------------------------------------------------------
   ⚠ 実測: ※ は 3 本・9 か所にある。**そのうち段落の頭にあるのは 1 か所だけ**
     （「（※）数値は公表データに基づく目安であり…」）。残り 8 か所は本文の途中の
     （※）（※1）（※架空データ）で、**その段落ごと注記に落としてはいけない**
     （本文が丸ごと灰色になる）。→ 判定は article.md §2-4 に書いた 1 つだけ。
   ⇒ CSS は 1 行も要らない。`.block-note-base` は色・幅・箇条書きの字下げを
     全部自分で持っている。**このファイルに追加は 0 宣言。**
   ========================================================================== */


/* ==========================================================================
   §5  表
   --------------------------------------------------------------------------
   ⚠ 実測で分かったこと（これが今回いちばん大きい発見）
     本文の表は **5 個 / 4 本**。その 5 個は全部 <thead> 付きの **3・3・5・5・6 列**で、
     **2 列の表は 1 つも無い**。
     いま theme-new/inc/article-parts.php:325-350 は「2 列のときだけ」OKI の
     `.block-table-wrapper` を着せる作りなので、**この経路は 52 本で 1 度も動かない**。
     `.block-table-wrapper` + `.block-row` + `.block-header` の 125 規則が
     使用 0 回のままになるのは、部品が無いからではなく**当たらない条件だから**。

   ⇒ 3 列以上には `.table-layout-v2`（帝人・lower.css §7-3 / 7,296-7,595 行）を着せる。
     この部品は thead・N 列・overflow-x:auto を最初から持っている。
     **社は増えていない**（帝人からは会社概要の表 1 部品を既に取っており、その同じ
     1 部品を記事の表にも使うだけ。トンマナ §11「1 社から 1 部品まで」）。
     2 列（現物 0）は OKI の `.block-table-wrapper` のまま残す。→ article.md §2-5
   ========================================================================== */

/* 5-1  1023.98px 以下では表を器の外へ送れるようにする。
   帝人の器側 `[class^="table-layout"]{overflow-x:auto}`（lower.css:7429 / 7505）は
   既に在るが、表本体が `.table_inner{width:100%}`（lower.css:7444 / 7520）なので
   器にぴったり収まってしまい、**送りが一度も出ない**。375px で 6 列だと
   1 列あたり字が 2 文字になる（実測）。下限を与えて初めて送りになる。
   出どころ (c): `calc(var(--column-unit) * var(--block-content-dence))` は
   この土台に 20 か所以上ある「本文の柱の幅」の式そのもの（lower.css:774 ほか。`--block-content-dence:30` は lower.css:3199）。
   ⇒ 1024px 以上では本文の柱ちょうど = 器と同寸なので送りは出ない。
     768px では 960px・375px では 469px になり、そこだけ送りになる。 */
@media (max-width: 1023.98px){
  .container-block .main .rm-article .table-layout-v2 .table_inner{
    min-width: calc(var(--column-unit) * var(--block-content-dence));
  }
}


/* ==========================================================================
   §6  前後の記事・関連記事 / 著者 / 日付
   --------------------------------------------------------------------------
   前後と関連は**器を増やさない**。末尾の `.block-navigation-page`
   （lower.css:337-346・「あわせて読みたい」）は既に
   remind_article_reading_list() が [次・前・同分類 2 本] を返している
   （article-parts.php:782-830）ので、**どれが前でどれが次かを書き足すだけ**にする。
   旧テーマの `.c-article-prev-next`（theme/src/styles/object/component/_article-parts.scss:467-555）は
   使わない: 11px の札（トンマナ「12px 未満を作らない」に反する）・56px のサムネ・
   `0 8px 16px -8px rgba(0,54,120,.15)` の影（影は 1 種だけ）と、
   出どころが (a)(b)(c) のどれにも無い値でできている。

   著者と分類は OKI の定義リスト型の表（.block-table-wrapper）に入れる。
   ここが「2 列の表」の実物になる（本文の表 5 個は全部 3 列以上なので、
   この部品は他に使い道が無い）。CSS は 1 行も要らない。
   ========================================================================== */

/* 6-1  一覧の 1 行に「前の記事 / 次の記事 / 同じ分類から」の札を足す。
   字の様式は `t-label-sm`（lower.css:5690-5696 / 和文 12px・700）を markup で付ける。
   §9-1 の 12px の床（lower.css:7720-7727）に `.t-label-sm` が入っているので
   375px でも 11.5px に落ちない。ここで足すのは色と下の空きの 2 宣言だけ。
   出どころ (b): color  … lower.css:2521-2525 `.block-paragraph-base{ … color:var(--color-oki-black2) }`
                 margin … lower.css:4435 `.block-list-3-column_description{ margin-top:calc(10 / …) }`
                          （札の中で上の行と下の行のあいだ。同じ役・同じ式）
   ★ 色に `--color-oki-gray2`（#717171）を使わないのは実測の結果。
     この札が乗るのは `.block-navigation-page` の灰の面 `--color-oki-bg-gray` #f4f4f4 で、
     #717171 との比は **4.44:1**。12px の字に要る 4.5:1 に **0.06 だけ届かない**。
     白の上（`.t-text-date` が乗る面）なら 4.88:1 で足りるので、OKI 側は正しい。
     `--color-oki-black2` は 13.40:1。上下の関係は 12px/700 と 18px/700 の大きさで付ける。 */
.list-link .list-link__kind{
  color: var(--color-oki-black2);
  margin-bottom: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
}


/* ==========================================================================
   §7  土台に在るのに、テンプレの markup では当たらなくなっていた 1 本
   --------------------------------------------------------------------------
   lower.css §12（Konel / 節の見出しに罫を引く・lower.css:7887-7890）は
       .container-block .main > .rm-article > h2.block-heading-base{ border-top: 1px solid }
   と `>`（直下）で書いてある。
   ところが theme-new/inc/article-parts.php:395 は見出しを
       <div class="c-hdg"><h2 class="block-heading-base …">
   と 1 段包む（§7-4 の `.c-hdg + *` のリセットに要る）ので、
   **h2 は .rm-article の直下ではなくなり、この罫は 1 本も出ない。**
   静的な見本（lower/pages/article/…）は .c-hdg が無い古い版なので出ていて、
   実測しても気づけない（M-039 と同型 —「書いたのに効いていない」）。
   宣言は §12 の原文と同一。選択子に .c-hdg の 1 段を足しただけ。 */
/* ★ 土台へ畳むにあたって、この 1 本は **§12 の選択子に足した**（同じ宣言を 2 つ持たない）。
   → lower.css §12 の `.container-block .main > .rm-article > .c-hdg > h2.block-heading-base`。 */

/* ==========================================================================
   §8  prefers-reduced-motion
   --------------------------------------------------------------------------
   このファイルは transition / animation / transform を **1 つも足していない**。
   article.js も scroll-behavior:smooth を使わない（目次を押すと一足飛びに飛ぶ）。
   だから止めるものは 1 つしか無い ―― 記事に新しく持ち込む `.side` が
   **土台の側で transition を持っている**:
       lower.css:288  .container-block .side{ … transition: top var(--duration-300) var(--easing-2) }
   ヘッダーの出入りに合わせて追従列の `top` が 0.3 秒かけて動く。
   ここは逃げ道が土台に書かれていない（§10 の [data-revealed] と §11 にはある）ので、
   同じ形の 1 本を足す。宣言は lower.css:7840
       @media (prefers-reduced-motion: reduce){ .container-block [data-revealed="shown"]{ transition: none } }
   と **同一**（`transition: none`）。 */
@media (prefers-reduced-motion: reduce){
  .container-block .side{
    transition: none;
  }
}



/* ══════════════════════════════════════════════════════════════════════════
   §14  一覧（記事・お知らせ・ページ送り・0 件）
   ──────────────────────────────────────────────────────────────────────────
   出どころ: craft2/list.css（2026-09-09 に作り替えた部品を、そのまま土台へ畳んだ）
   1 宣言ごとの出どころは craft2/出典.md の表に同じ順で載せてある。
   ★ 変更なし（そのまま）。既存クラスへの当て先追加が中心で、衝突は無い。
   ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════════
   list.css — 部品「一覧（記事・お知らせ）」の作り替え
   2026-09-09 / craft2

   ★ この 1 枚は **lower/lower.css の差分**。lower.css と theme-new/ は 1 バイトも触っていない。
   ★ 直したことの大半は **markup（どの既存クラスを付けるか）** で、CSS は 22 宣言しか足していない。
     足した 22 本は下に 1 本ずつ出どころを書いた。認めた出どころは 3 つだけ:
       (a) 参照元サイトから抜いた実規則（craft/rules/*.css・lower.css §7-* に原文が入っている）
       (b) OKI の実規則（oki/rules/*.css・oki-copy/style.css・lower/lower.css）
       (c) 既にある変数・クラスの組み合わせ（新しい値を作らない）
   ★ px・ms・曲線・色は 1 つも自分で決めていない。図・アイコン・SVG も 1 つも描いていない。
   ★ 使っている既存クラスの一覧と、なぜそれを選んだかは list.md。

   ── 足していないもの（迷ったので足さずに報告した）─────────────────────────────
     ・お知らせの表の行に hover の下線 … [data-underline-anime-*] を重ねると
       .block-row の border-top と 2 本になる。手応えは arrow-slide-in（既存）に任せた
     ・件数を home-oki-numbers の .card-number（76px）で出す案 … 器の
       .home-oki-numbers{color:var(--color-oki-white)} が白字を敷くので、
       白地に置くと消える。色を打ち消す宣言が要る＝新しい宣言になるのでやめた（list.md §6）
     ・.block-table-wrapper を lower.js §4（出現）の SEL に足すこと … lower.js は触らない約束
   ══════════════════════════════════════════════════════════════════════════════ */


/* ── 1 ────────────────────────────────────────────────────────────────────────
   題の欄が「行の余り」を受け取る（記事の一覧・お知らせの一覧の両方）

   何が壊れていたか（実測）:
     行は 900px 幅なのに、題の欄は **max-content 幅**（590 / 704 / 741px）で置かれ、
     その幅のまま **20 行が 20 行とも 2 行に折れていた**（題の高さ 46.8px = 23.4×2）。
     行の右側 160〜310px は誰も使っていない。参照元（OKI）の一覧は
     1 行の行が 124.36px・2 行に折れた行だけ 144.53px（oki/lower/list.md §3）なので、
     **こちらは全行が「折れた側」に落ちている**。原因は
     `-webkit-box`（line-clamp）＋ body の `word-break:auto-phrase`（oki-copy/style.css:274）で
     max-content の見積りが実際の折り返しと一致しないため。エラーも警告も出ない。

   出どころ (b) OKI の実規則 — lower/lower.css:5182
     .worldwide-card:where([data-component-id="1p7JdS"]) .card-items .card-item__label{
       flex:1 1 auto; margin-left:…; padding-right:1em; … }
     ＝「flex の行の中で、字の欄が余りを受け取る」ための OKI 自身の 1 宣言。
   取った宣言: flex:1 1 auto （1 本）。当て先だけ替えた。値は書き換えていない。
   ------------------------------------------------------------------------- */
.list-news-thumbnail.-news-archive .list-news-thumbnail__content,
.block-table-wrapper.-news-list .block-data{
  flex: 1 1 auto;
}


/* ── 1b ───────────────────────────────────────────────────────────────────────
   題の箱を「2 行ぶん固定」から素の高さに戻す（1 の続き。1 とセットでないと意味が無い）

   何が起きていたか（実測）:
     oki-copy/style.css:1019 に **OKI には無い 1 本**が後付けされている ——
       .list-news-thumbnail .list-news-thumbnail__title{ height:2lh }
     コメントは「Remind の題は 1 行に収まらないので 2 行に開けたうえで箱を 2 行ぶんに固定する」。
     その前提は、題の欄が max-content 幅（590〜741px）で置かれていたときの話。
     §1 で欄が行の余り（844px）を受け取ると **20 本中 17 本は 1 行に収まる**のに、
     箱だけ 2 行ぶん（46.8px）のまま残り、題と分類の札のあいだに **24px の空行**ができる。
     行の高さも 20 行が 20 行とも 147.6px に貼り付く。

   出どころ (b) OKI の実規則 — oki/rules/list-news-thumbnail.css
     `.list-news-thumbnail__title` に **height の宣言は 1 本も無い**（grep で 0 件）。
     参照元の実測も 1 行の行 124.36px / 2 行に折れた行だけ 144.53px（oki/lower/list.md §3）で、
     **高さは行数で決まる**。ここは後付けの 1 本を初期値へ戻して OKI の側に揃えるだけ。
   取った宣言: height:auto（＝ CSS の初期値。新しい値ではない）。
   ★ 2 行で切ること自体（-webkit-line-clamp:2）は残す。3 行以上には伸びない。
   ------------------------------------------------------------------------- */
.list-news-thumbnail.-news-archive .list-news-thumbnail__title{
  height: auto;
}


/* ── 2 ────────────────────────────────────────────────────────────────────────
   ページ送りの玉を <button> から <a> にする

   何が足りなかったか:
     日立の玉（.pagination-page / .pagination-btn）は **<button> の既定の中央寄せ**に
     寄りかかっていて、display も text-align も持っていない。<a> や <span> に同じ class を
     付けると数字が箱の左上へ寄る（theme-new/inc/article-parts.php §7 に実測済み:
     中心が x=16.0→4.7 / y=16.0→12.0）。だから今の実装は <form method="get"> ＋ <button> で、
     **2 ページ目以降に <a href> が 1 つも無い**（クローラが辿れない・別タブで開けない）。

   出どころ (b) OKI の実規則 — lower/lower.css:6570
     .pagination .number{ display:inline-flex; justify-content:center; align-items:center;
                          padding:0 calc(10/…); height:2.5rem }
     ＝ OKI 自身の「ページ番号の <a> が数字を中央に置く」規則。
   取った宣言: display / justify-content / align-items の 3 本だけ
              （padding と height は日立の玉が 2rem 角で持っているので取らない）。
   ------------------------------------------------------------------------- */
.pagesearch-pagination__controls a.pagination-page,
.pagesearch-pagination__controls a.pagination-btn,
.pagesearch-pagination__controls span.pagination-page{
  display: inline-flex;
  justify-content: center;
  align-items: center;
}


/* ── 3 ────────────────────────────────────────────────────────────────────────
   いま居るページは押せない（<a> ではなく <span> にする）

   出どころ (b) 仕組み — oki/lower/list.md §5「現在地の数字は <a> ではなく <p>」
                        「href を書かなければ、それだけで無効の見た目になる」
   出どころ (a) 見た目 — 日立 / lower/lower.css §7-1
     .pagesearch-pagination__controls .pagination-page-numbers .pagination-ellipsis{
       cursor:auto; pointer-events:none; text-align:center }
     ＝ 日立自身が「押せない玉」に当てている規則。「…」と同じ扱いにする。
   取った宣言: cursor:auto / pointer-events:none の 2 本（text-align は 2 の中央寄せで足りる）。
   ------------------------------------------------------------------------- */
.pagesearch-pagination__controls span.pagination-page{
  cursor: auto;
  pointer-events: none;
}


/* ── 4 ────────────────────────────────────────────────────────────────────────
   href の無い「前へ／次へ」は無効に見える

   出どころ (b) 仕組み — OKI / oki/lower/list.md §5
     .button-base[disabled], a.button-base:not([href]){ opacity:.2; pointer-events:none; … }
     ＝「押せないものはリンクにしない。href が無いことが無効の印」。状態 class を持たない。
   出どころ (a) 見た目 — 日立 / lower/lower.css §7-1
     .pagination-btn:disabled{ cursor:not-allowed; opacity:.7 }
     .pagination-btn:disabled span{ opacity:.3 }
   取った宣言: 日立の 3 本。当て先を :disabled → :not([href]) に替えただけで、値は同じ。
   （<a> に href が無ければブラウザが既に押せなくするので pointer-events は要らない）
   ------------------------------------------------------------------------- */
.pagesearch-pagination__controls a.pagination-btn:not([href]){
  cursor: not-allowed;
  opacity: .7;
}
.pagesearch-pagination__controls a.pagination-btn:not([href]) span{
  opacity: .3;
}


/* ── 5 ────────────────────────────────────────────────────────────────────────
   玉の列が 375px で横にはみ出さない

   何が起きていたか（実測 375px）:
     .pagination-page-numbers は flex で折り返しを持たない。玉 7 個の窓
     （1 … 4 5 6 … 18）は 7×32 ＋ 6×16 = **320px** 要るのに、器は 232.8px しか無い。
     justify-content:center なので **左右へ均等にはみ出し**、body の scrollWidth が
     375 → 378px になる（＝横スクロールが出る）。
     参照元（日立）はこれを **JS で** 避けている —— pager.js が 768px 未満では
     玉を 5 個に減らす（generateMobilePageList / lower.js §1 に原文のまま入っている）。
     こちらはサーバで 1 通りだけ描くので、その分岐が使えない。
     窓を 5 個に固定すると、5 ページ目から「1」へ戻る玉が消える（日立の実装どおり）ので採らない。

   出どころ (b) OKI の実規則 — oki/rules/list-news-thumbnail.css
     .list-news-thumbnail .list-news-thumbnail__content_wrap{
       display:flex; flex-wrap:wrap; align-items:center; gap:…; margin-top:… }
     ＝ OKI 自身の「小さい部品を並べた行が、狭いと折り返す」1 宣言。
   取った宣言: flex-wrap:wrap（1 本）。行間は日立の gap:1rem がそのまま効く。
   ------------------------------------------------------------------------- */
.pagesearch-pagination__controls .pagination-page-numbers{
  flex-wrap: wrap;
}



/* ── 6 ────────────────────────────────────────────────────────────────────────
   動きを止めたい人のぶん（矢印の滑りだけ土台で止まっていなかった）

   実測（prefers-reduced-motion: reduce を立てて computed を読む）:
     [data-underline-anime-target]::before … 0.3s → **0.00001s**（oki-copy §13 が止めている）
     .arrow-slide-in__icon                 … 0.4s / 0.5s → **0.4s / 0.5s のまま**（止まっていない）
     oki-copy/style.css の減速ブロックは `[data-arrow-slide-in-anime-root]:active` だけを
     足しており（§6034）、**:hover / :focus の分が抜けている**。矢印は translate(120%) /
     translate(-250%) で実際に動くので、ここは止める側に入れるのが筋。

   出どころ (b) OKI（＝この土台自身）— oki-copy/style.css §13 と §6034 の宣言をそのまま
     transition-duration:.01ms !important; transition-delay:0s !important;
   取った宣言: 上の 2 本。当て先に :hover / :focus を足しただけで、値は同じ。
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .arrow-slide-in .arrow-slide-in__icon,
  [data-arrow-slide-in-anime-root]:hover .arrow-slide-in__icon,
  [data-arrow-slide-in-anime-root]:focus .arrow-slide-in__icon{
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}



/* ── 7 ────────────────────────────────────────────────────────────────────────
   タブの当たり判定 44px を、<a> に替えても保つ

   何が起きるか（実測）:
     lower.css §9-2(b) は下線タブの当たり判定を **`[role="tab"]` にだけ**付けている
     （下線は字の幅ぶんしか引かないので、器を広げず透明な ::after を重ねる作り）。
     タブを <button role="tab"> から **<a href>** に替えると、`.list-filter a` の
     `min-height:44px`（§9-2(a)）は届くが、**幅を 44px に広げる ::after が届かない**。
     いちばん短い「すべて」は 42.6px になり、**1.4px 足りない**。
     エラーも警告も出ず、見た目も 1px も変わらない（M-039 / M-038 と同じ族）。
     実測でも elementFromPoint が中心 +21.5px で外していた。

   出どころ (c) 既にある規則の当て先を足しただけ — lower/lower.css §9-2(b)
     .list-filter [role="tab"]{ position: relative }
     .list-filter [role="tab"]::after{ content:""; position:absolute; top:50%; left:50%;
       transform:translate(-50%,-50%); min-width:44px; width:100%; height:44px }
   取った宣言: 上の 8 本をそのまま。**値は 1 つも変えていない。**
   （§9-2(b) 自身のコメント「タブどうしの間は gap 24px」もそのまま成り立つ ——
     44px に広げても片側 0.7px しか出ないので隣とは重ならない。実測で確認）
   ------------------------------------------------------------------------- */
.list-filter nav a{
  position: relative;
}
.list-filter nav a::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  width: 100%;
  height: 44px;
}


/* ── 足した宣言はここまで。合計 22 本 ────────────────────────────────────────
     1  flex:1 1 auto                       … OKI .card-item__label
    1b  height:auto                          … OKI（.list-news-thumbnail__title に height は無い）
     2  display:inline-flex                 … OKI .pagination .number
     3  justify-content:center              … 同上
     4  align-items:center                  … 同上
     5  cursor:auto                         … 日立 .pagination-ellipsis
     6  pointer-events:none                 … 同上
     7  cursor:not-allowed                  … 日立 .pagination-btn:disabled
     8  opacity:.7                          … 同上
     9  opacity:.3                          … 日立 .pagination-btn:disabled span
    10  flex-wrap:wrap                       … OKI .list-news-thumbnail__content_wrap
    11  transition-duration:.01ms!important   … oki-copy §13（減速）
    12  transition-delay:0s!important         … 同上
 13-22  position:relative ＋ ::after の 8 本    … lower.css §9-2(b)（当て先だけ足した）
   ── 新しい px・ms・曲線・色は 0 個。@media は 1 本（prefers-reduced-motion）だけで、
     中身は oki-copy §13 の宣言そのまま。
   ────────────────────────────────────────────────────────────────────────── */



/* ══════════════════════════════════════════════════════════════════════════
   §15  数字を図にする（帯 76px / 行 52px / 灰の器）
   ──────────────────────────────────────────────────────────────────────────
   出どころ: craft2/numbers.css（2026-09-09 に作り替えた部品を、そのまま土台へ畳んだ）
   1 宣言ごとの出どころは craft2/出典.md の表に同じ順で載せてある。
   ★ 変更なし（そのまま）。当て先は新しい markup（[data-numbers]）だけ。
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   craft2/numbers.css — 部品「数字を図にする」
   ----------------------------------------------------------------------------
   読み込む順（この 3 枚目として置く）:
       <link href="../oki-copy/style.css">   ← トップと同じ 1 枚
       <link href="../lower/lower.css">      ← 下層 31 枚の土台
       <link href="../craft2/numbers.css">   ← このファイル

   ★ この工程では lower/lower.css と theme-new/ を書き換えない。
     本採用のときは §2 の 5 つの規則を lower.css へ移すだけでよい（値は 1 つも変わらない）。

   ── 何を直したか ─────────────────────────────────────────────────────────
   下層の数字 141 個のうち 24px 以上が 0 個だった。38,477 件も 10 社も 13 段も、
   全部 17〜18px の本文に埋もれていた。ホームは同じ数字を 76px で出している。

   直し方は「新しい部品を作る」ではなく「**すでにある部品を下層でも使える形にする**」。
   足した CSS は **10 規則 / 31 宣言**だけで（ブラウザに読ませて数えた実測）、
   **そのうち新しい値は 0 個**。
   全部 oki-copy/style.css か lower/lower.css の既存宣言をそのまま写した。

   ── 3 つの形 ─────────────────────────────────────────────────────────────
     A 帯   … .home-oki-numbers                      数 76px(PC) / 60px(SP)
              ページに 1 回まで。節の切れ目に置く。**足す CSS は 0 本**
              既定は「本文の器の中に収める」（下の A2）。画面いっぱいに広げたいときだけ
              .bleed-both を足す（下の A1。**JS が要る** — §1 の実測を読むこと）
     B 行   … .block-table-wrapper + [data-numbers]  数 52px(PC) / 28px(SP)
              本文の流れの中。1〜4 個。**これが既定**
     C 灰   … .block-callout-base の中に B をそのまま  数 52px / 28px
              段落と一緒に強調したいときだけ。ページに 1 回まで。**足す CSS は 0 本**
              器の中では見出し桁が 11 → 7 カラムに縮む（lower.css:4417）ので、
              ラベルと数の間が空きすぎるときはこちらを使う

   ── 使っていなかった既存部品のうち、この工程で配線したもの ───────────────
     .bleed-both              lower.css:401       使用 0 回 → A で使う
     .block-table-wrapper     lower.css:2637-2726 使用 0 回 → B の骨格
     .block-row / .block-header / .block-data / .block-content   同上
     .block-callout-base      lower.css:4359-4419 使用 0 回（79 規則）→ C の器
     .t-text-date             lower.css:5430-5432 使用 0 回 → 時点の 1 行

   ── 出どころの書き方 ─────────────────────────────────────────────────────
     各宣言の右に「ファイル:行」を書く。3 つの出どころしか使っていない:
       (b1) oki-copy/style.css … OKI の実規則を移植した 1 枚（さらに元は
            oki/rules/oki-numbers.css。そちらの行も併記した）
       (b2) lower/lower.css   … OKI の下層の実規則
       (c)  既にある変数・クラスの組み合わせ
     px / ms / 曲線 / 色を自分で決めた宣言は 1 つも無い。
     図・アイコン・SVG も 1 つも描いていない。
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════════
   §1 A 帯 — .home-oki-numbers を下層で使う。**足す CSS は 0 本**
   ══════════════════════════════════════════════════════════════════════════

   「ホームの 1 節専用になっていないか」を実際に読んで確かめた結果:

     ・.home-oki-numbers 側の 31 規則（oki-copy/style.css:1342-1647）は
       すべて `.home-oki-numbers` の子孫セレクタで、ホーム固有の器・変数・
       data 属性に依存していない。`--column-unit` `--screen-size` は :root。
     ・.desktop-only / .mobile-only は素のクラスとしても定義がある
       （oki-copy/style.css:296-297）。下層でも同じに効く。
     ・.button-square はスコープ無しで定義（oki-copy/style.css:1584-1643）。
     ・送りの JS は `document.querySelectorAll('.home-oki-numbers .swiper')`
       （oki-copy/script.js:528）。下層も同じ script.js を読むのでそのまま動く。
       JS が来なくても 3 枚は見えている（初期 HTML に data-swiper-visibillity を
       書かない ＝ 既定 opacity のまま。M-033）。

   → **ホーム専用ではなかった。** 下層で足りないのは「幅」だけ。
     下層の .container-block .main は 1440 で 1305px しかなく、
     札 320px×3 ＋ 送り 15px×3 ＝ 1005px は入るが、
     ホームと同じ「画面いっぱいの帯」にはならない。
     そこは既にある .bleed-both（lower.css:401）を 1 つ足すだけで済む:

         <section class="home-oki-numbers bleed-both"> … </section>

     .bleed-both は margin-left/right に --breed（lower.css:75）を入れる。

   ── ★ A1（.bleed-both あり）と A2（無し）の実測 ────────────────────────
   1440px・巻き取り棒 15px の機械で測った（headless Chrome）:

     | | JS あり | JS なし |
     |---|---|---|
     | A1 .bleed-both あり | x=0 / 幅 1425 / 横あふれ **0** | x=-7.5 / 幅 1440 / 横あふれ **+8px** |
     | A2 .bleed-both なし | x=59.4 / 幅 1306 / 横あふれ 0 | x=60 / 幅 1305 / 横あふれ **0** |

   A1 が JS を要るのは --breed が --scrollbar-width を引くから。この変数は
   CSS では 0px 固定で、実測して書き戻すのは oki-copy/script.js:20-28。
   **JS が動かない機械では巻き取り棒のぶん（15px）だけ帯が画面より広くなり、
   横スクロールが出る。** 土台の既存の作りで、この部品が持ち込んだ問題ではないが、
   帯を全幅にすると初めて「あふれ」として表に出る。

   → **既定は A2（.bleed-both を付けない）。** 器は本文の欄（1440 で 1306px）に収まり、
     写真は左右 1 カラム内側・角丸 10px の面になる（トンマナ §4 の「角丸 10px の面」）。
     全幅にしたいときだけ A1 を選ぶ。**選ぶのはオーナー。**

   マークアップは oki-copy/index.html:970-1052 をそのまま写す。
   変えるのは札 3 枚の中身（題・数・単位・添え）だけ。
   ────────────────────────────────────────────────────────────────────────── */

/* （このファイルに規則は無い。既存の 31 規則がそのまま効く） */


/* ══════════════════════════════════════════════════════════════════════════
   §2 B 行 — 本文の中に置く小さい版（数字 + 単位 + 添え）
   ══════════════════════════════════════════════════════════════════════════

   骨格は OKI 自身の会社概要の表（.block-table-wrapper）。
   原文マークアップ: oki/lower/raw/p-info.html
       div.block-table-wrapper > table.block-table > tbody
         > tr.block-row > th.block-header + td.block-data > div.block-content
   PC は tr が display:flex・th が 11 カラム固定（330px）・行の上下に 1px の罫。
   SP は縦積み。**この 123 規則は一度も使われていなかった**（配線するだけで使える）。

   ここに「札の中身」（題・数・単位・添え）を、白い箱を外してそのまま入れる。
   トンマナ §4「枠線は行を区切る罫として使う。囲みには使わない」に合う形。

   数の大きさだけ 2 段目（76 → 52 / 60 → 28）に落とす。
   52 と 28 は同じ数字の節の見出しの値で、**新しく決めた値ではない**。

   マークアップ（`-align-items-top` は lower.css:3589 の既存の枝。
   付けないと題が「単位の行」と同じ高さに来て、数ではなく単位のラベルに見える
   ＝ 実測で題の上端が 75.7px、数の上端が 21.8px。付けると両方 21.8px で揃う）:
     <div class="block-table-wrapper" data-numbers data-component-id="quaGQt">
       <table class="block-table">
         <tbody>
           <tr class="block-row -align-items-top">
             <th class="block-header"><p class="card-title">掲載中の案件</p></th>
             <td class="block-data">
               <div class="block-content">
                 <p class="card-number">38,477<span class="card-unit">件</span></p>
                 <p class="card-description">削除されていない案件・2026年8月時点</p>
               </div>
             </td>
           </tr>
         </tbody>
       </table>
     </div>

   ※ data-component-id="quaGQt" は OKI の原文どおり。lower.css は同じ規則を
     スコープ有り（:3575-3635）と無し（:2637-2726）の 2 通り持っているが、
     `.block-row.-align-items-top`（:3589）はスコープ有りにしか無いので**必須**。
     ほかの値は両方同じ。

   ※ 時点はこの部品の必須項目（トンマナ §0.2）。行ごとに違うなら .card-description に
     「母数・時点」の形で書く。3 行とも同じ時点なら .block-table の直前に
     <p class="t-text-date">（2026年8月時点）</p> を置いてもよい
     （lower.css:5430-5432・OKI の会社概要の原文 oki/lower/raw/p-info.html に既にある形。
     **使用 0 回だった**）。
   ────────────────────────────────────────────────────────────────────────── */

/* ── 2-1 題（青・790）──────────────────────────────────────────────────
   出どころ: oki-copy/style.css:1483-1494（= oki/rules/oki-numbers.css:41,43 の
   html[lang=ja] の枝）。宣言は 1 つも変えていない。セレクタの
   `.home-oki-numbers` を `[data-numbers]` に置き換えただけ。 */
[data-numbers] .card-title{
  color:var(--color-oki-red);                                                                  /* oki-copy/style.css:1484 */
  font-weight:790;                                                                             /* oki-copy/style.css:1485 */
  font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* oki-copy/style.css:1486 */
  line-height:100%;                                                                            /* oki-copy/style.css:1487 */
  letter-spacing:-.01em;                                                                       /* oki-copy/style.css:1488 */
}
@media (min-width: 1024px){
  [data-numbers] .card-title{
    font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* oki-copy/style.css:1492 */
  }
}

/* ── 2-2 数（Figtree・790）────────────────────────────────────────────
   出どころ: oki-copy/style.css:1495-1511（= oki-numbers.css:45,47,49,51）。
   大きさだけ 2 段目に落とす:
       SP 60 → 28   oki-copy/style.css:1417（同じ節の見出しの SP）
       PC 76 → 52   oki-copy/style.css:1424（同じ節の見出しの PC）
   `margin-top`（札では題との間の 30/50px）は**採らない**。行の形では題が
   別の桁にあるので、上に空きを作る役が無い。行の間隔は .block-row の
   padding（lower.css:2644-2645 / 2688-2689、和文は 2692-2693）が持つ。 */
[data-numbers] .card-number{
  justify-self:start;                                                                          /* oki-copy/style.css:1496 */
  font-weight:790;                                                                             /* oki-copy/style.css:1498 */
  font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* 値: oki-copy/style.css:1417 */
  line-height:100%;                                                                            /* oki-copy/style.css:1500 */
  letter-spacing:-.03em;                                                                       /* oki-copy/style.css:1501 */
  font-family:"Figtree","Noto Sans JP",system-ui,sans-serif;                                   /* oki-copy/style.css:1504 */
}
@media (min-width: 1024px){
  [data-numbers] .card-number{
    font-size:calc(52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* 値: oki-copy/style.css:1424 */
  }
}

/* ── 2-3 単位（数の右下にぶら下がる）──────────────────────────────────
   出どころ: oki-copy/style.css:1512-1526（= oki-numbers.css:53,55,57,59）。
   display:block ＋ text-align:right は「数の箱の右下に置く」ための組。
   数の箱は 2-2 の justify-self:start ＋ 2-5 の grid で数の幅に縮むので、
   札のときと同じ位置関係（数の右下）になる。 */
[data-numbers] .card-unit{
  display:block;                                                                               /* oki-copy/style.css:1513 */
  font-weight:790;                                                                             /* oki-copy/style.css:1514 */
  font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* oki-copy/style.css:1515 */
  line-height:100%;                                                                            /* oki-copy/style.css:1516 */
  letter-spacing:-.01em;                                                                       /* oki-copy/style.css:1517 */
  text-align:right;                                                                            /* oki-copy/style.css:1518 */
  font-family:"Noto Sans JP",system-ui,sans-serif;                                             /* oki-copy/style.css:1519 */
}
@media (min-width: 1024px){
  [data-numbers] .card-unit{
    margin-top:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));   /* oki-copy/style.css:1523 */
    font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));   /* oki-copy/style.css:1524 */
  }
}

/* ── 2-4 添え（母数と時点。トンマナ §0.2「時点を必ず添える」）────────────
   出どころ: oki-copy/style.css:1527-1532（= oki-numbers.css:61）。 */
[data-numbers] .card-description{
  font-weight:570;                                                                             /* oki-copy/style.css:1528 */
  font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* oki-copy/style.css:1529 */
  line-height:150%;                                                                            /* oki-copy/style.css:1530 */
  letter-spacing:-.01em;                                                                       /* oki-copy/style.css:1531 */
}

/* ── 2-5 数と添えの組み方 ─────────────────────────────────────────────
   札（.card-carousel）は grid で、その中で数が justify-self:start により
   自分の幅に縮み、単位がその右下に落ちる。**同じ組み方を行の中へ写す。**
   出どころ: oki-copy/style.css:1456,1458（= oki-numbers.css:25）。
   `grid-auto-rows:auto 1fr auto` は札の高さ（452px 固定）を配るためのものなので
   採らない。行には余った高さが無い。
   数と添えの間の空きは lower.css:2675-2677 / 2714-2716 の
   `.block-table-wrapper .block-content > * + * { margin-top: 20px(SP) / 30px(PC) }`
   がそのまま持つ（このファイルでは 1 宣言も足していない）。 */
[data-numbers] .block-content{
  display:grid;                                                                                /* oki-copy/style.css:1456 */
  grid-auto-columns:auto;                                                                      /* oki-copy/style.css:1458 */
}


/* ══════════════════════════════════════════════════════════════════════════
   §3 C 灰の器 — .block-callout-base の中に §2 をそのまま入れる
   ══════════════════════════════════════════════════════════════════════════

   **足す CSS は 0 本。** この組み合わせは lower.css に既に書いてある:

     lower.css:4415  :where(.block-callout-base) .block-table-wrapper .block-table
                     { margin-right:0; margin-left:0 }
     lower.css:4417  同 .block-header { width: calc(var(--column-unit) * 7) }   ← 11 → 7 カラム

   つまり「灰の器の中に表を入れる」形は OKI が設計済みで、**一度も使われていない**。
   器そのものは lower.css:4359-4365（角丸 10px・地 #f4f4f4・PC で 30 カラム）。

   マークアップ:
     <div class="block-callout-base" data-component-id="re178m">
       <div class="block-callout-base__content">
         <h3 class="block-heading-base t-headline-4xs" data-heading-level="3">…</h3>
         <div class="block-paragraph-base t-paragraph-md"><p>…</p></div>
         <div class="block-table-wrapper" data-numbers data-component-id="quaGQt"> … </div>
       </div>
     </div>

   ※ data-component-id="re178m" は必須。lower.css のこの部品の規則は全部
     `:where([data-component-id=re178m])` の中にあり、属性が無いと地も角丸も付かない
     （:where() は特異度を 0 にするだけで、一致条件からは消えない）。
   ────────────────────────────────────────────────────────────────────────── */

/* （このファイルに規則は無い） */


/* ══════════════════════════════════════════════════════════════════════════
   §4 動きを減らす設定（prefers-reduced-motion）
   ══════════════════════════════════════════════════════════════════════════
   B と C は動かない（transition を 1 つも足していない）。
   A の帯だけ送りの transition を持つ。oki-copy/style.css:5824-5829 に同じ規則が
   既にあるが、このファイルだけを読み込んだ場合にも効くよう写しておく。
   宣言は 1 文字も変えていない。 */
@media (prefers-reduced-motion: reduce){
  .home-oki-numbers .swiper-wrapper, .home-oki-numbers .swiper-slide,
  .home-oki-numbers .button-square, .home-oki-numbers .button-square>span{
    transition-duration:.01ms !important;                                                      /* oki-copy/style.css:5827 */
    transition-delay:0s !important;                                                            /* oki-copy/style.css:5827 */
  }
  .home-oki-numbers .track-mobile{ scroll-behavior:auto }                                      /* oki-copy/style.css:5829 */
}



/* ══════════════════════════════════════════════════════════════════════════
   §16  フォーム（Contact Form 7 の出力に当てる）
   ──────────────────────────────────────────────────────────────────────────
   出どころ: craft2/form.css（2026-09-09 に作り替えた部品を、そのまま土台へ畳んだ）
   1 宣言ごとの出どころは craft2/出典.md の表に同じ順で載せてある。
   ★ 変更なし（そのまま）。theme-new/assets/form-cf7.css を置き換えるのではなく、
     **この土台へ畳んだ**。理由: 静的な現物（lower/pages/contact・entry）は lower.css しか
     読まないので、別ファイルのままだと見て確かめられない。
   ★ CF7 プラグインの CSS より **先**に読まれることになるが、順序は関係ない ——
     この節の規則は `.synergy-nform-root` を 1 段かぶせてあり、ぶつかる 8 本すべてで
     プラグイン側より特異度が 1 段高い（.wpcf7 form .wpcf7-response-output (0,3,0) に対して
     こちらは (0,4,0) ほか）。プラグイン側だけが持つ `form.init .wpcf7-response-output
     {display:none}` はこちらが display を書いていないのでそのまま効く。
   ══════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
   Remind — フォームの部品（作り替え版）  2026-09-09
   置き場所の想定: theme-new/assets/form-cf7.css を**この 1 枚で置き換える**
   読む順: lower/lower.css → この 1 枚（後）

   ── この 1 枚が受け持つ markup は 2 つ ──────────────────────────────────────
   (1) Contact Form 7 の出力（本番）… `cf7-*`（自社）＋ `wpcf7-*`（プラグイン）
       本文は craft2/cf7-6.txt / cf7-19.txt。器は
       theme-new/template-parts/form/cf7.php の
       `.synergy-nform-root > .Frame--ContentWrapper`
   (2) 静的プレビュー（lower/pages/contact/index.html・entry/index.html）…
       `TextName--Input` などベンダー名（lower.css §5 が使っている名前）
   両方に同じ見た目を当てる。**CF7 が出す名前は 1 文字も変えていない**
   （`.wpcf7-not-valid` `.wpcf7-response-output` `.wpcf7-spinner` `.wpcf7-list-item` …）。

   ── @layer に入れていない（M-039）────────────────────────────────────────
   lower.css も CF7 の CSS も非レイヤ。1 枚だけレイヤに入れると、その 1 枚が
   非レイヤの全部に負ける。3 枚とも非レイヤで、勝ち負けは特異度と順序だけ。

   ── 出どころの記法 ────────────────────────────────────────────────────────
   〔b〕= OKI の実規則（lower.css / oki-copy/style.css の行番号を書く）
   〔c〕= 既にある変数・クラスの組み合わせ（新しい値を作らない）
   〔a〕= 参照元サイトから抜いた実規則（craft/rules/*.css）
   〔継〕= 置き換え前の theme-new/assets/form-cf7.css から**そのまま持ってきた**
   1 行 1 行の出どころは craft2/form.md の表にも同じ順で載せてある。
   ============================================================================ */


/* ══ 1. 行の組み方 ─────────────────────────────────────────────────────────
   直したこと: **8 項目が全幅で縦一列**だったのを、PC で横に割れる組は 2 列にする。
   実測（1440px / lower/pages/contact/index.html）: 入力欄 9 個の left が
   すべて 275px ＝ 1 列。行の高さの合計 1031.9px。

   骨格の出どころ … lower.css:6385 / 6390 `.block-layout-2column`（OKI・使用中）
     display:grid                                → :6385 そのまま
     grid-template-columns:repeat(2,minmax(0px,1fr))  → :6390 そのまま
     column-gap:calc(var(--column-unit) * 2)     → :6390 そのまま
     区切りは 1024px                              → :6389 の @media そのまま
   ★ 原文の row-gap（SP calc(10/…) / PC calc(50/…)）だけは使っていない。
     ここはフォームなので、この部品が既に持っている 2 つの空きに合わせた:
       行と行の間 24px … lower.css:5900 `.GlobalError{margin-bottom:24px}`（B-4）
       ラベルと欄の間 4px … lower.css:5897 `.ItemError{margin-top:4px}`（B-4）
     **新しい px は 1 つも作っていない。** ══════════════════════════════════ */
/* 器の幅。theme-new の page-contact.php は `.synergy-nform-root` を `.main`（1440px で
   1305px）の直下に置くので、**入力欄が 1 本 1281px になる**（実測）。周りの本文ブロック
   （.block-paragraph-base）は 900px なので、そこへ揃える。
   値は lower.css:771-774 `.container-block .main .list-link` が使っている
   `calc(var(--column-unit) * var(--block-content-dence))` そのまま（1440px で 900px）。
   静的プレビューは既に 900px の器の中なので、こちらでは何も変わらない。 */
@media (min-width: 1024px) {
  .synergy-nform-root{
    margin-right: auto;                       /* 〔b〕lower.css:772 */
    margin-left: auto;                        /* 〔b〕lower.css:773 */
    max-width: calc(var(--column-unit) * var(--block-content-dence));   /* 〔b〕lower.css:774 */
  }
}

.synergy-nform-root .cf7-table{
  display: grid;                              /* 〔b〕lower.css:6385 */
  row-gap: 24px;                              /* 〔b〕lower.css:5900（B-4） */
}
.synergy-nform-root .cf7-row{
  display: grid;                              /* 〔b〕lower.css:6385 */
  row-gap: 24px;                              /* 〔b〕lower.css:5900（B-4） */
}
@media (min-width: 1024px) {
  .synergy-nform-root .cf7-row--pair{
    grid-template-columns: repeat(2, minmax(0px, 1fr));      /* 〔b〕lower.css:6390 */
    column-gap: calc(var(--column-unit) * 2);                /* 〔b〕lower.css:6390 */
  }
}
.synergy-nform-root .cf7-item{
  display: grid;                              /* 〔b〕lower.css:6385 */
  row-gap: 4px;                               /* 〔b〕lower.css:5897（B-4） */
  min-width: 0;                               /* 〔c〕minmax(0,1fr) と対。入力欄が列から溢れないため */
  /* ★ 描いて測って捕まえた 1 本。grid の既定（align-content:normal＝stretch）だと、
     **片方の欄にだけ誤りの一文が出た行で、もう片方の入力欄が 12.2px 下がる**
     （2 行とも auto なので、伸びた行の高さを 2 行で山分けしてしまう）。
     揃えは上端で固定する。M-041（同じ列の数字が行ごとに左右へ動く）の縦版。 */
  align-content: start;                       /* 〔c〕構造の指定。寸法・色は増えていない */
}
/* CF7 は入力欄を `<span class="wpcf7-form-control-wrap">` で包む（インライン）。
   中の欄は block なので、包みも block にして行の高さを字送りに引っぱられないようにする。 */
.synergy-nform-root .wpcf7-form-control-wrap{
  display: block;                             /* 〔継〕form-cf7.css:145（margin-top:4px は grid の row-gap に置き換えた） */
}
/* CF7 の autop は各 div の中身を <p> で包む（本番の出力で実測）。
   lower.css:5789 `.synergy-nform-root *{margin:0}` が既に効いているので
   余白は出ないが、置き換え前の form-cf7.css:141 が `p{margin:0 0 24px}` を
   足していた。grid で間を作るので、その 1 本は**入れていない**。 */


/* ══ 2. ラベルと必須／任意の印 ─────────────────────────────────────────────
   直したこと: **必須バッジが赤 `#e84b35`**（実測 rgb(232,75,53)）だった。
   これは OKI の新フォームを動かしているベンダー（Synergy! nform）の色で、
   この頁の差し色ではない（トンマナ §3「差し色は青 1 色」）。
   **形（32px / 12px / bold / padding 4px / 角丸 4px / line-height 1）は
   lower.css:5870-5881（B-3）のまま。色だけ自社のものに置き換えた**
   ＝ トンマナ §11「取るのは寸法・曲線・時間。色は必ず自社のものに置き換える」。
   任意は同じ形のまま、地を灰にして重さを下げる（形が同じなので並んでも揃う）。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root .cf7-label,
.synergy-nform-root .TextName--FieldHeading{
  line-height: 1.7;                           /* 〔b〕lower.css:5864（B-3） */
  font-weight: bold;                          /* 〔b〕lower.css:5865 */
  font-size: 16px;                            /* 〔b〕lower.css:5866 */
  display: block;                             /* 〔b〕lower.css:5867 */
  word-break: break-all;                      /* 〔b〕lower.css:5868 */
}
.synergy-nform-root .cf7-label label{
  display: inline;                            /* 〔c〕行の中で印と並ぶため（B-3 の block を打ち消す） */
  font-weight: inherit;                       /* 〔c〕上の bold を継ぐ */
}
.synergy-nform-root .cf7-badge,
.synergy-nform-root .Input--RequiredLabel{
  width: 32px;                                /* 〔b〕lower.css:5871 */
  font-size: 12px;                            /* 〔b〕lower.css:5872 */
  font-weight: bold;                          /* 〔b〕lower.css:5873 */
  text-align: center;                         /* 〔b〕lower.css:5875 */
  padding: 4px;                               /* 〔b〕lower.css:5876 */
  line-height: 1;                             /* 〔b〕lower.css:5877 */
  border-radius: 4px;                         /* 〔b〕lower.css:5879 */
  white-space: nowrap;                        /* 〔b〕lower.css:5880 */
  display: inline-block;                      /* 〔継〕form-cf7.css:129 */
  vertical-align: middle;                     /* 〔継〕form-cf7.css:130 */
  margin-left: 4px;                           /* 〔b〕lower.css:5897（B-4 の 4px） */
  color: var(--color-oki-white);               /* 〔c〕#fbfbfb。原文は rgb(255,255,255) */
  background-color: var(--color-oki-red);      /* ★ ここだけ差し替え 〔c〕#003678 */
}
.synergy-nform-root .cf7-badge--optional{
  background-color: var(--color-oki-gray3);    /* 〔c〕#ededed（トンマナ §3 の灰 2 色のうち面の側） */
  color: var(--color-oki-black);               /* 〔c〕#0d0d0d */
}


/* ══ 3. 入力欄 ─────────────────────────────────────────────────────────────
   宣言は lower.css:5816-5836（B-1）と 1 文字も違わない。
   `class:TextName--Input` が付いていなくても出るように、要素と type でも当てる。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root input[type="text"],
.synergy-nform-root input[type="email"],
.synergy-nform-root input[type="tel"],
.synergy-nform-root input[type="url"],
.synergy-nform-root input[type="number"],
.synergy-nform-root input[type="date"],
.synergy-nform-root select,
.synergy-nform-root textarea{
  -webkit-appearance: none;                   /* 〔b〕lower.css:5817 */
  appearance: none;                           /* 〔c〕同上の標準プロパティ版 */
  font-size: 16px;                            /* 〔b〕lower.css:5818 */
  padding: 10px 16px;                         /* 〔b〕lower.css:5819 */
  outline: none;                              /* 〔b〕lower.css:5820 */
  display: block;                             /* 〔b〕lower.css:5821 */
  background: #fff;                           /* 〔b〕lower.css:5822 */
  border: 1px solid;                          /* 〔b〕lower.css:5823 */
  border-color: #d3d3d4;                      /* 〔b〕lower.css:5824 */
  border-radius: 4px;                         /* 〔b〕lower.css:5825 */
  width: 100%;                                /* 〔b〕lower.css:5826 */
  color: #4d4d51;                             /* 〔b〕lower.css:5827 */
  transition:
    border-color 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out;           /* 〔b〕lower.css:5832-5835 */
}
.synergy-nform-root textarea{
  padding: 7px 16px;                          /* 〔b〕lower.css:5845（B-1） */
  height: 112px;                              /* 〔b〕lower.css:5846 */
  min-height: 112px;                          /* 〔継〕form-cf7.css:333 */
  line-height: 1.5;                           /* 〔b〕lower.css:5847 */
}
/* 説明を placeholder 頼みにしない。置いてある例文は読める濃さにする。
   #717171 は白地で 4.8:1（現行サイトは #aaa on #f0f0f0 で 2.04 しか無い）。 */
.synergy-nform-root ::placeholder{
  color: var(--color-oki-gray2, #717171);     /* 〔継〕form-cf7.css:85 */
  opacity: 1;                                 /* 〔継〕form-cf7.css:86 */
}


/* ══ 4. select の矢印 ──────────────────────────────────────────────────────
   直したこと: **矢印が無かった**（実測 background-image: none / appearance: none）。
   `appearance:none` で OS の ▼ を消したのに、代わりを置いていなかった。
   「選択してください」がただの枠に見え、押せることが分からない。

   出どころ … lower.css:7115-7119 `.list-filter select`
     ＝ 良品計画（craft/rules/brand-ryohin.css・Tailwind v4 の `@layer base` の素の select）を
        絞り込み部品と一緒に**もうこのファイルに取り込んである** 4 宣言。
     ★ **SVG を自分で描いていない。**この土台にある唯一の「下向きの山」で、
       data URI も stroke の色（#6B6B6B ＝ トンマナ §3 の灰）もそのまま。
     ★ トンマナ §11「1 社から 1 部品まで」との関係は form.md §5 に書いた（要判断）。
   ★ 余白は B-1 の `padding-right:30px`（lower.css:5840）のまま。
     矢印は右から 16〜28px を占めるので、字は 30px で止まり重ならない（実測で確認）。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root select{
  padding-right: 30px;                        /* 〔b〕lower.css:5840（B-1） */
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");  /* 〔a〕lower.css:7115 */
  background-position: right 1rem center;     /* 〔a〕lower.css:7116 */
  background-repeat: no-repeat;               /* 〔a〕lower.css:7117 */
  background-size: 12px 8px;                  /* 〔a〕lower.css:7118 */
  background-color: #fff;                     /* 〔b〕lower.css:5822（上の background 短縮形と同じ値） */
}


/* ══ 5. 焦点 ───────────────────────────────────────────────────────────────
   形（枠の色が変わる ＋ 外に 2px の輪）は lower.css:5851-5859（B-2）のまま。
   ★ 色だけ置き換えた。B-2 の #0f80e9 はベンダーの青で、この頁の青（#003678）とは
     別の色。**差し色は青 1 色**（トンマナ §3）なので自社の青に寄せる。
     `color-mix` が使えない機械のために、同じ値の rgba を先に置いてある
     （後の宣言が読めなければ前が残る＝どちらでも輪は出る）。
   ★ 寸法は 1px も動かない。地も #fff のまま。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root input[type="text"]:focus,
.synergy-nform-root input[type="email"]:focus,
.synergy-nform-root input[type="tel"]:focus,
.synergy-nform-root input[type="url"]:focus,
.synergy-nform-root input[type="number"]:focus,
.synergy-nform-root input[type="date"]:focus,
.synergy-nform-root select:focus,
.synergy-nform-root textarea:focus{
  background-color: #fff;                                       /* 〔b〕lower.css:5852 */
  border-color: var(--color-oki-red);                           /* 〔c〕#003678（原文 #0f80e9） */
  box-shadow: 0px 0px 0px 2px rgba(0, 54, 120, 0.5);            /* 〔b〕形 lower.css:5854 ／〔c〕色 #003678 の 50% */
  box-shadow: 0px 0px 0px 2px color-mix(in srgb, var(--color-oki-red) 50%, transparent);
}
/* チェック・ラジオ・ボタンは輪を消していないので、見える色だけ揃える。 */
.synergy-nform-root input[type="checkbox"]:focus-visible,
.synergy-nform-root input[type="radio"]:focus-visible,
.synergy-nform-root .wpcf7-submit:focus-visible,
.synergy-nform-root .cf7-consent a:focus-visible,
.synergy-nform-root .cf7-zip button:focus-visible{
  outline: 2px solid var(--color-oki-red);    /* 〔継〕form-cf7.css:104 の形 ／〔c〕色を #003678 に */
  outline-offset: 2px;                        /* 〔継〕form-cf7.css:105 */
}


/* ══ 6. 誤り ───────────────────────────────────────────────────────────────
   枠と地は lower.css:5888-5895（B-4）のまま＝**状態の色**であって差し色ではない。
   ★ 地だけ自社トークン `--color-oki-red5`(#fbeeee) に置き換えた（原文 rgb(255,237,235)）。
   ★ 一文の字を**黒に変えた**。理由は実測: `#e84b35` は白地で **3.83:1** しかなく、
     12px の字に要る 4.5:1 に届かない。枠・地は面と境界なので 3:1 で足り、
     3.83 で足りている。**色だけに頼らず、枠＋地＋欄の直下の一文の 3 つで伝える。**
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root .wpcf7-form-control.wpcf7-not-valid,
.synergy-nform-root .wpcf7-form-control[aria-invalid="true"],
.synergy-nform-root .TextName--Input[aria-invalid="true"]{
  background: var(--color-oki-red5);          /* 〔c〕#fbeeee（原文 rgb(255,237,235)） */
  border: 1px solid rgb(232, 75, 53);         /* 〔b〕lower.css:5890（B-4） */
}
.synergy-nform-root .wpcf7-form-control.wpcf7-not-valid:focus,
.synergy-nform-root .wpcf7-form-control[aria-invalid="true"]:focus,
.synergy-nform-root .TextName--Input[aria-invalid="true"]:focus{
  background-color: rgb(255, 255, 255);                         /* 〔b〕lower.css:5893 */
  border-color: rgb(232, 75, 53);                               /* 〔b〕lower.css:5894 */
  box-shadow: rgba(232, 75, 53, 0.5) 0px 0px 0px 2px;           /* 〔b〕lower.css:5895 */
}
.synergy-nform-root .wpcf7-not-valid-tip,
.synergy-nform-root .ItemError{
  display: block;                             /* 〔継〕form-cf7.css:215 */
  margin-top: 4px;                            /* 〔b〕lower.css:5897（B-4） */
  font-size: 12px;                            /* 〔b〕B-4 の実測 20.4px = 12 × 1.7 */
  line-height: 1.7;                           /* 〔b〕同上 */
  font-weight: normal;                        /* 〔継〕form-cf7.css:219 */
  color: var(--color-oki-black);              /* ★ #0d0d0d（原文 #e84b35 は 3.83:1 で足りない） */
}


/* ══ 7. 送信のあとに出る帯（.wpcf7-response-output）────────────────────────
   出る場所は CF7 が決める（form の末尾）。動かせない。
   `form.init` のときは CF7 自身が display:none にしているので空の帯は出ない。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root .wpcf7 form .wpcf7-response-output{
  margin: 24px 0 0;                           /* 〔b〕lower.css:5900（B-4） */
  padding: 10px 16px;                         /* 〔b〕lower.css:5819（B-1） */
  border: 1px solid #d3d3d4;                  /* 〔b〕lower.css:5823-5824 */
  border-radius: 4px;                         /* 〔b〕lower.css:5825 */
  background: #fff;                           /* 〔b〕lower.css:5822 */
  color: #4d4d51;                             /* 〔b〕lower.css:5827 */
  font-size: 16px;                            /* 〔b〕lower.css:5818 */
  line-height: 1.7;                           /* 〔b〕lower.css:5864（B-3） */
  text-align: left;                           /* 〔継〕form-cf7.css:246 */
}
.synergy-nform-root .wpcf7 form.invalid .wpcf7-response-output,
.synergy-nform-root .wpcf7 form.unaccepted .wpcf7-response-output,
.synergy-nform-root .wpcf7 form.payment-required .wpcf7-response-output,
.synergy-nform-root .wpcf7 form.spam .wpcf7-response-output,
.synergy-nform-root .wpcf7 form.failed .wpcf7-response-output,
.synergy-nform-root .wpcf7 form.aborted .wpcf7-response-output{
  border-color: rgb(232, 75, 53);             /* 〔b〕lower.css:5890（B-4） */
  background: var(--color-oki-red5);          /* 〔c〕#fbeeee */
}
.synergy-nform-root .wpcf7 form.sent .wpcf7-response-output{
  border-color: var(--color-oki-red);         /* 〔c〕#003678 */
  background: #fff;                           /* 〔b〕lower.css:5822 */
}


/* ══ 8. 同意と送信を 1 つの面に載せる ──────────────────────────────────────
   直したこと: 同意のチェックが素の 1 行で、押せる床（44px）も面も持っていなかった。
   トンマナ §4「枠線は行を区切る罫として使う。囲みには使わない」ので、
   **枠を描かず、地の色で面をつくる**。影も付けない（影は 1 種類だけ・面には使わない）。

   面の出どころ … lower.css:4896 `.block-toc-base:where([data-component-id=g8dwBg])`
     border-radius:calc(10/…) / background-color:var(--color-oki-bg-gray) /
     padding:calc(30/…) calc(20/…)、1024px 以上で padding:calc(40/…)
     ＝ OKI が「目次」に使っている面。**寸法も色も 1 つも変えていない。**
   ★ この土台で 79 規則あって使用 0 回の `block-callout-base` は、
     `__content` の入れ子を前提にしていて CF7 の出力に噛み合わない。
     同じ「灰の面・角丸 10px」を持つ block-toc-base の値を写した（form.md §5）。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root .cf7-consent{
  display: grid;                              /* 〔b〕lower.css:6385 */
  row-gap: 24px;                              /* 〔b〕lower.css:5900（B-4） */
  margin-top: 24px;                           /* 〔b〕lower.css:5900（B-4） */
  border-radius: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));   /* 〔b〕lower.css:4896 */
  background-color: var(--color-oki-bg-gray); /* 〔b〕lower.css:4896（#f4f4f4） */
  padding: calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))
           calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));         /* 〔b〕lower.css:4896 */
}
@media (min-width: 1024px) {
  .synergy-nform-root .cf7-consent{
    padding: calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));       /* 〔b〕lower.css:4900 */
  }
}
/* 添え書き。
   ★ 最初 `--color-oki-gray2`(#717171) を当てたが、**描いて測ったら 4.44:1** だった。
     #717171 が 4.8:1 なのは**白地**の話で、この面は #f4f4f4 なので足りない
     （14px の字に要るのは 4.5）。同じ土台のトークンで濃い側の
     `--color-oki-black2`(#282828) に替えて **12.8:1**。 */
.synergy-nform-root .cf7-note{
  font-size: 14px;                            /* 〔b〕lower.css:5586 `.t-paragraph-3xs` */
  line-height: 1.7;                           /* 〔b〕lower.css:5864（B-3） */
  color: var(--color-oki-black2);             /* 〔c〕#282828 */
  /* 和文の折り返し。lower.css §11（NDC の 2 宣言）が `.block-paragraph-base p` に
     当てているのと同じもの。ここも走る文章なので同じ扱いにする。 */
  text-wrap: pretty;                          /* 〔b〕lower.css:7861 */
  word-break: auto-phrase;                    /* 〔b〕lower.css:7862 */
}
.synergy-nform-root .cf7-note a{
  color: inherit;                             /* 〔継〕form-cf7.css:186 */
  text-decoration: underline;                 /* 〔継〕form-cf7.css:187 */
  position: relative;                         /* 〔b〕lower.css:7775（当たり判定だけ広げる形） */
}
/* 文中のリンクは字の高さしか無いので、見た目を動かさずに当たり判定だけ 44px にする。
   ＝ lower.css §9-2 (b) がパンくず・下線タブ・ページ送りに使っているのと同じ手。
   この面では上下 24px 空いているので、44px にしても隣の的とは重ならない。 */
.synergy-nform-root .cf7-note a::after{
  content: "";                                /* 〔b〕lower.css:7777 */
  position: absolute;                         /* 〔b〕lower.css:7778 */
  top: 50%;                                   /* 〔b〕lower.css:7779 */
  left: 50%;                                  /* 〔b〕lower.css:7780 */
  transform: translate(-50%, -50%);           /* 〔b〕lower.css:7781 */
  min-width: 44px;                            /* 〔b〕lower.css:7782 */
  width: 100%;                                /* 〔b〕lower.css:7783 */
  height: 44px;                               /* 〔b〕lower.css:7784 */
}


/* ══ 9. 選択肢（チェック／ラジオ）───────────────────────────────────────────
   CF7 の既定は `.wpcf7-list-item{display:inline-block;margin:0 0 0 1em}` で横に並ぶ。
   日本語の選択肢は 1 行が長いので縦に積む。
   ★ lower.css:7767 `.synergy-nform-root input{min-height:44px}` はチェックとラジオに
     当たると**四角そのものが 44px に伸びて形が壊れる**。§9-2 自身が
     (a)「伸ばしてよいもの」と (b)「当たり判定だけ広げるもの」を分けているので、
     ここは (b) 扱い ―― 印は素のまま、行（label）を 44px にする。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root .wpcf7-list-item{
  display: block;                             /* 〔継〕form-cf7.css:167 */
  margin: 0;                                  /* 〔継〕form-cf7.css:168 */
}
.synergy-nform-root .wpcf7-list-item label,
.synergy-nform-root .cf7-consent__check label{
  display: flex;                              /* 〔継〕form-cf7.css:171 */
  align-items: center;                        /* 〔継〕form-cf7.css:172 */
  gap: 12px;                                  /* 〔継〕form-cf7.css:173（B-0 `.Frame--ContentWrapper{padding:0 12px}`） */
  min-height: 44px;                           /* 〔b〕lower.css:7767（§9-2 の床） */
  font-weight: normal;                        /* 〔継〕form-cf7.css:125 選択肢のラベルは見出しではない */
  font-size: 16px;                            /* 〔b〕lower.css:5818（B-1） */
  line-height: 1.7;                           /* 〔b〕lower.css:5864（B-3） */
}
.synergy-nform-root input[type="checkbox"],
.synergy-nform-root input[type="radio"]{
  min-height: 0;                              /* 〔継〕form-cf7.css:178 */
  flex-shrink: 0;                             /* 〔継〕form-cf7.css:179 */
  accent-color: var(--color-oki-red);         /* 〔c〕#003678。印の色を差し色に揃える（形は OS のまま） */
}


/* ══ 10. 送信ボタン ────────────────────────────────────────────────────────
   直したこと: 地が **#4D4D51**（ベンダーの灰）だった。この頁のボタンは
   `.button-base`（lower.css:1551）で、地は `--color-oki-red2`(#001f45)・角丸 5px。
   ★ **CSS で作り直していない。** 本文（cf7-6.txt / cf7-19.txt）の `[submit]` に
     `class:button-base class:t-paragraph-2xs` を足して、**既にある部品をそのまま
     配線した**。下の 4 本は `<input type=submit>` に無いもの（枠・カーソル・
     ホバーの手応え・行の中央）を足しているだけ。
   ★ 使えないとき（同意が外れている間 CF7 が disabled を付ける）は
     lower.css:1661 `.button-base[disabled]{opacity:.2; --button-base-color-bg:var(--color-oki-gray)}`
     がそのまま効く。
   ════════════════════════════════════════════════════════════════════════ */
.synergy-nform-root .wpcf7-submit,
.synergy-nform-root .cf7-submit button[type="submit"]{
  -webkit-appearance: none;                   /* 〔b〕lower.css:5911（B-5） */
  appearance: none;                           /* 〔c〕同上の標準プロパティ版 */
  border: none;                               /* 〔b〕lower.css:5912 */
  cursor: pointer;                            /* 〔b〕lower.css:5917 */
  transition: opacity 0.2s ease-out;          /* 〔b〕lower.css:5915-5916 */
  /* ★ ここは「足した」のではなく「戻した」。lower.css:5789 の
     `.synergy-nform-root *{margin:0;padding:0}` は `.button-base`(lower.css:1558) と
     特異度が同じ(0,1,0)で、ファイルの**後ろにある**ので勝つ。つまり
     **この器の中では .button-base の padding が 0 に潰れる**（実測 141.2 × 44px＝
     §9-2 の床だけで立っていた）。値は .button-base のものを 1px も変えずに戻す。 */
  padding: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))
           calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* 〔b〕lower.css:1558 */
}
@media (min-width: 1024px) {
  .synergy-nform-root .wpcf7-submit,
  .synergy-nform-root .cf7-submit button[type="submit"]{
    padding-top: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));      /* 〔b〕lower.css:1564 */
    padding-right: calc(23 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));    /* 〔b〕lower.css:1565 */
    padding-bottom: calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));   /* 〔b〕lower.css:1566 */
    padding-left: calc(21 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));     /* 〔b〕lower.css:1567 */
  }
}
@media (hover: hover) {
  .synergy-nform-root .wpcf7-submit:hover,
  .synergy-nform-root .cf7-submit button[type="submit"]:hover{
    opacity: 0.6;                             /* 〔b〕lower.css:5931-5932（B-5） */
  }
}
.synergy-nform-root .cf7-submit{
  text-align: center;                         /* 〔継〕form-cf7.css:295 */
}
/* CF7 は送信ボタンと同じ行に見えないスピナー（24px ＋ 左右 24px = 72px）を置き、
   `visibility:hidden` で**場所だけ取り続ける**。行が中心から 36px ずれるので、
   送信中だけ行に出す。名前は変えていない（CF7 が付け外しする .submitting を見る）。 */
.synergy-nform-root .wpcf7-spinner{
  display: none;                              /* 〔継〕form-cf7.css:306 */
}
.synergy-nform-root .wpcf7 form.submitting .wpcf7-spinner{
  display: inline-block;                      /* 〔継〕form-cf7.css:309 */
}


/* ══ 11. 郵便番号の行（エントリーだけ）──────────────────────────────────────
   本番のテーマ JS（themes/Remind/dist/assets/main-*.js）が `#zip` / `#zip-search-btn` /
   `#pref` / `#address` を見て zipcloud を叩いている。**id を変えない。**
   ボタンは `.button-base` をそのまま配線する（本文側で class を付ける）。
   ここは行の組み方だけ。 */
/* ★ CF7 の autop は div の中のインラインの連なりを <p> で包む（本番の出力で実測）。
   包まれても包まれなくても行が組めるように、両方に同じ 3 宣言を当てている。 */
.synergy-nform-root .cf7-zip,
.synergy-nform-root .cf7-zip > p{
  display: flex;                              /* 〔b〕lower.css:1554（.button-base と同じ flex 族） */
  align-items: center;                        /* 〔b〕lower.css:1555 */
  column-gap: 12px;                           /* 〔継〕form-cf7.css:173（B-0 の 12px） */
}
.synergy-nform-root .cf7-zip > p{
  flex: 1 1 100%;                             /* 〔c〕包みが行いっぱいを取る */
  min-width: 0;                               /* 〔c〕縮めるため */
}
.synergy-nform-root .cf7-zip .wpcf7-form-control-wrap{
  flex: 1 1 auto;                             /* 〔c〕入力欄が残り幅を取る */
  min-width: 0;                               /* 〔c〕縮めるため */
}
.synergy-nform-root .cf7-zip button{
  flex-shrink: 0;                             /* 〔継〕form-cf7.css:179 */
  white-space: nowrap;                        /* 〔b〕lower.css:5880（B-3） */
  cursor: pointer;                            /* 〔b〕lower.css:5917 */
  /* 送信ボタンと同じ理由（lower.css:5789 が .button-base の padding を 0 に潰す）で戻す。 */
  padding: calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))
           calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));  /* 〔b〕lower.css:1558 */
}


/* ══ 12. 動きを止めたい人の分 ──────────────────────────────────────────────
   宣言は oki-copy/style.css §13（:5772 ほか）と同じ形。
   この部品が持つ動きは「枠と輪の 0.2s」「ボタンの opacity 0.2s」の 2 つだけ。
   ════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .synergy-nform-root input,
  .synergy-nform-root select,
  .synergy-nform-root textarea,
  .synergy-nform-root .wpcf7-submit,
  .synergy-nform-root .cf7-submit button[type="submit"]{
    transition-duration: .01ms !important;    /* 〔b〕oki-copy/style.css:5772 */
    transition-delay: 0s !important;          /* 〔b〕oki-copy/style.css:5785 */
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   §17 節の境目の装飾（スクロールで動く）— `.deco-bars`
   ────────────────────────────────────────────────────────────────────────────
   2026-09-10。オーナー指示「レイヤーXみたいなスクロールしたら動くオブジェクトの装飾」。
   3 度作り直している（経緯は template-parts/deco-bars.php の頭に書いた）。

   ★ いちばん大事なところ: **1 つのオブジェクトは面 3 枚でできている。**
     LayerX の節の境目を実測すると、白い面・青い面・灰の面が重なって立体に見えていた。
     「オブジェクト」に見えるのはそこで、平らな一色の板は何枚並べても板のまま。

   ★ 色は **Remind 自身のロゴ（logo.png）の画素から実測した 4 色**。
     #3070B0 青 / #3060A0 濃い青 / #30B0A0 青緑 / #20A080 緑。
     会社概要いわく「4 つにセパレートされたデザイン」。**新しい色は決めていない。**

   ★ 形と 30 度の角度は LayerX から写した帯のまま（path は 1 文字も変えていない）。

   ── 器の高さ ──────────────────────────────────────────────────────────────
     OKI が本文と兄弟ページ一覧のあいだに元から空けている 70px（SP）/ 140px（PC）。
   ══════════════════════════════════════════════════════════════════════════ */
.deco-bars{
  position:relative;
  overflow:hidden;
  pointer-events:none;
  width:100%;
  height:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));

  /* ロゴから実測した 4 色。奥ほど薄く、手前ほど濃い。
     白地に置くので白と混ぜて明度を上げている（混ぜる比だけがこちらの判断）。 */
  --deco-face-1: color-mix(in srgb, #30B0A0 26%, #fff);   /* 奥 … 青緑 */
  --deco-face-2: color-mix(in srgb, #3070B0 40%, #fff);   /* 中 … 青 */
  --deco-face-3: color-mix(in srgb, #3060A0 62%, #fff);   /* 手前 … 濃い青 */

  --deco-progress: .5;
}
@media (min-width: 1024px){
  .deco-bars{
    height:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));
  }
}

.deco-bars .c-svg-graphic{
  position:absolute;
  transform:rotate(30deg);
  transform-origin:0 center;
  width:200vw;
}
.deco-bars .c-svg-graphic svg{ max-width:none; position:relative; width:100% }
.deco-bars .c-svg-graphic mask path{ fill:#fff!important }

.deco-bars .c-svg-graphic[data-face="1"] path{ fill:var(--deco-face-1) }
.deco-bars .c-svg-graphic[data-face="2"] path{ fill:var(--deco-face-2) }
.deco-bars .c-svg-graphic[data-face="3"] path{ fill:var(--deco-face-3) }

/* ── 面ごとの厚み（立体に見せているのはここ）────────────────────────────────
   同じ形を、面の番号ぶんだけ**回転の軸に垂直な向き**へずらす。
   ずらす量がスクロールで変わるので、厚みが伸び縮みして「回っている」ように見える。
   ・奥（1）はほとんど動かない
   ・手前（3）がいちばん動く
   これが無いと 3 枚がぴったり重なって、また 1 枚の板に戻る。 */
.deco-bars .c-svg-graphic svg{
  --deco-t: calc(.476190476 + (var(--deco-progress) - .5) * var(--deco-speed, .40));
  --deco-lift: calc(var(--deco-depth, 0) * (6px + 26px * var(--deco-progress)));
  transform: perspective(1000px)
             translate3d(calc((var(--deco-t) * 2.1 - 1) * 100%),
                         calc((var(--deco-progress) - .5) * -40% - var(--deco-lift)), 0px);
  will-change: transform;
}
.deco-bars .c-svg-graphic[data-face="1"] svg{ --deco-speed:.30; --deco-depth:0 }
.deco-bars .c-svg-graphic[data-face="2"] svg{ --deco-speed:.40; --deco-depth:1 }
.deco-bars .c-svg-graphic[data-face="3"] svg{ --deco-speed:.52; --deco-depth:2 }

@media (prefers-reduced-motion: reduce){
  .deco-bars .c-svg-graphic svg{ transition:none }
}