/* CSS Document */
@charset "utf-8";
.content-area{
    margin-top: 3rem;
}
/* Topに戻るボタン 非表示 */
.btn-back-top{
    display: none;
}
/* introduction movies */
.intro-movies-container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 6rem;
}
.intro-movie-bottom{
    display: flex;
}
.intro-movie-panel{
    margin: 0 0.8rem;
}
.intro-movie-panel .thumbnail{
    margin-bottom: 1rem;
}
.intro-movie-panel .thumbnail a{
    display: block;
    position: relative;
}
.intro-movie-panel .thumbnail a:after{
    content: url(../img/ico_play.svg);
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width:75px;
    filter: drop-shadow(1px 1px 5px rgb(59, 59, 59))
}
.intro-movie-panel .thumbnail a:hover{
    opacity: 0.7;
}
.intro-movie-panel .thumbnail a:hover:after{
    filter: drop-shadow(1px 1px 10px rgb(0, 0, 0))
}
.intro-movie-panel .title{
    background: #FFF;
    border-left: 10px solid #7f8080;
    border-right: 10px solid #7f8080;
    border-top: 1px solid #7f8080;
    border-bottom: 1px solid #7f8080;
    padding: 0.4rem 0;
    font-weight: bold;
    font-size: 1.7rem;
    font-size: 1.5vw;
    text-align: center;
}
/* Content Navigation */
.content-navigations-bloc .ground-athletics, .content-navigations-bloc .underwater-athletics{
    margin-bottom: 4rem;
}
.content-navigations-bloc .ground-athletics h2, .content-navigations-bloc .underwater-athletics h2{
    font-size: 2.0rem;
    font-weight: bold;
    color: #FFF;
    background: url(../img/bg_h2_common.jpg) right center;
    background-size: cover;
    border-radius: 0.4rem;
    padding: 0.4rem 0.8rem 0.8rem;
    /* border: 1px solid #FFF; */
    outline: solid 1px #666666;    /* 外側の線になる5pxの一本線の枠線をひく*/
	outline-offset: 2px;
    margin-bottom: 3rem;
}
.contents-navigation-col{
    display: flex;
    justify-content: space-around;
}
.nav-panel{
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem 0;
    width: 48%;
}
.nav-panel .thumbnail img{
    width: 160px;
    height: 160px;
    object-fit: cover;
}
.nav-panel.earobic{
    border-top: 2px solid #ff6dc0;
    border-bottom: 2px solid #ff6dc0;
}
.nav-panel.resistance{
    border-top: 2px solid #ffcb3a;
    border-bottom: 2px solid #ffcb3a;
}
.nav-panel.underwater-walking{
    border-top: 2px solid #158edb;
    border-bottom: 2px solid #158edb;
}
.nav-panel.underwater-resistance{
    border-top: 2px solid #77b13e;
    border-bottom: 2px solid #77b13e;
}

