/* ══════════════════════════════════════════════════════════════════════════════ 株式会社Remind — OKI（www.oki.com/global/ja/）の規則を移植した 1 枚 ──────────────────────────────────────────────────────────────────────────── 組み立て: 移植済みの 8 部品（ヘッダーとナビ / ヒーロー / 共通部品 / ニュース一覧 / 事業領域 / About の固定面 / 数字 / フッター）を、この順に 1 本へ畳んだもの。 加えて t-and-i（2 列の節）だけは OKI の #technologies-and-innovation の規則を ここで直接移植して足した（部品として渡されていなかったため）。 畳むときにしたこと（これ以外は部品の原文のまま）: 1. :root を 1 つにまとめた（各部品が持っていた同じ宣言を 1 か所へ） 2. 同じセレクタの重複を潰した。残した側は必ず 1 つ: .t-container / .desktop-only / .mobile-only / .image-rounded / .icon-base / .deco-dot / .text-shoulder / .heading-hgroup 一式 / .button-base 一式 / [data-underline-anime-*] / [data-image-scale-anime-*] / .t-label-* 3. prefers-reduced-motion は各部品から外し、最後に 1 つへ集約した 4. 12px 未満になる字に max(12px, …) の床を敷いた（式そのものは触っていない） 色は OKI の赤 2 本を青へ（--color-oki-red #003678 / --color-oki-red2 #001f45）。 規則側は色を直書きしていないので、変えたのは :root の 2 行だけ。 ══════════════════════════════════════════════════════════════════════════════ */ /* ── §1 :root（8 部品の :root の和集合。値は各部品のものと同じ）───────────── */ :root{ /* 流体の寸法。素は SP（390 基準）で、1024px から PC（1440 基準）へ切り替わる */ --scrollbar-width: 15px; /* script.js が実測して書き戻す */ --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 ); --u: calc( (var(--effective-viewport-width) - var(--scrollbar-width)) / var(--screen-size) ); --font-size: 16; --header-size: 56px; --layer-drawer: 10; --notification-size: 1; /* 色（OKI の変数名のまま、赤 2 本だけ値を青に差し替え） */ --color-oki-black: #0d0d0d; --color-oki-black2: #282828; --color-oki-white: #fbfbfb; --color-oki-gray: #909090; --color-oki-gray3: #ededed; --color-oki-gray5: #e6e6e6; --color-oki-line-gray: #e6e6e6; --color-oki-bg-gray-dark-0-8: rgba(237, 237, 237, .8); --color-oki-red: #003678; /* OKI: #ff0000 */ --color-oki-red2: #001f45; /* OKI: #e90000 */ /* 曲線と長さ（OKI の実値） */ --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-5: cubic-bezier(.55, .05, .22, .99); --duration-300: .3s; --duration-500: .5s; --duration-800: .8s; --duration-1200: 1.2s; /* ── ここから下は parts2 の 13 部品の :root の和集合（値は各部品のまま）── */ /* ── gateway ── */ --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-content: ""; /* ── strength ── */ /* 色 */ --strength-general-white: #fff; --strength-smoke-5: #f2f5f9; /* 箱の地・帯の下端 */ --strength-smoke-60: #7e90a3; --strength-smoke-80: #233447; --strength-bakuraku-20: #cfe3ff; /* 4 枚目の光 */ --strength-color-text-inverse: var(--strength-general-white); --strength-color-text-primary: var(--strength-smoke-80); /* ↓ 参照元は #013572 / #0053b1（帯）と #01358a / #2d81ec（番号チップ）。 停止位置と角度は原文のまま、色だけ Remind の青に差し替えた */ --strength-bg-top-1: var(--color-oki-red2); /* bakuraku: #013572 */ --strength-bg-top-2: var(--color-oki-red); /* bakuraku: #0053b1 */ --strength-chip-1: var(--color-oki-red2); /* bakuraku: #01358a */ --strength-chip-2: var(--color-oki-red); /* bakuraku: #2d81ec */ /* 書体 */ --strength-font-family-jp: "Noto Sans JP"; --strength-font-family-en: "Figtree"; /* bakuraku: "Montserrat" */ --strength-font-weight-r: 400; --strength-font-weight-m: 500; --strength-font-weight-b: 600; --strength-font-weight-xb: 700; --strength-font-size-2s: 12px; --strength-font-size-xs: 14px; --strength-font-size-sm: 16px; --strength-font-size-md: 18px; --strength-font-size-lg: 20px; --strength-font-size-xl: 24px; --strength-font-size-2xl: 28px; --strength-font-size-4l: 56px; --strength-letter-spacing-sm: 0%; --strength-letter-spacing-md: .02em; --strength-letter-spacing-lg: .05em; --strength-line-height-sm: 125%; --strength-line-height-md: 150%; --strength-line-height-lg: 175%; /* 寸法 */ --strength-radius_md: 8px; --strength-spacing_2xs: 4px; --strength-spacing_xs: 8px; --strength-spacing_sm: 12px; --strength-spacing_md: 16px; --strength-spacing_lg: 24px; --strength-spacing_xl: 32px; --strength-spacing_2xl: 40px; --strength-spacing_3xl: 56px; --strength-spacing_4xl: 64px; --strength-inner-main-pc: 1130px; --strength-gutter-sp: 24px; /* ── flow ── */ /* 参照元 jp.sansan.com は html{font-size:62.5%} を敷いており 1rem = 10px。 この 1 枚は 16px 基準なので、参照元の rem をこの単位に読み替える。 */ --flow-rem: .625rem; /* ── result ── */ --result-ground: #d5e2f0; /* 参照元 #EFE94D … 節の地（青を薄めた地） */ --result-ink: #0d0d0d; /* 参照元 #000 … 罫と文字（= --color-oki-black） */ --result-accent: #fbfbfb; /* 参照元 #EFE9DE … 見出しの下敷き（= --color-oki-white） */ --result-fill: #fbfbfb; /* 参照元 #EFE9DE … 太い帯の中（= --color-oki-white） */ --result-fill-line: #003678; /* 参照元 #aaa449 … 太い帯の縁（= --color-oki-red） */ --result-previous: #5b83b5; /* 参照元 #c2bc54 … 細い帯（残り） */ /* ── articles ── */ /* 参照元の曲線と長さ。既存の --easing-* はどれも ease-in-out 寄りで この強い ease-out に当たるものが無いため、新しく足した */ --articles-easing: cubic-bezier(.25, 1, .5, 1); /* 実測 */ --articles-duration: .4s; /* 実測 400ms */ --articles-ring-duration: .16s; /* 実測 矢印の輪 */ --articles-bar-duration: .2s; /* 実測 進み具合の棒 */ /* 寸法（素は SP。設計幅 390 で下の N px になる） */ --articles-pad: calc(var(--column-unit) * 1); /* .t-container と同じ左右 */ --articles-gap: calc(30 * var(--u)); /* 実測 30 */ --articles-card: calc(var(--column-unit) * 22); /* SP は器いっぱい＝1 枚見せ */ --articles-arrow: calc(60 * var(--u)); /* 実測 SP 60 */ --articles-progress: calc(215 * var(--u)); /* 実測 215（SP では出さない） */ --articles-nav-gap: calc(20 * var(--u)); /* 実測 SP 20 */ --articles-radius: calc(6 * var(--u)); /* 実測 6 */ --articles-inset: calc(30 * var(--u)); /* 札の内側 実測 30 */ --articles-inset-x: calc(20 * var(--u)); /* 札の内側 左右 実測 SP 20 */ --articles-title: calc(15 * var(--u)); /* 実測 SP 15 */ /* ── message ── */ /* 参照元の 1rem（＝10px）。数字を原文のまま書くための物差し。§冒頭 1 参照 */ --message-rem: .625rem; /* 色トークン（中身だけ差し替え。規則側は色を直書きしていない） */ --message-bg: var(--color-oki-red2, #001f45); /* persol: #97999B */ --message-fg: var(--color-oki-white, #fbfbfb); /* persol: #ffffff */ --message-rule: var(--color-oki-gray5, #e6e6e6); /* persol: #d9d9d6 */ /* ── recruit ── */ --recruit-easing-3: cubic-bezier(.47, .16, .24, 1); --recruit-duration-700: .7s; --recruit-dot-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='60'%3E%3Crect width='50' height='60' fill='%23001f45'/%3E%3Cg fill='%2308274d'%3E%3Crect x='0' y='13' width='2' height='2'/%3E%3Crect x='0' y='28' width='2' height='2'/%3E%3Crect x='0' y='43' width='2' height='2'/%3E%3Crect x='0' y='58' width='2' height='2'/%3E%3Crect x='25' y='13' width='2' height='2'/%3E%3Crect x='25' y='28' width='2' height='2'/%3E%3Crect x='25' y='43' width='2' height='2'/%3E%3Crect x='25' y='58' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E"); /* ── faq ── */ /* 100vw を単位無しの数にする細工。参照元の式そのまま */ --faq-100vw: 100vw; --faq-window-width: tan(atan2(var(--faq-100vw), 1px)); --faq-px: calc(1px * max(1440, var(--faq-window-width)) / 1440); --faq-rem: calc(10px * max(1440, var(--faq-window-width)) / 1440); /* 参照元は 1rem（＝実測 10px）*/ /* 色（規則側は触らず、トークンの中身だけ当ページの色へ）*/ --faq-color-text-black: var(--color-oki-black); /* 参照元 #1f1e1b */ --faq-color-text-white: var(--color-oki-white); /* 参照元 #fff */ --faq-color-ui-path: var(--color-oki-black2); /* 参照元 #4e4c49 枠線 */ --faq-color-gray: #cfcfcf; /* 参照元 #cdcbc8 Q/A の札の枠 */ --faq-color-accent: var(--color-oki-red); /* 参照元 #00c4cc ホバーの輪と印 */ --faq-color-mark: #dbe6f4; /* 参照元 #d4f4f5 文中リンクの敷き色 */ --faq-ff-number: system-ui, sans-serif; /* 参照元 neue-haas-grotesk-display */ /* 寸法・字・時間（係数はすべて参照元のまま）*/ --faq-offset: clamp(20 * var(--faq-px), 1.878vw + 12.958 * var(--faq-px), 40 * var(--faq-px)); --faq-gap: clamp(19 * var(--faq-px), 1.972vw + 11.605 * var(--faq-px), 40 * var(--faq-px)); --faq-radius: calc(10 * var(--faq-px)); --faq-fz-lv4: clamp(1.8 * var(--faq-rem), .188vw + 1.7295 * var(--faq-rem), 2 * var(--faq-rem)); --faq-fz-small: calc(1.4 * var(--faq-rem)); --faq-fz-xsmall: calc(1.2 * var(--faq-rem)); --faq-lh-h4: 1.8em; --faq-space-02-rem: calc(4 * var(--faq-rem)); --faq-space-03-rem: calc(2 * var(--faq-rem)); --faq-space-02-03-rem: clamp(2 * var(--faq-rem), 1.878vw + 1.2958 * var(--faq-rem), 4 * var(--faq-rem)); --faq-transition-duration: .6s; --faq-transition-timing-function: cubic-bezier(.23, 1, .32, 1); /* ── company ── */ /* 参照元 kubell の :root の値そのまま。名前だけ --company- を付けた。 ここに無いもの（本文色・書体・行送りの土台）は、この 1 枚の既存の値を使う。 */ --company-color-grey06: #dddddd; /* 行を区切る 1px の罫。kubell: --color-grey06 */ --company-color-grey08: #f3f3f3; /* 見出し列の地 / ボタンの地。kubell: --color-grey08 */ --company-fontSize-caption: .875rem; /* = 14px。dd とボタンの字 */ --company-lineHeight-tight: 1.6; /* dd の行送り */ --company-lineHeight-headline: 1.3; /* dt の行送り */ --company-border-radius: 6px; /* ボタンの角 */ /* 罫と地だけ土台のトークン（--color-oki-line-gray #e6e6e6 / --color-oki-gray3 #ededed）に 寄せなかった理由: その 2 つは差が 7/255 しかなく、**1px の罫が見出し列の地に 溶けて消える**（この部品は「1px の罫で行を区切る作り」そのものなので、 消えたら部品が成立しない）。参照元の #DDDDDD / #F3F3F3 は差が 22/255 ある。 色トークンの「中身」だけを持ってきた形。 */ /* ── contactband ── */ /* 参照元 @media(max-width:1400px) .contact-banner-text{margin-bottom:30px} ＝ この帯が縦に積むときの空き。2 本のボタンの間にも同じ値を使う */ --contactband-stack-gap: 30px; /* ── herobar ── */ /* 参照元の値。既存の土台に同じものがあるならそちらを使う: cubic-bezier(.26,.06,0,1) は既存の --easing-0 と完全に同じ値だったので 下では var(--easing-0) と書いている。.5s も既存の --duration-500 と同値。 */ --herobar-duration-600: .6s; /* layerx: transition: opacity .6s */ --herobar-duration-1000: 1s; /* layerx JS: to(..., {duration: 1}) */ --herobar-ease-power3-inout: cubic-bezier(.77, 0, .175, 1); /* GSAP "Power3.easeInOut" の CSS 近似 */ /* 面の色 4 本。参照元は #dee1e7 / #8dbbff / #4111ff / #534dff（灰と紫青）。 指定の青 2 本 #003678(--color-oki-red) と #001f45(--color-oki-red2) を結ぶ線の上に 4 段を取り直した。ロゴの青から外れない。 */ --herobar-color-1: #002552; /* red2 と red の 25% 混色 */ --herobar-color-2: #003678; /* = --color-oki-red */ --herobar-color-3: #002d64; /* red2 と red の 60% 混色 */ --herobar-color-4: #001f45; /* = --color-oki-red2 */ /* ── megamenu ── */ /* 参照元 www.recruit.co.jp は html に --custom-rem を敷いており、PC では 1440 分の 10。 この 1 枚の土台の式で書くと同じ値になる（--screen-size は PC で 1440）。 */ --custom-rem: calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); /* 参照元の影の色 rgba(14,51,108,.06|.12) を、この 1 枚の紺 #001f45 に読み替えたもの */ --megamenu-shadow-1: rgba(0, 31, 69, .06); --megamenu-shadow-2: rgba(0, 31, 69, .12); /* ── stickycta ── */ --lx-sticky-opacity: .85; --lx-sticky-height: 0px; } @media (min-width: 1024px){ :root{ --screen-size: 1440; --column-size: 48; /* ── articles（PC）── */ --articles-pad: calc(var(--column-unit) * 2); --articles-gap: calc(30 * var(--u)); /* 実測 30 */ --articles-card: calc(367 * var(--u)); /* 実測 367 */ --articles-arrow: calc(80 * var(--u)); /* 実測 80 */ --articles-nav-gap: calc(30 * var(--u)); /* 実測 30 */ --articles-inset-x: calc(30 * var(--u)); /* 実測 PC は 30px 四方 */ --articles-title: calc(16 * var(--u)); /* 実測 PC 16 */ } } /* ── §2 素の下ごしらえ ──────────────────────────────────────────────────── OKI は全体リセット（preflight 相当）を前提に書いてある。ここはその最小限。 overflow-x は clip（hidden にするとフッターの position:sticky が死ぬ）。 */ /* ★ 2026-09-10、**OKI 原文のリセットを写し切っていなかった**ので直した。 OKI 実測（CDP の getMatchedStylesForNode）: *, ::before, ::after { box-sizing:border-box; margin:0; padding:0 } img, picture, video, canvas, svg { display:block; max-width:100% } こちらは box-sizing の 1 行しか写していなかった。 **この style.css の中身は OKI の規則そのものなので、OKI が前提にしている 「margin も padding も 0 から始まる」が無いと、ブラウザ既定の余白が全部乗る。** 目に見えていた例（オーナー報告 2026-09-10）: ハンバーガー `.button-menu`（44×44）の中の svg が 28×28 になり、 viewBox 0 0 44 44 の中の 8 単位の棒が **5.1px** に潰れて、 紺の四角に白い点が 1 つあるだけに見えていた。 内訳は Chrome の button 既定の padding 6px×2 と border 2px×2 で 44−12−4=28。 OKI 本家は 38.5×38.5 / 棒 7.0px。 */ *,::before,::after{ box-sizing:border-box; margin:0; padding:0 } img,picture,video,canvas,svg{ display:block; max-width:100% } html{ scrollbar-gutter:stable } body{ margin:0; overflow-x:clip; background:#fff; color:var(--color-oki-black); font-family:"Noto Sans JP","Figtree",system-ui,sans-serif; font-size:16px; line-height:1.4; word-break:auto-phrase; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100% } a{ color:inherit; text-decoration:none } ul,ol{ margin:0; padding:0; list-style:none } p,h1,h2,h3,figure,hgroup{ margin:0 } button{ font:inherit } :focus-visible{ outline:2px solid var(--color-oki-red); outline-offset:2px } /* OKI の書体クラス。Saans / MFW-YuGo は使えないので Noto Sans JP を後ろに足した （太さの数値は OKI のまま） */ html[lang=ja] .ja-font-medium{ font-family:Saans-medium,MFW-YuGoPr6N-Demi,"Noto Sans JP",system-ui,sans-serif; font-weight:600 } html[lang=ja] .ja-font-semi-bold{ font-family:Saans-semi-bold,MFW-YuGoPr6N-Bold,"Noto Sans JP",system-ui,sans-serif; font-weight:700 } html[lang=ja] .ja-font-bold{ font-family:Saans-bold,MFW-YuGoStdN-ExtraBold,"Noto Sans JP",system-ui,sans-serif; font-weight:800 } /* 器と出し分け（出典: oki/style.css の .t-container / .desktop-only / .mobile-only）。 8 部品のうち 3 つが同じ宣言を持っていたので、ここ 1 つに畳んだ */ .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) } } @media (max-width: 1023.98px){ .desktop-only{ display:none !important } } @media (min-width: 1024px){ .mobile-only{ display:none !important } } /* ══════════════════════════════════════════════════════════════════════════════ §3 共通部品 — 見出し / ボタン / 下線 / 写真の拡大 / アイコンの押し出し ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 共通部品（見出し・ボタン・下線・写真拡大・アイコン押し出し） OKI（www.oki.com/global/ja/）の style.css から規則をそのまま移植したもの。 値は 1 つも書き起こしていない。出典は各ブロックの先頭に書いた。 移植にあたって触ったのは次の 3 つだけ: 1. 色 … :root の --color-oki-red / -red2 の「値」を青に差し替えた（規則側は無改造） 2. 中身 … 文言・写真は Remind のもの 3. セレクタ… OKI の `:where([data-component-id=…])` は特異度 0 の scope 指定なので外した （この属性を我々の HTML に持たない以上、残すと 1 つも当たらない） 余白・大きさ・時間・曲線・入れ子は変えていない。 ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. 見出し hgroup ──────────────────────────────────────────────── 出典: oki/style.css → rules/heading-hgroup.css を grep して復元 `.heading-hgroup:where([data-component-id="2rtQJv"])` 系 12 規則 既定は左。`-align-right` で題だけが右半分（24 カラム分）へ寄り、 さらに上へ 10px 食い込む（＝肩ラベルと題の頭がそろう）。 */ .heading-hgroup{ --pseudo-elements-size: calc(var(--column-unit) * 4.7); display:flex; flex-direction:column; } .heading-hgroup .heading-hgroup__title{ margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); color:var(--color-oki-black); font-style:normal; font-weight:790; font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; letter-spacing:-.02em; } @media (min-width: 1024px){ .heading-hgroup .heading-hgroup__title{ margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-size:calc(52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } html[lang=ja] .heading-hgroup .heading-hgroup__title{ font-size:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); 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-hgroup .heading-hgroup__title{ 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))); } .heading-hgroup.-align-right .heading-hgroup__title{ margin-top:calc(-10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left:auto; width:calc(var(--column-unit) * 24); } } /* OKI の `-clip-top` / `-clip-bottom`（題の 1 行目・最終行を欧文用に float で削る）は移していない。 OKI 自身が `html[lang=ja]` で `content:none` にして殺しているため、日本語だけの当サイトでは死に規則。 同じ ::before を島津の棒に使うので、残すと衝突だけが残る。 */ /* ── 2. 肩ラベル（OKI の「点＋欧文」を捨てて他社の判断に差し替えた 2 か所）── 置き換え A（SmartHR）: 10px / 700 / 字間 .5px を全幅 1px 罫の左端に貼る。 ラベル自身は下に余白を持たない（罫がラベルの下端）。 置き換え B（島津） : 題の左上に 40×4px の棒を ::before で置く。 ※ クラス名は OKI のまま（.text-shoulder / .heading-hgroup__title）。 ※ 罫の色は OKI の --color-oki-line-gray をそのまま使う。 */ .heading-hgroup .heading-hgroup__title::before{ content:""; display:block; width:40px; height:4px; background:var(--color-oki-red); } /* ── 3. ボタン ──────────────────────────────────────────────────────── 出典: oki/rules/button-base.css `.button-base:where([data-component-id="2jzdct"])` 系 全 24 規則 高さ 48（16+16+16px 行）・角丸 5px・13px/800。 ホバーで ラベルが .9d・右の矢印が .8d 進んで消え、左から矢印が生える。 移動量 d は JS が測って --distance に書く（parts/common.js）。 ※ --distance の既定値 0px だけ足した。JS が走らないと transform 全体が invalid になり、本来見えない左矢印が出てしまうため（M-033: 可視性を JS に預けない）。 */ .button-base{ --button-base-color-text: var(--color-oki-white); --button-base-color-bg: var(--color-oki-red2); --distance: 0px; 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 .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))); } .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--right{ padding-left:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .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); } .button-base .button-base__label{ transform:translateZ(0) } .button-base .buttonBase__icon--right{ transform:translateZ(0) } @media (any-hover: hover){ .button-base:hover .buttonBase__icon--left{ transform:scale(1) } .button-base:hover .button-base__label{ transform:translate3d(calc(var(--distance) * .9),0,0) scale(1) } .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))); } .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--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(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } /* ボタンのラベル字（出典: oki/style.css `.t-label-md`）。 OKI のボタンは class="button-base -size-md t-label-md" の組で使う。 これが無いと 16px/400 の地の字のまま出てしまう。 */ .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))) } } .button-base[disabled], a.button-base:not([href]){ opacity:.2; pointer-events:none; --button-base-color-bg: var(--color-oki-gray); } /* ── 4. 下線の 2 本立て ──────────────────────────────────────────────── 出典: oki/style.css `[data-underline-anime-root]` / `[data-underline-anime-target]` 8 規則 ::before（薄い方）が右へ縮み、::after（濃い方）が .2s 遅れて左から伸びる。 ホバー中の `.hover` クラスは JS が付ける（OKI と同じ）。 `.hover` 無しの素の :hover でも ::after だけは動く＝JS が走らなくても下線は出る。 */ [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; } /* ── 5. 写真（角丸の器と 1.08 倍の拡大）────────────────────────────── 出典: oki/rules/image-roundedscale.css `[data-image-scale-anime-target]` 3 規則 ＋ `.image-rounded:where([data-component-id=axvJSB])` 4 規則 */ [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); } /* ここだけ OKI と形が違う: OKI はこの 1 本を素の :hover で書いている（33 件中これだけ）。 指で触る機械では触れた瞬間に拡大が焼き付くので、社の決め事どおり any-hover で囲った。 値は 1 つも変えていない。 */ @media (any-hover: hover){ [data-image-scale-anime-root]:hover [data-image-scale-anime-target] img{ scale:var(--image-scale-size); } } .image-rounded{ 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{ border:1px solid var(--color-oki-gray5) } .image-rounded 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]{ aspect-ratio:auto } .image-rounded[data-use-image-size=true] img{ position:relative; width:100%; height:auto; -o-object-fit:fill; object-fit:fill; } /* ── 6. アイコンの押し出し（grid 1 マスに 2 枚重ねる）────────────────── 出典: oki/style.css `[data-push-icon-root]` 15 規則（right / down / left の 3 向き） 器の大きさ・色は OKI の `.item-icon`（block-gateway-secondary 系）から。 */ [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); } [data-push-icon-root]:hover :where([data-push-icon-target=right]) .icon-base:first-child{ translate:0 0; opacity:1 } [data-push-icon-root]:hover :where([data-push-icon-target=right]) .icon-base:last-child{ translate:100% 0; opacity:0 } [data-push-icon-root]:hover :where([data-push-icon-target=down]) .icon-base:first-child{ translate:0 0; opacity:1 } [data-push-icon-root]:hover :where([data-push-icon-target=down]) .icon-base:last-child{ translate:0 100%; opacity:0 } [data-push-icon-root]:hover :where([data-push-icon-target=left]) .icon-base:first-child{ translate:0 0; opacity:1 } [data-push-icon-root]:hover :where([data-push-icon-target=left]) .icon-base:last-child{ translate:-100% 0; opacity:0 } } /* 器（出典: oki/style.css `.block-gateway-secondary … .item-icon`） */ .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))); color:var(--color-oki-red); } /* 器の中でアイコンを一杯に開く（出典: oki/style.css `.arrow-slide-in__icon{width:100%;height:100%}`）。 .icon-base の既定 1.125lh は周りの行送り次第で器からはみ出す（実測 16.8px の器に 25.2px）。 */ .item-icon .icon-base{ width:100%; height:100% } /* アイコン共通（出典: oki/style.css `.icon-base:where([data-component-id="7fa3jg"])`） */ .icon-base{ width:1.125lh; height:1.125lh } .icon-base path{ fill:currentColor } /* ── 7. 動きを減らす設定（OKI は 0 件。ここは真似しない）────────────── */ /* ── 8. 受け皿（下線・押し出し・写真拡大を載せる行。別部品からの最小限）── 出典: oki/rules/list-news-thumbnail.css / oki/style.css `.t-text-news-title` 一覧はカードでなく 1px 罫の行。影も角丸も持たせない。 */ /* ── 肩ラベル（.text-shoulder）──────────────────────────────────────────── 8 部品のうち 2 つ（共通部品・ニュース一覧）が別の値で持っていたので 1 つに畳んだ。 採ったのは OKI の実値（12px → 1024px 以上で 14px・670）＋ SmartHR の判断 （全幅 1px 罫の左端に貼る／ラベル自身は下に余白を持たない）。 共通部品が持っていた 10px 版は落とした ── 12px 未満の字を作らない、を優先。 出典: oki/rules/heading-hgroup.css の .text-shoulder / oki/style.css */ .text-shoulder{ display:flex; align-items:center; width:100%; border-bottom:1px solid var(--color-oki-line-gray); padding-bottom:0; margin-bottom:0; color:currentColor; font-style:normal; font-weight:670; line-height:100%; letter-spacing:-.01em; font-size:max(12px, calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); -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))); } @media (min-width: 1024px){ .text-shoulder{ font-size:max(12px, calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); -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))); } } /* ── 点（.deco-dot）─────────────────────────────────────────────────────── 4 部品（ニュース・事業領域・About・フッター）が同じものを持っていたので 1 つに。 出典: oki/style.css `.deco-dot:where([data-component-id=g6iuKk])` 4 規則 */ .deco-dot{ display:block; flex-shrink:0; 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))); } } /* ── 小見出しと本文（.heading-base / .paragraph-base）────────────────────── t-and-i と About が使う。About は自分の寸法で上書きするので、ここは既定（md）だけ。 出典: oki/style.css `.heading-base:where([data-component-id=qpc7C6])` / `:where([data-component-id="1qnSej"])` */ .heading-base{ --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-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))); 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) } } 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))) } } .heading-base[data-size=md]{ font-size:var(--font-size-md) } @media (min-width: 1024px){ .heading-base[data-size=md]{ font-size:var(--font-size-md-desktop) } } html[lang=ja] .heading-base[data-size=md]{ font-size:var(--font-size-ja-md); font-family:Saans-bold,MFW-YuGoStdN-ExtraBold,"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]{ 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 .deco-dot{ position:absolute } .heading-base[data-size=md] .deco-dot{ top:.2lh; left:calc(var(--column-unit) * -1) } @media (max-width: 1023.98px){ .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))); } } .paragraph-base{ font-style:normal; font-weight:570; font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:140%; letter-spacing:-.01em; } @media (min-width: 1024px){ .paragraph-base{ font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } } html[lang=ja] .paragraph-base{ font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:160%; letter-spacing:.45px; font-weight:570; } @media (min-width: 1024px){ html[lang=ja] .paragraph-base{ font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } } /* ── 段組みの器（出典: oki/style.css `.grid-cols-1` / `.desktop\:grid-cols-2`）── */ .grid-cols-1{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); -moz-column-gap:calc(var(--column-unit) * 1); column-gap:calc(var(--column-unit) * 1); row-gap:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .desktop\:grid-cols-2{ row-gap:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } @media (min-width: 1024px){ .desktop\:grid-cols-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); -moz-column-gap:calc(var(--column-unit) * 1); column-gap:calc(var(--column-unit) * 1); } } /* ══════════════════════════════════════════════════════════════════════════════ §4 ヘッダーとナビ ══════════════════════════════════════════════════════════════════════════════ */ .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) } .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))) } @media (min-width: 1024px){ .header .t-container{ padding-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height:auto } } .header .action{ display:flex; -moz-column-gap:calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); column-gap:calc(2 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); align-items:center; padding-right:calc(46 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } .header .button-contact{ display:flex; align-items:center; padding-right:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-left:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } .header .button-language{ display:flex; justify-content:center; align-items:center; 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))) } .header .button-language{ -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); transition:background-color .15s linear; border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--button-language-background); color:var(--button-language-text) } .header .button-contact, .header .button-language{ display:none } @media (min-width: 1024px){ .header .button-contact, .header .button-language{ display:flex } } @media (any-hover: hover){ .header .button-language:hover{ background-color:var(--color-oki-red2) } } .header .logo{ transition-duration:var(--duration-500); transition-property:opacity,translate; transition-timing-function:var(--easing-0),var(--easing-2); width:calc(158 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } @media (min-width: 1024px){ .header .logo{ width:calc(204 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } } .header [data-action-item=hidden] .logo{ translate:calc(-10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) 0; opacity:0 } .header [data-action-item=shown] .logo{ translate:0 0; opacity:1 } .header .logo{ object-fit:contain; object-position:left center } .header-static{ position:absolute; top:0; right:0; left:0; z-index:calc(var(--layer-drawer) - 1) } body:has([data-header-style=skeleton]) .header-static{ --logo-symbol-fill: var(--color-oki-white); --logo-type-fill: var(--color-oki-white) } body:has([data-header-style=skeleton]) .header-static .button-language{ --button-language-background: rgba(251, 251, 251, .1); --button-language-text: var(--color-oki-white); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) } 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) } @media (any-hover: hover){ 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) } } body:not(:has(.notification-base)) .header{ top:calc((6 + 42 * var(--notification-size)) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } @media (min-width: 1024px){ body:not(:has(.notification-base)) .header{ top:calc((4 + 28 * var(--notification-size)) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } } .header-navigation-desktop{ --header-navigation-desktop-blur: 4px; --header-navigation-desktop-background: var(--color-oki-bg-gray-dark-0-8); --header-navigation-desktop-text: var(--color-oki-black); --track-in: 0; display:none; position:relative; -webkit-backdrop-filter:blur(var(--header-navigation-desktop-blur)); backdrop-filter:blur(var(--header-navigation-desktop-blur)); border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--header-navigation-desktop-background) } @media (min-width: 1024px){ .header-navigation-desktop{ display:block } } body:has([data-header-style=skeleton]) .header-navigation-desktop[data-header-type=static]{ --header-navigation-desktop-background: rgba(251, 251, 251, .1); --header-navigation-desktop-text: var(--color-oki-white); --header-navigation-desktop-blur: 15px } .header-navigation-desktop .label{ display:flex; transition:color var(--duration-300); padding:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); color:var(--header-navigation-desktop-text); font-weight:670; font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100% } html[lang=ja] :is(.header-navigation-desktop .label){ letter-spacing:-.01em } .header-navigation-desktop .label[aria-current=page]{ color:var(--color-oki-white) } .header-navigation-desktop .list{ display:flex; isolation:isolate; padding:calc(3 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } @media (any-hover: hover){ .header-navigation-desktop .list:hover .label{ color:var(--header-navigation-desktop-text) } .header-navigation-desktop .list:hover .label:hover{ color:var(--color-oki-white) } } .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))) } .button-blur{ --button-blur-font-size: 12; --button-blur-color-text: var(--color-oki-white); --button-blur-color-bg: var(--color-oki-red); display:inline-flex; -moz-column-gap:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); column-gap:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); border-radius:calc(5 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--button-blur-color-bg); padding:calc(16 / 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-blur-color-text); font-style:normal; font-weight:790; font-size:calc(var(--button-blur-font-size) / 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){ .button-blur{ --button-blur-font-size: 13; -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))); padding:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } } .button-blur{ transition:background-color .15s linear; --button-blur-color-bg: rgba(255, 255, 255, .1); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px) } @media (any-hover: hover){ .button-blur:hover{ background-color:var(--color-oki-red2) } } html[lang=ja] .button-blur{ letter-spacing:-.01em } .button-menu{ position:fixed; top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); right:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); z-index:calc(var(--layer-drawer) + 1); transition-duration:var(--duration-500); transition-property:top; transition-timing-function:var(--easing-2); border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--color-oki-red); width:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); color:var(--color-oki-white) } @media (min-width: 1024px){ .button-menu{ top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); right:calc(var(--column-unit) * 2); 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))) } .button-menu{ display:none } } @media (any-hover: hover){ .button-menu{ transition-duration:var(--duration-500),var(--duration-300); transition-property:top,background-color; transition-timing-function:var(--easing-2),var(--easing-0) } .button-menu:hover{ background-color:var(--color-oki-red2) } } .button-menu .icon-open, .button-menu .icon-close{ transform-origin:center; transition:transform .3s } .button-menu[aria-expanded=false] .icon-open{ transform:scaleX(1) } .button-menu[aria-expanded=false] .icon-close{ transform:scaleX(0) } .button-menu[aria-expanded=true] .icon-open{ transform:scaleX(0) } .button-menu[aria-expanded=true] .icon-close{ transform:scaleX(1) } body:not(:has(.notification-base)) .button-menu{ top:calc((22 + 42 * var(--notification-size)) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } @media (min-width: 1024px){ body:not(:has(.notification-base)) .button-menu{ top:calc((34 + 28 * var(--notification-size)) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } } body:not(:has(.notification-base)) .button-menu[aria-expanded=true]{ top:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } @media (min-width: 1024px){ body:not(:has(.notification-base)) .button-menu[aria-expanded=true]{ top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } } @media (min-width: 1024px){ .menu-mobile-wrapper{ display:none!important } .menu-mobile{ display:none!important } } .menu-mobile{ position:fixed; z-index:var(--layer-drawer); inset:0; background-color:#0d0d0d33 } .menu-mobile .primary{ padding-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } .menu-mobile .secondary{ padding-top:calc(43 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-bottom:calc(33 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) } .menu-mobile .link-home{ display:block; border-bottom:1px solid rgba(230,230,230,.4) } .menu-mobile .menu-body{ display:flex; position:absolute; flex-direction:column; top:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); right:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); bottom:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); left:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); left:calc(49 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); transition-duration:var(--duration-500); transition-property:padding-top; transition-timing-function:var(--easing-2); padding:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) 0 0 } .menu-mobile .background{ position:absolute; top:0; right:0; z-index:-1; border-radius:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--color-oki-white); width:100%; height:100% } .menu-mobile .scroll-container{ flex-grow:1; padding:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(32 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); height:100% } .menu-mobile .label-link{ display:block; padding:calc(7 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) 0; font-style:normal; font-weight:570; font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:110%; letter-spacing:-.01em } .menu-mobile .label-primary{ display:block; 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))); font-style:normal; font-weight:790; font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; letter-spacing:-.01em } html[lang=ja] :is(.menu-mobile .label-primary){ font-family:"Noto Sans JP",system-ui,sans-serif; font-weight:790 } .menu-mobile{ --start-size: 90%; --delay-step: 40ms; transition:background-color var(--duration-800) } .menu-mobile [data-delay-target]{ transition-duration:var(--duration-500); transition-property:opacity,transform; transition-timing-function:var(--easing-2) } .menu-mobile .background{ transition-duration:var(--duration-500); transition-property:width,height,opacity; transition-timing-function:var(--easing-2),var(--easing-2),var(--easing-0) } .menu-mobile.transition-enter [data-delay-target]{ transition-delay:calc(var(--index) * var(--delay-step) + var(--delay-step) * .25) } .menu-mobile.transition-enter-start{ background-color:#0d0d0d00 } .menu-mobile.transition-enter-start [data-delay-target]{ transform:translate(calc(var(--column-unit) * 1)); opacity:0 } .menu-mobile.transition-enter-start .background{ opacity:0; width:var(--start-size); height:var(--start-size) } .menu-mobile.transition-enter-end{ background-color:#0d0d0d33 } .menu-mobile.transition-enter-end [data-delay-target]{ transform:translate(0); opacity:1 } .menu-mobile.transition-enter-end .background{ opacity:1; width:100%; height:100% } .menu-mobile.transition-leave .background{ transition-delay:var(--delay-step) } .menu-mobile.transition-leave-start{ background-color:#0d0d0d33 } .menu-mobile.transition-leave-start [data-delay-target]{ opacity:1 } .menu-mobile.transition-leave-start .background{ opacity:1; width:100%; height:100% } .menu-mobile.transition-leave-end{ background-color:#0d0d0d00 } .menu-mobile.transition-leave-end [data-delay-target]{ transform:translate(calc(var(--column-unit) * 1)); opacity:0 } .menu-mobile.transition-leave-end .background{ opacity:0; width:var(--start-size); height:var(--start-size) } /* ══════════════════════════════════════════════════════════════════════════════ §5 ヒーロー ══════════════════════════════════════════════════════════════════════════════ */ .hero-home:where([data-component-id=yraC5j]) .button-scroll,.button-player:where([data-component-id=t25sua]){-webkit-appearance:none;appearance:none;margin:0;padding:0;background:none;border:0;color:inherit;font:inherit;cursor:pointer} .hero-home:where([data-component-id=yraC5j]){--progress-background-opacity: 0;--progress-1: 0;--progress-2: 0;--progress-copy-opacity: 0;--progress-copy-translate: 1;--background-width: calc(var(--column-unit) * 7);--background-height: calc(350 / 828 * 100vh);margin-top:-1px;background-color:var(--color-oki-black)} @media (min-width: 460px) and (max-width: 725px){ .hero-home:where([data-component-id=yraC5j]){--background-height: calc(400 / 828 * 100vh)} } @media (min-width: 725px) and (max-width: 1023px){ .hero-home:where([data-component-id=yraC5j]){--background-height: calc(450 / 828 * 100vh)} } @media (min-width: 1024px){ .hero-home:where([data-component-id=yraC5j]){--background-width: calc(var(--column-unit) * 8);--background-width: calc(230 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--background-height: 60vh} } html[lang=ja] .hero-home:where([data-component-id=yraC5j]){--background-width: calc(var(--column-unit) * 6);--background-height: 50vh} @media (min-width: 460px) and (max-width: 725px){ html[lang=ja] .hero-home:where([data-component-id=yraC5j]){--background-height: calc(450 / 828 * 100vh)} } @media (min-width: 725px) and (max-width: 1023px){ html[lang=ja] .hero-home:where([data-component-id=yraC5j]){--background-height: calc(450 / 828 * 100vh)} } @media (min-width: 1024px){ html[lang=ja] .hero-home:where([data-component-id=yraC5j]){--background-width: calc(var(--column-unit) * 8);--background-width: calc(230 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));--background-height: calc(605 / 900 * 100vh)} } .hero-home:where([data-component-id=yraC5j]) .body{display:grid;height:100svh} .hero-home:where([data-component-id=yraC5j]) .media,.hero-home:where([data-component-id=yraC5j]) .content{grid-row:-1/1;grid-column:-1/1} .hero-home:where([data-component-id=yraC5j]) .media-wrapper{position:absolute;opacity:.8;inset:0;width:100%;height:100%;overflow:hidden} .hero-home:where([data-component-id=yraC5j]) .media{transform-origin:bottom;translate:0 calc(var(--progress-scroll, 0) * 50vh);scale:calc(1 + var(--progress-scroll, 0) * .1);width:100%;height:100%;-o-object-fit:cover;object-fit:cover} .hero-home:where([data-component-id=yraC5j]) .content{display:grid;grid-template-rows:100%;grid-template-columns:auto;align-items:end;isolation:isolate;padding-right:calc(var(--column-unit) * 1);padding-bottom:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(var(--column-unit) * 1);color:var(--color-oki-white)} @media (min-width: 1024px){ .hero-home:where([data-component-id=yraC5j]) .content{padding-right:calc(var(--column-unit) * 2);padding-bottom: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)))} } .hero-home:where([data-component-id=yraC5j]) .copies,.hero-home:where([data-component-id=yraC5j]) .actions{grid-row:-1/1;grid-column:-1/1} .hero-home:where([data-component-id=yraC5j]) .copies{display:flex;position:relative;align-items:end;align-self:stretch} .hero-home:where([data-component-id=yraC5j]) .copy{position:relative;padding-bottom:calc((var(--background-height) - (calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * 4)) / 2);padding-left:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-white);font-weight:790;font-size:calc(56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1;letter-spacing:-.01em} @media (min-width: 600px) and (max-width: 1023px){ .hero-home:where([data-component-id=yraC5j]) .copy{padding-bottom:calc((var(--background-height) - (calc(45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * 3.5)) / 2);font-size:calc(45 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } @media (min-width: 1024px){ .hero-home:where([data-component-id=yraC5j]) .copy{padding-bottom:calc((var(--background-height) - (calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * 6)) / 2);padding-left:calc(100 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(90 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } html[lang=ja] :is(.hero-home:where([data-component-id=yraC5j]) .copy){padding-bottom:calc((var(--background-height) - (calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * 1.4 * 3)) / 2);padding-left:calc(var(--column-unit) * 2);font-style:normal;font-weight:800;font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:140%;font-family:Saans-bold,MFW-YuGoStdN-ExtraBold,"Noto Sans JP",system-ui,sans-serif;font-feature-settings:"palt" on,"pkna" on,"vkrn" on;letter-spacing:2.1px} @media (min-width: 600px) and (max-width: 1023px){ html[lang=ja] :is(.hero-home:where([data-component-id=yraC5j]) .copy){padding-bottom:calc((var(--background-height) - (calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * 1.4 * 3)) / 2);padding-left:calc(var(--column-unit) * 2.5);font-size:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } @media (min-width: 1024px){ html[lang=ja] :is(.hero-home:where([data-component-id=yraC5j]) .copy){padding-bottom:calc((var(--background-height) - (calc(62 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * 1.4 * 3)) / 2);padding-left:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-size:calc(62 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } .hero-home:where([data-component-id=yraC5j]) .copy .copy-inner{padding-left:.05em;overflow:hidden} .hero-home:where([data-component-id=yraC5j]) .copy span{display:block;transform:translate(calc(var(--progress-copy-translate) * -50%));opacity:var(--progress-copy-opacity);transition-delay:calc(var(--index) * 75ms);transition-duration:var(--duration-800);transition-property:opacity,transform;transition-timing-function:var(--easing-2)} .hero-home:where([data-component-id=yraC5j]) .background-copy{position:absolute;bottom:0;left:0;opacity:var(--progress-background-opacity);transition-duration:var(--duration-500),var(--duration-1200);transition-property:height,width;transition-timing-function:cubic-bezier(.8,0,.7,.8),cubic-bezier(.5,0,0,1);border-radius:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));background-color:var(--color-oki-red);width:calc(var(--background-width) * var(--progress-2) + (1 - var(--progress-2)) * calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))));height:calc(var(--background-height) * var(--progress-1) + (1 - var(--progress-1)) * calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))))} .hero-home:where([data-component-id=yraC5j]) .actions{display:flex;-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)));align-items:center;justify-self:end;isolation:isolate} @media (min-width: 1024px){ .hero-home:where([data-component-id=yraC5j]) .actions{-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)));padding-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } .hero-home:where([data-component-id=yraC5j]) .button-scroll{display:flex;-moz-column-gap:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));column-gap:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));align-items:center;height:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));font-style:normal;font-weight:670;font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:100%} @media (min-width: 1024px){ .hero-home:where([data-component-id=yraC5j]) .button-scroll{-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)));height:calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } .hero-home:where([data-component-id=yraC5j]) .button-scroll .icon-base{transform:rotate(-90deg);width:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-red);font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} @media (min-width: 1024px){ .hero-home:where([data-component-id=yraC5j]) .button-scroll .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)))} } .hero-home:where([data-component-id=yraC5j]) [data-action-items]{transform:translateY(calc(var(--column-unit) * 1));opacity:0} .hero-home:where([data-component-id=yraC5j]) [data-action-items=shown]{transform:translateY(0);opacity:1;transition-delay:calc(var(--index) * 75ms);transition-duration:var(--duration-800);transition-property:opacity,transform;transition-timing-function:var(--easing-2)} .button-player:where([data-component-id=t25sua]){--button-base-color-bg: transparent;--button-base-color-text: var(--color-oki-white);--button-base-color-border: rgba(255, 255, 255, .3);display:inline-flex;justify-content:center;align-items: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(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));height:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--button-base-color-text);line-height:100%} @media (min-width: 1024px){ .button-player:where([data-component-id=t25sua]){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)))} } @media (any-hover: hover){ .button-player:where([data-component-id=t25sua]):hover{--button-base-color-border: rgba(255, 255, 255, .7)} } .icon-player:where([data-component-id=x5zbvg]){aspect-ratio:1;width:100%;height:100%} .icon-player:where([data-component-id=x5zbvg]) g{transform-origin:center;transition-duration:var(--duration-300);transition-property:transform,opacity;transition-timing-function:var(--easing-2),var(--easing-0)} .icon-player[data-state=play]:where([data-component-id=x5zbvg]) [data-icon-type=pause]{transform:translate(calc(-15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))) rotate(30deg);opacity:0} .icon-player[data-state=pause]:where([data-component-id=x5zbvg]) [data-icon-type=play]{transform:translate(calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))) rotate(30deg);opacity:0} .hero-home:where([data-component-id=yraC5j]) .media-frame{position:absolute;border:0;pointer-events:none;width:max(100%, 177.7778svh);height:max(100%, 56.25vw);left:calc(50% - max(100%, 177.7778svh) / 2);top:calc(50% - max(100%, 56.25vw) / 2)} html:not(.has-js) .hero-home:where([data-component-id=yraC5j]){--progress-background-opacity: 1;--progress-1: 1;--progress-2: 1;--progress-copy-opacity: 1;--progress-copy-translate: 0} html:not(.has-js) .hero-home:where([data-component-id=yraC5j]) [data-action-items]{transform:none;opacity:1} /* ══════════════════════════════════════════════════════════════════════════════ §6 ニュース一覧 ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ ニュース一覧 — OKI「OKI’s News」の移植 出どころ: oki/style.css の #okis-news / .list-news-thumbnail / .image-rounded / [data-underline-anime-*] / [data-image-scale-anime-*] / [data-arrow-slide-in-anime-*] / .t-text-news-title / .t-label-sm 数値はひとつも書き起こしていない。OKI の宣言をそのまま貼っている。 OKI の :where([data-component-id=…]) は特異度 0 の飾りなので落とした（効き目は同じ）。 ══════════════════════════════════════════════════════════════════════════ */ /* OKI の :root は SP 基準で、1024px から PC 断面に切り替わる（root キーが SP 側） */ /* ── 器（OKI: .t-container）。既に持っているなら畳んでよい ───────────────── */ #okis-news{margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} @media (min-width:1024px){ #okis-news{margin-top:calc(120 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } /* ── 節ラベルと見出し（#okis-news に閉じ込めてある。他の部品とぶつからない）── */ /* OKI の .text-shoulder。SmartHR の判断で、全幅 1px 罫の左端に貼る（罫は札の上辺も兼ねる） */ /* SmartHR: ラベル下端から罫まで 0px。罫は全幅 1px */ /* OKI の .deco-dot（赤 → 青） */ /* OKI の .heading-hgroup__title */ /* 島津: 見出しの左上に 40×4px の棒。OKI の h2 margin-top の中に置くので高さは増えない。 bottom:100% で見出しの上辺に貼るだけ（余白の数字を新しく作らない） */ /* ── 右 705px に寄せる ────────────────────────────────────────────────── OKI: 器 48 カラムのうち左 20 カラムを margin-left で空ける。 1305 − 20/48×1425 ≒ 705px。幅は書かず「空ける量」で決まる ── */ #okis-news .okis-news__list{display:flex;flex-direction:column;align-items:flex-end;margin-top:calc(42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} @media (min-width:1024px){ #okis-news .okis-news__list{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * 20)} } #okis-news .okis-news__news-link{margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} /* ── 一覧本体 ───────────────────────────────────────────────────────── */ .list-news-thumbnail{width:100%} .list-news-thumbnail .list-news-thumbnail__item{display:flex;position:relative;align-items:flex-start;padding-top:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} @media (min-width:1024px){ .list-news-thumbnail .list-news-thumbnail__item{align-items:center;padding-top:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(24 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } /* 写真。1 件目だけ 3 カラム → 7 カラム（実測 90 → 210px）。比は 90/56 のまま */ .list-news-thumbnail .list-news-thumbnail__item_image{--image-rounded-size: 5;--image-rounded-aspect-ratio: 90/56;flex-shrink:0;margin-right:calc(var(--column-unit) * 2);width:calc(var(--column-unit) * 5)} @media (min-width:1024px){ .list-news-thumbnail .list-news-thumbnail__item_image{margin-right:calc(var(--column-unit) * 1);width:calc(var(--column-unit) * 3)} } .list-news-thumbnail__item.-highlight :is(.list-news-thumbnail .list-news-thumbnail__item_image){width:calc(var(--column-unit) * 8)} @media (min-width:1024px){ .list-news-thumbnail__item.-highlight :is(.list-news-thumbnail .list-news-thumbnail__item_image){width:calc(var(--column-unit) * 7)} } .list-news-thumbnail .list-news-thumbnail__content{margin-right:calc(var(--column-unit) * 1)} /* 題と日付の間。1 件目だけ 12 → 48px */ .list-news-thumbnail .list-news-thumbnail__content_wrap{display:flex;flex-wrap:wrap;align-items:center;gap:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-top:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} .list-news-thumbnail__item.-highlight :is(.list-news-thumbnail .list-news-thumbnail__content_wrap){margin-top:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} @media (min-width:1024px){ .list-news-thumbnail__item.-highlight :is(.list-news-thumbnail .list-news-thumbnail__content_wrap){margin-top:calc(48 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } /* 題。素は .t-text-news-title（ja 15 → 18px）。1 件目だけ 18 → 26px */ .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%;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)))} } .list-news-thumbnail__item.-highlight :is(.list-news-thumbnail .list-news-thumbnail__title){font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} @media (min-width:1024px){ .list-news-thumbnail__item.-highlight :is(.list-news-thumbnail .list-news-thumbnail__title){font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} } /* 札。分類 */ .list-news-thumbnail .list-news-thumbnail__category{border:1px solid var(--color-oki-gray5);border-radius:9999px;background-color: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} /* 日付 */ .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} 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;letter-spacing:calc(.36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} .list-news-thumbnail .date{color:var(--color-oki-gray)} /* ネオキャリア: 12px 未満を作らない。OKI の 12px は流体なので 390px 未満で 12 を割る。 ここだけ下限を敷く（OKI の値は変えていない。max() で床を足しただけ） */ #okis-news .list-news-thumbnail__category, #okis-news .list-news-thumbnail .date{ font-size:max(12px, calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } /* 矢印の器 */ .list-news-thumbnail .list-news-thumbnail__arrow{--slide-in-arrow-size: var(14);margin-left:auto} /* リクルート: 札の高さ固定。題が 1 行でも 2 行でも日付の y が動かない。 OKI は PC で 1 行に切っている（desktop:line-clamp-1）が、Remind の題は 1 行に収まらないので 2 行に開けたうえで箱を 2 行ぶんに固定する */ .list-news-thumbnail .list-news-thumbnail__title{height:2lh} /* ── 写真の角丸（OKI .image-rounded）──────────────────────────────────── */ /* ── 下線（OKI [data-underline-anime-*]）＝ 1px 罫の行の正体 ───────────── 静止時 gray5 の 1px が全幅に引かれ、ホバーで濃い線が左から伸びる。300ms ── */ /* ── 写真の拡大（OKI [data-image-scale-anime-*]）──────────────────────── 他社判断で 1.08 → 1.05、800ms → 300ms。仕掛けは OKI のまま ── */ /* ── 矢印（OKI .arrow-slide-in）。2 本の矢印が入れ替わる ─────────────── */ .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)} @media (any-hover: hover){ [data-arrow-slide-in-anime-root]:hover .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{transform:translate(0);opacity:1;transition:transform .5s 0s var(--easing-2),opacity .3s 0s var(--easing-1);transition-delay:.1s} } [data-arrow-slide-in-anime-root]:focus-visible .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]:focus-visible .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} /* ── 動きを止めたい人の分（OKI は 1 本も持っていない。ここだけ真似しない）── */ /* ディップ・SmartHR: 1px 罫の行。OKI は一覧ページ (-news-archive) のとき 1 件目に上罫を足している。同じ宣言をこの一覧の上辺に置く（宣言は OKI のまま） */ #okis-news .list-news-thumbnail{border-top:1px solid var(--color-oki-gray5)} /* OKI の行数止め（utility） */ .line-clamp-2{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2} /* ニュース一覧だけ、写真の拡大を 1.08 / 800ms → 1.05 / 300ms にする（部品の判断）。 共通部品の [data-image-scale-anime-*] は畳んで 1 つにしたので、差分だけここで上書きする */ #okis-news [data-image-scale-anime-target]{ --image-scale-size: 1.05; transition:scale var(--duration-300) ease } #okis-news [data-image-scale-anime-target] img{ transition:scale var(--duration-300) var(--easing-1) } /* ══════════════════════════════════════════════════════════════════════════════ §7 事業領域の全幅の面 ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ 事業領域の全幅の面 — OKI の規則をそのまま移植したもの 出どころ: oki/rules/business-segment.css 全 33 規則 + oki/style.css の [data-underline-anime-target] / .deco-dot / .icon-base 自分で書き起こした数値はひとつも無い。calc() の式は OKI の文字列のまま。 ──────────────────────────────────────────────────────────────── OKI からの相違は 4 つだけ（すべて意図的・末尾にまとめて注記） 1. 色 --color-oki-red / red2 を青へ（:root 側で差し替え） 2. 行数 4 → 2（HTML 側。CSS は 1 文字も変えていない） 3. 12px 床 14px/10px の指定に max(12px, …) を被せた（OKI は 1024px 幅で 9.8px を出す） 4. reduced-motion 1 本追加（OKI は 0 本） ══════════════════════════════════════════════════════════════════ */ /* ── 器（OKI: margin-top 46 / 左右 1 カラム） ── */ .home-business-segment-wrap{margin-top:calc(46 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(var(--column-unit) * 1);padding-left:calc(var(--column-unit) * 1)} /* ── 板（実測 1365 幅・padding 140px 30px・角丸は写真側が持つ） ── */ .home-business-segment:where([data-component-id=yhkERb]){position:relative;padding-top:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-right:calc(var(--column-unit) * 1);padding-bottom:calc(140 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-left:calc(var(--column-unit) * 1);color:var(--color-oki-white)} /* ── 写真の上に黒 50% の 1 枚。グラデーションは無い ── */ .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__image-filter{position:absolute;top:0;right:0;left:0;opacity:.5;z-index:1;background-color:var(--color-oki-black);width:100%;height:100%} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__image-wrap{position:absolute;top:0;left:0;border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));aspect-ratio:var(--image-rounded-aspect-ratio, 1/1);width:100%;height:100%;overflow:hidden} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__image{position:absolute;inset:0;opacity:0;transition:opacity var(--duration-500) var(--easing-1);margin:auto;width:100%;height:100%;-o-object-fit:cover;object-fit:cover} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list li:last-child .home-business-segment__list_item{border-bottom:1px solid rgba(230,230,230,.4)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list-wrap{position:relative;z-index:1} /* ── 行（4 列: 番号・説明・題・矢印） ── */ .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_item{display:flex;position:relative;padding-top:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_number{width:calc(var(--column-unit) * 2);font-weight:670;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1} html[lang=ja] :is(.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_number){font-family:"Figtree","Noto Sans JP",system-ui,sans-serif} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_description{margin-top:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-right:calc(var(--column-unit) * 5);width:calc(var(--column-unit) * 12);font-weight:670;font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1.1} html[lang=ja] :is(.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_description){font-family:"Noto Sans JP",system-ui,sans-serif;font-weight:700;line-height:150%;letter-spacing:calc(.42 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_title{position:relative;margin-top:calc(11 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));margin-left:calc(var(--column-unit) * .5);font-weight:790;font-size:calc(46 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1;letter-spacing:-.02em} .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)} html[lang=ja] :is(.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_title){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)))} /* OKI の同スコープ規則。desktop の DOM には該当要素が無く一度も当たらないが、写しなので落とさず置く */ .home-business-segment:where([data-component-id=yhkERb]) .list-business-segment-thumbnail__item_image{--image-rounded-size: 5;--image-rounded-aspect-ratio: 81/58;flex-shrink:0;margin-left:auto;width:calc(var(--column-unit) * 5)} /* ── 矢印（36×36 の枠に 16×16 のアイコン。素と塗りの 2 枚を重ねる） ── */ .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_arrow-wrap{position:relative;position:absolute;top:0;right:0;bottom:0;margin: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)))} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_arrow{display:flex;position:absolute;top:0;left:0;justify-content:center;align-items:center;border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));width:100%;height:100%} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_arrow .home-business-segment__list_arrow-icon{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)));color:var(--color-oki-red2)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_arrow.-bg-filled{background-color:var(--color-oki-red2)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_arrow.-bg-filled .home-business-segment__list_arrow-icon{color:var(--color-oki-white)} /* ── 罫（行の上端。OKI は before を最初から scaleX(1) で見せておき、hover で 0 へ畳んで after を伸ばす） ── */ .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} /* ── ここが下半分の見どころ。選ばれていない行は .4、選ばれた行だけ 1.0 戻り 800ms（--duration-800）/ 切替 300ms（--duration-300） ── */ .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_number,.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_description,.home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_title{opacity:.4;transition:opacity var(--duration-800) var(--easing-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_arrow.-bg-filled{opacity:0;transition:opacity var(--duration-500) var(--easing-1)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__image.active-class{transform:scale(1) translateZ(0);opacity:1;transition-duration:var(--duration-500)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_item.hover .home-business-segment__list_number{opacity:1;transition-duration:var(--duration-300)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_item.hover .home-business-segment__list_description{opacity:1;transition-duration:var(--duration-300)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_item.hover .home-business-segment__list_title{opacity:1;transition-duration:var(--duration-300)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_item.hover .home-business-segment__list_arrow.-bg-filled{opacity:1;transition-duration:var(--duration-300)} .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_item.hover .deco-dot{opacity:1;transition-duration:var(--duration-300)} /* ── 罫の土台（oki/style.css の [data-underline-anime-target] 6 規則をそのまま） ── */ /* ── 点（oki/style.css の .deco-dot 2 規則 + @media(min-width:1024px) 2 規則） ── */ /* ── アイコンの土台（OKI の `.icon-base path{fill:currentColor}` は塗りの図形前提。 こちらの矢印は線の図形なので、その 1 行だけ落として stroke を使う） ── */ /* ── 出し分け（OKI の 2 規則そのまま。この面は 1024 未満では出さない） ── */ /* ══ 1024 未満で OKI が代わりに出す一覧（oki/style.css の #business-segment .business-segment--mobile 10 規則） OKI の :root は SP で --screen-size:390 / --column-size:24。全画面へ効かせると他の部品が動くので この節にだけ同じ値を置く（値は OKI のまま・置き場所だけ変えた） ══ */ @media (max-width: 1023.98px){ #business-segment{--screen-size:390;--column-size:24;--column-unit:calc( 100 / var(--column-size) * (var(--effective-viewport-width) - var(--scrollbar-width)) * .01 )} } #business-segment .business-segment--mobile .list-business-segment{margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));color:var(--color-oki-black)} #business-segment .business-segment--mobile .list-business-segment .list-business-segment__item{display:flex;position:relative;padding-top:calc(17 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));padding-bottom:calc(32 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} #business-segment .business-segment--mobile .list-business-segment .list-business-segment__number{width:calc(var(--column-unit) * 2);font-weight:670;font-size:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1} html[lang=ja] :is(#business-segment .business-segment--mobile .list-business-segment .list-business-segment__number){font-family:"Figtree","Noto Sans JP",system-ui,sans-serif} #business-segment .business-segment--mobile .list-business-segment .list-business-segment__title{padding-right:calc(var(--column-unit) * 5);font-weight:790;font-size:calc(26 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)));line-height:1} html[lang=ja] :is(#business-segment .business-segment--mobile .list-business-segment .list-business-segment__title){padding-right:calc(var(--column-unit) * 4);font-family:"Noto Sans JP",system-ui,sans-serif;font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))} #business-segment .business-segment--mobile .list-business-segment .list-business-segment-thumbnail__item_image{--image-rounded-size: 5;--image-rounded-aspect-ratio: 81/58;flex-shrink:0;margin-left:auto;width:calc(var(--column-unit) * 5)} #business-segment .business-segment--mobile .list-business-segment .list-business-segment__underline{top:0} #business-segment .business-segment--mobile .list-business-segment>li:last-child .list-business-segment__item{border-bottom:1px solid var(--color-oki-gray5)} /* ══ 自社の決まり ══════════════════════════════════════════════════ 「字は 12px 未満を作らない」（ネオキャリア）。OKI の式は 1440 幅でだけ 14px になり、 1024 幅では 9.8px まで落ちる（実測）。式は残したまま床だけ被せる ══ */ .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_number, .home-business-segment:where([data-component-id=yhkERb]) .home-business-segment__list_description{font-size:max(12px, calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))))} #business-segment .business-segment--mobile .list-business-segment .list-business-segment__number{font-size:max(12px, calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))))} /* ══ OKI は 0 本。ここは 1 本入れる ══ */ /* ══ §8 2 列の節（t-and-i）══════════════════════════════════════════════════ これだけは部品として渡されていないので、ここで OKI から移植した。 出典: oki/rules/t-and-i.css 全 11 規則 ＋ oki/style.css の `#technologies-and-innovation` 2 規則（@media の内外は原本のまま）。 見出し・写真・ボタン・点・段組みは §3 の共通部品をそのまま使う（新しい寸法を作らない）。 中身だけ Remind のもの。 */ #technologies-and-innovation{ margin-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } @media (min-width: 1024px){ #technologies-and-innovation{ margin-top:calc(150 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } #technologies-and-innovation .t-and-i__list{ row-gap:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } @media (min-width: 1024px){ #technologies-and-innovation .t-and-i__list{ margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } #technologies-and-innovation .t-and-i__list_image{ --image-rounded-size: 10; --image-rounded-aspect-ratio: 645/408; width:100%; --image-scale-size: 1.03; } #technologies-and-innovation .t-and-i__list_title{ margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left:calc(var(--column-unit) * 1.8); } @media (min-width: 1024px){ #technologies-and-innovation .t-and-i__list_title{ margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left:calc(var(--column-unit) * 1.8); } } html[lang=ja] :is(#technologies-and-innovation .t-and-i__list_title){ font-size:calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } @media (min-width: 1024px){ html[lang=ja] :is(#technologies-and-innovation .t-and-i__list_title){ font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } #technologies-and-innovation .t-and-i__list_description{ margin-top:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-right:calc(var(--column-unit) * 2); margin-left:calc(var(--column-unit) * 2); } @media (min-width: 1024px){ #technologies-and-innovation .t-and-i__list_description{ margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-right:calc(var(--column-unit) * 0); margin-left:calc(var(--column-unit) * 11); } } #technologies-and-innovation .t-and-i__list_button{ margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left:calc(var(--column-unit) * 2); } @media (min-width: 1024px){ #technologies-and-innovation .t-and-i__list_button{ margin-top:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-left:calc(var(--column-unit) * 11); } } /* ══════════════════════════════════════════════════════════════════════════════ §9 About の固定面（elevator） ══════════════════════════════════════════════════════════════════════════════ */ /* OKI .elevator の移植。注釈つきの原本 = scratchpad/site-audit/oki-copy/parts/elevator-about.css * --u = (100vw-15px)/1440。OKI が 60 回書いている calc を畳んだだけで値は同じ */ #about-us{margin-top:calc(70*var(--u))} @media (min-width:1024px){#about-us{margin-top:calc(150*var(--u))}} #about-us .overflow-hidden{overflow:hidden} #about-us .relative{position:relative} .elevator .elevator__sticky-area{display:flex;position:sticky;top:0;z-index:1} .elevator .elevator__sticky-area_left{display:flex;flex-flow:column;justify-content:center;order:1;width:calc(var(--column-unit)*22)} .elevator .elevator__sticky-area_image{order:2;width:calc(var(--column-unit)*20)} .elevator .elevator__sticky-area_image-wrapper{position:relative;margin-top:calc(var(--column-unit)*1);margin-bottom:calc(var(--column-unit)*1);height:calc(100vh - calc(var(--column-unit)*2))} .elevator .elevator__sticky-area_image_image{--image-rounded-size:10;--image-rounded-aspect-ratio:600/840;position:absolute;top:0;left:0;width:100%;height:calc(100vh - calc(var(--column-unit)*2))} .elevator .elevator__sticky-area_pagination{display:flex;flex-direction:column;justify-content:center;align-items:center;order:3;width:calc(var(--column-unit)*2);height:100vh} .elevator .elevator__sticky-area_pagination-inner{position:relative;margin-right:calc(var(--column-unit)*-2)} .elevator .elevator__sticky-area_pagination_active{position:absolute;top:0;left:0;z-index:1;transition:all .4s var(--easing-3);border:1.5px solid var(--color-oki-red);border-radius:calc(4*var(--u))} .elevator .elevator__sticky-area_pagination_active>div{margin:calc(1*var(--u));aspect-ratio:28/39;width:calc(27*var(--u))} .elevator .elevator__sticky-area_pagination_link{display:block;opacity:.3;transition-duration:var(--duration-300);border:1.5px solid white;border-radius:calc(4*var(--u))} .elevator .elevator__sticky-area_pagination_link.is-active{opacity:1;transition-delay:.2s;transition-duration:var(--duration-500)} @media (any-hover:hover){.elevator .elevator__sticky-area_pagination_link:hover{opacity:1}} .elevator .elevator__sticky-area_pagination_image{--image-rounded-size:2;--image-rounded-aspect-ratio:28/39;margin:calc(1*var(--u));width:calc(27*var(--u))} .elevator .elevator__scroll-area{margin-top:-100vh;padding-bottom:calc(var(--column-unit)*1)} .elevator .elevator__scroll-area_section{width:calc(var(--column-unit)*19);min-height:800px} .elevator [data-elevator-image]{display:block;position:absolute;top:0;left:0;clip-path:polygon(0% calc(var(--tl) * 100%),100% calc(var(--tr) * 100%),100% calc(var(--br) * 100%),0% calc(var(--bl) * 100%));width:100%;height:100%} .elevator [data-toggle-show-content]{position:absolute;top:0;left:0;transform:translate3d(0,15px,0)} .elevator [data-toggle-show-content] [data-toggle-show-target]{display:inline-block;transform:translate3d(0,100%,0)} .elevator .is-show[data-toggle-show-content]{transform:translateZ(0);opacity:1;transition:transform 1s var(--easing-3),opacity .8s var(--easing-1)} .elevator .is-show[data-toggle-show-content] [data-toggle-show-target]{transform:translateZ(0);transition:transform .8s var(--easing-3)} .elevator .is-hide[data-toggle-show-content]{transform:translate3d(0,-70%,0);opacity:0;transition:transform .8s var(--easing-3),opacity .4s var(--easing-1);pointer-events:none} .elevator .is-hide[data-toggle-show-content] [data-toggle-show-target]{transform:translate3d(0,-70%,0);transition:transform .8s var(--easing-3)} .elevator .is-show[data-toggle-show-content]>*:nth-child(1){--delay:0s;transition-delay:var(--delay)} .elevator .is-show[data-toggle-show-content]>*:nth-child(2){--delay:.1s;transition-delay:var(--delay)} .elevator .is-show[data-toggle-show-content]>*:nth-child(3){--delay:.2s;transition-delay:var(--delay)} .elevator .is-show[data-toggle-show-content]>*:nth-child(4){--delay:calc((4 - 1) * .1s);transition-delay:var(--delay)} .elevator .is-show[data-toggle-show-content]>*:nth-child(5){--delay:.4s;transition-delay:var(--delay)} #about-us .about-us__list_pagination-wrap{display:flex;margin-top:calc(28*var(--u));margin-left:calc(var(--column-unit)*2);font-weight:670;font-size:calc(10*var(--u));line-height:1} @media (min-width:1024px){#about-us .about-us__list_pagination-wrap{font-size:calc(12*var(--u))}} #about-us .about-us__list_pagination{display:flex;justify-content:flex-end;align-items:center} #about-us .about-us__list_pagination_bar{margin-right:calc(7*var(--u));margin-left:calc(7*var(--u));background:var(--color-oki-gray);width:calc(20*var(--u));height:1px} #about-us .about-us__list_pagination_num{color:var(--color-oki-red)} @media (min-width:1024px){#about-us .about-us__list_pagination_num{display:flex;width:2em;font-size:calc(12*var(--u))}} #about-us .about-us__list_pagination_length{color:var(--color-oki-black)} #about-us .about-us__content-wrap{position:relative;margin-top:calc(40*var(--u));margin-right:calc(var(--column-unit)*3);height:43vh} @media (min-width:1024px){#about-us .about-us__content{margin-left:calc(var(--column-unit)*2)}} #about-us .about-us__content_decodot{position:absolute;top:calc(15*var(--u));left:calc(30*var(--u))} #about-us .heading-base{--font-size-ja-lg:calc(26*var(--u));--font-size-ja-lg-desktop:calc(50*var(--u));position:relative;color:var(--color-oki-black);font-style:normal;font-weight:790;font-size:var(--font-size-ja-lg);line-height:110%;letter-spacing:calc(1.08*var(--u))} @media (min-width:1024px){#about-us .heading-base{font-size:var(--font-size-ja-lg-desktop);letter-spacing:calc(1.68*var(--u))}} #about-us .heading-base .deco-dot{position:absolute;top:.2lh;left:calc(var(--column-unit)*-1)} @media (max-width:1023.98px){#about-us .heading-base .deco-dot{width:calc(4*var(--u));height:calc(4*var(--u))}} @media (min-width:1024px){#about-us .heading-base .deco-dot{width:calc(6*var(--u));height:calc(6*var(--u))}} #about-us .about-us__list_title{margin-top:calc(20*var(--u));margin-left:calc(var(--column-unit)*1.8);line-height:1} @media (min-width:1024px){#about-us .about-us__list_title{margin-top:calc(0*var(--u));margin-left:calc(var(--column-unit)*0);width:calc(var(--column-unit)*14)}} #about-us [data-blink-decodot]{opacity:var(--decodot-blink-opacity, 1)} #about-us .about-us__list_description{margin-top:calc(18*var(--u));margin-right:calc(var(--column-unit)*2);margin-left:calc(var(--column-unit)*2)} @media (min-width:1024px){#about-us .about-us__list_description{margin-top:calc(115*var(--u));margin-right:0;margin-left:0;width:calc(var(--column-unit)*8)}} #about-us .t-label-md{font-weight:800;font-size:calc(12*var(--u));line-height:1.2;letter-spacing:calc(.36*var(--u))} @media (min-width:1024px){#about-us .t-label-md{font-size:calc(13*var(--u));letter-spacing:calc(.39*var(--u))}} #about-us .about-us__list_button{--distance:calc(30*var(--u));margin-top:calc(30*var(--u));margin-left:calc(var(--column-unit)*2)} @media (min-width:1024px){#about-us .about-us__list_button{margin-top:calc(48*var(--u));margin-left:calc(var(--column-unit)*0)}} @media (max-width:1023.98px){.elevator .elevator__sticky-area{display:block;position:static} .elevator .elevator__sticky-area_pagination{display:none} .elevator .elevator__sticky-area_left, .elevator .elevator__sticky-area_image{width:100%} .elevator .elevator__sticky-area_left{display:block} .elevator .elevator__sticky-area_image-wrapper{margin-top:0;margin-bottom:0;height:auto} .elevator .elevator__sticky-area_image_image{position:relative;height:auto} .elevator [data-elevator-image]{position:relative;clip-path:none;margin-top:calc(40*var(--u))} .elevator [data-elevator-image] img{transform:none !important} .elevator .elevator__scroll-area{display:none} #about-us .about-us__list_pagination-wrap{display:none} #about-us .about-us__content-wrap{margin-right:0;height:auto} .elevator [data-toggle-show-content], .elevator .is-show[data-toggle-show-content], .elevator .is-hide[data-toggle-show-content]{position:relative;transform:none;opacity:1;transition:none;pointer-events:auto} .elevator [data-toggle-show-content] [data-toggle-show-target]{transform:none} #about-us .about-us__content + .about-us__content{margin-top:calc(50*var(--u))}} /* ══════════════════════════════════════════════════════════════════════════════ §10 数字 ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 数字の節（OKI in Numbers → Remind in Numbers） 出典: oki/rules/oki-numbers.css 全 31 規則（= oki/style.css の `.home-oki-numbers:where([data-component-id=yfxEAP])` 系）を丸ごと移植。 構造の裏取りは oki/tree-main.txt:102-120、素の markup は oki/index.html。 値は 1 つも書き起こしていない。@media (min-width:1024px) の内外も原本のまま。 触ったのは: 1. 色 … --color-oki-red / -red2 の「値」が青（root で差し替え済み・規則は無改造）。 加えてこの節だけ、点と棒を currentColor（白）に落とした ⇒ 下の【色 2】 2. 中身 … 文言・写真・数字を Remind のもの（母数と時点を card-description に） 3. セレクタ… `:where([data-component-id=…])` は特異度 0 の scope 指定。 その属性を我々の HTML に持たないので外した（parts/common.css と同じ判断） 余白・大きさ・時間・曲線・入れ子は変えていない。 ══════════════════════════════════════════════════════════════════════════ */ /* ── 1. 器（背景と中身を grid の同じ 1 マスに重ねる）─────────────────── 出典: oki-numbers.css:1,3 */ .home-oki-numbers{ display:grid; grid-template-rows:100%; grid-template-columns:100%; color:var(--color-oki-white); } .home-oki-numbers .background, .home-oki-numbers .content{ grid-row:-1/1; grid-column:-1/1 } /* ── 2. 背景の写真 ──────────────────────────────────────────────────── 出典: oki-numbers.css:5（左右の余白は PC のみ）, :7, :13, :15 SP は全幅・角丸 0、PC で左右 1 カラム空けて角丸 10px。 */ .home-oki-numbers .background img{ width:100%; height:100% } .home-oki-numbers .image-rounded{ --image-rounded-size: 0; --image-rounded-aspect-ratio: none; height:100%; } @media (min-width: 1024px){ .home-oki-numbers .background{ padding-right:calc(var(--column-unit) * 1); padding-left:calc(var(--column-unit) * 1); } .home-oki-numbers .image-rounded{ --image-rounded-size: 10 } } /* 【色 2】覆い。OKI には無い（OKI の写真は元から暗い）。 front-recruit-back.jpg は白い壁が広く、白 #fbfbfb の字が乗らないので敷く。 濃さは実測で決めた: 写真が真っ白（255,255,255）の最悪の点でも .62 の #001f45 を重ねれば地の輝度 0.1525 → 白字とのコントラスト 5.05:1（AA 通過）。 字が乗るのは上 38% までなので、そこから下は .46 まで薄めて写真を見せる。 */ .home-oki-numbers .image-rounded::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, color-mix(in srgb, var(--color-oki-red2) 74%, transparent) 0%, color-mix(in srgb, var(--color-oki-red2) 62%, transparent) 38%, color-mix(in srgb, var(--color-oki-red2) 46%, transparent) 100%); pointer-events:none; } /* ── 3. 中身の器 ────────────────────────────────────────────────────── 出典: oki-numbers.css:9（SP）, :11（PC。左右の余白と overflow:clip は PC のみ） */ .home-oki-numbers .content{ isolation:isolate; padding-top:calc(50 / 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){ .home-oki-numbers .content{ padding-top:calc(80 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-right:calc(var(--column-unit) * 1); padding-left:calc(var(--column-unit) * 1); overflow:clip; } } /* ── 4. 見出し ──────────────────────────────────────────────────────── 出典: oki-numbers.css:17（SP: 左右 2 カラム）, :19（PC: 右 3・左 2 カラム） 題は oki/style.css `.heading-group-large:where([data-component-id=egjFA3]) .heading` （html[lang=ja] の 52px / 行 140% / 字間 1.56 を採る。欧文用の 66px は当たらない） */ .home-oki-numbers .heading-group-large{ padding-right:calc(var(--column-unit) * 2); padding-left:calc(var(--column-unit) * 2); } @media (min-width: 1024px){ .home-oki-numbers .heading-group-large{ padding-right:calc(var(--column-unit) * 3); padding-left:calc(var(--column-unit) * 2); } } .home-oki-numbers .heading-group-large .heading{ margin-top:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); color:currentColor; font-style:normal; font-weight:790; font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:130%; letter-spacing:calc(.84 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } @media (min-width: 1024px){ .home-oki-numbers .heading-group-large .heading{ margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-size:calc(52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:140%; letter-spacing:calc(1.56 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } /* 島津の棒（社の決め事）。値は parts/common.css の `.heading-hgroup__title::before`（40×4px）と同一 — 見出しの印を 2 種類作らない。 【色 2】この節だけ地が暗いので currentColor（白）。青のままだと覆いに沈んで消える。 */ .home-oki-numbers .heading-group-large .heading::before{ content:""; display:block; width:40px; height:4px; background:currentColor; } /* ── 5. 札（SP は横送り・PC は 3 枚並ぶ）───────────────────────────── 出典: oki-numbers.css:21（.track-mobile）, :25（SP 札）, :27（PC 札） .track-mobile の負の margin-left ＋ 同量の padding-left は OKI の中央スナップ用。 （-230/2 + 20 → +230/2 + 20 で、器の外へ食い込ませてから中身を押し戻している） */ .home-oki-numbers .track-mobile{ display:flex; position:relative; 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(230 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * -.5 + calc(20 / 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(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); overflow-x:auto; scroll-snap-type:x mandatory; } .home-oki-numbers .card-carousel{ display:grid; grid-auto-rows:auto 1fr auto; grid-auto-columns:auto; flex-shrink:0; border-radius:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--color-oki-white); padding:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); aspect-ratio:230/324; width:calc(230 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); scroll-snap-align:center; color:var(--color-oki-black); } @media (min-width: 1024px){ .home-oki-numbers .card-carousel{ padding:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); aspect-ratio:320/452; width:calc(320 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); scroll-snap-align:start; } } /* ── 6. 札の中身 ────────────────────────────────────────────────────── 出典: oki-numbers.css:37-43（題）, :45-51（数）, :53-59（単位）, :61（説明） html[lang=ja] の枝を採る（当サイトは日本語のみ）。 単位は数の p の中の block ＋ text-align:right ＝ 数の右下にぶら下がる。 */ .home-oki-numbers .card-title{ color:var(--color-oki-red); font-weight:790; font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; letter-spacing:-.01em; } @media (min-width: 1024px){ .home-oki-numbers .card-title{ font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .home-oki-numbers .card-number{ justify-self:start; margin-top:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-weight:790; font-size:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; letter-spacing:-.03em; /* OKI は数だけ欧文の Saans に落としている（html[lang=ja] の枝）。 その書体は持っていないので、当サイトの欧文（Figtree）に読み替えた。役目は同じ。 */ font-family:"Figtree","Noto Sans JP",system-ui,sans-serif; } @media (min-width: 1024px){ .home-oki-numbers .card-number{ margin-top:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-size:calc(76 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .home-oki-numbers .card-unit{ display:block; font-weight:790; font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; letter-spacing:-.01em; text-align:right; font-family:"Noto Sans JP",system-ui,sans-serif; } @media (min-width: 1024px){ .home-oki-numbers .card-unit{ margin-top:calc(8 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .home-oki-numbers .card-description{ font-weight:570; font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:150%; letter-spacing:-.01em; } /* ── 7. PC の 3 枚並び ──────────────────────────────────────────────── 出典: oki-numbers.css:29,31,33,35（.swiper-slide）＋ oki/style.css の swiper 素の `.swiper` / `.swiper-wrapper` / `.swiper-slide` 3 規則。 PC 実測（oki/tree-main.txt:114-118）: 札 320 ＋ 左 15 ＝ 帯 335・335・最後だけ +30 で 365。 3 枚で 1035 に対し器は 1365 ＝ 収まる。したがって横送りは動かない（OKI もそう）。 */ .home-oki-numbers .swiper{ margin-left:auto; margin-right:auto; position:relative; overflow:hidden; list-style:none; padding:0; z-index:1; display:block; } .home-oki-numbers .swiper-wrapper{ position:relative; width:100%; height:100%; z-index:1; display:flex; transition-property:transform; box-sizing:content-box; } .home-oki-numbers .swiper-slide{ flex-shrink:0; position:relative; display:block; transition:opacity var(--duration-300) var(--easing-0); width:fit-content; padding-left:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .home-oki-numbers .swiper-slide:last-child{ padding-right:calc(var(--column-unit) * 1); } /* JS が付ける印。付かなければ既定のまま見える（M-033: 可視性を JS に預けない） */ .home-oki-numbers [data-swiper-visibillity=showing]{ opacity:1 } .home-oki-numbers [data-swiper-visibillity=hidden]{ opacity:0 } /* ── 8. 矢印 ────────────────────────────────────────────────────────── 出典: oki-numbers.css:23（.button-group）＋ oki/rules/button-base.css の `.button-square:where([data-component-id=t25RuN])` 系 20 規則。 PC で 3 枚が収まる以上、両端に着いた状態＝ hollow ＋ 効かない、が正しい姿。 初期 HTML をその姿にしてあり、JS は「器からあふれたときだけ」効かせる側に回る。 */ .home-oki-numbers .button-group{ display:flex; column-gap:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); justify-content:flex-end; margin-top:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); margin-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-right:calc(var(--column-unit) * 1); } .button-square{ --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; --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: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>span{ grid-row:-1/1; grid-column:-1/1 } @media (min-width: 1024px){ .button-square{ 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[data-variant=primary]{ --button-base-color-bg: var(--color-oki-red2); --button-base-color-border: var(--color-oki-red2); } .button-square[data-variant=hollow]{ --button-base-color-bg: transparent } .button-square[data-hollow-style=white][data-variant=hollow]{ --button-base-color-border: rgba(255, 255, 255, .3); --button-base-color-text: var(--color-oki-white); } .button-square[data-disabled], .button-square:disabled{ cursor:default; pointer-events:none } /* 矢印の押し出し（before が外から入り、after が外へ出る） */ .button-square>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]{ --initial-translate: calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .button-square[data-icon-direction=right]{ --initial-translate: calc(-15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .button-square .before{ transform:translate(var(--initial-translate)); opacity:var(--initial-opacity) } .button-square .after{ transform:translate(var(--active-translate)); opacity:var(--active-opacity) } @media (any-hover: hover){ .button-square[data-variant=hollow]:hover{ --button-base-color-border: rgba(255, 255, 255, .7) } .button-square:hover .before{ transform:translate(var(--active-translate)); opacity:var(--active-opacity) } .button-square:hover .after{ transform:translate(calc(var(--initial-translate) * -1)); opacity:var(--initial-opacity) } } /* ── 9. 出し分け（出典: oki/style.css `.desktop-only` / `.mobile-only`）── */ @media (max-width: 1023.98px){ .home-oki-numbers .desktop-only{ display:none !important } } @media (min-width: 1024px){ .home-oki-numbers .mobile-only{ display:none !important } } /* ── 10. 動きを減らす設定（OKI は 0 件。ここは真似しない）────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ §11 フッター ══════════════════════════════════════════════════════════════════════════════ */ .footer{ position:sticky; top:100vh; padding:calc(50 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); overflow:hidden; } @media (min-width: 1024px){ .footer{ padding-top:calc(70 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-right:calc(var(--column-unit) * 1); padding-left:calc(var(--column-unit) * 1); } } .footer{ --progress: 1 } .footer .group{ display:grid; grid-template-rows:auto 1fr auto auto auto; grid-template-areas:"company global" "company language" "business ." "recruit ." "follow-us ." "copy copy"; grid-row-gap:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); row-gap:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-right:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-left:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } /* ★ 2026-09-10 追加。**上の OKI の規則は 1 文字も触っていない。列幅だけ足す。** OKI の SP フッターは列幅を書いておらず `auto auto` で内容から決まる。 OKI の右の列は「グローバル」「言語」の短いリンクなので 113px に収まるが、 **こちらは同じ場所に住所と電話番号を置いている。** `TEL 06-6655-1623` は途中で折れない 1 かたまりなので、それが max-content になり: OKI 本家 375px … 会社情報 173px ／ 所在地 113px こちら 375px … 会社情報 **96px** ／ 所在地 **191px** 96px では「人材紹介FC事業」が 2 行に折れ、住所も「大阪府大阪市中央区久太郎町」で 切れる（オーナー報告 2026-09-10）。 そこで **OKI 本家が 375px で解決している実寸 173.359 : 113.203 を、そのまま比として固定**する。 自分で決めた値は 1 つも無い。1024px 以上は下の @media が 4 列に上書きするので影響しない。 */ .footer .group{ grid-template-columns:minmax(0,173.359fr) minmax(0,113.203fr) } /* ★ `fr` だけだと効かない。`Nfr` は内部的に `minmax(auto, Nfr)` で、**下限が min-content** に なるため。所在地の欄は住所の min-content が 208px あり（実測）、その下限に押されて 173px を取り、会社情報の側が 113px に押し出されていた（＝比が逆になる）。 `minmax(0, Nfr)` にして下限を外し、比のとおりに割る。住所は折り返す。 */ @media (min-width: 1024px){ .footer .group{ grid-template-rows:auto auto 1fr; grid-template-columns:calc(var(--column-unit) * 19) calc(var(--column-unit) * 8) calc(var(--column-unit) * 9) 1fr; grid-template-areas:"copy company business global" "copy company business language" "copy company recruit ." "copy company follow-us ."; row-gap:0; padding-right:0; padding-left:0; } } .footer .footer-navigation-group[data-type=company]{ grid-area:company } .footer .footer-navigation-group[data-type=business]{ grid-area:business } @media (min-width: 1024px){ .footer .footer-navigation-group[data-type=business]{ padding-bottom:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .footer .footer-navigation-group[data-type=recruit]{ grid-area:recruit } .footer .footer-navigation-group[data-type=follow-us]{ grid-area:follow-us } .footer .footer-navigation-group[data-type=global]{ grid-area:global } @media (min-width: 1024px){ .footer .footer-navigation-group[data-type=global]{ padding-bottom:calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .footer .footer-navigation-group[data-type=language]{ grid-area:language } .footer-navigation-group a, .footer-navigation-group .address{ display:block; font-weight:570; font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:190%; letter-spacing:-.01em; } @media (min-width: 1024px){ .footer-navigation-group a, .footer-navigation-group .address{ font-size:calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .footer-navigation-group .heading-menu{ margin-bottom:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } @media (min-width: 1024px){ .footer-navigation-group .heading-menu{ margin-bottom:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .heading-menu{ position:relative; font-weight:790; font-size:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; letter-spacing:-.01em; } @media (min-width: 1024px){ .heading-menu{ font-size:calc(18 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .heading-menu .deco-dot{ position:absolute; top:0; left:calc(-14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .footer .copy{ grid-area:copy; margin-left:calc(-15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding-top:calc(6 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } @media (min-width: 1024px){ .footer .copy{ margin-left:0; padding-top:0; padding-left:calc(var(--column-unit) * 2) } } .footer .copy span{ display:block; font-style:normal; font-weight:790; font-size:calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:104%; letter-spacing:-.8px; } @media (min-width: 1024px){ .footer .copy span{ font-size:calc(52 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); letter-spacing:-1.04px; } } html[lang=ja] .footer .copy span{ width:auto; line-height:140%; font-size:calc(28 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } @media (min-width: 1024px){ html[lang=ja] .footer .copy span{ font-size:calc(36 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .footer .label-link-recruit{ display:flex; align-items:center; gap:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .footer .label-link-recruit svg{ width:calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } .footer .background{ position:absolute; bottom:0; left:0; transform:translateY(calc(calc(-10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * var(--progress))); transform-origin:bottom left; scale:1; border-radius:calc(10 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--color-oki-red); width:100%; height:calc(100% * (1 - var(--progress)) + calc(64 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * var(--progress)); } @media (min-width: 1024px){ .footer .background{ transform:translate(calc(calc(var(--column-unit) * 1) * var(--progress)),calc(calc(-25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * var(--progress))); width:calc(100% * (1 - var(--progress)) + calc(var(--column-unit) * 30) * var(--progress)); height:calc(100% * (1 - var(--progress)) + calc(44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) * var(--progress)); } } .footer .bottom{ position:relative; margin-top:calc(79 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding:calc(30 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(22 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); color:var(--color-oki-white); } @media (min-width: 1024px){ .footer .bottom{ display:grid; grid-template-areas:"copyright list"; justify-content:start; margin-top:calc(110 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); padding:calc(156 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(60 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) calc(40 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } @media (max-width: 1023.98px){ html[lang=ja] .footer .bottom{ margin-top:calc(35 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); } } .footer .bottom .button{ display:flex; position:absolute; top:calc(calc(-44 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))) + calc(-20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); right:calc(20 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); justify-content:center; align-items:center; opacity:0; z-index:1; border-radius:calc(4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); background-color:var(--color-oki-red); 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))); } .footer .bottom .button svg{ 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))); } @media (max-width: 1023.98px){ .footer .bottom .button{ display:none } } @media (any-hover: hover){ .footer .bottom .button{ transition-duration:var(--duration-500),var(--duration-300); transition-property:top,background-color; transition-timing-function:var(--easing-2),var(--easing-0); } .footer .bottom .button:hover{ background-color:var(--color-oki-red2) } } .footer .bottom .button[data-visible="false"]{ pointer-events:none } .footer .bottom .list{ grid-area:list; margin-bottom:calc(-4 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); isolation:isolate; font-style:normal; font-weight:670; font-size:calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:190%; letter-spacing:-.01em; } @media (min-width: 1024px){ .footer .bottom .list{ display:grid; grid-template-columns:1fr 1fr; grid-gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); gap:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); font-weight:700; font-size:calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; } .footer .bottom .list li{ width:calc(var(--column-unit) * 8) } } .footer .bottom .copyright{ grid-area:copyright; align-self:end; opacity:.8; isolation:isolate; font-style:normal; font-weight:670; font-size:calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); line-height:100%; letter-spacing:-.01em; } @media (max-width: 1023.98px){ .footer .bottom .copyright{ margin-top:calc(25 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width))); text-align:right; } } @media (min-width: 1024px){ .footer .bottom .copyright{ width:calc(var(--column-unit) * 17) } } .footer .footer-navigation-group a, .footer .bottom .list a{ display:flex; align-items:center; min-height:44px; } .footer .bottom .list a{ display:inline-flex } [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) } } /* ══ §12 12px の床 ═════════════════════════════════════════════════════════ 流体の式（calc(N / --screen-size * …)）は画面が基準より狭いとそのまま縮む。 式は 1 つも書き換えず、小さい字にだけ max(12px, …) の床を敷く。 ここに並ぶのは「設計値が 13px 以下」または「1024〜1249px で 12 を割る」もの。 実測で落ちていた例: ナビの札は 1024px 幅で 9.81px になっていた。 ═════════ */ .header-navigation-desktop .label{ font-size:max(12px, calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } .button-blur{ font-size:max(12px, calc(var(--button-blur-font-size) / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } .t-label-md{ font-size:max(12px, calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } @media (min-width: 1024px){ .t-label-md{ font-size:max(12px, calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } } .t-label-sm, html[lang=ja] .t-label-sm{ font-size:max(12px, calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } .hero-home .button-scroll{ font-size:max(12px, calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } #about-us .t-label-md{ font-size:max(12px, calc(12 * var(--u))); } @media (min-width: 1024px){ #about-us .t-label-md{ font-size:max(12px, calc(13 * var(--u))) } } #about-us .about-us__list_pagination-wrap{ font-size:max(12px, calc(10 * var(--u))); } .footer .bottom .list{ font-size:max(12px, calc(13 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } .footer .bottom .copyright{ font-size:max(12px, calc(12 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } /* ══ §12b 畳んだときに出た 2 つの綻びを塞ぐ ════════════════════════════════ どちらも実際に描いて測って見つけたもの。 */ /* (1) フッターの帯は --progress:1（閉じた 64px の細帯）から始まり、 部品の JS が「フッターが画面に入った」と見て開く。JS が動かない機械では 閉じたままで、下段の白い字が白地に乗って読めなかった（実測 比 1.03）。 JS が動くときだけ 1 から始める＝走らなければ最初から開いている（M-033）。 */ html:not(.has-js) .footer{ --progress: 0 } /* (2) 日付の灰色（OKI の --color-oki-gray #909090）は白地で比 3.19 だった。 12px の字なので 4.5 が要る。この 1 か所だけ濃さを上げる（比 5.3）。 OKI の変数の値は変えていない — 罫や棒に使っている灰色はそのまま。 */ .list-news-thumbnail .date{ color:#6b6b6b } /* ══ §12c 床の残り（1024〜1440px の帯で 12px を割っていたもの）════════════ 流体の基数は 1024px から 1440 に切り替わるので、その直後がいちばん小さい （1024/1440 = 0.711 倍）。実測で 12px を割っていたのは次の 8 か所だけ。 式は 1 つも書き換えず、床だけ足す。 */ .footer-navigation-group a, .footer-navigation-group .address{ font-size:max(12px, calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } @media (min-width: 1024px){ .footer-navigation-group a, .footer-navigation-group .address{ font-size:max(12px, calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } #about-us .about-us__list_pagination_num{ font-size:max(12px, calc(12 * var(--u))) } .home-oki-numbers .card-unit{ font-size:max(12px, calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } html[lang=ja] .paragraph-base{ font-size:max(12px, calc(16 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } } .home-oki-numbers .card-description{ font-size:max(12px, calc(14 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } html[lang=ja] .paragraph-base{ font-size:max(12px, calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } .menu-mobile .label-link{ font-size:max(12px, calc(15 / var(--screen-size) * (var(--effective-viewport-width) - var(--scrollbar-width)))); } /* ══════════════════════════════════════════════════════════════════════════════ §14 追加した 13 部品（parts2/）— 畳むときにしたこと ────────────────────────────────────────────────────────────────────────────── 1. 各部品の :root は §1 の :root へ（articles の PC 分は §1 の @media へ） 2. 各部品の @media (prefers-reduced-motion: reduce) は §13 へ 3. herobar が単体描画用に持っていた「器の寸法」の写しは落とした（§5 が持つ） これ以外は各部品の原文のまま。§3 共通部品より後ろに置いてあるので、 部品が共通部品を上書きすることは無い（どの部品も共通部品のセレクタを持たない）。 ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════ §14-gateway ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════ gateway — ヒーロー直下の「導線カード帯」（3 枚） ────────────────────────────────────────────────────────────────────────────── 参照元: https://corp.infomart.co.jp/ （2026-09-08 取得） 部品A「バナー帯」 #news 節の直後 ……