@charset "UTF-8";
@media screen and (min-width: 768px),print {

#con01{ margin-top: 80px; padding-bottom: 172px; background: url(../images/performance/con01-bg01.jpg) no-repeat center top,#F3F3F3;  }
#con01 .inner-Box{ width: 1200px; margin: 0 auto; padding-top: 80px; position: relative; }
#con01 .ttl{ position: absolute; top: -30px; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); }
#con01 .box1{ background-color: #1A1A1A; padding: 87px 0 67px 100px; margin-bottom: 90px; position: relative; }
#con01 .box1 .txt{ color: #A27F2B; font-size: 21px; font-weight: bold; margin-bottom: 8px; }
#con01 .box1 .ttl1{ color: #fff; font-size: 36px; font-weight: bold; line-height: 60px; letter-spacing: 1.5px; margin-bottom: 55px; }
#con01 .box1 .txt1{ color: #fff; line-height: 30px; margin-bottom: 20px; }
#con01 .box1 .pic{ position: absolute; top:63px; right: -40px; }
#con01 .box2{  }
#con01 .box2 .icon{ width: 60px; margin: 0 auto 40px; }
#con01 .box2 .ttl2{ width: 586px; margin: 0 auto 30px; }
#con01 .box2 .txt2{ text-align: center; line-height: 30px; margin-bottom: 53px; }
#con01 .box2 .inbox1{ position: relative; width: 1100px; margin: 0 auto 54px; }
#con01 .box2 .inbox1 .ttl3{ padding: 36px 0 42px 0; text-align: center; color: #fff; background-color: #A27F2B; font-size: 21px; font-weight: bold; line-height: 41px; letter-spacing: 1.5px; margin-bottom: 10px; }
#con01 .box2 .inbox1 .ttl3 span{ font-size: 28px; font-weight: bold; line-height: 41px; letter-spacing: 2px; }
#con01 .box2 .inbox1 .icon1{ position: absolute; top: -61px; left: 140px; }
#con01 .box2 .inbox1 .icon2{ position: absolute; top: -15px; right: 13px; }
#con01 .box2 .inbox1 .list{ width: 1100px; margin: 0 auto; padding: 40px 47px 72px; display: flex; justify-content: space-between; background-color: #fff; }
#con01 .box2 .inbox2{ width: 1100px; margin: 0 auto; position: relative; padding-left: 47px; }
#con01 .box2 .inbox2 .pic1{ position: absolute; top: 0; right: 0; }
#con01 .box2 .inbox2 .ttl4{ color: #A27F2B; font-size: 28px; font-weight: bold; letter-spacing: 1.5px; margin-bottom: 26px; }
#con01 .box2 .inbox2 .list{ width: 460px; }
#con01 .box2 .inbox2 .list li{font-size: 18px; font-weight: bold; letter-spacing: 1px; width: 460px; background: url(../images/performance/con01-bg02.png) no-repeat left 21px; padding: 17px 0 17px 40px; border-bottom: 1px dotted #707070; }

#con02{ padding-top: 64px; margin-bottom: 174px; }
#con02 .inner-Box{ width: 1000px; margin: 0 auto; }
#con02 .icon{ width: 188px; margin: 0 auto 25px; }
#con02 .ttl{ width: 699px; margin: 0 auto; padding-bottom: 30px; }
#con02 .box1{ width: 1000px; margin: 0 auto; padding-top: 43px; overflow: hidden; border-top: 1px dotted; }
#con02 .box1 .inbox1{ float: left; width: 470px; }
#con02 .box1 .inbox1 .icon1{ width: 52px; margin: 0 auto 20px; }
#con02 .box1 .inbox1 .ttl1{ text-align: center; font-size: 24px; font-weight: bold; letter-spacing: 1px; margin-bottom: 5px; }
#con02 .box1 .inbox1 .ttl1 span{ color: #A27F2B; }
#con02 .box1 .inbox1 .txt-area{ width: 375px; margin: 0 auto; padding: 25px; margin-top: -50px; background-color: #fff; position: relative; }
#con02 .box1 .inbox1 .txt{  }
#con02 .box1 .inbox2{ float: right; width: 470px; }
#con02 .box1 .inbox2 .icon1{ width: 52px; margin: 0 auto 20px; }
#con02 .box1 .inbox2 .ttl1{ text-align: center; font-size: 24px; font-weight: bold; letter-spacing: 1px; margin-bottom: 5px; }
#con02 .box1 .inbox2 .ttl1 span{ color: #A27F2B; }
#con02 .box1 .inbox2 .txt-area{ width: 375px; margin: 0 auto; padding: 25px; margin-top: -50px; background-color: #fff; position: relative; }
#con02 .box1 .inbox2 .txt{  }

#con03{ margin-bottom: 80px; background: url(../images/performance/con03-bg01.jpg) no-repeat center top; }
#con03 .inner-Box{ width: 1200px;min-height: 480px; margin: 0 auto; padding: 131px 0 0; position: relative; }
#con03 .icon{ position: absolute; top: 20px; left: -80px; }
#con03 .txt{ color: #A27F2B; font-size: 21px; font-weight: bold; letter-spacing: 1.5px; margin-bottom: 15px; }
#con03 .ttl{ color: #fff; font-size: 38px; font-weight: bold; line-height: 64px; letter-spacing: 1.5px; margin-bottom: 15px; }
#con03 .txt1{ color: #fff; line-height: 30px; margin-bottom: 128px; }
#con03 .pic{ position: absolute; top: -72px; right: 0; }
#con03 .box1{ background-color: #fff; padding-top: 58px; position: relative; }
#con03 .box1 .ttl1{ font-size: 25px; font-weight: bold;text-align: center; margin-bottom: 20px; }
#con03 .box1 .ttl1 span{ color: #A27F2B; }
#con03 .box1 .txt2{ text-align: center; margin-bottom: 30px; }
#con03 .box1 .pic{ position: absolute; top: 56px; right: 148px; }
#con03 .box1 .bnr{ width: 1020px; margin: 0 auto; }

.bnr-area{ width: 980px; margin: 0 auto; }
.bnr-area .box1 .list{ background-color: #F3F3F3; padding: 55px 50px; margin-bottom: 60px; display: flex; justify-content: space-between; }
.bnr-area .box2 .list{ width: 820px; margin: 0 auto; display: flex; justify-content: space-between; }



}


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

#con01{ margin-top: 8vw; padding-bottom: 17vw; background: url(../images/performance/sp-con01-bg01.jpg) no-repeat center top,#F3F3F3; background-size: 100%; }
#con01 .inner-Box{ padding-top: 8vw; position: relative; }
#con01 .ttl{ padding: 0 8%; margin-bottom: 6vw; }
#con01 .box1{ background-color: #1A1A1A; padding: 8vw 6vw; margin: 0 5% 13%; position: relative; }
#con01 .box1 .txt{ color: #A27F2B; font-size: 3.8vw; font-weight: bold; margin-bottom: 1vw; }
#con01 .box1 .ttl1{ color: #fff; font-size: 5.4vw; font-weight: bold; line-height: 1.5; letter-spacing: 1.5px; margin-bottom: 5vw; }
#con01 .box1 .txt1{ color: #fff; line-height: 1.5; margin-bottom: 4vw; font-size: 3.7vw; }
#con01 .box1 .pic{ margin-bottom: 5vw; }
#con01 .box2{ padding: 0 5%; }
#con01 .box2 .icon{ margin: 0 37vw 5vw; }
#con01 .box2 .ttl2{ margin-bottom: 3vw; }
#con01 .box2 .txt2{ text-align: center; line-height: 1.5; margin-bottom: 12vw; font-size: 3.4vw; }
#con01 .box2 .inbox1{ position: relative; margin: 0 auto 5vw; }
#con01 .box2 .inbox1 .ttl3{ padding: 8vw 2vw; text-align: center; color: #fff; background-color: #A27F2B; font-size: 3.8vw; font-weight: bold; line-height: 1.5; letter-spacing: 1.5px; margin-bottom: 1vw; }
#con01 .box2 .inbox1 .ttl3 span{ font-size: 4.8vw; font-weight: bold; line-height: 1.5; letter-spacing: 2px; }
#con01 .box2 .inbox1 .icon1{ position: absolute; top: -9vw; left: 0vw; width: 30%; }
#con01 .box2 .inbox1 .icon2{ position: absolute; top: -10vw; right: 7vw; width: 20%; }
#con01 .box2 .inbox1 .list{ padding: 4vw; background-color: #fff; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#con01 .box2 .inbox1 .list li{ width: 49%; margin-right: 2%; margin-bottom: 4vw; }
#con01 .box2 .inbox1 .list li:nth-child(2n){ margin-right: 0; }
#con01 .box2 .inbox1 .list li:nth-child(5){ margin-left: 21vw; margin-right: 0; }
#con01 .box2 .inbox2{ position: relative; padding-left: 4vw; }
#con01 .box2 .inbox2 .pic1{ margin-bottom: 4vw; }
#con01 .box2 .inbox2 .ttl4{ color: #A27F2B; font-size: 5.2vw; font-weight: bold; letter-spacing: 1.5px; margin-bottom: 3vw; }
#con01 .box2 .inbox2 .list{  }
#con01 .box2 .inbox2 .list li{ background: url(../images/performance/con01-bg02.png) no-repeat left 1.5vw; padding: 2vw 0 2vw 8vw; border-bottom: 1px dotted #707070; font-size: 3.5vw; font-weight: bold; letter-spacing: 0.2vw}

#con02{ padding-top: 6vw; margin-bottom: 17vw; }
#con02 .inner-Box{ padding: 0 5%; }
#con02 .icon{ margin: 0 28vw 3vw; }
#con02 .ttl{ padding-bottom: 4vw; }
#con02 .box1{ padding-top: 4vw; overflow: hidden; border-top: 1px dotted; }
#con02 .box1 .inbox1{  }
#con02 .box1 .inbox1 .icon1{ margin: 0 38vw 3vw; }
#con02 .box1 .inbox1 .ttl1{ text-align: center; font-size: 4.8vw; font-weight: bold; letter-spacing: 1px; margin-bottom: 1vw; }
#con02 .box1 .inbox1 .ttl1 span{ color: #A27F2B; }
#con02 .box1 .inbox1 .txt-area{ width: 80%; margin: -9vw auto 0; padding: 4vw; background-color: #fff; position: relative; }
#con02 .box1 .inbox1 .txt{ font-size: 3.6vw }
#con02 .box1 .inbox2{  }
#con02 .box1 .inbox2 .icon1{ margin: 0 38vw 3vw; }
#con02 .box1 .inbox2 .ttl1{ text-align: center; font-size: 4.8vw; font-weight: bold; letter-spacing: 1px; margin-bottom: 1vw; }
#con02 .box1 .inbox2 .ttl1 span{ color: #A27F2B; }
#con02 .box1 .inbox2 .txt-area{ width: 80%; margin: -9vw auto 0; padding: 4vw; background-color: #fff; position: relative; }
#con02 .box1 .inbox2 .txt{  font-size: 3.6vw}

#con03{ margin-bottom: 8vw; background: url(../images/performance/sp-con03-bg01.jpg) no-repeat center top; background-size: 100%; }
#con03 .inner-Box{ padding: 10vw 6vw 10vw; position: relative;  }
#con03 .icon{ position: absolute; top: -12vw; left: 5vw; width: 33%; }
#con03 .txt{ color: #A27F2B; font-size: 4vw; font-weight: bold; letter-spacing: 1.5px; margin-bottom: 2vw; }
#con03 .ttl{ color: #fff; font-size: 6vw; font-weight: bold; line-height: 1.5; letter-spacing: 1.5px; margin-bottom: 3vw; }
#con03 .txt1{ color: #fff; line-height: 1.5; margin-bottom: 4vw; font-size: 3.6vw; }
#con03 .pic{ margin-bottom: 6vw; }
#con03 .box1{ background-color: #fff; padding-top: 5vw; position: relative; }
#con03 .box1 .ttl1{ font-size: 4.3vw; font-weight: bold;text-align: center; margin-bottom: 3vw; }
#con03 .box1 .ttl1 span{ color: #A27F2B; }
#con03 .box1 .txt2{ text-align: center; margin-bottom: 4vw; font-size: 3.6vw; }
#con03 .box1 .pic{ position: absolute; top: 10.5vw; right: -1.5vw; width: 23%; }
#con03 .box1 .bnr{  }

.bnr-area{ padding: 0 5%; }
.bnr-area .box1 .list{ background-color: #F3F3F3; padding: 5vw; margin-bottom: 6vw;  }
.bnr-area .box1 .list li{ margin-bottom: 6vw;  }
.bnr-area .box2 .list li{ margin-bottom: 6vw; }


}