/*
Theme Name: Webirio Template 2column
Description: A theme by MACQA.
Author: Arakawa
Version: 1.01
*/

@charset "utf-8";

/* 初期設定リセット */
*{margin: 0;padding: 0}

a { text-decoration : none}
a:hover { text-decoration : underline}
ul.lsnone, ol.lsnone { list-style : none}
ul {padding: 0; margin: 10px 20px;line-height: 1;}
img {vertical-align : middle;}

html,body {
margin: 0;
padding: 0;
width : 100%;
height: 100%;
}

body {
overflow-x: hidden;
font-family: sans-serif;
}

/* レイアウト基本設定 */
.container {
max-width: 1080px;
margin: 0 auto;
text-align: left;
padding: 0;}

[class*="col-"] {padding:5px;margin: 0;}
.row {margin: 0;padding: 0;}

/* リンク */
a {color: #382d2a;}

a:hover,
a:focus,
a:active,
a.active {
color: #382d2a;
text-decoration: underline;
}

a,
a:hover,
a:focus,
a:active,
a.active {outline: 0;}

a img:hover {opacity:0.9;}

/* テキスト基本設定 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: sans-serif;
font-weight: bold;
}

.text-primary { color: #0076b0;}

p {
font-size: 14px;
line-height: 1.75;
text-align: left;
}

p.small {
font-size: 12px;
color: #666;
}

.b {
font-weight: bold;
font-size: 16px;
}

.bb {
font-weight: bold;
font-size: 18px;
}

.white {color: #fff;}
.red {color: #c60000;}
.blue {color: #00468b;}
.green {color: #00782d;}
.orange {color: #fe7816;}
.gold {color: #807109;}

.u {border-bottom: 1px solid;}

/* 画像センタリング */
.img-centered {margin: 0 auto;}

/* ヘッダブロック */
#header {
display: block;
position: relative;
text-align: left;
padding: 10px 0;
border-bottom: 1px solid #666;
width: 100%;
}

/* ロゴ */
#logo {
text-align: center;
margin: 0 auto;
}

#logo:hover,
#logo:focus,
#logo:active,
#logo.active {
color: #2097d0;
}

#logo img {
margin: 0 auto;
display: inline-block;
}

#header h1.sitename,
#header div.sitename {
margin: 30px 0 0 10px;
padding: 0;
text-align: left;
line-height: 1.1;
font-weight: normal;
font-size: 10pt;
}

@media(max-width:468px) {
#header h1.sitename,
#header div.sitename {
text-align: center;
margin: 0 auto;
}
}

/* ヘッダ広告 */
.topad {margin-top: 7px;}

/* ランキングBOX最下部 */
[class*="rankb-"] {
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
padding: 5px 15px 15px;
margin: 0 auto;
clear: both;
min-height: 60px;
}

