*{
    margin:0;
    padding:0;
}

body{
    font-family: "Noto Sans JP", serif;
    font-size: 1.25vw;
    font-weight: 400;
}

h1{
    font-size:2.78vw;
    font-weight: 900;
}
h2{
    font-size: 2.22vw;
    font-weight: 800;
}
h3{
    font-size: 1.67vw;
    font-weight: 700;
}

main{
    margin-top:9.86vw;
}
.bg{
    width:100vw;
    background: linear-gradient(-135deg,#8AEFFF,#6BE9FF,#00D9FF,#00C3FF,#00B1F1,#008EDA,#0075C3,#034DB8,#0140A5,#00279B,#00257A);
}


/*------------
header
----------------------------------------------------------------*/

header{
    width:100vw;
    height:9.86vw;
    background-color: white;
    position: fixed;
    top:0;
    left:0;
    z-index: 100;
}
.header-container{
    width:96.32vw;
    display: flex;
    justify-content: space-between;
    margin:1.04vw auto 0 auto;
}

.logo{
    width:13.89vw;
    height:6.16vw;
}
.logo img{
    width:100%;
    height:100%;
}


.nav-contact{
    display: flex;
    align-items: center;
}
.sp-menu{
    /*スマホメニュー非表示*/
    display: none;
}

.pc-nav ul{
    width:39.44vw;
    display: flex;
    justify-content: space-around;
    font-weight: 500;
}
.pc-nav ul li{
    list-style: none;
}
.pc-nav ul a{
    text-decoration: none;
    color:#333333;
    transition: .3s;
}
.pc-nav ul a:hover{
    color:#0048AF;
}


.contact-btn{
    width:25.28vw;
}
.contact-btn a{
    text-decoration: none;
    color:white;
    display: inline-block;
    width:100%;
    padding:2.08vw 0;
    background-color: #0048AF;
    transition: .3s;
}
.contact-btn a:hover{
    opacity: .8;
}
.contact-btn .contact-flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.contact-btn .contact-flex img{
    width:2.49vw;
    height:2.34vw;
}
.contact-btn .contact-flex p{
    font-size: 2.22vw;
    font-weight: 800;
    margin-left:0.88vw;
}


/*------------
main
----------------------------------------------------------------*/
.bg{
    padding:1.6vw 0 6.94vw 0;

}
.bg h1{
    color:white;
    margin-left:6.94vw;
}

.main-view{
    width:100vw;
    height:47.43vw;
    margin-top:1.6vw;
}
.main-view img{
    width:100%;
    height:100%;
    object-fit: cover;
}



/*---------------共進空調について---------------*/
.about{
    width:60.56vw;
    margin:6.94vw auto 0 auto;
    color:white;
}
.about h2{
    text-align: center;
}
.about .section-text{
    margin-top:4.24vw;
}

.about .section-text p{
    margin-top:0.42vw;
    line-height:2em;
}

/*詳しく見るボタン*/
.view-btn{
    width:25.97vw;
    margin:5.21vw auto 0 auto;
    position: relative;
}
.view-btn a{
    display:inline-block;
    width:100%;
    padding:1.6vw 0;
    background-color: white;
    text-decoration: none;
    font-weight: 700;
    color:#01267C;
    text-align: center;
    transition: .3s;
}
.view-btn a:hover{
    opacity: .8;
}

.arrow {
    position: relative;
    display: inline-block;
    right:-7vw;
    width: 1.6vw;
    height: 0.21vw;
    margin: 0.54vw 0;
    border-radius: 9999px;
    background-color: #01267c;
}
  
.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 0.1vw);
    right: 0;
    width: 0.97vw;
    height: 0.21vw;
    border-radius: 9999px;
    background-color: #01267c;
    transform-origin: calc(100% - 0.1vw) 50%;
}
  
.arrow::before {
    transform: rotate(45deg);
}
  
.arrow::after {
    transform: rotate(-45deg);
}


/*---------------事業紹介---------------*/
.service{
    width:100vw;
    background-color: #F2FAFF;
    display: flex;
    align-items: center;
}
.service img{
    width:45.63vw;
    height:38.89vw;
    object-fit: cover;
}
.service-text{
    width:36.67vw;
    margin:0 auto;
}
.service-text .service-info{
    margin-top:5.14vw;
    line-height: 2em;
}

