#wrap {
width:100%;
margin:0 auto;
margin-bottom:50px;
padding:0 5px;
}
#wrap:before {
display:block;
width:100%;
clear:both;
content:"";
}
#wrap:after {
display:block;
width:100%;
clear:both;
content:"";
height:100px;
}
h1 {
font-weight:normal;
margin:10px 0;
padding:5px;
font-size:1.4em;
}
h1 span {
display:block;
font-size:0.6em;
margin:0;
text-align:center;
}
#wrap h2 {
clear:both;
display:block;
color:#0080FF;
font-size:20px;
margin-top:20px;
}
#wrap h2 i {
color:#FF8000;
font-size:25px;
margin-right:5px;
}
#wrap .head_howto {
margin-bottom:40px;
}
#wrap .head_howto h3 {
font-size:1em;
font-weight:normal;
line-height:2;
width:100%;
display:inline-block;
margin:0;
}
#wrap .head_howto h3 span {
background-image:linear-gradient(transparent 60%, #FEE500 60%);
padding:0 10px;
font-weight:bold;
}
#wrap .head_howto img {
width:100%;
}




#rookie_title {
text-align:center;
font-size:1.8em;
color:#555;
margin:20px 0;
margin-top:100px;
}
#rookie_title span {
color:#0066cc;
}







.cate_btn {
width:100%;
margin:80px auto;
text-align:center;
}

.cate_btn a {
display:inline-block;
border:3px #0066cc solid;
background:#FFFCBD;
color:#000;
padding:20px 30px;
border-radius:5px;
font-weight:bold;
transition:0.3s;
}

.cate_btn a i {
margin-left:10px;
}

.cate_btn a:hover {
background:#0066cc;
color:#fff;
}







#ranking {
margin:0;
width:100%;

}

#ranking ul {
float:left;
width:100%;
margin:0;
padding:0;
list-style:none;
counter-reset: number 0;
}

#ranking ul li::before {
counter-increment: number 1;
content: counter(number);
background:#B40404;
color:#fff;
padding:5px 20px 10px 10px;
font-size:0.8em;
position:absolute;
border-radius:0 0 50px 0;
} 

#ranking ul li {
float:left;
margin:0;
padding:0;
width:50%;
}

#ranking ul li a {
display:block;
border:1px #ddd solid;
padding:20px;
margin-left:-1px;
margin-top:-1px;
}

#ranking ul li a img {
display:block;
margin:0;
width:100%;
max-width:300px;
}

#ranking ul li a .item_name {
color:#0066cc;
font-size:0.8em;
height:60px;
overflow:hidden;
margin-bottom:10px;
}
#ranking ul li a:hover .item_name {
text-decoration:underline;
}

#ranking ul li a .item_stock {
margin:0;
}

#ranking ul li a .item_price {
color:#B40404;
}









#kanren {
margin:20px 0;
padding:0;
list-style:none;
width:100%;
}
#kanren li {
margin:0;
padding:0;
width:100%;
}
#kanren li a {
display:block;
padding:15px;
border:3px #0066cc solid;
border-radius:10px;
color:#333;
font-weight:bold;
font-size:1.2em;
text-decoration:none;
margin:10px;
transition:0.3s;
}
#kanren li a img {
display:inline-block;
width:50px;
position:relative;
z-index:-2;
}
#kanren li a span {
position:relative;
top:-13px;
left:10px;
}
#kanren li a:hover {
background-color:rgba(0,102,204,0.05);
}






/* さらに表示
---------------------------------------------------*/
.grad-wrap {
  position: relative;
}


.grad-btn {
 z-index: 2;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 148px;
  margin: auto;
  padding: .5em 0;
  border-radius: 30px;
  background: #0066cc;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.grad-btn:hover {
  background: #fff;
  color: #0066cc;
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 270px; /*隠した状態の高さ*/
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}




.under-up_btn {width:100%;margin:100px auto;text-align:center;}
.under-up_btn a {display:inline-block;color:#fff;background:#0080FF;padding:15px;width:80%;border-radius:50px;box-shadow:4px 4px 1px 1px #eee;font-weight:bold;font-size:1.2em;transition:0.3s;}
.under-up_btn a i {}
.under-up_btn a:hover {background:#0431B4;}


.info {width:100%;margin:0 auto;text-align:center;background:#eee;border-radius:10px;padding:20px;float:left;padding-bottom:40px;}
.midashi {font-size:1.6em;color:#0066cc;font-weight:bold;border-bottom:3px #ccc dotted;padding:10px 0;padding-top:0;}
.sub_com {margin:10px 0;}

.info ul {margin:0 auto;padding:0;list-style:none;width:100%;}
.info ul li {margin:0;padding:0;}
.info ul li img {width:80%;margin:10px 0;}
.info ul li a {display:block;}




/******************************/
/* override                   */
/******************************/


i.fa-question-circle {
    margin-right: 4px;
}

#wrap h2.point-ttl {
    margin: 7.8% 0 0.5%;
    font-size: 1.25em;
    color: #000;
    letter-spacing: 0.035em;
}

#wrap .point-wrap {
    width: 93.9%;
    margin: 1.8% auto 0;
    padding: 27px 31px 16px;
    box-sizing: border-box;
    line-height: 2.02;
    border: 1px solid #707070;
}
#wrap .point-wrap--ttl {
    font-weight: bold;
    color: #3180FF;
}
#wrap .point-wrap--desc {
    margin:0.7% 0 0;
}