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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
見出し
************************************/
/*見出し初期化*/
.article h2{
  padding-left: 0;
}
.article h2::before {
  display: none;
}
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
  padding: 0;
  margin: 0;
  background: none;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position: relative;
}
/*見出しデザインを変える場合はこれより下に記載してください*/
/*新しい見出し*/
.article h2{
  padding:0.8em;/*文字周囲の余白*/
  color: #443800;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 12px #fcddc5;/*左線（実線 太さ 色）*/
  font-size: 22px;
  margin-top: 50px;/*見出しの上の余白*/
  margin-bottom: 40px;/*見出しの下の余白*/
}
.article h3{
  padding: 0.5em;/*文字周りの余白*/
  color: #443800;/*文字色*/
  background: #fdfaf7;/*背景色*/
  border-left: solid 8px #fadfcb;/*左線（実線 太さ 色）*/
  font-size: 20px;
  margin-top: 10px;/*見出しの上の余白*/
  margin-bottom: 40px;/*見出しの下の余白*/
}
.article h4{
  padding: 0.5em;/*文字周りの余白*/
  color: #443800;/*文字色*/
  background: #fdfaf7;/*背景色*/
  border-left: solid 5px #fdf0be;/*左線（実線 太さ 色）*/
  font-size: 18px;
  margin-top: 10px;/*見出しの上の余白*/
  margin-bottom: 30px;/*見出しの下の余白*/
}
/************************************
カテゴリーラベルを変更
************************************/
/*左上のカテゴリーアイコンを変更*/
.cat-label{
  top: 0;
  left: 10px;
  border: none;
  font-size: 12px;
  color: #fff;
  background-color: #ffa185;
  padding: 1px 5px;
  margin: -6px 0 0 0;
  overflow: visible;
}
.cat-link{/*カテゴリーラベル*/
  text-decoration: none;/*テキスト初期化*/
  color: #fff;/*フォントカラー*/
  font-size: 12px; /*フォントサイズ*/
  background-color: #ffa185;/*背景色*/
  display: inline-block;/*横並びで上下左右空白有り*/
  margin-right: 5px;/*内側右余白*/
  padding: 2px 6px 0px 6px;/*外側余白*/
  border-radius: 9px 3px;/*カテゴリ背景デザイン*/
  border: 0px;/*枠線無し*/
  word-break: break-all;/*テキストの途中で改行させない*/
}
.cat-link:hover{/*カテゴリーラベル マウスホバー時*/
  transition: all 0.8s ease;/*アニメーション*/
  opacity: 0.6;/*不透明度*/
  color: #fff;/*フォントカラー*/
  background-color: #ffc0ad;/*背景色*/
}
/************************************
Contact Form 7カスタマイズ
************************************/
/* Contact Form 7 20231110変更*/
/* 必須マーク */
.must{
  color: #fff;
  margin-right: 10px;
  padding: 4px 6px;
  background: #f58694; /* 背景色 */
  border-radius: 5px;
  font-size: 10px; /*フォントサイズ*/
}
/* 任意マーク */
.free {
	color: #fff;
	margin-right: 10px;
	padding: 4px 6px;
	background: #7fbfff; /* 背景色 */
	border-radius: 5px;
  font-size: 10px; /*フォントサイズ*/
}
/* 項目名を太字にする */
form p {
  font-weight: 600;
}
/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 8px 15px;
  margin-right: 10px;
  margin-top: 10px;
  border: 1px solid #d0d5d8; /* 枠線の色 */
  border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
  height: 200px;
}
/* エラーメッセージを見やすくする
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}*****/
/* 送信ボタンを見やすくする */
input.wpcf7-submit {
  width: 80%; /*ボタン横幅*/
  height: 60px;
  border-color: #ffaa56; /* 枠線の色 */
  background: #ffaa56; /* ボタンの色 */
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  border-radius: 5px;
}
/*送信ボタンマウスホバー時*/
input.wpcf7-submit:hover {
  opacity:0.7;
}
/*送信ボタンを中央揃えにする*/
div.wpcf7 .wpcf7-spinner {
  display: block;
}
/************************************
 もしものかんたんリンク
************************************/
/*cocoonの設定で付く枠を消す*/
.easyLink-img img{
  box-shadow: initial!important;
}
/*画像スライドの矢印消す
.easyLink-arrow-left{
  display:none!important;
}
.easyLink-arrow-right{
  display:none!important;
}*/
/*商品名の大きさとか*/
.easyLink-info-maker {
  display: none;
}
.easyLink-info-model {
  display: none;
}
.easyLink-info-name a{
  color: #628fbc !important; /* 文字色 */ 
}
/*ボタンをいじるよ*/
.easyLink-info-btn a{
  margin: 5px 10px 5px 0!important;
  padding: 0 12px!important;
  line-height: 35px!important;
/*display: inline-block!important;*/
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
}
/*ボタンの色を変えたい時はここから*/
.easyLink-info-btn-amazon{
  background: rgb(255,179,107)!important;
}
.easyLink-info-btn-rakuten{
  background: rgb(234,115,115)!important;
}
.easyLink-info-btn-yahoo{
  background: rgb(115,193,234)!important;
}
/******ここからスマホverの調整******/
@media screen and (max-width: 480px){
/*スマホの広告幅 */
div.easyLink-box.easyLink-size-s {
  max-width: 340px !important;
}
/* スマホのボタン調整 */
.easyLink-info-btn a{
  margin: 5px 10px 5px 0!important;
  padding: 0 12px!important;
  line-height: 35px!important;
  display: inline-block!important;
  width: 100%!important;
  box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
}
/*スマホでも横長にするため*/
.easyLink-img{
  float: left!important;
  width: 130px;
  padding-right: 20px!important;
}
.easyLink-info{
  display: flex;
  flex-wrap: wrap;
}
.easyLink-info-btn-yahoo{
  font-size: 10px!important;
}
p.easyLink-info-name a{
  font-size: 16px;
}
.easyLink-info-btn{
  margin-top: -5px!important;
}
p.easyLink-img-box{
  position: initial!important;
  padding-bottom: 130px!important;
}
/*商品画像サイズ */
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img
p.easyLink-img-box,
div.easyLink-box div.easyLink-img
p.easyLink-img-box img.easyLink-img-pht{
  max-height: 170px !important;
  min-height: 100px !important;
  max-width: 130px !important;
}
}
/************************************
AdSense広告フォント
************************************/
.ad-label {
  font-size: 0.8em;
  color: #443800;
}
/************************************
サイドバー
************************************/
/*カテゴリの行間を小さくする*/
.widget_categories ul li a{
  line-height: 1.3;
}
/*カテゴリのフォントだけを小さくする*/
.widget_categories ul li a{
  font-size: 12px!important;
}
.widget_categories ul li a::before{
  font-family: FontAwesome;
  content: "\f07b";/*FontAwesomeのユニコード*/
  color: #7ae6b9;/*アイコンの色*/
  padding-right: 6px;
}
.widget_categories > ul > li > a:first-child{
  border-top: none;
}
/*ウィジェット子カテゴリのカスタマイズ*/
.widget_categories ul li ul li a::before{
  font-family: FontAwesome;
  content: "\f054"; /*FontAwesomeのユニコード*/
  color: #7ae6b9; /*アイコンの色*/
  padding-right: 6px;
}
/************************************
シェアボタンを丸くする
************************************/
.ss-top .sns-share-buttons a .button-caption,
.ss-bottom .sns-share-buttons a .button-caption {
  display: none;
}
.sns-share.ss-top.ss-col-6 a,
.sns-share.ss-bottom.ss-col-6 a {
  width: 40px;
}
.sns-share-buttons a{
  border-radius: 50%;
  height: 40px;
  margin: 4px;
}
.sns-share-buttons{
  justify-content: center;
}
.sns-share.ss-high-and-low-lc a .social-icon,
.sns-share.ss-high-and-low-cl a .social-icon,
.sns-share.ss-high-and-low-lc a .button-caption,
.sns-share.ss-high-and-low-cl a .button-caption{
  font-size: 22px;
  padding-top: 0px;
}
.sns-share.ss-high-and-low-lc a > span {
  padding-top: 0px;
}
/************************************
次のページへ
************************************/
/* 「次のページへ」を抜く */
.pagination-next{
  display: none;
}
/* 「次のページへ」の下のページ数の数字カスタマイズ */
/*通常時*/
.page-numbers{
  color: #ffb6a6;
  border: 1px solid #ffb6a6;
}
/*現在のページ*/
.pagination .current{
  background-color: #ffb6a6;
  color: #ffffff;
}
/*ドット「…」の部分*/
.page-numbers.dots{
  opacity: 1;
  background: none;
}
/*マウスホバー時*/
.pagination a:hover{
  background-color: #ffb6a6;
  color: #ffffff;
}
.page .sns-share,
.page .sns-follow{
  display: none;
}
/************************************
cocoonモバイルメニューのカスタマイズ
************************************/
.mobile-menu-buttons{
  background: rgba(253, 206, 110,0.9);/*フッターメニューの背景を半透明化*/
  box-shadow:0 -2px 6px gray;/* メニューに影をつける */
}
.navi-menu-button,
.mobile-menu-buttons .home-menu-button > a,
.search-menu-button,
.mobile-menu-buttons .top-menu-button > a,
.sidebar-menu-button{
  color: #333333;/* メニューのテキストの色 */
}
.mobile-menu-buttons .menu-button:hover {
  background: rgba(237, 179, 145,0.9);/* ホバー背景色 */
}
.top-menu-button a:hover,
.home-menu-button a:hover,
.mobile-menu-buttons :hover,
.menu-button:hover{
  color: #333333;/* メニューのテキストの色(選択時) */
}
.mobile-menu-buttons .menu-content{
  color: #333333;/* サイドメニューの表示色が変わるのを防ぐ */
}
/************************************
関連記事カスタマイズ
************************************/
/* 関連記事・コメントの見出し */
.related-entry-heading,
.comment-title{
  font-size: 24px; /* 文字サイズの変更30pxだと大きくなる */
  text-align: center; /*文字位置中央*/
  font-weight: normal; /* 文字の太さを普通にしたい時 */
}
.related-entry-card-wrap.a-wrap.cf{ /*下余白クリア*/
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.related-entry-card-content.card-content.e-card-content{ /*カード下余白設定*/
  padding-bottom: 16px;
}
.related-entry-card-title.card-title.e-card-title{
  font-size: 14px!important;/*フォントサイズ*/
  height: 80px!important;/*メニュー縦幅設定*/
  color: #443800;
  display: flex;
  align-items: center;/*縦中央寄せ*/
  font-weight: normal;
}
.related-entry-card.cat-label{
  display: none;/*カテゴリー非表示に*/
}
.related-entry-heading::before, .comment-title::before {
  display: none;/*スキン固有のグレーの線を非表示に*/
}
/* スマホでのフォントサイズと下余白 */
@media screen and (max-width: 480px){
.related-entry-card-title.card-title.e-card-title{
  font-size: 14px;
}
.related-entry-card-content.card-content.e-card-content{
  padding-bottom: 0px;
}
}
/************************************
**カテゴリー／アーカイブ見出しカスタマイズ
************************************/
#archive-title{
  padding-bottom: 8px;/*下に余白*/
  font-size: 22px;/*フォントサイズ*/
  text-align: center;/*文字位置中央*/
  letter-spacing: 4px;/*文字間隔*/
}
/************************************
** ■ウィジェットプロフィールカスタマイズ
************************************/
#author_box-2 .author-follows {
  display: none;
}
/************************************
** もくじカスタマイズ
************************************/
/*目次全体の定義*/
.toc {
  display: block;
  padding: 0px;
  margin-bottom: 40px;
  margin-left: 3%;
  margin-right: 3%;
  border: solid 2px #fcddc5;
}
/*目次と書いてある部分の初期設定を消す**/
.toc-title:before {
  content: none!important;
}
/*目次と書いてある部分*/
.toc-title {
  position: relative;
  text-align: center;
  padding: 5px 0;
  background: #fcddc5;
  font-weight: bold;
}
/*目次内容が表示される部分*/
.toc .toc-content {
  padding: 15px;
  background-color: #fffff5;
}
/*h2のテキストについて*/
.toc-list > li a {
  color: #443800;/*文字の色*/
}
/*h3以下のテキストについて*/
.toc-list > li li a {
  font-weight: normal!important;
  font-size: 90%;
  color: #908270;
  margin-left: -10px;
}
/*リストの行間広げる**/
.toc-content ol li{
  margin: 2px;
}
/*h2のアイコン*/
.toc-list > li a::before {
  font-family: FontAwesome;
  content: "\f138"; /*FontAwesomeのユニコード*/
  color: #f4ab92; /*アイコンの色*/
  font-size: 110%; /*アイコンの大きさ*/
  padding-right: 5px; /*アイコンの位置*/ 
  margin-left: -3px; /*アイコン少し左に*/
}
/*h3のアイコン*/
.toc-list > li li a::before {
  font-family: FontAwesome;
  content: "\f0da";
  color: #908270;
  font-size: 90%; 
  margin-left: 13px; /*アイコン少し右に*/
}
/*ホバー時の下線を消して、背景に色をつける*/
.toc a:hover { 
  background-color: #fff3e3;/*ホバー時の背景色*/ 
  font-weight: bold;/*文字の太さ*/ 
  text-decoration: none;/*下線消す*/
}
/*h3以下の先頭に丸をつける
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #908270;
  position: relative;
  margin-bottom: 2px;
}:/
/*h3以下のデフォルトで表示される数字を非表示に
.article .toc-list > li {
  list-style: none;
}**/
/***目次スマホ用
@media (max-width:880px){
h2アイコンを左に少し寄せる
.toc-list > li a {
  margin-left: -8px;
}
}***/
/*****************************
******フロントページ変更後
******************************/
/** カテゴリーごと表示の「もっと見る」ボタン******/
.list-more-button:hover{
  background: #ffb6a6;/*背景色*/
  color: #fff;/*文字色*/
  border: #fff
}
/*カテゴリ一覧　タイトル*/
.list-title{
  border: 10px solid #ffffff;/*枠線*/
  background-color: #f6ad68;/*背景色*/
  color: #ffffff;/*文字色*/
  padding: 5px;/*余白*/
  font-size: 18px;/*文字サイズ*/
  font-weight: 700;/*太字*/
}
.list-title-in:before,
.list-title-in:after{
  background-color: #fff;/*前後の線の色*/
}
.entry-card-title{
  font-size: 15px;/*カードのフォントサイズ*/
}
/***********************
 スライドインメニューをカスタマイズ
 *************************/
