@charset "utf-8";

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

/* reset
================================================== */
*:where(:not(iframe,img,svg):not(svg *)){all:unset;display:revert;}
*,*::before,*::after{box-sizing:border-box;}
body{position:relative;width:100%;font-size:17px;line-height:2;color:#FFF;font-family:'Noto Sans JP',sans-serif;font-weight:400;font-feature-settings:'palt';letter-spacing:0.1em;background:url(../image/background.png) repeat center top;-webkit-text-size-adjust:100%;}
footer,header,main,section,picture{display:block;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
img{width:100%;height:auto;vertical-align:bottom;}
a{margin:0;padding:0;color:#FFF;vertical-align:bottom;background:transparent;cursor:pointer;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}

/* Ike Boys
================================================== */
:root{
	--content-width:1040px;
	--content-padding:30px;
	--font-bold:700;
	--font-black:900;
	--border-light:rgba(255,255,255,0.3);
	--border-dark:rgba(0,0,0,0.4);
	--background-light:rgba(0,0,0,0.25);
	--background-dark:rgba(0,0,0,0.7);
}
@media screen and (max-width:768px){
	:root{
		--content-padding:20px;
	}
}

/* common
-------------------------------------------------- */
:lang(en){
	font-family:'Gabarito';
}
.mobile{
	display:none;
}
.contents{
	max-width:var(--content-width);
	margin:0 auto;
	padding:0 var(--content-padding);
}
.heading{
	position:relative;
	width:fit-content;
	margin:0 auto;
	padding:0 20px;
	font-size:44px;
	line-height:1;
	color:#EEC54F;
	font-weight:900;
	letter-spacing:0;
}
.heading::after{
	position:absolute;
	bottom:5px;
	left:0;
	display:block;
	width:100%;
	height:4px;
	border-radius:2px;
	background:#EEC54F;
	content:'';
}
.artist_list{
	display:flex;
	flex-direction:column;
	row-gap:75px;
	margin-top:45px;
}
.artist_details:has(.artist_thumbnail){
	display:grid;
	grid-template-columns:min(31.7308vw,330px) 1fr;
	column-gap:35px;
}
.name{
	font-size:26px;
	line-height:1.25;
	font-weight:var(--font-black);
}
.name::before{
	display:block;
	width:0;
	height:0;
	margin-top:calc((26px - 32.5px) / 2);
	content:'';
}
.artist_details:has(.artist_thumbnail) .name{
	padding-top:11px;
}
.title{
	margin-top:8px;
	line-height:1.5;
	font-weight:var(--font-bold);
}
.profile{
	margin-top:24px;
}
.profile::after{
	display:block;
	width:0;
	height:0;
	margin-bottom:calc((14px - 28px) / 2);
	content:'';
}
.title+.profile{
	margin-top:22px;
}
.animation{
	opacity:0;
	transform:translateY(50px);
	transition:1s;
}
.animation.active{
	opacity:1;
	transform:translateY(0);
}
.fadein{
	opacity:0;
	transition:1s;
}
.fadein.active{
	opacity:1;
	transform:translateY(0);
}

/* parts */
b{
	font-weight:var(--font-bold);
}
i{
	font-style:italic;
}
u{
	text-decoration:underline;
}
.red{
	color:#E60027;
}
.blue{
	color:#2500AD;
}
.green{
	color:#008A0B;
}
img.i30{max-width:30%;}
img.i50{max-width:50%;}
img.i70{max-width:70%;}

#news a,
#theater a{
	text-decoration:underline;
}
@media screen and (max-width:768px){
	body{
		font-size:14px;
	}
	.pc{
		display:none;
	}
	.mobile{
		display:block;
	}
	.heading{
		padding:0 12px;
		font-size:26px;
	}
	.heading::after{
		bottom:3px;
	}
	.artist_list{
		row-gap:61px;
		margin-top:27px;
	}
	.artist_details:has(.artist_thumbnail){
		grid-template-columns:1fr;
		row-gap:29px;
	}
	.name{
		font-size:18px;
	}
	.name::before{
		margin-top:calc((18px - 22.5px) / 2);
	}
	.artist_details:has(.artist_thumbnail) .name{
		padding-top:0;
	}
	.title{
		margin-top:10px;
	}
	.profile{
		margin-top:16px;
	}
	.title+.profile{
		margin-top:12px;
	}
}

/* footer
-------------------------------------------------- */
footer{
	padding:61px var(--content-padding) 62px;
	background:var(--background-light);
}
footer p{
	font-size:20px;
	font-family:var(--font-serif);
	font-weight:var(--font-medium);
	text-align:center;
}
@media screen and (max-width:768px){
	footer{
		padding-top:31px;
		padding-bottom:31px;
	}
	footer p{
		font-size:13px;
	}
}

/* navigation
-------------------------------------------------- */
#menu{
	position:fixed;
	top:15px;
	right:15px;
	width:52px;
	height:52px;
	background:var(--background-dark);
	cursor:pointer;
	z-index:100000;
}
#menu span{
	position:absolute;
	left:10px;
	display:block;
	width:32px;
	height:2px;
	background:#FFF;
	transition:0.3s;
}
#menu span:nth-of-type(1){
	top:14px;
}
#menu span:nth-of-type(2){
	top:25px;
}
#menu span:nth-of-type(3){
	top:36px;
}
#menu.open span:nth-of-type(1){
	width:48px;
	transform:translate(-8px,11px) rotate(-45deg);
}
#menu.open span:nth-of-type(2){
	opacity:0;
}
#menu.open span:nth-of-type(3){
	width:48px;
	transform:translate(-8px,-11px) rotate(45deg);
}
#navigation{
	position:fixed;
	top:0;
	right:0;
	width:380px;
	height:100vh;
	background:#000;
	opacity:0;
	visibility:hidden;
	z-index:10000;
	transform:translateX(380px);
	transition:0.3s;
}
#navigation nav{
	display:grid;
	align-items:center;
	height:100vh;
	padding:0 30px;
}
.navigation_link{
	display:flex;
	flex-direction:column;
	row-gap:13px;
	opacity:0;
	visibility:hidden;
	transition:0.3s;
}
.navigation_link a,
.navigation_link span{
	display:block;
	font-size:24px;
	line-height:1.5;
	color:#EEC54F;
	font-weight:var(--font-black);
	text-align:center;
	cursor:pointer;
}
#navigation.open{
	opacity:1;
	visibility:visible;
	transform:translateX(0);
}
.navigation_link.open{
	opacity:1;
	visibility:visible;
}
#overlay{
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100%;
	height:100vh;
	background:var(--background-dark);
	z-index:9999;
}
@media screen and (max-width:768px){
	#menu{
		width:44px;
		height:44px;
	}
	#menu span{
		width:24px;
	}
	#menu span:nth-of-type(1){
		top:12px;
	}
	#menu span:nth-of-type(2){
		top:21px;
	}
	#menu span:nth-of-type(3){
		top:30px;
	}
	#menu.open span:nth-of-type(1){
		width:38px;
		transform:translate(-7px,9px) rotate(-45deg);
	}
	#menu.open span:nth-of-type(2){
		opacity:0;
	}
	#menu.open span:nth-of-type(3){
		width:38px;
		transform:translate(-7px,-9px) rotate(45deg);
	}
	#navigation{
		width:100%;
		transform:translateX(100%);
		overscroll-behavior:contain;
		overflow-y:scroll;
		scrollbar-width:none;
		touch-action:none;
	}
}

