/* MV */
.mv {
    position: relative;
    min-height: 72rem;
    overflow: clip;
    background-image: url('../../images/mv@2x.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.mv__inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-top: 8rem;
}

.mv__content {
    flex: 1;
    max-width: 58rem;
}

.mv__tag {
    display: inline-block;
    padding: 1.1rem 2.6rem 1.2rem 1.1rem;
    border-radius: 2.7rem;
    background: var(--color-main);
    color: var(--color-sub);
    font-size: 2rem;
    line-height: 1.0;
}

.mv__title {
    margin-top: 2.5rem;
    color: var(--color-black);
    font-size: 5rem;
    line-height: 1.0;
    letter-spacing: 0.05em;
    text-shadow:
        0.5px 0 0 var(--color-white),
        -0.5px 0 0 var(--color-white),
        0 0.5px 0 var(--color-white),
        0 -0.5px 0 var(--color-white);
}

.mv__title-number {
    color: var(--color-main);
    font-size: 10rem;
    font-family: var(--font-en);
    line-height: 1.2;
}

.mv__title-main {
    color: var(--color-main);
    letter-spacing: 0.05em;
    font-size: 8.5rem;
    line-height: 1.4;
}

.mv__memoaca-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44.7rem;
    height: 8rem;
    border-radius: .7rem;
    background: var(--color-main);
    margin-top: 1.2rem;
}

.mv__memoaca-text img {
    display: block;
    width: 35.9rem;
    height: auto;
}

.mv__list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 2.4rem 0 5rem;
}

.mv__list-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.8rem;
    line-height: 1.8;
}

.mv__list-item img {
    flex-shrink: 0;
    width: 2.4rem;
    height: auto;
    margin-top: .4rem;
}

.mv__paozo {
    position: relative;
    width: 28.8rem;
    pointer-events: none;
}

.mv__paozo--bar {
    position: absolute;
    right: -6.5rem;
    bottom: 1.8rem;
    z-index: 1;
    width: 28.8rem;
}

.mv__paozo--bar .mv__balloon {
    top: -6rem;
    right: .5rem;
    left: auto;
}

.mv__paozo--bar .mv__balloon::after {
    right: 8rem;
}

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

.mv__balloon {
    position: absolute;
    top: -6rem;
    right: .5rem;
    z-index: 1;
    padding: 1.1rem 2.3rem;
    width: max-content;
    max-width: 27rem;
    border-radius: .8rem;
    background: var(--color-white);
    color: var(--color-main);
    text-align: center;
}

.mv__balloon::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    left: 12.4rem;
    width: 1.9rem;
    height: 2.6rem;
    background: var(--color-white);
    clip-path: polygon(0 0, 100% 0, 100% 100%);

}

/* MV下のバー（ナビゲーション） */
.mv__bar {
    background: var(--color-main);
}

.mv__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 0;
}

.mv__bar-right {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    overflow: visible;
}

.mv-bar-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
}

.mv-bar-nav__item:first-child {
    margin-left: 1.7rem;
}

.mv-bar-nav__link {
    color: var(--color-white);
    text-decoration: none;

    font-size: 1.8rem;
    line-height: 1.4;
    white-space: nowrap;
}

/* バーのナビゲーションのホバー後の動き */
@media (hover: hover) and (pointer: fine) {
    .mv-bar-nav__link:hover {
        opacity: .8;
    }
}

/* バーのナビゲーションのCTA */
.mv-bar-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 2.6rem 2.8rem 2.5rem 2.6rem;
    border: 2px solid #f39800;
    background-color: var(--color-accent);
    color: var(--color-white);
    border-radius: 4.05rem;
    text-decoration: none;
    font-size: 2.8rem;
    white-space: nowrap;
    line-height: 1;
    z-index: 1;
}


