@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

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


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

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

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

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



/*---メニューバーをマテリアル風にデザイン---*/
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #b5b5b5 !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #333 !important;
    border-bottom: 3px solid #FDD835;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #333 !important;
    transition: all .2s ease;
}



/*---全固定ページの投稿日・更新日、著者情報を消す---*/
.page .date-tags,
.page .author-info {
    display: none;
} 


/*---固定ページでシェア・フォローボタンをまとめて非表示---*/
.page .sns-share,
.page .sns-follow {
    display: none;
}



/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}


/*---コメント欄のカスタマイズ---*/
/* コメント送信ボタンの文字色・背景色が見えにくいので修正 */
.comment-form .form-submit input {
  background-color: #edfaff;
  border-color: #72c7e6;
  border: 1px solid #ddd;
  color: #333;
}

/*コメント入力欄を表示するボタンのカスタマイズ*/
    .comment-btn {
      background-color: #72c7e6;
      color: #fff;
      border: none;
      font-size: 20px;
      transition: 0.5s;
    }
    .comment-btn:hover {
      background-color: #49add1;
      color: #fff;
      transition: 0.5s;
    }

/*コメント入力欄のカスタマイズ*/
    .comment-respond { /*入力欄全体の枠*/
      border: 2px solid #72c7e6;
      margin-top: -2px;
    }
    .comment-respond p {
      margin: 1em 0;
    }
    #commentform { /*フォーム部分の枠*/
      padding: 20px;
    }
    p.comment-notes { /*注意書きの文字サイズ*/
      font-size: 14px;
    }
    p.form-submit {
      margin: 2em 0 1em 0;
    }
    #commentform input[type="text"], #commentform textarea { /*入力スペースの装飾*/
      padding: 11px;
      border-radius: 4px;
      font-size: 18px;
      width: 100%;
      background: #f5f5f5; /*入力スペースの背景色*/
    }
    #commentform input[type="submit"] { /*送信ボタンの装飾*/
      -webkit-appearance: none;
      padding: 11px;
      width: 100%;
      margin: 0;
      cursor: pointer;
      background: #72c7e6;
      color: #fff;
      border: none;
      font-size: 16px;
      transition: 0.5s;
    }
    #commentform input[type="submit"]:hover { /*送信ボタンのマウスホバー時*/
      background: #49add1;
      transition: 0.5s;
    }

/*コメントリストのカスタマイズ*/
    .comment-list { /*全体の枠*/
      border: 2px solid #72c7e6;
      padding: 0;
      border-radius: 10px 10px 0 0;
    }
    .comment-title { /*タイトルの装飾*/
      margin: 0;
      font-size: 24px;
      background: #72c7e6;
      color: #fff;
      padding-left: 20px;
      font-weight: normal;
    }
    .comment-title:before { /*タイトルにアイコンを付ける*/
      font-family: "Font Awesome 5 Free";
      content: '\f086';
      color: #fff;
      margin-right: 4px;
    }
    .commets-list {
      padding: 20px 20px 0 20px;
    }
    .commets-list > li {
      border-top: 2px dashed #72c7e6; /*スレッドを区切る点線*/
      margin: 30px 0;
      padding-top: 20px;
    }
    .commets-list > li:first-child {
      border: none;
      margin-top: 0;
      padding-top: 0;
    }
    .commets-list .children {
      border-left: 2px solid #ccc; /*返信コメントの左側のボーダー*/
      margin: 0;
    }
    .commets-list .avatar { /*アバターの位置調整*/
      float: left;
      border-radius: 50%;
      margin-right: 10px;
    }
    .comment-content { /*コメントの吹き出し*/
      background: #e2e2e2;
      padding: 2px 10px;
      margin: 10px 0 6px 0;
      border-radius: 10px;
      position: relative;
    }
    .comment-content::before { /*吹き出しの三角部分*/
      content: "";
      position: absolute;
      top: -14px;
      left: 50px;
      border-style: solid;
      border-color: transparent transparent #e2e2e2 transparent;
      border-width: 0 20px 20px 0;
    }
    .comment-content p { /*吹き出し内の文字を調整*/
      font-size: 14px;
      margin: 1em 0;
      line-height: 1.5em;
    }
    .comment-reply-link { /*返信ボタンの装飾*/
      color: #fff;
      border: none;
      border-radius: 20px;
      background: #72c7e6;
      padding: 1px 12px;
      transition: 0.5s;
    }
    .comment-reply-link:hover { /*返信ボタンのマウスホバー時*/
      color: #fff;
      background: #49add1;
      transition: 0.5s;
    }
    .commets-list .comment-body {
      margin-bottom: 0;
    }



