@charset "UTF-8";

/* what
--------------------- */
#what .txt-26{
	font-size: 2.6rem;
	font-weight: 600;
}
#what .pht{
	text-align: center;
	margin-top: 60px;
	overflow: hidden;
}
	#what .pht img{
		padding: 50px 0;
		width: 85%;
		min-width: 600px;
	}
	
/* importance
--------------------- */
#importance{
	background: rgba(249, 153, 0, .05);
}
	#importance .flex .txt-30{
		color: #F9A318;
		font-size: 3.0rem;
		font-weight: 600;
		width: 31%;
		margin-right: 3.5%;
		align-content: center;
	}
	#importance .flex .txt{
		width: 65.5%;
	}
	#importance .flex-start{
		margin-top: 50px;
	}
		#importance .flex-start .pht{
			width: 31%;
			height: auto;
		}

/* business
--------------------- */
#business{
	background: url("../img/guide/bg01.jpg") no-repeat center;
}
	#business .content{
		position: relative;
	}
	#business .content .txt-area{
		width: 50%;
	}
		#business .content .txt-area .txt-26{
			font-size: 2.6rem;
			font-weight: 600;
			margin-bottom: 30px;
		}
	#business .content .btn{
		margin-left: 30px;
		margin-top: 40px;
	}
	#business .content .pht-area{
		width: 45%;
		position: absolute;
		right: 0;
		top: 0;
	}

/* project
--------------------- */
#project .title{
	text-align: center;
	margin-bottom: 50px;
}
#project .flex-start{
	flex-wrap: wrap;
}
	#project .flex-start .box{
		width: 30%;
	}
	#project .flex-start .box:nth-child(n+4){
		margin-top: 50px;
	}
		#project .flex-start .box .pht{
			margin-bottom: 20px;
		}
		#project .flex-start .box .flex-start{
			align-items: center;
		}
			#project .flex-start .box .flex-start .txt-25{
				font-size: 2.5rem;
				font-weight: 600;
			}
			#project .flex-start .box .flex-start .txt-12{
				font-size: 1.2rem;
			}

/* number
--------------------- */
#number .title{
	text-align: center;
	margin-bottom: 50px;
}
#number .flex-start{
	flex-wrap: wrap;
}
	#number .flex-start .box{
		width: 31.5%;
		background: rgba(249, 153, 0, .05);
		padding: 30px 0;
		text-align: center;
		position: relative;
	}
	#number .flex-start .box:nth-child(n+4){
		margin-top: 30px;
	}
	#number .flex-start .box:nth-child(4),
	#number .flex-start .box:nth-child(5),
	#number .flex-start .box:nth-child(6),
	#number .flex-start .box:nth-child(7),
	#number .flex-start .box:nth-child(11),
	#number .flex-start .box:nth-child(12)
	{
		width: 48.5%;
	}
		#number .flex-start .box:nth-child(1) img{
			margin-top: 20px;
			width: 65%;
		}
		#number .flex-start .box:nth-child(2) img{
			margin-top: 20px;
			width: 80%;
		}
		#number .flex-start .box:nth-child(3) img{
			margin-top: 20px;
			width: 80%;
		}
		#number .flex-start .box:nth-child(4) img{
			margin-top: -20px;
			width: 68%;
		}
		#number .flex-start .box:nth-child(5) img{
			margin-top: -20px;
			width: 75%;
		}
		#number .flex-start .box:nth-child(6) img{
			margin-top: 20px;
			width: 70%;
		}
		#number .flex-start .box:nth-child(7) img{
			margin-top: 20px;
			width: 60%;
		}
		#number .flex-start .box:nth-child(8) img{
			margin-top: 20px;
			width: 70%;
		}
		#number .flex-start .box:nth-child(9) img{
			margin-top: 20px;
			width: 70%;
		}
		#number .flex-start .box:nth-child(10) img{
			margin-top: 20px;
			width: 75%;
		}
		#number .flex-start .box:nth-child(11) img{
			margin-top: 20px;
			width: 75%;
		}
		#number .flex-start .box:nth-child(12) img{
			margin-top: 20px;
			width: 55%;
		}
		#number .flex-start .box .asi{
			position: absolute;
			top: 10px;
			width: 80%;
			left: 50%;
			transform: translateX(-50%);
		}
		#number .flex-start .box .txt-26{
			font-size: 2.6rem;
			font-weight: 700;
		}

