@charset "utf-8";


/* -- ul#menu -------------------------------------------------------------------------------- */
.sp_menu5{
	width : auto;
	margin : 0px 10px;
	background-color : #ea6f2e;
}
.sp_menu5 ul{
    margin-left : 0px;
    list-style: none;
}
.sp_menu5 li.m1 {
    background-image : url(https://fft-seitai.com/wp-content/themes/design-thema/image/m1_icon.jpg);
    background-repeat : no-repeat;
    background-position:10px center;
	background-color : #ffffff;
	margin : 10px 0px;
	text-align : center!important;
	height : 34px;
	line-height : 22px;
}
.sp_menu5 li.m1 a{
	color : #444444!important;
}
.sp_menu5 li.m2 {
    background-image : url(https://fft-seitai.com/wp-content/themes/design-thema/image/m2_icon.jpg);
    background-repeat : no-repeat;
    background-position:10px center;
	background-color : #ffffff;
	margin : 10px 0px;
	text-align : center!important;
	height : 34px;
	line-height : 22px;
}
.sp_menu5 li.m2 a{
	color : #444444!important;
}
.sp_menu5 li.m3 {
    background-image : url(https://fft-seitai.com/wp-content/themes/design-thema/image/m3_icon.jpg);
    background-repeat : no-repeat;
    background-position:10px center;
	background-color : #ffffff;
	margin : 10px 0px;
	text-align : center!important;
	height : 34px;
	line-height : 22px;
}
.sp_menu5 li.m3 a{
	color : #444444!important;
}
.sp_menu5 li.m4 {
    background-image : url(https://fft-seitai.com/wp-content/themes/design-thema/image/m4_icon.jpg);
    background-repeat : no-repeat;
    background-position:10px center;
	background-color : #ffffff;
	margin : 10px 0px;
	text-align : center!important;
	height : 34px;
	line-height : 22px;
}
.sp_menu5 li.m4 a{
	color : #444444!important;
}
.sp_menu5 li.m5 {
    background-image : url(https://fft-seitai.com/wp-content/themes/design-thema/image/m5_icon.jpg);
    background-repeat : no-repeat;
    background-position:10px center;
	background-color : #ffffff;
	margin : 10px 0px;
	text-align : center!important;
	height : 34px;
	line-height : 22px;
}
.sp_menu5 li.m5 a{
	color : #444444!important;
}
.sp_menu_title{
	color: #ffffff;
    background-color : #ea6f2e!important;
    text-align : center;
    font-weight : bold;
    margin-top : 30px;
    padding-top : 20px;
    padding-bottom : 20px;
}
.sp_menu_title{
	color: #ffffff;
    background-color : #ea6f2e!important;
    text-align : center;
    font-weight : bold;
    margin-top : 30px;
    padding-top : 20px;
    padding-bottom : 20px;
}
ul#menu {
	list-style-type: none;
	width: 70%;
	background: #ea6f2e;
	opacity: 0.9;
position: fixed;
overflow-y: scroll;
height: calc(100vh - 60px);
	right: 0px;
	top: 60px;
	z-index: 990;
	display: none;
}

ul#menu li {
	position: relative;
	text-align: left;
	list-style: none;
	margin-bottom: 0;
	border-bottom: 1px dotted #ffffff;
	font-size: 1.4rem;
}

ul#menu li a {
	text-decoration: none;
	color : #ffffff;
	display: block;
	padding: 8px 0 8px 0px;
}

ul#menu li a:hover {
	background: #a9a9a9;
	opacity: 0.7;
}
ul.sp_navmenu{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding:0;
}
ul.sp_navmenu li{
  position:relative;
  padding: 0 0 0 20px;
  margin: 0px;
  font-size:14px;
  line-height: 22px;
  border-bottom: dashed 1px #F6A38B;
}
ul.sp_navmenu li:before{
  counter-increment: list;
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #ffffff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


/* -- div#sp-icon -------------------------------------------------------------------------------- */
@media screen and (min-width: 650px){
div#sp-icon {display : none;}
}
div#sp-icon {
	width: 60px;
	height: 60px;
	position: fixed;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color : #ea6f2e
}

div#sp-icon:hover {
	cursor: pointer;
	opacity: 0.7;
}

div#sp-icon span,
div#sp-icon span:before,
div#sp-icon span:after {
	display: inline-block;
	width: 30px;
	height: 3px;
	background: #ffffff;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.3s;
}

div#sp-icon span {
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	background-color : #ffffff;
}

div#sp-icon span:before {
	content: "";
	transform: translateY( -10px ) rotate( 0deg );
}

div#sp-icon span:after {
	content: "";
	transform: translateY( 10px ) rotate( 0deg );
}


div.sp-open span {
	background: transparent !important;
}

div.sp-open span:before {
	transform: rotate( 45deg ) !important;
}

div.sp-open span:after {
	transform: rotate( -45deg ) !important;
}