@charset "utf-8";

/* ---------------------------------------------------------
    foundation
--------------------------------------------------------- */
/* variable
--------------------------------------------------------- */
:root {
	/* root-size */
	font-size: min(1.11111111vw, 16px);

    /* color */
    --color-main-primary: #F7D72F;
    --color-main-secondary: #FF7500;
    --color-sub-secondary: #FF9A45;
    --color-base-primary: #FFFFFF;
    --color-base-secondary: #FFFBE3;
    --color-font-primary: #3C3C3C;
    --color-gray: #E5E5E5;

    /* gradation */
    --grd-main-primary: #00BCB0, #00DACD;

    /* font */
	--font-family--primary: "Noto Sans JP", sans-serif;
    --font-weight-w4: 400;
    --font-weight-w6: 600;
    --font-weight-w7: 700;

    /* letter-spacing */
	--letter-spacing--xs: .02em;
	--letter-spacing--sm: .03em;
	--letter-spacing--md: .04em;
	--letter-spacing--lg: .075em;

    /* line-height */
    --line-height-md: 1.875;

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

    /* section-size */
    --section-size--small: 3.333rem;
    --section-size--medium: 5.625rem;
    --section-size--large: 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: 88rem;

    /* half-leading */
    --leading-trim: calc((1em - 1lh) / 2);
}
@media (width < 768px) {
	:root {
		font-size: max(14px, 4.26666666vw);

        /* container-size */
        --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;

        /* section-size */
        --section-size--small: 2rem;
        --section-size--medium: 3rem;
        --section-size--large: 5rem;
	}
}

/* base
--------------------------------------------------------- */
html,
body {
	color: var(--color--font-primary);
    font-family: var(--font-family--primary);
	font-feature-settings: 'palt';
    font-optical-sizing: auto;
	font-weight: var(--font-weight-w4);
	-webkit-font-smoothing: antialiased;
    font-style: normal;
	overflow-x: clip;
	min-height: 100dvh;
	position: relative;
	z-index: 0;
    letter-spacing: var(--letter-spacing--md);
    line-height: var(--line-height-md);
}
img {
	block-size: auto;
	inline-size: 100%;
}
a {
	text-decoration-color: transparent;
}
em,
strong {
	font-weight: unset;
    font-style: unset;
}

/* ---------------------------------------------------------
    layout
--------------------------------------------------------- */
/* main / section / container
--------------------------------------------------------- */
.l-section {
    padding-block: var(--section-size--medium);
}
.l-section.-large {
    padding-block: var(--section-size--large);
}
.l-container {
    inline-size: var(--container-rate--medium);
    margin-inline: auto;
    max-inline-size: var(--container-size--medium);
}
.l-container.-large {
    inline-size: var(--container-rate--large);
    max-inline-size: var(--container-size--large);
}

/* header
--------------------------------------------------------- */
.l-header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    background: var(--color-base-primary);
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
    padding-block: 2rem;
    .l-container {
        display: flex;
        justify-content: space-between;
    }
}
@media (width < 768px) {
    .l-header {
        padding-block: 1rem;
        .c-btn-secondary {
            display: none;
        }
    }
}

/* footer
--------------------------------------------------------- */
.l-footer {
    padding-block: var(--section-size--small);
    .l-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-rows: auto;
        grid-template-areas:
            "l-footer__address l-footer__line l-footer__copyright";
        justify-content: center;
        gap: 1.33333333333rem 3.33333333333rem;
        &::before {
            grid-area: l-footer__line;
            content: '';
            width: 0.13333333333rem;
            background: var(--color-gray);
            border-radius: 50vw;
        }
    }
}
.l-footer__address {
    width: 12.2rem;
    grid-area: l-footer__address;
    display: grid;
    gap: 1em;
    text-align: center;
}
.l-footer__tel {
    font-size: 1.13333333333rem;
    font-weight: var(--font-weight-w7);
    margin-block: var(--leading-trim);
}
.l-footer__copyright {
    grid-area: l-footer__copyright;
    align-self: center;
    font-size: 0.86666666666rem;
    font-weight: var(--font-weight-w6);
}
@media (width < 768px) {
    .l-footer {
        .l-container {
            grid-template-columns: 100%;
            grid-template-rows: repeat(3, auto);
            grid-template-areas:
                "l-footer__address"
                "l-footer__line"
                "l-footer__copyright";
            justify-items: center;
            &::before {
                width: 100%;
                height: 0.14285714285rem;
            }
        }
    }
}

/* ---------------------------------------------------------
    component
--------------------------------------------------------- */
/* background */
.c-bg--line {
    background-image: image-set(url(../../../images/lp/shuzai/c-bg--line.png) 1x, url(../../../images/lp/shuzai/c-bg--line@2x.png) 2x);
}
.c-bg--grid {
    background-image: image-set(url(../../../images/lp/shuzai/c-bg--grid.png) 1x, url(../../../images/lp/shuzai/c-bg--grid@2x.png) 2x);
}

