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

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

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

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

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

/* =====================================
   動画配信先ボタン｜ミニマルカード
===================================== */

.entry-content a.btn.btn-red.btn-l,
.entry-content a.btn.btn-amber.btn-l,
.entry-content a.btn.btn-light-blue.btn-l {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;

  box-sizing: border-box;
  width: 100% !important;
  max-width: 400px !important;
  min-height: 42px !important;

  margin: 7px auto !important;
  padding: 8px 14px !important;

  background: #fff !important;
  color: #333 !important;

  border: 1px solid #e5e5e5 !important;
  border-left-width: 3px !important;
  border-radius: 6px !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-decoration: none !important;

  transition: border-color .2s ease,
              box-shadow .2s ease,
              transform .2s ease;
}


/* FANZA */
.entry-content a.btn.btn-red.btn-l {
  border-left-color: #e6003d !important;
}


/* ソクミル */
.entry-content a.btn.btn-amber.btn-l {
  border-left-color: #eeb000 !important;
}


/* Spice TV */
.entry-content a.btn.btn-light-blue.btn-l {
  border-left-color: #3ca6d8 !important;
}


/* 右端の矢印 */
.entry-content a.btn.btn-red.btn-l::after,
.entry-content a.btn.btn-amber.btn-l::after,
.entry-content a.btn.btn-light-blue.btn-l::after {
  content: "›";
  margin-left: auto;
  padding-left: 12px;

  color: #aaa;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}


/* マウスを乗せたとき */
.entry-content a.btn.btn-red.btn-l:hover,
.entry-content a.btn.btn-amber.btn-l:hover,
.entry-content a.btn.btn-light-blue.btn-l:hover {
  background: #fff !important;
  color: #222 !important;

  border-top-color: #d5d5d5 !important;
  border-right-color: #d5d5d5 !important;
  border-bottom-color: #d5d5d5 !important;

  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07) !important;
  transform: translateY(-1px);

  opacity: 1 !important;
}


/* スマホ */
@media screen and (max-width: 480px) {

  .entry-content a.btn.btn-red.btn-l,
  .entry-content a.btn.btn-amber.btn-l,
  .entry-content a.btn.btn-light-blue.btn-l {
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 6px auto !important;
    padding: 8px 13px !important;
  }

}

/* =====================================
   配信先ボタン周辺の余白を統一
===================================== */

/* ボタンだけが入っているpタグの標準余白を消す */
.entry-content p:has(> a.btn.btn-red.btn-l),
.entry-content p:has(> a.btn.btn-amber.btn-l),
.entry-content p:has(> a.btn.btn-light-blue.btn-l) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* 最後のボタンの次に画像が来る場合 */
.entry-content p:has(> a.btn.btn-l) + p:has(img),
.entry-content p:has(> a.btn.btn-l) + figure {
  margin-top: 16px !important;
}

/* ボタンがpタグに入っていない記事にも対応 */
.entry-content a.btn.btn-l + p:has(img),
.entry-content a.btn.btn-l + figure {
  margin-top: 16px !important;
}