@charset "UTF-8";


	
	
/* トップはFVのキャッチが先頭に来るので、ヘッダーの下罫線を出さない
   （固定ヘッダーの border-bottom がキャッチの真上に線として見えるため） */
body.home #header {
	border-bottom: none;
}

/* fv
--------------------- */
#fv {
	padding-top: calc(150 * var(--vw-ratio));
	overflow: hidden;
	position: relative;
}
	#fv .text {
		margin-bottom: calc(10 * var(--vw-ratio));
		position: relative;
	}
		#fv .text .catch {
			/* 2行目が長いので64。80だと右上の英文まで44pxしか残らない */
			font-size: calc(64 * var(--vw-ratio));
			font-weight: 700;
			margin-bottom: calc(30 * var(--vw-ratio));
		}
			/* 「×」の左右。半角スペースだと 0.5em ずつで開きすぎるので詰める */
			#fv .text .catch .x {
				margin: 0 0.28em;
			}

			#fv .text .catch .catch-txt {
				display: block;
				line-height: 1.15;
				border-bottom: solid 1px #DDDFE0;
			}
				/* 1行目と2行目は1つのキャッチなので、間の線は引かない */
				#fv .text .catch .catch-txt:first-child {
					border-bottom: none;
				}

		#fv .text .txt-18 {
			color: #989C9F;
			/* 2行を詰めて、下の行がキャッチ下の罫線に接するように下端で揃える。
			   キャッチ2行の高さ 64 × 1.15 × 2 ＝ 147.2
			   英文2行の高さ     24 × 2         ＝  48
			   差の 99.2 を top に置くと、英文の下端が罫線の位置に来る。
			   キャッチの文字サイズを変えたら、この計算をやり直すこと */
			line-height: calc(24 * var(--vw-ratio));
			position: absolute;
			top: calc(99.2 * var(--vw-ratio));
			right: 0;
			z-index: 2;
		}

		#fv .text h3 {
			font-size: calc(30 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1.5em;
			margin-bottom: calc(40 * var(--vw-ratio));
		}

		#fv .text .btn-scroll {
			width: calc(230 * var(--vw-ratio));
		}
			#fv .text .btn-scroll a {
				display: block;
				height: calc(50 * var(--vw-ratio));
				border-radius: calc(25 * var(--vw-ratio));
				border: solid 1px #ddd;
				background: #fff url("../img/icon_arrow_down_blue.svg") no-repeat right calc(25 * var(--vw-ratio)) center / calc(11 * var(--vw-ratio));
				padding: 0 calc(25 * var(--vw-ratio));
				line-height: calc(50 * var(--vw-ratio));
				font-weight: 500;
			}
			#fv .text .btn-scroll a:hover {
				color: #fff;
				background: #00053A url("../img/icon_arrow_down_white.svg") no-repeat right calc(25 * var(--vw-ratio)) center / calc(11 * var(--vw-ratio));
			}

	#fv .cta-btn-list {
		position: absolute;
		bottom: calc(10 * var(--vw-ratio));
		right: calc(60 * var(--vw-ratio));
		z-index: 2;
	}
	/* FVのCTAは最初から表示する（2026-10-19）。
	   aniTrigger は window load 後に1秒フェードするため、スマホ4Gでページ描画から約2秒ボタンが無かった */
	#fv .cta-btn-list.aniTrigger,
	#fv .cta-btn-list.ani {
		opacity: 1;
		animation: none;
		filter: none;
		transform: none;
	}

	#fv .wave canvas{
		width: 100%;
	}
@media screen and (max-width: 767px) {
	#fv {
		padding-top: calc(60 * var(--vw-ratio));
	}
		#fv .text {
			margin-bottom: calc(10 * var(--vw-ratio));
		}
			#fv .text .catch {
				/* 44→36。1行目「AI × マーケティング」が375pxで入る上限は38だが余白11pxと際どいため36 */
				font-size: calc(36 * var(--vw-ratio));
				margin-bottom: calc(15 * var(--vw-ratio));
			}
				#fv .text .catch .catch-txt {
					padding: calc(14 * var(--vw-ratio)) 0;
					line-height: 1.25;   /* 2行目がSPで2行になるため */
				}
					/* 1行目と2行目を離さない（元は上下14ずつで28px空いていた） */
					#fv .text .catch .catch-txt:first-child {
						padding-bottom: calc(2 * var(--vw-ratio));
					}
					#fv .text .catch .catch-txt:last-child {
						padding-top: calc(2 * var(--vw-ratio));
					}

			#fv .text .txt-18 {
				font-size: calc(14 * var(--vw-ratio));
				line-height: 1.3em;
				position: static;
				margin-bottom: calc(30 * var(--vw-ratio));
			}

			#fv .text h3 {
				/* 18だと2行目が1文字だけ溢れるため17 */
				font-size: calc(17 * var(--vw-ratio));
				font-weight: 700;
				line-height: 1.7em;
				margin-bottom: calc(25 * var(--vw-ratio));
			}

			#fv .text .btn-scroll {
				width: 60%;
				margin-bottom: calc(35 * var(--vw-ratio));
			}

		#fv .cta-btn-list {
			position: static;
			width: -webkit-calc(100% - calc(50 * var(--vw-ratio)));
			width: calc(100% - calc(50 * var(--vw-ratio)));
			margin: 0 auto;
		}

		#fv .wave{
			margin-top: calc(-80 * var(--vw-ratio));
			position: relative;
			z-index: -1;
		}
}


	
	
/* about
--------------------- */
/* 2カラムの上に置くリード。カラムの外に出しているので、
   右カラムの上端が「まず、事業を知る。」に揃う */
#about .lead {
	margin-bottom: calc(18 * var(--vw-ratio));
}
	#about .lead .lead-ja {
		font-size: calc(38 * var(--vw-ratio));   /* h2 と同じ */
		font-weight: 700;
		line-height: 1.4em;
		margin-bottom: calc(6 * var(--vw-ratio));
	}

#about .headtit h2 {
	font-size: calc(38 * var(--vw-ratio));
	font-weight: 700;
	line-height: 1.4em;
	margin-bottom: calc(20 * var(--vw-ratio));
}

#about .en {
	color: #989C9F;
	font-weight: 400;
}

#about .text {
	width: 55%;
}
	#about .text .txt-18 {
		margin-bottom: calc(20 * var(--vw-ratio));
	}

	#about .text ul.tag li {
		margin-top: calc(15 * var(--vw-ratio));
		margin-right: calc(10 * var(--vw-ratio));
		border-radius: calc(4 * var(--vw-ratio));
		padding: calc(6 * var(--vw-ratio)) calc(8 * var(--vw-ratio));
		font-weight: 500;
		line-height: 1;
	}
@media screen and (max-width: 767px) {
	#about {
		margin-top: calc(-80 * var(--vw-ratio));
	}
	#about .inner {
		display: block;
	}
		#about .lead {
			margin-bottom: calc(10 * var(--vw-ratio));
		}
			#about .lead .lead-ja {
				font-size: calc(30 * var(--vw-ratio));   /* h2 と同じ */
				line-height: 1.4em;
				margin-bottom: calc(4 * var(--vw-ratio));
			}
			/* 下の英文には余白30が付くが、リード側は .lead 側で持つので消す */
			#about .lead .en {
				margin-bottom: 0;
			}

		#about .headtit h2 {
			font-size: calc(30 * var(--vw-ratio));
			margin-bottom: calc(15 * var(--vw-ratio));
		}

		#about .en {
			font-size: calc(12 * var(--vw-ratio));
			line-height: 1.5em;
			font-weight: 400;
			margin-bottom: calc(30 * var(--vw-ratio));
		}

		#about .text {
			width: 100%;
		}
			#about .text .txt-18 {
				font-size: calc(16 * var(--vw-ratio));
				line-height: 1.8em;
				margin-bottom: calc(15 * var(--vw-ratio));
			}

			#about .text ul.tag li {
				margin-top: calc(10 * var(--vw-ratio));
			}
}


	
	
/* service
--------------------- */
#service .list {
	position: relative;
}
	#service .list .service-pht {
		width: 100%;
		position: sticky;
		top: calc(200 * var(--vw-ratio));
		left: 0;
		z-index: 0;
		height: 0;
	}
	#service .list .service-pht.is-stop {
		position: absolute;
	}

	#service .list .service-pht .thumbnail {
		width: calc(446 * var(--vw-ratio));
		border-radius: 50%;
		overflow: hidden;
		margin: 0 auto;
		opacity: 0;
		visibility: hidden;
		transform: scale(0.85);
		transform-origin: center center;
		transition:
			transform .6s cubic-bezier(.22, 1, .36, 1),
			opacity .3s ease,
			visibility 0s linear .6s;
	}

	#service .list .service-pht .thumbnail.is-show {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
		transition:
			transform .6s cubic-bezier(.22, 1, .36, 1),
			opacity .3s ease;
	}
			#service .list .service-pht .thumbnail img {
				display: block;
				width: 100%;
				height: auto;
			}


	#service .list .cont {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: calc(150 * var(--vw-ratio)) 0;
	}
		#service .list .cont .pht {
			display: none;
		}

		#service .list .cont .head .ttl {
			font-size: calc(50 * var(--vw-ratio));
			font-weight: 500;
			line-height: 1;
			margin-bottom: calc(13 * var(--vw-ratio));
			position: relative;
		}
			#service .list .cont .head .ttl span {
				display: block;
				text-align: right;
				line-height: 1;
				position: absolute;
				top: calc(7 * var(--vw-ratio));
				left: calc(-22 * var(--vw-ratio));
			}

		#service .list .cont .head h3 {
			font-weight: 700;
			line-height: 1;
			margin-bottom: calc(30 * var(--vw-ratio));
		}

		#service .list .cont .text {
			width: calc(330 * var(--vw-ratio));
		}
			#service .list .cont .text h4 {
				font-size: calc(32 * var(--vw-ratio));
				font-weight: 700;
				line-height: 1.1em;
				margin-bottom: calc(15 * var(--vw-ratio));
			}
				#service .list .cont .text h4 span {
					font-size: calc(22 * var(--vw-ratio));
				}
@media screen and (max-width: 767px) {
	#service .list {
		margin-top: calc(60 * var(--vw-ratio));
	}
		#service .list .service-pht {
			display: none;
		}


		#service .list .cont {
			display: block;
			padding: 0;
			margin-bottom: calc(60 * var(--vw-ratio));
		}
		#service .list .cont:nth-last-child(1) {
			margin-bottom: 0;
		}
			#service .list .cont .pht {
				display: block;
				width: 100%;
				height: 100%;
				aspect-ratio: 16 / 9;
				overflow: hidden;
				border-radius: calc(5 * var(--vw-ratio));
				margin-top: calc(-25 * var(--vw-ratio));
				position: relative;
				z-index: -1;
			}
				#service .list .cont .pht img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

			#service .list .cont .head .ttl {
				font-size: calc(34 * var(--vw-ratio));
				text-align: center;
				margin-bottom: calc(10 * var(--vw-ratio));
			}
				#service .list .cont .head .ttl span {
					display: none;
				}

			#service .list .cont .head h3 {
				text-align: center;
				margin-bottom: calc(20 * var(--vw-ratio));
			}

			#service .list .cont .head .btn {
				margin: 0 auto;
			}

			#service .list .cont .text {
				width: 100%;
				padding: calc(15 * var(--vw-ratio)) calc(25 * var(--vw-ratio)) 0 calc(25 * var(--vw-ratio));
			}
				#service .list .cont .text h4 {
					font-size: calc(26 * var(--vw-ratio));
					margin-bottom: calc(12 * var(--vw-ratio));
					text-align: center;
				}
					#service .list .cont .text h4 span {
						font-size: calc(16 * var(--vw-ratio));
					}

				#service .list .cont .text .txt-16 {
					line-height: 1.8em;
				}
}


	
	
