/*******************
 *  Base
 *******************/
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,button,input,textarea,select,p,blockquote,th,td{
  margin:0px;
  padding:0px;
  -moz-box-sizing border-box;
  box-sizing:border-box;
  line-height:100%;
  line-height:inherit;
  line-height:inherit;
  font-family:inherit;
  font-weight:normal;
  font-size:inherit;
}

body{
  margin:0;
  padding:0px;
  font-family: 'TsukuARdGothic-Regular','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN','YuGothic',
  '游ゴシック',Meiryo,メイリオ,Helvetica,Arial,sans-serif;
  font-size:15px;
  color:#323232;
}
ul {
  margin-left:30px;
}
a {
  color:#0E1BBB;
}
a:hover {
  color:#CC3434;
}
.pos_r{
  text-align:right;
}
.pos_c{
  text-align:center;
}
.pos_l{
  text-align:left;
}
.size_small{
  font-size:90%;
}



/*******************
 *  form
 *******************

/*
input[type="submit"]{
  width:100%;
  border-width:1px;
  padding:5px 30px;
  line-height:100%;
  background:#DDDDDD;
  -moz-box-sizing border-box;
  box-sizing:border-box;
}
*/

select {
  border:1px solid #AAAAAA;
}
select option{
  padding:2px;
  display:block;
}

/*******************
 *  radio button
 *******************/

.radio{

}
.radio input[type="radio"]{
  display: none;
}
.radio input[type="radio"] + span{
  padding-left: 20px;
  position:relative;
  margin-right: 10px;
}
.radio input[type="radio"] + span::before{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0px;
  width: 13px;
  height: 13px;
  border: 1px solid #999;
  border-radius: 50%;
}
.radio input[type="radio"]:checked + span{
}
.radio input[type="radio"]:checked + span::after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 9px;
  height: 9px;
  background: #666666;
  background: #CC3434;
  border-radius: 50%;
}


/*******************
 *  checkbox
 *******************/

.checkbk{

}
.checkbk input[type="checkbox"]{
  display: none;
}
.checkbk input[type="checkbox"] + span{
  padding-left: 20px;
  position:relative;
  margin-right: 30px;
}
.checkbk input[type="checkbox"] + span::before{
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0px;
  width: 13px;
  height: 13px;
  border: 1px solid #999;
}
.checkbk input[type="checkbox"]:checked + span{
}
.checkbk input[type="checkbox"]:checked + span::after{
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 5px;
  height: 8px;
  /*background: #666666;
  background: #CC3434;*/

  transform: rotate(30deg);
  border-bottom: 3px solid #CC3434;
  border-right: 3px solid #CC3434;
}


/*****************************
 *  SNS icons
 *****************************/
.social_button_area{
  display: flex;
  justify-content: space-around;
  margin:15px 0px;
}
.social_button_area img{
  height:50px;
  width:auto;
}

/*******************
 *  common parts
 *******************/

#container{
  max-width:800px;
  margin:auto;
}
#wrap_all{
  margin:10px;
}

#header_in a{
  font-size:24px;
  text-decoration:none;
  color:#444444;
  font-weight:bold;
  border-left:25px solid #CC3434;
  border-right:25px solid #CC3434;
  line-height:100%;
  padding:2px 5px;
  display:inline-block;
}
#footer {
  border-top:1px solid #AAAAAA;
  border-bottom:1px solid #AAAAAA;
  background:#EEEEEE;
  text-align:center;
  padding:5px;
  margin-top:15px;
}

#content {
}

#navi {
  border-top:1px solid #AAAAAA;
  border-bottom:1px solid #AAAAAA;
  margin-bottom:0px;
  background:#EEEEEE;
}
#navi ul{
  margin-left:0px;
}
#navi li{
  display:inline-block;
}
#navi li+li{
  border-left:1px solid #AAAAAA;
}
#navi li a{
  display:block;
  padding:5px 10px;
  font-size:16px;
  text-decoration:none;
}
#navi li a:hover{
  background:#F5F5F5;
  text-decoration:underline;
}
table.mranking{
  border-collapse:separate;
  border-spacing: 0;
  width:100%;
  margin-bottom:10px;
}
table.mranking thead th{
  position: -webkit-sticky;
  position: sticky;
  top: 84px;
  z-index: 2;
}
table.mranking td{
  border-bottom:1px solid #AAAAAA;
  border-right:1px solid #AAAAAA;
}
table.mranking th{
  border-top:1px solid #AAAAAA;
  border-right:1px solid #AAAAAA;
  border-bottom:1px solid #AAAAAA;
  padding:5px;
  background:#EEEEEE;
}
table.mranking th.controlbar {
  border-top:0px solid #AAAAAA;

}


