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

    .header-mobile.active {
        background: #f2ffff;
        height: 100vh;
        padding: 63px 20px 20px;
        text-align: center;
        width: calc(100% - 0px);
        position: fixed;
        right: 0px;
        margin: 0 auto;
        top: 0px;
        z-index: -1;
    }

    .header-mobile-left li a {
        background: #0CABA8;
        border-radius: 3px;
        max-width: 250px;
        margin: 0 auto;
        padding: 12px;
        color: white;
        margin-bottom: 20px;
        display: block;
    }

    .header-mobile-left li:nth-child(1) a {
        background: #D0A900;
        border-radius: 3px;
        max-width: 250px;
        margin: 0 auto;
        padding: 12px;
        color: white;
        margin-bottom: 20px;
        display: block;
    }

    .sns-list img {
        width: 45px;
    }

    .sns-list {
        display: flex;
        display: flex;
        justify-content: space-around;
        padding: 0 0 16px 0;
        max-width: 227px;
        margin: 0 auto;
    }

    .header-mobile-left li:nth-child(2) a {
        background: #015958;
        border-radius: 3px;
        max-width: 250px;
        margin: 0 auto;
        padding: 12px;
        color: white;
        margin-bottom: 20px;
        display: block;
    }

    .header-mobile-left li:nth-child(2) img {
        width: 10px;
        margin-right: 6px;
    }

    .header-nav__mobile {
        right: 10px;
    }

    .header-nav__mobile.left {
        right: auto;
        left: 10px;
        height: 40px;
        width: 40px;
    }

    .display {
        display: none;
    }

    .js-inview {
        opacity: 0;
        transform: translateY(60px);
        transition: all 1s;
    }

    .inview {
        opacity: 1;
        transform: translateY(0);
        transition: all 1s;
    }

    .js-inview2 {
        opacity: 0;
    }

    .js-inview2.tlt {
        opacity: 1;
    }

    .my-calendar-header {
        display: none !important;
    }

    .common-loading {
        width: 100%;
        height: 100vh;
        z-index: 9999;
        position: fixed;
        background: white;
        padding-top: 30vh;
        text-align: center;
        transition: 0.5s all;
        opacity: 1;
    }

    .loader-inner {
        width: 100%;
        position: fixed;
        background: #ebfffb;
        padding: 50px;
    }

    .common-loading.loaded {
        transition: 0.5s all;
        opacity: 0;
    }

    .common-loading__image img {
        width: 130px;
        margin-bottom: 20px;
        transition: 0.5s all;
        opacity: 0;
        animation-name: wipe;
        animation-fill-mode: forwards;
        animation-duration: 1s;
        padding: 0 20px 20px;
    }

    @keyframes wipe {
        from {
            opacity: 0;
            padding: 0 20px 20px;
        }

        to {
            opacity: 1;
            padding: 0 0px 0px;
        }
    }

    .common-loading h1 {
        font-size: 25px;
        color: #27a3a3;
    }

    .common-loading small {
        font-size: 22px;
        color: #27a3a3;
        display: block;
    }

    .display {
        display: none;
    }

    .js-inview {
        opacity: 0;
        transform: translateY(60px);
        transition: all 1s;
    }

    .inview {
        opacity: 1;
        transform: translateY(0);
        transition: all 1s;
    }

    .js-inview2 {
        opacity: 0;
    }

    .js-inview2.tlt {
        opacity: 1;
    }

    .main {}

    .main img {
        max-width: 100%;
    }

    .left-sidebar {
        width: 300px;
        background: #0FC2C0;
        height: 100vh;
        position: fixed;
        left: -300px;
        top: 0;
        font-size: 0.9rem;
        z-index: 13;
    }

    .left-sidebar.active {}


    .right-sidebar {
        width: 50px;
        background: #023535;
        height: calc(100vh - 50px);
        position: fixed;
        right: -50px;
        top: 0;
        color: white;
        writing-mode: vertical-rl;
        letter-spacing: 2px;
        z-index: 13;
        font-size: 15px;
        display: none;
        transition: 0.5s all;
        padding-top: 20px;
    }

    .right-sidebar.active {
        right: 0;
        transition: 0.5s all;
        z-index: 13;
    }

    .right-sidebar::-webkit-scrollbar {
        background: transparent;
        width: 0px;
        height: 5px;
        border-radius: 10px;
    }

    .right-sidebar::-webkit-scrollbar-thumb {
        background-color: #023535;
        border-radius: 10px;
    }

    .right-sidebar::-webkit-scrollbar-thumb:hover {
        background-color: #023535;
        border-radius: 10px;
    }

    .right-sidebar .menu {
        width: 30px;
        height: 23px;
    }

    .right-sidebar ul {
        display: flex;
        width: 50px;
        justify-content: space-around;
        padding: 20px 0;
    }

    .right-sidebar ul li {
        display: flex;
        align-items: center;
        position: relative;
        padding-bottom: 20px;
        justify-content: flex-start;
    }

    .right-sidebar ul li:after {
        content: "";
        background: url(../../assets/images/icon-sideline.png);
        background-size: 50px;
        background-repeat: repeat-x;
        position: absolute;
        bottom: -18px;
        right: 0px;
        width: 50px;
        height: 2px;
    }

    .right-sidebar ul li:before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        top: -25px;
        background: url('../../assets/images/icon-ball.png');
        background-size: contain;
    }

    .right-sidebar ul li a {
        display: flex;
        align-items: center;
        padding: 0px 16px 0px;
        justify-content: flex-start;
    }

    .right-sidebar ul li:hover:before {
        opacity: 0.9;
        ;
    }

    .right-sidebar ul li a:hover {
        color: #DDCD0E;
    }

    .right-sidebar ul li a img {
        margin-top: 5px;
    }

    .left-sidebar-1 .logo {
        width: 35px;
        margin: 10px 7px;
    }

    .left-sidebar-1 {
        width: 0px;
        background: #023535;
        color: white;
        height: 100vh;
        overflow-y: scroll;
        position: fixed;
        left: -300px;
        top: 0;
        transition: 0.5s all;
    }

    .left-sidebar.active .left-sidebar-1 {
        left: 0;
    }

    .left-sidebar-1.active+.left-sidebar-2 {
        left: 285px !important;
    }

    .left-sidebar-1::-webkit-scrollbar {
        background: transparent;
        width: 0px;
        height: 5px;
        border-radius: 10px;
    }

    .left-sidebar-1::-webkit-scrollbar-thumb {
        background-color: #023535;
        border-radius: 10px;
    }

    .left-sidebar-1::-webkit-scrollbar-thumb:hover {
        background-color: #023535;
        border-radius: 10px;
    }

    .left-sidebar-1 img {
        width: 25px;
        margin-right: 25px;
    }

    .left-sidebar-1 ul {
        padding-left: 10px;
        padding-right: 20px;
    }

    .left-sidebar-1 ul li {
        padding: 15px 0;
        position: relative;
        padding-left: 40px;
    }

    .left-sidebar-1 ul li:before {
        position: absolute;
        left: 2px;
        width: 27px;
        height: 27px;
        top: 10px;
        content: "";
    }

    .left-sidebar-1 ul li:nth-child(1):before {
        background: url(../../assets/images/icon-course.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(1):hover:before {
        background: url(../../assets/images/icon-course-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(2):before {
        background: url(../../assets/images/icon-info.png);
        background-size: 25px;
        background-repeat: no-repeat;
        top: 11px;
    }

    .left-sidebar-1 ul li:nth-child(2):hover:before {
        background: url(../../assets/images/icon-info-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(3):before {
        background: url(../../assets/images/icon-quarity.png);
        background-size: 25px;
        background-repeat: no-repeat;
        top: 15px;
    }

    .left-sidebar-1 ul li:nth-child(3):hover:before {
        background: url(../../assets/images/icon-quarity-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(4):before {
        background: url(../../assets/images/icon-dress.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(4):hover:before {
        background: url(../../assets/images/icon-dress-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(5):before {
        background: url(../../assets/images/icon-practice.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(5):hover:before {
        background: url(../../assets/images/icon-practice-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(6):before {
        background: url(../../assets/images/icon-monster.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(6):hover:before {
        background: url(../../assets/images/icon-monster-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(17):before {
        background: url(../../assets/images/icon-family.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(17):hover:before {
        background: url(../../assets/images/icon-family-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(7):before {
        background: url(../../assets/images/icon-privacy.png);
        background-size: 23px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(7):hover:before {
        background: url(../../assets/images/icon-privacy-g.png);
        background-size: 23px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(8):before {
        background: url(../../assets/images/icon-staff.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(8):hover:before {
        background: url(../../assets/images/icon-staff-g.png);
        background-size: 25px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:nth-child(9):before {
        background: url(../../assets/images/icon-link.png);
        background-size: 20px;
        background-repeat: no-repeat;
        left: 3px;
    }

    .left-sidebar-1 ul li:nth-child(9):hover:before {
        background: url(../../assets/images/icon-link-g.png);
        background-size: 20px;
        background-repeat: no-repeat;
    }

    .left-sidebar-1 ul li:hover {
        color: #DDCD0E;
    }

    .left-sidebar-1 ul li:after {
        content: "";
        background: url(../../assets/images/icon-sideline.png);
        background-size: 50px;
        background-repeat: repeat-x;
        position: absolute;
        bottom: 0;
        left: -12px;
        width: 300px;
        height: 2px;
    }

    .left-sidebar-2 {
        width: 270px;
        height: 100vh;
        overflow-y: scroll;
        position: fixed;
        left: -270px;
        top: 0;
        background: #0FC2C0;
        transition: 0.5s all;
        color: white;
        text-align: center;
        padding-bottom: 60px;
    }

    .left-sidebar.active .left-sidebar-2 {
        left: 0px;
    }

    .left-sidebar-2::-webkit-scrollbar {
        background: transparent;
        width: 0px;
        height: 5px;
        border-radius: 10px;
    }

    .left-sidebar-2::-webkit-scrollbar-thumb {
        background-color: #0FC2C0;
        border-radius: 10px;
    }

    .left-sidebar-2::-webkit-scrollbar-thumb:hover {
        background-color: #0FC2C0;
        border-radius: 10px;
    }

    .left-sidebar-1:hover~div {
        left: 285px;
        transition: 0.5s all;
    }

    .left-sidebar-2 .access {
        color: white;
        text-align: left;
        padding-bottom: 5px;
        text-align: right;
        padding-right: 5px;
    }

    .left-sidebar-2 .access img {
        height: 14px;
        margin-bottom: 3px;
        margin-right: 5px;
    }

    .left-sidebar-2 .access p {
        line-height: 21px;
        padding: 0 6px 0 10px;
        margin: 3px 0;
        font-size: 0.8rem;
    }

    .left-sidebar-2 .access p span {
        margin-right: 5px;
        font-family: monospace;
        font-size: 0.8rem;
    }

    .left-sidebar-2 .member {
        padding: 0 20px;
    }

    .left-sidebar-2 .member img {
        width: 17px;
        margin-right: 10px;
    }

    .left-sidebar-2 .member b {
        margin: 20px 0;
        background: #015958;
        display: block;
        border-radius: 5px;
        font-size: 0.9rem;
        line-height: 24px;
        box-shadow: 1px 1px 3px #474747;
    }

    .left-sidebar-2 .member b a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        padding: 7px 10px;
        transition: 0.3s ease-in-out;
        border-radius: 5px;
    }

    .left-sidebar-2 .member b a:hover {
        background: #008f8c;
    }

    .left-sidebar-2 .member b a:before,
    .left-sidebar-2 .member b a:after {
        box-sizing: inherit;
        content: "";
        position: absolute;
        border: 2px solid transparent;
        width: 0;
        height: 0;
    }

    .left-sidebar-2 .member b a:before {
        top: 0;
        left: 0;
    }

    .left-sidebar-2 .member b a:after {
        bottom: 0;
        right: 0;
    }

    .left-sidebar-2 .member b a:hover:before,
    .left-sidebar-2 .member b a:hover:after {
        width: 100%;
        height: 100%;
    }

    .left-sidebar-2 .member b a:hover:before {
        border-top-color: #e2b65b;
        border-right-color: #e2b65b;
        transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
        border-radius: 5px;
    }

    .left-sidebar-2 .member b a:hover:after {
        border-bottom-color: #e2b65b;
        border-left-color: #e2b65b;
        border-radius: 5px;
        transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
    }

    .left-sidebar-2 .side-facebook {
        overflow: hidden;
        margin-top: 10px;
    }

    .left-sidebar-2 .side-facebook iframe {
        margin-top: -69px;
    }

    .left-sidebar-2 .event {
        text-align: right;
        padding: 35px 25px 20px;
        font-size: 0.8rem;
        line-height: 2;
        border-bottom-width: 2px;
        border-top-width: 2px;
        border-color: #008F8C;
        border-style: solid;
        transition: 0.5s all;
    }

    .left-sidebar-2 .event h2 {
        text-align: center;
        position: relative;
        font-size: 15px;
        color: white;
        margin-bottom: 18px;
        z-index: 2;
        border-width: 1px;
        border-radius: 3px;
    }

    .left-sidebar-2 .event h2:after {}

    .left-sidebar-2 .event {
        text-align: justify;
        height: 85px;
        overflow: hidden;
        transition: 0.5s all;
    }

    .left-sidebar-2 .event.active {
        text-align: justify;
        height: auto;
        transition: 0.5s all;
    }

    .left-sidebar-2 .event ul li {
        position: relative;
        padding-left: 17px;
        transition: 0.5 all;
    }

    .left-sidebar-2 .event ul li:hover {
        text-decoration: underline;
        color: #DDCD0E;
        transition: 0.5 all;
    }

    .left-sidebar-2 .event ul li:before {
        content: "・";
        position: absolute;
        width: 5px;
        height: 5px;
        top: 0px;
        left: 0px;
    }

    .left-sidebar-2 .club-info {
        text-align: right;
        padding: 35px 10px 20px;
        font-size: 0.8rem;
        line-height: 2;
        border-bottom-width: 2px;
        border-color: #008F8C;
        border-style: solid;
        transition: 0.5s all;
    }

    .left-sidebar-2 .club-info h2 {
        text-align: center;
        position: relative;
        font-size: 15px;
        color: white;
        margin-bottom: 18px;
        z-index: 2;
        border-width: 1px;
        border-radius: 3px;
    }

    .left-sidebar-2 .club-info h2:after {}

    .left-sidebar-2 .club-info {
        text-align: justify;
        height: 85px;
        overflow: hidden;
        transition: 0.5s all;
    }

    .left-sidebar-2 .club-info.active {
        text-align: justify;
        height: auto;
        transition: 0.5s all;
    }

    .left-sidebar-2 .club-info ul li {
        position: relative;
        padding-left: 17px;
        transition: 0.5 all;
    }

    .left-sidebar-2 .club-info ul li:hover {
        text-decoration: underline;
        color: #DDCD0E;
        transition: 0.5 all;
    }

    .left-sidebar-2 .club-info ul li:before {
        content: "・";
        position: absolute;
        width: 5px;
        height: 5px;
        top: 0px;
        left: 0px;
    }

    .left-sidebar-2 .logo2 {
        width: 70px;
        margin-bottom: 20px;
    }

    .font-size-inner {
        padding: 20px 10px;
    }

    .font-size-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 25px;
    }

    .font-size-inner p {
        font-size: 12px;
        color: #023535;
        margin-right: 14px;
    }

    .font-size-inner .left.is_active {
        background: #023535;
        border-radius: 5px 0 0 5px;
        padding: 5px 10px;
        border-width: 0.5px;
        border-color: #023535;
        width: 63px;
        cursor: pointer;
        font-size: 14px;
        color: white;
    }

    .font-size-inner .right {
        color: #023535;
        border-radius: 0 5px 5px 0;
        padding: 5px 10px;
        border-width: 0.5px;
        border-color: #023535;
        background: white;
        width: 63px;
        cursor: pointer;
        font-size: 14px;
        font-family: 'myfont-bold';
    }

    .font-size-inner .left {
        color: #023535;
        border-radius: 5px 0px 0px 5px;
        padding: 5px 10px;
        border-width: 0.5px;
        border-color: #023535;
        background: white;
        width: 63px;
        cursor: pointer;
        font-size: 14px;
    }

    .font-size-inner .right.is_active {
        background: #023535;
        border-radius: 0px 5px 5px 0px;
        padding: 5px 10px;
        border-width: 0.5px;
        border-color: #023535;
        width: 63px;
        cursor: pointer;
        font-size: 14px;
        font-family: 'myfont-bold';
        color: white;
    }

    .other-link {
        display: flex;
        background: white;
        justify-content: center;
        align-items: center;
        padding: 20px 5px;
    }

    .other-link .gora img {
        width: 70px;
        margin: 10px;
    }

    .other-link .line img {
        width: 105px;
        margin: 10px;
    }

    .list-button {
        color: #015958;
        background: white;
        border-radius: 5px;
        padding: 0px 15px;
        display: block;
        margin-top: 10px;
        font-size: 0.8rem;
        transition: .4s all;
        text-align: center;
    }

    .list-button a {
        display: block;
    }

    .list-button:hover {
        background: #015958;
        color: white;
        transition: .4s all;
    }

    .w_bg {
        width: 45% !important;
        background: transparent !important;
        font-family: 'myfont' !important;
    }

    .icon-weather {
        margin-right: -40px !important;
    }

    .weather-api {
        width: 100%;
        display: none;
    }

    .weather-api-smart {
        width: 100%;
        margin-top: 100px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 9;
        padding: 0 10px;
    }

    .weather-api-smart #weather1 {
        border: 0px solid #ccc;
        background: transparent;
    }

    .weather-api-smart #weather2 {
        border: 0px solid #ccc;
        background: transparent;
    }

    .weather-api-smart #weather2 ul li {
        border: 0px solid #ccc;
    }

    .weather-api-smart #weather1 img {
        display: block;
        position: absolute;
        top: 100px;
        left: 70px;
    }

    .weather-api-smart .max_temp {
        display: block !important;
    }

    .weather-api-smart #weather2 .icon {
        width: auto !important;
    }

    #weather2 .icon {
        width: 50px !important;
    }

    #weather1 img {
        position: relative;
        display: none;
    }

    .sep {
        display: flex;
        justify-content: flex-end;
    }

    .weather-wrapper {
        box-shadow: rgba(17, 194, 192, 0.1);
        font-family: 'myfont' !important;
    }


    #weather1 {
        border: 0px solid #ccc;
        background: rgba(17, 194, 192, 0.1);
    }

    #weather2 ul {
        display: flex;
        justify-content: space-between;

    }

    #weather2 li {
        background: rgba(17, 194, 192, 0.1);
        border: 0px;
        font-family: 'myfont' !important;
    }

    .w_title {
        font-family: 'myfont' !important;
    }

    .fa.fa-caret-up {
        font-family: 'myfont' !important;
        font-weight: normal !important;
    }

    .weather-c-name {
        font-size: 7px;
        color: #a4a4a4;
        padding-right: 5px;
    }

    .main {
        width: 100%;
        overflow: hidden;
    }

    .main-contents {
        width: 100%;
        position: relative;
        top: 0;
        background: #0CABA8;
        min-height: 100vh;
    }

    .main-contents::-webkit-scrollbar {
        background: transparent;
        width: 0px;
        height: 5px;
        border-radius: 10px;
    }

    .main-contents::-webkit-scrollbar-thumb {
        background-color: #023535;
        border-radius: 10px;
    }

    .main-contents::-webkit-scrollbar-thumb:hover {
        background-color: #023535;
        border-radius: 10px;
    }

    .main-contents img {
        max-width: 100%;
    }

    .hero img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .hero {
        text-align: center;
        padding-top: 30vh;
        height: 100vh;
    }

    .hero video {
        position: fixed;
        left: -50vw;
        top: 0;
        width: auto;
        z-index: 0;
        height: 100%;
        right: 0;
    }

    .hero h2 {
        text-align: center;
        display: inline-block;
        font-family: 'myfont-robo';
        color: white;
        font-size: 26px;
        position: relative;
        z-index: 3;
        padding: 0 20px;
    }

    .black-sheet {
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0;
        z-index: 1;
        background: #6b9178;
        opacity: 0.4;
    }

    .hero h2 img:nth-child(1) {
        display: block;
        position: relative;
        width: 125px;
        margin: 0 auto;
        margin-bottom: 25px;
    }

    .hero h2 img:nth-child(2) {
        display: block;
        position: relative;
        width: 595px;
        margin: 0 auto;
    }

    .weather {}

    .client {
        padding: 10px 0;
        background: #022424;
        position: relative;
    }

    .client li {
        margin: 0 10px;
    }

    .today-info {
        background: url(../../assets/images/img-today-info-back.png) #11c2c0;
        background-size: 90%;
        background-repeat: no-repeat;
        text-align: center;
        padding-top: 100px;
        background-position: center;
        padding-bottom: 100px;
        position: relative;
    }

    .today-info h2 {
        font-family: 'myfont-robo';
        color: white;
        font-size: 30px;
        margin-bottom: 15px;
        letter-spacing: 2px;
        font-weight: bold;
    }

    .today-info-contents {
        background: white;
        border-style: solid;
        border-width: 2px;
        border-radius: 5px;
        border-color: #000000;
        padding: 20px 6px 20px 20px;
        margin: 0 10px;
    }

    .today-info-contents .left {}

    .today-info-contents .left h3 {
        font-size: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1.5px;
        padding-bottom: 5px;
    }

    .today-info-contents .left h3 span {
        font-size: 18px;
        width: 60px;
        display: inline-block;
        margin-top: 10px;
    }

    .today-info-contents .left h4 {
        font-size: 80px;
        color: #015958;
        font-family: 'myfont-bold';
    }

    .today-info-contents .right .right-inner {
        position: relative;
    }

    .today-info-contents .right p {
        position: absolute;
        top: -90px;
        left: 60px;
        font-size: 94px;
        color: #015958;
        font-family: "myfont-bold";
    }

    .today-info-contents .right span {
        position: absolute;
        bottom: 23px;
        right: 46px;
        font-size: 35px;
        color: white;
        font-family: 'myfont-bold';
    }

    .today-info-contents .right img {
        width: 390px;
    }

    .today-info h2 img {
        max-width: 920px;
        width: 100%;
    }

    .about {
        background: #076c6a url(../../assets/images/img-clubinfo.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        text-align: center;
        padding-top: 145px;
        background-position: top;
        padding-bottom: 1px;
        position: relative;
    }

    .about h2 {
        color: white;
        font-size: 140%;
        font-weight: bold;
        line-height: 1.3;
        text-align: center;
    }

    .about h2 span {
        display: block;
        font-size: 170%;
    }

    .about h2 img {
        width: 490px;
        display: block;
        margin: 0 auto;
    }

    .about h3 {
        font-size: 18px;
        margin-bottom: 30px;
        font-family: 'myfont-bold';
    }

    .about-contents {
        text-align: justify;
        padding: 50px 20px 0px;
        line-height: 30px;
        color: white;
        margin: 0 auto;
        margin-top: 50px;
    }

    .about-contents h3 {
        text-align: center;
        line-height: 1.2;
        font-weight: bold;
    }

    .about-contents p {
        font-size: 0.8rem;
    }

    .link-button {
        font-size: 15px;
        background: #015958;
        border-color: #015958;
        border-width: 2px;
        color: white;
        padding: 3px 26px;
        border-radius: 4px;
        margin-top: 10px;
        display: inline-block;
        float: right;
        transition: 0.5s all;
    }

    .link-button:hover {
        font-size: 15px;
        color: #015958;
        background: white;
        transition: 0.5s all;
    }

    .link-button a {
        padding: 9px 26px;
        margin: 0 -26px;
    }

    .photo {
        background: #EEEEEF;
        padding: 130px 50px;
        position: relative;
    }

    .photo-wrapper {
        margin-top: 20px;
    }

    .photo-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .photo-contents {
        flex-basis: 50%;
        min-height: 300px;
        position: relative;
        color: white;
        overflow: hidden;
    }

    .photo-content {
        min-height: 300px;
        width: 100%;
        position: absolute;
        top: 0;
    }

    .photo-contents a {
        display: block;
        min-height: 300px;
        z-index: 1;
        position: relative
    }

    .photo-contents:nth-child(1) .photo-content {
        background: url(../../assets/images/img-photo-course.png);
        background-size: cover;
    }

    .photo-contents:nth-child(2) .photo-content {
        background: url(../../assets/images/img-photo-house.png);
        background-size: cover;
    }

    .photo-contents:nth-child(3) .photo-content {
        background: url(../../assets/images/img-photo-eat.png);
        background-size: cover;
    }

    .photo-contents:nth-child(4) .photo-content {
        background: url(../../assets/images/img-photo-other.png);
        background-size: cover;
    }

    .photo-contents p {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 23px;
        text-align: center;
        margin-top: 170px;
        font-family: 'myfont';
    }

    .photo-contents img {
        max-width: 68px;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        margin-top: 120px;
        width: 13%;
    }

    .photo-contents .photo-content {
        transform: scale(1);
        transition: 1s all;
        z-index: -1;
    }

    .photo-contents .photo-content:hover {
        transform: scale(1.1);
        transition: 1s all;
    }

    .photo-contents:nth-child(1) img {
        margin-top: 110px;
    }

    .photo h2 {
        text-align: center;
        font-family: 'myfont-robo';
        font-size: 455%;
        letter-spacing: 7px;
        color: #023535;
    }

    .photo h2 img {
        width: 650px;
    }

    .nation-info {
        padding: 80px 0px;
        background: #076c6a;
        position: relative;
    }

    .nation-info-wrapper {
        max-width: 1400px;
        color: white;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        background: #008F8C;
        padding: 50px 20px;
    }

    .nation-info-wrapper h2 {
        font-size: 22px;
        border-bottom-width: 3px;
        border-color: #DDCD0E;
        border-style: solid;
        padding-bottom: 5px;
        margin-bottom: 20px;
        font-weight: bold;
        text-align: center;
    }

    .nation-info-wrapper p {
        line-height: 2;
        font-size: 0.8rem;
    }

    .nation-info-wrapper h3 {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 20px;
        margin-top: 55px;
    }

    .nation-info-wrapper ul {
        line-height: 2.1;
        text-decoration: underline;
        font-size: 0.8rem;
    }

    .nation-info-wrapper .left {}

    .nation-info-wrapper .right {
        padding: 30px 20px;
        background: white;
    }

    .nation-info-wrapper .right img:nth-child(1) {
        width: 100%;
        max-width: 235px
    }

    .nation-info-wrapper .right img:nth-child(2) {
        width: 100%;
        max-width: 250px;
        padding: 20px 0;
    }

    .bag {
        max-width: 1400px;
        background: white;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        padding: 50px 20px;
        background: white url(../../assets/images/img-bag-back.png);
        background-size: 75px;
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: bottom;
    }

    .bag .left {}

    .bag h2 {
        font-size: 24px;
        line-height: 35px;
        margin-bottom: 30px;
    }

    .bag .left h3 {
        font-size: 20px;
        line-height: 25px;
        margin-bottom: 30px;
        font-weight: bold;
    }

    .bag ul {
        line-height: 2;
        text-decoration: underline;
        text-shadow: 0 0 5px white;
    }

    .bag span {
        padding-top: 5px;
        display: block;
        ;
    }

    .bag .right img {
        max-width: 235px;
    }

    .nation-info-bag {
        display: flex;
        justify-content: center;
        padding: 30px 15px;
        margin-bottom: 100px;
        background: #023535;
        margin-top: -1px;
    }

    .nation-info-bag-inner {
        background: white;
        padding: 20px;
        text-align: center;
    }

    .nation-info-bag img {
        padding: 10px;
    }

    .line-friend {
        background: #015958;
        padding: 100px 20px;
    }

    .line-friend-wrapper {
        background: white;
        margin: 0 auto;
    }

    .line-friend-wrapper .right {
        padding: 30px;
        text-align: center;
    }

    .line-friend-wrapper .left {
        background: white url(../../assets/images/img-line-friend.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 70%;
    }

    .line-friend-wrapper .right h2 {
        font-size: 22px;
        color: #C2990F;
        display: inline-block;
        border-bottom-width: 3px;
        border-color: #008F8C;
        border-style: solid;
        padding-bottom: 5px;
        margin-bottom: 30px;
        float: left;
        line-height: 28px;
        font-weight: bold;
    }

    .line-friend-wrapper .right p {
        line-height: 2;
        text-align: justify;
        overflow: hidden;
        width: 100%;
        max-width: 550px;
    }

    .line-friend-wrapper .right p span {
        color: #30D712;
    }

    .line-friend-wrapper .right b {
        background: #30D712;
        color: white;
        display: inline-block;
        padding: 3px 26px 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        border-width: 2px;
        border-color: #30D712;
        transition: 0.5s all;
    }

    .line-friend-wrapper .right b:hover {
        color: #30D712;
        background: rgb(226, 255, 225);
        display: inline-block;
        transition: 0.5s all;
    }

    .line-friend-wrapper .right b a {
        padding: 10px 26px;
        margin: 0 -26px;
        font-weight: bold;
    }

    .line-friend-wrapper .right b img {
        width: 23px;
        margin-left: 10px;
        margin-bottom: -3px;
        margin-top: 3px;
    }

    footer {
        position: relative;
        margin-bottom: 60px;
    }

    .footer-wrapper {}

    .footer-wrapper .left {

        background: white;
        padding-bottom: 30px;
    }

    .footer-wrapper .left img {
        width: 100%;
    }

    .footer-wrapper .left .logo3 {
        max-width: 520px;
        margin: 30px 0 5px;
    }

    .footer-wrapper .right {}

    .footer-wrapper .right iframe {
        width: 100%;
        height: 100%;
    }

    .footer-inner {
        padding: 0 30px;
        line-height: 30px;
    }

    .footer-inner span {
        padding: 0px 17px;
        display: inline-block;
        border-style: solid;
        border-radius: 2px;
        border-width: 1px;
        font-size: 0.7rem;
        line-height: 1.9;
    }

    .footer-inner span:nth-child(2) {
        background: #008F8C;
        border-color: #008F8C;
        color: white;
    }

    .footer-inner span:nth-child(3) {
        background: #015958;
        border-color: #015958;
        color: white;
        margin: 0 5px;
    }

    footer b {
        display: block;
        text-align: center;
        color: white;
        padding: 15px;
        background: #015958;
        font-size: 0.8rem;
        padding-bottom: 25px;
    }

    footer b a {
        text-decoration: underline;
        margin-top: 10px;
        display: block;
    }

    footer small {
        background: #023332;
        display: block;
        text-align: center;
        padding: 5px 20px;
        color: white;
    }

    .footer-inner span:nth-child(4) {
        background: white;
        border-color: #707070;
        margin: 0 5px 0 0;
    }

    footer .news {
        position: fixed;
        right: 60px;
        bottom: 0px;
        z-index: 2;
    }

    footer .news img {
        width: 200px;
    }

    footer .news-title {
        margin-bottom: 20px;
        cursor: pointer;
    }

    footer .news-contents {
        height: 0;
        width: 250px;
        transition: 1s all;
        display: none;
        opacity: 0;
    }

    footer .news-contents.active {
        transition: 1s all;
        width: auto;
        height: auto;
        display: block;
        opacity: 1;
        height: 500px;
        width: 340px;
    }

    .balloon {
        display: none;
    }

    .right-sidebar ul li:hover .balloon {
        display: flex;
        align-items: center;
        position: absolute;
        max-width: 300px;
        margin-right: 15px;
        padding: .8em 1.2em;
        border: 3px solid #517807;
        border-radius: 5px;
        background-color: #fff;
        color: #287c04;
        left: -305px;
        writing-mode: horizontal-tb;
        font-size: 0.8rem;
        top: -21px;
    }

    .balloon::before,
    .balloon::after {
        position: absolute;
        right: -15px;
        width: 15px;
        height: 30px;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        content: '';
    }

    .balloon::before {
        background-color: #517807;
    }

    .balloon::after {
        right: -11px;
        background-color: #fff;
    }

    .course-title-box {
        height: 450px;
        text-align: center;
        width: 100%;
        background-position: center;
    }

    .course-title-box.all {
        background: white url(../../assets/images/img-course-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position-y: bottom;
        background-position: center;
    }

    .course-title-box.contact {
        background: white url(../../assets/images/img-contact-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position-y: center;
        background-position-x: center;
    }

    .course-title-box h1 {
        font-size: 29px;
        color: white;
        padding: 250px 10px 0 10px;
    }

    .course-title-box h1 span {
        font-size: 19px;
        line-height: 40px;
        display: block;
        margin-top: 5px;
    }

    .course-wrapper {
        background: white;
        padding: 80px 10px;
        text-align: center;
        color: #023535;
    }

    .course-wrapper h2 {
        color: #023535;
        font-size: 30px;
        line-height: 77px;
        margin-bottom: 80px;
    }

    .course-map-all {
        margin-bottom: 150px;
    }

    .course-map-all img {
        width: 100%;
        max-width: 900px;
    }

    .course-late {
        margin-top: 50px;
    }

    .course-late img {
        width: 100%;
        padding: 5px;
    }

    .course-inner {
        padding-bottom: 100px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .title-section {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }

    .title-section h3 {
        font-size: 22px;
        line-height: 48px;
        border-bottom-width: 2px;
    }

    .title-section.hole {
        align-items: flex-end;
    }

    .title-section.hole h3 {
        font-size: 30px;
        line-height: 55px;
        border-bottom-width: 2.4px;
    }

    .title-section.hole h3 span {
        font-size: 55px;
        line-height: 65px;
        margin-right: 15px;
    }

    .title-section img {
        height: 50px;
    }

    .course-contents {

        margin: 0 auto;
    }

    .course-contents.all {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    .course-contents.all a {
        width: 49%;
    }

    .course-contents img {
        flex-basis: calc(100% / 3);
        padding: 7px;
    }

    .course-title-box.hole1 {
        background: white url(../../assets/images/img-course-1-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole2 {
        background: white url(../../assets/images/img-course-2-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole3 {
        background: white url(../../assets/images/img-course-3-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole4 {
        background: white url(../../assets/images/img-course-4-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole5 {
        background: white url(../../assets/images/img-course-5-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole6 {
        background: white url(../../assets/images/img-course-6-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole7 {
        background: white url(../../assets/images/img-course-7-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole8 {
        background: white url(../../assets/images/img-course-8-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole9 {
        background: white url(../../assets/images/img-course-9-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole10 {
        background: white url(../../assets/images/img-course-10-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole11 {
        background: white url(../../assets/images/img-course-11-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole12 {
        background: white url(../../assets/images/img-course-12-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole13 {
        background: white url(../../assets/images/img-course-13-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole14 {
        background: white url(../../assets/images/img-course-14-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole15 {
        background: white url(../../assets/images/img-course-15-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole16 {
        background: white url(../../assets/images/img-course-16-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole17 {
        background: white url(../../assets/images/img-course-17-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.hole18 {
        background: white url(../../assets/images/img-course-18-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-contents .left {}

    .course-viede {
        padding: 50px 0;
    }

    video {
        width: 100%;
    }

    .course-contents .left img {
        width: 100%;
        max-width: 100%;
    }

    .course-contents .right {
        text-align: left;
    }

    .course-contents .right p {
        padding: 0 10px;
        text-align: justify;
    }

    .course-contents .right img {
        margin: 50px 0;
    }

    .course-contents .right h4 {
        font-size: 28px;
        line-height: 37px;
        color: #008F8C;
        display: inline-block;
        margin-right: 20px;
        width: 70px;
    }

    .course-contents .right ul {
        display: flex;
    }

    .course-contents .right ul li {
        margin: 5px;
        border-style: solid;
        border-width: 1px;
        border-radius: 50px;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #008F8C;
    }

    .course-contents .right ul li a {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 50px;
    }

    .course-contents .right ul li a:hover {
        background: #008F8C;
        color: white;
    }

    .course-contents .right ul .active {
        background: #008F8C;
        color: white;
    }

    .other-course-link-box {
        display: flex;
        padding: 10px 5px;
        max-width: 480px;
        flex-wrap: wrap;
    }

    .mc-main .my-calendar-navigation li,
    .mc-main .my-calendar-navigation ul {
        border-width: 0;
    }

    .other-course-link-box.first {
        margin-top: 50px;
        border-style: solid;
        border-bottom-width: 2px;
        position: relative;
        border-color: #023332;
    }

    .other-course-link-box.first:after {
        position: absolute;
        content: "⚫︎";
        font-size: 17px;
        right: -5px;
        bottom: -10px;
    }

    .course-button {
        text-align: center;
        margin-top: 80px;
    }

    .course-button b {
        padding: 15px 30px;
        background: #015958;
        border-radius: 5px;
        color: white;
    }

    .tabs {
        margin: 10px auto;
        position: relative;
        background: white;
    }

    .tab-buttons span {
        font: 400 14px 'open sans', sans-serif;
        color: white;
        background: #008F8C;
        cursor: pointer;
        border-bottom: 2.5px solid #023332;
        display: block;
        float: left;
        text-align: center;
        height: 40px;
        line-height: 40px;
        width: 25%;
    }

    .tab-buttons span:nth-child(1) {
        border-left-width: 0;
    }

    .tab-buttons span:nth-child(4) {
        border-right-width: 0;
    }

    .tab-content {
        padding: 15px 0;
        background: white;
        display: inline-block;
        width: 100%;
    }

    #lamp {
        width: 25%;
        height: 2.5px;
        background: #ff3e3e;
        display: block;
        position: absolute;
        top: 37.5px;
        transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
    }

    #lamp.content2 {
        left: calc(25% - 2px);
        transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
    }

    #lamp.content3 {
        left: calc(50% - 5px);
        transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
    }

    #lamp.content4 {
        left: 75%;
        transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
    }

    #lamp.content1 {
        left: 1px;
        transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
    }

    .galerry-photo {
        display: flex;
        flex-wrap: wrap;
    }

    .galerry-photo .smoke-wrapper {
        height: 250px;
        overflow: hidden;
    }

    .galerry-photo .smoke-wrapper img {
        width: auto;
        height: 150px;
    }

    .galerry-photo .modalContents {
        text-align: center;
    }

    .galerry-photo .modalContents img {
        width: 108%;
        height: auto;
    }

    .galerry-photo .galerry-photo-contents {
        flex-grow: 1;
        object-fit: cover;
        position: relative;
        width: 100%;
    }

    .galerry-photo-contents .smoke-wrapper .smoke {
        background: none;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        transition: 0.5s all;
    }

    .galerry-photo-contents .smoke-wrapper button {
        display: none;
    }

    .galerry-photo-contents .smoke-wrapper:hover .smoke {
        background: rgba(6, 35, 7, 0.5);
        transition: 0.5s all;
        z-index: 2;
    }

    .galerry-photo-contents .smoke-wrapper:hover button {
        display: inline-block;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        padding: 0 20px;
        background: no-repeat;
        color: white;
        border-width: 0;
        height: 100%;
        line-height: 30px;
        z-index: 10;
    }


    /* モーダルCSS */
    .modalArea {
        display: none;
        position: fixed;
        z-index: 12;
        /*サイトによってここの数値は調整 */
        top: 0px;
        left: 0;
        width: 100%;
        height: 100vh;
    }

    .modalBg {
        width: 100%;
        height: 100vh;
        background-color: rgba(30, 30, 30, 0.9);
    }

    .modalWrapper {
        position: absolute;
        top: 50%;
        left: 4%;
        transform: translate(-2%, -50%);
        padding: 10px 8px;
        background-color: #fff;
        max-height: 98vh;
    }

    .closeModal {
        position: absolute;
        top: 0.5rem;
        right: 1rem;
        cursor: pointer;
        width: 50px;
        height: 50px;
        text-align: right;
        background: white;
        border-radius: 50px;
        padding: 2px;
    }


    /* 以下ボタンスタイル */
    button {
        padding: 10px;
        background-color: #fff;
        border: 1px solid #282828;
        border-radius: 2px;
        cursor: pointer;
    }

    .galerry-wrapper {
        position: relative;
        z-index: 2;
    }

    .galerry-title-box {
        height: 450px;
        text-align: center;
        width: 100%;
    }

    .galerry-title-box {
        background: white url(../../assets/images/img-course-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .galerry-title-box h1 {
        font-size: 29px;
        padding-top: 200px;
        color: white;
    }

    .galerry-title-box h1 span {
        font-size: 30px;
        line-height: 50px;
        display: block;
        margin-top: 5px;
    }

    .galerry-inner {
        background: white;
        padding: 80px 0px;
    }

    .login-title-box {
        height: 450px;
        text-align: center;
        width: 100%;
        background: white url(../../assets/images/img-login-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .galerry-inner p {
        padding: 0 20px;
    }

    .login-title-box h1 {
        font-size: 29px;
        padding-top: 200px;
        color: white;
    }

    .login-title-box h1 span {
        font-size: 30px;
        line-height: 50px;
        display: block;
        margin-top: 5px;
    }

    .login-wrapper {
        background: white;
    }

    .login-inner {
        text-align: center;
        padding: 100px 20px 100px;
    }

    .login-inner h2 {
        font-size: 25px;
        line-height: 35px;
        color: #015958;
        border-bottom-style: solid;
        border-bottom-width: 3px;
        display: inline-block;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .login-inner p {
        font-size: 0.9rem;
        line-height: 1.5;
        text-align: left;
    }

    .login-contents {
        max-width: 300px;
        margin: 0 auto;
        margin-top: 50px;
        border-width: 1px;
        padding: 0 30px 80px;
        border-color: #707070;
        background: #FCFCFC;
        border-radius: 10px;
        position: relative;
        padding-top: 90px;
    }

    .login-contents .login-title {
        position: absolute;
        max-width: 300px;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: -2px;
        width: calc(100% + 2px);
        margin-left: -1px;
        margin-right: -1px;
    }

    .login-input {
        display: flex;
        flex-wrap: nowrap;
        border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        background: #F2F2F2;
        padding: 5px 15px;
        align-items: center;
        margin-bottom: 20px;
        border-color: #707070;
        min-height: 50px;
    }

    .login-input:nth-child(2) {
        background: #FCFCFC;
    }

    .login-input img {
        width: 30px;
        padding-right: 10px;
        border-right-width: 1px;
        border-right-color: #707070;
        margin-right: 10px;
    }

    .login-input input {
        text-align: left;
        padding-left: 10px;
        font-size: 1rem;
        line-height: 1.4;
    }

    .login-input input::placeholder,
    textarea::placeholder {
        color: #9E9E9E;
    }

    /* Edge */
    .login-input input::-ms-input-placeholder,
    textarea::-ms-input-placeholder {
        color: #9E9E9E;
    }

    /* IE11 & IE10 */
    .login-input input:-ms-input-placeholder,
    .login-input textarea:-ms-input-placeholder {
        color: #9E9E9E;
    }

    .login-submit {
        width: 115px;
        background: #0CABA8;
        color: white;
        border-radius: 10px;
        height: 40px;
        float: right;
        margin-top: 20px;
    }

    .login-info {
        max-width: 700px;
        text-align: left;
        margin: 0 auto;
        margin-top: 100px;
        border-width: 1px;
        border-color: #0FC2C0;
        padding: 30px 19px;
        position: relative;
    }

    .login-info h3 {
        font-size: 18px;
        color: #146665;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .login-info p {
        position: relative;
        z-index: 2;
        font-size: 1rem;
        line-height: 1.7;
        padding: 0;
        margin: 0;
        max-width: 530px;
        text-align: justify;
    }

    .login-info img {
        position: absolute;
        right: 0;
        bottom: 0;
        height: auto;
        z-index: 0;
        width: 50px;
    }

    .restaurant-title-box {
        height: 450px;
        text-align: center;
        width: 100%;
        background: white url(../../assets/images/img-restaurant-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .main-contents.restaurant {
        background: white;
    }

    .restaurant-title-box h1 {
        font-size: 29px;
        padding-top: 200px;
        color: white;
    }

    .restaurant-title-box h1 span {
        font-size: 25px;
        line-height: 35px;
        display: block;
        margin-top: 5px;
    }

    .mini-header-wrapper {
        background: white;
        padding: 10px;
        position: sticky;
        top: calc(100vh - 110px);
        z-index: 11;
    }

    .mini-header-wrapper.members {
        position: relative;
        top: 0;
    }

    .mini-header {}

    .mini-header ul {
        display: flex;
        justify-content: center;
    }

    .mini-header-wrapper.members .mini-header ul li {
        font-size: 0.9rem;
    }

    .mini-header ul li {
        color: #015958;
        font-size: 0.7rem;
        line-height: 1.2;
        padding: 6px 6px;
        margin: 2px;
        border-width: 1px;
        border-radius: 5px;
        border-color: #015958;
        text-align: center;
    }

    .restaurant-wrapper h2 {
        font-size: 20px;
        line-height: 33px;
        color: #015958;
        text-align: center;
        padding: 0px 20px 50px 20px;
    }

    .restaurant-info {
        background: #0CABA8;
        color: white;
        padding: 50px 20px;
    }

    .restaurant-info .left {
        flex-basis: 70%;
    }

    .restaurant-info .left h3 {
        font-size: 23px;
        border-bottom-style: solid;
        border-bottom-width: 3px;
        padding-bottom: 5px;
        border-color: #DDCD0E;
        margin-bottom: 30px;
    }

    .restaurant-info .left p {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .restaurant-info .left ul {
        line-height: 1.5;
    }

    .restaurant-info .left img {
        width: 100%;
        max-width: 480px;
    }

    .restaurant-info .right {
        display: flex;
    }

    .restaurant-info .right img {
        max-width: 46%;
        margin: 20px 5px 0;
    }

    .restaurant-menu {
        padding: 50px 20px;
    }

    .restaurant-menu span {
        font-size: 0.9rem;
        display: block;
        line-height: 1.3;
    }

    .restaurant-menu-contents h4 {
        font-size: 20px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 50px 0 30px;
    }

    .restaurant-menu-wrapper {
        margin-bottom: 80px;
        margin-top: 30px;
    }

    .restaurant-menu-contents {
        flex-basis: 47%;
    }

    .restaurant-menu-contents .inner-p {
        justify-content: space-between;
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        margin-bottom: 10px;
        margin-left: 5px;
    }

    .restaurant-menu-contents .inner-p p {
        margin: 0;
    }

    .restaurant-menu-wrapper2 {
        max-width: 920px;
        margin: 0 auto;
        padding-top: 80px;
        margin-top: -80px;
    }

    .restaurant-menu-wrapper2 h4 {
        font-size: 23px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 50px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
    }

    .restaurant-menu-wrapper2 h5 {
        font-size: 16px;
        padding-left: 8px;
        border-left-width: 5px;
        border-left-color: #707070;
        margin: 50px 0 15px;
    }

    .restaurant-menu-wrapper h5 {
        font-size: 18px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #707070;
        margin: 0px 0 15px;
    }

    .restaurant-menu-inner {
        display: flex;
        flex-wrap: wrap;
        max-width: 920px;
        justify-content: space-between;
        margin: 0 auto;
    }

    .restaurant-menu-photo {
        max-width: 430px;
        margin-bottom: 40px;
        width: 100%;
    }

    .menu-photo-img {
        width: 100%;
        height: 280px;
    }

    .restaurant-menu-inner img {
        width: 100%;
    }

    .restaurant-menu-photo .inner-p {
        display: flex;
        justify-content: space-between;
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        padding: 15px 0 0;
        font-size: 0.8rem;
        align-items: center;
    }

    .restaurant-menu-photo .inner-p p {
        margin: 0;
    }

    .restaurant-menu-photo .inner-p p span {
        font-size: 1rem;
    }

    .topping-wrapper {
        display: flex;
        max-width: 920px;
        margin: 0 auto;
        justify-content: space-between;
    }

    .topping-wrapper .inner-p {
        justify-content: space-between;
        border-bottom-style: dashed;
        border-bottom-width: 1px;
        padding: 15px 0 0;
        font-size: 1.1rem;
    }

    .topping-wrapper .inner-p p {
        margin: 0;
    }

    .topping-wrapper .left {
        max-width: 430px;
        margin-bottom: 20px;
        flex-basis: 47%;
    }

    .topping-wrapper .right {
        max-width: 430px;
        margin-bottom: 20px;
        flex-basis: 47%;
    }

    .restaurant-menu-inner3 {}

    .restaurant-menu-wrapper3 {
        padding-top: 80px;
        margin-top: -80px;
    }

    .restaurant-menu-wrapper3 h4 {
        font-size: 28px;
        padding-left: 20px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 50px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
    }

    .restaurant-menu-wrapper3 h5 {
        font-size: 18px;
        padding-left: 17px;
        border-left-width: 5px;
        border-left-color: #707070;
        margin: 50px 0 15px;
    }

    .restaurant-menu-wrapper3 h6 {
        font-size: 1rem;
        line-height: 2;
        color: #D00808;
        font-family: 'myfont';
        font-weight: normal;
    }

    .course-title-box.practice {
        background: white url(../../assets/images/img-practice-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .practice-wrapper {
        text-align: center;
        background: white;
        padding: 150px 20px 1px;
    }

    .practice-coution {
        max-width: 700px;
        padding: 30px 20px;
        margin: 0 auto;
        text-align: left;
        border-style: solid;
        border-width: 1px;
        border-color: #0FC2C0;
        background: white url(../../assets/images/img-bag-back.png);
        background-size: 50px;
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: bottom;
        margin-bottom: 150px;
    }

    .practice-coution h2 {
        font-size: 20px;
        color: #146665;
        padding-bottom: 10px;
        line-height: 1.2;
    }

    .practice-coution p {
        max-width: 530px;
    }

    .practice-contents {
        text-align: left;
        max-width: 960px;
        margin: 0 auto;
    }

    .practice-contents h2 {
        font-size: 18px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 50px 0 20px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        font-weight: bold;
    }

    .practice-content {}

    .practice-content .left,
    .practice-content .right {}

    .practice-contents img {
        margin-bottom: 10px;
    }

    .practice-contents b {
        display: block;
        font-size: 1.1rem;
        text-align: center;
        padding: 30px 0px 30px;
        line-height: 1.5;
        font-weight: bold;
    }

    .practice-contents h3 img {
        width: 50px;
        margin-left: 0;
        position: absolute;
        top: -33px;
    }

    .practice-contents h3 {
        border-bottom-width: 1.5px;
        border-color: #D4AF37;
        border-style: solid;
        padding-bottom: 5px;
        margin-bottom: 150px;
        line-height: 18px;
        margin-top: 30px;
        position: relative;
        font-family: 'myfont', 'Yu Gothic',
            'Hiragino Kaku Gothic ProN',
            'ヒラギノ角ゴ ProN W3',
            sans-serif;
        text-align: justify;
    }

    .practice-contents h3 span {
        color: #D00808;
    }

    .course-title-box.staff {
        background: white url(../../assets/images/img-staff-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .staff-wrapper {
        background: white;
        padding: 150px 10px 50px;
        text-align: center;
    }

    .staff-wrapper h2 {
        color: #015958;
        padding-bottom: 5px;
        border-bottom-width: 2px;
        border-style: solid;
        font-size: 30px;
        display: inline-block;
        padding-left: 10px;
        padding-right: 10px;
    }

    .staff-wrapper h3 {
        font-size: 1.3rem;
        padding: 20px;
        margin-bottom: 150px;
    }

    .staff-contents {
        text-align: left;
        max-width: 960px;
        margin: 0 auto;
        margin-bottom: 80px;
    }

    .staff-contents h2 {
        font-size: 20px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 50px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        color: #000000;
        display: block;
        font-weight: bold;
    }

    .staff-contents table {
        line-height: 2;
        border-width: 1px;
        border-color: #0CABA8;
        width: 100%;
    }

    .staff-contents th {
        background: rgba(15, 194, 191, 0.158);
        padding: 20px 20px 0;
        border-bottom-width: 1px;
        border-color: #0CABA8;
        border-style: solid;
        vertical-align: middle;
        min-width: 190px;
        display: block;
        width: 100%;
        font-size: 1rem;
    }

    .staff-contents td {
        padding: 20px;
        border-bottom-width: 1px;
        border-color: #0CABA8;
        border-style: solid;
        display: block;
        text-align: justify;
    }

    .course-title-box.rate {
        background: white url(../../assets/images/img-courselate-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-rate-wrapper {
        background: white;
        padding: 150px 20px;
        text-align: center;
    }

    .course-rate-wrapper h2 {
        color: #015958;
        font-size: 25px;
        border-bottom-width: 3px;
        display: inline-block;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }

    .pdf-wrapper .pdf-button {
        margin-bottom: 20px;
    }

    .pdf-button p {
        line-height: 1.3;
    }

    .pdf-button a {
        background: #015958;
        color: white;
        border-radius: 5px;
        padding: 1px 15px;
        display: block;
    }

    .rate-mini-header {
        position: sticky;
        top: 0;
        background: white;
        padding: 10px;
        z-index: 11;
    }

    .rate-mini-header ul {
        display: flex;
        justify-content: center;
    }

    .rate-mini-header ul li {
        border-style: solid;
        border-width: 1px;
        border-color: #015958;
        color: #015958;
        padding: 10px 7px;
        font-size: 0.7rem;
        border-radius: 5px;
        margin: 0 2px;
    }

    .course-rate-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .course-rate-box {
        flex-basis: 50%;
        max-width: 430px;
    }

    .modalContents {
        text-align: center;
    }

    .modalContents p {
        text-align: left;
        padding: 0 20px;
        margin-top: -10px;
    }

    .modalContents img {
        height: 80vh;
        width: auto;
    }

    .modalContents img {
        max-width: 100%;
        height: auto;
    }

    .course-rate-wrapper2 {
        background: white;
        padding: 50px 20px;
        text-align: center;
    }

    .course-rate-contents {}

    .course-rate-contents h2 {
        font-size: 18px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 100px 0 0px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        color: #000000;
        display: block;
        text-align: left;
        line-height: 1.3;
    }

    .course-rate-contents h2 span {
        color: #0FC2C0;
        margin-top: 10px;
        font-size: 1rem;
        margin-left: 10px;
    }

    .course-rate-content {
        text-align: left;
    }

    .course-rate-content h3 {
        font-size: 16px;
        padding-left: 3px;
        border-left-color: #707070;
        margin: 0px 3px 15px 3px;
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        padding-bottom: 3px;
    }

    .photo-img {
        position: relative;
    }

    .photo-img button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        background: no-repeat;
        border-style: none;
    }

    .course-title-box.battle {
        background: white url(../../assets/images/img-battle-pg-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .battle-wrapper {
        background: white;
        padding: 150px 10px;
        text-align: center;
    }

    .battle-callender h2 {
        display: inline-block;
        border-bottom-width: 2px;
        padding-bottom: 3px;
        border-bottom-style: solid;
        color: #015958;
        font-size: 25px;
    }

    .my-calendar {}

    .my-calendar .heading:not(.widget .mc-main .heading) {
        margin-bottom: 0px !important;
    }

    .mc-main .my-calendar-navigation>div {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 20px !important;
    }

    .mc-date-container .mc-change-months {
        color: white !important;
        background: #ddcd0f !important;
        width: 40px !important;
        border-radius: 5px !important;
        font-size: 12px !important;
    }

    .mc-date-container.has-month {
        padding: 2px 8px !important;
    }

    .calendar.js-modal.button.button-link.url.summary div {
        line-height: 1.1;
        letter-spacing: -1px;
        font-size: 0.8rem;
    }

    .mc-main .mc-list li.mc-events {
        margin: 30px 0 !important;
    }

    .course-title-box.facilities {
        background: white url(../../assets/images/img-facilities-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 75px;
        background-position: center;
    }

    .facilities-inner h2 {
        font-size: 23px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 150px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        color: #000000;
        display: block;
        text-align: left;
    }

    .facilities-wrapper {
        background: white;
        margin-top: -75px;
        padding: 50px 10px;
    }

    .facilities-wrapper img {
        width: 100%;
    }

    .facilities-2 {
        text-align: center;
        margin-bottom: 30px;
    }

    .facilities-2 .facilities-content {
        flex-basis: 49%;
    }

    .facilities-3 {
        text-align: center;
        margin-bottom: 30px;
    }

    .facilities-3 .facilities-content {
        flex-basis: 32%;
    }

    .my-calendar-modal {
        top: 2vh !important;
        max-height: 96vh !important;
    }

    .weekend {
        background: #f1ffff !important;
    }



    .course-title-box.price {
        background: white url(../../assets/images/img-price-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        margin-bottom: 25px;
        background-position: center;
    }

    .price-wrapper {
        background: white;
        text-align: center;
        padding: 80px 20px;
        margin-top: -100px;
    }

    .price-contents h2 {
        color: #015958;
        font-size: 25px;
    }

    .price-contents h3 {
        color: #015958;
        font-size: 16px;
        margin-top: 30px;
        border-bottom-width: 2px;
        border-style: solid;
        padding-bottom: 5px;
        display: inline-block;
    }

    .price-callender {
        padding-top: 100px;
    }

    .price-callender-wrapper {}

    .price-content {
        margin-top: 10px;
        margin-bottom: 50px;
    }

    .price-content h4 {
        background: #0CABA8;
        color: white;
        font-size: 24px;
        margin-bottom: 10px;
        padding: 3px;
    }

    .price-content a {
        display: block;
        width: 175px;
        margin: 0 auto;
        margin-top: 30px;
        background: #008F8C;
        color: white;
        border-radius: 5px;
        padding: 5px;
    }

    .price-conpetition {}

    .price-conpetition-content h4 {
        font-size: 18px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 150px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        color: #000000;
        display: block;
        text-align: left;
    }

    .price-conpetition-content {
        max-width: 470px;
    }

    .price-conpetition-content img {
        /* max-width: 450px; */
        max-height: 90vh;
    }

    .course-title-box.quality {
        background: white url(../../assets/images/img-quality-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .single-wrapper {
        background: white;
        padding: 100px 10px;
        text-align: center;
    }

    .single-inner h2 {
        background: #008F8C;
        font-size: 18px;
        text-align: center;
        padding: 10px 20px;
        display: inline-block;
        border-radius: 0 0 5px 5px;
        margin-bottom: 50px;
        color: white;
    }

    .single-contents {
        text-align: left;
    }

    .single-inner {
        border-color: #008F8C;
        border-width: 2px;
        border-radius: 5px;
        border-style: solid;
        max-width: 960px;
        margin: 0 auto;
        padding: 0 20px 30px 10px;
    }

    .single-inner ol li h3 {
        font-size: 1.1rem;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #707070;
        margin: 50px 0 15px;
        border-style: dashed;
        border-bottom-width: 1px;
        padding-bottom: 3px;
        border-left-style: solid;
    }

    .single-inner ol {
        counter-reset: count 0;
        margin-bottom: 100px;
    }

    .single-inner ol li {
        position: relative;
        margin-bottom: 70px;
    }

    .single-inner ol li:before {
        content: counter(count) "";
        counter-increment: count 1;
        width: 30px;
        height: 30px;
        border-radius: 50px;
        background: #008F8C;
        position: absolute;
        left: 0px;
        top: -36px;
        color: white;
        font-size: 16px;
        text-align: center;
        line-height: 28px;
    }

    .single-inner ol li .ol-p {
        padding-left: 10px;
        text-align: justify;
    }

    .single-contents .president {
        text-align: right;
        font-size: 24px;
    }

    .single-contents .president span {
        display: block;
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .course-title-box.usage {
        background: white url(../../assets/images/img-usage-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .sub-title {
        font-size: 19px;
        color: #015958;
        border-bottom-style: solid;
        border-bottom-width: 3px;
        padding-bottom: 4px;
        display: inline-block;
        margin-bottom: 50px;
        text-align: left;
    }

    .single-contents h3 {
        font-size: 18px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 50px 0 20px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        color: #000000;
        display: block;
        text-align: left;
        font-weight: bold;
    }

    .single-contents ul {
        line-height: 2;
        list-style: disc;
        padding-left: 20px;
        text-align: justify;
    }

    .course-title-box.monster {
        background: white url(../../assets/images/img-monster-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .single-info {
        padding: 20px;
        margin: 0 auto;
        text-align: left;
        border-style: solid;
        border-width: 1px;
        border-color: #0FC2C0;
        background: white url(../../assets/images/img-bag-back.png);
        background-size: 50px;
        background-repeat: no-repeat;
        background-position-x: right;
        background-position-y: bottom;
        margin-bottom: 150px;
    }

    .single-info h5 {
        font-size: 18px;
        color: #146665;
        padding-bottom: 10px;
        font-weight: bold;
    }

    .single-info p {}

    .single-contents {
        max-width: 960px;
        margin: 0 auto;
    }

    .course-title-box.personal {
        background: white url(../../assets/images/img-personal-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .single-contents h4 {
        font-size: 1rem;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #707070;
        margin: 0px 0 15px;
        border-style: dashed;
        border-bottom-width: 1px;
        padding-bottom: 3px;
        border-left-style: solid;
        text-align: left;
        display: inline-block;
        line-height: 1.5;
    }

    .course-title-box.info {
        background: white url(../../assets/images/img-news-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .news-wrapper {
        background: white;
        padding: 100px 20px;
        text-align: center;
    }

    .news-wrapper h2 {
        font-size: 20px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 0px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        color: #000000;
        display: block;
        text-align: left;
    }

    .news-wrapper h2 span {
        display: block;
        font-size: 0.8rem;
        margin-top: 10px;
    }

    .news-box {
        padding-bottom: 30px;
        margin-bottom: 30px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        justify-content: center;
        display: flex;
        flex-direction: column-reverse;
    }

    .news-box .left {
        width: 100%;
        margin-bottom: 20px;
    }

    .news-box .right {
        padding: 0 0 0 0px;
        text-align: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 8px;
    }

    .news-box .right h4 {
        color: #191919;
        font-size: 15px;
        order: 0;
        margin-bottom: 11px;
    }

    .news-box .right p {
        background: #E9FBFA;
        padding: 5px 20px;
        font-size: 0.9rem;
        text-align: justify;
        line-height: 1.5;
        order: 3;
    }

    .member-wrapper .news-box .right span {
        width: 140px;
        text-align: center;
    }

    .news-box .right span {
        background: #008F8C;
        color: white;
        padding: 4px 10px;
        margin: 0px 0 10px 0;
        display: inline-block;
        border-radius: 3px;
        order: 2;
    }

    .course-title-box.event {
        background: white url(../../assets/images/img-event-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .course-title-box.member {
        background: white url(../../assets/images/img-member-back.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .member-wrapper {
        text-align: center;
        margin: 0 auto;
        background: white;
        padding: 50px 20px 100px;
    }

    .member-wrapper img {
        max-width: 100%;
        width: 100%;
    }

    .member-wrapper h2 {
        font-size: 20px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 0px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        color: #000000;
        display: block;
        text-align: left;
    }

    .member-inner {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
    }

    .logout-button {
        position: absolute;
        right: 10px;
        bottom: 70px;
        background: #f23051;
        color: white;
        border-radius: 5px;
        font-size: 15px;
        display: inline-block;
        padding: 5px 3px;
        border-style: solid;
        border-width: 1px;
        padding-top: 2px;
        border-color: #c40202;
    }

    .member-logout {
        width: 50px;
    }

    .news_content_wrapper {
        font-family: "myfont";
    }

    .logout-button:hover {
        background: white;
        color: #0CABA8;
        border-color: #0CABA8;
    }

    .member-inner table {
        width: 100%;
        border-style: solid;
    }

    .member-inner table .table-title {
        background: #0CABA8;
        color: white;
        padding: 20px;
        text-align: center;
        font-size: 22px;
    }

    .member-inner table th {
        border-style: solid;
        border-color: #0CABA8;
        padding: 0px 0px 0 5px;
        text-align: left;
        width: 85px;
        letter-spacing: -1px;
        vertical-align: bottom;
        border-bottom-width: 1px;
        padding-bottom: 1px;
        padding-top: 10px;
        color: #ffffff;
        font-weight: normal;
    }

    .member-inner table tr:nth-child(1) th {}

    .member-inner table td {
        border-style: solid;
        border-color: #0CABA8;
        padding: 0px 0px;
        text-align: right;
        font-size: 17px;
        border-bottom-width: 1px;
        line-height: 1;
        padding-bottom: 0px;
        padding-top: 10px;
        white-space: nowrap;
    }

    body::-webkit-scrollbar {
        background: transparent;
        width: 0px;
        height: 5px;
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb {
        background-color: #023535;
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb:hover {
        background-color: #023535;
        border-radius: 10px;
    }

    .news-inner {
        max-width: 1200px;
        margin: 0 auto;
    }

    .news-content.result {
        margin-bottom: 100px;
    }

    .news-content-wrapper {
        max-width: 1200px;
        margin: 0 auto;
    }

    .tornament-scheduled {
        max-width: 700px !important;
        margin: 0 auto;
        margin-bottom: 100px;
    }

    .contact-all-wrapper {
        background: white;
        line-height: 27px;
        text-align: center;
        padding: 100px 20px;
    }

    #reserved-switch {
        position: fixed;
        top: 95px;
        font-size: 11px;
        background: #008f8c;
        padding: 10px 5px;
        width: 57px;
        right: 10px;
        text-align: center;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        border-width: 1px;
        border-color: #027573;
    }

    .contact-all-wrapper h2 {
        font-size: 30px;
        line-height: 80px;
        color: #015958;
        margin-bottom: 50px;
    }

    .contact-all-wrapper iframe {
        width: 100%;
        height: 450px;
    }

    .contact-all-wrapper h3 {
        font-size: 20px;
        padding-left: 10px;
        border-left-width: 5px;
        border-left-color: #D4AF37;
        margin: 50px 0 30px;
        border-bottom-width: 1px;
        border-bottom-color: #707070;
        padding-bottom: 3px;
        text-align: left;
    }

    .access-table {
        text-align: left;
        border-color: #0CABA8;
        border-width: 2px;
        border-style: solid;
        width: 100%;
    }

    .access-table th {
        background: #e9fafa;
        padding: 20px 20px 0 20px;
        font-size: 1.1rem;
        border-color: #0CABA8;
        display: block;
        width: 100%;
    }

    .access-table td {
        padding: 20px;
        display: block;
        text-align: justify;
    }

    .access-table .under {
        border-bottom-width: 0px;
        border-color: #0CABA8;
    }

    .contact-wrapper {
        background: white;
        padding: 50px 10px;
        text-align: center;
    }

    .contact-wrapper h2 {
        font-size: 30px;
        line-height: 40px;
        color: #015958;
        margin-bottom: 50px;
        display: inline-block;
        border-bottom-width: 2px;
        padding-bottom: 0px;
        border-style: solid;
        border-color: #015958;
    }

    .contact-wrapper .contact-info {
        text-align: left;
        padding: 0 10px;
    }

    .contact-wrapper .contact-info span {
        color: #008F8C;
    }

    .contact-wrapper .mwform-tel-field input[type="text"],
    .contact-wrapper .mwform-zip-field input[type="text"] {
        display: inline-block;
        width: 75px;
    }

    .contact-table table {
        width: 100%;
        margin-bottom: 50px;
        border-color: #0CABA8;
        border-width: 2px;
        border-style: solid;
    }

    .mw_wp_form {
        text-align: left;
        width: 100%;
    }

    .mw_wp_form th {
        background: #e9fafa;
        padding: 20px;
        font-size: 1.1;
        border-color: #0CABA8;
        border-bottom-width: 1px;
        border-color: #0CABA8;
        display: block;
        width: 100%;
    }

    .mw_wp_form td {
        padding: 20px;
        border-bottom-width: 1px;
        border-color: #0CABA8;
        display: block;
        width: 100%;
    }

    .contact-table table input,
    .contact-table table textarea,
    .captcha-contents input {
        border-width: 1px;
        padding: 5px 20px;
        border-color: #696971;
        border-radius: 3px;
        width: 100%;
    }

    .captcha-contents {
        text-align: center;
        margin-bottom: 50px;
    }

    .captcha-contents input {
        width: 300px;
        margin-top: 20px;
        padding: 15px 20px;
    }

    .captcha-contents img {
        width: 300px;
        margin-bottom: 30px;
    }

    .submit-contents {
        text-align: center;
    }

    .submit-contents input {
        width: 300px;
        background: #008F8C;
        color: white;
        padding: 14px 20px;
        border-radius: 3px;
        box-shadow: 0px 3px 6px #b8b8b8;
        margin-bottom: 70px;
    }

    .top-access {
        background: white url(../../assets/images/img-logo-bk.png);
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 1px;
    }

    .top-logo-title {
        padding: 20px 10px 10px 20px;
    }

    /**
         * ポップアップ
        */
    .information-wrapper {
        position: relative;
        box-sizing: border-box;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 97%;
        line-height: 22px;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 99;
    }

    #popup:before {
        content: "";
        position: absolute;
        background-size: 390px;
        width: 390px;
        height: 25px;
        background-position-y: 0;
        background-repeat: no-repeat;
        right: -5px;
        top: -30px;
    }

    #popup:after {
        content: "";
        position: absolute;
        background-size: 390px;
        width: 390px;
        height: 25px;
        background-position-y: 0;
        background-repeat: no-repeat;
        right: -5px;
        bottom: -30px;
    }

    #popup {}

    .popup_inner {
        padding: 15px 20px 0;
        border-width: 10px;
        border-radius: 5px;
        border-color: #e95d3d;
        background: white;
        min-height: 50vh;
        font-family: "myfont";
    }

    .eraser_button {
        display: block;
        width: 20px;
        line-height: 20px;
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 25px;
        color: #e95d3d;
    }

    .thanks-contents h2 {
        display: block;
        font-size: 14px;
        border-bottom-width: 0;
        margin-bottom: 20px;
    }

    label span:hover {
        cursor: pointer;
    }

    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked~.eraser_button {
        display: none;
    }

    input[type="checkbox"]:checked~#popup {
        display: block;
        transition: .2s;
        display: none;
    }

    .popup_inner h2 {
        text-align: center;
        padding-top: 20px;
    }

    .popup_inner h2 img {
        height: 30px;
    }

    .popup_inner h5 {
        text-align: center;
        font-size: 45px;
        font-weight: bold;
        margin-top: 13px;
        letter-spacing: 4px;
        color: #e95d3d;
    }

    .popup_contents {
        padding: 50px 0px 30px;
        line-height: 25px;
        color: black;
        text-align: left;
    }

    .popup_contents h4 {
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .popup_contents h3 {
        text-align: center;
        background: #e95d3d;
        color: white;
        font-size: 25px;
        line-height: initial;
        padding: 10px 10px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: inline-block;
        font-weight: bold;
    }

    .popup_contents p {
        color: black;
        text-align: left;
    }

    .footer-smart-menu {
        bottom: 0;
        width: 100%;
        position: fixed;
        justify-content: center;
        text-align: center;
        display: flex;
        color: white;
        background: white;
        z-index: 20;
        border-top-width: 3px;
        border-color: #CDDC39;
        font-family: 'myfont';
        font-weight: bold;
        font-size: 16px;
    }

    .footer-smart-menu .left-button {
        padding: 19px 5px;
        background: #0a6c6a;
        width: 50%;
    }

    .footer-smart-menu .right-button {
        padding: 19px 5px;
        background: white;
        width: 100%;
    }

    .footer-smart-menu ul {
        display: flex;
        justify-content: space-around;
        width: 100%;
        padding: 11px 0;
    }

    .footer-smart-menu ul li {
        width: calc(100% / 5);
    }

    .footer-smart-menu ul img {
        height: 35px;
    }

    .mc-main .list-event {
        margin: 0 0 0 0px !important;
    }

    .mc-main .mc-list .mc-events {
        border-bottom-width: 1px;
        border-color: #0c6c6a;
        border-style: solid;
        text-align: left !important;
    }

    .event-date {
        padding-left: 10px !important;
    }

    .mc-main .list-event .event-title {
        padding: 0px !important;
    }

    .my-calendar-navigation {
        margin-top: 50px !important;
    }

    .my-calendar-nav {
        display: none !important;
    }

    .mc-main .category-key li.current a {
        border: 0px solid var(--highlight-dark) !important;
    }

    .list.js-modal.button.button-link.url.summary {
        font-size: 1.1rem !important;
    }

    .my-calendar-modal-close {
        top: 97px !important;
        right: 6px !important;
    }

    dialog.my-calendar-modal #modal-title {
        margin-right: 0px !important;
    }

    .reserved-excel {
        display: block;
        width: 175px;
        margin: 0 auto;
        margin-top: 20px;
        background: #008F8C;
        color: white;
        border-radius: 5px;
        padding: 5px;
    }

    .reserved-excel-wrapper {
        display: flex;
        flex-direction: column-reverse !important;
    }

    .mc-main {
        flex-direction: column;
        display: flex;
    }

    .mc-main .heading {
        order: 0;
    }

    .mc-main .mc-content {
        order: 1;
    }

    .my-calendar-navigation {
        margin-top: 0 !important;
    }

}