/* ============================================================
   方針ページ（templates/page-policy.html）専用スタイル
   CSR行動規範／情報セキュリティ方針／サステナビリティ方針／個人情報保護方針の
   4ページが、この1つのテンプレートを共有する想定（タイトル・丸飾り・区切り線・
   ISMSバッジはテンプレート側の固定コンテンツ、本文は各ページの固定ページ
   編集画面で編集する<!-- wp:post-content -->）。
   PC値はすべて1920px基準からclamp(V*0.4px, (V/19.2)vw, Vpx)で
   768px〜1920pxの間をスケールさせる、front-page.css/main.cssと同じ規約。
   英語のフェード文字とタイトルの重なりは、デザイン上ではtext-box-trimで
   文字ぴったりの箱に軽く重なっているだけだが、404ページで痛い目を見た
   （通常のline-heightでは重なりが再現できず要素同士が衝突する）ため、
   ここでは重ねず、小さな余白を挟むだけに簡略化している。
   ============================================================ */

.ss-policy {
	position: relative;
	background: #fff;
}

.ss-policy.wp-block-group > * {
	margin-block-start: 0;
}

.ss-policy__container {
	max-width: 954px;
	margin: 0 auto;
	padding: 0 var(--ss-gap);
	box-sizing: border-box;
}

/* ============ タイトル ============ */
.ss-policy__intro {
	position: relative;
	padding: 16px 0 16px;
}

/* 横線の右端を丸の左端の直前で必ず止めるための共有変数。丸の位置/サイズ
   (円と横線でCSS変数を共有)が変わっても、この2つの値さえ揃っていれば
   横線側のcalc()が自動的に追従する。以前は丸をright:Xvwで置き、横線は
   .ss-policy__container(max-width:954pxで頭打ち)基準のmax-widthで独立に
   指定していたため、コンテナが頭打ちになった後(あるいはウィンドウが
   狭まって横線側のvwだけ縮んだ後)は、丸と横線がまったく別の計算式で
   動いてしまい、ウィンドウ幅によって両者の間隔がズレていた。 */
@media (min-width: 768px) {
	.ss-policy__intro {
		--ss-policy-circle-right: clamp(111.6px, 14.53vw, 279px);
		--ss-policy-circle-width: clamp(104.4px, 13.59vw, 261px);
		--ss-policy-line-left-ext: clamp(31.6px, 4.11vw, 79px);
	}
}

/* 丸飾りはページごとの英語サブタイトルの長さに関係なく、
   ページ内絶対位置(右端からの距離)に固定する。以前は文字の右端基準で
   位置合わせしていたが、方針ページごとに英語サブタイトルの長さが違う
   （"Information security policy" と "Privacy policy" など）ため、
   文字基準にすると丸の位置がページごとにバラついてしまっていた。 */
.ss-policy__intro-en-wrap {
	display: inline-block;
	font-size: 24px;
}

.ss-policy__intro-circle {
	display: none;
}

.ss-policy__intro-en {
	/* 丸飾りは要素の重なり順として後から描画される絶対配置要素なので、
	   何も指定しないと常に上に乗ってしまう。文字側もposition:relativeで
	   独立したスタッキングコンテキストに乗せ、z-indexで文字を上にする。 */
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 1em;
	color: #dcdcdc;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
}

.ss-policy__intro-title.wp-block-post-title {
	position: relative;
	z-index: 1;
	margin: 8px 0 0;
	color: #000;
	font-weight: 700;
	letter-spacing: 0.25em;
}

.ss-policy__intro-line {
	display: block;
	margin-top: 16px;
	height: 1px;
	max-width: 600px;
	background: #ff0204;
}

/* ============ 本文 ============ */
.ss-policy__body {
	padding: 11px 0 40px;
}

.ss-policy__body .wp-block-post-content > * {
	margin-block-start: 0;
}

.ss-policy__body h2 {
	margin: 0;
	color: #ff0204;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.2em;
}

.ss-policy__body h2 + * {
	margin-top: 24px;
}

