@charset "UTF-8";
/*
* comment.css
* Copyright (c) ULM Co.,Ltd. - http://www.ulm-design.com
* v1.0
* Last update 170202
*/

/*------------------------------------

@container

-------------------------------------*/
.user-comment-container {
    overflow: hidden;
    width: 420px;
    padding: 0px 0 5px;
    font-size: 14px;
    background: #fff;
    color: #fff;
    margin: 0 auto 20px;
    border: 1px solid #999999;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-sizing: border-box;
}

.review-user-comment-container {
	overflow: hidden;
    float: left;
    width: 293px;
    padding: 0px 0 5px;
    font-size: 14px;
    background: #fff;
    color: #000;
    margin: 0 20px 20px 0;
    border: 1px solid #999999;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
	box-sizing: border-box;
	
}

#default-container{
}
#tw-container{
	width:530px;
	padding: 9px 12px 20px;
	background:#FFF;
}

#fb-container{
	width:512px;
	padding: 12px;
	background:#FFF;
}



/*------------------------------------

@photo

-------------------------------------*/
.comment-photo {
    margin: 0;
}
.comment-photo img {
    width: 420px;
    height: 220px;
    height: auto!important;
}

/*------------------------------------

@status

-------------------------------------*/
.status-container {
    padding: 15px 4% 0;
}

.icon-container {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 10px 0 0;
    overflow: hidden;
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
}

#tw-icon{
	float:left;
	border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#fb-icon{
	float:left;
	border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

#tw-main {
    width: 444px;
    float: left;
    margin: 0 0 0 2px;
}
#fb-main {
	width: 425px;
    float: left;
    margin: 3px 0 0;
}

.txt-container {
    width: 78%;
}
.name {
    margin: 0 10px 0 0;
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 1.2;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.man {
    color: #0e8fa9;
}
.woman {
    color: #FC77B7;
}
.status {
    font-size: 12px;
    line-height: 1;
    color: #999;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 4px 0;
}

/*------------------------------------

@point

-------------------------------------*/
.point-container {
    display: none !important;
    width: 80px;
    height: 15px;
    background-image: url(../../assets/img/review/starBg.png);
    background-repeat: no-repeat;
    vertical-align: top;
    display: block;
    margin: 0 10px 0 0;
}
.point {
    display: block;
    overflow: hidden;
    height: 15px;
}

.point img{
	vertical-align: top;
	overflow:hidden;
}
.point1{ width:16px;}
.point2{ width:32px;}
.point3{ width:48px;}
.point4{ width:64px;}
.point5{ width:80px;}

/*------------------------------------

@comment

-------------------------------------*/
.comment {
    display: block;
    padding: 0 0 10px;
    margin: 10px 4% 0;
    word-wrap: break-word;
    font-size: 16px;
    /* width: 94%; */
    color: #000;
    line-height: 1.6;
    box-sizing: border-box;
    border: none;
    resize: none;
}

/*------------------------------------

@time

-------------------------------------*/
.post-time {
    color: #A2A2A2;
    font-size: 10px;
    display: block;
    padding: 0 0 3px;
    margin: 0 4%;
}

/*------------------------------------

@type

-------------------------------------*/
.post-type{
	display:block;
	padding: 0 0 3px;
	margin: 0 10px;
	line-height: 12px;
	font-size: 12px;
	color:#999;
}
.fb-post{
}
.tw-post{
}

.post-type img{
	vertical-align:top;
}

#tw-img img{
	width:100%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#tw-status{
	color:#8899a6;
	font-size:13px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#tw-fullname{
	color:#292f33;
	font-weight: bold;
	font-size: 14px;
    letter-spacing: 0;
}
#tw-review{
	font-size: 14px;
    line-height: 1.6;
    color: #292f33;
    padding: 9px 0;
	word-wrap: break-word;
}
#tw-link{
	color:#FF4A81;
}

/*--------------------
FB
----------------------*/
#fb-fullname{
	color:#365899;
	font-weight: bold;
	font-size: 15px;
    letter-spacing: 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
   overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#fb-status{
	color:#90949c;
	font-size: 12px;
    letter-spacing: 0;
	padding: 0 0 0 2px;
}
#fb-review{
	font-size: 15px;
    line-height: 1.6;
    color: #1d2129;
    padding: 9px 0;
	word-wrap: break-word;
}
#fb-link{
	color:#FF4A81;
}

#fb-share-container{
	border:1px solid #e9ebee;
	color: #1d2129;
}
#fb-ogp{
	padding:12px;
	word-wrap:break-word;
	font-family:Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
}
#fb-ogp-ttl{
	font-family: Georgia, serif;
	letter-spacing: normal;
	font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 5px;
    max-height: 110px;
    overflow: hidden;
    word-wrap: break-word;
}
#fb-ogp-description{
	font-family: Helvetica, Arial, "hiragino kaku gothic pro",meiryo,"ms pgothic",sans-serif;
    line-height: 16px;
    max-height: 80px;
	font-size:12px;
    overflow: hidden;
}
#fb-ogp-caption{
	padding:9px 0 0;
	font-size: 11px;
    line-height: 11px;
    text-transform: uppercase;
	color: #90949c;
}
#fb-img img{
	width:100%;
}


@media screen and (max-width: 640px){
	
/*------------------------------------

@container

-------------------------------------*/
.user-comment-container {
    float: none;
    border: none;
    width: 100%;
    margin: 0 auto 10px;
    padding: 0 0 4%;
    font-size: 116%;
    left: 0%;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    -webkit-box-	shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.review-user-comment-container{
	float: none;
    border: none;
    width: 100%;
    margin: 0 auto 10px;
    padding: 0 0 4%;
    font-size: 116%;
    left: 0%;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/*
@TW container
*/
#tw-container{
	border-top: 1px solid #E7E7E7;
	width: 100%;
	padding: 10px 3% 15px;
}

#tw-icon-container{
}
#tw-icon{
	width: 12%;
    margin: 0 3% 0 0;
}
#tw-main{
	width: 85%;
	margin:0;
}
.tw-review{
	font-size:16px;
    line-height: 1.4;
    padding: 5px 0 8px;
}

/*
@FB container
*/
#fb-container{
	border-top: 1px solid #E7E7E7;
	width: 100%;
	padding:10px;
}
#fb-main{
	width:80%;
}
#fb-fullname{
	font-size: 14px;
    line-height: 17px;
    padding: 1px 0 2px;
}
#fb-review{
	/*font-size: 14px;*/
    line-height: 18px;
    letter-spacing: 0;
}
#fb-ogp{
	padding:8px;
}
#fb-ogp-ttl{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0;
	font-weight: bold;
}
#fb-ogp-description{
	font-size: 12px;
    line-height: 16px;
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#fb-ogp-caption{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*------------------------------------

@photo

-------------------------------------*/
.comment-photo img {
    width: 100%;
	height:auto;
    margin: 0 auto;
    display: block;
}
/*------------------------------------

@time

-------------------------------------*/
.post-time {
    padding: 0 0 2px;
}

/*------------------------------------

@icon

-------------------------------------*/
#fb-icon{
	width:40px;
	height:40px;
}

}