@charset "UTF-8";
/*
 * 新トップページ（リニューアル版）専用スタイル.
 * 既存テーマのヘッダー / サイドバー / フッターは流用し、メイン領域だけを
 * モックデザインに差し替える. すべて .home-redesign 配下にスコープする.
 *
 * 読み込みは inc/home-front.php にて、フロントページ かつ ?newtop=1 のときのみ.
 */

/*
 * 既存テーマがコンテンツ「内側」に付ける余白/最大幅だけを、トップページでは解除して
 * ヒーロー等を列いっぱいに広げる.
 * 注意: #content（.site-content）の margin-left はサイドバー分の逃げなので触らない.
 */
.home-redesign-active .content-area,
.home-redesign-active #main.site-main {
	padding: 0;
	max-width: none;
}

.home-redesign {
	--navy: #1f3a87;
	--pale: #e9f2f9;
	--cream: #fff8dc;
	--ink: #18264c;
	color: #333;
	font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	background: var(--pale);
}

.home-redesign * { box-sizing: border-box; }
.home-redesign a { color: inherit; text-decoration: none; }

/* ===== Hero ===== */
.home-redesign .hero {
	position: relative;
	height: 520px;
	padding: 60px 7%;
	overflow: hidden;
	color: #fff;
	/* background-image は環境差を避けるため hero.php 側でテーマURIを使って出力する */
	background-color: #16264f;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.home-redesign .hero::before {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 90px #020e2b55;
}

.home-redesign .hero-copy { position: relative; z-index: 2; }

/* 研究会名（実名）を大英字の上にアイブロウとして配置. 短い装飾ライン付き. */
.home-redesign .hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font: 700 20px/1.5 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	letter-spacing: .28em;
	color: #f1e2a6;
}

.home-redesign .hero-eyebrow::before {
	content: "";
	flex: none;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: .85;
}

.home-redesign .hero-copy h1 {
	max-width: 600px;
	margin: 0 0 24px;
	font: 500 clamp(42px, 4.7vw, 66px) / 1.05 Georgia, "Times New Roman", serif;
	letter-spacing: .015em;
	color: #fff;
}

