*,
:after,
:before {
    box-sizing: border-box
}

:after,
:before {
    text-decoration: inherit;
    vertical-align: inherit
}

html {
    cursor: default;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    word-break: break-word
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

dl dl,
dl ol,
dl ul,
ol dl,
ol ol,
ol ul,
ul dl,
ul ol,
ul ul {
    margin: 0
}

hr {
    color: inherit;
    height: 0;
    overflow: visible
}

main {
    display: block
}

nav ol,
nav ul {
    list-style: none;
    padding: 0
}

nav li:before {
    content: "\200B"
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
    overflow: auto;
    -ms-overflow-style: scrollbar
}

a {
    background-color: transparent
}

abbr[title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

iframe,
img {
    border-style: none
}

svg:not([fill]) {
    fill: currentColor
}

svg:not(:root) {
    overflow: hidden
}

table {
    border-collapse: collapse;
    border-color: inherit;
    text-indent: 0
}

button,
input,
select {
    margin: 0
}

button {
    overflow: visible;
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

fieldset {
    border: 1px solid #a0a0a0;
    padding: .35em .75em .625em
}

input {
    overflow: visible
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

select {
    text-transform: none
}

textarea {
    margin: 0;
    overflow: auto;
    resize: vertical;
    resize: block
}

[type=checkbox],
[type=radio] {
    padding: 0
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

:-moz-focusring {
    outline: 1px dotted ButtonText
}

:-moz-ui-invalid {
    box-shadow: none
}

details,
dialog {
    display: block
}

dialog {
    background-color: #fff;
    border: solid;
    color: #000;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
    left: 0;
    margin: auto;
    padding: 1em;
    position: absolute;
    right: 0;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content
}

dialog:not([open]) {
    display: none
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template {
    display: none
}

[tabindex],
a,
area,
button,
input,
label,
select,
summary,
textarea {
    -ms-touch-action: manipulation
}

[hidden] {
    display: none
}

[aria-busy=true] {
    cursor: progress
}

[aria-controls] {
    cursor: pointer
}

[aria-disabled=true],
[disabled] {
    cursor: not-allowed
}

[aria-hidden=false][hidden] {
    display: initial
}

[aria-hidden=false][hidden]:not(:focus) {
    clip: rect(0, 0, 0, 0);
    position: absolute
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block
}

[hidden] {
    display: none
}

body {
    line-height: 1
}

menu,
ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

@font-face {
    font-family: swiper-icons;
    src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1
}

.swiper-container-vertical>.swiper-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.swiper-container-multirow>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-container-multirow-column>.swiper-wrapper {
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-container-pointer-events {
    touch-action: pan-y
}

.swiper-container-pointer-events.swiper-container-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
    height: auto
}

.swiper-container-autoheight .swiper-wrapper {
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-transition-property: height, -webkit-transform;
    transition-property: height, -webkit-transform;
    transition-property: transform, height;
    transition-property: transform, height, -webkit-transform
}

.swiper-container-3d {
    -webkit-perspective: 1200px;
    perspective: 1200px
}

.swiper-container-3d .swiper-cube-shadow,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-container-3d .swiper-slide-shadow-left {
    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-right {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-top {
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(transparent));
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-container-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-container-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory
}

.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper {
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory
}

a {
    text-decoration: none;
    color: inherit
}

button {
    background: none;
    border: none;
    padding: 0;
    outline: none
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom
}

hr {
    margin: 0;
    border: none
}

body.logged-in {
    margin-top: 32px
}

@media(max-width:767px) {
    body.logged-in {
        margin-top: 0
    }
}

body.logged-in .header,
body.logged-in .theme-button {
    margin-top: 32px
}

@media(max-width:767px) {
    body.logged-in .header,
    body.logged-in .theme-button {
        margin-top: 46px
    }
}

body.logged-in .breadcrumbs {
    top: 18px
}

@media(max-width:767px) {
    body.logged-in .breadcrumbs {
        top: 46px
    }
}

.guide__body,
.page-static__body {
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px
}

.guide__body>*,
.page-static__body>* {
    margin-top: 40px
}

.guide__body p.is-style-marker-purple em,
.page-static__body p.is-style-marker-purple em {
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #d9d5ff), color-stop(100%, #d9d5ff), color-stop(100%, transparent), to(transparent));
    background-image: linear-gradient(transparent, transparent 50%, #d9d5ff 0, #d9d5ff 100%, transparent 0, transparent 0)
}

.guide__body p.is-style-marker-red em,
.page-static__body p.is-style-marker-red em {
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #ffcdd1), color-stop(100%, #ffcdd1), color-stop(100%, transparent), to(transparent));
    background-image: linear-gradient(transparent, transparent 50%, #ffcdd1 0, #ffcdd1 100%, transparent 0, transparent 0)
}

.guide__body p.is-style-marker-yellow em,
.page-static__body p.is-style-marker-yellow em {
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), color-stop(50%, #fff8c3), color-stop(100%, #fff8c3), color-stop(100%, transparent), to(transparent));
    background-image: linear-gradient(transparent, transparent 50%, #fff8c3 0, #fff8c3 100%, transparent 0, transparent 0)
}

.guide__body p.is-style-text-red em,
.page-static__body p.is-style-text-red em {
    color: red
}

.guide__body p.is-style-question,
.page-static__body p.is-style-question {
    position: relative;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    color: #6c5ded;
    padding-left: 50px
}

.guide__body p.is-style-question:before,
.page-static__body p.is-style-question:before {
    position: absolute;
    top: 15px;
    left: 0;
    content: " ";
    display: inline-block;
    width: 40px;
    height: 1px;
    background-color: #6c5ded
}

.guide__body a:not(.wp-block-button__link,
.toc a),
.page-static__body a:not(.wp-block-button__link,
.toc a) {
    color: #33b6dd
}

.guide__body strong,
.page-static__body strong {
    font-weight: 700
}

.guide__body .wp-block-buttons,
.page-static__body .wp-block-buttons {
    text-align: center
}

.guide__body .wp-block-button,
.page-static__body .wp-block-button {
    position: relative;
    display: inline-block;
    text-align: center
}

.guide__body .wp-block-button:before,
.page-static__body .wp-block-button:before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 36px;
    background-color: #fff;
    background-size: 200% 100%;
    background-position: 0 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
    opacity: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#4c88ed), color-stop(50%, #f790e0), to(#4c88ed));
    background-image: linear-gradient(90deg, #4c88ed, #f790e0 50%, #4c88ed)
}

.guide__body .wp-block-button:hover,
.page-static__body .wp-block-button:hover {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96)
}

.guide__body .wp-block-button:hover:before,
.page-static__body .wp-block-button:hover:before {
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
    opacity: 1
}

.guide__body .wp-block-button__link,
.page-static__body .wp-block-button__link {
    position: relative;
    display: inline-block;
    height: 100%;
    border-radius: 400px;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .3);
    -webkit-transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96), color .3s linear;
    transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96), color .3s linear;
    padding: 13px 40px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 19px;
    text-align: center;
    color: #222
}

.guide__body .wp-block-button__link:after,
.guide__body .wp-block-button__link:before,
.page-static__body .wp-block-button__link:after,
.page-static__body .wp-block-button__link:before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    content: " ";
    display: block;
    width: 8px;
    height: 10px;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

.guide__body .wp-block-button__link:before,
.page-static__body .wp-block-button__link:before {
    background-image: url(../images/common/icon-arrow-black.svg)
}

.guide__body .wp-block-button__link:after,
.page-static__body .wp-block-button__link:after {
    opacity: 0;
    background-image: url(../images/common/icon-arrow-white.svg);
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

@media(max-width:767px) {
    .guide__body .wp-block-button__link,
    .page-static__body .wp-block-button__link {
        border-radius: 9.6vw;
        box-shadow: 0 .8vw 8vw hsla(0, 0%, 47.5%, .3)
    }
}

.guide__body .wp-block-button__link:hover,
.page-static__body .wp-block-button__link:hover {
    color: #fff;
    box-shadow: 0 0 0 hsla(0, 0%, 47.5%, .3)
}

.guide__body .wp-block-button__link:hover:after,
.page-static__body .wp-block-button__link:hover:after {
    opacity: 1
}

.guide__body>h2,
.page-static__body>h2 {
    display: block;
    position: relative;
    padding: 20px 30px;
    border-radius: 10px;
    background: rgba(108, 93, 237, .1);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #222;
    margin-top: 60px
}

@media(max-width:767px) {
    .guide__body>h2,
    .page-static__body>h2 {
        padding: 3.7333333333vw 5.3333333333vw;
        border-radius: 2.6666666667vw;
        font-size: 5.6vw;
        line-height: 8.96vw;
        margin-top: 40px
    }
}

.guide__body>h2:before,
.page-static__body>h2:before {
    content: "";
    display: block;
    height: 100px;
    margin-top: -100px;
    pointer-events: none
}

@media(max-width:767px) {
    .guide__body>h2:before,
    .page-static__body>h2:before {
        height: 26.6666666667vw;
        margin-top: -26.6666666667vw
    }
}

.guide__body>h3,
.page-static__body>h3 {
    display: block;
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid #6c5ded;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 37.8px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .guide__body>h3,
    .page-static__body>h3 {
        padding-bottom: 2.6666666667vw;
        font-size: 4.8vw;
        line-height: 8vw;
        margin-top: 30px
    }
}

.guide__body>h3:before,
.page-static__body>h3:before {
    pointer-events: none;
    content: "";
    display: block;
    height: 100px;
    margin-top: -100px
}

@media(max-width:767px) {
    .guide__body>h3:before,
    .page-static__body>h3:before {
        height: 26.6666666667vw;
        margin-top: -26.6666666667vw
    }
}

.guide__body>h4,
.page-static__body>h4 {
    display: block;
    padding-left: 12px;
    position: relative;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .guide__body>h4,
    .page-static__body>h4 {
        padding-left: 3.2vw;
        font-size: 4.5333333333vw;
        line-height: 8vw;
        margin-top: 30px
    }
}

.guide__body>h4:before,
.page-static__body>h4:before {
    position: absolute;
    pointer-events: none;
    content: " ";
    display: block;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    height: calc(100% - 13px);
    background: #6c5ded
}

@media(max-width:767px) {
    .guide__body>h4:before,
    .page-static__body>h4:before {
        height: calc(100% - 3.46667vw)
    }
}

.guide__body>h5,
.page-static__body>h5 {
    padding-bottom: 5px;
    border-bottom: 1px solid #6c5ded;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

.guide__body>ul>li,
.page-static__body>ul>li {
    position: relative;
    padding-left: 30px
}

.guide__body>ul>li:before,
.page-static__body>ul>li:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    content: "\25CF";
    display: inline-block
}

.guide__body>ol>li,
.page-static__body>ol>li {
    position: relative;
    padding-left: 36px
}

.guide__body>ol>li:before,
.page-static__body>ol>li:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 26px;
    font-family: Montserrat, sans-serif
}

.guide__body>ol>li:first-child:before,
.page-static__body>ol>li:first-child:before {
    content: "1."
}

.guide__body>ol>li:nth-child(2):before,
.page-static__body>ol>li:nth-child(2):before {
    content: "2."
}

.guide__body>ol>li:nth-child(3):before,
.page-static__body>ol>li:nth-child(3):before {
    content: "3."
}

.guide__body>ol>li:nth-child(4):before,
.page-static__body>ol>li:nth-child(4):before {
    content: "4."
}

.guide__body>ol>li:nth-child(5):before,
.page-static__body>ol>li:nth-child(5):before {
    content: "5."
}

.guide__body>ol>li:nth-child(6):before,
.page-static__body>ol>li:nth-child(6):before {
    content: "6."
}

.guide__body>ol>li:nth-child(7):before,
.page-static__body>ol>li:nth-child(7):before {
    content: "7."
}

.guide__body>ol>li:nth-child(8):before,
.page-static__body>ol>li:nth-child(8):before {
    content: "8."
}

.guide__body>ol>li:nth-child(9):before,
.page-static__body>ol>li:nth-child(9):before {
    content: "9."
}

.guide__body>ol>li:nth-child(10):before,
.page-static__body>ol>li:nth-child(10):before {
    content: "10."
}

.guide__body>ol>li:nth-child(11):before,
.page-static__body>ol>li:nth-child(11):before {
    content: "11."
}

.guide__body>ol>li:nth-child(12):before,
.page-static__body>ol>li:nth-child(12):before {
    content: "12."
}

.guide__body>ol>li:nth-child(13):before,
.page-static__body>ol>li:nth-child(13):before {
    content: "13."
}

.guide__body>ol>li:nth-child(14):before,
.page-static__body>ol>li:nth-child(14):before {
    content: "14."
}

.guide__body>ol>li:nth-child(15):before,
.page-static__body>ol>li:nth-child(15):before {
    content: "15."
}

.guide__body>ol>li:nth-child(16):before,
.page-static__body>ol>li:nth-child(16):before {
    content: "16."
}

.guide__body>ol>li:nth-child(17):before,
.page-static__body>ol>li:nth-child(17):before {
    content: "17."
}

.guide__body>ol>li:nth-child(18):before,
.page-static__body>ol>li:nth-child(18):before {
    content: "18."
}

.guide__body>ol>li:nth-child(19):before,
.page-static__body>ol>li:nth-child(19):before {
    content: "19."
}

.guide__body>ol>li:nth-child(20):before,
.page-static__body>ol>li:nth-child(20):before {
    content: "20."
}

.guide__body>ol>li:nth-child(21):before,
.page-static__body>ol>li:nth-child(21):before {
    content: "21."
}

.guide__body>ol>li:nth-child(22):before,
.page-static__body>ol>li:nth-child(22):before {
    content: "22."
}

.guide__body>ol>li:nth-child(23):before,
.page-static__body>ol>li:nth-child(23):before {
    content: "23."
}

.guide__body>ol>li:nth-child(24):before,
.page-static__body>ol>li:nth-child(24):before {
    content: "24."
}

.guide__body>ol>li:nth-child(25):before,
.page-static__body>ol>li:nth-child(25):before {
    content: "25."
}

.guide__body>ol>li:nth-child(26):before,
.page-static__body>ol>li:nth-child(26):before {
    content: "26."
}

.guide__body>ol>li:nth-child(27):before,
.page-static__body>ol>li:nth-child(27):before {
    content: "27."
}

.guide__body>ol>li:nth-child(28):before,
.page-static__body>ol>li:nth-child(28):before {
    content: "28."
}

.guide__body>ol>li:nth-child(29):before,
.page-static__body>ol>li:nth-child(29):before {
    content: "29."
}

.guide__body>ol>li:nth-child(30):before,
.page-static__body>ol>li:nth-child(30):before {
    content: "30."
}

.guide__body>blockquote,
.page-static__body>blockquote {
    padding: 30px 30px 30px 72px;
    border-radius: 10px;
    background: #f5f5f5
}

.guide__body>blockquote p,
.page-static__body>blockquote p {
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px
}

.guide__body>blockquote cite,
.page-static__body>blockquote cite {
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    color: #a5a5a5
}

.guide__body table,
.page-static__body table {
    border-collapse: separate;
    border-radius: 10px;
    border-spacing: 0;
    border: 1px solid #ccc
}

@media(max-width:767px) {
    .guide__body table,
    .page-static__body table {
        min-width: 100%
    }
}

.guide__body td,
.guide__body th,
.page-static__body td,
.page-static__body th {
    padding: 15px 30px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc
}

.guide__body tr td:last-child,
.guide__body tr th:last-child,
.page-static__body tr td:last-child,
.page-static__body tr th:last-child {
    border-right: none
}

@media(max-width:767px) {
    .guide__body tr td:first-child,
    .guide__body tr th:first-child,
    .page-static__body tr td:first-child,
    .page-static__body tr th:first-child {
        text-align: center;
        width: 25%;
        padding: 20px 15px
    }
}

.guide__body tr:last-child td,
.guide__body tr:last-child th,
.page-static__body tr:last-child td,
.page-static__body tr:last-child th {
    border-bottom: none
}

@media(max-width:767px) {
    .guide__body tr:first-child,
    .page-static__body tr:first-child {
        text-align: center;
        width: 25%;
        padding: 20px 15px
    }
}

.guide__body th,
.page-static__body th {
    color: #6c5ded;
    background-color: rgba(108, 93, 237, .2)
}

.guide__body figcaption,
.page-static__body figcaption {
    margin-top: 10px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #7c7c7c
}

.guide__body .wp-block-image img,
.page-static__body .wp-block-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px
}

@media(max-width:767px) {
    .guide__body .wp-block-image img,
    .page-static__body .wp-block-image img {
        border-radius: 2.6666666667vw
    }
}

.guide__body .wp-block-embed-youtube,
.page-static__body .wp-block-embed-youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%
}

.guide__body .wp-block-embed-youtube iframe,
.page-static__body .wp-block-embed-youtube iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px
}

.guide__body hr,
.page-static__body hr {
    border: 1px solid #ccc
}

.low-header {
    margin: 0 auto;
    max-width: 960px;
    padding: 0 80px;
    width: 100%
}

@media(max-width:767px) {
    .low-header {
        padding: 0
    }
}

.low-header__count {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 80px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #6c5ded
}

@media(max-width:767px) {
    .low-header__count {
        height: 16vw;
        font-size: 4vw;
        line-height: 16vw
    }
}

.low-header__count span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    margin: auto;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 80px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    opacity: .1
}

@media(max-width:767px) {
    .low-header__count span {
        height: 16vw;
        font-size: 16vw
    }
}

.low-header__title {
    margin-top: 11px;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: .08em;
    line-height: 64px;
    text-align: center;
    color: #6c5ded
}

@media(max-width:767px) {
    .low-header__title {
        margin-top: 1.8666666667vw;
        font-size: 6.9333333333vw;
        line-height: 11.2vw
    }
}

.low-header__description {
    margin-top: 35px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .low-header__description {
        margin-top: 6.1333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

[data-theme-color=purple] .low-header__count,
[data-theme-color=purple] .low-header__title {
    color: #6c5ded
}

[data-theme-color=green] .low-header__count,
[data-theme-color=green] .low-header__title {
    color: #2cc697
}

[data-theme-color=pink] .low-header__count,
[data-theme-color=pink] .low-header__title {
    color: #eb4d9c
}

[data-theme-color=orange] .low-header__count,
[data-theme-color=orange] .low-header__title {
    color: #ef3e4c
}

[data-theme-color=blue] .low-header__count,
[data-theme-color=blue] .low-header__title {
    color: #33b6dd
}

[data-theme-color=yellow] .low-header__count,
[data-theme-color=yellow] .low-header__title {
    color: #fc9e1d
}

[data-theme-color=line] .low-header__count,
[data-theme-color=line] .low-header__title {
    color: #06c755
}

.about-visual {
    position: relative;
    z-index: 2;
    padding: 78px 80px 80px
}

@media(max-width:767px) {
    .about-visual {
        padding: 9.8666666667vw 0 0;
        background-color: #fff
    }
}

.about-visual__title {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .about-visual__title {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.about-visual__copy {
    margin-top: 30px;
    text-align: center
}

@media(max-width:767px) {
    .about-visual__copy {
        margin-top: 4.8vw
    }
}

.about-visual__description {
    margin-top: 36px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .about-visual__description {
        padding: 0 5.3333333333vw 9.8666666667vw;
        margin-top: 7.2vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.about-visual__anchor {
    position: relative;
    z-index: 2;
    margin-top: 80px
}

@media(max-width:767px) {
    .about-visual__anchor {
        display: block;
        margin-top: 0;
        padding: 14.6666666667vw 0;
        background-color: #f5f5f5
    }
}

.about-visual__illust {
    position: absolute;
    bottom: -150px;
    right: 50%;
    -webkit-transform: translateX(767px);
    transform: translateX(767px);
    width: 420px;
    height: 630px
}

@media(max-width:1359px) {
    .about-visual__illust {
        -webkit-transform: translateX(747px);
        transform: translateX(747px);
        width: 420px;
        height: 630px
    }
}

@media(max-width:1023px) {
    .about-visual__illust {
        -webkit-transform: translateX(567px);
        transform: translateX(567px);
        width: 336px;
        height: 504px
    }
}

@media(max-width:767px) {
    .about-visual__illust {
        display: none
    }
}

.access {
    padding: 70px 80px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:1359px) {
    .access {
        padding: 60px
    }
}

@media(max-width:767px) {
    .access {
        padding: 10.6666666667vw 5.3333333333vw;
        border-radius: 10px
    }
}

.access__top {
    position: relative
}

.access__content {
    width: 100%;
    max-width: 480px;
    min-height: 266.67px
}

@media(max-width:1359px) {
    .access__content {
        width: 37.5vw
    }
}

@media(max-width:767px) {
    .access__content {
        width: 100%
    }
}

.access__map {
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 266.67px
}

.access__map iframe {
    width: 100%;
    height: 100%
}

@media(max-width:1359px) {
    .access__map {
        width: 29.4117647059vw;
        height: 19.6080882353vw
    }
}

@media(max-width:767px) {
    .access__map {
        position: static;
        width: 100%;
        height: 52.4453333333vw;
        margin-top: 4.5333333333vw
    }
}

.access__name {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .access__name {
        font-size: 5.3333333333vw;
        line-height: 8vw
    }
}

.access__description {
    margin-top: 20px;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .access__description {
        margin-top: 5.3333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.access__data {
    margin-top: 15px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap
}

.access__data+.access__data {
    margin-top: 0
}

@media(max-width:1359px) {
    .access__data {
        -webkit-box-pack: start;
        justify-content: flex-start
    }
}

@media(max-width:767px) {
    .access__data {
        margin-top: 8vw
    }
}

.access__data dt {
    margin-top: 15px;
    -webkit-box-flex: 0;
    flex: 0 1 20px;
    text-align: left
}

.access__data dt svg circle,
.access__data dt svg path,
.access__data dt svg rect {
    stroke: #6c5ded
}

@media(max-width:767px) {
    .access__data dt svg {
        width: 5.8666666667vw;
        height: 5.8666666667vw
    }
}

@media(max-width:1359px) {
    .access__data dt {
        margin-right: 7px
    }
}

@media(max-width:767px) {
    .access__data dt {
        margin-right: 1.8666666667vw;
        font-size: 3.7333333333vw;
        line-height: 7.4666666667vw
    }
}

.access__data dd {
    margin-top: 10px;
    -webkit-box-flex: 0;
    flex: 0 1 453px;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:1359px) {
    .access__data dd {
        -webkit-box-flex: 0;
        flex: 0 1 33.0882352941vw
    }
}

@media(max-width:767px) {
    .access__data dd {
        -webkit-box-flex: 0;
        flex: 0 1 66.6666666667vw;
        margin-top: 4.5333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.access__slider {
    position: relative;
    margin-top: 40px
}

@media(max-width:767px) {
    .access__slider {
        margin-top: 8vw
    }
}

.access__data--time dt svg {
    position: relative;
    left: -2px
}

@media(max-width:767px) {
    .access__data--time dt svg {
        left: 0
    }
}

.access--purple .access__name svg path,
[data-theme-color=purple] .access .access__name svg path {
    fill: #6c5ded
}

.access--purple .access__data dt svg circle,
.access--purple .access__data dt svg path,
.access--purple .access__data dt svg rect,
[data-theme-color=purple] .access .access__data dt svg circle,
[data-theme-color=purple] .access .access__data dt svg path,
[data-theme-color=purple] .access .access__data dt svg rect {
    stroke: #6c5ded
}

.access--green .access__name svg path,
[data-theme-color=green] .access .access__name svg path {
    fill: #2cc697
}

.access--green .access__data dt svg circle,
.access--green .access__data dt svg path,
.access--green .access__data dt svg rect,
[data-theme-color=green] .access .access__data dt svg circle,
[data-theme-color=green] .access .access__data dt svg path,
[data-theme-color=green] .access .access__data dt svg rect {
    stroke: #2cc697
}

.access--pink .access__name svg path,
[data-theme-color=pink] .access .access__name svg path {
    fill: #eb4d9c
}

.access--pink .access__data dt svg circle,
.access--pink .access__data dt svg path,
.access--pink .access__data dt svg rect,
[data-theme-color=pink] .access .access__data dt svg circle,
[data-theme-color=pink] .access .access__data dt svg path,
[data-theme-color=pink] .access .access__data dt svg rect {
    stroke: #eb4d9c
}

.access--orange .access__name svg path,
[data-theme-color=orange] .access .access__name svg path {
    fill: #ef3e4c
}

.access--orange .access__data dt svg circle,
.access--orange .access__data dt svg path,
.access--orange .access__data dt svg rect,
[data-theme-color=orange] .access .access__data dt svg circle,
[data-theme-color=orange] .access .access__data dt svg path,
[data-theme-color=orange] .access .access__data dt svg rect {
    stroke: #ef3e4c
}

.access--blue .access__name svg path,
[data-theme-color=blue] .access .access__name svg path {
    fill: #33b6dd
}

.access--blue .access__data dt svg circle,
.access--blue .access__data dt svg path,
.access--blue .access__data dt svg rect,
[data-theme-color=blue] .access .access__data dt svg circle,
[data-theme-color=blue] .access .access__data dt svg path,
[data-theme-color=blue] .access .access__data dt svg rect {
    stroke: #33b6dd
}

.access--yellow .access__name svg path,
[data-theme-color=yellow] .access .access__name svg path {
    fill: #fc9e1d
}

.access--yellow .access__data dt svg circle,
.access--yellow .access__data dt svg path,
.access--yellow .access__data dt svg rect,
[data-theme-color=yellow] .access .access__data dt svg circle,
[data-theme-color=yellow] .access .access__data dt svg path,
[data-theme-color=yellow] .access .access__data dt svg rect {
    stroke: #fc9e1d
}

.access--line .access__name svg path,
[data-theme-color=line] .access .access__name svg path {
    fill: #06c755
}

.access--line .access__data dt svg circle,
.access--line .access__data dt svg path,
.access--line .access__data dt svg rect,
[data-theme-color=line] .access .access__data dt svg circle,
[data-theme-color=line] .access .access__data dt svg path,
[data-theme-color=line] .access .access__data dt svg rect {
    stroke: #06c755
}

.advice {
    width: 100%;
    background-color: #fff;
    border: 2px solid #222;
    border-bottom: none;
    box-shadow: 6px 6px 0 #222;
    border-radius: 20px
}

.advice__avatar {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 50%
}

.anchor {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: -10px auto
}

@media(max-width:1023px) {
    .anchor {
        width: 480px
    }
}

@media(max-width:767px) {
    .anchor {
        width: 100%;
        margin: 0;
        display: block
    }
}

.anchor>li {
    padding: 10px
}

@media(max-width:767px) {
    .anchor>li {
        padding: 1.3333333333vw 0
    }
}

.anchor>li>a {
    position: relative;
    display: block;
    width: 200px;
    height: 50px;
    padding: 17px 20px;
    border-radius: 25px;
    background: #fff;
    border: 1px solid #ccc;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center
}

@media(max-width:767px) {
    .anchor>li>a {
        width: 78.6666666667vw;
        height: 12.2666666667vw;
        padding: 4.2666666667vw 5.3333333333vw;
        border-radius: 6.6666666667vw;
        margin: auto;
        font-weight: 500;
        font-size: 3.4666666667vw;
        letter-spacing: .05em
    }
}

.anchor>li>a svg {
    position: absolute;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto
}

@media(max-width:767px) {
    .anchor>li>a svg {
        width: 2.6666666667vw;
        height: 1.6vw;
        right: 4vw
    }
}

.anchor>li:first-child svg path {
    fill: #6c5ded
}

.anchor>li:nth-child(2) svg path {
    fill: #33b6dd
}

.anchor>li:nth-child(3) svg path {
    fill: #ef3e4c
}

.anchor>li:nth-child(4) svg path {
    fill: #2cc697
}

.anchor>li>a.anchor--purple svg path {
    fill: #6c5ded
}

.anchor>li>a.anchor--green svg path {
    fill: #2cc697
}

.anchor>li>a.anchor--pink svg path {
    fill: #eb4d9c
}

.anchor>li>a.anchor--orange svg path {
    fill: #ef3e4c
}

.anchor>li>a.anchor--blue svg path {
    fill: #33b6dd
}

.anchor>li>a.anchor--yellow svg path {
    fill: #fc9e1d
}

.anchor>li>a.anchor--line svg path {
    fill: #06c755
}

.author {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin: auto;
    padding: 30px 40px;
    border: 1px solid #ccc;
    border-radius: 10px
}

@media(max-width:1359px) {
    .author {
        padding: 30px
    }
}

@media(max-width:767px) {
    .author {
        width: 100%;
        padding: 5.0666666667vw 5.3333333333vw;
        border-radius: 2.6666666667vw
    }
}

.author__image {
    -webkit-box-flex: 0;
    flex: 0 1 100px;
    width: 100px;
    height: 100px;
    margin-right: 30px
}

@media(max-width:767px) {
    .author__image {
        margin-right: 0;
        -webkit-box-flex: 0;
        flex: 0 1 16vw;
        width: 16vw;
        height: 16vw
    }
}

.author__image img {
    border-radius: 50%
}

.author__content {
    -webkit-box-flex: 0;
    flex: 0 1 520px;
    width: 520px
}

@media(max-width:767px) {
    .author__content {
        -webkit-box-flex: 0;
        flex: 0 1 58.6666666667vw;
        width: 58.6666666667vw
    }
}

.author__header {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #7c7c7c
}

@media(max-width:767px) {
    .author__header {
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.author__name {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .author__name {
        font-size: 4.5333333333vw;
        line-height: 8vw
    }
}

.author__name small {
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .author__name small {
        font-size: 3.4666666667vw;
        line-height: 6.72vw
    }
}

.author__profile {
    margin-top: 11px
}

@media(max-width:767px) {
    .author__profile {
        margin-top: 3.4666666667vw
    }
}

.author__profile__header {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 1;
    text-align: left;
    color: #ccc
}

@media(max-width:767px) {
    .author__profile__header {
        font-size: 2.9333333333vw
    }
}

.author__text {
    margin-top: 1px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .author__text {
        font-size: 3.4666666667vw
    }
}

.balloon {
    display: inline-block;
    padding: 15px 20px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 22px;
    text-align: left;
    color: #222
}

.balloon:before {
    position: absolute;
    bottom: 0;
    right: -12px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: none;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff
}

@media(max-width:767px) {
    .balloon:before {
        right: -3.2vw;
        border-bottom: 3.2vw solid #fff;
        border-right: 3.2vw solid transparent
    }
}

.booking {
    padding: 50px 0;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:767px) {
    .booking {
        padding: 10.6666666667vw 10.6666666667vw 13.0666666667vw
    }
}

.booking--lesson {
    background-image: url(../images/index/bg-trial-purple.jpg);
    background-size: cover;
    background-position: 50%;
    padding: 60px 0
}

@media(max-width:767px) {
    .booking--lesson {
        padding: 10.6666666667vw 5.3333333333vw 13.0666666667vw
    }
}

.booking--lesson .booking__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .booking--lesson .booking__title {
        font-size: 4.8vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw
    }
}

.booking__title {
    font-weight: 700;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .booking__title {
        font-size: 4.5333333333vw;
        line-height: 8vw
    }
}

.booking__list {
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:1023px) {
    .booking__list {
        display: block
    }
}

@media(max-width:767px) {
    .booking__list {
        display: block
    }
}

.booking__item {
    padding: 0 20px
}

@media(max-width:1023px) {
    .booking__item {
        margin-top: 20px;
        padding: 0;
        text-align: center
    }
}

@media(max-width:767px) {
    .booking__item {
        margin-top: 5.3333333333vw;
        padding: 0
    }
    .booking__item .button {
        width: 100%
    }
}

.booking__text {
    margin-top: 30px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 38px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .booking__text {
        width: 63.4666666667vw;
        margin: 3.2vw auto auto;
        font-size: 4vw;
        line-height: 6.9333333333vw
    }
}

.breadcrumbs {
    position: absolute;
    z-index: 6;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 43px;
    margin: 122px auto 0
}

@media(min-width:1440px) {
    .breadcrumbs {
        padding-left: 0
    }
}

@media(max-width:767px) {
    .breadcrumbs {
        margin: 20.2666666667vw auto 0;
        padding: 0 5.3333333333vw
    }
}

.breadcrumbs-inner {
    width: 100%
}

@media(min-width:1440px) {
    .breadcrumbs-inner {
        width: 1360px;
        margin: 0 auto;
        right: 0
    }
}

.breadcrumbs__list {
    display: -webkit-box;
    display: flex
}

@media(max-width:767px) {
    .breadcrumbs__list {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: scroll;
        opacity: 1
    }
}

.breadcrumbs__item svg {
    margin: 0 10px;
    width: 6px;
    height: 10px
}

.breadcrumbs__item svg path {
    fill: #e0e0e0
}

.breadcrumbs__link {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #a5a5a5
}

a.breadcrumbs__link {
    color: #7c7c7c
}

.single-lesson .breadcrumbs .breadcrumbs__link,
.single-lesson .breadcrumbs a.breadcrumbs__link {
    color: #fff
}

.button {
    position: relative;
    display: inline-block;
    height: 71px
}

@media(max-width:767px) {
    .button {
        display: inline-block;
        height: 15.4666666667vw
    }
}

.button__link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    border-radius: 36px;
    box-shadow: 0 3px 30px hsla(0, 0%, 71%, .3);
    -webkit-transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96), color .3s linear;
    transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96), color .3s linear
}

@media(max-width:767px) {
    .button__link {
        border-radius: 9.6vw;
        box-shadow: 0 .8vw 8vw hsla(0, 0%, 71%, .3)
    }
}

.button__link:hover {
    box-shadow: 0 0 0 hsla(0, 0%, 47.5%, .3);
    -webkit-transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96), color .3s linear;
    transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96), color .3s linear
}

.button__link:hover .button__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96)
}

.button__link:hover .button__inner:before {
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
    opacity: 1
}

.button__inner {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 0 50px;
    background-position: 100% 0;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96)
}

.button__inner,
.button__inner:before {
    border-radius: 36px;
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, left top, right top, from(#4c88ed), color-stop(50%, #f790e0), to(#4c88ed));
    background-image: linear-gradient(90deg, #4c88ed, #f790e0 50%, #4c88ed);
    background-size: 200% 100%
}

.button__inner:before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    background-color: #fff;
    background-position: 0 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear;
    opacity: 0
}

@media(max-width:767px) {
    .button__inner {
        border-radius: 9.6vw;
        padding: 0 10.6666666667vw
    }
}

.button__text {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #fffcf5
}

@media(max-width:767px) {
    .button__text {
        font-size: 4.2666666667vw;
        letter-spacing: .05em;
        line-height: 8vw;
        text-align: left
    }
}

.button__text small {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left
}

@media(max-width:767px) {
    .button__text small {
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 6.4vw;
        text-align: left
    }
}

.button__icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 21px;
    height: 21px;
    margin-right: 10px
}

@media(max-width:767px) {
    .button__icon {
        width: 4.5333333333vw;
        height: 4.5333333333vw
    }
}

.button__icon svg {
    display: block;
    width: 100%;
    height: 100%
}

.button__arrow {
    position: absolute;
    z-index: 2;
    right: 22px;
    top: 2px;
    bottom: 0;
    margin: auto;
    display: block;
    width: 8px;
    height: 12px
}

@media(max-width:767px) {
    .button__arrow {
        top: .5333333333vw;
        right: 4.2666666667vw;
        width: 2.1333333333vw;
        height: 3.2vw
    }
}

.button__arrow svg {
    display: block;
    width: 100%;
    height: 100%
}

.button--header {
    width: 180px;
    height: 44px
}

.button--header .button__arrow {
    width: 6px;
    height: 10px;
    right: 15px;
    top: 1px
}

.button--header .button__image {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    top: -10px;
    left: -25px;
    width: 53.33px;
    height: 80px
}

.button--header .button__image img {
    display: block;
    width: 100%;
    height: auto
}

.button--header .button__text {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #fff
}

.button--header .button__inner {
    padding: 0
}

.button--trial .button__image__text {
    position: absolute;
    z-index: 2;
    height: 25px;
    width: 100%;
    top: -25px;
    left: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 25px;
    letter-spacing: .03em;
    line-height: 1;
    text-align: center;
    color: #20f281
}

.button--trial .button__image__char {
    position: absolute;
    top: -43px;
    left: 58px;
    width: 47px;
    height: 70px
}

.button--trial .button__text {
    padding-right: 20px;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .button--trial .button__text {
        padding-right: 2.6666666667vw
    }
}

@media(max-width:767px) {
    .button-with-icon .button__inner {
        padding: 0 6.1333333333vw 0 4vw
    }
}

.button-with-icon .button__icon {
    top: 2px
}

@media(max-width:767px) {
    .button-with-icon .button__icon {
        top: -.2666666667vw;
        margin-top: 1.3333333333vw;
        margin-left: 1.0666666667vw
    }
}

.button-with-icon .button__text {
    top: -1px
}

@media(max-width:767px) {
    .button-with-icon .button__text {
        top: -.2666666667vw
    }
}

.button-with-icon .button__text small {
    position: relative;
    top: 1px
}

@media(max-width:767px) {
    .button-with-icon .button__text small {
        top: .2666666667vw
    }
}

.button--line .button__inner {
    background-color: #06c755
}

.button--line .button__text {
    top: -1px;
    padding-right: 20px;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .button--line .button__text {
        padding-right: 2.6666666667vw;
        top: -.2666666667vw
    }
}

.button--line .button__text small {
    position: relative;
    top: 1px
}

@media(max-width:767px) {
    .button--line .button__text small {
        top: .2666666667vw
    }
}

.button--line .button__icon {
    top: 2px
}

@media(max-width:767px) {
    .button--line .button__icon {
        top: -.2666666667vw;
        margin-left: 1.0666666667vw
    }
}

.button--footer {
    width: 200px;
    height: 71px
}

.button--footer .button__inner {
    padding-left: 58px;
    padding-right: 0
}

.button--footer .button__icon {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: -38px
}

.button--footer.button--line .button__icon {
    top: 4px
}

.button--footer .button__text {
    display: block;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left;
    color: #fffcf5
}

.button--footer .button__text small {
    margin-top: 5px;
    margin-left: -5px;
    display: block;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left;
    color: #fff
}

.button--purple .button__inner,
.button--purple .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#4c88ed), color-stop(50%, #f790e0), to(#4c88ed));
    background-image: linear-gradient(90deg, #4c88ed, #f790e0 50%, #4c88ed)
}

.button--purple .button__image__text {
    color: #6c5ded
}

.button--green .button__inner,
.button--green .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#31c1bc), color-stop(50%, #36b906), to(#31c1bc));
    background-image: linear-gradient(90deg, #31c1bc, #36b906 50%, #31c1bc)
}

.button--green .button__image__text {
    color: #2cc697
}

.button--pink .button__inner,
.button--pink .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#fa383c), color-stop(50%, #ff76ef), to(#fa383c));
    background-image: linear-gradient(90deg, #fa383c, #ff76ef 50%, #fa383c)
}

.button--pink .button__image__text {
    color: #eb4d9c
}

.button--orange .button__inner,
.button--orange .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#ffa234), color-stop(50%, #fa5562), to(#ffa234));
    background-image: linear-gradient(90deg, #ffa234, #fa5562 50%, #ffa234)
}

.button--orange .button__image__text {
    color: #ef3e4c
}

.button--blue .button__inner,
.button--blue .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#45cddc), color-stop(50%, #5192ea), to(#45cddc));
    background-image: linear-gradient(90deg, #45cddc, #5192ea 50%, #45cddc)
}

.button--blue .button__image__text {
    color: #33b6dd
}

.button--yellow .button__image__text {
    color: #fc9e1d
}

.button--line .button__inner,
.button--line .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#31c1bc), color-stop(50%, #36b906), to(#31c1bc));
    background-image: linear-gradient(90deg, #31c1bc, #36b906 50%, #31c1bc)
}

.button--line .button__image__text {
    color: #06c755
}

.button--white .button__text {
    color: #222
}

.button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#4c88ed), color-stop(50%, #f790e0), to(#4c88ed));
    background-image: linear-gradient(90deg, #4c88ed, #f790e0 50%, #4c88ed)
}

.button--white .button__arrow svg path {
    fill: #222
}

.button--white .button__link:before {
    display: none
}

.button--white .button__link:hover .button__text {
    color: #fff
}

.button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

.button--border .button__link {
    border-radius: 50px;
    background-image: linear-gradient(125deg, #f790e8, #4c88ed);
    padding: 2px
}

.button--border .button__inner {
    background-color: #fff;
    background-image: none
}

.button--border .button__inner:before {
    background-image: linear-gradient(125deg, #f790e0, #4c88ed)
}

.button--border .button__text {
    color: #222
}

.button--border .button__arrow svg path {
    fill: #222
}

.button--white-purple .button__text,
[data-theme-color=purple] .button--white .button__text {
    color: #222
}

.button--white-purple .button__inner,
[data-theme-color=purple] .button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white-purple .button__inner:before,
[data-theme-color=purple] .button--white .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#4c88ed), color-stop(50%, #f790e0), to(#4c88ed));
    background-image: linear-gradient(90deg, #4c88ed, #f790e0 50%, #4c88ed)
}

.button--white-purple .button__arrow svg path,
[data-theme-color=purple] .button--white .button__arrow svg path {
    fill: #222
}

.button--white-purple .button__link:before,
[data-theme-color=purple] .button--white .button__link:before {
    display: none
}

.button--white-purple .button__link .button__arrow svg path,
.button--white-purple .button__link .button__text,
[data-theme-color=purple] .button--white .button__link .button__arrow svg path,
[data-theme-color=purple] .button--white .button__link .button__text {
    -webkit-transition: .4s linear;
    transition: .4s linear
}

.button--white-purple .button__link:hover .button__text,
[data-theme-color=purple] .button--white .button__link:hover .button__text {
    color: #fff
}

.button--white-purple .button__link:hover .button__arrow svg path,
[data-theme-color=purple] .button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

[data-theme-color=purple] .button--border .button__inner:before,
[data-theme-color=purple] .button--border .button__link {
    background-image: linear-gradient(125deg, #ff88df, #4c88ed)
}

.button--white-green .button__text,
[data-theme-color=green] .button--white .button__text {
    color: #222
}

.button--white-green .button__inner,
[data-theme-color=green] .button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white-green .button__inner:before,
[data-theme-color=green] .button--white .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#31c1bc), color-stop(50%, #36b906), to(#31c1bc));
    background-image: linear-gradient(90deg, #31c1bc, #36b906 50%, #31c1bc)
}

.button--white-green .button__arrow svg path,
[data-theme-color=green] .button--white .button__arrow svg path {
    fill: #222
}

.button--white-green .button__link:before,
[data-theme-color=green] .button--white .button__link:before {
    display: none
}

.button--white-green .button__link .button__arrow svg path,
.button--white-green .button__link .button__text,
[data-theme-color=green] .button--white .button__link .button__arrow svg path,
[data-theme-color=green] .button--white .button__link .button__text {
    -webkit-transition: .4s linear;
    transition: .4s linear
}

.button--white-green .button__link:hover .button__text,
[data-theme-color=green] .button--white .button__link:hover .button__text {
    color: #fff
}

.button--white-green .button__link:hover .button__arrow svg path,
[data-theme-color=green] .button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

[data-theme-color=green] .button--border .button__inner:before,
[data-theme-color=green] .button--border .button__link {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.button--white-pink .button__text,
[data-theme-color=pink] .button--white .button__text {
    color: #222
}

.button--white-pink .button__inner,
[data-theme-color=pink] .button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white-pink .button__inner:before,
[data-theme-color=pink] .button--white .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#fa383c), color-stop(50%, #ff76ef), to(#fa383c));
    background-image: linear-gradient(90deg, #fa383c, #ff76ef 50%, #fa383c)
}

.button--white-pink .button__arrow svg path,
[data-theme-color=pink] .button--white .button__arrow svg path {
    fill: #222
}

.button--white-pink .button__link:before,
[data-theme-color=pink] .button--white .button__link:before {
    display: none
}

.button--white-pink .button__link .button__arrow svg path,
.button--white-pink .button__link .button__text,
[data-theme-color=pink] .button--white .button__link .button__arrow svg path,
[data-theme-color=pink] .button--white .button__link .button__text {
    -webkit-transition: .4s linear;
    transition: .4s linear
}

.button--white-pink .button__link:hover .button__text,
[data-theme-color=pink] .button--white .button__link:hover .button__text {
    color: #fff
}

.button--white-pink .button__link:hover .button__arrow svg path,
[data-theme-color=pink] .button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

[data-theme-color=pink] .button--border .button__inner:before,
[data-theme-color=pink] .button--border .button__link {
    background-image: linear-gradient(125deg, #ff76ef, #fa383c)
}

.button--white-orange .button__text,
[data-theme-color=orange] .button--white .button__text {
    color: #222
}

.button--white-orange .button__inner,
[data-theme-color=orange] .button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white-orange .button__inner:before,
[data-theme-color=orange] .button--white .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#ffa234), color-stop(50%, #fa5562), to(#ffa234));
    background-image: linear-gradient(90deg, #ffa234, #fa5562 50%, #ffa234)
}

.button--white-orange .button__arrow svg path,
[data-theme-color=orange] .button--white .button__arrow svg path {
    fill: #222
}

.button--white-orange .button__link:before,
[data-theme-color=orange] .button--white .button__link:before {
    display: none
}

.button--white-orange .button__link .button__arrow svg path,
.button--white-orange .button__link .button__text,
[data-theme-color=orange] .button--white .button__link .button__arrow svg path,
[data-theme-color=orange] .button--white .button__link .button__text {
    -webkit-transition: .4s linear;
    transition: .4s linear
}

.button--white-orange .button__link:hover .button__text,
[data-theme-color=orange] .button--white .button__link:hover .button__text {
    color: #fff
}

.button--white-orange .button__link:hover .button__arrow svg path,
[data-theme-color=orange] .button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

[data-theme-color=orange] .button--border .button__inner:before,
[data-theme-color=orange] .button--border .button__link {
    background-image: linear-gradient(125deg, #fa5562, #ffa234)
}

.button--white-blue .button__text,
[data-theme-color=blue] .button--white .button__text {
    color: #222
}

.button--white-blue .button__inner,
[data-theme-color=blue] .button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white-blue .button__inner:before,
[data-theme-color=blue] .button--white .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#45cddc), color-stop(50%, #5192ea), to(#45cddc));
    background-image: linear-gradient(90deg, #45cddc, #5192ea 50%, #45cddc)
}

.button--white-blue .button__arrow svg path,
[data-theme-color=blue] .button--white .button__arrow svg path {
    fill: #222
}

.button--white-blue .button__link:before,
[data-theme-color=blue] .button--white .button__link:before {
    display: none
}

.button--white-blue .button__link .button__arrow svg path,
.button--white-blue .button__link .button__text,
[data-theme-color=blue] .button--white .button__link .button__arrow svg path,
[data-theme-color=blue] .button--white .button__link .button__text {
    -webkit-transition: .4s linear;
    transition: .4s linear
}

.button--white-blue .button__link:hover .button__text,
[data-theme-color=blue] .button--white .button__link:hover .button__text {
    color: #fff
}

.button--white-blue .button__link:hover .button__arrow svg path,
[data-theme-color=blue] .button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

[data-theme-color=blue] .button--border .button__inner:before,
[data-theme-color=blue] .button--border .button__link {
    background-image: linear-gradient(125deg, #5192ea, #45cddc)
}

.button--white-yellow .button__text,
[data-theme-color=yellow] .button--white .button__text {
    color: #222
}

.button--white-yellow .button__inner,
[data-theme-color=yellow] .button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white-yellow .button__arrow svg path,
[data-theme-color=yellow] .button--white .button__arrow svg path {
    fill: #222
}

.button--white-yellow .button__link:before,
[data-theme-color=yellow] .button--white .button__link:before {
    display: none
}

.button--white-yellow .button__link .button__arrow svg path,
.button--white-yellow .button__link .button__text,
[data-theme-color=yellow] .button--white .button__link .button__arrow svg path,
[data-theme-color=yellow] .button--white .button__link .button__text {
    -webkit-transition: .4s linear;
    transition: .4s linear
}

.button--white-yellow .button__link:hover .button__text,
[data-theme-color=yellow] .button--white .button__link:hover .button__text {
    color: #fff
}

.button--white-yellow .button__link:hover .button__arrow svg path,
[data-theme-color=yellow] .button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

[data-theme-color=yellow] .button--border .button__inner:before,
[data-theme-color=yellow] .button--border .button__link {
    background-image: linear-gradient(125deg, #ffdd4d, #f49c10)
}

.button--white-line .button__text,
[data-theme-color=line] .button--white .button__text {
    color: #222
}

.button--white-line .button__inner,
[data-theme-color=line] .button--white .button__inner {
    background-color: #fff;
    background-image: none;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .2)
}

.button--white-line .button__inner:before,
[data-theme-color=line] .button--white .button__inner:before {
    background-image: -webkit-gradient(linear, left top, right top, from(#31c1bc), color-stop(50%, #36b906), to(#31c1bc));
    background-image: linear-gradient(90deg, #31c1bc, #36b906 50%, #31c1bc)
}

.button--white-line .button__arrow svg path,
[data-theme-color=line] .button--white .button__arrow svg path {
    fill: #222
}

.button--white-line .button__link:before,
[data-theme-color=line] .button--white .button__link:before {
    display: none
}

.button--white-line .button__link .button__arrow svg path,
.button--white-line .button__link .button__text,
[data-theme-color=line] .button--white .button__link .button__arrow svg path,
[data-theme-color=line] .button--white .button__link .button__text {
    -webkit-transition: .4s linear;
    transition: .4s linear
}

.button--white-line .button__link:hover .button__text,
[data-theme-color=line] .button--white .button__link:hover .button__text {
    color: #fff
}

.button--white-line .button__link:hover .button__arrow svg path,
[data-theme-color=line] .button--white .button__link:hover .button__arrow svg path {
    fill: #fff
}

[data-theme-color=line] .button--border .button__inner:before,
[data-theme-color=line] .button--border .button__link {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.button--lesson {
    width: 720px;
    height: 130px;
    border-radius: 65px
}

@media(max-width:767px) {
    .button--lesson {
        width: 89.3333333333vw;
        height: 18.6666666667vw
    }
}

.button--lesson .button__link {
    border-radius: 65px
}

@media(max-width:767px) {
    .button--lesson .button__link {
        overflow: hidden
    }
}

.button--lesson .button__inner,
.button--lesson .button__inner:before {
    border-radius: 65px
}

.button--lesson .button__image {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 29px;
    width: 182px
}

@media(max-width:767px) {
    .button--lesson .button__image {
        left: -2px;
        width: 20.5vw
    }
}

.button--lesson .button__text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff
}

@media(max-width:767px) {
    .button--lesson .button__text {
        font-size: 3.2vw;
        line-height: 3.2vw
    }
}

.button--lesson .button__text b {
    display: block;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: .03em;
    line-height: 30px;
    text-align: center;
    color: #fff
}

@media(max-width:767px) {
    .button--lesson .button__text b {
        margin-top: 6px;
        font-size: 4.2666666667vw;
        line-height: 4.2666666667vw
    }
}

.button--lesson .button__arrow {
    right: 60px
}

@media(max-width:767px) {
    .button--lesson .button__arrow {
        right: 6.9333333333vw
    }
}

.button--cv {
    display: block;
    width: 440px;
    height: auto;
    margin: 40px auto 0
}

@media(max-width:767px) {
    .button--cv {
        width: 100%;
        margin: 8vw auto 0
    }
}

.button--cv .button__image {
    position: absolute
}

.button--cv .button__image--a1 {
    top: -54px;
    right: 35px;
    width: 54px;
    height: 54px
}

@media(max-width:767px) {
    .button--cv .button__image--a1 {
        top: -9.6vw;
        right: 6.6666666667vw;
        width: 10.4vw;
        height: 10.4vw
    }
}

.button--cv .button__image--a2 {
    top: -50px;
    left: 35px;
    width: 50px;
    height: 50px
}

@media(max-width:767px) {
    .button--cv .button__image--a2 {
        top: -9.6vw;
        left: 6.6666666667vw;
        width: 9.6vw;
        height: 9.6vw
    }
}

.button--cv .button__link {
    height: 78px
}

@media(max-width:767px) {
    .button--cv .button__link {
        height: 20.2666666667vw
    }
}

.button--cv .button__text__inner {
    text-align: center
}

.button--cv .button__message {
    padding: 0 90px;
    margin-bottom: 12px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .button--cv .button__message {
        padding: 0 17.3333333333vw;
        margin-bottom: 1.8666666667vw;
        font-size: 4vw;
        line-height: 6.6666666667vw
    }
}

.button--cv .button__inner small {
    text-align: center;
    display: block
}

.case-sort {
    position: relative;
    padding: 20px 0;
    background-color: #fff
}

.case-sort:after {
    position: absolute;
    content: " ";
    z-index: 2;
    top: 0;
    right: 0;
    width: calc(50% - 640px);
    height: 100%;
    display: block;
    background: #fff
}

@media(max-width:767px) {
    .case-sort:after {
        display: none
    }
}

.case-sort:before {
    position: absolute;
    content: " ";
    z-index: 2;
    top: 0;
    left: 0;
    width: calc(50% - 640px);
    height: 100%;
    display: block;
    background: #fff
}

@media(max-width:767px) {
    .case-sort:before {
        display: none
    }
}

.case-sort__inner {
    position: relative
}

.case-sort__inner:after {
    position: absolute;
    z-index: 2;
    content: " ";
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    display: block;
    background-image: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), to(#fff));
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff)
}

@media(max-width:767px) {
    .case-sort__inner:after {
        pointer-events: none;
        bottom: 0;
        top: auto;
        background-image: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), color-stop(40%, #fff), to(#fff));
        background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 40%, #fff);
        width: 26.6666666667vw;
        height: 10.6666666667vw
    }
}

.case-sort__inner:before {
    position: absolute;
    z-index: 2;
    content: " ";
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    display: block;
    background-image: -webkit-gradient(linear, right top, left top, from(hsla(0, 0%, 100%, 0)), to(#fff));
    background-image: linear-gradient(-90deg, hsla(0, 0%, 100%, 0), #fff)
}

@media(max-width:767px) {
    .case-sort__inner:before {
        display: none
    }
}

.case-sort__inner .slider__next {
    position: absolute;
    z-index: 4
}

@media(max-width:767px) {
    .case-sort__inner .slider__next {
        right: -2.6666666667vw
    }
}

@media(max-width:767px) {
    .case-sort__slider {
        padding-right: 13.3333333333vw
    }
}

.category-list {
    background-color: #fff;
    border-radius: 10px;
    padding: 40px 60px
}

@media(max-width:767px) {
    .category-list {
        border-radius: 2.6666666667vw;
        padding: 8vw 5.3333333333vw
    }
}

.category-list--col {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .category-list--col {
        display: block
    }
}

.category-list--col .category-list__section {
    margin: 0;
    -webkit-box-flex: 0;
    flex: 0 1 50%
}

@media(max-width:767px) {
    .category-list--col .category-list__section {
        margin-top: 8vw
    }
}

.category-list__section {
    margin-top: 40px
}

@media(max-width:767px) {
    .category-list__section {
        margin-top: 8vw
    }
}

.category-list__section:first-child {
    margin-top: 0
}

.category-list__header {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222;
    vertical-align: middle
}

@media(max-width:767px) {
    .category-list__header {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.category-list__header:before {
    content: " ";
    display: inline-block;
    position: relative;
    top: -1px;
    margin-right: 4px;
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: #ccc;
    vertical-align: middle
}

@media(max-width:767px) {
    .category-list__header:before {
        position: relative;
        top: -.2666666667vw;
        margin-right: 1.0666666667vw;
        width: 1.0666666667vw;
        height: 5.3333333333vw;
        border-radius: .5333333333vw
    }
}

.category-list__sub-header {
    margin-top: 15px;
    margin-bottom: -10px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #222;
    vertical-align: middle
}

@media(max-width:767px) {
    .category-list__sub-header {
        margin-top: 4vw;
        margin-bottom: -2.6666666667vw;
        font-size: 3.4666666667vw;
        letter-spacing: .05em;
        line-height: 6.4vw
    }
}

.category-list__sub-header:before {
    content: " ";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #ccc;
    border-radius: 50%
}

@media(max-width:767px) {
    .category-list__sub-header:before {
        margin-right: 1.6vw;
        width: 1.0666666667vw;
        height: 1.0666666667vw
    }
}

.category-list__sub-section {
    margin-top: 60px
}

.category-list__sub-section:first-child,
.category-list__sub-section:nth-child(2) {
    margin-top: 0
}

@media(max-width:767px) {
    .category-list__sub-section {
        margin-top: 8vw
    }
    .category-list__sub-section:first-child {
        margin-top: 0
    }
    .category-list__sub-section:nth-child(2) {
        margin-top: 8vw
    }
}

.category-list__list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
}

@media(max-width:767px) {
    .category-list__list {
        display: block
    }
}

.category-list__item {
    margin-top: 20px;
    -webkit-box-flex: 0;
    flex: 0 1 33.3333%
}

@media(max-width:767px) {
    .category-list__item {
        margin-top: 3.7333333333vw
    }
}

.category-list__link {
    position: relative;
    display: block;
    padding-left: 27px;
    padding-right: 20px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .category-list__link {
        padding-left: 7.2vw;
        padding-right: 0;
        font-size: 4.5333333333vw;
        line-height: 8vw
    }
}

.category-list__link .circle-arrow {
    position: absolute;
    top: 5px;
    left: 0
}

@media(max-width:767px) {
    .category-list__link .circle-arrow {
        top: 1.3333333333vw
    }
}

.category-list__tags {
    margin-top: 15px
}

@media(max-width:767px) {
    .category-list__tags {
        margin-top: 4vw
    }
}

.category-list__tag {
    display: inline-block;
    margin: 5px 10px 5px 0
}

@media(max-width:767px) {
    .category-list__tag {
        margin: 1.3333333333vw 2.6666666667vw 1.3333333333vw 0
    }
}

.category-list__tag-link {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 0 14px 0 12px;
    height: 28px;
    border-radius: 14px;
    background: #f0eefd;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .category-list__tag-link {
        padding: 0 3.7333333333vw 0 3.2vw;
        height: 6.9333333333vw;
        border-radius: 3.2vw;
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.category-list__tag-link svg {
    margin-right: 5px;
    width: 12px;
    height: 12px;
    display: inline-block
}

@media(max-width:767px) {
    .category-list__tag-link svg {
        margin-right: 1.3333333333vw;
        width: 3.2vw;
        height: 3.2vw
    }
}

.category-list__tag-link:hover {
    background: #6c5ded;
    color: #fff
}

.category-list__tag-link:hover svg {
    fill: #fff
}

.category-list__more {
    margin-top: 30px
}

@media(max-width:767px) {
    .category-list__more {
        margin-top: 8vw
    }
}

.category-list__more>a {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    vertical-align: middle;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .category-list__more>a {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.category-list__more .is-open .category-list__icon span:nth-child(2) {
    display: none
}

.category-list__icon {
    margin-left: 10px;
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    background: #fff;
    border: 1px solid #6c5ded;
    border-radius: 50%
}

@media(max-width:767px) {
    .category-list__icon {
        margin-left: 1.8666666667vw;
        width: 5.3333333333vw;
        height: 5.3333333333vw
    }
}

.category-list__icon span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
    width: 8px;
    height: 1px;
    background: #6c5ded
}

@media(max-width:767px) {
    .category-list__icon span {
        width: 1.6vw;
        height: 1px
    }
}

.category-list__icon span:nth-child(2) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.category-list__section--more {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 30px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ccc
}

@media(max-width:767px) {
    .category-list__section--more {
        margin-top: 8vw;
        padding: 5.3333333333vw 2.6666666667vw;
        border-radius: 2.6666666667vw
    }
}

.category-list__section--more .category-list__sub-section {
    -webkit-box-flex: 1;
    flex: 1 0 50%
}

@media(max-width:767px) {
    .category-list__section--more .category-list__sub-section {
        -webkit-box-flex: 1;
        flex: 1 0 100%
    }
}

.category-list__more__wrapper {
    overflow: hidden;
    height: 0
}

.check {
    position: relative;
    display: inline-block;
    padding-left: 22px;
    height: 19px
}

@media(max-width:767px) {
    .check {
        padding-left: 5.8666666667vw;
        height: 5.0666666667vw
    }
}

.check svg {
    position: absolute;
    z-index: 2;
    top: 4px;
    left: 3px;
    width: 15px;
    height: 13px;
    fill: #a5a5a5
}

@media(max-width:767px) {
    .check svg {
        top: 1.0666666667vw;
        left: .8vw;
        width: 4vw;
        height: 3.4666666667vw
    }
}

.check:after {
    position: absolute;
    top: 6px;
    left: 0;
    content: " ";
    display: block;
    width: 14.23px;
    height: 14.23px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid #ccc
}

@media(max-width:767px) {
    .check:after {
        top: 1.6vw;
        width: 3.7946666667vw;
        height: 3.7946666667vw;
        border-radius: .5333333333vw
    }
}

.check--purple svg {
    fill: #6c5ded
}

.check--green svg {
    fill: #2cc697
}

.check--pink svg {
    fill: #eb4d9c
}

.check--orange svg {
    fill: #ef3e4c
}

.check--blue svg {
    fill: #33b6dd
}

.check--yellow svg {
    fill: #fc9e1d
}

.check--line svg {
    fill: #06c755
}

.check--white svg {
    fill: #fff
}

.check--large svg {
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 4px;
    width: 20px;
    height: 18px
}

@media(max-width:767px) {
    .check--large svg {
        top: .5333333333vw;
        left: 1.0666666667vw;
        width: 5.3333333333vw;
        height: 4.8vw
    }
}

.check--large:after {
    position: absolute;
    top: 6px;
    left: 0;
    content: " ";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: transparent;
    border: 1px solid #ccc
}

@media(max-width:767px) {
    .check--large:after {
        top: 1.6vw;
        left: 0;
        width: 4.8vw;
        height: 4.8vw;
        border-radius: .5333333333vw
    }
}

.circle-arrow {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-image: linear-gradient(125deg, #feb446, #4c88ed);
    border-radius: 50%
}

@media(max-width:767px) {
    .circle-arrow {
        width: 5.3333333333vw;
        height: 5.3333333333vw;
        border-radius: 50%
    }
}

.circle-arrow svg {
    position: relative;
    left: 1px;
    width: 6px;
    height: 10px
}

@media(max-width:767px) {
    .circle-arrow svg {
        left: .2666666667vw;
        width: 1.6vw;
        height: 2.6666666667vw
    }
}

.circle-arrow svg path {
    fill: #fff
}

[data-theme-color=purple] .circle-arrow {
    background-image: linear-gradient(125deg, #f790e0, #4c88ed)
}

.circle-arrow--purple {
    background-image: linear-gradient(125deg, #f790e0, #4c88ed)!important
}

[data-theme-color=green] .circle-arrow {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.circle-arrow--green {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)!important
}

[data-theme-color=pink] .circle-arrow {
    background-image: linear-gradient(125deg, #ff76ef, #fa383c)
}

.circle-arrow--pink {
    background-image: linear-gradient(125deg, #ff76ef, #fa383c)!important
}

[data-theme-color=orange] .circle-arrow {
    background-image: linear-gradient(125deg, #fa5562, #ffa234)
}

.circle-arrow--orange {
    background-image: linear-gradient(125deg, #fa5562, #ffa234)!important
}

[data-theme-color=blue] .circle-arrow {
    background-image: linear-gradient(125deg, #5192ea, #45cddc)
}

.circle-arrow--blue {
    background-image: linear-gradient(125deg, #5192ea, #45cddc)!important
}

[data-theme-color=yellow] .circle-arrow {
    background-image: linear-gradient(125deg, #ffdd4d, #f49c10)
}

.circle-arrow--yellow {
    background-image: linear-gradient(125deg, #ffdd4d, #f49c10)!important
}

[data-theme-color=line] .circle-arrow {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.circle-arrow--line {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)!important
}

.club {
    position: relative
}

.club__more {
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    margin: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    -webkit-filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: center
}

@media(max-width:767px) {
    .club__more {
        position: absolute;
        top: -8.5333333333vw;
        font-size: 3.7333333333vw;
        line-height: 6.72vw;
        width: 19.2vw;
        height: 19.2vw
    }
}

.club__content {
    padding: 20px;
    border-radius: 10px;
    background-image: linear-gradient(125deg, #ffa7ae, #f8e36f)
}

@media(max-width:767px) {
    .club__content {
        padding: 2.6666666667vw;
        border-radius: 2.6666666667vw
    }
}

.club__inner {
    padding: 50px 20px 0;
    background-color: #fff;
    border-radius: 10px
}

@media(max-width:767px) {
    .club__inner {
        padding: 14.1333333333vw 0 0;
        border-radius: 2.6666666667vw
    }
}

.club__copy {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #ef3e4c
}

@media(max-width:767px) {
    .club__copy {
        font-size: 4vw;
        line-height: 5.8666666667vw
    }
}

.club__title {
    width: 366.34px;
    height: 46.64px;
    margin: 11px auto 0
}

@media(max-width:767px) {
    .club__title {
        width: 71.2vw;
        height: 9.064vw;
        margin: 5.3333333333vw auto 0
    }
}

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

.club__text {
    margin: 40px auto 0;
    width: 558px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .club__text {
        width: 100%;
        padding: 0 5.3333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.club__image {
    margin: 40px auto 0;
    width: 660px
}

@media(max-width:767px) {
    .club__image {
        margin: 6.1333333333vw auto 0;
        width: 100%
    }
}

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

.club__ex {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: flex;
    width: 100%;
    max-width: 660px;
    margin: -13px auto 0;
    padding: 31px 61px;
    border-radius: 10px;
    border: 1px solid #dedede;
    background: #fff
}

@media(max-width:1359px) {
    .club__ex {
        padding: 31px 40px
    }
}

@media(max-width:767px) {
    .club__ex {
        display: block;
        width: 78.6666666667vw;
        margin: -1.3333333333vw auto 0;
        padding: 5.3333333333vw 8vw
    }
}

.club__ex__header {
    text-align: center;
    font-weight: 400;
    font-size: 18px;
    color: #ef3e4c;
    letter-spacing: .05em;
    margin-right: 27px
}

@media(max-width:767px) {
    .club__ex__header {
        text-align: center;
        margin-right: 0;
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.club__ex__list {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: left;
    justify-content: left;
    background-color: #fff;
    flex-wrap: nowrap
}

@media(max-width:767px) {
    .club__ex__list {
        padding: 0;
        -webkit-box-pack: center;
        justify-content: center;
        margin-top: 1.0666666667vw;
        border-radius: 2.6666666667vw;
        flex-wrap: wrap
    }
}

.club__ex__text {
    text-align: left;
    font-size: 14px;
    letter-spacing: .05em;
    margin-right: 18px
}

@media(max-width:767px) {
    .club__ex__text {
        font-size: 3.7333333333vw;
        line-height: 6.72vw;
        margin-left: 2.1333333333vw;
        margin-right: 2.1333333333vw
    }
}

.club__price {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 512.25px;
    margin: 38px auto 0
}

@media(max-width:767px) {
    .club__price {
        margin-top: 8vw;
        width: 58.9333333333vw;
        display: block
    }
}

.club__price__item {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.club__price__item:first-child {
    -webkit-box-flex: 0;
    flex: 0 1 41.9775500244%
}

.club__price__item:last-child {
    -webkit-box-flex: 0;
    flex: 0 1 50.3660322108%
}

@media(max-width:767px) {
    .club__price__item:last-child {
        margin-top: 5.3333333333vw
    }
}

.club__price__header {
    width: 96px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 22px;
    text-align: center;
    color: #222;
    background-color: #f5f5f5;
    border-radius: 10px
}

@media(max-width:767px) {
    .club__price__header {
        height: 16.5333333333vw;
        font-size: 3.7333333333vw;
        line-height: 5.8666666667vw;
        border-radius: 2.6666666667vw
    }
}

@media(max-width:767px) {
    .club__price__body {
        -webkit-box-flex: 0;
        flex: 0 1 50%;
        text-align: center
    }
}

.club__price__copy {
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 20px;
    text-align: center
}

@media(max-width:767px) {
    .club__price__copy {
        font-size: 3.2vw;
        line-height: 5.3333333333vw
    }
}

.club__price__value {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 40px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: right;
    color: #707070
}

@media(max-width:767px) {
    .club__price__value {
        text-align: center;
        font-size: 8vw
    }
}

.club__price__value small {
    font-family: Noto Sans JP, sans-serif;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left;
    color: #707070
}

@media(max-width:767px) {
    .club__price__value small {
        font-size: 4.2666666667vw
    }
}

.club__price__value b {
    font-family: Noto Sans JP, sans-serif;
    font-weight: 500;
    font-size: 40px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left;
    color: #ef3e4c;
    position: relative;
    display: inline-block
}

@media(max-width:767px) {
    .club__price__value b {
        font-size: 9.6vw
    }
}

.club__price__value b:after {
    content: "\203B  2";
    font-size: 10px;
    position: absolute;
    top: 3px;
    right: -13px;
    color: #222;
    letter-spacing: -.1em
}

.club__price__value.club__price__no_after_value b:after {
    display: none
}

.club__price__text {
    margin-top: 15px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 20px;
    text-align: center;
    color: #222
}

.club__chara {
    margin-top: -29px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 178.74px;
    position: relative;
    z-index: 2;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:1023px) {
    .club__chara {
        margin-top: 30px;
        padding-bottom: 26px;
        display: block;
        height: auto
    }
}

@media(max-width:767px) {
    .club__chara {
        margin-top: 8vw;
        padding-bottom: 6.9333333333vw;
        display: block;
        height: auto
    }
}

.club__chara__balloon {
    position: relative;
    width: 223px;
    height: 54px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background: #fff;
    -webkit-filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:1023px) {
    .club__chara__balloon {
        margin: 24px 0 0;
        width: 212px;
        height: 52px;
        font-size: 15px;
        line-height: 28px
    }
}

@media(max-width:767px) {
    .club__chara__balloon {
        margin: 6.4vw 0 0;
        width: 56.5333333333vw;
        height: 13.8666666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.club__chara__balloon:before {
    position: absolute;
    bottom: 0;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 12px solid #fff
}

@media(max-width:767px) {
    .club__chara__balloon:before {
        border-bottom: 3.2vw solid #fff
    }
}

.club__chara__image {
    position: absolute;
    bottom: 10px
}

.club__chara__item--01 {
    padding-left: 220px
}

@media(max-width:1023px) {
    .club__chara__item--01 {
        position: relative;
        padding-left: 90px
    }
}

@media(max-width:767px) {
    .club__chara__item--01 {
        position: relative;
        padding-left: 24vw
    }
}

.club__chara__item--01 .club__chara__balloon {
    left: -20px;
    border-radius: 20px 20px 20px 0
}

@media(max-width:1023px) {
    .club__chara__item--01 .club__chara__balloon {
        left: 0;
        border-radius: 20px 20px 20px 0
    }
}

@media(max-width:767px) {
    .club__chara__item--01 .club__chara__balloon {
        left: 0;
        border-radius: 5.3333333333vw 5.3333333333vw 5.3333333333vw 0
    }
}

.club__chara__item--01 .club__chara__balloon:before {
    left: -12px;
    border-top: none;
    border-right: none;
    border-left: 12px solid transparent
}

@media(max-width:1023px) {
    .club__chara__item--01 .club__chara__balloon:before {
        left: -12px;
        border-left: 12px solid transparent
    }
}

@media(max-width:767px) {
    .club__chara__item--01 .club__chara__balloon:before {
        left: -3.2vw;
        border-left: 3.2vw solid transparent
    }
}

.club__chara__item--01 .club__chara__image {
    left: 20px;
    width: 150px;
    height: 150px
}

@media(max-width:1023px) {
    .club__chara__item--01 .club__chara__image {
        left: 10px;
        width: 66px;
        height: 71px;
        bottom: -30px
    }
}

@media(max-width:767px) {
    .club__chara__item--01 .club__chara__image {
        left: 2.6666666667vw;
        width: 17.6vw;
        height: 18.9333333333vw;
        bottom: 1.3333333333vw
    }
}

.club__chara__item--02 {
    padding-right: 220px
}

@media(max-width:1023px) {
    .club__chara__item--02 {
        height: 72px;
        padding-right: 0;
        padding-left: 10px
    }
}

@media(max-width:767px) {
    .club__chara__item--02 {
        height: auto;
        padding-right: 0;
        padding-left: 2.6666666667vw
    }
}

.club__chara__item--02 .club__chara__balloon {
    border-radius: 20px 20px 0 20px;
    right: -40px
}

@media(max-width:1023px) {
    .club__chara__item--02 .club__chara__balloon {
        position: absolute;
        right: 86px;
        border-radius: 20px 20px 0 20px
    }
}

@media(max-width:767px) {
    .club__chara__item--02 .club__chara__balloon {
        position: relative;
        right: 0;
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw
    }
}

.club__chara__item--02 .club__chara__balloon:before {
    right: -12px;
    border-top: none;
    border-left: none;
    border-right: 12px solid transparent
}

@media(max-width:1023px) {
    .club__chara__item--02 .club__chara__balloon:before {
        right: -12px;
        border-right: 12px solid transparent
    }
}

@media(max-width:767px) {
    .club__chara__item--02 .club__chara__balloon:before {
        right: -3.2vw;
        border-right: 3.2vw solid transparent
    }
}

.club__chara__item--02 .club__chara__image {
    right: 0;
    width: 150px;
    height: 150px
}

@media(max-width:1023px) {
    .club__chara__item--02 .club__chara__image {
        width: 72px;
        height: 72px;
        right: 0;
        bottom: -10px
    }
}

@media(max-width:767px) {
    .club__chara__item--02 .club__chara__image {
        width: 19.2vw;
        height: 19.2vw;
        right: 0;
        bottom: 5.3333333333vw
    }
}

.club__option {
    position: relative;
    margin: 40px 100px 0;
    padding-bottom: 60px;
    border-top: 1px solid #ccc
}

@media(max-width:767px) {
    .club__option {
        margin: 40px 5.3333333333vw 0;
        padding-bottom: 8vw
    }
}

.club__option .club__price {
    width: 640px
}

@media(max-width:767px) {
    .club__option .club__price {
        width: 100%
    }
}

.club__option .club__price__header {
    width: 162px;
    height: 40px;
    border-radius: 10px;
    background: #f5f5f5
}

@media(max-width:767px) {
    .club__option .club__price__header {
        width: 37.8666666667vw;
        height: 10.1333333333vw;
        border-radius: 2.6666666667vw;
        font-weight: 400;
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 5.8666666667vw;
        text-align: center;
        color: #222
    }
}

@media(max-width:767px) {
    .club__option .club__price__body {
        -webkit-box-flex: 0;
        flex: 0 1 40%;
        text-align: center
    }
}

.club__option .club__price__value {
    font-weight: 500;
    font-size: 30px;
    letter-spacing: .05em;
    text-align: right;
    color: #707070
}

@media(max-width:767px) {
    .club__option .club__price__value {
        font-size: 6.1333333333vw;
        text-align: center
    }
}

.club__option .club__price__item {
    -webkit-box-align: center;
    align-items: center
}

.club__option .club__price__item:first-child {
    -webkit-box-flex: 0;
    flex: 0 1 46%
}

.club__option .club__price__item:last-child {
    -webkit-box-flex: 0;
    flex: 0 1 47%
}

.club__option__header {
    position: absolute;
    text-align: center;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
    width: 206px;
    height: 40px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ccc;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 32px;
    color: #222
}

@media(max-width:767px) {
    .club__option__header {
        top: -3.7333333333vw;
        width: 44vw;
        height: 7.4666666667vw;
        border-radius: 3.7333333333vw;
        background: #fff;
        border: 1px solid #ccc;
        font-size: 3.2vw;
        line-height: 7.4666666667vw;
        color: #222
    }
}

.contact {
    padding: 60px 160px;
    background-color: #fff;
    border-radius: 10px
}

@media(max-width:1359px) {
    .contact {
        padding: 60px
    }
}

@media(max-width:767px) {
    .contact {
        padding: 8vw 5.3333333333vw 16vw
    }
}

.contact__flow {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.contact__flow svg {
    margin: 0 14px
}

@media(max-width:767px) {
    .contact__flow svg {
        margin: 0 2.1333333333vw
    }
}

.contact__flow svg path {
    fill: #a5a5a5
}

.contact__flow__item {
    width: 140px;
    padding: 0 16px;
    height: 36px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background-color: #f0eefd;
    border-radius: 5px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left
}

@media(max-width:767px) {
    .contact__flow__item {
        display: block;
        width: 22.4vw;
        height: 12.8vw;
        padding: 2.1333333333vw 2.9333333333vw;
        font-size: 3.4666666667vw;
        line-height: 6.72vw
    }
}

.contact__flow__item small {
    position: relative;
    top: 1px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left
}

@media(max-width:767px) {
    .contact__flow__item small {
        top: .2666666667vw;
        font-size: 2.6666666667vw;
        letter-spacing: .05em;
        display: block
    }
}

.contact__flow__item.is-current {
    background-color: #6c5ded;
    color: #fff
}

.contact__description {
    margin-top: 40px;
    max-width: 640px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .contact__description {
        margin-top: 8vw;
        height: auto;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw
    }
}

.contact__description a {
    color: #6c5ded;
    text-decoration: underline
}

.contact__description a:hover {
    opacity: .8
}

.contact__body {
    margin-top: 40px
}

.contact__completed {
    margin: 60px -40px 0
}

@media(max-width:767px) {
    .contact__completed {
        margin: 8vw 0 0
    }
}

.contact__completed__header {
    position: relative;
    height: 155px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:767px) {
    .contact__completed__header {
        margin: 0 -2.6666666667vw;
        padding: 35px 0 0;
        height: auto
    }
}

.contact__completed__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center;
    color: #222
}

.contact__completed__discription {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .contact__completed__discription {
        margin-top: 6.4vw;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        -moz-text-align-last: left;
        text-align-last: left;
        text-align: left
    }
}

.contact__completed__discription>p {
    margin: 2em 0 0
}

.contact__completed__discription>p:first-child {
    margin: 0
}

.contact__completed__copy {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

.contact__completed__link {
    width: 244px;
    margin: 40px auto 0
}

@media(max-width:767px) {
    .contact__completed__link {
        margin: 8vw auto 0;
        width: auto;
        text-align: center
    }
}

.contact__image {
    position: absolute;
    top: 0
}

@media(max-width:767px) {
    .contact__image {
        top: auto;
        bottom: 1.0666666667vw
    }
}

.contact__image--a1 {
    right: 100px;
    width: 116.99px;
    height: 116.99px
}

@media(max-width:767px) {
    .contact__image--a1 {
        right: 0;
        width: 10.6666666667vw;
        height: 10.6666666667vw
    }
}

.contact__image--a2 {
    left: 100px;
    width: 105.89px;
    height: 105.89px
}

@media(max-width:767px) {
    .contact__image--a2 {
        left: 0;
        width: 10.6666666667vw;
        height: 10.6666666667vw
    }
}

.contact__present {
    margin-top: 30px;
    position: relative;
    width: 100%;
    border-radius: 10px;
    background: #f7f5ff;
    opacity: 1;
    padding: 20px 30px
}

@media(max-width:767px) {
    .contact__present {
        margin-top: 8vw;
        padding: 5.3333333333vw 4vw
    }
}

.contact__present>p {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .contact__present>p {
        font-size: 3.4666666667vw;
        line-height: 6.72vw
    }
}

.contact__present img {
    position: absolute;
    bottom: -30px;
    right: -40px;
    width: 187.58px;
    height: auto
}

@media(max-width:767px) {
    .contact__present img {
        width: 29.072vw;
        height: 21.5093333333vw;
        top: -5.3333333333vw;
        bottom: auto;
        right: -1.3333333333vw
    }
}

.contact__completed__gift {
    margin-top: 40px
}

.contact__gift {
    max-width: 720px;
    padding: 37px 0 40px;
    margin: auto;
    border-radius: 10px;
    background: #f7f5ff
}

@media(max-width:767px) {
    .contact__gift {
        width: 100%
    }
}

.contact__gift__copy {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: center
}

@media(max-width:767px) {
    .contact__gift__copy {
        font-size: 3.4666666667vw;
        line-height: 6.72vw
    }
}

.contact__gift__title {
    margin-top: 13px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: center;
    color: #eb4d9c
}

@media(max-width:767px) {
    .contact__gift__title {
        margin-top: 1.6vw;
        font-size: 4vw;
        line-height: 6.4vw
    }
}

.contact__gift__title b {
    position: relative;
    z-index: 2;
    margin-top: 14px;
    display: block;
    font-weight: 700;
    font-size: 38px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: center;
    color: #eb4d9c
}

@media(max-width:767px) {
    .contact__gift__title b {
        margin-top: -.2666666667vw;
        font-size: 6.9333333333vw;
        line-height: 13.3333333333vw
    }
}

.contact__gift__title b:before {
    margin: auto;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
    content: " ";
    display: block;
    width: 380px;
    height: 8px;
    background: #fffbe1
}

@media(max-width:767px) {
    .contact__gift__title b:before {
        font-size: 6.9333333333vw;
        line-height: 13.3333333333vw;
        width: 64vw;
        height: 1.6vw;
        bottom: 1.3333333333vw
    }
}

.contact__gift__image {
    margin: -70px 0 -55px;
    text-align: center
}

@media(max-width:767px) {
    .contact__gift__image {
        margin: -37px 0 -27px
    }
}

.contact__gift__description {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: center
}

@media(max-width:767px) {
    .contact__gift__description {
        font-size: 3.7333333333vw;
        line-height: 6.72vw;
        padding: 0 5.3333333333vw
    }
}

.contact__gift__flow {
    margin-top: 30px;
    display: -webkit-box;
    display: flex;
    padding: 0 51px;
    -webkit-box-align: center;
    align-items: center;
    height: 100%;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .contact__gift__flow {
        margin-top: 8vw;
        padding: 0 12.5333333333vw;
        display: block
    }
}

@media(max-width:767px) {
    .contact__gift__flow svg {
        display: block;
        margin: 2.6666666667vw auto;
        height: 4vw;
        width: 2.6666666667vw;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

.contact__gift__flow svg path {
    fill: #6c5ded
}

.contact__gift__item {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 1 186px;
    height: 100%;
    background: #fff;
    border-radius: 10px
}

@media(max-width:767px) {
    .contact__gift__item {
        border-radius: 2.6666666667vw
    }
}

.contact__gift__item__step {
    position: absolute;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 64px;
    height: 23px;
    border-radius: 10px 0 10px 0;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    text-align: left;
    color: #fff
}

@media(max-width:767px) {
    .contact__gift__item__step {
        width: 17.0666666667vw;
        height: 6.1333333333vw;
        font-size: 2.6666666667vw;
        border-radius: 2.6666666667vw 0 2.6666666667vw 0
    }
}

.contact__gift__item__title {
    padding: 33px 15px 11px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 22px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .contact__gift__item__title {
        padding: 8.8vw 4vw 2.9333333333vw;
        font-size: 3.7333333333vw;
        line-height: 5.8666666667vw
    }
}

.contact__gift__item__image {
    height: 124px
}

@media(max-width:767px) {
    .contact__gift__item__image {
        height: auto
    }
    .contact__gift__item__image img {
        width: 100%;
        height: auto
    }
}

.contact__gift__button {
    width: 150px;
    padding: 10px 0 0;
    margin: auto
}

.contact__gift__button:first-child {
    padding-top: 20px
}

@media(max-width:767px) {
    .contact__gift__button {
        padding: 2.6666666667vw 0 0
    }
    .contact__gift__button:first-child {
        padding-top: 5.3333333333vw
    }
    .contact__gift__button:last-child {
        padding-bottom: 7.4666666667vw
    }
}

.contact__gift__button>a {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 150px;
    height: 36px;
    border-radius: 18px;
    box-shadow: 0 3px 10px rgba(90, 90, 90, .2);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #fff
}

@media(max-width:767px) {
    .contact__gift__button>a {
        width: 100%;
        height: 9.6vw;
        border-radius: 4.8vw;
        box-shadow: 0 .8vw 2.6666666667vw rgba(90, 90, 90, .2);
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 8vw
    }
}

.contact__gift__button--twitter>a {
    background: #1da1f2
}

.contact__gift__button--line>a {
    background: #06c755
}

.cv-form {
    position: relative;
    border-radius: 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe0f8), to(#a9c9ff));
    background: linear-gradient(#ffe0f8, #a9c9ff);
    padding: 0 10px 10px
}

@media(max-width:767px) {
    .cv-form {
        padding: 0 2.6666666667vw 2.6666666667vw
    }
}

.cv-form__image {
    position: absolute
}

.cv-form__image--a1 {
    top: -21.42px;
    right: 35px;
    width: 91.42px;
    height: 91.42px
}

@media(max-width:767px) {
    .cv-form__image--a1 {
        top: 2.1333333333vw;
        right: 1.6vw;
        width: 13.64vw;
        height: 13.64vw
    }
}

.cv-form__image--a2 {
    top: -13.98px;
    left: 35px;
    width: 83.98px;
    height: 83.98px
}

@media(max-width:767px) {
    .cv-form__image--a2 {
        top: 1.6vw;
        left: 1.6vw;
        width: 13.928vw;
        height: 13.928vw
    }
}

.cv-form__header {
    padding: 11px 0;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .cv-form__header {
        padding: 3.7333333333vw 0;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.cv-form__body {
    position: relative;
    padding: 40px 70px;
    z-index: 2;
    background-color: #fff;
    border-radius: 10px
}

@media(max-width:767px) {
    .cv-form__body {
        padding: 6.9333333333vw 2.6666666667vw 8vw
    }
}

.cv-form__merit {
    width: 100%;
    padding: 30px;
    margin: auto;
    border-radius: 10px;
    background: rgba(252, 223, 248, .3)
}

@media(max-width:767px) {
    .cv-form__merit {
        padding: 5.3333333333vw;
        border-radius: 2.6666666667vw
    }
}

.cv-form__merit ul li {
    padding-left: 30px;
    position: relative;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .cv-form__merit ul li {
        padding-left: 8vw;
        font-size: 4vw;
        line-height: 8vw
    }
}

.cv-form__merit ul li:before {
    position: absolute;
    z-index: 2;
    top: -4px;
    left: 3px;
    content: "\2714";
    display: block;
    color: #eb4d9c;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .cv-form__merit ul li:before {
        top: -1.0666666667vw;
        left: .8vw;
        font-size: 6.4vw;
        line-height: 8vw
    }
}

.cv-form__merit ul li:after {
    position: absolute;
    top: 7px;
    left: 0;
    content: " ";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: #fff;
    border: 1px solid #ccc
}

@media(max-width:767px) {
    .cv-form__merit ul li:after {
        top: 1.8666666667vw;
        left: 0;
        width: 4.8vw;
        height: 4.8vw;
        border-radius: .5333333333vw
    }
}

.cv-form__merit__header {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #eb4d9c
}

@media(max-width:767px) {
    .cv-form__merit__header {
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.cv-form__form {
    margin-top: 30px
}

@media(max-width:767px) {
    .cv-form__form {
        margin-top: 5.3333333333vw
    }
}

.documents {
    background-color: #fff;
    padding: 60px 120px;
    border-radius: 10px;
    -webkit-filter: drop-shadow(0 3px 30px rgba(90, 90, 90, .2));
    filter: drop-shadow(0 3px 30px rgba(90, 90, 90, .2))
}

@media(max-width:767px) {
    .documents {
        padding: 8vw 5.3333333333vw 5.3333333333vw;
        border-radius: 0;
        box-shadow: none
    }
}

.documents__header {
    padding: 30px;
    border-radius: 10px;
    background-color: rgba(108, 93, 237, .1);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .documents__header {
        padding: 5.3333333333vw;
        border-radius: 2.6666666667vw;
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.documents--term .documents__section>h2 {
    padding-left: 70px
}

@media(max-width:767px) {
    .documents--term .documents__section>h2 {
        padding-left: 16vw
    }
}

.documents--term .documents__section:nth-child(n+11)>h2 {
    padding-left: 80px
}

@media(max-width:767px) {
    .documents--term .documents__section:nth-child(n+11)>h2 {
        padding-left: 18.6666666667vw
    }
}

.documents--term .documents__section ol li {
    display: -webkit-box;
    display: flex;
    list-style: none
}

.documents--term .list-number {
    min-width: 40px
}

.documents__section>h2 {
    margin-top: 40px;
    position: relative;
    padding-left: 33px;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 37.8px;
    text-align: left;
    color: #222;
    border-bottom: 2px solid #6c5ded
}

@media(max-width:767px) {
    .documents__section>h2 {
        margin-top: 5.3333333333vw;
        padding-left: 6.4vw;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.documents__section>h2>small {
    position: absolute;
    top: 0;
    left: 0;
    color: #6c5ded
}

.documents__section>p {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .documents__section>p {
        margin-top: 4vw;
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.documents__section>ul {
    margin-top: 20px
}

@media(max-width:767px) {
    .documents__section>ul {
        margin-top: 4vw
    }
}

.documents__section>ul>li {
    position: relative;
    padding-left: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .documents__section>ul>li {
        padding-left: 5.3333333333vw;
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.documents__section>ul>li:before {
    position: absolute;
    top: 10px;
    left: 0;
    content: "\25CF";
    display: block;
    width: 20px;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left;
    color: #ccc
}

@media(max-width:767px) {
    .documents__section>ul>li:before {
        top: 2.6666666667vw;
        width: 5.3333333333vw;
        font-size: 2.6666666667vw
    }
}

.documents__section>ol {
    margin-top: 20px
}

@media(max-width:767px) {
    .documents__section>ol {
        margin-top: 4vw
    }
}

.documents__section>ol>li {
    margin-left: 20px;
    list-style-type: upper-alpha;
    list-style-position: outside;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .documents__section>ol>li {
        margin-left: 5.3333333333vw;
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.documents__footer {
    margin-top: 54px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: right;
    color: #a5a5a5
}

@media(max-width:767px) {
    .documents__footer {
        margin-top: 6.4vw;
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 6.4vw
    }
}

@-webkit-keyframes draw {
    to {
        stroke-dashoffset: 0px
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0px
    }
}

.draw {
    position: relative;
    width: 799px;
    height: 647.35px
}

@media(max-width:767px) {
    .draw {
        width: 110.1333333333vw;
        height: 103.824vw
    }
}

.draw svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 0
}

.draw svg polyline {
    stroke-dasharray: 12000px;
    stroke-dashoffset: 12000px
}

.draw.is-enter svg {
    -webkit-transition: opacity 1.5s linear;
    transition: opacity 1.5s linear;
    opacity: 1
}

.draw.is-enter svg polyline {
    -webkit-animation: draw 1.5s cubic-bezier(.53, .165, .325, .96) normal forwards;
    animation: draw 1.5s cubic-bezier(.53, .165, .325, .96) normal forwards
}

.draw--index {
    width: 1080.37px;
    height: 898.79px
}

@media(max-width:767px) {
    .draw--index {
        width: 110.1333333333vw;
        height: 103.824vw
    }
}

[data-theme-color=purple] .draw svg .st0 {
    stroke: url(#purple)
}

[data-theme-color=green] .draw svg .st0 {
    stroke: url(#green)
}

[data-theme-color=pink] .draw svg .st0 {
    stroke: url(#pink)
}

[data-theme-color=orange] .draw svg .st0 {
    stroke: url(#orange)
}

[data-theme-color=blue] .draw svg .st0 {
    stroke: url(#blue)
}

[data-theme-color=yellow] .draw svg .st0 {
    stroke: url(#yellow)
}

[data-theme-color=line] .draw svg .st0 {
    stroke: url(#line)
}

.experience-link-list {
    display: -webkit-box;
    display: flex;
    margin: -20px -10px 0;
    flex-wrap: wrap
}

@media(max-width:767px) {
    .experience-link-list {
        display: block;
        margin: 0
    }
}

.experience-link-list__item {
    -webkit-box-flex: 0;
    flex: 0 1 33.3333%;
    padding: 0 10px;
    margin-top: 20px
}

@media(max-width:767px) {
    .experience-link-list__item {
        margin-top: 5.3333333333vw;
        padding: 0
    }
}

.experience-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    overflow: hidden;
    -webkit-transition: box-shadow .3s linear;
    transition: box-shadow .3s linear
}

@media(max-width:767px) {
    .experience-link {
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.experience-link:before {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.experience-link:hover {
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

.experience-link:hover:before {
    opacity: 1
}

.experience-link:hover .experience-link__thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.experience-link:hover .experience-link__thumb:before {
    opacity: .3
}

.experience-link__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6666666667%;
    overflow: hidden
}

.experience-link__thumb:before {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(125deg, #ff76ef, #fa383c);
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.experience-link__thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    display: block
}

.experience-link__body {
    padding: 20px 20px 30px
}

@media(max-width:767px) {
    .experience-link__body {
        padding: 5.9466666667vw 5.3333333333vw 8vw
    }
}

.experience-link__date {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 1;
    text-align: left;
    color: #a5a5a5
}

.experience-link__title {
    margin-top: 10px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .experience-link__title {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.experience-link__person {
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media(max-width:767px) {
    .experience-link__person {
        margin-top: 5.3333333333vw
    }
}

.experience-link__icon {
    margin-right: 12px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden
}

@media(max-width:767px) {
    .experience-link__icon {
        margin-right: 2.9333333333vw;
        width: 16vw;
        height: 16vw
    }
}

.experience-link__cat {
    padding: 0 10px;
    border-radius: 14px;
    background: #f2f2f2;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 12px;
    line-height: 28px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .experience-link__cat {
        padding: 0 2.6666666667vw;
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.experience-link__name {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .experience-link__name {
        font-size: 5.3333333333vw;
        line-height: 8.5333333333vw
    }
}

.experience-link__name small {
    margin-left: 5px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .experience-link__name small {
        margin-left: 1.0666666667vw;
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.experience-link--purple .experience-link__thumb:before,
[data-theme-color=purple] .experience-link__thumb:before {
    background-image: linear-gradient(125deg, #f790e0, #4c88ed)
}

.experience-link--green .experience-link__thumb:before,
[data-theme-color=green] .experience-link__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.experience-link--pink .experience-link__thumb:before,
[data-theme-color=pink] .experience-link__thumb:before {
    background-image: linear-gradient(125deg, #ff76ef, #fa383c)
}

.experience-link--orange .experience-link__thumb:before,
[data-theme-color=orange] .experience-link__thumb:before {
    background-image: linear-gradient(125deg, #fa5562, #ffa234)
}

.experience-link--blue .experience-link__thumb:before,
[data-theme-color=blue] .experience-link__thumb:before {
    background-image: linear-gradient(125deg, #5192ea, #45cddc)
}

.experience-link--yellow .experience-link__thumb:before,
[data-theme-color=yellow] .experience-link__thumb:before {
    background-image: linear-gradient(125deg, #ffdd4d, #f49c10)
}

.experience-link--line .experience-link__thumb:before,
[data-theme-color=line] .experience-link__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.fade-in {
    opacity: 0
}

.is-enter .fade-in {
    opacity: 1;
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96)
}

.is-enter .fade-in.fade--delay-01,
.is-enter .fade-in.fade--delay-01 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .1s
}

.is-enter .fade-in.fade--delay-02,
.is-enter .fade-in.fade--delay-02 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .2s
}

.is-enter .fade-in.fade--delay-03,
.is-enter .fade-in.fade--delay-03 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .3s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .3s
}

.is-enter .fade-in.fade--delay-04,
.is-enter .fade-in.fade--delay-04 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .4s
}

.is-enter .fade-in.fade--delay-05,
.is-enter .fade-in.fade--delay-05 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .5s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .5s
}

.is-enter .fade-in.fade--delay-06,
.is-enter .fade-in.fade--delay-06 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .6s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .6s
}

.is-enter .fade-in.fade--delay-07,
.is-enter .fade-in.fade--delay-07 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .7s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .7s
}

.is-enter .fade-in.fade--delay-08,
.is-enter .fade-in.fade--delay-08 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .8s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .8s
}

.is-enter .fade-in.fade--delay-09,
.is-enter .fade-in.fade--delay-09 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .9s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) .9s
}

.is-enter .fade-in.fade--delay-010,
.is-enter .fade-in.fade--delay-010 .fade__inner,
.is-enter .fade-in.fade--delay-10,
.is-enter .fade-in.fade--delay-10 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1s
}

.is-enter .fade-in.fade--delay-11,
.is-enter .fade-in.fade--delay-11 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.1s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.1s
}

.is-enter .fade-in.fade--delay-12,
.is-enter .fade-in.fade--delay-12 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.2s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.2s
}

.is-enter .fade-in.fade--delay-13,
.is-enter .fade-in.fade--delay-13 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.3s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.3s
}

.is-enter .fade-in.fade--delay-14,
.is-enter .fade-in.fade--delay-14 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.4s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.4s
}

.is-enter .fade-in.fade--delay-15,
.is-enter .fade-in.fade--delay-15 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.5s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.5s
}

.is-enter .fade-in.fade--delay-16,
.is-enter .fade-in.fade--delay-16 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.6s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.6s
}

.is-enter .fade-in.fade--delay-17,
.is-enter .fade-in.fade--delay-17 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.7s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.7s
}

.is-enter .fade-in.fade--delay-18,
.is-enter .fade-in.fade--delay-18 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.8s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.8s
}

.is-enter .fade-in.fade--delay-19,
.is-enter .fade-in.fade--delay-19 .fade__inner {
    -webkit-transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.9s;
    transition: opacity .3s cubic-bezier(.53, .165, .325, .96) 1.9s
}

.faq-anchor {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:767px) {
    .faq-anchor {
        -webkit-box-pack: start;
        justify-content: flex-start
    }
}

.faq-anchor__item {
    margin: 0 15px;
    width: auto
}

@media(max-width:767px) {
    .faq-anchor__item {
        margin: 0 2.6666666667vw
    }
}

.faq-anchor__item>a {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: center
}

.faq-anchor__item>a:hover {
    color: #6c5ded
}

@media(max-width:767px) {
    .faq-anchor__item>a {
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.faq-anchor__item>a svg {
    display: block;
    margin: auto;
    width: 7.73px;
    height: 5.44px
}

.faq-anchor__item>a svg path {
    fill: #6c5ded
}

@media(max-width:767px) {
    .faq-anchor__item>a svg {
        margin-top: 1.6vw;
        width: 2.0613333333vw;
        height: 1.4506666667vw
    }
}

.faq-anchor__next {
    display: none;
    position: absolute;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    z-index: 5;
    top: 0;
    right: 3.2vw;
    bottom: 0;
    margin: auto;
    width: 9.6vw;
    height: 9.6vw;
    background: #fff;
    border: 1px solid #6c5ded;
    -webkit-filter: drop-shadow(0 3px 3px rgba(90, 90, 90, .2));
    filter: drop-shadow(0 3px 3px rgba(90, 90, 90, .2));
    border-radius: 50%
}

@media(max-width:767px) {
    .faq-anchor__next {
        display: -webkit-box;
        display: flex
    }
}

.faq-anchor__next svg path {
    fill: #6c5ded
}

.faq-header {
    padding: 27px 0;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #ef3e4c;
    background-color: rgba(239, 62, 76, .1)
}

@media(max-width:767px) {
    .faq-header {
        padding: 4.8vw 5.3333333333vw;
        font-weight: 700;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

[data-theme-color=purple] .faq-header {
    color: #6c5ded;
    background-color: rgba(108, 93, 237, .1)
}

[data-theme-color=green] .faq-header,
[data-theme-color=purple] .faq-header {
    padding: 27px 0;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

[data-theme-color=green] .faq-header {
    color: #2cc697;
    background-color: rgba(44, 198, 151, .1)
}

[data-theme-color=pink] .faq-header {
    color: #eb4d9c;
    background-color: rgba(235, 77, 156, .1)
}

[data-theme-color=orange] .faq-header,
[data-theme-color=pink] .faq-header {
    padding: 27px 0;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

[data-theme-color=orange] .faq-header {
    color: #ef3e4c;
    background-color: rgba(239, 62, 76, .1)
}

[data-theme-color=blue] .faq-header {
    color: #33b6dd;
    background-color: rgba(51, 182, 221, .1)
}

[data-theme-color=blue] .faq-header,
[data-theme-color=yellow] .faq-header {
    padding: 27px 0;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

[data-theme-color=yellow] .faq-header {
    color: #fc9e1d;
    background-color: rgba(252, 158, 29, .1)
}

[data-theme-color=line] .faq-header {
    padding: 27px 0;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #06c755;
    background-color: rgba(6, 199, 85, .1)
}

.faq__content {
    margin-top: 30px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .faq__content {
        margin-top: 5.3333333333vw;
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.faq__icon {
    position: absolute;
    top: 32px;
    right: 34px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    box-shadow: none;
    border: 1px solid #2cc697
}

@media(max-width:767px) {
    .faq__icon {
        top: 8vw;
        right: 8vw;
        width: 5.3333333333vw;
        height: 5.3333333333vw
    }
}

.faq__icon span {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 8px;
    height: 1px;
    background-color: #2cc697
}

@media(max-width:767px) {
    .faq__icon span {
        width: 2.1333333333vw
    }
}

.faq__icon span:nth-child(2) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.faq__text {
    position: relative;
    padding: 30px 80px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .faq__text {
        padding: 8vw 18.6666666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.faq__text:before {
    position: absolute;
    top: 31px;
    left: 40px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left
}

@media(max-width:767px) {
    .faq__text:before {
        top: 8.8vw;
        left: 7.4666666667vw;
        font-weight: 500;
        font-size: 5.3333333333vw
    }
}

.faq__q {
    position: relative
}

.faq__q>.faq__text:before {
    content: "Q.";
    color: #a5a5a5
}

.faq__a {
    display: block;
    overflow: hidden;
    height: 0
}

.faq__a>.faq__text {
    background-color: #f5f5f5
}

.faq__a>.faq__text a {
    color: #6c5ded;
    text-decoration: underline
}

.faq__a>.faq__text a:hover {
    opacity: .8
}

@media(max-width:767px) {
    .faq__a>.faq__text {
        padding: 8vw 8vw 8vw 18.6666666667vw
    }
}

.faq__a>.faq__text:before {
    content: "A.";
    color: #2cc697
}

.faq__content.is-open .faq__icon span:nth-child(2) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.faq--often {
    padding-bottom: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .faq--often {
        padding-bottom: 20px;
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.faq--often .faq__header {
    margin-left: 60px;
    width: 153px;
    height: 57px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 0 0 10px 10px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    background: rgba(239, 62, 76, .1);
    color: #ef3e4c
}

@media(max-width:767px) {
    .faq--often .faq__header {
        display: none
    }
}

.faq--often .faq__content {
    margin-top: 0;
    box-shadow: none
}

.faq--often .faq__text {
    background: transparent
}

@media(max-width:767px) {
    .faq--often .faq__text {
        padding: 8vw 13.3333333333vw
    }
}

@media(max-width:767px) {
    .faq--often .faq__text:before {
        top: 8.8vw;
        left: 5.3333333333vw;
        font-weight: 500;
        font-size: 5.3333333333vw
    }
}

.faq--often .faq__icon {
    display: none
}

.faq--often .faq__q {
    padding-left: 30px;
    padding-right: 30px
}

@media(max-width:767px) {
    .faq--often .faq__q {
        padding-left: 0;
        padding-right: 0
    }
}

.faq--often .faq__q>.faq__text {
    padding-bottom: 0;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 30px;
    color: #ef3e4c
}

.faq--often .faq__q>.faq__text:before {
    color: #ef3e4c
}

.faq--often .faq__a {
    padding-left: 30px;
    padding-right: 30px;
    height: auto!important
}

@media(max-width:767px) {
    .faq--often .faq__a {
        padding-left: 0;
        padding-right: 0
    }
}

.faq--often .faq__a>.faq__text {
    margin-top: -8px;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 30px;
    color: #707070
}

@media(max-width:767px) {
    .faq--often .faq__a>.faq__text {
        font-size: 4.5333333333vw;
        line-height: 8vw
    }
}

.faq--often .faq__a>.faq__text small {
    margin-top: 10px;
    display: block;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #707070
}

@media(max-width:767px) {
    .faq--often .faq__a>.faq__text small {
        margin-top: 2.6666666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.faq--often .faq__a>.faq__text:before {
    color: #707070
}

.faq--archive .faq__content {
    border-top: 1px solid hsla(0, 0%, 80%, .5);
    margin: 0;
    padding-bottom: 20px;
    box-shadow: none;
    border-radius: 0
}

@media(max-width:767px) {
    .faq--archive .faq__content {
        padding-bottom: 5.3333333333vw
    }
}

.faq--archive .faq__content.is-open .faq__q>.faq__text {
    color: #6c5ded
}

.faq--archive .faq__q>.faq__text {
    padding: 30px 80px 10px
}

@media(max-width:767px) {
    .faq--archive .faq__q>.faq__text {
        padding: 8vw 18.6666666667vw 2.6666666667vw
    }
}

.faq--archive .faq__q>.faq__text:before {
    color: #6c5ded
}

.faq--archive .faq__a>.faq__text {
    padding-top: 0;
    background-color: #fff;
    color: #707070
}

.faq--archive .faq__a>.faq__text:before {
    display: none
}

.faq--online {
    padding: 0 60px
}

@media(max-width:767px) {
    .faq--online {
        padding: 0;
        margin: 0 -5.3333333333vw
    }
}

.faq--online .faq__content {
    margin-top: 0;
    padding-bottom: 36px;
    border-bottom: 1px solid #ccc;
    box-shadow: none;
    border-radius: 0
}

.faq--online .faq__content:first-child {
    border-top: 1px solid #ccc
}

.faq--online .faq__icon {
    top: 38px;
    background: transparent;
    box-shadow: none;
    border: none
}

@media(max-width:767px) {
    .faq--online .faq__icon {
        top: 10.1333333333vw
    }
}

.faq--online .faq__icon span {
    width: 17px;
    height: 2px
}

@media(max-width:767px) {
    .faq--online .faq__icon span {
        width: 4.5333333333vw;
        height: .5333333333vw
    }
}

.faq--online .faq__q {
    z-index: 2
}

.faq--online .faq__q .faq__text {
    padding: 36px 97px 0;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .faq--online .faq__q .faq__text {
        padding: 36px 18.5333333333vw 0;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.faq--online .faq__q .faq__text:before {
    left: 30px;
    content: "Q";
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    font-size: 21px;
    background-image: linear-gradient(125deg, #fa5562, #ffa234)
}

@media(max-width:767px) {
    .faq--online .faq__q .faq__text:before {
        left: 5.3333333333vw;
        width: 9.0666666667vw;
        height: 9.0666666667vw;
        border-radius: 50%;
        font-size: 4.2666666667vw
    }
}

.faq--online .faq__a .faq__text {
    padding: 25px 97px 0;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #707070;
    background-color: #fff
}

@media(max-width:767px) {
    .faq--online .faq__a .faq__text {
        padding: 25px 20px 0 18.5333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.faq--online .faq__a .faq__text:before {
    display: none
}

[data-theme-color=purple] .faq__icon {
    border-color: #6c5ded
}

[data-theme-color=purple] .faq__icon span {
    background-color: #6c5ded
}

[data-theme-color=purple] .faq--archive .faq__content.is-open .faq__q>.faq__text,
[data-theme-color=purple] .faq__a>.faq__text:before {
    color: #6c5ded
}

[data-theme-color=purple] .faq--archive .faq__q>.faq__text:before {
    color: #6c5ded;
    top: 34px
}

@media(max-width:767px) {
    [data-theme-color=purple] .faq--archive .faq__q>.faq__text:before {
        top: 8.8vw
    }
}

[data-theme-color=green] .faq__icon {
    border-color: #2cc697
}

[data-theme-color=green] .faq__icon span {
    background-color: #2cc697
}

[data-theme-color=green] .faq--archive .faq__content.is-open .faq__q>.faq__text,
[data-theme-color=green] .faq__a>.faq__text:before {
    color: #2cc697
}

[data-theme-color=green] .faq--archive .faq__q>.faq__text:before {
    color: #2cc697;
    top: 34px
}

@media(max-width:767px) {
    [data-theme-color=green] .faq--archive .faq__q>.faq__text:before {
        top: 8.8vw
    }
}

[data-theme-color=pink] .faq__icon {
    border-color: #eb4d9c
}

[data-theme-color=pink] .faq__icon span {
    background-color: #eb4d9c
}

[data-theme-color=pink] .faq--archive .faq__content.is-open .faq__q>.faq__text,
[data-theme-color=pink] .faq__a>.faq__text:before {
    color: #eb4d9c
}

[data-theme-color=pink] .faq--archive .faq__q>.faq__text:before {
    color: #eb4d9c;
    top: 34px
}

@media(max-width:767px) {
    [data-theme-color=pink] .faq--archive .faq__q>.faq__text:before {
        top: 8.8vw
    }
}

[data-theme-color=orange] .faq__icon {
    border-color: #ef3e4c
}

[data-theme-color=orange] .faq__icon span {
    background-color: #ef3e4c
}

[data-theme-color=orange] .faq--archive .faq__content.is-open .faq__q>.faq__text,
[data-theme-color=orange] .faq__a>.faq__text:before {
    color: #ef3e4c
}

[data-theme-color=orange] .faq--archive .faq__q>.faq__text:before {
    color: #ef3e4c;
    top: 34px
}

@media(max-width:767px) {
    [data-theme-color=orange] .faq--archive .faq__q>.faq__text:before {
        top: 8.8vw
    }
}

[data-theme-color=blue] .faq__icon {
    border-color: #33b6dd
}

[data-theme-color=blue] .faq__icon span {
    background-color: #33b6dd
}

[data-theme-color=blue] .faq--archive .faq__content.is-open .faq__q>.faq__text,
[data-theme-color=blue] .faq__a>.faq__text:before {
    color: #33b6dd
}

[data-theme-color=blue] .faq--archive .faq__q>.faq__text:before {
    color: #33b6dd;
    top: 34px
}

@media(max-width:767px) {
    [data-theme-color=blue] .faq--archive .faq__q>.faq__text:before {
        top: 8.8vw
    }
}

[data-theme-color=yellow] .faq__icon {
    border-color: #fc9e1d
}

[data-theme-color=yellow] .faq__icon span {
    background-color: #fc9e1d
}

[data-theme-color=yellow] .faq--archive .faq__content.is-open .faq__q>.faq__text,
[data-theme-color=yellow] .faq__a>.faq__text:before {
    color: #fc9e1d
}

[data-theme-color=yellow] .faq--archive .faq__q>.faq__text:before {
    color: #fc9e1d;
    top: 34px
}

@media(max-width:767px) {
    [data-theme-color=yellow] .faq--archive .faq__q>.faq__text:before {
        top: 8.8vw
    }
}

[data-theme-color=line] .faq__icon {
    border-color: #06c755
}

[data-theme-color=line] .faq__icon span {
    background-color: #06c755
}

[data-theme-color=line] .faq--archive .faq__content.is-open .faq__q>.faq__text,
[data-theme-color=line] .faq__a>.faq__text:before {
    color: #06c755
}

[data-theme-color=line] .faq--archive .faq__q>.faq__text:before {
    color: #06c755;
    top: 34px
}

@media(max-width:767px) {
    [data-theme-color=line] .faq--archive .faq__q>.faq__text:before {
        top: 8.8vw
    }
}

.flow-present__header {
    position: relative;
    margin-top: 80px
}

@media(max-width:1359px) {
    .flow-present__header {
        margin-top: 80px
    }
}

@media(max-width:767px) {
    .flow-present__header {
        margin-top: 16vw
    }
}

.flow-present__header:after,
.flow-present__header:before {
    position: absolute;
    bottom: 0;
    content: " ";
    display: block;
    width: 44.431px;
    height: 56.894px;
    background-image: url(../images/trial-flow/line.svg);
    background-size: cover;
    background-repeat: center center
}

@media(max-width:1359px) {
    .flow-present__header:after,
    .flow-present__header:before {
        width: 44.431px;
        height: 56.894px
    }
}

@media(max-width:767px) {
    .flow-present__header:after,
    .flow-present__header:before {
        width: 9.0666666667vw
    }
}

.flow-present__header:before {
    -webkit-transform: translate(-240px);
    transform: translate(-240px);
    left: 50%
}

@media(max-width:1359px) {
    .flow-present__header:before {
        left: 50%
    }
}

@media(max-width:767px) {
    .flow-present__header:before {
        -webkit-transform: none;
        transform: none;
        left: 0
    }
}

.flow-present__header:after {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: scaleX(-1) translate(-232px);
    transform: scaleX(-1) translate(-232px);
    right: 50%
}

@media(max-width:1359px) {
    .flow-present__header:after {
        right: 50%
    }
}

@media(max-width:767px) {
    .flow-present__header:after {
        -webkit-transform: none;
        transform: none;
        right: 0
    }
}

.flow-present__copy {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:1359px) {
    .flow-present__copy {
        font-size: 16px;
        line-height: 30px
    }
}

@media(max-width:767px) {
    .flow-present__copy {
        font-size: 3.2vw;
        line-height: 6.9333333333vw
    }
}

.flow-present__title {
    margin-top: -8px;
    position: relative;
    font-weight: 700;
    font-size: 32px;
    letter-spacing: .08em;
    line-height: 64px;
    text-align: center;
    color: #222
}

@media(max-width:1359px) {
    .flow-present__title {
        font-size: 32px;
        line-height: 64px
    }
}

@media(max-width:767px) {
    .flow-present__title {
        margin-top: -2.6666666667vw;
        font-size: 5.8666666667vw;
        line-height: 14.9333333333vw
    }
}

.flow-present__title:before {
    position: absolute;
    z-index: -1;
    bottom: 8px;
    left: 0;
    right: 0;
    margin: auto;
    content: " ";
    display: block;
    width: 318px;
    height: 12px;
    background-color: #fff8c3
}

@media(max-width:767px) {
    .flow-present__title:before {
        bottom: 2.1333333333vw;
        width: 61.7973333333vw;
        height: 2.6666666667vw
    }
}

.flow-present__content {
    margin-top: 18px;
    margin-bottom: 75px;
    padding: 20px;
    border-radius: 10px;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:767px) {
    .flow-present__content {
        margin-top: 6.9333333333vw;
        border-radius: 1.3333333333vw;
        padding: 2.6666666667vw
    }
}

.flow-present__inner {
    position: relative;
    padding: 40px 60px;
    border-radius: 10px;
    background-color: #fff
}

@media(max-width:767px) {
    .flow-present__inner {
        padding: 5.3333333333vw 2.6666666667vw
    }
}

.flow-present__illust {
    position: absolute;
    top: -73px;
    right: 41px;
    width: 85px;
    height: 131.49px
}

@media(max-width:767px) {
    .flow-present__illust {
        top: -10.6666666667vw;
        right: 8.2666666667vw;
        width: 15.3253333333vw;
        height: 23.6613333333vw
    }
}

.flow-present__balloon {
    position: absolute;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    top: -24px;
    right: 129px;
    width: 203px;
    height: 49px;
    border-radius: 20px 20px 0 20px;
    background: #fff;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #222;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .3)
}

@media(max-width:767px) {
    .flow-present__balloon {
        top: -4.8vw;
        right: 26.6666666667vw;
        width: 48.8vw;
        height: 11.7333333333vw;
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw;
        font-size: 3.2vw;
        line-height: 7.4666666667vw;
        box-shadow: 0 .8vw 8vw hsla(0, 0%, 47.5%, .3)
    }
}

.flow-present__balloon:before {
    position: absolute;
    bottom: 0;
    right: -10px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: none;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff
}

.flow-present__section {
    margin-top: 40px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: start;
    justify-content: flex-start
}

@media(max-width:767px) {
    .flow-present__section {
        margin-top: 9.3333333333vw
    }
}

.flow-present__section:first-of-type {
    margin-top: 0
}

.flow-present__section__number {
    -webkit-box-flex: 0;
    flex: 0 1 65px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin-right: 15px;
    background-image: url(../images/trial-flow/tokuten.svg);
    background-size: cover;
    background-repeat: center center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #fff
}

@media(max-width:1359px) {
    .flow-present__section__number {
        -webkit-box-flex: 1;
        flex: 1 0 65px
    }
}

@media(max-width:767px) {
    .flow-present__section__number {
        -webkit-box-flex: 1;
        flex: 1 0 17.3333333333vw;
        width: 17.3333333333vw;
        height: 17.3333333333vw;
        margin-right: 2.6666666667vw;
        font-size: 3.4666666667vw;
        line-height: 7.4666666667vw
    }
}

.flow-present__section__content {
    -webkit-box-flex: 0;
    flex: 0 1 560px;
    width: 560px
}

@media(max-width:1359px) {
    .flow-present__section__content {
        -webkit-box-flex: 0;
        flex: 0 1 100%;
        width: 100%
    }
}

.flow-present__section__title {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: .08em;
    line-height: 40px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .flow-present__section__title {
        font-size: 4.8vw;
        line-height: 8.2666666667vw
    }
}

.flow-present__section__title b {
    color: #eb4d9c
}

.flow-present__section__description {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .flow-present__section__description {
        margin-top: 2.6666666667vw;
        margin-left: -17.3333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.flow-present__image {
    position: absolute;
    top: 55px;
    right: 0;
    width: 442px
}

@media(max-width:1359px) {
    .flow-present__image {
        position: static;
        text-align: center;
        width: 442px;
        height: auto;
        margin: auto
    }
}

@media(max-width:767px) {
    .flow-present__image {
        position: static;
        -moz-text-align-last: left;
        text-align-last: left;
        width: 100%;
        height: auto
    }
}

.flow-visual {
    padding: 60px 0;
    background-color: #fff
}

@media(max-width:767px) {
    .flow-visual {
        padding: 8vw 0 10.6666666667vw
    }
}

.flow-visual__inner {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center
}

@media(max-width:767px) {
    .flow-visual__inner {
        display: block
    }
}

.flow-visual__image {
    padding: 0 0 0 7.1428571429%;
    -webkit-box-flex: 0;
    flex: 0 1 44.6428571429%
}

@media(max-width:767px) {
    .flow-visual__image {
        padding: 0
    }
}

.flow-visual__image img {
    border-radius: 10px
}

@media(max-width:767px) {
    .flow-visual__image img {
        border-radius: 2.6666666667vw
    }
}

.flow-visual__content {
    padding: 0 3.5714285714% 0 0;
    -webkit-box-flex: 0;
    flex: 0 1 52.6785714286%
}

@media(max-width:767px) {
    .flow-visual__content {
        padding: 0
    }
}

.flow-visual__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #6c5ded
}

@media(max-width:767px) {
    .flow-visual__title {
        margin-top: 7.4666666667vw;
        font-size: 5.6vw;
        line-height: 9.0666666667vw
    }
}

.flow-visual__description {
    margin-top: 30px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .flow-visual__description {
        margin-top: 5.3333333333vw;
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.flow svg {
    display: block;
    margin: 30px auto;
    width: 30px;
    height: 18px
}

@media(max-width:767px) {
    .flow svg {
        margin: 5.3333333333vw auto;
        width: 8vw;
        height: 4.8vw
    }
}

.flow svg path {
    fill: #ccc
}

.flow__section {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 40px 62px 40px 80px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .flow__section {
        display: block;
        padding: 12.2666666667vw 5.3333333333vw 8vw
    }
}

.flow__content {
    -webkit-box-flex: 0;
    flex: 0 1 580px
}

.flow__thumb {
    -webkit-box-flex: 0;
    flex: 0 1 320px
}

.flow__thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px
}

@media(max-width:767px) {
    .flow__thumb img {
        border-radius: 2.6666666667vw
    }
}

@media(max-width:1359px) {
    .flow__thumb {
        margin-left: 40px
    }
}

@media(max-width:767px) {
    .flow__thumb {
        margin-left: 0;
        margin-top: 5.3333333333vw
    }
}

.flow__number {
    position: absolute;
    top: 25px;
    left: 35px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 100px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left;
    color: #ccc;
    opacity: .25
}

@media(max-width:767px) {
    .flow__number {
        top: 2.9333333333vw;
        left: 2.1333333333vw;
        font-size: 21.3333333333vw
    }
}

.flow__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #6c5ded
}

@media(max-width:767px) {
    .flow__title {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.flow__description {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .flow__description {
        margin-top: 4.2666666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.flow__description a {
    color: #6c5ded;
    text-decoration: underline
}

.flow__description a:hover {
    opacity: .8
}

.flow__notice {
    margin: 80px auto 0;
    width: 757px;
    padding: 40px;
    border-radius: 10px;
    background: #eaeaea
}

@media(max-width:767px) {
    .flow__notice {
        margin: 10.6666666667vw auto 0;
        width: 100%;
        border-radius: 2.6666666667vw;
        padding: 5.3333333333vw 6.6666666667vw
    }
}

.flow__notice__header {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .flow__notice__header {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.flow__notice__list>li {
    margin-top: 20px;
    position: relative;
    padding-left: 24px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .flow__notice__list>li {
        margin-top: 5.3333333333vw;
        padding-left: 8.8vw;
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.flow__notice__list>li:before {
    position: absolute;
    top: 2px;
    left: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    color: #a5a5a5
}

@media(max-width:767px) {
    .flow__notice__list>li:before {
        top: .5333333333vw;
        font-size: 5.6vw
    }
}

.flow__notice__list>li:first-child:before {
    content: "1."
}

.flow__notice__list>li:nth-child(2):before {
    content: "2."
}

.flow__notice__list>li:nth-child(3):before {
    content: "3."
}

.flow__notice__list>li:nth-child(4):before {
    content: "4."
}

.flow__notice__list>li:nth-child(5):before {
    content: "5."
}

.flow__notice__list>li:nth-child(6):before {
    content: "6."
}

.flow__notice__list>li:nth-child(7):before {
    content: "7."
}

.flow__notice__list>li:nth-child(8):before {
    content: "8."
}

.flow__notice__list>li:nth-child(9):before {
    content: "9."
}

[data-theme-color=purple] .flow__title {
    color: #6c5ded
}

[data-theme-color=green] .flow__title {
    color: #2cc697
}

[data-theme-color=pink] .flow__title {
    color: #eb4d9c
}

[data-theme-color=orange] .flow__title {
    color: #ef3e4c
}

[data-theme-color=blue] .flow__title {
    color: #33b6dd
}

[data-theme-color=yellow] .flow__title {
    color: #fc9e1d
}

[data-theme-color=line] .flow__title {
    color: #06c755
}

.flow--online .flow__content {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 1 47.3214285714%
}

@media(max-width:767px) {
    .flow--online .flow__description {
        margin-top: 3.2vw
    }
}

.flow--online .flow__thumb {
    -webkit-box-flex: 0;
    flex: 0 1 40.1785714286%;
    position: relative;
    height: 26.7857142857%
}

@media(max-width:1359px) {
    .flow--online .flow__thumb {
        margin: 40px auto auto;
        max-width: 500px
    }
}

@media(max-width:767px) {
    .flow--online .flow__thumb {
        margin-top: 5.3333333333vw;
        width: 100%;
        height: auto
    }
}

.flow--online .flow__number {
    top: -58px;
    left: -30px;
    font-size: 120px
}

@media(max-width:767px) {
    .flow--online .flow__number {
        top: -8.5333333333vw;
        left: -2.6666666667vw;
        font-size: 21.3333333333vw
    }
}

.flow--online .flow__section {
    -webkit-box-align: start;
    align-items: flex-start;
    box-shadow: none;
    background-color: transparent;
    padding: 70px 44px 70px 30px
}

.flow--online .flow__section:first-child {
    padding-top: 0
}

.flow--online .flow__section:last-child {
    padding-bottom: 0
}

.flow--online .flow__section:nth-child(2n) {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse
}

@media(max-width:1359px) {
    .flow--online .flow__section {
        display: block
    }
}

@media(max-width:767px) {
    .flow--online .flow__section {
        padding: 13.3333333333vw 0
    }
    .flow--online .flow__section:first-child {
        padding-top: 0
    }
    .flow--online .flow__section:last-child {
        padding-bottom: 0
    }
}

@media(max-width:767px) {
    .flow--online .flow__section--01 .flow__thumb {
        margin-top: 12vw
    }
}

.flow--online .flow__title {
    font-size: 25px;
    letter-spacing: .05em;
    line-height: 42.5px
}

@media(max-width:767px) {
    .flow--online .flow__title {
        font-size: 5.3333333333vw;
        line-height: 10.1333333333vw
    }
}

.flow--online .flow__chara {
    position: absolute;
    z-index: 2;
    width: 150px;
    height: 222px
}

@media(max-width:767px) {
    .flow--online .flow__chara {
        width: 32vw;
        height: 48vw
    }
}

.flow--online .flow__chara--right-top {
    top: -30px;
    right: -70px
}

@media(max-width:767px) {
    .flow--online .flow__chara--right-top {
        top: 26.1333333333vw;
        right: -2.6666666667vw
    }
}

.flow--online .flow__chara--left-bottom {
    bottom: -30px;
    left: -70px
}

@media(max-width:767px) {
    .flow--online .flow__chara--left-bottom {
        bottom: -32.2666666667vw;
        left: -1.0666666667vw
    }
    .flow--online .flow__chara--left-bottom .flow__illust {
        width: 24vw;
        height: 36vw
    }
}

@media(max-width:767px) {
    .flow--online .flow__chara--left-bottom--01 {
        bottom: 29.8666666667vw;
        left: -3.7333333333vw
    }
    .flow--online .flow__chara--left-bottom--01 .flow__illust {
        width: 32vw;
        height: 48vw
    }
}

.flow--online .flow__chara--right-bottom {
    bottom: -26px;
    right: -61px;
    width: 92px;
    height: 92px
}

@media(max-width:767px) {
    .flow--online .flow__chara--right-bottom {
        bottom: -3.2vw;
        right: -5.0666666667vw
    }
}

.flow--online .flow__chara--right-bottom .flow__illust {
    width: 92px;
    height: 92px
}

@media(max-width:767px) {
    .flow--online .flow__chara--right-bottom .flow__illust {
        width: 24.5333333333vw;
        height: 24.5333333333vw
    }
}

.flow--online .flow__chara--right-bottom .flow__balloon {
    bottom: 40px;
    right: 104px
}

@media(max-width:767px) {
    .flow--online .flow__chara--right-bottom .flow__balloon {
        bottom: 7.4666666667vw;
        right: 27.7333333333vw
    }
}

.flow--online .flow__illust {
    width: 150px;
    height: 222px
}

@media(max-width:767px) {
    .flow--online .flow__illust {
        width: 32vw;
        height: 48vw
    }
}

.flow--online .flow__balloon {
    bottom: 90px;
    right: 120px;
    padding: 15px 18px;
    position: absolute;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 228px;
    border-radius: 20px 20px 0 20px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 22px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .flow--online .flow__balloon {
        bottom: 21.3333333333vw;
        right: 25.8666666667vw;
        padding: 3.2vw 4.8vw;
        width: 60.8vw;
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw;
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 5.8666666667vw
    }
}

.flow--online .flow__balloon:before {
    position: absolute;
    bottom: 0;
    right: -12px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: none;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff
}

@media(max-width:767px) {
    .flow--online .flow__balloon:before {
        right: -2.9333333333vw;
        border-bottom: 3.2vw solid #fff;
        border-right: 3.2vw solid transparent
    }
}

.flow--online .flow__chara--left .flow__balloon {
    right: auto;
    left: 120px;
    border-radius: 20px 20px 20px 0
}

@media(max-width:767px) {
    .flow--online .flow__chara--left .flow__balloon {
        left: 26.1333333333vw;
        border-radius: 5.3333333333vw 5.3333333333vw 5.3333333333vw 0
    }
}

.flow--online .flow__chara--left .flow__balloon:before {
    right: auto;
    left: -12px;
    border-left: 12px solid transparent;
    border-right: none
}

@media(max-width:767px) {
    .flow--online .flow__chara--left .flow__balloon:before {
        left: -2.9333333333vw;
        border-left: 3.2vw solid transparent
    }
}

.flow--online .flow__balloon--01.flow__balloon {
    width: 228px
}

@media(max-width:767px) {
    .flow--online .flow__balloon--01.flow__balloon {
        width: 60.8vw
    }
}

.flow--online .flow__balloon--02.flow__balloon {
    width: 216px
}

@media(max-width:767px) {
    .flow--online .flow__balloon--02.flow__balloon {
        width: 57.6vw
    }
}

.flow--online .flow__balloon--03.flow__balloon {
    width: 178px
}

@media(max-width:767px) {
    .flow--online .flow__balloon--03.flow__balloon {
        width: 47.4666666667vw;
        left: 24vw;
        bottom: 27.2vw
    }
}

.flow--online .flow__balloon--04.flow__balloon {
    width: 216px
}

@media(max-width:767px) {
    .flow--online .flow__balloon--04.flow__balloon {
        width: 57.6vw
    }
}

.follow-link-box {
    display: -webkit-box;
    display: flex;
    position: fixed;
    bottom: 25px;
    right: 66px;
    z-index: 999
}

@media(max-width:767px) {
    .follow-link-box {
        right: inherit;
        bottom: 0;
        width: 100%;
        padding: 15px;
        background-color: hsla(0, 0%, 100%, .8)
    }
}

.follow-link {
    display: block;
    position: relative;
    top: 0
}

@media(max-width:767px) {
    .follow-link {
        right: inherit
    }
}

.follow-link .follow-link-image {
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.follow-link:hover .follow-link-image {
    opacity: .8
}

.follow-link-contact {
    width: 269px;
    height: 77px
}

@media(max-width:767px) {
    .follow-link-contact {
        width: calc(55% - 4px);
        height: 45px;
        margin-right: 4px
    }
}

.follow-link-line {
    width: 189px;
    height: 77px
}

@media(max-width:767px) {
    .follow-link-line {
        width: calc(45% - 4px);
        height: 45px;
        margin-left: 4px
    }
}

.follow-link-contact-illust {
    position: absolute;
    width: 90px;
    height: 74px;
    bottom: 4px;
    z-index: 3
}

@media(max-width:767px) {
    .follow-link-contact-illust {
        width: 32%;
        height: 100%;
        bottom: 14%;
        left: 2%
    }
}

.form__row {
    margin-top: 40px
}

@media(max-width:767px) {
    .form__row {
        margin-top: 5.3333333333vw
    }
}

.form__row:first-child {
    margin-top: 0
}

.form__label {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .form__label {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.is-required .form__label {
    vertical-align: middle
}

.is-required .form__label:after {
    content: "\5FC5\9808";
    display: inline-block;
    width: 36px;
    height: 16px;
    border-radius: 8px;
    background: #eb4d9c;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 16px;
    text-align: center;
    color: #fff
}

@media(max-width:767px) {
    .is-required .form__label:after {
        width: 9.6vw;
        height: 4.2666666667vw;
        border-radius: 2.1333333333vw;
        font-size: 2.6666666667vw;
        line-height: 4.2666666667vw
    }
}

.form__select {
    display: inline-block;
    width: 232px;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff
}

.form__select+span {
    margin-left: 8px;
    font-size: 16px
}

@media(max-width:767px) {
    .form__select+span {
        margin-left: 1.6vw;
        font-size: 4vw
    }
}

@media(max-width:767px) {
    .form__select {
        width: 100%;
        border-radius: 1.3333333333vw
    }
}

.form__select:before {
    content: " ";
    display: block
}

.form__input {
    margin-top: 10px
}

@media(max-width:767px) {
    .form__input {
        margin-top: 1.8666666667vw
    }
}

.form__input input[type=email],
.form__input input[type=text],
.form__input textarea {
    width: 100%;
    padding: 10px 15px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #ccc;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

.form__input input[type=email] ::-webkit-input-placeholder,
.form__input input[type=text] ::-webkit-input-placeholder,
.form__input textarea ::-webkit-input-placeholder {
    color: #ccc
}

.form__input input[type=email] ::-moz-placeholder,
.form__input input[type=text] ::-moz-placeholder,
.form__input textarea ::-moz-placeholder {
    color: #ccc
}

.form__input input[type=email] :-ms-input-placeholder,
.form__input input[type=text] :-ms-input-placeholder,
.form__input textarea :-ms-input-placeholder {
    color: #ccc
}

.form__input input[type=email] ::-ms-input-placeholder,
.form__input input[type=text] ::-ms-input-placeholder,
.form__input textarea ::-ms-input-placeholder {
    color: #ccc
}

.form__input input[type=email] ::placeholder,
.form__input input[type=text] ::placeholder,
.form__input textarea ::placeholder {
    color: #ccc
}

@media(max-width:767px) {
    .form__input input[type=email],
    .form__input input[type=text],
    .form__input textarea {
        padding: 2.6666666667vw 3.2vw;
        border-radius: 1.3333333333vw;
        font-size: 16px;
        line-height: 7.4666666667vw
    }
}

@media(max-width:767px) {
    .form__input input[type=email].form_name,
    .form__input input[type=text].form_name,
    .form__input textarea.form_name {
        width: 48%
    }
}

.form__input select {
    width: 100%;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    border: none;
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(../images/common/icon-arrow-select.svg);
    background-size: 10px 6px;
    background-position: right 16px top 22px;
    background-repeat: no-repeat
}

@media(max-width:767px) {
    .form__input select {
        padding: 2.6666666667vw 3.2vw;
        border-radius: 1.3333333333vw;
        font-size: 16px;
        line-height: 7.4666666667vw;
        background-size: 2.6666666667vw 1.6vw;
        background-position: right 3.2vw top 5.8666666667vw
    }
}

.form__input input[type=checkbox],
.form__input input[type=radio] {
    opacity: 0
}

.form__input input[type=checkbox]+span,
.form__input input[type=radio]+span {
    position: relative;
    display: inline-block
}

.form__input input[type=checkbox]+span:before,
.form__input input[type=radio]+span:before {
    position: absolute;
    top: 1px;
    left: -23px;
    content: " ";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #d8d8d8
}

@media(max-width:767px) {
    .form__input input[type=checkbox]+span:before,
    .form__input input[type=radio]+span:before {
        width: 4.8vw;
        height: 4.8vw;
        top: .2666666667vw;
        left: -6.1333333333vw;
        border-radius: 1.3333333333vw
    }
}

.form__input input[type=checkbox]+span:after,
.form__input input[type=radio]+span:after {
    position: absolute;
    top: 6px;
    left: -18px;
    content: " ";
    display: block;
    width: 8px;
    height: 8px;
    background: #222;
    border-radius: 50%;
    opacity: 0
}

@media(max-width:767px) {
    .form__input input[type=checkbox]+span:after,
    .form__input input[type=radio]+span:after {
        width: 2.1333333333vw;
        height: 2.1333333333vw;
        top: 1.6vw;
        left: -4.8vw
    }
}

.form__input input[type=checkbox]:checked+span:after,
.form__input input[type=radio]:checked+span:after {
    opacity: 1
}

.form__input--flex {
    display: -webkit-box;
    display: flex;
    gap: 15px;
    -webkit-box-align: center;
    align-items: center
}

@media(max-width:767px) {
    .form__input--flex {
        gap: 10px
    }
}

.form__input--between {
    -webkit-box-pack: justify;
    justify-content: space-between
}

.form__privacy {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .form__privacy {
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.form__privacy a {
    text-decoration: underline
}

.form__privacy a:hover {
    text-decoration: none
}

.form__select--year {
    width: 120px
}

@media(max-width:767px) {
    .form__select--year {
        width: 23.7333333333vw
    }
}

@media(max-width:767px) {
    .single-experience .form__select--year {
        width: 21.6vw
    }
}

.form__select--month {
    width: 80px
}

@media(max-width:767px) {
    .form__select--month {
        width: 16.8vw
    }
}

.form__select--day {
    width: 80px
}

@media(max-width:767px) {
    .form__select--day {
        width: 16.8vw
    }
}

.form input[type=submit] {
    margin: 42px auto 0;
    position: relative;
    display: block;
    height: 71px;
    border-radius: 36px;
    padding: 0 56px;
    border: none;
    background-image: url(../images/common/icon-arrow-submit.png), -webkit-gradient(linear, left top, right top, from(#4c88ed), color-stop(50%, #f790e0), to(#4c88ed));
    background-image: url(../images/common/icon-arrow-submit.png), linear-gradient(90deg, #4c88ed, #f790e0 50%, #4c88ed);
    background-size: 8px 12px, 200% 100%;
    background-position: 90% 30px, 100% 0;
    background-repeat: no-repeat;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    color: #fffcf5;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .3);
    text-align: center
}

@media(max-width:767px) {
    .form input[type=submit] {
        padding: 0 8vw;
        height: 15.4666666667vw;
        font-size: 4.2666666667vw;
        letter-spacing: .05em;
        line-height: 8vw;
        border-radius: 9.6vw;
        box-shadow: 0 .8vw 8vw hsla(0, 0%, 47.5%, .3);
        background-size: 2.1333333333vw 3.2vw, 200% 100%;
        background-position: 90% 5.8666666667vw, 100% 0
    }
}

.mw_wp_form_confirm .form__label {
    padding: 6px 12px;
    border-radius: 5px;
    background: #f5f5f5
}

.mw_wp_form_confirm .form__privacy {
    display: none
}

.mw_wp_form_confirm .form__select {
    width: auto;
    border: none
}

.form .mwform-checkbox-field {
    display: inline-block;
    margin-top: 10px
}

.form input[type=submit][name=submitConfirm] {
    width: 262px
}

@media(max-width:767px) {
    .form input[type=submit][name=submitConfirm] {
        width: 57.0666666667vw
    }
}

.form input[type=submit][name=submit] {
    width: 186px
}

@media(max-width:767px) {
    .form input[type=submit][name=submit] {
        width: 57.0666666667vw
    }
}

.form input[type=submit][name=submitBack] {
    margin-top: 20px;
    width: 186px;
    height: 44px;
    color: #222;
    background-color: #fff;
    background-image: url(../images/common/icon-arrow-back.png);
    background-size: 6px 11px;
    background-position: 10% 16px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    padding: 0 10px 0 15px
}

@media(max-width:767px) {
    .form input[type=submit][name=submitBack] {
        margin-top: 5.3333333333vw;
        width: 57.0666666667vw;
        height: 11.7333333333vw;
        font-size: 3.2vw;
        line-height: 8vw;
        background-size: 1.6vw 2.9333333333vw;
        background-position: 10% 4.2666666667vw;
        padding: 0 2.6666666667vw 0 4vw
    }
}

.mw_wp_form span.error {
    display: none
}

.form_error__text {
    color: #ef3e4c;
    font-size: 14px;
    margin-top: 7px;
    display: block
}

.is-form-error span:before,
input.is-form-error,
select.is-form-error,
textarea.is-form-error {
    border: 1px solid #ef3e4c!important;
    background-color: #f8e7e9!important
}

.form__loading {
    width: 32px;
    height: 32px;
    opacity: 0;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

@media(max-width:767px) {
    .form__loading {
        margin-left: 5px
    }
}

.form__loading img {
    width: 32px;
    height: 32px;
    -webkit-animation: formLoading .7s linear infinite;
    animation: formLoading .7s linear infinite
}

.form__loading.is-form-loading {
    opacity: 1;
    -webkit-transition: opacity .4s ease;
    transition: opacity .4s ease
}

@-webkit-keyframes formLoading {
    0% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes formLoading {
    0% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.full-image {
    position: relative;
    background-position: 50%;
    background-size: cover;
    width: 100%;
    height: 597.33px;
    margin-bottom: 60px
}

@media(max-width:1359px) {
    .full-image {
        height: 300px
    }
}

@media(max-width:767px) {
    .full-image {
        width: 100%;
        height: 31.416vw;
        margin-bottom: 0
    }
}

.full-image__copy {
    position: absolute;
    bottom: -100px;
    width: 100%
}

@media(max-width:767px) {
    .full-image__copy {
        bottom: -25%
    }
}

.full-image__copy img {
    width: 100%;
    height: auto
}

.guide-link-list {
    display: -webkit-box;
    display: flex;
    margin: -20px -10px 0;
    flex-wrap: wrap
}

@media(max-width:767px) {
    .guide-link-list {
        display: block;
        margin: 0
    }
}

.guide-link-list__item {
    -webkit-box-flex: 0;
    flex: 0 1 33.3333%;
    padding: 0 10px;
    margin-top: 20px
}

@media(max-width:767px) {
    .guide-link-list__item {
        margin-top: 5.3333333333vw;
        padding: 0
    }
}

.guide-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    overflow: hidden;
    -webkit-transition: box-shadow .3s linear;
    transition: box-shadow .3s linear
}

@media(max-width:767px) {
    .guide-link {
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.guide-link:before {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.guide-link:hover {
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

.guide-link:hover:before {
    opacity: 1
}

.guide-link:hover .guide-link__thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.guide-link:hover .guide-link__thumb:before {
    opacity: .3
}

.guide-link__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6666666667%;
    overflow: hidden
}

.guide-link__thumb:before {
    z-index: 2;
    pointer-events: none;
    content: " ";
    height: 100%;
    background-image: linear-gradient(125deg, #ff76ef, #fa383c);
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.guide-link__thumb:before,
.guide-link__thumb img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%
}

.guide-link__thumb img {
    height: auto;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.guide-link__body {
    padding: 20px 20px 30px
}

@media(max-width:767px) {
    .guide-link__body {
        padding: 5.9466666667vw 5.3333333333vw 8vw
    }
}

.guide-link__date {
    font-family: Montserrat, sans-serif;
    letter-spacing: .1em;
    line-height: 1;
    color: #a5a5a5
}

.guide-link__date,
.guide-link__title {
    font-weight: 500;
    font-size: 16px;
    text-align: left
}

.guide-link__title {
    margin-top: 10px;
    letter-spacing: .05em;
    line-height: 30px
}

@media(max-width:767px) {
    .guide-link__title {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.guide-link--purple .guide-link__thumb:before,
[data-theme-color=purple] .guide-link__thumb:before {
    background-image: linear-gradient(125deg, #f790e0, #4c88ed)
}

.guide-link--green .guide-link__thumb:before,
[data-theme-color=green] .guide-link__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.guide-link--pink .guide-link__thumb:before,
[data-theme-color=pink] .guide-link__thumb:before {
    background-image: linear-gradient(125deg, #ff76ef, #fa383c)
}

.guide-link--orange .guide-link__thumb:before,
[data-theme-color=orange] .guide-link__thumb:before {
    background-image: linear-gradient(125deg, #fa5562, #ffa234)
}

.guide-link--blue .guide-link__thumb:before,
[data-theme-color=blue] .guide-link__thumb:before {
    background-image: linear-gradient(125deg, #5192ea, #45cddc)
}

.guide-link--yellow .guide-link__thumb:before,
[data-theme-color=yellow] .guide-link__thumb:before {
    background-image: linear-gradient(125deg, #ffdd4d, #f49c10)
}

.guide-link--line .guide-link__thumb:before,
[data-theme-color=line] .guide-link__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.guide-slide {
    position: relative
}

.guide-slide__item {
    width: 360px;
    height: auto
}

@media(max-width:767px) {
    .guide-slide__item {
        width: 89.3333333333vw
    }
}

.guide-slide__next,
.guide-slide__prev {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: auto;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background: #fff;
    box-shadow: 0 3px 3px rgba(90, 90, 90, .16);
    border: 1px solid #6c5ded
}

.guide-slide__next svg path,
.guide-slide__prev svg path {
    fill: #6c5ded
}

.guide-slide__prev {
    left: 50%;
    -webkit-transform: translateX(-585px);
    transform: translateX(-585px)
}

@media(max-width:767px) {
    .guide-slide__prev {
        left: 2.6666666667vw;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.guide-slide__prev svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    position: relative;
    left: -1px
}

@media(max-width:767px) {
    .guide-slide__prev svg {
        left: -.2666666667vw
    }
}

.guide-slide__next {
    right: 50%;
    -webkit-transform: translateX(585px);
    transform: translateX(585px)
}

@media(max-width:767px) {
    .guide-slide__next {
        right: 2.6666666667vw;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.guide-slide__next svg {
    position: relative;
    left: 1px
}

.guide-slide__next svg path {
    fill: #6c5ded
}

@media(max-width:767px) {
    .guide-slide__next svg {
        left: .2666666667vw
    }
}

.guide {
    position: relative;
    padding: 80px 120px;
    background-color: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    border-radius: 10px
}

@media(max-width:1359px) {
    .guide {
        padding: 80px 40px
    }
}

@media(max-width:767px) {
    .guide {
        padding: 14.4vw 5.3333333333vw;
        margin: 0 -5.3333333333vw;
        box-shadow: none;
        border-radius: 0
    }
}

.guide__category {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 50px;
    padding: 0 20px;
    border-radius: 0 0 10px 10px;
    position: absolute;
    top: 0;
    left: 120px;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #6c5ded
}

@media(max-width:767px) {
    .guide__category {
        left: 5.3333333333vw;
        height: 10.4vw;
        padding: 0 4vw;
        font-size: 3.4666666667vw;
        line-height: 6.72vw
    }
}

.guide__title {
    font-weight: 400;
    font-size: 32px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .guide__title {
        font-size: 6.1333333333vw;
        line-height: 9.2vw
    }
}

.guide__date {
    display: block;
    margin-top: 20px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 1;
    text-align: left;
    color: #a5a5a5
}

@media(max-width:767px) {
    .guide__date {
        margin-top: 4vw;
        font-size: 4.2666666667vw
    }
}

.guide__tags {
    margin-top: 20px
}

@media(max-width:767px) {
    .guide__tags {
        margin-top: 4vw
    }
}

.guide__tags li {
    display: inline-block;
    text-align: center;
    padding: 0 10px;
    height: 24px;
    border-radius: 12px;
    background: #f5f5f5
}

@media(max-width:767px) {
    .guide__tags li {
        height: 6.4vw;
        border-radius: 3.2vw;
        padding: 0 2.6666666667vw
    }
}

.guide__tags li>a {
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #7c7c7c
}

@media(max-width:767px) {
    .guide__tags li>a {
        font-size: 2.9333333333vw;
        line-height: 6.4vw
    }
}

.guide__thumb {
    margin-top: 40px
}

@media(max-width:767px) {
    .guide__thumb {
        margin-top: 5.3333333333vw
    }
}

.guide__thumb img {
    border-radius: 10px
}

@media(max-width:767px) {
    .guide__thumb img {
        border-radius: 2.6666666667vw
    }
}

.guide__author {
    margin-top: 60px
}

.guide__share {
    margin-top: 40px
}

.guide__cv {
    margin-top: 80px
}

.is-menu-open .hamburger {
    position: relative
}

.is-menu-open .hamburger:before {
    opacity: 1
}

.is-menu-open .hamburger .hamburger__line--first {
    background-color: #6c5ded;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.is-menu-open .hamburger .hamburger__line--second {
    background-color: #6c5ded;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.hamburger {
    pointer-events: auto;
    position: relative;
    display: none;
    width: 38px;
    height: 38px;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    border-radius: 50%
}

.hamburger:before {
    content: " ";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0
}

@media(max-width:767px) {
    .hamburger:before {
        width: 13.3333333333vw;
        height: 13.3333333333vw
    }
}

@media(max-width:1359px) {
    .hamburger {
        display: block;
        width: 50px;
        height: 50px
    }
}

@media(max-width:767px) {
    .hamburger {
        width: 13.3333333333vw;
        height: 13.3333333333vw
    }
}

.hamburger__line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 18px;
    height: 2px;
    background-color: #fff
}

@media(max-width:767px) {
    .hamburger__line {
        width: 4.8vw;
        height: 2px
    }
}

.hamburger__line--first {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

.hamburger__line--second {
    -webkit-transform: translateY(4px);
    transform: translateY(4px)
}

.heading__ja {
    font-weight: 700;
    font-size: 40px;
    letter-spacing: .08em;
    line-height: 64px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .heading__ja {
        font-size: 6.4vw;
        letter-spacing: .08em;
        line-height: 10.6666666667vw;
        text-align: center
    }
}

.heading__en {
    margin-top: 5px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 42px;
    text-align: center;
    color: #ccc
}

@media(max-width:767px) {
    .heading__en {
        font-size: 3.7333333333vw;
        letter-spacing: .05em;
        line-height: 2;
        text-align: center
    }
}

.heading__copy {
    margin-bottom: 7px;
    font-weight: 500
}

.heading__copy,
.heading__text {
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

.heading__text {
    width: 480px;
    margin: 18px auto 0;
    font-weight: 400
}

@media(max-width:767px) {
    .heading__text {
        width: 100%;
        font-size: 3.2vw;
        line-height: 6.4vw
    }
}

.heading--purple .heading__en {
    color: #6c5ded
}

.heading--green .heading__en {
    color: #2cc697
}

.heading--pink .heading__en {
    color: #eb4d9c
}

.heading--orange .heading__en {
    color: #ef3e4c
}

.heading--blue .heading__en {
    color: #33b6dd
}

.heading--yellow .heading__en {
    color: #fc9e1d
}

.heading--line .heading__en {
    color: #06c755
}

[data-theme-color=purple] .heading__en {
    color: #6c5ded
}

[data-theme-color=green] .heading__en {
    color: #2cc697
}

[data-theme-color=pink] .heading__en {
    color: #eb4d9c
}

[data-theme-color=orange] .heading__en {
    color: #ef3e4c
}

[data-theme-color=blue] .heading__en {
    color: #33b6dd
}

[data-theme-color=yellow] .heading__en {
    color: #fc9e1d
}

[data-theme-color=line] .heading__en {
    color: #06c755
}

.heading--mid .heading__ja {
    font-size: 28px;
    line-height: 1.5
}

@media(max-width:767px) {
    .heading--mid .heading__ja {
        font-size: 5.8666666667vw;
        line-height: 10.6666666667vw
    }
}

.heading--mid .heading__en {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.5
}

@media(max-width:767px) {
    .heading--mid .heading__en {
        font-size: 3.7333333333vw
    }
}

.heading--small .heading__ja {
    font-weight: 700;
    font-size: 21px;
    letter-spacing: .08em;
    line-height: 1.5;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .heading--small .heading__ja {
        font-size: 4.8vw;
        letter-spacing: .03em;
        line-height: 1.5
    }
}

.heading--small .heading__en {
    margin-top: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .05em;
    line-height: 1.5;
    text-align: center;
    color: #6c5ded
}

@media(max-width:767px) {
    .heading--small .heading__en {
        font-size: 3.4666666667vw;
        letter-spacing: .05em;
        line-height: 1.5
    }
}

@media(max-width:767px) {
    .heading--trial-flow {
        padding: 2.6666666667vw 0 0
    }
}

.illust {
    position: relative
}

.illust,
.illust__item {
    width: 100%;
    height: 100%
}

.illust__item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: opacity .3s linear, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96)
}

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

[data-theme=manga] .illust.is-enter .illust__item[data-theme=manga],
[data-theme=normal] .illust.is-enter .illust__item[data-theme=normal],
[data-theme=sd] .illust.is-enter .illust__item[data-theme=sd] {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity .3s linear, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96)
}

.initial__inner {
    position: relative;
    padding: 60px 110px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .initial__inner {
        padding: 8vw 5.3333333333vw;
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.initial__copy {
    width: 250px;
    height: 28px;
    border-radius: 14px;
    background: #f2f2f2;
    margin: auto;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px
}

.initial__copy,
.initial__title {
    text-align: center;
    letter-spacing: .05em;
    color: #222
}

.initial__title {
    margin-top: 10px;
    font-weight: 500;
    font-size: 29px;
    line-height: 70px
}

@media(max-width:767px) {
    .initial__title {
        font-weight: 500;
        font-size: 6.6666666667vw;
        letter-spacing: .05em;
        line-height: 16vw;
        text-align: center;
        color: #222
    }
}

.initial__title b {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 36px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: right;
    color: #222
}

@media(max-width:767px) {
    .initial__title b {
        font-weight: 500;
        font-size: 8.2666666667vw;
        letter-spacing: .05em;
        text-align: right;
        color: #222
    }
}

.initial__title small {
    font-weight: 500;
    font-size: 19px;
    letter-spacing: .05em;
    line-height: 42px;
    text-align: left;
    color: #222
}

.initial__title span {
    margin: 0 6px;
    font-weight: 700;
    font-size: 29px;
    letter-spacing: .05em;
    line-height: 70px;
    text-align: center;
    color: #7c7c7c
}

@media(max-width:767px) {
    .initial__title span {
        font-size: 6.6666666667vw;
        line-height: 6.6666666667vw;
        display: block
    }
}

.initial__list {
    max-width: 410px;
    margin: 10px auto 0
}

.initial__list>li {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .initial__list>li {
        font-size: 3.7333333333vw;
        letter-spacing: .05em;
        line-height: 6.72vw
    }
}

.initial__ex {
    margin-top: 30px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 17px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .initial__ex {
        margin-top: 5.3333333333vw;
        font-weight: 400;
        font-size: 2.6666666667vw;
        letter-spacing: .05em;
        line-height: 4.5333333333vw;
        text-align: left;
        color: #222
    }
}

.initial__payment {
    margin-top: 30px;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 30px 40px;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 10px;
    background: #f5f5f5
}

@media(max-width:767px) {
    .initial__payment {
        display: block;
        text-align: left;
        margin-top: 8vw;
        padding: 8vw 5.3333333333vw 5.3333333333vw;
        border-radius: 2.6666666667vw
    }
}

.initial__payment__header {
    position: absolute;
    top: 0;
    left: 0;
    width: 86px;
    height: 19px;
    border-radius: 10px 0;
    background: #2cc697;
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .05em;
    line-height: 19px;
    text-align: center;
    color: #fff
}

@media(max-width:767px) {
    .initial__payment__header {
        width: 22.9333333333vw;
        height: 5.0666666667vw;
        border-radius: 2.6666666667vw 0;
        font-size: 2.4vw;
        line-height: 5.0666666667vw;
        text-align: center
    }
}

.inital__payment__title {
    font-weight: 500;
    font-size: 22px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .inital__payment__title {
        font-size: 4.2666666667vw;
        line-height: 8.5333333333vw;
        text-align: left
    }
}

.initial__payment__description {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 17px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .initial__payment__description {
        margin-top: 2.6666666667vw;
        font-size: 2.6666666667vw;
        letter-spacing: .02em;
        line-height: 4.5333333333vw
    }
}

.initial__illust {
    position: absolute;
    width: 130px;
    height: 195px
}

@media(max-width:767px) {
    .initial__illust {
        width: 19.2vw;
        height: 28.8vw
    }
}

.initial__illust--01 {
    top: -96px;
    left: 12px
}

@media(max-width:767px) {
    .initial__illust--01 {
        top: -16vw;
        left: -4.2666666667vw
    }
}

.initial__illust--02 {
    bottom: -98px;
    right: -28px
}

@media(max-width:767px) {
    .initial__illust--02 {
        bottom: -12.2666666667vw;
        right: -5.0666666667vw
    }
}

.lesson-description {
    position: relative;
    padding: 0 80px;
    min-height: 267px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: end;
    align-items: flex-end
}

@media(max-width:767px) {
    .lesson-description {
        display: block;
        padding: 0
    }
}

.lesson-description__thumb {
    position: absolute;
    top: 0;
    left: 80px;
    width: 400px;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:1359px) {
    .lesson-description__thumb {
        width: 29.4117647059vw
    }
}

@media(max-width:767px) {
    .lesson-description__thumb {
        position: static;
        width: 100%
    }
}

.lesson-description__thumb img {
    border-radius: 10px
}

@media(max-width:767px) {
    .lesson-description__thumb img {
        border-radius: 2.6666666667vw
    }
}

.lesson-description__header {
    width: 480px;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #6c5ded
}

@media(max-width:1359px) {
    .lesson-description__header {
        width: 35.2941176471vw
    }
}

@media(max-width:767px) {
    .lesson-description__header {
        margin-top: 5.3333333333vw;
        width: 100%;
        font-size: 5.3333333333vw;
        line-height: 9.0666666667vw
    }
}

.lesson-description__body {
    border-top: 1px solid #6c5ded;
    width: 480px;
    margin-top: 15px;
    padding-top: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:1359px) {
    .lesson-description__body {
        width: 35.2941176471vw
    }
}

@media(max-width:767px) {
    .lesson-description__body {
        margin-top: 3.7333333333vw;
        padding-top: 4vw;
        width: 100%;
        font-size: 4vw;
        line-height: 8vw
    }
}

.lesson-slider {
    position: relative;
    margin-top: 67px
}

.lesson-visual {
    position: relative;
    background-position: 50%;
    background-size: cover;
    height: 604px
}

@media(max-width:767px) {
    .lesson-visual {
        height: auto
    }
}

.lesson-visual__wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding-top: 104px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

@media(max-width:1359px) {
    .lesson-visual__wrapper {
        padding: 104px 40px 0
    }
}

@media(max-width:767px) {
    .lesson-visual__wrapper {
        padding: 0;
        height: auto
    }
}

.lesson-visual__wrapper:before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .4
}

.lesson-visual__inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 70px 0;
    max-width: 1280px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin: auto
}

@media(max-width:767px) {
    .lesson-visual__inner {
        display: block;
        height: auto;
        padding: 33.0666666667vw 0 7.4666666667vw
    }
}

.lesson-visual__header {
    position: relative;
    z-index: 2;
    width: 480px;
    font-weight: 700;
    font-size: 42px;
    letter-spacing: .12em;
    line-height: 65px;
    color: #fff
}

@media(max-width:767px) {
    .lesson-visual__header {
        width: 100%;
        padding: 0 5.3333333333vw;
        font-size: 6.9333333333vw;
        letter-spacing: .1em;
        line-height: 10.6666666667vw
    }
}

.lesson-visual__thumb {
    position: absolute;
    top: 70px;
    right: 0;
    width: 540px;
    height: 360px
}

@media(max-width:1359px) {
    .lesson-visual__thumb {
        width: 39.7058823529vw;
        height: 26.4705882353vw
    }
}

@media(max-width:767px) {
    .lesson-visual__thumb {
        margin-top: 4.2666666667vw;
        position: relative;
        top: 0;
        left: 5.3333333333vw;
        width: 94.6666666667vw;
        height: 62.6666666667vw
    }
}

.lesson-visual__thumb img {
    width: 100%;
    height: auto;
    border-radius: 20px
}

@media(max-width:767px) {
    .lesson-visual__thumb img {
        border-radius: 2.6666666667vw 0 0 2.6666666667vw
    }
}

.lesson-visual__thumb:before {
    position: absolute;
    z-index: -1;
    top: 20px;
    right: 20px;
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    opacity: .5
}

@media(max-width:767px) {
    .lesson-visual__thumb:before {
        top: 5.3333333333vw;
        right: auto;
        left: -5.3333333333vw;
        width: 100vw;
        height: 62.6666666667vw;
        border-radius: 0
    }
}

.lesson-visual__recommend {
    margin-top: 30px;
    width: 480px;
    color: #fff
}

@media(max-width:767px) {
    .lesson-visual__recommend {
        margin-top: 9.6vw;
        width: 100%;
        padding: 0 5.3333333333vw
    }
}

.lesson-visual__recommend p {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .lesson-visual__recommend p {
        font-size: 4.2666666667vw;
        letter-spacing: .05em;
        line-height: 8vw
    }
}

.lesson-visual__recommend ul {
    margin-top: 13px
}

@media(max-width:767px) {
    .lesson-visual__recommend ul {
        margin-top: 3.4666666667vw
    }
}

.lesson-visual__recommend ul li {
    margin-top: 10px;
    position: relative;
    padding-left: 30px;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .lesson-visual__recommend ul li {
        margin-top: 2.1333333333vw;
        font-weight: 400;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 8vw;
        text-align: left
    }
}

.lesson-visual__recommend ul li span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block
}

@media(max-width:767px) {
    .lesson-visual__recommend ul li span {
        top: 0
    }
}

.merit {
    padding: 24px 30px;
    border-radius: 10px;
    background: rgba(234, 69, 98, .05)
}

.merit__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    color: #ef3e4c
}

.merit__header .svg-sprite {
    display: block;
    margin-right: 5px;
    width: 18px;
    height: 18px
}

.merit__list {
    margin-top: 10px;
    padding-left: 23px
}

.merit__list>li {
    position: relative;
    padding-left: 20px
}

.merit__list>li:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 20px;
    font-family: Montserrat, sans-serif;
    color: #ef3e4c
}

.merit__list>li:first-child:before {
    content: "1."
}

.merit__list>li:nth-child(2):before {
    content: "2."
}

.merit__list>li:nth-child(3):before {
    content: "3."
}

.merit__list>li:nth-child(4):before {
    content: "4."
}

.merit__list>li:nth-child(5):before {
    content: "5."
}

.merit__list>li:nth-child(6):before {
    content: "6."
}

.merit__list>li:nth-child(7):before {
    content: "7."
}

.merit__list>li:nth-child(8):before {
    content: "8."
}

.merit__list>li:nth-child(9):before {
    content: "9."
}

.merit__list>li:nth-child(10):before {
    content: "10."
}

.merit__list>li:nth-child(11):before {
    content: "11."
}

.merit__list>li:nth-child(12):before {
    content: "12."
}

.merit__list>li:nth-child(13):before {
    content: "13."
}

.merit__list>li:nth-child(14):before {
    content: "14."
}

.merit__list>li:nth-child(15):before {
    content: "15."
}

.merit__list>li:nth-child(16):before {
    content: "16."
}

.merit__list>li:nth-child(17):before {
    content: "17."
}

.merit__list>li:nth-child(18):before {
    content: "18."
}

.merit__list>li:nth-child(19):before {
    content: "19."
}

.merit__list>li:nth-child(20):before {
    content: "20."
}

.merit__list>li:nth-child(21):before {
    content: "21."
}

.merit__list>li:nth-child(22):before {
    content: "22."
}

.merit__list>li:nth-child(23):before {
    content: "23."
}

.merit__list>li:nth-child(24):before {
    content: "24."
}

.merit__list>li:nth-child(25):before {
    content: "25."
}

.merit__list>li:nth-child(26):before {
    content: "26."
}

.merit__list>li:nth-child(27):before {
    content: "27."
}

.merit__list>li:nth-child(28):before {
    content: "28."
}

.merit__list>li:nth-child(29):before {
    content: "29."
}

.merit__list>li:nth-child(30):before {
    content: "30."
}

.merit--demerit {
    background: rgba(108, 93, 237, .05)
}

.merit--demerit .merit__header,
.merit--demerit .merit__list>li:before {
    color: #6c5ded
}

.more {
    margin-top: 60px
}

.more__copy {
    position: relative;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 30px;
    text-align: center;
    color: #222
}

.more__copy:before {
    content: " ";
    position: absolute;
    z-index: -1;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: auto;
    display: block;
    width: 284px;
    height: 7.08px;
    background: #fff8c3
}

.more__header {
    position: relative
}

.more__header:after,
.more__header:before {
    position: absolute;
    bottom: 20px;
    content: " ";
    display: block;
    width: 25.15px;
    height: 34px;
    background-image: url(../images/plan/line.svg);
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.more__header:before {
    left: 50%;
    -webkit-transform: translateX(-182px) scaleX(-1);
    transform: translateX(-182px) scaleX(-1)
}

.more__header:after {
    right: 50%;
    -webkit-transform: translateX(172px);
    transform: translateX(172px)
}

.more__title {
    margin-top: -12px;
    position: relative;
    font-weight: 700;
    font-size: 27px;
    letter-spacing: .08em;
    line-height: 51px;
    text-align: center;
    color: #eb4d9c
}

.more__button {
    margin-top: 20px;
    text-align: center
}

.more__description {
    margin-top: 30px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

.nav {
    position: fixed;
    display: none;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 124px 40px 50px;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    overflow: hidden;
    overflow-y: scroll
}

@media(max-width:767px) {
    .nav {
        padding: 19.7333333333vw 5.3333333333vw 13.3333333333vw
    }
}

.nav.is-open {
    display: block
}

.nav__list {
    padding: 14px 0 0
}

@media(max-width:767px) {
    .nav__list {
        padding: 3.7333333333vw 0 0
    }
}

.nav__item {
    border-top: 1px solid hsla(0, 0%, 87.8%, .2)
}

.nav__item:before {
    display: none
}

.nav__item:last-child .nav__link {
    border-bottom: 1px solid hsla(0, 0%, 87.8%, .2)
}

.nav__link {
    position: relative;
    display: block;
    padding: 11px 17.5px 11px 10.5px;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #fff
}

.nav__link .svg-sprite {
    width: 10px;
    height: 10px
}

@media(max-width:767px) {
    .nav__link {
        padding: 2.9333333333vw 4.6666666667vw 2.9333333333vw 2.8vw;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        text-align: left;
        color: #fff
    }
    .nav__link .svg-sprite {
        width: 2.6666666667vw;
        height: 2.6666666667vw
    }
}

.nav__arrow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    display: inline-block;
    width: 4px;
    height: 8px
}

@media(max-width:767px) {
    .nav__arrow {
        width: 1.0666666667vw;
        height: 2.1333333333vw
    }
}

.nav__arrow svg {
    display: block;
    width: 100%;
    height: 100%
}

.nav__arrow svg path {
    fill: #fff
}

.nav__open {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 9px;
    width: 20px;
    height: 20px;
    margin: auto;
    background: transparent;
    background-color: #fff;
    box-shadow: 0 3px 10px rgba(90, 90, 90, .16);
    border-radius: 50%
}

@media(max-width:767px) {
    .nav__open {
        top: 0;
        right: 2.4vw;
        width: 5.3333333333vw;
        height: 5.3333333333vw;
        box-shadow: 0 .8vw 2.6666666667vw rgba(90, 90, 90, .16)
    }
}

.nav__open span {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 8px;
    height: 1px;
    background-color: #6c5ded
}

@media(max-width:767px) {
    .nav__open span {
        width: 2.1333333333vw
    }
}

.nav__open span:nth-child(2) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.nav__item.is-open .nav__open span:nth-child(2) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.nav-submenu {
    width: 100%;
    height: 0;
    overflow: hidden;
    background-image: linear-gradient(125deg, rgba(247, 144, 224, .15), rgba(76, 136, 237, .15))
}

.nav-submenu .svg-sprite {
    width: 10px;
    height: 10px
}

@media(max-width:767px) {
    .nav-submenu .svg-sprite {
        width: 2.6666666667vw;
        height: 2.6666666667vw
    }
}

.nav-submenu__item {
    position: relative;
    padding: 11px 50px 11px 38px;
    border-top: 1px solid hsla(0, 0%, 87.8%, .2);
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left
}

@media(max-width:767px) {
    .nav-submenu__item {
        padding: 2.9333333333vw 13.3333333333vw 2.9333333333vw 10.1333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.nav-submenu__item:before {
    display: none
}

.nav-submenu__link {
    position: relative;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #fff
}

@media(max-width:767px) {
    .nav-submenu__link {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.nav-submenu__link .nav__arrow {
    left: -10px
}

@media(max-width:767px) {
    .nav-submenu__link .nav__arrow {
        left: -2.6666666667vw
    }
}

.nav__trial {
    margin-top: 46px;
    padding: 40px 30px 49px;
    background-color: #fff;
    border-radius: 10px
}

@media(max-width:767px) {
    .nav__trial {
        margin: 12.2666666667vw -2.6666666667vw 0;
        padding: 10.6666666667vw 8vw 13.0666666667vw;
        border-radius: 2.6666666667vw
    }
}

.nav__trial__header {
    font-weight: 500;
    font-size: 17px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .nav__trial__header {
        font-size: 4.5333333333vw;
        line-height: 8vw
    }
}

.nav__trial__link {
    margin-top: 20px;
    text-align: center
}

@media(max-width:767px) {
    .nav__trial__link {
        margin-top: 5.3333333333vw
    }
}

.nav__theme {
    width: 85.3333333333vw;
    margin: auto
}

.notfound {
    text-align: center
}

.notfound__img {
    position: relative;
    max-width: 910px;
    margin: -36px auto -24px
}

@media(max-width:767px) {
    .notfound__img {
        width: 100%;
        margin: 0
    }
}

.notfound__img img {
    max-width: 100%;
    height: auto
}

.notfound__balloon {
    position: absolute;
    display: inline-block
}

@media(max-width:767px) {
    .notfound__balloon {
        height: 19.2vw
    }
    .notfound__balloon img {
        max-width: none;
        width: auto;
        height: 100%
    }
}

.notfound__balloon--01 {
    top: 135px;
    left: 108px
}

@media(max-width:767px) {
    .notfound__balloon--01 {
        top: 2.6666666667vw;
        left: -1.3333333333vw
    }
    .notfound__balloon--01 img {
        max-width: none;
        width: 62.9333333333vw;
        height: auto
    }
}

.notfound__balloon--02 {
    bottom: 75px;
    right: 135px
}

@media(max-width:767px) {
    .notfound__balloon--02 {
        bottom: 0;
        right: 0
    }
    .notfound__balloon--02 img {
        max-width: none;
        width: auto;
        height: 100%
    }
}

.notfound__header {
    font-weight: 700;
    font-size: 32px;
    letter-spacing: .08em;
    line-height: 58px;
    color: #6c5ded
}

@media(max-width:767px) {
    .notfound__header {
        font-weight: 700;
        font-size: 5.6vw;
        letter-spacing: .05em;
        line-height: 9.0666666667vw;
        text-align: center;
        color: #6c5ded
    }
}

.notfound__description {
    margin-top: 24px;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .notfound__description {
        padding: 0 6.9333333333vw;
        font-weight: 400;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        text-align: left;
        color: #222
    }
}

.notfound__link {
    margin-top: 40px
}

@media(max-width:767px) {
    .notfound__link {
        margin-top: 5.3333333333vw
    }
}

.online-about {
    padding: 113px 0 120px;
    background-image: url(../images/online-lesson/haikei.jpg);
    background-size: cover
}

@media(max-width:767px) {
    .online-about {
        padding: 9.3333333333vw 0 13.3333333333vw
    }
}

.online-about__copy {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 50px;
    text-align: center;
    color: #5644ed
}

@media(max-width:767px) {
    .online-about__copy {
        font-size: 12vw
    }
}

.online-about__title {
    margin-top: 40px;
    font-weight: 700;
    font-size: 35px;
    letter-spacing: .05em;
    line-height: 49px;
    text-align: center;
    color: #5644ed
}

@media(max-width:767px) {
    .online-about__title {
        margin: 0 auto;
        font-size: 4.8vw
    }
}

.online-about__description {
    margin: 30px auto 0;
    width: 670px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .online-about__description {
        margin: -.8vw auto 0;
        width: 100%;
        padding: 0 5.3333333333vw;
        font-size: 4vw;
        line-height: 8vw
    }
}

.online-case-bottom.l-section.l-section--copy {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-bottom: 0;
    padding-top: 70px
}

@media(max-width:767px) {
    .online-case-bottom.l-section.l-section--copy {
        padding-top: 0
    }
}

.online-case-bottom.l-section.l-section--copy .l-section__copy {
    top: 0;
    bottom: 0;
    margin: auto
}

@media(max-width:767px) {
    .online-case-bottom.l-section.l-section--copy .l-section__copy {
        bottom: 16vw
    }
}

[data-theme-color=orange].online-case-bottom.l-section.l-section--copy {
    margin-top: 0;
    padding-bottom: 60px
}

@media(max-width:767px) {
    [data-theme-color=orange].online-case-bottom.l-section.l-section--copy {
        padding-bottom: 4.8vw
    }
}

[data-theme-color=orange].online-case-bottom.l-section.l-section--copy .l-online__body,
[data-theme-color=orange].online-case-bottom.l-section.l-section--copy .online-case-bottom__image {
    padding-bottom: 0
}

[data-theme-color=orange].online-case-bottom.l-section.l-section--copy .l-section__copy {
    top: auto;
    bottom: 6px
}

@media(max-width:767px) {
    [data-theme-color=orange].online-case-bottom.l-section.l-section--copy .l-section__copy {
        bottom: .5333333333vw
    }
}

.online-case-bottom__image {
    width: 300px;
    height: 230px;
    margin: 60px auto 0;
    padding-bottom: 30px
}

@media(max-width:767px) {
    .online-case-bottom__image {
        margin: 0 auto 1.8666666667vw;
        padding-bottom: 0;
        width: 66.6666666667vw;
        height: 44.4453333333vw
    }
}

.online-case-bottom__header {
    display: inline-block;
    position: relative
}

.online-case-bottom__header:after,
.online-case-bottom__header:before {
    position: absolute;
    content: " ";
    bottom: 10px;
    display: block;
    width: 36.94px;
    height: 41.29px;
    background-image: url(../images/online-lesson/line-pink.svg);
    background-size: cover;
    background-position: 50%
}

@media(max-width:767px) {
    .online-case-bottom__header:after,
    .online-case-bottom__header:before {
        bottom: auto;
        top: 6.1333333333vw;
        width: 9.8506666667vw;
        height: 11.0106666667vw
    }
}

.online-case-bottom__header:before {
    left: -56.94px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1)
}

@media(max-width:767px) {
    .online-case-bottom__header:before {
        left: -7.184vw
    }
}

.online-case-bottom__header:after {
    right: -56.94px
}

@media(max-width:767px) {
    .online-case-bottom__header:after {
        right: -7.184vw
    }
}

.online-case-bottom__copy {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .08em;
    line-height: 37px;
    color: #222
}

@media(max-width:767px) {
    .online-case-bottom__copy {
        font-size: 4.2666666667vw;
        line-height: 7.4666666667vw
    }
}

.online-case-bottom__title {
    font-weight: 700;
    font-size: 30px;
    letter-spacing: .08em;
    line-height: 64px
}

@media(max-width:767px) {
    .online-case-bottom__title {
        margin-top: 4.8vw;
        font-size: 6.1333333333vw;
        line-height: 10.4vw
    }
}

.online-case-bottom__title b {
    color: #da5a9a
}

.online-case-bottom__balloon {
    bottom: 136px;
    padding: 10px 18px;
    position: absolute;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 228px;
    border-radius: 20px 20px 0 20px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-case-bottom__balloon {
        display: none;
        bottom: 90px;
        right: 120px;
        padding: 2.1333333333vw 4.8vw;
        width: 60.8vw;
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw;
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 8vw
    }
}

.online-case-bottom__balloon:before {
    position: absolute;
    bottom: 0;
    right: -12px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: none;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff
}

@media(max-width:767px) {
    .online-case-bottom__balloon:before {
        right: -3.2vw;
        border-bottom: 3.2vw solid #fff;
        border-right: 3.2vw solid transparent
    }
}

.online-case-bottom__balloon--03 {
    left: 50%;
    width: 274px;
    -webkit-transform: translateX(-402px);
    transform: translateX(-402px)
}

.online-case-bottom__balloon--04 {
    right: 50%;
    width: 303px;
    -webkit-transform: translateX(432px);
    transform: translateX(432px);
    border-radius: 20px 20px 20px 0
}

.online-case-bottom__balloon--04:before {
    left: -12px;
    border-left: 12px solid transparent;
    border-right: none
}

.online-case-bottom__balloon--05 {
    right: -160px;
    bottom: 166px;
    width: 215px
}

@media(max-width:1359px) {
    .online-case-bottom__balloon--05 {
        right: -220px;
        bottom: 59px
    }
}

@media(max-width:767px) {
    .online-case-bottom__balloon--05 {
        right: -160px;
        bottom: 166px;
        width: 215px
    }
}

.online-case-bottom__balloon--06 {
    left: 200px;
    bottom: 165px;
    width: 245px;
    text-align: center;
    border-radius: 20px 20px 20px 0
}

.online-case-bottom__balloon--06:before {
    left: -12px;
    border-left: 12px solid transparent;
    border-right: none
}

@media(max-width:1359px) {
    .online-case-bottom__balloon--06 {
        bottom: 57px;
        left: 110px
    }
}

@media(max-width:767px) {
    .online-case-bottom__balloon--06 {
        left: 32vw;
        bottom: 58.6666666667vw;
        width: 57.3333333333vw;
        text-align: center;
        border-radius: 5.3333333333vw 5.3333333333vw 5.3333333333vw 0
    }
    .online-case-bottom__balloon--06:before {
        left: -3.2vw;
        border-left: 3.2vw solid transparent;
        border-right: none
    }
}

.online-case-bottom__plan__image {
    position: relative;
    z-index: 2;
    left: -40px;
    width: 600px;
    height: 400px;
    margin: 30px auto -10px
}

@media(max-width:767px) {
    .online-case-bottom__plan__image {
        margin: 19.4666666667vw auto -1.3333333333vw;
        left: -5.6vw;
        width: 85.3333333333vw;
        height: 56.888vw
    }
}

.online-case-bottom__plan__illust--01 {
    position: absolute;
    z-index: -1;
    top: -17px;
    left: 136px;
    width: 150px;
    height: 225px
}

@media(max-width:767px) {
    .online-case-bottom__plan__illust--01 {
        top: -9.6vw;
        left: 21.6vw;
        width: 21.3333333333vw;
        height: 32vw
    }
}

.online-case-bottom__plan__illust--01 p {
    position: absolute;
    white-space: nowrap;
    top: 16px;
    left: -20px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #222;
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg)
}

@media(max-width:767px) {
    .online-case-bottom__plan__illust--01 p {
        top: .2666666667vw;
        left: -3.2vw;
        font-size: 2.6666666667vw;
        line-height: 7.4666666667vw
    }
}

.online-case-bottom__plan__illust--02 {
    position: absolute;
    top: 64px;
    right: 41px;
    width: 140px;
    height: 210px;
    white-space: nowrap
}

@media(max-width:767px) {
    .online-case-bottom__plan__illust--02 {
        top: 6.1333333333vw;
        right: 5.8666666667vw;
        width: 21.3333333333vw;
        height: 32vw
    }
}

.online-case-bottom__plan__illust--02 p {
    position: absolute;
    top: -2px;
    left: 30px;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #222;
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg)
}

@media(max-width:767px) {
    .online-case-bottom__plan__illust--02 p {
        top: -5.6vw;
        left: 1.3333333333vw;
        font-size: 2.6666666667vw;
        line-height: 7.4666666667vw
    }
}

[data-theme-color=purple] .online-case-bottom__title b {
    color: #6c5ded
}

[data-theme-color=purple] .online-case-bottom__header:after,
[data-theme-color=purple] .online-case-bottom__header:before {
    background-image: url(../images/online-lesson/line-purple.svg)
}

[data-theme-color=green] .online-case-bottom__title b {
    color: #2cc697
}

[data-theme-color=green] .online-case-bottom__header:after,
[data-theme-color=green] .online-case-bottom__header:before {
    background-image: url(../images/online-lesson/line-green.svg)
}

[data-theme-color=pink] .online-case-bottom__title b {
    color: #eb4d9c
}

[data-theme-color=pink] .online-case-bottom__header:after,
[data-theme-color=pink] .online-case-bottom__header:before {
    background-image: url(../images/online-lesson/line-pink.svg)
}

[data-theme-color=orange] .online-case-bottom__title b {
    color: #ef3e4c
}

[data-theme-color=orange] .online-case-bottom__header:after,
[data-theme-color=orange] .online-case-bottom__header:before {
    background-image: url(../images/online-lesson/line-orange.svg)
}

[data-theme-color=blue] .online-case-bottom__title b {
    color: #33b6dd
}

[data-theme-color=blue] .online-case-bottom__header:after,
[data-theme-color=blue] .online-case-bottom__header:before {
    background-image: url(../images/online-lesson/line-blue.svg)
}

[data-theme-color=yellow] .online-case-bottom__title b {
    color: #fc9e1d
}

[data-theme-color=yellow] .online-case-bottom__header:after,
[data-theme-color=yellow] .online-case-bottom__header:before {
    background-image: url(../images/online-lesson/line-yellow.svg)
}

[data-theme-color=line] .online-case-bottom__title b {
    color: #06c755
}

[data-theme-color=line] .online-case-bottom__header:after,
[data-theme-color=line] .online-case-bottom__header:before {
    background-image: url(../images/online-lesson/line-line.svg)
}

[data-theme-color=pink].online-case-bottom.l-section.l-section--copy .l-section__copy {
    top: auto;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 264px;
    margin: auto
}

@media(max-width:767px) {
    [data-theme-color=pink].online-case-bottom.l-section.l-section--copy .l-section__copy {
        display: none
    }
}

[data-theme-color=blue].online-case-bottom.l-section.l-section--copy .l-section__copy {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 400px;
    margin: auto;
    top: auto;
    bottom: 0
}

@media(max-width:767px) {
    [data-theme-color=blue].online-case-bottom.l-section.l-section--copy .l-section__copy {
        height: 56.888vw
    }
}

[data-theme-color=blue].online-case-bottom.l-section.l-section--copy .online-case-bottom__header {
    margin-top: -6.1333333333vw
}

@media(max-width:767px) {
    [data-theme-color=blue].online-case-bottom.l-section.l-section--copy .online-case-bottom__header:after,
    [data-theme-color=blue].online-case-bottom.l-section.l-section--copy .online-case-bottom__header:before {
        top: 10.1333333333vw
    }
}

@media(max-width:767px) {
    [data-theme-color=blue].online-case-bottom.l-section.l-section--copy .online-case-bottom__header:before {
        left: -1.3333333333vw
    }
}

@media(max-width:767px) {
    [data-theme-color=blue].online-case-bottom.l-section.l-section--copy .online-case-bottom__header:after {
        right: -1.3333333333vw
    }
}

@media(max-width:767px) {
    [data-theme-color=blue].online-case-bottom.l-section.l-section--copy .online-case-bottom__title {
        margin: 0;
        font-size: 4.5333333333vw;
        line-height: 9.0666666667vw
    }
}

.online-case-bottom__image--faq {
    position: relative;
    width: 350px;
    height: 233.33px;
    margin: 0 auto
}

@media(max-width:1359px) {
    .online-case-bottom__image--faq {
        width: 175px;
        height: 116.665px;
        margin: 0 auto
    }
}

@media(max-width:767px) {
    .online-case-bottom__image--faq {
        width: 48vw;
        height: 31.92vw;
        margin: 0
    }
}

.online-case-bottom__image--faq .illust {
    right: -340px
}

@media(max-width:767px) {
    .online-case-bottom__image--faq .illust {
        right: 0
    }
}

@media(max-width:767px) {
    .online-case-bottom__image--faq .online-case-bottom__balloon {
        display: block
    }
}

.online-case-bottom__image--faq--01 {
    position: absolute;
    top: 15px;
    left: 0;
    right: auto;
    bottom: auto
}

.online-case-bottom__image--faq--01 .illust {
    right: 0
}

@media(max-width:767px) {
    .online-case-bottom__image--faq--01 {
        position: static;
        top: 0;
        margin-top: 10.1333333333vw
    }
    .online-case-bottom__image--faq--01 .online-case-bottom__balloon {
        left: 32.2666666667vw;
        bottom: 18.6666666667vw;
        right: auto
    }
}

.online-case-bottom__image--faq--02 {
    position: relative
}

@media(max-width:767px) {
    .online-case-bottom__image--faq--02 {
        margin-top: 1.6vw
    }
    .online-case-bottom__image--faq--02 .online-case-bottom__balloon {
        width: 50.6666666667vw;
        left: 18.6666666667vw;
        bottom: 18.6666666667vw;
        right: auto
    }
}

.online-case-bottom__image--faq--02 .illust {
    right: -360px
}

@media(max-width:1359px) {
    .online-case-bottom__image--faq--02 .illust {
        right: -360px
    }
}

@media(max-width:767px) {
    .online-case-bottom__image--faq--02 .illust {
        right: -49.0666666667vw
    }
}

.online-case__list {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .online-case__list {
        display: block
    }
}

.online-case__item {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 1 32.1428571429%;
    padding: 10px 20px 20px;
    background-color: #fff;
    border-radius: 10px
}

@media(max-width:767px) {
    .online-case__item {
        margin-top: 5.3333333333vw;
        padding: 2.6666666667vw 5.3333333333vw 10.1333333333vw
    }
    .online-case__item:first-child {
        margin-top: 0
    }
}

.online-case__number {
    position: absolute;
    top: 0;
    left: 0;
    width: 68px;
    height: 65px;
    border-radius: 10px 0;
    background: rgba(235, 77, 156, .8);
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 61px
}

.online-case__number,
.online-case__number b {
    font-weight: 500;
    letter-spacing: .05em;
    text-align: center;
    color: #fff
}

.online-case__number b {
    display: block;
    font-size: 30px;
    line-height: 1
}

@media(max-width:767px) {
    .online-case__number {
        padding: 2.6666666667vw 0;
        width: 16.9546666667vw;
        height: 16.2053333333vw;
        border-radius: 2.6666666667vw 0;
        background: #eb4d9c;
        opacity: .8;
        font-size: 3.4666666667vw;
        line-height: 1
    }
    .online-case__number,
    .online-case__number b {
        font-weight: 500;
        letter-spacing: .05em;
        text-align: center;
        color: #fff
    }
    .online-case__number b {
        display: block;
        font-size: 6.9333333333vw
    }
}

.online-case__case {
    padding-left: 68px;
    font-weight: 500;
    font-size: 25px;
    letter-spacing: .05em;
    line-height: 50px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-case__case {
        padding-left: 16vw;
        font-weight: 500;
        font-size: 5.3333333333vw;
        letter-spacing: .05em;
        line-height: 13.3333333333vw;
        text-align: left;
        color: #222
    }
}

.online-case__case small {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 35px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-case__case small {
        font-weight: 500;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 9.3333333333vw;
        text-align: left;
        color: #222
    }
}

.online-case__icon {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 26px auto 0
}

@media(max-width:767px) {
    .online-case__icon {
        margin: 3.4666666667vw auto 0;
        width: 40.5333333333vw;
        height: 40.5333333333vw
    }
}

.online-case__icon img {
    width: 100%;
    height: auto;
    border-radius: 50%
}

.online-case__title {
    margin-top: 20px;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: left;
    color: #eb4d9c
}

@media(max-width:767px) {
    .online-case__title {
        font-weight: 700;
        font-size: 4.8vw;
        letter-spacing: .05em;
        line-height: 8vw;
        text-align: left
    }
}

.online-case__description {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-case__description {
        margin-top: 2.6666666667vw;
        font-weight: 400;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        text-align: left;
        color: #222
    }
}

.online-case__button {
    width: 276px;
    margin: 43px auto 0
}

@media(max-width:767px) {
    .online-case__button {
        width: 69.3333333333vw;
        margin: 8vw auto 0
    }
    .online-case__button>* {
        width: 100%
    }
}

.online-cv {
    padding: 95px 0 120px
}

@media(max-width:767px) {
    .online-cv {
        padding: 16.2666666667vw 0 10.6666666667vw
    }
}

.online-cv__copy {
    position: relative;
    width: 100%;
    font-weight: 500;
    font-size: 23px;
    letter-spacing: .08em;
    line-height: 59px;
    text-align: center;
    color: #ef3e4c
}

@media(max-width:767px) {
    .online-cv__copy {
        font-size: 4.2666666667vw;
        letter-spacing: .08em;
        line-height: 9.3333333333vw;
        text-align: center
    }
}

.online-cv__copy:after,
.online-cv__copy:before {
    position: absolute;
    top: 23px;
    content: " ";
    display: block;
    width: 36.94px;
    height: 41px;
    background-image: url(../images/online-lesson/line-orange.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%
}

@media(max-width:767px) {
    .online-cv__copy:after,
    .online-cv__copy:before {
        top: 2.6666666667vw;
        width: 8.2666666667vw;
        height: 9.3333333333vw;
        background-image: url(../images/online-lesson/line-orange-sp.svg)
    }
}

.online-cv__copy:before {
    left: 50%;
    -webkit-transform: translateX(-235px) scaleX(-1);
    transform: translateX(-235px) scaleX(-1)
}

@media(max-width:767px) {
    .online-cv__copy:before {
        -webkit-transform: translateX(-41.8666666667vw) scaleX(-1);
        transform: translateX(-41.8666666667vw) scaleX(-1)
    }
}

.online-cv__copy:after {
    right: 50%;
    -webkit-transform: translateX(235px);
    transform: translateX(235px)
}

@media(max-width:767px) {
    .online-cv__copy:after {
        -webkit-transform: translateX(41.8666666667vw);
        transform: translateX(41.8666666667vw)
    }
}

.online-cv__image {
    position: relative;
    width: 300px;
    margin: 24px auto 0
}

@media(max-width:767px) {
    .online-cv__image {
        width: 38.6666666667vw;
        margin: 14.4vw auto 0
    }
}

.online-cv__illust {
    width: 300px;
    height: 200px
}

@media(max-width:767px) {
    .online-cv__illust {
        width: 38.6666666667vw;
        height: 25.8426666667vw
    }
}

.online-cv__illust img {
    width: 100%;
    height: auto
}

.online-cv__balloon {
    position: absolute;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 54px;
    background: #fff;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .online-cv__balloon {
        height: 12vw;
        font-size: 2.6666666667vw;
        line-height: 8vw
    }
}

.online-cv__balloon:before {
    position: absolute;
    bottom: 0;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: none;
    border-bottom: 12px solid #fff
}

@media(max-width:767px) {
    .online-cv__balloon:before {
        border-bottom: 3.2vw solid #fff
    }
}

.online-cv__balloon--01 {
    top: 56px;
    left: -170px;
    width: 190px;
    border-radius: 20px 20px 0 20px
}

@media(max-width:767px) {
    .online-cv__balloon--01 {
        top: -6.6666666667vw;
        left: -29.3333333333vw;
        width: 33.0666666667vw;
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw
    }
}

.online-cv__balloon--01:before {
    right: -13px;
    border-left: none;
    border-right: 13px solid transparent
}

@media(max-width:767px) {
    .online-cv__balloon--01:before {
        right: -2.9333333333vw;
        border-left: none;
        border-right: 3.2vw solid transparent
    }
}

.online-cv__balloon--02 {
    top: 78px;
    right: -187px;
    width: 207px;
    border-radius: 20px 20px 20px 0
}

@media(max-width:767px) {
    .online-cv__balloon--02 {
        top: -6.6666666667vw;
        right: -29.3333333333vw;
        width: 36vw;
        border-radius: 5.3333333333vw 5.3333333333vw 5.3333333333vw 0
    }
}

.online-cv__balloon--02:before {
    left: -13px;
    border-right: none;
    border-left: 13px solid transparent
}

@media(max-width:767px) {
    .online-cv__balloon--02:before {
        left: -2.9333333333vw;
        border-right: none;
        border-left: 3.2vw solid transparent
    }
}

.online-cv__title {
    margin-top: -12px;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: .05em;
    line-height: 69px;
    text-align: center;
    color: #ef3e4c
}

.online-cv__title span {
    position: relative;
    z-index: 2;
    display: inline-block;
    vertical-align: bottom
}

.online-cv__title span:before {
    left: 0;
    bottom: 5px;
    position: absolute;
    z-index: -1;
    content: " ";
    display: block;
    width: 100%;
    height: 10px;
    background-color: hsla(0, 0%, 100%, .6)
}

@media(max-width:767px) {
    .online-cv__title span:before {
        bottom: 0;
        height: 1.3333333333vw
    }
}

@media(max-width:767px) {
    .online-cv__title {
        margin-top: -1.3333333333vw;
        font-size: 4.8vw;
        letter-spacing: .05em;
        line-height: 6.6666666667vw;
        text-align: center
    }
}

.online-cv__button {
    margin-top: 40px;
    text-align: center
}

@media(max-width:767px) {
    .online-cv__button {
        margin-top: 4.2666666667vw
    }
}

.online-flow__item {
    padding: 3px 44px 80px 87px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: relative
}

.online-flow__item:last-child {
    padding-bottom: 0
}

@media(max-width:767px) {
    .online-flow__item {
        margin-top: 16vw;
        padding: 0;
        display: block
    }
    .online-flow__item:first-child {
        margin-top: 0
    }
    .online-flow__item:first-child .online-flow__thumb {
        padding-bottom: 10.6666666667vw
    }
}

.online-flow__item:before {
    position: absolute;
    top: 0;
    left: 30px;
    content: " ";
    display: block;
    width: 6px;
    height: 100%;
    background: #33b6dd
}

@media(max-width:767px) {
    .online-flow__item:before {
        display: none
    }
}

.online-flow__item:first-child:before {
    background: #45cddc
}

.online-flow__item:nth-child(2):before {
    background: #4ab3e2
}

.online-flow__item:nth-child(3):before {
    background: #5192ea
}

.online-flow__item:nth-child(4):before {
    display: none
}

.online-flow__content {
    -webkit-box-flex: 0;
    flex: 0 1 50.5561172902%
}

.online-flow__content--01 {
    padding-bottom: 130px
}

@media(max-width:767px) {
    .online-flow__content--01 {
        padding-bottom: 0
    }
}

.online-flow__thumb {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 1 42.4671385238%;
    width: 42.4671385238%;
    height: 28.3114256825%
}

@media(max-width:767px) {
    .online-flow__thumb {
        margin-top: 5.3333333333vw;
        width: 100%;
        height: auto
    }
}

.online-flow__thumb img {
    border-radius: 10px;
    width: 100%;
    height: auto
}

@media(max-width:767px) {
    .online-flow__thumb img {
        border-radius: 2.6666666667vw
    }
}

.online-flow__number {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    background: #fff;
    border: 3px solid #5cb4d9;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    color: #33b6dd
}

@media(max-width:767px) {
    .online-flow__number {
        width: 10.1333333333vw;
        height: 10.1333333333vw;
        font-weight: 500;
        font-size: 4.8vw;
        letter-spacing: 0;
        text-align: center;
        border: .5333333333vw solid #33b6dd
    }
}

.online-flow__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #33b6dd
}

@media(max-width:767px) {
    .online-flow__title {
        padding-left: 13.3333333333vw;
        font-weight: 700;
        font-size: 4.8vw;
        letter-spacing: .05em;
        line-height: 9.3333333333vw;
        text-align: left
    }
}

.online-flow__description {
    margin-top: 14px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-flow__description {
        font-weight: 400;
        font-size: 4.2666666667vw;
        line-height: 8vw;
        text-align: left;
        color: #222
    }
}

.online-ex {
    margin-top: 10px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 20px;
    text-align: left;
    color: #7c7c7c
}

.online-flow__tool {
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    border-radius: 10px;
    padding: 20px;
    background: #f5f5f5
}

@media(max-width:767px) {
    .online-flow__tool {
        margin-top: 5.3333333333vw;
        border-radius: 2.6666666667vw;
        padding: 5.3333333333vw
    }
}

.online-flow__tool__image {
    -webkit-box-flex: 0;
    flex: 0 1 100px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:767px) {
    .online-flow__tool__image {
        -webkit-box-flex: 0;
        flex: 0 1 20.3389830508%;
        display: block
    }
}

.online-flow__tool__text {
    -webkit-box-flex: 0;
    flex: 0 1 329px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .online-flow__tool__text {
        -webkit-box-flex: 0;
        flex: 0 1 72.2033898305%;
        font-size: 3.4666666667vw;
        letter-spacing: .05em;
        line-height: 6.72vw
    }
}

.online-flow__tool__text a {
    display: inline-block;
    margin-top: 5px;
    color: #33b6dd
}

@media(max-width:767px) {
    .online-flow__tool__text a {
        margin-top: 1.3333333333vw
    }
}

.online-flow__chara {
    position: absolute;
    bottom: 0
}

.online-flow__balloon {
    padding: 10px 18px;
    position: absolute;
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 20px 20px 20px 20px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-flow__balloon {
        bottom: 90px;
        right: 120px;
        padding: 0;
        width: 60.8vw;
        height: 12.8vw;
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw;
        font-size: 3.2vw;
        letter-spacing: .05em
    }
}

.online-flow__balloon:before {
    position: absolute;
    bottom: 0;
    right: -12px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: none;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff
}

@media(max-width:767px) {
    .online-flow__balloon:before {
        right: -3.2vw;
        border-bottom: 3.2vw solid #fff;
        border-right: 3.2vw solid transparent
    }
}

.online-flow__chara--01 {
    position: absolute;
    left: 66px;
    bottom: 0;
    width: 120px;
    height: 225px
}

@media(max-width:767px) {
    .online-flow__chara--01 {
        left: -.5333333333vw;
        bottom: -10.6666666667vw;
        z-index: 2;
        width: 26.6666666667vw;
        height: 40vw
    }
}

.online-flow__chara--01 .online-flow__balloon {
    left: 132px;
    top: 65px;
    border-radius: 20px 20px 20px 0
}

@media(max-width:767px) {
    .online-flow__chara--01 .online-flow__balloon {
        width: 57.3333333333vw;
        left: 22.6666666667vw;
        top: 11.7333333333vw;
        border-radius: 5.3333333333vw 5.3333333333vw 5.3333333333vw 0
    }
}

.online-flow__chara--01 .online-flow__balloon:before {
    left: -12px;
    border-left: 12px solid transparent;
    border-right: none
}

@media(max-width:767px) {
    .online-flow__chara--01 .online-flow__balloon:before {
        left: -3.2vw;
        border-left: 3.2vw solid transparent;
        border-right: none
    }
}

.online-flow__chara--02 {
    right: 28px;
    top: 197px;
    width: 112.29px;
    height: 112.29px
}

@media(max-width:767px) {
    .online-flow__chara--02 {
        width: 24vw;
        height: 24vw;
        right: 0;
        top: auto;
        bottom: 0
    }
}

.online-flow__chara--02 .online-flow__balloon {
    right: 122px;
    top: 8px;
    border-radius: 20px 20px 0 20px
}

@media(max-width:767px) {
    .online-flow__chara--02 .online-flow__balloon {
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw;
        width: 47.2vw;
        right: 27.7333333333vw;
        top: 4.5333333333vw
    }
}

.online-header__copy {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .06em;
    line-height: 49px;
    text-align: center;
    color: #222
}

.online-header__copy:after {
    content: " ";
    display: block;
    width: 456.01px;
    height: 13px;
    margin: auto;
    background-image: url(../images/online-lesson/header_bottom_green.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

@media(max-width:767px) {
    .online-header__copy:after {
        margin-top: 4vw;
        width: 83.7333333333vw;
        height: 2.3733333333vw
    }
}

@media(max-width:767px) {
    .online-header__copy {
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 5.3333333333vw
    }
}

.online-header__title {
    margin-top: 20px;
    text-align: center;
    vertical-align: bottom;
    font-weight: 700;
    font-size: 40px;
    letter-spacing: .05em;
    line-height: 64px;
    color: #222
}

@media(max-width:767px) {
    .online-header__title {
        margin-top: 1.3333333333vw;
        font-size: 6.1333333333vw;
        letter-spacing: .05em;
        line-height: 17.0666666667vw
    }
}

.online-header__title img {
    vertical-align: bottom;
    margin-right: 10px
}

@media(max-width:767px) {
    .online-header__title img {
        position: relative;
        top: -4.2666666667vw;
        margin-right: 1.0666666667vw;
        width: 7.344vw;
        height: 10.7866666667vw
    }
}

[data-theme-color=purple] .online-header__copy:after {
    background-image: url(../images/online-lesson/header_bottom_purple.svg)
}

[data-theme-color=green] .online-header__copy:after {
    background-image: url(../images/online-lesson/header_bottom_green.svg)
}

[data-theme-color=pink] .online-header__copy:after {
    background-image: url(../images/online-lesson/header_bottom_pink.svg)
}

[data-theme-color=orange] .online-header__copy:after {
    background-image: url(../images/online-lesson/header_bottom_orange.svg)
}

[data-theme-color=blue] .online-header__copy:after {
    background-image: url(../images/online-lesson/header_bottom_blue.svg)
}

[data-theme-color=yellow] .online-header__copy:after {
    background-image: url(../images/online-lesson/header_bottom_yellow.svg)
}

[data-theme-color=line] .online-header__copy:after {
    background-image: url(../images/online-lesson/header_bottom_line.svg)
}

@media(max-width:767px) {
    [data-theme-color=pink] .online-header__title {
        font-weight: 700;
        font-size: 4.8vw;
        letter-spacing: .05em;
        line-height: 6.6666666667vw;
        text-align: center;
        color: #222;
        vertical-align: bottom
    }
    [data-theme-color=pink] .online-header__title picture {
        margin-right: .8vw
    }
    [data-theme-color=pink] .online-header__title img {
        display: inline-block;
        vertical-align: bottom;
        width: 33.1253333333vw;
        height: 8.64vw;
        top: 1.8666666667vw
    }
}

.online-lesson {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    height: 100%
}

@media(max-width:767px) {
    .online-lesson {
        display: block
    }
}

.online-lesson__item {
    -webkit-box-flex: 0;
    flex: 0 1 48.9583333333%;
    height: 100%
}

@media(max-width:767px) {
    .online-lesson__item {
        margin-top: 8vw
    }
    .online-lesson__item:first-child {
        margin-top: 0
    }
}

.online-lesson__copy {
    position: relative;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #2cc697
}

@media(max-width:767px) {
    .online-lesson__copy {
        display: block;
        font-weight: 500;
        font-size: 4.8vw;
        letter-spacing: .05em;
        line-height: 8vw;
        text-align: center
    }
}

.online-lesson__copy:after,
.online-lesson__copy:before {
    position: absolute;
    content: " ";
    display: block;
    width: 36.94px;
    height: 41.29px;
    background-image: url(../images/online-lesson/line-green.svg)
}

.online-lesson__copy:before {
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-170px) scaleX(-1);
    transform: translateX(-170px) scaleX(-1)
}

.online-lesson__copy:after {
    top: 10px;
    right: 50%;
    -webkit-transform: translateX(170px);
    transform: translateX(170px)
}

.online-lesson__content {
    margin-top: 26px;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    height: 100%
}

@media(max-width:767px) {
    .online-lesson__content {
        margin-top: 7.7333333333vw;
        padding: 6.4vw 5.3333333333vw 7.4666666667vw;
        border-radius: 2.6666666667vw
    }
}

.online-lesson__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .08em;
    line-height: 32px;
    text-align: center;
    color: #2cc697
}

@media(max-width:767px) {
    .online-lesson__title {
        font-size: 5.3333333333vw;
        letter-spacing: .08em;
        line-height: 5.6vw
    }
}

.online-lesson__thumb {
    margin-top: 22px
}

@media(max-width:767px) {
    .online-lesson__thumb {
        margin-top: 5.3333333333vw
    }
}

.online-lesson__description {
    margin-top: 35px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-lesson__description {
        margin-top: 4.5333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.online-lesson__plan {
    margin-top: 17px
}

.online-lesson__plan__chara {
    text-align: center
}

@media(max-width:767px) {
    .online-lesson__plan__chara img {
        width: 66.6666666667vw;
        height: 44.4453333333vw
    }
}

.online-lesson__plan__course {
    margin: 20px auto 0;
    width: 90px;
    height: 28px;
    border-radius: 14px;
    background: #f2f2f2;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .online-lesson__plan__course {
        margin: 20px auto 0;
        width: 90px;
        height: 28px;
        border-radius: 14px;
        font-size: 12px;
        letter-spacing: .05em;
        line-height: 28px
    }
}

.online-lesson__plan__price {
    margin-top: 9px;
    text-align: center
}

.online-lesson__plan__price__inner {
    position: relative;
    display: inline-block
}

.online-lesson__plan__price__inner:before {
    position: absolute;
    bottom: -2px;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 10px;
    background: #eb4d9c;
    opacity: .5
}

@media(max-width:767px) {
    .online-lesson__plan__price__inner:before {
        bottom: 0;
        width: 100%;
        height: 2.6666666667vw
    }
}

.online-lesson__plan__price__inner small {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .online-lesson__plan__price__inner small {
        font-size: 5.0666666667vw;
        letter-spacing: .05em;
        line-height: 9.0666666667vw
    }
}

.online-lesson__plan__price__inner b {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 44px;
    letter-spacing: .05em;
    text-align: right;
    color: #222
}

.online-lesson__plan__price__inner b:after {
    content: "\203B  1";
    font-size: 10px;
    position: absolute;
    top: 12px;
    right: 1px;
    color: #222;
    letter-spacing: -.1em
}

@media(max-width:767px) {
    .online-lesson__plan__price__inner b:after {
        font-size: 2.6666666667vw;
        position: absolute;
        top: 1.6vw;
        right: 1.0666666667vw
    }
}

@media(max-width:767px) {
    .online-lesson__plan__price__inner b {
        font-size: 10.6666666667vw;
        letter-spacing: .05em
    }
}

.online-lesson__plan__list {
    width: 73.1707317073%;
    margin: 25px auto 0;
    padding: 19px 0 18px;
    border-top: 1px solid #ccc
}

@media(max-width:767px) {
    .online-lesson__plan__list {
        width: 93.2203389831%;
        margin: 6.6666666667vw auto 0;
        padding: 5.0666666667vw 0 4.8vw;
        border-top: 1px solid #ccc
    }
}

.online-lesson__plan__list li {
    position: relative;
    padding-left: 30px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .online-lesson__plan__list li {
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw
    }
}

.online-lesson__plan__list li:before {
    position: absolute;
    top: 0;
    left: 10px;
    content: "\25CF";
    display: block;
    font-size: 8px;
    color: #a5a5a5
}

[data-theme-color=purple] .online-lesson__copy,
[data-theme-color=purple] .online-lesson__title {
    color: #6c5ded
}

[data-theme-color=purple] .online-lesson__copy:after,
[data-theme-color=purple] .online-lesson__copy:before {
    background-image: url(../images/online-lesson/line-purple.svg)
}

[data-theme-color=green] .online-lesson__copy,
[data-theme-color=green] .online-lesson__title {
    color: #2cc697
}

[data-theme-color=green] .online-lesson__copy:after,
[data-theme-color=green] .online-lesson__copy:before {
    background-image: url(../images/online-lesson/line-green.svg)
}

[data-theme-color=pink] .online-lesson__copy,
[data-theme-color=pink] .online-lesson__title {
    color: #eb4d9c
}

[data-theme-color=pink] .online-lesson__copy:after,
[data-theme-color=pink] .online-lesson__copy:before {
    background-image: url(../images/online-lesson/line-pink.svg)
}

[data-theme-color=orange] .online-lesson__copy,
[data-theme-color=orange] .online-lesson__title {
    color: #ef3e4c
}

[data-theme-color=orange] .online-lesson__copy:after,
[data-theme-color=orange] .online-lesson__copy:before {
    background-image: url(../images/online-lesson/line-orange.svg)
}

[data-theme-color=blue] .online-lesson__copy,
[data-theme-color=blue] .online-lesson__title {
    color: #33b6dd
}

[data-theme-color=blue] .online-lesson__copy:after,
[data-theme-color=blue] .online-lesson__copy:before {
    background-image: url(../images/online-lesson/line-blue.svg)
}

[data-theme-color=yellow] .online-lesson__copy,
[data-theme-color=yellow] .online-lesson__title {
    color: #fc9e1d
}

[data-theme-color=yellow] .online-lesson__copy:after,
[data-theme-color=yellow] .online-lesson__copy:before {
    background-image: url(../images/online-lesson/line-yellow.svg)
}

[data-theme-color=line] .online-lesson__copy,
[data-theme-color=line] .online-lesson__title {
    color: #06c755
}

[data-theme-color=line] .online-lesson__copy:after,
[data-theme-color=line] .online-lesson__copy:before {
    background-image: url(../images/online-lesson/line-line.svg)
}

[data-theme-color=blue] .online-lesson__title {
    margin-top: 14px;
    color: #222
}

@media(max-width:767px) {
    [data-theme-color=blue] .online-lesson__title {
        margin-top: 3.7333333333vw
    }
}

.online-problem {
    position: relative;
    z-index: 3;
    background-color: #fff
}

.online-problem__inner {
    position: relative;
    padding: 120px 0
}

@media(max-width:767px) {
    .online-problem__inner {
        padding: 10.6666666667vw 0 65.8666666667vw
    }
}

.online-problem__inner:after {
    position: absolute;
    bottom: -28px;
    width: 0;
    height: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: " ";
    display: block;
    border: 37px solid transparent;
    border-top: 28px solid #fff;
    border-bottom: none
}

@media(max-width:767px) {
    .online-problem__inner:after {
        display: none
    }
}

.online-problem__title {
    position: relative;
    font-weight: 700;
    font-size: 35px;
    letter-spacing: .08em;
    line-height: 69px;
    text-align: left
}

@media(max-width:767px) {
    .online-problem__title {
        font-size: 4.8vw;
        letter-spacing: .08em;
        line-height: 9.3333333333vw;
        text-align: center
    }
}

.online-problem__title span {
    top: 73px;
    position: absolute;
    content: " ";
    width: 6px;
    height: 6px;
    display: block;
    background-color: #33b6dd;
    border-radius: 50%
}

@media(max-width:767px) {
    .online-problem__title span {
        top: 9.8666666667vw;
        width: 1.0666666667vw;
        height: 1.0666666667vw
    }
}

.online-problem__title span:first-of-type {
    left: 126px
}

@media(max-width:767px) {
    .online-problem__title span:first-of-type {
        left: 28.2666666667vw
    }
}

.online-problem__title span:nth-of-type(2) {
    left: 166px
}

@media(max-width:767px) {
    .online-problem__title span:nth-of-type(2) {
        left: 33.3333333333vw
    }
}

.online-problem__title span:nth-of-type(3) {
    left: 206px
}

@media(max-width:767px) {
    .online-problem__title span:nth-of-type(3) {
        left: 38.4vw
    }
}

.online-problem__list {
    margin-top: 19px
}

@media(max-width:767px) {
    .online-problem__list {
        margin-top: 6.4vw
    }
}

.online-problem__list>li {
    margin-top: 20px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .online-problem__list>li {
        margin-right: -1.3333333333vw;
        margin-top: 1.6vw;
        font-size: 3.7333333333vw;
        letter-spacing: .05em;
        line-height: 8vw
    }
}

.online-problem__list>li:first-child {
    margin-top: 0
}

@media(max-width:767px) {
    .online-problem__content {
        margin-bottom: 5.3333333333vw
    }
}

.online-problem__image {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 auto -34px
}

@media(max-width:767px) {
    .online-problem__image {
        width: 58.9333333333vw;
        height: 77.3333333333vw;
        left: 2.6666666667vw;
        margin: 0 auto
    }
}

.online-problem__image img {
    display: block
}

.online-section {
    position: relative;
    z-index: 2;
    padding: 100px 0 80px
}

@media(max-width:767px) {
    .online-section {
        padding: 10.6666666667vw 0
    }
}

.online-section:before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 50%;
    background-position: top;
    background-repeat: repeat-x;
    background-size: cover;
    background-image: url(../images/online-lesson/haikei_orange.svg)
}

[data-theme-color=orange].online-section {
    padding: 0
}

.online-section__header {
    position: absolute;
    z-index: 3;
    top: -49px;
    left: 0;
    right: 0;
    height: 98.08px;
    font-weight: 400;
    font-size: 32px;
    letter-spacing: .1em;
    line-height: 85px;
    text-align: center;
    color: transparent
}

@media(max-width:767px) {
    .online-section__header {
        top: -7.8773333333vw;
        height: 15.7546666667vw
    }
}

.online-section__body {
    position: relative;
    z-index: 3
}

[data-theme-color=purple].online-section {
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-theme-color=purple].online-section:before {
    background-image: url(../images/online-lesson/haikei_purple.svg)
}

[data-theme-color=purple] .online-section__header {
    background-image: url(../images/online-lesson/hukidashi_purple.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%
}

[data-theme-color=green].online-section {
    background-image: linear-gradient(125deg, #deffd3, #92e8e5);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-theme-color=green].online-section:before {
    background-image: url(../images/online-lesson/haikei_green.svg)
}

[data-theme-color=green] .online-section__header {
    background-image: url(../images/online-lesson/hukidashi_green.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%
}

[data-theme-color=pink].online-section {
    background-image: linear-gradient(125deg, #ffe0f7, #fcaeb0);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-theme-color=pink].online-section:before {
    background-image: url(../images/online-lesson/haikei_pink.svg)
}

[data-theme-color=pink] .online-section__header {
    background-image: url(../images/online-lesson/hukidashi_pink.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%
}

[data-theme-color=orange].online-section {
    background-image: linear-gradient(125deg, #ffa7ae, #f8e36f);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-theme-color=orange].online-section:before {
    background-image: url(../images/online-lesson/haikei_orange.svg)
}

[data-theme-color=orange] .online-section__header {
    background-image: url(../images/online-lesson/hukidashi_orange.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%
}

[data-theme-color=blue].online-section {
    background-image: linear-gradient(125deg, #dee0ff, #8fe7f1);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-theme-color=blue].online-section:before {
    background-image: url(../images/online-lesson/haikei_blue.svg)
}

[data-theme-color=blue] .online-section__header {
    background-image: url(../images/online-lesson/hukidashi_blue.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%
}

[data-theme-color=yellow].online-section {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-theme-color=yellow].online-section:before {
    background-image: url(../images/online-lesson/haikei_yellow.svg)
}

[data-theme-color=yellow] .online-section__header {
    background-image: url(../images/online-lesson/hukidashi_yellow.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%
}

[data-theme-color=line].online-section {
    background-image: linear-gradient(125deg, rgba(54, 185, 6, .4), rgba(49, 193, 188, .4));
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

[data-theme-color=line].online-section:before {
    background-image: url(../images/online-lesson/haikei_line.svg)
}

[data-theme-color=line] .online-section__header {
    background-image: url(../images/online-lesson/hukidashi_line.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%
}

.p-about-01 {
    padding: 40px 30px 60px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .2)
}

@media(max-width:767px) {
    .p-about-01 {
        padding: 2.6666666667vw 5.3333333333vw 10.6666666667vw
    }
}

.p-about-01__images {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .p-about-01__images {
        display: block
    }
}

.p-about-01__image {
    -webkit-box-flex: 0;
    flex: 0 1 333px
}

@media(max-width:767px) {
    .p-about-01__image {
        margin-top: 5.3333333333vw
    }
}

.p-about-01__image img {
    border-radius: 10px
}

@media(max-width:767px) {
    .p-about-01__image img {
        border-radius: 2.6666666667vw
    }
}

.p-about-01__image p {
    margin-top: 16px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .p-about-01__image p {
        margin-top: 2.6666666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.p-about-01__copy {
    margin-top: 60px;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: .05em;
    line-height: 42px;
    text-align: center;
    color: #6c5ded
}

@media(max-width:767px) {
    .p-about-01__copy {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.p-about-01__case {
    margin-top: 30px;
    padding: 0 30px
}

@media(max-width:767px) {
    .p-about-01__case {
        margin-top: 8vw;
        padding: 0
    }
}

.p-about-01__link {
    text-align: center;
    margin-top: 40px
}

@media(max-width:767px) {
    .p-about-01__link {
        margin-top: 8vw
    }
}

.p-about-02 {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .p-about-02 {
        display: block
    }
}

.p-about-02__item {
    display: block;
    -webkit-box-flex: 0;
    flex: 0 1 48.2142857143%;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .2);
    -webkit-transition: box-shadow .3s linear;
    transition: box-shadow .3s linear
}

.p-about-02__item:first-child {
    margin-top: 0
}

@media(max-width:767px) {
    .p-about-02__item {
        margin-top: 5.3333333333vw
    }
    .p-about-02__item:first-child {
        margin-top: 0
    }
}

a.p-about-02__item:hover {
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

a.p-about-02__item:hover .p-about-02__thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

a.p-about-02__item:hover .p-about-02__thumb:before {
    opacity: .3
}

.p-about-02__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6666666667%;
    overflow: hidden
}

.p-about-02__thumb:before {
    z-index: 2;
    pointer-events: none;
    content: " ";
    height: 100%;
    background-image: linear-gradient(125deg, #5192ea, #45cddc);
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.p-about-02__thumb:before,
.p-about-02__thumb img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%
}

.p-about-02__thumb img {
    height: auto;
    border-radius: 10px 10px 0 0;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.p-about-02__body {
    position: relative;
    padding: 30px 40px
}

@media(max-width:767px) {
    .p-about-02__body {
        padding: 5.3333333333vw 4vw 8vw
    }
}

.p-about-02__title {
    font-weight: 500;
    font-size: 25px;
    letter-spacing: .05em;
    line-height: 37.8px;
    text-align: left;
    color: #33b6dd
}

@media(max-width:767px) {
    .p-about-02__title {
        font-size: 5.0666666667vw;
        line-height: 8vw
    }
}

.p-about-02__description {
    margin-top: 10px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .p-about-02__description {
        margin-top: 2.6666666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.p-about-02__more {
    margin-top: 20px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: right;
    vertical-align: middle
}

@media(max-width:767px) {
    .p-about-02__more {
        margin-top: 5.3333333333vw;
        font-size: 3.7333333333vw;
        line-height: 6.72vw
    }
}

.p-about-02__more svg {
    vertical-align: middle;
    margin-right: 4px;
    width: 10px;
    height: 6px
}

@media(max-width:767px) {
    .p-about-02__more svg {
        margin-right: 1.0666666667vw;
        width: 2.6666666667vw;
        height: 1.6vw
    }
}

.p-about-02__more svg path {
    fill: #33b6dd
}

.page-static {
    position: relative;
    padding: 80px 120px;
    background-color: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    border-radius: 10px
}

@media(max-width:1359px) {
    .page-static {
        padding: 80px 40px
    }
}

@media(max-width:767px) {
    .page-static {
        padding: 14.4vw 5.3333333333vw;
        margin: 0 -5.3333333333vw;
        box-shadow: none;
        border-radius: 0
    }
}

.page-static__title {
    font-weight: 400;
    font-size: 32px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .page-static__title {
        font-size: 6.1333333333vw;
        line-height: 9.2vw
    }
}

.page-static__date {
    display: block;
    margin-top: 20px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .1em;
    line-height: 1;
    text-align: left;
    color: #a5a5a5
}

@media(max-width:767px) {
    .page-static__date {
        margin-top: 4vw;
        font-size: 4.2666666667vw
    }
}

.page-static__thumb {
    margin-top: 40px
}

@media(max-width:767px) {
    .page-static__thumb {
        margin-top: 5.3333333333vw
    }
}

.page-static__thumb img {
    border-radius: 10px
}

@media(max-width:767px) {
    .page-static__thumb img {
        border-radius: 2.6666666667vw
    }
}

.page-static__author {
    margin-top: 60px
}

.page-static__share {
    margin-top: 40px
}

.page-static__cv {
    margin-top: 80px
}

.pagination {
    margin-top: 70px;
    text-align: center
}

@media(max-width:767px) {
    .pagination {
        margin-top: 17.8666666667vw
    }
}

.pagination__bottom {
    margin-top: 30px
}

@media(max-width:767px) {
    .pagination__bottom {
        margin-top: 5.3333333333vw
    }
}

.pagination__arrow {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .pagination__arrow {
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 8vw
    }
}

.pagination__arrow svg {
    display: inline-block;
    width: 6px;
    height: 10px;
    margin: 0 7.5px
}

@media(max-width:767px) {
    .pagination__arrow svg {
        width: 1.6vw;
        height: 2.6666666667vw;
        margin: 0 2vw
    }
}

.pagination__arrow svg path {
    fill: #222
}

.pagination__arrow--prev svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.pagination__select {
    text-align: center;
    display: inline-block;
    position: relative;
    width: 150px;
    height: 40px;
    margin: 0 10px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #ccc
}

@media(max-width:767px) {
    .pagination__select {
        width: 37.3333333333vw;
        height: 10.6666666667vw;
        border-radius: 5.3333333333vw;
        background: #fff;
        border: 1px solid #ccc
    }
}

.pagination__select:before {
    content: " ";
    display: block
}

.pagination__select select {
    width: 100%;
    border-radius: 5px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222;
    border: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 4px 15px 4px 44%
}

@media(max-width:767px) {
    .pagination__select select {
        border-radius: 1.3333333333vw;
        font-size: 16px;
        line-height: 7.4666666667vw;
        padding: 1.3333333333vw 3.2vw 1.3333333333vw 40%
    }
}

.pickup-case-list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px
}

@media(max-width:767px) {
    .pickup-case-list {
        display: block;
        margin: 0
    }
}

.pickup-case-item {
    -webkit-box-flex: 0;
    flex: 0 1 50%;
    margin-top: 30px;
    padding: 0 20px
}

@media(max-width:767px) {
    .pickup-case-item {
        margin-top: 5.3333333333vw;
        padding: 0
    }
}

.pickup-case__inner {
    position: relative;
    z-index: 2;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    background-color: #fff
}

@media(max-width:767px) {
    .pickup-case__inner {
        padding: 5.3333333333vw
    }
}

.pickup-case__image {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden
}

@media(max-width:767px) {
    .pickup-case__image {
        border-radius: rem(10)
    }
}

.pickup-case__after,
.pickup-case__before {
    -webkit-box-flex: 1;
    flex: 1 0 50%
}

.pickup-case__after img,
.pickup-case__before img {
    display: block;
    width: 100%;
    height: auto
}

.pickup-case__arrow {
    position: absolute;
    padding: 0 8px 2px 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 106px;
    height: 74.04px;
    margin: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #fff
}

@media(max-width:767px) {
    .pickup-case__arrow {
        width: 22.144vw;
        height: 15.4666666667vw;
        padding: 4vw 1.0666666667vw 4vw 0;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.pickup-case__arrow svg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    left: 0
}

.pickup-case__lesson {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 14px;
    background: #f2f2f2;
    padding: 0 10px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .pickup-case__lesson {
        font-size: 3.2vw;
        line-height: 6.4vw;
        border-radius: 3.7333333333vw
    }
}

.pickup-case__person {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.pickup-case__avatar {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 13px
}

@media(max-width:767px) {
    .pickup-case__avatar {
        width: 16vw;
        height: 16vw
    }
}

.pickup-case__avatar img {
    width: 100%;
    height: auto;
    display: block
}

.pickup-case__name {
    padding-left: 4px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .pickup-case__name {
        padding-left: 1.0666666667vw;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.pickup-case__name small {
    margin-left: 5px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .pickup-case__name small {
        margin-left: .5333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.pickup-case__comment {
    margin-top: 16px;
    position: relative;
    padding: 20px 30px;
    border: 1px solid #222;
    border-radius: 10px;
    background-color: #fff;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

.pickup-case__comment:before {
    position: absolute;
    top: -7px;
    left: 35px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-color: transparent transparent #222;
    border-style: solid;
    border-width: 0 5px 7px
}

.pickup--purple .pickup-case__lesson {
    background: #6c5ded
}

.pickup--green .pickup-case__lesson {
    background: #2cc697
}

.pickup--pink .pickup-case__lesson {
    background: #eb4d9c
}

.pickup--orange .pickup-case__lesson {
    background: #ef3e4c
}

.pickup--blue .pickup-case__lesson {
    background: #33b6dd
}

.pickup--yellow .pickup-case__lesson {
    background: #fc9e1d
}

.pickup--line .pickup-case__lesson {
    background: #06c755
}

.pickup-case--simple .pickup-case__inner {
    padding: 0;
    border-radius: 0;
    box-shadow: none
}

.pickup-lesson-list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px
}

@media(max-width:767px) {
    .pickup-lesson-list {
        display: block;
        margin: 0;
        padding-bottom: 0
    }
}

.pickup-lesson-list__item {
    -webkit-box-flex: 1;
    flex: 1 0 33.3333%;
    margin-top: 30px;
    padding: 0 10px
}

.pickup-lesson-list__item:first-child,
.pickup-lesson-list__item:nth-child(2),
.pickup-lesson-list__item:nth-child(3) {
    margin-top: 0
}

@media(max-width:767px) {
    .pickup-lesson-list__item {
        margin-top: 5.3333333333vw;
        padding: 0
    }
    .pickup-lesson-list__item:nth-child(2),
    .pickup-lesson-list__item:nth-child(3) {
        margin-top: 5.3333333333vw
    }
}

.pickup-lesson {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    overflow: hidden;
    -webkit-transition: box-shadow .3s linear;
    transition: box-shadow .3s linear
}

@media(max-width:767px) {
    .pickup-lesson {
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.pickup-lesson:before {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

@media(max-width:767px) {
    .pickup-lesson:before {
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.pickup-lesson:hover {
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

.pickup-lesson:hover:before {
    opacity: 1
}

.pickup-lesson:hover .pickup-lesson__thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.pickup-lesson:hover .pickup-lesson__thumb:before {
    opacity: .3
}

.pickup-lesson__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6666666667%;
    overflow: hidden
}

.pickup-lesson__thumb:before {
    z-index: 2;
    pointer-events: none;
    content: " ";
    height: 100%;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.pickup-lesson__thumb:before,
.pickup-lesson__thumb img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%
}

.pickup-lesson__thumb img {
    height: auto;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.pickup-lesson__body {
    padding: 20px 20px 30px
}

@media(max-width:767px) {
    .pickup-lesson__body {
        padding: 5.9466666667vw 5.3333333333vw 8vw
    }
}

.pickup-lesson__title {
    position: relative;
    padding-left: 27px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .pickup-lesson__title {
        padding-left: 7.4666666667vw;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.pickup-lesson__title .circle-arrow {
    position: absolute;
    top: 5px;
    left: 0
}

@media(max-width:767px) {
    .pickup-lesson__title .circle-arrow {
        top: 1.6vw;
        width: 5.3333333333vw;
        height: 5.3333333333vw
    }
}

.pickup-lesson__excerpt {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .pickup-lesson__excerpt {
        margin-top: 4.8vw;
        font-size: 4vw;
        line-height: 7.7333333333vw
    }
}

.pickup-lesson__recommend__header {
    width: 120.76px;
    height: 23px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 20px;
    text-align: center;
    background: rgba(51, 182, 221, .1);
    color: #33b6dd;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.pickup-lesson__recommend {
    margin-top: 20px
}

.pickup-lesson__recommend__list {
    margin-top: 10px
}

@media(max-width:767px) {
    .pickup-lesson__recommend__list {
        margin-top: 2.6666666667vw
    }
}

.pickup-lesson__recommend__list>li {
    margin-top: 5px;
    position: relative;
    padding-left: 22px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left
}

.pickup-lesson__recommend__list>li .check {
    position: absolute;
    top: 0;
    left: 0;
    display: block
}

.pickup-lesson--purple .pickup-lesson__thumb:before,
[data-theme-color=purple] .pickup-lesson .pickup-lesson__thumb:before {
    background-image: linear-gradient(125deg, #f790e0, #4c88ed)
}

.pickup-lesson--purple .pickup-lesson__recommend__header,
[data-theme-color=purple] .pickup-lesson .pickup-lesson__recommend__header {
    background: rgba(108, 93, 237, .1);
    color: #6c5ded
}

.pickup-lesson--green .pickup-lesson__thumb:before,
[data-theme-color=green] .pickup-lesson .pickup-lesson__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.pickup-lesson--green .pickup-lesson__recommend__header,
[data-theme-color=green] .pickup-lesson .pickup-lesson__recommend__header {
    background: rgba(44, 198, 151, .1);
    color: #2cc697
}

.pickup-lesson--pink .pickup-lesson__thumb:before,
[data-theme-color=pink] .pickup-lesson .pickup-lesson__thumb:before {
    background-image: linear-gradient(125deg, #ff76ef, #fa383c)
}

.pickup-lesson--pink .pickup-lesson__recommend__header,
[data-theme-color=pink] .pickup-lesson .pickup-lesson__recommend__header {
    background: rgba(235, 77, 156, .1);
    color: #eb4d9c
}

.pickup-lesson--orange .pickup-lesson__thumb:before,
[data-theme-color=orange] .pickup-lesson .pickup-lesson__thumb:before {
    background-image: linear-gradient(125deg, #fa5562, #ffa234)
}

.pickup-lesson--orange .pickup-lesson__recommend__header,
[data-theme-color=orange] .pickup-lesson .pickup-lesson__recommend__header {
    background: rgba(239, 62, 76, .1);
    color: #ef3e4c
}

.pickup-lesson--blue .pickup-lesson__thumb:before,
[data-theme-color=blue] .pickup-lesson .pickup-lesson__thumb:before {
    background-image: linear-gradient(125deg, #5192ea, #45cddc)
}

.pickup-lesson--blue .pickup-lesson__recommend__header,
[data-theme-color=blue] .pickup-lesson .pickup-lesson__recommend__header {
    background: rgba(51, 182, 221, .1);
    color: #33b6dd
}

.pickup-lesson--yellow .pickup-lesson__thumb:before,
[data-theme-color=yellow] .pickup-lesson .pickup-lesson__thumb:before {
    background-image: linear-gradient(125deg, #ffdd4d, #f49c10)
}

.pickup-lesson--yellow .pickup-lesson__recommend__header,
[data-theme-color=yellow] .pickup-lesson .pickup-lesson__recommend__header {
    background: rgba(252, 158, 29, .1);
    color: #fc9e1d
}

.pickup-lesson--line .pickup-lesson__thumb:before,
[data-theme-color=line] .pickup-lesson .pickup-lesson__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.pickup-lesson--line .pickup-lesson__recommend__header,
[data-theme-color=line] .pickup-lesson .pickup-lesson__recommend__header {
    background: rgba(6, 199, 85, .1);
    color: #06c755
}

.plan-list {
    display: block
}

.plan-list__sections {
    position: relative;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .plan-list__sections {
        display: block
    }
}

.plan-list__more {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    -webkit-filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: center
}

@media(max-width:767px) {
    .plan-list__more {
        position: relative;
        font-size: 3.7333333333vw;
        line-height: 6.72vw;
        width: 19.2vw;
        height: 19.2vw;
        margin: -5.3333333333vw auto
    }
}

.plan-list__section {
    -webkit-box-flex: 0;
    flex: 0 1 48.9583333333%;
    display: block;
    padding-bottom: 50px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .plan-list__section {
        padding-bottom: 10.6666666667vw;
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.plan-list__top {
    width: 100%;
    max-width: 85.1063829787%;
    height: 40px;
    margin: auto;
    border-radius: 0 0 20px 20px;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffe0f8), to(#a9c9ff));
    background: linear-gradient(#ffe0f8, #a9c9ff)
}

@media(max-width:767px) {
    .plan-list__top {
        max-width: 100%;
        width: 70.6666666667vw;
        height: 10.6666666667vw
    }
}

.plan-list__image {
    display: block;
    text-align: center;
    width: 240px;
    height: 160px;
    margin: -30px auto 0
}

@media(max-width:767px) {
    .plan-list__image {
        width: 61.3333333333vw;
        height: 40.888vw;
        margin: -8vw auto 0
    }
}

.plan-list__image img {
    width: 100%;
    height: auto
}

.plan-list__copy {
    margin-top: 10px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .plan-list__copy {
        margin-top: 4.5866666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.plan-list__title {
    font-weight: 700;
    font-size: 32px;
    letter-spacing: .08em;
    line-height: 58px;
    text-align: center;
    color: #6c5ded
}

@media(max-width:767px) {
    .plan-list__title {
        font-size: 6.4vw;
        line-height: 9.8666666667vw
    }
}

.plan-list__sub {
    margin-bottom: 22px;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: .08em;
    line-height: 20px;
    text-align: center;
    color: #6c5ded
}

.plan-list__course {
    margin-top: 17px;
    text-align: center
}

@media(max-width:767px) {
    .plan-list__course {
        margin-top: 5.2vw
    }
}

.plan-list__course span {
    display: inline-block;
    padding: 0 19px;
    margin: auto;
    height: 28px;
    border-radius: 14px;
    background: #f2f2f2;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    color: #222
}

@media(max-width:767px) {
    .plan-list__course span {
        font-size: 3.2vw;
        line-height: 7.4666666667vw;
        border-radius: 3.7333333333vw;
        height: 7.4666666667vw
    }
}

.plan-list__price {
    margin-top: 4px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px
}

@media(max-width:767px) {
    .plan-list__price {
        font-size: 3.7333333333vw;
        line-height: 6.72vw
    }
}

.plan-list__price span {
    position: relative;
    left: -8px
}

@media(max-width:767px) {
    .plan-list__price span {
        left: -2.1333333333vw
    }
}

.plan-list__price b {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 44px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: right;
    color: #6c5ded;
    display: inline-block;
    position: relative
}

@media(max-width:767px) {
    .plan-list__price b {
        font-size: 11.7333333333vw
    }
}

.plan-list__price b:after {
    content: "\203B  1";
    font-size: 10px;
    position: absolute;
    top: 12px;
    right: -13px;
    color: #222;
    letter-spacing: -.1em
}

@media(max-width:767px) {
    .plan-list__price b:after {
        font-size: 2.6666666667vw;
        position: absolute;
        top: 3.2vw;
        right: -3.4666666667vw
    }
}

.plan-list__list {
    width: 310px;
    margin: 20px auto 0;
    padding-top: 22px;
    border-top: 1px solid #ccc
}

@media(max-width:767px) {
    .plan-list__list {
        width: 73.3333333333vw;
        margin-top: 5.3333333333vw;
        padding-top: 5.3333333333vw
    }
}

.plan-list__list li {
    position: relative;
    padding: 0 0 0 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .plan-list__list li {
        padding: 0 0 0 5.3333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.plan-list__list li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "\25CF";
    display: block;
    font-weight: 400;
    font-size: 8px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #6c5ded
}

@media(max-width:767px) {
    .plan-list__list li:before {
        font-size: 2.1333333333vw;
        line-height: 7.4666666667vw
    }
}

.plan-list__text {
    margin-top: 20px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 20px;
    text-align: center
}

.plan-list__table {
    padding: 10px 35px 0;
    width: 100%
}

.plan-list__table table {
    width: 100%
}

.plan-list__table table thead th {
    vertical-align: middle;
    text-align: center
}

.plan-list__table table thead th span {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 30px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: center;
    border-radius: 10px;
    background: rgba(108, 93, 237, .1);
    color: #6c5ded
}

.plan-list__table table thead th:last-child {
    padding-left: 15px
}

.plan-list__table table tbody tr {
    border-top: 1px solid #ccc
}

.plan-list__table table tbody tr:first-child {
    border-top: none
}

.plan-list__table table tbody th {
    padding: 20px 0;
    font-size: 16px;
    line-height: 20px;
    color: #7c7c7c
}

.plan-list__table table tbody td,
.plan-list__table table tbody th {
    vertical-align: middle;
    text-align: center;
    font-weight: 500;
    letter-spacing: .05em
}

.plan-list__table table tbody td {
    padding: 20px 0 20px 15px;
    font-family: Montserrat, sans-serif;
    font-size: 21px;
    color: #222
}

.plan-list__section--purple .plan-list__top {
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.plan-list__section--purple .plan-list__list li:before,
.plan-list__section--purple .plan-list__price b,
.plan-list__section--purple .plan-list__sub,
.plan-list__section--purple .plan-list__title {
    color: #6c5ded
}

.plan-list__section--purple .plan-list__table table thead th span {
    background: rgba(108, 93, 237, .1);
    color: #6c5ded
}

.plan-list__section--green .plan-list__top {
    background-image: linear-gradient(125deg, #deffd3, #92e8e5)
}

.plan-list__section--green .plan-list__list li:before,
.plan-list__section--green .plan-list__price b,
.plan-list__section--green .plan-list__sub,
.plan-list__section--green .plan-list__title {
    color: #2cc697
}

.plan-list__section--green .plan-list__table table thead th span {
    background: rgba(44, 198, 151, .1);
    color: #2cc697
}

.plan-list__section--pink .plan-list__top {
    background-image: linear-gradient(125deg, #ffe0f7, #fcaeb0)
}

.plan-list__section--pink .plan-list__list li:before,
.plan-list__section--pink .plan-list__price b,
.plan-list__section--pink .plan-list__sub,
.plan-list__section--pink .plan-list__title {
    color: #eb4d9c
}

.plan-list__section--pink .plan-list__table table thead th span {
    background: rgba(235, 77, 156, .1);
    color: #eb4d9c
}

.plan-list__section--orange .plan-list__top {
    background-image: linear-gradient(125deg, #ffa7ae, #f8e36f)
}

.plan-list__section--orange .plan-list__list li:before,
.plan-list__section--orange .plan-list__price b,
.plan-list__section--orange .plan-list__sub,
.plan-list__section--orange .plan-list__title {
    color: #ef3e4c
}

.plan-list__section--orange .plan-list__table table thead th span {
    background: rgba(239, 62, 76, .1);
    color: #ef3e4c
}

.plan-list__section--blue .plan-list__top {
    background-image: linear-gradient(125deg, #dee0ff, #8fe7f1)
}

.plan-list__section--blue .plan-list__list li:before,
.plan-list__section--blue .plan-list__price b,
.plan-list__section--blue .plan-list__sub,
.plan-list__section--blue .plan-list__title {
    color: #33b6dd
}

.plan-list__section--blue .plan-list__table table thead th span {
    background: rgba(51, 182, 221, .1);
    color: #33b6dd
}

.plan-list__section--yellow .plan-list__list li:before,
.plan-list__section--yellow .plan-list__price b,
.plan-list__section--yellow .plan-list__sub,
.plan-list__section--yellow .plan-list__title {
    color: #fc9e1d
}

.plan-list__section--yellow .plan-list__table table thead th span {
    background: rgba(252, 158, 29, .1);
    color: #fc9e1d
}

.plan-list__section--line .plan-list__top {
    background-image: linear-gradient(125deg, rgba(54, 185, 6, .4), rgba(49, 193, 188, .4))
}

.plan-list__section--line .plan-list__list li:before,
.plan-list__section--line .plan-list__price b,
.plan-list__section--line .plan-list__sub,
.plan-list__section--line .plan-list__title {
    color: #06c755
}

.plan-list__section--line .plan-list__table table thead th span {
    background: rgba(6, 199, 85, .1);
    color: #06c755
}

@media(max-width:767px) {
    .plan-list--plan .plan-list__section {
        margin-top: 5.3333333333vw
    }
    .plan-list--plan .plan-list__section:first-child {
        margin-top: 0
    }
}

.plan-visual {
    position: relative;
    padding: 80px 0;
    background-color: #fff
}

@media(max-width:767px) {
    .plan-visual {
        padding: 8vw 0 26.6666666667vw
    }
}

.plan-visual__header {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center;
    color: #2cc697
}

@media(max-width:767px) {
    .plan-visual__header {
        font-size: 5.6vw;
        line-height: 9.0666666667vw
    }
}

.plan-visual__description {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 26px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .plan-visual__description {
        padding: 0 5.3333333333vw;
        margin-top: 5.3333333333vw;
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.plan-visual__anchor {
    position: relative;
    z-index: 2;
    margin-top: 30px
}

@media(max-width:767px) {
    .plan-visual__anchor {
        margin-top: 8vw
    }
}

.plan-visual__image {
    position: absolute;
    bottom: 0
}

.plan-visual__image--a1 {
    width: 160px;
    height: 160px;
    right: 50%;
    -webkit-transform: translateX(455px);
    transform: translateX(455px)
}

@media(max-width:1023px) {
    .plan-visual__image--a1 {
        pointer-events: none;
        -webkit-transform: translateX(365px);
        transform: translateX(365px)
    }
}

@media(max-width:767px) {
    .plan-visual__image--a1 {
        width: 21.3333333333vw;
        height: 21.3333333333vw;
        right: 50%;
        -webkit-transform: translateX(26.6666666667vw);
        transform: translateX(26.6666666667vw)
    }
}

.plan-visual__image--a1 img {
    display: block
}

.plan-visual__image--a2 {
    width: 160px;
    height: 160px;
    left: 50%;
    -webkit-transform: translateX(-455px);
    transform: translateX(-455px)
}

@media(max-width:1023px) {
    .plan-visual__image--a2 {
        pointer-events: none;
        -webkit-transform: translateX(-365px);
        transform: translateX(-365px)
    }
}

@media(max-width:767px) {
    .plan-visual__image--a2 {
        width: 21.3333333333vw;
        height: 21.3333333333vw;
        left: 50%;
        -webkit-transform: translateX(-26.6666666667vw);
        transform: translateX(-26.6666666667vw)
    }
}

.plan-visual__image--a2 img {
    display: block
}

.plan {
    position: relative;
    padding: 60px 30px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    overflow: hidden
}

.plan,
.plan:before {
    display: block;
    width: 100%
}

.plan:before {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    content: " ";
    top: 0;
    left: 0;
    height: 100%;
    border: 2px solid #33b6dd;
    border-radius: 10px;
    opacity: 0
}

.plan:hover:before {
    opacity: 1
}

.plan:hover .school-link__thumb:before {
    opacity: .5
}

.plan__copy {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

.plan__icon {
    width: 89.53px;
    height: 65.31px;
    margin: 32px auto 0
}

.plan__icon svg {
    width: 100%;
    height: 100%
}

.plan__title {
    font-weight: 700;
    margin-top: 40px;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center
}

.plan__course {
    margin-top: 30px
}

.plan__course,
.plan__price {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

.plan__price {
    margin-top: 10px;
    color: #222
}

.plan__price b {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 40px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: right;
    color: #222
}

.plan__list {
    margin-top: 30px
}

.plan__list>li {
    position: relative;
    padding: 0 0 0 19px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

.plan__list>li:before {
    position: absolute;
    top: 10px;
    left: 0;
    content: " ";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc
}

.plan-list__ex {
    margin-top: 30px;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: center
}

@media(max-width:767px) {
    .plan-list__ex {
        margin-top: 8vw;
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 6.4vw
    }
}

.point-list__item {
    margin-top: 30px
}

.point-list__item:first-child {
    margin-top: 0
}

@media(max-width:767px) {
    .point-list__item {
        margin-top: 5.3333333333vw
    }
    .point-list__item:first-child {
        margin-top: 0
    }
}

.point-list__item:nth-child(2n) .point {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse
}

.point {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 70px 80px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .point {
        display: block;
        padding: 8vw 5.3333333333vw;
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.point--reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse
}

.point__image {
    -webkit-box-flex: 0;
    flex: 0 1 40.8163265306%
}

.point__image img {
    width: 100%;
    height: auto;
    border-radius: 10px
}

.point__content {
    -webkit-box-flex: 0;
    flex: 0 1 52.0408163265%
}

.point__header {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #ef3e4c;
    margin-right: -5px
}

@media(max-width:767px) {
    .point__header {
        margin-right: 1.3333333333vw;
        margin-top: 5.3333333333vw;
        font-size: 5.3333333333vw;
        line-height: 9.0666666667vw
    }
}

.point__body {
    margin-top: 30px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .point__body {
        margin-top: 5.3333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.post-point__header {
    display: -webkit-box;
    display: flex;
    padding: 0 20px;
    -webkit-box-align: center;
    align-items: center
}

.post-point__icon {
    -webkit-box-flex: 0;
    flex: 0 1 80px;
    width: 80px;
    height: 80px;
    border: 1px solid #eb4d9c;
    border-radius: 50%
}

.post-point__icon img {
    width: 100%;
    height: auto;
    border-radius: 50%
}

.post-point__title {
    margin-left: 10px;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 37.8px;
    color: #eb4d9c;
    width: calc(100% - 90px)
}

.post-point__body {
    position: relative;
    margin-top: 20px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eb4d9c
}

.post-point__body:after,
.post-point__body:before {
    position: absolute;
    content: " ";
    left: 52px;
    width: 0;
    height: 0;
    border-top: none;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent
}

.post-point__body:before {
    top: -11px;
    border-bottom: 11px solid #eb4d9c
}

.post-point__body:after {
    top: -9px;
    border-bottom: 11px solid #fff
}

.post-point__body dl {
    margin-top: 30px
}

.post-point__body dl:first-child {
    margin-top: 0
}

.post-point__body dt {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #eb4d9c
}

.post-point__body dt>b {
    margin-bottom: 10px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 50px;
    height: 21px;
    border-radius: 4px;
    background: #eb4d9c;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    text-align: center;
    color: #fff
}

.post-point__body dd {
    margin-top: 10px;
    display: block
}

@media(max-width:767px) {
    .post-point__body dd {
        flex-wrap: wrap
    }
}

.post-point__image {
    width: 100%
}

.post-point__image img {
    width: 100%;
    height: auto
}

@media(max-width:767px) {
    .post-point__image {
        -webkit-box-flex: 0;
        flex: none;
        width: 100%
    }
}

.post-point__text {
    width: 100%;
    margin-top: 10px
}

@media(max-width:767px) {
    .post-point__text {
        -webkit-box-flex: 0;
        flex: none;
        width: 100%;
        margin-top: 10px
    }
}

.post-point__text--full {
    -webkit-box-flex: 0;
    flex: 0 1 100%
}

@media(max-width:767px) {
    .post-point__text--full {
        -webkit-box-flex: 0;
        flex: none;
        width: 100%;
        margin-top: 0
    }
}

.post-step__title {
    border: 1px solid #2cc697;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-radius: 10px
}

.post-step__title span {
    margin-right: 18px;
    padding: 11px 0;
    width: 70px;
    height: 100%;
    color: #fff;
    background-color: #2cc697;
    font-family: Montserrat, sans-serif;
    font-size: 10px;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px
}

.post-step__title span,
.post-step__title span b {
    font-weight: 500;
    line-height: 1;
    letter-spacing: .05em;
    text-align: center
}

.post-step__title span b {
    margin-top: 5px;
    display: block;
    font-size: 22px
}

@media(max-width:767px) {
    .post-step__title {
        padding-right: 5px
    }
    .post-step__title span {
        line-height: 1.1
    }
}

.post-step__body {
    margin-top: 20px;
    display: block
}

.post-step__body img {
    max-width: 100%;
    display: block;
    margin-right: 20px;
    border-radius: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 10px
}

@media(max-width:767px) {
    .post-step__body {
        display: block
    }
    .post-step__body img {
        margin-right: 0;
        margin-bottom: 10px;
        max-width: 100%
    }
}

.present {
    padding: 76px 0 0
}

@media(max-width:767px) {
    .present {
        padding: 10.1333333333vw 0 0
    }
}

.present__header {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .present__header {
        padding: 0 5.3333333333vw;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.present__description {
    margin-top: 25px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .present__description {
        margin-top: 5.8666666667vw;
        padding: 0 5.3333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.present__image {
    width: 765px;
    margin: 28px auto 0
}

@media(max-width:767px) {
    .present__image {
        margin: 8.5333333333vw auto 0;
        width: 100%
    }
}

.profile {
    display: -webkit-box;
    display: flex;
    margin-top: -41px;
    padding: 0 20px;
    -webkit-box-align: end;
    align-items: flex-end
}

@media(max-width:767px) {
    .profile {
        padding: 0 2.6666666667vw;
        margin-top: -5.3333333333vw
    }
}

.profile__icon {
    width: 125px;
    height: 125px
}

@media(max-width:767px) {
    .profile__icon {
        width: 22.4vw;
        height: 22.4vw
    }
}

.profile__icon img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50%
}

.profile__content {
    margin-left: 14px
}

@media(max-width:767px) {
    .profile__content {
        margin-left: 2.6666666667vw
    }
}

.profile__name {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: left
}

@media(max-width:767px) {
    .profile__name {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.profile__name small {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 22px;
    text-align: left
}

@media(max-width:767px) {
    .profile__name small {
        font-size: 3.2vw;
        line-height: 5.8666666667vw
    }
}

.profile__profile {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .profile__profile {
        font-size: 2.9333333333vw;
        line-height: 4.8vw
    }
}

.relation {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc
}

.relation:before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, right top, from(#4c88ed), color-stop(50%, #f790e0), to(#4c88ed));
    background-image: linear-gradient(90deg, #4c88ed, #f790e0 50%, #4c88ed);
    background-size: 200% 100%;
    background-position: 0 0;
    opacity: 0
}

.relation:before,
.relation:hover:before {
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.relation:hover:before {
    opacity: 1
}

.relation:hover .relation__date,
.relation:hover .relation__title {
    color: #fff
}

@media(max-width:767px) {
    .relation {
        display: block
    }
}

.relation__thumb {
    position: relative;
    z-index: 2;
    border-radius: 10px;
    width: 170px;
    height: 100px;
    overflow: hidden
}

.relation__thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px
}

@media(max-width:767px) {
    .relation__thumb {
        width: 100%;
        height: 170px
    }
}

.relation__body {
    position: relative;
    z-index: 2;
    margin-left: 40px;
    width: calc(100% - 210px)
}

@media(max-width:767px) {
    .relation__body {
        margin-left: 0;
        width: 100%
    }
}

.relation__date {
    font-family: Montserrat, sans-serif;
    letter-spacing: .1em;
    line-height: 1;
    color: #a5a5a5
}

.relation__date,
.relation__title {
    font-weight: 500;
    font-size: 14px;
    text-align: left;
    -webkit-transition: color .3s linear;
    transition: color .3s linear
}

.relation__title {
    letter-spacing: .05em;
    line-height: 25.2px;
    color: #222
}

.school-link-list {
    position: relative
}

.school-link-list__image {
    position: absolute;
    top: -204px;
    width: 166px;
    height: 249px
}

@media(max-width:1359px) {
    .school-link-list__image {
        top: -154px;
        width: 120px;
        height: 180px
    }
}

@media(max-width:767px) {
    .school-link-list__image {
        top: -23.7333333333vw;
        width: 22.9333333333vw;
        height: 34.4vw
    }
}

.school-link-list__image img {
    width: 100%;
    height: auto
}

.school-link-list__image--01 {
    left: 80px
}

@media(max-width:1359px) {
    .school-link-list__image--01 {
        left: -1.09375vw
    }
}

@media(max-width:767px) {
    .school-link-list__image--01 {
        left: 3.7333333333vw
    }
}

.school-link-list__image--02 {
    right: 80px
}

@media(max-width:1359px) {
    .school-link-list__image--02 {
        right: -1.09375vw
    }
}

@media(max-width:767px) {
    .school-link-list__image--02 {
        right: 3.7333333333vw
    }
}

.school-link-list__inner {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 30px 60px 60px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    border-radius: 10px
}

@media(max-width:767px) {
    .school-link-list__inner {
        display: block;
        padding: 2.6666666667vw 5.3333333333vw 10.6666666667vw;
        background: #fff;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16);
        border-radius: 2.6666666667vw
    }
}

.school-link-list__section {
    -webkit-box-flex: 0;
    flex: 0 1 44%;
    margin-top: 30px
}

@media(max-width:767px) {
    .school-link-list__section {
        margin-top: 8vw
    }
}

.school-link-list__header {
    border-radius: 5px;
    background: #f5f5f5;
    padding: 6px 12px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 25px;
    text-align: left
}

@media(max-width:767px) {
    .school-link-list__header {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.school-link-list__list {
    display: block
}

.school-link-list__item {
    margin-top: 12.5px;
    display: inline-block;
    margin-right: 30px
}

@media(max-width:767px) {
    .school-link-list__item {
        margin-top: 4vw;
        margin-right: 8vw
    }
}

.school-link-list__link {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: left;
    vertical-align: bottom;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.school-link-list__link:hover {
    color: #33b6dd
}

@media(max-width:767px) {
    .school-link-list__link {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.school-link-list__link .circle-arrow {
    margin-right: 7px
}

@media(max-width:767px) {
    .school-link-list__link .circle-arrow {
        margin-right: 1.8666666667vw
    }
}

.school-link-list__text {
    margin-top: 40px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: center;
    color: #222;
    vertical-align: bottom
}

@media(max-width:767px) {
    .school-link-list__text {
        font-size: 4vw
    }
}

.school-list {
    display: -webkit-box;
    display: flex;
    margin: -20px -10px 0;
    flex-wrap: wrap
}

@media(max-width:767px) {
    .school-list {
        display: block;
        margin: 0
    }
}

.school-list__item {
    -webkit-box-flex: 0;
    flex: 0 1 33.3333%;
    padding: 0 10px;
    margin-top: 20px
}

@media(max-width:767px) {
    .school-list__item {
        margin-top: 5.3333333333vw;
        padding: 0
    }
    .school-list__item:first-child {
        margin-top: 0
    }
}

.school {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    overflow: hidden;
    -webkit-transition: box-shadow .3s linear;
    transition: box-shadow .3s linear;
    padding-bottom: 50px
}

@media(max-width:767px) {
    .school {
        padding-bottom: 13.3333333333vw;
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.school:before {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    content: " ";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.school:hover {
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

.school:hover:before {
    opacity: 1
}

.school:hover .school__thumb img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.school:hover .school__thumb:before {
    opacity: .3
}

.school__area {
    position: absolute;
    padding: 0 10px;
    top: 0;
    left: 30px;
    z-index: 2;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: right;
    color: #fff;
    border-radius: 0 0 10px 10px
}

@media(max-width:767px) {
    .school__area {
        left: 5.3333333333vw;
        padding: 0 4.8vw;
        font-weight: 500;
        font-size: 3.2vw;
        line-height: 8.5333333333vw;
        letter-spacing: .05em
    }
}

.school__thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 66.6666666667%;
    overflow: hidden
}

.school__thumb:before {
    z-index: 2;
    pointer-events: none;
    content: " ";
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity .3s linear;
    transition: opacity .3s linear
}

.school__thumb:before,
.school__thumb img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%
}

.school__thumb img {
    height: auto;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.school__body {
    padding: 20px 27px 30px
}

@media(max-width:767px) {
    .school__body {
        padding: 5.9466666667vw 5.3333333333vw 8vw
    }
}

.school__title {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .school__title {
        font-size: 5.6vw;
        line-height: 8vw
    }
}

.school__address,
.school__station,
.school__time {
    margin-top: 20px;
    position: relative;
    padding-left: 25px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .school__address,
    .school__station,
    .school__time {
        margin-top: 5.3333333333vw;
        padding-left: 6.6666666667vw;
        font-size: 4vw;
        line-height: 8vw
    }
}

.school__address svg,
.school__station svg,
.school__time svg {
    position: absolute;
    top: 5px;
    left: 0
}

@media(max-width:767px) {
    .school__address svg,
    .school__station svg,
    .school__time svg {
        width: 5.2773333333vw;
        height: 5.2773333333vw;
        top: 1.3333333333vw
    }
}

.school__address,
.school__time {
    margin-top: 15px
}

@media(max-width:767px) {
    .school__address,
    .school__time {
        margin-top: 2.4vw
    }
}

.school__station svg {
    left: 0
}

@media(max-width:767px) {
    .school__station svg {
        left: -1px
    }
}

.school__address svg {
    left: 0
}

@media(max-width:767px) {
    .school__address svg {
        left: -.2666666667vw
    }
}

.school__time {
    display: -webkit-box;
    display: flex
}

.school__time svg {
    left: -3px
}

@media(max-width:767px) {
    .school__time svg {
        left: -.5333333333vw
    }
}

.school__time li:after {
    content: "/";
    display: inline-block
}

.school__time li:last-child:after {
    display: none
}

.school__more {
    position: absolute;
    bottom: 30px;
    right: 27px;
    width: 100%;
    margin-top: 19px;
    font-weight: 400;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left
}

@media(max-width:767px) {
    .school__more {
        bottom: 8vw;
        right: 7.2vw;
        margin-top: .8vw;
        font-size: 3.7333333333vw;
        line-height: 6.72vw
    }
}

.school__more svg {
    margin-right: 4px
}

@media(max-width:767px) {
    .school__more svg {
        margin-right: 1.0666666667vw
    }
}

.school--purple .school__area,
.school--purple .school__thumb:before {
    background-image: linear-gradient(125deg, #f790e0, #4c88ed)
}

.school--purple .school__address svg circle,
.school--purple .school__address svg path,
.school--purple .school__address svg rect,
.school--purple .school__station svg circle,
.school--purple .school__station svg path,
.school--purple .school__station svg rect,
.school--purple .school__time svg circle,
.school--purple .school__time svg path,
.school--purple .school__time svg rect {
    stroke: #6c5ded
}

.school--purple .school__more svg path {
    fill: #6c5ded
}

.school--green .school__area,
.school--green .school__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.school--green .school__address svg circle,
.school--green .school__address svg path,
.school--green .school__address svg rect,
.school--green .school__station svg circle,
.school--green .school__station svg path,
.school--green .school__station svg rect,
.school--green .school__time svg circle,
.school--green .school__time svg path,
.school--green .school__time svg rect {
    stroke: #2cc697
}

.school--green .school__more svg path {
    fill: #2cc697
}

.school--pink .school__area,
.school--pink .school__thumb:before {
    background-image: linear-gradient(125deg, #ff76ef, #fa383c)
}

.school--pink .school__address svg circle,
.school--pink .school__address svg path,
.school--pink .school__address svg rect,
.school--pink .school__station svg circle,
.school--pink .school__station svg path,
.school--pink .school__station svg rect,
.school--pink .school__time svg circle,
.school--pink .school__time svg path,
.school--pink .school__time svg rect {
    stroke: #eb4d9c
}

.school--pink .school__more svg path {
    fill: #eb4d9c
}

.school--orange .school__area,
.school--orange .school__thumb:before {
    background-image: linear-gradient(125deg, #fa5562, #ffa234)
}

.school--orange .school__address svg circle,
.school--orange .school__address svg path,
.school--orange .school__address svg rect,
.school--orange .school__station svg circle,
.school--orange .school__station svg path,
.school--orange .school__station svg rect,
.school--orange .school__time svg circle,
.school--orange .school__time svg path,
.school--orange .school__time svg rect {
    stroke: #ef3e4c
}

.school--orange .school__more svg path {
    fill: #ef3e4c
}

.school--blue .school__area,
.school--blue .school__thumb:before {
    background-image: linear-gradient(125deg, #5192ea, #45cddc)
}

.school--blue .school__address svg circle,
.school--blue .school__address svg path,
.school--blue .school__address svg rect,
.school--blue .school__station svg circle,
.school--blue .school__station svg path,
.school--blue .school__station svg rect,
.school--blue .school__time svg circle,
.school--blue .school__time svg path,
.school--blue .school__time svg rect {
    stroke: #33b6dd
}

.school--blue .school__more svg path {
    fill: #33b6dd
}

.school--yellow .school__area,
.school--yellow .school__thumb:before {
    background-image: linear-gradient(125deg, #ffdd4d, #f49c10)
}

.school--yellow .school__address svg circle,
.school--yellow .school__address svg path,
.school--yellow .school__address svg rect,
.school--yellow .school__station svg circle,
.school--yellow .school__station svg path,
.school--yellow .school__station svg rect,
.school--yellow .school__time svg circle,
.school--yellow .school__time svg path,
.school--yellow .school__time svg rect {
    stroke: #fc9e1d
}

.school--yellow .school__more svg path {
    fill: #fc9e1d
}

.school--line .school__area,
.school--line .school__thumb:before {
    background-image: linear-gradient(125deg, #36b906, #31c1bc)
}

.school--line .school__address svg circle,
.school--line .school__address svg path,
.school--line .school__address svg rect,
.school--line .school__station svg circle,
.school--line .school__station svg path,
.school--line .school__station svg rect,
.school--line .school__time svg circle,
.school--line .school__time svg path,
.school--line .school__time svg rect {
    stroke: #06c755
}

.school--line .school__more svg path {
    fill: #06c755
}

.send__loading {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999999999;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
    opacity: 0;
    pointer-events: none
}

.send__loading.is-active {
    opacity: 1;
    pointer-events: auto
}

.send__loading:after {
    content: "";
    position: absolute;
    background-color: #6c5ded;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .1
}

.send__loading .send__loading_inner {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 330px;
    height: 230px;
    border-radius: 10px;
    background-color: #fff;
    padding: 42px 103px
}

@media(max-width:767px) {
    .send__loading .send__loading_inner {
        padding: 42px 90px
    }
}

.send__loading .send__loading_image {
    width: 50px;
    height: 50px;
    margin: 0 auto
}

.send__loading .send__loading_image img {
    -webkit-animation: formLoading .7s linear infinite;
    animation: formLoading .7s linear infinite
}

.send__loading .send__loading_text {
    text-align: center;
    margin-top: 50px;
    font-size: 15px;
    font-weight: 400;
    line-height: 2em
}

.send__loading .send__loading_image_1,
.send__loading .send__loading_image_2 {
    position: absolute;
    width: 50px;
    height: 75px;
    bottom: 25px
}

.send__loading .send__loading_image_1 {
    left: 33px
}

.send__loading .send__loading_image_2 {
    right: 33px
}

.single-cv__button {
    position: relative;
    text-align: center
}

.single-cv__button .single-cv__button-title {
    font-size: 18px
}

@media(max-width:767px) {
    .single-cv__button .single-cv__button-title {
        font-size: 14px;
        max-width: 40vw;
        margin: 0 auto
    }
}

.single-cv__button .button--single-cv {
    margin-top: 18px
}

@media(max-width:767px) {
    .single-cv__button .button--single-cv {
        margin-top: 11px
    }
}

.single-cv__button .button__inner {
    min-width: 440px
}

@media(max-width:767px) {
    .single-cv__button .button__inner {
        min-width: inherit;
        padding: 20px 18.6666666667vw
    }
}

.single-cv__button .button__text {
    display: block;
    text-align: center;
    line-height: 1.2em
}

.single-cv__button .button__link {
    z-index: 2
}

.single-cv__button .button__text_small {
    display: block;
    font-size: 14px;
    font-weight: 400
}

@media(max-width:767px) {
    .single-cv__button .button__text_small {
        font-size: 12px
    }
}

.single-cv__button .single-cv__image {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -56px
}

.single-cv__button .single-cv__image--01 {
    left: 30px
}

.single-cv__button .single-cv__image--02 {
    right: 30px
}

.slide-in {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px)
}

.is-enter .slide-in {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity .3s linear, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .3s linear, transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96)
}

.is-enter .slide-in.slide-in--delay-01 {
    -webkit-transition: opacity .3s linear .1s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: opacity .3s linear .1s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: opacity .3s linear .1s, transform .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: opacity .3s linear .1s, transform .3s cubic-bezier(.53, .165, .325, .96) .1s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .1s
}

.is-enter .slide-in.slide-in--delay-02 {
    -webkit-transition: opacity .3s linear .2s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: opacity .3s linear .2s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: opacity .3s linear .2s, transform .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: opacity .3s linear .2s, transform .3s cubic-bezier(.53, .165, .325, .96) .2s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .2s
}

.is-enter .slide-in.slide-in--delay-03 {
    -webkit-transition: opacity .3s linear .3s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .3s;
    transition: opacity .3s linear .3s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .3s;
    transition: opacity .3s linear .3s, transform .3s cubic-bezier(.53, .165, .325, .96) .3s;
    transition: opacity .3s linear .3s, transform .3s cubic-bezier(.53, .165, .325, .96) .3s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .3s
}

.is-enter .slide-in.slide-in--delay-04 {
    -webkit-transition: opacity .3s linear .4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: opacity .3s linear .4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: opacity .3s linear .4s, transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: opacity .3s linear .4s, transform .3s cubic-bezier(.53, .165, .325, .96) .4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s
}

.is-enter .slide-in.slide-in--delay-05 {
    -webkit-transition: opacity .3s linear .5s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .5s;
    transition: opacity .3s linear .5s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .5s;
    transition: opacity .3s linear .5s, transform .3s cubic-bezier(.53, .165, .325, .96) .5s;
    transition: opacity .3s linear .5s, transform .3s cubic-bezier(.53, .165, .325, .96) .5s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .5s
}

.is-enter .slide-in.slide-in--delay-06 {
    -webkit-transition: opacity .3s linear .6s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .6s;
    transition: opacity .3s linear .6s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .6s;
    transition: opacity .3s linear .6s, transform .3s cubic-bezier(.53, .165, .325, .96) .6s;
    transition: opacity .3s linear .6s, transform .3s cubic-bezier(.53, .165, .325, .96) .6s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .6s
}

.is-enter .slide-in.slide-in--delay-07 {
    -webkit-transition: opacity .3s linear .7s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .7s;
    transition: opacity .3s linear .7s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .7s;
    transition: opacity .3s linear .7s, transform .3s cubic-bezier(.53, .165, .325, .96) .7s;
    transition: opacity .3s linear .7s, transform .3s cubic-bezier(.53, .165, .325, .96) .7s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .7s
}

.is-enter .slide-in.slide-in--delay-08 {
    -webkit-transition: opacity .3s linear .8s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .8s;
    transition: opacity .3s linear .8s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .8s;
    transition: opacity .3s linear .8s, transform .3s cubic-bezier(.53, .165, .325, .96) .8s;
    transition: opacity .3s linear .8s, transform .3s cubic-bezier(.53, .165, .325, .96) .8s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .8s
}

.is-enter .slide-in.slide-in--delay-09 {
    -webkit-transition: opacity .3s linear .9s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .9s;
    transition: opacity .3s linear .9s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .9s;
    transition: opacity .3s linear .9s, transform .3s cubic-bezier(.53, .165, .325, .96) .9s;
    transition: opacity .3s linear .9s, transform .3s cubic-bezier(.53, .165, .325, .96) .9s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .9s
}

.is-enter .slide-in.slide-in--delay-11 {
    -webkit-transition: opacity .3s linear 1.1s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.1s;
    transition: opacity .3s linear 1.1s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.1s;
    transition: opacity .3s linear 1.1s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.1s;
    transition: opacity .3s linear 1.1s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.1s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.1s
}

.is-enter .slide-in.slide-in--delay-12 {
    -webkit-transition: opacity .3s linear 1.2s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.2s;
    transition: opacity .3s linear 1.2s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.2s;
    transition: opacity .3s linear 1.2s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.2s;
    transition: opacity .3s linear 1.2s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.2s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.2s
}

.is-enter .slide-in.slide-in--delay-13 {
    -webkit-transition: opacity .3s linear 1.3s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.3s;
    transition: opacity .3s linear 1.3s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.3s;
    transition: opacity .3s linear 1.3s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.3s;
    transition: opacity .3s linear 1.3s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.3s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.3s
}

.is-enter .slide-in.slide-in--delay-14 {
    -webkit-transition: opacity .3s linear 1.4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.4s;
    transition: opacity .3s linear 1.4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.4s;
    transition: opacity .3s linear 1.4s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.4s;
    transition: opacity .3s linear 1.4s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.4s
}

.is-enter .slide-in.slide-in--delay-15 {
    -webkit-transition: opacity .3s linear 1.5s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.5s;
    transition: opacity .3s linear 1.5s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.5s;
    transition: opacity .3s linear 1.5s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.5s;
    transition: opacity .3s linear 1.5s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.5s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.5s
}

.is-enter .slide-in.slide-in--delay-16 {
    -webkit-transition: opacity .3s linear 1.6s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.6s;
    transition: opacity .3s linear 1.6s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.6s;
    transition: opacity .3s linear 1.6s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.6s;
    transition: opacity .3s linear 1.6s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.6s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.6s
}

.is-enter .slide-in.slide-in--delay-17 {
    -webkit-transition: opacity .3s linear 1.7s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.7s;
    transition: opacity .3s linear 1.7s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.7s;
    transition: opacity .3s linear 1.7s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.7s;
    transition: opacity .3s linear 1.7s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.7s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.7s
}

.is-enter .slide-in.slide-in--delay-18 {
    -webkit-transition: opacity .3s linear 1.8s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.8s;
    transition: opacity .3s linear 1.8s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.8s;
    transition: opacity .3s linear 1.8s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.8s;
    transition: opacity .3s linear 1.8s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.8s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.8s
}

.is-enter .slide-in.slide-in--delay-19 {
    -webkit-transition: opacity .3s linear 1.9s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.9s;
    transition: opacity .3s linear 1.9s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.9s;
    transition: opacity .3s linear 1.9s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.9s;
    transition: opacity .3s linear 1.9s, transform .3s cubic-bezier(.53, .165, .325, .96) 1.9s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) 1.9s
}

.slider {
    border-radius: 10px;
    padding: 30px;
    background: #f5f5f5;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .slider {
        border-radius: 2.6666666667vw;
        padding: 5.3333333333vw
    }
}

.slider__header {
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #6c5ded
}

@media(max-width:767px) {
    .slider__header {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.slider__img img {
    border-radius: 10px
}

.slider__text {
    margin-top: 10px;
    width: 100%;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .slider__text {
        margin-top: 2.4vw;
        font-size: 3.7333333333vw;
        line-height: 6.8vw
    }
}

.slider__next,
.slider__prev {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: auto;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background: #fff;
    box-shadow: 0 3px 3px rgba(90, 90, 90, .16);
    border: 1px solid #2cc697
}

.slider__next svg path,
.slider__prev svg path {
    fill: #2cc697
}

.slider__prev {
    left: -18px
}

.slider__prev svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    position: relative;
    left: -1px
}

@media(max-width:767px) {
    .slider__prev svg {
        left: -.2666666667vw
    }
}

.slider__next {
    right: -18px
}

.slider__next svg {
    position: relative;
    left: 1px
}

.slider__next svg path {
    fill: #2cc697
}

@media(max-width:767px) {
    .slider__next svg {
        left: .2666666667vw
    }
}

.slider--purple .slider__next,
.slider--purple .slider__prev,
[data-theme-color=purple] .slider__next,
[data-theme-color=purple] .slider__prev {
    border: 1px solid #6c5ded
}

.slider--purple .slider__next svg path,
.slider--purple .slider__prev svg path,
[data-theme-color=purple] .slider__next svg path,
[data-theme-color=purple] .slider__prev svg path {
    fill: #6c5ded
}

.slider--green .slider__next,
.slider--green .slider__prev,
[data-theme-color=green] .slider__next,
[data-theme-color=green] .slider__prev {
    border: 1px solid #2cc697
}

.slider--green .slider__next svg path,
.slider--green .slider__prev svg path,
[data-theme-color=green] .slider__next svg path,
[data-theme-color=green] .slider__prev svg path {
    fill: #2cc697
}

.slider--pink .slider__next,
.slider--pink .slider__prev,
[data-theme-color=pink] .slider__next,
[data-theme-color=pink] .slider__prev {
    border: 1px solid #eb4d9c
}

.slider--pink .slider__next svg path,
.slider--pink .slider__prev svg path,
[data-theme-color=pink] .slider__next svg path,
[data-theme-color=pink] .slider__prev svg path {
    fill: #eb4d9c
}

.slider--orange .slider__next,
.slider--orange .slider__prev,
[data-theme-color=orange] .slider__next,
[data-theme-color=orange] .slider__prev {
    border: 1px solid #ef3e4c
}

.slider--orange .slider__next svg path,
.slider--orange .slider__prev svg path,
[data-theme-color=orange] .slider__next svg path,
[data-theme-color=orange] .slider__prev svg path {
    fill: #ef3e4c
}

.slider--blue .slider__next,
.slider--blue .slider__prev,
[data-theme-color=blue] .slider__next,
[data-theme-color=blue] .slider__prev {
    border: 1px solid #33b6dd
}

.slider--blue .slider__next svg path,
.slider--blue .slider__prev svg path,
[data-theme-color=blue] .slider__next svg path,
[data-theme-color=blue] .slider__prev svg path {
    fill: #33b6dd
}

.slider--yellow .slider__next,
.slider--yellow .slider__prev,
[data-theme-color=yellow] .slider__next,
[data-theme-color=yellow] .slider__prev {
    border: 1px solid #fc9e1d
}

.slider--yellow .slider__next svg path,
.slider--yellow .slider__prev svg path,
[data-theme-color=yellow] .slider__next svg path,
[data-theme-color=yellow] .slider__prev svg path {
    fill: #fc9e1d
}

.slider--line .slider__next,
.slider--line .slider__prev,
[data-theme-color=line] .slider__next,
[data-theme-color=line] .slider__prev {
    border: 1px solid #06c755
}

.slider--line .slider__next svg path,
.slider--line .slider__prev svg path,
[data-theme-color=line] .slider__next svg path,
[data-theme-color=line] .slider__prev svg path {
    fill: #06c755
}

@media(max-width:767px) {
    .slider--lesson {
        background: transparent;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
        margin-left: -5.3333333333vw;
        margin-right: -5.3333333333vw
    }
    .slider--lesson .slider__item {
        width: 78.6666666667vw
    }
}

.sns-share__heading {
    text-align: center
}

.sns-share__list {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.sns-share__item {
    margin: 0 10px
}

.sns-share__svg {
    width: 30px;
    height: 30px
}

.sns-share__svg svg {
    fill: #6c5ded
}

.sns-share__svg .svg-icon-twitter {
    fill: #1da1f2
}

.sns-share__svg .svg-icon-facebook {
    fill: #1877f2
}

.sns-share__svg .svg-icon-hatebu {
    fill: #00a4de
}

.sns-share__svg .svg-icon-line {
    fill: #06c755
}

.sort-categorys {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
}

@media(max-width:767px) {
    .sort-categorys {
        display: block
    }
}

.sort-categorys__item {
    margin-top: 20px;
    -webkit-box-flex: 0;
    flex: 0 1 33.3333%
}

@media(max-width:767px) {
    .sort-categorys__item {
        margin-top: 3.7333333333vw
    }
}

.sort-categorys__link {
    position: relative;
    display: block;
    padding-left: 27px;
    padding-right: 20px;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .sort-categorys__link {
        padding-left: 7.2vw;
        padding-right: 0;
        font-size: 4.5333333333vw;
        line-height: 8vw
    }
}

.sort-categorys__link .circle-arrow {
    position: absolute;
    top: 5px;
    left: 0
}

@media(max-width:767px) {
    .sort-categorys__link .circle-arrow {
        top: 1.3333333333vw
    }
}

.sort-tags {
    margin-top: 15px
}

@media(max-width:767px) {
    .sort-tags {
        margin-top: 4vw
    }
}

.sort-tags__tag {
    display: inline-block;
    width: auto;
    margin: 5px 10px 5px 0
}

@media(max-width:767px) {
    .sort-tags__tag {
        margin: 1.3333333333vw 2.6666666667vw 1.3333333333vw 0
    }
}

.sort-tags__tag-link {
    display: -webkit-inline-box;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 5px 14px 5px 12px;
    border-radius: 14px;
    background: #f0eefd;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 1.25;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .sort-tags__tag-link {
        padding: 1.0666666667vw 3.7333333333vw 1.3333333333vw 3.2vw;
        border-radius: 9.6vw;
        font-size: 3.2vw;
        line-height: 1.25
    }
}

.sort-tags__tag-link>svg {
    margin-right: 5px;
    width: 12px;
    height: 12px;
    display: inline-block
}

@media(max-width:767px) {
    .sort-tags__tag-link>svg {
        margin-right: 1.3333333333vw;
        width: 3.2vw;
        height: 3.2vw
    }
}

.sort-tags__tag-link:hover {
    background: #6c5ded;
    color: #fff
}

.sort-tags__tag-link:hover svg {
    fill: #fff
}

.sort-tags__tag-link--clear {
    border: 1px solid #6c5ded;
    background: #fff;
    color: #6c5ded
}

.sort-tags__tag-link--clear svg {
    fill: #6c5ded
}

.sort-tags__tag-link--delete {
    position: relative;
    background: #6c5ded;
    color: #fff
}

.sort-tags__tag-link--delete>svg {
    fill: #fff
}

.sort-tags__tag-link--delete>span {
    position: absolute;
    top: -8px;
    right: -12px;
    width: 28.28px;
    height: 28.28px
}

.sort-tags__tag-link--delete>span>svg {
    margin-right: 5px;
    width: 100%;
    height: 100%;
    display: inline-block
}

@media(max-width:767px) {
    .sort-tags__tag-link--delete>span>svg {
        margin-right: 1.3333333333vw
    }
}

.speech-bubble {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start
}

.speech-bubble__image {
    width: 80px;
    height: 80px
}

.speech-bubble__image img {
    width: 100%;
    height: auto;
    border-radius: 50%
}

.speech-bubble__text {
    position: relative;
    width: 620px;
    padding: 15px 20px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    border-radius: 0 10px 10px 10px
}

.speech-bubble__text:before {
    position: absolute;
    content: " ";
    display: block;
    left: -12px;
    top: 0;
    width: 0;
    height: 0;
    border: none;
    border-top: 12px solid #fff;
    border-left: 12px solid transparent
}

@media(max-width:767px) {
    .speech-bubble__text {
        width: calc(100% - 90px)
    }
}

.speech-bubble+.speech-bubble {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse
}

.speech-bubble+.speech-bubble .speech-bubble__text {
    border-radius: 10px 0 10px 10px
}

.speech-bubble+.speech-bubble .speech-bubble__text:before {
    left: auto;
    right: -12px;
    border-right: 12px solid transparent;
    border-left: none
}

.step-list {
    padding: 100px 160px;
    border-radius: 10px;
    background-color: #f5f5f5;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:1359px) {
    .step-list {
        padding: 100px 40px 100px 80px
    }
}

@media(max-width:767px) {
    .step-list {
        padding: 16vw 5.3333333333vw
    }
}

.step-list__item {
    position: relative;
    margin-top: 98px
}

@media(max-width:767px) {
    .step-list__item {
        margin-top: 20.8vw
    }
}

.step-list__item:first-child {
    margin-top: 0
}

.step-list__item:last-child .step__arrow {
    display: none
}

.step-list__illust {
    position: absolute;
    z-index: 2;
    width: 130px;
    height: 195px
}

@media(max-width:767px) {
    .step-list__illust {
        width: 130px;
        width: 21.3333333333vw;
        height: 32vw
    }
}

.step-list__illust--c {
    position: absolute;
    top: -100px;
    left: -187px
}

@media(max-width:767px) {
    .step-list__illust--c {
        top: -34.6666666667vw;
        left: -5.3333333333vw
    }
}

.step-list__illust--d {
    position: absolute;
    top: -118px;
    right: -160px
}

@media(max-width:767px) {
    .step-list__illust--d {
        top: -16vw;
        right: -5.3333333333vw
    }
}

.step-list__illust--b {
    position: absolute;
    top: -100px;
    left: -187px
}

@media(max-width:767px) {
    .step-list__illust--b {
        top: auto;
        bottom: -16vw;
        left: -5.3333333333vw
    }
}

.step-list__illust--j {
    top: -118px;
    right: -160px
}

.step {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    position: relative
}

@media(max-width:767px) {
    .step {
        display: block
    }
}

.step__count {
    position: absolute;
    top: -41px;
    left: -53px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 100px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: left;
    color: #fff
}

@media(max-width:767px) {
    .step__count {
        top: -10.9333333333vw;
        left: 0;
        font-size: 26.6666666667vw
    }
}

.step__thumb {
    -webkit-box-flex: 0;
    flex: 0 1 320px;
    width: 320px
}

.step__thumb img {
    border-radius: 10px
}

@media(max-width:1359px) {
    .step__thumb {
        margin-left: 40px
    }
}

@media(max-width:767px) {
    .step__thumb {
        margin-left: 0;
        margin-top: 5.3333333333vw;
        width: 100%
    }
}

.step__content {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 0;
    flex: 0 1 400px
}

@media(max-width:1359px) {
    .step__content {
        -webkit-box-flex: 0;
        flex: 0 1 58.8235294118vw
    }
}

.step__header {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #2cc697
}

@media(max-width:767px) {
    .step__header {
        font-size: 5.3333333333vw;
        line-height: 9.0666666667vw
    }
}

.step__body {
    margin-top: 32px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .step__body {
        margin-top: 5.3333333333vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.step__arrow {
    position: absolute;
    bottom: -58px;
    left: 0;
    right: 0;
    width: 18px;
    margin: auto;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.step__arrow svg {
    width: 18px;
    height: 30px
}

.step__arrow svg path {
    fill: #2cc697
}

.stories {
    position: relative;
    margin-top: 20px;
    padding: 28px 30px;
    border-radius: 10px;
    border: 1px solid #6c5ded;
    background: #fff
}

@media(max-width:767px) {
    .stories {
        margin-top: 3.4666666667vw;
        padding: 4.8vw 5.3333333333vw;
        border-radius: 2.6666666667vw
    }
}

.stories:after,
.stories:before {
    position: absolute;
    left: 74px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top: none;
    border-bottom: 11px solid #6c5ded
}

@media(max-width:767px) {
    .stories:after,
    .stories:before {
        left: 12.8vw;
        border-left: 1.8666666667vw solid transparent;
        border-right: 1.8666666667vw solid transparent;
        border-bottom: 1.8666666667vw solid #6c5ded
    }
}

.stories:before {
    top: -11px;
    border-bottom: 11px solid #6c5ded
}

@media(max-width:767px) {
    .stories:before {
        top: -1.8666666667vw;
        border-bottom: 1.8666666667vw solid #6c5ded
    }
}

.stories:after {
    top: -9px;
    border-bottom: 11px solid #fff
}

@media(max-width:767px) {
    .stories:after {
        top: -1.3333333333vw;
        border-bottom: 1.8666666667vw solid #fff
    }
}

.stories__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 117px;
    height: 21px;
    padding-top: 1px;
    border-radius: 5px;
    background: #6c5ded;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    text-align: left;
    color: #fff
}

@media(max-width:767px) {
    .stories__header {
        width: 31.2vw;
        height: 5.6vw;
        padding-top: .2666666667vw;
        border-radius: 1.3333333333vw;
        font-size: 2.6666666667vw
    }
}

.stories__list {
    position: relative;
    padding: 0 0 28px 24px
}

@media(max-width:767px) {
    .stories__list {
        padding: 0 0 5.3333333333vw 6.4vw
    }
}

.stories__list:first-of-type {
    margin-top: 14px
}

@media(max-width:767px) {
    .stories__list:first-of-type {
        margin-top: 3.7333333333vw
    }
}

.stories__list:last-child {
    padding-bottom: 0
}

.stories__list:last-child .stories__title:after {
    display: none
}

.stories__title {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #6c5ded
}

@media(max-width:767px) {
    .stories__title {
        font-size: 4.2666666667vw;
        line-height: 8vw
    }
}

.stories__title:before {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 0;
    content: " ";
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid #6c5ded;
    background-color: #f0eefd
}

@media(max-width:767px) {
    .stories__title:before {
        top: 2.6666666667vw;
        width: 3.4666666667vw;
        height: 3.4666666667vw
    }
}

.stories__title:after {
    position: absolute;
    width: 1px;
    height: 100%;
    top: 10px;
    left: 6px;
    content: " ";
    display: block;
    background-color: #6c5ded
}

@media(max-width:767px) {
    .stories__title:after {
        top: 2.6666666667vw;
        left: 1.6vw
    }
}

.stories__text {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .stories__text {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.support-01 {
    position: relative;
    width: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .2);
    padding: 80px 60px
}

@media(max-width:767px) {
    .support-01 {
        border-radius: 2.6666666667vw;
        padding: 10.6666666667vw 5.3333333333vw 0
    }
}

.support-01__header {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .support-01__header {
        display: block
    }
}

.support-01__header__image {
    -webkit-box-flex: 0;
    flex: 0 1 42%
}

.support-01__header__image img {
    border-radius: 10px;
    background: #e3e3e3;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16)
}

.support-01__header__content {
    -webkit-box-flex: 0;
    flex: 0 1 50%
}

.support-01__header__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #2cc697
}

@media(max-width:767px) {
    .support-01__header__title {
        margin-top: 5.3333333333vw;
        font-size: 5.3333333333vw;
        line-height: 9.0666666667vw
    }
}

.support-01__header__description {
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid #2cc697;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .support-01__header__description {
        font-size: 4vw;
        line-height: 8vw
    }
}

.support-01__list {
    margin-top: 70px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .support-01__list {
        display: block
    }
}

.support-01__item {
    -webkit-box-flex: 0;
    flex: 0 1 23.5%;
    border-radius: 10px;
    background: hsla(0, 0%, 80%, .1)
}

@media(max-width:767px) {
    .support-01__item {
        border-radius: 2.6666666667vw;
        margin-top: 5.3333333333vw
    }
}

.support-01__item__thumb {
    position: relative
}

.support-01__item__thumb img {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: auto
}

@media(max-width:767px) {
    .support-01__item__thumb img {
        border-radius: 2.6666666667vw 2.6666666667vw 0 0
    }
}

.support-01__item__number {
    position: absolute;
    top: 0;
    left: 0;
    width: 83px;
    height: 21px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 10px 0 10px 0;
    background-image: linear-gradient(125deg, #36b906, #31c1bc);
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 9px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: right;
    color: #fff
}

@media(max-width:767px) {
    .support-01__item__number {
        width: 22.1333333333vw;
        height: 5.6vw;
        border-radius: 2.6666666667vw 0 2.6666666667vw 0;
        font-size: 2.6666666667vw;
        line-height: 1
    }
}

.support-01__item__content {
    padding: 14px 15px 24px
}

@media(max-width:767px) {
    .support-01__item__content {
        padding: 2.6666666667vw 5.3333333333vw 5.3333333333vw
    }
}

.support-01__item__title {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left
}

@media(max-width:767px) {
    .support-01__item__title {
        font-size: 4.5333333333vw;
        line-height: 7.4666666667vw
    }
}

.support-01__item__description {
    margin-top: 7px;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left
}

@media(max-width:767px) {
    .support-01__item__description {
        margin-top: 2.4vw;
        font-size: 3.7333333333vw;
        line-height: 6.72vw
    }
}

.support-01__case {
    margin-top: 80px
}

@media(max-width:767px) {
    .support-01__case {
        margin-top: 10.6666666667vw
    }
}

.support-01__case__body {
    margin-top: 5px
}

@media(max-width:767px) {
    .support-01__case__body {
        margin-top: 5.3333333333vw
    }
}

.support-01__case__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center
}

@media(max-width:767px) {
    .support-01__case__title {
        -moz-text-align-last: left;
        text-align-last: left;
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.support-01__case__description {
    margin-top: 18px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:767px) {
    .support-01__case__description {
        margin-top: 4.8vw;
        text-align: left;
        font-size: 4vw;
        line-height: 8vw
    }
}

.support-01__experience {
    position: relative;
    margin-top: 60px;
    padding: 60px 80px;
    border-radius: 10px;
    background-image: linear-gradient(125deg, #deffd3, #92e8e5)
}

@media(max-width:1023px) {
    .support-01__experience {
        padding: 80px 40px 360px
    }
}

@media(max-width:767px) {
    .support-01__experience {
        margin: 16vw -5.3333333333vw 0;
        padding: 8vw 5.3333333333vw 45.3333333333vw;
        border-radius: 0 0 2.6666666667vw 2.6666666667vw
    }
}

.support-01__experience__header {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: center;
    color: #2cc697
}

@media(max-width:767px) {
    .support-01__experience__header {
        font-size: 5.3333333333vw;
        line-height: 8.5333333333vw
    }
}

.support-01__experience__description {
    margin-top: 10px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .support-01__experience__description {
        -moz-text-align-last: left;
        text-align-last: left;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 8vw
    }
}

.support-01__experience__body {
    margin-top: 40px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .support-01__experience__body {
        margin-top: 5.3333333333vw;
        display: block
    }
}

.support-01__experience__item {
    -webkit-box-flex: 0;
    flex: 0 1 47.619047619%
}

@media(max-width:767px) {
    .support-01__experience__item {
        margin-top: 5.3333333333vw
    }
}

.support-01__chara {
    position: absolute;
    bottom: -64px;
    left: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 178.74px;
    width: 100%;
    z-index: 2;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:1023px) {
    .support-01__chara {
        bottom: 0;
        margin-top: 30px;
        padding-bottom: 0;
        display: block;
        height: auto
    }
}

@media(max-width:767px) {
    .support-01__chara {
        bottom: 0;
        margin-top: 8vw;
        padding-bottom: 6.9333333333vw;
        display: block;
        height: auto
    }
}

.support-01__chara__balloon {
    position: relative;
    margin-top: 50px;
    width: 263px;
    height: 54px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background: #fff;
    -webkit-filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .16));
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:1023px) {
    .support-01__chara__balloon {
        position: absolute;
        top: 60px;
        left: 200px;
        margin: 24px 0 0;
        width: 243px;
        height: 54px;
        font-size: 16px;
        line-height: 30px
    }
}

@media(max-width:767px) {
    .support-01__chara__balloon {
        position: relative;
        top: 0;
        left: 0;
        margin: 6.4vw 0 0;
        width: 62.4vw;
        height: 13.8666666667vw;
        font-size: 3.2vw;
        line-height: 7.4666666667vw
    }
}

.support-01__chara__balloon:before {
    position: absolute;
    bottom: 0;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 12px solid #fff
}

@media(max-width:767px) {
    .support-01__chara__balloon:before {
        border-bottom: 3.2vw solid #fff
    }
}

.support-01__chara__image {
    position: absolute;
    bottom: -20px;
    right: -80px
}

.support-01__chara__item--01 {
    padding-left: 140px
}

@media(max-width:1023px) {
    .support-01__chara__item--01 {
        position: relative;
        height: 178px;
        padding-left: 90px
    }
}

@media(max-width:767px) {
    .support-01__chara__item--01 {
        position: relative;
        height: auto;
        padding-left: 24vw
    }
}

.support-01__chara__item--01 .support-01__chara__balloon {
    border-radius: 20px 20px 20px 0
}

@media(max-width:1023px) {
    .support-01__chara__item--01 .support-01__chara__balloon {
        border-radius: 20px 20px 20px 0
    }
}

@media(max-width:767px) {
    .support-01__chara__item--01 .support-01__chara__balloon {
        border-radius: 5.3333333333vw 5.3333333333vw 5.3333333333vw 0
    }
}

.support-01__chara__item--01 .support-01__chara__balloon:before {
    left: -12px;
    border-top: none;
    border-right: none;
    border-left: 12px solid transparent
}

@media(max-width:1023px) {
    .support-01__chara__item--01 .support-01__chara__balloon:before {
        left: -12px;
        border-left: 12px solid transparent
    }
}

@media(max-width:767px) {
    .support-01__chara__item--01 .support-01__chara__balloon:before {
        left: -3.2vw;
        border-left: 3.2vw solid transparent
    }
}

.support-01__chara__item--01 .support-01__chara__image {
    left: -50px;
    width: 178.74px;
    height: 178.74px
}

@media(max-width:1023px) {
    .support-01__chara__item--01 .support-01__chara__image {
        left: 10px;
        width: 178.74px;
        height: 178.74px;
        bottom: -30px
    }
}

@media(max-width:767px) {
    .support-01__chara__item--01 .support-01__chara__image {
        left: 2.6666666667vw;
        width: 17.6vw;
        height: 18.9333333333vw;
        bottom: -8vw
    }
}

.support-01__chara__item--02 {
    padding-right: 140px
}

@media(max-width:1023px) {
    .support-01__chara__item--02 {
        position: relative;
        height: 178px;
        padding-right: 140px
    }
}

@media(max-width:767px) {
    .support-01__chara__item--02 {
        height: auto;
        padding-right: 0;
        padding-left: 2.6666666667vw
    }
}

.support-01__chara__item--02 .support-01__chara__balloon {
    border-radius: 20px 20px 0 20px
}

@media(max-width:1023px) {
    .support-01__chara__item--02 .support-01__chara__balloon {
        border-radius: 20px 20px 0 20px;
        left: auto;
        right: 190px
    }
}

@media(max-width:767px) {
    .support-01__chara__item--02 .support-01__chara__balloon {
        right: auto;
        border-radius: 5.3333333333vw 5.3333333333vw 0 5.3333333333vw
    }
}

.support-01__chara__item--02 .support-01__chara__balloon:before {
    right: -12px;
    border-top: none;
    border-left: none;
    border-right: 12px solid transparent
}

@media(max-width:1023px) {
    .support-01__chara__item--02 .support-01__chara__balloon:before {
        right: -12px;
        border-right: 12px solid transparent
    }
}

@media(max-width:767px) {
    .support-01__chara__item--02 .support-01__chara__balloon:before {
        right: -3.2vw;
        border-right: 3.2vw solid transparent
    }
}

.support-01__chara__item--02 .support-01__chara__image {
    right: -60px;
    width: 167px;
    height: 168px
}

@media(max-width:1023px) {
    .support-01__chara__item--02 .support-01__chara__image {
        width: 167px;
        height: 168px;
        right: 0;
        bottom: 0
    }
}

@media(max-width:767px) {
    .support-01__chara__item--02 .support-01__chara__image {
        width: 19.2vw;
        height: 19.2vw;
        right: 0;
        bottom: -6.9333333333vw
    }
}

.support-02 {
    width: 100%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .2);
    padding: 80px 60px
}

@media(max-width:767px) {
    .support-02 {
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .2);
        padding: 8vw 5.3333333333vw
    }
}

.support-02__balloon {
    position: relative;
    border-radius: 10px;
    background: #f5f5f5
}

.support-02__balloon:before {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    content: " ";
    display: block;
    margin: auto;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    border-top: 20px solid #f5f5f5;
    border-bottom: none
}

@media(max-width:767px) {
    .support-02__balloon {
        border-radius: 2.6666666667vw
    }
    .support-02__balloon:before {
        bottom: -5.3333333333vw;
        border-top: 5.3333333333vw solid #f5f5f5;
        border-left: 4.2666666667vw solid transparent;
        border-right: 4.2666666667vw solid transparent
    }
}

.support-02__balloon__illust {
    position: absolute;
    bottom: -4px;
    right: -36px;
    width: 280px
}

@media(max-width:767px) {
    .support-02__balloon__illust {
        display: none
    }
}

.support-02__checklist {
    padding: 40px 60px 60px;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap
}

@media(max-width:767px) {
    .support-02__checklist {
        padding: .5333333333vw 4.8vw 8.5333333333vw
    }
}

.support-02__checklist__item {
    margin-top: 20px;
    -webkit-box-flex: 0;
    flex: 0 1 390px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .support-02__checklist__item {
        margin-top: 5.3333333333vw
    }
}

.support-02__copy {
    margin-top: 40px;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .08em;
    line-height: 44px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .support-02__copy {
        margin-top: 8vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.support-02__body {
    margin-top: 36px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media(max-width:767px) {
    .support-02__body {
        margin-top: 8vw;
        display: block
    }
}

.support-02__image {
    -webkit-box-flex: 0;
    flex: 0 1 42%
}

.support-02__image img {
    border-radius: 10px;
    background: #e3e3e3;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16)
}

@media(max-width:767px) {
    .support-02__image img {
        border-radius: 2.6666666667vw;
        box-shadow: 0 .8vw 1.6vw rgba(0, 0, 0, .16)
    }
}

.support-02__content {
    -webkit-box-flex: 0;
    flex: 0 1 53%
}

@media(max-width:767px) {
    .support-02__content {
        margin-top: 5.3333333333vw
    }
}

.support-02__title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: .05em;
    line-height: 48px;
    text-align: left;
    color: #eb4d9c
}

@media(max-width:767px) {
    .support-02__title {
        font-size: 5.3333333333vw;
        line-height: 9.0666666667vw
    }
}

.support-02__description {
    margin-top: 15px;
    padding-top: 19px;
    border-top: 1px solid #eb4d9c;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:767px) {
    .support-02__description {
        margin-top: 3.7333333333vw;
        padding-top: 3.7333333333vw;
        font-size: 4vw;
        line-height: 8vw
    }
}

.support-02__link {
    width: 240px;
    margin: 40px auto auto
}

@media(max-width:767px) {
    .support-02__link {
        width: 53.3333333333vw;
        margin: 8vw auto 0
    }
}

.support-visual {
    position: relative;
    padding: 80px 0
}

@media(max-width:767px) {
    .support-visual {
        padding: 0
    }
}

.support-visual__inner {
    max-width: 960px;
    padding: 43px 0 36px;
    margin: auto;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .support-visual__inner {
        width: 100%;
        padding: 43px 5.3333333333vw 36px;
        box-shadow: none;
        border-radius: 0
    }
}

.support-visual__copy {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .08em;
    line-height: 44px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .support-visual__copy {
        font-size: 3.4666666667vw;
        line-height: 2
    }
}

.support-visual__title {
    margin-top: 10px;
    text-align: center
}

@media(max-width:767px) {
    .support-visual__title {
        width: 71.8026666667vw;
        margin: auto
    }
}

.support-visual__description {
    margin-top: 22px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .support-visual__description {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.support-visual__list {
    margin-top: 44px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:767px) {
    .support-visual__list {
        display: none
    }
}

.support-visual__item {
    text-align: center
}

.support-visual__plus {
    margin: 0 28px
}

.support-visual__item__for {
    display: inline-block;
    width: 288px;
    height: 34px;
    border-radius: 17px;
    background: rgba(44, 198, 151, .1);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

.support-visual__item__title {
    margin-top: 14px;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    color: #2cc697
}

.support-visual__item__image {
    margin-top: 10px;
    display: inline-block;
    width: 220px
}

.support-visual__item--pink .support-visual__item__for {
    background: rgba(235, 77, 156, .1)
}

.support-visual__item--pink .support-visual__item__title {
    color: #eb4d9c
}

.support-visual__anchor {
    position: relative;
    z-index: 2;
    margin-top: 78px
}

@media(max-width:767px) {
    .support-visual__anchor {
        margin: 14.6666666667vw 0
    }
}

.support-visual__anchor .anchor>li>a {
    width: 300px
}

@media(max-width:767px) {
    .support-visual__anchor .anchor>li>a {
        width: 80vw
    }
}

.support-visual__illust {
    position: absolute;
    bottom: 0;
    right: 50%;
    -webkit-transform: translateX(731px);
    transform: translateX(731px);
    width: 550px;
    height: 366.67px
}

@media(max-width:1359px) {
    .support-visual__illust {
        width: 440px;
        height: 293.336px;
        -webkit-transform: translateX(621px);
        transform: translateX(621px)
    }
}

@media(max-width:1023px) {
    .support-visual__illust {
        width: 440px;
        height: 293.336px;
        -webkit-transform: translateX(521px);
        transform: translateX(521px)
    }
}

@media(max-width:767px) {
    .support-visual__illust {
        display: none
    }
}

.teacher-comment {
    position: relative;
    max-width: 1120px;
    margin: auto;
    padding: 60px 80px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:767px) {
    .teacher-comment {
        padding: 8vw 10.6666666667vw;
        display: block
    }
}

.teacher-comment__name {
    position: absolute;
    top: -35px;
    left: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 50px;
    letter-spacing: .05em;
    line-height: 70px;
    text-align: left;
    color: transparent;
    -webkit-text-stroke: 1px #6c5ded;
    opacity: .47
}

.teacher-comment__icon {
    width: 89px;
    height: 89px;
    margin-right: 27.5px;
    border-radius: 50%
}

.teacher-comment__icon span {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #6c5ded
}

@media(max-width:767px) {
    .teacher-comment__icon {
        display: -webkit-box;
        display: flex;
        width: 100%;
        height: auto;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center
    }
    .teacher-comment__icon img {
        width: 16vw;
        height: 16vw;
        margin-right: 3.2vw
    }
}

.teacher-comment__icon img {
    border-radius: 50%
}

.teacher-comment__balloon {
    position: relative;
    width: 554px;
    padding: 30px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

@media(max-width:767px) {
    .teacher-comment__balloon {
        margin-top: 4.72vw;
        width: 78.6666666667vw;
        padding: 5.3333333333vw 8vw
    }
}

.teacher-comment__balloon:before {
    position: absolute;
    top: 36px;
    left: -14px;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-right: 14px solid #fff;
    border-left: none
}

@media(max-width:767px) {
    .teacher-comment__balloon:before {
        top: -1.8666666667vw;
        left: 16vw;
        border: 1.6vw solid transparent;
        border-top: none;
        border-bottom: 1.8666666667vw solid #fff
    }
}

.teacher-comment__balloon__header {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    color: #6c5ded
}

@media(max-width:767px) {
    .teacher-comment__balloon__header {
        display: none
    }
}

.teacher-comment__comment {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

.teacher-link {
    position: relative;
    display: block;
    width: 100%;
    padding: 40px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    -webkit-transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96);
    transition: box-shadow .3s cubic-bezier(.53, .165, .325, .96)
}

@media(max-width:1359px) {
    .teacher-link {
        padding: 30px
    }
}

@media(max-width:767px) {
    .teacher-link {
        padding: 5.3333333333vw;
        border-radius: 5.3333333333vw;
        background: #fff;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.teacher-link:hover {
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

.teacher-link__school {
    position: absolute;
    padding: 4px 16px;
    top: 0;
    left: 0;
    background-color: #6c5ded;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    border-radius: 10px 0 10px 0
}

@media(max-width:767px) {
    .teacher-link__school {
        padding: 1.0666666667vw 4.2666666667vw;
        font-size: 3.2vw;
        line-height: 6.4vw;
        border-radius: 5.3333333333vw 0 5.3333333333vw 0
    }
}

@media(max-width:767px) {
    .teacher-link__school+.teacher-link__top {
        margin-top: 8vw
    }
}

@media(max-width:767px) {
    .teacher-link__header {
        -webkit-box-flex: 0;
        flex: 0 1 100%;
        padding-left: 2.6666666667vw
    }
}

.teacher-link__thumb {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #6c5ded
}

@media(max-width:1359px) {
    .teacher-link__thumb {
        left: 30px;
        width: 13.2352941176vw;
        height: 13.2352941176vw
    }
}

@media(max-width:767px) {
    .teacher-link__thumb {
        -webkit-box-flex: 1;
        flex: 1 0 26.6666666667vw;
        position: static;
        width: 26.6666666667vw;
        height: 26.6666666667vw
    }
}

.teacher-link__thumb img {
    width: 100%;
    height: auto;
    border-radius: 50%
}

.teacher-link__top {
    padding-left: 200px;
    width: 100%
}

@media(max-width:1359px) {
    .teacher-link__top {
        padding-left: calc(13.23529vw + 20px)
    }
}

@media(max-width:767px) {
    .teacher-link__top {
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        padding: 0
    }
}

.teacher-link__content {
    padding-left: 200px;
    width: 100%;
    min-height: 110px
}

@media(max-width:1359px) {
    .teacher-link__content {
        padding-left: calc(13.23529vw + 20px)
    }
}

@media(max-width:767px) {
    .teacher-link__content {
        width: 100%;
        padding: 0;
        min-height: inherit
    }
}

.teacher-link__name {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: left
}

@media(max-width:767px) {
    .teacher-link__name {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.teacher-link__name small {
    margin-left: 8px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 22px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .teacher-link__name small {
        margin-left: .8vw;
        font-size: 3.2vw;
        line-height: 8vw
    }
}

.teacher-link__position {
    margin-top: 1px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1.6;
    text-align: left;
    color: #6c5ded
}

@media(max-width:767px) {
    .teacher-link__position {
        margin-top: 0;
        font-size: 3.2vw;
        line-height: 1.6
    }
}

.teacher-link__excerpt {
    display: -webkit-box;
    position: relative;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #ccc;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    overflow: hidden;
    max-height: 190px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6
}

@media(max-width:767px) {
    .teacher-link__excerpt {
        display: block;
        margin-top: 2.6666666667vw;
        padding-top: 0;
        border-top: none;
        font-size: 4vw;
        line-height: 7.4666666667vw;
        max-height: none;
        overflow: auto
    }
}

.teacher-link__more {
    margin-top: 15px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: left;
    color: #121212
}

@media(max-width:767px) {
    .teacher-link__more {
        margin-top: 2.6666666667vw;
        font-size: 3.7333333333vw;
        line-height: 6.72vw
    }
}

.teacher-link__more svg {
    width: 10px;
    height: 6px
}

.teacher-link__more svg path {
    fill: #6c5ded
}

.teacher-link--purple .teacher-link__position,
[data-theme-color=purple] .teacher-link__position {
    color: #6c5ded
}

.teacher-link--purple .teacher-link__more svg path,
[data-theme-color=purple] .teacher-link__more svg path {
    fill: #6c5ded
}

.teacher-link--green .teacher-link__position,
[data-theme-color=green] .teacher-link__position {
    color: #2cc697
}

.teacher-link--green .teacher-link__more svg path,
[data-theme-color=green] .teacher-link__more svg path {
    fill: #2cc697
}

.teacher-link--pink .teacher-link__position,
[data-theme-color=pink] .teacher-link__position {
    color: #eb4d9c
}

.teacher-link--pink .teacher-link__more svg path,
[data-theme-color=pink] .teacher-link__more svg path {
    fill: #eb4d9c
}

.teacher-link--orange .teacher-link__position,
[data-theme-color=orange] .teacher-link__position {
    color: #ef3e4c
}

.teacher-link--orange .teacher-link__more svg path,
[data-theme-color=orange] .teacher-link__more svg path {
    fill: #ef3e4c
}

.teacher-link--blue .teacher-link__position,
[data-theme-color=blue] .teacher-link__position {
    color: #33b6dd
}

.teacher-link--blue .teacher-link__more svg path,
[data-theme-color=blue] .teacher-link__more svg path {
    fill: #33b6dd
}

.teacher-link--yellow .teacher-link__position,
[data-theme-color=yellow] .teacher-link__position {
    color: #fc9e1d
}

.teacher-link--yellow .teacher-link__more svg path,
[data-theme-color=yellow] .teacher-link__more svg path {
    fill: #fc9e1d
}

.teacher-link--line .teacher-link__position,
[data-theme-color=line] .teacher-link__position {
    color: #06c755
}

.teacher-link--line .teacher-link__more svg path,
[data-theme-color=line] .teacher-link__more svg path {
    fill: #06c755
}

.teacher-list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -20px
}

@media(max-width:767px) {
    .teacher-list {
        display: block;
        margin: 0 -5.3333333333vw
    }
}

.teacher-list__item {
    -webkit-box-flex: 0;
    flex: 0 1 50%;
    padding: 15px 20px
}

@media(max-width:767px) {
    .teacher-list__item {
        padding: 5.3333333333vw 5.3333333333vw 0
    }
    .teacher-list__item:first-child {
        padding-top: 0
    }
}

.teacher-visual {
    position: relative;
    max-width: 800px;
    height: 608px;
    margin: auto;
    padding-top: 112px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:767px) {
    .teacher-visual {
        width: 100%;
        height: auto;
        padding: 29.3333333333vw 10.6666666667vw 16vw
    }
    .teacher-visual:before {
        position: absolute;
        z-index: -1;
        top: 66.6666666667vw;
        left: 0;
        content: " ";
        display: block;
        width: 100%;
        height: 100%;
        background-color: #fff
    }
}

.teacher-visual__copy {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #6c5ded;
    max-width: 60%
}

@media(max-width:767px) {
    .teacher-visual__copy {
        margin-top: 30px;
        font-weight: 500;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        text-align: left;
        max-width: none
    }
}

.teacher-visual__name {
    margin-top: 4px;
    font-weight: 700;
    font-size: 42px;
    letter-spacing: .12em;
    line-height: 65px;
    text-align: left;
    color: #222;
    max-width: 60%
}

@media(max-width:767px) {
    .teacher-visual__name {
        font-size: 7.4666666667vw;
        letter-spacing: .12em;
        line-height: 12.8vw;
        max-width: none
    }
}

.teacher-visual__name small {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .teacher-visual__name small {
        font-size: 4.2666666667vw;
        letter-spacing: .05em;
        line-height: 8vw
    }
}

.teacher-visual__introduce {
    margin-top: 16.8px;
    width: 400px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #222
}

@media(max-width:767px) {
    .teacher-visual__introduce {
        width: 100%;
        height: auto;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw
    }
}

.teacher-visual__thumb {
    position: absolute;
    top: 185px;
    right: -20px;
    width: 320px;
    height: 320px;
    border-radius: 50%
}

@media(max-width:767px) {
    .teacher-visual__thumb {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        margin: auto;
        width: 68vw;
        height: 68vw
    }
}

.teacher-visual__thumb img {
    width: 100%;
    height: auto;
    border-radius: 50%
}

.teacher-visual__thumb:before {
    position: absolute;
    top: 10px;
    left: -20px;
    z-index: -1;
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    border-radius: 50%
}

@media(max-width:767px) {
    .teacher-visual__thumb:before {
        top: 3.4666666667vw;
        left: -3.4666666667vw
    }
}

.teacher-visual__image {
    position: absolute;
    bottom: 0;
    z-index: 2
}

.teacher-visual__image--school_a {
    z-index: 2;
    width: 233.39px;
    height: 204.59px;
    right: -40px
}

@media(max-width:767px) {
    .teacher-visual__image--school_a {
        width: 34.632vw;
        height: 30.3573333333vw;
        bottom: auto;
        top: 68vw;
        right: 5.3333333333vw;
        overflow: hidden
    }
}

.teacher-visual__image--school_b {
    width: 187.46px;
    height: 212.42px;
    right: -80px
}

@media(max-width:767px) {
    .teacher-visual__image--school_b {
        width: 27.816vw;
        height: 31.52vw;
        bottom: auto;
        top: 68vw;
        right: 2.6666666667vw;
        overflow: hidden
    }
}

.teacher-visual__en {
    position: absolute;
    bottom: -35px;
    left: 0;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 50px;
    letter-spacing: .05em;
    line-height: 70px;
    text-align: left;
    color: transparent;
    -webkit-text-stroke: 1px #6c5ded;
    opacity: .47
}

@media(max-width:767px) {
    .teacher-visual__en {
        top: 13.3333333333vw;
        right: 0;
        left: auto;
        bottom: auto;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
        white-space: nowrap;
        -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl
    }
}

.works-list {
    display: -webkit-box;
    display: flex;
    margin: -20px -10px 0;
    flex-wrap: wrap
}

@media(max-width:767px) {
    .works-list {
        display: block;
        margin: 0
    }
}

.works-list__item {
    -webkit-box-flex: 0;
    flex: 0 1 33.3333%;
    padding: 0 10px;
    margin-top: 20px
}

@media(max-width:767px) {
    .works-list__item {
        margin-top: 5.3333333333vw;
        padding: 0
    }
    .works-list__item:first-child {
        margin-top: 0
    }
}

.works__text {
    margin-top: 10px
}

.works__thumb {
    width: 100%;
    height: 240px
}

.works__thumb img {
    width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

@media(max-width:767px) {
    .works__thumb img {
        -o-object-fit: cover;
        object-fit: cover;
        height: 100%;
        width: auto
    }
}

@media(max-width:767px) {
    .works__thumb {
        text-align: center
    }
}

.text {
    overflow: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    vertical-align: bottom
}

.text,
.text__inner {
    display: inline-block
}

.text__inner {
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}

.is-enter .text,
.is-enter .text__inner {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96);
    transition: transform .3s cubic-bezier(.53, .165, .325, .96), -webkit-transform .3s cubic-bezier(.53, .165, .325, .96)
}

.is-enter .text--delay-01,
.is-enter .text--delay-01 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .1s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .1s
}

.is-enter .text--delay-02,
.is-enter .text--delay-02 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .2s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .2s
}

.is-enter .text--delay-03,
.is-enter .text--delay-03 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .3s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .3s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .3s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .3s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .3s
}

.is-enter .text--delay-04,
.is-enter .text--delay-04 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s
}

.is-enter .text--delay-05,
.is-enter .text--delay-05 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .5s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .5s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .5s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .5s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .5s
}

.is-enter .text--delay-06,
.is-enter .text--delay-06 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .6s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .6s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .6s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .6s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .6s
}

.is-enter .text--delay-07,
.is-enter .text--delay-07 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .7s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .7s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .7s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .7s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .7s
}

.is-enter .text--delay-08,
.is-enter .text--delay-08 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .8s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .8s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .8s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .8s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .8s
}

.is-enter .text--delay-09,
.is-enter .text--delay-09 .text__inner {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .9s;
    transition: -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .9s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .9s;
    transition: transform .3s cubic-bezier(.53, .165, .325, .96) .9s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .9s
}

.is-enter .text--copy,
.is-enter .text--copy .text__inner {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform .6s cubic-bezier(.53, .165, .325, .96);
    transition: -webkit-transform .6s cubic-bezier(.53, .165, .325, .96);
    transition: transform .6s cubic-bezier(.53, .165, .325, .96);
    transition: transform .6s cubic-bezier(.53, .165, .325, .96), -webkit-transform .6s cubic-bezier(.53, .165, .325, .96)
}

.theme-button {
    display: none;
    position: fixed;
    z-index: 10;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    top: 3.3333333333vw;
    right: 26.1333333333vw
}

@media(max-width:1359px) {
    .theme-button {
        display: block;
        width: 50px;
        height: 50px;
        top: 30px;
        right: 128px
    }
}

@media(max-width:767px) {
    .theme-button {
        display: block;
        width: 13.3333333333vw;
        height: 13.3333333333vw;
        top: 3.3333333333vw;
        right: 26.1333333333vw
    }
}

.theme-button__list {
    position: relative
}

.theme-button__item {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    overflow: hidden
}

.theme-button__item img {
    width: 100%;
    height: auto
}

@media(max-width:1359px) {
    .theme-button__item {
        width: 50px;
        height: 50px
    }
}

@media(max-width:767px) {
    .theme-button__item {
        width: 13.3333333333vw;
        height: 13.3333333333vw
    }
}

.theme-button__item--normal {
    background-color: #849dfc;
    z-index: 3
}

.theme-button__item--manga,
.theme-button__item--normal {
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    opacity: 0
}

.theme-button__item--manga {
    background-color: #ab68fb;
    z-index: 2
}

.theme-button__item--sd {
    background-color: #dd67fb;
    z-index: 1;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    opacity: 0
}

.is-transition-end[data-theme=normal] .theme-button__item--normal {
    z-index: 3;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    opacity: 1;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: .3s cubic-bezier(.53, .165, .325, .96) .2s
}

.is-transition-end[data-theme=normal] .theme-button__item--manga {
    z-index: 2;
    -webkit-transform: translateX(4.2666666667vw) scale(.8);
    transform: translateX(4.2666666667vw) scale(.8);
    opacity: .7;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: .3s cubic-bezier(.53, .165, .325, .96) .1s
}

@media(max-width:1359px) {
    .is-transition-end[data-theme=normal] .theme-button__item--manga {
        -webkit-transform: translateX(16px) scale(.8);
        transform: translateX(16px) scale(.8)
    }
}

@media(max-width:767px) {
    .is-transition-end[data-theme=normal] .theme-button__item--manga {
        -webkit-transform: translateX(4.2666666667vw) scale(.8);
        transform: translateX(4.2666666667vw) scale(.8)
    }
}

.is-transition-end[data-theme=normal] .theme-button__item--sd {
    z-index: 1;
    opacity: .4;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96);
    transition: .3s cubic-bezier(.53, .165, .325, .96)
}

@media(max-width:1359px) {
    .is-transition-end[data-theme=normal] .theme-button__item--sd {
        -webkit-transform: translateX(32px) scale(.6);
        transform: translateX(32px) scale(.6)
    }
}

@media(max-width:767px) {
    .is-transition-end[data-theme=normal] .theme-button__item--sd {
        -webkit-transform: translateX(8.5333333333vw) scale(.6);
        transform: translateX(8.5333333333vw) scale(.6)
    }
}

.is-transition-end[data-theme=manga] .theme-button__item--normal {
    z-index: 1;
    -webkit-transform: translateX(8.5333333333vw) scale(.6);
    transform: translateX(8.5333333333vw) scale(.6);
    opacity: .4;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96);
    transition: .3s cubic-bezier(.53, .165, .325, .96)
}

@media(max-width:1359px) {
    .is-transition-end[data-theme=manga] .theme-button__item--normal {
        -webkit-transform: translateX(32px) scale(.6);
        transform: translateX(32px) scale(.6)
    }
}

@media(max-width:767px) {
    .is-transition-end[data-theme=manga] .theme-button__item--normal {
        -webkit-transform: translateX(8.5333333333vw) scale(.6);
        transform: translateX(8.5333333333vw) scale(.6)
    }
}

.is-transition-end[data-theme=manga] .theme-button__item--manga {
    z-index: 3;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    opacity: 1;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: .3s cubic-bezier(.53, .165, .325, .96) .2s
}

.is-transition-end[data-theme=manga] .theme-button__item--sd {
    z-index: 2;
    -webkit-transform: translateX(4.2666666667vw) scale(.8);
    transform: translateX(4.2666666667vw) scale(.8);
    opacity: .7;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: .3s cubic-bezier(.53, .165, .325, .96) .1s
}

@media(max-width:1359px) {
    .is-transition-end[data-theme=manga] .theme-button__item--sd {
        -webkit-transform: translateX(16px) scale(.8);
        transform: translateX(16px) scale(.8)
    }
}

@media(max-width:767px) {
    .is-transition-end[data-theme=manga] .theme-button__item--sd {
        -webkit-transform: translateX(4.2666666667vw) scale(.8);
        transform: translateX(4.2666666667vw) scale(.8)
    }
}

.is-transition-end[data-theme=sd] .theme-button__item--normal {
    z-index: 2;
    -webkit-transform: translateX(4.2666666667vw) scale(.8);
    transform: translateX(4.2666666667vw) scale(.8);
    opacity: .7;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96) .1s;
    transition: .3s cubic-bezier(.53, .165, .325, .96) .1s
}

@media(max-width:1359px) {
    .is-transition-end[data-theme=sd] .theme-button__item--normal {
        -webkit-transform: translateX(16px) scale(.8);
        transform: translateX(16px) scale(.8)
    }
}

@media(max-width:767px) {
    .is-transition-end[data-theme=sd] .theme-button__item--normal {
        -webkit-transform: translateX(4.2666666667vw) scale(.8);
        transform: translateX(4.2666666667vw) scale(.8)
    }
}

.is-transition-end[data-theme=sd] .theme-button__item--manga {
    z-index: 1;
    -webkit-transform: translateX(8.5333333333vw) scale(.6);
    transform: translateX(8.5333333333vw) scale(.6);
    opacity: .4;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96);
    transition: .3s cubic-bezier(.53, .165, .325, .96)
}

@media(max-width:1359px) {
    .is-transition-end[data-theme=sd] .theme-button__item--manga {
        -webkit-transform: translateX(32px) scale(.6);
        transform: translateX(32px) scale(.6)
    }
}

@media(max-width:767px) {
    .is-transition-end[data-theme=sd] .theme-button__item--manga {
        -webkit-transform: translateX(8.5333333333vw) scale(.6);
        transform: translateX(8.5333333333vw) scale(.6)
    }
}

.is-transition-end[data-theme=sd] .theme-button__item--sd {
    z-index: 3;
    -webkit-transform: translateX(0) scale(1);
    transform: translateX(0) scale(1);
    opacity: 1;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96) .2s;
    transition: .3s cubic-bezier(.53, .165, .325, .96) .2s
}

.theme-modal {
    position: fixed;
    z-index: 20;
    display: none;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.theme-modal,
.theme-modal__bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.theme-modal__bg {
    position: absolute;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    opacity: .3
}

.theme-modal__content {
    position: relative;
    width: 480px;
    padding: 50px 0;
    border-radius: 20px;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transition: .2s cubic-bezier(.53, .165, .325, .96);
    transition: .2s cubic-bezier(.53, .165, .325, .96)
}

@media(max-width:767px) {
    .theme-modal__content {
        width: 89.3333333333vw;
        padding: 6.1333333333vw 0 9.0666666667vw;
        border-radius: 5.3333333333vw
    }
}

.theme-modal__content:before {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    opacity: .9;
    border-radius: 20px
}

@media(max-width:767px) {
    .theme-modal__content:before {
        border-radius: 5.3333333333vw
    }
}

.theme-modal__inner {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: .2s cubic-bezier(.53, .165, .325, .96);
    transition: .2s cubic-bezier(.53, .165, .325, .96)
}

.theme-modal__ja {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #fff
}

@media(max-width:767px) {
    .theme-modal__ja {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.theme-modal__en {
    margin-top: 8px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px;
    text-align: center;
    color: #fff
}

@media(max-width:767px) {
    .theme-modal__en {
        font-size: 3.2vw;
        line-height: 5.3333333333vw
    }
}

.theme-modal__list {
    margin-top: 43px;
    padding: 0 40px
}

@media(max-width:767px) {
    .theme-modal__list {
        margin-top: 4vw;
        padding: 0 5.3333333333vw
    }
}

.theme-modal__item {
    position: relative;
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    height: 90px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(90, 90, 90, .16);
    border-radius: 10px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media(max-width:767px) {
    .theme-modal__item {
        margin-top: 5.3333333333vw;
        box-shadow: 0 .8vw 1.6vw rgba(90, 90, 90, .16);
        border-radius: 2.6666666667vw;
        height: 24vw
    }
}

.theme-modal__item:hover .theme-modal__body:before {
    opacity: 1
}

.theme-modal__image {
    position: relative;
    width: 200px;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    border-radius: 10px 0 0 10px
}

.theme-modal__image img {
    width: 100%;
    height: auto
}

@media(max-width:767px) {
    .theme-modal__image {
        width: 1 0 50%;
        width: 50%;
        border-radius: 2.6666666667vw 0 0 2.6666666667vw
    }
}

.theme-modal__image picture {
    position: absolute;
    width: 100%;
    height: auto;
    bottom: 0;
    left: 0
}

@media(max-width:767px) {
    .theme-modal__image picture {
        width: 40vw;
        height: auto;
        bottom: 0;
        left: 0
    }
}

.theme-modal__body {
    position: relative;
    width: 200px;
    padding: 20px 25px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

@media(max-width:767px) {
    .theme-modal__body {
        padding: 5.3333333333vw 2.9333333333vw;
        width: 1 0 50%;
        width: 50%
    }
}

.theme-modal__body:before {
    position: absolute;
    opacity: 0;
    content: " ";
    display: block;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 10px 10px 0;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
}

@media(max-width:767px) {
    .theme-modal__body:before {
        border-radius: 0 2.6666666667vw 2.6666666667vw 0
    }
}

.theme-modal__text__ja {
    position: relative;
    z-index: 2;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    color: #0b2960
}

@media(max-width:767px) {
    .theme-modal__text__ja {
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.theme-modal__text__en {
    position: relative;
    z-index: 2;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 10px;
    text-align: left;
    color: #a5a5a5
}

@media(max-width:767px) {
    .theme-modal__text__en {
        font-size: 2.6666666667vw
    }
}

.theme-modal__arrow {
    position: absolute;
    top: 0;
    right: 21px;
    bottom: 0;
    width: 12px;
    height: 8px;
    margin: auto
}

@media(max-width:767px) {
    .theme-modal__arrow {
        right: 5.3333333333vw;
        width: 3.2vw;
        height: 2.1333333333vw
    }
}

.theme-modal__arrow svg {
    display: block
}

.theme-modal__arrow svg path {
    fill: #6c5ded
}

[data-theme=manga] .theme-modal__item[data-theme=manga] .theme-modal__body:before,
[data-theme=normal] .theme-modal__item[data-theme=normal] .theme-modal__body:before,
[data-theme=sd] .theme-modal__item[data-theme=sd] .theme-modal__body:before {
    opacity: 1
}

.is-theme-modal-open .theme-modal__content,
.is-theme-modal-open .theme-modal__inner {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.is-theme-modal-open .theme-modal__inner {
    opacity: 1
}

.theme-notification {
    z-index: 20;
    position: fixed;
    top: 0;
    right: 20px;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    width: 367px
}

.theme-notification__item {
    position: absolute;
    width: 347px;
    top: 122px;
    left: 0;
    display: -webkit-box;
    display: flex;
    height: 80px;
    background: #fff;
    border-radius: 10px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0
}

.theme-notification__image {
    position: relative;
    width: 126px;
    height: 100%;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    border-radius: 10px 0 0 10px
}

.theme-notification__image img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 160px;
    height: auto
}

.theme-notification__text {
    border-radius: 0 10px 10px 0;
    padding: 0 0 0 30px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 25.2px
}

.theme-select {
    position: relative;
    width: 320px;
    height: 100px;
    background: #fff;
    -webkit-filter: drop-shadow(0 3px 30px rgba(19, 29, 105, .14));
    filter: drop-shadow(0 3px 30px rgba(19, 29, 105, .14));
    border-radius: 20px
}

@media(max-width:767px) {
    .theme-select {
        width: 85.3333333333vw;
        height: 26.6666666667vw;
        border-radius: 5.3333333333vw
    }
}

.theme-select__next,
.theme-select__prev {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 49px;
    height: 49px;
    border: 1px solid #6c5ded;
    background-color: #fff;
    border-radius: 50%;
    -webkit-filter: drop-shadow(0 3px 3px rgba(19, 29, 105, .16));
    filter: drop-shadow(0 3px 3px rgba(19, 29, 105, .16))
}

.theme-select__next img,
.theme-select__prev img {
    position: absolute;
    display: block;
    width: 14px;
    height: 10px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

@media(max-width:767px) {
    .theme-select__next,
    .theme-select__prev {
        width: 8vw;
        height: 8vw
    }
}

.theme-select__prev {
    left: -24px
}

@media(max-width:767px) {
    .theme-select__prev {
        left: -4vw
    }
}

.theme-select__next {
    right: -24px
}

.theme-select__next img {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media(max-width:767px) {
    .theme-select__next {
        right: -4vw
    }
}

.theme-select__list {
    position: relative;
    width: 100%;
    height: 68px
}

.theme-select__item {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: flex;
    padding: 16px 20px 16px 44px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: start;
    justify-content: flex-start;
    opacity: 0;
    z-index: 0
}

@media(max-width:767px) {
    .theme-select__item {
        padding: 4.2666666667vw 5.3333333333vw 4.2666666667vw 11.7333333333vw
    }
}

.theme-select__item.is-select {
    opacity: 1;
    z-index: 1
}

.theme-select__image {
    background-color: #6c5ded;
    width: 68px;
    height: 68px;
    border-radius: 14px;
    margin-right: 14px
}

@media(max-width:767px) {
    .theme-select__image {
        width: 18.1333333333vw;
        height: 18.1333333333vw;
        margin-right: 3.7333333333vw;
        border-radius: 3.7333333333vw
    }
}

.theme-select__image img {
    width: 100%;
    height: auto;
    display: block
}

.theme-select__ja {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #0b2960
}

@media(max-width:767px) {
    .theme-select__ja {
        font-size: 4.8vw;
        line-height: 8vw
    }
}

.theme-select__en {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    color: #90949b
}

@media(max-width:767px) {
    .theme-select__en {
        font-size: 3.7333333333vw;
        line-height: 8vw
    }
}

.theme {
    position: fixed;
    z-index: 6;
    height: 100%;
    top: 0;
    right: 13px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: end;
    align-items: flex-end;
    text-align: right;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    pointer-events: none;
    -webkit-transition: opacity .2s linear, -webkit-transform .2s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .2s linear, -webkit-transform .2s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .2s linear, transform .2s cubic-bezier(.53, .165, .325, .96);
    transition: opacity .2s linear, transform .2s cubic-bezier(.53, .165, .325, .96), -webkit-transform .2s cubic-bezier(.53, .165, .325, .96)
}

@media(max-width:767px) {
    .theme {
        display: none
    }
}

.is-show-theme .theme {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.theme__arrow {
    display: block;
    margin-top: 3px
}

.theme__arrow svg path {
    fill: #6c5ded
}

.theme__inner {
    width: 50px;
    height: 249px;
    padding: 25px 0 0;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(90, 90, 90, .16)
}

.theme__now {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    color: #222
}

.theme__list {
    margin-top: 5px;
    -webkit-transition: .2s cubic-bezier(.53, .165, .325, .96);
    transition: .2s cubic-bezier(.53, .165, .325, .96)
}

.theme__item {
    cursor: pointer;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.theme__item,
.theme__item span {
    width: 60px;
    height: 60px;
    -webkit-transition: .2s cubic-bezier(.53, .165, .325, .96);
    transition: .2s cubic-bezier(.53, .165, .325, .96)
}

.theme__item span {
    overflow: hidden;
    display: block;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(90, 90, 90, .16);
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.theme__item--normal span {
    background-color: #849dfc
}

.theme__item--manga span {
    background-color: #ab68fb
}

.theme__item--sd span {
    background-color: #dd67fb
}

[data-theme=normal] .theme__item:first-child span {
    -webkit-transform: scale(1);
    transform: scale(1)
}

[data-theme=manga] .theme__item:first-child {
    -webkit-transform: translateY(120px) translateX(-50%);
    transform: translateY(120px) translateX(-50%)
}

[data-theme=manga] .theme__item:nth-child(2) {
    -webkit-transform: translateY(-60px) translateX(-50%);
    transform: translateY(-60px) translateX(-50%)
}

[data-theme=manga] .theme__item:nth-child(2) span {
    -webkit-transform: scale(1);
    transform: scale(1)
}

[data-theme=manga] .theme__item:nth-child(3) {
    -webkit-transform: translateY(-60px) translateX(-50%);
    transform: translateY(-60px) translateX(-50%)
}

[data-theme=sd] .theme__item:first-child,
[data-theme=sd] .theme__item:nth-child(2) {
    -webkit-transform: translateY(60px) translateX(-50%);
    transform: translateY(60px) translateX(-50%)
}

[data-theme=sd] .theme__item:nth-child(3) {
    -webkit-transform: translateY(-120px) translateX(-50%);
    transform: translateY(-120px) translateX(-50%)
}

[data-theme=sd] .theme__item:nth-child(3) span {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.is-hover .theme__item:first-child span,
.is-hover .theme__item:nth-child(2) span,
.is-hover .theme__item:nth-child(3) span {
    -webkit-transform: scale(.6)!important;
    transform: scale(.6)!important
}

.is-hover .theme__item:hover span {
    -webkit-transform: scale(1)!important;
    transform: scale(1)!important
}

.toc {
    margin-top: 70px;
    position: relative;
    padding: 10px;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    border-radius: 0 10px 10px 10px
}

@media(max-width:767px) {
    .toc {
        margin-top: 16vw;
        padding: 2.6666666667vw;
        border-radius: 0 2.6666666667vw 2.6666666667vw 2.6666666667vw
    }
}

.toc__title {
    position: absolute;
    top: -34px;
    left: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left;
    width: 113px;
    height: 44px;
    background-color: #ffe0f8;
    border-radius: 20px 20px 0 0
}

@media(max-width:767px) {
    .toc__title {
        top: -6.9333333333vw;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        width: 30.1333333333vw;
        height: 9.6vw;
        border-radius: 5.3333333333vw 5.3333333333vw 0 0
    }
}

.toc__list {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px
}

@media(max-width:767px) {
    .toc__list {
        border-radius: 2.6666666667vw;
        padding: 5.3333333333vw
    }
}

.toc__list a {
    color: #222
}

.toc__list a:hover {
    color: #33b6dd
}

.toc__list>li {
    margin-top: 30px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 30.8px;
    text-align: left
}

@media(max-width:767px) {
    .toc__list>li {
        margin-top: 5.3333333333vw
    }
}

.toc__list>li:first-child {
    margin-top: 0
}

@media(max-width:767px) {
    .toc__list>li {
        font-size: 3.2vw;
        line-height: 8vw
    }
}

.toc__list>li>ul {
    padding-left: 20px
}

@media(max-width:767px) {
    .toc__list>li>ul {
        padding-left: 5.3333333333vw
    }
}

.toc__list>li>ul>li {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 30.8px;
    text-align: left
}

@media(max-width:767px) {
    .toc__list>li>ul>li {
        font-size: 3.2vw;
        line-height: 8vw
    }
}

.trial {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 70px 0;
    position: relative;
    background-size: cover;
    background-position: 50%
}

@media(max-width:767px) {
    .trial {
        display: block;
        padding: 11.4666666667vw 0 9.3333333333vw
    }
}

.trial_bg {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0
}

.trial_bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.trial__en {
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 21px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    color: #ef3e4c
}

@media(max-width:767px) {
    .trial__en {
        font-size: 3.7333333333vw;
        line-height: 1
    }
}

.trial__ja {
    margin-top: 10px;
    font-weight: 700;
    font-size: 34px;
    letter-spacing: .08em;
    line-height: 58px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .trial__ja {
        margin-top: 2.6666666667vw;
        padding: 0 8vw;
        font-size: 6.4vw;
        line-height: 10.6666666667vw
    }
}

.trial__list {
    margin-top: 40px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media(max-width:1023px) {
    .trial__list {
        display: block
    }
}

@media(max-width:767px) {
    .trial__list {
        margin-top: 7.4666666667vw;
        display: block
    }
}

.trial__item {
    padding: 0 20px
}

@media(max-width:1023px) {
    .trial__item {
        padding: 0;
        margin: 20px auto 0
    }
    .trial__item:first-child {
        margin-top: 0
    }
}

@media(max-width:767px) {
    .trial__item {
        padding: 0;
        margin: 5.3333333333vw auto 0;
        text-align: center
    }
}

.trial__text {
    margin: 36px auto 0;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center
}

@media(max-width:1359px) {
    .trial__text {
        width: 46.875vw
    }
}

@media(max-width:767px) {
    .trial__text {
        margin: 9.6vw auto 0;
        width: 66.6666666667vw;
        font-size: 4vw;
        line-height: 7.4666666667vw
    }
}

.trial_bg_purple {
    display: block
}

.trial_bg_purple_sd,
[data-theme=sd] .trial_bg_purple {
    display: none
}

[data-theme=sd] .trial_bg_purple_sd {
    display: block
}

.contact__description-art {
    text-align: center;
    padding: 20px 10px;
    background: #fff3f9;
    margin-top: 10px
}

.contact__description-art .red {
    color: #f3238a;
    font-weight: 700;
    display: block;
    margin-bottom: 5px
}

.contact__description-art .small-text {
    font-size: 12px;
    color: #5d5d5d
}

#tripla-icon-message {
    display: none!important
}

.triplabot-icon-container {
    border: none!important;
    cursor: pointer
}

.visual {
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 0 80px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    overflow: hidden
}

@media(max-width:1024px) {
    .visual {
        display: block;
        padding: 0 0 5.3333333333vw;
        height: auto
    }
}

.visual__wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    max-width: 1280px;
    margin: auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media(max-width:1024px) {
    .visual__wrapper {
        display: block;
        height: auto
    }
}

.visual__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: 100px
}

@media(min-width:1360px) {
    .visual__inner {
        width: 1360px;
        margin: 100px auto 0
    }
}

@media(max-width:1024px) {
    .visual__inner {
        margin-top: 0;
        padding: 58.5333333333vw 0 0;
        width: 100%;
        height: 100%
    }
}

.visual__title {
    font-weight: 700;
    font-size: 42px;
    letter-spacing: .12em;
    line-height: 65px;
    text-align: left;
    color: #222
}

@media(max-width:1024px) {
    .visual__title {
        font-weight: 700;
        font-size: 8vw;
        letter-spacing: .1em;
        line-height: 8vw;
        text-align: center;
        color: #fff
    }
    .visual__title .text__inner {
        margin-top: 2.6666666667vw;
        background-image: linear-gradient(125deg, rgba(247, 144, 224, .75), rgba(76, 136, 237, .75));
        padding-bottom: 1.0666666667vw;
        padding-left: 1.6vw
    }
}

.visual__p {
    margin-top: 22px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: left
}

@media(max-width:1024px) {
    .visual__p {
        display: none
    }
}

.visual__button {
    margin-top: 37px
}

@media(max-width:1024px) {
    .visual__button {
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto
    }
}

.visual__theme {
    position: relative;
    z-index: 3;
    margin-top: 57px
}

@media(max-width:1024px) {
    .visual__theme {
        margin-top: 18.6666666667vw
    }
}

.visual__theme__content {
    width: 400px;
    height: 100px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    cursor: pointer
}

.visual__theme__content,
.visual__theme__content .visual__theme__body {
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96);
    transition: .3s cubic-bezier(.53, .165, .325, .96)
}

.visual__theme__content:hover {
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

.visual__theme__content:hover .visual__theme__body {
    background-color: #f0eefd
}

@media(max-width:1024px) {
    .visual__theme__content {
        width: 89.3333333333vw;
        height: 21.3333333333vw;
        margin: auto;
        border-radius: 5.3333333333vw;
        box-shadow: 0 .8vw 8vw rgba(90, 90, 90, .16)
    }
}

.visual__theme__image {
    position: relative;
    -webkit-box-flex: 1;
    flex: 1 0 200px;
    width: 200px;
    height: 100%;
    border-radius: 20px 0 0 20px;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:1024px) {
    .visual__theme__image {
        -webkit-box-flex: 1;
        flex: 1 0 44.6666666667vw
    }
}

.visual__theme__image__item {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

.visual__theme__image__item:first-child {
    opacity: 1
}

.visual__theme__image__item:nth-child(2),
.visual__theme__image__item:nth-child(3),
[data-theme=manga] .visual__theme__image__item:first-child {
    opacity: 0
}

[data-theme=manga] .visual__theme__image__item:nth-child(2) {
    opacity: 1
}

[data-theme=manga] .visual__theme__image__item:nth-child(3),
[data-theme=sd] .visual__theme__image__item:first-child,
[data-theme=sd] .visual__theme__image__item:nth-child(2) {
    opacity: 0
}

[data-theme=sd] .visual__theme__image__item:nth-child(3) {
    opacity: 1
}

.visual__theme__body {
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: flex;
    padding: 20px 18px;
    border-radius: 0 20px 20px 0;
    background-color: #fff
}

@media(max-width:1024px) {
    .visual__theme__body {
        border-radius: 0 5.3333333333vw 5.3333333333vw 0;
        padding: 5.3333333333vw 5.0666666667vw 5.3333333333vw 2.6666666667vw
    }
}

.visual__theme__text {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left;
    color: #121212
}

@media(max-width:1024px) {
    .visual__theme__text {
        font-weight: 400;
        font-size: 3.2vw;
        letter-spacing: .05em;
        line-height: 5.3333333333vw;
        text-align: left
    }
}

.visual__theme__click {
    position: absolute;
    bottom: 18px;
    right: 21px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 1;
    color: #222;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end
}

@media(max-width:1024px) {
    .visual__theme__click {
        bottom: 4.8vw;
        right: 5.6vw;
        font-weight: 500;
        font-size: 2.6666666667vw;
        letter-spacing: .05em;
        line-height: 1;
        text-align: left
    }
}

.visual__theme__arrow {
    position: relative;
    top: -2px;
    margin-right: 5px
}

@media(max-width:1024px) {
    .visual__theme__arrow {
        top: 0;
        margin-right: .8vw
    }
    .visual__theme__arrow svg {
        display: block;
        width: 1.0666666667vw;
        height: 2.1333333333vw
    }
}

.visual__theme__arrow svg path {
    fill: #6c5ded
}

.visual__copy {
    position: absolute;
    z-index: 0;
    top: 150px;
    left: 0;
    width: 100%
}

.visual__copy .text,
.visual__copy .text__inner {
    width: 100%
}

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

@media(max-width:1024px) {
    .visual__copy {
        top: 3.2vw;
        right: 0;
        left: auto;
        height: 129.4666666667vw;
        width: 21.992vw
    }
}

.visual__art {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto
}

@media(min-width:1360px) {
    .visual__art {
        width: 1360px
    }
}

@media(max-width:1024px) {
    .visual__art {
        width: 100%;
        height: 100%
    }
}

.visual__image {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 70.390625vw
}

@media(min-width:1360px) {
    .visual__image {
        width: 928px
    }
}

@media(max-width:1024px) {
    .visual__image {
        top: 9.0666666667vw;
        left: -15.3333333333vw;
        right: auto;
        width: 130.6666666667vw;
        height: 152vw
    }
}

.visual__bg {
    position: absolute;
    z-index: -1;
    top: 113.54px;
    right: -426px;
    width: 1043.38px;
    height: 899.95px
}

@media(min-width:1360px) {
    .visual__bg {
        width: 1043.38px;
        height: 899.95px
    }
}

@media(max-width:1024px) {
    .visual__bg {
        left: 0;
        top: 0;
        right: 0;
        width: 133.5093333333vw;
        height: 147.9333333333vw
    }
}

@media(max-width:1024px) {
    .visual--index .visual__button {
        margin-top: 18.1333333333vw;
        position: static
    }
}

.visual--index .visual__image {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
    -webkit-transition: opacity .3s linear .4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: opacity .3s linear .4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: opacity .3s linear .4s, transform .3s cubic-bezier(.53, .165, .325, .96) .4s;
    transition: opacity .3s linear .4s, transform .3s cubic-bezier(.53, .165, .325, .96) .4s, -webkit-transform .3s cubic-bezier(.53, .165, .325, .96) .4s
}

.visual--index.is-enter .visual__image {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

@media(max-width:1024px) {
    .visual--school .visual__inner {
        padding-top: 29.8666666667vw;
        height: 172.8vw
    }
}

@media(max-width:1024px) {
    .visual--school .visual__p,
    .visual--school .visual__title {
        text-align: left;
        padding: 0 5.3333333333vw
    }
    .visual--school .visual__p {
        margin-top: 1.3333333333vw;
        display: block;
        min-height: 17.3333333333vw;
        font-weight: 500;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        color: #fff
    }
    .visual--school .visual__p .text__inner {
        margin-top: 2.6666666667vw;
        background-image: linear-gradient(125deg, rgba(247, 144, 224, .75), rgba(76, 136, 237, .75));
        padding-bottom: 1.0666666667vw;
        padding-left: 1.6vw
    }
}

.visual--school .visual__copy {
    top: auto;
    left: 50%;
    bottom: 70px;
    width: 100vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1
}

@media(max-width:1024px) {
    .visual--school .visual__copy {
        width: 21.992vw;
        left: auto;
        top: 5.3333333333vw;
        right: 0;
        bottom: auto;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.visual--school .visual__art {
    top: auto;
    bottom: 0
}

@media(max-width:1024px) {
    .visual--school .visual__art {
        z-index: 2;
        top: 0;
        bottom: auto
    }
}

.visual--school .visual__image {
    position: absolute;
    z-index: 4;
    bottom: 0;
    top: auto
}

.visual--school .visual__image--school_a {
    z-index: 3;
    right: 80px;
    width: 414.75px;
    height: 363.56px
}

@media(max-width:1024px) {
    .visual--school .visual__image--school_a {
        top: auto;
        width: 142.9333333333vw;
        height: 213.8666666667vw;
        right: -29.3333333333vw;
        bottom: -109.3333333333vw
    }
}

@media(max-width:1024px) {
    .visual--school .visual__image--school_a .illust__item {
        left: inherit;
        right: -40vw
    }
}

.visual--school .visual__image--school_a img {
    max-width: inherit;
    height: 100%;
    width: auto
}

@media(max-width:1024px) {
    .visual--school .visual__image--school_a img {
        height: 60%
    }
}

.visual--school .visual__image--school_b {
    right: 22px;
    width: 333.13px;
    height: 377.48px
}

@media(max-width:1024px) {
    .visual--school .visual__image--school_b {
        right: -8vw;
        bottom: 21.3333333333vw;
        width: 40.6666666667vw;
        height: 71.0053333333vw
    }
}

.visual--school .visual__bg {
    width: 363.13px;
    height: 377.48px;
    z-index: 2;
    top: auto;
    bottom: 12px;
    left: auto;
    right: 2px
}

@media(max-width:1024px) {
    .visual--school .visual__bg {
        width: 56.7546666667vw;
        height: 71.2133333333vw;
        bottom: 122px;
        left: auto;
        right: 0
    }
}

.visual--school .visual__bg .draw {
    width: 363.13px;
    height: 377.48px
}

@media(max-width:1024px) {
    .visual--school .visual__bg .draw {
        width: 56.7546666667vw;
        height: 71.2133333333vw
    }
}

.visual--school .visual__thumbnail {
    -webkit-box-flex: 2;
    flex: 2 0 620px;
    position: relative;
    z-index: 2;
    width: 620px;
    height: 413.33px;
    opacity: 0;
    margin-left: 80px
}

@media(max-width:1024px) {
    .visual--school .visual__thumbnail {
        position: absolute;
        top: 47.4666666667vw;
        right: 0;
        width: 94.6666666667vw;
        height: 63.2vw;
        border: none;
        border-radius: 5.3333333333vw 0 0 5.3333333333vw;
        margin-left: 0
    }
}

.visual--school .visual__thumbnail img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px
}

.visual--school .visual__thumbnail:before {
    content: " ";
    position: absolute;
    z-index: -1;
    top: 18px;
    left: -18px;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff);
    opacity: 0;
    -webkit-transform: translate(-18px, 18px);
    transform: translate(-18px, 18px);
    display: none
}

@media(max-width:1024px) {
    .visual--school .visual__thumbnail:before {
        top: 5.3333333333vw;
        left: -5.3333333333vw;
        -webkit-transform: translate(-5.3333333333vw, 5.3333333333vw);
        transform: translate(-5.3333333333vw, 5.3333333333vw);
        display: block;
        border-radius: 0
    }
}

.visual--school .visual__thumb__bg {
    position: absolute;
    z-index: -1;
    top: 36px;
    bottom: 0;
    right: 18px;
    margin: auto;
    width: 620px;
    height: 413.33px;
    border-radius: 20px;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:1024px) {
    .visual--school .visual__thumb__bg {
        display: none
    }
}

.visual--school.is-enter .visual__thumbnail {
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    opacity: 1
}

.visual--school.is-enter .visual__thumbnail:before {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
    -webkit-transition: opacity .3s linear .3s, -webkit-transform .3s linear cubic-bezier(.53, .165, .325, .96) .3s;
    transition: opacity .3s linear .3s, -webkit-transform .3s linear cubic-bezier(.53, .165, .325, .96) .3s;
    transition: opacity .3s linear .3s, transform .3s linear cubic-bezier(.53, .165, .325, .96) .3s;
    transition: opacity .3s linear .3s, transform .3s linear cubic-bezier(.53, .165, .325, .96) .3s, -webkit-transform .3s linear cubic-bezier(.53, .165, .325, .96) .3s
}

@media(max-width:1024px) {
    .visual--school .visual__button {
        z-index: 5;
        bottom: 32vw
    }
}

@media(max-width:1024px) {
    .visual--school .visual__theme {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0
    }
}

.visual--online {
    height: 610px;
    background-image: url(../images/online-lesson/visual.png);
    background-size: cover
}

@media(max-width:1359px) {
    .visual--online {
        height: 800px
    }
}

@media(max-width:1023px) {
    .visual--online {
        height: 880px
    }
}

@media(max-width:1024px) {
    .visual--online {
        height: 152vw
    }
}

@media(max-width:1359px) {
    .visual--online .visual__inner {
        height: 100%;
        padding-top: 160px;
        margin: 0
    }
}

@media(max-width:1024px) {
    .visual--online .visual__inner {
        padding-top: 24vw
    }
}

@media(max-width:1024px) {
    .visual--online .visual__title {
        font-size: 6.4vw;
        letter-spacing: .08em;
        line-height: 6.9333333333vw
    }
}

@media(max-width:1024px) {
    .visual--online .visual__p {
        margin-top: 3.7333333333vw;
        display: block;
        font-weight: 500;
        font-size: 3.7333333333vw;
        letter-spacing: .05em;
        line-height: 3.7333333333vw;
        text-align: center;
        color: #222
    }
}

.visual--online .visual__art {
    height: 100%
}

.visual--online .visual__copy {
    z-index: 0;
    top: 98px
}

@media(max-width:1024px) {
    .visual--online .visual__copy {
        top: -4.8vw
    }
}

.visual--online .visual__back {
    position: absolute;
    bottom: 146px;
    right: 112px;
    width: 584.42px;
    height: 337.25px;
    background: transparent;
    opacity: .5
}

@media(max-width:1024px) {
    .visual--online .visual__back {
        bottom: 42.1333333333vw;
        right: 0;
        left: 0;
        margin: auto;
        width: 87.432vw;
        height: 50.456vw
    }
}

.visual--online .visual__back img {
    width: 100%;
    height: auto;
    display: block
}

.visual--online .visual__image {
    top: auto;
    bottom: 0;
    width: 600px;
    height: 400px
}

@media(max-width:1024px) {
    .visual--online .visual__image {
        left: auto;
        width: 95.4666666667vw;
        height: 63.4666666667vw;
        right: -16vw
    }
}

.visual--online .visual__balloon {
    position: absolute;
    z-index: 2;
    right: 95px;
    bottom: 400px;
    width: 201px
}

@media(max-width:1024px) {
    .visual--online .visual__balloon {
        right: 4vw;
        bottom: 62.1333333333vw;
        width: 41.3333333333vw;
        height: 18.4613333333vw
    }
}

@media(max-width:1359px) {
    .visual--online .visual__button {
        width: 321px;
        position: absolute;
        bottom: 40px;
        left: 0;
        right: auto;
        margin: auto
    }
}

@media(max-width:1024px) {
    .visual--online .visual__button {
        bottom: 0;
        left: 0;
        right: 0;
        width: 160vw
    }
}

@media(max-width:767px) {
    .visual--online .visual__button {
        width: 74.9333333333vw
    }
}

.bg {
    position: absolute;
    z-index: -1;
    top: 0;
    margin-top: 250px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/common/blog_haikei.png);
    background-repeat: repeat-y;
    background-position: center 300px;
    background-size: 1419px
}

@media(max-width:1359px) {
    .bg {
        display: none
    }
}

@media(max-width:767px) {
    .bg {
        margin-top: 66.6666666667vw
    }
}

[data-theme=sd] .bg {
    background-image: url(../images/common/blog_haikei_sd.png)
}

[data-theme=manga] .bg {
    background-image: url(../images/common/blog_haikei_manga.png)
}

.bg__draw,
.bg__image {
    position: absolute
}

.bg__image {
    width: 180px;
    height: 270px;
    opacity: .4;
    bottom: 172px
}

@media(max-width:767px) {
    .bg__image {
        width: 48vw;
        height: 72vw;
        opacity: .4;
        bottom: 45.8666666667vw
    }
}

.bg__section {
    position: relative;
    width: 100%;
    height: 1311.95px
}

@media(max-width:767px) {
    .bg__section {
        height: 349.8533333333vw
    }
}

.bg__section:nth-child(odd) .bg__draw {
    right: 50%;
    -webkit-transform: translateX(820px);
    transform: translateX(820px)
}

.bg__section:nth-child(odd) .bg__image {
    left: 50%;
    -webkit-transform: translateX(-650px);
    transform: translateX(-650px)
}

.bg__section:nth-child(2n) .bg__draw {
    left: 50%;
    -webkit-transform: translateX(-820px);
    transform: translateX(-820px)
}

.bg__section:nth-child(2n) .bg__image {
    right: 50%;
    -webkit-transform: translateX(650px);
    transform: translateX(650px)
}

.bg__section:nth-child(6n+2) .bg__image,
.bg__section:nth-child(6n+5) .bg__image {
    width: 320px;
    height: 480px
}

.bg--single {
    margin-top: 70px
}

@media(max-width:767px) {
    .bg--single {
        margin-top: 18.6666666667vw
    }
}

.bg--single .bg__section:nth-child(odd) .bg__draw {
    -webkit-transform: translateX(820px);
    transform: translateX(820px)
}

.bg--single .bg__section:nth-child(odd) .bg__image {
    -webkit-transform: translateX(-650px);
    transform: translateX(-650px)
}

.bg--single .bg__section:nth-child(2n) .bg__draw {
    -webkit-transform: translateX(-820px);
    transform: translateX(-820px)
}

.bg--single .bg__section:nth-child(2n) .bg__image {
    -webkit-transform: translateX(650px);
    transform: translateX(650px)
}

.footer-menu {
    position: relative;
    z-index: 2;
    width: 880px;
    padding: 0 80px
}

@media(max-width:1359px) {
    .footer-menu {
        width: 68.75vw;
        padding: 0 40px
    }
}

@media(max-width:767px) {
    .footer-menu {
        position: relative;
        width: 100%;
        padding: 0 5.3333333333vw 10.6666666667vw
    }
}

.footer-menu__row {
    margin-top: 30px
}

@media(max-width:767px) {
    .footer-menu__row {
        margin-top: 0;
        width: 53.3333333333vw
    }
}

@media(max-width:767px) {
    .footer-menu__row--pc-bottom,
    .footer-menu__row--pc-mid .footer-menu__link:last-child,
    .footer-menu__row--pc-mid .footer-menu__link:nth-last-child(2),
    .footer-menu__row--pc-mid .footer-menu__link:nth-last-child(3) {
        display: none
    }
}

.footer-menu__row--sp {
    display: none
}

@media(max-width:767px) {
    .footer-menu__row--sp {
        display: block;
        position: absolute;
        top: 0;
        left: 42.1333333333vw
    }
}

.footer-menu__link {
    display: -webkit-inline-box;
    display: inline-flex;
    margin-right: 30px;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left;
    -webkit-transition: color .3s linear;
    transition: color .3s linear
}

@media(max-width:767px) {
    .footer-menu__link {
        display: block;
        font-size: 3.2vw;
        line-height: 6.4vw;
        padding: .8vw
    }
}

.footer-menu__link:hover {
    color: #6c5ded
}

.footer-menu__arrow {
    display: inline-block;
    width: 6px;
    height: 10px;
    margin-right: 5px
}

@media(max-width:767px) {
    .footer-menu__arrow {
        width: 1.0666666667vw;
        height: 2.1333333333vw;
        margin-right: 0
    }
}

.footer-menu__arrow svg {
    width: 100%;
    height: 100%;
    display: block
}

@media(max-width:767px) {
    .footer-submenu {
        display: none
    }
}

.footer-submenu__item {
    display: inline-block
}

.footer-submenu__item:after {
    content: "|";
    display: inline-block;
    margin: 0 5px
}

.footer-submenu__item:after,
.footer-submenu__link {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .05em;
    line-height: 24px;
    text-align: left
}

.footer-submenu__link {
    -webkit-transition: color .3s linear;
    transition: color .3s linear
}

.footer-submenu__link:hover {
    color: #6c5ded
}

.footer {
    position: relative;
    background-color: #fff;
    background-position: 50%;
    overflow: hidden
}

@media(max-width:767px) {
    .footer {
        background-image: none
    }
}

.footer__top {
    padding: 60px 80px 30px
}

@media(max-width:1359px) {
    .footer__top {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media(max-width:767px) {
    .footer__top {
        padding: 10.6666666667vw 5.3333333333vw 5.3333333333vw
    }
}

.footer__copy {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left
}

@media(max-width:767px) {
    .footer__copy {
        display: block;
        font-size: 2.6666666667vw
    }
}

.footer__logo {
    margin-top: 15px;
    width: 146.5px;
    height: 43.36px
}

@media(max-width:767px) {
    .footer__logo {
        margin-top: 0;
        width: 24.496vw;
        height: 7.2506666667vw
    }
}

.footer__contact {
    position: absolute;
    z-index: 2;
    bottom: 120px;
    right: 80px;
    padding: 20px;
    width: 240px;
    height: 240px;
    background: hsla(0, 0%, 100%, .95);
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16);
    border-radius: 10px
}

@media(max-width:1359px) {
    .footer__contact {
        right: 40px
    }
}

@media(max-width:767px) {
    .footer__contact {
        display: none
    }
}

.footer__contact>.button {
    margin-top: 5px
}

.footer__contact>.button+.button {
    margin-top: 22px
}

.footer__contact__copy {
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: center
}

.footer__image {
    position: absolute;
    z-index: 1;
    bottom: 60px;
    right: -40px;
    width: 780px;
    height: 684.43px
}

@media(max-width:1359px) {
    .footer__image {
        display: none;
        width: 60.9375vw;
        height: 53.47109375vw
    }
}

@media(max-width:767px) {
    .footer__image {
        display: block;
        top: auto;
        bottom: 10.6666666667vw;
        right: 5.3333333333vw;
        width: 59.4453333333vw;
        height: 52.2666666667vw
    }
}

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

.footer__bg {
    position: absolute;
    bottom: 22px;
    right: -170px;
    width: 713.03px;
    height: 615px
}

@media(max-width:1359px) {
    .footer__bg {
        display: none;
        width: 55.703125vw;
        height: 48.046875vw
    }
}

@media(max-width:767px) {
    .footer__bg {
        display: block;
        top: auto;
        bottom: 5.3333333333vw;
        right: -5.3333333333vw;
        width: 66.9653333333vw;
        height: 57.7573333333vw
    }
}

.footer__copyright {
    position: relative;
    z-index: 2;
    margin-top: 60px;
    padding: 20px 80px;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .05em;
    line-height: 20px;
    text-align: left;
    color: #fff
}

@media(max-width:1359px) {
    .footer__copyright {
        padding: 20px 40px
    }
}

@media(max-width:767px) {
    .footer__copyright {
        font-size: 2.6666666667vw;
        line-height: 5.3333333333vw;
        margin-top: 0;
        padding: 2.6666666667vw
    }
}

.header-menu {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media(max-width:1169px) {
    .header-menu {
        display: none
    }
}

.header-menu__list {
    display: -webkit-box;
    display: flex;
    margin-right: 25px;
    -webkit-box-align: center;
    align-items: center
}

.header-menu__item {
    padding: 0 15px
}

.header-submenu {
    position: absolute;
    width: 1100px;
    top: 80px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.header-submenu__arrow {
    margin: auto;
    width: 7.73px;
    height: 0
}

.header-submenu__arrow svg {
    display: block;
    margin: auto;
    width: 7.73px;
    height: 5.44px
}

.header-submenu__list {
    background-image: linear-gradient(125deg, rgba(247, 144, 224, .7), rgba(76, 136, 237, .7));
    margin-top: 10px;
    position: absolute;
    left: 50%;
    width: 1100px;
    height: auto;
    padding: 10px;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-radius: 20px;
    box-shadow: 0 3px 30px rgba(90, 90, 90, .16)
}

.header-submenu__list,
.is-open .header-submenu__list {
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.is-open .header-submenu__list {
    opacity: 1;
    pointer-events: auto
}

.header-menu__link:hover {
    color: #6c5ded
}

.header-menu__text {
    position: relative;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 32px;
    text-align: left
}

.header-submenu__item {
    width: 270px;
    -webkit-box-flex: 0;
    flex: 0 1 270px;
    display: block;
    padding: 10px
}

.header-submenu__item:before {
    display: none
}

.header-submenu__link {
    position: relative;
    display: -webkit-box;
    display: flex;
    min-height: 46px;
    padding: 0 22px;
    -webkit-box-align: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(90, 90, 90, .16);
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96);
    transition: .3s cubic-bezier(.53, .165, .325, .96)
}

.header-submenu__link:before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-image: linear-gradient(125deg, #f790e0, #4c88ed);
    border-radius: 10px;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.header-submenu__link svg {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 1 8px;
    width: 8px;
    height: 12px;
    display: block;
    z-index: 2
}

.header-submenu__link svg path {
    fill: #6c5ded;
    -webkit-transition: .3s linear;
    transition: .3s linear
}

.header-submenu__link:hover {
    color: #fff;
    box-shadow: 0 0 0 rgba(90, 90, 90, .16)
}

.header-submenu__link:hover:before {
    opacity: 1
}

.header-submenu__link:hover svg path {
    fill: #fff
}

.header-submenu__text {
    position: relative;
    z-index: 1;
    -webkit-box-flex: 0;
    flex: 0 1 100%;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .05em;
    line-height: 28px;
    text-align: left
}

.header {
    pointer-events: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 112px;
    padding: 0 37.2px 0 43px;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    background-color: #fff;
    -webkit-transition: .3s cubic-bezier(.53, .165, .325, .96);
    transition: .3s cubic-bezier(.53, .165, .325, .96)
}

@media(max-width:767px) {
    .header {
        height: 20.5333333333vw;
        padding: 0 3.7333333333vw 0 5.3333333333vw
    }
}

.index .header,
.single-experience .header,
.single-guide .header,
.single-school .header,
.single-teacher .header {
    background-color: transparent
}

.header__main {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 20px
}

@media(min-width:1440px) {
    .header__main {
        width: 1360px;
        right: 0;
        margin: auto
    }
}

@media(max-width:767px) {
    .header__main {
        height: 100%
    }
}

.header__content {
    pointer-events: auto;
    display: -webkit-box;
    display: flex
}

@media(max-width:1359px) {
    .header__content {
        display: none
    }
}

@media(max-width:767px) {
    .header__content {
        display: none
    }
}

.header-title {
    pointer-events: auto
}

.header-title svg {
    width: 140.65px;
    height: 57.57px
}

@media(max-width:767px) {
    .header-title svg {
        width: 24.496vw;
        height: auto
    }
}

.is-scroll .header {
    background-color: #fff
}

@media(max-width:767px) {
    .is-scroll .header {
        background-color: transparent
    }
}

.is-menu-open .header,
.is-scroll-up .header {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.is-menu-open .header {
    background-color: transparent
}

.is-menu-open .header-title svg circle,
.is-menu-open .header-title svg path {
    fill: #fff
}

.single-lesson .header {
    background-color: #fff
}

@media(max-width:767px) {
    .single-lesson .header {
        background-color: transparent
    }
    .single-lesson .header .header-title svg circle,
    .single-lesson .header .header-title svg path {
        fill: #fff
    }
}

.lower-header {
    width: 100%;
    height: 240px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-image: url(../images/common/img-header.png), linear-gradient(125deg, #ffe0f8, #a9c9ff);
    background-size: cover
}

@media(max-width:767px) {
    .lower-header {
        height: 42.6666666667vw
    }
}

.lower-header__ja {
    font-weight: 700;
    font-size: 32px;
    letter-spacing: .08em;
    line-height: 1;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .lower-header__ja {
        font-size: 6.1333333333vw;
        line-height: 11.2vw
    }
}

.lower-header__ja:first-child {
    margin-top: 0
}

.lower-header__en {
    margin-top: 20px;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: .05em;
    line-height: 1;
    text-align: center;
    color: #6c5ded
}

.lower-header__en:first-child {
    margin-top: 0
}

@media(max-width:767px) {
    .lower-header__en {
        margin-top: 2.6666666667vw;
        font-size: 3.4666666667vw
    }
    .lower-header__en:first-child {
        margin-top: 0
    }
}

.lower-header__en+.lower-header__ja {
    margin-top: 20px
}

@media(max-width:767px) {
    .lower-header__en+.lower-header__ja {
        margin-top: 5.3333333333vw
    }
}

.post-type-archive-teacher .lower-header {
    background-image: url(../images/teacher/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:767px) {
    .post-type-archive-teacher .lower-header {
        background-position-x: -21vw
    }
}

.page-support .lower-header {
    background-image: url(../images/support/bg-header.jpg), linear-gradient(125deg, #deffd3, #92e8e5)
}

.page-support .lower-header__en {
    color: #2cc697
}

.page-plan .lower-header {
    background-image: url(../images/plan/bg-header.jpg), linear-gradient(125deg, #deffd3, #92e8e5)
}

@media(max-width:767px) {
    .page-plan .lower-header {
        background-position: 100%
    }
}

.page-plan .lower-header__en {
    color: #2cc697
}

.page-term .lower-header {
    background-image: url(../images/term/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.page-privacy .lower-header {
    background-image: url(../images/privacy/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.error404 .lower-header {
    background-image: url(../images/404/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.page-contact .lower-header {
    background-image: url(../images/contact/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.page-trial-form .lower-header {
    background-image: url(../images/trial-form/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.post-type-archive-school .lower-header {
    background-image: url(../images/school/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.page-about .lower-header {
    background-image: url(../images/about/bg-header.jpg), linear-gradient(125deg, #ffe0f7, #fcaeb0)
}

.page-about .lower-header__en {
    color: #eb4d9c
}

.post-type-archive-faq .lower-header {
    background-image: url(../images/faq/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:767px) {
    .post-type-archive-faq .lower-header {
        background-position-x: -21vw
    }
}

.post-type-archive-faq .lower-header__en {
    color: #eb4d9c
}

.post-type-archive-lesson .lower-header {
    background-image: url(../images/lesson/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff);
    background-position: 100%
}

.post-type-archive-case .lower-header {
    background-image: url(../images/case/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.post-type-archive-guide .lower-header,
.tax-guide-category .lower-header,
.tax-guide-tag .lower-header {
    background-image: url(../images/guide/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:767px) {
    .post-type-archive-guide .lower-header,
    .tax-guide-category .lower-header,
    .tax-guide-tag .lower-header {
        background-position-x: -21vw
    }
}

.post-type-archive-experience .lower-header {
    background-image: url(../images/experience/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.post-type-archive-experience .lower-header__en {
    color: #eb4d9c
}

.page-trial-flow .lower-header {
    background-image: url(../images/trial-flow/bg-header.jpg), linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

@media(max-width:767px) {
    .page-trial-flow .lower-header {
        background-position-x: -21vw
    }
}

.page-trial-flow .lower-header__en {
    color: #eb4d9c
}

html {
    font-family: Noto Sans JP, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .03em;
    background-color: #f5f5f5;
    background-position: 50%;
    background-image: url(../images/common/bg.png)
}

@media(max-width:767px) {
    html {
        font-size: 16;
        background-image: none;
        background-size: 79.2717086835% 1px
    }
}

[data-svg-sprite] {
    display: none
}

.svg-sprite {
    width: 100%;
    height: 100%
}

body {
    overflow-x: hidden
}

.l-main {
    position: relative;
    overflow: hidden
}

.l-main-layout {
    max-width: 1120px;
    padding-left: 80px;
    padding-right: 80px;
    margin: auto
}

@media(max-width:1023px) {
    .l-main-layout {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media(max-width:767px) {
    .l-main-layout {
        padding-left: 5.3333333333vw;
        padding-right: 5.3333333333vw
    }
}

.l-main-layout--wide {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: auto
}

@media(max-width:1023px) {
    .l-main-layout--wide {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media(max-width:767px) {
    .l-main-layout--wide {
        padding-left: 5.3333333333vw;
        padding-right: 5.3333333333vw
    }
}

.l-main-layout--full {
    width: 100%
}

.l-trial,
.l-trial--top {
    position: relative
}

.l-trial--top {
    margin-top: 140px
}

@media(max-width:767px)and (max-width:767px) {
    .l-trial--top {
        margin-top: 21.3333333333vw
    }
}

.l-trial__image {
    position: absolute;
    z-index: 2
}

.l-trial__image--01 {
    bottom: -84px;
    -webkit-transform: translateX(-35.15625vw);
    transform: translateX(-35.15625vw);
    left: 50%;
    width: 150px;
    height: 225px
}

@media(max-width:1359px) {
    .l-trial__image--01 {
        -webkit-transform: none;
        transform: none;
        left: 0
    }
}

@media(max-width:767px) {
    .l-trial__image--01 {
        -webkit-transform: none;
        transform: none;
        bottom: -14.6666666667vw;
        left: 5.3333333333vw;
        width: 21.3333333333vw;
        height: 32vw
    }
}

.l-trial__image--02 {
    top: -81px;
    -webkit-transform: translateX(28.90625vw);
    transform: translateX(28.90625vw);
    left: 50%;
    width: 142px;
    height: 213px
}

@media(max-width:1359px) {
    .l-trial__image--02 {
        -webkit-transform: none;
        transform: none;
        left: auto;
        right: 0
    }
}

@media(max-width:767px) {
    .l-trial__image--02 {
        -webkit-transform: none;
        transform: none;
        top: -6.6666666667vw;
        left: auto;
        right: 2.9333333333vw;
        width: 21.3333333333vw;
        height: 32vw
    }
}

.l-trial__image--03 {
    bottom: -84px;
    -webkit-transform: translateX(-35.15625vw);
    transform: translateX(-35.15625vw);
    left: 50%;
    width: 150px;
    height: 225px
}

@media(max-width:1359px) {
    .l-trial__image--03 {
        -webkit-transform: none;
        transform: none;
        left: 80px
    }
}

@media(max-width:767px) {
    .l-trial__image--03 {
        -webkit-transform: none;
        transform: none;
        bottom: -12.5333333333vw;
        left: 3.2vw;
        width: 21.3333333333vw;
        height: 32vw
    }
}

.l-trial__image--04 {
    top: -81px;
    -webkit-transform: translateX(28.90625vw);
    transform: translateX(28.90625vw);
    left: 50%;
    width: 142px;
    height: 213px
}

@media(max-width:1359px) {
    .l-trial__image--04 {
        -webkit-transform: none;
        transform: none;
        left: auto;
        right: 80px
    }
}

@media(max-width:767px) {
    .l-trial__image--04 {
        -webkit-transform: none;
        transform: none;
        top: -11.6533333333vw;
        left: auto;
        right: 5.8666666667vw;
        width: 21.3333333333vw;
        height: 32vw
    }
}

.l-canvas {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.l-pickup-case {
    position: relative;
    padding-top: 139px;
    padding-bottom: 125px
}

@media(max-width:767px) {
    .l-pickup-case {
        padding-top: 16vw;
        padding-bottom: 8vw
    }
}

.l-pickup-case__header {
    position: relative;
    z-index: 2;
    padding-left: 6.25vw;
    padding-right: 6.25vw
}

@media(max-width:767px) {
    .l-pickup-case__header {
        padding: 0
    }
}

.l-pickup-case__body {
    margin-top: 20px
}

.l-pickup-case__image {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -129px;
    width: 573px;
    height: 859.5px
}

@media(max-width:767px) {
    .l-pickup-case__image {
        display: block;
        width: 286px;
        height: 429px;
        right: -100px;
        opacity: .6
    }
}

@media(max-width:767px) {
    [data-theme=sd] .l-pickup-case__image {
        right: -130px
    }
}

.l-pickup-case__bg {
    position: absolute;
    z-index: -1;
    top: 90px;
    left: -190px
}

@media(max-width:767px) {
    .l-pickup-case__bg {
        top: 29.6vw;
        left: -29.3333333333vw;
        width: 110.232vw;
        height: 91.704vw
    }
}

.l-pickup-case__link {
    text-align: center;
    width: 319px;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-pickup-case__link {
        margin: 8vw auto 0;
        width: 100%
    }
}

.l-point {
    position: relative;
    padding-top: 150px;
    padding-bottom: 140px
}

@media(max-width:767px) {
    .l-point {
        padding-top: 10.1333333333vw;
        padding-bottom: 16vw
    }
}

.l-point__copy {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 50%;
    -webkit-transform: translateY(-10%) translateX(-50%);
    transform: translateY(-10%) translateX(-50%);
    z-index: -1
}

.l-point__copy img {
    width: 100%;
    height: auto
}

.l-point__bg {
    position: absolute;
    z-index: -1;
    top: 159px;
    right: -225px
}

@media(max-width:767px) {
    .l-point__bg {
        width: 110.1333333333vw;
        height: 93.728vw;
        top: 15.28vw;
        left: 16.712vw;
        right: auto
    }
}

.l-point__image {
    position: absolute;
    z-index: -1
}

.l-point__image--01 {
    top: 72px;
    right: 7.421875vw;
    width: 240px;
    height: 240px
}

@media(max-width:767px) {
    .l-point__image--01 {
        top: 23.2vw;
        right: 7.2vw;
        width: 17.3973333333vw;
        height: 17.3973333333vw
    }
}

.l-point__image--02 {
    top: 124px;
    left: 10.46875vw;
    width: 195px;
    height: 195px
}

@media(max-width:767px) {
    .l-point__image--02 {
        top: 26.4vw;
        left: 5.3333333333vw;
        width: 14.136vw;
        height: 14.136vw
    }
}

.l-point__body {
    margin-top: 50px
}

@media(max-width:767px) {
    .l-point__body {
        margin-top: 40px
    }
}

.l-point__link {
    text-align: center;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-point__link {
        margin: 8vw auto 0
    }
}

.l-pickup-lesson {
    position: relative;
    padding-top: 140px;
    padding-bottom: 140px
}

@media(max-width:767px) {
    .l-pickup-lesson {
        padding-top: 16vw;
        padding-bottom: 16.2666666667vw
    }
}

.l-pickup-lesson__bg {
    position: absolute;
    z-index: -1;
    top: 96px;
    left: -192px
}

@media(max-width:767px) {
    .l-pickup-lesson__bg {
        top: 6.9333333333vw;
        left: -35.2vw
    }
}

.l-pickup-lesson__body {
    margin-top: 60px
}

@media(max-width:767px) {
    .l-pickup-lesson__body {
        margin-top: 8vw
    }
}

.l-pickup-lesson__link {
    text-align: center;
    width: 319px;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-pickup-lesson__link {
        width: 85.0666666667vw;
        margin: 8vw auto 0
    }
}

.l-pickup-guide {
    position: relative;
    padding-bottom: 140px
}

@media(max-width:767px) {
    .l-pickup-guide {
        padding-bottom: 15.7333333333vw
    }
}

.l-pickup-guide__bg {
    position: absolute;
    z-index: -1;
    top: -54px;
    right: -149px
}

@media(max-width:767px) {
    .l-pickup-guide__bg {
        right: auto;
        top: -14.1333333333vw;
        left: 18.1333333333vw;
        width: 110.1333333333vw;
        height: 103.824vw
    }
}

.l-pickup-guide__body {
    margin-top: 50px
}

@media(max-width:767px) {
    .l-pickup-guide__body {
        margin-top: 6.6666666667vw
    }
}

.l-pickup-guide__link {
    text-align: center;
    width: 319px;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-pickup-guide__link {
        width: 68.5333333333vw;
        margin: 8vw auto 0
    }
}

.l-school-list {
    position: relative;
    padding-top: 140px;
    padding-bottom: 78px
}

@media(max-width:767px) {
    .l-school-list {
        padding-top: 10.6666666667vw;
        padding-bottom: 0
    }
}

.l-school-list--top {
    padding-top: 140px;
    padding-bottom: 0
}

@media(max-width:767px) {
    .l-school-list--top {
        padding-top: 16vw
    }
}

.l-school-list__bg {
    position: absolute;
    z-index: -1;
    top: 98px;
    left: -190px
}

@media(max-width:767px) {
    .l-school-list__bg {
        top: 5.6vw;
        left: -27.4666666667vw
    }
}

.l-school-list__body {
    margin-top: 60px
}

@media(max-width:767px) {
    .l-school-list__body {
        margin-top: 23.7333333333vw
    }
}

.l-school-list__link {
    text-align: center;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-school-list__link {
        margin: 8vw auto 0
    }
}

.l-plan-list {
    position: relative;
    padding-top: 140px
}

@media(max-width:767px) {
    .l-plan-list {
        padding-top: 16vw
    }
}

.l-plan-list__bg {
    position: absolute;
    z-index: -1;
    top: 156px;
    right: -394px
}

@media(max-width:767px) {
    .l-plan-list__bg {
        width: 110.1333333333vw;
        height: 93.728vw;
        top: 24vw;
        right: -28.2666666667vw
    }
}

.l-plan-list__body {
    margin-top: 60px
}

@media(max-width:767px) {
    .l-plan-list__body {
        margin-top: 8vw
    }
}

.l-plan-list__link {
    text-align: center;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-plan-list__link {
        margin: 8vw auto 0
    }
}

.l-club {
    margin-top: 133px
}

@media(max-width:767px) {
    .l-club {
        margin-top: 35.4666666667vw
    }
}

.l-faq {
    position: relative;
    padding-top: 140px;
    padding-bottom: 140px
}

@media(max-width:767px) {
    .l-faq {
        padding-top: 16vw;
        padding-bottom: 16vw
    }
}

.l-faq__image {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    width: 517px;
    height: 775.5px
}

@media(max-width:1359px) {
    .l-faq__image {
        right: -80px
    }
    .l-faq__image,
    .l-faq__image .illust__item[data-theme=sd] {
        width: 387.75px;
        height: 581.625px
    }
}

.l-faq__bg {
    position: absolute;
    z-index: -1;
    top: 88px;
    left: -270px
}

@media(max-width:767px) {
    .l-faq__bg {
        top: 9.6vw;
        left: -37.3333333333vw;
        width: 110.1333333333vw;
        height: 91.624vw
    }
}

.l-faq__body {
    position: relative;
    z-index: 1;
    margin-top: 46px
}

@media(max-width:767px) {
    .l-faq__body {
        margin-top: 8vw
    }
}

.l-faq__link {
    text-align: center;
    width: 319px;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-faq__link {
        margin: 8vw auto 0
    }
}

.l-banner {
    width: 960px;
    margin: 140px auto
}

@media(max-width:1359px) {
    .l-banner {
        width: 100%;
        padding: 0 80px
    }
}

@media(max-width:767px) {
    .l-banner {
        margin: 16vw auto;
        padding: 5.3333333333vw;
        width: 100%
    }
}

@media(max-width:1359px) {
    .l-school-list__header .heading__text {
        width: 46.875vw
    }
}

@media(max-width:767px) {
    .l-school-list__header .heading__text {
        width: 100%
    }
}

.l-sort-list {
    margin-top: 60px
}

@media(max-width:767px) {
    .l-sort-list {
        margin-top: 8vw
    }
}

.l-advice {
    background-color: #fc9e1d
}

.l-access,
.l-section {
    position: relative
}

.l-section {
    padding-top: 120px
}

.l-section:last-child {
    padding-bottom: 120px
}

@media(max-width:767px) {
    .l-section:last-child {
        padding-bottom: 16vw
    }
}

@media(max-width:767px) {
    .l-section {
        padding-top: 16vw
    }
}

.l-section--copy {
    padding-top: 8.515625vw
}

.l-section--white {
    background-color: #fff;
    padding-bottom: 140px
}

@media(max-width:767px) {
    .l-section--white {
        padding-bottom: 16vw
    }
}

.l-section--related {
    padding-top: 140px
}

@media(max-width:767px) {
    .l-section--related {
        padding-top: 24vw
    }
}

.l-section--related .l-section__header:after {
    z-index: -1
}

.l-section--related .l-section__header:after,
.l-section--related .l-section__header:before {
    position: absolute;
    top: -33px;
    left: 0;
    right: 0;
    margin: auto;
    content: " ";
    display: block;
    width: 960px;
    height: 193px;
    background-size: cover;
    border-radius: 20px;
    background-color: #fff
}

@media(max-width:1359px) {
    .l-section--related .l-section__header:after,
    .l-section--related .l-section__header:before {
        max-width: 70.5882352941vw
    }
}

@media(max-width:767px) {
    .l-section--related .l-section__header:after,
    .l-section--related .l-section__header:before {
        width: 100vw;
        left: 50%;
        top: -7.2vw;
        -webkit-transform: translate(-50%);
        transform: translate(-50%);
        height: 47.2vw;
        border-radius: 0
    }
}

.l-section--related .l-section__body {
    margin-top: 23px
}

@media(max-width:767px) {
    .l-section--related .l-section__body {
        margin-top: 5.3333333333vw
    }
}

[data-theme-color=purple].l-section--related .l-section__header:before {
    opacity: .5;
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

[data-theme-color=green].l-section--related .l-section__header:before {
    opacity: .5;
    background-image: linear-gradient(125deg, #deffd3, #92e8e5)
}

[data-theme-color=pink].l-section--related .l-section__header:before {
    opacity: .5;
    background-image: linear-gradient(125deg, #ffe0f7, #fcaeb0)
}

[data-theme-color=orange].l-section--related .l-section__header:before {
    opacity: .5;
    background-image: linear-gradient(125deg, #ffa7ae, #f8e36f)
}

[data-theme-color=blue].l-section--related .l-section__header:before {
    opacity: .5;
    background-image: linear-gradient(125deg, #dee0ff, #8fe7f1)
}

[data-theme-color=yellow].l-section--related .l-section__header:before {
    opacity: .5
}

[data-theme-color=line].l-section--related .l-section__header:before {
    opacity: .5;
    background-image: linear-gradient(125deg, rgba(54, 185, 6, .4), rgba(49, 193, 188, .4))
}

.l-section__header {
    position: relative;
    z-index: 2
}

.l-section__image {
    position: absolute;
    z-index: 0;
    top: 0
}

.l-point__image--a1 {
    top: 72px;
    right: 7.421875vw;
    width: 240px;
    height: 240px
}

@media(max-width:767px) {
    .l-point__image--a1 {
        top: 23.2vw;
        right: 7.2vw;
        width: 17.3973333333vw;
        height: 17.3973333333vw
    }
}

.l-point__image--a2 {
    top: 124px;
    left: 10.46875vw;
    width: 195px;
    height: 195px
}

@media(max-width:767px) {
    .l-point__image--a2 {
        top: 26.4vw;
        left: 5.3333333333vw;
        width: 14.136vw;
        height: 14.136vw
    }
}

.l-section__image--f {
    right: -129px;
    width: 573px;
    height: 859.5px
}

@media(max-width:767px) {
    .l-section__image--f {
        display: none
    }
}

.l-section__image--a1 {
    top: -198px;
    right: 3.90625vw;
    width: 180px;
    height: 270px;
    z-index: -1
}

@media(max-width:1359px) {
    .l-section__image--a1 {
        top: -148px;
        right: 0;
        width: 120px;
        height: 180px;
        z-index: -1
    }
}

@media(max-width:767px) {
    .l-section__image--a1 {
        top: -18.4vw;
        right: 0;
        width: 16vw;
        height: 24vw
    }
}

.l-section__image--a2 {
    top: -198px;
    left: 3.90625vw;
    width: 180px;
    height: 270px;
    z-index: -1
}

@media(max-width:1359px) {
    .l-section__image--a2 {
        top: -148px;
        left: 0;
        width: 120px;
        height: 180px;
        z-index: -1
    }
}

@media(max-width:767px) {
    .l-section__image--a2 {
        top: -18.4vw;
        left: 0;
        width: 16vw;
        height: 24vw
    }
}

.l-section__copy {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 50%;
    -webkit-transform: translateY(-10%) translateX(-50%);
    transform: translateY(-10%) translateX(-50%);
    z-index: 0
}

.l-section__copy img {
    width: 100%;
    height: auto
}

.l-section__bg {
    position: absolute;
    z-index: -1;
    top: 70px;
    left: -394px
}

@media(max-width:767px) {
    .l-section__bg {
        top: -13.0666666667vw;
        padding-top: 16vw;
        left: -28.2666666667vw;
        width: 110.232vw;
        height: 91.704vw
    }
}

.index .l-section__bg {
    top: -10px
}

@media(max-width:767px) {
    .index .l-section__bg {
        top: -13.0666666667vw
    }
}

.l-low-section .l-section__bg {
    z-index: 0
}

.l-low-section__image {
    position: absolute;
    z-index: 3;
    width: 160px;
    height: 240px;
    left: 50%;
    top: 200px
}

@media(max-width:1359px) {
    .l-low-section__image {
        top: -54px
    }
}

@media(max-width:767px) {
    .l-low-section__image {
        top: -14.4vw;
        width: 29.6vw;
        height: 44.5333333333vw
    }
}

.l-low-section__image.about04_image {
    left: 53%
}

@media(max-width:767px) {
    .l-low-section__image.about04_image {
        left: 50%
    }
}

.l-low-section__image--left {
    -webkit-transform: translateX(-560px);
    transform: translateX(-560px)
}

@media(max-width:1359px) {
    .l-low-section__image--left {
        -webkit-transform: none;
        transform: none;
        left: 40px
    }
}

@media(max-width:767px) {
    .l-low-section__image--left {
        left: 50%;
        -webkit-transform: translateX(-48.5333333333vw);
        transform: translateX(-48.5333333333vw)
    }
}

.l-low-section__image--right {
    -webkit-transform: translateX(360px);
    transform: translateX(360px)
}

@media(max-width:1359px) {
    .l-low-section__image--right {
        -webkit-transform: none;
        transform: none;
        right: 40px;
        left: auto
    }
}

@media(max-width:767px) {
    .l-low-section__image--right {
        right: auto;
        left: 50%;
        top: -10.6666666667vw;
        -webkit-transform: translateX(23.7333333333vw);
        transform: translateX(23.7333333333vw)
    }
}

.l-section__bg--left {
    left: -394px
}

@media(max-width:767px) {
    .l-section__bg--left {
        top: 16vw;
        left: -36.2666666667vw
    }
}

.l-section__bg--right {
    left: auto;
    right: -148px
}

@media(max-width:767px) {
    .l-section__bg--right {
        left: auto;
        top: 16vw;
        right: -36.2666666667vw
    }
}

.l-section__about {
    position: relative;
    z-index: 4
}

.l-section__body {
    position: relative;
    z-index: 2;
    margin-top: 60px
}

@media(max-width:767px) {
    .l-section__body {
        margin-top: 10.6666666667vw
    }
}

.l-section__link {
    text-align: center;
    margin: 60px auto 0
}

@media(max-width:767px) {
    .l-section__link {
        margin: 8vw auto 0;
        width: 100%
    }
}

.l-teacher-comment {
    background-image: linear-gradient(125deg, #ffe0f8, #a9c9ff)
}

.l-lower-header {
    padding-top: 112px
}

@media(max-width:767px) {
    .l-lower-header {
        background-color: #fff;
        padding-top: 29.8666666667vw
    }
}

.l-guide {
    position: relative;
    padding-top: 180px
}

@media(max-width:767px) {
    .l-guide {
        padding-top: 29.8666666667vw
    }
}

.l-page {
    position: relative;
    padding-top: 180px;
    margin-bottom: 30px
}

@media(max-width:767px) {
    .l-page {
        padding-top: 29.8666666667vw
    }
}

.l-guide__bg,
.l-page__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 700px;
    height: 582.35px
}

.l-guide__bg:first-child,
.l-page__bg:first-child {
    top: 80px
}

.l-guide__bg:nth-child(2),
.l-page__bg:nth-child(2) {
    top: 1660px
}

.l-guide__bg:nth-child(3),
.l-page__bg:nth-child(3) {
    top: 3240px
}

.l-guide__bg:nth-child(4),
.l-page__bg:nth-child(4) {
    top: 4820px
}

.l-guide__bg:nth-child(5),
.l-page__bg:nth-child(5) {
    top: 6400px
}

.l-guide__bg:nth-child(6),
.l-page__bg:nth-child(6) {
    top: 7980px
}

.l-guide__bg:nth-child(7),
.l-page__bg:nth-child(7) {
    top: 9560px
}

.l-guide__bg:nth-child(8),
.l-page__bg:nth-child(8) {
    top: 11140px
}

.l-guide__bg:nth-child(9),
.l-page__bg:nth-child(9) {
    top: 12720px
}

.l-guide__bg:nth-child(10),
.l-page__bg:nth-child(10) {
    top: 14300px
}

.l-guide__bg:nth-child(11),
.l-page__bg:nth-child(11) {
    top: 15880px
}

.l-guide__bg:nth-child(12),
.l-page__bg:nth-child(12) {
    top: 17460px
}

.l-guide__bg:nth-child(13),
.l-page__bg:nth-child(13) {
    top: 19040px
}

.l-guide__bg:nth-child(14),
.l-page__bg:nth-child(14) {
    top: 20620px
}

.l-guide__bg:nth-child(15),
.l-page__bg:nth-child(15) {
    top: 22200px
}

.l-guide__bg:nth-child(16),
.l-page__bg:nth-child(16) {
    top: 23780px
}

.l-guide__bg:nth-child(17),
.l-page__bg:nth-child(17) {
    top: 25360px
}

.l-guide__bg:nth-child(18),
.l-page__bg:nth-child(18) {
    top: 26940px
}

.l-guide__bg:nth-child(19),
.l-page__bg:nth-child(19) {
    top: 28520px
}

.l-guide__bg:nth-child(odd),
.l-page__bg:nth-child(odd) {
    -webkit-transform: translateX(500px);
    transform: translateX(500px)
}

.l-guide__bg:nth-child(2n),
.l-page__bg:nth-child(2n) {
    -webkit-transform: translateX(-500px);
    transform: translateX(-500px)
}

.l-archive__text {
    padding-top: 60px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .05em;
    line-height: 30px;
    text-align: center;
    color: #222
}

@media(max-width:767px) {
    .l-archive__text {
        padding-top: 8vw;
        font-size: 4vw;
        letter-spacing: .05em;
        line-height: 7.4666666667vw;
        -moz-text-align-last: left;
        text-align-last: left
    }
}

.l-archive__body {
    padding-top: 50px;
    padding-bottom: 130px
}

@media(max-width:767px) {
    .l-archive__body {
        padding-top: 8vw;
        padding-bottom: 16vw
    }
}

.l-low-section {
    position: relative;
    background: #f5f5f5;
    padding-bottom: 140px
}

@media(max-width:767px) {
    .l-low-section {
        padding-bottom: 16vw
    }
}

.l-low-section:before {
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    display: block;
    width: 100%;
    height: 535px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(29.56%, #fff), to(hsla(0, 0%, 100%, 0)));
    background: linear-gradient(#fff, #fff 29.56%, hsla(0, 0%, 100%, 0))
}

.l-low-section__header {
    position: relative;
    z-index: 2;
    padding: 80px 0 60px
}

@media(max-width:767px) {
    .l-low-section__header {
        padding: 11.7333333333vw 5.3333333333vw 9.8666666667vw
    }
}

.l-low-section__body {
    position: relative;
    z-index: 2
}

.l-contact {
    padding-top: 76px;
    padding-bottom: 140px;
    position: relative
}

@media(max-width:767px) {
    .l-contact {
        padding: 10.6666666667vw 5.3333333333vw 16vw
    }
}

.l-contact--complete,
.l-contact--confirm {
    padding-top: 175px
}

@media(max-width:767px) {
    .l-contact--complete,
    .l-contact--confirm {
        padding: 31.4666666667vw 5.3333333333vw 16vw
    }
}

.l-contact__body {
    position: relative
}

.l-category-list {
    margin-top: 60px;
    margin-bottom: 75px
}

@media(max-width:767px) {
    .l-category-list {
        margin-top: 8vw;
        margin-bottom: 20vw
    }
}

.l-category-list--top {
    margin-top: 80px;
    margin-bottom: 60px
}

@media(max-width:767px) {
    .l-category-list--top {
        margin-top: 16vw;
        margin-bottom: 10.6666666667vw
    }
}

.l-category-list--top-guide {
    margin-top: 80px;
    margin-bottom: 0
}

@media(max-width:767px) {
    .l-category-list--top-guide {
        margin-top: 16vw;
        margin-bottom: 0
    }
}

.l-category-list--mid {
    margin-top: 80px
}

@media(max-width:767px) {
    .l-category-list--mid {
        margin-top: 10.6666666667vw
    }
}

.l-category-list--bottom {
    margin-bottom: 90px
}

@media(max-width:767px) {
    .l-category-list--bottom {
        margin-bottom: 21.3333333333vw
    }
}

.l-faq-anchor {
    position: relative;
    padding: 37px 0 36px;
    background-color: #fff
}

@media(max-width:767px) {
    .l-faq-anchor {
        padding: 4vw 18.6666666667vw 4vw 5.3333333333vw
    }
    .l-faq-anchor:before {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        content: " ";
        display: block;
        width: 18.9333333333vw;
        height: 100%;
        background: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, 0)), color-stop(50%, #fff));
        background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 50%)
    }
}

.l-faq-section {
    position: relative;
    margin-top: 80px
}

.l-faq-section:before {
    content: " ";
    display: block;
    margin-top: -30px;
    padding-top: 30px
}

@media(max-width:767px) {
    .l-faq-section:before {
        margin-top: -8vw;
        padding-top: 8vw
    }
}

@media(max-width:767px) {
    .l-faq-section {
        margin-top: 8vw
    }
    .l-faq-section:last-of-type {
        margin-bottom: 21.3333333333vw
    }
}

.l-space {
    margin-bottom: 140px
}

@media(max-width:767px) {
    .l-space {
        margin-bottom: 16vw
    }
}

.l-faq-section__inner {
    position: relative;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 3px 30px hsla(0, 0%, 47.5%, .3)
}

.l-faq-section__bg {
    position: absolute;
    z-index: -1;
    top: 40px;
    left: -394px
}

@media(max-width:767px) {
    .l-faq-section__bg {
        padding-top: 0;
        left: -28.2666666667vw
    }
}

.l-faq-section__bg--left {
    left: -394px
}

@media(max-width:767px) {
    .l-faq-section__bg--left {
        left: -28.2666666667vw
    }
}

.l-faq-section__bg--right {
    left: auto;
    right: -394px
}

@media(max-width:767px) {
    .l-faq-section__bg--right {
        left: auto;
        right: -28.2666666667vw
    }
}

.l-faq-section__image {
    position: absolute;
    top: 80px;
    left: 50%;
    opacity: .4
}

@media(max-width:767px) {
    .l-faq-section__image {
        display: none
    }
}

.l-faq-section__image .illust {
    -webkit-transform: translate(-700px);
    transform: translate(-700px)
}

.l-faq-section__image--right .illust {
    -webkit-transform: translate(500px);
    transform: translate(500px)
}

.l-faq-section__image--f {
    width: 384.08px;
    height: 564.12px
}

.l-faq-section__image--b {
    width: 200px;
    height: 300px
}

.l-faq-section__image--j {
    width: 240px;
    height: 360px
}

.l-faq-section__image--c {
    width: 180px;
    height: 270px
}

.l-faq-section__image--d {
    width: 240px;
    height: 360px
}

.l-faq-section__image--e {
    width: 354.19px;
    height: 531.29px
}

.l-faq-section__image--e .illust {
    -webkit-transform: translate(-800px);
    transform: translate(-800px)
}

.l-recommend {
    padding: 60px 0
}

@media(max-width:767px) {
    .l-recommend {
        padding: 8vw 0 14.6666666667vw
    }
}

.l-recommend__body {
    margin-top: 32px
}

@media(max-width:767px) {
    .l-recommend__body {
        margin-top: 5.3333333333vw
    }
}

.l-pagenation {
    margin-top: 70px
}

.l-documents {
    position: relative;
    margin-top: 60px;
    margin-bottom: 140px
}

@media(max-width:767px) {
    .l-documents {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0
    }
}

.l-notfound {
    padding-bottom: 100px
}

@media(max-width:767px) {
    .l-notfound {
        padding-bottom: 16vw
    }
}

.l-online {
    position: relative;
    z-index: 2;
    background-color: #fff
}

.l-online__header {
    position: relative;
    padding-top: 100px;
    max-width: 1120px;
    padding-left: 80px;
    padding-right: 80px;
    margin: auto
}

@media(max-width:1023px) {
    .l-online__header {
        padding-left: 40px;
        padding-right: 40px
    }
}

@media(max-width:767px) {
    .l-online__header {
        padding-left: 5.3333333333vw;
        padding-right: 5.3333333333vw;
        padding-top: 16vw
    }
}

.l-online__body {
    padding-top: 70px;
    padding-bottom: 118px
}

@media(max-width:767px) {
    .l-online__body {
        padding-top: 15.7333333333vw;
        padding-bottom: 16vw
    }
}

[data-theme-color=pink] .l-online__body {
    padding-top: 50px
}

@media(max-width:767px) {
    [data-theme-color=pink] .l-online__body {
        padding-top: 4.8vw
    }
}

[data-theme-color=orange] .l-online__body {
    padding-bottom: 0
}

@media(max-width:767px) {
    [data-theme-color=orange] .l-online__body {
        padding-top: 5.3333333333vw
    }
}

@media(max-width:767px) {
    [data-theme-color=blue] .l-online__body {
        padding-top: 16vw
    }
}

@media(max-width:767px) {
    [data-theme-color=green] .l-online__body {
        padding-bottom: 26.6666666667vw
    }
}

.l-lesson-faq {
    padding-top: 80px
}

@media(max-width:767px) {
    .l-lesson-faq {
        padding-top: 10.6666666667vw
    }
}

.l-full-image {
    margin-top: 140px
}

@media(max-width:767px) {
    .l-full-image {
        margin-top: 16vw
    }
}

@media(max-width:767px) {
    .l-section--lesson-list .l-section__body {
        margin-top: 3.4666666667vw
    }
}

@media(max-width:767px) {
    .l-school-list--archive {
        margin-bottom: 13.3333333333vw
    }
}

@media(max-width:767px) {
    .is-only-pc-show {
        display: none
    }
}

@media(min-width:768px) {
    .is-only-sp-show {
        display: none
    }
}

@media(min-width:1024px) {
    .is-only-tab-show {
        display: none
    }
}

.is-hide {
    display: none
}