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

/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 20px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
}
img{/*すべてのイメージに影を*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
body{
	background-color: #f5f8fc;
}

/*****************************************************************************
 * 細かい装飾（SNSシェアボタン、コメントボタン、次へボタン、画像左上タグ色）
 * **************************************************************************/

/************************************
 * 投稿左上のタグとカテゴリー色
 * ************************************/
a.cat-link, .tag-link, .comment-reply-link{
	background-color:#e9e0ff;
	/*background-color:#b8fbff;*/
}

/****************************
 * 画像左上のカテゴリー色
 * **************************/
.eye-catch .cat-label, .cat-label{
	background-color:#b8fbff;
	font-size:0.7em;
	margin:0;
}


/************************************
** 投稿記事下のSNSシェアボタン
***********************************/
.sns-share, .sns-follow {
margin: 0 0 24px ;
}
.sns-share-message:before, .sns-follow-message:before, span.related-entry-main-heading.main-caption:before, .comment-title:before {/*SHARE MORE COMMENT*/
font-weight: normal;
letter-spacing:.4em;
border-radius:20px;
border: 0;
padding: 0.1em 4em;
background-color:#a5a5a5;
color:#fff;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.2);
}
.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {
margin:2em;
}
.sns-share.ss-high-and-low-lc a .button-caption.button-caption{
display:none;
}
.sns-share-buttons {
padding-right:15%;
padding-left:15%;
}
.sns-share-buttons a {
transition:0.4s;
}
.sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 30px;
}
aside#related-entries.related-entries.rect-mini-card{
padding-top:.4em;
}
.comment-btn {
margin-top: 1em;
}

/*******************************
 * コメント欄*
 ******************************/
