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

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

/* タイトル背景の高さ */
.logo-text{
padding:5px 0px 10px;
}

/* メニューバー背景の高さ */
.navi-in>ul li {
height: 40px;
line-height: 40px;
}


/* 改行をPCとモバイルで別々に指定 */
@media screen and (min-width: 680px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 680px){   
  .pc { display:none; }
  .sp { display:block; }
}


/* プロフィールのTwitterアイコンを丸く
===================================*/
.author-follows .sns-follow .sns-follow-buttons .twitter-button{
    border-radius: 50%;
    background-color: #55acee;
    color: #fff;
	margin-right: .5em;
    border: 0;
}
.author-follows .sns-follow .sns-follow-buttons .twitter-button:hover{
    background-color: #55acee;
}

/* 広告ラベル「スポンサーリンク」の文字サイズを変更 */
.ad-area .ad-label {
  font-size: 80% !important;
}

/*サイト名のフォント変更*/
.site-name-text{
font-family: 'Noto Sans JP', sans;
}

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}


/*ブログカードのデザインを変える*/
.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-title{
	margin-bottom: .5rem;
}

.blogcard-snipet{
	font-size: 70%;
	line-height: 1.7;
	padding-right: 10%;
}

@media screen and (max-width: 480px){
	.blogcard-thumbnail{
		width: 40%;
	}
	.blogcard-snipet{
		display: none;
	}
}

.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}

.blogcard::before{
	content: 'リンク'; /* タイトルの文言 */
	position: absolute;
	top: -.8rem;
	left: auto;
	font-size: 50%;
	background-color: #68d6cb; /* タイトルの背景色 */
	padding: .6em 1em;
	font-weight: bold;
	color: #fff;  /* タイトルの文字色 */
	border-radius: 2px;
}

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

/*YouTubeのレスポンシブ対応*/
.flex-video {
    height: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 1.5625rem;
    position: relative
}

/*ブログカード（アイキャッチ）の左上のカテゴリを非表示*/
.cat-label {
display: none;
}

/*SNSシェアボタンの文字を非表示*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタンのデザインを変更*/
.sns-share-message{
	font-weight: bold; /*太字*/
}
.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; /*ボタンの高さ*/
}


/*新着記事ショートコードに投稿日と更新日*/
.new-entry-card-date {
  display: block;
}

/*新着記事ショートコードに更新日を非表示*/
.widget-entry-card-update-date {
  display: none;
}

/*YARPPカスタマイズ用テンプレート*/
ul.related-post{
	width:100%;
	overflow:hidden;
	margin:20px 0;
	height:100%;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
 
ul.related-post li {
	float: left;
	width:44%;
	display: block;
	margin-right: 4%;
	margin-bottom: 20px;
}
 
ul.related-post li:nth-child(4n) {
	margin-right: 0;
}
 
ul.related-post li a:hover{
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}
 
ul.related-post li p.title{
	line-height: 1.8;
    font-size: 95%;
}
 
ul.related-post li p.title a{
	text-decoration: none;
}
 
ul.related-post li img{
	width: 100%;
}
 
@media (max-width: 599px) {
/* small devices */
 
ul.related-post li {
	width:48%;
}
 
ul.related-post li:nth-child(2n) {
	margin-right: 0;
}
 
}


/* 見出しカスタマイズ */

/* H1 */
.article h1{
  font-size: 18pt;
}

/* H2 */
.article h2{
	  font-size: 16pt;
background:none;
padding: 0;
  position: relative;
  padding: 1.5rem 1.5rem calc(1.5rem + 10px);
  border: 2px solid #000;
}

.article h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 2px solid #000;
}


/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
  padding: 1rem 2rem;
  border: 3px solid #000;
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
  padding: 1rem 2rem;
  border: 3px dotted #000;
}

/* H5 */
.article h5{
border-bottom:none;
padding: 0;
  border-bottom: 6px double #000;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
  border-bottom: 3px dotted #000;
}


/* サイドバーのタイトル */
h3.widget-sidebar-title{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
  border-bottom: 6px double #000;
	background-color: transparent;
}

/* サイドバースクロール追従のタイトル */
h3.widget-sidebar-scroll-title{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
  border-bottom: 6px double #000;
	background-color: transparent;
}



/*YARPPの関連記事のタイトル*/
.yarpp-related h3{
  border:none;
padding: 0;
  border-bottom: 6px double #000;
}



/* プロフィールボックス ボタンサイズ */
.author-box .sns-follow-buttons a.follow-button {
  font-size: 36px; /* 18px */
  width: 48px; /* 24px */
  height: 48px; /* 24px */
  margin-bottom: 6px; /* 4px */
  margin-right: 6px; /* 4px */
}


/* プロフィールの説明の文字サイズ */
.nwa .author-box .author-description {
font-size: 0.9em;
}

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

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

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