/* テーマ「白い研究所」（Social hearts株式会社）。正本 directions/socialhearts/03-future_white.png。
部品は正本と下層の絵（sub-service・sub-article）にあるものだけ：
白い地と淡い青灰の帯／小さな英字の見出し札／細い枠の白いカード／紺の丸いボタンと枠だけの丸いボタン／細い線のアイコン／角丸の写真。
余白は tokens.css の --space-* だけで書く。中身の列は .frame（--ds-frame）1つ。 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ds-paper); color: var(--ds-ink-soft); font-family: var(--ds-font-sans); font-size: 16px; line-height: 1.8; letter-spacing: .02em; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { color: var(--ds-ink); font-weight: 700; line-height: 1.45; letter-spacing: .03em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 12px 20px; background: var(--ds-white); }
:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 3px; }
/* ------------------------------------------------------------ 列・帯 */
.frame { width: 100%; max-width: var(--ds-frame); margin-inline: auto; padding-inline: var(--frame-pad); }
.frame--narrow { max-width: calc(880px + 2 * var(--frame-pad)); }
.band { padding-block: var(--space-section); }
.band--tint { background: var(--ds-tint); }
.split { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: var(--space-block); align-items: start; }
.two-col { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-block); align-items: start; }
/* ------------------------------------------------------------ 矢印・ボタン */
.arrow { position: relative; display: inline-block; width: 14px; height: 1.5px; background: currentColor; flex: none; transition: transform .16s; }
.arrow::after { content: ""; position: absolute; right: 0; top: -3.5px; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.chev { display: inline-block; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); flex: none; }
.chev-down { display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 52px; padding: 12px 30px; border-radius: var(--ds-radius-pill);
font-size: 15px; font-weight: 500; letter-spacing: .06em; text-decoration: none; white-space: nowrap; transition: background .16s, color .16s, border-color .16s; }
.btn--primary { background: var(--ds-primary); color: var(--ds-white); border: 1px solid var(--ds-primary); box-shadow: 0 8px 20px rgba(31, 50, 71, .18); }
.btn--primary:hover { background: var(--ds-primary-hover); }
.btn--line { background: var(--ds-white); color: var(--ds-ink); border: 1px solid #aebccb; }
.btn--line:hover { border-color: var(--ds-primary); }
.btn--sm { min-height: 44px; padding: 8px 22px; font-size: 14px; gap: 14px; }
.btn:hover .arrow, .text-link:hover .arrow { transform: translateX(4px); }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ds-ink); font-size: 14px; font-weight: 500; text-decoration: none;
border-bottom: 1px solid var(--ds-ink); }
.text-link .chev { width: 6px; height: 6px; }
.ico { display: block; flex: none; color: var(--ds-primary); }
/* ------------------------------------------------------------ 区画の見出し */
.sec-head { max-width: 48em; }
.sec-en { margin-bottom: 10px; color: var(--ds-en); font-family: var(--ds-font-en); font-size: 12px; font-weight: 500; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; }
.sec-title { font-size: 32px; line-height: 1.45; }
.sec-lead { margin-top: 20px; max-width: 48em; color: var(--ds-ink-soft); font-size: 16px; }
.sec-btn { margin-top: 32px; }
.sec-head > .text-link { margin-top: 24px; }
.sec-head--row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 32px; max-width: none; margin-bottom: var(--space-head); }
.sec-head--row .sec-en { flex-basis: 100%; }
.sec-head--row .sec-lead { margin-top: 0; font-size: 15px; }
.sec-head--center { margin: 0 auto var(--space-head); text-align: center; }
.two-col > .sec-head, .split > .sec-head { margin-bottom: 0; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: var(--space-head); }
.head-row .sec-head--row { margin-bottom: 0; }
.frame:not(.two-col):not(.split):not(.str-grid):not(.ai-grid):not(.ab-grid) > .sec-head { margin-bottom: var(--space-head); }
/* ------------------------------------------------------------ ヘッダー（ロゴは左、ナビと紺のボタンは右） */
.site-header { position: relative; z-index: 20; display: flex; align-items: center; gap: 40px; height: 76px; padding: 0 48px; background: rgba(255, 255, 255, .92);
border-bottom: 1px solid rgba(221, 229, 238, .7); }
.logo { display: inline-flex; align-items: baseline; gap: 2px; margin-right: auto; color: var(--ds-ink); text-decoration: none; white-space: nowrap; }
.logo-en { font-family: var(--ds-font-en); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.logo-ja { font-size: 14px; font-weight: 700; }
.nav { display: flex; gap: 36px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; }
.nav a[aria-current="page"], .nav a:hover { color: var(--ds-accent); }
.menu-button { display: none; }
.mobile-menu[hidden] { display: none; }
/* ------------------------------------------------------------ ファーストビュー */
.p-hero { position: relative; height: 780px; overflow: hidden; background: var(--ds-tint); }
.p-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.p-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(250, 251, 253, .96) 0%, rgba(250, 251, 253, .9) 34%, rgba(250, 251, 253, .35) 55%, rgba(250, 251, 253, 0) 68%); }
.p-hero-body { position: relative; z-index: 2; max-width: var(--ds-frame); height: 100%; margin-inline: auto; padding: 0 var(--frame-pad); display: flex; flex-direction: column; justify-content: center; }
.p-hero-title { font-size: 64px; line-height: 1.3; letter-spacing: .04em; }
.hero-line { display: block; }
.p-hero-lead { max-width: 34em; margin-top: 32px; color: var(--ds-ink-soft); font-size: 16px; }
.p-hero-actions { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 48px; }
.p-hero-actions .btn { min-width: 220px; }
.p-hero-scroll { position: absolute; z-index: 2; left: max(var(--frame-pad), calc((100% - var(--ds-frame)) / 2 + var(--frame-pad))); bottom: 32px; color: var(--ds-muted);
font-family: var(--ds-font-en); font-size: 11px; letter-spacing: .2em; }
/* ------------------------------------------------------------ 事業のカード（6枚が横一列） */
.svc-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.svc-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card);
box-shadow: var(--ds-shadow); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(28, 58, 96, .12); }
.svc-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ds-tint); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 22px; }
.svc-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; font-weight: 500; }
.svc-name { color: var(--ds-ink); font-size: 16px; line-height: 1.5; }
.svc-text { color: var(--ds-muted); font-size: 13px; line-height: 1.75; }
/* ------------------------------------------------------------ ご依頼の流れ（矢羽根の形の段） */
.fl-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fl-step { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 280px; padding: 28px 40px 32px 28px; background: var(--ds-white);
border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow);
clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.fl-step:last-child { clip-path: none; padding-right: 28px; }
.fl-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 14px; font-weight: 500; }
.fl-step .ico { margin: 6px 0 8px; }
.fl-title { color: var(--ds-ink); font-size: 17px; line-height: 1.5; }
.fl-text { color: var(--ds-muted); font-size: 14px; line-height: 1.75; }
/* ------------------------------------------------------------ 業種別（写真つきのカード3枚） */
.sol-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.sol-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card);
box-shadow: var(--ds-shadow); text-decoration: none; }
.sol-photo { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.sol-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sol-card:hover .sol-photo img { transform: scale(1.03); }
.sol-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 24px 20px; }
.sol-name { color: var(--ds-ink); font-size: 18px; }
.sol-text { color: var(--ds-muted); font-size: 14px; line-height: 1.75; }
.sol-more { display: inline-flex; align-items: center; gap: 10px; align-self: flex-end; margin-top: auto; padding-top: 8px; color: var(--ds-ink); font-size: 13px; font-weight: 500; }
/* ------------------------------------------------------------ AI でできること */
.ai-grid { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 3.3fr) minmax(0, 5.5fr); gap: var(--space-block); align-items: center; }
.ai-photo { align-self: stretch; min-height: 360px; overflow: hidden; border-radius: var(--ds-radius-card); }
.ai-photo img { width: 100%; height: 100%; object-fit: cover; }
.ai-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ai-tile { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 18px 20px; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); }
.ai-tx { display: flex; flex-direction: column; gap: 2px; }
.ai-name { color: var(--ds-ink); font-size: 15px; line-height: 1.5; }
.ai-text { color: var(--ds-muted); font-size: 13px; line-height: 1.7; }
/* ------------------------------------------------------------ 導入実績 */
.wk-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wk-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); }
.wk-photo { position: relative; display: block; aspect-ratio: 3 / 1; overflow: hidden; }
.wk-photo img { width: 100%; height: 100%; object-fit: cover; }
.wk-tag { position: absolute; left: 12px; top: 12px; padding: 4px 12px; background: var(--ds-white); border-radius: 4px; color: var(--ds-ink); font-size: 12px; font-weight: 500; line-height: 1.6; }
.wk-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px 20px; }
.wk-company { color: var(--ds-accent); font-size: 13px; font-weight: 500; }
.wk-title { font-size: 16px; line-height: 1.55; }
.wk-text { color: var(--ds-muted); font-size: 13px; line-height: 1.65; }
/* ------------------------------------------------------------ 強みの帯（縦線で区切った4つの大きな語） */
.p-strength { padding-block: var(--space-block); border-block: 1px solid var(--ds-line); background: var(--ds-white); } /* 正本では細い帯（data-pad="direction"）。狭い幅では区画の目盛りに戻す */
.str-grid { display: grid; grid-template-columns: minmax(0, 2.8fr) minmax(0, 9.2fr); gap: var(--space-block); align-items: center; }
.str-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.str-item { display: flex; flex-direction: column; gap: 6px; padding: 8px 20px; border-left: 1px solid var(--ds-line); }
.str-no { color: var(--ds-en); font-family: var(--ds-font-en); font-size: 12px; letter-spacing: .1em; }
.str-pre, .str-post { color: var(--ds-muted); font-size: 13px; line-height: 1.6; }
.str-big { color: var(--ds-ink); font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
/* ------------------------------------------------------------ 私たちについて */
.ab-grid { display: grid; grid-template-columns: minmax(0, 5.6fr) minmax(0, 3fr) minmax(0, 3.4fr); gap: var(--space-block); align-items: center; }
.ab-catch { margin-top: 16px; color: var(--ds-ink); font-size: 20px; font-weight: 700; line-height: 1.6; }
.ab-body { margin: 12px 0 24px; font-size: 15px; }
.ab-photo { align-self: stretch; min-height: 300px; overflow: hidden; border-radius: var(--ds-radius-card); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-facts { padding: 4px 24px; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); }
.ab-fact { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--ds-line); }
.ab-fact:last-child { border-bottom: 0; }
.ab-fact .ico { grid-row: span 2; margin-top: 2px; color: var(--ds-accent); }
.ab-fact dt { color: var(--ds-ink); font-size: 13px; font-weight: 700; }
.ab-fact dd { color: var(--ds-ink-soft); font-size: 13px; line-height: 1.7; }
/* ------------------------------------------------------------ 相談の帯（右に街の写真） */
.p-cta { position: relative; overflow: hidden; padding-block: var(--space-section); background: var(--ds-tint); }
.cta-bg { position: absolute; top: 0; right: 0; width: 62%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.p-cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ds-tint) 0%, var(--ds-tint) 38%, rgba(241, 246, 250, .7) 52%, rgba(241, 246, 250, 0) 70%); }
.cta-inner { position: relative; z-index: 2; }
.cta-title { font-size: 36px; }
.cta-text { max-width: 30em; margin-top: 20px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.cta-actions .btn { min-width: 260px; }
.cta-inner--row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-block); align-items: end; }
.cta-inner--row .cta-title { font-size: 30px; }
.cta-inner--row .cta-actions { margin-top: 0; }
/* ------------------------------------------------------------ フッター（ロゴ・1行のメニュー・著作権表記の1段） */
.site-footer { background: var(--ds-white); border-top: 1px solid var(--ds-line); }
.ft-inner { display: flex; align-items: center; gap: 32px; max-width: var(--ds-frame); margin-inline: auto; padding: 20px var(--frame-pad); }
.ft-inner .logo { margin-right: 0; }
.ft-inner .logo-en { font-size: 20px; }
.ft-inner .logo-ja { font-size: 12px; }
.ft-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; flex: 1; }
.ft-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ds-ink-soft); font-size: 13px; text-decoration: none; }
.ft-nav a:hover { color: var(--ds-accent); }
.ft-copy { color: var(--ds-muted); font-family: var(--ds-font-en); font-size: 12px; white-space: nowrap; }
/* =================================================================================================
下層
================================================================================================= */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; color: var(--ds-muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 12px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.crumbs a:hover { color: var(--ds-accent); }
/* 下層のファーストビュー（明るい写真の右、左に見出し） */
.p-page-hero { position: relative; overflow: hidden; background: var(--ds-tint); }
.ph-bg { position: absolute; top: 0; right: 0; width: 64%; height: 100%; object-fit: cover; }
.p-page-hero--photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ds-tint) 0%, var(--ds-tint) 36%, rgba(241, 246, 250, .75) 50%, rgba(241, 246, 250, 0) 68%); }
.ph-body { position: relative; z-index: 2; padding-block: 40px var(--space-section); }
.ph-body .crumbs { margin-bottom: 72px; }
.ph-no { margin-right: 12px; }
.ph-title { font-size: 44px; line-height: 1.35; }
.ph-title--news { font-size: 32px; }
.ph-lead { max-width: 30em; margin-top: 24px; font-size: 16px; }
.p-page-hero--news .ph-body { padding-bottom: var(--space-block); }
/* ページ内の目次・切り替え・分野（1行の帯） */
.p-anchor-nav, .p-service-switch, .p-column-filter, .p-tag-nav { background: var(--ds-white); border-bottom: 1px solid var(--ds-line); }
.p-anchor-nav ul, .p-service-switch ul, .p-column-filter ul, .p-tag-nav ul { display: flex; flex-wrap: wrap; gap: 8px 12px; padding-block: 20px; }
.p-anchor-nav a, .p-service-switch a, .p-column-filter a, .p-tag-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px; border: 1px solid var(--ds-line);
border-radius: var(--ds-radius-pill); background: var(--ds-white); color: var(--ds-ink); font-size: 14px; text-decoration: none; }
.p-anchor-nav a:hover, .p-service-switch a:hover, .p-column-filter a:hover, .p-tag-nav a:hover { border-color: var(--ds-primary); }
.p-service-switch a[aria-current], .p-column-filter a[aria-current], .p-tag-nav a[aria-current] { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-white); }
.sw-no { margin-right: 8px; font-family: var(--ds-font-en); font-size: 12px; color: var(--ds-accent); }
.p-service-switch a[aria-current] .sw-no { color: inherit; }
/* 導入の文 */
.intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-block); align-items: start; }
.intro-catch { font-size: 30px; }
.intro-body p + p { margin-top: 16px; }
.intro-body p { max-width: 42em; }
/* 写真と文 */
.ms-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-block); align-items: center; }
.ms-catch { margin-bottom: 24px; font-size: 30px; }
.ms-text p + p { margin-top: 16px; }
.ms-text p:not(.sec-en) { max-width: 40em; }
.ms-photo { overflow: hidden; border-radius: var(--ds-radius-card); aspect-ratio: 4 / 3; }
.ms-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 白いカードの共通 */
.pg-item, .pb-item, .cap-item, .st-item, .val-item, .ckg-card, .ig-card, .nt-box, .rep-card, .ci-card, .side-box, .pt-box, .p-points, .gl-group, .sm-group, .ts-body {
background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); }
/* 6つの領域 */
.pg-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.pg-item { display: flex; flex-direction: column; gap: 8px; padding: 28px; }
.pg-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; }
.pg-name { color: var(--ds-ink); font-size: 18px; }
.pg-text { color: var(--ds-muted); font-size: 14px; }
/* 事業の段組み */
.sr-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-block); align-items: center; scroll-margin-top: 24px; }
.sr-row + .sr-row { margin-top: var(--space-section); }
.sr-row--flip .sr-photo { order: 2; }
.sr-photo { overflow: hidden; border-radius: var(--ds-radius-card); aspect-ratio: 3 / 2; }
.sr-photo img { width: 100%; height: 100%; object-fit: cover; }
.sr-name { font-size: 28px; }
.sr-catch { margin-top: 12px; color: var(--ds-accent); font-size: 18px; font-weight: 500; }
.sr-lead { margin-top: 16px; max-width: 40em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.chips li { padding: 4px 14px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-white); color: var(--ds-ink-soft); font-size: 13px; }
/* 進め方（横並びの白いカード） */
.st-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.st-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 20px; }
.st-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.st-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; }
.st-title { color: var(--ds-ink); font-size: 16px; }
.st-text { color: var(--ds-muted); font-size: 13px; line-height: 1.7; }
/* こんなお悩み */
.pb-grid--photo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-gap); }
.pb-photo { overflow: hidden; border-radius: var(--ds-radius-card); min-height: 240px; }
.pb-photo img { width: 100%; height: 100%; object-fit: cover; }
.pb-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-gap); }
.pb-grid--photo .pb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pb-item { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; color: var(--ds-ink); font-size: 15px; font-weight: 500; line-height: 1.7; }
.pb-item .ico { color: var(--ds-accent); }
.pb-bridge { margin-top: var(--space-block); text-align: center; font-size: 17px; }
.pb-bridge strong { color: var(--ds-ink); }
/* できること */
.cap-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-gap); }
.cap-item { display: flex; flex-direction: column; gap: 8px; padding: 28px 24px 32px; }
.cap-item .ico { margin-bottom: 8px; }
.cap-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; }
.cap-title { color: var(--ds-ink); font-size: 17px; line-height: 1.5; }
.cap-text { color: var(--ds-muted); font-size: 14px; line-height: 1.75; }
/* 表（線で区切った行） */
.rows > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--ds-line); }
.rows > div:first-child { border-top: 1px solid var(--ds-line); }
.rows dt { color: var(--ds-ink); font-weight: 700; font-size: 15px; }
.rows dd { font-size: 15px; }
.note { margin-top: 20px; color: var(--ds-muted); font-size: 13px; max-width: 48em; }
.side-photo { margin-top: var(--space-block); overflow: hidden; border-radius: var(--ds-radius-card); aspect-ratio: 4 / 3; }
.side-photo img { width: 100%; height: 100%; object-fit: cover; }
.side-photo--wide { margin-top: 0; aspect-ratio: 3 / 2; }
/* ご相談のテーマ */
.kw-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-block); align-items: center; }
.kw-title { font-size: 22px; }
.kw-inner .chips { margin: 0; }
/* よくある質問 */
.faq-list { border-top: 1px solid var(--ds-line); }
.faq-item { border-bottom: 1px solid var(--ds-line); }
.faq-item summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 16px; min-height: 64px; padding: 14px 4px; cursor: pointer; list-style: none;
color: var(--ds-ink); font-size: 15px; font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 16px; font-weight: 600; }
.faq-toggle { position: relative; width: 14px; height: 14px; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: var(--ds-ink); }
.faq-toggle::after { transform: rotate(90deg); transition: transform .2s; }
.faq-item[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding: 0 40px 20px 4px; }
.faq-q--a { color: var(--ds-en); }
.faq-a p { font-size: 15px; }
/* コラムのカード */
.col-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.col-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card);
box-shadow: var(--ds-shadow); text-decoration: none; }
.col-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.col-photo img { width: 100%; height: 100%; object-fit: cover; }
.col-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; }
.col-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 12px; color: var(--ds-muted); }
.col-cat { display: inline-block; padding: 2px 10px; border: 1px solid #b9c7d6; border-radius: 3px; color: var(--ds-ink-soft); font-size: 12px; line-height: 1.7; text-decoration: none; }
.col-title { color: var(--ds-ink); font-size: 17px; line-height: 1.55; }
.col-lead { color: var(--ds-muted); font-size: 14px; line-height: 1.75; }
.col-card--big { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.col-card--big .col-photo { aspect-ratio: auto; min-height: 340px; }
.col-card--big .col-body { justify-content: center; padding: 40px; }
.col-card--big .col-title { font-size: 24px; }
/* 関連ページのカード */
.lc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-gap); }
.lc-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card);
box-shadow: var(--ds-shadow); text-decoration: none; }
.lc-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.lc-photo img { width: 100%; height: 100%; object-fit: cover; }
.lc-body { display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.lc-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; }
.lc-name { flex: 1; color: var(--ds-ink); font-size: 16px; }
/* 言葉の帯 */
.p-statement { position: relative; overflow: hidden; padding-block: var(--space-section); }
.stm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stm-inner { position: relative; }
.stm-card { max-width: 560px; padding: 48px; background: rgba(255, 255, 255, .94); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); }
.stm-title { font-size: 32px; }
/* 代表・考え方 */
.rep-card { margin-top: var(--space-block); padding: 24px 28px; }
.rep-role { color: var(--ds-muted); font-size: 13px; }
.rep-name { color: var(--ds-ink); font-size: 22px; font-weight: 700; }
.val-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.val-item { display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; }
.val-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; }
.val-en { color: var(--ds-en); font-family: var(--ds-font-en); font-size: 12px; letter-spacing: .18em; }
.val-title { color: var(--ds-ink); font-size: 18px; }
.val-text { color: var(--ds-muted); font-size: 14px; }
/* 事業の目的・沿革 */
.purpose-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-gap); border-top: 1px solid var(--ds-line); }
.purpose-list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ds-line); font-size: 15px; }
.pp-no { min-width: 2em; color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; line-height: 1.9; }
.tl-list { border-left: 1px solid var(--ds-line); }
.tl-list li { position: relative; display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 24px; padding: 16px 0 16px 32px; }
.tl-list li::before { content: ""; position: absolute; left: -5px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--ds-primary); }
.tl-list time { color: var(--ds-ink); font-weight: 700; }
.acc-map { margin-top: 24px; }
/* 記事の頭（明るい写真の右、左に題） */
.p-article-head { position: relative; overflow: hidden; background: var(--ds-tint); }
.ah-bg { position: absolute; top: 0; right: 0; width: 56%; height: 100%; object-fit: cover; }
.p-article-head::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ds-tint) 0%, var(--ds-tint) 44%, rgba(241, 246, 250, .7) 56%, rgba(241, 246, 250, 0) 72%); }
.ah-inner { position: relative; z-index: 2; padding-block: var(--space-head); }
.ah-title { max-width: 18em; font-size: 38px; line-height: 1.45; }
.ah-lead { max-width: 30em; margin-top: 24px; }
.ah-inner .col-meta { margin-top: 24px; }
/* 記事の2段組み */
.p-article-layout { padding-block: 24px var(--space-section); }
.p-article-layout .crumbs { margin-bottom: var(--space-block); }
.al-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3.6fr); gap: 64px; align-items: start; }
.al-main > * + * { margin-top: var(--space-block); }
.p-toc { padding: 28px 32px; background: var(--ds-tint-deep); border-radius: var(--ds-radius-card); }
.toc-title { color: var(--ds-ink); font-weight: 700; margin-bottom: 8px; }
.p-toc a { display: flex; gap: 14px; align-items: center; min-height: 40px; color: var(--ds-ink-soft); font-size: 15px; text-decoration: none; }
.p-toc a span { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; }
.p-toc a:hover { color: var(--ds-accent); }
.article-body p { max-width: 42em; margin-top: 16px; font-size: 16px; line-height: 1.95; }
.art-sec { padding-top: var(--space-block); border-top: 1px solid var(--ds-line); }
.art-sec:first-child { border-top: 0; padding-top: 0; }
.art-sec + .art-sec { margin-top: var(--space-block); }
.art-sec h2 { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; font-size: 24px; scroll-margin-top: 24px; }
.art-no { color: #9fb2c6; font-family: var(--ds-font-en); font-size: 34px; font-weight: 400; }
.art-sec p { margin-left: 72px; }
.p-points { padding: 32px 40px; background: var(--ds-tint-deep); border-color: var(--ds-tint-deep); box-shadow: none; }
.pt-title { color: var(--ds-ink); font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.p-points li { position: relative; padding-left: 20px; font-size: 15px; }
.p-points li + li { margin-top: 8px; }
.p-points li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1.5px; background: var(--ds-accent); }
.an-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: stretch; padding-top: var(--space-block); border-top: 1px solid var(--ds-line); }
.an-link { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-white); text-decoration: none; }
.an-link--next { text-align: right; }
.an-label { color: var(--ds-en); font-size: 12px; }
.an-link strong { color: var(--ds-ink); font-size: 14px; font-weight: 500; line-height: 1.6; }
.an-all { display: inline-flex; align-items: center; padding: 0 20px; color: var(--ds-ink); font-size: 14px; }
/* 記事の右の段 */
.al-side { display: flex; flex-direction: column; gap: var(--space-gap); position: sticky; top: 24px; }
.side-box { padding: 24px; }
.side-head { color: var(--ds-ink); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.side-col { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--ds-line); text-decoration: none; }
.side-col-photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; }
.side-col-photo img { width: 100%; height: 100%; object-fit: cover; }
.side-col-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.side-col-title { color: var(--ds-ink); font-size: 14px; line-height: 1.6; }
.side-cats a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-top: 1px solid var(--ds-line); color: var(--ds-ink-soft); font-size: 14px; text-decoration: none; }
.side-cats a[aria-current] { color: var(--ds-accent); font-weight: 700; }
.side-cta { position: relative; overflow: hidden; border-radius: var(--ds-radius-card); background: var(--ds-primary); }
.side-cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; }
.side-cta-body { position: relative; padding: 28px 24px; color: var(--ds-white); }
.side-cta-body .sec-en { color: #c8d6e6; }
.side-cta-title { font-size: 20px; font-weight: 700; line-height: 1.5; }
.side-cta-text { margin: 12px 0 20px; font-size: 14px; }
.side-cta .btn--primary { background: var(--ds-white); color: var(--ds-ink); border-color: var(--ds-white); }
/* お知らせ */
.nl-list { border-top: 1px solid var(--ds-line); }
.nl-row { display: grid; grid-template-columns: 7em auto minmax(0, 1fr) auto; gap: 20px; align-items: center; min-height: 72px; padding: 16px 4px; border-bottom: 1px solid var(--ds-line); text-decoration: none; }
.nl-row time { color: var(--ds-muted); font-family: var(--ds-font-en); font-size: 14px; }
.nl-tag { padding: 2px 10px; border: 1px solid #b9c7d6; border-radius: 3px; font-size: 12px; }
.nl-title { color: var(--ds-ink); font-size: 16px; }
/* お問い合わせ */
.p-contact-info { padding-top: var(--space-block); }
.ci-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-gap); }
.ci-card { display: flex; flex-direction: column; gap: 6px; padding: 28px 32px; text-decoration: none; }
.ci-card .ico { margin-bottom: 6px; color: var(--ds-accent); }
.ci-label { color: var(--ds-muted); font-size: 13px; }
.ci-value { color: var(--ds-ink); font-size: 16px; font-weight: 500; }
.f-form { display: flex; flex-direction: column; gap: 24px; padding: 48px; background: var(--ds-white); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow); }
.f-field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.f-field label, .f-field legend { display: flex; align-items: center; gap: 10px; color: var(--ds-ink); font-size: 15px; font-weight: 700; }
.f-field input, .f-field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #c5d1de; border-radius: 6px; background: var(--ds-paper); font: inherit; color: var(--ds-ink); }
.f-field input:focus, .f-field textarea:focus { border-color: var(--ds-accent); outline: 2px solid rgba(74, 120, 168, .25); }
.req, .opt { padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 500; line-height: 1.8; }
.req { background: var(--ds-primary); color: var(--ds-white); }
.opt { border: 1px solid var(--ds-line); color: var(--ds-muted); }
.f-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin-top: 8px; }
.f-check { display: flex !important; align-items: center; gap: 10px; min-height: 44px; font-weight: 400 !important; cursor: pointer; }
.f-check input { width: 20px; min-height: 0; height: 20px; accent-color: var(--ds-primary); }
.f-consent { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.f-status { color: var(--ds-accent); font-weight: 500; }
.f-submit { align-self: center; min-width: 300px; cursor: pointer; font-family: inherit; }
.th-inner { text-align: center; }
.th-inner p:not(.sec-en) { margin: 20px auto 0; max-width: 36em; }
.th-inner .btn { margin-top: 36px; }
.th-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-top: 36px; }
.th-actions .btn { margin-top: 0; }
/* 個人情報の取り扱いほかの本文 */
.p-policy .article-body h2 { display: flex; gap: 16px; align-items: baseline; margin-top: var(--space-block); font-size: 22px; }
.p-policy .article-body h2:first-child { margin-top: 0; }
.p-policy .article-body h2 span { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 15px; }
.article-body ul { margin-top: 12px; }
.article-body ul li { position: relative; padding-left: 20px; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: .85em; width: 8px; height: 1.5px; background: var(--ds-accent); }
/* サイトマップ */
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.sm-group { padding: 28px; }
.sm-group h2 { margin-bottom: 12px; font-size: 18px; }
.sm-group a { display: flex; align-items: center; min-height: 40px; color: var(--ds-ink-soft); font-size: 14px; text-decoration: none; border-top: 1px solid var(--ds-line); }
.sm-group a:hover { color: var(--ds-accent); }
/* 流れ（詳しく） */
.ts-list { display: flex; flex-direction: column; gap: var(--space-gap); }
.ts-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 24px; align-items: start; }
.ts-no { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ds-primary); color: var(--ds-white); font-family: var(--ds-font-en); font-size: 18px; }
.ts-body { padding: 28px 32px; }
.ts-title { font-size: 20px; margin-bottom: 8px; }
.ts-sep { margin: 16px 0; border: 0; border-top: 1px solid var(--ds-line); }
.ts-note { color: var(--ds-muted); font-size: 14px; }
/* チェックリスト */
.cl-list li, .ig-list li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--ds-line); font-size: 15px; }
.pb-check { position: absolute; left: 4px; top: 20px; width: 12px; height: 7px; border-left: 1.5px solid var(--ds-accent); border-bottom: 1.5px solid var(--ds-accent); transform: rotate(-45deg); }
.ckg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.ckg-card { padding: 28px; }
.ckg-title { font-size: 18px; margin-bottom: 8px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.ig-card { display: flex; flex-direction: column; padding: 28px; }
.ig-title { display: flex; gap: 12px; align-items: baseline; font-size: 18px; margin-bottom: 8px; }
.ig-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 13px; }
.ig-card .text-link { align-self: flex-start; margin-top: 20px; }
/* 写真の帯・お知らせの箱 */
.p-photo-band { height: 420px; overflow: hidden; }
.p-photo-band img { width: 100%; height: 100%; object-fit: cover; }
.nt-box { padding: 48px; text-align: center; }
.nt-title { font-size: 24px; }
.nt-box p { margin: 16px auto 28px; max-width: 36em; }
/* 事業の比べ表 */
.cmp-table { width: 100%; border-collapse: collapse; background: var(--ds-white); border: 1px solid var(--ds-line); font-size: 14px; }
.cmp-table th, .cmp-table td { padding: 16px 18px; border: 1px solid var(--ds-line); text-align: left; vertical-align: top; line-height: 1.7; }
.cmp-table thead th { background: var(--ds-tint); color: var(--ds-ink); font-size: 13px; }
.cmp-table tbody th a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ds-ink); text-decoration: none; }
.cmp-no { color: var(--ds-accent); font-family: var(--ds-font-en); font-size: 12px; }
/* 用語集 */
.gl-group { padding: 32px; scroll-margin-top: 24px; }
.gl-group + .gl-group { margin-top: var(--space-gap); }
.gl-head { display: flex; gap: 14px; align-items: baseline; margin-bottom: 12px; font-size: 20px; }
.gl-head .sec-en { margin: 0; }
.gl-list > div { padding: 14px 0; border-top: 1px solid var(--ds-line); }
.gl-list dt { color: var(--ds-ink); font-weight: 700; }
.gl-list dd { font-size: 15px; }
/* 注目のコラム */
.cf-list { margin-top: 12px; }
/* =================================================================================================
幅ごと
================================================================================================= */
@media (max-width: 1399px) {
.svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.fl-step { padding-right: 36px; }
.ai-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ai-grid .ai-list { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ab-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.ab-fact:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 1199px) {
.site-header { display: flex; gap: 0; height: 72px; padding: 0 16px 0 24px; }
.nav, .head-cta { display: none; }
.menu-button { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-left: 12px; border: 0; background: none; cursor: pointer; }
.menu-button .bars, .menu-button .bars::before, .menu-button .bars::after { display: block; width: 26px; height: 1.5px; background: var(--ds-ink); content: ""; }
.menu-button .bars { position: relative; }
.menu-button .bars::before { position: absolute; top: -8px; }
.menu-button .bars::after { position: absolute; top: 8px; }
.mobile-menu { position: fixed; inset: 0; z-index: 50; padding: 12px 16px 32px 24px; background: var(--ds-white); overflow-y: auto; }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; height: 48px; }
.mobile-menu .close { position: relative; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; }
.mobile-menu .close::before, .mobile-menu .close::after { content: ""; position: absolute; left: 11px; top: 23px; width: 26px; height: 1.5px; background: var(--ds-ink); transform: rotate(45deg); }
.mobile-menu .close::after { transform: rotate(-45deg); }
.mobile-menu ul { margin: 24px 8px 32px 0; }
.mobile-menu li a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--ds-line); color: var(--ds-ink); font-size: 17px; font-weight: 500; text-decoration: none; }
.mobile-menu > .btn { width: calc(100% - 8px); }
.split, .two-col, .str-grid, .intro-grid, .kw-inner { grid-template-columns: minmax(0, 1fr); }
.split > .sec-head, .two-col > .sec-head, .str-grid > .sec-head { margin-bottom: 0; }
.p-hero { height: 640px; }
.p-hero-title { font-size: 52px; }
.fl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fl-step, .fl-step:last-child { min-height: 0; clip-path: none; padding: 28px; }
.pb-list, .cap-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-grid, .sr-row { grid-template-columns: minmax(0, 1fr); }
.sr-row--flip .sr-photo { order: 0; }
.al-grid { grid-template-columns: minmax(0, 1fr); }
.al-side { position: static; }
.p-strength { padding-block: var(--space-section); }
.ft-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 40px 32px; }
.ft-nav { justify-content: flex-start; }
.ph-bg, .ah-bg { width: 100%; opacity: .35; }
.p-page-hero--photo::before, .p-article-head::before { background: linear-gradient(90deg, rgba(241, 246, 250, .95) 0%, rgba(241, 246, 250, .85) 100%); }
.cta-bg { width: 100%; opacity: .5; }
.p-cta::before { background: linear-gradient(90deg, rgba(241, 246, 250, .96) 0%, rgba(241, 246, 250, .8) 60%, rgba(241, 246, 250, .55) 100%); }
.col-card--big { grid-template-columns: minmax(0, 1fr); }
.cta-inner--row { grid-template-columns: minmax(0, 1fr); }
.cta-inner--row .cta-actions { margin-top: 32px; }
.pb-grid--photo { grid-template-columns: minmax(0, 1fr); }
.pb-photo { min-height: 0; aspect-ratio: 16 / 9; }
.col-card--big .col-photo { min-height: 0; aspect-ratio: 16 / 9; }
.val-list, .ckg-grid, .ig-grid, .sm-grid, .col-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
.sol-list, .wk-list { grid-template-columns: minmax(0, 1fr); }
.sol-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sol-photo { aspect-ratio: auto; min-height: 150px; }
.sol-body { padding: 16px 18px; }
.str-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
.ab-grid { grid-template-columns: minmax(0, 1fr); }
.ab-facts { display: block; }
.ab-fact:nth-last-child(2) { border-bottom: 1px solid var(--ds-line); }
.ab-photo { min-height: 0; aspect-ratio: 3 / 2; }
.ai-grid { grid-template-columns: minmax(0, 1fr); }
.ai-grid .ai-list { grid-template-columns: minmax(0, 1fr); }
.ai-photo { min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
.site-header { height: 64px; padding: 0 8px 0 20px; }
.logo-en { font-size: 21px; }
.logo-ja { font-size: 12px; }
.sec-title { font-size: 26px; }
.sec-head--row { display: block; }
.sec-head--row .sec-lead { margin-top: 12px; }
.head-row { display: block; }
.head-row .text-link { margin-top: 16px; }
/* ファーストビュー：スマホでは字を写真に重ねない（正本 sp-1：上に字、下に写真） */
.p-hero { display: flex; flex-direction: column; height: auto; background: var(--ds-paper); }
.p-hero::before { display: none; }
.p-hero-body { order: 1; height: auto; padding-block: 48px 40px; }
.p-hero-bg { position: static; order: 2; height: 860px; object-position: 78% 50%; } /* 正本 sp-1：字の画面の次に、写真が1画面ぶん続く */
.p-hero-title { font-size: 34px; }
.p-hero-lead { margin-top: 24px; font-size: 15px; }
.p-hero-actions { flex-direction: column; margin-top: 32px; }
.p-hero-actions .btn { width: 100%; }
.p-hero-scroll { display: none; }
.svc-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.svc-card { display: grid; grid-template-columns: minmax(0, 1fr) 42%; }
.svc-photo { order: 2; aspect-ratio: auto; min-height: 150px; }
.svc-body { padding: 20px 18px; }
.fl-list, .pb-list, .cap-list, .pg-list, .val-list, .ckg-grid, .ig-grid, .sm-grid, .col-list, .col-list--two, .ci-grid, .purpose-list { grid-template-columns: minmax(0, 1fr); }
.fl-step { display: grid; grid-template-columns: 36px 44px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 20px; }
.fl-step .ico { grid-row: span 2; margin: 0; }
.fl-no { grid-row: span 2; }
.fl-title { grid-column: 3; }
.fl-text { grid-column: 3; }
.sol-card { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.sol-photo { min-height: 110px; }
.sol-body { padding: 12px 14px; gap: 4px; }
.ai-photo { aspect-ratio: 16 / 9; }
.ai-tile { min-height: 0; padding: 12px 16px; }
.ai-list { gap: 12px; }
.sol-name { font-size: 16px; }
.sol-text { font-size: 13px; }
.str-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.wk-card { display: grid; grid-template-columns: 36% minmax(0, 1fr); }
.wk-photo { aspect-ratio: auto; min-height: 100%; }
.wk-tag { left: 6px; top: 6px; padding: 2px 6px; font-size: 12px; }
.wk-body { padding: 14px 14px 16px; }
.wk-title { font-size: 15px; }
.wk-list { gap: 16px; }
.str-item { padding: 16px 0; border-left: 0; border-top: 1px solid var(--ds-line); }
.str-big { font-size: 22px; }
.cta-title { font-size: 28px; }
.cta-actions .btn { width: 100%; min-width: 0; }
.ft-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.ph-title { font-size: 32px; }
.ph-body .crumbs { margin-bottom: 40px; }
.ah-title { font-size: 28px; }
.rows > div, .tl-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.art-sec h2 { grid-template-columns: 52px minmax(0, 1fr); font-size: 20px; }
.art-no { font-size: 26px; }
.art-sec p { margin-left: 0; }
.p-points { padding: 24px; }
.an-grid { grid-template-columns: minmax(0, 1fr); }
.an-link--next { text-align: left; }
.an-all { justify-content: center; min-height: 44px; }
.f-form { padding: 28px 20px; }
.f-check-list { grid-template-columns: minmax(0, 1fr); }
.f-submit { width: 100%; min-width: 0; }
.nl-row { grid-template-columns: auto minmax(0, 1fr); }
.nl-title { grid-column: 1 / -1; }
.nl-row .arrow { display: none; }
.cmp-table thead { display: none; }
.cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table th, .cmp-table td { display: block; width: 100%; }
.cmp-table tr { border-bottom: 8px solid var(--ds-tint); }
.cmp-table td::before { content: attr(data-label); display: block; color: var(--ds-muted); font-size: 12px; }
.stm-card { padding: 32px 24px; }
.stm-title { font-size: 26px; }
.p-photo-band { height: 240px; }
.ts-item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ts-no { width: 48px; height: 48px; font-size: 15px; }
.ts-body { padding: 24px 20px; }
.nt-box { padding: 32px 20px; }
.btn { white-space: normal; }
}
/* ---------- 正本への寄せ直し（全幅に効くもの：地・すりガラス・書体） ---------- */
body { background: #f4f7fb linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, .95) 30%, transparent 38%) center top / 1600px 1400px repeat-y; }
.band, .band--tint, .p-strength { background: transparent; }
.svc-card, .fl-step, .sol-card, .ai-tile, .wk-card, .ab-facts { background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(40, 70, 120, .08); }
.p-flow, .p-ai, .p-strength { background: linear-gradient(180deg, rgba(247, 249, 252, .9), rgba(236, 242, 249, .9)); }
.hero-kicker { margin-bottom: 16px; color: var(--ds-ink-soft); font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.8; }
.str-big { font-weight: 300; }
@media (max-width: 1199px) {
.hero-glass, .svc-pop, .ab-city, .cta-script, .ai-mark, .sol-ui { display: none; }
.p-about .ab-photo { position: relative; }
.cta-side { order: 2; }
.cta-inner--three { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.cta-kicker { display: none; }
.cta-side .cta-actions { display: flex; flex-direction: column; gap: 12px; }
}
@media (min-width: 1200px) {
/* =================================================================================================
正本（03-future_white）への寄せ直し（2026-09-29）：白銀の光がにじむ地・すりガラスの面・端まで使う横幅
================================================================================================= */
body { background: #f5f8fb; }
.band, .band--tint, .p-strength, .p-cta { position: relative; isolation: isolate; background: var(--ds-sheen); }
.band::before, .p-strength::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .85) 47%, transparent 56%),
radial-gradient(60% 80% at 92% 10%, rgba(214, 228, 243, .55), transparent 70%); }
.p-strength { border-block: 1px solid rgba(206, 219, 233, .6); }
.svc-card, .fl-step, .sol-card, .ai-tile, .wk-card, .ab-facts { background: var(--ds-glass); border-color: var(--ds-glass-line); box-shadow: var(--ds-glass-shadow); }
.svc-list { gap: 12px; }
.svc-photo { aspect-ratio: 5 / 4; background: linear-gradient(180deg, #ffffff, #eef3f8); }
.svc-body { padding: 14px 14px 18px; }
.p-hero { height: 680px; background: #eef3f8; }
.p-hero::before { background: linear-gradient(90deg, rgba(248, 250, 253, .94) 0%, rgba(248, 250, 253, .82) 30%, rgba(248, 250, 253, .2) 52%, rgba(248, 250, 253, 0) 64%); }
.p-hero-title { font-size: 58px; }
.fl-step { align-items: flex-start; }
.fl-step .ico { align-self: center; width: 34px; height: 34px; }
.cta-bg { width: 66%; }
.svc-photo img { object-fit: cover; object-position: 50% 45%; }
.ai-photo { border-radius: 0; background: transparent; }
.ai-photo img { object-position: 70% 30%; }
/* AI：正本はロボットが枠なしで地に溶ける（四角い写真にしない） */
.ai-photo { min-height: 440px; margin-block: -48px; overflow: visible; }
.ai-photo img { -webkit-mask-image: radial-gradient(ellipse 72% 78% at 62% 42%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 72% 78% at 62% 42%, #000 50%, transparent 100%); }
/* CTA：正本は右の6割に街並みがはっきり出る（白いかすみは左の文字の下だけ） */
.cta-bg { width: 60%; object-position: 50% 78%; }
.p-cta::before { background: linear-gradient(90deg, #f1f5f9 0%, #f1f5f9 40%, rgba(241, 245, 249, .6) 46%, rgba(241, 245, 249, 0) 56%); }
/* ---------- レビュー1回目（46点）の直し ---------- */
/* 地：区画ごとの繰り返しをやめ、ページ全体に光の筋を敷く（CSS のグラデーションだけ） */
body { background-color: #f4f7fb;
background-image: linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, .95) 30%, transparent 38%),
linear-gradient(118deg, transparent 58%, rgba(255, 255, 255, .7) 63%, transparent 68%),
radial-gradient(40% 30% at 88% 20%, rgba(214, 228, 243, .6), transparent 70%),
radial-gradient(35% 25% at 8% 70%, rgba(220, 231, 243, .55), transparent 70%);
background-size: 1600px 1400px; background-position: center top; background-repeat: repeat-y; }
.band, .band--tint, .p-strength { background: transparent; }
.band::before, .p-strength::before { display: none; }
/* すりガラスのカード */
.svc-card, .fl-step, .sol-card, .ai-tile, .wk-card, .ab-facts {
background: rgba(255, 255, 255, .58); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(40, 70, 120, .08); }
/* ヘッダー：トップでは FV の写真に透ける */
body:has(.p-hero) .site-header { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom: 0; }
.site-header { padding-inline: var(--frame-pad); }
/* FV */
.p-hero { height: 700px; }
.p-hero::before { background: linear-gradient(90deg, #f4f7fb 0%, rgba(244, 247, 251, .9) 26%, rgba(244, 247, 251, .55) 40%, rgba(244, 247, 251, 0) 58%); }
.p-hero-body { padding-top: 40px; }
.hero-kicker { margin-bottom: 20px; color: var(--ds-ink-soft); font-size: 14px; font-weight: 500; letter-spacing: .08em; line-height: 1.8; }
.p-hero-lead { margin-top: 24px; }
.p-hero-actions { margin-top: 36px; }
.p-hero-scroll { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.scroll-arrow { position: relative; width: 1px; height: 28px; margin-left: 18px; background: currentColor; }
.scroll-arrow::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.hero-glass { position: absolute; inset: 0; z-index: 1; pointer-events: none; perspective: 1000px; }
.hg { position: absolute; display: block; background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .9);
border-radius: 6px; box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(40, 70, 120, .1); color: #5d7189; }
.hg--words { left: 51%; top: 17%; width: 150px; padding: 18px 16px; transform: rotateY(-16deg); font-family: var(--ds-font-en); font-size: 12px; line-height: 1.7; letter-spacing: .12em; }
.hg--words b { display: block; font-weight: 400; }
.hg--words i { display: block; margin-top: 4px; font-style: normal; font-size: 7px; letter-spacing: .1em; }
.hg--bars { left: 47%; top: 53%; width: 150px; height: 96px; padding: 18px 16px 14px; display: flex; align-items: flex-end; gap: 9px; transform: rotateY(-12deg); }
.hg--bars i { flex: 1; background: linear-gradient(180deg, rgba(128, 160, 196, .75), rgba(128, 160, 196, .25)); border-radius: 1px; }
.hg--bars i:nth-child(1) { height: 30%; } .hg--bars i:nth-child(2) { height: 45%; } .hg--bars i:nth-child(3) { height: 38%; }
.hg--bars i:nth-child(4) { height: 62%; } .hg--bars i:nth-child(5) { height: 74%; } .hg--bars i:nth-child(6) { height: 92%; }
.hg--copy { right: 5%; top: 58%; width: 210px; padding: 22px; transform: rotateY(14deg); font-size: 15px; line-height: 1.8; letter-spacing: .08em; }
/* 事業内容：カードの列は左右にはみ出す。密に並べる */
[data-audit="service"] .svc-list { margin-inline: -52px; gap: 10px; }
.svc-card { border-radius: 6px; }
.svc-body { padding: 12px 12px 16px; gap: 4px; }
.svc-name { font-size: 15px; }
.svc-text { font-size: 12px; line-height: 1.6; }
/* 流れ：矢羽根が噛み合う形（縁は影で出す） */
.fl-list { gap: 0; }
.fl-step { min-height: 0; padding: 22px 34px 26px 36px; margin-left: -12px; border: 0; border-radius: 0; box-shadow: none;
clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%); filter: drop-shadow(0 8px 18px rgba(40, 70, 120, .1)); }
.fl-step:first-child { margin-left: 0; padding-left: 24px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
.fl-step:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%); padding-right: 24px; }
.fl-step .ico { align-self: center; }
.fl-title { font-size: 16px; }
.fl-text { font-size: 13px; line-height: 1.65; }
/* 業種別：写真の上にすりガラスの画面の板。写真の下は白へ溶かす */
.sol-list { gap: 16px; }
.sol-photo { position: relative; aspect-ratio: 16 / 10; }
.sol-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, .85)); }
.sol-ui { position: absolute; z-index: 1; right: 7%; top: 12%; width: 30%; aspect-ratio: 3 / 4; padding: 10px 9px; display: flex; flex-direction: column; gap: 6px;
background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .95); border-radius: 8px; box-shadow: 0 10px 24px rgba(40, 70, 120, .16); }
.sol-ui i { display: block; height: 7px; border-radius: 3px; background: rgba(120, 146, 176, .35); }
.sol-ui i:first-child { width: 55%; background: rgba(74, 120, 168, .55); }
.sol-ui i:nth-child(3) { width: 80%; }
.sol-ui i:last-child { margin-top: auto; height: 22px; background: rgba(210, 222, 236, .7); }
/* AI：ロボットを地に溶かし、大きな AI の字を重ねる */
.ai-photo { position: relative; }
.ai-photo img { -webkit-mask-image: radial-gradient(ellipse 58% 70% at 60% 45%, #000 45%, transparent 96%); mask-image: radial-gradient(ellipse 58% 70% at 60% 45%, #000 45%, transparent 96%); }
.ai-mark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: rgba(111, 138, 166, .55); font-family: var(--ds-font-en); font-size: 44px; font-weight: 300; line-height: 1; }
.ai-mark small { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .2em; }
.ai-tile { min-height: 0; padding: 14px 18px; }
.ai-text, .fl-text, .wk-text, .sol-text { text-wrap: pretty; }
.sec-title, .wk-title, .p-hero-title { text-wrap: balance; }
/* 導入実績：写真を大きく */
.wk-photo { aspect-ratio: 16 / 9; }
.wk-list { gap: 16px; }
/* 強み：細い大きな語＋1行 */
.str-big { font-size: 26px; font-weight: 300; letter-spacing: .02em; }
.str-post { font-size: 12px; }
/* 会社：写真は右端まで裁ち落とし、事実の札を重ねる */
.p-about { position: relative; overflow: hidden; }
.p-about .ab-grid { position: relative; z-index: 2; grid-template-columns: minmax(0, 4.2fr) minmax(0, 3.2fr) minmax(0, 3.6fr); }
.p-about .ab-text { grid-column: 1; max-width: 400px; }
.p-about .ab-facts { grid-column: 3; background: rgba(255, 255, 255, .62); }
.p-about .ab-photo { position: absolute; z-index: 1; left: 34%; right: 0; top: 0; bottom: 0; min-height: 0; margin: 0; border-radius: 0; }
.p-about .ab-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #f4f7fb 0%, rgba(244, 247, 251, 0) 22%); }
/* CTA：左に一文とボタン2つ／中に見出し／右に街と筆記体 */
.cta-inner--three { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 48px; align-items: center; }
.cta-kicker { color: var(--ds-ink-soft); font-size: 14px; font-weight: 500; line-height: 1.8; }
.cta-side .cta-actions { flex-direction: column; gap: 12px; margin-top: 20px; }
.cta-side .cta-actions .btn { min-width: 0; width: 100%; }
.cta-main { max-width: 34em; }
.cta-script { position: absolute; z-index: 2; right: 6%; top: 18%; margin: 0; color: rgba(51, 72, 94, .72); font-family: var(--ds-font-script); font-size: 36px; line-height: 1.1; transform: rotate(-10deg); }
@media (max-width: 1199px) {
[data-audit="service"] .svc-list { margin-inline: 0; }
.hero-glass, .cta-script { display: none; }
.p-about .ab-photo { position: relative; left: auto; min-height: 280px; }
}
@media (max-width: 900px) {
.cta-inner--three { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.cta-side { order: 2; }
}
/* AI：ロボットの画像の四辺を地に溶かす（右端と上端の四角い切れ目を消す） */
.ai-photo img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 72%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 72%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%); mask-composite: intersect; }
[data-audit="service"] .sec-lead { white-space: nowrap; }
/* ヘッダー：写真に透けるが、メニューの字の下は薄い白で読めるようにする（backdrop-filter はスマホのメニューを潰すので使わない） */
body:has(.p-hero) .site-header { background: linear-gradient(180deg, rgba(248, 250, 253, .9), rgba(248, 250, 253, .62)); border-bottom: 1px solid rgba(255, 255, 255, .7); }
/* ---------- レビュー2回目（66点）の直し ---------- */
/* ヘッダー：帯の下端で写真を横一直線に切らない（上だけ白く、下は透明へ） */
body:has(.p-hero) .site-header { background: linear-gradient(180deg, rgba(248, 250, 253, .88) 0%, rgba(248, 250, 253, .55) 60%, rgba(248, 250, 253, 0) 100%); border-bottom: 0; }
/* FV：本文は写真の手前で終える。右下の板は字の後ろを白く */
.p-hero-lead { max-width: 30em; }
.hg--copy { background: rgba(255, 255, 255, .6); color: #4d6179; }
/* 区画を1つおきに淡い帯にし、境目に細い線 */
.p-flow, .p-ai, .p-strength { background: linear-gradient(180deg, rgba(247, 249, 252, .9), rgba(236, 242, 249, .9)); border-block: 1px solid #e3eaf3; }
/* 事業内容：AIのカードだけ立体が枠の外へはみ出して隣に重なる */
[data-audit="service"] .svc-list > li { position: relative; }
[data-audit="service"] .svc-list > li:nth-child(4) { z-index: 3; }
[data-audit="service"] .svc-list > li:nth-child(4) .svc-card { overflow: visible; }
[data-audit="service"] .svc-list > li:nth-child(4) .svc-photo { position: relative; overflow: visible; }
[data-audit="service"] .svc-list > li:nth-child(4) .svc-photo > img:first-child { opacity: 0; }
.svc-pop { position: absolute; left: -8%; top: -30%; width: 138%; max-width: none; height: auto; pointer-events: none; filter: drop-shadow(0 16px 24px rgba(40, 70, 120, .14)); }
.svc-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
/* 流れ：1px の明るい縁・白72%の地・落ち影、両端まで矢羽根 */
.fl-list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-right: -40px; }
.fl-step { position: relative; isolation: isolate; background: rgba(196, 211, 229, .95); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%);
filter: drop-shadow(0 6px 16px rgba(30, 50, 80, .09)); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.fl-step::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(244, 248, 252, .9));
clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); }
.fl-step:first-child, .fl-step:first-child::before { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
.fl-step:last-child, .fl-step:last-child::before { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); }
.fl-step:last-child { padding-right: 36px; }
.fl-step .ico { width: 34px; height: 34px; stroke-width: 1.4; }
.fl-text { color: #5b6b80; }
/* 業種別：作り物の画面の板はやめる（写真そのものに端末を写す） */
.sol-ui { display: none; }
.sol-photo { aspect-ratio: 16 / 11; }
[data-audit="solution"] .sec-lead { max-width: 20em; }
/* AI：ロボットは区画の高さいっぱいに立ち、右のカード群の後ろへ回り込む */
.ai-grid { position: relative; }
.ai-photo { position: static; min-height: 460px; margin: 0; }
.ai-photo img { position: absolute; z-index: 0; left: 30%; top: -14%; width: 44%; height: 128%; object-fit: cover; object-position: 62% 30%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 64%, transparent 96%), linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); -webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 64%, transparent 96%), linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%); mask-composite: intersect; }
.ai-mark { z-index: 1; left: 33%; top: 58%; }
.ai-list { position: relative; z-index: 2; }
.ai-grid > .sec-head { position: relative; z-index: 2; }
/* 導入実績：写真を低く */
.wk-photo { aspect-ratio: auto; height: 120px; }
.wk-title { font-size: 17px; }
/* 強み：説明を読める濃さに、帯を上下の線で挟む */
.str-post { font-size: 12.5px; color: #66768a; }
.p-strength { background: rgba(255, 255, 255, .55); border-block: 1px solid #dde5ef; }
/* 会社：文字｜枠の写真｜食い込む札｜右端へ抜ける街並み */
.p-about .ab-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 3.4fr) minmax(0, 3fr) minmax(0, 1.6fr); column-gap: 0; }
.p-about .ab-text { grid-column: 1; padding-right: 40px; }
.p-about .ab-photo { position: relative; grid-column: 2; left: auto; right: auto; top: auto; bottom: auto; z-index: 1; height: 100%; min-height: 300px; border-radius: 8px; overflow: hidden; }
.p-about .ab-photo::before { display: none; }
.p-about .ab-facts { grid-column: 3; position: relative; z-index: 2; margin-left: -24px; }
.ab-city { position: absolute; z-index: 0; right: 0; top: 0; width: 20%; height: 100%; object-fit: cover; object-position: 30% 70%;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
/* CTA：筆記体は空の白い所に濃紺で。ボタンは小さく */
.cta-script { top: 70px; right: 120px; color: #3a4a60; line-height: 1; }
.cta-inner--three { grid-template-columns: 216px minmax(0, 1fr); }
.cta-side .cta-actions .btn { width: 216px; min-height: 44px; padding: 8px 18px; font-size: 14px; }
.ft-nav { gap: 0 22px; }
@media (max-width: 1199px) {
.svc-pop { display: none; }
[data-audit="service"] .svc-list > li:nth-child(4) .svc-photo > img:first-child { opacity: 1; }
.fl-list { margin-right: 0; }
.ai-photo img { position: relative; left: auto; top: auto; width: 100%; height: 100%; }
.p-about .ab-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.p-about .ab-text, .p-about .ab-photo, .p-about .ab-facts { grid-column: 1; margin-left: 0; }
.ab-city { display: none; }
}
/* 事業内容04：写真の欄の高さは他と同じに（はみ出す立体で欄が伸びない）、空の地は透明に */
[data-audit="service"] .svc-list > li:nth-child(4) .svc-photo { min-height: 0; background: transparent; }
.svc-photo img.svc-pop { position: absolute; left: -10%; top: -16%; width: 132%; height: auto; object-fit: contain; }
/* AI：ロボットの顔はカードの手前（左）に出す */
.ai-photo img { left: 26%; object-position: 86% 30%; }
.ai-mark { left: 29%; top: 64%; }
/* CTA：目線の高さのパノラマを帯いっぱいに。左は空のかすみに文字を載せる */
.cta-bg { width: 100%; object-position: 60% 62%; }
.p-cta::before { background: linear-gradient(90deg, rgba(244, 247, 251, .92) 0%, rgba(244, 247, 251, .75) 34%, rgba(244, 247, 251, 0) 58%); }
.cta-script { top: 48px; right: 140px; }
.p-cta::before { background: linear-gradient(90deg, rgba(244, 247, 251, .94) 0%, rgba(244, 247, 251, .82) 42%, rgba(244, 247, 251, 0) 62%); }
@media (max-width: 1199px) {
.ai-photo { position: relative; min-height: 300px; }
.ai-photo img { position: relative; left: auto; top: auto; width: 100%; height: 100%; object-position: 70% 30%; }
.ai-mark { left: 8%; }
.fl-list { margin-right: 0; }
.fl-step, .fl-step:first-child, .fl-step:last-child { margin-left: 0; }
}
}
/* ---------- レビュー3回目（76点）の直し ---------- */
/* 1〜2文字だけ次の行に落ちる改行をなくす（文節で折る） */
body { word-break: auto-phrase; }
p, li, dd, span, strong, h1, h2, h3 { text-wrap: pretty; }
.nb { white-space: nowrap; }
@media (min-width: 1200px) {
.p-hero-lead { max-width: 32em; }
/* 事業内容：AIの立体をもっと大きく、隣のカードにまたがる主役に */
.svc-photo img.svc-pop { left: -12%; top: -34%; width: 170%; }
/* 流れ：アイコンを淡い青灰で大きく、カードを白いすりガラスで浮かせる */
.p-flow { background: linear-gradient(180deg, rgba(250, 251, 253, .95), rgba(240, 245, 250, .95)); }
.fl-step .ico { width: 40px; height: 40px; color: #7b93b3; stroke-width: 1.25; }
.fl-step::before { background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); }
/* 業種別・導入実績：写真を横長に、文字の塊を軽く */
.sol-photo { aspect-ratio: 2.3 / 1; }
.sol-body { padding: 16px 20px 16px; }
.wk-photo { height: auto; aspect-ratio: 2.6 / 1; }
/* AI：ロボットの頭をカードで隠さない。かすみの四角い境目を楕円で消す */
.ai-photo img { transform: translateX(-70px);
-webkit-mask-image: radial-gradient(ellipse 58% 55% at 58% 48%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 58% 55% at 58% 48%, #000 55%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
.ai-mark { left: 25%; }
/* 強み：大きい語は中太の紺、説明は読める濃さ */
.str-big { font-weight: 500; color: #1b2a44; font-size: 24px; }
.str-post { font-size: 13px; color: #556274; }
/* 会社：写真は横長、右端に街並みを高さいっぱいに */
.p-about .ab-grid { grid-template-columns: minmax(0, 3.6fr) minmax(0, 4.4fr) minmax(0, 3fr) minmax(0, 1.8fr); align-items: center; }
.p-about .ab-photo { height: auto; min-height: 0; aspect-ratio: 1.9 / 1; }
.ab-city { width: 260px; object-position: 50% 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px); mask-image: linear-gradient(90deg, transparent 0, #000 40px); }
/* CTA：文字の後ろは白いまま、街並みは文字の右から */
.p-cta::before { background: linear-gradient(90deg, rgba(244, 247, 251, .96) 0%, rgba(244, 247, 251, .9) 48%, rgba(244, 247, 251, 0) 64%); }
}
@media (min-width: 1200px) {
.svc-photo img.svc-pop { left: -6%; top: -30%; width: 146%; }
.p-about .ab-grid { grid-template-columns: minmax(0, 3.8fr) minmax(0, 3.6fr) minmax(0, 2.8fr) minmax(0, 1.8fr); }
.p-about .ab-facts { margin-left: -36px; }
.ai-photo img { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, transparent 74%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, transparent 74%); }
}
@media (min-width: 1200px) { .p-about .ab-photo { align-self: center; width: 100%; height: auto; } }
@media (min-width: 1200px) { .p-about .ab-grid { grid-template-columns: minmax(0, 3.4fr) minmax(0, 4fr) minmax(0, 2.8fr) minmax(0, 1.8fr); } .p-about .ab-photo { aspect-ratio: 1.45 / 1; } }
/* ---------- レビュー4回目（81点）の直し ---------- */
@media (min-width: 1200px) {
/* ヘッダーの相談ボタンを小さく */
.site-header .btn { min-height: 38px; padding: 8px 22px; font-size: 13px; gap: 12px; }
/* FV：ガラスの札を奥行きに沿って傾ける */
.hg--words { transform: perspective(900px) rotateY(-18deg) rotateZ(-2deg); box-shadow: 0 20px 40px rgba(40, 60, 90, .12); }
.hg--bars { transform: perspective(900px) rotateY(14deg); box-shadow: 0 20px 40px rgba(40, 60, 90, .12); }
.hg--copy { transform: perspective(900px) rotateY(-22deg); box-shadow: 0 20px 40px rgba(40, 60, 90, .12); }
/* 事業内容：AIの頭はカードの列の中に収め、隣へのかぶりをなくす。四角い縁を消す */
.svc-photo img.svc-pop { left: -2%; top: -10%; width: 116%;
-webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 60% 58% at 50% 52%, #000 62%, transparent 100%); }
/* 流れ：線を消し、白いすりガラスの札を影で浮かせる（影は親に掛ける。clip-path の要素の filter は切られる） */
.fl-list { filter: drop-shadow(0 10px 22px rgba(60, 80, 120, .12)); }
.fl-step { background: rgba(255, 255, 255, .95); filter: none; }
.fl-step::before { background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(244, 247, 252, .92)); }
.fl-step .ico { width: 40px; height: 40px; }
/* AI：線のアイコンは淡い青灰 */
.ai-tile .ico { width: 30px; height: 30px; color: #6f86a6; }
/* 業種別：人の頭が切れないように */
.sol-photo img { object-position: 50% 28%; }
/* 導入実績：3枚目は上に寄せて顔を入れる。カードの下を揃える */
.wk-list > li { display: flex; }
.wk-card { width: 100%; }
.wk-list > li:nth-child(3) .wk-photo img { object-position: 50% 20%; }
/* 会社：右端のビルは左の縁をぼかし、高さは区画の8割で下に揃える */
.ab-city { top: auto; bottom: 0; height: 80%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 140px), linear-gradient(0deg, #000 70%, transparent 100%); -webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, transparent 0, #000 140px), linear-gradient(0deg, #000 70%, transparent 100%); mask-composite: intersect; }
.p-about .ab-text { max-width: 360px; }
/* CTA：本文の後ろは白いまま */
.p-cta::before { background: linear-gradient(90deg, rgba(246, 248, 251, .97) 0%, rgba(246, 248, 251, .92) 52%, rgba(246, 248, 251, 0) 70%); }
}
@media (min-width: 1200px) { .site-header .head-cta { min-height: 0; height: 36px; padding: 0 18px; font-size: 13px; gap: 10px; } }
@media (min-width: 1200px) { .site-header .head-cta { height: 44px; border: 4px solid transparent; background-clip: padding-box; box-shadow: none; } }
/* =================================================================================================
トップ（2026-09-30 ユーザー「完全一致目指して１００点になるまで」）：絵 03-future_white をそのまま写す
寸法は絵を1440幅に直した実測（×1440/948）。区画の高さの目標（px）：ヘッダー61・FV475・事業内容371・強み261・
業種別260・AI272・導入事例217・数字126・私たちについて235・相談197・フッター44。
ただし字は12px以上・押せる所は44px以上（読みやすさと押しやすさは絵より優先）。
トップの区画は class が t- で始まり、上の古い層（p-・svc- など）とは当たらない
================================================================================================= */
.t-en { margin-bottom: 6px; color: var(--ds-en); font-family: var(--ds-font-en); font-size: 12px; font-weight: 500; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.t-title { color: var(--ds-ink); font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: .03em; }
.t-lead { margin-top: 12px; color: var(--ds-ink-soft); font-size: 13px; line-height: 1.85; letter-spacing: .04em; }
.t-btn { margin-top: 20px; min-height: 44px; padding: 6px 26px; font-size: 13px; gap: 14px; }
.t-textlink { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ds-ink); font-size: 12.5px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--ds-ink); white-space: nowrap; }
.t-textlink:hover .arrow { transform: translateX(4px); }
.t-service, .t-strength, .t-solution, .t-ai, .t-works, .t-numbers, .t-about, .t-cta { position: relative; }
.t-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.t-service .ico, .t-strength .ico, .t-ai .ico, .t-about .ico { color: #6f86a6; }
/* すりガラスの面（カード・札の共通） */
.t-svc-card, .t-step, .t-sol, .t-ai-tile, .t-case, .t-facts {
background: linear-gradient(160deg, rgba(255, 255, 255, .86) 0%, rgba(246, 249, 253, .72) 100%);
border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(40, 70, 120, .08); border-radius: 10px; }
/* ---------- ロゴ（絵のマーク＋社名） */
.logo { align-items: center; }
.logo-mark { width: 34px; height: 34px; margin-right: 10px; object-fit: contain; }
/* ---------- 事業内容 */
.t-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 40px; margin-bottom: 20px; }
.t-head--row { flex: 1 1 auto; }
.t-row-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 26px; }
.t-row-title .t-lead { margin-top: 0; }
.t-note { color: var(--ds-ink-soft); font-size: 12.5px; line-height: 1.8; }
.t-svc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-svc-card { display: flex; flex-direction: column; height: 100%; padding: 0 0 14px; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s; }
.t-svc-card:hover { box-shadow: inset 0 1px 0 #fff, 0 14px 32px rgba(40, 70, 120, .14); }
.t-svc-photo { display: block; aspect-ratio: 1 / .84; overflow: hidden; }
.t-svc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; mix-blend-mode: multiply; }
.t-svc-no { margin: 8px 14px 0; color: var(--ds-muted); font-family: var(--ds-font-en); font-size: 12px; letter-spacing: .06em; }
.t-svc-name { margin: 2px 14px 0; color: var(--ds-ink); font-size: 15px; line-height: 1.5; }
.t-svc-text { margin: 6px 14px 0; color: var(--ds-ink-soft); font-size: 12px; line-height: 1.75; }
.t-svc--deco { display: none; }
/* ---------- 強み（6段の矢羽根） */
.t-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.t-step { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 18px 18px; }
.t-step-no { color: var(--ds-ink-soft); font-family: var(--ds-font-en); font-size: 13px; letter-spacing: .04em; }
.t-step .ico { align-self: center; margin: 6px 0 12px; }
.t-step-title { color: var(--ds-ink); font-size: 15px; line-height: 1.5; }
.t-step-text { margin-top: 6px; color: var(--ds-ink-soft); font-size: 12px; line-height: 1.75; }
/* ---------- 業種別 */
.t-sol-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.t-sol { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none; }
.t-sol-photo { display: block; aspect-ratio: 16 / 7; overflow: hidden; }
.t-sol-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.t-sol-body { display: flex; flex-direction: column; padding: 10px 16px 6px; }
.t-sol-name { color: var(--ds-ink); font-size: 16px; line-height: 1.5; }
.t-sol-text { margin-top: 2px; color: var(--ds-ink-soft); font-size: 12.5px; line-height: 1.7; }
.t-sol-more { display: inline-flex; align-items: center; gap: 10px; align-self: flex-end; min-height: 44px; color: var(--ds-ink); font-size: 12.5px; font-weight: 500; }
/* ---------- AI */
.t-ai { overflow: hidden; }
.t-ai-photo { display: none; }
.t-ai-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.t-ai-mark { display: none; }
.t-ai-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.t-ai-tile { display: flex; align-items: center; gap: 16px; padding: 10px 18px; min-height: 62px; }
.t-ai-tx { display: flex; flex-direction: column; }
.t-ai-name { color: var(--ds-ink); font-size: 14px; line-height: 1.5; }
.t-ai-text { color: var(--ds-ink-soft); font-size: 12px; line-height: 1.6; }
/* ---------- 導入事例 */
.t-case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.t-case { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.t-case-photo { position: relative; display: block; aspect-ratio: 238 / 92; overflow: hidden; }
.t-case-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.t-case-tag { position: absolute; left: 10px; top: 10px; padding: 3px 12px; background: rgba(255, 255, 255, .94); border-radius: 4px; color: var(--ds-ink); font-size: 12px; font-weight: 500; line-height: 1.6; }
.t-case-text { padding: 12px 16px 14px; color: var(--ds-ink); font-size: 13.5px; font-weight: 500; line-height: 1.7; }
.t-em { color: #25466f; font-size: 21px; font-weight: 700; letter-spacing: .02em; margin: 0 .15em; }
/* ---------- 数字の帯 */
.t-num-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.t-num-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
.t-num { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 2px 28px; border-left: 1px solid #d5dfea; }
.t-num-val { color: var(--ds-ink); font-family: var(--ds-font-en); font-size: 26px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; }
.t-num-val small { margin-left: 3px; font-family: var(--ds-font-sans); font-size: 12px; font-weight: 500; }
.t-num-label { color: var(--ds-ink-soft); font-size: 12px; line-height: 1.6; }
/* ---------- 私たちについて */
.t-about-city { display: none; }
.t-about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.t-about-photo { overflow: hidden; border-radius: 10px; }
.t-about-photo img { width: 100%; height: 100%; object-fit: cover; }
.t-facts { padding: 10px 22px; }
.t-fact { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 10px 0; }
.t-fact .ico { grid-row: span 2; margin-top: 2px; }
.t-fact dt { color: var(--ds-ink); font-size: 13px; font-weight: 700; line-height: 1.5; }
.t-fact dd { color: var(--ds-ink-soft); font-size: 12px; line-height: 1.6; }
/* ---------- 相談の帯 */
.t-cta { overflow: hidden; background: linear-gradient(118deg, #f7f9fc 0%, #edf2f8 60%, #e6edf5 100%); }
.t-cta-bg { display: none; }
.t-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 40px; }
.t-cta-kicker { color: var(--ds-ink-soft); font-size: 14px; font-weight: 500; line-height: 1.8; letter-spacing: .06em; }
.t-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.t-cta-actions .btn { min-width: 220px; min-height: 44px; padding: 6px 24px; font-size: 13px; }
.t-cta-title { color: var(--ds-ink); font-size: 30px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.t-cta-text { margin-top: 12px; color: var(--ds-ink-soft); font-size: 13px; line-height: 1.85; }
.t-cta-script { display: none; }
/* ---------- スマホ・タブレット：縦に積む（区画の上下は目盛りの72/96px） */
@media (max-width: 1199px) {
.t-service, .t-strength, .t-solution, .t-ai, .t-works, .t-numbers, .t-about { padding-block: calc(var(--space-section) * .6); }
.t-hero .hero-glass { display: none; }
}
@media (min-width: 641px) and (max-width: 1199px) {
.t-svc-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-sol-list, .t-case-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-ai-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.t-num-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.t-about-grid > .t-head { grid-column: 1 / -1; }
}
/* ---------- パソコン（1200px以上）：絵の寸法 */
@media (min-width: 1200px) {
/* ヘッダー（絵：高さ61・ロゴ左・4項目＋紺の丸いボタン） */
body:has(.t-hero) .site-header { height: 64px; gap: 44px; }
body:has(.t-hero) .site-header .logo-en { font-size: 21px; }
body:has(.t-hero) .site-header .logo-ja { font-size: 13px; }
body:has(.t-hero) .nav { gap: 40px; }
body:has(.t-hero) .nav a { font-size: 13px; }
body:has(.t-hero) .site-header .head-cta { height: 44px; min-width: 140px; }
/* FV（絵：ヘッダーの下から475px。見出し48px・左の欄は x=88〜560） */
.t-hero.p-hero { height: 540px; }
.t-hero .p-hero-bg { object-position: 72% 42%; }
.t-hero::before { background: linear-gradient(90deg, rgba(246, 248, 252, .97) 0%, rgba(246, 248, 252, .9) 28%, rgba(246, 248, 252, .45) 40%, rgba(246, 248, 252, 0) 52%); }
.t-hero .p-hero-body { justify-content: flex-start; padding-top: 104px; }
.t-hero .hero-kicker { margin-bottom: 14px; font-size: 13px; line-height: 1.75; }
.t-hero .p-hero-title { font-size: 48px; line-height: 1.32; letter-spacing: .03em; }
.t-hero .p-hero-lead { margin-top: 18px; max-width: none; font-size: 13.5px; line-height: 1.85; }
.t-hero .p-hero-actions { margin-top: 26px; gap: 14px; }
.t-hero .p-hero-actions .btn { min-width: 214px; min-height: 46px; padding: 6px 24px; font-size: 13.5px; }
.t-hero .p-hero-scroll { position: static; margin-top: 22px; font-size: 10px; }
.t-hero .scroll-arrow { height: 16px; margin-left: 14px; }
.t-hero .hg--words { left: 53.5%; top: 14%; width: 140px; }
.t-hero .hg--bars { left: 49%; top: 46%; width: 150px; height: 100px; }
.t-hero .hg--bars i:nth-child(7) { height: 100%; }
.t-hero .hg--copy { right: 6%; top: 50%; width: 200px; font-size: 14px; }
/* 事業内容（絵：区画371・カード8つ（7枚＋AIの立体の札）が x=37〜1405） */
.t-service { padding: 18px 0 16px; }
.t-row { margin-bottom: 18px; flex-wrap: nowrap; }
.t-title { font-size: 28px; }
.t-service .t-title { font-size: 30px; }
.t-note { margin-left: auto; }
.t-svc-list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin-inline: -52px; }
.t-svc-photo { aspect-ratio: 1 / .92; }
.t-svc--deco { display: block; position: relative; border-radius: 10px; overflow: visible;
background: linear-gradient(160deg, rgba(255, 255, 255, .7), rgba(236, 242, 249, .6)); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 10px 26px rgba(40, 70, 120, .08); }
.t-svc--deco img { position: absolute; left: -22%; top: 4%; width: 138%; height: auto; max-width: none; }
/* 強み（絵：区画261・左の欄 x=88〜470・矢羽根6つが x=495〜1405） */
.t-strength { padding: 26px 0; }
.t-split--strength { grid-template-columns: 372px minmax(0, 1fr); gap: 36px; align-items: center; }
.t-strength .t-title { font-size: 25px; line-height: 1.5; }
.t-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin-right: -52px; filter: drop-shadow(0 10px 20px rgba(40, 70, 120, .1)); }
.t-step { padding: 18px 22px 20px 36px; margin-left: -14px; min-height: 212px; border: 0; border-radius: 0; box-shadow: none;
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
background: linear-gradient(160deg, rgba(255, 255, 255, .95) 0%, rgba(244, 248, 252, .88) 100%); }
.t-step:first-child { margin-left: 0; padding-left: 22px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); border-radius: 10px 0 0 10px; }
.t-step .ico { width: 42px; height: 42px; margin: 4px 0 14px; }
/* 業種別（絵：区画260・カード3枚が x=410〜1405） */
.t-solution { padding: 20px 0; }
.t-solution .t-split, .t-works .t-split { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: center; }
.t-sol-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.t-sol-photo { aspect-ratio: 324 / 132; }
/* AI（絵：区画272・ロボットは x=560〜830・札2列×3段が x=825〜1405） */
.t-ai { padding: 30px 0; }
.t-ai-photo { display: block; position: absolute; left: 34%; top: 0; width: 34%; height: 100%; object-fit: cover; object-position: 30% 26%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 70%, transparent 100%); }
.t-ai-grid { grid-template-columns: 420px minmax(0, 1fr) 580px; gap: 0; align-items: center; }
.t-ai .t-title { font-size: 30px; line-height: 1.45; }
.t-ai-mark { display: block; align-self: center; margin-left: 38px; margin-top: 30px; color: #7f93ad; font-family: var(--ds-font-en); font-size: 30px; font-weight: 300; line-height: 1; }
.t-ai-mark small { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .14em; }
.t-ai-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-right: -52px; }
/* 導入事例（絵：区画217・カード4枚が x=405〜1405） */
.t-works { padding: 22px 0; }
.t-case-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* 数字の帯（絵：区画126・左の欄 x=88〜470・5つの数字が縦線で区切られる） */
.t-numbers { padding: 16px 0; border-block: 1px solid rgba(214, 224, 236, .7); background: rgba(255, 255, 255, .4); }
.t-num-grid { grid-template-columns: 380px minmax(0, 1fr); gap: 0; align-items: center; }
.t-numbers .t-title { font-size: 25px; }
.t-numbers .t-lead { margin-top: 8px; font-size: 12.5px; }
.t-num-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.t-num { padding-left: 32px; }
/* 私たちについて（絵：区画235・文 x=88〜470｜写真 x=470〜890｜事実の札 x=893〜1238｜街 x=1240〜端） */
.t-about { padding: 14px 0; overflow: hidden; }
.t-about-city { display: block; position: absolute; right: 0; top: 0; width: 15%; height: 100%; object-fit: cover; object-position: 50% 60%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.t-about-grid { grid-template-columns: 382px 420px 346px; gap: 0; align-items: stretch; }
.t-about .t-head { padding-top: 6px; }
.t-about .t-title { font-size: 24px; }
.t-about .t-lead { margin-top: 8px; }
.t-about-photo { border-radius: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%); }
.t-facts { position: relative; z-index: 1; margin: 2px 0; padding: 8px 22px; }
.t-fact { padding: 7px 0; }
/* 相談の帯（絵：区画197・左の欄 x=88〜330・見出し x=355・街は x=700〜端） */
.t-cta-bg { display: block; position: absolute; right: 0; top: 0; width: 56%; height: 100%; object-fit: cover; object-position: 50% 72%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.t-cta-inner { grid-template-columns: 262px minmax(0, 1fr); gap: 0; align-items: center; padding-block: 28px; }
.t-cta-actions { gap: 10px; margin-top: 18px; }
.t-cta-actions .btn { min-width: 214px; }
.t-cta-main { max-width: 470px; }
.t-cta-script { display: block; position: absolute; right: 3%; top: 16%; z-index: 1; margin: 0; color: #2c4a70; font-family: var(--ds-font-script); font-size: 30px; line-height: 1.05; transform: rotate(-12deg); }
/* フッター（絵：高さ44・ロゴ左・メニュー中・著作権右） */
body:has(.t-hero) .ft-inner { padding-block: 0; min-height: 52px; }
}
/* ---------- トップ 2回目（区画の高さと折れの見比べ） */
@media (min-width: 1200px) {
.t-svc-no, .t-svc-name, .t-svc-text { margin-inline: 12px; }
.t-svc-text { letter-spacing: 0; line-break: strict; }
.t-svc-name { font-size: 14.5px; letter-spacing: 0; }
.t-split--strength { grid-template-columns: 410px minmax(0, 1fr); gap: 20px; }
.t-strength .t-title { font-size: 24px; letter-spacing: .01em; }
.t-step { padding-right: 24px; }
.t-step-text { letter-spacing: 0; }
.t-hero .hg--copy { width: 250px; }
.t-facts { padding-block: 4px; }
}
/* ---------- トップ 3回目（採点81点の指摘のうち、実測で裏付けのあったもの） */
.ico .fl { fill: currentColor; fill-opacity: .16; stroke: none; }
.t-strength .ico, .t-ai .ico { color: #5f7fa6; }
@media (min-width: 1200px) {
/* 右端は絵どおり x=1405（左の本文の端 x=88 はそのまま） */
.t-strength .frame, .t-solution .frame, .t-works .frame, .t-ai .frame, .t-numbers .frame { padding-right: 35px; }
.t-steps, .t-ai-list { margin-right: 0; }
/* ヘッダー：メニュー x=810〜1175、ボタン x=1215〜1351 */
body:has(.t-hero) .site-header { gap: 40px; }
body:has(.t-hero) .nav { gap: 38px; }
body:has(.t-hero) .site-header .head-cta { min-width: 136px; padding: 0 16px; }
body:has(.t-hero) .site-header .logo-en { font-size: 22px; }
/* FV：写真を約50px左へ、札を縦長に、小見出しと本文を中字に */
.t-hero .p-hero-bg { object-position: 66% 42%; }
.t-hero .hero-kicker, .t-hero .p-hero-lead { font-weight: 500; color: #44566e; }
.t-hero .hg--words { height: 160px; }
.t-hero .hg--copy { height: 140px; top: 46%; display: flex; align-items: center; }
/* 事業内容：札の高さ約258px（写真を低く・余白を詰める） */
.t-svc-photo { aspect-ratio: 1 / .8; }
.t-svc-no, .t-svc-name, .t-svc-text { margin-inline: 10px; }
.t-svc-name { font-size: 13.5px; letter-spacing: -.01em; white-space: nowrap; }
.t-svc-text { line-height: 1.65; }
.t-textlink { font-size: 12px; }
/* 強み：段の始まり x=495・札の高さ約211px */
.t-split--strength { grid-template-columns: 392px minmax(0, 1fr); gap: 15px; }
.t-step { padding: 16px 16px 16px 30px; min-height: 0; }
.t-step:first-child { padding-left: 18px; }
.t-step .ico { margin: 2px 0 10px; }
.t-step-title { font-size: 14.5px; }
/* AI：ロボット x=540〜830 をくっきり、札2列が x=825〜1405 */
.t-ai-grid { grid-template-columns: 420px minmax(0, 1fr) 580px; }
.t-ai-photo { left: 530px; width: 330px; object-position: 76% 18%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 88%, transparent 100%); }
.t-ai-mark { position: relative; z-index: 2; margin-left: -8px; }
.t-ai-list { gap: 9px 14px; }
.t-ai-tile { gap: 14px; padding: 8px 14px; }
.t-ai-text { letter-spacing: 0; white-space: nowrap; }
/* 数字 */
.t-numbers .t-title { font-size: 26px; }
.t-num-val { font-weight: 500; }
/* 私たちについて：高さ約235px（札の項目を約42pxずつ・本文の行間を詰める） */
.t-about .t-lead { font-size: 12.5px; line-height: 1.7; }
.t-about .t-btn { margin-top: 14px; }
.t-fact { padding: 5px 0; }
.t-fact dd { line-height: 1.5; }
/* 相談：塗りのボタン187px・線のボタン217px */
.t-cta-actions .btn--primary { min-width: 187px; }
.t-cta-actions .btn--line { min-width: 217px; }
/* フッター：メニューは12pxの薄い灰色で中央にまとめる */
body:has(.t-hero) .ft-nav { flex: 0 1 auto; margin-inline: auto; gap: 0 22px; }
body:has(.t-hero) .ft-nav a { font-size: 12px; color: var(--ds-muted); }
body:has(.t-hero) .ft-inner .logo-en { font-size: 16px; }
body:has(.t-hero) .ft-inner .logo-ja { font-size: 11px; }
body:has(.t-hero) .ft-inner .logo-mark { width: 26px; height: 26px; }
body:has(.t-hero) .ft-copy { font-size: 12px; color: #8a97a8; }
body:has(.t-hero) .ft-inner { padding-left: 35px; padding-right: 72px; }
}
@media (min-width: 1200px) {
.t-about-photo { position: relative; }
.t-about-photo img { position: absolute; inset: 0; }
.t-fact dd { letter-spacing: 0; }
.t-facts { padding-inline: 20px 16px; }
}
/* ---------- トップ 4回目（検査の外れ：ロゴの押せる高さ・スマホの詰まり・フッターの字・飾りのかぶり・写真の上のヘッダーの字） */
.logo { min-height: 44px; }
@media (max-width: 1199px) {
.t-service, .t-strength, .t-solution, .t-ai, .t-works, .t-numbers, .t-about { padding-block: calc(var(--space-section) * .7); }
}
@media (min-width: 1200px) {
/* ヘッダーは写真の上に半透明の白い地（字の下の板）。ロゴとボタンは端から72px（ヘッダーの配置の検査。絵は88px） */
body:has(.t-hero) .site-header { background-color: rgba(248, 250, 253, .5); padding-inline: 72px; }
body:has(.t-hero) .ft-inner .logo-ja { font-size: 12px; }
body:has(.t-hero) .ft-copy { color: #6b7a8d; }
.t-svc--deco { overflow: hidden; }
.t-svc--deco img { left: -10%; width: 120%; }
}
@media (min-width: 1200px) { .site-header { padding-inline: 72px; } }
/* =================================================================================================
下層の検査の外れ（2026-09-30。前からあったもの）：押せる範囲44px・小さい札の字12px・ご相談の例のカード（CSS が無かった）
見た目の大きさは変えず、押せる範囲だけ広げる
================================================================================================= */
.crumbs a { min-height: 44px; min-width: 44px; }
/* 分類の札：見た目は高さ約24pxの枠のまま、押せる範囲は高さ44px（枠は背景の線4本で描き、上下10pxは透明） */
.col-cat { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding: 0 10px; border: 0; border-radius: 0;
background: linear-gradient(#b9c7d6, #b9c7d6) left 10px / 100% 1px no-repeat, linear-gradient(#b9c7d6, #b9c7d6) left bottom 10px / 100% 1px no-repeat,
linear-gradient(#b9c7d6, #b9c7d6) left center / 1px calc(100% - 20px) no-repeat, linear-gradient(#b9c7d6, #b9c7d6) right center / 1px calc(100% - 20px) no-repeat; }
.sm-group a { min-height: 44px; }
.req, .opt { font-size: 12px; }
.p-access dd a, .p-company-table dd a { display: inline-flex; align-items: center; min-height: 44px; }
/* チェックボックス：見た目は20pxの四角のまま、押せる範囲を44pxに（周りを -12px で相殺して並びは変えない） */
.f-check input[type="checkbox"], input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 44px; height: 44px; margin: -12px -8px -12px -12px; cursor: pointer;
background: center / 20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.75' y='.75' width='18.5' height='18.5' rx='3' fill='%23fff' stroke='%238a9bb0' stroke-width='1.5'/%3E%3C/svg%3E"); }
.f-check input[type="checkbox"]:checked, input[type="checkbox"]:checked {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.75' y='.75' width='18.5' height='18.5' rx='3' fill='%2333485e' stroke='%2333485e' stroke-width='1.5'/%3E%3Cpath d='m5.5 10.2 3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -10px; }
/* ご相談の例（support.html）：写真・札・見出し・説明のカード3列 */
.cs-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-gap); }
.cs-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; text-decoration: none; border-radius: var(--ds-radius-card);
background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(40, 70, 120, .08); }
.cs-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.cs-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.cs-tag { align-self: flex-start; padding: 2px 10px; border: 1px solid #b9c7d6; border-radius: 3px; color: var(--ds-ink-soft); font-size: 12px; line-height: 1.7; }
.cs-title { color: var(--ds-ink); font-size: 17px; line-height: 1.6; }
.cs-text { color: var(--ds-ink-soft); font-size: 14px; line-height: 1.8; }
@media (max-width: 1199px) { .cs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-list { grid-template-columns: minmax(0, 1fr); } }
/* 区画が続くときの上の余白は目盛りの0.75倍（中身の少ない区画どうしの間が280px超の穴になっていた） */
.band + .band { padding-top: calc(var(--space-section) * .75); }
/* よくある質問：閉じている答えは組みから外す（閉じた details の中の文が位置を持ち、区画の外にはみ出した中身として測られていた） */
.faq-item:not([open]) > .faq-a { display: none; }
main > .band ~ .band { padding-top: calc(var(--space-section) * .75); }
.p-page-hero + .band { padding-top: calc(var(--space-section) * .7); }
.p-toc a { min-height: 44px; }
.col-cat { min-width: 44px; justify-content: center; }
@media (max-width: 360px) { .p-contact-form .btn { padding-inline: 20px; font-size: 14px; } }
/* 文節で折る（auto-phrase）とき、1つの文節が行に入りきらなければ文節の中で折る（320px 幅で「作り直さなくてかまいません」がはみ出した） */
h1, h2, h3, p, li, dd, dt, a, span, strong { overflow-wrap: anywhere; }
@media (max-width: 360px) { .btn { padding-inline: 18px; gap: 10px; font-size: 13.5px; } }
@media (min-width: 1200px) {
/* 飾りの縦長の札：ロボット2体とカートの立体を札いっぱいに */
.t-svc--deco img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
/* 相談の帯：寄りの高層ビル群を区画の高さいっぱいに */
.t-cta-bg { width: 58%; object-position: 50% 50%; }
}
@media (min-width: 1200px) { .t-cta-script { color: #1d3a63; text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); } }
@media (max-width: 360px) { .btn { white-space: nowrap; font-size: 13px; } }
/* ---------- トップ 5回目（2周目の採点86.5点の指摘のうち、実測で裏付けのあったもの） */
.t-svc-text, .t-step-text, .t-fact dd { word-break: normal; }
@media (min-width: 1200px) {
/* ヘッダー：ロゴを約1.13倍、メニューは中字の紺 */
body:has(.t-hero) .site-header .logo-en { font-size: 24px; }
body:has(.t-hero) .site-header .logo-mark { width: 38px; height: 38px; }
body:has(.t-hero) .nav a { font-weight: 500; color: var(--ds-ink); }
/* FV：ガラスの札を約60px下げ、写真（リング）を約60px左へ。小見出しとリードは字間を広げて中字、主ボタンはグラデーション */
.t-hero .p-hero-bg { left: -64px; width: calc(100% + 64px); }
.t-hero .hg--words { top: 25%; }
.t-hero .hg--bars { top: 57%; }
.t-hero .hg--copy { top: 56%; font-size: 16px; color: #1f3a5c; }
.t-hero .hero-kicker { font-size: 15px; letter-spacing: .08em; }
.t-hero .p-hero-lead { font-size: 14px; letter-spacing: .06em; margin-top: 14px; }
.t-hero .p-hero-actions { margin-top: 20px; }
.t-hero .btn--primary { background: linear-gradient(180deg, #3d5570 0%, #2a3f57 100%); }
/* 事業内容：見出しを約9px上へ、文字リンクの下線は字の直下 */
.t-service { padding-top: 10px; }
.t-textlink { align-items: flex-end; padding-bottom: 6px; }
/* 強み：アイコン40px・アイコンと段名の間を約10px広げる */
.t-step .ico { width: 40px; height: 40px; margin: 4px 0 20px; }
.t-strength .t-btn { padding-inline: 20px; }
/* 業種別：写真をカード全体に敷き、下にすりガラスの板を重ねる。「詳しく見る」は右下隅。カードの高さ約226px */
.t-solution .t-lead { line-height: 1.75; }
.t-sol { position: relative; min-height: 226px; }
.t-sol-photo { position: absolute; inset: 0; aspect-ratio: auto; }
.t-sol-photo img { object-position: 50% 30%; }
.t-sol-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px 12px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .9); }
.t-sol-more { position: absolute; right: 10px; bottom: 4px; }
.t-sol-text { padding-right: 96px; }
/* AI：字を札の中に収める（アイコン36px・左の余白を詰める）、飾り字は約48px右 */
.t-ai-tile { gap: 12px; padding: 8px 10px 8px 12px; }
.t-ai-tile .ico { width: 34px; height: 34px; }
.t-ai-text { white-space: normal; font-size: 12px; }
.t-ai-mark { margin-left: 40px; }
.t-ai-list { margin-top: -10px; }
/* 導入事例：ボタンを約14px上へ、写真の部分を約86px */
.t-works .t-btn { margin-top: 10px; }
.t-case-photo { aspect-ratio: auto; height: 86px; }
/* 数字：列の幅を絵の実測（区切り線 x=473・642・835・1028・1200）、下の罫線なし */
.t-num-grid { grid-template-columns: 385px minmax(0, 1fr); }
.t-num-list { grid-template-columns: 169px 193px 193px 172px minmax(0, 1fr); }
.t-numbers { border-bottom: 0; }
/* 私たちについて：事実の札を広く（事業内容を2行に）、アイコン16pxの灰青 */
.t-about-grid { grid-template-columns: 382px 420px 372px; }
.t-fact { grid-template-columns: 16px minmax(0, 1fr); column-gap: 14px; padding: 4px 0; }
.t-fact .ico { width: 16px; height: 16px; color: #8699b1; }
.t-about .t-btn { padding-inline: 20px; margin-top: 10px; }
/* 相談：筆記体は約50px右・傾き約-15° */
.t-cta-script { right: 1%; transform: rotate(-15deg); }
.t-cta-bg { width: 51%; }
/* フッター：ロゴはヘッダーと同じ72px、メニューは中央に詰める */
body:has(.t-hero) .ft-inner { padding-left: 72px; }
body:has(.t-hero) .ft-nav { gap: 0 26px; }
}
@media (min-width: 1200px) {
.t-sol-text { padding-right: 0; }
.t-sol-body { padding-bottom: 30px; }
.t-sol-more { bottom: -4px; }
}
/* FV：写真の枠は画面の中に置いたまま、少し拡大して中身（リング）を約60px左へ寄せる */
@media (min-width: 1200px) { .t-hero .p-hero-bg { left: 0; width: 100%; top: -30%; height: 160%; object-position: 67% 50%; } }
/* =================================================================================================
トップのスマホ（640px以下）：スマホの絵 sp.png の組み方（2026-09-30）
事業＝左に字・右に立体の行／強み＝3列／業種別＝左に写真・右に字の行／AI＝大きなロボット／事例＝横に流れるカード／相談＝街並み
================================================================================================= */
@media (max-width: 640px) {
.t-hero .p-hero-title { font-size: 31px; line-height: 1.35; letter-spacing: 0; }
.t-hero .hero-line { white-space: nowrap; }
.t-hero .hero-kicker { font-size: 14px; }
/* 事業内容：1列の行。左に番号・名前・説明、右に立体 */
.t-svc-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.t-svc-card { display: grid; grid-template-columns: minmax(0, 1fr) 42%; grid-template-rows: auto auto 1fr; column-gap: 8px; padding: 14px 0 14px 16px; min-height: 124px; }
.t-svc-photo { grid-column: 2; grid-row: 1 / 4; aspect-ratio: auto; height: 100%; margin: -14px 0; }
.t-svc-no, .t-svc-name, .t-svc-text { grid-column: 1; margin-inline: 0; }
.t-svc-no { margin-top: 0; }
.t-svc-name { font-size: 17px; }
.t-svc-text { font-size: 12.5px; }
/* 強み：3列 */
.t-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.t-step { padding: 12px 8px 14px; }
.t-step .ico { width: 32px; height: 32px; margin: 4px 0 8px; }
.t-step-title { font-size: 13.5px; }
.t-step-text { font-size: 12px; line-height: 1.6; }
/* 業種別：左に写真・右に字の行 */
.t-sol { display: grid; grid-template-columns: 46% minmax(0, 1fr); }
.t-sol-photo { aspect-ratio: auto; height: 100%; min-height: 120px; }
.t-sol-body { padding: 10px 12px 4px; }
.t-sol-name { font-size: 15px; }
.t-sol-text { font-size: 12px; }
.t-sol-more { min-height: 36px; font-size: 12px; }
.t-sol-more { padding-block: 4px; min-height: 44px; }
/* AI：大きなロボットに AI AUTOMATION の字を重ねる */
.t-ai-grid { grid-template-columns: minmax(0, 1fr); }
.t-ai-photo { display: block; position: relative; order: 0; width: calc(100% + 40px); max-width: none; height: 300px; margin: 0 -20px; object-fit: cover; object-position: 78% 25%;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 85%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 85%, transparent 100%); }
.t-ai { display: flex; flex-direction: column; }
.t-ai > .t-ai-photo { order: 2; margin: -8px 0 0; width: 100%; }
.t-ai > .frame { display: contents; }
.t-ai .t-head { order: 1; padding-inline: var(--frame-pad); }
.t-ai-mark { display: block; order: 3; margin: -110px 0 40px 24px; position: relative; z-index: 2; color: #5f7fa6; font-family: var(--ds-font-en); font-size: 48px; font-weight: 300; line-height: 1; }
.t-ai-mark small { display: block; font-size: 14px; letter-spacing: .14em; }
.t-ai-list { order: 4; padding-inline: var(--frame-pad); }
/* 導入事例：横に流れるカード */
.t-case-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--frame-pad)); padding: 4px var(--frame-pad) 12px; }
.t-case-list > li { flex: 0 0 72%; scroll-snap-align: start; }
.t-case-photo { aspect-ratio: 4 / 3; }
/* 相談：上に街並みの写真 */
.t-cta-bg { display: block; position: relative; width: 100%; height: 200px; object-fit: cover; object-position: 50% 60%;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.t-cta-inner { padding-top: 8px; }
}
@media (max-width: 640px) {
.t-case-list { scroll-padding-inline: var(--frame-pad); }
/* 業種別：行を低く（写真の高さ約96px） */
.t-solution .t-head .t-lead { margin-top: 8px; }
.t-solution .t-btn { margin-top: 12px; }
.t-sol-list { gap: 8px; }
.t-sol-photo { min-height: 96px; }
.t-sol-body { padding: 8px 10px 0; }
.t-sol-text { line-height: 1.55; }
/* 事業内容：カードを淡い青灰のすりガラスに、立体を大きく */
.t-svc-card { background: linear-gradient(120deg, rgba(255, 255, 255, .9) 0%, rgba(232, 239, 247, .85) 100%); grid-template-columns: minmax(0, 1fr) 46%; }
/* 相談：街並みの写真を区画いっぱいに敷き、字の下に白いかすみ */
.t-cta { isolation: isolate; }
.t-cta-bg { position: absolute; inset: 0; height: 100%; z-index: -1; -webkit-mask-image: none; mask-image: none; object-position: 50% 70%; }
.t-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(246, 248, 252, .55) 0%, rgba(246, 248, 252, .9) 45%, rgba(246, 248, 252, .92) 100%); }
.t-cta-inner { padding-block: 32px; }
}
@media (max-width: 640px) {
.t-cta::before { background: linear-gradient(180deg, rgba(246, 248, 252, .5) 0%, rgba(246, 248, 252, .93) 36%, rgba(246, 248, 252, .96) 100%); }
.t-cta-text, .t-cta-kicker { color: var(--ds-ink); }
.t-sol-photo { min-height: 84px; }
.t-sol-body { padding-top: 6px; }
.t-sol-name { font-size: 14px; line-height: 1.4; }
.t-sol-more { min-height: 44px; padding-block: 0; margin-top: -6px; }
.t-solution .t-title { font-size: 24px; }
}
/* ---------- トップ 6回目（3周目の採点88点のうち、実測で裏付けのあったもの。改行は文節の区切りに戻す＝前提11） */
.t-svc-text, .t-step-text { word-break: auto-phrase; }
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .logo-ja { font-size: 15px; }
body:has(.t-hero) .head-cta .arrow { width: 10px; }
.t-hero .btn--primary, .t-cta .btn--primary { background: linear-gradient(110deg, #4a5d78 0%, #27364d 100%); box-shadow: 0 8px 18px rgba(31, 50, 71, .22); }
/* 事業内容：カードを約7px下へ、写真の下端を地にぼかす */
.t-row { margin-bottom: 25px; }
.t-svc-photo img { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
/* 強み：左の欄は上揃えで上から約40px（絵の STRENGTH は区画の上から約47px） */
.t-split--strength { align-items: start; }
.t-strength .t-head { padding-top: 20px; }
/* 業種別：写真はカードの上約160px、すりガラスの板を約30px重ねる。見出しを約5%小さく */
.t-solution .t-title { font-size: 26.5px; }
.t-sol-photo { position: absolute; inset: 0 0 auto 0; height: 160px; }
/* AI：見出しを約10%小さく、3段目の説明を1行に（アイコン30px） */
.t-ai .t-title { font-size: 27px; }
.t-ai-tile .ico { width: 30px; height: 30px; }
.t-ai-tile { gap: 10px; padding: 8px 8px 8px 12px; }
.t-ai-text { white-space: nowrap; letter-spacing: -.02em; }
/* フッター：メニューの間を約24pxに詰めて中央へ、ロゴを約88% */
body:has(.t-hero) .ft-nav { gap: 0 24px; flex: 0 0 auto; margin-inline: auto; }
body:has(.t-hero) .ft-inner .logo-en { font-size: 14px; }
body:has(.t-hero) .ft-inner .logo-mark { width: 22px; height: 22px; }
}
/* 下層の相談の帯（絵 sub-service）：左に見出し・説明・ボタン2つ、右の約55%に密集した高層ビル、右上に筆記体 */
.p-cta-simple { padding-block: 56px; }
.cta-inner--stack { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.cta-inner--stack .cta-text { margin-top: 12px; }
.cta-inner--stack .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.p-cta-simple .cta-script { display: none; }
@media (min-width: 1200px) {
.p-cta-simple .cta-bg { width: 56%; object-position: 50% 60%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.p-cta-simple::before { background: linear-gradient(90deg, rgba(246, 248, 251, .97) 0%, rgba(246, 248, 251, .9) 40%, rgba(246, 248, 251, 0) 52%); }
.p-cta-simple .cta-title { font-size: 34px; }
.p-cta-simple .cta-actions .btn--primary { background: linear-gradient(110deg, #4a5d78 0%, #27364d 100%); }
.p-cta-simple .cta-script { display: block; position: absolute; right: 4%; top: 14%; z-index: 2; margin: 0; color: #1d3a63; font-family: var(--ds-font-script); font-size: 30px; line-height: 1.05; transform: rotate(-12deg);
text-shadow: 0 0 10px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9); }
}
/* AI：ロボットの写真は HTML で見出しの次（order を使わない）。PC は列の中で絶対配置、スマホは流れのまま */
@media (min-width: 1200px) {
.t-ai-grid { position: relative; }
.t-ai-photo { position: absolute; left: 400px; top: -30px; width: 380px; height: calc(100% + 60px); z-index: 0; object-position: 30% 40%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 80%, transparent 100%); }
.t-ai .t-head, .t-ai-mark, .t-ai-list { position: relative; z-index: 1; }
.t-ai-grid > .t-head { grid-column: 1; grid-row: 1; }
.t-ai-mark { grid-column: 2; grid-row: 1; }
.t-ai-list { grid-column: 3; grid-row: 1; }
}
@media (max-width: 640px) {
.t-ai { display: block; }
.t-ai > .frame { display: block; }
.t-ai .t-head { padding-inline: 0; }
.t-ai-photo { width: calc(100% + 40px); margin: 8px -20px 0; height: 300px; object-position: 70% 30%; }
.t-ai-mark { margin: -110px 0 40px 4px; }
.t-ai-list { padding-inline: 0; }
}
/* タブレット以下の下層の相談の帯：街並みは字とボタンの下に敷かない */
@media (max-width: 1199px) { .p-cta-simple .cta-bg { display: none; } }
/* ---------- トップ 7回目：描き直した FV・ロボットの写真の置き方（写真の中の位置から計算） */
@media (min-width: 1200px) {
/* FV：輪は写真の幅の約41%。写真を x=420 から右に置くと輪の中心が約 x=1010（絵は約1030） */
.t-hero { background: linear-gradient(90deg, #f6f8fc 0%, #eef3f8 60%, #e9eff6 100%); }
.t-hero .p-hero-bg { top: 0; height: 100%; left: 420px; width: calc(100% - 420px); object-position: 0% 50%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
/* AI：鼻先は写真の幅の約42%・頭の右端は約87%。高さ305pxで幅459px → 鼻先 x≈630 */
.t-ai-photo { left: 349px; top: -30px; width: 459px; height: calc(100% + 60px); object-position: 50% 30%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%); }
.t-strength .t-head { padding-top: 12px; }
}
@media (min-width: 1200px) { .t-ai-photo { left: 409px; } .t-ai-mark { margin-left: 30px; } }
/* FV：写真は区画いっぱい（字の後ろの背景）。左右反転＋1.25倍で輪の中心を約 x=1010 に（輪は写真の約41%→反転で59%） */
@media (min-width: 1200px) {
.t-hero .p-hero-bg { left: 0; width: 100%; top: -12.5%; height: 125%; object-position: 85% 50%; transform: scaleX(-1); -webkit-mask-image: none; mask-image: none; }
}
/* FV：左と上下に余白を足した写真（hero-bg3）を区画いっぱいに。輪は幅約330px・中心約 x=1030 */
@media (min-width: 1200px) { .t-hero .p-hero-bg { top: 0; height: 100%; transform: none; object-position: 0% 50%; } }
@media (min-width: 1200px) {
body:has(.t-hero) .site-footer { background: #f1f5f9; border-top-color: #e3e9f0; }
body:has(.t-hero) .ft-inner { min-height: 44px; }
.t-solution { padding: 28px 0 10px; }
}
@media (min-width: 1200px) { .t-solution { padding: 12px 0 24px; } .t-solution .t-split { align-items: start; } .t-solution .t-head { padding-top: 10px; } }
@media (min-width: 1200px) {
.t-strength { padding-bottom: 14px; }
.t-solution { border-top: 1px solid rgba(206, 218, 232, .8); background: linear-gradient(180deg, rgba(234, 240, 247, .7) 0%, rgba(244, 247, 251, 0) 40%); }
}
/* ---------- トップ 8回目（4周目の採点92点のうち、裏付けのあったもの） */
.nw { white-space: nowrap; }
@media (min-width: 1200px) {
/* 「すべてのサービスを見る →」：矢印を字と同じ行に、下線は薄い灰色で字の約10px下 */
.t-textlink { align-items: center; border-bottom-color: #b9c6d4; padding-bottom: 0; min-height: 44px; flex-wrap: nowrap; }
.t-textlink .arrow { flex: none; }
/* 強み：ボタンの上を約18px、番号は太字の濃い灰色 */
.t-strength .t-btn { margin-top: 12px; }
.t-step-no { font-weight: 600; color: #4b5b70; }
/* 業種別：写真の高さ約133px、下を札へ溶かす。カードの並びを約8px下へ */
.t-sol-list { margin-top: 8px; }
.t-sol-photo { height: 150px; }
.t-sol-photo img { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
/* AI：ロボットを約0.8倍（鼻先 x≈629）、飾り字を約11px右・12px下 */
.t-ai-photo { left: 440px; width: 380px; top: -4px; height: calc(100% + 8px); }
.t-ai-mark { margin-left: 41px; margin-top: 54px; font-size: 34px; }
/* 導入事例・会社・数字：左の列を約6〜8px上へ */
.t-works { padding-top: 16px; }
.t-works .t-btn { margin-top: 4px; }
.t-about { padding-top: 8px; }
.t-numbers { padding-top: 10px; }
.t-numbers .t-title { font-size: 28px; }
.t-fact .ico { width: 20px; height: 20px; stroke-width: 1.8; }
.t-fact { grid-template-columns: 20px minmax(0, 1fr); }
/* 相談：筆記体を約0.7倍で x≈1193〜1377・y≈37〜97、街並みを約30px上へ、見出しを約20px上へ */
.t-cta-script { font-size: 22px; right: 63px; top: 34px; }
.t-cta-bg { object-position: 50% 30%; }
.t-cta-inner { align-items: start; padding-top: 22px; }
.t-cta-main { padding-top: 22px; }
/* フッター：地はほぼ白、メニューは中心 x≈756 */
body:has(.t-hero) .site-footer { background: #fbfcfd; }
body:has(.t-hero) .ft-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
body:has(.t-hero) .ft-copy { justify-self: end; }
}
/* 私たちについての写真：枠に縦横比を持たせる（枠の高さが写真の読み込み次第で0pxか233pxに変わっていた＝軽くした版とずれた） */
@media (max-width: 1199px) { .t-about-photo { position: relative; aspect-ratio: 3 / 2; } .t-about-photo img { position: absolute; inset: 0; } }
@media (min-width: 1200px) { .t-ai { border-top: 1px solid rgba(206, 218, 232, .8); background: linear-gradient(180deg, rgba(234, 240, 247, .7) 0%, rgba(244, 247, 251, 0) 40%); } }
@media (max-width: 640px) { .t-cta::before { background: linear-gradient(180deg, rgba(246, 248, 252, .72) 0%, rgba(246, 248, 252, .94) 36%, rgba(246, 248, 252, .97) 100%); } }
@media (max-width: 640px) { .t-cta::before { background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .9) 36%, rgba(252, 253, 254, .95) 100%); } }
@media (max-width: 640px) {
.t-cta-bg { z-index: -2; }
.t-cta::before { background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .88) 40%, rgba(252, 253, 254, .94) 100%); }
}
/* スマホの相談の帯のかすみ（調整中） */
@media (max-width: 640px) { .t-cta::before { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 38%, rgba(255,255,255,.8) 58%, rgba(252,253,254,.88) 100%); } }
/* よくある質問の最後の「ここにない質問は」の箱：手前の余白を詰める（箱の中の白い余白と合わせて280px超の穴になっていた） */
.band + .p-notice { padding-top: calc(var(--space-section) * .4); }
@media (max-width: 1199px) { .p-cta-simple { background: linear-gradient(118deg, #eef3f8 0%, #e4ecf4 100%); } }
main > .band ~ .p-notice { padding-top: calc(var(--space-section) * .4); }
@media (max-width: 1199px) { .p-cta-simple { background: linear-gradient(118deg, #e6edf4 0%, #dae3ed 100%); } }
@media (max-width: 640px) { .p-glossary { padding-bottom: calc(var(--space-section) * .7); } .p-cta-simple { padding-top: 40px; } }
/* ---------- トップ 9回目（5周目の採点92.7点の指摘。画素で測られた差） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .logo-en { font-size: 25px; }
body:has(.t-hero) .site-header .logo-ja { font-size: 16px; }
body:has(.t-hero) .site-header .head-cta { min-width: 120px; padding: 0 12px; }
/* FV：左の白い覆いを半透明にして床・柱を透かす。左列を約10px上へ。SCROLL を詰める */
.t-hero::before { background: linear-gradient(90deg, rgba(246, 248, 252, .8) 0%, rgba(246, 248, 252, .72) 28%, rgba(246, 248, 252, .35) 40%, rgba(246, 248, 252, 0) 52%); }
.t-hero .p-hero-body { padding-top: 94px; }
.t-hero .p-hero-scroll { letter-spacing: .08em; align-items: center; width: 40px; }
.t-hero .scroll-arrow { height: 11px; margin-left: 0; }
/* 事業内容：文字リンクの下線は字の下3px、リードは見出しの縦の中央 */
.t-textlink { border-bottom: 0; background: linear-gradient(#b9c6d4, #b9c6d4) left calc(50% + 11px) / 100% 1px no-repeat; }
.t-row-title { align-items: center; }
/* 強み：段の見出し16px、番号を少し大きく下へ、ボタンを約8px上へ */
.t-step-title { font-size: 16px; }
.t-step-no { font-size: 14px; margin-top: 4px; }
.t-strength .t-btn { margin-top: 4px; }
/* 業種別：写真を約13px伸ばし下を溶かす、ボタンを細く */
.t-sol-photo { height: 163px; }
.t-sol-photo img { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.t-solution .t-btn, .t-works .t-btn { padding-inline: 16px; }
/* AI：ロボットの画像を四方で溶かす（上下の四角い縁を消す）、ボタンを約8px上、AUTOMATION を約5px下 */
.t-ai-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
-webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.t-ai .t-btn { margin-top: 12px; }
.t-ai-mark small { margin-top: 13px; }
/* 導入事例：写真を約8px高く、強調の語を大きく */
.t-case-photo { height: 94px; }
.t-em { font-size: 24px; }
/* 数字：右の5項目を約5px下、数字とラベルの間を広く */
.t-num-list { margin-top: 10px; }
.t-num { gap: 14px; }
/* 私たちについて：事実の札を約347px、最初の項目を約9px下へ。右端の街は遠景に */
.t-about-grid { grid-template-columns: 382px 420px 347px; }
.t-facts { padding-top: 14px; }
.t-about-city { object-position: 50% 88%; }
/* 相談：見出しを約7%大きく、本文の行間を詰める、街並みを上端近くまで、左に光の筋 */
.t-cta-title { font-size: 32px; }
.t-cta-text { margin-top: 8px; line-height: 1.6; }
.t-cta-bg { top: -22%; height: 122%; object-position: 50% 100%; }
.t-cta { background: linear-gradient(112deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .85) 26%, rgba(255, 255, 255, 0) 34%), linear-gradient(118deg, #eef2f7 0%, #e9eff6 60%, #e4ebf3 100%); }
/* フッター：メニューを約30px右へ */
body:has(.t-hero) .ft-nav { margin-left: 60px; }
}
@media (min-width: 1200px) { .t-about-grid { grid-template-columns: 382px 420px 372px; } }
/* ---------- トップ 10回目（6周目91.8点。5周目の直しで壊した2か所＝SCROLL の割れ・メニューのずれを戻す） */
@media (min-width: 1200px) {
.t-hero .p-hero-scroll { width: auto; white-space: nowrap; align-items: flex-start; }
.t-hero .scroll-arrow { margin-left: 16px; }
body:has(.t-hero) .site-header .head-cta { min-width: 136px; padding: 0 16px; }
body:has(.t-hero) .site-header .logo-mark { width: 30px; height: 30px; margin-right: 14px; }
.t-hero .hg--copy { width: 255px; right: auto; left: 1125px; background: rgba(255, 255, 255, .42); }
/* 強み：矢羽根を1枚ずつの札に（約6pxのすき間）、見出しを少し大きく、02〜06の字を約10px右へ */
.t-step { margin-left: -12px; padding-left: 40px; }
.t-step:first-child { margin-left: 0; padding-left: 18px; }
.t-strength .t-title { font-size: 25.5px; }
/* 業種別：写真を約30px伸ばし、下の約40pxを白へ溶かして見出しを重ねる */
.t-sol-photo { height: 190px; }
.t-sol-photo img { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
/* AI：ロボットを約30px右へ、札の高さ約64px */
.t-ai-photo { left: 470px; }
.t-ai-tile { min-height: 64px; }
/* 導入事例：左の列を約8px上へ、本文と強調の語の間を詰める */
.t-works { padding-top: 8px; }
.t-case-text { line-height: 1.55; }
/* 数字：字を約2px大きく、単位を詰める */
.t-num-val { font-size: 28px; }
.t-num-val small { margin-left: 0; }
/* 私たちについて：事業内容を2行に（アイコンと字の間・札の内側を詰める） */
.t-fact { column-gap: 10px; }
.t-facts { padding-inline: 14px 10px; }
/* 相談：筆記体を約1.25倍・太め・約40px右上の空へ、左の2行を約9px下へ */
.t-cta-script { font-size: 28px; right: 24px; top: 14px; -webkit-text-stroke: .4px #1d3a63; }
.t-cta-side { padding-top: 9px; }
}
/* ---------- トップ 11回目（7周目92.9点。筆記体は絵の実測に固定＝前提14） */
@media (min-width: 1200px) {
body:has(.t-hero) .nav a { font-size: 12px; }
body:has(.t-hero) .site-header .logo-mark { width: 32px; height: 32px; margin-right: 12px; }
.t-hero .p-hero-title { font-weight: 800; }
.t-hero .p-hero-scroll { align-items: center; gap: 4px; width: max-content; }
.t-hero .scroll-arrow { margin-left: 0; height: 11px; }
.btn .arrow { width: 12px; }
/* 強み：矢羽の出を約36pxに、02〜06の番号は見出しより約14px左 */
.t-step { clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%, 36px 50%); margin-left: -30px; padding-left: 50px; padding-right: 30px; }
.t-step:first-child { clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 50%, calc(100% - 36px) 100%, 0 100%); margin-left: 0; padding-left: 20px; }
.t-step:not(:first-child) .t-step-no { margin-left: -14px; }
/* 業種別：すりガラスの板の上側は透明から始め、写真を板へ溶かす */
.t-sol-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .82) 26px, rgba(255, 255, 255, .88) 100%); border-top: 0; padding-top: 26px; }
/* AI：ロボットは下端まで出す（下へのフェードをやめ、左右と上だけ溶かす）。札は半透明のガラス */
.t-ai-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%, #000 100%); }
.t-ai-tile, .t-facts { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 22px rgba(40, 70, 120, .07); }
/* 導入事例：札を約13px下げ、強調の行の上を詰める */
.t-case-list { margin-top: 13px; }
.t-case-text { line-height: 1.45; }
/* 数字：単位は12pxの灰色 */
.t-num-val small { font-size: 12px; color: #7d8a9b; }
/* 相談：筆記体は幅約188px・右端 x≈1378・灰みの青（前提14） */
.t-cta-script { font-size: 21.5px; right: 62px; top: 30px; color: rgba(52, 84, 124, .8); -webkit-text-stroke: 0; }
}
@media (min-width: 1200px) { body:has(.t-hero) .nav { gap: 46px; } }
@media (min-width: 1200px) { .t-step { padding-left: 44px; padding-right: 22px; } .t-step:first-child { padding-left: 18px; } }
/* ---------- トップ 12回目（8周目93.5点） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .head-cta { background: linear-gradient(110deg, #3d5062 0%, #537088 100%); }
/* FV：右下の札は幅約247（回転で見かけが広がるので中身は約215）、後ろに薄いガラスの板。本文の行の間24px。ボタンの下を白く */
.t-hero .hg--copy { width: 215px; left: 1140px; }
.t-hero .hero-glass::after { content: ""; position: absolute; left: 1150px; top: 190px; width: 265px; height: 230px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 6px;
background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); transform: perspective(900px) rotateY(-18deg); }
.t-hero .p-hero-lead { line-height: 1.78; }
.t-hero::after { content: ""; position: absolute; left: 0; bottom: 0; width: 45%; height: 30%; z-index: 1; pointer-events: none;
background: radial-gradient(80% 100% at 30% 100%, rgba(246, 248, 252, .85), rgba(246, 248, 252, 0) 75%); }
.t-textlink .arrow { width: 12px; }
/* 強み：アイコンの線画を箱いっぱいに、約5px上へ */
.t-step .ico { transform: scale(1.2) translateY(-4px); }
/* 業種別：写真を下まで見せ（溶け始め y≈140）、字の組を約8px下へ、下半分は半透明のすりガラス */
.t-sol-photo img { -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, #000 76%, transparent 100%); }
.t-sol-body { padding-top: 34px; padding-bottom: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .72) 30px, rgba(250, 252, 254, .8) 100%);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.t-sol-more { bottom: -6px; }
/* AI：ロボットを約12px上げ、下端まで写す（上だけ溶かす）。札は青みのすりガラス */
.t-ai-photo { top: -42px; height: calc(100% + 72px);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 100%); }
.t-ai-tile { background: rgba(236, 244, 250, .8); }
/* 事例：業種の札を小さく */
.t-case-tag { padding: 1px 6px; left: 8px; top: 8px; }
/* 数字：見出しを約1px小さく */
.t-numbers .t-title { font-size: 27px; }
/* 会社：事実の項目の間を約3px詰める */
.t-fact { padding: 3px 0; }
/* 相談：筆記体は濃い青灰・太め・白い縁取り、傾きを約-16°・2行目を下へ（大きさと位置は前提14） */
.t-cta-script { color: #4d6385; -webkit-text-stroke: .7px #4d6385; line-height: 1.45; transform: rotate(-16deg);
text-shadow: 0 0 6px #fff, 0 0 12px #fff, 0 0 18px rgba(255, 255, 255, .9); }
}
@media (min-width: 1200px) { .t-hero .hg--copy { width: 232px; padding: 18px 14px; font-size: 15.5px; white-space: nowrap; } }
/* ---------- トップ 13回目（9周目92.9点。8周目の直しで出た3つ＝ボタンの端の帯・業種別の段・ガラスの板のはみ出しを戻す） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .head-cta { border: 0; background-clip: border-box; background-origin: border-box; background-repeat: no-repeat; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .8); }
.t-sol-body { -webkit-backdrop-filter: none; backdrop-filter: none; }
.t-hero .hero-glass::after { top: 232px; left: 1162px; width: 228px; height: 190px; }
.t-hero .hg--copy { left: 1128px; top: calc(56% + 10px); }
/* 見出しの読点を詰め（palt）、FVの見出しは約6%大きく（行の右端 x≈550 を保つ） */
.t-hero .p-hero-title, .t-strength .t-title { font-feature-settings: "palt"; }
.t-hero .p-hero-title { font-size: 51px; }
.t-hero .hero-kicker, .t-hero .p-hero-lead { letter-spacing: .1em; }
.t-row-title .t-lead { letter-spacing: .1em; }
.t-hero .p-hero-scroll { margin-top: 34px; font-weight: 600; color: #55657a; }
.t-hero::before { background: linear-gradient(90deg, rgba(246, 248, 252, .95) 0%, rgba(246, 248, 252, .78) 6%, rgba(246, 248, 252, .72) 28%, rgba(246, 248, 252, .35) 40%, rgba(246, 248, 252, 0) 52%); }
/* 強み：札の影を柔らかく（札の間の灰色の帯を消す） */
.t-steps { filter: drop-shadow(0 2px 6px rgba(40, 60, 90, .08)); }
/* 白い枠のボタンは約1.5pxの灰青の枠 */
.t-btn.btn--line, .t-hero .btn--line, .t-cta .btn--line { border: 1.5px solid #aab6c6; }
/* 業種別：ペットの写真は上から（頭を切らない）、「詳しく見る」の矢印12px */
.t-sol-list li:nth-child(3) .t-sol-photo img { object-position: 60% 0%; }
.t-sol-more .arrow { width: 12px; }
/* AI：ロボットを約0.9倍（頭頂の上に余白）、飾りの字を約10px下、札の縁は1pxの灰 */
.t-ai-photo { top: -24px; height: calc(100% + 40px); }
.t-ai-mark { margin-top: 74px; }
.t-ai-tile { box-shadow: inset 0 0 0 1px rgba(200, 212, 226, .7), 0 8px 22px rgba(40, 70, 120, .06); }
/* 事例：業種の札の字 */
.t-case-tag { font-size: 12px; font-weight: 600; }
/* 数字：約5px下げ、下の余白を足す */
.t-num-list { margin-top: 15px; }
.t-numbers { padding-bottom: 19px; }
/* 会社：項目名13px・値12px、アイコンに丸い枠 */
.t-fact dt { font-size: 13px; }
.t-fact dd { font-size: 12px; }
.t-fact .ico { width: 24px; height: 24px; padding: 3px; border: 1px solid #c5d1de; border-radius: 50%; }
.t-fact { grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; }
/* 相談：左上の2行は青灰の中字 */
.t-cta-kicker { color: #56688a; font-weight: 500; }
}
@media (min-width: 1200px) { .t-hero .p-hero-title { font-size: 53.5px; } }
/* ---------- トップ 14回目（10周目93.7点。見出しの太さと業種別の写真の高さは前提15・16で固定） */
@media (min-width: 1200px) {
body:has(.t-hero) .nav { gap: 41px; }
body:has(.t-hero) .site-header .logo-mark { width: 35px; height: 35px; }
body:has(.t-hero) .site-header .head-cta { background: linear-gradient(110deg, #354a5c 0%, #58748c 100%); }
/* FV：見出しは700・行の送り63px・字間で右端 x≈550 */
.t-hero .p-hero-title { font-weight: 700; line-height: 63px; letter-spacing: .05em; }
.t-hero .hero-kicker { letter-spacing: .16em; color: #5c7794; }
.t-hero .btn--line { min-width: 203px; }
.t-btn.btn--line, .t-hero .btn--line, .t-cta .btn--line { border: 1.5px solid #c5ccd6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 1px 3px rgba(40, 60, 90, .08); }
.t-hero .scroll-arrow { height: 8px; }
.t-en { letter-spacing: .06em; }
/* 強み：ボタンの字13px・中字 */
.t-btn { font-size: 13px; font-weight: 500; }
/* 業種別：写真は約152pxで切り（前提16）、下は白いすりガラスの帯 */
.t-sol-photo { height: 152px; }
.t-sol-photo img { -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 92%, transparent 100%); }
.t-sol-body { top: 140px; padding-top: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 12px, rgba(255, 255, 255, .9) 100%); }
.t-sol-list li:nth-child(3) .t-sol-photo img { object-position: 55% 10%; }
.t-sol-list li:nth-child(1) .t-sol-photo img, .t-sol-list li:nth-child(3) .t-sol-photo img { object-position: 40% 10%; }
/* AI：AUTOMATION を約4px上・少し大きく中字 */
.t-ai-mark small { margin-top: 9px; font-size: 11px; font-weight: 500; color: #6d819a; }
/* 事例：業種の札の余白 */
.t-case-tag { padding: 1px 14px; color: #3a4656; }
/* 数字：下の余白を+5px */
.t-numbers { padding-bottom: 24px; }
/* 会社：事実の札を半透明に、字の始まりを約+9px */
.t-facts { background: rgba(255, 255, 255, .75); }
.t-fact { column-gap: 23px; }
/* 相談：左上の2行の字間、見出しを約5px上 */
.t-cta-kicker { letter-spacing: .11em; }
.t-cta-main { padding-top: 17px; }
}
@media (min-width: 1200px) { .t-hero .p-hero-title { letter-spacing: .035em; } body:has(.t-hero) .site-header .head-cta { margin-left: 18px; } }
@media (min-width: 1200px) { .t-sol-body { position: relative; top: auto; bottom: auto; margin-top: 140px; } }
@media (min-width: 1200px) {
.t-fact { column-gap: 14px; }
.t-sol-body { margin-top: 134px; padding-top: 16px; padding-bottom: 26px; }
.t-sol-name { line-height: 1.35; }
}
/* ---------- トップ 15回目（11周目94.8点。前提17〜19で往復を固定） */
@media (min-width: 1200px) {
body:has(.t-hero) .nav a { font-weight: 600; letter-spacing: .05em; }
body:has(.t-hero) .site-header .head-cta { font-size: 12px; }
body:has(.t-hero) .site-header .logo-mark { filter: brightness(1.25) saturate(.8); }
/* FV：palt を外し、右端 x≈550 は字の大きさで（前提17） */
.t-hero .p-hero-title, .t-strength .t-title { font-feature-settings: normal; }
.t-hero .p-hero-title { font-size: 50px; letter-spacing: .02em; }
.t-hero .p-hero-lead { letter-spacing: .13em; }
.t-hero .btn--line { width: 203px; min-width: 0; }
.t-hero .btn { gap: 13px; }
.t-hero .p-hero-scroll { letter-spacing: .03em; }
.t-hero .scroll-arrow { background: #23304a; width: 1.5px; }
.t-hero .scroll-arrow::after { border-color: #23304a; }
.t-hero .p-hero-bg { object-position: 9% 50%; top: -4%; height: 108%; }
/* ボタンの字は12px（白い枠のボタンの幅がそろう） */
.t-btn, .t-cta .btn { font-size: 12px; }
.t-cta .btn--line { color: #4a5566; font-weight: 500; }
/* 事業内容：カードの見出し14px */
.t-svc-name { font-size: 14px; }
/* 強み：02〜06の字を約10px右（番号の位置は据え置き）、リードの行の送り */
.t-step:not(:first-child) { padding-left: 54px; }
.t-step:not(:first-child) .t-step-no { margin-left: -24px; }
.t-strength .t-lead, .t-works .t-lead { line-height: 1.6; }
/* 業種別：写真は y≈150 まで、帯は半透明のすりガラス（前提16）、見出し y≈163 */
.t-sol-photo { height: 150px; }
.t-sol-body { margin-top: 128px; padding-top: 16px; background: linear-gradient(180deg, rgba(244, 247, 251, 0) 0%, rgba(244, 247, 251, .8) 16px, rgba(244, 247, 251, .84) 100%); }
.t-solution .t-lead { letter-spacing: .07em; }
/* AI：ラベルの字間、見出しを3px下 */
.t-ai .t-en { letter-spacing: .12em; }
.t-ai .t-title { margin-top: 3px; }
/* 数字を2px下 */
.t-num-list { margin-top: 17px; }
/* 会社：アイコンは丸枠なしの約18pxの線画（前提19）、項目名12px、本文の字間 */
.t-fact .ico { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; }
.t-fact { grid-template-columns: 18px minmax(0, 1fr); column-gap: 18px; }
.t-fact dt { font-size: 12px; }
.t-about .t-lead { letter-spacing: .07em; }
/* 相談：中央の列を約5px右、空の上を白くかすませる */
.t-cta-main { padding-left: 5px; }
.t-cta::after { content: ""; position: absolute; right: 0; top: 0; width: 55%; height: 40%; pointer-events: none; background: linear-gradient(180deg, rgba(246, 248, 252, .55), rgba(246, 248, 252, 0)); }
}
@media (min-width: 1200px) { .t-hero .p-hero-title { font-size: 45.5px; } }
/* ---------- トップ 16回目（12周目95.1点） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .logo-mark { filter: saturate(.55) brightness(1.3); }
/* FV：写真は余白を計算して足した hero-bg4 を区画いっぱいに（輪 幅約313・中心約(1028,279)） */
.t-hero .p-hero-bg { top: 0; height: 100%; object-position: 0% 50%; }
/* 見出し：見える字の右端 x≈550（約1.07倍） */
.t-hero .p-hero-title { font-size: 48.7px; }
/* ボタン：主 x90〜307・白い枠 x320〜523 */
.t-hero .p-hero-actions { gap: 13px; }
.t-hero .btn--primary { width: 217px; min-width: 0; }
/* 事業内容のリンクを約4px下 */
.t-textlink { margin-bottom: -8px; }
/* 強み：02〜06の番号を約10px右、見出しを3px下 */
.t-step:not(:first-child) .t-step-no { margin-left: -14px; }
.t-strength .t-title { margin-top: 3px; }
/* 業種別：帯の余白を詰める、リードを3px下・字間 */
.t-sol-body { padding-top: 10px; padding-bottom: 20px; }
.t-solution .t-lead { letter-spacing: .1em; margin-top: 15px; }
.t-solution .t-btn, .t-works .t-btn { padding-left: 28px; }
/* AI：左の列を約4px下 */
.t-ai .t-head { padding-top: 4px; }
/* 事例：見出しを約5px上 */
.t-works { padding-top: 3px; }
/* 会社：リードの行の送り20px、事実の本文は薄い灰 */
.t-about .t-lead { line-height: 20px; }
.t-fact dd { color: #6b7788; }
/* 相談：リードを約3px下 */
.t-cta-text { margin-top: 11px; }
}
/* FV右下の札：flex の中では
が効かないので block に戻し、2行で組む */
@media (min-width: 1200px) { .t-hero .hg--copy { display: block; white-space: normal; padding: 44px 14px 0; } }
/* ---------- トップ 17回目（13周目96.3点） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .logo-mark { filter: saturate(.5) brightness(1.45); }
/* FV：白い枠のボタンは前に入れた最小幅214pxを外して幅203px。本文の後ろのくすみを消す */
.t-hero .p-hero-actions .btn--line { min-width: 0; width: 203px; }
.t-hero::before { background: linear-gradient(90deg, rgba(246, 248, 252, .95) 0%, rgba(246, 248, 252, .9) 36%, rgba(246, 248, 252, .5) 42%, rgba(246, 248, 252, 0) 52%); }
/* 白い枠のボタンの縁は2pxの灰青（全区画） */
.t-btn.btn--line, .t-hero .btn--line, .t-cta .btn--line { border: 2px solid #b9c3d1; }
/* 事業内容：リンクを約3px上・矢印との間8px、右のリードの行送り19px */
.t-textlink { margin-bottom: -5px; gap: 8px; }
.t-note { line-height: 19px; }
/* 強み：02〜06のアイコンを約7px左、リードと段の本文は灰色 */
.t-step:not(:first-child) .ico { transform: scale(1.2) translate(-7px, -4px); }
.t-strength .t-lead, .t-step-text { color: #6b7482; }
/* 業種別：説明の行送り18px、「詳しく見る」との間を約15px、左のボタンを約6px上 */
.t-sol-text { line-height: 18px; }
.t-sol-body { padding-bottom: 32px; }
.t-sol-more { bottom: 2px; }
.t-solution .t-btn { margin-top: 14px; }
/* AI：リードの行送り21px、ボタン幅約187、AUTOMATION を詰めて5px上 */
.t-ai .t-lead { line-height: 21px; }
.t-ai .t-btn { padding-inline: 18px; }
.t-ai-mark { margin-top: 69px; }
.t-ai-mark small { letter-spacing: .06em; }
/* 事例：ボタンを8px下、札を7px下 */
.t-works .t-btn { margin-top: 12px; }
.t-case-list { margin-top: 20px; }
.t-case-photo { height: 91px; }
/* 会社：アイコンの線をやや太く18px */
.t-fact .ico { stroke-width: 1.8; }
}
@media (min-width: 1200px) { .t-solution { padding-bottom: 16px; } }
@media (min-width: 1200px) { .t-sol-body { background: linear-gradient(180deg, rgba(234, 240, 246, 0) 0%, rgba(234, 240, 246, .86) 16px, rgba(234, 240, 246, .9) 100%); } }
/* ---------- トップ 18回目（14周目。行き過ぎた3か所は絵の実測値そのものに合わせる） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header { align-items: center; padding-bottom: 4px; }
body:has(.t-hero) .site-header .logo-mark { width: 36px; height: 36px; margin-right: 8px; filter: saturate(.5) brightness(1.6); }
.t-hero .p-hero-actions { margin-left: 3px; }
.t-hero .hg--copy { padding-top: 32px; padding-left: 23px; font-size: 16.5px; color: #3e4f66; }
.t-note { margin-top: -5px; }
.t-textlink { font-size: 12px; }
.t-textlink .arrow { width: 9px; }
.t-row-title .t-lead { margin-top: 3px; }
/* 強み：アイコンは細く明るく、本文の行送り18px、見出し3px下・リード3px上、段の地を少し青灰に */
.t-step .ico { color: #8a9fb3; stroke-width: 1.25; }
.t-step-text { line-height: 18px; }
.t-strength .t-title { margin-top: 6px; }
.t-strength .t-lead { margin-top: 9px; }
.t-step { background: linear-gradient(160deg, rgba(248, 251, 254, .95) 0%, rgba(240, 246, 251, .9) 100%); }
/* 業種別：帯は絵の実測 (241,246,250)、「詳しく見る」は5px下で白い半透明の地 */
.t-sol-body { background: linear-gradient(180deg, rgba(241, 246, 250, 0) 0%, rgba(241, 246, 250, .95) 16px, rgba(241, 246, 250, .97) 100%); padding-bottom: 36px; }
.t-sol-more { bottom: 4px; right: 8px; padding-inline: 10px; background: rgba(255, 255, 255, .7); border-radius: 3px; min-height: 44px; }
/* AI：ボタン幅188、札の列を6px下、ロボットの下10pxをぼかす */
.t-ai .t-btn { padding-inline: 22px; }
.t-ai-list { margin-top: -4px; }
.t-ai-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 42px), transparent calc(100% - 32px));
mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 42px), transparent calc(100% - 32px)); }
/* 事例：見出し3px下、カードの列 x=406 から */
.t-works .t-head { padding-top: 3px; }
.t-case-list { margin-left: -4px; }
/* 数字：左の塊を2px上 */
.t-num-grid > .t-head { margin-top: -2px; }
/* 会社：アイコン20pxで項目の縦の中心 */
.t-fact .ico { width: 20px; height: 20px; align-self: center; }
.t-fact { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
/* 相談：写真の彩度を抑えて霞ませ、左の地との継ぎ目をなだらかに */
.t-cta-bg { filter: saturate(.75) brightness(1.02); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%); mask-image: linear-gradient(90deg, transparent 0, #000 26%); }
}
@media (min-width: 1200px) { .t-sol-more { background: rgba(222, 230, 239, .8); bottom: 8px; } .t-sol-body { padding-bottom: 38px; } }
@media (min-width: 1200px) { .t-hero .hg--copy { padding-left: 16px; padding-right: 8px; font-size: 16px; letter-spacing: .04em; } }
/* ---------- トップ 19回目（15周目96.8点） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .logo-mark { width: 37px; height: 37px; filter: saturate(.4) brightness(1.55); }
/* FV：左上の札の字を約23px下・字間を詰める、右の札の字は青みの灰 */
.t-hero .hg--words { padding-top: 41px; letter-spacing: .04em; }
.t-hero .hg--copy { color: #5f7a9c; }
/* 事業内容：右のリードを5px上・9px左、字は中字で一段濃く。04の絵は上から */
.t-note { transform: translate(-9px, -5px); font-weight: 500; color: #44566e; }
.t-svc:nth-child(4) .t-svc-photo img { object-position: 50% 0%; }
/* 強み：見出し1行目を3px下、段の題を3px上 */
.t-strength .t-title { margin-top: 9px; }
.t-step-title { margin-top: -3px; }
/* 業種別：「詳しく見る」は説明文の下の自分の行に置き、地は薄く（説明文を隠さない） */
.t-sol-body { padding-bottom: 46px; }
.t-sol-more { bottom: 2px; background: rgba(226, 233, 241, .55); }
.t-sol-list li:nth-child(2) .t-sol-photo img { object-position: 30% 40%; }
/* AI：ロボットは下端まで（ぼかしは下20pxだけ）、札の字を約4px下 */
.t-ai-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 20px), transparent 100%); }
.t-ai-tile { padding-top: 12px; padding-bottom: 4px; }
/* 会社：札を少し透かし、値の字を一段濃く */
.t-facts { background: rgba(255, 255, 255, .62); }
.t-fact dd { color: #55657a; }
/* 相談：写真の左端のぼかしを広げ、継ぎ目を消す */
.t-cta-bg { width: 58%; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 12%, #000 34%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .3) 12%, #000 34%); }
}
@media (min-width: 1200px) { .t-sol-body { padding-bottom: 60px; } .t-strength { padding-top: 21px; } }
@media (min-width: 1200px) {
.t-sol-body { padding-bottom: 49px; }
.t-strength { border-top: 1px solid rgba(206, 218, 232, .8); background: linear-gradient(180deg, rgba(234, 240, 247, .7) 0%, rgba(244, 247, 251, 0) 40%); }
}
/* ---------- トップ 20回目（16周目97.1点） */
@media (min-width: 1200px) {
/* ヘッダー：FVの写真の上端をヘッダーの下まで透かす（白いかすみは上ほど薄く） */
.t-hero::before { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, #000 80px); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, #000 80px); }
/* FV：右の札の字を濃く、奥の板は縁の線だけ、左上の札の副題を1px大きく・4行を3px下 */
.t-hero .hg--copy { color: #586f96; }
.t-hero .hero-glass::after { background: none; }
.t-hero .hg--words { padding-top: 44px; }
.t-hero .hg--words i { font-size: 8px; }
/* 事業内容：リンクの字12px */
.t-textlink { letter-spacing: 0; }
/* 強み：中身を約4px下 */
.t-strength { padding-top: 25px; }
/* 業種別：「詳しく見る」の地は無し（押せる範囲44pxだけ）、札の下の縁に白い光の線 */
.t-sol-more { background: transparent; }
.t-sol { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .8), inset 0 1px 0 #fff, 0 10px 26px rgba(40, 70, 120, .08); }
/* AI：札は高さ66px・間6px、AUTOMATION は1段大きく細く、ロボットの左端を早く見せる */
.t-ai-list { gap: 6px 14px; }
.t-ai-tile { min-height: 66px; }
.t-ai-mark small { font-size: 12px; font-weight: 300; }
.t-ai-photo { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0, #000 16%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0, #000 16%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 20px), transparent 100%); }
/* 事例：業種の札の横幅を詰める */
.t-case-tag { padding: 1px 9px; }
/* 数字：説明とリードの字の色 */
.t-num-label, .t-numbers .t-lead { color: #6c7788; }
/* 会社：アイコン17px、写真の受付を約34px下へ */
.t-fact .ico { width: 17px; height: 17px; }
.t-about-photo img { object-position: 50% 78%; }
/* 相談：写真を右へ寄せる */
.t-cta-bg { object-position: 0% 100%; }
}
@media (min-width: 1200px) { .t-hero .hg--words i { white-space: nowrap; letter-spacing: .04em; } .t-hero .hg--words { width: 148px; padding-left: 12px; padding-right: 8px; } }
/* ---------- トップ 21回目（17周目97.8点。16周目の直しで出た AI の縦の段差を消す） */
@media (min-width: 1200px) {
/* ヘッダー：写真を透かす（白い覆いを弱める） */
body:has(.t-hero) .site-header { background: linear-gradient(180deg, rgba(248, 250, 253, .55) 0%, rgba(248, 250, 253, .2) 100%); }
/* FV：奥の板を約25px下・左の縁を x≈1250、札の下に底の縁の線（y≈424）。右の札の字をもう一段濃く */
.t-hero .hero-glass::after { top: 257px; left: 1250px; width: 160px; height: 165px; }
.t-hero .hero-glass::before { content: ""; position: absolute; left: 1150px; top: 424px; width: 262px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 20%, rgba(255, 255, 255, .95) 80%, rgba(255, 255, 255, 0)); }
.t-hero .hg--copy { color: #58739a; }
/* FV：グラフの札を 153×116 に、棒は白く光らせ、右上がりの折れ線を重ねる */
.t-hero .hg--bars { width: 153px; height: 116px; top: 49%; }
.t-hero .hg--bars i { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(214, 228, 244, .55)); box-shadow: 0 0 6px rgba(255, 255, 255, .8); }
.t-hero .hg--bars::after { content: ""; position: absolute; left: 14px; right: 14px; top: 16px; bottom: 40px;
background: linear-gradient(90deg, rgba(120, 160, 205, .9), rgba(170, 205, 240, .95));
clip-path: polygon(0% 88%, 20% 70%, 38% 76%, 58% 44%, 76% 50%, 100% 8%, 100% 11%, 76% 53%, 58% 47%, 38% 79%, 20% 73%, 0% 91%); }
.t-hero .hg--words { background: rgba(255, 255, 255, .22); }
/* 強み：03のアイコンは線だけ */
.t-step:nth-child(3) .ico .fl { display: none; }
/* 業種別：縁の線をやめ、下端から約12px上に左2/3だけの柔らかい白い帯 */
.t-sol { box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(40, 70, 120, .08); }
.t-sol::after { content: ""; position: absolute; left: 0; width: 66%; bottom: 10px; height: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); filter: blur(2px); pointer-events: none; }
/* AI：写真の左端を150px以上の横グラデーションで溶かし、下地に淡い青灰を x≈300 から敷く。札の題13px */
.t-ai-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 20px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 calc(100% - 20px), transparent 100%); }
.t-ai::before { content: ""; position: absolute; left: 300px; top: 0; width: 500px; height: 100%; pointer-events: none;
background: linear-gradient(90deg, rgba(232, 239, 246, 0), rgba(232, 239, 246, .7) 40%, rgba(232, 239, 246, 0)); }
.t-ai-name { font-size: 13px; }
/* 数字：太さ600の紺、説明は中字 */
.t-num-val { font-weight: 600; color: #10284a; }
.t-num-label { font-weight: 500; }
/* 会社：受付を下へ（天井と照明を写す） */
.t-about-photo img { object-position: 50% 0%; }
}
@media (min-width: 1200px) { body:has(.t-hero) .site-header { background-color: rgba(248, 250, 253, .3); background-image: linear-gradient(180deg, rgba(248, 250, 253, .3) 0%, rgba(248, 250, 253, 0) 100%); } }
/* ---------- トップ 22回目（18周目97.9点。グラフの札は位置を画素で固定＝y 250〜367） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header::before { content: ""; position: absolute; left: 550px; width: 200px; top: 0; height: 100%; pointer-events: none;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(90, 110, 130, .08), rgba(0, 0, 0, 0)); }
.t-hero .hg--bars { top: 250px; left: 707px; }
.t-hero .hg--bars::after { background: #f4fdff; filter: drop-shadow(0 0 3px rgba(120, 170, 225, .9)); }
.t-hero .hero-glass::after { height: 228px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 6px 4px 0 -4px rgba(255, 255, 255, .7); }
.t-hero .hero-kicker, .t-hero .p-hero-lead { color: #34465e; }
.t-hero .scroll-arrow { height: 13px; width: 1.5px; }
.t-hero .scroll-arrow::after { width: 9px; height: 9px; left: -4px; }
.t-svc-text { color: #626a78; }
/* 数字：細く狭く濃く、単位は同じ色の太字12px */
.t-num-val { font-weight: 500; color: #0a1a3a; letter-spacing: -.02em; }
.t-num-val small { color: #0a1a3a; font-weight: 700; font-size: 12px; }
/* 左の余白の白い斜めの結晶の線（FV・強み・業種別・相談） */
.t-hero .p-hero-body::before, .t-strength::after, .t-solution::after, .t-cta::before { content: ""; position: absolute; pointer-events: none; }
.t-hero .p-hero-body::before { left: -40px; top: 180px; width: 120px; height: 120px; }
.t-strength::after, .t-solution::after { left: 20px; bottom: 10px; width: 90px; height: 100px; z-index: 0; }
.t-hero .p-hero-body::before, .t-strength::after, .t-solution::after {
background: linear-gradient(118deg, transparent 46%, rgba(255, 255, 255, .85) 48%, transparent 50%), linear-gradient(62deg, transparent 58%, rgba(255, 255, 255, .6) 59.5%, transparent 61%); }
/* 会社：受付台の幅を約114pxに（写真を少し引く） */
.t-about-photo img { object-fit: cover; object-position: 70% 0%; transform: scale(.78); transform-origin: 100% 0%; }
}
@media (min-width: 1200px) { .t-about-photo img { transform: none; object-position: 50% 0%; } }
/* ---------- トップ 23回目（19周目98.2点。採点の座標は FV の区画＝ヘッダーの下端から。ページの座標では +64px） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header::before { background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(90, 110, 130, .14), rgba(0, 0, 0, 0)); left: 450px; width: 350px; }
.t-hero .hg--bars { top: 314px; }
/* 右下の札：行の間隔約27px・字を一段濃く、曇りを強めて奥の板の縁を透かさない */
.t-hero .hg--copy { line-height: 1.7; color: #4b6488; background: rgba(240, 245, 250, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.t-hero .scroll-arrow { height: 12px; width: 2px; }
/* 結晶の線：X字をやめ、角度の違う薄い面の線を散らす */
.t-hero .p-hero-body::before { left: -88px; top: 0; width: 140px; height: 100%;
background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .7) 30.6%, transparent 31.2%), linear-gradient(64deg, transparent 52%, rgba(255, 255, 255, .55) 52.6%, transparent 53.2%),
linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, .5) 70.5%, transparent 71%), linear-gradient(35deg, transparent 20%, rgba(255, 255, 255, .45) 20.6%, transparent 21.2%),
linear-gradient(98deg, transparent 84%, rgba(255, 255, 255, .45) 84.5%, transparent 85%), linear-gradient(150deg, transparent 44%, rgba(255, 255, 255, .4) 44.5%, transparent 45%); }
.t-strength::after, .t-solution::after { top: 0; bottom: 0; height: auto; left: 0; width: 260px; opacity: .5;
background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .8) 30.5%, transparent 31%), linear-gradient(64deg, transparent 60%, rgba(255, 255, 255, .7) 60.5%, transparent 61%),
linear-gradient(140deg, transparent 78%, rgba(255, 255, 255, .6) 78.4%, transparent 78.8%); }
/* 数字：単位は灰青・間5px、ラベルを約4px上 */
.t-num-val small { color: #6c7989; margin-left: 5px; }
.t-num { gap: 10px; }
/* 会社：右端の街は引いて空を見せる */
.t-about-city { object-position: 50% 100%; object-fit: cover; }
}
/* ---------- トップ 24回目（20周目98.5点） */
@media (min-width: 1200px) {
body:has(.t-hero) .nav a { color: #4d5766; font-weight: 500; }
/* FV右下の札：地は青みの透明ガラス、奥の板の縁は札の後ろでは描かない、右下に光の点 */
.t-hero .hg--copy { background: rgba(215, 230, 245, .82); z-index: 2; }
.t-hero .hg--copy::after { content: ""; position: absolute; right: 44px; bottom: 44px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px rgba(255, 255, 255, .9); }
.t-hero .hero-glass::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 32%); mask-image: none; border-left-color: transparent; }
/* グラフの札：細い棒（約5px）を 3・3・5本のまとまりに、左上に小さな字の行2本、線の端に光る点 */
.t-hero .hg--bars { display: block; padding: 0; }
.t-hero .hg--bars em { position: absolute; left: 14px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .8); }
.t-hero .hg--bars em:nth-of-type(1) { top: 18px; width: 48px; }
.t-hero .hg--bars em:nth-of-type(2) { top: 27px; width: 32px; background: rgba(255, 255, 255, .55); }
.t-hero .hg--bars i { position: absolute; bottom: 16px; width: 5px; border-radius: 1px; }
.t-hero .hg--bars i:nth-of-type(1) { left: 16px; height: 20px; } .t-hero .hg--bars i:nth-of-type(2) { left: 24px; height: 28px; } .t-hero .hg--bars i:nth-of-type(3) { left: 32px; height: 24px; }
.t-hero .hg--bars i:nth-of-type(4) { left: 50px; height: 34px; } .t-hero .hg--bars i:nth-of-type(5) { left: 58px; height: 40px; } .t-hero .hg--bars i:nth-of-type(6) { left: 66px; height: 36px; }
.t-hero .hg--bars i:nth-of-type(7) { left: 84px; height: 44px; } .t-hero .hg--bars i:nth-of-type(8) { left: 92px; height: 50px; } .t-hero .hg--bars i:nth-of-type(9) { left: 100px; height: 56px; }
.t-hero .hg--bars i:nth-of-type(10) { left: 108px; height: 62px; } .t-hero .hg--bars i:nth-of-type(11) { left: 116px; height: 70px; }
.t-hero .hg--bars::before { content: ""; position: absolute; right: 12px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px rgba(190, 220, 255, .95); z-index: 1; }
/* PEOPLEの札：明るい青・字は #899fbc */
.t-hero .hg--words { background: rgba(219, 232, 244, .55); color: #899fbc; }
/* 左端の結晶：三角の面に淡い塗り、交点に光る点 */
.t-hero .p-hero-body::after { content: ""; position: absolute; left: -53px; top: 150px; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px rgba(255, 255, 255, .95), -40px 150px 0 0 #fff, -40px 150px 8px 3px rgba(255, 255, 255, .9); pointer-events: none; }
/* 業種別：押せる高さ44pxのまま、見た目の下の余白を約14px */
.t-sol-more { margin-bottom: -13px; }
.t-sol-body { padding-bottom: 36px; }
/* 会社：事実のアイコンの線を濃く */
.t-fact .ico { color: #5d6f86; }
}
@media (min-width: 1200px) { .t-about-city { object-position: 50% 50%; } }
/* ---------- トップ 25回目（21周目98.5点。ナビとフッターの字は前提23のまま） */
@media (min-width: 1200px) {
/* FV左端の結晶を濃く、光る点を (38,150)・(45,345)（区画の座標＝ページ +64） */
.t-hero .p-hero-body::before { opacity: 1; filter: contrast(1.6) brightness(1.08); }
.t-hero .p-hero-body::after { left: -50px; top: 150px; box-shadow: 0 0 10px 4px rgba(255, 255, 255, .98), 7px 195px 0 0 #fff, 7px 195px 10px 4px rgba(255, 255, 255, .95); }
/* 右下の札：曇りを強めて奥の手すりを透かさない、光の点に短い光の筋、奥の箱の右下に斜めの縁 */
.t-hero .hg--copy { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: rgba(215, 230, 245, .9); }
.t-hero .hg--copy::after { box-shadow: 0 0 8px 3px rgba(255, 255, 255, .9), -14px 0 10px -3px rgba(255, 255, 255, .8), 14px 0 10px -3px rgba(255, 255, 255, .8); }
.t-hero .hero-glass::before { width: 230px; box-shadow: 232px 0 0 0 rgba(255, 255, 255, 0); }
/* グラフの棒は根元まで明るく、右端 x≈837 まで */
.t-hero .hg--bars i { background: rgba(255, 255, 255, .92); }
.t-hero .hg--bars i:nth-of-type(7) { left: 90px; } .t-hero .hg--bars i:nth-of-type(8) { left: 100px; } .t-hero .hg--bars i:nth-of-type(9) { left: 110px; }
.t-hero .hg--bars i:nth-of-type(10) { left: 120px; } .t-hero .hg--bars i:nth-of-type(11) { left: 130px; }
/* 会社の街の写真：ぼかさず反転で延ばした版（about-city4） */
}
/* ---------- トップ 26回目（22周目98.6点） */
@media (min-width: 1200px) {
/* FV左端の結晶：面ごとに灰の濃淡、節の光る点を明るく */
.t-hero .p-hero-body::before { opacity: 1; filter: none;
background: linear-gradient(112deg, rgba(200, 212, 226, .35) 0 30%, rgba(255, 255, 255, .95) 30.6%, rgba(236, 242, 248, .2) 31.2% 52%, rgba(255, 255, 255, .8) 52.6%, rgba(210, 222, 234, .3) 53.2% 70%, rgba(255, 255, 255, .7) 70.5%, rgba(228, 236, 245, .15) 71% 100%),
linear-gradient(64deg, transparent 44%, rgba(255, 255, 255, .8) 44.6%, transparent 45.2%), linear-gradient(35deg, transparent 20%, rgba(255, 255, 255, .6) 20.6%, transparent 21.2%); }
.t-hero .p-hero-body::after { box-shadow: 0 0 14px 6px #fff, 7px 195px 0 0 #fff, 7px 195px 14px 6px #fff; }
/* 右下の札：上1/3は奥を透かし、y≈337（区画）に横の光の筋 */
.t-hero .hg--copy { background: linear-gradient(180deg, rgba(175, 193, 211, .45) 0%, rgba(205, 220, 236, .8) 34%, rgba(215, 230, 245, .9) 60%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.t-hero .hg--copy::before { content: ""; position: absolute; left: 10px; right: 40px; bottom: 45px; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); filter: blur(1px); }
/* AI：線画を枠いっぱいに、線は淡い青灰 */
.t-ai-tile .ico { color: #7f99b1; overflow: visible; }
.t-ai-tile .ico > * { transform: scale(1.2); transform-origin: 12px 12px; }
/* 業種別：飲食店の写真を冷たい色へ */
.t-sol-list li:nth-child(2) .t-sol-photo img { filter: saturate(.8) hue-rotate(-8deg) brightness(1.04); }
/* 会社：オフィス写真を約6px下 */
.t-about-photo { margin-top: 6px; }
}
/* ---------- トップ 27回目（23周目97.9点。22周目の直しの行き過ぎ2か所を戻す） */
.t-hero-right { display: none; }
@media (min-width: 1200px) {
/* 見出しの字は絵の芯の色 #04101f */
.t-hero .p-hero-title, .t-title, .t-cta-title { color: #04101f; }
/* FV右端 60px：窓越しの高層ビルと木（元の写真の右端） */
.t-hero-right { display: block; position: absolute; right: 0; top: 0; width: 90px; height: 100%; z-index: 0; pointer-events: none;
background: url("assets/hero-right.jpg") 85% 50% / cover no-repeat;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
/* FV左端の結晶：光る点を3か所、面の濃淡を強く、右端 x≈90 でぼかして消す */
.t-hero .p-hero-body::before { filter: contrast(1.5); -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, #000 60%, transparent 100%); }
.t-hero .p-hero-body::after { left: -52px; top: 33px; box-shadow: 0 0 12px 5px #fff, 0 118px 0 0 #fff, 0 118px 12px 5px #fff, -7px 207px 0 0 #fff, -7px 207px 12px 5px #fff; }
/* 右下の札の下2/3に、右上ほど暗い濃淡 */
.t-hero .hg--copy { background: linear-gradient(200deg, rgba(160, 180, 202, .75) 0%, rgba(205, 220, 236, .82) 45%, rgba(215, 230, 245, .9) 80%), linear-gradient(180deg, rgba(175, 193, 211, .45) 0%, rgba(215, 230, 245, .9) 60%); }
/* 事業内容の左の地を明るく */
.t-service { background: linear-gradient(90deg, rgba(249, 251, 253, .9), rgba(249, 251, 253, 0) 6%); }
/* 強み：01の虫眼鏡を太く、03は上の頂点に輪 */
.t-step:nth-child(1) .ico { stroke-width: 1.9; }
.t-step:nth-child(3) .ico::after { content: none; }
/* 業種別：飲食店の写真の明るさ −18・黄みを減らす（22周目の行き過ぎを戻す） */
.t-sol-list li:nth-child(2) .t-sol-photo img { filter: brightness(.9) saturate(.82) hue-rotate(-4deg); }
/* AI：左上に細い光の線と「AI」の横の光の玉 */
.t-ai-grid::before { content: ""; position: absolute; left: 360px; top: -30px; width: 280px; height: 180px; pointer-events: none; z-index: 0;
background: linear-gradient(160deg, transparent 40%, rgba(255, 255, 255, .8) 40.6%, transparent 41.2%), linear-gradient(170deg, transparent 55%, rgba(200, 225, 255, .7) 55.5%, transparent 56%),
linear-gradient(150deg, transparent 68%, rgba(255, 255, 255, .6) 68.5%, transparent 69%), radial-gradient(circle at 62% 78%, rgba(255, 255, 255, .95) 0 3px, rgba(190, 220, 255, .5) 4px, transparent 12px); }
/* 事例：ペットサロンの写真を左右反転 */
.t-case-list > li:nth-child(3) .t-case-photo img { transform: scaleX(-1); }
/* 数字を一段細く */
.t-num-val { font-weight: 400; }
/* 会社：街のビルの青みを下げ、オフィス写真を約 −15 */
.t-about-city { filter: saturate(.72) sepia(.12) brightness(1.06); }
.t-about-photo img { filter: brightness(.92) saturate(1.1); }
/* 相談：街の中央を暗く密に見せる */
.t-cta-bg { filter: saturate(.75) brightness(.88); }
}
/* ---------- トップ 28回目（24周目96.7点。写真の色は目測の指摘で往復したので、絵の同じ場所の平均色を測って写真のファイルに焼き込む。CSS の filter は外す＝前提24） */
@media (min-width: 1200px) {
.t-sol-list li:nth-child(2) .t-sol-photo img, .t-about-photo img, .t-about-city, .t-cta-bg { filter: none; }
/* FV右端：塔の上端を下げて上に天井の光、彩度を約25%落とす */
.t-hero-right { background-position: 85% 100%; background-size: auto 130%; filter: saturate(.75); top: 55px; height: calc(100% - 55px); }
/* 右下の札の行末の光の点を「未来を。」の右へ */
.t-hero .hg--copy::after { right: 30px; bottom: 58px; }
/* 数字と単位のすき間を詰める */
.t-num-val small { margin-left: 2px; }
/* AI：光の線を濃く、「AI」の後ろに白い点光源、ロボットは区画の下端まで */
.t-ai-grid::before { opacity: 1; filter: contrast(1.8); }
.t-ai-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%);
mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%); }
/* 強み01：レンズの塗りを消す */
.t-step:nth-child(1) .ico .fl { display: none; }
/* ヘッダー：ナビの帯を少し明るく */
body:has(.t-hero) .site-header { background-color: rgba(248, 250, 253, .45); }
}
/* ---------- トップ 29回目（25周目98.5点。結晶の線が画面の外に出ていた・塔とロボットの位置の基準のずれを直す） */
@media (min-width: 1200px) {
body:has(.t-hero) .site-header .logo-en { font-weight: 500; }
body:has(.t-hero) .site-header::before { left: 400px; width: 380px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(90, 110, 130, .1), rgba(0, 0, 0, 0)); }
body:has(.t-hero) .site-header::after { content: ""; position: absolute; left: 780px; width: 420px; top: 0; height: 100%; pointer-events: none; z-index: -1; background: rgba(255, 255, 255, .28); }
/* FV：結晶の線は画面の左端 x0〜130（前は本文の箱の左外＝画面の外だった） */
.t-hero .p-hero-body::before { left: -88px; width: 218px; opacity: .9; }
.t-hero .p-hero-body::after { left: -50px; }
/* 右端の塔：上端を区画の y≈46（ページの y≈110）から */
.t-hero-right { top: 110px; height: calc(100% - 110px); }
/* 写真の窓が x≈577 から見えるように白いかすみを左へ */
.t-hero::before { background: linear-gradient(90deg, rgba(246, 248, 252, .95) 0%, rgba(246, 248, 252, .9) 34%, rgba(246, 248, 252, .45) 38%, rgba(246, 248, 252, 0) 40%); }
/* 強み：段の継ぎ目の灰色の帯をやめ、影はごく薄く */
.t-steps { filter: drop-shadow(0 1px 2px rgba(40, 60, 90, .05)); }
/* AI：ロボットは区画の下端まで（グリッドの下 +区画の余白30px）、「AI」の右上に点光源と光の輪 */
.t-ai-photo { height: calc(100% + 54px); }
.t-ai-mark::before { content: ""; position: absolute; left: 47px; top: -10px; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff;
box-shadow: 0 0 6px 3px #fff, 0 0 18px 8px rgba(190, 220, 255, .75), 0 0 0 38px rgba(255, 255, 255, 0), 0 0 40px 22px rgba(210, 230, 255, .35); }
.t-ai-mark::after { content: ""; position: absolute; left: 7px; top: -50px; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); pointer-events: none; }
}
/* ---------- 2026-10-01 ユーザー「セクション間の幅がだめ。せますぎるそこだけ調整して」：トップの区画の上下を56px（数字の帯は40px）に。区画の中の組み方は変えない */
@media (min-width: 1200px) {
.t-service, .t-strength, .t-solution, .t-ai, .t-works, .t-about { padding-top: 56px; padding-bottom: 56px; }
.t-numbers { padding-top: 40px; padding-bottom: 40px; }
/* AIのロボットは区画の上から約6px〜下端まで（余白が 30→56px になった分を伸ばす） */
.t-ai-photo { top: -50px; height: calc(100% + 106px); }
}
/* ---------- 2026-10-01 ユーザー「モバイルの時に、画像背景に文字乗っかってる感じになってない。トップページのところ」：
スマホのトップの最初の画面は、写真を背景に敷いて文字を載せる（文字の下は白いかすみ、写真の輪は下の方に見せる） */
@media (max-width: 640px) {
.t-hero.p-hero { position: relative; display: block; min-height: 760px; overflow: hidden; background: #eef3f8; }
.t-hero .p-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 61% 50%; order: 0; }
.t-hero::before { display: block; content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(246, 248, 252, .94) 0%, rgba(246, 248, 252, .9) 52%, rgba(246, 248, 252, .55) 66%, rgba(246, 248, 252, 0) 80%); }
.t-hero .p-hero-body { position: relative; z-index: 2; padding-block: 40px 300px; }
.t-hero-right { display: none; }
}
@media (max-width: 640px) {
.t-hero.p-hero { background: linear-gradient(180deg, #f3f6fa 0%, #e9eff6 100%); }
.t-hero .p-hero-bg { top: auto; bottom: 0; height: 560px; object-position: 59% 60%;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.t-hero::before { background: linear-gradient(180deg, rgba(246, 248, 252, .6) 0%, rgba(246, 248, 252, .82) 40%, rgba(246, 248, 252, .7) 60%, rgba(246, 248, 252, 0) 74%); }
}
/* スマホ：縦長に切り出した写真（hero-sp.jpg：上に天井と窓、下に輪）を最初の画面いっぱいに敷き、文字の下だけ白いかすみ */
.t-hero picture { display: contents; }
@media (max-width: 640px) {
.t-hero .p-hero-bg { top: 0; bottom: 0; height: 100%; object-position: 50% 100%; -webkit-mask-image: none; mask-image: none; }
.t-hero::before { background: linear-gradient(180deg, rgba(246, 248, 252, .78) 0%, rgba(246, 248, 252, .74) 50%, rgba(246, 248, 252, .45) 64%, rgba(246, 248, 252, 0) 76%); }
}
/* スマホ：縦長の写真は区画そのものの背景として敷く（ で包むと検査が「区画いっぱいの背景写真」と判定できない）。横長の写真は隠す */
@media (max-width: 640px) {
.t-hero.p-hero { background: #eef3f8 url("assets/hero-sp.jpg") 50% 100% / cover no-repeat; }
.t-hero .p-hero-bg { display: none; }
}