/**
 * Front Page Styles
 *
 * @package SMC_Japan_Astra_Child
 */

/* ==========================================================================
	Front Page Layout
	========================================================================== */
.front-page {
	background-color: var(--d1-col-bg);
}

/* Astra親テーマの#primary margin/paddingを上書き（詳細度を上げる）
   - PC (min-width:993px): margin: 4em 0
   - 全画面サイズ: padding: 4em 0 */
#primary.front-page {
	margin: 0;
	padding: 0;
}

.front-page .site-main {
	padding: 0;
	max-width: none;
}

/* ==========================================================================
	Section Common Styles
	========================================================================== */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	padding-bottom: 16px;
	margin-bottom: 16px;
}

.section-header--bordered {
	border-bottom: 1px solid var(--d1-col-main);
}

.section-title {
	font-size: 64px;
	font-weight: 400;
	color: var(--d1-col-main);
	margin: 0;
	line-height: 1;
}

@media (max-width: 544px) {
	.section-title {
		font-size: 36px;
	}

	/* スマホ: 見出しの上下余白を統一 */
	.section-header {
		padding-top: 8px;
		padding-bottom: 8px;
	}
}

/* ==========================================================================
	Button Styles
	========================================================================== */
/* 共通ボタンスタイル */
.btn,
.btn-more,
.smc-modal-trigger,
#comments .submit {
	transition: all 0.3s ease;
	will-change: transform;
}

.btn,
.btn-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border-radius: 24px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

/* btn-more 固有のスタイル */
.btn-more {
	justify-content: center;
	width: 144px;
	height: 48px;
	line-height: 1;
	white-space: nowrap;
	/* 改行を防止 */
}

/* カラーバリアント: Primary（オレンジ背景、白文字） */
.btn--primary,
.btn-more--primary {
	background-color: var(--d1-col-main);
	color: var(--d1-col-bg);
}

.btn--primary:hover,
.btn-more--primary:hover {
	color: var(--d1-col-bg);
}

/* カラーバリアント: Light（白背景、オレンジ文字） */
.btn--light,
.btn-more--light {
	background-color: var(--d1-col-bg);
	color: var(--d1-col-main);
}

.btn--light:hover,
.btn-more--light:hover {
	color: var(--d1-col-main);
}

/* ホバーエフェクト共通化 */
.btn:hover,
.btn-more:hover,
.smc-modal-trigger:hover,
#comments .submit:hover {
	opacity: 0.9;
	transform: scale(1.05);
}

/* フォーカススタイル（アクセシビリティ対応） */
.btn:focus-visible,
.btn-more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.btn--sm {
	padding: 6px 21px;
	height: 48px;
}

.btn__arrow {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	mask-image: url('../images/icons/d1_Arrow.svg');
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-image: url('../images/icons/d1_Arrow.svg');
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

/* ==========================================================================
	Mission Section
	========================================================================== */
.mission-section {
	padding: 0;
	padding-top: 48px;
	overflow: visible;
	position: relative;
	background-color: var(--d1-col-main);
}

/* ヘッダー領域外側ラッパー: 背景色全幅、sticky */
.mission-section .section-header-outer {
	background-color: var(--d1-col-main);
	position: sticky;
	top: 104px;
	z-index: 10;
}

/* ヘッダー領域ラッパー: .containerと同様の制御 */
.mission-section .section-header-wrapper {
	max-width: 1512px;
	margin: 0 auto;
	padding: 0 72px;
}

.mission-section .section-header {
	position: relative;
}

/* 白背景領域（画像がはみ出す領域） */
.mission-section__white {
	background-color: var(--d1-col-bg);
	height: 272px;
	margin-top: -300px;
	position: relative;
	z-index: 1;
}

.mission-section .section-header::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background-color: var(--d1-col-bg);
}

.mission-section .section-title {
	color: var(--d1-col-bg);
	/* 他のプロパティは共通の.section-titleから継承 */
}

.mission-section__content>.container {
	position: relative;
	z-index: 2;
}

.mission-body {
	margin-top: 94px;
	position: relative;
	overflow: visible;
	/* 画像が下にはみ出すことを許可 */
}

/* 2カラムレイアウト: 画像と説明文 */
.mission-layout {
	display: flex;
	align-items: start;
	position: relative;
}

/* 左側のスペーサー（先に縮小される） */
.mission-spacer {
	width: 172px;
	flex-shrink: 10;
	/* 高い値で先に縮小 */
	min-width: 0;
}

/* 画像と概要の間のスペーサー（余剰スペースを吸収、先に縮小） */
.mission-inner-spacer {
	flex: 1 10 200px;
	/* grow: 1（余剰スペースを吸収）, shrink: 10（先に縮小）, basis: 200px（基本幅） */
	min-width: 32px;
}

