/* ============================================== */
/* ==============   vegas  ===================== */
/* ============================================= */

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

.slide_items {
  list-style: none;
  /* position: relative; */
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide_items img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 4s linear transform .4s;
  object-fit: cover;
}

.slide_items .zoom {
  transform: scale(1.05);
}
.slide_items img{
  width: 85%;
  margin:0 auto;
}



/* ============================================= */
/*========= 光りながら出現させるためのCSS ===========*/
/* ============================================= */
.js-glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.js-glowAnime.glow span{ animation:glow_anime_on 0.7s ease-out forwards; }

@keyframes glow_anime_on{
  0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
  50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
  100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}


/* ============================================= */
  /**************** ハンバーガ- ****************/
/* ============================================= */

#g-nav{
  /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
  position:fixed;
  z-index: -1;
  opacity: 0;/*はじめは透過0*/
  /*ナビの位置と形状*/
  top:0;
  width:100%;
  height: 100vh;/*ナビの高さ*/
  background:rgba(255, 255, 255, 1.8);
  /*動き*/
  transition: all 0.3s;
  display: none;
  }

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
opacity: 1;
z-index:999;
display: block;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999; 
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
  font-size: 95%;
  display: none;
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

#g-nav.panelactive ul {
  display: block;
}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
text-align: left;
/* display: block;
margin: 0 auto;  */
}

#g-nav li a{
color: #000;
text-decoration: none;
padding:1%;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:35px;
right: -5px;
cursor: pointer;
width: 90px;
height:100px;
font-weight: bold;
}

.openbtn1 span{
  display: inline-block;
  transition: all .4s;/*アニメーションの設定*/
  position: absolute;
}

.openbtn1 span:nth-of-type(1),
.openbtn1 span:nth-of-type(3) {
  height: 4px;
background: #000;
  width: 62%;
  left: 10px;
}

.openbtn1 span:nth-of-type(1) {
top:12px; 
}

.openbtn1 span:nth-of-type(2) {
top:28px;
left:19px;
font-size:1.0rem;
text-transform: uppercase;
color: #000;
letter-spacing: 0.1rem;
}

.openbtn1 span:nth-of-type(3) {
top:55px;
}

/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
.openbtn1.active span:nth-of-type(1) {
  top: 23px;
  left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 35%;
}

.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
  top: 35px;
  left: 18px;
  transform: translateY(-6px) rotate(45deg);
  width: 35%;
}




/* ========================= */
/* ====== フェイドイン ======= */
/* ========================= */


.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeUpTrigger{
      opacity: 0;
  }
  
  .blur{
    animation-name:blurAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
    from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
    }
  
    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
  }


/* =============================== */
/* ======　スクロールチェンジ ======= */
/* =============================== */

.headerColorScroll{
  transition: color 0.4s ease-out;
  background:#ffffff;
  box-shadow: 10px 10px 15px -10px;
}



/* ============================================================== */
/* ==============  2021タプレット 520-959px   ==================== */
/* ============================================================== */
@media screen and (max-width:959px){
  .slide_items img{
    width: 90%;
    margin-right: 1%;
  }
  .openbtn1{
    top:8px;
  }
  

}
/* ============================================================== */
/* ==============  2021タプレット 520-600px   ==================== */
/* ============================================================== */



/* ============================================================== */
/* ==============  2021スマホ     320-519px   ==================== */
/* ============================================================== */
@media screen and (max-width:600px){
  .slide_items img{
    width: 100%;
  }
  .service_content{
      flex-wrap: wrap;
  }
  .service_content a{
      width: 45%;
      margin:2%;
      justify-content: flex-start;
  }
}