/* qa-page
--------------------- */
.qa-page .wrap-bottom:not(:last-child){
	padding-bottom: 60px;
}
.qa-page dl{
	background: rgba(249, 153, 0, .05);
	padding: 60px 70px;
}
	.qa-page dl dt .white{
		background: #F99900;
		border-radius: 50vh;
		text-align: center;
		line-height: 40px;
		width: 40px;
		height: 40px;
	}
.qa-page .container{
	position: relative;
}
	.qa-page .container p:first-child{
		top: 10px;
		position: absolute;
	}
	.qa-page .container p:last-child{
		padding-left: 60px;
	}
.qa-page dl dd{
	border-top: 1px solid #DDD;
	margin-top: 30px;
	padding-top: 30px;
}
	.qa-page dl dd .white{
		background: #FFCD00;
		border-radius: 50vh;
		text-align: center;
		line-height: 40px;
		width: 40px;
		height: 40px;
	}
.qa-page .txt-34{
	font-size: 3.4rem;
	font-weight: 600;
}
.qa-page .txt-28{
	font-weight: 600;
	font-size: 2.8rem;
}
/* facility
--------------------- */
.qa-page #facility dl dd .txt{
	padding-left: 60px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.qa-page #facility dl dd .pht{
	margin-left: 60px;
	background: #FFF;
	text-align: center;
}
.qa-page #facility dl dd .pht img{
	padding: 30px;
	width: 67%;
	margin: auto;
}
/* attention
--------------------- */
.qa-page #attention dl dd .flex-start{
	margin-top: 40px;
	flex-wrap: wrap;
	margin-left: 55px;
}
	.qa-page #attention dl dd .pht{
	width: 40%;
	}
	.qa-page #attention dl dd .txt-area{
		width: 55%;
	}
	.qa-page #attention dl dd .txt-area .txt-22{
		font-size: 2.2rem;
		font-weight: 600;
		background: #FFEED4;
		padding: 5px 15px;
		display: inline-block;
		margin-bottom: 10px;
	}
	.qa-page #attention dl dd .txt-24{
		font-size: 2.4rem;
		font-weight: 600;
		padding-left: 60px;
		margin-top: 20px;
		position: relative;
	}
		.qa-page #attention dl dd .txt-24::before{
			content: "";
			position: absolute;
			background: url(../img/qa/yr-arw.svg) no-repeat center / contain;;
			width: 45px;
			height: 70px;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}
		.qa-page #attention dl dd .txt-24 span{
			background: linear-gradient(transparent 70%, #FFCD00 70%);
		}
/* advance
--------------------- */
.qa-page #advance dl dd .txt{
	padding-left: 60px;
	margin-top: 30px;
	margin-bottom: 30px;
}
.qa-page #advance dl dd .pht{
	margin-left: 60px;
	text-align: center;
	position: relative;
}
	.qa-page #advance dl dd .pht .pc{
		display: block;
	}
	.qa-page #advance dl dd .pht .sp{
		display: none;
	}
	.qa-page #advance dl dd .pht img{
		width: 80%;
		margin: auto;
	}
	.qa-page #advance dl dd .pht .txt-11{
		position: absolute;
		bottom: 0;
		text-align: left;
		left: 75%;
		font-size: 1.1rem;
		font-weight: 500;
	}
/* market
--------------------- */
.qa-page #market dl dd .txt{
	padding-left: 60px;
	margin-top: 30px;
	margin-bottom: 40px;
}
.qa-page #market dl dd .pht{
	margin-left: 60px;
	text-align: center;
}
.qa-page #market dl dd .pht img{
	width: 100%;
	margin: auto;
}






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


/* what
--------------------- */
#what .txt-26{
	font-size: 2.2rem;
}
#what .pht{
	margin-top: 40px;
}
	#what .pht img{
		padding: 40px 0;
	}
