@charset "utf-8";

:root {
  --free-gold: #C7AA3D;
  --free-beige: #EAE1C0;
}

.free-step .page-title {
  background-image: url("/assets/pages/loan/images/step_page_title_bg.png");
}

@media screen and (max-width:768px) {
  .free-step .page-title {
    background-image: url("/assets/pages/loan/images/step_page_title_bg_sp.png");
  }

  .free-step .page-title .pt-inner .pt-img {
    margin: 0;
  }
}

.free-step .c-text01,
.free-step .c-text02 {
  background: var(--free-gold);
}

.free-step .c-anchor_list li {
  border-color: var(--free-gold) !important;
}

.free-step .c-title01_product {
  color: #C6A947;
}

.free-step .c-text_box01 {
  background: var(--free-beige);
}

.free-step .c-text_box01 .sub .text01 {
  background: var(--free-gold);
  ;
}

.free-step .c-text_box02 {
  margin-bottom: 0;
}

.free-step .c-text_box02 .text01 {
  background: var(--free-gold);
  ;
}

.free-step .c-point_list {
  margin-top: 170px;
}

.free-step .c-point_list li .ttl {
  color: var(--free-gold);
  ;
}

.free-step .c-point_list li .ttl::before {
  background-image: url("/assets/pages/loan/images/point_icon02.png");
}

.free-step .c-title02 span::before,
.free-step .c-title02 span::after {
  background-color: #C6A947;
}

.free-step .c-text_box03 {
  border-color: var(--free-gold);
  ;
}

.free-step .c-text_box03 .ttl {
  background: var(--free-gold);
  ;
}

.free-step .c-text_box03 .sub_ttl {
  border-color: var(--free-gold);
  ;
}

.free-step .c-text_box03 .sub_ttl span {
  background: var(--free-gold);
  ;
}

.free-step .c-text_box03 .num_list li {
  border-color: #C6A947;
}

.free-step .c-faq_list dt {
  background: var(--free-beige);
}

.free-step .c-faq_list dt .mark {
  background: var(--free-gold);
  ;
}

.free-step .c-faq_list dd {
  border-color: var(--free-beige);
}

.free-step .c-faq_list dd .mark {
  color: var(--free-gold);
  ;
}

.free-step .c-faq_list {
  margin-bottom: 20px;
}

.free-step .c-faq_list.mb01 {
  margin-bottom: 40px;
}

.free-step .baner {
  margin-bottom: 40px;
}

.free-step .c-faq_box {
  margin-bottom: 0;
}

.free-step .c-flow_list {
  margin-bottom: 37px;
}

.free-step .c-flow_list li:nth-child(2n) {
  background: var(--free-beige);
}

.free-step .c-flow_list li .step_num {
  color: var(--free-gold);
  ;
  border-color: #C6A947;
}

.free-step .flow_sec {
  padding-top: 75px;
}

.free-step .flow_sec .c-title01 {
  padding-right: 0;
}

@media screen and (max-width:768px) {
  .free-step .c-point_list {
    margin-top: 130px;
  }

  .free-step .c-flow_list {
    margin-bottom: 20px;
  }

  .free-step .flow_sec {
    padding-top: 30px;
  }

  .free-step .flow_sec .c-title01 {
    padding-right: 60px;
  }
}

/* step_rate_table */
.step_rate_table {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--free-gold);
  ;
  width: 100%;
}

.step_rate_table table {
  width: 100%;
  border-collapse: collapse;
}

.step_rate_table th,
.step_rate_table td {
  box-sizing: border-box;
  padding: 0 5px;
  font-size: 1.2rem;
  color: #333;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
}

.step_rate_table th {
  padding: 12px 10px;
  color: #fff;
  font-size: 1.6rem;
  background: var(--free-gold);
  ;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  transform: rotate(0.03deg);
  font-weight: 600;
  letter-spacing: 0.075em;
  -webkit-font-smoothing: antialiased;
}

.step_rate_table th+th {
  border-left: 2px solid #fff;
}

.step_rate_table td {
  height: 90px;
}

.step_rate_table td+td {
  border-left: 2px solid var(--free-gold);
  ;
}

.step_rate_table tr:nth-child(2n) td {
  background: #f9f6c9;
}

.step_rate_table td .font-jost {
  margin: 0 10px;
  font-size: 1.875rem;
  font-weight: 600;
}

.step_rate_table td .small {
  font-size: 0.875rem;
}

.step_rate_table .num {
  margin: 0 8px;
  display: inline-block;
  font-weight: 800;
  color: #F47426;
  line-height: 1;
  text-shadow: 4px 4px 0px #fff, -4px -4px 0px #fff, -4px 4px 0px #fff, 4px -4px 0px #fff, 4px 0px 0px #fff, -4px 0px 0px #fff, 0px 4px 0px #fff, 0px -4px 0px #fff;
}

.step_rate_table .sml {
  color: #333;
  font-size: 1.2rem;
}


