#contents {
    display: -webkit-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -moz-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* max-width: 1680px; */
    /* margin: 0 auto 104px; */
    padding: 24px 40px 0;
  }

.back_shop_link {
    text-align: right;
    margin: 10px 0px;
}

.ec-role.cus_layout{
  padding-left: 0;
  padding-right: 0;
}

.cus_layout{
  max-width: 804px;
  margin: 0 auto;
  width: auto;

  background-color: #FFF;
}
.cus__header {
    width: auto;
    text-align: center;
    padding: 20px 0;
}

.cus-title_area {
  border-bottom: solid 1px;
  border-color: #d3a880;
}

.cus-header a:link, .cus-header a:visited {
  text-decoration: none;
}

.cus__logo {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;

  height: 100%;
    max-height: 100px;
    object-fit: contain;
    width: 100%;
}
 .cus__logo:hover{
   opacity: 0.5;
 }
.cus_layout .ec-off2Grid{
    margin: 0 auto;
    width: auto;
    max-width: 700px;
}

.cus_layout .ec-off2Grid .ec-off2Grid__cell{
  color: #222;
  border-bottom: 2px solid #f6f6f6;
  padding: 20px;
}

.ec-role .cus__base02 {
  width: 700px;
  text-align: left;
  background-color: #FFF;
  margin: 0 auto;
}
.cus_layout .cus__page-container {
  margin: 0 auto;
  width: auto;
  max-width: 700px;
}
.cus__page-body {
  background: #fff;
}

.cus-button__group--sub {
  margin: 20px 0 30px;
  text-align: right;
}
.cus-button {
  background: #eff2f4;
  line-height: 1;
  font-size: 13px;
  padding: 0.75em 1.5em;
  border: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: inset 0 -0.1em 0 rgb(0 0 0 / 10%);
}

.cus-button, .cus-button:link, .cus-button:hover, .cus-button:active, .c-button:visited {
  margin: 0 7px;
  color: #35454c;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  -webkit-appearance: none;
}

.cus-loginpage__title {
  color: #222;
  font-size: 20px;
  text-align: center;
  margin: 10px 0 30px;
  line-height: 1.5;
}

.cus-alert {
  color: #607d8b;
  background: #eff2f4;
  padding: 20px;
  margin: 30px 0;
  line-height: 1.6;
  text-align: left;
}

.cus-alert--danger {
  color: #f44336;
  background: #feedeb;
  font-weight: bold;
}
.ec-login {
  margin: 0;
  padding: 0;
  background: #fff;
}

.ec-login__input{
  margin:30px 0;
}

.cus__input-wrap{
  display: flex;
  width: 100%;
  flex-direction: row;
}
.cus__input-wrap:first-child{
  margin-bottom: 20px;
}

.cus-flex3{
  flex:0.3;
  width: 100%;
  max-width: 100%;
}
.cus-flex3.flex-start{
  align-items: flex-start;
}
.cus-flex3.flex-start span{
  margin-top: 8px;
}
.cus-flex7{
  flex:0.9;
  width: 100%;
  max-width: 100%;
}

.cus__input-laybel{
  text-align: right;
  padding: 0 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cus__input-element input{
  width: 100%;
}

.ec-input input{
    width: 100%;
    padding: 7px;
    border: 2px solid #d7dee2;
    font-size: 13px;
    margin-top: 0;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ec-input input:focus{
  outline: none;
  border-color: #607d8b;
}

.cus__input-element .ec-link{
  color:#eb5050;
  font-size: 12px;
}
.cus__input-element .ec-link:hover{
  color: #ff7a21;
}

.cus__layout-button.ec-grid2{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  text-align: center;
}

.cus__layout-button .ec-blockBtn--cancel{
  width: fit-content;
  height: fit-content;
}

.cus-button--lg {
  font-size: 16px;
  padding: 1em 3.6em;
}

.cus-button--primary {
  background: black;
}
.cus-button--primary, .cus-button--primary:link, .cus-button--primary:hover, .cus-button--primary:active, .cus-button--primary:visited {
  color: #fff;
}
.cus-button:active {
  box-shadow: none;
}
.cus-button:hover {
  background: #dfe5e8;
}
.cus-button--primary:hover {
  background: #333;
}
@media only screen and (max-width:768px) {
  #contents{
    padding: 0 5px;
  }
  .cus__input-wrap{
    flex-direction: column;
  }
  .cus__input-laybel{
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 5px;
  }
}

@media only screen and (min-width: 768px){
  .cus_layout .ec-off2Grid{
    display: block;
  }

  .cus_layout .ec-off2Grid .ec-off2Grid__cell {
     width: 100%;
     position: unset; 
     min-height: unset; 
     margin-left: unset;
  }

  .ec-input input{
    margin-bottom: unset;
  }

  .ec-login .ec-login__link{
    margin-left: 0;
  }
}

.fixed-header {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  -webkit-box-shadow: 0 2px 8px rgb(0 0 0 / 0%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0%);
  -webkit-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
  position: fixed;
  top: -44px;
  width: 100%;
  z-index: 9999;
}
@media only screen and (max-width:768px) {
  .fixed-header {
    top: -44px;
  }
}
@media only screen and (max-width:480px) {
  .fixed-header {
    top: -16px;
  }
}