@import url('https://fonts.googleapis.com/css?family=Crimson+Text|Josefin+Sans');

$font:'Crimson Text', sans-serif;
$font2:'Josefin Sans', sans-serif;
@mixin flex{
	display: inline-flex;
	display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flex;
    display: -o-inline-flex;
	box-sizing: border-box;
}

@mixin giji{
	position: absolute;
	content:"";
}
@mixin shadow{
	box-shadow:0px 0px 4px 1px #cfcfcf;
	
}
@mixin icon{
	 font-family: "FontAwesome";
			position: absolute;
			content:"\f00e";
			width: 30px;
			height:30px;
			color:#9F9F9F;
	font-size: 16px;
			top:5px;
			left:1px;
			z-index: 99;
		}
body{
	background: #e8fcff;
	letter-spacing: 1.2;
	margin: 0;
	padding: 0;
	text-align: center;
	
}

li{list-style: none;}

@media screen and (min-width:641px) {
	
	.wrapper{
		background: #FFFFFF;
		width: 1200px;
		margin: 0 auto;
		text-align: center;
		@include shadow;
	}
	
	header{
		margin: 0 0 30px;
		img{
			width: 1200px;
			
		}
	}
	
	h1{
		position: relative;
		font-weight: 400;
		display: inline-block;
		background: #e9f6f5;
		padding: 15px 30px;
		/*margin-left: 250px;*/
		margin-bottom: 50px;
		font-family: $font;
		color:#016BCF;
		font-size: 2rem;
		text-align: center;
		.txt{
			margin:5px 0 10px;
			font-size: 14px;
			color:#787777;
			font-weight: normal;
		}
	}
	/*h1:after{
		@include giji;
		background: url(../img/read_item.png) no-repeat;
		width: 310px;
		height: 200px;
		top: -60px;
		left: -250px;
	}*/
	
	h2{
		position: relative;
		font-size: 1.2rem;
		color: #016BCF;
	margin: 50px auto 30px;
	z-index: 999;
		span{background: #fff;
		padding: 10px;
		z-index: 999;}}
	
	h2:after{
		@include giji;
		border-top:1px solid #515050;
		width: 80%;
		bottom:15px;
		left:10%;
		z-index: -1;
	}
	
	.menu_size{
		@include flex;
		width: 600px;
		justify-content: space-between;
		li{width: 140px;
			margin: 5px 20px;
			box-sizing: border-box;
			background: #7ecef4;
			color:#fff;
			font-family: $font;
			font-size: 16px;
			
		}
		.grow{
			width: 200px;
			box-sizing: border-box;
			margin-left: 80px;
			padding: 0;
			}
		/*li:nth-child(2){margin-left:50px;}
		li:nth-child(3){margin-left: 80px;}*/
	}
	
	
	.menu{
		margin-top: 10px;
		@include flex;
		width: 800px;
		justify-content: space-between;
		flex-wrap: wrap;
		li{width: 23%;
		margin-top: 40px;
			.navi{
				margin-top: -5px;
				font-size: 1.2rem;
				font-family: $font2;
			color:#000;}}
		/*li:nth-child(2){margin-right: -20px;}
		li:nth-child(3){margin-left: -20px;}*/
	}
	
	
	.menu2_size{
		@include flex;
		width: 300px;
		justify-content: space-between;
		li{width: 140px;
			margin: 5px 20px;
			box-sizing: border-box;
			background: #7ecef4;
			color:#fff;
			font-family: $font;
			font-size: 16px;
			
		}
	}
	
	.menu2{
		margin-top: 10px;
		@include flex;
		width: 300px;
		justify-content: center;
		li{width: 140px;
			.navi{
				margin-top: -5px;
				font-size: 1.2rem;
				font-family: $font2;
			color:#000;}}
	}
	
	section{margin-top: 50px;}
	
		.title{
			margin-top: 60px;
			margin-left: 50px;
			display: inline-block;
			position: relative;
		font-size: 1.1rem;
		font-family: $font2;
			font-weight: normal;
			.size{margin-top: 10px;
				font-size: 2.8rem;
				line-height: 0.9;
			}
			.doll01{
			@include giji;
			top:-45px;
			left:-120px;
			width: 90px;
			height: 180px;
		}
		}
		
	
	.bg_top1{
		background-image: url(../img/bg.gif) ;
		margin-bottom: -30px;
		}
	.bg_top2{
		background-image: url(../img/bg2.gif) ;
		margin-bottom: -30px;
		}
	.bg_bottom1{
		position: relative;
		transform: scale(-1, -1);
		margin-top:-140px;
		
	}
	.bg_bottom2{
		position: relative;
		transform: scale(-1, -1);
		margin-top:-150px;
		
	}
	
	.bg_blue{
		background: #e0f3fc;
		padding: 50px 0 0;
	}
	
	.bg_green{
		background: #e0fcf4;
		padding: 50px 0 0;
	}
	
	.item4{
		position: relative;
		@include flex;
		z-index: 99;
		justify-content: flex-start;
		width: 800px;
		margin-top: 30px;
		flex-wrap: wrap;
		li{position: relative;
			margin-right: 25px;
			width: 180px;
			img{width: 180px;
			margin-bottom: 5px;}
			a{margin-top: 5px;
				color: #4B4B4B;
			font-size: 14px;}
		}
		
		li:nth-child(4n){margin-right: 0;}
		li:nth-child(n + 5){
			margin-top: 30px;
		}
	}
	
	.item3{
		position: relative;
		@include flex;
		z-index: 99;
		justify-content: flex-start;
		width: 590px;
		margin-top: 30px;
		flex-wrap: wrap;
		li{position: relative;
			margin-right: 25px;
			width: 180px;
			img{width: 180px;
			margin-bottom: 5px;}
			a{margin-top: 5px;
				color: #4B4B4B;
			font-size: 14px;}
		}
		
		li:nth-child(3){margin-right: 0;}
	}
}

@media screen and (max-width:640px) {
	
	.wrapper{
		background: #FFFFFF;
		width: 95%;
		margin: 0 auto;
		text-align: center;
		@include shadow;
	}
	
	header{
		margin: 0 0 30px;
		img{
			width: 100%;
			
		}
	}
	
	h1{
		position: relative;
		font-weight: 400;
		display: inline-block;
		background: #e9f6f5;
		padding: 15px;
	
		margin-bottom: 10px;
		font-family: $font;
		color:#016BCF;
		font-size: 2rem;
		text-align: center;
		.txt{
			margin:5px 0 10px;
			font-size: 14px;
			color:#787777;
			font-weight: normal;
		}
	}
	h1:after{
		display: none;
	}
	
	h2{
		position: relative;
		font-size: 1.2rem;
		color: #016BCF;
	margin: 30px auto 10px;
	z-index: 999;
		span{background: #fff;
		padding: 10px;
		z-index: 999;}}
	
	h2:after{
		@include giji;
		border-top:1px solid #515050;
		width: 100%;
		bottom:15px;
		left:0;
		z-index: -1;
	}
	
	.menu_size{
		@include flex;
		width: 95%;
		justify-content: space-between;
		li{width: 20%;
			margin: 5px 20px;
			box-sizing: border-box;
			background: #7ecef4;
			color:#fff;
			font-family: $font;
			font-size: 16px;
			
		}
		.grow{
			width: 200px;
			box-sizing: border-box;
			margin-left: 80px;
			padding: 0;
			}
		li:nth-child(2){margin-left:20px;}
		li:nth-child(3){margin-left: 10px;}
	}
	
	.menu{
		margin-top: 10px;
		@include flex;
		width: 95%;
		justify-content: space-between;
		flex-wrap: wrap;
		li{width:32%;
		margin-top: 15px;
			.navi{
				margin-top: -5px;
				font-size: 1rem;
				font-family: $font;
			color:#000;}}
		li:nth-child(2){margin-right: -5px;}
		li:nth-child(3){margin-left: 5px;}
		li:nth-child(5){margin-left: 0px;}
		li:nth-child(7){margin-left: 40px;}
		li:nth-child(8){margin-right: 40px;}
	}
	
	.menu2_size{
		@include flex;
		width: 50%;
		justify-content: space-between;
		li{width: 25%;
			margin: 5px 20px;
			box-sizing: border-box;
			background: #7ecef4;
			color:#fff;
			font-family: $font;
			font-size: 16px;
			
		}
	}
	
	.menu2{
		margin-top: 10px;
		@include flex;
		width: 70%;
		justify-content: center;
		li{width: 45%;
		margin: 5px 10px;
			.navi{
				margin-top: -5px;
				font-size: 1rem;
				font-family: $font;
			color:#000;}}
	}

	section{margin-top: 20px;}
	
		.title{
			margin-top: 50px;
			margin-left: 50px;
			display: inline-block;
			position: relative;
			margin-bottom: -50px;
		font-size: 1.1rem;
		font-family: $font2;
			font-weight: normal;
			.size{margin-top: 10px;
				font-size: 1.8rem;
				line-height: 0.9;
			}
			.doll01{
			@include giji;
			top:-25px;
			left:-90px;
			width: 90px;
			height: 180px;
		}
		}
		
	
	.bg_top1{
		background: url(../img/bg.gif)no-repeat;
		margin-bottom: -30px;
		background-size: contain;
		background-color:#e0f3fc;
		}
	.bg_top2{
		background: url(../img/bg2.gif)no-repeat;
		margin-bottom: -30px;
		background-size: contain;
		background-color:#e0fcf4;
		}

	.bg_bottom1{
		position: relative;
		transform: scale(-1, -1);
		margin-top:-50px;
		
	}
	.bg_bottom2{
		position: relative;
		transform: scale(-1, -1);
		margin-top:-30px;
		
	}
	
	.bg_blue{
		background: #e0f3fc;
		padding: 50px 0 0;
	}
	
	.bg_green{
		background: #e0fcf4;
		padding: 50px 0 0;
	}
	
	.item4{
		position: relative;
		@include flex;
		z-index: 999;
		justify-content: space-around;
		width: 98%;
		margin-top: 10px;
		flex-wrap: wrap;
		li{position: relative;
margin-top: 30px;
			width: 49%;
			img{width: 100%;
			margin-bottom: 5px;}
			a{margin-top: 5px;
				color: #4B4B4B;
			font-size: 14px;}
		}
		
		li:nth-child(4){margin-right: 0;}
		
	}
	
	.item3{
		position: relative;
		@include flex;
		z-index: 999;
		justify-content: space-around;
		width: 98%;
		margin-top: 10px;
		flex-wrap: wrap;
		li{position: relative;
			
			width: 49%;
			img{width: 100%;
			margin-bottom: 5px;}
			a{margin-top: 5px;
				color: #4B4B4B;
			font-size: 14px;}
		}
		
		li:nth-child(3){margin-right: 0;}
	}
}