@charset "shift_jis";

img{width:100%;}

#logo img {
  max-width:100px;
}

li{
  list-style: none;
}

nav{
 width: 100%;
 height: 55px;
 position: relative;
 background: #0b4784e0;
}

.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 39px;
 padding: 0 1em;
 flex-wrap: wrap;
}

/*ナビゲーション*/

.menu ul li a {
display:block;
  font-weight:bold;
  padding: 0.7em;
  border-bottom: 1px dotted #666;
  color:#fff;
  text-decoration:none;
}

.menu ul li a:hover
{background-color:#0b4784e0;
color:orange;}

.menu{
  text-align:left;
  background-color:#0b4784e0;
  transition: 0.5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/
  /*  transform: translateX(-100%);/*右から出す場合は、マイナス100%*/
}

/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/

}

/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 3;
    right:15px;
}

.Toggle span {
    display: block;
    position: absolute;
    width: 25px;
    border-bottom: solid 2px #bbb;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/

}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:20px;
}
 .Toggle span:nth-child(2) {
    top: 28px;
}
 .Toggle span:nth-child(3) {
    top: 36px;
}
.Toggle.active span:nth-child(1) {
    top: 28px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 28px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*-------------ここからPCモニターの記述-----------*/
@media screen and (min-width:768px) and (max-width:1280px) {

  /*ロゴの大きさを調整*/
  #logo img {
    max-width: 180px;
  }

  nav {
    display: flex;
    height: 90px;
    background:#0b4784e0;
  }

  .Toggle {
    display: none;
  }

  .menu {
    width: 100%;
    font-size: 0.9em;
    background-color: transparent;
    margin: 0 10px;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .menu ul {
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    align-content: flex-end;
  }

  .menu ul li a {
    padding: 0 1em;
    border-bottom: none;
  }

  .menu ul li a:hover {
    background-color: transparent;
  }
}



@media screen and (min-width:1280px) {

/*ロゴの大きさを調整*/
#logo img{
  max-width:250px;
}

nav{
 display: flex;
 height: 110px;
 background: #0b4784e0;
}

.Toggle{
 display: none;
}
.menu{
width: 100%;
font-size:1.2em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu ul{
 height: 75px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
 align-content: flex-end;
}
.menu ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.menu ul li a:hover{
background-color:transparent;
}
}