@media screen and (max-width: 767px) {
    .mv {
        --mv-sp-bar-height: calc((110 / 375) * 100vw);
        --mv-sp-height: calc((650 / 375) * 100vw);
        height: var(--mv-sp-height);
        min-height: var(--mv-sp-height);
        overflow-x: clip;
        background-image: url('../../images/sp/sp-mv@2x.jpg');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    .mv__inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: 100%;
        min-height: var(--mv-sp-height);
        padding: 0 calc((20 / 375) * 100vw);
    }

    .mv__content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        max-width: 100%;
    }

    .mv .mv__content.js-animation.animation--fadein,
    .mv .mv__content.js-animation.animation--fadein.is-show {
        transform: none;
    }

    .mv__tag {
        margin-top: calc((12 / 375) * 100vw);
        font-size: calc((16 / 375) * 100vw);
        line-height: 1.2;
        padding: .3em 1.6em .3em 1em;
        text-align: left;
        align-self: flex-start;
        border-radius: 2em;
    }

    .mv__tag-line {
        display: inline;
    }

    /* 「増」の前の余白を調整 */
    .mv__tag-line+.mv__tag-line {
        display: block;
        padding-left: 1em;
    }

    .mv__title {
        margin-top: calc((11 / 375) * 100vw);
        font-size: calc((25 / 375) * 100vw);
        line-height: 1.3;
    }

    .mv__title-number,
    .mv__title-main {
        font-size: calc((48 / 375) * 100vw);
        line-height: 1.3;
    }

    .mv__memoaca-text {
        width: 100%;
        max-width: calc((318 / 375) * 100vw);
        height: calc((65 / 375) * 100vw);
        padding: 0 calc((32 / 375) * 100vw);
        margin-top: calc((11 / 375) * 100vw);
    }

    .mv__memoaca-text img {
        width: calc((267 / 375) * 100vw);
        height: auto;
    }

    .mv__list {
        position: absolute;
        left: calc((20 / 375) * 100vw);
        bottom: calc((13 / 375) * 100vw);
        align-items: flex-start;
        gap: 0;
        margin: 0;
        padding: 0;
        flex-shrink: 0;
    }

    .mv__list-item {
        gap: calc((4 / 375) * 100vw);
        font-size: calc((14 / 375) * 100vw);
        text-align: left;
        line-height: 1.8;
    }

    .mv__list-item img {
        width: calc((20 / 375) * 100vw);
        margin-top: calc((3 / 375) * 100vw);
    }

    .mv__bar {
        bottom: calc((-10 / 375) * 100vw);
        overflow: hidden;
    }

    .mv__bar-inner {
        flex-direction: column;
        padding: calc((10 / 375) * 100vw) 0 calc((23 / 375) * 100vw);
        gap: 0;
    }

    .mv__bar-right {
        position: relative;
        flex-direction: column;
        width: 100%;
        max-width: calc((335 / 375) * 100vw);
        align-items: center;
    }

    .mv__cta-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc((2.3 / 375) * 100vw);
        width: 100%;
        padding-bottom: calc((4 / 375) * 100vw);
        color: var(--color-white);
        text-align: center;
        font-size: calc((10 / 375) * 100vw);
        line-height: 1.3;
    }

    .mv__cta-note::before,
    .mv__cta-note::after {
        content: "";
        display: inline-block;
        width: calc((12 / 375) * 100vw);
        height: 0;
        border-top: 0.5px solid var(--color-white);
        flex-shrink: 0;
    }

    .mv__cta-note::before {
        transform: rotate(56.31deg);
    }

    .mv__cta-note::after {
        transform: rotate(-56.31deg);
    }

    .mv__paozo--bar {
        right: calc((-10 / 375) * 100vw);
        bottom: 0;
        z-index: 1;
        width: calc((110 / 375) * 100vw);
        transform: translateY(35%);
    }

    .mv__paozo--bar .mv__balloon {
        top: calc((-56 / 375) * 100vw);
        right: calc((-10 / 375) * 100vw);
        max-width: calc((180 / 375) * 100vw);
        font-size: calc((12 / 375) * 100vw);
    }

    .mv__paozo--bar .mv__balloon::after {
        right: calc((48 / 375) * 100vw);
        left: auto;
        transform: none;
    }

    .mv-bar-nav__list {
        display: none;
    }

    .mv-bar-nav__cta {
        width: 100%;
        font-size: calc((16 / 375) * 100vw);
        white-space: normal;
        text-align: center;
        padding: calc((16 / 375) * 100vw) calc((22 / 375) * 100vw);
        margin-bottom: 0;
        gap: .5rem;
    }

}

/* こんなお悩みありませんか？ */
.section-worry {
    overflow: hidden;
    padding-top: 9rem;
    padding-bottom: 8.4rem;
}

.section-worry::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: max(0rem, calc((100vw - 100rem) / 2 - 20rem));
    z-index: 0;
    width: 39.25rem;
    height: 43.55rem;
    background: url('../../images/worry-bg@2x.png') no-repeat center / contain;
    pointer-events: none;
}

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

.worry__body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.worry__list {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    font-size: 1.8rem;
}

.worry__img {
    position: absolute;
    overflow: hidden;
    border-radius: 50%;
}

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

.worry__img--left {
    top: -8.5rem;
    left: 0;
    max-width: 20rem;
}

.worry__img--right {
    right: 0;
    bottom: -7.5rem;
    max-width: 18rem;
}

@media screen and (max-width: 767px) {
    .section-worry {
        padding-top: 5rem;
        padding-bottom: 19rem;
    }

    .section-worry::before {
        --worry-bg-width: clamp(20rem, 53vw, 32rem);

        top: 24rem;
        left: 0;
        right: auto;
        width: var(--worry-bg-width);
        height: calc(var(--worry-bg-width) * 1.11);
        background-image: url('../../images/sp/sp-worry-bg@2x.png');
    }

    /* SPでのコンテナの幅を調整 */
    .worry__inner {
        padding-inline: 4rem;
    }

    .worry__list {
        gap: 0;
        font-size: 1.6rem;
    }

    .worry__img--left {
        width: 12rem;
        top: 13rem;
        left: calc(50% - 13.4rem);
    }

    .worry__img--right {
        width: 7rem;
        bottom: -15.6rem;
        right: calc(50% - 10rem);
    }
}

/* about */
.section-about::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: max(0rem, calc((100vw - 100rem) / 2 - 36rem));
    z-index: 0;
    width: 68.65rem;
    height: 43.55rem;
    background: url('../../images/about-bg@2x.png') no-repeat center / contain;
    pointer-events: none;
}

.section-about {
    overflow: hidden;
}

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

.about__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.about__character {
    width: 15.1rem;
}

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

.about__balloon {
    position: relative;
    padding: 1.6rem 1.9rem;
    border-radius: .8rem;
    background: var(--color-sub);
    color: var(--color-main);
    text-align: center;
}

.about__balloon::before {
    content: '';
    position: absolute;
    bottom: 1.5rem;
    left: -2.2rem;
    width: 2.6rem;
    height: 2.6rem;
    background: var(--color-sub);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.about__content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4.96rem;
    margin: 6rem 0 3rem;
}