/*---ブログカードに「続きを読む」を入れる---*/
.blogcard {
	padding: 1rem;
	color: #666;
	position: relative;
	border-color: #68d6cb !important; /* 枠線の色を変更 */
}
a.blogcard-wrap:hover{
	background-color: transparent!important;
	opacity: 0.8;
}
a.blogcard-wrap:hover img.blogcard-thumb-image{
	transform: scale(1.1);
	transition: .3s;
}
.blogcard-thumbnail {
	line-height: 0;
	margin-right: 1rem;
	overflow: hidden;
}
.blogcard-snippet{
	display: none; /*抜粋文を非表示*/
}
.internal-blogcard-footer{
	display: none; /* 内部ブログカードのURLと日付を非表示 */
}
.external-blogcard-site { /*外部ブログカードのアイコンとURL*/
	margin: .5rem 0 0 0;
}
.blogcard::before{
	content: 'あわせて読みたい'; /* タイトルの文言 */
	position: absolute;
	top: -.8rem;
	left: 1.7em;
	font-size: .55em;
	background-color: #68d6cb; /* タイトルの背景色 */
	padding: .6em 1em;
	font-weight: bold;
	color: #fff;  /* タイトルの文字色 */
	border-radius: 2px;
}
.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: .7em;
	background-color: #FFC778; /* 内部リンク右下枠の背景色 */
	padding: .4em 2em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}

@media screen and (max-width: 480px){ /*スマホ表示時 480px以下*/
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snippet{
		display: none; /*抜粋文を非表示*/
	}
}



/*---ページ送りをカスタマイズ---*/
    .pagination-next-link {
      background-color: #72c7e6; /*背景色*/
      color: #fff; /*文字色*/
      border: none; /*ボーダーを消す*/
      border-radius: 30px;
      box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2); /*「次のページ」部分の影*/
    }
    .pagination-next-link:hover { /*マウスホバー時*/
      background-color: #95D0E6;
      transition: all 0.3s ease;
      color: #fff;
    }
    .page-numbers { /*通常時*/
      color: #72c7e6;
      border: 1px solid #72c7e6;
      border-radius: 50%;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /*数字部分の影*/
    }
    .pagination .current { /*現在のページ*/
      background-color: #72c7e6;
      color: #fff;
      border: none;
    }
    .page-numbers.dots { /*ドット「…」の部分*/
      opacity: 1;
      background: none;
    }
    .pagination a:hover { /*マウスホバー時*/
      background-color: #72c7e6;
      color: #fff;
    }
    a.prev, a.next {
      display: none;
    }
    @media screen and (max-width: 480px) { /*スマホ表示時 480px以下*/
    .page-numbers {
      width: 48px;
      height: 48px;
      line-height: 48px;
    }
    }



/*---記事内の画像を自動でちょうどいいサイズに調整---*/
main img{
    max-height: 80vh;
    width: auto;
}



/*---サイドバー見出し 文字の下だけボーダーカラーを変更---*/
.sidebar h3 {
	color: #494949;
	background: none;
	font-size: 24px;
	letter-spacing: 2px;
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-bottom: 5px;
}
.sidebar h3::before, .sidebar h3::after {
	content: "";
	position: absolute;
	bottom: 0;
}
.sidebar h3::before {
	border-bottom: 3px solid #325A8C;
	width: 100%;
	left: 0px;
}
.sidebar h3::after {
	border-bottom: 3px solid #D8D8D8;
	width: 100%;
}



/*---サイドバー　カテゴリーのデザイン変更---*/
    .widget_categories ul li a { /*親カテゴリ用のコード*/
        color: #333;
        text-decoration: none;
        padding: 6px 0;
        display: block;
        padding-right: 4px;
        padding-left: 4px;
        border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
        font-size: 16px;
    }
    .widget_categories ul li a::before { /*親カテゴリのアイコン*/
        font-family: "Font Awesome 5 Free";
        content: "\f105";
        padding-right: 10px;
		font-weight: bold;
    }
    .widget_categories > ul > li > a:first-child { 
        border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
    }
    .widget_categories > ul > li > a:last-child {
        border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
    }
    .widget_categories ul li a .post-count { /*記事数用のコード*/
        display: block;
        float: right;
        background: #ededed;
        padding: 0 1em;
        font-size: 14px;
        margin-top: .2em;
        border-radius: 4px;
    }
    .widget_categories ul li a:hover { /*親子共通マウスホバー時*/
        background: none;
        transition: 0.3s;
        color: #72c7e6;
    }