/* 説明文とボタンのコンテナ */
.mission-content {
	flex-shrink: 1;
	/* スペーサーより後で縮小 */
	min-width: 0;
	width: 508px;
	/* 基本幅 */
	max-width: 100%;
	/* 親コンテナに収まるよう縮小 */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* 右寄せ */
	justify-content: space-between;
	/* 上下に分散配置 */
	gap: 44px;
	/* 最大間隔 */
}

.mission-heading {
	font-size: 64px;
	font-weight: 700;
	line-height: 76.8px;
	color: var(--d1-col-bg);
	margin: 0 0 40px;
	text-align: left;
	/* 左寄せ */
}

.mission-description {
	font-size: 20px;
	font-weight: 400;
	line-height: 36px;
	color: var(--d1-col-bg);
	text-align: left;
	margin-bottom: 0;
	width: 100%;
	/* 親要素の幅に合わせる */
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;
}

/* SMC JAPANロゴ: 横幅いっぱいに配置 */
.mission-logo {
	width: 100%;
	height: auto;
	padding-right: 8px;
	box-sizing: border-box;
}

/* モバイル用: 画像とボタンのラッパー */
.mission-lower-section {
	flex-shrink: 1;
	/* スペーサーより後で縮小 */
	min-width: 0;
	/* 縮小可能に */
	position: relative;
	z-index: 2;
	/* 疑似要素より上に表示 */
}

/* 画像ブロック */
.mission-image-block {
	position: relative;
}

.mission-image {
	width: 454px;
	/* 固定幅を設定 */
	max-width: 100%;
	/* 親コンテナに収まるよう縮小 */
	height: auto;
	transform: rotate(2deg);
	/* 回転のみ */
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* フォールバック: グレーの網掛け */
.mission-image--placeholder {
	width: 350px;
	height: 488px;
	max-width: 100%;
	background-color: #ccc;
	background-image: repeating-linear-gradient(45deg,
			transparent,
			transparent 10px,
			rgba(255, 255, 255, 0.3) 10px,
			rgba(255, 255, 255, 0.3) 20px);
}


/* タブレット時（921px以下）のミッションセクション */
@media (max-width: 921px) {
	/* stickyはタブレット以下でも有効 */
	.mission-section .section-header-outer {
		top: 104px;
	}

	.mission-section .section-header-wrapper {
		padding: 0 16px;
	}

	.mission-body {
		margin-top: 64px;
	}

	.mission-section__white {
		height: clamp(116px, 41.4vw - 109px, 272px);
		/* 921pxで272px、544pxで116px */
		margin-top: -100px;
	}

	/* 写真と概要+ボタンを1:1の比率に */
	.mission-spacer {
		display: none;
	}

	.mission-inner-spacer {
		flex: 0 0 32px;
	}

	.mission-lower-section {
		flex: 1;
		min-width: 0;
	}

	.mission-image-block {
		width: 100%;
	}

	.mission-content {
		flex: 1;
		width: auto;
	}
}

/*
 * ミッションセクション - 761px以下
 *
 * 非標準ブレークポイント使用理由:
 * 921px（タブレット）と544px（スマホ）の間で白背景領域の調整が必要なため、
 * 例外的に761pxブレークポイントを使用。
 */
@media (max-width: 761px) {
	.mission-section__white {
		margin-top: -60px;
	}
}

/* モバイル時（544px以下）のミッションセクション - レイアウト変更 */
@media (max-width: 544px) {
	/* スマホ: stickyのtop位置を調整 */
	.mission-section .section-header-outer {
		top: 48px;
	}

	.mission-section__content {
		padding-top: 32px;
	}

	.mission-section__white {
		height: 116px;
		margin-top: -140px;
		/* ロゴ追加によりコンテンツ高さが増えたため調整 */
	}

	.mission-body {
		margin-top: 40px;
		/* section-headerとmission-headingの間のスペース */
	}

	.mission-heading {
		font-size: 40px;
		/* モバイル版のフォントサイズ */
		font-weight: 700;
		/* 太文字 */
		line-height: 1.2;
		/* 120% */
		height: 96px;
		/* モバイル版のh3見出しの高さ */
		margin-bottom: 16px;
		/* mission-headingと概要の間のスペース */
	}

	.mission-spacer {
		display: none;
		/* モバイルではスペースなし */
	}

	.mission-inner-spacer {
		display: none;
		/* モバイルでは非表示 */
	}

	.mission-layout {
		flex-direction: column;
		/* 縦並びに変更 */
		gap: 44px;
		/* 概要とmission-lower-sectionの間のスペース */
	}

	.mission-description {
		font-size: 14px;
		/* モバイル版のフォントサイズ */
		text-align: left;
		line-height: 20px;
		/* モバイル版の行間 */
		word-wrap: break-word;
		overflow-wrap: break-word;
		white-space: normal;
		margin-bottom: 0;
		/* gapで間隔を管理するためmargin-bottomは0に */
	}

	.mission-content {
		align-items: flex-start;
		/* モバイルでは左寄せ */
		order: -1;
		/* 説明文を画像の上に */
		gap: 28px;
		/* モバイル版の間隔 */
	}

	.mission-logo {
		padding-bottom: 28px;
		/* 画像の下のスペースと同じ幅 */
	}

	/* モバイル用ラッパー: カルーセルを左寄せ */
	.mission-lower-section {
		display: block;
		width: 100%;
	}

	.mission-image-block {
		width: 58%;
		max-width: 288px;
		/* 544pxで288px、390pxで約208px */
		min-width: 0;
	}

	.mission-image {
		width: 100%;
		max-width: 100%;
		transform: rotate(2deg);
		/* モバイルでは移動をリセット */
	}

	/* モバイル版: すべてのボタンの共通スタイル */
	.btn,
	.btn-more,
	.btn--sm {
		font-size: 12px;
		/* モバイル版のフォントサイズ */
		padding: 6px 8px;
		/* 上下6px、左右8px */
		gap: 6px;
		/* PC版8pxの75% */
		border-radius: 16px;
		/* PC版24pxの約67% */
	}

	.btn-more {
		width: 97px;
		height: 32px;
		/* モバイル版のボタンサイズ */
	}

	.btn--sm {
		height: 32px;
		/* モバイル版のボタン高さ */
		padding: 6px 8px;
		/* PC版のpaddingを上書き */
	}

	/* モバイル版: アイコンサイズ */
	.btn .btn__arrow,
	.btn-more .btn__arrow {
		width: 12px;
		height: 12px;
		/* モバイル版のアイコンサイズ */
	}
}

/* ==========================================================================
	News Section
	========================================================================== */
.news-section {
	padding: 48px 0 72px;
	background-color: var(--d1-col-bg);
}

/* Newsのヘッダー: sticky */
.news-section .section-header {
	position: sticky;
	top: 104px;
	z-index: 10;
	background-color: var(--d1-col-bg);
}

/* 2カラムレイアウト: PC版は1:3比率 */
.news-layout {
	display: flex;
}

.news-layout__spacer {
	flex: 1;
}

.news-layout__content {
	flex: 3;
}

.news-list {
	display: flex;
	flex-direction: column;
}

/* News List Card */
.post-card-list {
	border-top: 1px solid var(--d1-col-main);
}

.post-card-list:first-child {
	border-top: none;
}

.post-card-list__link {
	display: grid;
	grid-template-columns: 1fr 190px;
	grid-template-rows: auto 1fr;
	gap: 8px 24px;
	min-height: 248px;
	padding: 24px 0;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

.post-card-list__content {
	display: contents;
}

.post-card-list__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	grid-column: 1 / -1;
	grid-row: 1;
}

.post-card-list__arrow {
	margin-left: auto;
}

.post-card-list__date {
	font-size: 24px;
	font-weight: 400;
	color: var(--d1-col-main);
	line-height: 36px;
	flex-shrink: 0;
}

.post-card-list__category {
	font-size: 20px;
	font-weight: 400;
	color: var(--d1-col-main);
	line-height: 36px;
	cursor: pointer;
}

.post-card-list__category:hover {
	text-decoration: underline;
}

.post-card-list__title {
	font-size: 26px;
	font-weight: 400;
	line-height: 36px;
	color: var(--d1-col-text);
	margin: 0;
	grid-column: 1;
	grid-row: 2;
	align-self: start;
}

/* サムネイル */
.post-card-list__thumbnail {
	width: 190px;
	height: 160px;
	grid-column: 2;
	grid-row: 2;
	align-self: center;
}

.post-card-list__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 16px;
}