/* btn */
.c-btn-wrapper {
    text-align: center;
}

.c-btn-primary {
    display: inline-grid;
    grid-template-columns: 1fr 1em;
    gap: 1.6rem;
    align-items: center;
    padding: 1.5625rem 3.125rem;
    background: linear-gradient(to right, var(--grd-main-primary));
    box-shadow: 0 0.1875rem 0.1875rem rgba(0, 143, 135, 0.8);
    border-radius: 50vw;
    font-size: 2.1875rem;
    font-weight: var(--font-weight-w7);
    letter-spacing: 0.42rem;
    color: var(--color-base-primary);
    position: relative;
    z-index: 0;
    &::before {
        content: '';
        width: calc(100% - 0.66666666666rem);
        height: calc(100% - 0.66666666666rem);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        z-index: -1;
        border: 0.13333333333rem solid var(--color-base-primary);
        border-radius: 50vw;
    }
    &::after {
        content: '';
        aspect-ratio: 1;
        background: currentColor;
        mask-image: url(../../../images/lp/shuzai/c-btn--arrow.svg);
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
    }
}
.c-btn-secondary {
    display: inline-grid;
    grid-template-columns: 1fr 1em;
    gap: 1.6rem;
    align-items: center;
    padding: 1rem 2.33333333333rem;
    background: linear-gradient(to right, var(--grd-main-primary));
    box-shadow: 0 0.1875rem 0.1875rem rgba(0, 143, 135, 0.8);
    border-radius: 50vw;
    font-size: 1.26666666667rem;
    font-weight: var(--font-weight-w7);
    letter-spacing: 0.3rem;
    color: var(--color-base-primary);
    position: relative;
    z-index: 0;
    &::before {
        content: '';
        width: calc(100% - 0.4rem);
        height: calc(100% - 0.4rem);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        z-index: -1;
        border: 0.13333333333rem solid var(--color-base-primary);
        border-radius: 50vw;
    }
    &::after {
        content: '';
        aspect-ratio: 1;
        background: currentColor;
        mask-image: url(../../../images/lp/shuzai/c-btn--arrow.svg);
        mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
    }
}
@media (width < 768px) {
    .c-btn-primary {
        gap: 0.5rem;
        font-size: 1.35rem;
        padding: 1rem 2rem 1rem 1.75rem;
        letter-spacing: 0.25rem;
    }
}


/* heading */
.c-heading--line {
    display: grid;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: var(--font-weight-w6);
    line-height: 1.5;
    text-align: center;
    margin-bottom: 4.4rem;
    &::after {
        content: '';
        height: 0.2rem;
        border-radius: 50vw;
        background: var(--color-main-primary);
    }
}
@media (width < 768px) {
    .c-heading--line {
        font-size: 1.71428571429rem;
        margin-bottom: 2.85714285714rem;
    }
}

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

/* text-color */
.u-color--main-secondary {
    color: var(--color-main-secondary);
}

