@charset "utf-8";

/* font
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Noto+Sans+JP&family=Noto+Serif+JP:wght@200..900&display=swap');

/* reset
================================================== */
*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert;}
*,*::before,*::after{box-sizing:border-box;}
html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
a,button{cursor:revert;}
ol,ul,menu,summary{list-style:none;}
ol{counter-reset:revert;}
img{max-inline-size:100%;max-block-size:100%;}
table{border-collapse:collapse;}
input,textarea{-webkit-user-select:auto;}
textarea{white-space:revert;}
meter{-webkit-appearance:revert;appearance:revert;}
:where(pre){all:revert;box-sizing:border-box;}
::placeholder{color:unset;}
:where([hidden]){display:none;}
:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto;}
:where([draggable="true"]){-webkit-user-drag:element;}
:where(dialog:modal){all:revert;box-sizing:border-box;}
::-webkit-details-marker{display:none;}

/* addition
-------------------------------------------------- */
body{position:relative;width:100%;font-size:16px;line-height:1.8;color:#FFF;font-family:'Noto Serif JP',serif;font-weight:400;background:#000;}
footer,header,main,nav,picture{display:block;}
img,svg{vertical-align:top;}
a{color:#FFF;vertical-align:bottom;background:transparent;}
a:has(img,svg){line-height:1;}
@media screen and (max-width:800px){
	body{
		font-size:14px;
	}
}

/* ゾンビのあふれた世界で俺だけが襲われない 楽園への道
================================================== */
html,body{
	height:100%;
}

/* header, footer
-------------------------------------------------- */
header,
footer{
	width:100%;
	padding-inline:min(4vw,80px);
	background:#000;
}
.logo{
	width:auto;
}
.logo a{
	display:block;
	width:fit-content;
}
nav{
	width:fit-content;
}
.navigation{
	display:grid;
	grid-auto-flow:column;
	column-gap:min(2.5vw,25px);
}
.navigation a{
	display:block;
	font-size:14px;
	font-weight:500;
	transition:color 0.35s;
}
.sns a,
.language a{
	display:block;
}
.sns svg,
.language svg{
	fill:#FFF;
}
.sns [aria-label=X]{
	width:auto;
	height:20px;
}
.sns [aria-label=YouTube]{
	width:24px;
	height:auto;
}
@media screen and (max-width:800px){
	header,
	footer{
		padding-inline:min(6.4vw,30px);
	}
	.navigation a{
		font-size:13px;
	}
}

/* header
-------------------------------------------------- */
header{
	position:fixed;
	top:0;
	left:0;
	display:grid;
	grid-template-columns:auto 1fr;
	align-items:center;
	background:rgba(0,0,0,0.8);
	z-index:10000;
}
header .logo{
	height:62px;
	padding-block:9px;
}
header .logo img{
	height:44px;
}
header .nav{
	margin-inline-start:auto;
}
@media screen and (max-width:800px){
	header .logo{
		height:49px;
		padding-block:7px;
	}
	header .logo img{
		height:35px;
	}
}

/* footer
-------------------------------------------------- */
footer{
	position:sticky;
	top:100vh;
	padding-block:55px 56px;
}
footer .logo,
footer .logo a,
footer .logo img{
	height:35px;
}
footer .nav ul{
	margin-block:29px 40px;
	font-family:'Noto Sans JP',sans-serif;
}
footer .sns ul{
	display:grid;
	grid-auto-flow:column;
	column-gap:24px;
	align-items:center;
	width:fit-content;
}
footer .copyright{
	display:grid;
	grid-auto-flow:row;
	row-gap:9px;
	margin-block-start:52px;
	font:11px/1.6 'Noto Sans JP',sans-serif;
	color:#CCC;
}
footer .copyright dl{
	display:grid;
	grid-auto-flow:row;
	row-gap:3px;
}
@media screen and (max-width:800px){
	footer{
		padding-block:45px 48px;
	}
	footer .logo,
	footer .logo a,
	footer .logo img{
		height:30px;
	}
	footer .nav ul{
		margin-block:26px 30px;
		row-gap:12px;
	}
	footer .navigation{
		grid-auto-flow:row;
	}
	footer .copyright{
		row-gap:8px;
		margin-block-start:42px;
	}

}

/* main
-------------------------------------------------- */
main{
	padding-block-start:62px;
}
section{
	padding-inline:min(4vw,80px);
}
@media screen and (max-width:800px){
	main{
		padding-block-start:49px;
	}
	section{
		padding-inline:min(6.4vw,30px);
	}
}

/* #keyart */
#keyart{
	position:relative;
}
#keyart img{
	width:100%;
	height:auto;
}
#keyart .banner{
	position:absolute;
	bottom:1.953125vw;
	left:0;
	width:58.59375vw;
}
#keyart .banner li{
	width:fit-content;
	margin-inline:auto;
	padding:10px;
	border-radius:20px;
	background:rgba(255,255,255,0.12);
}
#keyart .banner a{
	display:grid;
	place-items:center;
	width:400px;
	border-radius:10px;
	background:#000;
}
#keyart .banner img{
	width:auto;
	height:90px;
}
@media screen and (max-width:800px){
	#keyart .banner{
		bottom:0;
		width:100%;
	}
	#keyart .banner li{
		width:100%;
		border-radius:0;
	}
	#keyart .banner a{
		width:100%;
	}
}
@media screen and (max-width:599px){
	#keyart .banner{
		position:static;
		bottom:unset;
		left:unset;
	}
	#keyart .banner li{
		padding:18px min(6.4vw,30px);
		background:rgba(255,255,255,0.18);
	}
	#keyart .banner a{
		border-radius:5px;
	}
}

/* #link */
#link{
	padding-block:36px 28px;
	background:url(../images/splash.jpg) no-repeat center bottom/cover;
}
#link .title{
	position:relative;
	width:fit-content;
	margin-inline:auto;
	padding-block-start:34px;
	font-size:11px;
	line-height:1.25;
	font-weight:400;
	color:#E1DAE2;
}
#link .title::before{
	position:absolute;
	top:0;
	left:50%;
	display:block;
	font:27px/1 'Noto Serif',serif;
	font-weight:600;
	transform:translateX(-50%);
	content:'LINK';
}
#link .banner{
	display:grid;
	grid-template-columns:repeat(2,280px);
	gap:28px 22px;
	width:fit-content;
	margin-block-start:23px;
	margin-inline:auto;
}
#link .banner dd{
	padding-block-start:10px;
	font:13px/1.25 'Noto sans',sans-serif;
	color:#E1DAE2;
	text-align:center;
}
@media screen and (max-width:800px){
	#link{
		padding-block-start:31px;
	}
	#link .title{
		padding-block-start:31px;
		font-size:10px;
	}
	#link .title::before{
		font-size:22px;
	}
	#link .banner dd{
		padding-block-start:11px;
		font-size:12px;
	}
}
@media screen and (max-width:767px){
	#link{
		padding-block-end:43px;
	}
	#link .banner{
		grid-template-columns:auto;
		width:auto;
		max-width:280px;
		margin-block-start:24px;
	}
}