@charset "utf-8";

@media screen and (max-width:767px) {
  /*アクティブになったエリア*/
  #g-nav.panelactive{
      /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
      /*IE11対応のために今回は記述を削除
      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: var(--menucolor);
      /*丸のスタート位置と形状*/
      transform: scale(0);/*scaleをはじめは0に*/
      bottom:-50px;
      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;
      bottom: 0; /* ちょっとこの辺要確認 */
      left:50%;
      transform: translate(-50%, 0);
  }

  /*背景が出現後にナビゲーションを表示*/
  #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;
      transform: translateY(100px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
    display: none;
}

@media screen and (max-width: 767px) {
/*==================================================
　機能編 5-2-5 MENUが×に
===================================*/

    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .openbtn{
      display: block;
    	position: fixed;
      z-index: 9999;
      cursor: pointer;
      top:15px;
      right:20px;
      width: 30px;
      height:30px;
    }

    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
    }

    .openbtn span{
        height: 2px;
    	  background: #fff;
      	width: 100%;
    }

    .openbtn span:nth-of-type(1) {
    	top: 0;	
    }
    .openbtn span:nth-of-type(2) {
    	top: 50%;
    }

    .openbtn span:nth-of-type(3) {
    	top:100%;
    }

    /*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
    .openbtn.active span:nth-of-type(1) {
        top: 0;
        transform: rotate(45deg) scaleX(1.4);
        transform-origin: left top;
    }

    .openbtn.active span:nth-of-type(2) {
    	opacity: 0;
    }

    .openbtn.active span:nth-of-type(3){
        transform: rotate(-45deg) scaleX(1.4);
        transform-origin: left top;
    }

}

/*===========================================================*/
/* 機能編 8-1-6　ページの指定の高さを超えたら出現し、フッター手前で止まる*/
/*===========================================================*/

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
  flex-wrap: wrap;
	width: 40px;
	height: 60px;
	color: rgba(255,255,255,0.6);
	transition:all 0.3s;
  
  position: relative;
}
#page-top a::before{
    font-family: "Font Awesome 6 Free";
    content: '\f102';
    font-weight: 600;
    font-size: 30px;
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
}
#page-top a::after{
  content: 'TOP';
  font-family: Arial, Helvetica, sans-serif ;
  font-size: 10px;
  font-weight: bold;
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 0;
}
#page-top a:hover{
  color: rgba(255,255,255,1.0);
}


/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
	cursor: pointer;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
	animation-delay:0s;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
    animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}


/*==================================================
機能編 　7-1-5	背景が流れる（中央から横全体）
===================================*/

/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
	  overflow: hidden;
    /*ボタンの形状*/
	  text-decoration: none;
	  display: inline-block;
    padding: 10px  80px 10px 70px;
    background-color: var(--titlebgcolor);
    color: #fff;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
}


.btn.bgcenterout{
   	border: 1px solid #fff;/* ボーダーの色と太さ */
    padding: 8px 40px;
}

.btn::after{
    font-family: "Font Awesome 6 Free";
    content: '\f054';
    font-weight: bold;
    position: absolute;
    right: 10px;
    font-size: 1.2rem;
    top: 50%;
    margin-top: -1.1rem;
    z-index: 3;
}

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

/*== 左から右 */
.bgcenterx:before {
	content: '';
    /*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
    /*色や形状*/
	background: var(--headlinecolor);
	width: 100%;
	height: 100%;
    /*アニメーション*/
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: top left;
}

/*hoverした際の形状*/
.bgcenterx:hover:before{
	transform:scale(1, 1);
}

/* footer用: 左から右 */
.btn.footerbtn{
  display: block;
  text-align: center;
  margin-bottom: 1em;
  background-color: transparent;
  border: 1px solid #fff;
  max-width: 300px;
}
.footerbtn:hover{
  color: var(--gradient100);
}
/*== 左から右 */
.footerbtn:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background: #fff;
	width: 100%;
	height: 100%;
    /*アニメーション*/
	transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	transform: scale(0, 1);
	transform-origin: top left;
}
.footerbtn:hover:before{
	transform:scale(1, 1);
}

/* ボタンを右寄せしたいとき、囲ったdivに適用 */
.btnRight{
  text-align: right;
}

/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/
/* 4-2 パタッ（下へ） */
.flipDown{
    animation-name: flipDownAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}

/* 4-1 ふわっ（下から） */
.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);
  }
}


/* 4-1 ふわっ（左から）*/
.fadeLeft{
    animation-name: fadeLeftAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 4-1 ふわっ（右から） */
.fadeRight{
    animation-name: fadeRightAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}