@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){
  /*必要ならばここにコードを書く*/
}

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}

/* 見出しリセット */
/* H2 */
.article h2{
background:none;
padding: 0;
}
 
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
 
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* 見出し6 */
.article h6{
border-bottom:none;
padding: 0;
}

.sidebar h3{
border-top:none;
border-bottom:none;
padding: 0;
background:none;
}

/* 見出しカスタマイズ */
.article h1 {
    font-size: 22px;
}

.article h2{ /*見出し２カスタマイズ*/
  background: #eae5e3; /*背景カラー*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 10px 7px 10px 10px;
  border-left: 8px solid #a0a3a0; /*左ラインの太さとカラー*/
  border-bottom: 2px solid #a0a3a0; /*アンダーラインの太さとカラー*/
  line-height: 27px; /*高さ*/
}

.article h3 {
  padding: 0.1em 0.5em;/*文字の上下 左右の余白*/
  background: #fff;/*背景色*/
  border-bottom: dashed 2px #a0a3a0;/*下線*/
  font-size: 18px;
}

.article h3:before {
	color: #a0a3a0;/*左のアイコンの色*/
	content: '●';/*左のアイコンの種類*/
	margin-right: 0.5em;
}

.article h4 {
	border: none;
	font-size: 16px;
}

.article h4:before {
	color: #a0a3a0;/*左のアイコンの色*/
	content: '▶︎';/*左のアイコンの種類*/
	margin-right: 0.5em;
}

.article h5 {
	border: none;
	font-size: 16px;
}

.article h5:before {
	color: #a0a3a0;/*左のアイコンの色*/
	content: '…';/*左のアイコンの種類*/
	margin-right: 0.5em;
}

.article h5:after {
	color: #a0a3a0;/*左のアイコンの色*/
	content: '…';/*左のアイコンの種類*/
	margin-left: 0.5em;
}

.sidebar h3 {
  border-bottom: 2px solid #a0a3a0;
  padding:0 10px;
  font-size: 16px;
}

/* ランキング順位アイコン */
.widget-entry-cards.ranking-visible .card-thumb::before {
 background-color: #eae5e3 !important;
 border-bottom-right-radius: 15px;
 color: #333;
 border-bottom: 1px solid #333;
 font-style: italic;
 left: -8px;
 top: -8px;
}

/* インデックス抜粋フォントサイズ */
.entry-card-snippet {
	font-size: 15px;
} 

/* 人気記事フォントサイズ */
.widget-entry-card {
    font-size: 15px;
}

/* カテゴリー一覧のフォントサイズ */
.archive-title {
    font-size: 20px;
}

/*検索ボックスのカスタマイズ*/
.search-box .search-edit {
	padding: 8px;
	padding-right: 68px;
	border-color: #a0a3a0;
}

/*検索ボタン*/
.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #a0a3a0;
	border-radius: 0 4px 4px 0;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}

/* 目次デザイン */
.toc{
    background:#fff; /* 目次全体の背景色 */
    border:none;
    display:block;
    border-top:2px solid;
    border-top-color:#a0a3a0;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 5px 25px;
}

/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 0 0 -10px;
    padding-left: -20px;
    font-size: 18px;
    font-weight: 700;
    color: #333; /* 目次の文字色 */
}

/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.2em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dotted 1px #ccc;
    list-style-type: none!important;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content ol li a::before{
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /* FontAwesomeのユニコード */
  color: #a0a3a0; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

/* グローバルナビ文字サイズ */
.caption-wrap {
    font-size: 14px;
}

#navi .navi-in a:hover {
  background-color: #888;
  color: #fff;
}

/* 人気記事と新着記事一覧下線 */
.popular-entry-card-link {
border-bottom: dotted 2px #ccc;
}
.new-entry-card-link {
border-bottom: dotted 2px #ccc;
}

/* モバイルスライドカラー */
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(255,255,255,0.88);
	transform: translateX(101%);
}

/*親カテゴリーのカスタマイズ*/
.widget_categories ul li a{
	font-size: 85%;
	margin: 0;
    position: relative;
    border-bottom: dotted 2px #ccc;
	padding: 0.5em;
}
.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f138"; /* FontAwesomeのユニコード */
  color: #bdbdb7; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/*子カテゴリーのカスタマイズ*/
