がそれぞれ独立した背景面を持つ。幅制限・左右余白は内側の.about-section__innerが担い、外側のsection自体には角丸・枠線・影を付けない。セクション同士は隙間なく隣接し、背景色の切り替えだけで区切りを作る（白い帯を残さない）。 ============================================================= */ .page-about .about-section__inner { width: min(1080px, 96%); margin-inline: auto; box-sizing: border-box; padding-block: 46px; } @media (max-width: 640px) { .page-about .about-section__inner { padding-block: 32px; padding-inline: 16px; } } .page-about .about-intro-section, .page-about .about-reason-section, .page-about .about-facility-section, .page-about .about-flow-section, .page-about .about-company-section { margin: 0; border: 0; border-radius: 0; box-shadow: none; } .page-about .about-intro-section { background: var(--color-panel-soft); } .page-about .about-reason-section--chosen { background: var(--color-page); } .page-about .about-reason-section--not-chosen { background: var(--color-panel-soft); } .page-about .about-facility-section { background: var(--color-page); } .page-about .about-flow-section { background: var(--color-panel-soft); } .page-about .about-company-section { background: var(--color-page); } /* ============================================================= 2. 冒頭リード（about-intro）— plan/first型の情報階層（r02） ------------------------------------------------------------- 旧 .ph-lead / .ph-lead--warm / .ph-eyebrow / 左罫線は about.htmlのHTML側から廃止済み。ピル型ラベル・背景・padding を持たない、見出し＋本文のシンプルな構造として再設計する。 ============================================================= */ .page-about .about-intro__group + hr.ph-divider { margin: 30px 0; } .page-about .about-intro__heading { margin: 0 0 10px; padding: 0; background: none; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.4; letter-spacing: .02em; } @media (max-width: 640px) { .page-about .about-intro__heading { font-size: 17px; } } /* r03: 冒頭2見出しの色を、元のabout.htmlにあった色分けへ差し戻す（r02で var(--color-brown-deep) へ統一していたのを解消）。 about-intro構造・サイズ・余白・ピル/左罫線廃止の状態は維持。 */ .page-about .about-intro__group:first-child .about-intro__heading { color: var(--brand-600); } .page-about .about-intro__group--fees .about-intro__heading { color: var(--brown-500); } .page-about .about-intro__text p { margin: 0 0 .6em; font-size: 15px; line-height: 1.65; letter-spacing: 0; font-weight: 400; text-align: left; word-break: normal; color: var(--color-text); } .page-about .about-intro__text p:last-child { margin-bottom: 0; } /* ============================================================= 3. 施設紹介リード（.ph-facility-lead）の再設計（r01のまま維持） ------------------------------------------------------------- vanilla-overrides_2.css にのみ定義があり、about.htmlからは読み込まれていなかったため無地表示になっていた問題への対応。同ファイルは読み込まず、旧デザイン（紫グラデーション・大きな角丸カード・強い影）も踏襲しない。平坦なリードブロックとしてラベル→主見出し→説明文の順に再設計している。 ============================================================= */ .page-about .ph-facility-lead { margin: 0 0 24px; padding: 20px 22px; background: var(--color-panel-soft); border-left: 4px solid var(--color-brand-soft); border-radius: var(--radius-small); text-align: left; } .page-about .ph-facility-lead__label { display: inline-block; margin: 0 0 8px; padding: .3em .8em; border-radius: var(--radius-small); background: var(--color-brand-soft); color: var(--color-brand-deep); font-size: 12px; font-weight: 700; letter-spacing: .06em; } .page-about .ph-facility-lead__main { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: .02em; color: var(--color-brown-deep); } .page-about .ph-facility-lead__text { max-width: 42em; margin: 0; font-size: 15px; line-height: 1.65; letter-spacing: 0; font-weight: 400; color: var(--color-text); word-break: normal; } @media (max-width: 640px) { .page-about .ph-facility-lead { padding: 16px 16px 18px; } .page-about .ph-facility-lead__main { font-size: 18px; } } /* ============================================================= 4. 長文本文の文字組（r01のまま維持） ------------------------------------------------------------- 本文フォントは --font-body（筑紫Aゴシック系）。字形が細く、字間を追加すると間延びして見えるため、letter-spacing は追加せず 0 のまま、15px前後・行間1.65を基準にする。短い箇条書き（.ph-kv）・「選ばれる理由/選ばれない理由」の短文カードは対象外。 ============================================================= */ .page-about .ph-facility__row p { font-size: 15px; line-height: 1.65; letter-spacing: 0; font-weight: 400; word-break: normal; } /* ============================================================= 5. 施設カード（.ph-facility__row）のモバイル1カラム化（r01のまま維持） ============================================================= */ @media (max-width: 640px) { .page-about .ph-facility { margin-bottom: 16px; } .page-about .ph-facility__wrap { padding: 10px 10px 14px; } .page-about .ph-facility__row { grid-template-columns: 1fr; gap: 12px; padding: 0 4px 4px; } .page-about .ph-facility__row figure { margin: 0; } .page-about .ph-facility__row img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .page-about .ph-facility__row > div { padding: 0 14px 2px; } /* 個別のobject-position（実機ブラウザでの目視確認は未実施） */ .page-about #f-living .ph-facility__row img { object-position: center 62%; } .page-about #f-medium .ph-facility__row img { object-position: center 42%; } .page-about #f-small .ph-facility__row img { object-position: center 40%; } .page-about #f-large .ph-facility__row img { object-position: center 38%; } .page-about #f-rest .ph-facility__row img { object-position: center 50%; } .page-about #f-lounge .ph-facility__row img { object-position: center 55%; } .page-about #f-lobby .ph-facility__row img { object-position: center 50%; } } /* ============================================================= 6. 選ばれる理由／選ばれない理由の配色（r02） ------------------------------------------------------------- トップページのボタン配色（選ばれる＝ブラウン／選ばれない＝藤色）へ合わせる。既存クラス名 .ph-reason--purple／--green は HTML上でそのまま使用し、色だけを#sec-1／#sec-2の親スコープで上書きする。「選ばれない理由」に緑（var(--positive)）は使用しない。 ============================================================= */ .page-about #sec-1 .ph-ttl--purple { color: var(--color-brown-deep); } .page-about #sec-1 .ph-reason--purple h4 { color: var(--color-brown-deep); } .page-about #sec-1 .ph-reason--purple::before { content: "\f00c"; background: var(--color-brown-deep); font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 19px; line-height: 1; } .page-about #sec-2 .ph-ttl--green { color: var(--color-brand-deep); } .page-about #sec-2 .ph-reason--green h4 { color: var(--color-brand-deep); } .page-about #sec-2 .ph-reason--green::before { content: "\f00d"; background: var(--color-brand-deep); font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 19px; line-height: 1; } /* ============================================================= 6b. 理由カードの円をカード全体の上下中央へ（r03） ------------------------------------------------------------- 従来はCSS Grid内で円（::before）が1行目に固定され align-items:startのため、本文が長いカードほど円が上寄りに見えていた。aboutページ限定で円をグリッドから外し、カード全体に対して絶対配置する。円の大きさ（42px）・記号サイズ（19px）・見出しと本文の縦関係・カードの高さは変更しない。 PC・モバイル両方に適用する（#sec-1/#sec-2のどちらの .ph-reasonにも共通）。 r04追記：position:absoluteへ変更しても、共通site-global.css の .ph-reason::before { grid-column:1; grid-row:1; } が解除されずに残っていたため、円の位置基準がカード全体ではなく「padding-left後のグリッド領域」のままになり、 padding-left（78px/68px）とleft（20px/16px）が重なって円が見出し・本文の下へ大きく右へずれていた。 grid-column:auto; grid-row:auto; を明示して解除し、円の位置基準をカード全体（.ph-reasonのposition:relative）へ戻した。上下中央配置（top:50%; transform:translateY(-50%)）は変更していない。 ============================================================= */ .page-about .ph-reason { position: relative; grid-template-columns: 1fr; column-gap: 0; padding-left: 78px; } .page-about .ph-reason::before { position: absolute; grid-column: auto; grid-row: auto; left: 20px; top: 50%; transform: translateY(-50%); } .page-about .ph-reason h4, .page-about .ph-reason p, .page-about .ph-reason .ph-note { grid-column: 1; } @media (max-width: 640px) { .page-about .ph-reason { padding-left: 68px; } .page-about .ph-reason::before { left: 16px; } } /* ============================================================= 7. 館内マップ「エリア」ラベルの配色（r02） ============================================================= */ .page-about .ph-floor-pill { background: var(--color-panel); color: var(--color-brand-deep); border: 1px solid var(--color-border); box-shadow: none; } /* ============================================================= 8. 館内マップのモバイルホットスポット（r02、r03で影を再調整） ------------------------------------------------------------- r02では.ph-hotspotのmin-width/min-height:44px・box-shadowが「施設名ラベルより大きな白い楕円」に見えていた問題を解消するため、box-shadowを完全に消していた。その結果、PCにあるような「押せる領域」の輪郭が分かりにくくなったため、r03では min-width/min-height:0・background:transparentは維持しつつ、縮小された地図の小さな当たり領域に合う、控えめな影を復活させる。角丸も8px→4pxへ縮小し、施設名の矩形に近づける。館内画像・ホットスポット座標（inline styleの%指定）は変更しない。 ============================================================= */ @media (max-width: 640px) { .page-about .ph-hotspot { min-width: 0; min-height: 0; background: transparent; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); } .page-about .ph-hotspot::before { content: ""; position: absolute; inset: -4px; } .page-about .ph-hotspot:hover, .page-about .ph-hotspot:focus-visible { background: rgba(162, 150, 199, .18); box-shadow: 0 4px 10px rgba(0, 0, 0, .24); outline: 1.5px solid rgba(116, 101, 153, .55); outline-offset: 1px; } } /* ============================================================= 9. モバイルの「上へ」ボタン非表示（r02） ------------------------------------------------------------- 共通CSS（.ph-backtotop）・app-core.jsは変更しない。 aboutページの640px以下でのみ非表示にする。実画面で施設カードへの重なりを確認済み。PC表示は変更しない。 ============================================================= */ @media (max-width: 640px) { .page-about .ph-backtotop, .page-about .ph-backtotop.is-visible { display: none; } }