@charset "UTF-8";
@media screen and (min-width: 768px),print {
.seo_bread_list {margin-bottom: 32px!important;}
main{width: 100%!important; max-width: 1920px!important; margin: 0 auto!important;}

#con1 {}
#con1 .bx{width: 100%; max-width: 1920px; margin: 0 auto 20px;}
#con1 .bx .ttl1{width: 820px; margin: 0 auto 10px; font-size: 57px; font-weight: bold; text-align: center; letter-spacing: 8.5px; line-height: 1.55; position: relative; padding: 30px 0px 0 8px;}
#con1 .bx .ttl1::before{content: ""; width: 88px; height: 88px; margin: 0 auto; background: url(../images/concept/con1-ttl1-icon1.svg) no-repeat top center; position: absolute; left: 0; top: 0;}
#con1 .bx .ttl1::after{content: ""; width: 88px; height: 88px; margin: 0 auto; background: url(../images/concept/con1-ttl1-icon2.svg) no-repeat top center; position: absolute; right: 0; bottom: 0;}
#con1 .bx .ttl2{font-size: 39px; font-weight: bold; text-align: center; color: #3878E8; letter-spacing: 6px; line-height: 2; margin-bottom: 64px; padding-left: 7px;}

#con1 .bx .con1-bigimg {width: 100%; margin: 0 auto 75px;}
#con1 .bx .loop {
width: 100%;
height: 366px; /*画像の高さ等*/
background: url(../images/concept/con1-bigimg.png) repeat-x;
background-position: center;
animation: bgloop 30s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/
}

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

#con1 .bx .txt1{font-size: 20px; font-weight: 500; text-align: center; letter-spacing: 1.8px; line-height: 1.8; margin-bottom: 76px;}



#con2 {}
#con2 .all-bx{margin-bottom: 53px; background: linear-gradient(180deg,#fff 0,#fff 300px,#F5F5E8 300px,#F5F5E8 calc(100% - 300px),#fff calc(100% - 300px),#fff 100%);}

#con2 .bx1{width: 100%; max-width: 1920px; margin: 0 auto 10px; padding: 146px 0 115px; background: linear-gradient(to right,transparent 0%,transparent 40%,#FAFAF5 40%,#FAFAF5 100%);}
#con2 .bx1 .inner{width: 1280px; margin: 0 auto; position: relative;}
#con2 .bx1 .inner .in-bx{width: 550px; margin-left: auto; margin-right: 90px;}
#con2 .bx1 .inner .in-bx .ttl1{font-size: 25px; font-weight: bold; letter-spacing: 2.5px; line-height: 1.8; margin-bottom: 25px;}
#con2 .bx1 .inner .in-bx .img{position: absolute; left: 0; top: -95px;}
#con2 .bx1 .inner .in-bx .txt1{font-size: 16px; letter-spacing: 0.8px; line-height: 1.8; margin-bottom: 33px;}

#con2 .bx2{width: 100%; max-width: 1920px; margin: 0 auto 10px; padding: 146px 0 105px; }
#con2 .bx2 .inner{width: 1280px; margin: 0 auto; position: relative;}
#con2 .bx2 .inner .in-bx{width: 550px; margin-left: auto; margin-right: 90px;}
#con2 .bx2 .inner .in-bx .ttl1{font-size: 25px; font-weight: bold; letter-spacing: 2.5px; line-height: 1.6; margin-bottom: 27px;}
#con2 .bx2 .inner .in-bx .img{position: absolute; left: 0; top: -108px;}
#con2 .bx2 .inner .in-bx .txt1{font-size: 16px; letter-spacing: 0.8px; line-height: 1.8; margin-bottom: 33px;}

#con2 .bx3{width: 100%; max-width: 1920px; margin: 0 auto 10px; padding: 116px 0 88px; background: linear-gradient(to right,#FAFAF5 0%,#FAFAF5 60%,transparent 60%,transparent 100%);}
#con2 .bx3 .inner{width: 1280px; margin: 0 auto; position: relative;}
#con2 .bx3 .inner .in-bx{width: 550px; margin-right: auto; margin-left: 90px;}
#con2 .bx3 .inner .in-bx .ttl1{font-size: 25px; font-weight: bold; letter-spacing: 2.5px; line-height: 1.8; margin-bottom: 25px;}
#con2 .bx3 .inner .in-bx .img{position: absolute; right: 0; top: -66px;}
#con2 .bx3 .inner .in-bx .txt1{font-size: 16px; letter-spacing: 0.8px; line-height: 1.8; margin-bottom: 33px;}

