@charset "utf-8";

.sp_menu{
	display: none;
}


.sp_gnav-wrap{
	display: none;
}


/*===========================================================================================================================================
=============================================================================================================================================

	タブレット

=============================================================================================================================================
===========================================================================================================================================*/
@media screen and (max-width: 1023px) {

.sp_menu{
	display: table;
    position: fixed;
    top: 14px;
    right: 10px;
    width: 64px;
    height: 64px;
    background-color: #035DA5;
    z-index: 100000;
}

.sp_menu-line{
	display: block;
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    margin: auto;
    width: 43px;
    height: 4px;
    background-color: #fff;
    transition: 0.4s;
}

.sp_menu-line:before, .sp_menu-line:after{
	content: " ";
	position: absolute;
	top: 0;
    left: 0;
	width: 43px;
    height: 4px;
    background-color: #fff;
	transition: 0.4s;
}

.sp_menu-line:before{
	margin-top: -12px;
}

.sp_menu-line:after{
	margin-top: 12px;
}

.sp_menu-line.active{
	background: transparent;
}

.sp_menu-line.active:before, .sp_menu-line.active:after{
	margin-top: 0;
	background-color: #fff;
}

.sp_menu-line.active:before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.sp_menu-line.active:after{
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

.sp_menu-text{
	display: table-cell;
    font-size: 0.95em;
    color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    text-align: center;
}





.sp_gnav-wrap{
	position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 310px;
    z-index: 10000;
    background-color: #035DA5;
}

.sp_gnav{

}

.sp_gnav-list{
	padding: 94px 20px 0;
}

.sp_gnav-item{
	width: 270px;
	border-top: 1px solid #fff;
	white-space: nowrap;
}

.sp_gnav-item:last-child{
	border-bottom: 1px solid #fff;
}

.sp_gnav-item a{
	display: block;
    font-size: 1.3em;
    color: #fff;
    padding: 15px 20px;
    text-align: right;
    background-repeat: no-repeat;
}

.sp_gnav-item.bg-img01 a{
	background-image: url(../img/head-icon01.png);
	background-position: left 20px center;
}

.sp_gnav-item.bg-img02 a{
	background-image: url(../img/head-icon02.png);
	background-position: left 25px center;
}

.sp_gnav-item.bg-img03 a{
	background-image: url(../img/head-icon03.png);
	background-position: left 16px center;
}

.sp_gnav-item.bg-img04 a{
	background-image: url(../img/head-icon04.png);
	background-position: left 23px center;
}

.sp_gnav-item.bg-img05 a {
    background-image: url(../img/head-icon05.png);
    background-position: left 22px center;
}

.sp_gnav-item.bg-img06 a {
    background-image: url(../img/head-icon06.png);
    background-position: left 19px center;
}

	}
	
/*===========================================================================================================================================
=============================================================================================================================================

	スマホ

=============================================================================================================================================
===========================================================================================================================================*/
@media screen and (max-width: 699px) {

.sp_menu{
    right: 5px;
}





.sp_gnav-wrap{
    width: 85vw;
    max-width: 310px;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-position: right 15px top 460px;
    background-size: 165px;
}

.sp_gnav{

}

.sp_gnav-item {
    width: auto;
    min-width: 232px;
}

.sp_gnav-item a{
    font-size: 1.1em;
    padding: 15px;
}

.sp_gnav-item.bg-img01 a{
	background-position: left 15px center;
}

.sp_gnav-item.bg-img02 a{
	background-position: left 20px center;
}

.sp_gnav-item.bg-img03 a{
	background-position: left 11px center;
}

.sp_gnav-item.bg-img04 a{
	background-position: left 18px center;
}

.sp_gnav-item.bg-img05 a{
	background-position: left 18px center;
}

	}