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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body, content, main, sidebar {background-color:transparent;}
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{display: none;}
/*フロント固定ページの投稿日を非表示*/
/*フロント固定ページの更新日を非表示*/
.page-id-2 .article-header .date-tags {display: none;}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info, .author-info{display: none;}
/* サイト名非表示 */
.page-id-2 .content {margin-top: 0px;}
.page-id-2 .logo-text, .page-id-2 .header-in {display: none;}
.page-id-2 .main {padding: 0px 29px;}
/* 固定ページの日付非表示 */
.page .date-tags {display: none;}



/* -------------------- */

/* ---- カラー変数 ---- */
:root {
  --ylps-cream: #faf7f2;
  --ylps-warm: #f7f0e6;
  --ylps-beige: #ede4d6;
  --ylps-gold-light: #e8d5b0;
  --ylps-gold: #c8a96e;
  --ylps-gold-deep: #9e7530;
  --ylps-sage: #8aaa84;
  --ylps-sage-light: #c4d8c0;
  --ylps-sage-pale: #eaf3e6;
  --ylps-text: #3a3028;
  --ylps-text-mid: #6b5e52;
  --ylps-text-light: #9a8e84;
  --ylps-border: #e0d4c4;
  --ylps-border-light: #ede8e0;
  --ylps-red-pale: #faf0ee;
  --ylps-red-border: #e8c4be;
  --ylps-red-accent: #c8908a;
}

/* ---- アニメーション ---- */
@keyframes ylps-fadeInUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes ylps-lineGrow { from { width:0; } to { width:40px; } }

/* ======================================================
   ラッパー .ylps
   ====================================================== */
.ylps {font-size:16px; color:var(--ylps-text); line-height:1.95; }

/* ======================================================
   フェードイン（JS連動）
   ====================================================== */
.ylps-fade { opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease; }
.ylps-fade.ylps-visible { opacity:1; transform:translateY(0); }

/* ======================================================
   ヒーローエリア
   ====================================================== */
