@charset "UTF-8";
/*
Theme Name: portfolio
*/

html{
    font-size: 100%;
    background-color: #ffff;
    scroll-behavior: smooth;
    line-height: 1.5;
}

body{
    font-family: "Roboto", sans-serif;
}

*{
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
}

ul{
    list-style: none;
    margin: 0;
}

.pc-menu li{
    margin: 0 0 0 15px;
}

li a{
    transition: all 0.3s ease;
}

li a:hover{
    opacity: 0.5;
}

nav{
    margin: 0 0 0 auto;
}

.view{
    width: 100%;
    position: relative;
    min-height: 100%;
}

.header {
   width: 100%;
   padding: 30px 4% 10px;
   position: fixed;
   top: 0;
   display: flex;
   align-items: center;
   color: #fefefe;
   opacity: 0.7;
   font-weight: bold;
   z-index: 2;
}


.header_2 {
        width: 100%;
        padding: 30px 4% 10px;
        background-color: #f0f0f0;
        position: fixed;
        display: flex;
        align-items: center;
        font-weight: bold;
        z-index: 2;
        padding: 32px 60px 10px 60px;}

.header_2 h1{
    color: #505a5f;
    opacity: 0.6;
    font-weight: bold;
}

.header_2 li{
    color: #505a5f;
    opacity: 0.6;
}

header.scrolled{
    color: #505a5f;
}

.pc-menu ul{
    display: flex;
}

.navi {
    display: none;
}

.navi2 {
    display: none;
}

@media screen and (max-width: 768px) {
    .pc-menu{
        display: none;
    }

    .navi {
        display: block;
        padding: 150px 25px;
        background-color: #121212;
        color: #ffffff;
        width: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -800px;
        opacity: 0;
        z-index: 20;
        transition: all 0.5s;
      }
      .navi a {
        color: #ffffff;
      }
      .navi ul {
        margin: 0;
        padding: 0;
      }
      .navi ul.nav-menu {
        margin-bottom: 60px;
        border-top: 1px solid #ffffff;
      }
      .navi ul.nav-menu li {
        text-align: center;
        position: relative;
        margin: 0;
        padding: 30px 0;
        border-bottom: 1px solid #ffffff;
        font-size: 2rem;
      }
    
      .nav-btn {
        display: block;
        position: fixed;
        top: 25px;
        right: 20px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 20;
      }
      .nav-btn span {
        position: absolute;
        display: block;
        left: 0;
        width: 30px;
        height: 2px;
        transition: all 0.5s;
        background-color: #ffff;
      }

      .nav-btn.scrolled span{
        background-color: #505a5f;
      } 

      .nav-btn span:nth-child(1) {
        top: 4px;
      }
      .nav-btn span:nth-child(2) {
        top: 14px;
      }
      .nav-btn span:nth-child(3) {
        bottom: 4px;
      }
    
      .nav-mask {
        display: none;
        transition: all 0.5s;
      }
      
      .navi.active {
        opacity: 1;
        left: 0;
      }
      
      .nav-btn.active span {
        background-color: #ffffff;
      }
      
      .nav-btn.active span:nth-child(1) {
        transform: translateY(10px) rotate(-315deg);
      }
      
      .nav-btn.active span:nth-child(2) {
        opacity: 0;
      }
      
      .nav-btn.active span:nth-child(3) {
        transform: translateY(-10px) rotate(315deg);
      }
      
      .nav-mask.active {
        display: block;
        background: #000;
        max-width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0.8;
        z-index: 10;
        cursor: pointer;
      }    

      .navi2 {
        display: block;
        padding: 150px 25px;
        background-color: #121212;
        color: #ffffff;
        width: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: -800px;
        opacity: 0;
        z-index: 20;
        transition: all 0.5s;
      }
      .navi2 a {
        color: #ffffff;
      }
      .navi2 ul {
        margin: 0;
        padding: 0;
      }
      .navi2 ul.nav-menu2 {
        margin-bottom: 60px;
        border-top: 1px solid #ffffff;
        border-top-color: rgba(255, 255, 255, 0.5);
      }
      .navi2 ul.nav-menu2 li {
        text-align: center;
        position: relative;
        margin: 0;
        padding: 30px 0;
        border-bottom: 1px solid #ffffff;
        font-size: 2rem;
      }
    
      .nav-btn2 {
        display: block;
        position: fixed;
        top: 25px;
        right: 20px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 20;
      }
      .nav-btn2 span {
        position: absolute;
        display: block;
        left: 0;
        width: 30px;
        height: 2px;
        transition: all 0.5s;
        background-color: #505a5f;;
        opacity: 0.6;
      }

      .nav-btn2 span:nth-child(1) {
        top: 4px;
      }
      .nav-btn2 span:nth-child(2) {
        top: 14px;
      }
      .nav-btn2 span:nth-child(3) {
        bottom: 4px;
      }
    
      .nav-mask2{
        display: none;
        transition: all 0.5s;
      }
      
      .navi2.active {
        opacity: 1;
        left: 0;
      }
      
      .nav-btn2.active span {
        background-color: #ffffff;
      }
      
      .nav-btn2.active span:nth-child(1) {
        transform: translateY(10px) rotate(-315deg);
      }
      
      .nav-btn2.active span:nth-child(2) {
        opacity: 0;
      }
      
      .nav-btn2.active span:nth-child(3) {
        transform: translateY(-10px) rotate(315deg);
      }
      
      .nav-mask2.active {
        display: block;
        background: #000;
        max-width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0.6;
        z-index: 10;
        cursor: pointer;
      }
    }

