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

/************************************
** 子テーマ用のスタイルを書く
************************************/


/* ===== 0. デザイントークン ===== */
:root {
  --mw-rose: #C4868E;
  --mw-rose-light: #d4a0a8;
  --mw-rose-pale: #e8c4c8;
  --mw-rose-cta: #B06070;
  --mw-rose-hover: #9A4E5E;
  --mw-rose-glow: rgba(176,96,112,.28);
  --mw-bg: #FFFFFF;
  --mw-bg-alt: #F5F0ED;
  --mw-bg-warm: #FBF9F7;
  --mw-text: #2D2D2D;
  --mw-sub: #888;
  --mw-border: #E8E0DB;
  --mw-shadow-xs: 0 1px 4px rgba(0,0,0,.03);
  --mw-shadow-sm: 0 2px 12px rgba(0,0,0,.05);
  --mw-shadow-md: 0 8px 32px rgba(0,0,0,.07);
  --mw-shadow-lg: 0 20px 60px rgba(0,0,0,.09);
  --mw-radius: 18px;
  --mw-radius-sm: 12px;
  --mw-ease: cubic-bezier(.4,0,.2,1);
  --mw-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ===== 1. ベース ===== */
body.front-top-page {
  background: var(--mw-bg);
  color: var(--mw-text);
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ===== 2. 共通レイアウト ===== */
.mw-inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.mw-inner--narrow { max-width: 780px; }
.mw-inner--medium { max-width: 860px; }
.mw-sec { padding: 96px 0; position: relative; overflow: hidden; }
.mw-sec--alt { background: var(--mw-bg-alt); }
.mw-sec--white { background: var(--mw-bg); }

/* セクション背景デコ */
.mw-sec--deco::before {
  content:''; position:absolute; top:-60px; right:-80px;
  width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(196,134,142,.06) 0%, transparent 70%);
  pointer-events:none;
}
.mw-sec--deco::after {
  content:''; position:absolute; bottom:-40px; left:-60px;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(196,134,142,.04) 0%, transparent 70%);
  pointer-events:none;
}

/* 波形ディバイダー */
.mw-wave { line-height:0; margin-top:-1px; position:relative; z-index:2; }
.mw-wave svg { width:100%; height:40px; display:block; }
.mw-wave--white { color:var(--mw-bg); }
.mw-wave--alt { color:var(--mw-bg-alt); }

/* ===== 3. セクション見出し ===== */
.mw-heading {
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 56px;
  position: relative;
}
.mw-heading::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  background: linear-gradient(90deg, var(--mw-rose), var(--mw-rose-light));
  margin: 16px auto 0;
  border-radius: 1px;
}

/* ===== 4. FV ===== */
.mw-fv {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mw-fv__bg {
  position: absolute;
  inset: 0;
  background-image: url('images/fv-hero.png');
  background-size: cover;
  background-position: center right;
  z-index: 0;
}
.mw-fv__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,252,250,0.97) 0%,
    rgba(255,252,250,0.90) 28%,
    rgba(255,252,250,0.45) 54%,
    rgba(255,252,250,0.0) 100%
  );
  z-index: 1;
}

/* FV 浮遊オーブ */
.mw-fv__orb {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter: blur(60px);
}
.mw-fv__orb--1 {
  width:300px; height:300px; top:10%; right:15%;
  background: radial-gradient(circle, rgba(196,134,142,.12), transparent 70%);
  animation: mwFloat 8s ease-in-out infinite;
}
.mw-fv__orb--2 {
  width:200px; height:200px; bottom:20%; right:35%;
  background: radial-gradient(circle, rgba(212,160,168,.10), transparent 70%);
  animation: mwFloat 10s ease-in-out 2s infinite reverse;
}
@keyframes mwFloat {
  0%,100% { transform: translate(0,0) }
  50% { transform: translate(-20px, -30px) }
}

