@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:#252F43;

/*動き*/
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;

}

#g-nav .ttl01 {
background:#FFF;
height: 48px;

}

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

}

#hmArea .icon01,
#hmArea .icon02,
#hmArea .icon03,
#hmArea .icon04 {
background-position : left center;
background-size: 52px 52px;
background-repeat: no-repeat;
padding: 15px 0 15px 60px;
}


#hmArea .icon01 a,
#hmArea .icon02 a,
#hmArea .icon03 a,
#hmArea .icon04 a {
color: #FFF;
text-decoration: none;
padding:10px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
display: block;
}

#hmArea .icon01 {
background-image : url(../images/sp_icon01.svg) ;
}

#hmArea .icon02 {
background-image : url(../images/sp_icon02.svg) ;
}

#hmArea .icon03 {
background-image : url(../images/sp_icon03.svg) ;
}


#hmArea .icon04 {
background-image : url(../images/sp_icon04.svg) ;
}


#hmArea .icon05 {
background-image : url(../images/sp_icon05.png) ;
background-position : left center;
background-size: 18px auto;
background-repeat: no-repeat;
padding: 5px 0 5px 30px;
}


#hmArea a.icon05 {
color: #FFF;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

#hmArea .sp_menu_info {
text-align: center;
}

#hmArea .sp_menu_info a {
text-decoration: none;
color: #FFF;
}

#hmArea .sp_menu_info .ty01 {
font-size: 24px;
font-weight: bold;
}

#hmArea .f_tel_icon {
background-image : url(../images/f_tel_icon.png) ;
background-position : left 5px center;
background-size: 18px auto;
background-repeat: no-repeat;
padding: 5px 0 5px 40px;
}

#hmArea .f_fax_icon {
background-image : url(../images/f_fax_icon.png) ;
background-position : 0 center;
background-size: 26px auto;
background-repeat: no-repeat;
padding: 5px 0 5px 40px;
}

/*ナビゲーション*/
#g-nav ul {
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width: 100%;
}

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

#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;
}


/*ハンバーガーメニュー最下部の電話番号箇所*/
.spmenu_footer{
margin-top: 20px;
color: #FFF;
font-size: 12px;
}


.spmenu_footer .f_tel {
background-image : url(../images/icon03.png) ;
background-position : center left 0;
background-size: 16px auto;
background-repeat: no-repeat;
padding: 0 0 0 24px;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}

.spmenu_footer .f_tel a:link,
.spmenu_footer .f_tel a:visited {
color :#FFF;
text-decoration: none;
}



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

}

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

.openbtn1 span:nth-of-type(1) {
top:15px; 
}

.openbtn1 span:nth-of-type(2) {
top:23px;
}

.openbtn1 span:nth-of-type(3) {
top:31px;
}

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

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

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



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


}