/* --- 画像なしの場合: タイトル全幅表示（PC版） --- */
.post-card-list--no-thumbnail .post-card-list__link {
	grid-template-columns: 1fr;
}

.post-card-list--no-thumbnail .post-card-list__title {
	grid-column: 1;
}

@media (max-width: 921px) {
	.news-section {
		padding: 16px 0 36px;
	}

	/* タブレット以下: 左列を非表示 */
	.news-layout__spacer {
		display: none;
	}

	.news-layout__content {
		flex: 1;
	}

	/* タブレット版: メタ情報を上段に配置（右端まで表示） */
	.post-card-list__link {
		display: grid;
		grid-template-columns: 1fr 190px;
		grid-template-rows: auto 1fr;
		gap: 8px 24px;
		padding: 24px 0;
		min-height: 248px;
		box-sizing: border-box;
	}

	.post-card-list__content {
		display: contents;
	}

	.post-card-list__meta {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.post-card-list__title {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin: 0;
		font-size: 26px;
		line-height: 36px;
	}

	.post-card-list__thumbnail {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		width: 190px;
		height: 160px;
	}

	/* --- 画像なしの場合: タイトル全幅表示（タブレット版） --- */
	.post-card-list--no-thumbnail .post-card-list__link {
		grid-template-columns: 1fr;
	}

	.post-card-list--no-thumbnail .post-card-list__title {
		grid-column: 1;
	}
}

/* モバイル版: 縦並びレイアウト */
@media (max-width: 544px) {
	/* スマホ: stickyのtop位置を調整 */
	.news-section .section-header {
		top: 48px;
	}

	/* タブレット版のグリッドをリセットしてフレックスに戻す */
	.post-card-list__link {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: auto;
		padding: 34px 8px 28px;
		gap: 17px;
	}

	.post-card-list__content {
		display: flex;
		flex-direction: column;
		gap: 0;
		align-self: auto;
	}

	/* サムネイルを上部に配置 */
	.post-card-list__thumbnail {
		order: -1;
		width: 100%;
		height: 171px;
		align-self: auto;
	}

	/* タイトルを上、メタ情報を下に */
	.post-card-list__title {
		order: -1;
		font-size: 20px;
		line-height: 30px;
		margin-bottom: 8px;
		align-self: auto;
	}

	/* メタ情報を縦並び、カテゴリー→日付の順に */
	.post-card-list__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		position: relative;
	}

	/* カテゴリーを上に */
	.post-card-list__category {
		order: -1;
		font-size: 16px;
		line-height: 36px;
	}

	.post-card-list__date {
		font-size: 16px;
		line-height: 36px;
	}

	/* スマホでは矢印を非表示 */
	.post-card-list__arrow {
		display: none;
	}

	.post-card-list:last-child {
		border-bottom: 1px solid var(--d1-col-main);
	}
}

