@media screen and (min-width: 768px) {
  .hidden-min768 {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .hidden-max767 {
    display: none !important;
  }
}
#contents-wrap__renewal {
  padding-bottom: 4px;
}
@media only screen and (min-width: 768px) {
  #contents-wrap__renewal {
    margin-bottom: 60px;
  }
}
main {
  font-family: var(--fontf_sans-s);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.07em;
}
main button {
  appearance: none;
  border: none;
}
#contents-wrap__renewal main .container::before,
#contents-wrap__renewal main .container::after {
  content: none;
}
@media only screen and (max-width: 767px) {
  #contents-wrap__renewal main .container {
    margin-bottom: 40px  !important;
    padding-left: 20px;
    padding-right: 20px;
  }
}
main img {
  width: 100%;
}
main ul{
  padding: 0;
  margin: 0;
  list-style: none;
}
main .caption{
  font-size: 1.4rem;
  line-height: 1.45;
  color: #707070;
}

main h2 {
  font-family: var(--fontf_serif);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0.05em;
  line-height: 1.4;
  padding: 0;
}
/* ==== .headline ==== */
main .headline {
  width: 100vw;
  height: 230px;
  margin: 0 auto 60px;
  background-size: cover;
  background-position: 50% 40%;
  position: relative;
  z-index: 0;
  display: grid;
  place-items: center;
  background-image: url('../../../images/howtobuy/headimg.jpg');
}
main .headline::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.4);
}
main .headline h1{
  font-family: var(--fontf_serif);
  font-weight: 400;
  font-size: 4rem;
  color: #fff;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 767px) {
  main .headline {
    height: 190px;
    margin: 0 auto 2px;
    background-size: 200%;
    background-position: 80% 40%;
  }
  main .headline h1{
    font-size: 2.4rem;
  }
}
/* ==== END .headline ==== */
main .memberregist {
  font-size: 1.6rem;
  color: #fff;
  display: block;
  font-weight: 600;
  background-color: #202020;
  border-radius: 50px;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  letter-spacing: 0.07em;
  transition: .3s;
  border: 1px solid #202020;
}
main .memberregist::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4995 10.9177C13.1958 10.9177 15.3813 8.73135 15.3813 6.03422C15.3813 3.33708 13.1958 1.15039 10.4995 1.15039C7.80318 1.15039 5.61846 3.33708 5.61846 6.03387C5.61846 8.73066 7.80353 10.9173 10.4995 10.9173V10.9177Z' fill='white'/%3E%3Cpath d='M19.0642 17.3391C18.0299 14.1578 14.2336 12.4256 10.4999 12.4256C6.76616 12.4256 2.96986 14.1582 1.93558 17.3391C1.76965 17.8489 1.67874 18.3555 1.65039 18.8494H19.3494C19.3207 18.3555 19.2301 17.8489 19.0642 17.3391Z' fill='white'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  transition: .3s;
}
main .memberregist:hover {
  background-color: transparent;
  color: #202020;
}
main .memberregist:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4995 10.9177C13.1958 10.9177 15.3813 8.73135 15.3813 6.03422C15.3813 3.33708 13.1958 1.15039 10.4995 1.15039C7.80318 1.15039 5.61846 3.33708 5.61846 6.03387C5.61846 8.73066 7.80353 10.9173 10.4995 10.9173V10.9177Z' fill='%23202020'/%3E%3Cpath d='M19.0642 17.3391C18.0299 14.1578 14.2336 12.4256 10.4999 12.4256C6.76616 12.4256 2.96986 14.1582 1.93558 17.3391C1.76965 17.8489 1.67874 18.3555 1.65039 18.8494H19.3494C19.3207 18.3555 19.2301 17.8489 19.0642 17.3391Z' fill='%23202020'/%3E%3C/svg%3E%0A");
}
/* ==== #introduction ==== */
#introduction.container {
  width: fit-content !important;
  border: 1px solid #707070;
  border-radius: 10px;
  margin-bottom: 60px  !important;
}

#introduction p {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}
@media only screen and (min-width: 768px) {
  #introduction .item-description {
    display: flex;
    justify-content: space-between;
    text-align: left;
    align-items: center;
    gap: 40px;
    padding: 46px 60px;
  }
}
@media only screen and (max-width: 767px) {
  #introduction.container {
    width: calc(100vw - 30px)  !important;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 32px auto 40px  !important;
    text-align: center;
    border-radius: 8px;
  }
  #introduction .memberregist {
    margin: 16px auto 0;
  }
}
/* ==== END #introduction ==== */


