body {
	background-color: #fff;
}

/* functions.css のキービジュアル関連のCSSを、すべてこちらに差し替え */

/* =============================================
 * Key Visual - 最終FIX版
 * ============================================= */
.key-visual {
	margin: 0;
	padding: 0; /* SP用のpaddingをリセット */
}

.key-visual .wrap {
	max-width: none; /* Override .wrap's max-width */
	padding-left: 40px;
	padding-right: 40px;
	position: relative;
	min-height: 420px; /* 高さを調整してパンくずリストとの距離を縮める */
	background-image: url('https://deepeditor.jp/wp-content/uploads/2025/07/h1-background-scaled.png');
	background-size: contain; /* coverからcontainに戻す */
	background-position: center center; /* bottomからcenterに戻す */
	background-repeat: no-repeat;
	background-color: #fff; /* containで余白ができる場合の背景色 */
	overflow: hidden;
	/* display:flex と align-items:flex-end は削除 */
}

.key-visual .page-title {
	/* 768px以上でabsolute配置にするための準備として、基本スタイルをリセット */
	padding: 0;
	margin: 0;
	color: #333;
	width: 100%;
}

.key-visual .sub-title {
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 20px;
	font-weight: 500;
	/* color: #0f58d5; */
	color: #aaa;
}

.key-visual .main-title {
	display: block;
	font-family: 'Oswald', sans-serif; /* DIN CondensedからOswaldに変更 */
	font-size: 96px; /* 文字サイズを少し小さくする */
	/* font-weight: 300;  */
	font-weight: 400;
	letter-spacing: 1.5px;
	line-height: 1;
	color: #000;
}

.key-visual-bg-sp {
	display: none; /* PC・タブレットでは非表示 */
}

/* =============================================
 * Responsive for Key Visual
 * ============================================= */

/* For Tablet (landscape) */
@media screen and (max-width: 1200px) {
	.key-visual .wrap {
		min-height: 30vw; /* 固定値360pxを削除 */
	}

	.key-visual .sub-title {
		font-size: 16px;
	}
	.key-visual .main-title {
		font-size: 64px;
	}
	.key-visual .page-title {
		padding: 0px 0px 40px 0px;
	}
}

/* For Tablet (portrait) */
@media screen and (max-width: 1023px) {
	.key-visual .wrap {
		min-height: 30vw; /* 固定値300pxを削除 */
	}
	.key-visual .page-title {
		/* absolute配置になるので不要なpaddingをリセット */
		padding: 0;
	}
	.key-visual .sub-title {
		font-size: 12px;
		margin-bottom: -8px;
	}
	.key-visual .main-title {
		font-size: 48px;
	}
}

/* For Mobile - with multiple breakpoints for fluid-like scaling */
@media screen and (max-width: 767px) {
	.key-visual {
		background-color: #fff;
	}
	.key-visual .wrap {
		position: relative;
		display: block;
		background-image: none;
		min-height: unset;
		line-height: 0;
		padding-left: 16px; /* Match mobile padding */
		padding-right: 16px; /* Match mobile padding */
	}
	.key-visual-bg-sp {
		display: block;
		width: 100%;
		height: auto;
	}
	.key-visual .page-title {
		position: absolute;
		bottom: 20px;
		width: auto;
		padding: 0;
		line-height: 1.2;
		box-sizing: border-box;
	}
	.key-visual .sub-title {
		font-size: 24px;
		margin-bottom: 4px;
	}
	.key-visual .main-title {
		font-size: 88px;
	}
}

@media screen and (max-width: 650px) {
	.key-visual .sub-title {
		font-size: 16px;
	}
	.key-visual .main-title {
		font-size: 72px;
	}
}

@media screen and (max-width: 540px) {
	.key-visual .page-title {
		bottom: 8px;
	}
}

@media screen and (max-width: 500px) {
	.key-visual .sub-title {
		font-size: 16px;
	}
	.key-visual .main-title {
		font-size: 60px;
	}
}

@media screen and (max-width: 420px) {
	.key-visual .sub-title {
		font-size: 12px;
	}
	.key-visual .main-title {
		font-size: 48px;
	}
}

/* =============================================
 * Hero section full-width override (desktop & tablet)
 * Ensures background spans edge-to-edge with 40px side gutters
 * For wide screens, centers the container instead of stretching.
 * ============================================= */
