@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.1.0
*/

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

/************************************
ブログ全体のバランス調整
元ネタ：https://yujiblog.org/cocoon-customization
************************************/
.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;
	}
}


/************************************
** h2,h3,h4,h5
https://yujiblog.org/cocoon-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; 
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;
padding: 0.4em 0.8em;
margin-top:90px;
}
.article h4{
line-height:2;
background-color:#F6F6F6;
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;
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;
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;
}
}


/************************************
** 白抜きボックスの枠を点線にする
・https://yuzuyu3.com/cocoon-box-customize/
・https://yujiblog.org/cocoon-list
************************************/
.blank-box {
    background: #F7F7F7;
    line-height:2;
    color:#333333;
    border-radius: 4px;
    border:1.5px dashed;
    border-color:#93b69c; 
    padding: 1.5em;
    padding-left:3em;
    margin: 1.5em 0;
}

/*——————-
案内ボックス（うすい灰色）の灰色をイイ感じに薄くする
https://wp-cocoon.com/community/customs/%E6%A1%88%E5%86%85%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%81%AE%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AF%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%81%8B/
———————-*/
.secondary-box {
	background-color: #f4f4f5;
}

/*——————-
おすすめカード
https://yujiblog.org/wordpress-osusume-card
———————-*/
div#recommended-in.recommended-in.wrap.cf{
margin-top: 20px;
max-height:220px;
}
@media screen and (min-width: 1024px){
div#recommended-in.recommended-in.wrap.cf{
padding:0 2em;
}}
div#content.content.cf{
margin-top:0;
}
.widget-entry-cards .a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
}
figure.navi-entry-card-thumb.widget-entry-card-thumb.card-thumb{
opacity:.8;
}
.recommended.rcs-center-white-title .a-wrap:hover .card-content {
transition: all .1s;
opacity: 1;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0);
}
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
border-radius:10px!important;
margin:1em .5em;
background-color:#FFFFFF;/*Cocoon設定「全体」の「サイト背景色」に合わせてください*/
}
div.navi-entry-card-title.widget-entry-card-title.card-title{
color:#333333;
font-weight:bold;
font-size:.8em;
background-color: rgba(255, 255, 255, 0.8);
padding: .6em .5em;
border-radius:30px;
}
@media (max-width:834px){
a.navi-entry-card-link.widget-entry-card-link.a-wrap{
margin:.3em 0em;
}
div.navi-entry-card.widget-entry-card.e-card.cf{
border-radius:10px!important;
overflow:hidden;
max-height:100px;
margin:0 .3em 0;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1)!important;
}
.widget-entry-cards.large-thumb-on .a-wrap:hover {
box-shadow:none;
}
}
@media (max-width:834px){
div.navi-entry-card-title.widget-entry-card-title.card-title{
font-size:.6em;
padding: .5em;
}
div#recommended-in.recommended-in.wrap.cf{
margin: .7em .2em .3em;
}
.widget-entry-cards.large-thumb-on .card-content{
background: rgba(151, 151, 151, 0.2);
}
}
main#main.main{
margin:0;
}