.comment-btn{/*コメント欄*/
background-color:#f7f7f7;
transition:0.4s;
}
.comment-btn:hover {
background-color:#cebaff;/*マウスオーバー時*/
color:#fffff4;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}

/************************************
****　次のページボタン
************************************/
.pagination-next-link{
transition:0.4s;
}
@media (max-width:1023px){
.pagination-next-link{
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media (max-width:600px){
.pagination-next-link{
width:92%;
margin-right:auto;
margin-left:auto;
}
}
.pagination-next-link:hover{
background-color:#f7f7f7;
transition:0.4s;
}
.pagination-next-link:hover{
background-color:#b098ed;
color:#fffff4;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
.pagination .current {
background-color: #b098ed;
}
.page-numbers.current{
color:#f9fff4;
box-shadow: 0 1px 2px slategrey;
}
.pagination a:hover {
background-color: #b098ed;
transition: all 0.5s;
color: #f9fff4;
}


/************************************
　　サイドバー
************************************/
.search-submit:hover::before{/* 検索エンジン */
color:#b098ed;/*検索ボタンホバー時の色*/
}
.widget_search{
padding-bottom:1em;
	border-radius:30px;	
}
:focus {
   /*background-color: #f3f0ff; /* 背景色 */
	outline-color:#ccbfff;  /*検索focus時の枠線*/
}

.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:#afafb0!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:#b098ed;
color:#fffff4!important;
}
.tagcloud a{/*tag cloud*/
background-color:#f7f7f7;
color:#afafb0!important;
}
.tagcloud a:hover{
background-color:#b098ed;
color:#fffff4!important;
transition: 0.4s ;
}
/***サイドメニューの形aside***/
#sns_follow_buttons-4, #popular_entries-3, #author_box-3, #categories-4, #tag_cloud-3, #nav_menu-2{
	border-radius: 25% 10%;
	/*background-color:#f5f8fc;  */
}

/***1023pxより小さくなるとsideバーハ表示されなくなり、
 * モバイル用footerが表示される***/
@media (max-width:1023px){
#sidebar{
	display: none;
}	
}


/**********************************
 ----- サイドバー装飾線 -----------
*********************************/
.sidebar h3 {
    background: none;
    font-size: 18px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
	color:#83dbef;
	font-weight:bold;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 29%; /*ラインの長さ*/
 /*   border-top: 3px double #a5a0ba; /*ラインの色*/  
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

/***********************************
 SNS icon サイドバー
*********************************/
.sidebar .sns-follow-buttons a {
  width: 16%; /*ボタンの幅*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  background: none !important;
  border: 1px solid #444d53;
  color: #444d53;
  border-radius: 50px;
}
.sidebar .website-button:hover {
  background-color: #b098ed !important;
  color: #fff;
  border-color: #b098ed;
}
.sidebar .instagram-button:hover {
  background-color: #c522b8 !important;
  color: #fff;
  border-color: #c522b8;
}
.sidebar .twitter-button:hover {
  background-color: #1da1f2 !important;
  color: #fff;
  border-color: #1da1f2;
}
.sidebar .youtube-button:hover {
  background-color: #ed1c31 !important;
  color: #fff;
  border-color: #ed1c31;
}
.sidebar .github-button:hover {
  background-color: #3b5998 !important;
  color: #fff;
  border-color: #3b5998;
}
.sidebar .rss-button:hover {
  background-color: #f26522 !important;
  color: #fff;
  border-color: #f26522;
}

/**************************************
 *プロフィール編集
 * ************************************/
/***名前の下線を消す***/
.author-box .author-content .author-name a{
	text-decoration: none;
}

/***プロフィールの余白をゼロに***/
.nwa .author-box{
	padding: 0px;
}

.nwa .author-box .sns-follow-buttons{
	display: none;
}
.author-description p{
	text-align: left;
	font-size: 14px;
	margin-bottom: 2em;
}



/***ブログカード関連***/
/************************************
サイドバーブログカード　人気の記事
************************************/
.sidebar a.popular-entry-card-link.a-wrap{ /*——————-miniブログカード*/
margin:0;
padding:0;
}
.sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb{/*サムネイル周り*/
margin:1em 0 1em .5em;
}
.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{/*スニペット*/
padding:1.3em .5em .9em 1.3em!important;
text-align: justify;
line-height:1.5;
}
.widget-entry-card{
	font-size:13px;	
}

/************************************
****インデックス(投稿の表示デザイン)
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{/*カード本体*/
padding:0 0 .5em;
border-radius:5px;
width:48%;
margin-bottom:2em;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{/*サムネイル大きさ*/
max-height:150px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: flex;/*位置をflexで中心に*/
justify-content: center;
align-items: center;
}
/*カテゴリラベルを右に寄せる*/
/*.e-card-thumb .cat-label{
margin-left:.8em;
}*/
@media screen and (max-width: 1100px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:120px;
}}
@media screen and (max-width: 1023px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}}
@media screen and (max-width: 900px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}
@media screen and (max-width: 750px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}
@media screen and (max-width: 600px){/*サムネイル大きさ*/
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}
a.entry-card-wrap.a-wrap.border-element.cf{/*画面幅600pxまで、1カラムにする*/
margin:.5em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}
@media screen and (max-width: 480px){/*カード本体*/
a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
border-radius:10px;
}
.e-card-thumb .cat-label{/*カテゴリラベルを右に寄せる*/
margin-left:1em;
}}
@media screen and (max-width: 1023px){/*画面幅1023未満はカード本体に影を表示*/
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media screen and (min-width: 601px) and (max-width: 834px){/*通常記事本文の周囲の空白にも影響している*/
div#content.content.cf{
margin:1em;
}}
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size:18px;
color:#7b7b7b;
font-weight:bold;
text-align:center;
line-height:1.8em;
margin-top:3em;
margin-bottom:1em;
padding: 0 1.5em 0;
}

.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:14px;
color:#7b7b7b;
text-align:center;
/*border-top:5px dotted #83dbef;*/
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:2em;
margin-bottom:4em;
max-height:20em;
	
/***ボーター右から左にグラデ***/
border-top: 2px solid;
/* 	border-image: linear-gradient(to right, #0ef0f0 00% 50%, transparent 100%);*/
	border-image: linear-gradient(to right, #0bdee6 0%, #baa6ed 100%);
 	border-image-slice: 1;

}


/***ボーダー虹***/
/*.entry-card-snippet.card-snippet.e-card-snippet:before{
    content:"";
    display:block;
    height:1px;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}
*/

/***ボーダーグラデ***スカイブルー→紫****/
/*.entry-card-snippet.card-snippet.e-card-snippet:before{
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(to right, #0bdee6 10%, #bc74db 100%);
}*/



