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

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

.a-wrap {
    color: #333;
}

/* キャッチフレーズ位置調整 */
.tagline {
  margin-top: -18px; /*ヘッダー上マージン*/
  margin-bottom: 10px; /*キャッチフレーズ下マージン*/
}
/* ヘッダーサイズカスタマイズ */
.header { 
  padding-top: 6px; /*ヘッダー上マージン*/
  padding-bottom: 0px; /*ヘッダー下マージン*/
}

/*グローバルメニューのフォントサイズ等変更*/
#navi .navi-in > .menu-header .item-label{
font-size: 18px;
}
#navi .navi-in > .menu-header .sub-menu{
	width: 300px;
	background: #666666;
}
#navi .navi-in > .menu-header .sub-menu > li a::before {
font-family:"Font Awesome 5 Free";
content : "\f061";
margin-right: 7px;
}

/*マウスオーバー時のメニューの色を変更*/
#navi .navi-in a:hover{
	color: #fffbe5!important;
	background: #f5d813;
	transition: all 0.5s ease;
}

/* エントリーカード横に並べる */
.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}
@media screen and (max-width: 768px) {
.widget-entry-cards.card-large-image .a-wrap {
width:49%;
display: inline-flex;
}
}
@media screen and (max-width: 480px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
}
.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}

/* 記事一覧のタイトル */
.top-title01 {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
	font-size: 24px;
	margin-bottom:1em;
}
.top-title01:before, .top-title01:after {
  border-top: 1px solid;
  content: "";
  width: 3em; /* 線の長さ */
}
.top-title01:before {
  margin-right: 1em; /* 文字の右隣 */
}
.top-title01:after {
  margin-left: 1em; /* 文字の左隣 */
}
.top-title02{font-size: 20px;} /* カテゴリー一覧タイトル文字サイズ */

/* もっと見るボタン1 */
.more-button {
    max-width: 160px;
    margin: 0 auto;
}
.more-button a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fffbe5;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
	background: #333;
    box-shadow: 0 5px 20px rgba(204, 204, 204, .5);
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.more-button a:hover{
	background: #f5d813;
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}
/* もっと見るボタン2 */
.more-button2 {
    max-width: 360px;
    margin: 0 auto;
}
.more-button2 a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 0.3em;
    color: #fffbe5;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
	background: #333;
    box-shadow: 0 5px 20px rgba(204, 204, 204, .5);
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.more-button2 a:hover{
	background: #d83b43;
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}

/*ダウンロードボタン*/
.wp-block-file a.wp-block-file__button:hover{
	background-color: #63c5de;
color: #ffffff;/*ボタンテキストの色*/
}

/*フロント固定ページのタイトルを非表示　*/
.home .article h1{display:none;}
/*フロント固定ページのの投稿日を非表示　*/
.home .post-date{display:none;}
/*フロント固定ページの更新日を非表示*/
.home .post-update{display: none;}
/*フロント固定ページのシェアボタンを非表示*/
/*.home.page .sns-share{display: none;}*/
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{display: none;}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{display: none;}

/* 固定ページの投稿日時非表示 */
.post-39 .date-tags {display: none;}
.post-39 .sns-share{display: none;}
.post-590 .date-tags {display: none;}
.post-590 .sns-share{display: none;}

/*スライダー余白*/
@media screen and (min-width: 768px) {
#metaslider_13{
margin-top:20px;
}
}



/*見出しデザイン変更*/
.article h2{
	  position: relative;
  padding: 5px 5px 5px 42px;
  background: #77c3df;
  font-size: 24px;
  color: white;
  margin-left: -33px;
  line-height: 1.3;
  z-index:-1;
}
	.article h2:after {
		  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index:-2
}

.article h4{
	border:none;
	padding-top: 0;
  margin-top: 0;
border-bottom: solid 3px #333;
  position: relative;
	font-size: 18px;
}

.article h4:after {
	 position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #f5d813;
  bottom: -3px;
  width: 30%;
}

