@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){
  /*必要ならばここにコードを書く*/
}

/************************************
全体のバランス
************************************/
.entry-content {
padding:1em;
padding-top:0;
margin: 0 auto;
}
@media (max-width: 1023px){
article > .entry-content, aritcle > footer.article-footer {
padding: 0 12px;
}
}
@media screen and (max-width: 880px){
.page-body {
font-size: 16px;
}
}
@media screen and (max-width: 480px){
.page-body {
font-size: 15px;
}
.entry-content {
margin:0px -10px 0px -10px;
}
}


/************************************
** 新着記事一覧をカスタマイズ
************************************/


/************************************
** 記事内目次
************************************/
.toc {
  background: #f9f9f9!important;
  border: 0!important;
  display: block!important;
  border-top: 5px solid!important;
  border-top-color: #00bfff!important;/*お好みの色に*/
  box-shadow: 0 2px 2px rgba(0,0,0,.2)!important;
  padding: 20px 32px 7px 32px!important;
  margin-bottom: 5%!important;
  width:95%;
  border-radius:10px;
}
@media screen and (min-width:600px){
.toc {
  padding: 20px 35px 15px 35px!important;
  width:70%;
}
}
.toc-title{
  margin: 0 20px 20px -10px!important;
  font-size: 23px!important;
  font-weight: 700!important;
  color: #00bfff!important;/*お好みの色に*/
  background-color: initial;
}
.toc-title:before{
  font-family: "Font Awesome 5 Free";
  content: "\f03a";
  font-weight: 900 !important;
  font-size: 20px;
  color: #fff;
  background-color: #00bfff;/*お好みの色に*/
  border-radius: 50%;
  padding: 14px;
}
.toc a{
  color:#333;
  display: block;
  border-bottom: dashed 1px silver;
  padding-bottom: .5em;/*下の点線との間*/
  padding-top: 0em!important;/*下の点線との間*/
}
.toc ul li{
  font-weight: 700;
  line-height: 1.5;
  padding: 0 0 .4em 1.4em;
  position: relative;
}
.toc ul li:before{
  font-family: "Font Awesome 5 Free"!important;
  content: "\f105";/*f105*/
  position: absolute!important;
  left: -0.3em!important;
  color: #00bfff;/*お好みの色に*/
  font-weight: 900;
}
.toc li li{
  font-weight: 400;
  padding-top:.5em;
  margin-top:0!important;
}
.toc_list li{
  margin-top:-5%!important;
}
@media screen and (min-width:834px){
.toc_list li{/*PCでは目次のh2同士の間隔は抑えめに*/
  margin-top:-1.8%!important;
}
}

/************************************
** サイドバーの目次
************************************/
.sidebar .toc{
  background:transparent!important;
  border:initial!important;
  border-top: initial!important;
  border-top-color: initial!important;
  box-shadow:initial!important;
  margin-bottom:initial!important;
  width: initial!important;
  border-radius:initial!important;
  padding-top:initial!important;
}
.sidebar .toc li li:before{
  color:#fad9a7;/*お好みの色に*/
}

/************************************
** サイドバー変更
************************************/
.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:2px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

/************************************
** トップシェアボタン
************************************/
.sns-share.ss-high-and-low-lc a .social-icon {
  font-size: 22px;
}
/************************************
** ボトムシェアボタン
************************************/
@media screen and (min-width:481px) {
  .sns-share, .sns-follow {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }
}
.sns-share-buttons {
  justify-content: space-evenly;
}
.sns-share-buttons a {
  font-size: 1.25em;
  border-radius: 50%;
  width: 50px!important;
  height: 50px;
  opacity: .6;
}
@media screen and (max-width:834px) {
  .ss-bottom .sns-share-buttons a {
    font-size: 1.3em;
  }
}
.sns-share-buttons a .button-caption {
  display: none!important;
}
.sns-share-message, .sns-follow-message {
  color: #bbb;
  margin-bottom: 30px;
  position: relative;
}
.sns-share-message:before, .sns-follow-message:before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 30px;
  height: 2px;
  left: 50%;
  bottom: -5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 3px;
  background-color: #c0c0c0;
}

/************************************
** ボトムフォローボタン
************************************/
.sns-follow-buttons {
  justify-content: space-evenly;
}
.sns-follow-buttons a {
  font-size: 1.7em;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  opacity: .6;
}
@media screen and (max-width:834px) {
  .ss-bottom .sns-follow-buttons a {
    font-size: 1.3em;
  }
}

