* {
    min-height: 0vw
}

:root {
    --gap-fv: clamp(0.5rem, -5.722rem + 12.96vw, 4rem);
    --gap-l: clamp(4.5rem, 3.364rem + 4.85vw, 7rem);
    --gap-m: 4rem;
    --gap-s: clamp(1.5rem, 1.273rem + 0.97vw, 2rem);
    --gap-xs: clamp(0.5rem, 0.273rem + 0.97vw, 1rem)
}

main.praxis{
    margin-top: 0;
}

.praxis__btn-area {
    display: grid;
    justify-items: center
}

.praxis__btn-area .balloon {
    z-index: 1;
    position: relative;
    display: inline-block;
    margin-block-end: 1rem;
    padding-block: .25rem;
    padding-inline: 1rem;
    text-align: center;
    color: #1e2124;
    font-size: .875rem;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #1e2124;
    border-radius: 5rem
}

.praxis__btn-area .balloon::before,
.praxis__btn-area .balloon::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 100%;
    content: ""
}

.praxis__btn-area .balloon::before {
    border-style: solid;
    border-width: .875rem 10px 0 10px;
    border-color: #1e2124 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__btn-area .balloon::after {
    border-style: solid;
    border-width: .5rem 5px 0 5px;
    border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__btn-area a {
    margin-block-start: -1.5rem;
    width: 100%;
    max-width: 420px
}

.praxis__bg-gray {
    background-color: #f5f5f5
}

.praxis .cont-tit {
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.273rem + .97vw, 2rem);
    text-align: center
}

.praxis :where(p) {
    font-size: .875rem;
    font-size: clamp(.875rem, .818rem + .24vw, 1rem)
}

.praxis .c-btn--white:hover {
    border-color: #fff !important
}

.praxis__fv {
    max-width: 1200px;
    margin-inline: auto;
    display: grid
}

.praxis__fv__bg {
    background: #fff;
    background: linear-gradient(0deg, rgb(255, 255, 255) 35%, rgb(245, 245, 245) 100%)
}

@media screen and (min-width: 768px) {
    .praxis__fv {
        grid-template-columns: 40% calc(60% - var(--gap-fv));
        column-gap: var(--gap-fv);
        padding-block: var(--gap-m)
    }
}

@media screen and (min-width: 768px)and (max-width: 1199.98px) {
    .praxis__fv {
        grid-template-columns: 50% calc(50% - var(--gap-fv));
        padding: 48px 32px
    }
}

@media screen and (max-width: 767.98px) {
    .praxis__fv {
        padding: 48px 20px;
        row-gap: var(--gap-s)
    }

    .praxis__fv__heading {
        max-width: 576px;
        margin-inline: auto
    }
}

.praxis__fv__heading {
    display: grid;
    row-gap: 1rem
}

.praxis__fv__heading h1 {
    width: 256px
}

.praxis__fv__heading .sub-tit {
    font-size: 1.35rem;
    font-size: clamp(1.35rem, 1.055rem + 1.26vw, 2rem);
    font-weight: bold
}

.praxis__fv__heading .cost {
    padding-inline: clamp(.625rem, -5.375rem + 12.5vw, 4rem);
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    margin-block: 1rem;
    padding-block: 1rem;
    border-top: 1px solid #1e2124;
    border-bottom: 1px solid #1e2124
}

.praxis__fv__heading .cost .col {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .75rem
}

.praxis__fv__heading .cost .col .badge {
    display: grid;
    place-items: center;
    width: 3.5rem;
    aspect-ratio: 1;
    background-color: #1e2124;
    border-radius: 50%
}

.praxis__fv__heading .cost .col .badge strong {
    color: #fff;
    font-size: .875rem;
    line-height: 1.2
}

.praxis__fv__heading .cost .col .yen strong {
    color: #1e2124;
    font-size: 4.5rem;
    line-height: 3.5rem;
    font-family: "Space Grotesk", sans-serif
}

.praxis__fv__heading .cost .col .yen small {
    color: #1e2124;
    font-size: .875rem;
    font-size: clamp(.875rem, .818rem + .24vw, 1rem)
}

.praxis__fv__heading .cost hr {
    transform: rotate(115deg);
    transform-origin: 50% 0%;
    width: 120%;
    border: 0;
    border-top: 1px solid #1e2124
}

.praxis__issue {
    display: grid;
    row-gap: var(--gap-s);
    padding-block: var(--gap-m)
}

.praxis__issue__inner {
    display: grid;
    align-items: start
}

@media screen and (min-width: 768px) {
    .praxis__issue__inner {
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--gap-s)
    }
}

@media screen and (max-width: 767.98px) {
    .praxis__issue__inner {
        row-gap: var(--gap-s)
    }
}

.praxis__issue__inner .col {
    display: grid;
    row-gap: var(--gap-xs);
    text-align: center
}

