html{
  font-size:80%;
}
body {
  color: #000;
  font-size: 1.3rem;/*13px*/
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Lucida Grande", Verdana, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 1.6;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ヘッダーレイアウト */
.sample_h_7{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding-top: .5em;
padding-bottom: .5em;
padding-left: .5em;
margin-bottom: .2em;
background-color: #f5f5f5;/* 背景色 */
border-bottom: 3px solid #be2037;/* 下線 */
color: #be2037;/* フォント色 */
text-align: center;   /* text-align プロパティに center を設定 */
}

/* フッターレイアウト */
.footer {
  /* text-align プロパティに center を設定 */
  text-align: center;
}




/*  お申し込みの流れとご利用に際してのご注意アコーディオン*/
.accordion  {
  margin-inline: 0;
  border-bottom:1px solid #a9a9a9
}

.accordion_title {
  position: relative;
  border: none;
  display: block;
  list-style: none;
  width: 100%;
  cursor: pointer;
  padding: 1.4em 2em 1.4em 1.4em;
  line-height: 1.6em;
}

summary.accordion_title::-webkit-details-marker {
  display:none;
}

.accordion_title:after {
  content: "+";
  position: absolute;
  top: calc(50% - 0.5em);
  right: 20px;
  line-height: 1;
  padding: 0;
  pointer-events: none;
}

.accordion::details-content {
  opacity: 0;
  block-size: 0;
  transition: .3s;
  transition-property: display, opacity, block-size, padding;
  transition-behavior: allow-discrete;
  line-height: 1.6em;
}

.accordion .accordion_content {
  padding: 0 2em 0 3em;
}

.accordion .accordion_content > *:first-of-type {
  margin-top: 0;
}

.accordion .accordion_content > *:last-of-type {
  margin-bottom: 0;
}

.accordion[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}

.accordion[open] .accordion_content {
  padding: 0 2em 1.4em 3em;
}

.accordion[open] .accordion_title:after {
  content: "-";
}



/* フォーム要素の基本レイアウト */
input[type=search], input[type=text], input[type=tel], input[type=email], input[type=password], textarea {
  -webkit-appearance: none;
  padding: 10px 5px !important;
  width: 100%;
  line-height: 2;
  background: #fff;
  border: 1px solid #dddddd;
  border-radius: 0;
    font-size: 18px; /* 文字サイズ */
}
input[type=submit] {
  -webkit-appearance: none;
  padding: 10px 5px !important;
  line-height: 2;
        margin-top: 30px;
width: 100%;  /* ボタンの幅 */
    font-size: 18px; /* 文字サイズ */
}
input[type="radio"]{
        margin: 10px 10px 20px;
    font-size: 18px; /* 文字サイズ */
}
.sysFormField{margin: 10px 0;
    font-size: 18px; /* 文字サイズ */
}
.sysFormField label{
        margin-right: 20px;
    font-size: 18px; /* 文字サイズ */
}
.sysFormField a{
  display: inline-block;
  color: #068acc;
  border-bottom: 1px solid #068acc;
  line-height: 15px;
  margin: 0 3px;
    font-size: 18px; /* 文字サイズ */
}
select {height: 30px;
    font-size: 18px; /* 文字サイズ */
}
#sysItemCategory select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none !important;
        width: 100%;
        padding: 3px 5px;
}

button {
  font-size: 15px; /* 文字サイズ */
  padding: 10px 20px; /* ボタンの余白を調整 */
}

