@charset "Shift-JIS";

/*
================================================================================================================
COMMON
================================================================================================================
*/
.inner{
width:100%;
max-width:1200px;
text-align:center;
margin:0 auto;}
.inner a img{margin:20px auto;}
.inner a:hover img{opacity:0.7;}

@media screen and (max-width:1300px){
.inner{width:90%;}}

/*
================================================================================================================
TOP
================================================================================================================
*/
#top{
width:100%;
max-width:1920px;
background-image:url("../img/top/main.jpg");
background-repeat:no-repeat;
background-size:100% auto;
background-position:top center;
margin:0 auto;}
#top img{width:100%; max-width:1920px;}

#top .date{
text-shadow:2px 1px 10px rgba(39,65,128,1),-2px -1px 10px rgba(39,65,128,1),
            2px 2px 10px rgba(39,65,128,0.5),-2px -2px 10px rgba(39,65,128,0.5),
            0px 0px 10px rgba(39,65,128,0.3),-1px -1px 10px rgba(39,65,128,0.3),
            1px 1px 10px rgba(39,65,128,0.3);}

/*テキスト-実施期間日付*/
#top .date strong{display:block; font-size:70px; margin:20px auto 50px;}/*font-size:4vw;*/
#top .date strong sup{font-size:50px;}/*実施期間 font-size:1.5vw;*/
#top .date strong sub{font-size:40px; font-weight:normal;}/*時間 font-size:2vw;*/
#top .date strong span{font-size:50px;}/*月日曜日 font-size:2.5vw;*/

/*テキスト-参加には事前のエントリーが必要です*/
#top .date b span{display:inline-block; font-size:20px; color:#e9fe49; padding:0 10px;}

/*テキスト-エントリー期間*/
#top .date em{font-size:30px; letter-spacing:3px;}
#top .date em p{display:inline;}
#top .date em p span{font-size:20px;}
#top .date em br{display:none;}

#top p.notice{
width:100%;
max-width:980px;
background-color:#002864;
border:1px solid #1decff;
border-radius:5px;
padding:3px;
margin:40px auto;}
#top p.notice > span{
display:block;
font-size:12px;
text-align:left;
border:1px solid #0b76a0;
border-radius:3px;
padding:20px 10px;}

