@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){
  /*必要ならばここにコードを書く*/
}
/* ===== Hero Section ===== */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(160deg, #0e0e0e 0%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('http://goldsbean.com/wp-content/uploads/2025/11/logo_typo.png') center/cover no-repeat;
  opacity: 0.25;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  animation: fadeIn 2s ease;
}

.hero-logo {
  width: 300px;
  max-width: 80%;
  margin-bottom: 30px;
  animation: fadeInDown 2s ease;
}

.hero-copy {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
  animation: fadeInUp 2.5s ease;
  color: #ededed;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-gold, .btn-outline {
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.btn-gold {
  background: linear-gradient(45deg, #c9a635, #d4af37);
  color: #000;
}

.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.8);
  color: #fff;
}

.btn-gold:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px #d4af37;
}

.btn-outline:hover {
  background: rgba(255,255,255,0.1);
}

.scroll-down {
  margin-top: 60px;
  font-size: 0.9rem;
  opacity: 0.7;
  animation: bounce 2s infinite;
}

/* ===== Animations ===== */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }


/* --- 本文エリアの背景色を変更 --- */
.main {
  background-color: #121212 !important;  /* 落ち着いた黒背景 */
  color: #f0f0f0 !important;             /* 白文字 */
}

/* --- 記事本文リンクの色 --- */
.entry-content a {
  color: #d4af37;
}
.entry-content a:hover {
  color: #f1c40f;
}