@charset "utf-8";

/* ========================================
// foundation - 変数定義・基本設定
// ======================================== */
/* variable - 変数定義 */
:root {
    /* root-size */
    font-size: min(1.17130307vw, 18px);
    
    /* color */
    --color--black-primary: #000000;
    --color--black-secondary: #3C3C3C;

    --color--gray-primary: #9A9A9A;
    --color--gray-secondary: #E1E1E1;

    --color--beige-primary: #8B8771;
    --color--beige-secondary: #CBC7AF;
    --color--beige-tertiary: #ECEBE3;

    --color--white-primary: #FFFFFF;
    --color--white-secondary: #F6F5F5;
    
    --color--orange-primary: #FF7500;
    --color--orange-secondary: #FF9D00;
    --color--orange-tertiary: #FFEEDE;

    --color--yellow-primary: #F7D72F;
    --color--yellow-secondary: #FFF7CC;
    --color--yellow-tertiary: #FFFCED;

    --color--green-primary: #00BCB0;
    --color--green-secondary: #00DACD;
    
    --color--pink--primary: #F35660;

    --color--base-primary: var(--color--white-primary);
    --color--base-secondary: var(--color--yellow-tertiary);
    --color--base-tertiary: var(--color--yellow-secondary);

    --color--font-primary: var(--color--black-secondary);

    --color--main-primary: var(--color--orange-primary);
    --color--main-secondary: var(--color--yellow-primary);

    --color--accent-primary: linear-gradient(to right, var(--color--green-primary), var(--color--green-secondary));

    /* header-size */
    --header-size--medium: 6.75rem;

    /* section-size */
    --section-size--medium: 4.375rem;

    /* container-rate */
    --container-rate--small: 58.56515373%;
    --container-rate--medium: 73.20644217%;
    --container-rate--large: 84.33382138%;

    /* container-size */
    --container-size--small: 50rem;
    --container-size--medium: 62.5rem;
    --container-size--large: 72rem;

    /* font-family */
    --font-family--jp: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif;
    --font-family--en: 'DIN Alternate', Arial, sans-serif;

    /* icon */
    --icon--arrow: url('../../../images/lp/meo/common/icon_arrow.svg');
    --icon--link-external: url('../../../images/lp/meo/common/icon_link-external.svg');
    --icon--tel: url('../../../images/lp/meo/common/icon_tel.svg');
}
@media (width < 768px) {
    :root {
        font-size: max(12px, 4.26666666vw);
        --header-size--medium: 2.625rem;
        --section-size--medium: 3.125rem;
        --container-rate--small: 90.66666666%;
        --container-rate--medium: 90.66666666%;
        --container-rate--large: 90.66666666%;
        --container-size--small: 21.25rem;
        --container-size--medium: 21.25rem;
        --container-size--large: 21.25rem;
    }
}

/* base - 基本設定 */
html,
body {
    color: var(--color--font-primary);
    font-family: var(--font-family--jp);
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.5;
    overflow-x: clip;
}
img {
    block-size: auto;
    inline-size: 100%;
}
a {
    color: var(--color--green-primary);
    text-decoration: underline;
    text-underline-offset: .125rem;
}
a[target="_blank"] {
    &::after {
        aspect-ratio: 1;
        background-color: var(--color--green-primary);
        content: '';
        display: inline-block;
        inline-size: 1.25rem;
        mask-image: var(--icon--link-external);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        vertical-align: text-bottom;
    }
}
@media (any-hover: hover) {
    a:hover {
        text-decoration: none;
    }
}
strong {
    font-weight: unset;
}
.scroll-hint-icon {
    z-index: 100;
}

/* ========================================
// layout - レイアウトの設定
// ======================================== */
/* section - セクション */
.l-section {
    padding-block: var(--section-size--medium);
}
.l-section__body {
    margin-block-start: 3.125rem;
}
@media (width < 768px) {
    .l-section__body {
        margin-block-start: 1.875rem;
    }
}
.l-section__footer {
    margin-block-start: 3.125rem;
}
@media (width < 768px) {
    .l-section__footer {
        margin-block-start: 1.875rem;
    }
}

/* container - コンテナ */
.l-container {
    inline-size: var(--container-rate--medium);
    margin-inline: auto;
    max-inline-size: var(--container-size--medium);
}
.l-container.-small {
    inline-size: var(--container-rate--small);
    max-inline-size: var(--container-size--small);
}
.l-container.-large {
    inline-size: var(--container-rate--large);
    max-inline-size: var(--container-size--large);
}

/* header - ヘッダー */
.l-header {
    background-color: var(--color--base-primary);
    block-size: var(--header-size--medium);
    box-shadow: 0 .25rem .25rem color-mix(in srgb, var(--color--black-primary) 10%, transparent);
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    position: fixed;
    z-index: 1000;
}
.l-header__container {
    align-items: center;
    block-size: 100%;
    display: flex;
    justify-content: space-between;
}
.l-header__logo-link {
    align-items: center;
    display: flex;
    transition: .15s ease opacity;
    img {
        inline-size: 22rem;
        max-width: 375px;
        height: auto;
    }
}
@media (width < 768px) {
    .l-header__logo-link {
        img {
            inline-size: 5rem;
        }
    }
}
@media (any-hover: hover) {
    .l-header__logo-link:hover {
        opacity: 50%;
    }
}
.l-header__nav {
    align-items: center;
    column-gap: 1.625rem;
    display: flex;
}
@media (width < 768px) {
    .l-header__button {
        display: none;
    }
}

/* main - メインコンテンツ */
.l-main {
    padding-block-start: var(--header-size--medium);
}

