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

body{
	margin: 0;
	padding: 0;
	background: url(../images/dokuganryu/background.jpg);
	}


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

img{max-width: 100%;}

p,li,span{color: #eeeeee;}

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


header,main{font-family: Times New Roman,Times,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}

div#Story,div#Info,div#Map,div#Present{margin-top:-80px; padding-top:80px;}


/*-----メニュー-----*/
header{
	width: 100%;
	background: rgba(0,0,0,0.6);
	position: fixed;
	top:0;
	z-index: 99;
	}

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

	#mainMenu{display: flex;}

	#mainMenu li{
		width: 20%;
		text-align: center;
		color: #d8ca01;
		}

	#mainMenu a{padding: 1.0em 0.5em; display: block;}
	#mainMenu a:hover{background: #1b132a;}

	.logo{width: 70%; margin-top: 0.2em;}


#toggle{display: none;}




/*-----メインコンテンツ-----*/

main{
	width: 100%;
	max-width: 1380px;
	margin: 66px auto 0;
	padding: 0;
	display: block;
	box-shadow:0px 0px 10px 0px #000;
	-moz-box-shadow:0px 0px 10px 0px #000;
	-webkit-box-shadow:0px 0px 10px 0px #000;
	background-image: url(../images/dokuganryu/content_background.jpg);
	}


	/*メインビジュアル*/
	.topContents{
		margin-bottom: 15%;
		padding: 15.5% 3%;
		background-image: url(../images/dokuganryu/mainvisual.png), url(../images/dokuganryu/main_bg.png);
		background-repeat: no-repeat, repeat-x;
		background-position: top right, 0% 50%;
		background-size: contain, auto;
		position: relative;
		}

	h1{
		width: 70%;
		height: 0;
		margin: 0;
		padding-top: 20.5%;
		overflow: hidden;
		display: block;
		background: url(../images/dokuganryu/dokuganryu_h1.png) no-repeat;
		background-size: contain;
		background-position: left;
		}

	p.event_logo{
		width: 25%;
		height: 0;
		margin: 0;
		padding-top: 10.5%;
		overflow: hidden;
		display: block;
		background: url(../images/dokuganryu/masamune_450logo.png) no-repeat;
		background-size: contain;
		background-position: left;
		position: absolute;
		top: 5%;
		}

	p.date{width: 46%; margin-top: 1.5em;}


	p.scroll{
		width: 51px;
		height: 51px;
		display: block;
		cursor: pointer;
		margin: 0 45%;
		text-align: center;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		background-color: rgba(68,138,202,0.5);
		position: absolute;
		bottom: 0;
		}

		p.scroll img{padding-top: 28.5%;}
		p.scroll:hover{background-color: rgba(68,138,202,0.8);}


	/*各種記事_大枠*/
	.mainContent{margin: 10% 5% 0;}


		/*ストーリー*/
		.storyArticle{
			margin: 0 3%;
			display: flex;
			}


		.storyArticle h2{
			padding-top: 22.5%;
			font-size: 1.8em;
			line-height: 2.0em;
			color: #d8ca01;
			text-shadow:0px 0px 8px #000;
			}

		.storyArticle div:first-child{width: 40%;}

		.storyArticle p{
			font-size: 1.4em;
			line-height: 1.8em;
			margin-bottom: 1.5em;
			}

		.storyArticle span{font-size: 1.2em;}

		.Chara_img{display: none;}



		/*各種記事*/
		div#Info{margin-top: 10%; position: relative;}

		#Info h2,#Map h2,#Present h2{
			width: 180px;
			height: 0;
			margin: 0 auto 5%;
			padding-top: 180px;
			overflow: hidden;
			display: block;
			background-repeat: no-repeat !important;
			background-size: contain !important;
			}

			#Info h2{background: url(../images/dokuganryu/info_h2.png);}
			#Map h2{background: url(../images/dokuganryu/map_h2.png);}
			#Present h2{background: url(../images/dokuganryu/present_h2.png);}


		h3{
			margin-bottom: 1.5em;
			padding: 0.5em;
			color: #d8ca01;
			background: rgba(0,0,0,0.5);}


		h4{
			margin-top: 0.5em;
			padding-left: 0.25em;
			padding-bottom: 0.25em;
			font-size: 1.2em;
			color: #d8ca01;
			border-bottom: double #827a00;
			}

		h5{
			margin-top: 0;
			margin-bottom: 0;
			font-size: 1.2em;
			color: #FFF;
			}

		section{margin-bottom: 10%;}
		section p,li{font-size: 1.2em; line-height: 1.5em;}
		section li{margin-bottom: 0.65em;}
		li.none_mark{list-style: none !important; padding: 0.7em;}

		#Present p:first-child{margin:0 1.5em 1.5em; text-align: left;}
		.map_photo{width: 90%; margin: 0.5em 5%;}


		.FlexBox{display: flex; flex-wrap: wrap; margin-bottom: 1.5em;}
		.FlexBox ul{padding-left: 1.5em;}

		.map_index div:first-child{width: 58%; margin: 1%;}
		.map_index div:last-child{width: 35%; margin: 1%;}
		.Block02 div{width: 48%; margin: 1% 1% 3em;}
		.Block04 div{width: 23%; margin: 1%;}

		#Map div.Block02 li{list-style-type: decimal;}
		#Map .EX{margin-bottom: 1.0em;}


		.bold{font-weight: bold;}
		.large{font-size: 1.2em;}
		.small{font-size: 0.9em;}
		.notes{font-weight: bold; margin-bottom: 1.5em;}
		.notes_y{font-size: 0.9em; color: #fff100;}
		.center{text-align: center; margin-top: 1.5em;}



		/*SNS*/
		.SNS_share {margin: 10% 0;}

		.SNS_share ul{
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			list-style-type: none;
			}

		.SNS_share li{
			width: 60px;
			height: 60px;
			display: block;
			cursor: pointer;
			margin: 0 1em;
			text-align: center;
			border-radius: 50%;
			-webkit-border-radius: 50%;
			}

		.SNS_share li:hover{
			box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.3);
			-webkit-box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.3);
			-moz-box-shadow: inset 0 0 5px 0 rgba(255,255,255,0.3);
			}

		.Facebook{border: solid 2px #3b579d;}
		.Twitter{border: solid 2px #55acee}
		.Line{border: solid 2px #00cc00;}

			li.Facebook img, li.Line img{padding-top: 21.5%;}
			li.Twitter img{padding-top: 27%;}

		.Facebook:hover{background: rgba(59,87,157,0.4);}
		.Twitter:hover{background: rgba(85,172,238,0.3);}
		.Line:hover{background: rgba(0,204,0,0.3);}


		/*クレジット*/
		.Credit{padding-bottom: 10%; position: relative;}

		.Credit p{
			margin-top: 0.5em;
			font-size: 1.0em;
			line-height: 1.4em;
			text-align: center;
			}

		.Credit br{display: none;}



/*-----キャラクター配置-----*/
.masamune{
	width: 25%;
	display: block;
	position: absolute;
	top: 168px;
	right: 0;
	}

.katakura{
	width: 26%;
	display: block;
	position: absolute;
	bottom:0;
	left: 0;
	}



/*-----Footer-----*/
footer{
	padding: 5%;
	background:url(../images/dokuganryu/footer_bg.png) no-repeat rgba(0,0,0,0.4);
	background-position: right bottom;
	background-size: 50%;
	}

footer div{
	width: 100%;
	max-width: 1380px;
	margin: auto;
	}

footer ul{
	padding: 0;
	margin-bottom: 1.5em;
	display: flex;
	}

footer li{
	padding: 0 1em;
	font-size: 1.0em;
	display: block;
	}

	footer li:first-child{padding: 0.15em 1em 0.15em 0;}
	footer li:nth-child(2){border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}
	footer li:hover{color: #d5ccea;}



/*-----ページTOPへ戻る-----*/

#pageTop {
	position: fixed;
	width: 100px;
	bottom: 30px;
	right: 30px;
	z-index: 999;
	display:block;
	}
	
	#pageTop img{width: 100%;}
	#pageTop:hover img{opacity: 0.7;}




@media only screen and (max-width: 768px) {
	
	
/*-----メニュー-----*/
.logo{width: 95%; margin-top: 0.5em; padding: 0 2.5%;}


/*-----メインコンテンツ-----*/

main{margin: 60px auto 0;}

/*メインビジュアル*/
.topContents{
	padding: 15.5% 1.5%;
	background-size: contain, 100% 60%;
	}

p.event_logo{width: 38%;}

p.scroll{width: 41px; height: 41px; margin: 0 45.6%;}
	p.scroll img{width: 60%;}

	
	
	/*各種記事_大枠*/
	.mainContent{margin: 15% 5% 0;}


		/*ストーリー*/
		.storyArticle{
			margin: 0 3%;
			display: block;
			}


		.storyArticle h2{
			padding-top: 0%;
			font-size: 1.7em;
			line-height: 1.8em;
			text-align: center;
			}

		.storyArticle div:first-child{display: none;}

		.storyArticle p{
			font-size: 1.3em;
			line-height: 1.6em;
			text-align: center;
			}

		.Chara_img{
			width: 50%;
			margin: 0 auto 1.5em;
			display:block;
			}


		/*各種記事*/

		section.short{width: 70% !important;}
		section p,li{font-size: 1.1em; line-height: 1.4em;}

		.Block02 div{width: 98%;}
		#Map .map_photo{width: 70%; margin: 0 15%;}
	
		/*クレジット*/
		.Credit{padding-left: 30%;}

		.Credit p{
			margin-top: 0.5em;
			font-size: 0.9em;
			text-align: left;
			}

		.Credit p img{height: 23px;}

		.Credit br{display: block;}


/*-----Footer-----*/
footer{background-size: 40%; background-position: right;}

	
/*-----キャラクター配置-----*/
.masamune{top:280px;}

}



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

/*-----メインコンテンツ-----*/
main{margin: 50px auto 0;}


/*-----メニュー-----*/
header{background: rgba(0,0,0,0.8);}


#toggle{
	padding: 0 !important;
	display: block;
	text-align: left;
	position: relative;
	}
	
	#toggle img{height: 40px;}
	
	#toggle a{padding: 0.35em; display: block;}
	
	#toggle a:after {
			font-size: 1.7em;
			color: #FFF;
	        font-family: 'typicons';
	        content: '\e116';
			display: inline-block;
			position: absolute;
			top:10px;
			right: 10px;
			}

	
#mainMenu{display: none;}

	#mainMenu li{
		width: 100%;
        text-align: center;
        border-bottom: 1px solid #ccc;
		}
    
	#mainMenu li:first-child{display: none;}
	#mainMenu li:last-child{border-bottom:none;}
	
	
	