/* ==========================================================================
	Target Cards Section
	========================================================================== */
.target-cards-section {
	padding: 72px 0;
	background-color: var(--d1-col-bg);
}

.target-cards-grid {
	display: flex;
	justify-content: center;
	gap: 64px;
	flex-wrap: wrap;
	/* 収まらない場合は折り返し */
	margin: 0 -34px;
	/* containerのpadding 72px → 38pxに調整 */
}

.target-card {
	flex: 0 0 436px;
	/* 固定幅 */
	width: 436px;
	min-height: 330px;
	/* Figma仕様 */
	background-color: var(--d1-col-bg);
	border-radius: 16px;
	padding: 30px 16px 30px;
	display: flex;
	flex-direction: column;
	/* PC版: 罫線なし、シャドウなし */
	text-decoration: none;
	color: inherit;
	transition: background-color 0.3s ease;
}

.target-card:hover {
	background-color: rgba(250, 78, 48, 0.05);
}

.target-card-header {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--d1-col-main);
	margin-bottom: 25px;
}

.target-card-title {
	font-size: 32px;
	font-weight: 700;
	color: var(--d1-col-main);
	margin: 0;
	line-height: 46px;
}

.target-card-body {
	flex: 1;
	margin-bottom: 20px;
}

.target-card-text {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: var(--d1-col-text);
	margin: 0;
}

.target-card-footer {
	display: flex;
	justify-content: flex-end;
}

.target-card-footer .btn {
	width: 144px;
	height: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
}

@media (max-width: 921px) {
	.target-cards-section {
		padding: 36px 0;
	}

	.target-cards-grid {
		gap: 24px;
		margin: 0;
		/* PC版の負マージンをリセット */
	}
}

@media (max-width: 544px) {
	.target-cards-grid {
		flex-direction: column;
		gap: 24px;
	}

	.target-card {
		flex: 0 0 auto;
		width: 100%;
		/* 横幅いっぱい */
		min-height: auto;
		padding: 16px;
		/* 上下左右16px */
		border: 1px solid var(--d1-col-sub);
		/* モバイル版: 罫線あり */
	}

	.target-card-title {
		font-size: 24px;
		line-height: 36px;
	}

	.target-card-header {
		padding-bottom: 19px;
		/* タイトル36px + padding-bottom 19px + border 1px = 56px */
		margin-bottom: 16px;
	}

	.target-card-text {
		font-size: 14px;
		line-height: 20px;
	}

	.target-card-footer .btn {
		width: 97px;
		height: 32px;
		padding: 0;
	}
}

/* ==========================================================================
	Supported By Section
	========================================================================== */

/* --- ベーススタイル（PC） --- */
.supported-by-section {
	padding: 72px 0;
}

/* --- 共通スタイル --- */
.supported-by-widget {
	background-color: var(--d1-col-bg2);
	border-radius: 64px;
	padding: 46px 38px;
	margin: 0 -34px;
	min-height: 212px;
	box-sizing: border-box;
}

.supported-by-title {
	font-size: 36px;
	font-weight: 400;
	color: var(--d1-col-main);
	margin: 0;
	flex-shrink: 0;
}

.supported-by-logos {
	display: flex;
	align-items: center;
	position: relative;
}

.supported-by-logos__track {
	display: flex;
	align-items: center;
	overflow: hidden;
}

.supported-by-logos__inner {
	display: flex;
	align-items: center;
}

.supported-by-logo {
	flex-shrink: 0;
}

