/* =========================================================== 13-services-list — サービス一覧（横並びリスト4行） トップの事業カード（03-business）とは別物。カードを並べるのではなく、 「左にサムネイル / 右にラベル＋見出し / 右端に ↗ かバッジ / 下に区切り線」 の行を縦に4つ積む（design/SUBPAGES.md「2. サービス一覧ページ」）。 Figma からの実測は **テキストブロック W=763.5 / H=110（1行目）** の1点のみ。 他は下の2つの逆算で辻褄を合わせている。合わない箇所が出たら、 まずこの2つの前提（列間隔58 / 右端列120）を疑うこと。 ── 横の配分（コンテナ 1282 を割る）──────────────────────── コンテナ 1282 （実測 --container） − 列間隔（サムネ→テキスト） 58 （03-business の実測列間を流用・PROVISIONAL） − テキストブロック 763.5 （実測） − 列間隔（テキスト→右端） 58 （PROVISIONAL） − 右端列（↗ / 近日公開バッジ） 120 （PROVISIONAL） ------ = サムネイル幅 282.5 → 282px サムネイルの比は 03-business の実測 612 : 344.58 をそのまま使う （同じ画像塗り原本のため）。→ 高さ = 282 × 344.58 / 612 ≒ 158.8 ── 縦の配分（フレーム総高 1965 と突き合わせ）────────────── リード下端 314 （実測 272 + 42） + リスト上余白 60 （PROVISIONAL） + 4行 ×（158.8 + 下余白20 + 行間20）795.2 + CTA 453 （08-cta 実測 H） + フッター 345 （99-footer 実測 H） ------ 1967 （カンプ実測 1965 / 差 2px = 0.1%） → 行の下余白20・行間20・リスト上余白60 でカンプ総高とほぼ一致する。 ── テキストブロックの内訳（実測 H=110）──────────────────── ラベル 12 × 1.5 18 + ラベル→見出し 20 （PROVISIONAL） + 見出し 2行 ×（24 × 1.5） 72 ------ 110 （実測と一致） → 見出しは 24px / 行間1.5。tokens.css の --fs-h3 は PROVISIONAL 扱いの 未実測値なので使わず、この逆算値をローカル変数として持たせる。 =========================================================== */ .sec-services { /* ⚠️ 本文エリアだけ**白帯**（全幅）。ページの地色 #EFF0EE の上に乗る。 見出しエリアと CTA は地色のまま。会社概要（11-company-profile）と同じ扱い。 2026-08-12 に3ページとも揃えた（それまで会社概要にしか入っていなかった）。 */ background: var(--surface); /* DERIVED: 上の縦の配分参照。見出し帯（12-services-head）の padding-bottom は 0 なので、間隔はこちらで持つ。 */ padding-block: 60px 0; /* --- ローカル変数（tokens.css は編集しない） ----------------- */ --services-thumb-w: 282px; /* DERIVED（上の横の配分参照） */ --services-col-gap: 58px; /* PROVISIONAL（03-business の実測列間を流用） */ --services-action-w: 120px; /* PROVISIONAL */ --services-name-fs: 24px; /* DERIVED（テキストブロック H=110 から逆算） */ --services-name-lh: 1.5; /* DERIVED */ --services-row-pad: 20px; /* DERIVED */ } .sec-services__list { display: flex; flex-direction: column; gap: 20px; /* DERIVED（上の縦の配分参照） */ } .sec-services__item { padding-bottom: var(--services-row-pad); /* 「行の下に区切り線」。4行目にも入る（カンプで確認済み）。 */ border-bottom: 1px solid var(--border-soft); /* PROVISIONAL: 線の色は未実測 */ } .sec-services__row { /* .sec-services__link::after を行全体に敷いてクリック領域にするための起点 */ position: relative; display: flex; align-items: center; gap: var(--services-col-gap); } /* --- サムネイル ---------------------------------------------- */ .sec-services__thumb { position: relative; flex: none; width: var(--services-thumb-w); transition: opacity var(--dur) var(--ease); } .sec-services__thumb-bg { display: block; width: 100%; /* height:auto を必ず入れる。 の width/height 属性が プレゼンテーション・ヒントとして効き、aspect-ratio を無視するため。 */ height: auto; aspect-ratio: 612 / 344.58; /* 03-business の実測比 */ object-fit: cover; object-position: center; } /* サムネイル中央のワードマーク。 比率は 03-business の実測（サムネ612幅に対して 439.04）をそのまま使う。 FUSION AI for Biz 439.04 / 612 = 71.7% ⚠️ FUSION AI（43.3%）の修飾子は**削除済み**（2026-08-15）。 支給画像にロゴタイプが焼き込まれていて、重ねると二重になるため。 詳細は sections/13-services-list.html の2枚目のコメント。 */ .sec-services__wm { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; /* width/height 属性のヒントを打ち消す */ pointer-events: none; } .sec-services__wm--biz { width: 71.7%; } /* 3・4行目はワードマークではなく素のテキスト（Bold・中央揃え）。 級数は 03-business の実測 36px / サムネ612幅 = 5.88% を このサムネ幅（282）に当てた値。→ 282 × 0.0588 ≒ 16.6 → 16px */ .sec-services__wm--text { width: max-content; max-width: 88%; font-size: 16px; /* DERIVED（上のコメント参照） */ font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--text-strong); text-align: center; white-space: nowrap; } /* --- テキスト ------------------------------------------------ */ .sec-services__copy { /* 実測 W=763.5。flex の残りが自動でこの幅になる配分にしてある（上の横の配分参照）。 */ flex: 1 1 auto; min-width: 0; } /* ✅ カンプ実測（service_pc / 2026-08-12・Figmaのタイポグラフィパネル）: Zen Kaku Gothic New / Bold / 14px / 行間 28.3 / 字間 0 / 塗り #67BE8D トップページのカードラベル（.sec-business__label）と同じ組み。 ⚠️ 以前は --fs-xs(12px)・ウェイト指定なし・行間1.5 の暫定値だった。 トップ側を直したときに**こちらは別クラスなので直っていなかった**。 */ .sec-services__label { font-size: 14px; font-weight: 700; line-height: 28.3px; letter-spacing: 0; color: var(--aixeed-green); } .sec-services__name { margin-top: 20px; /* PROVISIONAL */ font-size: var(--services-name-fs); font-weight: 700; line-height: var(--services-name-lh); letter-spacing: 0; } /* 行全体をクリック領域にする（見出しの中にリンクを置いたまま、 擬似要素だけ行いっぱいに広げる）。 */ .sec-services__link::after { content: ''; position: absolute; inset: 0; } /* ホバーの装飾はカンプに指定が無いため置かない（2026-08-12 ご指示）。 キーボード操作時のフィードバックだけ残す。 */ .sec-services__row:has(.sec-services__link:focus-visible) .sec-services__thumb { opacity: 0.85; } /* --- 右端（↗ / 近日公開） ------------------------------------ */ .sec-services__action { flex: none; display: flex; align-items: center; justify-content: flex-end; width: var(--services-action-w); /* PROVISIONAL */ } .sec-services__ext { font-size: 20px; /* PROVISIONAL */ line-height: 1; color: var(--text); } /* サムネイル内・右下の「お問い合わせ」ピル（3・4枚目）。 カンプは**塗りなし＋細い黒枠**。サムネイルの絵が透けて見える。 ⚠️ 一度「白の塗り」にしたが誤り。拡大画像で枠線だけと確認（2026-08-12）。 PROVISIONAL: 高さ・級数・余白はカンプ画像からの目測。 */ .sec-services__badge { display: inline-flex; align-items: center; justify-content: center; height: 32px; /* PROVISIONAL */ padding-inline: 20px; border: 1px solid var(--text); border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: 1; color: var(--text); white-space: nowrap; } /* =========================================================== TB — サムネイルを縮めて 3カラムのまま維持する。 1100px を切るとテキストブロックが 763.5 を保てないので、 サムネと右端列を先に詰める。 =========================================================== */ @media (max-width: 1099px) { .sec-services { --services-thumb-w: 220px; --services-col-gap: 32px; --services-action-w: 104px; --services-name-fs: 20px; } .sec-services__wm--text { font-size: 14px; } } /* =========================================================== SP — 横並びをやめて縦積みに変換する。 横並びは「サムネイルと文章が横に並ぶ」ことが前提の版面なので、 幅が足りない画面では成立しない（サムネが小さすぎてワードマークが読めない）。 サムネイルを全幅に戻して、その下に文章、最後に ↗ / バッジを置く。 =========================================================== */ @media (max-width: 767px) { .sec-services { padding-block: 40px 0; --services-row-pad: 24px; } .sec-services__list { gap: 24px; } .sec-services__row { flex-direction: column; align-items: stretch; gap: 16px; } .sec-services__thumb { width: 100%; } /* 全幅に戻るとテキスト版ワードマークが 14px では小さすぎるので、 画面幅に追随させる。ベクター版は % 指定なので調整不要。 */ .sec-services__wm--text { font-size: clamp(18px, 5.6vw, 36px); } .sec-services__name { margin-top: 12px; font-size: var(--sp-fs-h3); } /* ✅ SPカンプ（service_sp / 2026-08-12）: 矢印は**サムネイルの中・右下**に置く。 DOM順は サムネ → コピー → アクション。SPだけ order でサムネの直後に 持ってきたうえで、負のマージンでサムネの上に引き上げて重ねる。 （アクションはサムネの子ではないので absolute では基準が取れない） 引き上げ量 = 矢印の高さ20 + 下の内側余白12 = 32px PROVISIONAL: 内側余白12pxはカンプ画像からの目測。 ⚠️ 一度「サムネの外・すぐ下」に直したが、それも誤り。カンプは中。 */ .sec-services__thumb { order: 0; } /* 固定の負マージンだと中身の高さ（矢印20px / ピル32px）で ずれるので、高さ0にして中身を自分の高さぶん持ち上げる。 持ち上げ量 = 100%（中身の高さ） + 行間16 + 内側余白12 = calc(-100% - 28px) */ /* ✅ SPカンプ実測（service_sp / 2026-08-12）: サムネイル 339 × 190.87 ピル `Group 405` X=257 Y=166.57 72 × 14 → 右の内側余白 339 − (257+72) = 10 下の内側余白 190.87 − (166.57+14) = 10.3 持ち上げ量 = 100%（中身の高さ） + 行間16 + 下余白10.3 = calc(-100% - 26.3px) */ .sec-services__action { order: 1; position: relative; z-index: 1; width: auto; height: 0; padding-right: 10px; justify-content: flex-end; /* ⚠️ 既定の align-items:center だと、高さ0の箱の中で中身が 自分の高さの半分ぶん上にずれる（矢印なら10px・ピルなら7px）。 中身の高さで内側余白が変わってしまうので flex-start にする。 */ align-items: flex-start; } .sec-services__action > * { transform: translateY(calc(-100% - 26.3px)); } /* ✅ SPカンプ実測（2026-08-12・Figmaのタイポグラフィパネル）: Zen Kaku Gothic New / Bold / 8px / 行間150% / 字間0 テキスト枠 71×8 で、ピルの枠線はそれをほぼ隙間なく囲む。 ⚠️ 8px は極端に小さいが、カンプの指定どおり。 PROVISIONAL: 高さ16pxと左右の余白8pxは、枠線とテキスト枠の関係からの導出。 PCのピルは未実測のため既定値（12px / 高さ32px）のまま。 */ /* ピルは実測 72 × 14。テキスト枠が 71×8 なので左右の余白はほぼ無く、 中身に任せると幅が出ない。**固定幅**にして文字を中央に置く。 */ .sec-services__badge { width: 72px; height: 14px; padding-inline: 0; font-size: 8px; font-weight: 700; line-height: 1.5; letter-spacing: 0; } .sec-services__copy { order: 2; } }