@charset "UTF-8";
#main h2{background-color: #EAEAEA; position: relative; font-size:25px; border-left: 5px solid #01b5b6; padding-left: 20px; height: 50px; line-height: 50px; margin-bottom: 30px}
#main h2:after{position: absolute; right: 3px; top: 3px; content: ""; width:0; height:0;  border-bottom: 44px solid #01b5b6; border-left: 44px solid transparent;}
#main h2 span{display: block; position: absolute; right: 0; bottom: -20px; font-size: 12px; line-height: 1}
#main h2 font{font-size: 16px; display: inline-block; margin-left: 10px}
#sub_top{position: relative; text-align: right}
#sub_top h1{position: absolute; display: table; left: 0; top: 0; height: 100%; }
#sub_top h1 span{display: table-cell; height: 100%;vertical-align: middle; color: #fff; font-size: 30px; font-weight: normal}
#side_nav li .link,#sub_top,#main h2{font-family:游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;font-weight: normal;}

#side_nav{position: relative;overflow: hidden; border: 2px solid #bababa; border-radius: 10px; margin-bottom:30px}
#side_nav:before,#side_nav:after{position: absolute; left: 15px; content: ""; width:calc(100% - 30px); height:5px; background-color: #00B4B7; border-radius:5px; z-index: 9}
#side_nav:before{top: 0}
#side_nav:after{bottom: 0}
#side_nav li{border-top: 1px dashed #bababa;}
#side_nav li:first-child{border-top: none}

#side_nav li .link,#side_nav.rules li a{display: block; padding:25px;font-size: 1.15rem; line-height: 1; position: relative}
#side_nav li .link:after,#side_nav.rules li a:after{position: absolute; right:10px; top: 0; bottom:0; margin:auto; vertical-align: middle; content: ""; width:2px;height:2px;border:2px solid;  border-color: #333 #333 transparent transparent;  transform: rotate(45deg);}
#side_nav li.active a:after{border-color: #00B4B7 #00B4B7 transparent transparent; }
#side_nav li .link span{display: block; color: #ccc; font-size: 12px; margin-top: 5px; margin-bottom: -10px;text-transform: capitalize;}
#side_nav li.active a,#side_nav li.active a span{background-color:#DBF3FF; color: #00B4B7;}
#side_nav li.active a:hover{opacity: 1}
.mceContentBody #tab{margin: 0; padding: 0}
#tab li{float: left; width: 49%;background-color: #9a9a9a;text-align: center; margin-bottom: 30px; cursor: pointer; border-radius:5px;user-select: none;}
#tab li.active{background-color: #6bb4fc; cursor: default;}
#tab li span{display:inline-block; padding-left: 15px;  color: #fff; position: relative; line-height: 30px;}
#tab li span: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);}
#tab li:first-child{margin-right:2%}
.tab_contents{display: none}
.tab_contents.active{display: block}

.edit_btn {position: relative;float: right; margin-top: -30px; box-shadow:inset 0px 1px 0px 0px #ffffff;background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);background-color:#ededed;border-radius:3px;border:1px solid #dcdcdc;display:block;cursor:pointer;color:#777777;font-size:12px;text-decoration:none;text-shadow:0px 1px 0px #ffffff;user-select: none;-moz-user-select: none;-webkit-user-select: none; z-index: 10}
.edit_btn:hover {background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);background-color:#dfdfdf;}
.edit_btn:active {position:relative;top:1px;}
.edit_btn a{display: block; padding: 0 10px; }
#container{margin-top:20px}
.contents_view{margin: 30px 0}
.normal_list a{display: block; border-bottom: 1px dashed #e7e7e7; font-size:16px; margin-bottom: 20px; padding-left: 10px}
#entry{line-height: 35px; position: relative}
#entry .error{position: absolute; left: 0; top: -50px; color:red; display: none}

#entry dl{margin-bottom: 30px; position: relative}
#entry .error{position: absolute; left: 0; top: -50px; color:red; display: none}

#submit{background-color: #00B4B7; border-radius: 10px; border: 0; line-height: 50px; padding: 0 30px; color: #fff; font-size:18px; cursor: pointer}
#submit:hover{opacity: 0.6}

.select-hidden {display: none; visibility: hidden; }
.select { cursor: pointer; position: relative;  width:100%;  height: 35px; line-height:35px;}
.select-styled {position: relative; padding: 0 36px 0 15px; line-height:35px; height: 35px; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;  -webkit-transition: all 0.2s ease-in;  transition: all 0.2s ease-in;border:1px solid #ccc;background-color:#fff; text-align:left}
.select-styled:before{position: absolute; height: 35px; width: 35px; right:-1px; top:-1px; background-color:#00B4B7; content: ""}
.select-styled:after{position:absolute;	right:11px;top:0;bottom: 0;vertical-align: middle;margin: auto;	content:""; display:block;width: 0px;height: 0px;
border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 8px solid #fff;font-size: 0px;line-height: 0px;}
.select-styled.active:after{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);    transform:rotate(180deg);}

.select-options { display: none; position: absolute; top:34px; right: 0; left: 0; z-index: 999; margin: 0; list-style: none; border:1px solid #ccc; background:rgb(255,255,255); max-height:200px; overflow:auto}
.select-options li { margin: 0; padding:0; line-height:30px;  text-indent: 15px;  -moz-transition: all 0.15s ease-in; -o-transition: all 0.15s ease-in;  -webkit-transition: all 0.15s ease-in;  transition: all 0.15s ease-in; text-align:left}
.select-options li:hover {color: #f36161;}
.select-options li[rel="hide"] {  display: none;}
.select-none{background-color: #eaeaea;}

@media screen and (min-width: 641px){
    #breadcrumb{margin-top: 10px;line-height: 1}
    #breadcrumb a{position: relative; padding-right:30px;}
    #breadcrumb a:after{position: absolute; right:13px; top: 0; bottom:0; margin:auto; vertical-align: middle; content: ""; width:5px;height:4px;border:1px solid; border-color: #333 #333 transparent transparent;  transform: rotate(45deg);}
    #side_area{width: 210px}
    #main{float: right; width: 750px}
    #entry{width: 400px; margin: 0 auto; font-size: 18px}
    .toc{display: block; padding-top: 110px; margin-top: -110px}
    .block{margin-bottom: 50px}
    #entry{margin-top: 100px}
    #entry dl{margin-bottom: 50px}
    #entry dt{width: 150px}
    #entry dd{width: 250px}
    #entry dt,#entry dd{float: left}
    #entry dt,#entry dd{margin-bottom: 30px}

}
@media screen and (max-width: 640px){
    
    #sub_top h1{left:2%;}
    #sub_top img{width: 50%}
    #container {width: 96%; margin-left: 2%;}
    #side_area{margin-top: 20px}
    #main h2{font-size: 20px}
    #main h2 font{font-size:13px}
    .alignright{max-width: 40%}
    #entry{margin-bottom: 50px}
    #entry dd{margin-bottom:20px}
    #entry .error{top: -25px;}


}