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

body{
	margin: 0;
	padding: 0;
	background-image: url("../images/background_02.png"),url("../images/background_01.jpg");
	background-position: top center;
	background-size: 120%,auto;
	background-color: #f1e8e1;
	}

@font-face{
	font-family: 'typicons';
	src: url('../font/typicons.eot');
	src: url('../font/typicons.eot?#iefix') format('embedded-opentype'),
		url('../font/typicons.woff') format('woff'),
		url('../font/typicons.ttf') format('truetype'),
		url('../font/typicons.svg#typicons') format('svg');
	font-weight: normal;
	font-style: normal;
	}

header,main,footer{display: block;}

header,h2,h3.ht_entry{font-family: 'Noto Serif JP', serif; font-weight: bold;}
img{max-width: 100%;}
p,li{font-size: 1em; line-height: 1.6em;}

:hover{
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
	}

a img:hover{opacity: 0.8;}


/*------共通設定------*/
.FlexBox{display: flex; flex-wrap: wrap;}
.block02 div,.block02 p{flex: 0 1 48%; margin: 0 1%;}
.block03 div,.block03 p{flex: 0 1 31%; margin: 0 1%;}
.block05 div,.block05 p{flex: 0 1 18%; margin: 0 1%;}

#Character .block05 div{margin: 0 1% 1em;}

.Campaign .block02 div{margin: 0 1% 2em;}
.Campaign .block03 div{margin: 0 1% 2em;}

.small{font-size: 0.9em;}
.center{text-align: center;}
.bold{font-weight: bold;}