.home-redesign .hero-copy h1 em { color: #fff3c2; font-style: normal; }

.home-redesign .hero-copy > p:not(.hero-eyebrow) {
	margin: 0;
	font: 16px / 1.85 "Yu Mincho", "Hiragino Mincho ProN", serif;
	letter-spacing: .05em;
}

.home-redesign .hero-actions {
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 25px;
	flex-wrap: wrap;
}

.home-redesign .button,
.home-redesign .text-link {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.home-redesign .button {
	padding: 16px 22px;
	background: var(--cream);
	color: var(--navy);
}

.home-redesign .text-link { color: #fff; }

/* ===== イベントカード（任意） ===== */
.home-redesign .event-card {
	position: absolute;
	z-index: 3;
	right: 5%;
	bottom: 32px;
	width: 292px;
	min-height: 170px;
	padding: 18px 20px 16px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: rgba(18, 44, 106, .6);
	border: 1px solid rgba(255, 255, 255, .28);
	box-shadow: 0 16px 42px rgba(0, 11, 43, .22);
	backdrop-filter: blur(14px);
}

.home-redesign .event-card .event-label {
	color: #eee6a4;
	font: 700 10px / 1 Arial, sans-serif;
	letter-spacing: .2em;
}

.home-redesign .event-card h2 {
	margin: 11px 0 13px;
	font: 500 17px / 1.38 "Yu Mincho", "Hiragino Mincho ProN", serif;
	letter-spacing: .025em;
	color: #fff;
}

.home-redesign .event-card h2 small {
	display: block;
	margin-bottom: 2px;
	font: inherit;
}

.home-redesign .event-card a {
	width: 100%;
	padding-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .04em;
	color: #fff;
}

.home-redesign .event-card a span {
	color: #fff;
	font-size: 12px;
	letter-spacing: 0;
}

/* カード全体をクリック可能にする（内側リンクを stretched link 化） */
.home-redesign .event-card a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.home-redesign .event-card:hover {
	border-color: rgba(255, 255, 255, .55);
	background: rgba(18, 44, 106, .72);
}

/* キーボード操作時のフォーカス表示（カード全体） */
.home-redesign .event-card a:focus-visible::after {
	outline: 3px solid #f0cf66;
	outline-offset: 3px;
}

/* ===== News ===== */
.home-redesign .news {
	min-height: 76px;
	padding: 22px 5%;
	display: grid;
	grid-template-columns: 70px 1fr auto;
	/* 複数件のとき「NEWS」「一覧」を先頭行にそろえる（上部配置） */
	align-items: start;
	gap: 18px;
	background: #fff;
	border-bottom: 1px solid #dbe2e8;
	font-size: 15px;
	line-height: 1.5;
}

/* ラベルと「一覧」を最初のニュース行のベースラインへ寄せる微調整 */
.home-redesign .news .news-label { margin-top: 2px; }
.home-redesign .news .news-more { margin-top: 1px; }

.home-redesign .news .news-label,
.home-redesign .label {
	color: var(--navy);
	font: 700 11px Arial, sans-serif;
	letter-spacing: .18em;
}

.home-redesign .news-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.home-redesign .news-list li {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: 18px;
	align-items: baseline;
}

.home-redesign .news-list time { color: #818891; font-size: 14px; }
.home-redesign .news .news-more { font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* ===== About ===== */
.home-redesign .about {
	padding: 64px 6%;
	display: grid;
	grid-template-columns: .55fr 1fr 1fr;
	gap: 4%;
	background: #f7fbfe;
}

.home-redesign .about h2 {
	max-width: max-content;
	margin: 0;
	color: #1b2b59;
	font: 500 clamp(28px, 2.8vw, 33px) / 1.55 "Yu Mincho", "Hiragino Mincho ProN", serif;
	white-space: nowrap;
}

.home-redesign .about mark {
	color: inherit;
	background: linear-gradient(transparent 65%, #dbd69e 65%);
}

.home-redesign .about div p { margin: 0 0 14px; font-size: 16px; line-height: 1.85; }

.home-redesign .about div a {
	color: var(--navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

/* ===== 活動カード ===== */
.home-redesign .pillars {
	padding: 0 6% 64px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #f7fbfe;
}

.home-redesign .pillars > .pillar-card { min-width: 0; display: block; }

.home-redesign .pillars article {
	height: 100%;
	min-height: 176px;
	padding: 24px 28px;
	background: #fff;
	border-top: 4px solid var(--navy);
	transition: background-color .2s ease, transform .2s ease;
}

.home-redesign .pillars > .pillar-card:nth-child(2) article { border-color: #4f66aa; }
.home-redesign .pillars > .pillar-card:nth-child(3) article { border-color: #bdb76b; }

.home-redesign .pillars > a.pillar-card:hover article {
	background: #f8fbff;
	transform: translateY(-2px);
}

.home-redesign .pillars > .pillar-card:focus-visible {
	position: relative;
	z-index: 1;
	outline: 3px solid #f0cf66;
	outline-offset: 3px;
}

.home-redesign .pillars b { color: #6776a8; font: 10px Arial, sans-serif; }

.home-redesign .pillars h3 {
	margin: 15px 0 10px;
	color: #1c326f;
	font: 26px Georgia, serif;
}

.home-redesign .pillars p { margin: 0; font-size: 14px; line-height: 1.75; }

/* ===== 中間デスクトップ ===== */
@media (min-width: 901px) and (max-width: 1180px) {
	.home-redesign .about {
		grid-template-columns: minmax(280px, .95fr) minmax(0, 1.15fr);
		column-gap: 48px;
		row-gap: 24px;
	}
	.home-redesign .about > .label {
		grid-column: 1 / -1;
		margin: 0;
	}
}

/* ===== タブレット・スマホ ===== */
@media (max-width: 900px) {
	.home-redesign .hero {
		height: auto;
		min-height: 620px;
		padding: 60px 25px;
		background-position: 62% center;
	}

	.home-redesign .hero-copy h1 { font-size: clamp(38px, 11vw, 60px); }

	.home-redesign .event-card {
		position: relative;
		right: auto;
		left: auto;
		bottom: auto;
		width: min(100%, 360px);
		min-height: 164px;
		margin: 56px auto 0 0;
	}

	.home-redesign .news {
		padding: 14px 20px;
		grid-template-columns: 55px 1fr;
	}

	.home-redesign .news-list li { grid-template-columns: 74px 1fr; gap: 12px; }
	.home-redesign .news .news-more { display: none; }

	.home-redesign .about {
		padding: 55px 25px;
		grid-template-columns: 1fr;
		row-gap: 24px;
	}

	.home-redesign .about h2 { font-size: clamp(27px, 8vw, 33px); white-space: normal; }

	.home-redesign .pillars {
		padding: 0 25px 55px;
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
 * トップページでは黒いタイトルバー（ロゴ画像）を出さず、ヒーローを最上部に.
 * ナビはサイドバー（広い画面）/ ハンバーガー（狭い画面）に導線があるため成立する.
 * ===================================================================== */

/* 既定（サイドバーが出る幅を含む全幅）: バーごと非表示 */
.home-redesign-active #titleheader { display: none; }

/*
 * バーを消すと上端が詰まって見えるため、サイドバーのナビ開始位置を
 * ヒーロー見出し（上余白60px）とそろえて“抜け感”を出す.
 * 紺色の地はそのまま最上部まで伸ばし、リンクだけ下げる.
 */
.home-redesign-active #secondary { padding-top: 56px; }

/*
 * 最上部に細いブランドの帯（黒バーの代わりの“蓋”）.
 * 紺のサイドバー上でも淡色の本文上でも視認できるよう金系のグラデーションにする.
 * 帯要素は header.php がデモ表示時のみ出力する（.home-topbar）.
 */
.home-topbar {
	position: relative;
	z-index: 100;
	height: 6px;
	/* WordPress ログイン時ツールバーと同系のグレー */
	background: #23282d;
}

/*
 * ハンバーガーが出る幅（テーマの境界 46.25em 未満 = スマホ）だけは、
 * メニュー導線を失わないよう、バーは透明化しつつボタンだけヒーロー上に残す.
 */
@media screen and (max-width: 46.24em) {
	.home-redesign-active #titleheader {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: auto;
		min-height: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
		z-index: 20;
		pointer-events: none; /* 透明バー自体はクリックを透過させる */
	}
	.home-redesign-active #titleheader .site-title { display: none; }
	.home-redesign-active #titleheader .secondary-toggle {
		pointer-events: auto; /* ボタンだけは操作可能に */
		position: absolute;
		top: 8px;
		right: 8px;
		bottom: auto;
		left: auto;
		margin: 0;
		transform: none; /* テーマの translateY(-21px) を打ち消す */
		background: rgba(0, 0, 0, .5); /* ヒーロー上でも視認できるよう下地を残す */
	}
}