.site-logo{
  color: #fefefe;
  opacity: 0.8;
}

h1{
    margin: 0;
    padding:0;
    transition: all 0.3s ease;
   
}

h1:hover{
    opacity: 0.5;
}

.main-visual{
    display: flex;
    justify-content: start;
    align-items: end;
    height: 100vh;
    background: url('img/header.jpg') top center / cover no-repeat;
    color: #fefefe;
    transition: background-image 1s ease-in-out;
} 

  h2{
    margin: 0;
    font-size: 48px;
    padding: 0 0 32px 60px;
    font-weight: bold;
  }

.section-title{
    text-align: center;
    font-weight: bold;
    color: #505a5f;
    font-size: 3rem;
    padding: 64px 0 64px 0;
}

.wrapper{
    color: #505a5f;
    padding-top: 32px;
}

.swiper-item{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 32px;
    row-gap: 32px;
}


.swiper-item img{
    margin-bottom: 10px;
    background-color: #fff;
}

.swiper-item p{
    background-color: #fff;
    text-align: center;
    padding: 8px 8px;
}

.test{
    background-color: #f0f0f0;
    padding: 0 64px 64px 64px;
}

.test2{
    background-color: #f0f0f0;
    padding: 0 64px 64px 64px;
    min-height: 100vh;
}

.works_test{
    background-color: #f0f0f0;
    padding: 0 64px 64px 64px;
}

.swiper_contents{
    position: relative;
    max-width: 100%;
    margin-bottom: 32px;
    transition-timing-function: linear;
}

.swiper {
    max-width: 100%;
    height: auto;
    transition-timing-function: linear;
  }

.swiper-wrapper {
    height: auto;
    
  }

.swiper-slide {
    width: 100%;
    /* padding: 0 15px; */
}
.swiper-slide:hover{
    opacity: 0.6;
}

.swiper-button-next, 
.swiper-button-prev {
    --swiper-navigation-color:#505a5f;
 } 

.swiper-button-prev:after,
.swiper-button-next:after {
 display: none;
}

 .swiper-pagination {
    bottom: -30px !important;
  }

.contents{
    background-color: #fefefe;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    max-width: 100%;
    margin-bottom: 32px;
}
.link-text{
    text-align: center;
    color: #505a5f;
    padding-top: 32px;
    transition: all 0.3s ease;
}

.link-text:hover{
    opacity: 0.6;
}

.page-No{
display: flex;
justify-content: center;
background-color: #f0f0f0;
padding-bottom: 64px;
}

.content_wrapper{
display: flex;
}

.site-img{
    max-width: 100%;
}

.site-img:hover{
    max-width: 100%;
    opacity: 0.6;
}

.content_wrapper dl{
    flex-wrap: wrap;
    width: 100%;
    background-color: #ffff;
    margin-left: 64px;
    padding: 16px 32px 0 ;
    
}

.content_wrapper dt{
    padding-bottom: 10px;
    
}

.content_wrapper dd{
    padding-bottom: 20px;
    word-break: break-all;
    
}

.about-work {
    display: flex; 
    align-items: center; 
    flex-direction: column;
    background-color: #ffff;
    padding: 32px 64px;
    margin-bottom: 32px;
}

.about-history {
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 32px; 
    width: 100%;
    font-size: 1.3rem;
}

.about-office{
    display: flex;
    padding-bottom: 32px;
}


.about-year {
    display: flex; 
    align-items: flex-start;
    justify-content: flex-start;
    width: 30%;
    margin-right: 32px;
    min-width: 200px;
}

.about-year p{
    font-weight: bold;
}


.about-year img{
    max-width: 100%;

}
.about-office dl{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 32px;
}

.about-office dt {
    width: 15%;
    padding-bottom: 10px;   
}
  
.about-office dd {
    width: 85%;
    padding-bottom: 10px;
}


.about-office ul {
    padding-left: 0; 
    margin: 0; 
    max-width: 100%;
    flex-direction: column;   
}

.about-work li {
    margin-bottom: 10px; 
}


.icon-list ul{
    align-items: center;
    width: 100%;
}

.icon-list li{
    align-items: center;
    display: inline-block;
    margin-left: 50px;
    margin-bottom: 64px;
    
}

.step{
    width: 100%;
    align-items: center;
}

