@charset "utf-8";

/* FVを画面いっぱいに表示（PC・横向きのタブレット）
   文字と余白は画面の高さに合わせてなめらかに縮め、低い画面でもボタンを最初の画面に入れる。
   縦向きのタブレットは縦に積むレイアウト（rebrand.css）にするので、ここでは扱わない
----------------------------------------------------------- */

@media screen and ( min-width:1280px ), screen and ( min-width:761px ) and ( orientation:landscape ) {

	:root {
		--fv-hdr: clamp(68px, 10vh, 88px);
		--fv-pb: clamp(24px, 4.5vh, 64px);
		--fv-gap: clamp(12px, 2.5vh, 30px);
		--fv-gap-s: clamp(10px, 2.2vh, 22px);
		--fv-h1: clamp(30px, min(3.75vw, 5.8vh), 54px);
		--fv-lead: clamp(15px, 2.1vh, 18px);
		--fv-body: clamp(13.5px, 1.75vh, 15.5px);
		--fv-award-w: clamp(260px, 42vh, 440px);
		--fv-btn-h: clamp(50px, 7vh, 62px);
		--fv-h: 100vh;
		--fv-photo-h: clamp(420px, calc(100vh * .8 - 20px), 860px);
		--fv-wrap: min(1200px, calc(100% - 96px));
		--fv-col: 560px;
	}
	@supports (height: 100svh) {
		:root {
			--fv-h: 100svh;
			--fv-photo-h: clamp(420px, calc(100svh * .8 - 20px), 860px);
		}
	}

	.header_bg .inner.fv_header {
		width: var(--fv-wrap);
	}

	.eyecatch3 {
		display: flex;
		flex-direction: column;
		min-height: var(--fv-h);
		padding: 0;
		background:
			radial-gradient(42% 58% at 74% 50%, rgb(23 105 224 / 18%) 0%, rgb(23 105 224 / 0%) 72%),
			radial-gradient(30% 40% at 96% 8%, rgb(120 196 255 / 22%) 0%, rgb(120 196 255 / 0%) 70%),
			linear-gradient(180deg, #fff 0%, #f2f7ff 100%);
	}
	.eyecatch3 > .inner {
		flex: 1 0 auto;
		flex-wrap: nowrap;
		align-items: center;
		width: var(--fv-wrap);
		padding: calc(var(--fv-hdr) + var(--fv-gap)) 0 var(--fv-pb);
	}
	/* 既存サイトのCSSの回り込み解除（見えない「.」）が横並びの最後で1px場所を取るので、並びから外す */
	.eyecatch3 > .inner::after {
		position: absolute;
	}

	.eyecatch3 .eye_in_2 {
		z-index: 3;
		flex: 0 0 auto;
		width: var(--fv-col);
		padding-top: 0;
	}
	.eyecatch3 .eye_in_txt {
		min-width: 0;
	}

	/* 右の列：人物は下端に立たせ、見えている右端をコンテンツの右端（ヘッダーのボタンの右端と同じ線）にそろえる。
	   列より写真が広いときは縦横比を保ったまま縮め、右下に寄せる。記事のコラージュは右端まで色のまま見せる */
	.eyecatch3 .eye_img {
		align-self: stretch;
		flex: 1 1 auto;
		width: auto;
		padding: 0;
	}
	.eyecatch3 .eye_img .fir {
		position: absolute;
		z-index: 1;
		top: auto;
		right: 0;
		bottom: calc(var(--fv-pb) * -1);
		left: 0;
		width: auto;
		margin: 0;
	}
	/* 写真（fv_main.png）は右側の6.25%が透明なので、その分だけ右へずらし、腕の端を線に合わせる
	   （ずらした先は透明な部分だけで、画面の外には出ない） */
	.eyecatch3 .eye_img .fir img {
		display: block;
		width: auto;
		max-width: 100%;
		height: var(--fv-photo-h);
		margin-left: auto;
		object-fit: contain;
		object-position: 100% 100%;
		transform: translateX(6.25%);
	}
	/* コラージュは文字の列の右から始め、幅は右側の空きに合わせる（文字に重ならない）。
	   幅 = コンテンツの右端までの幅 − 文字の列 + 216px（画面の右へはみ出す分）。高さはヘッダーの下に収まる分まで */
	.eyecatch3 .eye_img .sec {
		top: auto;
		right: auto;
		bottom: calc(var(--fv-pb) * -1 + 3vh);
		left: 24px;
	}
	.eyecatch3 .eye_img .sec.fade_down {
		opacity: .85 !important;
	}
	.eyecatch3 .eye_img .sec img {
		width: min(1120px, calc((100vw + min(1200px, 100vw - 96px)) / 2 - var(--fv-col) + 216px), calc((var(--fv-h) - var(--fv-hdr) - 48px) * 1.558));
		max-width: none;
		height: auto;
		filter: blur(1.5px);
		-webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 16%);
		mask-image: linear-gradient(100deg, transparent 0%, #000 16%);
	}

}

/* 横向きの小さめの画面（761〜1023px）：文字の列を割合にし、人物は列の幅に収める
----------------------------------------------------------- */

@media screen and ( min-width:761px ) and ( max-width:1023px ) and ( orientation:landscape ) {

	:root {
		--fv-wrap: calc(100% - 64px);
		--fv-h1: clamp(28px, 4.2vw, 44px);
	}

	.eyecatch3 .eye_img .sec {
		left: 0;
	}
	.eyecatch3 .eye_img .sec img {
		width: calc(44vw + 260px);
	}
	.eyecatch3 .eye_in_2 {
		width: 56%;
	}
	.fv_sub br.pc {
		display: none;
	}
	.fv_cta_btns {
		flex-direction: column;
		align-items: stretch;
		max-width: 380px;
	}
	.fv_btn--main,
	.fv_btn--sub {
		min-width: 0;
	}

	/* 幅と高さの上限の中で縦横比を保って縮める。枠と写真の大きさが一致するので、右へのずらし幅が正しく効く */
	.eyecatch3 .eye_img .fir img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: var(--fv-photo-h);
	}

}

