@charset "utf-8";
:root{
    --count: 1;
}

header{width: 100%; height: 100px; top:0; left:50%; opacity:0; background:rgba(0,0,0,.3);transform:translate(-50%, 0); transition: all .6s ease; position: fixed; z-index: 999999; opacity:1;}
section{padding: 130px 0;scroll-behavior: smooth;}
section.p40{padding: 40px 0;}
.container { width: 1400px; margin: auto; position: relative; height: auto;}
.container.fw_container { width: 100%; }

#section1{}
#section1 .main-swiper { position: 100%; height: 100vh; }
#section1 .main-swiper div .s1 { background: url('../img/sub1/image1.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s2 { background: url('../img/sub1/image2.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s3 { background: url('../img/sub1/image3.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s4 { background: url('../img/sub1/image4.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s5 { background: url('../img/sub1/image5.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s6 { background: url('../img/sub1/image6.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s7 { background: url('../img/sub1/image7.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s8 { background: url('../img/sub1/image8.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s9 { background: url('../img/sub1/image9.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s10 { background: url('../img/sub1/image10.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s11 { background: url('../img/sub1/image11.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s12 { background: url('../img/sub1/image12.jpg') no-repeat center/cover; }
#section1 .main-swiper div .s13 { background: url('../img/sub1/image13.jpg') no-repeat center/cover; }
#section1 .title_con{width: 100%; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-shadow: 0 1px 2px rgba(0,0,0,.6); z-index: 99;}
#section1 .title_con h4{ color:#fff; font-size: 16px; }
#section1 .title_con h2{ color:#fff; font-size: 50px; margin-top: 20px; font-weight: 500; letter-spacing: 4px;}

#section1 .swiper-button-prev::after, main .swiper-button-next::after, main .main-pagination { font-size: 16px; color: #fff; margin: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#section1 .swiper-button-prev::after { margin-right: 60px; }
#section1 .swiper-button-next::after { margin-left: 60px; }
#section1 .controls { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); z-index: 1;}

.container p{line-height: 2.3em;}
.container p.bbr{margin-bottom:60px;}
.container p.br{margin-bottom:20px;}


#section3{ clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); width:100%; height: 100vh;}
#section3:before{ content:''; position:fixed; top:0; left:0; width: 100%; height: 100%; filter:brightness(.7); background:url(../img/sub1/image8.jpg) 50% no-repeat; background-size: cover; }
#section3 .container{height: 100%;}
#section3 .logo{width: 136px; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); filter: invert(1);}


#section4 .container{display: flex; }
#section4 .img{width:900px; aspect-ratio: 900 / 467; background:url(../img/sub1/image7.jpg) 50% no-repeat; background-size:cover; z-index:9;}
#section4 .text{width: 100%; max-width: 500px; position:relative;padding-left: 100px; text-align: right;}
#section4 .text h5{font-size: 14px; margin-bottom: 20px; }
#section4 .text h2{font-size: 24px; margin-bottom: 30px; position: relative;}
#section4 .text p{font-size: 14px; line-height: 2.1em;}
#section4 .text p.br{margin-bottom: 30px;}
#section4 .text p.tail{line-height: 1.4em; position: absolute; bottom:0; right: 0; text-align: right; padding:0 25px 15px;}


#section5 .container{display: flex; }
#section5 .img{width:900px; aspect-ratio: 900 / 467; background:url(../img/sub1/image13.jpg) 50% no-repeat; background-size:cover; z-index:9;}
#section5 .text{width: 100%; max-width: 500px; padding-top: 50px; position:relative;}
#section5 .text p{font-size: 14px; line-height: 2.1em;}
#section5 .text p.br{margin-bottom: 30px;}



@media screen and (min-width:1px) and (max-width:1400px){
    .container{width:100%; padding:0 20px;}
    .container.fw_container{padding:0px;}
    
}

@media screen and (min-width:1px) and (max-width:1024px){
    #section4 .container{ flex-direction: column;}
    #section5 .container{ flex-direction: column-reverse;}
    #section4 .img{ width:100%; aspect-ratio: 1.618/1;}
    #section4 .text { padding-top: 50px; max-width: none;}
    #section5 .img{ width:100%; aspect-ratio: 1.618/1;}
    #section4 .text h5{margin-top:10px;}
}

@media screen and (min-width:1px) and (max-width:560px){
    #section4 { padding-bottom: 40px; }
    #section4 .img{ aspect-ratio: 4/3;}
    #section5 .img{ aspect-ratio: 4/3;}
}