@charset "UTF-8";

:root {
  --Noto-Sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif ;
  @media (min-width: 769px) { /* PC */
    --height-floaing-banner: 1.00rem;
  }
  @media (max-width: 768px) { /* SP */
    --height-floaing-banner: .80rem;
  }
}
.loan-sim {
  font-family: var(--Noto-Sans);
  box-sizing: border-box;
  h3 {
    border: none;
    padding: 0;
    margin: 0;
    &::before {
      background-color: transparent;
      width: auto;
      height: auto;
    }
  }
  .--bold {
    font-weight: bold;
  }
  &[v-cloak] {
    opacity: 0;
  }
}

#loan-sim-html .pnkz {
  margin: 0;
}

#loan-sim
.loan-sim__heading {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  text-align: left;
  color: #393939;
  display: flex;
  align-items: center;
  gap: .14rem;
  @media (min-width: 769px) { /* PC */
    font-size: .25rem;
    margin: .31rem 0 .25rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .2rem;
    margin: .24rem 0 .19rem;
  }
  &::before {
    content: ""; 
    display: inline-block;
    position: static;
    background-image: url(../images/loan-sim/icons/math.svg);
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    @media (min-width: 769px) { /* PC */
      width: .27rem;
      height: .27rem;
    }
    @media (max-width: 768px) { /* SP */
      width: .22rem;
      height: .22rem;
    }
  }
}
/* ------------------------------------------------------- float (floating banner) */
.loan-sim-float {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #fff;
  box-shadow: 0px 0px 0.16rem rgba(5, 5, 5, 0.1);
  transition: translate .3s ease;
  @media (min-width: 769px) { /* PC */
    height: var(--height-floaing-banner);
    gap: .40rem;
  }
  @media (max-width: 768px) { /* SP */
    box-sizing: border-box;
    height: var(--height-floaing-banner);
    padding: 0 .70rem 0 .10rem;
    gap: .10rem;
  }
  &[data-hidden="true"] {
    translate: 0 1.00rem;
  }
  &[data-hidden="false"] {
    translate: 0 0;
  }
}
.loan-sim-float__button {
  position: relative;
  display: block;
  border-radius: 100vmax;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: "Hiragino Kaku Gothic ProN";
  font-weight: bold;
  text-align: left;
  color: #fff;
  @media (min-width: 769px) { /* PC */
    width: 4.00rem;
    height: 0.70rem;
    font-size: 0.27rem;
  }
  @media (max-width: 768px) { /* SP */
    width: 1.52rem;
    height: .52rem;
    font-size: .15rem;
  }
  @media (hover:hover) {
    transition: .3s ease;
    &:hover {
      translate: 0 .05rem;
      &.--red {
        box-shadow: 0 0 0 #cb043e;
      }
      &.--orange {
        box-shadow: 0 0 0 #d98114;
      }
    }
  }
  &.--red {
    background: #e50446;
    box-shadow: 0 .05rem 0 #cb043e;
  }
  &.--orange {
    background: #f49b2d;
    box-shadow: 0 .05rem 0 #d98114;
  }
}
/* ------------------------------------------------------- result */
[data-loan-sim-floating-banner="false"]
.loan-sim-result__box {
  @media (max-width: 768px) { /* SP */
    translate: 0 var(--height-floaing-banner);
  }
}
/* 結果BOX表示中はフローティングバナーを隠さない */
[data-loan-sim-floating-banner="false"]:has(.loan-sim-result__box[data-expanded="true"]) {
  .loan-sim-float[data-hidden="true"]{
    translate: 0 0;
  }
  .loan-sim-result__box {
    @media (max-width: 768px) { /* SP */
      translate: 0 0;
    }
  }
}
.loan-sim-result__box {
  &:not(:has(.loan-sim-result__box--gradient)) {
    background: linear-gradient(to right, #e60745 0%, #f7ad23 100%);
    padding: 2px;
  }
  &:has(.loan-sim-result__box--gradient) {
    background: #fff;
  }
  width: 3.70rem;
  @media (min-width: 769px) { /* PC */
    position: sticky;
    grid-column: 2;
    top: 1.00rem;
    margin-bottom: .42rem;
    border-radius: .10rem;
  }
  @media (max-width: 768px) { /* SP */
    max-height: calc(100dvh - .64rem - var(--height-floaing-banner));
    width: 100%;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: var(--height-floaing-banner);
    border-radius: .08rem .08rem 0 0;
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.3s ease, translate .3s ease;
    overflow-y: auto;
    &[data-expanded="true"] {
      grid-template-rows: auto 1fr;
      .loan-sim-result__heading {
        &::before {
          rotate: 180deg;
        }
      }
      .loan-sim-result__text--heading.--closed {
        display: none;
      }
    }
    &[data-expanded="false"] {
      .loan-sim-result__text--heading.--opened {
        display: none;
      }
    }
  }
}
/* split gradient box */
/* 内側のグラデーションBOX */
.loan-sim-result__box--gradient {
  background: linear-gradient(to right, #e60745 0%, #f7ad23 100%);
  padding: 2px;
  @media (min-width: 769px) { /* PC */
    border-radius: .10rem;
  }
  @media (max-width: 768px) { /* SP */
    border-radius: .08rem .08rem 0 0;
    display: grid;
    transition: grid-template-rows 0.3s ease, translate .3s ease, padding 0.3s ease;
  }
}
/* ２番目以降のグラデーションBOX */
.loan-sim-result__box--gradient +
.loan-sim-result__box--gradient {
  @media (min-width: 769px) { /* PC */
    margin-top: .27rem;
  }
  @media (max-width: 768px) { /* SP */
    grid-template-rows: 0fr;
    padding: 0;
  }
}
/* 開いた2番目以降のグラーデションBOX */
.loan-sim-result__box[data-expanded="true"]
.loan-sim-result__box--gradient +
.loan-sim-result__box--gradient {
  @media (max-width: 768px) { /* SP */
    grid-template-rows: 1fr;
    margin-top: .20rem;
    padding: 2px;
  }
}
/* 最初のグラデーションBOX */
.loan-sim-result__box--gradient:has( + .loan-sim-result__box--gradient) {
  @media (max-width: 768px) { /* SP */
    grid-template-rows: auto 0fr;
    .loan-sim-result__inner  {
      border-radius: 0 0 .08rem .08rem;
    }
  }
}
/* 開かれた先頭のグラデーションBOX */
.loan-sim-result__box[data-expanded="true"]
.loan-sim-result__box--gradient:has( + .loan-sim-result__box--gradient) {
  @media (max-width: 768px) { /* SP */
    border-radius: 0 0 .08rem .08rem;
    grid-template-rows: auto 1fr;
  }
}



.loan-sim-result__box--gradient +
.loan-sim-result__box--gradient .loan-sim-result__inner {
  @media (min-width: 769px) { /* PC */
    border-radius: .08rem;
    overflow: hidden;
  }
  @media (max-width: 768px) { /* SP */
    border-radius: .08rem .08rem 0 0;
  }
}
.loan-sim-result__line--grad {
  display: block;
  height: 1px;
  background-image: linear-gradient(to right, #e60745 0%, #f7ad23 100%);
  background-color: blue;
  /*
  margin-bottom: 1.00rem;
  */
}
#loan-sim
.loan-sim-result__heading {
  width: 100%;
  font-weight: bold;
  color: #fff;
  @media (min-width: 769px) { /* PC */
    display: grid;
    place-items: center;
    font-size: .25rem;
    height: .75rem;
    cursor: default;
  }
  @media (max-width: 768px) { /* SP */
    display: flex;
    align-items: center;
    padding: 0 0 0 .19rem;
    font-size: .20rem;
    text-align: left;
    color: #fff;
    height: .60rem;
    &:before {
      content: "";
      display: block;
      width: .22rem;
      height: .22rem;
      background-image: url(../images/loan-sim/icons/toggle-result.svg);
      background-repeat: no-repeat;
      background-size: contain;
      margin-right: .10rem;
    }
  }
}
.loan-sim-result__inner {
  background-color: #fff;
  @media (min-width: 769px) { /* PC */
    border-radius: 0 0 .08rem .08rem;
  }
  @media (max-width: 768px) { /* SP */
    overflow: hidden;
    overflow-y: auto;
  }
}
.loan-sim-result__box--rate {
  padding: .10rem .43rem .10rem .38rem;
  display: flex;
  justify-content: space-between;
  @media (max-width: 768px) { /* SP */
    align-items: center;
  }
  span {
    font-weight: 500;
    font-size: .24rem;
    font-family: var(--Noto-Sans);
    color: #393939;
  }
  > span:first-child {
    @media (max-width: 768px) { /* SP */
      font-size: .18rem;
    }
  }
}
.loan-sim-result__heading--sub {
  background: #f4f4f4;
  font-family: var(--Noto-Sans);
  font-weight: bold;
  text-align: left;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    font-size: .22rem;
    padding: .13rem .32rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: 19px;
    padding: .09rem .29rem;
  }
  &.--center {
    text-align: center;
  }
}
.loan-sim-result__inner--sub {
  @media (min-width: 769px) { /* PC */
    padding: .10rem .25rem .20rem;
  }
  @media (max-width: 768px) { /* SP */
    padding: .06rem .22rem .19rem;
  }
}
.loan-sim-result__box--amount {
  text-align: right;
  &.--small {
    @media (max-width: 768px) { /* SP */
      translate: 0 -.02rem;
    }
  }
}
.loan-sim-result__amount {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  color: #e60745;
  margin-right: .06rem;
  @media (min-width: 769px) { /* PC */
    font-size: .46rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .36rem;
  }
}
.loan-sim-result__box--amount.--small
.loan-sim-result__amount {
  @media (min-width: 769px) { /* PC */
    font-size: .36rem;
    margin-right: .03rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .30rem;
    margin-right: .06rem;
  }
}
.loan-sim-result__suffix--amount {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    font-size: .24rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .18rem;
  }
}
.loan-sim-result__box--amount.--small
.loan-sim-result__suffix--amount {
  @media (min-width: 769px) { /* PC */
    font-size: .20rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .18rem;
  }
}
.loan-sim-result__box--note {
  position: relative;
  border-radius: .04rem;
  background: #fff4f7;
  font-family: var(--Noto-Sans);
  font-weight: 500;
  font-size: .15rem;
  line-height: .20rem;
  text-align: left;
  color: #393939;
  display: flex;
  align-items: center;
  padding: .10rem .15rem .12rem;
  gap: .07rem;
  &::before {
    content: "";
    display: block;
    position: absolute;
    width: .09rem;
    height: .07rem;
    top: -.07rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #fff4f7;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
}
.loan-sim-result__icon {
  width: .23rem;
  height: .20rem;
}
.loan-sim-result__text--note {
  flex: 1;
}
.loan-sim-result__heading--sub-sub {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    font-size: .15rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .14rem;
  }
}
.loan-sim-result__note {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  color: #393939;
  text-align: right;
  @media (min-width: 769px) { /* PC */
    font-size: .15rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .12rem;
    /* margin-top: .07rem; */
  }
}
.loan-sim-result__box--bonus {
  @media (max-width: 768px) { /* SP */
    display: grid;
  }
  .loan-sim-result__heading--sub-sub {
    grid-area: 1/1;
  }
  .loan-sim-result__box--amount {
    grid-area: 1/2;
  }
  .loan-sim-result__note {
    grid-area: 2/2;
  }
}
.loan-sim-result__icon--button {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  @media (min-width: 769px) { /* PC */
    right: 0.26rem;
    width: .28rem;
    height: .28rem;
  }
  @media (max-width: 768px) { /* SP */
    width: .14rem;
    height: .14rem;
    right: 0.07rem;
  }
}
.loan-sim-result__image--min-rate {
  position: absolute;
  aspect-ratio: 283/68;
  @media (min-width: 769px) { /* PC */
    top: -.130rem;
    width: 1.37rem;
  }
  @media (max-width: 768px) { /* SP */
    top: -.08rem;
    width: .9666rem;
  }
}
/* ------------------------------------------------------- range */
.loan-sim-range__box--button {
  position: relative;
}
.loan-sim-range__button {
  background: #ededed;
  border-radius: 100vmax;
  display: grid;
  place-items: center;
  @media (min-width: 769px) { /* PC */
    width: .34rem;
    height: .34rem;
  }
  @media (max-width: 768px) { /* SP */
    width: .24rem;
    height: .24rem;
  }
  &.--minus {
    background-image: url(../images/loan-sim/icons/minus.svg);
    background-repeat: no-repeat;
    background-position: center;
    @media (min-width: 769px) { /* PC */
      background-size: .12rem .12rem;
    }
    @media (max-width: 768px) { /* SP */
      background-size: .08rem .08rem;
    }
    & + .loan-sim-range__label--button {
      left: 0;
    }
  }
  &.--plus {
    background-image: url(../images/loan-sim/icons/plus.svg);
    background-repeat: no-repeat;
    background-position: center;
    @media (min-width: 769px) { /* PC */
      background-size: .12rem .12rem;
    }
    @media (max-width: 768px) { /* SP */
      background-size: .08rem .08rem;
    }
    & + .loan-sim-range__label--button {
      right: 0;
    }
  }
}
.loan-sim-range__label--button {
  position: absolute;
  white-space: nowrap;
  font-family: var(--Noto-Sans);
  font-weight: bold;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    font-size: .14rem;
    bottom: -.20rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .12rem;
    bottom: -.22rem;
  }
}
.loan-sim-range {
  display: flex;
  align-items: center;
  gap: .04rem;
}
.loan-sim-range__range {
  -webkit-appearance: none;
  border-radius: .09rem;
  @media (min-width: 769px) { /* PC */
    width: 4.02rem;
  }
  @media (max-width: 768px) { /* SP */
    width: 2.36rem;
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;

    width: .48rem;
    height: .29rem;
    border-radius: 2px;
    background: #e60345;
    translate: 0 -.055rem;
    background-image: url(../images/loan-sim/icons/lll.svg);
    background-repeat: no-repeat;
    background-position: center;
    @media (min-width: 769px) { /* PC */
      background-size: .16rem .13rem;
    }
    @media (max-width: 768px) { /* SP */
      background-size: .14rem .1rem;
    }
  }
  &::-moz-range-thumb {
    cursor: pointer;

    width: .48rem;
    height: .29rem;
    border-radius: 2px;
    border: none;
    background: #e60345;
    background-image: url(../images/loan-sim/icons/lll.svg);
    background-repeat: no-repeat;
    background-position: center;
    @media (min-width: 769px) { /* PC */
      background-size: .16rem .13rem;
    }
    @media (max-width: 768px) { /* SP */
      background-size: .14rem .1rem;
    }
  }
  &::-webkit-slider-runnable-track {
    height: .18rem;
    border-radius: .09rem;
    box-shadow: inset 0 0 .06rem rgba(0, 0, 0, 0.25);
  }
  &::-moz-range-track {
    height: .18rem;
    border-radius: .09rem;
  }
}
/* -------------------------------------------------------  */
.loan-sim__box--main {
  display: grid;
  justify-content: space-between;
  @media (min-width: 769px) { /* PC */
    grid-template-columns: auto auto;
    /* margin-top: .96rem; */
    margin-top: .10rem;
  }
  @media (max-width: 768px) { /* SP */
    grid-template-columns: auto;
    margin-top: .66rem;
  }
  &.--kyoiku-hensai {
    @media (min-width: 769px) { /* PC */
      margin-top: .24rem;
    }
    @media (max-width: 768px) { /* SP */
      margin-top: .18rem;
    }
  }
}
.loan-sim__tip--range {
  position: absolute;
  margin: 0 auto;
  border-radius: .04rem;
  background: #e50446;
  font-family: var(--Noto Sans);
  font-weight: bold;
  color: #fff;
  margin-inline: auto;
  @media (min-width: 769px) { /* PC */
    /*
    scale: .7;
    translate: -.8rem 0;
    */
    z-index: 2;
    top: .10rem;
    right: .10rem;
    width: fit-content;
    /*
    height: fit-content;
    */
    display: grid;
    place-items: center;
    font-size: .16rem;
    padding: .04rem .10rem .04rem .22rem;
  }
  @media (max-width: 768px) { /* SP */
    top: -.47rem;
    left: 0;
    right: 0;
    width: 100%;
    height: .33rem;
    font-size: .14rem;
    padding: .1rem 0 .1rem .1rem;
    display: flex;
    align-items: center;
  }
  &::before {
    content: '';
    position: absolute;
    background: #e50446;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    left: 0;
    right: 0;
    margin: 0 auto;
    @media (min-width: 769px) { /* PC */
      width: .13rem;
      height: .09rem;
      bottom: -.09rem;
    }
    @media (max-width: 768px) { /* SP */
      width: .09rem;
      height: .06rem;
      bottom: -.06rem;
    }
  }
}
.loan-sim__line--dashed {
  width: 100%;
  height: 2px;
  display: block;
  background-image: repeating-linear-gradient(
    to right,
    #ededed,
    #ededed .04rem,
    transparent .04rem,
    transparent .10rem
  );
  @media (min-width: 769px) { /* PC */
    margin-bottom: .25rem;
  }
  @media (max-width: 768px) { /* SP */
    margin-bottom: .16rem;
  }
  &.--rate {
    margin: .20rem 0 .08rem;
  }
}
.loan-sim__line--white {
  width: 100%;
  height: 2px;
  display: block;
  background: #fff;
}
.loan-sim__box--input {
  display: flex;
  align-items: center;
  gap: .06rem;
}
.loan-sim__input {
  border-radius: .04rem;
  background: #fff;
  border: 1px solid #c3c3c3;
  font-family: var(--Noto-Sans);
  font-weight: 500;
  text-align: right;
  color: #393939;
  padding: 0 .10rem;
  -moz-appearance: textfield;
  @media (min-width: 769px) { /* PC */
    width: 1.22rem;
    height: .55rem;
    font-size: .32rem;
  }
  @media (max-width: 768px) { /* SP */
    width: 1rem;
    height: .4rem;
    font-size: .28rem;
  }
  &.--short {
    @media (min-width: 769px) { /* PC */
      width: .61rem;
    }
    @media (max-width: 768px) { /* SP */
      width: .52rem;
      padding: 0 .09rem;
    }
  }
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}
.loan-sim__suffix--input {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  color: #393939;
  translate: 0 .05rem;
  @media (min-width: 769px) { /* PC */
    font-size: .20rem;
  }
  @media (max-width: 768px) { /* SP */ 
    font-size: .15rem;
  }
}
/* ------------------------------------------------------- point */
.loan-sim-point {
  border-radius: .06rem;
  background: #fff;
  border: 1px solid #ededed;
  @media (min-width: 769px) { /* PC */
    width: 7.00rem;
    padding: .20rem;
  }
  @media (max-width: 768px) { /* SP */
    padding: .15rem;
  }
}
.loan-sim-point__heading {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  font-size: .14rem;
  color: #393939;
  display: flex;
  align-items: center;
  gap: .03rem;
  @media (min-width: 769px) { /* PC */
    margin-bottom: .08rem;
  }
  @media (max-width: 768px) { /* SP */
    margin-bottom: .1rem;
  }
}
.loan-sim-point__icon {
  width: .10rem;
  height: .14rem;
}
.loan-sim-point__list {
  display: flex;
  flex-direction: column;
  @media (min-width: 769px) { /* PC */
    gap: .07rem;
  }
  @media (max-width: 768px) { /* SP */
    gap: .08rem;
  }
}
.loan-sim-point__item {
  list-style-type: none;
}
.loan-sim-point__item, .loan-sim-point__text {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  color: #393939;
  font-feature-settings: "palt" 0;
  @media (min-width: 769px) { /* PC */
    font-size: .14rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .12rem;
  }
}
.loan-sim-point__text + .loan-sim-point__heading {
  margin-top: .15rem;
}
/* ------------------------------------------------------- form */
.loan-sim__box--left {
  grid-column: 1;
  grid-row: 1 /span 2;
}
.loan-sim-form__box {
  position: relative;
  background: #fff;
  border: 2px solid #ededed;
  @media (min-width: 769px) { /* PC */
    width: 8.00rem;
    border-radius: .10rem;
  }
  @media (max-width: 768px) { /* SP */
    width: 100%;
    border-radius: .05rem;
  }
}
#loan-sim
.loan-sim-form__heading {
  background: #ededed;
  font-family: var(--Noto-Sans);
  font-weight: bold;
  color: #393939;
  line-height: 1;
  @media (min-width: 769px) { /* PC */
    min-height: .64rem;
    padding: .20rem .50rem;
    font-size: .24rem;
  }
  @media (max-width: 768px) { /* SP */
    min-height: .4rem;
    padding: .10rem .20rem;
    font-size: .19rem;
  }
}
.loan-sim-form__inner {
  @media (min-width: 769px) { /* PC */
    padding: .22rem .50rem .30rem;
  }
  @media (max-width: 768px) { /* SP */
    padding: .16rem .20rem .20rem;
  }
}
.loan-sim-form__row {
  @media (min-width: 769px) { /* PC */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: .26rem;
  }
  @media (max-width: 768px) { /* SP */
    display: flex;
    flex-direction: column-reverse;
    gap: .16rem;
    padding-bottom: .38rem;
  }
  &.--jutaku-kariire,
  &.--kyoiku-kariire {
    padding-bottom: 0;
  }
  &:not(:has(.loan-sim-range__label--button)) {
    @media (min-width: 769px) { /* PC */
      align-items: center;
    }
  }
}
.loan-sim-form__heading--sub {
  position: relative;
  font-family: var(--Noto-Sans);
  font-weight: 500;
  text-align: left;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    font-size: .16rem;
    margin-bottom: .08rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .14rem;
    margin-bottom: .06rem;
  }
  &::before {
    @media (max-width: 768px) { /* SP */
      position: absolute;
      top: -.1rem;
      left: 50%;
      transform: translateX(-50%);
      content: "";
      display: block;
      width: .12rem;
      height: .1rem;
      background: #f4f4f4;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
  }
}
.loan-sim-form__label--any {
  width: fit-content;
  padding: .04rem .07rem;
  border-radius: .02rem;
  background: #393939;
  color: var(--unnamed-color-f4f4f4);
  color: #F4F4F4;
  font-size: .12rem;
  margin-right: .06rem;
}
.loan-sim-form__note {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  text-align: left;
  color: #e50446;
  @media (min-width: 769px) { /* PC */
    font-size: .14rem;
    margin-bottom: .14rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .11rem;
    margin-bottom: .12rem;
  }
}
.loan-sim-form__note--under {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  text-align: left;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    font-size: .16rem;
    margin-top: .15rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .13rem;
    margin-top: .16rem;
  }
}
.loan-sim-form__link--under {
  color: #e60345;
  display: inline-flex;
  align-items: center;
}
.loan-sim-form__icon--under {
  @media (min-width: 769px) { /* PC */
    width: .07rem;
    height: .10rem;
    margin-left: .05rem;
  }
  @media (max-width: 768px) { /* SP */
    width: .05rem;
    height: .08rem;
    margin-left: .04rem;
    margin-top: .04rem;
  }
}
/* ------------------------------------------------------- rate */
.loan-sim-rate {
}
.loan-sim-rate__box--radio {
  align-items: center;
  cursor: pointer;
  margin-bottom: .02rem;
  @media (min-width: 769px) { /* PC */
    display: flex;
    padding: .12rem .20rem .12rem .11rem;
    border-radius: .10rem;
  }
  @media (max-width: 768px) { /* SP */
    display: grid;
    grid-template-columns: .2rem 1fr;
    padding: 0 .1rem;
    border-radius: .05rem;
  }
  &.--pink {
    background: #fff4f7;
    @media (min-width: 769px) { /* PC */
      width: 7.01rem;
    }
    @media (max-width: 768px) { /* SP */
      justify-content: start;
      width: 2.9rem;
      margin-bottom: .2rem;
      padding: .1rem;
    }
  }
  &.--gray {
    background: #f4f4f4;
    &:has(.loan-sim-rate__radio:checked) {
      background: #fff4f7;
    }
  }
  &.--low {
    padding: .07rem 0;
    &.--last {
      margin-bottom: .13rem;
    }
  }
}
.loan-sim-rate__balloon {
  position: relative;
  width: fit-content;
  height: .31rem;
  border-radius: .155rem;
  background: #e50446;
  font-family: var(--Noto-Sans);
  font-weight: bold;
  font-size: .16rem;
  text-align: left;
  color: #fff;
  display: grid;
  place-items: center;
  @media (min-width: 769px) { /* PC */
    padding: 0 .09rem;
    margin: 0 .056rem 0 .06rem;
  }
  @media (max-width: 768px) { /* SP */
    grid-area: 1 / 2;
    width: calc(100% - .08rem);
    margin-left: .08rem;
  }
  &::after {
    position: absolute;
    margin: auto 0;
    content: "";
    display: block;
    width: .04rem;
    height: .04rem;
    background: #e50446;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    @media (min-width: 769px) { /* PC */
      right: -.03rem;
      top: .05rem;
      bottom: 0;
      rotate: 101deg;
    }
    @media (max-width: 768px) { /* SP */
      bottom: -.04rem;
      rotate: 180deg;
    }
  }
}
.loan-sim-rate__box--text {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  line-height: 1;
}
.loan-sim-rate__box--radio.--pink {
  .loan-sim-rate__box--text {
    @media (max-width: 768px) { /* SP */
      grid-area: 2 / 2;
      padding: .1rem 0;
    }
  }    
}
#loan-sim
.loan-sim-rate__text {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  color: #393939;
  translate: 0 -.02rem;
  @media (min-width: 769px) { /* PC */
    font-size: .18rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .16rem;
  }
}
.loan-sim-rate__rate {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  text-align: left;
  color: #e60345;
  @media (min-width: 769px) { /* PC */
    font-size: .20rem;
    margin: 0 0 0 .08rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .18rem;
    margin: 0 0 0 .1rem;
  }
}
.loan-sim-rate__digit {
  @media (min-width: 769px) { /* PC */
    font-size: .36rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .32rem;
  }
}
.loan-sim-rate__box--link {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  font-size: .15rem;
  text-align: left;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    margin-left: auto;
  }
}
.loan-sim-rate__box--radio.--pink {
  .loan-sim-rate__box--link {
    @media (max-width: 768px) { /* SP */
      grid-area: 3 / 2;
    }
  }
}
#loan-sim
.loan-sim-rate__link {
  color: #e60345;
  text-decoration: underline;
  text-underline-offset: .02rem;
}
.loan-sim-rate__radio {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.loan-sim-rate__mark--radio {
  background: #fff;
  border: 1px solid #c3c3c3;
  filter: drop-shadow(0px 2px .06rem rgba(0, 0, 0, 0.16));
  border-radius: 100vmax;
  display: grid;
  place-items: center;
  @media (min-width: 769px) { /* PC */
    width: .23rem;
    height: .23rem;
  }
  @media (max-width: 768px) { /* SP */
    width: .2rem;
    height: .2rem;
  }
}
.loan-sim-rate__radio:not(checked) + .loan-sim-rate__mark--radio {
}
.loan-sim-rate__radio:checked + .loan-sim-rate__mark--radio::after {
  content: "";
  display: block;
  background: #e60345;
  border-radius: 100vmax;
  @media (min-width: 769px) { /* PC */
    width: .15rem;
    height: .15rem;
  }
  @media (max-width: 768px) { /* SP */
    width: .12rem;
    height: .12rem;
  }
}

.loan-sim-rate__mark--radio + .loan-sim-rate__text {
  margin-left: .10rem;
}
.loan-sim-rate__mark--radio + .loan-sim-rate__text:not(.--col1,.--fit-content) {
  flex: 1;
}
.loan-sim__box--input.--rate {
  @media (min-width: 769px) { /* PC */
    margin-left: .20rem;
    padding-bottom: .14rem;
  }
  @media (max-width: 768px) { /* SP */
    margin-left: .08rem;
    padding-top: .08rem;
    grid-area: 2 / 2;
  }
}
.loan-sim-rate__text {
  font-family: var(--Noto-Sans);
  font-weight: 500;
  font-size: .18rem;
  text-align: left;
  color: #393939;
  &.--col1 {
    width: 1.30rem;
  }
}
/* ------------------------------------------------------- */
.loan-sim__button--grad {
  position: relative;
  display: grid;
  place-items: center;
  height: .70rem;
  border-radius: .08rem;
  /*
  background: linear-gradient(to left, #f7ae23 0%, #eb445e 49.96%, #e50044 100%);
  */
  font-family: var(--Noto-Sans);
  font-weight: bold;
  color: #fff;
  @media (min-width: 769px) { /* PC */
    width: 4.00rem;
    margin: .50rem auto .60rem;
    font-size: .20rem;
  }
  @media (max-width: 768px) { /* SP */
    width: 100%;
    margin: .30rem auto .50rem;
    font-size: .17rem;
  }
  .icon {
    position: absolute;
    content: "";
    display: block;
    width: .08rem;
    height: .112rem;
    background: #fff;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    right: .20rem;
    top: 0;
    bottom: 0;
    pointer-events: none;
    margin: auto 0;
  }
}
/* ------------------------------------------------------- contact */
.loan-sim-contact__box {
  background: #f4f4f4;
  border: 1px solid #ededed;
  border-radius: .04rem;
  @media (min-width: 769px) { /* PC */
    width: 12.00rem;
    padding: .40rem 0;
    margin-bottom: .60rem;
  }
  @media (max-width: 768px) { /* SP */
    padding: .30rem 0;
    margin-bottom: .30rem;
  }
}
#loan-sim
.loan-sim-contact__heading {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  text-align: center;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    font-size: .24rem;
    margin-bottom: .30rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .18rem;
    margin-bottom: .20rem;
  }
}
.loan-sim-contact__box--button {
  display: flex;
  justify-content: center;
  align-items: center;
  @media (min-width: 769px) { /* PC */
    gap: .40rem;
  }
  @media (max-width: 768px) { /* SP */
    flex-direction: column;
    gap: .18rem;
  }
}
#loan-sim
.loan-sim-contact__button {
  border-radius: 100vmax;
  background: #fff;
  border: 1px solid #e50446;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Hiragino Kaku Gothic ProN";
  font-weight: bold;
  text-align: left;
  color: #393939;
  @media (min-width: 769px) { /* PC */
    width: 4.00rem;
    height: .69rem;
    font-size: .22rem;
    gap: .10rem;
  }
  @media (max-width: 768px) { /* SP */
    width: 2.40rem;
    height: .48rem;
    font-size: .15rem;
    gap: .04rem;
  }
  @media (hover:hover) {
    transition: .5s ease;
    .loan-sim-contact__icon {
      /*
      transition: filter .5s ease;
      */
    }
    &:hover {
      background-color: #e50446;
      color: #fff;
      .loan-sim-contact__icon {
        filter: brightness(0) invert(1);
      }
    }
  }
}
.loan-sim-contact__icon {
  &.--calendar {
    @media (min-width: 769px) { /* PC */
      width: .2624rem;
      height: .25rem;
    }
    @media (max-width: 768px) { /* SP */
      width: .168rem;
      height: .16rem;
    }
  }
  &.--spot {
    @media (min-width: 769px) { /* PC */
      width: .1729rem;
      height: .25rem;
    }
    @media (max-width: 768px) { /* SP */
      width: .1038rem;
      height: .15rem;
    }
  }
}
/* ------------------------------------------------------- attention */
.loan-sim-attention__box {
  background: #fff4f7;
  border: 1px solid #e50446;
  border-radius: .04rem;
  @media (min-width: 769px) { /* PC */
    width: 12.00rem;
    padding: .40rem;
  }
  @media (max-width: 768px) { /* SP */
    width: 100%;
    padding: .20rem;
  }
}
#loan-sim
.loan-sim-attention__heading {
  display: flex;
  align-items: center;
  @media (min-width: 769px) { /* PC */
    margin-bottom: .22rem;
    gap: .06rem;
  }
  @media (max-width: 768px) { /* SP */
    margin-bottom: .14rem;
    gap: .01rem;
  }
  img {
    @media (min-width: 769px) { /* PC */
      width: .23rem;
      height: .20rem;
    }
    @media (max-width: 768px) { /* SP */
      width: .22rem;
      height: .18rem;
    }
  }
  span {
    font-family: var(--Noto-Sans);
    font-weight: bold;
    color: #e50446;
    @media (min-width: 769px) { /* PC */
      font-size: .20rem;
    }
    @media (max-width: 768px) { /* SP */
      font-size: .18rem;
    }
  }
}
.loan-sim-attention__list {
  display: flex;
  flex-direction: column;
  @media (min-width: 769px) { /* PC */
    gap: .16rem;
  }
  @media (max-width: 768px) { /* SP */
    gap: .14rem;
  }
  li {
    font-family: var(--Noto-Sans);
    font-weight: 500;
    color: #393939;
    @media (min-width: 769px) { /* PC */
      font-size: .16rem;
    }
    @media (max-width: 768px) { /* SP */
      font-size: .13rem;
      padding-left: .1rem;
    }
    &::before {
      content: "";
      display: inline-block;
      width: .06rem;
      height: .06rem;
      background: #e50446;
      margin-right: .05rem;
      border-radius: 100vmax;
      translate: 0 -.02rem;
      @media (max-width: 768px) { /* SP */
        margin-left: -.1rem;
      }
    }
  }
  a {
    color: #e50446;
    text-decoration: underline;
    text-underline-offset: .04rem;
  }
}
/* ------------------------------------------------------- accordion */
.loan-sim-accordion__list--box {
  display: flex;
  flex-direction: column;
  gap: .24rem;
  .loan-sim-accordion__box {
    padding: 0;
  }
}
.loan-sim-accordion__box {
  border-radius: .10rem;
  /* padding: .16rem 0; */
  display: grid;
  grid-template-rows: .67rem 0fr;
  transition: grid-template-rows 0.3s ease;
  &[data-expanded="true"] {
    grid-template-rows: .67rem 1fr;
  }
  &[data-expanded="false"] {
  }
  .loan-sim__line--white {
    margin: .20rem 0;
  }
  &.--gray {
    background: #f4f4f4;
    grid-template-rows: .54rem 0fr;
    &[data-expanded="true"] {
      grid-template-rows: .54rem 1fr;
      padding-bottom: .16rem;
    }
  }
  &.--split {
  }
}
.loan-sim-accordion__heading {
  font-family: var(--Noto-Sans);
  font-weight: 600;
  font-size: .18rem;
  text-align: left;
  color: #e50446;
}
.loan-sim-accordion__panel {
  overflow: hidden;
  .loan-sim-form__box {
    @media (min-width: 769px) { /* PC */
      margin-top: .10rem;
    }
    @media (max-width: 768px) { /* SP */
      margin-top: .86rem;
    }
  }
}
.loan-sim-accordion__inner {
  display: flex;
  flex-direction: column;
  gap: .17rem;
  @media (min-width: 769px) { /* PC */
    padding-left: .44rem;
    padding-right: .10rem;
  }
  @media (max-width: 768px) { /* SP */
    padding-left: .30rem;
    padding-right: .10rem;
  }
  .loan-sim-rate__box--radio {
    padding: 0;
    @media (min-width: 769px) { /* PC */
    }
    @media (max-width: 768px) { /* SP */
      display: flex;
    }
  }
}
.loan-sim-accordion__box--sub {
  background: #fff;
  padding: .10rem .18rem;
  margin: .20rem .11rem 0;
  .loan-sim-rate__box--text {
    @media (max-width: 768px) { /* SP */
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      .loan-sim-rate__rate {
        align-self: flex-end;
      }
    }
  }
  &.--up {
    margin: 0 .11rem .20rem;
  }
}
/* ------------------------------------------------------- error */
.loan-sim-error__box {
  width: 100%;
  background: #fff4f7;
  border: 1px solid #e50446;
  border-radius: .04rem;
  display: flex;
  padding: .09rem .15rem;
  margin-bottom: .20rem;
  @media (min-width: 769px) { /* PC */
    gap: .05rem;
  }
  @media (max-width: 768px) { /* SP */
    gap: .01rem;
  }
}
.loan-sim-error__box.--rate {
  @media (min-width: 769px) { /* PC */
    margin-top: .20rem;
    margin-bottom: 0;
  }
  @media (max-width: 768px) { /* SP */
  }
}
.loan-sim-error__icon {
  @media (min-width: 769px) { /* PC */
    width: .23rem;
    height: .20rem;
  }
  @media (max-width: 768px) { /* SP */
    width: .20rem;
    height: .17rem;
  }
}
.loan-sim-error__text {
  font-family: var(--Noto-Sans);
  font-weight: bold;
  color: #e50446;
  flex: 1;
  @media (min-width: 769px) { /* PC */
    font-size: .16rem;
  }
  @media (max-width: 768px) { /* SP */
    font-size: .14rem;
    line-height: .18rem;
  }
}
/* ------------------------------------------------------- */
#__________snippet {
  font-family: var(--Noto-Sans);
}
/* debug */
/*
#loan-sim
a:not([href]),
#loan-sim
a[href=""] {
  box-shadow: 0 0 .10rem .05rem rgba(255, 0, 0, 0.7);
  animation: pulse-shadow 1s infinite;
  z-index: 9999;
}
*/
@keyframes pulse-shadow {
  0% {
    box-shadow: 0 0 .05rem 2px rgba(255, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 .15rem .06rem rgba(255, 0, 0, 0.9);
  }
  100% {
    box-shadow: 0 0 .05rem 2px rgba(255, 0, 0, 0.4);
  }
}
