@charset "utf-8";



#headLogo {

   background: url(../img/logo.png) center no-repeat;
   background-size: cover;
   display: block;
   padding: 34px 74px;
   text-indent: -1000px;
   width: 148px;
   height: 68px;
}


.small{
   font-size: 75%;
}

.mgl10{
   margin-left: 10px;
}

.mgl20{
   margin-left: 20px;
}

h2 {
   font-size: 2rem;
   text-align: center;
   line-height: 1.8rem;
   color: #003f5a;

}

h2 span {
   font-size: 50%;
   color: #999;
}


#breadCrumb {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   font-size: 80%;
   margin-top: 10PX;
}

#breadCrumb li {
   margin-right: 10px;
   color: #666;
}

#breadCrumb li:nth-of-type(n+2)::before {
   content: ">";
}

#breadCrumb li a {
   color: #666;
   text-decoration: underline;
}


body#settlment #mainVisual {
   background: #00405b url(../img/top01.png) right 0 /contain no-repeat;

}

body#GlobalService #mainVisual {
   background: #00405b url(../img/top02.png) right 0 /contain no-repeat;

}

body#OurAdvantages #mainVisual {
   background: #00405b url(../img/top03.png) right 0 /contain no-repeat;

}

body#CompanyOverview #mainVisual {
   background: #00405b url(../img/top04.png) right 0 /contain no-repeat;

}

body#Recruit #mainVisual {
   background: #00405b url(../img/top05.png) right 0 /contain no-repeat;

}

body#contact #mainVisual {
   background: #00405b url(../img/top06.png) right 0 /contain no-repeat;

}



body#privacy #mainVisual {
   background: #00405b url(../img/top07.png) right 0 /contain no-repeat;

}

body#sitemap #mainVisual {
   background: #00405b url(../img/top08.png) right 0 /contain no-repeat;

}









#mainVisual {
   /*min-height: 270px;*/
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -ms-flex-line-pack: center;
   align-content: center;
   height: 25vw;
   position: relative;
   width: 100%;

}

#mainVisual h1 {
   color: #fff;
   font-size: 3vw;
   text-align: center;
   width: 100%;
   margin: 0 auto;
   padding-right: 50%;
   line-height: 2.3rem;


}

#mainVisual h1 span {
   font-size: 50%;
}

#header {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding: 10px 50px;
   border-top: 8px solid #c89e53;
   border-bottom: 3px solid #c89e53;
   background: #fff;
}

#gnav {
   width: 70vw;
    min-width: 430px;
    margin-left: 30px;
}

/*
#gnav::before {
   content: "";
   background: url(../img/logo.png) center no-repeat;
   background-size: cover;
   display: block;
   padding: 34px 74px;

}
*/

#gnav ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding-left: 0;
 

}

#gnav li {
   color: #003f5a;
   font-size: 1.7vw;
    margin-left: 20px;
}

#gnav li a {
   text-decoration: none;
   color: #003f5a;
}

#gnav li a:hover {
   border-bottom: 1px solid #007bff;
    padding-bottom: 3px;
    color: #007bff;
}

#fixedMenu {
   position: fixed;
   right: 0;
   top: 20%;
   z-index: 1000;
}

#fixedMenu li {
   width: 46px;
   border-radius: 3px 0 0 3px;
   position: relative;
   height: 84px;
   right: -10px;
   -webkit-writing-mode: vertical-rl;
   -ms-writing-mode: tb-rl;
   writing-mode: vertical-rl;
}

#fixedMenu li:first-of-type {
   background: #0071bc;
   margin-bottom: 10px;

}

#fixedMenu li:last-of-type {
   background: #00a99d;
}

#fixedMenu li a {
   color: #fff;
   text-decoration: none;
   display: block;
   padding: 10px 15px 10px;

}

#fixedMenu li:hover {
   right: 0;
}

body > div.Wraper {
   background: #003f5a;
}