.ylps-hero { background:linear-gradient(135deg,#fdf9f4 0%,#f5ede0 100%); border:1px solid var(--ylps-gold-light); border-radius:14px; padding:0px 36px 32px; margin-bottom:36px; text-align:center; position:relative; overflow:hidden; }
.ylps-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--ylps-gold-light),var(--ylps-gold),var(--ylps-gold-light)); }
.ylps-hero-heading {font-size:16px; letter-spacing:0.2em; color:var(--ylps-gold-deep); font-weight:400; margin:0 0 20px; padding:0; border:none; }
.ylps-hero-heading::before, .ylps-hero-heading::after { display:none; }
.ylps-hero-lead {font-size:clamp(16px,2vw,20px); color:var(--ylps-text); line-height:1.8; margin-bottom:20px; }
.ylps-voices { font-size:16px; color:var(--ylps-text-mid); font-style:italic; line-height:2.4; background:#fff; border:1px solid var(--ylps-gold-light); border-radius:10px; padding:16px 20px; margin:16px auto; display:inline-block; text-align:left; }
.ylps-hero-close { font-size:16px; color:var(--ylps-text); line-height:1.9; margin-top:20px; margin-bottom:0; }

/* ======================================================
   h2 見出し
   ====================================================== */
.ylps h2 {font-size:clamp(18px,2.2vw,22px); color:var(--ylps-text); font-weight:600; margin:56px 0 20px; padding:10px; border-bottom:1px solid var(--ylps-border); position:relative; letter-spacing:0.04em; }
/* .ylps h2::before { content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background:var(--ylps-border); } */
.ylps h2::before {content: '\f5a7';font-family: "Font Awesome 5 Free"; font-weight: 900;padding-right:10px;}
.ylps h2::after { content:''; position:absolute; bottom:-1px; left:0; height:2px; width:40px; background:var(--ylps-gold); animation:ylps-lineGrow 0.5s ease 0.2s both; }

/* ======================================================
   h3 見出し（通常）
   ====================================================== */
.ylps h3 {font-size:clamp(18px,1.8vw,16px); color:var(--ylps-text); font-weight:600; margin:32px 0 12px; padding:10px 16px 10px 16px; background:var(--ylps-warm); border-left:3px solid var(--ylps-gold); border-radius:0 8px 8px 0; letter-spacing:0.02em; transition:background 0.2s; }
.ylps h3:hover { background:var(--ylps-beige); }

/* ======================================================
   段落・テキスト
   ====================================================== */
.ylps p { font-size:16px; color:var(--ylps-text); line-height:2; margin:0 0 16px; }
.ylps strong { font-weight:600; color:var(--ylps-text); }
.ylps a { color:var(--ylps-gold-deep); text-decoration:underline; text-underline-offset:3px; transition:color 0.2s; }
.ylps a:hover { color:var(--ylps-sage); }
.ylps-italic { font-style:italic; color:var(--ylps-text-mid); text-align:center; font-size:16px; padding:8px 0; }

/* ======================================================
   .ylps-note（Basicご案内）
   ====================================================== */
.ylps-note { background:#fdfaf5; border:1px solid var(--ylps-gold-light); border-radius:10px; padding:16px 20px; font-size:14px; color:var(--ylps-text-mid); line-height:1.95; }
.ylps-note a { font-weight:500; }

/* ======================================================
   Cocoon .blogcard-box 上書き
   ====================================================== */
.ylps .blogcard-box { background:var(--ylps-sage-pale); border:1px solid var(--ylps-sage-light); border-left:4px solid var(--ylps-sage); border-radius:10px; padding:20px 24px; margin:24px 0; font-size:16px; line-height:2.1; color:var(--ylps-text); }
.ylps .blogcard-box strong { display:block; font-size:16px; color:#3e6040; margin-bottom:6px; }

/* ======================================================
   Cocoon .box.box-red 上書き
   ====================================================== */
.ylps .box.box-red { background:var(--ylps-red-pale); border:1px solid var(--ylps-red-border); border-left:4px solid var(--ylps-red-accent); border-radius:10px; padding:20px 24px; margin:24px 0; font-size:18px; line-height:2.1; color:var(--ylps-text); }

/* ======================================================
   ul リスト（通常）
   ====================================================== */
.ylps ul { list-style:none; margin:12px 0 24px; padding:0; }
.ylps ul li { position:relative; padding:10px 14px 10px 40px; margin-bottom:8px; font-size:16px; color:var(--ylps-text); background:#fff; border:1px solid var(--ylps-border-light); border-radius:8px; line-height:1.85; transition:box-shadow 0.2s, border-color 0.2s; }
.ylps ul li:hover { box-shadow:0 3px 12px rgba(168,130,64,0.10); border-color:var(--ylps-gold-light); }
.ylps ul li::before { content:'\f00c'; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:11px; color:var(--ylps-sage); }

/* ======================================================
   対象者ブロック .ylps-target-block
   ====================================================== */
.ylps-target-block { background:#fff; border:1px solid var(--ylps-border-light); border-radius:12px; padding:20px 24px; margin:12px 0 16px; transition:box-shadow 0.25s; }
.ylps-target-block:hover { box-shadow:0 4px 16px rgba(168,130,64,0.10); }
.ylps-target-title { font-family:var(--font-serif); font-weight:600; font-size:15px; color:var(--ylps-text); margin-bottom:6px !important; padding-left:22px; position:relative; }
.ylps-target-title::before { content:'\f007'; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; left:0; top:2px; font-size:12px; color:var(--ylps-gold); }
.ylps-target-block > p:last-child { font-size:14px; color:var(--ylps-text-mid); margin-bottom:0; padding-left:22px; }

/* ======================================================
   講座内容 .ylps-session-lead
   ====================================================== */
.ylps-session-lead { text-align:center; font-size:14px; color:var(--ylps-text-light); letter-spacing:0.12em; margin-bottom:20px; }
.ylps-session-lead strong { background:none; font-size:15px; }

/* ======================================================
   講座内容グリッド .ylps-session-grid
   ====================================================== */
.ylps-session-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:4px 0 36px; }
.ylps-session-card { background:#fff; border:1px solid var(--ylps-border-light); border-radius:12px; padding:20px 20px 18px; position:relative; overflow:hidden; transition:transform 0.25s, box-shadow 0.25s; }
.ylps-session-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(168,130,64,0.12); }
.ylps-session-card::before { content:counter(session); counter-increment:session; position:absolute; top:14px; right:16px; font-family:var(--font-serif); font-size:28px; color:var(--ylps-gold-light); font-weight:600; line-height:1; }
.ylps-session-grid { counter-reset:session; }

/* グリッド内のh3（.ylps-session-h3）*/
.ylps-session-h3 { font-family:var(--font-serif); font-size:14px; font-weight:600; color:var(--ylps-text); margin:0 0 10px; padding:0 0 10px; background:none; border-left:none; border-bottom:1px solid var(--ylps-border-light); border-radius:0; letter-spacing:0.02em; line-height:1.6; }
.ylps-session-h3:hover { background:none; }
.ylps-session-card p { font-size:13px; color:var(--ylps-text-mid); line-height:1.85; margin:0; }

/* ======================================================
   受講料ボックス .ylps-price-box
   ====================================================== */
.ylps-price-box { background:linear-gradient(135deg,#fefcf8 0%,#faf4ea 100%); border:1px solid var(--ylps-gold-light); border-radius:14px; padding:28px 32px; margin:16px 0 28px; text-align:center; }
.ylps-price-text { font-family:var(--font-serif); font-size:20px; color:var(--ylps-gold-deep); line-height:2.2; margin-bottom:12px; }
.ylps-price-note { font-size:13px; color:var(--ylps-text-light); padding-top:12px; border-top:1px solid var(--ylps-gold-light); margin:0; }

/* ======================================================
   申込エリア .ylps-apply-box
   ====================================================== */
.ylps-apply-box { background:linear-gradient(135deg,#fdf9f4 0%,#f5ede0 100%); border:1px solid var(--ylps-gold-light); border-radius:14px; padding:32px 32px 28px; margin-top:8px; }
.ylps-apply-lead { font-family:var(--font-serif); font-size:15px; font-weight:600; color:var(--ylps-gold-deep); letter-spacing:0.06em; margin-bottom:12px !important; }

/* ======================================================
   リンクボタン .ylps-btn
   ====================================================== */
.ylps-btn { display:inline-block; background:linear-gradient(135deg,var(--ylps-warm) 0%,#ede4d6 100%); border:1px solid var(--ylps-gold); color:var(--ylps-gold-deep) !important; text-decoration:none !important; padding:11px 22px; border-radius:8px; font-size:14px; font-weight:500; margin:6px 0; transition:all 0.25s; }
.ylps-btn:hover { box-shadow:0 4px 16px rgba(168,130,64,0.20); transform:translateY(-1px); color:var(--ylps-gold-deep) !important; }

/* ======================================================
   レスポンシブ
   ====================================================== */
@media (max-width:680px) {
  .ylps-hero { padding:28px 20px 24px; }
  .ylps h2 { font-size:17px; margin:44px 0 16px; }
  .ylps h3 { font-size:14px; }
  .ylps p { font-size:14px; }
  .ylps-session-grid { grid-template-columns:1fr; }
  .ylps-price-box { padding:20px; }
  .ylps-price-text { font-size:17px; }
  .ylps-apply-box { padding:24px 20px; }
  .ylps-voices { padding:14px 16px; }
}




/* -------------------- */


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

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

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