@charset "utf-8";



/** FV   
-------------------------------------------------------------------- */
section#hero {}
section#hero .character {
    width: 137px;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}







/** 概要   
-------------------------------------------------------------------- */
section#overview .label {
    --marker-text-color: currentColor;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#overview .label + p {
        text-align: justify;
    }
}






/** 特長   
-------------------------------------------------------------------- */
section#feature {
    background: var(--light-blue);
}
section#feature::before {
    --bubble-size: calc(572 * var(--px));
    --bubble-color: var(--blue);
    left: 0;
    top: 0;
}

section#feature .wrap {
    max-width: var(--compact-width);
}
section#feature .block {
    text-align: center;
}
section#feature .numbering {
    font-size: 40px;
    line-height: 1.3;
    color: var(--blue);
    text-align: center;

    width: 45px;
    height: 1lh;
    border-radius: 6px;
    background: white;
    box-shadow: calc(9 * var(--px)) calc(9 * var(--px)) 0 var(--blue);
    margin-inline: auto;

    display: grid;
    place-items: center;

    transform: skewX(-15deg) translateY(-50%);
}
section#feature .headline {
    font-size: 30px;
    
}
section#feature .headline + p {
    text-align: center;
}
section#feature .board {
    margin-top: var(--m3);
    padding-block: var(--m3) var(--m6);
    padding-inline: var(--m3);
    border-radius: calc(12 * var(--px));
    background: white;
    box-shadow: inset 0 0 0 1px var(--blue);
    position: relative;
}
section#feature .caption {
    font-size: 20px;
    font-weight: 500;
}
section#feature .board ul {
    margin-top: var(--m3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--m2);
}
section#feature .board li {
    flex: 0 0 30%;
    padding-block: var(--m2);
    padding-inline: var(--m);
    border-radius: calc(12 * var(--px));
    background: white;
    box-shadow: inset 0 0 0 1px var(--blue);
    display: grid;
    place-items: center;
}
section#feature .board li p {
    font-weight: 500;
    line-height: 1.2;
}
section#feature .board li strong {
    color: var(--blue);
}
section#feature .image {
    position: absolute;
}

#feature01 {
    margin-bottom: var(--m10);
}
#feature01 .image {
    width: calc(485 * var(--px));
    right: calc(-36 * var(--px));
    bottom: calc(-73 * var(--px));
}
#feature02 {
    margin-bottom: calc(270 * var(--px));
}
#feature02 .image {
    width: calc(530 * var(--px));
    right: calc(-36 * var(--px));
    bottom: calc(-118 * var(--px));
}
#feature03 {
    margin-bottom: calc(410 * var(--px));
}
#feature03 .image {
    width: calc(412 * var(--px));
    left: 50%;
    bottom: calc(-293 * var(--px));
    translate: -50% 0;
}
#feature04 {
    margin-bottom: calc(330 * var(--px));
}
#feature04 .image {
    width: calc(412 * var(--px));
    left: 50%;
    bottom: calc(-293 * var(--px));
    translate: -50% 0;
}

section#feature + section.cta::before {
    --bubble-size: calc(686 * var(--px));
    --bubble-color: var(--orange);
    left: 0;
    top: 0;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#feature::before {
        --bubble-size: calc(360 * var(--px));
    }
    section#feature .numbering {
        font-size: calc(40 * var(--px));
    }
    section#feature .headline {
        font-size: calc(24 * var(--px));
    }
    section#feature .headline + p {
        text-align: justify;
    }
    section#feature .board {
        margin-top: var(--m2);
        padding-block: var(--m2) var(--m6);
        padding-inline: var(--m2);
    }
    section#feature .caption {
        font-size: calc(16 * var(--px));
    }
    section#feature .board ul {
        margin-top: var(--m2);
        gap: var(--m);
    }
    section#feature .board li {
        flex: 0 0 100%;
        font-size: calc(18 * var(--px));
    }
    section#feature .board li p {
        text-align: center;
    }
    #feature01 {
        margin-bottom: calc(210 * var(--px));
    }
    #feature01 .image {
        bottom: calc(-120 * var(--px));
    }
    #feature02 {
        margin-bottom: calc(250 * var(--px));
    }
    #feature02 .image {
        bottom: calc(-140 * var(--px));
    }
    #feature03 {
        margin-bottom: calc(250 * var(--px));
    }
    #feature03 .image {
        width: calc(250 * var(--px));
        bottom: calc(-150 * var(--px));
    }
    #feature04 {
        margin-bottom: calc(150 * var(--px));
    }
    #feature04 .image {
        width: calc(250 * var(--px));
        bottom: calc(-150 * var(--px));
    }
}