/* importance
--------------------- */
	#importance .flex .txt-30{
		color: #F9A318;
		font-size: 2.4rem;
		white-space: nowrap;
	}
	#importance .flex-start{
		margin-top: 40px;
	}


/* business
--------------------- */
	#business .content{
		position: relative;
	}
	#business .content .txt-area{
		width: 50%;
	}
		#business .content .txt-area .txt-26{
			font-size: 2.2rem;
			margin-bottom: 20px;
		}
	#business .content .btn{
		margin-left: 25px;
		margin-top: 30px;
	}
	#business .content .pht-area{
		width: 45%;
		position: absolute;
	}

/* project
--------------------- */
#project .title{
	text-align: center;
	margin-bottom: 40px;
}
#project .flex-start{
	flex-wrap: wrap;
}
	#project .flex-start .box{
		width: 31%;
	}
	#project .flex-start .box:nth-child(n+4){
		margin-top: 30px;
	}
		#project .flex-start .box .pht{
			margin-bottom: 10px;
		}
			#project .flex-start .box .flex-start .txt-25{
				font-size: 2.0rem;
				width: 100%;
				line-height: 1;
			}
			#project .flex-start .box .flex-start{
				flex-direction: column-reverse;
				align-items: flex-start;
			}
		#project .flex-start .box .txt{
			margin-top: 10px;
		}

/* number
--------------------- */
#number .title{
	margin-bottom: 40px;
}
	#number .flex-start .box{
		padding: 30px 0;
	}
	#number .flex-start .box:nth-child(n+4){
		margin-top: 20px;
	}
		#number .flex-start .box:nth-child(1) img,
		#number .flex-start .box:nth-child(2) img,
		#number .flex-start .box:nth-child(3) img,
		#number .flex-start .box:nth-child(6) img,
		#number .flex-start .box:nth-child(7) img,
		#number .flex-start .box:nth-child(8) img,
		#number .flex-start .box:nth-child(9) img,
		#number .flex-start .box:nth-child(10) img,
		#number .flex-start .box:nth-child(11) img,
		#number .flex-start .box:nth-child(12) img{
			margin-top: 15px;
		}
		#number .flex-start .box:nth-child(4) img,
		#number .flex-start .box:nth-child(5) img{
			margin-top: -15px;
		}
		#number .flex-start .box .txt-26{
			font-size: 2.2rem;
		}

/* qa-page
--------------------- */
.qa-page .wrap-bottom:not(:last-child){
	padding-bottom: 50px;
}
.qa-page dl{
	padding: 40px 50px;
}
	.qa-page dl dt .orange{
		font-size: 1.4rem;
	}
	.qa-page dl dt .white{
		line-height: 35px;
		width: 35px;
		height: 35px;
	}
	.qa-page .container p:first-child{
		top: 8px;
	}
	.qa-page .container p:last-child{
		padding-left: 50px;
	}
.qa-page dl dd{
	margin-top: 20px;
	padding-top: 20px;
}
	.qa-page dl dd .white{
		line-height: 35px;
		width: 35px;
		height: 35px;
	}
.qa-page .txt-34{
	font-size: 2.8rem;
}
.qa-page .txt-28{
	font-size: 2.2rem;
}

/* facility
--------------------- */
.qa-page #facility dl dd .txt{
	padding-left: 50px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.qa-page #facility dl dd .pht{
	margin-left: 50px;
}
.qa-page #facility dl dd .pht img{
	padding: 25px 20px;
}
/* attention
--------------------- */
.qa-page #attention dl dd .flex-start{
	margin-left: 50px;
}
.qa-page #attention dl dd .flex-start:nth-child(3){
	margin-top: 30px;
}
	.qa-page #attention dl dd .container .pc{
		/* border: 1px solid red; */
		/* display: none; */
	}
	.qa-page #attention dl dd .txt-area .txt-22{
		font-size: 1.8rem;
		padding: 3px 10px;
	}
	.qa-page #attention dl dd .txt-24{
		font-size: 2.0rem;
		padding-left: 50px;
		margin-top: 15px;
		line-height: 1.6;
	}
		.qa-page #attention dl dd .txt-24::before{
			width: 35px;
			height: 60px;
		}
