@charset "utf-8";

*{
  font-family: 'Kiwi Maru', serif;
}

.multiscroll-tooltip{
  font-family: 'Kiwi Maru', serif;
}


.w-container{
  margin: 0 auto;
  width: 90%;
}

/* Headerを上付きにする */
#header{
  position: relative;
  z-index:999;
  background-color:transparent;
  color: #fff;
  text-shadow: 0px 0px 10px #000;
  font-weight:bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:5px 20px;
  font-family: 'Kiwi Maru', serif;
  }

#header img{
  max-height: 50px;
  filter: drop-shadow(0px 0px 7px #fff);
}

#menu{
  display: flex;
  padding: 0 50px;
}

#menu li{
  margin: 0 9px;
}

#multiscroll-nav li{
  color: #fff;
}

#multiscroll-nav span{
  border: 2px solid #fff;
}

#multiscroll-nav .active span{
  background: none;
}

/*スクロールダウン全体の場所*/
.scrolldown4{
  /*描画位置*/
  position:absolute;
  bottom:1%;
  right:50%;
  /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
    0%{bottom:1%;}
    50%{bottom:3%;}
   100%{bottom:1%;}
}

/*Scrollテキストの描写*/
.scrolldown4 span{
  /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
  /*テキストの形状*/
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 3px;
  height: 20px;
  background: #fff;
  transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
  /*描画位置*/
  position: absolute;
  bottom:0;
  right:0;
  /*矢印の形状*/
  width:3px;
  height: 100px;
  background:#fff;
}

span{
  color: #fff;
  text-shadow: 0 0 5px #000;
}



/* メイン */
#left1 .sp-top{
  background:url("../images/bgimg-l.jpg") no-repeat right;
  background-size:cover;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

#left1 h1{
  position: absolute;
  top: 35%;
  left:20%;
  font-family: 'Kiwi Maru', serif;
  font-size: 3rem;
  line-height: 1em;
  text-shadow: 0 0 5px #fff;
}

#left1 img{
  filter: drop-shadow(0px 0px 5px #fff);
  max-width: 100px;
}

#left1 p{
  position: absolute;
  top: 55%;
  left:40%;
}

#right1{
  background:url("../images/bgimg-r.jpg") no-repeat left;
  background-size:cover;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

#left1 .sp-bottom{
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 999;
  letter-spacing: 0.1em;
  width: 10em;
}

h2{
  text-align: center;
}

p{
  text-align: left;
}

/* 鹿せんべい飛ばし大会 */
#left2{
  background:url("../images/senbei-s.jpg") no-repeat left;
  background-size:cover;
  }



 #left2 h2,#left2 p{
  visibility: hidden;
} 

/* 子鹿公開 */
#right3{
  background:url("../images/fawn-s2.jpg") no-repeat;
  background-size:cover;
  }

#left3{
  text-align: center;
}

/* つのきり */
#left4{
  background:url("../images/tsunokiri-s.jpg") no-repeat left;
  background-size:cover;
  }

#left4 h2,#left4 p{
  visibility: hidden;
} 

/* 鹿寄せ */
.video{
  width: 100%;
  height: 100vh;
  background: url(../images/shikayose.jpg) no-repeat center/cover;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;

}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  /* background-color: #10394b; */
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#left5{
  text-align: center;
}

#left5 .video{
  display: none;
}

small {
  position: fixed;
  left: 20px;
  top: 97%;
  color: #fff;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 0 0 5px #000;
}

/* メディアクエリ */
  @media screen and (max-width:768px){
    /*ライブラリで天地中央になっている見せ方を上揃えに上書き*/
    .ms-tableCell{
      vertical-align:top;
    }

    /*右上ナビゲーションと右エリア非表示*/
    #menu,
    .ms-right{
      display: none;
    }
    
    /*左エリアを横幅100%にして画像＋テキストを出す設定*/
    .ms-left{
      width:100%!important;
    }
    /*左エリア上部画像設定*/
    .sp-top{
      height:50%;
      margin:0 0 20px 0;
    }

    #header{
      padding: 0;
    }
      


    /* メイン */
    #left1 .sp-top{
      background:url("../images/bgimg-r.jpg") no-repeat center;
      background-size:cover;
    }	

    #left1 h1{
      position: relative;
      top: 70%;
      left: 0%;

    }


    /* 鹿せんべい */
    #left2{
      background-image: none;
    }

    #left2 .sp-top{
      background-image: url(../images/senbei-s.jpg);
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
    }

    #left2 h2,#left2 p{
      visibility: visible;
    } 

    /* 子鹿公開 */
    #left3 .sp-top{
      background-image: url(../images/fawn-s.jpg);
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
      height: 50%;
    }

    /* つのきり */
    #left4{
      background-image: none;
    }

    #left4 .sp-top{
      background-image: url(../images/tsunokiri-s.jpg);
      background-position: left;
      background-repeat: no-repeat;
      background-size: cover;
    }
    #left4 h2,#left4 p{
      visibility: visible;
    } 

    /* 鹿寄せ */
    .video{
      display: none;
    }

    #left5 .sp-top{
      background-image: url(../images/shikayose.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .sp-bottom{
      margin-top: 10vh;
    }


    .scrolldown4{
      display: none;
    }
    }