/* related
--------------------- */
#related .column2 {
	border-top: solid 1px #DDDFE0;
}
	#related .column2 .title {
		border-top: none;
		position: sticky;
		top: calc(70 * var(--vw-ratio));
		left: 0;
	}

	#related .column2 .list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(40 * var(--vw-ratio));
		row-gap: calc(40 * var(--vw-ratio));
		width: calc(920 * var(--vw-ratio));
		margin-top: calc(80 * var(--vw-ratio));
	}
		#related .column2 .list .box {
			padding: calc(40 * var(--vw-ratio));
			position: relative;
		}
			#related .column2 .list .box .number {
				line-height: 1;
				position: absolute;
				top: calc(10 * var(--vw-ratio));
				right: calc(10 * var(--vw-ratio));
			}

			#related .column2 .list .box h3 {
				line-height: 1.3em;
			}

			#related .column2 .list .box .head {
				margin-bottom: calc(15 * var(--vw-ratio));
			}
@media screen and (max-width: 767px) {
	#related .column2 {
		display: block;
	}
		#related .column2 .title {
			border-top: none;
			position: sticky;
			top: calc(70 * var(--vw-ratio));
			left: 0;
		}

		#related .column2 .list {
			display: block;
			width: 100%;
			margin-top: 0;
		}
			#related .column2 .list .box {
				padding: calc(30 * var(--vw-ratio));
				margin-bottom: calc(20 * var(--vw-ratio));
			}
			#related .column2 .list .box:nth-last-child(1) {
				margin-bottom: 0;
			}
}


	
	
/* client
--------------------- */
#client {
	width: 100%;
	overflow: hidden;
}
	#client .ttl {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: calc(40 * var(--vw-ratio));
	}
		#client .ttl h2 {
			font-size: calc(100 * var(--vw-ratio));
			font-weight: 400;
			color: #EFEFEF;
			line-height: 1;
		}

		#client .ttl p {
			font-size: calc(24 * var(--vw-ratio));
			font-weight: 700;
			line-height: 1;
			margin-top: calc(18 * var(--vw-ratio));
			margin-left: calc(40 * var(--vw-ratio));
		}

	#client .loopSlider {
		height: calc(120 * var(--vw-ratio));
		overflow: hidden;
		position: relative;
	}
		#client .loopSlider .loopslider_wrap {
			height: calc(120 * var(--vw-ratio));
			display: -webkit-flex;
			display: flex;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
			#client .loopSlider .loopslider_wrap ul {
				display: -webkit-flex;
				display: flex;
			}
				#client .loopSlider .loopslider_wrap ul li {
					width: calc(250 * var(--vw-ratio));
					margin: 0 calc(15 * var(--vw-ratio));
				}
@media screen and (max-width: 767px) {
	#client .ttl {
		display: block;
		margin-bottom: calc(30 * var(--vw-ratio));
	}
		#client .ttl h2 {
			font-size: calc(70 * var(--vw-ratio));
		}

		#client .ttl p {
			font-size: calc(20 * var(--vw-ratio));
			line-height: 1.4em;
			margin-top: calc(18 * var(--vw-ratio));
			margin-left: 0;
		}

		#client .loopSlider .loopslider_wrap ul li {
			margin: 0 calc(12 * var(--vw-ratio));
		}
}




/* case
--------------------- */
#case {
	width: 100%;
	overflow: hidden;
}
	#case .swiper-container {
		position: relative;
		padding: 0 0  calc(60 * var(--vw-ratio)) 0;
	}
		#case .swiper-container a.linkbox {
			display: block;
		}
			#case .swiper-container a.linkbox .pht {
				border-radius: calc(5 * var(--vw-ratio));
			}

			#case .swiper-container a.linkbox time {
				display: block;
				line-height: 1;
				color: #A8A8A8;
				margin-top: calc(17 * var(--vw-ratio));
				margin-bottom: calc(10 * var(--vw-ratio));
			}

			#case .swiper-container a.linkbox .cat {
				margin-bottom: calc(10 * var(--vw-ratio));
			}
				#case .swiper-container a.linkbox .cat li {
					margin-bottom: calc(7 * var(--vw-ratio));
					margin-right: calc(7 * var(--vw-ratio));
					line-height: 1;
				}
				#case .swiper-container a.linkbox .cat li:nth-last-child(1) {
					margin-right: 0;
				}

			#case .swiper-container a.linkbox h3 {
				font-weight: 600;
				line-height: 1.4em;
				text-decoration: underline;
				margin-bottom: calc(12 * var(--vw-ratio));
			}
			#case .swiper-container a.linkbox:hover h3 {
				text-decoration: none;
			}

			#case .swiper-container a.linkbox .txt-13 {
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-height: 1.6em;
				margin-bottom: calc(10 * var(--vw-ratio));
			}

			#case .swiper-container a.linkbox .more {
				display: inline-block;
				position: relative;
				padding-right: calc(15 * var(--vw-ratio));
				transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			#case .swiper-container a.linkbox:hover .more {
				padding-right: calc(12 * var(--vw-ratio));
			}
			#case .swiper-container a.linkbox .more:before {
				content: "";
				width: calc(8 * var(--vw-ratio));
				height: calc(8 * var(--vw-ratio));
				border-radius: 50%;
				background: #00053A;
				position: absolute;
				top: 50%;
				right: 0;
				margin-top: calc(-3 * var(--vw-ratio));
			}


			#case .swiper-container .swiper-pagination {
				bottom: 0;
			}
				#case .swiper-container .swiper-pagination .swiper-pagination-bullet {
					width: 8px;
					height: 8px;
					border-radius: 4px;
					background: #97ABBF;
					border: none;
					opacity: 1;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#case .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
					width: 22px;
					background: #0D2469;
					opacity: 1;
				}
@media screen and (max-width: 767px) {
	#case .swiper-container {
		position: relative;
		padding: 0 0  calc(40 * var(--vw-ratio)) 0;
		margin-bottom: calc(30 * var(--vw-ratio));
	}
	
	#case .btn {
		margin: 0 auto;
	}
}


/* products / owned media
----------------------------------------------- */
#products .column2 .title, #ownedmedia .column2 .title {
		border-top: none;
		position: sticky;
		top: calc(70 * var(--vw-ratio));
		left: 0;
	}
#products .column2 .list, #ownedmedia .column2 .list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(40 * var(--vw-ratio));
		row-gap: calc(40 * var(--vw-ratio));
		width: calc(920 * var(--vw-ratio));
		margin-top: calc(80 * var(--vw-ratio));
	}
#products .column2 .list .box, #ownedmedia .column2 .list .box {
			padding: calc(40 * var(--vw-ratio));
			position: relative;
		}
#products .column2 .list .box .number, #ownedmedia .column2 .list .box .number {
				line-height: 1;
				position: absolute;
				top: calc(10 * var(--vw-ratio));
				right: calc(10 * var(--vw-ratio));
			}
#products .column2 .list .box h3, #ownedmedia .column2 .list .box h3 {
				line-height: 1.3em;
			}
#products .column2 .list .box .head, #ownedmedia .column2 .list .box .head {
				margin-bottom: calc(15 * var(--vw-ratio));
			}
@media screen and (max-width: 767px) {
#products .column2, #ownedmedia .column2 {
		display: block;
	}
#products .column2 .title, #ownedmedia .column2 .title {
			border-top: none;
			position: sticky;
			top: calc(70 * var(--vw-ratio));
			left: 0;
		}
#products .column2 .list, #ownedmedia .column2 .list {
			display: block;
			width: 100%;
			margin-top: 0;
		}
#products .column2 .list .box, #ownedmedia .column2 .list .box {
				padding: calc(30 * var(--vw-ratio));
				margin-bottom: calc(20 * var(--vw-ratio));
			}
#products .column2 .list .box:nth-last-child(1), #ownedmedia .column2 .list .box:nth-last-child(1) {
				margin-bottom: 0;
			}

}

/* 関連サービス・自社プロダクト・自社メディアの境目の余白（2026-10-19）
   各セクションが上下200ずつ持っていて、境目で約400空いていたので120に詰める */
#related.wrap-bottom, #products.wrap-bottom { padding-bottom: calc(60 * var(--vw-ratio)); }
#products.wrap-top, #ownedmedia.wrap-top { padding-top: calc(60 * var(--vw-ratio)); }
@media screen and (max-width: 767px) {
	#related.wrap-bottom, #products.wrap-bottom { padding-bottom: calc(30 * var(--vw-ratio)); }
	#products.wrap-top, #ownedmedia.wrap-top { padding-top: calc(30 * var(--vw-ratio)); }
}

/* 改行を語の切れ目（<wbr>と句読点）だけにする（2026-10-19）。収まらない場合だけ任意位置で折る */
#products p.phrase { word-break: keep-all; overflow-wrap: anywhere; }
/* fv 動画背景（2026-10-19）
   文字の文言・書体・サイズ・位置は従来のまま。背景レイヤーと色だけ上書き
--------------------- */
#fv {
	min-height: 100svh;
	background: #000028;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: calc(60 * var(--vw-ratio));
}
	#fv .fv-bg {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		z-index: 0;
		overflow: hidden;
	}
		#fv .fv-bg picture,
		#fv .fv-bg img,
		#fv .fv-bg video {
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: 62% 50%;
			display: block;
		}
		#fv .fv-bg video { z-index: 1; transition: opacity .6s ease; }
		/* ループの継ぎ目（背中越し→横）を暗転で繋ぐ。JS(common.js)が .is-seam を付け外しする */
		#fv .fv-bg video.is-seam { opacity: 0; }
		/* 文字を立てる被せ。左→右 */
		#fv .fv-bg:after {
			content: "";
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			z-index: 2;
			background: linear-gradient(90deg, rgba(0,0,40,.7) 0%, rgba(0,0,40,.45) 40%, rgba(0,0,40,0) 72%);
		}
	#fv .inner,
	#fv .cta-btn-list { z-index: 3; }
	#fv .text .catch .catch-txt { border-bottom-color: rgba(255,255,255,.35); }
	#fv .text .txt-18 { color: rgba(255,255,255,.75); }
	#fv .text h3 { color: #fff; }
	#fv .text .btn-scroll a { border-color: rgba(255,255,255,.6); color: #1A2F44; }
	/* テキスト出現の白いスライド(#F8F8F8)は暗い背景で白箱に見えるのでFVだけ止める（フェードは残る） */
	#fv .img-wrap.img-animation:before { display: none; }
	/* 波はダーク背景に合わないので出さない */
	#fv .wave { display: none; }