.ss-policy__body p,
.ss-policy__body ol {
	margin: 0;
	padding-left: 20px;
	color: #000;
	font-size: 14px;
}

.ss-policy__body a {
	color: #0b73ba;
	text-decoration: underline;
}

/* 個人情報保護方針のようにリード文(見出しの無い説明文)が最初に来る
   ページ向け。h2 ~ h2と同様、.wp-block-post-content > *のmargin-block-
   start:0リセット(96行目)より詳細度を上げる必要がある。 */
.ss-policy__body .wp-block-post-content p + h2 {
	margin-top: 16px;
}

/* CSR行動規範の「基本姿勢」のように、同じ見出しの下に段落が2つ連続する
   ケース向け。 */
.ss-policy__body .wp-block-post-content p + p {
	margin-top: 16px;
}

/* CSR行動規範の「行動指針」内にある「1. 事業活動における指針」等、
   赤い●見出しより1段小さい、太字の小見出し。 */
.ss-policy__body .ss-policy__sub-heading {
	font-weight: 700;
}

.ss-policy__body .wp-block-post-content .ss-policy__sub-heading + ul {
	margin-top: 8px;
	/* 「・」の項目は小見出し(「1. 事業活動における指針」等)よりもう一段
	   字下げする。 */
	padding-left: 64px;
}

/* 小見出し+リストのまとまりが連続する場合の、まとまり同士の間隔。 */
.ss-policy__body .wp-block-post-content ul + .ss-policy__sub-heading {
	margin-top: 24px;
}

/* リード文は見出しの下にぶら下がる本文ではなく、見出しと同格の文章なので、
   見出しと同じ左端に揃える(.ss-policy__body pの共通padding-leftを外す)。 */
.ss-policy__body .wp-block-post-content > p:first-child {
	padding-left: 0;
}

/* 「1.」「2.」等の番号を独自のカウンターに置き換え、番号とテキストを
   横並びのボックスにしている。list-style-position: insideだけだと、
   1行目は見出し・本文と同じ左端に揃えられるが、2行目以降の折り返しが
   番号の位置まで戻ってしまう(ぶら下げインデントにならない)。番号を
   固定幅の列にしてテキストを別の列に分けることで、折り返した行が
   常に「1.」の後ろの文字位置に揃うようにする。 */
.ss-policy__body ol {
	list-style: none;
	counter-reset: ss-policy-item;
}

.ss-policy__body ol li {
	display: flex;
	counter-increment: ss-policy-item;
}

.ss-policy__body ol li::before {
	content: counter(ss-policy-item) ".";
	flex: none;
	width: 1.5em;
}

.ss-policy__body ol li + li {
	margin-top: 4px;
}

/* サステナビリティ方針の「働きやすい環境の整備」のような箇条書き
   (・)。番号のol程折り返しの位置がシビアではない短い項目のみなので、
   ブラウザ標準のディスク記号のままにしている。 */
.ss-policy__body ul {
	padding-left: 40px;
	color: #000;
	font-size: 14px;
}

.ss-policy__body ul li + li {
	margin-top: 4px;
}

/* サステナビリティ方針の冒頭にある、見出しではない大きめのリード文
   (「持続可能な未来を築くために/私どものできること」)。 */
.ss-policy__body .ss-policy__lead {
	padding-left: 0;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1.6;
}

/* SDGsのアイコン列。背景に白→グレーの淡いグラデーションが
   敷かれている。 */
.ss-policy__body .ss-policy__sdg-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	margin-bottom: 32px;
	padding: 32px 0;
	background: linear-gradient(90deg, #fff 0%, #eee 66.346%, #eee 100%);
}

.ss-policy__body .ss-policy__sdg-icons img {
	display: block;
	width: 85px;
	height: 85px;
}

