/* Top Tittle */

.c_top-ttl1 {
    font-size: 40px;
    text-align: center;
    color: #333;
    line-height: 1.5;
    padding:50px 0;
    font-weight: bold;
}

    .c_top-ttl1 .highlight {
    color: var(--color-accent3);
    font-size: 56px;
}

.c_top-ttl1 .highlight-reason {
    color: var(--color-accent3);
    font-size: 56px;
    margin-left: 5px;
}

.c_top-ttl1 .highlight-reason small {
    font-size: 40px;
}

.c_top-ttl1 .yellow-highlight {
    background: linear-gradient(180deg, transparent 60%, yellow 60%);
}

/* Top Tittle */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* CTA Start */
.c_top-cta {
    text-align: center;
}

.c_top-cta p {
    line-height: 2;
}

.c_top-cta .color-pink {
    color: var(--color-accent1);
    font-weight: bold;
}

.c_top-cta--ttl {
    font-weight: bold;
    font-size: 28px;
}

.c_top-cta--ttl span {
    color: var(--color-green);
}

.c_top-cta--ttl small {
    font-size: 22px;
}

.c_top-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent1);
    color: white;
    padding: 20px;
    text-decoration: none;
    border-radius: 10px;
    font-family: var(--font-noto-sans);
    font-size: 28px;
    font-weight: bold;
    position: relative;
    box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3) inset;
    height: 96px;
    /* width: 100%;
    max-width: 560px; */
    width: 560px;
    max-width: 100%;
    text-align: center;
    margin: 15px 0;
}

.c_top-cta-btn:hover {
    opacity: 0.9;
}

.c_top-cta-btn .text {
    display: flex;
    align-items: center;
    font-size: 36px;
}

.c_top-cta-btn strong {
    color: var(--color-accent4);
    line-height: 100%;
    font-size: 64px;
}

.c_top-cta-btn b {
    font-size: 50px;
}

.c_top-cta-btn small {
    font-size: 32px;
}

.c_top-cta-btn .vertical-text {
    font-size: 14px;
    writing-mode: vertical-rl;
    margin-left: 5px;
    margin-right: 5px;
}

.c_top-cta-btn i {
    margin-left: 10px;
    font-size: 40px;
}

.c_top-cta-btn:hover {
    background-color: #e94b8d;
}

/* CTA Button 1 */

.c_top-cta-btn1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent1);
    color: white;
    padding: 20px;
    text-decoration: none;
    border-radius: 4px;
    font-family: var(--font-noto-sans);
    font-size: 20px;
    font-weight: bold;
    position: relative;
    box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3) inset;
    height: 64px;
    width: 100%;
    max-width: 288px;
    text-align: center;
}
.c_top-cta-btn1:hover {
    opacity: 0.8;
}

.c_top-cta-btn1 strong {
    color: var(--color-accent4);
}

.c_top-cta-btn1 i {
    margin-left: 15px;
}

/* CTA End */

/* CTA btn 2 */

.c_top-cta-btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent1);
    color: white;
    padding: 20px;
    text-decoration: none;
    border-radius: 10px;
    font-family: var(--font-noto-sans);
    font-size: 16px;
    font-weight: bold;
    position: relative;
    box-shadow: 0px -4px 0px rgba(0, 0, 0, 0.3) inset;
    height: 96px;
    /* width: 100%;
    max-width: 560px; */
    width: 560px;
    max-width: 100%;
    text-align: center;
    margin: 15px 0;
}

.c_top-cta-btn2:hover {
    opacity: 0.9;
}

.c_top-cta-btn2 .shogetsu {
    writing-mode: vertical-rl;
    font-size: 18px;
}
.c_top-cta-btn2 .text {
    display: flex;
    align-items:baseline;
    font-size: 36px;
    height: 94px;
}

.c_top-cta-btn2 strong {
    color: var(--color-accent4);
    line-height: 100%;
    font-size: 80px;
    font-family: var(--font-roboto);
}

.c_top-cta-btn2 b {
    font-size: 16px;
}

.c_top-cta-btn2 small {
    font-size: 40px;
}

.c_top-cta-btn2 .vertical-text {
    font-size: 14px;
    writing-mode: vertical-rl;
    margin-left: 5px;
    margin-right: 5px;
}

.c_top-cta-btn2 i {
    margin-left: 15px;
    font-size: 40px;
}

