html {
  font-size: 62.5%;
  font-weight: 300;
}

body {
  position: relative;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  text-align: center;
  background-image: url(../img/bg.png);
  background-color: #340E0E;
}

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);



/* ===================Noto sans JP のフォントの太さ=================== */
.thin {
  font-weight: 100;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.midium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

.black {
  font-weight: 900;
}



/* ===================Floatを解除する=================== */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix:before {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    display: block;
}

.clear{
    clear: both;
}



/* ===================Wrap=================== */
.wrap {
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 2.4rem;
  margin: 0 auto;
  text-align: center;
}



/* ===================Login button=================== */
.go-to-login {
  width: 70%;
  margin: 0 auto;
}

.go-to-login a {
  width: 18.6rem;
  text-align: right;
}

.btn_login {
  width: 18.6rem;
  height: 6.6rem;
  margin: 4rem 0 0 auto;
  text-align: right;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.011 55.085"><path id="btn_bg_s" fill="rgba(105, 60, 60, 1.0)" d="M176.011,10.147a4.048,4.048,0,0,0-3.849-4.2c-2.117,0-3.849-1.338-3.849-2.974S166.424,0,164.115,0H11.9C9.587,0,7.7,1.338,7.7,2.974S5.966,5.948,3.849,5.948A4.048,4.048,0,0,0,0,10.147V44.938a4.047,4.047,0,0,0,3.849,4.2c2.117,0,3.849,1.338,3.849,2.974s1.889,2.974,4.2,2.974H164.115c2.309,0,4.2-1.338,4.2-2.974s1.732-2.974,3.849-2.974a4.047,4.047,0,0,0,3.849-4.2Z"/></svg>');
  background-repeat: no-repeat;
  background-position: left 0.575rem top 0.5rem;
  background-size: 17.6rem 5.5rem;
}

.btn_login:hover {
  width: 18.6rem;
  height: 6.6rem;
  margin: 4rem 0 0 auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.011 55.085"><path id="btn_bg_s" fill="rgba(137, 99, 99, 1.0)" d="M176.011,10.147a4.048,4.048,0,0,0-3.849-4.2c-2.117,0-3.849-1.338-3.849-2.974S166.424,0,164.115,0H11.9C9.587,0,7.7,1.338,7.7,2.974S5.966,5.948,3.849,5.948A4.048,4.048,0,0,0,0,10.147V44.938a4.047,4.047,0,0,0,3.849,4.2c2.117,0,3.849,1.338,3.849,2.974s1.889,2.974,4.2,2.974H164.115c2.309,0,4.2-1.338,4.2-2.974s1.732-2.974,3.849-2.974a4.047,4.047,0,0,0,3.849-4.2Z"/></svg>');
  background-repeat: no-repeat;
  background-position: left 0.575rem top 0.5rem;
  background-size: 17.6rem 5.5rem;
  cursor: pointer;
}

.btn_login button[type=button] {
  border: 0;
  width: 18.6rem;
  height: 6.6rem;
  font-size: 2.4rem;
  color: #F8EEA0;
  background-image: url(../img/btn_frame_s.svg);
  background-color: rgba(0, 0, 0, 0);
}

.btn_login button[type=button]:hover {
  border: 0;
  width: 18.6rem;
  height: 6.6rem;
  font-size: 2.4rem;
  color: #FFFCDD;
  background-image: url(../img/btn_frame_s.svg);
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}



/* ===================Title=================== */
.title_t {
  display: block;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.title {
  display: block;
  width: 70%;
  margin: 4rem auto 0 auto;
  text-align: center;
}

.title_t img {
  width: 100%;
}

.title img {
  width: 100%;
}



/* ===================Text=================== */
.read_t {
  display: flex;
  width: 70%;
  margin: 12rem auto 0 auto;
}

.read {
  width: 70%;
  margin: 12rem auto 0 auto;
}

.image {
  width: 47.5%;
  margin: 0 5% 0 0;
}

.image img {
  width: 100%;
}

.text_l {
  width: 47.5%;
  font-size: 2rem;
  color: #FEF8B9;
  text-align: left;
}

.text_c {
  width: 100%%;
  font-size: 2rem;
  color: #FEF8B9;
  text-align: center;
}

h2 {
  font-size: 2.6rem;
  margin: 0 0 2.6rem 0;
}

h3 {
  font-size: 2.6rem;
  margin: 0 0 4rem 0;
}



/* ===================Login form=================== */
form {
  display: block;
  width: 70%;
  margin: 0 auto;
}

.login {
  display: block;
  width: 100%;
  padding: 4rem;
  font-size: 2rem;
  text-align: center;
  color: #FEF8B9;
  background-color: #2C0505;
}

.login table {
  width: auto;
  margin: 0 auto;
}

.login table th {
  width: auto;
  padding-top: 2rem;
  vertical-align: top;
  text-align: right;
  white-space: nowrap;
}

.login table td {
  width: auto;
  padding-top: 2rem;
  vertical-align: top;
  text-align: left;
}

.login .form-group td {
  width: 70%;
  padding-top: 2rem;
  vertical-align: top;
  text-align: left;
}

.form-group input[type=text]{
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem;
  font-size: 1.6rem;
  border: 1px solid #2C0505;
  background-color: #693C3C;
  outline: none;
}

.form-group input[type=text]:focus{
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem;
  font-size: 1.6rem;
  border: 1px solid #BA9D1F;
  background-color: #8D5F5F;
  outline: none;
}

.required {
  font-size: 2rem;
  color: #ef0019;
}


div.login {
    display: block;
    text-align: center;
    width: auto;
    margin: 12rem auto 4rem auto;
}

div.required {
    display: inline-block;
}

div.caption {
    display: inline-block;
}

div.form-group {
    display: block;
    margin: 1rem 0;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: rgba(255, 255, 255, 0.2);
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: rgba(255, 255, 255, 0.2);
}
::placeholder{ /* Others */
  color: rgba(255, 255, 255, 0.2);
  font-weight: 100;
}



.left {
  color: #C1A732;
}


/* ===================Error message=================== */
p.error, span.error {
    font-size: 1.6rem;
    color: #ef0019;
    margin: 0.5rem 0 0 0;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
    font-size: 1.6rem;
}



/* ===================Submit button=================== */
.btn_submit {
  width: 30.6rem;
  height: 6.6rem;
  margin: 4rem auto 0 auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296.011 55.085"><path id="btn_bg" fill="rgba(105, 60, 60, 1.0)" d="M296.011,10.147a4.048,4.048,0,0,0-3.849-4.2c-2.117,0-3.849-1.338-3.849-2.974S286.424,0,284.115,0H11.9C9.587,0,7.7,1.338,7.7,2.974S5.966,5.948,3.849,5.948A4.048,4.048,0,0,0,0,10.147V44.938a4.047,4.047,0,0,0,3.849,4.2c2.117,0,3.849,1.338,3.849,2.974s1.889,2.974,4.2,2.974H284.115c2.309,0,4.2-1.338,4.2-2.974s1.732-2.974,3.849-2.974a4.047,4.047,0,0,0,3.849-4.2Z"/></svg>');
  background-repeat: no-repeat;
  background-position: left 0.575rem top 0.5rem;
  background-size: 29.6rem 5.5rem;
}

.btn_submit:hover {
  width: 30.6rem;
  height: 6.6rem;
  margin: 4rem auto 0 auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296.011 55.085"><path id="btn_bg" fill="rgba(137, 99, 99, 1.0)" d="M296.011,10.147a4.048,4.048,0,0,0-3.849-4.2c-2.117,0-3.849-1.338-3.849-2.974S286.424,0,284.115,0H11.9C9.587,0,7.7,1.338,7.7,2.974S5.966,5.948,3.849,5.948A4.048,4.048,0,0,0,0,10.147V44.938a4.047,4.047,0,0,0,3.849,4.2c2.117,0,3.849,1.338,3.849,2.974s1.889,2.974,4.2,2.974H284.115c2.309,0,4.2-1.338,4.2-2.974s1.732-2.974,3.849-2.974a4.047,4.047,0,0,0,3.849-4.2Z"/></svg>');
  background-repeat: no-repeat;
  background-position: left 0.575rem top 0.5rem;
  background-size: 29.6rem 5.5rem;
}

.btn_submit button[type=submit] {
  border: 0;
  width: 30.6rem;
  height: 6.6rem;
  font-size: 3rem;
  color: #F8EEA0;
  background-image: url(../img/btn_frame.svg);
  background-color: rgba(0, 0, 0, 0);
}

.btn_submit button[type=submit]:hover {
  border: 0;
  width: 30.6rem;
  height: 6.6rem;
  font-size: 3rem;
  color: #FFFCDD;
  background-image: url(../img/btn_frame.svg);
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}



/* ===================Bottom Login=================== */
.bottom-login .btn_login {
  width: 18.6rem;
  height: 6.6rem;
  margin: 0 auto 12rem auto;
  text-align: right;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.011 55.085"><path id="btn_bg_s" fill="rgba(105, 60, 60, 1.0)" d="M176.011,10.147a4.048,4.048,0,0,0-3.849-4.2c-2.117,0-3.849-1.338-3.849-2.974S166.424,0,164.115,0H11.9C9.587,0,7.7,1.338,7.7,2.974S5.966,5.948,3.849,5.948A4.048,4.048,0,0,0,0,10.147V44.938a4.047,4.047,0,0,0,3.849,4.2c2.117,0,3.849,1.338,3.849,2.974s1.889,2.974,4.2,2.974H164.115c2.309,0,4.2-1.338,4.2-2.974s1.732-2.974,3.849-2.974a4.047,4.047,0,0,0,3.849-4.2Z"/></svg>');
  background-repeat: no-repeat;
  background-position: left 0.575rem top 0.5rem;
  background-size: 17.6rem 5.5rem;
}



/* ===================Copyright=================== */
.copyright {
  width: 100%;
  height: 3rem;
  padding: 1.2rem;
  text-align: center;
  font-size: 1.2rem;
  color: #000000;
  background-color: #C1A732;
  position: absolute;
  bottom: 0;
}



/* ===================Confirm page=================== */

/* ===================Submit button=================== */
.confirm {
  display: block;
  width: 70%;
  padding: 4rem;
  margin: 4rem auto 12rem auto;
  font-size: 2rem;
  color: #FEF8B9;
  background-color: #2C0505;
}

.confirm .login {
  margin: 0 auto;
}

.confirm table {
  width: auto;
  height: auto;
  margin: 0 auto;
}

.confirm table th {
  width: auto;
  padding: 2rem 1rem 0 0;
  vertical-align: top;
  text-align: right;
  white-space: nowrap;
}

.confirm table td {
  width: 50%;
  padding-top: 2rem;
  vertical-align: top;
  text-align: left;
}

table .btn_area {
  width: auto;
  margin: 0 auto;
}

.btn_area td {
  width: 50%;
  padding: 0 2rem;
  vertical-align: top;
  text-align: center;
}

.btn_area form {
  display: block;
  width: auto;
  margin: 0;
}



/* ===================Login page=================== */

/* ===================Text=================== */
.loginform h3 {
  font-size: 3rem;
  margin: 12rem auto 0 auto;
  color: #FEF8B9;
}

.loginform form {
  margin: 4rem auto 12rem auto;
}

.form-group input[type=password]{
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem;
  font-size: 1.6rem;
  border: 1px solid #2C0505;
  background-color: #693C3C;
  outline: none;
}

.form-group input[type=password]:focus{
  box-sizing: border-box;
  width: 100%;
  padding: 0.6rem;
  font-size: 1.6rem;
  border: 1px solid #BA9D1F;
  background-color: #8D5F5F;
  outline: none;
}










/*======================== レスポンシブ対応1000px ========================*/
@media screen and (max-width: 1000px){

html {
  font-size: 100%;
  font-weight: 300;
}

/* ===================Login button=================== */
.go-to-login {
  width: 90%;
  margin: 0 auto;
}

.btn_login button[type=button] {
  border: 0;
  width: 18.6rem;
  height: 6.6rem;
  font-size: 2.4rem;
  color: #F8EEA0;
  background-image: url(../img/btn_frame_s.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
}

.btn_login button[type=button]:hover {
  border: 0;
  width: 18.6rem;
  height: 6.6rem;
  font-size: 2.4rem;
  color: #FFFCDD;
  background-image: url(../img/btn_frame_s.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

/* ===================Title=================== */
.title_t {
  display: block;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.title {
  display: block;
  width: 90%;
  margin: 4rem auto 0 auto;
  text-align: center;
}

.text_l {
  width: 47.5%;
  font-size: 2rem;
  color: #FEF8B9;
  text-align: left;
}

/* ===================Text=================== */
.read_t {
  display: block;
  width: 90%;
  margin: 12rem auto 0 auto;
}

.read {
  width: 90%;
  margin: 4rem auto 0 auto;
}

.image {
  width: 100%;
  margin: 0 0 0 0;
}

.text_l {
  width: 100%;
  margin: 4rem 0;
  font-size: 2rem;
  color: #FEF8B9;
  text-align: center;
}

/* ===================Login form=================== */
form {
  display: block;
  width: 90%;
  margin: 12rem auto 4rem auto;
}

.btn_area form {
  display: block;
  width: 50%;
  margin: 4rem auto 0 auto;
}

.login .form-group td {
  width: 100%;
  padding-top: 2rem;
  vertical-align: top;
  text-align: left;
}

.login table {
  width: 100%;
  margin: 0;
}

.login table th {
  width: auto;
  padding-top: 2rem;
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
}

.login .btn_area {
  width: auto;
}

.login .btn_area td {
  width: auto;
  padding-top: 0;
  vertical-align: top;
  text-align: center;
}

.form-group {
  width: 100%;
  margin: 0 auto;
}

.form-group th, .form-group td {
  display: block;
  text-align: left;
}

/* ===================Submit button=================== */
.btn_submit button[type=submit] {
  border: 0;
  width: 30.6rem;
  height: 6.6rem;
  font-size: 3rem;
  color: #F8EEA0;
  background-image: url(../img/btn_frame.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
}

.btn_submit button[type=submit]:hover {
  border: 0;
  width: 30.6rem;
  height: 6.6rem;
  font-size: 3rem;
  color: #FFFCDD;
  background-image: url(../img/btn_frame.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

/* ===================Confirm page=================== */

/* ===================Confirm=================== */
.confirm {
  display: block;
  width: 90%;
  padding: 4rem;
  margin: 4rem auto 12rem auto;
  font-size: 2rem;
  color: #FEF8B9;
  background-color: #2C0505;
}

.confirm .login {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ===================Login form=================== */
.confirm table {
  width: auto;
  margin: 0 auto;
}

.confirm table th {
  width: auto;
  padding-top: 2rem;
  vertical-align: top;
  text-align: left;
  white-space: normal;
}

.confirm table td {
  width: 100%;
  padding-top: 0;
  vertical-align: top;
  text-align: left;
  white-space: normal;
}

.form-group table td {
  width: 100%;
  padding-top: 0;
  vertical-align: top;
  text-align: left;
}

/* ===================Submit button=================== */
.btn_area th, .btn_area td {
  display: block;
  text-align: left;
}

.btn_area form {
  width: 100%;
}



}