@charset "UTF-8";
/**
 * フロントページ(トップ)固有スタイル(KV / Guide / CEO Message)。
 *
 * 共通トークン(:root)はcommon.css側で定義。
 */

/**
 * KV(メインビジュアル)。
 *
 * 設計はPC 1440×935 / SP 390×660。背景はサイト設定(ACF)の動画をループ再生する。
 * ファーストビューに収めるため高さは100svh(動画はcoverで全面)。
 * コピーは<h1>のライブテキストで、設計のアートボード比をビューポート幅で再現した枠(.kv__copy)に
 * 収める。枠の中心は設計PCの744ではなく枠中心の720へ揃え、SPと同じ中央寄せに一本化している。
 * ヘッダーは透過fixedで上に重なる。
 */
.kv {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	/* 動画読み込み前・poster表示前の下地。 */
	background: var(--c-black);
}

.kv__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**
 * 動画とコピーの間に敷く減光。コピーとヘッダーの白文字のコントラストを確保する。
 * DOM順(動画→本要素→コピー)がそのまま重なり順になるためz-indexは持たない。
 * ヘッダーは.kvの外の透過fixedなので減光の上に乗る。
 */
.kv__overlay {
	position: absolute;
	inset: 0;
	background: rgba(35, 24, 21, 0.35); /* #231815 / 35%。 */
}

/**
 * コピー枠。設計のアートボード比をビューポート幅で再現し縦中央へ置く。
 * はみ出す上下余白は.kvのoverflow:hiddenでクリップする。
 */
.kv__copy {
	/* 文字の伸縮を枠幅基準のcqwにして、%指定の位置と基準を揃える。vwはスクロールバー幅を
	   含むぶん枠幅とずれ、--u-pcはmin()で1440超が1pxに頭打ちになるため、どちらも使わない。 */
	container-type: inline-size;
	--u: 0.06944cqw; /* 1px@1440 */
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	aspect-ratio: 1440 / 811;
	margin: 0;
	transform: translateY(-50%);
	pointer-events: none;
}

/* 和文の折返しはSPのみ(設計はPC1行/SP2行)。 */
.kv br[data-sp] {
	display: none;
}

/**
 * 英字コピー。設計は高さ99の箱へ88pxのAUTO行boxを中央寄せしている(valign:CENTER)。
 * CSSも行box99の中に同じcontent areaを中央寄せするため、line-heightを99/88にすると
 * 箱の上端どうしが一致し、フォントメトリクスを知らなくても設計と揃う。
 *
 * 横は枠中心へ寄せる(PC/SP共通)。設計のPCは中心744で枠中心720から24ずれているが、
 * SPは画面中心に揃っているためPCも中央で統一する。
 * 幅はfit-content固定=グラデーションの塗り範囲を字送りに保つ(全幅にすると設計より広がる)。
 */
.kv__copy-en {
	position: absolute;
	left: 0;
	right: 0;
	top: 45.869%; /* 372 / 811 */
	width: fit-content;
	margin-inline: auto;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: calc(88 * var(--u));
	line-height: 1.125; /* 99 / 88 */
	color: var(--c-white);
	white-space: nowrap;
}

/**
 * 「Add Your Color.」の色替え。設計のグラデーションはx1=20→x2=722(=字送り702)の
 * 水平方向なので、文字幅いっぱいの90degになる(要素幅は絶対配置のshrink-to-fit=字送り)。
 *
 * 停止色を@propertyで<color>として登録するのは、background-imageの補間が既定で離散=
 * キーフレームに直書きすると色が飛ぶため。未対応環境ではvar()の既定値で白に落ちる。
 */
@property --kv-c1 {
	syntax: "<color>";
	inherits: false;
	initial-value: #fff;
}