/************************************
****　インデックス
https://yujiblog.org/cocoon-index-card
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{
padding:0 0 .5em;
border-radius:10px;
width:48%;
margin-bottom:2em;
}
a.entry-card-wrap.a-wrap:hover {
transform: translateY(-1px);
transition: all .3s;
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;
}}
@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:.5em 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:#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:3px dotted #90C31F;
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:#90C31F;
color:#fff;
}

/************************************
** ブログカード（本文挿入）
https://yujiblog.org/cocoon-blogcard
***********************************/
.blogcard {
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #fafafa;
box-shadow:none;
transform: none;
}
.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
.internal-blogcard::after{
content: "続きを読む "; 
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: #8b968d;
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}



    /************************************
    ** メールアドレスが公開されることはありません。の非表示化
    ************************************/
    .comment-notes{
	  display:none;
    }

    /************************************
    ** プロフィール-サイドバー
    ************************************/
    .sidebar .widget_author_box {
      background: #fff;
      padding-top: 1.2em;
      border-radius: 3px 3px 0 0;
      max-width: 360px;
      margin: 0 auto;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    }
    .sidebar .author-box {
      padding: 120px 0 0;
      border: none;
      position: relative;
      margin: 0 0 3em;
      max-width: 100%;
      overflow:hidden;
    }
    .sidebar .author-content {
      background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
	  border-radius: 200px 200px 0px 0px / 100px 100px 0px 0px;
      color: #000; /*自己紹介文の文字色*/
      padding: 20px;
      width:110%;
      margin-left:-5% !important;
    }
    .sidebar .author-box .author-name a {
      color: #000; /*名前の文字色*/
      text-decoration: none;
      letter-spacing: 1px;
      font-size: 18px;
    }
    .sidebar .author-box .author-description {
      padding: 45px 25px 0px;
      text-align: justify;
      text-justify: inter-ideograph;
    }
    .sidebar .author-box p {
      line-height: 1.8;
      font-size: 14px;
    }
    .sidebar .author-box .author-thumb {
      width: 120px;
      margin: 0 auto;
      position: absolute;
      top: 50px;
      right: 0;
      left: 0;
      bottom: 0;
    }
    .sidebar .author-box .author-name {
      font-size: 1.1em;
      font-weight: bold;
      position: absolute;
      margin-bottom: 0.4em;
      top: 23px;
      bottom: 0;
      right: 0;
      left: 0;
    }
    .sidebar .author-box .author-widget-name {
      position: absolute;
      top: 3px;
      bottom: 0;
      right: 0;
      left: 0;
      font-size: 0.7em;
      color: #bbb;
    }
    .sidebar .author-box .sns-follow {
      padding: 15px 10px;
    }
    .sidebar .author-box .sns-follow-buttons {
      display: flex;
      justify-content: space-evenly;
    }
    .sidebar .author-box .sns-follow-buttons a {
      border-radius: 50%;
      border: none;
      width: 45px;
      height: 45px;
      line-height: 45px;
      font-size: 30px;
      box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
      background:#fff;
    }
    .sidebar .author-box .sns-follow-buttons a:hover {
      box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
      opacity: 1;
    }
    .sidebar .author-box .sns-follow-buttons .follow-button span:before {
      color: #46CDFF; /*SNSボタンの文字色*/
    }
    .sidebar .icon-instagram-new:before {
      content: "\ea92";
      font-size: 24px;
    }
    .sidebar .author-box .to-profile {
      position: absolute;
      background: #fff;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      text-decoration: none;
      color: #46CDFF; /*Moreボタンの文字色*/
      box-shadow: 0 0 10px rgba(66, 172, 231, .5), 0 0 5px -5px rgba(66, 172, 231);
      top: 105px;
      right: 45px;
      font-size: 0.9em;
      font-weight: bold;
    }
    .sidebar .author-box .to-profile:hover {
      box-shadow: 0 10px 20px -2px rgba(0, 0, 0, .2);
    }
    .sidebar .author-box .sns-follow-message {
      margin-bottom: 10px;
      font-size: 13px;
    }
    .sidebar .author-box .sns-follow-message:before {
      content: "＼";
      margin-right: 5px;
    }
    .sidebar .author-box .sns-follow-message:after {
      content: "／";
      margin-left: 5px;
    }
    .sidebar .icon-twitter-logo:before {
      position: absolute;
      top: 8px;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .sidebar .icon-facebook-logo:before {
      position: absolute;
      top: 6px;
      bottom: 0;
      right: 8px;
      left: 0;
    }
    .sidebar .icon-hatebu-logo:before {
      position: absolute;
      top: 8px;
      bottom: 0;
      right: 0;
      left: 0;
    }
    .sidebar .icon-feedly-logo:before {
      position: absolute;
      top: 8px;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .sidebar .icon-rss-logo:before {
      position: absolute;
      top: 8px;
      right: 0;
      bottom: 0;
      left: 0;
    }

    /************************************
    ** ヘッダーメニュー横スクロール設定
    ************************************/

    #header-container .navi-in > ul li {
       height: auto;
       font-weight: 600;
       line-height:1.3;
    }


    #header-container #navi{
       background:#e6e6e9 ; /* 背景色 */
    }

    #header-container #navi a{
       color:#000; /* 文字色 */
       padding:0.8em 1em;
    }
    #header-container #navi a:hover{
       color:#00f; /* マウスホバー時の文字色 */
    }

/* サブメニューと背景色設定 */
/*    #header-container .navi-in > ul .sub-menu{*/
/*       background:#f2f7f3; */
/*    }*/
    
    #header-container .navi-in > ul > .menu-item-has-children > a::after {
       top: 0.8em;
       font-size: 1.2em;
       font-weight: 600;
    }
    #header-container .sub-menu .caption-wrap{
       padding-left:1em;
    }
    .navi-in > ul .menu-item-has-description > a > .caption-wrap{
       height:auto;
    }
    @media screen and (max-width: 1030px){
       .navi-in > .menu-header{
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      overflow-x: scroll;
      white-space: nowrap;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
       }
       #header-container #navi a{
      font-size:0.8em;
      padding: 1em 1.2em; /* 余白 */
       }
       #header-container .navi-in > ul > .menu-item-has-children > a::after{
      display:none;
       }
    }

    /************************************
    ** 新しい機能は以下に追加
    ************************************/

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

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

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

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

/************************************
/* 目次全体デザイン */
/************************************
.toc{
    background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color:#007b43; /* #FFC679 */
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 20px 20px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:left;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 20px;
    font-weight: 700;
    color: #007b43; /* 目次の文字色を変える場合はここを変更 */
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -35px;
    width: 30px;
    height: 30px;
    font-family: FontAwesome;
    content : "\f0ca"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#66b2ff; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 30%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:6px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.3em 0 0.3em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #66b2ff; /* 色を変える場合はここを変更 */
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}


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