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

/*共通*/

.p-section-head {
	
}

@media screen and (min-width:1681px) { /*PC*/
	.p-section-head {
		width: 48px;
		aspect-ratio: 48 / 582;
		position: absolute;
		top: 0;
		z-index: 300;
		right: 100px;
	}
	#Sec-News {	background: url("../img/_jp/head_news.png") center top no-repeat;}
	#Sec-Story {	background: url("../img/_jp/head_story.png") center top no-repeat;}
	#Sec-Character {	background: url("../img/_jp/head_character.png") center top no-repeat;}
	#Sec-Gallery {	background: url("../img/_jp/head_gallery.png") center top no-repeat;}
	#Sec-Movie {	background: url("../img/_jp/head_movie.png") center top no-repeat;}
	#Sec-Spec {	background: url("../img/_jp/head_spec.png") center top no-repeat;top: -72px;}
}
@media screen and (max-width:1680px) { /*MB*/
	.p-section-head {
		width: 96%;
		max-width: 506px;
		aspect-ratio: 506 / 94;
		position: relative;
		z-index: 300;
		margin: 0 auto 48px;
	}
	#Sec-News {	background: url("../img/_jp/head_news_mobile.png") center top no-repeat; background-size: contain;}
	#Sec-Story {	background: url("../img/_jp/head_story_mobile.png") center top no-repeat; background-size: contain;}
	#Sec-Character {	background: url("../img/_jp/head_character_mobile.png") center top no-repeat;background-size: contain;}
	#Sec-Gallery {	background: url("../img/_jp/head_gallery_mobile.png") center top no-repeat; background-size: contain;}
	#Sec-Movie {	background: url("../img/_jp/head_movie_mobile.png") center top no-repeat; background-size: contain;}
	#Sec-Spec {	background: url("../img/_jp/head_spec_mobile.png") center top no-repeat; background-size: contain;top: 0;}
	
}
@media screen and (max-width:960px) { /*MB*/
	.p-section-head {
		aspect-ratio: 506 / 94;
	}
}

/*メニュー*/


.p-pc-menu {
	width: 100%;
	height: 142px;
}

.p-pc-nav {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1460px;
	padding: 0 20px;
	margin: 0 auto;
	height: 128px;
	align-content: center;
	align-items: center;
}

ul.p-mainmanu {
	display: flex;
	font-family: "Spectral", serif;
	font-weight: 300;
	font-style: normal;
	font-size: 2.5rem;
	gap:24px;
}

ul.p-mainmanu a {
	color: #2f334f;
	position: relative;
}

ul.p-mainmanu a:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -16px;
	background:url("../img/menu_over.png") center top no-repeat;
	width: 20px;
	height: 18px;
	opacity: 0;
	transition: all 0.3s;
}

ul.p-mainmanu a:hover:after {
	opacity: 1;
}

ul.p-mainmanu a:hover {
	text-decoration: none;
}

ol.p-sns {
	display: flex;
	gap:24px;
}

ul.p-lang {
	display: flex;
	font-family: "Spectral", serif;
	font-weight: 300;
	font-style: normal;
	font-size: 2.5rem;
	gap:24px;
}

ul.p-lang li {
	color: #2f334f;
}

ul.p-lang li a {
	color: #BDB4A2;
	transition: all 0.3s;
}

ul.p-lang li a:hover {
	color: #2f334f;
	text-decoration: none;
}

/*ハンバーガーメニュー*/

/*====== 上に消えるアニメ ======*/
#header.UpMove, #HbButton.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 1;
	  transform: translateY(0);
  }
  to {
    opacity: 0;
	  transform: translateY(-100px);
  }
}

/*====== 下に消えるアニメ ======*/
#header.DownMove, #HbButton.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*外側クローズ用*/
.p-main{
}
.p-main-cover{
	position: fixed;
	width: 100%;
	visibility: hidden;
	z-index: -1;  
	-webkit-transition: .2s;
	transition: .2s;
}
.p-main-cover.active{
	width: 100%;
	height:100%;
	visibility: visible;
	background:rgba(47,51,79,0.75);
	z-index:1000;
}

