@charset "utf-8";

/* style.css
 * **************************************************
 * Body
 * Header
 * Global Navigation
 * 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: #231815;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
    font-feature-settings: 'palt';
    font-size: 14px;
    font-size: 1.4em;
    overflow-x: hidden;
}

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

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

#header .inner {
    padding: 1.71% 3.28% 1.56%;
    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;
}

/* columns */
.columns {
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

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

p.notes {
    font-weight: bold;
    letter-spacing: 0.08em;
    line-height: 1.78;
    text-align: center;
}


/* button */
.button {
    border-radius: 13px;
    margin: 0 auto;
    width: 390px;
}

.buttonWrap {
    padding: 14px 10px 10px;
}

.buttonWrap p {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.3em;
    margin: 0 0 10px;
    text-align: center;
}

.button a {
    border-radius: 14px;
    display: block;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    padding: 18px 0;
    text-align: center;
    width: 100%;
}

.buttonWrap a {
    border-radius: 9px;
    font-size: 2.2rem;
    padding: 9px 0;
}

/* IE */
_:-ms-input-placeholder,
:root .buttonWrap {
    padding-top: 19px;
}

_:-ms-input-placeholder,
:root .buttonWrap p {
    margin-bottom: 5px;
}

_:-ms-input-placeholder,
:root .button a {
    padding: 23px 0 12px;
}

_:-ms-input-placeholder,
:root .buttonWrap a {
    padding: 14px 0 4px;
}

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

/* haedline */
#content h2,
#content h3 {
    margin: 0 auto;
}

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

h2 {
    font-size: 2.5em;
    text-align: center;
    line-height: 1.8;
}

h3 {
    font-size: 2em;
    text-align: center;
    line-height: 1.3em;
}

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

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

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

/* mainvisual */
#mainvisual {
    background-image: url("../images/main_pc.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 768px;
    position: relative;
}

#mainvisual h1 {
    position: absolute;
    top: 8.85%;
    left: 2.81%;
    width: 51.95%;
}

#mainvisual #btnSticky {
    filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.3));
    position: absolute;
    top: 70.93%;
    right: 3.9%;
    width: 298px;
    z-index: 99;
}

#mainvisual #btnSticky.fixed {
    position: fixed;
    top: 20px;
    right: calc(50vw - 590px);
    width: 216px;
}

#mainvisual #btnSticky a {
    opacity: 1;
}

#mainvisual #btnSticky a img {
    transition: .3s;
}

#mainvisual #btnSticky a:hover img {
    transform: scale(1.05, 1.05);
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    #mainvisual {
        height: 60vw;
    }

    #mainvisual #btnSticky {
        width: 23.9%;
    }

    #mainvisual #btnSticky.fixed {
        right: calc(50vw - 45.09%);
        width: 16.87%;
    }
}

/* feature */
#feature {
    padding: 7.42% 0 0 0
}

#feature h2 {
    width: 46.4%;
}

#feature h2+p {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 2.4;
    margin: 3.51% 0 0 0;
    text-align: center;
}

#feature .bg {
    background: url(../images/bg_feature_01.png) no-repeat center top;
    background-size: 100%;
    margin: 2.81% 0 0 0;
    padding: 13.28% 0 12.5%;
    position: relative;
    z-index: 1;
}

#feature ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    width: 75.78%;
}

#feature ul li {
    background-color: #ffffff;
    border-radius: 2.42em;
    padding: 4.32% 2.57% 3.09%;
    position: relative;
    width: 31.75%;
}

#feature ul li>img {
    mix-blend-mode: multiply;
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
    width: 25.16%;
}

#feature ul li h3 {
    color: #f9321b;
    font-size: 26px;
    letter-spacing: 0.14em;
    line-height: 1.6;
}

#feature ul li p {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.9;
    margin: 6.97% 0 0 0;
    text-align: justify;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    #feature h2+p {
        font-size: 1.5vw;
    }

    #feature ul li>img {
        top: -2.96vw;
    }

    #feature ul li h3 {
        font-size: 2.03vw;
    }

    #feature ul li p {
        font-size: 1.09vw;
    }
}

/* intro */
#intro {
    background-image: url("../images/bg_01.png"), linear-gradient(90deg, rgba(255, 233, 236, 1) 0%, rgba(255, 239, 240, 1) 7.01%, rgba(255, 249, 248, 1) 26.08%, rgba(255, 252, 250, 1) 49.85%, rgba(255, 249, 248, 1) 73.66%, rgba(255, 239, 240, 1) 92.75%, rgba(255, 233, 236, 1) 99.77%, rgba(255, 233, 236, 1) 100%);
    background-repeat: repeat, no-repeat;
    background-size: 12.1%, 100%;
    margin: -7.03% 0 0 0;
    padding: 14.84% 0 0 0;
}

