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

body{
	overflow-x: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "Helvetica Neue", "Yu Gothic", YuGothic, "メイリオ", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/*img要素センタリング*/
img {
    display: block;
    margin: 0 auto;
}

/*ヘッダー*/
header{
	padding:40px 0 20px;
	background-color:#000;
	text-align:center;
}

header h1{
	border-bottom:1px solid #FFF;
	width: 900px;
	margin: 0 auto;
	padding-bottom: 26px;
}

main #mainContents{
	position:relative;
	background-color:#000;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

/*インナー要素*/
main #mainContents .inner{
	width:1076px;
	margin:0 auto;
	background-image:url(../img/bg_main.jpg);
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
	padding:54px 0 49px;
}

main #mainContents .inner:before,
main #mainContents .inner:after{
	content:"";
	background-repeat:repeat-y;
	position:absolute;
	width:12px;
	height:100%;
	top:0;
}

main #mainContents .inner:before{
	content:"";
	background-image:url(../img/border_left.gif);
	left:-12px;
}

main #mainContents .inner:after{
	content:"";
	background-image:url(../img/border_right.gif);
	right:-12px;
}

h2{
	width: 750px;
	margin:0 auto 40px;
}

h2 img{
	width: 100%;
}

/*メインビジュアル*/
.mainVisual{
	position:relative;
	width:640px;
	height:390px;
	margin: auto;
}

.mainVisual .driverGroup{
	width: auto;
	margin: auto;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.mainVisual .driverGroup li{
	width: 48%;
}

.mainVisual img{
	width: 100%;
}
	
.mainVisual .name{
	font-size:12px;
	color:#808080;
	position:absolute;
	bottom:0;
	right: 63px;
}

/*テキスト*/
.text01{
	font-size:18px;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	margin:20px 0 36px;
	line-height:1.5em;
}

.text02{
	position:relative;
	font-size:40px;
	color:#3AAE36;
	font-weight:bold;
	text-align:center;
	margin: 20px 0 95px;
	line-height:1.5em;
}

.text02:after{
	content:"";
	background-image:url(../img/icon_arrow.png);
	background-repeat:no-repeat;
	width: 70px;
	height: 40px;
	position: absolute;
	bottom: -66px;
	right: 0;
	left: 0;
	margin: auto;
}

/*ボタングループ*/
.btnList li{
	position:relative;
	color:#3AAE36;
	background-color:#FFF;
	width:640px;
	height:	160px;
	box-sizing:border-box;
	margin:0 auto 50px;
	text-align:center;
}

.btnList li a{
	display:block;
	text-decoration:none;
	font-size:60px;
	text-align:center;
	color:#3AAE36;
	font-weight:bold;
}

.btnList li .text{
	position:relative;
	font-size:60px;
	text-align:center;
	font-weight:bold;
	display:inline-block;
	margin-left: 50px;
	line-height: 1.5;
}

.btnList li:nth-child(3) .text{
	margin-left: 50px;
	display: inline;
}

.btnList li button .text:before,
.btnList li a .text:before{
	content:"";
	background-image:url(../img/icon_at.png);
	background-repeat:no-repeat;
	width: 60px;
	height: 60px;
	position: absolute;
	left: -70px;
	bottom: 0;
	top: 0;
	margin: auto;
}

.btnList li .small{
	display:block;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}


.btnList li:nth-child(1) a{
	padding:35px 0;
}

.btnList li:nth-child(2){
	padding:18px 0;
}

.btnList li:nth-child(3) button{
	padding:27px 0 13px;
	box-sizing:border-box;
	color:#3AAE36;
	cursor:pointer;
}

.btnList li:nth-child(3) button:hover{
	opacity:0.8;
}

.btnList li:nth-child(3) #copyTarget{
	position:absolute;
	left:-5000px;
	background-color:#000 !important;
}

.btnList li:nth-child(3) *{
   -webkit-appearance: none !important;
   	-webkit-appearance:none !important;
	background-color:#FFF !important;
	border: none !important;
	width: 100% !important;
}

.btnList li .text .icon:before{
	content:"a";
	position:absolute;
	left:0;
}

/*リンクボタン*/
.btnWrap{
	display: block;
	border: 1px solid white;
	width: 320px;
	margin: auto;
	box-sizing: border-box;
	padding: 10px 0;
}

/*フッター*/
footer{
	background-color:#000;
	padding: 40px 90px;
	text-align:center;
}

footer .btn{
	display: inline-block;
}

/*改行クラス（PCのみ）*/
.breakLinePCOnly{
	display:block;
}

