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

/************************************
** 子テーマ用のスタイルを書く
************************************/
  <style>
    .mmu-intro-page {
      --mmu-blue: #A7C7E7;
      --mmu-lavender: #C8A2C8;
      --mmu-pink: #FFD1DC;
      --mmu-ink: #6f7392;
      --mmu-text: #7b7f9b;
      --mmu-line: rgba(150, 160, 200, 0.28);
      --mmu-white: rgba(255,255,255,0.78);
      font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
      color: var(--mmu-ink);
      background: linear-gradient(135deg, #fbf8fc 0%, #f6f8fc 50%, #fcf7fa 100%);
      padding: 0;
      margin: 0;
    }
    .mmu-intro-page * { box-sizing: border-box; }
    .mmu-intro-wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 20px 90px;
    }
    .mmu-intro-hero {
      position: relative;
      min-height: 78vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background:
        linear-gradient(to bottom, rgba(240,244,251,0.18), rgba(248,242,248,0.22)),
        url('https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat;
      border-radius: 0 0 90px 90px;
    }
    .mmu-intro-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(255,255,255,0.08), rgba(255,255,255,0.18) 45%, rgba(248,247,251,0.88) 100%);
    }
    .mmu-intro-hero-inner {
      position: relative;
      z-index: 1;
      padding: 60px 20px;
      max-width: 900px;
    }
    .mmu-intro-title {
      margin: 0;
      font-size: clamp(42px, 7vw, 78px);
      line-height: 1.06;
      letter-spacing: 0.02em;
      color: #ffffff;
      text-shadow: 0 3px 24px rgba(132, 126, 162, 0.24);
      font-weight: 400;
    }
    .mmu-intro-title .small {
      font-style: italic;
  </style>

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

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

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