@charset "utf-8";
:root{
	--sky-dur:60s;
}

body.topPage{
	--top-log-h: var(--WRAP-margin);
}
/* =========================
   MV wrapper / background
========================= */
.wrapperMV{
	padding:0;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}
.mainVisual{
	--cloud-dur:800s;
	--mv-scale:1;
	--mv-h-base:calc(100svh - var(--WRAP-margin) - var(--top-log-h, var(--WRAP-margin)));
	--mv-h:max(0px, var(--mv-h-base));
	--mv-bg-h:clamp(
		calc(220px * var(--mv-scale)),
		calc(var(--mv-h) * 0.72),
		calc(560px * var(--mv-scale))
	);
	--mv-kw-h:calc(3rem * var(--mv-scale));
	--mv-car-size:calc(130px * var(--mv-scale));
	--mv-bird-size:max(10px, calc(16px * var(--mv-scale)));
	--mv-shoot-span:calc(160vw * var(--mv-scale));
	--sky-w:calc(var(--mv-h) * 25);
	--logo-dur:6s;
	--kw-dur:2s;
	--kw-count:5;
	--gap-dur:0.5s;
	--word-cycle:calc(var(--logo-dur) + (var(--kw-dur) * var(--kw-count)) + var(--gap-dur));
	--curtain-dur:1.5s;
	--curtain-hold:1.5s;
	height:var(--mv-h);
	min-height:var(--mv-h);
	padding-top:0;
	padding-bottom:0;
}
.mvCurtain{
	position:absolute;
	inset:0;
	z-index:40;
	pointer-events:none;
}
.mvCurtain::before,
.mvCurtain::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	width:50%;
	background:var(--txt-col-bk1);
	animation:mvCurtainOpen var(--curtain-dur) steps(10, end) forwards;
	animation-delay:var(--curtain-hold);
}
.mvCurtain::before{
	left:0;
	transform-origin:left center;
}
.mvCurtain::after{
	right:0;
	transform-origin:right center;
}
@keyframes mvCurtainOpen{
	from{transform:scaleX(1);}
	to{transform:scaleX(0);}
}
@media (prefers-reduced-motion: reduce){
	.mvCurtain::before,
	.mvCurtain::after{
		animation-duration:0.01ms;
		animation-delay:0ms;
	}
}
.mvStage{
	position:relative;
	min-height:var(--mv-h);
	overflow:hidden;
}
.skyLoop{--w:var(--sky-w);--dur:var(--sky-dur);--z:1;}
.skyTrack img{
	width:var(--sky-w);
	height:auto;
}
/* =========================
   MV layers (差分は変数だけ)
   Adjustables: --w/--dur/--z, carLoop --car-size/--car-gap, streetLoop*, birdLoop
========================= */
.cloudLoop{--w:2800px;--dur:var(--cloud-dur);--z:3;}
.cityLoop{--w:1500px;--dur:1000s;--z:5;}
.cityLoop2{--w:1500px;--dur:1000s;--z:7;}
.cityLightLoop{--w:1500px;--dur:1000s;--z:8;}
.lightLoop{--w:1500px;--dur:200s;--z:6;}
.lightLoop.isDay{--z:5;}
.streetLoopFront{--w:5000px;--dur:100s;--z:12;--street-scale:1;}
.streetLoopBack{--w:3000px;--dur:200s;--z:11;--street-scale:.9;}
.carLoop{--dur:40s;--z:9;--car-gap:2000px;--car-size:var(--mv-car-size);--car-scale:.75;}
.carOpposite{--car-scale:1;--z:10;}
.birdLoop{--dur:45s;--z:9;}
.shootingStar{--z:4;}