/* ---------------------------------------------------------
    project
--------------------------------------------------------- */
/* mv */
.p-mv {
    background-image: image-set(url(../../../images/lp/shuzai/c-bg--line.png) 1x, url(../../../images/lp/shuzai/c-bg--line@2x.png) 2x);
    position: relative;
    z-index: 0;
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 50%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url(../../../images/lp/shuzai/p-mv--bg.svg) center top no-repeat;
        background-size: cover;
        opacity: 0.1;
        z-index: -1;
    }
    .c-btn-wrapper {
        margin-top: 4.33333333333rem;
    }
}
.p-mv__inner {
    position: relative;
    z-index: 0;
}
.p-mv__heading {
    display: grid;
    grid-template-columns: 100%;
    text-align: center;
    font-weight: var(--font-weight-w7);
}
.p-mv__heading--sub {
    font-size: 2.93333333333rem;
    span {
        color: var(--color-main-secondary);
    }
    em {
        font-size: 3.66666666667rem;
        color: var(--color-main-secondary);
    }
}
.p-mv__heading--main {
    font-size: 2.93333333333rem;
    color: var(--color-sub-secondary);
    em {
        background: var(--color-main-secondary);
        color: var(--color-base-primary);
        font-size: 4.26666666667rem;
        border-radius: 0.33333333333rem;
        padding-inline: 1rem;
        margin-left: 0.5rem;
    }
}
.p-mv__text {
    color: var(--color-sub-secondary);
    text-align: center;
    font-weight: var(--font-weight-w6);
    font-size: 1.6rem;
}
.p-mv__award--list {
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 1.4rem;
    margin-top: 1.66666666667rem;
}
.p-mv__illust {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.p-mv__illust--left {
    width: 23rem;
    position: absolute;
    left: -16.9333333333rem;
    bottom: 0;
}
.p-mv__illust--right {
    width: 10rem;
    position: absolute;
    right: -10rem;
    top: 0;
    bottom: 0;
    margin: auto;
}
@media (width < 768px) {
    .p-mv {
        .c-btn-wrapper {
            margin-top: -2rem;
        }
    }
    .p-mv__heading--sub {
        font-size: 1.71428571429rem;
        line-height: 1.3;
        em {
            font-size: 2.85714285714rem;
        }
    }
    .p-mv__heading--main {
        font-size: 2rem;
        line-height: 1.5;
        em {
            font-size: 2.6rem;
            margin-inline: -0.5rem;
            padding-inline: 0.5rem;
        }
    }
    .p-mv__text {
        font-size: 1.06666666667rem;
        margin-top: 0.66666666666rem;
    }
    .p-mv__award--list {
        flex-wrap: wrap;
        gap: 0.85714285714rem;
        margin-top: 2.14285714286rem;
    }
    .p-mv__award--list-item {
        width: calc((100% - 0.85714285714rem) / 2);
    }
    .p-mv__illust {
        position: static;
        display: flex;
        align-items: start;
        gap: 3.35714285714rem;
    }
    .p-mv__illust--left {
        position: static;
        width: 17.8571428571rem;
        margin-left: -2.28571428571rem;
    }
    .p-mv__illust--right {
        position: static;
        width: 5.71428571429rem;
        flex-shrink: 0;
    }
}

/* introduction */
.p-introduction {
    background: linear-gradient(to right, #EEE8CE, #D9D2A9);
}
.p-introduction__inner {
    position: relative;
    z-index: 0;
    &::before,
    &::after {
        content: '';
        position: absolute;
        z-index: 1;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        bottom: calc(-1 * var(--section-size--medium));
    }
    &::before {
        width: 6.13333333333rem;
        aspect-ratio: 94 / 180;
        background-image: image-set(url(../../../images/lp/shuzai/p-introduction--illust01.webp) 1x, url(../../../images/lp/shuzai/p-introduction--illust01@2x.webp) 2x);
        left: -4rem;
    }
    &::after {
        width: 5rem;
        aspect-ratio: 76 / 177;
        background-image: image-set(url(../../../images/lp/shuzai/p-introduction--illust02.webp) 1x, url(../../../images/lp/shuzai/p-introduction--illust02@2x.webp) 2x);
        right: -2.4rem;
    }
}
.p-introduction__heading {
    text-align: center;
    font-weight: var(--font-weight-w7);
    font-size: 2.4rem;
    margin-bottom: 4.26666666667rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
    em {
        color: var(--color-main-secondary);
    }
}
.p-introduction__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1.25rem 1.0625rem;
}
.p-introduction__list--item {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    padding: 2rem;
    border-radius: 3.625rem;
    background-color: var(--color-base-primary);
}
.p-introduction__list--heading {
    font-size: 1.6875rem;
    font-weight: var(--font-weight-w7);
    line-height: 1.5;
    text-align: center;
    align-self: center;
}
.p-introduction__list--contents {
    min-height: 4lh;
    em {
        font-weight: var(--font-weight-w7);
    }
}
@media (width < 768px) {
    .p-introduction__inner {
        padding-bottom: calc(var(--section-size--medium) / 2);
        &::before {
            width: 4.3rem;
            left: 0rem;
            bottom: calc(-1 * var(--section-size--medium) + 1rem);
        }
        &::after {
            width: 3.5rem;
            right: 0rem;
            bottom: calc(-1 * var(--section-size--medium) + 2rem);
        }
    }
    .p-introduction__heading {
        font-size: 1.71428571429rem;
        margin-bottom: 2.85714285714rem;
    }
    .p-introduction__list {
        grid-template-columns: 100%;
    }
    .p-introduction__list--heading {
        font-size: 1.28571428571rem;
        margin-block: var(--leading-trim);
        br {
            display: none;
        }
    }
    .p-introduction__list--contents {
        min-height: inherit;
        line-height: 1.6;
    }
}

/* reason */
.p-reason {
    background-color: var(--color-main-primary);
    position: relative;
    z-index: 0;
    &::before {
        content: '';
        display: block;
        inline-size: var(--container-rate--large);
        max-inline-size: var(--container-size--large);
        height: calc(100% - var(--section-size--medium));
        margin: auto;
        background-color: var(--color-base-primary);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }
    &::after {
        content: '';
        display: block;
        inline-size: var(--container-rate--large);
        max-inline-size: var(--container-size--large);
        height: 18.6666666667rem;
        background-image: image-set(url(../../../images/lp/shuzai/p-reason--illust.webp) 1x, url(../../../images/lp/shuzai/p-reason--illust@2x.webp) 2x);
        background-position: left center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: calc(-18.6666666667rem + var(--section-size--large) * 1.5);
        left: -2.4rem;
        right: 0;
        margin: auto;
        z-index: 1;
    }
}
.p-reason__heading {
    font-weight: var(--font-weight-w6);
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 4.26666666667rem;
    em {
        font-size: 3.33333333333rem;
        font-weight: var(--font-weight-w7);
    }
    &::after {
        content: '';
        display: inline-block;
        width: 3.4rem;
        aspect-ratio: 51 / 44;
        background: url(../../../images/lp/shuzai/c-icon--accent.svg) center no-repeat;
        background-size: contain;
        translate: -0.5em calc(-1 * (1lh - 1em) / 2);
    }
}
.p-reason__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    counter-reset: counter-reason-list;
    gap: 2.86666666667rem 1.06666666667rem;
}
.p-reason__list--item {
    counter-increment: counter-reason-list;
    display: grid;
    gap: 2rem;
    align-items: start;
    text-align: center;
}
.p-reason__list--label {
    background-color: var(--color-main-secondary);
    color: var(--color-base-primary);
    border-radius: 50vw;
    font-weight: var(--font-weight-w6);
    font-size: 1.6rem;
    padding: 0 5.1rem calc((1lh - 1em) / 2) 2.6rem;
    position: relative;
    z-index: 1;
    line-height: 1.5;
    box-shadow: 0 3px 7px rgba(60, 60, 60, 0.25);
    &::before {
        content: '';
        display: block;
        width: 2.13333333333rem;
        aspect-ratio: 1;
        background: url(../../../images/lp/shuzai/c-icon--pen.svg) center no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 2.6rem;
        margin: auto;
    }
    &::after {
        content: counter(counter-reason-list, decimal-leading-zero);
        font-weight: var(--font-weight-w7);
        font-size: 2.13333333333rem;
    }
}
.p-reason__list--contents {
    display: grid;
    gap: 0.66666666666rem;
    align-content: space-between;
    p {
        font-size: 1.06666666667rem;
    }
}
.p-reason__list--heading {
    color: var(--color-main-secondary);
    font-weight: var(--font-weight-w6);
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.5;
}
@media (width < 768px) {
    .p-reason {
        &::after {
            height: 8.57142857143rem;
            left: 0;
            bottom: calc(-8.57142857143rem * 0.3);
        }
    }
    .p-reason__heading {
        font-size: 1.57142857143rem;
        margin-bottom: 4.14285714286rem;
        em {
            font-size: 2rem;
        }
        &::after {
            width: 1.42857142857rem;
            margin-left: -0.5em;
            translate: 0.25em calc(-1 * (1lh - 1em) * 0.75);
        }
    }
    .p-reason__inner {
        padding-inline: 1em;
    }
    .p-reason__list {
        grid-template-columns: 100%;
        gap: 3rem;
    }
    .p-reason__list--item {
        gap: 2.28571428571rem;
    }
    .p-reason__list--label {
        font-size: 1.57142857143rem;
        padding: calc((1lh - 1em) / 2) 4rem calc((1lh - 1em) / 2) 2rem;
        &::after {
            font-size: 1.71428571429rem;
        }
        &::before {
            width: 2rem;
            right: 2.2rem;
        }
    }
    .p-reason__list--heading {
        font-size: 1.28571428571rem;
    }
    .p-reason__list--contents {
        p {
            font-size: 1rem;
        }
    }
}

