@charset "UTF-8";








 .js-animation {
    opacity: 0;
    visibility: hidden;
    transform: translateY(40px);
    transition: all 1s;
  }
  .js-animation.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }

  .top_logo_2 {
      width: 80%;
      position: absolute;
      top: 30%;
      left: 5%;
  }

  .fade{
    opacity : 0;
    transition: opacity 1s;
  }
   
  .fade.view{
    opacity: 1;
  }

  .slide-in {
      padding: 0 7%;
      background-color: rgba( 255, 255, 255, 0.6 );
  }


  .top_slide_in,
  .top_slide_in_3 {
    margin: 0;
    font-size: 4vw;
    font-weight: bold;
    letter-spacing: 1rem;
    line-height: 1.5;

  }

  .top_slide_in_2 {
    margin: 0;
    font-size: 1vw;
    font-weight: bold;
    letter-spacing: 1.5;
    letter-spacing: 1rem;
  }

.slide-in {
    overflow: hidden;
      display: inline-block;
  }
  
  .slide-in_inner {
    display: inline-block;
  
  }
  
  /*左右のアニメーション*/
  .leftAnime{
      opacity: 0;/*事前に透過0にして消しておく*/
  }
  
  .slideAnimeLeftRight {
    animation-name:slideTextX100;
    animation-duration:2.0s;
    animation-fill-mode:forwards;
    animation-delay: 3.0s;
      opacity: 0;
  }
  
  @keyframes slideTextX100 {
    from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
          opacity: 0;
    }
  
    to {
    transform: translateX(0);/*要素を元の位置に移動*/
      opacity: 1;
    }
  }
  
  .slideAnimeRightLeft {
    animation-name:slideTextX-100;
    animation-duration:2.0s;
    animation-fill-mode:forwards;
      opacity: 0;
  }
  
  
  @keyframes slideTextX-100 {
    from {
    transform: translateX(100%);/*要素を右の枠外に移動*/
      opacity: 0;
    }
  
    to {
    transform: translateX(0);/*要素を元の位置に移動*/
      opacity: 1;
    }
  }
  








/* index */

html {
    font-size: 62.5%;
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.2rem;
    color: #000000;
}


body {
    width: 100%;
    line-height: 2;
    font-size: 1.6rem;
	overflow-x: hidden; 
}
.copyright {
    text-align: right;
    padding-right: 7%;
}

.title {
    font-weight: bold;
}
.subtitle {
    color: #FF9900;
    font-weight: bold;
}
.topimage {
    margin: 0;
    width: 100vw;
}
.topimage img {
    width: 100vw;
}

.toptitle {
    position: absolute;
    width: 50vw;
    background-color: rgba( 255, 255, 255, 0.8 );
    left:0;
    top: 85%;
    border-top: solid 2px #FF9900;
    padding: 3% 6%;
    
}
.title {
    font-size: 4.2rem;
    margin: 1% 0;
}
.subtitle {
    font-size: 1.4rem;
    margin: 1% 0;
}
.adress,
.tel {
    margin: 0;
}


/* ＿＿＿＿＿＿index_about＿＿＿＿＿＿＿ */

.home #about {
    padding: 15% 7% 35%;
    margin-bottom: 30%;
}

.home #about .about_1 {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 120%;
    width: 100%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    
}

.home #about .about_2 {
    position: absolute;
    width: 60vw;
    height: 95%;
    background-color: #EEEEEE;
    left:0;
    top: 110%;
    z-index: 1;

}

