@charset "utf-8";

body,input,textarea{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;color:#333;}
*{box-sizing:border-box; margin:0; padding:0;}
.cf:after{content:"";clear:both;display:block;}
.container{max-width:1200px; margin-left: auto; margin-right: auto;}

header .header_inner{border-bottom:2px solid #f5f5f5;}
header .container h1{width: 75%;}
header .container h2{width: 25%;}
section .section_inner{border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;}

footer .footer_inner{border-top:2px solid #f5f5f5;}
footer .footer_inner .copy{font-size:12px; color:#aaa; text-align:center;}

#option p{width:25%;float:left;font-size:12px;}
#main{width:75%;float:left;}
#side{width:25%;float:left;}
/* #countUseKw{display:none;} */
.keywords{border:none;background:none;width:100%;height:35px;line-height:35px;text-align:center;white-space:normal;}
.keywords.hover{background:#f0f0f0;}
.keywords.focus{background:#eaeaea;}
table.key{width:100%;border-collapse:collapse;}
table.key tr:nth-child(2n){background:#fafafa;}
table.key td{width:50%;border:1px solid #f0f0f0;}

textarea#input{width:100%;height:400px;display:block;border:none;margin:0;}
textarea#input{background-position:30px 30px;background-repeat:no-repeat;background-color:#fff;}
textarea#input.ini{background-image:url(../img/plhld.png);}
textarea#input.ovr{background:url(../img/ovr.png) center center #fff5f5 no-repeat;}
#results{min-height:180px;}

header .container h1{font-size:12px;font-weight:500;}
.logo{max-width:280px;}

.menu_h2{font-weight:500;color:#666; font-size:18px;}
.menu_h3{font-weight:100;font-family:"Raleway", sans-serif;font-size:24px;position:relative;}
.menu_h3 .h3_inner{background:#fff;}
.menu_h3:after{content:"";border-top:dotted 1px #aaa;width:100%;position:absolute;top:50%;margin:-1px 0 0;display:block;z-index:-1;}

.result{font-size:14px;}
.result_value{color:#005BAC;font-size:32px;font-weight: 800;font-family:"Play";text-align:center;}

#limit{border:1px solid #ddd;}
#init{border:none;width:100%;font-size:20px;border-top:1px solid #ddd;}
#init.hover{background:#f8f8f8;}
#init.focus{background:#f0f0f0;}

#selectBox{position: relative;width:100%;}
#selectBox:before{content: "▼";position: absolute;right: 0;line-height: 2;display: inline-block;top: 0%;bottom: 0%;border-left: 1px solid #f5f5f5;padding: 0 .25em;color:#666;text-shadow:1px 1px 1px rgba(0,0,0,.5);}
#selectBox:hover:before{background:#f8f8f8;}
#selectBox select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;}
#selectBox #selectText{border:1px solid #ddd;display:block;width:100%;font-size:12px;}

[type=button]{padding:2px 5px;}

.decoCheck{
  position:relative;
}
.decoCheck > input[type=checkbox]{
  height:25px;
  width:25px;
  visibility:hidden;
  vertical-align: middle;
}
.decoCheck > input[type=checkbox] + label{
  cursor:pointer;
  padding: 0 5px 0;
  margin: 0 5px 0;
}
.decoCheck > input[type=checkbox] + label:before{
  content:"";
  width:25px;
  height:25px;
  background:url(../img/check_2.png) no-repeat;
  position:absolute;
  top:0;
  left:0;
  opacity:1;
  transition:opacity .3s ease;
}
.decoCheck > input[type=checkbox]:checked + label:before{
  background:url(../img/check_1.png) no-repeat;
}
.decoCheck > input[type=checkbox] + label:hover:before{
  box-shadow:0 0 3px rgba(0,0,0,.6);
}
@media (max-width:768px){
  header .container h1{width: 100%;}
  header .container h2{width: 100%;}
  #option p{width:50%;}
}
@media (max-width:553px){
  #main{width:100%; float:none;}
  #side{width:100%; float:none;}
  #option p{width:100%;font-size:14px;margin-bottom:10px;}
}