table.mranking th:first-child,
table.mranking td:first-child {
  /* Apply a left border on the first <td> or <th> in a row */
  border-left: 1px solid #AAAAAA;
}
#ptitle{
  position: -webkit-sticky;
  position: sticky;
  top: 30px;
  z-index: 2;
  background:#FFFFFF;
  height:54px;
}
#ptitle p{
  font-weight:bold;
  font-size:120%;
  line-height:100%;
  padding:14px 8px;
  border-bottom:4px double #AAAAAA;
}
#kuz{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 2;
  font-size:90%;
  padding:5px 8px;
  border-bottom:1px dotted #AAAAAA;
  background:#FFFFFF;
}
#kuz .here{
  color:#CC3434;
  font-weight:bold;
}


/*******************
 *  other parts
 *******************/

#consolebox{
  border:1px solid #AAAAAA;
  padding:5px;
  margin: 10px;
  background:#F4F4F4;
}
.consoleboxtitle{
  display:inline-block;
  width:180px;
  padding-left:10px;
  font-weight:bold;
  background:#C8E4B2;
  padding:3px 5px;
  text-align:center;
}
.consolediscription {
  padding:3px 3px 3px 20px;
}
.consoleitem+.consoleitem{
  border-top:1px dotted #AAAAAA;
  padding-top:5px;
  margin-top:5px;
}
.consolelink {
  display:block;
  color:#FFFFFF;
  font-size:110%;
  /*text-decoration:none;*/
  padding:10px;
  background:#689F38;
  line-height:100%;
}
a.consolelink:hover{
  background:#79BD43;
  color:#FFFFFF;
}
#consolelinkback {
  padding:0px;
}
#consolesubmitbutton {
  width:100%;
  padding:10px;
  font-size:110%;
  line-height:100%;
}
#consolesubmitbutton:hover {
  /*background:#79BD43;*/
}

.submitwrapper {
  margin:2px 10px;
}


.labelsin label{
  display:block;
}


.contentslist{
}
.contentslist li{
  line-height:170%;
}

div.ktext_contents{
  padding:0px 15px 0px 15px;
}
div.ktext_contents + div.ktext_contents{
  margin-top:15px;
}
.colmun3 {
  -webkit-columns: 3;
  -moz-columns: 3;
  -ms-columns: 3;
  columns: 3;
}
.colmun2 {
  -webkit-columns: 2;
  -moz-columns: 2;
  -ms-columns: 2;
  columns: 2;
}
.kijiinfo{
  text-align:right;
  margin:0px 0px 5px 0px;
}
.optmuninfo {
  padding-top:6px;
}
.optmuninfo ul {
  list-style-type:none;
  margin:0px;
  padding:0pc;
  border-bottom:1px dotted #AAAAAA;
}
.optmuninfo ul li{
  padding:0px 0px 6px 15px;
  line-height:100%;
}
.optmuninfo_title {
  display:inline-block;
  width:100px;
}


/*******************
 *  Media Queries
 *******************/

#header_in{
  margin:15px 0px 10px 0px;
  text-align:left;
}

.labelsin{
  -webkit-columns: 3;
  -moz-columns: 3;
  -ms-columns: 3;
  columns: 3;
}

table.mranking td{
  padding:3px;
}
@media screen and (max-width : 799.9px) {
  .labelsin{
    -webkit-columns: 2;
    -moz-columns: 2;
    -ms-columns: 2;
    columns: 2;
  }
  #header_in{
    margin:15px 0px 10px 0px;
    text-align:center;
  }
  table.mranking td{
    padding:12px 3px;
  }
  body{
    font-size:18px;
  }
@media screen and (min-width : 800px) {
  .labelsin{
    -webkit-columns: 3;
    -moz-columns: 3;
    -ms-columns: 3;
    columns: 3;
  }
  #header_in{
    margin:15px 0px 10px 0px;
    text-align:left;
  }
  table.mranking td{
    padding:3px;
  }
  body{
    font-size:15px;
  }
}