@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700&family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500&display=swap');
:root{
	--bg:#050608;
	--surface:#0a0d11;
	--surface2:#0e1217;
	--text:#f5f7fa;
	--muted:#8d96a2;
	--dim:#59626d;
	--line:rgba(255,255,255,.105);
	--blue:#176dff;
	--blue2:#5da8ff;
	--max:1320px;
}
*{
	box-sizing:border-box
}
html{
	scroll-behavior:smooth
}
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:Inter,"Noto Sans JP",sans-serif;
	font-family:"Noto Sans JP", sans-serif;
	line-height:1.8;
	overflow-x:hidden
}
body:before{
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:20;
	opacity:.045;
	background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")
}
a{
	color:inherit;
	text-decoration:none
}
.container{
	width:min(calc(100% - 64px),var(--max));
	margin:auto
}
header{
	position:fixed;
	z-index:30;
	top:0;
	left:0;
	right:0;
	height:78px;
	border-bottom:1px solid rgba(255,255,255,.07);
	background:rgba(5,6,8,.64);
	backdrop-filter:blur(18px)
}
.nav{
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between
}
.logo img{
	width:100px;
}
/*.logo{
	font-size:13px;
	font-weight:600;
	letter-spacing:.36em
}
.logo:before{
	content:"";
	display:inline-block;
	width:20px;
	height:2px;
	background:var(--blue);
	transform:skew(-35deg);
	margin-right:10px;
	vertical-align:middle
}*/
nav{
	display:flex;
	gap:34px;
	align-items:center;
	font-size:11px;
	letter-spacing:.08em;
	color:#aab2bc
}
nav a{
	position:relative;
	padding:8px 0
}
nav a:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:0;
	height:1px;
	background:var(--blue2);
	transition:.35s
}
nav a:hover:after{
	width:100%
}
.hero{
	min-height:100svh;
	position:relative;
	overflow:hidden;
	border-bottom:1px solid var(--line)
}
.hero-bg{
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 68% 48%,rgba(23,109,255,.18),transparent 24%),
radial-gradient(circle at 85% 20%,rgba(23,109,255,.07),transparent 20%),
linear-gradient(120deg,transparent 48%,rgba(255,255,255,.045) 48.1%,transparent 48.3%)
}
.hero-bg:before{
	content:"";
	position:absolute;
	width:690px;
	height:690px;
	right:5%;
	top:13%;
	border:1px solid rgba(93,168,255,.18);
	transform:rotate(45deg);
	box-shadow:0 0 100px rgba(23,109,255,.07)
}
.hero-bg:after{
	content:"";
	position:absolute;
	width:470px;
	height:470px;
	right:12%;
	top:24%;
	border:1px solid rgba(255,255,255,.09);
	transform:rotate(45deg)
}
.hero-inner{
	min-height:100svh;
	display:flex;
	align-items:center;
	position:relative;
	z-index:2;
	padding:110px 0 70px
}
.hero-copy{
	max-width:760px
}
.kicker{
	display:flex;
	align-items:center;
	gap:13px;
	color:#8290a0;
	font-size:10px;
	letter-spacing:.3em;
	text-transform:uppercase
}
.kicker:before{
	content:"";
	width:28px;
	height:1px;
	background:var(--blue)
}
.hero h1{
	font-family:"Noto Serif JP",serif;
	font-weight:400;
	font-size:clamp(48px,6.8vw,100px);
	line-height:1.16;
	letter-spacing:.035em;
	margin:28px 0;
	position: relative;
	z-index:9999;
}
.hero h1 em{
	font-style:normal;
	color:#fff
}
.hero-description{
	max-width:560px;
	color:#a6afba;
	font-size:13px;
	line-height:2.05
}
.hero-cta{
	display:flex;
	gap:14px;
	margin-top:36px
}
.button{
	display:inline-flex;
	align-items:center;
	justify-content:space-between;
	gap:45px;
	min-width:180px;
	border:1px solid #56616d;
	padding:13px 18px;
	font-size:11px;
	transition:.35s
}
.button:hover{
	border-color:var(--blue2);
	background:rgba(23,109,255,.08);
	transform:translateY(-2px)
}
.button.primary{
	border-color:var(--blue);
	background:var(--blue)
}
.button.primary:hover{
	background:#287aff
}
.hero-index{
	position:absolute;
	right:0;
	bottom:48px;
	color:#66717d;
	font-size:9px;
	letter-spacing:.2em;
	writing-mode:vertical-rl
}
.hero-index span{
	color:var(--blue2)
}
.axis-orbit{
	position:absolute;
	right:9%;
	top:27%;
	width:380px;
	height:380px;
	border:1px solid rgba(255,255,255,.1);
	border-radius:50%;
	z-index: -1;
}
.axis-spin{
	position:absolute;
	inset:0;
	animation:spin 28s linear infinite
}
.axis-spin:before,.axis-spin:after{
	content:"";
	position:absolute;
	inset:42px;
	border:1px solid rgba(93,168,255,.22);
	border-radius:50%
}
.axis-spin:after{
	inset:0;
	border-top-color:var(--blue);
	transform:rotate(55deg)
}
.axis-core{
	position:absolute;
	inset:145px;
	background:linear-gradient(135deg,#101a27,#07101b);
	border:1px solid rgba(93,168,255,.5);
	transform:rotate(45deg);
	box-shadow:0 0 60px rgba(23,109,255,.18)
}
.axis-label{
	position:absolute;
	font-size:10px;
	letter-spacing:.16em;
	color:#9ba6b2
}
.axis-label b{
	display:block;
	font:400 28px "Noto Serif JP",serif;
	color:white
}
.l1{
	left:-15px;
	top:45px
}
.l2{
	right:-55px;
	top:45px
}
.l3{
	left:-20px;
	bottom:45px
}
.l4{
	right:-60px;
	bottom:45px
}
@keyframes spin{
	to{
		transform:rotate(360deg)
	}
}
section{
	position:relative;
	padding:145px 0;
	border-bottom:1px solid var(--line)
}
.section-top{
	display:grid;
	grid-template-columns:100px minmax(300px,1fr) minmax(260px,.7fr);
	gap:55px;
	margin-bottom:70px
}
.section-no{
	font-size:10px;
	letter-spacing:.2em;
	color:#697480
}
.section-no span{
	color:var(--blue2)
}
h2{
	font-family:"Noto Serif JP",serif;
	font-weight:400;
	font-size:clamp(35px,4.5vw,62px);
	line-height:1.32;
	letter-spacing:.025em;
	margin:0
}
.lead{
	font-size:13px;
	color:#929ca8;
	line-height:2.1;
	margin:8px 0 0
}
.company-layout{
	display:grid;
	grid-template-columns:1.05fr .95fr;
	gap:90px
}
.company-statement{
	/*font-family:"Noto Serif JP",serif;*/
	font-size:31px;
	line-height:1.7;
	margin:0 0 35px
}
.company-statement span{
	color:var(--blue2)
}
.company-statement2{
	font-size: clamp(17px, 1.5vw, 22px);
	line-height:1.7;
	margin:0 0 35px
}
.body-copy{
	max-width:610px;
	color:#8e98a4;
	font-size:13px
}
.meta{
	border-top:1px solid var(--line)
}
.meta-row{
	display:grid;
	grid-template-columns:125px 1fr;
	padding:18px 0;
	border-bottom:1px solid var(--line);
	font-size:12px
}
.meta-row dt{
	color:#606a76
}
.meta-row dd{
	margin:0;
	color:#d8dde3
}
.company-visual{
	height:210px;
	margin-bottom:40px;
	position:relative;
	overflow:hidden;
	border:1px solid var(--line);
	background:linear-gradient(125deg,#0c1015,#05070a)
}
.company-visual:before{
	content:"";
	position:absolute;
	width:280px;
	height:280px;
	right:70px;
	top:-120px;
	border:1px solid rgba(93,168,255,.4);
	transform:rotate(45deg)
}
.company-visual:after{
	content:"PROMOTION / CREATIVE / TECHNOLOGY";
	position:absolute;
	bottom:18px;
	left:20px;
	font-size:8px;
	letter-spacing:.3em;
	color:#687482
}
.purpose-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:1px;
	background:var(--line);
	border:1px solid var(--line)
}
.card{
	min-height:455px;
	background:var(--bg);
	padding:27px;
	position:relative;
	overflow:hidden;
	transition:.4s
}
.card:before{
	content:"";
	position:absolute;
	width:180px;
	height:180px;
	right:-80px;
	top:-80px;
	border:1px solid rgba(93,168,255,.18);
	transform:rotate(45deg);
	transition:.5s
}
.card:hover{
	background:#080c11
}
.card:hover:before{
	right:-40px;
	top:-40px
}
.card-no{
	font-size:10px;
	color:#697480;
	letter-spacing:.15em
}
.card h3{
	font:400 34px "Noto Serif JP",serif;
	margin:38px 0 0
}
.card h3 span{
	font:400 20px "Noto Serif JP",serif;
	margin:0 0 0 5px;
}
.card .en{
	font-size:9px;
	color:#667381;
	letter-spacing:.22em
}
.card p{
	font-size:12px;
	color:#89939f;
	line-height:2;
	margin-top:28px
}
.card-link{
	position:absolute;
	left:27px;
	bottom:25px;
	font-size:18px;
	color:#aeb7c1;
	transition:.3s
}
.card:hover .card-link{
	color:var(--blue2);
	transform:translateX(6px)
}

/* SECTION BACKGROUND TYPOGRAPHY */
/*
 * Each section uses the same ::before pattern for its large background word.
 * Change the common styling here; change only the content/position per section below.
 */
#vision .container,
#company .container,
#contact .container,
#recruit .container,
#business .container{
	position:relative
}

