@charset "UTF-8";

/* hh-responsive-navi ver.2.2

hh-side-navigation.jsと一緒に使う。
画面全て共通
バーガーとリストメニュー
*/


/*wrapper*/

#hh-responsive-navi{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:99;
}

/*wordpress admin-bar*/
/*
WPのadminbar出現時の対処法
ナビゲーションをfixedにしている場合
アドミンバーの高さ分下げる。
600px以下はwpに合わせてabsoluteにする。

*/


.admin-bar #hh-responsive-navi{
	top:32px;
}

@media(max-width:782px){
	
	.admin-bar #hh-responsive-navi{
	top:46px;
}
	
}
@media(max-width:600px){
	
	.admin-bar #hh-responsive-navi{
	position:absolute!important;
}
	
}

#hh-responsive-navi .burger {
	position:absolute;
	top:20px;
	left:20px;
}

#hh-responsive-navi .slide-navi{
	position:absolute;
	top:20px;
	left:20px;
}


/*font*/
.slide-navi_pc,.slide-navi {
	font-family:'';
}


/* BURGER */
.burger{
    height: 20px;
    position:absolute;/*fixed;*/
    right: 20px;
    top: 20px;
    width: 30px;
    z-index: 99;
}

.burger_line{
    background: #000;
    display: block;
    height: 2px;
    position: absolute;
    transition:transform .3s;
    width: 100%;
}
.burger_line-top{
    top: 0;
}

.burger_line-center{
    top: 9px;
}
.burger_line-bottom{
    bottom: 0;
}

.burger_line-top.active{
    top: 8px;
    transform: rotate(45deg);
}
.burger_line-center.active{
    transform:scaleX(0);
}
.burger_line-bottom.active{
    bottom: 10px;
    transform: rotate(135deg);
}



/*-- navigation --*/


/*slide-bg is background panel with motion toggle by burger. controled by JS*/

.slide-bg{
width:0px;
height:100%;
display: table;
background:#fafafa;/*#e6e3e1;rgba(230,227,225,1);*/
position:fixed;
top:0;
/*left:-300px;*/
/*-webkit-transition: left 0.1s,background 0.5s;*/
padding-left:0px;
padding-top:50px;
z-index:2;
opacity:1; 
}

/*スライドナビゲーション*/

.slide-navi{ 

display: none;
opacity:0;
transition:opacity 0.3s;
width:400px;
height:auto;
position:absolute;
top:0;
left:0px;
/*-webkit-transition: all 0.5s;*/
/*padding-left:55px;*/
/*padding-top:0px;*/
z-index:3;
font-size:2.6rem;/*18px;*/
color:#fc4f42;/*black;*/
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}

.slide-navi.show{
	display:block;
}
.slide-navi.visible{
	opacity:1;
	transition:opacity 0.5s;
}


.slide-navi ul{
	margin:0;
	padding:0;
	padding-top:60px;
}

.slide-navi ul li{

 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 display:block;
 cursor:pointer;
 padding:10px;
 padding-left:20px;

	
}

.slide-navi ul li a{
    text-decoration: none;
	color:#fc4f42;/*black;*/
}


/*メニューの文字　和欧併記用*/
.main-menu a {
  display: inline-block;
  text-align: left;
  line-height: 1.2;
  /*padding: 0.5em 1em;*/
}

.en-label {
  font-size: 1em;
  font-weight: bold;
  display: block;
	font-family:'carlos-sans', sans-serif;
	
}

.jp-label {
  font-size: 0.25em;
	padding-left:0.5em;
  display: block;
 font-family: "Zen Kaku Gothic New","游ゴシック Medium","游ゴシック体","Yu Gothic Medium","YuGothic", sans-serif;
}



/*
--------------------------------
オプション
--------------------------------
*/



/*オプション　ボーダー表示*/
/*
.slide-navi ul li{
 border-bottom:1px solid ;
}
.slide-navi ul li:first-child{
 border-top:1px solid ;
}
 */


/*オプション　メニュー文字　強調*/
/*.slide-navi ul li:hover{
	opacity:0.6;
}*/







/*
--------------------------------
オプション
メニュー文字の強調
下線アニメーション
effects from hover effects.css
this is underline for menu 
if you want to use it,
put thoese class in admin menu.
you can put classes to list of menu
--------------------------------
*/


/* Underline From Center */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #2098D1;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}

/* Underline From Left */
.hvr-underline-from-left a{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-left a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0.85rem;
  background: #fc4f42;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left a:hover:before, .hvr-underline-from-left a:focus:before, .hvr-underline-from-left a:active:before {
  right: 0;
}