/*
Theme Name:   Nobinobi Kids Paradise
Theme URI:    https://example.com/
Author:       Your Name
Author URI:   https://example.com/
Description:  「のびのびキッズパラダイス」イベントサイト用オリジナルテーマ。管理画面(外観 > カスタマイズ)からプラグインなしで全セクションを編集できます。出店者・協賛企業は投稿タイプとして管理します。
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  nobinobi
*/

/* ==========================================================
   基本設定・変数
   ========================================================== */
:root{
  --color-bg:            #ffffff;
  --color-bg-soft:       #ffffff;
  --color-dark:          #17181a;
  --color-text:          #262523;
  --color-text-soft:     #767267;
  --color-accent:        #2f8ea3;
  --color-accent-dark:   #1f6b7a;
  --color-accent-light:  #6fb7c4;
  --color-accent-pale:   #d7e7ea;
  --color-navy:          #16374b;
  --color-orange:        #c8620f;
  --color-line:          #e5e1d6;

  --font-serif: 'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
  --font-sans:  'Noto Sans JP', sans-serif;
  --font-en:    'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;

  --max-width: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; }
body{
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
svg{ display:block; }
.wrap{ max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.en{ font-family:var(--font-en); }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:9999; }
.skip-link:focus{ left:10px; top:10px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-en); font-size:14px; letter-spacing:.16em;
  color:var(--color-accent); font-weight:700; text-transform:uppercase;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--color-accent); color:#fff;
  padding:13px 30px; border-radius:999px;
  font-size:13.5px; letter-spacing:.05em; font-weight:700;
  border:none; cursor:pointer; transition:.25s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--color-accent-dark); transform:translateY(-2px); color:#fff; }
.btn .arrow{ transition:.25s ease; display:inline-block; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn.line{ background:#06c755; }
.btn.line:hover{ background:#05a648; }

.section-label{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.section-label svg{ width:20px; height:20px; stroke:var(--color-accent); }

/* ================= HEADER / HERO ================= */
header.site-header{ position:relative; color:#fff; overflow:hidden; }
.hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  background-color:#111;
}
.hero-bg-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,8,.5) 0%, rgba(8,9,8,.15) 38%, rgba(8,9,8,.6) 100%);
  z-index:2;
}
.hero-bg-media img, .hero-bg-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; z-index:1;
}
.hero-bg-media img.is-active{ opacity:1; }
.hero-bg-media video{ opacity:1; }