.mw-fv__text {
  position: relative;
  z-index: 2;
  max-width: 540px;
  padding: 48px 24px 48px max(24px, calc((100vw - 1040px) / 2));
}
.mw-fv__h1 {
  font-size: 11px;
  font-weight: 400;
  color: var(--mw-rose);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  animation: mwFadeUp .9s var(--mw-ease) both;
}
.mw-fv__catch {
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--mw-text);
  margin-bottom: 20px;
  animation: mwFadeUp .9s var(--mw-ease) .15s both;
}
.mw-fv__sub {
  font-size: 15px;
  line-height: 1.95;
  color: var(--mw-sub);
  margin-bottom: 28px;
  animation: mwFadeUp .9s var(--mw-ease) .3s both;
}
.mw-fv__badges {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 32px;
  animation: mwFadeUp .9s var(--mw-ease) .45s both;
}
.mw-badge {
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mw-rose);
  border: 1px solid rgba(196,134,142,.4);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  transition: all .3s var(--mw-ease);
}
.mw-badge:hover {
  background: var(--mw-rose);
  color: #fff;
  border-color: var(--mw-rose);
}
.mw-fv__cta { animation: mwFadeUp .9s var(--mw-ease) .6s both; }

/* スクロールヒント */
.mw-fv__scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:3; animation: mwFadeUp 1s var(--mw-ease) 1.2s both;
}
.mw-fv__scroll-hint span {
  display:block; width:24px; height:40px;
  border:2px solid rgba(196,134,142,.4); border-radius:12px;
  position:relative;
}
.mw-fv__scroll-hint span::after {
  content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px;
  background: var(--mw-rose);
  animation: mwScrollDot 2s ease-in-out infinite;
}
@keyframes mwScrollDot {
  0%,100% { opacity:1; transform:translateX(-50%) translateY(0) }
  50% { opacity:.3; transform:translateX(-50%) translateY(12px) }
}

/* ===== 5. CTA ボタン ===== */
body.front-top-page a.mw-btn {
  display: inline-block;
  padding: 16px 40px;
  background: linear-gradient(135deg, var(--mw-rose-cta), var(--mw-rose-hover));
  background-size: 200% 200%;
  animation: mwGradShift 3s ease infinite;
  color: #fff;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform .35s var(--mw-spring), box-shadow .35s var(--mw-ease);
  box-shadow: 0 4px 20px var(--mw-rose-glow);
  position: relative;
  overflow: hidden;
}
@keyframes mwGradShift {
  0%,100% { background-position:0% 50% }
  50% { background-position:100% 50% }
}
body.front-top-page a.mw-btn::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .6s var(--mw-ease);
}
body.front-top-page a.mw-btn:hover::before { left:100% }
body.front-top-page a.mw-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 36px var(--mw-rose-glow);
  color: #fff;
}

/* 白CTAボタン（最終セクション用） */
body.front-top-page a.mw-btn--white {
  background: #fff;
  color: var(--mw-rose-cta);
  box-shadow: 0 4px 24px rgba(0,0,0,.12);
  animation: none;
}
body.front-top-page a.mw-btn--white:hover {
  color: var(--mw-rose-hover);
  box-shadow: 0 8px 40px rgba(0,0,0,.16);
}

/* ===== 6. アニメーション ===== */
@keyframes mwFadeUp {
  from { opacity:0; transform:translateY(28px) }
  to   { opacity:1; transform:translateY(0) }
}
.mw-fade {
  opacity:0; transform:translateY(24px);
  transition: opacity .7s var(--mw-ease), transform .7s var(--mw-ease);
}
.mw-fade.is-visible { opacity:1; transform:translateY(0) }
/* data-delay でスタガー */
.mw-fade[data-delay="1"] { transition-delay:.1s }
.mw-fade[data-delay="2"] { transition-delay:.2s }
.mw-fade[data-delay="3"] { transition-delay:.3s }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0s!important; transition-duration:0s!important }
  .mw-fade { opacity:1; transform:none }
}