body:not(#home) > div.Wraper {
   background: #ffffff;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ffffff), color-stop(49%, #ffffff), color-stop(50%, #003f5a), color-stop(50%, #003f5a), to(#003f5a));
   background: linear-gradient(to bottom, #ffffff 1%, #ffffff 49%, #003f5a 50%, #003f5a 50%, #003f5a 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#003f5a', GradientType=0);
}

main {
   background: #fff;
   margin: 2.6% 0;
   -webkit-transform: skewY(-3deg);
   transform: skewY(-3deg);

}



.icon01::before {
   content: url(../img/icon01.png);
}

.icon02::before {
   content: url(../img/icon02.png);
}

.icon03::before {
   content: url(../img/icon03.png);
}

.icon04::before {
   content: url(../img/icon04.png);
}


body:not(#home) section > div {
   width: 80vw;
   margin: 0 auto;
}

section {
   /*margin-bottom: 80px;*/
    margin-bottom: 10vh;
}


.dediagonal {
   -webkit-transform: skewY(3deg);
   transform: skewY(3deg);
   padding: 50px 0 80px;
}



#fnav {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   background: #003f5a;
   -webkit-box-align: baseline;
   -ms-flex-align: baseline;
   align-items: baseline;
   padding-top: 50px;
   margin: 0 auto;
   margin-top: 50px;
   width: 80%;
}

#fnav > a {
   display: inline-block;
   margin-right: 10%;

}

/*#fnav>a::before {
   content: "";
   position: relative;
   background: url(../img/footerLogo.png) 0 0 no-repeat;
   background-size: contain;
   padding: 35px 74.5px;
   margin-right: 10%;
   height: 70px;
   width: 149px;

}*/

#fnav nav a {
   text-decoration: none;
   color: #fff;
}

#fnav nav a:hover {
   opacity: 0.5;
}

#fnav ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   padding: 0;

   /*width: 620px;*/

}

#fnav li {
   color: #fff;
   font-size: 1.3vw;
   width: calc(100% / 4);
}

@media screen and (min-width: 1440px) {

   #gnav li,
   #fnav li {
      /*font-size: 1vw;*/
   }

}

#fnav li::before {
   font-family: "Font Awesome 5 Free";
   content: "\f105";
   color: #fff;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
   font-style: normal;
   font-variant: normal;
   text-rendering: auto;
   line-height: 1;
   padding-right: 0.2rem;
}

.copyright {
   background: #fff;
   padding: 10px 100px;
   margin-top: 30px;

}

.copyright p {
   font-size: 0.5rem;
   margin: 0;

}

.copyright p br{
    display: none;
}
.spmenu {
   display: none;
}

.pagetop {
   position: fixed;
   right: 5%;
   width: 60px;
   height: 60px;
   z-index: 5000;
   bottom: 200px;
   display: none;
}

.pagetop img {
   width: 100%;
   height: auto;
}