/* advance
--------------------- */
.qa-page #advance dl dd .txt{
	padding-left: 50px;
	margin-top: 20px;
	margin-bottom: 30px;
}
.qa-page #advance dl dd .pht{
	margin-left: 50px;
}
	.qa-page #advance dl dd .pht img{
		width: 90%;
		margin: auto;
	}
	.qa-page #advance dl dd .pht .txt-11{
		font-size: 0.9rem;
		left: 78%;
		white-space: nowrap;
	}
/* market
--------------------- */
.qa-page #market dl dd .txt{
	padding-left: 50px;
	margin-top: 20px;
	margin-bottom: 40px;
}
.qa-page #market dl dd .pht{
	margin-left: 50px;
}

}

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

/* what
--------------------- */
#what .txt-26{
	font-size: 2.0rem;
	line-height: 1.4;
	margin-bottom: 10px;
}
#what .pht{
	margin-top: 20px;
}
	#what .pht img{
		padding: 40px 30px;
	}
/* importance
--------------------- */
	#importance .flex .txt-30{
		font-size: 2.0rem;
		width: 100%;
		line-height: 1.4;
		margin-bottom: 10px;
	}
	#importance .flex .txt{
		width: 100%;
	}
	#importance .flex-start{
		margin-top: 20px;
		flex-wrap: wrap;
	}
		#importance .flex-start .pht{
			width: 100%;
		}
		#importance .flex-start .pht:nth-child(n+2){
			margin-top: 15px;
		}

/* business
--------------------- */
#business .content{
	position: relative;
}
#business .content .txt-area{
	width: 100%;
}
	#business .content .txt-area .txt-26{
		font-size: 1.8rem;
		margin-bottom: 10px;
		line-height: 1.6;
	}
#business .content .btn{
	margin: 40px auto 0 auto;
}
#business .content .pht-area{
	width: 100%;
	position: relative;
	margin: 20px auto 0 auto;
}

/* project
--------------------- */
#project .title{
	text-align: center;
	margin-bottom: 30px;
}
#project .flex-start{
	flex-wrap: wrap;
}
	#project .flex-start .box{
		width: 100%;
	}
	#project .flex-start .box:nth-child(n+2){
		margin-top: 25px;
	}
		#project .flex-start .box .pht{
			margin-bottom: 15px;
		}
			#project .flex-start .box .flex-start .txt-25{
				width: auto;
				line-height: 1;
			}
			#project .flex-start .box .flex-start .txt-12{
				font-size: 1.0rem;
			}
			#project .flex-start .box .flex-start{
				flex-direction:row;
				align-items: center;
			}
		#project .flex-start .box .txt{
			margin-top: 8px;
			line-height: 1.6;
		}

/* number
--------------------- */
#number .title{
	margin-bottom: 30px;
}
#number.warp-top{
	margin-top: 60px;
}
#number .flex-start .box{
	width: 100% !important;
	padding: 15px 0;
}
#number .flex-start .box:nth-child(n+2){
	margin-top: 20px;
}
	#number .flex-start .box:nth-child(1) img{
		width: 55%;
	}
	#number .flex-start .box:nth-child(2) img{
		width: 65%;
	}
	#number .flex-start .box:nth-child(3) img{
		width: 70%;
	}
	#number .flex-start .box:nth-child(4) img{
		width: 75%;
	}
	#number .flex-start .box:nth-child(5) img{
		width: 90%;
	}
	#number .flex-start .box:nth-child(6) img{
		width: 80%;
	}
	#number .flex-start .box:nth-child(7) img{
		width: 75%;
	}
	#number .flex-start .box:nth-child(8) img{
		width: 55%;
	}
	#number .flex-start .box:nth-child(9) img{
		width: 55%;
	}
	#number .flex-start .box:nth-child(10) img{
		width: 60%;
	}
	#number .flex-start .box:nth-child(11) img{
		width: 90%;
	}
	#number .flex-start .box:nth-child(12) img{
		width: 70%;
	}
	#number .flex-start .box:nth-child(1) img,
	#number .flex-start .box:nth-child(2) img,
	#number .flex-start .box:nth-child(3) img,
	#number .flex-start .box:nth-child(6) img,
	#number .flex-start .box:nth-child(7) img,
	#number .flex-start .box:nth-child(8) img,
	#number .flex-start .box:nth-child(9) img,
	#number .flex-start .box:nth-child(10) img,
	#number .flex-start .box:nth-child(11) img,
	#number .flex-start .box:nth-child(12) img{
		margin-top: 5px;
	}
	#number .flex-start .box:nth-child(4) img,
	#number .flex-start .box:nth-child(5) img{
		margin-top: -15px;
	}
	#number .flex-start .box .asi{
		position: absolute;
		top: 5px;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
	}
	#number .flex-start .box .txt-26{
		font-size: 2.0rem;
	}

