@charset "UTF-8";
html {
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
}

body {
  font-size: 1.4rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
  line-height: 1.7333333333;
  color: #191B1D;
}

#wrapper {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

@media (min-width: 769px) {
  .sp-content {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .inner--sp {
    padding-left: 15px;
    padding-right: 15px;
  }
}
header.header {
  height: 55px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  border-bottom: solid 1px #D9DFE6;
  margin-bottom: 50px;
}
@media (min-width: 769px) {
  header.header {
    height: 80px;
    margin-bottom: 80px;
    padding: 0 60px;
  }
}
@media (max-width: 768px) {
  header.header .header__logo img {
    width: 216px;
  }
}
header.header .shop-name {
  font-weight: bold;
  font-size: 2.3rem;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
}
@media (min-width: 769px) {
  header.header .shop-name {
    font-size: 2.8rem;
  }
}

.footer {
  background: #F8F8F8;
  text-align: center;
  font-size: 1rem;
  color: #7d7d7d;
  font-family: Century Gothic, sans-serif !important;
  padding: 50px 0;
  margin-top: auto;
}
.footer__copyright {
  line-height: 2;
}
@media (min-width: 769px) {
  .footer {
    font-size: 1.2rem;
  }
}

input[type=text], input[type=email], input[type=password] {
  width: 100%;
  border: solid 1px #D9DFE6;
  height: 50px;
  line-height: 50px;
  padding: 0 16px;
  background: white;
  box-shadow: none;
  font-size: 1.5rem;
  border-radius: 4px;
  outline: none;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus {
  box-shadow: none;
  border-color: #D9DFE6;
}
input[type=text]::placeholder, input[type=email]::placeholder, input[type=password]::placeholder {
  color: #B4B4B4;
}

select {
  outline: none;
  height: 50px;
  background: url(../img/sankyoseiko/ico-down.svg) no-repeat right 15px center;
  border-radius: 4px;
  font-size: 1.5rem;
  padding: 0 16px;
  padding-right: 46px;
  border: solid 1px #D9DFE6;
}
select:focus {
  box-shadow: none;
  border-color: #D9DFE6;
}

input[type=radio] + label:before, input[type=checkbox] + label:before {
  background: white;
  border-color: #CDCAC6;
  top: 4px;
}

input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before {
  background: #187AFF;
  border-color: #187AFF;
}

input[type=radio]:checked + label:after,
input[type=checkbox]:checked + label:after {
  border-color: white;
  margin-top: -1px;
  top: 6px;
  margin-top: 0;
}

input[type=checkbox] + label, input[type=radio] + label {
  font-size: 1.5rem;
  margin: 0;
  padding-left: 26px;
}

.mainContents {
  max-width: 1200px;
  margin: auto;
  margin-bottom: 120px;
}
@media (max-width: 768px) {
  .mainContents {
    max-width: 375px;
  }
}
@media (min-width: 769px) {
  .mainContents {
    width: calc(100% - 80px);
  }
}
.mainContents * {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
}
.mainContents .page-ttl {
  font-weight: bold;
  font-size: 2.4rem;
  margin-bottom: 50px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
  text-align: center;
}
@media (min-width: 769px) {
  .mainContents .page-ttl {
    font-size: 2.8rem;
    margin-bottom: 80px;
  }
}
.mainContents .button {
  padding: 0;
  width: 100%;
  border-radius: 4px;
  height: 50px;
  color: white;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border: none;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  margin: 0;
  transition: 0.3s ease-out;
}
.mainContents .button.buttonGray {
  background: #C1C1C1;
}
.mainContents .button.buttonWhite {
  color: inherit;
  border: solid 1px #707070;
}
.mainContents .button:not(.buttonGray) {
  background: #3BB4A1;
}
.mainContents .button:not(.buttonGray):hover, .mainContents .button:not(.buttonGray):link, .mainContents .button:not(.buttonGray):focus {
  background: #3BB4A1;
}
@media (min-width: 769px) {
  .mainContents .panel-block-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
.mainContents .panel-block-list .panel-block {
  background: #F4F4F4;
  padding: 40px 15px;
  border: none;
  border-top: solid 6px #C1C1C1;
}
@media (max-width: 768px) {
  .mainContents .panel-block-list .panel-block:not(:last-child) {
    margin-bottom: 50px;
  }
}
@media (min-width: 769px) {
  .mainContents .panel-block-list .panel-block {
    padding: 60px 40px;
  }
}
.mainContents .panel-block-list .panel-block__ttl {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.5em;
  letter-spacing: 0.08em;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
  color: inherit;
}
.mainContents .panel-block-list .panel-block__ttl small {
  font-size: 1.6rem;
  margin-left: 20px;
  color: inherit;
}
@media (max-width: 768px) {
  .mainContents .panel-block-list .panel-block__ttl br + small {
    margin-left: 0;
  }
}
@media (min-width: 769px) {
  .mainContents .panel-block-list .panel-block__ttl {
    margin-bottom: 2em;
  }
}
.mainContents .panel-block-list .panel-block__txt {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1.7333333333;
  margin-bottom: 30px;
}
.mainContents .panel-block-list .panel-block .red-txt {
  color: #FF0000;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}
.mainContents .mb10 {
  margin-bottom: 10px;
}
.mainContents .mb30 {
  margin-bottom: 30px;
}
.mainContents .panel-block__top {
  height: 190px;
}
.mainContents .panel-section {
  background: #F4F4F4;
  padding: 40px 15px;
  border: none;
  border-top: solid 6px #C1C1C1;
}
@media (min-width: 769px) {
  .mainContents .panel-section {
    padding: 60px 40px;
  }
}
.mainContents .section__ttl {
  letter-spacing: 0.08em;
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 1.5em;
}
.mainContents .section__ttl small {
  font-size: 1.6rem;
  margin-left: 20px;
  color: inherit;
}
@media (max-width: 768px) {
  .mainContents .section__ttl br + small {
    margin-left: 0;
  }
}
@media (min-width: 769px) {
  .mainContents .section__ttl {
    margin-bottom: 2em;
  }
}

/*-----------------------------------------
ログイン
-------------------------------------------*/
.login-page .link-list {
  margin-top: 30px;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1.7333333333;
}
@media (max-width: 768px) {
  .login-page .link-list li:not(:last-child) {
    margin-bottom: 20px;
  }
}
.login-page .link-list a {
  color: #2E71DA;
}

/*-----------------------------------------
新規会員登録
-------------------------------------------*/
@media (min-width: 769px) {
  .signup-page {
    max-width: 900px;
  }
}
.signup-page__header {
  margin-bottom: 50px;
}
@media (min-width: 1024px) {
  .signup-page__header {
    margin-bottom: 70px;
  }
}
.signup-page__header .page-ttl {
  margin: 0;
}
@media (min-width: 769px) {
  .signup-page__header .page-ttl {
    margin-bottom: 80px;
  }
}
.signup-page .signup-section {
  max-width: 720px;
  margin: auto;
}
@media (min-width: 769px) {
  .signup-page .signup-section .buttonArea {
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .signup-page .signup-section .buttonArea--center {
    justify-content: center;
  }
  .signup-page .signup-section .buttonArea .button {
    margin: 0;
    width: calc(50% - 20px);
  }
}
.signup-page__stepList {
  display: flex;
  display: -webkit-flex;
  align-items: flex-start;
  justify-content: center;
}
@media (max-width: 1023px) {
  .signup-page__stepList {
    justify-content: space-between;
    margin-top: 30px;
  }
}
@media (max-width: 768px) {
  .signup-page__stepList {
    width: calc(100% + 20px);
    position: relative;
    left: -10px;
  }
}
.signup-page__stepList .stepLabel {
  color: #8F929B;
  font-weight: bold;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
}
.signup-page__stepList .stepLabel__header {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  margin-bottom: 6px;
}
@media (min-width: 769px) {
  .signup-page__stepList .stepLabel__header {
    margin-bottom: 10px;
    font-size: 1.8rem;
  }
}
.signup-page__stepList .stepLabel__num {
  width: 16px;
  height: 16px;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  border: solid 1px #8F929B;
  border-radius: 100%;
  margin-left: 6px;
  font-weight: bold;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Verdana, sans-serif;
}
@media (min-width: 769px) {
  .signup-page__stepList .stepLabel__num {
    width: 30px;
    height: 30px;
  }
}
.signup-page__stepList .stepLabel__separate {
  width: 20px;
  border-bottom: solid 1px #8F929B;
  padding-top: 12px;
  margin: 0 5px;
}
@media (min-width: 769px) {
  .signup-page__stepList .stepLabel__separate {
    width: 80px;
    margin: 0 20px;
  }
}
.signup-page__stepList .stepLabel__ttl {
  font-size: 1rem;
}
@media (min-width: 769px) {
  .signup-page__stepList .stepLabel__ttl {
    font-size: 1.4rem;
  }
}
.signup-page__stepList .stepLabel.current {
  color: black;
}
.signup-page__stepList .stepLabel.current .stepLabel__num {
  color: white;
  border-color: black;
  background: black;
}
.signup-page .terms-box {
  background: white;
  border: solid 1px #D9DFE6;
  height: 340px;
  overflow-y: auto;
  padding: 20px 15px;
  letter-spacing: 0.08em;
}
@media (min-width: 769px) {
  .signup-page .terms-box {
    height: 400px;
    padding: 40px;
  }
}
.signup-page .terms-box p {
  line-height: 1.7142857143;
}
.signup-page .terms-box p:not(:last-child) {
  margin-bottom: 1.5em;
}
.signup-page .buttonArea {
  padding-top: 40px;
}
@media (min-width: 769px) {
  .signup-page .buttonArea {
    padding-top: 60px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    flex-direction: row-reverse;
  }
}
.signup-page .buttonArea .button {
  height: 50px;
}
@media (max-width: 768px) {
  .signup-page .buttonArea .button:not(:last-child) {
    margin-bottom: 16px;
  }
}
@media (min-width: 769px) {
  .signup-page .buttonArea .button {
    max-width: 340px;
    margin: 0 20px;
  }
}
@media (min-width: 769px) {
  .signup-page .signup-formTable input[type=text], .signup-page .signup-formTable input[type=email], .signup-page .signup-formTable input[type=password] {
    max-width: 400px;
  }
  .signup-page .signup-formTable .form-content {
    border: solid 1px #D9DFE6;
  }
  .signup-page .signup-formTable .inputRow {
    display: grid;
    grid-template-columns: 250px 1fr;
  }
  .signup-page .signup-formTable .inputRow:not(:last-child) {
    border-bottom: solid 1px #D9DFE6;
  }
}
.signup-page .signup-formTable .inputLabel {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  height: 100%;
  background: #F4F4F5;
  padding: 15px 12px;
  font-weight: bold;
  font-size: 1.5rem;
}
@media (min-width: 769px) {
  .signup-page .signup-formTable .inputLabel {
    padding: 20px;
  }
}
.signup-page .signup-formTable .inputLabel .required {
  color: #E61F37;
  border: solid 1px #E61F37;
  font-size: 1.2rem;
  width: 40px;
  height: 20px;
  border-radius: 3px;
  display: inline-block;
  text-align: center;
  letter-spacing: 0.08em;
  margin-left: auto;
}
.signup-page .signup-formTable .inputCol {
  padding: 20px 0 30px;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}
@media (min-width: 769px) {
  .signup-page .signup-formTable .inputCol {
    padding: 20px;
  }
}
.signup-page .signup-formTable .input_attention {
  letter-spacing: 0.08em;
  font-size: 1.2rem;
  color: inherit;
  margin-top: 15px;
  display: block;
}
@media (min-width: 769px) {
  .signup-page .signup-formTable .input_attention {
    font-size: 1.5rem;
  }
}
.signup-page .signup-formTable .birth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (min-width: 769px) {
  .signup-page .signup-formTable .birth-wrap {
    grid-template-columns: 20fr 11.5fr 11.5fr;
  }
}
.signup-page .signup-formTable .birth-wrap select {
  width: 100%;
}
.signup-page .regmessageArea .text-box {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  padding: 0;
}
.signup-page .regmessageArea .text-box * {
  line-height: 2;
}
.signup-page .regmessageArea .text-box .thank-ttl {
  margin-bottom: 1.5em;
  font-size: 1em;
}

/*-----------------------------------------
マイページ
-------------------------------------------*/
.member-page {
  letter-spacing: 0.05em;
}
@media (min-width: 769px) {
  .member-page {
    width: calc(100% - 80px);
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .member-page .side_area {
    margin-bottom: 60px;
  }
}
@media (min-width: 769px) {
  .member-page .side_area {
    width: 318px;
  }
}
.member-page .side_area .member-info {
  background: #F4F4F4;
  border-top: solid 6px #C1C1C1;
  padding: 24px 15px 60px;
  margin-bottom: 40px;
}
@media (min-width: 769px) {
  .member-page .side_area .member-info {
    padding: 30px 10px 50px;
  }
}
.member-page .side_area .member-info .member-name {
  margin-bottom: 30px;
}
.member-page .side_area .member-info .member-status {
  text-align: center;
}
.member-page .side_area .member-info .brand_name {
  text-align: left;
  font-size: 2rem;
  margin-bottom: 16px;
  line-height: 1;
}
.member-page .side_area .member-info .member-status__name {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}
.member-page .side_area .member-info .member-status__date {
  font-size: 1.4rem;
  margin-bottom: 20px;
}
.member-page .side_area .customer_code_barcode {
  margin-bottom: 40px;
}
/* 会員ID */
.member-page .side_area .customer_id {
	font-size: 2rem;
	margin: 10px 10px 40px 10px;
	line-height: 1.8;
}
.member-page .side_area .side_area__list__dl {
  padding-left: 10px;
  padding-bottom: 16px;
  border-bottom: solid 1px #D7DFE7;
  margin-bottom: 20px;
}
.member-page .side_area .side_area__list__dl * {
  font-size: 1.4rem;
}
.member-page .side_area .side_area__list__ttl {
  margin-bottom: 10px;
  font-size: 1.5rem;
}
.member-page .side_area .side_area__list__txt {
  color: #8F929B;
}
@media (min-width: 769px) {
  .member-page .main_area {
    width: calc(100% - 318px - 60px);
  }
}
.member-page .main_area .section:not(:last-child) {
  margin-bottom: 100px;
}
.member-page .main_area .section__ttl {
  font-size: 2rem;
  letter-spacing: 0.08em;
  margin-bottom: 1.5em;
  line-height: 1;
}
@media (min-width: 769px) {
  .member-page .main_area .section__ttl {
    margin-bottom: 2em;
  }
}
.member-page .main_area .news-list {
  margin-bottom: 100px;
}
.member-page .main_area .news-list__li {
  border-bottom: solid 1px #D7DFE7;
  padding-bottom: 10px;
}
.member-page .main_area .news-list__li:not(:last-child) {
  margin-bottom: 30px;
}
.member-page .main_area .news-list__link {
  font-size: 1.5rem;
}
@media (max-width: 768px) {
  .member-page .main_area .news-list__link {
    display: block;
    padding-bottom: 10px;
  }
  .member-page .main_area .news-list__link__date {
    display: block;
    margin-bottom: 12px;
  }
}
@media (min-width: 769px) {
  .member-page .main_area .news-list__link {
    display: flex;
    display: -webkit-flex;
    width: fit-content;
  }
  .member-page .main_area .news-list__link__date {
    margin-right: 40px;
  }
}
@media (max-width: 768px) {
  .member-page .main_area .banner-list li:not(:last-child) {
    margin-bottom: 30px;
  }
}
@media (min-width: 769px) {
  .member-page .main_area .banner-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}
@media (min-width: 769px) {
  .member-page .input-table {
    border-top: solid 1px #D9DFE6;
  }
}
.member-page .error-messages li {
  color: #E61F37;
}
@media (min-width: 769px) {
  .member-page .input-table:not(.input-table--confirm) .inputRow .inputHead {
    container-type: inline-size;
  }
}
.member-page .inputRow {
  font-size: 1.5rem;
}
@media (min-width: 769px) {
  .member-page .inputRow {
    display: grid;
    grid-template-columns: 34% 66%;
    border-bottom: solid 1px #D9DFE6;
  }
}
.member-page .inputRow .inputHead {
  background: #F4F4F5;
  font-weight: bold;
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
@media (max-width: 768px) {
  .member-page .inputRow .inputHead {
    height: 40px;
    padding-left: 15px;
    padding-right: 10px;
  }
}
@media (min-width: 769px) {
  .member-page .inputRow .inputHead {
    padding-left: 8.0701754386%;
    padding-right: 8.0701754386%;
    min-height: 90px;
  }
}
.member-page .inputRow .inputHead .inputLabel {
  width: 100%;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}
.member-page .inputRow .inputHead .required {
  font-size: 1.2rem;
  width: 46px;
  display: inline-block;
  text-align: center;
  border: solid 1px #E61F37;
  border-radius: 3px;
  color: #E61F37;
  line-height: 1;
  padding: 3px 0;
}
.member-page .inputRow .inputColError input[type=text], .member-page .inputRow .inputColError input[type=password], .member-page .inputRow .inputColError input[type=date], .member-page .inputRow .inputColError input[type=datetime], .member-page .inputRow .inputColError input[type=datetime-local], .member-page .inputRow .inputColError input[type=month], .member-page .inputRow .inputColError input[type=week], .member-page .inputRow .inputColError input[type=email], .member-page .inputRow .inputColError input[type=number], .member-page .inputRow .inputColError input[type=search], .member-page .inputRow .inputColError input[type=tel], .member-page .inputRow .inputColError input[type=time], .member-page .inputRow .inputColError input[type=url], .member-page .inputRow .inputColError input[type=color], .member-page .inputRow .inputColError textarea, .member-page .inputRow .inputColError select {
  background: #FEEAEA;
}
.member-page .inputRow .inputCol {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  width: 100%;
  padding: 20px 0;
}
@media (max-width: 767px) {
  .member-page .inputRow .inputCol.inputCol--checkbox {
    padding-left: 15px;
  }
}
@media (min-width: 769px) {
  .member-page .inputRow .inputCol {
    padding: 20px 57px 20px 24px;
  }
}
.member-page .inputRow .inputCol .inputColInner {
  width: 100%;
}
.member-page .inputRow .inputCol .input_attention {
  font-size: 1.3rem;
  margin-top: 15px;
  color: #191B1D;
  display: inline-block;
}
@media (min-width: 769px) {
  .member-page .inputRow .inputCol .input_attention {
    font-size: 1.5rem;
  }
}
.member-page .inputRow .inputCol input[placeholder=変更する場合のみ入力して下さい]:not(:focus) {
  background: #E8F0FE;
}
.member-page .inputRow .inputCol input[type=checkbox]:checked + label:after {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  margin: 0;
  top: 13px;
  margin-top: 0;
}
@media (min-width: 769px) {
  .member-page .input-table--confirm .inputRow {
    grid-template-columns: 21% 79%;
  }
  .member-page .input-table--confirm .inputRow .inputHead {
    padding-left: 13.2183908046%;
    padding-right: 13.2183908046%;
  }
}
@media (max-width: 768px) {
  .member-page .buttonArea {
    display: flex;
    display: -webkit-flex;
    flex-direction: column-reverse;
  }
  .member-page .buttonArea .mypage-btn:not(:last-child) {
    margin-top: 16px;
  }
  .member-page .buttonArea .button {
    height: 60px;
  }
}
@media (min-width: 769px) {
  .member-page .buttonArea {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

.member-page.regmessageWrapper .buttonArea {
  width: 100%;
  padding-top: 60px;
}

/* history STYLE
-------------------------------*/
.history .history-ttl {
  font-size: 30px;
  font-size: 3rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
  margin-bottom: 30px;
}

.history .history-ttl span {
  font-size: 14px;
  font-size: 1.4rem;
  color: #7d7d7d;
  padding-left: 20px;
}

.history .orderHistoryTable {
  display: table;
  width: 100%;
  margin-bottom: 50px;
}

.history .orderHistoryHeadRow,
.history .orderHistoryRow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-size: 1.4rem;
}

.history .orderHistoryHeadRow {
  background: #eeeeee;
  color: #808080;
}

.history .orderHistoryTable .orderHistoryHeadRow .orderHistoryHead,
.history .orderHistoryTable .orderHistoryRow .orderHistoryCol {
  border-bottom: 1px solid #bfbfbf;
  padding: 10px 0 8px 10px;
}

.history .orderHistoryTable .orderHistoryRow .orderHistoryHead {
  display: none;
}

.history .orderHistoryTable .orderHistoryHeadRow .orderHistoryHead,
.history .orderHistoryTable .orderHistoryRow .orderHistoryCol {
  padding: 15px 0;
}

.history .orderHistoryTable .orderHistoryHeadRow .orderHistoryHead {
  border-left: 1px solid #FFF;
}

.history .orderHistoryTable .orderHistoryHeadRow .orderHistoryHead:first-child {
  border-left: none;
}

.history .orderHistoryTable .orderHistoryRow .orderHistoryCol {
  background-color: #fff;
}

.history .orderHistoryTable .orderHistoryRow.last .orderHistoryCol {
  /*	border: none; */
}

.delivery_address .contentsColButton a,
.history .orderHistoryTable a {
  color: #000;
  text-decoration: none;
}

.history .orderHistoryTable .orderHistoryRow .orderHistoryCol.colButton a {
  border: 1px solid #000;
  padding: 3px 5px;
  text-align: center;
}

.history .pagination > li {
  display: inline-block;
}

/*
.orderHistoryTable .orderHistoryRow .orderHistoryCol.colPaymentTotal
{
	text-align: right;
	padding-right: 1em;	
}
*/
@media only screen and (max-width: 1023px) {
  .history .history-ttl {
    font-size: 22px;
    font-size: 2.2rem;
  }

  .history .history-ttl span {
    font-size: 12px;
    font-size: 1.2rem;
    padding-left: 10px;
  }

  .history .orderHistoryTable {
    margin-bottom: 30px;
  }

  /* small */
  .history .orderHistoryTable {
    display: block;
    width: 100%;
    padding: 0;
  }

  .history .orderHistoryHeadRow {
    display: none;
  }

  .history .orderHistoryRow {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    overflow: hidden;
  }
  .history .orderHistoryRow:not(:last-child) {
    margin-bottom: 40px;
  }

  .history .orderHistoryTable .orderHistoryRow .orderHistoryHead {
    display: block;
    width: 40%;
    height: 35px;
    border-bottom: 1px solid #A5A5A5;
    padding: 9px 9px 0 9px;
    text-align: left;
  }

  .history .orderHistoryTable .orderHistoryRow .orderHistoryHead.headButton {
    display: none !important;
  }

  .history .orderHistoryTable .orderHistoryRow .orderHistoryCol,
.history .orderHistoryTable .orderHistoryRow .orderHistoryCol.colButton {
    display: block;
    width: 60%;
    height: 35px;
    border: none;
    border-bottom: 1px solid #A5A5A5;
    padding: 9px 9px 0 9px;
    text-align: left;
  }

  .history .orderHistoryTable .orderHistoryRow .orderHistoryCol.colButton {
    width: 100%;
    height: inherit !important;
    order: 9;
  }

  .history .orderHistoryTable .orderHistoryHeadRow .orderHistoryHead {
    border-left: none;
  }

  .history .orderHistoryTable .orderHistoryRow.last .orderHistoryCol {
    border-bottom: 1px solid #A5A5A5;
  }

  .history .orderHistoryTable .orderHistoryRow.first .colOrderCode {
    border-top: 1px solid #A5A5A5;
  }

  .history .orderHistoryTable .orderHistoryRow .orderHistoryHead.headButton,
.history .orderHistoryTable .orderHistoryRow .orderHistoryCol.colButton {
    height: 35px;
    padding-bottom: 9px;
    text-align: left;
    border-bottom: none;
  }

  .history .orderHistoryTable .orderHistoryRow .orderHistoryHead.headOrderCode,
.history .orderHistoryTable .orderHistoryRow .orderHistoryCol.colOrderCode {
    border-top: 1px solid #A5A5A5;
    margin-top: 30px;
  }

  .history .orderHistoryTable .orderHistoryRow.first .orderHistoryHead.headOrderCode,
.history .orderHistoryTable .orderHistoryRow.first .orderHistoryCol.colOrderCode {
    border-top: 1px solid #A5A5A5;
    margin-top: 0;
  }

  .history .orderHistoryTable .orderHistoryRow .orderHistoryCol.colButton a {
    display: block;
  }
}
/* history_detail STYLE
-------------------------------*/
.history_detail h3 {
  background-color: #eee;
  font-size: 1em;
  color: inherit;
  border-top: 1px solid #A5A5A5;
  margin-top: 30px;
  padding: 10px 0 10px 20px;
}

.history_detail h3.first {
  margin-top: 0;
}

.history_detail .orderHistoryDetailHead,
.history_detail .orderHistoryDetailCol {
  padding: 15px 0 13px 10px;
  background-color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
}

.history_detail .orderHistoryDetailTable {
  display: table;
  width: 100%;
}

.history_detail .orderHistoryDetailHeadRow,
.history_detail .orderHistoryDetailRow {
  display: table-row;
}

.history_detail .orderHistoryDetailWrap {
  display: table;
  width: 100%;
}

.history_detail .orderHistoryDetailRow {
  width: 50%;
  display: table-cell;
  border-bottom: 1px solid #bfbfbf;
  border-left: 20px solid #FFF;
}

.history_detail .orderHistoryDetailWrap .orderHistoryDetailRow:first-child {
  border-left: none;
  border-right: 20px solid #FFF;
}

.history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailHead,
.history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailCol {
  display: table-cell;
  padding: 10px 0 8px 20px;
  text-align: left;
}

.history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailHead {
  width: 150px;
}

.history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailCol {
  width: calc(100% - 150px);
  padding: 15px 0 13px 10px;
}

.history_detail .orderTable,
.history_detail .orderTableSummary2 {
  margin-top: 30px;
}

.history_detail .orderTableSummary2 {
  border: 1px solid #bfbfbf;
  padding: 30px 20px 10px;
}

.history_detail .orderTableSummary2 .row {
  padding: 0;
  font-size: 14px;
  font-size: 1.4rem;
}

.history_detail .orderTableSummary2 .orderRow {
  border-top: 1px solid #bfbfbf;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.history_detail .orderTableSummary2 .orderRow.first {
  border: none;
  padding-top: 0;
}

.history_detail .orderTableSummary2 .orderRow.sale {
  border-top: 1px solid #bfbfbf;
  margin-bottom: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #e95a7f !important;
}

.history_detail .orderTableSummary2 .orderRow.sale .orderHead,
.history_detail .orderTableSummary2 .orderRow.sale .orderVal,
.history_detail .orderTableSummary2 .orderRow.total .orderHead,
.history_detail .orderTableSummary2 .orderRow.total .orderVal {
  width: 50%;
}

.history_detail .orderTableSummary2 .orderRow.sale .orderHead.mb,
.history_detail .orderTableSummary2 .orderRow.sale .orderVal.mb {
  margin-bottom: 5px;
}

.history_detail .orderTableSummary2 .orderRow.sale .orderHead.sale {
  width: 100%;
  color: #000 !important;
  margin-bottom: 10px;
}

.history_detail .orderTableSummary2 .orderRow.total .orderHead {
  font-weight: bold;
}

.history_detail .orderTableSummary2 .orderRow.total .orderVal {
  font-size: 18px;
  font-weight: bold;
}

.history_detail .left-col {
  width: 48%;
  float: left;
}

.history_detail .right-col {
  width: 48%;
  float: right;
}

.history_detail .orderTable .orderRow {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 60px;
}

.history_detail .orderTable .orderRow.title, .orderTableSummary .orderRow.title {
  font-size: 16px;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 20px;
}

.history_detail .orderTable .orderRow .colImage {
  width: 30%;
  float: left;
  margin-right: 5%;
}

.history_detail .orderTable .orderRow .orderCol.colInfo {
  width: 65%;
  display: block;
  float: left;
}

.history_detail .orderTable .orderRow .orderCol.colInfo .itemName {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  padding: 0px 0 15px;
}

.history_detail .orderTable .orderRow .orderCol.colInfo .separator {
  line-height: 1.6 !important;
}

.history_detail .orderTable .orderRow .orderCol.colInfo .separator span {
  width: 5.5em;
  display: inline-block;
}

.history_detail .orderTable .orderRow .orderCol.colInfo .price {
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
}

.history_detail .order-btn {
  overflow: hidden;
  clear: both;
  padding-top: 10px;
}

.history_detail .order-btn li {
  width: 48.5%;
  margin-left: 3%;
  float: left;
  font-size: 14px !important;
  font-size: 1.4rem !important;
}

.history_detail .order-btn li:first-child {
  margin-left: 0%;
}

.history_detail .order-btn li a {
  display: block;
  text-align: center;
  border: 1px solid #000;
  padding: 12px 0 10px;
}

.history_detail .order-btn li.order a {
  background: #000;
  color: #FFF;
}

.history_detail .order-btn li.review a {
  background: FFF;
  color: #000;
}

@media only screen and (max-width: 1024px) {
  .history_detail .left-col {
    width: 100%;
    float: none;
  }

  .history_detail .right-col {
    width: 100%;
    float: none;
  }
}
@media only screen and (max-width: 1023px) {
  .history_detail .orderHistoryDetailWrap {
    display: block;
    width: 100%;
  }

  .history_detail .orderHistoryDetailRow {
    width: 100%;
    display: table;
    border-bottom: 1px solid #bfbfbf;
    border-left: none;
  }

  .history_detail .orderHistoryDetailWrap .orderHistoryDetailRow:first-child {
    border-left: none;
    border-right: none;
  }

  .history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailHead, .history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailCol {
    padding: 10px 0 8px 10px;
  }

  .history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailHead {
    width: 37%;
  }

  .history_detail .orderHistoryDetailTable .orderHistoryDetailRow .orderHistoryDetailCol {
    width: 63%;
  }

  .history_detail .orderTableSummary2 .row {
    width: 100% !important;
  }
}
@container (max-width: 284px) {
  .member-page .inputRow .inputHead .inputLabel {
    font-size: min((15 / 285) * 150cqw, 1em);
  }
  .member-page .inputRow .inputHead .inputLabel .required {
    font-size: min((12 / 285) * 150cqw, 1.2rem);
    width: min((46 / 285) * 150cqw, 46px);
  }
}
.customer_code_barcode {
  width: max-content;
  margin: 0 auto;
}

@media only screen and (max-width: 768px) {
  .customer_code_barcode {
    width: max-content;
    margin: 0 auto;
  }
  /* 会員ID */
  .member-page .side_area .customer_id {
    width: max-content;
    margin: 0 auto;
    padding-bottom: 15px;
  }
}