@charset "utf-8";
/*===============================================
 *	低価格の理由
===============================================*/
#cheap-reason .reason-contents {max-width: 1120px;margin: 0 auto 60px;position: relative;}
#cheap-reason .reason-contents .nm-sub_ttl{border-radius: 6px 6px 0 0;padding: 15px 15px 15px 5em;}
#cheap-reason .reason-frame{background: #fff;border-radius: 0 0 6px 6px;max-width: 1120px;padding: 40px 40px 50px;width: 100%;}
#cheap-reason .reason-contents:last-child{margin: 0 auto;}
.sub-ttl{border-radius: 6px;color: #fff;font-size: 32px;font-weight: bold;margin: 0 0 30px 0;padding: 15px 0;}
.layer-no_mag{padding: 0;}
@media screen and (max-width: 1024px) {
#cheap-reason .reason-contents {max-width: initial;width: 92%;}
}
@media screen and (max-width: 960px) {
#cheap-reason .reason-frame {padding: 20px;}
#cheap-reason .reason-contents .nm-sub_ttl {padding: 15px 15px 15px 4.5em;}
}
@media screen and (max-width: 568px) {
#cheap-reason .layer-ttl {font-size: 23px;}
#cheap-reason .caption-fld_pad{padding: 50px 0 0;}
#cheap-reason {margin: 0 auto 20px;}
#cheap-reason .reason-contents .nm-sub_ttl{border-radius: 0;}
#cheap-reason .reason-frame {border-radius: 0;border: none;margin: 0 auto;padding: 20px 20px 35px;width: 100%;}
#cheap-reason .reason-contents {margin: 0;width: 100%;}
#cheap-reason .reason-contents .nm-sub_ttl {padding: 15px 15px 15px 3.25em;}
.sub-ttl {font-size: 24px;}
}
@media screen and (max-width: 390px) {
#cheap-reason .layer-ttl {font-size: 22px;}
}
/*-----------------------------------------------
 *	導入文
-----------------------------------------------*/
#cheap-reason #intro .layer-item{margin: 0 0 120px;}
#cheap-reason #intro .layer-item .layer-side_img {max-width: 510px;}
@media screen and (max-width: 1024px) {
#cheap-reason #intro .layer-contents {width: 50%;}
}
@media screen and (max-width: 960px) {
#cheap-reason #intro .layer-item{margin: 0 0 80px;}
#cheap-reason #intro .layer-hd_box {margin: 0 0 .5em -3em;padding: 0 0 1em 1em;}
}
@media screen and (max-width: 568px) {
#cheap-reason #intro .layer-hd_box {margin: -2em 0 0 0;padding: 1em 0;}
#cheap-reason #intro .layer-item {margin: 0 0 60px;}
#cheap-reason #intro .layer-contents {width: 100%;}
}
/*-----------------------------------------------
 *	badge
-----------------------------------------------*/
.icon::before {content: "";display: inline-block;width: 114px;height: 114px;position: absolute;left: 40px;top: 50%;transform: translateY(-50%);}
.icon-attempt01::before {background: url("../img/cheap-reason/attempt-icon01.png") no-repeat center;background-size: contain;}
.icon-attempt02::before {background: url("../img/cheap-reason/attempt-icon02.png") no-repeat center;background-size: contain;}
.icon-attempt03::before {background: url("../img/cheap-reason/attempt-icon03.png") no-repeat center;background-size: contain;}
@media screen and (max-width: 960px) {
.icon::before {left: 20px;}
}
@media screen and (max-width: 568px) {
.icon::before {left: 0;width: 74px;height: 74px;}
}
/*-----------------------------------------------
 *	ボックス矢印
-----------------------------------------------*/
.box-arrow{position: relative;margin: 0 0 70px;}
.box-arrow::after{content: "";position: absolute;display: block;line-height: 1;width: 0;height: 0;border-style: solid;border-color: transparent;border-width: 2em 3em;border-top-color: currentColor;border-bottom: 0;left: 50%;bottom: -50px;transform: translateX(-50%);}
.reason01-arrow::after {color: #50ab5e;}
.reason02-arrow::after {color: #5068ab;}
.reason03-arrow::after {color: #ab6150;}

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

}
/*-----------------------------------------------
 *	summary
-----------------------------------------------*/
.summary-com{border-radius: 6px;padding: 40px 40px 40px 12em;position: relative;}
.summary-com::before{content: "";display: block;position: absolute;left: 20px;bottom: 0;}
.summary-com p{font-size: 34px;font-weight: bold;}
.reason01-summary{background: #f3fff5;border:#50ab5e 6px solid;}
.reason01-summary::before{background: url("../img/cheap-reason/illust-attempt01.png") no-repeat;background-size: contain;width: 164px;height: 237px;}
.reason02-summary{background: #f0f3fb;border:#5068ab 6px solid;}
.reason02-summary::before{background: url("../img/cheap-reason/illust-attempt02.png") no-repeat;background-size: contain;width: 130px;height: 236px;}
.reason03-summary{background: #fff8f7;border:#ab6150 6px solid;}
.reason03-summary::before{background: url("../img/cheap-reason/illust-attempt03.png") no-repeat;background-size: contain;width: 140px;height: 236px;}
.reason01-summary p span{color: #50ab5e;}
.reason02-summary p span{color: #5068ab;}
.reason03-summary p span{color: #ab6150;}
@media screen and (max-width: 1024px) {
.summary-com {padding: 40px 20px 40px 7em;}
.summary-com::before{left: 0;}
.reason01-summary::before {width: 114px;height: 165px;}
.reason02-summary::before {width: 110px;height: 198px;}
.reason03-summary::before {width: 110px;height: 184px;}
}
@media screen and (max-width: 960px) {
.summary-com p {font-size: 28px;}
}
@media screen and (max-width: 568px) {
.summary-com p {font-size: 21px;}
.summary-com {padding: 15px 15px 15px 6em;}
.reason01-summary::before {width: 84px;height: 120px;}
.reason02-summary::before {width: 85px;height: 154px;}
.reason03-summary::before {width: 85px;height: 143px;}
}
@media screen and (max-width: 375px) {
.summary-com {padding: 20px 15px 20px 5em;}
.summary-com p {font-size: 19px;}
.reason01-summary::before {width: 74px;height: 106px;}
.reason02-summary::before {width: 75px;height: 132px;}
.reason03-summary::before {width: 75px;height: 126px;}
}

/*-----------------------------------------------
 *	理由01
-----------------------------------------------*/
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 568px) {
#cheap-reason .top-recycle_item {margin: 0 0 60px;width: 100%;}
}
@media screen and (max-width: 375px) {
}
/*-----------------------------------------------
 *	理由02
-----------------------------------------------*/
.reason02-01{margin: 0 0 30px;padding: 0 0 30px;}
.reason02-02{margin: 0 0 50px}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 568px) {
#cheap-reason .layer-item .layer-side_img {margin: 0 0 10px;}
.reason02-02 {margin: 0 0 30px;}
}
/*-----------------------------------------------
 *	コンテンツ
-----------------------------------------------*/
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 568px) {
}
@media screen and (max-width: 375px) {
}