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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 記事のタイトル */
.entry-title {
	width:85%;
	margin:0 auto;
	text-align:center;
}
/* サムネイルのタグ */
.cat-label {
	color:#fff;
}
/* サイドナビの文字 */
h2.wp-block-heading {
	color:#fff;
}
h3.wp-block-heading {
	color:#333;
}
.iwe-shadow img, .iwe-shadow amp-img {
    box-shadow:4px 5px 10px 0px #8d8c8c;
}
.sidebar h3 {
	color:#fff;
}
/* アフィリエイトリンカー */
/*boxの枠線のデザイン、幅など*/
 
#affili-box{
	border: 3px solid #f8f8f8;
	display: flex;
	width: 100%;
	margin-bottom: 20px;
}
 
/*1.イメージ画像の余白、、サイズ指定、上下中心など*/
 
.afi-image {
	padding: 20px;
	margin: auto 0;
	max-width: 200px;
	height: auto;
}
 
/*アフィリリンクのイメージ画像の最大サイズ指定*/
 
.afi-image a img{
	height: auto;
}
 
/*右側（説明、ボタン）の余白、幅*/
 
#afi-info{
	padding: 20px;
	width: 80%;
}
 
/*本タイトルリンク(2)と説明(3)の間の余白*/
 
.afi-detail{
	margin-top: 5px;
}
 
/*ボタン、上の余白*/
 
#link-button{
	display: flex;
	margin-top: 20px;
}
 
/*ボタンの文字の装飾*/
 
#link-button a{
	font-size: 15px;
	color: white;
	font-weight: bold;
	font-family: arial;
	text-decoration: none;
	display: block;
	padding: 10px 0;
}
 
/*それぞれのボタンの装飾*/
 
.acite-btn{
	background-color: #e0423c;
	border-radius: 5px;
	text-align: center;
	margin-right: 5px;
	width: 30%;
}
 
.bcite-btn{
	background-color: #f4980f;
	border-radius: 5px;
	text-align: center;
	margin-right: 5px;
	width: 30%;
}
 
.ccite-btn{
	background-color: #438ee8;
	border-radius: 5px;
	text-align: center;
	margin-right: 5px;
	width: 30%;
}
 
/*１つボタンの時の装飾*/
 
.acite-onebtn{
	background-color: #1e90ff;
	border-radius: 5px;
	text-align: center;
	width: 100%;
	padding: 10px 0;
}
 
/*2つボタンの時の装飾*/
 
.acite-twobtn{
	background-color: #ffd700;
	border-radius: 5px;
	text-align: center;
	margin-right: 5px;
	width: 50%;
	padding: 10px 0;
}
 
.bcite-twobtn{
	background-color: #ff4500;
	border-radius: 5px;
	text-align: center;
	margin-right: 5px;
	width: 50%;
	padding: 10px 0;
}
 
/*768pxになったら、ボタンが縦並びになる。ボタンの幅や余白など調整*/
 
@media screen and (max-width: 768px) {
	#link-button{
		display: block;
	}
 
　　	.acite-btn,.bcite-btn,.ccite-btn,.acite-twobtn,.bcite-twobtn{
		margin: 0 auto 5px;
		width: 80%;
	}
}
 
/*480pxになったらすべて縦並びになる。ボタンの幅や余白、画像など調整*/
 
@media screen and (max-width: 480px) {
	#affili-box{
		display: block;
		text-align: center;
		width: 100%;
	}
	
	#afi-info{
	   margin: 10px auto 0;
}
 
	.afi-image{
		max-width: 100%;
	}
 
	.acite-btn,.bcite-btn,.ccite-btnn,.acite-twobtn,.bcite-twobtn{
		margin: 0 auto 5px;
		width: 80%;
	}
}
/* おすすめブロック */
.osusume-menu-wrap {border:1px solid #eee;padding:5px;border-radius:10px;}
.osusume-menu-wrap p {margin:0;}
.osusume-menu {display:flex;gap:10px;}
/* サイドバーカテゴリータイトル削除 */
#categories-2 .widget-sidebar-title {
	display:none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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