/* ==========================================================================
   smart-office v1.4.0 デザインの層（方向性 A「方眼と半歩先」）
   - 2026-11-04 オーナー指示「HPの内容はそのままで、デザイン性だけ高めてください」→ 同日のご回答「A」
   - 文・リンク・区画の順序・見出しの構造は変えない。style.css・front.css・lp.css の後に読み込み、見た目だけを上書きする
   - 形の決まり：方眼（設計図の目）と、ロゴの「S」の角の小さな青い四角（＝半歩先の印）をくり返す。会社パンフレット v2 と同じ
   - 色は style.css の :root の変数と、その透明度の濃淡だけ（新しい色を足さない）。基準は DESIGN.md v0.8
   - v1.5.0（11月4日のお返事「もっとグラフィカルなデザインにして」→ ご回答「A 図解を主役に」）：
     会社パンフレット v2 の事業ごとのイメージ図（文字を外した形）を、トップの事業の一覧・事業案内・事業ページのカードに入れた（8. の節）。
     図は header.php の記号（ill-dev など）で、文字を持たない。トップの最初の画面の図も、業務の流れ → 生成AI → 仕組みの画面の図にした
   ========================================================================== */

:root {
	--mk: 8px;                                   /* 半歩先の印の大きさ */
	--grid-size: 32px;                           /* 方眼の目 */
	/* 方眼は SVG の模様で描く（色の移り変わりは使わない。光のぼかしも、意味が無いので使わない） */
	--grid-on-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H.5V32' fill='none' stroke='%2393C5FD' stroke-opacity='.16'/%3E%3C/svg%3E");
	--grid-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M32 .5H.5V32' fill='none' stroke='%231D4ED8' stroke-opacity='.06'/%3E%3C/svg%3E");
	--fade-right: linear-gradient(90deg, transparent 18%, #000 78%);   /* 方眼を右へ濃くする（マスクだけ。色ではない） */
}

/* ---------- 1. 紺の面：方眼（右へ濃くなる） ----------
   方眼は ::before に描き、文字の下・地の色の上に置く（isolation で重なりの順を閉じる） */
.fv,
.pageheader,
.lp-fv,
.section--ink,
.cv,
.lp-agitate,
.lp-action,
.ftr {
	position: relative;
	isolation: isolate;
	background-color: var(--c-ink-deep);
	background-image: none;
}
.fv::before,
.pageheader::before,
.lp-fv::before,
.section--ink::before,
.cv::before,
.lp-agitate::before,
.lp-action::before,
.ftr::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: var(--grid-on-ink);
	background-size: var(--grid-size) var(--grid-size);
	-webkit-mask-image: var(--fade-right);
	mask-image: var(--fade-right);
}
/* 淡い地の区画：薄い青の方眼 */
.section--soft,
.lp-problem,
.profile {
	background-image: var(--grid-on-light);
	background-size: var(--grid-size) var(--grid-size);
}