@media screen and (max-width:768px) {
  .step_rate_table tbody {
    width: 100%;
  }

  .step_rate_table th,
  .step_rate_table td {
    font-size: 0.875rem;
    width: 100%;
  }

  .step_rate_table th {
    padding: 10px;
    font-size: 1.125rem;
  }

  .step_rate_table td {
    padding: 5px 10px;
    height: auto;
  }

  .step_rate_table td .font-jost {
    margin: 0 5px;
    font-size: 1.25rem;
  }

  .step_rate_table td .small {
    display: block;
    font-size: 1rem;
  }
}

/* ==========================
  キャンペーン概要
========================== */
.camp_box {
  margin-bottom: 80px;
  padding: 40px;
  align-items: center;
  border-radius: 10px;
  background: #f9f6c9;
}

.camp_box--blue {
  background: #E2F4FF;
}

.camp-section-box {
  text-align: center;
}

.camp-section-box:nth-of-type(2) {
  padding-top: 30px;
}

.camp-section-title {
  padding: 12px 0;
  letter-spacing: 0.075em;
  line-height: 1.5;
  border-radius: 10px;
  background-color: var(--free-gold);
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
}

@media (max-width:768px) {
  .camp-late-image {
    display: block;
  }

  .c-white_box {
    padding: 30px 15px;
  }

  .c-title01 {
    margin-bottom: 8px;
  }

  .camp_box {
    margin-bottom: 60px;
    padding: 30px 15px;
  }
}

.camp-period-date {
  padding-top: 15px;
  font-size: 1.75rem;
  font-weight: 600;
}

.camp-section-note {
  margin-top: 16px;
  font-size: 0.875rem;
  text-align: start;
  text-indent: 1em hanging;
}

.camp-gift-text {
  box-sizing: border-box;
  padding-top: 24px;
  position: relative;
  flex: 1;
  font-size: 2.25rem;
  font-weight: 800;
}

.camp-gift-price {
  margin: 0 5px;
  display: inline-block;
  text-align: center;
  vertical-align: -4px;
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
  color: #F47426;
  text-shadow: 4px 4px 0px #fff, -4px -4px 0px #fff, -4px 4px 0px #fff, 4px -4px 0px #fff, 4px 0px 0px #fff, -4px 0px 0px #fff, 0px 4px 0px #fff, 0px -4px 0px #fff;
}

.camp-gift-orange {
  padding-right: 5px;
  color: #F47426;
  text-shadow: 4px 4px 0px #fff, -4px -4px 0px #fff, -4px 4px 0px #fff, 4px -4px 0px #fff, 4px 0px 0px #fff, -4px 0px 0px #fff, 0px 4px 0px #fff, 0px -4px 0px #fff;
}

@media (max-width:768px) {
  .camp-period-date {
    font-size: 1.3rem;
  }

  .camp-section-title {
    padding: 10px;
    width: auto;
    height: auto;
    display: block;
    font-size: 1.25rem;
  }

  .camp-gift-text {
    padding-top: 16px;
    display: inline-block;
    font-size: 1.5rem;
    text-align: center;
  }

  .camp-gift-price {
    font-size: clamp(1.25rem, 5vw, 2rem);
    vertical-align: 0;
    text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, 2px 0px 0px #fff, -2px 0px 0px #fff, 0px 2px 0px #fff, 0px -2px 0px #fff;
    font-size: 3rem;
  }

  .camp-gift-orange {
    font-size: clamp(1.25rem, 4vw, 2rem);
    padding: 0;
  }

  .c-text_box01 .sub._right {
    width: auto;
  }

  .c-text_box01 .sub {
    width: auto;
  }

  .c-white_box {
    margin-top: 40px;
  }
}

/* ==========================
  フリーローン遷移ボタン
========================== */
.free-loan_box {
  margin-top: 80px;
  padding: 30px;
  align-items: center;
  border-radius: 10px;
  background: #fffade;
  border: 3px solid var(--free-gold);
}

.free-loan-icon {
  flex-shrink: 0;
}

.free-loan-icon img {
  width: 90px;
  height: auto;
}

.free-loan-text,
.free-loan-subtext {
  margin: 0;
}

.free-loan-text {
  font-size: 1.25rem;
  font-weight: 600;
}

.free-loan-subtext {
  color: var(--free-gold);
  font-size: 1.75rem;
  font-weight: 600;
  display: inline-block;
  padding-right: 42px;
  background: url("/assets/pages/free-step/images/icon_gold.png") no-repeat right center / 30px auto;
}

.free-loan-link {
  display: flex;
  align-items: center;
  gap: 24px;
  color: inherit;
  text-decoration: none;
}

@media (max-width: 767px) {
  .free-loan_box {
    padding: 18px 10px;
    margin-top: 60px;
  }

  .free-loan-text {
    font-size: 0.875rem;
  }

  .free-loan-subtext {
    font-size: 1.2rem;
    background-size: 20px auto;
  }

  .free-loan-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .free-loan-body {
    display: contents;
  }

  .free-loan-icon {
    width: 48px;
  }

  .free-loan-icon img {
    width: 48px;
  }

  .free-loan-text {
    width: calc(100% - 76px);
    text-align: left;
  }

  .free-loan-subtext {
    width: 100%;
    padding: 0 8px;
  }
}