/* ==== #flow-list ==== */

#flow-list .flow-list__item.container {
  max-width: 960px;
  text-align: left;
  margin-bottom: 40px;
  padding: 48px 60px 48px 123px;
  background-color: #fff;
  border-radius: 10px;
}
#flow-list .step-num {
  width: fit-content;
  color: #fff;
  background-color: #202020;
  font-size: 2.6rem;
  line-height: 1;
  font-family: var(--fontf_num_serif);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 16px;
}
#flow-list .step-num span{
  display: block;
  font-family: var(--fontf_num);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1;
}
#flow-list h2 {
  font-size: 2.4rem;
  line-height: 1.4;
  margin: 0;
  margin-bottom: 32px;
}
#flow-list h3 {
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0;
  margin-bottom: 2px;
  line-height: 1.4;
}
.flow-list__item p{
  margin-bottom: 22px;
}
.flow-list__item a {
  text-decoration: underline;
}
.flow-list__item table{
  width: 100%;
  border: 1px solid #d2d2d2;
  margin-bottom: 22px;
}
.flow-list__item th {
  background-color: #F0F0F0;
  padding: 10px 12px;
  font-weight: 400;
  font-size: 1.5rem;
  border: none;
  border-bottom: 1px solid #d2d2d2;
  line-height: 1.4;
}
.flow-list__item td {
  padding: 10px 12px;
  font-size: 1.5rem;
  border-bottom: 1px solid #d2d2d2;
}
tbody {
  border: none;
}
.flow-list__item table tr:last-child th,
.flow-list__item table tr:last-child td {
  border-bottom: none;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.flow-list__item td p{
  margin-bottom: 12px;
}
.flow-list__item .margin-small {
  margin-bottom: 8px !important;
}
.flow-list__item td > :last-child{
  margin-bottom: 0;
}
.flow-list__item .item-description > :last-child{
  margin-bottom: 0;
}
.flow-list__item .btn_apply-catalog {
  display: block;
  width: 300px;
  background-color: #202020;
  border-radius: 6px;
  border: 1px solid #202020;
  color: #fff;
  font-weight: 600;
  text-decoration: none !important;
  text-align: center;
  padding-bottom: 12px;
  overflow: hidden;
  margin-top: 8px;
  transition: .3s;
}
.flow-list__item .btn_apply-catalog img {
  width: 100%;
  object-fit: contain;
  margin-bottom: 12px;
}
.flow-list__item .btn_apply-catalog span{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-list__item .btn_apply-catalog span::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
  margin-left: 12px;
}
.flow-list__item .btn_apply-catalog:hover {
  color: #202020;
  background-color: transparent;
}
.flow-list__item .btn_apply-catalog:hover span::after {
  border-color: #202020;
}
.flow-list__item .btn_small {
  width: fit-content;
  background-color: #F0F0F0;
  text-decoration: none;
  font-weight: 600;
  color: #202020;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 1.4rem;
  transition: .3s;
  border: 1px solid #F0F0F0;
}
.flow-list__item .btn_small::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid #202020;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
  margin-left: 12px;
}
.flow-list__item .btn_small:hover {
  /* background-color: #aaa; */
  border-color: #202020;
}
.flow-list__item .btn_small.info-icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99969 0.75C3.58219 0.75 0 4.33228 0 8.7506C0 13.1689 3.58219 16.7512 7.99969 16.7512C12.4172 16.7512 16 13.1689 16 8.7506C16 4.33228 12.4184 0.75 7.99969 0.75ZM9.40438 12.4238C9.08063 12.7829 8.89531 12.9964 8.54594 13.3305C8.01719 13.8362 7.41687 13.9706 6.95031 13.4718C6.27938 12.7542 6.98312 10.5714 7.00031 10.4886C7.12625 9.90854 7.37781 8.74872 7.37781 8.74872C7.37781 8.74872 6.83438 9.08126 6.51188 9.1994C6.27406 9.28628 6.00469 9.17221 5.93844 8.94218C5.87656 8.72903 5.92594 8.59339 6.05625 8.44775C6.37969 8.08896 6.56531 7.8755 6.91469 7.5414C7.44375 7.03572 8.04375 6.90133 8.51031 7.40013C9.18125 8.11771 8.68625 9.29816 8.51219 10.1348C8.495 10.2176 8.08281 12.1235 8.08281 12.1235C8.08281 12.1235 8.62625 11.7909 8.94875 11.6725C9.18719 11.5859 9.45625 11.7003 9.52281 11.93C9.585 12.1432 9.535 12.2788 9.40438 12.4241V12.4238ZM8.53656 6.25438C7.79 6.32001 7.1325 5.76807 7.06687 5.0208C7.00187 4.27446 7.55375 3.61658 8.30031 3.55157C9.04625 3.48594 9.70438 4.0385 9.76937 4.78483C9.835 5.53117 9.2825 6.18937 8.53656 6.25438Z' fill='%23202020'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: 50% 50%;
  margin-right: 16px;
}
.under-line_contents {
  border-top: 1px dotted #d2d2d2;
  padding-top: 32px;
  margin-top: 40px;
}
#flow-list .under-line_contents > h3{
  font-family: var(--fontf_serif);
  font-size: 2.2rem;
  margin-bottom: 16px;
}
.flow-list__item ol {
  padding-left: 2.3rem;
}
@media only screen and (min-width: 768px) {
  .flow-list__item {
    position: relative;
  }
  #flow-list .step-num {
    position: absolute;
    top: 48px;
    left: 0;
  }
  .flow-list__item th {
    width: 165px;
  }
}
@media only screen and (max-width: 767px) {
  #flow-list .step-num {
    font-size: 2.2rem;
    padding: 4px 16px;
    margin-bottom: 28px;
  }
  #flow-list h2{
    font-size: 2.2rem;
    margin-bottom: 20px;
  }
  #flow-list .flow-list__item.container {
    width: calc(100vw - 30px);
    padding: 24px 20px;
    border-radius: 8px;
  }
  .flow-list__item p {
    font-size: 1.5rem;
  }
  .flow-list__item tr {
    display: flex;
    flex-direction: column;
  }
  .flow-list__item th{
    border-bottom: none;
  }
  .flow-list__item .btn_small {
    font-size: 1.35rem;
    letter-spacing: 0.05em;
    padding: 12px 20px;
  }
  .flow-list__item .btn_small.info-icon::before {
    margin-right: 8px;
  }
  .flow-list__item .btn_small::after {
    margin-left: 8px;
  }
}
/* ==== END #flow-list ==== */

