/* style.css
 * **************************************************
 * Body
 * Header
 * Global linkgation
 * Common Elements
 * Content
 * Footer
 * Media Queries
 * **************************************************
 */

/* Body
-------------------------------------------------- */

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Font：基本サイズ（16 * 0.625 = 10px） */
html {
    font-size: 62.5%;
}

body {
    color: #000000;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
    font-feature-settings: 'palt';
    font-size: 17px;
    overflow-x: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    body {
        font-size: 1.32vw;
    }
}

.inner {
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* Common Elements
-------------------------------------------------- */

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

/* link */
a {
    color: inherit;
    text-decoration: none;
    transition: .3s;
}

a:hover {
    color: inherit;
    opacity: 0.8;
    text-decoration: none;
}

/* hadeline */
h2,
h3,
h4 {
    margin: 0 auto;
}

/* paragraph */
br.sp {
    display: none;
}

/* list */
ul {
    list-style: none;
}

/* button */
.button {
    background-color: #001e50;
    color: #ffff00;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.22em;
    margin: 6.25% auto 0;
    text-align: center;
    width: 35.15%;
}

.button a {
    display: block;
    font-size: 25px;
    padding: 1em 0;
    width: 100%;
}

.buttonWrap {
    padding: 0.83em 0.58em 0.58em;
    width: 29.68%;
}

.buttonWrap p {
    letter-spacing: 0.25em;
    line-height: 1;
    margin: 0 0 0.62em;
}

.buttonWrap a {
    background-color: #ffffff;
    border-radius: 6px;
    color: #001e50;
    font-size: 23px;
    padding: 0.43em 0;
}

.button.back {
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
}

.button.back a {
    padding: 0.92em 0;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    .button {
        font-size: 1.87vw;
    }

    .button a {
        font-size: 1.95vw;
    }

    .buttonWrap a {
        font-size: 1.79vw;
    }
}

/* Content
-------------------------------------------------- */

main {
    background-color: #ffffff;
    display: block;
}

/* content */
#content {
    background-color: #ffffff;
    margin: 0 auto;
    padding: 0;
    width: 1280px;
}

@media only screen and (max-width: 1280px) {
    #content {
        width: 100%;
    }
}

/* fixedButton */
#fixedButton {
    background-color: #023d88;
    box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.1);
    padding: 1.87% 0;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    transition: .5s;
    width: 1280px;
    z-index: 99;
}

#fixedButton.show {
    transform: translate(-50%, 0);
}

#fixedButton ul {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 82.03%;
}

#fixedButton ul li {
    margin: 0 0.95%;
    width: 31.42%;
}

#fixedButton ul li a {
    background-position: 7.27% center, 100%;
    background-repeat: no-repeat;
    background-size: 3.33%, auto;
    border-radius: 6px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
    display: block;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding: 0.63em 0 0.53em;
    text-align: center;
    width: 100%;
}

#fixedButton ul li.btnSearch a {
    background-image: url(../images/arrow_left.svg), linear-gradient(360deg, rgba(202, 202, 202, 1) 0%, rgba(255, 255, 255, 1) 99.93%);
}

#fixedButton ul li.btnTrial a {
    background-image: url(../images/arrow_left.svg), linear-gradient(360deg, rgba(255, 206, 65, 1) 0%, rgba(255, 214, 71, 1) 27.2%, rgba(255, 235, 87, 1) 68.47%, rgba(255, 255, 103, 1) 99.7%);
}

#fixedButton ul li.btnEntry a {
    background-image: url(../images/arrow_left.svg), linear-gradient(180deg, rgba(255, 198, 115, 1) 0%, rgba(255, 194, 107, 1) 15%, rgba(255, 185, 86, 1) 37.82%, rgba(255, 168, 52, 1) 65.63%, rgba(255, 146, 4, 1) 97.11%, rgba(255, 144, 0, 1) 99.74%);
}

#fixedButton p.notes {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 0.06em;
    margin: 0.78% 0 0 0;
    text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #fixedButton {
        width: 100vw;
    }

    #fixedButton ul li a {
        font-size: 2.03vw;
    }

    #fixedButton p.notes {
        font-size: 1.25vw;
    }
}

/* fixedButtonCp */
#fiexdButtonCp {
    filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.2));
    opacity: 0;
    position: fixed;
    bottom: 160px;
    left: calc(50% + 480px);
    transition: .5s;
    width: 122px;
    z-index: 99;
}

#fiexdButtonCp.show {
    opacity: 1;
}

#fiexdButtonCp a {
    display: block;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #fiexdButtonCp {
        bottom: 12.5vw;
        left: 87.5%;
        width: 9.53%;
    }
}

/* mv */
#mv {
    position: relative;
}

#mv .logo {
    position: absolute;
    top: 3.89%;
    left: 2.65%;
    width: 15.93%;
    z-index: 1;
}

#mv p {
    position: absolute;
    top: 63.63%;
    left: 77.34%;
    width: 20.46%;
}

/* attraction */
#content #attraction {
    padding: 8.98% 0 6.64%;
}

#content #attraction h2 {
    width: 65.31%;
}

#content #attraction .swiper {
    margin: 5.46% 0 0;
    overflow: hidden;
}

#content #attraction .swiper+.swiper {
    margin-top: 3.51%;
}

#content #attraction .swiper-wrapper {
    transition-timing-function: linear !important;
}

#content #attraction .unlimited {
    margin: 8.2% auto 0;
    width: 53.12%;
}