@media screen and (min-width: 768px) {
	.key-visual > .wrap {
		/* On standard desktops, use gutters */
		width: calc(100% - 80px);
		margin-left: 40px;
		margin-right: 40px;

		padding-left: 0;
		padding-right: 0;
	}

	.key-visual .wrap {
		/* 固定のmin-heightをやめ、vw単位でレスポンシブな高さを設定 */
		min-height: 30vw;
	}

	.key-visual .page-title {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 40px clamp(24px, 3vw, 40px) 40px; /* top, right, bottom, left */
		box-sizing: border-box;
	}
}

/* Wide screens (≥1441px): let background fill width */
@media screen and (min-width: 1441px) {
}

/* Wide screens ≥1441px – stretch image to full width without cropping */
@media screen and (min-width: 1441px) {
	.key-visual > .wrap {
		min-height: 30vw; /* approximate aspect ratio to avoid cropping */
	}
}

/* Page title padding for <1440px */
@media screen and (min-width: 1201px) and (max-width: 1440px) {
	.key-visual .page-title {
		padding: 0 0 40px 0;
	}
}

/* =============================================
 * Bottom-align page title to background (desktop & tablet)
 * ============================================= */
@media screen and (min-width: 768px) {
	.key-visual .page-title {
		position: absolute;
		bottom: 32px; /* distance from background bottom edge */
		left: 0;
		right: 0;
		padding: 0 40px; /* maintain side gutters */
		margin: 0; /* reset in case earlier rules add margins */
	}
}

/* =============================================
 * FIX: use flex-end + fluid padding instead of absolute positioning
 * to keep title always flush with background bottom.
 * ============================================= */
@media screen and (min-width: 768px) {
	.key-visual .page-title {
		position: static !important; /* revert to normal flow */
		bottom: auto !important; /* cancel absolute offset */
		padding: 0 0 clamp(24px, 3vw, 40px) 0 !important; /* fluid bottom gap */
	}
	/* make sure wrapper still aligns items to end */
	.key-visual .wrap {
		display: flex;
		align-items: flex-end;
	}
}

/* =============================================
 * Fluid typography for page title
 * ============================================= */
@media screen and (min-width: 768px) {
	.key-visual .sub-title {
		font-size: clamp(12px, 1.5vw, 20px); /* 16px → 20px */
	}
	.key-visual .main-title {
		font-size: clamp(48px, 6vw, 96px); /* 48px → 96px */
	}
	.key-visual .main-title.small{
		font-size: clamp(20px, 3.35vw, 96px); /* 48px → 96px */
		letter-spacing: -0.02em;
	}
}

/* =============================================
 * Align page title flush to background bottom (desktop & tablet)
 * ============================================= */
@media screen and (min-width: 768px) {
	.key-visual .wrap {
		background-position: center bottom !important; /* align bg bottom edge */
		display: flex;
		align-items: flex-end; /* keep children bottom-aligned */
	}
	.key-visual .page-title {
		padding-bottom: 0 !important; /* remove variable gap */
	}
}

/* =============================================
 * Offset page title slightly to avoid clipping (desktop & tablet)
 * ============================================= */
@media screen and (min-width: 768px) {
	.key-visual .page-title {
		margin-bottom: clamp(12px, 1.5vw, 20px) !important; /* small responsive offset */
	}
}

@media screen and (min-width: 768px) {
	.key-visual .page-title {
		/* Linear interpolation: 16px at 768px → 32px at 1440px, clamped outside range */
		margin-left: clamp(16px, calc(16px + (16 * (100vw - 768px) / 672)), 32px) !important;
	}
}

/* =============================================
 * Update fluid typography for mobile to reach
 * 350px→48px, 420px→56px, 500px→72px, 600px→80px, 750px→104px
 * and sub-title 420px→12px → up to 20px at 750px
 * ============================================= */
@media screen and (max-width: 767px) {
	.key-visual .main-title {
		font-size: clamp(48px, calc(-1px + 14vw), 104px) !important;
	}
	.key-visual .main-title.small{
		font-size: clamp(22px, calc(-1px + 7.5vw), 56px) !important;

	}
	.key-visual .sub-title {
		font-size: clamp(12px, calc(2px + 2.4vw), 20px) !important;
	}
}