@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{
		grid-auto-flow:row;
	}
	.navigation a{
		font-size:13px;
	}

}

/* header
-------------------------------------------------- */
header{
	position:fixed;
	top:0;
	left:0;
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	background:rgba(0,0,0,0.8);
	z-index:10000;
}
header .logo{
	height:62px;
	padding-block:15px;
}
header .logo img{
	height:32px;
}
header .nav{
	margin-inline:auto min(2.5vw,25px);
}
header .nav .sns{
	display:none;
}
header .language{
	position:relative;
}
header .language .icon{
	anchor-name:--lang;
	display:block;
	width:18px;
	line-height:1;
	cursor:pointer;
}
header .language .menu{
	position-anchor:--lang;
	position:absolute;
	top:anchor(bottom);
	justify-self:center;
	width:75px;
	padding-block-start:8px;
	visibility:hidden;
	opacity:0;
	transform:translateY(-15px);
	transition:0.5s;
}
header .language:hover .menu{
	visibility:visible;
	opacity:1;
	transform:translateY(0);
}
header .language .menu ul{
	position:relative;
	display:grid;
	grid-auto-flow:row;
	row-gap:1px;
	padding-block:6px;
	font-size:13px;
	font-family:'Noto Sans JP',sans-serif;
	text-align:center;
	border-radius:4px;
	background:#FFF;
}
header .language .menu a,
header .language .menu span{
	display:block;
	width:fit-content;
	margin-inline:auto;
}
header .language .menu a{
	color:#000;
}
header .language .menu span{
	color:#666;
}
@media screen and (max-width:800px){
	header{
		padding-inline-end:14px;
	}
	header .logo{
		height:49px;
		padding-block:12px;
	}
	header .logo img{
		height:25px;
	}
	header .nav{
		display:none;
	}
	header .language{
		display:none;
	}
}

/* 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{
	margin-block-start:52px;
	font:11px/1.6 'Noto Sans JP',sans-serif;
	color:#CCC;
}
footer .copyright dt{
	margin-block-end:8px;
}
footer .copyright dd+dt{
	margin-block-start:28px;
}
footer .notes{
	display:grid;
	grid-auto-flow:row; 
	row-gap:6px;
}
footer .notes li{
	position:relative;
	padding-inline-start:1.1em;
}
footer .notes li::before{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:1em;
	content:'\203B';
}
@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 .copyright{
		margin-block-start:42px;
	}
	footer .copyright dt{
		margin-block-end:6px;
	}
	footer .copyright dd+dt{
		margin-block-start:26px;
	}
	footer .notes{
		row-gap:4px;
	}
}

/* #menu */
#menu{
	position:relative;
	display:none;
	width:21px;
	height:21px;
	margin-inline-start:auto;
}
#menu span{
	position:absolute;
	left:0;
	display:block;
	width:21px;
	height:1px;
	background:#FFF;
}
#menu span:nth-last-of-type(1){
	top:50%;
	margin-block-start:-1px;
}
#menu span:nth-last-of-type(2){
	top:3px;
}
#menu span:nth-last-of-type(3){
	bottom:3px;
}
@media screen and (max-width:800px){
	#menu{
		display:block;
	}
}

/* #navigation
-------------------------------------------------- */
#navigation{
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100dvh;
	padding-block-start:70px;
	background:#000 url(../images/noise.png) repeat 0 0;
	z-index:20000;
}
#navigation .logo{
	width:fit-content;
	height:25px;
	margin-inline:auto;
}
#navigation .navigation{
	display:grid;
	grid-auto-flow:row;
	row-gap:9px;
	margin-block-start:27px;
	margin-inline:auto;
	text-align:center;
}
#navigation .navigation a{
	padding-block:5px 6px;
	font-size:15px;
	line-height:2;
}
#navigation .language{
	display:grid;
	grid-auto-flow:column;
	width:fit-content;
	margin-block-start:41px;
	margin-inline:auto;
}
#navigation .language li:not(:first-child){
	display:grid;
	grid-template-columns:repeat(2,auto);
}
#navigation .language li:not(:first-child)::before{
	display:block;
	padding-inline:1.5ex;
	content:'/';
}
#navigation .language span{
	color:#BBB;
}
#navigation .sns{
	display:grid;
	grid-auto-flow:column;
	column-gap:24px;
	align-items:center;
	width:fit-content;
	margin-block-start:30px;
	margin-inline:auto;
}
#navigation .close{
	position:fixed;
	top:14px;
	right:14px;
	width:21px;
	height:21px;
}
#navigation .close span{
	position:absolute;
	top:50%;
	left:0;
	display:block;
	width:21px;
	height:1px;
	margin-block-start:-1px;
	background:#FFF;
}
#navigation .close span:nth-last-of-type(1){
	transform:rotate(45deg);
}
#navigation .close span:nth-last-of-type(2){
	transform:rotate(-45deg);
}
@media screen and (min-width:801px){
	#navigation{
		display:none !important;
	}
}

