/* ============================================================ surface.css ── 面と余白（色は一切変更しない） ------------------------------------------------------------ 2026-07-30 ボス指示 「色は黒岩先生の指定というのもあるので変更せず、それ以外の部分は変更で」 ■ このファイルが触らないもの（重要） 色を1つも変えていない。 --c-primary / --c-teal / --c-navy などのトークン、 サービスカードの帯、CTAとフッターのベタ塗り、 ボタンの塗り色 ── すべて現状のまま。 このファイルを外せば、面と余白だけが元に戻る。 ■ 触るもの ① 角丸 6〜12px → 2px（円形バッジは除く） ② 見出しブロックと中身の距離（44pxと100pxの不整合を解消） ③ 影の整理 ■ typo.css と分けている理由 文字の話と、面・余白の話は寿命が違う。 余白は「入れてみて長い／短い」で戻す確率が高いので、 このファイルだけ外せる形にしてある。 ============================================================ */ /* ============================================================ §1 角丸 ── 6〜12px → 2px ------------------------------------------------------------ 実測した現状（TOPページ） --r-sm 8px ／ --r-md 10px ／ --r-lg 12px ／ --r-btn 6px 使用数： 999px×24 ／ 12px×23 ／ 6px×13 ／ 8px×6 ／ 10px×1 12pxと6pxが混在していて、しかも採用ページだけ2px（ボス判断）という **サイト内で3つの基準が並走している状態**だった。 2px にする理由は採用ページのときと同じ。ボスの言葉をそのまま残す： 「ゼロはだめだ！角が立つ！認識されない程度でも構わないから 角丸にしておこう！相手と向き合う姿勢が大切だ！」 0px … 角が立つ。相手と向き合う姿勢に反する 1px … 一部のディスプレイ倍率で消える 2px … どの環境でも必ず描画され、かつ「丸めた」とは気付かれない 3px以上 … 「角丸のデザイン」に見えてしまう ■ --r-pill（999px）は残す ステップの丸、アイコンの円、タグのピル。 これは「角を丸めている」のではなく「円そのもの」なので別物。 ============================================================ */ :root { --r-sm: 2px; --r-md: 2px; --r-lg: 2px; --r-btn: 2px; /* --r-pill はあえて上書きしない（円形バッジ・アイコン用） */ } /* トークンを経由していない、直書きの角丸を拾う。 .c-svc-row__media は **SPのメディアクエリ内でだけ 6px** を直書きしていて、 最初の一覧から漏れていた（PCでは0px）。実測で見つけて追加。 :where() で詳細度を0にしているので、 個別に意図があって指定している箇所は上書きしない。 */ .l-main :where(.c-entry-card, .c-entry-card figure, .c-entry-card img, .c-main-card, .c-issue-card, .c-value-card, .c-strength-row__media, .c-strength-row__media img, .c-svc-row, .c-svc-row__media, .c-svc-row__media img, .c-plan, .c-support-card, .c-desk-card, .c-cta, .c-first-banner, .c-news-row, .p-access__map, .p-access__parking--map) { border-radius: 2px; } /* ============================================================ §2 見出しブロックと中身の距離 ------------------------------------------------------------ 実測すると **44px の箇所と 100px の箇所が混在**していた。 44px … p-cert / p-issues / p-forwho / p-services 100px … p-strengths / p-cases / p-flow セクションの間隔は上下100pxずつ＝**隣り合うと200px**。 見出し下が100pxだと「見出しと中身の距離」と「セクション間の距離」が 2:1しかなく、どの見出しがどの中身に掛かっているのかが弱くなる。 近接の原則どおり、内側は外側よりはっきり近くする。 56px にした理由： 44px … 英字見出しを80pxに上げたぶん、いまは詰まって見える 56px … 見出し下56px : セクション間200px ＝ 1:3.6。階層が明確 100px … 離れすぎ（現状の3箇所） SPは28pxで統一されていて破綻がないので触らない。 ============================================================ */ @media screen and (min-width: 768px) { .l-main [class$="__head"] { margin-bottom: 56px; } } /* ============================================================ §3 影 ------------------------------------------------------------ サイト全体で2種類しか使われていない（実測）。 rgba(9,32,58,.22) 0 10px 28px rgba(9,32,58,.08) 0 10px 26px 角丸を2pxにすると、ぼけの大きい影は「浮いている板」に見えて 紙のような硬さと噛み合わなくなる。 **ぼけを詰めて、落ちる距離を短くする**。色は変えない。 ============================================================ */ .l-main :where(.c-entry-card, .c-main-card, .c-plan, .c-support-card, .c-desk-card, .c-svc-row, .c-first-banner) { box-shadow: 0 2px 10px rgba(var(--c-shadow-rgb), .06); } /* ============================================================ §4 セクションの余白リズム ------------------------------------------------------------ 2026-07-30 ボス指示「②で」。 ■ 何が問題だったか 黒岩：全セクションが **100px / 100px で完全に同一**（実測）。 隣り合うと必ず200px。どこが章の切れ目かが余白から読めない。 参考（recruit.shinotax.com を実測）： 195/80 ／ 90/80 ／ 168/81 ／ 101/119 ／ 93/101 ／ 100/20 ／ 81/98 → **80〜195pxでバラついている**。 つまり「200pxが広すぎる」のではなく、**揃いすぎているのが問題**。 広い／狭いではなく、**緩急が無い**ことが平板さの正体だった。 ■ どう分けるか このサイトには既に「背景色のバンド（#f5f8fb）」という章立ての合図がある。 それを余白にも反映させるだけでいい。 標準のセクション 72 / 72 → 隣り合うと144px 背景を持つセクション 132 / 132 → 標準と隣り合うと204px 144 : 204 ＝ 1 : 1.4。章の切れ目がはっきり広くなる。 しかもTOPは正味 約-380px 短くなる（行間を広げたぶんの回収）。 ■ 触らないセクションを :not(:is()) で外している 余白が0で設計されている箇所（FV・下層KV・料金表・ピン留め等）に 一括で padding を当てると壊れるため、実測して除外リストを作った。 `:is()` を `:not()` の中に入れているのは詳細度を(0,1,0)に抑えるため （素の :not(.a):not(.b)... だと詳細度が積み上がって他を壊す）。 ■ 一覧から漏れたセクションが出たら 除外リストに無ければ「標準（72px）」になる。 背景リストに無ければ「章の切れ目」にならないだけで、**壊れない**。 気付いたら下の :is() に足す。 ============================================================ */ @media screen and (min-width: 768px) { /* 標準 */ .l-main section:not(:is( .p-fv, .c-newsbar, .p-page-kv, .p-pricing-teaser, .p-access, .p-plans, .p-other-fee, .p-price-notes, .p-flow, .p-jobdesc, .p-recruit-hero, .p-recruit-band )) { padding-top: 72px; padding-bottom: 72px; } /* 章の切れ目＝背景を持つセクション */ .l-main section:is( .p-issues, .p-cases, .p-mvv, .p-values, .p-overview, .p-service-detail, .p-support, .p-faq, .p-contact-form, .p-whyus, .p-require, .c-cta, .p-welcome, .p-recruit-cta ) { padding-top: 132px; padding-bottom: 132px; } } @media screen and (max-width: 767px) { .l-main section:not(:is( .p-fv, .c-newsbar, .p-page-kv, .p-pricing-teaser, .p-access, .p-plans, .p-other-fee, .p-price-notes, .p-contact-desk, .p-news-archive, .p-flow, .p-jobdesc, .p-recruit-hero, .p-recruit-band )) { padding-top: 48px; padding-bottom: 48px; } .l-main section:is( .p-issues, .p-cases, .p-mvv, .p-values, .p-overview, .p-service-detail, .p-support, .p-faq, .p-contact-form, .p-whyus, .p-require, .c-cta, .p-welcome, .p-recruit-cta ) { padding-top: 80px; padding-bottom: 80px; } } /* ============================================================ §5 フッターのロゴ ── ホームへのリンク ------------------------------------------------------------ 2026-07-30 ボス指示「フッターのロゴマーク＋ロゴタイポはホームに飛ぶように」。 markup 側（mu-plugin で に包む）とセットの見た目調整。 親 .c-footer-info__name は display:flex / gap:10px。 を挟むと画像2枚が の子になってフレックスの関係が切れるので、 自身に同じ指定を移している（実測値：gap 10px / align-items center）。 ============================================================ */ .l-footer .c-footer-info__home { display: flex; align-items: center; gap: 10px; text-decoration: none; /* 画像の下に生まれる隙間を作らない */ line-height: 0; transition: opacity .25s ease; } .l-footer .c-footer-info__home:hover { opacity: .75; } /* キーボード操作でどこにいるか分かるようにする。 フッターは青ベタなので、白い輪郭でないと見えない。 */ .l-footer .c-footer-info__home:focus-visible { outline: 2px solid #fff; outline-offset: 6px; } /* 住所 → Googleマップ（mu-plugin 差し替え1-4 とセット） TEL のリンクと見た目を揃える。普段は下線なし、 ホバーで下線 ＝ 「押せる」ことが分かる最小限の合図。 */ .l-footer .c-footer-info__map { color: inherit; text-decoration: none; transition: opacity .25s ease; } .l-footer .c-footer-info__map:hover { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; } .l-footer .c-footer-info__map:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } /* ============================================================ §6 画像に焼き込まれた角丸を消す（暫定） ------------------------------------------------------------ 2026-07-30 ボス指摘「角丸の名残があるぞ！」 ■ 何が起きていたか CSSの border-radius は全ページ 2px 以下（実測ゼロ件が3px以上）。 残っていたのは **画像ファイルそのものに焼き込まれた角丸**。 書き出し時に角丸マスクを掛けたまま JPEG にしたもの。 全35枚をcanvasで1px単位で走査して特定した（4隅の色と、 隅から辺に沿って伸びる「同色の走り」の長さで判定）： mvv-mission.jpg 610×301 白マスク 半径 6px case-01-manufacturing 500×200 黒マスク 半径 5px case-02-restaurant 500×200 黒マスク 半径 5px case-03-construction 500×200 黒マスク 半径 5px whyus-01〜05.jpg 560×388 黒マスク 半径 11〜14px 白マスクは背景(#f7f8fb)と紛れて「角丸に見える」、 黒マスクは「隅に黒い三日月が出る」。出方が逆なので 見落としやすく、mvv-mission だけが目に付いたのだと思う。 ■ なぜ CSS で切るのか 正しい直しは書き出し直し（小河さんの宿題に追加済み）。 ただ素材が戻るまで見え続けるので、それまでの間、 **画像の外周を少しだけ削って**角丸を画面外へ追い出す。 必要な削り量は幾何で決まる。半径 r の角丸を、 角の点(d,d)が図形の内側に入るまで削るには d ≧ r − (r−1)/√2 ≒ 0.293r + 0.71 最大の whyus（r=14）で d ≧ 4.8px。 scale 1.04 は 388px高の画像で上下 7.8px ずつ削るので足りる。 横は 560px なので 11.2px。余裕がある。 拡大率4%は、いずれの画像も表示サイズより元画像が大きい （whyus は 560px を約300pxで表示）ため、画質は落ちない。 ■ ファイル名で当てている理由 クラス名ではなくファイル名で指定してある。 素材が差し替わったら、このブロックを消すだけで元に戻る。 「どの画像が悪いのか」がセレクタ自体に書いてある状態にした。 ============================================================ */ /* 2026-07-30 case-01〜03 を除外。Firefly生成の新素材には角丸が焼き込まれていないため、 拡大するとむしろ無駄に画質を落とすだけになる。 */ .l-main img[src*="mvv-mission"], .l-main img[src*="whyus-0"] { /* transform ではなく scale プロパティを使う。 リビール（motion.css）が transform: translateY を使うので、 transform で書くと打ち消し合う。scale は独立プロパティなので translateY と共存できる。 */ scale: 1.04; } /* 拡大した分をはみ出させないための器。 親に overflow が付いていない場合だけ効けばいいので :has() で拾う。 （.c-mvv-row__media には元から overflow:hidden が入っている） */ .l-main :has(> img[src*="mvv-mission"]), .l-main :has(> img[src*="whyus-0"]) { overflow: hidden; } /* ============================================================ §7 SPの詰め ── タップ領域と余白 ------------------------------------------------------------ 2026-07-30 ボス指示「⑤いこう！」 ■ ボタンの高さ（実害） 390×844で実測したところ、サイトのボタンは 38px（ご相談はこちら／料金をみる） 42px（サービスをみる） 40px（ハンバーガー） 指の腹は7〜10mm＝おおよそ44〜48px。 38pxは「押せるが、狙う」サイズで、押し間違いが出る。 WCAG 2.5.5（AAA） 44×44px Apple HIG 44pt Material 48dp いちばん押されるべき「ご相談はこちら」が いちばん小さい状態だったので 48px に上げる。 文字は14pxのまま、上下の余白だけが増える。 ■ なぜ padding ではなく min-height なのか padding を足すと、文字量の違うボタンで高さが揃わない。 min-height ＋ inline-flex の中央揃えなら、 1行でも2行でも下限48pxが保証される。 ■ 見出しブロックと中身の距離 28px → 36px PCは §2 で 56px にした。SPは28pxのままだった。 英字を24→28pxに上げたぶん見出しの塊が重くなるので、 中身との間も比例して開ける。 セクション間はSPで 48px（背景付きは80px）なので、 36 : 96 ＝ 1 : 2.7。PCの 56 : 144 ＝ 1 : 2.6 とほぼ同じ比。 ■ カードの内側 14px/12px → 18px/16px 327px幅のカードで左右12pxは、指で触る面としても 文字の置き場としても窮屈。16pxで下げ止める （20pxにすると本文が1行19文字→17文字になり折り返しが増える）。 ============================================================ */ @media screen and (max-width: 767px) { .l-main .btn, .l-header .btn, .l-footer .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } /* ハンバーガー 40×40 → 44×44 */ .l-header :is(.c-drawer-toggle, .c-hamburger, [class*="drawer"][class*="btn"], button[aria-controls]) { min-width: 44px; min-height: 44px; } .l-main [class$="__head"] { margin-bottom: 36px; } .l-main :is(.c-issue-card, .c-value-card, .c-support-card, .c-main-card, .c-plan) { padding: 18px 16px; } /* ---- §7-2 カタカナが単語の途中で折れるのを止める --------- 実測（390px端末・カード幅154px・ラベル幅130px） 「freee認定 アドバイザー」 → freee認定 アドバイ / ザー 「マネーフォワード 公認メンバー」 → マネーフォワード 公 / 認メンバー 日本語の禁則では仮名の途中で折るのは正当な処理だが、 カタカナ語が割れると別の単語に読める。 word-break:keep-all で「連続した文字列の途中では折らない」に変え、 もともと文言に入っている**半角スペースの位置**で折らせる。 freee認定 ／ アドバイザー （61px ／ 78px） マネーフォワード ／ 公認メンバー （104px ／ 78px） どちらも130pxに収まるので、はみ出しは起きない。 ■ 使いどころを限定している理由 keep-all は「折れる場所が無ければはみ出す」。 文言が確定していて幅も実測済みのここだけに当てる。 */ .l-main .c-cert-card__label { word-break: keep-all; } /* パンくずが実測23px。24pxまで**あと1px**という状態だった。 文中のリンク（同意文の「プライバシーポリシー」20px など）は WCAG 2.5.8 のインライン例外に当たるので触らない。 パンくずはリンクが横に並ぶ「一覧」なので例外に当たらない。 */ .c-breadcrumb__item a { display: inline-block; padding: 3px 0; } /* お知らせのカテゴリ絞り込みのチップ。 テーマ既定は height:34px 固定で、指で押すには小さい。 min-height に置き換えて44pxを確保する （height のままだと文字が2行になったとき溢れる）。 */ .c-news-filter__link { height: auto; min-height: 44px; padding: 0 18px; } } /* ============================================================ §8 SPのメニュー内に事務所情報を置く ------------------------------------------------------------ 2026-07-30 ボス指示 「SPのフッターは©のみでいい。その代わり、必要なら住所等は ハンバーガーメニューを開いたときに見えるように設置しといて」 ■ 前提（実測） テーマの style.css に元から @media (max-width:767px){ .l-footer .c-footer-grid{display:none} } があり、SPのフッターは著作権表記1行だけ。**この仕様は維持する**。 一度2列で出す実装を入れたが、ボス判断で撤回した。 ■ 置き場所 ドロワー（#js-gnav-area）の中の .l-header__actions の直後。 ここには既に電話リンクと「ご相談はこちら」が入っているので、 住所・営業時間・FAXを足すと「事務所の連絡先」が1箇所に揃う。 markup は mu-plugin の差し替え1-5 が入れている。 ■ PCでは出さない PCの #js-gnav-area は横並びのグローバルナビ本体。 ここにブロックを足すとヘッダーが崩れるので display:none が既定。 ============================================================ */ .c-gnav-info { display: none; } @media screen and (max-width: 767px) { .c-gnav-info { display: block; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(var(--c-navy-rgb), .14); font-size: 13px; line-height: 1.9; letter-spacing: .02em; } .c-gnav-info__addr { margin: 0; } .c-gnav-info__map { color: inherit; text-decoration: none; display: inline-block; } .c-gnav-info__map:hover { text-decoration: underline; text-underline-offset: .28em; } .c-gnav-info__sub { margin: 6px 0 0; opacity: .78; } } /* ============================================================ §9 SPの固定バー（電話する／相談する） ------------------------------------------------------------ 2026-07-30 ボス指示 「SPの場合、画面下部に固定で『電話する』と『相談する』を設置。 問い合わせページ以外は固定で、採用情報ページの場合は 『相談する』ではなく『応募する』で」 ■ 電話番号を出すか（判断は任せる、と言われた件） **出す**ことにした。理由は2つ。 ・幅390pxを2分割すると片側195px。13pxなら「099-800-9189」は 約84px＋アイコンで収まる。物理的に入る。 ・番号が見えていると「押したら電話が始まる」ことが伝わる。 『電話する』だけだと、押す前に何が起きるか分からない人がいる。 受話器アイコンを添えて、発信であることを二重に示している。 ■ 高さ56px WCAG 2.5.5（AAA）の44pxを超え、Materialの48dpも超える。 親指が届く画面下端なので、迷わず押せる大きさを優先した。 ■ 隠れないようにしていること ・フッターに下パディングを足して、著作権表記がバーに隠れないように ・ページトップ戻るボタンをバーの上へ移動 ・ドロワーを開いている間は非表示（body.is-nav-open） ・iPhoneのホームインジケータ領域は env(safe-area-inset-bottom) で回避 ■ 色 新しい色は作っていない。既存トークン（--c-primary / --c-navy）だけ。 ============================================================ */ .c-spbar { display: none; } @media screen and (max-width: 767px) { .c-spbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; box-shadow: 0 -2px 14px rgba(var(--c-shadow-rgb), .16); padding-bottom: env(safe-area-inset-bottom, 0px); } /* ---- 出し方：最初は隠して、少しスクロールしたら滑り出す ---- 2026-07-30 ボス判断。 ■ なぜ常時表示をやめたか FVは「第一印象」を作る面で、写真の下端に白い帯が最初から 乗っていると、せっかくの写真が56px分いつも欠けている。 しかもFVには同じ「ご相談はこちら」が既にある。 ＝ 最初の1画面ではバーは仕事をしていない。 ■ しきい値 0.55画面（最低260px） 390×844なら464px。FVの中のボタンを通り過ぎたあたりで出る。 「1.5画面」（ページトップ戻るボタンと同じ）だと、 スクロールを始めた人が電話したくなる瞬間に間に合わない。 ■ 隠れている間はタブでも触れない visibility:hidden なのでキーボード操作の順番にも入らない。 transform だけで隠すと、見えないボタンにフォーカスが飛ぶ。 ■ html.js を条件にしている理由（フェイルセーフ） JSが落ちて class が付かない環境では、この「隠す」ルール自体が 効かない ＝ **バーは常時表示のまま**。 電話ボタンが出てこない、という壊れ方をしない。 */ html.js .c-spbar { transform: translateY(110%); visibility: hidden; /* visibility は「時間をかけて変える」のではなく、 **滑り終わってから一気に切り替える**（0s ＋ 遅延）。 transition: visibility .38s と書くと、タブが裏に回って アニメーションの時計が止まったときに hidden のまま固まる。 実際に検証中、class を付けても visibility が hidden から 戻らない状態を観測した。0s なら時計に依存しない。 */ transition: transform .38s cubic-bezier(.215, .61, .355, 1), visibility 0s .38s; } html.js .c-spbar.is-visible { transform: none; visibility: visible; /* 出すときは遅延なし。滑り始めと同時に見える。 */ transition: transform .38s cubic-bezier(.215, .61, .355, 1), visibility 0s 0s; } .c-spbar__btn { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; text-decoration: none; } .c-spbar__btn--tel { color: var(--c-navy); } .c-spbar__btn--cta { color: #fff; background: var(--c-primary); } .c-spbar__icon { width: 17px; height: 17px; flex: none; } .c-spbar__num { font-size: 16px; letter-spacing: .01em; } /* ドロワーを開いている間は出さない。 ヘッダー（z-index 100）が上に来るので実害は無いが、 閉じるときの一瞬に見えるので明示的に消しておく。 */ body.is-nav-open .c-spbar { display: none; } /* バーの下にコンテンツが隠れないようにする。 .c-spbar がDOMに無いページ（お問い合わせ）では効かないよう :has() で条件を付けている。 */ body:has(.c-spbar) .l-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } body:has(.c-spbar) .c-totop { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } } /* 動きを減らす設定の人には、滑らせずに出す。 画面下端から56pxの帯が滑り込む動きは、前庭障害のある方には 視界の端で起きる予期しない動きになる（WCAG 2.3.3）。 */ @media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) { html.js .c-spbar { transition: none; } } /* ============================================================ §10 SPの駐車場マップ ── 肝心のところを大きく出す ------------------------------------------------------------ 2026-07-30 ボス指摘 「SPの駐車場のイラストマップは主要なところが映っていない状態なので、 SPで事務所から駐車場までの道のりがしっかり見えるように」 ■ いまの状態（実測・390px端末） 元画像 1600×750 を **640×300（40%）** に縮めて、 幅340pxの横スクロール枠に入れていた。 ・**300px（画像の47%）が右に隠れている** ・横に動かせることを示す合図が無い ・40%縮小だと「黒岩税理士事務所」の文字が実寸9.6px相当 ■ 画像の中身をcanvasで1px単位に走査して、要る範囲を確定した 目分量ではなく、色で要素を拾って外接矩形を出している （最初は画面写真から目測して切り、事務所の箱を切り落とした）。 要素 元画像での位置(1600×750) オレンジのピン（上端） y 49 事務所の黒い箱 x 879〜1246 ／ y 113〜313 オレンジの導線 x 700〜1169 ／ y 49〜408 黄色のP x 638〜 765 ／ y 410〜538 「Mパーク郡元8」＋徒歩約1分 x 568〜 832 ／ y 553〜667 純心学園駅前 x 1150〜1282 ／ y 540〜679 → **x 540〜1320 ／ y 30〜700（780×670）** で全部入る。 落とすのは左の新川・JR郡元駅と、右の鹿児島大学。 どちらも「事務所から駐車場までの道のり」には要らない。 ■ さらに、SPでは左右の24pxを食い破って全幅にしている コンテナの内側（327px）に収めるより、画面幅いっぱい（390px）の ほうが 1.19倍 大きく出せる。地図は全幅のほうが見た目も自然。 100vw ではなく `calc(100% + 48px)` と `margin -24px` を使うのは、 100vw がスクロールバーの幅を含んでしまい、環境によっては 横スクロールが生まれるため（枠の左右パディング24pxは実測値）。 ■ 結果 表示倍率 390/780 ＝ **0.50倍**（元は0.40倍） 事務所の文字が 実寸12px → **15px** 横スクロール **不要**（切れて見えない部分がゼロ） ■ 画像を作り直さずCSSだけでやっている img のまま（alt が消えない）拡大してずらす。 width 100% × 1600/780 … 切り出し幅を枠幅に合わせる translate -540/1600, -30/750 … 左上を切り出し位置へ translate の % は **自分自身のサイズ基準**なので、 枠の幅がいくつでも同じ場所が出る。 （top/left の % は枠の幅基準になるので使えない） ■ 「（図は横にスクロールできます）」を消している figcaption::after にテーマが入れている文言。 スクロールしなくなったので、残すと嘘になる。 ■ 元に戻したいとき このブロックを消せば、元の横スクロール表示に戻る。 ■ 本来の直し方 小河さんにSP用の縦位置マップを起こしてもらうのが本筋。 切り出しでは周辺の目印（JR郡元駅・鹿児島大学）が落ちるため。 ============================================================ */ /* ============================================================ §11 下層KVの、青と写真の境目 ------------------------------------------------------------ 2026-07-30 ボス指摘「ヘッダーのFVの画像左の境界が気になる。 自然な感じでぼかせない？」 ■ なぜ線が見えていたか（実測して原因が確定した） KVは2枚重ねになっている。 .p-page-kv 背景 linear-gradient(90deg, #0768d6 → #04798d) .p-page-kv__media 写真。position:absolute で **left:38%** から右 └ ::after linear-gradient(90deg, #0768d6 0%, rgba(#0768d6,.55) 42%, rgba(#0768d6,0) 100%) 境目（左から38%の位置）で、左右がこうなっていた。 境目の左： 下地のグラデが38%まで進んだ色 ＝ rgb(6,110,186) 境目の右： 写真の上のスクリムの0%の色 ＝ rgb(7,104,214) **青のBだけ28ずれた縦線**が、180pxの高さでまっすぐ立っていた。 ぼけていないのではなく、**色が合っていなかった**のが正体。 ■ 色を書き換えなかった理由 境目の位置が画面幅で変わる（実測）。 1920 / 1440px … 38% 1024px以下 … 50% 38%地点の色を直接書くと、1024px以下でまた1px単位でズレる。 幅ごとに色を書き分けるのは、あとで必ず腐る。 ■ 代わりに写真そのものをフェードインさせた .p-page-kv__media に左端から立ち上がるマスクを掛ける。 マスクは中の にも ::after にも同時に効くので、 境目では**写真もスクリムも透明** ＝ 下地のグラデがそのまま見える。 そこから右へ向かって、下地の色 → スクリムの青 → 写真、と 連続して切り替わる。 どの幅でも、境目の左右は必ず同じ色になる。**計算不要で必ず合う。** 色は1つも変えていない。既存の2つのグラデをそのまま使っている。 ■ 立ち上がり24% 1920pxで約280px、390pxで約45px。 短いと線が残り、長いと写真が痩せる。 写真の左端はもともとスクリムでほぼ潰れている領域なので、 ここを削っても被写体は失われない。 ============================================================ */ .p-page-kv__media { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); } @media screen and (max-width: 767px) { /* 左右の24pxを食い破って全幅に。 セレクタを3段にしているのは、テーマ側に `.l-main .p-access__parking { width:100% }` 相当の 詳細度(0,2,0)のルールがあり、1段だと負けるため（実測）。 */ .l-main .p-access__parking.p-access__parking--map { width: calc(100% + 48px); margin-left: -24px; margin-right: -24px; } .p-access__parking--map .p-access__parking-scroll { position: relative; overflow: hidden; aspect-ratio: 780 / 670; } .p-access__parking--map .p-access__parking-scroll img { position: absolute; top: 0; left: 0; width: calc(100% * 1600 / 780); height: auto; max-width: none; transform: translate( calc(-100% * 540 / 1600), calc(-100% * 30 / 750) ); } /* 全幅にしたぶん、説明文だけは元の余白に戻す */ .p-access__parking--map .p-access__parking-caption { padding-left: 24px; padding-right: 24px; } /* もう横スクロールしないので、その案内は消す */ .p-access__parking--map .p-access__parking-caption::after { content: none; } } /* ============================================================ §12 支援事例カードの動画（2026-07-30） ------------------------------------------------------------ ■ 何をしているか カードの画像の上に