@charset "utf-8";
.loading_base {
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		z-index: 5000;
		height: 100vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
}
.loading_logo {
		width: 120px;
		animation: loadingLogoWrap 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.loadingFill {
		stroke: transparent;
		fill: #f5f5f5;
		animation: loadingLogo 0.8s linear forwards;
}
@keyframes loadingLogoWrap {
		0% {
				transform: scale(4);
		}
		100% {
				transform: scale(1);
		}
}
@keyframes loadingLogo {
		0% {
				fill: transparent;
		}
		40% {
				fill: #f5f5f5;
		}
		100% {
				fill: #C2153E;
		}
}
@media (max-width: 1194px) {
		.verLandscape .loading_logo {
				width: 70px;
		}
}
@media(max-width: 567px) {
		.loading_logo {
				width: 50px;
		}
}
.desktop_global > li > a {
		color: #fff;
}
.top_cont {
		display: none;
}
.isActive .desktop_global > li > a {
		color: #222;
}
.fv_inner, .top_who_section, .top_about_section, .top_news_section {
		padding-left: 140px;
		padding-right: 140px;
}
.header_logo img {
		opacity: 0;
}
.header_logo {
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
		background-image: url("../images/hdr_logo_wht.png");
}
.isActive .header_logo {
		background-image: url("../images/hdr_logo.png");
}
header .header_inner, header .header_trigger {
		transition: opacity 0.8s;
		transition-delay: 0.5s;
		opacity: 0;
}
.fv_scroll {
		transition: opacity 0.8s;
		transition-delay: 0.8s;
		opacity: 0;
}
header.isStart .header_inner, header.isStart .header_trigger, .fvStart .fv_scroll {
		opacity: 1;
}
.fv_section {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* background-image: url("../images/kv_pc.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center; */
}
@media (min-width: 768px) and (max-width: 1194px) {
		.fv_section {
				/* background-image: url("../images/kv_mid.jpg");
				background-size: 100%;
				background-repeat: no-repeat;
				background-position: 0 0; */
		}
}
.fv_section {
		background: none !important;
		overflow: hidden;
}
.video_player {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100vh;
		overflow: hidden;
}
/* .video_player::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		mix-blend-mode: multiply;
} */
.video_player video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto;
		z-index: -1;
}
.top_cont {
		position: relative;
		z-index: 5;
		background: #E9E9E9;
		margin-top: 200vh;
}
.fv_inner {
		display: flex;
		/* align-items: center; */
		align-items: center;
		position: relative;
		z-index: 5;
		mix-blend-mode: difference;
}
.fv_catch {
		color: #fff;
}
.fv_catch_lead {
		font-size: 60px;
		font-weight: 900;
		line-height: 1.5;
		margin: 0 0 35px;
		letter-spacing: 0.03em;
}
.fv_catch_en {
		font-size: 26px;
		font-family: 'Poppins', sans-serif;
		font-weight: 500;
		letter-spacing: 0.03em;
}
.fv_catch_lead_1st, .fv_catch_lead_2nd, .fv_catch_lead_3rd, .fv_catch_en {
		transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s;
		opacity: 0;
		transform: translateY(30px);
}
.fv_catch_lead_2nd {
		transition-delay: 0.08s;
}
.fv_catch_lead_3rd {
		transition-delay: 0.16s;
}
.fv_catch_en {
		transition-delay: 0.16s;
}
@media(max-width: 767px) {
		.fv_catch_en {
				transition-delay: 0.24s;
		}
}
.fvStart .fv_catch_lead_1st, .fvStart .fv_catch_lead_2nd, .fvStart .fv_catch_lead_3rd, .fvStart .fv_catch_en {
		opacity: 1;
		transform: translateY(0px)
}
/* */
.fv_section .fv_scroll {
		position: absolute;
		width: 12px;
		right: 60px;
		bottom: 0;
		height: 140px;
		cursor: pointer;
		z-index: 10;
		overflow: hidden;
}
.fv_scroll img {
		width: 100%;
		height: auto;
}
.fv_scroll::before, .fv_scroll::after {
		content: '';
		display: block;
		position: absolute;
		top: 70px;
		left: 5px;
		width: 1px;
		height: 100px;
}
.fv_scroll::before {
		background: #fff;
}
.fv_scroll::after {
		height: 10px;
		background: #C2153E;
		animation: scrollIcon 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
		transform-origin: center top;
}
@keyframes scrollIcon {
		0% {
				top: 70px;
				opacity: 1;
				transform: scaleY(1)
		}
		80% {
				top: 140px;
				opacity: 1;
				transform: scaleY(4)
		}
		100% {
				top: 140px;
				opacity: 0;
				transform: scaleY(4)
		}
}
/* ================ */
/* WHO WE ARE */
.top_who_section {
		background: #fff;
		padding-top: 130px;
		padding-bottom: 120px;
		position: relative;
		overflow: hidden;
}
/* 左に斜めの群衆ビジュアル */
.top_who_visual {
		position: absolute;
		top: 0;
		left: 0;
		width: 46%;
		height: 100%;
		z-index: 1;
		clip-path: polygon(0 0, 100% 0, calc(100% - 150px) 100%, 0 100%);
		overflow: hidden;
}
/* ビジュアル内側ラッパー（クリップ枠。ズームは廃止、パララックスのみ） */
.top_who_visual_zoom {
		position: absolute;
		inset: 0;
		display: block;
		overflow: hidden;
}
/* img層：横に大きめに持たせ、その余白分をtranslateXで左右パララックス */
.top_who_visual_img {
		position: absolute;
		top: 0;
		left: -25%;
		width: 150%;
		height: 100%;
		display: block;
		background-size: cover;
		background-position: center center;
		will-change: transform;
}
/* 画像の右端を白へなじませる */
.top_who_visual_img::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 70%, rgba(255,255,255,0.12) 100%);
}
.top_who_section_inner {
		max-width: 1180px;
		margin: 0 auto;
		position: relative;
		z-index: 2;
}
.top_who_inner {
		margin-left: auto;
		width: 52%;
}
/* このセクションの英字はリンクではなくラベルなので、60px（＝リンクの記号）より小さくする */
.top_who_section .section_title_en {
		font-size: 34px;
}
.top_who_section .section_title {
		margin-bottom: 45px;
}
.top_who_catch {
		font-family: YakuHanMP, 'Shippori Mincho', serif;
		font-size: 64px;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: 0.04em;
		color: #222;
		margin: 0 0 55px;
}
.top_who_body {
		max-width: 840px;
		margin: 0 0 50px;
}
.top_who_body p {
		font-size: 16px;
		line-height: 1.9;
		color: #333;
		margin: 0 0 16px;
}
.top_who_body p:last-child {
		margin-bottom: 0;
}
.top_who_link {
		font-size: 18px;
		font-family: 'Poppins', sans-serif;
		font-weight: 700;
		line-height: 1;
		text-align: right;
}
.top_who_link a {
		color: #222;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
}
.top_who_link .arrowBaseS {
		position: relative;
		width: 30px;
		height: 30px;
		background: #c2153e;
		display: inline-block;
		overflow: hidden;
		margin-left: 20px;
		flex-shrink: 0;
}
@media (hover: hover) {
		.top_who_link a:hover .arrowBaseS::after {
				animation: arrowRight 0.4s linear forwards;
		}
}
/* 「熱狂」の炎グラデーション（JSで1文字ずつに分割されると .fireChar 側が効く） */
.top_who_catch .fireText, .top_who_catch .fireChar {
		/* 1層目＝上半分の黒（固定）／2層目＝下の炎（こちらだけ動かす） */
		background-image:
				linear-gradient(0deg, rgba(34, 34, 34, 0) 34%, #222 58%, #222 100%),
				linear-gradient(0deg, #F26B1E 0%, #DE3A26 30%, #C81C39 62%, #A8112F 100%);
		background-size: 100% 100%, 100% 140%;
		background-position: 50% 0%, 50% 100%;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: fireFlicker 5s ease-in-out infinite;
}
/* 2文字が同時に揺れないよう位相をずらす */
.top_who_catch .fireChar + .fireChar {
		animation-delay: -1.7s;
}
@keyframes fireFlicker {
		0% {
				background-position: 50% 0%, 50% 100%;
		}
		50% {
				background-position: 50% 0%, 50% 62%;
		}
		100% {
				background-position: 50% 0%, 50% 100%;
		}
}
@media (prefers-reduced-motion: reduce) {
		.top_who_catch .fireText, .top_who_catch .fireChar {
				animation: none;
		}
}
/* reveal：サブ見出し・見出し・キャッチのみ。本文とリンクは常時表示 */
.top_who_inner .section_title_jp, .top_who_inner .section_title_en {
		opacity: 0;
		transform: translateY(20px);
		transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
}
.top_who_inner .section_title_en {
		transition-delay: 0.08s;
}
.whoActive .section_title_jp, .whoActive .section_title_en {
		opacity: 1;
		transform: translateY(0);
}
/* キャッチは1文字ずつ（transition-delayはJSで付与） */
.top_who_catch .who_char {
		display: inline-block;
		line-height: 1;
		opacity: 0;
		transform: translateY(24px);
		transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s;
}
.whoActive .top_who_catch .who_char {
		opacity: 1;
		transform: translateY(0);
}
/* タブレット以下：斜めレイアウトを解除し、画像を上部の横帯に */
@media(max-width: 1194px) {
		.top_who_visual {
				position: relative;
				width: 100%;
				height: 42vw;
				max-height: 420px;
				clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
				margin-bottom: 60px;
		}
		.top_who_inner {
				width: 100%;
		}
}
@media(max-width: 960px) {
		.top_who_catch {
				font-size: 48px;
				margin: 0 0 45px;
		}
}
/* // WHO WE ARE */
/* ================ */
/* SERVICE (new) ＝ WHOのミラー：左テキスト・右ビジュアル。赤黒・熱狂トーン */
.top_service2_section {
		background: #141013;
		color: #fff;
		padding: 120px 0 130px;
		position: relative;
		overflow: hidden;
}
.top_service2_inner {
		max-width: 1180px;
		margin: 0 auto;
		padding: 0 60px;
		position: relative;
		z-index: 2;
}
.top_service2_section .section_title {
		margin-bottom: 22px;
}
.top_service2_section .section_title_jp {
		color: #fff;
}
.top_service2_section .section_title_en a {
		color: #fff;
}
/* 旗＝何屋か（必須）。「広告代理店」に赤アンダーライン */
.service2_flag {
		font-size: 30px;
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: 0.02em;
		margin: 0 0 70px;
}
.service2_flag span {
		position: relative;
		white-space: nowrap;
}
.service2_flag span::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -4px;
		width: 100%;
		height: 3px;
		background: #C2153E;
}
/* 本体：左リスト・右ビジュアル */
.top_service2_body {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
}
.top_service2_list {
		width: 44%;
}
.service2_item {
		padding: 40px 0;
		border-top: 1px solid rgba(255,255,255,0.14);
		cursor: pointer;
		transition: opacity 0.4s;
}
.service2_item:last-child {
		border-bottom: 1px solid rgba(255,255,255,0.14);
}
@media (hover: hover) {
		/* 非hover項目も読める範囲で薄く（情報はゲートしない） */
		.top_service2_list:hover .service2_item {
				opacity: 0.65;
		}
		.top_service2_list:hover .service2_item:hover {
				opacity: 1;
		}
}
.service2_item_no {
		font-family: 'Poppins', sans-serif;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.08em;
		color: #C2153E;
		margin: 0 0 18px;
}
.service2_item_no span {
		color: #C2153E;
		margin-left: 6px;
}
.service2_item_ttl {
		font-size: 30px;
		font-weight: 700;
		line-height: 1.4;
		letter-spacing: 0.02em;
		margin: 0 0 16px;
}
.service2_item_desc {
		font-size: 15px;
		line-height: 1.9;
		color: #cfcccd;
		margin: 0 0 24px;
		max-width: 460px;
}
.service2_item_link {
		font-size: 16px;
		font-family: 'Poppins', 'Noto Sans JP', sans-serif;
		font-weight: 700;
		line-height: 1;
}
.service2_item_link a {
		color: #fff;
		text-decoration: none;
		display: inline-flex;
		align-items: center;
}
.service2_item_link .arrowBaseS {
		position: relative;
		width: 28px;
		height: 28px;
		background: #C2153E;
		display: inline-block;
		overflow: hidden;
		margin-left: 16px;
		flex-shrink: 0;
}
@media (hover: hover) {
		/* box全体がactive(hover)になったら矢印が飛ぶ */
		.service2_item:hover .arrowBaseS::after {
				animation: arrowRight 0.4s linear forwards;
		}
}
/* SP用の項目内画像はPCでは隠す（右の共通ビジュアルを使う） */
.service2_item_img {
		display: none;
}
/* 右ビジュアル：hoverで01/02をフェード切替 */
.top_service2_visual {
		position: absolute;
		top: 0;
		right: 0;
		width: 50%;
		height: 100%;
		z-index: 1;
		clip-path: polygon(100% 0, 100% 0, 100% 100%, calc(100% + 150px) 100%);
		overflow: hidden;
		transition: clip-path 1s cubic-bezier(0.76, 0, 0.24, 1);
		will-change: clip-path;
}
/* スクロールで斜めに開く（ワイプ・リヴィール）。SERVICE固有の斜めを活かす */
.top_service2_visual.revealActive {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 150px 100%);
}
/* ビジュアルのレイヤー：デフォルト＋hover(01=a1/a2交互, 02=b) */
.service2_v_layer {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center center;
		opacity: 0;
		transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
}
/* デフォルト（#2 暗いオフィス）：非hover時に表示 */
.service2_v_default {
		background-image: url(../images/service2_default.jpg);
		opacity: 1;
		transform: scale(1.16);
		will-change: transform;
}
.top_service2_visual.is-a .service2_v_default,
.top_service2_visual.is-b .service2_v_default {
		opacity: 0;
}
/* グループ：default⇄hover のクロスフェード担当（旧に切り替わる驚き防止） */
.service2_v_a,
.service2_v_b {
		position: absolute;
		inset: 0;
		opacity: 0;
		transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.top_service2_visual.is-a .service2_v_a { opacity: 1; }
.top_service2_visual.is-b .service2_v_b { opacity: 1; }
/* 背景割り当て（A=01, B=02） */
.service2_v_a1 { background-image: url(../images/service2_a1.jpg); }
.service2_v_a2 { background-image: url(../images/service2_a2.jpg); }
.service2_v_b1 { background-image: url(../images/service2_b.jpg); }
.service2_v_b2 { background-image: url(../images/service2_b2.jpg); }
/* 各グループ内2枚：Ken Burns（fade+パン、切替時に位置リセット）を半周ずらしで交互 */
/* 01(A)は左→右パン、02(B)は逆の右→左パン */
.top_service2_visual.is-a .service2_v_a1 {
		animation: s2Pan 14s ease-in-out infinite both, s2Fade 4s ease-in-out infinite both; /* パンは元スピード14s／画像切替だけ2sごと */
}
.top_service2_visual.is-a .service2_v_a2 {
		animation: s2Pan 14s ease-in-out infinite both, s2Fade 4s ease-in-out infinite both;
		animation-delay: 0s, 2s; /* パンは同期・フェードだけ2s半周ずらし＝2秒ごとに切り替わる */
}
.top_service2_visual.is-b .service2_v_b1 {
		animation: s2KenB 14s ease-in-out infinite;
}
.top_service2_visual.is-b .service2_v_b2 {
		animation: s2KenB 14s ease-in-out infinite;
		animation-delay: 7s;
}
@keyframes s2Ken {
		0%   { opacity: 0; transform: scale(1.12) translateX(-5%); }
		5%   { opacity: 1; }
		50%  { opacity: 1; transform: scale(1.12) translateX(5%); }
		55%  { opacity: 0; }
		100% { opacity: 0; transform: scale(1.12) translateX(-5%); }
}
@keyframes s2KenB {
		0%   { opacity: 0; transform: scale(1.12) translateX(5%); }
		5%   { opacity: 1; }
		50%  { opacity: 1; transform: scale(1.12) translateX(-5%); }
		55%  { opacity: 0; }
		100% { opacity: 0; transform: scale(1.12) translateX(5%); }
}
/* 01(A)専用：パン(transform)と画像切替(opacity)を分離。パンは14sゆっくり往復・切替は4s周期(2sずつ) */
@keyframes s2Pan {
		0%   { transform: scale(1.12) translateX(-5%); }
		50%  { transform: scale(1.12) translateX(5%); }
		100% { transform: scale(1.12) translateX(-5%); }
}
@keyframes s2Fade {
		0%   { opacity: 0; }
		10%  { opacity: 1; }
		45%  { opacity: 1; }
		55%  { opacity: 0; }
		100% { opacity: 0; }
}
/* トーン馴染ませ：左(斜め/テキスト側)を赤黒に沈める */
.top_service2_visual::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		background: linear-gradient(100deg, rgba(20,16,19,0.60) 0%, rgba(20,16,19,0.15) 32%, rgba(20,16,19,0) 58%);
}
/* ライトスイープ：赤い光が周期的にスッと横切る（screen合成で発光） */
.service2_v_glare {
		position: absolute;
		inset: 0;
		z-index: 3;
		pointer-events: none;
		overflow: hidden;
		mix-blend-mode: screen;
}
/* 横切る光源：白熱コア＋アナモルフィック光条 */
.service2_v_glare::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 42%;
		opacity: 0;
		background:
			radial-gradient(ellipse 82% 3% at 50% 50%, #ffffff 0%, rgba(255,218,150,0.6) 34%, rgba(255,160,70,0) 72%),
			radial-gradient(circle at 50% 50%, #ffffff 0%, rgba(255,246,224,1) 7%, rgba(255,205,120,0.55) 22%, rgba(255,150,60,0) 52%);
		filter: blur(2px) brightness(1.2);
		transform: translateX(-150%);
}
/* ピークで一瞬、暖色の全面ホワイトアウト */
.service2_v_glare::after {
		content: '';
		position: absolute;
		inset: 0;
		opacity: 0;
		background: radial-gradient(ellipse 150% 120% at 55% 50%, rgba(255,250,240,1) 0%, rgba(255,228,188,0.94) 44%, rgba(255,192,124,0.36) 76%, rgba(255,160,80,0) 100%);
}
/* in-view（中央より少し手前）で一度だけ発火 */
.top_service2_visual.glareActive .service2_v_glare::before {
		animation: s2Streak 1.1s cubic-bezier(0.4, 0, 0.25, 1) forwards;
}
.top_service2_visual.glareActive .service2_v_glare::after {
		animation: s2Flash 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes s2Streak {
		0%   { transform: translateX(-150%); opacity: 0; }
		22%  { opacity: 1; }
		100% { transform: translateX(320%); opacity: 1; }
}
@keyframes s2Flash {
		0%, 24%   { opacity: 0; }
		46%       { opacity: 1; }
		66%, 100% { opacity: 0; }
}
/* SP用：項目内画像（PCの右ビジュアルはSPで非表示）*/
.service2_img_01 {
		background-image: url(../images/service2_a1.jpg);
}
.service2_img_02 {
		background-image: url(../images/service2_b.jpg);
}
@media(max-width: 1100px) {
		.top_service2_inner {
				padding: 0 30px;
		}
		.service2_flag {
				font-size: 24px;
		}
}
/* // SERVICE (new) */
/* ================ */
/* NEWS (new / card grid) */
.top_news2_section {
		background: #fff;
		color: #1a1a1a;
		padding: 108px 0 120px;
		position: relative;
		overflow: hidden;
}
.top_news2_inner {
		max-width: 1180px;
		margin: 0 auto;
		padding: 0 60px;
}
.top_news2_section .section_title {
		margin-bottom: 40px;
}
.news2_grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 34px 28px;
}
.news2_card {
		display: block;
		background: #fff;
		border-radius: 3px;
		overflow: hidden;
		text-decoration: none;
		color: #1a1a1a;
		/* in-view前：左にずらして隠す（左→右へスライドインするだけ／弾みなし） */
		opacity: 0;
		transform: translateX(-40px);
		transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* in-view：左から順にスライドイン */
.news2_grid.is-inview .news2_card {
		opacity: 1;
		transform: none;
}
.news2_grid.is-inview .news2_card:nth-child(1) { transition-delay: 0s; }
.news2_grid.is-inview .news2_card:nth-child(2) { transition-delay: 0.09s; }
.news2_grid.is-inview .news2_card:nth-child(3) { transition-delay: 0.18s; }
.news2_grid.is-inview .news2_card:nth-child(4) { transition-delay: 0.27s; }
.news2_grid.is-inview .news2_card:nth-child(5) { transition-delay: 0.36s; }
.news2_grid.is-inview .news2_card:nth-child(6) { transition-delay: 0.45s; }
.news2_card_thumb {
		position: relative;
		aspect-ratio: 16 / 10;
		overflow: hidden;
		background: #f2f2f2;
}
.news2_card_thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.news2_card:hover .news2_card_thumb img {
		transform: scale(1.09);
}
/* 画像なし＝赤黒フォールバック */
.news2_card_thumb.is-noimg {
		background:
				radial-gradient(120% 120% at 80% 0%, rgba(194, 21, 62, 0.4) 0%, rgba(194, 21, 62, 0) 55%),
				linear-gradient(135deg, #241016 0%, #120c0e 70%);
}
.news2_card_thumb.is-noimg::after {
		content: "SARUCREW";
		position: absolute;
		left: 20px;
		bottom: 16px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.28em;
		color: rgba(255, 255, 255, 0.4);
}
.news2_chip {
		position: absolute;
		top: 12px;
		left: 12px;
		z-index: 2;
		display: inline-block;
		padding: 5px 12px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.04em;
		line-height: 1;
		color: #fff;
		background: #555;
		border-radius: 2px;
}
.news2_chip_award {
		background: #b8863b;
}
.news2_chip_press {
		background: #c2153e;
}
.news2_chip_media {
		background: #3766a8;
}
.news2_chip_wantedly {
		background: #1aa0bf;
}
.news2_card_body {
		padding: 16px 2px 6px;
}
.news2_card_date {
		display: block;
		font-size: 12px;
		letter-spacing: 0.08em;
		color: #999;
		margin-bottom: 8px;
		transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.news2_card_ttl {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.6;
		margin: 0;
		color: #1a1a1a;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* hover：ズームと同尺(0.8s)で日付=黒・タイトル=SARUCREWレッドに変わりきる */
.news2_card:hover .news2_card_date {
		color: #000;
}
.news2_card:hover .news2_card_ttl {
		color: #C2153E;
}
.news2_more {
		margin: 54px 0 0;
		text-align: center;
}
.news2_more a {
		display: inline-flex;
		align-items: center;
		color: #1a1a1a;
		font-size: 15px;
		letter-spacing: 0.06em;
		text-decoration: none;
}
.news2_more .arrowBaseS {
		position: relative;
		width: 28px;
		height: 28px;
		background: #C2153E;
		display: inline-block;
		overflow: hidden;
		margin-left: 16px;
		flex-shrink: 0;
}
@media (hover: hover) {
		.news2_more a:hover .arrowBaseS::after {
				animation: arrowRight 0.4s linear forwards;
		}
}
.news2_empty {
		grid-column: 1 / -1;
		color: #999;
		padding: 40px 0;
}
@media(max-width: 1100px) {
		.top_news2_inner {
				padding: 0 30px;
		}
		.news2_grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 30px 22px;
		}
}
/* // NEWS (new / card grid) */
/* ================ */
/* CASE STUDY（導入事例／対談。横長カードを交互(zigzag)に積む。カードを足すだけで増える器） */
.top_casestudy_section {
		background: #f4f4f4; /* SERVICE(暗)→CaseStudy(薄グレー)→NEWS(白)の明暗グラデ。ダーク2連続を避けつつNEWSと分離 */
		padding: 108px 140px 120px;
}
.top_casestudy_inner {
		max-width: 1180px;
		margin: 0 auto;
}
/* .cs_* カード群CSSは css/casestudy.css へ移設（TOP/service共有） */
/* ================ */
.top_about_section {
		padding-top: 100px;
		padding-bottom: 160px;
}
.top_about_section_inner {
		max-width: 1180px;
		margin: 0 auto;
}
.top_about_flex {
		display: flex;
		justify-content: space-between;
}
.top_about_tile {
		width: 565px;
		cursor: pointer;
}
.top_about_tile_thumb img {
		width: 100%;
		height: auto;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
.top_about_tile_thumb {
		overflow: hidden;
		position: relative;
}
.top_about_tile_thumb::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #E9E9E9;
		transform-origin: right center;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		transform: scaleX(1)
}
.aboutTileActive .top_about_tile_thumb::after {
		transform: scaleX(0);
}
@media (hover: hover) {
		.top_about_tile:hover .top_about_tile_thumb img {
				transform: scale(1.05);
				filter: brightness(0.8);
		}
}
.top_about_tile_caption {
		width: calc(100% - 80px);
		margin: 0 auto;
		transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
		top: -40px;
		position: relative;
}
.top_about_tile_caption a {
		box-sizing: border-box;
		padding: 40px 40px 60px;
		display: block;
}
@media (hover: hover) {
		.top_about_tile:hover .top_about_tile_caption {
				transform: translateY(-15px);
		}
}
@media (min-width: 768px) and (max-width: 1194px) {
		.extraTablet .top_about_tile_thumb::after {
				transform: scaleX(0);
		}
		.extraTablet .top_about_tile_caption a::before {
				transform: scaleX(1);
		}
}
.top_about_tile_caption a {
		text-decoration: none;
		color: #333;
		display: inline-block;
		position: relative;
}
.top_about_tile_caption a::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		transform-origin: left center;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
		transform: scaleX(0);
		transition-delay: 0.1s;
}
.aboutTileActive .top_about_tile_caption a::before {
		transform: scaleX(1);
}
.top_about_tile_caption h4 {
		font-size: 20px;
		line-height: 1.6;
		font-weight: 700;
		margin: 0 0 20px;
}
.top_about_tile_caption p {
		line-height: 1.8;
		font-size: 15px;
}
.top_about_tile_caption h4, .top_about_tile_caption p {
		position: relative;
		z-index: 2;
		opacity: 0;
		transition: opacity 0.3s;
		transition-delay: 0.4s;
}
.top_about_tile_caption .arrowBaseS {
		opacity: 0;
		transition: opacity 0.3s;
		transition-delay: 0.55s;
}
.aboutTileActive h4, .aboutTileActive p, .aboutTileActive .arrowBaseS {
		opacity: 1;
}
@media (min-width: 768px) and (max-width: 1194px) {
		.extraTablet h4, .extraTablet p, .extraTablet .arrowBaseS {
				opacity: 1;
		}
}
@media(max-width: 1500px) {
		.fv_inner, .top_who_section, .top_about_section, .top_news_section {
				padding-left: 60px;
				padding-right: 60px;
		}
		.fv_section .fv_scroll {
				right: 60px;
		}
}
@media(max-width: 1300px) {
		.top_about_tile {
				width: calc(50% - 15px);
		}
		.top_about_tile_caption {
				width: calc(100% - 60px);
				top: -30px;
		}
		.top_about_tile_caption a {
				padding: 25px 25px 60px;
		}
}
@media(max-width: 1100px) {
		.fv_inner, .top_who_section, .top_about_section, .top_news_section {
				padding-left: 30px;
				padding-right: 30px;
		}
		.fv_catch_lead {
				font-size: 5vw;
				margin: 0 0 30px;
		}
		.fv_catch_en {
				font-size: 4vw;
		}
}
@media(max-width: 1194px) {
		.fv_catch_lead {
				font-size: 4vw;
		}
		.fv_catch_en {
				font-size: 3vw;
		}
		.top_cont {
				margin-top: 140vw !important;
		}
}
@media(max-width: 960px) {
		.fv_section .fv_scroll {
				right: 30px;
		}
}
@media(max-width: 840px) {
		.top_about_tile_caption {
				width: calc(100% - 40px);
		}
		.top_about_tile_caption a {
				padding: 20px 20px 70px;
		}
}
@media (max-width: 670px) {
		.verLandscape .top_about_tile_caption a {
				padding: 15px 15px 50px;
		}
		.verLandscape .top_about_tile_caption h4 {
				font-size: 16px;
				height: inherit !important;
				margin-bottom: 10px;
		}
}
/* ================ */
.top_service_section {
		padding: 95px 0 160px;
		background: #3C3C3C;
		color: #000;
		overflow: hidden;
}
.top_service_section_inner {
		max-width: 1180px;
		margin: 0 auto;
		padding: 0 60px;
}
.top_service_section .section_title {
		color: #fff;
}
.top_service_section .section_title_en a {
		color: #fff;
}
/* GROUP（3子会社）専用調整 */
.top_service_section .service_slider {
		padding: 0 30px; /* 左右に余白（カードが端に張り付かないように） */
}
.top_service_section .top_service_item_hdr {
		align-items: stretch; /* ロゴ枠を右の見出しボックスと同じ高さに */
}
.top_service_section .top_service_item_hdr_thumb {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 6px 12px; /* 上下6px・左右12px */
		box-sizing: border-box;
		border: none; /* 枠線なし */
		background: #fff;
}
.top_service_section .top_service_item_hdr_thumb img {
		border: none; /* imgの枠は撤去（箱側に移した） */
		width: 100%;
		height: auto;
		max-height: 100%;
		object-fit: contain;
}
/* MONKEY TECH：ホバーでターミナル/コードエディタ風に変化（1s） */
.top_service_section .top_service_item.is-tech,
.top_service_section .top_service_item.is-tech h6,
.top_service_section .top_service_item.is-tech .top_service_item_hdr p,
.top_service_section .top_service_item.is-tech .top_service_item_caption,
.top_service_section .top_service_item.is-tech .top_service_item_caption p,
.top_service_section .top_service_item.is-tech .top_service_item_hdr_thumb,
.top_service_section .top_service_item.is-tech .top_service_item_hdr_thumb img {
		transition: background-color 1s ease, color 1s ease, filter 1s ease;
}
/* SCREECH：ホバーで通電（ライフライン＝暗転してから電気が灯る） */
.top_service_section .top_service_item.is-screech,
.top_service_section .top_service_item.is-screech h6,
.top_service_section .top_service_item.is-screech .top_service_item_hdr p,
.top_service_section .top_service_item.is-screech .top_service_item_caption,
.top_service_section .top_service_item.is-screech .top_service_item_caption p,
.top_service_section .top_service_item.is-screech .top_service_item_hdr_thumb,
.top_service_section .top_service_item.is-screech .top_service_item_hdr_thumb img {
		transition: background-color 0.6s ease, color 0.6s ease, filter 0.6s ease, text-shadow 0.6s ease;
}
/* BABOON Lab：ホバーでInstagram風フィードに（UIパーツは全てabsoluteオーバーレイ＝リフローなし） */
.top_service_section .top_service_item.is-bab {
		position: relative;
		transition: background-color 0.45s ease;
}
.top_service_section .top_service_item.is-bab h6,
.top_service_section .top_service_item.is-bab .top_service_item_hdr p,
.top_service_section .top_service_item.is-bab .top_service_item_caption p,
.top_service_section .top_service_item.is-bab .top_service_item_hdr_thumb,
.top_service_section .top_service_item.is-bab .top_service_item_hdr_thumb img {
		transition: color 0.45s ease, background 0.45s ease, filter 0.45s ease;
}
/* 右上の「・・・」メニュー（ホバーでフェードイン） */
.top_service_section .top_service_item.is-bab::before {
		content: '・・・';
		position: absolute;
		top: 30px;
		right: 34px;
		font-size: 17px;
		letter-spacing: 1px;
		color: #262626;
		opacity: 0;
		transition: opacity 0.45s ease;
		pointer-events: none;
		z-index: 3;
}
/* 下部のアクションバー（実要素＝ハート・いいね数・コメント・シェア） */
.top_service_section .top_service_item.is-bab .bab_actions {
		position: absolute;
		left: 40px;
		bottom: 24px;
		display: flex;
		align-items: center;
		gap: 16px;
		font-size: 13px;
		letter-spacing: 0.5px;
		color: #262626;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.45s ease, transform 0.45s ease;
		pointer-events: none;
		z-index: 3;
}
.top_service_section .top_service_item.is-bab .bab_like {
		display: inline-flex;
		align-items: center;
		gap: 5px;
}
.top_service_section .top_service_item.is-bab .bab_heart {
		font-style: normal;
		display: inline-block;
		transform-origin: center 70%;
}
.top_service_section .top_service_item.is-bab .bab_cmt,
.top_service_section .top_service_item.is-bab .bab_share {
		font-style: normal;
}
/* いいね数のカウントロール（1,240→1,241を縦スライド） */
.top_service_section .top_service_item.is-bab .bab_count {
		display: inline-block;
		height: 1.4em;
		line-height: 1.4em;
		overflow: hidden;
}
.top_service_section .top_service_item.is-bab .bab_count_roll {
		display: block;
		transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1);
		transition-delay: 0.45s; /* 1次完了後に回る */
}
.top_service_section .top_service_item.is-bab .bab_count_roll span {
		display: block;
		height: 1.4em;
		line-height: 1.4em;
}
/* GROUP：カード右下の丸＋矢印（リンク合図）。ホバーで色反転＋矢印が走る */
.top_service_section .top_service_item {
		position: relative; /* 矢印の配置基準（全カード共通で保証） */
		height: 100%; /* スライド枠を満たす＝全カード同じ高さ(最長カードに揃う) */
}
.top_service_section .swiper-slide {
		height: auto; /* Swiper既定の100%を解除→flex stretchで全スライドが最長に揃う */
		transition: opacity 0.3s ease;
}
/* GROUP：ホバー演出は「swiper-slide自体のopacity下げ＋矢印の動き」だけに簡素化（子会社ごとの派手な演出は撤去 2026-07-30） */
@media (hover: hover) {
		.top_service_section .swiper-slide:hover {
				opacity: 0.7;
		}
}
.top_service_section .group_arrow {
		position: absolute;
		right: 15px;
		bottom: 15px;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		background: #c2153e; /* 通常＝赤丸 */
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		box-sizing: border-box;
		transition: background-color 0.45s ease, box-shadow 0.45s ease;
		z-index: 4;
		pointer-events: none;
}
.top_service_section .group_arrow_ico {
		width: 10px;
		height: 10px;
		background-color: #fff; /* 通常＝白矢印（画像をmask化して色指定できるように） */
		-webkit-mask: url("../images/link_arrow_S.png") no-repeat center center;
		mask: url("../images/link_arrow_S.png") no-repeat center center;
		-webkit-mask-size: contain;
		mask-size: contain;
		transition: background-color 0.45s ease;
}
@media (hover: hover) {
		.top_service_section .top_service_item:hover .group_arrow {
				background: #fff; /* 反転＝白丸 */
				box-shadow: 0 0 0 1px rgba(0,0,0,0.08); /* 薄い背景でも輪郭を保つ */
		}
		.top_service_section .top_service_item:hover .group_arrow_ico {
				background-color: #c2153e; /* 反転＝赤矢印 */
				animation: arrowRight 0.45s linear forwards;
		}
}
/* PCは3枚固定表示でスワイプ不要＝pagination/カウンター非表示。SPはスワイプするので残す */
@media (min-width: 768px) {
		.top_service_section .swiper-pagination,
		.top_service_section .countWrap {
				display: none;
		}
}
/* ================ */
.top_news_section {
		padding-top: 180px;
		padding-bottom: 180px;
		background: #f7f7f7; /* 隣接するABOUT(白)と差をつける */
}
.top_news_section_inner {
		max-width: 1180px;
		margin: 0 auto;
		background: #fff;
}
.top_tile_flex {
		display: flex;
		justify-content: space-between;
}
.top_tile_item {
		width: calc(50% - 2px);
		overflow: hidden;
		position: relative;
}
.top_tile_item::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		transform-origin: right center;
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
		transform: scaleX(1)
}
.top_tile_item.topTileItemAcrive::after {
		transform: scaleX(0)
}
.top_tile_item .section_title {
		margin-bottom: 0;
}
.top_tile_item_thumb {
		overflow: hidden;
		position: relative;
}
.top_tile_item_thumb img {
		width: 100%;
		height: auto;
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s;
}
.top_tile_item_thumb .top_tile_item_caption {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 50px;
		opacity: 0;
		transition: opacity 0.6s;
		transition-delay: 0.4s;
}
.top_tile_item.topTileItemAcrive .top_tile_item_caption {
		opacity: 1;
}
@media (hover: hover) {
		.top_tile_item a:hover img {
				transform: scale(1.05);
				filter: brightness(0.7);
		}
}
.top_news_flex {
		display: flex;
		padding: 65px 70px 110px;
}
.top_news_flex_left {
		margin-right: 150px;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
}
.top_news_flex_right {
		flex: 1;
}
.news_line::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: calc(100% + 2px);
		background: #fff;
		transform-origin: right center;
		transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
		transform: scaleX(1);
		z-index: 5;
}
.newsLineActive::before {
		transform: scaleX(0);
}
/* ============== */
.comingsoon_flex {
		position: relative;
		width: 100%;
}
.exComingSoon {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
}
.comingsoon_flex_txt {
		font-size: 22px;
		font-family: 'Poppins', sans-serif;
		line-height: 1;
		font-weight: 700;
		color: #fff;
}