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


/* ===================================
   シンプル＆プロフェッショナル カスタムCSS
   by Claude - 2026/05/06
=================================== */

/* ---- ヘッダー：落ち着いた深いネイビーに ---- */
#header,
.header,
.site-header {
  background-color: #1e2a3a !important;
  border-bottom: 3px solid #c8a882 !important;
}

/* ---- ヘッダーロゴ・タイトルを白に ---- */
#site-name a,
.site-name a,
.site-title a,
#header .header-title a {
  color: #ffffff !important;
  letter-spacing: 0.08em;
}

/* ---- サイトディスクリプション（キャッチフレーズ）---- */
#site-description,
.site-description,
.header-desc {
  color: #c8a882 !important;
  font-size: 13px;
  letter-spacing: 0.12em;
}

/* ---- グローバルナビゲーション ---- */
#navi .navi-in > ul > li > a,
.global-nav ul li a,
nav ul li a {
  color: #ffffff !important;
  font-size: 14px;
  letter-spacing: 0.06em;
  padding: 0 18px !important;
  font-weight: 500;
}

#navi .navi-in > ul > li > a:hover,
.global-nav ul li a:hover {
  color: #c8a882 !important;
  background: transparent !important;
}

/* ---- リンクカラーをプロフェッショナルに ---- */
a {
  color: #2c5f8a;
  transition: color 0.2s ease;
}
a:hover {
  color: #c8a882;
  text-decoration: none;
}

/* ---- 見出し（h2, h3）---- */
.article h2,
.entry-content h2 {
  border-left: 4px solid #1e2a3a !important;
  border-bottom: 1px solid #e0e0e0 !important;
  padding-left: 14px !important;
  color: #1e2a3a !important;
  background: transparent !important;
  font-size: 20px;
  letter-spacing: 0.04em;
}

.article h3,
.entry-content h3 {
  border-left: 3px solid #c8a882 !important;
  padding-left: 12px !important;
  color: #333 !important;
  background: transparent !important;
}

/* ---- サイドバーウィジェットタイトル ---- */
.widget-title,
.sidebar .widget-title,
.sidebar h3 {
  background: #1e2a3a !important;
  color: #ffffff !important;
  padding: 8px 14px !important;
  font-size: 14px;
  letter-spacing: 0.08em;
  border-left: none !important;
  border-radius: 2px;
}

/* ---- フッター ---- */
#footer,
.site-footer {
  background-color: #1e2a3a !important;
  color: #aab4c0 !important;
  border-top: 3px solid #c8a882 !important;
}

#footer a,
.site-footer a {
  color: #c8a882 !important;
}

/* ---- ボタン ---- */
.btn,
.button,
input[type="submit"],
.wp-block-button__link {
  background-color: #1e2a3a !important;
  color: #ffffff !important;
  border: none;
  border-radius: 2px !important;
  letter-spacing: 0.06em;
  transition: background 0.2s ease;
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: #c8a882 !important;
}

/* ---- 記事カード ---- */
.entry-card,
.a-card {
  border: 1px solid #e8e8e8 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.2s ease;
}

.entry-card:hover,
.a-card:hover {
  box-shadow: 0 4px 16px rgba(30,42,58,0.12) !important;
}

/* ---- タグ・カテゴリーラベル ---- */
.label-cat,
.cat-label {
  background: #1e2a3a !important;
  color: #fff !important;
  border-radius: 2px !important;
}


/* ===================================
   ヒーローセクション（トップ画像エリア）
=================================== */

/* ---- ヒーロー全体 ---- */
.yuri-hero,
.wp-block-cover.alignfull.is-dark {
  background: linear-gradient(135deg, #1a2535 0%, #1e2a3a 40%, #243450 70%, #1a2535 100%) !important;
  min-height: 420px !important;
  position: relative;
  overflow: hidden;
}

/* ---- 装飾ライン（左上のゴールドライン） ---- */
.yuri-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #c8a882, #e8d5b7, #c8a882);
  z-index: 2;
}

/* ---- 内側コンテナ ---- */
.yuri-hero .wp-block-cover__inner-container {
  padding: 20px 40px !important;
}

/* ---- ヒーロー内テキストを白に ---- */
.yuri-hero *,
.yuri-hero p,
.yuri-hero h1,
.yuri-hero h2,
.yuri-hero h3 {
  color: #ffffff !important;
}

/* ---- ヒーロー内サブテキスト ---- */
.yuri-hero p {
  color: #d4c5b0 !important;
  line-height: 1.9;
}