#vision .container:before,
#company .container:before,
#business .container:before,
#recruit .container:before,
#contact .container:before{
	position:absolute;
	right:-8%;
	top:0;
	transform:translateY(-50%);
	font-family:"Archivo",sans-serif;
	font-size:clamp(120px,18vw,270px);
	font-weight:700;
	letter-spacing:-.06em;
	line-height:.8;
	color:rgba(255,255,255,.018);
	white-space:nowrap;
	pointer-events:none;
	z-index:0;
}
#vision .container:before{content:"VISION"}
#company .container:before{content:"COMPANY"}
#business .container:before{content:"BUSINESS"}
#recruit .container:before{content:"RECRUIT"}
#contact .container:before{content:"CONTACT"}

#vision .section-top,
#vision .purpose-grid,
#company .section-top,
#company .company-layout,
#business .section-top,
#business .business-purpose-grid,
#recruit .section-top,
#recruit .recruit-layout,
#contact .section-top,
#contact .contact-layout{
	position:relative;
	z-index:1
}

@media(max-width:950px){
	#vision .container:before,
	#company .container:before,
	#business .container:before,
	#recruit .container:before,
	#contact .container:before{
		right:-6%;
		top:0;
		font-size:clamp(90px,22vw,180px);
		transform:translateY(-50%);
	}
}
@media(max-width:620px){
	#vision .container:before,
	#company .container:before,
	#business .container:before,
	#recruit .container:before,
	#contact .container:before{
		right:-10%;
		top:0;
		font-size:24vw;
		transform:translateY(-50%);
	}
}