.rankb-1 {background:#a9a169;color:#fff;}
.rankb-2 {background:#898a89;color:#fff;}
.rankb-3 {background:#917338;color:#fff;}
.rankb-4, .rankb-5 {background:#ddd;color:#333;}

@media(max-width:468px) {
[class*="rankb-"] .pull-right{
float: none !important;
}
[class*="rankb-"] {
text-align: center;
margin: 0 2%;
}
[class*="rankb-"] .comment {
text-align: left;
margin-top: 5px;
}
}

/* ランキング画像 */
h3.rank4 {
height: 120px;
padding-top: 25px;
padding-left: 100px;
background: url(../img/rnk4.png) no-repeat left;
}

h3.rank5 {
height: 120px;
padding-top: 25px;
padding-left: 100px;
background: url(../img/rnk5.png) no-repeat left;
}

/* ランキングレーダーチャート */
[id*="canvas"] {
width: 100%;
margin: 0 auto;
padding: 0;
font-size: 10px;
}

/* ランキングテーブル */
table {
border: 5px solid #ddd;
margin: 20px auto;
width: 100%;
}

.tline th, .tline td {
border: 1px solid #ccc;
padding: 5px;
}

.rnk_right ul {
margin:0 0 0 20px;
padding:10px 0;
line-height: 1.5;
}

/* ランキング上部見出し */
.midashi {
margin: 20px 1% 0;
padding: 10px 0;
border-top: 3px solid #8a8000;
border-bottom: 3px solid #8a8000;
font-size: 1.4em;
text-align: center;
}

/* ランキング見出し */
h3 a {
display: block;
padding:10px;
border-radius: 30px;
text-indent: 10px;
color: #fff;
text-align: center;
}

h3 a:hover {
background: #ff9900;
color: #fff;
text-decoration: none;
}

/* 「公式サイトへ」リンク */
.nextbtn a {
display: block;
width: 100%;
background: #537801;
font-size: 1.2em;
margin: 15px auto 0;
padding: 15px 0;
text-align: center;
line-height: 1;
vertical-align: -2px;
clear: both;
color: #fff;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.nextbtn a:hover {
color: #fff;
text-decoration: none;
background: #fb9726;
}

hr {
display: block;
border: 1px solid transparent;
height: 5px;
clear: both;
}

/* ランキングBOXキャッチコピー */
.copy {
line-height: 1.5;
font-size: 1.4em;
padding: 10px 0;
margin: 20px 0;
color: #cc0000;
font-weight: bold;
border-top: 3px dotted #ccc;
border-bottom: 3px dotted #ccc;
text-align: center;
}

/*----------ランキング枠線共通----------*/
[class*="rnk-"] {
margin: 30px auto 0;
padding: 0 5px 5px;
text-align: center;
border-style: solid;
border-width: 5px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
@media(max-width:468px) {
[class*="rnk-"] {margin: 30px 2% 0;}
}

.rnk-1 {border-color:#a9a169;}
.rnk-2 {border-color:#898a89;}
.rnk-3 {border-color:#917338;}
.rnk-4, .rnk-5, .rnk-6, .rnk-7, .rnk-8, .rnk-9, .rnk-10 {border-color:#ddd;}

.rnk_left img.rnk_img {
padding-right: 10px;}


.rnktitle {font-size: 18px;}

.rnkno {
display: inline-block;
text-align: center;
width:22px;
height:22px;
font-size: 12px;
line-height: 22px;
border-radius: 50%;
background-color:#fb595f;
color: #fff;
text-indent: 0;
}

.ranking {
min-height: 80px;
padding: 0 0 10px;
margin: 0 0 10px;
border-bottom: 1px dotted #ccc;
}

.ranking a {text-decoration: none;}
.ranking a:hover {text-decoration: underline;}


[id*="canvas"] {
margin: 30px  auto 0;
background; #ccc;
}

.sidethumb img {
display: block;
width: 80px;
height: 80px;
float: left;
margin-right: 10px;
}

.views {color: #666;font-size: 80%;}

/* メインカラム */
#main {
margin: 0 auto;
padding: 0;
text-align: left !important;
}

/* コンテンツ */
[id*="post"] {
margin-bottom: 35px;
background: #fff;
}
#description {
font-size:14px;
font-weight: normal;
margin-top: 15px;
}

p.snippet {
text-align: left;
line-height: 1.5;
color: #333;
font-size: 90%;
margin-bottom: 10px;
}

a.more {
display: block;
background: #f0f0f0;
width: 100%;
padding: 5px 0;
text-align: center;
}

.category {
border-top: 1px dotted #f0f0f0;
border-bottom: 1px dotted #f0f0f0;
padding: 5px 0;
}

.entry {
text-align: left;
padding-bottom: 30px;
}

.entry h1 {
font-size: 30px;
padding: 20px 0;
border-bottom: 2px solid #a9a169;
margin: 0;
}

.entry h2, .header {
font-size: 24px;
padding: 30px 0 30px 20px;
border-left: 10px solid #a9a169;
margin: 15px 0;
}

.entry h3 {
font-size: 22px;
padding: 20px 0 10px;
border-bottom: 5px solid #ccc;
margin-bottom: 10px;
}

.entry h4 {
margin: 20px 0;
padding: 5px;
background: #f0f0f0;
}

.entry img {
width: 100% !important;
height: auto;
margin: 30px auto;
}

.img {
height: 320px;
overflow: hidden;
position: relative;
margin: 30px auto;
}

.img img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
height: auto;
}

.posttitle {
height: 96px;
font-size: 22px;
}

/* TOPに戻るボタン */
a.gotop {
display: block;
margin: 10px auto 20px;
width: 55px;
height: 55px;
background: url(images/gotop.png);
}

a.gotop i {color: #fff;}

a.gotop span {display: none;}

.bland {text-align: center; margin-top: 30px;}

/* ページャー */
.pager{
text-align:center;
}
a.page-numbers,
.pager .current{
background:rgba(0,0,0,0.02);
border:solid 1px rgba(0,0,0,0.1);
border-radius:5px;
padding:5px 8px;
margin:0 2px;
}
.pager .current{
background:rgba(0,0,0,1);
border:solid 1px rgba(0,0,0,1);
color:rgba(255,255,255,1);
}

/* パンくず */

#breadcrumb ul {margin:0; padding: 0;}
#breadcrumb {
margin:5px 0 5px;
background:none;
padding: 0;
}
#breadcrumb li {
list-style: none;
float: left;
margin: 5px;
font-size: 12px;}

#breadcrumb :after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

.list-thumbnail img {width: 110px; height: 110px;margin: 0 10px 5px 0;}

/* サイドバー関連 */
#side {
padding:30px 0;
}

@media(max-width:468px) {
#side {margin: 0 2%;}
}

.menu {
margin:0;
padding:5px 0;
font-size: 1em;
font-weight: bold
line-hegiht: 1.1;
color: #fff;
text-align: center;
border-radius: 15px;
}

/* レコメンド見出し */
.recommend-header {
margin:0;
padding:10px 0;
font-size: 1.2em;
font-weight: bold
line-hegiht: 1.1;
color: #fff;
text-align: center;
border-radius: 10px 10px 0 0 ;
}

.recommend {
padding: 10px;
margin-bottom: 30px;
text-align: center;
background: #fefefe;
border-radius: 0 0 15px 15px;
border-right: 3px solid;
border-bottom: 3px solid;
border-left: 3px solid;
}

.recommend p {
line-height: 1.25;
}

/* コンテンツリスト */
#side ul{
margin:0;
padding:10px 1%;
list-style: none;
}

#side ul li a{
margin:0 0 3px 0;
padding:10px;
background:#f7f7f7;
border-left:5px solid #e0e0e0;
display:block;
text-decoration:none;
color:#333333;
}

#side aside {
border-left: none;
border-bottom: none;
margin: 0 auto;
padding: 10px 0;
text-align: left !important;
line-height: 1.5;
}

#side aside li {
line-height: 1.5;
}

.ad a {margin: 10px auto;}

.sideheader {
margin: 0;
padding: 10px;
font-size: 16px;
letter-spacing: 0.3em;
clear: both;
background: #eee;
}

#searchform input {
padding: 0;
margin: 0;
}

