@charset "UTF-8";
@import url(mypage_side_sp.css);


/*-------------------------------------------------
	++ TOP COLUMN
-------------------------------------------------*/
.colmunContent > ul > li {
	width:100%;
	float:none;
}
.wantedColumn ul li {
	background-color:#FBCE01;
	text-align: center;
}
.wantedColumn ul li a {
	display:block;
	padding:3vw;
}
.limitDate {
	display:block;
}
#recommend_wrap li,
#columnTokusen ul li {
	width:48%;
	margin:1%;
	float:left;
	background-color:#FFF;
	height: 12.5em;
	position: relative;
}
#columnTokusen ul li p {
	font-weight:bold;
	height: 4.5em;
	overflow: hidden;
}
#columnTokusen ul li img {
	max-width:100%;
	max-height: 80px;
	height: 20vw;
	display:block;
	margin:2.5vw auto 1vw auto;
	text-align: center;
}
#columnTokusen ul li .date {
	position: absolute;
	bottom: 0;
	margin-left: 2vw;
}
#columnTokusen .new {
    margin-right: 0;
}

/*-------------------------------------------------
	++ COLUMN DETAIL
-------------------------------------------------*/
.secHeader {
	background-color:#FFCD45;
	margin-bottom:3vw;
	padding:3vw;
	text-align: left;
	position: relative;
}
.columnDetail {
	padding:3vw;
	position: relative;
}
.columnDetail .photo {
	margin:0 auto;
	text-align: center;
}
.columnDetail .photo ul li {
	width:100%;
	margin-bottom:3vw;
}
.columnDetail .photo ul li img {
	width:100%;
	height:auto;
}
.columnDetail .text {
	line-height:180%;
}


.columnReaction {
	padding:3vw;
}
.columnReaction ul li {
	display:inline-block;
	float:left;
	margin-right:3vw;
}
.columnReaction ul li.like {
	background:url(/images/icon/gamboo.png) left center no-repeat;
	padding-left:30px;
	line-height: 20px;
}
.columnReaction ul li.comment {
	background:url(/images/icon/comment.png) left center no-repeat;
	padding-left:30px;
	line-height: 20px;
}
.columnReaction ul li.fav {
	margin-top:5vw;
	display:block;
	clear:both;
	width:100%;
}
.columnReaction ul li.fav a {
	display:block;
	background-color:#FCB801;
	border-radius:30px;
	font-size:14px;
	padding:5px 10px;
	box-shadow:2px 2px 4px 0 rgba(0,0,0,0.3);
	
}


.userComment .photo {
	width:12%;
	float:left;
}
.userComment .photo img {
	display:block;
	width:100%;
	height:auto;
}
.userComment .commentText {
	padding:0 0 12vw 15%;
	position: relative;
	text-align: left;
}
.commentDetail .reply {
	position:absolute;
	bottom:2vw;
	right:0;
}
.commentDetail .reply a {
	background:#FFF url(/images/icon/comment.png) left 10px center no-repeat;
	padding:2vw 7vw 2vw 12vw;
	border-radius:10vw;
	border:1px solid rgba(0,0,0,0.2);
	box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);
	display: inline-block;
}
.commentDetail .published_date {
    float: right;
}
.commentReply {
	background: url(/images/icon/reply.png) 5% 20px no-repeat;
	padding:0 0 0 15%;
}
.commentReply .replyDetail {
	background-color:#FFF;
	padding:3vw;
	border-radius:5px;
	box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2) inset;
	margin-bottom:3vw;
}
.commentReply .replyDetail .reply {
	position:absolute;
	bottom:0;
	right:0;
}
.commentReply .replyDetail .reply a {
	display: block;
	background:#FFF url(/images/icon/comment_reply.png) center center no-repeat;
	width:40px;
	height:30px;
	border:1px solid rgba(0,0,0,0.2);
	text-indent: -9999px;
	border-radius:30px;
	box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);
}