@media screen and (max-width: 767px) {
	#fv .fv-bg video { object-position: 50% 50%; } /* SPは縦動画 */ /* 最後の2人が画面右寄りに来る位置 */
	#fv .fv-bg img { object-position: 50% 50%; } /* 動画と同じ位置 */
	#fv .fv-bg:after {
		background: linear-gradient(180deg, rgba(0,0,40,.65) 0%, rgba(0,0,40,.35) 45%, rgba(0,0,40,0) 72%);
	}
}
@media (prefers-reduced-motion: reduce) {
	#fv .fv-bg video { display: none; }
}
/* トップのFV上はヘッダーを透過・白文字にして背景に馴染ませる（2026-10-19）
   スクロールして固定ヘッダー(is-animation)になったら従来の白地・紺文字に戻る
--------------------- */
body.home #header:not(.is-animation) {
	background: transparent;
	border-bottom: none;
}
	/* FV上はマーク付きロゴを白で。大きさはスクロール後の固定ヘッダー(120)と同じにする */
	#header .logo a img.logo-text { display: none; }
	body.home #header:not(.is-animation) .logo a { width: calc(120 * var(--vw-ratio)); }
	body.home #header:not(.is-animation) .logo a img { filter: brightness(0) invert(1); }
	body.home #header:not(.is-animation) ul.globalnav li a {
		color: #fff;
	}
	body.home #header:not(.is-animation) ul.globalnav li a:hover,
	body.home #header:not(.is-animation) ul.globalnav li.active a {
		color: rgba(255,255,255,.7);
	}
	body.home #header:not(.is-animation) ul.globalnav li a.head:before {
		border-color: transparent transparent #fff transparent;
	}
	/* プルダウン内は白地なので紺文字のまま */
	body.home #header:not(.is-animation) ul.globalnav li.has-child ul.sub_list li a {
		color: #1A2F44;
	}
	/* ナビが明るい空に重なっても読めるよう、FV上端だけ少し落とす */
	#fv .fv-bg:before {
		content: "";
		position: absolute;
		top: 0; right: 0; left: 0;
		height: calc(220 * var(--vw-ratio));
		z-index: 2;
		background: linear-gradient(180deg, rgba(0,0,40,.55) 0%, rgba(0,0,40,0) 100%);
	}
@media screen and (max-width: 767px) {
	/* SPのハンバーガーも紺の角を消して馴染ませる（開いた時と固定時は従来通り） */
	body.home #menubtn:not(.is-animation) .menu:not(.active) {
		background: transparent;
	}
	#fv .fv-bg:before { height: calc(120 * var(--vw-ratio)); }
	/* 旧デザインは波に潜り込ませるため #about を80px引き上げていた。動画FVでは被るので戻す */
	body.home #about { margin-top: 0; }
	body.home #header:not(.is-animation) .logo a { width: calc(110 * var(--vw-ratio)); }
}
/* FVコピーの出現エフェクト（2026-10-19）
   文字はゆっくり浮き上がり、キャッチ下の罫線は左から横に伸びる。順に少しずつ遅らせる
--------------------- */
/* セカンドビュー(.ani)と同じ「ぼかし→くっきり」の出現に揃える（2026-10-20） */
@keyframes fvRise {
	0%   { opacity: 0; filter: blur(10px); transform: scale(1.02); }
	100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes fvLine {
	0%   { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}
#fv .text .catch .catch-txt .img-wrap { display: inline-block; }
#fv .text .img-wrap { opacity: 0; }
#fv .text .img-wrap.img-animation {
	animation: fvRise 1s ease both;
	overflow: visible;
}
#fv .text .catch .catch-txt:first-child .img-wrap.img-animation { animation-delay: .15s; }
#fv .text .catch .catch-txt:last-child  .img-wrap.img-animation { animation-delay: .35s; }
/* 英文（Maximizing results…）は罫線と同じく左から横に現れる（2026-10-20） */
@keyframes fvWipe {
	0%   { opacity: 1; clip-path: inset(0 100% 0 0); }
	100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
#fv .text .txt-18.img-wrap.img-animation { animation: fvWipe 1.3s cubic-bezier(.2,.7,.2,1) .8s both; filter: none; transform: none; }
#fv .text h3.img-wrap.img-animation { animation-delay: .75s; }
#fv .text .btn-scroll { opacity: 0; animation: fvRise 1s ease 1.1s both; }
/* 罫線: border を消して ::after を左から伸ばす */
#fv .text .catch .catch-txt:last-child { border-bottom: none; position: relative; }
#fv .text .catch .catch-txt:last-child:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: rgba(255,255,255,.35);
	transform: scaleX(0);
	transform-origin: left center;
	animation: fvLine 1.3s cubic-bezier(.2,.7,.2,1) .8s both;
}
@media (prefers-reduced-motion: reduce) {
	#fv .text .img-wrap, #fv .text .btn-scroll { opacity: 1; animation: none; clip-path: none; }
	#fv .text .catch .catch-txt:last-child:after { transform: none; animation: none; }
}
/* FVの色加工 6b（2026-10-19）: デュオトーン半分＋ドットメッシュ＋ビネット。全てCSS、動画は無加工
   消すときは index.php の .fv-fx 4つとこのブロックを外すだけ */
#fv .fv-bg video,
#fv .fv-bg img { filter: saturate(.7); }
#fv .fv-fx { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; }
#fv .fv-fx-duo  { background: linear-gradient(135deg, #0b1a4a, #1f7fd6); mix-blend-mode: color; opacity: .5; }
#fv .fv-fx-dark { background: #000028; mix-blend-mode: multiply; opacity: .15; }
#fv .fv-fx-mesh { background: radial-gradient(rgba(0,0,40,.5) 1px, transparent 1.2px) 0 0 / 4px 4px; mix-blend-mode: multiply; }
#fv .fv-fx-vig  { background: radial-gradient(ellipse 70% 60% at 62% 45%, transparent 40%, rgba(0,0,40,.55) 100%); }
#fv .fv-bg:before, #fv .fv-bg:after { z-index: 3; }
@media screen and (max-width: 767px) {
	#fv .fv-fx-vig { background: radial-gradient(ellipse 90% 60% at 50% 50%, transparent 40%, rgba(0,0,40,.55) 100%); }
}
/* セカンドビュー(#about)の背景を朝焼け＋パララックスに（2026-10-20）
   背景は高さ130%の画像をJS(common.js)でスクロール量の25%だけ動かす。文字は白 */
body.home #about {
	position: relative;
	overflow: hidden;
	background: #000028;
	color: #fff;
}
	body.home #about .about-bg {
		position: absolute;
		left: 0; right: 0;
		top: -15%;
		height: 130%;
		z-index: 0;
		will-change: transform;
		pointer-events: none;
	}
		body.home #about .about-bg img {
			width: 100%; height: 100%;
			object-fit: cover;
			object-position: 50% 60%;
			display: block;
		}
	/* 文字を立てる被せ: 上は紺、下へ行くほど朝焼けを見せる */
	body.home #about .about-bg:after {
		content: "";
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background: linear-gradient(180deg, rgba(0,0,40,.78) 0%, rgba(0,0,40,.55) 55%, rgba(0,0,40,.35) 100%);
	}
	body.home #about .inner { position: relative; z-index: 1; }
	body.home #about .lead .lead-ja,
	body.home #about .headtit h2,
	body.home #about .text .txt-18 { color: #fff; }
	body.home #about .en { color: rgba(255,255,255,.65); }
	body.home #about .text ul.tag li { background: rgba(255,255,255,.14); color: #fff; }
	/* FV下端→#about は同じ紺なので切り替えが消える */
@media (prefers-reduced-motion: reduce) {
	body.home #about .about-bg { transform: none !important; }
}
/* FV＋セカンドビューを1枚の空で一体化（hero-sky 2026-10-20）
   空(img/sky_morning)が両セクションの裏に敷かれ、JSでパララックス。FV動画は下端をマスクで空に溶かす */
#hero-sky { position: relative; background: #000028; overflow: hidden; }
	#hero-sky .sky {
		position: absolute;
		left: 0; right: 0;
		top: -12%;
		height: 124%;
		z-index: 0;
		will-change: transform;
		pointer-events: none;
	}
		#hero-sky .sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
	#hero-sky #fv { background: transparent; }
	#hero-sky #fv .fv-bg {
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.6) 82%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.6) 82%, rgba(0,0,0,0) 100%);
	}
	/* セカンドビューは明るい空の上なので紺文字に戻す。朝焼け背景(about-bg)は使わない */
	#hero-sky #about { background: transparent; overflow: visible; color: #1A2F44; }
	#hero-sky #about .about-bg { display: none; }
	#hero-sky #about .lead .lead-ja,
	#hero-sky #about .headtit h2,
	#hero-sky #about .text .txt-18 { color: #1A2F44; }
	#hero-sky #about .en { color: #5a6270; }
	#hero-sky #about .text ul.tag li { background: #00053A; color: #fff; }
@media (prefers-reduced-motion: reduce) { #hero-sky .sky { transform: none !important; } }
/* hero-sky 調整: セカンドビューの文字が空の雲と重なって読みにくいので、下側に白い薄霞を足す。
   FV→セカンドの継ぎ目は動画のマスクで溶けているが、空の明るさの段差を緩めるため紺→透明の帯も重ねる */
#hero-sky .sky:after {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background:
		linear-gradient(180deg, rgba(0,0,40,.35) 0%, rgba(0,0,40,0) 42%),
		linear-gradient(180deg, rgba(255,255,255,0) 48%, rgba(255,255,255,.38) 70%, rgba(255,255,255,.55) 100%);
	pointer-events: none;
}
#hero-sky #about .lead .lead-ja,
#hero-sky #about .headtit h2 { text-shadow: none; }
/* hero-sky 最終（2026-10-20 岩河さん選定=B「夜明け→朝」グラデ空・雲少なめ）
   空は縦長グラデなので fill で hero の高さに当てはめる。セカンドは白文字（背景は中盤の青〜紫） hero-sky-b */
#hero-sky .sky { top: 0; height: 118%; }
#hero-sky .sky img { object-fit: fill; object-position: 50% 0%; }
#hero-sky .sky:after { background: linear-gradient(180deg, rgba(0,0,40,.15) 0%, rgba(0,0,40,0) 40%); }
#hero-sky #about .lead .lead-ja,
#hero-sky #about .headtit h2,
#hero-sky #about .text .txt-18 { color: #fff; text-shadow: none; }
#hero-sky #about .en { color: #fff; }
/* タグは半透明だと空に溶けて読みにくいので、紺ベタ＋白文字に戻す */
#hero-sky #about .text ul.tag li { background: #00053A; color: #fff; }
/* FVのCTAをガラス（半透明＋ぼかし）に。青/緑のベタ塗りが動画の世界観から浮くため（2026-10-20 岩河さん選定A） cta-glass */
body.home #fv .cta-btn-list a.linkbox.contact,
body.home #fv .cta-btn-list a.linkbox.line {
	background-color: rgba(255,255,255,.1) !important;
	background-image: none !important;
	border: 1px solid rgba(255,255,255,.35);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	box-shadow: none;
}
body.home #fv .cta-btn-list a.linkbox.contact:hover,
body.home #fv .cta-btn-list a.linkbox.line:hover {
	background-color: rgba(255,255,255,.2) !important;
	border-color: rgba(255,255,255,.6);
}
body.home #fv .cta-btn-list a.linkbox .txt-11,
body.home #fv .cta-btn-list a.linkbox .txt-14,
body.home #fv .cta-btn-list a.linkbox .txt-18 { color: #fff; }
/* アイコンは背景画像で描かれていたので、疑似要素で白アイコンを右に置く */
body.home #fv .cta-btn-list a.linkbox { position: relative; }
body.home #fv .cta-btn-list a.linkbox:after {
	content: "";
	position: absolute;
	right: calc(20 * var(--vw-ratio));
	top: 50%;
	width: calc(25 * var(--vw-ratio));
	height: calc(25 * var(--vw-ratio));
	transform: translateY(-50%);
	background: no-repeat center / contain;
	opacity: .9;
}
body.home #fv .cta-btn-list a.linkbox.contact:after { background-image: url("../img/icon_mail_white.svg"); }
body.home #fv .cta-btn-list a.linkbox.line:after { background-image: url("../img/icon_line_white.svg"); }
/* セカンドビューのリード「問いから成果のその先へ。／i ASK to you.」を
   下のコピーから離して、ひとつのメッセージとして立たせる（2026-10-20 lead-hero） */
