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


/* N4ラボ WEB 購入ボタン：通常時 */
.n4-pay-btn .wp-block-button__link {
  background-color: #1769d2 !important;
  color: #ffffff !important;

  border: 2px solid transparent !important;
  border-radius: 999px;

  padding: 14px 30px;
  font-weight: 700;
  font-size: 18px;

  box-shadow: none !important;
  outline: none !important;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* カーソルを乗せた時だけオレンジ枠 */
.n4-pay-btn .wp-block-button__link:hover {
  background-color: #1258b8 !important;
  color: #ffffff !important;

  border: 4px solid transparent !important;
  box-shadow: 0 0 0 8px rgba(201, 71, 18, 0.22) !important;

  transform: translateY(-1px);
}

/* クリック中 */
.n4-pay-btn .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: none !important;
}

/* キーボード操作時 */
.n4-pay-btn .wp-block-button__link:focus-visible {
  outline: 2px solid #8ab8f5 !important;
  outline-offset: 3px;
}