@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

*/



/************************************

** 子テーマ用のスタイルを書く

************************************/

/*必要ならばここにコードを書く*/



/************************************

** レスポンシブデザイン用のメディアクエリ

************************************/

/*1023px以下*/

@media screen and (max-width: 1023px){

  /*必要ならばここにコードを書く*/

}



/*834px以下*/

@media screen and (max-width: 834px){

  /*必要ならばここにコードを書く*/

}



/*480px以下*/

@media screen and (max-width: 480px){

  /*必要ならばここにコードを書く*/

}



/************************************

****　全体のバランス

************************************/

.entry-content {/*本文下の空白を削除*/

padding-bottom: 0;

margin-bottom: 0;

}

@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);

}

a {

 -webkit-tap-highlight-color:rgba(0,0,0,0);

}

.body .article {/*本文SNSフォロー下の空白*/

margin-bottom: 0;

}

/************************************

****　ヘッダーメニュー

************************************/

.navi-in > ul{/*メニューを中央に配置する場合は4～7行目を削除してください*/

justify-content:flex-start;

}

.navi-in>ul li {

line-height: 40px;

height: 40px;

}

.navi-in a{

font-size:15px;

}

#navi .navi-in a:hover {

transform: none!important;

}

.navi-in > ul .sub-menu a {

padding: 0;

}

.navi-in > ul .sub-menu{

box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);

}

.sub-menu .caption-wrap {

color:#333;/*サブメニューの文字色*/

border-top: dotted #dddddd;

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;

box-shadow: none;

}

.mobile-menu-buttons > li {

padding-top:0;

}

.menu-button{

margin: auto;

}

.mobile-menu-buttons .menu-button:hover{

background-color:white;

}

span.fas.fa-search::before{

color:#c9a624;/*検索マーク色変更はこちら*/

margin-left:1em;

}

span.fas.fa-bars::before{

color:#c9a624;/*ハンバーガーメニュー色変更はこちら*/

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.fas.fa-times::before{

font-family: "Font Awesome 5 Free";

content: "\f060";

color:#c9a624;/*矢印色変更はこちら*/

}

ul.menu-drawer:before{

font-size:1.2em;

background: white;

color:#333;

margin-bottom:1em;

border-bottom:3px dotted #c9a624; /*点線の色変更はこちら*/

content: "メニュー";

}

ul.menu-drawer:after {

background: white;

}

.menu-drawer li {

padding:0;

}

.menu-drawer li{

font-weight: bold;

}

.menu-drawer a{

font-size:1.3em;

background-color:#ffffff;

color:#545454;

margin: .5em 0;

}

.menu-drawer a:hover{

background-color:#f7f7f7;

}

.menu-drawer .sub-menu {

padding:0;

}

.menu-drawer .sub-menu li{

font-size: .9em;

}

.menu-drawer .sub-menu li a::before {

font-family: "Font Awesome 5 Free";

content : "\f105";

color:#7b7b7b;

margin:0 .5em 0 1em;

}

/************************************

****　エントリーカード

************************************/

a.entry-card-wrap.a-wrap.border-element.cf{

padding:0 0 .5em;

border-radius:10px;

width:48%;

}

a.entry-card-wrap.a-wrap{

transition: all .1s;

}

a.entry-card-wrap.a-wrap:hover {

transform: translateY(-1px);

transition: all .1s;

background-color: #fff;

}

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;

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;

}

a.entry-card-wrap.a-wrap:hover {

transform: none;

background-color: #f7f7f7;

}}

@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{

margin:0em 1em!important;

}

.ect-vertical-card .entry-card-wrap {

width: 95%!important;

}

}

@media screen and (max-width: 480px){

.e-card-thumb .cat-label{

margin-left:1em;

}}

@media screen and (max-width: 1023px){

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:#696969;

font-weight:bold;

text-align:center;

line-height:1.8em;

margin-top:3em;

margin-bottom:1em;

padding: 0 1.5em 0;

}

