@charset "UTF-8";

/*
	Theme Name: 全日本学生音楽コンクール
	Version: 1.0
    Author: Vervena
    Author URI: https://www.hometen.net/
	License: GNU General Public License
	License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

/* General Setting */
html,body{margin:0;border:0;padding:0;font-family:Meiryo,'ＭＳ Ｐゴシック',Arial, Helvetica, "sans-serif";-webkit-text-size-adjust: 100%;-webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing: grayscale; line-height:1.8; font-size:14px; color: #333}
*{box-sizing:border-box}
h1,h2,h3,h4,h5,p{margin:0; padding:0;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
th,td{padding:0; margin:0}
img{max-width: 100%;border: 0;-ms-interpolation-mode:bicubic;vertical-align: middle;}
a{color:#333; text-decoration:none}
a:focus, a:active, button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,select::-moz-focus-inner,input[type="file"] > input[type="button"]::-moz-focus-inner {border: 0;outline : 0;}
a:hover{opacity:.6;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out; text-decoration:none;}
.ns,.ns li, .ns dd, .ns dt, .ns ul{margin:0; padding:0;list-style:none;}
.cf:after {content: "";display: block;clear: both;}
#nav li a,#footer_banner h2,#copyrights{font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;font-weight: normal;}
#top_area{background-color: #77aacc}
#header{position: fixed; left: 0; top: 0; width: 100%; border-bottom:5px solid #00B4B7;  background-color: #fff; z-index: 9999}
.banner_list.ns li{margin-bottom: 15px}

#footer_banner h2{border-bottom:2px solid #e7e7e7; text-align: center}
#footer_banner li a{display: inline-block; margin: 0 10px; margin-bottom: 10px; line-height: 50px}
#footer{font-size: 12px}
#footer dd a{padding-left: 15px; position: relative}
#footer dd a:before{position: absolute; left:0; top: 0; bottom:0; margin: auto; vertical-align: middle; content: ""; width: 0;height: 0;border-style: solid;border-width: 4px 0 4px 6px;border-color: transparent transparent transparent #00B4B7;}
#copyrights{text-align: center; border-top: 1px solid #e7e7e7; margin-top:10px; line-height:50px }

.news_list.ns li{border-bottom: 1px dashed #e7e7e7; margin-top: 15px; padding-bottom: 5px; position: relative}
.news_list li a{text-decoration: underline}
.news_list li span.date{color: #00B4B7;position: absolute; left: 0; top: 0; display: block}
.news_list li .edit_btn a{text-decoration: none}
@media screen and (min-width: 641px){
    .sp{display:none;}
    body{min-width:1000px; font-size:14px; padding-top: 105px}
    .wrap{width:1000px; margin:0 auto}
    #header .wrap{position: relative; height: 100px}
    #logo{position: absolute; left: 0; top: 26px; line-height: 0}
    #logo a{display: block;}
    #nav{position: absolute; right: 0; top: 0}
    #nav li{float: left; margin-left:30px}
    #nav li a{display: block; line-height: 100px; font-size: 1.15rem}
    #nav li a span{position: relative}
    #nav li a span:before{-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out; width: 0; content: ""; position: absolute; left: 50%; bottom:-3px; border-bottom: 2px solid #fff}
    #nav li a:hover{opacity:1}
    #nav li a:hover span:before,#nav li.current-menu-item a span:before{ width: 100%; left: 0;  border-bottom: 2px solid #00B4B7;}
    .news_list.ns li{padding-left: 120px}
    #sub_nav{background-color: #00B4B7; text-align: center}
    #sub_nav a{color: #fff; line-height: 30px; display: block; position: relative; padding-left: 10px; font-size:0.95rem}
    #sub_nav a:before{position: absolute; left: 0; top: 0; bottom:0; margin:auto; vertical-align: middle; content: ""; width:2px;height:2px;border:2px solid;
  border-color: #fff #fff transparent transparent;  transform: rotate(45deg);}
    #sub_nav li{display: inline-block;margin: 0 10px}
    #menu_btn{display: none}
    
    #pageTop{width:1200px;margin:0 auto;}
    #pageTop.absolute{position:absolute; right:0; top:0; left:0}
    #pageTop.fix{position:fixed; right:0; bottom:20px; left:0; z-index:666}

    #page_top_wrap{position:relative; height:90px; padding-bottom:20px;}
    #pageTop a{display:block; float:right; padding-top:30px; height:70px; width:70px; font-size:12px; color:#fff; background-color:#00B4B7; position:relative; border-radius:50%; text-align:center}
    #pageTop a:before{position:absolute; content:""; left:22px; top:20px; width:20px;height:20px;border-top:3px solid #fff;border-right:3px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}

    #footer_banner{margin-top: 50px}
    #footer_banner h2{font-size: 1.5rem; margin-bottom:20px}
    #footer_banner li{width: 485px; float: left; margin-right: 30px; text-align: center; margin-bottom: 30px}
    #footer_banner li:nth-child(3),#footer_banner li:nth-child(4),#footer_banner li:nth-child(5){width: 313.33333333333px}
    #footer_banner li:nth-child(2),#footer_banner li:nth-child(5){margin-right: 0}
    #footer dt{float: left}
    #footer dd{float: right;padding-top: 12px}


}
@media screen and (max-width: 640px){
    .pc{display:none}
    body{padding-top: 50px}
    .sp_fixed{position: fixed; left: 0; top:0; width: 100%}
    #header{height:50px; border-bottom: 2px solid #00B4B7}
    #logo a{display: block; line-height:0; margin: 10px}
    #logo a img{height: 30px}
    #menu_btn {position:absolute; cursor:pointer; display:block;width:50px;height:50px; text-align:center; right:0; top:0; background-color:#00B4B7; line-height:0; text-decoration:none; color: #fff; }
    #menu_btn b{position:relative; width:30px; height:16px; margin-top:10px}
    #menu_btn b,#menu_btn b span {transition: all .4s;box-sizing: border-box;display: inline-block;}
    #menu_btn span { position: absolute;left:0; width:100%;height:2px;background-color: #fff;border-radius:2px;}
    #menu_btn span:nth-of-type(1) {top:0;}
    #menu_btn span:nth-of-type(2) {top:7px;}
    #menu_btn span:nth-of-type(3) {bottom:0;}
    #menu_btn i{font-style: normal; position: absolute; left:0; top: 36px; width: 100%; text-align: center;font-size:0.7rem}

    #menu_btn.active b{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
    #menu_btn.active span:nth-of-type(1) {-webkit-transform: translateY(6px) rotate(-45deg);transform: translateY(6px) rotate(-45deg);}
    #menu_btn.active span:nth-of-type(2) {-webkit-transform: translateY(0) rotate(45deg);transform: translateY(0) rotate(45deg);}
    #menu_btn.active span:nth-of-type(3) {opacity: 0;}

    #nav{ position:absolute;width:100%; display:none; left:0; top:50px;background-color:#fff; overflow:auto;}
    #nav ul{width: 92%; margin-left: 4%}
    #nav li{border-bottom:1px dashed#e7e7e7}
    #nav li a{display:block; line-height:45px; position:relative; padding-left:20px; font-size:3.5vw;}
    #nav li a:before{position: absolute; left: 5px; top: 0; bottom:0; margin: auto; vertical-align: middle; content: ""; width: 0;height: 0;border-style: solid;border-width: 4px 0 4px 6px;border-color: transparent transparent transparent #00B4B7;}
    .news_list li span.date{position:relative; }

    
    
    #page_top_wrap{position:fixed; right:10px; bottom:20px; left:0; z-index:666}
    #pageTop a{display:block; float:right; padding-top:25px; height:50px; line-height:1; width:50px; font-size:12px; color:#fff; background-color:#00B4B7; position:relative; border-radius:50%; text-align:center}
    #pageTop a span{display:none}
    #pageTop a:before{position: absolute;content: "";left: 17px;top: 15px;width: 14px;height: 14px;border-top: 2px solid #fff;border-right: 2px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}


    #footer_banner,.banner_list{width: 96%; margin-left: 2%; margin-top: 30px}

    .banner_list li{float: left; width: 48%; margin-left: 2%}
    .banner_list li:nth-child(odd){margin-left: 0}
    .banner_list li a{display: block; text-align: center}
    #footer_banner h2{font-size:4.5vw;}
    #footer_banner li a{margin: 0 5px; margin-bottom:20px}
    #footer_banner li{text-align: center; margin-bottom: 20px}
    #footer_banner li:nth-child(1) a{width: 45%}
    #footer_banner li:nth-child(1) a.s{width: 20%}
    #footer_banner li:nth-child(2) a{width: 74%}
    #footer_banner li:nth-child(3) a{width: 40%}
    #footer_banner li:nth-child(4) a{width: 55%}
    #footer_banner li:nth-child(4) a.s{width:85%}
    
    #footer dl{text-align: center; margin-top: 20px}
    #footer dd span{display: inline-block; margin-bottom: 30px}



}