@charset "utf-8";

/* ========================================
// foundation - 変数定義・基本設定
// ======================================== */
/* variable - 変数定義 */
:root {
    /* root-size */
    font-size: min(1.25vw, 16px);
    
    /* 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: 6.25rem;

    /* container-rate */
    --container-rate--small: 62.5%;
    --container-rate--medium: 78.125%;
    --container-rate--large: 90%;

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

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

    /* icon */
    --icon--megaphone: url('../../../images/lp/contents-marketing/common/icon_megaphone.svg');
    --icon--pen: url('../../../images/lp/contents-marketing/common/icon_pen.svg');
    --icon--arrow: url('../../../images/lp/contents-marketing/common/icon_arrow.svg');
    --icon--link-external: url('../../../images/lp/contents-marketing/common/icon_link-external.svg');
    --icon--tel: url('../../../images/lp/contents-marketing/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;
}

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

/* 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: 26.75rem;
    }
}
@media (width < 768px) {
    .l-header__logo-link {
        img {
            inline-size: 11.875rem;
        }
    }
}
@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: 3.125rem;
    }
}
.l-footer__container {
    display: grid;
    grid-template-columns: auto 1fr;
}
@media (width < 768px) {
    .l-footer__container {
        grid-template-columns: unset;
    }
}
.l-footer__company {
    display: grid;
    padding-inline-end: 5rem;
    row-gap: .5rem;
}
@media (width < 768px) {
    .l-footer__company {
        grid-row: 2 / 3;
        padding-block-start: 1.25rem;
        padding-inline-end: unset;
    }
}
.l-footer__company-name {
    font-size: 1.5rem;
    letter-spacing: 0;
}
@media (width < 768px) {
    .l-footer__company-name {
        font-size: 1rem;
        text-align: center;
    }
}
.l-footer__company-address {
    letter-spacing: 0;
}
@media (width < 768px) {
    .l-footer__company-address {
        font-size: .875rem;
        font-weight: 400;
        text-align: center;
    }
}
.l-footer__service {
    align-items: center;
    border-inline-start: solid .125rem var(--color--gray-secondary);
    column-gap: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    padding-inline-start: 5rem;
}
@media (width < 768px) {
    .l-footer__service {
        border-block-end: solid .0625rem var(--color--gray-secondary);
        border-inline-start: transparent;
        gap: .5rem 0;
        grid-template-columns: unset;
        justify-items: center;
        padding-block-end: 1.25rem;
        padding-inline-start: 0;
    }
}
.l-footer__service-logo {
    display: grid;
    padding-block-end: .5rem;
    img {
        inline-size: 26.75rem;
    }
}
@media (width < 768px) {
    .l-footer__service-logo {
        img {
            inline-size: 18.75rem;
        }
    }
}
.l-footer__service-description {
    font-size: .875rem;
    letter-spacing: 0;
}
@media (width < 768px) {
    .l-footer__service-description {
        font-weight: 400;
        text-align: center;
    }
}

/* ========================================
// component - 共通パーツの設定
// ======================================== */
/* heading - セクション見出し */
.c-heading__lv2 {
    display: grid;
    font-size: 2rem;
    justify-items: center;
    row-gap: 1rem;
    text-align: center;
    &::before {
        aspect-ratio: 1;
        background-color: var(--color--main-primary);
        background-image: var(--icon--megaphone);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 2.5rem;
        border-radius: 50%;
        content: '';
        display: block;
        inline-size: 3.5rem;
    }
    strong {
        color: var(--color--main-primary);
        font-size: 2.25rem;
    }
}
@media (width < 768px) {
    .c-heading__lv2 {
        font-size: 1.5rem;
        line-height: 1.375;
        row-gap: .5rem;
        &::before {
            background-size: 1.75rem;
            inline-size: 2.5rem;
        }
        strong {
            font-size: unset;
        }
    }
}
.c-heading__lv3 {
    display: grid;
    justify-items: center;
    row-gap: 1.25rem;
    &::after {
        background-color: var(--color--main-secondary);
        block-size: .1875rem;
        content: '';
        display: block;
        grid-row: 2 / 3;
        inline-size: 3rem;
    }
}
@media (width < 768px) {
    .c-heading__lv3 {
        row-gap: .75rem;
    }
}
.c-heading__lv3-main {
    align-items: center;
    column-gap: .5rem;
    display: flex;
    font-size: 1.5rem;
    text-align: center;
    &::before {
        aspect-ratio: 1;
        background-color: var(--color--main-secondary);
        content: '';
        display: block;
        inline-size: 2.5rem;
        mask-image: var(--icon--pen);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
    }
}
@media (width < 768px) {
    .c-heading__lv3-main {
        column-gap: .125rem;
        font-size: 1.25rem;
        &::before {
            inline-size: 1.75rem;
        }
    }
}
.c-heading__lv3-sub {
    font-size: 1.125rem;
    line-height: 1.75;
    text-align: center;
    strong {
        color: var(--color--main-primary);
    }
}
@media (width < 768px) {
    .c-heading__lv3-sub {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* 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: .75rem;
        line-height: 1.5;
        &::before {
            inline-size: 1rem;
        }
    }
}
.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: 3.25rem 2.75rem;
}
@media (768px <= width) {
    .c-action__container {
        display: grid;
        gap: 2.375rem 1.25rem;
        grid-template-columns: 1fr auto;
        position: relative;
    }
    .c-action__balloon {
        align-items: center;
        aspect-ratio: 1;
        background-color: var(--color--base-primary);
        border: solid .75rem var(--color--main-secondary);
        border-radius: 50%;
        display: flex;
        inline-size: 12.5rem;
        inset-block-start: calc((3.25rem + 2.75rem) * -1);
        inset-inline-start: -3.875rem;
        justify-content: center;
        position: absolute;
        z-index: 2;
        &::before {
            aspect-ratio: 1;
            border: solid .375rem var(--color--main-primary);
            border-radius: inherit;
            content: '';
            inline-size: 100%;
            inset-block-start: 0;
            inset-inline-start: 0;
            position: absolute;
            z-index: 1;
        }
    }
    .c-action__balloon-copy {
        font-size: 2rem;
        line-height: 1.125;
        padding-block-start: .125rem;
        position: relative;
        text-align: center;
        z-index: 2;
        & > strong {
            color: var(--color--main-primary);
            font-size: 3rem;
        }
    }
    .c-action__title {
        align-items: center;
        background-color: var(--color--base-primary);
        border-radius: 1rem;
        display: flex;
        grid-column: 1 / 3;
        justify-content: center;
        padding-block: .625rem .375rem;
        padding-inline-start: 8rem;
    }
    .c-action__title-sub {
        align-items: baseline;
        display: flex;
        font-size: 2.25rem;
        &::after {
            content: 'で、';
            font-size: 1.875rem;
        }
        & > span {
            color: var(--color--main-primary);
            font-size: 2.5rem;
        }
        & > strong {
            background-color: var(--color--main-primary);
            border-radius: .25rem;
            color: var(--color--base-primary);
            font-size: 2rem;
            line-height: 1.125;
            margin-inline: .25rem;
            padding-inline: .25rem .5rem;
            & > span {
                font-size: 3rem;
            }
        }
    }
    ::-webkit-full-page-media, :future, :root .c-action__title-sub {
        & > strong {
            padding-block-end: .25rem;
        }
    }
    .c-action__title-main {
        align-items: baseline;
        display: flex;
        font-size: 1.875rem;
        & > strong {
            background-image:
                radial-gradient(circle at calc(100% - .3125rem) calc(100% - .3125rem), var(--color--main-secondary) .3125rem, transparent .3125rem),
                radial-gradient(circle at .3125rem calc(100% - .3125rem), var(--color--main-secondary) .3125rem, transparent .3125rem),
                linear-gradient(to bottom, var(--color--base-primary) calc(100% - .625rem), transparent calc(100% - .625rem)),
                linear-gradient(to right, transparent .3125rem, var(--color--main-secondary) .3125rem, var(--color--main-secondary) calc(100% - .3125rem), transparent calc(100% - .3125rem));
            color: var(--color--main-primary);
            font-size: 2.5rem;
            line-height: 1.25;
            margin-inline-end: .125rem;
            position: relative;
        }
    }
}
@media (width < 768px) {
    .c-action__balloon {
        background-color: var(--color--base-primary);
        border: solid .375rem var(--color--main-secondary);
        border-radius: 1rem;
        padding-block: .25rem;
        padding-inline: .25rem;
        position: relative;
        text-align: center;
        &::before {
            block-size: 100%;
            border: solid .25rem var(--color--main-primary);
            border-radius: calc(1rem - .375rem);
            content: '';
            inline-size: 100%;
            inset-block-start: 0;
            inset-inline-start: 0;
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
    }
    ::-webkit-full-page-media, :future, :root .c-action__balloon {
        padding-block: .0625rem .375rem;
    }
    .c-action__balloon-copy {
        font-size: 2rem;
        line-height: 1.125;
        text-align: center;
        & > strong {
            color: var(--color--main-primary);
            font-size: 2.5rem;
        }
    }
    .c-action__title {
        margin-block-start: 1rem;
        position: relative;
    }
    .c-action__title-sub {
        aspect-ratio: 1;
        background-color: var(--color--main-secondary);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        font-size: 1.125rem;
        inline-size: 6.75rem;
        inset-block-start: -.25rem;
        inset-inline-end: 0;
        justify-content: center;
        line-height: 1.25;
        padding-inline-start: 2.25rem;
        position: absolute;
        z-index: 1;
        &::after {
            aspect-ratio: 1;
            background-color: var(--color--main-secondary);
            clip-path: polygon(50% 0, 0 100%, 100% 50%);
            content: '';
            inline-size: .875rem;
            inset-block-end: .5rem;
            inset-inline-start: .5rem;
            position: absolute;
            z-index: 1;
        }
        & > span {
            background-color: var(--color--main-primary);
            border-radius: .25rem;
            color: var(--color--base-primary);
            font-size: .875rem;
            inset-block-end: .5rem;
            inset-inline-start: 50%;
            letter-spacing: .125em;
            padding-block: .25rem;
            padding-inline: .25rem;
            position: absolute;
            translate: 0 -50%;
            writing-mode: vertical-rl;
            z-index: 2;
        }
        & > strong {
            & > span {
                font-size: 1.75rem;
            }
        }
    }
    .c-action__title-main {
        align-items: start;
        color: var(--color--base-primary);
        display: inline-flex;
        flex-direction: column;
        font-size: 3.625rem;
        line-height: 1.5;
        & > strong {
            align-items: start;
            display: inline-flex;
            flex-direction: column;
            font-size: 4.875rem;
            line-height: 1.375;
            & > span {
                background-image:
                radial-gradient(circle at calc(100% - .25rem) calc(100% - .25rem), var(--color--main-secondary) .25rem, transparent .25rem),
                radial-gradient(circle at .25rem calc(100% - .25rem), var(--color--main-secondary) .25rem, transparent .25rem),
                linear-gradient(to bottom, var(--color--main-primary) calc(100% - .5rem), transparent calc(100% - .5rem)),
                linear-gradient(to right, transparent .25rem, var(--color--main-secondary) .25rem, var(--color--main-secondary) calc(100% - .25rem), transparent calc(100% - .25rem));
                box-decoration-break: clone;
                -webkit-box-decoration-break: clone;
            }
        }
    }
}
.c-action__tel {
    display: grid;
    justify-items: center;
    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: 1.875rem 3.125rem;
    }
    .c-action__container {
        position: relative;
    }
    .c-action__tel {
        margin-block-start: 1rem;
        row-gap: .25rem;
    }
    .c-action__tel-item {
        font-size: .75rem;
        padding-block: .0625rem;
    }
    .c-action__button {
        margin-block-start: 1.875rem;
    }
}