/*マウスホバー時　下線を引く*/
.widget_categories ul li a {
  padding-bottom: 4px;
  position: relative;
}
.widget_categories ul li a::after {
  background-color: #72c7e6;
  bottom: 0;
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  transition: .5s all;
  width: 0;
}
.widget_categories ul li a:hover::after {
  width: 100%;
}
    .widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
        background: #72c7e6;
        color: #fff;
        transition: 0.3s;
    }
    .widget_categories ul li ul { /*子カテゴリのボックス*/
        border-bottom: 1px dotted #ccc;
    }
    .widget_categories ul li ul li a { /*子カテゴリ用のコード*/
        color: #333;
        text-decoration: none;
        padding: 0 4px 4px 4px;
        display: block;
        border: none;
    }
    .widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
        font-family: FontAwesome;
        content: "・";
        padding: 0;
    }


/*---サイドバー　タグクラウドのデザイン変更---*/
    .tagcloud a {
        background: none; /*背景を消す*/
        border: 1px solid #ccc; 
        border-radius: 20px; /*角の丸み*/
        color: #555; /*文字色*/
        display: inline-block;
        padding: 3px 10px;
        text-decoration: none;
        font-size: 13px;
        margin: 2px;
        flex: 1 1 auto;
        display: flex;
        justify-content: space-between;
    }
/*    .tagcloud a .tag-caption::before {
        content: "#"; /*アイコンの変更*/
/*        padding-right: 3px;
    }*/
    .tagcloud a:hover { /*マウスホバー時*/
        background: #72c7e6;
        border: 1px solid #72c7e6;
        color: #fff;
        transition: 0.3s; /*アニメーションの時間*/
    }



/*---サイドバー検索ボックスをカスタマイズ---*/
.search-box {
	margin: 1em 0;
}
input::placeholder {
	font-size: 0.9em; /*「サイト内を検索」の文字サイズ*/
}
.search-edit, input[type="text"] {
	border-radius: 30px; /*検索ボックスの角の丸さ*/
	height: 3em;
}
.search-submit{ /*検索ボタン*/
	right: 5px;
}
.search-submit:hover::before {
	color: gray; /*検索ボタンホバー時の色*/
}
.search-edit:focus {
	outline: none;
    border: 2px solid #72c7e6; /* フォーカス時の枠の太さ・線種・色 */
}


/*--- 折り畳みアーカイブウィジェット ---*/
/* 各年の親要素：クリックできることを示し、区切り線を入れる */
.widget_archive a.year {
    cursor: pointer;
    border-bottom: 1px dotted #ccc; /* 各年に下線を引く */
    display: block; /* クリック領域を広げる */
}
/* 各年横のアイコン */
.widget_archive a.year::after {
    font-family: "Font Awesome 5 Free";
    content: '\f107'; /* 下向き矢印のアイコン */
    margin-left: 8px; /* アイコンの位置 */
    font-weight: bold;
}
/* 各月の横並び（フレックスボックス）の設定 */
.widget_archive .years ul {
    display: flex;
    flex-flow: row wrap; /* 折り返しを許可 */
    font-size: 1rem;
    line-height: 1.5; /* 行の高さを低くする */
    text-align: center; /* 中央寄せで等間隔感を出す */
    white-space: nowrap; /* 月名（12月など）が途中で改行されないように固定 */
    text-decoration: underline; /* 各月のリンクに下線を引く */
}
/* 1行に6ヶ月ずつ並べる（PCサイズ） */
.widget_archive ul.years li {
    flex: 0 0 calc(100% / 6); /* 6列 */
}
/* レスポンシブ対応：画面幅が狭いときは3列にする */
@media (max-width: 480px) {
  .widget_archive ul.years li {
    flex: 0 0 calc(100% / 3); /* 3列 */
  }
}
/* マウスホバー時のエフェクト */
#sidebar .widget_archive ul.years li :hover {
    background: none;
    transition: 0.1s;
    color: #72c7e6;
}
/* jQueryで .hide を toggle する場合、CSSは以下のようにシンプルでOK */
.widget_archive .hide {
  display: none;
}