/* intro */
#content #intro {
    background-color: #daec69;
    padding: 8.98% 0 6.25%;
}

#content #intro h2 {
    width: 46.25%;
}

#content #intro p {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.3em;
    line-height: 2.5;
    margin: 5.07% 0 0 0;
    text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content #intro p {
        font-size: 1.56vw;
    }
}

/* campaign */
#campaign {
    background-color: #dff8ff;
    padding: 9.76% 0 4.84%;
}

#campaign h2 {
    background: url(../images/arrow_down.svg) no-repeat center bottom;
    background-size: 2.65%;
    font-size: 45px;
    letter-spacing: 0.1em;
    padding: 0 0 0.88em;
    text-align: center;
}

#campaign .benefits {
    margin: 0.62% auto 0;
    width: 58.59%;
}

#campaign .benefits ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#campaign .benefits ul li {
    margin: 0 1.33%;
    width: 30.66%;
}

#campaign .benefits ul li:first-child {
    width: 78.13%;
}

#campaign p.notes {
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 2.1;
    margin: 3.12% 0 0 0;
    text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #campaign h2 {
        font-size: 3.51vw;
    }

    #campaign p.notes {
        font-size: 1.09vw;
    }
}

/* section */
#content .section .header {
    padding: 3.12% 0 2.5%;
    text-align: center;
}

#content .section .header h2 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.2em;
}

#content .section .header h2 span {
    display: block;
    font-size: 1.5em;
    margin: 1.4% 0 0 0;
}

#content .section .header p {
    border: 1px dashed #ffff00;
    border-radius: 10px;
    color: #ffff00;
    display: table;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.8;
    margin: 2.03% auto 0;
    padding: 0.5em 2.5em;
    min-width: 41.4%;
}

#content .section .content {
    padding: 7.81% 12.5%;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content .section .header h2 {
        font-size: 2.18vw;
    }

    #content .section .header p {
        font-size: 1.87vw;
    }
}

/* admission */
#content #admission .header {
    background-color: #023d88;
}

#content #admission .flow h3 {
    background: url(../images/bg_flow_ttl_01.svg) no-repeat center;
    background-size: 100%;
    font-size: 28px;
    letter-spacing: 0.2em;
    line-height: 1.5;
    text-align: center;
}

#content #admission .flow ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
    margin: 7.6% 0 0 0;
}

#content #admission .flow ol li {
    position: relative;
    width: 15.2%;
}

#content #admission .flow ol li::after {
    background: url(../images/arrow_left.svg) no-repeat;
    background-size: 100%;
    content: '';
    height: 21.91%;
    margin-top: 20.5%;
    position: absolute;
    top: 50%;
    right: -20.5%;
    width: 6.84%;
}

#content #admission .flow ol li:last-child::after {
    content: none;
}

#content #admission .flow ol li dl {
    align-items: center;
    border: 1px solid #333333;
    border-radius: 20px;
    display: flex;
    flex-flow: column;
}

#content #admission .flow ol li dl dt {
    background-color: #023d88;
    border-radius: 19px 19px 0 0;
    color: #ffffff;
    font-family: Arial;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding: 15.27% 0 13.88%;
    text-align: center;
    width: 100%;
}

#content #admission .flow ol li dl dt span {
    display: block;
    font-size: 2.3em;
    margin-top: 0.1em;
}

#content #admission .flow ol li dl dd {
    font-feature-settings: initial;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.2em;
    min-height: 17.65em;
    padding: 5.5% 0;
    text-align: center;
    vertical-align: middle;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

#content #admission .things {
    background: linear-gradient(180deg, rgba(0, 208, 221, 1) 0%, rgba(44, 166, 224, 1) 97.04%);
}

#content #admission .things h3 {
    font-size: 42px;
    letter-spacing: 0.2em;
    text-align: center;
}

#content #admission .things p.notes {
    font-size: 24px;
    letter-spacing: 0.2em;
    margin: 3.64% 0 0 0;
    text-align: center;
}

#content #admission .things ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 7.29% 0 0 0;
}

#content #admission .things ul li {
    aspect-ratio: 23 / 20;
    align-items: center;
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0 35px;
    position: relative;
    text-align: center;
    width: 47.91%;
}

#content #admission .things ul li:nth-child(n + 3) {
    margin-top: 4.68%;
}

#content #admission .things ul li:nth-child(1),
#content #admission .things ul li:nth-child(2) {
    align-items: flex-start;
    padding-bottom: 9.16%;
}

#content #admission .things ul li img {
    width: 50%;
}

#content #admission .things ul li div {
    width: 100%;
}

#content #admission .things ul li h4 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.7;
    margin: 0.63em 0 0.27em;
}

#content #admission .things ul li:nth-child(1) h4,
#content #admission .things ul li:nth-child(2) h4 {
    font-size: 32px;
    margin: 0.43em 0 0.18em;
}

#content #admission .things ul li p {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.75;
}

#content #admission .things ul li a {
    background: linear-gradient(90deg, rgba(0, 208, 221, 1) 0%, rgba(44, 166, 224, 1) 97.04%);
    border-radius: 0.57em;
    color: #ffffff;
    display: block;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.15em;
    position: absolute;
    bottom: 8.02%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.47em 0;
    text-align: center;
    width: 74.23%;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content #admission .flow h3,
    #content #admission .flow ol li dl dd {
        font-size: 2.18vw;
    }

    #content #admission .flow ol li dl dt,
    #content #admission .things ul li p {
        font-size: 1.25vw;
    }

    #content #admission .things h3 {
        font-size: 3.28vw;
    }

    #content #admission .things p.notes {
        font-size: 1.87vw;
    }

    #content #admission .things ul li h4 {
        font-size: 1.71vw;
    }

    #content #admission .things ul li:nth-child(1) h4,
    #content #admission .things ul li:nth-child(2) h4 {
        font-size: 2.5vw;
    }

    #content #admission .things ul li a {
        font-size: 1.64vw;
    }
}