.navi-menu-content{
  background-color: rgba(241,150,124,0.7)!important;
}
.menu-drawer a{
  font-size: 1.1em;/*文字の大きさ*/
  color: #fff;/*文字の色*/
  height: 2.2em;/*行の高さ*/
}
.menu-drawer a:hover{
  color: rgba(255,255,255,0.8);
  background-color: rgba(241,150,124,0.5)!important;
}
/***********************
 アピールエリアをカスタマイズ
 *************************/
#appeal,
.appeal.appeal-in{
  min-height: 24vw;
}
@media screen and (min-width: 1267px) {
  #appeal,
  .appeal.appeal-in{
  min-height: 300px;
  }
}
.appeal {
  background-size: contain;/*なるべく大きくするみたいなやつらしい*/
}
/***********************************
 ** 外部ブログカードの抜粋文を非表示にする
.external-blogcard-snippet{
  display: none;
}**********************************/
/*ブログカードのスニペット非表示用CSS
.blogcard-snippet {
 display: none;
}**********************************/
/******コンテンツ上部のスキマ調整*******/
.content{
  margin-top: -35px;
}
/******ブログカードのラベルの色*******/
.blogcard-type .blogcard-label{
  background-color: #ed995c;
}
/************************************
ボックスメニューPC用
************************************/
.wwa .box-menu {
  width: calc(100%/5); /* メニューの数 */
}

