/* 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;
}

/* Header
-------------------------------------------------- */

#header .inner {
    padding: 1.87% 26px 1.4%;
    width: 1280px;
}

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

/* logo */
#header .logo {
    width: 16.77%;
}

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

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

/* link */
a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: .3s;
    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;
}

@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: url(../images/bg_fixed_button_01.jpg) no-repeat top center;
    background-size: 100% 100%;
    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: .2s;
    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, 181, 65, 1) 0%, rgba(255, 186, 73, 1) 15.09%, rgba(255, 200, 94, 1) 38.05%, rgba(255, 222, 128, 1) 66.03%, rgba(255, 253, 176, 1) 97.7%, rgba(255, 255, 179, 1) 99.74%);
}

#fixedButton ul li.btnEntry a {
    background-image: url(../images/arrow_left.svg), linear-gradient(180deg, rgba(150, 222, 222, 1) 0%, rgba(55, 174, 232, 1) 99.89%);
}

#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;
    }
}

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

#mv p {
    position: absolute;
    top: 15.53%;
    left: 4.37%;
    width: 39.06%;
}

/* copy */
#copy {
    background-color: #e50012;
    border-bottom: 1px solid #808080;
    padding: 1.4% 0;
    text-align: center;
}

#copy img {
    display: inline-block;
    vertical-align: middle;
}

#copy img:first-child {
    width: 21.64%;
}

#copy img:last-child {
    width: 42.18%;
}

/* pageNav */
#pageNav {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1);
    position: relative;
}

#pageNav ul {
    display: flex;
    flex-wrap: wrap;
}

#pageNav ul li {
    border-left: 6px solid #dbd490;
    display: table;
    height: 5.2em;
    width: 25%;
}

#pageNav ul li:first-child {
    border-left: none;
}

#pageNav ul li a {
    display: table-cell;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.23em;
    line-height: 1.4;
    padding: 0.54em 0 0.68em;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

#pageNav ul li:nth-child(1) a,
#pageNav ul li:nth-child(3) a {
    background: linear-gradient(0deg, rgba(207, 202, 193, 1) 0%, rgba(225, 222, 217, 1) 22.3%, rgba(242, 240, 238, 1) 49.19%, rgba(252, 251, 251, 1) 75.39%, rgba(255, 255, 255, 1) 99.89%);
}

#pageNav ul li:nth-child(2) a,
#pageNav ul li:nth-child(4) a {
    background: linear-gradient(0deg, rgba(195, 192, 153, 1) 0%, rgba(222, 218, 172, 1) 79.27%, rgba(230, 225, 178, 1) 99.78%);
}

#pageNav ul li a:hover {
    color: #c51e00;
    opacity: 1;
}

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

    #pageNav ul li a {
        font-size: 1.71vw;
    }
}

/* campaign */
#campaign {
    background-color: #f2e7d3;
    padding: 5.31% 0 4.84%;
}

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

#campaign .benefits {
    margin: 1.71% auto 0;
    padding: 1.56% 2.34%;
    position: relative;
    width: 79.68%;
    z-index: 2;
}

#campaign .benefits::before,
#campaign .benefits::after {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#campaign .benefits::before {
    background: linear-gradient(to right, #d3ae6e, #e9e5af, #d3ae6e);
    border-radius: 30px;
}

#campaign .benefits::after {
    background-color: #f2e7d3;
    border-radius: 20px;
    height: calc(100% - 20px);
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    z-index: 1;
}

#campaign .benefits ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

#campaign .benefits ul li {
    background-color: #ffffff;
    border-radius: 20px;
    margin: 1.05% 0.29%;
    padding: 20px;
}

#campaign .benefits ul li:nth-child(n+2):nth-child(-n+4) {
    width: 32.29%;
}

#campaign .benefits ul li:nth-child(2) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#campaign .benefits ul li:nth-child(3) {
    border-radius: 0;
}

#campaign .benefits ul li:nth-child(4) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

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

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

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

    #campaign .benefits::after {
        height: calc(100% - 1.56vw);
        top: 0.78vw;
        left: 0.78vw;
        width: calc(100% - 1.56vw);
    }

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

/* intro */
#content #intro {
    background: linear-gradient(90deg, rgba(211, 174, 110, 1) 0%, rgba(211, 174, 110, 1) 1%, rgba(233, 229, 175, 1) 50%, rgba(211, 174, 110, 1) 100%);
    padding: 8.59% 0 6.25%;
}

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

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

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

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