.entry-card-snippet{

-webkit-line-clamp: unset;

}

.entry-card-snippet.card-snippet.e-card-snippet{

font-size:14px;

color:#7b7b7b;

text-align:center;

border-top:3px dotted #c9a624;/*点線の色変更はこちら*/

line-height:1.8em;

padding-top:0.6em;

margin-left:2em;

margin-right:2em;

margin-bottom:4em;

max-height:20em;

}

@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 dotted #79c06e;/*点線の色変更はこちら*/

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:#c9a624;/*カテゴリーラベルの色変更はこちら*/

color:#fff;

}

div.admin-pv{/*閲覧数を非表示*/

display:none;

}

/************************************

****　プロフィール欄

************************************/

.nwa .author-box {

max-width:none;

padding: 0;

margin-bottom:0;

}

aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{

padding: 0!important;

border-radius: 10px;

}

@media (max-width: 1023px){

aside {

padding: 0 .5em;

}

}

.nwa .author-box .author-thumb {

width: 100%;

height:9em;

margin:0 0 5em 0;

border-radius: 10px 10px 0 0;

}

.author-box figure.author-thumb{

float: none;

text-align: center;

background: url( /*こちらに背景画像のアップロードURLを入力*/) center no-repeat;

background-size: cover;

position: relative;

z-index: 0;

}

.author-box img.avatar.photo{

background-image: none;

padding: 0!important;

box-shadow:none;

}

.author-box figure.author-thumb img{

width: 40%;

max-width:180px;

margin-top:5em;

}

@media (min-width:1023px){

.nwa .author-box .author-thumb {

height:8em;

}

.author-box figure.author-thumb img{

max-width:120px;

}}

@media (max-width:480px){

.nwa .author-box .author-thumb {

height:8em;

}

.author-box figure.author-thumb img{

max-width:130px;

}}

.author-box .author-name {

margin: 0 0 1.5em 0;

}

.author-box .author-content .author-name a{

text-decoration: none;

font-size:1.2em;

color:#545454;

}

.nwa .author-box .author-description {

margin-bottom:1.5em

}

.author-box .author-content .author-description p{

font-size:14px;

color:#7b7b7b;

line-height:1.6em!important;

margin:1em;

}

#author_box-2 p{

margin:1em 2.5em;

}

div.author-follows{

padding-bottom:2em;

}

.author-box .author-content .author-description p a{ text-decoration: none; }

.author-box .author-content .author-description p a:hover{ text-decoration: underline; }

.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

.author-box .author-content .author-follows .sns-buttons a.follow-button{

border-radius: 50%;

border: none;

width: 40px;

height: 40px;

color: #fff!important;

margin:3px;

transition: .5s;

}

div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}

div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #000000!important;}

div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}

div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}

div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}

div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}

div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}

div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq{background-color: #000000!important;}

div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}

div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}

div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}

div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}

div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}

div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}

div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq{background-color: #5C16C5!important;}

div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}

div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}

div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}

div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}

div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}

div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}

.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }

.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }

@media (max-width:1023px){

.nwa .author-box .author-thumb {

height:11em;

margin:0 0 7em 0;

}

.author-name{

font-size:16px!important;

}

.author-description{

line-height: 1.5 !important;

text-align:center;

margin:0 auto;

}

}

@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/

div.sidebar {

display: none;

}

}

/************************************

****　サイドバー

************************************/

#sidebar>.widget{

border-radius:10px;

}

.sidebar {

padding-left:0px;



}

@media screen and (max-width: 1205px){

.sidebar {

padding: 0%;

padding-right: 1.5%;

}

}

.widget_search{

padding:0;

}

span.fas.fa-search::before{

color:#c9a624;/*検索マーク色変更はこちら*/

}