#intro .inner {
    background-color: #fffff6;
    border-radius: 20px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    height: 1520px;
    position: relative;
    width: 74.21%;
    z-index: 1;
}

#intro ul {
    list-style: none;
    margin: 0 -13.36%;
    width: 126.73%;
}

#intro ul li:first-child {
    margin-top: -250px;
}

#intro ul li:nth-child(2) {
    margin-top: -178px;
}

#intro ul li:nth-child(3) {
    margin-top: -170px;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    #intro .inner {
        height: 118.75vw;
    }

    #intro ul li:first-child {
        margin-top: -19.53vw;
    }

    #intro ul li:nth-child(2) {
        margin-top: -13.9vw;
    }

    #intro ul li:nth-child(3) {
        margin-top: -13.28vw;
    }
}

/* story */
#story {
    background-color: #fef9f6;
    margin: -7.03% 0 0 0;
    padding: 15.23% 0 6.64%;
    position: relative;
}

#story::after {
    background-color: #fc4d72;
    content: '';
    display: block;
    height: 17.17%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#story h2 {
    margin: 0 auto;
    width: 69.53%;
}

#story ul {
    list-style: none;
    margin: 4.21% auto 0;
    position: relative;
    width: 85.93%;
    z-index: 1;
}

#story ul li {
    width: 47.27%;
}

#story ul li:nth-child(n + 3) {
    margin-top: 4.21%;
}

#story ul li .videoWrap {
    padding-top: 56.2%;
    position: relative;
    width: 100%;
}

#story ul li .videoWrap video {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* message */
#message {
    margin: 5.15% 0 0 0;
    padding: 0 0 3.9%;
    position: relative;
}

#message::after {
    background: url(../images/img_message_01.png) no-repeat;
    background-size: 100%;
    content: '';
    display: block;
    height: 513px;
    position: absolute;
    bottom: -1px;
    right: 11.71%;
    width: 19.14%;
}

#message h2 {
    border-bottom: 2px solid #000000;
    margin: 0 auto 2.03%;
    padding: 0 0 1.71%;
    width: 56.25%;
}

#message h2 img {
    width: 57.5%;
}

#message p {
    margin: 0 auto;
    width: 42.18%;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    #message::after {
        height: 40.07vw;
    }
}

/* condition */
#condition {
    background-image: url("../images/bg_01.png"), linear-gradient(90deg, rgba(255, 233, 236, 1) 0%, rgba(255, 239, 240, 1) 7.01%, rgba(255, 249, 248, 1) 26.08%, rgba(255, 252, 250, 1) 49.85%, rgba(255, 249, 248, 1) 73.66%, rgba(255, 239, 240, 1) 92.75%, rgba(255, 233, 236, 1) 99.77%, rgba(255, 233, 236, 1) 100%);
    background-repeat: repeat, no-repeat;
    background-size: 155px, 100%;
    padding: 4.68% 0;
}

#condition .inner {
    margin: 0 auto;
    width: 85.93%;
}

#condition h2 {
    width: 61.81%;
}

#condition .box {
    background-color: #ffffff;
    border-radius: 20px;
    margin: -9.09% 0 0 0;
    padding: 8.18% 2.72% 5% 5.45%;
}

#condition .box ul {
    list-style: none;
}

#condition .box ul li {
    border-bottom: 1px solid #a3a3a3;
    font-size: 2.1rem;
    line-height: 1.6;
    padding: 1.23em 0 0.38em;
    position: relative;
    white-space: nowrap;
    width: 45.54%;
}

#condition .box ul li::before {
    background: url(../images/icon_check.png) no-repeat;
    background-size: 100%;
    content: '';
    height: 1.33em;
    position: absolute;
    top: 1.33em;
    left: -2.14em;
    width: 1.66em;
}

#condition p {
    margin: 1.42em 0 0 0;
    text-align: right;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    #condition .box ul li {
        font-size: 1.64vw;
    }

    #condition p {
        font-size: 1.09vw;
    }
}

/* measures */
#measures {
    padding: 7.81% 0;
}

#measures p {
    font-size: 3.4rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    line-height: 1.85;
    text-align: center;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    #measures p {
        font-size: 2.65vw;
    }
}

/* entry */
.entry {
    background: #fc4d72;
    padding: 80px 0;
    position: relative;
}

.entry.bg {
    background-image: url("../images/bg_01.png"), linear-gradient(90deg, rgba(255, 233, 236, 1) 0%, rgba(255, 239, 240, 1) 7.01%, rgba(255, 249, 248, 1) 26.08%, rgba(255, 252, 250, 1) 49.85%, rgba(255, 249, 248, 1) 73.66%, rgba(255, 239, 240, 1) 92.75%, rgba(255, 233, 236, 1) 99.77%, rgba(255, 233, 236, 1) 100%);
    background-repeat: repeat, no-repeat;
    background-size: 155px, 100%;
    padding-top: 120px;
}