@media screen and (min-width: 0px) and (max-device-width: 768px) {

   #headLogo {
      text-indent: 28%;
      font-size: initial;
      text-transform: uppercase;
      color: #c89e53;
      width: calc(100% / 4);
      height: auto;
      padding: initial;
      line-height: 3rem;
      font-family: "Cormorant Garamond";
      font-size: 7vw;
      background-size: contain;
      padding-top: 10px;
   }

   #gnav {
      width: initial;
   }

   #gnav ul {
      display: none;
      position: fixed;
      top: 97px;
      z-index: 1100;
      width: 100%;
      padding: 5px;
      left: 0;
      background: rgba(0, 63, 90, 0.95);
      ;
   }

   #gnav li {
      font-size: initial;
      color: #fff;
      border-bottom: 1px solid #fff;

      font-size: 1rem;
   }

   #gnav li a {
      color: #fff;
      display: block;
      padding: 30px;
   }

   #gnav li a::after {
      font-family: "Font Awesome 5 Free";
      content: "\f105";
      color: #fff;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1.5;
      padding-right: 0.2rem;
      float: right;
   }

   #header {
      padding: 10px;
      position: fixed;
      top: 0;
      z-index: 1000;
      width: 100%
   }



   #mainVisual h1 {
      font-size: 7vw;
   }

   body#settlment section:nth-of-type(2) > div > dl {
      padding: 0 20px;
   }

   body#settlment section:first-of-type > div > p {
      font-size: 8vw;
      text-align: justify;
      margin: 0 auto;
      width: 93%;
   }

   body#settlment section:first-of-type > div > p br {
      display: block;
   }

   body#settlment section:first-of-type > div > div:first-of-type {
      font-size: 1rem;
   }

   body#settlment section:first-of-type > div > div:last-of-type {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
   }

   body#settlment section:first-of-type > div > div:last-of-type p:first-of-type {
      padding: 0 20px;
      font-size: 1rem;
      text-align: justify;
   }

   body#settlment section:first-of-type > div > div:last-of-type p:last-of-type {
      width: 60%;
      margin: 0 auto;
   }


   #mainVisual {
      /*min-height:110px;*/
   }

   #mainVisual,
   .slider {
      margin-top: 105px;

   }

   #spmenu {
      display: block;
      font-size: 35px;


   }

   .menuBtn {
      position: fixed;
      z-index: 20000;
      cursor: pointer;
      width: 50px;
      height: 50px;
      right: 0;
      top: 30px;

   }

   #spmenu::before {
      font-family: "Font Awesome 5 Free";
      content: "\f0c9";
      color: #003f5a;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      padding-right: 0.2rem;
      position: absolute;
      right: 1.5vw;
      top: 30%;

   }

   body:not(#home) .dediagonal {
      padding: 0px 0 80px;
   }

   body#settlment section:nth-of-type(2) > div > dl dl {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 30px;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
   }

   body#settlment section:nth-of-type(2) > div > dl dl dt {
      margin: 0 0 20px;
   }

   body#settlment section:nth-of-type(2) > div > dl dl img {
      width: 100%;
      height: auto;
   }

   #fnav {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      padding-top: 0px;
      width: 95%;
   }

   #fnav > a {

      margin: 0 0 40px;

   }


   #fnav li {
      width: 50%;
      font-size: 4vw;
      margin-bottom: 30px;
      ;
   }

   .copyright {
      margin: 0;
      padding: 5px;
      text-align: center;
      height: 90px;
       margin-bottom: 25px


   }

   .copyright p {
      font-size: 0.6rem;
       
   }
    
        .copyright p br{
    display: block;
}
   

   .rotate::after {
      font-family: "Font Awesome 5 Free";
      content: "\f410";
      color: #003f5a;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      padding-right: 0.2rem;
      position: absolute;
      right: 1.5vw;
      background: #fff;
      top: 30%;
   }

   #fixedMenu {
      top: initial;
      bottom: 0;
      left: 0;
   }

   #fixedMenu ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 0;
      width: 100%;
      margin: 0;

   }

   #fixedMenu li {
      width: 50%;
      -webkit-writing-mode: initial;
      -ms-writing-mode: initial;
      writing-mode: initial;
      height: 60px;
      right: initial;
      border-radius: 3px 3px 0 0;
      text-align: center;
      
   }
   #fixedMenu li a{
      height: 100%;
      line-height: 3rem;
   }
   
   #fixedMenu li:first-of-type{
      margin-bottom: 0;
   }

   .pagetop {
      bottom: 100px;
      right: 0;
   }

}

@media only screen and 
(min-device-width : 768px) and 
(max-device-width : 1024px) and 
(orientation : portrait) {

   #fnav li{
      font-size: 1rem;
      padding: 0 13%;
   }
   
   .copyright{
      margin-bottom: 5px;
   }
}