﻿/*===================================================*/
/*フローティングメニュー*/
/*===================================================*/
.floatmenu {
    top: 160px;
    position: absolute;
    right: -187px;
    z-index: 9999;
    transition: right 300ms 0s ease;
}

.floatmenu.active {
    right:0px;
}

.floatmenuContent {
    position:relative;
}

.floatmenu_disp {
    position: absolute;
    top: 0px;
    left: -33px;
    background-color:rgba(26,18,45,0.8);
    padding: 6px 6px 0px 6px;
}

.floatmenu li {
    margin: 0px 0px;
}

.floatmenu li a {
    text-decoration: none;
}

.floatmenu li div {
    padding: 9px 15px;
    color: black;
    /*background: linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);  
    background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);  
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc));*/  
    width: 187px;
    border-bottom: 1px solid #e1e1e1;

    /*IE6 IE7 */
    /*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#e1e1e1, endcolorstr=#cfcfcf);
    background: -ms-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);
    background: -moz-linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);  
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #e1e1e1), color-stop(0.5, #e1e1e1), color-stop(0.99, #cfcfcf), to(#ccc));
    background: linear-gradient(top, #fff, #e1e1e1 1%, #e1e1e1 50%, #cfcfcf 99%, #ccc);*/  
    /*background-color:#e1e1e1;*/
    background-color:rgba(84, 193, 241, 0.85);
    
}

.floatmenu li:last-child div {
    border-bottom:none;
}

.floatmenu li div:hover {
    background: #869791;
    color: white;
}

.floatmenu li div span {
    font-size: 14px;
    font-weight: bold;
    display: block;
    
}

.floatmenu .menu-trigger,
.floatmenu .menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.floatmenu .menu-trigger {
    position: relative;
    width: 21px;
    height: 20px;
}
.floatmenu .menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
}
.floatmenu .menu-trigger span:nth-of-type(1) {
	top: 0px;
}
.floatmenu .menu-trigger span:nth-of-type(2) {
	top: 9px;
}
.floatmenu .menu-trigger span:nth-of-type(3) {
	bottom: -2px;
}

.floatmenu .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(15px) rotate(-45deg);
    top: -6px;
}
.floatmenu .menu-trigger.active span:nth-of-type(2) {
	opacity: 0;
}
.floatmenu .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-15px) rotate(45deg);
    bottom: -8px;
}

@media screen and (max-width: 1050px) {
    .floatmenu {
        display:none;
    }
}
