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

/*ヘッダーメニュー*/

.p-head-wrap {
	margin:0 auto;
	position: relative;
}

.p-toplink {
	height:25px;
	display: flex;
	justify-content:flex-end;
	gap:0 20px;
	margin-bottom:15px;
}

.p-toplink a {
	display: block;
	width:120px;
	height:25px;
	transition: all 0.3s;
}

.p-toplink a:hover {
	opacity: 0.6;
}

.p-tl-home {
	background:url("../img/brandtop.png") left top no-repeat;
}

.p-tl-twit {
	background:url("../img/headlink_x.webp") left top no-repeat;
}

.p-bottomlink ul {
	height:50px;
	position: relative;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}

.p-bottomlink ul li {
	width:12.5%;
	display: block;
	border-left:1px solid #fff;
	box-sizing: border-box;
}

.p-bottomlink ul li:last-child {
	border-right:1px solid #fff;
}

.p-bottomlink ul li a {
	display: block;
	position: relative;
	height:50px;
	transition: all 0.3s;
}

.p-bottomlink ul li span {
	display: block;
	position: relative;
	height:50px;
}

.p-bottomlink ul li a:hover {
	opacity: 0.6;
}

.p-bottomlink ul li a:after {
	content: "";
	width:0;
	height:3px;
	background-color: #fff;
	position: absolute;
	left:50%;
	bottom:-10px;
	transition: all 0.3s;
}

.p-bottomlink ul li a:hover:after {
	content: "";
	width:100%;
	height:3px;
	background-color: #fff;
	position: absolute;
	bottom:-10px;
	left:0;
	opacity: 1;
}


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

.p-mv {
	background:url("../img/mv01.jpg") center top no-repeat;
	width:1100px;
	height:1300px;
	margin:0 auto;
	display: block;
	position: relative;
}

.p-mv:after {
	content: "";
	background:url("../img/mv02.jpg") center top no-repeat;
	width:1100px;
	height:1300px;
	margin:0 auto;
	display: block;
	position: absolute;
	left:0;
	top:0;
	transition: all 0.3s;
	opacity: 0;
}

.p-mv:hover:after {
	opacity: 1;
}

.p-masterup-bt {
	position: absolute;
	left:50%;
	margin-left:-119px;
	top:580px;
	z-index:50;
}

.p-masterup-bt a img {
	transition: all 0.3s;
}

.p-masterup-bt a:hover img {
	transform:translateY(-10px);
}

/*タイトル*/

h3 {
	width:800px;
	height:100px;
	margin:0 auto;
	display: block;
	position: relative;
	overflow: hidden;
	text-indent: -9999px;
}

h3#p-Head-product-info {	background:url("../img/head_productinfo.png") left top no-repeat;}
h3#p-Head-highlight {	background:url("../img/head_highlight.png") left top no-repeat;}
h3#p-Head-story {	background:url("../img/head_story.png") left top no-repeat;}
h3#p-Head-character {	background:url("../img/head_character.png") left top no-repeat;}
h3#p-Head-gallery {	background:url("../img/head_gallery.png") left top no-repeat;}
h3#p-Head-campaign {	background:url("../img/head_campaign.png") left top no-repeat;}
h3#p-Head-shopinfo {	background:url("../img/head_shopinfo.png") left top no-repeat;}
h3#p-Head-official {	background:url("../img/head_official.png") left top no-repeat;}

h3#p-Head-retweetcampaign {	background:url("../img/head_retweetcampaign.png") left top no-repeat;}
h3#p-Head-trialver {	background:url("../img/head_trial_version.png") left top no-repeat;}
h3#p-Head-demomovie {	background:url("../img/head_demomovie.png") left top no-repeat;}
h3#p-Head-trialmovie {	background:url("../img/head_trialmovie.png") left top no-repeat;}

h3#p-Head-shoplist {	background:url("../img/head_shoplist.png") left top no-repeat;}
h3#p-Head-steam {	background:url("../img/head_steam.png") left top no-repeat;}
h3#p-Head-dlcard {	background:url("../img/head_dlcard.png") left top no-repeat;}

/*ログエリア*/

