* {
    box-sizing: border-box;
}

button, input[type="submit"] {
    outline: none;
}

.clear {
    clear: both;
}

hr {
    margin-top: 45px;
    margin-bottom: 45px;
    border: 1px solid rgba(128, 128, 128, 0.673);
}

.t_body {
    color: #2b546a;
    background-color: #fafafa;

}

h1 {
    font-size: 24px;
    margin: 0;
}

.set1{
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  padding: 15px 0 15px 0;
  background-color: #EDEDF3;
}
.set2{
  position: relative;
  margin: 10px auto;
  max-width: 600px;
  padding: 30px;
}
.set2 a{
  text-decoration: none;
}
.set3{
  position: relative;
  margin: 10px auto;
  max-width: 1000px;
  padding: 30px;
}
.set3 a{
  text-decoration: none;
}
.set_m{
  text-align: center;
  background-color: #1A1D70;
  color: white;
  padding: 3px;
  font-size: 14px;
}

.content {
    position: relative;
    margin: 10px auto;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    max-width: 600px;
    padding: 30px;
    border-radius: 5px;
}
.m-log{
  text-align: center;
}
.content-m {
  display: inline-block;
  margin: 10px 30px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    max-width: 600px;
    padding: 30px;
    border-radius: 5px;
    text-align: left;
}

input[type=text] , input[type=email], input[type=password] {
    border: none;
    border-bottom: 1px solid #d1d1d1;
    font-size: 1.2em;
    width: 100%;
    padding: 8px;
}

.rem input[type=text]{
  width: 100%;
  font-size: 14px;
}

.hr {
  margin-top: 12px;
  border-bottom: 1px solid #d1d1d1;
}

.mailarea{
  width: 100%;
  height: 200px;
  border-color: #d1d1d1;
}

.mailbtn {
    width: 100%;
    background-color: #FFD91D;
    border: none;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: #1A1D70;
}

.btn1 {
    width: 100%;
    background-color: rgba(32, 152, 243, 0.9);
    border: none;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    cursor: pointer;
}

.btn1:hover {
    background-color: #1e90ff;
}

.btn1:active {
    position: relative;
    top: 5px;
    box-shadow: none;
}

.next-btn {
  width: 48%;
  text-decoration: none;
  text-align: center;
  background-color: #ff0000;
  border-radius: 5px;
  border: none;
  box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
  padding: 15px;
  cursor: pointer;
  display: block;
  color: #fff;
  cursor: pointer;
  float: right;
  font-size: 14px;
}

.next-btn:hover{
  background-color: #dc143c;
}

.next-btn2 {
  width: 48%;
  text-decoration: none;
  text-align: center;
  background-color: rgba(32, 152, 243, 0.9);
  border-radius: 5px;
  border: none;
  box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
  padding: 15px;
  cursor: pointer;
  display: block;
  color: #fff;
  cursor: pointer;
  float: right;
  font-size: 14px;
}

.next-btn2:hover{
  background-color: rgba(32, 152, 243, 1.0);
  color: #fff;
}

.back-btn {
    width: 48%;
    text-decoration: none;
    text-align: center;
    background-color: #a9a9a9;
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    padding: 15px;
    cursor: pointer;
    display: block;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
}

.back-btn2 {
    width: 100%;
    text-decoration: none;
    text-align: center;
    background-color: rgba(27, 177, 112, 0.8);
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    padding: 15px;
    cursor: pointer;
    display: block;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
}

.back-btn:hover {
    background-color:#808080;
    color: #fff;
    text-decoration: none;
}

.back-btn2:hover {
    background-color: rgba(27, 177, 112, 1.0);
}

.back-btn:active {
    position: relative;
    top: 5px;
    box-shadow: none;
}

.back-btn3 {
    width: 48%;
    text-decoration: none;
    text-align: center;
    background-color: rgba(27, 177, 112, 0.8);
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    padding: 15px;
    cursor: pointer;
    display: block;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
}

.back-btn3:hover {
    background-color: rgba(27, 177, 112, 1.0);
    color: #fff;
}

.control {
    margin-bottom: 3em;
}

label {
    display: block;
    margin-bottom: .5em;
}

.required {
    margin-left: .3em;
    margin-right: .3em;
    color: #f33;
    font-size: .9em;
    padding: 3px;
    background-color: #fee;
    font-weight: bold;
}

