body {
  font-family: Meiryo;
  overflow-x: hidden;
  width: 100vw;
  background-color: #fcfcfc;
  word-break: break-all;
}

a {
  text-decoration: none !important;
  cursor:pointer;
}

a:hover {
  opacity:1.0;
}

ul{
  list-style: none;
}

.require{
  color:#dc3545;
  font-weight: normal;
  font-size: 14px;
}

.header-text {
  text-shadow: 1px 2px 2px #808080;  
  opacity:0.9;
  font-weight: bold;
  margin: 0px 0px 0px 0px;
}

.title_text{
  margin-bottom:5px;
  color: #412610;
  font-weight:bold;
  font-size:18px;
}


.container {
  max-width: 100%;
  min-height: 550px;
  padding: 10px;
}

.account-header {
  width: 100%;
  height: 150px;
  padding:5px 20px 5px 20px;
  overflow:auto;
  background-color: #f3f3f3;
  border-bottom: #f0f0f0 solid;
}

.account-footer {
  /* position: relative; */
  bottom: 0;
  left: 0;
  padding: 10px 0 0 0;
  width: 100%;
  height: 200px;
  margin-top : 40px;
  background-color: #f3f3f3;
  border-top: #f0f0f0 solid;
}


.login-panel {
  position: relative;
  z-index: 10;
  border: 1px #50c456 dotted;
  padding:40px;
  border-radius: 4px;
}


.password-panel {
  width: 600px;
  height: 480px;
  position: relative;
  z-index: 10;
  border: 1px #50c456 dotted;
  padding:40px;
  border-radius: 4px;
  margin: auto;
}


.signup-panel {
  width: 750px;
  height: 600px;
  position: relative;
  z-index: 10;
  border: 1px #50c456 dotted;
  margin: auto;
  padding: 30px 40px 30px 40px;
  border-radius: 4px;
}




.btn_brown {
  background-image: -webkit-linear-gradient(top, #b9916f, #69401e);
  padding :4px;
  width: 150px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #522d0a;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}


.btn_brown_medium {
  background-image: -webkit-linear-gradient(top, #b9916f, #69401e);
  padding :4px;
  width: 250px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #522d0a;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}

.btn_brown_long {
  background-image: -webkit-linear-gradient(top, #977151, #794b25);
  padding :4px;
  width: 450px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #5f350e;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}


.btn_green {
  background-image: -webkit-linear-gradient(top, #59ee4c, #2b6b3e);
  padding :4px;
  width: 150px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #0a7239;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


.btn_green_medium {
  background-image: -webkit-linear-gradient(top, #59ee4c, #2b6b3e);
  padding :4px;
  width: 250px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #0a7239;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


.btn_green_long {
  background-image: -webkit-linear-gradient(top, #59ee4c, #2b6b3e);
  padding :4px;
  width: 450px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #0a7239;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


.btn_login {
  background-image: -webkit-linear-gradient(top, #ee9a4c, #944d3c);
  width: 350px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
  border-color: #bb5b0d;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


.btn_cancel {
  background-image: -webkit-linear-gradient(top, #bdc0bd, #616161);  
  width: 150px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #525151;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}


fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  min-inline-size: min-content;
}


/* フォーム入力 */
input[type="text"],
input[type="password"],
input[type="email"],
textarea
{
  outline: none;
  border: 1px solid #aaa;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus
{
  box-shadow: 0 0 3px #3d8bd3;
  border: 1px solid #14a3db;
}


input[name="customer"],
#id_username, #id_password,
#id_guest_password1, #id_guest_password2,
#id_email, #id_password1, #id_password2,
#id_customer_email, #id_customer_password1, #id_customer_password2,
#id_customer_zip, #id_customer_phone, #id_customer_phone_2, #id_customer_line_id,
#id_customer_building_room_name, #id_customer_block,
#id_guest_name, #id_guest_name_kana, #id_guest_name_after, #id_guest_name_kana_after, 
#id_guest_zip, #id_guest_block, #id_guest_phone, #id_guest_fixed_phone, 
#id_guest_email,  #id_introducer_name

{
  width:400px;
  height:32px;
}


#id_customer_pref, #id_customer_address,
#id_guest_pref, #id_guest_address
{
  width:400px;
  height:32px;
  background-color: #f0f0f0;
}


.error{
  font-size:14px;
  color:#dc3545;
}


/* LINE */
.line_account {
  display:block;
  height:40px;
  width:280px;
  background-color: rgb(24, 207, 55);
  border-color: #1a8f4b;
  border-radius: 4px;
}

.line_account a{
  color: white;
  margin: 0 0 0 10px;
}

.google_account {
  display:block;
  height:40px;
  width:280px;
  background-color: rgb(189, 183, 183);
  /* border-color: #1a8f4b; */
  border-radius: 4px;
}

.google_account a{
  color: white;
  margin: 0 0 0 5px;
}


.btn {
  background-color: #3b6cb6;
  background-image: -webkit-linear-gradient(top, #6f90fd, #3653b1);
  border-radius: 3px;
  float: left;
  width: 100px;
  height: 35px;
  border-width: 1px;
  border-style: solid;
  border-color: #0f37a5;
  font: 14px Arial;
  color: #f0f0f0;
  cursor: pointer;
}


.btn_center {
  background-color: #50c456;
  background-image: -webkit-linear-gradient(top, #59ee4c, #3cad5e);
  width: 200px;
  height: 35px;
  border-width: 1px;
  border-style: solid;
  border-color: #0dbb5b;
  font: 14px Arial;
  color: #f0f0f0;
  border-radius:12px;
  cursor: pointer;
}

.btn:hover, .btn_center:hover {
  font: 14px Arial;
  color: #fff;
}


.errorlist {
  color: red
}