/* fee */
.fee {
    background-color: #b5e3f8;
    border-radius: 28px;
    padding: 10.9% 6.36%;
    text-align: center;
}

.fee h2 {
    font-size: 48px;
    letter-spacing: 0.1em;
}

.fee p.notes {
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 2.4;
    margin: 2.5em 0 0 0;
}

.fee h2+p.notes {
    background: url(../images/arrow_down.svg) no-repeat center bottom;
    background-size: 3.75em;
    padding: 0 0 3.12em;
}

.fee ul li {
    background-color: #ffffff;
    border-radius: 20px;
    margin: 4.16% 0 0 0;
    padding: 7.81% 9.89% 5.72%;
    position: relative;
}

.fee ul.admission li+li {
    margin-top: 25px;
}

.fee ul.admission li+li::after {
    background: url(../images/icon_plus.svg) no-repeat center;
    background-size: 100%;
    content: '';
    display: block;
    height: 48px;
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
}

.fee ul.type li+li {
    margin-top: 3.64%;
}

.fee ul li dl {
    align-items: center;
    display: flex;
    justify-content: center;
}

.fee ul li dl dt {
    font-weight: 700;
    letter-spacing: 0.1em;
}

.fee ul li dl dd {
    color: #d71718;
    font-weight: 700;
    margin: 0 0 0 0.5em;
}

.fee ul li dl dd span {
    font-size: 0.75em;
}

.fee ul li dl dd span.notes,
.fee ul li dl dd span.period {
    color: #000000;
    text-align: left;
}

.fee ul li dl dd span.notes {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin: 0.7em 0 0 0;
}

.fee ul li dl dd span.period {
    font-size: 0.4em;
    margin-right: 0.5em;
    vertical-align: 0.5em;
}

.fee ul.admission li p:not(.notes) {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.fee ul.admission li dl dt {
    font-size: 39px;
}

.fee ul.admission li dl dd {
    font-size: 80px;
}

.fee ul.type li dl dt {
    background-color: #023d88;
    border-radius: 10px;
    color: #ffffff;
    font-size: 29px;
    padding: 0.34em 0;
    width: 12.06em;
}

.fee ul.type li dl dd {
    font-size: 52px;
}

.fee ul.type li p {
    border: 1px dashed #023d88;
    border-radius: 20px;
    font-size: 26px;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 5.84% 0 0 0;
    padding: 4.41% 0;
}

.fee .btnClose {
    cursor: pointer;
    position: absolute;
    top: 38px;
    right: 32px;
    width: 4.09%;
}

.white-popup {
    margin: 20px auto;
    position: relative;
    max-width: 1100px;
    width: 90%;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    .fee h2 {
        font-size: 3.75vw;
    }

    .fee p.notes,
    .fee ul li dl dd span.notes {
        font-size: 1.25vw;
    }

    .fee ul.admission li p:not(.notes) {
        font-size: 4.37vw;
    }

    .fee ul.admission li dl dt {
        font-size: 3.04vw;
    }

    .fee ul.admission li dl dd {
        font-size: 6.25vw;
    }

    .fee ul.type li dl dt {
        font-size: 2.26vw;
    }

    .fee ul.type li dl dd {
        font-size: 4.06vw;
    }

    .fee ul.type li p {
        font-size: 2.03vw;
    }
}

/* support */
#content #support {
    background-color: #fafafa;
    padding: 9.37% 0;
    text-align: center;
}

#content #support h2 {
    width: 40.15%;
}

#content #support h2+p {
    font-size: 20px;
    letter-spacing: 0.35em;
    line-height: 2.5;
    margin: 2.73% 0 0 0;
}

#content #support .flow {
    margin: 5.85% 0 0;
}

#content #support .flow h3 {
    width: 26.87%;
}

#content #support .step {
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 20px;
    display: flex;
    margin: 60px auto 0;
    position: relative;
    width: 78.12%;
}

#content #support .step+.step::before {
    background: url(../images/arrow_down.svg) no-repeat;
    background-size: 100%;
    content: '';
    display: block;
    height: 12px;
    margin-left: -17px;
    position: absolute;
    top: -42px;
    left: 50%;
    width: 34px;
}

#content #support .step .stepTtl {
    align-items: center;
    background-color: #004097;
    border-radius: 18px 0 0 18px;
    color: #ffffff;
    display: flex;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.3;
    justify-content: center;
    text-align: center;
    width: 11%;
}

#content #support .step .stepContent {
    align-items: center;
    display: flex;
    font-size: 18px;
    letter-spacing: 0.1em;
    line-height: 1.8;
    justify-content: space-between;
    padding: 3.8% 3.6%;
    text-align: left;
    width: 88.6%;
}

#content #support .step .stepContent .text {
    width: 50.36%;
}

#content #support .step .stepContent .text h4 {
    margin: 0 0 2.92% 0;
    width: 95.6%;
}

#content #support .step .stepContent .text h5 {
    margin: 5.6% 0 0 0;
}