/* modal
-------------------------------------------------- */
#modal{
	position:fixed;
	top:0;
	left:0;
	display:none;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100vh;
	background:var(--background-dark);
	overflow:hidden;
	z-index:200000;
}
#modal.active{
	display:grid;
}
.modal_wrapper{
	width:min(100vw,1040px);
	padding:0 20px;
}
.tabNav{
	display:flex;
	gap:10px 5px;
	width:100%;
	margin-top:15px;
}
.tab{
	flex:1;
	padding:2px 0 4px;
	font-size:16px;
	text-align:center;
	border:1px solid #FFF;
	cursor:pointer;
}
.tab.active{
	color:#000;
	font-weight:var(--font-bold);
	background:#FFF;
}
.tabDetails{
	display:none;
	width:100%;
	aspect-ratio:16 / 9;
}
.tabDetails.active{
	display:block;
}
.tabDetails iframe{
	width:100%;
	height:100%;
	vertical-align:bottom;
}
.close{
	position:absolute;
	top:15px;
	right:15px;
	width:52px;
	height:52px;
	cursor:pointer;
}
.close::before,
.close::after{
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	width:50px;
	height:2px;
	background:#FFF;
	content:'';
}
.close::before{
	transform:translate(-50%,-50%) rotate(45deg);
}
.close::after{
	transform:translate(-50%,-50%) rotate(-45deg);
}
@media screen and (max-width:768px){
	#modal{
		overscroll-behavior:contain;
		overflow-y:scroll;
		scrollbar-width:none;
		touch-action:none;
	}
	.modal_wrapper{
		padding:0 15px;
	}
	.tabNav{
		flex-direction:column;
		margin-top:10px;
	}
	.tab{
		padding:0 0 2px;
		font-size:14px;
	}
	.close{
		width:44px;
		height:44px;
	}
	.close::before,
	.close::after{
		width:38px;
	}
}
@media screen and (min-width:769px){
	.tab{
		transition:0.3s;
	}
	.tab:hover{
		color:#000;
		font-weight:var(--font-bold);
		background:#FFF;
	}
}

