/*============
ナビ
#navArea
=============*/
#navArea{ position:relative; z-index:10;}
nav {
  display: block;
  position: fixed;
  top:0px;/*上からの距離*/
  right:-767px;/*左から出すか右から出すか*/
  bottom: 0;
  width:100%;
  background:rgba(53,53,53,.8);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index:998;
  transition: all .75s cubic-bezier(.64,.04,.35,1);
}
.open nav {
  right: 0;  /*左から出すか右から出すか*/
  opacity: 1;
}
/*▼ ハンバーガーメニュー  ここから▼*/

#header-sp{ background:rgba(255,255,255,1); width:100%; height:80px; z-index:990; top:0; transition: 0.7s ease; position: fixed;}
#header-sp a{ display:inline-block; text-decoration:none; margin:15px 20px 0;}
#header-sp p{ font-size:32px; font-weight:bold; color:#333; letter-spacing:normal; transition:.5s;}



nav .inner{ padding:60px 30px;}
nav .inner .logo{ width:200px; display:block; margin:0 auto 50px;}
nav .inner ul{ margin-bottom:50px;}
nav .inner ul li{ text-align:center; margin-bottom:20px; font-family: 'Zen Maru Gothic', serif;}
nav .inner ul li a{ font-size:16px; font-weight:bold; color:#fff; display:inline-block; text-decoration:none;}

nav .inner .area-01{ width:300px; margin:auto; text-align:center;}
nav .inner .area-01 .p-tel{ font-size:30px; font-weight:bold; padding-bottom:0px; border-bottom:1px solid #999; margin-bottom:7px; line-height:1.1em;}
nav .inner .area-01 .p-tel a{ color:#fff; display:inline-block; text-decoration:none;}
nav .inner .area-01 .p-tel a span{ font-size:20px; margin-right:5px;}
nav .inner .area-01 .p-01{ font-size:15px; color:#fff; letter-spacing:normal;}
nav .inner .area-01 .sns{ text-align:center; padding-top:20px;}
nav .inner .area-01 .sns a{ font-size:24px; color:#fff; display:inline-block; text-decoration:none;}


/*▼▼▼スクロールでふわっと表示▼▼▼*/

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.up {
  transition-timing-function: cubic-bezier(.64,.04,.35,1);
  transition: 0.6s ease-in-out;
  transform: translateY(60px);
  opacity: 0;
  transition-delay:0.6s; /* 閉じるときは遅延 */
}
.up.on2 {
  transform: translateY(0);
  opacity: 1.0;transition-delay: 0s; /* 開いたときは遅延なし */
}

.up.ntime.on2{ transition-delay:0.2s;}
.up.ntime2{ transition-delay:0.4s;}
.up.ntime3{ transition-delay:0.48s;}
.up.ntime4{ transition-delay:0.56s;}
.up.ntime5{ transition-delay:0.64s;}
.up.ntime6{ transition-delay:0.72s;}
.up.ntime7{ transition-delay:0.80s;}
.up.ntime8{ transition-delay:0.88s;}
.up.ntime9{ transition-delay:0.96s;}

  

/*============
メニュー（3本線）
.toggle_btn
=============*/
.toggle_btn {
background:#333;
border-radius:50%;
  display: block;
  position: fixed;
  top:8px;
  right:20px;
  width: 65px;
  height:65px;
  transition: all .5s;
  cursor: pointer;
  z-index:999;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left:21px;
  width:23px;
  height:3px;
  background:#fff;
  border-radius: 0px;
  transition: all .5s;
}
.toggle_btn.on2{ transition:1s; background:#fff;}
.toggle_btn.on2 span{ background:#333;}
.toggle_btn span:nth-child(1) {
  top:28px;
}
.toggle_btn span:nth-child(2) {
  top:39px;
}

.open .toggle_btn span {
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(5px) rotate(45deg);
  transform: translateY(5px) rotate(45deg);
}
.open .toggle_btn span:nth-child(2) {
  -webkit-transform: translateY(-6px) rotate(-45deg);
  transform: translateY(-6px) rotate(-45deg);}