.c_top-cta-btn2:hover {
    background-color: #e94b8d;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Section Tittle */

.c_section-ttl {
    background: var(--color-accent2);
    padding: 0 40px;
    min-height: 104px;
    color: var(--color-white);
    text-align: center;
    font-size: 32px;
    font-weight: normal;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 100%;
    align-content: center;
    align-items: baseline;
}
.c_section-ttl span {display: block;font-family: var(--font-allura);font-size: 32px;line-height: 1;font-weight: normal;width: 100%;}
.c_section-ttl small {font-size: 24px;}


/* Responsive */

@media screen and (max-width:990px) {
.c_top-cta-btn {
        padding: 20px 10px;
        /* max-width: 420px; */
        max-width: 480px;
    }

    .c_top-cta-btn .text {
        font-size: 28px;
    }

    .c_top-cta-btn strong {
        font-size: 50px;
    }

    .c_top-cta-btn small {
        font-size: 24px;
    }

    .c_top-cta-btn b {
        font-size: 38px;
    }

    .c_top-cta-btn1 {
        max-width: 100%;
    }

    .c_top-cta-btn1 .text {
        font-size: 16px;
    }

    .c_top-cta-btn1 i {
        margin-left: 8px;
    }

    .c_top-ttl1 .highlight {
        font-size: 40px;
    }

    .c_top-ttl1 {
        font-size: 24px;
    }

    .c_top-ttl1 .highlight-reason {
        font-size: 40px;
    }

    .c_top-ttl1 .highlight-reason small {
        font-size: 24px;
    }

    .c_top-ttl1 .highlight {
        font-size: 40px;
    }

    .c_top-ttl1 {
        font-size: 24px;
    }

    .c_top-ttl1 .highlight-reason {
        font-size: 40px;
    }

    .c_top-ttl1 .highlight-reason small {
        font-size: 24px;
    }

    .c_section-ttl {
        font-size: 24px;
    }

    .c_section-ttl small {
        font-size: 16px;
    }

    .c_section-ttl span {
        font-size: 24px;
    }


    .c_top-cta-btn2 {
        padding: 20px 10px;
        width: 480px;
        max-width: 100%;
    }

    .c_top-cta-btn2 .text {
        font-size: 28px;
    }

    .c_top-cta-btn2 strong {
        font-size: 50px;
    }

    .c_top-cta-btn2 small {
        font-size: 24px;
    }

    .c_top-cta-btn2 i {
        margin-left: 8px;
    }

}

@media screen and (max-width:540px) {
    .c_top-cta--ttl {
        font-size: 16px;
    }
    
    .c_top-cta--ttl small {
        font-size: 12px;
    }
    .c_top-cta-btn .text {
        font-size: 16px;
    }

    .c_top-cta-btn strong {
        font-size: 28px;
    }

    .c_top-cta-btn small {
        font-size: 13px;
    }

    .c_top-cta-btn b {
        font-size: 22px;
    }

    .c_top-cta-btn {
        padding: 19px 5px;
        width: 267px;
        max-width: 100%;
    }

    .c_top-cta-btn i {
        margin-left: 5px;
        font-size: 24px;
    }

    .c_top-cta-btn {
        height: 64px;
    }

    .c_top-cta p {
        font-size: 12px;
    }
    .c_top-ttl1 {
        font-size: 16px;
    }

    .c_top-ttl1 .highlight {
        font-size: 24px;
    }

    .c_top-ttl1 .highlight-reason {
        font-size: 24px;
    }

    .c_top-ttl1 .highlight-reason small {
        font-size: 16px;
    }

    .c_top-ttl1 {
        padding: 40px 0;
    }

    .c_top-cta {
        padding: 40px 0;
    }

    .c_top-ttl1 {
        padding: 40px 0 45px;
    }

    /* Button 3 */

    .c_top-cta-btn2 .shogetsu {
        font-size: 12px;
    }

    .c_top-cta-btn2 .text {
        font-size: 18px;
    }

    .c_top-cta-btn2 strong {
        font-size: 48px;
    }

    .c_top-cta-btn2 small {
        font-size: 20px;
    }

    .c_top-cta-btn2 b {
        font-size: 10px;
    }

    .c_top-cta-btn2 {
        padding: 19px 5px;
        width: 267px;
        max-width: 100%;
    }

    .c_top-cta-btn2 i {
        margin-left: 5px;
        font-size: 24px;
    }

    .c_top-cta-btn2 {
        height: 64px;
    }

}