/*改行クラス（PC）*/
.breakLinePC{
	display:block;
}

/*改行クラス（SP）*/
.breakLineSP{
	display:inline;
}

.onlyPC{
	display:block  !important;
}

.onlySP{
	display:none  !important;
}

/*レスポンシブ用記述*/
/*画面サイズが1150px以下の場合*/
@media screen and (max-width: 1150px) {
	img{
		width:80%;
	}
	
	/*ヘッダー*/
	header{
		padding:30px 0 20px;
	}
	
	header h1{
		width: 180px;
		margin: 0 auto;
		padding-bottom: 16px;
	}

	
	/*インナー要素*/
	main #mainContents .inner{
		width:auto;
		margin:0 auto;
		background-image:url(../img/bg_main.jpg);
		background-position:center top;
		background-size:cover;
		background-repeat:no-repeat;
		position:relative;
		padding:50px;
	}
	
	main #mainContents .inner:before{
		content:"";
		left:0;
	}
	
	main #mainContents .inner:after{
		content:"";
		right:0;
	}
	
	/*メインビジュアル*/
	.mainVisual{
		position:relative;
		width: 80%;
		height: auto;
	}
	
	.mainVisual .name {
		right: -50px;
	}
	
	.btnList li:nth-child(2) img{
		width:60%;
	}
	
	.btnWrap img{
		width:180px;	
	}
	
	.text02{
		font-size:30px;
	}
	
	/*フッター*/
	footer .btn img{
		width:100%;
	}

}


/*レスポンシブ用記述*/
/*画面サイズが960px以下の場合*/
@media screen and (max-width: 960px) {
	h2{
		width: 90%;
		margin:0 auto 30px;
	}
	
	/*タイトル*/
	.titleWrap{
		padding: 20px 0 0;
		margin-bottom:35px;
	}
	
	/*ボタングループ*/
	.btnList li{
		width:80%;
		height:auto;
	}

	/*改行クラス（PCのみ）*/
	.breakLinePCOnly{
		display:inline;
	}
}

/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {
	
	img{
		width:100%;
	}
	
	/*インナー要素*/	
	main #mainContents .inner {
		padding:50px 30px;
	}
	
	.mainVisual {
		position: relative;
		width: 100%;
	}
	
	.mainVisual .name {
		position:relative;
		font-size: 12px;
		right: -40%;
	}
	
	
	/*テキスト*/
	.text01{
		font-size:18px;
		margin:20px 0 36px;
	}
	
	.text02{
		font-size:36px;
		margin: 20px 0 95px;
	}
	
	.text02:after{
		content:"";
		background-size:50%;
		left: 40px;
		bottom: -66px;
	}
	
	/*ボタングループ*/
	.btnList li a{
		font-size:24px;
	}
	
	.btnList li .text{
		font-size:24px;
		margin-left: 35px;
	}
	
	.btnList li button .text:before,
	.btnList li a .text:before{
		content:"";
		background-size:50%;
		left: -40px;
		bottom: -30px;
	}
	
	.btnList li .small{
		font-size: 16px;
		font-weight:bold;
		top: 10px;
		left:0;
		right:0;
	}
	
	.btnList li:nth-child(2){
		display:none;
	}
	
	.btnWrap {
		width:90%;
	}
		
	.btnList li:nth-child(3) .text{
		font-size: 24px;
		margin-left: 20px;
	}
	
	/*フッター*/
	footer{
		padding:30px 20px;
	}
	
	/*改行クラス（PCのみ）*/
	.breakLinePCOnly{
		display:inline;
	}
	
	/*改行クラス（SP）*/
	.breakLineSP{
		display:block;
	}
	
	/*改行クラス（PC）*/
	.breakLinePC{
		display:inline;
	}
	
	.onlyPC{
		display:none !important;
	}
	
	.onlySP{
		display:block  !important;
	}
}

/*画面サイズが680px以下の場合*/
@media screen and (max-width: 680px) {
	
	h2{
		width: 100%;
		margin:0 auto 30px;
	}
	
	/*テキスト*/
	.text01{
		font-size:16px;
	}
}

/*画面サイズが480px以下の場合*/
@media screen and (max-width: 480px) {
	/*ボタングループ*/
	.btnList li{
		width:90%;
		height:auto;
	}
	
	.text02{
		font-size:26px;
		margin: 20px 0 95px;
	}
	
	.mainVisual .name {
		position:relative;
		font-size: 12px;
		right: -35%;
	}
}

/*回り込み解除クラス*/
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}