@charset "utf-8";
/* CSS Document */

/* ≥769px：使用 475px 时的值 */
@media (min-width: 769px) {
  /* 
  :root{
    --fs-min: 24px;
    --fs-max: 48px;
    --w-min: 375px;
    --w-max: 750px;
  }
  @media (min-width: 769px) {
    .target {font-size: calc(var(--fs-min) + (var(--fs-max) - var(--fs-min)) * ((475px - var(--w-min)) / (var(--w-max) - var(--w-min))));}
  }
  */
  :root {
    --size-48: calc(48px + (56 - 48) * ((475px - 375px) / (750 - 375)));
    --size-40: calc(40px + (48 - 40) * ((475px - 375px) / (750 - 375)));
    --size-36: calc(36px + (44 - 36) * ((475px - 375px) / (750 - 375)));
    --size-32: calc(32px + (40 - 32) * ((475px - 375px) / (750 - 375)));
    --size-28: calc(28px + (36 - 28) * ((475px - 375px) / (750 - 375)));
    --size-24: calc(24px + (32 - 24) * ((475px - 375px) / (750 - 375)));
    --size-20: calc(20px + (28 - 20) * ((475px - 375px) / (750 - 375)));
    --size-16: calc(16px + (24 - 16) * ((475px - 375px) / (750 - 375)));
    --size-14: calc(14px + (20 - 14) * ((475px - 375px) / (750 - 375))); /* 原始值为14，最大值为20 */
  }
}

header, footer, main{width: 475px;margin: 0 auto;background-color: #fff;}
@media (max-width: 768px) {header, footer, main{width: 100%;}}

/* ===== Fast View ===== */
.fv__container{padding: 0;}

/* ===== Title ===== */
.title{
    font-size: var(--size-28);
    text-align: center;
    margin-bottom: var(--spacing-32);
}
.title__tag{
    display: inline-block;
    padding: 8px 16px 4px;
    margin-bottom: var(--spacing-12);
    border-radius: 300px;
    font-size: var(--size-14);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color-02);
    background-color: var(--neutral-color-6);
    position: relative;
}
.title__tag::before{
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--neutral-color-6);
}

.title__type-1{
    color: var(--neutral-color-6);
}
.title__type-1 .title__stress{
    color: var(--secondary-color-02);
}

.title__type-2 .title__tag{
    color: var(--neutral-color-6);
    background-color: var(--primary-color-02);
}
.title__type-2 .title__tag::before{
    border-top: 8px solid var(--primary-color-02);
}
.title__type-2 .title__stress{
    color: var(--secondary-color-01);
}


/* ===== CTA ===== */
.cta{
    padding-top: 0;
    background-color: #fef9f2;
}
.cta__title__container{
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-32);
    background-color: #fff;
}
.cta__title{
    margin-bottom: 0;
}
.cta__title > h2{
    font-size: var(--size-20);
}
.cta__title > h2 > span{
    color: var(--primary-color-02);
}
.cta-btn__inner{
    padding: var(--spacing-8);
    border-radius: var(--spacing-12); 
    display: grid;
    gap: var(--spacing-16);
    background-color: var(--neutral-color-6);
    box-shadow: var(--theme-shadow);
}
.cta-btn__inner--last{
    padding-top: var(--spacing-16);
}
.cta-btn .note{
    margin-top: var(--spacing-8);
}
.cta-btn .note > span{
    color: var(--secondary-color-01);
}
.cta-btn__link{
    display: block;
}
@media (max-width: 480px) {
    .cta__title > h2{font-size: 1.25rem;letter-spacing: -1px;}
    .cta .note{font-size: 12px;}
}
@media (max-width: 400px) {.cta__title > h2{font-size: 1.15rem;}}
@media (max-width: 375px) {
    .cta__title > h2{font-size: 1.05rem;}
    .cta .note{letter-spacing: -1.5px;}
}
@media (max-width: 340px) {.cta__title > h2{font-size: 0.95rem;}}