.supported-by-logo img {
	max-width: 240px;
	max-height: 131px;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* --- ナビゲーションボタン --- */
.supported-by-nav {
	position: absolute;
	width: 20px;
	height: 20px;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	box-shadow: none;
	cursor: pointer;
	z-index: 10;
	-webkit-appearance: none;
	appearance: none;
	display: none;
	/* デフォルト非表示（3件以下） */
}

.supported-by-nav:hover,
.supported-by-nav:focus,
.supported-by-nav:active {
	background: none;
	outline: none;
	box-shadow: none;
	opacity: 0.7;
}

/* ナビボタン アイコン回転（横スクロール共通） */
.supported-by-nav--prev .supported-by-nav__icon {
	transform: rotate(90deg);
}

.supported-by-nav--next .supported-by-nav__icon {
	transform: rotate(-90deg);
}

.supported-by-nav__icon {
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--d1-col-main);
	mask: url('../images/icons/d1_Down.svg') center / contain no-repeat;
	-webkit-mask: url('../images/icons/d1_Down.svg') center / contain no-repeat;
}

/* --- スライダーモード（条件を満たす場合、JSで--slider-activeクラスを付与） --- */
.supported-by-logos--slider-active .supported-by-nav {
	display: block;
	opacity: 1;
}

.supported-by-logos--slider-active .supported-by-nav:hover,
.supported-by-logos--slider-active .supported-by-nav:active {
	opacity: 0.7;
}

.supported-by-logos--slider-active .supported-by-logos__inner {
	transition: transform 0.5s ease;
}

/* ==========================================================================
   PC用（横スライダー）922px以上
   ========================================================================== */
.supported-by-widget--pc {
	display: block;
}

.supported-by-widget--tablet,
.supported-by-widget--smartphone {
	display: none;
}

.supported-by-widget--pc .supported-by-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 60px 60px;
	/* 折り返し時の行間と見出し-スライダー間のgap */
}

.supported-by-widget--pc .supported-by-logos {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 40px;
}

.supported-by-widget--pc .supported-by-logos__track {
	/* 3件分の幅: 画像240px×3 + gap×2（JSで--logo-gapを設定） */
	width: calc(240px * 3 + var(--logo-gap, 104px) * 2);
	flex-shrink: 0;
	overflow: hidden;
	margin: 0 auto;
	/* 中央揃え */
}

.supported-by-widget--pc .supported-by-logos__inner {
	display: flex;
	gap: var(--logo-gap, 104px);
	/* 画像間のgap: JSで動的に設定（16px〜104px） */
}

.supported-by-widget--pc .supported-by-logo {
	flex: 0 0 240px;
	width: 240px;
}

/* PC用横スライダー ナビボタン位置 */
.supported-by-widget--pc .supported-by-nav {
	top: 50%;
	transform: translateY(-50%);
}

.supported-by-widget--pc .supported-by-nav--prev {
	left: -40px;
}

.supported-by-widget--pc .supported-by-nav--next {
	right: -40px;
}


/* ==========================================================================
   タブレット用（2列グリッド・横スクロール）545px〜921px
   ========================================================================== */
