@charset "utf-8";
/* =======================================================================

##読み物コンテンツ(useful)の各記事用最近の投稿共通css##
/search/lately_post/css/main.css ベースに作成した
common.cssは/css/common.css
1.基本はコレに追加しない
2.読み物コンテンツごとの修正は、/useful/css/news.css（導入済み）、/useful/css/jiten.css（未導入）で行なう
3.全体共通で修正の場合はコレで行なう

※このファイルを修正した場合、
同等のファイルがクックドア・シニア・柔道ch（柔整/接骨）にも存在するので該当ファイルの修正を同時に行う

last modify : 2017/09/28 304_uehara 新規作成

========================================================================== */

/* ---------------------------------------
 最近投稿された 口コミ／写真／動画 共通   mod_latest_post
---------------------------------------- */
.post_bg_box{
  text-align: center;
}
.mod_latest_post {
  clear: both;
  margin: 35px auto 0;
  padding: 0 0 40px;
  position: relative;
  width: 608px;
}
.mod_latest_post .h_ttl {
  height: 55px;
  margin: 0 auto 5px;
  text-align: center;
  width: 400px;
}
.mod_latest_post .h_ttl img {
  height: 100%;
  width: 100%;
}

.mod_latest_post .lst {
  align-content: space-between;
  -webkit-align-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  margin: 0 auto 5px;
  width: 612px;
}
.mod_latest_post .lnk {
  background: #fff;
  border: 2px solid #112f58;
  height: 180px;
  margin:0 4px 5px 0;
  width: 200px;
}
.mod_latest_post .lnk a {
  cursor: pointer;
  color: #333;
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
}
.mod_latest_post .lnk a:hover {
  opacity: 0.8;
}

.mod_latest_post .thumb {
  display: block;
  height: 152px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 196px;
}

.mod_latest_post .thumb img {
  bottom: 0;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
}

.mod_latest_post .cap {
  background: #fff;
  bottom: 0;
  color: #0051c2;
  font-weight: 100;
  height: 25px;
  left: 0;
  line-height: 24px;
  overflow: hidden;
  padding: 1px 8px 0;
  position: absolute;
  margin: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.mod_latest_post .slick-dots {
  bottom: -40px;
}

.btn_fin {
  -webkit-animation-name:'FIn';
  -webkit-animation-duration:.9s;
  -webkit-animation-timing-function:ease-in;
  -webkit-animation-iteration-count:1;
}
@-webkit-keyframes 'FIn' {
  0%{opacity:0;visibility: hidden;}
  100%{opacity:1;visibility: visible;}
}

/* ボタン
--------------------- */
.btn_css_toggle,
.btn_all_link,
.btn_publnk {
  float: right;
  margin-right: 10px;
}
.btn_css_toggle img,
.btn_all_link img,
.btn_publnk img {
  vertical-align: bottom;
}
.btn_css_toggle:hover,
.btn_all_link:hover,
.btn_publnk:hover {
  opacity: 0.7;
}
a[class^="btn_all_link_"]:hover{
  opacity: 0.8;
}

/*--もっと見る・閉じる--*/
.btn_css_toggle {
  cursor: pointer;
  margin: 0;
  position: relative;
  z-index: 100;
}
.btn_css_toggle.close {/*--閉じるときに--*/
  display: none;
}

/*--すべて見る--*/
.btn_all_link {
  display: none;
}

/* ボタンサイズ */
.btn_css_toggle img,
.btn_all_link img{
  width: 120px;
  height: 40px;
}
.btn_publnk img{
  width: 180px;
  height: 40px;
}

/* ---------------------------------------
 最近投稿された口コミ   mod_latest_post _review
---------------------------------------- */
.mod_latest_post._review {
  margin-top: 0;
}
.mod_latest_post._review .lnk {
  background-color: #fff;
  background-image: url(https://www.homemate-research.com/image/top2/bg_latest_post_review.png);
  background-position:  center center;
  background-repeat: no-repeat;
  height: 155px;
  text-align: left;
  width: 302px;
}
.mod_latest_post._review .lnk a {
  padding: 10px 15px 0;
}
.mod_latest_post._review .mark {
  border: #333 1px solid;
  box-sizing: border-box;
  float: left;
  height: 50px;
  margin: -13px 8px 0 0;
  overflow: hidden;
  width: 50px;
}

.mod_latest_post._review .name {
  color: #0051c2;
  margin:0 0 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod_latest_post._review .ttl {
  background: url(https://www.homemate-research.com/image/top2/ico_review.png) no-repeat 0 0;
  background-size: 17px 14px;
  color: #112f58;
  font-size: 14px;
  line-height: 1.15;
  margin: 0 0 5px;
  overflow: hidden;
  padding:0 0 0 21px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mod_latest_post._review .txt {
  font-size: 14px;
  line-height: 1.25;
  margin: 0 auto;
  text-align: left;
}

/* 評価 星表示 */
.mod_latest_post._review .lnk a::before {
  background: url(https://www.homemate-research.com/image/top2/spr_icon_review_star_x2.png) no-repeat center;
  background-size: 100px 90px;
  content: "";
  display: block;
  height: 21px;
  margin: 0 auto 9px;
  position: relative;
  width: 100px;
}
.mod_latest_post._review .lnk.star5 a::before {
  background-position: center top;
}
.mod_latest_post._review .lnk.star4 a::before {
  background-position: center -23px;
}
.mod_latest_post._review .lnk.star3 a::before {
  background-position: center -46px;
}
.mod_latest_post._review .lnk.star2 a::before {
  background-position: center -69px;
}

/* ---------------------------------------
 最近投稿された動画   mod_latest_post _movie
---------------------------------------- */
.mod_latest_post._movie .lnk {
  border-color: #333;
}
.mod_latest_post._movie .lnk .thumb::after {
  background: url(https://www.homemate-research.com/image/top2/btn_play.png) no-repeat center;
  background-size: cover;
  content: "";
  height: 50px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 53px;
  width: 50px;
}

.mod_latest_post._movie .lnk:hover .thumb::after {
  background: url(https://www.homemate-research.com/image/top2/btn_play_ov.png) no-repeat center;
  background-size: cover;
}

.mod_latest_post._movie .lnk .thumb>img {
  margin: 0 auto;
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}

.mod_latest_post._movie .cap {
  color: #fff;
  background-color: #333;
}


/*----------------------------------------
media query for iPad
------------------------------------------*/
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
  .btn_css_toggle:hover,
  .btn_css_toggle_off:hover,
  .btn_all_link:hover{
     opacity: 1;
  }
}