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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
:root{
  --color-cyan: #B3D4F5;
  --color-dark-blue: #17517E;
  --color-gentle-blue: #9EC9D1;
  --color-beige: #F7E3DA;
  --color-orange-red: #F58F86;
  --site-bk: #e8e8e8;
}
a{
  transition: all .4s;
}
a:hover{
  color: var(--color-dark-blue);
  text-decoration-style: dotted;
}

.article p{
	margin: 0;
}

.post-date{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.date-tags .post-date>span[class^="fa"]{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.hcb_wrap>.prism.line-numbers{
	padding-top: .4em;
	padding-bottom: .4em;
}
.is-code-row-number-enable pre.hljs::before{
	min-width: unset;
	font-size: 14px;
	line-height: 1.6;
}


.sidebar h2::before,
.sidebar h3::before{
	background-color: #fff;
}

/* ---------------------------------
**　　　　ページ
------------------------------------ */
.header{
	background-position: bottom center;
	background-size: cover;
}

.main,
.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-befores{
  background-color: transparent;
}
.entry-date{
  color: #666;
}
.date-tags .post-date>span[class^="fa"], .date-tags .post-update>span[class^="fa"]{
  width: 25px;
  height: 25px;
  font-size: 1.1em;
  line-height: 1.8;
}

.entry-content h2,
.entry-content h3{
  background-color: #fbfbfb;
}
.entry-content h2{
  border-left-color: var(--color-dark-blue);
}
.entry-content h3:before{
  background: var(--color-dark-blue);
}
.entry-content h4:before,
.entry-content h4:after{
  border-bottom-color: var(--color-dark-blue);
}
.article h5{
  border-bottom-color: var(--color-cyan);
}
.article h6{
  border-bottom-color: var(--color-gentle-blue);
}

.entry-content h2,
.sns-share-message,
.sns-follow-message{
  color: #444;
}
.sns-follow{
  max-width: 200px;
}


/* ---------------------------------
**　　　　関連記事
------------------------------------ */
.entry-card-meta, .related-entry-card-meta{
  color: #6c6c6c;
}


/* ---------------------------------
**　　　　前後ページ
------------------------------------ */
.pager-post-navi a .iconfont{
  color: #6c6c6c;
}



/* ---------------------------------
**　　　　カルーセル
------------------------------------ */
.carousel-in{
  background-color: rgba(0,0,0,0);
}
.slick-initialized .slick-slide{
  background-color: #fff;
}

/* ---------------------------------
**　　　　ウィジェット
------------------------------------ */
.sidebar:not(#slide-in-sidebar) .widget-sidebar{
  background-color: transparent;
  box-shadow: none;
}
.widget-sidebar>div{
  padding-left: 0;
  padding-right: 0;
}
.sidebar h2, .sidebar h3{
  color: #fff;
  background-color: var(--color-cyan);
}
.sidebar .nb-sidebar-custom ul li{
  padding-left: .5em;
  padding-right: .5em;
  transition: all 0.3s ease-in-out;
}
.slider .nb-sidebar-custom ul li:hover{
  background-color: #f5f8fa;
}

/* ---------------------------------
**　　　　アピールエリア
------------------------------------ */
.appeal{
  padding:0 0 .1em;
  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;
}
.appeal-content{
  background-color: var(--color-cyan);
  margin:auto;
  padding:0;
  max-width:100%;
  opacity:1;
  line-height:1.6;
}
.appeal .appeal-button {
  color: #fff;
  font-size:.85em;
  padding:0 23em 0;
  margin:0;
  max-width:100%;
  white-space: nowrap;
  box-shadow: none;
  transition: all .4s;
}
.appeal .appeal-button:hover {
  transform:none;
  box-shadow: none;
}


/* ---------------------------------
**　　　　お問い合わせ
------------------------------------ */
.cf7-wrap br{
	display: none;
}
.cf7-label{
	display: block;
	margin-bottom: 20px;
}
.cf7-wrap input[type="submit"]{
	background-color: var(--color-cyan);
	color: #000;
	font-size: 1.1rem;
	transition: .3s all;
}
.cf7-wrap input[type="submit"]:hover{
	background-color: var(--color-orange-red);
	color: #fff;
}
.grecaptcha-badge {
	visibility: hidden;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下834px以上*/
@media screen and (max-width: 1023px) and (min-width: 835px){
  /*必要ならばここにコードを書く*/
  a.appeal-button {
    padding:0 18em 0 ;
  }
}

/*834px以下651px以上*/
@media screen and (max-width: 834px) and (min-width: 651px){
  /*必要ならばここにコードを書く*/
  a.appeal-button{
    padding: 0 13em 0;
  }
  .appeal{
    padding: .1em 0 .25em;
  }
}

/*834px以下501px以上*/
@media screen and (max-width: 652px) and (min-width: 501px){
  a.appeal-button {
  padding:0 8em 0 ;
  }
}

/*834px以下481px以上*/
@media screen and (max-width: 500px) and (min-width: 481px){
  a.appeal-button {
    padding:0 6em 0 ;
  }
}

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

/*420px以下*/
@media screen and (max-width: 420px){
  a.appeal-button {
    padding:0 3em 0 ;
  }
}