@charset "utf-8";
/* CSS Document */

/*主に
サイドバー
フォトレビュー
ソーシャルリンク
最新記事ランキング
占いコーナー
その他オススメ記事
右側広告
の設定がされています。
*/

.bg-braun{
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-color: #806d6e;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #7f6a6b), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #7f6a6b),
            color-stop(.75, #7f6a6b), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(45deg, #7f6a6b 25%, transparent 25%,
          transparent 50%, #7f6a6b 50%, #7f6a6b 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, #7f6a6b 25%, transparent 25%,
          transparent 50%, #7f6a6b 50%, #7f6a6b 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, #7f6a6b 25%, transparent 25%,
          transparent 50%, #7f6a6b 50%, #7f6a6b 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, #7f6a6b 25%, transparent 25%,
          transparent 50%, #7f6a6b 50%, #7f6a6b 75%,
          transparent 75%, transparent);
background-image: linear-gradient(45deg, #7f6a6b 25%, transparent 25%,
          transparent 50%, #7f6a6b 50%, #7f6a6b 75%,
          transparent 75%, transparent);}
.bg-green{
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-color: #97C49C;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #92c397), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #92c397),
            color-stop(.75, #92c397), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(45deg, #92c397 25%, transparent 25%,
          transparent 50%, #92c397 50%, #92c397 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, #92c397 25%, transparent 25%,
          transparent 50%, #92c397 50%, #92c397 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, #92c397 25%, transparent 25%,
          transparent 50%, #92c397 50%, #92c397 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, #92c397 25%, transparent 25%,
          transparent 50%, #92c397 50%, #92c397 75%,
          transparent 75%, transparent);
background-image: linear-gradient(45deg, #92c397 25%, transparent 25%,
          transparent 50%, #92c397 50%, #92c397 75%,
          transparent 75%, transparent);}
.bg-yellow{
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-color: #EBC13B;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #e6bb31), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #e6bb31),
            color-stop(.75, #e6bb31), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(45deg, #e6bb31 25%, transparent 25%,
          transparent 50%, #e6bb31 50%, #e6bb31 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, #e6bb31 25%, transparent 25%,
          transparent 50%, #e6bb31 50%, #e6bb31 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, #e6bb31 25%, transparent 25%,
          transparent 50%, #e6bb31 50%, #e6bb31 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, #e6bb31 25%, transparent 25%,
          transparent 50%, #e6bb31 50%, #e6bb31 75%,
          transparent 75%, transparent);
background-image: linear-gradient(45deg, #e6bb31 25%, transparent 25%,
          transparent 50%, #e6bb31 50%, #e6bb31 75%,
          transparent 75%, transparent);
}
/* 右カラム----------------------- */
.sidebar-box {
padding: 0;
margin: 0 0 8px 0; /*サイドバー各ボックスの下部分のマージン*/
}
.sidebar-box::after{
content: "";
display: block;
clear: both;
　}

/* 汎用コーナータイトル見出し */
.sidebar-box h2{
text-align: left;
padding:8px;
text-shadow:1px 1px 0 rgba(0,0,0,0.2);
font:700 14px /1 "";
color: rgba(255, 255, 255, 0.7);
}
.sidebar-box h2:after{
  float: right;
  font: 300 12px/14px "Georgia","Times New Roman", "Times, serif" !important;
  letter-spacing: 8px;
}
div#interview h2:after {
  content: "Interview";
  color: #B39C9D;
}
div#event h2:after{
  content: "Event";
  color: #D6E2CE;
}
/* インフォメーション設定 */
#information{
padding:8px;
border: 2px solid #675959;
background:#FFFEF7;
}
#information h2{
background:#675959 ;
margin: -8px -8px 8px;
}
#information p{
font:300 0.8rem/1.6 "";
}