.entry#entry04 {
    padding-top: 120px;
    padding-bottom: 120px;
}

.entry h2 {
    margin: 0 auto;
    width: 72.65%;
}

.entry h2+p {
    color: #fc4d72;
    font-size: 2.3rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    line-height: 1.7;
    margin: 0.52em 0 0 0;
    text-align: center;
}

.entry h3 {
    width: 43.98%;
}

.entry .reason {
    margin: 3.59% auto 0;
    width: 74.21%;
}

.entry#entry01 .reason {
    width: 52.34%;
}

.entry .reason h3 {
    background-color: #fc4d72;
    border-radius: 38px;
    color: #ffffff;
    font-size: 2.7rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    padding: 0.92em 0;
    text-align: center;
    width: auto;
}

.entry .reason ul {
    list-style: none;
}

.entry .reason ul li {
    background-color: #ffffff;
    border: 1px solid #fc4d72;
    border-radius: 1.42em;
    margin: 15px 0 0 0;
}

.entry .reason .reasonTxt {
    color: #fc4d72;
    font-size: 2.7rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    padding: 0.51em 0.66em;
    text-align: center;
}

.entry#entry01 .reason .reasonTxt {
    text-align: left;
}

.entry .reason .reasonTxt span {
    background-color: #fc4d72;
    border-radius: 100%;
    color: #ffff00;
    display: inline-block;
    font-size: 3.1rem;
    font-weight: bold;
    height: 1.8em;
    line-height: 1.8em;
    margin: 0 0.51em 0 0;
    padding: 0 0 0 0.1em;
    text-align: center;
    width: 1.8em;
}

.entry .reason .reasonDetail {
    border-top: 1px solid #fc4d72;
    margin: 0 6.84%;
    padding: 2.43% 0 3.04%;
}

.entry .reason .reasonDetail.special {
    padding: 6.09% 0;
}

.entry .reason .comment {
    border-top: 1px solid #fc4d72;
    margin: 3.17% 0 0 0;
}

.entry .reason .comment dl {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 3.17% 0 0 0;
}

.entry .reason .comment dl:nth-of-type(even) {
    flex-direction: row-reverse;
}

.entry .reason .comment dl dt {
    padding: 0 0 0 4.26%;
    width: 15.85%;
}

.entry .reason .comment dl:nth-of-type(even) dt {
    padding: 0 4.26% 0 0;
}

.entry .reason .comment dl dd {
    background-color: #fef0f5;
    border-radius: 1.25em;
    padding: 2.68% 4.87%;
    position: relative;
    width: 79.26%;
}

.entry .reason .comment dl dd::after {
    background-image: url(../images/img_entry_reason_balloon_left.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    display: block;
    height: 14px;
    position: absolute;
    left: -24px;
    bottom: 28px;
    width: 24px;
}

.entry .reason .comment dl:nth-of-type(even) dd::after {
    background-image: url(../images/img_entry_reason_balloon_right.svg);
    left: auto;
    right: -24px;
}

.entry .reason .comment dl dd p {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.7;
}

.entry p.detail {
    font-size: 2.1rem;
    font-weight: bold;
    letter-spacing: 0.16em;
    margin: 3.9% auto;
    text-align: center;
}

.entry h3+p.detail {
    margin-top: 1.56%;
}

.entry .button {
    width: 30.46%;
}

.entry .buttonWrap {
    background-color: #000;
}

.entry .buttonWrap p {
    color: #ffffff;
}

.entry .button a {
    background-color: #ffff21;
    color: #000;
}

.entry p.notes {
    font-size: 1.5rem;
    margin: 3.1% 0 0 0;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    .entry h2+p {
        font-size: 1.79vw;
    }

    .entry .reason h3,
    .entry .reason .reasonTxt {
        font-size: 2.1vw;
    }

    .entry .reason .reasonTxt span {
        font-size: 2.42vw;
    }

    .entry .reason .comment dl dd p {
        font-size: 1.25vw;
    }

    .entry p.detail {
        font-size: 1.64vw;
    }

    .entry .buttonWrap p,
    .entry .buttonWrap a {
        font-size: 1.71vw;
    }

    .entry p.notes {
        font-size: 1.17vw;
    }
}

/* special */
.entry .special {
    text-align: center;
}

.entry#entry01 .special {
    background: #ffffff;
    border: 1px solid #e6453e;
    border-radius: 20px;
    margin: 46px auto 50px;
    padding: 5.46% 3.56% 3.9%;
    position: relative;
    text-align: center;
    width: 62.5%;
}