/************************************
マウスオーバー時にリンクを半透明に光らせる
************************************/
a img {
  border:none;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
a:hover img {
  opacity: 0.7;/* 透過レベル */
  filter: alpha(opacity=70);
}
/************************************
6.2にしたら記事一覧の背景がレモン色になったのでそれを白くする**/
#main {
  background: #fff;
}
  /************************************/
/************************************
**reCAPTCHAのロゴを非表示に
************************************/
.grecaptcha-badge {
  visibility: hidden; }
/************************************
付箋風ボックスの背景色を変える
.blank-box.sticky.aaa {
  background-color: #a9a9a9;
}************************************/
/************************************
付箋風ボックスと白抜きのデフォ灰色の色をずっと変える
************************************/
/*付箋風*/
.blank-box.sticky {
  border-color: #FFA103;
  background-color: #fff7cc;
}
/*白抜き*/
.blank-box {
  border-color: #ffd900;
}
/****************
タブ見出しボックスのデフォの色をずっと変える
****************/
.tab-caption-box-label{ 
  font-weight: bold; /*タイトル文字の太さ*/
  color: #ffffff;
  border-color: #F39800;
  background-color: #F39800;
}
.tab-caption-box-content {
  border-color: #F39800;
  background-color: #FFF7CC;
}
/****************
黄色アンダーラインのデフォの色と太さをずっと変える20231026
****************/
.marker-under {
  background: linear-gradient(transparent 60%, #ffe2b2 60%);
  font-weight: bold;
}
/****************
赤色と水色アンダーラインのデフォの太さをずっと変える20231026
****************/
.marker-under-red {
  font-weight: bold;
}
.marker-under-blue {
  font-weight: bold;
}
/*****************
シェアボタンのXをTwitterの鳥と水色にする20231028
*****************/
.bc-brand-color.sns-share.ss-top .x-corp-button, .bc-brand-color.sns-share.ss-bottom .x-corp-button {
  background-color: #fff;
  color: #1da1f2;
  border:solid 2px #1da1f2;
}
.bc-brand-color.sns-share.ss-top .x-corp-button:hover, .bc-brand-color.sns-share.ss-bottom .x-corp-button:hover {
  background-color: #1da1f2;
  color: #fff;
  opacity:1;
}
.icon-x-corp:before {
  content: "\e91c";
}
/*****************
シェアボタンのコピーをグレーにする20231029
*****************/
.bc-brand-color.sns-share.ss-top .copy-button.copy-share-button-sq, .bc-brand-color.sns-share.ss-bottom .copy-button.copy-share-button-sq {
  background-color: #fff;
  color: #706947;
  border:solid 2px #706947;
}
.bc-brand-color.sns-share.ss-top .copy-button.copy-share-button-sq:hover, .bc-brand-color.sns-share.ss-bottom .copy-button.copy-share-button-sq:hover {
  background-color: #706947;
  color: #fff;
  opacity:1;
}
/*****************
フォローボタンのXをTwitterの鳥と水色にする20231029
*****************/
.bc-brand-color-white.sns-follow.ss-top .x-corp-button, .bc-brand-color-white.sns-follow.sf-bottom .x-corp-button {
  background-color: #fff;
  color: #1da1f2;
  border:solid 2px #1da1f2;
}
.bc-brand-color-white.sns-follow.ss-top .x-corp-button:hover, .bc-brand-color-white.sns-follow.sf-bottom .x-corp-button:hover {
  background-color: #1da1f2;
  color: #fff;
  opacity:1;
}
.icon-x-corp-logo:before {
  content: "\e91c";
}
.bc-brand-color-white.sns-follow.ss-top .feedly-button, .bc-brand-color-white.sns-follow.sf-bottom .feedly-button {
  background-color: #fff;
  color: #2bb24c;
  border:solid 2px #2bb24c;
}
.bc-brand-color-white.sns-follow.ss-top .feedly-button:hover, .bc-brand-color-white.sns-follow.sf-bottom .feedly-button:hover {
  background-color: #2bb24c;
  color: #fff;
  opacity:1;
}
.sns-follow-buttons a {
  width: 49.5%; /*これがないとパソコンで正方形になっちゃう*/
}
/************************/
/* 固定ページの不要情報を非表示 20231110*/
/************************/
.page .date-tags, /*投稿日・更新日*/
.page .author-info, /*投稿者情報*/
.page .eye-catch-wrap { /*アイキャッチ*/
display: none;
}
/************************/
/*プロフィールとTwitterフォローボタン近づける20240329*/
/************************/
.body .author-box{
  margin-bottom: 14px;
}
/************************************
****************
** レスポンシブデザイン用のメディアクエリ
****************
************************************/
/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
.entry-card-title{
  font-size: 12px; /*スマホでのフォントサイズ*/
}}
/* ボックスメニューモバイル用の設定 */
@media screen and (max-width: 768px){
.box-menus .box-menu {
  width: calc(100%/5); /* メニューの数 */
}
.box-menu-label{
  font-size: 10px; /* 文字サイズ */
}
.box-menu{
  min-height: 50px; /* 高さ */
}
}
/********************* アピールエリアの設定
@media screen and (max-width: 768px) {
div.appeal-in {
display: none;
}
}
.appeal-content {
display: none;
}
#appeal-in {background-image: url("https://usagi-artteacher.com/wp-content/uploads/2021/02/20200428title-light-202102-1.png"); /*画像の指定
background-repeat: no-repeat;background-position:center;}
****************/

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

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