.widget_categories ul li a{ 
    font-size: 85%;
	margin: 0;
    position: relative;
    border-bottom: dotted 2px #ccc;
	padding: 0.5em;
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /* FontAwesomeのユニコード */
  color: #bdbdb7; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}

/*メニューのカスタマイズ*/
.widget_nav_menu ul li a{ 
    font-size: 85%;
	margin: 0;
    position: relative;
    border-bottom: dotted 2px #ccc;
	padding: 0.5em;
}
.widget_nav_menu ul li a::before{
  font-family: "Font Awesome 5 Free"; /*バージョン指定*/
  content: "\f105"; /* FontAwesomeのユニコード */
  color: #bdbdb7; /* アイコンの色 */
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 900; /*アイコンの太さ*/
}
.widget_nav_menu > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}

/* 固定ページの日時を非表示 */
.page .date-tags{ /*投稿日・更新日*/
display: none;
}

/*新着記事に日付を表示*/
.new-entry-card-date {
display: block;
text-align: right
}

/*タグのカスタマイズ*/
.widget_tag_cloud .tagcloud a{
border: solid 1px #ccc; /*枠線色*/
width:48%;
}
.tag-caption .fa-tag {
    display: none;
}
.tagcloud a .tag-caption::before {
    content: "#"; /*アイコンの変更*/
    padding-right: 3px;
}

/*マーカー*/
.marker {
  background-color: #ff9;
}
.marker-red {
  background-color: #ffd0d1;
}
.marker-blue {
  background-color: #a8dafb;
}

