@charset "utf-8";

/*
 * CSS Document
 * Name : nrpa-kentei | about.php / recmd.css
 * Production Date : 2023.03.08
 * container width = 
 			1920 / 1600 / 1440 / 1366 / 1280 / 1080=1024 / 960 / 800-768 / 600 / 500-480 / 425-320
*/

/* ==========================================================================
   #recmdSec-01 .top-image
========================================================================== */
#recmdSec-01 .topImg-base .topImg-ipg {
	width: 100%;
	height: 0;
	padding-top: 26.5625%;
	background: url(../img/pTop-img/recmndTop_img-L.jpg) center top no-repeat;
	background-size: cover;
}
#recmdSec-01 .topImg-text .topImg-svg {
	width: 100%;
	height: 0;
	padding-top: 26.5625%;
	background: url(../img/pTop-img/recmndTop_img-L.svg) center top no-repeat;
	background-size: cover;
}

@media screen and (max-width:1080px) {
	#recmdSec-01 .topImg-base .topImg-ipg {
		width: 100%;
		height: 0;
		padding-top: 31.25%;
		background: url(../img/pTop-img/recmndTop_img-M.jpg) center top no-repeat;
		background-size: cover;
	}
	#recmdSec-01 .topImg-text .topImg-svg {
		width: 100%;
		height: 0;
		padding-top: 31.25%;
		background: url(../img/pTop-img/recmndTop_img-M.svg) center top no-repeat;
		background-size: cover;
	}
}

@media screen and (max-width:960px) {
	#recmdSec-01 .topImg-base .topImg-ipg {
		width: 100%;
		height: 0;
		padding-top: 46.875%;
		background: url(../img/pTop-img/recmndTop_img-S.jpg) center top no-repeat;
		background-size: cover;
	}
	#recmdSec-01 .topImg-text .topImg-svg {
		width: 100%;
		height: 0;
		padding-top: 46.875%;
		background: url(../img/pTop-img/recmndTop_img-S.svg) center top no-repeat;
		background-size: cover;
	}
}

@media screen and (max-width:600px) {
	#recmdSec-01 .topImg-base .topImg-ipg {
		width: 100%;
		height: 0;
		padding-top: 75%;
		background: url(../img/pTop-img/recmndTop_img-SS1.jpg) center top no-repeat;
		background-size: cover;
	}
	#recmdSec-01 .topImg-text .topImg-svg {
		width: 100%;
		height: 0;
		padding-top: 75%;
		background: url(../img/pTop-img/recmndTop_img-SS1.svg) center top no-repeat;
		background-size: cover;
	}
}

@media screen and (max-width:480px) {
	#recmdSec-01 .topImg-base .topImg-ipg {
		width: 100%;
		height: 0;
		padding-top: 90%;
		background: url(../img/pTop-img/recmndTop_img-SS2.jpg) center top no-repeat;
		background-size: cover;
	}
	#recmdSec-01 .topImg-text .topImg-svg {
		width: 100%;
		height: 0;
		padding-top: 90%;
		background: url(../img/pTop-img/recmndTop_img-SS2.svg) center top no-repeat;
		background-size: cover;
	}
}



/* ==========================================================================
   recommended body-image
========================================================================== */
/* #recmndSec-03 ========================================================= */
.recmndImg-L-01 .recmndImg-01 {
	width: 100%;
	height: 0;
	padding-top: 60%;
	background: url(../img/recmnd/recmnd-01.jpg) left center no-repeat;
	background-size: cover;
}
.recmndImg-L-02 .recmndImg-02 {
	width: 100%;
	height: 0;
	padding-top: 60%;
	background: url(../img/recmnd/recmnd-02.jpg) right center no-repeat;
	background-size: cover;
}

@media screen and (max-width:1600px) {
	.recmndImg-L-01 .recmndImg-01 {
		padding-top: 73%;
		background-size: 110% auto;
	}
	.recmndImg-L-02 .recmndImg-02 {
		padding-top: 73%;
		background-size: 110% auto;
	}
}

@media screen and (max-width:1440px) {
	.recmndImg-L-01 .recmndImg-01 {
		padding-top: 76%;
		background-size: 115% auto;
	}
	.recmndImg-L-02 .recmndImg-02 {
		padding-top: 76%;
		background-size: 115% auto;
	}
}

