/* ========================================================================== /service/「ジネコのサービス」専用スタイル -------------------------------------------------------------------------- aio-about.css と同じ設計方針: - 全ルールを .aio-service 配下にスコープ（テーマ / Bootstrap を壊さない） - グローバルリセットは持ち込まず、必要な打ち消しだけ局所的に当てる - ヘッダー / フッターは aio-common.css が担当するのでここには含めない カードは3階層: .svc-card.major 主要サービス（画像 + 説明 + CTA） .svc-card.minor 便利に使えるサービス（小カード・画像なし） .svc-chip ちょっとしたコンテンツ（タイトルのみのチップ） ========================================================================== */ .aio-service{ --pink:#F2849E; --pink-strong:#E8688A; --pink-light:#FEF6F8; --pink-mid:#FBDCE4; --pink-soft:#FCE9EE; --pink-dark:#C95876; /* pink-dark は淡い背景に置くと 3.84:1 で、通常サイズの文字には足りない。 小さめのピンク文字にはこちらを使う（4.69:1 で AA を満たす）。 */ --pink-text:#B84A66; --beige:#FDFAF8; --beige2:#F9F2EF; --text:#4A3338; --text-muted:#9C7D84; --text-light:#C4A8AF; --border:#F5DEE4; --white:#FFFFFF; --line-green:#06C755; --font-serif:'Noto Serif JP',serif; --font-sans:'Noto Sans JP',sans-serif; --measure:900px; font-family:var(--font-sans); font-size:16px; line-height:1.95; color:var(--text); background:var(--beige); } /* 本文はセクションごとに wp:html ブロックへ分けて貼るため、.aio-service は ページ内に複数並ぶ。下余白は最後のブロック（.svc-close）だけが持つ。 */ /* ---- 全幅の帯をテーマの .container（約1110px）から突き抜けさせる ---- 本文はテーマの固定幅コンテナの中に置かれるので、そのままだと背景がコンテナ幅で 止まる。各 .aio-service ブロックの左右に「50% - 50vw」の負マージンを当てて ビューポート幅まで広げる。 50vw にはスクロールバー幅が含まれ数px右にはみ出すので、横方向だけ clip する。 clip を当てる場所が重要: - .aio-service 自身 → コンテナ幅で子を切り抜き、広げた帯が見えなくなる（NG） - body → ビューポートに伝播せず、8px 横に動かせてしまう（NG） - body 直下の .wrapper（テーマ最外側・全幅）→ ここで切ると横スクロール不可（OK） clip はスクロール領域を作らないので、.wrapper 内のヘッダー sticky も壊れない。 body のクラスは page-id-96332（固定ページID。スラッグが変わっても不変）を主に、 page_service-new / page_service も併記する。切替時にスラッグが service-2 になり 全ルールが外れた事故があったため、ID でのスコープを必ず残すこと。 */ body.page-id-96332 > .wrapper, body.page_service-new > .wrapper, body.page_service > .wrapper{overflow-x:clip} /* 広げるのは帯ではなく .aio-service ブロック自体。帯だけ広げると、ベージュ地の セクション（01/03/04/05）がコンテナ幅で止まり、広い画面で両脇が白く残る。 ブロックを広げれば、中の .svc-sec / .toc-inner / .inner は max-width + margin:auto で 中央に収まり、背景（ベージュ・ピンク帯・背景画像）だけが端まで伸びる。 */ .aio-service{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} /* テーマが本文の上に出すページタイトル（h1.ttl_h1）とパンくず（.mainarea 直下の クラスなし