.sidebar h3{

color:#7b7b7b;

border-radius: 0%;

border-bottom:3px dotted;

border-color:#c9a624;/*タイトル下のライン色変更はこちら*/

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 {

background-color:#f7f7f7;

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{

background-color:#c9a624;/*マウスオーバー時の背景色変更はこちら*/

color:#fff!important;

}

.tagcloud a{

background-color:#f7f7f7;

}

.tagcloud a:hover{

background-color:#c9a624;/*マウスオーバー時の背景色変更はこちら*/

color:#fff!important;

transition: 0.4s ;

}

.nwa .recommended.rcs-card-margin a {

margin: 0 0 1em;

width: 90%;

}

.widget-entry-cards .widget-entry-card-content{

color: #565656;

}

/************************************

****　サイドバーブログカード

************************************/

.sidebar a.popular-entry-card-link.a-wrap{

margin:0;

padding:0;

}

.sidebar figure.popular-entry-card-thumb.widget-entry-card-thumb.card-thumb{

margin:.5em 0em .5em .2em;

}

.sidebar div.popular-entry-card-content.widget-entry-card-content.card-content{

padding:.5em .5em .5em .8em;

text-align: justify;

line-height:1.3;

}

.sidebar .popular-entry-cards.widget-entry-cards.no-icon.cf {

margin-bottom: 0;

}

/************************************

****　本文記事タイトル　H1

************************************/

header.article-header.entry-header {

text-align:center;

margin-bottom: 3em;

}

.article-header h1 {

position: static;

font-size: 1.4em;

color: #333333;

background-color:#fff;

line-height:1.8em;

text-shadow: none;

margin:0;

padding: 1.5em .95em 1.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;

}

a.cat-link, a.tag-link{

font-size:.7em;

border-radius:10px;

border:0;

margin:0.5em;

padding:0 0.5em 0;

background:#c9a624!important;/*タグ色の変更はこちら*/

color:#fff!important;

}

.cat-link:hover ,.tag-link:hover {

opacity: .5;

transition: all .3s ease-in-out;

}

.entry-categories-tags {

margin-bottom: 0.4em;

}

.date-tags{

font-size:1.2em;

color:#7b7b7b;

top:5px;

right:0;

left: 0;

display: -webkit-flex;

display: flex;

-webkit-justify-content: center;

justify-content: center;

}

div.date-tags span.post-update{

order: 1;

}

span.fas.fa-history::before{

content:"\f2f1"

}

div.date-tags span.post-update,div.date-tags span.post-date{

margin-right: 10px;

}

@media (max-width:1023px){

.entry-categories-tags.ctdt-one-row {

padding: 0;

}

}

@media (max-width:420px){

.article-header h1 {

font-size: 1.2em;

}

.date-tags{

top:3px;

}

}

@media (max-width:834px){

main.main, div.sidebar {

padding:0;

}}

@media screen and (min-width: 601px) and (max-width: 834px){

div#content.content.cf{

margin:1em;

}}

@media screen and (max-width: 600px){

.content {

margin-top: 0px;

}}

/************************************

****　本文記事見出し H2 H3 H4 H5

************************************/

.article h2:before {

background-image: none;

}

.article h2{

line-height:2;

background-color:#f6f6f6;

font-size: 24px;

color:#333333;

border-radius:1px;

border-left:solid 14px #636b64;/*H2の色の変更はこちら*/

padding:1em;

margin-top:70px;

margin-bottom:2em;

}

.article h3{

line-height:2;

font-size:20px;

border:none;

color:#333333;

border-radius:2px;

border-left:10px solid #8b968d;/*H3の色の変更はこちら*/

padding: 0.4em 0.8em;

margin-top:90px;

}

.article h3:before {

width: 0em;

}

.article h4{

line-height:2;

background-color:#F6F6F6;/*H4背景色の変更はこちら*/

font-size: 17px;

font-weight:normal;

color:#333333;

border-radius:1px;

padding:1.5em;

margin-top:1.5em;

margin-bottom:1.5em;

}

.article h5{

background: #F7F7F7;/*H5背景色の変更はこちら*/

font-size: 17px;

font-weight:normal;

line-height:2;

color:#333333;

border-bottom: none;

border-radius: 4px;

padding: 1.5em;

margin-left:0 auto;

border:1.5px dashed;

border-color:#93b69c;/*H5枠色の変更はこちら*/

margin-top:1.5em;

margin-bottom:1.5em;

}

@media (max-width:480px){

.article h2{

font-size:18px;

padding:1.5em 1em 1.5em 0.5em;

}

.article h3{

font-weight:bold;

font-size:17px!important;

}

.article h4, .article h5{

font-size:15px!important;

}

}

/************************************

****　本文記事装飾 囲み 背景

************************************/

.haikei{/*背景のカスタマイズ*/

line-height:2;

background-color:#F6F6F6;/*背景色*/

border-radius:1px;

padding:1.5em;

margin-top:1.5em; 

margin-bottom: 1.5em;

}

.kakomi{/*囲み枠のカスタマイズ*/

background: #F7F7F7;/*背景色*/

line-height:2;

border-radius: 4px;

padding: 1.5em;

border:1.5px dashed;

border-color:#93b69c;/*枠の色*/

margin-top:1.5em; 

margin-bottom: 1.5em;

}

/************************************

****　リスト

************************************/

.article ul:not(li ul,.toc-list,dd ul,.widget ul){

background: #F7F7F7;/*背景色*/

line-height:2;

border-radius: 4px;

border:1.5px dashed;

border-color:#93b69c; /*枠の色*/

padding: 1.5em;

padding-left:3em;

}

.article ul li:not(.toc-list li,.toc-list ul li,.faq li){

margin: 0em;

}

@media (max-width:600px){

.article ul:not(li ul,.toc-list,dd ul,.widget ul){

padding-left:2.5em;

}

}

.article li ul{

padding-left:1em;

}

/************************************

****　記述リスト

************************************/

.article dl:not(.faq){

background: #F7F7F7;/*背景色*/

line-height:2;

border-radius: 4px;

border:1.5px dashed;

border-color:#93b69c; /*枠の色*/

padding: 1.5em;

margin: 3em 0;

}

.article dt:not(.faq-question)::before{

content: '✔ ';

font-size: 20px;

color: #90c31f;/*✔の色*/

}

.article dd {

margin-left:5px;

}

.article dd ul,.article dd ol{

padding-left: 1.2em;

margin-bottom: 0;

}

.article dl p{

margin-bottom: 0;

}

@media (max-width:600px){

.article dd ul,.article dd ol{

padding-left: .9em;

}

}

/************************************

****　目次

************************************/

.toc-title{

font-weight:bold;

}

.toc-title::after {

color:#337ab7;

}

.toc-list > li a {

font-weight: bold;

display:block;

margin-top:10px;

margin-left: 10px;

}

.toc-list > li a::before {

font-family: "Font Awesome 5 Free";

content : "\f144";

margin-right: 7px;

}

.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: #c9a624;/*こちらで緑点の色を変更できます*/

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: #333333;

text-decoration: underline;

}

/************************************

****　本文下　関連記事

************************************/

.e-card-title {

font-weight: bold;

color:#337AB7;

}

.related-entry-card-content {

margin-left: 190px;

margin-right: 5px;

}

a.related-entry-card-wrap.a-wrap.border-element.cf:hover{

background-color: #fafafa;

transform: none;

transition: all 200ms;

}

.related-entry-card .cat-label{

display:none;

}

@media screen and (max-width: 480px){

.related-entry-card-thumb {

margin-right: 1em;

}

.e-card-title {

font-size: 15px;

line-height: 1.8;

}

article.related-entry-card.e-card.cf {

margin-left: .5em;

margin-right: .3em;

}

}

aside#related-entries.related-entries.rect-entry-card{

margin-bottom: 0;

}

.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;/*MORE 背景色の変更はこちら*/

color:#fff;

display: inline-block;

width: 40%;

}