/* 「基本方針」等、章と章の間隔。h2見出しが章の先頭に来るたび、直前の
   要素との間に空ける。最初の章(1つ目のh2)には効かせない。
   セレクタに.wp-block-post-contentも含めて詳細度を上げているのは、
   同じ物理的なmargin-topの位置に対して、より詳細度の高い
   ".ss-policy__body .wp-block-post-content > *"側のmargin-block-start:0
   (96行目)が競合して勝ってしまい、ここのmargin-topが効いていなかったため。 */
.ss-policy__body .wp-block-post-content h2 ~ h2 {
	margin-top: 11px;
}

/* サステナビリティ方針のようにISMSバッジが無いページ用の、制定日の
   署名行。 */
.ss-policy__body .ss-policy__signature-plain {
	margin-top: 40px;
	padding-left: 0;
	text-align: right;
}

/* 制定日の署名行。ISMSバッジ(footer.htmlで使っているのと同じ画像)を
   ::beforeで差し込むことで、本文側(wp:post-content)には触れずに
   4ページ共通のテンプレート的な装飾として扱える。 */
.ss-policy__body .ss-policy__signature {
	display: flex;
	/* SPでは画像を小さくせず、文章の下に回す(横並びだと画像の分だけ
	   文章の折り返し幅が狭くなってしまうため)。PC側はメディアクエリで
	   横並びに戻す。 */
	flex-direction: column;
	align-items: flex-end;
	gap: 24px;
	margin-top: 40px;
	padding-left: 0;
	text-align: right;
}

.ss-policy__body .ss-policy__signature::before {
	/* DOM順としては::beforeが先(=テキストより上)に来るが、SPでは
	   テキストを先に見せたいので、order でテキストより後ろに回す。 */
	order: 2;
}

/* footer.htmlの.ss-footer__badgeと同じ画像・同じ横幅(234px)を使い、
   画像の下に「IS 803416 / ISO 27001」のキャプションを添える。画像と
   テキストの両方を1つの疑似要素で表現するため、::before自体をフレックス
   コンテナにして、contentのテキストを下端に寄せている。 */
.ss-policy__body .ss-policy__signature::before {
	content: "IS 803416 / ISO 27001";
	display: flex;
	flex: none;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	width: 234px;
	height: 120px;
	padding-top: 96px;
	background-image: url("../images/badge-bsi.jpg");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 234px 87.8px;
	color: var(--ss-badge-text);
	font-size: 15px;
	white-space: nowrap;
}

/* ============ SP (< 768px): SPフレーム実測のフラットpx ============ */
.ss-policy__intro-title.wp-block-post-title {
	font-size: 14px;
}