/* BUSINESS PURPOSE */
.business-purpose-section{
	background:linear-gradient(180deg,#050608 0%,#070a0e 100%);
	overflow:hidden
}
.business-purpose-section .section-top{position:relative;z-index:1}
.business-purpose-grid{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px
}
.business-purpose-card{
	min-height:300px;
	padding:24px 25px 26px;
	background:linear-gradient(145deg,rgba(12,16,22,.96),rgba(7,9,12,.96));
	border:1px solid var(--line);
	position:relative;
	overflow:hidden;
	transition:transform .4s ease,border-color .4s ease,background .4s ease,box-shadow .4s ease
}
.business-purpose-card:before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:34%;
	height:2px;
	background:linear-gradient(90deg,var(--blue),transparent);
	transition:width .4s ease
}
.business-purpose-card:after{
	content:"";
	position:absolute;
	width:150px;
	height:150px;
	right:-95px;
	bottom:-95px;
	border:1px solid rgba(93,168,255,.12);
	transform:rotate(45deg);
	transition:all .5s ease
}
.business-purpose-card:hover{
	transform:translateY(-4px);
	border-color:rgba(93,168,255,.35);
	background:linear-gradient(145deg,#0d141d,#070a0e);
	box-shadow:0 16px 45px rgba(0,0,0,.22)
}
.business-purpose-card:hover:before{width:70%}
.business-purpose-card:hover:after{right:-65px;bottom:-65px}
.business-purpose-card-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px
}
.business-purpose-no{
	font-family:Archivo,sans-serif;
	font-size:11px;
	letter-spacing:.16em;
	color:var(--blue2)
}
.business-purpose-en{
	font-family:Archivo,sans-serif;
	font-size:8px;
	letter-spacing:.18em;
	color:#56616d;
	text-align:right
}
.business-purpose-icon{
	width:62px;
	height:62px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:28px 0 22px;
	border:1px solid rgba(93,168,255,.2);
	background:rgba(23,109,255,.035);
	position:relative;
	transition:transform .45s ease,border-color .45s ease,background .45s ease
}
.business-purpose-icon:before{
	content:"";
	position:absolute;
	inset:6px;
	border:1px solid rgba(255,255,255,.035)
}
.business-purpose-icon svg{
	width:34px;
	height:34px;
	fill:none;
	stroke:var(--blue2);
	stroke-width:1.4;
	stroke-linecap:round;
	stroke-linejoin:round;
	transition:transform .45s ease,stroke .45s ease
}
.business-purpose-card:hover .business-purpose-icon{
	transform:translateY(-3px);
	border-color:rgba(93,168,255,.48);
	background:rgba(23,109,255,.08)
}
.business-purpose-card:hover .business-purpose-icon svg{
	transform:scale(1.08);
	stroke:#fff
}
.business-purpose-card h3{
	margin:0;
	font-family:"Noto Sans JP",sans-serif;
	font-size:clamp(16px,1.45vw,20px);
	font-weight:500;
	line-height:1.6;
	letter-spacing:.035em
}
.business-purpose-card p{
	margin:9px 0 0;
	font-size:11px;
	line-height:1.8;
	color:#7f8995;
	letter-spacing:.05em
}
.business-purpose-foot{
	display:flex;
	justify-content:space-between;
	padding-top:18px;
	font-family:Archivo,sans-serif;
	font-size:8px;
	letter-spacing:.25em;
	color:#5d6874
}
@media(max-width:950px){
	.business-purpose-grid{grid-template-columns:1fr 1fr;gap:10px}
	.business-purpose-card{min-height:285px;padding:21px}
	.business-purpose-en{font-size:7px}
}
@media(max-width:620px){
	.business-purpose-grid{grid-template-columns:1fr;gap:8px}
	.business-purpose-card{min-height:0;padding:20px}
	.business-purpose-card-top{min-height:16px}
	.business-purpose-icon{width:54px;height:54px;margin:22px 0 18px}
	.business-purpose-icon svg{width:30px;height:30px}
	.business-purpose-card h3{font-size:15px;line-height:1.6}
	.business-purpose-card p{font-size:10px}
	.business-purpose-foot{font-size:7px}
}