/* ===== Loan sharks ===== */
.loan-sharks{
    background-image: url("/sakibarai/assets/images/back.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
.loan-sharks__title > h2{
    font-size: var(--size-32);
    color: var(--neutral-color-6);
}
.loan-sharks__title span{
    color: var(--secondary-color-02);
}
@media only screen and (max-width: 480px) {
    .loan-sharks__title > h2{
        font-size: var(--size-24);
    }
}

/* ===== Method ===== */
.method{
    padding: 0;
}
.method__container{
    padding: 0;
    background-color: var(--neutral-color-6);
}
.method__container-first{
    background-color: var(--secondary-color-01);
}
.method__photo-top{
    position: relative;
    z-index: 1;
}
.method__photo-check{
    margin-top: -24px;
    padding: 0 var(--spacing-16) var(--spacing-16);
}
.method__photo-arrow{
    margin-bottom: var(--spacing-24);
}
.method__title{
    padding: 0 var(--spacing-16);
}
.method__title h3{
    color: var(--secondary-color-01);
}

/* ===== Case ===== */
.case{
    padding-bottom: 0;
    background-image: url("/sakibarai/assets/images/case-back.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
.case__content{
    display: grid;
    gap: var(--spacing-24);
}
.case__card-text{
    padding: 0 var(--spacing-8) var(--spacing-16);
    border-radius: 0 0 var(--spacing-8) var(--spacing-8);
    background-color: #fff;   
}
.case__card-text > p{
    padding: var(--spacing-8);
    background-color: var(--secondary-color-03);
}
.case__card-text span{
    color: var(--secondary-color-01);
}
.case__container{
    padding: 0;
}
.case__text{
    display: grid;
    gap: var(--spacing-16);
    text-align: center;
    padding: var(--spacing-24) var(--spacing-16);
    background-color: #fff;
}
.case__text > h3,
.case__text span{
    color: var(--secondary-color-01);
}
.case__text > h3{
    font-size: var(--size-40);
}

/* ===== Worry ===== */
.worry{
    padding: 0;
}
.worry__container{
    padding: 0;
}
.worry__card{
    padding: 0 var(--spacing-16) var(--spacing-40);
    background-color: var(--primary-color-02);
}
.worry__card-text{
    display: grid;
    gap: var(--spacing-16);
    padding: var(--spacing-16);
    border-radius: var(--spacing-8);
    background-color: #fff;
}
.worry__card-text > h5{
    text-align: center;
}
.worry__card-text > h5 > span{
    color: var(--secondary-color-01);
}
.worry__card-text > p > span{
    color: var(--secondary-color-03);
    background-color: var(--secondary-color-01);
}

/* ===== Reasons ===== */
.reasons{
    background-color: var(--primary-color-03);
}
.reasons .title__stress{
    letter-spacing: -1px;
}
.reasons__content{
    display: grid;
    gap: var(--spacing-64);
    padding-top: var(--spacing-40);
}
.reasons__card{
    position: relative;
    background-color: #fff;
    border-radius: var(--spacing-8);
    padding: var(--spacing-40) var(--spacing-16) var(--spacing-16);
    display: grid;
    gap: var(--spacing-16);
}
.reasons__card-tag{
    width: 16.4%;
    position: absolute;
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
}
.reasons__card-subtitle{
    text-align: center;
    color: var(--primary-color-02);
}
.reasons__card-subtitle > span,
.reasons__card-text > span{
    color: var(--secondary-color-01); 
}
@media only screen and (max-width: 576px) {
    .reasons__card-tag{
        top: -24px;
    }
}
@media only screen and (max-width: 375px) {
    .reasons h2,
    .reasons .title__stress{
        letter-spacing: -2.5px !important;
    }
    .reasons h2 .u-font-size--middle{
        font-size: 100%;
    }
}

/* ===== Step ===== */
.step{
    background-image:
    url("/sakibarai/assets/images/step-back.webp"),
    linear-gradient(120deg, rgba(238, 133, 13, 1), rgba(247, 149, 37, 0.8));
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    background-size: 100% auto;
    background-position: center top;
}

/* ===== cost ===== */
.cost{
    background-color: var(--neutral-color-6);
}
.row-1__column-2{
    color: var(--secondary-color-01);
}
.row-2__column-2{
    text-align: left;
    padding-left: var(--spacing-16) !important;
}

/* ===== access ===== */
.access{
    background-color: var(--neutral-color-6);
}
.access td{
    text-align: left;
}
.access iframe{
    border-radius: var(--spacing-8);
}

/* ===== profile ===== */
.profile{
    padding-bottom: 0;
    background-image: url("/sakibarai/assets/images/back.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}
.profile__card{
    background-color: var(--primary-color-02);
}
.profile__card-text{
    display: grid;
    gap: var(--spacing-16);
    padding: var(--spacing-24) var(--spacing-16);
    border-radius: var(--spacing-8);
    background-color: #fff;
}
.profile__card-text > h5{
    text-align: center;
}
.profile__card-text > h5 > span,
.profile__card-text > p > span{
    color: var(--secondary-color-01);
}
.profile__photo{
    margin-top: -24px;
}

/* ===== faq ===== */
.faq{
    background-color: var(--neutral-color-5);
}