/*
Theme Name: さくらの木
Theme URI: https://example.com
Author: さくらの木
Description: 災害ボランティア団体「さくらの木」公式サイト用テーマ。被災地支援活動と桜の植樹プロジェクトを紹介します。
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sakuranoki
*/

/* ==========================================================================
   デザイントークン
   コンセプト：「嵐の後の、静かな夜明け」
   雨雲のような青灰色から、夜明けの桜色へ。安心感と再生の物語を色で語る。
   ========================================================================== */
   :root {
    /* --- カラー --- */
    --color-bg: #F6F5EF;          /* 和紙 - ベース背景 */
    --color-bg-soft: #EFEFE7;     /* 和紙よりわずかに沈んだ背景（セクション区切り用） */
    --color-ink: #2B3A36;         /* 墨緑 - 本文・見出し用のダークトーン */
    --color-ink-soft: #5B6A64;    /* 墨緑（弱） - 補助テキスト */
    --color-sakura: #D98A98;      /* 桜色 - アクセント・CTA */
    --color-sakura-deep: #B96674; /* 桜色（濃） - ホバー等 */
    --color-sora: #9FB8BB;        /* 空色 - 水・雨雲を思わせる副アクセント */
    --color-sora-soft: #DCE6E6;   /* 空色（淡） - カード背景等 */
    --color-moss: #6E8368;        /* 苔色 - 植樹・自然に関する要素 */
    --color-line: #DAD5C6;        /* 罫線色 */
    --color-white: #FFFFFF;
  
    /* --- タイポグラフィ --- */
    --font-display: "Shippori Mincho B1", "Zen Old Mincho", serif;
    --font-body: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  
    --fs-hero: clamp(2.2rem, 5vw, 4rem);
    --fs-h1: clamp(1.8rem, 3.2vw, 2.6rem);
    --fs-h2: clamp(1.4rem, 2.4vw, 1.9rem);
    --fs-h3: 1.15rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
  
    /* --- レイアウト --- */
    --container-width: 1080px;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;
    --radius: 6px;
  }
  
  /* ==========================================================================
     リセット / ベース
     ========================================================================== */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; height: auto; }
  a { color: var(--color-sakura-deep); text-decoration: none; }
  a:hover { color: var(--color-ink); }
  ul { list-style: none; margin: 0; padding: 0; }
  button, input, textarea, select { font-family: inherit; font-size: inherit; }
  
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
  }
  h1 { font-size: var(--fs-h1); letter-spacing: 0.02em; }
  h2 { font-size: var(--fs-h2); letter-spacing: 0.02em; }
  h3 { font-size: var(--fs-h3); }
  p { margin: 0 0 var(--space-2); }
  
  :focus-visible {
    outline: 3px solid var(--color-sora);
    outline-offset: 2px;
  }
  
  .container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-3);
  }
  
  .section { padding: var(--space-6) 0; }
  .section--soft { background: var(--color-bg-soft); }
  .section--ink {
    background: var(--color-ink);
    color: #EDEAE0;
  }
  .section--ink h1, .section--ink h2, .section--ink h3 { color: var(--color-white); }
  
  .eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    letter-spacing: 0.25em;
    color: var(--color-sakura-deep);
    margin-bottom: var(--space-2);
  }
  
  .lead {
    font-size: 1.05rem;
    color: var(--color-ink-soft);
    max-width: 40em;
  }
  
  /* --- ボタン --- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.85em 1.8em;
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  }
  .btn-primary {
    background: var(--color-sakura);
    color: var(--color-white);
  }
  .btn-primary:hover { background: var(--color-sakura-deep); color: var(--color-white); transform: translateY(-1px); }
  .btn-outline {
    background: transparent;
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
  .btn-outline:hover { background: var(--color-ink); color: var(--color-white); }
  .btn-outline-light {
    background: transparent;
    border-color: rgba(255,255,255,0.6);
    color: var(--color-white);
  }
  .btn-outline-light:hover { background: var(--color-white); color: var(--color-ink); }
  
  /* ==========================================================================
     ヘッダー
     ========================================================================== */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(246, 245, 239, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--color-line);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    max-width: var(--container-width);
    margin: 0 auto;
  }
  .site-logo {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
  .site-logo:hover { color: var(--color-sakura-deep); }
  .site-logo img {
    display: block;
    width: auto;
    height: 52px;
  }
  
  .main-nav ul { display: flex; gap: var(--space-4); }
  .main-nav a {
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    color: var(--color-ink);
    position: relative;
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 1px;
    background: var(--color-sakura-deep);
    transition: width 0.25s ease;
  }
  .main-nav a:hover::after { width: 100%; }
  .main-nav a.is-current { color: var(--color-sakura-deep); }
  .main-nav a.is-current::after { width: 100%; }
  .main-nav .btn { margin-left: var(--space-2); }
  
  .nav-toggle {
    display: none;
    background: none; border: none; cursor: pointer;
    color: var(--color-ink);
  }
  
  @media (max-width: 820px) {
    .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
    .main-nav.is-open { display: block; }
    .main-nav ul { flex-direction: column; padding: var(--space-3); gap: var(--space-2); }
    .nav-toggle { display: block; }
  }
/* ==========================================================================
   ヒーロー
   ========================================================================== */
   .hero {
    position: relative;
    overflow: hidden;
    min-height: 650px;
  }
  
  .hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
  
    background: linear-gradient(
      90deg,
      rgba(20, 35, 38, 0.82) 0%,
      rgba(20, 35, 38, 0.68) 35%,
      rgba(20, 35, 38, 0.25) 60%,
      rgba(20, 35, 38, 0.00) 80%
    );
  
    z-index: 1;
    pointer-events: none;
  }
  
  .hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: var(--space-6) var(--space-3);
  }
  
  .hero h1 {
    font-size: var(--fs-hero);
    max-width: 14em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  }
  
  .hero .lead {
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
    color: rgba(255, 255, 255, 0.90);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.20);
  }
  
  .hero__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  
  .hero .eyebrow {
    color: #F0A2AE;
  }
  
  .hero .btn-outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(20, 35, 38, 0.15);
  }
  
  .hero .btn-outline:hover {
    background: #fff;
    color: var(--color-ink);
  }
 
  .hero .lead { margin-top: var(--space-2); margin-bottom: var(--space-3); }
  .hero__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  
  .hero__branch {
    position: absolute;
    right: -60px;
    top: 0;
    width: 640px;
    max-width: 60vw;
    opacity: 0.9;
    z-index: 1;
  }
  .hero__branch path {
    fill: none;
    stroke: var(--color-sakura);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: draw-branch 2.4s ease forwards 0.3s;
  }
  .hero__branch circle {
    fill: var(--color-sakura);
    opacity: 0;
    animation: bloom 0.6s ease forwards;
  }
  @keyframes draw-branch { to { stroke-dashoffset: 0; } }
  @keyframes bloom { to { opacity: 0.85; } }
  @media (prefers-reduced-motion: reduce) {
    .hero__branch path { animation: none; stroke-dashoffset: 0; }
    .hero__branch circle { animation: none; opacity: 0.85; }
  }
  @media (max-width: 820px) {
    .hero__branch { display: none; }
  }

  /* ==========================================================================
     区切り（署名要素）：一枝の桜
     ========================================================================== */
  .divider-branch {
    display: flex;
    justify-content: center;
    margin: var(--space-4) 0;
    opacity: 0.6;
  }
  .divider-branch svg { width: 160px; height: auto; }
  .divider-branch path { fill: none; stroke: var(--color-moss); stroke-width: 1.2; }
  .divider-branch circle { fill: var(--color-sakura); }

  /* ==========================================================================
     カード / グリッド
     ========================================================================== */
  .grid { display: grid; gap: var(--space-3); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 820px) {
    .grid--3, .grid--2 { grid-template-columns: 1fr; }
  }

  .card {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-3);
  }

  .card__body {
    padding: 1.5rem;
  }

  .card__body h3 {
    text-align: center;
    margin-bottom: 1rem;
  }

  .card__body h3 {
    text-align: center;
  }

  .card--sora { background: var(--color-sora-soft); border-color: transparent; }
  .card__icon { width: 40px; height: 40px; margin-bottom: var(--space-2); color: var(--color-moss); }

  .section-head { max-width: 34em; margin-bottom: var(--space-4); }

  /* ==========================================================================
     タイムライン（活動実績：実際に時系列の記録なので番号ではなく年号を用いる）
     ========================================================================== */
  .timeline { position: relative; margin-top: var(--space-4); }
  .timeline::before {
    content: "";
    position: absolute;
    left: 90px;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--color-line);
  }
  @media (max-width: 640px) { .timeline::before { left: 12px; } }

  .timeline-item {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--space-3);
    position: relative;
    padding-bottom: var(--space-5);
  }
  @media (max-width: 640px) {
    .timeline-item { grid-template-columns: 24px 1fr; }
  }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-item__year {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--color-sakura-deep);
    padding-top: 0.2em;
  }
  @media (max-width: 640px) { .timeline-item__year { display: none; } }
  .timeline-item__dot {
    position: absolute;
    left: 86px;
    top: 0.4em;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--color-sakura);
    border: 2px solid var(--color-bg);
  }
  @media (max-width: 640px) { .timeline-item__dot { left: 8px; } }
  .timeline-item__body {
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    padding: var(--space-3);
  }
  .timeline-item__meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--fs-small);
    color: var(--color-ink-soft);
    margin-bottom: 0.5em;
  }
  .timeline-item__tag {
    display: inline-block;
    padding: 0.2em 0.8em;
    border-radius: 999px;
    background: var(--color-sora-soft);
    color: var(--color-ink);
    font-size: 0.8em;
  }
  .timeline-item__tag--moss { background: #E4EAE0; color: var(--color-moss); }
  
  /* --- 植樹本数カウンター --- */
  .stat-row { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-3); }
  .stat { min-width: 140px; }
  .stat__num {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--color-sakura-deep);
    line-height: 1;
  }
  .stat__label { font-size: var(--fs-small); color: var(--color-ink-soft); margin-top: 0.4em; }
  
  /* ==========================================================================
     ブログ / 記事一覧
     ========================================================================== */
  .post-list { display: grid; gap: var(--space-3); }
  .post-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-3);
    background: var(--color-white);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  @media (max-width: 640px) { .post-card { grid-template-columns: 1fr; } }
  .post-card__thumb { width: 100%; height: 100%; object-fit: cover; background: var(--color-sora-soft); }
  .post-card__body { padding: var(--space-3); }
  .post-card__date { font-size: var(--fs-small); color: var(--color-ink-soft); }
  
  .entry-content { max-width: 38em; }
  .entry-content img { border-radius: var(--radius); margin: var(--space-2) 0; }
  .entry-content h2 { margin-top: var(--space-4); }
  
  .pagination { display: flex; gap: var(--space-1); margin-top: var(--space-4); }
  .pagination a, .pagination span {
    padding: 0.5em 0.9em;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
  }
  
  /* ==========================================================================
     フォーム（問い合わせ / 寄付）
     ========================================================================== */
  .form-field { margin-bottom: var(--space-3); }
  .form-field label { display: block; margin-bottom: 0.4em; font-size: var(--fs-small); color: var(--color-ink-soft); }
  .form-field input,
  .form-field textarea,
  .form-field select {
    width: 100%;
    padding: 0.8em 1em;
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-ink);
  }
  .form-field input:focus,
  .form-field textarea:focus,
  .form-field select:focus { border-color: var(--color-sakura); }
  .form-field--radio-group { display: flex; gap: var(--space-3); flex-wrap: wrap; }
  .form-field--radio { display: flex; align-items: center; gap: 0.5em; width: auto; }
  .form-note { font-size: var(--fs-small); color: var(--color-ink-soft); }
  .form-required { color: var(--color-sakura-deep); font-size: 0.8em; margin-left: 0.4em; }
  .form-message { padding: var(--space-2) var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-3); }
  .form-message--success { background: #E4EAE0; color: var(--color-moss); }
  .form-message--error { background: #F5DEE0; color: #A13B4D; }
  
  /* ==========================================================================
     フッター
     ========================================================================== */
  .site-footer {
    background: #5A4032;
    color: #C9CFC9;
    padding: var(--space-5) 0 var(--space-3);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
  @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer-grid h3 { color: var(--color-white); font-size: var(--fs-small); letter-spacing: 0.1em; }
  .footer-grid a { color: #C9CFC9; }
  .footer-grid a:hover { color: var(--color-sakura); }
  .footer-grid ul li { margin-bottom: 0.6em; }
  .site-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: var(--space-3);
    font-size: var(--fs-small);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  
  /* ==========================================================================
     ユーティリティ
     ========================================================================== */
  .text-center { text-align: center; }
  .mt-0 { margin-top: 0; }
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--color-ink); color: var(--color-white);
    padding: 0.8em 1.2em; z-index: 1000;
  }
  .skip-link:focus { left: var(--space-2); top: var(--space-2); }
  

  /* ==========================================================================
   WordPress対応
   ========================================================================== */


/* --------------------------------------------------------------------------
   WordPress 管理バー表示時
   -------------------------------------------------------------------------- */

.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}


/* --------------------------------------------------------------------------
   WordPress投稿画像
   -------------------------------------------------------------------------- */

.post-card__thumb {
  display: block;
  overflow: hidden;
}

.post-card__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   ブログ一覧
   -------------------------------------------------------------------------- */

.post-card h2 {
  font-size: var(--fs-h2);
  margin-bottom: var(--space-1);
}

.post-card h2 a {
  color: var(--color-ink);
}

.post-card h2 a:hover {
  color: var(--color-sakura-deep);
}

.post-card__date {
  margin-bottom: 0.5rem;
}

.post-card__body > a:last-child {
  display: inline-block;
  margin-top: 0.5rem;
}

/* ==========================================================================
   寄付ページ ヒーロー
   ========================================================================== */

   .hero--donation {
    background:
      linear-gradient(
        110deg,
        #3F5050 0%,
        #687978 28%,
        #B8A5A5 55%,
        #E7C9CE 76%,
        #F6E9E7 100%
      );
  }

  .hero--donation::after {
    display: none;
  }

  .hero--donation h1 {
    color: #fff;
  }

  .hero--donation .lead {
    color: rgba(255, 255, 255, 0.92);
  }

  .hero--donation .eyebrow {
    color: #F2A6B2;
  }

  .hero--donation h1 {
    font-size: clamp(2rem, 3.3vw, 3.2rem);
    max-width: none;
    white-space: nowrap;
    line-height: 1.5;
  }

  .hero--donation .lead {
    max-width: none;
  }

  @media (max-width: 820px) {
    .hero--donation h1 {
      font-size: clamp(1.8rem, 7vw, 2.5rem);
      white-space: normal;
    }
  }


/* --------------------------------------------------------------------------
   WordPress ページネーション
   -------------------------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0.5em 0.9em;

  border: 1px solid var(--color-line);
  border-radius: var(--radius);

  background: var(--color-white);
  color: var(--color-ink);
}

.pagination .page-numbers:hover {
  border-color: var(--color-sakura);
  color: var(--color-sakura-deep);
}

.pagination .page-numbers.current {
  background: var(--color-sakura);
  border-color: var(--color-sakura);
  color: var(--color-white);
}


/* ==========================================================================
   ブログ個別記事
   ========================================================================== */

.entry-thumbnail {
  max-width: 900px;
}

.entry-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.entry-content {
  max-width: 760px;
  line-height: 2;
}

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content p {
  margin-bottom: 1.5rem;
}

.entry-content h2 {
  margin-top: 3rem;
  margin-bottom: 1.2rem;
}

.entry-content h3 {
  margin-top: 2.2rem;
  margin-bottom: 1rem;
}

.entry-content h4 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: var(--space-2) 0;
}