.LinkButton{
	font-weight: bold;
	text-align: center;
	}
	
	.LinkButton a{color: #FFF!important; padding: 0.45em; display: block;}

	.twitter{background: #55acee;}
	.twitter a{border: solid 2px #FFF;}
	.twitter a:hover{border: solid 2px #55acee; color: #55acee!important; background: #FFF;}


.DLButton{
	margin: 1em 1%!important;
	font-weight: bold;
	text-align: center;
	display: block;
	border: solid 2px #a40000;
	background: #a40000;
	}

.newsList{
	margin: 1em 0!important;
	font-weight: bold;
	text-align: center;
	display: block;
	border: solid 2px #a40000;
	background: #a40000;
	}

	.DLButton a,.newsList a{color: #FFF!important; padding: 0.45em!important; display: block;}
	.DLButton a:hover,.newsList a:hover{color: #a40000!important; background: #FFF!important;}

	.twicon{max-width: 250px;}
	.SP_wp{max-width: 298px;}


/*------header------*/
header{
	width: 100%;
	padding: 0;
	background-color: rgba(0,0,0,0.8);
	position: fixed;
	top:0;
	z-index: 999;
	}

nav{max-width: 1480px; margin: auto;}

#mainMenu{display: flex;}

#mainMenu li{
	flex: 0 1 20%;
	font-size: 1.2em;
	text-align: center;
	color: #f9be00;
	}

	#mainMenu li:hover{color: #1b1b1b; background-color: #f9be00;}

	/*ON設定*/
	#Story #mainMenu li:first-child{color: #1b1b1b; background-color: #f9be00;}
	#System #mainMenu li:nth-child(2){color: #1b1b1b; background-color: #f9be00;}
	#Character #mainMenu li:nth-child(3){color: #1b1b1b; background-color: #f9be00;}
	#Special #mainMenu li:nth-child(4){color: #1b1b1b; background-color: #f9be00;}


#mainMenu a{padding: 0.7em 0; display: block;}

#toggle{display: none;}



/*------SNS・各社ロゴ------*/
.sns ul{margin: 7% 0 0; padding:0; text-align:center;}
	
.sns li{
	width:60px;
	height:60px;
	display:inline-block;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	margin-left: 1.5em;
	margin-right: 1.5em;
	text-align: center;
	list-style-type:none;
	}
		
	.fb{border: solid 2px #3b579d;}
	.tw{border: solid 2px #55acee;}
	.ln{border: solid 2px #00cc00;}

.sns li:hover{background-color:rgba(54,46,43,0.3);}

.sns img{padding-top: 20.5%;}


.Corp_logo{
	margin-top: 3em;
	justify-content: center;
	}
.Corp_logo p{margin: 0 1.5em;}


/*------ゲーム情報------*/
.game_info{width: 60%; margin: auto; padding-top: 10%;}
.game_info div:first-child{flex: 0 1 40%;}
.game_info div:first-child{text-align: center;}
.game_info div:first-child img{width: 80%; height: auto;}

.game_info div:last-child{flex: 0 1 60%;}

.store_badge{display: flex;}
.store_badge img{width: 100%!important; height: auto;}
.store_badge p{padding: 0 0.5em;}

.game_info ul{margin: 0 1em 1em; padding: 0; list-style: none;}
.game_info li{padding: 1.5em; border-bottom: 1px solid; font-size: 0.9em;}


/*------ストーリー・システム------*/
.GameDetail{width: 85%; padding-top: 1em; margin: auto auto 3em;}
.GameDetail .CP_image{padding-bottom: 1em;}

.GameDetail .FlexBox{padding-bottom: 1em;}

.game_ss{width: 85%; margin: auto auto 2em;}


/*------キャラクター------*/
.photoGallery div{position: relative;}
.new{width: 28%; position: absolute; bottom: 0; right: 0; z-index: 99;}


/*------footer------*/
footer{
	margin-top: 10%;
	padding: 1.5em 2%;
	background-color: #1b1b1b;
	}

footer div{border-bottom: 1px solid #313131;}

	/*タイトーリンク*/
	ul.taitoLink{padding:0;}
	
	ul.taitoLink li{
		font-size: 1.0em;
		margin-right: 1.0em;
		display: inline-block;
		}
	
	ul.taitoLink a{color: #FFF;}
	ul.taitoLink a:hover{color: #e60012;}

	.copy{
		margin-top: 1.5em;
		font-size: 0.9em;
		line-height: 1.2em;
		color: #FFF;
		}



/*------トップへ戻る------*/
#pageTop {
	position: fixed;
	width: 130px;
	bottom: 30px;
	right: 30px;
	z-index: 999;
	display:block;
	}
	
	#pageTop img{width: 100%;}
	#pageTop:hover img{opacity: 0.7;}



/*------Index------*/
#mainVisual{
	background-image: url("../images/top_mainvisual.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	}

#mainVisual div{
	width: 100%;
	max-width: 1480px;
	margin: auto;
	padding: 10% 10% 35% 0;
	}

h1{
	width: 35%;
	height: 0;
	margin:0 0 0 auto;
	padding-top: 35%;
	background: url(../images/hozuki_logo.png) no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
	background-position: center;
	}


/*h1{
	width: 40%;
	height: 0;
	margin:0 0 0 auto;
	padding-top: 40%;
	background: url(../images/hozuki_logo_1th.png) no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
	background-position: center;
	}*/

h1 + p{
	width: 40%;
	height: 0;
	margin: 1em 0 0 auto;
	padding-top: 15%;
	background: url(../images/top_catchtext03.png) no-repeat;
	background-size: contain!important;
	overflow: hidden;
	display: block;
	background-position: top center;
	}


/*ピックアップバナー掲載箇所*/
#bannerArea{
	margin-bottom: 4em;
	padding: 2em 0;
	background-image: url("../images/banner_background.jpg");
	background-repeat: repeat;
	}

#bannerArea div{
	width: 100%;
	max-width: 1480px;
	margin: auto;
	text-align: center;
	}


/*新着情報・Twitter*/
.NEWS h2{margin: 0; display: inline-block; float: left;}

.NEWS article{
	margin-left: 65px;
	padding: 3px;
	border: 3px solid rgba(0,0,0,0.8);
	}

.NEWS ul{
	margin: 0;
	padding: 1em;
	list-style: none;
	background-color: rgba(0,0,0,0.8);
	}

.NEWS li{border-bottom: 1px solid #fff;}
.NEWS li:last-child{border-bottom: none;}

.NEWS a{padding: 1em; display: block;}
.NEWS a:hover{background-color: rgba(0,0,0,0.5);}

.NEWS p:first-child{margin-bottom: 0.5em; color: #fff100;}
.NEWS p:last-child{color: #fff;}

.Tw_Widget{padding-bottom: 1em;}



/*------Contents------*/
main{
	width: 100%;
	max-width: 1480px;
	margin: auto;
    padding-top: 8%;
	}

main a{color: #a40000!important;}
main a:hover{color: #e60012!important;}

.Contents{margin: 6em 1em 0;}

.Contents h2{
	padding: 2px;
	font-size: 1.2em;
	line-height: 1.6em;
	color: #FFF;
	text-align: center;
	border: solid 2px #1b1b1b;
	}

.Contents h2 > p{padding: 0.25em; background: #1b1b1b;}
.entry h2{margin: 0; border: none!important;}


.Contents h3{
	margin: 0 0 1em;
	padding: 0 0 0 0.5em;
	color: #a40000;
	border-left: solid 8px #a40000;
	}

.Contents h4{
	margin: 0 0 0.5em;
	font-size: 1.0em;
	line-height: 1.6em;
	font-weight: bold;
	}


.Contents article{
	padding: 1.5em;
	background: rgba(255,255,255,0.7);
	}

/*NEWS一覧*/
.Contents .NEWS {width: 96%; margin: auto;}
.Contents .NEWS article{
	margin-left: 0!important;
	padding: 2px!important;
	}

/*ENTRY*/
#How_to_entry{margin-top: -170px; padding-top: 170px;}

.entry > .block03{margin-bottom: 5em;}
.entry > .block03 img{margin-top: 1em; margin-bottom: 0.5em;}

h3.ht_entry{
	margin-bottom: 2em;
	padding: 2px;
	color: #FFF;
	text-align: center;
	border: solid 2px #a40000;
	}

h3.ht_entry > p{padding: 0.15em; background: #a40000;}

.How_to ul{margin: 0 2em 3em; padding: 0;}
.How_to li{margin-bottom: 0.5em; padding: 0;}

ul.entryButton{margin: 2em 0 6em; padding: 0; list-style: none; text-align: center;}
ul.entryButton li{margin: 0; padding: 0.5em 2%; display: inline-block;}

ul.number{margin-top: 1em!important; list-style: none;}


/*ENTRY誘導*/
#EntryButton {
	position: fixed;
	width: 130px;
	top: 80px;
	right: 30px;
	z-index: 999;
	display:block;
	}
	
	#EntryButton img{width: 100%;}
	#EntryButton:hover img{opacity: 0.7;}


/*Special・Campaign*/
.Twitter_pre div:last-child{margin-top: 4.5em;}

.CP_image{text-align: center;}
.Campaign h3{margin-top: 3em;}


/*動画*/
.PV{margin-bottom: 4em;}

.movie{
	width: 74%;
	margin: 0 auto;
	padding-top:  41.8%;
	position: relative;
	}

.movie iframe{
	width: 100% !important;
	height: 100% !important;
	top: 0;
	left: 0;
	position: absolute;
	}




@media only screen and (max-width: 860px) {

#TOP section.FlexBox:first-child{width: 94%; margin: auto; display: block;}
.NEWS {padding-bottom: 3em;}

.block03 div,.block03 p{flex: 0 1 48%; margin: 0.5em 1%;}
.block05 div,.block05 p{flex: 0 1 23%; margin: 0 1%;}
	
#mainMenu li{font-size: 1.0em;}
#EntryButton{display:none;}


/*------ゲーム情報------*/
.game_info{width: 90%; margin: auto; padding-top: 5em;}
.game_info div:first-child{flex: 0 1 33%; padding: 1%;}
.game_info div:first-child{text-align: center;}
.game_info div:first-child img{width: 100%; height: auto;}

.game_info div:last-child{flex: 0 1 65%;}

.game_info ul{margin: 1em; padding: 0; list-style: none;}
.game_info li{padding: 1em; border-bottom: 1px solid; font-size: 0.9em;}


/*動画*/
.movie{
	width: 90%;
	margin: 0 auto;
	padding-top:  50.6%;
	position: relative;
	}
	

/*------トップへ戻る------*/
#pageTop {bottom: 10px; right: 10px;}

	
}

@media only screen and (max-width: 480px) {

/*------共通設定------*/
section{padding-bottom: 3em;}

.FlexBox{display: block;}
.block02 div,.block02 p{margin: 1em;}
.block03 div,.block03 p{margin: 1em;}
	
#Character .Contents .FlexBox{display: flex!important;}
.block05 div,.block05 p{flex: 0 1 31%; margin: 0 1%;}

.twicon{max-width: 480px;}
.SP_wp{max-width: 480px;}

	
/*--------------header--------------*/
header{
	width: 100%;
	padding: 0;
	height: auto;
	position: fixed;
	top: 0;
	}

#toggle{
	display: block;
	text-align: left;
	position: relative;
	}
	
	#toggle a{padding: 0;}
	
	#toggle a:after {
			padding: 0.1em 0.3em;
			font-size: 1.7em;
			color: #FFF;
	        font-family: 'typicons';
	        content: '\e116';
			display: inline-block;
			position: absolute;
			top:10px;
			left: 10px;
			text-shadow: 0px 0px 6px #ff0000,0px 0px 6px #ff0000;
			background: rgba(164,0,0,0.85);
			}

#mainMenu{display: none; padding-top: 3.5em;}
#mainMenu li{width: 100%; display: block;}


/*------SNS・各社ロゴ------*/
.sns li{
	width:50px;
	height:50px;
	display:inline-block;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	margin-left: 0.75em;
	margin-right: 0.75em;
	text-align: center;
	list-style-type:none;
	}
		
.sns img{width: 30px; height: auto; padding-top: 20.5%;}


.Corp_logo{
	margin-top: 3em;
	justify-content: center;
	display: flex;
	}
.Corp_logo p{margin: 0 0.45em;}

	
/*------footer------*/
footer{padding: 1.5em 1em;}

	/*タイトーリンク*/
	ul.taitoLink li{margin-bottom: 0.5em; display: block;}


	
/*------ゲーム情報------*/
.game_info{width: 94%; margin: auto auto 5em; padding-top: 0;}
.game_info div:first-child{flex: 0 1 30%;}
.game_info div:first-child{text-align: center;}
.game_info div:first-child img{width: 40%; height: auto; margin-bottom: 2em;}

.game_info div:last-child{flex: 0 1 70%;}

.store_badge img{margin-bottom: 0!important;}
	
.game_info ul{margin: 1em; padding: 0; list-style: none;}
.game_info li{padding: 1em; border-bottom: 1px solid; font-size: 0.9em;}

	
/*------トップへ戻る------*/
#pageTop {width: 110px;}

	
	
/*------Index------*/
#mainVisual{
	background-image: url("../images/top_mainvisual_sp.jpg");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	}

#mainVisual div{
	width: 100%;
	max-width: 1480px;
	margin: auto;
	padding: 2em 3em 100% 0;
	}

/*h1{width: 51%; padding-top: 51%;}*/

h1{width: 40%; padding-top: 40%;}

h1 + p{
	width: 98%;
	height: 0;
	margin: 97% 0 0 auto;
	padding-top: 42%;
	}


/*ピックアップバナー掲載箇所*/
#bannerArea{padding: 1em 0;}


/*新着情報・Twitter*/
.NEWS h2{display: none;}

.NEWS article{margin-left: 0;}

.NEWS ul{margin: 0;	padding: 0.5em;}

.NEWS a{padding: 0.5em 0; display: block;}
.Tw_Widget{padding-bottom: 0em;}
	

/*------Contents------*/
.Contents article{padding: 0.5em;}

	
/*ENTRY*/
.entry > .block03 img{margin-top: 0; margin-bottom: 0;}

.How_to ul{margin: 0 1em 3em; padding: 0;}
	
ul.entryButton{text-align: left;}
ul.entryButton li{width: 48%; padding: 0.5em 0;}

ul.number{margin-top: 1em!important; list-style: none;}

	
/*ENTRY誘導*/
#EntryButton {
	position: fixed;
	width: 80px;
	top: 10px;
	right: 10px;
	z-index: 999;
	display:block;
	}
	
	
/*Special・Campaign*/
#Special h3{margin-top: 3em;}
#Special h3.icon{margin-top: 0!important;}

#Special article p{margin: 1em 0!important; text-align: center;}

.Twitter_pre{margin: 0!important;}
.Twitter_pre div:last-child{margin-top: 0;}

.CP_image{text-align: center;}
.Campaign h3{margin-top: 3em;}
}