@charset "UTF-8";

/* /life-insurance/index.html */
:root {
    --color-pink-life--dark: #f7c4d4;
    --color-life-bg: #faf6f3;
    --color-life-dots: #f7c4d4;
    --color-life-bg-dark: #f3eadf;
}

.life-insurance {
    background-color: var(--color-background);
}
.life-insurance .main{
    background-color: var(--color-life-bg);
}

/* mainVisual */
.mainVisual {
    margin: 0 auto 9rem;
}

.mainVisual__container {
    padding-top: 26rem;
}

.life-insurance .mainVisual__subttl .small {
    font-size: 2.2rem;
    font-weight: bold;
}

h1.heading--primary {
    font-size: 6rem;
    text-align: left;
    line-height: 1.7;
    margin: 0 0 27rem;
}

/* 1200px 以下の場合 */
@media (max-width: 75em) {
    .mainVisual {
        margin: 0 auto 7.5vw;
    }

    .mainVisual__container {
        height: 61.66vw;
        padding-top: 22.5vw;
    }

    h1.heading--primary {
        font-size: 5vw;
        margin-bottom: 22.5vw;
    }

    .mainVisual__subttl .small {
        font-size: 1.8vw;
    }
}

/* 750px 以下の場合 */
@media (max-width: 46.875em) {
    .mainVisual {
        margin: 0 auto;
    }

    .mainVisual__container {
        background-image: url(../images/lecture/life-insurance/life-insurance-mv_sp.png);
        height: unset;
        padding-top: 61vw;
    }

    .mainVisual__subttl {
        line-height: 1.3;
    }

    .life-insurance .mainVisual__subttl .small {
        font-size: 4.8vw;
        line-height: 1.5;
    }

    h1.heading--primary {
        font-size: 8vw;
        margin-top: 5vw;
        margin-bottom: 0;
    }

}

/* lead */
.lead {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 13rem;
}

.lead .container {
    display: flex;
    flex-direction: column;
}

.lead__subttl {
    font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
    line-height: 2.4;
    letter-spacing: 0.03em;
}

.heading--primary.line--dot {
    padding-bottom: 0;
    margin: 12rem 0 6rem;
    font-size: 5rem;
}

.line--dot::after {
    background-image: radial-gradient(var(--color-life-dots) 20%, transparent 20%);
    width: 80%;
    left: 10%;
}

.heading--part::after {
    display: none;
}

.life-insurance__img {
    margin: 5rem 0 0;
}

/* 1200px 以下の場合 */
@media (max-width: 75em) {
    .lead {
        margin-bottom: 10.8vw;
    }

    .lead__subttl {
        font-size: 2vw;
    }

    .lead .container .heading--primary {
        font-size: 4.1vw;
        margin: 7.5vw 0 5vw;
    }

    .heading--primary.line--dot {
        margin-bottom: 5vw;
        margin-top: 10vw;
    }

    .life-insurance__img {
        margin: 4.2vw 0 0;
    }
}

/* 750px 以下の場合 */
@media (max-width: 46.875em) {
    .lead {
        margin-top: 16.67vw;
        margin-bottom: 26.67vw;
    }

    .lead__subttl {
        font-size: 4.8vw;
        line-height: 2;
        margin-bottom: 19vw;
    }

    .life-insurance .lead .heading--primary {
        font-size: 7.2vw;
    }

    .heading--primary.line--dot {
        display: contents;
    }

    .heading--primary.line--dot::after {
        display: none;
    }

    .heading--part.line--dot {
        padding-bottom: 2vw;
    }

    .heading--part.line--dot::after {
        width: 84%;
        left: 7%;
    }

    .heading--part.line--dot:nth-of-type(2)::after {
        width: 76%;
        left: 11%;
    }

    .heading--part::after {
        display: block;
    }

    .lead__text {
        margin-top: 14vw;
    }

    .life-insurance__img {
        margin: 7vw 0 0;
    }
}

/* roleInsurance */
.roleInsurance {
    background-color: var(--color-background);
    padding-bottom: 19rem;
    margin-bottom: -9rem;
}

.roleInsurance .titleWhats__wrapper {
    padding: 11rem 0 0;
    margin-bottom: 0;
}

.roleInsurance__lists {
    counter-reset: number 0;
}

.roleInsurance .heading--quaternary {
    font-size: 3rem;
    margin: 8rem 0 3rem;
    padding-left: 2em;
}

.roleInsurance .heading--quaternary::before {
    counter-increment: number;
    content: counter(number);
    padding: 0 0.2em;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5rem;
    height: 5rem;
    background-color: var(--color-pink-life--dark);
    border-radius: 50%;
    text-align: center;
    line-height: 4.7rem;
    margin: auto;
    position: absolute;
    letter-spacing: 0;
}

.roleInsurance__list>div {
    display: flex;
    justify-content: space-between;
}

.roleInsurance__list>div p {
    width: 47.92%;
}

.roleInsurance__list>div p span {
    font-weight: bold;
}

.roleInsurance__list picture {
    width: 47.92%;
    margin-top: 1.3rem;
}

.summary {
    background-image: url(../images/lecture/life-insurance/life-insurance-cloud.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 87.7rem;
    height: 23.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10rem auto 15rem;
}

.summary .text {
    font-weight: bold;
    font-size: 3rem;
}

.roleInsurance .pager {
    margin-bottom: 0;
}

/* 1200px 以下の場合 */
@media(max-width:75em) {
    .roleInsurance {
        padding-bottom: 16.53vw;
    }

    .roleInsurance .titleWhats__wrapper {
        padding: 9.2vw 0 0;
    }

    .roleInsurance .heading--quaternary {
        margin: 6.667vw 0 2.5vw;
        font-size: 2.5vw;
    }

    .roleInsurance .heading--quaternary::before {
        width: 4.17vw;
        height: 4.17vw;
        line-height: 3.92vw;
    }

    .roleInsurance__list picture {
        margin-top: 1.08vw;
    }

    .summary {
        margin: 8.3vw auto 12.5vw;
        width: 73.083vw;
        height: 19.667vw;
    }

    .summary .text {
        font-size: 2.5vw;
    }

    .roleInsurance .pager {
        margin: 0;
        width: 100%;
    }
}

/* 750px 以下の場合 */
@media (max-width: 46.875em) {
    .roleInsurance {
        padding-bottom: 41.36vw;
        margin-bottom: -10.9rem;
    }

    .roleInsurance .titleWhats__wrapper {
        padding: 19vw 0 0;
    }

    .roleInsurance .heading--quaternary {
        font-size: 4.8vw;
        margin: 16vw 0 8.53vw;
        padding-left: 2.8em;
    }

    .roleInsurance .heading--quaternary::before {
        width: 9.333vw;
        height: 9.333vw;
        line-height: 8.667vw;
    }

    .roleInsurance__list {
        flex-direction: column;
    }

    .roleInsurance__list div {
        width: 100%;
        flex-direction: column;
    }

    .roleInsurance__list>div p {
        width: 100%;
    }

    .roleInsurance__list picture {
        width: 100%;
        margin: 7vw 0 0;
        padding: 0;
    }

    .summary {
        background-image: url(../images/lecture/life-insurance/life-insurance-cloud-sp.png);
        padding: 0;
        margin: 15vw auto 26vw;
        width: 90.267vw;
        height: 56.533vw;
    }

    .summary .text {
        font-size: 4.8vw;
        text-align: center;
    }

    .roleInsurance .pager {
        margin: 0 0 20.66vw 0;
    }
}