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

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

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

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

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

/* SNSシェアボタン開始 */
#main .button-caption {
  display: none;
}
#main .sns-share a {
  width: 2.5em;
  margin-left: 0.2em;
}
.sns-share-buttons {
  justify-content: center;
}
#main .social-icon {
  font-size: 25px;
}
/* SNSシェアボタン終了 */

/* SNSフォローボタン開始 */
#main .sns-follow a {
  width: 2.5em;
  margin-left: 0.2em;
}
.sns-follow-buttons {
  justify-content: center;
}
/* SNSフォローボタン終了 */

/* Cocoonでフェードインデザイン開始 */
/*#main{*/
/*    animation: fadeIn 1s ease-out 0s 1 normal;*/
/*}*/
/*#sidebar {*/
/*    animation: fadeIn 1s ease-out 0s 1 normal;*/
/*}*/

/*@keyframes fadeIn {*/
/*    from {transform: translateY(10%); opacity: 0;}*/
/*    100% {transform: translateY(0%); opacity: 1;}*/
/*}*/
/*#header-container {*/
/*    animation: Down 1s ease-out 0s 1 normal;*/
/*}*/

/*@keyframes Down {*/
/*    from {transform: translateY(-10%); opacity: 0;}*/
/*    100% {transform: translateY(0%); opacity: 1;}*/
/*}*/

/*#breadcrumb {*/
/*    animation: Right 1s ease-out 0s 1 normal;*/
/*}*/

/*@keyframes Right {*/
/*    from {transform: translateX(10%); opacity: 0;}*/
/*    100% {transform: translateX(0%); opacity: 1;}*/
/*}
/* Cocoonでフェードインデザイン終了 */

/*吹き出しの色の初期設定（すけ(夫)左） */
.sb-id-11 .speech-balloon {
background-color: #f0f8fa; /* 吹き出しメイン部分の背景色 */
border: 2px solid #088cc0; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id-11 .speech-balloon::before {
border-right: 12px solid #088cc0; /* 三角部分の枠色 */
}
.sb-id-11 .speech-balloon::after {
border-right: 12px solid #f0f8fa; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-11 .speech-balloon::before { border-right: 7px solid #088cc0; /* スマホでの三角部分の枠色 */
}
.sb-id-11 .speech-balloon::after { border-right: 7px solid #f0f8fa; /* スマホでの三角部分の背景色 */
}
}
.sb-id-11 .speech-icon img, .sb-id-12 .speech-icon amp-img {
  border: 2px solid #088cc0; /* ボーダーの太さ・形状・色 */
}

/*吹き出しの色の初期設定（あや(妻)左） */
.cocoon-block-balloon.not-nested-style.sbp-l > .speech-balloon{
background-color: #faf2f7; /* 吹き出しメイン部分の背景色 */
border: 2px solid #a52175; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.cocoon-block-balloon.not-nested-style.sbp-l > .speech-balloon::before {
border-right: 12px solid #a52175; /* 三角部分の枠色 */
}
.cocoon-block-balloon.not-nested-style.sbp-l > .speech-balloon::after {
border-right: 12px solid #faf2f7; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-12 .speech-balloon::before { border-right: 7px solid #a52175; /* スマホでの三角部分の枠色 */
}
.sb-id-12 .speech-balloon::after { border-right: 7px solid #faf2f7; /* スマホでの三角部分の背景色 */
}
}
.sb-id-12 .speech-icon img, .sb-id-12 .speech-icon amp-img {
  border: 2px solid #a52175; /* ボーダーの太さ・形状・色 */
}

/*吹き出しの色の初期設定（夫婦左） */
.sb-id-13 .speech-balloon {
background-color: #f0f9f5; /* 吹き出しメイン部分の背景色 */
border: 2px solid #2fa770; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id-13 .speech-balloon::before {
border-right: 12px solid #2fa770; /* 三角部分の枠色 */
}
.sb-id-13 .speech-balloon::after {
border-right: 12px solid #f0f9f5; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-13 .speech-balloon::before { border-right: 7px solid #2fa770; /* スマホでの三角部分の枠色 */
}
.sb-id-13 .speech-balloon::after { border-right: 7px solid #f0f9f5; /* スマホでの三角部分の背景色 */
}
}
.sb-id-13 .speech-icon img, .sb-id-13 .speech-icon amp-img {
  border: 2px solid #2fa770; /* ボーダーの太さ・形状・色 */
}
.sb-id-13 .speech-person {
  width: 130px;
  min-width: 130px;
}
@media screen and (max-width: 480px){
  .sb-id-13 .speech-person {
    width: 50px;
    min-width: 50px;
  }
}

