@charset "utf-8";

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

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){

#sp_menu{
display: none;
}

}
/* min-width: 769px @end */



@media screen and (max-width:768px){


#g-nav{
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position:fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top:0;
right: -120%;
width:100%;
height: 100vh;/*ナビの高さ*/
background:#FFF;

/*動き*/
transition: all 0.6s;

}

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

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999; 
width: 100%;
max-height: 100vh;
max-height: calc(100vh - 40px);
overflow: auto;
-webkit-overflow-scrolling: touch;

}

#hmArea {
height: 100vh;/*表示する高さ*/
text-align: left;
padding: 58px 15px 15px 15px;

}

#hmArea .CL01 {

}

#hmArea .CL01 a,
#hmArea .CR01 a,
#hmArea .submenu a {
color: #000;
text-decoration: none;
padding:10px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
font-size: 14px;
}

#g-nav .CL01,
#g-nav .CR01,
#g-nav .submenu{
background-image : url(../images/icon01.png) ;
background-position : left center;
background-size: 8px 8px;
background-repeat: no-repeat;
padding-left: 15px;
margin-bottom: 20px;
}

#g-nav .CL01{
width: 50%;
float: left;
}

#g-nav .CR01{
width: 50%;
float: right;
}

/*ハンバーガーメニュー最下部の電話番号箇所*/
.spmenu_footer{
margin-top: 20px;
text-align: center;
}

.spmenu_footer img{
width: 90%;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:0;
right: 0;
cursor: pointer;
width: 48px;
height:48px;
background-color:#2F6FF8;
border-radius: 0 0 0 10px;

}

/*×に変化*/  
.openbtn1{
  position:fixed;
  z-index:9999;
  top:0;
  right:0;
  cursor:pointer;
  width:58px;
  height:58px;
  background-color:#2F6FF8;
  border-radius: 0 0 0 12px;
}

/* 3本線（基準を中央寄せにする） */
.openbtn1 span{
  display:inline-block;
  transition: all .4s;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  transform-origin: center;
  height:2px;                 /* 58pxなら2pxが綺麗 */
  border-radius:2px;
  background:#fff;
  width:52%;                  /* 好みで45〜55% */
}

/* 三本線の位置（58px用） */
.openbtn1 span:nth-of-type(1){ top:18px; }
.openbtn1 span:nth-of-type(2){ top:28px; }
.openbtn1 span:nth-of-type(3){ top:38px; }

/* ×に変化（top/leftをいじらず、中央固定で回転） */
.openbtn1.active span:nth-of-type(1){
  top:50%;
  width:55%;
  transform: translate(-50%, -50%) rotate(45deg);
}

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

.openbtn1.active span:nth-of-type(3){
  top:50%;
  width:55%;
  transform: translate(-50%, -50%) rotate(-45deg);
}




/*========= レイアウトのためのCSS ===============*/


}