@media (max-width: 921px) {
	.supported-by-section {
		padding: 36px 0;
	}

	.supported-by-widget {
		padding: 30px;
		border-radius: 32px;
		margin: 0 -16px;
	}

	/* PC用を非表示、タブレット用を表示 */
	.supported-by-widget--pc {
		display: none;
	}

	.supported-by-widget--tablet {
		display: block;
	}

	.supported-by-widget--smartphone {
		display: none;
	}

	.supported-by-widget--tablet .supported-by-title {
		margin-bottom: 24px;
	}

	/* タブレット用: 2列×3行グリッド・1ページ単位で横スクロール（Z型配置） */
	.supported-by-widget--tablet .supported-by-logos {
		width: 100%;
	}

	.supported-by-widget--tablet .supported-by-logos__track {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: center;
	}

	/* スライダー動作時は左寄せ */
	.supported-by-widget--tablet .supported-by-logos--slider-active .supported-by-logos__track {
		justify-content: flex-start;
	}

	/* innerをflexで横並び（ページを横に配置） */
	.supported-by-widget--tablet .supported-by-logos__inner {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	/* スライダー動作時は左寄せ（translateXでスライド） */
	.supported-by-widget--tablet .supported-by-logos--slider-active .supported-by-logos__inner {
		justify-content: flex-start;
	}

	/* 各ページ: 2列×3行グリッド（Z型配置） */
	.supported-by-widget--tablet .supported-by-page {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, auto);
		gap: 32px;
		justify-items: center;
		width: 100%;
		flex-shrink: 0;
	}

	/* 3件以下の場合、1列のみなので中央寄せ */
	.supported-by-widget--tablet .supported-by-logos[data-total-count="1"] .supported-by-page,
	.supported-by-widget--tablet .supported-by-logos[data-total-count="2"] .supported-by-page,
	.supported-by-widget--tablet .supported-by-logos[data-total-count="3"] .supported-by-page {
		grid-template-columns: 240px;
		justify-content: center;
		width: auto;
		margin: 0 auto;
	}

	.supported-by-widget--tablet .supported-by-logo {
		width: 100%;
		max-width: 240px;
		height: 131px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* タブレット用横スクロール ナビボタン位置 */
	.supported-by-widget--tablet .supported-by-nav {
		top: 50%;
		transform: translateY(-50%);
	}

	.supported-by-widget--tablet .supported-by-nav--prev {
		left: 0;
	}

	.supported-by-widget--tablet .supported-by-nav--next {
		right: 0;
	}
}

/* ==========================================================================
   スマホ用（縦全件表示・スライダーなし）544px以下
   ========================================================================== */
@media (max-width: 544px) {
	.supported-by-widget {
		padding: 46px 31px;
	}

	.supported-by-title {
		font-size: 24px;
	}

	/* タブレット用を非表示、スマホ用を表示 */
	.supported-by-widget--tablet {
		display: none;
	}

	.supported-by-widget--smartphone {
		display: block;
	}

	.supported-by-widget--smartphone .supported-by-title {
		margin-bottom: 24px;
	}

	/* スマホ用: 縦に全件表示 */
	.supported-by-widget--smartphone .supported-by-logos {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.supported-by-widget--smartphone .supported-by-logos__inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
		justify-items: center;
	}

	.supported-by-widget--smartphone .supported-by-logo {
		width: 100%;
		max-width: 240px;
		height: 131px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
	Expert Reaction Section

	Newsセクションとの差分:
	- 2列×3行グリッド表示
	- 罫線（上・中央縦線・下）
	- 右上の画像エリア（回転画像スタック）
	- 「もっと見る」ボタンは画像エリア内

	カードコンポーネントはpost-card.phpのlistレイアウトを使用
	========================================================================== */
.expert-reaction-section {
	padding: 48px 0 72px;
	background-color: var(--d1-col-bg);
	position: relative;
}

.expert-reaction-section .container {
	position: relative;
	padding-top: 300px;
	z-index: 5;
	/* 画像より前面、ボタンより背面 */
}

/* Expert Reactionのヘッダー: sticky */
.expert-reaction-section .section-header {
	position: sticky;
	top: 104px;
	z-index: 10;
	background-color: transparent;
	margin-bottom: 0;
	transition: background-color 0.3s ease;
}

/* stickyで固定されたときの背景色と罫線 */
.expert-reaction-section .section-header.is-stuck {
	background-color: var(--d1-col-bg);
	border-bottom: 1px solid var(--d1-col-main);
}

.expert-reaction-section .section-header--bordered {
	border-bottom: none;
}

/* --- 画像エリア（最背面のバックグラウンドとして配置） --- */
.expert-reaction-visual {
	position: absolute;
	/* コンテナ最大幅（1200px）を基準に、一覧の右端に配置。狭い画面では右端72pxを最小値として維持 */
	right: max(72px, calc(50% - 640px));
	top: 72px;
	/* セクションのpaddingに合わせる */
	/* 可変幅: 最大454px、ミッションセクションと同じ縮小率
	   線形計算: 1298pxで454px、922pxで352pxを通る直線 */
	width: clamp(352px, calc(27.13vw + 102px), 454px);
	height: 600px;
	/* 回転による余白を考慮 */
	z-index: 0;
	/* 最背面 */
	overflow: visible;
}

/* ==========================================================================
   Expert Reaction Carousel（固有スタイル）
   共通スタイルは Section Carousel（共通）セクションを参照
   ========================================================================== */

/* --- Expert Reactionセクション固有 --- */
.expert-reaction-carousel__stack {
	position: relative;
	width: 454px;
	max-width: 100%;
	height: 600px;
}

/* PC表示: スライドを少し左にずらす */
.expert-reaction-carousel .section-carousel__slide {
	left: 38%;
}

/* 画像なしの場合: カルーセル表示と同じ位置に配置 */
.expert-reaction-carousel[data-image-count="0"] .section-carousel__slide {
	transform: translate(-50%, -50%) rotate(-9deg) !important;
}

/* PC表示: placeholderを通常画像と同じ相対サイズに */
.expert-reaction-carousel .section-carousel__image--placeholder {
	width: 77%;
	max-width: 350px;
	height: auto;
	aspect-ratio: 350 / 488;
}

/* --- カードグリッド（2列×3行） --- */
.expert-reaction-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* max-width: calc(100% - 560px); */
	/* 画像エリア非表示中は全幅 */
	max-width: 100%;
	position: relative;
	/* 上罫線 */
	border-top: 1px solid var(--d1-col-main);
	/* 下罫線 */
	border-bottom: 1px solid var(--d1-col-main);
	/* 背景色で画像を隠す */
	background-color: var(--d1-col-bg);
}

/* 中央縦線 */
.expert-reaction-grid::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: var(--d1-col-main);
	z-index: 1;
}

/* ==========================================================================
   Expert Reaction Grid - 差分スタイル（共通スタイルはstyle.cssに定義）
   ========================================================================== */

/* 罫線: カード下に表示 */
.expert-reaction-grid .post-card-list {
	border-top: none;
	border-bottom: 1px solid var(--d1-col-main);
}

/* PC版: min-height */
.expert-reaction-grid .post-card-list__link {
	min-height: 300px;
}

/* 最後の行（5番目と6番目）は下罫線なし（グリッド全体の下罫線と重複するため） */
.expert-reaction-grid .post-card-list:nth-child(5),
.expert-reaction-grid .post-card-list:nth-child(6) {
	border-bottom: none;
}

/* ==========================================================================
	Expert Reaction Section - Tablet (921px以下)
	カードスタイルはstyle.cssで共通化、ここではセクション固有スタイルのみ
	========================================================================== */
@media (max-width: 921px) {
	/* PC版のmin-height: 300pxをリセット（style.cssの248pxを適用） */
	.expert-reaction-grid .post-card-list__link {
		min-height: 248px;
	}

	.expert-reaction-section {
		margin-top: 120px;
		padding: 36px 0;
	}

	/* 画像エリア: セクション上部に配置（ミッションセクションと同じサイズ）
	   高さを制限して画像の下部3割が食い込むようにする */
	.expert-reaction-visual {
		position: absolute;
		right: 20px;
		top: -36px;
		width: min(428px, 44%);
		height: 280px;
	}

	/* コンテナに上部余白を追加（画像エリア用） */
	.expert-reaction-section .container {
		padding-top: 150px;
	}

	/* カルーセルスタックのサイズ調整（ミッションセクションと統一） */
	.expert-reaction-carousel__stack {
		width: 90%;
		max-width: 100%;
		height: 420px;
	}

	.expert-reaction-carousel .section-carousel__slide {
		left: 50%;
		top: 50%;
	}

	/* タブレット: 画像なしの場合のtranslate（インラインスタイルを上書き） */
	.expert-reaction-carousel[data-image-count="0"] .section-carousel__slide {
		transform: translate(-50%, -50%) rotate(-9deg) !important;
	}

	/* タブレット: placeholderを通常画像と同じ相対サイズに */
	.expert-reaction-carousel .section-carousel__image--placeholder {
		width: 77%;
		max-width: 212px;
		height: auto;
		aspect-ratio: 350 / 488;
	}

	/* タブレット: タイトル改行許可（「Expert Reaction」が長いため） */
	.expert-reaction-section .section-title {
		white-space: normal;
	}

	/* 見出しの下に罫線を追加（Newsセクションと同様） */
	.expert-reaction-section .section-header--bordered {
		border-bottom: 1px solid var(--d1-col-main);
	}

	/* カードグリッド: 1列に変更、上部罫線を削除 */
	.expert-reaction-grid {
		grid-template-columns: 1fr;
		max-width: 100%;
		border-top: none;
		padding-top: 24px;
	}

	/* 中央縦線を非表示 */
	.expert-reaction-grid::before {
		display: none;
	}

	/* すべてのカードに下罫線（nth-child(5)も含めて明示的に指定） */
	.expert-reaction-grid .post-card-list,
	.expert-reaction-grid .post-card-list:nth-child(5) {
		border-bottom: 1px solid var(--d1-col-main);
	}

	/* 最後のカードのみ下罫線なし */
	.expert-reaction-grid .post-card-list:last-child,
	.expert-reaction-grid .post-card-list:nth-child(6) {
		border-bottom: none;
	}
}

/* ==========================================================================
	Expert Reaction Section - Mobile (544px以下)
	カードスタイルはstyle.cssで共通化、ここではセクション固有スタイルのみ
	========================================================================== */
@media (max-width: 544px) {
	/* スマホ: stickyのtop位置を調整 */
	.expert-reaction-section .section-header {
		top: 48px;
	}

	.expert-reaction-section {
		margin-top: 48px;
	}

	/* PC版のmin-height: 300pxをリセット */
	.expert-reaction-grid .post-card-list__link {
		min-height: auto;
	}

	.expert-reaction-section .section-title {
		font-size: 40px;
		white-space: normal;
		/* スマホでは改行を許可 */
	}

	/* 画像エリア: ミッションセクションと同じサイズ（可変幅） */
	.expert-reaction-visual {
		right: 10px;
		top: -20px;
		width: min(395px, 53%);
		/* 390pxで約208px、ミッションセクションと同等 */
		height: 280px;
	}

	/* コンテナの上部余白を調整 */
	.expert-reaction-section .container {
		padding-top: 130px;
	}

	.expert-reaction-carousel__stack {
		height: 420px;
	}

	.expert-reaction-carousel .section-carousel__slide {
		top: 50%;
	}

	/* スマホ: 画像なしの場合のtranslate（インラインスタイルを上書き） */
	.expert-reaction-carousel[data-image-count="0"] .section-carousel__slide {
		transform: translate(-50%, -50%) rotate(-9deg) !important;
	}

	/* 画像サイズ調整（ミッションセクションと統一） */
	.expert-reaction-carousel img.section-carousel__image {
		max-width: 212px;
	}

	/* フォールバックのサイズ調整（通常画像と同じ相対サイズ） */
	.expert-reaction-carousel .section-carousel__image--placeholder {
		width: 77%;
		max-width: 212px;
		height: auto;
		aspect-ratio: 350 / 488;
	}
}

/* ==========================================================================
	Keywords Section
	========================================================================== */
.keywords-section {
	padding: 240px 0;
	background-color: var(--d1-col-bg);
}

.keywords-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
}