.entry .special p {
    font-size: 2.1rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
    margin: 0 auto 1.42em
}

.entry .special p img {
    display: block;
    margin: 0 auto 1.66em;
    width: 62.83%;
}

.entry .more {
    position: absolute;
    top: -54px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 288px;
    z-index: 2;
}

.entry .btnClose {
    cursor: pointer;
    position: absolute;
    top: 38px;
    right: 32px;
    width: 45px;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    .entry .special p {
        font-size: 1.64vw;
    }
}

/* popup */
.white-popup {
    border-radius: 20px;
    margin: 20px auto;
    position: relative;
    max-width: 1280px;
    width: auto;
}

/* school */
#content .schoolImg {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 680px;
}

.ipad #content .schoolImg {
    background-attachment: scroll;
}

@media screen and (max-width: 1024px) {
    #content .schoolImg {
        background-attachment: scroll;
    }
}

#content #schoolImgSwimming {
    background-image: url("../images/swimming_bg.jpg");
}

#content #schoolImgGymnastics {
    background-image: url("../images/gym_bg.jpg");
}

#content #schoolImgDance {
    background-image: url("../images/dance_bg.jpg");
}

#content #schoolImgAbilityDevelopment {
    background-image: url("../images/abilitydevelopment_bg.jpg");
}

#content .school {
    position: relative;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 1280px;
    padding: 92px 0 96px;
}

#content .school .flex {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#content .school .flex .school_text {
    width: 47.77%;
}

#content .school .flex .school_img {
    text-align: center;
    width: 48%;
}

#content .school h2 {
    margin: 0;
    text-align: left;
    width: 100%;
}

#content .school p {
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 0.185em;
    line-height: 2.2;
    margin: 1em 0 0 0;
    text-align: left;
}

@media only screen and (min-width: 801px) and (max-width: 1280px) {
    #content .schoolImg {
        height: 53.12vw;
    }
}

/* start */
#content #start {
    background-color: #FFF2D9;
}

#content #start .inner {
    padding: 158px 0 96px;
}

#content #start h2 {
    width: 527px;
}

/** デフォルトの大きさは1.0倍 */
#content #start label {
    transform: scale(1);
}

/** 画像ホバー時のアニメを設定 */
#content #start label:hover {
    -webkit-animation: bound 1s ease-in;
    -moz-animation: bound 1s ease-in;
    animation: bound 1s ease-in;
}

/** アニメーションの定義 */
@keyframes bound {

    /** 開始時は１倍の大きさ */
    from {
        transform: scale(1);
    }

    /** 0%～25%にかけて1.15倍する */
    25% {
        transform: scale(1.05);
    }

    /** 25%～50%にかけて0.95倍する */
    50% {
        transform: scale(0.95);
    }

    /** 50%～75%にかけて1.05倍する */
    75% {
        transform: scale(1.05);
    }

    /** 終了時は元の大きさに戻す */
    to {
        transform: scale(1);
    }
}

#content #start label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    display: block;
    margin: 62px auto 0;
    width: 700px;
}

#content #start input {
    display: none;
}

#content #start .toggleContents {
    height: 0;
    opacity: 0;
    transition: 0.2s;
}

#content #start input:checked~.toggleContents {
    height: auto;
    opacity: 1;
    padding: 55px 0 0;
}

#content #start .toggleContents p {
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 0.12em;
    line-height: 2.2;
    margin: 3.91em 0 0 0;
    text-align: center;
}

#content #start .toggleContents>p {
    margin-top: 88px;
}

#content #start .bg {
    background-color: #ffffff;
    border-radius: 38px;
    padding: 84px 0 70px;
}

#content #start .bg h3 {
    font-weight: bold;
    color: #3CABFF;
    font-size: 3.3em;
}

#content #start .bg p {
    margin-top: 33px;
}

#content #start .bg>img {
    display: block;
    margin: 30px auto 0 auto;
}

#content #start .bg>img+img {
    margin-top: 82px;
}

/* fixedImg */
#content .fixedImg {
    background-image: url("../images/growing_bg.jpg");
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 640px;
    position: relative;
}

.ipad #content .fixedImg {
    background-attachment: scroll;
}

@media screen and (max-width: 1024px) {
    #content .fixedImg {
        background-attachment: scroll;

    }
}

#content .fixedImg img {
    position: absolute;
    top: 5.46%;
    left: 3.9%;
    width: 19.06%;
}

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

    #content .fixedImg {
        height: 50vw;
    }
}

/* coordination */
#content #coordination {
    background: url(../images/bg_coordination_01.jpg) repeat-y;
    background-size: 100%;
    margin: 0 0 120px 0;
    padding: 0;
    text-align: center;
}

#content #coordination .inner {
    width: 80%;
    padding: 140px 0 0;
}