/* WordPress標準の引用 */

.entry-content blockquote {
  margin: 2rem 0;
  padding: 1.2rem 1.5rem;

  border-left: 4px solid var(--color-sakura);

  background: var(--color-bg-soft);
  color: var(--color-ink-soft);
}


/* WordPress標準のリスト */

.entry-content ul,
.entry-content ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: 0.5rem;
}


/* WordPress標準リンク */

.entry-content a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* --------------------------------------------------------------------------
   前の記事 / 次の記事
   -------------------------------------------------------------------------- */

.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.post-navigation > div {
  flex: 1;
}

.post-navigation > div:last-child {
  text-align: right;
}

.post-navigation a {
  color: var(--color-sakura-deep);
}

.post-navigation a:hover {
  color: var(--color-ink);
}


/* ==========================================================================
   WordPress画像配置
   ========================================================================== */

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  margin-top: 0.5rem;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}


/* ==========================================================================
   Snow Monkey Forms
   ========================================================================== */

/*
   Snow Monkey Formsが生成する入力欄を
   「さくらの木」の既存フォームデザインに合わせる
*/

.smf-form {
  width: 100%;
}


/* 各入力項目 */

.smf-item {
  margin-bottom: var(--space-3);
}


/* 項目名 */

.smf-item__label {
  margin-bottom: 0.5rem;
}

