/* 見た目の変更は全部ここに書く。
 *
 * **写した CSS（assets/mirror/ の中）は書き換えない。**
 * 書き換えると、元と何が違うのかが分からなくなる。ここだけ読めば差分が分かる形にする。
 * このファイルは functions.php で写した CSS の後に読ませている（後から読まれた方が勝つ）。
 *
 * 色は tools/check-contrast.py で測ってから決めている。**感覚で決めない。**
 * 値を変えたら、あちらの定数も変えて測り直すこと（2か所に数字があるので必ずずれる）。
 */

:root {
	/* 明るい側で使う強調色。白の上で 6.50:1 */
	--accent: #046b53;
	--accent-hover: #02533f;
	/* 暗い側で使う強調色。黒の上で 10.92:1
	 * **1色では足りなかった。** 濃い緑は黒の上では 3.23 しか無い。 */
	--accent-on-dark: #34d399;
}

/* --- 黒く塗られていた区画を強調色にする -------------------------------
 *
 * 写した CSS は色をほぼ全部変数で書いている（変数参照 1167 件、直接書かれた色は 11 件だけ）。
 * そのうち黒を指しているのが var(--black) の 80 件。
 * なので**区画の中だけ --black の意味を差し替える**。
 * 個々の背景色を1つずつ上書きするより取り残しが出にくい。
 *
 * ⚠ 最初ここに「var(--black) の参照 1149 件」と書いていた。**数え方を間違えていた。**
 *    1149 は変数参照の全体を数えた数（しかも小文字だけ拾って 18 件落としていた）。
 *    判断は変わらないが、根拠の数字が違っていた。数える対象を言葉と合わせる。
 */
.services-contact,
.contact_area .black_bg,
.company-page .company-contact,
.poc-page .poc-contact,
.home-connection-panel--dark {
	--black: var(--accent);
	/* ⚠ 背景を緑にすると、**変えていない文字色の方が読めなくなる。**
	 *    薄い灰 #a3a3a3 は黒の上では 8.33 あるが、この緑の上では 2.57 しか無い。
	 *    #e5e5e5 にして 5.16 にした。 */
	--on-dark-muted: #e5e5e5;
	background: var(--accent);
}

/* --- ボタン ----------------------------------------------------------- */
.button,
.hs-button,
form input[type="submit"],
.boxedCta--filled,
.works-more {
	--black: var(--accent);
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.button:hover,
.hs-button:hover,
form input[type="submit"]:hover,
.boxedCta--filled:hover,
.works-more:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
	color: #fff;
}

/* 触ったときに黒く反転していた箇所 */
.hero__rail-link:hover,
.boxedCta:hover,
.works-featured-card > a:hover,
.company-page .company-careers > a:hover,
a.home-link:hover,
.works-checkboxes input:checked + span,
.works-areas > span {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* --- 後から読ませても、詳細度が高い方が勝つ --------------------------
 *
 * 上の `a.home-link:hover`（詳細度 0,2,1）は、写した CSS の
 * `.home-connection-panel--dark a.home-link:hover`（詳細度 0,3,1）に**負ける**。
 * 「後から上書きする」は順番だけの話ではない。**同じ強さまで上げる必要がある。**
 *
 * 負けていたのは強調色の区画の中にある2件。外にある4件は上の規則で効いていた
 * （数えたので範囲が言える）。
 *
 * 区画の中は「白地に強調色の文字」で反転させる。地が強調色なので、そのまま
 * 強調色の背景にすると反転にならない。白の上の強調色は 6.50:1 で読める。
 */
.home-connection-panel--dark a.home-link:hover,
.company-page .company-contact > a:hover,
.poc-page .poc-contact-link:hover,
.services-contact .services-contact-copy > a:hover {
	background: #fff;
	border-color: #fff;
	color: var(--accent);
}

/* --- 直接書かれた半透明の黒（変数を通っていない） ----------------------
 *
 * **緑にしたのに緑が出ないページがあった。** /services/ である。
 * 原因は区画の上に乗っている「膜」で、変数ではなく直接書かれている。
 *
 *   .services-contact:after   background: rgba(0,0,0,.56)
 *   .contact_bg:after         background: rgba(0,0,0,.45)
 *
 * 直接書かれた色は 11 件あると**数えてあった**。それでも追い切れていなかった。
 * 「数えた」と「全部見た」は別。数えた表を1件ずつ潰すところまでやる必要がある。
 *
 * 膜は写真の上に白文字を載せるためにある。**消さずに色だけ変える。**
 * 消すと文字が読めなくなる（明るさの差が要るのは膜のおかげ）。
 */
.services-contact:after {
	background: rgba(2, 58, 45, .62);
}

.contact_bg:after {
	background: rgba(2, 58, 45, .52);
}

/* --- 黒のまま残す区画（フッタなど）の中の強調 --------------------------
 *
 * ここは背景が黒のままなので、濃い緑は使えない（黒の上で 3.23:1）。
 * 暗い側用の薄い緑を使う（10.92:1）。**同じ「強調色」で通そうとすると読めなくなる。**
 */
footer a:hover,
.services-item--dark a:hover,
.company-page .company-hero a:hover,
.privacy-page .privacy-hero a:hover {
	color: var(--accent-on-dark);
}

/* --- 色の変数では変わらなかったもの -----------------------------------
 *
 * **ここが本題。** 変数をいくら差し替えても、色以外の指定は変わらない。
 * 写した CSS には filter が3箇所ある（数えた）。
 *
 *   .contact_bg                        filter: grayscale(1)
 *   .company-page .company-hero-mark   filter: invert(1)
 *   .privacy-page .privacy-hero__mark  filter: invert(1)
 *
 * 1. トップの問い合わせ欄の写真は白黒のまま残る。周りを緑にしたので浮く。→ 直す
 * 2, 3. 会社概要とプライバシーの図は、黒背景に載せるために白黒反転させている。
 *       背景は黒のままなので**反転は今も正しい**。→ 数えた上で、触らないと決めた。
 *
 * 「3箇所あることを数えて、そのうち1つを直し、2つは残すと決めた」のが記録。
 * 気づかずに残ったのではない。
 */
.contact_bg {
	filter: none;
}

/* --- お問い合わせのフォーム --------------------------------------------
 * 写した静的コピーにフォームは無かったので、こちらで作った分の見た目。
 */
.shiftone-inquiry {
	display: grid;
	gap: var(--s24, 24px);
	max-width: 640px;
}

.shiftone-inquiry label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.shiftone-inquiry input[type="text"],
.shiftone-inquiry input[type="email"],
.shiftone-inquiry textarea {
	background: #fff;
	border: 1px solid var(--line, #b8b8b8);
	border-radius: 0;
	color: #000;
	font: inherit;
	padding: 12px 14px;
	width: 100%;
}

.shiftone-inquiry input:focus,
.shiftone-inquiry textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.shiftone-inquiry input[type="submit"] {
	cursor: pointer;
	padding: 16px 40px;
	width: auto;
}

/* 見えない項目。**人には見せず、読み上げにも出さず、機械には見せる。**
 * display:none にすると埋めない機械がいるので、画面の外に出す。 */
.shiftone-inquiry__trap {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}