.about__heading {
    font-size: 2.4rem;
    line-height: 2.0;
}

.about__text {
    width: 50%;
}

.about__title {
    padding-bottom: 1rem;
}

.about__text-lead {
    margin-top: 3.2rem;
    font-size: 1.8rem;
    line-height: 2.0;
}

.about__text-small {
    margin-top: 2.6rem;
    font-size: 1.4rem;
}

.about__image {
    width: 34%;
    margin-top: 4rem;
}

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

.about__profile {
    display: grid;
    align-items: center;
    gap: 2.4rem;

    grid-template-columns: 15rem 1fr;
}

.about__profile-image {
    overflow: hidden;
    width: 15rem;
    border-radius: 50%;
}

.about__profile-image img {
    width: 100%;
    height: auto;
}

.about__profile-name {
    margin-bottom: .2rem;
    font-size: 2rem;
}

.about__profile-name span {
    margin-left: 1rem;
    font-size: 1.6rem;
}

.cta-area {
    padding-top: 7rem;
}

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

    .section-about::before {
        --about-bg-width: clamp(30rem, 80vw, 48rem);

        top: 88rem;
        left: auto;
        right: -4rem;
        width: var(--about-bg-width);
        height: calc(var(--about-bg-width) * 0.6333);
        background-image: url('../../images/sp/sp-about-bg@2x.png');
    }

    .about__lead {
        margin-inline: auto;
        padding-inline: 2rem;
    }

    .about__character {
        margin-inline: 0;
        max-width: 7.86rem;
    }

    .about__balloon {
        font-size: 1.4rem;
        padding: .8rem 1.8rem .6rem;
        max-width: 21.7rem;
    }

    .about__balloon::before {
        bottom: .7rem;
        left: -1.5rem;
        width: 1.5rem;
        height: 2rem;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

    .about__content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 3rem 0;
    }

    .about__text {
        display: contents;
        width: 100%;
    }

    .about__heading,
    .about__text-lead,
    .about__text-small {
        width: 100%;
    }

    .about__image {
        order: 3;
        align-self: center;
        width: 43%;
        max-width: 28rem;
        margin: 0 0 2rem;
    }

    .about__heading {
        order: 1;
        font-size: 1.8rem;
        line-height: 2;
    }

    .about__text-lead {
        order: 2;
        margin: 0 0 2.4rem;
    }

    .about__text-small {
        order: 4;
        margin-top: 0;
        line-height: 1.8;
    }

    .about__profile {
        align-items: end;
        gap: 1.6rem 2rem;
        margin-top: 3.2rem;
        grid-template-columns: 12rem 1fr;
    }

    .about__profile-image {
        width: 12rem;
        grid-row: 1;
    }

    .about__profile-text {
        display: contents;
    }

    .about__profile-name {
        margin-bottom: 0;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }

    .about__profile-name span {
        margin-left: 1.5rem;
        font-size: 1.4rem;
    }

    .about__profile-text>p:not(.about__profile-name) {
        grid-column: 1 / -1;
        font-size: 1.4rem;
    }

    .cta-area {
        padding-top: 5rem;
    }
}


/* メモアカ式脳トレの特徴 */
.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
}

.feature-item {
    display: flex;
    flex-direction: column;
    padding: 3.6rem 3rem;
    width: calc((100% - 10rem) / 3);
    border-radius: 2rem;
    background-color: var(--color-sub);
}

.feature-item__content,
.feature-item__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.feature-item__number {
    display: block;
    margin: 0 auto;
    padding: .7rem 1.1rem;
    width: fit-content;
    border-radius: .9rem;
    background-color: var(--color-main);
    color: var(--color-white);
    font-size: 2.4rem;
    line-height: 1.5;
}

.feature-item__title {
    margin-top: 2rem;
    color: var(--color-main);
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.5;
}

.feature-item__description {
    margin-top: 1.4rem;
    text-align: justify;
}

.feature-item__image {
    display: block;
    margin: auto auto 0;
    max-width: 10rem;
    width: auto;
    height: auto;
}

.feature-item:nth-child(2) .feature-item__image {
    max-width: 7rem;
}

.feature-item:nth-child(3) .feature-item__image {
    max-width: 8rem;
    padding-top: 1.8rem;
}

/* 04 横長カード */
.feature-item--wide {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 3.2rem;
    min-height: auto;
    width: 100%;
    text-align: left;
}

.feature-item--wide .feature-item__main {
    flex: 1;
}

.feature-item__header {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.feature-item--wide .feature-item__number {
    margin: 0;
}

.feature-item--wide .feature-item__title {
    margin-top: 0;
    text-align: left;
}

.feature-item--wide .feature-item__body {
    margin-left: 9.2%;
}

.feature-item__note {
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 1.8;
}

.feature-item__image-wrap {
    flex: 0 0 13%;
}

.feature-item__image-wrap img {
    display: block;
    max-width: 10rem;
    width: 100%;
    height: auto;

    margin-inline: auto;
}

.feature__cta {
    padding-top: 7rem;
}


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

    .feature-list {
        flex-direction: column;
        gap: 3rem;
        padding-top: 0;
    }

    .feature-item {
        width: 100%;
        padding: 4rem 2rem;
    }

    .feature-item__description {
        margin-top: 2rem;

    }

    .feature-item:nth-child(1) .feature-item__image {
        padding-top: 3.5rem;
    }

    .feature-item:nth-child(2) .feature-item__image {
        padding-top: 7rem;
    }

    .feature-item:nth-child(3) .feature-item__image {
        padding-top: 5.2rem;
    }


    .feature-item--wide .feature-item__image {
        padding-top: 0;
    }

    .feature-item--wide {
        flex-direction: column;
        gap: 4.5rem;
    }

    .feature-item__header {
        flex-direction: column;
    }

    .feature-item--wide .feature-item__title {
        text-align: center;
    }

    .feature-item--wide .feature-item__body {
        margin-left: 0;
    }

    .feature__cta {
        padding-top: 5rem;
    }


}