@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{/*カードタイトル*/
font-size: 1.15em;
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{/*スニペット*/
font-size:13px;
text-align:center;
border-top:3px double #83dbef;
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
main.main, div.sidebar {/*モバイル表示などの本文全体の周りの空白にも影響している*/
padding:0;
}
}
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{/*日付・更新日*/
margin-right:1.5em!important;
color:#7b7b7b;
font-size:.86em;
}
/*カテゴリラベル全体デザイン*/
/*.eye-catch .cat-label, .cat-label{
font-size:.7em;
border-radius:10px;
margin:0.5em;
padding:0 0.5em 0;
background-color:#90C31F;
color:#fff;
}*/

/***閲覧数を非表示***/
div.admin-pv{
display:none;
}



/************************************
**(投稿→share→)関連記事のデザイン
************************************/
.related-entry-card.e-card.cf{
height:4.5em;
color:#7b7b7b;
}
.rect-mini-card .related-entry-card-title {
font-size: 13px;
padding-top:.3em;
padding-right:0.5em;
text-align: justify;
}
@media screen and (max-width: 1023px){
.rect-mini-card .related-entry-card-title {
padding-left:1em;
}}
@media screen and (max-width: 480px){
.rect-mini-card .related-entry-card-title {
line-height:1.3;
}
}
.related-entry-card .cat-label{/*MOREの中のカテゴリ表示なくす*/
display:none;
}



/************************************
**ヘッダーロゴ
************************************/
@media screen and (max-width: 834px){/*トップページモバイルボタンの真下にスペースを作る*/
.container {
margin-top:50px;
}
}
.logo-image {
padding:0;
margin-left:0;
margin-top:1em;
margin-bottom:1em;
max-height:60px;
}
.logo {
text-align: left;
}
.logo-header img {
box-shadow: none!important;
}

/************************************
**　ヘッダーメニュー
************************************/
.navi-in > ul{
justify-content:flex-start;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
border-bottom: dotted 1px white;
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
border-top:1px dotted #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;
}


/***********************************
 * footer
 * ********************************/

#footer img{/*footer画像の影を消す*/
	box-shadow: none;
}
#footer aside{
	border-radius: 10px;
}
#footer h3{
	color:#b098ed;
	font-size:18px;
	letter-spacing: 2px;
    width: 100%;
    padding: 0;
    text-align: center;
    font-weight: bold;
}
#footer .text-pc{
	font-size:15px;
	margin-top:1em;
}
.wp-block-image{
	margin-top:1em;
	text-align: center;
}
.nwa .author-box .author-description{
	text-align: center;
}

/***footer SNS　icon***/
#sns_follow_buttons-6{
	margin-top:10px;
	
}

.sidebar .sns-follow-buttons, .footer .sns-follow-buttons{
	flex-wrap: nowrap;
	margin-top:1.5em;
}

#footer .sns-follow-buttons a {
    background: none !important;
    border: 1px solid #444d53;
    color: #444d53;
    border-radius: 50px;
	width: 16%;
}

/*************************************************************
 * footerのプライバシーポリシー、免責事項の日付非表示
 * ***********************************************************/
/***Privacy&policy***/
#post-2452 .date-tags{
	display:none;
}
/***disclimer***/
#post-2462 .date-tags{
	display:none;
}
/***Contact form***/
#post-2469 .date-tags{
	display:none;
}

/***3共通 画像下の文章***/
.entry-content p{
	margin-top: 2em;
}


/**********************************
 * モバイル用footer
 * *********************************/
@media (max-width: 1023px){
.footer {
    margin-top: 0;
    padding-top: 0;
}

/***footerのradiusをなくす***/
#footer aside{
	border-radius: 0;
	background-color: #dfdaed;
	margin-bottom: 2em;
}
}	




/************************************
**　　　　アピールエリア
************************************/
.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:0px;
max-height:30px;
}
div.appeal-content{
padding:0;
}
.appeal-content{
background-color:#c9d3ed; /*背景の色変更*/
margin:auto;
max-width:100%;
}

.appeal-message{
font-size:0.9em;
color:white;
margin-bottom:0;
}

a.appeal-button {
color: #fff!important;
font-size:.85em;
font-weight:normal;
box-shadow: none;
padding:0 23em 0;
margin:0;
max-width:100%;
font-weight:bold;
}


/***アピールエリア　モバイル用***/
@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 {
color: #fff!important;
transform:none;
box-shadow: none;
}