#content #coordination h2 {
    width: 575px;
}

#content #coordination p {
    width: 800px;
    margin: 25px auto 40px auto;
}

.slider-for {
    margin: 0 0 20px 0;
}

.slick-initialized .slick-slide {
    padding: 0 25px;
}

.slider-nav {
    display: flex;
    justify-content: center;
    margin: 0 0 50px 0;
    width: 100%;
}

.swiper-button-prev,
.swiper-button-next {
    background-size: 1.6em 2em;
    margin-top: 0;
    top: 39.53%;
    height: 2em;
    width: 1.6em;
}

.swiper-button-prev {
    left: 32.22%;
}

.swiper-button-next {
    right: 32.22%;
}

.swiper-pagination-thumbs {
    display: flex;
    justify-content: center;
    width: 800px;
}

.swiper-pagination-thumb {
    width: 85px;
    background: #BADBE3;
    color: #FFF;
    margin: 5.85% 5px 0 0;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
}

.swiper-pagination-thumb-active {
    background: #3CABFF;
}


/* coach */
#content #coach {
    position: relative;
}

#content #coach::after {
    background-color: #ffffff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: calc(100% - 21.56%);
    z-index: 1;
}

#content #coach .inner {
    padding: 30px 0;
    z-index: 2;
}


#content #coach h2+p {
    font-size: 1.9rem;
    font-weight: bold;
    letter-spacing: 0.18em;
    line-height: 2.2;
    margin: 43px 0 0 0;
    text-align: center;
}

#content #coach h3 {
    margin: 60px auto;
    line-height: 2em;
}

#content #coach ul {
    list-style: none;
    margin: 53px auto 0;
    width: 668px;
}

#content #coach ul li+li {
    margin: 52px 0 0 0;
}

#content #coach ul+p {
    margin: 94px auto 0;
    width: 618px;
}

@media only screen and (min-width: 801px) and (max-width: 1000px) {

    #content #coach::after {
        width: 90%;
    }
}

/* reason */
#content #reason {
    background: -webkit-linear-gradient(left, #e7c87e 25%, #f7f3bb 50%, #e7c87e);
    background: linear-gradient(to right, #e7c87e 25%, #f7f3bb 50%, #e7c87e);
}

#content #reason .inner {
    padding: 90px 0 82px;
}

#content #reason h2 {
    width: 672px;
}

#content #reason dl {
    margin: 8.08% 0 0 0;
}

#content #reason dl dt {
    margin: 0 auto;
    width: 472px;
}

#content #reason dl dd {
    margin: 34px 0 0 0
}

#content #reason dl dd ul {
    list-style: none;
    margin: 0 25px;
}

#content #reason dl dd ul li {
    width: 194px;
}

/* banners */
#content .banners {
    padding: 80px 0 40px;
}

#content .banners ul {
    list-style: none;
    margin: 0 auto;
    width: 886px;
}

#content .banners ul li {
    width: 426px;
}

/* pageTop */
#pageTop {
    background: #f2649d;
    border-radius: 50%;
    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: 3.12% 0;
    width: 1280px;
}

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

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