/* price */
.p-price {
    background: var(--color-base-secondary);
    .c-btn-wrapper {
        margin-top: 4.26666666667rem;
    }
}
.p-price__inner {
    position: relative;
    z-index: 0;
    &::after {
        content: '';
        display: block;
        inline-size: var(--container-rate--medium);
        margin-inline: auto;
        max-inline-size: var(--container-size--medium);
        height: 13.3333333333rem;
        background-image: image-set(url(../../../images/lp/shuzai/p-price--illust.webp) 1x, url(../../../images/lp/shuzai/p-price--illust@2x.webp) 2x);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain;
        position: absolute;
        left: 0;
        right: -3.33333333333rem;
        bottom: calc(-1 * var(--section-size--medium) * 0.75);
        z-index: -1;
    }
}
.p-price__plan {
    display: grid;
    justify-content: center;
    overflow-x: auto;
}
.p-price__table {
    border-collapse: collapse;
    td, th {
        text-align: center;
        vertical-align: middle;
    }
    th {
        font-size: 1.33333333333rem;
    }
    td {
        em {
            font-weight: var(--font-weight-w6);
        }
    }
    tr:first-child > th:first-of-type {
        border-radius: 1rem 0 0 0;
    }
}
.p-price__table--thead {
    th {
        font-weight: var(--font-weight-w6);
        background: var(--color-main-primary);
        padding: 1em 1.5em;
        line-height: 1.2;
        border-style: solid;
        border-color: var(--color-base-secondary);
        &:not(:first-of-type) {
            border-left-width: 0.46666666666rem;
        }
    }
}
.p-price__table--tbody {
    th {
        font-weight: var(--font-weight-w7);
        background: var(--color-gray);
        line-height: 1.4;
        padding-inline: 2em;
        border: 0.2rem solid var(--color-base-secondary);
    }
    td {
        background: var(--color-base-primary);
        padding-block: 1.2em;
        padding-inline: 2em;
    }
    tr:not(:first-child) {
        border-color: var(--color-main-primary);
        border-style: dashed;
        border-width: 0.13333333333rem 0 0;
    }
}
.p-price__table-row--price {
    td {
        font-weight: var(--font-weight-w7);
        color: var(--color-main-secondary);
        font-size: 1.6rem;
        span {
            color: var(--color-font-primary);
            font-size: 1rem;
        }
    }
}
@media (width < 768px) {
    .p-price__inner {
        &::after {
            position: static;
            height: 12.8571428571rem;
            background-position: center;
            margin-top: 3.57142857143rem;
        }
    }
    .p-price__table {
        th {
            font-size: 1.5rem;
        }
    }
    .p-price__table--thead {
        tr > *:first-child {
            min-width: calc(1.5rem * 5);
        }
    }
    .p-price__table--tbody {
        th {
            padding-inline: 0;
        }
        td {
            min-width: 16rem;
            padding-inline: 0.5em;
        }
    }
}