/* 特集枠--------------------------------------------------------- */
.interview{
border: 1px solid #F5CECB;
background-color: #806d6e;
box-shadow: inset 0 0 35px rgba(143,97,99,.7);
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-color: #806d6e;

}
.event{
border: 1px solid #F5CECB;
background-color: #97C49C;
box-shadow: inset 0 0 35px rgba(137,196,135,.3);
-webkit-background-size: 20px 20px;
-moz-background-size: 20px 20px;
background-size: 20px 20px;
background-color: #97C49C;
}
.special .box{
margin: 0 0 4px 0;
}
.special .box i{
border-top: 1px dashed rgba(0,0,0,.2);
display: block;
height: 180px;
width: 100%;
overflow: hidden;
}
.special .box i img{
width:100%;
height: auto;
/*max-height: 300px;*/
}
.special ul{
padding: 6px 8px 2px;
overflow: hidden;
color: rgba(255, 254, 247, 0.6);
font:300 .75rem/1.5 "";
border-top: 1px dashed rgba(0,0,0,.2);
}
.special ul li{
float: left;
}
.special ul .genre a{
color: rgba(255, 254, 247, 0.6);
}
.special ul .genre{
display:inline-block;
color: rgba(255, 254, 247, 0.6);
padding: 0 10px;
}
.special ul .genre:before{
content: "s";
font: .9rem/1 "otajo";
margin: 0 4px 0 0;
}
.special ul time{
font:300 .8rem/18px "Georgia","Times New Roman", "Times, serif" !important;
}
.special time:before{
content: "@";
font: 300 .9rem/1 "otajo" !important;
margin: 0 4px 0 0;
}
.special .box h5 a{
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
display: block;
font: .9rem/1.4"";
color: #FFFEF7;
padding: 8px;
font-weight: bold;
}

/* ソーシャルアイコン */
#sosial-icon{
clear: both;
overflow: hidden;
background: #fcbec9;
box-shadow: inset 0 0 35px rgba(250,168,182,.7);
}
#sosial-icon li{
width: 49.999999%;
float: left;
display: block;
}
#twitter-icon,
#facebook-icon,
#rssfeed-icon,
#google-icon{
position: relative;
height: 80px;
margin:0;
display: block;

color: rgba(255,254,238,1);
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
#twitter-icon:before,
#facebook-icon:before,
#rssfeed-icon:before,
#google-icon:before{
font:300 2.5rem/1 otajo;
text-shadow: 2px 2px 0 rgba(0,0,0,.2);
top:20px;
left:35%;
position: absolute;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);

animation-name: expandUp;
-webkit-animation-name: expandUp;
animation-duration: 0.7s;
-webkit-animation-duration: 0.7s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
@keyframes expandUp {
0% {
transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
transform: translateY(-7%) scaleY(1.12);
}
75%{
transform: translateY(3%);
}
100% {
transform: translateY(0%) scale(1) scaleY(1);
}
}
@-webkit-keyframes expandUp {
0% {
-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
}
60%{
-webkit-transform: translateY(-7%) scaleY(1.12);
}
75%{
-webkit-transform: translateY(3%);
}
100% {
-webkit-transform: translateY(0%) scale(1) scaleY(1);
}
}
#twitter-icon:before{
content: "t";
}
#rssfeed-icon:before{
content: "r";
}
#facebook-icon:before{
content: "f";
}
#google-icon:before{
content: "g";
}
#twitter-icon:hover{background-color: #41b7d8;box-shadow: inset 0 0 35px rgba(250,168,182,.4);}
#facebook-icon:hover{background-color:#3b5997;box-shadow: inset 0 0 35px rgba(250,168,182,.4);}
#rssfeed-icon:hover{background-color:#e0812a;box-shadow: inset 0 0 35px rgba(250,168,182,.4);}
#google-icon:hover{background-color: #d64937;box-shadow: inset 0 0 35px rgba(250,168,182,.4);}