#con2 .bx4{width: 100%; max-width: 1920px; margin: 0 auto 10px; padding: 103px 0 64px; }
#con2 .bx4 .inner{width: 1280px; margin: 0 auto; position: relative;}
#con2 .bx4 .inner .in-bx{width: 550px; margin-right: auto; margin-left: 90px;}
#con2 .bx4 .inner .in-bx .ttl1{font-size: 25px; font-weight: bold; letter-spacing: 2.5px; line-height: 1.8; margin-bottom: 25px;}
#con2 .bx4 .inner .in-bx .img{position: absolute; right: 0; top: -66px;}
#con2 .bx4 .inner .in-bx .txt1{font-size: 16px; letter-spacing: 0.8px; line-height: 1.8; margin-bottom: 33px;}

#con2 .bx5{width: 100%; max-width: 1920px; margin: 0 auto 10px; padding: 146px 0 115px; background: linear-gradient(to right,transparent 0%,transparent 40%,#FAFAF5 40%,#FAFAF5 100%);}
#con2 .bx5 .inner{width: 1280px; margin: 0 auto; position: relative;}
#con2 .bx5 .inner .in-bx{width: 550px; margin-left: auto; margin-right: 90px;}
#con2 .bx5 .inner .in-bx .ttl1{font-size: 25px; font-weight: bold; letter-spacing: 2.5px; line-height: 1.5; margin-bottom: 27px;}
#con2 .bx5 .inner .in-bx .img{position: absolute; left: 0; top: -95px;}
#con2 .bx5 .inner .in-bx .txt1{font-size: 16px; letter-spacing: 0.8px; line-height: 1.9; margin-bottom: 28px;}


#con3 {}
#con3 .bx{width: 100%; max-width: 1920px; margin: 0 auto 100px; background: url(../images/concept/con3-bg.png) no-repeat bottom center; padding-bottom: 464px;;}
#con3 .bx .inner{width: 898px; margin: 0 auto; background: #fff; padding: 80px 0 66px;}
#con3 .bx .inner .ttl1{font-size: 32px; font-weight: bold; letter-spacing: 3px; line-height: 1.8; text-align: center; margin-bottom: 32px;}
#con3 .bx .inner .txt1{font-size: 16px; letter-spacing: 0.8px; line-height: 1.88; text-align: center; }



}




@media screen and (max-width: 767px) {
#con1 {}
#con1 .bx{width: 100%; margin: 10vw auto 9vw;}
#con1 .bx .ttl1{width: 100%; margin: 0 auto 1vw; font-size: 5.2vw; font-weight: bold; text-align: center; letter-spacing: 1.2vw; line-height: 1.75; position: relative; padding: 3vw 0px 0 1vw;}
#con1 .bx .ttl1::before{content: ""; width: 15vw; height: 15vw; margin: 0 auto; background: url(../images/concept/con1-ttl1-icon1.svg) no-repeat top center; position: absolute; left: 5vw; top: 0; background-size: 8vw;}
#con1 .bx .ttl1::after{content: ""; width: 15vw; height: 15vw; margin: 0 auto; background: url(../images/concept/con1-ttl1-icon2.svg) no-repeat top center; position: absolute; right: 7.5vw; bottom: -7vw; background-size: 8vw;}
#con1 .bx .ttl2{font-size: 4vw; font-weight: bold; text-align: center; color: #3878E8; letter-spacing: 0.2vw; line-height: 2; margin-bottom: 9vw;}

#con1 .bx .con1-bigimg {width: 100%; margin: 0 auto 7vw;}
#con1 .bx .loop {
width: 100%;
height: 43vw; /*画像の高さ等*/
background: url(../images/concept/sp-con1-bigimg.png) repeat-x;
background-position: center; background-size: 255%;
animation: bgloop 30s linear infinite; /*秒数等はお好きな数値に、infiniteは残す*/
}

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