/* 学習の流れ */
.section-flow {
    background-color: var(--color-white);
    background-image: url('../../images/flow-bg@2x.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: min(144rem, 100%) auto;
}

.flow-list {
    list-style: none;
    margin-top: 2rem;
}

.flow-item {
    position: relative;
    width: 100%;
    max-width: 84.7rem;
    overflow: visible;
}

.flow-item--left {
    max-width: none;
    margin-right: auto;
}

.flow-item--right {
    width: 100%;
    max-width: none;
    margin-left: auto;
}

.flow-item__head {
    display: flex;
    align-items: center;
    gap: 2rem;

}

.flow-item--right .flow-item__head {
    justify-content: flex-start;
    margin-left: 50%;
}

.flow-item__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.4rem;
    min-height: 4.4rem;
    border: .2rem solid var(--color-main);
    color: var(--color-main);
    font-size: 2rem;
    line-height: 1;
    border-radius: 0.9rem;
}

.flow-item__label {
    color: var(--color-main);
    font-size: 2.4rem;
    line-height: 1.5;
}

.flow-item__body {
    display: flex;
    gap: 3rem;
    margin-top: 1.5rem;
    align-items: center;
}

.flow-item--left .flow-item__body {
    align-items: flex-start;
}

.flow-item--right .flow-item__body {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 0;
}

.flow-item--right .flow-item__card {
    grid-column: 2;
    width: 45rem;
    max-width: 100%;
    justify-self: start;
}

.flow-item--right:nth-child(2) .flow-item__card {
    width: 53rem;
    max-width: none;
}

.flow-item--right:nth-child(4) .flow-item__card {
    width: 43rem;
}

.flow-item--left .flow-item__illust {
    transform: translateY(-3rem);
}

.flow-item--right .flow-item__illust {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin-right: 2.4rem;
}

/* 追加分 */

.flow-item--left .flow-item__body {
    align-items: flex-start;
    gap: 3rem;
}

.flow-item--right .flow-item__illust {
    justify-self: end;
    margin-right: 2.4rem;
}

.flow-item:nth-child(1) {
    padding-bottom: 3rem;
}

.flow-item:nth-child(2) {
    padding-bottom: 8rem;
}

.flow-item:nth-child(3) {
    padding-bottom: 4rem;
}

/* 画像大きさ調整 */
.flow-item__illust {
    flex: 0 0 auto;
}

.flow-item:nth-child(1) .flow-item__illust {
    width: 26.9rem;
}

.flow-item:nth-child(2) .flow-item__illust {
    width: 28.7rem;
}

.flow-item:nth-child(3) .flow-item__illust {
    width: 26.5rem;
}

.flow-item:nth-child(4) .flow-item__illust {
    width: 25.1rem;
}

.flow-item__illust img {
    display: block;
    width: 100%;
    height: auto;
}


.flow-item__card {
    position: relative;
    flex: 0 0 45rem;
    max-width: 45rem;
    padding: 2.4rem 3rem;
    border-radius: 1.9rem;
    background-color: var(--color-main);
    color: var(--color-white);
}

/* 点線あしらい（01→02 / 03→04：右下へカーブ） */
.flow-item--left:not(:last-child) .flow-item__card::after {
    content: '';
    position: absolute;
    top: 114%;
    left: calc(100% - 20rem);
    width: 23.1rem;
    height: 10.1rem;
    background: url('../../images/flow-line01.svg') no-repeat center / contain;
    pointer-events: none;
}

.flow-item--left:nth-child(3):not(:last-child) .flow-item__card::after {
    background-image: url('../../images/flow-line03.svg');
}

/* 点線あしらい（02→03：左下へカーブ） */
.flow-item--right:not(:last-child) .flow-item__card::after {
    content: '';
    position: absolute;
    top: 114%;
    left: -10rem;
    width: 23.1rem;
    height: 10.1rem;
    background: url('../../images/flow-line02.svg') no-repeat center / contain;
    pointer-events: none;
}


.flow-item__card-title {
    margin-bottom: 1.3rem;
    font-size: 2.4rem;
    line-height: 1.5;
}

.flow-item__card-text {
    font-size: 1.6rem;
    line-height: 1.8;
}