.praxis__issue__inner .col img {
    border-radius: 1rem
}

.praxis__issue__inner .col p {
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem);
    font-weight: bold
}

.praxis__sortout {
    display: grid;
    row-gap: var(--gap-m);
    padding-block: var(--gap-l)
}

.praxis__sortout__heading {
    display: grid;
    row-gap: var(--gap-xs)
}

.praxis__sortout__heading p {
    text-align: center
}

.praxis__sortout__mov {
    width: 80%;
    margin-inline: auto
}

@media screen and (max-width: 767.98px) {
    .praxis__sortout__mov {
        width: 100%
    }
}

.praxis__sortout__mov .mov__inner {
    background-image: url(../images/praxis/praxis-sortout.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    padding-inline: 12%;
    padding-block: var(--gap-s);
    aspect-ratio: 16/9
}

.praxis__sortout__mov .mov__inner video {
    margin: 0 auto;
    aspect-ratio: 16/9
}

.praxis__sortout__inner {
    display: grid;
    align-items: start
}

@media screen and (min-width: 768px) {
    .praxis__sortout__inner {
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--gap-s)
    }
}

@media screen and (max-width: 767.98px) {
    .praxis__sortout__inner {
        row-gap: var(--gap-s)
    }
}

.praxis__sortout__inner .col {
    display: grid;
    row-gap: var(--gap-xs);
    text-align: center
}

.praxis__sortout__inner .col img {
    border-radius: 1rem
}

.praxis__sortout__inner .col h2 {
    font-size: 1.35rem;
    font-size: clamp(1.35rem, 1.282rem + .29vw, 1.5rem)
}

.praxis__clients {
    padding-block: var(--gap-l);
    display: grid;
    row-gap: var(--gap-m)
}

.praxis__clients__inner {
    display: grid;
    align-items: start
}

@media screen and (min-width: 768px) {
    .praxis__clients__inner {
        grid-template-columns: repeat(3, 1fr);
        column-gap: var(--gap-s);
        row-gap: var(--gap-m)
    }
}

@media screen and (max-width: 767.98px) {
    .praxis__clients__inner {
        row-gap: var(--gap-s)
    }
}

.praxis__clients__inner .col {
    display: grid;
    row-gap: var(--gap-xs)
}

.praxis__clients__inner .col .thum {
    display: grid;
    place-items: center;
    padding: var(--gap-s);
    aspect-ratio: 2;
    border: 1px solid #e5e5e5;
    border-radius: .5rem
}

.praxis__clients__inner .summary {
    text-align: center
}

.praxis__clients__inner .summary p {
    font-weight: bold;
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem)
}

.praxis__clients__inner .summary em {
    font-style: normal;
    font-size: 1.5rem;
    font-size: clamp(1.5rem, 1.273rem + .97vw, 2rem)
}

.praxis__clients__inner .summary em small {
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem)
}

.praxis__clients__inner .summary em span {
    font-size: 125%
}

.praxis__plan {
    display: grid;
    row-gap: var(--gap-s);
    padding-block: var(--gap-l);
    max-width: 992px;
    margin-inline: auto
}

.praxis__plan__heading {
    text-align: center
}

.praxis__plan__heading .balloon {
    z-index: 1;
    position: relative;
    display: inline-block;
    margin-block-end: 1rem;
    padding-block: .25rem;
    padding-inline: 1rem;
    text-align: center;
    color: #1e2124;
    font-size: .875rem;
    font-weight: bold;
    background-color: #fff;
    border: 2px solid #1e2124;
    border-radius: 5rem;
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem);
    padding-block: var(--gap-xs);
    padding-inline: var(--gap-s);
    border-width: 1px
}

.praxis__plan__heading .balloon::before,
.praxis__plan__heading .balloon::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 100%;
    content: ""
}

