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

/* カスタム */
/* === 画面遷移のためのCSS === */
/* 画面遷移アニメーション */
.splashbg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-width: 0px; /*開始はボーダーの太さは0*/
  border-style: solid;
  border-color: #101010; /*拡大する四角の色*/
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes backBoxAnime {
  99.9% {
    /*アニメーション終了ぎりぎりまで*/
    z-index: 2; /*最前面に*/
    border-width: 0px; /*開始はボーダーの太さは0*/
  }
  100% {
    z-index: -1; /*最背面に*/
    border-width: 0px; /*終了はボーダーの太さは0*/
  }
}

.header-container-in {
  padding-top: 5px;
  padding-bottom: 5px;
}

.navi-in > ul {
  justify-content: left;
}

/* ローディング画面のためのCSS */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #191919;
  z-index: 9999999;
  text-align: center;
  color: #fff;
}

#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 画面遷移の後現れるコンテンツ設定 */
.page-body body {
  position: relative;
  opacity: 0; /* はじめは透過状態 */
}

/* bodyにappearクラスが付いたら出現 */
body.appear {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.header-container {
  box-shadow: 0 0 5px darkgray;
}

.article h1 {
  font-size: 30px;
  text-align: center;
}

/* .article h2 - h6までまとめてアニメーション指定 */
.article h2,
.article h3 {
  background-repeat: no-repeat;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #ccc 0%, #ccc 30%, #fefefe 100%);
  background-position-x: 200%;
}

.article h2 {
  font-size: 22px;
  border-left: solid 10px black;
  border-top: solid 2px black;
  padding: 15px;
  color: black;
  margin-top: 50px;
}

.article h3 {
  font-size: 20px;
  border-left: solid 5px #999;
  padding: 12px;
  color: black;
  margin-top: 30px;
  margin-bottom: 10px;
}

.article h4 {
  margin-bottom: 10px;
  font-size: 18px;
}
.article h4:before {
  content: "〉 ";
  color: gray;
}

.article p,
li {
  padding-left: 1em;
  margin-bottom: 5px;
}

.sidebar h3 {
  color: black;
  margin-bottom: 10px;
  border-bottom: solid 1px black;
}

.toc-content div {
  margin-top: 0;
}

/* アニメーション --------------------------------------------------------------------------------*/
/* ローディングアニメーション */
.logo-anime-wrapper {
	width: 200px;
	height: 60px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.circle{
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    background-color: red;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top: 60px;
        height: 5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height: 20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}

.circle:nth-child(1){
    left: 15%;
	background-color: red;
    animation-delay: .1s;
}

.circle:nth-child(2){
    left: 45%;
	background-color: green;
    animation-delay: .2s;
}

.circle:nth-child(3){
    left:auto;
	background-color: blue;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top: 62px;
    transform-origin: 50%;
    z-index: -1;
    left: 15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}

.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}

.logo-anime-wrapper span{
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 30px;
    letter-spacing: 18px;
    color: #fff;
    left:15%;
}




/* h1 */
.bound {
  animation: poyoyon2 0.5s ease-in-out forwards;
}
@keyframes poyoyon2 {
  0%,
  40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(1deg, 1deg);
  }
  10% {
    transform: skew(-0.5deg, -0.5deg);
  }
  15% {
    transform: skew(0.5deg, 0.5deg);
  }
  20% {
    transform: skew(-0.5deg, -0.5deg);
  }
  25% {
    transform: skew(0.25deg, 0.25deg);
  }
  30% {
    transform: skew(-0.125deg, -0.125deg);
  }
  35% {
    transform: skew(0.075deg, 0.075deg);
  }
}

/* h2 */
.bganime {
  animation: line-anime 0.5s ease-in forwards;
}
@keyframes line-anime {
  0% {
    background-position-x: 200%;
  }
  100% {
    background-position-x: 100%;
  }
}