@charset "utf-8";

#wrap {
	padding-bottom: 0 !important;
}

/* init */
.pc {
	display: block;
	background-color: #fff;
}
.sp,
.sp-ftNav {
	display: none;
}

.pc .menu {
	background-color: #000;
	position: fixed;
	z-index: 1000;
	top: 35%;
	left: -2px;
	width: 90px;
	height: 250px;
}
.pc .menu li:first-child {
	margin-top: 30px;
}
.pc .menu li {
	padding-left: 15px;
	margin-bottom: 20px;
}
.pc .menu li a {
	color: #fff;
	font-size: 10px;
	text-decoration: none;
}
.pc .menu li.menuOv::before {
	content: '▲';
	font-size: 5px;
	color: #fff;
	position: absolute;
	/*top: 45px;*/
	left: -3px;
	transform: rotate(90deg);
	transition: 0.3s;
}

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


	.fb-page {
		margin:0;
	}
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

    .sp .sp-ftNav {
		position:relative;
    	z-index: 31;
    	background-color: #000;
    	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 .sp-ftNav li {
        text-align: center;
        border-bottom: solid 1px #545454;
        border-right: solid 1px #545454;
        line-height: 40px;
        flex-direction: row;
        width:50%;
    	box-sizing: border-box;
    	padding:2% 0;
    }
    .sp .sp-ftNav li:first-child {
        width:100%;
    }
    .sp .sp-ftNav li:nth-child(odd){
        border-right: none;
    }
    .sp .sp-ftNav li a {
        color: #FFF;
        p
    }

    .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);
	}

}