@charset "utf-8";

html,
body {
		margin: 0;
		padding: 0;
}


/* #confirm
----- ----- ----- ----- ----- ----- ----- ----- */
#confirm,
#sorry {
		width: 960px;
		margin: 100px auto;
		color: #333;
		font-size: 87.5%;
		font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Verdana, "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
#confirm p,
#sorry p {
	margin-top: 1em;
	margin-bottom: 1em;
}
#confirm #question {
		text-align: center;
}
#confirm #question p {
		font-weight: bold;
}
#confirm #question input {
		margin: 0 10px;
		padding: 5px 10px;
}
#sorry {
		display: none;
}

@media screen and (max-width: 768px) {
		#confirm,
		#sorry {
				width: 100%;
				margin: 70px auto;
		}
		#confirm p,
		#sorry p {
				padding: 0 20px;
		}
		#contents {
				min-width: 100%;
				max-width: 100%;
				width: 100%;
				text-align: center;
		}
		#contents img {
				width: 100%;
		}
}


/* basic
----- ----- ----- ----- ----- ----- ----- ----- */
#wrapper{
	display: none;
	width: 100%;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	#wrapper{
		display: none;
		width: 100%;
		margin: 0 auto;
	}
	#wrapper img{
		max-width: 100%;
	}
}

#header{
	margin-bottom: 120px;
	background: #f2f2f2;
	text-align: center;
}
#header h1.pc{
	width: 100%;
	aspect-ratio: 1920 / 570;
	background: url(img/header_pc.png) center top no-repeat;
	background-size: cover;
	text-indent: -9987em;
}
#header h1.sp{display: none;}
@media screen and (max-width: 768px) {
	#header h1.pc{display: none;}
	#header h1.sp{display: block;}
}

.sec{
	text-align: center;
}
.sec02{
	padding-bottom: 90px;
	background: url(img/sec02_bg.png) repeat;
}
@media screen and (max-width: 768px) {
	#header,
	.sec01{
		width: 94%;
		margin: 0 auto 3em;
	}
	#header{
		width: 100%;
	}
}
.sec02 h2,
.sec03 h2{
	background: #999;
}
.sec02 .pd{
	width: 984px;
	padding: 34px 82px;
	margin: 0 auto;
	margin-bottom: 32px;
	background: #E0E0E0;
	border-radius: 16px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
}
@media screen and (max-width: 768px) {
	.sec02 .pd{
		width: 96%;
		padding: 16px 16px;
		margin: 0 auto;
		margin-bottom: 16px;
		border-radius: 8px;
	}
}

.sec03 h2{
	margin-bottom: 100px;
}
.sec03 .roles{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 1005px;
	margin: 0 auto;
	padding-bottom: 68px;
}
.sec03 .roles li{
	width: 490px;
	margin-bottom: 32px;
}
@media screen and (max-width: 768px) {
	.sec03 h2{
		margin-bottom: 50px;
	}
	.sec03 .roles{
		width: 96%;
		margin: 0 auto;
		padding-bottom: 18px;
	}
	.sec03 .roles li{
		width: 100%;
		margin-bottom: 16px;
	}
}

.sec04{
	background: #f2f2f2;
	padding: 100px 0;
}
.sec04 p.mb32{margin-bottom: 32px;}
.sec04 p.mb64{margin-bottom: 64px;}
@media screen and (max-width: 768px) {
	.sec04{
		padding: 50px 0;
		padding-left: 4%;
		padding-right: 4%;
	}
	.sec04 p.mb32{margin-bottom: 16px;}
	.sec04 p.mb64{margin-bottom: 32px;}
}

.sec05{
	background: #f2f2f2;
	padding: 32px 0 32px;
}
.sec05 .btn {
	margin-bottom: 32px;
	text-align: center;
}
.sec05 .btn a{
	display: inline-block;
	width: 450px;
	padding: 14px 0;
	background: #E2C94E;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	font-size: 26px;
	font-weight: bold;
	-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.sec05 .btn a:hover{
	opacity: .75;
}
.sec05 .txt3 {
	text-align: center;
	width: 450px;
	border: 2px solid #dcdcdc;
	background: #ffffff;
	font-size: 15px;
	margin: 0 auto 0px;
}
@media screen and (max-width: 768px) {
	.sec05 .btn a{
		width: 96%;
	}
	.sec05 .txt3 {
		width: 96%;
	}
}




.table{
	width: 100%;
	border-top: 1px solid #727171;
	border-left: 1px solid #727171;
	margin-bottom: 10px;
}
.table th{
	font-weight: normal;
}
.table td{}
.table th,
.table td{
	padding: 10px;
	border-right: 1px solid #727171;
	border-bottom: 1px solid #727171;
}
.table td th{
	text-align: right;
	border-right: none;
	border-bottom: none;
	padding: 0;
}
.table td td{
	border-right: none;
	border-bottom: none;
	padding: 0;
}
@media screen and (max-width: 768px){
	.table th,
	.table td{
		display: block;
	}
	.table th{
		background: #eee;
	}
	.table td th{
		display: table-cell;
		background: #fff;
	}
	.table td td{
		display: table-cell;
	}
	.table td{
		padding-bottom: 20px;
	}
}


.txt1{
	font-size: 12.5px;
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 32px;
}
.txt2{
	width: 450px;
	border: 1px solid #CCC;
	padding: 24px 28px;
	font-size: 15px;
	margin: 0 auto 47px;
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
					box-sizing: border-box;
}
.txt3{
	text-align: center;
	width: 450px;
	border: 2px solid #dcdcdc;
	background-color: #f5f5f5;
	font-size: 15px;
	margin: 0 auto 20px;
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
					box-sizing: border-box;
}
@media screen and (max-width: 768px){
	.txt2{
		width: 100%;
	}
}


.infoBox{
	text-align: center;
	margin-bottom: 25px;
}
.infoBox a{
-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.infoBox a:hover{
	opacity: 0.6;
}
@media screen and (max-width: 768px){
	.infoBox{
		width: 94%;
		margin: 0 auto 2em;
	}
}

.bnrs{
	display: flex;
	justify-content: space-between;
	margin-top: 80px;
	@media screen and (max-width: 768px){
		flex-wrap: wrap;
		width: 94%;
		margin: 0 auto 3em;
	}
	li{
		width: 47%;
		@media screen and (max-width: 768px){
			width: 100%;
			margin-bottom: 1em;
		}
	}
	a{
		-webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
		&:hover{
			opacity: .6;
		}
	}
	img{
		max-width: 100%;
	}
}

#footer{
	margin-top: 60px;
	clear: both;
	display: block;
	padding: 10px;
	background-color: #000;
	color: #fff;
	text-align: center;
}



#fnav {
		padding: 40px 0 0 0;
		border-top: 20px solid #f5e161;
}
#fnav li {
		display: inline-block;
		width: 48%;
		text-align: center;
}
#fnav li img {
		width: auto;
}
#fnav li.logo img {
	vertical-align: middle;
}
@media screen and (max-width: 768px) {
		#fnav li {
				display: block;
				width: 100%;
				margin-bottom: 30px;
		}
		#fnav li.company img {
				width: 50%;
		}
		#fnav li.logo img {
				width: 90%;
		vertical-align: top;
		}
}