@charset "utf-8";

:root {
    --main-color: #C30D23;
    --txt-default: #333;
    --border-default : #888888;
    --border-pale: #DBDBDB;
    --comp-color: #489B69;
    --bg-pale: #F8F8F8;
    --font-default: "Noto Sans JP";
}
/* @media (max-width: 768px) {} */
body {
    background-color: #fff;
    font-family: var(--font-default);
    color: var(--txt-default);
    font-size: 1.6rem;
    font-weight: bold;
    @media (max-width: 768px) {
        font-size: 1.4rem;
    }
}
div,section,ul,ol,article,header,footer {
    box-sizing: border-box;
}
h1,h2,h3,h3,h4,p,ul,ol,li {
    margin: 0;
    padding: 0;
}
img {
    max-width: 100%;
}
a {
    text-decoration: none;
    &:hover {
        text-decoration: none;
    }
}
.pre-regi-header {
    padding: 3.6rem 2rem;
    border-top: .5rem solid var(--main-color);
    position: relative;
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    @media (max-width: 768px) {
        padding: 1.6rem 1.2rem;
    }
    & h1 {
        font-size: 2.4rem;
        color: var(--main-color);
        text-align: center;
        @media (max-width: 768px) {
            font-size: 1.6rem;
        }
    }
}
.pre-regi-kv {
    padding-top: 10rem;
    padding-bottom: 10rem;
    background-image: url(../img/pre-regi-kv.jpg);
    background-position: right;
    background-size: cover;
    @media (max-width: 768px) {
        padding-top: 4rem;
        padding-bottom: 4rem;
        background-position: 77%;
    }
    & h2 {
        font-size: 3.6rem;
        text-align: center;
        @media (max-width: 768px) {
            font-size: 2.4rem;
        }
    }
    & p {
        text-align: center;
        font-weight: bold;
        margin-top: 1.6rem;
        @media (max-width: 768px) {
            margin-top: 0;
        }
    }
}
.pre-container, .mp-container {
    padding-left: 2rem;
    padding-right: 2rem;
}
.pre-inner-lg, .mp-inner-lg {
    width: 108rem;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: 768px) {
        width: 100%;
    }
}
.pre-inner-md, .mp-inner-md {
    width: 100rem;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: 768px) {
        width: 100%;
    }
}
.pre-inner-thin, .mp-inner-thin {
    width: 80rem;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: 768px) {
        width: 100%;
    }
}
.pre-main-conte {
    margin-top: 12rem;
    @media (max-width: 768px) {
        margin-top: 4rem;
    }
    .mp-header-btn {
        background-color: var(--main-color);
        width: 16rem;
        border-radius: .6rem;
        padding: 1.2rem 1.4rem;
        display: flex;
        justify-content: center;
        margin: 0 auto 3rem auto;
    }
    .langage-change {
        background-color: #fff;
        border-radius: .4rem;
        color: var(--main-color);
        padding: .6rem 1rem;
        display: flex;
        justify-content: center;
        gap: 2.4rem;
        width: 100%;
        & button {
            display: block;
            font-size: 1rem;
            position: relative;
            & + button {
                &::before {
                    content: "/";
                    position: absolute;
                    left: -1.4rem;
                }
            }
        }
        & a {
            display: block;
            font-size: 1rem;
            position: relative;
            color: var(--main-color);
            & + a {
                &::before {
                    content: "/";
                    position: absolute;
                    left: -1.4rem;
                }
            }
        }
    }
    .official-site {
        & a {
            font-size: 1rem;
            color: #fff;
        }
    }
}
.mp-main-conte {
    margin-top: 3rem;
    &.mp-top {
        margin-top: 0;
    }
    @media (max-width: 768px) {
        margin-top: 0;
    }
}
.mp-sec-inner {
    padding-top: 6rem;
    padding-bottom: 6rem;
    @media (max-width: 768px) {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}
.pre-regi-nav {
    & ul {
        display: flex;
        gap: 5rem;
        @media (max-width: 768px) {
            gap: 1.6rem;
            justify-content: center;
        }
        & li {
            width: 16rem;
            text-align: center;
            border: .2rem solid var(--border-default);
            border-radius: .6rem;
            padding-top: 2rem;
            padding-bottom: 2rem;
            line-height: 1;
            font-weight: bold;
            background-color: #fff;
            position: relative;
            z-index: 2;
            font-size: 1.4rem;
            @media (max-width: 768px) {
                display: none;
            }
            &::before {
                position: absolute;
                content: "";
                background-color: var(--border-default);
                width: 5rem;
                height: .3rem;
                left: -5.2rem;
                top: 50%;
                transform: translateY(-50%);
                z-index: 1;
            }
            &:first-child {
                &::before {
                    content: none;
                }
            }
            &.next {
                @media (max-width: 768px) {
                    display: block;
                }
                &::before {
                    background-color: var(--main-color);
                }
            }
            &.current {
                background-color: var(--main-color);
                border: .2rem solid var(--main-color);
                color: #fff;
                &::before {
                    background-color: var(--comp-color);
                }
                @media (max-width: 768px) {
                    display: block;
                    &::before {
                        content: none;
                    }
                }
            }
            &.comp {
                background-color: var(--comp-color);
                border: .2rem solid var(--comp-color);
                color: #fff;
            }
        }
    }
}
.pre-regi-note {
    width: 60rem;
    margin: 8rem auto 0 auto;
    @media (max-width: 768px) {
        width: 100%;
        margin-top: 4rem;
    }
}
.pre-privacy-wrapper {
    margin-top: 6rem;
    @media (max-width: 768px) {
        margin-top: 4rem;
    }
}
.pre-main-ttl {
    text-align: center;
    font-size: 2.4rem;
}
.pre-main-ttl-sub {
    text-align: center;
    margin-top: 3.6rem;
    @media (max-width: 768px) {
        text-align: left;
    }
}
.pre-privacy {
    margin-top: 4rem;
    padding: 3.6rem 7.2rem;
    border: .1rem solid var(--border-default);
    border-radius: .6rem;
    background-color: var(--bg-pale);
    height: 40rem;
    overflow-y: scroll;
    @media (max-width: 768px) {
        padding: 2rem;
    }
    & h2 {
        font-size: 2.4rem;
        @media (max-width: 768px) {
            font-size: 1.8rem;
        }
    }
    & h3 {
        font-size: 1.8rem;
        margin-top: 3.2rem;
        @media (max-width: 768px) {
            font-size: 1.4rem;
            margin-top: 2.4rem;
        }
    }
    & p {
        margin-top: 2.4rem;
        @media (max-width: 768px) {
            margin-top: 1.4rem;
        }
    }
}
.confirm-btn-block {
    margin-top: 6rem;
    display: flex;
    gap: 3rem;
    justify-content: center;
    & button {
        margin: 0;
    }
}
.pre-btn-def {
    background-color: var(--main-color);
    color: #fff;
    display: block;
    border-radius: .6rem;
    width: 20rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    &:hover {
        opacity: .8;
        color: #fff;
    }
    &.pre-btn-def-gray {
        background-color: #888888;
    }
    &.pre-regi-confirm {
        /* margin-top: 6rem; */
        @media (max-width: 768px) {
            /* margin-top: 4rem; */
        }
    }
}
.privacy-submit {
    margin-top: 6rem;
}
.pre-footer {
    margin-top: 12rem;
    .pre-footer-nav {
        background-color: var(--bg-pale);
        & ul {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            padding-top: 2.4rem;
            padding-bottom: 2.4rem;
            & li {
                position: relative;
                & + li {
                    &::before {
                        content: "/";
                        position: absolute;
                        left: -1.2rem;
                        top: .0;
                    }
                }
                & a {
                    font-size: 1.2rem;
                    text-decoration: none;
                    color: var(--txt-default);
                }
            }
        }
    }
    .pre-copy-right {
        text-align: center;
        background-color: var(--main-color);
        color: #fff;
        text-align: center;
        padding-top: 2.4rem;
        padding-bottom: 2.4rem;
        font-size: 1.4rem;
    }
}
.pre-regi-form {
    max-width: 100%;
    margin-top: 6rem;
    margin-bottom: 0;
    &.mp-form {
        margin-top: 0;
    }
    @media (max-width: 768px) {
        margin-top: 2.4rem;
    }
    table {
        border-collapse: collapse;
        width: 100%;
        & tr {
            &:not(:first-child) {
                & th {
                    border-top: none;
                }
            }
        }
        & th {
            border: .1rem solid var(--border-pale);
            padding: 2rem 3rem;
            width: 24rem;
            background-color: var(--bg-pale);
            font-size: 1.4rem;
            @media (max-width: 768px) {
                display: block;
                width: 100%;
                padding: 1.4rem 2rem;
            }
        }
        & td {
            border: .1rem solid var(--border-pale);
            padding: 2rem 3rem;
            background-color: #fff;
            @media (max-width: 768px) {
                display: block;
                width: 100%;
                border-top: none;
                padding: 1.4rem 2rem;
            }
            & input {
                width: 100%;
                &::placeholder {
                    color: #C2C2C2;
                    font-size: 1.2rem;
                }
            }
        }
    }
    .form-head {
        display: flex;
        justify-content: space-between;
    }
    &.mp-form-exam {
        margin-top: 0;
        & table {
            & th {
                vertical-align: top;
                .form-head__ttl {
                    text-align: left;
                }
                .form-head-enche {
                    justify-content: flex-start;
                    align-items: start;
                    display: flex;
                    flex-direction: column;
                    .form-label {
                        margin-bottom: 2rem;
                    }
                }
            }
            & td {
                width: 60%;
                @media (max-width: 768px) {
                    width: 100%;
                }
            }
        }
    }
}

.select-wrapper {
    position: relative;
    &::after {
        content: none;
    }
    &::before {
        content: "";
        position: absolute;
        right: 2rem;
        top: 2rem;
        width: 1rem;
        height: 1rem;
        border-style: solid;
        border-color: var(--txt-default);
        border-top: 1rem;
        border-right: 1rem;
        transform: rotate(-45deg);
        transition: .3s;
    }
    & select {
        border: .1rem solid #ccc;
        width: 100%;
        padding: 1rem 2rem;
        border-radius: .6rem;
    }
}

.check-box-list {
    & li {
        display: flex;
        gap: 1.6rem;
        & + li {
            @media (max-width: 768px) {
                margin-top: 1.4rem;
            }
        }
        & input[type="checkbox"] {
            width: 1.6rem;
        }
    }
}

.pre-regi-companioms {
    background-color: var(--bg-pale);
    border: .1rem solid var(--border-default);
    padding: 2.4rem 3.6rem;
    border-radius: .6rem;
    display: flex;
    align-items: center;
    width: 60rem;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: 768px) {
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding: 2rem;
    }
}
.pre-regi-companioms-input {
    line-height: 1;
    margin-left: auto;
    @media (max-width: 768px) {
        margin-left: 0;
    }
}
.companioms-number {
    background-color: #fff;
    padding: 1rem;
    border-radius: .4rem;
    font-size: 1.2rem;
    border: .1rem solid var(--border-default);
    width: 6rem;
    text-align: center;
    margin-right: 1rem;
    @media (max-width: 768px) {
        margin-left: 0;
    }
}
.companioms-number-btn {
    width: 12rem;
    background-color: var(--main-color);
    color: #fff;
    border-radius: 6rem;
    padding: 1rem 2rem;
    text-align: center;
    display: block;
    font-size: 1.2rem;
    margin-left: 3rem;
    @media (max-width: 768px) {
        margin-left: 0;
    }
    &:hover {
        opacity: .7;
    }
}
.companioms-skip {
    display: block;
    text-decoration: underline;
    text-align: center;
    color: var(--txt-default);
    margin-top: 6rem;
}
.companions-input-block {
    border-radius: .6rem;
    border: .1rem solid var(--border-pale);
    padding: 1.6rem 4rem 3rem 4rem;
    margin-top: 3rem;
    position: relative;
    height: 8.8rem;
    overflow: hidden;
    transition: .3s;
    @media (max-width: 768px) {
        height: 8rem;
    }
    &.open {
        height: auto;
        transition: .3s;
        &::before {
            transform: rotate(-45deg);
            top: 3rem;
            transition: .3s;
            @media (max-width: 768px) {
                right: 2rem;
                top: 2.4rem!important;
            }
        }
    }
    @media (max-width: 768px) {
        padding: 1.2rem 2rem 3rem 2rem;
        &::before {
            right: 2rem!important;
            top: 3.6rem!important;
        }
        &.open {
            &::before {
                top: 2.4rem!important;
            }
        }
    }
    &:first-child {
        margin-top: 6rem;
    }
    &::before {
        content: "";
        position: absolute;
        right: 4rem;
        top: 4rem;
        width: 1.4rem;
        height: 1.4rem;
        border-style: solid;
        border-color: var(--txt-default);
        border-top: 1rem;
        border-right: 1rem;
        transform: rotate(135deg);
        transition: .3s;
        @media (max-width: 768px) {
            right: 2rem;
        }
    }
    & h2 {
        font-size: 1.8rem;
        text-align: left;
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
        cursor: pointer;
        @media (max-width: 768px) {
            font-size: 1.6rem;
        }
    }
}
.pre-regi-companioms-form {
    width: 100%;
    margin-top: 1.6rem;
}
.companions-delete {
    width: 20rem;
    padding: 1.6rem 1rem;
    text-align: center;
    display: block;
    color: #fff;
    background-color: #A2A2A2;
    border-radius: 6rem;
    margin-left: auto;
    margin-top: 3rem;
    &:hover {
        opacity: .7;
    }
}
.copy-add {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    margin-top: 6rem;
    @media (max-width: 768px) {
        flex-direction: column;
    }
}
.companion-copy-add-btn {
    display: block;
    text-align: center;
    padding: 1.6rem 4rem;
    background-color: var(--bg-pale);
    border: .1rem solid var(--border-pale);
    border-radius: 6rem;
    @media (max-width: 768px) {
        width: 100%;
    }
    &:hover {
        opacity: .7;
    }
}
.complete-wrapper {
    width: 60rem;
    margin-top: 6rem;
    margin-left: auto;
    margin-right: auto;
    @media (max-width: 768px) {
        width: 100%;
        margin-top: 4rem;
    }
    & h2 {
        & + * {
            margin-top: 4rem;
        }
    }
    & p {
        & + p {
            margin-top: 2rem;
        }
    }
}
.inline-link {
    color: var(--main-color);
    text-decoration: underline;
}
.bg-pale {
    background-color: var(--bg-pale);
}
.mp-header {
    padding: 2rem;
    border-bottom: .1rem solid var(--border-default);
    .mp-header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mp-header-nav {
        @media (max-width: 768px) {
            /* display: none; */
            position: fixed;
            top: 9.6rem;
            right: 0;
            background-color: #fff;
            width: 30rem;
            height: auto;
            z-index: 6;
            transform: translateX(100%);
            transition: .3s;
            border-radius: 0 0 0 1.6rem;
            overflow: hidden;
            &.open {
                transform: translateX(0);
                transition: .3s;
                box-shadow: .2rem .2rem 1.6rem rgba(0,0,0,.1);
            }
        }
        & ul {
            display: flex;
            gap: 2.4rem;
            @media (max-width: 768px) {
                flex-direction: column;
                background-color: var(--bg-pale);
                padding: 2rem;
                gap: 1.6rem;
            }
            & li {
                position: relative;
                & + li {
                    &::before {
                        content: "/";
                        position: absolute;
                        left: -1.6rem;
                    }
                    @media (max-width: 768px) {
                        &::before {
                            content: none;
                        }
                    }
                }
                & a {
                    color: var(--txt-default);
                    position: relative;
                    @media (max-width: 768px) {
                        background-color: #fff;
                        padding: 1.4rem;
                        border-radius: .6rem;
                        width: 100%;
                        display: block;
                    }
                    &:hover {
                        color: var(--border-default);
                        text-decoration: underline;
                    }
                }
                .current {
                    color: var(--main-color);
                    position: relative;
                    @media (max-width: 768px) {
                        padding-left: 2.4rem;
                        &::before {
                            top: -.3rem!important;
                            left: .5rem!important;
                            right: auto!important;
                        }
                    }
                    &::before {
                        content: "";
                        position: absolute;
                        width: .5rem;
                        height: .5rem;
                        background-color: var(--main-color);
                        left: 0;
                        right: 0;
                        bottom: -.5rem;
                        margin: auto;
                        border-radius: 6rem;
                    }
                }
            }
        }
    }
    .mp-header-btn {
        background-color: var(--main-color);
        width: 20rem;
        border-radius: .6rem;
        padding: 1.2rem 1.4rem;
        display: flex;
        gap: 1.6rem;
    }
    .langage-change {
        background-color: #fff;
        border-radius: .4rem;
        color: var(--main-color);
        padding: .6rem 1rem;
        display: flex;
        justify-content: space-between;
        /* gap: 1.2rem; */
        width: 10rem;
        & button {
            display: block;
            font-size: 1rem;
            position: relative;
            & + button {
                &::before {
                    content: "/";
                    position: absolute;
                    left: -.8rem;
                }
            }
        }
        & a {
            display: block;
            font-size: 1rem;
            position: relative;
            color: var(--main-color);
            & + a {
                &::before {
                    content: "/";
                    position: absolute;
                    left: -1rem;
                }
            }
        }
    }
    .official-site {
        & a {
            font-size: 1rem;
            color: #fff;
        }
    }
}
.humberg-menu {
    background-color: var(--main-color);
    border-radius: .6rem;
    color: #fff;
    padding: 3rem 1rem 1rem 1rem;
    position: relative;
    width: 6rem;
    & span {
        display: block;
        position: absolute;
        background-color: #fff;
        border-radius: 1rem;
        width: 100%;
        height: .5rem;
        transition: .3s;
        width: 3rem;
        left: 0;
        right: 0;
        margin: auto;
        &:first-child {
            top: 1rem;
        }
        &:nth-child(2) {
            top: 2.2rem;
        }
    }
    &.active {
        span {
            &:first-child {
                transform: rotate(45deg);
                transition: .3s;
                top: 1.6rem;
            }
            &:nth-child(2) {
                transform: rotate(-45deg);
                transition: .3s;
                top: 1.6rem;
            }
        }
    }
    & p {
        font-size: 1rem;
        line-height: 1;
        margin-top: .5rem;
        text-align: center;
    }
}
.mypage-kv {
    padding: 3rem 2rem;
    border-bottom: .1rem solid var(--border-default);
    .mypage-img {
        max-width: 108rem;
        margin: 0 auto;
    }
}
.mp-main-conte {
    line-height: 1.8;
    & p {
        font-weight: normal;
    }
}
.mp-ttl-lv1 {
    font-size: 3.2rem;
    font-weight: bold;
    @media (max-width: 768px) {
        font-size: 2.4rem;
    }
    .mp-ttl-lv1-en {
        font-size: 1.4rem;
        color: var(--main-color);
        margin-top: 1.2rem;
    }
    & span {
        display: block;
    }
    & + * {
        margin-top: 3rem;
    }
}
.mp-ttl-lv2 {
    font-size: 2.4rem;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        width: 4rem;
        height: .5rem;
        background-color: var(--main-color);
        left: 0;
        bottom: -2rem;
    }
    & + * {
        margin-top: 6rem;
    }
}
.mp-ttl-lv3 {
    font-size: 1.8rem;
    padding-left: 25px;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 3rem;
        background-color: var(--main-color);
        left: 0;
        top: 4px;
    }
    & + * {
        margin-top: 2.4rem;
    }
    &:not(:first-child) {
        margin-top: 3rem;
    }
}
.mp-ttl-lv4 {
    font-size: 1.8rem;
    color: var(--main-color);
    font-weight: bold!important;
    text-align: left;
}
.util-mt-30 {
    margin-top: 3rem;
}
.mp-sec-lv3 {
    margin-top: 6rem;
    @media (max-width: 768px) {
        margin-top: 4rem;
    }
}
.mp-list-default {
    & li {
        padding-left: 1.5rem;
        position: relative;
        color: #444;
        font-size: 1.4rem;
        font-weight: normal;
        &::before {
            content: "";
            position: absolute;
            width: .5rem;
            height: .5rem;
            border-radius: 3rem;
            background-color: #747474;
            left: 0;
            top: 1rem;
        }
    }
}
.flow-step {
    & ul {
        position: relative;
        &::before {
            content: "";
            position: absolute;
            width: .3rem;
            height: 91%;
            background-color: var(--main-color);
            left: .4rem;
            top: 1rem;
        }
        @media (max-width: 768px) {
            &::before {
                height: 86%;
            }
        }
        & li {
            display: flex;
            gap: 4rem;
            padding-left: 4rem;
            position: relative;
            & + li {
                margin-top: 4rem;
            }
            &:before {
                content: "";
                position: absolute;
                width: 1.2rem;
                height: 1.2rem;
                background-color: var(--main-color);
                border-radius: 3rem;
                left: 0;
                top: .9rem;
            }
            .step-numb {
                font-weight: bold;
            }
        }
    }
}
.flow-btn {
    background-color: var(--bg-pale);
    padding: 3rem 0;
    & ul {
        display: flex;
        @media (max-width: 768px) {
            flex-direction: column;
            align-items: center;
            gap: 3rem;
        }
        & li {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            & p {
                font-weight: bold;
                margin-bottom: 2rem;
            }
        }
    }
}
.btn-arrow {
    display: block;
    color: #fff;
    width: 20rem;
    text-align: center;
    padding: 1.6rem 1rem;
    position: relative;
    border-radius: .6rem;
    background-color: var(--main-color);
    &:hover {
        color: #fff;
        opacity: .7;
    }
    &::after {
        content: "";
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #ffffff;
        border-right: 0;
    }
}
.user-name-area {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    @media (max-width: 768px) {
        padding: 1.6rem 2rem;
    }
}
.mp-user-name {
    background-color: var(--main-color);
    color: #fff;
    padding: 1.6rem 3rem;
    border-radius: .6rem;
    text-align: center;
    display: inline-block;
    @media (max-width: 768px) {
        padding: 1rem 2.4rem;
        font-size: 1.4rem;
    }
}