/* 高さの低い横向きの画面（横向きのスマホ、低く縮めたウィンドウなど）：
   詰めて組み、CTAをコピーのすぐ下に置いて最初の画面に入れる
----------------------------------------------------------- */

@media screen and ( min-width:761px ) and ( max-height:560px ) and ( orientation:landscape ) {

	:root {
		--fv-hdr: 56px;
		--fv-gap: 10px;
		--fv-gap-s: 8px;
		--fv-h1: clamp(22px, 6.3vh, 30px);
		--fv-lead: 14px;
		--fv-body: 13px;
		--fv-award-w: 240px;
		--fv-btn-h: 46px;
		--fv-photo-h: calc(100vh - 70px);
	}
	@supports (height: 100svh) {
		:root {
			--fv-photo-h: calc(100svh - 70px);
		}
	}

	.brand_logo img {
		height: 38px;
	}
	.fv_header_btn {
		height: 36px;
		padding: 0 16px;
		font-size: 12.5px;
	}

	.eyecatch3 .eye_in_2 {
		display: flex;
		flex-direction: column;
	}
	.eyecatch3 .eye_in_txt {
		order: 1;
	}
	.eyecatch3 .fv_cta {
		order: 2;
		margin-top: 12px;
	}
	.eyecatch3 .eye_in_2 .fv_award {
		order: 3;
		margin-top: 14px;
	}

	.fv_sub p {
		line-height: 1.65;
	}

	.fv_cta_micro {
		margin-bottom: 4px;
	}
	.fv_cta_btns {
		flex-direction: row;
		align-items: flex-end;
		max-width: none;
		gap: 10px;
	}
	.fv_cta_main {
		flex: 1 1 0;
		min-width: 0;
	}
	.fv_btn {
		padding: 0 16px;
		gap: 8px;
	}
	.fv_btn--main {
		min-width: 0;
		font-size: 15px;
	}
	.fv_btn--sub {
		flex: 1 1 0;
		min-width: 0;
		font-size: 14px;
	}
	.fv_cta_note {
		margin-top: 8px;
		font-size: 11.5px;
	}

}

/* 高さの低い横向きの画面のうち、幅が1023px以下のもの：文字の列が狭く、アイコンとチップの付いたボタンは横に2つ並ばないので、
   高さのある画面と同じく縦に並べる（相談のボタンの位置は変わらないので、最初の画面に入ったまま）
----------------------------------------------------------- */

@media screen and ( min-width:761px ) and ( max-width:1023px ) and ( max-height:560px ) and ( orientation:landscape ) {

	.fv_cta_btns {
		flex-direction: column;
		align-items: stretch;
		max-width: 380px;
	}
	.fv_cta_main,
	.fv_btn--sub {
		flex: none;
	}

}

/* 大きなモニター（幅2000px以上・高さ1000px以上）：コンテンツの幅と文字をひと回り大きく
----------------------------------------------------------- */

@media screen and ( min-width:2000px ) and ( min-height:1000px ) {

	:root {
		--fv-hdr: 100px;
		--fv-wrap: min(1440px, calc(100% - 160px));
		--fv-col: 660px;
		--fv-h1: clamp(30px, min(3.2vw, 5.8vh), 64px);
		--fv-lead: 20px;
		--fv-body: 17px;
		--fv-award-w: 520px;
		--fv-btn-h: 68px;
		--fv-photo-h: clamp(420px, calc(100vh * .8 - 20px), 1000px);
	}
	@supports (height: 100svh) {
		:root {
			--fv-photo-h: clamp(420px, calc(100svh * .8 - 20px), 1000px);
		}
	}

	.brand_logo img {
		height: 64px;
	}
	.fv_header_btn {
		height: 50px;
		padding: 0 28px;
		font-size: 15px;
	}

	.fv_lead_in {
		font-size: 17px;
	}
	.fv_lead_in::before {
		width: 44px;
	}
	.fv_cta_micro {
		font-size: 15px;
	}
	.fv_btn--main {
		min-width: 330px;
		font-size: 19px;
	}
	.fv_btn--sub {
		min-width: 270px;
		font-size: 17px;
	}
	.fv_cta_note {
		font-size: 14px;
	}

	.eyecatch3 .eye_img .sec img {
		width: min(1400px, calc((100vw + min(1440px, 100vw - 160px)) / 2 - var(--fv-col) + 216px), calc((var(--fv-h) - var(--fv-hdr) - 48px) * 1.558));
	}

}