#twitter-icon:hover:before,
#facebook-icon:hover:before,
#rssfeed-icon:hover:before,
#google-icon:hover:before{
text-shadow: 2px 8px 4px rgba(0,0,0,.2);
top:15px;
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
#twitter-icon span,
#facebook-icon span,
#rssfeed-icon span,
#google-icon span{
position: absolute;
bottom: -5px;
letter-spacing: 0.2em;
font: 300 0.75rem /1 Georgia, "Times New Roman", Times, serif;
color: rgba(255,255,255,0);
/* アニメーション指定 */
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-property: -webkit-transform;
}
#twitter-icon span{ left:30%; color: rgba(255,255,255,0);}
#facebook-icon span{ left:28%; color: rgba(255,255,255,0);}
#rssfeed-icon span{left:38%; color: rgba(255,255,255,0);}
#google-icon span{ left:30%; color: rgba(255,255,255,0);}

#twitter-icon:hover span,
#facebook-icon:hover span,
#rssfeed-icon:hover span,
#google-icon:hover span{
color: rgba(255,255,255,.8);
text-shadow: 1px 1px 0 rgba(0,0,0,.2);
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
/* フォトレビュー-------------------------------------------------------------- */
#photoreview{
background: url(../img/photoreview-baner.png);
display: block;
width: 300px;
height: 80px;
}
#moviereview{
background: url(../img/moviereview-baner.png);
display: block;
width: 300px;
height: 80px;
}
/* 週間ランキング　----------------------------------------------------------*/
.popular-posts {
width: auto;
/*border: 2px solid #EBC13B;*/
border: 1px solid #F5CECB;
}
.popular-posts h2{
background: #EBC13B;
}
.popular-posts ul{
counter-reset:li;  /*カウンターのリセット*/
}
.popular-posts p{
display: none;
}
.popular-posts ul li{
position:relative;
font: 300 0.8rem /1.5em "";
border-bottom: 1px dashed rgba(0,0,0,.1);
}
.popular-posts ul li:nth-child(odd){
background:rgba(255,254,238,1);
}
.popular-posts ul li:nth-child(even){
background:rgba(255,254,238,0.85);
}
.popular-posts ul li a:before{
letter-spacing:-0.1em;
font: 1.6rem /1em 'Voltaire', sans-serif;
text-shadow:1px 1px 0 rgba(100,0,0,.1);
color: #a98e65;
position:absolute;
top:10px;
left:13px;
content:counter(li); /*カウンターのインデックスを挿入*/
counter-increment:li; /*ナンバリングを生成*/
z-index: 200;
/*アニメーション指定*/
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.popular-posts ul li:nth-child(1) a:after{
font:300 1.7rem/1 "otajo";
color: rgba(240,198,0,1);
content: "冠";
position:absolute;
top:30px;
left:4px;
}
.popular-posts ul li:nth-child(2) a:after{
font:300 1.5rem/1 "otajo";
color: rgba(210,210,210,1);
content: "冠";
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
position:absolute;
top:32px;
left:5px;
}
.popular-posts ul li:nth-child(3) a:after{
font:300 1.3rem/1 "otajo";
color: rgba(192,146,88,1);
content: "冠";
position:absolute;
top:33px;
left:9px;
}
.popular-posts ul li:last-child:before{
left:10px;
}
.popular-posts ul li a{
padding:8px 8px 8px 40px;
display:block;
/*アニメーション指定*/
-moz-transition: 0.1s linear;
-webkit-transition: 0.1s linear;
transition: 0.1s linear;
}
.popular-posts ul li a:hover:before{
text-shadow:2px 2px 0 rgba(100,0,0,.05);
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.popular-posts ul li a:hover{
box-shadow: 2px 4px 0 0 rgba(0,0,0,.2);
background: #FFFFF7;
z-index: 199;
text-decoration: none;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.popular-posts ul li:last-child{
border:none;
}

/* その他オススメ ------------------------------------------------------- */
#extract{
background: #79C0DB;
box-shadow: inset 0 0 35px rgba(78,153,182,.2);
}
#extract h2{
}
#extract ul{
padding:0;
}
#extract ul li{
position: relative;
font: 300 0.8rem /1.5em "";
border-bottom: 1px solid rgba(0,0,30,.1);
}
#extract ul li:after{
position: absolute;
top:40%;
left:-5px;
content: "〉";
font-size: 2em;
color: rgba(255,255,255,0);
/*アニメーション指定*/
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
}
#extract ul li a{
color:#FFFEF7;
background: #79C0DB;
padding:8px 24px 8px 8px;
display:block;
/*アニメーション指定*/
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
#extract ul li:hover:after{
color: rgba(255,255,255,.6);
-webkit-transform: translateX(9px);
-ms-transform: translateY(9px);
transform: translateX(9px);
}
#extract ul li a:hover{
text-decoration: none;
margin: 0 0 0 20px;
padding:8px 4px 8px 8px;
color:#FFFEF7;
background: #79C0DB;
}
#extract ul li a:after{
margin:0 0 0 5px;
color: rgba(255, 255, 255, 0);
content:"...more"
}
#extract ul li a:hover:after{
color: rgba(255, 255, 255, .9);
}
/*タグクラウド*/
.tag-cloud{padding: 4px;}
.tag-cloud a {
color: #FFFEF7 !important;
font:normal 100%/1.1 "";
padding: 2px;
border-radius: 5%;
text-shadow: 1px 1px 0 rgba(161,124,93,.2);
/*background: rgba(161,124,93,1);*/
margin: 0;
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.partners,
.sosial-area{
background-color: #806d6e;
border: 1px solid #F5CECB;
}
.partners ul li a:before{
margin: 0 4px 4px 0;
font: .8rem/1 "otajo";
content: "c";
}
.partners ul li a:hover:before{
font: 1.5rem/1 "otajo";
-moz-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.partners ul li:nth-child(odd) a{
background:rgba(255,254,238,1);
}
.partners ul li:nth-child(even) a{
background:#fef7ea;
}
.partners a{
padding:12px;
display: block;
font: 16px/1.5"";
border-bottom: 1px dashed rgba(0,0,0,.1);
}
/*FACEBOOK-------------------------------------*/
#parts-facebook{
border: 2px solid #7997D3;
background-color: #7997D3;
}
._4s7c{
border: none !important;
}
.facebook-bg{
background: #FFFEF7;
overflow: hidden;
}
/* ここからレスポンシブ化の設定---------------------------------------------------------- */
/* PC用 */
@media only screen and (min-width:960px){
}

@media screen and (max-width: 480px) {
#execphp-19{
  display: none;
}
#rightColumn{
margin: 0;
padding: 0;
}
.sidebar-box {
overflow: hidden;
margin: 0 auto 4px;
width:auto;
padding: 0;
}
.sidebar-box img{
width:100%;
}
#search-area-center {
margin: 0 auto;
width: 100%;
padding: 0 0 5px;
overflow: hidden;
}
.bg {
margin: 0 auto;
}
#new-ranking {
width: auto;
border:0;
}
#new-ranking ol li:nth-child(odd){
background:rgba(255,255,255,0.9);
}
#new-ranking ol li:nth-child(even){
background:rgba(255,255,255,0.6);
}
#new-ranking ol li a:active{
color: #FFFFF7;
}
#w_ranking h2 {
background-size:100%;
height: 40px;
}
#w_ranking ol li:nth-child(-n+3){
background-image:none;
width: auto;
padding:8px 0 5px 5px;
}
.seizanext{
border: 1px solid rgba(0,0,0,.3);
border-bottom: 1px solid rgba(0,0,0,.3);
color: #eee !important;
margin:0;
padding: 1rem;
text-align:center;
font:bold 1rem/1 "";
overflow: hidden;
}
.seizanext:focus,
.seizanext:hover,
.seizanext:active{
background: #f98789;
text-decoration: none;
}
#extract ul li a{
min-height: 60px;
}
#extract ul li a:active{
background:#248db5;
}
.interview,
.event,
.partners,
#parts-facebook{border:none;}
/*
FACEBOOK-------------------------------------
*/
.facebook-bg iframe{width: 100% !important;}
}