/* ============ PC (>= 768px): 1920px基準の可変clamp ============ */
@media (min-width: 768px) {
	.ss-policy__intro {
		padding: clamp(24px, 3.13vw, 60px) 0 clamp(6.4px, 0.83vw, 16px);
	}

	.ss-policy__intro-en-wrap {
		font-size: clamp(23.2px, 3.02vw, 58px);
	}

	.ss-policy__intro-circle {
		display: block;
		position: absolute;
		right: var(--ss-policy-circle-right);
		top: clamp(11.2px, 1.46vw, 28px);
		width: var(--ss-policy-circle-width);
		height: var(--ss-policy-circle-width);
		border-radius: 50%;
		border: 1px solid #ff0204;
		pointer-events: none;
	}

	.ss-policy__intro-en {
		white-space: nowrap;
	}

	.ss-policy__intro-title.wp-block-post-title {
		margin-top: clamp(7.2px, 0.94vw, 18px);
		font-size: clamp(9.6px, 1.25vw, 24px);
	}

	.ss-policy__intro-line {
		margin-top: clamp(8px, 1.04vw, 20px);
		margin-left: calc(-1 * var(--ss-policy-line-left-ext));
		/* 横線の右端が丸の左端の20px手前で必ず止まるよう、幅を
		   .ss-policy__containerの中央寄せ計算(min(954px,100vw)を中心に
		   置く)と丸の位置/サイズから逆算する。詳しい導出はこのファイル
		   冒頭の.ss-policy__intro内のCSS変数コメントを参照。 */
		width: calc(
			50vw + (min(954px, 100vw) / 2) - var(--ss-policy-circle-right) -
				var(--ss-policy-circle-width) - 20px - var(--ss-gap) +
				var(--ss-policy-line-left-ext)
		);
		max-width: none;
	}

	.ss-policy__body {
		padding-bottom: clamp(24px, 3.13vw, 60px);
	}

	.ss-policy__body h2 {
		font-size: clamp(14.4px, 1.88vw, 24px);
	}

	.ss-policy__body h2 + * {
		margin-top: clamp(26px, 3.39vw, 65px);
	}

	.ss-policy__body p,
	.ss-policy__body ol {
		padding-left: clamp(11.2px, 1.46vw, 28px);
		font-size: clamp(14.4px, 1.88vw, 18px);
	}

	.ss-policy__body ol li + li,
	.ss-policy__body ul li + li {
		margin-top: clamp(4px, 0.52vw, 10px);
	}

	.ss-policy__body ul {
		padding-left: clamp(16px, 2.08vw, 40px);
		font-size: clamp(14.4px, 1.88vw, 18px);
	}

	.ss-policy__body .ss-policy__lead {
		font-size: clamp(14.4px, 1.88vw, 36px);
	}

	.ss-policy__body .ss-policy__sdg-icons {
		gap: clamp(4px, 0.52vw, 10px);
		margin-top: clamp(9.6px, 1.25vw, 24px);
		margin-bottom: clamp(12.8px, 1.67vw, 32px);
		padding: clamp(12.8px, 1.67vw, 32px) 0;
	}

	.ss-policy__body .ss-policy__sdg-icons img {
		/* Fixed, not responsive: stays 100px regardless of PC width. */
		width: 100px;
		height: 100px;
	}

	.ss-policy__body .ss-policy__signature-plain {
		margin-top: clamp(40.8px, 5.31vw, 102px);
	}

	.ss-policy__body {
		padding-top: clamp(10.5px, 1.74vw, 33.5px);
	}

	/* p + h2とh2 ~ h2は詳細度が同じなので、後に書いた方が(該当する要素では)
	   優先される。以降の見出し(2つ目以降のh2)はp・h2の両方に一致するため、
	   章間の間隔(h2 ~ h2)を後に書いて、そちらを優先させている。 */
	.ss-policy__body .wp-block-post-content p + h2 {
		margin-top: clamp(16px, 2.08vw, 40px);
	}

	.ss-policy__body .wp-block-post-content h2 ~ h2 {
		margin-top: clamp(10.5px, 1.74vw, 33.5px);
	}

	.ss-policy__body .wp-block-post-content p + p {
		margin-top: clamp(6.4px, 0.83vw, 16px);
	}

	.ss-policy__body .wp-block-post-content .ss-policy__sub-heading + ul {
		margin-top: clamp(6.4px, 0.83vw, 16px);
		padding-left: clamp(25.6px, 3.33vw, 64px);
	}

	.ss-policy__body .wp-block-post-content ul + .ss-policy__sub-heading {
		margin-top: clamp(16px, 2.08vw, 40px);
	}

	.ss-policy__body .ss-policy__signature {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-top: clamp(40.8px, 5.31vw, 102px);
	}

	.ss-policy__body .ss-policy__signature::before {
		order: 0;
		/* Floors raised from the usual V*0.4 pattern (93.6px etc.) to
		   ~81% of the full size (190px etc.) instead -- the ISMS badge
		   stayed legible/recognizable at a much larger size than this
		   section's other V*0.4-floored text, so it shouldn't shrink as
		   aggressively while narrowing from 1920px down toward 768px. */
		width: clamp(190px, 12.19vw, 234px);
		height: clamp(98px, 6.25vw, 120px);
		padding-top: clamp(78px, 5vw, 96px);
		background-size: clamp(190px, 12.19vw, 234px) clamp(71px, 4.57vw, 87.8px);
		font-size: clamp(12px, 0.78vw, 15px);
	}
}