/*
 * 会員プロフィールと活動実績のページ（/introduce/data/）の色と書体の上書き。
 *
 * 写し元: legacy/www.p-a.jp/public/introduce/data/index.html の 2 つ目の
 * `<style>` ブロック（本文の直前に書かれている 1,288 バイト）。
 *
 * このページの CSS 本体（data-style.css）は青緑（#009BD3 系）で組まれており、
 * 実際の画面の赤（#F54851 系）は、この `<style>` が後から塗り替えて出していた。
 * 投入のサニタイズは `<style>` を中身ごと落とすため（許可リストの
 * drop_with_content）、dev では青緑のまま出てしまう。**移行元の見た目は赤である。**
 *
 * 書体も同じ `<style>` が決めていた。data-style.css は "IBM Plex Sans" を
 * 当てるが、この上書きが先頭を "Inter" に差し替える。@font-face の宣言は
 * テーマの main.css がすでに持っている（Bug #1338 で同梱済み）ので、ここでは
 * 書体名を指定するだけでよい。
 *
 * 読み込む順番は data-style.css の後である（後から塗り替える関係を保つ）。
 * すべてのセレクタは本文の中（.page-content .page-content__body）へ閉じ込めてある。
 */

/* --- 書体（写し元の html > body に相当） --- */

.page-content .page-content__body {
	font-family: Inter, YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
}

/* --- 会員プロフィールの節（写し元の -turq を赤へ塗り替える） --- */

.page-content .page-content__body #profile .secHead__title {
	color: #f54851;
}

.page-content .page-content__body .-turq .secBox {
	background: #fff6ec;
}

.page-content .page-content__body .-turq .secBox::before {
	background: #fff6ec;
}

.page-content .page-content__body .s1c1__mark {
	background: #f54851;
}

.page-content .page-content__body .numberStyle__fill.-turq {
	color: #f54851;
}

.page-content .page-content__body .numberStyle__stroke.-turq {
	-webkit-text-stroke: 1px #f54851;
}

/* --- 活動実績の節（写し元の -pink） --- */

.page-content .page-content__body .s1c2__graph.-pink {
	background: #f54851;
}

.page-content .page-content__body .-pink .secBox {
	background: #f54851;
}

.page-content .page-content__body .-pink .secBox::before {
	background: #f54851;
}

.page-content .page-content__body .s2c1__head__year {
	color: #f54851;
}

.page-content .page-content__body .numberStyle__stroke.-pink {
	-webkit-text-stroke: 1px #f54851;
}

.page-content .page-content__body .numberStyle__fill.-pink {
	color: #f54851;
}

.page-content .page-content__body .sec3Foot__title__num {
	color: #f54851;
}

.page-content .page-content__body .sec3Foot__circle {
	color: #f54851;
}

/* --- 内訳の棒グラフ（1 つめが男性の青・2 つめが女性の赤） --- */

.page-content .page-content__body .barChart__container:nth-child(1) .barChart__percent {
	color: #009bd3;
}

.page-content .page-content__body .barChart__container:nth-child(2) .barChart__percent {
	color: #f54851;
}

@media screen and (min-width: 750px) {
	.page-content .page-content__body .s1c2__graph.-blue {
		background: #009bd3;
	}
}

/* --- 冒頭の 2 つの押しボタン（携帯幅だけに出る）---
 *
 * 🚨 **この 2 本の写し元は携帯版の `<style>` である。**このファイルの他の指定は
 * パソコン版（`legacy/www.p-a.jp/public/introduce/data/index.html`）の `<style>`
 * を写しているが、そちらには押しボタンの色が無い。携帯版
 * （同 `public/sp/introduce/data/index.html` の 113〜118 行・記録版 19f499fe）だけが
 *
 *   .hero__btn.-pink { background: #F54851 }
 *   .hero__btn.-turq { background: #009BD3 }
 *
 * を持つ。そのため写しから漏れ、`data-style.css` の素の値（青緑 #58D2D6 と
 * 桃色 #FD7B7D）が携帯幅の画面にそのまま出ていた（ユーザー目視 2026-09-03）。
 *
 * 実測（移行元 = 本番 https://www.p-a.jp/introduce/data/ を 2026-09-03 23:42 JST
 * に携帯の名乗りで取得。転送先 `/sp/introduce/data/` を幅 375px で測った値）:
 *
 *   会員プロフィール … 移行元 rgb(0, 155, 211) / 直す前の dev rgb(88, 210, 214)
 *   活動実績       … 移行元 rgb(245, 72, 81) / 直す前の dev rgb(253, 123, 125)
 *
 * この押しボタンは `data-style.css` が 750px 以上で `display: none` にするので、
 * パソコン幅には出ない（幅で分ける必要は無い）.
 */

.page-content .page-content__body .hero__btn.-turq {
	background: #009bd3;
}

.page-content .page-content__body .hero__btn.-pink {
	background: #f54851;
}

/* --- 男女の丸い囲み（携帯幅）---
 *
 * 🚨 **押しボタンと同じ「写し元がパソコン版」の漏れ**（ユーザー目視 2026-09-04
 * 「男性・女性のカラーコードが違う」）。移行元は携帯版とパソコン版で、この囲みの
 * 色を **塗る場所ごと** 変えている（記録版 19f499fe）。
 *
 *   携帯版 `public/sp/introduce/data/index.html` の 76〜85 行
 *     @media (max-width: 749px) {
 *       .s1c2__graph.-pink::before { background: #F54851 }
 *       .s1c2__graph.-blue::before { background: #009BD3 }
 *     }
 *     （本体は塗らない）
 *
 *   パソコン版 `public/introduce/data/index.html` の 39〜41 行と 69〜73 行
 *     .s1c2__graph.-pink { background: #F54851 }              ← 全幅・本体を塗る
 *     @media (min-width: 750px) { .s1c2__graph.-blue { background: #009BD3 } }
 *
 * このファイルはパソコン版から写したので、**携帯用の 2 本が無い**。その結果、
 * 携帯幅では素の `data-style.css` の明るい色（青 #56B4E8 系・桃色 #FD7B7D）が
 * 板に出て、さらにパソコン版由来の濃い赤が板の外へはみ出していた。
 *
 * 幅 375px の実測（移行元 = 本番 https://www.p-a.jp/introduce/data/ を
 * 2026-09-04 01:2x JST に携帯の名乗りで取得。転送先の `/sp/introduce/data/`）:
 *
 *   | 測るもの                  | 移行元            | 直す前の dev       |
 *   | -blue の ::before の背景  | rgb(0, 155, 211)  | rgb(86, 180, 232)  |
 *   | -pink の ::before の背景  | rgb(245, 72, 81)  | rgb(253, 123, 125) |
 *   | -pink の本体の背景        | 透明              | rgb(245, 72, 81)   |
 *
 * 🚨 **人物の絵を囲む輪は、この囲みとは別物である。**輪は絵の中に描かれている
 * （`img.s1c2__graph__avatar` が指す SVG）。両側で同じ絵を使っており、寸法
 * 61 × 61px と 12 項目の色はすべて一致している。ここで直すのは板の色だけである.
 */

@media screen and (max-width: 749px) {
	.page-content .page-content__body .s1c2__graph.-pink {
		background: transparent;
	}

	.page-content .page-content__body .s1c2__graph.-pink::before {
		background: #f54851;
	}

	.page-content .page-content__body .s1c2__graph.-blue::before {
		background: #009bd3;
	}
}