@charset "UTF-8";
/**
 * characters.css — /characters（るーるぅの日常）
 *
 * 一次資料: 設計ツリー specs/pageviews/28040920-eb9b-4511-9cd8-cd0983c82662.json
 * 値はすべて設計ツリーの style から逐語。丸めや「だいたい同じ」で置き換えない。
 *
 * ブレークポイント（specs/index.json の breakPoints 実測・全ページ共通）:
 *   small  ~1140px / tablet ~840px / mobile ~540px / mini ~320px
 *   ベース幅 1280px
 */

/* ============================================================
 * 1. ページ土台
 * ============================================================ */

.ch-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* 設計ツリー: Section width:1080px / padding:30px 0px / align-items:center */
.ch-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 1080px;
	max-width: 100%;
	padding: 30px 0;
}

/* ============================================================
 * 2. ヒーロー
 *    設計ツリー: Section margin:80px 0 0 0 / padding:0 / width:100%
 *      └ Box position:absolute / width:100% / height:100% に h1 を中央寄せ
 * ============================================================ */

.ch-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 80px 0 0;
	padding: 0;
}

.ch-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

.ch-hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* 設計ツリー: color #14314a / 24px / 700 / line-height 1.4 */
.ch-hero__title {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* ============================================================
 * 3. リード
 *    設計ツリー: Section gap:20px
 * ============================================================ */

.ch-lead {
	gap: 20px;
}

/* 32px / 700 / line-height 1.8 / letter-spacing .1em（設計ツリー実値） */
.ch-lead__head {
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 16px / 500 / line-height 1.8（設計ツリー実値） */
.ch-lead__body {
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* ============================================================
 * 4. CHARACTER
 *    設計ツリー: Section justify-content:flex-start
 * ============================================================ */

.ch-chars {
	justify-content: flex-start;
}

/* 40px / 700 / line-height 1.8（設計ツリー実値） */
.ch-chars__en {
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 14px / 400 */
.ch-chars__ja {
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 14px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/*
 * 14px / 500 / line-height 1.8
 * margin-top:30px は現行サイトの実測値（computed margin-top:30px）。
 * 設計ツリーの style からは拾い漏れていたため、実サイトで測って補った。
 */
.ch-chars__sub {
	margin: 30px 0 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 14px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 設計ツリー: Box margin:30px 0 0 0 / width:100% */
.ch-chars__wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 30px 0 0;
}

/* 設計ツリー: List flex-direction:row / gap:20px / padding:10px */
.ch-chars__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	margin: 0;
	padding: 10px;
	list-style: none;
}

/* ------------------------------------------------------------
 * カード
 *   設計ツリー: height:259.36px / border-radius:23px
 *   枠線は上下左右とも 5px solid #e6e7e9
 *   地色はキャラごと（--ch-card-bg）
 * ---------------------------------------------------------- */

/*
 * ★ 幅について
 *   設計ツリーの base は flex:none で幅指定が無いが、それをそのまま当てると
 *   中身なりの幅（実測 706〜720px）になり現行サイトと合わない。
 *   現行サイトの実測は 1枚 520px＝コンテナ1080px − padding 10px×2 − gap 20px を2等分した値。
 *   つまり実際には等幅に伸びている。flex:1 1 0 で同じ 520px を再現する。
 *   （min-width:0 が無いと中の長いテキストで潰れなくなるので併記する）
 */
.ch-card {
	display: flex;
	flex: 1 1 0;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 10px;
	min-width: 0;
	height: 259.36px;
	/* 設計ツリー実値。box-sizing:border-box なので height に含まれる */
	padding: 10px;
	background: var(--ch-card-bg);
	border: 5px solid #e6e7e9;
	border-radius: 23px;
}

/*
 * 設計ツリー: Image width:50% / height:auto
 * ★ 幅は calc(50% - 5px)。カードの gap:10px を画像と本文で折半する。
 *   置換要素の img は min-width:auto で縮まないため、50%＋50%＋gap10px だと本文側だけが
 *   10px 縮み（実測 画像245/本文235）、本文が4行に折れて「す！」「証。」の2文字が最終行に落ちていた。
 *   現行サイトの実測は 240/240 で本文3行。2026-09-14
 */
.ch-card__cover {
	display: block;
	width: calc(50% - 5px);
	height: auto;
}

/* 設計ツリー: Box width:50% / gap:8px / align-items:flex-start。幅は上記と同じ理由で calc(50% - 5px)（現行実測 240px） */
.ch-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 8px;
	width: calc(50% - 5px);
	height: auto;
}

/*
 * 肩書きバッジ。設計ツリー: border-radius:16.5px / padding:5px 10px / width:auto
 * 枠線は設計ツリー borderTop/Right/Bottom/Left 1px solid #000000（現行実測 1px solid rgb(0,0,0)・高さ 31.6px）。
 * 移行時に落ちていたので補った。2026-09-14
 */
.ch-card__badge {
	display: flex;
	flex-direction: column;
	width: auto;
	height: auto;
	padding: 5px 10px;
	background: var(--ch-badge-bg);
	border: 1px solid #000000;
	border-radius: 16.5px;
}

/* 14px / 700 */
.ch-card__title {
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/*
 * 設計ツリー: <group> flex-direction:row / gap:10px / padding:0 / align-items:flex-end
 * ★ align-items は flex-end（設計ツリー実値・現行 computed も flex-end）。
 *   旧 baseline は根拠の無い独自値で、ローマ字名「LU-LU」「Tsumuri」の位置が現行より
 *   1440px で 2px、375/430px（名前 48px 時）で 6px 上にずれていた（現行 y=1155 / 旧 1148.9）。2026-09-14
 */
.ch-card__names {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 10px;
	padding: 0;
}

/* 36px / 500 */
.ch-card__name {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 36px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
}

/* 18px / 500 / line-height 1.7 */
.ch-card__roman {
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 18px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.7;
}

/*
 * 設計ツリー: Box height:0 / width:80% / background #EEEEEE / border-bottom 2px dashed #13436c
 * 名前と本文のあいだの紺色の破線。当初「余白調整用の空ボックス」と誤読して線を落としていた。
 * 現行実測: height 2px（border 分）/ border-bottom 2px dashed rgb(19,67,108) / 幅は本文の 80%。2026-09-14
 */
.ch-card__rule {
	display: block;
	width: 80%;
	height: 0;
	background: #eeeeee;
	border-bottom: 2px dashed #13436c;
}

/* 14px / 400 */
.ch-card__lead {
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 14px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
}

/* 設計ツリー: <group> flex-direction:row / gap:0px 15px。折り返す想定なので wrap を足す */
.ch-card__tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 15px;
	padding: 0;
}

/* 13px / 400 / 文字色はキャラごと
   ★2026-09-15 コントラスト調整（CEO決定「直してOK」）
     タグ文字色は page-characters.php が style="--ch-tag-color:…" で1体ごとに流し込む。
     実測原値はカード地色に対して基準（13px＝要 4.5）を下回っていた:
       るーるぅ  #1f9ec1 / 地 #f0fcff = 2.99   つむり #c1951f / 地 #fffbf0 = 2.68
     色相そのままに黒方向へ混ぜた固定値を、インラインstyleの値そのものを
     セレクタにして当てる（PHP のデータは触らない。color-mix と :nth-child を
     使わない理由は front.css の同じ注記に書いてある）:
       るーるぅ #1f9ec1 → 22%暗 #187b97（2.99 → 4.65）
       つむり   #c1951f → 26%暗 #8f6e17（2.68 → 4.60） */
.ch-card { --ch-tag-d: var(--ch-tag-color); }
.ch-card[style*="--ch-tag-color:#1f9ec1"] { --ch-tag-d: #187b97; }
.ch-card[style*="--ch-tag-color:#c1951f"] { --ch-tag-d: #8f6e17; }

.ch-card__tag {
	color: var(--ch-tag-d);
	font-family: var(--s-font-f88553ee);
	font-size: 13px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
}

/* ============================================================
 * 5. 帯画像
 *    設計ツリー: Section height:720px / padding:0 / Image border-radius:8px
 * ============================================================ */

.ch-banner {
	justify-content: center;
	height: 720px;
	padding: 0;
}

.ch-banner__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ============================================================
 * 6. ホームに戻る
 *    設計ツリー: Box 300x80 / border-radius:128px / border 2px solid #13436c
 *                background #EEEEEE / :hover { scale:1.05 }
 * ============================================================ */

.ch-back__btn {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 300px;
	height: 80px;
	color: #13436c;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-decoration: none;
	background: #eeeeee;
	border: 2px solid #13436c;
	border-radius: 128px;
	transition: scale 0.2s ease;
}

.ch-back__btn:hover,
.ch-back__btn:focus-visible {
	scale: 1.05 1.05;
}

/* prefers-reduced-motion を尊重する（原文には無いがアクセシビリティ上必要） */
@media (prefers-reduced-motion: reduce) {

	.ch-back__btn {
		transition: none;
	}

	.ch-back__btn:hover,
	.ch-back__btn:focus-visible {
		scale: 1 1;
	}
}

/* ============================================================
 * 7. レスポンシブ
 *    カードの上書きは設計ツリー実測:
 *      @small  { height: 299.15px }            List { width: 920px }  本文 Box { gap: 5px; width: 55% }  肩書き 12px
 *      @tablet { height: auto; width: 100% }   List { flex-direction: column; padding: 20px }  帯 Section { padding: 0 50px }
 *      @mobile { flex-direction: column; padding: 20px; width: 100% }  Image 70%  名前 48px  本文 16px  帯 Section { padding: 0 20px }
 * ============================================================ */

@media (max-width: 1140px) {

	/*
	 * .ch-section の上書きは無し（ベースの width:1080px / max-width:100% / padding:30px 0 のまま）。
	 * 設計ツリーの Section にはブレークポイント上書きが無く、現行実測も 1081〜1140px では 1080px、
	 * それ以下ではビューポート幅いっぱい（375→375px / 768→768px / 900→900px）。
	 * 旧 { width:100%; padding:30px 24px } は根拠が無く、1140px で帯画像が現行より 60px 広くなり、
	 * カード幅が現行より 28px 狭くなっていた（375: 307 vs 335 / 768: 700 vs 728）。2026-09-14 削除
	 */

	/*
	 * 設計ツリー @small: List flex:none / width:920px（現行実測 920px。900px 幅では max-width で 900px）。
	 * align-items:stretch は min-height 化に伴う保険（2枚の高さを揃える。中身が収まる限り見た目は center と同じ）
	 */
	.ch-chars__list {
		flex: none;
		width: 920px;
		max-width: 100%;
		align-items: stretch;
	}

	/*
	 * 設計ツリー @small: height:299.15px。固定高だと 841〜1140px で中身（バッジ2行・名前の語中改行）が
	 * 上下にはみ出していた（900px 実測 overTop/Bottom 37px）ので min-height にして中身で伸ばす。2026-09-14
	 */
	.ch-card {
		height: auto;
		min-height: 299.15px;
	}

	/*
	 * 設計ツリー @small: 本文 Box gap:5px / width:55%。
	 * 画像 50%＋本文 55%＋gap 10px は合計 115% で、現行サイトでは画像がカード枠の左に突き抜けている
	 * （768px 実測 img x=17 < card x=20 / 1000px で 10.5px）。gap を折半して 45%/55% に収め、
	 * 本文幅だけ現行と同じにする（1000px: 220.5 vs 現行 221 → 折り返し位置が一致）。2026-09-14
	 */
	.ch-card__cover {
		width: calc(45% - 5px);
	}

	.ch-card__body {
		gap: 5px;
		width: calc(55% - 5px);
	}

	/* 設計ツリー @small: 肩書き Text fontSize:12px（現行実測 12px・バッジ1行 28.8px） */
	.ch-card__title {
		font-size: 12px;
	}

	/*
	 * 名前「るーるぅ」「LU-LU」が語中で折れないようにする（900px 実測で「るーる／ぅ」「LU-／LU」になっていた）。
	 * 幅が足りない時は LU-LU が次の行へ送られる。2026-09-14
	 */
	.ch-card__names {
		flex-wrap: wrap;
	}

	.ch-card__name,
	.ch-card__roman {
		white-space: nowrap;
	}
}

@media (max-width: 840px) {

	/* 設計ツリー @tablet: List flex-direction:column / padding:20px（現行実測 20px・カード幅 728px@768） */
	.ch-chars__list {
		flex-direction: column;
		padding: 20px;
	}

	/*
	 * 設計ツリー @tablet: flex:none / height:auto / width:100%。@small の min-height は解除する。
	 * ★ flex:none は必須。ベースの flex:1 1 0 は列方向では「高さの基準 0」になり、
	 *   min-height:0 と組み合わさるとカードが 30px（枠＋padding）に潰れる（768px 実測で再現）。2026-09-14
	 */
	.ch-card {
		flex: none;
		width: 100%;
		height: auto;
		min-height: 0;
	}

	/* 設計ツリー @tablet: Section height:auto / padding:0px 50px（現行実測 768px: padding 0 50px・画像 668px） */
	.ch-banner {
		height: auto;
		padding: 0 50px;
	}
}

@media (max-width: 540px) {

	/*
	 * .ch-hero の margin-top はベースの 80px のまま（設計ツリー margin:80px 0 0 に @mobile 上書き無し／現行実測 y=80）。
	 * 旧 64px は独自値で、固定ヘッダー（80px）の下に帯の上 16px が潜っていた。2026-09-14 削除
	 */

	/* 設計ツリー @mobile: fontSize:20px（現行実測 20px・2行）。24px だと 375px で「う。」だけ3行目に落ちていた */
	.ch-lead__head {
		font-size: 20px;
	}

	/* 設計ツリー @mobile: fontSize:15px（現行実測 15px） */
	.ch-lead__body {
		font-size: 15px;
	}

	.ch-chars__en {
		font-size: 32px;
	}

	.ch-card {
		flex: none;
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
		padding: 20px;
	}

	/* 設計ツリー @mobile: Image width:70%（現行実測 199.5px@375）/ 本文 Box width:100% */
	.ch-card__cover {
		width: 70%;
	}

	.ch-card__body {
		width: 100%;
	}

	/* 設計ツリー @mobile: 名前 Text fontSize:48px（現行実測 48px）。旧 30px は独自値 */
	.ch-card__name {
		font-size: 48px;
	}

	/* 設計ツリー @mobile: 本文 Text fontSize:16px（現行実測 16px） */
	.ch-card__lead {
		font-size: 16px;
	}

	/* 設計ツリー @mobile: 帯 Section padding:0px 20px（現行実測 375px: 0 20px・画像 335px） */
	.ch-banner {
		padding: 0 20px;
	}

	.ch-back__btn {
		width: 100%;
		max-width: 300px;
	}
}