#con1 .bx .txt1{font-size: 4.1vw; font-weight: 500; letter-spacing: 0.2vw; line-height: 1.95; margin-bottom: 5vw; padding: 0 9vw;}



#con2 {}
#con2 .all-bx{margin-bottom: 6vw; }

#con2 .bx1{width: 100%; margin: 0 auto; padding: 9vw 0 3vw; background: #FAFAF5}
#con2 .bx1 .inner{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx1 .inner .in-bx{width: 84%; margin: 0 auto;}
#con2 .bx1 .inner .in-bx .ttl1{font-size: 5.9vw; font-weight: bold; letter-spacing: 0.0vw; line-height: 1.6; margin-bottom: 6vw; text-align: center; padding-left: 0.5vw;}
#con2 .bx1 .inner .in-bx .img{margin-bottom: 7vw;}
#con2 .bx1 .inner .in-bx .txt1{font-size: 3.9vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 8vw;}

#con2 .bx2{width: 100%; margin: 0 auto; padding: 12vw 0 4vw; background: #F5F5E8}
#con2 .bx2 .inner{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx2 .inner .in-bx{width: 84%; margin: 0 auto;}
#con2 .bx2 .inner .in-bx .ttl1{font-size: 5.5vw; font-weight: bold; letter-spacing: 0.0vw; line-height: 1.6; margin-bottom: 6vw; text-align: center; padding-left: 0.5vw;}
#con2 .bx2 .inner .in-bx .img{margin-bottom: 7vw;}
#con2 .bx2 .inner .in-bx .txt1{font-size: 3.9vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 8vw;}

#con2 .bx3{width: 100%; margin: 0 auto; padding: 9vw 0 4vw; background: #FAFAF5}
#con2 .bx3 .inner{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx3 .inner .in-bx{width: 84%; margin: 0 auto;}
#con2 .bx3 .inner .in-bx .ttl1{font-size: 5.9vw; font-weight: bold; letter-spacing: 0.0vw; line-height: 1.6; margin-bottom: 6vw; text-align: center; padding-left: 0.5vw;}
#con2 .bx3 .inner .in-bx .img{margin-bottom: 7vw;}
#con2 .bx3 .inner .in-bx .txt1{font-size: 3.9vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 8vw;}

#con2 .bx4{width: 100%; margin: 0 auto; padding: 12vw 0 4vw; background: #F5F5E8}
#con2 .bx4 .inner{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx4 .inner .in-bx{width: 84%; margin: 0 auto;}
#con2 .bx4 .inner .in-bx .ttl1{font-size: 5.9vw; font-weight: bold; letter-spacing: 0.0vw; line-height: 1.45; margin-bottom: 7vw; text-align: center; padding-left: 0.5vw;}
#con2 .bx4 .inner .in-bx .img{margin-bottom: 6vw;}
#con2 .bx4 .inner .in-bx .txt1{font-size: 3.9vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 8vw;}

#con2 .bx5{width: 100%; margin: 0 auto; padding: 9vw 0 4vw; background: #FAFAF5}
#con2 .bx5 .inner{width: 100%; margin: 0 auto; position: relative;}
#con2 .bx5 .inner .in-bx{width: 84%; margin: 0 auto;}
#con2 .bx5 .inner .in-bx .ttl1{font-size: 5.6vw; font-weight: bold; letter-spacing: 0.2vw; line-height: 1.65; margin-bottom: 7vw; text-align: center; padding-left: 0.5vw;}
#con2 .bx5 .inner .in-bx .img{margin-bottom: 6vw;}
#con2 .bx5 .inner .in-bx .txt1{font-size: 3.9vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 8vw;}


#con3 {}
#con3 .bx{width: 100%; margin: 0 auto 10vw; background: url(../images/concept/sp-con3-bg.png) no-repeat bottom center; padding-bottom: 39vw; background-size: 100%;}
#con3 .bx .inner{width: 92%; margin: 0 auto; background: #fff; padding: 8vw 4vw 4vw;}
#con3 .bx .inner .ttl1{font-size: 7vw; font-weight: bold; letter-spacing: 0.4vw; line-height: 1.5; text-align: center; margin-bottom: 7vw;}
#con3 .bx .inner .txt1{font-size: 3.9vw; letter-spacing: 0.2vw; line-height: 1.8; margin-bottom: 8vw;}





}