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

html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

header{
	padding: 32px;
}

body{
    background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	background:  url("back.png");
	background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

footer{
	padding: 30px;
}

.style-logo{
	margin-left: auto;
	margin-right: auto;
	display: block;
}


.style-nav ul{
	list-style-type: none;
	padding-top: 5px;
}

.style-nav ul li a{
	text-decoration: none;
	color: #85ddf7;
	text-align: center;
	display: block;
	padding:  8px ;
	border: 0px solid #000000 ;
	
	border-radius: 30px;
}
.style-nav a:hover{
	border: 2px solid #85ddf7;
	border-radius: 30px;
	padding: 6px ;
	color: #85ddf7;
}

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear:  both;
}



h1{
	font-size: 40px;
	font-weight : 200;
	margin-bottom: 50px;
		
}

h3{
	font-size: 16px;
	font-weight : 200;
	margin-bottom: 50px;
		
}

p{
	font-size: 14px;
	font-weight : 200;
	margin-bottom: 20px;
	margin-top: 10px;
		
}

p a{
	text-decoration: none;
}

p a:link {
	color: #85ddf7;
}
p a:visited {
	color: #85ddf7;
}
p a:hover {
	color: #85ddf7;
}
p a:active {
	color: #85ddf7;
}




.re-top{padding: 50px 0px 0px}

.re-top a{
	border: 2px #85ddf7 solid;
	padding: 8px 20px;
	border-radius: 30px;
	color:  #85ddf7;
	text-decoration: none;
	transition: 0.7s;
	
}

.re-top a:hover{
  background-color: #85ddf7;
  color: #000000;
	
}
.bottan a{
	border: 2px #85ddf7 solid;
	padding: 8px 20px;
	border-radius: 30px;
	color:  #85ddf7;
	text-decoration: none;
	transition: 0.7s;
	
	
}

.bottan a:hover{
  background-color: #85ddf7;
  color: #000000;
	
}

.outline {
	background-color: rgba(0,0,0,0.70) ;
		border-radius: 0px;
	background-size: cover;
	background-position: center;
	padding: 70px 50px;
	color: #FFFFFF;
	text-align: center;
	border: #000000 solid;
	border-width: 0px ;
}

.outline-con{
	padding-top: 20px;
}





.blue-box {
	background-color:#8f82dc;
	color: #FFFFFF;
	padding: 60px 30px;
	text-align: center;
	border: #000000 solid;
	border-width: 2px 0px;
}




.footer-text{
	font-size: 14px;
	margin-bottom: 20px;
	color: #FFFFFF;
	text-align: center;
}

.col{
	width: 100%;
	}
	.style-nav ul li{
		display: inline-block;
	}
	.style-nav ul{text-align: center;}
	.style-logo{float: left;}
	.style-nav{float: right;}

/*ヒント用*/
.hint-li {  text-decoration: none;
}
.hint-li:hover {
  color: #85ddf7;
}
.hint-waku{
	margin: 0.5em 0em;
	padding: 1em;
border-bottom: 1px solid #fff;
	 border-radius: 0px;
}

.hint-waku2{
	margin: 0.5em 0em;
	padding: 1em;
	border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
	 border-radius: 0px;
}
.hint-waku3{
	margin: 0.5em 0em 0em 0em;
	padding: 1em 1em 0em 1em;
	border: 0px;

}

.hint-common{
	padding-top: 1em;
}

.hint-text{
		text-align: left;
}



/*タブレット用*/
@media (min-width: 780px){
		body{
		max-width: 780px;
	}
	
	.style-nav ul li{
		display: inline-block;
	}
	.style-nav ul{text-align: center;}

	
	.outline {
	border-width: 0px;
	border-radius: 30px;
	}
	.hint {
	border-width: 0px;
	}
	.blue-box {
	border-width: 0px;
	}
	.credit {
	border-width:0px;
	}

	.col-half{
		width: 50%;
	}
	.col{
		float: left;
		padding: 0px 7px 14px;
	}
	.tabs {
  max-width: 600px;}

}



/*デスクトップ用*/
@media (min-width: 1024px){
	body{
		max-width: 1000px;
	}
	.style-logo{float: left;}
	.style-nav{float: right;}
}