@charset "utf-8";

#concept{margin: 0 auto;}
.sect1{padding: 30px 0 0 0; margin-bottom: 200px;}
.sect1 .txt{margin-bottom: 26px;}
.sect1 .tit2{margin: 38px 0 31px -11px;}
.sect1 .tit1{margin-bottom: 34px;}




.sect2 {padding: 50px 0 100px 0; background: url(../images/concept/concept-bg-02.jpg) no-repeat center center; background-size: cover;}
.sect2 .row1 {position: relative; margin-bottom: 80px;}
.sect2 .row1 .img01 {position: absolute; bottom: 0; right: 9%; width: 33.86%;}
.sect2 .row1 .tit1 {margin-bottom: 35px;}
.sect2 .row1 .text2 {margin-bottom: 35px;}
.sect2 .row1 .text3 {margin-bottom: 35px;}
.sect2 .row1 figure.img02{width: 58%;}
.sect2 .row2 {position: relative;}
.sect2 .row2 .col1 {width: 66.15%;}
.sect2 .row2 .col2 {position: absolute; bottom: 0; right: 9%; width: 23.4375%;}
.sect2 .row2 .col2 img:first-child {margin-bottom: 7%;}



.sect3{padding: 100px 0 0x 0}
.sect3 .sect3-content {bottom: 0; left: 100px; background: rgba(0, 0, 0, 0.6); padding: 65px 10px 80px 80px; max-width: 450px; width: 100%;color: #fff;}
.sect3 .sect3-content .txt2 {margin-top: 45px;}
.sect3 .sect3-content .txt3 {margin-top: 30px;}
.sect3 .photo img,
.sect3 .photo{width: 100%;}
.sect4 .block2{padding: 70px 0;background: url(../images/concept/concept_bg.jpg) no-repeat;background-size: cover;margin-bottom: 100px;}
.sect4 .block2-content .box-banner{width: 100%;}
.sect4 .block2-content .box-banner .col2{width: 45%;}
.sect4 .block2-content .box-banner .col1{width: 51%;margin-right: 4%;}






/* MEDIA */
@media (max-width:1400px){
     .sect2 .row1 figure.img02{padding-right: 2vw;}
}
@media screen and (max-width: 1200px) {
     .sect3 .sect3-content{right: 4%;}
}

@media screen and (max-width: 1080px) {
     .sect3 .sect3-content {padding: 40px;}
     .sect3 .sect3-content .txt2 {margin-top: 20px;}
     .sect3 .sect3-content .txt3 {margin-top: 20px;}
}

@media screen and (max-width: 768px) {
     .sect1 {padding: 10px 0 0 0;margin-bottom: 13vw;}
     .sect1 .txt{ margin-bottom: 6px;}
     .sect1 .tit1{ margin-bottom: 24px;}
     .sect1 .tit2{ margin-bottom: 16px;font-size: 16px;}
     
     .sect2 {padding: 40px 0 0 0;margin-bottom: 13vw;}
     .sect2 .row1{margin-bottom: 13vw;}
     .sect2 .block1 .row1 .col1{ width: 100%;max-width: 100%;padding: 4vw 4vw;order: 2;}
     .sect2 .block1 .row1 .col2,
     .sect2 .block1 .row1 .col2 .photo,
     .sect2 .block1 .row1 .col2 .photo img{ width: 100%;order: 1;}
     .sect2 .row1 .tit1{ margin-bottom: 10px;}
     .sect2 .row1 .text2{ margin-bottom: 10px;}



     .sect3 {padding: 0 0 13vw 0;}
     .sect3 .sect3-content {left: 20px; padding: 0px 2vw 0px 4vw; max-width: 55%; top: 0; right: 0%; display: flex; flex-direction: column; justify-content: center;}
     .sect3 .sect3-content .tit {font-size: 6vw; line-height: 1;}
     .sect3 .sect3-content .txt2 {line-height: 1.2; margin-top: 5vw; font-size: 3.5vw;}
     .sect3 .sect3-content .txt3 {line-height: 1.2; margin-top: 5vw; font-size: 3.5vw;}
     
     .sect4 .block2{ padding: 0 0 40px 0;margin-bottom: 13vw;}
     .sect4 .block2-content .box-banner{padding: 0 0 20px;}
     .sect4 .block2-content .box-banner img {width: 100%; margin-right: 0;}
     .sect4 .block2-content .box-banner .col1, 
     .sect4 .block2-content .box-banner .col2, 
     .sect4 .block2-content .box-banner .col2{ padding-top: 30px;}

}
@media screen and (max-width: 640px){
     .sect2 .row1 .text3{margin-bottom: 20vw;}
}
@media screen and (max-width: 480px) {
     .sect4 .block2-content .box-banner .col1,
     .sect4 .block2-content .box-banner .col2{width: 100%;margin: 0 auto;}
     
     .sect2 .row2 .col1 {width: 100%;margin-bottom: 2%;}
     .sect2 .row2 .col2 {position: static;width: 100%;display: flex;column-gap: 2%;}
     .sect2 .row2 .col2 img:first-child {margin: 0;}
     .sect2 .row2 .col2 img{width: 50%;}
     .sect2 .row1 .img01 {right: 20px;}
     .sect2 .row2 .col2 {right: 20px;}
     .sect2 .row1 figure.img02 {width: 62%;}
}