#content #support .step .stepContent .image {
    border-radius: 20px;
    overflow: hidden;
    width: 42.99%;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content #support h2+p {
        font-size: 1.56vw;
    }

    #content #support .step .stepTtl {
        font-size: 1.87vw;
    }

    #content #support .step .stepContent {
        font-size: 1.4vw;
    }
}

/* enjoy */
#content .enjoy {
    padding: 9.37% 0;
}

#content .enjoy h2 {
    margin-bottom: 7.81%;
    width: 63.58%;
}

#content .enjoy .headImg {
    margin-bottom: 9.37%;
}

/* newProg */
#content #newProg {
    padding: 0;
}

#content #newProg .block {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 9.37% 0;
}

#content #newProg .block#newProg01 {
    background-image: url(../images/bg_program_new_01.jpg);
    padding-top: 0;
}

#content #newProg .block#newProg02 {
    background-image: url(../images/bg_program_new_02.jpg);
}

#content #newProg .block .image {
    margin: 0 auto;
    position: relative;
    width: 70.31%;
    z-index: 1;
}

#content #newProg .block .image::before,
#content #newProg .block .image::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
}

#content #newProg .block .image::before {
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 100%;
    top: -12.22%;
    right: -12.77%;
}

#content #newProg .block .image::after {
    height: 100%;
    top: 3.7%;
    right: -2.22%;
    width: 100%;
}

#content #newProg .block#newProg01 .image::before {
    background-image: url(../images/txt_program_new_01_01.png);
    height: 110.74%;
    width: 15.11%;
}

#content #newProg .block#newProg01 .image::after {
    background-color: #daec69;
}

#content #newProg .block#newProg02 .image::before {
    background-image: url(../images/txt_program_new_02_01.png);
    height: 82.22%;
    width: 15.11%;
}

#content #newProg .block#newProg02 .image::after {
    background-color: #7bccf3;
}

#content #newProg .block .columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 8.59% auto 0;
    width: 65.62%;
}

#content #newProg .block .column:first-child {
    width: 36.9%;
}

#content #newProg .block .column:last-child {
    width: 54.76%;
}

#content #newProg .block .column h3 {
    margin: 0 0 5.83%;
    width: 67.39%;
}

#content #newProg .block .column p {
    font-size: 18px;
    letter-spacing: 0.16em;
    line-height: 2.1;
}

#content #newProg .block>p {
    font-size: 20px;
    letter-spacing: 0.35em;
    line-height: 2.5;
    margin-top: 7.03%;
    text-align: center;
}

#content #newProg .block .video {
    margin: 5.46% auto 0;
    width: 65.62%;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content #newProg .block .column p {
        font-size: 1.4vw;
    }

    #content #newProg .block>p {
        font-size: 1.56vw;
    }
}

/* recommendProg */
#content #recommendProg .block {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    padding: 7.03% 0;
    width: 69.53%;
}

#content #recommendProg .block.reverse {
    flex-direction: row-reverse;
}

#content #recommendProg .block+.block {
    background: url(../images/border_recommendprogram.svg) no-repeat center top;
    background-size: 100%;
}

#content #recommendProg .block .image {
    box-shadow: 12px 12px 0 0 #97afce;
    width: 43.82%;
}

#content #recommendProg .block .text {
    position: relative;
    width: 48.31%;
}

#content #recommendProg .block .text img.attention {
    position: absolute;
    top: -34.38%;
    right: -10.23%;
    width: 92.55%;
}

#content #recommendProg .block .text h3 {
    color: #023d88;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 2;
    white-space: nowrap;
}

#content #recommendProg .block .text p {
    font-size: 18px;
    letter-spacing: 0.16em;
    line-height: 2.2;
    margin: 4.54% 0 0 0;
    text-align: justify;
}

#content #recommendProg .block .text .button {
    background: none;
    color: #ffffff;
    letter-spacing: 0.34em;
    margin-top: 6.81%;
    width: 100%;
}

#content #recommendProg .block .text .button a {
    background: #023d88 url(../images/icon_video_play.svg) no-repeat 18.36% center;
    background-size: 1.42em;
    border-radius: 8px;
    font-size: 28px;
    padding: 0.57em 0 0.57em 1.14em;
}

#content #recommendProg p.notes {
    font-size: 16px;
    letter-spacing: 0.22em;
    text-align: center;
}

.lity-container {
    max-width: 1280px;
    width: 90%;
}

.lity-container .video {
    padding-top: 56.25%;
    position: relative;
}

.lity-container .video video {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content #recommendProg .block .text h3,
    #content #recommendProg .block .text .button a {
        font-size: 2.18vw;
    }

    #content #recommendProg .block .text p {
        font-size: 1.4vw;
    }

    #content #recommendProg p.notes {
        font-size: 1.25vw;
    }
}

/* gym */
#content #gym {
    background-color: #bed8d8;
}

#content #gym .block {
    background-color: #ffffff;
    border-radius: 20px;
    margin: 0 auto;
    padding: 3.51% 5.46%;
    width: 76.56%;
}

#content #gym .block+.block {
    margin-top: 5.07%;
}

#content #gym .block h3 {
    color: #023d88;
    font-size: 31px;
    letter-spacing: 0.27em;
    text-align: center;
}

#content #gym .block h3 span {
    background-color: #f7f9fb;
    border-radius: 10px;
    display: inline-block;
    font-size: 0.75em;
    margin: 0 0 0 0.86em;
    padding: 0.34em 0.6em 0.34em 1.13em;
    vertical-align: 0.15em;
}