/* #news
-------------------------------------------------- */
#news{
	background:var(--background-light);
}
#news .contents{
	padding-top:78px;
	padding-bottom:95px;
}
.news_list{
	margin-top:45px;
	border-top:1px solid var(--border-light);
}
.news_item{
	padding:0 15px;
	border-bottom:1px solid var(--border-light);
}
.news_content{
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:35px;
}
.news_date{
	padding-top:30px;
	font-size:19px;
	line-height:1;
	font-weight:var(--font-bold);
}
.news_details{
	padding:24px 0 26px;
	line-height:1.6;
}
@media screen and (max-width:768px){
	#news .contents{
		padding-top:52px;
		padding-bottom:60px;
	}
	.news_list{
		margin-top:27px;
	}
	.news_item{
		padding:0 10px;
	}
	.news_content{
		grid-template-columns:1fr;
	}
	.news_date{
		padding-top:19px;
		font-size:14px;
	}
	.news_details{
		padding:7px 0 16px;
	}
}

/* #introduction
-------------------------------------------------- */
#introduction .contents{
	padding-top:78px;
	padding-bottom:87px;
}
.introduction_text{
	margin-top:41px;
}
@media screen and (max-width:768px){
	#introduction .contents{
		padding-top:52px;
		padding-bottom:59px;
	}
	.introduction_text{
		margin-top:29px;
	}
}

/* #anime
-------------------------------------------------- */
#anime{
	display:grid;
	grid-template-columns:repeat(4,1fr);
}
@media screen and (max-width:768px){
	#anime{
		grid-template-columns:repeat(2,1fr);
	}
}

/* #story
-------------------------------------------------- */
#story{
	background:var(--background-light);
}
#story .contents{
	padding-top:78px;
	padding-bottom:87px;
}
.story_title{
	margin-top:38px;
	font-size:38px;
	line-height:1.5;
	font-weight:900;
	text-align:center;
	text-indent:0.1em
}
.story_text{
	margin-top:28px;
}
@media screen and (max-width:768px){
	#story .contents{
		padding-top:52px;
		padding-bottom:59px;
	}
	.story_title{
		margin-top:31px;
		font-size:20px;
	}
	.story_text{
		margin-top:22px;
	}
}

/* #cast
-------------------------------------------------- */
#cast .contents{
	padding-top:78px;
}
@media screen and (max-width:768px){
	#cast .contents{
		padding-top:52px;
	}
}

/* #staff
-------------------------------------------------- */
#staff .contents{
	padding-top:113px;
	padding-bottom:94px;
}
@media screen and (max-width:768px){
	#staff .contents{
		padding-top:98px;
		padding-bottom:60px;
	}
}

/* #comments
-------------------------------------------------- */
#comments{
	background:var(--background-light);
}
#comments .contents{
	padding-top:78px;
	padding-bottom:95px;
}
.comments_list{
	display:flex;
	flex-direction:column;
	row-gap:75px;
	margin-top:49px;
	text-align:center;
}
.comments_details{
	display:flex;
	flex-direction:column-reverse;
}
.commenter{
	margin-top:26px;
}
.commenter_name{
	font-size:24px;
	line-height:1.25;
	font-weight:var(--font-bold);
}
.commenter_title{
	margin-top:11px;
	font-size:14px;
	line-height:1.25;
}
.commenter_title::after{
	display:block;
	width:0;
	height:0;
	margin-bottom:calc((14px - 17.5px) / 2);
	content:'';
}
.comments_text{
	font-size:20px;
}
.comments_text::before{
	display:block;
	width:0;
	height:0;
	margin-top:calc((20px - 40px) / 2);
	content:'';
}
@media screen and (max-width:768px){
	#comments .contents{
		padding-top:52px;
		padding-bottom:60px;
	}
	.comments_list{
		row-gap:59px;
		margin-top:36px;
		text-align:left;
	}
	.commenter{
		margin-top:21px;
	}
	.commenter_name{
		font-size:18px;
	}
	.commenter_title span{
		display:none;
	}
	.comments_text{
		font-size:14px;
	}
	.comments_text::before{
		margin-top:calc((14px - 28px) / 2);
	}
}

