@charset "utf-8";

@media only screen and (max-width:599px) {
    .sp .sp-ftNav {
    	background-color: #242424;
    	display: -webkit-flex;
    	display: -moz-flex;
    	display: -ms-flex;
    	display: -o-flex;
    	display: flex;
    	-webkit-flex-wrap: wrap; /* Safari */
    	flex-wrap:         wrap;
    	box-sizing: border-box;
    }
    .sp .topArea {
        position: relative
    }
    .sp .topArea p.abText{
    	width:90%;
        position: absolute;
        top: 85%;
        left: 5%;
	}
    .sp .sp-ftNav li {
        text-align: center;
        border-bottom: solid 1px #6d6d6d;
        border-right: solid 1px #6d6d6d;
        line-height: 40px;
        flex-direction: row;
    	box-sizing: border-box;
    	padding:2% 0;
    	width:100%;
    }

    .sp .sp-ftNav li.col2 {
        width:50%;
    }

    .sp .sp-ftNav li:nth-child(odd),
    .sp .sp-ftNav li.innerMenu ul li{
        border-right: none;
    }
    .sp .sp-ftNav li.innerMenu,
    .sp .sp-ftNav li.innerMenu02 {
        border-bottom: none;
        padding:0;
        background: #363636;
    }
    .sp .sp-ftNav li.innerMenu02 {
        background: #494949;
    }
    .sp .sp-ftNav li a,
    .sp .sp-ftNav li span {
        color: #FFF;
    }

    .sp .sp-ftNav li.projectMenu,
    .sp .sp-ftNav li.cocolaboMenu {
	    position: relative;
    }

     .sp .sp-ftNav li.projectMenu::before,
     .sp .sp-ftNav li.projectMenu::after,
     .sp .sp-ftNav li.cocolaboMenu::before,
     .sp .sp-ftNav li.cocolaboMenu::after {
	    content: '';
	    position: absolute;
	    top: 27px;
	    left: 23px;
	    width: 10px;
	    height: 1px;
	    background-color: #fff;
	    -webkit-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    transition: .3s;
    }

    .sp .sp-ftNav li.projectMenu::before,
    .sp .sp-ftNav li.cocolaboMenu::before {
	    left: 17px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}

     .sp .sp-ftNav li.projectMenu.open::before,
     .sp .sp-ftNav li.projectMenu.open::after,
     .sp .sp-ftNav li.cocolaboMenu.open::before,
     .sp .sp-ftNav li.cocolaboMenu.open::after {
	    content: '';
	    position: absolute;
	    top: 27px;
	    left: 23px;
	    width: 10px;
	    height: 1px;
	    background-color: #fff;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	    transition: .3s;
    }

    .sp .sp-ftNav li.projectMenu.open::before,
    .sp .sp-ftNav li.cocolaboMenu.open::before {
	    left: 17px;
	    -webkit-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}

     .sp .sp-ftNav li.projectMenu span,
     .sp .sp-ftNav li.cocolaboMenu span {
	    position: absolute;
	    top:0;
	    left:0;
	    width:22%;
	    height: 100%;
    }

     .sp .sp-ftNav li.cocolaboMenu span {
	    width:12%;
    }

	.pageTop {
		display: block !important;
	    position: relative;
	    top: 0;
	    right: 0;
	    margin: 0 0 36px 0;
	    width: 100%;
	    height: 48px;
	    background-color: #d7d7d6;
	    cursor: pointer;
	    z-index: 99;
	}

	.pageTop::before, .pageTop::after {
	    content: '';
	    position: absolute;
	    top: 22px;
	    right:46%;
	    width: 4.8%;
	    height: 1px;
	    background-color: #252525;
	    transition: .3s;
	}

	.pageTop::before {
	    left: 46%;
	    -webkit-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	}

}