﻿body {
    font-family: -apple-system, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, BlinkMacSystemFont, "Helvetica Neue", YuGothic, Arial, "メイリオ", Meiryo, sans-serif;
    color: #202020;
    letter-spacing: 0.1em
}

a {
    color: #202020
}

a:hover {
    color: #202020;
    text-decoration: none
}

a.disabled{
    pointer-events :none;
}


.h1,
h1 {
    /* font-size:3.5rem */
}

.h2,
h2 {
    /* font-size:3rem */
}

.h3,
h3 {
    /* font-size:2rem */
}

h2.fs13 {
    font-size: 1.5rem
}

h3.fs117 {
    font-size: 1.17rem
}

p.fs117 {
    font-size: 1.17rem
}


@media screen and (max-width: 797px) {
    .page-title {
        font-size: 2rem !important
    }

    p{
    font-size: 1.2em;
}
}

sup {
    top: -1em
}

sub,
sup {
    position: relative;
    font-size: 50%;
    line-height: 0;
    vertical-align: baseline
}

@media (min-width: 576px) {
    .home .container {
        max-width: 540px
    }
}

@media (min-width: 768px) {
    .home .container {
        max-width: 720px
    }
}

@media (min-width: 992px) {
    .home .container {
        max-width: 960px
    }
}

@media (min-width: 1200px) {
    .home .container {
        max-width: 960px
    }
}

.mt-4,
.my-4 {
    margin-top: 2.5rem !important
}

.mt-3,
.my-3 {
    margin-top: 1.875rem !important
}

.mt-2,
.my-2 {
    margin-top: 1rem !important
}

.mt-1,
.my-1 {
    margin-top: 0.5rem !important
}

.mb-4,
.my-4 {
    margin-bottom: 2.5rem !important
}

.mb-3,
.my-3 {
    margin-bottom: 1.875rem !important
}

.mb-2,
.my-2 {
    margin-bottom: 1rem !important
}

.mb-1,
.my-1 {
    margin-bottom: 0.5rem !important
}

.mt-m2 {
    margin-top: -2px
}

@media (min-width: 768px) {

    .mb-md-0,
    .my-md-0 {
        margin-bottom: 0 !important
    }

    .mt-md-0,
    .my-md-0 {
        margin-top: 0 !important
    }

    .pl-md-10 {
        padding-left: 10px !important
    }

    .pr-md-10 {
        padding-right: 10px !important
    }

    .pl-md-20 {
        padding-left: 20px !important
    }

    .pr-md-20 {
        padding-right: 20px !important
    }
}

.mb-6 {
    margin-bottom: calc(3rem + 20px)
}

@media (max-width: 767px) {
    .pl-10 {
        padding-left: 10px !important
    }

    .pr-10 {
        padding-right: 10px !important
    }

    .pl-20 {
        padding-left: 20px !important
    }

    .pr-20 {
        padding-right: 20px !important
    }
}

.under-line {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: solid 2px #000000
}

.rounded {
    border-radius: 0.5rem !important
}

.fs-10 {
    font-size: 0.625rem
}

.fs-11 {
    font-size: 0.6875rem;
}

.fs-12 {
    font-size: 0.75rem
}

.fs-14 {
    font-size: 0.77rem
}

.fs-18 {
    font-size: 1.125rem
}

.fs-20 {
    font-size: 1.25rem
}

.fs-24 {
    font-size: 1.5rem
}

.fs-40 {
    font-size: 2.5rem
}

.fs-70 {
    font-size: 4.375rem;
}

.fs-80 {
    font-size: 5rem
}

@media screen and (max-width: 797px) {
    .fs-40 {
        font-size: 1.25rem
    }
}

@media screen and (max-width: 797px) {
    .sp-fs-8 {
        font-size: 0.5rem
    }
}

.ls-m100{
    letter-spacing: -0.1em;
}

.ls-m50{
    letter-spacing: -0.05em;
}

.ls-m40 {
    letter-spacing: -0.04em
}

.ls-0 {
    letter-spacing: 0
}

.ls-50 {
    letter-spacing: 0.05em
}

.ls-100 {
    letter-spacing: 0.1em
}

.palt-1{
    font-feature-settings: "palt" 1;
}

.lh-1 {
    line-height: 1em
}

.lh-12 {
    line-height: 1.2em
}

.lh-14 {
    line-height: 1.4em;
}

.lh-18 {
    line-height: 1.8em
}

.lh-2 {
    line-height: 2em
}

.line-through{
	text-decoration: line-through;
}

.color-blue {
    color: #0046ae
}

.color-skyblue {
    color: #116cb1
}

.color-deepblue {
    color: #1b1464
}

.color-pink {
    color: #e4007f
}

.color-white {
    color: #ffffff
}

.color-yellow {
    color: #fff100
}

