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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
.grecaptcha-badge { visibility: hidden; }
/******リンクマウスオン文字色 *****/
.entry-content a:hover { color: #FF6EA8; }
/**目次のマウスを合わせた時の色**/
.toc-content a:hover { color: #3A4B74; }
/************************************
** ■カルーセル カスタマイズ
************************************/
.carousel .carousel-entry-card .carousel-entry-card-title.card-title {
  font-size: 14px; /*フォントサイズ*/
  font-weight:bold!important; /*文字強調*/
  word-break: break-all; /*表示範囲に合わせて改行*/
}
.carousel .carousel-entry-card .cat-label {
  color: #fff; /*ラベル 文字色*/
}
.carousel .carousel-in {
  margin-top: 40px; /*上マージン調整*/
}
.carousel .carousel-entry-card-thumb.card-thumb img {
  border-radius: 6px; /*角丸コーナー*/
}
/************************************
** カルーセルカスタマイズ
************************************/
#carousel .carousel-entry-card-title{
  display: none;/*タイトル消す*/
}
.slick-slide img {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);/*お好みで*/
}
/****************************
 ** 見出しh2デザイン
 *****************************/
/* 見出しリセット */
/* 見出し2 */
.article h2{
background:none;
padding: 0;
}
/* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
/**見出し4**/
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* 見出し5 */
.article h5{
border-bottom:none;
padding: 0;
}

/**見出しデザイン**/
.article h2 { /**h2**フキダシ**/
  position: relative;
  padding: 0.6em;
  background: #82cddd;
  padding: 15px 20px;
  margin: 40px 0 20px;
  border-radius: 10px ;
}

.article h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #82cddd;
  width: 0;
  height: 0;
}

.article h3 { /**h3**蛍光マーカー風***/
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
.article h4 { /**h4左線**/
	border-bottom: none;
	margin: 1.5em 0 1em;
	padding: 0.25em 0.5em; /* 上下 左右の余白 */
	border-left: solid 8px #ff639f;
	font-size: 23px;
}

/*タグクラウド*/
.widget_tag_cloud .tagcloud a {
  border: 0.5px #555 solid;
  border-radius :20px;
  font-size: 13px;
  margin: 2px;
  flex: 0 1 auto;
  display: flex;
  font-family:'Baloo Thambi 2','Cursive';
}
.tagcloud a:hover { /*マウスホバー時*/
    background: #72c7e6;
    border: 1px solid #72c7e6;
    color: #fff;
    transition: 0.5s; /*アニメーションの時間*/
}
/* 画像に影を付ける */
img.alignleft,
   .aligncenter,
   .alignright,
   .alignnone {
      box-shadow: 3px 3px 15px -5px #000;
}
/***マウスオーバー時　下線が引かれる（アニメーション）****/
/*メインメニュー*/
.menu-header .menu-item{
  text-decoration: none;
  color: #5bc8ac;
}
.item-label{
  position: relative;
  z-index: 1;
}
.item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0%;/*初期状態・下線非表示*/
  height: 2px;/*下線の高さ*/
  background: #99ced4;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.menu-header .menu-item:hover .item-label:after{
 width: 100%;/*hover時に表示*/
}

/*サブメニュー*/
.sub-menu .item-label:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;/*テキストからの距離*/
  width: 0% !important;/*初期状態・下線非表示*/
  height: 2px;/*下線の太さ*/
  background: #99ced4;/*下線の色*/
  z-index: -1;
  transition: all 0.4s;/*アニメーション速度*/
}
.sub-menu .menu-item:hover .item-label:after{
  width:80% !important;/*hover時に表示*/
  margin-left:-10px
}
/*マウスオーバー時 背景色が変わる*/
#navi .navi-in a:hover{
	background: #efefef;
	transition: 0.8s ;
}
/*************
 *プロフィール欄カスタマイズ
**************/
/************************************
** プロフィール欄
************************************/
.nwa .author-box {
max-width:none;
padding: 0;
}
aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
border-radius: 10px 10px 0 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url( https://team-twins.xyz/wp-content/uploads/2021/07/top3.jpg) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow:none;
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 2em 0;
}
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#545454;
}
.nwa .author-box .author-description {
margin-bottom:1.5em
}
.author-box .author-content .author-description p{
font-size:14px;
color:#7b7b7b;
line-height:1.6em!important;
margin:1em;
}
#author_box-2 p{
margin:1em 2.5em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin:0 3px;
transition: .5s;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #6eb6fd!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #7dcdf7!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #7c9dec!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 7em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}
@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/
div.sidebar {
display: none;
}
}
/****フィードとRSSボタン消す ****/
a.follow-button.feedly-button.feedly-follow-button-sq{
display:none;
}
a.follow-button.rss-button.rss-follow-button-sq{
display:none;
}
/**ボタン装飾***/
.button1 .has-background:hover{
	background-color: #82cddd!important;
	transition:0.5s;
}