/* RECRUIT */
.recruit-section{overflow:hidden;position:relative}
.recruit-section .container{position:relative}
.recruit-section .section-top{margin-bottom:55px}
.recruit-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(45px,7vw,110px);align-items:center;min-height:560px;position:relative}
.recruit-visual{position:relative;height:430px;overflow:visible;z-index:1}
.recruit-word{position:absolute;left:50%;top:50%;font-family:"Archivo",sans-serif;font-size:clamp(68px,9vw,145px);font-weight:500;letter-spacing:-.05em;line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(93,168,255,.62);text-shadow:0 0 22px rgba(93,168,255,.08);transform:translate3d(calc(-50% + var(--recruit-scroll,0) * -20px),-50%,0);will-change:transform}
.recruit-line{display:none;}
.recruit-content{max-width:680px;position:relative;z-index:2}
.recruit-content h3{margin:0 0 24px;font-family:"Noto Sans JP",sans-serif;font-size:clamp(23px,2.5vw,36px);font-weight:600;line-height:1.7;letter-spacing:.04em}
.recruit-lead{margin:0 0 34px;font-size:clamp(17px,1.5vw,22px);line-height:1.9;color:#fff}
.recruit-text p{margin:0 0 24px;font-size:13px;line-height:2.15;letter-spacing:.04em;color:#929ca8}
.recruit-text p:last-child{margin-bottom:34px}
.recruit-button{display:inline-flex;align-items:center;justify-content:space-between;gap:70px;min-width:210px;padding:17px 21px;border:1px solid rgba(93,168,255,.7);background:rgba(8,18,32,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);color:#e9edf1;font-size:10px;font-weight:700;letter-spacing:.2em;text-decoration:none;transition:background .35s,border-color .35s,transform .35s,box-shadow .35s}
.recruit-button span:last-child{font-size:18px;color:var(--blue2);letter-spacing:0;transition:transform .35s}
.recruit-button:hover{background:rgba(23,109,255,.11);border-color:var(--blue2);box-shadow:0 0 28px rgba(23,109,255,.12);transform:translateY(-2px)}
.recruit-button:hover span:last-child{transform:translateX(7px)}
.recruit-line.line-2,.recruit-line.line-3{display:none;}
@media(max-width:950px){.recruit-layout{grid-template-columns:1fr;gap:20px;min-height:0}.recruit-visual{height:220px}.recruit-word{left:50%;font-size:clamp(68px,16vw,130px)}.recruit-content{max-width:none}}
@media(max-width:620px){.recruit-section .section-top{margin-bottom:35px}.recruit-visual{height:135px}.recruit-word{font-size:18vw}.recruit-content h3{font-size:21px;line-height:1.75}.recruit-lead{font-size:16px;margin-bottom:28px}.recruit-text p{font-size:12px;line-height:2.05}.recruit-button{width:100%;min-width:0}}

.contact-layout{
	display:grid;
	grid-template-columns:.75fr 1.25fr;
	gap:90px
}
.contact-message{
	/*font-family:"Noto Serif JP",serif;*/
	font-size:32px;
	line-height:1.65
}
.contact-message span{
	color:var(--blue2)
}
.form{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px
}
.field{
	display:flex;
	flex-direction:column;
	gap:7px
}
.field.full{
	grid-column:1/-1
}
label{
	font-size:10px;
	color:#7d8793;
	letter-spacing:.12em
}
input,textarea{
	width:100%;
	border:1px solid #252c34;
	background:#080a0d;
	color:#fff;
	padding:14px 15px;
	font:inherit;
	font-size:12px;
	outline:none;
	transition:.25s
}
input:focus,textarea:focus{
	border-color:#347edb;
	background:#090d12;
	box-shadow:0 0 0 3px rgba(23,109,255,.06)
}
textarea{
	min-height:155px;
	resize:vertical
}
.form-hp{
	position:absolute;
	left:-9999px;
	width:1px;
	height:1px;
	overflow:hidden
}
.submit{
	grid-column:1/-1;
	margin-top:5px;
	border:1px solid var(--blue);
	background:var(--blue);
	color:white;
	padding:15px;
	font:inherit;
	font-size:11px;
	letter-spacing:.16em;
	cursor:pointer;
	transition:.3s
}
.submit:hover{
	background:#287aff;
	transform:translateY(-2px)
}
footer{
	padding:30px 0;
	color:#59636f;
	font-size:9px;
	letter-spacing:.05em
}
.footer-inner{
	display:flex;
	justify-content:space-between;
	align-items:center
}
/* 4 AXIS — dedicated visual motifs */
.axis-visual{
	height:148px;
	margin:-27px -27px 27px;
	position:relative;
	overflow:hidden;
	background:linear-gradient(135deg,#0b1016,#05070a);
	border-bottom:1px solid var(--line)
}
.axis-visual:after{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle,rgba(23,109,255,.14),transparent 62%);
	pointer-events:none
}
.human-visual:before{
	content:"";
	position:absolute;
	width:130px;
	height:130px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	border:1px solid rgba(93,168,255,.28);
	border-radius:50%;
	box-shadow:0 0 45px rgba(23,109,255,.08)
}
.human-visual i{
	position:absolute;
	width:7px;
	height:7px;
	border:1px solid #5da8ff;
	border-radius:50%;
	left:50%;
	top:50%;
	animation:nodePulse 3s ease-in-out infinite
}
.human-visual i:nth-child(1){
	--x:-65px;
	--y:-30px;
}
.human-visual i:nth-child(2){
	--x:65px;
	--y:-38px;
	animation-delay:.5s
}
.human-visual i:nth-child(3){
	--x:-50px;
	--y:38px;
	animation-delay:1s
}
.human-visual i:nth-child(4){
	--x:58px;
	--y:35px;
	animation-delay:1.5s
}
.human-visual b,.info-visual b{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	font-size:10px;
	letter-spacing:.35em;
	color:#d9e5f3;
	z-index:2
}
@keyframes nodePulse{
	0%,100%{
		transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));
		opacity:.3
	}
	50%{
		transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.7);
		opacity:1
	}
}
.object-visual i{
	--tx:-50%;
	--ty:-50%;
	position:absolute;
	width:62px;
	height:62px;
	left:50%;
	top:50%;
	border:1px solid rgba(93,168,255,.7);
	transform:translate(var(--tx),var(--ty)) rotate(45deg);
	animation:objectSwing 3.5s ease-in-out infinite
}
.object-visual i:nth-child(2){
	--tx:-25%;
	--ty:-62%;
	opacity:.5;
	animation-delay:.3s
}
.object-visual i:nth-child(3){
	--tx:-75%;
	--ty:-38%;
	opacity:.25;
	animation-delay:.6s
}
@keyframes objectSwing{
	0%,100%{
		transform:translate(var(--tx),var(--ty)) rotate(45deg)
	}
	50%{
		transform:translate(var(--tx),var(--ty)) rotate(135deg)
	}
}
.capital-visual{
	display:flex;
	align-items:flex-end;
	justify-content:center;
	gap:9px;
	padding:25px 30px 22px
}
.capital-visual:before{
	content:"";
	position:absolute;
	left:15%;
	right:15%;
	bottom:21px;
	border-bottom:1px solid rgba(255,255,255,.16)
}
.capital-visual i{
	position:relative;
	width:24px;
	border:1px solid rgba(93,168,255,.55);
	font-style:normal;
	font-size:7px;
	text-align:center;
	color:#a9bad0;
	padding-top:4px;
	animation:barPulse 3.5s ease-in-out infinite
}
.capital-visual i:nth-child(1){
	height:25px
}
.capital-visual i:nth-child(2){
	height:48px;
	animation-delay:.3s
}
.capital-visual i:nth-child(3){
	height:75px;
	animation-delay:.6s
}
.capital-visual i:nth-child(4){
	height:105px;
	animation-delay:.9s
}
@keyframes barPulse{
	50%{
		transform:scaleY(1.08);
		transform-origin:bottom
	}
}
.info-visual i{
	position:absolute;
	left:50%;
	top:50%;
	width:115px;
	height:34px;
	border:1px solid rgba(93,168,255,.38);
	border-radius:50%;
	transform:translate(-50%,-50%) rotate(25deg);
	animation:orbit 6s linear infinite
}
.info-visual i:nth-child(2){
	transform:translate(-50%,-50%) rotate(85deg);
	animation-duration:7s
}
.info-visual i:nth-child(3){
	width:160px;
	height:52px;
	transform:translate(-50%,-50%) rotate(-20deg);
	animation-duration:9s
}
.info-visual:before{
	content:"";
	position:absolute;
	width:8px;
	height:8px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background:#5da8ff;
	border-radius:50%;
	box-shadow:0 0 28px 8px rgba(23,109,255,.28)
}
@keyframes orbit{
	to{
		transform:translate(-50%,-50%) rotate(385deg)
	}
}
/* Scroll-linked storytelling */
.hero-bg{
	transform:translateY(calc(var(--hero-scroll,0) * 40px)) scale(calc(1 + var(--hero-scroll,0) * .04))
}
.axis-spin{
	transform:rotate(calc(var(--hero-scroll,0) * 18deg));
}
.recruit-wrap:before{
	transform:translate3d(calc(var(--recruit-scroll,0) * -75px),-55%,0)
}
.recruit-lines:before{
	transform:translateX(calc(var(--recruit-scroll,0) * -55px)) rotate(-13deg)
}
.recruit-lines:after{
	transform:translateX(calc(var(--recruit-scroll,0) * 45px)) rotate(-13deg)
}
@media(prefers-reduced-motion:reduce){
	.human-visual i,.object-visual i,.capital-visual i,.info-visual i{
		animation:none
	}
	.hero-bg,.axis-spin,.recruit-wrap:before,.recruit-lines:before,.recruit-lines:after{
		transform:none !important
	}
}
.reveal{
	opacity:0;
	transform:translateY(50px);
	transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)
}
.reveal.show{
	opacity:1;
	transform:translateY(0)
}
.recruit-line.line-2,.recruit-line.line-3{display:none;}
@media(max-width:950px){
	.container{
		width:min(calc(100% - 40px),var(--max))
	}
	.axis-orbit{
		right:-90px;
		top:25%;
		opacity:.65
	}
	.hero-copy{
		max-width:680px
	}
	.section-top,.company-layout,.contact-layout,.recruit-wrap{
		grid-template-columns:1fr;
		gap:35px
	}
	.section-top{
		margin-bottom:50px
	}
	.purpose-grid{
		grid-template-columns:1fr 1fr
	}
	.recruit-side{
		padding-left:0
	}
	.recruit-wrap:before{
		right:-15%;
		font-size:23vw
	}
}
@media(max-width:620px){
	header{
		height:65px
	}
	nav{
		display:none
	}
	.container{
		width:calc(100% - 32px)
	}
	.hero-inner{
		padding-top:95px
	}
	.hero h1{
		font-size:48px
	}
	.hero-description{
		font-size:12px
	}
	.hero-cta{
		flex-direction:column;
		align-items:flex-start
	}
	.button{
		min-width:205px
	}
	.axis-orbit{
		width:250px;
		height:250px;
		right:-95px;
		top:44%;
		opacity:.45
	}
	.axis-core{
		inset:96px
	}
	.axis-label b{
		font-size:20px
	}
	.l1{
		left:-5px;
		top:20px
	}
	.l2{
		right:-40px;
		top:20px
	}
	.l3{
		left:-5px;
		bottom:20px
	}
	.l4{
		right:-45px;
		bottom:20px
	}
	section{
		padding:95px 0
	}
	.section-top{
		grid-template-columns:1fr
	}
	.section-no{
		margin-bottom:-20px
	}
	h2{
		font-size:38px
	}
	.company-statement{
		font-size:25px
	}
	.company-visual{
		height:160px
	}
	.purpose-grid{
		grid-template-columns:1fr
	}
	.card{
		min-height:360px
	}
	.recruit-wrap{
		min-height:500px
	}
	.recruit-side{
		margin-top:15px
	}
	.recruit-side .bigword{
		font-size:70px
	}
	.form{
		grid-template-columns:1fr
	}
	.field.full,.submit{
		grid-column:auto
	}
	.footer-inner{
		display:block
	}
	.footer-inner span:last-child{
		display:block;
		margin-top:12px
	}
}
@media(prefers-reduced-motion:reduce){
	html{
		scroll-behavior:auto
	}
	.axis-spin{
		animation:none
	}
	.reveal{
		opacity:1;
		transform:none
	}
}
.hero-index{
	position:absolute;
	right:0;
	bottom:48px;
	color:#66717d;
	font-size:9px;
	letter-spacing:.2em;
	writing-mode:vertical-rl;
	cursor:pointer
}
.hero-index span{
	color:#5da8ff;
	display:inline-block;
	animation:scrollArrow 1.8s ease-in-out infinite
}
@keyframes scrollArrow{
	0%,100%{
		transform:translateY(0);
		opacity:.5
	}
	50%{
		transform:translateY(7px);
		opacity:1
	}
}

