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

#main-paint{width: 100%; background: url(../images/paint/main-bg.png) no-repeat left 20vw top #FFEB00; margin: 0 auto 100px; padding: 50px 0; background-size: contain; margin-top: 3vw;}
#main-paint .main-bx{width: 1400px; margin: 0 auto; position: relative;}
#main-paint .main-bx h3{text-align: center;}
#main-paint .main-bx .icon1{position: absolute; top: -4vw;}
#main-paint .main-bx .icon2{position: absolute; top: -4vw; right: 0}

.main-sub {width: 1200px; margin: 0 auto 200px;}
.main-sub h4{text-align: center; margin-bottom: 30px;}
.main-sub p{text-align: center; margin-bottom: 30px;}

#con1 {width: 100%; margin: 0 auto; background: url(../images/paint/con1-bg.png) no-repeat top center; background-size: cover; padding: 50px 0 100px}
#con1 .con1-bx{margin: 0 -50px;}
#con1 .con1-inner{width: 1400px; margin: -180px auto 100px}
#con1 .con1-inner .main-ttl{text-align: center; margin-bottom: 50px;}
#con1 .ul1{margin-bottom: 50px; 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;}
#con1 .li1{ width: 454px; border-right: 1px solid #B5A981; padding-right: 23px;}
#con1 .li1:nth-child(2){ width: 486px; border-right: 1px solid #B5A981; padding: 0 2%}
#con1 .li1:nth-child(3){ width: 460px; border-right: none; padding-right: 0;}
#con1 .li1 .inner{}
#con1 .li1 .ttl{padding-left: 50px; margin-bottom: 10px;}
#con1 .li1 .img{text-align: right; margin-bottom: 20px;}
#con1 .li1 .txt{width: 430px; font-size: 18px; background: #fff; padding: 5% 5% 0 5%; height: 230px; margin-left: auto;}

#con1 .point-bx{width: 1400px; margin: 0 auto; background: #fff; padding: 50px; position: relative;}
#con1 .point-bx .icon{position: absolute; top: -30px; left: 200px; }
#con1 .point-bx .txt{font-size: 18px; margin-bottom: 30px; font-weight: bold; text-align: center;}
#con1 .point-bx .txt span{color: #FF23A9}
#con1 .point-bx .img{text-align: center;}

#color-main {width: 100%; margin: 0 auto; padding-top: 100px; padding-bottom: 100px; background: url(../images/paint/color-icon1.png) no-repeat left top,url(../images/paint/color-icon2.png) no-repeat right 100px top 150px,url(../images/paint/color-icon3.png) no-repeat left bottom; background-size: 41vw,35vw,25vw;}
#color-main .color-bx {margin: 0 -50px;}
#color-main .color-inner {width: 1400px; margin: 0 auto; position: relative;}
#color-main .color-inner .ttl1{text-align: center; margin-bottom: 100px;}
#color-main .color-inner .txt1{font-size: 18px; margin-bottom: 100px; margin-left: 200px;}
#color-main .color-inner .img{text-align: center;}
#color-main .color-inner .txt2{font-size: 14px; text-align: right;}

#taiou {width: 100%; background: #004387; padding: 50px 0; color: #fff; margin-bottom: 100px;}
#taiou .taiou-bx{width: 1000px; margin: 0 auto; text-align: center;}
#taiou h3{text-align: center; font-size: 26px; font-weight: bold; letter-spacing: 5px; margin-bottom: 30px;}
#taiou ul{-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; 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;}
#taiou li{margin-right: 25px; margin-bottom: 20px;}
#taiou .txt1 {font-size: 20px; font-weight: bold; text-align: center; padding-top: 5px;}
#taiou .txt2 {font-size: 24px; border-bottom: 1px solid #fff; display: inline-block; letter-spacing: 2px}


#paint-form {width: 1000px; text-align: center; margin: 0 auto 100px; padding: 50px 50px 20px; position: relative; background: url(../images/paint/form-icon2.png) no-repeat right 20px bottom #FFEA00;}
#paint-form h3{font-size: 26px; text-align: center; font-weight: 600; background: url(../images/paint/form-icon1.png) no-repeat left 170px top 10px;}
#paint-form h3 span{font-size: 40px; }
#paint-form .img{margin-bottom: 20px;}
#paint-form .txt{font-size: 18px;}


