@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Pacifico);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

@keyframes gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

/*
body {
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background: #DFE4EC;
}
*/

@font-face {
	font-family: 'MyFont';
	src: url('../font/851MkPOP_100.ttf');
}

html,body {
	font-family:'MyFont';
	font-weight: 300;
	height:100%;
	width:100%;
	margin-left : auto;
	margin-right : auto;
	text-align : center;
	background-color : #EFEFEF;
}

p {
	font-size: 1.6em;
	line-height: 1.3em;
	display: block;
}

h2 {
	font-size: 2em;
	display: block;
	margin-top: 45px;
}

u {
	color: black;
}


/* 最初のろご (nav)
------------------------------------------------------------*/
#mainImg {
	display: block;
	float: left;
	height: auto;
	width: 15%;
	margin: 0 auto;
	margin-bottom: 2%;
}

#menu{
	display: inline-block;
	position: relative;
	height: 100%;
	font-size: 2.5em;
	cursor: pointer;
	margin-top: 3%;
	padding: 15px;
  }

  #menu.btn-border {
	border-radius: 0;
  }
  
  #menu.btn-border:before,
  #menu.btn-border:after {
	position: absolute;
  
	width: 100%;
	height: 2px;
  
	content: '';
	-webkit-transition: all .3s;
	transition: all .3s;
  
	background: #000;
  }
  
  #menu.btn-border:before {
	top: 0;
	left: 0;
  }
  
  #menu.btn-border:after {
	right: 0;
	bottom: 0;
  }
  
  #menu.btn-border:hover:before,
  #menu.btn-border:hover:after {
	width: 0;
  }
  

  

/* 共通
------------------------------------------------------------*/
canvas {
	display: block;
	margin: 0 auto;
}

#back {
	margin: 0 auto;
	margin-top: 30px;
	padding-top: 10px;
	padding-bottom: 30px;
	width: 95%;
	height: auto;
	background-image: linear-gradient(0deg, transparent 31px, #cac9c9 32px),linear-gradient(90deg,  transparent 31px, #cac9c9 32px);
  	background-color: #fdf8f3;
  	background-size: 32px 32px;
}

#leftwall {
	display: flex;
	position: absolute;
	background: linear-gradient(-45deg, #082175, #6f8ef1, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	display: block;
	line-height: 110px;
	width: 20%;
	height: 100%;
	text-align: center;
	color: #fff;
}

#leftwall::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.5;
	background: url(../images/reportdash_r.png);
}

#rightwall {
	display: flex;
	position: absolute;
	background: linear-gradient(-45deg, #082175, #6f8ef1, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
	display: block;
	line-height: 110px;
	width: 20%;
	height: 100%;
	text-align: center;
	color: #fff;
	right: 0;
}

#rightwall::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0.5;
	background: url(../images/reportdash_t.png);
}

#headpic01 {
	display: block;
	position: absolute;
	top: 2%;
	left: 26%;
	width: 125px;
	height: 125px;
	background-color: #9c9797;
	color: #FFF;
	border-radius: 50%;
}

#headpic02 {
	display: block;
	position: absolute;
	top: 2%;
	right: 26%;
	width: 125px;
	height: 125px;
	background-color: #9c9797;
	color: #FFF;
	border-radius: 50%;
}

.ico {
	margin: 0 auto;
	width: 125%;
	height: auto;
}

#footwall {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 10%;
	background: #ecf8fe;
}

/* 概要(id=abst)
------------------------------------------------------------*/
#abst {
	display: block;
	margin: 0 auto;
	margin-top: 5px;
	margin-bottom: 30px;
	width: 800px;
	padding: 30px 30px 30px 30px;
	position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    color: #454545;
	text-align: left;
}

#abst:after {
	position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #efefef #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.fire {
	color: red;
	font-size: 1.6em;
	line-height: 2em;
	font-weight: bold;
}

b {
	font-size: 1.4em;
}

#abstimg {
	display: block;
	margin: 0 auto;
	width: 70%;
	height: auto;
}

b.abstcenter {
	text-align: center;
}

.fire2 {
	text-align: center;
	color: red;
	font-size: 1.4em;
	line-height: 2em;
	font-weight: bold;
}

/* ルール説明(id=rule)
------------------------------------------------------------*/
#rule {
	display: block;
	margin: 0 auto;
	margin-bottom: 30px;
	width: 800px;
	padding: 30px 30px 30px 30px;
	background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#fde2f5 3px, #fde2f5 7px );
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#fde2f5 3px, #fde2f5 7px );
	text-align: left;
}

.pict {
	display: block;
	width: 90%;
	height: auto;
	margin:0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background:rgba(255,255,255,0.7);
	padding: 20px;
}

.textcenter {
	text-align: center;
}

.textright {
	width: 100%;
	text-align: right;
}
 
/* ゲーム画面の設定
------------------------------------------------------------*/
iframe {
	margin: 0 auto;
	width: 800px;
	height: 600px;
}

/* スマホ画面設定
------------------------------------------------------------*/
#phone-screen {
	background: #ffd54f;
	width: 0;
	height: 0;
	display: none;
  }