.p-header-inner{
	width: 0;
	position:fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	background-color: #eee7d7;
	-webkit-transition: .2s;
	transition: .2s;
}
.p-header-inner.active{
	width: 100%;
}
	.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-menu li{
		background: #eee7d7;
		border-bottom: 1px solid #BDB4A2;
		text-align: center;
	}
	.nav-menu a{
		color: #2f334f;
		display: block;
		height: 50px;
		line-height: 50px;
		font-size:2rem;
		font-family: "Spectral", serif;
		font-weight: 600;
		font-style: normal;
	}
	.nav-menu a:hover{
		text-decoration: none;
	}
	/*ナビボタン*/
	.p-header-sp-nav{
		width: 30px;
		height: 26px;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 10px;
		margin:auto;
		cursor: pointer;
		z-index: 1000;
		background:#eee7d7;
	}
	.p-header-sp-nav:before {
		content: "";
		display: block;
		width:50px;
		height:60px;
		background-color:#eee7d7;
		z-index: -1;
		position: absolute;
		right:-10px;
		top:-17px;
	}
	.p-header-sp-nav span {
		display: block;
		position: absolute;
		width: 30px;
		height: 2px;
		background: #2f334f;
		-webkit-transition: .2s;
		transition: .2s;
	}
	.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);
	}

ol.nav-sns {
	display: flex;
	justify-content: center;
	gap:24px;
	background:#eee7d7;
	box-sizing: border-box;
	padding: 24px 0 24px;
}

ul.nav-lang {
	display: flex;
	justify-content: center;
	font-family: "Spectral", serif;
	font-weight: 300;
	font-style: normal;
	font-size: 2.5rem;
	gap:24px;
	background:#eee7d7;
}

ul.nav-lang li {
	color: #2f334f;
	font-size:2rem;
}

ul.nav-lang li a {
	color: #BDB4A2;
	transition: all 0.3s;
}

ul.nav-lang li a:hover {
	color: #2f334f;
	text-decoration: none;
}
ul.nav-lang {
	position: relative;
	box-sizing: border-box;
	padding: 12px 0 24px;
}
ul.nav-lang:after {
	content: "";
	display: block;
	position: absolute;
	background: url("../img/menu_bg.png") left bottom repeat;
	width: 100%;
	height: 40px;
	bottom: -40px;
	left: 0;
}

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

@media screen and (min-width:1281px) { /*PC-LARGE*/
	.p-mainvisual {
		background: url("../img/_wizard/mainvisual.webp") center top no-repeat;
		position: absolute;
		width: 100%;
		height: 1416px;
		top: -50px;
		left: 0;
		z-index: 50;
	}
}
@media screen and (max-width:1280px) { /*PC-MIDDLE*/
	.p-mainvisual {
		background: url("../img/_wizard/mainvisual.webp") center top no-repeat;
		position: absolute;
		width: 100%;
		height: 1416px;
		top: 0;
		left: 0;
		z-index: 50;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-mainvisual {
		background: url("../img/_wizard/mainvisual.webp") center top no-repeat;
		background-size: cover;
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio:1000 / 1416;
		top: 0;
		left: 0;
		z-index: 50;
	}
	.p-mainlogo {
		background: url("../img/_wizard/main_logo.png") center top no-repeat;
		background-size: cover;
		width: 50%;
		aspect-ratio: 720 / 281;
		position: absolute;
		left:0;
		right: 0;
		margin: 0 auto;
		bottom:7%;
		filter: drop-shadow(0 0 15px #2f334f);
	}
}



/*ニュース*/

.p-news-wrap {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	border-top: 1px solid #fff;
	position: relative;
}

.p-news-wrap:before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	position: absolute;
	background-color: #fff;
	left: 0;
	top: -3px;
	transform: rotate(45deg);
}

.p-news-wrap:after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	position: absolute;
	background-color: #fff;
	right: 0;
	top: -3px;
	transform: rotate(45deg);
}

.p-news-wrap dl {
	width: 100%;
	border-bottom: 1px solid #fff;
	display: flex;
	justify-content: flex-start;
	position: relative;
}

@media screen and (max-width:960px) { /*MB*/
	.p-news-wrap dl {
		flex-direction: column;
	}
}

.p-news-wrap dl:before {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	position: absolute;
	background-color: #fff;
	left: 0;
	bottom: -3px;
	transform: rotate(45deg);
}