.step1,.step2,.step3{
    padding: 0 20px;
}

.step dl{
    display: flex;
}

.step dt{
    text-align: center;
    padding-bottom: 16px;
}

/* .contact-form{
    position: relative;
    max-width: 100%; */
    /* overflow: hidden; */
    /* top: 0;
    left: 0;
    bottom: 0;
    right: 0; */
    /* align-items: center; */
    /* height: 100%; */
    /* padding-top: 100%; */
/* } */


/* .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
  } */

.contact-form{
    padding: 0 60px;
    display: block;
    padding: 0 10%;
    margin: 0 auto;
    max-width: 100%;
    align-items: center;
}



.contact-form dl{
    /* display: flex; */
   
    /* margin-bottom: 32px; */
    /* font-size: 1.5rem; */
    /* font-weight: bold; */
    align-items: center;
    max-width: 100%;
}

/* #contact dt p{
    background: #ffffff;
}
 */
 .contact-form dd{
    width: 100%;
    margin-bottom: 20px;
    background: #ffffff;
    
}

.contact-form dd input,
.contact-form dd textarea{
    width: 100%;
    border:solid 1px #c8c8c8;
    padding: 10px;
    background: #fff;
}

.contact-form dd textarea{
    height: 15rem;
}

.contact-form2{
    padding: 0 60px;
    display: block;
    padding: 0 10%;
    margin: 0 auto;
    max-width: 100%;
    align-items: center;
}

.contact-form2 dd.contact-dd {
    width: 100%;
    min-height: 15rem;
}

.contact-form2 dl{
    /* display: flex; */
   
    /* margin-bottom: 32px; */
    /* font-size: 1.5rem; */
    /* font-weight: bold; */
    align-items: center;
    max-width: 100%;
}

/* #contact dt p{
    background: #ffffff;
}
 */
 .contact-form2 dd{
    width: 100%;
    margin-bottom: 20px;
    background: #ffffff;
    padding: 10px;
    border:solid 1px #c8c8c8;
    
}


 #contact .button{
    text-align: center;
    padding-top: 64px;
}

#contact .button input{
    width: 200px;
    background-color: #505a5f;
    color: #fff;
    padding: 15px 0;
    border: solid 1px #505a5f;
    text-align: center;
   /*  margin-right: 20px; */
}

.back{
    align-items: center;
}

.wpcf7-not-valid-tip {
    background: #f0f0f0;
}

.wpcf7-spinner{
    display: none;
}

.wpcf7 form .wpcf7-response-output {
    border: none;
    color: #dc3232;
}

#contact .button input:hover{
    background-color: #fff;
    color: #505a5f;
}



.attention {
    text-align: center;
    margin-bottom: 32px;
    font-weight: bold;
    font-size: 1.5rem;
}

.attention_text{
    font-weight: bold;
}

.thanks{
    display: flex;
    background:#ffffff;
    /* padding: 64px 64px; */
    /* max-width: 100%; */
   /*  margin: 100px 100px; */
    text-align: center;
    min-height: 60vh;

   
}


.message p{
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    /* padding: 64px 0; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 480px){
    .message p {
       font-size: 1.5rem;
    }
}

.footer{
background-color: #24292e;
padding: 10px 4% 10px;
text-align: center;
}

.footer p{
    color: #fefefe;
    opacity: 0.6;
    font-weight: bold;
}

@media screen and (max-width: 480px){
    .test {
        padding: 0 24px 32px 24px;
    }

    .test2 {
        padding: 0 24px 32px 24px;
    }


.header_2{
    padding: 32px 60px 10px 24px;

}

.section-title{
    padding: 64px 0 32px 0;
}

} 

@media screen and (max-width: 1480px) {
    .about-office dt, .about-office dd {
        width: 100%;
    }
}


@media screen and (max-width: 768px) {
    h2 {
        font-size: 28px;
        padding: 0 0 16px 30px;
    }

    .swiper-item {
        grid-template-columns: repeat(1, 1fr);
    }

    .about-year {
        width: 100%;
        margin-right: 0;
        padding-right: 0;
    }


    .about-year p {
        width: 100%;
        text-align: center;
    }

    .about-office {
        flex-direction: column;
        align-items: center;
    }

    .about-office dl {
        margin-top: 32px;
    }
    .about-office dt, .about-office dd {
        width: 100%;
    }

    .content_wrapper{
        display: block;
    }

    .content_wrapper dl{
        margin-left: 0px;
        margin-top: 32px;
    }

    .about-work {
        padding: 32px 32px;
    }
    
    .icon{
        align-items: center;
    }

    .icon-list li{
        display: block;
        text-align: center;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-bottom: 32px;

    }

    .qualification {
        padding-bottom: 16px;
    }

    .step1,.step2,.step3{
        padding: 0 0;
    }

    .step dl{
        flex-direction: column;
    }

    .step2,.step3 {
        padding-top: 20px;
    }
    
}