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

/* =========================================
   アピールエリア全体（深海の暗闇と重圧感）
========================================= */
#appeal {
  position: relative;
  overflow: hidden;
  background-color: transparent; /* 背景色を透明にして画像を活かす */
}

/* 全体を覆う黒みを弱め、背景画像を見えやすく調整 */
#appeal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)),
    radial-gradient(circle at 50% 0%, rgba(32, 74, 85, 0.2), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

#appeal-in {
  position: relative;
  z-index: 1;
}

/* =========================================
   コンテナ（背景に溶け込む海賊の枠）
========================================= */
.appeal-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 40px;
  border-radius: 4px;
  
  /* 背景の海賊旗をしっかり透かせるために透明度を上げる */
  background: rgba(10, 14, 20, 0.2);
  border: 1px solid rgba(138, 106, 37, 0.4); 
  
  /* 内側の黒い影を弱めて、中央の画像をはっきり見せる */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 20px rgba(0, 0, 0, 0.4);
    
  /* ぼかしを少し弱め、画像をよりクリアに */
  backdrop-filter: blur(2px) brightness(0.85);
  -webkit-backdrop-filter: blur(2px) brightness(0.85);
}

/* =========================================
   ボタンエリア
========================================= */
.op-appeal-buttons {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* =========================================
   ボタン本体（鈍く光る海賊の金属板）
========================================= */
.op-appeal-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  max-width: 100%;
  min-height: 72px;
  padding: 16px 24px;
  
  /* ダークメタルのベース */
  background: linear-gradient(180deg, #1e1913 0%, #0d0a06 100%);
  /* アンティークゴールドの細い縁取り */
  border: 1px solid #9e7a2e;
  border-radius: 2px;
  
  color: #ebd197 !important; /* 古びた金色の文字 */
  font-weight: 700;
  font-size: 1.15em;
  letter-spacing: 0.1em;
  text-decoration: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(255, 220, 140, 0.15); /* 上部のわずかなハイライト */
    
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
}

/* ボタンがキラッと光るエフェクトの準備 */
.op-appeal-button::before {
  content: "";
  position: absolute;
  top: 0; 
  left: -150%; 
  width: 50%; 
  height: 100%;
  background: linear-gradient(
    to right, 
    rgba(255,255,255,0) 0%, 
    rgba(235, 209, 151, 0.2) 50%, 
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-25deg);
  transition: left 0.6s ease;
  z-index: -1;
}

/* =========================================
   ホバー時（財宝の輝き）
========================================= */
.op-appeal-button:hover {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(235, 209, 151, 0.6);
  border-color: #c9a349;
  background: linear-gradient(180deg, #2a2218 0%, #17120a 100%);
  
  /* 外側に漏れる金色の後光 */
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.8),
    0 0 15px rgba(158, 122, 46, 0.3),
    inset 0 1px 2px rgba(255, 220, 140, 0.3);
    
  transform: translateY(-2px);
}

/* 光の筋が左から右へ走り抜ける */
.op-appeal-button:hover::before {
  left: 200%;
}

.op-appeal-button:active {
  transform: translateY(1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
}

/* =========================================
   スマホ用レスポンシブ
========================================= */
@media (max-width: 768px) {
  .appeal-content {
    padding: 32px 20px;
  }
  .op-appeal-buttons {
    gap: 16px;
  }
  .op-appeal-button {
    width: 100%;
    min-height: 64px;
    font-size: 1.05em;
  }
}