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

/************************************************************/
/** 子テーマ用のスタイルを書く
/************************************************************/
/*==========================================================*/
/* ◆共通
/*==========================================================*/
/* 文字色設定 */
h1, h2, h3, h4, h5, h6 {
	/* color: #5e5e5e!important; */
/* 	color: #767e8a!important; */
 	color: #34BABA!important;
}
.admin-pv span,
.entry-card-meta span,
.card-meta span,
.e-card-meta,
#sidebar a {
	color: #34BABA!important;
}

/************************************
****　本文記事見出し H2 H3 H4 H5
************************************/
.article h2:before {
/* 	background-image: none; */
	content: url('https://anpanda.blog/wp-content/uploads/2020/08/leaf_ico.png');
    margin-right:0px;  /*画像右の余白*/
    position:relative;
    top:7px;      /*上からの位置*/
    left:0;       /*左からの位置*/
}

.article h2{
	line-height:2;
	background-color:#f6f6f6;
	font-size: 24px;
	border-radius:1px;
/* 	border-left:solid 14px #636b64;/*H2の色の変更はこちら*/ */
	padding:1em;
	margin-top:70px;
	margin-bottom:2em;
}
.article h3{
	line-height:2;
	background-color:#f6f6f6;/*H3背景色の変更はこちら*/
	font-size:20px;
	border:none;
	border-radius:2px;
	border-left:14px solid #34BABA;/*H3の色の変更はこちら*/
	padding: 0.4em 0.8em;
	margin-top:90px;
}
.article h3:before {
	width: 0em;
}
.article h4{
	line-height:2;
	background-color:#34BABA;/*H4背景色の変更はこちら*/
	font-size: 17px;
	font-weight:normal;
	border-radius:1px;
	padding:1.5em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}
.article h5{
	background: #34BABA;/*H5背景色の変更はこちら*/
	font-size: 17px;
	font-weight:normal;
	line-height:2;
	border-bottom: none;
	border-radius: 4px;
	padding: 1.5em;
	margin-left:0 auto;
	border:1.5px dashed;
	border-color:#93b69c;/*H5枠色の変更はこちら*/
	margin-top:1.5em;
	margin-bottom:1.5em;
}
@media (max-width:480px){
	.article h2{
		font-size:18px;
		padding:1.5em 1em 1.5em 0.5em;
	}
	.article h3{
		font-weight:bold;
		font-size:17px!important;
	}
	.article h4, .article h5{
		font-size:15px!important;
	}
}

/* ブログカード */
.a-wrap:hover {
	background-color: #f2ffff!important;
	box-shadow:  0 0 12px #6fded8;
}

/* その他テキストの文字色設定 */
.related-entry-card-snippet,
.card-snippet,
.e-card-snippet,
.prev-post-title,
.article-footer,
.entry-footer
.sns-follow-message,
.sns-share-message,
.date-tags span,
.sns-follow-message,
.entry-content,
.next-post-title,
.author-content,
#breadcrumb span
{
	color: #767e8a;
}

/*==========================================================*/
/* ◆ヘッダー
/*==========================================================*/
/* ロゴサイズ変更 */
img.header-site-logo-image {
	width: 220px;
	height: 28px;
}
.logo {
	text-align: left;
}
.logo-image {
	padding: 20px 0 0 16px;
}
/* ヘッダーサイズ変更 */
#navi-in {
	height: 36px;
}
#header {
	height: 70px;
}

/* メニューの位置 */
.navi-in > ul {
	justify-content: left;
}

/*==========================================================*/
/* ◆フッター
/*==========================================================*/
/* フッターサイズ変更 */
.footer {
	margin: 0px;
	padding: 0px;
}

/*==========================================================*/
/* ◆メインコンテンツ
/*==========================================================*/
.cat-label {
	background-color: #4865B2;
	border: none;
}

/*==========================================================*/
/* ◆サイドバー
/*==========================================================*/
/* 検索窓の色変更・角丸設定 */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus{
	border: 1px solid #defcfc;
	background: #FFFFFF;
	/* box-shadow:  0 0 12px rgba(255,105,180,1); */
	box-shadow:  0 0 12px #6fded8;
	color: #34BABA;
	border-radius: 8px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea {
	border-radius: 8px;
	color: #767e8a;
}

/* アーカイブ等のサイドバー */
#sidebar h3 {
	background-color: #FFFFFF;
}

/* プロフィールのSNSフォロアー非表示 */
.author-follows {
	display: none;
}

/* プロフィールの運営者名非表示 */
.author-name {
	display: none;
}

/* プロフィールタイトル位置 */
.sidebar h3 {
	margin: 0;
}
.author-box {
	margin-top: 0;
}

/* プロフィール本文文字サイズ */
.author-description {
	font-size: 14px;
}

/* プロフィール写真角丸 */
.avatar {
	border-radius: 10px;
}

