@charset "UTF-8";

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, hr {
    margin: 0;
    padding: 0;
    font-weight: 300;
}
body {
	font-size: 14px;
	line-height: 60%;
	font-family:'Prompt', Avenir, 'Noto Sans JP', 'ヒラギノ角ゴPro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', メイリオ, Meiryo, sans-serif;
	color:#000000;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}
li {
    list-style-type: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#loginWrapper {
  margin:0 auto;
  width: 700px;
  text-align: left;
}

#login {
  margin-left: auto;
  margin-right: auto;
  margin-top: 80px;
  width: 700px;
  height: 350px;
  background-image: url(../img/login/bg_login.png);
}

#login h1 {
  margin: 0 0 0 30px;
  padding-top: 70px;
  width: 338px;
  height: 30px;
}

#login h2 {
  margin: 15px 0 0 60px;
  width: 273px;
  height: 15px;
}

#login form {
  margin: 10px 0 0 0;
  text-align: right;
}
#login form p {
  margin: 0;
}

#login form input.txt {
  width: 220px;
  border: solid 2px #585858;
  text-indent: .2em;
}

#login #submit {
  margin: 30px 30px 0 0;
  text-align: right;
}

#footer {
  width: 700px;
}

#logo img {
  max-width:50%;
}

nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #F6F6F6;
}

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


/*ナビゲーション部分*/

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


.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:orange;}



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

}

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

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

}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:5px;
}
 .Toggle span:nth-child(2) {
    top: 18px;
}
 .Toggle span:nth-child(3) {
    top: 32px;
}
.Toggle.active span:nth-child(1) {
    top: 18px;
/* 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: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


#login h2 {
  font-size: 20px;
  margin: 15px 0 0 60px;
  width: 273px;
  height: 10%;
}

#login form {
  margin: 10px 0 0 0;
  text-align: right;
}
#login form p {
  margin: 0;
}

#login table {
  margin: 0 30px 0 auto;
  border-collapse: collapse;
}
#login table th, #login table td {
  height: 3em;
  vertical-align: bottom;
  text-align: left;
}
#login table th {
  width: 200px;
}

#login form input.txt {
  width: 220px;
  border: solid 2px #585858;
  text-indent: .2em;
}

#login #submit {
  margin: 30px 30px 0 0;
  text-align: right;
}
.mobileRegister {
	width: 440px;
	display: none;
}


@media screen and (max-width: 1024px) {
  table {
  	width: 100%;
  	margin: 0;
  }
  th, td{
  	height: 50px;
    display: block;
    width: 100%;
    white-space: nowrap;
    border: #FFF;
    background-color: #FFF;
  }
  th br{
    display: none;
  }
  #main .pageTitle {
    width: 100%;
  }
  #main .pageTitle h1 {
    margin-top: 30px;
  }
  #main .pageTitle .mobileRegister{
    width: 100%;
  	display: block;
  }
  #main .buttonarea {
    padding-top: 20px;
    text-align: center;
  }
  p span {
    display: none;
  }
  .failLogin {
    width: 90%;
    margin: auto;
    margin-top: 20px;
  }
  .register {
    display: none;
  }
  .storeUser {
    display: none;
  }

}