/************************************
**　サイドプロフィール
************************************/
.nwa .author-box {
    text-align: center;
    max-width: 100%;
}
.sidebar .author-box {
    border: none;
    border-radius: 4px;
    margin: 1em 0;
    line-height: 1.4;
    position: relative;
    padding: 1.4% 2% 1.8%;
}
.nwa .author-box .author-thumb {
    float: none;
    width: 100%;
    margin: 9px auto 0;
    background: url(https://kiki-peru.com/wp-content/uploads/2021/07/toys-3644073_640.png) center no-repeat;
    background-size: cover;
    height: 0;
    padding-top: calc(100%*392/700);
    position: relative;
}
.sidebar .author-thumb img {
    border: 3px solid #fff;
    width: 30%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25%;
}
.nwa .author-box .author-content {
    margin-top: 16%;
    font-size: 0.9em;
}
.author-name {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
}
.author-box .author-name a {
    text-decoration: none;
    color: #333;
}
.author-box p {
    margin-top: 0.3em;
    line-height: 1.6;
}
.author-box p a {
    text-decoration: none;
    color: #008cee;
}
.author-box p a:hover {
    text-decoration: underline;
    color: #008cee;
}
.author-box .sns-follow-buttons a.follow-button {
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin-bottom: 4px;
    margin-right: 8px;
    background: none;
    color: #fff;
}
.author-box a.follow-button span {
    line-height: 40px;
}
.author-box a.follow-button span::before {
    font-size: 22px;
}
.author-box .icon-twitter-logo::before {
    font-family: "Font Awesome 5 Brands";
    content: "\f099"
    font-weigth:400;
}
.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: "Font Awesome 5 Brands";
    content: "\f167";
	font-weight:400;
}
.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";
}
.author-box .website-button { background-color: #47555c !important; }
.author-box .twitter-button { background-color: #1da1f2 !important; }
.author-box .instagram-button { background: #e1306c !important; }
.author-box .youtube-button { background-color: #ef1515 !important; }
.author-box .rakuten-room-button { background-color: #c42e7f !important; }

/************************************
** リストスタイル
************************************/

/************************************
** デフォルトの見出しを消す
************************************/

.article h2{
   padding: 0;
   background: none;
}

.article h3{
   border: none;
   padding: 0;
}

.article h4{
   border: none;
   padding: 0;
}

.article h5{
   border: none;
   padding: 0;
}

.article h6{
border: none;
padding: 0;
}

/************************************
** 見出し　ｈ２
************************************/
/*----------------------------------------------------------*/
/* PC用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width: 1200px) {
.article h2 {
	padding: 1rem 2rem;
	color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
	margin-right: calc(94% - 50vw);
	margin-left: calc(92% - 50vw);
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}
}

/*----------------------------------------------------------*/
/* タブレット用のCSS */
/*----------------------------------------------------------*/
@media only screen and (min-width:479px) and (max-width:768px) {
.article h2 {
	padding: 1rem 2rem;
	color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}
}

/*----------------------------------------------------------*/
/* スマホ用のCSS */
/*----------------------------------------------------------*/
@media only screen and (max-width: 479px) {
.article h2 {
	padding: 1rem 2rem;
	color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}
}

/************************************
** 見出し　ｈ３
************************************/

.article h3 {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #000000;/*文字色*/
  border-bottom: solid 2px #80c8d1;

 
}

.article h3:before {
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #00bfff; /*アイコン色*/
}
/************************************
** 見出し　ｈ４
************************************/
.article h4 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

.article h4:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
  font-weight: 900;
}
/************************************
** タブ付きボックス
************************************/
.blank-box {
border: 1px solid #ff47a3;
padding: 1.3em 1em;
margin: 1em 5%;
border-radius: 5px;
border-top-left-radius: 5px!important;
}

.blank-box.bb-tab .bb-label {
background-color: #ff47a3;
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
font-size:14px;
top: -1.8em;
line-height: 1.8;
color: #fff;
left: 14px;
top: -15px;border: solid 2px #fff;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
border-bottom-right-radius:12px;
border-bottom-left-radius: 12px;
padding: 0px 1em 0px .8em;
}

/************************************
** リスト変更
************************************/

.list-3{
   list-style: none;
   padding:0;
   margin:0;
}
.list-3 li { 
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 25px;
}
.list-3 li:before {
   font-family:  "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f058"; /*アイコン*/
   color: #00bfff; /* 色 */
   position: absolute;
   left:0;
}

.list-box-1{
   background: #e0ffff; /* 背景色 */
   border-radius: 4px;
   max-width: 600px; /* 横幅 */
   padding: 2em;
   margin:0 auto;
}
@media screen and (max-width: 768px){
.article ul, .article ol {
    padding-left: 0px; /* スマホ閲覧時の余白リセット(cocoon) */
}
}

/************************************
** タブ付きボックス　２重線消す
************************************/
.tab-caption-box,
.label-box {
	border:none;
}


/*480px以下アイキャッチ画像の幅を無くすCSS*/
@media screen and (max-width: 480px){
  .entry-header .eye-catch {
    margin-left: -1em;
    margin-right: -1em;
    max-width: none;
    width: auto;
  }
} 


/************************/
/*お勧めカード*/
/************************/
#recommended .navi-entry-card-thumb img{
border-radius:10px; /*角丸め*/
}
#recommended .card-content {
color: #fff; /*タイトル文字色*/
background-color: #000; /*タイトル背景色*/
}
/*オンマウスで傾ける*/
#recommended .navi-entry-card-thumb {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#recommended .navi-entry-card-thumb:hover {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/*カードのサイズ*/
#recommended .navi-entry-card-thumb img{
width:200px;
height:90px;
}


/************************/
/*ヘッダーサイズ変更*/
/************************/
.header-in {
    width: 80%;
}

.logo-image{
  padding: 0;
}

.logo-image span, .logo-image a {
    width: 90%;
}

.header-in img {
    width: 100%;
}