@property --kv-c2 {
	syntax: "<color>";
	inherits: false;
	initial-value: #fff;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.kv__copy-en {
		background-image: linear-gradient(90deg, var(--kv-c1, #fff), var(--kv-c2, #fff));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: kv-color 11s ease-in-out infinite;
	}
}

/**
 * 同値のオフセット対が停留、その間が遷移。ease-in-outは区間ごとに掛かるので遷移だけが緩む。
 * 11s周期: 白1.9s停留 → 各色1.0s停留を1.5sで繋ぎ → 1.5s掛けて白へ戻す。
 * 白の停留だけ絶対時間を据え置き、色の区間を詰めてある。
 */
@keyframes kv-color {
	0%,
	17% {
		--kv-c1: #fff;
		--kv-c2: #fff;
	}

	31%,
	40% {
		--kv-c1: #29b2df;
		--kv-c2: #2839f1;
	}

	54%,
	63% {
		--kv-c1: #675af6;
		--kv-c2: #f83639;
	}

	77%,
	86% {
		--kv-c1: #ed6a18;
		--kv-c2: #12ae0a;
	}

	100% {
		--kv-c1: #fff;
		--kv-c2: #fff;
	}
}

/* 巡回を止めても@propertyの初期値で設計1カット目の白になる。 */
@media (prefers-reduced-motion: reduce) {
	.kv__copy-en {
		animation: none;
	}
}

/**
 * 和文コピー。設計はvalign:TOPなので箱の上端が1行目の行box上端。
 * 横は全幅+text-align:centerで枠中心へ寄せる(PC/SP共通・英字と同じ軸に乗る)。
 */
.kv__copy-ja {
	position: absolute;
	left: 0;
	top: 58.940%; /* 478 / 811 */
	width: 100%;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(24 * var(--u)));
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--c-white);
}

@media (max-width: 768px) {
	.kv__copy {
		--u: 0.25641cqw; /* 1px@390 */
		aspect-ratio: 390 / 660;
	}

	.kv br[data-sp] {
		display: inline;
	}

	/* SPの箱は自動高(textAutoResize:WIDTH_AND_HEIGHT)=AUTO行boxそのもの。 */
	.kv__copy-en {
		top: 45%; /* 297 / 660 */
		font-size: calc(42 * var(--u));
		line-height: 1.214; /* 51 / 42 */
	}

	.kv__copy-ja {
		top: 53.485%; /* 353 / 660 */
		font-size: max(1.2rem, calc(16 * var(--u)));
		line-height: 1.8; /* 28.8 / 16 */
	}
}

/**
 * Guide(コンテンツナビ:交わることで〜+ 6カード)。
 *
 * 設計はPC 1440で、内容ブロック(1198)を中央寄せ。
 * スケール単位--u = 1px@1440(以下はビューポート等倍で縮小、1440以上は据え置き)。
 * 各寸法はcalc(設計px * --u)。
 * 上段=写真付きカプセル、下段=円。影は#231815のドロップ。
 */
.guide {
	--u: var(--u-pc);
	--c-ink: #221814; /* 見出し以外のカード文字(:rootに無いローカルトークン)。 */
	background: var(--c-white);
	padding: calc(150 * var(--u)) 0;
}

.guide__inner {
	width: calc(1198 * var(--u));
	margin-inline: auto;
}

.guide__head {
	text-align: center;
	color: var(--c-black);
}

.guide__title {
	margin: 0;
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(38 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.guide__lead {
	margin: calc(50.4 * var(--u)) 0 0;
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(24 * var(--u)));
	line-height: 2;
}

/**
 * SP専用の改行。PCでは無効化(PCの改行は素の<br>で行う)。
 */
.guide__br--sp {
	display: none;
}

.guide__grid {
	margin-top: calc(149 * var(--u));
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: calc(50 * var(--u));
	row-gap: calc(60 * var(--u));
}

.guide__item {
	display: flex;
}

.guide__card {
	flex: 1;
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--c-white);
	color: var(--c-ink);
	box-shadow: var(--card-shadow);
	transition: box-shadow 0.3s ease;
}