/* プロフィールの写真サイズ変更 */
.nwa .author-box .author-thumb {
	/* width: 88px; */
}

/*==========================================================*/
/* 角丸設定
/*==========================================================*/
/* メインコンテンツ・サイドバー */
#main,
#sidebar {
	border-radius: 18px;
}

/* メインコンテンツ：ブログカード */
#list a {
	border-radius: 12px;
}

/* メインコンテンツ：サムネイルキャプション */
.cat-label, .cat-link {
	background-color: #4865B2;
	border-radius: 4px;
	border: none;
}

/*==========================================================*/
/* SNSシェアボタン */
/*==========================================================*/
/*SNSシェアボタン*/
#main .button-caption {
	/* display: none; */
}
.sns-share-message{
	font-weight: bold; /*太字*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: right; /*中央寄せ*/
}
.sns-share-buttons a {
	/*border-radius: 20px; 丸くする*/
	/*font-size: 20px; アイコンのサイズ*/
	margin: 0 14px 0 0; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 138px; /* ボタンの横幅 */
	height: 70px; /* ボタンの高さ */
	box-shadow:  6px 7px 8px #6fded8;/* シャドー */
}
.sns-buttons a {
	background-color: #34BABA;
}

/* アイコンのサイズ */
.social-icon {
	font-size: 26px!important;
}

/* 小見出し非表示 */
.sns-share-message, .sns-follow-message {
	display: none;
}

/* 配置 */
#main .sns-share {
	width: 100%; /*ボタンの横幅*/
}

/* 鉛筆マーク非表示 */
.footer-meta {
	display: none;
}

/************************************************************/
/* 【スマホ設定】レスポンシブデザイン用のメディアクエリ
/************************************************************/
/* 1023px以下 */
@media screen and (max-width: 1023px){
	/*======================================================*/
	/* ◆【スマホ】ヘッダー */
	/*======================================================*/
    /* スマホ用のヘッダー画像を表示 */
	.logo-image {
		padding: 0 0 0 0;
		margin: 0 0 2px 0;
		line-height: 1;
	}
	#navi {
        display: none;
	}
	#header-container-in {
		/* background-color: #34BABA; */
		background-color: #FFFFFF;
		border-top: solid 2px #34BABA;
		border-bottom: solid 16px #34BABA;
		padding-top: 12px;
	}
    #header {
        /* background: url(https://anpanda.blog/wp-content/uploads/2020/08/anpanda_blog_logo_w.png); */
        /* background: url(https://anpanda.blog/wp-content/uploads/2020/08/anpanda_blog_logo-1.png); */
        background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
        content: '';
        display: block;
		width: 220px;
		height: 55px;
		text-align: center;
		margin: 0 auto;
    }
	#content, #main {
		margin-top: 0;
	}

    /* スマホ用のフッター画像を表示 */
	.footer-bottom {
		margin-top: 0px;
	}
	#main {
		margin-bottom: 0px;
	}

    /* スマホ用のフッターメニュー画像を表示 */
	.menu-button-in span {
		/* color: #34BABA; */
		color: #FFFFFF;
	}
	.mobile-footer-menu-buttons {
		background-color: #34BABA;
	}

	/*======================================================*/
	/* ◆【スマホ】SNSシェアボタン */
	/*======================================================*/
	/* SNSシェアボタン */
	#main .button-caption {
		/* display: none; */
	}
	.sns-share-message{
		font-weight: bold; /*太字*/
	}
	.sns-share-buttons {
		flex-wrap: nowrap; /*折り返さない*/
		justify-content: center;
	}
	.sns-share-buttons a {
		/* border-radius: 42px; /* 丸くする*/
		/* font-size: 18px; アイコンのサイズ*/
		margin: 0 0 0 12px; /*ボタン同士の間隔*/
	}
	#main .sns-share a {
		width:33%; /*ボタンの横幅*/
		height: 58px; /*ボタンの高さ*/
		box-shadow:  3px 4px 5px #6fded8;/* シャドー */
	}
	.sns-buttons a {
		background-color: #34BABA;
	}

	/* アイコンのサイズ */
	.social-icon {
		font-size: 24px!important;
	}

	/* 小見出し非表示 */
	.sns-share-message, .sns-follow-message {
		display: none;
	}

	/* 配置 */
	#main .sns-share {
		width: 100%; /*ボタンの横幅*/
	}

	/* 検索時の枠の黄色を非表示 */
	.search-edit {
		outline: none;
	}
	
	/*======================================================*/
	/* ◆【スマホ】サイドバーアイコンの文字列を変更 */
	/*======================================================*/
	.sidebar-menu-button {
		position: relative;
	}
	.sidebar-menu-button .sidebar-menu-caption {
		display: none;
	}
	.sidebar-menu-icon::after {
		content: 'プロフィール';
		font-size: 9px;
		text-align: center;
		opacity: 0.8;
		display: block;
	}
}

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

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