/*
Theme Name: はまみらい
Theme URI: https://hamamirai.or.jp
Author: 一般社団法人はまみらい
Author URI: https://hamamirai.or.jp
Description: 一般社団法人はまみらいの公式サイト用テーマ。保護者と子どもの双方に向けて、明るく親しみやすいパステル・丸みデザインで構成しています。トップページ、団体概要、活動内容、お知らせ、活動レポート、お問い合わせ、申込み、寄付ページに対応。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hamamirai
Tags: custom-menu, custom-logo, featured-images, translation-ready, threaded-comments
*/

/* =========================================================
   0. フォント・カラー変数
   ========================================================= */
:root{
  --color-primary: #3fb6c9;      /* 海の青(パステル) */
  --color-primary-dark: #2a97aa;
  --color-secondary: #ffb84d;    /* 元気なオレンジ */
  --color-accent: #ff8fa3;       /* やわらかいピンク */
  --color-green: #8bd8a0;        /* やさしい緑 */
  --color-yellow: #ffe08a;
  --color-bg: #fffdf7;
  --color-bg-soft: #f4fbfc;
  --color-text: #3a3a3a;
  --color-text-light: #6b6b6b;
  --color-white: #ffffff;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 8px 24px rgba(63,182,201,0.15);
  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  --container: 1140px;
}

/* =========================================================
   1. リセット・基本
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; border-radius: var(--radius-sm); }
a{ color: var(--color-primary-dark); text-decoration:none; transition: opacity .2s ease; }
a:hover{ opacity:.75; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ line-height:1.4; margin:0 0 .6em; font-weight:700; }
p{ margin:0 0 1.2em; }
.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
button, .btn, input[type="submit"]{ font-family: var(--font-base); cursor:pointer; }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:9999; border-radius: var(--radius-sm); }
.skip-link:focus{ left:10px; top:10px; }

/* =========================================================
   2. ヘッダー
   ========================================================= */
