@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
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {
  background-color: #004e9d;
  color: #ffffff;
}
body #main,
body .main {
  background-color: #004e9d;
  padding: 0%;
}
body .header-container {
  background-color: #004e9d;
  color: #ffffff;
  padding: 30px 0;
}
body .header-container .header {
  color: #ffffff;
}
body .site-name-text-link {
  color: #ffffff;
}
body .button {
  background-color: #B89B4A;
  color: #ffffff;
}
body .button:hover {
  background-color: #957d3a;
}
body .footer {
  background-color: #004e9d;
  color: #ffffff;
}

#post-6 h1 {
  display: none;
}
#post-6 .wp-block-cover {
  margin-bottom: 0;
  text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
  /* テキストの視認性を高める */
}
#post-6 > div > .wp-block-cover:nth-child(1) {
  height: calc(100vw - 200px);
  /* wp-block-coverの設定 */
  /* 背景に複数のエフェクトを追加 */
  /* カラフルな集中線のレイヤー */
  /* 星の背景レイヤー */
  /* 光のフレアと放射線のレイヤー */
  /* テキストコンテンツの設定 */
  /* カラフルな集中線の回転アニメーション */
  /* 光のフレアの回転アニメーション */
  /* 光のフレアの鼓動アニメーション */
  /* カラフルな色のシフトアニメーション */
}
#post-6 > div > .wp-block-cover:nth-child(1) .wp-block-cover {
  position: relative;
  overflow: hidden;
  text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
}
#post-6 > div > .wp-block-cover:nth-child(1) .wp-block-cover__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
#post-6 > div > .wp-block-cover:nth-child(1) .wp-block-cover__background::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: conic-gradient(from 0deg, red, orange, yellow, green, blue, indigo, violet, red);
  animation: spin 12s linear infinite, colorShift 20s ease-in-out infinite;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0.5;
  z-index: 1;
  filter: blur(8px);
  mix-blend-mode: screen;
  /* カラフルな光の効果を強調 */
}
#post-6 > div > .wp-block-cover:nth-child(1) .wp-block-cover__background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://www.transparenttextures.com/patterns/stardust.png") repeat;
  animation: animStars 100s linear infinite;
  opacity: 0.3;
  z-index: 2;
}
#post-6 > div > .wp-block-cover:nth-child(1) .wp-block-cover__background::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
  animation: pulse 6s ease-in-out infinite, rotateFlare 20s linear infinite;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  z-index: 3;
  filter: blur(6px);
  mix-blend-mode: screen;
}
#post-6 > div > .wp-block-cover:nth-child(1) .wp-block-cover__inner-container {
  position: relative;
  z-index: 4;
  color: #fff;
  /* テキストを白く表示 */
}
@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotateFlare {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes colorShift {
  0% {
    filter: hue-rotate(0deg);
  }
}

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