@charset "utf-8";
/*bodyにappearクラスがついたら出現*/
body.appear #container {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*ナビゲーションを横並びに*/
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;	
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
  position: relative;
}
/*ナビゲーションのリンク設定*/
nav ul li a {
  display: block;
  text-decoration: none;
  color: #3e3a39;
  padding: 20px 25px;
  transition: all .3s;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: bold;
}
/*nav ul li li a {
  padding: 10px 35px;
}*/

.nav01c .icon-insta{
	width: 60px;
}

nav ul li a:hover {
  color: #877329;
}

@media screen and (max-width:1200px) {
  nav ul li a {
    padding: 20px;
  }
  /*nav ul li li a {
    padding: 10px 20px;
  }*/
}

@media screen and (max-width:600px) {
nav ul li a {
        padding: 0 20px;
    }
	
nav ul {
    justify-content: space-evenly;	
	}	
}


/*footer nav*/
/*ナビゲーションを横並びに*/
#foot-nav-list #foot-navi {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;	
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
#foot-nav-list #foot-navi li {
  position: relative;
}
/*ナビゲーションのリンク設定*/
#foot-nav-list #foot-navi li a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 20px 25px;
  transition: all .3s;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  font-weight: bold;
}
/*nav ul li li a {
  padding: 10px 35px;
}*/

.nav01c .icon-insta{
	width: 60px;
}

#foot-nav-list #foot-navi li a:hover {
  color: #877329;
}

@media screen and (max-width:1200px) {
  #foot-nav-list #foot-navi li a {
    padding: 20px;
  }
  /*nav ul li li a {
    padding: 10px 20px;
  }*/
}

@media screen and (max-width:600px) {
#foot-nav-list #foot-navi li a {
        padding: 0 20px;
    }
	
#foot-nav-list #foot-navi {
    justify-content: space-evenly;	
	}	
}





/*===========================================================*/
/*機能編  5-1-6 スクロール途中から上部固定 */
/*===========================================================*/
#header {
  position: fixed;
  height: 130px;
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  background-color: rgba(255,255,255,1.0);
}

/*==ふわっと出現させるためのCSS*/
/*　上に上がる動き　*/
#header.UpMove {
  position: fixed;
  width: 100%;
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}
/*　下に下がる動き　*/
#header.DownMove {
  position: fixed;
  width: 100%;
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width:1100px) {
  #header, #header.UpMove, #header.DownMove {
    animation: none;
    /*height: clamp(2.875rem, 2.267rem + 2.7vw, 4.125rem);*/
    padding: 0;
    display: block;
  }
}

@media screen and (max-width:600px) {
#header {
    height: 200px;
}
	


}
 


/*==================================================
機能編 8-1-4 ページの指定の範囲内で出現（下から上)
===================================*/
/*リンクの形状*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #e6e6e6;
  color: #e6e6e6;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6rem;
  transition: all 0.3s;
}
#page-top a:hover {
  background: #777;
}
/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateX(100px);
}
#page-top span {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-top: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  transform: rotate(45deg);
  margin: 8px 0 0 0;
}
/*　左の動き　*/
#page-top.LeftMove {
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*　右の動き　*/
#page-top.RightMove {
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(100px);
  }
}

/*=======　閉じるための×ボタン　========*/
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
}
.close-btn span {
  display: inline-block;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
}
/*×マーク*/
.close-btn span:nth-of-type(1) {
  top: 21px;
  left: 16px;
  transform: translateY(6px) rotate(-135deg);
  width: 50%;
}
.close-btn span:nth-of-type(2) {
  top: 32px;
  left: 16px;
  transform: translateY(-6px) rotate(135deg);
  width: 50%;
}