.praxis__plan__heading .balloon::before {
    border-style: solid;
    border-width: .875rem 10px 0 10px;
    border-color: #1e2124 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__plan__heading .balloon::after {
    border-style: solid;
    border-width: .5rem 5px 0 5px;
    border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__plan__heading .balloon::before {
    border-width: 10px 8px 0 8px
}

.praxis__plan__heading .balloon::after {
    border-width: 9px 7px 0 7px
}

@media screen and (min-width: 768px) {
    .praxis__plan__inner {
        display: flex;
        justify-content: center;
        column-gap: var(--gap-s)
    }
}

@media screen and (max-width: 767.98px) {
    .praxis__plan__inner {
        display: grid;
        justify-items: center;
        row-gap: var(--gap-s)
    }
}

.praxis__plan__inner .cost {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center
}

@media screen and (min-width: 768px) {
    .praxis__plan__inner .cost {
        column-gap: var(--gap-s)
    }
}

@media screen and (min-width: 768px) {
    .praxis__plan__inner .month {
        display: grid;
        grid-template-columns: 40px 1fr;
        align-items: center;
        column-gap: var(--gap-s)
    }
}

@media screen and (max-width: 767.98px) {
    .praxis__plan__inner .month {
        white-space: nowrap
    }
}

.praxis__plan__inner .cost .col,
.praxis__plan__inner .month .col {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .75rem
}

.praxis__plan__inner .cost .col .badge,
.praxis__plan__inner .month .col .badge {
    display: grid;
    place-items: center;
    width: 3.5rem;
    aspect-ratio: 1;
    background-color: #1e2124;
    border-radius: 50%
}

.praxis__plan__inner .cost .col .badge strong,
.praxis__plan__inner .month .col .badge strong {
    color: #fff;
    font-size: .875rem;
    line-height: 1.2
}

.praxis__plan__inner .cost .col .box,
.praxis__plan__inner .month .col .box {
    display: block;
    padding: .5rem 1rem;
    background-color: #1e2124
}

.praxis__plan__inner .cost .col .box strong,
.praxis__plan__inner .month .col .box strong {
    color: #fff
}

.praxis__plan__inner .cost .col .yen strong,
.praxis__plan__inner .month .col .yen strong {
    font-size: 4.5rem;
    line-height: 3.5rem;
    font-family: "Space Grotesk", sans-serif
}

.praxis__plan__inner .cost .col .yen small,
.praxis__plan__inner .month .col .yen small {
    font-size: .875rem;
    font-size: clamp(.875rem, .818rem + .24vw, 1rem)
}

.praxis__plan__inner .cost hr,
.praxis__plan__inner .month hr {
    transform: rotate(115deg);
    transform-origin: 50% 0%;
    width: 120%;
    border: 0;
    border-top: 1px solid #1e2124
}

.praxis__faq {
    display: grid;
    row-gap: var(--gap-s);
    padding-block: var(--gap-l)
}

.praxis__faq__inner {
    padding-block-end: var(--gap-s)
}

.praxis__faq__inner input {
    display: none
}

.praxis__faq__inner label {
    display: grid;
    grid-template-columns: 2rem 1fr 1rem;
    column-gap: .5rem;
    align-items: center;
    padding: .75rem;
    background-color: #1e2124;
    cursor: pointer
}

.praxis__faq__inner label span {
    color: #fff;
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem);
    font-weight: bold
}

.praxis__faq__inner label::before {
    content: "Q";
    width: 2rem;
    height: 2rem;
    color: #1e2124;
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem);
    font-weight: bold;
    line-height: 1.8rem;
    text-align: center;
    background-color: #fff;
    border-radius: 50%
}

.praxis__faq__inner label::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: #fff 2px solid;
    border-right: #fff 2px solid;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    margin-top: -0.5rem
}

.praxis__faq__inner input[type=checkbox]:checked+label:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: #fff 2px solid;
    border-right: #fff 2px solid;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: 0rem
}

.praxis__faq__inner .answer {
    margin-block-end: var(--gap-s);
    padding: 0
}

.praxis__faq__inner .answer p {
    height: 0;
    overflow-y: hidden;
    opacity: 0;
    transition: padding-bottom .5s, padding-top .5s;
    -webkit-transition: padding-bottom .5s, padding-top .5s
}

.praxis__faq__inner #faq-001:checked~#links01 p,
.praxis__faq__inner #faq-002:checked~#links02 p {
    display: grid;
    grid-template-columns: 2rem 1fr;
    column-gap: 1rem;
    opacity: 1;
    height: auto;
    padding-block: var(--gap-s);
    padding-inline-start: .75rem
}

.praxis__faq__inner #faq-001:checked~#links01 p::before,
.praxis__faq__inner #faq-002:checked~#links02 p::before {
    content: "A";
    width: 2rem;
    height: 2rem;
    color: #fff;
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem);
    font-weight: bold;
    line-height: 1.8rem;
    text-align: center;
    background-color: #1e2124;
    border-radius: 50%
}

.praxis__faq__inner #faq-001:checked~#links01 p:last-child,
.praxis__faq__inner #faq-002:checked~#links02 p:last-child {
    margin-bottom: 20px
}

@media screen and (min-width: 1199.98px) {
    .praxis__faq .praxis__trial__bg {
        padding-inline: 1rem
    }
}

.praxis__trial {
    display: grid
}

.praxis__trial__bg {
    width: 100%;
    background: url("../images/praxis/praxis-trial-bg.webp") center center/cover no-repeat
}

@media screen and (min-width: 992px) {
    .praxis__trial {
        padding-block: var(--gap-m);
        grid-template-columns: clamp(14.5rem, -23.433rem + 61.24vw, 22.5rem) 1fr;
        column-gap: var(--gap-s);
        align-items: center
    }

    .praxis__trial__img {
        grid-area: 1/1/3/2
    }

    .praxis__trial__heading {
        grid-area: 1/2/2/3
    }

    .praxis__trial__inner {
        grid-area: 2/2/3/3
    }
}

