/*********************************************/	
@charset "utf-8";
/*********************************************/	

/*==================================================
header
==================================================*/
header{
	overflow:hidden;
}

	header > div{
		display:block;
		width:50%;
		float:left;
	}
	
	header > div:first-child{
		height:100vh;
		background-image:url(../img/header_1.png);
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
	}
	
	header > div:last-child{
		height:100vh;
		background-image:url(../img/header_2.png);
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		text-indent:100%;
		white-space:nowrap;
		overflow:hidden;
	}


@media screen and (min-width:1940px) {
	header div:last-child{
		width:960px;
		margin:0 0 0 calc(25% - 480px);
	}
}

@media screen and (max-width:960px) {
	header > div:first-child{
		/*width:100%;*/
		display:none;
	}
	header div:last-child{
		background-image:url(../img/header_3.png);
		background-repeat:no-repeat;
		width:100%;
		height:auto;
		line-height:0;
		margin:20px 0 0 0;
	}
		header div:last-child::after{
			content:'';
			display:block;
			padding-top:100%;
		}
}

/*==================================================
div#pic_1
==================================================*/
div#pic_1{
	background-image:url(../img/index_pic_1.png);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	overflow:hidden;
}

	div#pic_1 h2,
	div#pic_1 h3,
	div#pic_1 div{
		position:absolute;
	}
	
	div#pic_1 h2{
		right:5%;
		top:65%;
		text-align:right;
		font-size:2.25em;
		letter-spacing:0.15em;
	}
	
	div#pic_1 h3{
		right:5%;
		top:calc(65% + 90px);
		text-align:right;
		font-size:1.5em;
		letter-spacing:0.2em;
	}
	
		div#pic_1 h3 br.pc{
			display:none;
		}
	
	div#pic_1 div{
		max-width:870px;
		right:5%;
		top:calc(65% + 150px);
	}
	
	div#pic_1 p{
		font-size:1.0em;
		font-weight:bold;
		letter-spacing:0.25em;
	}
	
div#pic_1::after{
	content:'';
	display:block;
	padding-top:54.16%;
}

@media screen and (max-width:1390px) {
	div#pic_1 h2{
		top:60%;
		font-size:1.75em;
	}
	
	div#pic_1 h3{
		top:calc(60% + 60px);
		font-size:1.25em;
	}
	
		div#pic_1 h3 br.pc{
			display:none;
		}
	
	div#pic_1 div{
		top:calc(60% + 100px);
	}
}
@media screen and (max-width:960px) {
	div#pic_1{
		margin:40px auto 0 auto;
		background-size:contain;
		background-position:center top;
		background-repeat:no-repeat;
		padding-top:54.16%;
	}
	
	div#pic_1 h2,
	div#pic_1 h3,
	div#pic_1 div{
		position:relative;
		right:auto;
	}
	
	div#pic_1::after{
		display:none;
	}
	
	div#pic_1 h2{
		margin:60px 20px 0 0;
	}
	
	div#pic_1 h3{
		margin:30px 20px 0 0;
	}
	
	div#pic_1 div{
		margin:30px 0 0 0;
		padding:0 20px 60px 20px;
	}
	
	div#pic_1 p{
		text-indent:1em;
		margin:20px 0;
	}
	
	
	div#pic_1 p br.pc{
		display:none;
	}
}

@media screen and (max-width:550px) {
	div#pic_1 h3{
		font-size:1.15em;
	}
	
		div#pic_1 h3 br.pc{
			display:inline-block;
		}
		
	div#pic_1 p{
		line-height:1.75em;
	}
}


/*==================================================
div#pic_2
==================================================*/
div#pic_2{
//	background-image:url(../img/index_pic_2.png);
	background-size:56.25% auto;
	background-position:right top;
	background-repeat:no-repeat;
	position:relative;
	overflow:hidden;
}

div#pic_2::after{
	content:'';
	display:block;
	padding-top:25%;
}

	div#pic_2 p{
		position:absolute;
		top:calc(50% - 2.25em);
		width:43.75%;
		font-weight:bold;
		font-size:1.1em;
		letter-spacing:0.2em;
		text-align:center;
		line-height:2.25em;
	}
	
	
		
		div#pic_2 > p a{
			display:block;
			margin: 40px auto 0 auto;
			border:1px #000 solid;
			max-width:300px;
			text-align:center;
			line-height:60px;
			color:#000;
			text-decoration:none;
			letter-spacing:0.15em;
		}
		
		div#pic_2 > p a:hover{
			text-decoration:underline;
		}
	
	
	
	
@media screen and (max-width:1080px) {
	div#pic_2 p{
		font-size:1.0em;
	}
}

@media screen and (max-width:960px) {
	div#pic_2{
		padding:43.75% 0 0 0;
		width:100%;
		background-size:contain;
	}
	
	div#pic_2::after{
		display:none;
	}

		div#pic_2 p{
			position:relative;
			width:calc(100% - 40px);
			margin:60px auto;
			padding:0 20px;
		}
		
		div#pic_2 p br.pc{
			display:none;
		}
}