.site-header{
  background: var(--color-white);
  position: sticky; top:0; z-index:100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px; max-width: var(--container); margin:0 auto;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img{ border-radius: 50%; max-height:56px; }
.site-title{ font-size:1.4rem; margin:0; }
.site-title a{ color: var(--color-primary-dark); }
.site-description{ font-size:.75rem; color: var(--color-text-light); margin:0; }

.main-navigation ul{ display:flex; gap:6px; flex-wrap:wrap; }
.main-navigation a{
  display:inline-block; padding:10px 18px; border-radius: 999px;
  color: var(--color-text); font-weight:700; font-size:.95rem;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a{
  background: var(--color-bg-soft); color: var(--color-primary-dark); opacity:1;
}
.menu-toggle{
  display:none; background: var(--color-primary); color:#fff; border:none;
  border-radius: var(--radius-sm); padding:10px 14px; font-weight:700;
}

@media (max-width: 860px){
  .menu-toggle{ display:inline-block; }
  .main-navigation{ display:none; width:100%; }
  .main-navigation.is-open{ display:block; }
  .header-inner{ flex-wrap:wrap; }
  .main-navigation ul{ flex-direction:column; gap:2px; padding:10px 0; }
}

/* =========================================================
   3. ヒーロー・トップページ
   ========================================================= */
.hero{
  background: linear-gradient(160deg, var(--color-bg-soft) 0%, #ffffff 60%);
  padding: 70px 24px 90px;
  position:relative; overflow:hidden;
}
.hero::before, .hero::after{
  content:""; position:absolute; border-radius:50%; opacity:.5; z-index:0;
}
.hero::before{ width:260px; height:260px; background: var(--color-yellow); top:-90px; right:-60px; }
.hero::after{ width:180px; height:180px; background: var(--color-accent); bottom:-70px; left:-40px; opacity:.35; }
.hero-inner{ position:relative; z-index:1; max-width: var(--container); margin:0 auto; text-align:center; }
.hero-eyebrow{
  display:inline-block; background: var(--color-secondary); color:#fff;
  padding:6px 18px; border-radius:999px; font-weight:700; font-size:.85rem; margin-bottom:18px;
}
.hero h1{ font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--color-primary-dark); }
.hero p.lead{ font-size:1.1rem; color: var(--color-text-light); max-width:640px; margin:0 auto 28px; }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block; padding:14px 32px; border-radius:999px; font-weight:700;
  box-shadow: var(--shadow-soft); border:none;
}
.btn-primary{ background: var(--color-primary); color:#fff; }
.btn-secondary{ background:#fff; color: var(--color-primary-dark); border:2px solid var(--color-primary); }
.btn:hover{ transform: translateY(-2px); opacity:1; filter:brightness(1.05); }

/* =========================================================
   3-1. 写真カルーセル
   ========================================================= */
.hm-carousel{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--color-bg-soft);
  max-width: 480px;
  margin: 0 auto;
}
.hm-carousel-track{
  display:flex;
  transition: transform .5s ease;
  will-change: transform;
}
.hm-carousel-slide{
  position:relative;
  flex: 0 0 100%;
  min-width:100%;
  aspect-ratio: 16 / 6;
}
@media (max-width: 780px){
  .hm-carousel-slide{ aspect-ratio: 4 / 3; }
}
.hm-carousel-slide img{
  width:100%; height:100%; object-fit:cover; border-radius:0; display:block;
}
.hm-carousel-caption{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding: 18px 28px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color:#fff; font-weight:700; font-size:1rem;
}
.hm-carousel-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  width:34px; height:34px; border-radius:50%; border:none;
  background: rgba(255,255,255,0.9); color: var(--color-primary-dark);
  font-size:.9rem; box-shadow: var(--shadow-soft); z-index:2;
}
.hm-carousel-prev{ left:10px; }
.hm-carousel-next{ right:10px; }
.hm-carousel-dots{
  position:absolute; bottom:8px; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:6px;
}
.hm-carousel-dot{
  width:7px; height:7px; border-radius:50%; border:none; padding:0;
  background: rgba(255,255,255,0.6);
}
.hm-carousel-dot.is-active{ background: var(--color-secondary); width:18px; border-radius:999px; }
@media (max-width: 620px){
  .hm-carousel{ border-radius: var(--radius-md); max-width:100%; }
  .hm-carousel-arrow{ width:30px; height:30px; }
}

/* =========================================================
   3-2. 紹介動画(YouTube埋め込み)
   ========================================================= */
.hm-video-toggle-wrap{ text-align:center; margin-bottom:24px; }
.hm-video-wrap{
  position:relative;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  background:#000;
}
.hm-video-wrap.is-hidden{ display:none; }
.hm-video-wrap iframe{
  position:absolute; top:0; left:0; width:100%; height:100%; border:0; border-radius:0;
}
@media (max-width: 620px){
  .hm-video-wrap{ border-radius: var(--radius-md); }
}

/* セクション共通 */
.section{ padding: 70px 0; }
.section-bg-soft{ background: var(--color-bg-soft); }
.section-title{ text-align:center; margin-bottom: 40px; }
.section-title .kicker{ display:block; color: var(--color-secondary); font-weight:700; font-size:.9rem; margin-bottom:8px; letter-spacing:.05em; }
.section-title h2{ font-size: clamp(1.5rem,3vw,2.2rem); color: var(--color-primary-dark); }

/* カード群 */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
@media (max-width: 900px){ .card-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-soft); display:flex; flex-direction:column;
  transition: transform .2s ease;
}
.card:hover{ transform: translateY(-4px); }
.card img{ border-radius:0; aspect-ratio: 4/3; object-fit:cover; }
.card-body{ padding: 22px; flex:1; display:flex; flex-direction:column; }
.card-body h3{ font-size:1.15rem; color: var(--color-primary-dark); }
.card-body .card-meta{ font-size:.8rem; color: var(--color-text-light); margin-bottom:8px; }
.card-body .card-excerpt{ flex:1; color: var(--color-text-light); font-size:.95rem; }
.card-tag{
  display:inline-block; background: var(--color-green); color:#1f5c34;
  border-radius:999px; padding:4px 12px; font-size:.75rem; font-weight:700; margin-bottom:10px; width:max-content;
}

