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

header{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 999;
}

#mainImg{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
#mainImg p{
	font-size: 24px;
	line-height: 1.8;
	color:#23375a;
	position: absolute;
	left: 8%;
	bottom: 10%;
	z-index: 10;
}
#mainImg p strong{
	font-size: 46px;
	font-weight: normal;
	background: #fff;
	padding: 10px;
}
#mainImg ul{
	position: relative;
	z-index: 1;
	width: 83.3%;
	font-size: 0;
}
#mainImg img{
	width: 100%;
	height: auto;
}

#blogBnr{
	display: flex;
	margin-top: 60px;
	margin-bottom: 90px;
}
#blogBnr #blog{
	flex: auto;
	padding-right: 30px;
}
#blogBnr #blog h2{
	font-size: 36px;
	text-align: center;
	margin-bottom: 40px;
	background: url(/parts/common/img/ttl.png) center top no-repeat;
	background-size: 42px;
	padding-top: 25px;
}
#blogBnr #blog dl{
	display: flex;
	padding: 0 30px;
	padding-bottom: 12px;
	box-sizing: border-box;
	margin-top: 30px;
	border-bottom: dotted 1px #d9d5d3;
}
#blogBnr #blog dd{
	padding-right: 60px;
	text-align: center;
}
#blogBnr #bnr{
	font-size: 0;
}
#blogBnr #bnr li{
	margin-bottom: 10px;
}

#secondImg{
	position: relative;
	transform:skew(-0deg,-4deg);
	height: 200px;
	margin: 3vw 0;
	overflow: hidden;
}
#secondImg div{
	position:absolute;
	top:-150%;
	left: 0;
	background: url(/parts/top/img/secondImgBg.jpg) center center no-repeat;
	background-attachment:fixed;
	background-size: cover;
	transform:skew(-0deg,4deg);
	height: 100vh;
	width: 100%;
}
#secondImg img{
	display: none;
}

#cntAbout{
	display: flex;
	padding: 60px 30px 90px 30px;
}
#cntAbout div img{
	width: 390px;
	height: auto;
}
#cntAbout section{
	padding-left: 30px;
}
#cntAbout section h2{
	font-size: 32px;
	margin-bottom: 30px;
}
#cntAbout section .btn{
	justify-content: flex-start;
}
#cntAbout section .btn:first-child{
	margin-left: 0;
}

#contMainMenu{
	max-width: 100%;
	padding: 60px 6%;
	background: url(/parts/common/img/stripeBg.png) center top #f8f5f2;
}
#contMainMenu section{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	margin-bottom: 90px;
}
#contMainMenu section:last-child{
	margin-bottom: 30px;
}
#contMainMenu section > img{
	order: 1;
	z-index: 1;
	width: 50vw;
	height: auto;
	display: block;
}
#contMainMenu section > div{
	order: 0;
	z-index: 2;
	margin-right: -60px;
	margin-bottom: -30px;
}
#contMainMenu section:nth-child(even){
	align-items: flex-end;
	justify-content: flex-start;
}
#contMainMenu section:nth-child(even) > img{
	order: 0;
	z-index: 1;
}
#contMainMenu section:nth-child(even) > div{
	order: 1;
	z-index: 2;
	margin-right: 0;
	margin-left: -60px;
}
#contMainMenu section > div > div{
	background: rgba(255,255,255,0.8);
	padding: 3vw 5vw;
	transition: all  0.3s ease;
}
#contMainMenu section > div > div:hover{
	background: rgba(255,255,255,0.95);
	box-shadow: 2px 2px 15px rgba(150,150,150,0.1);
}

@media screen and (max-width: 750px) {
	#mainImg p{
		font-size: 4vw;
		line-height: 1.8;
		left: 8%;
		bottom: 10%;
	}
#mainImg p strong{
	font-size: 7vw;
	font-weight: normal;
	background: #fff;
	padding: 1vw;
}
#mainImg ul{
	position: relative;
	z-index: 1;
	width: 83.3%;
	font-size: 0;
}
	#mainImg ul li{
		height: 70vh;
		min-height: 400px;
		overflow: hidden;
		position: relative;
	}
	#mainImg img{
		width: auto;
		height: 120%;
		position: relative;
		left: -50%;
		margin-left: 0;
		margin-top: -10vh;
	}

	#blogBnr{
		display: block;
		margin-top: 12vw;
		margin-bottom: 18vw;
	}
	#blogBnr #blog{
		padding-right: 0;
		margin-bottom: 15vw;
	}
	#blogBnr #blog h2{
		font-size: 7vw;
		margin-bottom: 8vw;
		background-size: 10vw;
		padding-top: 5vw;
	}
	#blogBnr #blog dl{
		display: flex;
		padding: 0 3vw;
		padding-bottom: 2vw;
		margin-top: 6vw;
	}
	#blogBnr #blog dd{
		padding-right: 3vw;
	}
	#blogBnr #bnr ul{
		padding: 0 3vw;
	}
	#blogBnr #bnr li{
		margin-bottom: 2.5vw;
	}
	#blogBnr #bnr li img{
		width: 100%;
		height: auto;
	}

	#secondImg{
		position: relative;
		transform:skew(0deg);
		height: auto;
		margin: 0;
		overflow:visible;
	}
	#secondImg img{
		display: block;
		width: 100%;
		height: auto;
	}
	#secondImg div{
		position:relative;
		top:0;
		background: none;
		transform:skew(0deg);
		height: auto;
		overflow: hidden;
	}

	#cntAbout{
		display: block;
		margin: 12vw 0 18vw;
		padding: 0 3vw;
	}
	#cntAbout div img{
		width: 96%;
		height: auto;
		margin-left: 4%;
	}
	#cntAbout section{
		padding-left: 0;
	}
	#cntAbout section h2{
		font-size: 7vw;
		margin-bottom: 8vw;
	}
	#cntAbout section .btn{
		justify-content: flex-start;
	}
	#cntAbout section .btn:first-child{
		margin-left: 0;
	}

	#contMainMenu{
		margin: 12vw 0 18vw 0;
		padding: 12vw 3vw 15vw;
	}
	#contMainMenu section{
		display: block;
		margin-bottom: 3vw;
	}
	#contMainMenu section:last-child{
		margin-bottom: 3vw;
	}
	#contMainMenu section > img{
		width: 100%;
		height: auto;
	}
	#contMainMenu section > div{
		margin-right: 0;
		margin-bottom: 0;
	}
	#contMainMenu section:nth-child(even) > div{
		margin-left: 0;
	}
	#contMainMenu section > div > div{
		background: rgba(255,255,255,0.9);
		padding: 8vw;
		text-align: center;
	}






}