/* スマホ */
@media only screen and (max-width:599px) {
    .intro-movies-container{
        display: block;
    }
    .intro-movie-upper{
        width: 50%;
        margin: 0 auto 2rem;
    }
    .intro-movie-panel .title{
        font-size: 1.2rem;
        font-size: 2.2vw;
    }
    .contents-navigation-col{
        flex-direction: column;
        align-items: center;
    }
    .nav-panel{
        width: 90%;
        margin-bottom: 1rem;
    }
}
/* Navigation Buttons */
a.btn {
    display: block;
    width: 220px;
    height: 36px;
    border: 1px solid #CCC;
    border-radius: 0.6rem;
    position: relative;
    margin: 2rem;
}
a.btn .glare {
    position: absolute;
    display: block;
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    height: 15px;
    top: 0;
    left: 0;
    border-radius: 0.4rem 0.4rem 100% 100%;
}
.btn .text {
    color: rgba(255, 255, 255, 0.9);
    font-weight: bold;
    display: block;
    position: absolute;
    top: 0.5rem;
    left: 0;
    font-size: 1.6rem;
    text-align: center;
    width: 100%;
    height: 30px;
    z-index: 1;
}
a.btn.btn-aerobic {
    background-image: linear-gradient(180deg,
            hsl(336deg 82% 59%) 0%,
            hsl(338deg 82% 61%) 3%,
            hsl(340deg 83% 63%) 9%,
            hsl(342deg 83% 65%) 20%,
            hsl(344deg 84% 66%) 60%,
            hsl(347deg 84% 68%) 75%,
            hsl(349deg 84% 69%) 83%,
            hsl(351deg 84% 71%) 89%,
            hsl(353deg 84% 72%) 93%,
            hsl(355deg 84% 73%) 97%,
            hsl(357deg 83% 75%) 100%);
}
a.btn.btn-resistance {
    background-image: linear-gradient(180deg,
            hsl(32deg 74% 52%) 0%,
            hsl(31deg 75% 54%) 3%,
            hsl(31deg 76% 55%) 9%,
            hsl(31deg 77% 57%) 20%,
            hsl(30deg 78% 59%) 60%,
            hsl(30deg 79% 60%) 75%,
            hsl(30deg 80% 62%) 83%,
            hsl(29deg 81% 63%) 89%,
            hsl(29deg 83% 65%) 93%,
            hsl(29deg 84% 66%) 97%,
            hsl(29deg 85% 68%) 100%);
}
a.btn.btn-underwater_walking {
    background-image: linear-gradient(180deg,
            hsl(210deg 72% 37%) 0%,
            hsl(209deg 73% 38%) 3%,
            hsl(208deg 74% 39%) 9%,
            hsl(208deg 74% 40%) 20%,
            hsl(207deg 75% 41%) 60%,
            hsl(207deg 76% 42%) 75%,
            hsl(206deg 77% 43%) 83%,
            hsl(205deg 78% 43%) 89%,
            hsl(205deg 79% 44%) 93%,
            hsl(204deg 80% 45%) 97%,
            hsl(204deg 81% 46%) 100%);
}
a.btn.btn-underwater_resistance {
    background-image: linear-gradient(180deg,
            hsl(94deg 44% 45%) 0%,
            hsl(100deg 38% 48%) 3%,
            hsl(106deg 33% 50%) 9%,
            hsl(113deg 31% 52%) 20%,
            hsl(121deg 29% 54%) 60%,
            hsl(129deg 30% 54%) 75%,
            hsl(135deg 30% 55%) 83%,
            hsl(140deg 30% 55%) 89%,
            hsl(144deg 29% 56%) 93%,
            hsl(149deg 28% 57%) 97%,
            hsl(152deg 27% 58%) 100%);
}
.footer-colophon{
    display: inline-block;
    border: 1px solid #7f8080;
    background: rgba(255,255,255,0.7);
    padding: 0.4rem 4rem;
    font-size: 1.6rem;
    font-weight: bold;
    position: absolute;
    right: 1rem;
}
/* タブレット */
@media only screen and (max-width:730px) {
    footer{
        height: 140px;
    }
    .footer-inner{
        flex-direction: column;
    }
    .footer-colophon{
        position: static;
        margin-bottom: 2rem;
    }
}
/*モーダル表示のためのCSS*/
/*hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}
/* Videoをレスポンシブに対応 */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video-container .video-js{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.modaal-content-container{
  padding: 0;
}
/* Button for Credit */
.footer-inner{
    position: relative;
}
.btn-credit{
    display: block;
    position: absolute;
    border: 1px solid #7f8080;
    background: rgba(255, 255, 255, 0.5);
    padding: 1rem 4rem;
    font-weight: bold;
    font-size: 1.4rem;
    bottom: 2rem;
    right: 3rem;
}
.warning{
    border: 3px solid #1564a5;
    padding: 2rem;
    max-width: 80%;
    margin: 0 auto;
    font-size: 1.6rem;
    border-radius: 0.2rem;
}
/* スマホ */
@media only screen and (max-width:599px) {
    .footer-inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .btn-credit{
        position: relative;
        bottom: inherit;
        right: inherit;
    }
    .nav-panel .thumbnail img{
        width: 120px;
        height: 120px;
        object-fit: cover;
    }
    .warning{
        max-width: 96%;
    }
}