.color-red {
    color: #e61019
}

.font-weight-600 {
    font-weight: 600
}

.border-radius-16 {
    border-radius: 16px
}

.border-bottom-solid {
    border-bottom-style: solid
}

.border-top-1 {
    border-top-width: 1px
}

.border-bottom-1 {
    border-bottom-width: 1px
}

.border-bottom-2 {
    border-bottom-width: 2px
}

.border-top-dotted {
    border-top-style: dotted
}

.border-bottom-dotted {
    border-bottom-style: dotted
}

.border-gray {
    border-color: #b2b2b2
}

.border-light-blue {
    border-color: #a8bfde
}

.border-white {
    border-color: #ffffff
}

@media screen and (max-width: 797px) {
    .border-bottom-sp-0 {
        border-bottom-width: 0px
    }
}

.box-blue {
    background-color: #1857b5;
    border-radius: 8px
}

.box-920 {
    max-width: 920px
}

.box-960 {
    max-width: 960px
}

.box-1100 {
    max-width: 1100px
}

.overflow-hidden {
    overflow: hidden
}

.outer-link::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 14px;
    margin-right: 0.8em;
    vertical-align: middle;
    background: left center url(../images/outer-link.png) no-repeat
}

.sun-serif {
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif
}

.bg-gray {
    background-color: #f7f8f8
}

.bg-light-gray {
    background-color: #f1f3f3
}

.bg-light-gray-dotted {
    background-image: url(../images/bg-light-gray-dotted.png)
}

.bg-light-gray-dotted2 {
    background-image: url(../images/bg-light-gray-dotted2.png)
}

.bg-yellow {
    background-color: #ffff00
}

.bg-yellow-dotted {
    background-image: url(../images/bg-yellow-dotted.png)
}

.bg-yellow-striped {
    background-image: url(../images/bg-yellow-striped.png)
}

.bg-red-dotted {
    background-image: url(../images/bg-red-dotted.png)
}

.bg-blue {
    background-color: #0046ae
}

.bg-skyblue {
    background-color: #116cb1
}

.bg-skyblue-dotted {
    background-image: url(../images/bg-skyblue-dotted.png)
}

.bg-darkblue {
    background-color: #0f0964
}

.bg-lightgreen-stripe {
    background-image: url(../images/bg-lightgreen-stripe.png)
}

.bg-pink {
    background-color: #e4007f
}

.bg-pink-dotted {
    background-image: url(../images/bg-pink-dotted.png)
}

.border-yellow {
    width: 100%;
    height: 10px;
    background-color: #fff100
}

.button-blue {
    display: inline-block;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    border: solid 2px #0046ae;
    border-radius: 1.5rem;
    color: #0046ae;
    font-size: 1rem;
    line-height: 2rem;
    font-weight: bold
}

.button-blue:hover {
    background-color: #0046ae;
    color: #ffffff
}

.no-scroll {
    overflow: hidden
}

@media screen and (min-width: 798px) {
    .w-md-880 {
        max-width: 880px
    }

    .px-md-15 {
        padding-right: 15px !important;
        padding-left: 15px !important
    }
}

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

    html,
    body {
        font-size: 12px;
        -webkit-text-size-adjust: 100%
    }

    .fs-80 {
        font-size: 30px
    }

    small,
    .small {
        font-size: 95%
    }

    h1,
    .h1 {
        font-size: 2.5rem
    }

    h2,
    .h2 {
        font-size: 1.7rem
    }

    .h3,
    h3 {
        font-size: 1.4rem
    }

    .img-sp {
        max-width: 25%
    }
}

header {
    position: relative
}

@media screen and (min-width: 798px) {
    header.home-header {
        width: 100%;
        height: 56.94vw;
        background: top center url(../images/main-image-pc.png) no-repeat;
        background-size: cover;
    }

    header.home-header h1 img {
        margin-left: 40px;
        width: 6.94vw;
        min-width: 60px;
        vertical-align: top
    }

    header.home-header img.main {
        position: absolute;
        top: 4.8vw;
        width: 100%
    }

/*  WinnerBnnerVer TitleCss  */
/* header.home-header img.main {
        position: absolute;
        top: -0.2vw;
        width: 100%
    }*/

    header.home-header img.caption {
        position: absolute;
        top: 8vw;
        left: 2vw;
        width: 30vw
    }

    header.home-header img.title {
        position: absolute;
        width: 95vw;
        top: 39.5vw;
        right: 2vw;
    }


/*  WinnerBnnerVer TitleCss  */
    /*header.home-header img.title {
        position: absolute;
        width: 67vw;
        top: 40.5vw;
        right: 2vw;
    }*/

    header.home-header img.winner {
        position: absolute;
        width: 28.3vw;
        top: 22.8vw;
        left: 1vw;
    }

    header.home-header .ticket-button {
        position: absolute;
        top: 4.7vw;
        right: 2.78vw;
        width: 28vw;
    }
}