/* ===== 7. 吹き出し ===== */
.mw-speech { display:flex; align-items:flex-start; gap:16px; margin-bottom:32px }
.mw-speech--right { }
.mw-speech__icon {
  width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border: 2.5px solid #fff;
  transition: transform .4s var(--mw-spring);
}
.mw-speech:hover .mw-speech__icon { transform:scale(1.08) }
.mw-speech__balloon {
  background: var(--mw-bg-warm);
  border: 1px solid var(--mw-border);
  border-radius: 20px 20px 20px 6px;
  padding: 16px 22px;
  font-size: 15px;
  line-height: 1.8;
  box-shadow: var(--mw-shadow-xs);
  transition: box-shadow .3s var(--mw-ease);
}
.mw-speech:hover .mw-speech__balloon { box-shadow: var(--mw-shadow-sm) }
.mw-speech--right .mw-speech__balloon { border-radius: 20px 20px 6px 20px; }
.mw-closer {
  text-align: center;
  font-size: 14px;
  color: var(--mw-sub);
  margin-top: 40px;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

/* ===== 7b. 3つのこだわり ===== */
.mw-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:center }
.mw-pillar {
  padding: 36px 24px 32px;
  border-radius: var(--mw-radius);
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(232,224,219,.5);
  transition: all .4s var(--mw-ease);
  position: relative;
}
.mw-pillar::before {
  content:''; position:absolute; inset:-1px; border-radius:var(--mw-radius);
  background: linear-gradient(135deg, rgba(196,134,142,.15), transparent 50%);
  opacity:0; transition: opacity .4s var(--mw-ease);
  z-index:-1;
}
.mw-pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--mw-shadow-md);
  background: rgba(255,255,255,.9);
  border-color: transparent;
}
.mw-pillar:hover::before { opacity:1 }
.mw-pillar__num {
  display:block; font-size: 56px; font-weight: 200;
  background: linear-gradient(135deg, var(--mw-rose), var(--mw-rose-pale));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity: 0.35; line-height: 1; margin-bottom: 16px;
}
.mw-pillar__title { font-size:16px; font-weight:700; margin:0 0 10px; letter-spacing:0.03em }
.mw-pillar__desc { font-size:14px; color:var(--mw-sub); line-height:1.8 }

/* ===== 8. カテゴリカード ===== */
.mw-cards-featured { margin-bottom:24px }
.mw-card {
  display:block; background:var(--mw-bg);
  border:none; border-radius:var(--mw-radius); overflow:hidden;
  transition: transform .4s var(--mw-ease), box-shadow .4s var(--mw-ease);
  text-decoration:none; color:inherit;
  box-shadow: var(--mw-shadow-sm);
}
.mw-card:hover { transform:translateY(-8px); box-shadow:var(--mw-shadow-lg) }
.mw-card--large { display:grid; grid-template-columns:1fr 1fr; align-items:center }
.mw-card--large .mw-card__img { aspect-ratio:auto; height:100%; min-height:300px }
.mw-card--large .mw-card__body { padding:40px }
.mw-card--large .mw-card__title { font-size:22px; margin-bottom:14px }
.mw-card--large .mw-card__desc { font-size:15px }
.mw-cards--3col { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.mw-card__img {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition: transform .6s var(--mw-ease);
}
.mw-card:hover .mw-card__img { transform:scale(1.06) }
.mw-card__body { padding:24px; position:relative }
.mw-card__tag {
  display:inline-block; padding:3px 12px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:0.1em;
  color:#fff; background:var(--mw-rose);
  margin-bottom:12px; text-transform:uppercase;
}
.mw-card__title { font-size:17px; font-weight:700; margin-bottom:10px; letter-spacing:0.02em }
.mw-card__desc { font-size:13px; color:var(--mw-sub); line-height:1.8; margin-bottom:16px }
.mw-card__link {
  font-size:13px; color:var(--mw-rose); font-weight:600;
  display:inline-flex; align-items:center; gap:4px;
  transition: gap .35s var(--mw-ease), color .35s var(--mw-ease);
}
.mw-card:hover .mw-card__link { gap:10px; color:var(--mw-rose-cta) }

/* ===== 9. 運営者 ===== */
.mw-profile { display:flex; gap:48px; align-items:flex-start; flex-wrap:wrap }
.mw-profile__left { flex:0 0 180px; text-align:center }
.mw-profile__right { flex:1 1 360px }

/* アバターリング */
.mw-avatar-ring {
  display:inline-block; position:relative; padding:4px;
  border-radius:50%;
  background: conic-gradient(var(--mw-rose), var(--mw-rose-pale), var(--mw-rose-light), var(--mw-rose));
  animation: mwRingSpin 6s linear infinite;
}
@keyframes mwRingSpin { to { transform:rotate(360deg) } }
.mw-profile__avatar {
  width:136px; height:136px; border-radius:50%; object-fit:cover;
  border: 3px solid var(--mw-bg-alt);
  display:block;
}
.mw-profile__name { font-size:18px; font-weight:700; margin:16px 0 0; letter-spacing:0.03em }
.mw-profile__role { font-size:13px; color:var(--mw-sub); margin:6px 0 0; letter-spacing:0.04em }
.mw-heading--left { text-align:left }
.mw-heading--left::after { margin:16px 0 0 }

.mw-timeline {
  list-style:none; padding-left:20px;
  border-left:2px solid var(--mw-rose-pale); margin:0 0 28px;
}
.mw-timeline li {
  padding:10px 0 10px 20px; font-size:14px; line-height:1.7; position:relative;
  transition: transform .3s var(--mw-ease);
}
.mw-timeline li:hover { transform:translateX(4px) }
.mw-timeline li::before {
  content:''; position:absolute; left:-25px; top:16px; width:10px; height:10px; border-radius:50%;
  background:var(--mw-bg-alt); border:2px solid var(--mw-rose);
  box-shadow: 0 0 0 4px rgba(196,134,142,.1);
  transition: background .3s;
}
.mw-timeline li:hover::before { background: var(--mw-rose) }
.mw-timeline__age { display:inline-block; font-size:12px; font-weight:700; color:var(--mw-rose); margin-right:10px; min-width:60px }

.mw-quote {
  border-left: 3px solid var(--mw-rose);
  background: var(--mw-bg-warm);
  padding: 24px 28px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.9;
  border-radius: 0 var(--mw-radius) var(--mw-radius) 0;
  box-shadow: var(--mw-shadow-xs);
  position: relative;
}
.mw-quote::before {
  content: '\201C'; position:absolute; top:8px; left:16px;
  font-size:48px; color:var(--mw-rose); opacity:.15; line-height:1;
  font-family: Georgia, serif;
}
.mw-profile__link {
  font-size:14px; color:var(--mw-rose); font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
  transition: gap .35s var(--mw-ease);
}
.mw-profile__link:hover { gap:10px; text-decoration:none }

/* ===== 9b. 統計数字 ===== */
.mw-stats-tabs { text-align:center }
.mw-stats-tabs input[type="radio"] { position:absolute; opacity:0; pointer-events:none }
.mw-stats-tab {
  display:inline-block; padding:10px 32px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--mw-sub);
  border:1.5px solid var(--mw-border); border-radius:999px;
  transition: all .35s var(--mw-ease);
  margin:0 6px 32px; background:transparent;
}
.mw-stats-tabs input:checked + .mw-stats-tab {
  color:#fff; background:linear-gradient(135deg, var(--mw-rose), var(--mw-rose-cta));
  border-color:transparent;
  box-shadow: 0 4px 16px var(--mw-rose-glow);
  transform: scale(1.04);
}
.mw-stats-panel { display:none }
#stats-hoiku:checked ~ .mw-stats-panel--hoiku { display:block }
#stats-kango:checked ~ .mw-stats-panel--kango { display:block }