#hero-sky #about .lead {
	margin-top: calc(-40 * var(--vw-ratio));
	margin-bottom: calc(140 * var(--vw-ratio));
}
	#hero-sky #about .lead .lead-ja {
		margin-bottom: calc(10 * var(--vw-ratio));
	}
	#hero-sky #about .lead .en {
		letter-spacing: 0.12em;
	}
@media screen and (max-width: 767px) {
	#hero-sky #about .lead {
		margin-top: 0;
		margin-bottom: calc(70 * var(--vw-ratio));
	}
		#hero-sky #about .lead .lead-ja {
			margin-bottom: calc(8 * var(--vw-ratio));
		}
		#hero-sky #about .lead .en { letter-spacing: 0.1em; }
		#hero-sky #about .lead .lead-ja { font-size: calc(28 * var(--vw-ratio)); white-space: nowrap; }
}
/* セカンドビューの下端を次のセクション（#F8F8F8）へだんだん溶かす（2026-10-20 hero-fade-out）
   空はパララックスで動くので空自体にはマスクをかけず、hero-sky の下端に「透明→白」の帯を
   背景より上・文字より下のレイヤーで固定して重ねる */
#hero-sky { background: transparent; }
#hero-sky:after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: calc(300 * var(--vw-ratio));
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(248,248,248,0) 0%, rgba(248,248,248,.6) 55%, #F8F8F8 100%);
}
#hero-sky #about .inner { z-index: 2; }
/* #main に背景を付けると SP のサービス画像(.pht z-index:-1)がその裏に隠れるので付けない。body が #F8F8F8 */
#hero-sky #about { padding-bottom: calc(160 * var(--vw-ratio)); }
@media screen and (max-width: 767px) {
	#hero-sky:after { height: calc(180 * var(--vw-ratio)); }
	#hero-sky #about { padding-bottom: calc(110 * var(--vw-ratio)); }
}
}
}
/* ===== FV v2（ブルーグレー昼・紺文字）2026-10-20 岩河さん選定。コピーは現行のまま。
   以降のダーク系ルール（hero-sky/fv-fx/ガラスCTA/白文字）はここで上書きして無効化 ===== */
#hero-sky .sky, #hero-sky:after { display: none !important; }
#hero-sky { background: #eef2f6; }
#fv { background: #eef2f6; color: #0b1a3a; }
#fv .fv-bg video, #fv .fv-bg img { filter: none; object-position: 60% 50%; }
#fv .fv-fx { display: none; }
#fv .fv-bg:before { display: none; }
/* 左側の文字を立てる、白い薄霞 */
#fv .fv-bg:after { background: linear-gradient(90deg, rgba(240,244,248,.78) 0%, rgba(240,244,248,.55) 38%, rgba(240,244,248,0) 62%); }
#fv .text .catch, #fv .text h3 { color: #0b1a3a; }
#fv .text .catch .catch-txt:last-child:after { background: rgba(11,26,58,.3); }
#fv .text .txt-18 { color: #5a6678; }
#fv .text .btn-scroll a { background-color: #0b1a3a; color: #fff; border-color: #0b1a3a; }
body.home #header:not(.is-animation) ul.globalnav li a { color: #0b1a3a; }
body.home #header:not(.is-animation) .logo a img { filter: none; }
body.home #header:not(.is-animation) ul.globalnav li a.head:before { border-color: transparent transparent #0b1a3a transparent; }
/* CTAは明るい背景用の白ガラス（岩河さん選定） */
body.home #fv .cta-btn-list a.linkbox.contact, body.home #fv .cta-btn-list a.linkbox.line {
	background-color: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.8);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #0b1a3a; box-shadow: 0 4px 18px rgba(11,26,58,.08);
}
body.home #fv .cta-btn-list a.linkbox.contact:hover, body.home #fv .cta-btn-list a.linkbox.line:hover { background-color: rgba(255,255,255,.8) !important; }
body.home #fv .cta-btn-list a.linkbox .txt-11, body.home #fv .cta-btn-list a.linkbox .txt-14, body.home #fv .cta-btn-list a.linkbox .txt-18 { color: #0b1a3a; }
body.home #fv .cta-btn-list a.linkbox.contact:after { background-image: url("../img/icon_mail_white.svg"); filter: brightness(0) saturate(100%) invert(9%) sepia(40%) saturate(2800%) hue-rotate(215deg) brightness(90%); }
body.home #fv .cta-btn-list a.linkbox.line:after { background-image: url("../img/icon_line_blue.svg"); filter: none; }
/* セカンドビュー: 白地・紺文字に戻す */
#about { background: #fff; color: #1A2F44; padding-top: calc(120 * var(--vw-ratio)); }
#about .lead .lead-ja, #about .headtit h2, #about .text .txt-18 { color: #1A2F44 !important; }
#about .en { color: #989C9F !important; }
#about .text ul.tag li { background: #00053A; color: #fff; }
#about .about-bg { display: none; }

/* ループの継ぎ目の暗転は明るい背景では黒く点滅するので、白へのフェードに */
#fv .fv-bg video.is-seam { opacity: 0; }
#fv .fv-bg { background: #eef2f6; }
/* セカンドビューのリード位置・下端の溶かしは白地なので不要 */
#hero-sky #about .lead { margin-top: 0; margin-bottom: calc(60 * var(--vw-ratio)); }
#hero-sky #about { padding-bottom: calc(100 * var(--vw-ratio)); }
@media screen and (max-width: 767px) {
	#fv .fv-bg video, #fv .fv-bg img { object-position: 50% 50%; }
	#fv .fv-bg:after { background: linear-gradient(180deg, rgba(240,244,248,.8) 0%, rgba(240,244,248,.5) 40%, rgba(240,244,248,0) 65%); }
	#hero-sky #about .lead { margin-bottom: calc(40 * var(--vw-ratio)); }
	#hero-sky #about .lead .lead-ja { white-space: normal; }
	body.home #menubtn:not(.is-animation) .menu:not(.active) { background: #00053A; }
}
/* ===== FV/セカンド v3 レイアウト（2026-10-20 モック準拠）=====
   FV: 英字ラベル＋見出し＋1行サブ＋ピルCTA、右端に縦SCROLL。高さは画面の約62%。
   セカンド: 左=ABOUT iASK/見出し/3行/アウトラインボタン、右=OUR APPROACH、右下にうっすら山 */