@media screen and (max-width: 797px) {
    header {
        width: 100%
    }

    header h1 {
        position: absolute !important;
        top: 0;
        left: 0
    }

    header h1 img {
        width: 17.9vw;
        height: auto
    }

    header img.main {
        width: 100%
    }

    header img.caption {
        position: absolute;
        top: 20vw;
        left: 5vw;
        width: 50vw
    }

    header img.title {
        position: absolute;
        width: 95vw;
        top: 105vw;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    }

    header img.winner {
        width: 100%;
    }

    header .ticket-button {
        display: block;
        position: fixed;
        top: 0;
        right: 17.73vw;
        width: 55vw;
        z-index: 9998;
    }

    .sp-title-caption {
        zoom: .7
    }
}

@media screen and (min-width: 798px) {
    .fix-header {
        background-color: #0046ae
    }

    nav {
        display: block !important;
        background-image: url(../images/nav-bg.png);
        padding-top: 30px;
        padding-bottom: 10px
    }

    nav .container-nav {
        width: 77.78vw;
        max-width: 1120px;
        margin-right: auto;
        margin-left: auto
    }

    nav .fix-view {
        display: none
    }

    nav .ticket {
        height: 100%;
        background-color: #be000a
    }

    nav .tcket-page {
        height: 100%;
        background-color: #fff100
    }

    nav.is-fixed {
        position: fixed
    }

    nav.is-fixed,
    nav.loccal-nav {
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.3);
        background: rgba(244, 244, 244, 0.95)
    }

    nav.is-fixed .container-nav,
    nav.loccal-nav .container-nav {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    nav.is-fixed .fix-view.fix-header,
    nav.is-fixed .local-header.fix-header,
    nav.loccal-nav .fix-view.fix-header,
    nav.loccal-nav .local-header.fix-header {
        display: block;
        height: 60px
    }

    nav.is-fixed img.fix-view,
    nav.loccal-nav img.fix-view {
        display: inline-block
    }

    nav.is-fixed .static-view,
    nav.loccal-nav .static-view {
        display: none
    }

    nav.is-fixed .ticket,
    nav.is-fixed .ticket-page,
    nav.loccal-nav .ticket {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 60px;
        line-height: 60px
    }

    nav.is-fixed .fix-sns,
    nav.loccal-nav .fix-sns {
        position: absolute;
        top: 0;
        right: 330px;
        height: 60px;
        padding-top: 20px
    }

    nav.is-fixed a,
    nav.loccal-nav a {
        position: relative
    }

    nav.is-fixed a img.active,
    nav.loccal-nav a img.active {
        display: none
    }

    nav.is-fixed a.current img.normal,
    nav.loccal-nav a.current img.normal {
        display: none
    }

    nav.is-fixed a.current img.active,
    nav.loccal-nav a.current img.active {
        display: inline-block
    }

    nav.is-fixed a.current:after,
    nav.loccal-nav a.current:after {
        content: "";
        position: absolute;
        top: 85px;
        left: calc(50% - 30px);
        border-top: 20px solid rgba(244, 244, 244, 0.95);
        border-right: 30px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 30px solid transparent;
        filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.15))
    }
    nav img.comingsoon-cover{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 15px;
    }
}

@media screen and (max-width: 797px) {
    nav {
        display: none;
        position: fixed;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: #000000;
        z-index: 9998
    }

    nav .container-nav {
        background-color: #0046ae;
    }

        nav a.unable  {
        background-color: #999999;
    }

    nav .container-nav dl {
        margin-bottom: 0
    }

    nav .container-nav dd {
        margin-bottom: 0;
        padding-left: 9.33vw;
        color: #ffffff;
        font-size: 1rem;
        border-bottom: solid 1px #ffffff;
        line-height: calc(13.3vw + 1px)
    }
}

nav img.comingsoon-cover{
    display: none;
}

@media screen and (max-width: 797px) {
    .line-throug{
        text-decoration:line-through;
    }
}

.sp-nav-button {
    position: fixed;
    top: 0;
    right: 0;
    width: 13.3vw;
    height: 13.3vw;
    background-color: #0f0964;
    background-image: url(../images/sp-menu-close.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    z-index: 9999
}

.sp-nav-button.open {
    background-image: url(../images/sp-menu-open.png)
}

.fb_iframe_widget>span {
    vertical-align: baseline !important
}

#news {
    box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.2);
    background-image: url(../images/news-bg.png)
}

@media screen and (min-width: 798px) {
    #news {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 8vw;
        bottom: 0;
    }

    #news img {
        width: 50vw
    }
}

@media screen and (max-width: 797px) {
    #news {
        font-size: 1.25rem;
    	padding: 3vw;
    }
}

