@charset "utf-8";
/* CSS Document */

/*全体*/

p,a,span,em,i,li,dt,dd,blockquote {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	transform: rotate(0.03deg);
}

.p-title {
	width: 100%;
	max-width: 841px;
	aspect-ratio:841 / 100;
	margin: 0 auto 60px;
}

/*メニュー*/

@media screen and (min-width:1101px) { /*PC*/
	.p-header-line {
		width: 100%;
		height: 20px;
		background:url("../img/head_text.webp") center center no-repeat #131313;
	}
	.p-header-inner {
		width:100%;
		height: 80px;
		position: relative;
	}
	.p-header-wrap {
		display: flex;
	}
	.nav{
		width:100%;
		max-width: 1100px;
		margin:0 auto;
		position: relative;
		display: flex!important;
		justify-content: space-around;
	}
	.nav ul {
		width: 75%;
		display: flex;
		justify-content: space-between;
	}
	.nav ul li {
		box-sizing: border-box;
	}
	.nav ul li:last-child {
	}
	.nav ul li a, .nav ul li em {
		display: block;
		height: 80px;
		text-indent: -9999px;
		overflow: hidden;
		position: relative;
		margin:0 auto;
	}
	.nav ul li a:after {
		content: "";
		display: block;
		width:0;
		position: absolute;
		left:50%;
		bottom:0px;
		height: 4px;
		background-color:#ffffff;
		transition: all 0.3s;
	}
	.nav ul li a:hover:after {
		width:100%;
		left:0;
	}
	.p-menu-01 a {background:url("../img/menu_01.webp") left top no-repeat; width: 34px;}
	.p-menu-02 a {background:url("../img/menu_02.webp") left top no-repeat; width: 59px;}
	.p-menu-03 a {background:url("../img/menu_03.webp") left top no-repeat; width: 98px;}
	.p-menu-04 a {background:url("../img/menu_04.webp") left top no-repeat; width: 74px;}
	.p-menu-05 a {background:url("../img/menu_05.webp") left top no-repeat; width: 78px;}
	
	.p-menu-lang {
		width: 114px;
		display: flex;
		justify-content: center;
		gap:12px;
		box-sizing: border-box;
		padding: 25px 0;
	}
	
	.p-menu-lang a {
		display: block;
		width: 30px;
		height: 30px;
		text-indent: -9999px;
		overflow: hidden;
		box-shadow: 0 0 5px rgba(0,0,0,0.3) inset;
		border-radius: 5px;
		background-color: #484848;
	}
	
	a.p-lang-jp {
		background: url("../img/lang_jp.webp") left top no-repeat #484848;
	}
	a.p-lang-en {
		background: url("../img/lang_en.webp") left top no-repeat #484848;
	}
	a.p-lang-sc {
		background: url("../img/lang_sc.webp") left top no-repeat #484848;
	}
}
@media screen and (max-width:1100px) { /*MB*/
	
/*外側クローズ用*/
	.p-main{
	}
	.p-main-cover{
		position: fixed;
		width: 100%;
		visibility: hidden;
		z-index: -1;  
		-webkit-transition: .3s;
		transition: .3s;
	}
	.p-main-cover.active{
		height:100%;
		visibility: visible;
		background:rgba(0,0,0,0.4);
		z-index:1000;
	}
	.p-head-space {
		width: 100%;
		height: 60px;
		background:#1a1a1a;
	}
	.p-header-inner{
		width: 100%;
		height: 60px;
		position:fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		background:#1a1a1a;
	}
	.p-header-wrap{
		position:relative;
		width: 100%;
		height: 60px;
	}
	/*nav=====*/
	.nav{
		display: none;
		position: relative;
		width: 100%;
		text-align: center;
		top: 0;
		left: 0;
		z-index: 950;
		padding-top:60px;
	}
	.nav ul li{
		background: #1a1a1a;
		border-bottom: 1px solid #545454;
		text-align: left;
		text-indent: 12px;
	}
	.nav ul li a, .nav ul li span{
		color: #fff;
		display: block;
		height: 50px;
		line-height: 50px;
		font-size:2rem;
		font-family: "Noto Sans JP", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
		transform: rotate(0.03deg);
		font-weight: 700!important;
	}
	.nav ul li a:hover{
		text-decoration: none;
	}
	.p-menu-lang {
		background: #1a1a1a;
		width: 100%;
		padding: 25px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		gap:25px;
	}
	.p-menu-lang a {
		display: block;
		width: 30px;
		height: 30px;
		text-indent: -9999px;
		overflow: hidden;
		box-shadow: 0 0 5px rgba(0,0,0,0.3) inset;
		border-radius: 5px;
		background-color: #484848;
	}
	
	a.p-lang-jp {
		background: url("../img/lang_jp.webp") left top no-repeat #484848;
	}
	a.p-lang-en {
		background: url("../img/lang_en.webp") left top no-repeat #484848;
	}
	a.p-lang-sc {
		background: url("../img/lang_sc.webp") left top no-repeat #484848;
	}
	/*ナビボタン*/
	.p-header-sp-nav{
		width: 30px;
		height: 26px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 10px;
		margin:auto;
		cursor: pointer;
		z-index: 1000;
		background:#1a1a1a;
	}
	.p-header-sp-nav:before {
		content: "";
		display: block;
		width:50px;
		height:60px;
		background-color:#1a1a1a;
		z-index: -1;
		position: absolute;
		right:-10px;
		top:-17px;
	}
	.p-header-sp-nav span {
		display: block;
		position: absolute;
		width: 30px;
		height: 2px;
		background: #fff;
		-webkit-transition: .3s;
		transition: .3s;
	}
	.p-header-sp-nav span:first-of-type {
		top: 0;
		bottom: auto;
		margin-bottom: 10px;
	}
	.p-header-sp-nav span:nth-of-type(2) {
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.p-header-sp-nav span:last-of-type {
		bottom: 0;
		top: auto;
	}
	.p-header-sp-nav.active{
	}
	.p-header-sp-nav.active span:nth-of-type(2) {
		right: -60px;
		opacity: 0;
		visibility: hidden;
	}
	.p-header-sp-nav.active span:first-of-type{
		top: 0;
		bottom: 0;
		margin: auto;
		transform:rotate(45deg);
	}
	.p-header-sp-nav.active span:last-of-type{
		top: 0;
		bottom: 0;
		margin: auto;
		transform:rotate(-45deg);
	}
	
}

/*メインビジュアル*/

.p-mv {
	background: url("../img/mainvisual.webp") center top no-repeat;
	background-size: cover;
	width: 100%;
	margin: 0 auto;
	max-width: 1024px;
	aspect-ratio:1024 / 1440;
	position: relative;
	z-index: 10;
}

/*アウトライン*/

.p-outline-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto 48px;
	justify-content: center;
	gap:48px;
}



