@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** プラグイン WP Posts Carousel用のスタイル
************************************/
#home-bunjou,
#home-chintai {
  margin-top: 20px;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-container {
  padding: 0;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-details {
  padding: 0;
  background: #f8f8f8;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-title {
  white-space: nowrap; /* 改行させない */
  overflow: hidden; /* はみ出た文字を隠す */
  text-overflow: ellipsis; /* ...をつける */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.7); /* 半透明 */
  padding: 0 10px;
  margin: 0;
  z-index: 1;
  box-sizing: border-box;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-title a {
  color: black;
  text-decoration: none;
  font-weight: 600;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-desc {
  position: relative;
  font-size: 20px;
  white-space: pre-line;
  padding: 0;
  margin-bottom: 0;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-desc img {
  width: 100%;
  min-height: 180px;
  max-height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  font-size: 20px;
  white-space: pre-line;
}
/* 価格・家賃 マーク  */
.widgets_on_page .btn-kakaku {
  padding: 4px 8px;
  color: #fff;
  background-color: #00aa95;
  border-radius: 10px;
  transform: translateY(-5px);
}
/* 詳細を見る  */
.widgets_on_page .wp-posts-carousel-buttons {
  background-color: #f39800;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-buttons a {
  display: block;
  font-size: 0;
  color: #ffffff;
}
.widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-buttons a::after {
  content: "詳細を見る";
  font-size: 1rem;
}
/* 矢印 light.css */
.widgets_on_page .light-theme.wp-posts-carousel .owl-controls .owl-nav div {
  background-color: #00aa95;
  color: #fff;
  border: 2px solid #fff;
  line-height: 45px;
}
.widgets_on_page .light-theme.wp-posts-carousel .owl-dots .owl-dot.active span {
  background: #3e7593;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media (max-width: 1200px) {
  .wrapper {
    transform: scale(calc(100vw / 1200));
    transform-origin: top center;
  }
}
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
  .widgets_on_page .light-theme.wp-posts-carousel .wp-posts-carousel-title {
    font-weight: 600;
  }
}