.smf-item__label__label {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  font-weight: 500;
}


/* 必須表示 */

.smf-item__label__required {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1em 0.55em;

  border-radius: 999px;

  background: var(--color-sakura);
  color: var(--color-white);

  font-size: 0.7rem;
  line-height: 1.6;
}


/* テキスト・メール・電話番号 */

.smf-form input[type="text"],
.smf-form input[type="email"],
.smf-form input[type="tel"],
.smf-form input[type="url"],
.smf-form input[type="number"],
.smf-form select,
.smf-form textarea {

  width: 100%;
  max-width: 100%;

  padding: 0.8em 1em;

  border: 1px solid var(--color-line);
  border-radius: var(--radius);

  background: var(--color-white);
  color: var(--color-ink);

  font-family: var(--font-body);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* フォーカス */

.smf-form input[type="text"]:focus,
.smf-form input[type="email"]:focus,
.smf-form input[type="tel"]:focus,
.smf-form input[type="url"]:focus,
.smf-form input[type="number"]:focus,
.smf-form select:focus,
.smf-form textarea:focus {

  outline: none;

  border-color: var(--color-sakura);

  box-shadow:
    0 0 0 3px rgba(217, 138, 152, 0.15);
}


/* テキストエリア */

.smf-form textarea {
  min-height: 180px;
  resize: vertical;
}


/* ラジオ・チェックボックス */

.smf-form input[type="radio"],
.smf-form input[type="checkbox"] {
  accent-color: var(--color-sakura-deep);
}


/* 補足文章 */

.smf-item__description {
  margin-top: 0.4rem;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}


/* --------------------------------------------------------------------------
   Snow Monkey Forms ボタン
   -------------------------------------------------------------------------- */

.smf-action {
  margin-top: var(--space-4);
}

.smf-button-control__control {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.85em 1.8em;

  border: 1px solid transparent !important;
  border-radius: 999px !important;

  background: var(--color-sakura) !important;
  color: var(--color-white) !important;

  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;

  letter-spacing: 0.08em;

  cursor: pointer;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.smf-button-control__control:hover {

  background: var(--color-sakura-deep) !important;

  transform: translateY(-1px);
}


/* 戻るボタン */

.smf-button-control__control[data-action="back"] {
  background: transparent !important;
  color: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
}

.smf-button-control__control[data-action="back"]:hover {
  background: var(--color-ink) !important;
  color: var(--color-white) !important;
}


/* --------------------------------------------------------------------------
   Snow Monkey Forms エラー
   -------------------------------------------------------------------------- */

.smf-error-messages {
  color: #A13B4D;
  font-size: var(--fs-small);
}


/* ==========================================================================
   サイトロゴ文字
   ========================================================================== */

.site-logo span {
  display: flex;
  flex-direction: column;

  font-family: var(--font-body);
  font-size: 0.68rem;

  line-height: 1.25;
  letter-spacing: 0.04em;

  color: var(--color-ink-soft);
}

.site-logo span strong {
  display: block;

  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;

  letter-spacing: 0.04em;
  color: var(--color-ink);
}


/* ==========================================================================
   スマートフォン
   ========================================================================== */

@media (max-width: 820px) {

  .section {
    padding: var(--space-5) 0;
  }

  .hero {
    min-height: 560px;
  }

  .hero__inner {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .site-logo img {
    height: 44px;
  }

  .site-logo span {
    font-size: 0.6rem;
  }

  .site-logo span strong {
    font-size: 1.05rem;
  }

  .post-navigation {
    flex-direction: column;
  }

  .post-navigation > div:last-child {
    text-align: left;
  }

}


/* --------------------------------------------------------------------------
   さらに小さいスマートフォン
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {

  .container {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

  .hero {
    min-height: 520px;
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .hero--donation h1 {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }

  .sakura-divider {
    width: 94%;
  }

}