@charset "UTF-8";
/* CSS Document */

main{width: 100%;margin: 0 auto;}

@media screen and (min-width:1051px) {
    main #image{width:100%;height:600px;margin: 0 auto;}

    .swiper-container{height:100%;margin: 0 auto;}
    
    .swiper-slide-active .slide-img,
    .swiper-slide-duplicate-active .slide-img,
    .swiper-slide-prev .slide-img{ animation: zoomUp 10s linear 0s 1 normal both; }
    
    .slide-img{width:100%;}
    
    main #image #image01{height: 100%;background: url("../img/image01.jpg") no-repeat;background-position: 50% 50%;background-size:cover}
    main #image #image02{height: 100%;background: url("../img/image02.jpg") no-repeat;background-position: 50% 50%;background-size:cover}
    main #image #image03{height: 100%;background: url("../img/image03.jpg") no-repeat;background-position: 50% 50%;background-size:cover}
    
    main #image #text01{position: absolute;top: 70%; left: 300px; margin: 0;padding: 0; font-size:40px;letter-spacing:5px ;line-height:40px; color: white;text-shadow:0px 1px 5px rgba(000,000,000,0.8); z-index: 1;}
    main #image #text02{position: absolute;top: 70%; right: 300px; margin: 0;padding: 0; font-size:40px;letter-spacing:5px ;line-height:40px; color: white;text-shadow:0px 1px 5px rgba(000,000,000,0.8);z-index: 1;}
    main #image #text03{position: absolute;top: 70%; left: 300px; margin: 0;padding: 0; font-size:40px;letter-spacing:5px ;line-height:40px; color: white; text-shadow:0px 1px 5px rgba(000,000,000,0.8);z-index: 1;}
    main #image p span{ font-size:25px;letter-spacing:2px ;}
    
    main #about{width:100%;margin: 0 auto;padding: 50px 0 0px 0;background:linear-gradient(0deg,white 0%,white 60%,#f4f4ee 60%,#f4f4ee 100%) ; }
    main #about section{width:80%;min-width: 900px; margin: 0 auto;background: url("../img/about01.jpg") no-repeat; background-position: 50% 70%;background-size:100% auto;}
    main #about section > div{width:900px;margin: 0 auto;}
    main #about section div #text{width:40%;margin: 0 0 0 auto;padding:80px 5% 80px 5%; color: white;}
    main #about section div #text h2{margin: 0 auto 20px auto;padding: 0; font-size:30px;letter-spacing:1px ;font-weight: normal;text-align: center;}
    main #about section div #text p{margin: 0 auto 20px auto;padding: 0; font-size:16px;letter-spacing:2px ;line-height:30px; }
    main #about section div #text div{position: relative;width: 100%;height: 80px; margin: 0 auto;}
    main #about section div #text div a{position: absolute;top:0;left: 0; width: 100%;height: 100%;z-index: 1}
    main #about section div #text div p{position: absolute;top:20%;left:5%; width: 70%;margin: 0;padding: 10px 0 10px 0;  font-size:20px;letter-spacing:2px ;text-align: center;}
    main #about section div #text div p::after{content:' ';display: inline-block;position: absolute;top:-0px;right: -25%;width: 50px;height: 50px;margin: 0 0px;padding: 0; background: url("../img/arrow01.png") no-repeat;background-position: 50% 50%; background-size: 100%;}
    main #about section div #text div:hover{background:#71abc1}
    
    main #service{width:100%;margin: 0 auto 80px auto;padding: 80px 0 0px 0;}
    main #service section{position: relative;width: 900px;height:450px;margin: 0 auto;}
    main #service section figure{position:absolute;top:0;right: 0; width:450px;height:400px;margin: 0;padding: 0;z-index: 1}
    main #service section figure img{width:100%;height: 100%;object-fit: cover}
    main #service section #back{position:absolute;bottom:0;left: 0; width:850px;height:320px;margin: 0;padding: 0;background: #ecf3f3;}
    main #service section #text{position:absolute;bottom:5%;left:5%;width:60%;margin: 0;padding: 50px 5%;z-index: 2}
    main #service section #text h3{margin: 0 auto 20px auto;padding: 0;font-weight: normal;font-size: 32px;letter-spacing: 4px;color: #231815;}
    main #service section #text h3::before{content:'サービス内容';display: block;font-size: 18px;color: #71abc1;font-size: 22px;}
    main #service section #text p{margin: 0;padding: 0;font-size:16px;letter-spacing: 2px;line-height: 32px;}
    
    main #works{width:100%;margin: 0 auto;padding: 80px 0 80px 0; background:#eaeadb; }
    main #works h4{width:100%;margin: 0 auto 30px auto;padding: 0;text-align: center;font-size:30px;letter-spacing:1px ;font-weight: normal;}
    main #works section{position: relative;width:900px;height:200px;margin: 0 auto 0px auto; background: url("../img/works01.jpg")no-repeat;background-position: 50% 30%;background-size: 100% auto;}    
    main #works section a{position: absolute;top:0;left: 0; width: 100%;height: 100%;z-index: 2}
    main #works section p{position: absolute;top:30%;left:25%; width: 32%;margin: 0;padding:30px 0 30px 18%;  font-size:20px;letter-spacing:2px ;color:white; background:rgba(128,132,102,0.9);z-index: 1}
    main #works section p::after{content:' ';display: inline-block;position: absolute;top:22%;right:25%;width: 50px;height: 50px;margin: 0 0px;padding: 0; background: url("../img/arrow01.png") no-repeat;background-position: 50% 50%; background-size: 100%;}
    main #works section:hover{opacity: 0.5}
        
    main #company{width:100%;margin: 0 auto 50px auto;}
    main #company section{position: relative;width: 900px;height:600px;margin: 0 auto;}
    main #company section figure{position:absolute;top:50px;right: 0; width:770px;height:486px;margin: 0;padding: 0;z-index: 1}
    main #company section figure img{width:100%;height: 100%;object-fit: cover}
    main #company section > div{position:absolute;bottom:0%;left:0%;width:475px;height: 265px; margin: 0;padding:0%;background: rgba(4,26,45,0.95); z-index: 2}
    main #company section div #text{position:relative;width:100%;height: 100%; margin: 0;padding:0px 0%;}
    main #company section div #text a{position: absolute;top:0;left: 0; width: 100%;height: 100%;z-index: 1}
    main #company section div #text h5{position: absolute;top:35%;left: 0;width: 100%;margin: 0 auto 0px auto;padding: 0;text-align: center; font-weight: normal;font-size: 32px;letter-spacing: 4px;color:white;}
    main #company section div #text p{position: absolute;top:60%;left: 20%; width: 50%;margin: 0;padding: 0;font-size:20px;letter-spacing: 2px;color: #abad9b;text-align: center;}
    main #company section div #text p::after{content:' ';display: inline-block;position: absolute;top:-10px;right:0%;width: 50px;height: 50px;margin: 0 0px;padding: 0; background: url("../img/arrow02.png") no-repeat;background-position: 0% 50%; background-size: 100%;}
    main #company section div #text:hover{background:#000034;}
}