@media screen and (min-width:981px){
#top .date strong sup{vertical-align:text-top !important;}}

@media screen and (max-width:980px){
#top .date strong{line-height:90%;}
#top .date strong sup{display:block !important;}
#top .date em{line-height:120%; letter-spacing:1px;}
#top .date em br{display:block;}}

@media screen and (max-width:700px){
#top .date strong{font-size:60px;}
#top .date strong sup{font-size:40px;}/*実施期間*/
#top .date strong sub{font-size:40px;}/*時間*/
#top .date strong span{font-size:30px;}/*月日曜日*/}

@media screen and (max-width:640px){
#top .date strong sub{font-size:30px;}/*時間*/}

@media screen and (min-width:481px) and (max-width:540px){
#top .date em p{display:block; width:100%;}
#top .date em p:nth-child(2){text-align:left;}
#top .date em p:nth-child(3){text-align:right;}}

@media screen and (max-width:480px){
#top .date{
text-shadow:2px 1px 10px rgba(39,65,128,1),-2px -1px 10px rgba(39,65,128,1),
            2px 2px 3px rgba(39,65,128,1),-2px -2px 3px rgba(39,65,128,1),
            0px 0px 3px rgba(39,65,128,1),-1px -1px 3px rgba(39,65,128,1),
            1px 1px 3px rgba(39,65,128,1);}

#top .date strong{font-size:40px; margin:20px auto;}
#top .date strong sup{font-size:30px;}/*実施期間*/
#top .date strong sub{font-size:20px;}/*時間*/
#top .date strong span{font-size:20px;}/*月日曜日*/

#top .date em{display:block; font-size:20px; margin:0 auto;}
#top .date em p span{font-size:14px;}

#top p.notice{margin:20px auto;}}

@media screen and (max-width:420px){
#top .date b{font-size:13px;}
#top .date b span{font-size:15px;}}

@media screen and (max-width:350px){
#top .date strong sup{font-size:20px;}/*実施期間*/

#top .date em{max-width:250px; font-size:18px;}
#top .date em p{display:block; width:100%; font-weight:normal !important;}
#top .date em p:nth-child(2){text-align:left;}
#top .date em p:nth-child(3){text-align:right;}

#top .date b span{padding:0 5px;}

#top p.notice > span{font-size:11px; padding:10px 10px;}}

/*
================================================================================================================
ランキングについて
================================================================================================================
*/
#ranking{
background-image:url("../img/top/bar01.png") , url("../img/top/bar02.png") , url("../img/top/bar03.png") , url("../img/top/bar04.png");
background-repeat:no-repeat , no-repeat , repeat-x , repeat-x ;
background-position:top right , top left , top , top;
padding:100px 0 50px;}

#ranking .catch{
width:100%;
max-width:980px;
border-left:12px solid #1decff;
border-right:12px solid #1decff;
font-size:20px;
font-weight:bold;
padding:20px 0;
margin:30px auto;}
#ranking .catch strong{display:block; font-size:26px; padding:10px 0;}
#ranking .catch strong br{display:none;}
#ranking .catch p br{display:none;}
#ranking .catch .aqua{color:#1decff;}
#ranking .catch .pink{color:#ff8383;}
#ranking .catch .lime{color:#e2ff42;}
#ranking img{width:100%; max-width:980px;}

@media screen and (max-width:980px){
#ranking .catch{line-height:180%;}
#ranking .catch strong{font-size:30px;}
#ranking .catch strong br{display:block;}}

@media screen and (max-width:700px){
#ranking .catch strong{font-size:24px;}
#ranking .catch p{line-height:120%;}
#ranking .catch p br{display:block;}}

@media screen and (min-width:541px){
#ranking .catch{
background-image:url("../img/top/rank01.png") , url("../img/top/rank02.png");
background-repeat:no-repeat , no-repeat;
background-position:bottom left , bottom right;}}

@media screen and (max-width:540px){
#ranking{font-size:14px;}
#ranking .catch{
font-size:16px;
border-left:6px solid #1decff;
border-right:6px solid #1decff;}
#ranking .catch strong{font-size:18px;}}

@media screen and (max-width:480px){
#ranking{background-size:auto 50px , auto 50px , auto 50px , auto 370px; padding:50px 0 30px;}}

@media screen and (max-width:420px){
#ranking{font-size:13px;}
#ranking b{font-size:15px;}
#ranking .catch{font-size:14px;}
#ranking .catch strong{font-size:15px;}}

@media screen and (max-width:350px){
#ranking .catch{padding:10px; margin:20px auto;}
#ranking{font-size:12px;}
#ranking b{font-size:13px;}}

/*
================================================================================================================
実施日程・レギュレーション見出し
================================================================================================================
*/
.cat .title{
display:block;
width:100%;
height:40px;
background:#10389b;
background:-moz-linear-gradient(top, #10389b 0%, #1045b0 100%);
background:-webkit-linear-gradient(top, #10389b 0%,#1045b0 100%);
background:linear-gradient(to bottom, #10389b 0%,#1045b0 100%);
font-size:24px;
line-height:40px;
font-weight:bold;
padding-bottom:5px;
border-bottom:5px solid #00ffff;
margin:0 auto;}
.cat .title p{
width:100%;
height:35px;
max-width:500px;
text-align:center;
border-left:5px solid #e2ff43;
margin:0 auto;}

.cat .inner{max-width:980px !important; padding:20px 0;}
.cat .inner img{width:100%; max-width:980px;}

@media screen and (max-width:540px){
.cat .title p{width:90%;}}

@media screen and (max-width:420px){
.cat .title{font-size:18px;}}

/*
================================================================================================================
実施日程
================================================================================================================
*/
#date.cat .inner > p{
width:100%;
max-width:980px;
font-size:16px;
text-align:left;
padding-left:20px;
border-left:6px solid #1decff;
margin:20px auto;}
#date.cat .inner > p span{display:block;}
#date.cat .inner > p span:first-child{font-size:18px; font-weight:bold; color:#e2ff43;}

@media screen and (max-width:800px){
#date.cat .inner > p{font-size:14px;}}

@media screen and (max-width:540px){
#date.cat .inner > p{border-left:3px solid #1decff; padding-left:10px;}}

@media screen and (max-width:420px){
#date.cat .inner > p{font-size:13px;}
#date.cat .inner > p span:first-child{font-size:15px;}}

/*
================================================================================================================
レギュレーション
================================================================================================================
*/
#howto.cat .inner > strong{
display:block;
width:100%;
max-width:1000px;
background:#063896;
background:-moz-linear-gradient(left, #063896 0%, #073895 30%, #000000 100%);
background:-webkit-linear-gradient(left, #063896 0%,#073895 30%,#000000 100%);
background:linear-gradient(to right, #063896 0%,#073895 30%,#000000 100%);
font-size:20px;
text-align:left;
padding:8px 0 8px 20px;
margin:20px auto;}
#howto.cat .inner > strong > p{
border-left:6px solid #1decff;
padding:5px 0 5px 10px;}
#howto.cat .inner ul{text-align:left;}
#howto.cat .inner ul li{margin-bottom:20px;}
#howto.cat .inner ul li:before {
display:inline-block;
content:"■";
color:#1decff;
font-size:12px;
margin-right:10px;}
#howto.cat .inner ul li p#compe{max-width:620px; margin:20px auto;}
#howto.cat .inner ul li p#compe img{display:block; max-width:500px; margin:0 auto 20px;}
#howto.cat .inner ul li b{
display:inline-block;
font-size:40px;
vertical-align:-10px;
margin-right:10px;
text-shadow:2px 1px 20px rgba(39,65,128,0.5),-2px -1px 20px rgba(39,65,128,0.5),
            2px 2px 10px rgba(39,65,128,0.5),-2px -2px 10px rgba(39,65,128,0.5),
            0px 0px 10px rgba(39,65,128,0.3),-1px -1px 10px rgba(39,65,128,0.3),
            1px 1px 10px rgba(39,65,128,0.3);}

@media screen and (max-width:800px){
#howto.cat .inner ul li{font-size:14px;}
#howto.cat .inner ul li b{font-size:30px;}}

@media screen and (max-width:420px){
#howto.cat .inner > strong{font-size:16px; padding:5px 0 5px 20px;}
#howto.cat .inner ul li{font-size:13px; margin-bottom:10px;}
#howto.cat .inner ul li b{font-size:20px; vertical-align:0; margin-right:5px;}}

/*課題曲*/
#howto dl{display:flex; flex-wrap:wrap; background-color:rgba(255,255,255,0.1); font-size:13px; border:1px solid #ccc;}

#howto dd,
#howto dt{padding:5px;}

#howto dt:first-child,
#howto dd:nth-child(2),
#howto dd:nth-child(3){background-color:#063896; font-weight:bold; font-size:14px;}

@media screen and (min-width:801px){
#howto dl{border-bottom:none;}

#howto dd,
#howto dt{width:calc(100% / 3); border-bottom:1px solid #ccc;}

#howto dt + dd{border-left:1px solid #ccc;}
#howto dd + dd{border-left:1px solid #ccc;}}

@media screen and (max-width:800px){
#howto dt:first-child,
#howto dd:nth-child(2),
#howto dd:nth-child(3){display:none;}

#howto dd:nth-child(6),
#howto dd:nth-child(9),
#howto dd:nth-child(12){border-bottom:1px solid #ccc;}

#howto dd:nth-child(5),
#howto dd:nth-child(8),
#howto dd:nth-child(11),
#howto dd:nth-child(14){border-bottom:1px solid #333; border-top:1px solid #333;}

#howto dd,
#howto dt{position:relative; width:100%; text-align:right;}

#howto dd::before,
#howto dt::before{
display:inline-block;
position:absolute;
top:0;
left:0;
color:#00ffff;
text-align:left;
content:attr(data-cat);
padding:5px;}}

@media screen and (max-width:420px){
#howto dd,
#howto dt{font-size:11px;}}

/*
================================================================================================================
リンクボタン
================================================================================================================
*/
a.link-btn{
position:relative;
display:block;
width:100%;
max-width:500px;
height:80px;
color:#fff;
background:#1877ad;
background:-moz-linear-gradient(top, #1877ad 0%, #21eafe 100%);
background:-webkit-linear-gradient(top, #1877ad 0%,#21eafe 100%);
background:linear-gradient(to bottom, #1877ad 0%,#21eafe 100%);
font-size:30px;
font-weight:bold;
line-height:80px;
border:2px solid #1ed8f1;
border-radius:10px;
text-shadow:2px 2px 3px rgba(39,65,128,0.5),2px 2px 3px rgba(39,65,128,0.5),
            0px 0px 3px rgba(39,65,128,0.3), 1px 1px 3px rgba(39,65,128,0.3);
margin:20px auto;}
a.link-btn:hover{
background:#21eafe;
background:-moz-linear-gradient(top, #21eafe 0%, #1877ad 100%);
background:-webkit-linear-gradient(top, #21eafe 0%,#1877ad 100%);
background:linear-gradient(to bottom, #21eafe 0%,#1877ad 100%);}

#howto.cat .inner ul li a.link-btn{
height:auto;
font-size:20px;
line-height:20px;
text-align:center;
border-radius:5px;
padding:10px 0;
margin:20px auto;}
#howto.cat .inner ul li a.link-btn:before,
#howto.cat .inner ul li a.link-btn:after{display:none;}

@media screen and (min-width:641px){
a.link-btn:before,
a.link-btn:after{
display:block;
position:absolute;
top:0;
width:170px;
height:80px;
content:"";
background-repeat:no-repeat;
background-size:auto;}

a.link-btn:before{left:-172px; background-image:url("../img/top/btn01.png");}
a.link-btn:after{right:-172px; background-image:url("../img/top/btn02.png");}}

@media screen and (max-width:640px){
a.link-btn{height:60px; line-height:60px;}}

@media screen and (max-width:480px){
a.link-btn{font-size:20px; margin:10px auto; border-radius:5px;}
#howto.cat .inner ul li a.link-btn{font-size:16px; line-height:16px; padding:5px 0;}}

@media screen and (max-width:350px){
a.link-btn{font-size:18px; height:40px; line-height:40px;}}