/* #130: front page spacing and accent tuning only.
*
* ⚠ 名前に -adjustments が入っているが、**これは「対になる base ファイルの
* 後読み調整」ではない**（2026-08-11・Issue #645 Phase B のオーナー判断）。
*
* news / works / blog は `X.css` と `X-adjustments.css` という「同じ対象を
* 歴史的に2ファイルへ分けただけの対」だったので、調整側を base の末尾へ
* 戻して1枚に統合した（PR #889 / #890 / #891）。**このファイルには相方が
* いない**——トップに `front-page.css` という base は存在せず（土台は
* `main.css` や `front-layout-fixes.css` に散っている）、鎖で隣にいる
* `front-blog-base.css` は「トップのブログ節だけ」248行で、こちらは
* 「トップ全体の余白・アクセント」794行と担当が違う。
*
* だから**吸収対象ではない**。同じ手で `front-blog-base.css` へ入れると
* 「ブログ節の調整」という名前のファイルにトップ全体の794行が入り、
* 盤面を狭くして迷いを減らすという層統合の目的に逆行する。
*
* リネームも検討したが、参照が67箇所・14ファイルに及び、日付入りの過去記録
* （design-system-full-audit-2026-07-23.md 等）の書き換えを伴うため見送った。
* Issue #645 は本文でこのファイルも吸収対象として扱っていたが、それは
* **名前が規則に合っていることと中身が同じ種類であることを混同**していた。
*/
.site-main--front {
--tiptop-front-action: var(--tiptop-button-bg, var(--tiptop-primary));
--tiptop-front-action-hover-bg: var(--tiptop-button-hover-bg, var(--tiptop-contrast));
--tiptop-front-action-hover-text: var(--tiptop-button-hover-text, var(--tiptop-base));
}
.site-main--front .tiptop-front-content {
--tiptop-front-muted: var(--tt-color-muted);
}
/* Issue #912：標準トップのヒーローだけ、モックと同じ下罫線を持たせる。
* このDOMは front-page.php の標準分岐でのみ出力されるため、イマーシブには波及しない。 */
.site-main--front .tiptop-standard-hero {
border-bottom: 1px solid var(--tiptop-border);
}
/* #539: These structural sections are shared by standard and immersive modes.
* The immersive-only base-system rule left them with no vertical padding in
* the standard design, so the shared spacing token is owned here explicitly. */
.site-main--front .tiptop-front-content .tiptop-about-summary,
.site-main--front .tiptop-front-content .tiptop-works-showcase {
padding-block: var(--tt-space-section);
}
/* #539: News is intentionally denser than the image-led sections.
* #596: Services is a standard-design compact component; keep its section
* rhythm inside the shared spacing scale without changing immersive mode.
*
* 2026-08-07：上記2つの「密にする」判断を標準モードについて取り消した（オーナー指摘
* 「詰まってる」）。#539/#596はNewsが密な行リスト・Servicesが3等分の小さな部品だった
* 前提の判断で、今回どちらもレイアウトごと作り替えたため前提が消えている。
* 実測でServices/Newsだけ64pxで、他の段（About/実績/CTA=112px）の約半分だった。
* 共通のセクションリズム --tt-space-section へ合わせる。イマーシブは対象外。 */
/* 2026-08-07：ブログ(intro4)も同じリズムへ。旧値は front-home-lp-source.css:9 の
* --tiptop-front-section-space（clamp(88px,11vw,152px)＝152px）で、他の段より広かった。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro4 {
padding-block: var(--tt-space-section);
}
.site-main--front .tiptop-front-content .intro-news .news-list {
margin-top: var(--tt-space-6);
}
/* 節見出しとカードの見出しは役割が違うので分けた（2026-08-11）。
* 以前は1つのルールで同じサイズを当てていたが、モックでは節見出しが
* --tt-text-section（36.8px）、カードの見出しが --tt-text-card（15.04px）で別の段。
*
* 段は直接参照する。以前はトップ限定の --tiptop-front-heading-size を経由して
* いたが、段を指すだけの迂回だったので変数ごと外した（2026-08-11）。
* ページ限定のサイズ変数を作らないのは docs/typography-scale.md §5。
* モックの根拠は _mockup shared.css:217（.about h2 が --tt-text-section）。 */
.site-main--front .tiptop-front-content h2 {
font-size: var(--tt-text-section);
}
.site-main--front .tiptop-front-content .card > h3 {
font-size: var(--tt-text-card);
}
.site-main--front .tiptop-front-content .eachTextAnime,
.site-main--front .tiptop-front-content .front-blog-card__meta,
.site-main--front .tiptop-front-content .news-item__date {
color: var(--tiptop-front-muted);
}
/* 段は直接参照する（--tiptop-front-body-size の迂回を外した・2026-08-11）。
* モックの根拠は _mockup shared.css:581（.card__excerpt）と 1187
* （.service-item__body）＝どちらも --tt-text-note。 */
.site-main--front .tiptop-front-content p:not([class*="__eyebrow"]),
.site-main--front .tiptop-front-content li,
.site-main--front .tiptop-front-content .post-card__excerpt {
font-size: var(--tt-text-note);
}
.site-main--front .tiptop-front-content .more a,
.site-main--front .tiptop-front-content .news-item__title a{
color: var(--tiptop-front-action);
}
.site-main--front .tiptop-front-content .post-card__title a {
color: var(--tiptop-front-action);
}
.site-main--front .tiptop-front-content .more a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.72em;
min-width: 150px;
padding: 10px 20px;
border: 1px solid var(--tiptop-front-action);
border-radius: 0 !important;
background: transparent;
box-shadow: none !important;
color: var(--tiptop-front-action);
font-size: var(--tt-text-label);
font-weight: 700;
letter-spacing: var(--tt-letter-heading);
line-height: calc(1.5 * var(--tt-leading-scale));
text-decoration: none;
text-transform: uppercase;
transition:
background-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
border-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}
.site-main--front .tiptop-front-content .more a:hover,
.site-main--front .tiptop-front-content .more a:focus-visible {
border-color: var(--tiptop-front-action-hover-bg);
background: var(--tiptop-front-action-hover-bg);
color: var(--tiptop-front-action-hover-text);
outline: none;
}
.site-main--front .tiptop-front-content .front-content-card__terms a,
.site-main--front .tiptop-front-content .post-card__meta a,
.site-main--front .tiptop-front-content .term-list a,
.site-main--front .tiptop-front-content .wp-block-post-terms a {
border-color: color-mix(in srgb, var(--tiptop-front-action) var(--tt-tint-soft), transparent);
background: color-mix(in srgb, var(--tiptop-front-action) var(--tt-tint-faint), transparent);
color: var(--tiptop-front-action);
}
.site-main--front .tiptop-front-content .front-content-card__terms a:hover,
.site-main--front .tiptop-front-content .front-content-card__terms a:focus-visible,
.site-main--front .tiptop-front-content .post-card__meta a:hover,
.site-main--front .tiptop-front-content .post-card__meta a:focus-visible,
.site-main--front .tiptop-front-content .term-list a:hover,
.site-main--front .tiptop-front-content .term-list a:focus-visible,
.site-main--front .tiptop-front-content .wp-block-post-terms a:hover,
.site-main--front .tiptop-front-content .wp-block-post-terms a:focus-visible {
border-color: var(--tiptop-front-action);
background: var(--tiptop-front-action);
color: var(--tiptop-front-action-hover-text);
}
.site-main--front .tiptop-front-content .tiptop-career-card time::before {
background: var(--tiptop-front-action);
}
/* 標準Servicesを「左に見出し・右に大きな番号の縦積み行」へ（2026-08-07・オーナー確定）。
* #596で3等分カラム＋縦罫線にしていたが、均質な3カラムをやめてページ幅を横方向に使う。
* PHPは変更しない——マークアップを動かすとイマーシブのServices（front-reloom-motifs.css
* の中央寄せカード）にも波及するため、標準スコープのCSSだけで組み替える。
* eyebrowは左揃えに戻すので、#596の中央寄せ（margin-inline:auto）は当てない。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .content-area {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
grid-template-rows: auto 1fr;
gap: var(--tt-space-4) clamp(32px, 6vw, 88px);
align-items: start;
text-align: left;
}
/* eyebrow自身にtext-align:centerが別ルールから当たっているため明示的に左へ。
* これを省くと、文字だけがカラム幅(492px)の中央に寄り、::afterの下線(52px・auto marginなし)が
* 左端に取り残されて「バーと文字が離れて見える」状態になる（実機で確認した実例）。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .hero__eyebrow {
grid-column: 1;
grid-row: 1;
/* 下余白は 0 にして、間隔は `.content-area` の `row-gap: 16px` に任せる
* （2026-08-11・Issue #868 のB-1）。モックのラベル→リード文の実距離は **16px**、
* 実サイトは **28px** だった。内訳は「eyebrowの margin-bottom 12px ＋ row-gap 16px」で、
* **グリッドでは margin と gap が加算される**ため。
* ⚠ モックの `margin-bottom: 16px` をそのまま移してはいけない——16＋16＝32pxで
* さらに開く。モックの16pxは**親がブロックで margin が相殺した結果**の値。
* 他の節（ヒーロー・About）は親がブロックのままなので実距離16pxで既に一致しており、
* 触らない（全節の実距離を測って確認済み）。 */
margin-bottom: 0;
text-align: left;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .content-area > .tiptop-services-aside__title {
grid-column: 1;
grid-row: 2;
margin: 0;
text-align: left;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .card-grid {
grid-column: 2;
grid-row: 1 / -1;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: start;
margin-top: 0;
border-top: 0;
}
/* 各行：番号を左、見出し＋本文を右。行の区切りは上罫線で、縦罫線は使わない。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
/* 縦の間隔（見出し→本文）は 12px（2026-08-11・Issue #868 のB-2）。モックは
* `` で h3 の `margin-bottom: 12px`、実サイトは
* `__heading` が `display: contents` なので**この行グリッドの row-gap がそのまま
* 見出しと本文の間隔になる**。8px（`--tt-space-2`）だと4px詰まっていた。
* ⚠ h3 側に `margin-bottom` を足すと 8＋12＝20px になるので不可。 */
gap: var(--tt-space-3) clamp(20px, 3vw, 44px);
align-items: start;
min-height: 0;
padding: var(--tt-space-7) 0;
border: 0;
border-top: 1px solid var(--tt-base-line);
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point + .tiptop-service-point {
border-left: 0;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point:last-child {
border-bottom: 1px solid var(--tt-base-line);
}
/* __headingは番号とh3を内側に抱えているが、番号だけを左列へ独立させたい。
* display:contentsで中身を親gridの直接の子に昇格させる（PHPのDOMは変えずに
* 番号／h3／pを3つの独立したgridアイテムとして配置できる）。
* .tiptop-service-point__markは標準では既にdisplay:none（base-system.css:745）なので
* gridセルを占めない。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point__heading {
display: contents;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point__number {
grid-column: 1;
/* Issue #912：番号を1行目だけに置き、54.4pxの番号自身を1行目の高さへ反映する。
* 2行をspanすると見出し26px＋本文54pxの2行合計の方が高く、番号の54pxが行高へ効かない。 */
grid-row: 1;
font-size: var(--tt-text-numeral);
font-weight: 500;
line-height: 1;
color: color-mix(in srgb, var(--tiptop-accent) 40%, var(--tiptop-base));
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point__heading h3 {
grid-column: 2;
grid-row: 1;
margin: 0;
/* Issue #912：現在のタイポ正本 docs/typography-scale.md §4 はカード見出しを
* --tt-text-card / title行間1.7 とする。旧モック時代の2.0倍指定を更新する。 */
font-size: var(--tt-text-card);
line-height: calc(1.7 * var(--tt-leading-scale));
/* モックの字間は 0.5184px（17.28px に対し 0.03em）。実サイトは 0.6912px だった。 */
letter-spacing: 0.03em;
}
/* サービスの番号（01〜03）の字間（2026-08-09・Issue #784）。
* モックは字間なしで大きく置く。実サイトは共通の見出し字間 2.176px が乗って
* 数字の間が開いていた。番号3件ぶんの差分がこれ一つに由来する。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point__number {
letter-spacing: normal;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point > p {
grid-column: 2;
grid-row: 2;
margin: 0;
/* Issue #912：部品統合後のモックは説明文の測度が34em。実サイトだけ制約が抜け、
* 1行に収まることで行高が166pxまで縮んでいた。高さを固定せず、折返しの原因を揃える。 */
max-width: 34em;
/* 現行モックと同じ --tt-text-note（13.44px）/ 行間2倍（26.88px）。 */
font-size: var(--tt-text-note);
line-height: calc(2 * var(--tt-leading-scale));
/* 色もモックの #707070（＝--tiptop-muted）へ。実サイトは本文色の #222222 で濃すぎた。 */
color: var(--tiptop-muted);
}
/* ============================================================
標準モードのhoverをモックへ合わせる（2026-08-07・オーナー確定）
すでに動いているもの：カード画像のズーム(0.4s)、ニュース/ブログのタイトル下線(0.4s)、
ナビ・アウトラインボタンの色変化(0.2s／design-system.css)。
足りていなかったのは以下2つ。
1) ニュース行の矢印が動かない（イマーシブだけ immersive-system.css で動いていた）
2)「View All Posts」(.front-blog-heading > a) に色のtransitionが無い
ニュース行の背景tintはモックにはあるが、2026-07-28に「背景tintを撤去して
タイトル下線hoverへ統一」とオーナーが決めた経緯があるため足していない。
置き場所について：transitionを base-system.css へ書くと
scripts/check-standard-scope.js（#675の「標準に動きを入れない」ガード）に正しく弾かれる。
hoverの色/位置変化はトップページ限定のこのファイルが所有する。
============================================================ */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__arrow {
display: inline-flex;
align-items: center;
transition: transform var(--tt-motion-duration-fast) var(--tt-motion-easing-standard),
color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
/* 矢印の色（2026-08-11）。モック（_mockup/tiptop-current.css:639-651）は muted のグレーで、
* hoverで contrast へ寄る。実サイトはリンクの文字色（#111）をそのまま継承して**常に濃い**ため、
* 下のhoverルールが色を変えても見た目が動いていなかった。
*
* ⚠ **同じ是正が新着一覧ページには 2026-08-09 に入っている**（news-page.css の
* `.tiptop-news-page .tiptop-news-item__arrow`・オーナー指摘「実サイトはリンクの文字色を
* そのまま継承して濃いままだった」）。**スコープが一覧ページだけで、トップの新着行が漏れていた。** */
color: var(--tiptop-muted);
}
/* 矢印アイコンの寸法（2026-08-11）。モックは 16px、実サイトは SVG の固有寸法のまま
* 11.77px（親の font-size 14.72px 由来）で**26%小さかった**。
* 新着一覧側は同じ是正で 15px（あちらのモックの値）。**モックごとに値が違うので流用しない。** */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__arrow svg {
width: 16px;
height: 16px;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__link:hover .tiptop-news-item__arrow,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__link:focus-visible .tiptop-news-item__arrow {
transform: translateX(var(--tt-space-1));
color: var(--tiptop-contrast);
}
/* ============================================================
標準トップのhoverをモックの水準まで最小化（2026-08-07・オーナー確定）
モックのhoverは「ナビに下線」「実績カードの画像ズーム」「ニュース行の背景＋矢印」
「ボタンの塗り替え」だけ。ブログカードの画像ズームはモックに無いので止める。
実績カード(.front-content-card)のズームはモックにあるので残す。
タイトル下線の停止は標準モード全ページ共通の契約なので front-ds-page-cleanup.css
（下線機構の所有ファイル）側に置いている——ここに重ねて書かない。
============================================================ */
body.tiptop-standard-system .site-main--front .front-blog-card:hover,
body.tiptop-standard-system .site-main--front .front-blog-card:focus-within,
body.tiptop-standard-system .site-main--front .front-blog-card:focus-visible {
--tiptop-card-image-hover-scale: 1;
}
/* ニュース行の背景hoverを復活（2026-08-07・オーナー確定）。
* 2026-07-28に「背景tintを撤去してタイトル下線hoverへ統一」と決めた判断を、
* モックの手触りに合わせる目的で標準モードについて意図的に取り消す
* （経緯は docs/standard-immersive-contract.md「方針転換の記録」）。
* タイトルの下線hover（front-ds-page-cleanup.css）と矢印スライドは併存させる。
* イマーシブは撤去後の状態を維持する。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__link {
transition: background-color var(--tt-motion-duration-fast) var(--tt-motion-easing-standard);
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__link:hover,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__link:focus-visible {
background: var(--tiptop-surface);
}
@media (prefers-reduced-motion: reduce) {
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__arrow {
transition: none;
transform: none;
}
/* 背景の色変化そのものは残し、遷移だけ止める（色の手応えは維持したいため）。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-news .tiptop-news-item__link {
transition: none;
}
}
/* ============================================================
トップページの段の幅を1種類へ揃える（2026-08-07・オーナー確定）
実測すると 1440px（ヒーロー/Services/NEWS/CTA＝「デザイン > サイト幅」設定に追従）と
1280px（About/実績＝--tt-width-base-wideの直書き）と 940px（ブログ＝直書き）の
3種類が混在し、しかも一部だけ設定を無視していた。これが「幅がちぐはぐ」の原因。
全段を --tiptop-front-wrap（＝サイト幅設定）に合わせ、設定を唯一の正とする。
なおこの結果、文字段の1行は設定値まで伸びる（可読性より設定追従を優先するという
オーナー判断。読みづらければサイト幅設定側を絞る運用になる）。
============================================================ */
body.tiptop-standard-system .site-main--front .tiptop-about-summary__inner,
body.tiptop-standard-system .site-main--front .tiptop-works-showcase__inner {
width: var(--tiptop-front-wrap);
}
/* トップのブログカードの日付→タイトルの間隔を8pxへ（2026-08-11・Issue #868 のB-4）。
* モックは日付（`.post-date`）の `margin-bottom: 8px` がそのまま間隔になる（feature も
* リスト行も8px）。実サイトは `front-blog-base.css:69` のメタ行に `margin-bottom: 13px`
* が乗って **13px** だった。
* **この差分は突合ツールでは出ない**——日付とタイトルはどちらも margin 0 の要素で、
* 間隔を作っているのは*メタ行のブロック*。ツールは要素ごとのプロパティを比べるので、
* 「隣接要素の距離」は見ていない。全節の隣接距離を機械的に突合して見つけた（B-4）。
* タイトル→抜粋は モック12px 対 実13px の1px差なので触らない（閾値以下・スコープを広げない）。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro4 .front-blog-card .post-card__meta {
margin-bottom: var(--tt-space-2);
}
/* Works節のラベル→カードの間隔を16pxへ（2026-08-11・Issue #868 のB-3）。
* モックはラベルの直後に `.works-grid`（margin 0）が来るので、ラベルの
* `margin-bottom: 16px` がそのまま間隔になる（実測16px）。
* 実サイトはカードのラッパーが1枚多く、そこに `front-home-lp-source.css:244` の
* `margin-top: clamp(40px, 5vw, 64px)` が乗っている。親がブロックなので**隣接兄弟の
* margin が相殺して大きい方が勝ち**＝1920pxで **64px** になっていた（48pxのズレ）。
* ラッパーの上余白を 0 にしてラベル側の16pxに任せる。
* ⚠ この差分は突合ツールでは**絶対に出ない**——ラベルの `margin-bottom` は両方16pxで
* 一致しており、ズレは「次の要素が持つ余白」から来ているため。ツールは要素ごとの
* プロパティを比べるので、要素間の距離は見ていない（#868 に記録）。
* 相手（`front-home-lp-source.css:244`）はモード非限定で、イマーシブは
* `base-system.css:340` 付近が独自の値（24px）を持っているため、標準スコープで閉じる。 */
body.tiptop-standard-system .site-main--front .tiptop-works-showcase .front-content-card-list-wrap {
margin-top: 0;
/* 左右の22pxも外す（2026-08-11・Issue #868 のD）。**グリッドの構造はモックと同一**で
* （6列・gap 24px・同じ span）、違いは器の幅だけだった：
* モック `.works-grid` 1280px → 列193.328px → カード 845.3 / 410.7 / 410.7
* 実サイト（左右22px）1236px → 列186px → カード 816 / 396 / 396
* 段の幅（1280px）いっぱいを使わせれば列もカードもモックと一致する。
* ⚠ 22pxの実体は margin ではなく**幅**だった。`front-home-lp-source.css:27` が
* `width: var(--tiptop-front-wrap)`（＝`min(100% - 44px, サイト幅)`）＋`margin-inline: auto`
* を当てており、**auto の算出値が22px**になっていた（margin側を0にしても効かない）。 */
width: 100%;
margin-inline: 0;
}
/* 段の内側にあった独自の上限は、段幅に従わせるため解除する。
* 2026-08-07追記：見出しと本文の760px上限も外す。段が1440pxになった一方これだけ760pxで
* 止まっていたため、下に続く経歴（1440px）と幅が揃わず「経歴だけ横に広い」状態になっていた。
* モックもAbout本文に上限を持たず、グリッドのカラム幅いっぱいを使う。 */
body.tiptop-standard-system .site-main--front .tiptop-about-summary__profile,
body.tiptop-standard-system .site-main--front .tiptop-about-stats,
body.tiptop-standard-system .site-main--front .tiptop-about-summary__profile .tiptop-about-summary__title,
body.tiptop-standard-system .site-main--front .tiptop-about-summary__profile p:last-child {
max-width: none;
}
/* ブログだけは親（.front-blog-layout）が既にサイト幅なので、ここで
* --tiptop-front-wrap を使うとガター44pxを二重に引いて1396pxになる。
* 親の幅をそのまま受ける。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro4 .blog-in {
width: 100%;
max-width: none;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro4 .front-blog-list {
max-width: none;
}
.site-main--front .tiptop-front-content .intro-services .card::before {
width: 40px;
height: 4px;
margin-bottom: 20px;
border-radius: 0;
background: var(--tiptop-front-action);
}
.site-main--front .tiptop-front-content .intro-services .card h3 {
margin: 0 0 12px;
}
.site-main--front .tiptop-front-content .intro-services .card p {
margin: 0;
color: var(--tt-color-text);
font-size: var(--tt-text-note);
line-height: calc(2 * var(--tt-leading-scale));
}
.site-main--front .tiptop-front-content .post-card,
.site-main--front .tiptop-front-content .front-content-card,
.site-main--front .tiptop-front-content .front-blog-card {
border-radius: 0;
box-shadow: none;
}
.site-main--front .tiptop-front-content .front-content-card .post-card__image,
.site-main--front .tiptop-front-content .front-blog-card .post-card__image {
border-radius: var(--tt-radius-md, 0);
background: var(--tt-color-surface-alt);
}
/* 2026-08-07：モックのblog-gridと同じ列間32px（--tt-space-6）へ。旧値clamp(30px,4vw,40px)は
* 広い画面で40pxになり、front-blog-base.css側の指定より詳細度で勝つためここが実効値だった。
* 行間は24px（--tt-space-5）＝モックが右カラム内(.blog-list)で使っている間隔に合わせる。 */
.site-main--front .tiptop-front-content .intro4 .front-blog-list {
gap: var(--tt-space-5) var(--tt-space-6);
}
.site-main--front .tiptop-front-content .intro4 .front-blog-card .post-card__excerpt,
.site-main--front .tiptop-front-content .front-content-card .post-card__excerpt {
color: var(--tt-color-text);
line-height: calc(2 * var(--tt-leading-scale));
}
.site-footer__lead {
font-size: var(--tt-text-note);
line-height: calc(2 * var(--tt-leading-scale));
}
/* front-home-lp-source.css stacks this grid at 899px, so the divider switch
* must use the same breakpoint rather than waiting for the older 820px rule.
* 2026-08-07：2カラム（見出し左／行リスト右）も同じ境界で1カラムへ折り返す。
* 2026-08-10（Issue #833）：境界を 899px → 960px へ。承認済みモック
* （_mockup/tiptop-current.css:764）は 960px以下で .services__layout を1列に
* 落とすが、実サイトは 899px までで、900〜960px が2カラムのままだった。
* なお front-home-lp-source.css:297 の 899px は `.intro-services .card-grid` を
* 1列にする指定だが、この列は 899px より上でも既に1列なので境界は見えない。
* 揃えるのはここ（2カラム→1カラム）だけでよい。 */
@media (max-width: 960px) {
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .content-area {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .hero__eyebrow,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .content-area > .tiptop-services-aside__title,
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .card-grid {
grid-column: 1;
grid-row: auto;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .card-grid {
gap: 0;
margin-top: var(--tt-space-6);
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point {
padding: var(--tt-space-5) 0;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point + .tiptop-service-point {
border-top: 1px solid var(--tt-base-line);
border-left: 0;
}
}
/* 番号を上、見出し＋本文を下へ落として横幅を確保する。
* ブレークポイントを 640px から承認済みモックと同じ 781px へ広げた（2026-08-10）。
* モックは 781px 以下で .service-row を1カラムに落としており、640〜781px の帯だけ
* 2カラムのまま残っていた。 */
@media (max-width: 781px) {
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point {
grid-template-columns: minmax(0, 1fr);
/* モックは1カラムのとき gap を space-3 に詰める。 */
gap: var(--tt-space-3);
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point__number {
grid-column: 1;
grid-row: 1;
font-size: var(--tt-text-numeral);
}
/* grid-column も 1 に戻す（2026-08-10・375px幅の突合で発見）。
* 行を1カラムにしても、子がデスクトップ用の grid-column: 2 を持ったままだと
* 暗黙の2列目が作られ、1列目が 0px に潰れて結局2カラムのままだった。 */
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point__heading h3 {
grid-column: 1;
grid-row: 2;
}
body.tiptop-standard-system .site-main--front .tiptop-front-content .intro-services .tiptop-service-point > p {
grid-column: 1;
grid-row: 3;
}
}
/* 820px でのトップの本文サイズ上書きは外した（2026-08-11）。
* 承認済みモックは @media の中に font-size を1つも持たない（可変は clamp が担う）
* ので、ブレークポイントごとの上書きは寄せ先が無く、消すのが正。 */
/* CAREERのモバイル縦積みはここから外した（2026-08-11・Issue #868 のA）。
* 以前は `.tiptop-about-list > div > div > div` に `!important` 2行を当てていた。
* ベタ書きHTMLのインラインstyleに勝つ唯一の手段だったが、貼り付けHTML側を
* クラス構成へ差し替えたので不要になった（＝方針どおり !important を1件減らせた）。
* 経歴はクライアントごとに違う一点物なので、見た目は貼り付けHTML自身の `