@charset "utf-8";

body{background:#fff9ff;}
img{width:100%;}

h1, h2{color:#444; font-weight:800;}

header{background:#fef;}
.inner{width:80%; max-width:1100px; margin:0 auto; padding-bottom:10px;}
#top_right_img{width:32%; max-width:200px; margin-bottom:-10px; margin-left:auto;}
@media screen and ( max-width:1000px ){#top_right_img{width:20.1%; max-width:144px;}}
#top_right_img img{width:32%; margin:0; padding:0;}
*{color:#333;}
header h1{font-size:24px;}
header h3{font-weight:normal; font-size:16px; border-bottom:1px solid #666;} 
header h4{font-weight:normal; font-size:16px;} 

header .titlearea{position:relative; width:32em; border-top:1px solid #666; margin-top:10px;}



header nav > div{width:calc(16.66% - 20px); text-align: center; padding:5px 5px; border:1px solid #666;}

div.ranking0{ background:#f6f6f6; margin-top:10px; margin-bottom:10px;}
div.ranking{background:#fffff3; margin-top:10px;}


#kobetsu div.kobetsu, #pri div.pri, #taimen div.taimen, #qaa div.qaa, #web div.web, #soudan div.soudan{background:#ffffa3;}



header .area{position:absolute; top:10px; right:0; border:1px solid #999; padding:2px 4px; transform:rotate(-15deg); background:#fffff3;}


@media screen and ( max-width:816px ){
#wrapper{width:98%; margin:0 auto;}
.inner{width:96%;}
header .titlearea{width:100%; position:relative;}
header h1{font-size:4.4vw;}
header h3{font-weight:normal; font-size:2.8vw;}
header h4{font-weight:normal; font-size:2.8vw;}

header #top_right_img{width:100%;}
header nav > div{width:calc(33.3% - 30px); padding:2px 5px;}
}

#main{width:80%; max-width:1200px; margin:0 auto;}
#main .imgarea{width:calc(16% - 30px); margin:20px auto;}
#main .textarea{width:calc(25% - 30px); margin:20px 15px;}
#main .textarea ul{list-style-type:none;}
#main .textarea ul li{font-size:20px; line-height:1.8;}
#main .textarea2{width:calc(55% - 30px); margin:20px 0 20px 30px;}
#main .textarea3{width:100%; margin:20px 0 20px 0;}
#main .text_img{float: right; width: 15%; margin-left: 20px;}
#main .text_img2{float: left; width: 15%; margin-right: 20px;}
#main01{margin-top:60px;}
#main2 h2{margin-bottom:20px;}

@media screen and ( max-width:816px ){
#main .textarea ul li{font-size:4.5vw; line-height:2.0;}
}

#main11{padding-top:20px; margin-bottom:40px;}

#main p{text-align: justify;}

#navarea .fixed {position: fixed; top: 0; z-index: 59; width:100%; background:#fcf;}
#navarea .sp_only{border:none;}

@media screen and ( max-width:816px ){
#main{width:98%;}
#main .imgarea{width:calc(36% - 30px); max-width:180px; margin:10px auto;}
#main .textarea{width:calc(60% - 30px); margin:40px 0 0 0;}
#main .textarea2{width:100%; margin:20px 0 20px 0;}
#main .textarea3{width:100%; margin:20px 0 10px 0;}
#main .text_img{width: 32%; max-width:180px;}
#main .text_img2{width: 32%; max-width:180px;}
#main01{margin-top:30px;}
}

footer{min-height:60px; color:#fcfcfc; background:#fcf;}



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


}



.schoolbox{width:calc(100% - 42px); border:1px solid #999; margin:10px; background:#fffff9; padding:10px;}
.sc1{font-size:130%; display:inline-block; width:12em; border-bottom:1px solid #999; margin-bottom:8px;}
.sc00{display:inline-block; margin-left:auto; border:1px solid #999; padding:2px 4px 2px 6px; letter-spacing:3px; border-radius:3px; margin-left:2em; margin-top:10px; background:#fff3ff;}
.sc3{display:inline-block;}
.sc4{display:inline-block;}
.sc5{display:inline-block; font-size:90%; line-height:1.4; padding-top:5px;}
.sc6{font-size:80%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
.sc7{font-size:80%;}
.sc9{width:calc(100% - 14px); padding-top:10px;margin-bottom:10px;}
.sc9 img{width:100%; box-shadow:2px 2px 2px #999; border-top:1px solid #999; border-left:1px solid #999;}
.schoolbox2{width:100%;}

.schoolbox3{width:38%;}
.schoolbox4{width:calc(62% - 20px); margin-left:20px;}

@media screen and ( max-width:816px ){
.sc1{font-size:140%; display:inline-block; width:12em;}
.sc9{width:calc(70% - 14px); max-width:400px; padding-top:10px; margin:10px auto;}

.schoolbox3{width:100%;}
.schoolbox4{width:calc(100% - 20px); margin-left:20px;}

}

#main03 .textarea3{width:calc(100% - 30px);}
#main03 .textarea3 img{width:calc(12% + 25px); max-width:110px; margin-right:25px; float:left;}

@media screen and ( max-width:816px ){
#main03 .textarea3{width:100%;}
#main03 .textarea3 img{width:calc(20% + 20px); max-width:180px; margin-right:20px; float:left;}
}


#main81{width:60%; max-width:600px; margin:0 auto;}
#main81 .imgarea {width:35%; margin: 20px auto;}
#main81 .imgarea img{width:60%; max-width:105px; margin:0 auto;}
#main81 .textarea{width:57%; margin:0;}
@media screen and ( max-width:816px ){
#main81{width:80%; max-width:500px;}
#main81 .imgarea {width:42%;}
}

.contact_btn{text-align:right; margin-right:5%; padding:3px 8px; font-size:12px; line-height:3.0;}