@charset "UTF-8";





:root{

	--purewhite: hsla(0, 0%, 100%, 1);

	--bluebase_hue: 208;

	--bluebase: var(--bluebase_hue), 64%;
	--graybase: var(--bluebase_hue), 16%;
	--pinkbase: 356, 76%;
	--purplebase: 292, 24%;
	--navybase: 224, 56%;

	--white: hsla(var(--bluebase), 98%, 1);
	--black: hsla(var(--bluebase), 2%, 1);
	--blend: hsla(0, 0%, 96%, 1);

	--deepgray: hsla(var(--graybase), 48%, 1);
	--gray: hsla(var(--graybase), 64%, 1);
	--lightgray: hsla(var(--graybase), 80%, 1);
	--thingray: hsla(var(--graybase), 88%, 1);

	--deepblue: hsla(var(--bluebase), 48%, 1);
	--blue: hsla(var(--bluebase), 64%, 1);
	--lightblue: hsla(var(--bluebase), 80%, 1);
	
	--deeppink: hsla(var(--pinkbase), 48%, 1);
	--pink: hsla(var(--pinkbase), 64%, 1);
	--lightpink: hsla(var(--pinkbase), 80%, 1);
	
	--deeppurple: hsla(var(--purplebase), 48%, 1);
	--purple: hsla(var(--purplebase), 64%, 1);
	--lightpurple: hsla(var(--purplebase), 80%, 1);

	--deepnavy: hsla(var(--navybase), 48%, 1);
	--navy: hsla(var(--navybase), 64%, 1);
	--lightnavy: hsla(var(--navybase), 80%, 1);

	--ls_regular: 0.04em;
	--ls_large: 0.08em;

	--rem: 16px;
	--inner: 90vw;

	--card04: 4;
}
@media screen and (min-width: 1920px){
	:root{
		--inner: 1728px;
	}
}
@media screen and (max-width: 1200px){
	:root{
		--card04: 2;
	}
}
@media screen and (max-width: 768px){
	:root{
		--rem: 4.1vw;
		/*--card04: 1;*/
	}
}





