@charset "utf-8";

/* ---------INDEXに戻る-------------------------------------------------- */
.to_index{font-family: 'Teko', sans-serif;
    position: fixed;
    z-index: 9999;
    top:3vh;left:2vw;}
h1{font-size: 40px;color:tan;font-weight: normal;line-height: 1;}
.modoru{width: 70px;}
.modoru{transition:-webkit-transform 0.3s;transition: transform 1s;}
.modoru:hover {cursor: pointer;transform: scale(0.5,0.5);opacity: 20%;}

/* ---------JASLAC-------------------------------------------------- */
.jaslac{width: 100%;height:70px;display: flex;justify-content: center;}
.jaslac p{font-size: 12px;color:white;margin-top: 26px;}
.mark{width: 50px;margin-right:20px;margin-top:10px;margin-bottom: 10px;}
/* ---------スマホ用-------------------------------------------------- */
@media screen and ( max-width :450px )
{
.jaslac p{font-size: 10px;color:white;margin-top: 27px;}
.mark{width: 50px;margin-right:20px;margin-top:10px;margin-bottom: 10px;}
}
/* ---------JASLAC-------------------------------------------------- */

/*========= ナビゲーションのためのCSS ===============*/
/*アクティブになったエリア*/
#g-nav.panelactive{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;z-index: 999;
	top: 0;
	width:100%;height: 100vh;}

/*丸の拡大*/
.circle-bg{position: fixed;z-index:3;
  /*丸の形*/
  width: 100px;height: 100px;border-radius: 50%;
  background: #999;
  /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
  top:calc(50% - 50px);/*50%から円の半径を引いた値*/
  left:calc(50% - 50px);/*50%から円の半径を引いた値*/
  transition: all .6s;/*0.6秒かけてアニメーション*/}
.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/}
/*ナビゲーションの縦スクロール*/
#g-nav-list{
  display: none;/*はじめは表示なし*/
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;z-index: 999;
  width: 100%;height: 100vh;
  overflow: auto;
    -webkit-overflow-scrolling: touch;}
#g-nav.panelactive #g-nav-list{display: block; /*クラスが付与されたら出現*/}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;/*はじめは透過0*/
  /*ナビゲーション天地中央揃え※レイアウトによって調整。不必要なら削除*/
  position: absolute;z-index: 999;
  top:50%;left:50%;
  transform: translate(-50%,-50%);}
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {opacity:1;}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;}

@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/*リストのレイアウト設定*/
#g-nav li{text-align: center;list-style: none;}
#g-nav li a{
  font-family: 'Teko', sans-serif;
	color: #333;font-size: 25px;
	text-decoration: none;
	line-height: 1.8;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;}

#g-nav{display: flex;}
/*========= ボタンのためのCSS ===============*/
.openbtn
{position:fixed;
  background:tan;
	top:20px;/*ボタンの配置 top*/
	right: 20px;/*ボタンの配置 right*/
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;	border-radius: 5px;
  width: 70px;/*ボタンの幅*/
  height:70px;/*ボタンの高さ*/}

/*========= Nekos   CLOSE  ===============================================*/
.openbtn span:nth-of-type(3)::after
{content:"Nekos";/*3つ目の要素のafterにCALENDAR表示を指定*/
  position: absolute;
  top:15px;
  left:0px;
  color:white;
  font-size: 0.6rem;
  text-transform: uppercase;}

.openbtn.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
  transform: translateY(0) rotate(-45deg);
  top:13px;
  left:13px;}
/*========= CALENDAR   CLOSE  ===============================================*/

.openbtn span{display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 19px;
  height: 3px;
  border-radius: 2px;
	background-color: #666;
  width: 45%;}

.openbtn span:nth-of-type(1) {top:15px;}
.openbtn span:nth-of-type(2) {top:23px;}
.openbtn span:nth-of-type(3) {top:31px;}

.openbtn.active span:nth-of-type(1) {
  top: 18px;left: 25px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){
  top: 30px;left: 25px;
  transform: translateY(-6px) rotate(45deg);width: 30%;}

#footer{background:red;padding:20px;}

/*========= レスポンシブ =======================================================*/
@media screen and (max-width:450px)/*========= for 450px ===============*/
{
/* ---------INDEXに戻る------------------------------------ */
.to_index{top:3vh;left:6vw;}
h1{font-size: 20px;color:tan;font-weight: normal;line-height: 1;}
.modoru{width: 35px;}
/*========= ボタンのためのCSS ===============*/
.openbtn span:nth-of-type(3)::after
{
  content:"Nekos";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:5px;/*========= 前回　5 ===============*/
  left:-5px;/*========= 前回　-2 ===============*/
  color:white;
  font-size: 0.6rem;/*========= 前回　0.5 ===============*/
  text-transform: uppercase;}

.openbtn.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
  transform: translateY(0) rotate(-45deg);
  top:5px;/*========= 前回　5 ===============*/
  left:4px;/*========= 前回　2 ===============*/
}
.openbtn{position:fixed;
	top:10px;right: 10px;
	z-index: 9999;/*ボタンを最前面に*/
	cursor: pointer;width: 50px;height:50px;}

/*×に変化*/
.openbtn span{display: inline-block;
  transition: all .4s;position: absolute;
  left: 14px;height: 3px;border-radius: 2px;
	background-color: #666;width: 45%;}

.openbtn span:nth-of-type(1) {top:15px;}
.openbtn span:nth-of-type(2) {top:23px;}
.openbtn span:nth-of-type(3) {top:31px;}

.openbtn.active span:nth-of-type(1) {
  top: 18px;left: 18px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){top: 30px;left: 18px;
  transform: translateY(-6px) rotate(45deg);width: 30%;}

#g-nav ul{top:55%;left:50%;}
#g-nav li a{font-size: 20px;line-height: 1.8;}
}

@media screen and (max-width:320px)/*========= for 320px ===============*/
{
#g-nav ul{top:55%;left:50%;}
#g-nav li a{font-size: 15px;line-height: 1.8;}
}