/* qa-page
--------------------- */
.qa-page div:nth-child(n+2) .inner{
	padding: 0 5%;
}
.qa-page .wrap-bottom:not(:last-child){
	padding-bottom: 40px;
}

.qa-page dl{
	padding: 25px 20px;
}
	.qa-page dl dt .orange{
		font-size: 1.2rem;
		margin-bottom: 5px;
	}
	.qa-page dl dt .white{
		line-height: 28px;
		width: 28px;
		height: 28px;
	}
	.qa-page .container p:first-child{
		top: 0px;
	}
	.qa-page .container p:last-child{
		padding-left: 38px;
	}
.qa-page dl dd{
	margin-top: 12px;
	padding-top: 12px;
}
	.qa-page dl dd .white{
		line-height: 28px;
		width: 28px;
		height: 28px;
	}
.qa-page .txt-34{
	font-size: 1.6rem;
	line-height: 1.5;
}
.qa-page .txt-28{
	font-size: 1.6rem;
	line-height: 1.5;
}

/* facility
--------------------- */
.qa-page #facility dl dd .txt{
	padding-left: 0px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.qa-page #facility dl dd .pht{
	margin-left: 0px;
}
.qa-page #facility dl dd .pht img{
	padding: 30px;
	min-width: 400px;
}
/* attention
--------------------- */
.qa-page #attention dl dd .flex-start{
	margin-left: 0px;
	margin-top: 25px;
}
.qa-page #attention dl dd .flex-start:nth-child(3){
	margin-top: 35px;
}
	.qa-page #attention dl dd .pht{
		width: 100%;
	}
	.qa-page #attention dl dd .txt-area{
		width: 100%;
		margin-top: 15px;
	}
		.qa-page #attention dl dd .txt-area .txt-22{
			font-size: 1.6rem;
			padding: 2px 10px;
			margin-top: 0px;
			margin-bottom: 8px;
		}
	.qa-page #attention dl dd .txt-24{
		font-size: 1.6rem;
		padding-left: 40px;
		margin-top: 5px;
		margin-left: 0px;
		line-height: 1.5;
	}
		.qa-page #attention dl dd .txt-24::before{
			width: 25px;
			height: 50px;
			left: 3px;
			top: 0;
			transform: translateY(-10px);
		}
/* advance
--------------------- */
.qa-page #advance dl dd .txt{
	padding-left: 0px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.qa-page #advance dl dd .pht{
	margin-left: 0px;
}
	.qa-page #advance dl dd .pht .flex{
		justify-content: flex-start;
		max-width: 500px;
		margin: auto;
	}
		.qa-page #advance dl dd .pht .flex img{
			width: 47%;
			margin-left: 0;
			margin-right: 6%;
		}
		.qa-page #advance dl dd .pht .flex img:nth-child(2n){
			margin-right: 0;
		}
		.qa-page #advance dl dd .pht .flex img:nth-child(n+3){
			margin-top: 10px;
		}
	.qa-page #advance dl dd .pht .pc{
		display: none;
	}
	.qa-page #advance dl dd .pht .sp{
		display: flex;
	}
	.qa-page #advance dl dd .pht .txt-11{
		left: 50%;
		font-size: 0.8rem;
		text-align: left;
	}
/* market
--------------------- */
.qa-page #market dl dd .txt{
	padding-left: 0px;
	margin-top: 10px;
	margin-bottom: 15px;
}
.qa-page #market dl dd .pht{
	margin-left: 0px;
}
	.qa-page #market dl dd .pht img{
		min-width: 500px;
	}

}