/* flow */
.p-flow__inner {
    position: relative;
    z-index: 0;
    &::before {
        content: '';
        width: 25.0666666667rem;
        aspect-ratio: 376 / 595;
        background: url(../../../images/lp/shuzai/p-flow--bg.svg) center top no-repeat;
        background-size: contain;
        display: block;
        position: absolute;
        top: calc(-1 * var(--section-size--medium));
        left: -25%;
        z-index: -1;
    }
}
.p-flow__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    counter-reset: flow__list;
    gap: 3rem 4rem;
}
.p-flow__list--item {
    position: relative;
    z-index: 0;
    counter-increment: flow__list;
    display: grid;
    min-height: 9.2rem;
    &::after {
        content: '';
        display: block;
        width: calc(100% + 4.2rem);
        height: 0.4rem;
        border-radius: 50vw;
        background: var(--color-main-primary);
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
    }
    &:nth-child(4n):not(:last-child) {
        &::before {
            content: '';
            display: block;
            width: 1.3em;
            aspect-ratio: 1;
            background: var(--color-main-primary);
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            right: -3rem;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
    }
    &:nth-child(4n + 1):not(:first-child) {
        &::before {
            content: '';
            display: block;
            width: 1.3em;
            aspect-ratio: 1;
            background: var(--color-main-primary);
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: -2.3rem;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
        &::after {
            width: calc(100% + 8.2rem);
            left: -4.1rem;
        }
    }
    &:not(:last-child) {
        .p-flow__list--contents::before {
            grid-template-rows: repeat(2, auto);
            content: counter(flow__list);
            width: 2.13333333333rem;
            display: grid;
            place-content: center;
            aspect-ratio: 1;
            border-radius: 50%;
            position: absolute;
            top: -0.5lh;
            left: 1lh;
            line-height: 1;
            background: var(--color-main-primary);
            font-weight: var(--font-weight-w7);
            color: var(--color-base-primary);
            font-size: 1.86666666667rem;
        }
    }
    &:last-child {
        background: var(--color-main-primary);
        place-content: center;
        text-align: center;
        font-weight: var(--font-weight-w7);
        font-size: 1.33333333333rem;
        border-radius: 50vw;
        border-style: solid;
        border-color: var(--color-main-primary);
        border-width: 0.4rem;
        &::after {
            content: none;
        }
        &::before {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50vw;
            border: 0.26666666666rem solid var(--color-base-primary);
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
    &.emphasized {
        .p-flow__list--contents {
            border-color: var(--color-main-secondary);
        }
        .p-flow__list--contents::before {
            background: var(--color-main-secondary);
        }
        .p-flow__list--balloon {
            background: var(--color-main-secondary);
            color: var(--color-base-primary);
            &::before {
                background: var(--color-main-secondary);
            }
        }
    }
}
.p-flow__list--contents {
    grid-row: span 2;
    display: grid;
    grid-template-rows: subgrid;
    text-align: center;
    background-color: var(--color-base-primary);
    border-radius: 50vw;
    border-style: solid;
    border-color: var(--color-main-primary);
    border-width: 0.4rem;
    position: relative;
    z-index: 0;
}
.p-flow__list--figure {
    align-self: center;
    padding-left: 0.3rem;
    img {
        height: 3.33333333333rem;
        width: auto;
    }
}
.p-flow__list--text {
    font-weight: var(--font-weight-w7);
    line-height: 1.5;
    align-self: start;
    span {
        font-size: 0.86666666666rem;
        font-weight: var(--font-weight-w4);
    }
}
.p-flow__list--balloon {
    width: 3.8rem;
    background: var(--color-main-primary);
    position: absolute;
    right: -0.33333333333rem;
    top: -1rem;
    font-size: 0.8rem;
    aspect-ratio: 1;
    line-height: 1.2;
    border-radius: 50vw;
    place-content: center;
    text-align: center;
    font-weight: var(--font-weight-w6);
    letter-spacing: 0;
    z-index: 0;
    &::before {
        content: '';
        display: block;
        width: 1em;
        aspect-ratio: 1;
        background: var(--color-main-primary);
        position: absolute;
        bottom: 0.25em;
        left: 0.25em;
        clip-path: polygon(50% 0, 100% 0, 100% 50%, 0% 100%);
        z-index: -1;
    }
    em {
        font-size: 0.9rem;
    }
}
@media (width < 768px) {
    .p-flow__list {
        grid-template-columns: 100%;
        gap: 1.42857142857rem;
    }
    .p-flow__list--item {
        &::after {
            width: 0.4rem;
            height: calc(100% + 1.7rem);
            bottom: inherit;
            right: 0;
        }
        &:nth-child(4n):not(:last-child),
        &:nth-child(4n + 1):not(:first-child) {
            &::after {
                width: 0.4rem;
                right: 0;
                left: 0;
            }
            &::before {
                content: none;
            }
        }
    }
}

/* example */
.p-example {
    display: grid;
    grid-template-columns: 1fr minmax(auto, var(--container-size--medium)) 1fr;
    grid-template-rows: auto auto;
    background-color: var(--color-main-primary);
    &::after {
        content: '';
        display: block;
        width: 100%;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        z-index: 0;
        background-image: image-set(url(../../../images/lp/shuzai/c-bg--white-line-piece.png) 1x, url(../../../images/lp/shuzai/c-bg--white-line-piece@2x.png) 2x);
        background-position: center bottom 41px;
        background-repeat: repeat-x;
        translate: 0 var(--section-size--medium);
    }
    .p-flow + & {
        padding-top: 0;
        &::before {
            content: '';
            grid-column: 1 / 4;
            grid-row: 1 / 2;
            display: block;
            width: 100%;
            height: calc(var(--section-size--large) + 2px);
            background: var(--color-base-primary);
            clip-path: polygon(0 0, 100% 0%, 100% 2px, 50% 100%, 0 2px);
            margin-bottom: var(--section-size--large);
            translate: 0 -1px;
        }
    }
    .c-heading--line::after {
        background: var(--color-base-primary);
    }
}
.p-example__inner {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    z-index: 1;
    position: relative;
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: var(--color-main-primary);
        background-image: image-set(url(../../../images/lp/shuzai/c-bg--white-line-left.png) 1x, url(../../../images/lp/shuzai/c-bg--white-line-left@2x.png) 2x);
        background-position: left bottom 40px;
        background-repeat: no-repeat;
        position: absolute;
        z-index: -1;
        translate: 0 var(--section-size--medium);
        bottom: 0;
        left: -25%;
    }
    &::after {
        content: '';
        width: 7.53333333333rem;
        aspect-ratio: 113 / 151;
        background-image: image-set(url(../../../images/lp/shuzai/p-example--illust.webp) 1x, url(../../../images/lp/shuzai/p-example--illust@2x.webp) 2x);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: -3.33333333333rem;
        right: 0;
        z-index: -1;
    }
}
.p-example__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.33333333333rem;
}
.p-example__list--item {
    background: var(--color-base-secondary);
    border-radius: 1.33333333333rem;
    padding: 2em 1em;
    text-align: center;
    display: grid;
    gap: 0.53333333333rem;
}
.p-example__list--figure {
    text-align: center;
    img {
        width: 6.26666666667rem;
    }
}
.p-example__list--heading {
    color: var(--color-main-secondary);
    font-weight: var(--font-weight-w6);
    font-size: 1.6rem;
    line-height: 1.5;
}
@media (width < 768px) {
    .p-flow + .p-example::before {
        margin-bottom: var(--section-size--medium);
    }
    .p-example::after,
    .p-example__inner::before,
    .p-example__inner::after {
        content: none;
    }
    .p-example__list {
        grid-template-columns: 100%;
    }
    .p-example__list--item {
        gap: 0.57142857142rem;
    }
    .p-example__list--heading {
        font-size: 1.28571428571rem;
    }
}

/* voice */
.p-voice {
    display: grid;
    grid-template-columns: 1fr minmax(auto, var(--container-size--medium)) 1fr;
    grid-template-rows: auto;
    &::before {
        content: '';
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        background-image: image-set(url(../../../images/lp/shuzai/c-bg--line-piece.png) 1x, url(../../../images/lp/shuzai/c-bg--line-piece@2x.png) 2x);
        background-position: center top 40px;
        background-repeat: repeat-x;
        z-index: 0;
        translate: 0 calc(-1 * var(--section-size--medium));
    }
    &::after {
        content: '';
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        background-image: image-set(url(../../../images/lp/shuzai/c-bg--line-piece.png) 1x, url(../../../images/lp/shuzai/c-bg--line-piece@2x.png) 2x);
        background-position: center bottom 40px;
        background-repeat: repeat-x;
        z-index: 0;
        translate: 0 var(--section-size--medium);
    }
}
.p-voice__inner {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    position: relative;
    z-index: 1;
    &::before {
        content: '';
        width: 100%;
        height: 435px;
        background-color: var(--color-base-primary);
        background-image: image-set(url(../../../images/lp/shuzai/c-bg--line-right.png) 1x, url(../../../images/lp/shuzai/c-bg--line-right@2x.png) 2x);
        background-position: right top 40px;
        background-repeat: no-repeat;
        position: absolute;
        top: calc(-1 * var(--section-size--medium));
        right: -25%;
        z-index: -1;
    }
    &::after {
        content: '';
        width: 100%;
        height: 435px;
        background-color: var(--color-base-primary);
        background-image: image-set(url(../../../images/lp/shuzai/c-bg--line-left.png) 1x, url(../../../images/lp/shuzai/c-bg--line-left@2x.png) 2x);
        background-position: left bottom 40px;
        background-repeat: no-repeat;
        position: absolute;
        bottom: calc(-1 * var(--section-size--medium));
        left: -25%;
        z-index: -1;
    }
}
.p-voice__article {
    background: var(--color-base-secondary);
    border-radius: 1em;
    box-shadow: 0 3px 15px rgba(60, 60, 60, 0.25);
    display: grid;
    gap: 1em;
    padding: 4.66666666667rem 8rem;
    position: relative;
    z-index: 0;
    * + & {
        margin-top: 2.66666666667rem;
    }
    &::after {
        content: '';
        display: block;
        width: 10px;
        aspect-ratio: 1;
        position: absolute;
        z-index: 1;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    &:nth-of-type(odd) {
        &::after {
            width: 4.8rem;
            aspect-ratio: 72 / 181;
            background-image: image-set(url(../../../images/lp/shuzai/p-voice--article-left.webp) 1x, url(../../../images/lp/shuzai/p-voice--article-left@2x.webp) 2x);
            bottom: -1.33333333333rem;
            left: -1.6rem;
        }
    }
    &:nth-of-type(even) {
        &::after {
            width: 5.86666666667rem;
            aspect-ratio: 88 / 181;
            background-image: image-set(url(../../../images/lp/shuzai/p-voice--article-right.webp) 1x, url(../../../images/lp/shuzai/p-voice--article-right@2x.webp) 2x);
            bottom: -3.33333333333rem;
            right: -1.6rem;
        }
    }
}
.p-voice__article--header {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "p-voice__article--figure p-voice__article--heading"
        "p-voice__article--figure p-voice__article--name";
    align-items: start;
    justify-content: start;
    gap: 0.53333333333rem 2.66666666667rem;
}
.p-voice__article--heading {
    grid-area: p-voice__article--heading;
    background: var(--color-main-primary);
    font-weight: var(--font-weight-w7);
    padding: 0.5em 1.46666666667rem 0.25em;
    border-radius: 0.5em;
    em {
        font-size: 2em;
        line-height: 1cap;
    }
}
.p-voice__article--figure {
    width: 8rem;
    grid-area: p-voice__article--figure;
    text-align: center;
    align-self: center;
}
.p-voice__article--name {
    grid-area: p-voice__article--name;
}
@media (width < 768px) {
    .p-voice,
    .p-voice__inner {
        &::before,
        &::after {
            content: none;
        }
    }
    .p-voice__article {
        padding: 1em;
        &::after {
            content: none;
        }
    }
    .p-voice__article--header {
        grid-template-columns: 100%;
        grid-template-rows: repeat(3, auto);
        grid-template-areas:
            "p-voice__article--heading"
            "p-voice__article--figure"
            "p-voice__article--name";
    }
    .p-voice__article--heading {
        text-align: center;
    }
    .p-voice__article--figure {
        justify-self: center;
    }
    .p-voice__article--name {
        text-align: center;
    }
}

/* faq */
.p-faq {
    background-color: var(--color-main-primary);
}
.p-faq__article {
    background-color: var(--color-base-primary);
    padding: 1.2rem 1.33333333333rem;
    border-radius: 1em;
    overflow: hidden;
    &[open] {
        .p-faq__a {
            grid-template-rows: 1fr;
        }
        .p-faq__q--icon {
            rotate: 180deg;
        }
    }
    &:not(:first-child) {
        margin-top: 1.33333333333rem;
    }
}
.p-faq__q {
    display: grid;
    grid-template-columns: auto 1fr 1.6rem;
    gap: 0 3.33333333333rem;
    cursor: pointer;
    padding: 0 3.33333333333rem;

    &::before {
        content: '';
        display: inline-block;
        aspect-ratio: 9 / 10;
        width: 2.4rem;
        background-image: url(../../../images/lp/shuzai/c-icon--q.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        align-self: start;
    }

    &::marker,
    &::-webkit-details-marker {
        display: none;
        content: '';
    }
}
.p-faq__q--heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 3.33333333333rem;
    font-size: 1.33333333333rem;
    font-weight: var(--font-weight-w6);
    &::before {
        content: '';
        background: var(--color-main-primary);
        width: 0.26666666666rem;
        border-radius: 50vw;
    }
}
.p-faq__q--icon {
    aspect-ratio: 2 / 1;
    background-color: var(--color-main-primary);
    align-self: center;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.p-faq__a {
    display: grid;
    transition: grid-template-rows .3s;
}
.p-faq__a--inner {
    overflow: hidden;
}
.p-faq__a--contents {
    background-color: var(--color-base-secondary);
    padding: 2rem 9.66666666667rem;
    margin-top: 1.33333333333rem;
    font-size: 1.33333333333rem;
    font-weight: var(--font-weight-w6);
}
@media (width < 768px) {
    .p-faq__q {
        padding-inline: 0;
        gap: 1.42857142857rem;
        &::before {
            width: 2rem;
        }
    }
    .p-faq__q--heading {
        gap: 1.42857142857rem;
        line-height: 1.5;
        font-size: inherit;
    }
    .p-faq__a--contents {
        font-size: inherit;
        padding: 1rem 1.42857142857rem;
    }
}

/* cta */
.p-cta {
    background: var(--color-main-secondary);
}
.p-cta__heading {
    color: var(--color-base-primary);
    font-weight: var(--font-weight-w6);
    font-size: 2.2rem;
    text-align: center;
    em {
        font-size: 2.8rem;
    }
}
.p-cta__contents {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;
    align-items: end;
    .c-btn-wrapper {
        translate: 0 -2rem;
    }
}
.p-cta__benefits {
    display: grid;
    grid-template-columns: 13.3333333333rem 1fr;
}
.p-cta__benefits--heading {
    place-content: center;
    font-size: 2.2rem;
    text-align: center;
    font-weight: var(--font-weight-w7);
    line-height: 1.2;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-base-primary);
    border: 0.8rem solid var(--color-main-primary);
    box-shadow: inset 0 0 0 0.4rem var(--color-main-secondary);
    z-index: 1;
    em {
        display: block;
        color: var(--color-main-secondary);
        font-size: 3.46666666667rem;
    }
}
.p-cta__benefits--contents {
    font-weight: var(--font-weight-w7);
    font-size: 2.46666666667rem;
    background: var(--color-base-primary);
    border-radius: 0 1rem 1rem 0;
    align-self: end;
    padding: 0.5rem 3rem 1.25rem;
    text-align: right;
    translate: -2rem -2rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    em {
        font-size: 3.46666666667rem;
        letter-spacing: 0.1em;
        margin-left: 0.1em;
        position: relative;
        z-index: 0;
        &::after {
            content: '';
            display: block;
            width: 100%;
            height: 0.66666666666rem;
            background: var(--color-main-primary);
            border-radius: 50vw;
            position: absolute;
            bottom: -0.3rem;
            left: -0.05em;
            z-index: -1;
        }
    }
}
@media (width < 768px) {
    .p-cta__heading {
        font-size: 1.57142857143rem;
        margin-bottom: 2.14285714286rem;
        em {
            font-size: 2rem;
        }
    }
    .p-cta__contents {
        grid-template-columns: 100%;
        gap: 2.5rem;
        .c-btn-wrapper {
            translate: 0;
        }
    }
    .p-cta__benefits {
        grid-template-columns: 100%;
        gap: 2.14285714286rem;
    }
    .p-cta__benefits--heading {
        aspect-ratio: initial;
        border-radius: 1rem;
        border-width: 0.42857142857rem;
        padding: 0.4rem 0.4rem 0.75rem;
        font-size: 1.71428571429rem;
        box-shadow: inset 0 0 0 0.28571428571rem var(--color-main-secondary);
        em {
            display: initial;
            font-size: 2.85714285714rem;
        }
    }
    .p-cta__benefits--contents {
        translate: 0;
        padding: 0;
        background: transparent;
        color: var(--color-base-primary);
        text-align: center;
        em {
            color: var(--color-main-primary);
            display: block;
            margin: 0 auto;
            width: fit-content;
            &::after {
                height: 0.35714285714rem;
            }
        }
    }
}

/* form */
.p-form {
    background: var(--color-base-secondary);
}
.p-form__contents {
    background: var(--color-base-primary);
    padding: 2rem;
    box-shadow: 0 3px 7px rgba(60, 60, 60, 0.25);
}
@media (width < 768px) {
    .p-form__contents {
        padding: 1.5rem 1rem;
    }
}

/* thanks */
.p-thanks__inner {
    p {
        text-align: center;
        & + & {
            margin-top: 1lh;
        }
    }
    .c-btn-wrapper {
        margin-top: 2rem;
    }
}
@media (width < 768px) {
    .p-thanks__inner {
        p {
            text-align: left;
        }
    }
}