.commentEdit {
	padding:3vw;
}
.commentEdit .commentText {
	padding-bottom:0;
}
.commentEdit textarea {
	width:100%;
}
.commentEdit .btnArea {
	font-size:72%;
}
.commentEdit .btnArea label {
	display:inline-block;
}
.commentEdit .btnArea a.sendBtn {
	clear: both;
	display: block;
	width: 100%;
	font-size: 180%;
	background-color: #FCB801;
	border-radius: 10vw;
	padding: 2vw 7vw;
	box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.3);
	text-align: center;
	margin-top: 3vw;
}
.commentAtt {
	border:1px solid #ff556d;
	padding:3vw;
	text-align: left;
}


.columnItem .pageNavi ul li a {
	border-radius: 10vw;
	box-shadow:2px 2px 4px 0 rgba(0,0,0,0.3);
	padding: 3vw 5vw;
	font-size:83%;
}
.columnItem .pageNavi ul li.previous a {
	background-image: url(/images/arrow/arrow_darkgray_l.png);
	background-size:2vw;
	background-position: left 1vw center;
	background-repeat: no-repeat;
}
.columnItem .pageNavi ul li.next a {
	background-image: url(/images/arrow/arrow_darkgray.png);
	background-size:2vw;
	background-position: right 1vw center;
	background-repeat: no-repeat;
}



/*-------------------------------------------------
	++  COLUMN EDIT
-------------------------------------------------*/
#columnEdit .link a {
	display:block;
	width:100%;
	margin-bottom:5vw;
}
.editTbl {
	width:100%;
	border-collapse: collapse;
}
.editTbl tr th,
.editTbl tr td {
	display:block;
	text-align: left;
	padding:3vw;
}
.editTbl tr th {
	background:#fafaf5;
}

.fileUpload li {
	margin-bottom:10px;
}

.fileUpload li label.uploadPhoto {
	width:93%;
	float:left;
	padding:2vw 3vw 2vw 7vw;
	background-position: left 2vw center;
}
.fileUpload li .positionSelect {
	display:block;
	/*width:50%;*/
	float:left;
	padding-left:3vw;
}
.fileinput-preview img{
    max-height: 100px;
    }
/* button-twitter */
#with-twitter {
    display: inline-block;
}
.btn_disabled{
-webkit-filter: grayscale(1);
filter: gray;
filter: grayscale(1);
}
.btn_glay_plusicon{
visibility: visible;
text-align: left;
position: relative;
background-color: #eee;
background-image: linear-gradient(#fff,#dedede);
border: #ccc solid 1px;
border-radius: 3px;
color: #333;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
/* cursor: pointer; */
height: 32px;
max-width: 100%;
overflow: hidden;
display: inline-block;
vertical-align: top;
zoom: 1;
padding: 2px 3px 2px 19px;
white-space: nowrap;
}
.btn_glay_plusicon ti{
position: absolute;
top: 50%;
left: 2px;
margin-top: -5px;
width: 16px;
height: 13px;
background: transparent url(/widgets/images/btn.27237bab4db188ca749164efd38861b0.png) 0 0 no-repeat;
background-image: url(data:image/png;base64,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);
}
.btn_glay_plusicon p{
    font-size:90%;
    font-weight: bold;
}
.gdev0710{
display:none;
}
#with-twitter .btn_glay_plusicon {
    padding: 7px 7px 7px 30px;
    height: auto;
    font-size: 170%;
}
.tab_tw .go-totwitter {
    background-image: url(/images/2014/ic/bird_blue_32.png);
    background-repeat: no-repeat;
    background-position: left center;
    width: 100px;
    background-size: contain;
    position: absolute;
    right: 0;
    text-decoration: none;
    height: 20px;
}
.tab_tw .btn_caption {
    margin: -1px auto auto 30px;
    font-size: 126%;
    font-weight: bold;
    color: #55acee;
    text-decoration: none;
}

#evaluate-result {
    color: #F00;
    padding-left: 10px;
    height: 16px;
    margin: 10px;
}
#columnEdit .link form {
    display: inline-block;
}
.messageList {
    padding: 10px 30px;
}

