/*
Theme Name: Miooooon Original
Theme URI: https://miooooon.com/
Author: miooooon
Description: 音のない応援歌 オリジナルテーマ。既存デザインを踏襲しつつ、プラグイン依存のテーマビルダーを使わずフルスクラッチで作成。
Version: 1.0
Text Domain: miooooon
*/

/* ==========================================================================
   0-A. 自前フォント（セルフホスト）
   ========================================================================== */
@font-face{
  font-family: "YasashisaGothic";
  src: url("assets/fonts/YasashisaGothic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "YasashisaGothic";
  src: url("assets/fonts/YasashisaGothicBold-V2.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "GNKiniroSanserif";
  src: url("assets/fonts/GN-Kin-iro_SansSerif.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   0-B. 変数・リセット
   ========================================================================== */
:root{
  --color-pink:        #e8537b; /* メインピンク */
  --color-pink-light:  #ffe3ec; /* 淡いピンク（背景・ホバー用） */
  --color-pink-pale:   #ffd0dd; /* 罫線・ボーダー用の淡ピンク */
  --color-mint:        #cdf1f1; /* ボタン等のアクセント */
  --color-mint-dark:   #7fd9d9;
  --color-sky:         #bbdbed; /* ヒーロー背景グラデーション上部 */
  --color-text:        #333333;
  --color-text-soft:   #686868;
  --color-white:       #ffffff;
  --font-jp: "YasashisaGothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* 本文＝やさしさゴシック */
  --font-en: "Poppins", var(--font-jp);
  --font-heading: "GNKiniroSanserif", var(--font-jp); /* 見出し＝GN-きんいろサンセリフ bold */
  --font-cute: "GNKiniroSanserif", var(--font-jp);
  --header-height: 84px;
  --header-height-sp: 64px;
  --max-width: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-height); }
body{
  margin:0;
  font-family: var(--font-jp) !important;
  color: var(--color-text);
  line-height: 1.9;
  font-size: 16px;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}
/* ↑ VK Blocksなど一部プラグインが本文のフォントを個別指定してくるため、!importantで確実に上書きしています */
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--color-pink); text-decoration:none; transition: color .2s ease, opacity .2s ease; }
a:hover{ color: #ff85a6; opacity:.85; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0 0 .6em; font-weight:700; font-family: var(--font-heading) !important; letter-spacing:.02em; }
p{ margin:0 0 1.4em; }
.entry-content h3,
.container h3{
  font-size: 1.15rem;
  color: var(--color-text);
  margin-top: 1.8em;
  display: inline-block;
  background: linear-gradient(transparent 60%, var(--color-pink-pale) 60%);
  padding: 0 3px;
}
.entry-content h4,
.container h4{
  font-size: 1.02rem;
  color: var(--color-pink);
  border-bottom: 1px dashed var(--color-pink-pale);
  display: inline-block;
  padding-bottom: 4px;
}
.container{ max-width: var(--max-width) !important; margin:0 auto !important; padding:0 28px !important; }
/* ↑ VK Blocksなどのプラグインが同じ .container というクラス名を後から読み込んで上書きしてくるため、
   ここだけ !important で確実にこちらの余白を優先させています。 */

/* ==========================================================================
   1. ヘッダー / ナビゲーション
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255,255,255,.97);
  height: var(--header-height);
  display:flex;
  align-items:center;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .3s ease, height .25s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}
.site-title{
  font-size: 1.5rem;
  font-weight:700;
  font-family: var(--font-heading);
  color: var(--color-text);
  letter-spacing:.03em;
  white-space:nowrap;
}
.site-title a{ color:inherit; }
.site-title a:hover{ opacity:.7; }

/* --- PC用ナビ --- */
.main-nav{ display:flex; }
.main-nav ul{ display:flex; align-items:center; gap: 2.2rem; }
.main-nav a{
  display:inline-block;
  position:relative;
  color: var(--color-text-soft);
  font-family: var(--font-en);
  font-weight:600;
  padding: 6px 2px;
  font-size:.98rem;
  letter-spacing:.02em;
  white-space: nowrap; /* 「About me」等の2語メニューが2段に折り返るのを防ぐ */
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:100%; height:2px;
  background: var(--color-pink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.main-nav a:hover,
.main-nav .current-menu-item > a{
  color: var(--color-pink);
  opacity:1;
}
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after{
  transform: scaleX(1);
  transform-origin: left;
}
.main-nav .sub-menu{ display:none; } /* 必要ならドロップダウン化を後で拡張 */

/* --- ハンバーガーボタン（スマホ） --- */
.nav-toggle{
  display:none;
  width:40px; height:40px;
  border:none; background:transparent;
  cursor:pointer;
  position:relative;
  z-index: 1100;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px;
  height:2px; background: var(--color-text);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle span:nth-child(1){ top:13px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:25px; }
.nav-toggle.is-active span:nth-child(1){ top:19px; transform: rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity:0; }
.nav-toggle.is-active span:nth-child(3){ top:19px; transform: rotate(-45deg); }

/* ==========================================================================
   2. ヒーロー（トップページ・切替スライダー）
   ========================================================================== */
.hero-slider{
  position:relative;
  overflow:hidden;
  background: linear-gradient(180deg, var(--color-sky) 0%, #e9f3f8 55%, #ffffff 100%);
}
.hero-slide{
  position:relative;
  display:none;
  min-height: 520px;
}
.hero-slide.is-active{ display:block; animation: heroFade .6s ease; }
@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }

.hero-slide-inner{
  max-width: var(--max-width);
  margin:0 auto;
  padding: 70px 24px 40px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: 20px;
  min-height: 520px;
}
.hero-copy{ position:relative; z-index:2; }
.hero-copy .hero-heading{
  font-family: var(--font-cute);
  font-size: 2.1rem;
  color: var(--color-text);
  margin-bottom:.4em;
}
.hero-copy .hero-sub{
  font-size: 1.05rem;
  color: var(--color-text-soft);
  margin-bottom: 1.6em;
}
.hero-btn-row{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
}
.hero-btn{
  display:inline-block;
  padding: 12px 34px;
  background: var(--color-mint);
  border: 2px solid var(--color-mint-dark);
  border-radius: 6px;
  color: var(--color-text);
  font-family: var(--font-en);
  font-weight:700;
  letter-spacing:.05em;
}
.hero-btn:hover{ background: var(--color-mint-dark); color: var(--color-text); opacity:1; }

.hero-illust{ position:relative; z-index:1; text-align:center; }
.hero-illust img{ margin:0 auto; max-height: 480px; width:auto; }

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,.75);
  color: var(--color-pink);
  font-size:1.4rem;
  cursor:pointer;
  z-index:5;
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.hero-nav:hover{ background: #fff; }
.hero-nav.prev{ left:18px; }
.hero-nav.next{ right:18px; }

.hero-dots{
  position:absolute; bottom:16px; left:0; right:0;
  display:flex; justify-content:center; gap:8px; z-index:5;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%;
  border:none; background: rgba(255,255,255,.8);
  padding:0; cursor:pointer;
}
.hero-dots button.is-active{ background: var(--color-pink); }

/* ==========================================================================
   3. コンテンツ共通パーツ
   ========================================================================== */
.section{ padding: 60px 0; }
.section-title{
  font-size: 1.6rem;
  color: var(--color-text);
  padding-bottom: 14px;
  border-bottom: 1px solid #eee;
  position:relative;
  margin-bottom: 1em;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width: 90px; height:3px;
  background: var(--color-pink);
}

/* ページ上部のピンクバナー（下層ページ用） */
.page-banner{
  background: var(--color-pink);
  color: #fff;
  text-align:center;
  padding: 24px 20px; /* 元46pxから縮小してバナーの帯を薄く */
}
.page-banner h1{
  margin:0;
  font-size: 1.5rem;
  letter-spacing:.08em;
  font-family: var(--font-heading);
}

/* ボタン（一覧タブなどにも流用） */
.btn-pill{
  display:inline-block;
  padding:8px 22px;
  border:1px solid var(--color-pink);
  border-radius: 20px;
  color: var(--color-pink);
  font-size:.9rem;
  font-weight:600;
  margin: 4px 6px;
}
.btn-pill.is-active,
.btn-pill:hover{
  background: var(--color-pink);
  color:#fff;
}

/* アコーディオンボックス（Request ページの「依頼テンプレート」のような開閉パーツ） */
.acc-item{
  border-bottom: 1px solid #eee;
}
.acc-item summary,
.acc-item .acc-head{
  list-style:none;
  cursor:pointer;
  padding: 16px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  color: var(--color-text);
}
.acc-item summary::-webkit-details-marker{ display:none; }
.acc-item .acc-icon{
  width:22px; height:22px;
  border-radius:50%;
  background: var(--color-pink-light);
  color: var(--color-pink);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
  transition: transform .2s ease;
}
.acc-item[open] .acc-icon{ transform: rotate(45deg); }
.acc-item .acc-body{ padding: 0 10px 18px; color: var(--color-text-soft); }

/* 汎用コンテンツ（page.php本文） */
.entry-content{ padding: 50px 0 80px; }
.entry-content--no-banner{ padding-top: 40px; } /* タイトルバーが無い分、上の余白だけ確保 */
.entry-content h2{
  font-size:1.4rem; padding-bottom:10px; border-bottom:1px solid #eee; position:relative; margin-top:2.2em;
}
.entry-content h2::after{
  content:""; position:absolute; left:0; bottom:-1px; width:70px; height:3px; background: var(--color-pink);
}
.entry-content a{ color: var(--color-pink); text-decoration: underline; }

/* SNSアイコン列（フッター・全ページ共通／常に横並び） */
.footer-icons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  padding: 26px 12px;
  flex-wrap: nowrap;      /* 折り返さず常に1列 */
  overflow-x: auto;       /* 万一入りきらない極端に狭い画面ではスクロールで対応 */
  -webkit-overflow-scrolling: touch;
}
.footer-icons a{ flex: 0 0 auto; line-height:0; transition: transform .2s ease; }
.footer-icons a:hover{ transform: scale(1.12); opacity:1; }
.footer-icons img{
  width:38px; height:38px;
  display:block;
}
@media (max-width: 480px){
  .footer-icons{ gap:10px; }
  .footer-icons img{ width:30px; height:30px; } /* 狭い画面はアイコンを縮小して1列を維持 */
}

/* ==========================================================================
   4. フッター
   ========================================================================== */
.site-footer{
  border-top: 3px solid var(--color-pink);
  padding: 26px 0;
  text-align:center;
  font-size:.85rem;
  color: var(--color-text-soft);
}

/* ==========================================================================
   5. レスポンシブ（スマホ）
   ========================================================================== */
@media (max-width: 1024px){
  :root{ --header-height: var(--header-height-sp); }

  .nav-toggle{ display:block; }

  .main-nav{
    position:fixed;
    top: var(--header-height-sp);
    left:0; right:0;
    max-height: calc(100vh - var(--header-height-sp));
    overflow-y:auto;
    background:#fff;
    box-shadow: 0 8px 14px rgba(0,0,0,.08);
    transform: translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .main-nav.is-open{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .main-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .main-nav li{ border-bottom:1px solid #f2f2f2; }
  .main-nav a{
    display:block;
    padding: 16px 24px;
  }
  .main-nav a::after{ display:none; }

  .hero-slide{ min-height:auto; }
  .hero-slide-inner{
    grid-template-columns: 1fr;
    padding: 40px 20px 30px;
    text-align:center;
    min-height:auto;
  }
  .hero-copy .hero-heading{ font-size:1.5rem; }
  .hero-illust img{ max-height: 300px; }
  .hero-nav{ width:36px; height:36px; font-size:1.1rem; }

  .section{ padding:40px 0; }
  .page-banner{ padding:18px 16px; }
  .page-banner h1{ font-size:1.2rem; }
}