#content #gym .block .columns {
    display: flex;
    justify-content: space-between;
    margin: 4.76% 0 0 0;
}

#content #gym .block .video {
    width: 52.38%;
}

#content #gym .block .videoWrap {
    padding-top: 56.25%;
    position: relative;
}

#content #gym .block video {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#content #gym .block .text {
    width: 40.47%;
}

#content #gym .block .text dl dt {
    background-color: #023d88;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.27em;
    padding: 0.2em 0;
    text-align: center;
}

#content #gym .block .text dl dd {
    font-size: 18px;
    letter-spacing: 0.22em;
    line-height: 1.65;
    margin: 3.82% 0 0 0;
    text-align: justify;
}

#content #gym p.notes {
    font-size: 16px;
    letter-spacing: 0.22em;
    margin: 7.03% 0 0 0;
    text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content #gym .block h3 {
        font-size: 2.5vw;
    }

    #content #gym .block h4 {
        font-size: 2.42vw;
    }

    #content #gym .block .text dl dt {
        font-size: 1.87vw;
    }

    #content #gym .block .text dl dd {
        font-size: 1.4vw;
    }

    #content #gym p.notes {
        font-size: 1.25vw;
    }
}

/* personal */
#content #personal h3 {
    color: #001e50;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
}

#content #personal .block {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin: 3.51% auto 0;
    width: 89.06%;
}

#content #personal .block+.block {
    margin-top: -7.45%;
}

#content #personal .block.reverse {
    flex-direction: row-reverse;
}

#content #personal .block img {
    width: 39.47%;
}

#content #personal .block p {
    color: #001e50;
    font-size: 26px;
    letter-spacing: 0.2em;
    line-height: 2.3;
    margin: 0 0 0 4.38%;
    white-space: nowrap;
}

#content #personal .button {
    background-color: #000000;
    color: #ffffff;
    letter-spacing: 0.15em;
    margin-top: 5.46%;
    width: 25.78%;
}

#content #personal .button a {
    font-size: 22px;
    padding: 0.68em 0;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content #personal h3 {
        font-size: 3.12vw;
    }

    #content #personal .block p {
        font-size: 2.03vw;
    }

    #content #personal .button a {
        font-size: 1.71vw;
    }
}

/* onecoin */
#content .onecoin {
    background-color: #42b6ee;
    padding: 10.93% 0 8.59%;
}

#content .onecoin h2 {
    width: 40.62%;
}

#content .onecoin h2+p {
    color: #00396d;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.19em;
    margin: 1em 0 0 0;
    text-align: center;
}

#content .onecoin p.period {
    margin: 3.28% auto 0;
    width: 14.21%;
}

#content .onecoin .image {
    font-size: 0;
    margin: 5% 0 0;
}

#content .onecoin .text {
    margin: 8.6% auto 0;
    width: 45%;
}

#content .onecoin .button {
    background-color: #ffffff;
    color: #00396d;
    margin-top: 7.03%;
    padding-left: 2.5em;
    position: relative;
    width: 36.71%;
}

#content .onecoin .buttonWrap {
    margin-top: 5.85%;
}

#content .onecoin .button::after {
    background: url(../images/img_onecoin_04.png) no-repeat;
    background-size: 100%;
    content: '';
    display: block;
    height: 135px;
    position: absolute;
    top: -32px;
    left: -52px;
    width: 135px;
}

#content .onecoin .button.buttonWrap::after {
    top: -10px;
}

#content .onecoin .buttonWrap a {
    background-color: #00396d;
    color: #ffffff;
}

#content .onecoin p.notes {
    color: #001e50;
    font-size: 12px;
    margin: 6.25% 0 0 0;
    line-height: 2;
    text-align: center;
}

#content .onecoin .buttonWrap+p.notes {
    margin: 3.9% 0 0 0;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {

    #content .onecoin h2+p {
        font-size: 1.4vw;
    }

    #content .onecoin .button::after {
        height: 10.54vw;
        top: -2.5vw;
        left: -4.06vw;
        width: 10.54vw;
    }

    #content .onecoin .button.buttonWrap::after {
        top: -0.78vw;
    }

    #content .onecoin p.notes {
        font-size: 0.93vw;
    }
}

/* pageTop */
#pageTop {
    background: #37bdff;
    border-radius: 50%;
    display: none !important;
    height: 50px;
    opacity: 0.7;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    z-index: 99;
}

#pageTop a {
    display: block;
    position: relative;
    height: 50px;
    width: 50px;
}

#pageTop a::before {
    color: #fff;
    content: '\f106';
    font-family: FontAwesome;
    font-size: 25px;
    position: absolute;
    top: 46%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* Footer
-------------------------------------------------- */

#footer {
    background-color: #ffffff;
}

#footer .inner {
    background-color: #ffffff;
    padding: 5.46% 0;
    width: 1280px;
}

#footer .logo {
    margin: 0 auto;
    width: 15.15%;
}

@media only screen and (max-width: 1280px) {
    #footer .inner {
        width: 100%;
    }
}