#paint-pack {width: 1200px; margin: 0 auto 100px;}
#paint-pack h3{margin-bottom: 10px; text-align: center;}
#paint-pack p{margin-bottom: 20px; text-align: center;}

#paint-otasuke { width: 1400px; max-width: 100%; margin: 0 auto 200px; background: url(../images/index/pr-bg.png) repeat; padding: 1.6% 1%; position: relative; }
#paint-otasuke .pr-bx { width: 1350px; max-width: 100%; margin: 0 auto; padding: 3% 5%; background: #fff; position: relative; }
#paint-otasuke .pr-bx .img{ position: absolute; top: -50px; right: 250px}
#paint-otasuke .pr-bx .pr-ttl3 { width: 1200px; max-width: 75vw; margin: 0 auto; display: inline-block; text-align: center; margin-bottom: 20px; }
#paint-otasuke .pr-allbx { width: 1250px; max-width: 100%; position: relative;}
#paint-otasuke .pr-main-bx { width: 45%; float: left; position: relative; margin-right: 7%; }
#paint-otasuke .pr-main-bx1 { width: 45%; float: left; position: relative; margin-right: 0%; }
#paint-otasuke .pr-main-bx .span1 { font-weight: bold; display: block; padding-top: 10px; }
#paint-otasuke .pr-main-bx .btn { position: absolute; bottom: 0; right: 0; }
#paint-otasuke .pr-main-bx1 .span1 { font-weight: bold; display: block; padding-top: 10px; }
#paint-otasuke .pr-main-bx1 .btn { position: absolute; bottom: 0; right: 0; }





}

