/*
 * ASPRI トップページ専用スタイル
 * front-page.php で使用。WP移行時: businesspress テーマに同梱、is_front_page() で読み込み。
 */

:root {
	--aspri-blue:   #2056ae; /* ロゴ・ブランドブルー */
	--aspri-yellow: #f2ef1d; /* アクセントイエロー（TOPICS背景・見出しマーカー） */
	--aspri-ink:    #1a1a1a; /* 基本テキスト */
	--aspri-gray:   #d2d2d2; /* 大型ディスプレイ見出しのグレー */
	--aspri-sub:    #555;    /* サブテキスト */
	--aspri-maxw:   1040px;  /* コンテンツ最大幅 */
}

/* ---- リセット最小限（テーマ既存CSSの影響を抑える） ---- */
.aspri-home * { box-sizing: border-box; }
.aspri-home img { max-width: 100%; height: auto; display: block; }
.aspri-home a { text-decoration: none; color: inherit; }

.aspri-home {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	color: var(--aspri-ink);
	line-height: 1.8;
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

.aspri-container {
	width: 100%;
	max-width: var(--aspri-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

/* ============ ヘッダー ============ */
.aspri-header {
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
}
.aspri-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--aspri-maxw);
	margin: 0 auto;
	padding: 16px 24px;
}
.aspri-logo {
	display: inline-flex;
	flex-direction: column;
	line-height: 1;
}
.aspri-logo .logo-main {
	font-family: "Anton", "Noto Sans JP", sans-serif;
	font-size: 34px;
	letter-spacing: 1px;
	color: var(--aspri-blue);
}
.aspri-logo .logo-sub {
	font-size: 8px;
	letter-spacing: 1.5px;
	color: var(--aspri-blue);
	margin-top: 4px;
	font-weight: 700;
}
.aspri-logo img { max-height: 60px; width: auto; display: block; }

.aspri-nav ul {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.aspri-nav a {
	font-size: 14px;
	font-weight: 700;
	color: var(--aspri-ink);
	letter-spacing: .04em;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	transition: border-color .2s, color .2s;
}
.aspri-nav a:hover { color: var(--aspri-blue); border-bottom-color: var(--aspri-yellow); }

/* ---- ドロップダウン ---- */
.aspri-nav .has-dropdown { position: relative; }
.aspri-nav .sub-menu {
	/* .aspri-nav ul の display:flex を上書きして縦並びに */
	display: flex;
	flex-direction: column;
	gap: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(-6px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	position: absolute;
	top: 100%;
	left: 50%;
	padding-top: 12px;
	min-width: 150px;
	z-index: 200;
	white-space: nowrap;
	list-style: none;
	margin: 0;
}
/* 内側のボックスにボーダー・影を付ける */
.aspri-nav .sub-menu::after {
	content: '';
	display: block;
	position: absolute;
	inset: 12px 0 0;
	border: 1px solid #e4e4e4;
	box-shadow: 0 6px 20px rgba(0,0,0,.1);
	background: #fff;
	z-index: -1;
	pointer-events: none;
}
.aspri-nav .has-dropdown:hover .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.aspri-nav .sub-menu li { margin: 0; position: relative; }
.aspri-nav .sub-menu a {
	display: block;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 700;
	color: var(--aspri-ink);
	letter-spacing: .04em;
	border-bottom: none;
	transition: background .15s, color .15s;
	position: relative;
	z-index: 1;
}
.aspri-nav .sub-menu a:hover { background: #f5f5f5; color: var(--aspri-blue); border-bottom-color: transparent; }

/* ハンバーガー（モバイル） */
.aspri-hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px; height: 40px;
	background: none; border: none; cursor: pointer; padding: 0;
}
.aspri-hamburger span { display: block; width: 26px; height: 2px; background: var(--aspri-ink); transition: .3s; }

/* ============ ヒーロー ============ */
.aspri-hero { position: relative; width: 100%; }
.aspri-hero-img {
	width: 100%;
	height: auto;
	display: block;
}

/* グレーバンドは画像に焼き込み済みのため非表示 */
.aspri-display { display: none; }

/* ============ ビジョン（イントロ） ============ */
.aspri-vision { padding: 8px 0 80px; }
.aspri-vision-title {
	font-size: clamp(30px, 5.5vw, 54px);
	font-weight: 900;
	line-height: 1.25;
	margin: 24px 0 28px;
	display: inline;
	background: linear-gradient(transparent 62%, var(--aspri-yellow) 62%, var(--aspri-yellow) 92%, transparent 92%);
	padding: 0 6px;
}
.aspri-vision-title-wrap { margin-bottom: 28px; text-align: center; }
.aspri-vision-lead {
	font-size: 16px;
	color: var(--aspri-sub);
	margin: 0 0 64px;
	text-align: center;
}
.aspri-vision-body {
	text-align: center;
	font-weight: 700;
	font-size: clamp(15px, 2.2vw, 19px);
	line-height: 2.1;
}
.aspri-vision-body p { margin: 0 0 2.2em; }
.aspri-vision-body p:last-child { margin-bottom: 0; }

/* ============ TOPICS ============ */
.aspri-topics {
	background: var(--aspri-yellow);
	padding: 56px 0 72px;
}
.aspri-topics-title {
	font-family: "Anton", sans-serif;
	text-align: center;
	font-size: clamp(40px, 8vw, 76px);
	color: var(--aspri-ink);
	letter-spacing: .03em;
	margin: 0 0 44px;
}
.aspri-topics-list {
	max-width: 460px;
	margin: 0 auto;
}
.aspri-topic-card { background: transparent; }
.aspri-topic-card .topic-thumb {
	width: 100%;
	box-shadow: 0 6px 20px rgba(0,0,0,.12);
	background: #fff;
}
.aspri-topic-card .topic-body { padding-top: 22px; }
.aspri-topic-date { font-size: 14px; font-weight: 700; color: var(--aspri-ink); margin: 0 0 6px; }
.aspri-topic-name { font-size: 22px; font-weight: 900; color: var(--aspri-ink); margin: 0 0 16px; }
.aspri-topic-card .topic-divider { border: none; border-top: 1px solid rgba(0,0,0,.35); margin: 0 0 16px; }
.aspri-topic-desc { font-size: 14px; line-height: 1.9; color: var(--aspri-ink); margin: 0; }

/* ============ フッター ============ */
.aspri-footer {
	background: #fff;
	text-align: center;
	padding: 28px 0;
}
.aspri-footer small {
	font-size: 11px;
	letter-spacing: .15em;
	color: #999;
}

/* ============ レスポンシブ ============ */
@media (max-width: 820px) {
	.aspri-display { white-space: normal; }
}
@media (max-width: 768px) {
	.aspri-hamburger { display: flex; }
	.aspri-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: 78%;
		max-width: 320px;
		background: #fff;
		box-shadow: -4px 0 24px rgba(0,0,0,.12);
		transform: translateX(100%);
		transition: transform .3s ease;
		z-index: 1000;
		padding: 80px 28px;
	}
	.aspri-nav.is-open { transform: translateX(0); }
	.aspri-nav ul { flex-direction: column; gap: 4px; }
	.aspri-nav a { display: block; padding: 12px 0; border-bottom: 1px solid #eee; }
	/* モバイル ドロップダウン */
	.aspri-nav .sub-menu {
		display: none;
		position: static;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: none;
		box-shadow: none;
		border: none;
		padding: 0;
		background: #f7f7f7;
		margin: 0 0 4px;
	}
	.aspri-nav .sub-menu::after { display: none; }
	.aspri-nav .has-dropdown.is-sub-open .sub-menu { display: block; }
	.aspri-nav .sub-menu a { padding: 10px 0 10px 20px; border-bottom: 1px solid #eee; font-size: 13px; }
	.aspri-nav-overlay {
		display: none;
		position: fixed; inset: 0;
		background: rgba(0,0,0,.4);
		z-index: 999;
	}
	.aspri-nav-overlay.is-open { display: block; }
	.aspri-hero-img { max-height: 280px; }
	.aspri-vision { padding: 8px 0 56px; }
	.aspri-vision-lead { margin-bottom: 44px; }
}