@media screen and (max-width:1366px) {
	.recmndImg-L-01 .recmndImg-01 {
		padding-top: 66.7%;
		background-size: cover;
	}
	.recmndImg-L-02 .recmndImg-02 {
		padding-top: 66.7%;
		background-size: cover;
	}
}

@media screen and (max-width:1280px) {
	.recmndImg-L-01 .recmndImg-01 {
		padding-top: 73%;
		background-size: 110% auto;
	}
	.recmndImg-L-02 .recmndImg-02 {
		padding-top: 73%;
		background-size: 110% auto;
	}
}

@media screen and (max-width:960px) {
	.recmndImg-L-01 .recmndImg-01 {
		padding-top: 80%;
		background-size: 120% auto;
	}
	.recmndImg-L-02 .recmndImg-02 {
		padding-top: 80%;
		background-size: 120% auto;
	}
}

@media screen and (max-width:800px) {
	.recmndImg-S-01 .recmndImg-01 {
		width: 100%;
		height: 0;
		padding-top: 60%;
		background: url(../img/recmnd/recmnd-01.jpg) left center no-repeat;
		background-size: cover;
	}
	.recmndImg-S-02 .recmndImg-02 {
		width: 100%;
		height: 0;
		padding-top: 60%;
		background: url(../img/recmnd/recmnd-02.jpg) right center no-repeat;
		background-size: cover;
	}
}

@media screen and (max-width:600px) {
	
}


/* #recmndSec-04 ========================================================= */
.recmndImg-L-03 .recmndImg-03 {
	width: 100%;
	height: 0;
	padding-top: 63%;
	background: url(../img/recmnd/recmnd-03.jpg) center center no-repeat;
	background-size: 110% auto;
}
.recmndImg-L-04 .recmndImg-04 {
	width: 100%;
	height: 0;
	padding-top: 62%;
	background: url(../img/recmnd/recmnd-04.jpg) center center no-repeat;
	background-size: cover;
}
.recmndImg-L-05 .recmndImg-05 {
	width: 100%;
	height: 0;
	padding-top: 55%;
	background: url(../img/recmnd/recmnd-05.jpg) center top no-repeat;
	background-size: cover;
}

@media screen and (max-width:1600px) {
	.recmndImg-L-03 .recmndImg-03 {
		padding-top: 68%;
		background-size: 120% auto;
	}
	.recmndImg-L-05 .recmndImg-05 {padding-top: 66.7%;}
}

@media screen and (max-width:1440px) {
	.recmndImg-L-03 .recmndImg-03 {
		padding-top: 68%;
		background-size: 120% auto;
	}
	.recmndImg-L-04 .recmndImg-04 {
		padding-top: 68%;
		background: url(../img/recmnd/recmnd-04.jpg) right center no-repeat;
		background-size: 110% auto;
	}
	.recmndImg-L-05 .recmndImg-05 {
		padding-top: 68%;
		background: url(../img/recmnd/recmnd-05.jpg) center top no-repeat;
		background-size: 105% auto;
	}
}

@media screen and (max-width:1366px) {
	.recmndImg-L-03 .recmndImg-03 {
		padding-top: 60%;
		background-size: 105% auto;
	}
	.recmndImg-L-04 .recmndImg-04 {
		padding-top: 64%;
		background: url(../img/recmnd/recmnd-04.jpg) right center no-repeat;
		background-size: cover;
	}
	.recmndImg-L-05 .recmndImg-05 {
		padding-top: 60%;
		background-size: cover;
	}
}

@media screen and (max-width:1280px) {
	.recmndImg-L-03 .recmndImg-03 {
		padding-top: 68%;
		background-size: 115% auto;
	}
	.recmndImg-L-04 .recmndImg-04 {
		padding-top: 72%;
		background-size: 108% auto;
	}
	.recmndImg-L-05 .recmndImg-05 {
		padding-top: 66%;
		background-size: 108% auto;
	}
}

@media screen and (max-width:960px) {
	.recmndImg-L-03 .recmndImg-03 {
		padding-top: 78%;
		background-size: 125% auto;
	}
	.recmndImg-L-04 .recmndImg-04 {
		padding-top: 80%;
		background-size: 120% auto;
	}
	.recmndImg-L-05 .recmndImg-05 {
		width: 100%;
		height: 0;
		padding-top: 88.889%;
		background: url(../img/recmnd/recmnd-05b.jpg) center center no-repeat;
		background-size: cover;
	}
}