/* ==== #contact ==== */
#contact h2 {
  font-size: 2.2rem;
}

#contact.container {
  width: fit-content  !important;
  border: 1px solid #707070;
  border-radius: 10px;
  margin-bottom: 60px  !important;
  text-align: left;
}
#contact p {
  font-size: 1.6rem;
  line-height: 1.45;
  margin-bottom: 20px;
}
#contact dl {
  font-size: 1.5rem;
  margin: 0;
  line-height: 1.6;
}
#contact dt {
  display: inline-block;
  font-weight: 600;
  padding-right: 12px;
  width: fit-content;
  line-height: inherit;
}
#contact dd {
  display: inline-block;
  width: fit-content;
  line-height: inherit;
}
#contact a {
  text-decoration: underline;
}
#contact a.link-hidden {
  pointer-events: none;
  text-decoration: none;
}
#contact a:hover {
  opacity: .5;
}
@media only screen and (min-width: 768px) {
  #contact.container {
    margin: 120px auto;
  }
  #contact .item-description_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    padding: 48px 60px;
  }
  #contact a {
    text-decoration: underline;
    color: #333;
  }
  .link-hidden-min768 {
    pointer-events: none;
    text-decoration: none !important;
  }
}
@media only screen and (max-width: 767px) {
  #contact h2 {
    margin-bottom: 32px;
  }
  #contact.container {
    width: calc(100vw - 30px);
    padding: 32px 20px;
    margin: 32px auto 40px;
    border-radius: 8px;
    letter-spacing: 0.05em;
  }
  #contact .item-description dl{
    font-size: 1.4rem;
  }
  #contact dt {
    padding-right: 4px;
  }
}
/* ==== END #contact ==== */