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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.site-name-text{
font-size: 38px;
}
/*フィルターの解除*/
.eye-catch img {
  filter: none;
  -o-filter: none;
  -ms-filter: none;
  -moz-filter: none;
  -webkit-filter: none;
 height: auto !important;
 opacity: 1;
}

/*タイトルとタグを絶対位置から相対位置にして多少の余白を設ける*/
h1.entry-title,
.date-tags {
  position: relative;
  top: 0;
  left: 0;
  padding: 0.5em;
  margin-right: 0;
}

/*親要素の高さ指定を解除*/
header.article-header.entry-header {
  height: auto;
}

/*デバイス幅834px以下でも同様にする*/
@media (max-width: 834px) {
  header.article-header.entry-header {
    height: auto;
  }
}

add_theme_support('post-thumbnails');



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

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

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

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-TD4SJDG0MN"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-TD4SJDG0MN');
</script>

【コード】
/************************************
** h2,h3,h4,h5
************************************/
.article h2, .article h3, .article h4, .article h5{
padding: 0;
margin: 0;
font-size: medium;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: none;
position:relative;
}
.article h2:before {
background-image: none;
}
.article h2{
line-height:2;
background-color:#f6f6f6;
font-size: 24px;
color:#003f8e;
border-radius:1px;
border-left:solid 14px #55e0e0;
padding:1em;
margin-top:70px;
margin-bottom:2em;
}
.article h3{
line-height:2;
font-size:20px;
border:none;
display:inline-block;
color:#003f8e;
border-radius:2px;
border-left:10px solid #55e0e0;
padding: 0.4em 0.8em;
margin-top:50px;
margin-bottom:20px;
}
.article h4{
line-height:2;
background-color:#F6F6F6;
font-size: 17px;
font-weight:normal;
color:#003f8e;
border-radius:1px;
padding:1.5em;
margin-top:20px;
margin-bottom: 20px;
/*box-shadow: 0px 2px 5px 0 rgba(0,0,0,.1);*/
}
.article h5{
background: #F7F7F7;/* 背景色 f9fff4 fffffc*/
font-size: 17px;
font-weight:normal;
line-height:2;
color:#003f8e;
border-radius: 4px;
padding: 1.5em;
margin-left:0 auto;
border:1.5px dashed;
border-color:#93b69c; /* 線の色 90131f 93b69c 47885e*/
margin-top:20px;
margin-bottom: 20px;
/*box-shadow: 0px 2px 5px 0 rgba(0,0,0,.1);*/
}
@media (max-width:480px){
.article h2{
font-size:18px;
padding:1.5em 1em 1.5em 0.5em;
}
.article h3{
font-weight:bold;
margin-top:3em;
margin-bottom:0em;
font-size:17px!important;
}
.article h4, .article h5{
font-size:15px!important;
}
}

/************************************
**　ヘッダーメニュー
************************************/
.navi-in>ul li {/*ヘッダーメニューの高さ*/
line-height: 50px;
height: 50px;
}
.navi-in a{/*ヘッダーメニューのフォントサイズ*/
font-size:15px;
}
#navi .navi-in a:hover {
transform: none!important;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
color:#003278;
border-top: dotted #64dcdc;
background:#fff;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {/*ヘッダー下の影非表示*/
box-shadow: none;
}
div.item-label{
font-weight:bold;
}



/************************************
**モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
color: #64dcdc!important;
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fa.fa-search::before{
margin-left:1em;
color: #64dcdc!important;
}
span.fa.fa-bars::before{
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/************************************
**　　　　アピールエリア
************************************/
.appeal{
padding:.1em 0 .2em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:unset;
}
div.appeal-content{
padding:0;
}
.appeal-content{
background-color:#bce2e8; /*背景色をここで変更します*/
margin:auto;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #000!important;/*文字色をここで変更します*/
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}

/* アピールエリアの画像比率に合わせ画面いっぱいに表示 */
.appeal {
  aspect-ratio: 1920 / 1080;
  background-size: contain;
}


/************************************
**　　サイドバー
************************************/
#sidebar>.widget{
border-radius:10px;
}
.widget_search{
padding:0;
}
/*TOPページのプロフィールコメントを中央寄せにする*/
/*ここから　*/
 .nwa .author-box .author-description {
     text-align: center;
}
/*TOPページのプロフィールコメントを中央寄せにする*/
/*ここまで　*/
.sidebar h3{/*サイドバーのタイトル表記と緑の点線*/
color:#003278;
border-radius: 0%;
border-bottom:3px dotted;
border-color:#bce2e8;
padding-bottom:0.3em;
margin-top:-0.5em;
margin-bottom:1em;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {/* widgetsの中身*/
background-color:#f7f7f7;
color:#003278!important;
margin: 6px 0;
padding: 4px 10px;
border-radius:20px;
transition: 0.4s
}
.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{/* widgetsの中身　hover */
background-color:#64dcdc;
color:#fffff4!important;
}
.tagcloud a{/*tag cloud*/
background-color:#f7f7f7;
color:#003278!important;
}
.tagcloud a:hover{
background-color:#64dcdc;
color:#fffff4!important;
transition: 0.4s ;
}
.nwa .recommended.rcs-card-margin a {/*おすすめカード*/
margin: 0 0 1em;
width: 90%;
}

/************************************
**　　ブログカード
************************************/
.blogcard-snippet {
  display: none;
}

.internal-blogcard:before {
	content: "";
	background: transparent;
}

.internal-blogcard::after{
	content: '記事を読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #64dcdc; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}

bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #64dcdc; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}