/*
 * パターン固有のスタイル
 *
 * 色・文字サイズ・余白は theme.json の変数を使う。ここでは直値を持たない。
 * 編集画面（add_editor_style）にも同じファイルを読ませている。
 */

/* ============================================================
   セクション見出し（英字ラベル ＋ 和文）
   ============================================================ */
/* constrained レイアウトは子要素を auto マージンで中央に寄せる。
   inline-block にすると auto マージンが効かず、ラベルだけ本文列から
   はみ出して背景の左端に貼り付くので、ブロックレベルのままにする。 */
.lnl-label {
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lnl-section-head {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--50);
}

.has-primary-background-color .lnl-section-head,
.has-primary-deep-background-color .lnl-section-head {
	border-bottom-color: rgba(255, 255, 255, 0.22);
}

/* ============================================================
   ページヘッダー（各下層ページの上部）
   ============================================================ */
.lnl-page-head {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* 回数・日程・費用だけを置く補助行。本文リードと区別できるよう
   前に短い罫線を引いて、数字の並びだと分かるようにする。 */
.lnl-page-head__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1.7;
}

.lnl-page-head__meta::before {
	content: "";
	width: 24px;
	height: 1px;
	background-color: var(--wp--preset--color--border-dark);
	flex: none;
}

/* ============================================================
   番号付きカード（Concept / Value）
   ============================================================ */
.lnl-numcard {
	position: relative;
	border: 1px solid var(--wp--preset--color--border);
	border-top: 3px solid var(--wp--preset--color--primary);
	height: 100%;
}

