@import url('http://pefami.ciao.jp/js/jquery.bxslider/jquery.bxslider.css');
dl#outside_bnr {
margin-top: 30px;
}
dl#outside_bnr dt {
margin-bottom: 5px;
}
dl#outside_bnr dd {
margin-bottom: 10px;
}
li#reuse {
background: url("http://pefami.ciao.jp/pefami_img/common/top_reuse.jpg") no-repeat scroll left top transparent;
padding: 53px 144px 12px 20px;
float: left;
width: 560px;
height: 126px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li#reuse span {
font-weight: bold;
}
/* 右カラム　投稿写真 */
div#contents_right img#myfamily_img {
background: url(http://pefami.ciao.jp/pefami_img/myfamily/myfami_bk1.jpg) top left no-repeat;
padding: 66px 12px 8px;
}
div#contents_right ul#myfamily_ul {
background: url(http://pefami.ciao.jp/pefami_img/myfamily/myfami_bk2.jpg) bottom no-repeat;
width: 166px;
height: auto;
padding: 4px 7px 6px;
text-align: center;
margin-bottom: 10px;
}
div#contents_right li.myfamily_about {
width: 160px;
height: auto;
padding: 0 3px;
text-align: left;
}
div#contents_right li#myfamily_name {
font-size: 14px;
font-weight: bold;
line-height: 28px;
margin-left: 5px;
}
div#contents_right li#myfamily_name span {
font-size: 10px;
font-weight: normal;
margin-left: 5px;
}
div#contents_right img.myfamily_btn {
padding: 0 0 3px;
}
/* 右カラム　投稿写真 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■20170615　トップページおすすめボックス、動画ボックス
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.recbox, #movie {
overflow: hidden;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #FDF1C4;
padding: 13px 10px 0;
margin-bottom: 20px;
border-top: 3px solid #B89F7A;
}
.recbox h3, #movie h3 {
font-weight: bold;
font-size: 18px;
display: inline-block;
margin-right: 5px;
margin-bottom: 10px;
font-family: Georgia, 'Hiragino Mincho ProN', 'Yu Mincho', serif;
letter-spacing: 1px;
vertical-align: middle;
line-height: 1;
}
.recbox h3 i, #movie h3 i {
font-size: 20px;
vertical-align: middle;
color: #6a0f0f;
margin: 0px 5px 3px;
}
.recbox h4 {
margin-bottom: 10px;
background-color: #B89F7A;
text-align: center;
border-radius: 50px;
padding: 3px 0;
}
.recbox p.head, #movie p.head {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
color: #666;
}
.recbox ul, #movie ul {
overflow: hidden;
}
.recbox li, #movie li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 10px;
background-color: #fff;
border: 1px solid #eee;
}
.recbox li {
float: left;
width: 32%;
}
.recbox li > a{
display: block;
text-decoration:none;
color:#333;
}
.recbox li > a:hover {
background-color: #E8F4F0;
}
.recbox li > a:hover  img,
.recbox li > a:hover strong{
filter: alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}
.recbox li:nth-of-type(3n + 2) {
margin: 0 2%
}
.recbox li img {
width: 100%;
height: auto;
display: block;
}
.recbox li strong {
display: block;
font-weight: bold;
font-size: 13px;
background-color: #F3F3F3;
padding: 5px 10px;
text-decoration:underline;
color:#5f94a1;
}
.recbox li .price {
color: red;
font-weight: bold;
}
.recbox li p {
padding: 5px 10px;
margin: 0;
}
#movie h4{
font-weight: bold;
padding:10px 10px 0;
}
#movie a{
display: block;
text-decoration: none;
color: #333;
height:195px;
}
#movie a:hover{
background-color: #fff3f3!important;
}
#movie li {
overflow: hidden;
position: relative;
}
#movie iframe {
float: right;
width: 350px;
height: 195px;
}
#movie div {
float: left;
width: 188px;
height: 195px;
}
#movie li .text {
padding: 10px;

}
#movie li .link {
text-decoration:underline;
display: block;
overflow: hidden;
font-size: 13px;
padding: 10px;
position: absolute;
left: 0px;
bottom: 0px;
width: 188px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color:#5f94a1;
}
#movie li .link:after {
content: "\f101";
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
margin-left: 3px;
margin-bottom:2px;
}
#movie li img {
float: left;
border: 1px solid #ccc;
width: 50px;
height: 50px;
margin-right: 7px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/*個別カラー設定*/
#announce {
background-color: #FEF7D1;
border-top-color: #F9E184;
}
#announce p {
padding: 0 5px 10px;
}
#osusume {
background-color: #FCEBE4;
border-top-color: #F3CDC5;
}
#osusume h4 {
background-color: #F3CDC5;
}
#movie {
background-color: #E8F4F0;
border-top-color: #A9D6C7;
}
#movie .bl-hover {
background-color: #FCEBE4;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■20170620 右カラムグループバナー
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#groupbnr li {
margin-bottom: 5px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■20170621 カルーセル
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#slider {
margin-bottom: 40px;
}
#slider .bx-pager{
bottom:-20px; 
}/*
#bx-pager {
overflow: hidden;
text-align: center;
font-size: 0;

}
#bx-pager img {
width: 100%;
height: auto;
display: block;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#bx-pager a {
display: inline-block;
width: 20%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 2px;
}
#bx-pager a:hover img, #bx-pager a.active img {
border: 1px solid #FFE079;
}
*/
#slider .bx-wrapper {
border: 0px none;
margin-bottom: 5px;
}
#slider ul.bxslider {
height: 240px;
overflow: hidden;
}
#slider .bx-wrapper .bx-prev {
left: -15px;
}
#slider .bx-wrapper .bx-next {
right: -15px;
}
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■20170621 ランキング変更
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#ranking_box {
background: url(http://pefami.ciao.jp/pefami_img/common/ranking_bg.gif) no-repeat left bottom;
padding-bottom: 2px;
margin-bottom: 8px;
}
#ranking_box dd {
border-bottom: 1px dashed #f7dbdb;
background-repeat: no-repeat;
background-position: 0 center;
position: relative;
margin: 0 3px;
}
#ranking_box dd a {
display: block;
padding: 8px;
text-decoration: none;
}
#ranking_box dd a:hover {
background-color: #fff3f3!important;
}
#ranking_box dd .rank {
position: absolute;
left: 8px;
top: 4px;
width: 50px;
text-align: center;
text-decoration: none;
color: #666;
}
#ranking_box dd .rank strong {
font-weight: bold;
font-size: 16px;
}
#ranking_box dd .ranking_name {
display: inline;
line-height: 1.5;
text-decoration: underline;
}
#ranking_box dd .ranking_img {
background-color: #ccc;
padding: 1px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 27px;
}
#ranking_box dd .ranking_img img {
border: 1px solid #fff;
width: 50px;
height: 50px;
}
#ranking_box dd .price {
display: inline;
color: red;
font-weight: bold;
text-decoration: none;
}
#ranking_box dd .price strong {
font-size: 14px;
}
#ranking_box dd .percent {
padding: 0px 2px;
font-size: 10px;
background-color: red;
color: #fff;
display: inline-block;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: normal;
}