/* main
-------------------------------------------------- */
main{
	padding-block-start:62px;
}
section{
	padding-inline:min(4vw,80px);
	background:transparent url(../images/noise.png) repeat 0 0;
}
section:not(#platform,#movie){
	padding-block:80px 190px;
}
section:not(#platform,#movie) .title{
	position:relative;
	margin-block-end:64px;
	padding-block-start:35px;
	font-size:11px;
	line-height:1;
	font-weight:500;
}
section .title::before{
	position:absolute;
	top:-3px;
	left:0;
	display:block;
	font:38px/1 'Amiri',sans-serif;
	font-weight:400;
}
section:where(#platform,#movie){
	padding-inline:0;
	text-align:center;
}
section:where(#platform,#movie) .title{
	margin-block-end:13px;
	font-size:18px;
}
@media screen and (max-width:800px){
	main{
		padding-block-start:49px;
	}
	section{
		padding-inline:0;
	}
	section:not(#platform,#movie){
		padding-block:62px 158px;
	}
	section:not(#platform,#movie) .title{
		margin-inline:min(6.4vw,30px);
		margin-block-end:61px;
		padding-block-start:24px;
		font-size:10px;
	}
	section .title::before{
		top:-2px;
		font-size:24px;
	}
	section:where(#platform,#movie) .title{
		margin-block-end:10px;
		font-size:14px;
	}
}

/* #keyart */
#keyart img{
	width:100%;
	height:auto;
}

/* #platform */
#platform{
	padding-block-start:34px;
	container-type:inline-size;
}
#platform .banner{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:18px;
	width:100%;
	padding-inline:min(4vw,80px);
}
#platform a{
	display:grid;
	place-items:center;
	width:280px;
	height:90px;
	box-shadow:0 0 50px rgba(233,72,45,0.32);
}
#platform img{
	width:280px;
	height:90px;
}
@media screen and (max-width:800px){
	#platform .banner{
		padding-inline:12vw;
		gap:14px;
		max-width:initial;
	}
}
@container (width <= 755px){
	#platform .banner{
		gap:12px;
	}
	#platform .banner li{
		width:100%;
	}
	#platform a{
		width:100%;
		height:auto;
		border-radius:5px;
		background:#000;
	}
}
@container (width <= 374px){
	#platform .banner{
		padding-inline:8vw;
	}
}
@container (width <= 334px){
	#platform img{
		width:100%;
		height:auto;
	}
}

/* #movie */
#movie{
	padding-block:34px 45px;
}
#movie .youtube{
	width:min(76.8vw,768px);
	margin-inline:auto;
	aspect-ratio:16/9;
}
#movie iframe{
	width:100%;
	height:100%;
	vertical-align:bottom;
}
@media screen and (max-width:800px){
	#movie{
		padding-block-end:40px;
		padding-inline:12vw;
	}
	#movie .youtube{
		width:100%;
	}
}
@media screen and (max-width:599px){
	#movie{
		padding-inline:6px;
	}
}

/* #story */
section#story{
	height:calc(100dvh - 62px);
	max-height:1080px;
	min-height:605px;
	padding-block-end:80px;
	background:url(../images/story.jpg) no-repeat center / cover;
}
#story .title{
	margin-block-end:0 !important;
}
#story .title::before{
	content:'Story';
}
#story .introduction{
	display:grid;
	place-items:center;
	height:100%;
	margin-block-start:-46px;
	padding-block:46px;
}
#story .inner{
	padding-block:55px 56px;
}
#story .heading{
	padding-block-end:36px;
	font-size:28px;
	line-height:1.5;
	font-weight:500;
}
#story .text:not(:last-child){
	padding-block-end:35px;
}
#story .tablet,
#story .mobile{
	display:none;
}
#story .title,
#story .heading,
#story .text{
	text-shadow:0 0 20px #000;
}
@media screen and (max-width:800px){
	section#story{
		height:auto;
		max-height:initial;
		min-height:initial;
		padding-block-end:153px;
	}
	#story .title{
		margin-block-end:54px !important;
	}
	#story .introduction{
		display:block;
		place-items:unset;
		height:100%;
		margin-block-start:0;
		padding-block:0;
		padding-inline:12vw;
	}
	#story .inner{
		width:fit-content;
		margin-inline:auto;
		padding-block:0;
	}
	#story .heading{
		padding-block-end:28px;
		font-size:19px;
		line-height:1.65;
	}
	#story .text:not(:last-child){
		padding-block-end:29px;
	}
}
@media screen and (max-width:599px){
	#story .tablet{
		display:block;
	}
}
@media screen and (max-width:374px){
	#story .introduction{
		padding-inline:8vw;
	}
}
@media screen and (max-width:359px){
	#story .heading .tablet{
		display:none;
	}
	#story .mobile{
		display:block;
	}
}