/* =========================
   MV marquee base (共通化)
========================= */
.mvLoop{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	overflow:hidden;
	pointer-events:none;
	z-index:var(--z, 1);
}
.mvTrack{
	display:flex;
	width:max-content;
	animation:mvMarquee var(--dur, 60s) linear infinite;
	transform:translate3d(0,0,0);
	will-change:transform;
}
.skyTrack.mvTrack{
	animation-name:mvMarqueeRev;
}
.mvTrack img{
	width:var(--w, 1500px);
	height:auto;
	flex:0 0 auto;
	display:block;
}
.streetLoopFront{
	top:0;
	bottom:0;
	height:100%;
}
.streetLoopFront .streetTrack{
	height:100%;
}
.streetLoopFront .streetTrack img{
	height:100%;
	width:auto;
}
.streetTrack img{
	transform:scaleY(var(--street-scale, 1));
	transform-origin:left bottom;
}
.birdLoop{
	top:auto;
	bottom:40%;
	left:0;
	right:auto;
}
.birdTrack{
	animation:birdFly var(--dur, 70s) linear infinite;
	gap:24px;
}
.birdTrack.mvTrack{
	animation-name:birdFly;
}
.birdTrack img{
	width:var(--mv-bird-size);
	height:auto;
	opacity:0.7;
}
/* Shooting star controls (center offset + span + speed) */
.shootingStar{
	--shoot-x:0vw;   /* 左右位置 */
	--shoot-y:0vh;   /* 上下位置 */
	--shoot-span:var(--mv-shoot-span); /* 流れる距離 */
	--shoot-dur:18s;
	top:50%;
	bottom:auto;
	left:50%;
	height:2px;
	overflow:visible;
}
.shootingStar::before{
	content:"";
	position:absolute;
	left:-20%;
	width:10px;
	height:2px;
	background:linear-gradient(90deg, #fff, rgba(255,255,255,0));
	transform:translate3d(calc(var(--shoot-x) + (var(--shoot-span) / 2)), calc(var(--shoot-y) - (var(--shoot-span) * 0.25)), 0);
	opacity:0;
	animation:shootingStar var(--shoot-dur) linear infinite;
}
@keyframes shootingStar{
	from{opacity:0; transform:translate3d(calc(var(--shoot-x) + (var(--shoot-span) / 2)), calc(var(--shoot-y) - (var(--shoot-span) * 0.25)), 0);}
	4%{opacity:1;}
	12%,to{opacity:0; transform:translate3d(calc(var(--shoot-x) - (var(--shoot-span) / 2)), calc(var(--shoot-y) + (var(--shoot-span) * 0.25)), 0);}
}
.birdGhost{
	transform:translate(30px, -5px);
}
@keyframes birdFly{
	0%{transform:translate3d(-20vw,0,0);opacity:0;}
	6%{opacity:1;}
	30%{transform:translate3d(120vw,0,0);opacity:1;}
	36%{opacity:0;}
	100%{transform:translate3d(120vw,0,0);opacity:0;}
}
@keyframes mvMarquee{
	0%{transform:translate3d(0,0,0);}
	100%{transform:translate3d(-50%,0,0);}
}
.mvTrack.isReverse{
	animation-name:mvMarqueeRev;
}
@keyframes mvMarqueeRev{
	0%{transform:translate3d(-50%,0,0);}
	100%{transform:translate3d(0,0,0);}
}
.mvLoop.isPulse{
	animation:mvPulse 60s ease-in-out infinite;
}
/* car light day/night swap (night only) */
.lightLoop.isSwap{
	animation-duration:calc(var(--sky-dur) * var(--swap-factor, 1));
	animation-timing-function:ease-in-out;
	animation-iteration-count:infinite;
	animation-fill-mode:both;
}
.lightLoop.isNight{
	animation-name:mvPulse;
}
@keyframes mvPulse{
	0%,100%{opacity:1;}
	40%,60%{opacity:0;}
}

/* =========================
   car rules（複数SVG + gap集約）
========================= */

.carTrack{
	align-items:flex-end;
}
.carSet{
	display:flex;
	align-items:flex-end;
	padding-right:var(--car-gap);
	box-sizing:border-box;
}
.carSet .carItem:not(:last-child){
	margin-right:calc(var(--car-gap) + var(--car-extra, 0px));
}
.carItem{
	position:relative;
	display:inline-block;
	overflow:visible;
}
.carTrack img{
	position:relative;
	z-index:2;
	height:calc(var(--car-size) * var(--car-scale));
	width:auto;
	flex:0 0 auto;
	display:block;
	backface-visibility:hidden;
	will-change:translate;
	animation:carJolt .6s steps(2,end) infinite;
}
.carItem::before,
.carItem::after{
	content:"";
	position:absolute;
	right:-10px;
	bottom:8px;
	width:6px;
	height:6px;
	background:rgba(109, 109, 109, 0.876);
	animation:exhaustPop 1.2s ease-out infinite;
}
.carItem::after{
	right:-18px;
	bottom:12px;
	width:4px;
	height:4px;
	animation-delay:.25s;
}
.carItem .exhaust2,
.carItem .exhaust3{
	position:absolute;
	right:-28px;
	bottom:14px;
	width:8px;
	height:8px;
	background:rgba(109, 109, 109, 0.7);
	opacity:0;
	animation:exhaustPop 1.2s ease-out infinite;
	pointer-events:none;
}
.carItem .exhaust3{
	right:-38px;
	bottom:16px;
	width:10px;
	height:10px;
	animation-delay:.2s;
}
.carItem .exhaust2{
	animation-delay:.1s;
}
.carLight{
	--light-dir:left;
	--light-poly:polygon(100% 45%, 0 0, 0 100%, 100% 55%);
	position:absolute;
	top:75%;
	right:100%;
	width:300px;
	height:70px;
	background:linear-gradient(to var(--light-dir), rgb(255, 224, 194), rgba(178, 124, 37, 0));
	-webkit-clip-path:var(--light-poly);
	clip-path:var(--light-poly);
	filter:blur(0.5px);
	opacity:0;
	transform:translateY(-50%);
	animation:headlight var(--sky-dur) linear infinite;
	pointer-events:none;
	z-index:1;
}
.carOpposite .carItem::before,
.carOpposite .carItem::after{
	right:auto;
	left:-10px;
}
.carOpposite .carItem::after{
	left:-18px;
}
.carOpposite .carItem .exhaust2{
	right:auto;
	left:-28px;
}
.carOpposite .carItem .exhaust3{
	right:auto;
	left:-38px;
}
.mvTrack.isReverse .carLight{
	right:auto;
	left:100%;
	--light-dir:right;
	--light-poly:polygon(0 45%, 100% 0, 100% 100%, 0 55%);
}
@keyframes carJolt{
	0%{translate:0 0;}
	100%{translate:0 3px;}
}
@keyframes exhaustPop{
	0%{transform:translate3d(0,0,0) scale(.6);opacity:0;}
	20%{opacity:.8;}
	100%{transform:translate3d(-10px,-8px,0) scale(1.4);opacity:0;}
}
@keyframes headlight{
	0%{opacity:.6;}
	30%{opacity:0;}
	50%{opacity:0;}
	70%{opacity:0;}
	100%{opacity:.6;}
}
/* 反対車線：見た目だけ反転（縮小は --car-scale でやる） */
.carOpposite img{
	transform:scaleX(-1);
	transform-origin:center bottom;
}


/* =========================
   log (news)
========================= */
.log{
	background-color:var(--txt-col-bk1);
	height:var(--top-log-h, 120px);
	min-height:var(--top-log-h, 120px);
	box-sizing:border-box;
	padding:0;
	display:flex;
	align-items:center;
	/* Log text controls */
	--log-font-family:"Silkscreen", Helvetica, Arial, sans-serif;
	--log-font-size:0.65rem;
	--log-letter-spacing:-0.12rem;
	--log-line-height:1.5;
	--log-color:#ccc;
	/* Counter digits controls (separate from log text) */
	--log-count-font-family:"Silkscreen", monospace;
	--log-count-font-size:0.7rem;
	--log-count-letter-spacing:0;
}
.log .wrapper{
	display:flex;
	align-items:center;
	height:100%;
	width:100%;
	max-width:none;
	box-sizing:border-box;
	min-width:0;
}
.log .txtMgB{
	margin-bottom:0;
}
.logInner{
	width:100%;
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	margin-top:0;
	min-width:0;
}
.logBlock{
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:clamp(16px, 6vw, 100px);
	align-items:start;
	flex:1 1 auto;
	min-width: 0;
}
.log h2,
.logList,
.logList dt,
.logList dd,
.counterNote{
	font-size:var(--log-font-size);
	letter-spacing:var(--log-letter-spacing);
	line-height:var(--log-line-height);
	font-family:var(--log-font-family);
	font-weight:700;
}
.log h2{
	color:var(--log-color);
	margin:0;
}
.logList{
	display:grid;
	grid-template-columns:max-content minmax(0, 1fr);
	column-gap:clamp(16px, 6vw, 100px);
	row-gap:0.2rem;
	margin:0;
	padding:0;
	align-items:baseline;
	min-width: 0;
	width:100%;
}
.logList dt{
	color:var(--log-color);
	grid-column:1;
	margin:0;
	font-weight:700;
	display:block;
	white-space: nowrap;
}
.logList dd{
	color:var(--log-color);
	grid-column:2;
	margin:0;
	font-weight:700;
	display:block;
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.logCounter{
	display:grid;
	grid-template-columns:auto auto;
	grid-template-rows:auto auto;
	column-gap:clamp(16px, 6vw, 100px);
	row-gap:0.2em;
	align-items:start;
	justify-items:end;
	text-align:right;
	flex:0 0 auto;
}
.logCounter > h2{
	grid-column:1;
	grid-row:1;
	display:block;
}
.counterBox{
	grid-column:2;
	grid-row:1;
	display:block;
}
.counterNote{
	margin:0;
	color:var(--log-color);
	text-align:right;
	grid-column:2;
	grid-row:2;
}
.counterGrid{
	grid-auto-flow:column;
	gap:0;
	color:var(--log-color);
	font-family:var(--log-count-font-family);
	font-size:var(--log-count-font-size);
	letter-spacing:var(--log-count-letter-spacing);
	border:1px solid var(--log-color);
	box-shadow:inset 0 0 0 1px var(--log-color);
}
.counterGrid span{
	min-width:1em;
	text-align:center;
	padding:0 0.5em;
	color:var(--log-color);
	border-right:1px solid var(--log-color);
}
.counterGrid span:last-child{
	border-right:none;
}
@media (max-width:600px){
	body.topPage{
		--top-log-h: calc(var(--WRAP-margin) * 2);
	}
	.log{
		--log-font-size:0.6rem;
		--log-line-height:1.35;
		--log-letter-spacing:-0.08rem;
		--log-count-font-size:0.62rem;
	}
	.logInner{
		display:block;
	}
	.logBlock{
		grid-template-columns:1fr;
		row-gap:0.25rem;
	}
	.logList{
		grid-template-columns:minmax(76px, auto) minmax(0, 1fr);
		column-gap:10px;
		row-gap:0.2rem;
	}
	.logList dd{
		max-width: 100%;
	}
	.logCounter{
		margin-top:0.35rem;
		grid-template-columns:1fr;
		grid-template-rows:auto auto auto;
		justify-items:start;
		text-align:left;
		row-gap:0.18rem;
	}
	.logCounter > h2{
		grid-column:1;
		grid-row:1;
	}
	.counterBox{
		grid-column:1;
		grid-row:2;
	}
	.counterNote{
		grid-column:1;
		grid-row:3;
		text-align:left;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		max-width:100%;
	}
	.counterGrid span{
		padding:0 0.35em;
	}
	.log{
		height:var(--top-log-h);
		min-height:var(--top-log-h);
		padding:8px 0;
		overflow:hidden;
	}
}

/* =========================
   culture
========================= */
.works{
	margin-top:0;
	background:#efefef;
	display:flow-root;
	padding-top:var(--mg-gap);
	padding-bottom:0;
	box-shadow:0 0 0 100vmax #efefef;
	clip-path:inset(0 -100vmax);
}
body.topPage footer{
	margin-top:0 !important;
}
.works h2{
	font-family:"Silkscreen", monospace;
}
.cultureGrid{
	width:100%;
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr;
	grid-template-rows:repeat(4, 15vmin);
	gap:var(--mg-gap);
	margin-bottom:var(--mg);
}
.ci1,.ci2,.ci3,.ci4,.ci5{
	position:relative;
	overflow:hidden;
}
.photoFit img{
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
}
.ci1{
	grid-area:1 / 1 / 4 / 2;
}
.ci2{grid-area:1 / 2 / 3 / 3;}
.ci3{grid-area:1 / 3 / 3 / 4;}
.ci4{grid-area:3 / 2 / 5 / 3;}
.ci5{grid-area:3 / 3 / 5 / 4;}
.cultureGrid dl{
	position:absolute;
	bottom:0.5rem;
	left:0.5rem;
	width:calc(100% - 1rem);
}
.cultureGrid div dt,
.cultureGrid div dd{
	border:2px solid #fff;
	background:#fff;
	color:var(--txt-col-bk1);
	padding:0.25rem 0.5rem;
}
.cultureGrid div dt{
	display:inline-block;
	font-weight:bold;
	letter-spacing:0.1em;
	border-bottom:0;
	font-size:1.125rem;
	background:#000;
	color:#fff;
}
.cultureGrid div dd{
	/*border-bottom-right-radius:10px;
	border-bottom-left-radius:10px;*/
	font-size:0.875rem;
	font-weight:bold;
}

/* =========================
   responsive
========================= */
@media (max-width:1000px){
	.cultureGrid{
		grid-template-columns:1fr 1fr;
		grid-template-rows:none;
		grid-auto-rows:minmax(180px, 26vw);
	}
	.ci1{grid-area:auto;grid-row:span 2;}
	.ci2{grid-area:auto;}
	.ci3{grid-area:auto;}
	.ci4{grid-area:auto;}
	.ci5{grid-area:auto;}
}
@media (max-width:800px){
	.birdLoop{
		bottom:50%;
	}
	.cultureGrid{
		grid-template-columns:1fr;
		grid-template-rows:none;
		grid-auto-rows:minmax(220px, 58vw);
	}
	.ci1,.ci2,.ci3,.ci4,.ci5{grid-area:auto;grid-row:span 1;}
	.cultureGrid div dt{
		font-size:0.95rem;
	}
	.cultureGrid div dd{
		font-size:0.8rem;
	}
}
@media (max-width:600px){
	.cloudLoop,
	.cityLoop,
	.cityLoop2,
	.cityLightLoop{
		opacity:0.9;
	}
	.carLoop,
	.birdLoop,
	.shootingStar{
		display:none;
	}
	.cultureGrid{
		grid-template-columns:1fr;
		column-gap:0;
		grid-auto-rows:minmax(190px, 62vw);
	}
	.ci1,.ci2,.ci3,.ci4,.ci5{
		grid-area:auto;
		display:block;
	}
	.cultureGrid dl{
		width:calc(100% - 0.75rem);
		left:0.375rem;
		bottom:0.375rem;
	}
	.cultureGrid div dt,
	.cultureGrid div dd{
		padding:0.2rem 0.4rem;
	}
}
/* tower（背景化） */
.mvBackground{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:var(--mv-bg-h);
	overflow:hidden;
	z-index:2;
	background-image:url("../images/mood.svg");
	background-repeat:repeat-x;
	background-position:left bottom;
	background-size:auto 100%;
}
.mvKeyword{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:var(--mv-h);
	z-index:60;
	text-align:center;
	pointer-events:none;
	letter-spacing:0.08em;
	text-transform:uppercase;
	--kw-h:var(--mv-kw-h);
	--logo-h:calc(var(--kw-h) * 3);
	opacity:1;
}
.mvKeyword span{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	height:var(--kw-h);
	width:max-content;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	animation-duration:var(--word-cycle);
	animation-timing-function:steps(1,end);
	animation-iteration-count:infinite;
	animation-fill-mode:both;
}
.mvKeyword .kwLogo{
	animation-name:mvLogoSlot;
	animation-delay:0s;
	height:var(--logo-h);
}
.mvKeyword .kwWord{
	animation-name:mvWordSlot;
	animation-delay:calc(var(--logo-dur) + (var(--i) * var(--kw-dur)));
}
.mvKeyword .kwWord{
	display:none;
}
@keyframes mvLogoSlot{
	0%{opacity:0;}
	0.5%,33.333%{opacity:1;}
	33.334%,100%{opacity:0;}
}
@keyframes mvWordSlot{
	0%{opacity:0;}
	0.5%,0.6%{opacity:1;}
	0.61%,0.65%{opacity:0;}
	0.66%,0.7%{opacity:1;}
	0.8%,0.84%{opacity:0.5;}
	0.85%,10.3%{opacity:1;}
	10.4%,10.9%{opacity:0.5;}
	11%,11.111%{opacity:1;}
	11.112%,100%{opacity:0;}
}
.mvKeyword img{
	width:auto;
	height:100%;
	object-fit:contain;
	display:block;
}

/* =========================
   MV responsive scale
========================= */
@media (max-width:800px){
	.mainVisual{
		--mv-scale:0.7;
	}
}
@media (max-width:600px){
	.mainVisual{
		--mv-scale:0.56;
	}
	.mvKeyword{
		letter-spacing:0.04em;
	}
}