.service .view-btn a,
.news .view-btn a{
    background-color: #0048AF;
    color:white;
}
.service .view-btn .arrow ,
.news .view-btn .arrow{
    background-color: white;
}
  
.service .view-btn .arrow::before,
.service .view-btn .arrow::after,
.news .view-btn .arrow::before,
.news .view-btn .arrow::after {
    background-color: white;
}




/*---------------ニュース---------------*/
.news{
    padding:6.6vw 0 6.74vw 0;
}
.news h2{
    text-align: center;
}

.news-slide{
    width:100vw;
    margin-top:6.74vw;
    position: relative;
}
.news-slide .swiper-slide article{
    width:36.94vw;
}
.news-slide .swiper-slide a{
    text-decoration: none;
    color:black;
    transition: .3s;
}
.news-slide .swiper-slide a:hover{
    opacity: .8;
}
.news-slide .swiper-slide img{
    width:100%;
    height:23.75vw;
    object-fit: cover;
}
.news-slide .swiper-slide .tag-date{
    display: flex;
    align-items: center;
    font-size: 1.11vw;
    font-weight: 600;
    margin-top:1.11vw;
}
.news-slide .swiper-slide .tag{
    background-color: #F2FAFF;
    width:7.08vw;
    padding:0.07vw 0;
    text-align: center;
    margin-right:0.97vw;
}
.news-slide .swiper-slide .title{
    font-size: 1.67vw;
    font-weight: 700;
    margin-top:0.9vw;
}

.swiper-button-next,.swiper-button-prev{
    width:3.47vw;
    height:3.47vw;
    background-color: #0048AF;
    border-radius: 99999px;
    position: absolute;
    top:-3vw;
}
.swiper-button-next{
    right:11.25vw;
}
.swiper-button-prev{
    left:auto;
    right:16.18vw;
}
.swiper-button-next::after,.swiper-button-prev::after{
    color:white;
    font-family: 'FontAwesome';
    font-size: 2vw;
}
.swiper-button-next::after{
    content: '\f054';
}
.swiper-button-prev::after{
    content: '\f053';
}

.news .arrow{
    right:-4vw;
}




/*------------
   footer
----------------------------------------------------------------*/

/*---------------お問い合わせ・お見積もり・求人募集---------------*/
.contact{
    width:100vw;
    padding:6.94vw 0 7.13vw 0;
    background-color: #F2FAFF;
}
.contact h2 ul{
    display: flex;
    justify-content: center;
}
.contact h2 ul li{
    margin-right:3vw;
}
.contact h2 ul li:nth-of-type(1){
    list-style: none;
}
.contact-text{
    width:20vw;
    line-height:2em;
    margin:2.36vw auto 3.89vw auto;
}
.contact .contact-btn{
    margin:0 auto;
}


footer .bg{
    padding:2.57vw 0 1.94vw 0;
    margin-top:0;
}
.logo-bg{
    width:13.89vw;
    height:4.86vw;
    background-color: white;
    margin:0 auto;
    position: relative;
}
.logo-bg img{
    width:100%;
    height:6.26vw;
    position: absolute;
    top:-.7vw;
}
.copy-right{
    font-size: 0.69vw;
    text-align: center;
    color: white;
    font-weight: 700;
    margin-top:0.83vw;
}

/*----------------------------------------------------------------------------
レスポンシブ
------------------------------------------------------------------------------*/

