@charset "utf-8";
.line {
    line-height: 0em;
}
header {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 75px;
    background-color: #FFFFFF;
    width: 100%;
    position: relative;
}

header .table {
    height: 100%;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}
header .table .cell {
    text-align: center;
    vertical-align: middle;
}
header nav  {
    top: 0px;
    right: 0px;
    width: 20%;
    height: 75px;
    background-color: #FFFFFF;
    display: block;
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    left: auto;
    z-index: 2;
}

header nav .sub_menu {
    width: 80%;
    float: left;
    height: 100%;
    border-right: 1px solid #9A9A9A;
    overflow-y: auto;
    display: none;
}
header nav .sub_menu ul {
    display: block;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
header nav .sub_menu ul li {
    display: block;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}
header nav .sub_menu ul li + li {
    margin-top: 2px;
}
header nav .sub_menu ul li a {
    display: table;
    width: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 3em;
    padding-bottom: 0px;
    padding-left: 3%;
    background-color: #F9F0DF;
    text-decoration: none;
    color: #000000;
    position: relative;
    height: 60px;
}
header nav .sub_menu ul li a:after {
    width: 0.5em;
    height: 0.5em;
    display: block;
    border-left: 2px none #717071;
    border-right: 2px solid #717071;
    border-bottom: 2px none #717071;
    border-top: 2px solid #717071;
    content: "";
    position: absolute;
    right: 3%;
    top: 50%;
    margin-top: -0.25em;
    transform: rotate(45deg);
}

header nav .sub_menu ul li a span {
    display: table-cell;
    vertical-align: middle;
}
header nav .sub_menu ul li.sister a {
    height: 73px;
    color: #FFFFFF;
}
header nav .sub_menu ul li.sister a:before, header nav .sub_menu ul li.sister a:after {
    border-color: #FFFFFF;
}
header nav .sub_menu ul li.sister.hi a {
    background-color: #A41180;
}
header nav .sub_menu ul li.sister.eco a {
    background-color: #007B60;
}
header nav .sub_menu ul li.sister.light a {
    background-color: #DB7751;
}
header nav .sub_menu ul li.sister a span {
    width: 53px;
}
header nav .sub_menu ul li.sister a span + span {
    width: auto;
    padding-left: 10px;
}
header nav .main_menu {
    width: 100%;
    float: right;
    height: 100%;
    position: relative;
    overflow-y: auto;
}
header nav .main_menu .box + .box {
    border-top: 1px solid #9A9A9A;
    display: none;
}
header nav .main_menu .box:last-child {
    border-bottom: 1px solid #9A9A9A;
}
header nav .main_menu .box .table {
    height: 100%;
    width: 100%;
    color: #2D2D2D;
    text-decoration: none;
}
header nav .main_menu .box .table .cell {
    text-align: center;
    vertical-align: middle;
    padding-top: 1em;
    padding-bottom: 1em;
}
header nav .main_menu .box .table .cell img+span {
    display: block;
    font-size: 1.2rem;
    margin-top: 1em;
}
header nav .main_menu .hamburger {
    height: 75px;
}
header nav .main_menu .hamburger .menu {
    font-size: 0px;
    width: 22px;
    height: 19px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
header nav .main_menu .hamburger .menu span,
header nav .main_menu .hamburger .menu:before,
header nav .main_menu .hamburger .menu:after {
    display: block;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    position: absolute;
    left: 0px;
    top: 50%;
    content: "";
    background-color: #2D2D2D;
	transition: 0.3s all;
}
header nav .main_menu .hamburger .menu:before {
	margin-top: 0px;
	top: 0px;
}
header nav .main_menu .hamburger .menu:after {
	margin-top: 0px;
	top: auto;
	bottom: 0px;
}
header nav.active .main_menu .hamburger .menu span {
	display: none;
}
header nav.active .main_menu .hamburger .menu:before {
	transform: rotate(45deg);
	margin-top: -1px;
	top: 50%;
	transition: 0.3s all;
}
header nav.active .main_menu .hamburger .menu:after {
	transform: rotate(-45deg);
	margin-top: -1px;
	top: 50%;
	transition: 0.3s all;
}
header nav.active {
    width: 100%;
    height: 100vh;
}
header nav.active .main_menu {
    width: 20%;
}
header nav.active .main_menu .box + .box {
    display: block;
}
header nav.active .sub_menu {
    display: block;
}













/****/
@media only screen and (min-width:640px) {
.line {
    display: none;
}
header {
    height: 95px;
    width: calc(100% - 100px);
}
header nav {
    max-width: 400px;
    width: 100px;
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100vh;
}
header nav .sub_menu {
    width: calc(100% - 100px) !important;
    border-right-style: none;
}
header nav .main_menu ,header nav.active .main_menu{
    width: 100px;
    border-left: 1px solid #9A9A9A;
}
header nav .main_menu .hamburger {
    height: 95px;
}
header nav .main_menu .box + .box {
    display: block;
}
header nav.active {
    width: 100%;
    max-width: 400px;
}
header nav.active .sub_menu {
    display: block;
}





}