.p-log-left {
	background:url("../img/twitter_bg.jpg") left top no-repeat;
	width:540px;
	height:480px;
	display: block;
	padding:70px 30px 30px;
	box-sizing: border-box;
	box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

.p-log-right {
	background:url("../img/information_bg.jpg") left top no-repeat;
	width:540px;
	height:480px;
	display: block;
	padding:70px 30px 30px;
	box-sizing: border-box;
	box-shadow: 0 0 10px rgba(0,0,0,0.6);
}

.p-logbox {
	width:480px;
	height:380px;
	overflow:scroll;
	margin:0 auto;
}

.p-logbox dl {
	width:480px;
	color:#fff;
	display: flex;
	margin:0 auto;
	border-bottom:1px solid #615454;
	padding:10px 0;
}


.p-logbox dl dt {
	width:110px;
	line-height: 1.8;
	display: block;
	font-size:1.6rem;
	text-align: center;
	color:#ff9000;
}

.p-logbox dl dd {
	width:330px;
	padding-left:10px;
	line-height: 1.8;
	font-size:1.6rem;
	text-align: left;
}

.p-logbox a {
	transition: all 0.3s;
	text-decoration: none;
	color:rgba(99,174,255,1.00);
	font-weight: bold;
}

.p-logbox a:hover {
	text-decoration: underline;
}

/*プロダクトインフォ*/

.p-info-wrap {
	width:1100px;
	display: flex;
	justify-content: space-between;
	margin:0 auto;
}

.p-info-group {
	width:540px;
	position: relative;
	color:#fff;
	font-size: 1.6rem;
}

.p-info-group h4 {
	background-color:#ff9000;
	width:100%;
	display: block;
	box-sizing: border-box;
	padding:8px 0;
	margin-bottom:32px;
	font-family: 'Noto Serif JP', serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	color:#000;
	font-size: 2.2rem;
}

.p-info-group dl {
	display: flex;
	justify-content: space-between;
	line-height: 1.5;
}

.p-info-group dl dt {
	width:130px;
	text-align: right;
	box-sizing: border-box;
	padding:8px 0;
	color:#ff9000;
}

.p-info-group dl dd {
	width:410px;
	text-align: left;
	box-sizing: border-box;
	padding:8px 0;
}

.p-info-group dl dd a {
	color:#ff9000;
	text-decoration: underline;
	font-weight: bold;
}

.p-info-group dl dd a:hover {
	color:#e50057;
	text-decoration: none;
}

/*ファンサイト*/

.p-fansite-banner {
	background:url("../img/fansite.jpg") left top no-repeat;
	width:800px;
	height:300px;
	margin:0 auto 40px;
}

.p-links {
	width:800px;
	margin:0 auto 0;
	display: flex;
	justify-content: center;
	position: relative;
	gap:30px;
}

.p-links a {
	font-family: 'Noto Serif JP', serif;
	transform: rotate(0.03deg);
	font-weight: 700;
	display: block;
	text-decoration: none;
	color:#000;
	width:30%;
	box-sizing: border-box;
	padding:12px;
	font-size: 2.6rem;
	position: relative;
	opacity: 1;
	transition: all 0.3s;
	background-color:#ff9000;
	clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}

.p-links a:hover {
	opacity: 1;
	background-color:#FFF;
	color:#000;
	text-decoration: none;
}

/*フッター*/

.p-foot-logo {
	width:300px;
	height:61px;
	margin:0 auto 16px;
}

.p-foot-logo a {
	background:url("../img/foot_logo.png") left top no-repeat;
	width:300px;
	height:61px;
	display: block;
	transition: all 0.3s;
}

.p-foot-logo a:hover {
	opacity: 0.6;
}

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

/*サブページ*/

.p-sub-padding {
	padding-top:60px;
}

.eoy-head {
	width: 100%;
	position: relative;
}

.eoy-head img {
	width: 100%;
}

.eoy-text {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	background-color: rgba(0,0,0,0.75);
	border-radius: 20px;
	padding: 24px;
	box-sizing: border-box;
	color: #fff;
	font-size: 2rem;
	line-height: 1.5;
}

@media screen and (min-width:961px) { /*PC*/
	.eoy-text { 
		 text-align: center;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.eoy-text { 
		 text-align: left;
	}
}

.eoy-text p strong {
	font-weight: 700;
	font-size: 2.5rem;
	color: red;
}

/*通販*/

.p-official-wrap {
	position: relative;
	width:100%;
}

.p-order-menu {
	position: sticky;
	top:40px;
	width: 100%;
	max-width:1200px;
	margin:0 auto 72px;
	background-color:rgba(0,0,0,0.75);
	border-radius: 15px;
	z-index:50;
	box-sizing: border-box;
	padding:8px;
}

.p-order-menu ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap:4px;
	position: relative;
	margin-bottom: 4px;
}

.p-order-menu ul li a {
	width: 100%;
	display:flex;
	justify-content: center;
	align-items: center;
	color:#fff;
	text-decoration: none;
	box-sizing: border-box;
	padding:0 0 8px;
	font-size: 1.35rem;
	border:1px solid #ffffff;
	position: relative;
	height: 36px;
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.p-order-menu ul li a:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 4px 0 4px;
	border-color: #ffffff transparent transparent transparent;
	position: absolute;
	left:50%;
	margin-left:-4px;
	bottom:0;
}



@media screen and (min-width:961px) { /*PC*/
	.p-order-menu ul li {
		width:190px;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-order-menu ul li {
		width:calc((100% - 8px) / 2);
	}
}

.p-omenu01 a {	background: #7316AD;}
.p-omenu02 a {	background: #7316AD;}

.p-hash {
	width: 100%;
	background-color:#7316AD;
	color: #fff;
	max-width: 960px;
	margin: 0 auto 48px;
	box-sizing: border-box;
	padding:8px;
	border-bottom:2px solid #000;
}

.p-hash strong {
	font-size: 3rem;
	padding-bottom: 8px;
	border-bottom: 1px solid #fff;
	width: 90%;
	margin: 0 auto;
	display: block;
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.p-hash p {
	margin-top: -6px;
	font-size: 1.8rem;
	font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.p-itembox {
	background: url("../img/bonus/bg.jpg") left top repeat;
	background-size: cover;
	border:5px solid #525252;
	box-sizing: border-box;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:40px;
}

.p-item-img {
	width: 100%;
	max-width: 510px;
	aspect-ratio: 51 / 46;
}

.p-item-img a {
	width: 100%;
	max-width: 510px;
	aspect-ratio: 51 / 46;
	display: block;
	background-color: #fff;
	opacity: 0;
	transition: all 0.3s;
}

.p-item-img a:hover {
	opacity: 0.3;
}

.p-item-discription {
	width: 100%;
	max-width: 510px;
	aspect-ratio: 51 / 46;
	position: relative;
}

#Item01 .p-item-img {background:url("../img/bonus/img01.webp") left top no-repeat;background-size: cover;}
#Item01 .p-item-discription {background:url("../img/bonus/disc01.webp") left top no-repeat;background-size: cover;}

#Item02 .p-item-img {background:url("../img/bonus/img02.webp") left top no-repeat;background-size: cover;}
#Item02 .p-item-discription {background:url("../img/bonus/disc02.webp") left top no-repeat;background-size: cover;}

#Item03 .p-item-img {background:url("../img/bonus/img03.webp") left top no-repeat;background-size: cover;}
#Item03 .p-item-discription {background:url("../img/bonus/disc03.webp") left top no-repeat;background-size: cover;}

#Item04 .p-item-img {background:url("../img/bonus/img04.webp") left top no-repeat;background-size: cover;}
#Item04 .p-item-discription {background:url("../img/bonus/disc04.webp") left top no-repeat;background-size: cover;}

#Item05 .p-item-img {background:url("../img/bonus/img05.webp") left top no-repeat;background-size: cover;}
#Item05 .p-item-discription {background:url("../img/bonus/disc05.webp") left top no-repeat;background-size: cover;}

#Item06 .p-item-img {background:url("../img/bonus/img06.webp") left top no-repeat;background-size: cover;}
#Item06 .p-item-discription {background:url("../img/bonus/disc06.webp") left top no-repeat;background-size: cover;}

#Item07 .p-item-img {background:url("../img/bonus/img07.webp") left top no-repeat;background-size: cover;}
#Item07 .p-item-discription {background:url("../img/bonus/disc07.webp") left top no-repeat;background-size: cover;}

#Item08 .p-item-img {background:url("../img/bonus/img08.webp") left top no-repeat;background-size: cover;}
#Item08 .p-item-discription {background:url("../img/bonus/disc08.webp") left top no-repeat;background-size: cover;}

#Item09 .p-item-img {background:url("../img/bonus/img09.webp") left top no-repeat;background-size: cover;}
#Item09 .p-item-discription {background:url("../img/bonus/disc09.webp") left top no-repeat;background-size: cover;}

#Item10 .p-item-img {background:url("../img/bonus/img10.webp") left top no-repeat;background-size: cover;}
#Item10 .p-item-discription {background:url("../img/bonus/disc10.webp") left top no-repeat;background-size: cover;}

#Item11 .p-item-img {background:url("../img/bonus/img11.webp") left top no-repeat;background-size: cover;}
#Item11 .p-item-discription {background:url("../img/bonus/disc11.webp") left top no-repeat;background-size: cover;}


.p-shop-link {
	width: 100%;
	background: rgba(78,78,78,1.00);
	box-sizing: border-box;
	padding: 12px;
	display: flex;
	justify-content: center;
	gap:12px;
	flex-wrap: wrap;
}

.p-shop-link a {
	display: flex;

	background-color: deepskyblue;
	border: 1px solid deepskyblue;
	color: #fff;
	font-size: 1.8rem;
	box-sizing: border-box;
	padding: 12px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	transform: rotate(0.03deg);
	font-weight: 700;
	justify-content: flex-start;
	align-items: center;
	text-indent: 24px;
	transition: all 0.3s;
	
}

@media screen and (min-width:961px) { /*PC*/
	.p-shop-link a {
		width:calc((100% - 12px) / 2);
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-shop-link a {
		width:100%;
	}
}

.p-shop-link a:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 17px solid #ffffff;
	border-right: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	margin: auto 0;
	transition: all 0.3s;
}

.p-shop-link a:hover:before {
	border-left: 17px solid deepskyblue;
}

.p-shop-link a:hover {
	text-decoration: none;
	text-indent: 36px;
	background-color: #000;
	color: deepskyblue;
}

.oflink01 {
	position: absolute;
	width:50%;
	background-color: #fff;
	opacity: 0;
	aspect-ratio : 255 / 80;
	display: block;
	left:0;
	bottom: 0;
	transition: all 0.3s;
}
a:hover.oflink01, a:hover.oflink02 {
	opacity: 0.3;
}

.oflink02 {
	position: absolute;
	width:50%;
	background-color: #fff;
	opacity: 0;
	aspect-ratio : 255 / 80;
	display: block;
	right:0;
	bottom: 0;
	transition: all 0.3s;
}