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

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

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

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

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

/*Heading*********************************************************/

.article h2, .article h3, .article h4 {
    background: white;
    border: none;
	 position:relative;
	 padding-left: 30px;
}

.article h3, .article h4{
	font-weight:600;
	padding: .2em 1em;
   margin: 1.6em 0 .8em;
}

.article h2:before, .article h3:before, .article h4:before {
    content: "";
    position: absolute;
}

.article h2:before {
	 height: 1em;
    border-radius: 50%;
    width: 1em;
    left: 0;
    top: 1.15em;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.article h3{
	 border-left: 5px solid pink;
}

.article h3:before {
    width: .3em;
    height: 100%;
    top: 0;
    left: 0;
    background: lightpink;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

@media (max-width: 480px){
	.article h2:before{top:.75em;}
}
/*share-button*/

.sns-share.ss-col-6.ss-high-and-low-lc.bc-brand-color.sbc-hide.ss-top {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.share-button a{
    color:lightpink;
}

.sns-buttons a{
    color:#545454;
}

.sns-buttons a.share-button {
    color: #545454;
    background: white;
    border-radius: 0;
    border:none;
    margin-top:10px;
}

.sns-buttons a:hover {
    transform: translateY(-4px);
    transition:all 500ms;
    color:#545454;
}

.bc-brand-color.sns-share .website-button, .bc-brand-color.sns-follow .website-button,
.bc-brand-color.sns-share .twitter-button, .bc-brand-color.sns-follow .twitter-button,
.bc-brand-color.sns-share .facebook-button, .bc-brand-color.sns-follow .facebook-button,
.bc-brand-color.sns-share .hatebu-button, .bc-brand-color.sns-follow .hatebu-button,
.bc-brand-color.sns-share .instagram-button, .bc-brand-color.sns-follow .instagram-button,
.bc-brand-color.sns-share .youtube-button, .bc-brand-color.sns-follow .youtube-button,
.bc-brand-color.sns-share .flickr-button, .bc-brand-color.sns-follow .flickr-button,
.bc-brand-color.sns-share .pinterest-button, .bc-brand-color.sns-follow .pinterest-button,
.bc-brand-color.sns-share .pocket-button, .bc-brand-color.sns-follow .pocket-button,
.bc-brand-color.sns-share .line-button, .bc-brand-color.sns-follow .line-button,
.bc-brand-color.sns-share .amazon-button, .bc-brand-color.sns-follow .amazon-button,
.bc-brand-color.sns-share .rakuten-room-button, .bc-brand-color.sns-follow .rakuten-room-button,
.bc-brand-color.sns-share .github-button, .bc-brand-color.sns-follow .github-button,
.bc-brand-color.sns-share .feedly-button, .bc-brand-color.sns-follow .feedly-button,
.bc-brand-color.sns-share .rss-button, .bc-brand-color.sns-follow .rss-button{
    background:#fff;
    border:none;
}

.bc-brand-color.sns-share .twitter-button, .bc-brand-color.sns-follow .twitter-button {
    color: #1da1f2;
}

.bc-brand-color.sns-share .facebook-button, .bc-brand-color.sns-follow .facebook-button {
    color:#3b5998;
}

.bc-brand-color.sns-share .hatebu-button, .bc-brand-color.sns-follow .hatebu-button {
    color:#2c6ebd;
}

.bc-brand-color.sns-share .instagram-button, .bc-brand-color.sns-follow .instagram-button {
    color: #405de6;
}

.bc-brand-color.sns-share .youtube-button, .bc-brand-color.sns-follow .youtube-button {
    color: #cd201f;
}

.bc-brand-color.sns-share .flickr-button, .bc-brand-color.sns-follow .flickr-button {
    color: #111;
}

.bc-brand-color.sns-share .pinterest-button, .bc-brand-color.sns-follow .pinterest-button {
    color: #bd081c;
}

.bc-brand-color.sns-share .pocket-button, .bc-brand-color.sns-follow .pocket-button {
    color:#ef4056;
}

.bc-brand-color.sns-share .line-button, .bc-brand-color.sns-follow .line-button {
    color:#00c300;
}

.bc-brand-color.sns-share .amazon-button, .bc-brand-color.sns-follow .amazon-button {
    color: #ff9900;
}

.bc-brand-color.sns-share .rakuten-room-button, .bc-brand-color.sns-follow .rakuten-room-button {
    color: #c61e79;
}

.bc-brand-color.sns-share .github-button, .bc-brand-color.sns-follow .github-button {
    color: #4078c0;
}

.bc-brand-color.sns-share .feedly-button, .bc-brand-color.sns-follow .feedly-button {
    color:#2bb24c;
}

.bc-brand-color.sns-share .rss-button, .bc-brand-color.sns-follow .rss-button {
    color:#f26522;
}

.sns-share-message, .sns-follow-message,span.related-entry-main-heading.main-caption,.comment-title{
	font-size:0;
	text-align: center;
   display: block;
	margin: 50px;
}

.sns-share.ss-high-and-low-lc a .social-icon.button-caption, .sns-share.ss-high-and-low-cl a .social-icon.button-caption, .sns-share.ss-high-and-low-lc a .button-caption.button-caption, .sns-share.ss-high-and-low-cl a .button-caption.button-caption {
    font-size: 10px;
}

.sns-share-message:before,.sns-follow-message:before,
span.related-entry-main-heading.main-caption:before,.comment-title:before{
	font-size: 16px;
   font-family: sans-serif;
   font-weight: 100;
	padding: .5em;
   border-bottom: 2px solid lightpink;
	letter-spacing: .4em;
}

.sns-share-message:before{
	content:"SHARE";
}

.sns-follow-message:before{
   content:"FOLLOW";
}

span.related-entry-main-heading.main-caption:before{
	content:"MORE";
}

.comment-title:before{
	content:"COMMENTS";
}
/*relatedPost*/

.e-card-title {
    font-weight: 400;
}

.related-entry-card-snippet.card-snippet.e-card-snippet {
    color: slategray;
}

.related-list {
    max-width: 880px;
    margin: auto;
}


/*Pagenation*/

.pagination-next-link {
    border-radius: 30px;
    font-size: .8em;
}

.pagination-next-link,
.page-numbers{
    color: #545454;
    border: none;
    background-color: white;
}

.page-numbers {
    border-radius: 50%;
    transition: all 500ms;
    box-shadow: 0 1px 1px slategrey;
}

a.page-numbers:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 5px slategrey;
}

.pagination .current {
    background-color: whitesmoke;
}
/************************************
** ブログカード
************************************/
.blogcard-snippet,
.blogcard-footer {
  display: none;
}
.blogcard-wrap {
  transition: all .3s;
  max-width: 600px;
  margin: 2em auto;
}
.blogcard {
  border:1px solid #eaeaea !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
}
.blogcard-thumbnail {
  margin: 0;
}
.blogcard-thumbnail img {
  display: block;
}
.blogcard-title {
  color: #555;
  letter-spacing: 0.5px;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0 0;
  height: 45px;
  overflow: hidden;
}
.blogcard-content {
  min-height: auto;
  margin-left: 185px;
  padding-right: 6px;
}
.blogcard-label {
  top: -11px;
  left: 9px;
  padding: 3px 0.6em;
  background:#aaa;
  padding: 1px 10px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1px;
}
.blogcard-content:after {
  content: "クリックして読む";
  background: #d3d3d3; /* 背景色 */
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  width: 180px;
  border-radius: 20px;
  font-size: 13px;
  padding: 1px 0;
  margin-top: 6px;
}
@media screen and (max-width: 834px) {
  .blogcard-content {
    margin-left: 130px;
  }
  .blogcard-title {
    font-size:12px;
    line-height: 1.5;
    height: auto;
    margin:0;
  }
  .blogcard-content:after {
    content: "タップして読む";
  }
  .blogcard-thumbnail{
    width:120px;
  }
}
@media screen and (max-width: 560px) {
  .blogcard-content:after {
    width: 120px;
    font-size: 12px;
  }
  .blogcard-title {
    margin:0;
  }
}
@media screen and (max-width: 320px) {
  .blogcard-thumbnail {
    width: 100px;
  }
  .blogcard-content {
    margin-left: 110px;
  }
  .blogcard-title {
    height: 35px;
  }
}

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

/* モバイルメニュー　ぼかしフィルター */
.navi-menu-content{
 backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
 background: rgba(255, 255, 255, 0.75);
}


/*エントリーカードカスタマイズ*/
a.entry-card-wrap.a-wrap.border-element.cf{
padding:0 0 .5em;
}
h2.entry-card-title.card-title.e-card-title{
font-size:15px;/*タイトルの文字サイズ*/
color:#595959;/*タイトルの色*/
font-weight:bold;
text-align:center;
line-height:1.5em;
margin-top:0.5em;
margin-bottom:0em;
padding: 0 0em 0;
}
.entry-card-wrap {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}


/************************************
**　　目次デザイン
************************************/

.toc-title {
  position: relative;
  padding: 10px 0;
  background: #ADD8E6;
  color: #fff;
  font-weight: bold;
 }
.toc .toc-content {
  padding: 15px 20px;
  background-color: #FFFFFF;
 }
.article .toc-list > li li {
  list-style: none;
}
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
 }
.toc-list > li li a {
  font-weight: normal;
  font-size: 98%;
  color: #606060;
  margin-left: -10px;
 }

.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #EFECE5 solid !important;
 }