/*==================================================
div#pic_3
==================================================*/
div#pic_3{
	background-image:url(../img/index_pic_3.png);
	background-size:56.25% auto;
	background-position:left top;
	background-repeat:no-repeat;
	position:relative;
	overflow:hidden;
}

div#pic_3::after{
	content:'';
	display:block;
	padding-top:25%;
}

	div#pic_3 > div{
		position:absolute;
		top:calc(50% - 140px);
		right:0;
		width:calc(43.75% - 120px);
		padding:0 60px;
	}
	
		div#pic_3 > div p{
			font-weight:bold;
			font-size:1.1em;
			letter-spacing:0.2em;
			line-height:2.25em;
		}
		
		div#pic_3 > div div.hr{
			width:120px;
			margin:20px 0 40px 0;
			height:0px;
			/*
			border-width:1px 0 0 0;
			border-color:#000;
			border-style:solid;
			*/
		}
		
		div#pic_3 > div a{
			display:block;
			margin:40px 0 0 0;
			border:1px #000 solid;
			max-width:300px;
			text-align:center;
			line-height:60px;
			color:#000;
			text-decoration:none;
			letter-spacing:0.15em;
		}
		
		div#pic_3 > div a:hover{
			text-decoration:underline;
		}

@media screen and (max-width:1200px) {
	div#pic_3 > div{
		top:calc(50% - 100px);
		width:calc(43.75% - 40px);
		padding:0 20px;
	}
	
		div#pic_3 > div p{
			font-size:1.0em;
		}
	
		div#pic_3 > div div.hr{
			margin:10px 0 15px 0;
		}
		
		div#pic_3 > div a{
			margin:15px 0 0 0;
			line-height:50px;
		}
}

@media screen and (max-width:960px) {
	div#pic_3{
		padding:43.75% 0 0 0;
		width:100%;
		background-size:contain;
	}
	
	div#pic_3::after{
		display:none;
	}

		div#pic_3 > div{
			position:relative;
			width:calc(100% - 40px);
			margin:60px auto;
			padding:0 20px;
		}
		
		div#pic_3 > div div.hr{
			margin:20px 0 40px 0;
		}
		
		div#pic_3 > div a{
			margin:40px auto;
			line-height:60px;
		}
		
		div#pic_3 p br.pc{
			display:none;
		}
}

/*==================================================
div#pic_4
==================================================*/
div#pic_4{
	background-image:url(../img/index_pic_4.png);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	min-height:200px;
}

div#pic_4::after{
	content:'';
	display:block;
	padding-top:25%;
}


/*==================================================
article#news
==================================================*/
article#news h2{
	text-align:center;
	margin:60px auto 0 auto;
	height:120px;
	background-image:url(../img/news.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

article#news dl{
	max-width:1080px;
	margin:0 auto;
	overflow:hidden;
	border-bottom:1px #c9c9c9 solid;
}

	article#news dl dt{
		width:173px;
		float:left;
		padding:27px 0 27px 27px;
		letter-spacing:0.1em;
	}
	
	article#news dl dd{
		width:calc(100% - 200px);
		float:left;
		padding:27px 0;
		letter-spacing:0.1em;
	}
	
	article#news > a{
		display:block;
		margin:60px auto;
		border:1px #000 solid;
		max-width:300px;
		text-align:center;
		line-height:60px;
		color:#000;
		text-decoration:none;
		letter-spacing:0.15em;
	}
	
	article#news > a:hover{
		text-decoration:underline;
	}
	
@media screen and (max-width:700px) {
article#news dl{
	padding:15px 0;
}

	article#news dl dt,
	article#news dl dd{
		width:calc(100% - 40px);
		padding:5px 20px;
	}
}
/*==================================================
div#pic_5
==================================================*/
div#pic_5{
	background-image:url(../img/index_pic_5.png);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	min-height:200px;
}

div#pic_5::after{
	content:'';
	display:block;
	padding-top:25%;
}


/*==================================================
article#gallery
==================================================*/
article#gallery h2{
	text-align:center;
	margin:60px auto 0 auto;
	height:120px;
	background-image:url(../img/gallery.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

article#gallery ul{
	max-width:1680px;
	margin:0 auto;
	overflow:hidden;
}

	article#gallery ul li{
		float:left;
		width:calc(100% - 60px);
		max-width:360px;
		letter-spacing:normal;
		margin:30px;
	}
	
		article#gallery ul li a{
			display:block;
			width:100%;
			background-size:cover;
			background-position:center;
			background-repeat:no-repeat;
		}
		
			article#gallery ul li a::after{
				content:'';
				display:block;
				padding-top:100%;
			}
			
	article#gallery > a{
		display:block;
		margin:60px auto;
		border:1px #000 solid;
		max-width:300px;
		text-align:center;
		line-height:60px;
		color:#000;
		text-decoration:none;
		letter-spacing:0.15em;
	}
	
	article#gallery > a:hover{
		text-decoration:underline;
	}

