@charset "Shift_JIS";

/*--------------------------------------------------------
  ハンバーガーメニューcss
--------------------------------------------------------*/

/* ボタンのcss */
#navToggle {
    display:none;
    position:absolute;
    right:13px;
    top:13px;
    width:30px;
    height:25px;
    cursor:pointer}
#navToggle div {position:relative}
#navToggle span {
    display:block;
    position:absolute;
    width:100%;
    border-bottom:solid 3px #999;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out}
#navToggle span:nth-child(1) {top:0}
#navToggle span:nth-child(2) {top:11px}
#navToggle span:nth-child(3) {top:22px}

/*header*/
#hpb-header{
    width:80%;
    z-index:99;
    position:fixed;
    background:rgba(255,255,255,1);
}
/*header menu*/
#hpb-header {
    display:table;
    font-size:0;
    line-height:0;
    padding:0 10.2%;
    box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.2);
   -webkit-box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.2);
   border-top: 3px solid #027cc5;
}
#hpb-header h1, nav {
    /* display:table-cell; */
	}
#hpb-header nav {
    text-align:center;
    vertical-align:middle}
#hpb-header h1 a img {
    height:60px;
    margin:3px 10px;
   -webkit-transition: height 0.3s ease-out;
    transition: height 0.3s ease-out;
	}
#hpb-header ul {
    font-size:16px;
    line-height:1;
    margin:10px 10px 10px 0;
    padding-left:0;
}
#hpb-header ul li {
    margin-left:3px;
    display:inline-block;
    width: 100px;
    height: 20px;
    line-height: 20px;
    position:relative;
    margin:0 20px;
    padding: 10px 0 6px;
}
/* #hpb-header ul li::after {content:' |';color:#fff;} */
#hpb-header ul li:last-child::after {content:''}
#hpb-header ul li a {color:inherit}

#hpb-header ul li a:after{
  content:' ';
  position:absolute;
  left:50%;
  top:36px;
  width:0;
  height:2px;
  background:#027cc5;
  -webkit-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
}
#hpb-header ul li a:hover:after {
    width: 100%;
    left: 0;
}

#hpb-header ul li.current {
    border-bottom: solid 2px #027cc5;
}

#hpb-header #logo{
  margin-top:10px;
}

#hpb-header.smaller h1 a img{
    width:auto;
    height:39px;
    margin:0;
}


/* レスポンシブ */
@media screen and (max-width: 960px) {
 
/*header menu*/

#hpb-header nav {
    position: absolute;
    right:0;
    top: -291px;
    background:rgba(0,0,0,.7);
    width:100%;
    padding:0 10px;
    -webkit-transition:.5s ease-in-out;
    -moz-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
    text-align:left;}
#hpb-header ul {margin:0;}
#hpb-header ul li {
    display:block;
    margin:0;
    border-bottom:dotted 1px #fff;
    line-height:1;
    width:100%;
    padding-left:30px;
}
#hpb-header ul li a {display:block; color:#fff;}
#hpb-header ul li::after {content:'';}
#hpb-header ul li:last-child {border-bottom:none;}
 
/* Toggle(Button) */

#navToggle {display:block;}
 
/* Click Toggle(Button) */
/*最初のspanをマイナス45度に*/
.openNav #navToggle span:nth-child(1) {
    top: 11px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
/*2番目と3番目のspanを45度に*/
.openNav #navToggle span:nth-child(2),
.openNav #navToggle span:nth-child(3) {
    top: 11px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
}
 
/*header menu*/
/*.openNavが付いた要素の中のnavを 縦方向に351px移動（=表示される）*/
.openNav nav {
    -moz-transform: translateY(351px);
    -webkit-transform: translateY(351px);
    transform: translateY(351px);
}

#hpb-header h1 a img{
    display:none;
}
#hpb-header h1 a{
    display: inline-flex;
    width:221px;
    height:45px;
    background-image:url(../image/logo2.png);
    background-repeat:no-repeat;
    background-size:contain;
}

/* #hpb-header.smaller h1 a{ */
    /* display: inline-flex; */
    /* width:auto; */
    /* height:25px; */
    /* background-image:url(../image/logo3.png); */
    /* background-repeat:no-repeat; */
/* } */

}