.sp {
    display: none;
}


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

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

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

    body {
        font-size: 10px;
        font-size: 2.66vw;
        margin-bottom: 17.33vw;
        min-width: 320px;
    }

    .inner {
        width: auto;
    }

    h2 {
        font-size: 2.1em;
    }

    h3 {
        font-size: 1.8em;
    }

    .entry h3 {
        margin: 30px auto;
    }

    .sp {
        display: block;
    }

    .pc {
        display: none;
    }

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

    #header .inner {
        padding: 3.73% 4%;
    }

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

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

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

    p br.sp {
        display: block;
    }

    p.notes {
        line-height: 1.6;
    }

    /* button */
    .button {
        border-radius: 7px;
        width: 205px;
    }

    .buttonWrap {
        padding: 7px 5px 5px;
    }

    .buttonWrap p {
        font-size: 1.3rem;
        font-size: 3.46vw;
        letter-spacing: 0.15em;
        margin-bottom: 5px;
    }

    .button a {
        border-radius: 7px;
        font-size: 1.5rem;
        font-size: 4vw;
        letter-spacing: 0.09em;
        padding: 7px 0;
    }

    .buttonWrap a {
        border-radius: 5px;
        font-size: 1.3rem;
        font-size: 3.46vw;
        letter-spacing: 0.09em;
        padding: 5px 0;
    }

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

    /* mainvisual */
    #mainvisual {
        background-image: url("../images/main_sp.jpg");
        height: 133.33vw;
    }

    #mainvisual h1 {
        top: 2.7%;
        left: 16%;
        width: 66.4%;
    }

    #mainvisual h1 img {
        max-width: initial;
        width: 100%;
    }

    #mainvisual #btnSticky {
        filter: none;
        position: fixed;
        top: auto;
        bottom: 0;
        right: 0;
        transform: translateY(100%);
        transition: .2s;
        width: 100%;
    }

    #mainvisual #btnSticky img {
        max-width: initial;
        width: 100%;
    }

    #mainvisual #btnSticky.fixed {
        top: auto;
        bottom: 0;
        right: 0;
        transform: translateY(0);
        width: 100%;
    }

    #mainvisual #btnSticky.fixed img {
        box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.1);
    }

    /* feature */
    #feature {
        padding-top: 9.33%;
    }

    #feature h2 {
        width: 73.33%;
    }

    #feature h2+p {
        font-size: 2.93vw;
        line-height: 2;
        margin-top: 4.8%;
    }

    #feature .bg {
        background-image: url(../images/bg_feature_01_sp.png);
        background-size: 100% 100%;
        margin-top: 4%;
        padding: 18.4% 0 16.33%;
    }

    #feature ul {
        width: 93.33%;
    }

    #feature ul li {
        border-radius: 10px;
        padding: 7.27% 6.28% 3.42%;
        width: 100%;
    }

    #feature ul li+li {
        margin-top: 8.14%;
    }

    #feature ul li>img {
        top: -4.8vw;
        width: 11.85%;
    }

    #feature ul li h3 {
        font-size: 4vw;
        line-height: 1;
    }

    #feature ul li h3 br {
        display: none;
    }

    #feature ul li p {
        font-size: 2.93vw;
        line-height: 1.7;
        margin-top: 3.26%;
    }

    /* intro */
    #intro {
        background-size: 25%, 100%;
        margin-top: -8.53%;
        padding: 16% 0 4.8%;
    }

    #intro .inner {
        border-radius: 22px;
        height: auto;
        padding: 0 0 6.57%;
        width: 93.33%;
    }

    #intro h2 img {
        max-width: initial;
        width: 100%;
    }

    #intro ul {
        margin: 0 -1.85%;
        width: 103.71%;
    }

    #intro ul li:first-child {
        margin-top: -19.2vw;
    }

    #intro ul li:nth-child(2) {
        margin-top: -1.86vw;
    }

    #intro ul li:nth-child(3) {
        margin-top: -3.2vw;
    }

    /* story */
    #story {
        margin: -15.2% 0 0 0;
        padding: 28.8% 0 8.8%;
    }

    #story::after {
        height: 13.54%;
    }

    #story h2 {
        width: 90.13%;
    }

    #story ul {
        margin-top: 6.4%;
        width: 77.33%;
    }

    #story ul li {
        width: 100%;
    }

    #story ul li+li,
    #story ul li:nth-child(n + 3) {
        margin-top: 10.34%;
    }

    /* message */
    #message {
        margin-top: 13.33%;
        padding-bottom: 61.66%;
    }

    #message::after {
        height: 46.09%;
        right: 36%;
        width: 28.53%;
    }

    #message h2 {
        border-bottom-width: 1px;
        margin-bottom: 3.73%;
        padding-bottom: 2.66%;
        width: 96%;
    }

    #message h2 img {
        width: 57.5%;
    }

    #message p {
        width: 72%;
    }

    /* condition */
    #condition {
        background-size: 25%, 100%;
        padding: 5.33% 0;
    }

    #condition .inner {
        width: 93.33%;
    }

    #condition h2 {
        width: 100%;
    }

    #condition .box {
        border-radius: 10px;
        margin-top: -13.25%;
        padding: 12.85% 4.28% 5.71% 12.85%;
    }

    #condition .box ul li {
        font-size: 3.46vw;
        padding: 1.07em 0 0.3em;
        white-space: normal;
        width: 100%;
    }

    #condition .box ul li::before {
        height: 1.23em;
        top: 1.07em;
        left: -2.15em;
        width: 1.53em;
    }

    #condition p {
        font-size: 2.66vw;
        line-height: 1.4;
        margin-top: 1.5em;
        padding: 0 0.5em;
        text-align: left;
    }

    /* measures */
    #measures {
        padding: 8% 0;
    }

    #measures p {
        font-size: 4.53vw;
    }

    /* entry */
    .entry {
        padding: 9.33% 0;
    }

    .entry.bg {
        background-size: 25%, 100%;
        padding-top: 7.46%;
    }

    .entry#entry04 {
        padding-top: 7.46%;
        padding-bottom: 7.06%;
    }

    .entry h2 {
        width: 76%;
    }

    .entry h2+p {
        font-size: 3.2vw;
        margin-top: 3.73%;
    }

    .entry h3 {
        width: 64%;
    }

    .entry .reason {
        margin-top: 6.4%;
        width: 93.33%;
    }

    .entry#entry01 .reason {
        width: 82%;
    }

    .entry .reason h3 {
        font-size: 3.2vw;
        letter-spacing: 0.1em;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0.82em 0;
    }

    .entry .reason ul li {
        border-radius: 0.9em;
        margin-top: 2.5%;
    }

    .entry .reason .reasonTxt {
        font-size: 3.2vw;
        letter-spacing: 0.1em;
        padding: 0.54em 0.72em;
        white-space: nowrap;
    }

    .entry .reason .reasonTxt span {
        font-size: 3.73vw;
        height: 1.78em;
        line-height: 1.78em;
        margin-right: 0.51em;
        width: 1.78em;
    }

    .entry .reason .reasonDetail {
        margin: 0 5%;
        padding: 3% 0 6%;
    }

    .entry .reason .comment {
        margin-top: 4%;
    }

    .entry .reason .comment dl {
        align-items: flex-end;
        margin-top: 4%;
    }

    .entry .reason .comment dl dt {
        padding: 0;
    }

    .entry .reason .comment dl:nth-of-type(even) dt {
        padding: 0;
    }

    .entry .reason .comment dl dd::after {
        height: 1.86vw;
        left: -3.2vw;
        bottom: 3.73vw;
        width: 3.2vw;
    }

    .entry .reason .comment dl:nth-of-type(even) dd::after {
        right: -3.2vw;
    }

    .entry .reason .comment dl dd p {
        font-size: 2.93vw;
    }

    .entry .reason .comment dl dd p br {
        display: none;
    }

    .entry p.detail {
        font-size: 3vw;
        margin: 8% auto 5.33%;
    }

    .entry h3+p.detail {
        margin-top: 3.2%;
    }

    .entry .button {
        width: 62.93%;
    }

    .entry p.notes {
        font-size: 2.66vw;
        margin-top: 5.23%;
        padding: 0 6.88%;
    }

    /* special */
    .entry#entry01 .special {
        margin: 6.52% auto 8.26%;
        padding: 8.69% 5.79% 5.79% 5.79%;
        width: 95.04%;
    }

    .entry .special h2 {
        width: 65.57%;
    }

    .entry .special p {
        font-size: 3.2vw;
    }

    .entry .special p img {
        margin-bottom: 4.92%;
        width: 60%;
    }

    .entry .special h3+p {
        font-size: 3.2vw;
        margin-top: 4.92%;
        margin-bottom: 4.92%;
    }

    .entry .more {
        top: -8vw;
        width: 45.45%;
    }

    .entry .btnClose {
        top: 15px;
        right: 12px;
        width: 22px;
    }

    /* popup */
    .white-popup {
        border-radius: 10px;
    }

    /* school */
    #content .schoolImg {
        background-attachment: scroll;
        height: 475px;
    }

    #content .school .flex {
        width: 85%;
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    #content #schoolImgSwimming {
        background-image: url("../images/swimming_bg_sp.jpg");
    }

    #content #schoolImgGymnastics {
        background-image: url("../images/gym_bg_sp.jpg");
    }

    #content #schoolImgDance {
        background-image: url("../images/dance_bg.jpg");
    }

    #content #schoolImgAbilityDevelopment {
        background-image: url("../images/abilitydevelopment_bg.jpg");
    }

    #content .school {
        background-size: 100%;
        padding: 10% 0;
    }

    #content .school .flex .school_text,
    #content .school .flex .school_img {
        width: 100%;
    }

    #content .school h2 {
        width: 80%;
    }

    #content .school p {
        font-size: 1.0rem;
        font-size: 2.66vw;
        margin: 3.33% 0 5.33%;
    }

    #content .school>img {
        margin-top: 5.6%;
        width: 74.4%;
    }

    #content #gymnastics .flex,
    #content #abilityDevelopment .flex {
        flex-direction: column-reverse;
    }

    /* start */
    #content #start .inner {
        padding: 14.4% 0 14.93%;
    }

    #content #start h2 {
        width: 74.13%;
    }

    #content #start label {
        margin-top: 10.66%;
        width: 81.33%;
    }

    #content #start input:checked~.toggleContents {
        padding: 30px 9.33% 0;
    }

    #content #start .toggleContents p {
        font-size: 1.2rem;
        font-size: 3.2vw;
    }

    #content #start .toggleContents>p {
        letter-spacing: 0.06em;
        margin: 50px 0;
    }

    #content #start .bg {
        border-radius: 15px;
        padding: 10.13% 0 8.53%;
    }

    #content #start .bg h3 {
        font-size: 2em;
        text-align: center;
    }

    #content #start .bg p {
        margin: 5.9% 0 0 9.06%;
        text-align: left;
    }

    #content #start .bg>img {
        margin-top: 0.98%;
    }

    #content #start .bg>img+img {
        margin-top: 8.52%;
    }

    /* fixedImg */
    #content .fixedImg {
        background-image: url("../images/growing_bg.jpg");
        background-attachment: scroll;
        height: 350px;
    }

    #content .fixedImg img {
        top: 10%;
        width: 28%;
    }

    /* coordination */
    #content #coordination {
        padding-bottom: 0;
    }

    #content #coordination .inner {
        padding: 11.2% 0 0 0;
    }

    #content #coordination h2 {
        width: 97.06%;
    }

    #content #coordination p {
        width: 100%;
        margin-top: 8.53%;
    }

    .swiper-button-prev,
    .swiper-button-next {
        background-size: 1.6em 2em;
        margin-top: 0;
        top: 44.5%;
        height: 2em;
        width: 1.6em;
    }

    .swiper-button-prev {
        left: 8%;
    }

    .swiper-button-next {
        right: 8%;
    }

    .swiper-pagination-thumb {
        margin: 9.33% 2px 0;
        padding: 5px 0;
        width: 5em;
    }

    /* coach */
    #content #coach {
        background-color: #ffffff;
    }

    #content #coach::after {
        content: none;
    }

    #content #coach .inner {
        padding: 17.06% 0 13.86%;
    }

    #content #coach h2 {
        margin-left: 12.26%;
        width: 76%;
    }

    #content #coach h2+p {
        font-size: 1.2rem;
        font-size: 3.2vw;
        letter-spacing: 0.12em;
        margin: 2.2em 0 0 12.26%;
        text-align: left;
    }

    #content #coach ul {
        margin-top: 10%;
        width: 87.2%;
    }

    #content #coach ul li+li {
        margin: 7.9% auto 0;
    }

    #content #coach ul+p {
        margin-top: 10.93%;
        width: 51.06%;
    }

    /* reason */
    #content #reason {
        background: -webkit-linear-gradient(bottom, #e7c87e #f7f3bb);
        background: linear-gradient(to top, #e7c87e, #f7f3bb);
    }

    #content #reason .inner {
        padding: 9.33% 0 10.66%;
    }

    #content #reason h2 {
        width: 85.33%;
    }

    #content #reason dl {
        margin-top: 6.93%;
    }

    #content #reason dl dt {
        width: 70.93%;
    }

    #content #reason dl dd {
        margin-top: 4.66%;
    }

    #content #reason dl dd ul {
        margin: 0 5.33%;
    }

    #content #reason dl dd ul li {
        width: 31.04%;
    }

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

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

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

    #footer .inner {
        padding: 4% 0 5.33%;
    }

    #footer .logo {
        width: 22.93%;
    }

}

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

    #intro .inner {
        border-radius: 10px;
    }

    #content .schoolImg {
        height: 300px;
    }

    #content .school h2 {
        width: 75%;
    }

    .school_text_img img {
        width: auto;
        height: 85px
    }

    #content .school .school_img {
        width: 70%;
        margin: 0 auto;
    }

    #swimming .school_text_img {
        top: -65px;
    }

    #gymnastics .school_text_img {
        top: -65px;
    }

    #dance .school_text_img {
        top: -85px;
    }

    #content .school p {
        font-size: 12px;
    }

    #content .school .flex {
        width: 85%;
    }

    #content #gymnastics .flex,
    #content #abilityDevelopment .flex {
        flex-direction: column-reverse;
    }

    #content #mix {
        margin: 50px auto;
    }

    #content #mix .inner {
        padding: 60px 20px 30px 20px;
    }

    #content #mix h2 {
        margin: 30px auto;
        width: 90%;
    }

    #content #mix .more {
        top: -26px;
        left: -3.68%;
        width: 36%;
    }

    #content #coordination {
        margin: 0;
    }

    #content #coordination .inner {
        width: 100%;
    }

    #content #coordination h2 {
        padding: 0 15px;
    }

    #content #coordination p {
        width: 85%;
    }

    #content #coach h3 {
        margin: 20px auto 0 auto;
        line-height: 2em;
        font-size: 5.4vw;
    }

    #content #start input:checked~.toggleContents {
        padding: 25px 15px;
    }

    #content #start .bg img {
        padding: 0 25px;
    }

    #content #start .bg h3 {
        font-size: 6vw;
    }

    #content #start .toggleContents>p {
        margin: 20px auto 0 auto;
    }

    /* banners */
    #content .banners {
        padding: 10% 0 5%;
    }

    #content .banners ul {
        width: 72.53%;
    }

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

    #content .banners ul li+li {
        margin-top: 6.43%;
    }

}

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

    #content .school p {
        font-size: 3.3vw;
    }

    #content #coach h2+p {
        font-size: 3vw;
        margin: 2.2em 0 0 10%;
    }
}