@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 .ttl01{
padding: 10px 20px;
}

#g-nav .ttl01 img{
height: 37px;
}
.sp_title01 {
background-image: radial-gradient(circle at 100% 0%, rgba(220, 103, 237, 1) 4%, rgba(94, 119, 255, 1));
text-align: center;
padding: 10px 0;
}

.sp_title01 span{
color: #FFF;
background-image : url(../images/nv_icon01.svg) ;
background-position : left 0 center;
background-size: 30px auto;
background-repeat: no-repeat;
line-height: 40px;
padding: 20px 0 20px 40px;
font-weight: bold;
}


.sp_service_list{
text-align: left;
letter-spacing: 0.1em;
font-size: 14px;
}


.sp_service_ttl01 {
border-bottom: 4px solid #ED7474;
}

.sp_service_ttl02 {
border-bottom: 4px solid #6897F3
}

.sp_service_ttl03 {
border-bottom: 4px solid #81D297;
}

.sp_service_ttl04 {
border-bottom: 4px solid #EDC474;
}


.sp_service_ttl01,
.sp_service_ttl02,
.sp_service_ttl03,
.sp_service_ttl04 {
padding: 10px 0;
background-color: #FFF;
font-weight: bold;
text-align: center;
margin-top: 20px;
}


.sp_service_list ul.sp_service_ty01 li {
background-image : url(../../images/flag01.svg) ;
}

.sp_service_list ul.sp_service_ty02 li {
background-image : url(../../images/flag02.svg) ;
}

.sp_service_list ul.sp_service_ty03 li {
background-image : url(../../images/flag03.svg) ;
}

.sp_service_list ul.sp_service_ty04 li {
background-image : url(../../images/flag04.svg) ;
}

.sp_service_list ul.sp_service_ty01 li,
.sp_service_list ul.sp_service_ty02 li,
.sp_service_list ul.sp_service_ty03 li,
.sp_service_list ul.sp_service_ty04 li {
background-position : 0 0;
background-size: 16px auto;
background-repeat: no-repeat;
padding-left: 25px;
margin-top: 10px;
line-height: 160%;
}

#hmArea .bt01,
#hmArea .bt02 {
width: 100% !important;
font-size: 16px;
margin-top: 20px;
padding: 15px;
}




#g-nav{
position:fixed;
z-index: 999;
top:0;
right: -120%;
width:100%;
height: 100vh;
background:#E0F3FA;
transition: all 0.6s;
}

#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;
background-image : url(../images/bg01.png) ;
background-position : 0 0;
background-size: 50% auto;
background-repeat: no-repeat;
}


#hmArea {
height: 100vh;
text-align: left;
padding: 15px;

}




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

}

/*×に変化*/  
.openbtn1 span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 2px;
border-radius: 2px;
background-color: #000;
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 ===============*/


}