/*下半分のマーカー色（km）*/
.marker-under {
  background: linear-gradient(transparent 60%, #dbebc4 80%);
}
.marker-under-red {
  background: linear-gradient(transparent 60%, #ffd0d1 80%);
}
.marker-under-blue {
  background: linear-gradient(transparent 60%, #a8dafb 80%);
}

/* ヘッダーに影をつける */
#header-container {
	 border-bottom: 2px solid #a0a3a0;
	 box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* コンテンツ上の余白 */
.content { 
margin-top: 5px; 
}

/*Download button*/
a.aligncenter.download-button{
	width:350px;
	font-size:15px;
	background: #f3f3f3;
	color: #333;
}

/* 拡張など */
.blank-box { /*灰色*/
  border: 1px solid #f0f0f0;
  background-color: #f0f0f0;
  padding: 0.5em 0.5em;
  margin: 2em 2%;
}

.blank-box {border-color: #f0f0f0;}
.blank-box.bb-yellow {border-color: #f5dfbe;}
.blank-box.bb-red {border-color: #d7858b;}
.blank-box.bb-blue {border-color: #7da8ab;}
.blank-box.bb-green {border-color: #93b17d;}
.blank-box.bb-tab.bb-red .bb-label {
  background-color: #d7858b;}
.blank-box.bb-tab.bb-blue .bb-label {
  background-color: #7da8ab;}
.blank-box.bb-tab.bb-green .bb-label {
  background-color: #93b17d;}
.blank-box.bb-tab.bb-yellow .bb-label {
  background-color: #f5dfbe;}
.blank-box.bb-tab .bb-label {
  background-color: #c1b5b1;}

/*付箋風*/
.blank-box.sticky {
  border-width: 0 0 0 3px;
  border-color: #c0c0c0;
  background-color: #f0f0f0;
}

/************************************
** 拡張スタイル「タブボックス」のデザインをスタイリッシュにする
************************************/

/*枠組み*/
.blank-box.bb-tab {
	position: relative; /*要素の配置*/
	padding: 2em 1em 1em; /*内側の余白*/
	border-width: 1px; /*線の太さ*/
	border-radius: 0; /*丸み*/
	background-color: #f0f0f0;
}

/*ラベル*/
.blank-box.bb-tab .bb-label {
	position: absolute; /*要素の配置*/
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	border-radius: 0; /*丸み*/
}

/* テーブルカスタマイズ */
table th {
   background: #d8d8d8;
   border: 1px solid #ccc;
}
table td {
   background: #fff;
   border: 1px solid #ccc;
}
table {
	font-size: 15px;
}

/* テーブルカスタマイズ */
a table th {
   background: #d8d8d8;
   border: 1px solid #ccc;
}
a table td {
   background: #fff;
   border: 1px solid #ccc;
}
a table {
	font-size: 15x;
}

:root {
  --cocoon-twitter-color: #000000;
  --cocoon-facebook-color: #3b5998;
  --cocoon-hatebu-color: #2c6ebd;
  --cocoon-google-plus-color: #dd4b39;
  --cocoon-pocket-color: #ef4056;
  --cocoon-line-color: #00c300;
  --cocoon-linkedin-color: #0077b5;
  --cocoon-website-color: #002561;
  --cocoon-instagram-color: #405de6;
  --cocoon-pinterest-color: #bd081c;
  --cocoon-youtube-color: #cd201f;
  --cocoon-tiktok-color: #000000;
  --cocoon-note-color: #41c9b4;
  --cocoon-soundcloud-color: #ff8800;
  --cocoon-flickr-color: #111;
  --cocoon-amazon-color: #ff9900;
  --cocoon-twitch-color: #6441a4;
  --cocoon-rakuten-color: #bf0000;
  --cocoon-rakuten-room-color: #c61e79;
  --cocoon-slack-color: #e01563;
  --cocoon-github-color: #4078c0;
  --cocoon-codepen-color: #333;
  --cocoon-feedly-color: #2bb24c;
  --cocoon-rss-color: #f26522;
  --cocoon-red-color: #e60033;
  --cocoon-pink-color: #e95295;
  --cocoon-purple-color: #884898;
  --cocoon-deep-color: #55295b;
  --cocoon-indigo-color: #1e50a2;
  --cocoon-blue-color: #0095d9;
  --cocoon-light-blue-color: #2ca9e1;
  --cocoon-cyan-color: #00a3af;
  --cocoon-teal-color: #007b43;
  --cocoon-green-color: #3eb370;
  --cocoon-light-green-color: #8bc34a;
  --cocoon-lime-color: #c3d825;
  --cocoon-yellow-color: #ffd900;
  --cocoon-amber-color: #ffc107;
  --cocoon-orange-color: #f79256;
  --cocoon-deep-orange-color: #ea5506;
  --cocoon-brown-color: #954e2a;
  --cocoon-grey-color: #949495;
  --cocoon-blue-gray-color: #607d8b;
  --cocoon-black-color: #333333;
  --cocoon-white-color: #ffffff;
  --cocoon-watery-blue-color: #f3fafe;
  --cocoon-watery-yellow-color: #fff7cc;
  --cocoon-watery-red-color: #fdf2f2;
  --cocoon-watery-green-color: #ebf8f4;
  --cocoon-custom-background-color: inherit;
  --cocoon-custom-text-color: inherit;
  --cocoon-custom-border-color: #ccc;
  --cocoon-default-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --cocoon-text-color: #333;
  --cocoon-pallid-text-color: #777;
  --cocoon-x-pallid-text-color: #999;
  --cocoon-default-text-size: 18px;
  --cocoon-text-size-s: 0.8em;
  --cocoon-basic-border-color: #ccc;
  --cocoon-three-d-border-colors: #e3e3e3 #cecece #b4b4b4 #d6d6d6;
  --cocoon-middle-thickness-color: #888;
  --cocoon-thin-color: #ddd;
  --cocoon-x-thin-color: #eee;
  --cocoon-xx-thin-color: #f5f6f7;
  --cocoon-xxx-thin-color: #fafbfc;
  --cocoon-current-background-color: #eee;
  --cocoon-select-background-color: #d8eaf2;
  --cocoon-basic-border-radius: 4px;
  --cocoon-badge-border-radius: 2px;
  --cocoon-middle-border-radius: 8px;
  --cocoon-box-padding: 1em 1.5em;
  --cocoon-list-padding: min(1%, 8px) min(2%, 16px) min(1%, 8px) min(3%, 24px);
  --cocoon-list-wide-padding: min(3%, 24px) min(5%, 40px) min(3%, 24px) min(7%, 56px);
  --cocoon-box-border-color: #47585c;
  --cocoon-sns-color: var(--cocoon-text-color);
}

/* サムネイル画像にふんわり拡大アニメーション */
.entry-card-thumb img,
.related-entry-thumb img,
.widget-entry-card-thumb img {
  transition: transform 0.4s ease;
}

.entry-card-thumb:hover img,
.related-entry-thumb:hover img,
.widget-entry-card-thumb:hover img {
  transform: scale(1.05);
}

/* サムネイル画像を角丸にする */
.entry-card-thumb img,
.related-entry-thumb img,
.widget-entry-card-thumb img {
  border-radius: 10px; /* 角の丸さを調整、数字を変えると丸くなる量も変わる */
  transition: transform 0.4s ease; /* 拡大アニメーションがある場合も自然に動く */
}