@media(max-width:640px){
.kjn-front .kjn-hero{padding:22px 0 26px}.kjn-front .kjn-hero__grid{display:flex;align-items:stretch;gap:16px;flex-direction:column}.kjn-front .kjn-hero__copy{display:contents}.kjn-front .kjn-herofig{order:-1;width:58%;max-width:320px;margin:0 auto}.kjn-front .kjn-kicker{order:0;margin:0!important;font-size:12px;letter-spacing:.03em}.kjn-front .kjn-hero h1{order:1;font-size:24px;line-height:1.5}.kjn-front .kjn-herosub{order:2;max-width:none;margin:0;font-size:13px;line-height:1.85}.kjn-front .kjn-herocta{order:3;width:100%;margin:4px 0 0;align-items:center;gap:9px}.kjn-front .kjn-herocta .kjn-btn{width:100%;min-height:52px;padding:6px 16px;font-size:16px}.kjn-front .kjn-herocta .kjn-btn>img,.kjn-front .kjn-herocta .kjn-free{display:none}.kjn-front .kjn-herocta .kjn-btn__text small{display:block;position:absolute;top:calc(100% + 8px);color:var(--kjn-gray);font-size:11px}.kjn-front .kjn-herocta>a:last-child{margin-top:28px;align-self:center;font-size:12.5px}
.kjn-front .kjn-section{padding:34px 0}.kjn-front .kjn-sectionhead{margin-bottom:20px}.kjn-front .kjn-sectionhead h2{font-size:20px}.kjn-front .kjn-cardgrid{gap:16px}.kjn-front .kjn-cardgrid .kjn-acard:nth-child(n+5){display:none}
.kjn-front .kjn-catgrid{gap:10px}.kjn-front .kjn-catgrid>a{min-height:0;padding:12px 14px;gap:12px}.kjn-front .kjn-caticon{width:50px;height:50px}.kjn-front .kjn-caticon img{width:42px;height:28px}.kjn-front .kjn-catbody strong{font-size:14px}.kjn-front .kjn-catbody>span{margin-top:2px;font-size:11px}.kjn-front .kjn-catbody small{margin-top:3px;font-size:10px}
.kjn-front .kjn-popular{display:flex;gap:14px;flex-direction:column}.kjn-front .kjn-popular a{padding:0;align-items:center;flex-direction:row;gap:12px}.kjn-front .kjn-popular a+a{padding-top:0;border:0}.kjn-front .kjn-popimg{width:96px;flex:none}.kjn-front .kjn-popimg b{left:0;right:auto;width:24px;height:24px;border-radius:8px 0 8px 0;font-size:12px}.kjn-front .kjn-popular strong{margin:0;font-size:13px;line-height:1.55}.kjn-front .kjn-popular small{margin-top:5px;font-size:10.5px}
.kjn-front .kjn-wpgrid{gap:14px}.kjn-front .kjn-wpgrid>a{min-height:0;flex-direction:column;border-radius:14px}.kjn-front .kjn-wpvisual,.kjn-front .kjn-wpgrid>a:nth-child(2) .kjn-wpvisual{width:100%;padding:18px;background:var(--kjn-pale)}.kjn-front .kjn-wpvisual img{height:74px}.kjn-front .kjn-wpbody{padding:16px;align-items:stretch}.kjn-front .kjn-wpbody small{font-size:11.5px}.kjn-front .kjn-wpbody strong{font-size:16px}.kjn-front .kjn-wpbody i{width:100%;margin-top:14px;padding:11px}
.kjn-front .kjn-ctaband{padding:30px 0;text-align:center}.kjn-front .kjn-ctaband>.kjn-wrap{align-items:stretch;gap:20px}.kjn-front .kjn-ctaband p{margin-bottom:10px;font-size:12.5px}.kjn-front .kjn-ctaband h2{font-size:19px;line-height:1.55}.kjn-front .kjn-ctapills{margin:16px 0 0;justify-content:center;flex-direction:row;gap:8px}.kjn-front .kjn-ctapills span{padding:5px 13px;font-size:11px}.kjn-front .kjn-pc-label{display:none}.kjn-front .kjn-sp-label{display:inline}.kjn-front .kjn-ctaband>.kjn-wrap>div>small{display:none}.kjn-front .kjn-cta-actions{margin-top:0}.kjn-front .kjn-cta-actions .kjn-btn:first-child{min-height:72px;color:var(--kjn-blue)!important;background:#fff;border-color:#fff;box-shadow:none;font-size:24px}.kjn-front .kjn-cta-actions .kjn-btn:first-child:hover{color:#fff!important;background:var(--kjn-blue)}.kjn-front .kjn-cta-actions .kjn-btn:first-child>img{display:block;height:58px}.kjn-front .kjn-cta-actions .kjn-btn:first-child .kjn-free{display:none}.kjn-front .kjn-cta-actions .kjn-btn:nth-child(2){display:none}.kjn-front .kjn-cta-chevron{display:inline-block;width:11px;height:11px}
.kjn-front .kjn-faqs article{border:2px solid #a1c3e5;box-shadow:none}.kjn-front .kjn-faqs button{padding:14px 16px}.kjn-front .kjn-faqs button img{display:none}.kjn-front .kjn-faqs button strong{font-size:13.5px}.kjn-front .kjn-faqs article p{padding-left:16px;font-size:13px}.kjn-front .kjn-faqs article[open] p{padding-right:16px}.kjn-front .kjn-faqs button span{font-size:22px}.kjn-front .kjn-faqs article[open] button span:after{font-size:22px}
.kjn-front .kjn-hero__grid{gap:12px}.kjn-front .kjn-herofig{order:1;width:86%;max-width:320px;margin:0 auto}.kjn-front .kjn-hero h1{order:2}.kjn-front .kjn-herosub{order:3}.kjn-front .kjn-herocta{order:4;margin-top:6px}
.kjn-front .kjn-popular{gap:16px}.kjn-front .kjn-popular a{overflow:hidden;align-items:stretch;flex-direction:column;gap:0;background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000024}.kjn-front .kjn-popimg{width:100%;border-radius:0}.kjn-front .kjn-popimg b{right:0;left:auto;width:32px;height:32px;border-radius:0 0 0 8px;font-size:13px}.kjn-front .kjn-popbody{padding:14px 16px 16px;flex:1}.kjn-front .kjn-popular strong{font-size:14.5px;line-height:1.6}.kjn-front .kjn-popular small{margin-top:8px;font-size:11px}.kjn-front .kjn-cta-actions .kjn-btn:first-child{border-radius:16px}
}

/* 横長の写真の左右の空に、見出しと相談（左）・資料請求フォーム（右）を置くFV。指定はこのFVの内側に限定する。 */
.kjn-front .kjn-hero--sky {
	position: relative;
	display: flex;
	min-height: 560px;
	padding: 0;
	align-items: center;
	background: var(--kjn-pale);
}

.kjn-front .kjn-hero--sky .kjn-hero__photo {
	position: absolute;
	inset: 0;
	display: block;
}

.kjn-front .kjn-hero--sky .kjn-hero__photo > img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 50% 70%;
}

.kjn-front .kjn-hero--sky .kjn-hero__inner {
	position: relative;
	display: flex;
	width: 100%;
	padding: 40px 72px 40px 0;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.kjn-front .kjn-hero--sky .kjn-hero__copy {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 28px;
}

.kjn-front .kjn-hero--sky .kjn-hero__heading {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
}

/* 既存のスマートフォン用指定がh1の表示順を変えるため、順序を明示する。 */
.kjn-front .kjn-hero--sky .kjn-hero__heading > .kjn-hero__title {
	order: 0;
}

.kjn-front .kjn-hero--sky .kjn-hero__heading > .kjn-hero__lead {
	order: 1;
}

/* 見出しは1行ずつ白帯に載せ、画面の左端から出す。 */
.kjn-front .kjn-hero--sky .kjn-hero__title {
	display: flex;
	margin: 0;
	padding: 0;
	align-items: flex-start;
	flex-direction: column;
	gap: 10px;
	color: var(--kjn-dark);
	font-size: clamp(32px, 3.194444vw, 46px);
	font-weight: 700;
	line-height: 1.391304;
	letter-spacing: 0;
}

.kjn-front .kjn-hero--sky .kjn-hero__title > span {
	display: block;
	padding: 6px 28px 6px 72px;
	background: #fff;
}

/* サブコピーは紺の細い帯にし、見出しより一段弱くする。 */
.kjn-front .kjn-hero--sky .kjn-hero__lead {
	max-width: none;
	margin: 20px 0 0;
	padding: 8px 24px 8px 72px;
	color: #fff;
	background: var(--kjn-dark);
	font-size: 16px;
	font-weight: 700;
	line-height: 26px;
}

.kjn-front .kjn-hero--sky .kjn-hero__consult {
	position: relative;
	align-self: flex-start;
	margin-left: 72px;
	padding-top: 12px;
}

.kjn-front .kjn-hero--sky .kjn-hero__bubble {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 10px;
	color: var(--kjn-dark);
	background: var(--kjn-yellow);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
	/* ボタンに重なる部分を押してもボタンが反応するようにする */
	pointer-events: none;
}

.kjn-front .kjn-hero--sky .kjn-hero__primary {
	display: inline-flex;
	min-width: 300px;
	min-height: 68px;
	padding: 0 32px;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: #fff;
	background: var(--kjn-orange);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
}

.kjn-front .kjn-hero--sky .kjn-hero__primary:hover {
	color: #fff;
	background: var(--kjn-orange-dark);
	opacity: 1;
}

/* 資料請求フォーム。送信すると資料ダウンロードの画面へ入力内容を引き継ぐ。 */
.kjn-front .kjn-hero--sky .kjn-hero__form {
	display: flex;
	width: 344px;
	flex: none;
	padding: 22px 24px;
	flex-direction: column;
	gap: 14px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgb(0 38 77 / 18%);
}

.kjn-front .kjn-hero--sky .kjn-hero__form h2 {
	margin: 0;
	padding: 0;
	color: var(--kjn-dark);
	background: none;
	border: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 26px;
}

.kjn-front .kjn-hero--sky .kjn-hero__form h2::before,
.kjn-front .kjn-hero--sky .kjn-hero__form h2::after {
	content: none;
}

.kjn-front .kjn-hero--sky .kjn-hero__doc {
	display: flex;
	align-items: center;
	gap: 12px;
}

.kjn-front .kjn-hero--sky .kjn-hero__doc > img {
	width: 34px;
	height: 47px;
	flex: none;
	border: 1px solid var(--kjn-line);
}

.kjn-front .kjn-hero--sky .kjn-hero__doc p {
	display: flex;
	margin: 0;
	flex-direction: column;
	gap: 2px;
}

.kjn-front .kjn-hero--sky .kjn-hero__doc strong {
	color: var(--kjn-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
}

.kjn-front .kjn-hero--sky .kjn-hero__doc span {
	color: var(--kjn-gray);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}

.kjn-front .kjn-hero--sky .kjn-hero__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 10px;
}

.kjn-front .kjn-hero--sky .kjn-hero__fields label {
	display: flex;
	min-width: 0;
	margin: 0;
	flex-direction: column;
	gap: 4px;
}

.kjn-front .kjn-hero--sky .kjn-hero__fields label.is-full {
	grid-column: 1 / -1;
}

.kjn-front .kjn-hero--sky .kjn-hero__fields label > span {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--kjn-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
}

.kjn-front .kjn-hero--sky .kjn-hero__fields b {
	color: var(--kjn-orange-dark);
	font-size: 10px;
	font-weight: 500;
	line-height: 14px;
}

.kjn-front .kjn-hero--sky .kjn-hero__fields input {
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	color: var(--kjn-ink);
	background: #fff;
	border: 1px solid #c9ced6;
	border-radius: 4px;
	box-shadow: none;
	font-size: 14px;
}

.kjn-front .kjn-hero--sky .kjn-hero__fields input:focus-visible {
	border-color: var(--kjn-blue);
	outline: 2px solid var(--kjn-blue);
	outline-offset: 0;
}

.kjn-front .kjn-hero--sky .kjn-hero__form button,
.kjn-front .kjn-hero--sky .kjn-hero__docbtn {
	display: flex;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 16px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #fff;
	background: var(--kjn-dark);
	border: 0;
	border-radius: 6px;
	box-shadow: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
}

.kjn-front .kjn-hero--sky .kjn-hero__form button:hover,
.kjn-front .kjn-hero--sky .kjn-hero__docbtn:hover {
	color: #fff;
	background: #00305f;
	opacity: 1;
}

.kjn-front .kjn-hero--sky .kjn-hero__formnote {
	margin: -4px 0 0;
	color: var(--kjn-gray);
	font-size: 11px;
	font-weight: 500;
	line-height: 17px;
}

.kjn-front .kjn-hero--sky :is(.kjn-hero__primary, .kjn-hero__form button, .kjn-hero__docbtn):focus-visible {
	outline: 3px solid var(--kjn-dark) !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 6px #fff;
}

.kjn-front .kjn-hero--sky .kjn-hero__doccard {
	display: none;
}

/* 1441px以上：コピーとフォームを中央へ寄せ、左右の余白を広げる。
   余白は「1440px幅の配置を中央に置いた位置」と「拡大される人物に重ならない位置」の小さいほう。
   白帯と紺帯は画面の左端から出したまま、文字の開始位置だけを内側へずらす。 */
@media (min-width: 1441px) {
	/* 高さを幅に合わせて伸ばし、写真の切り抜きを1440px幅のときに近づける（人物が拡大されて帯の裏に入るのを防ぐ）。 */
	.kjn-front .kjn-hero--sky {
		min-height: clamp(560px, 38.888889vw, 720px);
		container-type: inline-size;
	}
	.kjn-front .kjn-hero--sky .kjn-hero__inner {
		padding-right: min(50cqw - 648px, 40cqw - 480px);
	}
	/* 旧FVの指定（最大幅560px）が残っているため、帯が伸びる分だけ広げる。 */
	.kjn-front .kjn-hero--sky .kjn-hero__copy {
		max-width: none;
	}
	.kjn-front .kjn-hero--sky .kjn-hero__title > span,
	.kjn-front .kjn-hero--sky .kjn-hero__lead {
		padding-left: min(50cqw - 648px, 40cqw - 480px);
	}
	.kjn-front .kjn-hero--sky .kjn-hero__consult {
		margin-left: min(50cqw - 648px, 40cqw - 480px);
	}
}

/* 1600px以上（大きいモニター）：帯を画面の左端から出さず、文字の手前28pxから始める。
   相談ボタンの左端も帯の左端にそろえる。 */
@media (min-width: 1600px) {
	.kjn-front .kjn-hero--sky :is(.kjn-hero__heading, .kjn-hero__consult) {
		margin-left: calc(min(50cqw - 648px, 40cqw - 480px) - 28px);
	}
	.kjn-front .kjn-hero--sky .kjn-hero__title > span,
	.kjn-front .kjn-hero--sky .kjn-hero__lead {
		padding-left: 28px;
	}
}

/* 1152〜1279px：横並びのまま、写真の高さ・余白・フォーム幅を詰めて人物をコピーとフォームの間に収める。
   右端の固定タブ（補助金活用ガイド）と重ならないよう、右の余白は56pxにする。 */
@media (min-width: 1152px) and (max-width: 1279px) {
	.kjn-front .kjn-hero--sky {
		min-height: 480px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__photo > img {
		object-position: 25% 70%;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__inner {
		padding: 32px 56px 32px 0;
		gap: 24px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__title > span {
		padding-left: 40px;
		padding-right: 24px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__lead {
		padding-left: 40px;
		font-size: 15px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__consult {
		margin-left: 40px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__primary {
		min-width: 272px;
		min-height: 60px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__form {
		width: 300px;
		padding: 18px 20px;
		gap: 12px;
	}
}

/* 1151px以下：写真の上の空に見出しを置き、下に資料カードと相談ボタンを縦に並べる。
   これより狭いと、フォームが人物にかかり、右端の固定タブとも重なるため。 */
@media (max-width: 1151px) {
	.kjn-front .kjn-hero--sky {
		display: grid;
		min-height: 0;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		background: #fff;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__photo {
		position: relative;
		inset: auto;
		grid-row: 1;
		grid-column: 1;
		width: 100%;
		height: clamp(400px, 42vw, 560px);
	}

	/* 写真を左端基準で切り抜き、人物を見出しより右に保つ。 */
	.kjn-front .kjn-hero--sky .kjn-hero__photo > img {
		object-position: 0% 60%;
	}

	.kjn-front .kjn-hero--sky :is(.kjn-hero__inner, .kjn-hero__copy) {
		display: contents;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__heading {
		position: relative;
		grid-row: 1;
		grid-column: 1;
		padding-top: 28px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__title {
		gap: 8px;
		font-size: clamp(22px, 7.179487vw, 34px);
		line-height: 40px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__title > span {
		padding: 4px 16px 4px 24px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__lead {
		margin-top: 12px;
		padding: 6px 16px 6px 24px;
		font-size: 14px;
		line-height: 22px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__form {
		display: none;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__doccard {
		display: flex;
		grid-row: 2;
		justify-self: center;
		margin: 24px 0 0;
		padding: 16px;
		flex-direction: column;
		gap: 12px;
		background: #fff;
		border: 1px solid var(--kjn-line);
		border-radius: 8px;
	}

	.kjn-front .kjn-hero--sky :is(.kjn-hero__doccard, .kjn-hero__consult) {
		width: calc(100% - 48px);
		max-width: 560px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__doccard-title {
		margin: 0;
		color: var(--kjn-dark);
		font-size: 16px;
		font-weight: 700;
		line-height: 24px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__docbtn {
		min-height: 52px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__consult {
		grid-row: 3;
		justify-self: center;
		margin: 12px 0 24px;
		align-self: stretch;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__primary {
		display: flex;
		width: 100%;
		min-width: 0;
	}
}

/* 768〜1151px：相談ボタンは写真の上（サブコピーの下）に残し、資料カードだけを写真の下の中央に置く。
   767px以下（スマートフォン用の写真）では、資料カードの下へ移す。 */
@media (min-width: 768px) and (max-width: 1151px) {
	.kjn-front .kjn-hero--sky .kjn-hero__copy {
		position: relative;
		display: flex;
		grid-row: 1;
		grid-column: 1;
		align-self: start;
		padding-top: 28px;
		flex-direction: column;
		gap: 20px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__heading {
		padding-top: 0;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__consult {
		width: auto;
		margin: 0 0 0 24px;
		justify-self: auto;
		align-self: flex-start;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__primary {
		display: inline-flex;
		width: auto;
		min-width: 300px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__doccard {
		margin-bottom: 32px;
	}
}

/* 767px以下：スマートフォン用に切り抜いた縦長の写真を使う。 */
@media (max-width: 767px) {
	.kjn-front .kjn-hero--sky .kjn-hero__photo {
		height: auto;
		max-height: 680px;
		aspect-ratio: 390 / 420;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__photo > img {
		object-position: 50% 90%;
	}
}

@media (max-width: 360px) {
	.kjn-front .kjn-hero--sky .kjn-hero__lead {
		font-size: 13px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__doccard {
		padding: 14px 12px;
	}

	.kjn-front .kjn-hero--sky .kjn-hero__doc strong {
		font-size: 12px;
	}
}

/* FVを含む主要CTAは、元のヘッダーのオレンジを使う。 */
.home.kjn-site .kjn-btn.kjn-btn--orange {
	color: #fff !important;
	background: var(--kjn-orange);
	border-color: var(--kjn-orange);
	box-shadow: none;
}

.home.kjn-site .kjn-btn.kjn-btn--orange:hover {
	color: #fff !important;
	background: var(--kjn-orange-dark);
	border-color: var(--kjn-orange-dark);
	opacity: 1;
}

.home.kjn-site .kjn-btn.kjn-btn--orange:focus-visible {
	outline: 3px solid var(--kjn-dark) !important;
	outline-offset: 4px !important;
	box-shadow: 0 0 0 6px #fff;
}

/* 装飾のイラストを外し、ラベルと右側の矢印で案内する。 */
.home.kjn-site :is(.kjn-header, .kjn-footer, .kjn-fixbar, .kjn-cta-actions) .kjn-btn--orange > img {
	display: none;
}

@media (max-width: 360px) {
	.home.kjn-site .kjn-header .kjn-logo__image {
		width: 150px;
	}

	.home.kjn-site .kjn-headactions .kjn-btn--orange {
		min-width: 120px;
		gap: 8px;
		white-space: nowrap;
	}
}

/* 注目の記事は6本を3列×2行で出す。2行目の先頭に縦線が付かないようにし、行の間を空ける。 */
@media (min-width: 641px) {
	.kjn-front .kjn-popular {
		row-gap: 32px;
	}

	.kjn-front .kjn-popular a:nth-child(3n+1) {
		border-left: 0;
	}
}