/*目次サイドバー用のカスタマイズ*/
.toc.tnt-number.toc-center.tnt-number.border-element{
padding: 0px;
}


/*==================================================
共通　横並びのための設定
===================================*/

.menu-drawer{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 40px 0;
    list-style: none;
}

.menu-drawer li a{
    display: block;
   padding:10px 20px;
    text-decoration: none;
    color: #333;
}

.menu-drawer li{
    margin-bottom:10px;
}


/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.menu-drawer li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.menu-drawer li.current a,
.menu-drawer li a:hover{
  color:#0481A2;
}

.menu-drawer li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#89BDDE;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}
/*現在地とhoverの設定*/
.menu-drawer li.current a::after,
.menu-drawer li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*アイキャッチ全幅にするやつ*/
/*480px以下*/
@media screen and (max-width: 480px){
  .entry-header .eye-catch {
    margin-left: -1em;
    margin-right: -1em;
    max-width: none;
    width: auto;
  }
} 

/*==================================================
ふわっ
===================================*/

/*タイトル 上からふわ */
.entry-title{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/*サイドバータイトルカスタマイズ　タイトル消す */
.widget-sidebar-title.widget-title{
	display: none;
}

.widget-sidebar-scroll-title.widget-title{
	display: none;
}


/*フロントページ新着記事部分カスタマイズ*/

.list-new-entries-title.list-title{
	display: none;
}

/*関連記事デザインカスタマイズ*/
.rect-vertical-card .related-entry-card-wrap {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}

/*カテゴリとタグのデザインカスタマイズ*/
.cat-link {
color: #409ecc;
background-color: transparent;
font-weight: bold;
text-decoration:underline;
}

.tag-link {
color: #87ceeb;
border:none;
font-weight: bold;
text-decoration:underline;
}