@media screen and (max-width: 991.98px) {
    .praxis__trial {
        row-gap: var(--gap-s);
        max-width: 576px;
        margin-inline: auto;
        padding-block: var(--gap-s)
    }

    .praxis__trial__img {
        order: 2
    }

    .praxis__trial__heading {
        order: 1;
        text-align: center
    }

    .praxis__trial__inner {
        order: 3
    }
}

.praxis__trial__heading {
    color: #fff
}

.praxis__trial__heading h2 {
    font-size: clamp(1.5rem, 1.158rem + 1.46vw, 2.25rem)
}

.praxis__trial__inner {
    display: grid
}

@media screen and (min-width: 992px) {
    .praxis__trial__inner {
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--gap-s);
        align-items: center
    }
}

@media screen and (max-width: 991.98px) {
    .praxis__trial__inner {
        row-gap: var(--gap-s)
    }
}

.praxis__trial__inner .cost {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    margin-block: 1rem;
    padding-block: 1rem;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff
}

.praxis__trial__inner .cost .col {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .75rem
}

.praxis__trial__inner .cost .col .badge {
    display: grid;
    place-items: center;
    width: 3.5rem;
    aspect-ratio: 1;
    background-color: #fff;
    border-radius: 50%
}

.praxis__trial__inner .cost .col .badge strong {
    color: #1e2124;
    font-size: .875rem;
    line-height: 1.2
}

.praxis__trial__inner .cost .col .yen strong {
    color: #fff;
    font-size: 4.5rem;
    line-height: 3.5rem;
    font-family: "Space Grotesk", sans-serif
}

.praxis__trial__inner .cost .col .yen small {
    color: #fff;
    font-size: .875rem;
    font-size: clamp(.875rem, .818rem + .24vw, 1rem)
}

.praxis__trial__inner .cost hr {
    transform: rotate(115deg);
    transform-origin: 50% 0%;
    width: 120%;
    border: 0;
    border-top: 1px solid #fff
}

.praxis__trial__inner .balloon {
    z-index: 1;
    position: relative;
    display: inline-block;
    margin-block-end: 1rem;
    padding-block: .25rem;
    padding-inline: 1rem;
    text-align: center;
    color: #fff;
    font-size: .875rem;
    font-weight: bold;
    background-color: #1e2124;
    border: 2px solid #fff;
    border-radius: 5rem
}

.praxis__trial__inner .balloon::before,
.praxis__trial__inner .balloon::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 100%;
    content: ""
}

.praxis__trial__inner .balloon::before {
    border-style: solid;
    border-width: .875rem 10px 0 10px;
    border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__trial__inner .balloon::after {
    border-style: solid;
    border-width: .5rem 5px 0 5px;
    border-color: #1e2124 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__fixed {
    z-index: 100;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: url(../images/praxis/praxis-trial-bg.webp) center center/cover no-repeat
}

.praxis__fixed__inner {
    display: flex;
    justify-content: center;
    column-gap: 1rem;
    align-items: center;
    padding-block-end: .5rem;
    padding-inline: 1rem
}

@media screen and (min-width: 768px) {
    .praxis__fixed__inner {
        padding-block-start: .5rem
    }
}

@media screen and (max-width: 767.98px) {
    .praxis__fixed__inner {
        margin-top: -0.75rem
    }
}

.praxis__fixed__inner img {
    height: calc(90px - 1rem)
}

.praxis__fixed__inner .balloon {
    z-index: 1;
    position: relative;
    display: inline-block;
    margin-block-end: 1rem;
    padding-block: .25rem;
    padding-inline: 1rem;
    text-align: center;
    color: #fff;
    font-size: .875rem;
    font-weight: bold;
    background-color: #1e2124;
    border: 2px solid #fff;
    border-radius: 5rem
}

.praxis__fixed__inner .balloon::before,
.praxis__fixed__inner .balloon::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 100%;
    content: ""
}

.praxis__fixed__inner .balloon::before {
    border-style: solid;
    border-width: .875rem 10px 0 10px;
    border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__fixed__inner .balloon::after {
    border-style: solid;
    border-width: .5rem 5px 0 5px;
    border-color: #1e2124 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

.praxis__fixed__inner .c-btn {
    padding-top: 12px;
    padding-bottom: 12px;
    width: min(80vw, 420px)
}

.praxis__fixed__inner .heading {
    display: flex;
    align-items: center;
    column-gap: 1rem
}

.praxis__fixed__inner .heading .col {
    color: #fff
}

.praxis__fixed__inner .heading .col h2 {
    font-size: 1rem;
    font-size: clamp(1rem, .932rem + .29vw, 1.15rem)
}