/* 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) {
        opacity: .4;
        pointer-events: none;
    }
}
.c-contact-form__submit-input {
    cursor: pointer !important;
    letter-spacing: inherit;
}

/* ========================================
// project - 各セクションの設定
// ======================================== */
/* mv - メインビジュアル */
.p-mv {
    background-image:
        linear-gradient(
            to bottom,
            color-mix(in srgb, var(--color--base-primary) 75%, transparent) 0%,
            color-mix(in srgb, var(--color--base-tertiary) 75%, transparent) 100%
        ),
        url('../../../images/lp/contents-marketing/mv/image_background@2x.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-block: 4.125rem;
}
@media (width < 768px) {
    .p-mv {
        background-image:
            linear-gradient(
                to bottom,
                color-mix(in srgb, var(--color--base-primary) 75%, transparent) 0%,
                color-mix(in srgb, var(--color--base-tertiary) 75%, transparent) 100%
            ),
            url('../../../images/lp/contents-marketing/mv/sp-image_background@2x.png');
        padding-block: 1.875rem 2.5rem;
    }
}
.p-mv__container {
    position: relative;
}
@media (width < 768px) {
    .p-mv__container {
        column-gap: .625rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (width < 768px) {
    .p-mv__copy {
        grid-column: span 2;
    }
}
.p-mv__copy-label {
    display: grid;
    font-size: 3.25rem;
    line-height: 1.25;
    row-gap: .5rem;
    text-align: center;
    strong {
        background-color: var(--color--main-primary);
        border-radius: .375rem;
        color: var(--color--base-primary);
        font-size: 3.75rem;
        justify-self: center;
        letter-spacing: 0;
        min-inline-size: var(--container-size--medium);
        padding-block: .125rem;
        padding-inline: .75rem;
    }
}
@media (width < 768px) {
    .p-mv__copy-label {
        font-size: 1.5rem;
        strong {
            font-size: 2rem;
            min-inline-size: unset;
        }
    }
}
.p-mv__copy-main {
    align-items: end;
    display: flex;
    font-size: 5.625rem;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1.25;
    margin-block-start: 2rem;
    text-align: center;
    strong {
        align-items: center;
        display: flex;
        margin-inline-start: .25rem;
        padding-block-end: .875rem;
        padding-inline-end: .75rem;
        position: relative;
        &::after {
            background-color: var(--color--main-secondary);
            block-size: 1.25rem;
            border-radius: .25rem;
            content: '';
            inline-size: 100%;
            inset-block-end: .5625rem;
            inset-inline-start: 0;
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
    }
    img {
        inline-size: 11.0625rem;
    }
}
@media (width < 768px) {
    .p-mv__copy-main {
        flex-wrap: wrap;
        font-size: 3.375rem;
        margin-block-start: 1rem;
        strong {
            margin-inline-start: unset;
            padding-block-end: .375rem;
            padding-inline: .25rem;
            &::after {
                block-size: .75rem;
                inset-block-end: .125rem;
            }
        }
        img {
            inline-size: 6.75rem;
        }
    }
}
.p-mv__copy-sub {
    font-size: 3.75rem;
    line-height: 1.25;
    margin-block-start: .5rem;
    text-align: center;
}
@media (width < 768px) {
    .p-mv__copy-sub {
        font-size: 1.125rem;
        margin-block-start: .75rem;
    }
}
.p-mv__image {
    aspect-ratio: 1;
    inline-size: 17.5rem;
    inset-block-end: 0;
    position: absolute;
    z-index: 1;
    &:nth-of-type(1) {
        inset-inline-start: 0;
    }
    &:nth-of-type(2) {
        inset-inline-end: 0;
    }
}
@media (width < 768px) {
    .p-mv__image {
        inline-size: 100%;
        inset-block-end: unset;
        margin-block-start: .75rem;
        position: static;
    }
}
.p-mv__badge {
    margin-block-start: 2rem;
}
@media (width < 768px) {
    .p-mv__badge {
        grid-column: span 2;
        margin-block-start: .75rem;
    }
}
.p-mv__badge-list {
    column-gap: 2rem;
    display: flex;
    justify-content: center;
}
@media (width < 768px) {
    .p-mv__badge-list {
        column-gap: 1rem;
    }
}
.p-mv__badge-item {
    background-image: url('../../../images/lp/contents-marketing/mv/image_badge@2x.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    block-size: 8.625rem;
    display: grid;
    inline-size: 18.625rem;
    place-items: center;
}
@media (width < 768px) {
    .p-mv__badge-item {
        block-size: 4.5rem;
        inline-size: 100%;
    }
}
.p-mv__badge-copy {
    display: grid;
    font-size: 1.875rem;
    letter-spacing: 0;
    line-height: 1.125;
    padding-block-end: .625rem;
    row-gap: .25rem;
    text-align: center;
}
@media (width < 768px) {
    .p-mv__badge-copy {
        padding-block-end: .375rem;
        row-gap: .125rem;
    }
}
@media (width < 768px) {
    .p-mv__badge-copy {
        font-size: 1rem;
    }
}
.p-mv__badge-phrase {
    background-clip: text;
    background-image: linear-gradient(160deg, #BC8211 26.85%, #FFBF43 51.96%, #BC8211 78.06%);
    -webkit-text-fill-color: transparent;
    strong {
        font-size: 2.1875rem;
    }
    span {
        font-size: 1.5rem;
    }
}
@media (width < 768px) {
    .p-mv__badge-phrase {
        strong {
            font-size: 1.125rem;
        }
        span {
            font-size: .75rem;
        }
    }
}
.p-mv__button {
    display: flex;
    justify-content: center;
    margin-block-start: 3rem;
}
@media (width < 768px) {
    .p-mv__button {
        grid-column: span 2;
        margin-block-start: 1.25rem;
    }
}

/* problem - こんなお悩みありませんか？ */
.p-problem {
    background-image: url('../../../images/lp/contents-marketing/problem/image_background@2x.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    &::after {
        background-image: url('../../../images/lp/contents-marketing/problem/image_background-triangle@2x.png');
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        block-size: var(--section-size--medium);
        content: '';
        inline-size: 100%;
        inset-block-end: calc(var(--section-size--medium) * -1);
        inset-inline-start: 0;
        position: absolute;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
}
.p-problem__list {
    column-gap: .5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-block-end: 7.875rem;
}
@media (width < 768px) {
    .p-problem__list {
        column-gap: unset;
        grid-template-columns: unset;
        padding-block-end: unset;
    }
}
.p-problem__item {
    align-items: center;
    aspect-ratio: 41 / 31;
    display: flex;
    justify-content: center;
    position: relative;
    &::before {
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        block-size: 100%;
        content: '';
        inline-size: 100%;
        inset-block-start: 0;
        inset-inline-start: 0;
        opacity: 90%;
        position: absolute;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
    &:nth-child(1) {
        margin-block-start: 6rem;
        &::before {
            background-image: url('../../../images/lp/contents-marketing/problem/image_item-01.svg');
        }
    }
    &:nth-child(2) {
        &::before {
            background-image: url('../../../images/lp/contents-marketing/problem/image_item-02.svg');
        }
    }
    &:nth-child(3) {
        margin-block-start: 6rem;
        &::before {
            background-image: url('../../../images/lp/contents-marketing/problem/image_item-03.svg');
        }
    }
}
@media (width < 768px) {
    .p-problem__item {
        aspect-ratio: 5 / 3;
        inline-size: 70.58823529%;
        &:nth-child(1) {
            margin-block-start: unset;
            &::before {
                background-image: url('../../../images/lp/contents-marketing/problem/sp-image_item-01.svg');
            }
        }
        &:nth-child(2) {
            justify-self: end;
            margin-block-start: -1.25rem;
            &::before {
                background-image: url('../../../images/lp/contents-marketing/problem/sp-image_item-02.svg');
            }
        }
        &:nth-child(3) {
            margin-block-start: -1.25rem;
            &::before {
                background-image: url('../../../images/lp/contents-marketing/problem/sp-image_item-03.svg');
            }
        }
    }
}
.p-problem__item-copy {
    color: var(--color--base-primary);
    font-size: 1.375rem;
    text-align: center;
}
@media (width < 768px) {
    .p-problem__item-copy {
        font-size: 1rem;
    }
}
.p-problem__image {
    aspect-ratio: 80 / 57;
    inline-size: 20rem;
    inset-block-end: 0;
    inset-inline-start: 50%;
    position: absolute;
    translate: -50% 0;
    z-index: 1;
}
@media (width < 768px) {
    .p-problem__image {
        inline-size: 9rem;
        inset-block-end: unset;
        inset-inline-start: unset;
        margin-block-start: .5rem;
        margin-inline: auto;
        position: static;
        translate: unset;
    }
}

/* solution - こんなお悩みありませんか？ */
.p-solution {
    padding-block-start: calc(var(--section-size--medium) * 2);
}
.p-solution__list {
    counter-reset: solution__item-counter;
    display: grid;
    row-gap: 1.25rem;
}
@media (width < 768px) {
    .p-solution__list {
        row-gap: 1rem;
    }
}
.p-solution__item {
    background-color: var(--color--base-primary);
    border-radius: .5rem;
    display: grid;
    gap: 1.25rem 3.75rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    padding-block: 3.75rem;
    padding-inline: 6.25rem;
    position: relative;
}
@media (width < 768px) {
    .p-solution__item {
        grid-template-columns: unset;
        grid-template-rows: unset;
        padding-block: 4.75rem 1.875rem;
        padding-inline: 1.625rem;
    }
}
.p-solution__item-title {
    align-self: end;
    font-size: 1.75rem;
    margin-block-start: 1.875rem;
    &::before {
        aspect-ratio: 6 / 7;
        background-color: var(--color--main-primary);
        clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 85%, 0% 100%);
        color: var(--color--base-primary);
        content: counter(solution__item-counter, decimal-leading-zero);
        counter-increment: solution__item-counter;
        display: grid;
        font-family: var(--font-family--en);
        font-size: 2rem;
        font-weight: 700;
        inline-size: 3.75rem;
        inset-block-start: -.625rem;
        inset-inline-start: 6.25rem;
        place-items: center;
        padding-block-end: .375rem;
        position: absolute;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
    strong {
        color: var(--color--main-primary);
    }
}
@media (width < 768px) {
    .p-solution__item-title {
        font-size: 1.25rem;
        margin-block-start: unset;
        &::before {
            font-size: 1.75rem;
            inline-size: 3.125rem;
            inset-block-start: -.5rem;
            inset-inline-start: 1.625rem;
        }
    }
}
.p-solution__item-description {
    line-height: 1.75;
}
@media (width < 768px) {
    .p-solution__item-description {
        font-size: .875rem;
    }
}
.p-solution__item-image {
    background-color: var(--color--base-tertiary);
    border-radius: .5rem;
    display: grid;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    place-items: center;
}
@media (width < 768px) {
    .p-solution__item-image {
        grid-column: unset;
        grid-row: unset;
    }
}

/* case - 業種業界問わず、支援実績がございます！ */
@media (768px <= width) {
    .p-case {
        position: relative;
        &::before {
            aspect-ratio: 129 / 140;
            background-image: url('../../../images/lp/contents-marketing/case/image_illustration@2x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: '';
            inline-size: 16.125rem;
            inset-block-start: 0;
            inset-inline-end: 0;
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
    }
}

/* support - 対応ジャンル */
.p-support__body {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}
@media (width < 768px) {
    .p-support__body {
        grid-template-columns: unset;
    }
}
.p-support__article {
    border-radius: .5rem;
    overflow: hidden;
}
.p-support__article-header {
    background-color: var(--color--main-secondary);
    padding-block: .75rem;
    padding-inline: 1.25rem;
}
@media (width < 768px) {
    .p-support__article-header {
        padding-block: .5625rem;
    }
}
.p-support__article-title {
    align-items: center;
    column-gap: .25rem;
    display: flex;
    font-size: 1.25rem;
    justify-content: center;
    img {
        aspect-ratio: 1;
        inline-size: 2.5rem;
    }
}
@media (width < 768px) {
    .p-support__article-title {
        font-size: 1.125rem;
        img {
            inline-size: 2rem;
        }
    }
}
.p-support__article-body {
    background-color: var(--color--base-tertiary);
    padding-block: 1.75rem;
    padding-inline: 1rem;
}
.p-support__list {
    display: grid;
    gap: 1.25rem .625rem;
    grid-template-columns: repeat(2, 1fr);
}
.p-support__item {
    background-color: var(--color--base-primary);
    border-radius: .375rem;
    display: grid;
    justify-items: center;
    row-gap: .375rem;
    padding-block: .375rem .625rem;
    padding-inline: .25rem;
}
.p-support__item-image {
    aspect-ratio: 1;
    inline-size: 2.5rem;
}
.p-support__item-title {
    font-size: .9375rem;
    text-align: center;
}
.p-support__footer {
    margin-block-start: 1.25rem;
}
@media (width < 768px) {
    .p-support__footer {
        margin-block-start: .625rem;
    }
}

/* service - 貴社の専属チームがトータルサポートします！ */
@media (768px <= width) {
    .p-service {
        position: relative;
        &::before {
            aspect-ratio: 123 / 140;
            background-image: url('../../../images/lp/contents-marketing/service/image_illustration@2x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: '';
            inline-size: 15.375rem;
            inset-block-start: -3.75rem;
            inset-inline-start: 0;
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
    }
}

/* comparison - 他サービスとの比較 */
.p-comparison__table {
    inline-size: 100%;
}
.p-comparison__table-body {
    display: grid;
    gap: .1875rem;
    grid-template-columns: 17.6% 31.5% 1fr 1fr;
}
@media (width < 768px) {
    .p-comparison__table-body {
        grid-template-columns: 26.47058824% 28.52941176% 1fr 1fr;
    }
}
.p-comparison__table-row {
    display: grid;
    grid-column: span 4;
    grid-template-columns: subgrid;
}
.p-comparison__table-header {
    display: grid;
    font-size: 1.125rem;
    line-height: 1.25;
    min-block-size: 5rem;
    padding-block: .5rem;
    padding-inline: .5rem;
    place-items: center;
    text-align: center;
    &[data-comparison-column="main"] {
        background-color: var(--color--main-primary);
        color: var(--color--base-primary);
        img {
            max-inline-size: 18rem;
            padding-block-end: .25rem;
        }
    }
    &[data-comparison-column="other"] {
        background-color: var(--color--gray-primary);
        color: var(--color--base-primary);
    }
    &:is(.p-comparison__table-row:nth-child(1) > :nth-child(2)) {
        border-radius: .5rem 0 0 0;
    }
    &:is(.p-comparison__table-row:nth-child(1) > :nth-child(4)) {
        border-radius: 0 .5rem 0 0;
    }
}
@media (width < 768px) {
    .p-comparison__table-header {
        font-size: .75rem;
        min-block-size: 4rem;
        &[data-comparison-column="main"] {
            img {
                max-inline-size: unset;
                padding-block-end: unset;
            }
        }
        &:is(.p-comparison__table-row:nth-child(1) > :nth-child(2)) {
            border-radius: .375rem 0 0 0;
        }
        &:is(.p-comparison__table-row:nth-child(1) > :nth-child(4)) {
            border-radius: 0 .375rem 0 0;
        }
    }
}
.p-comparison__table-data {
    display: grid;
    font-size: 1.125rem;
    line-height: 1.25;
    min-block-size: 5rem;
    place-items: center;
    position: relative;
    text-align: center;
    img,
    svg {
        aspect-ratio: 1;
        block-size: auto;
        inline-size: 3.75rem;
    }
    &[data-comparison-column="topic"] {
        background-color: var(--color--main-secondary);
        padding-block: .5rem;
        padding-inline: .5rem;
    }
    &[data-comparison-column="main"] {
        background-color: var(--color--base-primary);
        &::after {
            block-size: calc(100% + .1875rem);
            border-inline: solid .25rem var(--color--main-primary);
            content: '';
            inline-size: 100%;
            inset-block-start: -.1875rem;
            inset-inline-start: 0;
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
        &:is(.p-comparison__table-row:nth-child(7) > *) {
            &::after {
                block-size: calc(100% + .1875rem + .25rem);
                border-block-end: solid .25rem var(--color--main-primary);
            }
        }
        svg path {
            fill: var(--color--main-primary);
        }
    }
    &[data-comparison-column="other"] {
        background-color: var(--color--white-secondary);
        svg path {
            fill: var(--color--gray-primary);
        }
    }
    &[data-comparison-evaluation="3"],
    &[data-comparison-evaluation="4"] {
        svg path {
            fill: var(--color--main-primary);
        }
    }
    &[data-comparison-emphasis] {
        background-color: var(--color--base-tertiary);
        img,
        svg {
            inline-size: 5rem;
        }
    }
    &:is(.p-comparison__table-row:nth-child(2) > :nth-child(1)) {
        border-radius: .5rem 0 0 0;
    }
    &:is(.p-comparison__table-row:nth-child(7) > :nth-child(1)) {
        border-radius: 0 0 0 .5rem;
    }
    &:is(.p-comparison__table-row:nth-child(7) > :nth-child(4)) {
        border-radius: 0 0 .5rem 0;
    }
}
@media (width < 768px) {
    .p-comparison__table-data {
        font-size: .75rem;
        min-block-size: 3.5rem;
        img,
        svg {
            inline-size: 2rem;
        }
        &[data-comparison-column="topic"] {
            padding-block: .25rem;
            padding-inline: .25rem;
        }
        &[data-comparison-column="main"] {
            &::after {
                border-inline: solid .125rem var(--color--main-primary);
            }
            &:is(.p-comparison__table-row:nth-child(7) > *) {
                &::after {
                    block-size: calc(100% + .1875rem + .125rem);
                    border-block-end: solid .125rem var(--color--main-primary);
                }
            }
        }
        &[data-comparison-emphasis] {
            img,
            svg {
                inline-size: 3.125rem;
            }
        }
        &:is(.p-comparison__table-row:nth-child(2) > :nth-child(1)) {
            border-radius: .375rem 0 0 0;
        }
        &:is(.p-comparison__table-row:nth-child(7) > :nth-child(1)) {
            border-radius: 0 0 0 .375rem;
        }
        &:is(.p-comparison__table-row:nth-child(7) > :nth-child(4)) {
            border-radius: 0 0 .375rem 0;
        }
    }
}

/* flow - ご利用の流れ */
.p-flow {
    position: relative;
    z-index: 1;
}
@media (768px <= width) {
    .p-flow {
        &::before {
            aspect-ratio: 66 / 65;
            background-image: url('../../../images/lp/contents-marketing/flow/image_illustration@2x.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            content: '';
            inline-size: 16.5rem;
            inset-block-start: -3.75rem;
            inset-inline-end: 0;
            position: absolute;
            z-index: 1;
        }
        & > * {
            position: relative;
            z-index: 2;
        }
    }
}
.p-flow__list {
    align-items: center;
    counter-reset: flow__item-counter;
    display: flex;
    flex-wrap: wrap;
    gap: 2.75rem .5rem;
    justify-content: center;
}
@media (width < 768px) {
    .p-flow__list {
        flex-direction: column;
        gap: 1.25rem 0;
    }
}
.p-flow__item {
    inline-size: 20.5%;
    position: relative;
}
.p-flow__item-container {
    align-items: center;
    background-color: var(--color--base-primary);
    border-radius: calc(8.75rem / 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: 8.75rem;
    padding-block-end: .25rem;
    padding-inline: 1rem;
    position: relative;
    z-index: 2;
    &:is([data-flow-role="staff"] > *) {
        border: solid .375rem var(--color--main-secondary);
    }
    &:is([data-flow-role="customer"] > *) {
        border: solid .375rem var(--color--main-primary);
    }
}
@media (768px <= width) {
    .p-flow__item {
        &:nth-child(-n+4) {
            &::after {
                background-color: var(--color--main-secondary);
                block-size: .375rem;
                content: '';
                inline-size: calc(.5rem + (.375rem * 2));
                inset-block-start: 50%;
                inset-inline-start: calc(100% - .375rem);
                position: absolute;
                translate: 0 -50%;
                z-index: 1;
            }
        }
        &:nth-child(n+5) {
            &::before {
                background-color: var(--color--main-secondary);
                block-size: .375rem;
                content: '';
                inline-size: calc(.5rem + (.375rem * 2));
                inset-block-start: 50%;
                inset-inline-end: calc(100% - .375rem);
                position: absolute;
                translate: 0 -50%;
                z-index: 1;
            }
        }
        &:nth-child(4) {
            &::before {
                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% + (4.6875rem / 2));
                position: absolute;
                translate: -50% -50%;
                z-index: 1;
            }
            &::after {
                inline-size: calc(4.6875rem + .375rem);
            }
        }
        &:nth-child(5) {
            &::before {
                inline-size: calc(4.6875rem + .375rem);
            }
            &::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-end: calc(100% + (4.6875rem / 2));
                position: absolute;
                translate: 50% -50%;
                z-index: 1;
            }
        }
    }
}
@media (width < 768px) {
    .p-flow__item {
        inline-size: 100%;
        max-inline-size: 12.8125rem;
        &::after {
            background-color: var(--color--main-secondary);
            block-size: calc(1.25rem + (.25rem * 2));
            content: '';
            inline-size: .25rem;
            inset-block-start: calc(100% - .25rem);
            inset-inline-start: 50%;
            position: absolute;
            translate: -50% 0;
            z-index: 1;
        }
    }
    .p-flow__item-container {
        &:is([data-flow-role="staff"] > *) {
            border: solid .25rem var(--color--main-secondary);
        }
        &:is([data-flow-role="customer"] > *) {
            border: solid .25rem var(--color--main-primary);
        }
    }
}
.p-flow__item-image {
    inline-size: 4rem;
}
.p-flow__item-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
    min-block-size: 2.5rem;
    text-align: center;
    &::before {
        align-items: center;
        aspect-ratio: 1;
        border-radius: 50%;
        color: var(--color--base-primary);
        content: counter(flow__item-counter);
        counter-increment: flow__item-counter;
        display: flex;
        font-family: var(--font-family--en);
        font-size: 1.75rem;
        inline-size: 2.375rem;
        inset-block-start: calc((.375rem + 1rem) * -1);
        inset-inline-start: 2rem;
        justify-content: center;
        line-height: 1;
        position: absolute;
        z-index: 2;
    }
    &:is([data-flow-role="staff"] *) {
        &::before {
            background-color: var(--color--main-secondary);
        }
    }
    &:is([data-flow-role="customer"] *) {
        &::before {
            background-color: var(--color--main-primary);
        }
    }
    & > span {
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.25;
        margin-block-start: .25rem;
        text-align: center;
    }
}
@media (768px <= width) {
    .p-flow__item-period {
        display: flex;
        font-weight: 400;
        inline-size: 100%;
        inset-block-end: calc(100% + .5rem);
        inset-inline-start: 0;
        justify-content: end;
        padding-inline-end: 1.5rem;
        position: absolute;
        text-align: center;
        z-index: 2;
        span {
            position: relative;
            &::after {
                aspect-ratio: 1;
                background-color: var(--color--font-primary);
                content: '';
                inline-size: 1.5rem;
                inset-block-start: -.5rem;
                inset-inline-start: 100%;
                mask-image: url('../../../images/lp/contents-marketing/flow/icon_period.svg');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                position: absolute;
                z-index: 1;
            }
            & > * {
                position: relative;
                z-index: 2;
            }
        }
    }
}
@media (width < 768px) {
    .p-flow__item-period {
        display: none;
    }
}
.p-flow__item-role {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--color--main-primary);
    border-radius: 50%;
    color: var(--color--base-primary);
    display: flex;
    font-size: .75rem;
    inline-size: 3.5rem;
    inset-block-start: calc((.375rem + 1rem) * -1);
    inset-inline-end: -.375rem;
    justify-content: center;
    line-height: 1.25;
    position: absolute;
    text-align: center;
    z-index: 2;
    &::after {
        aspect-ratio: 1;
        background-color: inherit;
        clip-path: polygon(50% 0, 0 100%, 100% 50%);
        content: '';
        inline-size: .5rem;
        inset-block-end: .1875rem;
        inset-inline-start: .1875rem;
        position: absolute;
        z-index: 1;
    }
    & > * {
        position: relative;
        z-index: 2;
    }
}
.p-flow__goal {
    align-items: center;
    aspect-ratio: 1;
    background-color: var(--color--main-secondary);
    border-radius: 50%;
    display: flex;
    inline-size: 14%;
    justify-content: center;
    position: relative;
    &::before {
        background-color: var(--color--main-secondary);
        block-size: .375rem;
        content: '';
        inline-size: .5rem;
        inset-block-start: 50%;
        inset-inline-end: 100%;
        position: absolute;
        translate: 0 -50%;
    }
    &::after {
        aspect-ratio: 1;
        border: solid .25rem var(--color--base-tertiary);
        border-radius: inherit;
        content: '';
        inline-size: calc(100% - .75rem);
        inset-block-start: 50%;
        inset-inline-start: 50%;
        position: absolute;
        translate: -50% -50%;
    }
}
@media (width < 768px) {
    .p-flow__goal {
        aspect-ratio: unset;
        border-radius: calc(8.75rem / 2);
        inline-size: 100%;
        max-inline-size: 12.8125rem;
        min-block-size: 8.75rem;
        &::before {
            content: none;
        }
        &::after {
            aspect-ratio: unset;
            block-size: calc(100% - .5rem);
            border: solid .1875rem var(--color--base-tertiary);
            border-radius: calc(8.75rem / 2);
            inline-size: calc(100% - .5rem);
        }
    }
}
.p-flow__goal-title {
    font-size: 1.25rem;
    line-height: 1.25;
    text-align: center;
}
@media (768px <= width) {
    .p-flow__goal-period {
        display: flex;
        font-weight: 400;
        inline-size: 100%;
        inset-block-end: calc(100% + .25rem);
        inset-inline-start: 0;
        justify-content: center;
        position: absolute;
        text-align: center;
        span {
            position: relative;
            &::after {
                aspect-ratio: 1;
                background-color: var(--color--font-primary);
                content: '';
                inline-size: 1.5rem;
                inset-block-start: -.5rem;
                inset-inline-start: 100%;
                mask-image: url('../../../images/lp/contents-marketing/flow/icon_period.svg');
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                position: absolute;
                z-index: 1;
            }
            & > * {
                position: relative;
                z-index: 2;
            }
        }
    }
}
@media (width < 768px) {
    .p-flow__goal-period {
        display: none;
    }
}

/* faq - よくあるご質問 */
.p-faq__list {
    counter-reset: faq__item-counter;
    display: grid;
    row-gap: 1.25rem;
}
@media (width < 768px) {
    .p-faq__list {
        row-gap: 1rem;
    }
}
.p-faq__item {
    border-radius: .5rem;
    counter-increment: faq__item-counter;
    overflow: hidden;
}
@media (width < 768px) {
    .p-faq__item {
        border-radius: .375rem;
    }
}
.p-faq__item-visible {
    cursor: pointer;
    display: block;
    &::-webkit-details-marker {
        display: none;
    }
}
.p-faq__item-question {
    background-color: var(--color--base-primary);
    display: grid;
    grid-template-columns: auto 1fr;
    &::before {
        background-color: var(--color--main-primary);
        block-size: 100%;
        color: var(--color--base-primary);
        content: 'Q' counter(faq__item-counter);
        display: grid;
        font-family: var(--font-family--en);
        font-size: 2.5rem;
        inline-size: 5.25rem;
        place-items: center;
    }
    span {
        align-items: center;
        column-gap: 1.75rem;
        display: grid;
        font-size: 1.5rem;
        grid-template-columns: 1fr auto;
        padding-block: 1.5rem;
        padding-inline: 1.75rem;
        &::after {
            aspect-ratio: 2 / 1;
            background-color: var(--color--main-secondary);
            clip-path: polygon(100% 0, 0 0, 50% 100%);
            content: '';
            display: inline-block;
            inline-size: 2rem;
            transition: .3s ease scale;
        }
        &:is(.-opened[data-faq-details] *)::after {
            scale: 1 -1;
        }
    }
}
@media (width < 768px) {
    .p-faq__item-question {
        &::before {
            font-size: 1.5rem;
            inline-size: 3rem;
        }
        span {
            column-gap: 1rem;
            font-size: 1rem;
            line-height: 1.375;
            padding-block: .75rem;
            padding-inline: 1rem .75rem;
            &::after {
                inline-size: 1rem;
            }
        }
    }
}
.p-faq__item-answer {
    background-color: var(--color--base-tertiary);
    display: block;
    font-size: 1.125rem;
    padding-block: 1.5rem;
    padding-inline: calc(5.25rem + 1.75rem) 1.75rem;
}
@media (width < 768px) {
    .p-faq__item-answer {
        font-size: .875rem;
        padding-block: .75rem;
        padding-inline: 1rem;
    }
}

/* 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) 85%, transparent) 0%,
            color-mix(in srgb, var(--color--main-secondary) 85%, transparent) 100%
        ),
        url('../../../images/lp/contents-marketing/common/image_background-triangle@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) 85%, transparent) 0%,
                color-mix(in srgb, var(--color--main-secondary) 85%, transparent) 100%
            ),
            url('../../../images/lp/contents-marketing/common/sp-image_background-triangle@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: .75rem;
    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;
    }
}