ul.btn_list {
    text-align: center;
    margin: 20px;
}
ul.function_list {
    display: inline-block;
    text-align: left;
}
.function_list li {
    display: inline-block;
    margin: 10px 0 auto auto;
}
.function_list .link a {
    min-width: 20vw;
}
#commentlist table.commentlist {
    width: 100%;
}
#commentlist li {     
    border: 1px solid #d0d0d0;
}
#commentlist .commentlist th.on_hand {
    text-align: center;
    width: 10%;
    border-right: 1px solid #d0d0d0;
    padding: 10px 0 10px 0;
    }
#commentlist .commentlist th:hover {
    background='#FFFCEC
    }
#commentlist a.select {
    display: inline-block;
}
#commentlist .icon_list li {
}
#commentlist .commentlist td {
    display: block;
    position: relative;
    border-bottom: 1px solid #d0d0d0;
    padding: 10px ;
}
#commentlist .commentlist tr:last-child td {
    border-bottom: none;
}
#commentlist ul.icon_list {
}
#commentlist ul.icon_list  li{
    display: inline-block;
    border :none;
    padding: 0 10px;
vertical-align: middle;
}
.btn_list  li{
    display: inline-block;
    padding: 0 10px;
}

.dialogComment p{
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding-top: 10px;
}

#column_theme .inner {
    display: block;
    padding: 10px;
    width: 100%;
}
#column_theme h2 {
    display: inline-block;
    text-align: left;
}

#column_theme em {
    display: inline-block;
}
#column_theme ul  {
    display: inline-block;
    text-align: right;
}   
#column_theme img {
    display: inline-block;
    vertical-align: middle;
}
#RankingList .cf {
    background-position: 3px 0px;
    background-repeat: no-repeat;
    padding: 25px 0 5px 00px;
}
#RankingList span.rank {
    width: 30px;
    vertical-align: bottom;
    height: 20px;
    margin: -0px 0px 0 -0px;
}

#RankingList .cf.rank1 {
background-image: url(/images/2014/ic/rank01.gif)
}
#RankingList .cf.rank2 {
background-image: url(/images/2014/ic/rank02.gif);
}
#RankingList .cf.rank3 {
background-image: url(/images/2014/ic/rank03.gif);
}
#RankingList .cf.rank4  {
background-image: url(/images/2014/ic/rank04.gif);
}
#RankingList .cf.rank5 {
background-image: url(/images/2014/ic/rank05.gif);
}
#RankingList .cf.rank6 {
background-image: url(/images/2014/ic/rank06.gif);
}
#RankingList .cf.rank7 {
background-image: url(/images/2014/ic/rank07.gif);
}
#RankingList .cf.rank8 {
background-image: url(/images/2014/ic/rank08.gif);
}
#RankingList .cf.rank9 {
background-image: url(/images/2014/ic/rank09.gif);
}
#RankingList .cf.rank10 {
background-image: url(/images/2014/ic/rank10.gif);
}
#RankingList .outerrank {
    position: relative;
}
#RankingList .outerrank .rank {
    position: absolute;
    top: 3px;
    left:10px
}
#RankingList .outerrank .rank:after {
content:"\04F4D"
}
#RankingList .rank1 .rank ,
#RankingList .rank2 .rank ,
#RankingList .rank3 .rank ,
#RankingList .rank4 .rank ,
#RankingList .rank5 .rank {
display: none;
}
/* 最新コラム */
#myColumnList .myColumnList.colmunContent > ul > li:before,
#myColumnList .myColumnList.colmunContent > ul > li:after {content: " ";display: table;}
#myColumnList .myColumnList.colmunContent > ul > li:after {clear: both;}
#myColumnList .myColumnList.colmunContent > ul > li {*zoom: 1;}
#myColumnList .myColumnList.colmunContent > ul > li {
	width:100%;
}
#myColumnList .myColumnList.colmunContent ul li .colmnDetail {
	padding-left:0;
}