.lnl-numcard__num {
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* ============================================================
   プログラムカード
   ============================================================ */
.lnl-progcard {
	border: 1px solid var(--wp--preset--color--border);
	height: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lnl-progcard:hover {
	border-color: var(--wp--preset--color--border-dark);
	box-shadow: 0 2px 18px rgba(15, 32, 68, 0.07);
}

.lnl-progcard--main {
	border-top: 3px solid var(--wp--preset--color--accent);
}

.lnl-tag,
.lnl-news-cat a {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid currentColor;
	letter-spacing: 0.08em;
	line-height: 1.6;
}

/* ============================================================
   チェックリスト（こんな方に）
   ============================================================ */
.lnl-check {
	list-style: none;
	padding-left: 0;
}

.lnl-check li {
	position: relative;
	padding-left: 1.8em;
	margin-bottom: 0.7em;
}

.lnl-check li::before {
	content: "";
	position: absolute;
	left: 0.35em;
	top: 0.72em;
	width: 0.5em;
	height: 0.28em;
	border-left: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

/* ============================================================
   参加ステップ（番号フロー）
   ============================================================ */
.lnl-steps {
	list-style: none;
	padding-left: 0;
	counter-reset: lnl-step;
}

.lnl-steps li {
	position: relative;
	padding-left: 3em;
	margin-bottom: 1.1em;
	counter-increment: lnl-step;
}

.lnl-steps li::before {
	content: counter(lnl-step);
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}

/* ============================================================
   沿革（タイムライン）
   ============================================================ */
.lnl-timeline table,
.lnl-table table {
	width: 100%;
	border-collapse: collapse;
}

.lnl-timeline td,
.lnl-table td,
.lnl-table th {
	border: 1px solid var(--wp--preset--color--border);
	padding: 12px 16px;
	vertical-align: top;
}

.lnl-table th {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	text-align: left;
}

.lnl-timeline td:first-child,
.lnl-table td:first-child {
	white-space: nowrap;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	width: 1%;
}

.lnl-table--syllabus td:first-child {
	white-space: nowrap;
}

/* 横に広い表はコンテナ内でスクロールさせる（本文は横スクロールさせない） */
.lnl-table,
.lnl-timeline {
	overflow-x: auto;
}

/* min-width を効かせるのは3列以上の表だけ（lnl_table() が自動で付ける）。
   以前は .lnl-table 全部に 560px を当てていたが、2列の表（特商法・沿革・
   開講案内・プログラムカードの対象／形式）にも効いて、狭い画面や
   カードの中で意味のない横スクロールバーが出ていた。 */
.lnl-table--wide table {
	min-width: 560px;
}

/* メールアドレスなど途中で切れない英数字の連なりは、狭い画面でセルを
   押し広げてしまう。break-word ではなく anywhere にすること。break-word は
   表の min-content 幅の計算に効かず、セルが縮まらない。 */
.lnl-table td,
.lnl-table th {
	overflow-wrap: anywhere;
}

/* 狭い画面では項目名（1列目）の nowrap を解く。「代金の支払時期・方法」の
   ような長い項目名が 163px を要求し、2列の表でも横スクロールが出るため。 */
@media (max-width: 600px) {
	.lnl-table td:first-child {
		white-space: normal;
	}
}

/* ============================================================
   L2（先生が更新する箇所）
   ============================================================ */

/* .lnl-editable は編集画面での目印。公開ページには何も出さない。
   囲みとして見せたい箇所にだけ .lnl-box を足す。 */
.lnl-box {
	border: 1px solid var(--wp--preset--color--border-dark);
	border-left: 4px solid var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--base);
}

/* 編集画面では、更新してよい範囲が一目で分かるように枠を出す */
.editor-styles-wrapper .lnl-editable {
	outline: 2px dashed var(--wp--preset--color--accent);
	outline-offset: 6px;
}

/* 編集画面でだけ「ここは書き換えて構いません」を出す */
.lnl-editor-note {
	display: none;
}

.editor-styles-wrapper .lnl-editor-note,
.block-editor-block-list__layout .lnl-editor-note {
	display: block;
	border: 1px dashed var(--wp--preset--color--accent);
	background-color: #fff6f7;
	color: var(--wp--preset--color--accent);
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.6;
}

/* ============================================================
   参加者の声
   ============================================================ */
.lnl-voice {
	border-left: 3px solid var(--wp--preset--color--border-dark);
	height: 100%;
}

/* ============================================================
   お知らせ一覧
   ------------------------------------------------------------
   大学のお知らせと同じ形。1件＝1行で、日付・カテゴリー・見出しを
   横に並べる。見出しを大きな青字にすると記事一覧というより
   ブログに見えるので、本文と同じ大きさの黒字に留めている。

   並べ方はブロックのレイアウトではなく CSS グリッドが持つ。
   flex レイアウトだと列幅が中身任せになって、日付の右端が
   行ごとに揃わない。
   ============================================================ */
.lnl-news-item {
	display: grid;
	/* 列幅は固定。auto にすると1件ごとに別のグリッドになるため、
	   行をまたいで日付とカテゴリーの右端が揃わない。
	   カテゴリー名は4〜5文字を想定（お知らせ／開講案内／活動報告）。 */
	grid-template-columns: 5.5em 5.5em 1fr;
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--30);
}

/* フローレイアウトが子に付ける縦マージンは、グリッドでは行間を狂わせる。 */
.lnl-news-item > * {
	margin-block: 0;
}

.lnl-news-date {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* カテゴリーの枠。見た目はプログラムカードのタグ（.lnl-tag）と同じものなので、
   宣言を書き写さずに同じ規則へ相乗りする。post-terms はリンクを吐くため、
   クラスは a ではなく親に付く。 */
.lnl-news-cat {
	justify-self: start;
}

.lnl-news-cat a {
	border-color: var(--wp--preset--color--border-dark);
	color: var(--wp--preset--color--contrast-sub);
	text-decoration: none;
	white-space: nowrap;
}

.lnl-news-cat a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.lnl-news-title {
	line-height: 1.7;
	font-weight: 400;
}

.lnl-news-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.lnl-news-title a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 781px) {
	/* 3列だと見出しが2〜3文字ずつしか入らないので、
	   日付とカテゴリーを1行目、見出しを2行目に折る。 */
	.lnl-news-item {
		grid-template-columns: auto 1fr;
		column-gap: var(--wp--preset--spacing--30);
	}

	.lnl-news-title {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   ヘッダー・フッター
   ============================================================ */
:root {
	/* 固定ヘッダーの高さ。ページ内リンクの着地位置がこれに追随する。 */
	--lnl-header-h: 84px;
}

.lnl-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .lnl-header {
	top: 32px;
}

/* 管理バーの分だけ下がる。変数はスクロールする側（html）から読むので、
   body に付く .admin-bar ではなく :has() で根に置く。 */
:root:has(.admin-bar) {
	--lnl-header-h: 116px;
}

/* ページ内リンク（#message など）で飛んだとき、見出しが固定ヘッダーの下へ
   潜らないようにする。id を持つ全要素へ配るのではなく、
   スクロールする側（html）に1つ置けば足りる。 */
html {
	scroll-padding-top: var(--lnl-header-h);
}

.lnl-footer__list a {
	text-decoration: none;
	color: #b8c0d4;
}

.lnl-footer__list a:hover {
	color: #ffffff;
}

.lnl-footer__list li {
	margin-bottom: 0.5em;
}

.lnl-footer__heading {
	color: #ffffff;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 781px) {
	.lnl-header {
		position: static;
	}

	/* ヘッダーが固定でなくなるので、着地位置を下げる必要もなくなる。 */
	:root {
		--lnl-header-h: 0px;
	}
}

/* ============================================================
   濃色背景の上のボタン
   ============================================================ */
.lnl-button--light .wp-block-button__link {
	border: 1px solid rgba(255, 255, 255, 0.55);
	background-color: transparent;
}

.lnl-button--light .wp-block-button__link:hover {
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.08);
}


/* ============================================================
   濃色セクションの上のボタン
   ============================================================ */

/* 既定のボタンはネイビー背景。濃色セクションの上では同化して消えるため、
   白抜きに反転させる。 */
.has-primary-background-color > .wp-block-buttons .wp-block-button:not(.lnl-button--light) .wp-block-button__link,
.has-primary-deep-background-color > .wp-block-buttons .wp-block-button:not(.lnl-button--light) .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--base);
}