.article h3{
	margin-top: 0 ;
	padding-top: 0 ;
	border:none;
	 border-bottom: double 5px #333;
		font-size: 21px;
}

.article h5{
	border: none;
	  position: relative;
  padding: 5px 5px 5px 42px;
  background: #d83b43;
  font-size: 18px;
  color: white;
  margin-left: 0px;
  line-height: 1.0;
  z-index:-1;
}

/*リストの行間*/
ul {
    line-height: 2.4; /* 行間隔を1.8倍に設定 */
}

/* 番号付きリスト（ol）の行間隔を調整 */
ol {
    line-height: 1.8; /* 行間隔を1.8倍に設定 */
}
/* リスト編集 */
/* 更新履歴等 */
.list-2{
   list-style: none;
   padding:0;
   margin:0;
}
.list-2 li { 
   border-bottom:2px dotted;
   border-color:#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0 !important;
   max-width:900px; /* 横幅 */
   padding: 0.2em 0 0 0.5em;
}
.list-2 li:last-child{ 
   border:none;
}
/* 作品カタログ作品説明 */
.list-3{
   list-style: none;
   padding:0;
   margin:0;
}
.list-3 li{ 
  border-bottom:2px dashed;
   border-color:#74d6df; /*#cdcdcd; /* 線の色 */
   position: relative;
   margin:0.5em 0.5em !important;
   max-width:800px; /* 横幅 */
   padding: 0.2em 0 0 0.2em;
}

.list-3 li:last-child{ 
   border:none;
}

.list-3 a{
		font-size: 16px;
	color: #63c5de;
	text-decoration: none;
}
.list-3 a:hover{
	color: #333;
	text-decoration: underline;
}

/* 作品カタログ作者リンク用 */
.kiji-link1 a{
	font-size: 16px;
	color: #d83b43;
	text-decoration: none;
}
.kiji-link1 a:hover{
	font-size: 16px;
	color: #333;
	text-decoration: underline;
}

/* トップページのリンク色変更 */
.top-link1 a{
	font-size: 19px;
	font-weight: bold;
	color: #333;
	text-decoration: none;
}
.top-link1 a:hover{
	font-size: 19px;
	font-weight: bold;
	color: #74d6ef;
	text-decoration: underline;
}

/************************************
****　SNSシェアボタン
************************************/
.sns-share{
margin: 0 0 24px ;
}
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
letter-spacing:.3em;
border-radius:20px;
border: 0;
padding: 0;
background-color:#3f5569;/*SHARE 背景色の変更はこちら*/
color:#fff;
display: inline-block;
width: 40%;
}
.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {
margin:20px 0 10px 0;
}
.sns-share.ss-high-and-low-lc a .button-caption.button-caption{
display:none;
}
.sns-share-buttons {
padding-right:10%;
padding-left:10%;	
}
.sns-share-buttons a {		
transition:0.5s;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 13%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 25px;
}
@media (max-width:480px){
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {
width: 55%;
}
.sns-share-buttons {
padding-right:5%;
padding-left:5%;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {/*設定したカラム数に応じて数字を変更してください(例：カラム6列→6)*/
width: 15%;
}
.sns-share.ss-high-and-low-lc a .social-icon{
font-size: 20px;
}
}

/************************************
****　目次
************************************/
/*---------------------------------
背景色はそのままで枠の色だけを変える
--------------------------------*/
.toc {
  border: dashed 2px; /*#333333; /*枠線の種類　太さ　色*/
}
.toc-title{
font-weight:bold;
	color: #333333;
}
.toc-title::after {
	font-weight: normal;
color:#333;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
	color:#333333;
}
.toc-list > li a::before {
font-family:"Font Awesome 5 Free";
content : "\f0a9";
margin-right: 7px;
	color: #d83b43
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #d83b43;/*こちらで緑点の色を変更できます*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #74d6df;
text-decoration: underline;
}

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

	#metaslider_13{
margin-top:15px;
}

}

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

#metaslider_13{
margin-top:15px;
}

}

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

#metaslider_13{
margin-top:15px;
}

}