/***主顏色***/


:root {


  --bgColor: #363636;


  --mainColor: #b22222;


}





/***********/


.home {


  display: flex;


  justify-content: center;


  align-items: center;


  background: url(img/banner1.jpg) center no-repeat;


  background-size: contain;


  animation-name: banner;


  animation-duration: 20s;


  animation-iteration-count: infinite;


  height: 100vh;





}


body {


  background-color: #716f70;


}





/* body {


  background: url(img/bg.jpg) no-repeat !important;


  background-size: cover !important;


  background-attachment: fixed !important;


} */





.home h2 {


  text-align: center;


  font-size: 6rem;


  text-shadow: 0px 0px 15px black
}





header {


  background-color: #FFF;


}





header nav {


  position: absolute;


  top: calc(50% - 17.5px);


  right: 0px;


  width: 104px;


  height: 35px;


  background: url(img/navIcon.svg) center no-repeat;


  background-size: cover;


  cursor: pointer;


}





.fadeIn>.pstyle p,


h4 {


  text-align: center;


}





.pstyle {


  font-size: 24px;


}





.news .item h4 {


  text-align: left;


}





.news .item {


  background-color: rgba(255, 255, 255, 0.883);


}





.news .item>img {


  object-fit: fill !important;


}





.pstyle a {


  border-style: solid;


  border-width: 3px;


  border-color: #FFF;


  padding: 8px;


}





.home .cover {


  width: 100%;


  /* height: 100%; */


  display: flex;


  flex-wrap: wrap;


  justify-content: center;


  align-content: center;


  background: var(--bgColor) !important;


  z-index: -1;


}





.cover {


  margin: auto;


}





.about {


  background: #716f70;


}











.fadeIn p {


  text-align: center;


}


.about .cover .text {


  width: 70%;


  padding: 80px 10%;


  margin: 0 auto;


  border: #b22222 2px solid;


  background: url(texture.png) top left repeat fixed;


  background-size: 200px;


  background-color: rgba(255, 255, 255, 0.945);


  max-width: 800px;


  color: rgba(13, 13, 13, 1);


  text-align: center;


}


.about .cover .text h4 {


  color: #b22222;


  border-bottom: 1px solid #b22222;


}


.text h3 {


  color: #b22222;


}


.text span {


  color: #b22222;


}


.item h4 {


  color: #b22222;


}


.gallery h2 {


  text-align: center;


  font-size: 25px;


}


.menu h3 {


  color: #b22222;


}


.item span {


  font-weight: bold;


  color: #323357;


}


.fadeIn p {


  margin-top: 60px;
  color: #ffffff;


}


header>ul li a {


  color: #ffffff;


}





.about img {


  width: 70%;


  margin: auto;


}





.cover1 {


  width: 100%;


  height: 100%;


  background-color: rgba(13, 13, 13, 0.5);


  padding: 80px 0px;


}





.boxwidth {


  margin-bottom: 500px;


}





.gallery .box a.cross {


  width: calc(100% * 1 / 3 - 20px);


}





.cover2 {


  margin: auto;


  display: flex;


  width: 75%;


  height: 100%;


}





.cover2 img {


  margin: auto;


  width: 90%;


}





header {


  height: 150px;


}





header h1 img {


  height: 130px;


}





.title {


  font-weight: bold;


  color: #ffffff;


}





.menu ol {


  background-color: rgb(255, 255, 255);


}


.menu ol li {


  width: 100%;


  color: #000;


}


.menu ol li:last-child,
.menu ol li:nth-last-child(2) {


  border-bottom: var(--mainColor) 1px solid;


}





header h1 {


  text-align: left;


}





.item2 {


  float: left;


  padding: 0 2%;


  margin: 0 auto 30px;


}





.item2 h4 {


  color: #000;


  text-align: left;


  background-color: #ffcd19;


  padding: 5px;


}


.item2 p {


  padding: 5px;


  line-height: 24px;


}





.menug {


  display: flex;


  flex-wrap: wrap;


}





/* .fadeIn.active{


  margin-top:120px;


} */


header ul.sns li.web a {


  background: url(img/web.png);


  background-size: cover;


}


header ul.sns li.ruten a {


  background: url(img/ruten.png);


  background-size: cover;


  width: 95%;


}


.video .flim {


  display: flex;


  justify-content: space-between;


  flex-wrap: wrap;


}


.video iframe {


  width: 48%;


  margin-bottom: 30px;


}


.gallery .box .cover p {


  font-size: 25px;


}


@keyframes banner {


  0% {


    background: url(img/banner1.jpg) center no-repeat;


    background-size: contain;


  }





  28% {


    background: url(img/banner2.jpg) center no-repeat;


    background-size: contain;


  }





  33% {


    background: url(img/banner3.jpg) center no-repeat;


    background-size: contain;


  }





  61% {


    background: url(img/banner1.jpg) center no-repeat;


    background-size: contain;


  }





  66% {


    background: url(img/banner2.jpg) center no-repeat;


    background-size: contain;


  }





  95% {


    background: url(img/banner3.jpg) center no-repeat;


    background-size: contain;


  }





  100% {


    background: url(img/banner3.jpg) center no-repeat;


    background-size: contain;


  }


}





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


  .news .item>img {


    display: none;


  }





  .home h2 {


    font-size: 4rem;


  }





  .home {


    height: 58vh;


  }


}





@media screen and (min-width: 901px) {


  .isActive {


    display: none;


  }


}





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


  .fadeIn p {


    margin-top: 0px;


  }


  .about img {


    width: 100%;


  }





  .home {


    height: 58vh;


  }








  .cover2 {


    width: 100%;


  }








  header {


    height: 100px;


  }





  header h1 img {


    height: 80px;


  }





  .cover2 {


    display: grid;


  }





  .cover2 img {


    margin-top: 20px;


  }





  .gallery .box a.cross {


    width: calc(100% * 3 / 3 - 20px);


  }





  .item2 {


    width: 90%;


    float: none;


    margin: auto;


    margin-bottom: 48px;
  }





  .hide-item {


    display: none;


  }














  .fadeIn.active {


    margin-top: 0px;


  }


  .fadeIn p {


    text-align: left;


  }


  .video iframe {


    width: 100%;


  }





  /* .menuFlex {


    flex-direction: column;


  } */





}





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








  .home h2 {


    font-size: 2rem;


  }





  .home {


    height: 26vh;


  }


}