@media(max-width:768px){
    body{
        font-size: 4.1vw;
    }
    
    h1{
        font-size:6.15vw;
        font-weight: 800;
    }
    h2{
        font-size: 5.13vw;
        font-weight: 600;
    }
    h3{
        font-size: 4.1vw;
        font-weight: 500;
    }
    main{
        margin-top:17.95vw;
    }
    /*------------
    header
    ----------------------------------------------------------------*/
    
    header{
        height:17.95vw;
    }
    .header-container{
        width:100vw;
        margin:0 auto 0 auto;
    }
    
    .logo{
        width:52.82vw;
        height:17.95vw;
    }
    .logo img{
        object-fit: cover;
    }
    
    .sp-menu{
        display: block;
    }
    
    .pc-nav,.contact-btn{
        /*パソコンメニューバー非表示*/
        display: none;
    }
    
    .hamburger{
        width:18.46vw;
        height:17.95vw;
        background-color: transparent;
        border:none;
        position: relative;
        cursor: pointer;
        z-index: 100;
        transition: .3s;
    }
    .hamburger span{
        display: block;
        width:6.67vw;
        height:0.51vw;
        background-color: #0048AF;
        border-radius: 3vw;
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        transition: .3s;
    }
    .hamburger span:nth-of-type(1){
        top:7.18vw;
    }
    .hamburger span:nth-of-type(3){
        bottom:6.67vw;
    }
    /*open時*/
    .hamburger.open{
        background-color: #0048AF;
    }
    .hamburger.open::after{
        content:"CLOSE";
        display: block;
        font-size: 3.08vw;
        color:white;
        font-weight: 500;
        position: absolute;
        bottom:1.54vw;
        left:50%;
        transform: translateX(-50%);
    }
    .hamburger.open span{
        background-color: white;
    }
    .hamburger.open span:nth-of-type(1){
        top: 10.8vw;
        transform: rotate(42deg) translateX(-4vw);
    }
    .hamburger.open span:nth-of-type(2){
        display: none;
    }
    .hamburger.open span:nth-of-type(3){
        bottom: 12vw;
        transform: rotate(-42deg) translateX(-4vw);
    }

    /*スマホナビゲーション*/
    .sp-nav{
        width:100%;
        padding:4.1vw 0 3.85vw 0;
        background-color: #F2FAFF;
        position: fixed;
        top:17.95vw;
        left:0;
        z-index: 100;
        transition: .5s;
        opacity: 0;
        pointer-events: none;
    }
    .sp-nav.open{
        opacity: 1;
        pointer-events:all
    }
    .sp-nav ul{
        width:82.09vw;
        display: flex;
        flex-flow: column;
        margin:0 auto;
    }
    .sp-nav ul li{
        list-style: none;
        font-weight: 600;
        font-size: 5.13vw;
        width:82.09vw;
        margin:7.95vw auto 0 auto;
    }
    .sp-nav ul li:nth-of-type(1){
        margin-top:0;   
    }
    .sp-nav ul a{
        text-decoration: none;
        color:#333333;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .arrow {
        position: relative;
        display: inline-block;
        right:0;
        width: 5vw;
        height: 0.77vw;
        margin: 1.95vw 0;
        border-radius: 9999px;
        background-color: #0048af;
    }
      
    .arrow::before,
    .arrow::after {
        content: "";
        position: absolute;
        top: calc(50% - 0.38vw);
        right: 0;
        width: 3.59vw;
        height: 0.77vw;
        border-radius: 9999px;
        background-color: #0048af;
        transform-origin: calc(100% - 0.38vw) 50%;
    }
      
    .arrow::before {
        transform: rotate(45deg);
    }
      
    .arrow::after {
        transform: rotate(-45deg);
    }

    



/*------------
main
----------------------------------------------------------------*/
    .bg{
        padding:1.28vw 0 17.95vw 0;
    }

    .bg h1{
        margin-left:5.38vw;
    }

    .main-view{
        height:47.95vw;
        margin-top:1.03vw;
    }


    .about{
        width:92.05vw;
        margin:8.97vw auto 0 auto;
    }
    .about .section-text{
        margin-top:10.26vw;
    }
    .about .section-text p{
        margin-top:0.42vw;
        line-height:1.5em;
    }

    /*詳しく見るボタン*/
    .view-btn{
        width:46.15vw;
        margin:10.26vw auto 0 auto;
    }
    .view-btn a{
        padding:2.82vw 0 3.08vw 0;
        font-weight: 800;
        font-size: 3.08vw;
    }

    .view-btn .arrow {
        right:-8vw;
        top:.5vw;
        width: 5.13vw;
        height:0.51vw;
        margin: 1.95vw 0;
        border-radius: 0 99px 99px 0;
    }
    
    .view-btn .arrow::before,
    .view-btn .arrow::after {
        top: calc(50% - 0.26vw);
        width: 3.08vw;
        height: 0.51vw;
        transform-origin: calc(100% - 0.13vw) 50%;
    }
    

    /*---------------事業紹介---------------*/
    .service{
        flex-flow: column-reverse;
        position: relative;
        padding-top:17.69vw;
        
    }
    .service img{
        width:92.05vw;
        height:58.97vw;
        margin:10.26vw 0 7.69vw 0;
    }
    .service-text{
        width:92.05vw;
        margin:0 auto;
    }
    .service-text h2{
        text-align: center;
    }
    .service-text .text-btn{
        position: absolute;
        top:100%;
        left:0;
        width:100vw;
        background-color: #F2FAFF;
        padding-bottom:17.97vw;
    }
    .service-text .service-info{
        margin:5.14vw auto 0 auto;
        line-height: 2em;
        width:92.05vw;
    }

    .service .view-btn .arrow,
    .news .view-btn .arrow{
        height:0.77vw;
    }
    .service .view-btn .arrow::before,
    .service .view-btn .arrow::after,
    .news .view-btn .arrow::before,
    .news .view-btn .arrow::after {
        height:0.77vw;
        top: calc(50% - 0.3vw);
        transform-origin: calc(100% - 0.3vw) 50%;
    }

    /*---------------ニュース---------------*/
    .news{
        margin-top:70vw;
        padding:17.44vw 0 17.97vw 0;
    }

    .news-slide{
        margin-top:10.26vw;
    }
    .news-slide .swiper-slide article{
        width:66.41vw;
    }
    .news-slide .swiper-slide img{
        height:41.03vw;
    }
    .news-slide .swiper-slide .tag-date{
        font-size: 3.08vw;
        margin-top:5.13vw;
    }
    .news-slide .swiper-slide .tag{
        width:16.92vw;
        padding:0.26vw 0 0.51vw 0;
        margin-right:1.03vw;
    }
    .news-slide .swiper-slide .title{
        font-size: 4.1vw;
        font-weight: 600;
        margin-top:1.28vw;
    }

    .swiper-button-next,.swiper-button-prev{
        width:7.69vw;
        height:7.69vw;
        top:-11vw;
    }
    .swiper-button-next{
        right:3.85vw;
    }
    .swiper-button-prev{
        right:13.85vw;
    }
    .swiper-button-next::after,.swiper-button-prev::after{
        font-size: 4vw;
    }

    .news .arrow{
        right:-4vw;
    }









    /*------------
        footer
    ----------------------------------------------------------------*/

    /*---------------お問い合わせ・お見積もり・求人募集---------------*/
    .contact{
        padding:13.33vw 0 10.51vw 0;
    }

    .contact h2 ul{
        width:61.54vw;
        flex-wrap: wrap;
        margin:0 auto;
    }
    .contact h2 ul li{
        margin-right:5vw;
        list-style: none;
        position: relative;
    }
    .contact h2 ul li:nth-of-type(2)::after{
        content:"●";
        display: block;
        font-size: 2vw;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        left:-3vw;
        margin-right:3vw;
    }
    .contact h2 ul li:nth-of-type(2){
        margin-right:0;
    }

    .contact-text{
        width:92.05vw;
        line-height:1.5em;
        margin:6.92vw auto;
    }

    .contact .contact-btn{
        display: block;
        width:77.44vw;
    }
    .contact-btn a{
        padding:5.38vw 0 5.9vw 0;
    }

    .contact-btn .contact-flex img{
        width:10.26vw;
        height:8.97vw;
    }
    .contact-btn .contact-flex p{
        font-size: 6.15vw;
        font-weight: 700;
        margin-left:5.23vw;
    }



    footer .bg{
        padding:7.44vw 0;
    }
    .logo-bg{
        width:51.28vw;
        height:17.95vw;
    }
    .logo-bg img{
        width:52.56vw;
        height:22.56vw;
        position: absolute;
        top:-2.3vw;
        left:-1vw;
    }
    .copy-right{
        font-size: 3.08vw;
        font-weight: 400;
        margin-top:4.87vw;
    }
}