/* メール認証と会員登録後購入*/
#sysMailaddressAuthentication {
    padding: 24px 16px;
  }
  
  #sysMailaddressAuthentication .sysMailAddressAuthenticationArea {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  #sysMain h2,
  #sysMain #sysMailaddressAuthentication > p {
    text-align: center;
    margin: 0 auto 12px;
    max-width: 720px;
    line-height: 1.6;
    color: #333;
  }
  
  #sysMailaddressAuthentication .sysMailaddressGroup,
  #sysMailaddressAuthentication .sysAuthenticationCodeGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  #sysMailaddressAuthentication #authenticationMailaddress {
    padding: 10px 12px;
    border: 1px solid #ccc;
    background: #fafafa;
    border-radius: 4px;
    word-break: break-all;
  }
  
  #sysMailaddressAuthentication .sysAuthenticationCodeGroup input[type="text"] {
    width: 14ch;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 4px;
    font-size: 16px;
  }
  
  #sysMailaddressAuthentication .sysSendAuthenticationMail,
  #sysMailaddressAuthentication .sysResendAuthenticationMail,
  #sysMailaddressAuthentication .sysMemberRegister,
  #sysMailaddressAuthentication .sysBackRegisterConfirm {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    color: #000;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    min-width: 220px;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
  }
  
  #sysMailaddressAuthentication .sysSendAuthenticationMail:hover,
  #sysMailaddressAuthentication .sysResendAuthenticationMail:hover,
  #sysMailaddressAuthentication .sysMemberRegister:hover,
  #sysMailaddressAuthentication .sysBackRegisterConfirm:hover {
    background-color: #e0e0e0;
    border-color: #999;
  }
  
  #sysMailaddressAuthentication .sysResendAuthenticationMailGroup,
  #sysMailaddressAuthentication .sysMemberRegisterGroup,
  #sysMailaddressAuthentication .sysBackPageGroup {
    display: flex;
    justify-content: center;
  }
  
  #sysMailaddressAuthentication .sysMemberRegisterGroup,
  #sysMailaddressAuthentication .sysBackPageGroup {
    margin-top: 8px;
  }
  
  @media (max-width: 480px) {
    #sysMailaddressAuthentication .sysMailAddressAuthenticationArea {
      gap: 16px;
    }
    #sysMailaddressAuthentication .sysAuthenticationCodeGroup input[type="text"] {
      width: 12ch;
    }
    #sysMailaddressAuthentication .sysResendAuthenticationMail,
    #sysMailaddressAuthentication .sysMemberRegister,
    #sysMailaddressAuthentication .sysBackRegisterConfirm {
      min-width: 180px;
    }
  }
  
  input#sysOnload.sysSendAuthenticationMail {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    color: #000;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
  }
  
  input#sysOnload.sysSendAuthenticationMail:hover {
    background-color: #e0e0e0;
    border-color: #999;
  }
  
  input.sysNextSubmit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(21.5625rem, 92vw);
    min-height: min(3.75rem, 16vw);
    font-size: min(1rem, 4.2666666667vw);
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    white-space: initial;
    background: #333333;
    border: 1px solid #333333;
    border-radius: min(6.25rem, 26.6666666667vw);
    padding: min(0.625rem, 2.6666666667vw) min(2.5rem, 10.6666666667vw);
    margin: min(0.625rem, 2.6666666667vw) auto 0;
  }
  /*パスワード変更ページのボタン*/
.sysRemindForm input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: min(21.5625rem, 92vw);
  min-height: min(3.75rem, 16vw);

  font-size: min(1rem, 4.2666666667vw);
  font-weight: 700;
  line-height: 1.5;
  white-space: initial;

  color: #ffffff;
  background: #333333;
  border: 1px solid #333333;
  border-radius: min(6.25rem, 26.6666666667vw);

  padding: min(0.625rem, 2.6666666667vw) min(2.5rem, 10.6666666667vw);
  margin: min(0.625rem, 2.6666666667vw) auto 0;
}
#sysMypageLogin input[value=登録] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(21.5625rem, 92vw);
    min-height: min(3.75rem, 16vw);
    font-size: min(1rem, 4.2666666667vw);
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    white-space: initial;
    background: #333333;
    border: 1px solid #333333;
    border-radius: min(6.25rem, 26.6666666667vw);
    padding: min(0.625rem, 2.6666666667vw) min(2.5rem, 10.6666666667vw);
    margin: min(0.625rem, 2.6666666667vw) auto 0;
}
#sysMemberRegisterConfirm input[value=次へ（認証コードを送信する）], #sysMemberMailaddressAuthentication input[value=認証コードを再送信する]{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(21.5625rem, 92vw);
    min-height: min(3.75rem, 16vw);
    font-size: min(1rem, 4.2666666667vw);
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    white-space: initial;
    background: #333333;
    border: 1px solid #333333;
    border-radius: min(6.25rem, 26.6666666667vw);
    padding: min(0.625rem, 2.6666666667vw) min(2.5rem, 10.6666666667vw);
    margin: min(0.625rem, 2.6666666667vw) auto 0;
}
#sysMemberMailaddressAuthentication input[value=登録] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(21.5625rem, 92vw);
    min-height: min(3.75rem, 16vw);
    font-size: min(1rem, 4.2666666667vw);
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    white-space: initial;
    background: #d12e2e;
    border: min(0.125rem, 0.5333333333vw) solid #d12e2e;
    border-radius: min(6.25rem, 26.6666666667vw);
    padding: min(0.625rem, 2.6666666667vw) min(2.5rem, 10.6666666667vw);
    margin: min(0.625rem, 2.6666666667vw) auto 0;
}
#sysMemberMailaddressAuthentication input[value=戻る] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(21.5625rem, 92vw);
    min-height: min(3.75rem, 16vw);
    font-size: min(1rem, 4.2666666667vw);
    font-weight: 700;
    line-height: 1.5;
    color: #333333;
    white-space: initial;
    background: #ffffff;
    border: min(0.125rem, 0.5333333333vw) solid #333333;
    border-radius: min(6.25rem, 26.6666666667vw);
    padding: min(0.625rem, 2.6666666667vw) min(2.5rem, 10.6666666667vw);
    margin: min(0.625rem, 2.6666666667vw) auto 0;
}
@media screen and (max-width:600px){

}
@media screen and (min-width:601px) and (max-width:1100px){

}
@media screen and (min-width:1101px){
.sysDisplayPcNone{
  display:none !important;
}
}
/* #END_OF_RESOURCE_FILE */