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


/* ==========================================================================================================
  top
=========================================================================================================== */
#top {background: url(../images/design/top-bg.jpg) no-repeat top -7px center;height: 840px;margin-top: -78px;padding-top: 65px;margin-bottom: 39px;}
#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: 85px 69px 30px 70px;position: relative;}
#top .box::before {content: '';position: absolute;left: 18px;top: -1px;background: #F04D2F;width: 9px;height: 90px;}
#top figure {position: absolute;top: 100px;left: 17px;}
#top h2 {font-size: 32px;font-weight: bold;line-height: 47px;text-align: center;color: #F04D2F;position: relative;margin-bottom: 52px;margin-top: -13px;z-index: 1;}
#top h2::after {content: '';background: url(../images/design/top-cost.png) no-repeat top center;width: 56px;height: 20px;position: absolute;bottom: -30px;left: 50%;transform: translateX(-50%);}
#top .text01 {text-align: center;margin-top: 25px;}


/* ==========================================================================================================
  design01
=========================================================================================================== */
#design01 {background: url(../images/design/design01-bg.png) no-repeat top center;padding-top: 61px;margin-bottom: 90px;}
#design01 .inner {width: 1200px;margin: 0 auto;}
#design01 h2 {font-size: 37px;font-weight: bold;letter-spacing: 0.1em;line-height: 51px;display: inline-block;margin-bottom: 25px;position: relative;margin-left: 325px;}
#design01 h2::before {content: '';position: absolute;background: url(../images/design/design01.png) no-repeat top center;width: 72px;height: 69px;left: -124px;top: 9px;}
#design01 h2::after {content: '';position: absolute;background: #F04D30;height: 96px;width: 1px;top: -1px;left: -28px;}
#design01 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 45px 60px 51px 60px;width: 900px;margin: -40px auto 0;position: relative;}
#design01 .text01 {margin-bottom: 20px;font-weight: 500;}
#design01 .text02 {margin-bottom: 25px;font-weight: 500;}
#design01 .img-flex { display: flex;gap: 37px;}
#design01 .img01 { }
#design01 .img01-text {position: relative;padding-left: 17px;margin-top: 10px;font-size: 16px;font-weight: 500;letter-spacing: 0.05em;line-height: 17px;}
#design01 .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;}
#design01 .img02 { }
#design01 .img02-text {position: relative;padding-left: 19px;margin-top: 10px;font-size: 16px;font-weight: 500;letter-spacing: 0.05em;line-height: 17px;}
#design01 .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;}

/* ==========================================================================================================
  design02
=========================================================================================================== */
#design02 {background: url(../images/design/design02-bg.png) no-repeat top center;padding-top: 85px;margin-bottom: 90px;}
#design02 .inner {width: 1200px;margin: 0 auto;}
#design02 h2 {font-size: 37px;font-weight: bold;letter-spacing: 0.1em;line-height: 51px;display: inline-block;margin-bottom: 55px;position: relative;margin-left: 325px;}
#design02 h2::before {content: '';position: absolute;background: url(../images/design/design02.png) no-repeat top center;width: 72px;height: 69px;left: -124px;top: -10px;}
#design02 h2::after {content: '';position: absolute;background: #F04D30;height: 96px;width: 1px;top: -23px;left: -28px;}
#design02 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 45px 60px 51px 60px;width: 900px;margin: -40px auto 0;position: relative;}
#design02 .text01 {margin-bottom: 20px;font-weight: 500;}
#design02 .text02 {margin-bottom: 34px;font-weight: 500;}
#design02 .btn {text-align: center;}


/* ==========================================================================================================
  design03
=========================================================================================================== */
#design03 {background: url(../images/design/design03-bg.png) no-repeat top center;padding-top: 61px;margin-bottom: 90px;}
#design03 .inner {width: 1200px;margin: 0 auto;}
#design03 h2 {font-size: 37px;font-weight: bold;letter-spacing: 0.1em;line-height: 51px;display: inline-block;margin-bottom: 24px;position: relative;margin-left: 325px;}
#design03 h2::before {content: '';position: absolute;background: url(../images/design/design03.png) no-repeat top center;width: 72px;height: 69px;left: -124px;top: 9px;}
#design03 h2::after {content: '';position: absolute;background: #F04D30;height: 96px;width: 1px;top: -1px;left: -28px;}
#design03 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 45px 60px 18px 60px;width: 900px;margin: -40px auto 0;position: relative;}
#design03 .text01 {margin-bottom: 20px;font-weight: 500;}
#design03 .text02 {margin-bottom: 25px;font-weight: 500;}


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

#middle {background: #FAFAF5;padding-top: 133px;padding-bottom: 261px;}
#middle .inner {width: 1126px;margin: 0 auto;position: relative;}
#middle figure {position: absolute;top: -78px;right: -30px;}
#middle .box {width: 750px;position: absolute;bottom: -194px;left: 50%;transform: translateX(-50%);background: #fff;padding: 41px 66px 39px 66px;}
#middle .text01 {line-height: 32px;}