.confirmation {
    margin-left: .3em;
    margin-right: .3em;
    color: #0000cd;
    font-size: .9em;
    padding: 3px;
    background-color: #e0ffff;
    font-weight: bold;
}

.re {
  font-size: 0.7em;
  padding: 3px;
}

.error {
    color: #d60e0e;
    font-size: 60%;
}

.check-info {
    color: #2b546a;
    font-weight: bold;
}

.sell {
  margin-left: 10px;
  margin-right: 10px;
}

/* マイページデザイン */
.m_body{

}

.m_logo {

}

.content_m {
    position: relative;
    margin: 10px auto;
    max-width: 800px;
    padding: 30px;
}

.m_logout{
  float: right;
}

.m_box1{
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.m_box2{
  width: 25%;
  text-align: center;
}

.m_box2 a {
  text-decoration: none;
  color: black;
}

.m_img{
  max-width: 190px;
}

.content_c {
    position: relative;
    max-width: 1000px;
    margin: auto;
    padding: 0 15px;
}

.cart_b{
  max-width: 1000px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.c_box1{
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.c_box1 img{
  max-width: 280px;
  width: auto;
}
.c_box2{
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}
.c_box3{
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
}
.c_box3 input[type=number]{
  width: 45px;
}
.c_box3 input[type=submit]{
  text-decoration: none;
  background-color: #4169e1;
  border: none;
  border-radius: 5px;
  padding: 2px 5px;
  cursor: pointer;
  display: block;
  color: #fff;
  margin-left: auto;
  margin-right: auto;

}
.c_box4{
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 2;
}
.c_box5{
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  text-align: right;
}
.c_box5 a{
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  text-decoration: none;
  text-align: center;
  background-color: #ff1493;
  border: none;
  border-radius: 5px;
  padding: 2px;
  cursor: pointer;
  display: block;
  color: #fff;
  font-size: 25px;
  margin-top: 20px;
}
.c_box6 a{
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  text-decoration: none;
  text-align: center;
  background-color: #ff1493;
  border: none;
  border-radius: 5px;
  padding: 2px;
  cursor: pointer;
  display: block;
  color: #fff;
  font-size: 25px;
  margin-top: 20px;
}
.c_box6 input[type=submit]{
  text-decoration: none;
  text-align: right;
  background-color: inherit;
  border: none;
  cursor: pointer;
  margin-top: 5px;
  color: inherit;
}
.content_c table td img {
  width: 300px;
}
.hai{
  display: none;
}
.j{
  display: none;
}
.j2{
  display: none;
}
.j3{
  display: none;
}
.j2 input[type=text]{
  font-size: 1em;
  width: 90px;
  padding-left: 6px;
}
.j3 input[type=text]{
  font-size: 1em;
  width: 100%;
  padding-left: 6px;
  white-space: normal;
}
.j4{
  display: none;
}

.content_o {
    position: relative;
    max-width: 800px;
    margin: auto;
    padding: 0 15px;
}
.cart_o{
  max-width: 800px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}
.o_box1{
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 4;
}
.o_box1 img{
  max-width: 200px;
  width: auto;
}
.o_box2{
  width: 500px;
  text-align: left;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.o_box3{
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 2;
}
.o_box4{
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  text-align: right;
  margin-right: 20px;
}
.o_box5{
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  text-align: right;
  margin-right: 20px;
}

.c-btn {
    width: 45%;
    text-decoration: none;
    text-align: center;
    background-color: #a9a9a9;
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    padding: 15px;
    cursor: pointer;
    display: block;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
    margin-left: 2%;
}
.c-btn:hover {
    background-color:#999999;
    color: #fff;
    text-decoration: none;
}
    .o-btn {
      width: 45%;
      text-decoration: none;
      text-align: center;
      background-color: #6495ed;
      border-radius: 5px;
      border: none;
      box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
      padding: 15px;
      cursor: pointer;
      display: block;
      color: #fff;
      cursor: pointer;
      float: right;
      font-size: 14px;
      margin-right: 2%;
    }
    .o-btn:hover{
      background-color: #1e90ff;
      color: #fff;
      text-decoration: none;
    }
    .k-btn {
        width: 96%;
        text-decoration: none;
        text-align: center;
        background-color: #ff0000;
        border-radius: 5px;
        border: none;
        box-shadow: 0 5px 2px #dc143c;
        padding: 15px;
        cursor: pointer;
        display: block;
        color: #fff;
        cursor: pointer;
        float: left;
        font-size: 20px;
        margin-left: 2%;
        margin-right: 2%;
    }
    .k-btn:hover{
      background-color: #e60000;
      color: #fff;
    }
    .his{
      margin-left: 100px;
    }
    .his_g{
      width: 140px;
    }
    .his_s{
      padding-left: 100px;
    }
    .sei{
      margin-left: 400px;
    }

    .pass-m{
      cursor: pointer;
      text-decoration: underline;
      color: blue;
    }

    .form-wrapper {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin: 0;
}
#eye {
     display: flex;
     align-items: center;
     width: 25px;
     height: 25px;
     cursor: pointer;
}
#eye2 {
     display: flex;
     align-items: center;
     width: 25px;
     height: 25px;
     cursor: pointer;
}

@media (max-width: 800px) {
  .m_box2{
    width: 50%;
  }
  .cart_b img {
    max-width: 200px;
    width: auto;
  }
  .c_box5 a{
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    text-decoration: none;
    text-align: center;
    background-color: #ff1493;
    border: none;
    border-radius: 5px;
    padding: 2px;
    cursor: pointer;
    display: block;
    color: #fff;
    font-size: 20px;
    margin-top: 20px;
  }
  .o_box2{
    width: 400px;
    text-align: left;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .his{
    margin-left: 70px;
  }
  .his_g{
    width: 140px;
  }
  .his_s{
    padding-left: 100px;
  }
  .sei{
    margin-left: 320px;
  }
}

@media (max-width: 600px) {
    h1 {
        font-size: 18px;
    }

    p {
        font-size: .8em;
    }

    .login-btn {
        padding: 4px 3px 4px 8px;;
        top: 28px;
        line-height: 21px;
    }

    .login-btn:active {
        top: 30px;
    }
    .m_logo{max-width: 200px;}
    .cart_b img {
      max-width: 120px;
      width: auto;
    }
    .c_box3{
      grid-column-start: 1;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 3;
      margin-left: 30%;
    }
    .c_box3 input[type=number]{
      width: 30px;
    }
    .c_box4{
      grid-column-start: 3;
      grid-column-end: 4;
      grid-row-start: 2;
      grid-row-end: 3;
    }
    .c_box6 a{
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      text-decoration: none;
      text-align: center;
      background-color: #ff1493;
      border: none;
      border-radius: 5px;
      padding: 2px;
      cursor: pointer;
      display: block;
      color: #fff;
      font-size: 16px;
      margin-top: 20px;
    }
    .c_box5{
      grid-column-start: 2;
      grid-column-end: 4;
      grid-row-start: 4;
      grid-row-end: 4;
      text-align: right;
      padding-bottom: 30px;
    }
    .c_box5 input[type=submit]{
      text-decoration: none;
      text-align: right;
      background-color: #a9a9a9;
      color: white;
      border: none;
      cursor: pointer;
      font-size: 14px;
      margin-top: 5px;
      margin-right: 5%;
    }
    .o_box1 img{
      max-width: 120px;
      width: auto;
    }
    .o_box2{
      width: 300px;
      text-align: left;
      grid-column-start: 2;
      grid-column-end: 2;
      grid-row-start: 1;
      grid-row-end: 2;
    }
    .his{
      margin-left: 50px;
    }
    .his_g{
      width: 140px;
    }
    .his_s{
      padding-left: 30px;
    }
    .sei{
      margin-left: 200px;
    }
    .content-m {
      display: inline-block;
      margin: 2px 5px;
        background-color: #fff;
        border: 1px solid #d1d1d1;
        max-width: 600px;
        padding: 10px 30px;
        border-radius: 5px;
        text-align: left;
    }
}


@media (max-width: 450px) {
  .c_box1{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .c_box3 input[type=number]{
    width: 30px;
  }
  .c_box3{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 3;
    margin-left: 5%;
  }


  .o_box1 img{
    max-width: 100px;
    width: auto;
  }
  .o_box2{
    width: 200px;
    text-align: left;
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  h4 {
      font-size: 18px;
  }
  .his{
    margin-left: 15px;
  }
  .his_g{
    width: 120px;
  }
  .his_s{
    padding-left: 20px;
  }
  .sei{
    margin-left: 20px;
  }
}

@media (max-width: 320px) {
  .m_logo{
    max-width: 90px;
  }
}