.keyword-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 24px;
	background-color: var(--d1-col-bg2);
	border: 1px solid var(--d1-col-bg2);
	border-radius: 28px;
	font-size: 24px;
	font-weight: 400;
	color: var(--d1-col-main);
	text-decoration: none;
	transition: all 0.3s ease;
}

.keyword-tag:hover {
	background-color: var(--d1-col-main);
	color: var(--d1-col-bg);
	border-color: var(--d1-col-main);
}

@media (max-width: 921px) {
	.keywords-section {
		padding: 200px 0;
	}
}

@media (max-width: 544px) {
	.keywords-section {
		padding: 160px 0;
	}

	.keywords-list {
		gap: 11px;
		margin-top: 39px;
	}

	.keyword-tag {
		height: 32px;
		padding: 0 16px;
		font-size: 18px;
	}
}

/* ==========================================================================
	No Posts Message
	========================================================================== */
.no-posts-message {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--d1-col-text-light);
}

/* ==========================================================================
	Section Carousel（共通）
	3枚の画像が常に重なって表示され、z-indexローテーションで前面が切り替わる
	ミッションセクション・Expert Reactionセクションで共用
	========================================================================== */

/* --- 共通スタイル --- */
.section-carousel {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.section-carousel__slide {
	position: absolute;
	top: 42%;
	left: 50%;
	width: 100%;
	transform-origin: center center;
	/* 全スライド常に表示 */
	opacity: 1;
	/* 画像を中央寄せ */
	display: flex;
	justify-content: center;
}

/* 初期化完了後にトランジションを有効化 */
.section-carousel.section-carousel--initialized .section-carousel__slide {
	transition: z-index 0ms, transform 500ms ease-in-out;
}

/* 画像が1枚の場合: 回転なし */
.section-carousel[data-image-count="1"] .section-carousel__slide {
	transform: translate(-50%, -50%) rotate(0deg) !important;
}

/* 前面に来るスライドのアニメーション（方向はCSS変数で制御） */
.section-carousel__slide.section-carousel__slide--to-front {
	animation: sectionSlideToFront 500ms ease-in-out forwards;
}

@keyframes sectionSlideToFront {
	0% {
		opacity: 0;
		transform: translate(calc(-50% + var(--slide-offset, -120px)), -50%) rotate(var(--rotation));
	}

	100% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--rotation));
	}
}

