@charset "UTF-8";

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



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

/************************************
** /*吹き出しの色の初期設定
************************************/
.sb-id-1 .speech-balloon {
background-color: #F5C58A; /* 吹き出しメイン部分の背景色 */
border: 2px solid #F5C58A; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id-1 .speech-balloon::before {
border-right: 12px solid #F5C58A; /* 三角部分の枠色 */
}
.sb-id-1 .speech-balloon::after {
border-right: 12px solid #F5C58A; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id-1 .speech-balloon::before { border-right: 7px solid #F5C58A; /* スマホでの三角部分の枠色 */
}
.sb-id-1 .speech-balloon::after { border-right: 7px solid #F5C58A; /* スマホでの三角部分の背景色 */
}
}

/************************************
** SNS埋め込み系の真ん中寄せ
************************************/
.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet {
    margin: 30px auto;
} 



/************************************
** H3デザイン
************************************/
h3 {
  background: linear-gradient(transparent 90%, #ce6000 90%);
}

.article h3 {
	border-left: none;
	border-right: none;
    border-top: none;
    border-bottom: none;
}

/************************************
** ブログカード
************************************/
.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 10px 15px rgba(0, 0, 0, .15);
  padding: 10px;
}
.blogcard-wrap:hover {
  background: none;
  transform: translateY(-3px);
  box-shadow: 0px 15px 25px 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: #ce6000; /* 背景色 */
  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: 35px;
    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;
  }
}

/************************************
** タグクラウド　枠線丸く
************************************/
.widget_tag_cloud .tagcloud a {
  border: 0.5px #5f5f5f solid;
  border-radius :20px;
}
/************************************
** タグクラウド　タグアイコン削除＋＃追加
************************************/
.tag-caption .fa-tag {
    display: none;
}
.tagcloud a .tag-caption::before {
    content: "#"; /*アイコンの変更*/
    padding-right: 3px;
}

.tag-caption::before {
    content: "#"; /*アイコンの変更*/
    padding-right: 3px;
}



/************************************
** ページネーション丸くデザイン変更
************************************/
.page-numbers {
 border-radius: 50%;
}

/************************************
** ページネーション　次へ　を削除
************************************/
.pagination-next {
 display: none;
}
/************************************
** タグ丸く・デザイン変更
************************************/
.tag-link {
 background-color: #f6f6f6;
 color: #222;
 border-radius: 20px;
 padding: 8px 15px;
}

.tag-link::before{
 display:none;
}

/************************************
** プロフィール枠線
************************************/
.author-box border-element no-icon cf{
border:2px solid #bc0019; /*色・線種・太さ*/
border-radius:10px; /*角を丸める*/
}


/************************************
** Googleリキャプチャの画像非表示
************************************/
.grecaptcha-badge { visibility: hidden; }


.article{
width:94%;
margin: 0 auto;
}

