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

/*reCAPTCH非表示A*/
.grecaptcha-badge { visibility: hidden; }

/*問い合わせ送信ボタン*/
.wpcf7-submit:disabled {
background-color: #FFF;
}

/*プロフ角丸*/
.skin-grayish .content-bottom .widget_author_box h2+.author-box {
  border-radius: 30px;
}

/*画像角丸*/
.card-thumb img {
  border-radius: 15px;
}

/*ボタン角丸*/
.skin-grayish .list-new-entries .list-more-button,
.skin-grayish .list-columns .list-more-button,
.skin-grayish .pagination-next-link,
.skin-grayish .index-tab-wrap .list-more-button,
.skin-grayish .comment-btn,
.skin-grayish .pager-links .post-page-numbers .page-numbers.page-prev-next {
  border-radius: 30px;
}

/*ボタン角丸ホバー*/
.skin-grayish .list-new-entries .list-more-button::before,
.skin-grayish .list-columns .list-more-button::before,
.skin-grayish .pagination-next-link::before,
.skin-grayish .index-tab-wrap .list-more-button::before,
.skin-grayish .comment-btn::before,
.skin-grayish .pager-links .post-page-numbers .page-numbers.page-prev-next::before {
  border-radius: 30px;
  background-color:#FFF;
}

/*鼓動*/
.list-more-button:hover {
  animation: anima-list-more-button 1s;
  }

  @keyframes anima-list-more-button {
  0% {
    box-shadow: 0 0 0 0 var(--skin-grayish-site-main-thin);
  }
  100% {
    box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
  }
  }

/*－－アフィーー*/
/*ロゴ削除*/
.pochipp-box .pochipp-box__logo {
	display: none!important;
}

.-amazon:hover {
      animation: anima-button-a 1s;
				border-radius: 50px;
    }

    @keyframes anima-button-a {
      0% {
        box-shadow: 0 0 0 0 rgb(242 129 24 / 50%);
      }

      100% {
        box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
      }
    }

.-rakuten:hover {
      animation: anima-button-r 1s;
				border-radius: 50px;
    }

    @keyframes anima-button-r {
      0% {
        box-shadow: 0 0 0 0 rgb(191 0 0 / 50%);

      }

      100% {
        box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
      }
    } 

.-yahoo:hover {
      animation: anima-button-y 1s;
				border-radius: 50px;
    }

    @keyframes anima-button-y {
      0% {
        box-shadow: 0 0 0 0 rgb(255 0 51 / 50%);
      }

      100% {
        box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);
      }
    } 


/*－－アフィーー*/

/*－-内部リンクーー*/

.skin-grayish .blogcard {
  border-radius: 15px;
}

/* アイコンbox question */
:is(.is-style-question-box, .question-box, .question) {
  border-radius: 15px;
}

/* toc 目次 */
.skin-grayish .toc-title {
  background-size: 1px 3px;
}

/* 記事下 SNS share */
.skin-grayish .article-footer .sns-share-buttons,
.skin-grayish .article-footer .sns-follow-buttons {
  background-size: 1px 8px;
}


/*back-color*/
.main {
	background-color: #fcffff;
}

.breadcrumb.sbp-main-before + .content,
.breadcrumb.pbp-main-before + .content {
  background-color: #FCFFFF;
}

.skin-grayish.front-top-page .content {
  background-color: #FCFFFF;
}


/*image*/
.wp-block-image img {
/*box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, .25);*/
border-radius: 20px !important;
}

/*pre*/
pre {
  padding: 20px;
  background-color: #FFF;
  border: 1px solid #e9e9e9;
  border-radius: 15px !important;
}

/*fadein*/
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
      clip-path: inset(0 100% 0 0);
      transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
      transition-property: clip-path;
  }
  &.fadein-right{
      transform: translate(30px,0);
	  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  }
  &.fadein-upleft{
      transform: translate(0,-30px);
   	  clip-path: inset(0 100% 100% 0);
	  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  }
  &.fadein-up{
      transform: translate(0,-30px);
   	  clip-path: inset(0 0 100% 0);
	  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  }

  &.fadein-bottom{
      transform: translate(0,30px);

  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
	clip-path: inset(0);
  }
}

/*youtube*/
.video-container {
  max-width: none;
}