/* 共通画像スタイル */
.section-carousel__image {
	width: 77%;
	/* 350px / 454px ≈ 77% - 親の縮小に追従 */
	height: auto;
	aspect-ratio: 350 / 488;
	object-fit: cover;
	transform: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 共通フォールバック */
.section-carousel__image--placeholder {
	width: 350px;
	height: 488px;
	max-width: 100%;
	background-color: #ccc;
	background-image: repeating-linear-gradient(45deg,
			transparent,
			transparent 10px,
			rgba(255, 255, 255, 0.3) 10px,
			rgba(255, 255, 255, 0.3) 20px);
}

/* --- ミッションセクション固有 --- */
.mission-carousel__stack {
	position: relative;
	width: 454px;
	max-width: 100%;
	height: 632px;
	/* 画像サイズ + 回転による余白を考慮 */
}

/* タブレット以下でのミッションカルーセルサイズ調整 */
@media (max-width: 921px) {
	.mission-carousel__stack {
		width: 90%;
		max-width: 100%;
		height: 420px;
	}

	.mission-carousel .section-carousel__slide {
		top: 50%;
	}
}

/* スマホでのミッション画像サイズ調整 */
@media (max-width: 544px) {
	.mission-carousel__stack {
		width: 100%;
		height: auto;
		aspect-ratio: 350 / 488;
	}

	.mission-carousel {
		justify-content: flex-start;
		/* スマホでは左寄せ */
	}

	.mission-carousel .section-carousel__slide {
		top: 32%;
		left: 50%;
		/* 中央配置 */
	}

	.mission-carousel img.section-carousel__image {
		max-width: 212px;
		/* Expert Reactionと同じ */
	}

	.mission-image--placeholder {
		max-height: 300px;
	}
}