/*吹き出しの色の初期設定（すけ(夫)右） */
.sb-id-14 .speech-balloon {
background-color: #f0f8fa; /* 吹き出しメイン部分の背景色 */
border: 2px solid #088cc0; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id-14 .speech-balloon::before {
border-left: 12px solid #088cc0; /* 三角部分の枠色 */
}
.sb-id-14 .speech-balloon::after {
border-left: 12px solid #f0f8fa; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-14 .speech-balloon::before { border-left: 7px solid #088cc0; /* スマホでの三角部分の枠色 */
}
.sb-id-14 .speech-balloon::after { border-left: 7px solid #f0f8fa; /* スマホでの三角部分の背景色 */
}
}
.sb-id-14 .speech-icon img, .sb-id-12 .speech-icon amp-img {
  border: 2px solid #088cc0; /* ボーダーの太さ・形状・色 */
}

/*吹き出しの色の初期設定（あや(妻)右） */
.sb-id-15 .speech-balloon {
background-color: #faf2f7; /* 吹き出しメイン部分の背景色 */
border: 2px solid #a52175; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id-15 .speech-balloon::before {
border-left: 12px solid #a52175; /* 三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after {
border-left: 12px solid #faf2f7; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-15 .speech-balloon::before { border-left: 7px solid #a52175; /* スマホでの三角部分の枠色 */
}
.sb-id-15 .speech-balloon::after { border-left: 7px solid #faf2f7; /* スマホでの三角部分の背景色 */
}
}
.sb-id-15 .speech-icon img, .sb-id-15 .speech-icon amp-img {
  border: 2px solid #a52175; /* ボーダーの太さ・形状・色 */
}

/*キャッチフレーズサイズ変更 */
.tagline {
font-size: 20px;
font-weight: bold; 
}
@media screen and (max-width: 768px){
.tagline {
font-size: 15px;
position: relative;
bottom: 30px;
}
}
/*SNSフォローボタン変更 */
.sidebar .sns-follow-buttons a {
  width: 18%; /*ボタンの幅*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  background: none !important;
  border: 1px solid #444d53;
  color: #444d53;
  border-radius: 50px;
}
.sidebar .twitter-button:hover {
  background-color: #1da1f2 !important;
  color: #fff;
  border-color: #1da1f2;
}
.sidebar .feedly-button:hover {
  background-color: #2bb24c !important;
  color: #fff;
  border-color: #2bb24c;
}
.sidebar .rss-button:hover {
  background-color: #f26522 !important;
  color: #fff;
  border-color: #f26522;
}
.sidebar .facebook-button:hover {
  background-color: #3b5998 !important;
  color: #fff;
  border-color: #3b5998;
}
.sidebar .instagram-button:hover {
  background-color: #c522b8 !important;
  color: #fff;
  border-color: #c522b8;
}
/**************************************
カテゴリーのもっと見るボタン
************************************/
/*カテゴリーごと表示の「もっと見る」ボタン*/
.list-more-button:hover{
background: #bce4dc; /*背景色*/
color:#000000; /*文字色*/
}
/**************************************
カテゴリーのもっと見るボタン
************************************/
/*カテゴリーごと表示の「もっと見る」ボタン*/
.list-more-button:hover{
background: #bce4dc; /*背景色*/
color:#000000; /*文字色*/
}
/************************************
**モバイルスライドインメニュー
************************************/
span.fas.fa-times::before{
font-family: "Font Awesome 5 Free";
content: "\f060";
color:#7b7b7b;/*矢印色変更はこちら*/
}
ul.menu-drawer:before{
font-size:0.9em;
background: white;
color:#333;
margin-bottom:1em;
border-bottom:3px dotted #7b7b7b; /*点線の色変更はこちら*/
content: "メニュー";
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
padding:0;
}
.menu-drawer li{
font-weight: bold;
}
.menu-drawer a{
font-size:1.3em;
background-color:#ffffff;
color:#545454;
margin: .5em 0;
}
.menu-drawer a:hover{
background-color:#f7f7f7;
}
.menu-drawer .sub-menu {
padding:0;
}
.menu-drawer .sub-menu li{
font-size: .9em;
}
.menu-drawer .sub-menu li a::before {
font-family: "Font Awesome 5 Free";
content : "\f105";
color:#7b7b7b;
margin:0 .5em 0 1em;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none;
}
/* モバイル用ナビゲーション(トップメニュー版) */
.slicknav_menu{
	background: #f7f7f7; /* ナビの背景色 */	
}
.slicknav_btn{
	background-color: #333333; /* MENUボタンの色 */	
}
.slicknav_menu .slicknav_menutxt{
	text-shadow: 0 1px 3px rgb(0 0 0 / 45%); /* 「MENU」の文字の影の濃さ */
　　　　　color: #333333;  /* 「MENU」の文字の色 */
}
.slicknav_nav a{
	color: #333333; /* ナビ中の文字色 */	
}
/*ヘッダーの色と高さ、アイコンの位置を調整*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #f7f7f7;
	color: #333333;
	height: 75px;
	padding-top: 15px;
}

.logo-menu-button.menu-button{
	background-color: #f7f7f7;
	height: 75px;
}

/*768px以下でロゴの大きさ変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: 200px;
	max-height: none;
	margin: 2px auto 0;
}
}