.btn-pill { display: inline-flex; align-items: center; gap: calc(28 * var(--vw-ratio)); height: calc(58 * var(--vw-ratio)); padding: 0 calc(12 * var(--vw-ratio)) 0 calc(34 * var(--vw-ratio)); border-radius: 999px; background: #0b1a3a; color: #fff; font-weight: 700; font-size: calc(15 * var(--vw-ratio)); letter-spacing: .04em; white-space: nowrap; transition: .25s; }
.btn-pill .arr { width: calc(34 * var(--vw-ratio)); height: calc(34 * var(--vw-ratio)); border-radius: 50%; border: 1px solid rgba(255,255,255,.6); position: relative; flex: none; }
.btn-pill .arr:after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: translate(-60%,-50%) rotate(45deg); }
.btn-pill:hover { background: #1a2d5c; }
.btn-pill.ghost { background: rgba(255,255,255,.55); color: #0b1a3a; border: 1px solid rgba(255,255,255,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-pill.ghost .arr { border-color: rgba(11,26,58,.5); } .btn-pill.ghost .arr:after { border-color: #0b1a3a; }
.btn-pill.ghost:hover { background: rgba(255,255,255,.85); }
.btn-outline { display: inline-flex; align-items: center; gap: calc(60 * var(--vw-ratio)); height: calc(58 * var(--vw-ratio)); padding: 0 calc(30 * var(--vw-ratio)) 0 calc(34 * var(--vw-ratio)); border-radius: 999px; border: 1px solid #1A2F44; color: #1A2F44; font-weight: 700; font-size: calc(15 * var(--vw-ratio)); transition: .25s; }
.btn-outline .arr { width: 18px; height: 10px; position: relative; }
.btn-outline .arr:before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1.5px; background: #1A2F44; }
.btn-outline .arr:after { content: ""; position: absolute; right: 0; top: 50%; width: 8px; height: 8px; border-top: 1.5px solid #1A2F44; border-right: 1.5px solid #1A2F44; transform: translateY(-50%) rotate(45deg); }
.btn-outline:hover { background: #1A2F44; color: #fff; }
.btn-outline:hover .arr:before { background: #fff; } .btn-outline:hover .arr:after { border-color: #fff; }
.sec-label { display: flex; align-items: center; gap: calc(14 * var(--vw-ratio)); font-size: calc(13 * var(--vw-ratio)); letter-spacing: .22em; color: #7c8794; font-weight: 500; margin-bottom: calc(22 * var(--vw-ratio)); }
.sec-label .bar { width: calc(28 * var(--vw-ratio)); height: 1px; background: #9aa3ae; }
/* ヘッダーのピル */
#header .hd-cta { height: calc(48 * var(--vw-ratio)); font-size: calc(14 * var(--vw-ratio)); margin-left: calc(30 * var(--vw-ratio)); }
#header .hd-cta .arr { width: calc(28 * var(--vw-ratio)); height: calc(28 * var(--vw-ratio)); }
#header.is-animation .hd-cta { height: calc(40 * var(--vw-ratio)); }
#header ul.globalnav li:last-child { display: none; } /* Contact はピルに統合 */
/* FV */
#fv { min-height: calc(640 * var(--vw-ratio)); padding-top: calc(190 * var(--vw-ratio)); padding-bottom: calc(80 * var(--vw-ratio)); justify-content: flex-start; }
#fv .fv-bg:after { background: linear-gradient(90deg, rgba(240,244,248,.55) 0%, rgba(240,244,248,.3) 35%, rgba(240,244,248,0) 58%); }
#fv .fv-bg:before { display: none; }
#fv .text .fv-ov { font-size: calc(14 * var(--vw-ratio)); letter-spacing: .26em; color: #6b7684; font-weight: 500; margin-bottom: calc(14 * var(--vw-ratio)); }
#fv .text .catch { font-size: calc(62 * var(--vw-ratio)); margin-bottom: calc(22 * var(--vw-ratio)); }
#fv .text .catch .catch-txt { border-bottom: none !important; }
#fv .text .catch .catch-txt:last-child:after { display: none; }
#fv .text h3 { font-size: calc(25.5 * var(--vw-ratio)); font-weight: 700; line-height: 1.5em; margin-bottom: calc(40 * var(--vw-ratio)); color: #1A2F44; white-space: nowrap; } /* 元の表現・書体、30→25.5(15%縮小)、指定の2行で固定（2026-10-20） */
#fv .text .fv-cta { display: flex; gap: calc(14 * var(--vw-ratio)); align-items: center; flex-wrap: wrap; }
#fv .text .fv-cta.img-wrap.img-animation { animation: fvRise 1s ease .9s both; }
#fv .cta-btn-list { display: none; }
#fv .fv-scroll { position: absolute; right: calc(60 * var(--vw-ratio)); bottom: calc(60 * var(--vw-ratio)); z-index: 4; writing-mode: vertical-rl; font-size: calc(11 * var(--vw-ratio)); letter-spacing: .3em; color: #fff; opacity: .85; padding-bottom: calc(48 * var(--vw-ratio)); }
#fv .fv-scroll:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: calc(40 * var(--vw-ratio)); background: #fff; }
#fv .text .txt-18 { display: none; }
/* セカンド */
#hero-sky #about.about-v3 { position: relative; overflow: hidden; background: #fff; padding-top: calc(100 * var(--vw-ratio)); padding-bottom: calc(110 * var(--vw-ratio)); }
#about.about-v3 .about-deco { position: absolute; right: 0; bottom: 0; width: 46%; z-index: 0; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 55%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 55%); }
#about.about-v3 .about-deco img { width: 100%; display: block; }
#about.about-v3 .about-grid { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: calc(60 * var(--vw-ratio)); }
#about.about-v3 .about-main { width: 56%; }
#about.about-v3 .about-side { width: 34%; padding-left: calc(50 * var(--vw-ratio)); border-left: 1px solid #DDDFE0; padding-top: calc(40 * var(--vw-ratio)); }
#about.about-v3 .about-h2 { font-size: calc(46 * var(--vw-ratio)); font-weight: 700; line-height: 1.4; color: #1A2F44; margin: 0 0 calc(26 * var(--vw-ratio)); }
#about.about-v3 .about-h2-en { display: block; font-size: calc(14 * var(--vw-ratio)); font-weight: 400; letter-spacing: .14em; color: #7c8794; margin-top: calc(8 * var(--vw-ratio)); }
#about.about-v3 .about-steps { font-size: calc(22 * var(--vw-ratio)); font-weight: 700; line-height: 1.9; color: #1A2F44; margin-bottom: calc(10 * var(--vw-ratio)); }
#about.about-v3 .about-steps-en { color: #989C9F; line-height: 1.9; margin-bottom: calc(34 * var(--vw-ratio)); }
#about.about-v3 .about-side-h { font-size: calc(18 * var(--vw-ratio)); font-weight: 700; line-height: 1.8; color: #1A2F44; margin-bottom: calc(18 * var(--vw-ratio)); }
#about.about-v3 .about-side .txt-16 { color: #4a5563; line-height: 2; margin-bottom: calc(20 * var(--vw-ratio)); }
#hero-sky #about .lead { display: none; }
@media screen and (max-width: 767px) {
	#header .hd-cta { display: none; }
	#header ul.globalnav li:last-child { display: block; }
	#fv { min-height: calc(560 * var(--vw-ratio)); padding-top: calc(110 * var(--vw-ratio)); padding-bottom: calc(60 * var(--vw-ratio)); }
	#fv .text .catch { font-size: calc(34 * var(--vw-ratio)); }
	#fv .text h3 { font-size: calc(17 * var(--vw-ratio)); font-weight: 700; line-height: 1.7em; white-space: normal; }
	#fv .text .fv-cta { flex-direction: column; align-items: flex-start; }
	#fv .fv-scroll { display: none; }
	.btn-pill { height: calc(50 * var(--vw-ratio)); font-size: calc(14 * var(--vw-ratio)); }
	#about.about-v3 .about-grid { display: block; }
	#about.about-v3 .about-main, #about.about-v3 .about-side { width: 100%; padding-left: 0; border-left: none; }
	#about.about-v3 .about-side { margin-top: calc(50 * var(--vw-ratio)); padding-top: calc(40 * var(--vw-ratio)); border-top: 1px solid #DDDFE0; }
	#about.about-v3 .about-h2 { font-size: calc(30 * var(--vw-ratio)); }
	#about.about-v3 .about-steps { font-size: calc(18 * var(--vw-ratio)); }
	#about.about-v3 .about-deco { width: 90%; opacity: .7; }
}
/* v3 補正: タグの余白（.text 配下のルールが効かなくなったため）／右下の山をもう少し見せる */
#about.about-v3 ul.tag { display: flex; flex-wrap: wrap; gap: calc(10 * var(--vw-ratio)); }
#about.about-v3 ul.tag li { margin: 0; border-radius: calc(4 * var(--vw-ratio)); padding: calc(7 * var(--vw-ratio)) calc(10 * var(--vw-ratio)); font-weight: 500; line-height: 1; }
#about.about-v3 .about-deco { width: 58%; opacity: 1; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%), linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 30%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 40%), linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 30%); -webkit-mask-composite: source-in; mask-composite: intersect; }
#about.about-v3 .about-deco img { filter: saturate(.8); }
@media screen and (max-width: 767px) { #about.about-v3 .about-deco { width: 100%; } }
/* セカンドビュー背景を岩河さん支給の雪山（2000x666）に差し替え。全面に敷いて白ベールで文字を立てる（2026-10-20 12:00） */
#about.about-v3 .about-deco { width: 100%; height: 100%; top: 0; right: 0; bottom: auto; opacity: 1; -webkit-mask-image: none; mask-image: none; }
#about.about-v3 .about-deco img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 60%; filter: none; }
/* ベール: 左は濃く（本文の可読性）、右下は薄く（山を見せる）。上下は白へ溶かす */
#about.about-v3 .about-deco:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.78) 45%, rgba(255,255,255,.42) 75%, rgba(255,255,255,.22) 100%),
		linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.85) 100%); }
@media screen and (max-width: 767px) {
	#about.about-v3 .about-deco { width: 100%; }
	#about.about-v3 .about-deco img { object-position: 80% 50%; }
	#about.about-v3 .about-deco:after { background:
		linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.8) 55%, rgba(255,255,255,.35) 100%); }
}
/* ===== 比較用バリアント: 夜明け版FV（#fv.fv-dawn）。レイアウトはv3のまま、色と動画だけ夜明け版に戻す（2026-10-20） ===== */
#fv.fv-dawn { background: #000028; color: #fff; }
#fv.fv-dawn .fv-bg { background: #000028; }
#fv.fv-dawn .fv-bg video, #fv.fv-dawn .fv-bg img { filter: saturate(.7); object-position: 52% 50%; } /* 動画を右へ10%（62→52） 2026-10-20 */
#fv.fv-dawn .fv-fx { display: block; }
#fv.fv-dawn .fv-bg:after { background: linear-gradient(90deg, rgba(0,0,40,.7) 0%, rgba(0,0,40,.45) 40%, rgba(0,0,40,0) 72%); }
#fv.fv-dawn .text .fv-ov { color: rgba(255,255,255,.75); }
#fv.fv-dawn .text .catch, #fv.fv-dawn .text h3 { color: #fff; }
#fv.fv-dawn .text .txt-18 { color: rgba(255,255,255,.75); }
#fv.fv-dawn .btn-pill { background: #fff; color: #0b1a3a; }
#fv.fv-dawn .btn-pill .arr { border-color: rgba(11,26,58,.5); } #fv.fv-dawn .btn-pill .arr:after { border-color: #0b1a3a; }
#fv.fv-dawn .btn-pill.ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.5); }
#fv.fv-dawn .btn-pill.ghost .arr { border-color: rgba(255,255,255,.6); } #fv.fv-dawn .btn-pill.ghost .arr:after { border-color: #fff; }
#fv.fv-dawn .fv-scroll { color: #fff; }
body.home:has(#fv.fv-dawn) #header:not(.is-animation) ul.globalnav li a { color: #fff; }
body.home:has(#fv.fv-dawn) #header:not(.is-animation) .logo a img { filter: brightness(0) invert(1); }
body.home:has(#fv.fv-dawn) #header:not(.is-animation) .hd-cta { background: #fff; color: #0b1a3a; }
body.home:has(#fv.fv-dawn) #header:not(.is-animation) .hd-cta .arr { border-color: rgba(11,26,58,.5); }
body.home:has(#fv.fv-dawn) #header:not(.is-animation) .hd-cta .arr:after { border-color: #0b1a3a; }
/* 夜明け版のループ暗転はそのまま有効（common.jsの .is-seam） */
@media screen and (max-width: 767px) {
	#fv.fv-dawn .fv-bg video, #fv.fv-dawn .fv-bg img { object-position: 64% 50%; }
	#fv.fv-dawn .fv-bg:after { background: linear-gradient(180deg, rgba(0,0,40,.65) 0%, rgba(0,0,40,.35) 45%, rgba(0,0,40,0) 72%); }
	body.home:has(#fv.fv-dawn) #menubtn:not(.is-animation) .menu:not(.active) { background: transparent; }
}
/* ===== 比較用バリアント Q3: 夜明け動画を明るく（紺文字・朝日の暖色を少し残す）。#fv.fv-dawn.fv-dawn-light（2026-10-20） ===== */
#fv.fv-dawn.fv-dawn-light, #fv.fv-dawn.fv-dawn-light .fv-bg { background: #e9eff6; }
#fv.fv-dawn.fv-dawn-light .fv-bg video, #fv.fv-dawn.fv-dawn-light .fv-bg img { filter: brightness(1.25) contrast(.95) saturate(.9); } /* R1: 白さ控えめ（2026-10-20 13:00） */
#fv.fv-dawn.fv-dawn-light .fv-fx-duo, #fv.fv-dawn.fv-dawn-light .fv-fx-mesh, #fv.fv-dawn.fv-dawn-light .fv-fx-vig { display: none; }
#fv.fv-dawn.fv-dawn-light .fv-fx-dark { background: #e8f0f8; mix-blend-mode: screen; opacity: .3; }
#fv.fv-dawn.fv-dawn-light .fv-bg:after { background: linear-gradient(90deg, rgba(236,242,248,.45) 0%, rgba(236,242,248,.22) 40%, rgba(236,242,248,0) 58%); }
#fv.fv-dawn.fv-dawn-light .text .catch, #fv.fv-dawn.fv-dawn-light .text h3, #fv.fv-dawn.fv-dawn-light .fv-scroll { color: #0b1a3a; }
#fv.fv-dawn.fv-dawn-light .text .fv-ov { color: #6b7684; }
#fv.fv-dawn.fv-dawn-light .fv-scroll:after { background: #0b1a3a; }
#fv.fv-dawn.fv-dawn-light .btn-pill { background: #0b1a3a; color: #fff; }
#fv.fv-dawn.fv-dawn-light .btn-pill .arr { border-color: rgba(255,255,255,.6); } #fv.fv-dawn.fv-dawn-light .btn-pill .arr:after { border-color: #fff; }
#fv.fv-dawn.fv-dawn-light .btn-pill.ghost { background: rgba(255,255,255,.6); color: #0b1a3a; border-color: rgba(255,255,255,.85); }
#fv.fv-dawn.fv-dawn-light .btn-pill.ghost .arr { border-color: rgba(11,26,58,.5); } #fv.fv-dawn.fv-dawn-light .btn-pill.ghost .arr:after { border-color: #0b1a3a; }
body.home:has(#fv.fv-dawn-light) #header:not(.is-animation) ul.globalnav li a { color: #0b1a3a; }
body.home:has(#fv.fv-dawn-light) #header:not(.is-animation) .logo a img { filter: none; }
body.home:has(#fv.fv-dawn-light) #header:not(.is-animation) .hd-cta { background: #0b1a3a; color: #fff; }
body.home:has(#fv.fv-dawn-light) #header:not(.is-animation) .hd-cta .arr { border-color: rgba(255,255,255,.6); }
body.home:has(#fv.fv-dawn-light) #header:not(.is-animation) .hd-cta .arr:after { border-color: #fff; }
/* ループの継ぎ目は暗転でなく白へ */
#fv.fv-dawn.fv-dawn-light .fv-bg video.is-seam { opacity: 0; }
@media screen and (max-width: 767px) {
	#fv.fv-dawn.fv-dawn-light .fv-bg:after { background: linear-gradient(180deg, rgba(236,242,248,.8) 0%, rgba(236,242,248,.5) 40%, rgba(236,242,248,0) 65%); }
	body.home:has(#fv.fv-dawn-light) #menubtn:not(.is-animation) .menu:not(.active) { background: #00053A; }
}
/* ドットメッシュ（白・4px）をFV左側に。右へ行くほど消える。fv-dawn-light で有効（2026-10-20 fv-mesh-white） */
#fv.fv-dawn.fv-dawn-light .fv-fx-mesh {
	display: block;
	background: radial-gradient(rgba(255,255,255,.2) .7px, transparent 1px) 0 0 / 4px 4px; /* 濃さ20%（岩河さん指定） */
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 85%);
	mask-image: linear-gradient(90deg, #000 0%, #000 35%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 85%);
}
@media screen and (max-width: 767px) {
	#fv.fv-dawn.fv-dawn-light .fv-fx-mesh {
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,0) 75%);
		mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0,0,0,0) 75%);
	}
}
/* 夜明け版C: 動画を1.2倍に拡大して下端基準で上寄せ（人物・太陽を上へ、足元の岩はフェードに溶かす）PCのみ（2026-10-20 fv-dawn-zoom-c） */
#fv.fv-dawn .fv-bg video, #fv.fv-dawn .fv-bg img { width: 120%; height: 120%; left: 0; right: auto; top: auto; bottom: -5%; } /* v8: 右下基準で1.2倍＋5%下げ→終点の太陽が右上・2人がその左下に収まる（2026-10-20 岩河さん指定） */
#hero-sky #fv.fv-dawn .fv-bg {
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.6) 78%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,.6) 78%, rgba(0,0,0,0) 100%);
}
@media screen and (max-width: 767px) {
	#fv.fv-dawn .fv-bg video, #fv.fv-dawn .fv-bg img { width: 100%; height: 100%; left: 0; right: 0; top: 0; bottom: 0; }
	#hero-sky #fv.fv-dawn .fv-bg {
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.6) 82%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.6) 82%, rgba(0,0,0,0) 100%);
	}
}
/* 夜明け版v3: 色味(G5の白霞)は動画に焼き込み済みなので、CSS側の明るさ加工と白被せを外す（2026-10-20 fv-dawn-v3） */
#fv.fv-dawn.fv-dawn-light .fv-bg video, #fv.fv-dawn.fv-dawn-light .fv-bg img { filter: none; }
#fv.fv-dawn.fv-dawn-light .fv-fx-dark { display: none; }
#fv.fv-dawn.fv-dawn-light .fv-bg:after { background: linear-gradient(90deg, rgba(236,242,248,.25) 0%, rgba(236,242,248,.1) 35%, rgba(236,242,248,0) 55%); }
@media screen and (max-width: 767px) {
	#fv.fv-dawn.fv-dawn-light .fv-bg:after { background: linear-gradient(180deg, rgba(236,242,248,.6) 0%, rgba(236,242,248,.3) 40%, rgba(236,242,248,0) 65%); }
}
/* ドットメッシュは外す（v8の白霞動画では質感がざらつくだけで不要・2026-10-20 岩河さん判断）。戻すときはこの1行を消す */
#fv.fv-dawn.fv-dawn-light .fv-fx-mesh { display: none; }
/* MARKETING PARTNERの行を削除した分(約35px)を差し引き、コピー全体を現状から4%(約26px)上へ（2026-10-20 岩河さん指定） */
#fv.fv-dawn { padding-top: calc(199 * var(--vw-ratio)); }
@media screen and (max-width: 767px) {
	#fv.fv-dawn { padding-top: calc(123 * var(--vw-ratio)); }
}
/* FVを画面の高さいっぱいに（下にセカンドビューの白が覗かないように）。大画面は980pxで頭打ち（2026-10-20 岩河さん判断） */
@media screen and (min-width: 768px) {
	#fv.fv-dawn { min-height: 100svh; max-height: 980px; }
}
/* セカンドビュー整理（2026-10-20 岩河さん指定）: ラベル・ボタン・縦棒を外し、右カラムを内側へ（P2）。山は40%に */
#about.about-v3 .about-grid { justify-content: flex-start; gap: 6%; }
#about.about-v3 .about-main { width: 42%; }
#about.about-v3 .about-side { width: 40%; padding-left: 0; padding-top: calc(8 * var(--vw-ratio)); border-left: none; }
#about.about-v3 .about-deco img { opacity: .4; }
@media screen and (max-width: 767px) {
	#about.about-v3 .about-main, #about.about-v3 .about-side { width: 100%; }
}
/* 右カラムの下端（タグの下）を左カラムの下端（英文の下）に揃える（2026-10-20 岩河さん指定） */
@media screen and (min-width: 768px) {
	#about.about-v3 .about-grid { align-items: flex-end; }
	#about.about-v3 .about-side { padding-top: 0; }
	#about.about-v3 .about-side .tags, #about.about-v3 .about-side .tag-list { margin-bottom: 0; }
}
@media screen and (min-width: 768px) {
	#about.about-v3 ul.tag { margin-bottom: 0; }
	#about.about-v3 .about-steps-en { margin-bottom: 0; }
}
/* 右カラムの見出し「外部パートナーとして」の文字の上端を、左の「まず、事業を知る。」の上端に揃える（下端は揃えない・2026-10-20 岩河さん指定） */
@media screen and (min-width: 768px) {
	#about.about-v3 .about-grid { align-items: flex-start; }
	#about.about-v3 .about-side { padding-top: calc(121 * var(--vw-ratio)); }
}
/* SPもPC動画を使う（iPhoneは元々そうなっていた）。FVは画面高いっぱい、終点の太陽が右に来る切り位置、見出しは2行（2026-10-20 岩河さん指定） */
@media screen and (max-width: 767px) {
	#fv.fv-dawn { min-height: 100svh; }
	#fv.fv-dawn .fv-bg video, #fv.fv-dawn .fv-bg img { object-position: 55% 50%; } /* 太陽が見えるよう 51→55%（2026-10-21 岩河さん指定） */ /* 画面幅の20%ぶん左へ（45→51%）2026-10-20 */
	#fv.fv-dawn .text .catch { white-space: nowrap; }
}
/* SPのセカンドビュー: 山画像は右4割にしか峰が無いので右端を使い、ベールを弱めて山を見せる（案C1・2026-10-20 岩河さん指定） */
@media screen and (max-width: 767px) {
	#about.about-v3 .about-deco img { opacity: .6; object-position: 100% 70%; }
	#about.about-v3 .about-deco:after { background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 40%, rgba(255,255,255,.2) 100%); }
}
/* FVのCTA: 「無料相談する」＋「LINEで無料ガイド2冊を受け取る」。LINEボタンの下に中身を示すガラスの吹き出し（2026-10-20 岩河さん指定） */
#fv .text .fv-line-wrap { position: relative; display: inline-block; }
#fv .text .fv-tip {
	position: absolute; left: calc(18 * var(--vw-ratio)); top: calc(100% + 14 * var(--vw-ratio));
	display: block; width: max-content; max-width: calc(360 * var(--vw-ratio));
	padding: calc(10 * var(--vw-ratio)) calc(14 * var(--vw-ratio)) calc(11 * var(--vw-ratio));
	background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); border-radius: calc(12 * var(--vw-ratio));
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(11,26,58,.08);
	color: #0b1a3a; font-size: calc(13 * var(--vw-ratio)); line-height: 1.6; text-align: left; z-index: 2;
}
#fv .text .fv-tip:before { content: ""; position: absolute; left: calc(26 * var(--vw-ratio)); top: calc(-7 * var(--vw-ratio)); width: calc(12 * var(--vw-ratio)); height: calc(12 * var(--vw-ratio)); background: rgba(255,255,255,.85); border-left: 1px solid rgba(255,255,255,.9); border-top: 1px solid rgba(255,255,255,.9); transform: rotate(45deg); }
#fv .text .fv-tip-h { display: block; font-weight: 700; font-size: calc(12 * var(--vw-ratio)); letter-spacing: .02em; margin-bottom: calc(4 * var(--vw-ratio)); color: #0b1a3a; }
#fv .text .fv-tip-i { display: block; white-space: nowrap; }
#fv .text .fv-tip-i b { display: inline-block; min-width: 2em; font-weight: 700; color: #0b1a3a; opacity: .55; } /* 番号は文字色で色分けしない（紺の薄色） */
#fv .text .fv-tip-i small { font-size: calc(11 * var(--vw-ratio)); color: #6b7684; margin-left: .5em; }
@media screen and (max-width: 767px) {
	#fv .text .fv-line-wrap { display: block; width: 100%; }
	#fv .text .fv-tip { position: static; width: auto; max-width: none; margin: calc(10 * var(--vw-ratio)) 0 0; padding: calc(9 * var(--vw-ratio)) calc(12 * var(--vw-ratio)); font-size: calc(12 * var(--vw-ratio)); }
	#fv .text .fv-tip:before { display: none; }
	#fv .text .fv-tip-i { white-space: normal; }
}
/* 右カラム本文3行目が「す。」だけ折り返すのを防ぐため、右カラムを40%→45%に（2026-10-20） */
@media screen and (min-width: 768px) {
	#fv .text .fv-tip { z-index: 2; }
	#about.about-v3 .about-side { width: 45%; }
}
/* FV吹き出しを「箱」から「表紙2枚＋小さな文字」へ（D2・2026-10-20）。箱・三角・背景は使わない */
#fv .text .fv-tip { background: none; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; left: calc(6 * var(--vw-ratio)); top: calc(100% + 16 * var(--vw-ratio)); max-width: none; }
#fv .text .fv-tip:before { display: none; }
#fv .text .fv-tip-h { font-size: calc(11 * var(--vw-ratio)); font-weight: 500; letter-spacing: .06em; color: #4a5563; margin-bottom: calc(8 * var(--vw-ratio)); }
#fv .text .fv-tip-books { display: flex; gap: calc(14 * var(--vw-ratio)); align-items: flex-start; }
#fv .text .fv-book { display: block; width: calc(132 * var(--vw-ratio)); }
#fv .text .fv-book img { display: block; width: 100%; height: auto; border-radius: calc(6 * var(--vw-ratio)); box-shadow: 0 8px 22px rgba(11,26,58,.18); }
#fv .text .fv-book-t { display: block; margin-top: calc(6 * var(--vw-ratio)); font-size: calc(11 * var(--vw-ratio)); line-height: 1.4; color: #0b1a3a; font-weight: 500; white-space: nowrap; }
#fv .text .fv-book-t small { font-size: calc(10 * var(--vw-ratio)); color: #6b7684; margin-left: .4em; }
@media screen and (max-width: 767px) {
	#fv .text .fv-tip { position: static; margin-top: calc(12 * var(--vw-ratio)); padding: 0; }
	#fv .text .fv-book { width: calc(120 * var(--vw-ratio)); }
}
/* FV特典ブロック C案（2026-10-20 岩河さん指定）: 左に FREE GUIDE／無料ガイド 2冊プレゼント／LINEアイコン＋一言、右に本風の立体表紙2冊。ページ数なし */
#fv .text .fv-line-wrap { position: static; display: inline-block; }
#fv .text .fv-tip { position: absolute; left: 0; top: calc(100% + 26 * var(--vw-ratio)); display: flex; align-items: center; gap: calc(40 * var(--vw-ratio)); width: max-content; max-width: 100%; padding: 0; background: none; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#fv .text .fv-tip:before { display: none; }
#fv .text .fv-tip-l { display: block; }
#fv .text .fv-tip-en { display: block; font-size: calc(11 * var(--vw-ratio)); letter-spacing: .22em; color: #6b7684; margin-bottom: calc(6 * var(--vw-ratio)); }
#fv .text .fv-tip-h { display: block; font-size: calc(22 * var(--vw-ratio)); font-weight: 700; color: #0b1a3a; letter-spacing: .02em; line-height: 1.3; margin: 0 0 calc(8 * var(--vw-ratio)); }
#fv .text .fv-tip-s { display: flex; align-items: center; gap: calc(7 * var(--vw-ratio)); font-size: calc(12 * var(--vw-ratio)); color: #4a5563; font-weight: 500; }
#fv .text .fv-tip-line { width: calc(18 * var(--vw-ratio)); height: calc(18 * var(--vw-ratio)); border-radius: calc(4 * var(--vw-ratio)); background: #06C755; padding: calc(2 * var(--vw-ratio)); box-sizing: border-box; }
#fv .text .fv-tip-books { display: flex; gap: calc(22 * var(--vw-ratio)); align-items: flex-end; }
#fv .text .fv-book { display: block; width: calc(96 * var(--vw-ratio)); text-align: center; }
#fv .text .fv-book img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 10px 16px rgba(11,26,58,.22)); }
#fv .text .fv-book-t { display: block; margin-top: calc(6 * var(--vw-ratio)); font-size: calc(11 * var(--vw-ratio)); line-height: 1.4; color: #0b1a3a; font-weight: 700; white-space: nowrap; }
#fv .text .fv-cta { position: relative; }
@media screen and (max-width: 767px) {
	#fv .text .fv-cta { position: static; }
	#fv .text .fv-tip { position: static; width: 100%; max-width: none; margin-top: calc(18 * var(--vw-ratio)); gap: calc(16 * var(--vw-ratio)); align-items: center; justify-content: space-between; }
	#fv .text .fv-tip-h { font-size: calc(17 * var(--vw-ratio)); }
	#fv .text .fv-tip-s { font-size: calc(11 * var(--vw-ratio)); }
	#fv .text .fv-tip-books { gap: calc(10 * var(--vw-ratio)); }
	#fv .text .fv-book { width: calc(72 * var(--vw-ratio)); }
	#fv .text .fv-book-t { font-size: calc(10 * var(--vw-ratio)); }
}
/* 立体表紙の大きさ調整＋SPは本を下段に（2026-10-20） */
#fv .text .fv-book { width: auto; }
#fv .text .fv-book img { width: auto; height: calc(124 * var(--vw-ratio)); margin: 0 auto; }
@media screen and (max-width: 767px) {
	#fv .text .fv-tip { flex-wrap: wrap; justify-content: flex-start; gap: calc(12 * var(--vw-ratio)) calc(16 * var(--vw-ratio)); }
	#fv .text .fv-tip-l { width: 100%; }
	#fv .text .fv-tip-books { gap: calc(22 * var(--vw-ratio)); }
	#fv .text .fv-book img { height: calc(96 * var(--vw-ratio)); }
}
/* 表紙を写真入りの新デザインに差し替え、立体化はCSS（傾きは rotateY の数値で調整）。白いフチ無し（2026-10-20 岩河さん指定） */
#fv .text .fv-tip-books { perspective: 900px; }
#fv .text .fv-book img { height: calc(136 * var(--vw-ratio)); width: auto; border-radius: 3px; transform: rotateY(-9deg); transform-origin: 50% 50%; box-shadow: 0 10px 22px rgba(11,26,58,.22), 0 0 0 1px rgba(11,26,58,.06); filter: none; }
#fv .text .fv-tip { gap: calc(36 * var(--vw-ratio)); align-items: center; }
@media screen and (max-width: 767px) {
	#fv .text .fv-book img { height: calc(104 * var(--vw-ratio)); }
}
/* 矢印の統一（2026-10-20 岩河さん指定）: サイト全体を線の「→」に。ヘッダーとFVのピルの「丸＋＞」を「→」に変更。色は文字色に追従 */
.btn-pill .arr, #header .hd-cta .arr { width: calc(18 * var(--vw-ratio)); height: calc(10 * var(--vw-ratio)); border: none; border-radius: 0; position: relative; background: none; }
.btn-pill .arr:before, #header .hd-cta .arr:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transform: translateY(-50%); }
.btn-pill .arr:after, #header .hd-cta .arr:after { left: auto; right: 0; top: 50%; width: calc(8 * var(--vw-ratio)); height: calc(8 * var(--vw-ratio)); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; border-color: currentColor; transform: translateY(-50%) rotate(45deg); }
#fv.fv-dawn .btn-pill .arr, #fv.fv-dawn .btn-pill.ghost .arr, #fv.fv-dawn.fv-dawn-light .btn-pill .arr, #fv.fv-dawn.fv-dawn-light .btn-pill.ghost .arr,
body.home:has(#fv.fv-dawn) #header:not(.is-animation) .hd-cta .arr, body.home:has(#fv.fv-dawn-light) #header:not(.is-animation) .hd-cta .arr { border-color: transparent; }
#fv.fv-dawn .btn-pill .arr:after, #fv.fv-dawn .btn-pill.ghost .arr:after, #fv.fv-dawn.fv-dawn-light .btn-pill .arr:after, #fv.fv-dawn.fv-dawn-light .btn-pill.ghost .arr:after,
body.home:has(#fv.fv-dawn) #header:not(.is-animation) .hd-cta .arr:after, body.home:has(#fv.fv-dawn-light) #header:not(.is-animation) .hd-cta .arr:after { border-color: currentColor; }
/* Canvaで作った表紙に差し替え。立体感はほんの少し（傾き8度＋ページの厚み2段＋柔らかい影）2026-10-20 */
#fv .text .fv-book img { height: calc(140 * var(--vw-ratio)); border-radius: 2px 4px 4px 2px; transform: perspective(900px) rotateY(-8deg); transform-origin: 0 50%;
	box-shadow: 2px 2px 0 rgba(255,255,255,.95), 3px 3px 0 rgba(11,26,58,.10), 5px 5px 0 rgba(255,255,255,.95), 6px 6px 0 rgba(11,26,58,.10), 10px 16px 24px rgba(11,26,58,.22); }
#fv .text .fv-tip-books { gap: calc(30 * var(--vw-ratio)); }
@media screen and (max-width: 767px) { #fv .text .fv-book img { height: calc(108 * var(--vw-ratio)); } }
/* SP: 開始位置に達するまで動画を透明に（下の静止画が同じコマなのでチラつかない）2026-10-21 */
@media screen and (max-width: 767px) {
	#fv .fv-bg video.is-prestart { opacity: 0; transition: none; }
}
/* 特典ブロックを .fv-cta の兄弟に（PCは通常配置で下に・SPはJSでFV直下へ移動）2026-10-21 */
#fv .text .fv-tip { position: static; margin-top: calc(26 * var(--vw-ratio)); }
/* SP: CTAを画面下の固定追従バーに（案1・2026-10-21 岩河さん指定）。文字はみ出し対策: nowrap・小さめ・矢印は短く */
@media screen and (max-width: 767px) {
	#fv .text .fv-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; flex-direction: row; align-items: stretch; gap: 8px; padding: 8px;
		background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.85); border-radius: 999px; box-shadow: 0 8px 24px rgba(11,26,58,.16); }
	#fv .text .fv-cta .btn-pill { margin: 0; min-width: 0; padding: 12px 14px; font-size: 12px; white-space: nowrap; justify-content: space-between; gap: 8px; }
	#fv .text .fv-cta > .btn-pill { flex: 0 0 auto; }
	#fv .text .fv-line-wrap { flex: 1 1 auto; display: block; min-width: 0; }
	#fv .text .fv-line-wrap .btn-pill { width: 100%; }
	#fv .text .fv-cta .btn-pill .arr { width: 12px; height: 8px; flex: 0 0 auto; }
	#fv .text .fv-cta .btn-pill .arr:after { width: 6px; height: 6px; }
	body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	/* 特典の帯（FV直下） */
	.fv-gift { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 18px 20px 20px; background: #f6f8fb; border-bottom: 1px solid #e6eaf0; position: relative; z-index: 2; }
	.fv-gift .fv-tip-h { display: block; font-size: 15px; font-weight: 700; color: #0b1a3a; line-height: 1.35; margin: 0 0 6px; }
	.fv-gift .fv-tip-s { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #4a5563; }
	.fv-gift .fv-tip-line { width: 16px; height: 16px; border-radius: 4px; background: #06C755; padding: 2px; box-sizing: border-box; }
	.fv-gift .fv-tip-books { display: flex; gap: 14px; align-items: flex-end; perspective: 700px; flex: 0 0 auto; }
	.fv-gift .fv-book { display: block; text-align: center; }
	.fv-gift .fv-book img { display: block; height: 78px; width: auto; border-radius: 2px 3px 3px 2px; transform: perspective(700px) rotateY(-8deg); transform-origin: 0 50%;
		box-shadow: 2px 2px 0 rgba(255,255,255,.95), 3px 3px 0 rgba(11,26,58,.10), 5px 5px 0 rgba(255,255,255,.95), 6px 6px 0 rgba(11,26,58,.10), 8px 12px 18px rgba(11,26,58,.18); }
	.fv-gift .fv-book-t { display: block; margin-top: 6px; font-size: 9px; font-weight: 700; color: #0b1a3a; white-space: nowrap; }
}
@media screen and (max-width: 374px) {
	#fv .text .fv-cta .btn-pill { font-size: 11px; padding: 11px 12px; }
	.fv-gift .fv-tip-h { font-size: 14px; }
}
/* 固定バーの1段化＋特典の帯の折り返し対策（2026-10-21） */
@media screen and (max-width: 767px) {
	#fv .text .fv-cta { flex-wrap: nowrap; }
	#fv .text .fv-line-wrap { width: auto; flex: 1 1 auto; min-width: 0; }
	#fv .text .fv-line-wrap .btn-pill { width: 100%; box-sizing: border-box; }
	#fv .text .fv-cta > .btn-pill { flex: 0 0 auto; }
	.fv-gift { padding: 16px 16px 18px; gap: 10px; }
	.fv-gift .fv-tip-l { flex: 1 1 auto; min-width: 0; }
	.fv-gift .fv-tip-h { font-size: 14px; white-space: nowrap; }
	.fv-gift .fv-tip-s { font-size: 10.5px; line-height: 1.4; }
	.fv-gift .fv-tip-books { gap: 12px; }
	.fv-gift .fv-book img { height: 64px; }
	.fv-gift .fv-book-t { font-size: 8.5px; }
}
/* SP: 文字を上へ（余白123→80）、人物を下へ（動画を118%に拡大して上端基準）、バーの矢印はみ出し対策（2026-10-21 岩河さん指定） */
@media screen and (max-width: 767px) {
	#fv.fv-dawn { padding-top: calc(80 * var(--vw-ratio)); }
	#fv.fv-dawn .fv-bg video, #fv.fv-dawn .fv-bg img { height: 118%; width: 100%; top: 0; bottom: auto; left: 0; right: 0; object-position: 55% 0; }
	#fv .text .fv-cta .btn-pill { overflow: hidden; }
	#fv .text .fv-cta .btn-pill .arr { margin-left: 6px; }
}
/* 360幅で矢印が欠けないように（2026-10-21） */
@media screen and (max-width: 374px) {
	#fv .text .fv-cta { gap: 6px; padding: 6px; }
	#fv .text .fv-cta .btn-pill { font-size: 10.5px; padding: 11px 10px; gap: 4px; }
	#fv .text .fv-cta .btn-pill .arr { width: 10px; margin-left: 4px; }
}
/* SP: 人物を3%上へ（2026-10-21 岩河さん指定） */
@media screen and (max-width: 767px) {
	#fv.fv-dawn .fv-bg video, #fv.fv-dawn .fv-bg img { top: -3%; }
}
/* FV 映画字幕（2026-10-21 岩河さん発案）: 画面下部中央、白文字＋薄い紺の縁、フェードで出し入れ */
#fv .fv-sub { position: absolute; left: 0; right: 0; bottom: calc(56 * var(--vw-ratio)); z-index: 4; pointer-events: none; text-align: center; height: calc(30 * var(--vw-ratio)); }
#fv .fv-sub-cue { position: absolute; left: 50%; transform: translateX(-50%) translateY(4px); white-space: nowrap; font-size: calc(17 * var(--vw-ratio)); letter-spacing: .08em; font-weight: 500; color: #fff;
	text-shadow: 0 0 2px rgba(11,26,58,.9), 0 1px 2px rgba(11,26,58,.8), 0 0 10px rgba(11,26,58,.35); opacity: 0; transition: opacity .35s ease, transform .35s ease; }
#fv .fv-sub-cue.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media screen and (max-width: 767px) {
	#fv .fv-sub { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); height: 24px; }
	#fv .fv-sub-cue { font-size: 13px; letter-spacing: .06em; white-space: normal; width: 86%; }
}
/* 字幕はPC用とSP用で台本を分ける（SPは2.5秒目開始のため・2026-10-21 岩河さん指定） */
.fv-sub--sp { display: none; }
@media screen and (max-width: 767px) { .fv-sub--pc { display: none; } .fv-sub--sp { display: block; } }
/* 固定バーの矢印はみ出し対策（実機iPhoneでギリギリ溢れたため）＋ 字幕に英語行を追加（2026-10-21） */
.btn-pill .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (max-width: 767px) {
	#fv .text .fv-cta { left: 8px; right: 8px; gap: 6px; padding: 6px; }
	#fv .text .fv-cta .btn-pill { font-size: 11px; padding: 11px 12px; gap: 6px; overflow: visible; }
	#fv .text .fv-cta .btn-pill .arr { width: 11px; margin-left: 0; }
}
#fv .fv-sub { height: calc(48 * var(--vw-ratio)); bottom: calc(50 * var(--vw-ratio)); }
#fv .fv-sub-cue { white-space: normal; width: 90%; }
#fv .fv-sub-cue .en { display: block; font-size: calc(11 * var(--vw-ratio)); letter-spacing: .12em; font-weight: 500; opacity: .9; margin-bottom: calc(3 * var(--vw-ratio)); font-family: "Helvetica Neue", Arial, sans-serif; }
#fv .fv-sub-cue .ja { display: block; }
@media screen and (max-width: 767px) {
	#fv .fv-sub { height: 40px; }
	#fv .fv-sub-cue .en { font-size: 9px; letter-spacing: .08em; margin-bottom: 2px; }
}
/* SP: 2行字幕が固定バーに重ならないよう上げる（2026-10-21） */
@media screen and (max-width: 767px) {
	#fv .fv-sub { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); height: 44px; }
}
/* 字幕: 味のあるフォント（日本語＝しっぽり明朝B1／英語＝Cormorant Garamond斜体）＋少し下へ。固定バーのラベルは中央寄せ（2026-10-21 岩河さん指定） */
#fv .fv-sub-cue .ja { font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 600; letter-spacing: .12em; font-size: calc(18 * var(--vw-ratio)); }
#fv .fv-sub-cue .en { font-family: "Cormorant Garamond", "Times New Roman", serif; font-style: italic; font-weight: 600; font-size: calc(14 * var(--vw-ratio)); letter-spacing: .1em; opacity: .95; }
#fv .fv-sub { bottom: calc(36 * var(--vw-ratio)); }
@media screen and (max-width: 767px) {
	#fv .fv-sub { bottom: calc(98px + env(safe-area-inset-bottom, 0px)); }
	#fv .fv-sub-cue .ja { font-size: 14px; letter-spacing: .1em; }
	#fv .fv-sub-cue .en { font-size: 11px; }
	#fv .text .fv-cta .btn-pill { justify-content: center; }
	#fv .text .fv-cta .btn-pill .lbl { flex: 0 1 auto; }
}
/* 岩河さん制作の立体表紙（透過PNG・影込み）に差し替え。CSSの傾き・影・厚みは全部外す（2026-10-21） */
#fv .text .fv-book img, .fv-gift .fv-book img { transform: none; box-shadow: none; border-radius: 0; filter: none; }
#fv .text .fv-book img { height: calc(150 * var(--vw-ratio)); }
#fv .text .fv-tip-books { gap: calc(18 * var(--vw-ratio)); perspective: none; }
@media screen and (max-width: 767px) { .fv-gift .fv-book img { height: 84px; } .fv-gift .fv-tip-books { gap: 8px; } }
/* 特典ブロック: 本の下は「〜つき」＋書名の2行。PCはボタン2つの幅（約565px）に収める（2026-10-21 岩河さん指定） */
#fv .text .fv-book-t small { display: block; font-size: calc(10 * var(--vw-ratio)); font-weight: 500; color: #6b7684; letter-spacing: .04em; margin-bottom: 2px; }
#fv .text .fv-book-t { font-size: calc(12 * var(--vw-ratio)); line-height: 1.35; }
@media screen and (min-width: 768px) {
	#fv .text .fv-tip { width: calc(565 * var(--vw-ratio)); max-width: calc(565 * var(--vw-ratio)); gap: calc(20 * var(--vw-ratio)); justify-content: space-between; align-items: center; }
	#fv .text .fv-tip-l { flex: 1 1 auto; min-width: 0; }
	#fv .text .fv-tip-h { font-size: calc(19 * var(--vw-ratio)); margin-bottom: calc(6 * var(--vw-ratio)); }
	#fv .text .fv-tip-s { font-size: calc(11 * var(--vw-ratio)); }
	#fv .text .fv-tip-books { flex: 0 0 auto; gap: calc(14 * var(--vw-ratio)); }
	#fv .text .fv-book img { height: calc(128 * var(--vw-ratio)); }
}
.fv-gift .fv-book-t small { display: block; font-size: 8px; font-weight: 500; color: #6b7684; margin-bottom: 1px; }
/* 特典ブロックの右端をLINEボタンの右端に揃える（幅521px相当・2026-10-21） */
@media screen and (min-width: 768px) {
	#fv .text .fv-tip { width: calc(521 * var(--vw-ratio)); max-width: calc(521 * var(--vw-ratio)); gap: calc(16 * var(--vw-ratio)); }
	#fv .text .fv-tip-h { font-size: calc(18 * var(--vw-ratio)); }
	#fv .text .fv-tip-books { gap: calc(12 * var(--vw-ratio)); }
	#fv .text .fv-book img { height: calc(118 * var(--vw-ratio)); }
	#fv .text .fv-book-t { font-size: calc(11 * var(--vw-ratio)); }
	#fv .text .fv-book-t small { font-size: calc(9.5 * var(--vw-ratio)); }
}
/* 本の下の文字: 左揃え・サブを太く。右端をボタン右端(583)にきっちり（2026-10-21 岩河さん指定） */
#fv .text .fv-book, .fv-gift .fv-book { text-align: left; }
#fv .text .fv-book-t small, .fv-gift .fv-book-t small { font-weight: 700; color: #4a5563; }
@media screen and (min-width: 768px) {
	#fv .text .fv-tip { width: calc(521 * var(--vw-ratio)); max-width: calc(521 * var(--vw-ratio)); overflow: visible; }
	#fv .text .fv-tip-books { gap: calc(10 * var(--vw-ratio)); }
	#fv .text .fv-book { width: calc(128 * var(--vw-ratio)); }
	#fv .text .fv-book img { height: calc(110 * var(--vw-ratio)); margin: 0; }
	#fv .text .fv-book-t { font-size: calc(10.5 * var(--vw-ratio)); white-space: nowrap; }
	#fv .text .fv-book-t small { font-size: calc(9 * var(--vw-ratio)); }
}
@media screen and (min-width: 768px) {
	#fv .text .fv-book { width: calc(120 * var(--vw-ratio)); }
	#fv .text .fv-book img { height: calc(104 * var(--vw-ratio)); }
	#fv .text .fv-tip-books { gap: calc(8 * var(--vw-ratio)); }
	#fv .text .fv-tip-l { flex: 0 1 auto; }
	#fv .text .fv-tip { justify-content: space-between; }
}
/* 特典ブロック幅をボタン右端(583px相当)に固定し、中身を縮めて収める（2026-10-21） */
@media screen and (min-width: 768px) {
	#fv .text .fv-tip { width: calc(521 * var(--vw-ratio)) !important; max-width: calc(521 * var(--vw-ratio)) !important; box-sizing: border-box; overflow: hidden; }
	#fv .text .fv-tip-l { flex: 1 1 0; min-width: 0; }
	#fv .text .fv-tip-books { flex: 0 0 auto; }
	#fv .text .fv-book { width: calc(112 * var(--vw-ratio)); }
	#fv .text .fv-book img { height: calc(100 * var(--vw-ratio)); }
	#fv .text .fv-book-t { font-size: calc(10 * var(--vw-ratio)); }
	#fv .text .fv-book-t small { font-size: calc(8.5 * var(--vw-ratio)); }
}
/* 幅の基準が1400pxなので 521px(1440幅) = 506単位（2026-10-21） */
@media screen and (min-width: 768px) {
	#fv .text .fv-tip { width: calc(506 * var(--vw-ratio)) !important; max-width: calc(506 * var(--vw-ratio)) !important; }
	#fv .text .fv-book { width: calc(108 * var(--vw-ratio)); }
	#fv .text .fv-book img { height: calc(96 * var(--vw-ratio)); }
}
/* 特典ブロック微調整（2026-10-21 岩河さん指定）: 文字を本の中央に、本1.1倍、コピーと本の間を詰める。幅はLINEボタン右端まで */
@media screen and (min-width: 768px) {
	#fv .text .fv-tip { gap: calc(10 * var(--vw-ratio)); justify-content: flex-start; }
	#fv .text .fv-tip-l { flex: 0 0 auto; }
	#fv .text .fv-tip-books { gap: calc(8 * var(--vw-ratio)); margin-left: auto; }
	#fv .text .fv-book { width: auto; display: flex; flex-direction: column; align-items: center; }
	#fv .text .fv-book img { height: calc(106 * var(--vw-ratio)); width: auto; }
	#fv .text .fv-book-t { text-align: center; width: 100%; }
	#fv .text .fv-book-t small { text-align: center; }
}
/* コピーと本の間を詰める（本を右端寄せでなく左の文字の直後に）2026-10-21 */
@media screen and (min-width: 768px) {
	#fv .text .fv-tip-books { margin-left: calc(22 * var(--vw-ratio)); }
}