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

.topcon{position: relative;top: -96px;}
.full-width { width: 100vw; position: relative; left: 50%;  right: 50%;  margin-left: -50vw;  margin-right: -50vw;}
.seo_bread_list{color: #fff;position: relative;z-index: 3;}
.seo_bread_list a{ color: #fff; }

#con1 {}
#con1 .bx{width: 100%; margin: 127px auto 50px;}
#con1 .bx .inner{width: 1200px; margin: 0 auto; position: relative;}
#con1 .bx .inner .ttl{text-align: center; margin-bottom: 38px;}
#con1 .bx .inner .icon{position: absolute; left: 123px; top: 100px;}
#con1 .bx .inner .img{text-align: center; margin-bottom: 55px;}
#con1 .bx .inner .ttl1{font-size: 30px; font-weight: bold; text-align: center; letter-spacing: 3px; line-height: 1.6; padding-bottom: 20px; position: relative; margin-bottom: 62px;}
#con1 .bx .inner .ttl1::after{content: ""; width: 658px; height: 8px; margin: 0 auto; background: #F7C836; position: absolute; left: 0; right: 0; bottom: 0;}

/* top-last-bigimg -------------------------------------*/
.top-last-bigimg {width: 100%; margin: 0 auto 120px;}

.loop {
width: 100%;
height: 340px; /*画像の高さ等*/
background: url(../images/catalog/con1-big-img.png) repeat-x;
background-position: center;
animation: bgloop 30s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/
}

@keyframes bgloop {
from { background-position: 0 0; }
to { background-position: -2000px 0; /*-1000px部分は画像の横幅と同じ数値*/ }
}


#con2 {}
#con2 .bx{width: 1200px; margin: 0 auto 100px; }
#con2 .bx .ttl{text-align: center; margin-bottom: 47px;}
#con2 .bx .inner{width: 1200px; margin: 0 auto; background: #2D704B; padding: 40px 20px;}
#con2 .bx .inner .list{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; justify-content: center;}
#con2 .bx .inner .list li{width: 320px; margin-right: 70px; background: #fff; padding: 28px 10px 17px; position: relative;}
#con2 .bx .inner .list li::after{content: ""; background: url(../images/catalog/con2-bx-icon.svg) no-repeat top center;; width: 47px; height: 17px; position: absolute; right: -57px; top: 122px;}
#con2 .bx .inner .list li:last-child::after{background: none;}
#con2 .bx .inner .list li:nth-child(3){margin-right: 0;}
#con2 .bx .inner .list li .num1{text-align: center; margin-bottom: 28px; margin-left: -10px;}
#con2 .bx .inner .list li .num2{text-align: center; margin-bottom: 32px; margin-left: -5px;}
#con2 .bx .inner .list li .num3{text-align: center; margin-bottom: 20px; }
#con2 .bx .inner .list li .icon1{text-align: center; margin-bottom: 20px; }
#con2 .bx .inner .list li .icon2{text-align: center; margin-bottom: 17px; }
#con2 .bx .inner .list li .icon3{text-align: center; margin-bottom: 17px; margin-left: 10px;}
#con2 .bx .inner .list li .txt{font-size: 18px; font-weight: bold; text-align: center; letter-spacing: 1px; margin-bottom: 7px;}
#con2 .bx .inner .list li .txt-sub{font-size: 14px; text-align: center; letter-spacing: 1px; margin-bottom: 10px;}

#con2 .in-bx {width: 100%; margin: 0 auto 14px; background: #F3F3F3; padding: 62px 0 24px;}
#con2 .in-bx .in-inner{width: 1200px; margin: 0 auto;}
#con2 .in-bx .in-inner .ttl1{font-size: 30px; font-weight: bold; text-align: center; letter-spacing: 3px; line-height: 1.6; padding-bottom: 20px; position: relative; margin-bottom: 104px;}
#con2 .in-bx .in-inner .ttl1::after{content: ""; width: 345px; height: 8px; margin: 0 auto; background: #F7C836; position: absolute; left: 0; right: 0; bottom: 0;}
#con2 .in-bx .in-inner .list{margin-left: 80px; 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; }
#con2 .in-bx .in-inner .list li{margin-right: 65px; margin-bottom: 33px;}
#con2 .in-bx .in-inner .list li:nth-child(odd){margin-top: -70px;}
#con2 .in-bx .in-inner .list li:nth-child(even){margin-right: 0;}

#formboxx h2 img{position: absolute;top: 43px;left: 416px;}

#formboxx {padding-bottom: 128px;margin-bottom: -30px;}
#formboxx .inner-Box {width: 1200px;margin: 0 auto -69px;text-align: center;position: relative;padding-bottom: 148px;}
#formboxx .inner-Box span.icon01 {position: absolute;top: 90px;left: -50px;}
#formboxx .inner-Box p{color: #ffffff;font-size: 16px;letter-spacing: 1.6px;line-height: 36px;}
#formboxx .inner-Box span.icon02 {position: absolute;bottom: 68px;right: 38px;}
#formboxx h2 {color: #fff;background-color: #211f0f;text-align: center;padding: 26px 14px 24px 78px;margin-bottom: 81px;font-size: 36px;letter-spacing: 1.8px;position: relative;}
#formboxx h2::before{content: "";width: 2px;height: 60px;background-color: #ffffff;position: absolute;left: 50%;margin-left: -1px;bottom: -42px;}


  /* form -------------------------------------*/
  .form-Box{line-height: 1.6;width: 1200px;margin: 0 auto;}
  .form-Box .form-Box-inner{padding: 0px 0px 1px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);background-color: #f2f2f2;}
  .form-Box .form-list {margin: 0 230px 47px;font-size: 16px;letter-spacing: 0.8px;line-height: 20px;}
  .form-Box .error {margin: 0 170px;}
  .form-Box .attention-color {color: #ef8027;}
  .form-Box .form-list li {padding-left: 1em;text-indent: -1em;margin-bottom: 0px;}
  .form-Box table {line-height: 1.6;width: 860px;margin: 0 auto 31px;}
  .form-Box th {background: url('../images/index/line.jpg')no-repeat bottom left;text-align: left;width: 34%;padding: 33px 0px 30px 72px;vertical-align: top;font-size: 18px;}
  .form-Box td {background: url('../images/index/line.jpg')no-repeat bottom left;width: 70%;padding: 30px 0px 30px 72px;vertical-align: top;font-size: 18px;line-height: 2.1;}
  .form-Box td img { max-width: 100%; height: auto;}
  .form-Box .from-btn-01 { text-align: center; }
  .form-Box .from-btn-02 {width: 900px;margin-left: auto;margin-right: auto;text-align: center;padding: 40px 0 0px 0;}
  .form-Box .button {border: 0;padding: 0;margin: 0;background: none;}
  .form-Box .button:hover { cursor: pointer; cursor: hand; opacity: 0.8;}
  .form-Box input[type="text"],
  .form-Box input[type="email"],
  .form-Box input[type="tel"],
  .form-Box input[type="date"],
  .form-Box select,
  .form-Box textarea { font-size: 18px; padding: 1%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
  .form-Box textarea {width: 100%; height: 187px;}

.form-Box .from-btn-02 p{ margin-bottom: 30px; }

}

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

.main-title{ margin-bottom: 0vw; }

#con1 {}
#con1 .bx{width: 100%; margin: 24vw auto 5vw;}
#con1 .bx .inner{width: 100%; margin: 0 auto; position: relative;}
#con1 .bx .inner .ttl{width: 76%; margin: 0 auto 17vw; text-align: center; }
#con1 .bx .inner .icon{width: 31.5vw; position: absolute; left: 3vw; top: 28vw;}
#con1 .bx .inner .img{text-align: center; margin-bottom: 8vw;}
#con1 .bx .inner .ttl1{font-size: 6.8vw; font-weight: bold; text-align: center; letter-spacing: 0; line-height: 1.7; padding-bottom: 5vw; position: relative; margin-bottom: 5vw;}
#con1 .bx .inner .ttl1 span{display: inline-block; position: relative;}
#con1 .bx .inner .ttl1 span.ss1::before{content: ""; width: 64vw; height: 1vw; margin: 0 auto; background: #F7C836; position: absolute; left: -3vw; right: 0; bottom: 1vw;}
#con1 .bx .inner .ttl1 span.ss2::before{content: ""; width: 70vw; height: 1vw; margin: 0 auto; background: #F7C836; position: absolute; left: -3vw; right: 0; bottom: 0vw;}

/* top-last-bigimg -------------------------------------*/
.top-last-bigimg {width: 100%; margin: 0 auto 17vw;}

.loop {
width: 100%;
height: 34vw; /*画像の高さ等*/
background: url(../images/catalog/sp-con1-big-img.png) repeat-x;
background-position: center; background-size: cover;
animation: bgloop 30s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/
}

@keyframes bgloop {
from { background-position: 0 0; }
to { background-position: -200vw 0; /*-1000px部分は画像の横幅と同じ数値*/ }
}

#con2 {}
#con2 .bx{width: 100%; margin: 0 auto 10vw; }
#con2 .bx .ttl{width: 49%; margin: 0 auto 10vw; text-align: center; padding-left: 1vw;}
#con2 .bx .inner{width: 92%; margin: 0 auto; background: #2D704B; padding: 10vw 5vw 2vw;}
#con2 .bx .inner .list{}
#con2 .bx .inner .list li{width: 95%; margin: 0 auto 7vw; background: #fff; padding: 6vw 3vw 3vw; position: relative;}
#con2 .bx .inner .list li::after{content: ""; background: url(../images/catalog/sp-con2-bx-icon.svg) no-repeat top center;; width: 10vw; height: 10vw; position: absolute; right: 0; bottom: -20vw;}
#con2 .bx .inner .list li:last-child::after{background: none;}
#con2 .bx .inner .list li .num1{text-align: center; margin-bottom: 7vw; margin-left: -2vw;}
#con2 .bx .inner .list li .num2{text-align: center; margin-bottom: 9vw; }
#con2 .bx .inner .list li .num3{text-align: center; margin-bottom: 6vw; }
#con2 .bx .inner .list li .icon1{text-align: center; margin-bottom: 5vw; }
#con2 .bx .inner .list li .icon2{text-align: center; margin-bottom: 4vw; }
#con2 .bx .inner .list li .icon3{text-align: center; margin-bottom: 4vw; margin-left: 2vw;}
#con2 .bx .inner .list li .txt{font-size: 4.3vw; font-weight: bold; text-align: center; letter-spacing: 0.3vw; margin-bottom: 2vw;}
#con2 .bx .inner .list li:nth-child(2) .txt{font-size: 4.3vw; font-weight: bold; text-align: center; letter-spacing: 0.3vw; margin-bottom: 5vw;}
#con2 .bx .inner .list li:nth-child(3) .txt{font-size: 4.3vw; font-weight: bold; text-align: center; letter-spacing: 0.3vw; margin-bottom: 5vw;}
#con2 .bx .inner .list li .txt-sub{font-size: 3.6vw; text-align: center; letter-spacing: 0; margin-bottom: 3vw;}

#con2 .in-bx {width: 100%; margin: 0 auto 10vw; background: #F3F3F3; padding: 10vw 0 4vw;}
#con2 .in-bx .in-inner{width: 100%; margin: 0 auto;}
#con2 .in-bx .in-inner .ttl1{font-size: 6.8vw; font-weight: bold; text-align: center; letter-spacing: 0; line-height: 1.7; padding-bottom: 5vw; position: relative; margin-bottom: 6vw;}
#con2 .in-bx .in-inner .ttl1::after{content: ""; width: 73vw; height: 1vw; margin: 0 auto; background: #F7C836; position: absolute; left: 0vw; right: 0; bottom: 5vw;}
#con2 .in-bx .in-inner .list{width: 93%; margin: 0 auto; }
#con2 .in-bx .in-inner .list .img1{width: 97%; margin-bottom: 7vw;}
#con2 .in-bx .in-inner .list .img2{width: 94%; margin-bottom: 8vw; margin-left: 3vw;}
#con2 .in-bx .in-inner .list .img3{width: 97%; margin-bottom: 8vw;}
#con2 .in-bx .in-inner .list .img4{width: 94%; margin-bottom: 7vw; margin-left: 3vw;}

#formboxx h2 img{position: absolute; top: 11.4vw; left: 17%; width: 7vw; margin-left: -3vw;}

#formboxx {background-size: 100% auto;padding-bottom: 6.7vw;}
#formboxx .inner-Box {margin: 0 auto -14.1vw;text-align: center;position: relative;padding-bottom: 19.3vw;}
#formboxx .inner-Box span.icon01 {position: absolute;top: -11.3vw;left: 6.5vw;width: 45vw;}
#formboxx .inner-Box p{color: #ffffff;font-size: 3.6vw;letter-spacing: 0.4vw;line-height: 1.7;text-align: left;margin: 0 14vw 0vw 14vw;}
#formboxx .inner-Box span.icon02 {position: absolute;bottom: 8.9vw;right: 5.0vw;}
#formboxx h2 {color: #fff; background-color: #211f0f; text-align: center; padding: 9vw 0vw 7.5vw 13vw; position: relative; margin-bottom: 8.1vw; font-size: 6.2vw; letter-spacing: 1vw;}
#formboxx h2::before{content: "";height: 6.8vw;background-color: #ffffff;position: absolute;left: 50%;margin-left: -0.2vw;bottom: -2.9vw;width: 0.4vw;}

/* form -------------------------------------*/
.form-Box{padding: 4vw 3vw;margin-bottom: 30px;line-height: 1.6;}
.form-Box .form-Box-inner{box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);background-color: #f2f2f2;padding-bottom: 4vw;}
.form-Box .form-list {font-size: 3.2vw;margin: 0 5vw 4vw;}
.form-Box .error {margin-bottom: 3.6vw;text-align: center;}
.form-Box .attention-color {color: #ef8027;}
.form-Box .form-list li { padding-left: 1rem; text-indent: -1rem; margin-bottom: 3px; }
.form-Box table {border-bottom: 1px solid #fff;margin-bottom: 6vw;font-size: 3.4vw;line-height: 1.6;}
.form-Box tr { margin-bottom: 0 !important}
.form-Box th {text-align: left;width: 100%;padding: 3vw 6.5vw;vertical-align: top;font-size: 4vw;}
.form-Box td {background: url('../images/index/line.jpg')no-repeat bottom center;text-align: left;width: 100%;vertical-align: top;padding: 2vw 6.5vw 5.5vw 6.5vw;font-size: 3.9vw;line-height: 2;}
.form-Box .from-btn-01 {text-align: center;margin: 0 5vw 2vw;}
.form-Box .from-btn-02 {margin: 0 6vw;}
.form-Box .button { border: 0; padding: 0; margin: 0; background: none;}
.form-Box .from-btn-02 p { margin-bottom: 3%;}
.form-Box input[type="text"],
.form-Box input[type="email"],
.form-Box input[type="tel"],
.form-Box input[type="date"],
.form-Box select,
.form-Box textarea {width: 99%; margin-bottom: 2%; font-size: 16px; padding: 2%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.form-Box input.input-txt1 {width: 30%; }
.form-Box textarea { line-height: 1.6; min-height: 120px;}
.form-Box select{font-size: 16px; padding: 3% 2% 4%; width: 60%;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.namee{ width: 46%!important; }


}