/* footer - フッター */
.l-footer {
    padding-block: 2.25rem;
}
@media (width < 768px) {
    .l-footer {
        padding-block: 1.875rem;
    }
}
.l-footer__container {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media (width < 768px) {
    .l-footer__container {
        grid-template-columns: unset;
    }
}
.l-footer__company {
    display: grid;
    padding-inline-end: 3rem;
    row-gap: .5rem;
}
@media (width < 768px) {
    .l-footer__company {
        grid-row: 2 / 3;
        padding-block-start: 1.25rem;
        padding-inline-end: 0;
    }
}
.l-footer__company-name {
    font-size: 1.5rem;
}
@media (width < 768px) {
    .l-footer__company-name {
        font-size: .875rem;
        text-align: center;
    }
}
.l-footer__company-address {
    font-size: .875rem;
}
@media (width < 768px) {
    .l-footer__company-address {
        font-weight: 400;
        text-align: center;
    }
}
.l-footer__service {
    align-items: center;
    border-inline-start: solid .125rem var(--color--gray-secondary);
    column-gap: 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    padding-inline-start: 3rem;
}
@media (width < 768px) {
    .l-footer__service {
        border-block-end: solid .0625rem var(--color--gray-secondary);
        border-inline-start: transparent;
        column-gap: .75rem;
        padding-block-end: 1.25rem;
        padding-inline-start: 0;
    }
}
.l-footer__service-logo {
    display: grid;
    img {
        inline-size: 12rem;
    }
}
@media (width < 768px) {
    .l-footer__service-logo {
        img {
            inline-size: 5rem;
        }
    }
}
.l-footer__service-description {
    font-size: .875rem;
}
@media (width < 768px) {
    .l-footer__service-description {
        font-size: .75rem;
        font-weight: 400;
    }
}

/* ========================================
// component - 共通パーツの設定
// ======================================== */
/* heading - セクション見出し */
.c-heading__lv2 {
    display: grid;
    justify-items: center;
    img {
        aspect-ratio: 1;
        filter: drop-shadow(.25rem .25rem .25rem color-mix(in srgb, var(--color--black-secondary) 25%, transparent));
        inline-size: 3.5rem;
    }
    span {
        font-size: 2rem;
        text-align: center;
        strong {
            color: var(--color--main-primary);
            font-size: 2.25rem;
        }
    }
}
@media (width < 768px) {
    .c-heading__lv2 {
        row-gap: .625rem;
        img {
            inline-size: 3rem;
        }
        span {
            font-size: 1.5rem;
            line-height: 1.3;
            strong {
                font-size: 1.75rem;
            }
        }
    }
}
.c-heading__lv3 {
    display: grid;
    justify-items: center;
    row-gap: 1.25rem;
}
@media (width < 768px) {
    .c-heading__lv3 {
        row-gap: .625rem;
    }
}
.c-heading__lv3-main {
    column-gap: 1.125rem;
    display: grid;
    font-size: 1.5rem;
    grid-template-columns: auto 1fr;
    text-align: center;
    img {
        aspect-ratio: 1 / 2;
        inline-size: 1.125rem;
    }
}
@media (width < 768px) {
    .c-heading__lv3-main {
        column-gap: .625rem;
        font-size: 1.125rem;
        img {
            inline-size: .875rem;
        }
    }
}
.c-heading__lv3-sub {
    font-size: 1.125rem;
    text-align: center;
    strong {
        color: var(--color--main-primary);
    }
}
@media (width < 768px) {
    .c-heading__lv3-sub {
        font-size: .875rem;
    }
}

/* button - ボタン */
.c-button {
    align-items: center;
    background-image: var(--color--accent-primary);
    block-size: 3.625rem;
    border-radius: calc(3.625rem / 2);
    box-shadow: 0 .125rem .125rem color-mix(in srgb, #008F87 80%, transparent);
    color: var(--color--base-primary);
    display: flex;
    font-size: 1.125rem;
    inline-size: 16.75rem;
    justify-content: center;
    letter-spacing: .18em;
    padding-block: .5rem;
    padding-inline: calc(1rem + .5rem) .5rem;
    position: relative;
    text-decoration: none;
    &::before {
        block-size: calc(100% - .375rem);
        border: solid .125rem var(--color--base-primary);
        border-radius: inherit;
        content: '';
        inline-size: calc(100% - .375rem);
        inset-block-start: 50%;
        inset-inline-start: 50%;
        position: absolute;
        translate: -50% -50%;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
    span {
        align-items: center;
        column-gap: 1.5rem;
        display: flex;
        &::after {
            aspect-ratio: 1;
            background-color: var(--color--base-primary);
            content: '';
            display: inline-block;
            flex-shrink: 0;
            inline-size: 1.5rem;
            mask-image: var(--icon--arrow);
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;
        }
    }
}
@media (any-hover: hover) {
    .c-button:hover {
        background-image: linear-gradient(to right, #8CE1DB, #8CEEE8);
        box-shadow: 0 .125rem .125rem color-mix(in srgb, #008F87 25%, transparent);
    }
}
@media (768px <= width) {
    .c-button.-large {
        block-size: 6.5rem;
        border-radius: calc(6.5rem / 2);
        box-shadow: 0 .25rem .25rem color-mix(in srgb, #008F87 80%, transparent);
        font-size: 2.25rem;
        inline-size: 30.875rem;
        padding-inline: calc(1.875rem + .5rem) .5rem;
        &::before {
            block-size: calc(100% - .75rem);
            inline-size: calc(100% - .75rem);
        }
        span {
            column-gap: 2.5rem;
            &::after {
                inline-size: 2.5rem;
            }
        }
    }
}
@media (width < 768px) {
    .c-button.-large {
        inline-size: 100%;
    }
}
@media (any-hover: hover) {
    .c-button.-large:hover {
        box-shadow: 0 .25rem .25rem color-mix(in srgb, #008F87 25%, transparent);
    }
}
.c-button.-campaign {
    block-size: 4rem;
    border-radius: calc(4rem / 2);
    box-shadow: unset;
    font-size: 1.375rem;
    inline-size: 100%;
    letter-spacing: .05em;
    &::before {
        content: none;
    }
    span {
        column-gap: 1rem;
        &::after {
            inline-size: 1.75rem;
        }
    }
}
@media (width < 768px) {
    .c-button.-campaign {
        block-size: 3rem;
        font-size: 1rem;
        span {
            &::after {
                inline-size: 1.25rem;
            }
        }
    }
}
@media (any-hover: hover) {
    .c-button.-campaign:hover {
        box-shadow: unset;
    }
}

/* tel - 電話リンク */
.c-tel {
    inline-size: fit-content;
    text-align: center;
}
.c-tel__copy {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: 0;
}
@media (width < 768px) {
    .c-tel__copy {
        display: none;
    }
}
.c-tel__link {
    align-items: center;
    color: var(--color--main-primary);
    column-gap: .25rem;
    display: flex;
    font-size: 2.1875rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    text-decoration: none;
    &::before {
        aspect-ratio: 1;
        background-color: var(--color--main-primary);
        content: '';
        display: inline-block;
        flex-shrink: 0;
        inline-size: 2.875rem;
        mask-image: var(--icon--tel);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}
@media (width < 768px) {
    .c-tel__link {
        font-size: .875rem;
        line-height: 1.5;
        &::before {
            inline-size: 1.25rem;
        }
    }
}
.c-tel.-large {
    .c-tel__copy {
        color: var(--color--base-primary);
        font-size: 1.875rem;
        letter-spacing: .05em;
        line-height: 1.125;
    }
    .c-tel__link {
        color: var(--color--base-primary);
        column-gap: .75rem;
        font-size: 2.75rem;
        &::before {
            background-color: var(--color--base-primary);
            inline-size: 3.25rem;
        }
    }
}
@media (width < 768px) {
    .c-tel.-large {
        .c-tel__copy {
            display: block;
            font-size: 1.375rem;
            letter-spacing: 0;
        }
        .c-tel__link {
            column-gap: .5rem;
            font-size: 1.875rem;
            letter-spacing: .03em;
            &::before {
                inline-size: 2rem;
            }
        }
    }
}

/* action - CTAセクション */
.c-action {
    background-color: var(--color--main-primary);
    padding-block-end: 2rem;
}
@media (768px <= width) {
    .c-action__container {
        display: grid;
        gap: 0 1.25rem;
        grid-template-columns: 1fr auto;
        grid-template-rows: repeat(3, auto);
    }
    .c-action__balloon {
        background-color: var(--color--base-primary);
        border-radius: 0 0 2.75rem 2.75rem;
        grid-column: 1 / 3;
        inline-size: fit-content;
        margin-inline: auto;
        padding-inline: 2.25rem;
        position: relative;
        &::after {
            background-color: inherit;
            block-size: .75rem;
            clip-path: polygon(0 0, 50% 100%, 100% 0);
            content: '';
            inline-size: 1rem;
            inset-block-end: -.75rem;
            inset-inline-start: 50%;
            position: absolute;
            translate: -50% 0;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
    }
    .c-action__balloon-copy {
        align-items: center;
        color: var(--color--main-primary);
        display: flex;
        font-size: 1.5rem;
        justify-content: center;
        letter-spacing: .38em;
        text-align: center;
        &::before,
        &::after {
            background-color: var(--color--main-primary);
            block-size: 1.875rem;
            border-radius: calc(.1875rem / 2);
            content: '';
            flex-shrink: 0;
            inline-size: .1875rem;
        }
        &::before {
            margin-inline-end: calc(1rem + (.38em / 2));
            rotate: -30deg;
        }
        &::after {
            margin-inline-start: 1rem;
            rotate: 30deg;
        }
        strong {
            span {
                font-size: 1.875rem;
            }
        }
    }
    .c-action__title {
        background-color: var(--color--base-primary);
        border-radius: .25rem;
        display: grid;
        grid-column: 1 / 3;
        grid-template-columns: 17.875rem 1fr;
        margin-block-start: 1.5rem;
        min-block-size: 4.75rem;
        overflow: hidden;
    }
    .c-action__title-sub {
        background-color: var(--color--main-secondary);
        display: grid;
        font-size: 2rem;
        letter-spacing: .1em;
        place-items: center;
        text-align: center;
        strong {
            span {
                aspect-ratio: 1;
                background-color: var(--color--base-primary);
                border-radius: calc(4rem / 2);
                color: var(--color--main-primary);
                display: inline-flex;
                font-size: 2.75rem;
                inline-size: 4rem;
                justify-content: center;
                letter-spacing: 0;
                margin-inline-end: .1em;
                position: relative;
            }
        }
    }
    .c-action__title-main {
        display: grid;
        font-size: 2.375rem;
        letter-spacing: .08em;
        place-items: center;
        text-align: center;
        strong {
            color: var(--color--main-primary);
            span {
                font-size: 2.875rem;
            }
        }
    }
}
.c-action__tel {
    display: grid;
    justify-items: center;
    margin-block-start: 1rem;
    row-gap: .5rem;
}
.c-action__tel-list {
    display: flex;
    gap: .375rem;
    inline-size: 100%;
    justify-content: space-between;
}
.c-action__tel-item {
    background-color: var(--color--main-secondary);
    border-radius: calc(1.875rem / 2);
    flex-grow: 1;
    font-size: 1.125rem;
    letter-spacing: 0;
    padding-block: .125rem .0625rem;
    text-align: center;
}
.c-action__button {
    margin-block-start: auto;
}
@media (width < 768px) {
    .c-action {
        padding-block: 2.5rem;
    }
    .c-action__container {
        position: relative;
    }
    .c-action__balloon {
        align-items: center;
        aspect-ratio: 1;
        background-color: var(--color--main-secondary);
        border-radius: calc(7.5rem / 2);
        display: flex;
        inline-size: 7.5rem;
        justify-content: end;
        inset-block-start: .5rem;
        inset-inline-end: 0;
        padding-inline: .875rem;
        position: absolute;
        z-index: 2;
        &::after {
            background-color: inherit;
            block-size: .75rem;
            clip-path: polygon(50% 0, 0% 100%, 100% 50%);
            content: '';
            inline-size: 1rem;
            inset-block-end: .5rem;
            inset-inline-start: .5rem;
            position: absolute;
            z-index: 1;
        }
    }
    .c-action__balloon-copy {
        display: grid;
        font-size: 1.25rem;
        line-height: 1.25;
        & > span {
            background-color: var(--color--main-primary);
            border-radius: .25rem;
            color: var(--color--main-secondary);
            font-size: .875rem;
            inset-block-end: .875rem;
            inset-inline-start: 50%;
            letter-spacing: .1em;
            padding-block: .125rem;
            padding-inline: .25rem;
            position: absolute;
            translate: 0 -50%;
            writing-mode: vertical-rl;
        }
        strong {
            font-size: 1.25rem;
            margin-inline-start: -.25rem;
            span {
                font-size: 2rem;
            }
        }
    }
    .c-action__title-sub {
        font-size: 1.75rem;
        line-height: 1.125;
        position: relative;
        &::before {
            background-color: var(--color--base-primary);
            block-size: 100%;
            content: '';
            inline-size: 100vw;
            inset-block-start: 0;
            inset-inline-start: 0;
            margin-inline-start: calc(50% - 50vw);
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
        strong {
            color: var(--color--main-primary);
            font-size: 2.25rem;
        }
    }
    .c-action__title-main {
        color: var(--color--base-primary);
        font-size: 3rem;
        line-height: 1.25;
        margin-block-start: .75rem;
        strong {
            font-size: 2.25rem;
            span {
                color: var(--color--main-secondary);
                font-size: 3rem;
            }
        }
    }
    .c-action__tel-item {
        font-size: .75rem;
        padding-block: .0625rem;
    }
    .c-action__button {
        margin-block-start: 1rem;
    }
}

/* contact-form - フォーム */
.c-contact-form {
    background-color: var(--color--base-primary);
    border-radius: .5rem;
    box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--color--black-primary) 8%, transparent);
    display: grid;
    grid-template-rows: auto 1fr;
    padding-block: 2.5rem 3rem;
    padding-inline: 3rem;
    row-gap: 1.5rem;
}
@media (width < 768px) {
    .c-contact-form {
        border-radius: .375rem;
        padding-block: 2rem;
        padding-inline: 1.25rem;
    }
}
.c-contact-form__title {
    display: grid;
    font-weight: 600;
    row-gap: .25rem;
    text-align: center;
}
.c-contact-form__title-sub {
    align-items: center;
    color: var(--color--accent-primary);
    column-gap: .5rem;
    display: flex;
    justify-content: center;
    &::before,
    &::after {
        background-color: var(--color--accent-primary);
        block-size: 1rem;
        content: '';
        inline-size: .0625rem;
        translate: 0 .0625rem;
    }
    &::before {
        rotate: -30deg;
    }
    &::after {
        rotate: 30deg;
    }
}
@media (width < 768px) {
    .c-contact-form__title-sub {
        font-size: .875rem;
    }
}
.c-contact-form__title-main {
    font-size: 1.75rem;
    text-decoration: underline;
    text-decoration-color: var(--color--utility-marker);
    text-decoration-skip-ink: none;
    text-decoration-thickness: .75rem;
    text-underline-offset: -.25rem;
}
@media (width < 768px) {
    .c-contact-form__title-main {
        font-size: 1.5rem;
        text-decoration-thickness: .5rem;
        text-underline-offset: -.125rem;
    }
}
.c-contact-form__group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-block-end: auto;
    gap: 1.75rem 2.5rem;
    & > * {
        grid-column: span 2;
    }
    & > .-half {
        grid-column: span 1;
    }
}
@media (width < 768px) {
    .c-contact-form__group {
        gap: 1.25rem 1rem;
        grid-template-columns: unset;
        & > * {
            grid-column: unset;
        }
        & > .-half {
            grid-column: unset;
        }
    }
}
.c-contact-form__field {
    display: grid;
    row-gap: .5rem;
}
.c-contact-form__header {
    align-items: center;
    column-gap: .625rem;
    display: flex;
}
.c-contact-form__label {
    font-weight: 600;
}
.c-contact-form__regulation {
    background-color: var(--color--gray-primary);
    border-radius: .125rem;
    color: var(--color--base-primary);
    font-size: .75rem;
    padding-block: .0625rem;
    padding-inline: .625rem;
}
.c-contact-form__field:has([required]) {
    .c-contact-form__regulation {
        background-color: var(--color--main-primary);
    }
}
.c-contact-form__body {
    display: grid;
}
.c-contact-form__input {
    background-color: var(--color--white-secondary);
    block-size: 2.625rem;
    border-radius: .25rem;
    color: var(--color--font-primary);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    padding-block: 0;
    padding-inline: 1rem;
    &::placeholder {
        color: var(--color--gray-primary);
    }
}
@media (width < 768px) {
    .c-contact-form__input {
        font-size: max(16px, 1rem);
    }
}
.c-contact-form__validation {
    color: var(--color--utility-invalid);
    font-size: .75rem;
    line-height: var(--line-height--sm);
    margin-block-start: .25rem;
    &:empty {
        block-size: 0;
        margin-block-start: 0;
    }
}
.c-contact-form__acceptance {
    text-align: center;
}
.c-contact-form__acceptance-copy {
    font-weight: 400;
    a[target="_blank"] {
        color: var(--color--font-primary);
        &::after {
            content: none;
        }
    }
}
@media (width < 768px) {
    .c-contact-form__acceptance-copy {
        font-size: .75rem;
    }
}
.c-contact-form__acceptance-input {
    appearance: auto;
}
.c-contact-form__submit {
    display: flex;
    justify-content: center;
}
.c-contact-form__submit-label {
    &:has(:disabled) {
        /* background-color: var(--color--accent-primary); */
        background-image: var(--color--accent-primary);
        opacity: 0.4;
        /* background-image: unset; */
        /* box-shadow: unset; */
        pointer-events: none;
    }
}
.c-contact-form__submit-input {
    cursor: pointer !important;
    letter-spacing: inherit;
}

/* ========================================
// project - 各セクションの設定
// ======================================== */
/* mv - メインビジュアル */
.p-mv {
    background-image: url('../../../images/lp/meo/mv/image_background@2x.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    block-size: 52.25rem;
    position: relative;
}
@media (width < 768px) {
    .p-mv {
        background-image: url('../../../images/lp/meo/mv/sp-image_background@2x.png');
        block-size: unset;
    }
}
.p-mv__container {
    block-size: 100%;
    display: grid;
    place-items: center start;
}
.p-mv__info {
    display: grid;
    justify-items: center;
    padding-block-start: 1.5rem;
    position: relative;
    row-gap: .5rem;
    z-index: 2;
}
@media (width < 768px) {
    .p-mv__info {
        justify-items: start;
        padding-block-start: 3.5rem;
        & > *:not(.p-mv__campaign) {
            justify-self: center;
        }
    }
}
.p-mv__copy {
    display: grid;
    justify-items: center;
    row-gap: 1.5rem;
}
@media (width < 768px) {
    .p-mv__copy {
        row-gap: 1rem;
    }
}
.p-mv__copy-sub {
    display: grid;
    font-size: 2.25rem;
    line-height: 1.125;
    row-gap: .625rem;
    span {
        text-align: center;
        &:nth-child(2) {
            letter-spacing: .2em;
            padding-inline-start: .2em;
        }
    }
}
@media (width < 768px) {
    .p-mv__copy-sub {
        font-size: 2rem;
        row-gap: .375rem;
    }
}
.p-mv__copy-main {
    inline-size: 19.75rem;
}
@media (width < 768px) {
    .p-mv__copy-main {
        inline-size: 100%;
    }
}
.p-mv__badge {
    inline-size: 21.875rem;
}
@media (width < 768px) {
    .p-mv__badge {
        grid-row: 4 / 5;
        inline-size: 100%;
    }
}
.p-mv__badge-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.p-mv__badge-item {
    align-items: center;
    aspect-ratio: 1;
    background-image: url('../../../images/lp/meo/mv/image_badge@2x.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
}
.p-mv__badge-copy {
    font-size: 1.25rem;
    line-height: 1.375;
    padding-block-start: 1.125rem;
    text-align: center;
}
.p-mv__campaign {
    align-items: center;
    aspect-ratio: 28 / 27;
    background-image: url('../../../images/lp/meo/mv/image_campaign@2x.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: grid;
    inline-size: 14rem;
    inset-block-end: 5.5rem;
    inset-inline-start: -10rem;
    position: absolute;
}
@media (width < 768px) {
    .p-mv__campaign {
        inline-size: 10rem;
        margin-block-start: 10.625rem;
        position: static;
    }
}
.p-mv__campaign-copy {
    color: var(--color--base-primary);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.25;
    padding-block-start: .5rem;
    text-align: center;
    text-shadow: 0 0 .25rem color-mix(in srgb, var(--color--base-primary) 60%, transparent);
    strong {
        font-size: 1.75rem;
        span {
            font-size: 2.5rem;
            letter-spacing: .2em;
        }
    }
}
@media (width < 768px) {
    .p-mv__campaign-copy {
        font-size: .875rem;
        strong {
            font-size: 1.25rem;
            span {
                font-size: 1.75rem;
            }
        }
    }
}
.p-mv__button {
    inline-size: 100%;
}
.p-mv__image {
    inline-size: 51.58730159%;
    inset-block-start: 50%;
    inset-inline-end: 0;
    max-inline-size: 48.75rem;
    position: absolute;
    translate: 0 -50%;
    z-index: 1;
}
@media (width < 768px) {
    .p-mv__image {
        inline-size: 100%;
        max-inline-size: unset;
    }
}

/* problem - こんなお悩みありませんか？ */
.p-problem {
    background-image: url('../../../images/lp/meo/problem/image_background-01@2x.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    &::after {
        background-image: url('../../../images/lp/meo/problem/image_background-02@2x.png');
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        block-size: 5.625rem;
        content: '';
        inline-size: 100%;
        inset-block-end: -5.625rem;
        inset-inline-start: 0;
        position: absolute;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
}
@media (width < 768px) {
    .p-problem {
        background-image: url('../../../images/lp/meo/problem/sp-image_background-01@2x.png');
        &::after {
            background-image: url('../../../images/lp/meo/problem/sp-image_background-02@2x.png');
            block-size: 2.5rem;
            inset-block-end: -2.5rem;
        }
    }
}
.p-problem__list {
    block-size: 26.25rem;
    display: grid;
    grid-template-columns: 8.7% 30.87% 4.78% 5.22% 10% .65% 39.78%;
    grid-template-rows: 16.19% 9.05% 16.19% 1.43% 18.1% 3.33% 35.71%;
    inline-size: 57.5rem;
    margin-inline: auto;
    &::before {
        aspect-ratio: 1;
        background-image: url('../../../images/lp/meo/problem/image_illustration@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        display: block;
        grid-column: 4 / 6;
        grid-row: 3 / 6;
        inline-size: 100%;
    }
}
@media (width < 768px) {
    .p-problem__list {
        block-size: unset;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: unset;
        inline-size: unset;
        padding-block-start: 1.5rem;
        &::before {
            grid-column: 2 / 4;
            grid-row: 4 / 5;
            inline-size: 8.75rem;
        }
    }
}
.p-problem__item-copy {
    color: var(--color--base-primary);
    font-size: 1.125rem;
    text-align: center;
}
@media (width < 768px) {
    .p-problem__item-copy {
        font-size: .875rem;
    }
}
.p-problem__item {
    display: grid;
    place-items: center;
    position: relative;
    &::before {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        block-size: 100%;
        content: '';
        inline-size: 100%;
        opacity: 80%;
        position: absolute;
        z-index: 1;
    }
    &:nth-child(1) {
        block-size: 10.875rem;
        grid-column: 1 / 3;
        grid-row: 1 / 4;
        inline-size: 22.75rem;
        &::before {
            background-image: url('../../../images/lp/meo/problem/image_item-01.svg');
        }
        .p-problem__item-copy {
            translate: -1.5rem 0;
        }
    }
    &:nth-child(2) {
        block-size: 12.5rem;
        grid-column: 7 / 8;
        grid-row: 2 / 7;
        inline-size: 22.75rem;
        &::before {
            background-image: url('../../../images/lp/meo/problem/image_item-02.svg');
        }
        .p-problem__item-copy {
            translate: 1rem 0;
        }
    }
    &:nth-child(3) {
        block-size: 15rem;
        grid-column: 2 / 5;
        grid-row: 5 / 8;
        inline-size: 23.25rem;
        &::before {
            background-image: url('../../../images/lp/meo/problem/image_item-03.svg');
        }
        .p-problem__item-copy {
            translate: 0 1.25rem;
        }
    }
    & > * {
        position: relative;
        z-index: 2;
    }
}
@media (width < 768px) {
    .p-problem__item {
        margin-block-start: -1.5rem;
        &::before {
            background-position: left center;
        }
        &:nth-child(1) {
            block-size: 7.5rem;
            grid-column: 1 / 4;
            grid-row: unset;
            inline-size: unset;
            &::before {
                background-image: url('../../../images/lp/meo/problem/sp-image_item-01.svg');
            }
            .p-problem__item-copy {
                translate: -1.5rem 0;
            }
        }
        &:nth-child(2) {
            block-size: 9.5rem;
            grid-column: 2 / 5;
            grid-row: unset;
            inline-size: unset;
            &::before {
                background-image: url('../../../images/lp/meo/problem/sp-image_item-02.svg');
            }
            .p-problem__item-copy {
                translate: .75rem 0;
            }
        }
        &:nth-child(3) {
            block-size: 12rem;
            grid-column: 1 / 4;
            grid-row: unset;
            inline-size: unset;
            &::before {
                background-image: url('../../../images/lp/meo/problem/sp-image_item-03.svg');
            }
            .p-problem__item-copy {
                translate: 0 -.5rem;
            }
        }
    }
}

/* solution - こんなお悩みありませんか？ */
.p-solution {
    padding-block-start: calc(5.625rem + var(--section-size--medium));
}
@media (width < 768px) {
    .p-solution {
        padding-block-start: calc(3.125rem + var(--section-size--medium));
    }
}
.p-solution__list {
    counter-reset: solution__item-counter;
    display: grid;
    row-gap: 1.875rem;
}
@media (width < 768px) {
    .p-solution__list {
        row-gap: 1.25rem;
    }
}
.p-solution__item {
    background-color: var(--color--base-primary);
    border-radius: .375rem;
}
.p-solution__item-container {
    display: grid;
    gap: 1.875rem 0;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 10.5rem 1fr;
    padding-inline: 6.25rem;
}
@media (width < 768px) {
    .p-solution__item-container {
        gap: 1rem 0;
        grid-template-columns: unset;
        grid-template-rows: repeat(3, auto);
        justify-items: center;
        padding-block: 2.25rem;
        padding-inline: 1rem;
    }
}
.p-solution__item-title {
    font-size: 1.5rem;
    margin-block-start: auto;
    &::before {
        color: var(--color--main-secondary);
        content: counter(solution__item-counter, decimal-leading-zero);
        counter-increment: solution__item-counter;
        display: inline-block;
        font-family: var(--font-family--en);
        font-size: 1.875rem;
        inline-size: 100%;
        line-height: 1;
        margin-block-end: 1.5rem;
    }
    strong {
        color: var(--color--main-primary);
    }
}
@media (width < 768px) {
    .p-solution__item-title {
        font-size: 1.125rem;
        text-align: center;
        &::before {
            margin-block-end: 1rem;
            text-align: center;
        }
    }
}
.p-solution__item-description {
    font-size: 1.125rem;
}
@media (width < 768px) {
    .p-solution__item-description {
        font-size: .875rem;
        font-weight: 400;
    }
}
.p-solution__item-image {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    &:is(.p-solution__item:nth-child(2n) *) {
        grid-column: 1 / 2;
    }
}
@media (width < 768px) {
    .p-solution__item-image {
        grid-column: unset;
        grid-row: 2 / 3;
        img {
            block-size: 11rem;
            inline-size: auto;
        }
    }
}

/* case - 業種業界問わず、支援実績ございます */
.p-case {
    padding-block-end: calc(var(--section-size--medium) * 2);
}

/* support - 主な対応業種 */
.p-support__body {
    position: relative;
    &::before {
        aspect-ratio: 13 / 14;
        background-image: url('../../../images/lp/meo/support/image_illustration@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        inline-size: 9.75rem;
        inset-block-start: -7.5rem;
        inset-inline-start: -9.75rem;
        position: absolute;
        z-index: 1;
    }
}
@media (width < 768px) {
    .p-support__body {
        &::before {
            content: none;
        }
    }
}
.p-support__list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
}
@media (width < 768px) {
    .p-support__list {
        gap: 1.25rem;
        grid-template-columns: repeat(3, 1fr);
    }
}
.p-support__item {
    display: grid;
    gap: .625rem 0;
    grid-row: span 2;
    grid-template-rows: subgrid;
}
@media (width < 768px) {
    .p-support__item {
        gap: .375rem 0;
        &:last-child {
            grid-column: span 3;
            grid-row: unset;
            grid-template-rows: unset;
        }
    }
}
.p-support__item-image {
    background-color: var(--color--base-tertiary);
    border-radius: .25rem;
    display: grid;
    justify-items: center;
    padding-block: 1.75rem;
    img {
        aspect-ratio: 1;
        inline-size: 4rem;
    }
}
@media (width < 768px) {
    .p-support__item-image {
        padding-block: 1.25rem;
    }
}
.p-support__item-title {
    font-size: .875rem;
    text-align: center;
}
@media (width < 768px) {
    .p-support__item-title {
        font-size: .75rem;
    }
}
.p-support__item-guide {
    color: var(--color--main-secondary);
    display: grid;
    font-size: 1.5rem;
    place-items: center;
}
@media (width < 768px) {
    .p-support__item-guide {
        font-size: .875rem;
        justify-items: end;
    }
}

/* plan - サービスプラン */
.p-plan {
    padding-block-end: calc(var(--section-size--medium) * 2);
    & > * {
        position: relative;
        z-index: 2;
    }
}
.p-plan__body {
    position: relative;
    &::before {
        aspect-ratio: 220 / 137;
        background-image: url('../../../images/lp/meo/plan/image_illustration-01@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        inline-size: 27.5rem;
        inset-block-end: 100%;
        inset-inline-end: calc(-16rem - 4.5rem);
        position: absolute;
    }
    &::after {
        aspect-ratio: 50 / 31;
        background-image: url('../../../images/lp/meo/plan/image_illustration-02@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        inline-size: 12.5rem;
        inset-block-start: 57.22222222%;
        inset-inline-end: 100%;
        position: absolute;
    }
}
@media (width < 768px) {
    .p-plan__body {
        &::before {
            content: none;
        }
        &::after {
            content: none;
        }
    }
}
.p-plan__list {
    column-gap: 3.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media (width < 768px) {
    .p-plan__list {
        column-gap: unset;
        grid-template-columns: unset;
        row-gap: .625rem;
    }
}
.p-plan__item {
    display: grid;
    grid-row: span 10;
    grid-template-rows: subgrid;
    &.-trial {
        --plan--color-main: var(--color--main-primary);
        --plan--color-base: var(--color--base-tertiary);
    }
    &.-basic {
        --plan--color-main: var(--color--orange-secondary);
        --plan--color-base: var(--color--orange-tertiary);
    }
}
@media (width < 768px) {
    .p-plan__item {
        grid-row: unset;
        grid-template-rows: unset;
    }
}
.p-plan__item-container {
    border: solid .3125rem var(--plan--color-main);
    border-radius: .375rem;
    display: grid;
    grid-row: span 9;
    grid-template-rows: subgrid;
}
@media (width < 768px) {
    .p-plan__item-container {
        border: solid .125rem var(--plan--color-main);
        border-radius: 0;
        grid-row: unset;
        grid-template-rows: unset;
    }
}
.p-plan__item-header {
    background-color: var(--plan--color-main);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 1.5rem 1.75rem;
    padding-inline: 2.5rem;
    position: relative;
    row-gap: .625rem;
}
@media (width < 768px) {
    .p-plan__item-header {
        padding-block: .625rem .75rem;
        padding-inline: 1rem;
        row-gap: unset;
    }
}
.p-plan__item-title {
    color: var(--color--base-primary);
    font-size: 1.5rem;
    text-align: center;
}
@media (width < 768px) {
    .p-plan__item-title {
        font-size: 1rem;
    }
}
.p-plan__item-subtitle {
    color: var(--color--base-primary);
    font-size: 1.125rem;
    text-align: center;
}
@media (width < 768px) {
    .p-plan__item-subtitle {
        font-size: .875rem;
        font-weight: 400;
    }
}
.p-plan__item-recommended {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--color--main-secondary);
    border-radius: calc(6.5rem / 2);
    display: flex;
    font-size: 1.125rem;
    inline-size: 6.5rem;
    inset-block-start: -3rem;
    inset-inline-start: calc(1.5rem - .3125rem);
    justify-content: center;
    position: absolute;
    &::after {
        aspect-ratio: 1;
        background-color: var(--color--main-secondary);
        clip-path: polygon(50% 0%, 0 50%, 100% 100%);
        content: '';
        inline-size: 1rem;
        inset-block-end: .375rem;
        inset-inline-end: .375rem;
        position: absolute;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
}
@media (width < 768px) {
    .p-plan__item-recommended {
        font-size: .875rem;
        inline-size: 5.25rem;
        inset-inline-start: unset;
        inset-inline-end: .5rem;
        &::after {
            clip-path: polygon(50% 0, 0 100%, 100% 50%);
            inline-size: .625rem;
            inset-inline-end: unset;
            inset-inline-start: .375rem;
        }
    }
}
.p-plan__item-body {
    background-color: var(--color--base-primary);
    display: grid;
    grid-row: span 8;
    grid-template-rows: subgrid;
    padding-block: 1.875rem;
    padding-inline: 2.5rem;
    row-gap: 1.5rem;
}
@media (width < 768px) {
    .p-plan__item-body {
        grid-row: unset;
        grid-template-rows: unset;
        padding-inline: 1rem;
    }
}
.p-plan__price {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 1.125rem;
}
@media (width < 768px) {
    .p-plan__price {
        grid-row: unset;
        grid-template-rows: unset;
    }
}
.p-plan__price-title {
    font-size: .875rem;
    font-weight: 400;
    text-align: center;
}
.p-plan__price-total {
    font-size: 1.5rem;
    text-align: center;
    span {
        font-size: 1.875rem;
    }
    strong {
        color: var(--color--main-primary);
    }
}
.p-plan__price-monthly {
    font-size: .875rem;
    text-align: center;
}
.p-plan__option {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 1rem;
}
@media (width < 768px) {
    .p-plan__option {
        grid-row: unset;
        grid-template-rows: unset;
        row-gap: .625rem;
    }
}
.p-plan__option-article {
    background-color: var(--plan--color-base);
    display: grid;
    padding-block: 1rem;
    padding-inline: 1rem;
    row-gap: .625rem;
}
.p-plan__option-title {
    font-size: .875rem;
    text-align: center;
}
.p-plan__option-detail {
    display: grid;
    row-gap: .625rem;
}
.p-plan__option-description {
    font-size: .875rem;
    font-weight: 400;
    text-align: center;
    img,
    svg {
        aspect-ratio: 1;
        inline-size: 1.25rem;
    }
    svg path {
        fill: #000000;
    }
}
.p-plan__notice {
    display: grid;
    justify-items: end;
    margin-block-start: .625rem;
}
@media (width < 768px) {
    .p-plan__notice {
        margin-block-start: .5rem;
    }
}

/* comparison - 他サービスとの比較 */
.p-comparison {
    padding-block-end: calc(var(--section-size--medium) * 2);
}
.p-comparison__container {
    position: relative;
    &::after {
        aspect-ratio: 63 / 64;
        background-image: url('../../../images/lp/meo/comparison/image_illustration-02@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        inline-size: 7.875rem;
        inset-block-start: calc(100% + 1rem);
        inset-inline-end: 100%;
        position: absolute;
    }
}
@media (width < 768px) {
    .p-comparison__container {
        &::after {
            content: none;
        }
    }
}
.p-comparison__body {
    position: relative;
    &::before {
        aspect-ratio: 64 / 65;
        background-image: url('../../../images/lp/meo/comparison/image_illustration-01@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        inline-size: 8rem;
        inset-block-end: 100%;
        inset-inline-start: calc(100% - 2rem);
        position: absolute;
    }
}
@media (width < 768px) {
    .p-comparison__body {
        &::before {
            content: none;
        }
    }
}
@media (width < 768px) {
    .p-comparison__table {
        inline-size: 43.5rem;
    }
}
.p-comparison__table-body {
    display: grid;
    gap: .375rem;
    grid-template-columns: 10.25rem 20.5rem 1fr 1fr;
    padding-block: .375rem;
}
@media (width < 768px) {
    .p-comparison__table-body {
        gap: .1875rem;
        grid-template-columns: 3.125rem 15.375rem 1fr 1fr;
        padding-block: .1875rem;
    }
}
.p-comparison__table-row {
    display: grid;
    grid-column: span 4;
    grid-template-columns: subgrid;
    &:nth-child(1) {
        :nth-child(2)::after {
            border-radius: .375rem 0 0 0;
        }
        :nth-child(4) {
            border-radius: 0 .375rem 0 0;
        }
    }
    &:nth-child(2) {
        :nth-child(1) {
            border-radius: .375rem 0 0 0;
        }
    }
    &:nth-child(4) {
        :nth-child(1) {
            border-radius:  0 0 0 .375rem;
        }
        :nth-child(4) {
            border-radius:  0 0 .375rem 0;
        }
    }
}
.p-comparison__table-header {
    align-items: center;
    color: var(--color--base-primary);
    display: flex;
    font-size: 1.125rem;
    justify-content: center;
    min-block-size: 4.5rem;
    padding-block: .625rem;
    padding-inline: 1.25rem;
    &[data-comparison-column="topic"] {
        background-color: transparent;
    }
    &[data-comparison-column="main"] {
        position: relative;
        &::after {
            background-color: var(--color--main-primary);
            block-size: calc(100% + (.375rem * 2));
            content: '';
            inline-size: 100%;
            inset-block-start: -.375rem;
            inset-inline-start: 0;
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
        span {
            align-items: center;
            display: flex;
            gap: .875rem;
            justify-content: center;
        }
        strong {
            background-color: var(--color--base-primary);
            border-radius: .25rem;
            color: var(--color--main-primary);
            padding-block: .125rem .0625rem;
            padding-inline: .5rem;
        }
        svg {
            inline-size: 10.75rem;
        }
        svg path {
            fill: var(--color--base-primary);
        }
    }
    &[data-comparison-column="other"] {
        background-color: var(--color--gray-primary);
        letter-spacing: .1em;
    }
}
@media (width < 768px) {
    .p-comparison__table-header {
        min-block-size: 2.375rem;
        padding-block: .5rem;
        padding-inline: .5rem;
        &[data-comparison-column="main"] {
            &::after {
                block-size: calc(100% + (.1875rem * 2));
                inset-block-start: -.1875rem;
            }
            span {
                gap: .5rem;
            }
            strong {
                font-size: .875rem;
            }
            svg {
                inline-size: 7.75rem;
            }
        }
    }
}
.p-comparison__table-data {
    align-items: center;
    display: flex;
    font-size: 1.125rem;
    justify-content: center;
    min-block-size: 7rem;
    padding-block: .625rem;
    padding-inline: 1.25rem;
    position: relative;
    &::before {
        aspect-ratio: 1;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        inline-size: 5.625rem;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        position: absolute;
        translate: -50% -50%;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
    &[data-comparison-column="topic"] {
        background-color: var(--color--main-secondary);
        &::before {
            content: none;
        }
    }
    &[data-comparison-column="main"] {
        background-color: var(--color--white-primary);
        position: relative;
        &::after {
            block-size: calc(100% + .375rem);
            border-inline: solid .375rem var(--color--main-primary);
            content: '';
            inline-size: 100%;
            inset-block-start: -.375rem;
            inset-inline-start: 0;
            position: absolute;
        }
        &:is(.p-comparison__table-row:nth-child(4) > *) {
            &::after {
                block-size: calc(100% + (.375rem * 2));
                border-block-end: solid .375rem var(--color--main-primary);
            }
        }
        strong {
            color: var(--color--main-primary);
        }
    }
    &[data-comparison-column="other"] {
        background-color: var(--color--white-secondary);
    }
    &[data-comparison-evaluation="1"] {
        &::before {
            background-image: url('../../../images/lp/meo/comparison/icon_cross.svg');
        }
    }
    &[data-comparison-evaluation="2"] {
        &::before {
            background-image: url('../../../images/lp/meo/comparison/icon_triangle.svg');
        }
    }
    &[data-comparison-evaluation="3"] {
        &::before {
            background-image: url('../../../images/lp/meo/comparison/icon_circle-single.svg');
        }
    }
    &[data-comparison-evaluation="4"] {
        &::before {
            background-image: url('../../../images/lp/meo/comparison/icon_circle-double.svg');
        }
    }
}
@media (width < 768px) {
    .p-comparison__table-data {
        font-size: .875rem;
        padding-block: .5rem;
        &[data-comparison-column="topic"] {
            letter-spacing: .1em;
            min-block-size: unset;
            writing-mode: vertical-rl;
        }
        &[data-comparison-column="main"] {
            &::after {
                border-inline: solid .1875rem var(--color--main-primary);
                inset-block-start: -.1875rem;
            }
            &:is(.p-comparison__table-row:nth-child(4) > *) {
                &::after {
                    block-size: calc(100% + (.1875rem * 2));
                    border-block-end: solid .1875rem var(--color--main-primary);
                }
            }
        }
    }
}

/* flow - ご利用の流れ */
.p-flow__body {
    margin-block-start: calc(3.125rem + 2.625rem);
    position: relative;
    &::after {
        aspect-ratio: 13 / 10;
        background-image: url('../../../images/lp/meo/flow/image_illustration@2x.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        inline-size: 13rem;
        inset-block-end: -2.5rem;
        inset-inline-start: 100%;
        position: absolute;
    }
}
@media (width < 768px) {
    .p-flow__body {
        margin-block-start: calc(1.875rem * 2);
        &::after {
            content: none;
        }
    }
}
.p-flow__list {
    counter-reset: flow__item-counter;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(5, 1fr);
}
@media (width < 768px) {
    .p-flow__list {
        gap: 2.25rem;
        grid-template-columns: unset;
    }
}
.p-flow__item {
    background-color: var(--color--base-primary);
    border: solid .1875rem var(--color--main-secondary);
    border-radius: .25rem;
    box-shadow: .25rem .25rem .25rem color-mix(in srgb, var(--color--black-secondary) 25%, transparent);
    position: relative;
    &:not(:last-child)::after {
        aspect-ratio: 4 / 5;
        background-color: var(--color--main-secondary);
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        content: '';
        inline-size: 1rem;
        inset-block-start: 50%;
        inset-inline-start: calc(100% + .1875rem + .375rem);
        position: absolute;
        translate: 0 -50%;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
}
@media (width < 768px) {
    .p-flow__item {
        &:not(:last-child)::after {
            content: none;
        }
    }
}
.p-flow__item-container {
    block-size: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: center;
    padding-block: 2.75rem;
    padding-inline: calc(1rem - .1875rem);
    row-gap: 1.25rem;
    &::before {
        content: counter(flow__item-counter);
        counter-increment: flow__item-counter;
        font-family: var(--font-family--en);
        font-size: 1.375rem;
        inset-block-start: -2.25rem;
        inset-inline-start: 50%;
        letter-spacing: 0;
        position: absolute;
        translate: -50% 0;
        z-index: 2;
    }
    &::after {
        aspect-ratio: 1;
        background-color: var(--color--main-secondary);
        content: '';
        inline-size: 4rem;
        inset-block-start: -2.75rem;
        inset-inline-start: 50%;
        mask-image: url('../../../images/lp/meo/flow/icon_pin-number.svg');
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        position: absolute;
        translate: -50% 0;
        z-index: 1;
    }
}
@media (width < 768px) {
    .p-flow__item-container {
        align-items: center;
        gap: .625rem 1.25rem;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(2, auto);
        padding-block: 1rem;
        &::before {
            font-size: .75rem;
            inset-block-start: -1.5rem;
        }
        &::after {
            inline-size: 2.25rem;
            inset-block-start: -1.75rem;
        }
    }
}
.p-flow__item-image {
    display: flex;
    justify-content: center;
    img {
        aspect-ratio: 1;
        inline-size: 4.25rem;
    }
}
@media (width < 768px) {
    .p-flow__item-image {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
}
.p-flow__item-balloon {
    align-items: center;
    color: var(--color--main-primary);
    display: flex;
    font-size: .875rem;
    inline-size: 9.6rem;
    inset-block-end: calc(100% + 3.25rem);
    inset-inline-start: 50%;
    justify-content: center;
    position: absolute;
    text-align: center;
    translate: -50% 0;
    z-index: 1;
    &::before,
    &::after {
        background-color: var(--color--main-primary);
        block-size: 1.875rem;
        border-radius: calc(.1875rem / 2);
        content: '';
        flex-shrink: 0;
        inline-size: .1875rem;
    }
    &::before {
        margin-inline-end: 1rem;
        rotate: -35deg;
    }
    &::after {
        margin-inline-start: 1rem;
        rotate: 35deg;
    }
}
@media (width < 768px) {
    .p-flow__item-balloon {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        position: static;
        translate: 0 0;
    }
}
.p-flow__item-title {
    font-size: .875rem;
    text-align: center;
}
@media (width < 768px) {
    .p-flow__item-title {
        background-color: var(--color--main-secondary);
        border-radius: .75rem;
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        padding-inline: .5rem;
    }
}
.p-flow__item-description {
    font-size: .875rem;
    font-weight: 400;
}
@media (width < 768px) {
    .p-flow__item-description {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
}

/* faq - よくあるご質問 */
.p-faq__list {
    display: grid;
    row-gap: 1.5rem;
}
@media (width < 768px) {
    .p-faq__list {
        row-gap: 1.25rem;
    }
}
.p-faq__item {
    border-radius: .25rem;
    overflow: hidden;
}
.p-faq__item-visible {
    cursor: pointer;
    display: block;
    &::-webkit-details-marker {
        display: none;
    }
}
.p-faq__item-question {
    align-items: center;
    background-color: var(--color--base-primary);
    column-gap: 2rem;
    display: grid;
    font-size: 1.125rem;
    grid-template-columns: auto 1fr auto;
    padding-block: 1.125rem;
    padding-inline: 2.25rem;
    &::before {
        aspect-ratio: 1;
        background-image: url('../../../images/lp/meo/faq/icon_pin-question.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        display: inline-block;
        inline-size: 2.5rem;
    }
    &::after {
        background-color: var(--color--main-secondary);
        block-size: 1rem;
        clip-path: polygon(100% 0, 0 0, 50% 100%);
        content: '';
        display: inline-block;
        inline-size: 2.125rem;
        transition: .3s ease scale;
    }
    &:is(.-opened[data-faq-details] *)::after {
        scale: 1 -1;
    }
}
@media (width < 768px) {
    .p-faq__item-question {
        column-gap: 1.125rem;
        font-size: .875rem;
        padding-block: .625rem;
        padding-inline: .625rem;
        &::before {
            inline-size: 1.25rem;
        }
        &::after {
            block-size: .625rem;
            inline-size: .875rem;
        }
    }
}
.p-faq__item-answer {
    background-color: var(--color--base-tertiary);
    display: block;
    font-size: 1.125rem;
    padding-block: 1.125rem;
    padding-inline: calc(2.25rem + 2.5rem + 2rem) 2.25rem;
}
@media (width < 768px) {
    .p-faq__item-answer {
        font-size: .875rem;
        font-weight: 400;
        padding-block: .625rem;
        padding-inline: 1.875rem;
    }
}

/* contact - 無料相談フォーム */
.p-contact {
    box-shadow: 0 .25rem .875rem color-mix(in srgb, var(--color--black-secondary) 10%, transparent);
}
.p-contact__container {
    box-shadow: 0 .25rem .875rem color-mix(in srgb, var(--color--black-secondary) 25%, transparent);
    padding-block: 3.125rem;
    padding-inline: 6.25rem;
}
@media (width < 768px) {
    .p-contact__container {
        padding-block: 1.875rem;
        padding-inline: 1rem;
    }
}
.p-contact__description {
    font-size: .875rem;
    font-weight: 400;
    margin-block-start: .375rem;
    text-align: center;
}

/* ========================================
// utility - 頻出CSSをクラスに設定
// ======================================== */
/* padding-block */
.u-pbs-0 {
    padding-block-start: 0 !important;
}
.u-pbe-0 {
    padding-block-end: 0 !important;
}

/* margin-block */
.u-mbs-0 {
    margin-block-start: 0 !important;
}
.u-mbe-0 {
    margin-block-end: 0 !important;
}

/* background-color */
.u-bg-primary {
    background-color: var(--color--base-primary);
}
.u-bg-secondary {
    background-color: var(--color--base-secondary);
}
.u-bg-tertiary {
    background-color: var(--color--base-tertiary);
}
.u-bg-quaternary {
    background-color: var(--color--main-secondary);
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color--main-secondary) 84%, transparent) 0%,
            color-mix(in srgb, var(--color--main-secondary) 84%, transparent) 100%
        ),
        url('../../../images/lp/meo/common/image_background-map@2x.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (width < 768px) {
    .u-bg-quaternary {
        background-image:
            linear-gradient(
                to bottom,
                color-mix(in srgb, var(--color--main-secondary) 84%, transparent) 0%,
                color-mix(in srgb, var(--color--main-secondary) 84%, transparent) 100%
            ),
            url('../../../images/lp/meo/common/sp-image_background-map@2x.png');
    }
}

/* text-align */
.u-text-start {
    text-align: start;
}
.u-text-center {
    text-align: center;
}
.u-text-end {
    text-align: end;
}

/* align-items */
.u-items-start {
    align-items: start;
    display: flex;
}
.u-items-center {
    align-items: center;
    display: flex;
}
.u-items-end {
    align-items: end;
    display: flex;
}

/* justify-content */
.u-justify-start {
    display: flex;
    justify-content: start;
}
.u-justify-center {
    display: flex;
    justify-content: center;
}
.u-justify-end {
    display: flex;
    justify-content: end;
}

/* object-fit */
.u-object-cover {
    img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
    }
}

/* wbr */
.u-wbr {
    overflow-wrap: break-word;
    word-break: keep-all;
}

/* display */
@media (768px <= width) {
    .u-desktop-hidden {
        display: none;
    }
}
@media (width < 768px) {
    .u-mobile-hidden {
        display: none;
    }
}

/* notice */
.u-notice {
    font-size: .875rem;
    font-weight: 400;
    padding-inline-start: 1em;
    position: relative;
    &::before {
        content: '※';
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
    }
}
@media (width < 768px) {
    .u-notice {
        font-size: .625rem;
    }
}

/* ornament-diagonal */
.u-ornament-diagonal {
    position: relative;
    &::before {
        background-color: inherit;
        block-size: 13.25rem;
        clip-path: polygon(100% 0, 0 100%, 100% 100%);
        content: '';
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        position: absolute;
        translate: 0 -100%;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
}
@media (width < 768px) {
    .u-ornament-diagonal {
        &::before {
            block-size: 4.5rem;
        }
    }
}