.mp-contact-block {
    padding: 3rem;
    border: .1rem solid var(--border-default);
    border-radius: .6rem;
    margin-top: 3rem;
    @media (max-width: 768px) {
        padding: 2.4rem;
    }
    & + div {
        margin-top: 6rem;
    }
    .mp-ttl-main {
        text-align: left;
    }
    .mp-contact-block-ttl {
        font-size: 1.8rem;
    }
}
.mp-faq-block {
    border-radius: .6rem;
    overflow: hidden;
    border: .1rem solid var(--border-default);
    & + div {
        margin-top: 3rem;
    }
}
.faq-question {
    background-color: var(--bg-pale);
    border-radius: .6rem .6rem 0 0;
    padding: 2rem;
    position: relative;
    cursor: pointer;
    @media (max-width: 768px) {
        padding: 1.6rem 2.4rem 1.6rem 1.6rem;
    }
    &::after {
        content: "";
        position: absolute;
        right: 2.4rem;
        top: 2.8rem;
        width: 1rem;
        height: 1rem;
        border-style: solid;
        border-color: var(--main-color);
        border-top: 1rem;
        border-right: 1rem;
        transform: rotate(-45deg);
        transition: .3s;
    }
    @media (max-width: 768px) {
        &::after {
            right: 1.2rem;
            top: 2.2rem;
        }
    }
    &.active {
        &::after {
            transform: rotate(135deg);
        }
    }
    & p {
        font-weight: bold;
    }
}
.faq-answer {
    background-color: #fff;
    border-radius: 0 0 .6rem .6rem;
    /* border-top: .1rem solid var(--border-default); */
    /* border-left: .1rem solid var(--border-default);
    border-right: .1rem solid var(--border-default);
    border-bottom: .1rem solid var(--border-default); */
    padding: 0 2rem;
    height: 0;
    &.open {
        height: auto;
        padding: 2rem;
        border-top: .1rem solid var(--border-default);
    }
    & p {
        font-size: 1.4rem;
    }
}
.mp-qr-block {
    background-color: var(--bg-pale);
    border: .1rem solid var(--border-default);
    border-radius: .6rem;
    padding: 4rem;
    margin-top: 6rem;
    display: flex;
    gap: 6rem;
    @media (max-width: 768px) {
        padding: 2.4rem;
        gap: 3rem;
        flex-direction: column;
    }
    .qr-code-area {
        width: 34rem;
        @media (max-width: 768px) {
            width: 100%;
        }
    }
    .qr-code-area-header {
        background-color: #333;
        color: #fff;
        padding: 1.6rem 2.4rem;
        p {
            font-weight: bold;
        }
    }
    .qr-code-area-conte {
        background-color: #fff;
        padding: 2.4rem;
        img {
            max-width: 100%;
            width: 18rem;
            display: block;
            margin: 0 auto;
        }
        & p {
            font-weight: bold;
            margin-top: 3.6rem;
        }
    }
    .qr-code-area-name {
        padding: 2.4rem;
        background-color: #333;
        p {
            font-weight: bold;
            color: #fff;
        }
    }
}
.qr-code-area-wrapper {
    border-radius: .4rem;
    overflow: hidden;
    border: .1rem solid var(--border-default);
}
.mp-qr-btn {
    width: 36rem;
    background-color: var(--main-color);
    color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 2.4rem 1.6rem;
    border-radius: .6rem;
    display: block;
    @media (max-width: 768px) {
        width: 100%;
        max-width: 32rem;
        margin-left: auto;
        margin-right: auto;
    }
    &:hover {
        color: #fff;
        opacity: .7;
    }
}