/* 追加 説明書のポップアップ
------------------------------------------------------------*/
  .panel{
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
  }
  
  .panel-inner{
	position: relative;
	width: 100%;
	height: 100%;
	background: #F16B6C;
	background: rgba(241, 107, 108, .8);
	transition: all 0.5s;
  }
  
  
  .l-nav{
	/* position: fixed; */
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	/* 縦方向のスクロールバーを表示 */
	overflow-y: scroll;

  }
  
  .close{
	cursor: pointer;
	position: fixed;
	top: 10px;
	right: 10px;
	/*background: url('../images/close_brack.png');*/
	background-repeat: no-repeat;
	background-size: contain;
	width: 25%;
	height: 15%;
	margin: 30px;
	text-align: center;
	font-size: 3em;
  }

  .close:hover {
	opacity: 0.5;
  }


  
#smp1 {
	margin: 0 auto;
	margin-bottom: 1em;
	padding:1em;
	border:solid 1px #ccc;
    background-color:#ecf8fe;
	height: 15%;
	width: 100%;
}

#smp1 ul {
	margin:0;
    padding:0;
	}
#smp1 ul li {
	display:inline; /*インラインに*/
	font-weight:bold;
	line-height:1em;
    margin:0;
	padding:0;
	}
#smp1 ul li:last-child::after {
	content:''      /*最後の li要素には何もつけない*/
	}
#smp1 ul li a {
	color:inherit;
	text-decoration:none
	}
#smp1 ul li a:hover {
	color:#39f;
	text-decoration:underline
	}

	/* RESPONSIVE 設定
------------------------------------------------------------*/
@media  (orientation: landscape) and (max-height: 599px) {
	#suman {
		display: block;
		margin: 0 auto;
		width: 100%;
		height: 15vh;
		background-color: rgba(137, 255, 206, 0.3);
		font-size: 3.0em;
		line-height: 15vh;
	}
	
	#gomen {
		display: block;
		margin:0 auto;
		margin-top: 30px;
		margin-bottom: 30px;
		width: 70vw;
		height: auto;
	}

	#sorry {
		margin: 0 auto;
		margin-bottom: 30px;
		width: 70vw;
		height: auto;
		font-size: 1.3em;
		text-align: left;
		padding: 30px 30px 30px 30px;
		background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#fde2f5 3px, #fde2f5 7px );
    	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#fde2f5 3px, #fde2f5 7px );
	}
	
	#phone-screen {
		background: linear-gradient(-45deg, #082175, #6f8ef1, #23a6d5, #23d5ab);
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		top: 0;
		left: 0;
	}


	iframe {
		width: 0;
		height: 0;
	}

	#headpic01 {
		display: none;
		width: 0;
		height: 0;
	}

	#smp1 {
		width: 0;
		height: 0;
	}

	ul {
		width: 0;
		height: 0;
	}

	.menu {
		width: 0;
		height: 0;
	}

	#menu {
		width: 0;
		height: 0;
	}

	
}


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

	#wrapper {
		width: 55%;
	}

	#leftwall {
		width: 15%;
	}

	#rightwall {
		width: 15%;
	}
	
}

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

	#wrapper {
		width: 55%;
	}

	#leftwall {
		width: 10%;
	}

	#rightwall {
		width: 10%;
	}

	#headpic01 {
		left: 23%;
	}

	#headpic02 {
		right: 23%;
	}
	
}

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

	#wrapper {
		width: 55%;
	}

	#leftwall {
		width: 5%;
	}

	#rightwall {
		width: 5%;
	}

	#headpic01 {
		left: 15%;
	}

	#headpic02 {
		right: 15%;
	}

	#abst {
		width: 80%;
	}

	#rule {
		width: 80%
	}
}


@media only screen and (max-width: 870px){
	#wrapper {
		width: 75%;
	}

	#mainImg{
		height: 25%;
		width: auto;
	}

	#leftwall {
		width: 0%;
	}

	#rightwall {
		width: 0%;
	}
	
	.close {
		font-size: 2.2em;
	}
}

@media only screen and (max-width: 779px){
	#suman {
		display: block;
		margin: 0 auto;
		width: 100%;
		height: 15vh;
		background-color: rgba(137, 255, 206, 0.3);
		font-size: 3.0em;
		line-height: 15vh;
	}
	
	#gomen {
		display: block;
		margin:0 auto;
		margin-top: 30px;
		margin-bottom: 30px;
		width: 70vw;
		height: auto;
	}

	#sorry {
		margin: 0 auto;
		margin-bottom: 30px;
		width: 70vw;
		height: auto;
		font-size: 1.3em;
		text-align: left;
		padding: 30px 30px 30px 30px;
		background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#fde2f5 3px, #fde2f5 7px );
    	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#fde2f5 3px, #fde2f5 7px );
	}
	
	#phone-screen {
		background: linear-gradient(-45deg, #082175, #6f8ef1, #23a6d5, #23d5ab);
		display: block;
		position: absolute;
		width: 100vw;
		height: 100%;
		top: 0;
		left: 0;
	}

	

	iframe {
		width: 0;
		height: 0;
	}

	#headpic01 {
		display: none;
		width: 0;
		height: 0;
	}

	#smp1 {
		width: 0;
		height: 0;
	}

	ul {
		width: 0;
		height: 0;
	}

	.menu {
		width: 0;
		height: 0;
	}

	#menu {
		width: 0;
		height: 0;
	}
	
}

@media only screen and (max-height: 910px){
	#footwall {
		height: 0;
	}
}

@media only screen and (max-height: 770px){
	#footwall {
		height: 0;
	}

	#rightwall {
		height: 770px;
	}

	#leftwall {
		height: 770px;
	}

}

@media only screen and (max-height: 650px) and (max-width: 779px){

	#phone-screen {
		height: auto;
	}

}