/* =========================================================
Proxy Co., Ltd. — トップページ固有の装飾
共通レイアウト（ヘッダー／フッター／ボタン／見出し）は main.css
========================================================= */
/* 改行制御（同じ文でPCとSPの折返し位置を変える） */
.pc-br { display: inline; }
.sp-br { display: none; }
@media (max-width: 760px) {
.pc-br { display: none; }
.sp-br { display: inline; }
}
/* 見出し補助 */
.sec-head h2 { font-weight: 700; }
.sec-more { margin-top: 46px; text-align: center; }
.sec-more--left { margin-top: 26px; text-align: left; }
/* =========================================================
共通の演出（2026-08-29 追加）
★方針：明るいセクションでも「最先端」の温度を保つ。
やることは3つだけに絞り、装飾を増やしすぎない。
1. 数字を大きく・グラデーションにする
2. カードの上端にホバーで光る線を出す
3. 小見出し（eyebrow）にシアンの発光ドットを添える
========================================================= */
/* 1. 数字のグラデーション */
.reason__no,
.fee__main em,
.fee__tiers b {
background: linear-gradient(135deg, var(--navy-600) 0%, var(--cyan) 55%, var(--cyan-2) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* 2. カードの上端に走る光（ホバー時） */
.svc,
.prob-grid li,
.ind-grid li,
.reason {
position: relative;
overflow: hidden;
}
.svc::before,
.prob-grid li::before,
.ind-grid li::before,
.reason::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 100%; height: 2px;
background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--cyan-2));
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.svc:hover::before,
.prob-grid li:hover::before,
.ind-grid li:hover::before,
.reason:hover::before { transform: scaleX(1); }
/* 3. eyebrow に発光ドット */
.eyebrow--center,
.sec-head .eyebrow { position: relative; display: inline-block; }
.sec-head .eyebrow::before,
.sec-head .eyebrow::after {
content: "";
position: absolute;
top: 50%;
width: 5px; height: 5px;
margin-top: -2px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 10px var(--glow);
}
.sec-head .eyebrow::before { left: -20px; }
.sec-head .eyebrow::after { right: -20px; }
@media (max-width: 560px) {
.sec-head .eyebrow::before { left: -14px; }
.sec-head .eyebrow::after { right: -14px; }
}
/* 明るいセクションの上端に細い光の線を入れて、区切りを締める */
.sec--alt,
.problems { position: relative; }
.sec--alt::after,
.problems::after {
content: "";
position: absolute;
left: 50%; top: 0;
transform: translateX(-50%);
width: min(720px, 82%);
height: 1px;
background: linear-gradient(90deg, transparent, rgba(61, 165, 245, .45), transparent);
}
/* 4. 明るいセクションを「ベタ塗りの白」にしない。
★白のまま広い余白が続くと、メインビジュアルとの落差で急に大人しく見える
（2026-08-29 吉田さん指摘）。寒色のごく薄いグラデーションで奥行きを付ける。
★2026-08-31 追記：先方より「全体が少し暗い。白・明るいブルーの面積を増やしたい」。
濃紺は残したまま、明るい側のセクションのブルーを一段濃くして面積を稼ぐ。 */
.sec--alt {
background-color: var(--bg-2);
background-image:
radial-gradient(880px 420px at 8% 0%, rgba(61, 165, 245, .07), transparent 62%),
radial-gradient(760px 400px at 96% 100%, rgba(26, 111, 196, .055), transparent 60%);
}
.problems,
.scope,
#industry,
#price,
#company {
background-image:
radial-gradient(900px 380px at 50% -6%, rgba(61, 165, 245, .05), transparent 64%);
}
/* 5. 見出しの飾りをシアン寄りに。線が細すぎて効いていなかった */
.ornament::before,
.ornament::after {
background: linear-gradient(90deg, transparent, rgba(61, 165, 245, .55), transparent);
}
.ornament i {
background: var(--cyan);
box-shadow: 0 0 10px var(--glow);
}
/* 6. 余白を締める。
セクション下の「もっと見る」〜次セクションの見出しまでが 240px 近くあり、
そこが「間延びしてシンプルに見える」いちばんの原因だった。 */
.sec-more { margin-top: 38px; }
/* =========================================================
背景写真（支給素材）
★文字の可読性を最優先するため、必ず濃いオーバーレイを重ねる。
写真は「質感」として効かせる。主役にしない。
★background-attachment: fixed は使わない（SPで描画が重く、
iOSでは効かないうえ backdrop-filter と併用すると壊れる）。
========================================================= */
/* 暗い面の上に置く見出し */
.sec--dark {
background-color: var(--navy-900);
color: rgba(255, 255, 255, .86);
}
/* 対応国セクション：コンテナ船
★見出しとカードの文字が乗るので、写真は「奥に沈んでいる」程度まで落とす。
.86 まで薄くするとカード本文が読みにくくなった（2026-08-29 実測）。 */
/* ★★2026-09-01：オーバーレイを濃くした。
このセクションの主役が「点描の世界地図」になったので、コンテナ船の写真が
そのまま透けているとクレーンやワイヤーが地図と重なって、どちらも読めなくなる
（実測で確認）。写真は質感だけ残す。 */
.sec--photo-network {
background-image:
linear-gradient(180deg, rgba(10, 34, 64, .992) 0%, rgba(10, 34, 64, .978) 40%, rgba(10, 34, 64, .994) 100%),
url("../images/bg-network.webp");
background-size: cover;
background-position: center 38%;
background-repeat: no-repeat;
}
/* サービスセクション：世界地図の地紋（ごく薄く敷く） */
.sec--photo-map {
position: relative;
isolation: isolate;
}
.sec--photo-map::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: url("../images/bg-map.webp");
background-size: cover;
background-position: center;
opacity: .07;
pointer-events: none;
}
.sec--dark h2, .sec--dark h3 { color: #fff; }
.sec-head--dark .lead { color: rgba(255, 255, 255, .78); }
/* リードの2行目（事実の補足）。1行目より一段小さく、少しだけ弱める */
.sec-head .lead--sub {
margin-top: 14px;
font-size: 14.5px;
line-height: var(--lh-body);
}
.sec-head .lead--sub b { font-weight: 700; }
.sec-head--dark .lead--sub { color: rgba(255, 255, 255, .66); }
.sec-head--dark .lead--sub b { color: #fff; }
.sec-head--dark .eyebrow { color: var(--cyan-2); }
.tlink--dark { color: #fff; border-bottom-color: rgba(255, 255, 255, .32); }
.tlink--dark:hover { color: var(--cyan-2); border-color: var(--cyan-2); }
/* アイコンの丸土台 */
.ic {
display: grid;
place-items: center;
flex: none;
border-radius: 50%;
background: var(--mist);
border: 1px solid var(--line-soft);
}
.ic svg { display: block; }
.ic--sm { width: 38px; height: 38px; }
.ic--sm svg { width: 20px; height: 20px; }
.ic--md { width: 50px; height: 50px; }
.ic--md svg { width: 26px; height: 26px; }
.ic--lg { width: 62px; height: 62px; }
.ic--lg svg { width: 32px; height: 32px; }
.ic--xl { width: 78px; height: 78px; }
.ic--xl svg { width: 40px; height: 40px; }
/* 写真プレースホルダー */
.ph { border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph__ph {
display: grid;
place-items: center;
gap: 12px;
min-height: 220px;
padding: 28px;
text-align: center;
color: var(--ink-mute);
font-size: 13px;
border: 1px dashed var(--line);
border-radius: var(--radius);
}
/* =========================================================
BLOCK01 メインビジュアル（クライアント支給画像）
★トリミングしない。作ったサイズの比率のまま横幅いっぱいに出す。
PC 2400×1000（1920のモニタで1920×800）／ SP 1080×900（iPhone13で390×325）
========================================================= */
.mv { position: relative; background: var(--navy-900); line-height: 0; }
.mv img,
.mv picture { display: block; width: 100%; height: auto; }
/* ---- メインビジュアルに重ねる「お引き受けする範囲」パネル ----
★★2026-09-01：ここに重ねていた相談フォームは .lead-form（ヒーロー直下）へ移した。
先方依頼§5「FVの右側フォームは営業LP感が強い。英語版のように
ブランドメッセージ＋対応範囲を見せる方が企業サイトとしてプレミアム」。
★PCは画像の右側に重ねる。画像の高さ（PC比率 2.4:1）に収める必要があるので中身は詰める。
★★1023px以下では丸ごと出さない（スマホ画像に同じ4枠が焼き込まれているため）。 */
.mv__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
/* ★右端いっぱいだと画像の右の作り込み（検品パネル・コンテナ）が全部隠れ、
左のコピーとも離れすぎる。少し内側へ寄せて重心を中央寄りにする。 */
padding-right: 5%;
pointer-events: none; /* 画像側のクリックを塞がない */
line-height: 1.7;
}
/* 画像に重ねる「お引き受けする範囲」パネル。
★白ベタの箱にしない。フォームと同じ白カードにすると、結局そこだけ浮いて
「営業LPの入力欄」に見える（それを外すのが今回の依頼）。
濃紺のガラス板にして、画像の一部として読ませる。 */
.mv__scope {
pointer-events: auto;
width: 360px;
max-width: 100%;
background: rgba(7, 26, 51, .72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(125, 180, 240, .3);
border-radius: var(--radius-lg);
padding: 20px 22px 18px;
box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
position: relative;
overflow: hidden;
}
.mv__scope::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--cyan-2));
}
.mv__scope-ttl {
font-size: 14px;
font-weight: 700;
color: #fff;
letter-spacing: .1em;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(125, 180, 240, .26);
}
.mv__scope-list { display: grid; gap: 2px; }
.mv__scope-list li {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 13px;
line-height: 1.7;
color: rgba(255, 255, 255, .92);
/* ★2026-09-04：3px→2px。ヒーローのCTA（.mv__btns）を足したぶん、
8行 × 2px ＝ 16px をここで戻している。詰めても行間1.7は変えていない。 */
padding: 2px 0;
}
.mv__scope-list li span {
flex: none;
width: 20px;
font-family: var(--latin);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
color: var(--cyan-2);
}
.mv__scope-note {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(125, 180, 240, .2);
font-size: 11.5px;
line-height: 1.75;
color: rgba(255, 255, 255, .72);
}
/* ---- ヒーロー内の2つのCTA（2026-09-04・依頼書 A4）----
先方＝「EN版は Discuss Your Project / Explore Our Services が分かりやすい。
JP Hero にも問い合わせに直結するボタンを入れてほしい」。
★★同じ2つのボタンは画像直下の .intro__btns にもある。
1024px以上＝ここを出して .intro__btns を隠す／1023px以下＝逆、で必ず片方だけにする
（両方出ると同じボタンが縦に2つ並び、壊れて見える。sp-cta で一度やっている）。
★パネルは画像の高さに収める必要があるので、ボタンは .btn の58pxではなく46px。
360px幅では横並びにすると2行に折れるので、既定は縦積みにしてある。 */
.mv__btns { display: grid; gap: 8px; margin-top: 12px; }
.mv__btns .btn {
width: 100%;
min-height: 46px;
padding: 9px 16px;
font-size: 13.5px;
gap: 8px;
box-shadow: none;
}
/* 濃紺のガラス板の上なので、副ボタンは白ベタではなく枠線＋白文字にする
（.btn--ghost の既定は白背景＝ここでは板の中に白い箱が浮いて見える）。 */
.mv__btns .btn--ghost {
background: rgba(255, 255, 255, .08);
border-color: rgba(160, 205, 250, .5);
color: #fff;
}
.mv__btns .btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: var(--cyan-2); }
/* ラベルなし・プレースホルダーだけの詰めたフォーム */
.cform--hero { max-width: none; display: grid; gap: 8px; }
.cform--hero .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cform--hero input[type="text"],
.cform--hero input[type="email"],
.cform--hero textarea {
width: 100%;
padding: 10px 12px;
font-size: 13.5px;
border: 1px solid var(--line);
border-radius: 8px;
background: #fff;
color: var(--ink);
}
.cform--hero textarea { min-height: 52px; resize: vertical; }
.cform--hero ::placeholder { color: var(--ink-mute); opacity: .9; }
.cform--hero input:focus,
.cform--hero textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(61, 165, 245, .16); }
.cform--hero .cform__agree { margin: 1px 0 0; font-size: 11.5px; gap: 8px; color: var(--ink-soft); }
.cform--hero .cform__agree input { width: 16px; height: 16px; margin-top: .2em; }
/* ★2026-08-31：ボタンの高さは2種類だけにする（先方§6「ボタンサイズを統一」）。
本文中のボタン＝.btn（58px）／狭い場所のボタン＝50px（ヘッダーCTAと同じ）。
ヒーローのフォームは画像の高さに収める必要があるので後者に合わせる。 */
.cform--hero .btn { min-height: 50px; padding: 10px 22px; font-size: 14.5px; }
.cform--hero .cform__note { font-size: 10.5px; line-height: 1.7; color: var(--ink-mute); margin: 0; }
.cform--hero .cform__note a { color: var(--navy-700); border-bottom: 1px solid var(--steel-2); }
/* ★★2026-09-04：しきい値を 1199px → 1279px に上げた。
ヒーローのCTAを足してパネルが 406px → 488px になり、
1200px幅では画像の高さ（1200 × 810/1942 ＝ 501px）に収まらず 6px はみ出していた（実測）。
重ねてよいのは「画像の高さ ＞ パネルの高さ ＋ 上下の余白」が成り立つ幅だけ。
1280px … 画像534px / パネル488px（余白46px）→ 重ねる
1279px以下 … 画像533px以下 → 重ねずに画像の下に置く
★パネルの中身を増やしたら、必ずこの数字を測り直すこと（_check_hero.py）。
★★2026-09-09 変更（吉田さん指摘・D案で決定）。
それまでは `margin-top:-60px` で**画像の下端に60px食い込ませていた**が、
画像の右下にあるトラックとコンテナが切れて見えていた。
これは先方の指示ではなく、09-04 に A4（HeroにCTAを2つ追加）でパネルが 406→488px に伸び、
1280px未満で画像に収まらなくなったときの逃がし方としてこちらで入れたもの。
→ **食い込みをやめ、画像の下に 40px 空けて置く。**
★★同時に `.mv` へ padding-bottom を入れること。**パネルの下端が次のセクションと接していた**
（下のすき間が0pxだった）。上だけ空けると、今度は下が詰まって見える。
下を上より広くしてあるのは、パネル内の下端にボタンが2つ並んでいて重心が下に寄るため。 */
@media (max-width: 1279px) {
/* 画像の高さがパネルに足りないので重ねない。画像の下に置く */
.mv { padding-bottom: 48px; }
.mv__overlay {
position: relative;
inset: auto;
display: block;
padding-right: 0;
margin-top: 40px;
}
.mv__scope { width: 100%; max-width: 560px; margin-inline: auto; }
.mv__scope-list { grid-template-columns: 1fr 1fr; display: grid; gap: 2px 18px; }
/* パネルが560px幅になるので、この帯だけボタンを横並びにする */
.mv__btns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) {
/* ★★この幅から下はパネルを丸ごと出さない。
スマホ画像（1003×1568）の下部に
工場選定・価格交渉／商品仕様・サンプル管理／量産進行・出荷前検品／輸出入・国内納品
の4枠が焼き込まれていて、同じ内容が二重になるため。
★8工程は下の SCOPE OF WORK（#chain）でスマホでも全部読める。情報は欠けない。 */
.mv__overlay { display: none; }
/* ★★上の 1279px ブロックで入れた padding-bottom を必ず戻すこと。
この幅ではパネルを出さないので、残すと画像の下に48pxの濃紺の帯だけができる。 */
.mv { padding-bottom: 0; }
}
@media (max-width: 560px) {
.cform--hero .cform__row { grid-template-columns: 1fr; }
}
/* 画像が届くまでの仮置き。実寸の比率で場所だけ確保する */
.mv__ph {
aspect-ratio: 2400 / 1000;
display: grid;
place-items: center;
color: rgba(255, 255, 255, .86);
line-height: 1.9;
text-align: center;
padding: 24px;
background:
radial-gradient(900px 460px at 78% -10%, rgba(93, 155, 224, .34), transparent 62%),
linear-gradient(150deg, #0A2240 0%, #123C6B 55%, #17529B 100%);
}
.mv__ph-in {
border: 1px dashed rgba(255, 255, 255, .34);
border-radius: var(--radius-lg);
padding: 30px 38px;
background: rgba(255, 255, 255, .05);
}
.mv__ph-ttl { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: .1em; margin-bottom: 8px; }
.mv__ph-size { font-family: var(--latin); font-size: 15px; color: var(--cyan-2); letter-spacing: .04em; }
.mv__ph-note { font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-top: 8px; }
.mv__ph-note b { color: rgba(255, 255, 255, .86); font-weight: 600; }
@media (max-width: 767px) {
.mv__ph { aspect-ratio: 1003 / 1568; }
.mv__ph-in { padding: 22px 20px; }
.mv__ph-ttl { font-size: 16px; }
.mv__ph-size { font-size: 13px; }
.mv__ph-note { font-size: 11.5px; }
}
/* =========================================================
BLOCK01b メイン画像の下（工程 → H1 → CTA）
========================================================= */
/* ★メインビジュアルの世界観をそのまま引き継ぐため、この帯は濃紺のまま続ける。
白地に切り替えると、画像との落差でここから急に大人しく見える
（2026-08-29 吉田さん指摘）。地の方眼と発光は画像側と同じ言語を使う。 */
/* ★★2026-08-31：濃紺 → 白へ転換（吉田さん指示「白の面積を増やす。多少地味でもよい」）。
★同時に、メイン画像の下端が「途中で切られた写真」に見えていた問題も解消する。
画像の紺と .intro の紺が別の色で、境目に線が出ていたのが原因。
白にすると、そこが偶然の切れ目ではなく意図した区切りとして読める。
★2026-08-29 に「画像直下を白にすると大人しく見える」と判断して濃紺にした経緯があるが、
クライアントの修正依頼（全体が暗い）＋吉田さんの再指示により、明るさを優先して反転した。 */
.intro {
position: relative;
padding-block: 74px 86px;
background: var(--bg);
color: var(--ink);
overflow: hidden;
isolation: isolate;
}
.intro::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
radial-gradient(900px 420px at 12% -10%, rgba(61, 165, 245, .09), transparent 62%),
radial-gradient(760px 400px at 92% 108%, rgba(26, 111, 196, .07), transparent 60%),
linear-gradient(rgba(44, 111, 192, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 111, 192, .05) 1px, transparent 1px);
background-size: auto, auto, 56px 56px, 56px 56px;
pointer-events: none;
}
/* 画像との境目。白地になったので、発光ではなく細いシアンの線で受ける */
.intro::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(61, 165, 245, .5), rgba(26, 111, 196, .7), rgba(61, 165, 245, .5), transparent);
z-index: -1;
}
/* --- 引き受ける工程 --- */
.scope-box {
position: relative;
border: 1px solid rgba(125, 180, 240, .22);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .045);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 36px 34px 30px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* 上端を流れる光。データが流れている感じを出す */
.scope-box::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--cyan-deep) 18%, var(--cyan-2) 50%, var(--cyan-deep) 82%, transparent 100%);
background-size: 220% 100%;
animation: pxyFlow 7s linear infinite;
}
@keyframes pxyFlow { from { background-position: 0 0; } to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) { .scope-box::before { animation: none; } }
.scope-box__ttl {
text-align: center;
font-size: 16px;
font-weight: 700;
color: #fff;
letter-spacing: .14em;
margin-bottom: 26px;
}
.scope-box__ttl::after {
content: "";
display: block;
width: 46px; height: 2px;
background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
box-shadow: 0 0 12px var(--glow);
margin: 13px auto 0;
border-radius: 2px;
}
.scope-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.scope-flow li {
position: relative;
display: flex;
align-items: center;
gap: 13px;
background: rgba(10, 34, 64, .5);
border: 1px solid rgba(125, 180, 240, .18);
border-radius: var(--radius);
padding: 15px 16px;
transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.scope-flow li:hover {
border-color: rgba(125, 180, 240, .5);
background: rgba(16, 48, 88, .62);
transform: translateY(-2px);
}
.scope-flow__no {
flex: none;
font-family: var(--latin);
font-size: 16px;
font-weight: 600;
letter-spacing: .02em;
color: var(--cyan-2);
text-shadow: 0 0 14px var(--glow);
padding-right: 13px;
border-right: 1px solid rgba(125, 180, 240, .26);
}
.scope-flow__t { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.scope-box__note {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(125, 180, 240, .18);
text-align: center;
font-size: 14px;
line-height: var(--lh-body);
color: rgba(255, 255, 255, .68);
}
@media (max-width: 1024px) { .scope-flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
.scope-box { padding: 26px 18px 22px; }
.scope-flow { grid-template-columns: 1fr; gap: 8px; }
.scope-flow li { padding: 12px 14px; }
.scope-flow__t { font-size: 13.5px; }
/* 13px だと「…必要はありませ／ん。」と1文字だけ落ちる。
390px幅で1行に収まるところまで詰める（25文字ぶん必要） */
.scope-box__note { font-size: 12px; letter-spacing: -.012em; }
}
/* --- H1・リード・訴求 --- */
/* ★他のセクションの見出しが中央寄せなので、ここも中央に揃える。
左寄せのままだと右側が空いて「左に寄っている」ように見える
（2026-08-29 吉田さん指摘）。 */
.intro__lead { text-align: center; }
.intro__ttl {
font-size: clamp(21px, 2.6vw, 32px);
line-height: 1.58;
margin-bottom: 20px;
color: var(--navy-900);
}
/* 短い訴求を4つ並べる（フォームの横に置くと説得材料になる） */
.intro__marks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px;
margin: 0 0 30px;
}
.intro__marks li {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 15px 7px 12px;
border: 1px solid var(--sky-line);
border-radius: var(--radius-pill);
background: var(--sky-2);
font-size: 13px;
color: var(--navy-800);
}
.intro__marks li::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 8px var(--glow);
flex: none;
}
/* ★「お任せいただける範囲」は全幅に戻したので4列。
一度フォームと2カラムにした名残で2列指定が残っており、
1カラムに戻したあと横に伸びきって間延びしていた（2026-08-29 吉田さん指摘）。 */
.intro__lead .scope-box { margin-bottom: 34px; }
.intro__lead .scope-box__note { font-size: 13.5px; }
.intro__lead .tlink { display: inline-flex; }
.intro__more { margin-top: 4px; text-align: center; }
/* --- 相談フォームのカード --- */
.intro__form {
background: rgba(255, 255, 255, .96);
border: 1px solid rgba(125, 180, 240, .3);
border-radius: var(--radius-lg);
padding: 28px 28px 24px;
box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
position: relative;
overflow: hidden;
}
.intro__form::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--cyan-2));
}
.intro__form-head { margin-bottom: 20px; }
.intro__form-ttl {
font-size: 19px;
font-weight: 700;
color: var(--navy-900);
letter-spacing: .04em;
margin-bottom: 8px;
}
.intro__form-sub { font-size: 12.5px; line-height: var(--lh-body); color: var(--ink-soft); }
/* カード内はフィールドを詰める */
.cform--compact { max-width: none; }
.cform--compact .cform__row { gap: 12px; }
.cform--compact .cform__field { margin-bottom: 12px; }
.cform--compact .cform__label { font-size: 12.5px; margin-bottom: 5px; }
.cform--compact input,
.cform--compact select,
.cform--compact textarea { padding: 11px 13px; font-size: 14px; }
.cform--compact textarea { min-height: 96px; }
.cform--compact .cform__agree { margin: 4px 0 16px; font-size: 12.5px; }
.cform--compact .cform__note { margin-top: 12px; font-size: 11.5px; line-height: var(--lh-body); }
.cform--compact .cform__note a { color: var(--navy-700); border-bottom: 1px solid var(--steel-2); }
@media (max-width: 1080px) {
.intro__top { grid-template-columns: 1fr; gap: 38px; }
.intro__form { max-width: 560px; }
}
@media (max-width: 560px) {
.intro__form { padding: 22px 18px 20px; }
.cform--compact .cform__row { grid-template-columns: 1fr; gap: 0; }
}
/* キーワードは「発光する下線」で示す。
★塗りのマーカー（背景を帯で敷く方式）は、濃紺の上だと
テキスト選択のハイライトに見えてしまう（2026-08-29 実測）。 */
.intro__ttl em {
font-style: normal;
position: relative;
white-space: nowrap;
color: var(--navy-900);
padding-bottom: .14em;
}
.intro__ttl em::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--navy-700), var(--cyan) 50%, var(--navy-700));
}
.intro__txt {
max-width: 46em;
margin: 0 auto 30px;
font-size: 15.5px;
line-height: var(--lh-body);
color: var(--ink-soft);
text-align: center;
}
/* ★2026-08-31：先方の推奨メッセージ（依頼書5-A）。
H1の下に置く「顧客側のメリット」の一文。本文より一段大きく、紺で。 */
.intro__msg {
max-width: 44em;
margin: 0 auto 22px;
font-family: var(--head);
font-size: clamp(16px, 1.9vw, 19px);
line-height: var(--lh-body);
color: var(--navy-800);
text-align: center;
}
.intro__msg em {
font-style: normal;
font-weight: 700;
color: var(--navy-900);
position: relative;
padding-bottom: .1em;
}
/* 濃紺の上で塗りのマーカーを引くとテキスト選択に見えるので、白地でも下線で示す */
.intro__msg em::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--navy-700), var(--cyan));
}
.intro__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; }
/* ★★2026-09-04：1024px以上ではこちらを隠す（依頼書 A4 でヒーローのパネル内へ移したため）。
.mv__overlay が出るのは1024px以上、消えるのは1023px以下なので、境目をそこに合わせている。
★★この打ち消しは必ず上の `display:flex` より**後ろ**に書くこと。
詳細度が同じなので、前に書くと後ろの flex に負けて効かない
（2026-08-31 に .nav__foot で同じ罠を踏んでいる）。
★ここを触るときは .mv__btns 側と必ずセットで見ること。片方だけ直すと
ボタンが2組出る／1組も出ない、のどちらかになる。 */
@media (min-width: 1024px) { .intro__btns { display: none; } }
/* ★白地に転換したので、副ボタンは通常の .btn--outline のままでよい
（以前ここにあった「白抜き」指定は濃紺用だったので削除した）。 */
@media (max-width: 760px) {
.intro { padding-block: 48px 58px; }
.intro__lead { margin-top: 42px; }
/* ★em は nowrap のまま。語の途中で折り返すとマーカーが2行に割れて読みづらい
（2026-08-29 SPで「品質管理・輸／入」と割れた）。級数を下げて収める。 */
.intro__ttl { font-size: 20px; line-height: 1.68; }
.intro__txt { font-size: 14.5px; }
.intro__btns .btn { width: 100%; }
}
/* =========================================================
（旧）ファーストビュー — 現在は未使用。
メインビジュアルを画像に切り替えたため .fv は出力していない。
写真をやめて文字組みに戻す判断になったときのために残してある。
========================================================= */
.fv {
position: relative;
color: #fff;
background: linear-gradient(155deg, #0A2240 0%, #123C6B 52%, #17529B 100%);
overflow: hidden;
}
.fv__bg {
position: absolute;
inset: 0;
/* 方眼＋右上の光。画像を使わずに「図面」の空気を出す */
background-image:
radial-gradient(1000px 520px at 82% -8%, rgba(93, 155, 224, .38), transparent 62%),
radial-gradient(760px 460px at 4% 108%, rgba(10, 34, 64, .55), transparent 60%),
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: auto, auto, 56px 56px, 56px 56px;
pointer-events: none;
}
.fv__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 56px;
align-items: center;
padding-block: 104px 108px;
}
.fv__eyebrow {
font-family: var(--latin);
font-size: 13px;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--cyan-2);
margin-bottom: 22px;
}
.fv__ttl {
color: #fff;
font-size: clamp(28px, 4.2vw, 50px);
line-height: 1.42;
letter-spacing: .005em;
margin-bottom: 26px;
}
/* キーワードは発光する下線で示す（日本語トップの .intro__ttl em と同じ扱い）。
★塗りのマーカーは濃紺の上だとテキスト選択のハイライトに見えるので使わない。 */
.fv__ttl em {
font-style: normal;
position: relative;
white-space: nowrap;
padding-bottom: .1em;
text-shadow: 0 0 26px rgba(61, 165, 245, .6);
}
.fv__ttl em::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
border-radius: 3px;
background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-2) 50%, var(--cyan-deep));
box-shadow: 0 0 18px var(--glow);
}
.fv__lead {
font-size: clamp(15px, 1.55vw, 17px);
line-height: var(--lh-body);
color: rgba(255, 255, 255, .84);
max-width: 40em;
margin-bottom: 34px;
}
.fv__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.fv .btn--ghost {
--btn-fg: #fff;
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .38);
box-shadow: none;
backdrop-filter: blur(2px);
}
.fv .btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.fv__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.fv__chips li {
padding: 7px 20px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: var(--radius-pill);
font-size: 13.5px;
letter-spacing: .08em;
color: rgba(255, 255, 255, .92);
background: rgba(255, 255, 255, .05);
}
.fv__note { margin-top: 14px; font-size: 12.5px; color: rgba(255, 255, 255, .58); line-height: var(--lh-body); }
/* 引き受ける工程のパネル */
.fv__panel {
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: var(--radius-lg);
padding: 30px 30px 26px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.fv__panel-ttl {
font-size: 13px;
letter-spacing: .16em;
color: var(--cyan-2);
margin-bottom: 18px;
font-weight: 600;
}
.fv__chain { display: grid; gap: 2px; }
.fv__chain li {
display: flex;
align-items: center;
gap: 14px;
padding: 9px 0;
font-size: 14.5px;
color: rgba(255, 255, 255, .92);
border-bottom: 1px solid rgba(255, 255, 255, .1);
position: relative;
}
.fv__chain li:last-child { border-bottom: 0; }
.fv__chain span {
flex: none;
width: 30px;
font-family: var(--latin);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
color: var(--cyan-2);
}
.fv__panel-note {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, .16);
font-size: 12.5px;
line-height: 1.9;
color: rgba(255, 255, 255, .68);
}
@media (max-width: 1024px) {
.fv__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 74px 78px; }
.fv__panel { max-width: 560px; }
}
@media (max-width: 760px) {
.fv__inner { padding-block: 56px 62px; }
/* ★em は nowrap のまま（語の途中で折り返すとマーカーが割れて読みづらい）。
代わりに見出しの級数を落として、1行に収まる文字数を確保する。 */
.fv__ttl { font-size: 24.5px; line-height: 1.62; }
.fv__btns .btn { width: 100%; }
.fv__panel { padding: 24px 20px 20px; }
.fv__chain li { font-size: 13.5px; gap: 10px; }
}
/* =========================================================
BLOCK02 課題
========================================================= */
.prob-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.prob-grid li {
background: var(--card);
border: 1px solid var(--line-soft);
border-left: 3px solid var(--cyan-deep);
border-radius: var(--radius);
padding: 26px 26px 24px;
box-shadow: var(--shadow-sm);
}
.prob-grid h3 { font-size: var(--fs-h3); line-height: 1.65; margin-bottom: 10px; }
.prob-grid p { font-size: 14px; color: var(--ink-soft); line-height: var(--lh-body); }
.prob-answer {
margin-top: 40px;
padding: 26px 30px;
background: var(--navy-900);
color: rgba(255, 255, 255, .84);
border-radius: var(--radius);
text-align: center;
font-size: 15.5px;
line-height: var(--lh-body);
}
.prob-answer b { color: #fff; display: block; margin-bottom: 4px; font-size: 17px; }
@media (max-width: 980px) { .prob-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
.prob-grid { grid-template-columns: 1fr; }
.prob-answer { padding: 22px 20px; font-size: 14.5px; }
}
/* =========================================================
BLOCK03 サービス
========================================================= */
.svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.svc {
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 30px 28px 28px;
box-shadow: var(--shadow-sm);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line); }
/* アイコンの土台を発光させる */
.svc .ic {
margin-bottom: 18px;
background: linear-gradient(145deg, #EAF3FD, #D6E7F8);
border-color: rgba(61, 165, 245, .28);
box-shadow: 0 0 0 5px rgba(61, 165, 245, .07);
transition: box-shadow .35s ease, transform .35s ease;
}
.svc:hover .ic {
box-shadow: 0 0 0 6px rgba(61, 165, 245, .14), 0 0 26px rgba(61, 165, 245, .3);
transform: translateY(-1px);
}
.svc h3 { font-size: var(--fs-h3); line-height: 1.6; margin-bottom: 12px; }
.svc p { font-size: 14px; color: var(--ink-soft); line-height: var(--lh-body); }
@media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } .svc { padding: 24px 20px; } }
/* =========================================================
BLOCK04 一括管理の範囲
========================================================= */
.scope-compare {
display: grid;
grid-template-columns: 1fr 64px 1fr;
align-items: stretch;
gap: 0;
}
.scope-card {
border-radius: var(--radius-lg);
padding: 32px 32px 30px;
border: 1px solid var(--line);
}
.scope-card__label {
font-family: var(--latin);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.scope-card h3 { font-size: var(--fs-h3-lg); margin-bottom: 18px; }
.scope-card ul { display: grid; gap: 11px; }
.scope-card li {
position: relative;
padding-left: 26px;
font-size: 14.5px;
line-height: var(--lh-body);
}
.scope-card li::before {
position: absolute;
left: 0; top: .1em;
font-size: 15px;
font-weight: 700;
}
.scope-card--before { background: var(--bg-2); color: var(--ink-soft); }
.scope-card--before .scope-card__label { color: var(--steel); }
.scope-card--before h3 { color: var(--steel); }
.scope-card--before li::before { content: "×"; color: var(--steel-2); }
.scope-card--after {
position: relative;
background:
radial-gradient(680px 320px at 88% -12%, rgba(61, 165, 245, .26), transparent 62%),
var(--navy-900);
border-color: rgba(125, 180, 240, .34);
color: rgba(255, 255, 255, .88);
box-shadow: var(--shadow-lg), 0 0 44px rgba(61, 165, 245, .16);
overflow: hidden;
}
.scope-card--after::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan), var(--cyan-2), transparent);
}
.scope-card--after .scope-card__label { color: var(--cyan-2); }
.scope-card--after h3 { color: #fff; }
.scope-card--after li::before { content: "✓"; color: var(--cyan-2); }
.scope-arrow { display: grid; place-items: center; }
.scope-arrow span {
width: 26px; height: 26px;
border-top: 2px solid var(--steel-2);
border-right: 2px solid var(--steel-2);
transform: rotate(45deg);
}
.scope-note {
margin-top: 34px;
text-align: center;
font-size: 15.5px;
line-height: var(--lh-body);
color: var(--navy-800);
font-weight: 600;
}
@media (max-width: 900px) {
.scope-compare { grid-template-columns: 1fr; }
.scope-arrow { padding: 18px 0; }
.scope-arrow span { transform: rotate(135deg); }
}
@media (max-width: 640px) { .scope-card { padding: 24px 20px; } }
/* =========================================================
BLOCK05 対応国
========================================================= */
.country-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.country {
/* 背景に写真が入ったので、カードは少し不透明にして本文の可読性を確保する */
background: rgba(9, 30, 57, .58);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--radius);
padding: 28px 24px 26px;
display: flex;
flex-direction: column;
}
.country__en {
font-family: var(--latin);
font-size: 12px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--cyan-2);
margin-bottom: 8px;
}
.country h3 { font-size: var(--fs-h3-lg); margin-bottom: 14px; }
.country p { font-size: 13.5px; line-height: var(--lh-body); color: rgba(255, 255, 255, .76); margin-bottom: 20px; flex: 1; }
.country .tlink { font-size: 13px; align-self: flex-start; }
.country-note {
margin-top: 30px;
text-align: center;
font-size: 13px;
color: rgba(255, 255, 255, .58);
line-height: 1.9;
}
@media (max-width: 1024px) { .country-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .country-grid { grid-template-columns: 1fr; } }
/* =========================================================
BLOCK06 選ばれる理由
========================================================= */
.reason-list { display: grid; gap: 20px; max-width: 1060px; margin-inline: auto; }
.reason {
display: flex;
gap: 26px;
align-items: flex-start;
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 28px 32px;
box-shadow: var(--shadow-sm);
}
/* ---- 写真つきの理由カード ----
写真と本文の2カラム。奇数・偶数で左右を入れ替えて、縦に読んだとき単調にしない。 */
.reason--photo {
display: grid;
grid-template-columns: 360px 1fr;
gap: 0;
align-items: stretch;
padding: 0;
overflow: hidden;
transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.reason--photo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.reason__img { position: relative; overflow: hidden; background: var(--mist); }
.reason__img img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reason--photo:hover .reason__img img { transform: scale(1.05); }
/* 写真と本文の境目に、紺からのグラデーションを重ねて馴染ませる */
.reason__img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(10, 34, 64, .28) 0%, transparent 42%, rgba(255, 255, 255, .5) 100%);
pointer-events: none;
}
.reason--photo .reason__body { padding: 30px 34px; }
.reason--photo:nth-child(even) { direction: rtl; }
.reason--photo:nth-child(even) > * { direction: ltr; }
.reason--photo:nth-child(even) .reason__img::after {
background: linear-gradient(270deg, rgba(10, 34, 64, .28) 0%, transparent 42%, rgba(255, 255, 255, .5) 100%);
}
.reason--photo .reason__no { display: block; margin-bottom: 6px; }
/* ---- 写真の代わりに置く図解パネル（2026-08-31）----
★地色と方眼はここ（親）に持たせる。SVG 側に敷くと、meet で余った領域との
境目が線になって出る。SVG は透明なまま中央に置く。
★写真が支給されたら .reason__img--fig を外して ![]()
に戻すだけでよい。 */
.reason__img--fig {
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background-color: #EDF4FC;
background-image:
linear-gradient(135deg, rgba(255, 255, 255, .85) 0%, rgba(220, 234, 249, .9) 100%),
repeating-linear-gradient(0deg, rgba(44, 111, 192, .07) 0 1px, transparent 1px 45px),
repeating-linear-gradient(90deg, rgba(44, 111, 192, .07) 0 1px, transparent 1px 45px);
}
.reason__img--fig .fig {
width: 100%;
height: auto;
max-height: 100%;
display: block;
transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reason--photo:hover .reason__img--fig .fig { transform: scale(1.04); }
/* 図の上に紺のオーバーレイを重ねると線が沈むので、ここだけごく薄くする */
.reason__img--fig::after {
background: linear-gradient(90deg, rgba(10, 34, 64, .07) 0%, transparent 40%, rgba(255, 255, 255, .35) 100%);
}
.reason--photo:nth-child(even) .reason__img--fig::after {
background: linear-gradient(270deg, rgba(10, 34, 64, .07) 0%, transparent 40%, rgba(255, 255, 255, .35) 100%);
}
@media (max-width: 860px) {
.reason--photo { grid-template-columns: 1fr; padding: 0; gap: 0; }
/* ★aspect-ratio は「枠」ではなく ![]()
自身に指定する。
枠に aspect-ratio を置いて中の img を height:100% にすると、
WebKit（Safari/iPhone）だけ枠の幅が 0 に潰れて写真が消える
（2026-08-29 iPhone 13 で実測。Chromeでは正常に出るので気付きにくい）。 */
.reason__img { aspect-ratio: auto; }
.reason__img img { aspect-ratio: 16 / 9; height: auto; }
/* 図解パネルも同じ考え方で、比率は SVG 自身に指定する（枠には置かない） */
.reason__img--fig { padding: 14px 16px; }
.reason__img--fig .fig { aspect-ratio: 16 / 9; height: auto; max-height: none; }
.reason__img::after {
background: linear-gradient(180deg, rgba(10, 34, 64, .2) 0%, transparent 45%, rgba(255, 255, 255, .45) 100%) !important;
}
.reason__img--fig::after {
background: linear-gradient(180deg, rgba(10, 34, 64, .05) 0%, transparent 45%, rgba(255, 255, 255, .3) 100%) !important;
}
.reason--photo .reason__body { padding: 22px 22px 26px; }
.reason--photo:nth-child(even) { direction: ltr; }
}
.reason__no {
flex: none;
font-family: var(--latin);
font-size: 40px;
font-weight: 600;
line-height: 1;
letter-spacing: .01em;
padding-top: 2px;
}
.reason h3 { font-size: var(--fs-h3); margin-bottom: 9px; }
.reason p { font-size: 14.5px; color: var(--ink-soft); line-height: var(--lh-body); }
@media (max-width: 640px) {
/* ★写真つきカードには効かせない。padding が復活して写真の枠が崩れる。 */
.reason:not(.reason--photo) { flex-direction: column; gap: 10px; padding: 24px 20px; }
.reason__no { font-size: 24px; }
}
/* =========================================================
BLOCK07 対応業界
========================================================= */
.ind-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.ind-grid li {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 24px 24px 22px;
background: var(--card);
}
.ind-grid h3 {
font-size: var(--fs-h3);
margin-bottom: 9px;
padding-bottom: 9px;
border-bottom: 1px solid var(--sky-line);
}
.ind-grid p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; }
/* ---- 写真つきの製品カテゴリカード ---- */
.ind--photo {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ind--photo:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--steel-soft); }
/* ★aspect-ratio は ![]()
自身に置く。枠に置いて img を height:100% にすると
WebKit（Safari/iPhone）で枠の幅が 0 に潰れる。 */
.ind__img { overflow: hidden; background: var(--mist); }
.ind__img img {
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.ind--photo:hover .ind__img img { transform: scale(1.06); }
.ind--photo .ind__body { padding: 20px 22px 22px; flex: 1; }
.ind--photo h3 { margin-bottom: 10px; padding-bottom: 10px; }
/* ---- アイコン版の対応領域カード（2026-08-31）----
★特定商品の写真を外した差し替え（先方依頼）。写真素材を用意せずに成立させる。
★このカードは写真が無いぶん、上端の発光ラインとアイコンの土台で温度を作る。 */
.ind-grid--icon li {
padding: 0;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ind-grid--icon li:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-line); }
.ind-grid--icon .ind__body {
padding: 26px 24px 24px;
/* 明るいブルーをカード内にも一面入れて、白ばかりにしない */
background-image: radial-gradient(360px 150px at 0% 0%, rgba(61, 165, 245, .10), transparent 66%);
}
.ind-grid--icon .ind__ic { margin-bottom: 14px; }
.ind-grid--icon h3 { font-size: var(--fs-h3); }
.ind-note {
margin-top: 26px;
text-align: center;
font-size: 14px;
line-height: var(--lh-body);
color: var(--ink-soft);
}
/* =========================================================
BLOCK06b 品質管理（2026-08-31）
★先方依頼「品質管理を独立した強みとして。検品だけでなく6段階の流れを見せたい」。
★写真は使っていない。実際の工場・検品・梱包の写真が支給されたら
各 .qc の先頭にサムネイルを足せる（カードの上端に入れる想定）。
========================================================= */
.qc-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
counter-reset: qc;
}
.qc {
position: relative;
padding: 28px 24px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.qc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-line); }
/* 上端に走る光（他のカードと同じ演出に揃える） */
.qc::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 100%; height: 2px;
background: linear-gradient(90deg, var(--cyan-deep), var(--cyan), var(--cyan-2));
transform: scaleX(0);
transform-origin: left center;
transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.qc:hover::before { transform: scaleX(1); }
.qc__no {
position: absolute;
top: 16px; right: 20px;
font-family: var(--latin);
font-size: 34px;
font-weight: 600;
line-height: 1;
color: var(--navy-900);
opacity: .1;
}
.qc__ic { margin-bottom: 14px; }
.qc h3 {
font-size: var(--fs-h3);
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--sky-line);
}
.qc p { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
@media (max-width: 900px) { .qc-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .qc-list { grid-template-columns: 1fr; } }
/* =========================================================
BLOCK07b 支援事例（2026-08-31）
★明るいブルーの面。白ばかりにせず、前後のセクションとも重ならない地色にする。
========================================================= */
.cases-sec {
background-color: var(--sky-2);
background-image:
radial-gradient(760px 360px at 12% 0%, rgba(61, 165, 245, .09), transparent 62%),
radial-gradient(680px 340px at 92% 100%, rgba(26, 111, 196, .06), transparent 60%);
}
/* ダミー掲載中の注意書き。目立たないと差し替え忘れの元になるので、はっきり出す */
.demo-note {
max-width: 860px;
margin: 0 auto 32px;
padding: 14px 20px;
border: 1px dashed var(--steel);
border-radius: var(--radius);
background: rgba(122, 141, 163, .10);
color: var(--ink);
font-size: 13.5px;
line-height: 1.9;
text-align: center;
}
.demo-note b { color: var(--navy-800); }
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case {
position: relative;
display: flex;
flex-direction: column;
padding: 26px 24px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--card);
box-shadow: var(--shadow-sm);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-line); }
/* ★実案件に差し替えるときは、この SAMPLE バッジも必ず消す */
.case__badge {
position: absolute;
top: 0; right: 18px;
transform: translateY(-50%);
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--steel);
color: #fff;
font-family: var(--latin);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .16em;
}
.case__cat {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .1em;
color: var(--cyan-deep);
margin-bottom: 8px;
}
.case__ttl {
font-size: var(--fs-h3);
line-height: 1.6;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line-soft);
}
.case__rows { display: grid; gap: 13px; }
.case__row dt {
display: inline-block;
margin-bottom: 5px;
padding: 2px 9px;
border-radius: 4px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
}
.case__row--problem dt { background: var(--bg-3); color: var(--ink-soft); }
.case__row--action dt { background: rgba(61, 165, 245, .16); color: var(--navy-800); }
.case__row--result dt { background: var(--navy-700); color: #fff; }
.case__row dd { font-size: 13.5px; line-height: 1.9; color: var(--ink-soft); }
@media (max-width: 980px) { .cases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
.cases { grid-template-columns: 1fr; }
.demo-note { font-size: 12.5px; padding: 12px 16px; text-align: left; }
}
@media (max-width: 900px) { .ind-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ind-grid { grid-template-columns: 1fr; } }
/* =========================================================
BLOCK08 流れ
========================================================= */
.flow-list { max-width: 880px; margin-inline: auto; display: grid; gap: 0; }
.flow-list li {
display: flex;
gap: 26px;
align-items: flex-start;
padding: 24px 0 26px 0;
position: relative;
}
.flow-list li:not(:last-child)::after {
content: "";
position: absolute;
left: 22px; top: 54px; bottom: -2px;
width: 2px;
background: linear-gradient(180deg, rgba(61, 165, 245, .5), rgba(61, 165, 245, .08));
}
.flow-list__no {
flex: none;
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
background: linear-gradient(140deg, var(--navy-700), var(--cyan-deep));
color: #fff;
font-family: var(--latin);
font-size: 14.5px;
font-weight: 600;
letter-spacing: .04em;
position: relative;
z-index: 1;
box-shadow: 0 0 0 4px rgba(61, 165, 245, .12), 0 6px 18px rgba(13, 38, 68, .22);
}
.flow-list h3 { font-size: var(--fs-h3); margin-bottom: 8px; padding-top: 9px; }
.flow-list p { font-size: 14.5px; color: var(--ink-soft); line-height: var(--lh-body); }
@media (max-width: 560px) {
.flow-list li { gap: 16px; }
.flow-list li:not(:last-child)::after { left: 17px; top: 44px; }
.flow-list__no { width: 36px; height: 36px; font-size: 12.5px; }
.flow-list h3 { font-size: 16px; padding-top: 5px; }
}
/* ★2026-09-01：ここから先は上の8工程（SCOPE OF WORK）で説明済み、と示す一文。
同じ内容を2回書かないための受け渡し。 */
.flow-after {
max-width: 880px;
margin: 6px auto 0;
padding: 16px 20px;
border-radius: var(--radius);
background: var(--sky-2);
border: 1px solid var(--sky-line);
font-size: 13.5px;
line-height: var(--lh-body);
color: var(--ink-soft);
}
.flow-after a { color: var(--cyan-deep); font-weight: 700; border-bottom: 1px solid var(--sky-line); }
/* =========================================================
BLOCK09 費用
========================================================= */
.fee {
/* ★2026-08-31：1920pxで画面の46%しか使えず痩せて見えたので少し広げた（先方§6） */
max-width: 1000px;
margin-inline: auto;
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 40px 40px 36px;
box-shadow: var(--shadow);
text-align: center;
}
.fee__label {
display: inline-block;
padding: 6px 18px;
border-radius: var(--radius-pill);
background: var(--mist);
color: var(--navy-800);
font-size: 12.5px;
letter-spacing: .1em;
margin-bottom: 16px;
}
.fee__main { font-size: clamp(20px, 2.6vw, 27px); color: var(--navy-900); font-weight: 700; line-height: 1.4; }
/* 料率はページ内で最も大きい数字にする。ここが判断の分かれ目なので迷わせない */
.fee__main em {
display: block;
font-style: normal;
font-size: clamp(40px, 6vw, 66px);
font-family: var(--latin);
font-weight: 600;
letter-spacing: 0;
line-height: 1.15;
margin-top: 6px;
filter: drop-shadow(0 4px 22px rgba(61, 165, 245, .26));
}
.fee__sub { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.fee__tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 30px 0 24px;
}
.fee__tiers li {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px 14px;
background: var(--bg-2);
}
.fee__tiers b {
display: block;
font-family: var(--latin);
font-size: 19px;
color: var(--navy-700);
margin-bottom: 7px;
letter-spacing: .02em;
}
.fee__tiers span { font-size: 12.5px; color: var(--ink-soft); line-height: var(--lh-body); display: block; }
.fee__note {
font-size: 13.5px;
color: var(--ink-soft);
line-height: var(--lh-body);
text-align: left;
padding: 20px 0 24px;
border-top: 1px solid var(--line-soft);
}
/* 初回相談の扱い（2026-09-01・先方依頼§8）。
★★「無料」を大きく出す意匠にしない。無料の範囲と有償の範囲を同じ級数で1つの箱に置く。
無料だけ強調すると、有償作業との境目が伝わらず景表法上あぶない。
★トップの費用セクション・お問い合わせページで共用する。 */
.fee__free,
.contact-free {
margin: 18px 0 0;
padding: 13px 16px;
border-radius: var(--radius);
background: var(--sky-2);
border: 1px solid var(--sky-line);
font-size: 13.5px;
line-height: var(--lh-body);
color: var(--ink);
text-align: left;
}
.contact-free { max-width: 900px; margin: 0 auto 26px; }
@media (max-width: 640px) {
.fee { padding: 28px 20px 26px; }
.fee__tiers { grid-template-columns: 1fr; gap: 10px; }
.fee .btn { width: 100%; }
}
/* =========================================================
BLOCK10 会社概要
========================================================= */
/* ★2026-08-31：1920pxで画面の43%しか使えず痩せて見えたので少し広げた（先方§6）。
広げすぎると1行が長くなって読みにくいので 960px で止める。 */
.comp { max-width: 960px; margin-inline: auto; }
.comp__table { border-top: 1px solid var(--line); }
.comp__table > div {
display: grid;
grid-template-columns: 170px 1fr;
gap: 20px;
padding: 17px 6px;
border-bottom: 1px solid var(--line);
}
.comp__table dt { font-size: 14px; color: var(--navy-800); font-weight: 600; }
.comp__table dd { font-size: 14.5px; color: var(--ink); line-height: 1.9; }
@media (max-width: 640px) {
.comp__table > div { grid-template-columns: 1fr; gap: 4px; padding: 15px 4px; }
.comp__table dt { font-size: 12.5px; color: var(--ink-mute); }
}
/* =========================================================
フッター直前のCTA
========================================================= */
.foot-cta {
background-color: #123C6B;
background-image:
linear-gradient(150deg, rgba(10, 34, 64, .90) 0%, rgba(18, 60, 107, .88) 55%, rgba(23, 82, 155, .86) 100%),
/* ★bg-cta だけ jpg のまま。WebP にすると逆に +15% になった（2026-09-01 実測）。
「WebP化」は形式で決めず、1枚ずつ実測して小さくなるものだけ差し替えること。 */
url("../images/bg-cta.jpg");
background-size: cover;
background-position: center 62%;
background-repeat: no-repeat;
color: #fff;
padding-block: 86px;
text-align: center;
}
.foot-cta__eyebrow {
font-family: var(--latin);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(255, 255, 255, .72);
margin-bottom: 18px;
}
.foot-cta__ttl { color: #fff; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.55; margin-bottom: 18px; }
.foot-cta__txt {
max-width: 40em;
margin: 0 auto 32px;
font-size: 15px;
line-height: var(--lh-body);
color: rgba(255, 255, 255, .84);
}
.foot-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.foot-cta .btn--ghost {
--btn-fg: #fff;
background: rgba(255, 255, 255, .08);
border-color: rgba(255, 255, 255, .42);
box-shadow: none;
}
.foot-cta .btn--ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
@media (max-width: 640px) {
.foot-cta { padding-block: 58px; }
.foot-cta__btns .btn { width: 100%; }
}
/* フッターのNAP */
.foot-nap { margin-top: 18px; display: grid; gap: 7px; }
.foot-nap > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; }
/* ★2026-09-01：「主要製造・調達ネットワーク」は 76px の dt 列に収まらないので、
この行だけ上下に積む。★ラベルを短縮して意味を削るのではなく、組み方で解く。 */
.foot-nap__net { grid-template-columns: 1fr !important; gap: 3px !important; }
.foot-nap dt { font-size: 11.5px; color: rgba(255, 255, 255, .5); letter-spacing: .06em; padding-top: 2px; }
.foot-nap dd { font-size: 13px; color: rgba(255, 255, 255, .8); line-height: var(--lh-body); }
.foot-nap a { color: rgba(255, 255, 255, .9); border-bottom: 1px solid rgba(255, 255, 255, .25); }
/* スキップリンク */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--navy-900);
color: #fff;
padding: 12px 20px;
border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
/* =========================================================
下層ページ共通の見出し（2026-08-29 追加）
★トップのメインビジュアルと同じ濃紺＋方眼で、下層でも世界観を切らさない。
========================================================= */
.page-head {
position: relative;
background: var(--ink-deep);
color: rgba(255, 255, 255, .86);
overflow: hidden;
isolation: isolate;
}
.page-head__bg {
position: absolute;
inset: 0;
z-index: -1;
background-image:
radial-gradient(900px 420px at 14% -20%, rgba(61, 165, 245, .24), transparent 62%),
radial-gradient(760px 400px at 88% 120%, rgba(26, 111, 196, .24), transparent 60%),
linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
background-size: auto, auto, 56px 56px, 56px 56px;
pointer-events: none;
}
.page-head__inner { padding-block: 74px 78px; text-align: center; }
.page-head__en {
font-family: var(--latin);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--cyan-2);
margin-bottom: 14px;
}
.page-head__ttl { color: #fff; font-size: clamp(26px, 4vw, 42px); line-height: 1.5; margin-bottom: 18px; }
.page-head__lead {
max-width: 40em;
margin-inline: auto;
font-size: 15px;
line-height: var(--lh-body);
color: rgba(255, 255, 255, .8);
text-align: left;
}
@media (max-width: 760px) {
.page-head__inner { padding-block: 48px 52px; }
.page-head__lead { font-size: 14.5px; }
}
/* ---- お問い合わせページ ---- */
.contact-points {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 52px;
}
.contact-points li {
display: flex;
gap: 16px;
align-items: flex-start;
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
padding: 24px 22px;
box-shadow: var(--shadow-sm);
}
.contact-points h3 { font-size: var(--fs-h3); line-height: 1.6; margin-bottom: 8px; }
.contact-points p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.9; }
@media (max-width: 900px) { .contact-points { grid-template-columns: 1fr; } }
.contact-wrap {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 40px 40px 34px;
}
.cform__alert--warn {
background: #FFF7E8;
border: 1px solid #E8CE9B;
color: #7A5510;
max-width: var(--read);
margin-inline: auto;
}
.contact-info { max-width: var(--read); margin: 56px auto 0; }
.contact-info h2 { font-size: 20px; margin-bottom: 18px; text-align: center; }
.contact-info__note { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--ink-mute); line-height: var(--lh-body); }
@media (max-width: 640px) {
.contact-wrap { padding: 26px 18px 24px; }
.contact-points li { padding: 20px 18px; }
}
/* =========================================================
BLOCK01c 工程チェーン（スクロール連動）
★画面に固定したまま、スクロール量に応じて 01→08 へ進む。
★JSが動かなくても8工程は全部見えている（is-on が動かないだけ）。
========================================================= */
/* ★★2026-08-31：濃紺 → 明るい面へ転換。
このセクションだけでページ全体の約15%を占める最大の暗いブロックだったので、
「全体が暗い」への効き目がいちばん大きい。
★演出（スクロール連動・レールが伸びる・現在地が光る）はそのまま。
光り方だけ、白地で成立する濃さに置き換えている。 */
.chain {
position: relative;
background: var(--bg-2);
color: var(--ink);
}
.chain::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(900px 460px at 6% 8%, rgba(61, 165, 245, .10), transparent 62%),
radial-gradient(820px 440px at 96% 92%, rgba(26, 111, 196, .08), transparent 60%),
linear-gradient(rgba(44, 111, 192, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(44, 111, 192, .045) 1px, transparent 1px);
background-size: auto, auto, 56px 56px, 56px 56px;
pointer-events: none;
}
/* スクロール量を稼ぐための空き。
★2026-09-01：240vh（1工程30vh）→ 190vh（1工程24vh）に詰めた。
先方依頼⑦「トップページは少し長い」への対応のひとつ。
このセクションだけでページの約18%を占めていたため、いちばん効く。
8工程が順に切り替わる動き自体は変わらない（1工程あたりの移動量が減るだけ）。 */
.chain__scroll { height: 190vh; pointer-events: none; }
.chain__sticky {
position: sticky;
/* ★2026-09-18 先方「PCで通常スクロールしたときに不自然な余白が出ないか」（4回目）。
以前は min-height:100vh で中身を上下中央に置いていたため、画面の縦が長いほど
見出しの上下に「空の面」ができ、入りと抜けで大きな空白として見えていた
（1920x1080で約200px、縦長モニタ1080x1800では約700px）。
→ 箱は中身の高さだけにし、固定中に画面の中央へ来るよう top を JS（main.js）で渡す。
JSが無いときは従来どおりヘッダー直下（84px）に止まる。 */
top: var(--chain-top, 84px);
z-index: 1;
padding-block: 54px 44px;
display: flex;
align-items: center;
}
.chain__head { margin-bottom: 40px; }
.chain__head h2 { font-size: clamp(21px, 2.7vw, 34px); }
.chain__stage {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
gap: 54px;
align-items: center;
}
/* --- 左：現在の工程の説明（重ねて切り替える） --- */
.chain__detail { position: relative; min-height: 216px; }
.chain__panel {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(14px);
transition: opacity .45s ease, transform .45s ease;
pointer-events: none;
}
.chain__panel.is-on { opacity: 1; transform: none; pointer-events: auto; }
.chain__panel-no {
font-family: var(--latin);
font-size: clamp(54px, 7vw, 88px);
font-weight: 600;
line-height: 1;
letter-spacing: .01em;
margin-bottom: 12px;
/* ★白地では cyan-2(#7FC4FF) が飛ぶので、紺寄りのグラデーションに差し替え */
background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 45%, var(--cyan-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 4px 18px rgba(26, 111, 196, .18));
}
.chain__panel-ttl { color: var(--navy-900); font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 14px; }
.chain__panel-txt { font-size: 15px; line-height: var(--lh-body); color: var(--ink-soft); max-width: 34em; }
/* --- 右：8工程のリスト --- */
.chain__list { position: relative; padding-left: 30px; }
.chain__rail {
position: absolute;
left: 5px; top: 12px; bottom: 12px;
width: 2px;
background: var(--sky-line);
border-radius: 2px;
}
.chain__rail-fill {
display: block;
width: 100%;
height: 0;
border-radius: 2px;
background: linear-gradient(180deg, var(--navy-700), var(--cyan));
box-shadow: 0 0 10px rgba(61, 165, 245, .55);
transition: height .25s ease-out;
}
.chain__item {
position: relative;
display: flex;
align-items: baseline;
gap: 12px;
padding: 10px 0;
/* ★--ink-mute だと白地でコントラスト 2.90 しか出ない（実測）。
8工程は「まだ来ていない」ものも含めて全部が読ませたい情報なので --ink-soft（5.49）にする。
現在地との区別は、色ではなく紺＋太字＋ドットの発光で付ける。 */
color: var(--ink-soft);
transition: color .3s ease, transform .3s ease;
}
.chain__dot {
position: absolute;
left: -30px; top: 1.05em;
width: 11px; height: 11px;
margin-top: -5px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--steel-2);
transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.chain__no {
font-family: var(--latin);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .06em;
flex: none;
width: 22px;
}
.chain__t { font-size: 15.5px; line-height: 1.6; }
.chain__item.is-on { color: var(--navy-900); font-weight: 700; transform: translateX(3px); }
.chain__item.is-on .chain__no { color: var(--cyan-deep); }
.chain__item.is-on .chain__dot {
background: var(--cyan-deep);
border-color: var(--cyan);
box-shadow: 0 0 0 5px rgba(61, 165, 245, .18), 0 0 14px rgba(61, 165, 245, .5);
transform: scale(1.15);
}
.chain__item.is-done { color: var(--ink-soft); }
.chain__item.is-done .chain__dot { background: var(--navy-600); border-color: var(--navy-600); }
.chain__note {
margin-top: 38px;
text-align: center;
font-size: 13.5px;
line-height: 1.9;
color: var(--ink-soft);
}
@media (max-width: 1024px) {
.chain__stage { grid-template-columns: 1fr; gap: 32px; }
.chain__detail { min-height: 190px; }
}
/* --- スマホ用の説明文。PCでは左のパネル(.chain__detail)が出るのでこちらは隠す --- */
.chain__d { display: none; }
/* ★狭い画面と「視差効果を減らす」設定では、画面固定（sticky）をやめて
縦に積んだタイムラインにする。情報は同じ。
★★2026-09-01 全面修正（先方依頼②「スマホでアニメーションが止まっている」）
ここには2つの不具合があった。
1. .chain__item の文字色が rgba(255,255,255,.88) ＝ 白のまま残っていた。
08-31 にこのセクションを濃紺→明るい地色(--bg-2)へ反転したときの消し忘れで、
スマホでは「白地に白文字」になり8工程がほぼ読めない状態だった。
2. .chain__rail-fill を height:100% !important で塗り切り、
JS側も 900px以下では return して何もしていなかった。
＝スマホでは最初から全部点灯した静止画で、動きようがなかった。
→ 文字色を白地用に戻し、レールはJSで進捗ぶんだけ伸ばす方式に変える。
アクティブな工程はスクロール位置（画面の中央付近にある工程）で決まる。 */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
.chain__scroll { display: none; }
.chain__sticky { position: static; min-height: 0; padding-block: var(--sec-pad-sp) var(--sec-pad-sp); display: block; }
.chain__detail { display: none; }
.chain__stage { grid-template-columns: 1fr; }
/* ★白地の上に置くので、文字色は本文と同じ系統に戻す（白のままだと読めない） */
.chain__item {
color: var(--ink-soft);
padding: 14px 0 16px;
display: block;
}
.chain__item .chain__dot { background: var(--white); border-color: var(--steel-2); }
.chain__no { display: inline-block; width: auto; margin-right: 10px; color: var(--steel); }
.chain__t { font-size: 16px; font-weight: 700; color: var(--navy-800); }
/* スマホでは説明文をリストの中に出す（PCの左パネルの代わり）。
★既定は「見えている」。動きが付くのは色と余白だけなので、
JSが落ちても8工程の説明は全部読める。 */
.chain__d {
display: block;
margin-top: 6px;
font-size: 13.5px;
line-height: var(--lh-body);
/* ★★現在地との差は opacity で付けない。
.62 まで薄めるとコントラストが 2.8 まで落ちて読めなくなる（実測・白地）。
ここは「読ませたい本文」なので、待機中でも --ink-soft（5.49）を下回らせない。
動いていることは、下の帯・ドットの発光・見出しの濃さで示す。 */
color: var(--ink-soft);
}
/* 現在地は背景の帯とドットの発光で示す（文字を薄くしない） */
.chain__item {
border-radius: 10px;
padding-left: 12px;
margin-left: -12px;
transition: background-color .4s ease, color .3s ease;
}
.chain__item.is-on {
transform: none;
background: linear-gradient(90deg, rgba(61, 165, 245, .12), rgba(61, 165, 245, 0) 78%);
}
.chain__item.is-on .chain__t { color: var(--navy-900); }
.chain__item.is-on .chain__d { color: var(--ink); }
.chain__item.is-on .chain__no { color: var(--cyan-deep); }
}
/* ★JSが動いていないあいだ（またはJS無効時）はレールを塗り切っておく。
JSは初期化時に .chain--js を付けて、そこからは進捗ぶんだけ伸ばす。
＝「JSが落ちるとレールが空のまま」に倒れないようにするための保険。 */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
.chain__rail-fill { height: 100%; }
.chain--js .chain__rail-fill { height: 0; }
}
/* 「動きを減らす」設定のときは、切り替わり方だけを瞬間にする。
★★2026-09-08 修正（先方から2回目の指摘「スマホで8工程が動かない」）。
ここで `.chain--js .chain__rail-fill { height: 100% }` を書いていたため、
reduce の端末では JS が進捗で入れる height が打ち消され、
**工程01のまま塗り切りの静止画**になっていた（JS側も同時に return していた）。
iPhone「視差効果を減らす」／Android「アニメーションを削除」＋**省電力モード**で
この状態になるので、実機の2機種とも動かないという報告になる。
→ 高さの指定は外し、transition を切るだけにする。
＝現在地は動く（情報）／なめらかには動かない（装飾）。
★JS側の分岐条件（main.js の stacked）と、上の @media の条件を必ず一致させること。 */
@media (prefers-reduced-motion: reduce) {
.chain--js .chain__rail-fill { transition: none; }
.chain__item { transition: none; }
}
/* =========================================================
仕上げ3点セット（2026-08-29）
1. 見出しの背後に大きな英文
2. カードが順番に立ち上がる
3. セクションの境界を斜めの光にする
========================================================= */
/* 1. 背後の大きな英文 */
.sec-head { position: relative; }
.sec-head[data-en]::before {
content: attr(data-en);
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -58%);
font-family: var(--latin);
font-size: clamp(64px, 11vw, 168px);
font-weight: 600;
letter-spacing: .04em;
line-height: 1;
white-space: nowrap;
color: rgba(10, 34, 64, .045);
pointer-events: none;
z-index: -1;
}
.sec--dark .sec-head[data-en]::before,
.sec-head--dark[data-en]::before { color: rgba(255, 255, 255, .045); }
.sec-head > * { position: relative; }
/* 2. 順番に立ち上がる */
.svc-grid > .reveal,
.prob-grid > .reveal,
.ind-grid > .reveal,
.country-grid > .reveal,
.reason-list > .reveal,
.flow-list > .reveal { transition-delay: 0ms; }
.svc-grid > .reveal:nth-child(2),
.prob-grid > .reveal:nth-child(2),
.ind-grid > .reveal:nth-child(2),
.country-grid > .reveal:nth-child(2),
.reason-list > .reveal:nth-child(2),
.flow-list > .reveal:nth-child(2) { transition-delay: 70ms; }
.svc-grid > .reveal:nth-child(3),
.prob-grid > .reveal:nth-child(3),
.ind-grid > .reveal:nth-child(3),
.country-grid > .reveal:nth-child(3),
.reason-list > .reveal:nth-child(3),
.flow-list > .reveal:nth-child(3) { transition-delay: 140ms; }
.svc-grid > .reveal:nth-child(4),
.prob-grid > .reveal:nth-child(4),
.ind-grid > .reveal:nth-child(4),
.country-grid > .reveal:nth-child(4),
.reason-list > .reveal:nth-child(4),
.flow-list > .reveal:nth-child(4) { transition-delay: 210ms; }
.svc-grid > .reveal:nth-child(5),
.prob-grid > .reveal:nth-child(5),
.ind-grid > .reveal:nth-child(5),
.reason-list > .reveal:nth-child(5),
.flow-list > .reveal:nth-child(5) { transition-delay: 280ms; }
.svc-grid > .reveal:nth-child(n+6),
.prob-grid > .reveal:nth-child(n+6),
.ind-grid > .reveal:nth-child(n+6),
.flow-list > .reveal:nth-child(n+6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
.svc-grid > .reveal, .prob-grid > .reveal, .ind-grid > .reveal,
.country-grid > .reveal, .reason-list > .reveal, .flow-list > .reveal { transition-delay: 0ms !important; }
}
/* 3. セクション境界を斜めの光に */
.sec--alt::after,
.problems::after {
width: min(880px, 92%);
height: 2px;
background: linear-gradient(90deg, transparent, rgba(61, 165, 245, .18) 18%, rgba(61, 165, 245, .55) 50%, rgba(61, 165, 245, .18) 82%, transparent);
transform: translateX(-50%) skewX(-24deg);
filter: blur(.2px);
}
/* ★暗い面に置く見出しは h2 も白にする。
.sec--dark を持たないセクション（.chain 等）で見出しが濃紺のまま沈んでいた
（2026-08-29 実測）。 */
.sec-head--dark h2,
.sec-head--dark h3 { color: #fff; }
/* 工程チェーンの左右の間を詰める（中央に空白が空いて見えた）
★★必ず min-width で囲うこと。囲わずに書くと、上にある
「900px以下は1カラム」のメディアクエリを後から上書きしてしまい、
スマホで右カラムの幅が 0 になって本文が縦一列（1文字ずつ）になる。
2026-08-29 に実機（iPhone）で発生。 */
@media (min-width: 901px) {
.chain__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; }
}
.chain__head[data-en]::before { transform: translate(-50%, -64%); }
/* =========================================================
数字バンド
★出す数字は現行サイトに実記載のある事実だけ。裏の取れない実績値は置かない。
========================================================= */
/* ★2026-08-31：濃紺 → 明るいブルーの帯へ。前後（サービス／一括管理）と地色を変えて
「帯」として読ませつつ、暗い面積を減らす。 */
.stats {
position: relative;
background: var(--bg-3);
padding-block: 54px;
overflow: hidden;
}
.stats::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(760px 320px at 20% 0%, rgba(61, 165, 245, .16), transparent 62%),
radial-gradient(700px 320px at 84% 100%, rgba(26, 111, 196, .12), transparent 60%);
pointer-events: none;
}
.stats__list {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.stats__list li {
text-align: center;
padding: 6px 12px;
border-left: 1px solid var(--sky-line);
}
.stats__list li:first-child { border-left: 0; }
.stats__n {
display: block;
font-family: var(--latin);
font-weight: 600;
line-height: 1;
font-size: clamp(38px, 4.6vw, 60px);
letter-spacing: .01em;
margin-bottom: 10px;
/* ★白地では #9CC9F5 / cyan-2 が飛ぶので紺寄りに差し替え */
background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-700) 45%, var(--cyan-deep) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 4px 16px rgba(26, 111, 196, .18));
}
.stats__n em { font-style: normal; font-size: .38em; margin-left: 4px; letter-spacing: .04em; }
.stats__l { display: block; font-size: 14px; font-weight: 700; color: var(--navy-900); letter-spacing: .06em; margin-bottom: 5px; }
.stats__s { display: block; font-size: 12px; line-height: var(--lh-body); color: var(--ink-soft); }
@media (max-width: 860px) {
.stats { padding-block: 40px; }
.stats__list { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
.stats__list li:nth-child(odd) { border-left: 0; }
}
@media (max-width: 460px) {
.stats__list { grid-template-columns: 1fr; }
.stats__list li { border-left: 0; border-top: 1px solid rgba(125, 180, 240, .18); padding-top: 20px; }
.stats__list li:first-child { border-top: 0; padding-top: 6px; }
}
/* =========================================================
4つの強み（2026-09-01・数字バンドの置き換え）
★先方依頼⑥「4カ国・8工程・3言語・1社という数字はグローバル感を弱める。
ONE CONTACT / MULTI-COUNTRY SOURCING / JAPANESE-STANDARD QC /
END-TO-END MANAGEMENT 等の強みに置き換える」。
★帯（.stats）の地色・光は流用する。中身だけ数字→英字ラベル＋日本語に差し替え。
★英字ラベルは長さがばらばら（ONE CONTACT と MULTI-COUNTRY SOURCING）なので、
数字のときのような中央揃えはやめて左揃えにする。中央だと折り返しで行頭が揃わない。
========================================================= */
.pillars {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.pillars li {
padding: 22px 20px;
background: rgba(255, 255, 255, .74);
border: 1px solid rgba(125, 180, 240, .28);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.pillar__en {
display: block;
font-family: var(--latin);
font-size: 11px;
font-weight: 600;
letter-spacing: .13em;
line-height: 1.5;
color: var(--cyan-deep);
margin-bottom: 10px;
/* 英字ラベルの下に短い発光ライン（サイト内の eyebrow と同じ扱い） */
padding-bottom: 10px;
border-bottom: 1px solid var(--sky-line);
}
.pillar__ttl {
display: block;
font-family: var(--head);
font-size: var(--fs-h3);
font-weight: 700;
line-height: 1.6;
color: var(--navy-900);
margin-bottom: 8px;
}
.pillar__txt {
display: block;
font-size: 13px;
line-height: var(--lh-body);
color: var(--ink-soft);
}
@media (max-width: 1024px) {
.pillars { grid-template-columns: 1fr 1fr; gap: 18px; }
}
@media (max-width: 560px) {
.pillars { grid-template-columns: 1fr; gap: 14px; }
.pillars li { padding: 18px 16px; }
}
/* =========================================================
グローバルネットワーク：世界地図＋主要4ヵ国
★★2026-09-01 作り直し（先方依頼⑤「4カ国だけの会社に見えないように。
世界地図を薄く背景表示し、主要ネットワークは明るく、他地域は薄い点・ラインで」）。
以前は地理を持たない抽象ノード図だった。
★点描の世界地図は ![]()
（netmap-dots.png・透過）、その上に同じ viewBox の
SVG を重ねる。両方とも 1000:490 なので、位置合わせは aspect-ratio だけで済む。
========================================================= */
.netmap {
position: relative;
max-width: 1040px;
margin: 0 auto 22px;
aspect-ratio: 1000 / 490;
}
.netmap__world {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
/* 地図はあくまで背景。主役は上に載せる4ヵ国のノード。
★.30 だと「世界地図を薄く表示」の意図より薄すぎて、写真の質感に埋もれた（実測）。 */
opacity: .44;
}
.netmap__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
overflow: visible;
}
/* --- 案件に応じたパートナー連携（薄い点線＋小さい点） ---
★ここに国名ラベルは付けない。付けると常設の拠点があるように読まれる。 */
.netmap__thin {
fill: none;
/* ★点描の地図の上を通るので、.30 / 1px だと完全に埋もれた（実測）。
主要ルート（実線＋発光）とは、色ではなく「点線であること」で区別する。 */
stroke: rgba(148, 196, 245, .5);
stroke-width: 1.3;
stroke-dasharray: 4 7;
stroke-linecap: round;
}
.netmap__spot {
fill: rgba(160, 205, 250, .78);
stroke: rgba(125, 180, 240, .22);
stroke-width: 4;
}
/* --- 凡例。図の意味は必ず文字でも書く --- */
.netmap-legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 28px;
margin: 0 auto 42px;
font-size: 12.5px;
line-height: 1.7;
color: rgba(255, 255, 255, .72);
}
.netmap-legend li { display: flex; align-items: center; gap: 9px; }
.netmap-legend li::before {
content: "";
flex: none;
width: 10px; height: 10px;
border-radius: 50%;
}
.netmap-legend__main::before {
background: var(--cyan-2);
box-shadow: 0 0 0 4px rgba(61, 165, 245, .22);
}
.netmap-legend__sub::before {
background: rgba(125, 180, 240, .5);
box-shadow: 0 0 0 3px rgba(125, 180, 240, .14);
}
@media (max-width: 640px) {
.netmap-legend { font-size: 12px; gap: 8px 16px; justify-content: flex-start; }
}
.netmap__route {
fill: none;
stroke: url(#pxyRoute);
stroke-width: 2.2;
stroke-linecap: round;
stroke-dasharray: 10 220;
animation: pxyRouteFlow 4.6s linear infinite;
animation-delay: calc(var(--i) * 1.1s);
opacity: .85;
transition: stroke-width .3s ease, opacity .3s ease;
}
@keyframes pxyRouteFlow {
from { stroke-dashoffset: 230; }
to { stroke-dashoffset: 0; }
}
/* 動きを減らす設定では、線を実線で静止させる（情報は同じ） */
@media (prefers-reduced-motion: reduce) {
.netmap__route { animation: none; stroke-dasharray: none; opacity: .5; }
}
.netmap__node {
fill: #0A2240;
stroke: var(--cyan);
stroke-width: 2.4;
transition: fill .3s ease, r .3s ease, filter .3s ease;
}
.netmap__label {
fill: #fff;
font-family: var(--head);
font-size: 15px;
font-weight: 700;
letter-spacing: .06em;
/* ★点描の地図の上に置くので、濃紺の縁を付けないと文字が地図に埋もれる。
paint-order:stroke で「縁 → 塗り」の順に描く（縁が文字を侵食しない）。 */
paint-order: stroke;
stroke: rgba(7, 26, 51, .85);
stroke-width: 3.5;
stroke-linejoin: round;
}
.netmap__label--hub { fill: #fff; font-size: 17px; }
.netmap__hub { fill: var(--cyan-2); }
.netmap__hub-ring {
fill: none;
stroke: rgba(125, 196, 255, .5);
stroke-width: 1.6;
/* ★日本のノード座標（_netmap_coords.json）。ノードを動かしたらここも直す。 */
transform-origin: 423.9px 209.1px;
animation: pxyHubPulse 3.2s ease-out infinite;
}
@keyframes pxyHubPulse {
0% { transform: scale(.65); opacity: .85; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .netmap__hub-ring { animation: none; opacity: .4; } }
/* 国カードにマウスを乗せると、その国のルートだけ強く光る */
.netmap__route.is-hot { stroke-width: 3.6; opacity: 1; filter: url(#pxyGlow); }
.netmap__node.is-hot { fill: var(--cyan); r: 9; filter: url(#pxyGlow); }
/* ★viewBox が 1000 なので、375px幅では 1単位＝0.375px にしかならない。
font-size 15 のままだと実寸 5.6px で読めない。幅ごとに級数を上げる。
★ノードの半径・線幅も同じ理由で上げる（1px の線が 0.4px になり消える）。 */
@media (max-width: 900px) {
.netmap { max-width: none; margin-bottom: 18px; }
.netmap__world { opacity: .34; }
.netmap__label { font-size: 24px; stroke-width: 5; }
.netmap__label--hub { font-size: 27px; }
.netmap__node { r: 8; stroke-width: 3.2; }
.netmap__route { stroke-width: 3; }
.netmap__base { stroke-width: 2; }
.netmap__spot { r: 4.5; }
.netmap__thin { stroke-width: 1.6; stroke-dasharray: 4 7; }
}
@media (max-width: 560px) {
.netmap__label { font-size: 32px; stroke-width: 6; }
.netmap__label--hub { font-size: 36px; }
.netmap__node { r: 10; }
.netmap__hub { r: 11; }
.netmap__route { stroke-width: 4; }
.netmap__spot { r: 5.5; }
}
/* 経路の下地。流れる光だけだと静止時に線が見えない。
★2026-09-01：点描の世界地図の上に乗るようになったので、.26／1.4px では消えた。
主要ネットワークは「はっきり見える実線」であることが凡例の説明と対応している。 */
.netmap__base {
fill: none;
stroke: rgba(125, 196, 255, .62);
stroke-width: 2.2;
stroke-linecap: round;
}
/* =========================================================
生産国の比較表
★中身は現行サイトの実記載のみ。ロット・リードタイム等の未確認値は書かない。
========================================================= */
.cmp { margin-top: 44px; }
.cmp__ttl {
text-align: center;
font-size: 15px;
font-weight: 700;
color: #fff;
letter-spacing: .12em;
margin-bottom: 20px;
}
.cmp__ttl::after {
content: "";
display: block;
width: 40px; height: 2px;
margin: 12px auto 0;
border-radius: 2px;
background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
box-shadow: 0 0 10px var(--glow);
}
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp__table {
width: 100%;
min-width: 720px;
border-collapse: separate;
border-spacing: 0;
background: rgba(9, 30, 57, .55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: 1px solid rgba(125, 180, 240, .2);
border-radius: var(--radius);
overflow: hidden;
}
.cmp__table th,
.cmp__table td {
padding: 15px 18px;
text-align: left;
vertical-align: top;
font-size: 13.5px;
line-height: var(--lh-body);
border-bottom: 1px solid rgba(125, 180, 240, .16);
border-right: 1px solid rgba(125, 180, 240, .12);
}
.cmp__table tr:last-child th,
.cmp__table tr:last-child td { border-bottom: 0; }
.cmp__table th:last-child,
.cmp__table td:last-child { border-right: 0; }
.cmp__table thead th {
background: rgba(23, 82, 155, .34);
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: .06em;
text-align: center;
}
.cmp__table thead th:first-child { background: transparent; }
.cmp__table tbody th {
width: 150px;
color: var(--cyan-2);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .04em;
background: rgba(255, 255, 255, .03);
white-space: nowrap;
}
.cmp__table td { color: rgba(255, 255, 255, .82); }
.cmp__table td b { color: #fff; font-weight: 700; }
.cmp__note {
margin-top: 16px;
font-size: 12.5px;
line-height: 1.9;
color: rgba(255, 255, 255, .58);
text-align: center;
}
@media (max-width: 760px) {
.cmp__table th, .cmp__table td { padding: 13px 14px; font-size: 13px; }
.cmp__table tbody th { width: 120px; }
}
/* ★2026-09-28：タブレット（761〜900px）では枠が 664〜800px で min-width 720px に届かず、
右端の「タイ」列が切れて横スクロールでしか読めなかった（iPad縦 768px で実測）。この幅だけ最小幅を外して枠に収める。 */
@media (min-width: 761px) and (max-width: 900px) {
.cmp__table { min-width: 0; }
.cmp__table th, .cmp__table td { padding: 13px 14px; }
.cmp__table tbody th { width: 120px; }
}
/* ★背後の大きな英文が、狭い画面で横スクロールを発生させていた
（2026-08-29 iPhone 13 で scrollWidth 426 / 実測）。
nowrap なので画面幅を超えても折り返さない。級数を落としたうえで、
見出しの箱の外にはみ出した分は切り落とす。 */
.sec-head { overflow: hidden; }
@media (max-width: 900px) {
.sec-head[data-en]::before { font-size: clamp(34px, 8.4vw, 58px); }
}
@media (max-width: 560px) {
.sec-head[data-en]::before { font-size: 34px; letter-spacing: .02em; }
}
/* ★数字バンドは4つとも同じ級数・1行に収める。
「10%〜17%」のまま出すと4つ目だけ2行になり並びが崩れていた（2026-08-29 指摘）。
単位の % を em 側へ出して「10〜17 + %」にすると、他の3つと同じ形で1行に収まる。
級数は落とさない（落とすと4つ目だけ小さく見えて、別の意味で揃わない）。 */
.stats__n { white-space: nowrap; }
/* ★スマホで相談フォームが画面の端から端まで来て窮屈だった（2026-08-29 実機）。
入力欄を少し詰める。
★2026-09-01：フォームは .lead-form（ヒーロー直下）へ移したので、
.mv__overlay 側の指定はもう要らない（この幅では display:none）。 */
@media (max-width: 560px) {
.cform--hero { gap: 7px; }
.cform--hero input[type="text"],
.cform--hero input[type="email"] { padding: 9px 12px; font-size: 13px; }
.cform--hero .btn { min-height: 46px; font-size: 14px; }
}
/* =========================================================
ヒーロー直下の簡易フォーム（2026-09-01・先方依頼§5）
★メインビジュアルから外したフォームの移転先。
ファーストビューは画像だけにして、問い合わせ導線はその直下に置く。
★左に説明・右にフォームの2カラム。1カラムで縦に積むと
「入力欄がいきなり来る」形になって、外したはずの営業LP感が戻る。
========================================================= */
.lead-form {
background: var(--bg-2);
padding-block: 46px;
border-bottom: 1px solid var(--line-soft);
}
.lead-form__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
gap: 44px;
align-items: center;
}
.lead-form__ttl {
font-family: var(--head);
font-size: clamp(19px, 2.2vw, 25px);
font-weight: 700;
line-height: 1.65;
color: var(--navy-900);
margin-bottom: 12px;
}
.lead-form__sub { font-size: 14.5px; line-height: var(--lh-body); color: var(--ink-soft); }
/* 初回相談の費用についての一文（pxy_free_consultation_note）。
★「無料」だけが目立つ体裁にしない。範囲まで含めて1つの箱で読ませる。 */
.lead-form__free {
margin-top: 14px;
padding: 11px 14px;
border-radius: var(--radius);
background: var(--sky-2);
border: 1px solid var(--sky-line);
font-size: 13px;
line-height: var(--lh-body);
color: var(--ink);
}
.lead-form__form {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 20px 22px 18px;
box-shadow: var(--shadow);
}
.lead-form__form .cform__alert { font-size: 11.5px; padding: 8px 11px; margin-bottom: 11px; line-height: 1.7; }
@media (max-width: 900px) {
.lead-form { padding-block: 36px; }
.lead-form__inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
.lead-form__form { padding: 18px 15px 15px; border-radius: var(--radius); }
.lead-form__free { font-size: 12.5px; }
}
/* 数字バンドの見出し */
.stats__head { position: relative; text-align: center; margin-bottom: 32px; }
.stats__head .eyebrow { color: var(--cyan-deep); }
.stats__head h2 {
color: var(--navy-900);
font-size: clamp(19px, 2.2vw, 26px);
line-height: 1.5;
margin-top: 10px;
}
@media (max-width: 560px) { .stats__head { margin-bottom: 24px; } }
/* =====================================================================
日本＝Management Hub（2026-09-09 先方回答1-1）
★★日本を製造候補3か国と同列に見せないための差分。
・国カード .country--hub … 役割バッジを出し、枠色を変える
・比較表の下 .cmp-hub … 「比較の外にある役割」として別ブロックで出す
・地図の凡例 .netmap-legend__hub … 日本だけ別の凡例にする
★このセクション（#network）は濃紺の上なので、色はすべて白地前提で書かないこと。
===================================================================== */
.country--hub {
background: rgba(9, 30, 57, .72);
border-color: rgba(127, 196, 255, .42);
}
/* ★★`.country__role` 単体だと `.country p`（詳細度0,1,1・色と flex:1 を持つ）に負ける。
バッジが白文字のまま縦に伸びる。必ず `.country` を前に付けて詳細度を上げること。
[[css_parent_p_specificity_trap]] と同じ型。 */
.country .country__role {
display: inline-block;
align-self: flex-start;
flex: none;
font-family: var(--latin);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.5;
color: var(--navy-900);
background: var(--cyan-2);
border-radius: 999px;
padding: 4px 11px;
margin: 0 0 14px;
}
.netmap-legend__hub::before {
background: var(--white);
box-shadow: 0 0 0 4px rgba(127, 196, 255, .34);
}
.cmp-hub {
margin-top: 26px;
padding: 24px 26px;
border: 1px solid rgba(127, 196, 255, .34);
border-radius: var(--radius);
background: rgba(9, 30, 57, .5);
}
.cmp-hub__ttl {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
font-weight: 700;
font-size: 16px;
line-height: 1.6;
color: var(--white);
margin-bottom: 16px;
}
.cmp-hub__badge {
flex: none;
font-family: var(--latin);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
color: var(--navy-900);
background: var(--cyan-2);
border-radius: 999px;
padding: 4px 11px;
}
.cmp-hub__list > div {
display: grid;
grid-template-columns: 128px 1fr;
gap: 4px 18px;
padding: 11px 0;
border-top: 1px solid rgba(255, 255, 255, .13);
}
.cmp-hub__list > div:first-child { border-top: 0; padding-top: 0; }
.cmp-hub__list dt {
font-size: 12.5px;
font-weight: 700;
letter-spacing: .02em;
color: var(--cyan-2);
line-height: 1.8;
}
.cmp-hub__list dd {
font-size: 13.5px;
line-height: var(--lh-body);
color: rgba(255, 255, 255, .82);
}
.cmp-hub .tlink { margin-top: 16px; }
/* ★ラベル列を横に置けるのは広い幅だけ。狭いと dt が2行に割れて読みにくくなる */
@media (max-width: 700px) {
.cmp-hub { padding: 20px 18px; }
.cmp-hub__ttl { font-size: 15px; }
.cmp-hub__list > div { grid-template-columns: 1fr; gap: 3px; }
}
/* =====================================================================
比較表のスマホ表示＝国別カード（2026-09-09 先方§6）
「Global Network比較表はスマホでは国別カード表示を推奨。横スクロール表だけにしない」
★★表とカードは同じ配列から出している（pxy_country_compare）。中身は必ず一致する。
★★display:none は支援技術のツリーからも外れるので、**どの幅でも読まれるのは片方だけ**。
aria-hidden を足すと、逆にその幅で誰にも読めない要素が出るので付けないこと。
★しきい値 760px は既存の `.cmp__table` のSP調整と同じ。ここを変えるなら両方見ること。
===================================================================== */
.cmp-cards { display: none; }
@media (max-width: 760px) {
/* ★2026-09-28：以前は .cmp__scroll を全部隠していたため、カード版の無い比較表（/oem/ /itaku/ /logistics/ /en/oem/）が
スマホで丸ごと消えていた。隠すのはカード版がある国別の表だけにする。 */
.cmp__scroll--has-cards { display: none; }
/* カード版の無い表（どれも「項目＋2列」）は、横スクロールさせずに画面内に収める */
.cmp__scroll:not(.cmp__scroll--has-cards) .cmp__table { min-width: 0; }
.cmp__scroll:not(.cmp__scroll--has-cards) .cmp__table th,
.cmp__scroll:not(.cmp__scroll--has-cards) .cmp__table td { padding: 11px 10px; font-size: 12.5px; overflow-wrap: anywhere; }
.cmp__scroll:not(.cmp__scroll--has-cards) .cmp__table tbody th { width: 88px; white-space: normal; font-size: 12px; overflow-wrap: anywhere; }
.cmp__scroll:not(.cmp__scroll--has-cards) .cmp__table thead th { font-size: 13px; letter-spacing: .02em; }
.cmp-cards { display: grid; gap: 14px; }
.cmp-card {
border: 1px solid rgba(255, 255, 255, .2);
border-radius: var(--radius);
background: rgba(9, 30, 57, .5);
padding: 18px 18px 16px;
}
.cmp-card__ttl {
font-size: 15.5px;
font-weight: 700;
color: var(--white);
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.cmp-card__list > div { padding: 9px 0; }
.cmp-card__list > div + div { border-top: 1px solid rgba(255, 255, 255, .1); }
.cmp-card__list dt {
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
color: var(--cyan-2);
margin-bottom: 3px;
}
/* ★本文は15px以上（先方§6「本文は原則15〜16px以上」）。
表のときは13pxまで落としていたが、カードなら横幅に余裕があるので落とさなくてよい */
.cmp-card__list dd {
font-size: 15px;
line-height: var(--lh-body);
color: rgba(255, 255, 255, .84);
}
.cmp-card__list dd b { color: var(--white); }
}
/* =====================================================================
スマホの本文サイズ（2026-09-09 先方§6）。方針は lower.css の同名ブロックを参照。
本文＝15px／注記＝14px。ラベル・バッジ・英字の小見出しは対象外。
===================================================================== */
@media (max-width: 768px) {
.sec-head .lead--sub,
.intro__txt,
.fv__chips li,
.fv__chain li,
.prob-grid p,
.prob-answer,
.svc p,
.scope-card li,
.country p,
.reason p,
.ind-grid p,
.qc p,
.case__row dd,
.flow-list p,
.flow-after,
.fee__sub,
.contact-free,
.comp__table dd,
.page-head__lead,
.contact-points p,
.chain__d,
.pillar__txt,
.cmp-hub__list dd,
.lead-form__sub { font-size: 15px; }
.chain__note,
.country-note,
.ind-note,
.fee__note,
.cmp__note,
.demo-note,
.contact-info__note,
.netmap-legend,
.lead-form__free { font-size: 14px; }
}
/* 2026-09-09 §6 追い込み。1周目の一覧から漏れていたもの（実測で拾った） */
@media (max-width: 768px) {
.intro__marks li { font-size: 15px; }
/* ★ヒーロー内の注記が10.5pxだった。注記でも小さすぎる */
.cform--hero .cform__note,
.cform--compact .cform__note,
.lead-form__form .cform__alert,
.fv__note,
.fv__panel-note,
.mv__scope-note { font-size: 14px; }
}
/* ★フッターの住所・営業時間・TEL・主要ネットワークは「読ませる情報」。13pxは小さい（§6）。
★★main.css に書いて一度効かなかった。読み込み順が main.css → pxy.css なので、
pxy.css にある元の指定（13px）に後勝ちで負ける。**打ち消しは同じか後のファイルに書く。** */
@media (max-width: 768px) {
.foot-nap dd { font-size: 15px; }
}
/* 「掲載イメージ（ダミー）」の注記と事例カードのすき間（2026-09-09）。
16pxしかなく注記がカードに寄っていた。★このブロックは公開切替で消える（PXY_UNDER_CONSTRUCTION）。 */
.cases-sec .demo-note { margin-bottom: 30px; }
/* ③ 8工程へ受け渡す一文（.flow-after）が3ステップの直後6pxで密着していた（2026-09-09） */
.flow-list + .flow-after { margin-top: 22px; }