.has-primary-background-color > .wp-block-buttons .wp-block-button:not(.lnl-button--light) .wp-block-button__link:hover,
.has-primary-deep-background-color > .wp-block-buttons .wp-block-button:not(.lnl-button--light) .wp-block-button__link:hover {
	background-color: #e8ecf5;
	border-color: #e8ecf5;
}

/* ============================================================
   見出しの中のリンクは下線を引かない
   ============================================================ */
.wp-block-heading a {
	text-decoration: none;
	color: inherit;
}

.wp-block-heading a:hover {
	color: var(--wp--preset--color--accent);
}

/* ============================================================
   セクションの積み重ね
   ============================================================ */

/* ブロック間の既定の余白（block gap = 24px）が、ヘッダーと本文の間、
   本文とフッターの間、そしてセクション同士の間にも入ってしまい、
   色の付いた帯の間に白い線が走る。
   縦のリズムは各セクション自身の上下 padding が持っているので、
   帯を積み重ねる階層だけ隙間をゼロにする。 */
.wp-site-blocks > * + *,
.lnl-page > * + * {
	margin-block-start: 0;
}

/* ============================================================
   写真を使う面
   ------------------------------------------------------------
   背景写真はブロック属性ではなく CSS で持たせている。
   差し替えは assets/images/ の同名ファイルを上書きするだけでよく、
   固定ページの再生成もエディタの検証も通さずに済む。
   ============================================================ */

/* ヒーロー ------------------------------------------------- */