.home #about .about_3 {
    position: absolute;
    width: 50vw;
    background-color: #ffffff;
    right:7%;
    top: 180%;
    z-index: 100;
    border-top: solid 2px #FF9900;
    padding: 3%;
    opacity: 80%;
}
.home #about .about_4 {
    text-align: right;
    
}
a.btnarrow4, a.btnarrow4:link, a.btnarrow4:visited {
    text-decoration: none;
    color: #FF9900;
}
/*矢印が右に移動する動き*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
  padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
  position: absolute;
    bottom:-8px;
    left:15%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
    background: #FF9900;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    bottom:-3px;
    right:0;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
  background: #FF9900;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}


.home #about .title {
    font-size: 4.2rem;
    margin: 1% 0;
}
.home #about .subtitle {
    font-size: 1.4rem;
    margin: 1% 0;
}
.home #service {
    padding: 5% 0;
    margin-bottom: 5%;
}
.home #service .title {
    font-size: 4.2rem;
    margin: 1% 0;
    text-align: center;
}
.home #service .subtitle {
    font-size: 1.4rem;
    margin: 1% 0;
    text-align: center;
}
.home #service .service {
    display: flex;
    background-color: #EEEEEE;
    justify-content: space-between;
    padding: 10% 7%;
}

.home #service .service .inshoku,
.home #service .service .iryou,
.home #service .service .haishoku {
    width: 25%;
    background-color: #ffffff;
    padding: 4% 3%;
    border-top: solid 2px #FF9900;
}

.home #service .service .service_2 {
    text-align: center;
    margin: 1% 0;
}
.home #service .service .service_3 {
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    margin: 1% 0;
}
.home #service .service .service_4 {
    text-align: center;
    color: #FF9900;
    font-weight: bold;
    margin: 1% 0 10% 0;
}

.home #service .service_6 {
    background-color: #EEEEEE;
    text-align: center;
    padding: 0 0 8% 0;
}

.home #service .border {
    border: solid 0.5px;
    height: 60px;
    width: 1;
    position: absolute;
    left: 50%;
}


.home #recruit {
    padding: 5% 0;
    margin-bottom: 5%;
}
.home #recruit .recruit{
    display: flex;
    justify-content: space-between;
    padding-left: 14%;
}
.home #recruit .recruit .recruit_1{
    padding-right: 5%;
    padding-top: 10%;
}

.home #recruit .title {
    font-size: 4.2rem;
    margin: 1% 0;
}
.home #recruit .subtitle {
    font-size: 1.4rem;
    margin: 1% 0;   
}
.home #recruit .text {
    margin: 18% 0;
}

.home #contact {
    padding: 5% 0;
    margin-bottom: 5%;
}
.home #contact .title {
    font-size: 4.2rem;
    margin: 1% 0;
    text-align: center;
}
.home #contact .subtitle {
    font-size: 1.4rem;
    margin: 1% 0;
    text-align: center;
}
.home #contact .text,
.home #contact .tel

 {
    margin: 1% 0;
    text-align: center;
}

.footer_1 {
    display: flex;
    justify-content: space-between;
    background: #EEEEEE;
    padding: 7% 22% 7% 7%;
}

footer ul {
    list-style-type: none;
}
footer ul li {
    margin-bottom: 20%;
}


/* ABOUT */

#page_about_1{
    padding: 15% 20% 5%;
}

.page_about_2,
.page_about_3,
.page_about_4,
.page_about_5 {
    margin-bottom: 20vh;
}
h3 {
    font-size: 2.4rem;
    padding: 3px 2%;
    border-left: 5px solid #FF9900;
    border-bottom: 1px solid #000;
    margin-bottom: 3%;
  }
  .page_about_4 p,
  .page_about_5 p {
      padding: 0 2%;
  }

table {
    border-spacing: 0;
    width: 100%;
}
table .td_1{
    border-bottom: 1px solid #000;
    width: 25%;
    padding: 3px;
    padding-left: 2%;
}
table .td_2{
    border-bottom: 1px solid #000;
    width: 75%;
    padding: 2%;
}

#page_about_1 .name {
    text-align: right;
}

.googlemap {
    margin: 5% 0;
}


/* Service */
#page_service_1{
    padding: 15% 16% 5%;
}
#page_service_2,
#page_service_3 {
    padding: 6% 18%;
}

#page_service_1 .inshoku_2 {
    display: flex;
    justify-content: space-between;
}

.page_service .service_2,
.page_service .service_7,
.page_service figure
 {
    text-align: center;
}
.page_service figure {
    margin: 3% 1%;
}
.service_3
 {
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    margin: 1% 0;
}
.service_4 {
    text-align: center;
    color: #FF9900;
    font-weight: bold;
    margin: 1% 0 10% 0;
}
.page_service  .service_5 {
    margin: 5% 0;
}

/* page_recruit */