#topics .topics-container {
    border-bottom: dotted 1px #b2b2b2
}

#concept {
    background: center url(../images/concept-bg.png) no-repeat;
    background-size: cover
}

@media screen and (min-width: 798px) {
    #concept {
        height: 100vw;
        max-height: 1440px
    }
}

@media screen and (max-width: 797px) {
    #concept {
        padding-bottom: 59vw !important;
        background: bottom center url(../images/concept-bg-sp.png) no-repeat;
        background-size: cover
    }
}

#content .content-content-wrapper {
    background-size: cover;
    background-position: center
}

#content .content-content-wrapper a:hover {
    background-color: rgba(27, 36, 63, 0.5)
}

@media screen and (min-width: 798px) {
    #content{
        /*display:none; PCのみ非表示*/
    }
    #content .content01 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-01.png);
        border-right: solid 1px #ffffff;
        border-bottom: solid 1px #ffffff;
        border-left: solid 1px #ffffff
    }

    #content .content02 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-02.png);
        border-right: solid 1px #ffffff;
        border-bottom: solid 1px #ffffff
    }

    #content .content03 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-03.png);
        border-right: solid 1px #ffffff;
        border-bottom: solid 1px #ffffff;
        border-left: solid 1px #ffffff;
    }

    #content .content04 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-04.png);
        border-right: solid 1px #ffffff;
        border-bottom: solid 1px #ffffff;
    }

    #content .content05 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-05.png);
        border-right: solid 1px #ffffff;
        border-bottom: solid 1px #ffffff;
    }

    #content .content06 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-06.png);
        border-right: solid 1px #ffffff;
        border-left: solid 1px #ffffff;
    }

    #content .content07 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-07.png);
        border-right: solid 1px #ffffff;
        border-right: solid 1px #ffffff;

    }
     #content .content08 {
        height: 15vw;
        background-image: url(../images/content-bg-pc-08.png);
        border-left: solid 1px #ffffff;
    }
}

@media screen and (max-width: 797px) {
    #content .content-content-wrapper {
        height: 44vw;
        border-right: solid 1px #ffffff;
        border-bottom: solid 1px #ffffff;
        border-left: solid 1px #ffffff
    }

    #content .content01 {
        background-image: url(../images/content-bg-sp-01.png)
    }

    #content .content02 {
        background-image: url(../images/content-bg-sp-02.png)
    }

    #content .content03 {
        background-image: url(../images/content-bg-sp-03.png)
    }

    #content .content04 {
        background-image: url(../images/content-bg-sp-04.png)
    }

    #content .content05 {
        background-image: url(../images/content-bg-sp-05.png)
    }

    #content .content06 {
        background-image: url(../images/content-bg-sp-06.png)
    }

    #content .content07 {
        background-image: url(../images/content-bg-sp-07.png)
    }
    #content .content08 {
        background-image: url(../images/content-bg-sp-08.png)
    }
}

/*     coming-soon     */
#content p.coming-soon{
    width: 100%;
    height: 100%;
    color: #ffffff;
    padding-top: 20%;
    font-weight: bold;
    font-size: 1.3em;
    position: absolute;
    text-align: center;
    background-color:rgba(0,0,0,0.5);
}

/* mingol-banner */
.mingol-banner{
    width: 100vw;
}

.mingol-banner img{
    width: 100%;
}

.mingol-banner:hover{
    opacity: 0.8;
}

/*         ticket        */
#ticket {
    background: bottom center url(../images/ticket-bg.png) no-repeat
}

#ticket .ticket-box {
    background: url(../images/ticket-box-bg.png)
}

@media screen and (min-width: 1440px) {
    #ticket {
        background-size: contain
    }
}

@media screen and (min-width: 1900px) {
    #ticket {
        background-size: cover
    }
}

@media screen and (min-width: 798px) {
    .ticket-box-left {
        border-right: dashed 1px #ffffff
    }
}

@media screen and (max-width: 797px) {
    #ticket {
        background-image: url(../images/ticket-bg-sp.png);
        height: inherit;
        max-height: inherit
    }

    .ticket-box-left:after {
        content: "";
        display: block;
        width: 60%;
        padding-top: 1rem;
        margin-right: auto;
        margin-left: auto;
        border-bottom: solid 1px #ffffff
    }
}

#sale .sale-card {
    background-image: url(../images/sale-card-bg.png);
    border-radius: 8px
}

/*          g-shock          */
.g-shock{
    margin: 0;
}

.g-shock .ttl{
}


.g-shock .ttl img{
    width: 100%;
}

.g-shock .txt img{
    max-width: 800px;
    margin: 0 auto;
}

.g-shock img {
    width:100%;
}

.g-shock .howTo .g-shock-btn{
    width: 11vw;
    top: 18vw;
    left: 4vw;
    border-radius: 7px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}

