#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 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 {
    display:table;
    font-size:0; /*ul,liが親のfont-sizeを継承して隙間が空くのをリセット*/
    line-height:0}
header h1, nav {
    display:table-cell}
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}
header ul li::after {content:' |'}
header ul li:last-child::after {content:''}
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: -300px; /*通常時はビュー外*/
    background:rgba(255,255,255,.7);
    width:50%;
    padding:0 10px;
    -webkit-transition:.5s ease-in-out; /*transitionで動きを*/
    -moz-transition:.5s ease-in-out;
    transition:.5s ease-in-out;
    text-align:left}
header ul {margin:0}
header ul li {
    display:block;
    margin:0;
    border-bottom:dotted 1px #fff;
    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) */
　/*ここから 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(351px);
    -webkit-transform: translateY(351px);
    transform: translateY(351px)}
}