@charset "UTF-8";
@media screen and (min-width: 768px),print {
#cost-performance {max-width: 1920px;width: 100%; margin: 0 auto;}
.text-common {font-size: 16px;letter-spacing: 0.05em;font-weight: bold;line-height: 28.2px;}
.seo_bread_list  { color: #fff;}
.seo_bread_list a span  { color: #fff;}


/* ==========================================================================================================
  top
=========================================================================================================== */
#top {background: url(../images/cost-performance/top-bg.jpg) no-repeat top -7px center;height: 840px;margin-top: -78px;padding-top: 81px;margin-bottom: 85px;}
#top .inner {width: 960px;margin: 0 auto;}
#top .box {width: 960px;background: #fff;box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.14);padding: 75px 80px 40px 79px;position: relative;}
#top .box::before {content: '';position: absolute;left: 10px;top: -11px;background: #F04D2F;width: 9px;height: 90px;}
#top figure {position: absolute;top: 88px;left: 10px;}
#top h2 {font-size: 32px;font-weight: bold;line-height: 47px;text-align: center;color: #F04D2F;position: relative;margin-bottom: 50px;margin-top: -13px;position: relative;z-index: 1;}
#top h2::after {content: '';background: url(../images/cost-performance/top-cost.png) no-repeat top center;width: 42px;height: 21px;position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);}
#top .text01 {text-align: center;margin-top: 25px;}


/* ==========================================================================================================
  cost01
=========================================================================================================== */
#cost01 {background: url(../images/cost-performance/cost01-bg.png) no-repeat top center;padding-top: 61px;margin-bottom: 90px;}
#cost01 .inner { width: 1100px;margin: 0 auto;}
#cost01 h2 {font-size: 37px;font-weight: bold;letter-spacing: 0.1em;line-height: 51px;display: inline-block;margin-bottom: 25px;position: relative;margin-left: 275px;}
#cost01 h2::before {content: '';position: absolute;background: url(../images/cost-performance/cost01.png) no-repeat top center;width: 55px;height: 69px;left: -118px;top: 7px;}
#cost01 h2::after {content: '';position: absolute;background: #F04D30;height: 96px;width: 1px;top: -1px;left: -28px;}
#cost01 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 63px 150px 67px 150px;}
#cost01 .text01 {margin-bottom: 20px;}
#cost01 .text02 {margin-bottom: 34px;}
#cost01 .img-flex { display: flex;gap: 37px;}
#cost01 .img01 { }
#cost01 .img01-text {position: relative;padding-left: 17px;margin-top: 10px;font-size: 14px;font-weight: 500;letter-spacing: 0.05em;line-height: 17px;}
#cost01 .img01-text::before {content: '';border-right: 6px solid transparent;border-bottom: 11px solid #FFD265;border-left: 6px solid transparent;position: absolute;top: 3px;left: 0px;}
#cost01 .img02 { }
#cost01 .img02-text {position: relative;padding-left: 19px;margin-top: 10px;font-size: 14px;font-weight: 500;letter-spacing: 0.05em;line-height: 17px;}
#cost01 .img02-text::before {content: '';border-right: 6px solid transparent;border-bottom: 11px solid #FFD265;border-left: 6px solid transparent;position: absolute;top: 4px;left: 0px;}


/* ==========================================================================================================
  cost02
=========================================================================================================== */
#cost02 {background: url(../images/cost-performance/cost02-bg.png) no-repeat top center;padding-top: 59px;margin-bottom: 90px;}
#cost02 .inner { width: 1100px;margin: 0 auto;}
#cost02 h2 {font-size: 37px;font-weight: bold;letter-spacing: 0.1em;line-height: 51px;display: inline-block;margin-bottom: 25px;position: relative;margin-left: 273px;}
#cost02 h2::before {content: '';position: absolute;background: url(../images/cost-performance/cost02.png) no-repeat top center;width: 60px;height: 69px;left: -115px;top: 9px;}
#cost02 h2::after {content: '';position: absolute;background: #F04D30;height: 96px;width: 1px;top: 1px;left: -26px;}
#cost02 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 72px 150px 65px 150px;}
#cost02 .cost02-img {padding-left: 73px;margin-bottom: 38px;}
#cost02 .text01 {font-weight: 500;margin-bottom: 18px;}
#cost02 .text02 {font-weight: 500; }


/* ==========================================================================================================
  cost03
=========================================================================================================== */
#cost03 {background: url(../images/cost-performance/cost02-bg.png) no-repeat top center;padding-top: 59px;margin-bottom: 100px;}
#cost03 .inner { width: 1100px;margin: 0 auto;}
#cost03 h2 {font-size: 37px;font-weight: bold;letter-spacing: 0.1em;line-height: 51px;display: inline-block;margin-bottom: 25px;position: relative;margin-left: 273px;}
#cost03 h2::before {content: '';position: absolute;background: url(../images/cost-performance/cost03.png) no-repeat top center;width: 60px;height: 69px;left: -115px;top: 9px;}
#cost03 h2::after {content: '';position: absolute;background: #F04D30;height: 96px;width: 1px;top: 1px;left: -26px;}
#cost03 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 81px 164px 68px 161px;}
#cost03 .cost03-img {padding-left: 56px;margin-bottom: 60px;}
#cost03 .text01 {font-weight: 500;margin-bottom: 18px;}
#cost03 .text02 {font-weight: 500;margin-bottom: 21px;}
#cost03 .text03 {font-weight: 500; }

/* ==========================================================================================================
  middle
=========================================================================================================== */

#middle {background: #FAFAF5;padding-top: 118px;padding-bottom: 176px;}
#middle .inner {width: 1126px;margin: 0 auto;position: relative;}
#middle figure {position: absolute;top: -57px;right: -30px;}
#middle .box {width: 750px;position: absolute;bottom: -100px;left: 50%;transform: translateX(-50%);background: #fff;padding: 46px 66px 39px 66px;}


/* ==========================================================================================================
  bottom
=========================================================================================================== */
#bottom { background: url(../images/cost-performance/bottom-bg.jpg) no-repeat top center;padding-top: 75px;padding-bottom: 96px;}
#bottom .inner { width: 1100px;margin: 0 auto;text-align: center;}
#bottom h2 {text-align: center;margin-bottom: 55px;}
#bottom ul {display: flex;flex-wrap: wrap;gap: 22px;}
#bottom li {width: 258px;background: #fff;padding: 18px 30px 26px 30px;position: relative;}
#bottom li::before {content: '';position: absolute;left: 9px;top: -6px;background: #F04D2F;width: 6px;height: 56px;}
#bottom li a:hover {text-decoration: none; }
#bottom li a h3 {margin-bottom: 9px;font-size: 20px;font-weight: bold;letter-spacing: 0.1em;line-height: 26px;color: #F04D2F;height: 77px;align-items: center;justify-content: center;display: flex;position: relative;z-index: 1;}
#bottom li .bottom01-img { margin-bottom: 19.6px;}
#bottom li .btn { }
#bottom li figure {position: absolute;left: 9px;top: 58px;}












}

@media screen and (max-width: 767px) {
.text-common {font-size: 3.865vw;letter-spacing: 0.05em;font-weight: bold;line-height: 6.763vw;}


/* ==========================================================================================================
sp top
=========================================================================================================== */
#top {background: url(../images/cost-performance/sp-top-bg.jpg) no-repeat top -100px center;background-size: 100% auto;height: 152.899vw;margin-top: -4.106vw;padding-top: 7.246vw;}
#top .inner {padding: 0 4.106vw;}
#top .box {background: #fff;box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.14);padding: 9.807vw 6.446vw 8.296vw 7.246vw;position: relative;}
#top .box::before {content: '';position: absolute;left: 2.115vw;top: -2.015vw;background: #F04D2F;width: 2.174vw;height: 21.739vw;}
#top figure {position: absolute;top: 21.155vw;left: 2.115vw;width: 1.857vw;height: 24.155vw;}
#top h2 {font-size: 4.831vw;letter-spacing: 0.1em;font-weight: bold;line-height: 7.729vw;text-align: center;color: #F04D2F;position: relative;margin-bottom: 10.719vw;padding-left: 4vw;}
#top h2::after {content: '';background: url(../images/cost-performance/sp-top-cost.png) no-repeat top center;background-size: 100% auto;width: 9.662vw;height: 4.831vw;position: absolute;bottom: -6.646vw;left: 50%;transform: translateX(-50%);color: #000;}
#top .text01 {/* text-align: center; */margin-top: 3.746vw;}

/* ==========================================================================================================
sp cost01
=========================================================================================================== */
#cost01 {background: url(../images/cost-performance/sp-cost01-bg.png) no-repeat top center;background-size: 100% auto;padding-top: 7.234vw;margin-bottom: 12vw;}
#cost01 .inner { padding: 0 4.589vw;}
#cost01 h2 {font-size: 4.831vw;font-weight: bold;letter-spacing: 0.1em;line-height: 7.729vw;display: inline-block;margin-bottom: 4.339vw;position: relative;margin-left: 23.255vw;}
#cost01 h2::before {content: '';position: absolute;background: url(../images/cost-performance/sp-cost01.png) no-repeat top center;background-size: 100% auto;width: 9.179vw;height: 12.802vw;left: -16.65vw;top: 1.208vw;}
#cost01 h2::after {content: '';position: absolute;background: #F04D30;height: 15.942vw;width: 0.242vw;top: -1.2vw;left: -3.631vw;}
#cost01 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 6.146vw 9.179vw 5.946vw 9.179vw;}
#cost01 .text01 {margin-bottom: 2.106vw;font-weight: 500;}
#cost01 .text02 { margin-bottom: 5.556vw;font-weight: 500;}
#cost01 .img-flex {display: grid;gap: 3.631vw;}
#cost01 .img01 { }
#cost01 .img01-text {position: relative;padding-left: 5.406vw;margin-top: 1.615vw;font-size: 3.865vw;font-weight: 500;letter-spacing: 0.05em;line-height: 6.763vw;}
#cost01 .img01-text::before {content: '';border-right: 6px solid transparent;border-bottom: 11px solid #FFD265;border-left: 6px solid transparent;position: absolute;top: 1.325vw;left: 0.5vw;}
#cost01 .img02 { }
#cost01 .img02-text {position: relative;padding-left: 5.389vw;margin-top: 1.015vw;font-size: 3.865vw;font-weight: 500;letter-spacing: 0.05em;line-height: 6.763vw;}
#cost01 .img02-text::before {content: '';border-right: 6px solid transparent;border-bottom: 11px solid #FFD265;border-left: 6px solid transparent;position: absolute;top: 1.866vw;left: 0.5vw;}
  
/* ==========================================================================================================
sp  cost02
=========================================================================================================== */
#cost02 {background: url(../images/cost-performance/sp-cost02-bg.png) no-repeat top center;background-size: 100% auto;padding-top: 6.7vw;margin-bottom: 11vw;}
#cost02 .inner { padding: 0 4.589vw;}
#cost02 h2 {font-size: 4.831vw;font-weight: bold;letter-spacing: 0.1em;line-height: 7.729vw;display: inline-block;margin-bottom: 4.639vw;position: relative;margin-left: 24.879vw;}
#cost02 h2::before {content: '';position: absolute;background: url(../images/cost-performance/sp-cost02.png) no-repeat top center;background-size: 100% auto;width: 9.179vw;height: 12.802vw;left: -16.778vw;top: 2.174vw;}
#cost02 h2::after {content: '';position: absolute;background: #F04D30;height: 15.942vw;width: 0.242vw;top: -0.758vw;left: -4.28vw;}
#cost02 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 9.662vw 8.213vw 8.846vw 8.696vw;}
#cost02 .cost02-img {/* padding-left: 0.386vw; */margin-bottom: 5.779vw;}
#cost02 .text01 {font-weight: 500;margin-bottom: 2.848vw;}
#cost02 .text02 {font-weight: 500; }
  
/* ==========================================================================================================
sp  cost03
=========================================================================================================== */
#cost03 {background: url(../images/cost-performance/sp-cost03-bg.png) no-repeat top center;background-size: 100% auto;padding-top: 6.7vw;margin-bottom: 11vw;}
#cost03 .inner { padding: 0 4.589vw;}
#cost03 h2 {font-size: 4.831vw;font-weight: bold;letter-spacing: 0.1em;line-height: 7.729vw;display: inline-block;margin-bottom: 4.639vw;position: relative;margin-left: 24.879vw;}
#cost03 h2::before {content: '';position: absolute;background: url(../images/cost-performance/sp-cost03.png) no-repeat top center;background-size: 100% auto;width: 9.179vw;height: 12.802vw;left: -16.778vw;top: 2.174vw;}
#cost03 h2::after {content: '';position: absolute;background: #F04D30;height: 15.942vw;width: 0.242vw;top: -0.758vw;left: -4.28vw;}
#cost03 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 9.662vw 8.213vw 8.846vw 8.696vw;}
#cost03 .cost03-img {/* padding-left: 0.386vw; */margin-bottom: 5.779vw;}
#cost03 .text01 {font-weight: 500;margin-bottom: 2.848vw;}
#cost03 .text02 {font-weight: 500; }
#cost03 .text03 {font-weight: 500; }


/* ==========================================================================================================
sp  middle
=========================================================================================================== */

#middle {background: #FAFAF5;padding-top: 22.401vw;padding-bottom: 63.043vw;}
#middle .inner {padding: 0 4.589vw; position: relative;}
#middle figure {position: absolute; top: -12.077vw; left: 50%; transform: translateX(-50%); width: 76.329vw;}
#middle .box {width: 85.99vw;position: absolute;bottom: -52.657vw;left: 50%;transform: translateX(-50%);background: #fff;padding: 7.246vw 8.696vw 7.971vw 8.696vw;}


/* ==========================================================================================================
sp  bottom
=========================================================================================================== */
#bottom {background: url(../images/cost-performance/sp-bottom-bg.jpg) no-repeat top center;background-size: 100% auto;padding-top: 11.116vw;padding-bottom: 23.188vw;}
#bottom .inner {padding: 0 4.106vw; text-align: center;}
#bottom h2 {width: 91.546vw;margin: 0 auto 40px;}
#bottom ul {display: grid;gap: 3.865vw;}
#bottom li {width: 91.787vw;background: #fff;padding: 3.16vw 8.454vw 10.628vw 8.454vw;position: relative;}
#bottom li::before {content: '';position: absolute;left: 1.691vw;top: -2.057vw;background: #F04D2F;width: 2.174vw;height: 21.739vw;}
#bottom li a:hover {text-decoration: none; }
#bottom li a h3 {margin-bottom: 2.174vw;font-size: 6.131vw;font-weight: bold;letter-spacing: 0.1em;line-height: 6.28vw;color: #F04D2F;height: 15.699vw;align-items: center;justify-content: center;display: flex;}
#bottom li:nth-child(4) a h3 {font-size: 6.131vw;height: 23.399vw;line-height: 8.3vw;}
#bottom li .bottom01-img { margin-bottom: 4.734vw;}
#bottom li .btn {width: 35.749vw;margin: 0 auto;}
#bottom li figure {position: absolute;left: 1.691vw;top: 21.514vw;width: 1.932vw;height: 24.155vw;}






}