/* ジャパンテクニカル トップページ モック（A案・B案 共通CSS） */
:root {
  --navy: #0d3b8c;
  --navy-d: #082a66;
  --blue: #1c5fc6;
  --green: #38a437;
  --yellow: #f6c500;
  --red: #d8222f;
  --ink: #12223f;
  --mute: #6c7b92;
  --soft: #eef4fb;
  --line: #d9e3f1;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 60px; }
.latin { font-family: 'Jost', 'Noto Sans JP', sans-serif; }

/* ダミーテキスト（モックの灰色バー） */
.dl { display: block; height: 9px; border-radius: 2px; background: #dde3ec; margin: 10px 0; }
.dl.w40 { width: 40%; } .dl.w55 { width: 55%; } .dl.w70 { width: 70%; } .dl.w85 { width: 85%; } .dl.w100 { width: 100%; }
.dl.on-dark { background: rgba(255, 255, 255, .28); }

/* ---------- ヘッダー ---------- */
.hdr { position: relative; z-index: 20; background: #fff; }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { height: 46px; width: auto; }
.logo b { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.nav { display: flex; align-items: center; gap: 30px; font-size: 13px; font-weight: 700; color: var(--navy); }
.nav a:hover { color: var(--blue); }
.lang { font-size: 12px; font-weight: 500; color: var(--navy); letter-spacing: .08em; }

/* ---------- ボタン ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; height: 48px; padding: 0 24px; border-radius: 4px; font-size: 14px; font-weight: 700; border: 1.5px solid var(--navy); color: var(--navy); background: #fff; transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(13, 59, 140, .6); }
.btn--fill { background: var(--navy); color: #fff; }
.btn--sm { height: 36px; font-size: 12px; padding: 0 16px; border-radius: 3px; }
.btn--white { background: #fff; color: var(--navy); border-color: #fff; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .8); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- 見出し ---------- */
.eyebrow { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--blue); text-transform: uppercase; margin: 0 0 6px; }
.sec-title { font-size: 30px; font-weight: 900; color: var(--navy); margin: 0; line-height: 1.35; letter-spacing: .01em; }
.sec { padding: 56px 0; }
.sec--soft { background: linear-gradient(180deg, #eef4fb, #f6f9fd); }

/* ---------- 黄色い弧（スウッシュ） ---------- */
.swoosh { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; z-index: 3; }
.swoosh svg { width: 100%; height: 100%; display: block; }

/* ---------- ヒーロー ---------- */
.hero { position: relative; overflow: hidden; }
.hero--a { min-height: 660px; background: radial-gradient(circle at 78% 20%, #eef5ff 0, #fff 55%); }
.hero--a .copy { position: relative; z-index: 5; padding: 72px 0 150px; width: 48%; }
.hero h1 { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.22; font-weight: 900; margin: 0 0 18px; color: var(--navy); letter-spacing: .01em; }
.hero .en { font-size: 22px; color: var(--navy); margin: 0 0 22px; font-weight: 500; }
.hero .cta { display: flex; gap: 14px; margin: 34px 0 20px; }
.hero .note { font-size: 15px; font-weight: 500; color: var(--navy); }
.hero--a .globe-stage { position: absolute; right: max(24px, calc((100% - 1240px) / 2 + 40px)); top: -6px; width: 600px; z-index: 4; }

.hero--b { min-height: 560px; color: #fff; background: #0a2d6e; }
.hero--b .bg { position: absolute; inset: 0; background: url('/images/embedded/7a88d40f4832.jpg') center 38% / cover; }
.hero--b .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 28, 78, .92) 0, rgba(8, 40, 105, .72) 48%, rgba(8, 40, 105, .25) 100%); }
.hero--b .hdr-over { position: relative; z-index: 6; }
.hero--b .copy { position: relative; z-index: 5; padding: 70px 0 150px; width: 62%; }
.hero--b h1 { color: #fff; }
.hero--b .en { color: #fff; }
.hero--b .note { color: #fff; }
.hero--b .btn { border-color: #fff; color: #fff; background: transparent; }
.hero--b .btn--fill { background: var(--blue); border-color: var(--blue); }
.hdr--over { background: transparent; }
.hdr--over .logo b, .hdr--over .nav, .hdr--over .lang { color: #fff; }

/* ---------- 必要なところへ ---------- */
.photos { display: grid; gap: 10px; }
.photos--3 { grid-template-columns: repeat(3, 1fr); }
.photos--4 { grid-template-columns: repeat(4, 1fr); }
.ph { margin: 0; }
.ph .img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; background: #cfd8e6; }
.ph .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ph:hover .img img { transform: scale(1.04); }
.ph figcaption { padding-top: 12px; font-size: 18px; font-weight: 900; color: var(--navy); }
.ph figcaption .dl { margin: 10px 0 0; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 24px; }
.head-row .tag { font-size: 12px; color: var(--mute); display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.head-row .tag::after { content: ''; width: 150px; height: 1px; background: #9fb0c8; }
.badge { display: inline-block; background: var(--yellow); color: var(--navy); font-size: 14px; font-weight: 900; padding: 6px 16px; border-radius: 999px; margin-left: 14px; vertical-align: middle; }

/* ---------- 数字で見る成長 ---------- */
.growth { display: grid; grid-template-columns: 1fr 1.1fr 1.15fr; gap: 40px; align-items: center; }
.growth .txt .dl { max-width: 360px; }
.bars { display: flex; align-items: flex-end; gap: 16px; height: 190px; padding: 0 20px; border-bottom: 1px solid #b9c6da; position: relative; margin: 0 auto; width: max-content; }
.bars .b { width: 38px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--green), var(--blue)); position: relative; transform-origin: bottom; animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.bars .b:nth-child(1) { height: 20%; animation-delay: .05s; } .bars .b:nth-child(2) { height: 38%; animation-delay: .15s; }
.bars .b:nth-child(3) { height: 56%; animation-delay: .25s; } .bars .b:nth-child(4) { height: 76%; animation-delay: .35s; } .bars .b:nth-child(5) { height: 100%; animation-delay: .45s; }
.bars .b span { position: absolute; bottom: -24px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--mute); font-weight: 700; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.donuts { display: flex; align-items: center; gap: 22px; padding-left: 40px; border-left: 1px solid #d4deec; }
.donut { text-align: center; }
.donut .lbl { font-size: 11px; font-weight: 700; color: var(--navy); letter-spacing: .08em; margin: 8px 0; }
.donut .ring { width: 150px; aspect-ratio: 1; border-radius: 50%; position: relative; }
.donut .ring::after { content: ''; position: absolute; inset: 23%; border-radius: 50%; background: #fff; }
.donut.before .ring { background: conic-gradient(var(--green) 0 46%, var(--yellow) 46% 70%, var(--navy) 70% 86%, #1f8fb5 86% 100%); }
.donut.after .ring { background: conic-gradient(var(--yellow) 0 30%, var(--green) 30% 66%, var(--blue) 66% 100%); }
.donuts .arrow { width: 0; height: 0; border-left: 10px solid var(--navy); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.dummy-tag { display: inline-block; margin-top: 14px; font-size: 10px; letter-spacing: .1em; color: var(--mute); border: 1px solid #c7d2e2; padding: 2px 8px; border-radius: 2px; background: #fff; }

/* ---------- 拠点と本社（円形図） ---------- */
.network { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.network .txt .dl { max-width: 440px; }
.org { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin-left: auto; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 34% 24%, #fff 0, #eaf3fd 52%, #cfe2f8 100%);
  box-shadow: inset 0 0 0 2px rgba(120, 170, 235, .55), 0 24px 50px -28px rgba(20, 80, 180, .55); }
.org .c { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; font-weight: 900; font-size: 22px; line-height: 1.25; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45), inset 0 -6px 12px rgba(0, 0, 0, .12); animation: float 5s ease-in-out infinite; }
.org .c small { display: block; font-size: 11px; font-weight: 700; margin-top: 4px; }
.org .c1 { left: 10%; top: 14%; background: radial-gradient(circle at 35% 30%, #3f86e8, var(--navy)); }
.org .c2 { left: 35%; top: 20%; background: radial-gradient(circle at 35% 30%, #63c45a, #2c8f33); animation-delay: -1.6s; }
.org .c3 { left: 60%; top: 14%; background: radial-gradient(circle at 35% 30%, #ffe35c, var(--yellow)); color: var(--navy); animation-delay: -3.2s; }
.org .bowl { position: absolute; left: -3%; right: -3%; bottom: -3%; height: 48%; background: linear-gradient(180deg, #1456b8, var(--navy-d)); border-radius: 0 0 50% 50% / 0 0 100% 100%;
  -webkit-mask: radial-gradient(ellipse 54% 40% at 50% -6%, transparent 97%, #000 100%); mask: radial-gradient(ellipse 54% 40% at 50% -6%, transparent 97%, #000 100%); }
.org .hq { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; color: #fff; }
.org .hq b { display: block; font-size: 26px; font-weight: 900; }
.org .hq span { font-size: 14px; font-weight: 500; }
@keyframes float { 50% { transform: translateY(-6px); } }
.dotmap { position: relative; width: 100%; aspect-ratio: 1.5; -webkit-mask: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 75% 75% at 50% 50%, #000 55%, transparent 100%); }
.dotmap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- ロードマップ ---------- */
.roadmap { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.road { position: relative; padding-top: 4px; }
.road .steps { display: grid; grid-template-columns: 1fr 1.1fr 220px; gap: 28px; align-items: start; position: relative; }
.road .steps::before { content: ''; position: absolute; left: 10px; right: 8px; top: 12px; height: 3px; background: linear-gradient(90deg, var(--navy), var(--blue)); }
.road .steps::after { content: ''; position: absolute; right: 0; top: 4px; border-left: 14px solid var(--blue); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.step { position: relative; padding-top: 34px; font-size: 14px; }
.step .dot { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); z-index: 2; }
.step .dot.fill { background: var(--navy); }
.step .dot.green { background: var(--green); border-color: var(--green); }
.step time { display: block; font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 4px; }
.step strong { display: block; font-weight: 700; font-size: 15px; color: var(--ink); }
.step small { display: block; margin-top: 10px; color: var(--mute); font-size: 14px; line-height: 1.7; }
.goal { position: relative; text-align: left; padding-top: 0; }
.goal .ring { width: 96px; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--yellow); background: radial-gradient(circle, #fff 0 14%, #1c5fc6 16% 62%, #0d3b8c 64%); box-shadow: 0 10px 24px -10px rgba(13, 59, 140, .7); animation: pulse 2.8s ease-in-out infinite; }
.goal .tag { position: absolute; right: 0; top: -34px; font-size: 11px; border: 1px solid #c7d2e2; padding: 2px 10px; border-radius: 2px; color: var(--mute); background: #fff; }
.goal b { display: block; margin-top: 8px; font-size: 17px; font-weight: 900; color: var(--navy); }
.goal span { font-size: 14px; font-weight: 700; color: var(--navy); }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(246, 197, 0, .22), 0 10px 24px -10px rgba(13, 59, 140, .7); } }
.road-banner { margin-top: 26px; padding: 12px 24px; text-align: center; font-size: 15px; font-weight: 700; color: var(--navy); background: linear-gradient(90deg, #dbe9fb, #edf4fd 50%, #dbe9fb); border-radius: 999px; letter-spacing: .04em; }
.road-banner i { font-style: normal; color: var(--blue); margin: 0 14px; letter-spacing: -.1em; }

/* ---------- 理念 ---------- */
.philo { position: relative; overflow: hidden; min-height: 330px; }
.philo .txt { position: relative; z-index: 3; width: 48%; padding: 56px 0 56px; }
.philo .photo { position: absolute; right: 0; top: 0; bottom: 0; width: 58%; background: url('/images/embedded/ca07bc1526df.jpg') center 30% / cover; -webkit-mask: linear-gradient(90deg, transparent, #000 38%); mask: linear-gradient(90deg, transparent, #000 38%); }
.philo .sub { font-size: 18px; color: var(--mute); margin: 8px 0 18px; }

/* ---------- 問い合わせ帯 ---------- */
.cta-band { background: linear-gradient(90deg, var(--navy-d), var(--navy)); color: #fff; position: relative; overflow: hidden; }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 44px; padding-bottom: 44px; }
.cta-band h2 { margin: 0 0 14px; font-size: 32px; font-weight: 900; }
.cta-band .l { padding-right: 40px; border-right: 1px solid rgba(255, 255, 255, .3); min-width: 380px; }
.cta-band .r { display: flex; gap: 16px; flex: 1; }
.cta-band .r .btn { flex: 1; justify-content: center; height: 60px; font-size: 16px; }
.cta-band .arc { position: absolute; right: -40px; bottom: -40px; width: 520px; height: 120px; }

/* ---------- フッター ---------- */
.ftr { padding: 40px 0 28px; }
.ftr .row { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 28px; align-items: start; }
.ftr .lg { font-size: 17px; font-weight: 700; color: var(--navy); }
.ftr h4 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.ftr .cp { margin-top: 36px; display: flex; justify-content: space-between; font-size: 11px; color: var(--mute); }
.ftr .cp a { margin-right: 18px; }

/* ---------- 地球儀 ---------- */
.globe-stage { position: relative; }
.globe { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 0 46px 4px rgba(80, 160, 255, .38), 0 34px 60px -34px rgba(10, 40, 120, .6); }
.globe.is-drag { cursor: grabbing; }
.globe canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.globe-pins { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.pin, .dm-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; font: inherit; }
.pin { pointer-events: auto; cursor: pointer; will-change: transform; }
.pin-icon { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .35); transition: transform .25s; }
.pin-label { position: absolute; left: var(--dx); top: var(--dy); white-space: nowrap; font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); transform: translate(0, -50%); transition: opacity .2s; }
[data-side='l'] > .pin-label { transform: translate(-100%, -50%); }
.pin:hover .pin-icon { transform: scale(1.35); }
.pin.is-near .pin-label { font-size: 16px; }
/* アクティブ：黄色いピン＋白い札 */
.pin.is-active .pin-icon { width: 18px; height: 18px; left: -9px; top: -9px; background: var(--yellow); border-radius: 50% 50% 50% 0; transform: translateY(-11px) rotate(-45deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.pin.is-active .pin-icon::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.pin.is-active .pin-label { color: var(--navy); background: #fff; border: 2px solid var(--yellow); border-radius: 999px; padding: 3px 12px; text-shadow: none; font-weight: 900; }
/* B案：色付きのしずく型ピン＋札 */
.pins-pill .pin-icon, .pins-icon .pin-icon { width: 16px; height: 16px; left: -8px; top: -8px; border-radius: 50% 50% 50% 0; transform: translateY(-9px) rotate(-45deg); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); background: var(--blue); }
.pins-pill .pin-icon::after, .pins-icon .pin-icon::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.pins-pill .pin--green .pin-icon { background: var(--green); }
.pins-pill .pin--yellow .pin-icon { background: var(--yellow); }
.pins-pill .pin-label { background: #fff; color: var(--navy); text-shadow: none; padding: 2px 10px; border-radius: 999px; box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .35); font-size: 13px; }
.pins-pill .pin.is-active .pin-icon { background: var(--yellow); }
.pins-pill:not(.x) .pin:hover .pin-icon { transform: translateY(-9px) rotate(-45deg) scale(1.2); }
/* ドットマップのピン */
.dm-pin .pin-icon { width: 14px; height: 14px; left: -7px; top: -7px; border-radius: 50% 50% 50% 0; transform: translateY(-9px) rotate(-45deg); background: var(--blue); box-shadow: 0 3px 6px rgba(0, 0, 0, .3); }
.dm-pin .pin-icon::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.dm-pin.pin--green .pin-icon { background: var(--green); }
.dm-pin.pin--yellow .pin-icon { background: var(--yellow); }
.dm-pin .pin-label { color: var(--navy); text-shadow: none; font-size: 13px; }

/* 詳細カード */
.globe-card { position: absolute; width: 300px; background: #fff; border-radius: 12px; padding: 12px; z-index: 8; box-shadow: 0 24px 50px -18px rgba(8, 30, 90, .55), 0 0 0 1px rgba(13, 59, 140, .08); opacity: 0; pointer-events: none; transform: translateY(12px) scale(.94); transform-origin: bottom right; transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1.2); }
.globe-card.is-open { opacity: 1; pointer-events: auto; transform: none; }
.globe-stage[data-card='br'] .globe-card { right: -20px; bottom: -2%; }
.globe-stage[data-card='tl'] .globe-card { left: 4%; top: 7%; transform-origin: top left; }
.gc-photo { height: 150px; border-radius: 8px; background: #cfd8e6 center / cover; }
.gc-name { margin: 12px 0 2px; font-size: 20px; font-weight: 900; color: var(--navy); }
.gc-role { margin: 0 0 8px; font-size: 12px; color: var(--mute); line-height: 1.6; }
.gc-list { margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); font-size: 12px; }
.gc-list div { display: grid; grid-template-columns: 3.2em 1fr; gap: 6px; padding: 3px 0; }
.gc-list dt { color: var(--mute); font-weight: 700; }
.gc-list dd { margin: 0; }
.gc-more { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 9px 14px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 700; }
.globe-close { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.globe-hint { position: absolute; left: 0; right: 0; bottom: -36px; display: flex; justify-content: center; align-items: center; gap: 16px; font-size: 11px; color: var(--mute); }
.globe-hint button { font: inherit; color: var(--navy); background: #fff; border: 1px solid #c7d2e2; border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.globe-hint button:hover { background: var(--soft); }

/* B案：拠点セクション */
.loc { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding: 56px 0 48px; }
.loc .globe-stage { width: min(560px, 100%); margin: 0 auto; }
.loc h2 { margin: 0 0 4px; font-size: 40px; font-weight: 900; color: var(--navy); }
.loc h2 em { font-style: normal; font-size: 56px; }
.loc-list { list-style: none; margin: 14px 0 0; padding: 0; }
.loc-list li { display: grid; grid-template-columns: 24px 130px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.loc-list li:hover { background: #f5f9ff; }
.loc-list .mk { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--blue); position: relative; }
.loc-list .mk::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.loc-list .mk.green { background: var(--green); } .loc-list .mk.yellow { background: var(--yellow); }
.loc-list .thumb { aspect-ratio: 3 / 2; border-radius: 3px; overflow: hidden; background: #d5deeb; display: grid; place-items: center; }
.loc-list .thumb svg { width: 56%; opacity: .55; }
.loc-list b { font-size: 18px; color: var(--navy); font-weight: 900; display: block; margin-bottom: 4px; }
.loc-more { display: block; text-align: right; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--navy); }

/* B案：ロードマップ */
.roadmap--b { grid-template-columns: 280px 1fr 260px; }
.roadmap--b .goal-big { text-align: center; }
.road--b .steps { grid-template-columns: 1fr 1.2fr 160px; }
.road--b .steps::before { right: 100px; }
.road--b .steps::after { right: 90px; }
.goal-big .disc { width: 128px; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--yellow); background: radial-gradient(circle at 35% 30%, #2a6fd6, var(--navy-d)); color: #fff; display: grid; place-content: center; font-size: 26px; font-weight: 900; margin-top: -26px; box-shadow: 0 12px 28px -12px rgba(13, 59, 140, .8); animation: pulse 2.8s ease-in-out infinite; }
.goal-big b { display: block; margin-top: 10px; color: var(--navy); font-size: 15px; font-weight: 900; }
.kyushu-map { aspect-ratio: 1.15; width: 100%; }

/* 切替タグ */
.mock-switch { position: fixed; left: 16px; bottom: 16px; z-index: 99; display: flex; gap: 6px; padding: 6px; background: rgba(8, 30, 90, .92); border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.mock-switch a { padding: 5px 14px; border-radius: 999px; }
.mock-switch a.on { background: var(--yellow); color: var(--navy); }
.mock-switch span { padding: 5px 8px 5px 12px; opacity: .7; }

@media (max-width: 1000px) {
  .nav { display: none; }
  .hero--a .copy, .hero--b .copy, .philo .txt { width: 100%; }
  .hero--a .globe-stage { position: relative; right: auto; top: auto; width: min(560px, 92%); margin: -90px auto 90px; }
  .growth, .network, .roadmap, .roadmap--b, .loc, .ftr .row { grid-template-columns: 1fr; }
  .photos--3, .photos--4 { grid-template-columns: 1fr 1fr; }
  .cta-band .wrap { flex-direction: column; align-items: stretch; }
  .cta-band .l { border: 0; padding: 0; min-width: 0; }
  .org { margin: 0 auto; }
  .road .steps { grid-template-columns: 1fr; }
  .globe-stage[data-card='br'] .globe-card { right: 0; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- 追加：実データ版 ---------- */
.lead { margin: 10px 0 0; font-size: 15px; line-height: 1.9; color: var(--ink); max-width: 30em; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 22px 0 0; max-width: 360px; }
.facts div { border-left: 3px solid var(--yellow); padding-left: 12px; }
.facts dt { font-size: 11px; color: var(--mute); font-weight: 700; letter-spacing: .06em; }
.facts dd { margin: 2px 0 0; font-size: 20px; font-weight: 900; color: var(--navy); }

.growth { grid-template-columns: 1fr 1.05fr 1fr; gap: 48px; align-items: start; }
.chart { margin: 0; }
.chart > figcaption, .chart .cap { font-size: 13px; font-weight: 700; color: var(--navy); margin: 0 0 14px; letter-spacing: .04em; }
.chart .cap small { font-weight: 500; color: var(--mute); margin-left: 6px; }
.bars { display: flex; align-items: flex-end; gap: 26px; height: 200px; padding: 0 12px; border-bottom: 1px solid #b9c6da; margin: 26px 0 62px; width: 100%; justify-content: space-around; }
.bars .b { width: 54px; min-height: 8px; position: relative; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--green), var(--blue)); transform-origin: bottom; animation: grow 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.bars .b:nth-child(2) { animation-delay: .12s; } .bars .b:nth-child(3) { animation-delay: .24s; } .bars .b:nth-child(4) { animation-delay: .36s; }
.bars .b em { position: absolute; top: -26px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 18px; font-weight: 900; color: var(--navy); }
.bars .b span { position: absolute; top: 100%; margin-top: 8px; left: -16px; right: -16px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink); }
.bars .b span small { display: block; font-size: 10px; font-weight: 500; color: var(--mute); margin-top: 2px; line-height: 1.4; }
.pending { margin-top: 26px; display: flex; gap: 18px; align-items: center; padding: 22px 22px; border: 1.5px dashed #b4c3da; border-radius: 8px; background: repeating-linear-gradient(135deg, #f5f8fd 0 10px, #fff 10px 20px); }
.pending svg { width: 110px; flex: none; fill: #c9d5e8; }
.pending p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--mute); }
.pending b { color: var(--navy); font-size: 14px; }
.donuts--real { padding-left: 0; border: 0; gap: 22px; margin-top: 16px; }
.legend { list-style: none; margin: 8px 0 0; padding: 0; font-size: 11px; text-align: left; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

.cred { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.licenses { list-style: none; margin: 18px 0 22px; padding: 0; }
.licenses li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.licenses b { display: block; color: var(--navy); font-weight: 900; }
.licenses span { color: var(--mute); font-size: 13px; }
.marks { display: flex; gap: 22px; align-items: flex-end; }
.marks figure { margin: 0; text-align: center; font-size: 11px; color: var(--mute); line-height: 1.5; }
.marks img { height: 76px; width: auto; margin: 0 auto 8px; object-fit: contain; }
.partners { list-style: none; margin: 18px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.partners li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--navy); background: #fff; }
.fine { font-size: 11px; color: var(--mute); margin: 8px 0 0; }

.points { margin: 18px 0 0; padding: 0; list-style: none; }
.points li { position: relative; padding: 8px 0 8px 22px; font-size: 15px; font-weight: 700; color: var(--navy); }
.points li::before { content: ''; position: absolute; left: 2px; top: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); }

.loc { grid-template-columns: 1.05fr 1fr; }
.loc-copy .lead { max-width: 24em; }
.hint-box { margin: 22px 0 0; padding: 14px 18px; border-left: 4px solid var(--yellow); background: var(--soft); font-size: 13px; color: var(--navy); font-weight: 700; line-height: 1.8; }

.roadmap--b { grid-template-columns: 300px 1fr; }
.ftr .row { grid-template-columns: 1.05fr repeat(4, 1.25fr); }
.ftr .lg small { display: block; font-size: 11px; font-weight: 500; color: var(--mute); margin-top: 4px; }
.ftr .addr p { margin: 0; font-size: 12px; line-height: 1.8; color: var(--ink); }

@media (max-width: 1000px) {
  .wrap { padding: 0 24px; }
  .growth, .cred, .loc, .roadmap--b { grid-template-columns: 1fr; }
  .facts { max-width: none; }
  .ftr .row { grid-template-columns: 1fr 1fr; }
  .hero--a .copy { width: 100%; }
  .hero--a .globe-stage { position: relative; right: auto; top: auto; width: min(560px, 92%); margin: -90px auto 90px; }
}

@media (min-width: 1001px) { .hero h1 { white-space: nowrap; } }
 /* ---------- サブページ共通TOP ---------- */
.nav a.is-current { color: var(--blue); box-shadow: 0 2px 0 var(--yellow); padding-bottom: 4px; }
.subhero { position: relative; overflow: hidden; color: #fff; min-height: 320px;
  background: linear-gradient(90deg, rgba(6, 28, 78, .94) 0, rgba(8, 40, 105, .76) 52%, rgba(8, 40, 105, .38) 100%), var(--photo) center var(--pos, 50%) / cover; }
.subhero-in { padding: 84px 0 128px; }
.subhero .en { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: 'Jost', sans-serif; font-size: 14px; letter-spacing: .24em; font-weight: 500; }
.subhero .en i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); display: inline-block; }
.subhero h1 { margin: 0 0 12px; font-size: clamp(32px, 3.6vw, 48px); font-weight: 900; letter-spacing: .02em; }
.subhero .lead { margin: 0; color: #fff; font-size: 18px; max-width: none; }
.crumb { display: flex; gap: 10px; align-items: center; padding-top: 16px; padding-bottom: 0; font-size: 12px; color: var(--mute); }
.crumb a:hover { color: var(--blue); }
.crumb b { color: var(--navy); font-weight: 700; }

/* ---------- サブページ部品 ---------- */
.sub-title { margin: 0 0 6px; font-size: 22px; font-weight: 900; color: var(--navy); }
.two { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: start; }
.two--even { grid-template-columns: 1fr 1fr; }
.quote { margin: 22px 0 0; padding: 26px 32px; border-left: 6px solid var(--yellow); background: var(--soft); font-size: clamp(20px, 2.1vw, 28px); font-weight: 900; line-height: 1.8; color: var(--navy); }
.policy { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.policy li { display: flex; gap: 18px; align-items: center; padding: 14px 20px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; font-weight: 700; }
.policy b { font-family: 'Jost', sans-serif; font-size: 22px; color: var(--blue); }
.portrait { aspect-ratio: 4 / 5; border: 1.5px dashed #b4c3da; border-radius: 8px; display: grid; place-items: center; text-align: center; color: var(--mute); font-size: 13px; line-height: 1.8; background: repeating-linear-gradient(135deg, #f5f8fd 0 10px, #fff 10px 20px); }
.prose p { margin: 14px 0 0; font-size: 15px; line-height: 2; }
.sign { margin: 22px 0 0; text-align: right; font-weight: 900; color: var(--navy); }
.table { margin: 18px 0 0; }
.table div { display: grid; grid-template-columns: 7em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; }
.table dt { font-weight: 700; color: var(--navy); }
.table dd { margin: 0; }
.history { list-style: none; margin: 18px 0 0; padding: 0 0 0 20px; border-left: 3px solid var(--line); }
.history li { position: relative; display: grid; grid-template-columns: 7.2em 1fr; gap: 14px; padding: 8px 0; font-size: 14px; }
.history li::before { content: ''; position: absolute; left: -29px; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
.history time { font-weight: 900; color: var(--navy); font-family: 'Jost', 'Noto Sans JP', sans-serif; }
.history--s { max-width: 460px; }
.gap-fig { padding: 22px 24px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.lane { display: flex; align-items: center; gap: 0; margin: 14px 0; }
.lane span { width: 5.5em; flex: none; font-size: 12px; font-weight: 700; color: var(--navy); }
.lane i { display: block; height: 34px; background: #cfd9ea; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; text-align: center; line-height: 34px; }
.lane i.gap { background: repeating-linear-gradient(135deg, #fff 0 5px, #e7edf7 5px 10px); border: 1px dashed #b4c3da; }
.lane--us i.ph0 { background: transparent; }
.lane--us i.fill { background: var(--yellow); color: var(--navy); border-radius: 3px; }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 24px; }
.cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 24px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.card .img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #cfd8e6; }
.card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.card:hover .img img { transform: scale(1.04); }
.card .img b { position: absolute; left: 0; top: 0; padding: 6px 14px; background: var(--navy); color: #fff; font-family: 'Jost', sans-serif; font-size: 16px; }
.card h3 { margin: 16px 18px 6px; font-size: 17px; font-weight: 900; color: var(--navy); line-height: 1.5; }
.card p { margin: 0 18px 12px; font-size: 14px; line-height: 1.8; }
.tags { list-style: none; margin: 0 18px 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--navy); }
.card--work .tags { margin-top: 14px; margin-bottom: 4px; }
.card--work h3 { margin-top: 8px; font-size: 14px; }
.card--row { display: grid; grid-template-columns: 42% 1fr; }
.card--row .img { aspect-ratio: auto; min-height: 190px; }
.card--row .body { padding: 18px 20px; }
.card--row h3 { margin: 0 0 8px; }
.card--row p { margin: 0 0 8px; }
.img-note { position: absolute; right: 8px; bottom: 8px; font-style: normal; font-size: 10px; background: rgba(0, 0, 0, .55); color: #fff; padding: 2px 8px; border-radius: 2px; letter-spacing: .06em; }
.spec { margin: 0; font-size: 13px; }
.spec div { display: grid; grid-template-columns: 6em 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.spec dt { color: var(--mute); font-weight: 700; }
.spec dd { margin: 0; }
.pend { color: var(--mute) !important; font-style: normal; background: repeating-linear-gradient(135deg, #f5f8fd 0 8px, #fff 8px 16px); padding: 2px 8px; border-radius: 3px; display: inline-block; font-weight: 500 !important; }
.base .est { font-size: 12px; font-weight: 700; color: var(--blue); }
.base .addr { font-size: 13px; color: var(--ink); line-height: 1.8; }
.base .tel { font-size: 14px; font-weight: 900; color: var(--navy); margin-bottom: 0; }
.dot-c { position: absolute; left: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff; background: var(--blue); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.dot-c.green { background: var(--green); }
.dot-c.yellow { background: var(--yellow); }

.newbanner { display: grid; grid-template-columns: 150px 1fr; gap: 36px; align-items: center; padding: 34px 44px; border-radius: 12px; background: linear-gradient(100deg, var(--navy-d), var(--navy) 70%, #1c5fc6); color: #fff; }
.newbanner .eyebrow { color: var(--yellow); }
.newbanner .sec-title, .newbanner .lead { color: #fff; }
.newbanner .fine { color: rgba(255, 255, 255, .7); }
.nb-badge { width: 130px; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--yellow); display: grid; place-items: center; font-family: 'Jost', sans-serif; font-size: 28px; font-weight: 600; letter-spacing: .1em; color: var(--yellow); animation: pulse 2.8s ease-in-out infinite; }
.ms { padding: 22px 24px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--blue); border-radius: 8px; }
.ms time { font-family: 'Jost', 'Noto Sans JP', sans-serif; font-weight: 900; color: var(--blue); font-size: 16px; }
.ms h3 { margin: 8px 0; font-size: 19px; font-weight: 900; color: var(--navy); }
.ms p { margin: 0; font-size: 14px; line-height: 1.8; }
.ms--goal { border-top-color: var(--yellow); background: linear-gradient(180deg, #fffbe8, #fff); }
.cmp { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 14px; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font-size: 12px; color: var(--mute); }
.cmp tbody th { color: var(--navy); width: 6.5em; }
.cmp td.new { font-weight: 900; color: var(--navy); background: #f3f8ff; }
.tabs { display: flex; gap: 8px; margin-top: 18px; }
.tabs b, .tabs span { padding: 7px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid var(--line); color: var(--navy); background: #fff; }
.tabs b { background: var(--navy); color: #fff; border-color: var(--navy); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flow li { display: grid; grid-template-columns: 5em 1fr; gap: 14px; align-items: center; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.flow b { color: var(--navy); font-weight: 900; }
.tel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.tel-card { display: block; padding: 22px 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: transform .2s, box-shadow .2s; border-top: 5px solid var(--blue); }
.tel-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(13, 59, 140, .5); }
.tel-card span { display: block; font-weight: 900; color: var(--navy); font-size: 15px; }
.tel-card b { display: block; margin: 8px 0 6px; font-family: 'Jost', sans-serif; font-size: 26px; color: var(--navy); letter-spacing: .02em; }
.tel-card small { color: var(--mute); font-size: 12px; line-height: 1.6; display: block; }

@media (max-width: 1000px) {
  .two, .two--even, .cards3, .cards2, .newbanner, .tel-grid, .card--row { grid-template-columns: 1fr; }
  .subhero-in { padding: 56px 0 110px; }
  .newbanner { padding: 26px 22px; }
  .nb-badge { width: 100px; }
}
 /* ---------- 動きの演出 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes shine { to { transform: translateX(260%) skewX(-18deg); } }

/* ヘッダー：固定＋スクロール時の影 */
.hdr { position: sticky; top: 0; transition: box-shadow .3s, background .3s; }
.hdr.is-scrolled { box-shadow: 0 8px 24px -16px rgba(8, 30, 90, .55); }
.hdr--over { position: relative; }
.nav a { position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
.nav a.is-current { box-shadow: none; padding-bottom: 0; }

/* ヒーロー：順番に現れる＋黄色い弧が描かれる */
.hero--a .copy > *, .hero--b .copy > * { animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero .copy > :nth-child(2) { animation-delay: .12s; } .hero .copy > :nth-child(3) { animation-delay: .24s; }
.hero .copy > :nth-child(4) { animation-delay: .36s; } .hero .copy > :nth-child(5) { animation-delay: .48s; }
.hero .copy > :nth-child(6) { animation-delay: .6s; } .hero .copy > :nth-child(7) { animation-delay: .72s; }
.swoosh svg { animation: wipe 1.7s .25s cubic-bezier(.2, .7, .2, 1) both; }
.hero--a .globe-stage { animation: fadeUp 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }

/* サブページTOP：写真がゆっくりズーム */
.subhero { background: #0a2d6e; isolation: isolate; }
.subhero::before { content: ''; position: absolute; inset: -4%; z-index: -1;
  background: linear-gradient(90deg, rgba(6, 28, 78, .94) 0, rgba(8, 40, 105, .76) 52%, rgba(8, 40, 105, .38) 100%), var(--photo) center var(--pos, 50%) / cover;
  animation: kb 22s ease-in-out infinite alternate; }
.subhero-in > * { animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) both; }
.subhero-in > :nth-child(2) { animation-delay: .12s; } .subhero-in > :nth-child(3) { animation-delay: .24s; }

/* スクロール出現（JSが動くときだけ隠す） */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .ph .img, .js .card .img { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + 120ms); }
.js .ph.in .img, .js .card.in .img { clip-path: inset(0); }

/* グラフ：表示されたら伸びる */
.js .bars:not(.in) .b { animation: none; transform: scaleY(0); }
.js .bars:not(.in) .b em { opacity: 0; }
.bars .b em { transition: opacity .6s .9s; }
.js .donut:not(.in) .ring { transform: scale(.6) rotate(-120deg); opacity: 0; }
.donut .ring { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity .8s; }
.bars .b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%); border-radius: inherit; }

/* ロードマップ：線が伸び、節目が順に現れる */
.js .road:not(.in) .steps::before { transform: scaleX(0); }
.road .steps::before { transform-origin: left; transition: transform 1.8s cubic-bezier(.3, .7, .2, 1); }
.js .road:not(.in) .step, .js .road:not(.in) .goal, .js .road:not(.in) .goal-big, .js .road:not(.in) .road-banner { opacity: 0; transform: translateY(16px); }
.road .step, .road .goal, .road .goal-big, .road .road-banner { transition: opacity .7s, transform .7s; }
.road .step:nth-child(1) { transition-delay: .3s; } .road .step:nth-child(2) { transition-delay: .9s; }
.road .goal, .road .goal-big { transition-delay: 1.5s; } .road .road-banner { transition-delay: 1.9s; }
.road .step .dot { transition: transform .5s .1s; }
.js .road:not(.in) .step .dot { transform: scale(0); }

/* 信頼数字の帯 */
.stats-band { background: linear-gradient(100deg, var(--navy-d), var(--navy) 65%, #174fb0); color: #fff; overflow: hidden; }
.stats { list-style: none; margin: 0; padding: 34px 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); }
.stats li { padding: 4px 24px; border-left: 1px solid rgba(255, 255, 255, .22); }
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats b { display: block; font-family: 'Jost', sans-serif; font-weight: 500; font-size: clamp(44px, 5vw, 68px); line-height: 1.05; letter-spacing: -.01em; }
.stats b small { font-family: 'Noto Sans JP', sans-serif; font-size: 20px; font-weight: 700; margin-left: 6px; color: var(--yellow); letter-spacing: 0; }
.stats li > span { display: block; margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.ticker { border-top: 1px solid rgba(255, 255, 255, .16); padding: 12px 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; animation: tick 90s linear infinite; }
.ticker:hover ul { animation-play-state: paused; }
.ticker li { white-space: nowrap; font-size: 13px; font-weight: 700; padding: 5px 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.facts dd small { font-size: 14px; font-weight: 700; margin-left: 3px; }

/* ボタン・カード */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); }
.btn:hover::after { animation: shine .8s; }
.card, .tel-card, .ms, .policy li { transition: transform .35s, box-shadow .35s, border-color .35s, opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.card:hover, .ms:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(13, 59, 140, .55); }
.policy li:hover { border-color: var(--blue); transform: translateX(4px); }
/* 取引先の名前は情報表示ではないため、ホバーでの色変化はつけない */
.partners li { cursor: default; }
.history li { transition: transform .25s; }
.history li:hover { transform: translateX(4px); }

/* 実績：分野別の横棒 */
.hbar { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.hbar li { display: grid; grid-template-columns: 9.5em 1fr 3.4em; gap: 14px; align-items: center; font-size: 13px; font-weight: 700; color: var(--navy); }
.hbar .track { height: 18px; border-radius: 3px; background: #e9eff8; overflow: hidden; }
.hbar .fill { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 3px; transform-origin: left; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) var(--dl, 0ms); }
.js .hbar:not(.in) .fill { transform: scaleX(0); }
.hbar em { font-style: normal; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 600; text-align: right; }
.client-groups { display: grid; gap: 18px; margin-top: 26px; }
.client-groups h3 { margin: 0 0 8px; font-size: 14px; color: var(--navy); font-weight: 900; }
.client-groups h3 small { color: var(--mute); font-weight: 500; margin-left: 6px; }

.big { font-size: 34px; font-family: 'Jost', 'Noto Sans JP', sans-serif; color: var(--navy); margin: 0 4px; }
.cap-s { margin: 0; font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .04em; }
.partners li.is-hot { background: var(--yellow); border-color: var(--yellow); color: var(--navy); box-shadow: 0 0 0 0 rgba(246, 197, 0, .6); animation: hot 2.4s infinite; }
@keyframes hot { 70% { box-shadow: 0 0 0 10px rgba(246, 197, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 197, 0, 0); } }
.tagline { font-size: 20px; font-weight: 900; color: var(--blue); margin: 12px 0 4px; }
.mails { list-style: none; margin: 18px 0 8px; padding: 0; }
.mails li { display: grid; grid-template-columns: 8em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.mails li > span { font-weight: 700; color: var(--navy); }
.mails a { color: var(--blue); font-weight: 700; word-break: break-all; }
.mails a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .stats li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .ph .img, .js .card .img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ticker ul { animation: none; }
}
 /* ---------- 追加部品 ---------- */
.portrait-fig { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: #cfd8e6; }
.portrait-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; }
.portrait-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; color: #fff; font-size: 12px; background: linear-gradient(0deg, rgba(6, 28, 78, .88), transparent); }
.portrait-fig figcaption b { display: block; font-size: 20px; font-weight: 900; margin-top: 2px; }
.portrait-fig .img-note { right: 10px; top: 10px; bottom: auto; }
.onestop { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s; }
.onestop li { position: relative; padding: 18px 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 8px; border-top: 4px solid var(--blue); }
.onestop li:not(:last-child)::after { content: ''; position: absolute; right: -12px; top: 50%; width: 10px; height: 10px; border-top: 3px solid var(--yellow); border-right: 3px solid var(--yellow); transform: translateY(-50%) rotate(45deg); }
.onestop b { font-family: 'Jost', sans-serif; font-size: 26px; color: var(--blue); font-weight: 500; }
.onestop h3 { margin: 4px 0 6px; font-size: 16px; font-weight: 900; color: var(--navy); }
.onestop p { margin: 0; font-size: 13px; line-height: 1.8; }
.pendline { margin-top: 0; }

/* 立ち位置の図：現場の状況 → 水建がすること → その結果 */
.position > div:first-child { max-width: 52em; }
.gapflow { display: grid; grid-template-columns: 1fr 34px 1.1fr 34px 1fr; align-items: stretch; gap: 0; margin-top: 30px; }
.gf { position: relative; padding: 22px 20px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.gf-tag { display: inline-block; margin: -36px 0 12px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #fff; background: var(--mute); letter-spacing: .02em; }
.gf ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gf li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--mute); }
.gf li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #b4c3da; }
.gf li b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.5; }
.gf--1 { background: #f6f8fc; }
.gf--2 { border: 2px solid var(--yellow); background: linear-gradient(180deg, #fffbe8, #fff); box-shadow: 0 18px 34px -22px rgba(246, 197, 0, .8); }
.gf--2 .gf-tag { background: var(--navy); }
.gf--2 li::before { background: var(--yellow); }
.gf--2 li b { color: var(--navy); }
.gf--3 { background: #eef7ee; border-color: #cfe6cf; }
.gf--3 .gf-tag { background: var(--green); }
.gf--3 li::before { background: var(--green); }
.gf-arrow { align-self: center; justify-self: center; width: 0; height: 0; border-left: 14px solid var(--blue); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
@media (max-width: 1000px) {
  .gapflow { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .gf { margin-top: 26px; }
  .gf:first-child { margin-top: 0; }
  .gf-arrow { border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 14px solid var(--blue); border-bottom: 0; margin: 16px 0 -4px; }
}

/* ---------- ハンバーガー ---------- */
.burger { display: none; width: 44px; height: 44px; margin-left: 4px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .3s, opacity .3s, top .3s; }
.burger i:nth-child(1) { top: 14px; } .burger i:nth-child(2) { top: 21px; } .burger i:nth-child(3) { top: 28px; }
.hdr--over .burger i { background: #fff; }
.hdr.is-open .burger i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.hdr.is-open .burger i:nth-child(2) { opacity: 0; }
.hdr.is-open .burger i:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ピンのタップ領域を広げる */
.pin::before { content: ''; position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; }
html, body { overflow-x: clip; }

/* ---------- タブレット・スマホ ---------- */
@media (max-width: 1000px) {
  .wrap { padding: 0 24px; }
  .hdr .wrap { height: 60px; gap: 8px; }
  .logo img { height: 36px; }
  .logo b { font-size: 15px; }
  .lang { margin-left: auto; }
  .burger { display: block; }
  .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; left: 0; right: 0; top: 60px; padding: 6px 24px 22px; background: #fff; box-shadow: 0 24px 40px -20px rgba(8, 30, 90, .5);
    transform: translateY(-14px); opacity: 0; visibility: hidden; transition: transform .3s, opacity .3s, visibility .3s; max-height: calc(100vh - 60px); overflow-y: auto; }
  .hdr.is-open .nav { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 15px 4px; font-size: 15px; border-bottom: 1px solid var(--line); color: var(--navy) !important; }
  .nav a::after { display: none; }
  .nav a.is-current { color: var(--blue) !important; }
  .hdr--over { background: rgba(6, 28, 78, .35); }

  .hero--a { min-height: 0; }
  .hero--a .copy { width: 100%; padding: 36px 0 12px; }
  .hero h1 { white-space: normal; font-size: clamp(30px, 8.4vw, 46px); }
  .hero .en { font-size: 16px; }
  .hero .cta { flex-wrap: wrap; margin: 24px 0 16px; }
  .hero--a .globe-stage { position: relative; right: auto; top: auto; width: min(520px, 94%); margin: 8px auto 96px; }
  .hero--b { min-height: 0; }
  .hero--b .copy { width: 100%; padding: 44px 0 120px; }
  .swoosh { height: 84px; }

  .globe-stage .globe-card, .globe-stage[data-card='br'] .globe-card, .globe-stage[data-card='tl'] .globe-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: 420px; margin: 16px auto 0; display: none; transform-origin: top center; }
  .globe-stage .globe-card.is-open { display: block; }
  .globe-hint { position: static; margin-top: 14px; flex-wrap: wrap; }
  .pin-label { font-size: 13px; }

  .sec { padding: 40px 0; }
  .sec-title { font-size: 24px; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .head-row .tag::after { width: 60px; }
  .badge { display: inline-block; margin: 8px 0 0; }
  .photos--3, .photos--4 { grid-template-columns: 1fr 1fr; }
  .ph figcaption { font-size: 15px; }

  .stats { grid-template-columns: 1fr 1fr; gap: 20px 0; padding: 26px 0 20px; }
  .stats li { padding: 0 14px; }
  .stats li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats b { font-size: clamp(38px, 11vw, 52px); }

  .growth { gap: 30px; }
  .bars { gap: 10px; padding: 0 4px; margin-bottom: 70px; }
  .bars .b { width: 14%; max-width: 54px; }
  .facts { max-width: none; }
  .pending { flex-direction: column; align-items: flex-start; }

  .org { width: min(380px, 100%); margin: 0 auto; }
  .org .c { font-size: 17px; }
  .org .hq b { font-size: 21px; }

  .road .steps { grid-template-columns: 1fr; gap: 24px; padding-left: 36px; }
  .road .steps::before { left: 10px; right: auto; top: 12px; bottom: 30px; width: 3px; height: auto; background: linear-gradient(180deg, var(--navy), var(--blue)); transform-origin: top; }
  .road .steps::after { display: none; }
  .step { padding-top: 0; }
  .step .dot { left: -36px; top: 2px; }
  .goal .tag { position: static; display: inline-block; margin-bottom: 8px; }
  .goal .ring { width: 80px; }
  .goal-big .disc { margin-top: 0; width: 108px; font-size: 22px; }
  .goal-big { text-align: left; }
  .road-banner { font-size: 13px; padding: 12px 14px; }

  .philo .photo { position: relative; width: 100%; height: 220px; -webkit-mask: linear-gradient(0deg, transparent, #000 40%); mask: linear-gradient(0deg, transparent, #000 40%); }
  .philo .txt { width: 100%; padding: 8px 0 36px; }
  .philo .sec-title { font-size: 26px !important; }

  .cta-band .wrap { flex-direction: column; align-items: stretch; gap: 22px; padding-top: 34px; padding-bottom: 34px; }
  .cta-band .l { border: 0; padding: 0; min-width: 0; }
  .cta-band h2 { font-size: 24px; }
  .cta-band .r { flex-direction: column; }
  .cta-band .arc { display: none; }

  .ftr .row { grid-template-columns: 1fr 1fr; gap: 22px; }
  .ftr .row .lg { grid-column: 1 / -1; }
  .ftr .cp { flex-direction: column; gap: 8px; }

  .subhero-in { padding: 44px 0 100px; }
  .subhero { min-height: 0; }
  .subhero h1 { font-size: clamp(28px, 8vw, 38px); }
  .subhero .lead { font-size: 15px; }
  .crumb { font-size: 11px; flex-wrap: wrap; }

  .two, .two--even, .cards3, .cards2, .newbanner, .card--row, .cred, .loc, .growth, .network, .roadmap, .roadmap--b { grid-template-columns: 1fr; }
  .two, .two--even { gap: 28px; }
  .cards3, .cards2 { gap: 16px; }
  .card--row .img { min-height: 0; aspect-ratio: 3 / 2; }
  .portrait-fig { max-width: 340px; margin: 0 auto; }
  .onestop { grid-template-columns: 1fr 1fr; }
  .onestop li:not(:last-child)::after { display: none; }
  .tel-grid { grid-template-columns: 1fr 1fr; }
  .table div { grid-template-columns: 5.6em 1fr; gap: 10px; font-size: 13px; }
  .history li { grid-template-columns: 6.4em 1fr; gap: 10px; font-size: 13px; }
  .cmp { display: block; overflow-x: auto; white-space: normal; font-size: 13px; }
  .cmp th, .cmp td { padding: 10px 8px; min-width: 7.5em; }
  .hbar li { grid-template-columns: 7.2em 1fr 2.4em; gap: 10px; font-size: 12px; }
  .marks { flex-wrap: wrap; }
  .newbanner { padding: 26px 20px; gap: 20px; }
  .nb-badge { width: 96px; font-size: 22px; }
  .mails li { grid-template-columns: 1fr; gap: 2px; }
  .quote { padding: 18px 18px; }
  .policy li { padding: 12px 14px; gap: 12px; font-size: 14px; }
  .tabs { flex-wrap: wrap; }
  .flow li { grid-template-columns: 4em 1fr; }
  .loc-copy .lead, .lead { max-width: none; }
  .mock-switch { left: 10px; bottom: 10px; transform: scale(.9); transform-origin: left bottom; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .logo b { font-size: 13px; }
  .lang { display: none; }
  .photos--3, .photos--4 { grid-template-columns: 1fr; }
  .tel-grid, .ftr .row { grid-template-columns: 1fr; }
  .onestop { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .facts dd { font-size: 18px; }
  .stats li > span { font-size: 11px; }
  .hero .cta .btn { flex: 1 1 100%; justify-content: space-between; }
  .btn { height: 52px; }
  .tel-card b { font-size: 24px; }
  .big { font-size: 28px; }
  .globe-card { padding: 10px; }
}

/* ---------- 文章の改行（文節・まとまり優先） ---------- */
body { word-break: auto-phrase; line-break: strict; overflow-wrap: break-word; text-wrap: pretty; }
h1, h2, h3, .sec-title, .tagline, .quote, .ph figcaption, .gf li b, .stats li > span { text-wrap: balance; }
.nw { white-space: nowrap; }
br.pc { display: inline; }
.pos-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.position > .pos-head, .position > div:first-child { max-width: none; }
.pos-text p { margin: 0 0 14px; font-size: 15px; line-height: 2; }
.pos-text p:last-child { margin-bottom: 0; }
.tagline { margin: 12px 0 0; font-size: 20px; font-weight: 900; color: var(--blue); max-width: none; }
/* 住所・電話は途中で折り返さない */
.ftr .row { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px 28px; }
.ftr .row .lg { grid-column: 1 / -1; }
.ftr .addr p, .base .addr, .tel-card small, .base .tel, .tel-card b { white-space: nowrap; }
.base .addr { font-size: 13px; }
.card--row { grid-template-columns: 34% 1fr; }
.tel-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1240px) { .cards2 { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { br.pc { display: none; } .pos-head { grid-template-columns: 1fr; gap: 18px; } .card--row { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .tel-grid { grid-template-columns: 1fr; } .base .addr { font-size: 12.5px; } }
@media (max-width: 380px) { .base .addr, .ftr .addr p { font-size: 11.5px; } }

/* ---------- 地球儀：少し小さく、拠点を選びやすく ---------- */
@media (min-width: 1001px) {
  .hero--a { min-height: 620px; }
  .hero--a .copy { padding-bottom: 130px; }
  .hero--a .globe-stage { width: 500px; top: 18px; }
  .loc .globe-stage { width: min(470px, 100%); }
}
.pin::before { left: -28px; top: -28px; width: 56px; height: 56px; }
.pin-ripple { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); opacity: 0; pointer-events: none; animation: ripple 2.4s ease-out var(--rd, 0s) infinite; }
@keyframes ripple { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(2.2); opacity: 0; } }
.pin.is-active .pin-ripple { display: none; }
.pins-pill .pin-icon { width: 20px; height: 20px; left: -10px; top: -10px; transform: translateY(-12px) rotate(-45deg); }
.pins-pill .pin-icon::after { inset: 5px; }
.pins-pill .pin.is-active .pin-icon { width: 24px; height: 24px; left: -12px; top: -12px; transform: translateY(-15px) rotate(-45deg); }
.pins-pill .pin-label { font-size: 15px; padding: 4px 13px; font-weight: 900; }
.pins-pill .pin:hover .pin-icon { transform: translateY(-12px) rotate(-45deg) scale(1.25); }
.pins-pill .pin:hover .pin-label { background: var(--yellow); }
.globe.is-magnify { cursor: zoom-in; }
.globe.is-magnify .pin-label { font-size: 16px; }
.globe-hint span::before { content: '＋ '; }

/* グリッドの子が内容に引っ張られて横にはみ出さないように */
.roadmap > *, .growth > *, .two > *, .network > *, .cred > *, .loc > *, .gapflow > *, .pos-head > *, .cards2 > *, .cards3 > *, .road .steps > * { min-width: 0; }
.road-banner { overflow-wrap: anywhere; }
@media (hover: none) {
  .card:hover, .ms:hover, .tel-card:hover, .policy li:hover, .history li:hover { transform: none; box-shadow: none; }
}
 /* ---------- 成長：拠点が広がる演出・ダミーグラフ ---------- */
.growth2 { display: block; }
.g-top { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
.g-charts { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-top: 30px; }
.expand { margin: 0; padding: 22px 26px 18px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff, #f1f6fd); box-shadow: 0 26px 50px -34px rgba(13, 59, 140, .55); position: relative; overflow: hidden; }
.expand > figcaption { font-size: 13px; font-weight: 900; color: var(--navy); letter-spacing: .06em; }
.exp-top { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 4px; }
.exp-num { display: flex; align-items: baseline; }
.exp-num b { font-family: 'Jost', sans-serif; font-size: clamp(84px, 8.4vw, 124px); line-height: .9; font-weight: 500; color: var(--navy); display: inline-block; text-shadow: 0 10px 30px rgba(28, 95, 198, .25); }
.exp-num b.pop { animation: pop .7s cubic-bezier(.2, 1.6, .4, 1); }
.exp-num span { font-size: 22px; font-weight: 900; color: var(--blue); margin-left: 8px; }
@keyframes pop { 0% { transform: scale(.5); opacity: .3; } 60% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
.exp-year { text-align: right; }
.exp-year i { display: block; font-style: normal; font-size: 11px; letter-spacing: .32em; color: var(--mute); }
.exp-year b { font-family: 'Jost', sans-serif; font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; color: var(--blue); font-variant-numeric: tabular-nums; }
.exp-map { aspect-ratio: 1.5; margin-top: -4px; -webkit-mask: none; mask: none; }
.exp-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 0; padding: 0; }
.exp-steps li { padding-top: 10px; border-top: 4px solid var(--line); opacity: .5; transition: opacity .5s, border-color .5s; }
.exp-steps li.on { opacity: 1; border-top-color: var(--yellow); }
.exp-steps b { display: block; font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 500; color: var(--navy); }
.exp-steps span { font-size: 11px; color: var(--mute); line-height: 1.5; display: block; }
.expand.done .exp-num b { animation: glow 2.6s ease-in-out infinite; }
@keyframes glow { 50% { text-shadow: 0 0 36px rgba(246, 197, 0, .8), 0 10px 30px rgba(28, 95, 198, .3); } }
.dm-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dm-lines path { fill: none; stroke: var(--yellow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.3, .7, .2, 1); filter: drop-shadow(0 2px 4px rgba(246, 197, 0, .5)); }
.dm-lines path.show { stroke-dashoffset: 0; }
.js .expand .dm-pin { opacity: 0; transform: scale(.2); transition: opacity .4s, transform .7s cubic-bezier(.3, 1.8, .5, 1); }
.js .expand .dm-pin.show { opacity: 1; transform: none; }
.dm-pin .pin-burst { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--yellow); opacity: 0; pointer-events: none; }
.dm-pin.show .pin-burst { animation: burst 1.5s ease-out 1; }
@keyframes burst { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
.dm-pin .pin-ripple { border-color: rgba(28, 95, 198, .75); width: 26px; height: 26px; left: -13px; top: -13px; }
.dm-pin .pin-label { font-size: 15px; font-weight: 900; }
.dm-pin .pin-label small { display: block; font-size: 11px; font-weight: 500; color: var(--mute); margin-top: 1px; }
.dm-pin .pin-icon { width: 18px; height: 18px; left: -9px; top: -9px; transform: translateY(-11px) rotate(-45deg); }

.chart-card { margin: 0; padding: 22px 24px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.chart-card > figcaption { font-size: 14px; font-weight: 900; color: var(--navy); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.chart-card > figcaption small { font-weight: 500; color: var(--mute); font-size: 12px; margin-left: 4px; }
.dtag { font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--mute); padding: 2px 9px; border-radius: 999px; margin-left: 8px; letter-spacing: .06em; }
.bars--sales { height: 200px; margin: 38px 0 44px; gap: 14px; justify-content: space-around; }
.bars--sales .b { width: 11%; max-width: 54px; }
.donuts--real { justify-content: center; border: 0; padding: 14px 0 0; gap: 20px; }
.donuts--real .donut .ring { width: 138px; }
.legend--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.legend--grid li { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.legend--grid li i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; flex: none; }
.legend--grid li b { margin-left: auto; font-family: 'Jost', 'Noto Sans JP', sans-serif; font-weight: 500; color: var(--navy); white-space: nowrap; }
.dummy-note { margin: 16px 0 0; font-size: 12px; color: var(--mute); padding-left: 12px; border-left: 3px solid var(--yellow); }

/* ---------- 文章まわり ---------- */
.hero-lead { margin: 0 0 6px; max-width: 30em; font-size: 15px; line-height: 2; color: var(--ink); }
.cta-sub { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.8; }
.ph figcaption .desc { display: block; margin-top: 8px; font-size: 13px; font-weight: 400; line-height: 1.9; color: var(--ink); }
.svc { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc li { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: transform .35s, box-shadow .35s, border-color .35s, opacity .8s; overflow: hidden; }
.svc li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--blue), var(--green)); }
.svc li:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 18px 34px -22px rgba(13, 59, 140, .6); }
.svc b { font-family: 'Jost', sans-serif; font-size: 30px; font-weight: 500; color: #c9d8ef; line-height: 1; }
.svc h3 { margin: 6px 0 8px; font-size: 17px; font-weight: 900; color: var(--navy); }
.svc p { margin: 0; font-size: 13px; line-height: 1.9; }

/* ---------- 拠点の円形図：小さく、動きで見せる ---------- */
.bigstat { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--navy); font-weight: 900; font-size: 20px; line-height: 1.5; }
.bigstat b { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 84px; line-height: .9; color: var(--blue); text-shadow: 0 8px 24px rgba(28, 95, 198, .3); }
.org { width: min(350px, 100%); margin: 0 auto; animation: orbglow 4s ease-in-out infinite; }
@keyframes orbglow { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(120, 170, 235, .55), 0 0 0 8px rgba(28, 95, 198, .05), 0 24px 50px -28px rgba(20, 80, 180, .6); } 50% { box-shadow: inset 0 0 0 2px rgba(120, 170, 235, .8), 0 0 0 18px rgba(28, 95, 198, .09), 0 24px 50px -28px rgba(20, 80, 180, .6); } }
.org { overflow: visible; }
.org .c { width: 33%; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5), inset 0 -6px 12px rgba(0, 0, 0, .12); animation: dropin .9s cubic-bezier(.3, 1.5, .5, 1) var(--cd, 0s) both, float 4.6s ease-in-out calc(var(--cd, 0s) + 1s) infinite; }
.org .c b { font-weight: 900; font-size: 22px; line-height: 1.2; }
.org .c small { font-size: 10px; margin-top: 3px; }
.org .c::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed rgba(28, 95, 198, .55); animation: spin 16s linear infinite; }
.org .c3::before { animation-direction: reverse; border-color: rgba(246, 197, 0, .9); }
.org .c2::before { border-color: rgba(56, 164, 55, .8); animation-duration: 12s; }
.org .c1 { left: 6%; top: 14%; }
.org .c2 { left: 33.5%; top: 24%; }
.org .c3 { left: 61%; top: 14%; }
@keyframes dropin { from { transform: translateY(-46px) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
.js .org:not(.in) .c { animation: none; opacity: 0; }
.org .lift { position: absolute; top: 52%; width: 16px; height: 60px; overflow: hidden; z-index: 2; }
.org .lift--1 { left: 20%; }
.org .lift--2 { left: calc(50% - 8px); top: 56%; }
.org .lift--3 { left: calc(78% - 16px); }
.org .lift i { position: absolute; left: 1px; width: 12px; height: 12px; border-top: 3px solid var(--navy); border-left: 3px solid var(--navy); transform: rotate(45deg); opacity: 0; animation: rise 2s linear infinite; }
.org .lift i:nth-child(2) { animation-delay: .5s; }
.org .lift i:nth-child(3) { animation-delay: 1s; }
@keyframes rise { 0% { top: 52px; opacity: 0; } 25% { opacity: 1; } 100% { top: 0; opacity: 0; } }
.org .bowl { height: 40%; background: linear-gradient(180deg, #1859c2, var(--navy-d)); -webkit-mask: radial-gradient(ellipse 54% 36% at 50% -4%, transparent 97%, #000 100%); mask: radial-gradient(ellipse 54% 36% at 50% -4%, transparent 97%, #000 100%); animation: bowlrise 1.2s cubic-bezier(.2, .8, .2, 1) both; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
@keyframes bowlrise { from { transform: translateY(40px); } to { transform: none; } }
.js .org:not(.in) .bowl { animation: none; transform: translateY(40px); }
.org .hq { bottom: 6%; }
.org .hq b { font-size: 23px; letter-spacing: .04em; }
.org .hq span { font-size: 12px; }

/* 拠点ページ：カードへジャンプしたとき */
.base { scroll-margin-top: 90px; }
.base:target { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(246, 197, 0, .45), 0 22px 40px -22px rgba(13, 59, 140, .6); animation: targetflash 2.2s ease-out; }
@keyframes targetflash { 0% { transform: scale(1.025); } 100% { transform: none; } }
.gc-more { transition: background .25s, transform .25s; }
.gc-more:hover { background: var(--blue); transform: translateY(-1px); }

@media (max-width: 1000px) {
  .g-top, .g-charts { grid-template-columns: 1fr; }
  .g-top { gap: 28px; }
  .svc { grid-template-columns: 1fr 1fr; }
  .bigstat { font-size: 17px; }
  .bigstat b { font-size: 64px; }
  .exp-steps { grid-template-columns: 1fr 1fr; }
  .expand { padding: 18px 16px 14px; }
}
@media (max-width: 600px) {
  .svc { grid-template-columns: 1fr; }
  .legend--grid { grid-template-columns: 1fr; }
  .donuts--real .donut .ring { width: 112px; }
  .org { width: min(320px, 100%); }
  .org .c b { font-size: 18px; }
}
/* ---------- B案：ヒーローのスライド ---------- */
.hero--b { min-height: 600px; background: #0a2d6e; }
.hero--b > .wrap { position: relative; z-index: 5; }
.ticker-row { position: relative; }
.ticker-row .ticker { border-top: 0; }
.hero--b .copy { padding-top: 96px; }
.hdr { background: #fff; transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; will-change: transform; }
@media (max-width: 1000px) {
  .hdr.is-hidden { transform: translateY(-105%); box-shadow: none; }
  .hero--b .copy { padding-top: 54px; }
}
.hslides { position: absolute; inset: 0; }
.hs { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity 1.3s ease, visibility 0s linear 1.3s; z-index: 1; }
.hs.is-active { visibility: visible; opacity: 1; transition: opacity 1.3s ease, visibility 0s; z-index: 2; }
.hs-bg { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 28, 78, .92) 0, rgba(8, 40, 105, .7) 50%, rgba(8, 40, 105, .22) 100%), var(--img) var(--pos, 50% 50%) / cover; transform: scale(1.14); }
.hs.is-active .hs-bg { animation: hszoom 9s ease-out forwards; }
@keyframes hszoom { from { transform: scale(1.14) translateX(1.5%); } to { transform: scale(1); } }
.hs .wrap { position: relative; height: 100%; }
.hs .copy { position: relative; padding: 112px 0 184px; width: 62%; }
.hero--b .hs .copy > * { animation: none; opacity: 0; }
.hero--b .hs.is-active .copy > * { animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) both; opacity: 1; }
.hero--b .hs.is-active .copy > :nth-child(2) { animation-delay: .15s; }
.hero--b .hs.is-active .copy > :nth-child(3) { animation-delay: .3s; }
.hero--b .hs.is-active .copy > :nth-child(4) { animation-delay: .45s; }
.hero--b .hs.is-active .copy > :nth-child(5) { animation-delay: .6s; }
.hs .kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; font-weight: 900; letter-spacing: .14em; color: var(--yellow); }
.hs .kicker i { width: 34px; height: 3px; background: var(--yellow); display: inline-block; }
.hs h1 { margin: 0 0 14px; }
.hs-ui { position: absolute; left: 0; right: 0; bottom: 62px; z-index: 6; display: flex; align-items: center; gap: 28px; pointer-events: none; max-width: 1240px; margin: 0 auto; }
.hs-ui > * { pointer-events: auto; }
.hs-count { display: flex; align-items: baseline; gap: 8px; font-family: 'Jost', sans-serif; color: rgba(255, 255, 255, .7); }
.hs-count b { font-size: 34px; font-weight: 500; color: #fff; line-height: 1; min-width: 1.6em; }
.hs-count i { width: 26px; height: 1px; background: rgba(255, 255, 255, .6); display: inline-block; align-self: center; }
.hs-count span { font-size: 14px; }
.hs-dots { display: flex; gap: 10px; }
.hs-dots button { width: 64px; height: 20px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.hs-dots button::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.hs-dots button i { position: absolute; left: 0; top: 8px; height: 4px; width: 0; border-radius: 2px; background: var(--yellow); display: block; }
.hs-dots button.is-active i { animation: hsfill var(--iv, 6500ms) linear forwards; }
@keyframes hsfill { from { width: 0; } to { width: 100%; } }
.hslides.is-paused .hs-dots button.is-active i { animation-play-state: paused; }
.hs-arrows { display: flex; gap: 10px; margin-left: auto; }
.hs-arrows button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .08); color: #fff; font-size: 18px; cursor: pointer; transition: background .25s, transform .25s, color .25s; }
.hs-arrows button:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); transform: scale(1.08); }
@media (max-width: 1000px) {
  .hero--b { min-height: 560px; }
  .hs .copy { width: 100%; padding: 70px 0 150px; }
  .hs-ui { bottom: 54px; gap: 16px; }
  .hs-dots button { width: 40px; }
}
@media (max-width: 600px) {
  .hero--b { min-height: 600px; }
  .hs .copy { padding-top: 56px; }
  .hs-arrows { display: none; }
  .hs-dots button { width: 34px; }
  .hs-count b { font-size: 26px; }
  .hs .cta .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .hs, .hs.is-active { transition: none; } .hs.is-active .hs-bg { animation: none; transform: none; } }

/* ---------- 事業内容：構想から保守まで（流れの演出） ---------- */
.onestop { position: relative; padding-top: 26px; }
.onestop::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 3px; background: #dbe6f6; }
.onestop::after { content: ''; position: absolute; left: 0; top: 6px; height: 6px; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--blue), var(--green), var(--yellow)); transform-origin: left; transform: scaleX(0); transition: transform 3.6s cubic-bezier(.4, .1, .2, 1); }
.onestop.in::after { transform: scaleX(1); }
.onestop li { overflow: visible; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .45s, border-top-color .45s, background .45s, opacity .8s; }
.onestop li::before { content: ''; position: absolute; left: 22px; top: -26px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #b9c9e2; transition: background .4s, border-color .4s, transform .4s; z-index: 2; }
.onestop li.on::before, .onestop li.passed::before { background: var(--yellow); border-color: #fff; box-shadow: 0 0 0 4px rgba(246, 197, 0, .45); }
.onestop li.on { transform: translateY(-8px); border-top-color: var(--yellow); background: linear-gradient(180deg, #fffbe8, #fff 55%); box-shadow: 0 22px 36px -22px rgba(13, 59, 140, .65); }
.onestop li.on::before { transform: scale(1.25); }
.onestop li.on b { color: var(--navy); transform: scale(1.12); }
.onestop li b { display: inline-block; transform-origin: left bottom; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), color .4s; }
.onestop .oi { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--blue); transition: background .4s, color .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.onestop .oi svg { width: 22px; height: 22px; }
.onestop li.on .oi { background: var(--navy); color: #fff; transform: rotate(-8deg) scale(1.12); }
.onestop li:not(:last-child)::after { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translate(4px, -50%) rotate(45deg); } }
.js .onestop:not(.in) li { opacity: 0; transform: translateY(26px) scale(.95); }
.onestop li:nth-child(1) { transition-delay: 0s; } .onestop li:nth-child(2) { transition-delay: .18s; } .onestop li:nth-child(3) { transition-delay: .36s; } .onestop li:nth-child(4) { transition-delay: .54s; } .onestop li:nth-child(5) { transition-delay: .72s; }
.onestop.live li { transition-delay: 0s; }
@media (max-width: 1000px) {
  .onestop::before, .onestop::after, .onestop li::before { display: none; }
  .onestop { padding-top: 0; }
  .onestop li.on { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .onestop li:not(:last-child)::after { animation: none; } .onestop::after { transition: none; transform: scaleX(1); } }

/* ---------- 今後の展開：変わるもの／変わらないもの（行をそろえる） ---------- */
.chg, .keep { margin-top: 20px; display: grid; grid-auto-rows: minmax(92px, auto); }
.chg { grid-template-columns: 6.4em 1fr 1fr; grid-template-rows: 46px; border-top: 2px solid var(--navy); }
.keep { grid-template-columns: 1fr; grid-template-rows: 46px; border-top: 2px solid var(--green); }
.chg-h, .keep-h { display: flex; align-items: center; padding: 0 16px; font-size: 12px; font-weight: 700; color: var(--mute); letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.chg-h--new { color: var(--navy); background: #f3f8ff; }
.keep-h { color: var(--green); }
.chg-k, .chg-b, .chg-a, .keep-r { display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--line); padding: 12px 16px; }
.chg-k { font-weight: 900; color: var(--navy); font-size: 14px; padding-left: 4px; }
.chg-b b { font-size: 15px; font-weight: 700; color: var(--ink); }
.chg-b span, .chg-a span, .keep-r span { margin-top: 4px; font-size: 12px; color: var(--mute); line-height: 1.6; }
.chg-a { position: relative; background: #f3f8ff; padding-left: 26px; }
.chg-a::before { content: ''; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; border-top: 3px solid var(--yellow); border-right: 3px solid var(--yellow); transform: translateY(-50%) rotate(45deg); background: #fff; }
.chg-a b { font-size: 16px; font-weight: 900; color: var(--navy); }
.keep-r { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
.keep-r > div { display: flex; flex-direction: column; }
.keep-r i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green); position: relative; box-shadow: 0 0 0 5px rgba(56, 164, 55, .14); }
.keep-r i::after { content: ''; position: absolute; left: 9px; top: 5px; width: 6px; height: 11px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); }
.keep-r b { font-size: 15px; font-weight: 900; color: var(--navy); }
.chg-note { grid-column: 1 / -1; margin: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 46px repeat(3, minmax(92px, auto)) auto; gap: 0 56px; }
.pcol { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
.pcol .phead { align-self: end; }
.pair .chg, .pair .keep { grid-row: span 4; grid-template-rows: subgrid; margin-top: 0; }
.pcol .phead { margin-bottom: 20px; }
.pair .chg { grid-template-columns: 6.4em 1fr 1fr; }
.pair .chg-note { grid-row: 6; }
@media (max-width: 1000px) {
  .pair { grid-template-columns: 1fr; grid-template-rows: none; gap: 34px 0; }
  .pcol { display: block; grid-row: auto; }
  .pair .chg, .pair .keep { grid-row: auto; grid-template-rows: 46px; }
  .pair .chg { grid-template-columns: 5.2em 1fr 1fr; }
  .pair .chg-note { grid-row: auto; }
}

@media (max-width: 1000px) {
  .chg { grid-template-columns: 5.2em 1fr 1fr; }
  .chg-k { font-size: 13px; }
  .chg-b, .chg-a, .chg-h, .keep-r, .keep-h { padding-left: 10px; padding-right: 8px; }
  .chg-a { padding-left: 16px; }
  .chg-b b { font-size: 13px; }
  .chg-a b { font-size: 14px; }
  .chg-b span, .chg-a span { font-size: 11px; }
}

/* ---------- カード全体をリンクにする ---------- */
.svc li { padding: 0; }
.svc li > a { display: block; padding: 22px 22px 18px; color: inherit; height: 100%; }
.go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 900; color: var(--blue); letter-spacing: .04em; }
.go i { font-style: normal; transition: transform .3s; }
.svc li:hover .go i, .ph-link:hover .go i { transform: translateX(5px); }
.ph-link { display: block; color: inherit; }
.ph figcaption .go { display: flex; margin-top: 10px; font-weight: 900; }
.card[id], #position, #machines { scroll-margin-top: 90px; }
.card[id]:target { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(246, 197, 0, .45), 0 22px 40px -22px rgba(13, 59, 140, .6); animation: targetflash 2.2s ease-out; }

/* ---------- 数字で見る成長：コンパクト版（演出はそのまま） ---------- */
.sec:has(.growth2) { padding: 40px 0 36px; }
.growth2 .g-top { gap: 36px; align-items: center; grid-template-columns: .9fr 1.4fr; }
.growth2 .sec-title { font-size: 26px; }
.growth2 .lead { font-size: 14px; line-height: 1.8; margin-top: 6px; }
.growth2 .facts { margin-top: 14px; gap: 8px 18px; }
.growth2 .facts dd { font-size: 18px; }
.expand { padding: 14px 20px 12px; border-radius: 14px; }
.expand > figcaption { font-size: 12px; }
.exp-top { margin-top: 0; }
.exp-num b { font-size: clamp(60px, 6vw, 84px); }
.exp-num span { font-size: 18px; }
.exp-year b { font-size: clamp(26px, 2.6vw, 38px); }
.exp-year i { font-size: 10px; }
.exp-map { aspect-ratio: 2.35; margin-top: -2px; }
.exp-steps { margin-top: 2px; gap: 8px; }
.exp-steps li { padding-top: 6px; border-top-width: 3px; }
.exp-steps b { font-size: 16px; }
.exp-steps span { font-size: 10.5px; }
.growth2 .g-charts { gap: 16px; margin-top: 18px; }
.chart-card { padding: 14px 18px 12px; border-radius: 12px; }
.chart-card > figcaption { font-size: 13px; }
.bars--sales { height: 120px; margin: 26px 0 32px; }
.bars--sales .b em { font-size: 15px; top: -22px; }
.bars--sales .b span { font-size: 10.5px; }
.donuts--real { padding-top: 6px; gap: 14px; }
.donuts--real .donut .ring { width: 104px; }
.donut .lbl { margin: 4px 0; font-size: 10.5px; }
.legend--grid { margin-top: 10px; gap: 4px 16px; }
.legend--grid li { font-size: 11px; }
.growth2 .dummy-note { margin-top: 10px; font-size: 11px; }
.growth2 .more { margin-top: 10px; }
@media (max-width: 1000px) {
  .growth2 .g-top { grid-template-columns: 1fr; gap: 20px; }
  .exp-map { aspect-ratio: 1.9; }
  .sec:has(.growth2) { padding: 30px 0; }
}
@media (max-width: 420px) { .exp-num b { font-size: 60px; } .exp-map { aspect-ratio: 1.6; } }

/* ---------- 成長：見出し1行＋カード3枚を横並び（さらにコンパクト） ---------- */
.growth2 .g-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: end; }
.growth2 .g-head .txt .lead { max-width: 34em; }
.growth2 .g-head .facts { grid-template-columns: repeat(4, auto); max-width: none; margin: 0; gap: 8px 22px; justify-content: end; }
.growth2 .g-head .facts div { white-space: nowrap; }
.growth2 .g-main { display: grid; grid-template-columns: 1.45fr 1fr 1.05fr; gap: 16px; margin-top: 18px; align-items: stretch; }
.growth2 .g-charts { display: contents; }
.growth2 .g-top { display: none; }
.growth2 .expand { display: flex; flex-direction: column; padding: 14px 18px 12px; }
.growth2 .exp-map { flex: 1; aspect-ratio: auto; min-height: 150px; margin: 0; }
.growth2 .exp-num b { font-size: clamp(54px, 5vw, 74px); }
.growth2 .exp-year b { font-size: clamp(24px, 2.2vw, 32px); }
.growth2 .chart-card { display: flex; flex-direction: column; padding: 14px 16px 12px; }
.growth2 .bars--sales { flex: 1; height: auto; min-height: 120px; margin: 30px 0 30px; gap: 8px; }
.growth2 .bars--sales .b { width: 12%; max-width: 40px; }
.growth2 .bars--sales .b em { font-size: 12px; top: -18px; }
.growth2 .bars--sales .b span { font-size: 10px; }
.growth2 .donuts--real { flex: 1; align-items: center; gap: 8px; padding: 6px 0 0; }
.growth2 .donuts--real .donut .ring { width: 92px; }
.growth2 .legend--grid { grid-template-columns: 1fr; gap: 3px; margin-top: 8px; }
.growth2 .legend--grid li { font-size: 10.5px; }
.growth2 .dummy-note { margin-top: 10px; }
@media (max-width: 1100px) { .growth2 .g-head { grid-template-columns: 1fr; gap: 14px; } .growth2 .g-head .facts { justify-content: start; } .growth2 .g-main { grid-template-columns: 1.3fr 1fr 1fr; } .growth2 .donuts--real .donut .ring { width: 78px; } .growth2 .exp-year b { font-size: 24px; } }
@media (max-width: 900px) {
  .growth2 .g-head { grid-template-columns: 1fr; gap: 14px; }
  .growth2 .g-head .facts { justify-content: start; grid-template-columns: repeat(4, auto); gap: 8px 18px; }
  .growth2 .g-main { grid-template-columns: 1fr 1fr; }
  .growth2 .expand { grid-column: 1 / -1; max-width: 680px; width: 100%; margin: 0 auto; }
  .growth2 .exp-map { aspect-ratio: 2.4; flex: none; }
  .growth2 .donuts--real .donut .ring { width: 96px; }
}
@media (max-width: 700px) {
  .growth2 .g-head .facts { grid-template-columns: 1fr 1fr; }
  .growth2 .g-main { grid-template-columns: 1fr; }
  .growth2 .donuts--real .donut .ring { width: 104px; }
  .growth2 .bars--sales { height: 150px; flex: none; }
  .growth2 .exp-map { aspect-ratio: 1.9; }
}
@media (max-width: 420px) { .growth2 .g-head .facts div { white-space: normal; } }

/* ---------- ニュース・お知らせ ---------- */
.news { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--navy); }
.news li { border-bottom: 1px solid var(--line); }
.news a { display: grid; grid-template-columns: 9.5em 7.5em 1fr 28px; gap: 16px; align-items: center; padding: 18px 12px; color: inherit; transition: background .25s, padding-left .25s; }
.news a:hover { background: #f4f8fe; padding-left: 20px; }
.news time { font-family: 'Jost', 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; color: var(--navy); letter-spacing: .02em; }
.news b { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.6; }
.news i { font-style: normal; font-weight: 900; color: var(--blue); text-align: right; transition: transform .3s; }
.news a:hover i { transform: translateX(5px); }
.news a:hover b { color: var(--navy); }
.tag-chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .06em; color: var(--navy); background: #e7f0fc; text-align: center; white-space: nowrap; }
.news--list { margin-top: 24px; }
.article { max-width: 880px; }
.art-meta { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.art-meta time { font-family: 'Jost', 'Noto Sans JP', sans-serif; font-size: 17px; color: var(--navy); }
.art-title { margin: 0 0 20px; padding-bottom: 18px; border-bottom: 3px solid var(--yellow); font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; color: var(--navy); line-height: 1.5; text-wrap: balance; }
.article .prose p { margin: 0 0 14px; font-size: 16px; line-height: 2; }
.art-table { margin: 6px 0 22px; max-width: 640px; }
.art-rel { margin: 26px 0 0; }
.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line); }
.art-nav a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; color: inherit; transition: border-color .25s, background .25s, transform .25s; }
.art-nav a:hover { border-color: var(--blue); background: #f4f8fe; transform: translateY(-2px); }
.art-nav a.next { text-align: right; }
.art-nav small { display: block; font-size: 11px; font-weight: 700; color: var(--mute); letter-spacing: .06em; }
.art-nav b { display: block; margin-top: 4px; font-size: 14px; color: var(--navy); line-height: 1.6; }
.art-back { margin: 26px 0 0; }
@media (max-width: 1000px) {
  .news a { grid-template-columns: 8.6em 1fr 24px; gap: 4px 12px; padding: 16px 6px; }
  .news a .tag-chip { grid-column: 2; grid-row: 1; justify-self: start; }
  .news a time { grid-column: 1; grid-row: 1; }
  .news a b { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }
  .news a i { grid-column: 3; grid-row: 1; }
  .art-nav { grid-template-columns: 1fr; }
  .art-nav a.next { text-align: left; }
}

.g-charts > *, .g-top > * { min-width: 0; }
.chart-card, .expand { max-width: 100%; }
@media (max-width: 420px) {
  .chart-card { padding: 18px 14px 16px; }
  .donuts--real { gap: 8px; }
  .donuts--real .donut .ring { width: 88px; }
  .bars--sales { gap: 6px; padding: 0 2px; }
  .bars--sales .b em { font-size: 13px; }
  .exp-num b { font-size: 76px; }
  .exp-steps b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .org .c, .org .lift i, .org .bowl, .org, .dm-pin .pin-ripple { animation: none !important; }
  .js .org:not(.in) .c, .js .org:not(.in) .bowl { opacity: 1; transform: none; }
}
 /* ---------- 会社理念（フル幅のビジュアル） ---------- */
.phi { position: relative; overflow: hidden; color: #fff; background: #07235c; isolation: isolate; }
.phi-bg { position: absolute; inset: -4%; z-index: -1; background: linear-gradient(100deg, rgba(5, 22, 66, .96) 0, rgba(8, 40, 105, .86) 46%, rgba(10, 52, 130, .55) 100%), url('/images/embedded/ca07bc1526df.jpg') center 30% / cover; animation: kb 26s ease-in-out infinite alternate; }
.phi::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 160px; z-index: 0; background: radial-gradient(ellipse at 50% 100%, rgba(246, 197, 0, .38), transparent 62%); pointer-events: none; }
.phi-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 74px; padding-bottom: 38px; }
.phi .eyebrow { color: var(--yellow); }
.phi h2 { margin: 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; line-height: 1.35; letter-spacing: .02em; text-wrap: balance; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); }
.phi-sub { margin: 14px 0 0; font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; color: #bcd5ff; }
.phi-lead { margin: 18px 0 26px; max-width: 30em; font-size: 15px; line-height: 2; color: rgba(255, 255, 255, .9); }
.btn--yellow { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.btn--yellow:hover { box-shadow: 0 12px 28px -12px rgba(246, 197, 0, .8); }

.phi-orb { position: relative; width: min(420px, 100%); aspect-ratio: 1; margin: 0 auto; }
.phi-orb .ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .35); animation: spin 40s linear infinite; }
.phi-orb .ring--1 { inset: -2%; }
.phi-orb .ring--2 { inset: 9%; border-color: rgba(246, 197, 0, .55); animation-direction: reverse; animation-duration: 30s; }
.phi-orb .el { position: absolute; width: 50%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; mix-blend-mode: screen; animation: orbit 7s ease-in-out infinite; }
.phi-orb .el b { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; text-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.phi-orb .el small { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: .3em; opacity: .85; }
.phi-orb .el--w { left: 25%; top: 0; background: radial-gradient(circle at 40% 35%, rgba(86, 170, 255, .95), rgba(28, 95, 198, .55) 70%); }
.phi-orb .el--a { left: 0; bottom: 6%; background: radial-gradient(circle at 40% 35%, rgba(205, 230, 255, .9), rgba(120, 175, 235, .45) 70%); animation-delay: -2.3s; }
.phi-orb .el--e { right: 0; bottom: 6%; background: radial-gradient(circle at 40% 35%, rgba(120, 214, 96, .95), rgba(40, 140, 60, .55) 70%); animation-delay: -4.6s; }
@keyframes orbit { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(5px, -7px) scale(1.03); } 66% { transform: translate(-6px, 4px) scale(.98); } }
.phi-orb .core { position: absolute; left: 50%; top: 52%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, #fff 0, #fff7cc 55%, var(--yellow) 100%); color: var(--navy); box-shadow: 0 0 0 8px rgba(246, 197, 0, .25), 0 0 46px 10px rgba(246, 197, 0, .55); animation: corepulse 3.2s ease-in-out infinite; z-index: 2; }
.phi-orb .core span { font-size: clamp(11px, 1.1vw, 14px); font-weight: 900; line-height: 1.3; }
@keyframes corepulse { 50% { box-shadow: 0 0 0 16px rgba(246, 197, 0, .12), 0 0 60px 18px rgba(246, 197, 0, .7); } }

.phi-pillars { position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 0 60px 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1240px; }
.phi-pillars li { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 10px; border: 1px solid rgba(255, 255, 255, .22); border-left-width: 0; background: rgba(255, 255, 255, .06); transition: background .3s; }
.phi-pillars li:first-child { border-left-width: 1px; border-radius: 12px 0 0 12px; }
.phi-pillars li:last-child { border-radius: 0 12px 12px 0; }
.phi-pillars li:hover { background: rgba(246, 197, 0, .18); }
.phi-pillars i { font-style: normal; font-family: 'Jost', sans-serif; font-size: 14px; color: var(--yellow); letter-spacing: .1em; }
.phi-pillars b { font-size: clamp(18px, 2vw, 26px); font-weight: 900; letter-spacing: .3em; padding-left: .3em; }
.phi .phi-text > *, .phi .phi-orb { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .phi:not(.in) .phi-text > *, .js .phi:not(.in) .phi-orb { opacity: 0; transform: translateY(26px); }
.phi .phi-text > :nth-child(2) { transition-delay: .1s; }
.phi .phi-text > :nth-child(3) { transition-delay: .2s; }
.phi .phi-text > :nth-child(4) { transition-delay: .3s; }
.phi .phi-text > :nth-child(5) { transition-delay: .4s; }
.phi .phi-orb { transition-delay: .25s; }
html[data-lang='en'] .phi h2 { font-size: clamp(28px, 3.2vw, 42px); }
html[data-lang='en'] .phi-pillars b { letter-spacing: .08em; font-size: clamp(16px, 1.8vw, 22px); }
html[data-lang='en'] .phi-orb .core span { font-size: 11px; }
@media (max-width: 1000px) {
  .phi-in { grid-template-columns: 1fr; gap: 26px; padding-top: 48px; padding-bottom: 16px; }
  .phi-orb { width: min(320px, 82%); }
  .phi-pillars { padding: 0 24px 28px; }
  .phi-pillars b { letter-spacing: .15em; }
}
@media (max-width: 600px) {
  .phi-pillars { padding: 0 18px 24px; }
  .phi-pillars li { flex-direction: column; gap: 2px; padding: 12px 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .phi-bg, .phi-orb .ring, .phi-orb .el, .phi-orb .core { animation: none !important; }
  .js .phi:not(.in) .phi-text > *, .js .phi:not(.in) .phi-orb { opacity: 1; transform: none; }
}
 /* ---------- 言語切替（JP / EN） ---------- */
.lang { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; letter-spacing: .08em; }
.lang button { appearance: none; border: 0; background: transparent; padding: 6px 7px; border-radius: 4px; font: inherit; font-weight: 500; letter-spacing: inherit; color: inherit; cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
.lang button:hover { opacity: 1; background: rgba(28, 95, 198, .1); }
.lang button.on { opacity: 1; font-weight: 900; color: var(--navy); background: rgba(246, 197, 0, .45); }
.lang i { font-style: normal; opacity: .4; }
.hdr--over .lang button.on { color: var(--navy); background: var(--yellow); }
.hdr--over .lang button:hover { background: rgba(255, 255, 255, .2); }

/* ---------- 英語表示 ---------- */
html[data-lang='en'] body { word-break: normal; line-break: auto; text-wrap: pretty; }
html[data-lang='en'] br.pc { display: none; }
html[data-lang='en'] .hero h1 { white-space: normal; font-size: clamp(30px, 3.5vw, 50px); line-height: 1.2; text-wrap: balance; }
html[data-lang='en'] .hero--a .en { display: none; }
html[data-lang='en'] .hero .copy, html[data-lang='en'] .hero--a .copy { width: 50%; }
html[data-lang='en'] .hs .copy { width: 58%; }
html[data-lang='en'] .hero-lead { max-width: 32em; }
html[data-lang='en'] .nav { gap: 24px; font-size: 13px; }
html[data-lang='en'] .sec-title { font-size: 28px; line-height: 1.3; }
html[data-lang='en'] .subhero h1 { font-size: clamp(30px, 3.4vw, 44px); }
html[data-lang='en'] .btn { height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; }
html[data-lang='en'] .ph figcaption { font-size: 16px; }
html[data-lang='en'] .quote { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.7; }
html[data-lang='en'] .stats li > span { font-size: 12px; }
html[data-lang='en'] .stats b small { font-size: 15px; }
html[data-lang='en'] .facts dd small { font-size: 12px; }
html[data-lang='en'] .bigstat { font-size: 17px; }
html[data-lang='en'] .badge { font-size: 12px; }
html[data-lang='en'] .gf-tag { font-size: 12px; }
html[data-lang='en'] .gf li b { font-size: 14px; }
html[data-lang='en'] .tagline { font-size: 18px; }
html[data-lang='en'] .exp-steps span { font-size: 11px; }
/* 英語の住所は長いので、折り返しを許す */
html[data-lang='en'] .ftr .addr p, html[data-lang='en'] .base .addr, html[data-lang='en'] .tel-card small, html[data-lang='en'] .base .tel { white-space: normal; }
html[data-lang='en'] .table div { grid-template-columns: 9em 1fr; }
html[data-lang='en'] .history li { grid-template-columns: 6.5em 1fr; }
html[data-lang='en'] .hbar li { grid-template-columns: 12em 1fr 3.4em; }
html[data-lang='en'] .onestop h3 { font-size: 15px; }
html[data-lang='en'] .cmp th, html[data-lang='en'] .cmp td { min-width: 0; }
html[data-lang='en'] .flow li { grid-template-columns: 6em 1fr; }
html[data-lang='en'] .mails li { grid-template-columns: 11em 1fr; }

@media (max-width: 1000px) {
  .lang { margin-left: auto; }
  html[data-lang='en'] .hero .copy, html[data-lang='en'] .hero--a .copy, html[data-lang='en'] .hs .copy { width: 100%; }
  html[data-lang='en'] .hero h1 { font-size: clamp(28px, 7.4vw, 40px); }
  html[data-lang='en'] .table div { grid-template-columns: 7em 1fr; }
  html[data-lang='en'] .hbar li { grid-template-columns: 9em 1fr 3em; }
  html[data-lang='en'] .mails li { grid-template-columns: 1fr; }
}
.head-row .tag { white-space: normal; max-width: 100%; }
@media (max-width: 600px) {
  .head-row .tag::after { display: none; }
  .lang { display: inline-flex; font-size: 11px; }
  .lang button { padding: 6px 6px; }
  .logo b { font-size: 12px; }
}
 /* 第2版（打ち合わせ反映版）で追加・上書きするスタイル */

/* ---- ヘッダーのロゴ画像（水建 → JAPAN TECHNICAL INC.） ---- */
.logo.logo--reborn img { height: 34px; width: auto; max-width: none; }
@media (max-width: 1180px) { .logo.logo--reborn img { height: 26px; } }
@media (max-width: 1000px) { .logo.logo--reborn img { height: 26px; } }
@media (max-width: 520px) { .logo.logo--reborn img { height: 21px; } }
@media (max-width: 370px) { .logo.logo--reborn img { height: 18px; } }

/* ---- お知らせ：事業所タブ＋一覧（個別ページなし） ---- */
.ntabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.ntabs button { appearance: none; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; padding: 9px 22px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.ntabs button:hover { border-color: var(--blue); }
.ntabs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.nlist { list-style: none; margin: 14px 0 0; padding: 0; border-top: 2px solid var(--navy); }
.nlist > li { padding: 24px 12px 22px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.nlist > li[hidden] { display: none; }
.nlist > li.is-hit { background: #f4f8fe; }
.nl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.nl-head time { font-family: 'Jost', 'Noto Sans JP', sans-serif; font-size: 15px; font-weight: 500; color: var(--navy); }
.tag-chip--kind { background: #eef3ea; }
.nlist h3 { margin: 0 0 10px; font-size: 19px; font-weight: 900; color: var(--navy); line-height: 1.6; }
.nlist p { margin: 0 0 8px; font-size: 15px; line-height: 2; }
.nl-rel a { font-weight: 700; color: var(--blue); }
.nl-empty { margin: 24px 0 0; color: var(--mute); }
.nl-empty[hidden] { display: none; }

/* ---- 加工事業を目立たせる ---- */
.svc li.svc-focus { grid-column: 1 / -1; background: linear-gradient(120deg, #e4eefc, #fff 70%); border-color: #b9cdef; }
.svc li.svc-focus b { font-size: 44px; color: #b4cbee; }
.svc li.svc-focus h3 { font-size: 26px; margin: 10px 0 12px; }
.svc li.svc-focus p { font-size: 15px; line-height: 2; max-width: 36em; }
.svc li.svc-focus .go { font-size: 14px; }
.svc li.svc-focus > a { padding: 30px 30px 24px; }
@media (min-width: 1001px) { .svc li.svc-focus { grid-column: span 2; grid-row: span 2; } .svc li.svc-focus > a { display: flex; flex-direction: column; justify-content: center; } }

/* ---- 会社情報：行動指針（受領待ち）・SDGs ---- */
.action-box { margin-top: 36px; padding: 18px 22px; border: 1px dashed var(--line); border-radius: 10px; background: #fafcff; }
.action-box .sub-title { margin: 0 0 8px; }
.sdgs-fig { margin: 0; text-align: center; }
.sdgs-fig img { max-width: 100%; height: auto; max-height: 260px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.sdgs-fig figcaption { margin-top: 10px; font-size: 13px; color: var(--mute); }

/* ---- 数字で見る：項目のダミー表示 ---- */
.facts dt .dtag { margin-left: 6px; }

/* ---- 事業6つ：1枚目を全幅にしたとき、最後の1枚を2列分にして行の端をそろえる ---- */
@media (min-width: 601px) and (max-width: 1000px) { .svc li:last-child { grid-column: span 2; } }

/* ---- 事業の導入文：2行にそろえる（折り返さない） ---- */
.lead--wide { max-width: none; }

/* ---- 数字で見る成長：2段構成（上段＝加工・施工実績数を大きく／下段＝拠点＋事業割合） ---- */
.growth2 .wide { display: grid; grid-template-columns: .85fr 1.6fr; gap: 0; margin: 22px 0 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 30px 56px -38px rgba(13, 59, 140, .5); }
.wide-l { padding: 34px 34px 30px; color: #fff; background: linear-gradient(150deg, #0a2f73, #1c5fc6); display: flex; flex-direction: column; justify-content: center; }
.wide-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 900; letter-spacing: .08em; color: #f6c500; display: flex; align-items: center; gap: 8px; }
.wide-l h3 { margin: 0 0 18px; font-size: 32px; line-height: 1.4; font-weight: 900; }
.wide-num { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-family: 'Jost', 'Noto Sans JP', sans-serif; }
.wide-num span { font-size: 13px; color: rgba(255, 255, 255, .75); font-family: 'Noto Sans JP', sans-serif; }
.wide-num b { font-size: 54px; font-weight: 500; line-height: 1; }
.wide-num b:last-of-type { color: #f6c500; font-size: 68px; }
.wide-num small { font-size: 15px; font-weight: 700; }
.wide-num i { font-style: normal; font-size: 26px; color: #f6c500; margin: 0 6px; }
.wide-times { margin: 16px 0 0; font-size: 16px; font-weight: 700; }
.wide-times b { font-size: 30px; color: #f6c500; margin: 0 3px; }
.wide-note { margin: 12px 0 0; font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.wide-r { padding: 22px 34px 20px; min-width: 0; }
.wide-cap { font-size: 15px; font-weight: 900; color: var(--navy); }
.wide-cap small { font-weight: 500; font-size: 12px; color: var(--mute); margin-left: 6px; }
.wlegend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 18px; font-size: 13px; font-weight: 700; color: var(--ink); }
.wlegend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.c-kako { background: #f6c500; } .c-sekou { background: #1c5fc6; }
.wbars { position: relative; display: flex; align-items: flex-end; justify-content: space-around; gap: 16px; height: 370px; padding-top: 78px; box-sizing: border-box; margin: 14px 0 34px; border-bottom: 1px solid var(--line); }
.wb { position: relative; flex: 1; max-width: 120px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.wb .stack { position: relative; display: flex; flex-direction: column; width: 100%; }
.wb .tot { position: absolute; top: -26px; left: 0; right: 0; text-align: center; font-style: normal; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 18px; color: var(--navy); transition: opacity .6s .9s; }
.wb .seg { min-height: 22px; display: flex; align-items: center; justify-content: center; transform-origin: bottom; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.wb .seg b { font-size: 13px; font-weight: 900; font-family: 'Jost', sans-serif; }
.seg--kako { background: #f6c500; color: #4a3a00; border-radius: 6px 6px 0 0; }
.seg--sekou { background: linear-gradient(180deg, #2b6fd6, #1c5fc6); color: #fff; }
.wb .yr { position: absolute; left: 0; right: 0; bottom: -28px; text-align: center; font-family: 'Jost', sans-serif; font-size: 14px; font-weight: 500; color: var(--ink); }
.js .wide:not(.in) .seg { transform: scaleY(0); }
.js .wide:not(.in) .tot { opacity: 0; }
.growth2 .g-main { grid-template-columns: 1fr; margin-top: 18px; }
@media (max-width: 1000px) {
  .growth2 .wide { grid-template-columns: 1fr; }
  .wide-l { padding: 26px 24px; }
  .wide-r { padding: 22px 20px 20px; }
  .growth2 .g-main { grid-template-columns: 1fr; }
  .growth2 .expand { max-width: none; }
}
@media (max-width: 520px) {
  .wide-l h3 { font-size: 26px; }
  .wide-num b { font-size: 44px; } .wide-num b:last-of-type { font-size: 54px; }
  .wbars { height: 230px; gap: 8px; }
  .wb .tot { font-size: 14px; top: -22px; } .wb .seg b { font-size: 11px; }
}
/* 数字（創業・実績数など）は、見出し文の下に1行で並べる */
.growth2 .g-head { grid-template-columns: 1fr; gap: 16px; }
.growth2 .g-head .facts { justify-content: start; }
@media (max-width: 700px) { .growth2 .g-head .facts div { white-space: normal; } }

/* ---- お知らせ一覧：種類の絞り込み・スクロール欄・移転の前後 ---- */
.nfilter { margin-top: 18px; display: grid; gap: 8px; }
.nfilter .ntabs { margin: 0; }
.ntabs--kind button { font-size: 13px; padding: 7px 16px; }
.ntabs--kind button.on { background: var(--blue); border-color: var(--blue); }
.nl-count { margin: 16px 0 6px; font-size: 14px; color: var(--mute); }
.nl-count b { font-size: 20px; color: var(--navy); margin-right: 2px; }
.nbox { border-top: 0; }
.nbox .nlist { margin: 0; }
.nbox .nlist > li { padding: 26px 12px 24px; position: relative; }
.nbox .nl-empty { padding: 28px 12px; margin: 0; }
.tag-kind { background: #eef3ea; }
.tag-kind--0 { background: #ffe9c7; color: #8a4b00; }
.tag-kind--1 { background: #e3f3e2; color: #1d6b1a; }
.tag-kind--2 { background: #fff1c2; color: #6b5200; }
.tag-kind--3 { background: #e7f0fc; }
.tag-kind--4 { background: #eceff4; color: #4a5568; }
.tag-plan { background: #fff; border: 1px dashed #c98a1b; color: #8a4b00; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nl-move { margin: 12px 0 8px; display: grid; gap: 6px; font-size: 14px; line-height: 1.8; }
.nl-move > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 8px 14px; border-radius: 8px; background: #f5f8fd; }
.nl-move > div:last-child { background: #fff8dc; }
.nl-move dt { font-weight: 900; color: var(--navy); }
.nl-move dd { margin: 0; }
@media (max-width: 520px) { .nl-move > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---- 拡張計画：詳細欄と予定地の写真枠 ---- */
.nl-plan { margin: 14px 0 8px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; }
.nl-plan dl { margin: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.8; }
.nl-plan dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 10px; padding: 8px 14px; border-radius: 8px; background: #fffaf0; border: 1px solid #f1dfb8; }
.nl-plan dt { font-weight: 900; color: var(--navy); }
.nl-plan dd { margin: 0; }
.nl-photo { min-height: 150px; border: 1px dashed var(--line); border-radius: 10px; background: repeating-linear-gradient(135deg, #f5f8fd 0 10px, #fff 10px 20px); display: grid; place-items: center; text-align: center; color: var(--mute); font-size: 14px; font-weight: 700; }
.nl-photo small { display: block; font-weight: 500; font-size: 12px; }
@media (max-width: 760px) { .nl-plan { grid-template-columns: 1fr; } .nl-plan dl > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---- トップのお知らせ：事業所＋「計画・予定」の2つのラベルを横に並べる ---- */
.news a { grid-template-columns: 11em 12em 1fr 28px; }
.news .chips { flex-wrap: nowrap; }
@media (max-width: 760px) { .news a { grid-template-columns: 1fr 28px; } .news a .chips { grid-column: 1; } }
/* ---- お知らせ一覧：サムネイル付きの行（参考：東組の「お知らせ」構成）＋絞り込みバー ---- */
.nfilter { gap: 10px; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: 10px; background: #f1f5fb; border: 1px solid var(--line); }
.fbar .fl { font-size: 13px; font-weight: 900; color: var(--navy); white-space: nowrap; }
.fbar .ntabs { margin: 0; }
.fbar .ntabs button { padding: 7px 18px; font-size: 13px; }
.fbar .ntabs--kind button.on, .fbar .ntabs button.on { background: var(--navy); border-color: var(--navy); }
.nlist--rows > li { padding: 0; border-bottom: 1px solid var(--line); }
.nlist--rows > li.is-hit { background: #f4f8fe; }
.nr { display: grid; grid-template-columns: 220px 1fr; gap: 26px; padding: 26px 12px 22px; align-items: center; }
.nr-img { position: relative; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; background: #eef3fa; border: 1px solid var(--line); }
.nr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nr-img--badge, .nr-img--logo { background: #fff; display: grid; place-items: center; }
.nr-img--badge img { width: auto; max-width: 78%; max-height: 78%; object-fit: contain; }
.nr-img--logo img { width: 78%; height: auto; object-fit: contain; }
.nr-img .img-note { right: 6px; bottom: 6px; }
.nr-main h3 { margin: 6px 0 8px; font-size: 19px; line-height: 1.6; font-weight: 900; color: var(--navy); }
.nr-lead { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--ink); }
.nr-toggle { appearance: none; margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font: inherit; font-size: 13px; font-weight: 900; padding: 7px 18px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.nr-toggle:hover { background: var(--blue); color: #fff; }
.nr-toggle i { font-style: normal; font-size: 15px; line-height: 1; }
.nr-toggle .t-close { display: none; }
.is-open .nr-toggle .t-open { display: none; }
.is-open .nr-toggle .t-close { display: inline; }
.is-open .nr-toggle i { transform: rotate(45deg); }
.nr-more { display: none; padding: 0 12px 26px 258px; }
.is-open .nr-more { display: block; }
.nr-more p { margin: 0 0 8px; font-size: 14.5px; line-height: 2; }
@media (max-width: 760px) {
  .nr { grid-template-columns: 1fr; gap: 14px; padding: 20px 4px 18px; }
  .nr-img { max-width: 360px; }
  .nr-more { padding: 0 4px 22px; }
}

/* ---- トップ：3つの強み ---- */
.st-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.st-list li { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; position: relative; transition: transform .35s, box-shadow .35s, border-color .35s; }
.st-list li::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--green), var(--yellow, #f6c500)); }
.st-list li:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 18px 34px -22px rgba(13, 59, 140, .6); }
.st-list a { display: block; padding: 26px 24px 20px; color: inherit; height: 100%; }
.st-list b { font-family: 'Jost', sans-serif; font-size: 34px; font-weight: 500; color: #c9d8ef; line-height: 1; }
.st-list h3 { margin: 8px 0 10px; font-size: 20px; font-weight: 900; color: var(--navy); line-height: 1.5; }
.st-list p { margin: 0; font-size: 14px; line-height: 1.95; }
.st-list .go { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 900; color: var(--blue); }
.st-list li:hover .go i { transform: translateX(5px); }
.st-list .go i { display: inline-block; font-style: normal; transition: transform .3s; }
@media (max-width: 900px) { .st-list { grid-template-columns: 1fr; } }


/* ---- 会社理念：理念の全文 ---- */
.phi-full { margin: 18px 0 22px; padding: 12px 16px; border-left: 3px solid #f6c500; background: rgba(255, 255, 255, .08); font-size: 14px; line-height: 1.9; color: #fff; max-width: 34em; }
.phi-full b { display: block; margin-bottom: 2px; font-size: 12px; letter-spacing: .1em; color: #f6c500; }

/* ---- 経営方針・品質方針・安全方針 ---- */
.pol-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start; }
.pol-box { padding: 24px 26px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.pol-box--solo { margin-top: 22px; }
.pol-box--lead { grid-column: 1 / -1; background: linear-gradient(100deg, #eef4fd, #fff 70%); }
.pol-box--lead p { margin: 0 0 6px; font-size: 16px; line-height: 2; font-weight: 700; color: var(--navy); }
.pol-box .sub-title { margin: 0 0 12px; }
.pol-box .sub-title small { margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--mute); }
.pol-box .policy { margin: 0; }
@media (max-width: 900px) { .pol-grid { grid-template-columns: 1fr; } }

/* ---- 認証・SDGs：華やかな見せ方（回る虹色の縁・きらめき） ---- */
.certs { position: relative; overflow: hidden; padding: 84px 0 88px; background: linear-gradient(180deg, #f1f6fd 0%, #ffffff 100%); }
.certs-bg i { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .55; animation: cbob 9s ease-in-out infinite; }
.certs-bg i:nth-child(1) { width: 300px; height: 300px; left: -90px; top: 30px; background: radial-gradient(circle, #8fc4ff, transparent 70%); }
.certs-bg i:nth-child(2) { width: 240px; height: 240px; right: 6%; top: -50px; background: radial-gradient(circle, #b9d6ff, transparent 70%); animation-delay: -3s; }
.certs-bg i:nth-child(3) { width: 320px; height: 320px; right: -100px; bottom: 60px; background: radial-gradient(circle, #a8e6c4, transparent 70%); animation-delay: -5s; }
.certs-bg i:nth-child(4) { width: 200px; height: 200px; left: 30%; bottom: -70px; background: radial-gradient(circle, #cfe3ff, transparent 70%); animation-delay: -7s; }
@keyframes cbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
.certs .wrap { position: relative; z-index: 1; }
.cert-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cert { position: relative; padding: 4px; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(13, 59, 140, .55); transition: transform .4s; }
.cert:hover { transform: translateY(-8px) scale(1.01); }
.cert::before { content: ''; position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; background: conic-gradient(#e5243b, #dda63a, #4c9f38, #c5192d, #ff3a21, #26bde2, #fcc30b, #a21942, #fd6925, #dd1367, #fd9d24, #bf8b2e, #3f7e44, #0a97d9, #56c02b, #00689d, #19486a, #e5243b); animation: cspin 9s linear infinite; }
@keyframes cspin { to { transform: rotate(360deg); } }
.cert-in { position: relative; z-index: 1; height: 100%; padding: 44px 24px 28px; border-radius: 22px; background: linear-gradient(180deg, #fff, #f7fbff); text-align: center; overflow: hidden; }
.cert-in::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent); transform: skewX(-18deg); animation: cshine 5s ease-in-out infinite; pointer-events: none; }
.cert:nth-child(2) .cert-in::after { animation-delay: .8s; } .cert:nth-child(3) .cert-in::after { animation-delay: 1.6s; }
@keyframes cshine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.cert-year { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-family: 'Jost', sans-serif; font-size: 72px; font-weight: 600; line-height: 1; color: #e3ecf9; letter-spacing: .02em; }
.cert-img { position: relative; height: 150px; display: grid; place-items: center; }
.cert-img img { max-width: 80%; max-height: 150px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(13, 59, 140, .25)); }
.cert h3 { position: relative; margin: 14px 0 4px; font-size: 24px; font-weight: 900; color: var(--navy); }
.cert-sub { position: relative; margin: 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.cert-date { position: relative; display: inline-block; margin: 14px 0 0; padding: 5px 16px; border-radius: 999px; font-size: 13px; font-weight: 900; color: #fff; background: linear-gradient(90deg, #1c5fc6, #38a437); }
.cert--sdgs .cert-date { background: linear-gradient(90deg, #e5243b, #fd9d24, #4c9f38, #0a97d9); }
.cert-support { margin-top: 34px; padding: 24px 28px; border-radius: 16px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: center; }
.cert-support ul { grid-column: 2; }
.cert-support h3 { margin: 0; font-size: 18px; font-weight: 900; color: var(--navy); }
.cert-support p { margin: 0; font-size: 14px; line-height: 1.9; }
.cert-support ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cert-support li { padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 900; color: var(--navy); background: #e7f0fc; }
@media (max-width: 960px) { .cert-list { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .cert-support { grid-template-columns: 1fr; } .certs { padding: 56px 0 60px; } }
@media (prefers-reduced-motion: reduce) { .cert::before, .cert-in::after, .certs-bg i { animation: none; } }

/* ---- 行動指針：サイト全体のカードの雰囲気に合わせた見せ方 ---- */
.ac-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ac-grid li { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 22px 20px 26px; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.ac-grid li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--blue), var(--green)); }
.ac-grid li:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 16px 30px -22px rgba(13, 59, 140, .6); }
.ac-grid b { flex: none; width: 2.1em; font-family: 'Jost', sans-serif; font-size: 32px; font-weight: 500; line-height: 1; color: #c9d8ef; }
.ac-grid p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.8; color: var(--navy); }
.ac-sign { margin: 18px 0 0; text-align: right; font-size: 13px; color: var(--mute); }
@media (max-width: 800px) { .ac-grid { grid-template-columns: 1fr; } .ac-grid li { padding: 16px 16px 16px 22px; gap: 14px; } .ac-grid b { font-size: 26px; } .ac-grid p { font-size: 15px; } }

/* ---- 棒グラフ：右肩上がりの矢印が、左から描かれていく ---- */
.wbars .trend { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 3; }
.wide, .wide-r { overflow: visible; }
.wide { overflow: hidden; }
.trend .tl { fill: none; stroke: #e5243b; stroke-width: 6; stroke-linecap: butt; filter: drop-shadow(0 3px 4px rgba(229, 36, 59, .35)); }
.trend .th { fill: #e5243b; transform-box: fill-box; transform-origin: center; stroke: #e5243b; stroke-width: 2; stroke-linejoin: round; }
.trend .tc { fill: #fff; stroke: #e5243b; stroke-width: 3; }
.js .wide:not(.in) .tl { stroke-dashoffset: var(--len, 1000) !important; }
.js .wide.in .tl { stroke-dashoffset: 0 !important; transition: stroke-dashoffset 1.1s cubic-bezier(.5, 0, .2, 1) 1s; }
.js .wide:not(.in) .th, .js .wide:not(.in) .tc { opacity: 0; }
.js .wide.in .th { opacity: 1; transition: opacity .2s 2s; animation: tpulse 2.2s ease-in-out 2.4s infinite; }
.js .wide.in .tc { opacity: 1; transition: opacity .4s .8s; }
@keyframes tpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@media (max-width: 520px) { .wbars { height: 310px; padding-top: 70px; } }
@media (prefers-reduced-motion: reduce) { .js .wide.in .th { animation: none; } .js .wide.in .tl { transition: none; } }

/* ---- 文章の区切り：読点・文節のまとまりで改行（対応ブラウザ）。改行位置の指定がない文章も、不自然な位置で折り返さない ---- */
body { word-break: auto-phrase; line-break: strict; }

/* ---- 設備紹介：会社全体の設備カード（カタログ画像は受領後） ---- */
.eq-grid { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.eq { display: grid; grid-template-columns: 200px 1fr; gap: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.eq:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 16px 30px -22px rgba(13, 59, 140, .6); }
.eq:last-child { grid-column: 1 / -1; }
.eq--coming { background: linear-gradient(110deg, #fff8dc, #fff 55%); border-color: #f1dfb8; }
.eq-img { min-height: 170px; display: grid; place-items: center; text-align: center; padding: 10px; background: repeating-linear-gradient(135deg, #f5f8fd 0 10px, #fff 10px 20px); border-right: 1px dashed var(--line); color: var(--mute); font-size: 13px; font-weight: 700; line-height: 1.6; }
.eq-img small { display: block; font-weight: 500; font-size: 11.5px; }
.eq-body { padding: 20px 22px 18px; }
.eq-body h3 { margin: 0 0 12px; font-size: 18px; font-weight: 900; color: var(--navy); line-height: 1.5; }
.eq-body h3 .badge { margin-left: 8px; font-size: 11px; vertical-align: 2px; }
.eq-spec { margin: 0; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.8; }
.eq-spec > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; }
.eq-spec dt { font-weight: 900; color: var(--navy); }
.eq-spec dd { margin: 0; }
@media (max-width: 1000px) { .eq-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .eq { grid-template-columns: 1fr; } .eq-img { min-height: 110px; border-right: 0; border-bottom: 1px dashed var(--line); } .eq-spec > div { grid-template-columns: 1fr; gap: 0; } }

/* ---- 数字で見る成長：売上の推移（5年ごと→毎期）と、取引先の分野別 ---- */
.g-row2 { margin-top: 18px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: stretch; }
.g-row2 .chart-card { display: flex; flex-direction: column; }
.sbars { flex: 1; min-height: 250px; margin: 26px 0 30px; padding-top: 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); }
.sb { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.sb i { display: block; width: 100%; max-width: 40px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #2b6fd6, #1c5fc6); transform-origin: bottom; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.sb i { position: relative; }
.sb em { position: absolute; left: 50%; bottom: 100%; margin-bottom: 4px; transform: translateX(-50%); font-style: normal; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 12px; color: var(--navy); white-space: nowrap; transition: opacity .6s .8s; }
.sb { --h: 0; }
.sb span { position: absolute; bottom: -24px; font-family: 'Jost', sans-serif; font-size: 11px; color: var(--ink); }
.sb--gap { margin-left: 14px; }
.sb--gap::before { content: ''; position: absolute; left: -12px; top: 12%; bottom: -10px; border-left: 1px dashed #b9c8e0; }
.js .sbars:not(.in) i { transform: scaleY(0); }
.js .sbars:not(.in) em { opacity: 0; }
.rbars { list-style: none; margin: 22px 0 14px; padding: 0; display: grid; gap: 16px; }
.rbars li { display: grid; grid-template-columns: 9.5em 1fr 3.4em; gap: 12px; align-items: center; font-size: 13px; }
.rbars .rl { font-weight: 700; color: var(--navy); line-height: 1.5; }
.rbars .rt { height: 16px; border-radius: 999px; background: #eef3fa; overflow: hidden; }
.rbars .rt i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1c5fc6, #38a437); transform-origin: left; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.rbars b { font-family: 'Jost', sans-serif; font-size: 20px; font-weight: 500; color: var(--navy); text-align: right; }
.rbars b small { font-size: 12px; margin-left: 2px; }
.js .rbars:not(.in) .rt i { transform: scaleX(0); }
.g-row2 .fine { margin: auto 0 0; }
@media (max-width: 1000px) { .g-row2 { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .rbars li { grid-template-columns: 7em 1fr 3em; gap: 8px; } .sbars { gap: 4px; } .sb em { font-size: 10px; } .sb span { font-size: 9.5px; } }

/* ---- 英語表示：日本語版で英字を併記している部分は、英語では二重にならないよう非表示 ---- */
html[data-lang='en'] .eyebrow,
html[data-lang='en'] .subhero .en,
html[data-lang='en'] .hero .copy .en,
html[data-lang='en'] .ftr .lg small { display: none; }

/* ---- 事業内容：左に内容・右に写真のブロック（参考：東組の事業内容ページの構成） ---- */
.bz-list { margin-top: 18px; }
.bz { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); overflow: hidden; }
.bz:first-child { border-top: 0; }
.bz::before { content: attr(data-bg); position: absolute; left: -8px; top: 6px; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 110px; line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1.5px rgba(13, 59, 140, .09); white-space: nowrap; pointer-events: none; }
.bz-text { position: relative; z-index: 1; }
.bz-no { margin: 0 0 8px; display: flex; align-items: baseline; gap: 12px; }
.bz-no b { font-family: 'Jost', sans-serif; font-size: 44px; font-weight: 500; line-height: 1; color: #b4cbee; }
.bz-no .en-label { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--blue); }
.bz h3 { margin: 0 0 14px; font-size: 27px; font-weight: 900; color: var(--navy); line-height: 1.45; }
.bz-catch { margin: 0 0 14px; font-size: 18px; font-weight: 700; line-height: 1.8; color: var(--ink); }
.bz-catch em { font-style: normal; color: var(--blue); background: linear-gradient(transparent 62%, #fff0a8 62%); padding: 0 2px; }
.bz-copy { margin: 0 0 16px; font-size: 15px; line-height: 2; }
.bz-list-pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bz-list-pts li { position: relative; padding-left: 26px; font-size: 14.5px; font-weight: 700; line-height: 1.7; color: var(--navy); }
.bz-list-pts li::before { content: ''; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 3px solid var(--green); border-bottom: 3px solid var(--green); transform: rotate(-45deg); }
.bz-img { position: relative; z-index: 1; border-radius: 6px 36px 6px 36px; overflow: hidden; box-shadow: 0 30px 50px -28px rgba(13, 59, 140, .55); aspect-ratio: 4 / 3; }
.bz-img::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); pointer-events: none; }
.bz-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.bz:hover .bz-img img { transform: scale(1.05); }
@media (max-width: 900px) {
  .bz { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .bz-img { order: -1; aspect-ratio: 16 / 10; }
  .bz::before { font-size: 64px; }
  .bz h3 { font-size: 22px; } .bz-catch { font-size: 16px; }
}
html[data-lang='en'] .bz-no .en-label { display: none; }
html[data-lang='en'] .bz::before { display: none; }

/* 数字で見る成長の導入文は、折り返さず1行で見せる（狭い画面では自然に折り返す） */
.growth2 .g-head .txt .lead { max-width: none; }

/* ---- スマホ幅の配置の見直し（地球儀とヒーローの間隔／設備ページのNEW帯／お知らせの画像） ---- */
@media (max-width: 1300px) { .wrap.newbanner { width: calc(100% - 36px); } }
@media (max-width: 760px) {
  .wrap.loc { padding-top: 48px; }
  .loc-copy h2 { font-size: clamp(27px, 8.6vw, 38px); line-height: 1.5; }
  .loc-copy h2 em { font-size: 1.35em; }
  .nr { grid-template-columns: minmax(0, 1fr); }
  .nr-main, .nr-img { min-width: 0; }
  .nr-img { max-width: 100%; }
}

/* ---- 設備ページのNEW帯：スマホ幅で上下の余白が消えていた（.wrap の指定に上書きされていた）のを修正 ---- */
.wrap.newbanner { padding: 30px 22px; }
@media (min-width: 1001px) { .wrap.newbanner { padding: 34px 44px; } }

/* ---- 端末幅ごとの収まり調整（スマホ・タブレット） ---- */
.sp { display: none; }
@media (max-width: 560px) { .sp { display: inline; } .sep { display: none; } }
@media (max-width: 1000px) {
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pcol { min-width: 0; }
  .chg, .pair .chg { grid-template-columns: 4.8em minmax(0, 1fr) minmax(0, 1.1fr); }
  .chg-a b, .chg-b b, .chg-a span, .chg-b span { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .chg-k { font-size: 12px; }
  .chg-b b, .chg-a b { font-size: 12.5px; }
  .chg-b span, .chg-a span { font-size: 10.5px; }
  .chg-b, .chg-a, .chg-h { padding-left: 8px; padding-right: 6px; }
}
@media (max-width: 1100px) { .eq-grid { grid-template-columns: 1fr; } }
.eq-body { min-width: 0; }
.keep-r { justify-content: flex-start; }

/* ---- スマホ幅の収まり（目視で見つかった箇所の調整） ---- */
@media (max-width: 700px) {
  /* 変わるもの：矢印を文字に重ねず、項目名を割らない */
  .chg, .pair .chg { grid-template-columns: 5.6em minmax(0, 1fr) minmax(0, 1.1fr); }
  .chg-k { padding-left: 0; word-break: keep-all; line-break: strict; }
  .chg-a { padding-left: 22px; }
  .chg-a::before { left: 2px; width: 9px; height: 9px; }
  .chg-b b, .chg-a b { word-break: keep-all; }
  /* 資格取得のサポート：1列にして読みやすく */
  .cert-support { grid-template-columns: minmax(0, 1fr); }
  .cert-support ul { grid-column: auto; }
  /* 実績数の「件」を、数字の横で折り返さない */
  .wide-num { gap: 2px 6px; }
  .wide-num b { font-size: 40px; }
  .wide-num b:last-of-type { font-size: 50px; }
  .wide-num small, .wide-num span, .wide-num i { white-space: nowrap; }
  .wide-num i { margin: 0 2px; font-size: 20px; }
  /* 取引先の分野名：1文字だけ落ちないよう、ラベル幅を広げる */
  .rbars li { grid-template-columns: 8.4em minmax(0, 1fr) 3em; }
  .rbars .rl { font-size: 12px; word-break: keep-all; }
  /* お知らせの見出し：長いカタカナ語の途中で割れにくくする */
  .nr-main h3 { font-size: 17px; }
}
@media (max-width: 700px) {
  .chg-a b { font-size: 12px; letter-spacing: -.02em; }
  .chg-b b { font-size: 12px; }
  .chg, .pair .chg { grid-template-columns: 5em minmax(0, 1fr) minmax(0, 1.25fr); }
}
@media (max-width: 360px) { .chg-a b { font-size: 11px; } }
@media (max-width: 360px) {
  .chg, .pair .chg { grid-template-columns: 3.9em minmax(0, 1fr) minmax(0, 1.35fr); }
  .chg-k { font-size: 11px; }
  .chg-b, .chg-a, .chg-h { padding-left: 6px; padding-right: 4px; }
  .chg-a { padding-left: 16px; }
  .chg-b b, .chg-a b { font-size: 10.5px; letter-spacing: -.03em; }
  .chg-b span, .chg-a span { font-size: 10px; }
}

/* ---- スマホ・タブレット：メニュー内で、いま開いているページが分かるように ---- */
@media (max-width: 1000px) {
  .nav a { position: relative; }
  .nav a.is-current { padding: 15px 4px; box-shadow: none; color: var(--blue) !important; background: linear-gradient(90deg, #eef4fd, rgba(238, 244, 253, 0)); font-weight: 900; }
  }

/* ---- スマホ幅：地球儀の説明と、信頼数字の帯の間に余白 ---- */
@media (max-width: 1000px) {
  .wrap.loc { padding-bottom: 48px; }
  .loc-copy .hint-box { margin-bottom: 0; }
}


/* ---- 設備セクション：説明文を1行に／各カードの「詳しく見る」を下でそろえる／ほかにも設備がある演出 ---- */
@media (min-width: 1001px) { .lead--one { white-space: nowrap; } }
.photos--4 { align-items: stretch; }
.photos--4 .ph, .photos--4 .ph-link { height: 100%; }
.photos--4 .ph-link { display: flex; flex-direction: column; }
.photos--4 .ph figcaption { flex: 1; display: flex; flex-direction: column; }
.photos--4 .ph figcaption .go { margin-top: auto; padding-top: 12px; }
.fac-more { margin: 26px 0 0; padding: 14px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border: 1px dashed #b9c8e0; border-radius: 12px; background: linear-gradient(90deg, #f4f8fe, rgba(244, 248, 254, 0)); font-size: 14px; font-weight: 700; color: var(--navy); }
.fac-more a { margin-left: auto; font-weight: 900; color: var(--blue); white-space: nowrap; }
.fac-more .dots { display: inline-flex; gap: 5px; }
.fac-more .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: dotwave 1.6s ease-in-out infinite; }
.fac-more .dots i:nth-child(2) { animation-delay: .2s; background: var(--green); } .fac-more .dots i:nth-child(3) { animation-delay: .4s; background: #f6c500; }
@keyframes dotwave { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-5px); opacity: 1; } }
@media (max-width: 760px) { .fac-more { padding: 14px 16px; } .fac-more a { margin-left: 0; } }

/* ---- 成長ロードマップ：線が伸び、点が順に灯り、2030年が弾んで光る（矢印が円に重ならない） ---- */
.road--b .steps::before { right: 164px; }
.road--b .steps::after { right: 152px; opacity: 1; transition: opacity .3s 1.7s; }
.js .road:not(.in) .steps::after { opacity: 0; }
.road .step .dot { transition: transform .5s .1s, background .4s, box-shadow .4s; }
.js .road.in .step:nth-child(1) .dot { animation: dotping 2.6s ease-out 1.2s infinite; }
.js .road.in .step:nth-child(2) .dot { animation: dotping 2.6s ease-out 2s infinite; }
@keyframes dotping { 0% { box-shadow: 0 0 0 0 rgba(28, 95, 198, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(28, 95, 198, 0); } }
.road--b .goal-big { position: relative; }
.js .road.in .goal-big .disc { animation: discin .9s cubic-bezier(.3, 1.6, .5, 1) 1.5s both, discglow 2.8s ease-in-out 2.4s infinite; }
@keyframes discin { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes discglow { 0%, 100% { box-shadow: 0 12px 28px -12px rgba(13, 59, 140, .8), 0 0 0 0 rgba(246, 197, 0, .45); } 50% { box-shadow: 0 12px 28px -12px rgba(13, 59, 140, .8), 0 0 0 16px rgba(246, 197, 0, 0); } }
@keyframes chev { 50% { transform: translateX(6px); } }
@media (max-width: 1000px) { .road--b .steps::before, .road--b .steps::after { right: auto; } }

/* ---- ヘッダー（ロゴ・メニュー）を、気持ち大きめに ---- */
@media (min-width: 1001px) {
  .hdr .wrap { height: 80px; }
  .logo.logo--reborn img { height: 38px; }
  .nav { font-size: 14.5px; gap: 26px; }
  .lang { font-size: 13.5px; }
  html[data-lang='en'] .nav { font-size: 14px; gap: 22px; }
}
@media (min-width: 1280px) {
  .logo.logo--reborn img { height: 44px; }
  .nav { font-size: 16px; gap: 34px; }
  .lang { font-size: 14.5px; }
  html[data-lang='en'] .nav { font-size: 15px; gap: 28px; }
}
@media (max-width: 1000px) {
  .logo.logo--reborn img { height: 28px; }
  .lang { font-size: 12.5px; }
}
@media (max-width: 520px) { .logo.logo--reborn img { height: 22px; } }
@media (max-width: 370px) { .logo.logo--reborn img { height: 19px; } }

/* ---- 地球儀の説明文：PC幅では1行 ---- */
@media (min-width: 1200px) { .loc-copy .lead { max-width: none; white-space: nowrap; } }
@media (min-width: 1001px) and (max-width: 1119px) {
  .logo.logo--reborn img { height: 33px; }
  .nav { font-size: 13.5px; gap: 18px; }
  html[data-lang='en'] .nav { font-size: 13px; gap: 16px; }
  .lang { font-size: 12.5px; }
}

/* ---- スマホ：お問い合わせ帯のボタンを押しやすい高さに ---- */
@media (max-width: 760px) {
  .cta-band .btn { padding-top: 14px; padding-bottom: 14px; justify-content: center; }
}

/* ---- 「2027年2月 ジャパンテクニカルへ」：ボタンに見えない、お知らせ文の見せ方（左に黄色の線・角丸のピルをやめる） ---- */
.road-banner { margin-top: 30px; padding: 6px 0 6px 18px; text-align: left; border-radius: 0; background: none; border-left: 5px solid var(--yellow); font-size: 17px; font-weight: 900; letter-spacing: .04em; color: var(--navy); cursor: default; }
.road-banner i { display: none; }
.road-banner::after { content: ''; }
@media (max-width: 760px) { .road-banner { font-size: 15px; padding-left: 14px; } }

/* ---- 「プラント事業が、伸びている。」の動きを、ゆっくり目に ---- */
.wb .seg { transition: transform 2s cubic-bezier(.25, .7, .2, 1); }
.wb:nth-child(1) .seg { transition-delay: .2s; } .wb:nth-child(2) .seg { transition-delay: .6s; } .wb:nth-child(3) .seg { transition-delay: 1s; } .wb:nth-child(4) .seg { transition-delay: 1.4s; } .wb:nth-child(5) .seg { transition-delay: 1.8s; }
.wb .tot { transition: opacity .9s 2.2s; }
.js .wide.in .tl { transition: stroke-dashoffset 2.6s cubic-bezier(.35, .1, .25, 1) 2.4s; }
.js .wide.in .tc { transition: opacity .6s 2s; }
.js .wide.in .th { transition: opacity .5s 4.8s; animation: tpulse 3.2s ease-in-out 5.4s infinite; }

/* ---- 拠点の連携：球体の図を2つ並べる（左＝本社が支える／右＝どの拠点も3拠点がバックアップ） ---- */
.network { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 36px; }
.net-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.net-figs figure { margin: 0; }
.orgfig .org { width: 100%; }
.webfig { text-align: center; }
.web { width: 100%; max-width: 350px; height: auto; display: block; margin: 0 auto; border-radius: 50%; animation: orbglow 4s ease-in-out infinite; }
.web .wl path { stroke: #7fa6e0; stroke-dasharray: 3 9; animation: wflow 1.6s linear infinite; }
.web .wl path:nth-child(2n) { stroke: #38a437; animation-duration: 2s; }
.web .wl path:nth-child(3n) { stroke: #e0b400; animation-duration: 2.4s; animation-direction: reverse; }
@keyframes wflow { to { stroke-dashoffset: -24; } }
.web .n circle { filter: drop-shadow(0 6px 8px rgba(13, 59, 140, .35)); transform-box: fill-box; transform-origin: center; animation: nodebeat 6.4s ease-in-out infinite; }
.web .n2 circle { animation-delay: 1.6s; } .web .n3 circle { animation-delay: 3.2s; } .web .n4 circle { animation-delay: 4.8s; }
@keyframes nodebeat { 0%, 22%, 100% { transform: scale(1); } 8% { transform: scale(1.14); } }
.web .n text { fill: #fff; font-weight: 900; font-size: 22px; font-family: inherit; pointer-events: none; }
.web .n text.dk { fill: #0d3b8c; }
.web .hubc text { font-size: 10.5px; font-weight: 900; fill: #0d3b8c; font-family: inherit; }
.web-keys { list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px; }
.web-keys li { padding: 4px 16px; border-radius: 999px; font-size: 13px; font-weight: 900; color: var(--navy); background: #e7f0fc; }
.web-keys li:nth-child(2) { background: #e3f3e2; } .web-keys li:nth-child(3) { background: #fff1c2; }
.webfig figcaption { margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.7; color: var(--navy); }
@media (max-width: 1000px) { .network { grid-template-columns: minmax(0, 1fr); } .net-figs { max-width: 760px; margin: 0 auto; width: 100%; } }
@media (max-width: 640px) { .net-figs { grid-template-columns: minmax(0, 1fr); gap: 34px; } .web, .orgfig .org { max-width: 330px; margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { .web, .web .wl path, .web .n circle { animation: none; } }
html[data-lang='en'] .web .n text { font-size: 15px; }
html[data-lang='en'] .web .hubc text { font-size: 9.5px; }

/* ================= スマホ幅：縦に長くなりすぎないよう、余白・画像・カードを全体的にコンパクトに ================= */
@media (max-width: 760px) {
  .sec { padding: 28px 0; }
  .sec-title { font-size: 22px; }
  .lead { line-height: 1.8; font-size: 14.5px; }
  /* ヒーロー：下の空きを詰める */
  .hero--b .copy { padding: 30px 0 64px; }
  .swoosh { height: 56px; }
  .hero .cta { margin: 18px 0 12px; }
  .hero .cta .btn { padding-top: 12px; padding-bottom: 12px; }
  /* 地球儀まわり */
  .wrap.loc { padding-top: 26px; padding-bottom: 30px; gap: 22px; }
  .globe-hint { margin-top: 8px; }
  .loc-copy .hint-box { margin-top: 14px; padding: 10px 14px; }
  /* 信頼数字の帯 */
  .stats-band .stats li { padding: 14px 0; }
  .ticker { padding: 8px 0; }
  /* お知らせ（トップ・一覧）：サムネイルを小さく横に */
  .nr { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px 2px 14px; align-items: start; }
  .nr-img { max-width: none; aspect-ratio: 1 / 1; }
  .nr-main h3 { font-size: 15.5px; margin: 4px 0 4px; }
  .nr-lead { font-size: 13px; line-height: 1.7; }
  .nr-toggle { margin-top: 8px; padding: 5px 14px; }
  .nr-more { padding: 0 2px 16px; }
  .nfilter .fbar { padding: 10px 12px; }
  /* 事業内容のブロック */
  .bz { padding: 26px 0; gap: 16px; }
  .bz-img { aspect-ratio: 16 / 9; border-radius: 6px 24px 6px 24px; }
  .bz h3 { font-size: 20px; margin-bottom: 8px; }
  .bz-no b { font-size: 34px; }
  .bz-copy { font-size: 14px; line-height: 1.85; margin-bottom: 10px; }
  .bz-list-pts li { font-size: 13.5px; }
  .bz::before { display: none; }
  /* 数字で見る成長 */
  .wbars { height: 250px; padding-top: 60px; margin-bottom: 30px; }
  .sbars { min-height: 190px; margin: 18px 0 26px; }
  .wide-l { padding: 20px 18px; }
  .wide-l h3 { margin-bottom: 10px; }
  .wide-r { padding: 16px 14px 14px; }
  .growth2 .g-main, .g-row2 { gap: 12px; }
  .chart-card { padding: 12px 14px; }
  /* 会社情報 */
  .ac-grid { gap: 8px; margin-top: 18px; }
  .ac-grid li { padding: 12px 14px 12px 18px; }
  .pol-box { padding: 16px 16px; }
  .certs { padding: 36px 0 40px; }
  .cert-list { gap: 14px; margin-top: 20px; }
  .cert-in { padding: 36px 16px 18px; }
  .cert-img { height: 96px; } .cert-img img { max-height: 96px; }
  .cert h3 { font-size: 20px; margin-top: 6px; }
  .cert-date { margin-top: 8px; }
  .cert-year { font-size: 56px; }
  .cert-support { padding: 16px 16px; margin-top: 18px; }
  .card--row .img { min-height: 150px; }
  /* 設備 */
  .eq-grid { gap: 12px; margin-top: 18px; }
  .eq-img { min-height: 64px; }
  .eq-body { padding: 14px 16px 12px; }
  .eq-body h3 { font-size: 16px; margin-bottom: 8px; }
  .newbanner { padding: 22px 20px; }
  /* トップ：事業・設備のカード */
  .ph .img { aspect-ratio: 16 / 9; }
  .photos--4 { gap: 14px; }
  .svc { gap: 10px; }
  .cta-band .wrap { padding-top: 28px; padding-bottom: 28px; gap: 16px; }
  .ftr .row { gap: 14px; }
}
@media (max-width: 760px) {
  .hero--b { min-height: 0 !important; }
  .hero--b .copy { padding: 30px 0 70px; }
}

/* ---- スマホのヘッダー：ロゴが大きすぎてメニューボタンが潰れていたのを修正 ---- */
.burger { flex: none; }
.hdr .wrap .lang { flex: none; }
@media (max-width: 520px) { .logo.logo--reborn img { height: 19px; } .hdr .wrap { gap: 6px; } .lang button { padding: 6px 5px; } }
@media (max-width: 400px) { .logo.logo--reborn img { height: 17px; } }
@media (max-width: 350px) { .logo.logo--reborn img { height: 15px; } .lang { font-size: 11.5px; } }

/* ---- ISO9001とISO45001のマーク：同じ大きさの枠・同じ高さにそろえる ---- */
.cert--iso .cert-img { height: 120px; }
.cert--iso .cert-img img { width: auto; height: 120px; max-width: 100%; max-height: none; object-fit: contain; }
@media (max-width: 760px) { .cert--iso .cert-img { height: 84px; } .cert--iso .cert-img img { height: 84px; } }

/* ---- 認証カード：年を文字として見せ、マーク・見出し・日付の位置をそろえる ---- */
.cert-in { display: flex; flex-direction: column; align-items: center; padding: 26px 20px 26px; }
.cert-year { position: static; transform: none; display: inline-block; margin: 0 0 14px; padding: 0 0 4px; font-size: 48px; line-height: 1; font-weight: 600; color: #1c5fc6; background: none; -webkit-text-fill-color: initial; border-bottom: 4px solid #f6c500; letter-spacing: .04em; }
.cert--sdgs .cert-year { color: #1c5fc6; border-bottom-color: #e5243b; }
.cert-img { height: 136px; width: 100%; display: flex; align-items: center; justify-content: center; margin: 0; }
.cert-img img, .cert--iso .cert-img img { width: auto; max-width: 92%; height: auto; max-height: 128px; object-fit: contain; filter: none; mix-blend-mode: normal; }
.cert--iso .cert-img img { height: 128px; }
.cert h3 { margin: 16px 0 4px; }
.cert-sub { min-height: 1.7em; }
.cert-date { margin-top: auto; }
.cert-in > .cert-sub { margin-bottom: 14px; }
@media (max-width: 760px) {
  .cert-in { padding: 22px 16px 20px; }
  .cert-year { font-size: 38px; margin-bottom: 10px; }
  .cert-img { height: 100px; } .cert-img img, .cert--iso .cert-img img { max-height: 96px; } .cert--iso .cert-img img { height: 96px; }
}
.cert-img { flex: none; overflow: hidden; }
.cert-img img { flex: none; }
.cert .cert-img, .cert--iso .cert-img { height: 136px; }
@media (max-width: 760px) { .cert .cert-img, .cert--iso .cert-img { height: 100px; } }

/* ---- お知らせのマーク画像：枠の中に全体を収める（SDGsが切れていた） ---- */
.nr-img--badge img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; padding: 10px; box-sizing: border-box; }
.nr-img.nr-img--badge { position: relative; background: #fff; }
.nr-img.nr-img--badge > img { position: absolute !important; inset: 12px !important; width: calc(100% - 24px) !important; height: calc(100% - 24px) !important; padding: 0 !important; object-fit: contain !important; max-width: none !important; max-height: none !important; }

/* ---- 端末による文字の自動拡大・縮小を止め、全ページで同じ大きさに（会社情報だけメニューが小さく見える対策） ---- */
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- フッター：認証・認定のマーク（ロゴだけ・クリックで会社情報の該当カードへ） ---- */
.ftr .row .fc-marks { grid-column: 2 / -1; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 22px 26px; align-items: center; align-self: center; }
.fc-marks li { display: block; }
.fc-marks a { display: block; padding: 6px 8px; border-radius: 10px; transition: transform .3s, box-shadow .3s, background .3s; }
.fc-marks a:hover { transform: translateY(-3px); background: #fff; box-shadow: 0 12px 22px -14px rgba(13, 59, 140, .55); }
.fc-marks img { height: 62px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.fc-marks li:nth-child(2) img, .fc-marks li:nth-child(3) img { height: 56px; }
@media (max-width: 1000px) { .ftr .row .fc-marks { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fc-marks img { height: 48px; } .fc-marks li:nth-child(2) img, .fc-marks li:nth-child(3) img { height: 44px; } }



/* ---- PC幅のヘッダー：画面幅に合わせてなめらかに変わる大きさにする（1280pxなどの境目で急に大きさが変わらないように・全ページ共通） ---- */
@media (min-width: 1001px) {
  .logo.logo--reborn img { height: clamp(33px, calc(1.9vw + 17px), 44px) !important; }
  .nav { font-size: clamp(13.5px, calc(.95vw + 3.6px), 16px) !important; gap: clamp(16px, calc(2.2vw - 2px), 34px) !important; }
  html[data-lang='en'] .nav { font-size: clamp(13px, calc(.9vw + 3.4px), 15px) !important; gap: clamp(14px, calc(1.9vw - 2px), 28px) !important; }
  .lang { font-size: clamp(12.5px, calc(.55vw + 7.5px), 14.5px) !important; }
  .nav a, .nav a.is-current { font-size: inherit !important; }
}

/* ---- お問い合わせ：LINE（左）と、こんなご相談（右）を横並び ---- */
.ct-two { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 36px; align-items: stretch; }
.ct-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 34px 34px; border-radius: 18px; background: #eaf2fd; }
.ct-badge { display: inline-block; width: 52px; margin-bottom: 8px; }
.ct-badge svg { width: 100%; height: auto; display: block; }
.ct-line h2 { margin: 0 0 8px; font-size: 32px; line-height: 1.45; font-weight: 900; color: var(--navy); }
.ct-line p { margin: 0 0 20px; font-size: 15px; line-height: 1.8; color: var(--navy); }
.btn--line { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 26px; border-radius: 8px; background: #06c755; color: #fff; font-size: 16px; font-weight: 900; transition: transform .25s, box-shadow .25s, background .25s; }
.btn--line:hover { background: #05b34c; transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(6, 199, 85, .9); }
.ct-ico { display: inline-grid; place-items: center; width: 34px; height: 30px; border-radius: 50%; background: #fff; color: #06c755; font-size: 9px; font-weight: 900; letter-spacing: -.02em; }
.ct-btn { width: 100%; max-width: 360px; }
.ct-qr { width: 190px; padding: 14px 14px 16px; border: 1px solid #c9d9f1; border-radius: 12px; background: #fff; text-align: center; }
.ct-qr svg { width: 100%; height: auto; display: block; }
.ct-qr b { display: block; margin-top: 8px; font-size: 13px; color: var(--navy); }
.ct-qr small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mute); }
.ct-topics .points { margin-top: 18px; }
.ct-tel-link { margin: 26px 0 0; text-align: center; }
.ct-tel-link a { display: inline-block; padding-bottom: 3px; border-bottom: 1.5px solid var(--navy); font-size: 14px; font-weight: 700; color: var(--navy); }
html[data-lang='en'] .ct-badge, html[data-lang='en'] .ct-ico { }
@media (max-width: 1100px) { .ct-two { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
@media (max-width: 640px) { .ct-line { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; justify-items: start; } .ct-line h2 { font-size: 25px; } .ct-qr { width: 170px; justify-self: center; } .ct-btn { max-width: none; } }

/* ---- 会社情報ページだけ画面が縮む問題の対策：はみ出しうる装飾を、確実に枠の中へ閉じ込める ---- */
html, body { overflow-x: clip; }
.certs { overflow: clip; contain: paint; }
.certs-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cert { contain: paint; }

.ct-line h2 { font-size: clamp(22px, 2.1vw, 32px); white-space: nowrap; }
@media (max-width: 1100px) { .ct-line h2 { font-size: clamp(24px, 4.2vw, 32px); } }
@media (max-width: 640px) { .ct-line h2 { font-size: clamp(20px, 6vw, 26px); } }
html[data-lang='en'] .ct-line h2 { white-space: normal; }

/* 売上グラフ（9本）：年ラベルを折り返さず、棒より少し広くとる */
.wb .yr { white-space: nowrap; left: -10px; right: -10px; }
@media (max-width: 520px) { .wbars { gap: 4px; } .wb .yr { font-size: 10.5px; left: -8px; right: -8px; } .wb .tot { font-size: 12.5px; } }

/* ===== 数字で見る成長：2026-10 調整 ===== */
/* メインの見出し（加工力を武器に、伸びている。）を大きく */
.growth2 .wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.wide-l { padding: 28px 34px 26px; }
.wide-l h3 { font-size: clamp(30px, 3.5vw, 44px); line-height: 1.32; margin: 0 0 18px; }
.wide-eyebrow { font-size: 14px; }
/* 2006年→2025年の数字：折り返さず、どの幅でも1行にそろえる（年が上、数字が下） */
.hero-nums { display: flex; align-items: flex-end; flex-wrap: nowrap; gap: clamp(8px, 1.6vw, 18px); font-family: 'Jost', 'Noto Sans JP', sans-serif; }
.hero-nums .hn { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hero-nums .hn > span { font-size: 13px; color: rgba(255, 255, 255, .78); font-family: 'Noto Sans JP', sans-serif; white-space: nowrap; }
.hero-nums .hn p { margin: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.hero-nums b { font-weight: 500; line-height: 1; font-size: clamp(42px, 5vw, 64px); font-variant-numeric: tabular-nums; }
.hero-nums .hn--to b { color: #f6c500; font-size: clamp(50px, 6.2vw, 80px); }
.hero-nums small { font-size: 15px; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; }
.hero-nums i { font-style: normal; font-size: clamp(22px, 2.4vw, 30px); color: #f6c500; padding-bottom: .35em; }
.wide-times { margin-top: 14px; font-size: 18px; }
.wide-times b { font-size: clamp(34px, 3.4vw, 44px); }
/* 棒グラフ：低い棒が軸の下にはみ出さないように */
.wb .seg { min-height: 0; }
.wb .stack { min-height: 5px; }
.wb .yr { white-space: nowrap; }
.wb:nth-child(5) .seg { transition-delay: 1.8s; } .wb:nth-child(6) .seg { transition-delay: 2.2s; }
.wb:nth-child(1) .seg { transition-delay: .2s; } .wb:nth-child(2) .seg { transition-delay: .55s; } .wb:nth-child(3) .seg { transition-delay: .9s; } .wb:nth-child(4) .seg { transition-delay: 1.35s; }
.wbars { height: 290px; padding-top: 74px; }
.wb { max-width: 110px; }
.wide-r .fine { margin-top: 0; }
/* 注記は、まとまり（句）ごとに改行 */
.fine span { display: inline-block; }
/* 下段：3列（工事実績数／分野別／拠点） */
.g-row2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-row2 .chart-card, .g-row2 .expand { min-width: 0; }
.g-row2 .expand { margin: 0; }
.g-row2 .expand .exp-steps { grid-template-columns: 1fr 1fr; }
.g-row2 .exp-map { min-height: 130px; }
.g-row2 .field-card .rbars { flex: 1; align-content: space-evenly; margin: 14px 0; gap: 10px; }
.g-row2 .field-card .rbars li { grid-template-columns: 7.6em minmax(0, 1fr) 3.2em; }
.g-row2 .fine { margin: 0; line-height: 1.7; }
@media (max-width: 1000px) { .g-row2 { grid-template-columns: 1fr; } .growth2 .wide { grid-template-columns: 1fr; } .g-row2 .expand .exp-steps { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) {
  .wide-l { padding: 24px 20px; }
  .wbars { height: 240px; padding-top: 62px; gap: 6px; }
  .wb .yr { font-size: 11.5px; left: -6px; right: -6px; }
  .hero-nums b { font-size: 40px; } .hero-nums .hn--to b { font-size: 50px; }
  .hero-nums small { font-size: 13px; }
  .g-row2 .expand .exp-steps { grid-template-columns: 1fr 1fr; }
}
.g-row2 .field-card .rbars li { grid-template-columns: auto minmax(0, 1fr) 3em; gap: 10px; }
.g-row2 .field-card .rbars .rl { white-space: nowrap; font-size: 13px; word-break: keep-all; }
@media (max-width: 1000px) { .g-row2 .field-card .rbars li { grid-template-columns: 9em minmax(0, 1fr) 3em; } }
@media (max-width: 520px) { .g-row2 .field-card .rbars li { grid-template-columns: auto minmax(0, 1fr) 2.6em; gap: 8px; } .g-row2 .field-card .rbars .rl { font-size: 12px; } }
.rbars b { white-space: nowrap; }
@media (max-width: 520px) { .g-row2 .field-card .rbars li { grid-template-columns: auto minmax(0, 1fr) 3.4em; } }

/* LINE枠：QRカードの上下を、左の文字・ボタンの上下にそろえる（PC幅） */
@media (min-width: 641px) {
  .ct-line { align-items: stretch; }
  .ct-qr { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
}

/* スマホ幅：QRカードを横長にして、枠いっぱいにそろえる（QR＋説明を横並び） */
@media (max-width: 640px) {
  .ct-line { gap: 20px; }
  .ct-qr { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: end; column-gap: 16px; width: 100%; justify-self: stretch; box-sizing: border-box; padding: 14px 16px; text-align: left; }
  .ct-qr svg { grid-row: 1 / span 2; width: 112px; align-self: center; }
  .ct-qr b { margin-top: 0; align-self: end; font-size: 14px; }
  .ct-qr small { margin-top: 4px; align-self: start; font-size: 12px; line-height: 1.6; }
}

/* スマホ幅：数字帯を2×2の格子に。縦線と数字の間に余白をとり、横線で段を区切る */
@media (max-width: 760px) {
  .stats-band .stats { grid-template-columns: 1fr 1fr; gap: 0; padding: 8px 0 14px; }
  .stats-band .stats li { padding: 16px 12px 16px 18px; border-left: 1px solid rgba(255, 255, 255, .22); border-top: 0; min-width: 0; }
  .stats-band .stats li:nth-child(odd) { border-left: 0; padding-left: 0; padding-right: 14px; }
  .stats-band .stats li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .18); }
  .stats-band .stats li > span { line-height: 1.6; }
}

/* スマホ幅：ロードマップ（縦の時系列）。縦線は2030年の円の中心まで。円と説明は左そろえで横に並べる */
@media (max-width: 1000px) {
  .road .steps::before { bottom: 56px; }
  .road--b .goal-big { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; column-gap: 16px; text-align: left; }
  .road--b .goal-big::before { content: ''; position: absolute; left: -36px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--navy); box-sizing: border-box; z-index: 2; }
  .road--b .goal-big .disc { margin: 0; }
  .road--b .goal-big b { margin: 0; font-size: 16px; line-height: 1.5; text-align: left; }
}
/* スマホ幅：見出しとバッジは、改行して上下に並べる（見出しの途中にバッジを割り込ませない） */
@media (max-width: 760px) {
  .sec-title .badge { display: block; width: fit-content; margin: 12px 0 0; font-size: 13px; padding: 5px 14px; }
}

/* スマホ幅：ヒーロー（トップ／サブページ）をコンパクトに */
@media (max-width: 760px) {
  .hero--b { min-height: 0; }
  .hs .copy, .hero--b .copy { padding: 38px 0 66px; }
  .hs h1 { margin-bottom: 8px; }
  .hs .cta, .hero--b .cta { display: flex; flex-wrap: nowrap; gap: 10px; }
  .hs .cta .btn, .hero--b .cta .btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; font-size: 14px; justify-content: space-between; white-space: nowrap; }
  .subhero-in { padding: 26px 0 62px; }
  .subhero .en { margin-bottom: 6px; font-size: 12.5px; }
  .subhero h1 { margin-bottom: 6px; font-size: clamp(26px, 7.4vw, 34px); }
  .subhero .lead { font-size: 14px; line-height: 1.7; }
}

/* パンくず：ヒーロー（曲線）に近すぎないよう、上に余白をとる。ほかの指定で余白が消えないよう詳細度を上げる */
nav.crumb.wrap { padding-top: 18px; padding-bottom: 2px; margin-top: 0; position: relative; z-index: 1; }
@media (max-width: 760px) { nav.crumb.wrap { padding-top: 16px; padding-bottom: 0; } }

/* ===== 拠点：上に横長の写真、下に拠点情報（2列×2段）===== */
.loc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.locc { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px -18px rgba(13, 59, 140, .45); }
.locc-img { aspect-ratio: 16 / 6.6; background: #e8eef6; overflow: hidden; position: relative; }
.locc-img > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locc-img--two { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.locc-img--two figure { margin: 0; position: relative; min-width: 0; overflow: hidden; }
.locc-img--two img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locc-img--two figcaption { position: absolute; left: 8px; top: 8px; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: var(--navy); font-size: 12px; font-weight: 900; line-height: 1.5; }
.locc-body { padding: 16px 20px 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.locc-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; }
.locc-head h3 { margin: 0; font-size: 22px; font-weight: 900; color: var(--navy); line-height: 1.4; }
.locc-est { font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.locc-desc { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); min-height: 0; }
.locc-desc:empty { display: none; }
.locc-plan-slot { min-height: 38px; margin-top: 8px; }
.locc-plan { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: #e8f1fd; color: #1a4fa8; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.locc-plan svg { width: 16px; height: 16px; flex: none; }
.locc-addr { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid #e3eaf4; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.locc-contact { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 14px; color: var(--navy); }
.locc-contact svg { width: 15px; height: 15px; flex: none; }
.locc-tel, .locc-fax { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 700; padding-right: 14px; margin-right: 14px; border-right: 1px solid #d5deec; }
.locc-tel:hover b { text-decoration: underline; }
.locc-contact b { font-family: 'Jost', 'Noto Sans JP', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.locc-contact span { font-size: 12px; font-weight: 900; }
.locc-map { margin-left: auto; color: var(--blue); font-weight: 900; font-size: 13.5px; white-space: nowrap; }
.locc-map:hover { text-decoration: underline; }
.locc-map i { font-style: normal; margin-left: 2px; }
@media (max-width: 1000px) { .loc-grid { grid-template-columns: minmax(0, 1fr); } .locc-img { aspect-ratio: 16 / 7; } }
@media (max-width: 520px) {
  .locc-img { aspect-ratio: 16 / 8; }
  .locc-body { padding: 14px 16px 14px; }
  .locc-head h3 { font-size: 20px; }
  .locc-contact { display: grid; grid-template-columns: auto 1fr; gap: 8px 0; }
  .locc-tel, .locc-fax { margin-right: 0; padding-right: 0; border-right: 0; grid-column: 1 / -1; }
  .locc-map { margin-left: 0; grid-column: 1 / -1; justify-self: end; }
  .locc-plan-slot { min-height: 0; }
  .locc-plan-slot:empty { display: none; }
}
.locc-fax { border-right: 0; margin-right: 0; padding-right: 0; }

/* 地球儀のピン：広島は赤にして、北九州（青）・大分（緑）・熊本（黄）と色が重ならないようにする */
.pins-pill .pin--red .pin-icon, .dm-pin.pin--red .pin-icon, .pins-icon .pin--red .pin-icon { background: #e5243b; }
.dm-pin.pin--red .pin-ripple { border-color: rgba(229, 36, 59, .7); }

/* 社長挨拶：原稿どおりの改行（1行ずつ表示）。PC幅では1行を折り返さず、写真の幅を絞って文章の幅を確保 */
.prose.greet p { margin: 0; line-height: 2.05; }
.prose.greet .ln { display: block; }
@media (min-width: 1100px) {
  #message .two { grid-template-columns: 340px minmax(0, 1fr); gap: 56px; }
  .prose.greet .ln { white-space: nowrap; font-size: 16px; }
}
@media (max-width: 1099px) { .prose.greet .ln { text-wrap: pretty; margin-bottom: .1em; } }
.prose.greet { margin-top: 14px; }
@media (max-width: 1099px) { .prose.greet p { line-height: 1.85; } .prose.greet .ln { margin-bottom: .45em; } }

/* 社長挨拶（PC幅）：写真の下端と、文章（署名）の下端をそろえる */
@media (min-width: 1100px) {
  #message .two { align-items: stretch; }
  #message .two > div { display: flex; flex-direction: column; }
  #message .two .sign { margin-top: auto; padding-top: 18px; }
  .prose.greet p { line-height: 2.1; }
}
@media (min-width: 1100px) { #message .two .sign { line-height: 1.1; margin-bottom: 0; padding-bottom: 0; } }
/* 社長挨拶（PC幅）：署名を外したので、最後の行の下端を写真の下端にそろえる（行間を均等に広げる） */
@media (min-width: 1100px) {
  #message .two .prose.greet { flex: 1; display: flex; flex-direction: column; }
  #message .two .prose.greet p { flex: 1; display: flex; flex-direction: column; justify-content: space-between; line-height: 1.6; }
}

/* 認証カード：補足（更新期間など） */
.cert-note { position: relative; margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mute); }
.cert-sub + .cert-sub { margin-top: 2px; }

/* 認証カード：4枚並び（福岡県SDGsはダミー）。画面幅に応じて 4列 → 2列 → 1列 */
.cert-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cert-in { padding-left: 14px; padding-right: 14px; }
.cert-dummy { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; }
.cert-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 78%; height: 112px; border: 1.5px dashed #b4c3da; border-radius: 10px; background: #f3f7fc; color: var(--mute); font-size: 13px; font-weight: 700; line-height: 1.4; }
.cert-ph small { font-size: 11px; font-weight: 500; }
@media (max-width: 1099px) { .cert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 600px) { .cert-list { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .cert-ph { height: 88px; } }
.cert-in > .cert-sub + .cert-sub { margin-top: -8px; }

/* 設備コンテンツ（トップ）：機械の写真が入るまでの仮の絵（線画のアイコン） */
.ph .img.img--ill { display: grid; place-items: center; color: #1c5fc6; background: linear-gradient(135deg, #e6f0fd 0%, #f6faff 60%, #eaf2fd 100%); position: relative; border: 1px solid #d5e3f6; }
.ph .img.img--ill::before { content: ''; position: absolute; width: 112px; height: 112px; border-radius: 50%; background: rgba(28, 95, 198, .07); }
.ph .img.img--ill svg { position: relative; width: 78px; height: 78px; }
@media (max-width: 760px) { .ph .img.img--ill svg { width: 60px; height: 60px; } .ph .img.img--ill::before { width: 88px; height: 88px; } }

/* トップの設備コンテンツ：設備紹介ページと同じ、カタログ画像の仮枠 */
.ph .img.img--ph { display: grid; place-items: center; text-align: center; padding: 10px; background: repeating-linear-gradient(135deg, #f5f8fd 0 10px, #fff 10px 20px); border: 1px dashed var(--line); color: var(--mute); font-size: 13px; font-weight: 700; line-height: 1.5; }
.ph .img.img--ph small { display: block; font-weight: 500; font-size: 11.5px; }

/* 福岡県SDGs推進ロゴマーク：ガイドラインどおり、ロゴに加工（影・ぼかし・色変更・拡縮の動き・重なり）をしない。白地の余白（アイソレーション）を確保。ほかのカードと同じ構成・高さにそろえる */
.cert--fukuoka .cert-in::after { display: none; }
.cert--fukuoka .cert-img.cert-img--raw { background: #fff; border-radius: 6px; width: auto; height: 136px; aspect-ratio: 842 / 595; margin: 0 auto; padding: 0; overflow: hidden; flex: none; }
.cert--fukuoka .cert-img--raw img { width: 100%; height: 100%; max-width: none; max-height: none; filter: none; mix-blend-mode: normal; opacity: 1; transform: none; transition: none; object-fit: contain; }
/* 日付の帯を、全カードで同じ高さ（カード下）にそろえる */
.cert-in > .cert-date { margin-top: auto; }
.cert-in > .cert-sub:last-of-type { margin-bottom: 14px; }
@media (max-width: 760px) { .cert--fukuoka .cert-img.cert-img--raw { height: 100px; } }

/* 協働ロボット溶接パッケージ：写真＋情報（上段）と、折りたたみのメーカー資料詳細（下段） */
.eq.eq--robot { grid-template-columns: minmax(0, 340px) 1fr; }
.eq--robot .eq-img { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; gap: 8px; background: #fff; }
.eq--robot .eq-img img { width: 100%; max-height: 300px; object-fit: contain; }
.eq-credit { margin: 0; font-size: 11.5px; color: var(--mute); text-align: center; }
.eq-src { margin: 12px 0 0; font-size: 12px; color: var(--mute); }
.eq-more { grid-column: 1 / -1; border-top: 1px dashed var(--line); }
.eq-more summary { cursor: pointer; padding: 12px 22px; font-weight: 900; font-size: 14px; color: var(--blue); list-style: none; }
.eq-more summary::-webkit-details-marker { display: none; }
.eq-more summary::before { content: '＋'; margin-right: 8px; }
.eq-more[open] summary::before { content: '−'; }
.eq-more-in { padding: 4px 22px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; font-size: 13.5px; line-height: 1.8; }
.eq-more-in .eq-note { grid-column: 1 / -1; margin: 0; color: var(--mute); font-size: 12.5px; }
.eq-more-in section { min-width: 0; }
.eq-more-in section .eq-note { grid-column: auto; margin-top: 6px; }
.eq-more-in h4 { margin: 0 0 8px; font-size: 14.5px; color: var(--navy); font-weight: 900; }
.eq-more-in ul { margin: 6px 0 0; padding-left: 1.2em; }
.eq-more-in p { margin: 6px 0 0; }
.eq-fig { margin: 0 0 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.eq-fig img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; }
@media (max-width: 760px) { .eq.eq--robot { grid-template-columns: 1fr; } .eq-more-in { grid-template-columns: 1fr; padding: 4px 16px 18px; } .eq-more summary { padding: 12px 16px; } }

.eq.eq--robot { grid-column: 1 / -1; }
.eq.eq--robot .eq-body { min-width: 0; }
@media (min-width: 1001px) { .eq-more-in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 広島：現事業所の写真＋第二工場予定地の写真2枚 */
.locc-img--three { display: grid; grid-template-columns: 1.45fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.locc-img--three figure { margin: 0; position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.locc-img--three .locc-main { grid-row: 1 / span 2; }
.locc-img--three img { width: 100%; height: 100%; object-fit: cover; display: block; }
.locc-img--three figcaption { position: absolute; left: 6px; top: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: var(--navy); font-size: 11px; font-weight: 900; line-height: 1.5; }
@media (max-width: 520px) { .locc-img--three { aspect-ratio: 4 / 3; } }
/* 地球儀カード：予定地の写真（小）*/
.gc-sites { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.gc-sites figure { margin: 0; position: relative; }
.gc-sites img { width: 100%; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.gc-sites figcaption { position: absolute; left: 3px; bottom: 3px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .94); color: var(--navy); font-size: 10px; font-weight: 900; }

/* 設備紹介：機械一覧カード（メーカー資料の参考画像）*/
.eq-img.eq-img--photo { padding: 8px; background: #fff; display: flex; align-items: center; justify-content: center; }
.eq-img--photo img { width: 100%; height: 100%; max-height: 170px; object-fit: contain; }
.eq-img.eq-img--none { background: linear-gradient(135deg, #eef3fb, #f8fbff); font-family: 'Jost', sans-serif; font-size: 34px; font-weight: 500; color: #b4c3da; }
.eq-link { margin: 8px 0 0; font-size: 12.5px; }
.eq-link a { color: var(--blue); font-weight: 700; overflow-wrap: anywhere; }
.eq-sub { margin: 30px 0 10px; font-size: 18px; font-weight: 900; color: var(--navy); }
.eq-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.eq-others li { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 13.5px; line-height: 1.7; }
.eq-others b { flex: 1 1 100%; color: var(--navy); font-size: 14.5px; }
.eq-others span { color: var(--ink); }
.eq-body h3, .eq-spec dd { overflow-wrap: anywhere; }
@media (max-width: 1000px) { .eq-others { grid-template-columns: 1fr; } }

.eq.eq--text { grid-template-columns: 1fr; }

/* 事業内容：立ち位置の文章を2行に */
.pos-two span { display: block; }
@media (min-width: 1100px) { .pos-two span { white-space: nowrap; } }
.card .mach { font-size: 12.5px; line-height: 1.7; color: var(--mute); margin-top: 8px; }
/* フッター：福岡県SDGs推進ロゴ（ガイドライン：加工しない・白地の余白つき・登録事業者名を併記） */
.fc-marks .fc-fsdgs a { display: flex; align-items: center; gap: 12px; padding: 0; }
.fc-marks .fc-fsdgs a:hover { transform: none; background: none; box-shadow: none; }
.fc-fsdgs .fsdgs-logo { display: block; background: #fff; padding: 10px 14px; border-radius: 6px; }
.fc-fsdgs .fsdgs-logo img { height: 64px; width: auto; max-width: none; filter: none; display: block; }
.fc-fsdgs .fsdgs-name { font-size: 12px; line-height: 1.6; color: inherit; }
.fc-marks li:nth-child(4) img { height: 64px; }
.fc-fsdgs .fsdgs-logo img, .fc-marks li:nth-child(4) img { height: 84px; }
@media (max-width: 560px) { .fc-fsdgs .fsdgs-logo img, .fc-marks li:nth-child(4) img { height: 70px; } }

.eq-grid > .eq-sub { grid-column: 1 / -1; margin: 6px 0 0; }
.eq-grid > .eq-sub:not(.eq-sub--first) { margin-top: 20px; }

/* 事業内容：機械・設備で広がる仕事（機械の写真を切らずに、白地に並べて見せる） */
.mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.mc { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 26px -20px rgba(13, 59, 140, .5); }
.mc--plan { background: linear-gradient(180deg, #fff, #fffaf0); border-color: #f1dfb8; }
.mc-strip { display: grid; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.mc-strip--2 { grid-template-columns: 1fr 1fr; }
.mc-strip--3 { grid-template-columns: 1fr 1fr 1fr; }
.mc-strip figure { margin: 0; background: #fff; display: flex; flex-direction: column; min-width: 0; }
.mc-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 10px 8px 4px; display: block; box-sizing: border-box; }
.mc-strip figcaption { padding: 0 8px 10px; font-size: 11.5px; line-height: 1.45; color: var(--mute); text-align: center; }
.mc-body { padding: 16px 20px 20px; }
.mc-body h3 { margin: 0 0 8px; font-size: 19px; font-weight: 900; color: var(--navy); line-height: 1.5; }
.mc-body h3 .badge { display: inline-block; margin-left: 8px; font-size: 11px; vertical-align: 2px; }
.mc-body p { margin: 0 0 10px; font-size: 14px; line-height: 1.8; }
.mc-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.mc-body li { position: relative; padding-left: 16px; font-size: 13px; color: var(--ink); line-height: 1.6; }
.mc-body li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
@media (max-width: 1000px) { .mcards { grid-template-columns: 1fr; } }
.mc-strip img { aspect-ratio: auto; height: 150px; }
.mc-strip figcaption { min-height: 3.1em; }
@media (max-width: 1000px) { .mc-strip img { height: 170px; } }

/* 協働ロボット溶接パッケージ：ほかのカードと同じ幅・同じ比率にそろえる */
.eq.eq--robot { grid-column: auto; grid-template-columns: 200px minmax(0, 1fr); }
.eq--robot .eq-img { padding: 8px; }
.eq--robot .eq-img img { max-height: 170px; }
.eq-credit { font-size: 10.5px; line-height: 1.4; }
.eq-grid { align-items: start; }
.eq-more-in, .eq-more-in.x { grid-template-columns: 1fr; }
@media (min-width: 1001px) { .eq-more-in { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .eq.eq--robot { grid-template-columns: 1fr; } }

.eq-more-in .eq-desc { margin: 0; font-size: 13.5px; }
.eq--robot .eq-src { margin-top: 8px; }
.eq--robot .eq-body { padding-bottom: 14px; }

.eq-feat { margin: 8px 0 0; }
.eq-feat p { margin: 0 0 3px; font-size: 12px; font-weight: 900; color: var(--navy); }
.eq-feat ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.eq-feat li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.6; }
.eq-feat li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.newbanner .lead.lead--one { max-width: none; }
@media (min-width: 900px) { .newbanner .lead.lead--one { white-space: nowrap; } }

/* 機械カード：写真帯の高さ・キャプション・見出しの位置を、3枚でそろえる */
.mc-strip { height: 232px; align-items: stretch; }
.mc-strip figure { height: 100%; }
.mc-strip img { flex: none; height: 150px; }
.mc-strip figcaption { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; font-size: 11px; line-height: 1.4; padding: 2px 6px 8px; overflow: hidden; }
.mc-body { flex: 1; display: flex; flex-direction: column; }
.mc-body h3 { min-height: 2.9em; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin-bottom: 4px; }
.mc-body p { min-height: 3.6em; }
@media (max-width: 1000px) { .mc-strip { height: 250px; } .mc-strip img { height: 170px; } .mc-body h3, .mc-body p { min-height: 0; } }
.mc-strip { height: 214px; }
@media (max-width: 1000px) { .mc-strip { height: 250px; } }

/* トップ：設備から広がる、対応力。（機械の写真4カード）*/
.mcards.mcards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.mcards--4 .mc-strip { height: 190px; }
.mcards--4 .mc-strip img { height: 130px; }
.mcards--4 .mc-body { padding: 14px 16px 16px; }
.mcards--4 .mc-body h3 { font-size: 17px; min-height: 2.9em; }
.mcards--4 .mc-body p { font-size: 13px; min-height: 5.4em; }
.mc-go { margin-top: auto; font-size: 13px; font-weight: 900; color: var(--blue); }
.mc-go i { font-style: normal; margin-left: 2px; }
@media (max-width: 1100px) { .mcards.mcards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mcards.mcards--4 { grid-template-columns: 1fr; } .mcards--4 .mc-strip { height: 220px; } .mcards--4 .mc-strip img { height: 160px; } .mcards--4 .mc-body h3, .mcards--4 .mc-body p { min-height: 0; } }
.mcards--4 .mc-strip { height: 206px; }
.mcards--4 .mc-strip img { height: 146px; }

/* 設備一覧：カードの大きさを、情報量にかかわらずそろえる */
.eq-grid { align-items: stretch; }
.eq-grid > .eq { min-height: 220px; }
.eq-grid > .eq .eq-img { min-height: 0; }
.eq--text { min-height: 0 !important; }
.eq-img--photo img { max-height: 180px; }
.eq-grid > .eq:not(.eq--robot) { min-height: 236px; }
.eq-grid > .eq.eq--text { grid-column: auto; min-height: 236px; }
.eq-grid > .eq.eq--text .eq-body { align-self: center; }

/* 設備一覧：特長（箇条書き）と、主な仕様（折りたたみ） */
.eq-feat ul { gap: 3px; }
.eq-feat li { font-size: 12.5px; }
.eq-spec2 { margin: 8px 0 0; }
.eq-spec2 summary { cursor: pointer; font-size: 12.5px; font-weight: 900; color: var(--blue); list-style: none; }
.eq-spec2 summary::-webkit-details-marker { display: none; }
.eq-spec2 summary::before { content: '＋'; margin-right: 6px; }
.eq-spec2[open] summary::before { content: '−'; }
.eq-spec2 dl { margin: 8px 0 0; display: grid; grid-template-columns: minmax(7em, 36%) 1fr; gap: 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.eq-spec2 dt, .eq-spec2 dd { margin: 0; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.eq-spec2 dt { font-weight: 900; color: var(--navy); background: #f3f7fc; }
.eq-grid > .eq:not(.eq--robot) { min-height: 300px; }
.eq-grid > .eq.eq--text { min-height: 300px; }
.newbanner .lead--when { margin-bottom: 6px; font-weight: 700; color: #ffe27a; }

/* 設備一覧：用途・掲載文 */
.eq-use { margin: -4px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--blue); line-height: 1.6; }
.eq-copy { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: var(--ink); }
.eq-spec-note { margin: 6px 0 0; font-size: 11px; color: var(--mute); }
.eq-grid + .eq-sub, .eq-sub { margin-top: 28px; }
.eq-grid > .eq:not(.eq--robot) { min-height: 360px; }
.eq-grid > .eq.eq--text { min-height: 300px; }
.eq-grid > .eq:last-child:not(.eq--robot) { grid-column: auto; }
.eq-grid > .eq { min-height: 0; }
.eq-grid > .eq:not(.eq--robot) { min-height: 330px; }

/* 設備カード：詳細（特長・仕様・出典）を、ボタンで開閉 */
.eq.eq--robot { grid-column: auto; grid-template-columns: 200px minmax(0, 1fr); }
.eq--robot .eq-img { padding: 8px; }
.eq--robot .eq-img img { max-height: 170px; }
.eq-more2 { margin: 12px 0 0; border-top: 1px dashed var(--line); padding-top: 8px; }
.eq-more2 > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 900; color: var(--blue); padding: 6px 14px; border: 1px solid #bcd0ee; border-radius: 999px; background: #f3f8ff; }
.eq-more2 > summary::-webkit-details-marker { display: none; }
.eq-more2 > summary::before { content: '＋'; }
.eq-more2[open] > summary::before { content: '−'; }
.eq-more2 > summary:hover { background: #e6f0fd; }
.eq-more2-in { padding-top: 10px; display: grid; gap: 12px; }
.eq-specs p { margin: 0 0 4px; font-size: 12px; font-weight: 900; color: var(--navy); }
.eq-specs dl { margin: 0; display: grid; grid-template-columns: minmax(7em, 36%) 1fr; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.eq-specs dt, .eq-specs dd { margin: 0; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.eq-specs dt { font-weight: 900; color: var(--navy); background: #f3f7fc; }
.eq-foot { margin: 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.7; color: var(--mute); }
.eq-foot a { color: var(--blue); font-weight: 700; white-space: nowrap; }
.eq-rsec h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--navy); font-weight: 900; }
.eq-rsec ul { margin: 6px 0 0; padding-left: 1.2em; font-size: 12.5px; line-height: 1.7; }
.eq-rsec p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; }
.eq-rsec .eq-note { color: var(--mute); }
.eq-rsec .eq-fig { margin: 0; }
@media (max-width: 560px) { .eq.eq--robot { grid-template-columns: 1fr; } }
.mcards--4 .mc-strip figcaption { display: none; }
.mcards--4 .mc-strip { height: 150px; }
.mcards--4 .mc-strip img { height: 138px; padding: 6px 4px; }
.mcards--4 .mc-body h3 { min-height: 0; }
.mcards--4 .mc-body p { min-height: 7.5em; }

.mcards.mcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcards--2 .mc-strip figcaption { display: none; }
.mcards--2 .mc-strip { height: 190px; }
.mcards--2 .mc-strip img { height: 178px; }
.mcards--2 .mc-body p { min-height: 0; }
.mcards--2 .mc-body h3 { min-height: 0; }
@media (max-width: 1000px) { .mcards.mcards--2 { grid-template-columns: 1fr; } }
.eq-grid { align-items: start; }
.eq-grid > .eq .eq-img { align-self: stretch; }
.eq-grid > .eq:not(.eq--robot) { min-height: 0; }
.eq-img--photo { min-height: 220px; }
.eq-grid > .eq .eq-img--photo { align-items: flex-start; padding-top: 24px; }
.eq-grid > .eq .eq-img--photo img { height: auto; max-height: 190px; }
.eq-grid > .eq.eq--robot .eq-img { justify-content: flex-start; align-items: center; }
.eq-grid > .eq .eq-img--photo { justify-content: flex-start; }

/* お知らせ：予定地・設備の写真 */
.nl-plan { display: grid; gap: 12px; }
.nl-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nl-photos figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.nl-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.nl-photos figcaption { padding: 6px 10px; font-size: 12px; color: var(--ink); line-height: 1.5; }
@media (max-width: 560px) { .nl-photos { grid-template-columns: 1fr; } }

/* 箇条書き：点を文字の内側に収め、折り返しも点の右にそろえる（はみ出し防止） */
.eq-rsec ul, .eq-more-in ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.eq-rsec li, .eq-more-in li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.7; overflow-wrap: anywhere; }
.eq-rsec li::before, .eq-more-in li::before { content: ''; position: absolute; left: 3px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.eq-rsec h4 { margin: 14px 0 4px; }
.eq-rsec:first-child h4 { margin-top: 0; }
.eq-feat li, .mc-body li { overflow-wrap: anywhere; }
.nl-rel--direct { margin: 10px 0 0; }

/* ヒーロー：ズームを控えめにして、写真を引きで見せる */
.hs-bg { transform: scale(1.04); }
@keyframes hszoom { from { transform: scale(1.04) translateX(.6%); } to { transform: scale(1); } }

/* サブページのヒーロー：全ページで同じ高さにそろえる（リード文の行数に左右されない） */
.subhero { min-height: 0; }
.subhero-in { box-sizing: border-box; height: 356px; padding-top: 74px; padding-bottom: 0; }
@media (max-width: 760px) { .subhero-in { height: 205px; padding-top: 26px; } }

/* 数字で見る成長（下段）：納入先の分野（ドーナツ）と、大きな数字 */
.fd-body { display: flex; align-items: center; gap: 18px; margin: 14px 0; flex: 1; }
.fd-ring { position: relative; flex: none; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; }
.fd-ring::before { content: ''; position: absolute; inset: 24px; border-radius: 50%; background: #fff; }
.fd-ring span { position: relative; text-align: center; line-height: 1; font-family: 'Jost', sans-serif; color: var(--navy); }
.fd-ring b { font-size: 34px; font-weight: 500; }
.fd-ring small { display: block; margin-top: 3px; font-size: 11px; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; }
.fd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1; min-width: 0; }
.fd-legend li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.4; }
.fd-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fd-legend span { flex: 1; min-width: 0; }
.fd-legend b { font-family: 'Jost', sans-serif; font-weight: 500; color: var(--navy); white-space: nowrap; font-size: 15px; }
.fd-legend small { font-family: 'Noto Sans JP', sans-serif; font-size: 11px; margin-left: 1px; }
.bignums { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; flex: 1; align-content: space-around; }
.bignums li { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bignums li:last-child { border-bottom: 0; padding-bottom: 0; }
.bignums b { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 46px; line-height: 1.05; color: var(--navy); }
.bignums b small { font-family: 'Noto Sans JP', sans-serif; font-size: 16px; font-weight: 700; color: var(--blue); margin-left: 3px; }
.bignums span { font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.g-row2 .chart-card { display: flex; flex-direction: column; }
@media (max-width: 520px) { .fd-body { flex-direction: column; align-items: flex-start; } .bignums b { font-size: 40px; } }

/* お知らせ：機械の写真は切らずに、白地へ全体を表示 */
.nr-img.nr-img--device { background: #fff; display: grid; place-items: center; }
.nr-img.nr-img--device img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }

/* 売上の伸び（2006年=1）：横向きの伸びる線 */
.mult { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; flex: 1; align-content: space-around; }
.mult .mt { display: flex; align-items: baseline; gap: 6px; }
.mult .mt span { font-size: 12.5px; color: var(--mute); min-width: 4.2em; }
.mult .mt b { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 34px; line-height: 1; color: var(--navy); }
.mult .mt small { font-size: 14px; font-weight: 700; color: var(--blue); }
.mult li:last-child .mt b { color: #e5a800; font-size: 44px; }
.mult .mb { height: 10px; margin-top: 6px; border-radius: 999px; background: #eef3fa; overflow: hidden; }
.mult .mb i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1c5fc6, #38a437); transform-origin: left; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1) .3s; }
.mult li:last-child .mb i { background: linear-gradient(90deg, #f6c500, #e5a800); }
.mult .mb i { animation: multgrow 1.4s cubic-bezier(.2,.8,.2,1) .4s both; }
@keyframes multgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 設備のラインナップ：機械1台＝四角1つ。分類ごとに並べる */
.lineup { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; flex: 1; align-content: space-around; }
.lu-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--navy); }
.lu-h b { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 22px; }
.lu-h small { font-family: 'Noto Sans JP', sans-serif; font-size: 11px; margin-left: 2px; }
.lu-dots { display: flex; gap: 6px; }
.lu-dots i { display: block; width: 34px; height: 22px; border-radius: 5px; animation: lupop .5s ease-out both; }
.lu-dots i:nth-child(2) { animation-delay: .1s; } .lu-dots i:nth-child(3) { animation-delay: .2s; } .lu-dots i:nth-child(4) { animation-delay: .3s; }
.lu-dots i.is-plan { background: transparent !important; border: 2px dashed #0d3b8c; box-sizing: border-box; }
@keyframes lupop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lineup { gap: 12px; margin-top: 10px; }
.big-card .fine { margin-top: 10px; }

/* 事業内容「私たちの責任と立場」：見出しの下に、黄色の縦線つきのリード文として配置 */
.pos-head { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.pos-head .pos-text { max-width: none; padding: 4px 0 4px 18px; border-left: 4px solid var(--yellow); }
.pos-head .pos-text p { margin: 0; font-size: 17px; line-height: 1.9; font-weight: 500; color: var(--navy); }
@media (max-width: 760px) { .pos-head .pos-text { padding-left: 14px; } .pos-head .pos-text p { font-size: 15px; } }

/* 設備のラインナップ：濃紺の大きな数字カード */
.big-card.big-card--dark { background: linear-gradient(155deg, #0a2f73, #1c5fc6); border-color: transparent; color: #fff; }
.big-card--dark > figcaption { color: #fff; }
.lu-big { margin: 6px 0 0; display: flex; align-items: baseline; gap: 8px; font-family: 'Jost', 'Noto Sans JP', sans-serif; line-height: 1; }
.lu-big b { font-size: 92px; font-weight: 500; color: #f6c500; letter-spacing: -.02em; }
.lu-big span { font-size: 24px; font-weight: 700; font-family: 'Noto Sans JP', sans-serif; }
.lu-lead { margin: 6px 0 14px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .9); }
.lu-bar { display: flex; gap: 3px; height: 16px; border-radius: 999px; overflow: hidden; }
.lu-bar i { display: block; height: 100%; transform-origin: left; animation: multgrow 1.2s cubic-bezier(.2,.8,.2,1) .3s both; }
.lu-bar i:nth-child(2) { animation-delay: .5s; } .lu-bar i:nth-child(3) { animation-delay: .7s; } .lu-bar i:nth-child(4) { animation-delay: .9s; }
.lu-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; }
.lu-key li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .92); }
.lu-key i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lu-key span { flex: 1; }
.lu-key b { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 15px; }
.lu-plan { margin: auto 0 0; padding-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.lu-plan em { font-style: normal; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 18px; color: #0a2f73; background: #f6c500; padding: 3px 11px; border-radius: 999px; flex: none; animation: planpulse 2.4s ease-in-out infinite; }
@keyframes planpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 197, 0, .55); } 50% { box-shadow: 0 0 0 9px rgba(246, 197, 0, 0); } }
@media (max-width: 520px) { .lu-big b { font-size: 76px; } }
.lu-bar i:nth-child(1), .lu-key li:nth-child(1) i { background: #8cc4ff !important; }
.lu-bar i:nth-child(2), .lu-key li:nth-child(2) i { background: #ffffff !important; }
.lu-bar i:nth-child(3), .lu-key li:nth-child(3) i { background: #5fd36a !important; }
.lu-bar i:nth-child(4), .lu-key li:nth-child(4) i { background: #f6c500 !important; }

/* 設備のラインナップ：左右のカードに合わせて白地に */
.big-card.big-card--dark { background: #fff; border-color: var(--line); color: var(--ink); }
.big-card--dark > figcaption { color: var(--navy); }
.lu-big b { color: var(--navy); }
.lu-big span { color: var(--navy); }
.lu-lead { color: var(--ink); }
.lu-key li { color: var(--ink); }
.lu-key b { color: var(--navy); }
.lu-plan { color: var(--ink); border-top: 1px solid var(--line); margin-top: auto; }
.lu-bar i:nth-child(1), .lu-key li:nth-child(1) i { background: #0d3b8c !important; }
.lu-bar i:nth-child(2), .lu-key li:nth-child(2) i { background: #1c5fc6 !important; }
.lu-bar i:nth-child(3), .lu-key li:nth-child(3) i { background: #38a437 !important; }
.lu-bar i:nth-child(4), .lu-key li:nth-child(4) i { background: #f6c500 !important; }

/* 拠点カード：説明文の有無に関わらず、住所の区切り線の高さをそろえる */
.locc-desc { min-height: 1.6em; }
.locc-desc:empty { display: block; }

/* 設備カード：導入予定バッジは機械名の下に。同じ行のカードは高さをそろえる */
.eq-body h3 .badge { display: block; width: fit-content; margin: 8px 0 0; }
.eq-grid { align-items: stretch; }
.eq-grid > .eq { height: 100%; }

/* TOPヒーロー：写ルンです風。明るく、はっきり、青空のようなリフレッシュ感
   ・青いベールは文字の側だけに薄く
   ・左右の端に、フィルムのような淡いピンク／ミントの光漏れ
   ・白っぽく持ち上げた影と、細かい粒子 */
.hero--b .hs-bg {
  background:
    linear-gradient(90deg, rgba(10, 44, 112, .74) 0, rgba(14, 62, 140, .42) 32%, rgba(20, 90, 170, .06) 60%, rgba(20, 90, 170, 0) 100%),
    var(--img) var(--pos, 50% 50%) / cover;
  transform: scale(1.06);
  filter: contrast(1.03) saturate(1.1) brightness(1.04);
}
.hero--b .hs.is-active .hs-bg { animation: hsdrift 10s cubic-bezier(.25, .6, .3, 1) forwards; }
@keyframes hsdrift { from { transform: scale(1.09) translate3d(1.2%, .6%, 0); } to { transform: scale(1.0) translate3d(0, 0, 0); } }
.hero--b .hs::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 70% at 100% 28%, rgba(255, 150, 190, .46) 0, rgba(255, 170, 200, .18) 48%, rgba(255, 170, 200, 0) 100%),
    radial-gradient(ellipse 40% 55% at 94% 100%, rgba(120, 235, 225, .36) 0, rgba(120, 235, 225, 0) 100%),
    radial-gradient(ellipse 30% 40% at 62% 0, rgba(255, 244, 210, .30) 0, rgba(255, 244, 210, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 1.6s ease .2s;
}
.hero--b .hs.is-active::before { opacity: 1; animation: hsglow 6s ease-in-out infinite alternate; }
@keyframes hsglow { from { opacity: .55; transform: translateX(1.5%); } to { opacity: 1; transform: translateX(0); } }
.hero--b .hs::after {
  content: ''; position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: hsgrain 1.1s steps(6) infinite;
}
@keyframes hsgrain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
.hero--b .hs .wrap { z-index: 3; }
.hero--b .hs .copy h1 { text-shadow: 0 2px 18px rgba(6, 28, 80, .55); }
@media (prefers-reduced-motion: reduce) {
  .hero--b .hs.is-active .hs-bg, .hero--b .hs.is-active::before, .hero--b .hs::after { animation: none; }
}
@media (max-width: 760px) {
  .hero--b .hs-bg { background: linear-gradient(180deg, rgba(10, 44, 112, .58) 0, rgba(14, 62, 140, .34) 55%, rgba(20, 90, 170, .16) 100%), var(--img) var(--pos, 50% 50%) / cover; }
}

/* 拠点の写真：事業所の写真を主役に、ほかの写真（第二工場・予定地）をゆっくり切り替える */
.locc-img--slides, .gc-photo[data-xs] { position: relative; overflow: hidden; }
.xs-i { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.xs-i.is-on { opacity: 1; z-index: 1; }
.xs-i img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.05); transition: transform 8s ease-out; }
.xs-i.is-on img { transform: scale(1); }
.xs-i figcaption { position: absolute; left: 8px; top: 8px; padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .94); color: var(--navy); font-size: 12px; font-weight: 900; line-height: 1.5; }
.gc-photo .xs-i figcaption { left: 6px; top: 6px; padding: 1px 8px; font-size: 10.5px; }
.xs-dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.xs-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(10, 40, 100, .25); cursor: pointer; transition: width .3s, background .3s; }
.xs-dots button.is-on { width: 20px; border-radius: 4px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .xs-i, .xs-i img { transition: none; } }

/* 地球儀カードの「×」：写真スライドの上に出し、どの写真の上でも見えるようにする */
.globe-close { z-index: 5; background: rgba(255, 255, 255, .94); color: var(--navy); box-shadow: 0 1px 6px rgba(6, 28, 80, .3); font-weight: 700; }
.globe-close:hover { background: #fff; }

/* 協働ロボット：「詳細を見る」を開くと、左の写真は画面に固定。説明を読み進めると、写真が順に切り替わる */
.eq--robot { overflow: clip; }
.eq-stick { position: relative; width: 100%; height: 190px; }
.eq-st { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.eq-st.is-on { opacity: 1; }
.eq-st img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: contain; display: block; }
.eq-st figcaption { flex: none; font-size: 11.5px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.4; }
.eq-grid > .eq.eq--robot .eq-img { align-items: stretch; justify-content: flex-start; padding: 12px; }
.eq-grid > .eq.eq--robot .eq-img img { max-height: none; height: auto; }
@media (min-width: 761px) {
  .eq--robot:has(details[open]) { grid-column: 1 / -1; grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); }
  .eq--robot:has(details[open]) .eq-stick { position: sticky; top: 104px; height: min(60vh, 420px); }
  .eq--robot:has(details[open]) .eq-fig--sm { display: none; }
  .eq--robot:has(details[open]) .eq-rsec { min-height: 38vh; }
}
@media (max-width: 760px) {
  .eq-st:not(:first-child) { display: none; }
  .eq-st { position: static; }
  .eq-stick { height: auto; }
}

/* カードの高さ：閉じているカードは同じ行で同じ高さ。ひとつ開いても、隣は伸ばさない */
.eq-grid { align-items: start; }
.eq-grid > .eq { height: auto; }

/* 導入予定の機械：1段に1台（2027年2月 → 2027年6月の順） */
.eq-grid--one { grid-template-columns: minmax(0, 1fr); }
.eq-grid--one > .eq.eq--robot { grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); }
@media (max-width: 560px) { .eq-grid--one > .eq.eq--robot { grid-template-columns: 1fr; } }
.eq-grid--one > .eq { grid-template-columns: 300px minmax(0, 1fr); }
.eq-grid--one > .eq.eq--robot { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 560px) { .eq-grid--one > .eq, .eq-grid--one > .eq.eq--robot { grid-template-columns: 1fr; } }

/* TOPヒーローの幕開け：青い面の中で地球儀が回り、ぐっと広がって、写真とコピー、黄と青の線が現れる */
.hi-ov { position: absolute; inset: 0; z-index: 30; background: radial-gradient(ellipse 70% 90% at 50% 45%, #1250b4 0, #0a2d6e 60%, #061c4a 100%); display: grid; place-items: center; align-content: center; gap: 22px; overflow: hidden; animation: hi-out .9s ease 2.95s both; }
.hi-globe { width: 168px; height: 168px; animation: hi-pop .8s cubic-bezier(.2, .8, .2, 1) .15s both; }
.hi-zoom { width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 50% 50%; animation: hi-zoom 1.05s cubic-bezier(.7, 0, .2, 1) 2.35s both; }
.hi-m { transform-box: fill-box; transform-origin: center; animation: hi-spin 4s linear infinite; animation-delay: var(--d); }
.hi-orbit { stroke-dasharray: 560; animation: hi-draw 1.2s ease .4s both; }
.hi-tag { margin: 0; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: .14em; animation: hi-tag 1.6s ease .8s both; }
@keyframes hi-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes hi-spin { 0% { transform: scaleX(1); animation-timing-function: ease-in-out; } 25% { transform: scaleX(0); animation-timing-function: ease-in-out; } 50% { transform: scaleX(-1); animation-timing-function: ease-in-out; } 75% { transform: scaleX(0); animation-timing-function: ease-in-out; } 100% { transform: scaleX(1); } }
@keyframes hi-draw { from { stroke-dashoffset: 560; } to { stroke-dashoffset: 0; } }
@keyframes hi-tag { 0% { opacity: 0; transform: translateY(10px); } 18% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hi-zoom { 0% { transform: scale(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(28); opacity: 0; } }
@keyframes hi-out { to { opacity: 0; visibility: hidden; } }
/* 幕が開いたあとに、写真のゆっくりした動き・コピー・黄と青の線を始める */
.hero--b.hi .hs.is-active .hs-bg { animation-delay: 2.7s; animation-fill-mode: both; }
.hero--b.hi .hs.is-active .copy > * { animation-delay: 3.05s; }
.hero--b.hi .hs.is-active .copy > :nth-child(2) { animation-delay: 3.25s; }
.hero--b.hi .hs.is-active .copy > :nth-child(3) { animation-delay: 3.45s; }
.hero--b.hi .hs.is-active .copy > :nth-child(4) { animation-delay: 3.65s; }
.hero--b.hi .swoosh svg { animation-delay: 3.3s; animation-duration: 1.9s; }
@media (max-width: 760px) { .hi-globe { width: 132px; height: 132px; } .hi-tag { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hi-ov { display: none; } }

/* TOPヒーロー：地球儀のかたちに写真を映す。写真は鮮明に、少し陰影をつけて味を出す */
.hero--b { background: radial-gradient(ellipse 60% 90% at 78% 40%, #164fae 0, #0c3a88 45%, #07235a 100%); }
.hero--b .hg { position: absolute; z-index: 2; top: calc(50% - 34px); right: max(3vw, calc((100% - 1120px) / 2 + 6px)); width: min(470px, 78%); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; animation: hg-in 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.hero--b .hg::before { content: ''; position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); }
.hero--b .hg .hslides { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 24px 60px rgba(2, 12, 40, .55), inset 0 0 0 1px rgba(255, 255, 255, .2); background: #0a2a66; }
.hero--b .hg .hs-bg { background: var(--img) var(--pos, 50% 50%) / cover; filter: contrast(1.14) saturate(1.04) brightness(.98); }
.hero--b .hg .hslides::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 56%, rgba(4, 18, 56, .5) 100%); }
.hg-wire { position: absolute; inset: -12%; width: 124%; height: 124%; z-index: 5; overflow: visible; }
.hg-m { animation-duration: 6s; }
@keyframes hg-in { from { opacity: 0; transform: translateY(-50%) scale(.82); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
.hero--b.hi .hg { animation-delay: 3s; }
.hero--b .hs::before { background: radial-gradient(ellipse 50% 60% at 100% 22%, rgba(255, 150, 190, .3) 0, rgba(255, 150, 190, 0) 100%); }
@media (max-width: 1000px) { .hero--b .hg { width: min(380px, 70%); } }
@media (max-width: 760px) { .hero--b .hg { width: 250px; top: auto; bottom: 0; right: -64px; transform: none; opacity: .95; animation-name: hg-in-m; } @keyframes hg-in-m { from { opacity: 0; } to { opacity: .95; } } }
@media (max-width: 760px) {
  .hero--b .hg { width: 190px; left: 50%; right: auto; bottom: 38px; top: auto; transform: translateX(-50%); animation-name: hg-in-m2; }
  @keyframes hg-in-m2 { from { opacity: 0; transform: translateX(-50%) scale(.82); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
  .hero--b .copy, .hs .copy, .hero--b.hi .copy { padding-bottom: 246px; }
}

/* 地球儀を大きく。メッセージの右端に少し重ねる（文字は前面、地球儀側は左を少し暗くして読みやすく） */
@media (min-width: 1001px) {
  .hero--b .hg { width: clamp(480px, 44vw, 600px); right: max(1vw, calc((100% - 1120px) / 2 - 8px)); top: calc(50% - 30px); }
  .hero--b .hg .hslides::after { background: linear-gradient(90deg, rgba(5, 24, 70, .62) 0, rgba(5, 24, 70, 0) 46%), radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(4, 18, 56, .5) 100%); }
  .hero--b .copy h1, .hero--b .copy .en { text-shadow: 0 2px 18px rgba(4, 18, 56, .7); }
}

/* 地球儀をさらに大きく（上下は切れてよい）。英文が重なっても読めるよう、左側をしっかり暗く */
@media (min-width: 1001px) {
  .hero--b .hg { width: clamp(560px, 55vw, 780px); right: max(-2vw, calc((100% - 1120px) / 2 - 78px)); top: 50%; }
  .hero--b .hg .hslides::after { background: linear-gradient(90deg, rgba(4, 20, 64, .86) 0, rgba(4, 20, 64, .6) 26%, rgba(4, 20, 64, 0) 60%), radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(4, 18, 56, .5) 100%); }
  .hero--b .copy h1, .hero--b .copy .en { text-shadow: 0 1px 3px rgba(2, 12, 40, .75), 0 2px 22px rgba(2, 12, 40, .8); }
}

/* サブページのヒーロー：TOPと同じ、青い面と地球儀の窓 */
.subhero { background: radial-gradient(ellipse 60% 110% at 78% 45%, #164fae 0, #0c3a88 48%, #07235a 100%); isolation: auto; }
.subhero::before { display: none; }
.subhero .wrap { position: relative; z-index: 5; }
.subhero .hg { position: absolute; z-index: 2; top: 50%; right: max(0px, calc((100% - 1120px) / 2 - 56px)); width: 470px; aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; animation: hg-in 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.subhero .hg::before { content: ''; position: absolute; inset: -9%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); }
.subhero .hg .hslides { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 24px 60px rgba(2, 12, 40, .55), inset 0 0 0 1px rgba(255, 255, 255, .2); background: #0a2a66; }
.subhero .hg .hs-bg { background: var(--img) var(--pos, 50% 50%) / cover; filter: contrast(1.14) saturate(1.04) brightness(.98); transform: scale(1.06); animation: hsdrift 12s cubic-bezier(.25, .6, .3, 1) both; }
.subhero .hg .hslides::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: 50%; pointer-events: none; background: linear-gradient(90deg, rgba(4, 20, 64, .86) 0, rgba(4, 20, 64, .55) 26%, rgba(4, 20, 64, 0) 60%), radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(4, 18, 56, .5) 100%); }
.subhero .copy, .subhero h1, .subhero .lead, .subhero .en { text-shadow: 0 1px 3px rgba(2, 12, 40, .7), 0 2px 20px rgba(2, 12, 40, .7); }
.subhero .lead { max-width: 58%; }
@media (max-width: 1000px) { .subhero .hg { width: 360px; right: -60px; } }
@media (max-width: 760px) {
  .subhero .hg { width: 168px; top: auto; bottom: -34px; right: -42px; transform: none; opacity: .5; animation-name: hg-in-m; }
  .subhero .lead { max-width: 100%; }
}

/* 写真なしの地球儀（お問い合わせ）：青い球体と、経線・緯線・黄色のリングだけ */
.subhero .hg--blank .hslides { background: radial-gradient(circle at 34% 28%, #3a86e6 0, #1c5fc6 38%, #0e3a88 72%, #0a2a66 100%); }
.subhero .hg--blank .hslides::after { background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 40%), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(4, 18, 56, .45) 100%); }
.subhero .hg--blank .hg-wire g { opacity: .8; }

/* TOPヒーロー（バナー型）：用意された一枚のバナー画像を、そのまま主役に。ボタンと黄色・青の線をHPの形で重ねる */
.hero--banner { background: #0a2d6e; }
.hero--banner .hbn { position: absolute; inset: 0; z-index: 1; background: var(--bn) 50% 50% / cover no-repeat; animation: hbn-in 9s cubic-bezier(.25, .6, .3, 1) both; }
.hero--banner .hbn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 18, 56, .55) 0, rgba(4, 18, 56, 0) 34%), linear-gradient(90deg, rgba(4, 18, 56, .38) 0, rgba(4, 18, 56, 0) 42%); }
@keyframes hbn-in { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero--banner.hi .hbn { animation-delay: 2.7s; }
.hero--banner .copy { position: absolute; left: 0; bottom: 84px; padding: 0; width: auto; }
.hero--banner .copy .cta { margin: 0 0 12px; }
.hero--banner .copy .note { margin: 0; text-shadow: 0 1px 8px rgba(2, 12, 40, .8); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  .hero--banner .hbn { background-position: 8% 50%; }
  .hero--banner .copy { bottom: 66px; }
}
.hero--banner > .wrap { position: absolute; inset: 0; left: 50%; transform: translateX(-50%); }
.hero--banner > .wrap { left: 0; right: 0; width: 100%; margin: 0 auto; transform: none; }
.hero--banner .copy { bottom: 92px; }
@media (max-width: 760px) { .hero--banner { height: 430px; } .hero--banner .copy { bottom: 74px; } .hero--banner .copy .cta { gap: 10px; } }
.hero--banner > .wrap { max-width: none; padding: 0; }
.hero--banner .copy { left: max(18px, calc((100% - 1120px) / 2)); right: 18px; }

/* ヒーロー（斜め3枚の窓）：清潔感のある青と白、写真は鮮明に。窓が順に開き、光が走り、黄と青の線が伸びる */
.hero--strips, .subhero { background: linear-gradient(100deg, #0a3f94 0, #1560c4 48%, #2a82dc 100%); }
.hero--strips::before, .subhero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 50% 70% at 22% 0, rgba(255, 255, 255, .16) 0, rgba(255, 255, 255, 0) 70%), linear-gradient(0deg, rgba(4, 22, 70, .28) 0, rgba(4, 22, 70, 0) 40%); }
.strips { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.st { position: absolute; top: -2px; bottom: -2px; overflow: hidden; transform: skewX(-16deg); background: #dbe9f8; }
.st-a { left: 52%; width: 16.5%; } .st-b { left: 69.6%; width: 13.6%; } .st-c { left: 84.3%; width: 24%; }
.st-in { position: absolute; top: 0; bottom: 0; left: -90px; right: -90px; transform: skewX(16deg); }
.st-in::before { content: ''; position: absolute; inset: 0; background: var(--img) var(--pos, 50% 50%) / cover no-repeat; filter: contrast(1.06) saturate(1.1) brightness(1.05); animation: st-zoom 14s ease-out both; }
.st-a .st-in { animation: st-top 1.5s cubic-bezier(.22, .72, .2, 1) .15s both; }
.st-b .st-in { animation: st-bottom 1.5s cubic-bezier(.22, .72, .2, 1) .45s both; }
.st-c .st-in { animation: st-top 1.5s cubic-bezier(.22, .72, .2, 1) .75s both; }
@keyframes st-top { from { transform: skewX(16deg) translateY(-105%); } to { transform: skewX(16deg) translateY(0); } }
@keyframes st-bottom { from { transform: skewX(16deg) translateY(105%); } to { transform: skewX(16deg) translateY(0); } }
@keyframes st-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.st-light { position: absolute; inset: -20%; z-index: 3; mix-blend-mode: screen; background: linear-gradient(117deg, transparent 43%, rgba(219, 240, 255, .17) 47%, rgba(255, 255, 255, .3) 49%, transparent 53%); opacity: 0; animation: st-sweep 10s ease-in-out 2.2s infinite; }
@keyframes st-sweep { 0% { transform: translateX(-30%); opacity: 0; } 8% { opacity: 1; } 24% { transform: translateX(30%); opacity: 0; } 100% { transform: translateX(30%); opacity: 0; } }
.hero--strips > .wrap, .subhero > .wrap { z-index: 5; }
.hero--strips .copy h1, .hero--strips .copy .en { text-shadow: 0 2px 18px rgba(4, 22, 70, .45); }
.subhero .lead { max-width: 44%; }
@media (max-width: 760px) {
  .hero--strips { min-height: 0; }
  .hero--strips .strips { top: auto; height: 196px; bottom: 54px; }
  .hero--strips .copy { padding-bottom: 262px; }
  .st-in { left: -50px; right: -50px; }
  .st-a { left: 6%; width: 27%; } .st-b { left: 35%; width: 27%; } .st-c { left: 63.5%; width: 40%; }
  .subhero .strips { opacity: .32; }
  .subhero .lead { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .st-in, .st-in::before, .st-light { animation: none !important; opacity: 1; } .st-light { opacity: 0; } }

/* ヒーローは写真を全面に。写真は切らず、青い面が斜めに順に開いて現れる（左から文字が読める程度に青を重ねる） */
.hero--strips .strips, .subhero .strips { display: none; }
.hero--strips .hslides, .subhero .hslides { position: absolute; inset: 0; z-index: 1; }
.hero--strips .hs-bg, .subhero .hs-bg { background: linear-gradient(90deg, rgba(6, 44, 118, .84) 0, rgba(10, 64, 150, .56) 36%, rgba(16, 92, 184, .10) 66%, rgba(16, 92, 184, 0) 100%), var(--img) var(--pos, 50% 50%) / cover no-repeat; filter: contrast(1.05) saturate(1.1) brightness(1.04); transform: scale(1.05); }
.hero--strips .hs.is-active .hs-bg, .subhero .hs.is-active .hs-bg { animation: hsdrift 12s cubic-bezier(.25, .6, .3, 1) 1.6s both; }
.hero--strips .hs::before, .hero--strips .hs::after, .subhero .hs::before, .subhero .hs::after { display: none; }
.hero--strips::before, .subhero::after { display: none; }
.rv3 { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.rv3 i { position: absolute; inset: 0; background: linear-gradient(115deg, #0b4599, #2477c8); }
.rv3-l { clip-path: polygon(0 0, 55% 0, 29% 100%, 0 100%); animation: rv-up 1.7s cubic-bezier(.22, .72, .2, 1) .15s both; }
.rv3-c { clip-path: polygon(55% 0, 81% 0, 59% 100%, 29% 100%); animation: rv-down 1.7s cubic-bezier(.22, .72, .2, 1) .45s both; }
.rv3-r { clip-path: polygon(81% 0, 100% 0, 100% 100%, 59% 100%); animation: rv-up 1.7s cubic-bezier(.22, .72, .2, 1) .75s both; }
@keyframes rv-up { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-105%); opacity: 0; } }
@keyframes rv-down { 0% { transform: translateY(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(105%); opacity: 0; } }
.hero--strips .st-light, .subhero .st-light { z-index: 3; animation-delay: 2.6s; }
.hero--strips .hs.is-active .copy > *, .hero--strips .copy > * { animation-delay: 1.5s; }
.hero--strips .hs.is-active .copy > :nth-child(2) { animation-delay: 1.65s; }
.subhero-in > * { animation-delay: 1.5s; }
.subhero-in > :nth-child(2) { animation-delay: 1.62s; }
.subhero-in > :nth-child(3) { animation-delay: 1.74s; }
.hero--strips .swoosh svg, .subhero .swoosh svg { animation-delay: 1.5s; animation-duration: 1.9s; }
@media (max-width: 760px) {
  .hero--strips .copy { padding-bottom: 70px; }
  .hero--strips .hs-bg, .subhero .hs-bg { background: linear-gradient(180deg, rgba(6, 44, 118, .62) 0, rgba(10, 64, 150, .4) 60%, rgba(16, 92, 184, .24) 100%), var(--img) var(--pos, 50% 50%) / cover no-repeat; }
}
@media (prefers-reduced-motion: reduce) { .rv3 { display: none; } }

/* ヒーロー（丸み）：明るく清潔な面に、丸みのある写真の窓。ロゴの青・緑・黄の丸が、ゆっくり動き続ける */
.hero--round, .subhero { background: linear-gradient(115deg, #f6faff 0, #e8f2fc 52%, #d8eafb 100%); color: #0b3a85; }
.hero--round::before, .hero--round::after { display: none; }
.subhero::before, .subhero::after { display: none; }
.hero--round .copy h1, .hero--round .copy .en, .hero--round .copy .note, .subhero h1, .subhero .lead, .subhero .en, .subhero .copy { text-shadow: none; }
.hero--round .copy h1, .subhero h1 { color: #0b3a85; }
.hero--round .copy .en { color: #2a62b0; }
.hero--round .copy .note { color: #2a4f86; }
.subhero .lead { color: #2a4f86; max-width: 44%; }
.subhero .en { color: #2a62b0; }
.hero--round .btn:not(.btn--fill) { color: #0b3a85; border-color: #0b3a85; background: rgba(255, 255, 255, .7); }
.hero--round > .wrap, .subhero > .wrap { position: relative; z-index: 5; }
.hr { position: absolute; z-index: 2; top: 50%; right: max(2vw, calc((100% - 1120px) / 2 - 6px)); width: min(580px, 46%); aspect-ratio: 1.55; transform: translateY(-52%); pointer-events: none; }
.hr-frame { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; background: #cfe2f6; box-shadow: 0 26px 56px rgba(16, 70, 150, .24), 0 0 0 6px rgba(255, 255, 255, .9); animation: hr-open 1.5s cubic-bezier(.22, .72, .2, 1) .1s both; }
.hr-frame .hslides { position: absolute; inset: 0; z-index: 1; }
.hr-frame .hs-bg { background: var(--img) var(--pos, 50% 50%) / cover no-repeat; filter: none; transform: scale(1.04); }
.hr-frame .hs.is-active .hs-bg { animation: hsdrift 12s cubic-bezier(.25, .6, .3, 1) both; }
.hr-frame .hs::before, .hr-frame .hs::after { display: none; }
@keyframes hr-open { from { clip-path: inset(18% 18% 18% 18% round 200px); opacity: 0; transform: scale(.92); } to { clip-path: inset(0 round 34px); opacity: 1; transform: scale(1); } }
.hr-c { position: absolute; border-radius: 50%; z-index: 0; }
.hr-c1 { width: 118%; aspect-ratio: 1; left: -10%; top: -48%; background: radial-gradient(circle at 40% 40%, rgba(36, 119, 200, .16) 0, rgba(36, 119, 200, .05) 62%, rgba(36, 119, 200, 0) 72%); animation: hr-float 11s ease-in-out infinite alternate; }
.hr-c2 { width: 84px; aspect-ratio: 1; left: -42px; bottom: -34px; background: #f6c500; z-index: 3; box-shadow: 0 10px 24px rgba(246, 197, 0, .38); animation: hr-pop 1s cubic-bezier(.3, 1.6, .5, 1) 1.1s both, hr-float 7s ease-in-out 2.1s infinite alternate; }
.hr-c3 { width: 54px; aspect-ratio: 1; right: -22px; top: -26px; background: #2fa36b; z-index: 3; box-shadow: 0 8px 20px rgba(47, 163, 107, .35); animation: hr-pop 1s cubic-bezier(.3, 1.6, .5, 1) 1.4s both, hr-float 8.5s ease-in-out 2.4s infinite alternate-reverse; }
@keyframes hr-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes hr-float { from { transform: translate3d(0, -7px, 0); } to { transform: translate3d(0, 8px, 0); } }
.hr-orbit { position: absolute; inset: -16% -12%; width: 124%; height: 132%; z-index: 4; overflow: visible; opacity: 0; animation: hr-fade 1s ease 1.3s both; }
.hr-arc { animation: hr-spin 14s linear infinite; }
@keyframes hr-fade { to { opacity: 1; } }
@keyframes hr-spin { to { stroke-dashoffset: -770; } }
.hero--round .swoosh svg, .subhero .swoosh svg { animation-delay: 1.2s; animation-duration: 1.9s; }
.hero--round .copy > * { animation-delay: .5s; }
.hero--round .copy > :nth-child(2) { animation-delay: .65s; } .hero--round .copy > :nth-child(3) { animation-delay: .8s; } .hero--round .copy > :nth-child(4) { animation-delay: .95s; }
.subhero-in > * { animation-delay: .4s; } .subhero-in > :nth-child(2) { animation-delay: .52s; } .subhero-in > :nth-child(3) { animation-delay: .64s; }
.subhero .hr { width: min(420px, 38%); }
@media (max-width: 1000px) { .subhero .hr { width: 34%; right: 3vw; } .hero--round .hr { width: 46%; } }
@media (max-width: 760px) {
  .hero--round { min-height: 0; }
  .hero--round .hr { top: auto; bottom: 62px; right: auto; left: 50%; width: min(78%, 320px); transform: translateX(-50%); }
  .hero--round .copy { padding-bottom: 268px; }
  .subhero .hr { width: 150px; top: auto; bottom: -8px; right: 10px; transform: none; opacity: .9; }
  .subhero .lead { max-width: 100%; }
  .hr-c2 { width: 52px; left: -22px; } .hr-c3 { width: 34px; right: -12px; top: -16px; }
}
@media (prefers-reduced-motion: reduce) { .hr-frame, .hr-c, .hr-orbit, .hr-arc { animation: none !important; opacity: 1; } .hr-orbit { opacity: 1; } }
@media (max-width: 760px) { .subhero .hr { display: none; } }

/* ヒーロー（丸み・濃い青）：元の濃い青に戻し、衛星のような軌道はやめて、水面に広がる波紋にする */
.hero--round, .subhero { background: radial-gradient(ellipse 60% 100% at 76% 42%, #1a5bbb 0, #0d3f92 46%, #07235a 100%); color: #fff; }
.hero--round .copy h1, .subhero h1 { color: #fff; text-shadow: 0 2px 18px rgba(4, 22, 70, .4); }
.hero--round .copy .en, .subhero .en { color: #fff; }
.hero--round .copy .note { color: #fff; text-shadow: 0 1px 8px rgba(4, 22, 70, .5); }
.subhero .lead { color: #fff; }
.hero--round .btn:not(.btn--fill) { color: #fff; border-color: #fff; background: transparent; }
.hr-orbit, .hr-arc { display: none; }
.hr-frame { box-shadow: 0 28px 60px rgba(2, 14, 50, .5), 0 0 0 4px rgba(255, 255, 255, .88); }
.hr-c1 { background: radial-gradient(circle at 45% 45%, rgba(90, 170, 255, .26) 0, rgba(60, 140, 240, .08) 58%, rgba(60, 140, 240, 0) 72%); }
.hr-rp { position: absolute; left: 50%; top: 50%; width: 76%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(190, 225, 255, .55); transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: 0; animation: hr-ripple 9s cubic-bezier(.2, .5, .3, 1) infinite; }
.rp2 { animation-delay: 3s; } .rp3 { animation-delay: 6s; }
@keyframes hr-ripple { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 14% { opacity: .75; } 100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hr-rp { animation: none; opacity: .25; transform: translate(-50%, -50%) scale(1.3); } }

/* ヒーロー（写真の3列）：鮮明な写真が、列ごとに違う速さで上下に流れる。登場は列ごとにサクッと */
.hw { position: absolute; z-index: 2; top: -8%; bottom: -8%; right: max(-3vw, calc((100% - 1120px) / 2 - 56px)); width: min(54%, 720px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; transform: rotate(-7deg); transform-origin: 60% 50%; pointer-events: none; }
.hw-col { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%); animation: hw-in .8s cubic-bezier(.2, .8, .2, 1) both; }
.hw-col1 { animation-delay: .1s; } .hw-col2 { animation-delay: .24s; } .hw-col3 { animation-delay: .38s; }
@keyframes hw-in { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
.hw-track { display: flex; flex-direction: column; gap: 14px; will-change: transform; }
.hw-col1 .hw-track { animation: hw-up 46s linear infinite; }
.hw-col2 .hw-track { animation: hw-down 56s linear infinite; }
.hw-col3 .hw-track { animation: hw-up 50s linear infinite; }
@keyframes hw-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes hw-down { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }
.hw-card { margin: 0; border-radius: 18px; overflow: hidden; background: #cfe0f4; box-shadow: 0 14px 30px rgba(2, 14, 50, .42); animation: hw-pop .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(.35s + var(--k) * .09s); }
.hw-card img { display: block; width: 100%; height: auto; }
@keyframes hw-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
.hero--wall .hs, .hero--wall .hslides { display: none; }
@media (max-width: 1000px) { .hw { width: 50%; } }
@media (max-width: 760px) {
  .hero--wall .hw { top: auto; bottom: 54px; height: 232px; left: 4%; right: 4%; width: auto; gap: 9px; transform: none; }
  .hw-track, .hw-card { gap: 9px; } .hw-card { border-radius: 12px; }
  .hero--wall .copy { padding-bottom: 292px; }
  .subhero .hw { display: none; }
}
.subhero .hw { width: min(50%, 600px); gap: 12px; right: max(-4vw, calc((100% - 1120px) / 2 - 64px)); }
.subhero .hw-track { gap: 12px; }
@keyframes hw-up-sub { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) { .hw-track, .hw-card, .hw-col { animation: none !important; } }
@media (min-width: 1001px) { .hero--wall .hw { width: min(47%, 650px); right: -2vw; } .hero--wall .hw-card { box-shadow: 0 12px 26px rgba(2, 14, 50, .45); } }

/* ヒーロー（清潔・鮮明）：2枚の写真を、光る斜めの境目でつなぐ。青い面が順に開き、光が走り、黄と青の線が伸びる */
.hero--clean, .hero--clean.hero--b { background: #0a3f94; }
.hc { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hc-a, .hc-b { position: absolute; inset: 0; }
.hc-a { clip-path: polygon(0 0, 66% 0, 48% 100%, 0 100%); }
.hc-b { clip-path: polygon(66% 0, 100% 0, 100% 100%, 48% 100%); }
.hc-img { position: absolute; top: 0; bottom: 0; background: var(--img) var(--pos, 50% 50%) / cover no-repeat; filter: contrast(1.05) saturate(1.1) brightness(1.05); animation: hsdrift 12s cubic-bezier(.25, .6, .3, 1) 1.5s both; }
.hc-a .hc-img { left: 0; width: 72%; } .hc-b .hc-img { right: 0; width: 60%; }
.hc-seam { position: absolute; inset: 0; clip-path: polygon(65.4% 0, 66.6% 0, 48.6% 100%, 47.4% 100%); background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(214, 238, 255, .9)); filter: blur(1.2px); box-shadow: 0 0 40px 12px rgba(255, 255, 255, .5); }
.hc-seam::after { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(14px); opacity: .6; }
.hc-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 44, 118, .78) 0, rgba(10, 64, 150, .5) 34%, rgba(16, 92, 184, .06) 58%, rgba(16, 92, 184, 0) 100%), linear-gradient(0deg, rgba(4, 22, 70, .3) 0, rgba(4, 22, 70, 0) 30%); }
.hero--clean .st-light, .subhero .st-light { z-index: 3; animation-delay: 2.6s; }
.hero--clean > .wrap { position: relative; z-index: 5; }
.hero--clean .copy h1, .hero--clean .copy .en { text-shadow: 0 2px 16px rgba(4, 22, 70, .5); }
.hero--clean .copy > * { animation-delay: 1.5s; } .hero--clean .copy > :nth-child(2) { animation-delay: 1.65s; } .hero--clean .copy > :nth-child(3) { animation-delay: 1.8s; } .hero--clean .copy > :nth-child(4) { animation-delay: 1.95s; }
.hero--clean .swoosh svg { animation-delay: 1.5s; animation-duration: 1.9s; }
@media (max-width: 760px) {
  .hc-a { clip-path: polygon(0 0, 100% 0, 100% 52%, 0 70%); } .hc-b { clip-path: polygon(0 70%, 100% 52%, 100% 100%, 0 100%); }
  .hc-a .hc-img, .hc-b .hc-img { left: 0; right: 0; width: 100%; }
  .hc-seam { clip-path: polygon(0 69%, 100% 51%, 100% 53%, 0 71%); }
  .hc-veil { background: linear-gradient(180deg, rgba(6, 44, 118, .66) 0, rgba(10, 64, 150, .42) 50%, rgba(16, 92, 184, .12) 100%); }
}
@media (max-width: 760px) { .subhero .hc-veil { background: linear-gradient(180deg, rgba(6, 44, 118, .78) 0, rgba(10, 64, 150, .66) 60%, rgba(16, 92, 184, .4) 100%); } }

/* 数字で見る成長（下段）：分野は「横棒」、設備は「機械のタイル」で、ひと目で量が分かるように */
.fx2 .fb-list { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 13px; flex: 1; align-content: center; }
.fb-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'l n p' 't t t'; column-gap: 8px; row-gap: 5px; align-items: baseline; }
.fb-l { grid-area: l; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fb-n { grid-area: n; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 20px; color: var(--navy); line-height: 1; }
.fb-n small { font-family: 'Noto Sans JP', sans-serif; font-size: 11px; margin-left: 2px; }
.fb-p { grid-area: p; font-style: normal; font-size: 11.5px; color: var(--mute); min-width: 2.6em; text-align: right; }
.fb-track { grid-area: t; display: block; height: 14px; border-radius: 999px; background: #eaf1fa; overflow: hidden; }
.fb-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--c); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * .12s + .15s); }
.fx2.on .fb-fill { width: var(--w); }
.fb-list li:first-child .fb-n { color: var(--c); }
.lu-rows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 11px; }
.lu-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.lu-h b { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 16px; color: var(--navy); white-space: nowrap; }
.lu-h small { font-family: 'Noto Sans JP', sans-serif; font-size: 10.5px; margin-left: 2px; font-weight: 700; }
.lu-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lu-tiles i { height: 22px; border-radius: 7px; background: var(--c); transform: scale(0); transform-origin: 50% 70%; opacity: 0; }
.fx2.on .lu-tiles i { animation: lu-tile .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--t) * .07s + .2s); }
@keyframes lu-tile { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lu-plan2 { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.lu-plan2 small { display: block; font-size: 11px; color: var(--mute); }
.lu-plan2 em { font-style: normal; font-family: 'Jost', sans-serif; font-weight: 600; font-size: 18px; color: #0a2f73; background: #f6c500; padding: 2px 10px; border-radius: 999px; margin-right: 8px; }
.lu-new { display: grid; grid-template-columns: repeat(2, 24px); gap: 6px; flex: none; }
.lu-new i { height: 22px; border-radius: 7px; border: 2px dashed #e0b400; background: rgba(246, 197, 0, .16); animation: lu-pulse 1.8s ease-in-out infinite; }
.lu-new i + i { animation-delay: .5s; }
@keyframes lu-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fb-fill { transition: none; } .fx2 .fb-fill { width: var(--w); } .lu-tiles i { transform: none; opacity: 1; animation: none !important; } }

/* ヒーロー（日々進化 × 変わらない理念）：写真は「今日 → 明日 → お客様へ」と移り、下の細い線はずっと変わらずそこにある */
.hero--story, .subhero { background: #0a3f94; }
.hst { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hst-s { position: absolute; inset: 0; visibility: hidden; z-index: 1; }
.hst-s.is-active { visibility: visible; z-index: 2; animation: hst-wipe 1.5s cubic-bezier(.22, .72, .2, 1) both; }
.hst-s.is-active:first-child { animation: none; }
.hst-img { position: absolute; inset: 0; background: var(--img) var(--pos, 50% 50%) / cover no-repeat; filter: contrast(1.05) saturate(1.1) brightness(1.05); transform: scale(1.06); }
.hst-s.is-active .hst-img { animation: hsdrift 11s cubic-bezier(.25, .6, .3, 1) both; }
.hst-s:first-child.is-active .hst-img { animation-delay: 1.5s; }
@keyframes hst-wipe { from { clip-path: polygon(0 0, 0 0, -22% 100%, 0 100%); } to { clip-path: polygon(0 0, 124% 0, 100% 100%, 0 100%); } }
.hst-veil { position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, rgba(6, 44, 118, .78) 0, rgba(10, 64, 150, .5) 36%, rgba(16, 92, 184, .08) 64%, rgba(16, 92, 184, 0) 100%), linear-gradient(0deg, rgba(4, 22, 70, .5) 0, rgba(4, 22, 70, 0) 34%); }
.hero--story .st-light, .subhero .st-light { z-index: 4; animation-delay: 2.6s; }
.hero--story > .wrap, .subhero > .wrap { position: relative; z-index: 6; }
.hero--story .copy h1, .hero--story .copy .en { text-shadow: 0 2px 16px rgba(4, 22, 70, .5); }
.hero--story .copy > * { animation-delay: 1.5s; } .hero--story .copy > :nth-child(2) { animation-delay: 1.65s; } .hero--story .copy > :nth-child(3) { animation-delay: 1.8s; } .hero--story .copy > :nth-child(4) { animation-delay: 1.95s; }
.hero--story .swoosh svg, .subhero .swoosh svg { animation-delay: 1.5s; animation-duration: 1.9s; }
.hst-steps { position: absolute; z-index: 6; right: max(24px, calc((100% - 1120px) / 2)); bottom: 118px; width: min(500px, 42%); color: #fff; opacity: 0; animation: fadeUp .9s cubic-bezier(.2, .7, .2, 1) 2.1s both; }
.hst-ol { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.hst-ol li { position: relative; display: flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 700; line-height: 1.4; opacity: .62; transition: opacity .6s; cursor: pointer; text-shadow: 0 1px 10px rgba(2, 12, 40, .7); }
.hst-ol li:nth-child(2) { align-items: center; text-align: center; } .hst-ol li:nth-child(3) { align-items: flex-end; text-align: right; }
.hst-ol li i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background: transparent; transition: background .5s, border-color .5s, transform .5s; order: 2; }
.hst-ol li.is-done { opacity: .85; } .hst-ol li.is-done i { background: #fff; }
.hst-ol li.is-on { opacity: 1; } .hst-ol li.is-on i { background: #f6c500; border-color: #f6c500; transform: scale(1.35); box-shadow: 0 0 0 6px rgba(246, 197, 0, .28); }
.hst-line { position: relative; height: 3px; margin: -17px 6px 22px; background: rgba(255, 255, 255, .35); border-radius: 3px; z-index: -1; }
.hst-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: #f6c500; transition: width 1.4s cubic-bezier(.3, .7, .2, 1); }
.hst-fix { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 10px rgba(2, 12, 40, .7); }
.hst-fix i { width: 9px; height: 9px; background: #f6c500; transform: rotate(45deg); flex: none; }
.subhero .hst-steps { bottom: 96px; width: min(440px, 40%); } .subhero .hst-ol li { font-size: 12px; }
@media (max-width: 1000px) { .hst-steps { width: 46%; } }
@media (max-width: 760px) {
  .hero--story .copy { padding-bottom: 134px; }
  .hst-steps { left: 18px; right: 18px; width: auto; bottom: 62px; }
  .hst-ol li { font-size: 11px; } .hst-fix { font-size: 12px; }
  .hst-veil { background: linear-gradient(180deg, rgba(6, 44, 118, .66) 0, rgba(10, 64, 150, .46) 55%, rgba(4, 22, 70, .6) 100%); }
  .subhero .hst-steps { display: none; }
  .subhero .hst-veil { background: linear-gradient(180deg, rgba(6, 44, 118, .78) 0, rgba(10, 64, 150, .66) 60%, rgba(16, 92, 184, .4) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hst-s.is-active, .hst-img, .hst-steps { animation: none !important; opacity: 1; } .hst-fill, .hst-ol li i { transition: none; } }
.hst-steps { padding: 14px 18px 12px; border-radius: 16px; background: rgba(6, 32, 90, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(2, 12, 40, .3); }
.hst-ol li { opacity: .78; } .hst-ol li.is-on { opacity: 1; }
.hst-line { margin: -17px 6px 20px; z-index: 0; }
.hst-ol li i { position: relative; z-index: 1; }
@media (max-width: 760px) { .hst-steps { padding: 11px 14px 10px; } }

/* 数字で見る成長（下段）：縦幅を少し縮める */
.g-row2 .chart-card { padding: 16px 20px 14px; }
.g-row2 .fd-body { margin: 6px 0 4px; gap: 16px; }
.g-row2 .fd-ring { width: 118px; height: 118px; }
.g-row2 .fd-ring::before { inset: 22px; }
.g-row2 .fd-ring b { font-size: 30px; }
.g-row2 .fd-legend { gap: 6px; }
.lu-big { margin: 2px 0 0; } .lu-big b { font-size: 64px; } .lu-big span { font-size: 20px; }
.lu-lead { margin: 4px 0 8px; font-size: 13px; line-height: 1.7; }
.lu-rows { gap: 7px; margin-top: 2px; }
.lu-h { margin-bottom: 3px; }
.lu-tiles i { height: 16px; border-radius: 6px; }
.lu-plan2 { margin-top: 9px; padding-top: 8px; }
.lu-new i { height: 16px; }
.g-row2 .exp-map { min-height: 96px; max-height: 150px; }
.g-row2 .expand .exp-top { margin-bottom: 0; }
.g-row2 .expand .exp-num b { font-size: 56px; }
.g-row2 .expand .exp-steps { gap: 6px; }
.g-row2 .fine { margin: 6px 0 0; line-height: 1.6; }
@media (max-width: 520px) { .lu-big b { font-size: 56px; } }

/* 拠点カード：写真を、拠点名の位置まで広げる（拠点名と設立年は、写真の下の部分に重ねる） */
.locc-img { aspect-ratio: 16 / 9.4; }
.locc-img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; z-index: 3; pointer-events: none; background: linear-gradient(0deg, rgba(4, 22, 70, .78) 0, rgba(4, 22, 70, .38) 55%, rgba(4, 22, 70, 0) 100%); }
.locc-img--slides .xs-dots { top: 10px; bottom: auto; left: auto; right: 12px; }
.locc-body { padding-top: 0; }
.locc .locc-head { position: relative; z-index: 6; margin-top: -54px; padding-bottom: 12px; align-items: flex-end; }
.locc .locc-head h3 { color: #fff; text-shadow: 0 2px 14px rgba(2, 12, 40, .6); }
.locc .locc-est { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 8px rgba(2, 12, 40, .6); }
@media (max-width: 1000px) { .locc-img { aspect-ratio: 16 / 8.4; } }
@media (max-width: 520px) { .locc-img { aspect-ratio: 16 / 10; } .locc .locc-head { margin-top: -48px; } }
.locc .locc-desc { margin-top: 12px; }

/* 納入先の分野：ドーナツを上、内訳を下に */
.g-row2 .fd-body { flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 4px; }
.g-row2 .fd-ring { width: 112px; height: 112px; }
.g-row2 .fd-legend { width: 100%; flex: none; gap: 5px; }
.g-row2 .fd-legend li { font-size: 12.5px; padding: 0 2px; }
.g-row2 .fd-body { margin-top: 12px; }

/* ヒーロー（斜め3枚のコラージュ）：青い背景のまま、写真がサクッと現れ、1枚ずつサクッと入れ替わる */
.hero--collage, .subhero { background: radial-gradient(ellipse 60% 100% at 70% 40%, #1a5bbb 0, #0d3f92 48%, #07235a 100%); }
.hcol { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hcp { position: absolute; overflow: hidden; background: #cfe0f4; opacity: 0; animation: hcp-in .6s cubic-bezier(.2, .9, .3, 1.15) both; will-change: transform; }
.hcp-a { left: 39%; top: 0; width: 51%; height: 57%; clip-path: polygon(9.8% 0, 100% 0, 74.5% 100%, 0 74.6%); --dx: 46px; --dy: -34px; animation-delay: .15s; }
.hcp-b { left: 38%; top: 43.5%; width: 39%; height: 56.5%; clip-path: polygon(12.8% 0, 100% 26.5%, 71.8% 100%, 0 100%); --dx: -44px; --dy: 40px; animation-delay: .32s; }
.hcp-c { left: 68%; top: 0; width: 32%; height: 100%; clip-path: polygon(75% 0, 100% 0, 100% 100%, 0 100%); --dx: 52px; --dy: 0px; animation-delay: .49s; }
@keyframes hcp-in { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.96); } to { opacity: 1; transform: none; } }
.hcp-l { position: absolute; inset: 0; background: var(--img) 50% 50% / cover no-repeat; filter: contrast(1.05) saturate(1.1) brightness(1.04); }
.hcp-n { z-index: 2; clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); }
.hcp-n.go { animation: hcp-wipe .55s cubic-bezier(.3, .8, .2, 1) both; }
@keyframes hcp-wipe { from { clip-path: polygon(0 0, 0 0, -20% 100%, 0 100%); } to { clip-path: polygon(0 0, 122% 0, 102% 100%, 0 100%); } }
.hero--collage > .wrap, .subhero > .wrap { position: relative; z-index: 6; }
.hero--collage .st-light, .subhero .st-light { z-index: 4; animation-delay: 2.8s; }
.hero--collage .copy h1, .hero--collage .copy .en { text-shadow: 0 2px 16px rgba(4, 22, 70, .4); }
.hero--collage .copy > * { animation-delay: .2s; } .hero--collage .copy > :nth-child(2) { animation-delay: .32s; } .hero--collage .copy > :nth-child(3) { animation-delay: .44s; } .hero--collage .copy > :nth-child(4) { animation-delay: .56s; }
.hero--collage .swoosh svg, .subhero .swoosh svg { animation-delay: .6s; animation-duration: 1.6s; }
.subhero .lead { max-width: 40%; }
@media (max-width: 1000px) { .subhero .lead { max-width: 46%; } }
@media (max-width: 760px) {
  .hero--collage { min-height: 0; }
  .hero--collage .copy { padding-bottom: 228px; }
  .hero--collage .hcol { inset: auto 4% 56px 4%; height: auto; aspect-ratio: 2.33; overflow: visible; }
  .subhero .hcol { display: none; }
  .subhero .lead { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hcp { animation: none !important; opacity: 1; } .hcp-n { display: none; } }

/* 納入先の分野：余白が出ないよう、ドーナツと内訳を大きめに、カードいっぱいに */
.g-row2 .field-card .fd-body { flex: 1; justify-content: space-evenly; margin: 10px 0 8px; gap: 14px; }
.g-row2 .field-card .fd-ring { width: 150px; height: 150px; }
.g-row2 .field-card .fd-ring::before { inset: 28px; }
.g-row2 .field-card .fd-ring b { font-size: 38px; }
.g-row2 .field-card .fd-legend { gap: 8px; }
.g-row2 .field-card .fd-legend li { font-size: 13.5px; }
.g-row2 .field-card .fd-legend b { font-size: 17px; }
@media (min-width: 761px) { .hero--collage .hcol { left: 6%; } .subhero .hcol { left: 6%; } }
@media (max-width: 760px) {
  .hero--collage .hcol { inset: auto 4% 52px -52%; }
  .hero--collage .copy { padding-bottom: 292px; }
}

/* ヒーロー（斜めに流れる写真）：3つの筋が、斜め（-26度）に、違う向きへゆっくり流れ続ける。青い背景のまま、写真は切らずに見せる */
.hero--flow, .subhero { background: radial-gradient(ellipse 60% 100% at 70% 40%, #1a5bbb 0, #0d3f92 48%, #07235a 100%); --cw: 270px; --ch: 180px; --lg: 20px; }
.hf2 { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .2) 30%, #000 56%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .2) 30%, #000 56%); animation: hf2-in 1.2s ease .1s both; }
@keyframes hf2-in { from { opacity: 0; } to { opacity: 1; } }
.hf2-g { position: absolute; left: -30%; top: 50%; width: 190%; display: flex; flex-direction: column; gap: var(--lg); transform: translateY(-50%) rotate(-26deg); transform-origin: 50% 50%; }
.hf2-l { position: relative; overflow: visible; }
.hf2-t { display: flex; gap: var(--lg); width: max-content; will-change: transform; }
.hf2-l1 .hf2-t { animation: hf2-r 70s linear infinite; }
.hf2-l2 .hf2-t { animation: hf2-l 58s linear infinite; margin-left: -90px; }
.hf2-l3 .hf2-t { animation: hf2-r 82s linear infinite; margin-left: -180px; }
@keyframes hf2-l { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--lg) / 2)); } }
@keyframes hf2-r { from { transform: translateX(calc(-50% - var(--lg) / 2)); } to { transform: translateX(0); } }
.hf2-c { margin: 0; flex: none; width: var(--cw); height: var(--ch); border-radius: 12px; overflow: hidden; background: #cfe0f4; box-shadow: 0 14px 28px rgba(2, 14, 50, .42); }
.hf2-c img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.1) brightness(1.05); }
.hero--flow > .wrap, .subhero > .wrap { position: relative; z-index: 6; }
.hero--flow .st-light, .subhero .st-light { z-index: 4; animation-delay: 2.2s; }
.hero--flow .copy h1, .hero--flow .copy .en { text-shadow: 0 2px 16px rgba(4, 22, 70, .45); }
.hero--flow .copy > * { animation-delay: .2s; } .hero--flow .copy > :nth-child(2) { animation-delay: .32s; } .hero--flow .copy > :nth-child(3) { animation-delay: .44s; } .hero--flow .copy > :nth-child(4) { animation-delay: .56s; }
.hero--flow .swoosh svg, .subhero .swoosh svg { animation-delay: .6s; animation-duration: 1.6s; }
.subhero { --cw: 210px; --ch: 140px; --lg: 16px; }
.subhero .lead { max-width: 44%; }
@media (max-width: 760px) {
  .hero--flow { min-height: 0; --cw: 150px; --ch: 100px; --lg: 12px; }
  .hero--flow .copy { padding-bottom: 250px; }
  .hero--flow .hf2 { inset: auto 0 44px 0; height: 210px; -webkit-mask-image: none; mask-image: none; }
  .hero--flow .hf2-g { left: -40%; width: 220%; transform: translateY(-50%) rotate(-18deg); }
  .subhero .hf2 { opacity: .4; }
  .subhero .lead { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hf2-t, .hf2 { animation: none !important; } }

/* 拠点カード：写真の高さはそのまま。拠点名と設立年は、元どおり写真の外（下）に置く */
.locc-img::after { display: none; }
.locc-img--slides .xs-dots { top: auto; bottom: 8px; left: 0; right: 0; }
.locc-body { padding-top: 16px; }
.locc .locc-head { position: static; margin-top: 0; padding-bottom: 0; align-items: baseline; }
.locc .locc-head h3 { color: var(--navy); text-shadow: none; }
.locc .locc-est { color: var(--mute); text-shadow: none; }
.locc .locc-desc { margin-top: 0; }
@media (max-width: 520px) { .locc .locc-head { margin-top: 0; } }

/* ヒーロー（奥行きのある回転）：写真のカードが、円筒のように回り続ける。色味は青のまま */
.hero--orbit, .subhero { background: radial-gradient(ellipse 60% 100% at 70% 40%, #1a5bbb 0, #0d3f92 48%, #07235a 100%); --R: 330px; --cw: 220px; --ch: 148px; --gy: 170px; }
.hr3 { position: absolute; z-index: 2; top: 0; bottom: 0; left: 36%; right: -2%; perspective: 1500px; perspective-origin: 50% 46%; overflow: visible; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 12%, #000 30%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 12%, #000 30%); }
.hr3-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: translateY(-4%) rotateX(-9deg) rotateZ(-3deg); animation: hr3-in 1.3s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes hr3-in { from { opacity: 0; transform: translateY(-4%) rotateX(-9deg) rotateZ(-3deg) scale(.7); } to { opacity: 1; transform: translateY(-4%) rotateX(-9deg) rotateZ(-3deg) scale(1); } }
.hr3-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.hr3-r1 { --y: calc(var(--gy) * -1); animation: hr3-spin 46s linear infinite; }
.hr3-r2 { --y: 0px; animation: hr3-spin-rev 58s linear infinite; }
.hr3-r3 { --y: var(--gy); animation: hr3-spin 52s linear infinite; }
@keyframes hr3-spin { from { transform: translateY(var(--y)) rotateY(0deg); } to { transform: translateY(var(--y)) rotateY(360deg); } }
@keyframes hr3-spin-rev { from { transform: translateY(var(--y)) rotateY(360deg); } to { transform: translateY(var(--y)) rotateY(0deg); } }
.hr3-c { position: absolute; left: calc(var(--cw) / -2); top: calc(var(--ch) / -2); width: var(--cw); height: var(--ch); margin: 0; border-radius: 12px; overflow: hidden; background: #cfe0f4; transform: rotateY(var(--a)) translateZ(var(--R)); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 34px rgba(2, 14, 50, .5); }
.hr3-c img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.1) brightness(1.05); }
.hero--orbit > .wrap, .subhero > .wrap { position: relative; z-index: 6; }
.hero--orbit .st-light, .subhero .st-light { z-index: 4; animation-delay: 2.2s; }
.hero--orbit .copy h1, .hero--orbit .copy .en { text-shadow: 0 2px 16px rgba(4, 22, 70, .45); }
.hero--orbit .copy > * { animation-delay: .2s; } .hero--orbit .copy > :nth-child(2) { animation-delay: .32s; } .hero--orbit .copy > :nth-child(3) { animation-delay: .44s; } .hero--orbit .copy > :nth-child(4) { animation-delay: .56s; }
.hero--orbit .swoosh svg, .subhero .swoosh svg { animation-delay: .6s; animation-duration: 1.6s; }
.subhero { --R: 250px; --cw: 168px; --ch: 113px; --gy: 128px; }
.subhero .hr3-r3 { display: none; }
.subhero .hr3-r1 { --y: -66px; } .subhero .hr3-r2 { --y: 66px; }
.subhero .lead { max-width: 44%; }
@media (max-width: 1000px) { .hero--orbit, .subhero { --R: 270px; --cw: 180px; --ch: 121px; --gy: 140px; } }
@media (max-width: 760px) {
  .hero--orbit { min-height: 0; --R: 170px; --cw: 116px; --ch: 78px; --gy: 86px; }
  .hero--orbit .copy { padding-bottom: 262px; }
  .hero--orbit .hr3 { inset: auto 0 36px 0; height: 224px; left: 0; right: 0; perspective: 1000px; -webkit-mask-image: none; mask-image: none; }
  .subhero .hr3 { opacity: .35; left: 30%; }
  .subhero .lead { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hr3-ring, .hr3-stage { animation: none !important; } }
@media (min-width: 1001px) { .hero--orbit { --R: 360px; } .hero--orbit .hr3 { left: 40%; right: -4%; perspective: 1150px; } }

/* ヒーロー（最初の形）：写真が全面で切り替わり、左に青のベール、下に黄と青の線。鮮明加工した写真を使用 */
.hero--b.hero--orig { background: #0a2d6e; }
.hero--orig .hslides { position: absolute; inset: 0; z-index: 1; }
.hero--orig .hs-bg { background: linear-gradient(90deg, rgba(6, 28, 78, .92) 0, rgba(8, 40, 105, .7) 50%, rgba(8, 40, 105, .22) 100%), var(--img) var(--pos, 50% 50%) / cover no-repeat; filter: none; transform: scale(1.04); }
.hero--orig .hs.is-active .hs-bg { animation: hszoom 9s ease-out forwards; }
.hero--orig .hs::before, .hero--orig .hs::after { display: none; }
.hero--orig > .wrap { position: relative; z-index: 5; }
.hero--orig .copy h1, .hero--orig .copy .en { text-shadow: none; }
.hero--orig .copy > *, .hero--orig .copy > :nth-child(n) { animation-delay: 0s; }
.hero--orig .copy > :nth-child(2) { animation-delay: .15s; } .hero--orig .copy > :nth-child(3) { animation-delay: .3s; } .hero--orig .copy > :nth-child(4) { animation-delay: .45s; }
.hero--orig .swoosh svg { animation-delay: .25s; animation-duration: 1.7s; }
@media (max-width: 760px) {
  .hero--orig .hs-bg { background: linear-gradient(180deg, rgba(6, 28, 78, .8) 0, rgba(8, 40, 105, .6) 60%, rgba(8, 40, 105, .4) 100%), var(--img) var(--pos, 50% 50%) / cover no-repeat; }
}

/* サブページのヒーロー（最初の形）：写真に左から青のベール。写真がゆっくり動く */
.subhero.subhero--orig { background: #0a2d6e; isolation: isolate; }
.subhero.subhero--orig::before { display: block; content: ''; position: absolute; inset: -4%; z-index: -1; background: linear-gradient(90deg, rgba(6, 28, 78, .94) 0, rgba(8, 40, 105, .76) 52%, rgba(8, 40, 105, .38) 100%), var(--photo) var(--pos, 50% 50%) / cover no-repeat; animation: kb 22s ease-in-out infinite alternate; }
.subhero.subhero--orig::after { display: none; }
.subhero.subhero--orig .lead { max-width: none; }
.subhero.subhero--orig .wrap { z-index: 5; }
.subhero.subhero--orig h1, .subhero.subhero--orig .lead, .subhero.subhero--orig .en { text-shadow: none; }
.subhero.subhero--orig .subhero-in > * { animation-delay: 0s; }
.subhero.subhero--orig .subhero-in > :nth-child(2) { animation-delay: .12s; } .subhero.subhero--orig .subhero-in > :nth-child(3) { animation-delay: .24s; }
.subhero.subhero--orig .swoosh svg { animation-delay: .25s; animation-duration: 1.7s; }

/* ヒーロー（鮮明な写真のアップ）：大きく鮮明な写真が、ピントが合うように現れ、ゆっくり寄っていく。写真の上のベールは薄く */
.hero--orig .hs-bg { background: linear-gradient(90deg, rgba(6, 28, 78, .82) 0, rgba(8, 40, 105, .52) 40%, rgba(8, 40, 105, .08) 74%, rgba(8, 40, 105, 0) 100%), var(--img) var(--pos, 50% 50%) / cover no-repeat; transform: scale(1); filter: none; }
.hero--orig .hs.is-active .hs-bg { animation: hz-in 9s linear both, hz-focus 1.5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hz-in { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes hz-focus { from { filter: blur(14px) brightness(1.15); } to { filter: blur(0) brightness(1); } }
.hero--orig .hslides { overflow: hidden; }
@media (max-width: 760px) { .hero--orig .hs-bg { background: linear-gradient(180deg, rgba(6, 28, 78, .72) 0, rgba(8, 40, 105, .5) 60%, rgba(8, 40, 105, .3) 100%), var(--img) var(--pos, 50% 50%) / cover no-repeat; } }

/* サブページも同じ：ピントが合うように現れ、ゆっくり寄っていく */
.subhero.subhero--orig::before { background: linear-gradient(90deg, rgba(6, 28, 78, .88) 0, rgba(8, 40, 105, .58) 46%, rgba(8, 40, 105, .12) 100%), var(--photo) var(--pos, 50% 50%) / cover no-repeat; animation: hz-in 14s linear both, hz-focus 1.5s cubic-bezier(.2, .7, .2, 1) both; inset: 0; }
.subhero.subhero--orig { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .hero--orig .hs.is-active .hs-bg, .subhero.subhero--orig::before { animation: none; } }

/* ヒーロー（波の面）：左に濃い青の波の面（文字を載せる）、右に鮮明な写真。波の線が描かれる */
.hbw { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hbw svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hbw-m { display: none; }
.hbw-p { animation: hbw-in 1.5s cubic-bezier(.22, .72, .2, 1) .1s both; }
@keyframes hbw-in { from { transform: translateX(-46%); opacity: 0; } to { transform: none; opacity: 1; } }
.hbw-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hbw-draw 2s cubic-bezier(.3, .7, .2, 1) both; }
.hbw-l1 { animation-delay: .7s; } .hbw-l2 { animation-delay: .9s; } .hbw-l3 { animation-delay: 1.1s; }
@keyframes hbw-draw { to { stroke-dashoffset: 0; } }
/* 写真の上の青いベールは外し、鮮明な写真をそのまま見せる */
.hero--orig.hero--wave .hs-bg { background: var(--img) var(--pos, 50% 50%) / cover no-repeat; }
.hero--orig.hero--wave > .wrap { z-index: 6; }
.subhero.subhero--wave::before { background: var(--photo) var(--pos, 50% 50%) / cover no-repeat; }
.subhero.subhero--wave .wrap { z-index: 6; }
.subhero.subhero--wave .lead { max-width: 46%; }
.hero--wave .swoosh, .subhero--wave .swoosh { z-index: 7; }
@media (max-width: 760px) {
  .hbw-d { display: none; } .hbw-m { display: block; }
  .hero--orig.hero--wave .hs-bg { background: var(--img) var(--pos, 50% 50%) / cover no-repeat; }
  .hero--wave { min-height: 0; }
  .hero--wave .copy { padding-top: 150px; }
  .subhero.subhero--wave .lead { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .hbw-p, .hbw-l { animation: none !important; stroke-dashoffset: 0; } }
/* 波の線：点線にならないよう、上から下へ現れる */
.hbw-l { stroke-dasharray: none; stroke-dashoffset: 0; clip-path: inset(0 0 100% 0); animation: hbw-reveal 1.8s cubic-bezier(.3, .7, .2, 1) both; }
.hbw-l1 { animation-delay: .7s; } .hbw-l2 { animation-delay: .9s; } .hbw-l3 { animation-delay: 1.1s; }
@keyframes hbw-reveal { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .hbw-l { clip-path: none; } }
@media (min-width: 761px) {
  .hero--wave { min-height: 680px; }
  .hero--wave .copy { padding-top: 206px; }
  .subhero.subhero--wave .subhero-in { padding-top: 112px; }
}
.hbw .hbw-m { display: none; }
@media (max-width: 760px) { .hbw .hbw-d { display: none; } .hbw .hbw-m { display: block; } }
@media (min-width: 761px) {
  .hero--wave .hbw-d { transform: scaleY(1.1); transform-origin: 50% 100%; }
  .subhero--wave .hbw-d { transform: scaleY(1.2); transform-origin: 50% 100%; }
}
@media (max-width: 760px) {
  .hero--wave .copy { padding-top: 262px; padding-bottom: 66px; }
  .subhero--wave .subhero-in { height: 262px; padding-top: 118px; }
  .subhero--wave .hbw-m path.hbw-p { transform-origin: 50% 100%; }
}

/* ヒーロー（丸みのあるカード）：鮮明な写真のカードが切り替わり、後ろの2枚はぼかし。カーソルで動く。青い面と波の線は継続 */
.hero--cards, .subhero--cards { background: radial-gradient(ellipse 70% 100% at 75% 40%, #2a78e8 0, #1a5fd0 45%, #1148b0 100%); }
.hero--cards .hslides, .subhero--cards::before, .subhero--cards::after { display: none; }
.hero--cards .hbw-d .hbw-p { fill: #0b3a96; }
.hcd { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hcd-m, .hcd-b { position: absolute; border-radius: 34px; overflow: hidden; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); will-change: transform; }
.hcd-m { right: max(3vw, calc((100% - 1240px) / 2 + 30px)); top: 17%; width: min(48vw, 640px); aspect-ratio: 1.6; box-shadow: 0 30px 60px rgba(2, 20, 70, .38); animation: hcd-in 1.2s cubic-bezier(.2, .8, .2, 1) .5s both; }
.hcd-s { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease, filter 1.4s ease; filter: blur(12px); transform: scale(1.06); }
.hcd-s.is-on { opacity: 1; filter: none; animation: hz-in 9s linear both; }
.hcd-b { filter: blur(7px); opacity: .85; }
.hcd-i { position: absolute; inset: -10px; background-size: cover; background-position: center; }
.hcd-b1 { left: 4%; top: 7%; width: 300px; aspect-ratio: 1.35; animation: hcd-in 1.2s ease .2s both; }
.hcd-b2 { left: 31%; bottom: 8%; width: 360px; aspect-ratio: 1.45; animation: hcd-in 1.2s ease .35s both; }
@keyframes hcd-in { from { opacity: 0; scale: .88; } to { opacity: 1; scale: 1; } }
.hero--cards .hbw, .subhero--cards .hbw { z-index: 2; }
.hero--cards > .wrap, .subhero--cards .wrap { z-index: 6; }
.subhero--cards .hcd-m { top: 12%; width: 340px; border-radius: 26px; right: max(3vw, calc((100% - 1240px) / 2 + 30px)); }
.subhero--cards .hcd-b1 { left: 40%; top: 6%; width: 170px; } .subhero--cards .hcd-b2 { left: 46%; bottom: 10%; width: 190px; }
@media (max-width: 760px) {
  .hcd-m { top: 76px; right: 5%; left: 5%; width: auto; aspect-ratio: 1.7; border-radius: 24px; }
  .hcd-b1 { left: -20px; top: 20px; width: 120px; } .hcd-b2 { right: -20px; left: auto; top: 160px; bottom: auto; width: 130px; }
  .hero--cards .hbw-m .hbw-p { fill: #0b3a96; }
  .subhero--cards .hcd { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hcd-m, .hcd-b, .hcd-s.is-on { animation: none !important; } }
.hero--b.hero--cards, .subhero.subhero--cards { background: radial-gradient(ellipse 70% 100% at 75% 40%, #2a78e8 0, #1a5fd0 45%, #1148b0 100%); }
@media (min-width: 761px) {
  .hcd-m { width: min(43vw, 600px); right: max(2.5vw, calc((100% - 1240px) / 2 + 20px)); top: 20%; }
  .hcd-b1 { left: auto; right: 4%; top: 6%; width: 240px; }
  .hcd-b2 { left: auto; right: 1%; bottom: 7%; width: 280px; }
  .subhero--cards .hcd-b1 { right: 36%; left: auto; width: 150px; } .subhero--cards .hcd-b2 { right: 2%; left: auto; width: 150px; bottom: 6%; }
  .subhero--cards .hcd-m { width: 300px; right: 9%; }
}
@media (max-width: 760px) {
  .hcd-m { top: 74px; aspect-ratio: 2; }
  .hcd-b1 { left: auto; right: -24px; top: 16px; width: 110px; } .hcd-b2 { display: none; }
  .hero--cards .copy { padding-top: 262px; }
}
.subhero.subhero--orig.subhero--cards::before { display: none; }

/* ヒーロー（丸みのカード × 四角い青の面）：四角い青の面が、サクッと順に現れる。カードは大きめ、文字に重なってよい */
.hcd-q { position: absolute; top: -2%; bottom: -2%; z-index: 0; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.hcd-q1 { left: 36%; width: 34%; background: #0f4fc0; animation: hq-in .45s cubic-bezier(.2, .9, .3, 1) .05s both; --qx: -60px; }
.hcd-q2 { left: 58%; width: 26%; background: #0a3a96; animation: hq-in .45s cubic-bezier(.2, .9, .3, 1) .22s both; --qx: 80px; }
.hcd-q3 { left: 76%; width: 30%; background: #2a82ee; animation: hq-in .45s cubic-bezier(.2, .9, .3, 1) .38s both; --qx: 90px; }
@keyframes hq-in { from { opacity: 0; transform: translateX(var(--qx)); } to { opacity: 1; transform: none; } }
.hero--cards .hbw-d .hbw-p, .subhero--cards .hbw-d .hbw-p { fill: transparent; }
.hero--cards .hbw-m .hbw-p, .subhero--cards .hbw-m .hbw-p { fill: #0b3a96; }
@media (min-width: 761px) {
  .hcd-m { width: min(54vw, 780px); right: max(1.5vw, calc((100% - 1300px) / 2)); top: 9%; }
  .hcd-b1 { width: 340px; right: 2%; top: 4%; } .hcd-b2 { width: 400px; right: auto; left: 40%; bottom: 2%; }
  .subhero--cards .hcd-m { width: 470px; right: 4%; top: 6%; }
  .subhero--cards .hcd-b1 { width: 230px; right: 40%; top: 4%; left: auto; } .subhero--cards .hcd-b2 { width: 240px; right: 1%; bottom: 3%; left: auto; }
}
@media (max-width: 760px) { .hcd-q { display: none; } .hcd-b1 { width: 150px; } }
/* ちりばめ配置：メインは右、ぼかしは左上と中央下に離して置く。四角い青の面も、色の差をはっきりと */
.hcd-q1 { background: #0c46b2; } .hcd-q2 { background: #072e7a; } .hcd-q3 { background: #3a90f4; }
@media (min-width: 761px) {
  .hcd-m { width: min(52vw, 760px); right: 1.5%; top: 12%; }
  .hcd-b1 { left: 5%; right: auto; top: 3%; width: 330px; }
  .hcd-b2 { left: 41%; right: auto; bottom: 1%; width: 380px; }
  .subhero--cards .hcd-m { width: 460px; right: 4%; top: 7%; }
  .subhero--cards .hcd-b1 { left: 36%; right: auto; top: 3%; width: 230px; }
  .subhero--cards .hcd-b2 { left: 3%; right: auto; bottom: 4%; width: 220px; }
}
@media (min-width: 761px) { .subhero--cards .hcd-b2 { left: 52%; bottom: -2%; width: 200px; } .subhero--cards .hcd-b1 { left: 40%; } }

/* 地球儀が回っているあいだだけ、なみ線が周りをただよう。カーソルが来たら消える */
.gw { position: absolute; left: -8%; right: -8%; top: 50%; width: 116%; height: auto; transform: translateY(-50%); pointer-events: none; z-index: 3; overflow: visible; transition: opacity .35s ease; }
.gw-l { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gw-draw 2.4s cubic-bezier(.3, .7, .2, 1) both, gw-drift 6s ease-in-out 2.4s infinite alternate; }
.gw-2 { animation-delay: .25s, 2.65s; } .gw-3 { animation-delay: .5s, 2.9s; }
@keyframes gw-draw { to { stroke-dashoffset: 0; } }
@keyframes gw-drift { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
.gw-off .gw, .globe-stage.is-zoomed .gw { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gw-l { animation: none; stroke-dashoffset: 0; } }

/* 地球儀の環（土星のように）：後ろ半分は地球の裏、前半分は地球の手前を通る。回っているあいだだけ表示 */
.gw { left: -22%; right: auto; width: 144%; height: auto; transform: translateY(-50%); }
.gw-back { z-index: 0; } .gw-front { z-index: 3; }
.globe-stage .globe { position: relative; z-index: 1; }
.gw-l { animation: gw-draw 2.2s cubic-bezier(.3, .7, .2, 1) both; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gw-b { animation-delay: .2s; } .gw-c { animation-delay: .4s; }
.gw { animation: gw-float 9s ease-in-out infinite alternate; }
@keyframes gw-float { from { translate: 0 -5px; } to { translate: 0 6px; } }
.gw-off .gw, .globe-stage.is-zoomed .gw { opacity: 0; }

/* ヒーロー：ロゴの緑を、ほんの少し。波の線の1本、メインカードの角の小さな緑の丸 */
.hcd-g { position: absolute; z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: #38a437; box-shadow: 0 8px 18px rgba(2, 30, 20, .3), inset 0 -6px 10px rgba(0, 60, 20, .25), inset 0 5px 8px rgba(255, 255, 255, .35); animation: hr-pop 1s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
@media (min-width: 761px) { .hcd-g { right: calc(1.5% + min(52vw, 760px) - 28px); top: calc(12% + 12px); } }
.hcd-q2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #38a437; }

/* 3D感：カードが、カーソルに合わせて、わずかに傾く。縁に細い光、影は二重 */
.hcd { perspective: 1400px; }
.hcd-m, .hcd-b { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) - 3deg)); transform-style: preserve-3d; }
.hcd-b { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + 5deg)); }
.hcd-m { box-shadow: 0 2px 0 rgba(255, 255, 255, .55) inset, 0 36px 60px rgba(2, 20, 70, .34), 0 12px 20px rgba(2, 20, 70, .22); }
.hcd-m::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 34%); }

/* スマホ：サブページも、TOPと同じく、上にカードの写真、下に文字 */
@media (max-width: 760px) {
  .subhero--cards .hcd { display: block; }
  .subhero--cards .hcd-m { top: 16px; left: 5%; right: 5%; width: auto; aspect-ratio: 2; border-radius: 22px; }
  .subhero--cards .hcd-b1 { right: -26px; left: auto; top: 6px; width: 100px; } .subhero--cards .hcd-b2 { display: none; }
  .subhero--cards .hcd-g { right: 3%; top: 8px; width: 30px; height: 30px; }
  .hcd-g { right: 4%; top: 64px; width: 32px; height: 32px; }
  .subhero--wave .subhero-in, .subhero--cards .subhero-in { height: auto; min-height: 0; padding-top: 196px; padding-bottom: 66px; }
  .subhero--cards .hbw-m .hbw-p { fill: #0b3a96; }
}
.hcd-g { display: none !important; }
.hcd-q2::after { display: none; }
.hbw-l3 { stroke: #38a437; }
/* メインカードをメッセージ寄りに。右にも余白 */
@media (min-width: 761px) {
  .hcd-m { width: min(49vw, 720px); right: 6.5%; top: 12%; }
  .hcd-b1 { left: 4%; } .hcd-b2 { left: 38%; }
  .subhero--cards .hcd-m { width: 440px; right: 8%; }
  .subhero--cards .hcd-b1 { left: 36%; }
}
.hbw-l3 { stroke: #3aaa3a; }
/* スマホ：拠点の広がり。地図を縦に十分な高さにして、4拠点とも収める */
@media (max-width: 1000px) {
  .g-row2 .exp-map { min-height: 250px; max-height: none; height: 250px; }
  .g-row2 .expand .exp-num b { font-size: 52px; }
}

/* ヒーロー（透過した青で引き締める）：写真を全面に。青は透過して重ね、明度の低い面の上に白い文字。アクセントは黒 */
.hero--b.hero--tint, .subhero.subhero--tint { background: #07254f; isolation: isolate; }
.subhero.subhero--tint::before, .subhero.subhero--tint::after { display: none; }
.htn { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.htn-s { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.htn-s.is-on { opacity: 1; }
.htn-i { position: absolute; inset: -4%; background-size: cover; filter: saturate(.55) contrast(1.12) brightness(.92); transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.08); }
.htn-s.is-on .htn-i { animation: htn-pan 12s cubic-bezier(.25, .5, .3, 1) both; }
@keyframes htn-pan { from { scale: 1.12; translate: 1.6% 1%; } to { scale: 1; translate: 0 0; } }
.htn-blue { position: absolute; inset: 0; background: rgb(11, 91, 168); mix-blend-mode: multiply; opacity: .9; }
.htn-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 28, 72, .78) 0, rgba(8, 50, 112, .44) 46%, rgba(11, 91, 168, .12) 100%), linear-gradient(0deg, rgba(48, 48, 48, .55) 0, rgba(48, 48, 48, 0) 32%), linear-gradient(180deg, rgba(48, 48, 48, .35) 0, rgba(48, 48, 48, 0) 22%); }
.htn-grid { position: absolute; inset: 0; opacity: .1; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px 3px); mix-blend-mode: soft-light; }
.htn-scan { position: absolute; top: 0; bottom: 0; width: 22%; left: -30%; background: linear-gradient(90deg, rgba(160, 210, 255, 0), rgba(160, 210, 255, .22), rgba(160, 210, 255, 0)); transform: skewX(-14deg); animation: htn-scan 9s ease-in-out 1.5s infinite; }
@keyframes htn-scan { 0% { left: -30%; opacity: 0; } 12% { opacity: 1; } 55% { left: 110%; opacity: 1; } 100% { left: 110%; opacity: 0; } }
.hero--tint > .wrap, .subhero--tint > .wrap { position: relative; z-index: 6; }
.hero--tint .swoosh, .subhero--tint .swoosh { z-index: 7; }
.hero--tint .copy h1, .subhero--tint h1 { text-shadow: 0 2px 24px rgba(2, 14, 40, .55); }
.hero--tint .copy h1 { animation: htn-h 1.5s cubic-bezier(.2, .7, .2, 1) .2s both; }
.subhero--tint h1 { animation: htn-h 1.3s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes htn-h { from { opacity: 0; letter-spacing: .14em; transform: translateX(-22px); filter: blur(5px); } to { opacity: 1; letter-spacing: inherit; transform: none; filter: none; } }
.hero--tint .copy::before { content: ''; display: block; width: 56px; height: 4px; margin-bottom: 18px; background: #303030; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); transform-origin: left; animation: htn-bar 1s cubic-bezier(.2, .7, .2, 1) .1s both; }
@keyframes htn-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero--tint .btn--fill { background: #303030; border-color: #303030; }
.hero--tint .btn--fill:hover { background: #000; }
@media (max-width: 760px) {
  .htn-wash { background: linear-gradient(180deg, rgba(6, 28, 72, .7) 0, rgba(8, 50, 112, .5) 60%, rgba(48, 48, 48, .55) 100%); }
  .hero--tint .copy { padding-bottom: 66px; }
  .subhero--tint .subhero-in { height: 205px; padding-top: 26px; padding-bottom: 0; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .htn-s.is-on .htn-i, .htn-scan, .hero--tint .copy h1, .subhero--tint h1 { animation: none !important; } }

/* 調整：灰色の棒をなくし、ボタンは見やすい青に。全体の青をやや明るく */
.hero--tint .copy::before { display: none; }
.hero--tint .btn--fill { background: #1c6fe0; border-color: #1c6fe0; color: #fff; }
.hero--tint .btn--fill:hover { background: #2a82f0; }
.hero--tint .btn:not(.btn--fill) { background: rgba(255, 255, 255, .12); }
.htn-i { filter: saturate(.8) contrast(1.06) brightness(1.1); }
.htn-blue { background: rgb(40, 125, 215); opacity: .62; }
.htn-wash { background: linear-gradient(90deg, rgba(8, 44, 108, .62) 0, rgba(16, 80, 160, .3) 46%, rgba(40, 125, 215, .04) 100%), linear-gradient(0deg, rgba(10, 40, 90, .4) 0, rgba(10, 40, 90, 0) 30%); }
@media (max-width: 760px) { .htn-wash { background: linear-gradient(180deg, rgba(8, 44, 108, .58) 0, rgba(16, 80, 160, .4) 60%, rgba(10, 40, 90, .45) 100%); } }
/* 環は、地球儀の中心に合わせる（下の説明カードの高さに影響されない） */
.globe .gw { left: -22%; top: 50%; width: 144%; transform: translateY(-50%); }
.globe { overflow: visible; }
.globe.is-zoomed .gw, .globe-stage:has(.globe-card.is-open) .gw, .globe-stage.gw-off .gw { opacity: 0 !important; }

/* PC：写真を引きで、全体が見えるように（拡大して切らない）。左の余白は、同じ写真のぼかしで埋める */
.htn-bg { display: none; }
@media (min-width: 761px) {
  .htn-bg { display: block; position: absolute; inset: -6%; background-size: cover; background-position: center; filter: blur(26px) saturate(.9) brightness(1.02); }
  .htn-i { inset: 0; background-size: contain; background-repeat: no-repeat; background-position: right center; filter: saturate(.85) contrast(1.05) brightness(1.08);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
  .htn-s.is-on .htn-i { animation: htn-pan-pc 14s ease-out both; }
  @keyframes htn-pan-pc { from { scale: 1.03; translate: 1% 0; } to { scale: 1; translate: 0 0; } }
}
@media (min-width: 761px) { .htn-i { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 93%, transparent 100%); background-position: 92% center; } }
.hero--b .copy .en { text-wrap: balance; }
@media (max-width: 760px) { .hero--b .copy .en { font-size: 16px; line-height: 1.6; } }

/* 左右の余白なし。写真は横いっぱいに、ほぼ全体が見える高さに。画面の大きさに合わせて、ヒーローの高さを変える */
@media (min-width: 761px) {
  .htn-bg { display: none; }
  .htn-i { inset: 0; background-size: cover; background-position: 50% 60%; -webkit-mask-image: none; mask-image: none; filter: saturate(.85) contrast(1.05) brightness(1.08); }
  .htn-s.is-on .htn-i { animation: htn-pan-pc2 14s ease-out both; }
  @keyframes htn-pan-pc2 { from { scale: 1.025; } to { scale: 1; } }
  .hero--b.hero--tint { height: clamp(500px, 50vw, calc(100vh - 80px)); min-height: 0; display: flex; align-items: center; }
  .hero--tint > .wrap { width: 100%; }
  .hero--tint .copy { padding: 0 0 40px; }
}
@media (min-width: 761px) { .htn-i { background-position: var(--bp, 50% 60%) !important; } }
/* ファーストビューの縦幅を約3割縮める（画面幅の約36%、380〜560px） */
@media (min-width: 761px) { .hero--b.hero--tint { height: clamp(380px, 36vw, 560px); } .hero--tint .copy { padding-bottom: 30px; } }
/* サブページも、TOPと同じ高さの考え方。写真は引きで、鮮明に */
@media (min-width: 761px) {
  .subhero.subhero--tint { height: clamp(300px, 28vw, 440px); }
  .subhero--tint .subhero-in { height: 100%; padding-top: 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-bottom: 20px; }
}
/* サブページ：写真は全体が引きで見える大きさで右に置き、左は同じ青に溶け込ませる。見出しは常に収まる */
@media (min-width: 761px) {
  .subhero.subhero--tint { height: 440px; }
  .subhero--tint .htn-bg { display: none; }
  .subhero--tint .htn-i { background-size: contain; background-repeat: no-repeat; background-position: right center !important; inset: 0 0 0 28%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); filter: saturate(.9) contrast(1.05) brightness(1.08); }
  .subhero--tint .htn-blue { opacity: .5; }
  .subhero--tint .subhero-in { padding-top: 40px; padding-bottom: 60px; justify-content: center; }
}

/* TOPも、写真は切らずに全体を引きで。右に大きく置き、左は同じ青に溶け込ませて文字を載せる */
@media (min-width: 761px) {
  .hero--b.hero--tint { height: clamp(480px, 40vw, 600px); }
  .hero--tint .htn-bg { display: none; }
  .hero--tint .htn-i { background-size: contain; background-repeat: no-repeat; background-position: right center !important; inset: 0 0 0 22%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%); mask-image: linear-gradient(90deg, transparent 0, #000 20%); }
  .hero--tint .htn-blue { opacity: .5; }
  .hero--tint .htn-wash { background: linear-gradient(0deg, rgba(10, 40, 90, .35) 0, rgba(10, 40, 90, 0) 28%); }
  .hero--b.hero--tint { background: linear-gradient(100deg, #0a3f94 0, #1560c4 60%, #2a82dc 100%); }
}
@media (min-width: 761px) { .hero--tint .htn-i, .subhero--tint .htn-i { -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 8%, #000 26%) !important; mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 8%, #000 26%) !important; } }
/* TOPとサブページを同じ演出に統一：写真は全体を引きで右に大きく、左は青に溶け込む。境目はなだらかに */
@media (min-width: 761px) {
  .hero--tint .htn-wash, .subhero--tint .htn-wash { background: linear-gradient(90deg, #1458b8 0, rgba(20, 88, 184, .96) 30%, rgba(20, 88, 184, .55) 40%, rgba(20, 88, 184, 0) 54%), linear-gradient(0deg, rgba(10, 40, 90, .3) 0, rgba(10, 40, 90, 0) 28%); }
  .subhero--tint .htn-i { inset: 0 0 0 22%; }
  .subhero.subhero--tint, .hero--b.hero--tint { background: linear-gradient(100deg, #0a3f94 0, #1560c4 60%, #2a82dc 100%); }
  .subhero.subhero--tint { height: clamp(400px, 34vw, 500px); }
}

/* ヒーロー（写真全体を、画面幅いっぱいに）：picture＋img。幅100%・高さauto。固定の高さ・拡大・切り抜きなし。文字は写真に重ねる */
.hero--b.hero--pic, .subhero.subhero--pic { position: relative; height: auto !important; min-height: 0 !important; padding: 0 !important; background: #1458b8; overflow: hidden; isolation: isolate; display: block; }
.subhero.subhero--pic::before, .subhero.subhero--pic::after { display: none !important; }
.hpic { display: block; width: 100%; line-height: 0; }
.hpic img { display: block; width: 100%; height: auto; transform: none; }
.hpic-veil { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 52% 90% at 12% 38%, rgba(10, 52, 130, .5) 0, rgba(10, 52, 130, 0) 100%), linear-gradient(0deg, rgba(10, 52, 130, .32) 0, rgba(10, 52, 130, 0) 26%); }
.hero--pic > .wrap, .subhero--pic > .wrap { position: absolute; inset: 0; z-index: 5; width: 100%; max-width: none; margin: 0; display: flex; align-items: center; }
.hero--pic > .wrap > .copy, .subhero--pic .subhero-in { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 60px; box-sizing: border-box; }
.hero--pic .copy { padding-top: 0 !important; padding-bottom: 5.5% !important; }
.hero--pic .copy h1 { font-size: clamp(28px, 4vw, 60px); line-height: 1.25; margin: 0 0 .35em; text-shadow: 0 2px 16px rgba(4, 22, 70, .55); }
.hero--pic .copy .en { font-size: clamp(13px, 1.35vw, 20px); margin: 0 0 1em; text-shadow: 0 1px 10px rgba(4, 22, 70, .6); }
.hero--pic .copy .cta { margin: 0 0 .7em; }
.hero--pic .copy .btn { padding: clamp(8px, .8vw, 14px) clamp(14px, 1.6vw, 26px); font-size: clamp(12px, 1.05vw, 15px); }
.hero--pic .copy .note { font-size: clamp(11px, 1vw, 14px); margin: 0; text-shadow: 0 1px 8px rgba(4, 22, 70, .6); }
.hero--pic .copy::before, .hero--pic .hslides, .hero--pic .hbw { display: none !important; }
.subhero--pic .subhero-in { height: auto !important; padding-top: 0 !important; padding-bottom: 4% !important; }
.subhero--pic .subhero-in .en, .subhero--pic .subhero-in h1, .subhero--pic .subhero-in .lead { text-shadow: 0 2px 14px rgba(4, 22, 70, .6); }
.subhero--pic h1 { font-size: clamp(24px, 3vw, 44px); margin-bottom: .2em; }
.subhero--pic .lead { max-width: 46%; font-size: clamp(12px, 1.3vw, 18px); }
.hero--pic .swoosh, .subhero--pic .swoosh { z-index: 6; height: clamp(40px, 6vw, 110px); }
@media (max-width: 760px) {
  .hero--pic > .wrap { align-items: flex-start; }
  .hero--pic > .wrap > .copy { padding: 18px 18px 0; }
  .hero--pic .copy h1 { font-size: 26px; }
  .hero--pic .copy .en { font-size: 13px; margin-bottom: .6em; }
  .hero--pic .copy .btn { font-size: 12px; padding: 9px 12px; }
  .hero--pic .copy .note { font-size: 11px; }
  .hero--pic .copy { padding-bottom: 0 !important; }
  .subhero--pic > .wrap { align-items: flex-start; } .subhero--pic .subhero-in { padding: 14px 18px 0; }
  .subhero--pic h1 { font-size: 22px; } .subhero--pic .lead { max-width: 100%; font-size: 12px; line-height: 1.5; }
  .hpic-veil { background: linear-gradient(180deg, rgba(10, 52, 130, .6) 0, rgba(10, 52, 130, 0) 46%), linear-gradient(0deg, rgba(10, 52, 130, .3) 0, rgba(10, 52, 130, 0) 20%); }
}
@media (min-width: 761px) {
  .hero--pic .copy h1 { font-size: clamp(24px, 3.6vw, 56px); }
  .hero--pic .copy .en { font-size: clamp(12px, 1.2vw, 18px); margin-bottom: .8em; }
  .hero--pic .copy { padding-bottom: 7% !important; }
  .hero--pic > .wrap > .copy { width: 100%; }
}
@media (max-width: 760px) {
  .hero--pic > .wrap { align-items: stretch; }
  .hero--pic > .wrap > .copy { display: flex; flex-direction: column; height: 100%; padding: 16px 18px 46px; box-sizing: border-box; }
  .hero--pic .copy .cta { margin-top: auto; margin-bottom: 10px; }
}
@media (max-width: 760px) { .hero--pic > .wrap > .copy { padding-bottom: 64px; } .hero--pic .swoosh { height: 44px; } }
@media (max-width: 760px) { .hero--pic .copy, .hero--pic > .wrap > .copy { padding-bottom: 66px !important; } }

/* ヒーロー（1枚ずつ切り替え）：写真は切らずに右へ。左は同じ写真のぼかしを、なだらかなグラデーションでつなぐ */
.hero--b.hero--tint, .subhero.subhero--tint { height: auto; background: #1458b8; }
.htn { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.htn-bg { display: block !important; position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.05) brightness(.95); }
.htn-p { position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: auto; height: 100%; aspect-ratio: var(--ar); background-size: 100% 100%; background-repeat: no-repeat; filter: none !important; transform: none; animation: none !important; scale: 1 !important; translate: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 28%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 10%, #000 28%); }
.htn-fade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 70, 150, .72) 0, rgba(14, 70, 150, .5) 34%, rgba(14, 70, 150, 0) 62%), linear-gradient(0deg, rgba(10, 40, 90, .28) 0, rgba(10, 40, 90, 0) 26%); }
.htn-blue, .htn-wash, .htn-grid, .htn-scan, .htn-i { display: none !important; }
.hero--b.hero--tint { height: clamp(440px, 36vw, 580px) !important; display: flex; align-items: center; }
.subhero.subhero--tint { height: clamp(340px, 28vw, 440px) !important; }
@media (max-width: 760px) {
  .hero--b.hero--tint { height: auto !important; display: block; }
  .subhero.subhero--tint { height: auto !important; }
  .htn-p { top: 0; bottom: auto; right: 50%; left: auto; height: 230px; transform: translateX(50%); max-width: 100%; }
  .htn-fade { background: linear-gradient(180deg, rgba(14, 70, 150, 0) 0, rgba(14, 70, 150, 0) 34%, rgba(14, 70, 150, .75) 52%, rgba(14, 70, 150, .85) 100%); }
  .hero--tint .copy { padding: 250px 0 70px !important; }
  .subhero--tint .subhero-in { height: auto !important; padding: 242px 0 66px !important; }
  .subhero--tint .subhero-in h1 { font-size: 22px; }
}
/* ぼかしは左の約3分の1、写真は右の約3分の2。写真は全て同じ扱い（縦長のクレーンも同じ幅） */
.htn-p { width: 66% !important; aspect-ratio: auto !important; background-size: cover !important; left: auto; right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 8%, #000 20%) !important; mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 8%, #000 20%) !important; }
.htn-fade { background: linear-gradient(90deg, rgba(14, 70, 150, .7) 0, rgba(14, 70, 150, .42) 26%, rgba(14, 70, 150, 0) 40%), linear-gradient(0deg, rgba(10, 40, 90, .26) 0, rgba(10, 40, 90, 0) 26%) !important; }
@media (max-width: 760px) {
  .htn-p { width: 100% !important; right: 0; left: 0; height: 230px; transform: none; max-width: none;
    -webkit-mask-image: none !important; mask-image: none !important; }
  .htn-fade { background: linear-gradient(180deg, rgba(14, 70, 150, 0) 0, rgba(14, 70, 150, 0) 34%, rgba(14, 70, 150, .75) 52%, rgba(14, 70, 150, .85) 100%) !important; }
}

/* スマホ：写真を全面に敷き、文字を写真の上に重ねる。写真は鮮明なまま、下から青いグラデーションで文字を支える */
@media (max-width: 760px) {
  .hero--b.hero--tint { height: auto !important; min-height: 0 !important; display: block; }
  .htn-bg { display: none !important; }
  .htn-p { top: 0 !important; bottom: 0 !important; left: 0; right: 0; width: 100% !important; height: 100% !important; transform: none !important; background-size: cover !important; }
  .htn-fade { background:
    linear-gradient(0deg, rgba(8, 44, 108, .94) 0, rgba(10, 58, 134, .86) 34%, rgba(14, 70, 150, .5) 58%, rgba(14, 70, 150, 0) 82%),
    linear-gradient(90deg, rgba(8, 44, 108, .4) 0, rgba(8, 44, 108, 0) 70%) !important; }
  .hero--tint .copy { padding: 220px 0 66px !important; }
  .hero--tint .copy h1 { font-size: 30px; text-shadow: 0 2px 14px rgba(2, 16, 50, .7); }
  .hero--tint .copy .en { text-shadow: 0 1px 10px rgba(2, 16, 50, .75); }
  .hero--tint .copy .note { text-shadow: 0 1px 8px rgba(2, 16, 50, .8); }
  .subhero.subhero--tint { height: auto !important; }
  .subhero--tint .subhero-in { padding: 120px 0 56px !important; height: auto !important; }
  .subhero--tint .subhero-in .en, .subhero--tint .subhero-in h1, .subhero--tint .subhero-in .lead { text-shadow: 0 2px 12px rgba(2, 16, 50, .75); }
}

/* 文字の読みやすさ：どの写真でも白い文字が読めるよう、メッセージ側に青の影を一定に敷き、文字に多重の影を付ける */
@media (min-width: 761px) {
  .htn-fade { background:
    radial-gradient(ellipse 46% 78% at 20% 50%, rgba(6, 36, 96, .62) 0, rgba(6, 36, 96, .3) 55%, rgba(6, 36, 96, 0) 100%),
    linear-gradient(90deg, rgba(10, 56, 130, .82) 0, rgba(10, 56, 130, .6) 28%, rgba(10, 56, 130, .2) 40%, rgba(10, 56, 130, 0) 52%),
    linear-gradient(0deg, rgba(10, 40, 90, .3) 0, rgba(10, 40, 90, 0) 26%) !important; }
}
.hero--tint .copy h1, .subhero--tint .subhero-in h1 { text-shadow: 0 0 2px rgba(4, 20, 64, .5), 0 3px 8px rgba(4, 20, 64, .55), 0 6px 28px rgba(4, 20, 64, .7); }
.hero--tint .copy .en, .hero--tint .copy .note, .subhero--tint .subhero-in .en, .subhero--tint .subhero-in .lead { text-shadow: 0 0 2px rgba(4, 20, 64, .55), 0 2px 6px rgba(4, 20, 64, .6), 0 3px 16px rgba(4, 20, 64, .7); }
.hero--tint .btn:not(.btn--fill) { background: rgba(8, 40, 100, .42); border-color: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
/* 写真が寄りにならないよう、ヒーローの高さを写真の縦横比に近づける（TOPとサブページで同じ考え方） */
@media (min-width: 761px) {
  .hero--b.hero--tint { height: clamp(460px, 41vw, 640px) !important; }
  .subhero.subhero--tint { height: clamp(380px, 34vw, 520px) !important; }
}
/* サブページ：高さを縮める。写真は拡大せず、切れる量を増やさないよう、写真の幅も高さに合わせて小さくする */
@media (min-width: 761px) {
  .subhero.subhero--tint { height: clamp(290px, 24vw, 380px) !important; }
  .subhero--tint .htn-p { width: clamp(520px, 43vw, 680px) !important; }
  .subhero--tint .htn-fade { background:
    radial-gradient(ellipse 46% 80% at 18% 50%, rgba(6, 36, 96, .55) 0, rgba(6, 36, 96, 0) 100%),
    linear-gradient(90deg, rgba(10, 56, 130, .82) 0, rgba(10, 56, 130, .6) 36%, rgba(10, 56, 130, .15) 52%, rgba(10, 56, 130, 0) 60%) !important; }
  .subhero--tint .subhero-in { padding-top: 24px !important; padding-bottom: 40px !important; }
}

/* スマホ（TOP）：写真は細長く切らず、横幅いっぱいで高さ340pxに。文字は写真の下半分に重ね、その下は同じ写真のぼかしを青で締める */
@media (max-width: 760px) {
  .htn-bg { display: block !important; }
  .htn-p { top: 0 !important; bottom: auto !important; height: 340px !important; }
  .htn-fade { background:
    linear-gradient(0deg, rgba(8, 44, 108, .9) 0, rgba(10, 58, 134, .8) 40%, rgba(14, 70, 150, .0) 100%),
    linear-gradient(180deg, rgba(8, 44, 108, 0) 0, rgba(8, 44, 108, 0) 30%, rgba(8, 44, 108, .78) 56%, rgba(8, 44, 108, .9) 100%) !important; }
  .hero--tint .copy { padding: 176px 0 66px !important; }
}
/* サブページ：ぼかしを左の約3分の1に戻す（写真は右の約3分の2）。高さは少し縮めた状態を維持 */
@media (min-width: 761px) {
  .subhero.subhero--tint { height: clamp(330px, 28vw, 440px) !important; }
  .subhero--tint .htn-p { width: 66% !important; }
  .subhero--tint .htn-fade { background:
    radial-gradient(ellipse 46% 78% at 20% 50%, rgba(6, 36, 96, .62) 0, rgba(6, 36, 96, .3) 55%, rgba(6, 36, 96, 0) 100%),
    linear-gradient(90deg, rgba(10, 56, 130, .82) 0, rgba(10, 56, 130, .6) 28%, rgba(10, 56, 130, .2) 40%, rgba(10, 56, 130, 0) 52%),
    linear-gradient(0deg, rgba(10, 40, 90, .3) 0, rgba(10, 40, 90, 0) 26%) !important; }
}

/* PC・タブレット：左の青いもやをやめ、なだらかな曲線の濃い青の面が、上から下へサクッと落ちてくる。縁に沿って、黄・水色・緑の波線が描かれる */
.htn-panel { display: none; }
@media (min-width: 761px) {
  .htn-panel { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: hidden; }
  .htn-bg, .htn-fade { display: none !important; }
  .htn-p { width: 64% !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .htn-pp { animation: htn-drop .85s cubic-bezier(.2, .9, .25, 1) .05s both; }
  @keyframes htn-drop { from { transform: translateY(-104%); } to { transform: none; } }
  .htn-pl { stroke-dasharray: none; clip-path: inset(0 0 100% 0); animation: htn-draw 1.5s cubic-bezier(.3, .7, .2, 1) both; }
  .htn-pl1 { animation-delay: .75s; } .htn-pl2 { animation-delay: .9s; } .htn-pl3 { animation-delay: 1.05s; }
  @keyframes htn-draw { to { clip-path: inset(0 0 0 0); } }
  .hero--tint .copy, .subhero--tint .subhero-in { animation-delay: .5s; }
  .hero--tint .btn--fill { background: #fff; border-color: #fff; color: #0a2a66; }
  .hero--tint .btn--fill:hover { background: #e8f0ff; }
  .hero--tint .btn:not(.btn--fill) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: rgba(255, 255, 255, .85); }
  .hero--tint .copy h1, .subhero--tint .subhero-in h1, .hero--tint .copy .en, .hero--tint .copy .note, .subhero--tint .subhero-in .en, .subhero--tint .subhero-in .lead { text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .htn-pp, .htn-pl { animation: none !important; clip-path: none; } }
@media (min-width: 761px) { .htn-p { width: 72% !important; } }
/* 斜めの縁（添付のイメージ）：縁の黄色を主線に、細い水色と緑を並べる。見出しの上に、黄色の短い線 */
@media (min-width: 761px) {
  .htn-pl1 { stroke-width: 3.2; } .htn-pl2 { stroke-width: 1.4; } .htn-pl3 { stroke-width: 1.4; }
  .hero--tint .copy::before { display: block !important; content: ''; width: 60px; height: 4px; margin-bottom: 18px; background: #f6c500; box-shadow: none; transform-origin: left; animation: htn-bar 1s cubic-bezier(.2, .7, .2, 1) .9s both; }
}
/* 青い事業所の写真：扉が、青い面の縁より右の、見える範囲の中央あたりに来るよう、写真を右へ寄せる（PC・タブレット） */
@media (min-width: 761px) { .htn-p.htn-p--door { right: -15% !important; width: 78% !important; } }
.hero--tint .copy::before { display: none !important; }
/* 本社の写真：会社名の入った建物を、青い面の縁より右の中央あたりへ。搬入の写真：白いタンクをメインに（トラックは右で切れてよい） */
@media (min-width: 761px) {
  .htn-p.htn-p--hq { right: -13% !important; width: 78% !important; }
  .htn-p.htn-p--tank { right: -24% !important; width: 86% !important; }
}

/* スマホ：PCと同じく、濃い青の面が上から落ちてきて、縁に黄・水色・緑の線が描かれる。文字は順にふわっと現れる */
.htn-panel-m { display: none; }
@media (max-width: 760px) {
  .htn-panel-m { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: hidden; }
  .htn-fade, .htn-bg { display: none !important; }
  .htn-p { height: 300px !important; }
  .htn-mp { animation: htn-drop .85s cubic-bezier(.2, .9, .25, 1) .05s both; }
  .htn-ml { clip-path: inset(0 100% 0 0); animation: htn-draw-x 1.2s cubic-bezier(.3, .7, .2, 1) both; }
  .htn-ml1 { animation-delay: .7s; } .htn-ml2 { animation-delay: .85s; } .htn-ml3 { animation-delay: 1s; }
  @keyframes htn-draw-x { to { clip-path: inset(0 0 0 0); } }
  .hero--tint .copy { padding: 262px 0 66px !important; }
  .hero--tint .copy > * { animation: fadeUp .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero--tint .copy > :nth-child(1) { animation-delay: .6s; } .hero--tint .copy > :nth-child(2) { animation-delay: .75s; }
  .hero--tint .copy > :nth-child(3) { animation-delay: .9s; } .hero--tint .copy > :nth-child(4) { animation-delay: 1.05s; }
  .hero--tint .copy h1, .hero--tint .copy .en, .hero--tint .copy .note { text-shadow: none; }
  .hero--tint .btn--fill { background: #fff; border-color: #fff; color: #0a2a66; }
  .hero--tint .btn:not(.btn--fill) { background: transparent; border-color: rgba(255, 255, 255, .85); }
  .subhero.subhero--tint .subhero-in { padding-top: 168px !important; }
}
@media (prefers-reduced-motion: reduce) { .htn-mp, .htn-ml { animation: none !important; clip-path: none; } }
@media (max-width: 760px) { .hero--tint .copy { padding-top: 280px !important; } }
@media (max-width: 760px) { .hero--tint .copy { padding-top: 372px !important; } .htn-p { height: 390px !important; } }

/* スマホ：写真は切らずに、全体を横幅いっぱいで見せる。上下の余りは、同じ写真のぼかしで埋める */
@media (max-width: 760px) {
  .htn-bg { display: block !important; inset: -20px; filter: blur(22px) brightness(.95); }
  .htn-p { background-size: contain !important; background-repeat: no-repeat; background-position: center center !important; }
  .htn-p.htn-p--door, .htn-p.htn-p--hq, .htn-p.htn-p--tank { right: 0 !important; width: 100% !important; }
}
@media (max-width: 760px) { .hero--tint .copy { padding-top: 322px !important; } .htn-p { height: 270px !important; top: 14px !important; } }
@media (min-width: 761px) { .htn-p.htn-p--hq { background-position: 50% 28% !important; } .htn-p.htn-p--tank { background-position: 50% 62% !important; } }

/* サブページ（PC）：写真は切らずに全体を見せる。枠を写真の縦横比（3:2）に合わせ、右端に置く。青い面との間は、同じ写真のぼかしで埋める */
@media (min-width: 761px) {
  .subhero.subhero--tint { height: clamp(340px, 31vw, 460px) !important; }
  .subhero--tint .htn-bg { display: block !important; filter: blur(26px) saturate(1.05) brightness(.92); }
  .subhero--tint .htn-p, .subhero--tint .htn-p.htn-p--door, .subhero--tint .htn-p.htn-p--hq, .subhero--tint .htn-p.htn-p--tank {
    width: auto !important; height: 100% !important; aspect-ratio: 3 / 2 !important; right: 0 !important; left: auto !important; background-size: cover !important; background-position: 50% 50% !important; }
}

/* スマホ：TOPは写真を控えめに、サブページは写真をしっかり見せる（青い面の縁の位置を、ページごとに調整） */
@media (max-width: 760px) {
  .hero--tint .copy { padding-top: 268px !important; }
  .hero--tint .htn-p { height: 250px !important; top: 8px !important; }
  .subhero--tint .htn-panel-m { top: 150px; height: calc(100% - 150px); }
  .subhero--tint .htn-p { height: 236px !important; top: 0 !important; }
  .subhero.subhero--tint .subhero-in { padding-top: 250px !important; padding-bottom: 54px !important; }
}
@media (max-width: 760px) { .hero--tint .copy { padding-top: 290px !important; } .subhero.subhero--tint .subhero-in { padding-top: 266px !important; } .subhero--tint .htn-panel-m { top: 160px; height: calc(100% - 160px); } }
/* サブページ（PC）：本社・大分・広島の事業所写真は、切らずに全体（会社名・看板まで）を見せる */
@media (min-width: 761px) { .subhero--tint .htn-p.htn-p--fit { background-size: contain !important; background-repeat: no-repeat; background-position: center center !important; } }
/* ぼかしをやめる：写真の余白は、濃い青のベタで埋める（青い面とつながる） */
.htn-bg { display: none !important; }
.hero--b.hero--tint, .subhero.subhero--tint { background: #0a2a66 !important; }
.subhero--tint .htn-bg, .hero--tint .htn-bg { display: none !important; }
@media (max-width: 760px) {
  .hero--tint .htn-panel-m { top: -70px; height: calc(100% + 70px); }
  .hero--tint .htn-p { height: 212px !important; top: 6px !important; }
  .hero--tint .copy { padding-top: 238px !important; }
}
/* スマホ：写真は全面に、切れ目なく敷く（ぼかし・余白なし）。濃い青の斜めの面を下に敷き、見出しは写真と青い面にまたがって重ねる */
@media (max-width: 760px) {
  .htn-p, .htn-p.htn-p--door, .htn-p.htn-p--hq, .htn-p.htn-p--tank, .htn-p.htn-p--fit { top: 0 !important; bottom: 0 !important; height: 100% !important; width: 100% !important; right: 0 !important; left: 0 !important; background-size: cover !important; background-position: 50% 50% !important; aspect-ratio: auto !important; }
  .hero--tint .htn-panel-m, .subhero--tint .htn-panel-m { top: 0; height: 100%; }
  .hero--tint .copy { padding-top: 168px !important; padding-bottom: 60px !important; }
  .hero--tint .copy h1 { font-size: 34px; text-shadow: 0 2px 14px rgba(2, 16, 50, .75), 0 0 2px rgba(2, 16, 50, .6); }
  .subhero.subhero--tint .subhero-in { padding-top: 150px !important; padding-bottom: 50px !important; }
  .subhero--tint .subhero-in h1 { font-size: 28px; text-shadow: 0 2px 14px rgba(2, 16, 50, .75), 0 0 2px rgba(2, 16, 50, .6); }
  .subhero--tint .subhero-in .en { text-shadow: 0 1px 8px rgba(2, 16, 50, .7); }
}
@media (max-width: 760px) {
  .subhero--tint .htn-panel-m { top: 14%; height: 100%; }
  .subhero.subhero--tint .subhero-in { padding-top: 176px !important; padding-bottom: 54px !important; }
}
/* サブページ（PC）：写真を斜めの縁に合わせて配置。写真の左の縁を、青い面の斜めの縁に沿って切る（ぼかし・隙間なし） */
@media (min-width: 761px) {
  .subhero--tint .htn-p, .subhero--tint .htn-p.htn-p--door, .subhero--tint .htn-p.htn-p--hq, .subhero--tint .htn-p.htn-p--tank, .subhero--tint .htn-p.htn-p--fit {
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); -webkit-mask-image: none !important; mask-image: none !important; }
}
/* サブページ（PC）：TOPと同じ。青い面の斜めの縁、写真は画面の約7割で大きく */
@media (min-width: 761px) {
  .subhero.subhero--tint { height: clamp(380px, 34vw, 500px) !important; }
  .subhero.subhero--tint .htn-p, .subhero.subhero--tint .htn-p.htn-p--fit { width: 72% !important; height: 100% !important; aspect-ratio: auto !important; right: 0 !important; left: auto !important; clip-path: none !important; background-size: cover !important; background-position: 50% 50% !important; }
  .subhero.subhero--tint .htn-p.htn-p--door { right: -15% !important; width: 78% !important; }
  .subhero.subhero--tint .htn-p.htn-p--hq { right: -13% !important; width: 78% !important; background-position: 50% 30% !important; }
  .subhero.subhero--tint .htn-p.htn-p--tank { right: -24% !important; width: 86% !important; }
  .subhero.subhero--tint .htn-p.htn-p--fit { background-position: 60% 50% !important; }
}
@media (min-width: 761px) {
  .subhero.subhero--tint .htn-p.htn-p--oita { right: -26% !important; width: 96% !important; background-position: 30% 55% !important; }
  .subhero.subhero--tint .htn-p.htn-p--hiro { right: -12% !important; width: 84% !important; background-position: 75% 82% !important; }
  .subhero.subhero--tint .htn-p.htn-p--fit.htn-p--hq { background-position: 50% 28% !important; }
}

/* スマホ：「落ちてくる青い面」の演出のある、以前の構成に戻す（写真は上、青い面は下。ぼかしなし） */
@media (max-width: 760px) {
  .htn-p, .htn-p.htn-p--door, .htn-p.htn-p--hq, .htn-p.htn-p--tank, .htn-p.htn-p--fit { top: 6px !important; bottom: auto !important; height: 300px !important; width: 100% !important; right: 0 !important; left: 0 !important; background-size: cover !important; background-position: 50% 50% !important; }
  .hero--tint .htn-panel-m { top: 0 !important; height: 100% !important; }
  .hero--tint .copy { padding-top: 300px !important; padding-bottom: 60px !important; }
  .hero--tint .copy h1 { font-size: 30px; text-shadow: none; }
  .subhero--tint .htn-p, .subhero--tint .htn-p.htn-p--door, .subhero--tint .htn-p.htn-p--hq, .subhero--tint .htn-p.htn-p--tank, .subhero--tint .htn-p.htn-p--fit { top: 0 !important; height: 236px !important; }
  .subhero--tint .htn-panel-m { top: 160px !important; height: calc(100% - 160px) !important; }
  .subhero.subhero--tint .subhero-in { padding-top: 266px !important; padding-bottom: 54px !important; }
  .subhero--tint .subhero-in h1 { font-size: 26px; text-shadow: none; }
}
/* サブページ（PC）：写真の大きさ・位置はそのままで、下側を削って低くする（波線は残す） */
@media (min-width: 761px) {
  .subhero.subhero--tint { height: clamp(290px, 25vw, 380px) !important; }
  .subhero.subhero--tint .htn-p, .subhero.subhero--tint .htn-p.htn-p--fit, .subhero.subhero--tint .htn-p.htn-p--hq, .subhero.subhero--tint .htn-p.htn-p--oita, .subhero.subhero--tint .htn-p.htn-p--hiro { background-position-y: 0% !important; }
}
@media (min-width: 761px) {
  .subhero.subhero--tint .htn-p.htn-p--hiro { background-position-y: 78% !important; }
  .subhero.subhero--tint .htn-p.htn-p--oita { background-position-y: 38% !important; }
}
/* スマホのサブページ：上の黄・水色・緑の線をなくし、青い面を広く、写真は少し控えめに */
@media (max-width: 760px) {
  .subhero--tint .htn-ml { display: none !important; }
  .subhero--tint .htn-p, .subhero--tint .htn-p.htn-p--door, .subhero--tint .htn-p.htn-p--hq, .subhero--tint .htn-p.htn-p--tank, .subhero--tint .htn-p.htn-p--fit { height: 196px !important; }
  .subhero--tint .htn-panel-m { top: 40px !important; height: calc(100% - 40px) !important; }
  .subhero.subhero--tint .subhero-in { padding-top: 222px !important; }
}

/* サブページ（PC）：写真は常に全体（会社名・看板・建物）が見える。写真の枠は3:2、左の縁は斜めに切り、縁に黄・水色・緑の線。余りは濃い青 */
@media (min-width: 761px) {
  .subhero.subhero--tint { --H: clamp(320px, 28vw, 500px); --fw: calc(var(--H) * 1.5); --X: calc(var(--fw) * .14); height: var(--H) !important; background: #0a2a66 !important; }
  .subhero.subhero--tint .htn-panel { display: none !important; }
  .subhero.subhero--tint .htn .htn-p[class] { width: var(--fw) !important; height: 100% !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important; aspect-ratio: auto !important;
    background-color: #0a2a66; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important;
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%) !important; -webkit-mask-image: none !important; mask-image: none !important; animation: htn-slide .9s cubic-bezier(.2, .9, .25, 1) .05s both; }
  @keyframes htn-slide { from { transform: translateY(-104%); } to { transform: none; } }
  .subhero.subhero--tint .htn::before, .subhero.subhero--tint .htn::after, .subhero.subhero--tint .htn .htn-fade { content: ''; display: block !important; position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none; opacity: 0; animation: htn-lines 1s ease .8s both; }
  .subhero.subhero--tint .htn::before { right: calc(var(--fw) - var(--X)); width: calc(var(--X) + 4px); background: #f6c500; clip-path: polygon(calc(100% - 4px) 0, 100% 0, 4px 100%, 0 100%); }
  .subhero.subhero--tint .htn .htn-fade { right: calc(var(--fw) - var(--X) - 3px); width: calc(var(--X) + 2px); background: #5aa2ff; clip-path: polygon(calc(100% - 2px) 0, 100% 0, 2px 100%, 0 100%); }
  .subhero.subhero--tint .htn::after { right: calc(var(--fw) - var(--X) - 6px); width: calc(var(--X) + 2px); background: #3aaa3a; clip-path: polygon(calc(100% - 2px) 0, 100% 0, 2px 100%, 0 100%); }
  @keyframes htn-lines { to { opacity: 1; } }
}

/* サブページ（ぼかしのグラデーション版）：写真は右の約3分の2、左は同じ写真のぼかし。スマホは写真を全面に敷き、下から青いグラデーション */
.subhero.subhero--blur { background: #1458b8; isolation: isolate; height: clamp(300px, 26vw, 400px); }
.subhero.subhero--blur::before, .subhero.subhero--blur::after { display: none !important; }
.hbl { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hbl-s { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hbl-s.is-on { opacity: 1; }
.hbl-bg { position: absolute; inset: -30px; background-size: cover; background-position: center; filter: blur(28px) saturate(1.05) brightness(.95); }
.hbl-p { position: absolute; top: 0; bottom: 0; right: 0; width: 66%; background-size: cover; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 8%, #000 20%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 8%, #000 20%); }
.hbl-fade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 46% 78% at 20% 50%, rgba(6, 36, 96, .62) 0, rgba(6, 36, 96, .3) 55%, rgba(6, 36, 96, 0) 100%),
  linear-gradient(90deg, rgba(10, 56, 130, .82) 0, rgba(10, 56, 130, .6) 28%, rgba(10, 56, 130, .2) 40%, rgba(10, 56, 130, 0) 52%),
  linear-gradient(0deg, rgba(10, 40, 90, .3) 0, rgba(10, 40, 90, 0) 26%); }
.subhero--blur > .wrap { position: relative; z-index: 6; }
.subhero--blur .swoosh { z-index: 7; }
.subhero--blur .subhero-in { height: 100%; padding-top: 24px; padding-bottom: 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.subhero--blur .subhero-in h1, .subhero--blur .subhero-in .lead, .subhero--blur .subhero-in .en { text-shadow: 0 0 2px rgba(4, 20, 64, .5), 0 3px 8px rgba(4, 20, 64, .55), 0 6px 28px rgba(4, 20, 64, .7); }
.subhero--blur .lead { max-width: 44%; }
@media (max-width: 760px) {
  .subhero.subhero--blur { height: auto; }
  .hbl-bg { display: none; }
  .hbl-p { left: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .hbl-fade { background: linear-gradient(0deg, rgba(8, 44, 108, .94) 0, rgba(10, 58, 134, .86) 34%, rgba(14, 70, 150, .5) 58%, rgba(14, 70, 150, 0) 82%), linear-gradient(90deg, rgba(8, 44, 108, .4) 0, rgba(8, 44, 108, 0) 70%); }
  .subhero--blur .subhero-in { height: auto; display: block; padding: 120px 0 56px; }
  .subhero--blur .lead { max-width: 100%; }
}

/* TOP（ぼかしのグラデーション版）：サブページと同じ。写真は右の約3分の2、左は同じ写真のぼかし */
.hero--b.hero--blur { background: #1458b8; isolation: isolate; height: clamp(460px, 38vw, 600px); min-height: 0; display: flex; align-items: center; }
.hero--blur > .wrap { position: relative; z-index: 6; width: 100%; }
.hero--blur .swoosh { z-index: 7; }
.hero--blur .copy { padding: 0 0 40px; }
.hero--blur .copy h1, .hero--blur .copy .en, .hero--blur .copy .note { text-shadow: 0 0 2px rgba(4, 20, 64, .5), 0 3px 8px rgba(4, 20, 64, .55), 0 6px 28px rgba(4, 20, 64, .7); }
.hero--blur .btn--fill { background: #1c6fe0; border-color: #1c6fe0; color: #fff; }
.hero--blur .btn:not(.btn--fill) { background: rgba(8, 40, 100, .42); border-color: rgba(255, 255, 255, .9); }
.hero--blur .hslides, .hero--blur .hbw { display: none; }
@media (max-width: 760px) {
  .hero--b.hero--blur { height: auto; display: block; }
  .hero--blur .copy { padding: 220px 0 66px; }
}
/* 機械・設備のカード：クリックで設備紹介の該当の分類へ */
a.mc--link { color: inherit; text-decoration: none; cursor: pointer; transition: transform .3s, box-shadow .3s, border-color .3s; }
a.mc--link:hover, a.mc--link:focus-visible { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 18px 34px -18px rgba(13, 59, 140, .5); }
a.mc--link .mc-body h3::after { content: ' →'; color: var(--blue); font-weight: 700; }
.eq-sub[id] { scroll-margin-top: 96px; }

/* 売上の推移：2020年以降は毎年。2024年（過去最高）は黄色の棒と「最高実績」の月桂冠で強調 */
.wbars { gap: 10px; }
.wb { max-width: 84px; }
.wb--peak .stack .seg { background: linear-gradient(180deg, #ffd84a 0, #f6c500 100%) !important; box-shadow: 0 0 0 3px rgba(246, 197, 0, .28), 0 14px 26px -10px rgba(246, 197, 0, .7); }
.wb--peak .tot { color: #b37f00; font-size: 22px; top: -30px; font-weight: 700; }
.wb .crown { position: absolute; left: 50%; top: -86px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; white-space: nowrap; z-index: 4; opacity: 0; animation: crown-in .8s cubic-bezier(.3, 1.4, .5, 1) 2.4s both; }
.wb .crown b { font-size: 11.5px; line-height: 1.25; text-align: center; color: #8a5f00; font-weight: 900; letter-spacing: .02em; }
.wb .crown .lf { width: 16px; height: 30px; } .wb .crown .lf--r { transform: scaleX(-1); }
@keyframes crown-in { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.8); } to { opacity: 1; transform: translateX(-50%); } }
.hn--to span { white-space: nowrap; }
@media (max-width: 520px) { .wbars { gap: 3px; } .wb .yr { font-size: 9px; left: -6px; right: -6px; } .wb .tot { font-size: 11px; } .wb--peak .tot { font-size: 14px; top: -22px; } .wb .crown { top: -62px; } .wb .crown b { font-size: 9px; } .wb .crown .lf { width: 11px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .wb .crown { animation: none; opacity: 1; } }
/* ジャストフレア：「（鋼管つば出し加工機）」は、どの画面でも2行目に、途中で折り返さずに出す */
.eq h3 .nm-a { display: block; }
.eq h3 .nm-b { display: block; white-space: nowrap; font-size: .92em; }
@media (max-width: 380px) { .eq h3 .nm-b { font-size: .84em; } }
/* ニュースの機械の写真：枠の中に全体が収まるように（切れない） */
.nr-img.nr-img--device { position: relative; display: block; }
.nr-img.nr-img--device > img { position: absolute !important; inset: 8px !important; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; padding: 0 !important; object-fit: contain !important; object-position: center !important; }
/* 拠点の広がり（幅の狭いカード）：ラベルが切れない・年表の線に重ならないよう、地図の下に余白 */
.exp-map { margin-bottom: 16px; }
@media (max-width: 1000px) { .exp-map { margin-bottom: 26px; } }
/* 拠点の広がり：カードの幅が狭いとき（3列のPC表示を含む）は、地図を縦に十分な高さにして、ラベルが重ならないようにする */
.g-row2 .expand { container-type: inline-size; }
@container (max-width: 460px) {
  .exp-map, .g-row2 .exp-map { min-height: 250px !important; height: 250px !important; max-height: none !important; margin-bottom: 22px; }
}
/* 英語・幅の狭いカード：HQのラベルは、ピンの左に2行で置き、黄色い線（矢印）に重ならないようにする */
@container (max-width: 460px) {
  html[data-lang='en'] .expand .dm-pin[data-id='kitakyushu'] .pin-label { left: -14px !important; top: 2px !important; transform: translate(-100%, -50%) !important; white-space: normal; width: 88px; text-align: right; line-height: 1.15; }
}
@container (max-width: 460px) {
  html[data-lang='en'] .expand .dm-pin[data-id='kitakyushu'] .pin-label { left: -10px !important; width: 78px; font-size: 12px; letter-spacing: -.02em; word-break: keep-all; overflow-wrap: normal; }
  html[data-lang='en'] .expand .dm-pin[data-id='kitakyushu'] .pin-label small { font-size: 10.5px; }
}
@container (max-width: 460px) {
  html[data-lang='en'] .expand .dm-pin[data-id='kitakyushu'] .pin-label { left: -8px !important; width: 70px; font-size: 11px; letter-spacing: -.03em; }
  html[data-lang='en'] .expand .dm-pin[data-id='kitakyushu'] .pin-label small { font-size: 10px; }
}
/* 2024年度 最高実績：金の月桂樹で飾る */
.wb .crown { top: -104px; gap: 0; }
.wb .crown .laurel { width: 30px; height: 72px; flex: none; filter: drop-shadow(0 2px 3px rgba(150, 100, 0, .35)); }
.wb .crown .laurel--r { transform: scaleX(-1); }
.wb .crown b { font-size: 13px; padding: 0 2px; color: #7a5200; }
.wb--peak .tot { top: -32px; }
@media (max-width: 520px) { .wb .crown { top: -74px; } .wb .crown .laurel { width: 17px; height: 41px; } .wb .crown b { font-size: 9.5px; } }
/* 幅の狭いカード：地図を右へ寄せて、左に余白を作る（本社のラベルを、他と同じ大きさで、ピンの左に出すため） */
@container (max-width: 460px) {
  .exp-map, .g-row2 .exp-map { margin-left: 70px !important; }
  html[data-lang='en'] .expand .dm-pin[data-id='kitakyushu'] .pin-label { left: -20px !important; top: 0 !important; width: 104px; font-size: 15px !important; letter-spacing: 0; line-height: 1.2; text-align: right; white-space: normal; }
  html[data-lang='en'] .expand .dm-pin[data-id='kitakyushu'] .pin-label small { font-size: 11px !important; }
}
@container (max-width: 460px) { .exp-map, .g-row2 .exp-map { width: calc(100% - 70px) !important; } }
@container (max-width: 460px) { .exp-map, .g-row2 .exp-map { margin-left: 84px !important; width: calc(100% - 84px) !important; } }
/* 日本語・幅の狭いカード：本社（北九州）も、左の余白に、ピンの左へ置く（地図の中に入らない） */
@container (max-width: 460px) {
  html:not([data-lang='en']) .expand .dm-pin[data-id='kitakyushu'] .pin-label { left: -20px !important; top: 0 !important; transform: translate(-100%, -50%) !important; text-align: right; white-space: nowrap; line-height: 1.2; }
  html:not([data-lang='en']) .expand .dm-pin[data-id='kitakyushu'] .pin-label .nb { display: block; }
}
/* 日本語：「本社（北九州）」を1行で、左の余白に置く */
@container (max-width: 460px) {
  html:not([data-lang='en']) .exp-map, html:not([data-lang='en']) .g-row2 .exp-map { margin-left: 116px !important; width: calc(100% - 116px) !important; }
  html:not([data-lang='en']) .expand .dm-pin[data-id='kitakyushu'] .pin-label { left: -16px !important; }
  html:not([data-lang='en']) .expand .dm-pin[data-id='kitakyushu'] .pin-label .nb { display: inline; }
}
/* 設備のカード内の写真：クリックで、該当の機械の項目へ */
.mc-strip figure > a.mc-pic { display: block; width: 100%; height: 100%; }
.mc-strip figure > a.mc-pic img { transition: transform .4s; }
.mc-strip figure > a.mc-pic:hover img { transform: scale(1.06); }
.eq[id] { scroll-margin-top: 96px; }
/* フッターの認証マーク：福岡県SDGsも、ほかのマークと同じ演出（マウスを乗せると、白いカードのように浮く） */
.fc-marks .fc-fsdgs a { padding: 6px 8px; border-radius: 10px; transition: transform .3s, box-shadow .3s, background .3s; }
.fc-marks .fc-fsdgs a:hover, .fc-marks .fc-fsdgs a:focus-visible { transform: translateY(-3px); background: #fff; box-shadow: 0 12px 22px -14px rgba(13, 59, 140, .55); }
.fc-fsdgs .fsdgs-name { transition: color .3s; }
.fc-fsdgs a:hover .fsdgs-name, .fc-fsdgs a:focus-visible .fsdgs-name { color: var(--navy); }

/* 設備のラインナップ：2027年の導入予定を、黄色の帯で目立たせる */
.lu-next { margin-top: 14px; padding: 12px 14px 13px; border-radius: 12px; background: linear-gradient(135deg, #fff8da 0, #ffeea0 100%); border: 1.5px solid #f6c500; box-shadow: 0 10px 22px -14px rgba(224, 168, 0, .75); position: relative; overflow: hidden; }
.lu-next::before { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: lu-shine 4.5s ease-in-out 1.2s infinite; }
@keyframes lu-shine { 0% { left: -40%; } 35%, 100% { left: 130%; } }
.lu-next-h { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.lu-next-h b { font-size: 15px; font-weight: 900; color: #0a2f73; letter-spacing: .02em; }
.lu-next-h b::before { content: 'NEXT'; display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: #0a2f73; color: #f6c500; font-family: 'Jost', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; vertical-align: 2px; }
.lu-next-h em { font-style: normal; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 14px; color: #0a2f73; background: #f6c500; padding: 3px 11px; border-radius: 999px; box-shadow: 0 0 0 3px rgba(246, 197, 0, .35); animation: lu-pulse2 2s ease-in-out infinite; }
@keyframes lu-pulse2 { 0%, 100% { box-shadow: 0 0 0 3px rgba(246, 197, 0, .35); } 50% { box-shadow: 0 0 0 7px rgba(246, 197, 0, 0); } }
.lu-next ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lu-next li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, .82); }
.lu-next .lu-nt { flex: none; width: 34px; height: 20px; border-radius: 6px; border: 2px dashed #d9a400; background: rgba(246, 197, 0, .28); animation: lu-pulse 1.8s ease-in-out infinite; }
.lu-next li + li .lu-nt { animation-delay: .5s; }
.lu-next li span { display: flex; flex-direction: column; line-height: 1.35; }
.lu-next li b { font-size: 13.5px; font-weight: 900; color: var(--ink); }
.lu-next li small { font-size: 12px; font-weight: 700; color: #a06f00; }
@media (prefers-reduced-motion: reduce) { .lu-next::before, .lu-next-h em, .lu-next .lu-nt { animation: none; } }

/* 数字で見る成長（下段）：配置はそのまま、縦を少し詰める */
.g-row2 .chart-card { padding: 14px 18px 12px; }
.g-row2 .field-card .fd-body { margin: 4px 0 2px; gap: 8px; }
.g-row2 .field-card .fd-ring { width: 128px; height: 128px; }
.g-row2 .field-card .fd-ring::before { inset: 24px; }
.g-row2 .field-card .fd-ring b { font-size: 32px; }
.g-row2 .field-card .fd-legend { gap: 5px; }
.g-row2 .field-card .fd-legend li { font-size: 13px; }
.lu-big b { font-size: 54px; } .lu-big span { font-size: 18px; }
.lu-lead { margin: 2px 0 6px; font-size: 12.5px; line-height: 1.6; }
.lu-rows { gap: 5px; }
.lu-h { margin-bottom: 2px; font-size: 12px; }
.lu-tiles i { height: 13px; }
.lu-next { margin-top: 9px; padding: 8px 11px 9px; }
.lu-next-h { margin-bottom: 6px; }
.lu-next-h b { font-size: 14px; } .lu-next-h em { font-size: 13px; padding: 2px 10px; }
.lu-next ul { gap: 5px; }
.lu-next li { padding: 4px 9px; gap: 8px; }
.lu-next li b { font-size: 13px; } .lu-next li small { font-size: 11.5px; }
.lu-next .lu-nt { width: 30px; height: 16px; }
@container (max-width: 460px) {
  .exp-map, .g-row2 .exp-map { min-height: 214px !important; height: 214px !important; margin-bottom: 14px; }
}
.g-row2 .expand .exp-steps { gap: 4px 8px; }
.g-row2 .fine { margin-top: 4px; }
/* フッターの認証マーク：福岡県SDGsも、ロゴと文言（ガイドライン上、必須）を横並びに。カード風の動きは、ロゴだけ */
@media (min-width: 1001px) {
  .ftr .row .fc-marks { flex-wrap: nowrap; gap: 12px 16px; }
  .fc-marks img { height: 54px; max-width: 150px; }
  .fc-marks li:nth-child(2) img, .fc-marks li:nth-child(3) img { height: 50px; }
}
.fc-marks .fc-fsdgs a { padding: 0; border-radius: 0; gap: 10px; transform: none !important; background: none !important; box-shadow: none !important; }
.fc-fsdgs .fsdgs-logo { padding: 6px 10px; border-radius: 10px; transition: transform .3s, box-shadow .3s; }
.fc-fsdgs .fsdgs-logo img, .fc-marks li:nth-child(4) img { height: 56px !important; }
.fc-fsdgs a:hover .fsdgs-logo, .fc-fsdgs a:focus-visible .fsdgs-logo { transform: translateY(-3px); box-shadow: 0 12px 22px -14px rgba(13, 59, 140, .55); }
.fc-fsdgs a:hover .fsdgs-name, .fc-fsdgs a:focus-visible .fsdgs-name { color: inherit; }
.fc-fsdgs .fsdgs-name { font-size: 11.5px; line-height: 1.5; white-space: nowrap; }
@media (max-width: 1000px) { .fc-fsdgs { flex-basis: 100%; } }
/* 拠点の写真のスライド：手動で切り替えられるよう、点を大きく、左右の矢印も付ける */
.xs-dots { gap: 8px; z-index: 6; }
.xs-dots button { width: 11px; height: 11px; box-shadow: 0 0 0 1px rgba(10, 40, 100, .35), 0 1px 4px rgba(0, 0, 0, .3); position: relative; }
.xs-dots button::after { content: ''; position: absolute; inset: -9px; }
.xs-dots button.is-on { width: 28px; }
.xs-arrow { position: absolute; top: 50%; z-index: 6; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: #0a2f73; font-size: 24px; line-height: 32px; font-weight: 700; text-align: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; transition: opacity .25s, transform .25s; }
.xs-arrow--prev { left: 10px; } .xs-arrow--next { right: 10px; }
.xs-arrow:hover { transform: scale(1.1); background: #fff; }
.locc-img--slides:hover .xs-arrow, .gc-photo:hover .xs-arrow, .xs-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .xs-arrow { opacity: .85; width: 30px; height: 30px; margin-top: -15px; font-size: 20px; line-height: 28px; } }
.gc-photo .xs-arrow { width: 26px; height: 26px; margin-top: -13px; font-size: 18px; line-height: 24px; }

/* 売上の英語表記：億円ではなく JPY million（日本語は従来どおり） */
.hero-nums .hn p.u-en { display: none; }
html[data-lang='en'] .hero-nums .hn p.u-ja { display: none; }
html[data-lang='en'] .hero-nums .hn p.u-en { display: flex; }
html[data-lang='en'] .hero-nums b { font-size: clamp(32px, 3.4vw, 46px); }
html[data-lang='en'] .hero-nums .hn--to b { font-size: clamp(38px, 4.2vw, 58px); }
html[data-lang='en'] .hero-nums small { font-size: 13px; }
@media (max-width: 520px) {
  html[data-lang='en'] .hero-nums b { font-size: 30px; }
  html[data-lang='en'] .hero-nums .hn--to b { font-size: 36px; }
  html[data-lang='en'] .hero-nums small { font-size: 12px; }
}
html[data-lang='en'] .lu-big span { margin-left: .3em; }
html[data-lang='en'] .lu-h small { margin-left: 4px; }
.wide-times-note { margin: -4px 0 0; font-size: 12px; color: rgba(255, 255, 255, .72); }

/* 狭い画面（〜420px）：トップのボタンを縦に並べ、日本語・英語とも文字が切れないようにする */
@media (max-width: 420px) {
  .hs .cta, .hero--b .cta { flex-wrap: wrap; }
  .hs .cta .btn, .hero--b .cta .btn { flex: 1 1 100%; white-space: normal; }
}

/* フッターの認証マーク：幅が足りない画面では、折り返して右端で切れないようにする */
@media (min-width: 1001px) and (max-width: 1260px) { .ftr .row .fc-marks { flex-wrap: wrap; } }
@media (max-width: 480px) { .fc-fsdgs .fsdgs-name { white-space: normal; } .fc-fsdgs a { flex-wrap: nowrap; min-width: 0; } .fc-fsdgs { min-width: 0; } }

/* 英語は文が長いので、画面が狭めのときは1行固定にせず折り返す */
@media (max-width: 1360px) {
  html[data-lang='en'] .lead--one, html[data-lang='en'] .newbanner .lead.lead--one { white-space: normal; }
}

/* 売上グラフ：狭い画面でカードの右にはみ出さない。年の表記も読める大きさに */
.wide-r, .wide-l { min-width: 0; }
@media (max-width: 520px) {
  .wbars { gap: 2px; }
  .wb .yr { font-size: 11px; left: -4px; right: -4px; letter-spacing: -.02em; }
  .wb .tot { font-size: 11.5px; }
}

/* お知らせの分類タグ：英語で長いときは折り返し、カードの外へ出さない */
.news a .tag-chip, .tag-chip { max-width: 100%; white-space: normal; line-height: 1.4; }
@media (max-width: 520px) { .tag-chip { border-radius: 14px; } }

/* 相談帯のボタン：幅が足りない画面（1001〜1100px付近）で、英語の文字が切れないよう余白を詰める */
@media (min-width: 1001px) and (max-width: 1120px) {
  .cta-band .r .btn { padding-left: 12px; padding-right: 12px; gap: 8px; font-size: 15px; }
}

/* 機械カードの「メーカー／型式」（英語）：Manufacturer を1行に */
html[data-lang='en'] .eq-spec > div { grid-template-columns: max-content 1fr; column-gap: 14px; }
html[data-lang='en'] .eq-spec dt { white-space: nowrap; min-width: 6.5em; }
@media (max-width: 560px) { html[data-lang='en'] .eq-spec > div { grid-template-columns: 1fr; } }
html[data-lang='en'] .eq-spec > div { grid-template-columns: 7.8em 1fr; column-gap: 8px; }
@media (max-width: 560px) { html[data-lang='en'] .eq-spec > div { grid-template-columns: 1fr; } }

/* 拠点どうしで、支え合う。：球体の図は左の1つだけ。テキストと図を左右にバランスよく並べる */
.network { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.net-figs { grid-template-columns: minmax(0, 1fr); max-width: 520px; width: 100%; margin: 0 auto; justify-self: center; }
@media (max-width: 1000px) { .network { grid-template-columns: minmax(0, 1fr); } .net-figs { max-width: 480px; } }
@media (max-width: 640px) { .net-figs { max-width: 330px; } }

/* お知らせの詳細：時期・内容は少ないので1行にまとめ、写真を大きく見せる */
.nl-plan { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nl-plan dl { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.nl-plan dl > div { grid-template-columns: 4.5em 1fr; gap: 10px; align-items: center; padding: 10px 16px; }
.nl-photos { gap: 14px; }
.nl-photos img { aspect-ratio: 3 / 2; }
.nl-photos figcaption { padding: 10px 14px; font-size: 14px; line-height: 1.6; }
@media (max-width: 760px) { .nl-plan dl > div { grid-template-columns: 4.5em 1fr; } }
@media (max-width: 560px) { .nl-photos { grid-template-columns: minmax(0, 1fr); } }

/* 球体の図：元のサイズ（約350px）より一回り大きい程度に */
.net-figs { max-width: 430px; }
@media (max-width: 1000px) { .net-figs { max-width: 400px; } }
@media (max-width: 640px) { .net-figs { max-width: 330px; } }
.net-figs { max-width: 390px; }
@media (max-width: 1000px) { .net-figs { max-width: 370px; } }
@media (max-width: 640px) { .net-figs { max-width: 330px; } }

/* ファーストビュー：水建 → ジャパンテクニカル、お互いのロゴで「生まれ変わり」を見せる */
.rb { display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 22px 0 0; padding: 10px 20px 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 28px -14px rgba(2, 16, 50, .7); color: #fff; }
.rb-chip { position: relative; display: grid; place-items: center; height: 58px; padding: 4px 12px; border-radius: 12px; background: #fff; flex: none; }
.rb-chip img { height: 100%; width: auto; max-width: 150px; object-fit: contain; display: block; }
.rb-new { padding: 2px 8px; }
.rb-new img { height: 54px; }
.rb-arrow { position: relative; display: block; width: 52px; height: 2px; background: rgba(255, 255, 255, .35); flex: none; border-radius: 2px; }
.rb-arrow i { position: absolute; inset: 0; background: linear-gradient(90deg, #f6c500, #ffe27a); border-radius: 2px; transform-origin: left; transform: scaleX(0); animation: rb-line .9s .5s cubic-bezier(.3, .7, .2, 1) forwards; }
.rb-arrow::after { content: ''; position: absolute; right: -1px; top: -4px; width: 9px; height: 9px; border-top: 2px solid #f6c500; border-right: 2px solid #f6c500; transform: rotate(45deg); opacity: 0; animation: rb-fade .3s 1.3s forwards; }
.rb-old { animation: rb-old 1.4s .2s cubic-bezier(.3, .7, .2, 1) both; }
.rb-new { opacity: 0; transform: scale(.6); animation: rb-born 1s 1.2s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.rb-new::before { content: ''; position: absolute; inset: -2px; border-radius: 14px; border: 2px solid #f6c500; opacity: 0; animation: rb-ring 1.5s 1.4s ease-out forwards; }
.rb-text { margin: 0 0 0 4px; display: grid; gap: 2px; line-height: 1.4; opacity: 0; animation: rb-fade .6s 1.9s forwards; }
.rb-text small { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #ffd84a; }
.rb-text b { font-size: 16px; font-weight: 900; text-shadow: 0 1px 8px rgba(2, 16, 50, .6); }
@keyframes rb-line { to { transform: scaleX(1); } }
@keyframes rb-fade { to { opacity: 1; } }
@keyframes rb-old { 0% { opacity: 0; transform: translateX(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes rb-born { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes rb-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@media (max-width: 760px) { .rb { flex-wrap: wrap; gap: 10px 10px; padding: 10px 12px; margin-top: 16px; } .rb-text { flex: 1 1 100%; margin: 2px 0 0; } .rb-chip { height: 50px; } .rb-new img { height: 46px; } .rb-arrow { width: 36px; } }
@media (max-width: 400px) { .rb-chip img { max-width: 118px; } .rb-text b { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .rb-old, .rb-new, .rb-text, .rb-arrow i, .rb-arrow::after { animation: none !important; opacity: 1 !important; transform: none !important; } .rb-new::before { display: none; } }
.rb-chip { height: 60px; overflow: hidden; }
.rb-old img { height: 46px; width: auto; max-width: none; }
.rb-new { padding: 0; width: 68px; }
.rb-new img { height: 60px; width: 68px; max-width: none; object-fit: cover; transform: scale(1.45); }
.rb-new::before { inset: 0; border-radius: 12px; }
@media (max-width: 760px) { .rb-chip { height: 52px; } .rb-old img { height: 40px; } .rb-new { width: 60px; } .rb-new img { height: 52px; width: 60px; } }
@media (max-width: 400px) { .rb-old img { height: 36px; } .rb-chip { padding: 4px 10px; } }
.rb-new img { transform: scale(1.18); }

/* ファーストビューの切り替え演出：水建 → 斜めの色面が走る → ジャパンテクニカル。最後に通常のトップへ（最初の1回だけ再生。クリックで飛ばせる） */
.hero { position: relative; }
.rbx { position: absolute; inset: 0; z-index: 40; overflow: hidden; cursor: pointer; animation: rbx-out .8s 5s cubic-bezier(.7, 0, .2, 1) forwards; }
.rbx.rbx-skip { display: none; }
.rbx-p { position: absolute; inset: 0; display: grid; place-items: center; }
.rbx-p1 { background: #fff; }
.rbx-old { text-align: center; opacity: 0; animation: rbx-in .8s .15s cubic-bezier(.2, .8, .2, 1) forwards, rbx-fade-out .4s 1.5s forwards; }
.rbx-old img { height: clamp(64px, 11vw, 120px); width: auto; display: block; margin: 0 auto; }
.rbx-old p { margin: 14px 0 0; font-size: clamp(12px, 1.3vw, 16px); font-weight: 700; letter-spacing: .14em; color: #5a6f93; }
.rbx-gold, .rbx-green, .rbx-p2 { clip-path: polygon(0 0, 0 0, -26% 100%, -26% 100%); }
.rbx-gold { background: #f6c500; animation: rbx-wipe .9s 1.5s cubic-bezier(.65, 0, .2, 1) forwards; }
.rbx-green { background: #38a437; animation: rbx-wipe .9s 1.62s cubic-bezier(.65, 0, .2, 1) forwards; }
.rbx-p2 { background: linear-gradient(120deg, #0a2f73 0, #0d4aa8 55%, #1a63c8 100%); animation: rbx-wipe .9s 1.76s cubic-bezier(.65, 0, .2, 1) forwards; }
.rbx-new { color: #fff; text-align: center; padding: 0 16px; }
.rbx-globe { position: relative; display: block; width: clamp(110px, 17vw, 190px); height: clamp(110px, 17vw, 190px); margin: 0 auto 18px; border-radius: 22px; background: #fff; overflow: hidden; opacity: 0; transform: scale(.4) rotate(-12deg); animation: rbx-born 1s 2.4s cubic-bezier(.3, 1.5, .5, 1) forwards; box-shadow: 0 0 0 0 rgba(246, 197, 0, .8); }
.rbx-globe img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); display: block; }
.rbx-globe::after { content: ''; position: absolute; inset: 0; border-radius: 22px; border: 3px solid #f6c500; opacity: 0; animation: rbx-ring 1.4s 2.8s ease-out forwards; }
.rbx-d { margin: 0; font-size: clamp(13px, 1.6vw, 20px); font-weight: 900; letter-spacing: .2em; color: #ffd84a; opacity: 0; animation: rbx-up .6s 3s forwards; }
.rbx-t { margin: 8px 0 0; font-size: clamp(20px, 3.4vw, 40px); font-weight: 900; line-height: 1.4; text-shadow: 0 2px 14px rgba(2, 16, 50, .6); opacity: 0; animation: rbx-up .7s 3.2s forwards; }
@keyframes rbx-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes rbx-fade-out { to { opacity: 0; transform: scale(1.06); } }
@keyframes rbx-wipe { to { clip-path: polygon(0 0, 140% 0, 114% 100%, 0 100%); } }
@keyframes rbx-born { to { opacity: 1; transform: none; } }
@keyframes rbx-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes rbx-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes rbx-out { to { transform: translateX(104%); visibility: hidden; } }
/* 演出のあと、小さなロゴの帯が現れる */
.hero .rb-old { animation-delay: 5.2s; } .hero .rb-arrow i { animation-delay: 5.5s; } .hero .rb-arrow::after { animation-delay: 6.3s; } .hero .rb-new { animation-delay: 6.2s; } .hero .rb-new::before { animation-delay: 6.4s; } .hero .rb-text { animation-delay: 6.8s; }
@media (prefers-reduced-motion: reduce) { .rbx { display: none; } }

/* 写真が1枚だけの記事：横いっぱいに広げず、大きめの1枚として見せる */
.nl-photos:has(> figure:only-child) { grid-template-columns: minmax(0, 680px); }

/* ============ トップのファーストビュー（REBORN 版）：水建 → ジャパンテクニカル ============ */
/* 本文側。背景のスライド写真・ヘッダー・2つのボタンは、そのまま */
.hero--blur { min-height: 700px; }
.hero--blur > .wrap.rvw { position: relative; z-index: 6; display: flex; align-items: center; min-height: 700px; padding-top: 34px; padding-bottom: 70px; }
.rv-copy { max-width: 640px; color: #fff; }
.rv-date { margin: 0; font: 700 clamp(34px, 3.6vw, 52px)/1 'Jost', Arial, sans-serif; letter-spacing: -.04em; text-shadow: 0 2px 16px rgba(2, 14, 40, .5); }
.rv-date span { display: inline-block; margin-left: 16px; font: 700 13px/1 'Noto Sans JP', sans-serif; letter-spacing: .14em; color: #ffd84a; vertical-align: middle; }
.rv-h1 { margin: 16px 0 0; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.32; letter-spacing: -.04em; font-weight: 700; text-shadow: 0 3px 24px rgba(0, 19, 49, .5); animation: none; }
.rv-name { position: relative; display: inline-block; }
.rv-name::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; background: #f6c500; z-index: -1; transform-origin: left; transform: scaleX(0); animation: rv-line 1.2s 5.9s cubic-bezier(.16, 1, .3, 1) forwards; }
.rv-lead { margin: 18px 0 0; font-size: 15px; line-height: 1.95; color: #eaf3ff; text-shadow: 0 1px 10px rgba(2, 14, 40, .55); }
.rv-lead span { display: block; }
.rv-copy .cta { margin: 22px 0 0; }
.rv-story { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .28); }
.rv-label { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; color: #d6e6f7; }
.rv-line { margin: 0; font-size: 12px; line-height: 1.9; color: #c4dbf2; }
.rv-brand { display: flex; align-items: center; gap: 16px; flex: none; }
.rv-globe { display: block; width: 84px; flex: none; filter: drop-shadow(0 6px 18px rgba(0, 19, 44, .35)); }
.rv-globe img { width: 100%; height: auto; display: block; }
.rv-type { margin: 0; font: 900 clamp(20px, 2.1vw, 29px)/1.06 'Jost', Arial, sans-serif; letter-spacing: -.02em; white-space: nowrap; }
.rv-type small { display: block; margin-top: 8px; font: 700 10px 'Noto Sans JP', sans-serif; letter-spacing: .1em; color: #d1e2f1; }
.rv-foot { margin: 16px 0 0; font-size: 11px; letter-spacing: .12em; color: #b9d0e6; }
@keyframes rv-line { to { transform: scaleX(1); } }
/* 本文は、演出が終わってから現れる（スキップしたらすぐ表示） */
.hero .rv-copy { opacity: 0; transform: scale(1.03); animation: rv-in 1.2s 5.7s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes rv-in { to { opacity: 1; transform: none; } }
.hero:has(.rx.rx-skip) .rv-copy { animation: none; opacity: 1; transform: none; }
.hero:has(.rx.rx-skip) .rv-name::after { animation: none; transform: scaleX(1); }

/* 演出：集まって、放たれて、生まれ変わる */
.hero .rx { position: absolute; inset: 0; z-index: 40; overflow: hidden; cursor: pointer; color: #fff; background: radial-gradient(ellipse at 50% 45%, #10477e 0%, #042958 42%, #01152e 100%); animation: rx-out 6.4s linear forwards; }
.hero .rx.rx-skip { display: none; }
.rx-top { position: absolute; z-index: 7; top: 34px; left: 6%; right: 6%; display: flex; align-items: center; justify-content: space-between; color: #bad3e8; }
.rx-top p { margin: 0; font: 700 11px Arial; letter-spacing: .24em; }
.rx-top span { font: 22px Arial; letter-spacing: .08em; }
.rx-word { position: absolute; left: 0; right: 0; top: 45%; margin-top: -110px; text-align: center; font: 900 clamp(110px, 20.5vw, 320px)/.9 Arial; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(201, 230, 255, .22); z-index: 1; pointer-events: none; animation: rx-word 6s cubic-bezier(.16, 1, .3, 1) both; white-space: nowrap; }
.rx-rings { position: absolute; left: 50%; top: 45%; width: 340px; height: 340px; margin: -170px 0 0 -170px; z-index: 1; pointer-events: none; }
.rx-rings i { position: absolute; inset: 0; border: 1px solid rgba(143, 213, 255, .7); border-radius: 50%; box-shadow: 0 0 24px rgba(20, 143, 213, .2), inset 0 0 24px rgba(20, 143, 213, .1); animation: rx-ring 4.8s cubic-bezier(.24, .8, .24, 1) both; }
.rx-rings i:nth-child(2) { animation-delay: .18s; } .rx-rings i:nth-child(3) { animation-delay: .36s; } .rx-rings i:nth-child(4) { animation-delay: .54s; border-color: rgba(189, 221, 244, .6); }
.rx-release { position: absolute; left: 50%; top: 45%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; z-index: 2; pointer-events: none; background: radial-gradient(circle, rgba(238, 250, 255, .8) 0%, rgba(168, 223, 255, .6) 20%, rgba(34, 140, 213, .3) 45%, transparent 72%); animation: rx-release 1.9s 2.15s cubic-bezier(.16, 1, .3, 1) both; }
.rx-beam { position: absolute; left: -10%; top: 45%; width: 120%; height: 1px; background: linear-gradient(90deg, transparent, rgba(151, 216, 255, .55), #fff, rgba(151, 216, 255, .55), transparent); z-index: 2; pointer-events: none; box-shadow: 0 0 14px #76c3ff; animation: rx-beam 4.6s cubic-bezier(.16, 1, .3, 1) both; }
.rx-center { position: absolute; left: 50%; top: 45%; width: 600px; height: 440px; transform: translate(-50%, -50%); z-index: 3; }
.rx-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #b9dfff; stroke-width: 1.6; pointer-events: none; animation: rx-wire 5.1s cubic-bezier(.16, 1, .3, 1) both; }
.rx-old, .rx-new { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.rx-old { z-index: 2; animation: rx-old 3.5s cubic-bezier(.42, 0, .2, 1) both; }
.rx-lock { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; line-height: 1; filter: drop-shadow(0 10px 28px rgba(0, 11, 32, .5)); }
.rx-sym { display: block; width: 130px; height: 105px; max-width: none; object-fit: contain; flex: none; }
.rx-name { font-size: 112px; font-weight: 700; letter-spacing: .015em; line-height: 1.03; }
.rx-name small { display: block; font-size: 18px; letter-spacing: .25em; margin: 0 0 12px 4px; font-weight: 500; }
.rx-new { z-index: 3; animation: rx-new 5.25s cubic-bezier(.16, 1, .3, 1) both; }
.rx-new img { width: 270px; height: auto; filter: drop-shadow(0 0 35px rgba(169, 223, 255, .35)); }
.rx-cap { position: absolute; left: 20px; right: 20px; top: calc(45% + 190px); text-align: center; z-index: 5; }
.rx-before { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: .13em; animation: rx-before 3.2s cubic-bezier(.16, 1, .3, 1) both; }
.rx-after { position: absolute; left: 0; right: 0; top: 0; animation: rx-after 6.3s cubic-bezier(.16, 1, .3, 1) both; }
.rx-after p { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: .1em; }
.rx-after small { display: block; margin-top: 14px; font-size: 12px; letter-spacing: .09em; color: #bdd3e9; }
.rx-origin { position: absolute; z-index: 7; left: 6%; bottom: 30px; font-size: 11px; letter-spacing: .08em; color: #d6e7f5; }
.rx-origin span { font-size: 10px; color: #a3bfd8; margin-left: 8px; }
.rx-skip { position: absolute; z-index: 7; right: 6%; bottom: 24px; border: 1px solid rgba(146, 179, 208, .5); color: #d9e9f6; padding: 10px 15px; font-size: 11px; background: transparent; cursor: pointer; font-family: inherit; }
.rx-skip:hover { background: rgba(255, 255, 255, .1); }
@keyframes rx-old { 0% { opacity: 0; transform: scale(1.5); filter: blur(5px); } 15% { opacity: 1; transform: scale(1); filter: blur(0); } 42% { opacity: 1; transform: scale(1); } 64% { opacity: 1; transform: scale(.91); } 84%, 100% { opacity: 0; transform: scale(.2); filter: blur(3px); } }
@keyframes rx-ring { 0% { opacity: 0; transform: scale(2.5); } 15% { opacity: .35; } 40% { opacity: .9; transform: scale(.64); } 48% { opacity: 1; transform: scale(.62); } 65% { opacity: .75; transform: scale(2.7); } 100% { opacity: 0; transform: scale(5.5); } }
@keyframes rx-release { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: .8; transform: scale(1.2); } 55% { opacity: .42; transform: scale(5); } 100% { opacity: 0; transform: scale(10); } }
@keyframes rx-new { 0%, 47% { opacity: 0; transform: scale(.15) rotate(-14deg); } 58% { opacity: 1; transform: scale(1.12) rotate(0); } 73% { opacity: 1; transform: scale(.98); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rx-wire { 0%, 30% { opacity: 0; transform: scale(2.4); } 43% { opacity: .4; transform: scale(.75); } 65% { opacity: .65; transform: scale(1.16); } 100% { opacity: .1; transform: scale(1.3); } }
@keyframes rx-word { 0%, 43% { opacity: 0; transform: scale(1.25); letter-spacing: .08em; } 65%, 87% { opacity: 1; transform: scale(1); letter-spacing: -.07em; } 100% { opacity: 0; transform: scale(1.03); } }
@keyframes rx-beam { 0%, 40% { opacity: 0; transform: scaleX(.1); } 49% { opacity: .8; transform: scaleX(.55); } 65% { opacity: .3; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.1); } }
@keyframes rx-before { 0% { opacity: 0; transform: translateY(20px); } 25%, 65% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes rx-after { 0%, 48% { opacity: 0; transform: translateY(15px); } 65%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes rx-out { 0%, 79% { opacity: 1; visibility: visible; clip-path: circle(150% at 50% 45%); } 100% { opacity: 0; visibility: hidden; clip-path: circle(0% at 50% 45%); } }
@media (prefers-reduced-motion: reduce) { .hero .rx { display: none; } .hero .rv-copy { animation: none; opacity: 1; transform: none; } .rv-name::after { animation: none; transform: scaleX(1); } }

/* 狭い画面 */
@media (max-width: 1000px) { .hero--blur, .hero--blur > .wrap.rvw { min-height: 720px; } .rv-story { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .hero--blur, .hero--blur > .wrap.rvw { min-height: 800px; }
  .hero--blur > .wrap.rvw { padding-top: 26px; padding-bottom: 64px; align-items: flex-start; }
  .rv-date { font-size: 34px; } .rv-date span { margin-left: 12px; font-size: 11px; }
  .rv-h1 { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.45; letter-spacing: -.05em; margin-top: 12px; }
  .rv-name { display: block; white-space: nowrap; }
  .rv-lead { font-size: 12.5px; line-height: 2; margin-top: 14px; }
  .rv-story { margin-top: 22px; padding-top: 18px; gap: 14px; }
  .rv-globe { width: 70px; } .rv-type { font-size: 22px; } .rv-type small { font-size: 9px; }
  .rv-foot { font-size: 10px; letter-spacing: .07em; }
  .rx-top { top: 24px; display: block; } .rx-top span { display: block; font-size: 20px; margin-top: 14px; }
  .rx-center { width: 440px; height: 323px; top: 44%; }
  .rx-sym { width: 86px; height: 70px; } .rx-name { font-size: 74px; } .rx-name small { font-size: 13px; margin-bottom: 9px; } .rx-lock { gap: 12px; }
  .rx-new img { width: 215px; }
  .rx-rings { width: 260px; height: 260px; margin: -130px 0 0 -130px; top: 44%; } .rx-release, .rx-beam { top: 44%; }
  .rx-word { font-size: 23.5vw; top: 44%; margin-top: -38px; -webkit-text-stroke: 1px rgba(201, 230, 255, .33); }
  .rx-cap { top: calc(44% + 150px); } .rx-before, .rx-after p { font-size: 19px; letter-spacing: .08em; } .rx-after small { font-size: 10px; margin-top: 12px; }
  .rx-origin { left: 7%; bottom: 62px; font-size: 10px; } .rx-origin span { display: block; margin: 8px 0 0; font-size: 9px; }
  .rx-skip { right: 7%; bottom: 20px; }
}
@media (max-width: 400px) { .rx-sym { width: 74px; height: 60px; } .rx-name { font-size: 64px; } .rx-new img { width: 190px; } .rv-type { font-size: 20px; } }

/* REBORN 版：高さは内容に合わせる（旧ヒーローの固定高さを打ち消す）／地球儀ロゴは円形に切り抜く */
.hero.hero--b.hero--blur { height: auto !important; min-height: 640px; }
.hero--blur > .wrap.rvw { min-height: 640px; }
.rv-globe img, .rx-new img { clip-path: ellipse(50% 50% at 50% 50%); }
@media (max-width: 1000px) { .hero.hero--b.hero--blur, .hero--blur > .wrap.rvw { min-height: 700px; } }
@media (max-width: 760px) { .hero.hero--b.hero--blur, .hero--blur > .wrap.rvw { min-height: 800px; } }
/* スマホ・タブレット：文字を、写真の下の青い面の上に置いて読みやすくする */
@media (max-width: 1000px) {
  .hero--blur > .wrap.rvw { align-items: flex-end; }
  .hero--blur > .wrap.rvw::before { content: ''; position: absolute; left: -100vw; right: -100vw; top: 0; bottom: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 32, 80, 0) 0, rgba(5, 32, 80, .55) 22%, rgba(5, 32, 80, .88) 48%, rgba(5, 32, 80, .94) 100%); pointer-events: none; }
}
@media (max-width: 760px) { .rv-h1 { font-size: clamp(24px, calc((100vw - 38px) / 11.4), 44px); } }
@media (max-width: 760px) { .hero .rvw .rv-h1 { font-size: clamp(24px, calc((100vw - 38px) / 11.4), 44px) !important; letter-spacing: -.045em !important; line-height: 1.42 !important; } .rv-copy { min-width: 0; max-width: 100%; } }

/* ============ REBORN 版 v2：見本のデザインに合わせた配置（右上に日付、円形の線、下段に地球儀） ============ */
.hero.hero--b.hero--blur { height: auto !important; min-height: 700px; }
.rv-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(3, 28, 66, .96) 0%, rgba(6, 43, 96, .9) 33%, rgba(6, 43, 96, .62) 65%, rgba(6, 43, 96, .2) 100%), linear-gradient(0deg, rgba(3, 30, 72, .85) 0%, transparent 45%); }
/* 円形の線：中心から広がる */
.rv-waves { position: absolute; z-index: 5; right: -225px; top: -145px; width: 880px; height: 880px; pointer-events: none; transform: rotate(-22deg); }
.rv-waves i { position: absolute; inset: 0; border: 1px solid rgba(184, 217, 250, .28); border-radius: 50%; opacity: 0; transform: scale(.4); animation: rv-ring 2.6s cubic-bezier(.16, 1, .3, 1) forwards; }
.rv-waves i:nth-child(1) { animation-delay: 6s; } .rv-waves i:nth-child(2) { inset: 65px; animation-delay: 6.2s; } .rv-waves i:nth-child(3) { inset: 130px; animation-delay: 6.4s; } .rv-waves i:nth-child(4) { inset: 195px; animation-delay: 6.6s; } .rv-waves i:nth-child(5) { inset: 260px; animation-delay: 6.8s; }
.rv-waves b { position: absolute; inset: 125px; border-radius: 50%; border-top: 2px solid rgba(245, 205, 45, .7); border-right: 1px solid rgba(245, 205, 45, .3); opacity: 0; animation: rv-ring 2.6s 7s cubic-bezier(.16, 1, .3, 1) forwards, rv-spin 60s 9.6s linear infinite; }
@keyframes rv-ring { to { opacity: 1; transform: scale(1); } }
@keyframes rv-spin { from { transform: rotate(15deg); } to { transform: rotate(375deg); } }
.hero:has(.rx.rx-skip) .rv-waves i, .hero:has(.rx.rx-skip) .rv-waves b { animation-delay: 0s !important; }
.hero:has(.rx.rx-skip) .rv-waves b { animation: rv-ring 2.2s cubic-bezier(.16, 1, .3, 1) forwards, rv-spin 60s 2.2s linear infinite; }

/* 本文：見本どおり、左に見出し・導入文・ボタン、右上に日付、下段に地球儀 */
.hero--blur > .rvw { position: relative; z-index: 6; align-self: stretch; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; min-height: 700px; padding: 40px 6% 30px; max-width: none; margin: 0; }
.hero--blur > .rvw::before { display: none !important; }
.rv-date { position: absolute; right: 6%; top: 38px; margin: 0; text-align: right; font: 700 clamp(36px, 4.3vw, 62px)/1 'Jost', 'Noto Sans JP', sans-serif; letter-spacing: -.055em; color: #fff; text-shadow: 0 2px 16px rgba(2, 14, 40, .45); }
.rv-date span { display: block; margin: 9px 0 0; font: 500 11px 'Noto Sans JP', sans-serif; letter-spacing: .15em; color: #cbdfed; }
.rv-copy { max-width: 900px; margin-top: 68px; position: relative; z-index: 1; color: #fff; }
.rv-h1 { margin: 0; font-size: clamp(39px, 5.15vw, 74px); line-height: 1.34; letter-spacing: -.055em; font-weight: 700; text-shadow: 0 3px 24px rgba(0, 19, 49, .2); }
.rv-lead { margin: 21px 0 0; line-height: 2; font-size: 15px; color: #dfebf8; text-shadow: none; }
.rv-copy .cta { margin: 26px 0 0; }
.rv-story { display: grid; grid-template-columns: 280px minmax(60px, 1fr) minmax(365px, 480px); align-items: center; gap: 28px; margin-top: auto; padding-top: 37px; max-width: 1180px; width: 100%; border: 0; }
.rv-origin { grid-column: 1; }
.rv-brand { grid-column: 3; display: flex; align-items: center; gap: 21px; }
.rv-label { margin: 0 0 14px; font-size: 11px; letter-spacing: .08em; color: #cfdfef; line-height: 1.8; }
.rv-line { margin: 0; font-size: 11px; line-height: 1.9; letter-spacing: .06em; color: #cfdfef; }
.rv-globe { width: 122px; }
.rv-type { font: 900 clamp(24px, 2.8vw, 39px)/1.06 'Jost', 'Noto Sans JP', sans-serif; letter-spacing: -.035em; }
.rv-type small { margin-top: 11px; font: 500 10px 'Noto Sans JP', sans-serif; letter-spacing: .1em; color: #d1e2f1; }
.rv-foot { margin: 27px 0 0; padding-top: 22px; border-top: 1px solid rgba(192, 212, 235, .3); max-width: 1180px; width: 100%; font-size: 10px; letter-spacing: .12em; color: #b2cae1; }
.rv-scroll { position: absolute; right: 22px; top: 42%; writing-mode: vertical-rl; font: 9px 'Jost', Arial, sans-serif; letter-spacing: .3em; color: #abc6e1; }
/* 演出が終わってから現れる（本文の枠ごと） */
.hero .rv-copy { opacity: 1; transform: none; animation: none; }
.hero .rvw { opacity: 0; animation: rv-in 1.25s 5.4s cubic-bezier(.16, 1, .3, 1) forwards; }
.hero:has(.rx.rx-skip) .rvw { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero .rvw { animation: none; opacity: 1; } .rv-waves i, .rv-waves b { animation: none; opacity: 1; transform: none; } }

@media (max-width: 1050px) { .rv-story { grid-template-columns: 240px minmax(40px, 1fr) minmax(310px, 390px); gap: 16px; } .rv-globe { width: 100px; } .rv-type { font-size: 30px; } .hero.hero--b.hero--blur, .hero--blur > .rvw { min-height: 720px; } }
@media (max-width: 760px) {
  .hero.hero--b.hero--blur, .hero--blur > .rvw { min-height: 800px; }
  .hero--blur > .rvw { padding: 30px 7% 28px; }
  .rv-date { position: static; text-align: left; margin-top: 4px; font-size: 36px; }
  .rv-date span { display: inline; margin-left: 15px; font-size: 9px; letter-spacing: .1em; }
  .rv-copy { margin-top: 26px; }
  .rv-lead { font-size: 12.5px; line-height: 2.1; margin-top: 20px; }
  .rv-copy .cta { margin-top: 22px; }
  .rv-story { grid-template-columns: 1fr; gap: 18px; margin-top: 30px; padding-top: 0; }
  .rv-origin, .rv-brand { grid-column: 1; }
  .rv-label { margin-bottom: 8px; font-size: 10px; letter-spacing: .02em; }
  .rv-brand { gap: 17px; }
  .rv-globe { width: 94px; } .rv-type { font-size: 28px; } .rv-type small { font-size: 8px; letter-spacing: .07em; margin-top: 8px; }
  .rv-foot { margin-top: 24px; padding-top: 16px; font-size: 9px; letter-spacing: .07em; line-height: 1.8; }
  .rv-scroll { display: none; }
  .rv-waves { width: 620px; height: 620px; right: -350px; top: -100px; }
  .rv-waves i:nth-child(2) { inset: 45px; } .rv-waves i:nth-child(3) { inset: 90px; } .rv-waves i:nth-child(4) { inset: 135px; } .rv-waves i:nth-child(5) { inset: 180px; } .rv-waves b { inset: 90px; }
  .rv-shade { background: linear-gradient(90deg, rgba(3, 28, 66, .92) 0%, rgba(6, 43, 96, .78) 65%, rgba(6, 43, 96, .55) 100%), linear-gradient(0deg, rgba(3, 30, 72, .9) 0%, transparent 70%); }
}
@media (max-width: 400px) { .rv-type { font-size: 25px; } .rv-globe { width: 82px; } }

.rv-story { grid-template-columns: minmax(0, 1fr); }
.hero--blur > .rvw { padding-bottom: 70px; }
@media (max-width: 1050px) { .hero.hero--b.hero--blur, .hero--blur > .rvw { min-height: 660px; } }
@media (max-width: 760px) { .hero.hero--b.hero--blur, .hero--blur > .rvw { min-height: 680px; } .hero--blur > .rvw { padding-bottom: 64px; } }
/* 左右の余白は、ヘッダー・他の見出しと同じ位置にそろえる（日付も内側の端にそろえる） */
.hero--blur > .rvw { --rv-px: max(60px, calc((100% - 1240px) / 2 + 60px)); padding-left: var(--rv-px); padding-right: var(--rv-px); }
.hero--blur .rv-date { right: max(60px, calc((100vw - 15px - 1240px) / 2 + 60px)); }
.hero--blur .rv-scroll { right: max(14px, calc((100vw - 15px - 1240px) / 2 + 20px)); }
@media (max-width: 1000px) { .hero--blur > .rvw { --rv-px: 24px; } .hero--blur .rv-date { right: 24px; } }
@media (max-width: 760px) { .hero--blur > .rvw { padding-left: 24px; padding-right: 24px; } .hero--blur .rv-date { right: auto; } }
@media (max-width: 560px) { .hero--blur > .rvw { padding-left: 18px; padding-right: 18px; } }

/* スマホ：下の余白を詰めて、縦を短くする */
@media (max-width: 760px) {
  .hero.hero--b.hero--blur, .hero--blur > .rvw { min-height: 0; }
  .hero--blur > .rvw { padding-bottom: 76px; }
  .rv-story { margin-top: 26px; }
}
/* 紺の色面を、ほんの少しだけ薄くして、写真をわずかに見せる */
.rv-shade { background: linear-gradient(90deg, rgba(3, 28, 66, .9) 0%, rgba(6, 43, 96, .82) 33%, rgba(6, 43, 96, .54) 65%, rgba(6, 43, 96, .14) 100%), linear-gradient(0deg, rgba(3, 30, 72, .76) 0%, transparent 45%); }
@media (max-width: 760px) { .rv-shade { background: linear-gradient(90deg, rgba(3, 28, 66, .85) 0%, rgba(6, 43, 96, .7) 65%, rgba(6, 43, 96, .46) 100%), linear-gradient(0deg, rgba(3, 30, 72, .82) 0%, transparent 70%); } }

/* 下段（歩み・地球儀・結びの一文）を外したので、PCの高さを詰める */
.hero.hero--b.hero--blur, .hero--blur > .rvw { min-height: 540px; }
.hero--blur > .rvw { padding-bottom: 80px; }
.rv-copy { margin-top: 72px; }
@media (max-width: 1050px) { .hero.hero--b.hero--blur, .hero--blur > .rvw { min-height: 0; } }
@media (max-width: 760px) { .hero--blur > .rvw { padding-bottom: 76px; } .rv-copy { margin-top: 26px; } }

/* LINE：連絡待ちのため「準備中」にして、押しても移動しない */
.btn--soon, .ct-soon { cursor: default; pointer-events: none; opacity: .78; }
.btn--soon em { font-style: normal; font-size: .78em; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; margin-left: 4px; }
.ct-qr-soon { width: min(180px, 100%); aspect-ratio: 1; margin: 0 auto 10px; display: grid; place-items: center; border: 2px dashed #b8c7dc; border-radius: 12px; background: #f6f9fd; }
.ct-qr-soon span { font: 700 34px 'Jost', sans-serif; letter-spacing: .1em; color: #b0bfd4; }

/* 会社概要の補足行／沿革の「これから」の1行 */
.table .dd-sub { display: block; margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--mute); }
.history li.history-next::before { background: #f6c500; border-color: #f6c500; }
.history li.history-next span { font-weight: 900; color: var(--navy); }
/* 2026年（9月現在）の棒：年の表記の脇の注記 */
.wb .yr .yr-note { font-style: normal; font-size: .8em; margin-left: 1px; color: #b37f00; }
/* 最高値の棒が右端になったので、月桂樹の飾りがカードの外へ出ないように、少し左へ寄せる */
.wb--peak .crown { margin-left: -34px; }

/* 最高値の飾り：少しコンパクトにして、矢印の先と重ならないようにする */
.wb--peak .crown { margin-left: -22px; top: -96px; }
.wb--peak .crown .laurel { width: 26px; height: 62px; }
.wb--peak .crown b { font-size: 12px; line-height: 1.35; }
@media (max-width: 520px) { .wb--peak .crown { margin-left: -26px; top: -70px; } .wb--peak .crown .laurel { width: 15px; height: 36px; } .wb--peak .crown b { font-size: 8.5px; } }

/* 最高値の飾り：月桂樹なしで、「＼ 過去最高 ／」だけを添える */
.wb--peak .crown.crown--text { margin-left: 0; top: -64px; gap: 0; }
.wb--peak .crown--text b { font-size: 15px; font-weight: 900; letter-spacing: .08em; color: #9a6a00; padding: 0; white-space: nowrap; }
.wb--peak .crown--text b::before { content: '＼'; margin-right: 5px; font-weight: 500; }
.wb--peak .crown--text b::after { content: '／'; margin-left: 5px; font-weight: 500; }
@media (max-width: 520px) { .wb--peak .crown.crown--text { top: -48px; } .wb--peak .crown--text b { font-size: 11px; letter-spacing: .02em; } .wb--peak .crown--text b::before { margin-right: 2px; } .wb--peak .crown--text b::after { margin-left: 2px; } }
html[data-lang='en'] .wb--peak .crown.crown--text { margin-left: -26px; }
@media (max-width: 520px) { .wb--peak .crown.crown--text { margin-left: -12px; } html[data-lang='en'] .wb--peak .crown.crown--text { margin-left: -26px; } }
/* スマホ：「過去最高」の文字を、最高値の棒の右端にそろえて、右の余白を確保する */
@media (max-width: 520px) { .wb--peak .crown.crown--text { margin-left: -24px; } html[data-lang='en'] .wb--peak .crown.crown--text { margin-left: -40px; } }

/* スマホ：「過去最高」は、2025年の棒に被らないよう、最高値の棒の真上に縦書きで添える */
@media (max-width: 520px) {
  .wb--peak .crown.crown--text, html[data-lang='en'] .wb--peak .crown.crown--text { margin-left: 0; top: -100px; }
  .wb--peak .crown--text b { writing-mode: vertical-rl; text-orientation: upright; font-size: 12px; letter-spacing: .12em; line-height: 1; padding: 6px 0 0; border-top: 2px solid rgba(154, 106, 0, .55); }
  .wb--peak .crown--text b::before, .wb--peak .crown--text b::after { content: none; }
  html[data-lang='en'] .wb--peak .crown--text b { text-orientation: mixed; letter-spacing: .06em; }
}

@media (max-width: 520px) {
  html[data-lang='en'] .wb--peak .crown.crown--text { top: -76px; }
  html[data-lang='en'] .wb--peak .crown--text b { writing-mode: horizontal-tb; text-orientation: mixed; width: 40px; white-space: normal; text-align: center; font-size: 10.5px; line-height: 1.2; letter-spacing: .02em; padding: 5px 0 0; }
}

.ct-qr-img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* 「その結果」：導入の一行は、点なしで見出し風に */
.gf li.gf-lead { padding-left: 0; font-size: 14px; font-weight: 900; color: var(--navy); }
.gf li.gf-lead::before { display: none; }
/* 「協力企業との調和を図りながら…」：PCは1行。スマホ・タブレットは、自然に折り返す（文の途中で不自然に切れないよう、行の長さをそろえる） */
.pos-two span { display: inline; }
.pos-two { text-wrap: balance; }
@media (min-width: 1000px) { .pos-two, .pos-two span { white-space: nowrap; } }
@media (max-width: 999px) { .pos-two span { white-space: normal; } }
@media (max-width: 520px) { .pos-two { font-size: 14.5px; line-height: 1.85; } }
@media (min-width: 1000px) { html[data-lang='en'] .pos-two, html[data-lang='en'] .pos-two span { white-space: normal; } }
@media (max-width: 520px) { .pos-two { font-size: 13.5px; line-height: 1.9; } }
/* 「機械加工力を武器に、／成長する。」：どの画面幅でも2行（1行目が折り返さない大きさに、枠の幅から決める） */
.wide-l { container-type: inline-size; }
.wide-l h3 { font-size: min(44px, 8.4cqw); white-space: nowrap; letter-spacing: -.01em; }
html[data-lang='en'] .wide-l h3 { font-size: clamp(24px, 6cqw, 36px); white-space: normal; }
.wide-l h3 br.pc { display: inline; }
.wide-l h3 { font-size: min(44px, 8.4cqw); }
@media (max-width: 1000px) { .wide-l h3 { font-size: min(44px, 8.6cqw); } }
/* スマホ：オープニングの下部（中央の文言／左下の社名／右下のスキップ）が重ならないようにする */
@media (max-width: 760px) {
  .rx-origin span { display: none; }
  .rx-origin { bottom: 22px; left: 18px; }
  .rx-skip { bottom: 14px; right: 18px; padding: 8px 12px; }
  .rx-center { top: 38%; }
  .rx-rings, .rx-release, .rx-beam { top: 38%; }
  .rx-word { top: 38%; }
  .rx-cap { top: calc(38% + 132px); }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .rx-origin span { display: none; }
  .rx-center, .rx-rings, .rx-release, .rx-beam, .rx-word { top: 36%; }
  .rx-center { transform: translate(-50%, -50%) scale(.82); }
  .rx-cap { top: calc(36% + 140px); }
}

/* ポリシーページ：小見出し・段落・リンク（既存の配色・見出しの流儀に合わせる） */
.policy-page .pol-h { margin: 30px 0 8px; padding-left: 12px; border-left: 4px solid var(--yellow); font-size: 17px; font-weight: 900; color: var(--navy); line-height: 1.5; }
.policy-page .pol-p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--ink); }
.policy-page .pol-link { margin: 10px 0 0; }
.policy-page .pol-link a { font-weight: 700; font-size: 14px; color: var(--blue); border-bottom: 1px solid currentColor; }
.policy-page .pol-link a span { margin-left: 2px; }
.policy-page .points + .pol-p { margin-top: 12px; }
@media (max-width: 560px) { .policy-page .pol-h { font-size: 16px; } .policy-page .pol-p { font-size: 14px; } }