@media screen and (max-width:800px) {
		.recmndImg-S-03 .recmndImg-03 {
		width: 100%;
		height: 0;
		padding-top: 66.7%;
		background: url(../img/recmnd/recmnd-03.jpg) center center no-repeat;
		background-size: 115% auto;
	}
	.recmndImg-S-04 .recmndImg-04 {
		width: 100%;
		height: 0;
		padding-top: 66.7%;
		background: url(../img/recmnd/recmnd-04.jpg) right center no-repeat;
		background-size: cover;
	}
	.recmndImg-S-05 .recmndImg-05 {
		width: 100%;
		height: 0;
		padding-top: 66.7%;
		background: url(../img/recmnd/recmnd-05.jpg) center top no-repeat;
		background-size: cover;
	}
}

@media screen and (max-width:480px) {}


/* #recmndSec-05 ========================================================= */
.recmndImg-L-06 .recmndImg-06 {
	width: 100%;
	height: 0;
	padding-top: 66.7%;
	background: url(../img/recmnd/recmnd-06.jpg) center bottom no-repeat;
	background-size: cover;
}
.recmndImg-L-07 .recmndImg-07 {
	width: 100%;
	height: 0;
	padding-top: 66.7%;
	background: url(../img/recmnd/recmnd-07.jpg) right center no-repeat;
	background-size: cover;
}
.recmndImg-L-08 .recmndImg-08 {
	width: 100%;
	height: 0;
	padding-top: 66.7%;
	background: url(../img/recmnd/recmnd-08.jpg) left center no-repeat;
	background-size: cover;
}

@media screen and (max-width:1600px) {
	.recmndImg-L-06 .recmndImg-06 {
		padding-top: 75%;
		background-size: 115% auto;
	}
	.recmndImg-L-07 .recmndImg-07 {
		padding-top: 70%;
		background-size: 105% auto;
	}
	.recmndImg-L-08 .recmndImg-08 {
		padding-top: 73%;
		background-size: 110% auto;
	}
}

@media screen and (max-width:1600px) {
	.recmndImg-L-06 .recmndImg-06 {
		padding-top: 83%;
		background-size: 130% auto;
	}
	.recmndImg-L-07 .recmndImg-07 {
		padding-top: 80%;
		background-size: 120% auto;
	}
	.recmndImg-L-08 .recmndImg-08 {
		padding-top: 80%;
		background-size: 120% auto;
	}
}

@media screen and (max-width:1366px) {
	.recmndImg-L-06 .recmndImg-06 {
		padding-top: 73%;
		background-size: 115% auto;
	}
	.recmndImg-L-07 .recmndImg-07 {
		padding-top: 70%;
		background-size: 105% auto;
	}
	.recmndImg-L-08 .recmndImg-08 {
		padding-top: 73%;
		background-size: 115% auto;
	}
}

@media screen and (max-width:1280px) {
	.recmndImg-L-06 .recmndImg-06 {
		padding-top: 80%;
		background-size: 120% auto;
	}
	.recmndImg-L-07 .recmndImg-07 {
		padding-top: 73%;
		background-size: 110% auto;
	}
	.recmndImg-L-08 .recmndImg-08 {
		padding-top: 76%;
		background-size: 120% auto;
	}
}

@media screen and (max-width:960px) {
	.recmndImg-L-06 .recmndImg-06 {
		padding-top: 83%;
		background-size: 130% auto;
	}
	.recmndImg-L-07 .recmndImg-07 {
		padding-top: 80%;
		background-size: 120% auto;
	}
	.recmndImg-L-08 .recmndImg-08 {
		padding-top: 80%;
		background-size: 120% auto;
	}
}

@media screen and (max-width:800px) {
	.recmndImg-S-06 .recmndImg-06 {
		width: 100%;
		height: 0;
		padding-top: 66.7%;
		background: url(../img/recmnd/recmnd-06.jpg) center center no-repeat;
		background-size: cover;
	}
	.recmndImg-S-07 .recmndImg-07 {
		width: 100%;
		height: 0;
		padding-top: 66.7%;
		background: url(../img/recmnd/recmnd-07.jpg) center center no-repeat;
		background-size: cover;
	}
	.recmndImg-S-08 .recmndImg-08 {
		width: 100%;
		height: 0;
		padding-top: 66.7%;
		background: url(../img/recmnd/recmnd-08.jpg) center center no-repeat;
		background-size: cover;
	}
}