@charset "utf-8";
#navToggle {
  display:none; /*通常時は非表示にしておきます*/
  position:absolute; /*bodyに対しての絶対位置指定です*/
  right:13px;
  top:13px;
  width:30px;
  height:25px;
  cursor:pointer}
#navToggle div {position:relative} /*spanの絶対位置指定の親にします*/
#navToggle span {
  display:block;
  position:absolute; /*#navToggle div に対して*/
  width:100%;
  border-bottom:solid 2px rgba(0, 0, 0, 0.54);
  -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*/
header {
  width:100%;
  z-index:2;
  background:rgba(255,255,255,.7)}
/*header menu*/
header {
  display:table;}
nav {
  text-align:right;
  vertical-align:bottom}
header h1 a img {
  height:40px;
  margin:10px}
header ul {
  font-size:13px;
  line-height:1;
  margin:0 10px 10px 0}
header ul li {
  margin-left:3px;
  display:inline-block;
  margin-left: 3px;
  display: inline-block;
  line-height: 28px;}
header ul li a {color:inherit}


@media screen and (max-width: 640px) { 
  /*header menu*/
  /*nav要素は絶対位置指定にして、ビューの外側に置いて見えなくします。
  　　nav の中の ul li は横並びを解除して縦組みにレイアウトし直します。*/
  header nav {
      position: absolute; /*bodyに対しての絶対位置*/
      right:0;
      top: -350px; /*通常時はビュー外*/
      margin: 0 10%;
      background:-webkit-gradient(linear, left top, left bottom, from(#C9D6FF), to(#FBC7D4));
      background:-moz-linear-gradient(top, #C9D6FF, #FBC7D4);
      background:linear-gradient(top, #C9D6FF, #FBC7D4);
      padding:10px;
      -webkit-transition:.5s ease-in-out; /*transitionで動きを*/
      -moz-transition:.5s ease-in-out;
      transition:.5s ease-in-out;
      text-align:center}
  header ul {margin:0}
  header ul li {
      display:block;
      margin:0;
      line-height:3}
  header ul li a {display:block}
  header ul li::after {content:''}
  header ul li:last-child {border-bottom:none}
  /* Toggle(Button) */
  /*display:noneだったボタンを display:blockにして表示します*/
  #navToggle {display:block}
   
  /* Click Toggle(Button) header nav*/
  /*ここから jQueryで header要素に付けた「.openNav」を利用します*/
  /*.openNavが付いた要素内のボタン（#navToggle）内のspanへの指定*/
  /*最初の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(401px);
      -webkit-transform: translateY(401px);
      transform: translateY(401px);
    }
  }