/* ---- ヒーロー内画像を丸く美しく ---- */
.yuri-hero .wp-block-image img,
.yuri-hero .wp-block-gallery img {
  border-radius: 50% !important;
  border: 4px solid #c8a882 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
  transition: transform 0.3s ease !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
}

.yuri-hero .wp-block-image img:hover,
.yuri-hero .wp-block-gallery img:hover {
  transform: scale(1.03) !important;
}

/* ---- 背景の装飾パターン（小さな光の点） ---- */
.yuri-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(circle, rgba(200,168,130,0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 1;
}

.yuri-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 3;
}

/* ---- カラムの縦中央揃え ---- */
.yuri-hero .wp-block-columns {
  align-items: center !important;
  gap: 40px !important;
}

/* ---- ヒーロー内のリンクボタン ---- */
.yuri-hero a.btn,
.yuri-hero .wp-block-button__link {
  background: transparent !important;
  border: 2px solid #c8a882 !important;
  color: #c8a882 !important;
  padding: 10px 28px !important;
  letter-spacing: 0.1em;
}

.yuri-hero a.btn:hover,
.yuri-hero .wp-block-button__link:hover {
  background: #c8a882 !important;
  color: #1e2a3a !important;
}


/* ===================================
   上部3カラムセクション（紹介エリア）
=================================== */

/* ---- 全体の背景 ---- */
.yuri-top-section {
  background: linear-gradient(180deg, #fdfbf8 0%, #f7f3ee 100%) !important;
  border-bottom: 3px solid #c8a882 !important;
  position: relative;
}

/* ---- 上部にゴールドのラインアクセント ---- */
.yuri-top-section::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #c8a882;
  margin: 0 auto 30px;
}

/* ---- カラム内の画像 ---- */
.yuri-top-section .wp-block-image img,
.yuri-top-section .wp-block-gallery img {
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(30,42,58,0.12) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.yuri-top-section .wp-block-image img:hover,
.yuri-top-section .wp-block-gallery img:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(30,42,58,0.18) !important;
}

/* ---- カラム内の見出し ---- */
.yuri-top-section h2,
.yuri-top-section h3 {
  color: #1e2a3a !important;
  font-size: 18px !important;
  letter-spacing: 0.06em;
  border-left: 3px solid #c8a882 !important;
  padding-left: 12px !important;
  margin-bottom: 14px !important;
  background: none !important;
  border-bottom: none !important;
}

/* ---- カラム内テキスト ---- */
.yuri-top-section p {
  color: #555 !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
}

/* ---- カラム間のセパレーター ---- */
.yuri-top-section .wp-block-columns {
  gap: 32px !important;
}

/* ---- 各カラムに薄い背景と罫線 ---- */
.yuri-top-section .wp-block-column {
  background: rgba(255,255,255,0.7) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  border: 1px solid rgba(200,168,130,0.2) !important;
  box-shadow: 0 2px 12px rgba(30,42,58,0.06) !important;
  transition: box-shadow 0.3s ease;
}

.yuri-top-section .wp-block-column:hover {
  box-shadow: 0 6px 24px rgba(30,42,58,0.12) !important;
}


/* ===================================
   サービスセクション 見出し修正
=================================== */

/* ---- サービス見出しのリセット（テーマCSSを上書き） ---- */
.yuri-service-section h2,
.yuri-service-section h3,
.yuri-service-section .wp-block-heading {
  border: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-top: none !important;
  padding: 0 0 8px 0 !important;
  background: transparent !important;
  color: #c8a882 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ---- SERVICE MENU タイトルだけは大きく ---- */
.yuri-service-section > div > h2,
.yuri-service-section .wp-block-heading.has-text-align-center {
  font-size: 22px !important;
  letter-spacing: 0.12em !important;
  color: #c8a882 !important;
  border-bottom: 1px solid rgba(200,168,130,0.3) !important;
  padding-bottom: 16px !important;
  margin-bottom: 8px !important;
}

/* ---- サービスアイテムの段落 ---- */
.yuri-service-section .wp-block-column p {
  color: #d4c5b0 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  margin-top: 4px !important;
}

/* ---- 各カラムに区切り線 ---- */
.yuri-service-section .wp-block-column {
  border-left: 1px solid rgba(200,168,130,0.2);
  padding-left: 20px !important;
}

.yuri-service-section .wp-block-column:first-child {
  border-left: none;
  padding-left: 0 !important;
}

/* ---- ボタン周りのマージン ---- */
.yuri-service-section .wp-block-buttons {
  margin-top: 8px !important;
}