#searchform input#s {
width: 60%;
padding: 0 3px;
margin: 5px;
border: none;
height: 30px;
border: 1px solid #ccc;
}

#searchform input#bt {
padding: 0;
margin: 0 0 -10px;
border: none;
height: 30px;
}

#recent-posts-2 .sideheader:before {
content: "\f0f6";
font-family: FontAwesome;
}
#categories-2 .sideheader:before {
content: "\f115";
font-family: FontAwesome;
}
.rnkheader:before {
content: "\f006";
font-family: FontAwesome;
}

.adsense {
margin: 20px auto;
}

/* フッター */
#footer {
padding: 0 0 10px;
text-align: center;
border-top: 1px solid #666;
clear: both;
}

#footer p {
line-height: 1;
font-size: 10px;
color: #999;
}

#footer img {max-width: 300px;}

#copyright {font-size: 12px;margin: 10px 0;}

/* PC・スマホ表示切替 */
.pc {display: none;}
.sp {display: block;}

.wp-post-image {
max-width:100% !important;
height:auto !important;
}

/* メディアクエリ768px以上 */
@media(min-width:768px) {

#logo img {
margin: 0;
float: left;
}

.pc {display: block;}
.sp {display: none;}

#main {
margin: 0 auto;
padding: 30px;
}

[class*="rnk-"] {
margin: 30px auto 0;
padding: 0 15px 15px;
text-align: center;
border-style: solid;
border-width: 5px;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

[class*="rankb-"] {margin: 0;}

table {
width: 100%;
margin: 20px auto;
}

.midashi {margin: 20px 0 0;}

#side aside {
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 auto;
padding: 10px;
text-align: left !important;
line-height: 1.5;
}

.sideheader {
margin: 0;
padding: 20px;
font-size: 16px;
letter-spacing: 0.3em;
clear: both;
background: none;
}

[id*="post"] {
height: 100%;
}

.entry {margin: 0 2%;}

#side ul li a{
margin:0 0 3px 0;
padding:10px;
background:#f7f7f7;
border-left:5px solid #e0e0e0;
display:block;
text-decoration:none;
color:#333333;
}

#side ul li a:hover{
color:#FC5179;
border-left:5px solid #FC5179;
}


}/* メディアクエリ終了 */

/* リンクアニメーション */
#side li a,
[class*="rnk"] a {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

/* サイトカラー指定 */

/* ヘッダ上部ライン */
#header {border-top: 5px solid #146f70;}
/* ランキング記事タイトル&公式サイトへボタン&サイドヘッダー背景 */
h3 a, .nextbtn a, .menu {background: #146f70;}

#header {background: #f9f6f1;} /* ヘッダ背景 */
#footer {background: #f9f6f1;} /* フッタ背景 */

.recommend-header {background: #ff6577;}/* サイドレコメンド見出し背景 */
.recommend {border-color: #ff6577}/* サイドレコメンド枠線 */

#footer a {color: #333} /* フッタリンクテキスト */