/**
 * PCではラッパーを透過させ、label/captionをカード直下として扱う。
 * SPの横型ピルでのみ実体化して写真の右にテキストを積む。
 */
.guide__body {
	display: contents;
}

.guide__card--pill {
	min-height: calc(693.7 * var(--u));
	padding: calc(31.83 * var(--u)) 0 calc(83.07 * var(--u));
	border-radius: calc(183 * var(--u));
	--card-shadow: calc(20 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)) rgba(35, 24, 21, 0.2);
}

.guide__photo {
	width: calc(314.6 * var(--u));
	height: calc(314.6 * var(--u));
	border-radius: 50%;
	object-fit: cover;
}

.guide__card--circle {
	width: 100%;
	aspect-ratio: 1;
	justify-content: flex-start;
	padding-top: calc(93 * var(--u));
	border-radius: 50%;
	--card-shadow: calc(20 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u)) rgba(35, 24, 21, 0.25);
}

.guide__label {
	font-family: var(--ff-jp);
	font-weight: 600;
	font-size: max(1.2rem, calc(38 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
	transition: color 0.3s ease;
}

.guide__card--pill .guide__label {
	margin-top: calc(65 * var(--u));
}

/**
 * キャプション。名前(英字)はカード中央、"About"は左寄せ(左端から49.5)。
 */
.guide__caption {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.guide__card--pill .guide__caption {
	margin-top: calc(64.4 * var(--u));
}

.guide__card--circle .guide__caption {
	margin-top: calc(54.4 * var(--u));
}

.guide__about {
	padding-left: calc(49.5 * var(--u));
	text-align: left;
	font-family: var(--ff-mont);
	font-weight: 500;
	font-size: max(1.2rem, calc(36 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--c-sub);
	transition: color 0.3s ease;
}

.guide__name {
	margin-top: calc(2.8 * var(--u));
	text-align: center;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(36 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--c-ink);
	transition: color 0.3s ease;
}

/**
 * カードホバー。背景をグラデーションに、文字を白にして0.3sでフェードする。
 *
 * gradientはtransition不可のため::beforeオーバーレイのopacityを0→1で切替える
 * (box-shadow/文字色は各要素側でtransition)。
 * 配色はカード別に--hover-bg / --hover-fgで指定(未指定カードは不変)。
 */
.guide__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: var(--hover-bg);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.guide__card:hover::before {
	opacity: 1;
}

.guide__card:hover {
	box-shadow: var(--hover-shadow, var(--card-shadow));
}

.guide__card:hover .guide__label {
	color: var(--hover-fg, inherit);
}

.guide__card:hover .guide__about {
	color: var(--hover-fg, var(--c-sub));
}

.guide__card:hover .guide__name {
	color: var(--hover-fg, var(--c-ink));
}

.guide__card--company,
.guide__card--works,
.guide__card--person,
.guide__card--workstyle,
.guide__card--culture,
.guide__card--information {
	--hover-fg: var(--c-white);
	--hover-shadow: none;
}

.guide__card--company {
	--hover-bg: linear-gradient(180deg, #8bd9ef 0%, #29b2df 100%);
}

.guide__card--works {
	--hover-bg: linear-gradient(180deg, #ff999e 0%, #f83639 100%);
}

.guide__card--person {
	--hover-bg: linear-gradient(180deg, #6893ff 0%, #2839f1 100%);
}

.guide__card--workstyle {
	--hover-bg: linear-gradient(180deg, #6ee24e 0%, #12ae0a 100%);
}

.guide__card--culture {
	--hover-bg: linear-gradient(180deg, #f89941 0%, #ed6a18 100%);
}

.guide__card--information {
	--hover-bg: linear-gradient(180deg, #8d77ff 0%, #675af6 100%);
}

/**
 * CEO Message(社長メッセージ)。
 *
 * 設計はPC 1440×480。背景は全幅、内容は最大1440へ内包。
 * 写真は設計で329角の円(Ellipseでマスク)。
 * スケール単位--u = 1px@1440(以下はビューポート等倍で縮小、1440以上は据え置き)。
 * 各寸法はcalc(設計px * --u)で表現する(線幅border:2pxのみ--u非依存の固定値)。
 */
.msg {
	--u: var(--u-pc);
	background: rgba(35, 24, 21, 0.07); /* #231815 / 7%。 */
}

.msg__inner {
	width: 100%;
	max-width: 1440px;
	min-height: calc(480 * var(--u));
	margin-inline: auto;
	/* 設計の内容ブロックは上53/下57で、セクション中央(240)より2px上の238が中心。
	   縦中央寄せ(align-items:center)はこのpaddingの内側で効くため設計位置に一致する。 */
	padding-block: calc(53 * var(--u)) calc(57 * var(--u));
	/* 設計の内容は左268.5〜右1166.5(枠1440)。左右で5px違うのは設計側の値どおり。 */
	padding-inline: calc(268.5 * var(--u)) calc(273.5 * var(--u));
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(40 * var(--u));
}

.msg__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.msg__title {
	margin: 0;
	color: var(--c-black);
}

.msg__title-en {
	display: block;
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(60 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.msg__title-ja {
	display: block;
	margin-top: calc(8 * var(--u));
	font-family: var(--ff-jp);
	font-weight: 500;
	font-size: max(1.2rem, calc(34 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.msg__more {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(22 * var(--u));
	width: calc(300 * var(--u));
	height: calc(80 * var(--u));
	margin-top: calc(36.2 * var(--u));
	box-sizing: border-box;
	border: 2px solid currentColor;
	border-radius: calc(14 * var(--u));
	color: var(--c-black);
	transition: border-color 0.3s ease;
}

/**
 * Read Moreのホバー。黄色グラデーションで塗り、枠は透明化して0.3sでフェードする。
 *
 * gradientはtransition不可のため::beforeのopacityを0→1で切替える。
 * ::beforeはinset:-2pxでborder-box(2px枠の外周)に一致させる。
 */
.msg__more::before {
	content: "";
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background-image: linear-gradient(180deg, #ffe02f 0%, #ffc21b 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.msg__more:hover::before {
	opacity: 1;
}

.msg__more:hover {
	border-color: transparent;
}

.msg__more-icon {
	flex-shrink: 0;
	width: calc(26 * var(--u));
	height: auto;
}

.msg__more-text {
	font-family: var(--ff-mont);
	font-weight: 600;
	font-size: max(1.2rem, calc(26 * var(--u)));
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.msg__figure {
	flex-shrink: 0;
}

.msg__photo {
	width: calc(329 * var(--u));
	height: calc(329 * var(--u));
	object-fit: cover;
	/* 原寸1044x658を円へcoverすると横に386pxはみ出す。壁のADDIXロゴの右上(x282,y457)が
	   円の外へ出る位置。 */
	object-position: 67.8% center;
	border-radius: 50%;
}

@media (max-width: 768px) {
	/**
	 * Guide SP(設計は390基準・380幅アートボード)。
	 *
	 * 縦1列。上段=横型ピル(写真左・テキスト右)、下段=円。
	 * 影は黒rgba(0,0,0,.2/.25)、offset(5,5)/blur20。
	 */
	.guide {
		--u: var(--u-sp); /* 390基準の純vw。ビューポート幅に比例して伸縮させ画面へフィットさせる。 */
		padding: calc(120 * var(--u)) 0 calc(80 * var(--u));
	}

	.guide__inner {
		width: calc(340 * var(--u));
	}

	.guide__br--sp {
		/* 設計の改行は見出し2行・リード8行。 */
		display: inline;
	}

	.guide__title {
		font-size: max(1.2rem, calc(30 * var(--u)));
		line-height: 1.4;
	}

	.guide__lead {
		margin-top: calc(30 * var(--u));
		font-size: max(1.2rem, calc(16 * var(--u)));
		line-height: 2;
		/* SPのみ字間2%(PCは0)。 */
		letter-spacing: 0.02em;
	}

	.guide__grid {
		margin-top: calc(80 * var(--u));
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: calc(30 * var(--u));
	}

	.guide__item {
		justify-content: center;
	}

	.guide__card--pill {
		width: 100%;
		min-height: calc(178 * var(--u));
		flex-direction: row;
		align-items: flex-start;
		padding: 0 calc(34 * var(--u)) 0 calc(19 * var(--u));
		border-radius: calc(89 * var(--u));
		--card-shadow: calc(5 * var(--u)) calc(5 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.2);
	}

	.guide__photo {
		width: calc(147 * var(--u));
		height: calc(147 * var(--u));
		margin-top: calc(15.5 * var(--u)); /* 設計のピル高178内で縦中央。 */
		flex: none;
	}

	/**
	 * 写真右のテキスト塊。タイトル幅にシュリンクして中央寄せする。
	 */
	.guide__card--pill .guide__body {
		display: inline-flex;
		flex-direction: column;
		margin-top: calc(41 * var(--u));
		margin-inline: auto;
	}

	.guide__card--circle {
		flex: none;
		width: calc(190 * var(--u));
		aspect-ratio: 1;
		justify-content: flex-start;
		padding-top: calc(47 * var(--u));
		border-radius: 50%;
		--card-shadow: calc(5 * var(--u)) calc(5 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.25);
	}

	.guide__label {
		font-size: max(1.2rem, calc(20 * var(--u)));
		/* SPのみ行間160%・字間0(PCは120%・2%)。 */
		line-height: 1.6;
		letter-spacing: 0;
	}

	.guide__card--pill .guide__label {
		margin-top: 0;
	}

	.guide__card--pill .guide__caption,
	.guide__card--circle .guide__caption {
		margin-top: calc(18 * var(--u));
	}

	.guide__about {
		padding-left: 0;
		font-size: max(1.2rem, calc(20 * var(--u)));
	}

	.guide__card--circle .guide__about {
		padding-left: calc(23.5 * var(--u));
	}

	.guide__name {
		/* Aboutの行box(20px×120%=24)に対し設計の英字は22間隔のため負マージンで詰める。 */
		margin-top: calc(-2 * var(--u));
		font-size: max(1.2rem, calc(20 * var(--u)));
	}

	/**
	 * CEO Message SP(設計は390×573)。
	 *
	 * --uを390基準の純vwへ切替え、縦積み(見出し→Read More→写真)にする。
	 * ボタンの枠/角丸/gapはPC共通ルールを継承(他の寸法はSP値へ上書き)。
	 */
	.msg {
		--u: var(--u-sp);
	}

	.msg__inner {
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		min-height: 0;
		padding: calc(63.76 * var(--u)) calc(25 * var(--u)) calc(63.74 * var(--u));
		gap: calc(50 * var(--u));
	}

	.msg__title-en {
		font-size: max(1.2rem, calc(40 * var(--u)));
	}

	.msg__title-ja {
		margin-top: calc(8 * var(--u));
		/* SPのみ太さ600・行間160%・字間0(PCは500・120%・2%)。 */
		font-weight: 600;
		font-size: max(1.2rem, calc(20 * var(--u)));
		line-height: 1.6;
		letter-spacing: 0;
	}

	.msg__more {
		width: calc(245 * var(--u));
		height: calc(64 * var(--u));
		margin-top: calc(29 * var(--u));
	}

	.msg__more-icon {
		width: calc(20 * var(--u));
	}

	.msg__more-text {
		font-size: max(1.2rem, calc(20 * var(--u)));
	}

	.msg__photo {
		width: 100%;
		height: auto;
		/* SPは切り出しのないカットを出すため、枠比を写真の実比(3:2)に合わせる。 */
		aspect-ratio: 3 / 2;
		border-radius: calc(8.5 * var(--u));
	}
}