@media screen and (max-width: 767px) {
    .flow-list {
        margin-top: 0;
    }

    .flow-item,
    .flow-item--left,
    .flow-item--right {
        margin-inline: auto;
    }

    .flow-item__head,
    .flow-item--right .flow-item__head {
        justify-content: flex-start;
        margin-left: 0;
        margin-bottom: 1.2rem;
    }

    .flow-item__number,
    .flow-item__label {
        font-size: 2.4rem;
        line-height: 1.5;
    }

    .flow-item__body,
    .flow-item--right .flow-item__body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3rem;
    }

    .flow-item--left .flow-item__body {
        align-items: stretch;
    }

    .flow-item--right:nth-child(2) .flow-item__card,
    .flow-item--right:nth-child(4) .flow-item__card {
        width: auto;
    }

    .flow-item__card {
        flex: none;
        max-width: none;
        padding: 2rem 1.6rem;
    }

    .flow-item__card-title {
        margin-bottom: 1.2rem;
        font-size: 1.8rem;
    }

    .flow-item__card-text {
        font-size: 1.4rem;
    }


    .flow-item:not(:last-child) {
        padding-bottom: 11.7rem;
    }

    /* 点線のあしらい */
    .flow-item--left:not(:last-child) .flow-item__card::after,
    .flow-item--right:not(:last-child) .flow-item__card::after {
        content: none;
    }

    .flow-item__illust {
        position: relative;
        margin-inline: auto;
    }

    .flow-item--left .flow-item__illust {
        transform: none;
    }

    .flow-item--right .flow-item__illust {
        margin-right: auto;
    }

    .flow-item:nth-child(1) .flow-item__illust::after,
    .flow-item:nth-child(3) .flow-item__illust::after {
        content: '';
        position: absolute;
        top: 104%;
        left: calc(50% - 10rem);
        width: 20rem;
        height: 8.7rem;
        background: url('../../images/flow-line01.svg') no-repeat center / contain;
        pointer-events: none;
    }

    .flow-item:nth-child(3) .flow-item__illust::after {
        background-image: url('../../images/flow-line03.svg');
    }

    .flow-item:nth-child(2) .flow-item__illust::after {
        content: '';
        position: absolute;
        top: 110%;
        left: calc(50% - 11rem);
        width: 20rem;
        height: 8.7rem;
        background: url('../../images/flow-line02.svg') no-repeat center / contain;
        pointer-events: none;
    }
}



/* ある週の問題例 */
.section-sample {
    overflow: hidden;
    background-color: var(--color-white);
    background-image: url('../../images/flow-bg@2x.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: min(144rem, 100%) auto;
}

.sample-week {
    display: grid;
    position: relative;
    align-items: start;
    grid-template-columns: 1fr;
}

.sample-week__list {
    display: grid;
    position: relative;
    grid-column: 1;
    grid-row: 1;
    list-style: none;
}

/* 曜日の線 */
.sample-week__list::before {
    content: '';
    display: block;
    position: absolute;
    top: 5rem;
    bottom: 5rem;
    left: 50%;
    z-index: 0;
    width: .5rem;
    background-color: var(--color-main);
    transform: translateX(-50%);
}

.sample-week__item {
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 5rem 1fr;
}

.sample-week__content {
    grid-column: 1;
    grid-row: 1;
    width: 36.8rem;
    margin-bottom: 6rem;
    justify-self: center;
}

.sample-week__day {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: .9rem;
    background-color: var(--color-main);
    color: var(--color-white);
    font-size: 2.4rem;
    line-height: 1.5;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.sample-week__item:last-child .sample-week__content {
    margin-bottom: 0;
}


.sample-week__title {
    margin-bottom: 1.1rem;
    color: var(--color-main);
    font-size: 2.4rem;
    line-height: 1.2;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.sample-week__tags {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2.1rem;
}

.sample-week__tag {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 1.2rem 1.5rem 1.3rem 2.6rem;
    min-width: 10.6rem;
    border: 0;
    background-color: var(--tag-blue);
    color: var(--color-main);
    font-size: 2rem;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .3s ease-out;
    letter-spacing: 0.1em;
}

.sample-week__tag::after {
    content: '';
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath fill='%23FD7D21' d='M0 0l10 6-10 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.088rem 1.257rem;
}

.sample-week__tag--yellow {
    background-color: var(--tag-yellow);
}

.sample-week__tag--pink {
    background-color: var(--tag-pink);
}

.sample-week__tag--green {
    background-color: var(--tag-green);
}

.sample-week__tag--blue {
    background-color: var(--tag-blue);
}

.sample-week__tag--purple {
    background-color: var(--tag-purple);
}

.sample-week__guide {
    position: absolute;
    top: 13rem;
    left: calc(50% + 15rem);
    text-align: center;
}

.sample-week__balloon {
    position: relative;
    margin-bottom: 1rem;
    padding: 2.1rem 2.4rem;
    border-radius: 2rem;
    background-color: var(--color-sub);
    color: var(--color-main);
    letter-spacing: 0.1em;
}

.sample-week__balloon::after {
    content: '';
    position: absolute;
    bottom: -1.6rem;
    left: 35%;
    width: 1.5rem;
    height: 1.8rem;
    background-color: var(--color-sub);
    clip-path: polygon(0 0, 100% 0, 108% 100%);
}

.sample-week__guide img {
    width: 12rem;
    height: auto;
}

.sample-week__tablet {
    position: absolute;
    top: 39rem;
    left: calc(50% + 6.7rem);
    width: 53rem;
}

.sample-week__tablet img {
    display: block;
    width: 100%;
    height: auto;

}

.sample-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-out, visibility .2s ease-out;
}

.sample-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.sample-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 70%);
}

.sample-modal__panel {
    position: relative;
    z-index: 1;
    width: min(98.8rem, 100%);
}

.sample-modal__close {
    position: absolute;
    top: -4rem;
    right: 0;
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    background-color: #9C9898;
    border-radius: .4rem;
    cursor: pointer;
}

.sample-modal__close::before,
.sample-modal__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.85rem;
    height: .3rem;
    border-radius: .3rem;
    background-color: var(--color-white);
}