.g-shock .howTo .g-shock-btn:hover{
    transform: translateY(-1px);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
    opacity: 0.8;
}

.g-shock .howTo .g-shock-btn:active{
    transform: translateY(1px);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.4);
}

.g-shock .attention .attention_txt{
    top: 5vw;
    left: 2vw;
    width: 79vw;
    height: 22vw;
    font-size: 1.3vw;
    line-height: 1.5;
    overflow-y: scroll;
}

.g-shock .attention .attention_txt p{
    width:98%;
    background-color: #eeeeee;
}

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

    .g-shock .txt img{
        width: 80vw;
        margin: 0 auto;
    }

    .g-shock .howTo .g-shock-btn{
        width: 41vw;
        top: 61vw;
        left: 13vw;
    }


    .g-shock .attention .attention_txt{
        top: 13vw;
        left: 2vw;
        width: 96vw;
        height: 120vw;
        font-size: 0.8rem;
        line-height: 1.7;
    }
}
/*          schedule         */
@media screen and (max-width: 797px) {
    #schedule .logo1 {
        width: 76px
    }

    #schedule .logo2 {
        width: 98px
    }
}

footer .sponsor img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    vertical-align: inherit
}

p.gotop {
    position: fixed;
    bottom: 0
}

p.gotop a {
    display: block
}

@media screen and (min-width: 798px) {
    p.gotop {
        right: 40px
    }
}

@media screen and (max-width: 797px) {
    .gotop-wrapper {
        height: 80px
    }

    p.gotop {
        left: calc(50% - 40px)
    }
}

.map iframe {
    width: 100%;
    max-width: 1200px;
    min-height: 480px
}

.local-header {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

@media screen and (min-width: 798px) {
    .local-header {
        width: 100%;
        height: 19.44vw;
        margin-top: 60px;
        padding-top: 90px
    }
}

@media screen and (max-width: 797px) {
    .local-header {
        width: 100%;
        height: 56.25vw
    }
}


/*          access         */
@media screen and (min-width: 798px) {
    .about .local-header {
        background-image: url(../images/about-header-image.png)
    }
    .access .local-header {
        background-image: url(../images/access-header-image.png)
    }

    .movie .local-header {
        background-image: url(../images/movie-header-image.png)
    }

    .course .local-header {
        background-image: url(../images/course-header-image.png)
    }

    .playback .local-header {
        background-image: url(../images/champions-header-image.png)
    }

    .player .local-header {
        background-image: url(../images/player-header-image.png)
    }

    .gallery .local-header {
        background-image: url(../images/gallery-header-image.png)
    }

    .highlight .local-header {
        background-image: url(../images/highlight-header-image.png)
    }
}

@media screen and (max-width: 797px) {
    .about .local-header {
        background-image: url(../images/about-header-image-sp.png)
    }
    .access .local-header {
        background-image: url(../images/access-header-image-sp.png)
    }

    .movie .local-header {
        background-image: url(../images/movie-header-image-sp.png)
    }

    .course .local-header {
        background-image: url(../images/course-header-image-sp.png)
    }

    .playback .local-header {
        background-image: url(../images/playback-header-image-sp.png)
    }

    .player .local-header {
        background-image: url(../images/player-header-image-sp.png)
    }

    .gallery .local-header {
        background-image: url(../images/gallery-header-image.png)
    }

    .highlight .local-header {
        background-image: url(../images/highlight-header-image-sp.png)
    }
}

.local-header-en {
    background-color: #ffffff;
    border-radius: 9px
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important
}

/*       graph       */
    .graph{
        max-width: 930px;
        margin: auto;
        margin-bottom: 3%;
        display: flex;
    }

    .graphIN{
        width: 8%;
        font-size: 1.5vw;
        font-weight: bold;
        color: #100a65;
        padding-top: 9%;
        text-align: center;
    }

    .graphOUT{
        width: 8%;
        font-size: 1.5vw;
        font-weight: bold;
        color: #100a65;
        padding-top: 9%;
        text-align: center;
    }

    .graph table{
        margin-right: 0;
        table-layout: fixed;
        word-break: break-word;
    }

    .graph table tr{
        font-weight: bold;
        color:  #100a65;
        font-size: 1.5vw;
    }

    .graph table tr td a{
        display: block;
        width: 100%;
        height: 100%;
    }

    .graph table td.graph_font_out{
        font-size: 1vw;
    }

    .graph table img{
        width: 100%;
    }

    .graph p.category{
        width: 12vw;
        padding-top: 12%;
        vertical-align: middle;
    }

@media screen and (max-width: 798px) {
    .graph{
        display: block;
    }
    .graphIN{
        width: 100%;
        padding-top: 0;
        font-size: 4vw;
        text-align: center;
    }
    .graphOUT{
        width: 100%;
        padding-top: 0;
        font-size: 4vw;
        text-align: center;
    }
    .graph table tr{
        font-size: 2.5vw;
    }
    .graph table td.graph_font{
        font-size: 2.5vw;
    }
    .graph table td.par{
        font-size: 3vw;
    }
    .graph p.category{
        padding-top: 25%;
        font-size: 2.5vw;
    }
}
@media screen and (min-width: 1200px) {
    .graph table td.graph_font{
        font-size: 0.8em;
    }
}

/*        course        */
@media screen and (min-width: 798px) {
    .course-map {
        position: relative;
        margin-top: -170px;
        padding-top: 170px
    }

    #map01 {
        z-index: 18
    }

    #map02 {
        z-index: 17
    }

    #map03 {
        z-index: 16
    }

    #map04 {
        z-index: 15
    }

    #map05 {
        z-index: 14
    }

    #map06 {
        z-index: 13
    }

    #map07 {
        z-index: 12
    }

    #map08 {
        z-index: 11
    }

    #map09 {
        z-index: 10
    }

    #map10 {
        z-index: 9
    }

    #map11 {
        z-index: 8
    }

    #map12 {
        z-index: 7
    }

    #map13 {
        z-index: 6
    }

    #map14 {
        z-index: 5
    }

    #map15 {
        z-index: 4
    }

    #map16 {
        z-index: 3
    }

    #map17 {
        z-index: 2
    }

    #map18 {
        z-index: 1
    }

    .video-box {
        padding-top: 50px;
        padding-right: 34px;
        padding-bottom: 32px;
        padding-left: 34px;
        margin-bottom: 30px
    }

    .video-box .video-title {
        min-height: 292px
    }

    .video-box .video-caption {
        min-height: 6em
    }
}

