@charset "utf-8";
/*
* Nakasha HP サイト共通スタイル
* Bootstrap 5.3 の variables/utilities を最優先。自作 CSS は最小限。
* 全 39 ページ共通の から読まれる前提。
*/
html{
font-size:16px;
}
body{
max-width: 1920px;
margin: 0 auto;
font-size:1rem;
overflow-wrap:break-word;
color: var(--bs-body-color);
font-family: 'Noto Sans JP', "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
/* =============================
* デザイントークン → Bootstrap 変数上書き
@charset "utf-8";
* design-tokens.json の color.brand.primary = #E60012
* ============================= */
:root {
/* 行間 */
--bs-body-line-height: 1.6; /* 行間: サイト共通 1.6 に統一（Bootstrap デフォルト 1.5 を上書き） */
/* テキスト標準カラー*/
--bs-body-color: #212529;
/* ブランドカラー: ナカシャ赤 */
--brand-color:#e00013; /*コントラストを満たす色に変更済#E60012←はグレー背景でNG */
--brand-color-rgb: 230, 0, 18;
/* セカンダリー */
--text-secondary: #606368; /* サブ・ミュートテキスト ワークライフカードのサブテキストなど*/
--bg-secondary: #F5F5F5; /* フッター、ぱんくず等の背景*/
--border-secondary:#E1E0E0;/* link01-08 base 罫線色 */
--btn-secondary:#fff;
/* リンク関係override */
--bs-breadcrumb-item-active-color: var(--bs-body-color);
--bs-nav-link-color: var(--bs-body-color); /* body-color コード側で下線追加 */
--bs-link-color: var(--bs-body-color);
--bs-link-color-rgb: var(--bs-body-color);
--bs-link-hover-color: #b3000e; /* リンク色: サイト方針で赤に寄せる */
--bs-primary-rgb: 8, 66, 152 !important;
--ns-bg-light: #F8F9FA; /* ライトグレーテーブルの見出しに使用 */
--ns-color-dot-inactive: #DDDDDD; /* TOPページ トピックス非アクティブドット */
/* 未定義変数の補完（各ページCSS・site.css で参照されるが `:root` 未定義だったもの） */
--ns-color-muted: #606368; /* サブ・ミュートテキスト（--text-secondary と同値） */
--ns-bg-pale: #FEF2F3; /* 淡い赤背景（product-card-row 右カラム等） */
--ns-color-line: #E1E0E0; /* 汎用罫線色（--border-secondary と同値） */
--ns-color-heading: #1A1A1C; /* ページタイトル強調色 */
--ns-color-icon: #767676; /* 外部リンクアイコン SVG fill（WCAG 非テキストコントラスト 3:1 達成） */
--ns-color-icon-hover: #FF4049; /* link06 SVG アイコン ホバー色（円背景） */
--ns-color-link-hover: var(--brand-color); /* link08 テキスト・ボーダー・SVG ホバー色 */
--ns-bg-cream: #FAF8F4; /* トップページ 企業情報セクション クリーム背景 */
--ns-color-icon-inactive: #C8C8C8; /* ext-link SVG アイコン デフォルト fill（CSS で --ns-color-icon に上書き） */
/* --news-breadcrumb-bg: rgba(230, 0, 18, 0.05);
--news-breadcrumb-text: #7A4C49;
--news-breadcrumb-sep: #B79490;*/
--news-accent: #E61929;
--news-border: #c9c9c9;
--news-rule: #e9e2e2;
--news-content-max: 1600px;
--news-breadcrumb-max: 1600px;
--news-page-title-color: #1A1A1C;
--news-toolbar-color: #191B1F;
--news-toolbar-border-color: #9da3af;
--news-count-color: #212529;
--news-date-color: #212529;
--news-title-color: #212529;
--news-list-border-color: #dee2e6;
--news-toolbar-pagination-color: #e61929;
--news-pagination-border: #dee2e6;
--news-pagination-end-radius: 0.25rem;
}
/* bootstrap color設定override */
.bg-primary{ background-color:var( --brand-color) !important;}
.bg-secondary{ background-color:var( --bg-secondary) !important;}
.text-brand { color: var(--brand-color); }
/* =============================
* コンテナ幅: Figma PC 標準 1280px に合わせた上書き
* Bootstrap container-xl の最大幅を 1280px に変更
* 副作用注意: 他 container も 1280px になるが Figma 全体方針に合致
* ============================= */
@media (min-width: 1200px) {
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
max-width: 1280px;
}
}
/* =============================
* 見出し共通
* ============================= */
/* 中ページ ページタイトルオリジナルフォントサイズ */
h1{
font-size:2.25rem
}
h1::after {/* ページタイトル下線のデザイン（疑似要素） */
content: "";
position: absolute;
bottom:0rem;/*飾り線の縦位置*/
left: 50%;
transform: translateX(-50%); /* 完全に中央配置にする */
width: 6rem; /* 線の長さ */
height: 2px; /* 線の太さ */
background-color: var( --brand-color); /* 線の色（赤） */
}
h2{
font-size:1.25rem;
color: var( --brand-color);
}
h3{
font-size:1.125rem;
}
@media (max-width: 768px) {
h1{
font-size:1.5rem
}
h2{
font-size:1.125rem;
}
h3{
font-size:1rem;
}
}
/* =============================
* ユーティリティ: fw-900（Bootstrap 既定にない太さ）
* typography.lead.weight = 900 対応
* ============================= */
.fw-900 { font-weight: 900 !important; }
/* =============================
* .table-responsive override
* ============================= */
.table-responsive {
overflow-y: hidden; /* 縦スクロールを無効化 */
}
/* =============================
* site-header ロゴ
* Header: 表示 232×30
* ============================= */
.site-header__logo img { height: 30px; width: auto; }
/* =============================
* site-footer: 共通フッタースタイル
* Figma: PC 1280×370(グレー) + 54px(白 copyright bar)
* SP 375×526(グレー) + 64px(白 copyright bar)
* ============================= */
.site-footer__logo {
height: 45px;
width: auto;
max-width: 100%;
}
.site-footer__nav-link {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.875rem;
line-height: 2.2;
display: block;
transition: color 0.15s ease;
}
.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
color: var(--brand-color);
}
.site-footer__sns-link {
color: var(--bs-body-color);
text-decoration: none;
display: inline-flex;
align-items: center;
transition: color 0.15s ease;
}
.site-footer__sns-link:hover,
.site-footer__sns-link:focus-visible {
color: var(--brand-color);
}
.site-footer__cta {
padding: 0.875rem 2rem;
font-weight: 500;
font-size: 1.125rem;
background-color: var(--brand-color);
border-color: var(--brand-color);
color: var(--btn-secondary);
}
.site-footer__cta:hover,
.site-footer__cta:focus-visible {
background-color: var(--bs-link-hover-color);
border-color: var(--bs-link-hover-color);
color: var(--btn-secondary);
}
.site-footer__copyright-bar {
border-top: 1px solid var(--border-secondary);
padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
}
@media (max-width: 575.98px) {
.site-footer__logo { height: 37px; }
.site-footer__cta { width: 100%; justify-content: center; }
}
/* =============================
* ぱんくず
* ============================= */
.breadcrumb-item a:hover{
color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}
/* =============================
* page-hero: 構成（M6 修正 3 回目: full-bleed 対応）
* 画像は container 外で画面幅全幅、リード帯は画像上にオーバーレイ
* 既定: 全 BP で画像内オーバーレイ、文字量に応じて画像高さも伸長
* 例外: .page-hero--lead-below-sp（トップメッセージ）のみ SP は画像直下
* ============================= */
.page-hero { margin-bottom: 1.5rem; }
.page-hero__lead {
/* 共通: 強調表示（font-weight は HTML fw-bold に委譲） */
font-size: 1.125rem;
margin-top: 1rem;
margin-inline: auto;
}
/* オーバーレイ型（トップメッセージ以外）: リード帯の高さに合わせてメディア領域が伸長 */
.page-hero:not(.page-hero--lead-below-sp) .page-hero__media {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
min-height: calc(100vw * 267 / 1280);
}
.page-hero:not(.page-hero--lead-below-sp) .page-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
z-index: 0;
}
.page-hero:not(.page-hero--lead-below-sp) .page-hero__lead {
position: relative;
z-index: 1;
align-self: flex-start;
max-width: none;
margin: 0 1rem 2.25rem;
background-color: rgba(255, 255, 255, 0.9);
text-align: left;
}
@media (min-width: 868px) {
.page-hero { margin-bottom: 3rem; }
.page-hero:not(.page-hero--lead-below-sp) .page-hero__lead {
margin:0 8.125% 2.875rem 8.125%;
font-size: 18px;
}
/* トップメッセージ: MD 以上は Figma 通り absolute オーバーレイ */
.page-hero--lead-below-sp .page-hero__media .page-hero__lead {
position: absolute;
left: 8.125%;
bottom: 9.7%;
margin: 0;
background-color: rgba(255, 255, 255, 0.9);
text-align: left;
font-size: 18px;
}
}
/* =============================
* product-card-row: 左白 + 右薄赤、共有グレー罫線（M4 修正 3 回目）
* Figma: 左 627×80 fill #FFFEFF / 右 230×80 fill #FEF2F3
* 共通 stroke #9DA3AF 1px
* ============================= */
.product-card-row__eyebrow { color: var(--ns-color-muted); }
/* PC: 横並び。左カラムは左側だけ角丸、右カラムは右側だけ角丸（Figma 仕様 [16,0,0,16] / [0,16,16,0]）*/
.product-card-row__left {
background-color: var(--bs-white, #fff);
border: 1px solid var(--border-secondary);
border-right: none;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.product-card-row__right {
background-color: var(--ns-bg-pale);
border: 1px solid var(--border-secondary);
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
/* SP では縦積みになるため、角丸を上下分離（上側上 2 角、下側下 2 角）*/
@media (max-width: 767.98px) {
.product-card-row__left {
border-right: 1px solid var(--border-secondary);
border-bottom: none;
border-radius: 16px 16px 0 0;
}
.product-card-row__right {
border-top: none;
border-radius: 0 0 16px 16px;
}
}
/* =============================
* service-list-item: 薄赤背景 + 角丸（M3 修正 3 回目）
* Figma: fill #FEF2F3、cornerRadius 16、border 無
* ============================= */
.service-list-item {
background-color: var(--ns-bg-pale);
border-radius: 16px;
padding: 1rem 1.25rem;
margin-bottom: .5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.service-list-item__dot { font-size: 0.875rem; } /* Figma 14px */
/* =============================
* btn-circle-*: 残置（他ページで利用予定）。本ページの商品カードでは未使用
* ============================= */
.btn-circle-sm { width: 56px; height: 56px; }
.btn-circle-lg { width: 80px; height: 80px; }
/* =============================
* page-hero__image: ヒーロー画像（複数ページ共通）
* オーバーレイ型は高さ可変（site.css page-hero 参照）
* トップメッセージのみ Figma 1280×267 の max-height 固定
* ============================= */
.page-hero__image {
object-fit: cover;
}
.page-hero--lead-below-sp .page-hero__image {
max-height: 267px;
}
/* =============================
* page-title: ページ H1 強調色（複数ページ共通）
* design-tokens.json: typography.page-title.color = #1A1A1C
* Bootstrap body-color (#212529) より僅かに濃いトーン
* 対象: #12 トップメッセージ / #13 経営理念 / #15 会社概要沿革 /
* #25 カラーメディアプラザ / #35 品質方針
* ============================= */
.page-title {
color: var(--ns-color-heading);
}
/* =============================
* list-number: 番号付きリスト（規約・ポリシー文書用 ⑥／2026-05-15 追加）
* Figma マスタ > フッターコンテンツ の list-number group
* 構造: - 本文
* 番号: ::before で 24×24 赤四角 + 中央白数字（fs 16 / fw 700）
* 本文: --bs-body-color、fs 16、left padding 43px で番号スペース確保
* ============================= */
.list-number {
counter-reset: ns-num;
list-style: none;
padding: 0;
margin: 0;
}
.list-number > li {
counter-increment: ns-num;
position: relative;
padding-left: 43px;
margin-bottom: 1rem;
min-height: 24px;
font-size: 1rem;
}
.list-number > li::before {
content: counter(ns-num);
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background-color: var( --brand-color);
color: var(--bs-white, #fff);
font-size: 1rem;
font-weight: 700;
text-align: center;
line-height: 24px;
}
/* list-number 内ネスト ul/ol のリストマーカーを復元（list-style 継承を上書き） */
.list-number li ul {
list-style-type: disc;
padding-left: 1.5rem;
}
.list-number li ol {
list-style-type: decimal;
padding-left: 1.5rem;
}
/* =============================
* link01〜link08: aside / フッター ナビゲーションリンク（⑦／2026-05-15 追加）
* Figma: マスタ 内 link01〜link08 group / link01-hover〜link08-hover group
* 構造: テキスト
* base: 上下 1px ボーダー --ns-color-line + テキスト --bs-body-color
* hover: 余白・大きさ不変、色のみ --brand-color に変更（user 指示）
* ============================= */
/* link01/02/03/04: テキスト標準色、ホバーでブランドカラーに変化 */
.link01, .link02, .link03, .link04 {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--ns-color-line);
color: var(--bs-body-color);
text-decoration: none;
transition: color .15s ease, border-color .15s ease;
}
.link01:hover, .link02:hover, .link03:hover, .link04:hover {
color: var(--brand-color);
border-color: var(--brand-color);
}
/* link05: Figma link05set — テキスト常時赤（#FF3333）、ホバーで下ボーダーのみ赤に変化
default: text=#FF3333 / border-bottom=gray(#E1E0E0)
hover: text=#FF3333（不変）/ border-bottom=#FF3333 */
.link05 {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--ns-color-line);
color: var(--ns-color-link-hover); /* #FF3333 — 常時赤 */
text-decoration: none;
transition: border-color .15s ease; /* テキスト色は変化しないため color の transition 不要 */
}
.link05:hover, .link05:focus-visible {
color: var(--ns-color-link-hover); /* 変化なし（明示） */
border-color: var(--ns-color-link-hover); /* ボーダーだけ赤に */
}
/* arrow-right-icon ホバー: 円→赤塗り / 矢印→白 */
.link01:hover .arrow-right-icon-circle,
.link02:hover .arrow-right-icon-circle,
.link03:hover .arrow-right-icon-circle,
.link04:hover .arrow-right-icon-circle,
.link05:hover .arrow-right-icon-circle,
.link01:focus-visible .arrow-right-icon-circle,
.link02:focus-visible .arrow-right-icon-circle,
.link03:focus-visible .arrow-right-icon-circle,
.link04:focus-visible .arrow-right-icon-circle,
.link05:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.link01:hover .arrow-right-icon-arrow,
.link02:hover .arrow-right-icon-arrow,
.link03:hover .arrow-right-icon-arrow,
.link04:hover .arrow-right-icon-arrow,
.link05:hover .arrow-right-icon-arrow,
.link01:focus-visible .arrow-right-icon-arrow,
.link02:focus-visible .arrow-right-icon-arrow,
.link03:focus-visible .arrow-right-icon-arrow,
.link04:focus-visible .arrow-right-icon-arrow,
.link05:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
.link01:focus-visible, .link02:focus-visible, .link03:focus-visible, .link04:focus-visible,
.link06:focus-visible, .link08:focus-visible {
color: var(--brand-color);
border-color: var(--brand-color);
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
/* link05 focus-visible: アウトラインのみ（テキスト色・ボーダー色は link05 ホバールールで管理） */
.link05:focus-visible {
outline: 2px solid var(--ns-color-link-hover);
outline-offset: 2px;
}
/* ----------------------------------------------------------
link07: Figma link07set — カードコンポーネント（全辺ボーダー）
default: text=var(--bs-body-color) / border=var(--ns-color-line) (#E1E0E0)
hover: text=#FF3333 / border=#FF3333 / 円→赤塗り / 矢印→白
レイアウト（flex/padding 等）は HTML 側 Bootstrap クラスで指定
---------------------------------------------------------- */
.link07 {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid var(--ns-color-line);
color: var(--bs-body-color);
text-decoration: none;
transition: color .15s ease, border-color .15s ease;
}
.link07:hover, .link07:focus-visible {
color: var(--ns-color-link-hover);
border-color: var(--ns-color-link-hover);
}
.link07:focus-visible {
outline: 2px solid var(--ns-color-link-hover);
outline-offset: 2px;
}
.link07:hover .arrow-right-icon-circle,
.link07:focus-visible .arrow-right-icon-circle {
fill: var(--ns-color-link-hover);
stroke: var(--ns-color-link-hover);
}
.link07:hover .arrow-right-icon-arrow,
.link07:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
/* ----------------------------------------------------------
link10: Figma link10set — CTAリンク（枠線ボタン型）
default: 白背景 / 2px solid --brand-color / テキスト・アイコン = --brand-color
hover: 背景 --bg-secondary (#F6F6F6) / 枠線・テキスト色は変化なし
レイアウト（flex/padding/gap）は HTML 側 Bootstrap クラスで指定
---------------------------------------------------------- */
.link10 {
border: 2px solid var(--brand-color);
color: var(--brand-color);
background-color: var(--bs-white, #fff);
text-decoration: none;
font-weight: 500;
transition: background-color .15s ease;
}
.link10:hover, .link10:focus-visible {
color: var(--brand-color);
background-color: var(--bg-secondary);
}
.link10:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
.link10.backlink{
width:240px;
}
/* =============================
* boxlist: 横並びの説明ボックス（事業領域・サービス紹介で使う）
* Bootstrap クラスで大部分を制御。CSS はアイコンサイズとブランドカラーのみ残す。
* ============================= */
.boxlist__icon {
width: 24px;
height: 24px;
}
.boxlist__icon svg {
display: block;
width: 100%;
height: 100%;
}
.boxlist__title {
color: var(--brand-color);
}
/* =============================
* subhead-box: グレー背景サブセクション見出しバー（複数ページ共通）
* Figma: fill #F8F9FA / cornerRadius 16 / fs 20px / fw 700
* 対象: #20 健康経営（.cert-banner）/ #21 防災（.subhead-bar）
* ============================= */
.subhead-box {
background-color: var(--ns-bg-light);
padding: 0.75rem 1.25rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--bs-body-color);
}
/* =============================
* card-img-top: カード上部画像（148px 固定高・object-fit cover）
* Figma: 画像エリア 411×148、full-width、object-fit cover
* 対象: #03 エネルギー / #07 交通インフラ / #10 テクニカルソリューション
* ============================= */
.card-img-top {
display: block;
width: 100%;
height: 148px;
object-fit: cover;
}
/* =============================
* link1 / link2 / link5 / link9 / arrow-right-icon（リストリンク・矢印アイコン共通）
* ============================= */
.arrow-right-icon {
display: block;
flex-shrink: 0;
width: 38px;
height: 38px;
line-height: 0;
}
.arrow-right-icon svg {
display: block;
width: 38px;
height: 38px;
}
.arrow-right-icon-circle,
.arrow-right-icon-arrow {
transition: fill 0.15s ease, stroke 0.15s ease;
}
/* 通常状態の色を CSS 変数で制御（SVG presentation 属性を上書き） */
.arrow-right-icon-circle {
fill: var(--bs-white, #fff);
stroke: var(--ns-color-line);
}
.arrow-right-icon-arrow {
stroke: var(--bs-body-color);
}
.link1_item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 0;
border-top: none;
border-bottom: 1px solid var(--border-secondary);
text-decoration: none;
color: var(--bs-body-color);
font-weight: 400;
font-size: 1.25rem;
transition: color 0.15s ease, border-color 0.15s ease;
}
.link1_item:hover,
.link1_item:focus-visible {
color: var(--brand-color);
border-bottom-color: var(--brand-color);
}
.link1_item:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
.link1_item:hover .link1_num,
.link1_item:focus-visible .link1_num {
color: var(--brand-color);
}
.link1_item:hover .arrow-right-icon-circle,
.link1_item:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.link1_item:hover .arrow-right-icon-arrow,
.link1_item:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
.link1_num {
font-size: 1.25rem;
font-weight: 300;
color: var(--brand-color);
min-width: 2.5rem;
flex-shrink: 0;
transition: color 0.15s ease;
}
.link1_label {
flex-grow: 1;
}
.link5_link {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 2rem;
padding-bottom: 0.5rem;
border-top: none;
border-bottom: 1px solid var(--border-secondary);
text-decoration: none;
color: var(--bs-body-color);
font-weight: 400;
font-size: 1.25rem;
transition: color 0.15s ease, border-color 0.15s ease;
gap: 1rem;
}
.link5_link:hover,
.link5_link:focus-visible {
color: var(--brand-color);
border-bottom-color: var(--brand-color);
}
.link5_link:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
.link5_link:hover .arrow-right-icon-circle,
.link5_link:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.link5_link:hover .arrow-right-icon-arrow,
.link5_link:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
.link2_link {
color: var(--bs-body-color);
font-weight: 400;
transition: color 0.15s ease;
font-size: 1.018125rem;
}
.link2_link:hover,
.link2_link:focus-visible {
color: var(--brand-color);
}
.link2_link:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
border-radius: 2px;
}
.link2_link:hover .arrow-right-icon-circle,
.link2_link:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.link2_link:hover .arrow-right-icon-arrow,
.link2_link:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
.link9_item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.5rem 0.75rem;
text-decoration: none;
color: var(--bs-body-color);
/*border-bottom: 1px solid var(--border-secondary);*/
transition: background-color 0.15s ease;
}
.link9_item:first-child {
border-top: 1px solid var(--border-secondary);
}
.link9_item:hover,
.link9_item:focus-visible {
background-color: var(--bg-secondary);
}
.link9_item:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: -2px;
}
.link9_item:hover .arrow-right-icon-circle,
.link9_item:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.link9_item:hover .arrow-right-icon-arrow,
.link9_item:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
.link9_date {
color: var(--text-secondary);
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
white-space: nowrap;
min-width: 6.5rem;
flex-shrink: 0;
}
/* タイトル＋New は inline で直後配置、ラッパーで残り幅を取り矢印を右端へ */
.link9_title-wrap {
flex: 1 1 auto;
min-width: 0;
}
.link9_title {
display: inline;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}
.link9_new {
display: inline;
margin-left: 0.5rem;
font-size: 0.8125rem;
font-weight: 700;
color: var(--brand-color);
white-space: nowrap;
vertical-align: baseline;
}
.link9_item .arrow-right-icon {
flex-shrink: 0;
margin-left: auto;
}
@media (max-width: 767.98px) {
.link9_item { flex-wrap: wrap; }
.link9_date { min-width: auto; }
.link9_title-wrap { flex-basis: 100%; order: 3; }
.link9_item .arrow-right-icon { margin-left: auto; }
}
/* ============================================================
link06 — リンクバナーコンポーネント 独自CSS（最小限）
Figma: link06set (node: 2057-1849)
レイアウト・テキスト系は Bootstrap 5 クラスで対応済み
============================================================ */
/* ── ベース ──────────────────────────────── */
.link06 {
/*max-width: 857px; */ /* Figma 実寸: 857px */
background-color: var(--bs-white, #fff); /* Figma hover state: rgb(255,254,255) */
border-bottom: 1px solid var(--ns-color-line); /* Figma: rgb(225,224,224) */
color: inherit;
transition: background-color 0.2s ease;
}
.link06:hover,
.link06:focus-visible {
background-color: var(--bg-secondary); /* Figma: rgb(246,246,246) */
color: inherit;
outline: none;
}
/* リンクなし（表示のみ） */
.link06--static {
cursor: default;
}
.link06--static:hover,
.link06--static:focus-visible {
background-color: var(--bs-white, #fff);
}
/* ── 左/上パネル ──────────────────────────── */
.link06__body {
min-width: 0; /* flex内 text-overflow 保証 */
}
.link06__label {
color: var(--ns-color-muted); /* Figma: rgb(96,99,105) */
}
/* ── デスクトップ (md以上) ───────────────── */
@media (min-width: 768px) {
.link06 {
height: 80px; /* Figma 実寸: 80px */
}
.link06__action {
width: 255px; /* Figma 実寸: 255px */
flex-shrink: 0;
}
}
/* ── SVGアイコン トランジション (Group 1171275965) ── */
.link06__icon-circle {
transition: fill 0.2s ease, stroke 0.2s ease;
}
.link06__icon-arrow {
transition: stroke 0.2s ease;
}
/* ホバー時: 円 → 赤塗り / 矢印 → 白 */
.link06:hover .link06__icon-circle,
.link06:focus-visible .link06__icon-circle {
fill: var(--ns-color-icon-hover);
stroke: var(--ns-color-icon-hover);
stroke-width: 1.01786;
}
.link06:hover .link06__icon-arrow,
.link06:focus-visible .link06__icon-arrow {
stroke: white;
stroke-width: 1.01786;
}
/* ============================================================
link08 — リンクバナーコンポーネント 独自CSS（最小限）
Figma: link08set (node: 2057-1858)
レイアウト・テキスト系は Bootstrap 5 クラスで対応済み
─────────────────────────────────────────────────────────
特徴: 幅 HUG（d-inline-flex でテキスト量に応じて伸縮）
============================================================ */
/* ── ベース ──────────────────────────────── */
.link08 {
background-color: var(--bg-secondary);
border-bottom: 1px solid transparent; /* hover時のズレ防止で常に1px確保 */
transition: border-color 0.2s ease, color 0.2s ease;
}
section,
div.tech-history__epoch{
scroll-margin-top: 140px;
}
/* ── ホバー ──────────────────────────────── */
.link08:hover,
.link08:focus-visible {
border-bottom-color: var(--brand-color);
color: var(--brand-color);
outline: none;
}
/* ── SVGアイコン トランジション── */
.link08__icon-circle {
transition: fill 0.2s ease, stroke 0.2s ease;
}
.link08__icon-arrow {
transition: stroke 0.2s ease;
}
/* ホバー時: 円 → 赤塗り / 矢印 → 白 */
.link08:hover .link08__icon-circle,
.link08:focus-visible .link08__icon-circle {
fill: var(--ns-color-link-hover);
stroke: none;
}
.link08:hover .link08__icon-arrow,
.link08:focus-visible .link08__icon-arrow {
stroke: white;
}
/* =============================
* フォーカス可視性: Bootstrap デフォルト :focus-visible を打ち消さない
* （スペックの a11y_notes: Bootstrap デフォルトの :focus-visible を CSS で打ち消さない）
* ============================= */
/* =============================
* site-header: 共通ヘッダー
* ============================= */
#top.site-header {
border-bottom: 1px solid var(--border-secondary);
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid var( --brand-color);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 108px;
}
@media (max-width: 991.98px) {
.site-header__inner {
height: 72px;
}
}
/* ============================= */
/* gnav: PC グローバルナビゲーション */
/* ============================= */
.gnav {
display: none;
}
@media (min-width: 992px) {
.gnav {
display: block;
}
}
.gnav__list {
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.gnav__item {
position: static; /* mega-menu は header 基準で広がる */
}
/* ナビリンク・ボタン共通 */
.gnav__link,
.gnav__btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: 400;
color: var(--bs-body-color);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s ease;
}
.gnav__link:hover,
.gnav__btn:hover {
color: var(--brand-color);
}
.gnav__link:focus-visible,
.gnav__btn:focus-visible {
color: var(--brand-color);
outline: 2px solid var(--brand-color);
outline-offset: 2px;
border-radius: 2px;
}
/* + / − アイコン（赤） */
.gnav__icon {
font-size: 1rem;
font-weight: 700;
color: var(--brand-color);
line-height: 1;
transition: transform 0.2s ease;
display: inline-block;
}
.gnav__btn[aria-expanded="true"] .gnav__icon {
/* + → − の切替は JS で文字変更。回転アニメーション不要 */
}
/* お問い合わせボタン */
.gnav__contact {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.5rem;
font-weight: 700;
font-size: 1rem;
margin-left: 0.5rem;
background-color: var(--brand-color);
border-color: var(--brand-color);
color: var(--btn-secondary);
}
.gnav__contact:hover,
.gnav__contact:focus-visible {
background-color: var(--bs-link-hover-color);
border-color: var(--bs-link-hover-color);
color: var(--btn-secondary);
}
/* ============================= */
/* mega-menu: PCフルワイドドロップダウン */
/* ============================= */
.mega-menu {
position: absolute;
left: 0;
right: 0;
top: 108px; /* site-header__inner の高さ */
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-secondary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 999;
padding: 2.5rem 0;
}
.mega-menu[hidden] {
display: none;
}
.mega-menu__inner {
display: flex;
gap: 2rem;
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* 左ブロック: タイトル・英語名・TOPリンク */
.mega-menu__left {
flex: 0 0 220px;
border-right: 1px solid var(--border-secondary);
padding-right: 2rem;
}
.mega-menu__title {
font-size: 2rem;
font-weight: 700;
color: var(--bs-body-color);
margin-bottom: 0.25rem;
}
.mega-menu__subtitle {
font-size: 0.875rem;
font-weight: 700;
color: var(--brand-color);
margin-bottom: 1.25rem;
display: block;
}
.mega-menu__top-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.875rem;
color: var(--bs-body-color);
text-decoration: none;
transition: color 0.15s ease;
}
.mega-menu__top-link:hover {
color: var(--brand-color);
}
/* 右ブロック: 2カラムリンクグリッド */
.mega-menu__right {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 3rem;
align-content: start;
}
.mega-menu__col {
display: flex;
flex-direction: column;
}
/* カテゴリー見出しリンク（赤・下線付き） */
.mega-menu__category {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 0;
border-bottom: 1px solid var(--brand-color);
font-size: 0.9375rem;
font-weight: 700;
color: var(--brand-color);
text-decoration: none;
margin-bottom: 0.125rem;
transition: color 0.15s ease;
}
.mega-menu__category:hover,
.mega-menu__category:focus-visible {
color: var(--brand-color);
}
.mega-menu__category:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
.mega-menu__category:hover .arrow-right-icon-circle,
.mega-menu__category:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.mega-menu__category:hover .arrow-right-icon-arrow,
.mega-menu__category:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
/* サブリンク行（link5_link 相当のホバー） */
.mega-menu__sublink {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-secondary);
font-size: 0.9375rem;
color: var(--bs-body-color);
text-decoration: none;
transition: color 0.15s ease, border-color 0.15s ease;
}
.mega-menu__sublink:hover,
.mega-menu__sublink:focus-visible {
color: var(--brand-color);
border-bottom-color: var(--brand-color);
}
.mega-menu__sublink:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
.mega-menu__sublink:hover .arrow-right-icon-circle,
.mega-menu__sublink:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.mega-menu__sublink:hover .arrow-right-icon-arrow,
.mega-menu__sublink:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
/* 外部リンクアイコン（Figma SVG）のホバー */
.mega-menu__sublink:hover .ext-link-icon-path,
.mega-menu__sublink:focus-visible .ext-link-icon-path {
fill: var(--brand-color);
}
/* ヘッダー内 SVG アイコンサイズ調整 */
.mega-menu__category .arrow-right-icon,
.mega-menu__sublink .arrow-right-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.mega-menu__category .arrow-right-icon svg,
.mega-menu__sublink .arrow-right-icon svg {
width: 28px;
height: 28px;
}
/* 外部リンクアイコンラッパー */
.ext-link-icon {
display: block;
flex-shrink: 0;
width: 16px;
height: 16px;
line-height: 0;
margin-right: 0.6rem;
}
.ext-link-icon svg {
display: block;
width: 16px;
height: 16px;
}
.ext-link-icon-path {
fill: var(--ns-color-icon); /* WCAG 1.4.11: 非テキストコントラスト 3:1 達成（白背景比 4.48:1）。SVG属性 #C8C8C8 より上書き */
transition: fill 0.15s ease;
}
/* ============================= */
/* lang-menu: PC Language ドロップダウン（コンパクト） */
/* ============================= */
.gnav__item--lang {
position: static;
}
.lang-menu {
position: absolute;
top: 108px;
left: 0;
z-index: 999;
min-width: 11rem;
max-width: calc(100vw - 2rem);
width: max-content;
padding: 0;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--border-secondary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.lang-menu[hidden] {
display: none;
}
.lang-menu__list > li + li {
border-top: 1px solid var(--border-secondary);
}
.lang-menu__link {
display: block;
width: 100%;
padding: 0.625rem 1.25rem;
color: var(--bs-body-color);
text-decoration: none;
font-size: 1rem;
white-space: nowrap;
text-align: center;
transition: color 0.15s ease, background-color 0.15s ease;
}
.lang-menu__link:hover,
.lang-menu__link:focus-visible {
color: var(--brand-color);
background-color: rgba(255, 255, 255, 0.45);
}
.lang-menu__link:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: -2px;
}
.lang-menu__link--active {
color: var(--brand-color);
font-weight: 700;
}
/* ============================= */
/* hamburger-btn: SP ハンバーガー */
/* ============================= */
.hamburger-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
@media (min-width: 992px) {
.hamburger-btn {
display: none;
}
}
.hamburger-btn__bar {
display: block;
width: 24px;
height: 2px;
background-color: var(--bs-body-color);
border-radius: 1px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
/* ============================= */
/* sp-nav: SP 全画面オーバーレイ */
/* ============================= */
.sp-nav {
position: fixed;
inset: 0;
z-index: 1100;
background-color: var(--bs-white, #fff);
overflow-y: auto;
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.sp-nav.is-open {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 992px) {
.sp-nav {
display: none !important;
}
}
/* SP ナビ上部バー（ロゴ + 閉じる） */
.sp-nav__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--border-secondary);
flex-shrink: 0;
}
.sp-nav__close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
font-size: 1.25rem;
color: var(--bs-body-color);
padding: 0;
}
/* SP ナビ本体 */
.sp-nav__body {
flex: 1;
padding: 0 1.25rem;
}
/* アコーディオン行 */
.sp-nav__item {
border-bottom: 1px solid var(--border-secondary);
}
.sp-nav__item-hd {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.125rem 0;
cursor: pointer;
background: none;
border: none;
width: 100%;
text-align: left;
}
.sp-nav__item-hd--link {
display: flex;
align-items: center;
padding: 1.125rem 0;
text-decoration: none;
color: var(--bs-body-color);
border-bottom: 1px solid var(--border-secondary);
}
.sp-nav__item-hd--link:hover {
color: var(--brand-color);
}
.sp-nav__item-label {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.sp-nav__item-ja {
font-size: 1.125rem;
font-weight: 700;
color: var(--bs-body-color);
}
.sp-nav__item-en {
font-size: 0.75rem;
font-weight: 700;
color: var(--brand-color);
}
.sp-nav__toggle-icon {
font-size: 1.25rem;
font-weight: 300;
color: var(--brand-color);
line-height: 1;
flex-shrink: 0;
transition: transform 0.2s ease;
}
/* アコーディオン中身 */
.sp-nav__accordion {
display: none;
padding-bottom: 0.75rem;
}
.sp-nav__accordion.is-open {
display: block;
}
/* アコーディオン内カテゴリー見出し */
.sp-nav__cat {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.625rem 0;
border-bottom: 1px solid var(--brand-color);
font-size: 0.9375rem;
font-weight: 700;
color: var(--brand-color);
text-decoration: none;
margin-top: 0.5rem;
transition: color 0.15s ease;
}
.sp-nav__cat:hover,
.sp-nav__cat:focus-visible {
color: var(--brand-color);
}
.sp-nav__cat:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
.sp-nav__cat:hover .arrow-right-icon-circle,
.sp-nav__cat:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.sp-nav__cat:hover .arrow-right-icon-arrow,
.sp-nav__cat:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
/* アコーディオン内サブリンク（link5_link 相当のホバー） */
.sp-nav__sub {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 0.5rem;
border-bottom: 1px solid var(--border-secondary);
font-size: 0.875rem;
color: var(--bs-body-color);
text-decoration: none;
transition: color 0.15s ease, border-color 0.15s ease;
}
.sp-nav__sub:hover,
.sp-nav__sub:focus-visible {
color: var(--brand-color);
border-bottom-color: var(--brand-color);
}
.sp-nav__sub:focus-visible {
outline: 2px solid var(--brand-color);
outline-offset: 2px;
}
.sp-nav__sub:hover .arrow-right-icon-circle,
.sp-nav__sub:focus-visible .arrow-right-icon-circle {
fill: var(--brand-color);
stroke: var(--brand-color);
}
.sp-nav__sub:hover .arrow-right-icon-arrow,
.sp-nav__sub:focus-visible .arrow-right-icon-arrow {
stroke: var(--bs-white, #fff);
}
/* 外部リンクアイコン（Figma SVG）のホバー */
.sp-nav__sub:hover .ext-link-icon-path,
.sp-nav__sub:focus-visible .ext-link-icon-path {
fill: var(--brand-color);
}
/* SP 内 SVG アイコンサイズ調整 */
.sp-nav__cat .arrow-right-icon,
.sp-nav__sub .arrow-right-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.sp-nav__cat .arrow-right-icon svg,
.sp-nav__sub .arrow-right-icon svg {
width: 28px;
height: 28px;
}
/* アコーディオン内 TOPリンク */
.sp-nav__top-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 0;
color: var(--bs-body-color);
text-decoration: none;
transition: color 0.15s ease;
}
.sp-nav__top-link:hover { color: var(--brand-color); }
/* SP フッター（お問い合わせ＋言語） */
.sp-nav__footer {
padding: 1.5rem 1.25rem;
flex-shrink: 0;
background-color: var(--bg-secondary);
}
.sp-nav__contact {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
max-width: 280px;
margin-inline: auto;
padding: 1rem;
font-size: 1.125rem;
font-weight: 700;
border-radius: 9999px;
margin-bottom: 1.25rem;
background-color: var(--brand-color);
border-color: var(--brand-color);
color: var(--btn-secondary);
}
.sp-nav__contact:hover,
.sp-nav__contact:focus-visible {
background-color: var(--bs-link-hover-color);
border-color: var(--bs-link-hover-color);
color: var(--btn-secondary);
}
.sp-nav__lang {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
}
.sp-nav__lang-item {
font-size: 0.875rem;
color: var(--bs-body-color);
text-decoration: none;
transition: color 0.15s ease;
}
.sp-nav__lang-item:hover { color: var(--brand-color); }
.sp-nav__lang-item--active {
color: var(--brand-color);
font-weight: 700;
}
/* body スクロールロック（SP メニュー開放時） */
body.nav-open {
overflow: hidden;
}
/* =============================
* prefers-reduced-motion: WCAG 2.3.3 / 2.2.2 対応
* 前庭障害・動き感受性の高いユーザー向けに全 transition / animation を停止
* ============================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
a.linkBlue{
color: #0a58ca !important;
}
/* =============================
* 記事（お知らせ）投稿のリッチエディタ用
* ============================= */
.innertxt h1{
line-height:1.7;
font-size:2rem;
text-align:center;
}
.innertxt h1::after {
content: none;
display: none;/* タイトル下赤線非表示 */
}
.innertxt h2{
color:#212529;
}
.innertxt table{
max-width:90% !important;
margin:auto;
}
.innertxt iframe{
max-width:100% !important;
margin:auto;
}
@media (max-width: 768px) {/*youtubeの埋め込み等への対策*/
}
.innertxt img{
max-width:100% !important;
height: auto;
margin:auto;
}
.innertxt td,
.innertxt td{
width:auto !important;
}
@media (max-width: 768px) {
.innertxt h1{
font-size:1.5rem;
}
}