/************************************
** 画像キャプション(figure)
************************************/
.figure-caption-icon-wrap{
  margin:0 auto 2em;
  display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.figure-caption-icon-wrap > figure{
  position:relative;
}
.figure-caption-icon-wrap > figure > img,.figure-caption-icon-wrap > figure >amp-img{
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  display:block;
}
.figure-caption-icon-wrap > figure > amp-img{
  max-width:800px;
}
.figure-caption-icon-wrap figure figcaption{
  display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    align-items: flex-start;
    position: absolute;
    font-size: 13px;/* 文字の大きさ */
    line-height: 1.5;/* 行間 */
  color:#777;/* 文字色 */
}
.figure-caption-icon-wrap .caption-icon-img{
   position: absolute;
}
.figure-caption-icon-wrap .img-caption-text{
  position:relative;
}


/************************************
** 画像キャプション figure　アイコン④(右上)
************************************/
/* 全体 */
.figure-caption-icon-4{
    margin-top:5em;/* 上に余白 */
}
 /* アイコン+テキスト*/
.figure-caption-icon-4 > figure figcaption{
    right: 0;/* 右から数値分移動 */
    bottom: calc(100% - 8px);/* 下から数値分移動 */
    min-height: 30px;
    padding: 0px 85px 25px 0px;/* 余白(ここで文字の位置調整(上　右　下 左)) */
    text-align:right;
}
 /* アイコン*/
.figure-caption-icon-4 > figure figcaption::before{
    position: absolute;
    content: "";
    bottom:0; /* 下から数値分移動 */
    right: 0; /* 右から数値分移動 */
    display: block;
    width: 75px; /* 横幅*/
    height: 40px; /* 高さ*/
    background-image: url(https://umaimono-blog.com/wp-content/uploads/2019/10/19501.png); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
}
 /* 吹き出し*/
.figure-caption-icon-4 .img-caption-text::before, .figure-caption-icon-4 .img-caption-text::after {
    border-bottom: 1px solid #777;
    content: "";
    width: 1em;
    position: absolute;
    top: -8px;
    right: 0;
    transform: rotate(45deg);
}
/* 吹き出し*/
.figure-caption-icon-4 .img-caption-text::after {
    top: auto;
    bottom: -8px;
    transform: rotate(-45deg);
}

/************************************
** 画像キャプション figure　アイコン①(右上)
************************************/
/* 全体 */
.figure-caption-icon-1{
    margin-top:5em;/* 上に余白 */
}
 /* アイコン+テキスト*/
.figure-caption-icon-1 > figure figcaption{
    right: 0;/* 右から数値分移動 */
    bottom: calc(100% - 8px);/* 下から数値分移動 */
    min-height: 30px;
    padding: 0px 85px 25px 0px;/* 余白(ここで文字の位置調整(上　右　下 左)) */
    text-align:right;
}
 /* アイコン*/
.figure-caption-icon-1 > figure figcaption::before{
    position: absolute;
    content: "";
    bottom:0; /* 下から数値分移動 */
    right: 0; /* 右から数値分移動 */
    display: block;
      width: 110px; /* 横幅*/     height: 85px; /* 高さ*/
    background-image: url(https://umaimono-blog.com/wp-content/uploads/2019/12/をぺ-美味しいもの食べてるとき.png); /* アイコン画像(メディア→リンクをコピー)*/
    background-size: contain;
    background-repeat: no-repeat;
}
 /* 吹き出し*/
.figure-caption-icon-1 .img-caption-text::before, .figure-caption-icon-1 .img-caption-text::after {
    border-bottom: 1px solid #777;
    content: "";
    width: 1em;
    position: absolute;
    top: -8px;
    right: 25px;
    transform: rotate(45deg);
}
/* 吹き出し*/
.figure-caption-icon-1 .img-caption-text::after {
    top: auto;
    bottom: -8px;
    transform: rotate(-45deg);
	
}

/*グローバルナビ*/
nav#navi, .menu-header .sub-menu{
 box-shadow:0 2px 5px -6px rgba(0,0,0,.8);
}
.menu-header .sub-menu .item-label{
  font-size: 70%;
  color: #696969;
}
.menu-header .menu-item:hover {
  border-bottom: 1px solid #ffffff;
  transition: all .1s ease;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .item-label:hover{
  color: #ffffff !important;
  transition: all .2s ease;
  border-bottom: none;	
}

@media screen and (max-width: 768px){
/*モバイル用*/
ul.menu-mobile{
  overflow-x: auto;
  overflow-y: hidden;
  display: flex !important;
  font-size: 9pt;
  flex-wrap: nowrap;
  justify-content: flex-start;
-webkit-overflow-scrolling: touch;
  padding: 0 1em;
  position: relative;
}
ul.menu-mobile > li{
  padding-right: 1em;
  white-space: nowrap;
}
ul.menu-mobile　.item-label{
  white-space: nowrap;
  font-size: 1px;
}
}




.author-box .author-name {
  font-size: 1em;
  font-weight: normal;
  margin-bottom: 0;
}
.author-name a {
  text-decoration: none;
  color: #333;
}
.author-widget-name {
  font-size: 0.8em;
  color: #bbb;
}
.author-box p {
  margin-top: 2em;
  line-height: 1.5;
  font-size: 0.9em;
}
.author-box {
  border: 1px solid #eee;
  border-radius: 4px;
  margin: 1em 0;
  line-height: 1.4;
  position: relative;
  padding: 1.4% 2% 1.8%;
}
.author-follows {
  background: #b9b9b9;
  margin: 0 -20px -20px -20px; 
  padding: 20px 0;
}
.author-box .sns-follow-message {
  display: block;
  color: #fff; 
}
.author-box .sns-follow-buttons a.follow-button {
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-bottom: 4px;
  margin-right: 4px;
  background: none;
  color: #fff;
  border: 1px solid #fff;
  transition: .5s;
}
.author-box .sns-follow-buttons a.follow-button:hover {
  background: #000;
  opacity: 1;
}
.author-box a.follow-button span {
  line-height: 32px;
}
main .author-box p {
  margin-top: 1em;
}
main .author-box {
  border: none;
  border-top: 1px solid #000;
  border-radius: 0;
  padding-top: 30px;
}
main .author-box::after {
  content: "ABOUT ME";
  font-size: 14px;
  background: #000;
  border-radius: 0 0 10px 10px;
  color: #fff;
  padding: 6px 20px;
  position: absolute;
  top: 0;
  right: 0;
}
main .author-follows {
  background: none;
  margin: 0; 
  padding: 0;
}
main .author-box .sns-follow-buttons a.follow-button {
  background: #000;
  border: none;
}
main .author-box .sns-follow-message {
  display: none;
}
@media screen and (max-width: 480px){
main .author-box {
  text-align: center;
  font-size: 0.9em;
}
main .author-box::after {
  right: auto;
  left: 0;
}
main .author-thumb {
  float: none;
  margin-top: 3px;
  width: 120px;
  display: inline-block;
}
main .author-box .author-thumb {
  float: none;
  margin-top: 3px;
  width: 120px;
}
main .author-box .author-thumb img {
  margin: 0 auto;
}
main .author-box .author-content {
  margin: 0;
}
main .author-description {
  text-align: left;
}
main .author-box .sns-follow-buttons {
  justify-content: center;
}
}
.author-box .icon-twitter-logo::before {
  font-family: FontAwesome;
  content: "\f099"
}
.author-box .icon-facebook-logo::before {
  font-family: FontAwesome;
  content: "\f09a";
}
.author-box .icon-instagram-new::before {
  font-family: FontAwesome;
  content: "\f16d";
}
.author-box .icon-hatebu-logo::before {
  font-family: Verdana;
  content: 'B!';
  font-weight: bold;
}
.author-box .icon-google-plus-logo::before {
  font-family: FontAwesome;
  content: "\f0d5";
}
.author-box .icon-youtube-logo::before {
  font-family: FontAwesome;
  content: "\f167";
}
.author-box .icon-pinterest-logo::before {
  font-family: FontAwesome;
  content: "\f231";
}
.author-box .icon-amazon-logo::before {
  font-family: FontAwesome;
  content: "\f270";
}
.author-box .icon-github-logo::before {
  font-family: FontAwesome;
  content: "\f09b";
}



/*---------------------------------
見出し・タイトルサイズ
--------------------------------*/
/*h1タイトルの調整*/
.entry-title {
    padding: 0.2em 0px;
	font-family: sans-serif;    padding: .5em;
    letter-spacing: .3em;
	text-align: center;

}

/*h2タイトルの調整*/
.article h2 {
    padding: 0.2em 0px;
	font-family: sans-serif;    padding: .5em;
    letter-spacing: .3em;
	text-align: center;
	background-color:rgba(255,255,255,0.8);
	
}



/*---------------------------------
画像キャプション中央寄せ
--------------------------------*/
figcaption {
text-align : center;
}


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

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

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


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