.p-news-wrap dl:after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	position: absolute;
	background-color: #fff;
	right: 0;
	bottom: -3px;
	transform: rotate(45deg);
}

.p-news-wrap dl dt {
	font-family: "Spectral", serif;
	font-weight: 600;
	font-style: normal;
	font-size: 2rem;
	width: 220px;
	text-align: left;
	letter-spacing: 1rem;
	box-sizing: border-box;
	transform: translateY(4px);
}

.p-news-wrap dl dd {
	font-family: "ten-mincho", serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	text-align: left;
	box-sizing: border-box;
}

@media screen and (min-width:961px) { /*PC*/
	.p-news-wrap dl dt {
		padding: 16px 8px;
		font-size: 2rem;
	}
	.p-news-wrap dl dd {
		padding: 16px 8px;
		font-size: 2rem;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-news-wrap dl dt {
		padding: 12px 8px 8px;
		font-size: 1.8rem;
	}
	.p-news-wrap dl dd {
		padding: 0 8px 12px;
		font-size: 1.8rem;
	}
}

/*ストーリー*/


@media screen and (min-width:1681px) { /*PC*/
	.p-story-wrap {
		width: 100%;
		height: 1080px;
		position: relative;
		display: flex;
		flex-direction: column;
		gap:44px;
		justify-content: center;
	}
	.p-story-wrap p {
		font-family: "ten-mincho", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 2rem;
		line-height: 2;
		letter-spacing: 0.5rem;
	}
}
@media screen and (max-width:1680px) { /*MB*/
	.p-story-wrap {
		width: 100%;
		height: 970px;
		position: relative;
		display: flex;
		flex-direction: column;
		gap:44px;
		justify-content: center;
	}
	.p-story-wrap p {
		font-family: "ten-mincho", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 2rem;
		line-height: 2;
		letter-spacing: 0.5rem;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-story-wrap {
		width: 100%;
		height: auto;
		position: relative;
		display: flex;
		flex-direction: column;
		gap:44px;
		justify-content: center;
		padding-bottom: 72px;
	}
	.p-story-wrap p {
		font-family: "ten-mincho", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 1.7rem;
		line-height: 1.8;
		letter-spacing: 0.35rem;
		text-align: left;
	}
}


/*キャラクター*/

.p-character-wrap {
	width: 100%;
	position: relative;
	box-sizing: border-box;
}



@media screen and (min-width:961px) { /*PC*/
	.p-chara-select {
		position: absolute;
		left: 50%;
		margin-left:200px;
		top: 90px;
		width: 400px;
		z-index: 300;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-chara-select {
		position: relative;
		width: 96%;
		z-index: 300;
		margin: 0 auto;
	}
}

.p-chara-select ul {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap:13px;
}

@media screen and (min-width:961px) { /*PC*/
	.p-chara-select ul li {
		width: 82px;
		filter: drop-shadow(5px 5px 5px #000000);
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-chara-select ul li {
		width: calc((100% - 39px) / 4);
		filter: drop-shadow(5px 5px 5px #000000);
	}
}



.p-chara-select ul li a {
	position: relative;
	width: 100%;
	aspect-ratio:1 / 1;
}

.p-chara-select ul li a:after {
	content: "";
	display: block;
	background: url("../img/c_select_over.png") center top no-repeat;
	background-size: cover;
	width: 100%;
	aspect-ratio: 1 / 1;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 20;
	opacity: 0;
	transition: all 0.3s;
}

.p-chara-select ul li a:hover:after {
	opacity: 0.35;
}

@media screen and (min-width:961px) { /*PC*/
	.p-chara-body {
		position: relative;
		width: 100%;
		height: 1080px;
		margin: 0 auto;
	}

	.p-chara-single {
		width: 100%;
		height: 1080px;
	}
	#Chara01 {background:url("../img/_wizard/chara01.webp") center top no-repeat;}
	#Chara02 {background:url("../img/_wizard/chara07.webp") center top no-repeat;}
	#Chara03 {background:url("../img/_wizard/chara02.webp") center top no-repeat;}
	#Chara04 {background:url("../img/_wizard/chara08.webp") center top no-repeat;}
	#Chara05 {background:url("../img/_wizard/chara03.webp") center top no-repeat;}
	#Chara06 {background:url("../img/_wizard/chara09.webp") center top no-repeat;}
	#Chara07 {background:url("../img/_wizard/chara04.webp") center top no-repeat;}
	#Chara08 {background:url("../img/_wizard/chara10.webp") center top no-repeat;}
	#Chara09 {background:url("../img/_wizard/chara05.webp") center top no-repeat;}
	#Chara10 {background:url("../img/_wizard/chara11.webp") center top no-repeat;}
	#Chara11 {background:url("../img/_wizard/chara06.webp") center top no-repeat;}
	#Chara12 {background:url("../img/_wizard/chara12.webp") center top no-repeat;}
	#Chara13 {background:url("../img/_wizard/chara13.webp") center top no-repeat;}
	#Chara14 {background:url("../img/_wizard/chara14.webp") center top no-repeat;}
	#Chara15 {background:url("../img/_wizard/chara15.webp") center top no-repeat;}
	#Chara16 {background:url("../img/_wizard/chara16.webp") center top no-repeat;}
}
@media screen and (max-width:960px) { /*MB*/
	.p-chara-body {
		position: relative;
		width: 100%;
	}

	.p-chara-single {
		width: 100%;
		padding-top: 95.94%;
	}
	#Chara01 {background:url("../img/_wizard/mob_chara01.webp") center top no-repeat;background-size: contain;}
	#Chara02 {background:url("../img/_wizard/mob_chara07.webp") center top no-repeat;background-size: contain;}
	#Chara03 {background:url("../img/_wizard/mob_chara02.webp") center top no-repeat;background-size: contain;}
	#Chara04 {background:url("../img/_wizard/mob_chara08.webp") center top no-repeat;background-size: contain;}
	#Chara05 {background:url("../img/_wizard/mob_chara03.webp") center top no-repeat;background-size: contain;}
	#Chara06 {background:url("../img/_wizard/mob_chara09.webp") center top no-repeat;background-size: contain;}
	#Chara07 {background:url("../img/_wizard/mob_chara04.webp") center top no-repeat;background-size: contain;}
	#Chara08 {background:url("../img/_wizard/mob_chara10.webp") center top no-repeat;background-size: contain;}
	#Chara09 {background:url("../img/_wizard/mob_chara05.webp") center top no-repeat;background-size: contain;}
	#Chara10 {background:url("../img/_wizard/mob_chara11.webp") center top no-repeat;background-size: contain;}
	#Chara11 {background:url("../img/_wizard/mob_chara06.webp") center top no-repeat;background-size: contain;}
	#Chara12 {background:url("../img/_wizard/mob_chara12.webp") center top no-repeat;background-size: contain;}
	#Chara13 {background:url("../img/_wizard/mob_chara13.webp") center top no-repeat;background-size: contain;}
	#Chara14 {background:url("../img/_wizard/mob_chara14.webp") center top no-repeat;background-size: contain;}
	#Chara15 {background:url("../img/_wizard/mob_chara15.webp") center top no-repeat;background-size: contain;}
	#Chara16 {background:url("../img/_wizard/mob_chara16.webp") center top no-repeat;background-size: contain;}
}





@media screen and (min-width:961px) { /*PC*/
	.p-chara-text {
		text-align: left;
		position: absolute;
		left: 50%;
		margin-left:200px;
		top: 480px;
		width: 570px;
		z-index: 300;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-chara-text {
		width: 96%;
		margin: 0 auto;
		text-align: left;
		position: relative;
		z-index: 300;
	}
}

.p-chara-name {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 24px;
}

.spell {
	font-family: "Spectral", serif;
	font-weight: 200;
	font-style: normal;
	font-size: 4.5rem;
}

.kana {
	color: #b39966;
	font-family: "ten-mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2rem;
	letter-spacing: 0.5rem;
	margin-left: 24px;
}

.violet {
	letter-spacing: 0.25rem!important;
}

.p-chara-cv p {
	font-family: "ten-mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.9rem;
	letter-spacing: 0.5rem;
	line-height: 2;
	margin-bottom: 32px;
}

.p-chara-exp p {
	font-family: "ten-mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2rem;
	letter-spacing: 0.5rem;
	line-height: 2;
}

@media screen and (min-width:961px) { /*PC*/
	.p-chara-voice {
		position: absolute;
		left: 50%;
		margin-left:200px;
		bottom: 115px;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-chara-voice {
		position: relative;
		width: 96%;
		margin: 24px auto 0;
	}
}



ul.p-voice-bt {
	display: flex;
	gap:18px;
	padding-bottom: 60px;
}

ul.p-voice-bt li {
	height: 25px;
	overflow: hidden;
	
}

@media screen and (min-width:961px) { /*PC*/
	ul.p-voice-bt li {
		width: 132px;
	}
}
@media screen and (max-width:960px) { /*MB*/
	ul.p-voice-bt li {
		width: calc((100% - 36px) / 3);
	}
}

ul.p-voice-bt li a {
	display: block;
	width: 100%;
	height: 25px;
	color: #e1a45f;
	box-sizing: border-box;
	line-height: 22px;
	font-family: "ten-mincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2rem;
	letter-spacing: 0.5rem;
	border: 1px solid #e1a45f;
	border-radius: 12.5px;
	transition: all 0.3s;
}

ul.p-voice-bt li a:hover {
	background-color: #e1a45f;
	color: #2f334f;
	text-decoration: none;
}


/*ギャラリー*/

.slider-gallery {
	width: 100%;
	max-width: 1100px;
	aspect-ratio:16 / 9;
	position: relative;
}

.p-gallery-wrap {
	width: 100%;
	max-width: 1100px;
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
	
	margin-bottom: 16px;
}

@media screen and (min-width:961px) { /*PC*/
	.p-gallery-wrap {
		padding-top: 110px;
	}
}
@media screen and (max-width:960px) { /*MB*/
}

.p-gallery-single {
	width: 100%;
	max-width: 1100px;
	aspect-ratio:16 / 9;
	position: relative;
	z-index: 1000!important;
	background-color: #ede5d6;
}

.p-gallery-single iframe {
	width: 100%;
	aspect-ratio:16 / 9;
}

.p-gallery-select ul {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	gap:14px;
	flex-wrap: wrap;
}

@media screen and (min-width:961px) { /*PC*/
	.p-gallery-select ul li {
		width: calc((100% - 70px) / 6);
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-gallery-select ul li {
		width: calc((100% - 28px) / 3);
	}
}

.p-gallery-single span {
	display: block;
	width: 100%;
	max-width: 1100px;
	aspect-ratio:16 / 9;
}

.img01 {background: url("../img/gallery/gallery01.webp") left top no-repeat; background-size: cover;}
.img02 {background: url("../img/gallery/gallery02.webp") left top no-repeat; background-size: cover;}
.img03 {background: url("../img/gallery/gallery03.webp") left top no-repeat; background-size: cover;}

/*スペック*/

.p-spec-wrap {
	display: flex;
	justify-content: center;
	gap:80px;
	flex-wrap: wrap;
	position: relative;
}

.p-spec-title {
	width: 100%;
	max-width: 400px;
	position: relative;
}

.p-spec-title img {
	width: 100%;
}

.p-spec-box {
	display: flex;
	flex-direction: column;
	gap:32px;
	width: 100%;
	max-width: 400px;
}

.p-spec-box dl {
	width: 100%;
}

.p-spec-box dt {
	font-family: "ten-mincho", serif;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	font-size: 1.2rem;
	line-height: 1.5;
	letter-spacing: 0.5rem;
}

.p-spec-box dd {
	font-family: "ten-mincho", serif;
	font-weight: 400;
	font-style: normal;
	text-align: left;
	font-size: 1.2rem;
	line-height: 1.5;
	letter-spacing: 0.5rem;
	overflow-wrap: anywhere;
	
}

/*フッター*/

.p-foot-wrap {
	width: 100%;
	display: flex;
	
	align-items: center;
	flex-wrap: wrap;
	gap:48px;
}

@media screen and (min-width:961px) { /*PC*/
	.p-foot-wrap {
		justify-content: space-between;
	}
}
@media screen and (max-width:960px) { /*MB*/
	.p-foot-wrap {
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.p-contact {
		max-width: 63px;
	}
	.p-fw {
		max-width:77px;
	}
}