@charset "UTF-8";
*,
::before,
::after{
    box-sizing: border-box;
}

:where(:root){
    font-family: sans-serif;
    line-height: 1;
    overflow-wrap: anywhere;
    text-spacing-trim: trim-start;
    text-autospace: normal;
    line-break: strict;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
}

:where(body){
    min-block-size: 100dvb;
    margin-block: unset;
    margin-inline: unset;
}

:where(h1, h2, h3, h4, h5, h6){
    margin-block: unset;
    text-wrap: pretty;
}

:where(search){
    display: block flow;
}

:where(p, blockquote, figure, pre, address, ul, ol, dl, menu){
    margin-block: unset;
}

:where(blockquote, figure){
    margin-inline: unset;
}

:where(p:lang(en)){
    text-wrap: pretty;
}

:where(address:lang(ja)){
    font-style: unset;
}

:where(ul, ol, menu){
    padding-inline-start: unset;
    list-style-type: "";
}

:where(dt){
    font-weight: bolder;
}

:where(dd){
    margin-inline-start: unset;
}

:where(pre){
    text-spacing-trim: space-all;
    text-autospace: no-autospace;
}

:where(em:lang(ja)){
    font-weight: bolder;
}

:where(:is(i, cite, em, dfn, var):lang(ja)){
    font-style: unset;
}

:where(code, kbd, samp){
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: unset;
    font-feature-settings: initial;
    font-variation-settings: initial;
    font-variant-ligatures: none;
}

:where(abbr[title]){
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

:where(time){
    text-autospace: no-autospace;
}

@media (forced-colors: active) {
    :where(mark){
        background-color: Highlight;
        color: HighlightText;
    }
}

@media print {
    :where(mark){
        border-width: 1px;
        border-style: dotted;
    }
}

:where(a:any-link){
    color: unset;
    text-decoration-line: unset;
    text-decoration-thickness: from-font;
}

:where(img, svg, picture, video, canvas, model, audio, iframe, embed, object){
    max-inline-size: 100%;
    block-size: auto;
    vertical-align: bottom;
}

:where(iframe){
    border: unset;
}

:where(table){
    border-collapse: collapse;
}

:where(caption, th){
    text-align: unset;
}

:where(caption){
    text-wrap: pretty;
}

:where(button, input, select, textarea),
::file-selector-button{
    border-width: 1px;
    border-style: solid;
    border-color: unset;
    border-radius: unset;
    text-align: unset;
    color: unset;
    font: unset;
    letter-spacing: unset;
}

:where(input:is([type="radio" i], [type="checkbox" i])){
    margin-block: unset;
    margin-inline: unset;
}

:where(input[type="file" i]){
    border: unset;
}

:where(input[type="search" i]){
    -webkit-appearance: textfield;
}

@supports (-webkit-touch-callout: none) {
    :where(input[type="search" i]){
        background-color: Canvas;
    }
}

:where(
    input:is(
            [type="tel" i],
            [type="url" i],
            [type="email" i],
            [type="number" i]
        ):not(:placeholder-shown)
){
    direction: ltr;
}

:where(textarea){
    margin-block: unset;
    resize: block;
}

:where(
    input:not([type="button" i], [type="submit" i], [type="reset" i]),
    textarea,
    [contenteditable]
){
    text-autospace: no-autospace;
}

:where(
    button,
    input:is([type="button" i], [type="submit" i], [type="reset" i])
),
::file-selector-button{
    background-color: unset;
}

:where(
    button,
    input:is([type="button" i], [type="submit" i], [type="reset" i]),
    [role="tab" i],
    [role="button" i],
    [role="option" i]
),
::file-selector-button{
    touch-action: manipulation;
}

:where(
    button:enabled,
    label[for],
    select:enabled,
    input:is(
            [type="button" i],
            [type="submit" i],
            [type="reset" i],
            [type="radio" i],
            [type="checkbox" i]
        ):enabled,
    [role="tab" i],
    [role="button" i],
    [role="option" i]
),
:where(:enabled)::file-selector-button{
    cursor: pointer;
}

:where(fieldset){
    min-inline-size: 0;
    margin-inline: unset;
    padding-block: unset;
    padding-inline: unset;
    border: unset;
}

:where(legend){
    padding-inline: unset;
}

:where(progress){
    vertical-align: unset;
}

::placeholder{
    opacity: unset;
}

:where(summary){
    list-style-type: "";
    cursor: pointer;
}

:where(summary)::-webkit-details-marker{
    display: none;
}

:where(dialog, [popover]){
    padding-block: unset;
    padding-inline: unset;
    border: unset;
    overscroll-behavior-block: contain;
}

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)){
    display: none !important;
}

:where(dialog){
    max-inline-size: unset;
    max-block-size: unset;
}

:where(dialog)::backdrop{
    background-color: oklch(0% 0 0deg / 30%);
}

:where([popover]){
    margin-block: unset;
    margin-inline: unset;
}

:where(:focus-visible){
    outline-offset: 3px;
}

[tabindex="-1"]:focus{
    outline: none !important;
}

:where(:disabled, [aria-disabled="true" i]){
    cursor: default;
}

[hidden]:not([hidden="until-found" i]){
    display: none !important;
}

a{
    cursor: pointer;
    &:hover{
        transition: 0.3s;
        opacity: 0.8;
    }
}