/* カード風ボックス(定款・非営利ポリシー等、文章量の多いブロック用) */
.policy-card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 40px 44px;
}
.policy-card h2:first-child{ margin-top:0; }
@media (max-width: 620px){
  .policy-card{ padding: 28px 24px; border-radius: var(--radius-md); }
}

/* お知らせリスト */
.news-list{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow:hidden; }
.news-item{
  display:flex; gap:20px; align-items:baseline; padding:20px 26px; border-bottom:1px solid #f0f0f0;
  flex-wrap:wrap;
}
.news-item:last-child{ border-bottom:none; }
.news-date{ color: var(--color-primary-dark); font-weight:700; min-width:110px; }
.news-cat{ background: var(--color-bg-soft); color: var(--color-primary-dark); border-radius:999px; padding:3px 12px; font-size:.75rem; font-weight:700; }
.news-title{ flex:1; min-width:200px; }

/* about / mission セクション */
.mission-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:center; }
@media (max-width: 780px){ .mission-grid{ grid-template-columns:1fr; } }
.mission-grid img{ border-radius: var(--radius-lg); }
.mission-points{ display:grid; gap:16px; margin-top:24px; }
.mission-point{ display:flex; gap:14px; align-items:flex-start; }
.mission-point .num{
  flex-shrink:0; width:38px; height:38px; border-radius:50%; background: var(--color-secondary);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* CTA バナー */
.cta-banner{
  background: linear-gradient(120deg, var(--color-primary), var(--color-primary-dark));
  color:#fff; border-radius: var(--radius-lg); padding: 50px 40px; text-align:center;
  margin: 0 24px;
}
.cta-banner h2{ color:#fff; }
.cta-banner .btn-primary{ background:#fff; color: var(--color-primary-dark); }

/* =========================================================
   4. 固定ページ共通(団体概要・活動内容など)
   ========================================================= */
.page-header{ background: var(--color-bg-soft); padding: 50px 24px; text-align:center; }
.page-header h1{ color: var(--color-primary-dark); font-size: clamp(1.6rem,3vw,2.2rem); }
.breadcrumb{ font-size:.85rem; color: var(--color-text-light); margin-top:8px; }

.entry-content{ max-width: 820px; margin: 0 auto; padding: 60px 24px; }
.entry-content h2, .policy-card h2{ color: var(--color-primary-dark); border-left:8px solid var(--color-secondary); padding-left:14px; margin-top:2em; }
.entry-content h3, .policy-card h3{ color: var(--color-primary-dark); }
.entry-content table, .policy-card table{ width:100%; border-collapse:collapse; margin:20px 0; }
.entry-content table th, .entry-content table td, .policy-card table th, .policy-card table td{ border:1px solid #e5e5e5; padding:12px 16px; text-align:left; }
.entry-content table th, .policy-card table th{ background: var(--color-bg-soft); width:180px; }
.entry-content blockquote, .policy-card blockquote{ background: var(--color-bg-soft); border-left:6px solid var(--color-primary); padding:16px 20px; border-radius: var(--radius-sm); }
.policy-card ol{ padding-left:1.4em; }
.policy-card ol li{ margin-bottom:8px; }

/* 定款(全文)の章ごとの開閉表示 */
.teikan{ margin: 24px 0; }
.teikan-chapter{
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.teikan-chapter summary{
  cursor: pointer;
  list-style: none;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--color-primary-dark);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.teikan-chapter summary::-webkit-details-marker{ display:none; }
.teikan-chapter summary::after{
  content: "+";
  font-size: 1.2rem;
  color: var(--color-secondary);
  margin-left: 12px;
}
.teikan-chapter[open] summary::after{ content: "−"; }
.teikan-chapter-body{ padding: 4px 20px 20px; }
.teikan-chapter-body h4{ color: var(--color-primary-dark); margin-top:1.2em; margin-bottom:.3em; }
.teikan-chapter-body p{ margin: 0 0 .6em; font-size:.95rem; }
.teikan-signature{
  text-align:right; font-size:.85rem; color: var(--color-text-light); margin-top:20px;
}

/* 役員一覧 */
.officer-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:20px; margin: 24px 0; }
.officer-card{ background: var(--color-bg-soft); border-radius: var(--radius-md); padding:18px; text-align:center; }
.officer-card .role{ color: var(--color-secondary); font-weight:700; font-size:.85rem; }
.officer-card .name{ font-weight:700; margin-top:4px; }

/* =========================================================
   5. フォーム(お問い合わせ / 申込み / 寄付)
   ========================================================= */
.form-wrap{ max-width: 720px; margin: 0 auto; padding: 50px 24px 80px; }
.form-notice{
  padding:16px 20px; border-radius: var(--radius-md); margin-bottom:24px; font-weight:700;
}
.form-notice.success{ background: #e6f8ec; color:#1f5c34; }
.form-notice.error{ background: #ffeef0; color:#a3364a; }

.hm-form{ background:#fff; border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-soft); }
.hm-field{ margin-bottom: 22px; }
.hm-field label{ display:block; font-weight:700; margin-bottom:6px; }
.hm-field .required{ color: var(--color-accent); margin-left:4px; }
.hm-field input[type="text"],
.hm-field input[type="email"],
.hm-field input[type="tel"],
.hm-field select,
.hm-field textarea{
  width:100%; padding:12px 16px; border-radius: var(--radius-sm); border:2px solid #e6e6e6;
  font-family: var(--font-base); font-size:1rem; background: var(--color-bg-soft);
}
.hm-field textarea{ min-height:140px; resize:vertical; }
.hm-field input:focus, .hm-field select:focus, .hm-field textarea:focus{
  outline:none; border-color: var(--color-primary);
}
.hm-form .btn-primary{ border:none; width:100%; font-size:1.05rem; }
.hm-honeypot{ position:absolute; left:-9999px; }

.donation-box{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding:32px; margin-bottom:24px; }
.donation-box h3{ color: var(--color-primary-dark); }
.donation-methods{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.donation-method{ background: var(--color-bg-soft); border-radius: var(--radius-md); padding:20px; }

/* =========================================================
   6. サイドバー・ウィジェット
   ========================================================= */
.widget{ background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding:22px; margin-bottom:24px; }
.widget-title{ color: var(--color-primary-dark); font-size:1.05rem; border-bottom:3px solid var(--color-yellow); padding-bottom:8px; margin-bottom:14px; }
.widget ul li{ padding:6px 0; border-bottom:1px dashed #eee; }

/* =========================================================
   7. ページネーション
   ========================================================= */
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.pagination a, .pagination span{
  display:inline-block; padding:10px 16px; border-radius:999px; background:#fff; box-shadow: var(--shadow-soft);
}
.pagination .current{ background: var(--color-primary); color:#fff; }

/* =========================================================
   8. フッター
   ========================================================= */
.site-footer{ background: var(--color-primary-dark); color:#fff; margin-top:60px; }
.footer-inner{ max-width: var(--container); margin:0 auto; padding: 50px 24px 30px; display:grid; grid-template-columns: 2fr 1fr 1fr; gap:40px; }
@media (max-width: 780px){ .footer-inner{ grid-template-columns:1fr; } }
.footer-inner h4{ color: var(--color-yellow); font-size:1rem; margin-bottom:14px; }
.site-footer a{ color:#fff; }
.footer-inner p{ color: #d8f2f5; }
.site-footer ul li{ margin-bottom:8px; }
.footer-bottom{ text-align:center; padding:18px; font-size:.8rem; background: rgba(0,0,0,0.12); }

/* =========================================================
   9. その他
   ========================================================= */
.alignwide{ max-width:1000px; margin-left:auto; margin-right:auto; }
.alignfull{ width:100%; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); overflow:hidden; height:1px; width:1px; }
.wp-caption-text{ font-size:.85rem; color: var(--color-text-light); text-align:center; }