/* #theater
-------------------------------------------------- */
#theater .contents{
	padding-top:78px;
	padding-bottom:95px;
}
.theater_notes{
	margin-top:41px;
	padding-left:1em;
	text-indent:-1em;
}
.theater_notes+.theater_notes{
	margin:0;
}
.theater_table{
	width:100%;
	margin-top:47px;
	font-size:15px;
	color:#FFF;
}
.theater_table thead{
	font-weight:var(--font-bold);
	background:var(--background-light);
}
.theater_table tbody tr{
	border-bottom:1px solid var(--border-dark);
}
.theater_table th,
.theater_table td{
	padding:10px 20px 11px;
}
.theater_table .area,
.theater_table .release,
.theater_table .ticket,
.theater_table .notes{
	white-space:nowrap;
}
.theater_table .area,
.theater_table .release,
.theater_table .ticket{
	text-align:center;
	text-indent:0.1em;
}
.theater_table td.theater{
	width:100%;
}
@media screen and (max-width:768px){
#theater .contents{
	padding-top:52px;
	padding-bottom:60px;
}
	.theater_notes{
		margin-top:29px;
	}
	.theater_table{
		margin-top:34px;
		font-size:12px;
	}
	.theater_table thead{
		display:none;
	}
	.theater_table tbody{
		display:flex;
		flex-direction:column;
		row-gap:15px;
	}
	.theater_table tbody tr{
		padding:10px 20px;
		border-bottom:none;
		background:var(--background-light);
	}
	.theater_table tbody td{
		display:grid;
		grid-template-columns:6.42em 1fr;
		column-gap:20px;
		width:100%;
		padding:12px 0;
	}
	.theater_table tbody td::before{
		display:block;
		font-weight:var(--font-bold);
		white-space:nowrap;
		content:attr(data-label);
	}
	.theater_table tbody td:not(:first-of-type){
		border-top:1px solid var(--border-light);
	}
	.theater_table .area,
	.theater_table .release,
	.theater_table .ticket,
	.theater_table .notes{
		white-space:unset;
	}
	.theater_table .area,
	.theater_table .release,
	.theater_table .ticket{
		text-align:left;
		text-indent:0;
	}
}

/* #news_contents
-------------------------------------------------- */
#news_contents header{
	padding:35px var(--content-padding) 118px;
}
#news_contents h1{
	width:120px;
	margin:0 auto;
}
#news_contents #news{
	background:none;
}
#news_contents #news .contents{
	padding-top:0;
	padding-bottom:150px;
}
#news_contents .news_item{
	padding:48px 15px 55px;
}
#news_contents .news_item:has(.text:empty){
	padding-bottom:56px;
}
#news_contents .date{
	line-height:1;
	font-weight:var(--font-bold);
}
#news_contents .title{
	margin-top:10px;
	font-size:24px;
	line-height:1.5;
}
#news_contents .title::after{
	display:block;
	width:0;
	height:0;
	margin-bottom:calc((24px - 36px) / 2);
	content:'';
}
#news_contents .text{
	margin-top:47px;
}
#news_contents .text::after{
	display:block;
	width:0;
	height:0;
	margin-bottom:calc((17px - 34px) / 2);
	content:'';
}
#news_contents .text:empty{
	display:none;
}
@media screen and (max-width:768px){
	#news_contents header{
		padding-top:25px;
		padding-bottom:77px;
	}
	#news_contents h1{
		width:70px;
	}
	#news_contents #news .contents{
		padding-bottom:100px;
	}
	#news_contents .news_item{
		padding:34px 10px 38px;
	}
	#news_contents .news_item:has(.text:empty){
		padding-bottom:38px;
	}
	#news_contents .title{
		margin-top:7px;
		font-size:18px;
	}
	#news_contents .title::after{
		margin-bottom:calc((18px - 27px) / 2);
	}
	#news_contents .text{
		margin-top:28px;
	}
	#news_contents .text::after{
		margin-bottom:calc((14px - 28px) / 2);
	}
}