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

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

/* リセット用 */

/*スタイルリセット用*/

main h2.wp-block-heading,
main h3.wp-block-heading,
main h4.wp-block-heading {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    font-weight: bold;
}
main h2.wp-block-heading:before,
main h3.wp-block-heading:before,
main h4.wp-block-heading:before,
main h2.wp-block-heading:after,
main h3.wp-block-heading:after,
main h4.wp-block-heading:after {
    color: initial;
    font-size: initial;
    padding: initial;
    display: initial;
    background-color: initial;
    background: initial;
    border: initial;
    border-radius: initial;
    margin: initial;
    content: initial;
    position: initial;
}

.page .date-tags {
display: none;
}

.page .author-info{
  display: none;
}

/*Cocoonのcat-label（カテゴリラベル）のカスタマイズ（全体）*/
/*ここから*/
.cat-label, .related-entry-card .cat-label {
display: none;
}
/*ここまで*/

/*ボタンのカスタマイズ*/
/*ここから*/
.button-14 a {
  font-family: 'Noto Sans JP', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #333;
  font-weight: 700;
  display: block;
  position: relative;
  box-sizing: border-box;
  max-width: 180px;
  text-align: center; 
  padding: 4px 16px 4px 0;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}

.button-14 a::before {
  content: "";
  display: block;
  position: absolute;
  width: 180px;
  height: 2px;
  background: #333;
  bottom: 0;
  transition: all 0.3s;
}

.button-14 a::after {
  content: "";
  display: block;
  position: absolute;
  width: 30px;
  height: 3px;
  background: #333;
  rotate: 40deg;
  right: -4px;
  bottom: 10px;
  transition: all 0.3s;
}

.button-14 a:hover::after,
.button-14 a:hover::before {
  translate: 20px 0;
  transition: all 0.3s;
}
/*ここまで*/

/************************************
/* TOPページ用CSS */
/************************************
 
/*ホーム画面メイン背景に対して*/
.home {
background-color:#FFFFFF;
}

/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
  display: none;
}

/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
  display: none;
}

/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
  display: none;
}


.navi-in {
	font-size: 12px;
}

/*
.navi-in a:hover {
    background-color: #f3f3f2;
} 
*/

nav#navi, .menu-header .sub-menu{
	border-top:none;
/*	border-bottom:solid 2px #eeb6b4; */
    font-weight: bold;
/*    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2); */
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
/*	padding: 0.25em 0; */
}
.menu-header .item-label{
    color: #f7bc65 !important;
}

.menu-header .item-description {
	margin-top: 4px;
}

.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #c4a2a1 !important;
/*    border-bottom: 3px solid #364f6b; */
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}

.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #a9b0cb !important;
    transition: all .2s ease;
}


.wp-block-cover, .wp-block-cover-image {
background-color: transparent;
}


.sidebar h3 {
    background: none; /*背景色を解除*/
    padding: 0; /*余白をなしに*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
}
.sidebar h3:first-letter {
    font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
}
.sidebar h3:after { /*グラデーションのラインを引く*/
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}


.front-top-page .article h1 {
  position: relative;
  padding: 0.25em 0;
}
.front-top-page .article h1:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115),  transparent);
  background: linear-gradient(to right, rgb(255, 186, 115), transparent);
}

.front-top-page h2 {
  position: relative;
  display: inline-block;
  padding: 0 45px;
}
.front-top-page h2:before, .front-top-page .article h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 44px;
  height: 2px;
  background-color: black;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.front-top-page h2:before {
  left:0;
}
.front-top-page h2:after {
  right: 0;
}


/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 32%;
}

/************************************
/* 投稿ページ用CSS */
/************************************

/*見出し*/

/*H2見出し*/
.single .article h2 {
    font-size: 20px;/*文字サイズ*/
    padding: 20px 20px 20px 50px;/*文字回りの余白（上 右 下 左）*/
    text-indent: -25px;
    display: block;
    color: #6d5353;/*文字色（グレー）*/
    background: #efece0;
    border-radius: 30px 0px 0px 30px;/*角丸サイズ（左上 右上 右下 左下）*/
}
.single .article h2:before{
    content: '●';
    color: #fff;/*左側丸い部分の色*/
    margin-right: 8px;/*左側丸い部分から右側への余白*/
}

/*H3見出し*/
.single .article h3 {
    color: #6d5353;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 15px 20px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
    border-left: 8px solid #816930;/*左線上側（太さ 実線 色）*/
}
.single .article h3:before {
    position: absolute;
    content: '';
    left: -8px;
    bottom: 0;
    width: 8px;/*左線下側の太さ（幅）*/
    height: 50%;/*左線下側の高さ*/
    background-color: #cbb276;/*左線下側の色*/
}
/*H4見出し*/
.single .article h4 {
    color: #6d5353;/*文字色*/
    font-size: 16px;/*文字サイズ*/
    padding: 8px 40px;/*文字回りの余白（上下 左右）*/
    display: block;
    position: relative;
}
.single .article h4:before {
    content: "❖";
    font-weight: 900;/*マーク部の太さ*/
    position: absolute;
    font-size: 30px;/*マーク部のサイズ*/
    left: 0;
    top: 0;
    color: #cbb276;/*マーク部の色*/
}


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

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

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