.hero-center{
  position:relative; z-index:3; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px 20px 50px;
}
.hero-logo-image{ max-height:150px; width:auto; margin:0 auto; }
.hero-logo{
  background:var(--color-dark); color:#fff; padding:22px 38px 24px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-logo .badge-icon{ width:52px; height:34px; }
.hero-logo .badge-icon path{ stroke:#fff; fill:none; stroke-width:1.4; }
.hero-logo .badge-text{ font-family:var(--font-serif); font-weight:800; text-align:center; line-height:1.5; }
.hero-logo .badge-text .l1{ font-size:11px; letter-spacing:.22em; display:block; }
.hero-logo .badge-text .l3{ font-size:19px; letter-spacing:.14em; display:block; margin-top:3px; }

.hero-tagline{ margin-top:30px; font-family:var(--font-serif); font-weight:700; font-size:clamp(22px,3.4vw,32px); letter-spacing:.1em; }
.hero-tagline .line2{ position:relative; display:inline-block; margin-top:10px; }
.hero-tagline .line2 .mark{
  position:absolute; left:-4px; right:-4px; bottom:2px; height:38%;
  background:var(--color-orange); opacity:.85; z-index:-1; transform:skewX(-3deg);
}
.hero-subcopy{ margin-top:18px; font-size:14.5px; letter-spacing:.08em; color:#f1efe9; }
.hero-badges{ display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap; align-items:center; }
.hero-badge{ border:1px solid rgba(255,255,255,.7); border-radius:999px; padding:8px 20px; font-size:12.5px; letter-spacing:.1em; font-weight:700; }
.sponsor-badge{ display:flex; align-items:center; gap:14px; background:#fff; color:var(--color-text); border-radius:999px; padding:10px 26px 10px 20px; box-shadow:0 4px 16px rgba(0,0,0,.18); }
.sponsor-badge img{ height:46px; width:auto; display:block; }
.sponsor-badge .label{ font-size:10.5px; letter-spacing:.14em; color:var(--color-text-soft); font-weight:700; }

/* 出店者募集ボタン(URL未設定の間は header.php 側で非表示) */
.hero-recruit-btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px;
  background:var(--color-orange); color:#fff; font-weight:700; font-size:15px; letter-spacing:.06em;
  padding:15px 36px; border-radius:999px; box-shadow:0 8px 24px rgba(200,98,15,.4);
  animation:recruit-pulse 2.2s ease-in-out infinite;
}
.hero-recruit-btn:hover{ background:#a84e0a; }
.hero-recruit-btn .arrow{ transition:.2s ease; }
.hero-recruit-btn:hover .arrow{ transform:translateX(4px); }
@keyframes recruit-pulse{
  0%, 100% { box-shadow:0 8px 24px rgba(200,98,15,.4); }
  50% { box-shadow:0 8px 30px rgba(200,98,15,.7); }
}

/* ヘッダーナビ(固定表示 + モバイルはハンバーガーメニュー) */
.mainnav-wrap{ position:sticky; top:0; z-index:45; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.nav-toggle{ display:none; }
nav.mainnav{ background:#fff; color:var(--color-text); }
nav.mainnav ul{ display:flex; justify-content:center; flex-wrap:wrap; }
nav.mainnav li + li{ border-left:1px solid var(--color-line); }
nav.mainnav a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 26px; font-size:13px; letter-spacing:.1em; font-weight:700;
  font-family:var(--font-en); color:#8a8578; transition:.2s;
}
nav.mainnav a:hover{ color:var(--color-accent); }

/* 出店者募集ページなど、フルヒーローを使わないページ用の簡易ヘッダー */
.site-header--simple{ background:#fff; border-bottom:1px solid var(--color-line); position:sticky; top:0; z-index:50; }
.mainnav--simple ul{ display:flex; gap:18px; flex-wrap:wrap; }
.mainnav--simple a{ padding:6px 0; font-size:12px; letter-spacing:.05em; color:var(--color-text-soft); font-family:var(--font-sans); }
.mainnav--simple a:hover{ color:var(--color-accent); }

/* ================= 汎用セクション ================= */
.section{ padding:90px 0; }
.section.soft{ background:var(--color-bg-soft); }
.section h2{ font-family:var(--font-serif); font-weight:800; font-size:clamp(24px,3vw,30px); }

/* ================= INSTAGRAM / SNS ================= */
.insta{ background:var(--color-bg-soft); padding:76px 0 70px; position:relative; }
.insta .wrap{ display:grid; grid-template-columns:1fr 1.6fr; gap:50px; align-items:center; }
.insta h3{ font-family:var(--font-en); font-weight:800; font-size:26px; margin:16px 0 16px; display:flex; align-items:center; gap:10px; }
.insta h3 .ig-icon{ width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg,#f9ce34,#ee2a7b 45%,#6228d7); flex:0 0 auto; }
.insta p{ font-size:14px; color:var(--color-text-soft); margin-bottom:22px; }
.insta-media{ border-radius:4px; overflow:hidden; aspect-ratio:16/8; }
.insta-media img{ width:100%; height:100%; object-fit:cover; }
.back-to-top{ position:absolute; right:24px; bottom:-26px; width:52px; height:52px; border-radius:50%; background:var(--color-dark); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; z-index:3; }
.reserve-tab{
  position:fixed; right:0; top:56%; transform:translateY(-50%); background:var(--color-accent-light); color:#fff; z-index:40;
  padding:20px 12px; border-radius:8px 0 0 8px; text-align:center; font-size:11px; letter-spacing:.05em; box-shadow:-4px 4px 14px rgba(0,0,0,.15); writing-mode:vertical-rl;
}
.reserve-tab strong{ font-family:var(--font-en); font-size:15px; letter-spacing:.1em; font-weight:700; }

/* ================= ABOUT ================= */
.about{ background:#fff; padding:120px 0 100px; }
.about .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.about-huge{ font-family:var(--font-en); font-weight:800; font-size:clamp(46px,6.4vw,80px); color:var(--color-accent-pale); line-height:.95; margin-bottom:14px; }
.about h2{ font-family:var(--font-serif); font-weight:800; font-size:24px; line-height:1.7; margin-bottom:16px; }
.about p{ font-size:14.5px; color:var(--color-text-soft); margin-bottom:20px; max-width:560px; }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.about-tags span{ display:inline-block; border:1px solid var(--color-accent); color:var(--color-accent); border-radius:999px; padding:7px 18px; font-size:13px; font-weight:700; }
.about-list{ list-style:none; margin:14px 0 22px; max-width:560px; }
.about-list li{ font-size:14.5px; color:var(--color-text-soft); padding-left:1.2em; position:relative; margin-bottom:6px; }
.about-list li::before{ content:"・"; position:absolute; left:0; color:var(--color-accent); }
.about-map img{ width:100%; border-radius:6px; }

/* ================= FEATURE (Main Event) ================= */
.feature-photo{ width:100%; height:50vw; max-height:520px; object-fit:cover; }
.feature-body{ padding:48px 24px 64px; max-width:var(--max-width); margin:0 auto; }
.feature-body h2{ font-family:var(--font-serif); font-weight:800; font-size:30px; margin:8px 0 18px; }
.feature-body p{ color:var(--color-text-soft); font-size:14.5px; max-width:680px; margin-bottom:24px; white-space:pre-line; }

/* ================= 2カード ================= */
.duo{ padding:70px 0 140px; background:var(--color-bg-soft); }
.duo .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:70px 50px; }
.duo-card{ position:relative; }
.duo-card.offset{ margin-top:210px; }
.duo-media{ position:relative; border-radius:8px; overflow:hidden;
  -webkit-mask-image: radial-gradient(circle 46px at 100% 100%, transparent 46px, #000 47px);
          mask-image: radial-gradient(circle 46px at 100% 100%, transparent 46px, #000 47px);
}
.duo-media img{ width:100%; height:280px; object-fit:cover; display:block; }
.duo-label{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:14px; background:#fff; padding:18px 34px 18px 16px; margin-top:-44px; border-radius:0 34px 0 0; }
.duo-label .icon{ width:34px; height:34px; }
.duo-label .icon path,.duo-label .icon rect{ stroke:var(--color-accent); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.duo-label .tag{ font-size:12px; letter-spacing:.14em; color:var(--color-accent); font-weight:700; font-family:var(--font-en); display:block; }
.duo-label h3{ font-family:var(--font-serif); font-weight:800; font-size:22px; margin-top:4px; }
.duo-card p{ font-size:14px; color:var(--color-text-soft); margin:20px 0 20px; max-width:400px; white-space:pre-line; }

/* ================= 見どころ(HIGHLIGHT) ================= */
.activity{ position:relative; min-height:600px; background-size:cover; background-position:center; display:flex; align-items:flex-end; }
.activity-card{ position:relative; z-index:2; background:#fdfcfa; border-radius:16px 16px 0 0; max-width:720px; margin:0 auto; padding:46px 44px 6px; text-align:center; transform:translateY(70px); box-shadow:0 -14px 44px rgba(0,0,0,.1); }
.activity-card h2{ font-family:var(--font-serif); font-weight:800; font-size:25px; margin:10px 0 16px; }
.activity-card p{ color:var(--color-text-soft); font-size:14.5px; margin-bottom:22px; white-space:pre-line; }
.activity-spacer{ height:100px; background:#fdfcfa; }

/* ================= 出店者紹介 ================= */
.exhibitors{ background:#fff; padding:90px 0 100px; }
.exhibitors .head{ text-align:center; margin-bottom:38px; }
.exhibitors h2{ font-family:var(--font-serif); font-weight:800; font-size:26px; margin:10px 0 12px; }
.exhibitors .lead{ font-size:14px; color:var(--color-text-soft); }
.filter-tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.filter-btn{ font-family:var(--font-sans); font-size:13px; font-weight:700; border:1px solid var(--color-line); background:#fff; color:var(--color-text-soft); padding:10px 22px; border-radius:999px; cursor:pointer; transition:.2s ease; }
.filter-btn:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.filter-btn.active{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.exhibitor-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:26px 22px; }
.exhibitor-card{ border:1px solid var(--color-line); border-radius:10px; overflow:hidden; background:#fff; transition:.25s ease; }
.exhibitor-card.hide{ display:none; }
.exhibitor-card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.08); transform:translateY(-3px); }
.exhibitor-card .thumb{ width:100%; height:140px; object-fit:cover; display:block; background:#f2f2f0; }
.exhibitor-card .body{ padding:16px 16px 20px; }
.exhibitor-card .cat{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--color-accent); background:rgba(47,142,163,.1); border-radius:999px; padding:4px 12px; margin-bottom:10px; }
.exhibitor-card h4{ font-size:15px; font-weight:700; margin-bottom:6px; line-height:1.5; }
.exhibitor-card p{ font-size:12.5px; color:var(--color-text-soft); line-height:1.7; }

/* ================= バナー2枚 ================= */
.banners{ display:grid; grid-template-columns:1fr 1fr; }
.banner{ position:relative; height:300px; color:#fff; display:flex; align-items:flex-end; padding:30px; overflow:hidden; }
.banner img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55); z-index:0; transition:.4s; background:#333; }
.banner:hover img.bg{ transform:scale(1.06); }
.banner-content{ position:relative; z-index:1; }
.banner-content .en{ font-size:27px; letter-spacing:.06em; font-weight:800; }
.banner-content .jp{ font-size:13px; letter-spacing:.14em; margin:6px 0 12px; }
.banner-content .more{ font-size:11px; letter-spacing:.14em; display:inline-flex; align-items:center; gap:6px; border-bottom:1px solid rgba(255,255,255,.6); padding-bottom:4px; }

/* ================= NEWS(投稿) ================= */
.news{ background:#fff; padding:84px 0 60px; }
.news .wrap{ display:grid; grid-template-columns:.8fr 2fr; gap:40px; }
.news-head .en{ font-family:var(--font-en); font-weight:800; font-size:30px; letter-spacing:.05em; line-height:1.15; color:var(--color-navy); }
.news-head .jp{ font-size:12.5px; color:var(--color-text-soft); margin-top:10px; letter-spacing:.1em; }
.news-item{ border-top:1px solid var(--color-line); padding:24px 0; display:flex; gap:26px; }
.news-item .date{ font-family:var(--font-en); font-size:14px; color:var(--color-text-soft); flex:0 0 100px; }
.news-item .title{ font-weight:700; font-size:13.5px; margin-bottom:10px; }
.news-item .body{ font-size:12.8px; color:var(--color-text-soft); }

/* ================= スポンサー ================= */
.sponsors{ background:#fff; padding:90px 0 100px; text-align:center; border-top:1px solid var(--color-line); }
.sponsors h2{ font-family:var(--font-serif); font-weight:800; font-size:26px; margin:10px 0 12px; }
.sponsors-lead{ font-size:14px; color:var(--color-text-soft); margin-bottom:50px; }
.sponsor-kind{ font-family:var(--font-en); font-size:12px; letter-spacing:.18em; color:var(--color-accent); font-weight:700; }
.sponsor-main{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:64px; }
.sponsor-main img{ max-height:110px; width:auto; max-width:100%; border:1px solid var(--color-line); border-radius:6px; padding:14px 22px; transition:.2s ease; }
.sponsor-main a{ display:inline-block; }
.sponsor-main a:hover img{ border-color:var(--color-accent); transform:translateY(-2px); }
.sponsor-main-desc{ max-width:560px; font-size:13.5px; color:var(--color-text-soft); text-align:center; }
.sponsor-main-photos{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; max-width:960px; width:100%; margin-top:10px; }
.sponsor-main-photos img{ width:100%; height:200px; object-fit:cover; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
@media (max-width:900px){ .sponsor-main-photos{ grid-template-columns:repeat(2, 1fr); max-width:640px; } .sponsor-main-photos img{ height:170px; } }
@media (max-width:480px){ .sponsor-main-photos{ grid-template-columns:1fr; } }
.sponsor-sub-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.sponsor-sub-grid img{ height:80px; width:auto; border:1px solid var(--color-line); border-radius:6px; padding:8px; transition:.2s ease; }
.sponsor-sub-grid a{ display:inline-block; }
.sponsor-sub-grid a:hover img{ border-color:var(--color-accent); transform:translateY(-2px); }

/* ================= アクセス ================= */
.access{ background:#fff; padding:70px 0 100px; }
.access .map-frame{ position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--color-line); }
.map-pin-card{ position:absolute; top:20px; left:20px; background:#fff; padding:10px 16px; border-radius:4px; font-size:11px; box-shadow:0 4px 14px rgba(0,0,0,.15); }
.access-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-top:34px; }
.access-bottom .logo-sm{ font-family:var(--font-serif); font-weight:800; font-size:16px; }
.access-bottom .info{ font-size:13px; color:var(--color-text-soft); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.access-bottom .info .pin{ color:var(--color-accent); font-weight:700; }

/* ================= CONTACT ================= */
.contact{ position:relative; color:#fff; text-align:center; padding:110px 24px; background-size:cover; background-position:center; }
.contact .eyebrow{ color:var(--color-accent-pale); justify-content:center; }
.contact h2{ font-family:var(--font-en); font-weight:800; font-size:clamp(30px,5vw,44px); letter-spacing:.08em; margin:14px 0 24px; }
.contact p{ max-width:620px; margin:0 auto 36px; font-size:13.5px; color:#d8d5cb; white-space:pre-line; }
.contact-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.operator-info{ display:inline-flex; align-items:center; gap:16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:14px 26px; margin-top:46px; }
.operator-info img{ height:44px; width:auto; }
.operator-info .operator-text{ text-align:left; }
.operator-info .label{ display:block; font-size:10.5px; letter-spacing:.14em; color:#c9c6bc; margin-bottom:2px; }
.operator-info strong{ font-size:15px; color:#fff; font-weight:700; }

/* ================= FOOTER ================= */
footer.site-footer{ background:var(--color-dark); color:#a9a598; padding:44px 24px 24px; }
footer .foot-top{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:24px; max-width:var(--max-width); margin:0 auto 28px; }
footer .foot-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-weight:700; font-size:14px; color:#fff; }
footer nav ul{ display:flex; flex-wrap:wrap; gap:18px 26px; font-size:12px; max-width:640px; }
footer .foot-sponsor{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:22px; }
footer .foot-sponsor img{ height:36px; width:auto; filter:invert(1) grayscale(1) brightness(1.6); }
footer .foot-sponsor a{ display:inline-block; transition:.2s ease; }
footer .foot-sponsor a:hover{ opacity:.8; }
footer .copyright{ text-align:center; font-size:10.5px; color:#66625a; letter-spacing:.05em; border-top:1px solid #2a2b27; padding-top:18px; max-width:var(--max-width); margin:0 auto; }

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .mainnav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:6px 20px; }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    background:none; border:none; font-size:22px; color:var(--color-text); cursor:pointer; order:1;
  }
  nav.mainnav{ order:2; flex:1; }
  nav.mainnav ul{
    display:none; flex-direction:column; position:absolute; left:0; right:0; top:100%;
    background:#fff; box-shadow:0 10px 20px rgba(0,0,0,.08); padding:8px 0;
  }
  .mainnav-wrap.is-open{ position:relative; }
  .mainnav-wrap.is-open nav.mainnav ul{ display:flex; }
  nav.mainnav li + li{ border-left:none; border-top:1px solid var(--color-line); }
  nav.mainnav a{ flex-direction:row; justify-content:space-between; padding:14px 24px; }
  .insta .wrap, .about .wrap, .duo .wrap, .news .wrap, .access .wrap{ grid-template-columns:1fr; }
  .banners{ grid-template-columns:1fr; }
  .reserve-tab{ display:none; }
  .activity-card{ margin:0 16px; padding:34px 24px 6px; }
  .access-bottom{ flex-direction:column; align-items:flex-start; }
  .duo-card.offset{ margin-top:0; }
  .exhibitor-grid{ grid-template-columns:repeat(2, 1fr); gap:18px 14px; }
}