/* 2026-09-22 コピーライター案②で、濃紺に社名・タグラインを重ねたヒーローから、
   講座写真だけを全幅で見せる形に変えた。文字はすぐ下の導入ブロック（.lnl-intro__*）。
   LNSについて の見出し直下の写真も同じ規則を使う。

   高さは画面幅に比例させ、横長に切り抜く。写真の差し替えで縦横比が
   変わっても帯の高さは変わらない。講座写真は天井と壁が上半分を占め、
   人物は下半分に集まる（2026-09-24 に先生から届いた元データ）ので、
   切り抜きの基準を下に寄せている。

   img のセレクタはクラス3つで受ける。core の `.wp-block-image.alignfull img
   { height: auto }` が詳細度で勝ち、高さが写真の縦横比のままになる。 */
.lnl-hero-photo {
	margin: 0;
}

.wp-block-image.alignfull.lnl-hero-photo img {
	display: block;
	width: 100%;
	height: clamp(220px, 32vw, 560px);
	object-fit: cover;
	/* 68% だと LNSについて の写真で所長の頭が上端で切れ、35% だと手前の人の頭が下端で切れた。 */
	object-position: center 58%;
}

/* トップの写真（マイクの場面）は所長が立っていて頭の位置が高い。
   58% だと頭が上端に接するので、トップだけ少し上を残す。 */
.wp-block-image.alignfull.lnl-hero-photo--front img {
	object-position: center 48%;
}

/* 社名は小見出しの位置。タグライン（h1）より一段小さく、下に罫線を引く。
   罫線の長さは文字幅に合わせる（列幅いっぱいに引くと区切り線に見える）。 */
.lnl-intro__brand {
	display: inline-block;
	font-size: clamp(1.15rem, 1.9vw, 1.5rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}

/* 大きさは patterns/page-front.php 側が持つ（clamp を直接指定）。 */
.lnl-intro__title {
	line-height: 1.34;
}

.lnl-intro__lead {
	line-height: 1.95;
}

/* 数字の帯 ------------------------------------------------- */

.lnl-stats {
	gap: 0 !important;
	border-block: 1px solid var(--wp--preset--color--border);
}

.lnl-stat {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--border);
}

.lnl-stat:first-child {
	border-left: 0;
	padding-left: 0;
}

.lnl-stat__num {
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.lnl-stat__label {
	line-height: 1.5;
}

@media (max-width: 781px) {
	.lnl-stats {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
	}

	.lnl-stat {
		flex-basis: auto !important;
		padding: var(--wp--preset--spacing--40) 0;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.lnl-stat:nth-child(-n + 2) {
		border-top: 0;
	}

	.lnl-stat:nth-child(even) {
		padding-left: var(--wp--preset--spacing--40);
		border-left: 1px solid var(--wp--preset--color--border);
	}
}

/* 写真帯 --------------------------------------------------- */

.lnl-scene {
	background-image:
		linear-gradient(rgba(8, 15, 32, 0.62), rgba(8, 15, 32, 0.62)),
		url(../images/scene-mosaic.jpg);
	background-size: cover;
	background-position: center;
	padding-block: clamp(80px, 11vw, 152px) !important;
}

.lnl-scene__quote {
	line-height: 1.9;
	font-weight: 500;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/* CTA ------------------------------------------------------ */

/* 2026-10-01 コピーライター修正依頼「会議室の画像、透過度0%に」。
   写真が見えるよう紺を 93% → 55% に薄め、読みやすさは文字の影で補う。 */
.lnl-cta {
	background-image:
		linear-gradient(rgba(15, 32, 68, 0.55), rgba(15, 32, 68, 0.55)),
		url(../images/cta.jpg);
	background-size: cover;
	background-position: center;
}

.lnl-cta h2,
.lnl-cta p {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.45);
}

.lnl-cta p.has-text-color {
	color: #e6ebf4 !important;
}

/* プログラムカードの写真 ----------------------------------- */

/* カードには内側 padding があるので、負のマージンで縁まで出す。 */
.lnl-progcard .wp-block-image {
	margin: calc(var(--wp--preset--spacing--50) * -1)
		calc(var(--wp--preset--spacing--40) * -1)
		var(--wp--preset--spacing--40);
}

.lnl-progcard .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}