.mw-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; margin-bottom:24px }
.mw-stat {
  padding:28px 12px; border-radius:var(--mw-radius);
  background:var(--mw-bg-warm); border:1px solid rgba(232,224,219,.6);
  transition: all .4s var(--mw-ease); position:relative; overflow:hidden;
}
.mw-stat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--mw-rose), var(--mw-rose-pale));
  transform:scaleX(0); transform-origin:left; transition: transform .5s var(--mw-ease);
}
.mw-stat:hover { transform:translateY(-4px); box-shadow:var(--mw-shadow-md) }
.mw-stat:hover::before { transform:scaleX(1) }
.mw-stat__num {
  display:block; font-size:44px; font-weight:700;
  background: linear-gradient(135deg, var(--mw-rose), var(--mw-rose-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1.2; margin-bottom:10px;
}
.mw-stat__num small { font-size:18px; font-weight:500 }
.mw-stat__label { font-size:12px; color:var(--mw-sub); line-height:1.5; letter-spacing:0.02em }
.mw-stats__source { text-align:center; font-size:11px; color:#bbb; margin-top:8px }

/* ===== 10. 最終CTA ===== */
.mw-sec--cta {
  background: linear-gradient(135deg, #2D2D2D 0%, #3d3535 50%, #4a3a3a 100%);
  color: #fff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.mw-cta-bg {
  position:absolute; inset:0; opacity:.06;
  background-image: radial-gradient(circle at 20% 50%, var(--mw-rose) 0%, transparent 50%),
                     radial-gradient(circle at 80% 50%, var(--mw-rose-pale) 0%, transparent 50%);
}
.mw-final-cta { text-align:center; position:relative; z-index:1 }
.mw-final-cta__label {
  font-size:11px; color:var(--mw-rose-light); letter-spacing:0.16em;
  text-transform:uppercase; margin-bottom:16px;
}
.mw-final-cta__copy {
  font-size:clamp(18px,3.5vw,24px); line-height:1.8; margin-bottom:32px;
  font-weight:500; color:rgba(255,255,255,.92);
}
.mw-final-cta__micro { font-size:12px; color:rgba(255,255,255,.45); margin-top:16px }

/* ===== 10b. Cocoon干渉リセット ===== */
body.front-top-page .entry-content hr,
body.front-top-page .entry-content .wp-block-separator { display:none }
body.front-top-page .entry-content a.mw-card { text-decoration:none !important }
body.front-top-page .mw-stats-tabs input[type="radio"] { position:absolute !important; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0,0,0,0) }
body.front-top-page .entry-content label.mw-stats-tab { display:inline-block !important }
#header { background:var(--mw-bg-alt) }
#header-in { padding:12px 16px }
.header-site-logo-image { max-height:80px; width:auto }
.logo-header { line-height:1 }

/* ===== 11. レスポンシブ ===== */
@media(max-width:767px) {
  .mw-fv { min-height:auto; flex-direction:column }
  .mw-fv__bg { position:relative; width:100%; height:56vw; background-position:center }
  .mw-fv__bg::after { background:linear-gradient(to bottom, rgba(255,252,250,0) 50%, rgba(255,252,250,1) 100%) }
  .mw-fv__text { padding:12px 20px 28px; text-align:center; max-width:100% }
  .mw-fv__badges { justify-content:center }
  .mw-fv__h1 { font-size:10px; margin-bottom:12px }
  .mw-fv__catch { font-size:22px; margin-bottom:12px }
  .mw-fv__sub { font-size:14px; margin-bottom:20px }
  .mw-fv__scroll-hint { display:none }
  .mw-fv__orb { display:none }
  .mw-wave svg { height:24px }
  .mw-pillars { grid-template-columns:1fr; gap:14px }
  .mw-pillar { padding:24px 20px }
  .mw-pillar__num { font-size:40px }
  .mw-card--large { grid-template-columns:1fr }
  .mw-card--large .mw-card__img { height:auto; aspect-ratio:16/9; min-height:auto }
  .mw-card--large .mw-card__body { padding:24px }
  .mw-cards-featured { margin-bottom:12px }
  .mw-cards--3col { grid-template-columns:1fr; gap:16px }
  .mw-stats { grid-template-columns:repeat(2,1fr); gap:12px }
  .mw-stat { padding:20px 8px }
  .mw-stat__num { font-size:28px }
  .mw-stat__num small { font-size:13px }
  .mw-stat::before { height:2px }
  .mw-stats-tabs { position:relative }
  .mw-stats-tabs input[type="radio"] { display:none }
  .mw-stats-tab { display:inline-block !important; margin:0 4px 16px; padding:8px 20px; font-size:13px }
  .mw-profile { flex-direction:column; text-align:center; gap:28px }
  .mw-profile__left { flex:unset; width:100% }
  .mw-profile__right { text-align:left }
  .mw-avatar-ring { padding:3px }
  .mw-profile__avatar { width:110px; height:110px }
  .mw-sec { padding:48px 0 }
  .mw-sec--cta { padding:60px 0 }
  .mw-heading { font-size:19px; margin-bottom:32px }
  .mw-speech { gap:10px; margin-bottom:24px }
  .mw-speech__icon { width:44px; height:44px }
  .mw-speech__balloon { padding:12px 16px; font-size:14px; border-radius:16px 16px 16px 4px }
  .mw-speech--right .mw-speech__balloon { border-radius:16px 16px 4px 16px }
  .mw-closer { font-size:13px; margin-top:28px }
  .mw-final-cta__copy { font-size:16px }
  .header-site-logo-image { max-height:56px }
  #header-in { padding:8px 16px }
  .mw-quote { padding:18px 20px; font-size:14px }
  .mw-card__body { padding:18px }
  .mw-card__title { font-size:15px }
  body.front-top-page a.mw-btn { padding:14px 32px; font-size:14px }
}