.sample-modal__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.sample-modal__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.sample-modal__image {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--color-white);
}

@media screen and (max-width: 767px) {
    .section-sample {
        background-repeat: repeat-y;
        background-position: center top;
        background-size: 100% auto;
    }

    .sample-week {
        display: flex;
        flex-direction: column;
        padding-top: 0;
        gap: 4rem;
    }

    .sample-week__tablet {
        position: static;
        order: 1;
        width: 100%;
        margin-top: 0;
    }

    .sample-week__tablet img {
        padding-inline: 3.7rem;
    }

    .sample-week__guide {
        display: grid;
        position: static;
        order: 2;
        align-items: end;
        gap: 2rem;
        grid-template-columns: 8rem 1fr;
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        text-align: center;
        padding-inline: 1.6rem;

    }

    .sample-week__guide img {
        width: 7.86rem;
        grid-column: 1;
        grid-row: 1;
    }

    .sample-week__balloon {
        margin: 0;
        padding: 1.2rem 1.4rem;
        font-size: 1.2rem;
        grid-column: 2;
        grid-row: 1;
    }

    .sample-week__balloon::after {
        bottom: 1.2rem;
        left: -1.4rem;
        width: 1.6rem;
        height: 1.8rem;
        clip-path: polygon(100% 0, 100% 100%, 0 50%);
        transform: none;
    }

    .sample-week__list {
        order: 3;
        width: fit-content;
        max-width: 100%;
        margin-top: 2.4rem;
        margin-inline: auto;
        gap: 0;
        grid-template-columns: 4rem 1fr;
    }

    .sample-week__list::before {
        display: block;
        top: 2.5rem;
        bottom: 7rem;
        left: 1.8rem;
        width: .4rem;
        transform: none;
    }

    .sample-week__item {
        display: grid;
        grid-column: 1 / -1;
        gap: 3rem;
        grid-template-columns: 4rem 1fr;
    }

    .sample-week__day {
        font-size: 2.4rem;
        grid-column: 1;
    }

    .sample-week__day::after {
        content: none;
    }

    .sample-week__content {
        grid-column: 2;
        width: auto;
        padding-top: 0;
        margin-bottom: 4rem;
        justify-self: stretch;
    }

    .sample-week__item:last-child .sample-week__content {
        margin-bottom: 0;
    }

    .sample-week__title {
        margin-bottom: 1.5rem;
        font-size: 2.4rem;
        line-height: 1.2;
        letter-spacing: 0.1em;
        white-space: normal;
    }

    .sample-week__tags {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .sample-week__tag {
        min-width: 10rem;

        font-size: 2rem;
    }

    .sample-week__tag--yellow,
    .sample-week__tag--pink,
    .sample-week__tag--green,
    .sample-week__tag--purple {
        padding: 1.3rem 1.5rem 1.3rem 1.2rem;
    }

    .sample-week__tag--blue {
        padding: 1.3rem 1.5rem 1.3rem 2rem;
    }

    .sample-week__tag::after {
        width: 2.5rem;
        height: 2.5rem;
    }


}

/* 会員様の声 */

.voice-list {
    display: flex;
    gap: 5rem;
}

.voice-item {
    padding: 5rem 2.8rem;
    width: calc((100% - 5rem) / 3);
    border: 1px solid var(--color-main);
    border-radius: 2rem;
    background-color: var(--color-white);
    background-position: right bottom;
    background-repeat: no-repeat;
}

.voice-item--clock {
    background-image: url('../../images/voice-icon-clock@2x.png');
    background-size: 40% auto;
}

.voice-item--graph {
    background-image: url('../../images/voice-icon-graph@2x.png');
    background-size: 45% auto;
}

.voice-item__meta {
    font-size: 2rem;
}

.voice-item__quote {
    margin-top: 1.7rem;
}

@media screen and (max-width: 767px) {
    .voice-list {
        flex-direction: column;
        gap: 3rem;
    }

    .voice-item {
        width: 100%;
    }

}

/* 料金プラン */
.plan-body {
    display: grid;
    align-items: stretch;
    justify-content: center;
    grid-template-columns: 30rem 12.6rem 67.4rem;
}

.plan-card {
    border-radius: 2rem;
    background-color: var(--color-white);
    color: var(--color-main);
    text-align: center;
}

.plan-card-admission {
    display: grid;
    align-content: center;
    justify-content: center;
    column-gap: .4rem;
    padding: 2.4rem 5rem;
    grid-template-columns: auto auto;
}

.plan-card-admission .plan-card__title {
    grid-column: 1 / -1;
}

.plan-card-admission .plan-card__price-number {
    grid-column: 1;
}

.plan-card-admission .plan-card__price-unit {
    grid-column: 2;
    align-self: end;
    padding-bottom: 1.6rem;
}

.plan-plus {
    display: flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    width: 4.76rem;
    height: 4.76rem;
    border: 2.8px solid var(--color-white);
    border-radius: 50%;
    background-color: var(--color-main);
    color: var(--color-white);
    line-height: 1;
    justify-self: center;
}

.plan-plus span {
    position: relative;
    display: block;
    width: 2.52rem;
    height: 2.52rem;
    font-size: 0;
}

.plan-plus span::before,
.plan-plus span::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: .28rem;
    background-color: var(--color-white);
    transform: translate(-50%, -50%);
}

.plan-plus span::before {
    width: 2.52rem;
    height: .28rem;
}

.plan-plus span::after {
    width: .28rem;
    height: 2.52rem;
}

