/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
  display: flex;
  /* flex-wrap: wrap;スマホ表示折り返し用なのでPCのみなら不要 */
  /* margin:0 0 50px 0; */
  list-style: none;
}

.gnavi li a{
  display: block;
  padding:10px 15px;
  text-decoration: none;
  color: #333;
}
#footer .gnavi li a{
  display: block;
  padding:10px 15px;
  text-decoration: none;
  color: rgb(236, 236, 236);
}

/* .gnavi li{
  margin-bottom:20px;
} */

/*==================================================
　5-3-6 左から右に線が伸びて背景になる
===================================*/

/*背景の設定*/

.gnavi li a{
  /*背景色の基点とするためrelativeを指定*/
position: relative;
  /*アニメーションの指定*/
transition: all .7s;
}

.gnavi li a::after {
content: '';
  /*絶対配置で線の位置を決める*/
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
  /*背景の形状*/
width: 0;
height: 1px;
background:#1d1d1d79;
opacity: 0;/*はじめは透過を0に*/
}


#footer .gnavi li a::after {
content: '';
  /*絶対配置で線の位置を決める*/
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
  /*背景の形状*/
width: 0;
height: 1px;
background:#d3d2d28a;
opacity: 0;/*はじめは透過を0に*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
  /*背景の形状*/
width: 100%;
opacity: 1;
  /*アニメーションの指定*/
animation:bgappear1 0.5s forwards;
}
#footer .gnavi li.current a::after,
#footer .gnavi li a:hover::after {
  /*背景の形状*/
width: 100%;
opacity: 1;
  /*アニメーションの指定*/
animation:bgappear2 0.5s forwards;
}

/*アニメーションで線を伸ばして背景をつける*/
@keyframes bgappear1{
0% {
  width: 0%;
  height: 1px;
}
50% {
  width: 100%;
  height: 1px;
}
100% {
  width: 100%;
  height: 100%;
  background: #1d1d1d79;
}
}
@keyframes bgappear2{
0% {
  width: 0%;
  height: 1px;
}
50% {
  width: 100%;
  height: 1px;
}
100% {
  width: 100%;
  height: 100%;
  background: #d3d2d28a;
}
}

/*現在地とhoverの設定*/
.gnavi li.current a,
.gnavi li a:hover{
  color: #fff;
  /*テキストを最前面へ*/
z-index: 1;
}
@media (max-width: 800px){
  .gnavi li a{
    display: block;
    padding:10px 5px;
    text-decoration: none;
    color: #333;
  }
  #footer .gnavi li a{
    display: block;
    padding:10px 5px;
    text-decoration: none;
    color: rgb(236, 236, 236);
  }
}








/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	/* height: 100vh;スライダー全体の縦幅を画面の高さいっぱい（100vh）にする */
}
/*　背景画像設定　*/


.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
     height:50%;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする */
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	  z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  display: none;
	position: relative;
	z-index: 3;
    text-align:center;
	margin:50px 0 0 0;/*ドットの位置*/
}

@media (max-width: 800px){
  .slick-dots {
    display: none;
    position: relative;
    z-index: 3;
      text-align:center;
    margin:-50px 0 0 0;/*ドットの位置*/
}
}
@media (max-width: 600px){
  .slick-dots {
    display: none;
    position: relative;
    z-index: 3;
      text-align:center;
    margin:-200px 0 0 0;/*ドットの位置*/
}
}

.slick-dots li {
  display: none;
    /* display:inline-block; */
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
    display: none;
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*== ボタン共通設定 */
.btn{
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
overflow: hidden;
  /*ボタンの形状*/
text-decoration: none;
display: inline-block;
   border: 1px solid #555;/* ボーダーの色と太さ */
  padding: 10px 30px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/   
  transition: ease .2s;
  border-radius: 10px;
}

/*ボタン内spanの形状*/
.btn span {
position: relative;
z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
color:#333;
}

.btn:hover span{
color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 content: '';
  /*絶対配置で位置を指定*/
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
  /*色や形状*/
 background:#1d1d1d79;/*背景色*/
 width: 100%;
height: 100%;
  /*アニメーション*/
 transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 transform: scale(0, 1);
transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}



/* テキストタイピングCSS */
.TextTyping span {
	display: none;
}

/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}

/* 順番にふっわ(ｊS含む) */
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
  box-sizing: border-box;
	opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.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);
  }
}