@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/*デザイン調整*/

/*Cocoon：おすすめカード画像高さ調整*/
.widget-entry-cards.card-large-image figure img{
  height: 200px;
}
.widget-entry-cards.card-large-image figure{
  height: 200px;
}

/*固定ページ：クエリブロックのタイトル文字数制限*/
.entry-page-title a{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0px 0px 0.4em;
  overflow: hidden;
}

/*Cocoon：トップページの記事タイトル*/
.related-entry-card-title, .entry-card-title{
  font-size: 16px;
}

/*Cocoon：次のページボタン非表示*/
.pagination-next{
  display: none;
}

/*Cocoon：サムネ高さ固定 5:8*/
.ect-vertical-card .entry-card-wrap .entry-card-thumb{
  aspect-ratio: 8 / 5;
}

/*アンカー広告によるCLS対策*/
body.body{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*サイトロゴ*/
img.site-logo-image {
  aspect-ratio: 128 / 60;
  width: 128px;
  height: auto;
}

/*この記事を書いた人*/
.widget_author_box .widget-title{
  font-size: 18px;
  padding: 0.2em 0.5em;
  margin: 0.2em 0;
  line-height: 1.25;
  font-weight: bold;
  display: inline-block;
  border-left: solid 5px #999;
}

/*reCAPTCHA v3のバッジ非表示*/
.grecaptcha-badge{
  visibility: hidden;
}

/*プレス*/
.press{
	color:#ff3300;
}

/*横並び*/
.flex-box{
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  margin-bottom: 1.5em;
  flex-shrink: 0;
}
.flex-box img{
  width: 99%;
  margin:0.1em 0 0.1em 0;
}
.flex-box p{
  margin-bottom: 0;
}
.flex-box.no-bottom{
  margin-bottom: 0;
}
.wp-caption .wp-caption-text,
.gallery .gallery-caption{
  width: 90%;
  margin: 0 auto;
}


/*blockquoteの調整*/
.b-quote-img{
	/*float:left;
	width:25%;
	margin-right:1em;*/
  flex-basis: 32%;
  flex-grow: 0;
  flex-shrink: 0;
  padding-right: 0.5em;
}
.b-quote-img img{
  object-fit: cover;
  width: 214px;
  height: 100%;
}
.b-quote-contents{
	/*font-size:0.9em;*/
}
.b-quote-article{
  display: flex;
}
.b-quote-title{
  font-size: 16.5px;
  font-weight: bold;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 5.2em;
  display: -webkit-box;
}
.b-quote-text{
  font-size: small;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 5em;
  display: -webkit-box;
}
@media screen and (max-width: 560px){
  .b-quote-text{
      /*display: none;*/
      font-size: 0.8em;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-height: 5em;
      display: -webkit-box;    
  }
}

/*外部リンクボタン*/
.btn--orange,
a.btn--orange {
  color: #fff !important;
  background-color: #eb6100;
  font-weight: bold;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff !important;
  background: #f56500;
}
.article-body .btn {
	margin-bottom: 20px;
}

/*関連記事用*/
.related-box{
  margin-top: -36px;
  margin-bottom: 0.9em;
}
.related-article{
  display: flex;
  padding:16px;
  border:solid 1px #ddd;
  background-color: #f7f7f7;
}
.related-img{
  flex-basis:32%;
  flex-grow:0;
  flex-shrink:0;
  padding-right: 0.5em;
}
.related-img img{
  object-fit: cover;
  width: 214px;
  height: 100%;
}
.related-title{
  font-size: 0.9em;
  font-weight: bold;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 5.2em;
  display: -webkit-box;
}
.related-text{
  font-size: small;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 5em;
  display: -webkit-box;
}
.related-link{
  display: block;
  color: #000 !important;
  text-decoration: none !important;
}
.related-link.a,.related-link.a:hover{
  color: #000 !important;
}
.related-label{
  background-color: #ff862b;
  color: #fff;
  position: relative;
  z-index: 3;
  top: 36px;
  left: 8px;
  min-width: 80px;
  padding: 4px 8px;
  font-size: 0.8em;
}
@media screen and (max-width:560px){
  .related-text{
    display: none;
  }
  .related-title{
    line-height: 1.2;
  }
}

/*Amazonリンク*/
.amazon-link{
  background-color:#222e3d;
 }
.amazon-link i{
  color:#f99500;
  position: absolute;
  left: 1em;
  line-height: 2.5em;
}
a.amazon-link{
  display:block;
  text-align:center;
  position: relative;
  line-height: 2.5em;
  color: #fff !important;
  border-radius: 7px;
  margin: 24px 0;
}
.amazon-link span{
  width:90%;
  display:inline-block;
  line-height: 1.5em;
  padding: 0.5em;
}
.amazon-link span.anchor-icon{
  width: auto;
}


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

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

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