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

body{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
.title{
	margin-top:100px;
	margin-bottom:100px;
	width:100%;
	text-align:center;
	color:#ffcfd2;
	}
.titleJapanese{
	font-size:50px;
	width:50%;
	margin-bottom:20px;
	}
.titleEnglish{
	font-size:24px;
	font-weight:lighter;
	font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	}
article {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
	font-weight:lighter;
}
.pic-box{
	margin:50px 0;
	width:100%;
	height:100px;
	overflow:hidden;
	}
.pic1{
	background-image:url(../image/Hirosaki%20Castle.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	width:50%;
	height:100%;
	float:left;
	}
.pic2{
	background-image:url(../image/Chureito%20Pagoda%20and%20Mount%20Fuji.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:120%;
	width:50%;
	height:100%;
	float:left;
	}
.caption{
	margin-top:10%;
	padding-top:5%;
	float:right;
	height:50%;
	width:33.3%;
	color:white;
	text-align:center;
	background-color:rgba(0,0,0,0.48);
	font-size:10px;
	font-weight:lighter;
	}

.food,.things{
	width:60%;
	margin:100px auto;
	height:200px;
	text-align:center;
	color:#db8f8d;
	}

.food .image-box{
	background-image:url(../image/hanami%20food.png);
	background-repeat:no-repeat;
	background-size:100%;
	height:100%;
	}
.things .image-box{
	background-image:url(../image/hanami%20things.png);
	background-repeat:no-repeat;
	background-size:100%;
	height:100%;
	}
	h1{
		font-size:18px;
		}
.botton{
	width:100%;
	}
.botton a{
	text-align:center;
	}
.botton button{
	margin-left:auto;
	margin-right:auto;
	width:100%;
	}
@media screen and (min-width: 480px) {
	.pic-box{
	margin:50px 0;
	width:100%;
	height:150px;
	overflow:hidden;
	}
	.caption{
	margin-top:10%;
	padding-top:5%;
	float:right;
	height:40%;
	width:33.3%;
	color:white;
	text-align:center;
	background-color:rgba(0,0,0,0.48);
	font-size:12px;
	font-weight:lighter;
	}
	.food,.things{
	width:60%;
	margin:100px auto;
	height:300px;
	text-align:center;
	color:#db8f8d;
	}
	.food h1, .things h1{
		font-size:24px;
		}
}
@media screen and (min-width: 760px) {
	.pic-box{
	margin:50px 0;
	width:100%;
	height:250px;
	overflow:hidden;
	}
	.caption{
	margin-top:10%;
	padding-top:5%;
	float:right;
	height:30%;
	width:33.3%;
	color:white;
	text-align:center;
	background-color:rgba(0,0,0,0.48);
	font-size:14px;
	font-weight:lighter;
	}
	.food,.things{
	width:60%;
	margin:100px auto;
	height:500px;
	text-align:center;
	color:#db8f8d;
	}
	 h1{
		font-size:28px;
		}
	
}
@media screen and (min-width: 980px) {
	.pic-box{
	margin:50px 0;
	width:100%;
	height:300px;
	overflow:hidden;
	}
	.caption{
	margin-top:10%;
	padding-top:5%;
	float:right;
	height:20%;
	width:33.3%;
	color:white;
	text-align:center;
	background-color:rgba(0,0,0,0.48);
	font-size:16px;
	font-weight:lighter;
	}
	.food,.things{
	width:60%;
	margin:100px auto;
	height:700px;
	text-align:center;
	color:#db8f8d;
	}
	h1{
		font-size:40px!important;
		}
}