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


/* =====================================================================
   となりの英語 — V1 Header (Handwritten Warmth) · Cocoon適応版
   ===================================================================== */
:root {
  --color-teal:       #3B8775;
  --color-teal-deep:  #1F5A4C;
  --color-beige:      #F5EDE2;
  --color-cream:      #FAF6EF;
  --color-cream-warm: #F7F1E6;
  --color-salmon:     #E8A598;
  --color-blue:       #CFE0E3;
  --color-ink:        #2B3B36;
  --font-logo:   "Zen Kurenaido", "Yuji Syuku", serif;
  --font-serif:  "Shippori Mincho", "Noto Serif JP", serif;
  --tne-compact: 0;
  --tne-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── ヘッダー本体 ─────────────── */
.header {
  position: relative;
  background: linear-gradient(180deg, #FBF7F0 0%, var(--color-cream-warm) 60%, var(--color-beige) 100%) !important;
  border-bottom: 1px solid rgba(31, 90, 76, 0.1);
  overflow: hidden;
  transition: box-shadow .25s var(--tne-ease);
}
.header.is-compact {
  box-shadow: 0 2px 10px rgba(31, 90, 76, 0.08);
}

/* ── 水彩ブルーム（疑似要素）──────────────── */
.header::before,
.header::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
.header::before {
  left: 6%; top: 30%;
  width: 380px; height: 190px;
  background: radial-gradient(circle at 50% 50%,
    rgba(232,165,152,0.55) 0%,
    rgba(232,165,152,0.18) 55%,
    rgba(232,165,152,0) 100%);
}
.header::after {
  right: 6%; top: 15%;
  width: 340px; height: 170px;
  background: radial-gradient(circle at 50% 50%,
    rgba(207,224,227,0.8) 0%,
    rgba(207,224,227,0.25) 60%,
    rgba(207,224,227,0) 100%);
}

/* ── 中身を前面へ ─────────────────────────── */
.header-in,
.logo-header,
.tagline-wrap {
  position: relative;
  z-index: 1;
}

/* ── サイトタイトル（手書き筆文字）──────────── */
.site-name-text,
.site-name a {
  font-family: var(--font-logo) !important;
  font-weight: 400 !important;
  color: var(--color-teal-deep) !important;
  letter-spacing: 0.06em;
  line-height: 1;
  font-size: calc(56px - 56px * 0.35 * var(--tne-compact));
  transition: font-size .3s var(--tne-ease);
  text-decoration: none !important;
}

/* ── キャッチフレーズ ─────────────────────── */
.tagline,
.tagline-in {
  font-family: var(--font-serif) !important;
  font-size: 12px !important;
  color: var(--color-teal-deep) !important;
  letter-spacing: 0.06em;
  line-height: 1.8;
  opacity: calc(1 - var(--tne-compact) * 1.8);
  transition: opacity .25s var(--tne-ease);
  margin-top: 6px !important;
}

/* ── ナビ（グローバルメニュー）──────────── */
#navi .navi-in > .menu-header > .menu-item > a {
  font-family: var(--font-serif) !important;
  color: var(--color-teal-deep) !important;
  letter-spacing: 0.08em;
}
#navi .navi-in > .menu-header > .menu-item > a:hover {
  color: var(--color-salmon) !important;
}

/* ── タブレット（768-1023px）──────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-name-text,
  .site-name a { font-size: 48px; }
}

/* ── モバイル（767px以下）──────────── */
@media (max-width: 767px) {
  .site-name-text,
  .site-name a {
    font-size: calc(36px - 36px * 0.2 * var(--tne-compact));
  }
  .tagline,
  .tagline-in {
    font-size: 9.5px !important;
  }
  .header::before { width: 240px; height: 130px; left: -20px; }
  .header::after  { width: 220px; height: 120px; right: -20px; top: 10%; }
}

@media (prefers-reduced-motion: reduce) {
  .site-name-text,
  .site-name a,
  .tagline,
  .tagline-in,
  .header { transition: none; }
}