.cl_blue{
	color: var(--blue2);
}

/* =========================================================
   MOBILE MENU
   620px以下でハンバーガーメニューへ切り替え
   ========================================================= */
.menu-toggle{
	display:none;
	width:42px;
	height:42px;
	padding:0;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(8,11,15,.55);
	backdrop-filter:blur(10px);
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:5px;
	cursor:pointer;
	position:relative;
	z-index:52;
	transition:border-color .3s,background .3s;
}
.menu-toggle span{
	display:block;
	width:17px;
	height:1px;
	background:#e9edf2;
	transition:transform .35s ease,opacity .25s ease,width .35s ease;
}
.menu-toggle:hover{
	border-color:rgba(93,168,255,.55);
	background:rgba(23,109,255,.08);
}
.menu-toggle.is-open{
	border-color:rgba(93,168,255,.55);
	background:rgba(23,109,255,.08);
}
.menu-toggle.is-open span:nth-child(1){
	transform:translateY(6px) rotate(45deg);
}
.menu-toggle.is-open span:nth-child(2){
	opacity:0;
	width:0;
}
.menu-toggle.is-open span:nth-child(3){
	transform:translateY(-6px) rotate(-45deg);
}

.mobile-menu{
	display:none;
	position:fixed;
	inset:0;
	z-index:45;
	background:rgba(5,6,8,.97);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .4s ease,visibility .4s ease;
	overflow:auto;
}
.mobile-menu:before,
.mobile-menu:after{
	content:"";
	position:absolute;
	pointer-events:none;
}
.mobile-menu:before{
	width:72vw;
	height:72vw;
	right:-30vw;
	top:9vh;
	border:1px solid rgba(93,168,255,.14);
	transform:rotate(45deg);
	box-shadow:0 0 100px rgba(23,109,255,.06);
}
.mobile-menu:after{
	width:45vw;
	height:45vw;
	right:-18vw;
	top:22vh;
	border:1px solid rgba(255,255,255,.06);
	transform:rotate(45deg);
}
.mobile-menu.is-open{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}
.mobile-menu-inner{
	width:calc(100% - 32px);
	max-width:560px;
	box-sizing:border-box;
	min-height:100%;
	margin:auto;
	padding:92px 0 34px;
	display:flex;
	flex-direction:column;
	position:relative;
	z-index:1;
}
.mobile-menu-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding-bottom:18px;
	border-bottom:1px solid var(--line);
	color:#667381;
	font-family:Archivo,sans-serif;
	font-size:9px;
	letter-spacing:.24em;
}
.mobile-menu-head span:first-child{
	color:var(--blue2);
}
.mobile-nav{
	display:flex;
	flex-direction:column;
	margin-top:15px;
}
.mobile-nav a{
	display:grid;
	grid-template-columns:32px minmax(0,1fr) auto 22px;
	align-items:center;
	column-gap:9px;
	min-height:72px;
	padding:10px 0;
	border-bottom:1px solid rgba(255,255,255,.075);
	color:#f2f5f8;
	transition:color .25s,padding-left .3s,background .3s;
}
.mobile-nav a:hover{
	color:var(--blue2);
	padding-left:7px;
}
.mobile-nav-no{
	font-family:Archivo,sans-serif;
	font-size:9px;
	letter-spacing:.12em;
	color:var(--blue2);
}
.mobile-nav a > span:nth-child(2){
	font-family:"Noto Sans JP",sans-serif;
	font-size:16px;
	font-weight:500;
	letter-spacing:.05em;
}
.mobile-nav-en{
	font-family:Archivo,sans-serif;
	font-size:7px;
	letter-spacing:.17em;
	color:#58636f;
}
.mobile-nav b{
	font-family:Inter,sans-serif;
	font-size:17px;
	font-weight:400;
	color:#7e8a97;
	text-align:right;
	transition:transform .3s,color .3s;
}
.mobile-nav a:hover b{
	color:var(--blue2);
	transform:translateX(4px);
}
.mobile-menu-foot{
	margin-top:auto;
	padding-top:28px;
	color:#47515d;
	font-family:Archivo,sans-serif;
	font-size:8px;
	letter-spacing:.22em;
	text-transform:uppercase;
}
body.menu-open{
	overflow:hidden;
}

@media(max-width:620px){
	header{
		z-index:50;
	}
	.menu-toggle{
		display:flex;
	}
	.mobile-menu{
		display:block;
	}
}

@media(prefers-reduced-motion:reduce){
	.menu-toggle span,
	.mobile-menu,
	.mobile-nav a,
	.mobile-nav b{
		transition:none;
	}
}

/* Prevent the mobile menu from ever introducing viewport-wide horizontal scroll. */
@media(max-width:620px){
	html, body{
		max-width:100%;
		overflow-x:hidden;
	}
	.mobile-menu{
		overflow-x:hidden;
	}
}