/*==================
base
==================*/

html {
  box-sizing: border-box;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
  word-break: break-word;
  font-size: 16px;
  line-height: 1.5;
}

/* 画面外にいる状態 */
.fadein {
	opacity : 0.0;
	transform : translate(0, 50px);
	transition : all 800ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

.navi_list{
  left: 50%;
  transform: translateX(-50%);
  top:80px;
  margin:auto;
  height:50px;
  position:fixed;
  display: inline-block;
  z-index:3;
  max-width:1000px;
  display:flex;
  padding:0;
  justify-content: space-between;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1060px) {
.navi_list{
  left: 50%;
  transform: translateX(-50%);
  bottom:80px;
  top:auto;
  margin:auto;
  height:50px;
  position:fixed;
  display: inline-block;
  z-index:3;
  width:100vw;
  display:flex;
  padding:0;
  justify-content: space-between;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
  background-color: rgba(64,75,89,0.5);
  }
}
/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  transition:0.5s;
  visibility: visible;
}

.navi_list li{
  width:200px;
  text-align: center;
  text-decoration: none;
  list-style-type :none;
  display:inline-block;
  color:#5A8BD5;
  transition:0.8s;
  border-bottom: solid #5A8BD5 4px ;
}

.navi_list li.on{
border-bottom: solid #E27000 4px ;
transition:0.8s;
}
.navi_list li a{
  text-decoration: none;
  color:#FFF;
  font-size:18px;
  font-weight: 900;
}

@media (max-width: 1060px) {
  .navi_list li a{
    text-decoration: none;
    color:#FFF;
    font-size:14px;
    font-weight: 900;
  }
}
.navi_list li.on a{
color: #E27000 ;
transition:0.8s;
}

/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}
.fadeInDown_05s {
  animation: fadeInDown .5s forwards ease-in; }
.fadeInDown_05s_Next {
  animation: fadeInDown .5s forwards .3s ease-in; }
  @keyframes fadeInDown {
    0% {
        opacity: 0;
    }
    100% {
    opacity: 1;
    transform: translate(0);
    }
}

/*2.上下の動きを指定*/
.updown {transform: translateY(-100px);}
.downup {transform: translateY(100px);}
.updown-soon {transform: translateY(-100px);}
.downup-soon {transform: translateY(100px);}

/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}
.slide-right-soon {transform: translateX(200px);}
.slide-left-soon {transform: translateX(-200px);}

/* ブロックアニメーション */
.blockLeftRight {
    animation: blockLeftRight 1s ease-in-out forwards;
}
@keyframes blockLeftRight {
    0% {
      width: 0%;
      clip-path: inset(0 100% 0 0);
    }
    35%{clip-path: inset(0);}
    90%{clip-path: inset(0 0 0 70%);}
    100% {
      width: 100%;
      clip-path: inset(0 0 0 100%);
    }
}