@charset "utf-8";
/*
Theme Name: Genova Template
File: top.css
Theme Author: Genova Design
Author URI: https://genova.co.jp/
Description: Description: This file is reserved for the top-page css
Version: 1.0
*/

/*--------------------------------------
	mainimage
--------------------------------------*/

#mainimage img {
	width: 100%;
}

.main_contents {
	background: none;
	width: 100%;
	height: auto;
	min-height: inherit;
	position: relative;
}

#mainimage {
	z-index: 1;
	position: relative;
}
#mainimage:before{
	content: '';
	background-image: url('../img/top/top_left.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 22.0vw;
	height: 6.1vw;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
#mainimage:after{
	content: '';
	background-image: url('../img/top/bottom_right.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 22.0vw;
	height: 6.1vw;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
}
#mainimage .inner{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 4.5vw;
}
#mainimage .inner:before{
	content: '';
	background-image: url('../img/top/key_top_right.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 36.8vw;
	height: 15.0vw;
	position: absolute;
	right: 0;
	top: -5.9vw;
	z-index: 1;
}
#mainimage .inner:after{
	content: '';
	background-image: url('../img/top/key_pattern2.jpg');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 10.5vw;
	height: 10.5vw;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}
#mainimage .col-left{
	width: 52.2vw;
	position: relative;
}
#mainimage .col-left:before{
	content: '';
	background-image: url('../img/top/key_deco1.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 3.2vw;
	height: 3.3vw;
	position: absolute;
	right: -3.7vw;
	top: 4.6vw;
	z-index: 1;
}
#mainimage .col-left:after{
	content: '';
	background-image: url('../img/top/key_deco2.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 3.3vw;
	height: 3.3vw;
	position: absolute;
	right: -1.8vw;
	bottom: -2.0vw;
	z-index: 1;
}
#mainimage .col-left .eng{
	width: 32.7vw;
	position: absolute;
	bottom: -4.8vw;
	left: 6.1vw;
	z-index: 1;
}
#mainimage .col-left .img1{
	position: relative;
	z-index: 0;
}
#mainimage .col-left .img1:before{
	content: '';
	width: 41.0vw;
	height: 20.5vw;
	background-image: url('../img/top/key_pattern1.jpg');
	background-size: cover;
	position: absolute;
	left: 0;
	bottom: -9.3vw;
	z-index: -1;
}
#mainimage .col-left .img1:after{
	content: '';
	background: #FCEEF0;
	position: absolute;
	left: 2.3vw;
	right: -2.1vw;
	top: 2.3vw;
	bottom: -2.3vw;
	z-index: -2;
}
#mainimage .col-right{
	width: 43.3vw;
	padding-top: 8.6vw;
	position: relative;
}
#mainimage .col-right:before{
	content: '';
	background-image: url('../img/top/key_deco3.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 3.3vw;
	height: 3.3vw;
	position: absolute;
	left: 29.1vw;
	top: 2.2vw;
	z-index: 1;
}
#mainimage .col-right:after{
	content: '';
	background-image: url('../img/top/key_deco4.png');
	background-repeat: no-repeat;
	background-size: 100%;
	width: 3.2vw;
	height: 3.3vw;
	position: absolute;
	left: 33.9vw;
	top: 22.2vw;
	z-index: 1;
}
#mainimage .col-right .text-group{
	display: table;
	margin-bottom: 5.3vw;
	text-align: center;
}
#mainimage .col-right .ttl{
	display: table;
	font-size: 1.8vw;
	line-height: 3.8vw;
	margin: 0 auto 1.2vw;
	padding-bottom: 0.7vw;
	background: url('../img/top/key_ttl_deco.png') no-repeat left bottom;
	background-size: auto;
}
#mainimage .col-right .ttl .fz36{
	font-size: 2.6vw;
}
#mainimage .col-right .ttl .fz48{
	font-size: 3.5vw;
	line-height: 5.1vw;
}
#mainimage .col-right .txt{
	font-size: 1.5vw;
	line-height: 2.1vw;
}
#mainimage .col-right .img2{
	width: 28.1vw;
	position: relative;
	z-index: 0;
}
#mainimage .col-right .img2:before{
	content: '';
	background: #FCEEF0;
	position: absolute;
	left: 2.3vw;
	right: -2.3vw;
	top: -2.3vw;
	bottom: 2.3vw;
	z-index: -1;
}
#mainimage .col-right .img3{
	width: 11.7vw;
	position: absolute;
	top: 0;
	left: 16.4vw;
	z-index: 0;
}
#mainimage .col-right .img3:before{
	content: '';
	background: #FCEEF0;
	position: absolute;
	left: -2.3vw;
	right: 2.3vw;
	top: -2.3vw;
	bottom: 2.3vw;
	z-index: -1;
}
@media screen and (max-width:767px) {
	#mainimage:after,
	#mainimage:before{
		width: 50vw;
		height: 14.1vw;
	}
	#mainimage .inner{
		padding-top: 6.9vw;
		display: block;
	}
	#mainimage .inner:before{
		width: 51.5vw;
		height: 21.0vw;
		top: -5.4vw;
	}
	#mainimage .inner:after{
		width: 36.7vw;
		height: 36.7vw;
		z-index: -1;
	}
	#mainimage .col-left{
		width: 100%;
	}
	#mainimage .col-left:before{
		width: 11.5vw;
		height: 11.5vw;
		top: -4.4vw;
		right: 5.1vw;
	}
	#mainimage .col-left:after{
		width: 7.7vw;
		height: 7.7vw;
		top: 78.5vw;
		right: 3.8vw;
		bottom: auto;
	}
	#mainimage .col-left .img1{
		width: 92.3vw
	}
	#mainimage .col-left .img1:before{
		width: 92.3vw;
		height: 46.2vw;
		bottom: -9.7vw;
		z-index: -2;
	}
	#mainimage .col-left .img1:after{
		left: 4.6vw;
		right: -4.6vw;
		top: 4.6vw;
		bottom: -4.6vw;
		z-index: -1;
	}
	#mainimage .col-left .eng{
		width: 70.5vw;
		bottom: -9.0vw;
		left: 7.7vw;
	}
	#mainimage .col-right{
		width: 100%;
		padding: 10.5vw 0 15.4vw;
		background: url('../img/top/key_bg_sp.jpg') no-repeat center bottom;
		background-size: 100%;
	}
	#mainimage .col-right:before{
		width: 11.5vw;
		height: 11.5vw;
		top: auto;
		bottom: 35.9vw;
		right: 8.2vw;
		left: auto;
	}
	#mainimage .col-right:after{
		width: 5.6vw;
		height: 5.6vw;
		left: 3.6vw;
		top: -11.3vw;
	}
	#mainimage .col-right .text-group{
		display: block;
		margin-bottom: 5.9vw;
	}
	#mainimage .col-right .ttl{
		font-size: 5.1vw;
		line-height: 9.0vw;
		padding-bottom: 0.8vw;
		background-size: 39.2vw;
		margin-bottom: 2.1vw;
	}
	#mainimage .col-right .ttl .fz36{
		font-size: 6.2vw;
	}
	#mainimage .col-right .ttl .fz48{
		font-size: 10.3vw;
		line-height: 14.9vw;
	}
	#mainimage .col-right .txt{
		font-size: 4.1vw;
		line-height: 5.9vw;
	}
	#mainimage .col-right .img2{
		width: 70.5vw;
	}
	#mainimage .col-right .img2:before{
		left: 5.1vw;
		right: -5.1vw;
		top: 5.1vw;
		bottom: -5.1vw;
	}
	#mainimage .col-right .img3{
		width: 30.8vw;
		top: auto;
		bottom: 10.5vw;
		left: auto;
		right: 7.7vw;
	}
	#mainimage .col-right .img3:before{
		right: -7.7vw;
		bottom: 5.1vw;
		top: -5.1vw;
		left: 11.5vw;
	}
}