/* #character */
#character{
	background-color:#000;
}
#character .title::before{
	content:'Character';
}
#character .characters{
	display:grid;
	grid-auto-flow:row;
	row-gap:50px;
	max-width:1000px;
	margin-inline:auto;
}
#character .characters li{
	display:grid;
	grid-template-columns:min(36vw,360px) 1fr;
	gap:29px min(3.5vw,35px);
}
#character .character02 .thumbnail{
	background:url(../images/character/background02.jpg) no-repeat center/cover;
}
#character .character03 .thumbnail{
	background:url(../images/character/background03.jpg) no-repeat center/cover;
}
#character .character04 .thumbnail{
	background:url(../images/character/background04.jpg) no-repeat center/cover;
}
#character .character05 .thumbnail{
	background:url(../images/character/background05.jpg) no-repeat center/cover;
}
#character .thumbnail img{
	width:100%;
	transition:opacity 0.6s;
}
#character .name{
	padding-block:2px 30px;
	font-size:20px;
	line-height:1;
	font-weight:600;
}
#character .name span{
	font-size:13px;
}
@media screen and (max-width:800px){
	section#character{
		padding-block-end:152px;
	}
	#character .characters{
		row-gap:80px;
		padding-inline:12vw;
	}
	#character .characters li{
		grid-template-columns:auto;
	}
	#character .character01 .thumbnail{
		display:none;
	}
	#character .name{
		padding-block:0 19px;
		font-size:17px;
	}
	#character .name span{
		font-size:11px;
	}
}
@media screen and (max-width:599px){
	#character .characters{
		padding-inline:0;
	}
	#character .thumbnail{
		margin-inline:6px;
	}
	#character .introduction{
		padding-inline:min(6.4vw,30px);
	}
}
@media(any-hover:hover){
	#character li:not(.character01) .thumbnail img:hover{
		opacity:0;
	}
}

/* #overview */
#overview{
	background-color:#260806;
}
#overview .title::before{
	content:'Overview';
}
#overview .inner{
	width:min(74vw,740px);
	margin-inline:auto;
}
#overview table{
	width:100%;
	border-top:1px solid rgba(255,255,255,0.25);
}
#overview tr{
	border-bottom:1px solid rgba(255,255,255,0.25);
}
#overview th,
#overview td{
	padding-block:14px 13px;
}
#overview th{
	width:9em;
	padding-inline-start:8px;
	white-space:nowrap;
}
#overview td{
	padding-inline-end:8px;
}
@media screen and (max-width:800px){
	#overview .inner{
		width:100%;
		padding-inline:12vw;
	}
	#overview th,
	#overview td{
		padding-block:14px;
	}
	#overview th{
		width:8.5em;
		padding-inline-start:3px;
	}
	#overview td{
		padding-inline-end:3px;
	}
}
@media screen and (max-width:374px){
	#overview .inner{
		padding-inline:8vw;
	}
}

/* #guideline */
#guideline{
	background-color:#000;
}
#guideline .title{
	margin-block-end:56px !important;
}
#guideline .title::before{
	content:'Guideline'
}
#guideline .inner{
	max-width:1000px;
	margin-inline:auto;
}
#guideline .heading{
	font-size:20px;
	line-height:1.65;
	font-weight:600;
}
#guideline .heading span{
	display:inline-block;
}
#guideline .content{
	margin-block-start:53px;
}
#guideline .content+.content{
	margin-block-start:59px;
}
#guideline .subheading{
	margin-block-end:28px;
	font-weight:600;
}
#guideline .subheading span{
	display:inline-block;
	padding-inline-end:1ex;
}
#guideline table{
	width:100%;
	border-top:1px solid rgba(255,255,255,0.25);
}
#guideline tr{
	border-bottom:1px solid rgba(255,255,255,0.25);
}
#guideline th,
#guideline td{
	padding-block:14px 13px;
	vertical-align:middle;
}
#guideline th{
	width:16em;
	padding-inline-start:8px;
	white-space:nowrap;
}
#guideline td{
	padding-inline-end:8px;
}
#guideline td a{
	overflow-wrap:anywhere;
}
#guideline .prohibited{
	display:grid;
	grid-auto-flow:row;
	row-gap:7px;
}
#guideline .prohibited li{
	position:relative;
	padding-inline-start:1em;
}
#guideline .prohibited li::before{
	position:absolute;
	top:11px;
	left:3px;
	display:block;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#FFF;
	content:'';
}
@media screen and (max-width:800px){
	#guideline .inner{
		padding-inline:12vw;
	}
	#guideline .heading{
		font-size:17px;
	}
	#guideline .content{
		margin-block-start:44px;
	}
	#guideline .content+.content{
		margin-block-start:49px;
	}
	#guideline .subheading{
		margin-block-end:19px;
	}
	#guideline table,
	#guideline tbody
	#guideline tr,
	#guideline th,
	#guideline td{
		display:block;
	}
	#guideline th,
	#guideline td{
		padding-block:0;
		padding-inline:3px;
	}
	#guideline th{
		width:auto;
		padding-block:14px 7px;
	}
	#guideline td{
		padding-block-end:15px;
	}
	#guideline .prohibited{
		row-gap:4px;
	}
	#guideline .prohibited li::before{
		width:4px;
		height:4px;
	}
}
@media screen and (max-width:599px){
	#guideline .inner{
		padding-inline:min(6.4vw,30px);
	}
}