@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){
  /*必要ならばここにコードを書く*/
}
/*ホバー時*/
#navi .navi-in a:hover {
background-color: #c1c78d; /*背景色*/
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: -2px -2px 1px #dce0b1; /*影の色・上下左右のずれ*/
color: #5d5855; /*文字色*/
}
/************************************
** 検索フォーム
**************************************/
.search-edit {
height:50px;
padding:0 10px; 
border-radius:25px !important;
outline:0;
background:#eee;
}
[type="submit"].search-submit {
height:50px;
width:50px;
top:0;
right:0;
background:#776B70;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
[type="submit"].search-submit:hover{
color:#ddd;
background:#776B70;
}
/************************/
/*タグクラウドのデザイン*/
/************************/
.widget_tag_cloud .tagcloud a{
background: #999900; /*背景色*/
box-shadow: 0px 0px 0px 2px #999900;
border: dashed 2px #fff; /*破線*/
color:#fff; /*文字色*/
margin-bottom:5px;
width:48%;
border-radius:5px; /*角丸め*/
flex: 0 1 auto; /*横幅いっぱいにならないように*/
}
.widget_tag_cloud .tagcloud a:hover{
background:rgba(153,153,0,0.2); /*ホバー背景色*/
color:#666600; /*ホバー文字色*/
}

/************************************
**　　枠
************************************/
.author-box .sns-follow-buttons a.follow-button {
  background-color: F7F8F0;
    color:black;
  border: 0px;
}
.author-box {
  border: 0px;
}

/************************************
** SNSシェアボタン
**************************************/
.sns-share-message{
	font-weight: bold; /*太字にする*/
	color: #776B70; /*文字色を指定*/
}
.sns-share-buttons {
	justify-content: center; /*中央揃え*/
}
.sns-share-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 20px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 5px; /*ボタンの間隔（カスタマイズを！）*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅（カスタマイズを！）*/
	height: 40px; /*ボタンの高さ（（カスタマイズを！）*/
}

/************************************
** SNSフォローボタン
**************************************/
.sns-follow-message{
	font-weight: bold; /*太字にする*/
	color: #776B70; /*文字色を指定*/
}
.sns-follow-buttons {
	justify-content: center; /*中央揃え*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*アイコンを丸くする（カスタマイズを！）*/
	font-size: 20px; /*アイコンのサイズ（カスタマイズを！）*/
	margin: 0 5px; /*ボタンの間隔（カスタマイズを！）*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅（カスタマイズを！）*/
	height: 40px; /*ボタンの高さ（（カスタマイズを！）*/
}
 /* SNSボタン名称の表示設定 */
.bc-brand-color-white.sns-share .button-caption {
  display:none;        /* SNSボタン名称を非表示 */
}

/************************************
** SNS ボタンの色をまとめて変更する
************************************/
/*ボタンカラーが「ブランドカラー（白抜き）」の場合*/
.bc-brand-color-white[class*="sns-"] a[class*="-button"] {
	border-color: #776B70;/*線の色*/
	color: #776B70; /*アイコン・キャプション等の色*/
}
/*************************************
 * カテゴリーラベルキーカラー*
 *************************************/
.cat-label {
    background-color: #776B70;
	color: #fff;
}

/*************************************
 * カテゴリーリンクキーカラー*
 *************************************/
.cat-link {
  background-color: #776B70;
}

.cat-link,
.tag-link {
    background-color: #94b579;
	color: #fff;
}

.tag-link:hover {
  background-color: rgba(143,195,31,.05);
}

/************************************
**　　グローバルナビメニュー 
************************************/

/*マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 10px;/*線の位置*/
bottom: 10px;/*線の位置*/
height: 3px;/*線の高さ*/
width: 84%;/*線の幅*/
background: #776B70;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*スマホメニューを横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#776B70; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#ffff; /* マウスホバー時の文字色 */
}
#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){
  #header-container .menu-mobile{
    display:none;
  }
  .navi-in > .menu-mobile{
    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;
  }
  #navi .navi-in > .menu-mobile li {
    height: auto;
    line-height: 1.8;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}
/*************************************
* タイトルを非表示にする場合 *
*************************************/
.entry-title {
display: none;
}

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


/**************************************
 * アピールエリア*
/*全体**************************************/
.appeal-in {
       min-height: 1000px;/*パソコンでの高さ調整*/
	min-width:100%;/*幅を最大に*/	
	background-color:rgba(250,250,250,.5);/*背景色、白を透過させる*/
	backdrop-filter: blur(3px);/*ぼかし*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.appeal-in {
	  min-height:calc(100svh - 46px)!important;/*スマホでの高さ調整*/
	}
}

/*コンテンツエリア*/
.appeal-content {
width:100%;/*幅を最大に*/
padding:2em 1em;/*内側余白調整*/
background-color:transparent;/*コンテンツエリアの背景無効化*/
}

/*タイトル*/
.appeal-title{
padding-bottom:1.5em;/*タイトル下の余白*/
font-weight:normal;/*文字の太さ*/
font-size:1.1em;/*タイトル文字の大きさ*/
}

/*本文*/
.appeal-message {
 font-size: 1em;/*本文文字の大きさ*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.appeal-message {
 font-size: .8em;/*スマホ表示する文字の大きさ*/
}	
}

/*ボタン*/
.appeal-button{
background-color:transparent!important;/*ボタンの背景色無効化*/
font-weight:normal;/*文字の太さ*/
color: #777; /*ボタン部分文字とアイコンの色*/
}

/*アイコンを追加*/
.appeal-button:before{
display:block;
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f103";/*アイコン指定*/
font-size: 2em;/*アイコンの大きさ*/
animation: move 1s infinite alternate ease-in-out;/*以下、アイコンを動かすアニメーション*/
}

@keyframes move{
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html { scroll-behavior: smooth;}

/**************************************
　*ラインマーカーの色変更*
**************************************/
.marker-under {
background: linear-gradient(transparent 60%, #e6d2c9 60%);
}
.marker-under-blue {
background: linear-gradient(transparent 60%, #80aa9f 60%);
}
.marker-under-red {
background: linear-gradient(transparent 60%, #f7d492 60%);
}

/**************************************
　*見出し（H2）デザインの変更*
**************************************/
.article h2 {
  box-shadow: 0px 0px 0px 5px #e6d2c9;
  border: dashed 2px white;
  padding: 1em;
   background:#e6d2c9;
}

/**************************************
　*見出し（H3）デザインの変更*
**************************************/
.article h3{
  border: #e6d2c9;
}
/**************************************
　*見出し（H4）デザインの変更*
**************************************/
.article h4 {
  position: relative;
  border:none;
}
.article h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #e6d2c9, #e6d2c9 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #e6d2c9, #e6d2c9b 2px, #fff 2px, #fff 4px);
}