@media screen and (max-width: 797px) {
    .video-box {
        padding-top: 25px;
        padding-right: 17px;
        padding-bottom: 16px;
        padding-left: 17px;
        margin-bottom: 15px
    }
}

.video {
    cursor: pointer
}

@media screen and (min-width: 798px) {
    .playback-player img {
        position: absolute;
        right: 0;
        bottom: 0
    }

    .playback-player-review {
        background: left 15px top url(../images/playback-player-review-bg.png) no-repeat;
        margin-top: -41px;
        padding-top: 41px
    }
}

.playback-row {
    margin-right: -7px;
    margin-left: -7px
}

.playback-row div {
    padding-right: 7px !important;
    padding-left: 7px !important
}

@media screen and (max-width: 797px) {
    .img-sp-fluid {
        max-width: 100%
    }
}

.player-wrapper {
    /* min-height:59.72vw */
}

.player-left {
    background-color: #f8f7f6
}

.player-right {
    background: center url(../images/player-right-bg.png) no-repeat;
    background-size: cover;
    background-position: top center
}

@media screen and (max-width: 797px) {
   .player-right {
        background: center url(../images/player-right-bg.png) no-repeat;
        background-size: cover;
        background-position: top ;
        background-position-x: 0;
        background-size: 120%;
    }
}

.biography {
    border-collapse: separate;
    border-spacing: 1px;
}

.biography * {
    letter-spacing: 0
}

.biography th,
.biography td {
    padding-top: 1.125rem;
    padding-right: 1.875rem;
    padding-bottom: 1.125rem;
    padding-left: 1.875rem
}

.biography th {
    background-color: rgba(0, 71, 184, 0.65);
    color: #ffffff;
    font-weight: normal
}

.biography td {
    background-color: rgba(255, 255, 255, 0.8)
}

@media screen and (min-width: 798px) {
    .biography {
        position: absolute;
        bottom: 40px
    }
}

@media screen and (max-width: 798px){
    .biography {
        width: 45vw;
    }
    .biography th,
    .biography td {
        padding-top: 2vw;
        padding-right: 0;
        padding-bottom: 2vw;
        padding-left: 1.5vw
}
}

.number {
    background: linear-gradient(#fff 0%, #fff 15.97vw, transparent 15.97vw), url(../images/bg-yellow-dotted.png)
}

.Rank{
    width: 85%;
    padding-top: 40px;
    margin: auto;
}

.Ranking .ttl{
}

.message-header {
    min-height: 33.33vw;
    background: center url(../images/player-message-header-bg.png) no-repeat;
    background-size: cover
}

.message-header .message-button a {
    display: block;
    width: 75%;
    max-width: 450px;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
    border-radius: 4px;
    text-align: center;
    font-size: 1.2rem;
    line-height: 3.33em;
    font-weight: bold;
    color: #ec0000
}

.message-header .message-button a:hover {
    background-color: #ec0000;
    color: #ffffff
}

.message-wrapper {
    position: relative
}

.message-wrapper dt {
    padding-bottom: 2.875rem !important
}

.message-wrapper dd {
    position: absolute;
    width: 100%;
    bottom: 0;
    margin-top: 20px
}

@media screen and (min-width: 798px) {
    .message-wrapper dt {
        min-height: 250px
    }
}

.min-height-2l {
    min-height: 3rem
}

.min-height-3l {
    min-height: 4.5rem
}

.min-height-4l {
    min-height: 6rem
}

.balloon1,
.balloon2 {
    position: relative;
    max-width: 100%
}

.balloon1:before {
    content: "";
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    width: 100%;
    height: 18px;
    background: top center url(../images/bg-baloon-1.png) no-repeat
}

.balloon2:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border: 8px solid transparent;
    border-top: 10px solid #0f0964
}