.plan-card--course {
    padding: 3rem 6rem 2.4rem;
}

.plan-card__title {
    font-size: 2.4rem;
    line-height: 1.5;
}

.plan-card__title span {
    display: block;
    font-size: 2rem;
}

.plan-card__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1rem;
}

.plan-card__price-label {
    padding: .5rem 1.3rem;
    border-radius: 1.1rem;
    background-color: var(--color-main);
    color: var(--color-white);
    line-height: 1.2;
}

.plan-card__price-number {
    font-size: 6.4rem;
    font-family: var(--font-en);
    line-height: 1.5;
}

.plan-card__price-unit {
    font-size: 2.4rem;
    line-height: 1.5;
}

.plan-card__content {
    display: grid;
    align-items: center;
    gap: 4.9rem;
    margin-top: 2rem;

    grid-template-columns: 1fr 19.7rem;
}

.plan-card__detail {
    padding: .9rem 1.7rem .7rem 2rem;
    border-radius: 2rem;
    background-color: #d3ebff;
}

.plan-card__detail-title {
    color: var(--color-main);
    text-align: center;
    font-size: 2.4rem;
    line-height: 1.5;
}

.plan-card__detail-list {
    display: grid;
    margin-top: .5rem;
    font-size: 1.6rem;
}

.section-plan__notes {
    margin-top: 3rem;
}

@media screen and (max-width: 767px) {
    .plan-body {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .plan-card {
        width: 100%;
        max-width: none;
        border-radius: 1rem;
    }

    .plan-card-admission {
        min-height: 100%;
        padding: 3.3rem 6.8rem;
        column-gap: 1rem;
        gap: .5rem;
    }

    .plan-card__title {
        font-size: 2.4rem;
        line-height: 1.5;
    }

    .plan-card__title span {
        font-size: 2rem;
        line-height: 1.5;
    }

    .plan-card__price-number {
        font-size: 6.4rem;
        line-height: 1.5;
    }

    .plan-card__price-unit {
        font-size: 2.4rem;
        line-height: 1.5;
    }

    .plan-card-admission .plan-card__price-unit {
        padding-bottom: .9rem;
    }

    .plan-plus {
        width: 3.4rem;
        height: 3.4rem;
        margin-block: 1rem;
    }

    .plan-plus span {
        width: 1.8rem;
        height: 1.8rem;
    }

    .plan-plus span::before {
        width: 1.8rem;
        height: .2rem;
    }

    .plan-plus span::after {
        width: .2rem;
        height: 1.8rem;
    }

    .plan-card--course {
        padding: 3.3rem 3.4rem 3.5rem 3.4rem;
    }

    .plan-card__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
        margin-top: 1rem;
    }

    .plan-card__price {
        gap: .8rem;
    }

    .plan-card__price-label {
        padding: .5rem 1.3rem;
        border-radius: 1.1rem;
        font-size: 1.6rem;
    }

    .plan-card__detail {
        max-width: 24rem;
    }

    .plan-card__detail-title {
        font-size: 2.4rem;
        line-height: 1.5;
    }

    .plan-card__detail-list {
        margin-top: .6rem;
        font-size: 2rem;
        line-height: 1.8;
    }

    .plan-card__detail-list span {
        font-family: var(--font-en);
    }

    .section-plan__notes {
        margin: 4rem auto 0;
        font-size: 1.6rem;
    }

    .section-plan .cta-area {
        padding-top: 5rem;
    }

    .section-plan .button-arrow {
        width: 1.4rem;
        height: 1.4rem;
    }

    .section-plan .button-arrow::before {
        width: .65rem;
        height: .78rem;
    }
}

/* よくあるご質問 */
.faq-list {
    max-width: 100rem;
    margin-inline: auto;
}

.faq-item {
    border: .1rem solid var(--color-main);
    border-bottom: 0;
}

.faq-item:first-child {
    border-radius: .6rem .6rem 0 0;
}

.faq-item:last-child {
    border-bottom: .1rem solid var(--color-main);
    border-radius: 0 0 .6rem .6rem;
}

.faq-item__heading {
    margin: 0;
}

.faq-item__question {
    display: grid;
    align-items: center;
    width: 100%;
    padding: 1.3rem 0 1rem 4.3rem;
    border: 0;
    background: transparent;
    color: var(--color-main);
    text-align: left;
    font-size: 2.4rem;
    line-height: 1.5;
    cursor: pointer;
    grid-template-columns: auto 1fr auto;
    gap: 2.1rem;
}

.faq-item__mark {
    font-family: var(--font-en);
    line-height: 1.5;
    font-weight: 700;
    font-size: 2.4rem;
}

.faq-item__question-text {
    font-size: 2.4rem;
    line-height: 1.5;
    color: var(--color-main);
}

.faq-item__icon {
    position: relative;
    width: 4rem;
    height: 4rem;
}

.faq-item__icon::before {
    content: '';
    position: absolute;
    top: 45%;
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-right: .2rem solid currentColor;
    border-bottom: .2rem solid currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform .2s ease-out;
}

.faq-item.is-open .faq-item__icon::before {
    transform: translate(-50%, -50%) rotate(225deg);
}

