@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 .barnavi{
	position:absolute;
	top:20px;
	left:20px;
}


/*font*/
.barnavi_pc,.barnavi {
	font-family:Roboto Slab;
}


/* 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 --*/
/*obi if you watnt to use side bar as btn*/
.bar{
width:50px;
height:100%;
display: table;
position:fixed;
top:0;
left:0;
background-color:rgba(255,255,255,0.8);
z-index:4;
	
}



/*barnavi is vartical navigation list for mobile screen size till 600px*/

.barnavi{ 
display:none;
width:400px;/*300px*/
height:auto;
position:absolute;/*fixed;*/
top:0;
left:0px;
/*-webkit-transition: all 0.5s;*/
/*padding-left:55px;*/
padding-top:55px;
z-index:3;
font-size:40px;/*18px;*/
color:black;
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}

.barnavi ul{
	margin:0;
	padding:0;
	padding-top:50px;
}

.barnavi ul li{
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 display:block;
 cursor:pointer;
 padding:10px;
 padding-left:20px;
 /*border-bottom:1px solid white;*/
	
}

/*for list border*/
/* 
.barnavi ul li:first-child{
 border-top:1px solid white;
}
*/
.barnavi ul li:hover{
	/*opacity:0.5;*/
}
.barnavi ul li a{
    text-decoration: none;
	color:black;
}


/*kill PC navi when small screen */
.barnavi_pc{
	display:none;
}


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

.slide-bg{
width:0px;
height:100%;
display: table;
background:rgba(235,235,235,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; 
}



/*page top*/

#pagetop{
  position:fixed;
  bottom:0;
  right:0px;
  width:100px;
  height:100px;
 background:lightgray;
  cursor: pointer;
}

#pagetop div{
  position:absolute;
  bottom:0;
  right:0;
  width:50px;
  height:50px;
  font-size:10px;
  line-height:50px;
  text-align: center;
  z-index: 99;
 /*background:yellow;*/
}

#pagetop #pagetop-bg-svg {
  position:absolute;
  bottom:0;
  right:0;
  width:100%;
  height:100%;
  fill: #42AFE3; 
  -webkit-transition: fill 0.5s;
}


/*
--------------------------------
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;
  background: #D7F751;
  height: 4px;
  -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;
}