@charset "utf-8";

/***********************************************************************************/
body{ 
    animation: fadeIn 0.8s ease 0s 1 normal;
    -webkit-animation: fadeIn 0.8s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
/***********************************************************************************/

#wrap{max-width:960px;margin:auto;}


/*header
------------------------------------------------*/
	header{
	position:relative;
	padding:30px 0;
	overflow:hidden;
	margin-bottom:20px;
}
	h1{
	font-size:10px;color:#999;margin-bottom:30px;text-align:center;
}

	header .logo{display:block;width:300px;margin:auto;}
	header .logo img{width:100%;}

	header .logo + a{
	position:absolute;
	right:0;
	top:1em;
	font-size:0.8em;
	background-color:#111;
	color:#fff;
	display:block;
	width:1em;
	padding:0.5em;
	line-height:1.1em;
}
	header .logo + a:hover{
	text-decoration:none;		
}
@media screen and (min-width:960px){
	header .logo + a{
	position:absolute;
	right:0;
	top:1em;
	font-size:0.8em;
	text-decoration:underline;
	color:#999;
	background-color:#fff;
	width:auto;
}		
}	

/*nav
------------------------------------------------*/
	nav ul{
	display:flex;
	flex-wrap:wrap;
	border-left:dotted 1px #000;
	border-top:dotted 1px #000;
}
	nav li{
	box-sizing:border-box;
	width:50%;			
	height:60px;
	border-right:dotted 1px #000;
	border-bottom:dotted 1px #000;
}

@media screen and (min-width:768px){
	nav{
	margin-bottom:20px;
}
	nav ul{
	display:flex;
	border-left:dotted 1px #000;
	border-top:none;
}
	nav li{
	flex:1;		
	height:60px;
	border-right:dotted 1px #000;
	border-bottom:none;
}
}
	nav a{
	display:inline-block;
	width:100%;
	height:60px;
	line-height:60px;
	text-align:center;
	vertical-align:middle;
	color:#222;
	font-size:;
	font-weight:bold;
}
	nav a:hover{
	background-color:#eee;
	color:#222;
}


/*top
------------------------------------------------*/
	#top{
	position:relative;
	margin:0 auto 60px;
}
	#top h2{
	margin-bottom:0.5em;	
	font-size:4.6vmin;
	font-weight:bold;
	border-bottom:solid 3px #ccc;	
	background-color:#888;
	color:#fff;
	line-height:100px;
	overflow:hidden;	
	text-align:center;		
}
.top2{font-size:3vmin;}
@media screen and (min-width:480px){
	.top2{font-size:4.6vmin;}
}
	#top h2 img{
	height:100px;
	float:left;
}
	#top p{
	text-align:center;
}
	#top p span{
	font-weight:bold;
}	

/*main
------------------------------------------------*/
	#main{
	max-width:900px;
	margin:0 auto 60px;	
}
	#main h2{
	margin-bottom:1.2em;	
	font-size:1.8em;
	font-weight:bold;
	text-align:center;
	font-family:serif;	
}
	#main p{
	line-height:2em;
	font-size:1.2em;
	text-align:center;	
}


	#side li{	
	margin-bottom:20px;
}
	#side a:hover{
	opacity:0.8;
}

/*main2
------------------------------------------------*/
	#main2{
	float:none;
	overflow:hidden;
	max-width:800px;
	margin:0 auto 100px;
	padding:0 30px;		
}
	#main2 a:hover{color:#b00034;}

/*aside
------------------------------------------------*/
	aside .kotoba{
	clear:both;padding:3em 6em;border:solid 1px #ccc;border-radius:10px;
	background:
	url(../img/corner1.png)left top no-repeat,
	url(../img/corner2.png)right top no-repeat,
	url(../img/corner3.png)left bottom no-repeat,
	url(../img/corner4.png)right bottom no-repeat
	;
	padding:5em 30px;
	margin-bottom:60px;
}
	#aside .kotoba p{
	font-size:2.6vmin;
}


	aside{
	max-width:800px;
	margin:0 auto 100px;	
	padding:3em 0;
}
	aside .kotoba{
	clear:both;
	text-align:center;
	font-size:3.4vmin;
	line-height:2em;
	font-family:serif;
	color:#222;	
}
	aside .kotoba span{
	display:inline-block;
	margin-bottom:1em;
	font-size:3.8vmin;
	font-weight:bold;
}

/*go_top
------------------------------------------------*/
	.go_top{
	display:inline-block;
	position:fixed;
	bottom:5em;
	right:2em;
	font-size:0.8em;
	background:rgba(0,0,0,0.6);
	color:#fff;
	padding:2em 1em ;
	border-radius:10px;
	z-index:10;
}
	.go_top:hover{
	background:rgba(0,0,0,0.4);
}

/*footer
------------------------------------------------*/
	footer .subnav1{
	border-top:dotted 1px #000;
}
	footer .subnav1 li{
	height:40px;
	border-bottom:dotted 1px #000;
}

@media screen and (min-width:768px){
	footer .subnav1{
	display:flex;
	border-left:dotted 1px #000;
	border-top:none;
}
	footer .subnav1 li{
	flex:1;
	height:40px;
	border-right:dotted 1px #000;
	border-bottom:none;
}
}
	footer .subnav1 li a{
	display:block;
	width:100%;
	height:40px;
	line-height:40px;
	text-align:center;
	color:#222;
	font-size:;
}
	footer .subnav1 li a:hover{
	background-color:#eee;
	color:#222;
}

	footer p{overflow:hidden;padding:2em 0;text-align:center;}
	footer p a{display:block;width:300px;margin:auto;}
	footer p a img{width:100%;}
	
	footer .subnav2 {
	display:flex;
	justify-content:center;
	padding:1em 0;
	border-top:dotted 1px #666;
}
	footer .subnav2 li{
	padding:0 1em ;
}	
	footer .subnav2 li:first-child{
	border-right:solid 1px #666;	
}
	footer .subnav2 a:hover{
	text-decoration:underline;	
}
	footer .copy{
	clear:both;
	padding:0.5em;
	text-align:center;
	font-size:0.8em;
	background-color:#888;
	color:#fff;
}
	footer .logo3{
	position:absolute;
	right:0;
	top:30px;
	font-size:0.8em;
	text-decoration:underline;
	color:#999;
}
	footer .logo3:hover{
	text-decoration:none;		
}