/* 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;
    }
}

/* program */
#content #program .header {
    background: linear-gradient(-90deg, rgba(201, 75, 41, 1) 0%, rgba(200, 67, 34, 1) 28.88%, rgba(198, 46, 15, 1) 72.7%, rgba(197, 30, 0, 1) 99.74%);
}

#content #program .content {
    background-color: #f9e8e5;
    position: relative;
}

#content #program .content::after {
    background-color: #ffffff;
    content: '';
    display: block;
    height: 370px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#content #program .content .new {
    position: relative;
    z-index: 1;
}

#content #program .content .new h3 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.5;
    margin: 0 0 3.95%;
    text-align: center;
}

#content #program .content .new h3 span {
    display: inline-block;
    padding: 0 1.71em 0.43em;
    position: relative;
}

#content #program .content .new h3 span::before,
#content #program .content .new h3 span::after {
    background-color: #000000;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    bottom: 0;
    width: 1px;
}

#content #program .content .new h3 span::before {
    left: 0;
    transform: rotate(-30deg);
}

#content #program .content .new h3 span::after {
    right: 0;
    transform: rotate(30deg);
}

#content #program .content .new ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#content #program .content .new ul li {
    width: 23.75%;
}

#content #program .content .new ul li .image p {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 0 0 5.26%;
    padding: 0.8em 0;
    text-align: center;
}

#content #program .content .new ul li .image img {
    border-radius: 10px;
}

#content #program .content .new ul li h4 {
    background-color: #333333;
    border-radius: 0 10px 0 10px;
    color: #ffffff;
    display: table;
    font-size: 19px;
    font-weight: 700;
    height: 4.16em;
    letter-spacing: 0.06em;
    line-height: 1.4;
    margin: 6.57% 0 5.26%;
    padding: 0.68em 0;
    text-align: center;
    width: 100%;
}

#content #program .content .new ul li h4 span {
    display: table-cell;
    vertical-align: middle;
}

#content #program .content .new ul li p {
    font-size: 16px;
    line-height: 2;
}

#content #program .content .more {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.75;
    margin: 16.87% 0 17.7%;
    text-align: center;
}

#content #program .content .more span {
    background-image: url(../images/arrow_down_left.svg), url(../images/arrow_down_right.svg);
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: inline-block;
    padding: 0 3.5em;
}

#content #program .content .other h3 {
    background: url(../images/bg_program_other_ttl_01.svg) no-repeat center;
    background-size: contain;
    color: #c51e00;
    font-size: 32px;
    letter-spacing: 0.2em;
    margin: 0 0 10.41%;
    text-align: center;
}

#content #program .content .other .block {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4.16% 0;
}

#content #program .content .other .block+.block {
    border-top: 1px solid #333333;
}

#content #program .content .other .block:last-child {
    padding-bottom: 0;
}

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

#content #program .content .other .block .image {
    border-radius: 10px;
    overflow: hidden;
    width: 46.87%;
}

#content #program .content .other .block .text {
    position: relative;
    width: 45.83%;
}

#content #program .content .other .block .text img.attention {
    position: absolute;
    top: -32.28%;
    right: -9.09%;
    width: 84.77%;
}

#content #program .content .other .block .text h4 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 2;
}

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

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

#content #program .content .other .block .text .button a {
    background: #474747 url(../images/icon_video_play.svg) no-repeat 16.36% center;
    background-size: 1.68em;
    border-radius: 8px;
    font-size: 28px;
    padding: 0.57em 0 0.57em 1.14em;
}

#content #program .content .other p.notes {
    font-size: 16px;
    margin: 4.16% 0 0 0;
    text-align: center;
}

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

    #content #program .content::after {
        height: 28.9vw;
    }

    #content #program .content .new h3,
    #content #program .content .other h3 {
        font-size: 2.5vw;
    }

    #content #program .content .new ul li .image p {
        font-size: 1.56vw;
    }

    #content #program .content .new ul li h4 {
        font-size: 1.48vw;
    }

    #content #program .content .new ul li p {
        font-size: 1.25vw;
    }

    #content #program .content .more,
    #content #program .content .other .block .text h4,
    #content #program .content .other .block .text .button a {
        font-size: 2.18vw;
    }

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

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

/* popup */
.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%;
}

