@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/




.aff-button-before{
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #626262;
  margin: 0 0 10px !important;
}

/* =========================================
   CTAボタン（緑／影強め／立体／角丸ひかえめ・大きめ）
   - テンプレHTML：<a class="co-btn co-btn--green" href="...">公式サイトはこちら</a>
   ========================================= */

/* レイアウト（ラッパー任意） */
.co-btn__wrap{ text-align:center; margin:0 0 30px; }

/* ボタン本体 */
.co-btn{
  display:inline-block;
  padding:24px 56px;          /* 大きめサイズ */
  width:100%;
  border-radius:10px;          /* 角丸ひかえめ */
  text-decoration:none;
  font-weight:900;
  font-size:22px;
  line-height:1;
  color:#fff !important;
  text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.25);

  /* 立体感：濃淡グラデ＋強めの影＋軽い内側影 */
  background:linear-gradient(180deg,#33cf84 0%, #1fa564 100%);
  box-shadow:
    0 22px 44px rgba(0,0,0,.32),        /* 外側の落ち影（強め） */
    inset 0 2px 0 rgba(255,255,255,.18),/* 上面のうっすらハイライト */
    inset 0 -3px 0 rgba(0,0,0,.18);     /* 下面のわずかな落ち影 */

  border:0;                             /* 白縁防止 */
  background-clip:padding-box;          /* にじみ防止 */
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color:transparent;
}

/* カラー指定（将来色違いを増やす用のフック） */
.co-btn--green{ background:linear-gradient(180deg,#33cf84 0%, #1fa564 100%); }

/* ホバー／押下 */
.co-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 26px 56px rgba(0,0,0,.36),
    inset 0 2px 0 rgba(255,255,255,.20),
    inset 0 -3px 0 rgba(0,0,0,.20);
  opacity:.98;
}
.co-btn:active{
  transform:translateY(0) scale(.995);
  box-shadow:
    0 16px 32px rgba(0,0,0,.28),
    inset 0 2px 0 rgba(255,255,255,.16),
    inset 0 -2px 0 rgba(0,0,0,.20);
}

/* フォーカスリング（白縁に見えない配色） */
.co-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.9),
    0 0 0 6px rgba(51,207,132,.55),
    0 26px 56px rgba(0,0,0,.34);
}

/* モバイル最適化 */
@media (max-width:599px){
  .co-btn{
    width:100%;
    min-width:auto;
    padding:20px 22px;
    font-size:20px;
    border-radius:10px;
  }
}

/* 低モーション環境 */
@media (prefers-reduced-motion:reduce){
  .co-btn{ transition:none; }
}












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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}