@charset "UTF-8";

/*---------------------------------------------------------

 header
 
----------------------------------------------------------*/

#header-section {
  width: 100%;
  padding: 15px 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  float: left;
  top: 0;
  left: 0 !important;
  right: 0;
  z-index: 10;
}


#header-section.scrolled {
  padding: 0px 0;
  background: rgba(0, 0, 0, 0.8);
  background: white;
  box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-webkit-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-moz-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-ms-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-o-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
}

/*** ESSENTIAL STYLES ***/
.sf-menu,
.sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu {
  margin: 0 !important;
  float: right;
}

.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	right: 0;
	z-index: 5;
  box-shadow: none;
  border: transparent;
  min-width: 8em;
  *width: 8em;
}
.sf-menu > li { float: left; }
.sf-menu li { position: relative; }

.sf-menu a {
	display: block;
	position: relative;
  padding: .75em 0.5em;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  border: none !important;
  zoom: 1;
}

.sf-menu li,
.sf-menu ul li,
.sf-menu ul ul li,
.sf-menu li:hover,
.sf-menu li.sfHover {
  background: transparent;
}

	.sf-menu ul li a,
	.sf-menu ul ul li a {
		text-transform: none;
		padding: .75em 1em;
		letter-spacing: 1px;
	}
	
	.sf-menu li:hover a,
	.sf-menu li.sfHover a,
	.sf-menu ul li:hover a,
	.sf-menu ul li.sfHover a,
	.sf-menu li.active a { color: #000; }

.sf-menu ul li:hover,
.sf-menu ul li.sfHover { background: transparent; }
.sf-menu ul li { background: transparent; }

.sf-arrows .sf-with-ul {
  padding-right: 2.5em;
  *padding-right: 1em;
}

.sf-arrows .sf-with-ul:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -3px;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top-color: #ccc;
}

	.sf-arrows > li > .sf-with-ul:focus:after,
	.sf-arrows > li:hover > .sf-with-ul:after,
	.sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #ccc; }
	
	.sf-arrows ul .sf-with-ul:after {
		margin-top: -5px;
		margin-right: -3px;
		border-color: transparent;
		border-left-color: #ccc;
	}
	
	.sf-arrows ul li > .sf-with-ul:focus:after,
	.sf-arrows ul li:hover > .sf-with-ul:after,
	.sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #ccc; }
	
	#menu-wrap .sf-menu a { padding: 2em 2em 2em 2em; }

#primary-menu > li > .sf-with-ul:after {
  border: none !important;
  font-family: FontAwesome;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  float: right;
  margin-right: 5px;
  top: 50%;
  margin-top: -7px;
  content: "\f107";
}

#primary-menu > li > ul li > .sf-with-ul:after {
  border: none !important;
  font-family: FontAwesome;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  float: right;
  margin-right: 10px;
  top: 13px;
  font-size: 12px;
  content: "\f105";
}

@media screen and (min-width: 769px) {
  #primary-menu { display: none; }
}


/*---------------------------------------

 スマホメニュー

-----------------------------------------*/

#mobile-menu-btn {
  padding: 0 20px;
  z-index: 15;
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  display: table;
}

	#mobile-menu-btn i {
		line-height: 25px;
		display: table-cell;
		vertical-align: middle;
		font-size: 22px;
		color: #41372d;
	}

#mobile-menu {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  padding: 0.75em 0;
  width: 275px;
  height: 100%;
  background: #fff;
  transform: translateX(-275px);
		-moz-transform: translateX(-275px);
		-webkit-transform: translateX(-275px);
		-ms-transform: translateX(-275px);
  z-index: 35;
}

#mobile-menu #mobile-menu-ul { padding: 0; margin: 0; }

	#mobile-menu #mobile-menu-ul li:first-child { padding-top: 0; border-top: none; }
	#mobile-menu #mobile-menu-ul li {
		padding: 3.9px 10px;
		list-style: none;
		border-top: 1px solid #f7f7f7;
	}
	#mobile-menu #mobile-menu-ul li.online,
	#mobile-menu #mobile-menu-ul li.insta,
	#mobile-menu #mobile-menu-ul li.facebook { border-top: none; }

	#mobile-menu #mobile-menu-ul li.online { background: #dcdada; }
	#mobile-menu #mobile-menu-ul li.insta { background: #c5c3b1; }
	#mobile-menu #mobile-menu-ul li.facebook { background: #4d75b2; }
	
		#mobile-menu #mobile-menu-ul a {
			border-bottom: none !important;
			padding: 6px 0;
			display: block;
		}
		
		#mobile-menu-ul a i {
			width: 18px;
			height: 18px;
			line-height: 18px;
			text-align: center;
			color: #fff;
			background: #000;
			border-radius: 50%;
			vertical-align: central;
		}

		#mobile-menu-ul li.online a i,
		#mobile-menu-ul li.insta a i,
		#mobile-menu-ul li.facebook a i {
			width: 28px;
			height: 28px;
			line-height: 28px;
			font-size: 16px;
			text-align: center;
			color: #000;
			background: #fff;
			border-radius: 50%;
			vertical-align: central;
		}


	html.overflow #header-section,
	html.overflow .cate_btn,
	html.overflow .banner_list,
	html.overflow main,
	html.overflow #mobile-menu,
	html.overflow .mob_Fcate,
	html.overflow footer {
		transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-ms-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
	}

#logo-mobile-wrap {
  display: block;
  height: 60px;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 30;
  background: #fff;
  box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-webkit-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-moz-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-ms-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
		-o-box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
  transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
}

.cate_btn,
.banner_list,
main,
.mob_Fcate,
footer,
#logo-mobile-wrap {
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}

body.mobile-menu-visible .cate_btn,
body.mobile-menu-visible .banner_list,
body.mobile-menu-visible main,
body.mobile-menu-visible .mob_Fcate,
body.mobile-menu-visible footer,
body.mobile-menu-visible #logo-mobile-wrap {
  -moz-transform: translateX(275px);
  -webkit-transform: translateX(275px);
  -ms-transform: translateX(275px);
  transform: translateX(275px);
}

body .cate_btn,
body .banner_list,
body main,
body .mob_Fcate
body footer,
body.mobile-menu-visible #mobile-menu {
  -moz-transform: translateX(0);
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}