.trivia-container {
    padding-top: calc(12.5vw)
}

.trivia-container .trivia-logo {
    position: absolute;
    top: -12.5vw;
    left: 0;
    width: 100%
}

.trivia-container .bg-yellow {
    padding-top: 14vw !important
}

.trivia-container .trivia-title {
    margin-top: -20px
}

@media screen and (max-width: 798px) {
    .trivia-container .trivia-title {
        margin-top: 0px
    }
}


@media screen and (max-width: 798px) {
    .trivia-container .bg-yellow {
        padding-top: 20vw !important
    }
}

@media screen and (min-width: 798px) {
    .gallery-bg01 {
        position: relative;
        border-radius: 5.14vw;
        margin-top: 128px;
        padding-top: 210px !important;
    }

    .gallery-bg01 .gallery-bg01-icon {
        position: absolute;
        top: -80px;
        left: 37%;
        width: 100%;
        -webkit-transform: translateX(-50%);
        /* Safari用 */
        transform: translateX(-50%);
        padding-right: 13px;
    }

    .gallery-bg02 {
        position: relative;
        border-radius: 5.14vw;
        margin-top: 60px;
        padding-top: 284px !important;
    }

    .gallery-bg02 .gallery-bg02-icon {
        position: absolute;
        top: -117px;
        left: 0;
        width: 100%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        /* Safari用 */
        transform: translateX(-50%);
        padding-left: 28px;
    }

    .gallery-bg02-content06 {
        margin-top: -120px
    }

    .gallery-bg02-content {
        margin-bottom: 60px
    }

    .bg-caption-up,
    .bg-caption-down {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        margin-right: 12px;
        margin-left: 12px;
        padding-right: 60px;
        padding-left: 60px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat
    }
}

@media screen and (max-width: 798px) {
    .gallery-bg01 {
        position: relative;
        margin-top: 24vw;
        padding-top: 30vw !important;
    }

    .gallery-bg01 .gallery-bg01-icon {
        position: absolute;
        top: -50px;
        left: 0;
        width: 100%;
    }

    .gallery-bg02 {
        position: relative;
        margin-top: 80px;
        padding-top: 50vw !important;
    }

    .gallery-bg02 .gallery-bg02-icon {
        position: absolute;
        top: -80px;
        left: 0;
        width: 100%
    }

    .gallery-bg01-icon img,
    .gallery-bg01-title img,
    .gallery-bg02-icon img,
    .gallery-bg02-title img,
    .sp-image {
        zoom: .5
    }

    .gallery-bg02-content {
        margin-bottom: 30px
    }

    .bg-caption-up,
    .bg-caption-down {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        margin-right: 6px;
        margin-left: 6px;
        padding-right: 30px;
        padding-left: 30px;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat
    }

    .pl-10 .bg-caption-up {
        margin-left: 16px
    }

    .pr-10 .bg-caption-up {
        margin-right: 16px
    }
}

.bg-caption-up {
    background-image: url(../images/bg-caption-up.png);
    background-position: 0 5%;
}

.bg-caption-down {
    background-image: url(../images/bg-caption-down.png)
}


.h35 {
    height: 35px;
}

.h42 {
    height: 42px;
}


.w70 {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}



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

    .h35 {
        height: auto;
    }

    .h42 {
        height: auto;
    }

    .w70 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


.h776 {
    height: 776px;
}


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

    .h776 {
        height: 860px;
    }
}

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

    .h776 {
        height: auto;
    }
}

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

    .h776 {
        height: 700px;
    }
}

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

    .h776 {
        height: auto;
    }
}


.ptb-4 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}




/*2018 11 09*/
@media (min-width: 769px) {
    .col-md-24 {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .ml-md-m20 {
        margin-left: -20px;
    }
}

@media (max-width: 768px) {
    img.sp-half {
        zoom: 0.5;
    }
}

.bg-red {
    background-color: #be000a;
}

.bg-insta {
    background-color: #389bed;
}

.rounded-3 {
    border-radius: 3px;
}

.ls-200 {
    letter-spacing: 0.2em;
}

.header-topbar {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
}

@media screen and (min-width: 798px) {
    .bx-wrapper {
        width: 100%;
    }
}

#instagram {
    padding-bottom: 16.7vw;
    background: center bottom url(../images/top-instagram-bg.png) no-repeat #f8f7f6;
    background-size: contain;
}