/* feature */
#content #feature .header {
    background: linear-gradient(90deg, rgba(54, 129, 161, 1) 0%, rgba(46, 122, 155, 1) 37.48%, rgba(25, 101, 138, 1) 94.39%, rgba(23, 99, 136, 1) 99.78%);
}

#content #feature .content {
    background-color: #e7eff3;
}

#content #feature .content .block {
    background-color: #ffffff;
    border: 1px solid #176388;
    border-radius: 20px;
    padding: 3.54% 4.68% 4.68%;
}

#content #feature .content .block+.block {
    margin-top: 4.68%;
}

#content #feature .content .block h3 {
    border-bottom: 1px solid #176388;
    color: #176388;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.4;
    padding: 0 0 2.3% 13.82%;
    position: relative;
}

#content #feature .content .block h3 img {
    position: absolute;
    bottom: 28.82%;
    left: 3.68%;
    width: 16.12%;
}

#content #feature .content .block h3 span {
    display: block;
    text-align: center;
}

#content #feature .content .block p {
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 2.99% 0 4.03%;
}

#content #feature .content .block .images {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

#content #feature .content .block .images img {
    border-radius: 10px;
    width: 31.33%;
}

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

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

    #content #feature .content .block p {
        font-size: 1.87vw;
    }
}

/* voice */
#content #voice .header {
    background: linear-gradient(90deg, rgba(84, 144, 151, 1) 0%, rgba(76, 143, 149, 1) 18.67%, rgba(55, 139, 143, 1) 47.08%, rgba(21, 132, 134, 1) 81.52%, rgba(0, 128, 128, 1) 99.74%);
}

#content #voice .content {
    background-color: #e5f2f2;
}

#content #voice .content .voice {
    background-color: #ffffff;
    border: 1px solid #008080;
    border-radius: 20px;
    margin: 0 10.41%;
    padding: 2.5% 4.16% 8.08%;
    position: relative;
}

#content #voice .content .voice+.voice {
    margin-top: 4.16%;
}

#content #voice .content .voice img {
    position: absolute;
    top: 28px;
    left: 0;
    width: 28.68%;
}

#content #voice .content .voice h3 {
    border-bottom: 1px dashed #008080;
    color: #008080;
    display: table;
    font-size: 30px;
    font-weight: 700;
    min-height: 3em;
    letter-spacing: 0.2em;
    line-height: 1.5;
    padding: 0 0 2.35% 25%;
    width: 100%;
}

#content #voice .content .voice h3 span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#content #voice .content .voice p {
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 2;
    margin: 2.94% 0 0 0;
}

#content #voice .content .voice .person {
    background-color: #e5f2f2;
    color: #008080;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.2em;
    padding: 0.4em 1.16em;
    position: absolute;
    bottom: 18px;
    right: 5.26%;
}

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

    #content #voice .content .voice h3,
    #content #voice .content .voice .person {
        font-size: 2.34vw;
    }

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

    #content #voice .content .voice img {
        top: 2.18vw;
    }

    #content #voice .content .voice .person {
        bottom: 1.4vw;
    }
}

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

#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: #474747;
    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-color: #e6e1d7;
}

#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 {
    align-items: center;
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 3.95% 0 1.45%;
    text-align: center;
    width: 47.91%;
}

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

#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(2) h4,
#content #admission .things ul li:nth-child(3) 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;
}

@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(2) h4,
    #content #admission .things ul li:nth-child(3) h4 {
        font-size: 2.5vw;
    }
}

#content #facility {
    background-color: #78efff;
    padding: 10.15% 0;
}

#content #facility h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-align: center;
}

#content #facility .swiper {
    margin: 3.51% 0 0 0;
    overflow: hidden;
    position: relative;
    padding: 0 0 3.28%;
}

#content #facility .swiper-slide img {
    border-radius: 25px;
}

#content #facility .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 0;
}

#content #facility .swiper-pagination-bullet {
    background-color: #000000;
    border-radius: 3px;
    height: 6px;
    margin: 0 6px;
    width: 40px;
}

#content #facility p.notes {
    font-size: 14px;
    margin: 2.5% 0 0 0;
    text-align: center;
}

#content #facility .inner {
    width: 748px;
    width: 58.43%;
}

#content #facility h3 {
    margin: 16.1% 0 0 0;
}

#content #facility .measures {
    background-color: #ffffff;
    border-radius: 1em;
    margin: 0 auto;
    padding: 12.03% 8.95%;
}