/* Media Queries
-------------------------------------------------- */

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

    /* Body
	-------------------------------------------------- */

    body {
        min-width: 320px;
    }

    .inner {
        width: auto;
    }

    /* Common Elements
	-------------------------------------------------- */

    /* paragraph */
    br.pc {
        display: none;
    }

    br.sp {
        display: block;
    }

    /* button */
    .button {
        border-radius: 5px;
        font-size: 3.46vw;
        margin-top: 12.26%;
        width: 55%;
    }

    .button a {
        font-size: 3.46vw;
    }

    .buttonWrap a {
        border-radius: 4px;
        font-size: 3.46vw;
    }

    .button.back {
        border-width: 1px;
    }

    /* Content
	-------------------------------------------------- */

    /* fixedButton */
    #fixedButton {
        padding: 2.5% 5%;
        width: 100%;
    }

    #fixedButton ul {
        margin: 0 -2%;
        width: 104%;
    }

    #fixedButton ul li {
        display: table;
        height: 12.8vw;
        margin: 0 1%;
    }

    #fixedButton ul:not(.button3) li {
        width: 47.86%;
    }

    #fixedButton ul li a {
        background-position: 8% center, 100%;
        background-size: 0.41em, auto;
        border-radius: 4px;
        display: table-cell;
        font-size: 3.73vw;
        letter-spacing: 0.1em;
        line-height: 1.2;
        padding: 0.5em 0;
        vertical-align: middle;
    }

    #fixedButton p.notes {
        font-size: 2.66vw;
        line-height: 1.4;
        margin-top: 2%;
    }

    /* fixedButtonCp */
    #fiexdButtonCp {
        filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.2));
        left: 80.2%;
        bottom: 30vw;
        width: 16%;
    }

    /* mv */
    #mv .logo {
        top: 4.01%;
        left: 3.33%;
        width: 19.73%;
    }

    #mv p {
        top: 62.46%;
        left: 64%;
        width: 32.53%;
    }

    /* attraction */
    #content #attraction {
        padding: 8% 0 10%;
    }

    #content #attraction h2 {
        width: 85.6%;
    }

    #content #attraction .swiper {
        margin-top: 10%;
    }

    #content #attraction .swiper+.swiper {
        margin-top: 4%;
    }

    #content #attraction .unlimited {
        margin-top: 12%;
        width: 85.6%;
    }

    /* intro */
    #content #intro {
        padding: 12% 0 10%;
    }

    #content #intro h2 {
        width: 82%;
    }

    #content #intro p {
        font-size: 3.2vw;
        letter-spacing: 0.1em;
        line-height: 2.2;
        margin-top: 7%;
    }

    /* campaign */
    #campaign {
        padding: 10% 5%;
    }

    #campaign h2 {
        background-size: 6.5%;
        font-size: 5.06vw;
        padding-bottom: 5.91%;
    }

    #campaign .benefits {
        width: 100%;
    }

    #campaign .benefits ul {
        justify-content: space-around;
    }

    #campaign .benefits ul li {
        margin: 0;
        width: 32%;
    }

    #campaign .benefits ul li:first-child {
        width: 80%;
    }

    #campaign p.notes {
        font-size: 2.93vw;
        line-height: 1.7;
        margin-top: 5%;
        text-align: left;
    }

    /* section */
    #content .section .header {
        padding: 7% 0 6%;
    }

    #content .section .header h2 {
        font-size: 4.26vw;
        letter-spacing: 0.1em;
        line-height: 1.5;
    }

    #content .section .header h2 span {
        margin-top: 0;
    }

    #content .section .header p {
        border-radius: 8px;
        font-size: 3.73vw;
        letter-spacing: 0.1em;
        margin: 3.5% auto 0;
        padding: 2% 8%;
        min-width: initial;
    }

    #content .section .content {
        padding: 8% 5% 12%;
    }

    /* admission */
    #content #admission .flow h3 {
        background: none;
        font-size: 4vw;
        letter-spacing: 0.1em;
    }

    #content #admission .flow ol {
        margin-top: 8%;
    }

    #content #admission .flow ol li {
        margin: 0 0 11.83%;
        width: 100%;
    }

    #content #admission .flow ol li:last-child {
        margin-bottom: 0;
    }

    #content #admission .flow ol li::after {
        background-image: url(../images/arrow_down.svg);
        height: 4.26vw;
        margin-right: -4.73%;
        top: auto;
        bottom: -8.53vw;
        right: 50%;
        width: 9.46%;
    }

    #content #admission .flow ol li dl {
        border-radius: 10px;
        display: block;
    }

    #content #admission .flow ol li dl dt {
        border-radius: 9px 9px 0 0;
        font-size: 3.2vw;
        padding: 0.5em 0 0.66em;
    }

    #content #admission .flow ol li dl dt span {
        display: inline-block;
        vertical-align: -0.1em;
        margin-left: 0.1em;
    }

    #content #admission .flow ol li dl dd {
        display: block;
        font-size: 4.8vw;
        min-height: initial;
        letter-spacing: 0.1em;
        padding: 1.05em 0;
        -ms-writing-mode: initial;
        writing-mode: initial;
    }

    #content #admission .things {
        padding-top: 12%;
    }

    #content #admission .things h3 {
        font-size: 6.66vw;
    }

    #content #admission .things p.notes {
        font-size: 3.37vw;
        margin-top: 6%;
    }

    #content #admission .things ul {
        margin-top: 10%;
    }

    #content #admission .things ul li {
        aspect-ratio: initial;
        border-radius: 10px;
        padding: 4% 4% 4% 5%;
        width: 100%;
    }

    #content #admission .things ul li:nth-child(n + 2) {
        margin-top: 5%;
    }

    #content #admission .things ul li:nth-child(1),
    #content #admission .things ul li:nth-child(2) {
        align-items: center;
        padding-bottom: 4%;
    }

    #content #admission .things ul li img {
        width: 25%;
    }

    #content #admission .things ul li div {
        padding: 0 0 0 6%;
        text-align: left;
        width: 75%;
    }

    #content #admission .things ul li h4 {
        font-size: 4.26vw;
        letter-spacing: 0.01em;
        margin-top: 0;
    }

    #content #admission .things ul li:nth-child(1) h4,
    #content #admission .things ul li:nth-child(2) h4 {
        font-size: 5.06vw;
        margin-top: 0;
    }

    #content #admission .things ul li h4 br {
        display: none;
    }

    #content #admission .things ul li p {
        font-size: 3.2vw;
        letter-spacing: 0.1em;
        margin-top: 2%;
        width: 100%;
    }

    #content #admission .things ul li p br {
        display: none;
    }

    #content #admission .things ul li a {
        border-radius: 6px;
        font-size: 3.46vw;
        position: static;
        transform: translateX(0);
        margin-top: 4%;
        padding: 0.76em 0;
        width: 100%;
    }

    /* fee */
    .fee {
        border-radius: 14px;
        padding: 45px 5%;
    }

    .fee h2 {
        font-size: 6.4vw;
        line-height: 1.4;
    }

    .fee p.notes {
        font-size: 2.93vw;
        margin-top: 5%;
        line-height: 2;
    }

    .fee h2+p.notes {
        background-size: 3.18em;
        padding-bottom: 2.27em;
    }

    .fee ul li {
        border-radius: 10px;
        margin-top: 6%;
        padding: 8% 6%;
    }

    .fee ul li dl {
        display: block;
    }

    .fee ul li dl dd {
        margin: 4% 0 0 0;
    }

    .fee ul li dl dd span.notes {
        font-size: 2.93vw;
        text-align: center;
    }

    .fee ul.admission li+li {
        margin-top: 15px;
    }

    .fee ul.admission li+li::after {
        height: 35px;
        top: -25px;
        width: 35px;
    }

    .fee ul.type li+li {
        margin-top: 5%;
    }

    .fee ul.admission li p:not(.notes) {
        font-size: 6.4vw;
    }

    .fee ul.admission li dl dt {
        font-size: 4.8vw;
    }

    .fee ul.admission li dl dd {
        font-size: 10.66vw;
    }

    .fee ul.type li dl dt {
        border-radius: 5px;
        font-size: 4.26vw;
        padding: 0.5em 0;
        width: 100%;
    }

    .fee ul.type li dl dd {
        font-size: 7.46vw;
    }

    .fee ul.type li p {
        border-radius: 10px;
        font-size: 3.46vw;
        margin: 6% 2% 0;
        padding: 5% 8% 4%;
        text-align: left;
    }

    .fee .btnClose {
        top: 15px;
        right: 5%;
        width: 8.56%;
    }

    /* support */
    #content #support {
        padding: 12% 0;
    }

    #content #support h2 {
        width: 75%;
    }

    #content #support h2+p {
        font-size: 3.46vw;
        letter-spacing: 0.1em;
        margin-top: 5%;
    }

    #content #support .flow {
        margin-top: 10%;
    }

    #content #support .flow h3 {
        width: 50%;
    }

    #content #support .step {
        border-radius: 12px;
        display: block;
        margin-top: 6%;
        width: 85.6%;
    }

    #content #support .step+.step {
        margin-top: 30px;
    }

    #content #support .step+.step::before {
        height: 10px;
        margin-left: -14px;
        top: -20px;
        width: 28px;
    }

    #content #support .step .stepTtl {
        border-radius: 10px 10px 0 0;
        font-size: 4.53vw;
        letter-spacing: 0.1em;
        padding: 0.5em 0;
        width: 100%;
    }

    #content #support .step .stepTtl br {
        display: none;
    }

    #content #support .step .stepContent {
        display: block;
        font-size: 3.46vw;
        padding: 5% 6% 6%;
        width: 100%;
    }

    #content #support .step .stepContent .text {
        width: 100%;
    }

    #content #support .step .stepContent .text h4 {
        margin-bottom: 3.2%;
        width: 80%;
    }

    #content #support .step .stepContent .text h5 {
        margin-top: 4%;
    }

    #content #support .step .stepContent .image {
        border-radius: 10px;
        margin-top: 6%;
        width: 100%;
    }

    /* enjoy */
    #content .enjoy {
        padding: 12% 0;
    }

    #content .enjoy h2 {
        margin-bottom: 8%;
        width: 80%;
    }

    #content .enjoy .headImg {
        margin-bottom: 10%;
    }

    /* newProg */
    #content #newProg {
        padding: 0;
    }

    #content #newProg .block {
        padding: 12% 5%;
    }

    #content #newProg .block .image {
        width: 100%;
    }

    #content #newProg .block .image::before {
        content: none;
    }

    #content #newProg .block .image::after {
        top: 8px;
        right: -8px;
    }

    #content #newProg .block .columns {
        margin-top: 10%;
        padding: 0 6%;
        width: 100%;
    }

    #content #newProg .block .column:first-child {
        width: 100%;
    }

    #content #newProg .block .column:last-child {
        margin-top: 6%;
        width: 100%;
    }

    #content #newProg .block .column>img {
        aspect-ratio: 3 / 2;
        object-fit: cover;
        width: 100%;
    }

    #content #newProg .block .column h3 {
        margin-bottom: 4%;
        width: 68%;
    }

    #content #newProg .block .column p {
        font-size: 3.46vw;
    }

    #content #newProg .block>p {
        font-size: 3.46vw;
        letter-spacing: 0.1em;
        line-height: 2;
        margin-top: 8%;
        padding: 0 4%;
        text-align: left;
    }

    #content #newProg .block .video {
        margin-top: 6%;
        width: 94%;
    }

    /* recommendProg */
    #content #recommendProg .block {
        padding: 8% 0;
        width: 90%;
    }

    #content #recommendProg .block:first-of-type {
        padding-top: 0;
    }

    #content #recommendProg .block .image {
        box-shadow: 8px 8px 0 0 #97afce;
        width: 100%;
    }

    #content #recommendProg .block .text {
        margin-top: 7%;
        width: 100%;
    }

    #content #precommendProg .block:first-of-type .text {
        margin-top: 12%;
    }

    #content #recommendProg .block .text img.attention {
        position: absolute;
        top: -13.26vw;
        right: -5%;
        width: 70%;
    }

    #content #recommendProg .block .text h3 {
        font-size: 4.8vw;
    }

    #content #recommendProg .block .text p {
        font-size: 3.46vw;
        letter-spacing: 0.1em;
        margin-top: 2%;
    }

    #content #recommendProg .block .text .button {
        margin-top: 5%;
    }

    #content #recommendProg .block .text .button a {
        background-size: 2em;
        border-radius: 5px;
        font-size: 4.53vw;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    #content #recommendProg p.notes {
        font-size: 2.93vw;
        letter-spacing: 0.1em;
        line-height: 1.5;
    }

    /* gym */
    #content #gym .block {
        border-radius: 10px;
        padding: 5% 6%;
        width: 85.6%;
    }

    #content #gym .block+.block {
        margin-top: 6%;
    }

    #content #gym .block h3 {
        font-size: 4.8vw;
        letter-spacing: 0.1em;
        white-space: nowrap;
    }

    #content #gym .block h3 span {
        border-radius: 5px;
        margin-left: 0.4em;
        padding: 0.5em 0.4em 0.5em 0.6em;
    }

    #content #gym .block .columns {
        display: block;
        margin-top: 5%;
    }

    #content #gym .block .video {
        width: 100%;
    }

    #content #gym .block .text {
        margin-top: 6%;
        width: 100%;
    }

    #content #gym .block .text dl dt {
        font-size: 3.73vw;
        padding: 0.6em 0;
    }

    #content #gym .block .text dl dd {
        font-size: 3.46vw;
        letter-spacing: 0.1em;
        line-height: 1.8;
        margin-top: 4%;
    }

    #content #gym p.notes {
        font-size: 2.93vw;
        letter-spacing: 0.1em;
        line-height: 1.5;
        margin-top: 10%;
    }

    /* personal */
    #content #personal h3 {
        font-size: 4.8vw;
    }

    #content #personal .block {
        margin-top: 8%;
        width: 85.6%;
    }

    #content #personal .block+.block {
        margin-top: 5%;
    }

    #content #personal .block img {
        width: 50%;
    }

    #content #personal .block p {
        font-size: 3.46vw;
        letter-spacing: 0.1em;
        line-height: 1.8;
        margin: 5% 0 0 0;
        padding: 0 0 0 3%;
        text-align: justify;
        white-space: normal;
        width: 50%;
    }

    #content #personal .block.reverse p {
        padding: 0 3% 0 0;
    }

    #content #personal .button {
        margin-top: 10%;
        width: 58%;
    }

    #content #personal .button a {
        border-radius: 3px;
        font-size: 3.46vw;
        padding: 0.8em 0;
    }

    /* onecoin */
    #content .onecoin {
        padding: 12% 0 10%;
    }

    #content .onecoin h2 {
        width: 82.66%;
    }

    #content .onecoin h2+p {
        font-size: 3.2vw;
        letter-spacing: 0.14em;
        margin-top: 1.08em;
    }

    #content .onecoin p.period {
        margin-top: 7.2%;
        width: 35.2%;
    }

    #content .onecoin .image {
        margin-top: 9.33%;
    }

    #content .onecoin .text {
        margin-top: 10.13%;
        width: 79.33%;
    }

    #content .onecoin .button {
        letter-spacing: 0.05em;
        margin-top: 14.13%;
        padding-left: 2.36em;
        width: 58%;
    }

    #content .onecoin .buttonWrap {
        margin-top: 10%;
    }

    #content .onecoin .button::after {
        height: 19vw;
        top: -5vw;
        left: -9vw;
        width: 19vw;
    }

    #content .onecoin .button.buttonWrap::after {
        top: -1.06vw;
        left: -7.5vw;
    }

    #content .onecoin .button p {
        letter-spacing: 0.05em;
    }

    #content .onecoin .buttonWrap a {
        font-size: 3.46vw;
    }

    #content .onecoin p.notes {
        font-size: 2.66vw;
        margin-top: 12%;
        padding: 0 22px;
        text-align: left;
    }

    #content .onecoin .buttonWrap+p.notes {
        margin-top: 8%;
    }

    /* pageTop */
    #pageTop {
        display: none !important;
        height: 44px;
        bottom: 2%;
        right: 2.5%;
        width: 44px;
    }

    #pageTop a {
        height: 44px;
        width: 44px;
    }

    /* Footer
	-------------------------------------------------- */

    #footer .inner {
        padding: 9.33% 0;
    }

    #footer .logo {
        width: 22.93%;
    }

}