@charset "UTF-8";

/*
=====================================================================
	青島ハンモック トップページ
=====================================================================
*/



/* ============================================================================================== */
@media print, screen and (min-width:641px) {


/* base
---------------------------------------------------------------------- */
.overlayMenuBtn span {
	position: relative;
	display: block;
	width: 30px;
	border: 1px solid #fff;
	transition: .5s;
	}

/* ----------------------------------------------------------------

header

-----------------------------------------------------------------*/
#header{
	position: fixed;
	z-index:2;
	width:100%;
	}

#menuInner ul li a{
	color:#fff;
	text-decoration:none;
	}

#menuInner ul li a:hover{
	color:#fff;
	text-decoration:underline;
	}


/* ----------------------------------------------------------------

cover

-----------------------------------------------------------------*/
#cover{
	height: 100vh;
	overflow: hidden;
	}

#cover video{
	position: relative;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%,-50%);
	}


/* ----------------------------------------------------------------

contents

-----------------------------------------------------------------*/

/* ======================
greetingWrap
====================== */
#greetingWrap{
	width:960px;
	margin:0 auto 80px;
	display:flex;
	justify-content:space-between;
	}

	#greetingWrap h2{
		font-size:23px;
		margin-top:20px;
		}

	#greetingWrap p{
		width:19%;
		padding-right:20px;
		}

/* ======================
prdWrapper
====================== */
#prdWrapper{
	width:960px;
	margin:0 auto 120px;
	}

	.prdWrap{
		margin-bottom:100px;
		display:flex;
		justify-content:space-between;
		flex-flow: row-reverse;	
		}

		.prdWrap:last-child{
			margin-bottom:0;
			}

	.reverse{
		flex-flow:wrap;
		}

		.prdWrap .prdInfo{
			width:24%;
			}

			.prdWrap .prdInfo .typeWrap{
				border-top:1px solid #9db6c6;
				border-bottom:1px solid #9db6c6;
				padding:20px 0;
				margin-bottom:40px;
				}

			.prdWrap .prdInfo .typeInner{
				display:flex;
				justify-content:space-between;
				margin-bottom:20px;
				}

				.prdWrap .prdInfo .typeInner h3{
					font-size:23px;
					}

				.prdWrap .prdInfo .typeInner h3 span{
					font-size:18px;
					display:block;
					}

				.prdWrap .prdInfo .typeInner .type span{
					font-size:11px;
					color:#9db6c6;
					border:1px solid #9db6c6;
					padding:5px;
					font-family: Helvetica Neue;
					}

			.prdWrap h4{
				font-size:16px;
				font-weight:bold;
				}

			.prdWrap .prdInfo .linkType01{
				margin-top:30px;
				}

		.prdWrap .prdPhoto{
			width:68%;
			}

/* ======================
subMenuTop
====================== */
#subMenuTop{
	width:960px;
	margin:0 auto 70px;
	}

	#subMenuTop ul{
		display:flex;
		justify-content:space-between;
		}

		#subMenuTop ul li{
			width:300px;
			border:1px solid #9db6c6;
			box-sizing: border-box;
			padding:30px;
			}

			#subMenuTop ul li h4{
				margin-bottom:20px;
				 font-size:18px;
				}

				#subMenuTop ul li h4 span{
					font-size:12px;
					}

			#subMenuTop ul li .photo{
				margin-bottom:15px;
				}

/* ======================
subMenuBottom
====================== */
#subMenuBottom{
	width:860px;
	margin:0 auto;
	}

	#subMenuBottom ul{
		display:flex;
		justify-content:space-between;
		}

		#subMenuBottom ul li{
			width:400px;
			}

			#subMenuBottom ul li .photo{
				margin-bottom:15px;
				}
}


/* ============================================================================================== */
@media screen and  (max-width:640px) {

/* base
---------------------------------------------------------------------- */
.overlayMenuBtn span {
	position: relative;
	display: block;
	width: 30px;
	border: 1px solid #fff;
	transition: .5s;
	}

/* ----------------------------------------------------------------

header

-----------------------------------------------------------------*/
#header{	
	width:100%;
	background:#326291;
	padding-bottom:25px;
	}

#menuInner ul li a{
	color:#fff;
	text-decoration:none;
	}

#menuInner ul li a:hover{
	color:#fff;
	text-decoration:underline;
	}

/* ----------------------------------------------------------------

cover

-----------------------------------------------------------------*/
#cover{
	line-height: 100%;
	display:flex;
	align-items: end;
	}

#cover video{
	width:100%;
	}

/* ----------------------------------------------------------------

contents

-----------------------------------------------------------------*/
/* ======================
greetingWrap
====================== */
#greetingWrap{
	width:90%;
	margin:0 auto 60px;
	}

	#greetingWrap h2{
		font-size:１６px;
		margin-bottom:20px;
		}

#prdWrapper{
	width:90%;
	margin:0 auto 80px;
	}

	.prdWrap{
		margin-bottom:100px;
		}

		.prdWrap:last-child{
			margin-bottom:0;
			}

	

		.prdWrap .prdInfo{
			margin-bottom:30px;
			}

			.prdWrap .prdInfo .typeWrap{
				border-bottom:1px solid #9db6c6;
				padding:0 0 20px;
				margin-bottom:40px;
				}

			.prdWrap .prdInfo .typeInner{
				display:flex;
				justify-content:space-between;
				margin-bottom:20px;
				}

				.prdWrap .prdInfo .typeInner h3{
					font-size:23px;
					}

				.prdWrap .prdInfo .typeInner h3 span{
					font-size:18px;
					display:block;
					}

				.prdWrap .prdInfo .typeInner .type span{
					font-size:11px;
					color:#9db6c6;
					border:1px solid #9db6c6;
					padding:5px;
					font-family: Helvetica Neue;
					}

			.prdWrap h4{
				font-size:16px;
				font-weight:bold;
				}

			.prdWrap .prdInfo .linkType01{
				margin-top:30px;
				}

		.prdWrap .prdPhoto{
			margin-bottom:20px;
			}

/* ======================
subMenuTop
====================== */
#subMenuTop{
	width:90%;
	margin:0 auto;
	}

	#subMenuTop ul{
		
		}

		#subMenuTop ul li{
			width:100%;
			border:1px solid #9db6c6;
			box-sizing: border-box;
			padding:29px;
			margin-bottom:20px;
			}

			#subMenuTop ul li h4{
				margin-bottom:15px;
				 font-size:15px;
				}

				#subMenuTop ul li h4 span{
					font-size:12px;
					}

			#subMenuTop ul li .photo{
				margin-bottom:10px;
				}

/* ======================
subMenuBottom
====================== */
#subMenuBottom{
	width:90%;
	margin:0 auto;
	}

	#subMenuBottom ul{
		
		}

		#subMenuBottom ul li{
			width:100%;
			margin-bottom:30px;
			}

			#subMenuBottom ul li .photo{
				margin-bottom:15px;
				}















}