#content #facility .measures h4 {
    width: 64.33%;
}

#content #facility .measures ul {
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin: 7.81% 0 0 0;
}

#content #facility .measures ul li {
    width: 20.84%;
}

#content #facility .measures .button {
    background-color: #000000;
    margin-top: 12.05%;
    width: 57%;
}

#content #facility .measures .button a {
    color: #ffffff;
    font-size: 21px;
}

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

    #content #facility h2 {
        font-size: 2.18vw;
    }

    #content #facility .measures .button a {
        font-size: 1.64vw;
    }
}

/* onecoin */
#content .onecoin {
    background-color: #00f0d5;
    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;
    }
}

/* banner */
#content #banner {
    margin: 8.59% 0 0;
}

#content #banner .inner {
    width: 1010px;
    width: 78.9%;
}

#content #banner ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: space-between;
}

#content #banner ul.twoCol {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

#content #banner ul li {
    width: 31.28%;
}

#content #banner ul.twoCol li {
    margin-left: 1.48%;
    margin-right: 1.48%;
}

#content #banner .button {
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    margin-top: 7.3%;
    width: 44.55%;
}

#content #banner .button a {
    padding: 0.92em 0;
}

/* 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;
    }

    /* Header
	-------------------------------------------------- */

    #header .inner {
        padding: 2.53% 2.4%;
    }

    /* logo */
    #header .logo {
        width: 20.93%;
    }

    /* 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;
    }

    /* 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%;
    }

    /* mv */
    #mv p {
        top: 17.21%;
        width: 55.73%;
    }

    /* copy */
    #copy {
        padding: 2.5% 0 2%;
    }

    #copy img:first-child {
        width: 31.2%;
    }

    #copy img:last-child {
        width: 56.26%;
    }

    /* pageNav */
    #pageNav {
        width: 100%;
    }

    #pageNav ul li {
        border-left-width: 4px;
        height: 13.33vw;
        width: 50%;
    }

    #pageNav ul li:nth-child(3) {
        border-left: none;
    }

    #pageNav ul li a {
        font-size: 3.46vw;
        padding: 0.5em 0 0.6em;
    }

    #pageNav ul li:nth-child(1) a,
    #pageNav ul li:nth-child(4) a {
        background: linear-gradient(0deg, rgba(207, 202, 193, 1) 0%, rgba(225, 222, 217, 1) 22.3%, rgba(242, 240, 238, 1) 49.19%, rgba(252, 251, 251, 1) 75.39%, rgba(255, 255, 255, 1) 99.89%);
    }

    #pageNav ul li:nth-child(2) a,
    #pageNav ul li:nth-child(3) a {
        background: linear-gradient(0deg, rgba(195, 192, 153, 1) 0%, rgba(222, 218, 172, 1) 79.27%, rgba(230, 225, 178, 1) 99.78%);
    }

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

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

    #campaign .benefits {
        margin-top: 5%;
        padding: 2.54% 3.1%;
        width: 100%;
    }

    #campaign .benefits::before {
        border-radius: 15px;
    }

    #campaign .benefits::after {
        border-radius: 10px;
        height: calc(100% - 2.66vw);
        top: 1.33vw;
        left: 1.33vw;
        width: calc(100% - 2.66vw);
    }

    #campaign .benefits ul li {
        border-radius: 8px !important;
        margin: 0.62% 0;
        padding: 2.7% 4.7%;
    }

    #campaign .benefits ul li:nth-child(n+2):nth-child(-n+4) {
        text-align: center;
        width: 100%;
    }

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

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

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

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

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

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

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

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

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

    /* program */
    #content #program .content::after {
        height: 60vw;
    }

    #content #program .content .new h3 {
        font-size: 5.06vw;
        margin-bottom: 6%;
    }

    #content #program .content .new ul li {
        width: 100%;
    }

    #content #program .content .new ul li+li {
        margin-top: 10%;
    }

    #content #program .content .new ul li .image p {
        font-size: 4.26vw;
        margin-bottom: 4%;
        padding: 1.06em 0 0.81em;
    }

    #content #program .content .new ul li .image img {
        border-radius: 10px;
        height: 50.6vw;
        object-fit: cover;
        width: 100%;
    }

    #content #program .content .new ul li:last-child .image img {
        object-position: top;
    }

    #content #program .content .new ul li .image p br {
        display: none;
    }

    #content #program .content .new ul li h4 {
        font-size: 4vw;
        height: auto;
        margin: 4% 0 3%;
        padding: 1em 0;
    }

    #content #program .content .new ul li h4 br {
        display: none;
    }

    #content #program .content .new ul li p {
        font-size: 3.73vw;
    }

    #content #program .content .more {
        font-size: 4.53vw;
        margin: 15% 0 20%;
    }

    #content #program .content .more p {
        letter-spacing: 0.1em;
    }

    #content #program .content .more span {
        padding: 0;
        width: 100%;
    }

    #content #program .content .other h3 {
        background: none;
        font-size: 5.06vw;
        margin-bottom: 0;
    }

    #content #program .content .other .block {
        padding: 8% 0;
    }

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

    #content #program .content .other .block .text {
        margin-top: 5%;
        width: 100%;
    }

    #content #program .content .other .block:first-of-type .text {
        margin-top: 16%;
    }

    #content #program .content .other .block .text img.attention {
        position: absolute;
        top: -12.26vw;
        right: -2.5%;
        width: 60%;
    }

    #content #program .content .other .block .text h4 {
        font-size: 4.53vw;
    }

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

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

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

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

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

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

    #content #feature .content .block h3 {
        font-size: 5.06vw;
        padding: 0 0 4%;
    }

    #content #feature .content .block h3 img {
        display: block;
        margin: 0 auto;
        position: static;
        width: 25%;
    }

    #content #feature .content .block h3 span {
        margin-top: 4%;
    }

    #content #feature .content .block p {
        font-size: 3.73vw;
        margin: 4% 0 5%;
    }

    #content #feature .content .block .images {
        border-radius: 5px;
        overflow: hidden;
    }

    #content #feature .content .block .images img {
        border-radius: 0;
        width: calc(100% / 3);
    }

    /* voice */
    #content #voice .content .voice {
        border-radius: 10px;
        margin: 0;
        padding: 18.5% 5% 20%;
    }

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

    #content #voice .content .voice img {
        top: 4%;
        width: 38%;
    }

    #content #voice .content .voice h3 {
        display: block;
        font-size: 4.8vw;
        min-height: initial;
        padding: 0 0 4%;
    }

    #content #voice .content .voice h3 span {
        display: block;
    }

    #content #voice .content .voice p {
        font-size: 3.73vw;
        margin-top: 4%;
    }

    #content #voice .content .voice .person {
        font-size: 4.53vw;
        bottom: 4%;
        right: 5%;
    }

    /* 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 {
        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 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(2) h4,
    #content #admission .things ul li:nth-child(3) 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;
    }

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

    #content #facility h2 {
        font-size: 4.8vw;
        letter-spacing: 0.15em;
        line-height: 1.5;
    }

    #content #facility .swiper {
        margin-top: 8.53%;
        padding-bottom: 8.26%;
    }

    #content #facility .swiper-slide img {
        border-radius: 9px;
    }

    #content #facility .swiper-pagination-bullet {
        border-radius: 2px;
        height: 4px;
        margin: 0 7px;
        width: 24px;
    }

    #content #facility p.notes {
        font-size: 2.66vw;
        margin-top: 1.7em;
        text-align: center;
    }

    #content #facility .inner {
        width: 85.6%;
    }

    #content #facility h3 {
        margin-top: 10.66%;
    }

    #content #facility .measures {
        border-width: 4px;
        padding: 12.14% 0 12.46%;
    }

    #content #facility .measures h4 {
        width: 70.71%;
    }

    #content #facility .measures ul {
        margin: 0 auto;
        width: 86.29%;
    }

    #content #facility .measures ul li {
        margin-top: 7.24%;
        width: 20.93%;
    }

    #content #facility .measures .button {
        margin-top: 9.34%;
        width: 66.04%;
    }

    #content #facility .measures .button a {
        font-size: 3.2vw;
    }

    /* 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%;
    }

    /* banner */
    #content #banner {
        margin-top: 12%;
    }

    #content #banner .inner {
        width: 72.53%;
    }

    #content #banner ul li {
        width: 100%;
    }

    #content #banner ul.twoCol li {
        margin-left: 0;
        margin-right: 0;
    }

    #content #banner ul li+li {
        margin-top: 8.45%;
    }

    #content #banner .button {
        border-width: 1px;
        margin-top: 14.33%;
        width: 75.73%;
    }

    /* 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%;
    }

}