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

/＊ ＝＝＝＝＝ BEGIN： Chamiel 土台 ＝＝＝＝＝ ＊/
/* hr/区切りは使わない方針→リセット */
.entry-content .wp-block-separator,
.entry-content hr.wp-block-separator{ border:0 !important; height:0 !important; background:none !important; margin:0 !important; }

/* 定番：左ラベル＋右本文（カラム不使用） */
.tool-line{ display:flex; align-items:flex-start; gap:2em; padding:16px 0; border-bottom:1px solid var(--line); line-height:1.9; }
.tool-line strong{ color:var(--brand); font-weight:700; min-width:140px; display:inline-block; }
.tool-line:last-child{ border-bottom:none; }
@media (max-width:767px){ .tool-line{ flex-direction:column; gap:6px; } .tool-line strong{ min-width:auto; } }
/* ===== END: Chamiel 土台 ===== */

/*全ページ共通 h1 ﾌｫﾝﾄ､ｶﾗｰ指定 */
h1 {
  font-family: 'Noto Serif JP', serif !important;
  color: #370000 !important;
}

/* FV PC  */
.wp-block-cover.hero{
  min-height: clamp(560px, 80svh, 920px) !important; /* 画面に応じて 560px〜920pxの範囲で確保 */
  background-size: cover !important;
  background-position: center !important;
}
.entry-content .wp-block-cover.hero h1,
.wp-block-cover.hero h1,
.hero h1,
.entry-content .wp-block-cover.hero .wp-block-heading,
.wp-block-cover.hero .wp-block-heading {
  font-size: clamp(56px, 6vw, 104px); !important;
  line-height: 1.15 !important;
  font-weight: 700;
  margin-bottom: 16px;
  white-space: nowrap !important;   /* ← 常に折り返し禁止 */
  letter-spacing: .02em;
	text-align: center !important;
}

.entry-content .wp-block-cover.hero p,
.wp-block-cover.hero p,
.hero p {
  font-size: clamp(24px, 3.2vw, 34px) !important;
  line-height: 1.6 !important;
  margin-bottom: 12px;
  font-family: 'Noto Serif JP', serif !important;
  color: #370000 !important;
	text-align: center !important;
}

/* ===== FV：スマホ用（≤480px）を1つに統合 ===== */
@media (max-width: 480px){

  /* 文字サイズ：1行キープ用に控えめ */
  .hero h1{
    font-size: clamp(26px, 8.2vw, 44px) !important;
    letter-spacing: 0 !important;
  }
  .hero p{
    font-size: clamp(16px, 4.2vw, 20px) !important;
  }

  /* カバー外側（背景と高さ） */
  .wp-block-cover.hero{
    display: flex !important;
    /* 先にvhでフォールバック、svhで上書き（iOS対策） */
    min-height: 70vh !important;
    min-height: 70svh !important;

    background-size: contain !important;      /* びよーん防止：全体を収める */
    background-repeat: no-repeat !important;
    background-position: center top !important;
  }

  /* カバー内側（テキスト位置） */
  .wp-block-cover.hero .wp-block-cover__inner-container{
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;               /* ちょい上寄せ */
    gap: 8px;
    min-height: inherit;
    margin: 0 auto;
    padding: clamp(24px, 8svh, 80px) 16px !important; /* 上の余白で微調整 */
    text-align: center;
  }

  /* 背景が <img> で描画されるテーマ向け */
  .wp-block-cover.hero img.wp-block-cover__image-background{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  /* 背景が <span style="background-image:…"> のテーマ向け */
  .wp-block-cover.hero .wp-block-cover__image-background{
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
  }
}

/* FVの下にある紹介文 */
.intro-text p:first-of-type {
  font-size: clamp(20px, 3.5vw, 28px); /* 一番最初だけ大きく */
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #370000;
}

 


/* 見出し水彩 */
.watercolor-heading {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.watercolor-heading::before {
  content: "";
  position: absolute;
  inset: -0.6em -1em; /* 水彩の広がり */
  z-index: -1;       /* 文字の背面へ */
  border-radius: 20px;
  background:
    radial-gradient(65% 80% at 30% 40%, rgba(231,180,170,.35), transparent 70%),
    radial-gradient(55% 65% at 70% 60%, rgba(255,218,170,.32), transparent 70%),
    radial-gradient(70% 85% at 50% 20%, rgba(205,239,210,.28), transparent 75%);
  filter: blur(2px);
}