@media screen and (min-width: 799px) {
    #instagram .col-md-7 {
        -ms-flex: 0 0 62.4%;
        flex: 0 0 62.4%;
        max-width: 62.4%;
    }

    #instagram .col-md-5 {
        -ms-flex: 0 0 37.6%;
        flex: 0 0 37.6%;
        max-width: 37.6%;
    }
}

#instagram .insta-content {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-bottom: 30px;
}

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

    #instagram>div>div.insta-wrapper>div.insta-list-wrapper>div>a:nth-child(9),
    #instagram>div>div.insta-wrapper>div.insta-list-wrapper>div>a:nth-child(10) {
        display: none;
    }

    #instagram .insta-content {
        padding-right: 7px !important;
        padding-left: 7px !important;
        margin-bottom: 14px;
    }
}





/* Magnific Popup CSS */
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: #0b0b0b;
    opacity: 0.8;
}

.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1043;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden;
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.mfp-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
    display: none;
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
    width: 100%;
    cursor: auto;
}

.mfp-ajax-cur {
    cursor: progress;
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
}

.mfp-zoom {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
    cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mfp-loading.mfp-figure {
    display: none;
}

.mfp-hide {
    display: none !important;
}

.mfp-preloader {
    color: #CCC;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -0.8em;
    left: 8px;
    right: 8px;
    z-index: 1044;
}

.mfp-preloader a {
    color: #CCC;
}

.mfp-preloader a:hover {
    color: #FFF;
}

.mfp-s-ready .mfp-preloader {
    display: none;
}

.mfp-s-error .mfp-content {
    display: none;
}

button.mfp-close,
button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 0.65;
    padding: 0 0 18px 10px;
    color: #FFF;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
    opacity: 1;
}

.mfp-close:active {
    top: 1px;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
    color: #FFF;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #CCC;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.mfp-arrow {
    position: absolute;
    opacity: 0.65;
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
    margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
    opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent;
}

.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px;
}

.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7;
}

.mfp-arrow-left {
    left: 0;
}

.mfp-arrow-left:after {
    border-right: 17px solid #FFF;
    margin-left: 31px;
}

.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
    right: 0;
}

.mfp-arrow-right:after {
    border-left: 17px solid #FFF;
    margin-left: 39px;
}

.mfp-arrow-right:before {
    border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
    top: -40px;
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000;
}

/* Main image in popup */
img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    line-height: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 0 40px;
    margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
    line-height: 0;
}

.mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #fff;
}

.mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px;
}

.mfp-figure figure {
    margin: 0;
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #fff;
    word-wrap: break-word;
    padding-right: 36px;
}

.mfp-image-holder .mfp-content {
    max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape),
screen and (max-height: 300px) {

    /**
       * Remove all paddings around the image on small screen
       */
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0;
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0;
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0;
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px;
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0;
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px;
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        text-align: center;
        padding: 0;
    }
}

@media all and (max-width: 900px) {
    .mfp-arrow {
        -webkit-transform: scale(0.75);
        transform: scale(0.75);
    }

    .mfp-arrow-left {
        -webkit-transform-origin: 0;
        transform-origin: 0;
    }

    .mfp-arrow-right {
        -webkit-transform-origin: 100%;
        transform-origin: 100%;
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

.mfp-content {
    padding: 20px 20px 0 20px;
}

.mfp-bottom-bar {
    margin-top: -200px;
}

img.mfp-img {
    padding-bottom: 200px;
}

.mfp-title {
    background-color: #fff;
    color: #111;
    padding: 20px;
}

.img.mfp-img {
    padding-bottom: 100px;
}

/*    20181120追加CSS    */
#schedule ul {
    overflow: hidden;
    list-style: none;
    padding: 0;
}

#schedule ul li {
    width: 47%;
    float: left;
    margin-right: 3%;
}

#schedule ul li:last-child {
    margin-right: 0%;
}

#schedule ul li .tbs_1 {
    margin-bottom: 50px;
}

#schedule ul li h3 {
    height: 65px;
}

@media screen and (max-width: 798px) {
    #schedule ul li {
        width: 100%;
        float: none;
        margin-right: 0%;
    }

    #schedule ul li h3 {
        height: unset;
        margin-bottom: 15px;
    }

    #schedule ul li .tbs_1,
    #schedule ul li .bs_tbs_2 {
        margin-bottom: 30px;
    }

    #schedule ul li .gnw_3 img {
        width: 70px;
    }
}