@media screen and (min-width:961px) { /*PC*/
	.p-list-outline {
		width: calc((100% - 48px) / 2);
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-list-outline {
		width: 100%;
	}
}

.p-list-outline dl {
	display: flex;
	justify-content: flex-start;
	color: #fff;
}

.p-list-outline dl:nth-child(2n + 1) {
	background-color: #404040;
}

.p-list-outline dl dt {
	width: 30%;
	text-align: left;
	box-sizing: border-box;
	padding:8px 12px;
}

.p-list-outline dl dt p {
	font-size: 1.6rem;
}

.p-list-outline dl dd {
	width: 70%;
	text-align: left;
	box-sizing: border-box;
	padding:8px 12px;
}

.p-list-outline dl dd p {
	font-size: 1.6rem;
	line-height: 1.5;
}

.p-attention {
	display: inline-block;
	margin: 0 auto 60px;
}

@media screen and (min-width:961px) { /*PC*/
	.p-attention p {
		color: #fff;
		line-height: 1.5;
		font-size: 1.4rem;
		text-align: center;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-attention p {
		color: #fff;
		line-height: 1.5;
		font-size: 1.4rem;
		text-align: left;
	}
}



/*アバウト*/



.p-about-ss {
	margin: 0 auto 48px;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 640 / 320;
	background-color: #000;
	box-shadow: 0 0 15px rgba(255,255,255,0.75);
}



@media screen and (min-width:961px) { /*PC*/
	.p-about-text01 {
		background: url("../img/about_text01.webp") center top no-repeat;
		background-size: cover;
		width: 100%;
		max-width: 843px;
		aspect-ratio:843 / 287;
		margin: 0 auto 48px;
	}
		.p-about-text02 {
		background: url("../img/about_text02.webp") center top no-repeat;
		background-size: cover;
		width: 100%;
		max-width: 565px;
		aspect-ratio:565 / 258;
		margin: 0 auto;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-about-text01 {
		background: url("../img/about_text01_mobile.webp") center top no-repeat;
		background-size: cover;
		width: 100%;
		max-width: 960px;
		aspect-ratio:960 / 460;
		margin: 0 auto 48px;
	}
		.p-about-text02 {
		background: url("../img/about_text02_mobile.webp") center top no-repeat;
		background-size: cover;
		width: 100%;
		max-width: 960px;
		aspect-ratio:960 / 405;
		margin: 0 auto;
	}
}

/*ストーリー*/

@media screen and (min-width:961px) { /*PC*/
	.p-story-body {
		background: url("../img/story_text.webp") center top no-repeat;
		width: 100%;
		max-width: 815px;
		aspect-ratio:815 / 435;
		margin: 0 auto;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-story-body {
		background: url("../img/story_text_mobile.webp") center top no-repeat;
		background-size: cover;
		width: 100%;
		max-width: 960px;
		aspect-ratio:960 / 1024;
		margin: 0 auto;
	}
}



/*キャラクター*/



@media screen and (min-width:961px) { /*PC*/
	
	.p-chara-head {
		background: url("../img/chara01_head.webp") center top no-repeat;
		background-size: cover;
		width: 100%;
		aspect-ratio:2800 / 313;
		position: absolute;
		top: 0;
		left: 0;
	}

	.p-chara-foot {
		background: url("../img/chara01_foot.webp") center top no-repeat;
		width: 100%;
		aspect-ratio:2800 / 624;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.p-chara-body {
		width: 100%;
		height: 1000px;
		position: relative;
	}

	#l-Character01 .p-chara-head {background: url("../img/chara01_head.webp") center top no-repeat;background-size: cover;}
	#l-Character02 .p-chara-head {background: url("../img/chara02_head.webp") center top no-repeat;background-size: cover;}

	#l-Character01 .p-chara-foot {background: url("../img/chara01_foot.webp") center top no-repeat;background-size: cover;}
	#l-Character02 .p-chara-foot {background: url("../img/chara02_foot.webp") center top no-repeat;background-size: cover;}

	#l-Character01 .p-chara-body {background: url("../img/chara01_pc.webp") center top no-repeat;}
	#l-Character02 .p-chara-body {background: url("../img/chara02_pc.webp") center top no-repeat;}
	
	ul.p-voice-bt {
		position: absolute;
		left:50%;
		margin-left:-250px;
		top: 277px;
		display: flex;
		gap:12px;
	}

	ul.p-voice-bt li {
		width: 48px;
		height: 24px;
		background-color: #fff;
		border-radius: 5px;
		overflow: hidden;
	}
	
}
@media screen and (max-width:960px) { /*MB*/
	
	.p-chara-body {
		width: 100%;
		aspect-ratio:10 / 17;
		position: relative;
	}
	
	#l-Character01 .p-chara-body {background: url("../img/chara01_mobile.webp") center top no-repeat;background-size: cover;}
	#l-Character02 .p-chara-body {background: url("../img/chara02_mobile.webp") center top no-repeat;background-size: cover;}
	
	ul.p-voice-bt {
		position: absolute;
		left:5%;
		top: 27.5%;
		display: flex;
		gap:12px;
	}

	ul.p-voice-bt li {
		width: 48px;
		height: 24px;
		background-color: #fff;
		border-radius: 5px;
		overflow: hidden;
	}
	
}



/*ギャラリー*/

ul.p-gallery {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:24px;
	margin: 0 auto 32px;
}

ul.p-gallery li {
	width: 100%;
	max-width: 380px;
	background-color: #000;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/*プロダクト*/

.p-staff-01 {
	margin: 0 auto 48px;
}

ul.p-staff-02 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:48px;
	margin-bottom: 80px;
}

.p-list-wrap {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	justify-content: center;
	gap:48px;
}

.p-head {
	margin: 0 auto 60px;
}

.p-list-spec {
	width: 100%;
	max-width: 400px;
}

.p-list-spec dl {
	display: flex;
	justify-content: flex-start;
	color: #fff;
}

.p-list-spec dl:nth-child(2n + 1) {
	background-color: #000;
}

.p-list-spec dl dt {
	width: 25%;
	text-align: left;
	box-sizing: border-box;
	padding: 8px;
}

.p-list-spec dl dt p {
	font-size: 1.4rem;
}

.p-list-spec dl dd {
	width: 75%;
	text-align: left;
	box-sizing: border-box;
	padding: 8px;
}

.p-list-spec dl dd p {
	font-size: 1.4rem;
	line-height: 1.5;
}

/*フッター*/

.p-official-x {
	width: 240px;
	height: 32px;
	margin: 0 auto 36px;
	background-color: #fff;
	box-shadow: 0 5px 0 rgba(0,0,0,1);
}

.p-foot-logo {
	margin: 0 auto 24px;
}

.p-copyright {
	color: #fff;
	font-size: 1.4rem;
}


/*スチームリンク*/

.p-steamlink {
	display:block;
	width:100%;
	max-width:360px;
	margin:0 auto;
	background-color: #fff;
	box-shadow: 0 0 15px rgba(0,0,0,0.4);
	border: 1px solid #000;
	box-sizing: border-box;
}