#page_recruit_1{
    padding: 15% 7%;
}
.page_recruit_1{
    display: flex;
    justify-content: space-between;
}
.page_recruit_2{
    width: 40%;
    padding-left: 5.5vw;
}
#page_recruit_2{
    padding: 5% 18%;
}
.page_recruit_4 {
    color: #FF9900;
    font-weight: bold;
    font-size: large;
}
.page_recruit_5 {
    display: flex;
    font-weight: bold;
}
.page_recruit_5 p {
    margin-right: 1em;
}
.page_recruit_7 p {
    padding-left: 2%;
}

/* page_privacypolicy */

#page_privacypolicy {
    padding: 15% 15% 15%;
}
#page_privacypolicy h2 {
    text-align: center;
}









a,
a:link,
a:visited {
    text-decoration: none;
    color: #000;
}
a:hover {
    opacity: 0.6;
}


/* フェードインjs */
.fade{
    opacity : 0;
    transition: opacity 3s;
  }

@keyframes fadein2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
    }
   
.fade.view{
    opacity: 1;
  }

.fadein3 {
    /*デフォルトで透明度0に指定*/
    opacity: 0;
    transition: 1s;
}
.fadein5 {
    /*デフォルトで透明度0に指定*/
    opacity: 0;
    transition: 1s;
}

/*スクロールした時に追加されるクラス*/
.fadein4{
    opacity: 1;
}


.top_1{
    background: url(../images/top.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100vw;
    height: 100vh;
    position: relative;
}
.top_logo{
    position: absolute;
    top: 2%;
    left: 5%;
    animation-name: fadein2;
    animation-duration: 2s;
    z-index: 100;
}

.top_sp{
    display: none;
}
h2 {
    font-size: 3.6rem;
    margin-top: 0;
}


a,
a:link,
a:visited {
    text-decoration: none;
    color: #000;
}
a:hover {
    opacity: 0.6;
}

/* TOPに戻るボタン */
#page-top{
	position: fixed;
	bottom: 0;
	right: 0;
	background: #FF9900;
	min-width: 50px;
	min-height: 50px;
	line-height: 50px;
	text-align: center;
	color: #fff;
	bottom: 2%;
	right: 2%;
}

/* z-index */
.home {
    z-index: 100;
}
#page-top {
    z-index: 1000;
}

/* ハンバーガーメニュー　*/
#toggle {
    position: fixed;
    top: 40px;
    right: 40px;
}
#toggle-box {
    position: relative;
    width: 33px;
    height: 30px;
    cursor: pointer;
}
#toggle-box > span {
  width: 100%;
  height: 2px;
  left: 0;
  display: block;
  background: #FF9900;
  position: absolute;
  transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease;
}

#toggle-box > span:nth-child(1) {
    top: 0;
}
#toggle-box > span:nth-child(2) {
    top: 50%;
    transform: translatey(-50%);
}
#toggle-box > span:nth-child(3) {
    bottom: 0;
}

.is-open #toggle-box > span {
    background: #fff;
}
.is-open #toggle-box > span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg) translatey(-50%);
}
.is-open #toggle-box > span:nth-child(2) {
  width: 0;
}
.is-open #toggle-box > span:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg) translatey(-50%);
}

#nav-content {
    z-index: 0;
    overflow: auto;
    width: 100vw;
    height: 100vh;
    background: #000;
    color: #fff;
    position: fixed;
    box-sizing:content-box;
    top: 0;
    left: 0;
    transition: opacity .6s ease, visibility .6s ease;
    padding: 0;
    display: block;
}


#nav-content.nav-content-open{
    display: none;
    width: 100%;
    height: 100vh
}
#nav-content ul {
    list-style: none;
    padding: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    transform:translate(-50%, -50%);
    margin: 0;
    text-align: center;
}


#nav-content a {
  display: block;
  color: #EEEEEE;
  font-size: 2.6rem;
  font-weight: bold;
  text-decoration: none;
  padding: 1%;
  transition: opacity .6s ease;
  pointer-events: none;
}


#nav-content a:hover {
  opacity: 0.6;
}
.is-open {
    overflow: hidden;
}
#nav-content {
    display: none;
}
.is-open #nav-content {
  z-index: 999;
  visibility: visible;
  opacity: 1;
  display: block;
}
.is-open #nav-content a {
  pointer-events: auto;
}
#toggle {
    z-index: 1000;
}