img{
    width: auto;
    height: auto;
}

input[type="submit"],
input[type="button"]{
    -webkit-box-sizing: content-box;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: button;
    appearance: button;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration{
    display: none;
}

input[type="submit"]:focus,
input[type="button"]:focus{
    outline-offset: -2px;
}

html{
    overflow-x: clip;
    scroll-behavior: smooth;
}

body{
    position: relative;
    overflow-x: clip;
    font-family: "Noto Sans JP", sans-serif;
    word-break: break-all;
}

html{
    scrollbar-gutter: auto;
}

picture{
    display: block;
    max-inline-size: none;
}

img{
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (width <= 767px) {
    html{
        font-size: 2.133333vw;
    }

    p{
        font-size: 1rem;
    }
}

@media screen and (width >= 768px) {
    html{
        font-size: 1.111111vw;
    }

    p{
        font-size: 1rem;
    }
}

@media screen and (width >= 1441px) {
    html{
        font-size: 1rem;
    }

    p{
        font-size: 1rem;
    }
}

.amatic{
    font-family: "Amatic SC", sans-serif;
}

.manrope{
    font-family: "Manrope", sans-serif;
}

.inner{
    position: relative;
    width: 62.5rem;
    margin-inline: auto;
    @media screen and (width <= 767px) {
        width: 41.875rem;
    }
}

.header{
    position: relative;
    z-index: 10;
    background: #fff;
}

.header .inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 5.75rem;
}

.header__left{
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.logo{
    display: block;
    width: 13.0625rem;
}

.header__badge{
    display: block;
    width: 15.5rem;
}

.header__right{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.header__tel-text{
    font-size: 0.9375rem;
    font-weight: 700;
}

.header__tel{
    display: block;
    width: 21.0625rem;
}

@media screen and (width <= 767px) {
    .header .inner{
        width: 44.75rem;
        min-height: 7.5625rem;
    }

    .logo{
        width: 15.6875rem;
    }

    .header__badge{
        width: 17.8125rem;
    }

    .header__left{
        gap: 4.75rem;
    }

    .header__tel{
        width: 5.8125rem;
    }
}

.footer{
    padding-block: 2.625rem;
    background: #000;
    text-align: center;
}

.footer__copyright{
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 0.875rem;
}

@media screen and (width <= 767px) {
    .footer{
        padding-block: 2.5rem;
    }

    .footer__copyright{
        font-size: 1.25rem;
    }
}

.kv__bg{
    padding-block-start: 0.1875rem;
    padding-block-end: 4.125rem;
    background: #fceca7 url("../images/kv_bg.webp") top / cover no-repeat;
}

.kv__head{
    display: block;
    width: 81.25rem;
    margin-block-end: -3.1875rem;
    margin-inline-start: -9.375rem;
}

@media screen and (width <= 767px) {
    .kv__bg{
        padding-block-start: 0;
        padding-block-end: 5.5rem;
        background-image: url("../images/kv_bg-sp.webp");
    }

    .kv__head{
        width: 46.875rem;
        margin-block-end: 0;
        margin-inline-start: -2.5rem;
    }
}

.cta-bg{
    padding-block: 0.8125rem 4.375rem;
    background: #e4ffa2 url("../images/cta_bg.webp") no-repeat top / cover;
}

.cta__head{
    position: relative;
    left: 50.2%;
    display: block;
    z-index: 1;
    width: 63.1875rem;
    margin-inline: auto;
    transform: translateX(-50%);
}

.cta__box{
    position: relative;
    width: 60.625rem;
    margin-block: -1.25rem 0;
    margin-inline: auto;
    padding-block-start: 0.75rem;
    background: #fff;
    box-shadow: 0 0.3125rem 0.625rem #0003;
}

.cta__leads{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5625rem;
}

.cta__lead{
    display: block;
    width: 27rem;
}

.cta__tel{
    display: block;
    width: 40.6875rem;
    margin-block: -2rem 0;
    margin-inline: auto;
}

.cta__time{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.6875rem;
    margin-block-start: 1.3125rem;
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    background: #fff4ca;
}

.cta__check{
    display: block;
    flex: 0 0 1.6875rem;
    width: 1.6875rem;
}

.cta__time-text{
    font-size: 1.0625rem;
}

.js-time{
    font-size: 1.3125rem;
}

.cta__time-human{
    position: absolute;
    bottom: -4.375rem;
    left: -2.8125rem;
    display: block;
    width: 11.375rem;
    pointer-events: none;
}

a:focus-visible,
summary:focus-visible{
    outline: 3px solid #194bbb;
    outline-offset: 5px;
}

.cta__tel:hover{
    filter: brightness(1.07);
}

@media screen and (width <= 767px) {
    .cta-bg{
        padding-block-start: 5rem;
        padding-block-end: 3rem;
        background: url("../images/cta_bg-sp.webp") no-repeat top / cover;
    }

    .cta__head{
        position: relative;
        left: 51%;
        z-index: 1;
        width: 44.875rem;
        margin-inline-start: 0;
    }

    .cta__box{
        width: 42rem;
        margin-block-start: -1.125rem;
        padding-block-start: 0.9375rem;
    }

    .cta__leads{
        align-items: flex-end;
        gap: 0.75rem;
    }

    .cta__lead{
        width: 19.1875rem;
    }

    .cta__tel{
        width: 41.6875rem;
        margin-block-start: 0.625rem;
    }

    .cta__time{
        justify-content: flex-start;
        gap: 1.25rem;
        min-height: 8.9375rem;
        margin-block-start: 1.875rem;
        padding-block: 1.25rem;
        padding-inline: 1.75rem;
        background: #e6efea;
    }

    .cta__check{
        flex-basis: 3.125rem;
        width: 3.125rem;
    }

    .cta__time-text{
        position: relative;
        z-index: 1;
        max-width: 30.3125rem;
        font-size: 1.375rem;
        line-height: 1.5;
    }

    .js-time{
        font-size: 1.875rem;
    }

    .cta__status{
        display: block;
    }

    .cta__time-human{
        right: 0;
        bottom: 0;
        left: auto;
        width: 10.75rem;
    }
}

.trouble01{
    position: relative;
    z-index: 1;
}

.trouble02{
    background: #ffde02;
}

.trouble__bg{
    display: flow-root;
    background: #3e492d url("../images/trouble_bg.webp") top / cover no-repeat;
}

.trouble01 .trouble__bg{
    clip-path: polygon(
        0 -1.125rem,
        100% -1.125rem,
        100% calc(100% - 3.625rem),
        50% 100%,
        0 calc(100% - 3.625rem)
    );
    padding-block-end: 7.25rem;
}

.trouble02 .trouble__bg{
    padding-block-end: 5.5rem;
}

.trouble__heading{
    position: relative;
    display: block;
    width: 62.8125rem;
    margin-block-start: -1.125rem;
    margin-block-end: -8.3125rem;
}

.trouble__list{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.0625rem;
}

.trouble__item{
    flex-shrink: 0;
    width: 11.6875rem;
}

.trouble__item picture{
    display: block;
    width: var(--trouble-asset-width, 100%);
    margin-block-start: var(--trouble-asset-y, 0);
    margin-block-end: var(--trouble-asset-gap, 0);
    margin-inline-start: var(--trouble-asset-x, 0);
}

.trouble__asset--1{
    --trouble-asset-width: 12.625rem;
    --trouble-asset-x: -0.4375rem;
    --trouble-asset-y: 0.0625rem;
    --trouble-asset-gap: -0.75rem;
}

.trouble__asset--2{
    --trouble-asset-width: 12.844076rem;
    --trouble-asset-x: -0.426107rem;
    --trouble-asset-y: 0.060873rem;
    --trouble-asset-gap: -0.730469rem;
}

.trouble__asset--3{
    --trouble-asset-width: 11.5625rem;
    --trouble-asset-x: 0.0625rem;
    --trouble-asset-y: 0.0625rem;
    --trouble-asset-gap: -0.75rem;
}

.trouble__asset--4{
    --trouble-asset-width: 12.31586rem;
    --trouble-asset-x: 0.062836rem;
    --trouble-asset-y: 0.062836rem;
    --trouble-asset-gap: -0.754032rem;
}

.trouble__asset--5{
    --trouble-asset-width: 11.561828rem;
    --trouble-asset-x: 0.062836rem;
    --trouble-asset-y: 0.062836rem;
    --trouble-asset-gap: -0.754032rem;
}

.trouble__asset--repeat-1{
    --trouble-asset-width: 12.625rem;
    --trouble-asset-x: -0.4375rem;
    --trouble-asset-y: 0.0625rem;
    --trouble-asset-gap: -0.6875rem;
}

.trouble__asset--repeat-2{
    --trouble-asset-width: 13.1875rem;
    --trouble-asset-x: -0.4375rem;
    --trouble-asset-y: 0.0625rem;
    --trouble-asset-gap: -0.6875rem;
}

.trouble__asset--repeat-3{
    --trouble-asset-width: 11.5625rem;
    --trouble-asset-x: 0.0625rem;
    --trouble-asset-y: 0.0625rem;
    --trouble-asset-gap: -0.625rem;
}

.trouble__asset--repeat-4{
    --trouble-asset-width: 12.25rem;
    --trouble-asset-x: 0.0625rem;
    --trouble-asset-y: 0.0625rem;
    --trouble-asset-gap: -0.5625rem;
}

.trouble__asset--repeat-5{
    --trouble-asset-width: 11.5rem;
    --trouble-asset-x: 0.0625rem;
    --trouble-asset-y: 0.125rem;
    --trouble-asset-gap: -0.5625rem;
}

@media screen and (width <= 767px) {
    .trouble__asset--1{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--2{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--3{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--4{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--5{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--repeat-1{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--repeat-2{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--repeat-3{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--repeat-4{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__asset--repeat-5{
        --trouble-asset-width: 42.5rem;
        --trouble-asset-x: -0.3125rem;
        --trouble-asset-y: 0.0625rem;
        --trouble-asset-gap: 0.0625rem;
    }

    .trouble__bg{
        background-image: url("../images/trouble_bg-sp.webp");
    }

    .trouble01 .trouble__bg{
        clip-path: polygon(
            0 -1.125rem,
            100% -1.125rem,
            100% calc(100% - 6rem),
            50% 100%,
            0 calc(100% - 6rem)
        );
        padding-block-end: 8.875rem;
    }

    .trouble02 .trouble__bg{
        padding-block-end: 3.3125rem;
    }

    .trouble__heading{
        width: 46.875rem;
        margin-block: 0;
        margin-inline: -2.5rem 0;
    }

    .trouble__list{
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-block-start: -8.75rem;
    }

    .trouble__item{
        width: 42rem;
        margin-block-end: -3.6875rem;
    }

    .trouble__item--1{
        margin-block-end: -3.5625rem;
    }

    .trouble__item--2{
        margin-block-end: -3.9375rem;
    }

    .trouble__item--3{
        margin-block-end: -3.875rem;
    }

    .trouble__item--4{
        margin-block-end: -4.0625rem;
    }

    .trouble__item:last-child{
        margin-block-end: 0;
    }
}

.entrust{
    margin-block-start: -5.625rem;
}

.entrust__bg{
    padding-block: 7.5rem 4.875rem;
    padding-inline: 0;
    background: #ecf2c3 url("../images/entrust_bg.webp") top / cover no-repeat;
    background-color: #ecf2c6;
    background-size: 125rem auto;
}

.entrust__heading{
    display: block;
    width: 35.6875rem;
    margin-inline: auto;
}

.entrust__list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.3125rem;
    margin-block-start: 2.625rem;
}

.entrust__item-text{
    margin-block-start: 0.875rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
}

.entrust__survey{
    display: block;
    width: 62.6875rem;
    margin-block-start: 2.75rem;
}

.entrust__checks{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4.0625rem;
    min-height: 8.9375rem;
    padding-block: 1.5625rem;
    padding-inline: 1.5625rem;
    border-radius: 1.25rem;
    background: white;
    font-size: 2rem;
    font-weight: 700;
}

.entrust__checks li{
    padding-block-end: 0.5rem;
    border-bottom: 0.125rem dotted #ff6800;
}

.entrust__checks li::before{
    content: "";
    display: inline-block;
    width: 2.1875rem;
    height: 2.1875rem;
    margin-inline-end: 0.9375rem;
    background: url("../images/entrust_check.webp") no-repeat center / contain;
    vertical-align: -0.25rem;
}

@media screen and (width <= 767px) {
    .entrust{
        margin-block-start: -6rem;
    }

    .entrust__bg{
        padding-block: 11.25rem 5.625rem;
        padding-inline: 0;
        background: url("../images/entrust_bg-sp.webp") no-repeat top / cover;
    }

    .entrust__checks li{
        width: 100%;
    }

    .entrust__checks li::before{
        width: 3.125rem;
        height: 3.125rem;
        vertical-align: -0.5625rem;
    }

    .entrust__heading{
        width: 46.875rem;
        margin-block-start: 0;
        margin-inline-start: -2.5rem;
    }

    .entrust__list{
        grid-template-columns: repeat(2, 1fr);
        gap: 1.875rem 1.625rem;
        margin-block-start: 3.8125rem;
    }

    .entrust__item-text{
        margin-block-start: 0.875rem;
        font-size: 1.875rem;
    }

    .entrust__survey{
        width: 46.875rem;
        margin-block-start: 2.0625rem;
        margin-inline-start: -2.5rem;
    }

    .entrust__checks{
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1.5625rem;
        min-height: 15.9375rem;
        padding-block: 2.1875rem;
        padding-inline: 2.1875rem;
        font-size: 2.25rem;
    }
}

.area__bg{
    padding-block-start: 3.75rem;
    background: linear-gradient(#40c7ff 0%, #b4e9ff 100%);
}

.area__content{
    display: block;
    width: 125rem;
    margin-block: auto;
    margin-inline: auto;
}

@media screen and (width <= 767px) {
    .area__bg{
        padding-block: 0;
        padding-inline: 0;
    }

    .area__content{
        width: 46.875rem;
    }
}

@media screen and (width >= 768px) {
    .area__content{
        width: 62.5rem;
        margin-inline: auto;
    }
}

.step{
    position: relative;
    z-index: 3;
}

.step__bg{
    position: relative;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--step-triangle-depth, 5rem)),
        50% 100%,
        0 calc(100% - var(--step-triangle-depth, 5rem))
    );
    padding-block: 0 6.25rem;
    padding-inline: 0;
    background: url("../images/step_pattern.webp") no-repeat center top / cover;
}

.step__bg > .inner{
    position: relative;
    z-index: 2;
}

.step__heading{
    display: block;
    width: 62.6875rem;
    margin-inline: auto;
}

.step__list{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem 1.25rem;
    margin-block-start: 0.3125rem;
}

.step__item{
    position: relative;
    min-width: 0;
    margin-inline-end: 0;
}

.step__item:first-child{
    margin-inline-end: 0;
}

.step__item:nth-child(3){
    margin-inline-end: 0;
}

.step__card{
    display: block;
    width: 20.625rem;
    margin-inline-start: -0.125rem;
}

.step__item-ttl{
    position: absolute;
    top: 5rem;
    left: 1.25rem;
    color: #fff;
    font-size: 1.5625rem;
    font-weight: 900;
    line-height: 1.2;
}

.step__item--2 .step__item-ttl{
    top: 5.9375rem;
}

.step__item--4 .step__item-ttl,
.step__item--5 .step__item-ttl{
    top: 5.9375rem;
}

.step__item-text{
    position: absolute;
    bottom: 2.375rem;
    left: 1.25rem;
    color: #111;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.555;
}

.step__finish{
    position: absolute;
    right: -2.0625rem;
    bottom: -6.125rem;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 98%);
    width: 28.4375rem;
    pointer-events: none;
}

@media screen and (width >= 768px) {
    .step{
        margin-block-start: -12.5rem;
    }

    .step__bg{
        background-position-y: 4.6875rem;
    }
}

@media screen and (width <= 767px) {
    .step{
        margin-block-start: -2.4375rem;
    }

    .step__bg{
        padding-block: 5.125rem 11.875rem;
        background-image: url("../images/step_pattern-sp.webp");
        background-size: 46.875rem auto;
    }

    .step__heading{
        width: 44.375rem;
        margin-inline-start: -0.625rem;
    }

    .step__list{
        display: block;
        margin-block-start: 1rem;
    }

    .step__item,
    .step__item:first-child{
        width: 41.875rem;
        margin-block-end: 0.4375rem;
        margin-inline-end: 0;
    }

    .step__item:nth-child(3){
        margin-block-end: 0.5rem;
    }

    .step__item:last-child{
        margin-block-end: 0;
    }

    .step__card{
        width: 44.6875rem;
        margin-inline-start: -1rem;
    }

    .step__item-ttl,
    .step__item--2 .step__item-ttl,
    .step__item--4 .step__item-ttl,
    .step__item--5 .step__item-ttl{
        top: 5.25rem;
        left: 2.5rem;
        font-size: 3.125rem;
        line-height: 1.2;
    }

    .step__item-text{
        bottom: 2.8125rem;
        left: 2.5rem;
        font-size: 1.875rem;
        line-height: 1.555;
    }

    .step__finish-sp{
        position: absolute;
        right: -1.0625rem;
        bottom: 0;
        width: 16.1875rem;
        pointer-events: none;
    }
}

.change{
    position: relative;
    z-index: 2;
    margin-block-start: -7.1875rem;
}

.change__bg{
    padding-block: 7.4375rem 0;
    padding-inline: 0;
    background: url("../images/change_bg.webp") top / cover no-repeat;
}

.change__heading{
    display: block;
    width: 125rem;
    margin-block: 0;
    margin-inline: -31.25rem 0;
}

.change__img{
    display: block;
    width: 125rem;
    margin-block: 0;
    margin-inline: -31.25rem 0;
}

@media screen and (width <= 767px) {
    .change__bg{
        padding-block: 6.5625rem 0;
        padding-inline: 0;
        background-image: url("../images/change_bg-sp.webp");
    }

    .change__heading,
    .change__img{
        width: 46.875rem;
        margin-inline-start: -2.5rem;
    }

    .change__heading{
        position: relative;
        z-index: 2;
    }

    .change__img{
        margin-block-start: 0;
    }
}

@media screen and (width >= 768px) {
    .change__bg{
        padding-block-end: 0;
    }
}

.manga__bg{
    padding-block: 6.25rem;
    padding-inline: 0;
    background: #fff;
}

.manga__placeholder{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 75.3125rem;
    font-size: 2rem;
    font-weight: 700;
}

@media screen and (width <= 767px) {
    .manga__bg{
        padding-block: 5.8125rem 8.3125rem;
        padding-inline: 0;
    }

    .manga__placeholder{
        align-items: flex-start;
        min-height: 276.75rem;
        padding-block-start: 20.9375rem;
        background: #e6e6e6;
        font-size: 2rem;
    }
}

@media screen and (width >= 768px) {
    .manga__bg{
        padding-block-end: 6.375rem;
    }
}

.point__bg{
    padding-block: 5.875rem 5.875rem;
    padding-inline: 0;
    background: #ffde02;
}

.point__heading{
    display: block;
    width: 50rem;
    margin-block: 0 2.1875rem;
    margin-inline: auto;
}

.point__list{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.point__item{
    display: flex;
    align-items: flex-start;
}

.point__item--2{
    flex-direction: row-reverse;
}

.point__item-img{
    display: block;
    flex-shrink: 0;
    width: 31.25rem;
}

.point__item-content{
    width: 31.25rem;
    min-block-size: 19.125rem;
    margin-block-start: 1.75rem;
    background: #fff;
}

.point__item-text{
    padding-block: 1.75rem 1rem;
    padding-inline: 2.0625rem;
    font-size: 1.125rem;
    line-height: 1.666;
    letter-spacing: 0.04em;
}

.point__item--2 .point__item-text,
.point__item--3 .point__item-text{
    padding-block-start: 3rem;
}

.point__item-subcontent{
    padding-block: 1.25rem;
    padding-inline: 2rem;
    background: #f7c9af;
}

.point__item-subttl{
    display: block;
    width: 30.125rem;
    margin-block-end: 0.625rem;
    margin-inline-start: -1.4375rem;
}

.point__item-services{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
}

.point__item-service{
    position: relative;
    padding-block: 0.8125rem;
    padding-inline: 0;
    border-radius: 0.3125rem;
    background: white;
    text-align: center;
    font-size: 0.96rem;
    font-weight: 600;
}

.point__item-service::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -0.9375rem;
    z-index: 1;
    width: 1.4375rem;
    height: 1.4375rem;
    background: url("../images/point_plus.webp") no-repeat center / contain;
    transform: translateY(-50%);
}

@media screen and (width >= 768px) {
    .point__item--1{
        margin-block-end: 0.25rem;
    }

    .point__item--1 .point__item-content{
        min-block-size: 22.125rem;
        margin-block-start: 1.4375rem;
    }

    .point__item--2 .point__item-content{
        min-block-size: 19rem;
        margin-block-start: 1.4375rem;
    }

    .point__item--3 .point__item-content{
        margin-block-start: 1.4375rem;
    }

    .point__item-service:nth-child(3n)::after{
        display: none;
    }
}

@media screen and (width <= 767px) {
    .point__item-service::after{
        display: none;
    }

    .point__item-service:nth-child(odd)::after{
        right: -1.8125rem;
        display: block;
        width: 2.875rem;
        height: 2.875rem;
    }

    .point__bg{
        padding-block: 6.1875rem 6.8125rem;
        padding-inline: 0;
    }

    .point__heading{
        width: 46.875rem;
        margin-block: 0 1.3125rem;
        margin-inline: -2.5rem 0;
    }

    .point__list{
        gap: 0.75rem;
    }

    .point__item,
    .point__item--2{
        display: block;
    }

    .point__item-img{
        width: 46.875rem;
        margin-block-end: -1.5625rem;
        margin-inline-start: -2.5rem;
    }

    .point__item-content{
        width: 42rem;
        min-block-size: 0;
        margin-block-start: 0;
        border-radius: 0 0 1.875rem 1.875rem;
    }

    .point__item-text{
        padding-block: 2.375rem 2.5rem;
        padding-inline: 2rem;
        font-size: 2rem;
        line-height: 1.5625;
        letter-spacing: 0;
    }

    .point__item--1{
        margin-block-end: 2.75rem;
    }

    .point__item .point__item-img{
        margin-block-end: -3.6875rem;
    }

    .point__item--1 .point__item-text{
        min-block-size: 22.625rem;
        padding-block: 5.875rem 1.125rem;
        letter-spacing: 0.04em;
    }

    .point__item--2{
        margin-block-end: 0.9375rem;
    }

    .point__item--2 .point__item-text,
    .point__item--3 .point__item-text{
        padding-block-start: 3.4375rem;
    }

    .point__item-subcontent{
        position: relative;
        margin-block-start: 4.125rem;
        padding-block: 1.5625rem 4.25rem;
        padding-inline: 1.875rem;
        border-radius: 0 0 1.875rem 1.875rem;
    }

    .point__item-subcontent::before{
        content: "";
        position: absolute;
        inset-block-start: -4rem;
        inset-inline: 0.5rem 0.4375rem;
        block-size: 14.25rem;
        border-radius: 50%;
        background: #f7c9af;
    }

    .point__item-subttl{
        position: relative;
        width: 38.25rem;
        margin-block: -3.625rem 1rem;
        margin-inline: 0;
    }

    .point__item-services{
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .point__item-service{
        padding-block: 1.3125rem;
        padding-inline: 0;
        font-size: 1.875rem;
    }
}

.us__bg{
    background: #7ad8b6 url("../images/us_bg.webp") top / cover no-repeat;
}

.us__content{
    display: block;
    width: 87.5rem;
    margin-block: auto;
    margin-inline: auto;
}

@media screen and (width <= 767px) {
    .us__bg{
        background-image: url("../images/us_bg-sp.webp");
    }

    .us__content{
        width: 46.875rem;
    }
}

.faq{
    padding-block: 5.25rem 6.4375rem;
    padding-inline: 0;
}

.faq__heading{
    display: block;
    width: 30.0625rem;
    margin-block: 0 2.625rem;
    margin-inline: auto;
}

.faq__human{
    position: absolute;
    top: -3.6875rem;
    right: -12.8125rem;
    width: 28.625rem;
    pointer-events: none;
}

.faq__wrap{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 2rem 2.375rem;
}

.faq__item{
    border-radius: 0.625rem;
}

.js-summary{
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.8125rem;
    min-height: 6.0625rem;
    padding-inline-end: 3.4375rem;
    border-radius: 0.625rem;
    background: #ffec95;
    list-style: none;
    cursor: pointer;
}

.js-summary::-webkit-details-marker{
    display: none;
}

.js-summary::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 1.25rem;
    width: 1.5625rem;
    height: 1.5625rem;
    border-radius: 50%;
    background: #ffbf00 url("../images/icon_faq_arrow.svg") no-repeat center /
        cover;
    transform: translateY(-50%) rotate(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.5s;
    pointer-events: none;
}

.faq__item[open] .js-summary:not(.is-closing)::after{
    transform: translateY(-50%) rotate(0deg);
}

.question__icon{
    display: grid;
    flex-shrink: 0;
    place-items: center;
    align-self: stretch;
    width: 4.5rem;
    border-radius: 0.625rem 0 0 0.625rem;
    background: #ffc900;
    color: #fff;
    font-size: 1.5625rem;
    font-weight: 700;
}

.question__glyph{
    width: 2.5rem;
    height: auto;
}

.question__text{
    padding-block: 0.9375rem;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.72;
    letter-spacing: 0.04em;
}

.answer{
    overflow: hidden;
}

.answer__inner{
    padding-block: 0.25rem 0;
    padding-inline: 0.1875rem;
}

.answer__text{
    font-size: 1.125rem;
    line-height: 1.87;
    letter-spacing: 0.04em;
}

.faq__sp-break{
    display: none;
}

@media screen and (width <= 767px) {
    .faq__sp-break{
        display: initial;
    }

    .faq{
        padding-block: 0 5.3125rem;
        padding-inline: 0;
    }

    .faq__heading{
        width: 46.875rem;
        margin-block: 0;
        margin-inline: -2.5rem 0;
    }

    .faq__wrap{
        grid-template-columns: 1fr;
        gap: 2.5625rem;
    }

    .js-summary{
        gap: 2.3125rem;
        min-height: 8.125rem;
        padding-inline-end: 4.125rem;
    }

    .question__icon{
        width: 5.9375rem;
        font-size: 2.1875rem;
    }

    .question__glyph{
        width: 3.4375rem;
    }

    .question__text{
        font-size: 1.875rem;
        line-height: 1.5;
    }

    .js-summary::after{
        right: 1.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .answer__inner{
        padding-block-start: 1rem;
    }

    .answer__text{
        font-size: 1.875rem;
        line-height: 1.533333;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-summary::after{
        transition-duration: 0s;
    }
}

.compare__bg{
    padding-block: 6.25rem;
    padding-inline: 0;
    background: #ffde02;
}

.compare__table{
    display: block;
    width: 62.75rem;
    margin-block: auto;
    margin-inline: auto;
}

.compare__service{
    display: block;
    width: 62.625rem;
    margin-block: 0.25rem 0;
    margin-inline: auto;
}

@media screen and (width <= 767px) {
    .compare__bg{
        padding-block: 5.5rem 3.1875rem;
        padding-inline: 0;
    }

    .compare__table{
        width: 42rem;
    }

    .compare__service{
        width: 46.875rem;
        margin-block: 4.875rem 0;
        margin-inline: -2.5rem 0;
    }
}

.service__bg{
    padding-block: 5.875rem 6.25rem;
    padding-inline: 0;
    background: #f8f8f8 url("../images/service_bg.webp") top / cover no-repeat;
}

.service__heading{
    display: block;
    width: 37.5rem;
    margin-block: 0 3rem;
    margin-inline: auto;
}

.service__list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.875rem 2.0625rem;
}

.service__item{
    background: #fff;
}

.service__item-ttl{
    position: relative;
    z-index: 1;
    width: calc(100% + 0.9375rem);
    min-height: 3.0625rem;
    margin-block-end: -0.0625rem;
    margin-inline-start: -0.5rem;
    padding-block: 0.5625rem;
    padding-inline: 0.3125rem;
    background: linear-gradient(90deg, #00771d, #00ae77);
    text-align: center;
    color: white;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
}

.service__item-ttl .large{
    font-size: 2.125rem;
}

.service__item-ttl .small{
    font-size: 1.4375rem;
}

.service__item-ttl::after{
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - 0.5rem) 100%,
        calc(100% - 0.5rem) 0,
        0.5rem 0,
        0.5rem 100%
    );
    block-size: 0.5rem;
    background: #005b1e;
    pointer-events: none;
}

.service__item-ttl--work{
    font-size: 1.5625rem;
}

.service__item-img,
.service__item-price{
    display: block;
    width: 100%;
}

@media screen and (width <= 767px) {
    .service__bg{
        padding-block: 0 6rem;
        padding-inline: 0;
        background: #f8f8f8 url("../images/service_bg-sp.webp") top / cover
            no-repeat;
    }

    .service__heading{
        width: 46.875rem;
        margin-block: 0;
        margin-inline: -2.5rem 0;
    }

    .service__list{
        grid-template-columns: repeat(2, 1fr);
        gap: 1.875rem 2.25rem;
    }

    .service__item-ttl{
        width: calc(100% + 0.875rem);
        min-height: 3.75rem;
        margin-block-end: -0.625rem;
        margin-inline-start: -0.4375rem;
        padding-block: 0.5rem;
        padding-inline: 0.25rem;
        font-size: 2.3125rem;
    }

    .service__item-ttl .large{
        font-size: 2.375rem;
    }

    .service__item-ttl .small{
        font-size: 1.875rem;
    }

    .service__item-price{
        position: relative;
        margin-block-start: -0.625rem;
    }

    .service__item-ttl--work{
        font-size: 2rem;
    }
}

.works__bg{
    padding-block: 5.625rem 6.25rem;
    padding-inline: 0;
    background: #f3ddc4 url("../images/works_bg.webp") no-repeat top / cover;
}

.works__heading{
    display: block;
    width: 42.5rem;
    margin-block: 0 3.125rem;
    margin-inline: auto;
}

.works__list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem 1.25rem;
}

.works__item{
    position: relative;
    overflow: hidden;
    border-radius: 0.9375rem;
}

.works__item-text{
    position: absolute;
    inset: auto 0 0;
    min-height: 2.75rem;
    padding-block: 0.5rem;
    padding-inline: 0.5rem;
    background: rgb(255 255 255 / 85%);
    text-align: center;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
}

@media screen and (width <= 767px) {
    .works__bg{
        padding-block: 0 6.0625rem;
        padding-inline: 0;
        background: #f3ddc4 url("../images/works_bg-sp.webp") top center /
            46.875rem 74.0625rem no-repeat;
    }

    .works__heading{
        width: 46.875rem;
        margin-block: 0;
        margin-inline: -2.5rem 0;
    }

    .works__list{
        grid-template-columns: repeat(2, 1fr);
        gap: 1.875rem 1.625rem;
        margin-block-start: 0;
    }

    .works__item{
        overflow: hidden;
        border-radius: 0.9375rem;
    }

    .works__item-text{
        font-size: 1.625rem;
    }
}

.pay__bg{
    padding-block: 1.5625rem 5.625rem;
    padding-inline: 0;
    background: #e5edff;
    background-color: #e4edff;
}

.pay__heading{
    display: block;
    width: 62.625rem;
    margin-block: 0 1.75rem;
    margin-inline: auto;
}

.pay__list{
    display: flex;
    flex-direction: column;
    gap: 1.6875rem;
}

.pay__item{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 12.875rem;
    padding-block: 2.1875rem 1.875rem;
    padding-inline: 4.25rem 2.5rem;
    background-color: #edf3ff;
    background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
}

.pay__item--2{
    flex-direction: row-reverse;
    padding-inline-start: 25rem;
}

.pay__item-copy{
    position: relative;
    z-index: 1;
    width: 33.8125rem;
}

.pay__item-title{
    display: block;
    width: 16.9375rem;
    max-width: 100%;
    margin-block-end: 1.0625rem;
}

.pay__item--2 .pay__item-title{
    width: 30.6875rem;
}

.pay__item--3 .pay__item-title{
    width: 32.375rem;
}

.pay__item-text{
    max-width: 33.8125rem;
    margin-block-start: 0;
    padding-block-start: 0.6875rem;
    border-top: 0.1875rem dotted #00297d;
    color: #000;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.777;
}

.pay__item-human{
    position: absolute;
    top: -1.5625rem;
    right: 1.875rem;
    width: 23rem;
    pointer-events: none;
}

.pay__item--2 .pay__item-human{
    right: auto;
    left: 0;
    width: 19rem;
}

.pay__item--3 .pay__item-human{
    right: 3.125rem;
    width: 18.5625rem;
}

.pay__methods{
    display: flex;
    gap: 1rem;
    margin-block-start: 2.25rem;
}

.pay__cash,
.pay__cards{
    display: block;
    width: 30.8125rem;
}

@media screen and (width <= 767px) {
    .pay__bg{
        padding-block: 0 6.125rem;
        padding-inline: 0;
    }

    .pay__heading{
        width: 46.875rem;
        margin-block: 0;
        margin-inline: -2.5rem 0;
    }

    .pay__list{
        gap: 3.4375rem;
        margin-block-start: 4.9375rem;
    }

    .pay__item,
    .pay__item--2{
        display: block;
        min-height: 19.25rem;
        padding-block: 2.8125rem;
        padding-inline: 2.3125rem;
        border-radius: 0;
    }

    .pay__item--2{
        min-height: 28.625rem;
        margin-block-end: 0.5rem;
    }

    .pay__item--3{
        min-height: 22.875rem;
    }

    .pay__item-copy{
        width: 27.8125rem;
    }

    .pay__item-title{
        width: 22.875rem;
        max-width: 27.125rem;
        margin-block-end: 1.0625rem;
    }

    .pay__item--2 .pay__item-title{
        width: 27.125rem;
    }

    .pay__item--3 .pay__item-title{
        width: 25rem;
    }

    .pay__item-text{
        max-width: 25rem;
        border-top-width: 0.25rem;
        font-size: 1.875rem;
        font-weight: 400;
        line-height: 1.533333;
    }

    .pay__item--1 .pay__item-copy{
        width: 30rem;
    }

    .pay__item--1 .pay__item-text{
        max-width: 30rem;
    }

    .pay__item-human,
    .pay__item--2 .pay__item-human,
    .pay__item--3 .pay__item-human{
        top: -2.5rem;
        right: -2.4375rem;
        left: auto;
        width: 16.5625rem;
    }

    .pay__item--1 .pay__item-human{
        top: -5rem;
        width: 17.875rem;
    }

    .pay__item--2 .pay__item-human{
        width: 15.1875rem;
    }

    .pay__methods{
        gap: 0.4375rem;
        margin-block-start: 3.75rem;
    }

    .pay__cash{
        width: 13.9375rem;
    }

    .pay__cards{
        width: 27.625rem;
    }
}

.coupon__bg{
    padding-block-start: 3.5rem;
    background: #ff6000 url("../images/coupon_bg.webp") top / 100% 100%
        no-repeat;
}

.coupon__content{
    display: block;
    width: 76.25rem;
    margin-inline-start: -9.0625rem;
}

@media screen and (width <= 767px) {
    .coupon__bg{
        padding-block: 0;
        padding-inline: 0;
        background-image: url("../images/coupon_bg-sp.webp");
        background-size: 100% 100%;
    }

    .coupon__content{
        width: 46.875rem;
        margin-inline-start: -2.5rem;
    }
}

.fixed{
    display: none;
}

@media screen and (width <= 767px) {
    .fixed{
        position: sticky;
        bottom: 0;
        left: 0;
        display: block;
        z-index: 100;
        width: 100%;
        margin-block-start: -1px;
        pointer-events: none;
    }

    .fixed a{
        display: block;
        pointer-events: auto;
    }

    .fixed img{
        width: 100%;
        height: auto;
    }
}

.u-visually__hidden{
    position: absolute;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
}

@media screen and (width <= 767px) {
    .u-pc__only{
        display: none;
    }
}

@media screen and (width >= 768px) {
    .u-sp__only{
        display: none;
    }
}