/* ==========================================================================================================
  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: 15px 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/design/sp-top-bg.jpg) no-repeat top -100px center;background-size: 100% auto;height: 137.299vw;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.207vw 8.046vw 6.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.2em;font-weight: bold;line-height: 8.029vw;text-align: center;color: #F04D2F;position: relative;margin-bottom: 11.719vw;padding-left: 0vw;}
#top h2::after {content: '';background: url(../images/design/sp-top-cost.png) no-repeat top center;background-size: 100% auto;width: 13.162vw;height: 4.831vw;position: absolute;bottom: -6.646vw;left: 50%;transform: translateX(-50%);}
#top h2 span {display: none;}
#top .text01 {/* text-align: center; */margin-top: 3.746vw;padding-left: 1.691vw;}

/* ==========================================================================================================
sp design01
=========================================================================================================== */
#design01 {background: url(../images/design/sp-design01-bg.png) no-repeat top center;background-size: 100% auto;padding-top: 6.634vw;margin-bottom: 12vw;}
#design01 .inner {padding: 0 2.899vw;}
#design01 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: 25.155vw;}
#design01 h2::before {content: '';position: absolute;background: url(../images/design/sp-design01.png) no-repeat top center;background-size: 100% auto;width: 9.179vw;height: 12.802vw;left: -16.65vw;top: 2.208vw;}
#design01 h2::after {content: '';position: absolute;background: #F04D30;height: 15.942vw;width: 0.242vw;top: -1.2vw;left: -3.631vw;}
#design01 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 6.146vw 6.879vw 5.946vw 6.579vw;width: 85.99vw;margin: -8px auto 0;position: relative;}
#design01 .text01 {margin-bottom: 2.106vw;font-weight: 500;}
#design01 .text02 { margin-bottom: 5.556vw;font-weight: 500;}
#design01 .img-flex {display: grid;gap: 3.631vw;}
#design01 .img01 { }
#design01 .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;}
#design01 .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;}
#design01 .img02 { }
#design01 .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;}
#design01 .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 design02
=========================================================================================================== */
#design02 {background: url(../images/design/sp-design02-bg.png) no-repeat top center;background-size: 100% auto;padding-top: 6.634vw;margin-bottom: 12vw;}
#design02 .inner {padding: 0 2.899vw;}
#design02 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: 25.155vw;}
#design02 h2::before {content: '';position: absolute;background: url(../images/design/sp-design02.png) no-repeat top center;background-size: 100% auto;width: 9.179vw;height: 12.802vw;left: -16.65vw;top: 2.208vw;}
#design02 h2::after {content: '';position: absolute;background: #F04D30;height: 15.942vw;width: 0.242vw;top: -1.2vw;left: -3.631vw;}
#design02 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 6.146vw 6.879vw 9.246vw 6.579vw;width: 85.99vw;margin: -8px auto 0;position: relative;}
#design02 .text01 {margin-bottom: 2.106vw;font-weight: 500;}
#design02 .text02 {margin-bottom: 4.756vw;font-weight: 500;}
#design02 .btn {width: 72.464vw;margin: 0 auto;}


/* ==========================================================================================================
sp design03
=========================================================================================================== */
#design03 {background: url(../images/design/sp-design03-bg.png) no-repeat top center;background-size: 100% auto;padding-top: 6.634vw;margin-bottom: 12vw;}
#design03 .inner {padding: 0 2.899vw;}
#design03 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: 25.155vw;}
#design03 h2::before {content: '';position: absolute;background: url(../images/design/sp-design03.png) no-repeat top center;background-size: 100% auto;width: 9.179vw;height: 12.802vw;left: -16.65vw;top: 2.208vw;}
#design03 h2::after {content: '';position: absolute;background: #F04D30;height: 15.942vw;width: 0.242vw;top: -1.2vw;left: -3.631vw;}
#design03 .box {background: #fff;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);padding: 6.146vw 6.879vw 0.946vw 6.579vw;width: 85.99vw;margin: -8px auto 0;position: relative;}
#design03 .text01 {margin-bottom: 2.106vw;font-weight: 500;}
#design03 .text02 { margin-bottom: 5.556vw;font-weight: 500;}

  

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

#middle {background: #FAFAF5;padding-top: 31.401vw;padding-bottom: 76.043vw;}
#middle .inner {padding: 0 4.589vw; position: relative;}
#middle figure {position: absolute;top: -19.277vw;left: 50%;transform: translateX(-50%);width: 76.329vw;}
#middle .box {width: 85.99vw;position: absolute;bottom: -65.657vw;left: 50%;transform: translateX(-50%);background: #fff;padding: 6.246vw 7.696vw 7.971vw 7.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;}





}