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

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

.article h1 { /* 見だし 境界線 */
	padding:20px 0 0 0;
	border-top: 5px solid #d3d3d3;
}

.article {  /* 個別記事 境界線 */
	border-bottom:5px solid #d3d3d3;
}

.article h3 {
  border-left: 5px solid #55A8DC;/*左線*/
  border-top: none;
  border-right: none;
  border-bottom: none;
  padding: .5em .7em;/*余白*/
  background: rgba(255,107,107,0.15);/*背景色*/
  color: #323232;
  
}

/*モバイルヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #fcfcfc;
	font-size:25px;
	color: #303030;
	height: 60px;
}

.logo-menu-button.menu-button{
	background-color: #fcfcfc;
	height: 60px;
}
/*モバイルヘッダーの文字と背景の色を変える*/


.site-name-text{ /*サイト名を太字*/
font-weight: 600;
}

/*グローバルメニューにアンダーライン*/
#navi li a:after {
content: '';
width: 0;
border-bottom: 3px solid #292d48; /*下線の太さ・色*/
display: block;
}
#navi .navi-in a:hover:after {
width: 100%;
border-bottom: 3px solid #292d48; /*下線の太さ・色*/
}
/*グローバルメニューにアンダーライン*/


/************************************
** 人気記事 タイトル
************************************/
#main .main-widget-label  {
	font-weight: bold;
}

/************************************
** Amazonリンク画像 サイズ指定
************************************/
.pis-l figure.product-item-thumb {
  width: 300px;
}

@media screen and (max-width: 480px){
  .pis-l figure.product-item-thumb {
    width: 100%;
  }
} 



/*--------------------------------------------------------
 * デフォルト型 サムネイル画像のサイズを変更
--------------------------------------------------------*/
.ect-vertical-card .entry-card-wrap .entry-card-thumb img { 
	width: 75%;
}

.widget_popular_entries img {width: 75%;} /*人気記事サムネイル*/
/*--------------------------------------------------------
 * デフォルト型 サムネイル画像のサイズを変更
--------------------------------------------------------*/

.coupon_list {
	padding-top: 1em; 
}

.coupon_list  p {
	color:red;
	font-size:1.3em;
}

/* =========================================
   コピーボタン（Cocoon標準 + entry用）
   ========================================= */

/* 通常時のスタイル */
.copybtn,
.entry_copybtn {
  margin: 0.5em auto;
  padding: 0.5em;
  border: solid 2px #ddd;
  background: #ffbc7a;
  color: #414141;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  
  /* ★これ大事！アニメーションを滑らかにする */
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
  position: relative; /* transformを安定させる */
}

/* ★押し込んだ時の効果（ここを強化） */
.copybtn:active,
.entry_copybtn:active {
  transform: translateY(3px) !important;
  -webkit-transform: translateY(3px) !important;
  
  /* 押した感を出すために影を少し内側に */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset;
}


/*サイトタイトル文字の大きさ*/


/*インデックスカードの枠線*/
a.entry-card-wrap.a-wrap.border-element.cf {
	border: 2px solid #DCDCDC;
}

.amazon-item-box { /*Amazonのボックス用コード*/    
    width:100%;
}

/*サイドバー見だし背景色*/
/*
.sidebar h3{
	background-color:#4C8DCB;
}
*/

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

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

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

/************************************
** SNS ボタンをまとめて丸くする
************************************/

.sns-buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin:0 0 7px;
}
.sns-buttons a.share-button {
	width: 40px;
	height: 40px;
	margin: 0 5px;
	border-radius: 50%;
}
.sns-buttons a.share-button .social-icon {
	font-size: 24px;
}
.sns-buttons a.share-button .button-caption {
	display: none;
}