@media screen and (max-width: 767px) {
h1.main-title .jp{font-size: 5vw; text-align: center;}

#main-paint{width: 100vw; background: url(../images/paint/main-bg.png) no-repeat left 3vw top -10vw #FFEB00; margin: 0 auto 10vw; padding: 16vw 0 8vw; background-size: contain; margin-top: 12vw;}
#main-paint .main-bx{width: 100vw; margin: 0 auto; position: relative;}
#main-paint .main-bx h3{width: 90vw; margin: 0 auto; text-align: center; position: relative;z-index: 1}
#main-paint .main-bx .icon1{width: 25vw; position: absolute; top: -20vw;}
#main-paint .main-bx .icon2{width: 25vw; position: absolute; top: -19vw; right: 0}

.main-sub {width: 95vw; margin: 0 auto 20vw;}
.main-sub h4{text-align: center; margin-bottom: 5vw;}
.main-sub p{text-align: center; margin-bottom: 5vw;}

#con1 {width: 100vw; margin: 0 auto; background: url(../images/paint/sp-con1-bg.png) no-repeat top center; background-size: cover; padding: 5vw 0 10vw}
#con1 .con1-bx{margin: 0 -3vw;}
#con1 .con1-inner{width: 90%; margin: 0 auto;}
#con1 .con1-inner .main-ttl{ width: 95vw; margin-bottom: 5vw; margin-top: -18vw;}
#con1 .ul1{width: 95vw; margin-bottom: 20vw; 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;}
#con1 .li1{ width: 100vw; border-bottom: 1px solid #B5A981; }
#con1 .li1:nth-child(2){ width: 100vw; border-bottom: 1px solid #B5A981; padding: 0vw}
#con1 .li1:nth-child(3){ width: 100vw; border-bottom: none; padding-right: 0;}
#con1 .li1 .inner{margin-bottom: 5vw;}
#con1 .li1 .ttl{width: 65vw; margin: 0 auto 3vw;}
#con1 .li1 .img{text-align: right; margin-bottom: 5vw;}
#con1 .li1 .txt{width: 95vw; font-size: 3.8vw; background: #fff; padding: 3vw; margin-left: auto;}

#con1 .point-bx{width: 95vw; margin: 0 auto; background: #fff; padding: 5vw; position: relative;}
#con1 .point-bx .icon{width: 38vw; position: absolute; top: -20vw; left: 3vw }
#con1 .point-bx .txt{font-size: 3.4vw; margin-bottom: 5vw; font-weight: bold; text-align: left;}
#con1 .point-bx .txt span{color: #FF23A9}
#con1 .point-bx .img{text-align: center;}

#color-main {width: 100vw; margin: 0 auto; padding-top: 11vw; padding-bottom: 5vw; background: url(../images/paint/color-icon1.png) no-repeat left top,url(../images/paint/color-icon2.png) no-repeat right 0vw top 5vw,url(../images/paint/color-icon3.png) no-repeat left bottom,url(../images/paint/color-icon3.png) no-repeat right bottom; background-size: 51vw,48vw,25vw,25vw;}
#color-main .color-bx {}
#color-main .color-inner {width: 85vw; margin: 0 auto; position: relative;}
#color-main .color-inner .ttl1{text-align: center; margin-bottom: 5vw;}
#color-main .color-inner .txt1{font-size: 3.6vw; margin-bottom: 5vw;}
#color-main .color-inner .img{text-align: center;}
#color-main .color-inner .txt2{font-size: 3vw; text-align: center;}

#taiou {width: 100%; background: #004387; padding: 10vw 0; color: #fff; margin-bottom: 10vw}
#taiou .taiou-bx{width: 90vw; margin: 0 auto; text-align: center;}
#taiou h3{text-align: center; font-size: 4vw; font-weight: bold; letter-spacing: 0.8vw; margin-bottom: 8vw;}
#taiou ul{-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; 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;}
#taiou li{margin-right: 3vw; margin-left: 3vw; margin-bottom: 5vw;}
#taiou .txt1 {font-size: 3.5vw; font-weight: bold; text-align: center; padding-top: 5px;}
#taiou .txt2 {font-size: 4vw; border-bottom: 1px solid #fff; display: inline-block; letter-spacing: 2px}


#paint-form {width: 95vw; text-align: center; margin: 0 auto 10vw; padding: 5vw 5vw 10vw; position: relative; background: url(../images/paint/form-icon2.png) no-repeat right 1vw bottom -5vw #FFEA00; background-size: 24vw}
#paint-form h3{font-size: 4vw; text-align: center; font-weight: 600; background: url(../images/paint/form-icon1.png) no-repeat left 2vw top 2vw; background-size: 8vw}
#paint-form h3 span{font-size: 6vw; }
#paint-form .img{margin-bottom: 5vw;}
#paint-form .txt{font-size: 3.7vw; text-align: left;}

#paint-pack {width: 90%; margin: 0 auto 10%;}
#paint-pack h3{margin-bottom: 5%; text-align: center;}
#paint-pack p{margin-bottom: 10%; text-align: center;}

#paint-otasuke { width: 95vw; margin: 0 auto 15vw; background: url(../images/index/pr-bg.png) repeat; padding: 3vw 0vw; position: relative; }
#paint-otasuke .pr-bx { width: 90vw; margin: 0 auto; padding: 3vw; background: #fff; position: relative; }
#paint-otasuke .pr-bx .img{width: 28vw; position: absolute; top: -4vw; right: 0vw}
#paint-otasuke .pr-bx .pr-ttl3 { width: 90vw; margin: 0 auto;  text-align: left;}
#paint-otasuke .pr-allbx { width: 85vw; }
#paint-otasuke .pr-main-bx { width: 85vw; position: relative; margin-right: 5vw; margin-bottom: 5%; }
#paint-otasuke .pr-main-bx1 { width: 85vw; position: relative; margin-right: 0%; }
#paint-otasuke .pr-main-bx .span1 { font-size: 3.4vw; font-weight: bold; display: block; padding-top: 3vw; }
#paint-otasuke .pr-main-bx .btn { position: absolute; bottom: 0vw; right: 0vw; width: 17vw; }
#paint-otasuke .pr-main-bx1 .span1 { font-size: 3.2vw; font-weight: bold; display: block; padding-top: 3vw; }
#paint-otasuke .pr-main-bx1 .btn { position: absolute; bottom: 0vw; right: 0vw; width: 17vw; }


}