/***　記事一覧オンマウスでホバーする　***/
.a-wrap:hover{
transform: scale(1.01);
box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}
background-color: #ffffff;
}

/************************************
** 記事下の関連記事
************************************/
/*記事下関連記事見出し*/
h2.related-entry-heading span:before {
}
.rect-mini-card .related-entry-card-wrap {
  border-bottom: 1px dashed #4e454a;/*区切り線*/
}
/***サイドバー見出し***/
.sidebar h3{
  background-color:#ff639f;/*好きな背景色にする*/
  color:#ffffff;/*文字の色を変える*/
  padding:5px 5px;/*見出しの内側の余白を調整する*/
  margin:15px 0;
}
.sidebar h3 {
    background-color: #ff639f;
    padding: 7px 20px;
    margin: 40px 0 20px;
 border-radius: 20px;
	font-size: 1em;
}
/***固定ページエリア毎に背景色変える***/
.change-area {
    background: #ffd6ea;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-right: calc(50vw - 50%);
    padding-left: calc(50vw - 50%);
}
/*****カテゴリー別背景色*****/
body.home {
	background-color:#fff;
}
/***固定ページのみコンテンツ枠線消す****/
@media screen and (min-width: 769px) {
	.home #main {
		border: solid 1px transparent;
	}
}

/**** ショートコード新着記事横並び ****/
/* エントリーカード横に並べる */
.widget-entry-cards.card-large-image .a-wrap {
width:32.5%;
height:auto;
display: inline-flex;
}
@media screen and (max-width: 768px) {
.widget-entry-cards.card-large-image .a-wrap {
width:49%;
display: inline-flex;
}
}
@media screen and (max-width: 480px) {
.widget-entry-cards.card-large-image .a-wrap {
width:auto;
display: inline-flex;
}
}
.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}
/***日付を表示**/
.new-entry-card-date {
	display: block;
	text-align: right;/*右寄せ*/
}
/*日付にアイコン追加*/
.widget-entry-card-post-date::before,
.widget-entry-card-update-date::before{
	font-family: "Font Awesome 5 Free";
	font-weight:800; 
}

/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}
/***固定ページで全てで日付非表示***/
.page .date-tags {
display: none;
}
/*****記事一覧のサムネイル上のカテゴリー名をカスタマイズ*****/
/**リボンタイプ**/
.entry-card-thumb .cat-label {
	top: -6px;
	left: 3%;
	color: #fff;
	padding: 11px 10px 1px 10px;
	background-color: #0071BB;
	border: 0;
	border-top-right-radius: 3px;
	overflow: visible;
}

.entry-card-thumb .cat-label::before {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
}

.entry-card-thumb .cat-label::before {
	top: 0;
	left: -6px;
	border-bottom: 6px solid #D5017B;
	border-left: 6px solid transparent;
}
/***ショートコード記事タイトル文字サイズ**/
.widget-entry-card-title {
  font-size: 16px;
}
/**目次デザイン**/
.toc{
  font-size: 1em;
  font-weight:bolder;
  padding: 1em 2em;
  background-color: #fafffa;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
  border-top:solid 10px #d1dfb7;
}
.toc-title:before {
    font-family: 'Font Awesome 5 Free';
    content : "\f03a";
    font-size: 1.2em;
    color: #FFF;
    background-color: #ffd6ea;
    border-radius: 50%;
    padding: 0.5em;
    margin-right: 0.5em;
}