/************************************
**ヘッダー　モバイル表示
************************************/
@media screen and (max-width: 1023px) and (min-width: 835px){/*835px以上で非表示にすると空白ができるので埋める*/
.admin-bar.mblt-header-mobile-buttons, .admin-bar.mblt-header-and-footer-mobile-buttons {
margin-top: 0;
}}
@media (min-width:835px){
ul.mobile-header-menu-buttons.mobile-menu-buttons{/*835px以上でモバイルヘッダーを非表示*/
display:none;
}
}
@media (max-width:834px){/*835px以上でヘッダーを非表示*/
.header-container {
display:none;
}
img.site-logo-image{/*モバイル表示ロゴ*/
max-height:35px;
padding:2px 0 0 5px;
box-shadow:none;
}
}

/************************************
**モバイル表示　ヘッダーメニュー・検索アイコン
************************************/
.mobile-menu-buttons{
height:50px;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
color: #b098ed!important;
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fa.fa-search::before{
margin-left:1em;
color: #b098ed!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;
}

/************************************
**モバイル表示　ヘッダーメニュー
************************************/
span.fa.fa-close::before{/*戻るボタン*/
font-family: FontAwesome;
content: “\f060”;
}
.menu-content .menu-drawer {
padding: 0 1em;
margin:0;
}
ul.menu-drawer:before{
font-size:1.2em;
display: block;
font-weight: normal;
background: white;
color:#7b7b7b;
padding: .5em;
margin-bottom:1em;
font-family: sans-serif;
text-align: center;
border-top:3px dotted #cebaff;
border-bottom:3px dotted #cebaff;
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
background-color:#fff;
padding:0;
border-radius:20px;
}
.menu-drawer a{/*menuの文字色をグレー*/
font-size:1.5em;
background-color:#ede6ff;
color:#afafb0!important;
margin: 6px 0;
padding: 4px 1em;
border-radius:20px;
}
.menu-drawer a:hover{
background-color:#cebaff!important;
color:#fffff4!important;
transition: 0.2s ;
}
.menu-drawer .sub-menu {
padding-left:30px;
margin-top:0;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none!important;
}
}


/************************************
** 本文記事タイトル
************************************/
header.article-header.entry-header {
text-align:center;
}
.article-header h1 {
position: static;
font-size: 1.4em;
color: #333333;
background-color:#fff;
line-height:1.8em;
text-shadow: none;
margin:0;
padding: 2.3em .95em 1em;
}

/***アイキャッチの画像がタイトル直下に来る***/
.eye-catch{
box-shadow: 0px 3px 7px 0 rgba(0,0,0,.2);
}
.eye-catch img{
height:auto!important;
-webkit-filter:none;
filter:none;
opacity:1;
transform: none;
width: 100%;
}



/*a.cat-link, a.tag-link{
display: inline-block;
font-size:.6em;
border-radius:10px;
border:0;
margin:0.5em;
padding:0 0.5em 0;
background:#90C31F!important;
color:#fff!important;
word-break: break-all;
position: absolute;
}*/



.post-date,.post-update{/*日付・更新日*/
margin-right:.5em!important;
color:#7b7b7b;
font-size:.8em;
}
.date-tags{
font-size:0.9em;
color:#7b7b7b;
top:0;
right:0;
}
.cat-link{
top:3.7em;
left:3em;
transition:0.4s;
}
.tag-link{
top:3.7em;
left:14.5em;
transition:0.4s;
}
.tag-link:hover {
opacity: .5;
}
@media (max-width:1023px){
.date-tags{
top:.5em;
right:1em;
}
.cat-link{
top:2.3em;
left:3em;
}
.tag-link{
top:2.3em;
left:14.5em;
}
}
@media (max-width:834px){
.date-tags{
top:.6em;
right:.5em;
}
.cat-link{
top:.3em;
left:.5em;
}
.tag-link{
top:.3em;
left:12em;
}
}
@media (max-width:420px){
.article-header h1 {
font-size: 1.2em;
}
.date-tags{
top:.7em;
right:.2em;
}
.cat-link{
top:.4em;
left:.5em;
}
.tag-link{
top:.4em;
left:12em;
}
}
@media (max-width:834px){/*画面幅834px以下のとき、本文周りの空白を非表示*/
main.main, div.sidebar {
padding:0;
}}
@media screen and (min-width: 601px) and (max-width: 834px){/*画面幅601px以上834px以下のとき、本文周りの空白を表示*/
div#content.content.cf{
margin:1em;
}
}