@charset "utf-8";

/*========= ナビゲーションのためのCSS ===============*/

/*PCサイズのメディアクエリ*/
@media only screen and (min-width: 486px){
 #g-nav{
  display: none;
 }
}


@media only screen and (max-width: 486px){
 #g-nav{
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position:fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  bottom:-120%;
  left:0;
  width:100%;
  height: 100vh;/*ナビの高さ*/
  background:rgba(41,56,85,0.88);
  /*動き*/
  transition: all 0.6s;
 }

 /*アクティブクラスがついたら位置を0に*/
 #g-nav.panelactive{
  bottom: 0;
 }

 /*ナビゲーションの縦スクロール*/
 #g-nav.panelactive #g-nav-list{
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;/*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
 }

 /*ナビゲーション*/
 #g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  top:40%; /*高さの位置決め*/
  left:50%;
  transform: translate(-50%,-50%);
 }

 /*リストのレイアウト設定*/

 #g-nav li{
  list-style: none;
  text-align: center;
 }

 #g-nav li a{
  color: #fff;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
  font-size: 16px;
 }

 #g-nav .g-nav-snslogo {
  display: flex;
  justify-content: space-evenly;

  img {
   width: 30px;
   margin-top: 15px;
  }
 }

 /*電話番号を線で囲う*/
 #g-nav-tel a{
  margin: 30px 0 0 0;
  padding: 10px 20px;
  border: 2px solid #fff;
  white-space: nowrap;
 }

 /*========= ボタンのためのCSS ===============*/
 .openbtn{
  position:fixed;
  z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  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: #cdcbcb;
  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%;
 }

 header nav {
  display: none;
 }
}





/*ページトップリンク*/

/*リンクの形状*/
#page-top a{
 display: flex;
 justify-content:center;
 align-items:center;
 background:#293855;
 border-radius: 5px;
 width: 60px;
 height: 60px;
 color: #fff;
 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.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);
 }
}



/*キャンペーンゆらゆら*/
@keyframes yurayura {
 50% {
  transform: rotate(-20deg);
 }

 100% {
  transform: rotate(20deg);
 }
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
 transition: 0.8s ease-in-out;
 transform: translateY(30px);
 opacity: 0;
}
.scroll_up.on {
 transform: translateY(0);
 opacity: 1.0;
}
/*リザルトリスト、時間差*/
.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}