/* ---------- 2. ヘッダー：紺の帯（全ページ共通） ---------- */
.hdr {
	background: rgba(30, 58, 95, .97);
	border-bottom-color: rgba(147, 197, 253, .18);
}
/* ロゴは白抜きの版（assets/svg/logo-white.svg＝フッターと同じ形：白い枠・白の S・右下は #93C5FD）に、SVG の塗りを CSS で替える */
.hdr .brand__svg g > rect:first-child { fill: none; stroke: #FFFFFF; stroke-width: 1; }
.hdr .brand__svg g > text { fill: #FFFFFF; }
.hdr .brand__svg g > rect:last-child { fill: var(--c-accent-on-ink); }
.hdr .brand__svg > text { fill: #FFFFFF; }
.hdr .brand__txt { color: #FFFFFF; }   /* ロゴの SVG が無いときの文字 */
.gnav__link { color: rgba(255, 255, 255, .84); }
.gnav__link:hover,
.gnav__link.is-current { color: #FFFFFF; }
.gnav__link::after { height: 2px; background: var(--c-accent-on-ink); }
.hdr__tel { color: #FFFFFF; }
.hdr__tel:hover { color: var(--c-accent-on-ink); }
.hdr__tel svg { color: var(--c-accent-on-ink); }
.hdr .btn--accent { background: var(--c-accent-on-ink); border-color: var(--c-accent-on-ink); color: var(--c-ink-deep); }
.hdr .btn--accent:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--c-ink-deep); }
.hdr__burger { border-color: rgba(147, 197, 253, .45); color: #FFFFFF; }
.hdr :focus-visible { outline-color: var(--c-accent-on-ink); }
.gnav__sub :focus-visible { outline-color: var(--c-accent); }   /* 下に開く白い枠の中は白の地 */

/* ---------- 3. 紺の面の上の文字とボタン（最初の画面・ページの頭） ---------- */
.fv,
.pageheader,
.lp-fv { border-bottom: 0; color: #FFFFFF; }
.fv__eyebrow,
.pageheader__eyebrow,
.lp-fv__eyebrow { color: var(--c-accent-on-ink); }
.fv__eyebrow::before { width: var(--mk); height: var(--mk); background: var(--c-accent-on-ink); }   /* ほかの小見出しと同じ半歩先の印 */
.fv__h,
.pageheader__h,
.lp-fv__h { color: #FFFFFF; }
.fv__h-accent { color: var(--c-accent-on-ink); }
.fv__h-accent::after { content: none; }
.lp-fv__h-accent::after { background: var(--c-accent-on-ink); opacity: .35; }
.fv__sub,
.lp-fv__sub { color: rgba(255, 255, 255, .88); }
.pageheader__sub { color: rgba(255, 255, 255, .85); }
.pageheader__crumbs,
.pageheader__crumbs a { color: rgba(255, 255, 255, .72); }
.pageheader__crumbs a:hover { color: #FFFFFF; }
.pageheader__crumbs .sep { color: var(--c-accent-on-ink); }
.lp-fv__meta { border-top-color: rgba(147, 197, 253, .25); }
.lp-fv__meta-item svg { color: var(--c-accent-on-ink); }
.lp-fv__meta-item span { color: rgba(255, 255, 255, .8); }
.fv .btn--accent,
.lp-fv .btn--accent { background: var(--c-accent-on-ink); border-color: var(--c-accent-on-ink); color: var(--c-ink-deep); }
.fv .btn--accent:hover,
.lp-fv .btn--accent:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--c-ink-deep); }
.fv .btn--secondary,
.lp-fv .btn--secondary { background: transparent; border-color: rgba(255, 255, 255, .55); color: #FFFFFF; }
.fv .btn--secondary:hover,
.lp-fv .btn--secondary:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--c-ink-deep); }
.fv :focus-visible,
.pageheader :focus-visible,
.lp-fv :focus-visible { outline-color: var(--c-accent-on-ink); }


/* 事業ページ：パンくずだけのページの頭は、すぐ下の最初の画面とつなげて1枚の紺の面にする。
   高さを方眼の目（32px）の倍数にして、方眼の線が継ぎ目でずれないようにする */
.pageheader:has(+ .lp-fv) { display: flex; align-items: center; height: 64px; padding: 0; }
.pageheader:has(+ .lp-fv) > .container { width: 100%; }
.pageheader:has(+ .lp-fv) .pageheader__crumbs { margin-bottom: 0; }
.lp-fv { padding-top: 64px; }
/* 右のカードは紺で塗り、方眼を透かさない（図面の表題欄のような箱） */
.lp-fv-card { background: var(--c-ink-deep); border-color: rgba(147, 197, 253, .4); }

/* ---------- 4. 区画の見出し：半歩先の印と、紺の太い罫に青の一区切り ---------- */
.eyebrow,
.pageheader__eyebrow,
.lp-fv__eyebrow,
.cv__eyebrow,
.mission__eyebrow {
	display: inline-flex;
	align-items: flex-start;   /* 2行に折れても、印は1行目の高さに置く */
	gap: 10px;
	font-weight: 600;
}
.eyebrow--center { display: flex; justify-content: center; }
.eyebrow::before,
.pageheader__eyebrow::before,
.lp-fv__eyebrow::before,
.cv__eyebrow::before,
.mission__eyebrow::before,
.profile__role:has(+ .profile__role)::before {
	content: "";
	flex-shrink: 0;
	width: var(--mk);
	height: var(--mk);
	margin-top: calc((1lh - var(--mk)) / 2);
	background: var(--c-accent);
}
/* 会社案内の挨拶の区画の小見出し（MESSAGE）。すぐ下に役職の行が続くものだけ */
.profile__role:has(+ .profile__role) { display: flex; gap: 10px; align-items: flex-start; }
.pageheader__eyebrow::before,
.lp-fv__eyebrow::before,
.cv__eyebrow::before,
.mission__eyebrow::before,
.section--ink .eyebrow::before,
.cv .eyebrow::before,
.lp-agitate .eyebrow::before,
.lp-action .eyebrow::before,
.ftr .eyebrow::before { background: var(--c-accent-on-ink); }
.section__header {
	position: relative;
	border-bottom: 2px solid var(--c-ink-deep);
}
.section__header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 72px;
	height: 2px;
	background: var(--c-accent);
}
.section--ink .section__header { border-bottom-color: rgba(147, 197, 253, .4); }
.section--ink .section__header::after { background: var(--c-accent-on-ink); }

/* ---------- 5. アイコンの札：紺の四角に、右下の小さな青い四角（ロゴと同じ形） ---------- */
.persona__icon,
.about-strength__icon,
.svc-hub-nav__icon,
.lp-problem__icon,
.lp-solution__pillar-icon,
.lp-flow__icon {
	position: relative;
	background: var(--c-ink-deep);
	border: 0;
	border-radius: 2px;
	color: #FFFFFF;
}
.persona__icon::after,
.about-strength__icon::after,
.svc-hub-nav__icon::after,
.lp-problem__icon::after,
.lp-solution__pillar-icon::after,
.lp-flow__icon::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 17%;    /* ロゴの角と同じ割合（一辺 36 の四角に 6 の角） */
	height: 17%;
	background: var(--c-accent);
}
.svc-hub-nav__card:hover .svc-hub-nav__icon { background: var(--c-accent); color: #FFFFFF; }
.svc-hub-nav__card:hover .svc-hub-nav__icon::after { background: var(--c-ink-deep); }
/* 紺の区画の丸いアイコンも、角の立った四角にそろえる */
.mission__ax-icon,
.about-credo__icon { border-radius: 2px; }

/* ---------- 6. 進め方：段階ごとに一方向に濃くなる矢羽根の帯（最後が青＝半歩先） ----------
   横に並ぶ幅（1025px 以上）だけ矢羽根にし、2列・1列に並ぶ幅では、ただの帯にする（向きが流れと合わないため） */
.lp-flow__step { padding-top: 46px; }
.lp-flow__step::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 14px;
	background: rgba(147, 197, 253, .35);
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.lp-flow__step:first-child::before { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.lp-flow__step:nth-child(2)::before { background: var(--c-accent-on-ink); }
.lp-flow__step:nth-child(3)::before { background: rgba(29, 78, 216, .5); }
.lp-flow__step:nth-child(4)::before { background: rgba(29, 78, 216, .75); }
.lp-flow__step:nth-child(5)::before { background: var(--c-accent); }
@media (max-width: 1024px) {
	.lp-flow__step::before,
	.lp-flow__step:first-child::before { clip-path: none; height: 6px; }
	.lp-flow__step { padding-top: 38px; }
}

/* ---------- 7. 区画の淡い地の追加・紺の面の上の薄い字・継ぎ目 ---------- */
.lp-uniq {
	background-image: var(--grid-on-light);
	background-size: var(--grid-size) var(--grid-size);
}
/* 方眼の線が重なっても読みやすさの基準を割らないよう、紺の面の上の薄い字を少し白く上げる（色だけ。文は同じ） */
.ftr__brand-lead,
.ftr__addr,
.ftr__addr a { color: rgba(255, 255, 255, .72); }
.cv__info,
.about-credo__item-p { color: rgba(255, 255, 255, .75); }
/* ご相談の帯とフッターの境目を、意図した1本の線にする */
.ftr { border-top: 1px solid rgba(147, 197, 253, .18); }
.ftr :focus-visible { outline-color: var(--c-accent-on-ink); }

/* ---------- 8. 事業のイメージ図（v1.5.0・パンフレット v2 の図をもとにした図） ----------
   図の色は白・淡い青・水色・青・紺と、灰の線だけ（パンフレット v2 と同じ）。図は文字を持たない（aria-hidden）。
   図を置く地は、淡い青に細い方眼（図面の台紙）。角は 2px、影は付けない。
   同じ図をくり返し並べないよう、トップでは事業の一覧だけに置く（関心別の入口は v1.4.0 のアイコンの札のまま） */
.svo-card__pic,
.svc-card__pic,
.lp-fv-card__pic {
	display: block;
	aspect-ratio: 1.8182;   /* 図の viewBox（幅 200・高さ 110）と同じ縦横比 */
	padding: 12px 18px;
	background-color: var(--c-accent-bg);
	background-image: var(--grid-on-light);
	background-size: 24px 24px;
	border: 1px solid var(--c-line);
	border-radius: 2px;
	overflow: hidden;   /* 中の svg の高さで台紙が伸びないようにする（縦横比を台紙で決める） */
}
.svo-card__pic svg,
.svc-card__pic svg,
.lp-fv-card__pic svg { display: block; width: 100%; height: 100%; }
.svc-card__pic { margin-bottom: 24px; }
/* 紺のカードの上では、台紙の縁を水色の細い線にする */
.svo-card--hero .svo-card__pic,
.svc-card--hero .svc-card__pic,
.lp-fv-card__pic { border-color: rgba(147, 197, 253, .45); }
/* 事業ページの右のカードは、図を低めにして、最初の画面にカードが収まりやすくする */
.lp-fv-card__pic { aspect-ratio: 2.2222; padding: 10px 16px; }
@media (max-width: 980px) {
	.lp-fv-card { justify-self: start; }   /* トップの図と同じく、本文の左端にそろえる */
}

/* トップの事業の一覧：主役の2枚を大きく（図を上に）、ほかの3枚は横長（左に正方形の図）。
   HTML の順と文は v1.4.0 と同じで、並びと大きさだけを変える。主役が1枚の設定でも、空きを詰めて並べる */
.services-overview__grid { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; }
.svo-card { grid-column: span 2; }
.svo-card--hero { grid-column: span 3; }
.svo-card:not(.svo-card--hero) {
	display: grid;
	grid-template-columns: 104px 1fr;
	column-gap: 20px;
	row-gap: 10px;
	align-content: start;
}
.svo-card:not(.svo-card--hero) > .svo-card__pic { grid-row: span 4; align-self: start; aspect-ratio: 1; padding: 8px; }
.svo-card:not(.svo-card--hero) > :not(.svo-card__pic) { grid-column: 2; }
.svo-card:not(.svo-card--hero) .svo-card__top { margin-bottom: 0; }
@media (max-width: 1023px) {
	.svo-card { grid-column: span 3; }
}
@media (max-width: 600px) {
	.svo-card,
	.svo-card--hero { grid-column: span 6; }
}

/* トップの最初の画面の図：業務の流れ → 生成AI → 仕組みの画面。
   文字は図の外の HTML に置き（v1.4.0 の図と同じ文・同じ順）、スマホでも字が小さくならないようにする。
   図そのものは読み上げない（文字は HTML で読める）。下の帯は、押せるボタンと見分けるため、塗らずに枠の線だけにする */
.fv__in { grid-template-columns: 1.1fr 1fr; gap: 56px; }
.fv__visual { aspect-ratio: auto; max-width: 540px; }
.fv-ill { margin: 0; display: grid; grid-template-areas: "a" "pic" "b" "cap"; }
.fv-ill__svg { grid-area: pic; display: block; width: 100%; height: auto; margin-top: 14px; }
.fv-ill__lbl { margin: 0; color: #FFFFFF; line-height: 1.5; }
.fv-ill__lbl--a { grid-area: a; }
.fv-ill__lbl--b { grid-area: b; margin-top: 6px; text-align: right; }
.fv-ill__k { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.3; letter-spacing: .02em; }
.fv-ill__s { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 500; color: rgba(255, 255, 255, .88); }
.fv-ill__cap { grid-area: cap; margin: 18px 0 0; padding: 12px 16px; border: 1px solid rgba(147, 197, 253, .6); color: #FFFFFF; text-align: center; line-height: 1.6; }
.fv-ill__ck { display: block; font-size: .875rem; font-weight: 700; color: var(--c-accent-on-ink); }
.fv-ill__cs { display: block; font-size: .8125rem; font-weight: 500; color: rgba(255, 255, 255, .88); }
@media (max-width: 980px) {
	.fv__in { grid-template-columns: 1fr; gap: 48px; }
	.fv__visual { max-width: 520px; justify-self: start; }
}