.faq-item__answer {
    display: none;
    padding: 4.1rem 4.8rem 4.1rem;
    border-top: .1rem solid var(--color-main);
}

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

    .faq-list {
        width: 100%;
    }

    .faq-item__question {
        align-items: flex-start;
        padding: 1.8rem 0 1.8rem 2.1rem;
        font-size: 1.8rem;
        line-height: 1.5;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0;
    }

    .faq-item__mark {
        margin-top: .4rem;
        margin-right: 1.1rem;
    }

    .faq-item__icon {
        align-self: center;
        width: 4rem;
        height: 4rem;
    }

    .faq-item__icon::before {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .faq-item.is-open .faq-item__icon::before {
        transform: translate(-50%, -50%) rotate(225deg);
    }

    .faq-item__answer {
        padding: 3rem 2.1rem 2.5rem;
    }
}




/* 他のメモアカサービス */
.section-service {
    padding-bottom: 0;
}

.service-description {
    width: fit-content;
    margin-inline: auto;
    font-size: 1.8rem;
}


.service-list {
    display: grid;
    justify-content: center;
    gap: 3rem;
    margin-top: 3.9rem;

    grid-template-columns: repeat(3, 32rem);
}

.service-card__link {
    display: block;
    overflow: hidden;
    border-radius: 2rem;
    background-color: var(--color-white);
    box-shadow: .2rem .2rem .3rem .1rem rgb(0 0 0 / 25%);
}

.service-card__image {
    margin-inline: auto;
}

.service-footer {
    position: relative;
    padding-top: 16rem;
}

.service-footer__bar {
    height: 4rem;
    background-color: var(--color-main);
}

.service-footer__character {
    position: absolute;
    right: max(2rem, calc((100vw - 120rem) / 2));
    bottom: 6rem;
    width: 16rem;
    height: auto;
    transform: translateY(20%);
    pointer-events: none;
}

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

    .service-inner {
        padding-inline: 2rem;
    }

    .service-description {
        font-size: 1.6rem;
    }

    .service-list {
        gap: 2.5rem;
        margin-top: 4rem;
        justify-content: stretch;
        grid-template-columns: 1fr;
    }

    .service-card,
    .service-card__link,
    .service-card__image {
        width: 100%;
    }

    .service-footer {
        padding-top: 12.3rem;
    }

    .service-footer__bar {
        height: 0;
    }

    .service-footer__character {
        right: 3.6rem;
        width: 12rem;
        bottom: 1.5rem;
    }
}




/* お申し込み方法 */
.section-application {
    padding-top: 4rem;
}

.application__box {
    --application-padding-left: clamp(4rem, 7vw, 10rem);
    --application-padding-right: clamp(4rem, 8vw, 12rem);

    position: relative;
    display: flex;
    align-items: center;
    gap: 4.2rem;
    padding: 5rem var(--application-padding-right) 5rem var(--application-padding-left);
    border-radius: 2rem;
    background-color: var(--color-white);
    color: var(--color-black);
}



.application__content {
    flex: 1;
}


.application__step-list {
    color: var(--color-main);
}


.application__step-item-title {

    font-size: 1.8rem;
    margin-bottom: 1.3rem;
}

.application__step-item {
    padding-bottom: .9rem;
    font-size: 1.8rem;
}

.application__step-item:last-child {
    padding-bottom: 0;
    white-space: nowrap;
}

.application__cta {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 2.5rem;
}

.application__promo {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.application__paozo {
    flex-shrink: 0;
    width: 15rem;
    margin-right: calc(var(--application-padding-right) * -1);
    margin-bottom: -5rem;
}

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

.application__balloon {
    position: relative;
    padding: 2rem 2.5rem;
    border-radius: 2rem;
    background: var(--color-sub);
    color: var(--color-main);
    font-size: 2rem;
    line-height: 1.5;
}

.application__balloon::after {
    content: '';
    position: absolute;
    top: 74%;
    right: -1.53rem;
    width: 1.53rem;
    height: 1.86rem;
    background: var(--color-sub);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transform: translateY(-50%);
}

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

    .application-inner {
        padding-inline: 2rem;
    }

    .application__box {
        flex-direction: column;
        gap: 3rem;
        padding: 5rem 2rem;
    }

    .application__step-list {
        padding-left: 2rem;
    }

    .application__step-item-title {
        margin-bottom: 1.6rem;
    }

    .application__step-item {
        display: flex;
        align-items: flex-start;
        gap: .2rem;
        padding-bottom: 1.2rem;
    }

    .application__step-item img {
        flex-shrink: 0;
        width: 1.8rem;
        height: auto;
        margin-top: .3rem;
    }

    .application__step-item:last-child {
        white-space: normal;
    }

    .application__step-item-title,
    .application__step-item {
        font-size: 1.6rem;
    }

    .application__cta {
        width: 100%;
        gap: 3.5rem;
    }

    .application__promo {
        align-items: center;
        justify-content: center;
        gap: 1.4rem;
        order: 1;
    }

    .application__balloon {
        order: 2;
        padding: 1.4rem 2.8rem;
        border-radius: .8rem;
        font-size: 1.4rem;
        text-align: center;
        flex: 1;
    }

    .application__balloon::after {
        top: 80%;
        right: auto;
        bottom: auto;
        left: -1.2rem;
        width: 1.5rem;
        height: 2rem;
        clip-path: polygon(100% 0, 100% 100%, 0 0);
        transform: translateY(-50%);
    }

    .application__paozo {
        order: 1;
        width: 7.4rem;
        margin-right: 0;
        margin-bottom: 0;
    }

    .application__cta .button {
        order: 2;
        width: 100%;
    }

    .application__cta .button span {
        font-size: 1.6rem;
        white-space: nowrap;
    }
}