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


/* ====================================================
   共通ボタンスタイル（.btn_02 / .btn_03 / .btn_09）
==================================================== */
a.btn_02,
a.btn_03,
a.btn_09 {
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff !important;
    text-align: center;
    text-decoration: none !important;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 20px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* ====================================================
   btn_02（レッド寄りオレンジ＋光る＋揺れるオプション）
==================================================== */
.btn_02 {
    background: linear-gradient(135deg, #FF5722, #E64A19);
    position: relative;
    overflow: hidden;
}

.btn_02::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 70%
    );
    transform: rotate(25deg);
    animation: shine 3s infinite linear;
    pointer-events: none;
}

.btn_02:hover {
    background: linear-gradient(135deg, #E64A19, #D84315);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px) scale(1.02);
}

.btn_02:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn_02.wobble {
    animation: wobble 2.5s infinite ease-in-out;
}

/* ====================================================
   btn_03（ピンク寄り紫）
==================================================== */
.btn_03 {
    background: linear-gradient(135deg, #CE93D8, #AB47BC);
}

.btn_03:hover {
    background: linear-gradient(135deg, #BA68C8, #8E24AA);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px) scale(1.02);
}

.btn_03:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ====================================================
   btn_09（鮮やかグリーン＋fadeUp）
==================================================== */
.btn_09 {
    background: linear-gradient(135deg, #0eb03a, #0eb03a);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.btn_09:hover {
    background: linear-gradient(135deg, #388E3C, #0eb03a);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px) scale(1.02);
}

.btn_09:active {
    transform: translateY(1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn_09::before {
  content: "▶ お得に視聴するなら";
  position: absolute;
  top: -0.1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #FFA500;
  white-space: nowrap;
  animation: blinkText 1.4s infinite;
}

/* ====================================================
   アニメーション定義
==================================================== */
@keyframes shine {
    0% { left: -50%; }
    100% { left: 100%; }
}

@keyframes wobble {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes blinkText {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ====================================================
   モバイル対応
==================================================== */
@media screen and (max-width: 768px) {
    a.btn_02,
    a.btn_03,
    a.btn_09 {
        font-size: 16px;
        padding: 14px 0;
    }
}