@charset "utf-8";
@import url("/css/lpreset.css");

*, *:before, *:after {
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
a{
  text-decoration: none;
}
img{
  vertical-align: bottom;
  backface-visibility: hidden;
}
body{
  font-family: sans-serif;
}
h1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#3c5a78;
  padding:10px;
  color:#fff;
}
h1 a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding:5px;
  border:1px solid #fff;
  border-radius: 5px;
}
h1 i{
  font-size:1.2rem;
  color:#fff;
}
h2{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding:10px 0;
  border-bottom:1px solid #aaa;
  color:#333;
}

/*------ search ------*/
.search-top-container{
  width:calc(100% - 30px);
  margin:15px auto;
  padding:15px;
  border:1px solid #ccc;
  border-radius: 15px;
  color:#333;
  font-size:0.9rem;
  text-align: center;
}
.search-top-container p{
  font-size:0.9rem;
}
.search-top-container span{
  font-weight: bold;
}
.search-top-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width:220px;
  margin:15px auto;
  padding:15px 0;
  border-radius: 15px;
  background:#2274e6;
  color:#fff;
  font-weight: bold;
  font-size:0.9rem;
}
.search-top-btn i{
  margin-left:10px;
}
.search-pager{
  margin:10px 0;
  text-align: center;
  color:#333;
  font-size:0.9rem;
}
.search-pager a{
  display: inline-block;
  margin-right:10px;
  color:#2a9ce8;
  text-decoration: underline;
}
.search-list{
  border-top:1px solid #ccc;
}
.search-list li{
  border-bottom:1px solid #ccc;
}
.search-list li a{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding:10px;
  color:#333;
}
.search-list li a div{
  width:calc(100% - 20px);
}
.search-list li a i{
  display: block;
  width:20px;
  text-align: center;
}
.search-list li a span{
  width:100%;
  display: block;
}
.search-list li a .search-list-title{
  font-weight: bold;
  font-size:0.9rem;
}
.search-list li a .search-list-art{
  font-size:0.8rem;
}

.search-jenre-list li{
  border-bottom:1px solid #ccc;
}
.search-jenre-list li a{
  width:100%;
  display: flex;
  justify-content: space-between;
  padding:10px;
  font-size:0.8rem;
  color:#333;
}

.search-form{
  display: flex;
  width:100%;
  border-bottom:1px solid #ccc;
  background:#fff;
}
.search-form-text{
  vertical-align:middle; 
  display: block;
  width:calc(100% - 50px);
  height: 40px;
  line-height: 40px;
  border:none;
  background-color:transparent;
  font-size:0.8rem;
  padding-left:10px;
  color:#333;
}
.search-form-button{
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  display: block;
  text-align: center;
  width:50px;
  height: 40px;
  line-height: 40px;
  background:#555;
  color:#fff;
  font-size:0.7rem;
  font-weight: bold;
}
/*------ title ------*/
.main-container{
  width:calc(100% - 30px);
  margin:15px auto;
  padding:15px;
  border:1px solid #ccc;
  border-radius: 15px;
  color:#333;
  font-size:0.9rem;
}
.main-title{
  font-weight: bold;
  margin-bottom:10px;
}
.main-art{
  font-size:0.8rem;
  margin-bottom:10px;
}
.main-tiup{
  font-size:0.7rem;
  border:1px solid #ccc;
  padding:10px;
  margin-bottom:10px;
}
.title-pt{
  display: flex;
}
.title-pt li{
  width:calc((100% - 10px) / 2);
  text-align: center;
  font-size:0.8rem;
  border:1px solid #ccc;
  padding:5px;
}
.title-pt li:nth-of-type(2){
  margin-left:10px;
}
.title-dl{
  display: flex;
  justify-content: center;
  align-items: center;
  width:220px;
  margin:15px auto 0;
  padding:15px 0;
  border-radius: 15px;
  background:#2274e6;
  color:#fff;
  font-weight: bold;
  font-size:0.9rem;
}
.title-dl i{
  margin-left:10px;
}
/*------ menu ------*/
.menu-bar{
  background:#3c5a78;
  color:#fff;
  padding:10px;
}
.menu-list{
  display: flex;
  flex-wrap: wrap;
}
.menu-list li{
  width:100%;
  border-bottom:1px solid #ccc;
}
.menu-list li a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size:0.9rem;
  color:#333;
  padding:10px;
}
.menu-list li a span{
  display: block;
  content:"";
  width:6px;
  height:6px;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:6px solid #333;
}
/*------ footer ------*/
.foot-text{
  margin:10px;
  text-align: center;
  font-size:0.7rem;
  color:#333;
}
.copy{
  background:#3c5a78;
  color:#fff;
  font-size:0.8rem;
  padding:15px 0;
  text-align: center;
}
/*------  ------*/
.rule-text{
  color:#333;
  font-size:0.9rem;
  padding:10px;
  border-bottom:1px solid #ccc;
}
.rule-text a{
  color:#2a9ce8;
}
.course-list li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:15px 10px;
  font-size:0.9rem;
  border-bottom:1px solid #ccc;
}
.course-list li p{
  font-size:1.2rem;
  font-weight: bold;
}
.course-list li p span{
  display: block;
  width:100%;
  margin-top:5px;
  font-size:0.9rem;
  font-weight: normal;
}
.course-list li > span{
  display: inline-block;
  color:#333;
  border:1px solid #ccc;
  border-radius: 15px;
}
.course-list li a{
  display: inline-block;
  padding:10px;
  background:#2274e6;
  color:#fff;
  font-weight: bold;
  font-size:1rem;
  border-radius: 15px;
}
/*------ company ------*/
.company{
  color:#333;
  font-size:0.9rem;
  margin:10px 0;
}
.company span{
  display:block;
  text-align: center;
  padding:3px 0;
  background:#538bc2;
  color:#fff;
  font-size:0.8rem;
  margin-bottom:10px;
}
/*------ scc ------*/
.scc-text{
  font-size:0.8rem;
  margin-bottom:10px;
}
.scc-list{
  font-size:0.9rem;
  color:#333;
}
.scc-list dt{
  text-align: center;
  padding:3px 0;
  background:#538bc2;
  color:#fff;
  margin-bottom:10px;
}
.scc-list dd{
  margin-bottom:10px;
}
.scc-list dd:nth-last-of-type(1){
  margin-bottom:0;
}
.scc-list dd p{
  font-size:0.8rem;
  color:#555;
  padding:5px;
}
.scc-list dd a{
  color:#333;
}
.scc-list dd .scc-list-text-red{
  color:#e3244a;
}
.scc-list-text-margin{
  display: inline-block;
  margin-bottom:5px;
}
/*------ blog ------*/
.blog-list h2{
  border-top:1px solid #aaa;
  border-bottom:1px solid #aaa;
}
.blog-list-link a{
  display: block !important;
  border-bottom:1px solid #aaa !important;
  padding:12px !important;
  color:#333;
}
.blog-list-link br{
  display: none;
}
.blog-list-link hr{
  display: none;
}
/*------ other ------*/
.other-link{
  display: flex;
  align-items: center;
  justify-content: center;
  width:230px;
  margin:15px auto 10px !important;
  padding:15px 0 !important;
  border:1px solid #aaa !important;
  border-radius: 15px !important;
  color:#333 !important;
}