#PickupColumn .keirinBox,
#PickupColumn .autoraceBox,
#PickupColumn .boatraceBox,
#PickupColumn .keibaBox,
#PickupColumn .zatudanBox {
    line-height: 2em;
}
/* 新着お知らせ */
.messageList ul li {
	border-bottom:1px solid #d0d0d0;
	background:url(/images/icon/mail.png) 2vw 3vw no-repeat / 7vw auto;
	position:relative;
}
.messageList ul li.read {
	background:#E5E5E5 url(/images/icon/mail_gray.png) 2vw 3vw no-repeat / 7vw auto;
}
.messageList ul li:after {
	display: inline-block;
	content:"";
	background:url(/images/arrow/arrow_gray.png) right center no-repeat;
	width:8px;
	height:13px;
	position:absolute;
	right:5px;
	top:50%;
	margin-top:-6px;
}
.messageList ul li a {
	display:block;
	padding:3vw 5vw 3vw 12vw;
}
.messageList ul li .date {
	display:block;
}
.messageList .link a {
	width:100%;
}

.messageList ul li.goodjob {background-image:url(/images/icon/goodjob.png);}
.messageList ul li.read.goodjob {background-image:url(/images/icon/goodjob_gray.png);}
.messageList ul li.cmfollow {background-image:url(/images/icon/column_follow.png);}
.messageList ul li.read.cmfollow {background-image:url(/images/icon/column_follow_gray.png);}
.messageList ul li.tbfollow {background-image:url(/images/icon/tubutter_follow.png);}
.messageList ul li.read.tbfollow {background-image:url(/images/icon/tubutter_follow_gray.png);}
.messageList ul li.cmcomment {background-image:url(/images/icon/column_comment.png);}
.messageList ul li.read.cmcomment {background-image:url(/images/icon/column_comment_gray.png);}
.messageList ul li.tbcomment {background-image:url(/images/icon/tubutter_comment.png);}
.messageList ul li.read.tbcomment {background-image:url(/images/icon/tubutter_comment_gray.png);}

#columnSearch .ocContents {
    padding: 7vw 1vw;
}
.secHeadImg img {
    max-height: 200px;
    width: auto;
    height: auto;
}
.categoryList {
    display: inline-block;
}

.categoryList label {
    min-width: 4em;
}
@media screen and (max-width: 360px) {

table.editTbl th ,
table.editTbl td {
    max-width: 94vw;
}

.secBlock {
	padding:3vw 0;
}
}

#comment_submission {
	position: relative;
	margin:10px auto;}

#comment_submission h1 {
	background-color:#FCCF00;
	text-align:center;
	font-size: 100%;
	line-height:2.3em;
	margin:0px auto 10px auto;
	}

#comment_submission .pictogram {
	float:right;
	text-align:right;
	margin-right:20px;}

#comment_submission .icon_left {
	float:left;
	display:block;
	margin:10px 0px;
	width: 20%;
	}

#comment_submission .textarea_right {
	float:right;
	display:block;
	margin:0px;
	/* margin:10px 0px 10px 0px; */
	width: 80%;
	}

#comment_submission textarea {
	border-color: #e1e1e1;
	border-style: solid;
	border-width: 1px;
	display: block;
	font-size: 108%;
	line-height: 1.5;
	padding: 2px 0;
	width:97%;
	margin-top:2px;
	overflow: hidden;
	height:7em;}

#comment_submission .yellow_waku {
	background-color:#FFF4C7;
	margin:20px 0px;
	padding:10px;
	font-size: 77%;
	}
	#commentDetail .reply {
width:100%;
text-align:center;
margin-top:10px;
}
#commentDetail .reply a {
	background:#FFF url(/images/icon/comment.png) left 10px center no-repeat;
	padding:5px 15px 5px 40px;
	border-radius:30px;
	font-size:14px;
	border:1px solid rgba(0,0,0,0.2);
	box-shadow:2px 2px 4px 0 rgba(0,0,0,0.2);
}