/*---サイドバー目次 Sidebar Inline TOC---*/
.toc .toc-content ol li ol li {
  font-size: 90%;
}



/*---投稿日・更新日のデザイン変更---*/
    .date-tags {
        line-height: .8;
        position: relative;
    }
    .post-date, .post-update {
        padding: 10px 5px 0px 5px;
        display: inline;
        font-size: .9em; /* 少しだけ文字サイズを大きく */
    }
/*    .post-date::before { /* 投稿日のアイコンの変更 */
/*        font-family: "Font Awesome 5 Free";
        content: "\f303";
        padding-right: 3px;
		font-weight: bold;
    }
/*    .post-update::before { /* 更新日のアイコンの変更 */
/*        font-family: "Font Awesome 5 Free";
        content: "\f021";
        padding-right: 3px;
		font-weight: bold;
    }



/*---記事の見出し　デザインリセット---*/
    .article h2 {
        padding: 0;
        background: none;
    }
    .article h3 {
        border: none;
        padding: 0;
    }
    .article h4 {
        border: none;
        padding: 0;
    }
    .article h5 {
        border: none;
        padding: 0;
    }
    .article h6 {
        border: none;
        padding: 0;
    }


/*---記事の見出し　デザイン変更---*/
/*h2大見出し*/
.article h2 {
	position: relative;
	border-top: solid 2px #5c9ee7;
	border-bottom: solid 2px #5c9ee7;
	color: #555555; /*文字色*/
	background: #f1f8ff; /*背景色*/
	line-height: 1.4;
	padding: 0.4em 0.5em;
	margin: 4em 0 1em;
}
/*タブ*/
.article h2:after {
	position: absolute;
	content: 'h2';
	color: #fff; /*文字色*/
	background: #5c9ee7; /*背景色*/
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 0 1em;
	font-size: 0.7em;
}

/*h3中見出し*/
.article h3 {
	position: relative;
	color: #555555; /*文字色*/
	background: #f1f8ff; /*背景色*/
	line-height: 1.2;
	padding: 0.4em 0.5em;
	margin: 3em 0 1em;
}
/*タブ*/
.article h3:after {
	position: absolute;
	content: 'h3';
	color: #fff; /*文字色*/
	background: #5c9ee7; /*背景色*/
	left: 0px;
	bottom: 100%;
	border-radius: 5px 5px 0 0;
	padding: 0 1em;
	font-size: 0.7em;
}

    .article h4 {
		margin-top: 40px;
        border-top: 2px solid #7db4e6;
        border-bottom: 2px solid #7db4e6;
    }
    .article h5 {
        color: #444d53;
        margin-top: 40px;
        border-bottom: solid 2px #444d53;
    }
    .article h6 {
        color: #444d53;
        margin-top: 40px;
        border-bottom: solid 1px #444d53;
    }



/*---おしゃれな水平線---*/
main hr{
	margin: 2rem auto;
    border: 0;
    border-top: 0.5rem dotted #ccc;
}



/*---画像キャプションの修正 Block Image Caption---*/
.wp-block-image figcaption {
  color: #555d66;
  text-align: center;
  font-size: 13px;
}





/* ------------------------------------- */
/*       かんたんリンク カスタマイズ     */
/* ------------------------------------- */

/* --------- 外枠 --------- */
div.easyLink-box {
    border:double #CCC !important; /* ２重線 */
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}

/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
}

/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
    background: #f6a306 !important; /* Amazon 背景色 */
    border: 2px solid #f6a306 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-rakuten {
    background: #cf4944 !important; /* 楽天 背景色 */
    border: 2px solid #cf4944 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

a.easyLink-info-btn-yahoo {
    background: #FE2E64 !important; /* Yahoo 背景色 */
    border: 2px solid #FE2E64 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}

/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #FE2E64 !important; /* 文字色 */
}

/* --- 最後のボタン下の空白を削除 --- 
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
    margin-bottom: 0 !important;
}*/

/* --- PC以外の時の設定 --- */
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
    max-height: 180px !important; /* 商品画像の大きさを調整 */
}
}



/*---目次をクリック後、見出しに移動時hタグの余白調整---*/
span[id^="toc"] {
	padding-top: .5em;
}

@media screen and (min-width: 769px) {/*タブレット縦表示 769px以上*/
	span[id^="toc"] {
		padding-top: 2em;
	}
}