html{
	font-size: var(--rem);
	background: var(--white);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body{
	margin: 0;
	font-optical-sizing: auto;
	color: var(--black);
	font-style: normal;
	line-height: 2;
	background: var(--white);
}
body{
	/**
	 * 半角英数字の際にGoogle Sans、
	 * それ以外は基本的にはLINE Seed JPが優先される
	 */
	font-family: 'Google Sans', 'LINE Seed JP', sans-serif;
	/* 400, 700 */
	font-weight: 400;
}





/**
 * font
 */
.line{
	font-family: 'LINE Seed JP', sans-serif!important;
	/* 100, 400, 700, 800 */
	font-weight: 400;
}
.gs{
	font-family: 'Google Sans', sans-serif!important;
	/* 400, 500, 600, 700 */
	font-weight: 400;
	font-variation-settings: 'GRAD' 0;
}
@font-face{
	font-family: 'GenEiAntique';
	src: url('../fonts/GenEiAntiqueNv6-M.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
.genei{
	font-family: 'GenEiAntique', 'LINE Seed JP', sans-serif!important;
	/* 400 */
	font-weight: 400;
}





/**
 * utility
 */
.nonei{
	display: none!important;
}
.flex{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.fwn{
	flex-wrap: nowrap;
}
.extendview{
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.jcsb{
	justify-content: space-between;
}
.jcc{
	justify-content: center;
}
.jce{
	justify-content: end;
}
.aifs{
	align-items: flex-start;
}
.aife{
	align-items: flex-end;
}
.ais{
	align-items: stretch;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}
.peni{
	pointer-events: none!important;
}
.vertical{
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.text_ellipsis{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	-webkit-line-clamp: 1;
}
.text_ellipsis3{
	-webkit-line-clamp: 3;
}
.pr{
	position: relative;
}
.ofh{
	overflow: hidden;
}
.ofxh{
	overflow-x: hidden;
}
.ofya{
	overflow-y: auto;
}
.ofxa{
	overflow-x: auto;
}
.vh{
	visibility: hidden;
}
.wsn{
	white-space: nowrap;
}
.mbme{
	mix-blend-mode: exclusion;
}
.mbmd{
	mix-blend-mode: difference;
}
.inner{
	width: var(--inner);
	margin: 0 auto;
}
.sp{
	display: none;
}
@media screen and (max-width: 768px){
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}





/**
 * animation
 */
@keyframes logoGlitchVisualImage{
	0%, 30%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	31%{
		transform: translate(-8px, 4px);
		opacity: .8;
	}
	36%{
		transform: translate(4px, -4px);
		opacity: 1;
	}
	41%{
		transform: translate(-4px, 8px);
		opacity: .8;
	}
	46%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes logoGlitchPurple{
	0%, 82%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	83%{
		transform: translate(-4px, 2px);
		opacity: .72;
	}
	84%{
		transform: translate(2px, -2px);
		opacity: 1;
	}
	85%{
		transform: translate(-2px, 4px);
		opacity: .64;
	}
	86%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes logoGlitchPink{
	0%, 84%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	85%{
		transform: translate(-2px, 2px);
		opacity: .72;
	}
	86%{
		transform: translate(4px, -2px);
		opacity: 1;
	}
	87%{
		transform: translate(2px, 4px);
		opacity: .72;
	}
	88%{
		transform: translate(0, 0);
		opacity: 1;
	}
}
@keyframes logoGlitchNavy{
	0%, 86%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	87%{
		transform: translate(4px, -2px);
		opacity: .96;
	}
	88%{
		transform: translate(-2px, 2px);
		opacity: .64;
	}
	89%{
		transform: translate(8px, 0);
		opacity: 1;
	}
	90%{
		transform: translate(0, 0);
		opacity: .8;
	}
}
@keyframes logoGlitchBlue{
	0%, 88%, 100%{
		transform: translate(0, 0);
		opacity: 1;
	}
	89%{
		transform: translate(-4px, 2px);
		opacity: .8;
	}
	90%{
		transform: translate(2px, -2px);
		opacity: .64;
	}
	91%{
		transform: translate(-8px, 0);
		opacity: 1;
	}
	92%{
		transform: translate(0, 0);
		opacity: .96;
	}
}
@keyframes mainBackground{
	0%{
		background-color: var(--white);
	}
	1.5%{/* 0.12s（8s * 0.015） */
		background-color: var(--black);
	}
	31.5%,/* 2.4s（8s * 0.3） */
	100%{
		background-color: var(--white);
	}
}
@media screen and (max-width: 768px){
	@keyframes logoGlitchVisualImage{
		0%, 30%, 100%{
			transform: translate(0, 0);
			opacity: 1;
		}
		31%{
			transform: translate(-1.04vw, 0.52vw);
			opacity: .8;
		}
		36%{
			transform: translate(0.52vw, -0.52vw);
			opacity: 1;
		}
		41%{
			transform: translate(-0.52vw, 1.04vw);
			opacity: .8;
		}
		46%{
			transform: translate(0, 0);
			opacity: 1;
		}
	}
	@keyframes logoGlitchPurple{
		0%, 82%, 100%{
			transform: translate(0, 0);
			opacity: 1;
		}
		83%{
			transform: translate(-0.52vw, 0.26vw);
			opacity: .72;
		}
		84%{
			transform: translate(0.26vw, -0.26vw);
			opacity: 1;
		}
		85%{
			transform: translate(-0.26vw, 0.52vw);
			opacity: .64;
		}
		86%{
			transform: translate(0, 0);
			opacity: 1;
		}
	}
	@keyframes logoGlitchPink{
		0%, 84%, 100%{
			transform: translate(0, 0);
			opacity: 1;
		}
		85%{
			transform: translate(-0.26vw, 0.26vw);
			opacity: .72;
		}
		86%{
			transform: translate(0.52vw, -0.26vw);
			opacity: 1;
		}
		87%{
			transform: translate(0.26vw, 0.52vw);
			opacity: .72;
		}
		88%{
			transform: translate(0, 0);
			opacity: 1;
		}
	}
	@keyframes logoGlitchNavy{
		0%, 86%, 100%{
			transform: translate(0, 0);
			opacity: 1;
		}
		87%{
			transform: translate(0.52vw, -0.26vw);
			opacity: .96;
		}
		88%{
			transform: translate(-0.26vw, 0.26vw);
			opacity: .64;
		}
		89%{
			transform: translate(1.04vw, 0);
			opacity: 1;
		}
		90%{
			transform: translate(0, 0);
			opacity: .8;
		}
	}
	@keyframes logoGlitchBlue{
		0%, 88%, 100%{
			transform: translate(0, 0);
			opacity: 1;
		}
		89%{
			transform: translate(-0.52vw, 0.26vw);
			opacity: .8;
		}
		90%{
			transform: translate(0.26vw, -0.26vw);
			opacity: .64;
		}
		91%{
			transform: translate(-1.04vw, 0);
			opacity: 1;
		}
		92%{
			transform: translate(0, 0);
			opacity: .96;
		}
	}
}





/**
 * z-index
 */
section.mv p.phrase span.row:nth-child(1),
section.mv .profile .layout .blocks .block p.name,
section.mv .profile .layout .blocks .block p.about,
section.mv .profile .layout .blocks .block .badge{
	z-index: 1;
}
section.mv .character,
section.mv .player{
	z-index: 2;
}
section.mv p.phrase span.row:nth-child(2),
section.mv .profile .layout .blocks .block .design{
	z-index: 3;
}
header{
	z-index: 100;
}





/**
 * transition
 */
section.mv p.phrase span.row span.word span.cell span.txt{
	transition:
		transform 480ms cubic-bezier(0.24, 1, 0.36, 1),
		opacity 480ms ease;
}
section.mv .profile p.name span.txt,
section.mv .profile p.about span.txt,
section.mv .profile .design,
section.mv .profile .badge,
.title p.jp span.txt{
	transition: opacity 480ms ease;
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby:after,
.title p.jp span.row span.cell.ruby:after{
	transition: opacity 240ms ease;
}
ul.card_lists li.card_list .card .thm img{
	transition: transform 480ms;
}
section.project .layout .subject .field.name svg path{
	transition: fill 240ms;
}
section.project .layout .subject .field.name .txt{
	transition: color 240ms;
}





/**
 * flex-shrink
 */
.title p.jp span.row,
.title .svg,
ul.card_lists li.card_list,
section.mv p.phrase span.row span.word,
section.mv p.phrase span.row span.word span.cell,
section.mv .profile .layout .blocks .block p.name span.row,
section.mv .profile .layout .blocks .block p.name span.row span.cell,
section.mv .profile .layout .blocks .block p.about span.row,
section.mv .profile .layout .blocks .block p.about span.row span.cell,
section.gear .contents .visual .image{
	flex-shrink: 0;
}





/**
 * title
 */
.title p.jp{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	gap: 36px;
}
.title p.jp span.row,
.title p.jp span.row span.cell span.txt{
	display: block;
}
.title p.jp span.row,
.title p.jp span.row span.cell{
	width: 36px;
}
.title p.jp span.row span.cell{
	display: grid;
	place-items: center;
	height: 36px;
}
.title p.jp span.row span.cell span.txt{
	font-size: 36px;
	color: var(--blend);
	line-height: 1;
	opacity: 0;
}
.title p.jp span.row span.cell span.txt.act{
	opacity: 1;
}
.title p.jp span.row span.cell.ruby:after{
	position: absolute;
	top: 0;
	right: calc(36px * (1/3) * (-1));
	height: 100%;
	font-size: calc(36px * (1/3));
	color: var(--blend);
	line-height: 1;
	opacity: 0;
}
.title p.jp span.row span.cell.ruby.act:after{
	opacity: 1;
}
.title p.jp span.row span.cell.ruby.ruby-dezain:after{
	height: 200%;
	content: 'デザイン';
}
.title p.jp span.row span.cell.ruby.ruby-ichi:after{
	content: 'いち';
}
.title p.jp span.row span.cell.ruby.ruby-ran:after{
	content: 'らん';
}
@media screen and (max-width: 768px){
	.title{
		padding-bottom: 10.26vw;
	}
	.title p.jp{
		gap: 4.69vw;
	}
	.title p.jp span.row,
	.title p.jp span.row span.cell{
		width: 4.69vw;
	}
	.title p.jp span.row span.cell{
		height: 4.69vw;
	}
	.title p.jp span.row span.cell span.txt{
		font-size: 4.69vw;
	}
	.title p.jp span.row span.cell.ruby:after{
		right: calc(4.69vw * (1/3) * (-1));
		font-size: calc(4.69vw * (1/3));
	}
}





/**
 * logo
 * title
 * svg
 */
section.header .logo{
	width: calc(1120px * (2/10));
	height: calc((1120px * (2/10)) * (280/1120));
}
.title .svg{
	width: 840px;
	height: calc(840px * (280/840));
}
section.header .logo a,
section.header .logo a svg,
.title .svg svg{
	display: block;
	width: 100%;
	height: 100%;
}
section.header .logo a svg .purple,
.title .svg svg .purple{
	fill: var(--purple);
	animation: logoGlitchPurple 2s steps(1, end) infinite;
}
section.header .logo a svg .pink,
.title .svg svg .pink{
	fill: var(--pink);
	animation: logoGlitchPink 2s steps(1, end) infinite;
}
section.header .logo a svg .navy,
.title .svg svg .navy{
	fill: var(--navy);
	animation: logoGlitchNavy 2s steps(1, end) infinite;
}
section.header .logo a svg .blue,
.title .svg svg .blue{
	fill: var(--blue);
	animation: logoGlitchBlue 2s steps(1, end) infinite;
}
section.header .logo a svg .black,
.title .svg svg .black{
	fill: var(--black);
}
.title .svg svg .visual_image{
	animation: logoGlitchVisualImage 2s steps(1, end) infinite;
}
.title .svg svg .electricity{
	fill: var(--purewhite);
}
.title .svg svg .electricity path{
	opacity: 0;
}
.title .svg svg .purple,
.title .svg svg .pink,
.title .svg svg .navy,
.title .svg svg .blue,
.title .svg svg .visual_image{
	animation-play-state: paused;
}
.title.is-active .svg svg .purple,
.title.is-active .svg svg .pink,
.title.is-active .svg svg .navy,
.title.is-active .svg svg .blue,
.title.is-active .svg svg .visual_image{
	animation-play-state: running;
}
@media screen and (max-width: 1200px){
	.title .svg{
		width: 768px;
		height: calc(768px * (280/840));
	}
}
@media screen and (max-width: 768px){
	section.header .logo{
		width: calc(287.18vw * (1/10));
		height: calc((287.18vw * (1/10)) * (280/1120));
	}
	.title .svg{
		width: 100vw;
		height: calc(100vw * (280/840));
	}
}





/**
 * ul
 * card_lists
 * 
 * https://docs.google.com/spreadsheets/d/1JhN0YScWJnl8dlCAp7CZwM4VLs68q09viJe3K_p_Jk0/edit?gid=1876369990#gid=1876369990
 */
ul.card_lists{
	gap: 16px;
}
ul.card_lists li.card_list{
	width: calc((((var(--inner) - (16px * (var(--card04) - 1))) / var(--card04)) * (9/16)) * (16/9));
}
ul.card_lists li.card_list.wide{
	width: calc((((var(--inner) - (16px * (var(--card04) - 1))) / var(--card04)) * (9/16)) * (16/9) * (3/2));
}
ul.card_lists li.card_list.square{
	width: calc(((var(--inner) - (16px * (var(--card04) - 1))) / var(--card04)) * (9/16));
}
ul.card_lists li.card_list .card{
	display: block;
	background: var(--purewhite);
	border-radius: 24px;
	box-shadow: 0 0 8px 0 var(--thingray);
}
ul.card_lists li.card_list .card .thm{
	width: 100%;
	height: 236px;
}
ul.card_lists li.card_list .card .thm picture,
ul.card_lists li.card_list .card .thm img{
	display: block;
	width: 100%;
	height: 100%;
}
ul.card_lists li.card_list .card .thm img{
	object-fit: cover;
	object-position: center;
}
ul.card_lists li.card_list .card .txts{
	padding: calc(24px - ((14px * 2) / 2));
	gap: 8px;
}
ul.card_lists li.card_list .card .txts .category,
ul.card_lists li.card_list .card .txts .name{
	gap: 4px;
}
ul.card_lists li.card_list .card .txts .name .field:has(svg){
	padding-left: 14px;
}
ul.card_lists li.card_list .card .txts .name .field:has(svg) svg{
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 14px;
	height: 14px;
}
ul.card_lists li.card_list .card .txts .name .field:has(svg) svg path{
	fill: var(--gray);
}
ul.card_lists li.card_list .card .txts .category .field .txt,
ul.card_lists li.card_list .card .txts .name .field .txt{
	display: block;
	font-size: 14px;
}
ul.card_lists li.card_list .card .txts .category .field .txt{
	color: var(--black);
	padding: 0 calc((14px * 2) / 2);
	outline: 2px solid var(--black);
	outline-offset: -2px;
	border-radius: calc((14px * 2) / 2);
}
ul.card_lists li.card_list .card .txts .category.web .field .txt{
	color: var(--deepblue);
	outline: 2px solid var(--deepblue);
}
ul.card_lists li.card_list .card .txts .category.banner .field .txt{
	color: var(--deeppurple);
	outline: 2px solid var(--deeppurple);
}
ul.card_lists li.card_list .card .txts .category.movie .field .txt{
	color: var(--deepnavy);
	outline: 2px solid var(--deepnavy);
}
ul.card_lists li.card_list .card .txts .name .field .txt{
	color: var(--black);
	letter-spacing: var(--ls_regular);
}
@media (hover: hover) and (pointer: fine){
	ul.card_lists li.card_list .card .thm img{
		transform: scale(1);
		will-change: transform;
		backface-visibility: hidden;
	}
	ul.card_lists li.card_list .card:hover .thm img{
		transform: scale(1.2) rotate(2deg);
	}
}
@media screen and (max-width: 1200px){
	ul.card_lists li.card_list .card .thm{
		height: 300px;
	}
}
@media screen and (max-width: 768px){
	ul.card_lists{
		gap: 4.1vw;
	}
	ul.card_lists li.card_list{
		width: calc((((var(--inner) - (4.1vw * (var(--card04) - 1))) / var(--card04)) * (9/16)) * (16/9));
	}
	ul.card_lists li.card_list.wide{
		width: calc((((var(--inner) - (4.1vw * (var(--card04) - 1))) / var(--card04)) * (9/16)) * (16/9) * (3/2));
	}
	ul.card_lists li.card_list.square{
		width: calc(((var(--inner) - (4.1vw * (var(--card04) - 1))) / var(--card04)) * (9/16));
	}
	ul.card_lists li.card_list .card{
		border-radius: 4.1vw;
		box-shadow: 0 0 2.05vw 0 var(--thingray);
	}
	ul.card_lists li.card_list .card .thm{
		height: 24.74vw;
	}
	ul.card_lists li.card_list .card .txts{
		padding: calc(4.1vw - ((2.56vw * 2) / 2));
		gap: 2.05vw;
	}
	ul.card_lists li.card_list .card .txts .category,
	ul.card_lists li.card_list .card .txts .name{
		gap: 1.03vw;
	}
	ul.card_lists li.card_list .card .txts .name .field:has(svg){
		padding-left: 2.56vw;
	}
	ul.card_lists li.card_list .card .txts .name .field:has(svg) svg{
		width: 2.56vw;
		height: 2.56vw;
	}
	ul.card_lists li.card_list .card .txts .category .field .txt,
	ul.card_lists li.card_list .card .txts .name .field .txt{
		font-size: 2.56vw;
	}
	ul.card_lists li.card_list .card .txts .category .field .txt{
		padding: 0 calc((2.56vw * 2) / 2);
		outline: 0.51vw solid var(--black);
		outline-offset: -0.51vw;
		border-radius: calc((2.56vw * 2) / 2);
	}
	ul.card_lists li.card_list .card .txts .category.web .field .txt{
		outline: 0.51vw solid var(--deepblue);
	}
	ul.card_lists li.card_list .card .txts .category.banner .field .txt{
		outline: 0.51vw solid var(--deeppurple);
	}
	ul.card_lists li.card_list .card .txts .category.movie .field .txt{
		outline: 0.51vw solid var(--deepnavy);
	}
}





/**
 * r_txt
 */
.r_txt{
	padding: 4px calc(((14px * 2) + (4px * 2)) / 2);
	border-radius: calc(((14px * 2) + (4px * 2)) / 2);
}
.r_txt.category{
	background: var(--black);
}
.r_txt.skill{
	background: var(--purewhite);
	outline: 1px solid var(--gray);
	outline-offset: -1px;
}
.r_txt .field{
	padding-left: calc(14px + 8px);
	gap: 4px;
}
.r_txt .field svg,
.r_txt .field .txt{
	display: block;
}
.r_txt .field svg{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 14px;
	height: 14px;
}
.r_txt.category .field svg path{
	fill: var(--purewhite);
}
.r_txt.skill .field svg path{
	fill: var(--gray);
}
.r_txt.skill.illustrator .field svg path{
	fill: #f3941a;
}
.r_txt.skill.photoshop .field svg path{
	fill: #419ed7;
}
.r_txt.skill.figma .field svg path{
	fill: #ff3a00;
}
.r_txt.skill.premierepro .field svg path,
.r_txt.skill.aftereffects .field svg path,
.r_txt.skill.audition .field svg path{
	fill: #9296cb;
}
.r_txt.skill.html .field svg path{
	fill: #ff7a63;
}
.r_txt.skill.css .field svg path{
	fill: #019be5;
}
.r_txt.skill.javascript .field svg path{
	fill: #fec940;
}
.r_txt.skill.php .field svg path{
	fill: #777bb3;
}
.r_txt .field .txt{
	font-size: 14px;
	letter-spacing: var(--ls_regular);
	font-weight: 500;
}
.r_txt.category .field .txt{
	color: var(--purewhite);
}
.r_txt.skill .field .txt{
	color: var(--black);
}
@media screen and (max-width: 768px){
	.r_txt{
		padding: 1.03vw calc(((2.56vw * 2) + (1.03vw * 2)) / 2);
		border-radius: calc(((2.56vw * 2) + (1.03vw * 2)) / 2);
	}
	.r_txt .field{
		padding-left: calc(2.56vw + 1.03vw);
		gap: 1.03vw;
	}
	.r_txt .field svg{
		width: 2.56vw;
		height: 2.56vw;
	}
	.r_txt .field .txt{
		font-size: 2.56vw;
	}
}
section.project .layout .genre .r_txt .field .txt{
	font-weight: 400;
}





/**
 * header
 */
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
header.nofix{
	position: relative;
	top: auto;
	left: auto;
}





/**
 * section
 * header
 */
section.header{
	padding: 20px 0;
}
@media screen and (max-width: 768px){
	section.header{
		padding: 3.08vw 0;
	}
}





/**
 * section
 * footer
 */
section.footer{
	padding: 20px 0;
	background: var(--black);
}
section.footer .copyright{
	gap: 4px;
}
section.footer .copyright span{
	display: block;
	color: var(--white);
	letter-spacing: var(--ls_regular);
}
section.footer .copyright span.mark{
	font-size: calc(14px * 2);
	font-weight: 400;
	line-height: 1;
}
section.footer .copyright span.txt{
	font-size: 14px;
	font-weight: 500;
}
@media screen and (max-width: 768px){
	section.footer{
		padding: 3.08vw 0;
	}
	section.footer .copyright{
		gap: 1.03vw;
	}
	section.footer .copyright span.mark{
		font-size: calc(2.56vw * 2);
	}
	section.footer .copyright span.txt{
		font-size: 2.56vw;
	}
}





/**
 * main
 */
main{
	isolation: isolate;
	background-color: var(--white);
}
main.bg_animation{
	animation:
		mainBackground 8s ease-in-out 8s infinite;
}
main .worldview{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
main .worldview .image{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
	width: 100%;
	height: calc(100% + 1200px);
	background-image: url('../images/worldview.png');
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	/**
	 * 画面幅が1920pxの時
	 * mainタグの大きさが3994px
	 * ・パララックスは1200px動かしたい
	 * ・worldview.pngの横幅は2016px
	 * 1920:5194 = 2016:?
	 * ? = 5,453.7
	 * よってworldview.pngの高さは5454pxで書き出し
	 */
}
@media screen and (max-width: 1200px){
	main .worldview .image{
		height: calc(100% + 800px);
		background-image: url('../images/worldview_1200.png');
		/**
		 * 画面幅が1200pxの時
		 * mainタグの大きさが5176px
		 * ・パララックスは800px動かしたい
		 * よってworldview.pngの高さは5976pxで書き出し
		 */
	}
}
@media screen and (max-width: 768px){
	main .worldview .image{
		height: calc(100% + 98.96vw);
		background-image: url('../images/worldview_768.png');
		/**
		 * 画面幅が768pxの時
		 * mainタグの大きさが5288px
		 * ・パララックスは760px動かしたい
		 * よってworldview.pngの高さは6048pxで書き出し
		 */
	}
}





/**
 * section
 * mv
 */
section.mv{

}
section.mv .wrap{
	width: 100%;
	height: calc(960px * (1440/960));
	padding-top: 160px;
}
@media screen and (max-width: 768px){
	section.mv .wrap{
		height: calc(31.25vw + ((15.63vw * 2) + 5.21vw) + (4.69vw * 20));
		padding-top: 31.25vw;
	}
}





/**
 * section
 * mv
 * 
 * phrase
 */
section.mv p.phrase{
	padding-bottom: 80px;
}
section.mv p.phrase span.row{
	gap: calc(160px * (1/2));
}
section.mv p.phrase span.row span.word span.cell,
section.mv p.phrase span.row span.word span.cell span.txt{
	display: block;
}
section.mv p.phrase span.row span.word span.cell{
	width: 160px;
	height: 240px;
}
section.mv p.phrase span.row span.word span.cell span.txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 80px));
	font-size: 240px;
	color: var(--blend);
	font-weight: 600;
	line-height: 1;
	opacity: 0;
}
section.mv p.phrase span.row span.word span.cell span.txt.act{
	transform: translate(-50%, -50%);
	opacity: 1;
}
@media screen and (max-width: 768px){
	section.mv p.phrase{
		padding-bottom: 5.21vw;
	}
	section.mv p.phrase span.row{
		gap: calc((15.63vw * (160/240)) * (1/2));
	}
	section.mv p.phrase span.row span.word span.cell{
		width: calc(15.63vw * (160/240));
		height: 15.63vw;
	}
	section.mv p.phrase span.row span.word span.cell span.txt{
		transform: translate(-50%, calc(-50% + 5.21vw));
		font-size: 15.63vw;
	}
}





/**
 * section
 * mv
 * 
 * character
 * player
 */
section.mv .character,
section.mv .player{
	position: absolute;
	top: 0;
	width: 960px;
	height: calc(960px * (1440/960));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	--spread: 0px;
}
section.mv .character{
	left: 50%;
	transform: translate(calc(-100% - var(--spread)), 0);
}
section.mv .player{
	right: 50%;
	transform: translate(calc(100% + var(--spread)), 0);
}
@media screen and (max-width: 768px){
	section.mv .character,
	section.mv .player{
		width: calc((31.25vw + ((15.63vw * 2) + 5.21vw) + (4.69vw * 20)) * (960/1440));
		height: calc(31.25vw + ((15.63vw * 2) + 5.21vw) + (4.69vw * 20));

		--spread: 0vw;
	}
}





/**
 * section
 * mv
 * 
 * profile
 */
section.mv .profile .layout{
	gap: 36px;
}
section.mv .profile .layout .blocks{
	width: calc((100% - 36px) / 2);
	gap: 36px;
}
section.mv .profile .layout .blocks .block{
	width: 100%;
}
section.mv .profile .layout .blocks .block p.name{
	gap: 12px;
}
section.mv .profile .layout .blocks .block p.name span.row,
section.mv .profile .layout .blocks .block p.name span.row span.cell,
section.mv .profile .layout .blocks .block p.name span.row span.cell span.txt{
	display: block;
}
section.mv .profile .layout .blocks .block p.name span.row,
section.mv .profile .layout .blocks .block p.name span.row span.cell{
	width: 144px;
}
section.mv .profile .layout .blocks .block p.name span.row:nth-child(1){
	order: 2;
}
section.mv .profile .layout .blocks .block p.name span.row:nth-child(2){
	order: 1;
}
section.mv .profile .layout .blocks .block p.name span.row span.cell{
	height: 144px;
}
section.mv .profile .layout .blocks .block p.name span.row span.cell span.txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 144px;
	color: var(--blend);
	font-weight: 700;
	line-height: 1;
}
section.mv .profile .layout .blocks .block .design p{
	gap: calc(20px * (1/4));
}
section.mv .profile .layout .blocks .block .design p span.txt{
	display: block;
	font-size: 20px;
	color: var(--blend);
	letter-spacing: var(--ls_regular);
	font-weight: 500;
	line-height: 1.5;
}
section.mv .profile .layout .blocks .block .design p svg{
	display: block;
	width: 20px;
	height: 20px;
}
section.mv .profile .layout .blocks .block .design p svg path{
	fill: var(--blend);
}
section.mv .profile .layout .blocks .block .badge ul.badge_lists{
	gap: 8px;
}
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list a,
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list span,
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list a img,
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list span img{
	display: block;
}
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list a,
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list span{
	width: calc(48px + (8px * 2));
	height: calc(48px + (8px * 2));
	padding: 8px;
	background: var(--purewhite);
	border-radius: 8px;
}
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list a img,
section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list span img{
	width: 48px;
	height: 48px;
}
section.mv .profile .layout .blocks .block p.about{
	gap: 36px;
}
section.mv .profile .layout .blocks .block p.about span.row,
section.mv .profile .layout .blocks .block p.about span.row span.cell,
section.mv .profile .layout .blocks .block p.about span.row span.cell span.txt{
	display: block;
}
section.mv .profile .layout .blocks .block p.about span.row,
section.mv .profile .layout .blocks .block p.about span.row span.cell{
	width: 36px;
}
section.mv .profile .layout .blocks .block p.about span.row:nth-child(1){
	order: 3;
}
section.mv .profile .layout .blocks .block p.about span.row:nth-child(2){
	order: 2;
}
section.mv .profile .layout .blocks .block p.about span.row:nth-child(3){
	order: 1;
}
section.mv .profile .layout .blocks .block p.about span.row span.cell{
	height: 36px;
}
section.mv .profile .layout .blocks .block p.about span.row span.cell span.txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 36px;
	color: var(--blend);
	line-height: 1;
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby:after{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(100%, 0);
	height: 100%;
	font-size: calc(36px * (1/3));
	color: var(--blend);
	line-height: 1;
	opacity: 0;
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.act:after{
	opacity: 1;
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-kontentsu:after{
	height: 200%;
}
section.mv .profile p.name span.txt,
section.mv .profile .design,
section.mv .profile .badge,
section.mv .profile p.about span.txt{
	opacity: 0;
}
section.mv .profile p.name span.txt.act,
section.mv .profile .design.act,
section.mv .profile .badge.act,
section.mv .profile p.about span.txt.act{
	opacity: 1;
}
@media (hover: none) and (pointer: coarse){
	section.mv .profile p.about span.txt{
		text-orientation: upright;
	}
	section.mv .profile .layout .blocks .block p.about span.row span.cell{
		display: grid;
		place-items: center;
	}
	section.mv .profile .layout .blocks .block p.about span.row span.cell span.txt{
		position: static;
		top: auto;
		left: auto;
		transform: none;
	}
	section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby:after{
		right: calc(36px * (1/3) * (-1));
		transform: none;
	}
}
@media screen and (max-width: 768px){
	section.mv .profile .layout{
		gap: 4.69vw;
	}
	section.mv .profile .layout .blocks{
		width: calc((100% - 4.69vw) / 2);
		gap: 4.69vw;
	}
	section.mv .profile .layout .blocks .block p.name{
		gap: 1.56vw;
	}
	section.mv .profile .layout .blocks .block p.name span.row,
	section.mv .profile .layout .blocks .block p.name span.row span.cell{
		width: 18.75vw;
	}
	section.mv .profile .layout .blocks .block p.name span.row span.cell{
		height: 18.75vw;
	}
	section.mv .profile .layout .blocks .block p.name span.row span.cell span.txt{
		font-size: 18.75vw;
	}
	section.mv .profile .layout .blocks .block .design p{
		gap: calc(2.6vw * (1/4));
	}
	section.mv .profile .layout .blocks .block .design p span.txt{
		font-size: 2.6vw;
	}
	section.mv .profile .layout .blocks .block .design p svg{
		width: 2.6vw;
		height: 2.6vw;
	}
	section.mv .profile .layout .blocks .block .badge ul.badge_lists{
		gap: 1.04vw;
	}
	section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list a,
	section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list span{
		width: calc(6.25vw + (1.04vw * 2));
		height: calc(6.25vw + (1.04vw * 2));
		padding: 1.04vw;
		border-radius: 1.04vw;
	}
	section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list a img,
	section.mv .profile .layout .blocks .block .badge ul.badge_lists li.badge_list span img{
		width: 6.25vw;
		height: 6.25vw;
	}
	section.mv .profile .layout .blocks .block p.about{
		gap: 4.69vw;
	}
	section.mv .profile .layout .blocks .block p.about span.row,
	section.mv .profile .layout .blocks .block p.about span.row span.cell{
		width: 4.69vw;
	}
	section.mv .profile .layout .blocks .block p.about span.row span.cell{
		height: 4.69vw;
	}
	section.mv .profile .layout .blocks .block p.about span.row span.cell span.txt{
		font-size: 4.69vw;
	}
	section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby:after{
		font-size: calc(4.69vw * (1/3));
	}
	@media (hover: none) and (pointer: coarse){
		section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby:after{
			right: calc(4.69vw * (1/3) * (-1));
		}
	}
}





/**
 * section
 * mv
 * 
 * parts
 */
section.mv .character.costume01.style01{
	background-image: url('../images/character_costume01_style01.png');
}
section.mv .character.costume01.style02{
	background-image: url('../images/character_costume01_style02.png');
}
section.mv .character.costume01.style03{
	background-image: url('../images/character_costume01_style03.png');
}
section.mv .character.costume02.style01{
	background-image: url('../images/character_costume02_style01.png');
}
section.mv .character.costume02.style02{
	background-image: url('../images/character_costume02_style02.png');
}
section.mv .character.costume02.style03{
	background-image: url('../images/character_costume02_style03.png');
}
section.mv .character.costume03.style01{
	background-image: url('../images/character_costume03_style01.png');
}
section.mv .character.costume03.style03{
	background-image: url('../images/character_costume03_style03.png');
}
section.mv .character.costume04.style02{
	background-image: url('../images/character_costume04_style02.png');
}
section.mv .player.costume01.style01{
	background-image: url('../images/player_costume01_style01.png');
}
section.mv .player.costume01.style02{
	background-image: url('../images/player_costume01_style02.png');
}
section.mv .player.costume01.style03{
	background-image: url('../images/player_costume01_style03.png');
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-in:after{
	content: 'いん';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-satsu:after{
	content: 'さつ';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-butsu:after{
	content: 'ぶつ';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-ei:after{
	content: 'えい';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-zou:after{
	content: 'ぞう';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-bun:after{
	content: 'ぶん';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-ya:after{
	content: 'や';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-to:after{
	content: 'と';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-kontentsu:after{
	content: 'コンテンツ';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-mo:after{
	content: 'も';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-se:after{
	content: 'せ';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-kai:after{
	content: 'かい';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-kan:after{
	content: 'かん';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-mi:after{
	content: 'み';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-ryoku:after{
	content: 'りょく';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-hi:after{
	content: 'ひ';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-da:after{
	content: 'だ';
}
section.mv .profile .layout .blocks .block p.about span.row span.cell.ruby.ruby-kokoro:after{
	content: 'こころ';
}





/**
 * section
 * work
 */
section.work{
	padding: 120px 0 0 0;
}
@media screen and (max-width: 768px){
	section.work{
		padding: 20.51vw 0 0 0;
	}
}





/**
 * section
 * gear
 */
section.gear{
	padding: 240px 0 120px 0;
}
section.gear .bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
section.gear .bg .player,
section.gear .bg .character{
	display: block;
	position: absolute;
	top: 0;
	width: 640px;
	height: calc(640px * (960/640));

	--gear_spread: 160px;
}
section.gear .bg .player{
	left: calc(50% - var(--gear_spread));
	transform: translate(-100%, 0);
}
section.gear .bg .character{
	right: calc(50% - var(--gear_spread));
	transform: translate(100%, 0);
}
section.gear .contents .visual{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	width: 100%;
}
section.gear .contents .visual .image{
	width: 840px;
	height: calc(840px * (630/840));
}
section.gear .contents .visual .image img{
	display: block;
	width: 100%;
	height: 100%;
}
section.gear .contents .visual .image .gear_image_electricity{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	fill: var(--purewhite);
}
section.gear .contents .visual .image .gear_image_electricity path{
	opacity: 0;
}
section.gear .contents .content{
	padding: calc(((840px * (630/840)) - ((((14px * 2) + (4px * 2)) * 4) + (4px * (4 - 1)))) / 2) 0;
	/**
	 * section.gear .contents .visual 
	 * section.gear .contents .visual .image
	 */
}
section.gear .contents .content ul.gear_lists{
	gap: 4px;
}
section.gear .contents .content ul.gear_lists li.gear_list{
	width: 100%;
}
section.gear .contents .content ul.gear_lists li.gear_list dl,
section.gear .contents .content ul.gear_lists li.gear_list dl dd ul.skill_lists{
	gap: 4px;
}
@media screen and (max-width: 1200px){
	section.gear .contents .visual .image{
		width: 768px;
		height: calc(768px * (630/840));
	}
	section.gear .contents .content{
		padding: calc(((768px * (630/840)) - ((((14px * 2) + (4px * 2)) * 4) + (4px * (4 - 1)))) / 2) 0;
		/**
		 * section.gear .contents .visual 
		 * section.gear .contents .visual .image
		 */
	}
}
@media screen and (max-width: 768px){
	section.gear{
		padding: 41.03vw 0 20.51vw 0;
	}
	section.gear .bg .player,
	section.gear .bg .character{
		top: auto;
		bottom: 0;
		width: 82.05vw;
		height: calc(82.05vw * (960/640));

		--gear_spread: 20.51vw;
	}
	section.gear .bg .player{
		left: calc((50% + 5.13vw) - var(--gear_spread));
	}
	section.gear .bg .character{
		right: calc((50% + 5.13vw) - var(--gear_spread));
	}
	section.gear .contents .visual{
		top: auto;
		bottom: 0;
		transform: translate(0, 0);
	}
	section.gear .contents .visual .image{
		width: 100vw;
		height: calc(100vw * (630/840));
	}
	section.gear .contents .content{
		padding: 0 0 calc(100vw * (630/840)) 0;
	}
	section.gear .contents .content ul.gear_lists{
		gap: 1.03vw;
	}
	section.gear .contents .content ul.gear_lists li.gear_list dl,
	section.gear .contents .content ul.gear_lists li.gear_list dl dd ul.skill_lists{
		gap: 1.03vw;
	}
}





/**
 * section
 * project
 */
section.project{
	padding: 40px 0;
}
section.project .layout{
	gap: 40px;
}
section.project .layout .thm,
section.project .layout .subject,
section.project .layout .genre,
section.project .layout .description{
	width: 100%;
}
section.project .layout .thm{
	padding: 8px 0;
}
section.project .layout .thm .img{
	width: 720px;
	height: calc(720px * (405/720));
	border-radius: 24px;
	box-shadow: 0 0 8px 0 var(--thingray);
	cursor: pointer;
}
section.project .layout .thm.wide .img{
	width: 880px;
	height: calc(880px * (330/880));
}
section.project .layout .thm.square .img{
	width: 540px;
	height: 540px;
}
section.project .layout .thm .img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
section.project .layout .subject{
	gap: 0 12px;
}
section.project .layout .subject .field,
section.project .layout .subject .field svg,
section.project .layout .subject .field .txt{
	display: block;
}
section.project .layout .subject .field:has(svg){
	padding: 0 0 0 14px;
}
section.project .layout .subject .field.name:has(svg){
	padding: 0 calc(14px + 4px) 0 0;
}
section.project .layout .subject .field svg{
	position: absolute;
	display: block;
	top: calc(((14px * 2) - 14px) / 2);
	left: 0;
	width: 14px;
	height: 14px;
}
section.project .layout .subject .field.name svg{
	left: auto;
	right: 0;
}
section.project .layout .subject .field svg path{
	fill: var(--gray);
}
section.project .layout .subject .field.name svg path{
	fill: var(--black);
}
section.project .layout .subject .field.name:hover svg path,
section.project .layout:has(.thm .img:hover) .field.name svg path{
	fill: var(--deepblue);
}
section.project .layout .subject .field .txt{
	font-size: 14px;
	color: var(--black);
	letter-spacing: var(--ls_regular);
}
section.project .layout .subject .field.name:hover .txt,
section.project .layout:has(.thm .img:hover) .field.name .txt{
	color: var(--deepblue);
}
section.project .layout .genre,
section.project .layout .genre ul.tool_lists{
	gap: 4px;
}
section.project .layout .description p{
	font-size: 14px;
	color: var(--black);
	letter-spacing: var(--ls_regular);
}
@media screen and (max-width: 978px){
	section.project .layout .thm.wide .img{
		width: 90vw;
		height: calc(90vw * (330/880));
	}
}
@media screen and (max-width: 800px){
	section.project .layout .thm .img{
		width: 90vw;
		height: calc(90vw * (405/720));
	}
}
@media screen and (max-width: 600px){
	section.project .layout .thm.square .img{
		width: 90vw;
		height: 90vw;
	}
}
@media screen and (max-width: 768px){
	section.project{
		padding: 10.26vw 0;
	}
	section.project .layout{
		gap: 10.26vw;
	}
	section.project .layout .thm{
		padding: 2.05vw 0;
	}
	section.project .layout .thm .img{
		border-radius: 3.08vw;
		box-shadow: 0 0 2.05vw 0 var(--thingray);
	}
	section.project .layout .subject{
		gap: 0 3.08vw;
	}
	section.project .layout .subject .field:has(svg){
		padding: 0 0 0 2.56vw;
	}
	section.project .layout .subject .field.name:has(svg){
		padding: 0 calc(2.56vw + 1.03vw) 0 0;
	}
	section.project .layout .subject .field svg{
		top: calc(((2.56vw * 2) - 2.56vw) / 2);
		width: 2.56vw;
		height: 2.56vw;
	}
	section.project .layout .subject .field .txt{
		font-size: 2.56vw;
	}
	section.project .layout .genre,
	section.project .layout .genre ul.tool_lists{
		gap: 1.03vw;
	}
	section.project .layout .description p{
		font-size: 2.56vw;
	}
}





/**
 * section
 * project
 * highlights
 */
section.project .highlights{
	width: 100%;
}
section.project .highlights ul.highlight_lists{
	gap: 40px;
}
section.project .highlights ul.highlight_lists li.highlight_list{
	width: 100%;
}
section.project .highlights ul.highlight_lists li.highlight_list dl{
	gap: 24px;
}
section.project .highlights ul.highlight_lists li.highlight_list dl dt,
section.project .highlights ul.highlight_lists li.highlight_list dl dd{
	width: 100%;
}
section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field,
section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field svg,
section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field .txt{
	display: block;
}
section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field:has(svg){
	padding-left: calc(14px + 8px);
}
section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field svg{
	position: absolute;
	top: calc(((14px * 2) - 14px) / 2);
	left: 0;
	width: 14px;
	height: 14px;
}
section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field svg path{
	fill: var(--blue);
}
section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field .txt{
	font-size: 14px;
	color: var(--black);
	letter-spacing: var(--ls_regular);
}
section.project .highlights ul.highlight_lists li.highlight_list dl dd{
	gap: 24px;
}
section.project .highlights ul.highlight_lists li.highlight_list dl dd p,
section.project .highlights ul.highlight_lists li.highlight_list dl dd .image{
	width: 100%;
}
section.project .highlights ul.highlight_lists li.highlight_list dl dd p{
	font-size: 14px;
	color: var(--black);
	letter-spacing: var(--ls_regular);
	padding: 0 calc(14px + 8px);
}
section.project .highlights ul.highlight_lists li.highlight_list dl dd .image{
	padding: 8px calc(14px + 8px);
}
section.project .highlights ul.highlight_lists li.highlight_list dl dd .image a,
section.project .highlights ul.highlight_lists li.highlight_list dl dd .image a img{
	display: block;
}
section.project .highlights ul.highlight_lists li.highlight_list dl dd .image a{
	width: 960px;
	height: calc(960px * (1032/1920));
	border-radius: 24px;
	box-shadow: 0 0 8px 0 var(--thingray);
}
section.project .highlights ul.highlight_lists li.highlight_list dl dd .image a img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
@media screen and (max-width: 1116px){
	section.project .highlights ul.highlight_lists li.highlight_list dl dd .image a{
		width: calc(90vw - ((14px + 8px) * 2));
		height: calc((90vw - ((14px + 8px) * 2)) * (1032/1920));
	}
}
@media screen and (max-width: 768px){
	section.project .highlights ul.highlight_lists{
		gap: 10.26vw;
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl{
		gap: 6.15vw;
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field:has(svg){
		padding-left: calc(2.56vw + 1.03vw);
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field svg{
		top: calc(((2.56vw * 2) - 2.56vw) / 2);
		width: 2.56vw;
		height: 2.56vw;
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl dt h2 .field .txt{
		font-size: 2.56vw;
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl dd{
		gap: 6.15vw;
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl dd p{
		font-size: 2.56vw;
		padding: 0 calc(2.56vw + 1.03vw);
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl dd .image{
		padding: 2.05vw calc(2.56vw + 1.03vw);
	}
	section.project .highlights ul.highlight_lists li.highlight_list dl dd .image a{
		width: calc(90vw - ((2.56vw + 1.03vw) * 2));
		height: calc((90vw - ((2.56vw + 1.03vw) * 2)) * (1032/1920));
		border-radius: 3.08vw;
		box-shadow: 0 0 2.05vw 0 var(--thingray);
	}
}





/**
 * section
 * notfound
 */
section.notfound{
	padding: 40px 0;
}
section.notfound .wrap{
	width: 100%;
	height: calc(1920px * (1440/1920));
}
section.notfound .wrap img{
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 1920px;
	height: calc(1920px * (1440/1920));
}
section.notfound .wrap .ttl,
section.notfound .wrap .status,
section.notfound .wrap a{
	position: absolute;
	font-weight: 500;
}
section.notfound .wrap .ttl{
	top: calc(50% - 600px);
	left: calc(50% - 360px);
	transform: translate(-50%, -50%) rotate(-54deg);
	font-size: 32px;
}
section.notfound .wrap .status{
	top: calc(50% - 600px);
	left: calc(50% - 104px);
	transform: translate(-50%, -50%) rotate(60deg);
	font-size: 16px;
}
section.notfound .wrap a{
	display: block;
	top: calc(50% - 380px);
	left: calc(50% + 132px);
	transform: translate(-50%, -50%) rotate(-44deg);
	font-size: 16px;
}
section.notfound .wrap .message p.txts{
	gap: 36px;
}
section.notfound .wrap .message p.txts span.row,
section.notfound .wrap .message p.txts span.row span.cell,
section.notfound .wrap .message p.txts span.row span.cell span.txt{
	display: block;
}
section.notfound .wrap .message p.txts span.row:nth-child(1){
	order: 3;
}
section.notfound .wrap .message p.txts span.row:nth-child(2){
	order: 2;
}
section.notfound .wrap .message p.txts span.row:nth-child(3){
	order: 1;
}
section.notfound .wrap .message p.txts span.row,
section.notfound .wrap .message p.txts span.row span.cell{
	width: 36px;
}
section.notfound .wrap .message p.txts span.row span.cell{
	height: 36px;
}
section.notfound .wrap .message p.txts span.row span.cell span.txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 36px;
	color: var(--black);
	line-height: 1;
}
section.notfound .wrap .message p.txts span.row span.cell.ruby:after{
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(100%, 0);
	height: 100%;
	font-size: calc(36px * (1/3));
	line-height: 1;
}
section.notfound .wrap .message p.txts span.row span.cell.ruby.ruby-michi:after{
	content: 'みち';
}
section.notfound .wrap .message p.txts span.row span.cell.ruby.ruby-ma:after{
	content: 'ま';
}
section.notfound .wrap .message p.txts span.row span.cell.ruby.ruby-chiga:after{
	content: 'ちが';
}
section.notfound .wrap .message p.txts span.row span.cell.ruby.ruby-saga:after{
	content: 'さが';
}
section.notfound .wrap .message p.txts span.row span.cell.ruby.ruby-mi:after{
	content: 'み';
}
@media screen and (max-width: 768px){
	section.notfound{
		padding: 10.26vw 0;
	}
	section.notfound .wrap{
		height: calc(31.25vw + ((15.63vw * 2) + 5.21vw) + (4.69vw * 20));
	}
	section.notfound .wrap img{
		width: calc((31.25vw + ((15.63vw * 2) + 5.21vw) + (4.69vw * 20)) * (1920/1440));
		height: calc(31.25vw + ((15.63vw * 2) + 5.21vw) + (4.69vw * 20));
	}
	section.notfound .wrap .ttl{
		top: calc(50% - 69.79vw);
		left: calc(50% - 38.54vw);
		transform: translate(-50%, -50%) rotate(-44deg);
		font-size: 4.17vw;
	}
	section.notfound .wrap .status{
		top: calc(50% - 72.92vw);
		left: calc(50% - 20.83vw);
		transform: translate(-50%, -50%) rotate(14deg);
		font-size: 3.13vw;
	}
	section.notfound .wrap a{
		top: calc(50% - 44.27vw);
		left: calc(50% + 15.63vw);
		transform: translate(-50%, -50%) rotate(-46deg);
		font-size: 3.13vw;
	}
	section.notfound .wrap .message p.txts{
		gap: 4.69vw;
	}
	section.notfound .wrap .message p.txts span.row,
	section.notfound .wrap .message p.txts span.row span.cell{
		width: 4.69vw;
	}
	section.notfound .wrap .message p.txts span.row span.cell{
		height: 4.69vw;
	}
	section.notfound .wrap .message p.txts span.row span.cell span.txt{
		font-size: 4.69vw;
	}
	section.notfound .wrap .message p.txts span.row span.cell.ruby:after{
		font-size: calc(4.69vw * (1/3));
	}
}