@media screen and (max-width:1050px) {
    main #image{width:100%;height:250px;margin: 0 auto;}

    .swiper-container{height:100%;margin: 0 auto;}
    
    .swiper-slide-active .slide-img,
    .swiper-slide-duplicate-active .slide-img,
    .swiper-slide-prev .slide-img{ animation: zoomUp 10s linear 0s 1 normal both; }
    
    .slide-img{width:100%;}
    
    main #image #image01{height: 100%;background: url("../img/image01.jpg") no-repeat;background-position: 50% 50%;background-size:cover}
    main #image #image02{height: 100%;background: url("../img/image02.jpg") no-repeat;background-position: 50% 50%;background-size:cover}
    main #image #image03{height: 100%;background: url("../img/image03.jpg") no-repeat;background-position: 50% 40%;background-size:cover}
    
    main #image #text01{position: absolute;top: 50%; left: 10%;width:80%; margin: 0;padding: 0; font-size:22px;letter-spacing:2px ;line-height:26px; color: white;text-shadow:0px 1px 5px rgba(000,000,000,0.8); z-index: 1;}
    main #image #text02{position: absolute;top: 50%; right:10%;width:80%;  margin: 0;padding: 0; font-size:22px;letter-spacing:2px ;line-height:26px; color: white;text-shadow:0px 1px 5px rgba(000,000,000,0.8);z-index: 1;}
    main #image #text03{position: absolute;top: 50%; left: 10%;width:80%;  margin: 0;padding: 0; font-size:22px;letter-spacing:2px ;line-height:26px; color: white; text-shadow:0px 1px 5px rgba(000,000,000,0.8);z-index: 1;}
    main #image p span{ font-size:16px;letter-spacing:1px ;}
    
    main #about{width:100%;margin: 0 auto 50px auto;padding: 30px 0 0px 0;background:linear-gradient(0deg,white 0%,white 40%,#f4f4ee 40%,#f4f4ee 100%) ; }
    main #about section{width:80%; margin: 0 auto;background: url("../img/about01_sp.jpg") no-repeat; background-position: 50% 0%;background-size: 100% 200px;}
    main #about section > div{width:100%;margin: 0 auto;padding:200px 0 0 0; }
    main #about section div #text{width:94%;margin: 0 auto;padding:30px 3% 20px 3%; color: white;/*background: #808466;*/ background:rgba(128,132,102,0.9);}
    main #about section div #text h2{margin: 0 auto 10px auto;padding: 0; font-size:24px;letter-spacing:1px ;font-weight: normal;text-align: center;}
    main #about section div #text p{margin: 0 auto 0px auto;padding: 0; font-size:14px;letter-spacing:0px ;line-height:20px; }
    main #about section div #text div{position: relative;width: 100%;height: 80px; margin: 0 auto;}
    main #about section div #text div a{position: absolute;top:0;left: 0; width: 100%;height: 100%;z-index: 1}
    main #about section div #text div p{position: absolute;top:20%;right:0%; width:80%;margin: 0;padding: 10px 70px 10px 0;  font-size:18px;letter-spacing:0px ;text-align: right;background: url("../img/arrow01.png") no-repeat;background-position: 96% 50%; background-size:40px auto;}
    main #about section div #text div:hover{background:#71abc1}
    
    main #service{width:100%;margin: 0 auto 0px auto;padding: 0px 0 50px 0;background:linear-gradient(0deg, #ecf3f3 0%, #ecf3f3 60%,white 60%,white 100%) ; }
    main #service section{width:80%;margin: 0 auto;}
    main #service section figure{width:100%;margin: 0 auto 10px auto;padding: 0;}
    main #service section figure img{width:100%;height:180px;object-fit: cover;object-position: 0 100%}
    main #service section #back{display: none;}
    main #service section #text{width:100%;margin: 0;padding: 0px 0%;}
    main #service section #text h3{margin: 0 auto 10px auto;padding: 0;font-weight: normal;font-size: 24px;letter-spacing: 2px;color: #231815;}
    main #service section #text h3::before{content:'サービス内容';display: block;font-size: 18px;color: #71abc1;}
    main #service section #text p{margin: 0;padding: 0 0 0px 0;font-size:14px;letter-spacing:0px;line-height: 20px;}
    
    main #works{width:100%;margin: 0 auto;padding:30px 0 30px 0; background:#eaeadb; }
    main #works h4{width:100%;margin: 0 auto 20px auto;padding: 0;text-align: center;font-size:24px;letter-spacing:2px ;font-weight: normal;}
    main #works section{position: relative;width:80%;height:200px;margin: 0 auto 0px auto; background: url("../img/works01.jpg")no-repeat;background-position: 50% 30%;background-size: 100% auto;}    
    main #works section a{position: absolute;top:0;left: 0; width: 100%;height: 100%;z-index: 2}
    main #works section p{position: absolute;top:50px;left:5%; width:50%;height:65px;margin: 0;padding:35px 40% 0 0; text-align:right; font-size:18px;letter-spacing:0px ;color:white; background:rgba(128,132,102,0.9);z-index: 1}
    main #works section p::after{content:' ';display: inline-block;position: absolute;top:30px;right:28%;width: 40px;height: 40px;margin: 0 0px;padding: 0; background: url("../img/arrow01.png") no-repeat;background-position: 50% 50%; background-size: 100%;}
    main #works section:hover{opacity: 0.5}
        
    main #company{width:100%;margin: 0 auto 30px auto;padding: 30px 0 0 0}
    main #company section{position: relative;width: 80%;height:180px;margin: 0 auto;}
    main #company section figure{position:absolute;top:0px;right: 0; width:100%;height:180px;margin: 0;padding: 0;z-index: 1}
    main #company section figure img{width:100%;height:100%;margin: 0;padding: 0;object-fit: cover;object-position: 50% 0%}
    main #company section > div{position:absolute;top:0%;left:0%;width:100%;height: 180px; margin: 0;padding:0%;background: rgba(4,26,45,0.9); z-index: 2}
    main #company section div #text{position:relative;width:100%;height: 100%; margin: 0;padding:0px 0%;}
    main #company section div #text a{position: absolute;top:0;left: 0; width: 100%;height: 100%;z-index: 1}
    main #company section div #text h5{position: absolute;top:35%;left: 0;width: 100%;margin: 0 auto 0px auto;padding: 0;text-align: center; font-weight: normal;font-size: 24px;letter-spacing: 2px;color:white;}
    main #company section div #text p{position: absolute;top:60%;left: 20%; width: 50%;margin: 0;padding: 0;font-size:18px;letter-spacing: 0px;color: #abad9b;text-align: center;}
    main #company section div #text p::after{content:' ';display: inline-block;position: absolute;top:-5px;right:-10%;width: 40px;height: 40px;margin: 0 0px;padding: 0; background: url("../img/arrow02.png") no-repeat;background-position: 0% 50%; background-size: 100%;}
    main #company section div #text:hover{background:#000034;}
}