/*メインビジュアル*/
	.topContents{
		padding: 50% 3% 20%;
		background-position: top right, 0% 87%;
		background-size: 110%, 100% 31%;
		}

	h1{
		width: 100%;
		margin: 65% 0 0;
		padding-top: 35.5%;
		}

	p.event_logo{
		width: 60px;
		height: 0;
		margin: 0;
		padding-top: 60px;
		overflow: hidden;
		display: block;
		background: url(../images/dokuganryu/masamune_450logo_sp.png) no-repeat;
		background-size: contain;
		background-position: left;
		position: absolute;
		top: 12px;
		}

	p.date{width: 98%; margin-top: 0.5em;}

	p.scroll{margin: 0 43.1%;}
	
	

	/*各種記事_大枠*/
	.mainContent{margin: 25% 5% 0;}


		/*ストーリー*/
		.storyArticle{margin: 0;}

		.storyArticle h2{
			padding-top: 1.0em;
			margin-bottom: 0.5em;
			font-size: 1.5em;
			line-height: 1.5em;
			}


		.storyArticle p{
			font-size: 1.0em;
			line-height: 1.3em;
			text-align: center;
			}

		.Chara_img{
			width: 70%;
			margin: 0 auto 1.8em;
			}




		/*各種記事*/
		div#Info{margin-top: 30%;}

		#Info h2,#Map h2,#Present h2{width: 120px; padding-top: 120px;}


		h3{
			margin-bottom: 1.5em;
			padding: 0.5em;
			color: #d8ca01;
			background: rgba(0,0,0,0.5);}



		h4,h5{font-size: 1.0em;}

		section.short{width: 100% !important; padding-bottom: 25%;}

		section{margin-bottom: 15%;}
		section p,li{font-size: 1.0em; line-height: 1.4em;}
		section ul{padding-left: 1.5em;}
		section li{margin-bottom: 0.75em;}
	
		.FlexBox{display: block;}
	
		.map_index div:first-child{width: 100%; margin: 0 0 1.5em;}
		.map_index div:last-child{width: 100%; margin: 0;}
			.map_index div:last-child img{width: 80%; margin: 0 10%;}
	
		.Block04 div{width: 100%; margin: 0 0 10%;}
		.Block04 br{display: none;}
		
	

		/*SNS*/
		.SNS_share {margin: 20% 0 30%;}

		.SNS_share li{
			width: 50px;
			height: 50px;
			}

			li.Facebook img, li.Line img{width: 60%; padding-top: 19.5%;}
			li.Twitter img{width: 60%; padding-top: 27%;}


	
		/*クレジット*/
		.Credit{padding-left: 40%;}

		.Credit p{
			margin-top: 0.5em;
			font-size: 0.8em;
			text-align: left;
			}

		.Credit p img{height: 20px;}



/*-----キャラクター配置-----*/
.masamune{width: 35%; top: 360px;}

.katakura{width: 36%;}
	
	
/*-----Footer-----*/
footer{background-size: 60%;}
	
footer ul{display: block;}

footer p:first-child{width: 35%;}
footer p:last-child{font-size: 0.9em; text-shadow:0px 0px 6px #000,0px 0px 6px #000,0px 0px 6px #000;}
	
footer li{
	padding: 0.15em 0;
	font-size: 0.9em;
	display: block;
	}

	footer li:first-child{padding: 0.15em 0;}
	footer li:nth-child(2){border-left: none; border-right: none;}



/*-----ページTOPへ戻る-----*/

#pageTop {
	width: 80px;
	bottom: 10px;
	right: 10px;
	}

}



@media only screen and (max-width: 360px) {	.masamune{top:395px;} }