@media screen and (max-width:1680px) {
	article#gallery ul{
		width:1260px;
	}
}
@media screen and (max-width:1260px) {
	article#gallery ul{
		width:840px;
	}
}
@media screen and (max-width:840px) {
	article#gallery ul{
		width:420px;
	}
}
@media screen and (max-width:420px) {
	article#gallery ul{
		width:100%;
	}
}

/*==================================================
article#access
==================================================*/
article#access h2{
	text-align:center;
	margin:60px auto 0 auto;
	height:120px;
	background-image:url(../img/access.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

div#access_box{
	overflow:hidden;
	max-width:1080px;
	margin:40px auto 80px auto;
}

div#access_left,
div#access_right{
	width:50%;
	float:left;
}

	div#access_left div#map_canvas{
		width:calc(100% - 40px);
		height:300px;
		margin:20px;
	}

div#access_right img{
	width:calc(100% - 40px);
	margin:20px;
}


@media screen and (max-width:960px) {
div#access_left,
div#access_right{
	width:100%;
	float:none;
}

	div#access_left div#map_canvas{
		height:400px;
		margin:20px;
	}
}

/*==================================================
article#profile
==================================================*/
article#profile{
	background-color:#e7e2dd;
	padding:80px 0;
}

	article#profile > div{
		max-width:1200px;
		margin:0 auto;
		overflow:hidden;
	}
	
		article#profile > div div#shop_box,
		article#profile > div div#profile_box{
			overflow:hidden;
			width:50%;
			float:left;
		}

div#shop_box{
	background-image:url(../img/shop_header.png);
	background-size:60% auto;
	background-position:right top;
	background-repeat:no-repeat;
}

	div#shop_box > div:last-child{
		width:60%;
		float:left;
		margin:100px 0 0 0;
	}

		div#shop_box > div:last-child p{
			display:block;
			margin:20px 0 20px 10px;
			letter-spacing:0.1em;
		}
		
			div#shop_box > div:last-child p br.pc{
				display:block;
			}
	
	div#shop_box > div:first-child{
		width:40%;
		float:left;
		text-align:center;
	}

		div#shop_box > div:first-child img{
			width:calc(100% - 20px);
			max-width:220px;
			margin:20px 0 0 0;
		}
	

div#profile_box{
	background-image:url(../img/profile.png);
	background-size:60% auto;
	background-position:right top;
	background-repeat:no-repeat;
}

	div#profile_box > div:last-child{
		width:60%;
		float:left;
		margin:100px 0 0 0;
	}

		div#profile_box > div:last-child p{
			display:block;
			margin:5px 0 5px 10px;
		}
		
		div#profile_box > div:last-child span{
			display:block;
			font-size:2.0em;
			letter-spacing:0.5em;
			margin:0 0 0 10px;
		}
	
		div#profile_box > div:last-child span.rubi{
			font-size:1.1em;
			color:#666666;
			margin:0  0 40px 10px;
			letter-spacing:0.15em;
			text-indent:3px;
		}
	
	div#profile_box > div:first-child{
		width:40%;
		float:left;
		text-align:center;
	}
	
		div#profile_box > div:first-child img{
			width:calc(100% - 20px);
			max-width:220px;
			margin:20px 0 0 0;
		}

@media screen and (max-width:1220px) {
article#profile > div div#shop_box,
article#profile > div div#profile_box{
	width:100%;
	float:none;
	
	background-size:auto 120px;
	background-position:calc(40% + 220px) top;
	margin:40px auto;
}

			div#shop_box > div:last-child p br.pc{
				display:none;
			}
}

@media screen and (max-width:800px) {
article#profile > div div#shop_box,
article#profile > div div#profile_box{
	background-position:calc(40% + 120px) top;
}
}

@media screen and (max-width:700px) {
article#profile > div div#shop_box,
article#profile > div div#profile_box{
	background-position:center top;
}

	div#shop_box > div:first-child,
	div#shop_box > div:last-child,
	div#profile_box > div:first-child,
	div#profile_box > div:last-child{
		width:100%;
		float:none;
	}
	
	div#shop_box > div:first-child,
	div#profile_box > div:first-child{
		margin:100px 0 0 0;
	}
	
	div#shop_box > div:last-child,
	div#profile_box > div:last-child{
		margin:20px 0 0 0;
	}
	
		div#shop_box > div:first-child img{
			max-width:calc(100% - 20px);
		}
		
		div#shop_box > div:last-child p{
			margin:20px;
		}
		
		div#profile_box > div:last-child p{
			margin:10px 20px;
		}
		
		div#profile_box > div:last-child p:first-child{
			text-align:center;
		}
		
		
		div#profile_box > div:last-child span{
			display:block;
			font-size:2.0em;
			letter-spacing:0.5em;
			margin:10px 20px 0 20px;
			text-align:center;
			text-indent:0.5em;
		}
	
		div#profile_box > div:last-child span.rubi{
			font-size:1.1em;
			color:#666666;
			margin:0  20px 40px 20px;
			letter-spacing:0.15em;
			text-indent:3px;
			text-align:center;
		}
}