@media screen and (max-width: 950px) {

.toptitle{
    top: 58%;
}


.home #about .about_3 {
        width: 80vw;
        top: 150%;
    }
.home #about .about_2 {
        position: absolute;
        width: 50%;
        height: 50%;
        background-color: #EEEEEE;
        left:0;
        top: 110%;
        z-index: 1;
    
    }
.home #service {
        padding: 5% 0;
        padding-top: 20vh;
    } 




    
}


@media screen and (max-width: 450px) {
body {
    font-size: 1.4rem;
}
.toptitle{
    top: 25%;
}
.top_logo {
    width: 20%;
}
.top_logo_2 {
    width: 90%;
    height: 35%;
}

.home #about .about_1 {
    text-align: center;
    margin: 0 auto;
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 115%;
    width: 90%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);}

.home #about .about_3 {
    top: 150%;
    padding: 5%;
}
#nav-content {
    padding: 0;
    width: 100vw;
    height: 100vh;
}
#nav-content ul {
    left: 50%;
}
.home #service {
    padding: 5% 0;
    padding-top: 40vh;
} 
.home #service .service {
 display: block;
} 
.home #service .service .inshoku,
.home #service .service .iryou,
.home #service .service .haishoku {
    width: 90%;
    padding: 8% 6%;
    margin: 5% auto;
}


.home #recruit {
    padding: 5% 7%;
    margin-bottom: 5%;
}
.home #recruit .recruit{
    display: block;
    padding: 0;
}

.home #recruit .recruit .recruit_1{
    padding-right: 0;
    padding-top: 0;
}

.home #recruit .title {
    font-size: 4.2rem;
    margin: 1% 0;
}
.home #recruit .subtitle {
    font-size: 1.4rem;
    margin: 1% 0;   
}
.home #recruit .text {
    margin: 18% 0;
}

.home #recruit .recruit_2 {
    text-align: center;
}
.home #contact {
    padding: 5% 7%;
    margin-bottom: 5%;
}

#page_about_1{
    padding: 15% 7% 5%;
}
#page_service_1{
    padding: 15% 7% 5%;
}



#page_service_1 .inshoku_2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#page_service_2,
#page_service_3 {
    padding: 6% 7%;
}
.page_service .inshoku_2 figure {
    margin: 3% 1%;
    width: 43%;
}
#page_recruit_2{
    padding: 5% 7%;
}




.footer_1 {

    padding: 7%;
}
.top_1 {
    display: none;
}
.top_sp {
    display: block;
    background: url(../images/top_sp.jpg);
    background-repeat: no-repeat;
    background-size:100%;
    width: 100%;
    height: 100vh;
    position: relative;
}

/* page_privacypolicy */

#page_privacypolicy {
    padding: 20% 7% 7%;
}

/*流れるテキストの設定*/

.slide-in {
      padding: 0 1%;
      background-color: rgba( 255, 255, 255, 0.6 );
  }


/*.top_slide_in,
  .top_slide_in_3 {
    margin: 0;
    font-size: 5vw;
    font-weight: bold;
    letter-spacing: 0.2rem;
    line-height: 1.5;
  }*/

  .top_slide_in img,
  .top_slide_in_3 img {
      height: 18px;
  } 

  .top_slide_in_2 img {
      height: 10px;
  }

  .top_slide_in_2 {
    margin: 0;
    font-size: 3vw;
    font-weight: bold;
    letter-spacing: 1.5;
    letter-spacing: 0.2rem;
    margin-top: 0.5em;
  }

.slide-in {
    overflow: hidden;
    display: inline-block;
  }
  .page_recruit_5 {
    display: block;
}
.page_recruit_2 {
    width: 45%;
    padding-left: 2vw;
}



}

/*========= Loadingアニメ ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1001;
  background:#fff;
  text-align:center;
}


#splash_logo_2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

/* Loading アイコンの大きさ設定　*/
#splash_logo img,
#splash_logo_2 img,
#splash_logo_2 img
 {
  width:260px;
}

/* fadeUpの動き */

.fadeUp_a{
    animation-name: fadeUpAnime2;
    animation-duration:5s;
    animation-fill-mode:forwards;
    animation-delay: 0;
    opacity: 0;
    }



@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
@keyframes fadeUpAnime2{
    from {
      opacity: 0;
    transform: translateY(0px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }