/* =========================================
   Tokens
========================================= */
:root{
  --text:#1a1a1a;
  --muted:#6b7280;
  --card:#F8FAFC;
  --accent:#60A5FA;
  --accent-pink:#F472B6;
  --accent-green:#34D399;
  --brand:#111827;
  --ring:rgba(96,165,250,.35);

  /* Layout */
  --header-h:64px;

  /* Buttons */
  --btn-radius:.9rem;
  --btn-shadow:0 6px 18px rgba(59,130,246,.25);
  --btn-border:rgba(17,24,39,.16);
  --btn-text:#0f172a;
  --btn-h-pc:50px;  /* 外側高さ（padding込み） */
  --btn-h-sp:48px;
}

/* =========================================
   Base
========================================= */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans JP,Meiryo,sans-serif;
  color:var(--text);
  background:#fff;
}
img,svg{ max-width:100%; height:auto; display:block; }
section[id]{ scroll-margin-top:var(--header-h); }

/* =========================================
   Header
========================================= */
.site-header{
  position:sticky; top:0; z-index:50; width:100%;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(0,0,0,.05);
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  height:var(--header-h);
}
.header-inner{
  max-width:1080px; margin:0 auto;
  height:var(--header-h);
  padding:0 .75rem;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.logo img{ height:36px; width:auto; }
.logo .brand{ font-weight:800; font-size:1.2rem; color:#1e293b; letter-spacing:.03em; }
.nav{ display:flex; gap:1.2rem; }
.nav a{ font-weight:600; color:#374151; text-decoration:none; transition:color .2s ease; }
.nav a:hover{ color:#3b82f6; }

/* Mobile header */
@media (max-width:640px){
  :root{ --header-h:56px; }
  .nav{ display:none; }
  .header-inner{ justify-content:center; }
  .logo img{ height:28px; }
  .logo .brand{ font-size:1rem; letter-spacing:.02em; }
}

/* =========================================
   Hero
========================================= */
.hero-header img{ width:100%; height:auto; object-fit:cover; }

/* =========================================
   Catalog
========================================= */
.catalog{
  display:grid; grid-template-columns:1fr;
  gap:1.5rem; padding:2rem 1rem;
  max-width:1080px; margin:0 auto;
}
@media (min-width:680px){ .catalog{ grid-template-columns:repeat(2,1fr); } }

.catalog-card{
  background:#fff; border-radius:1rem; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  border:1px solid #eef2f7;
  transition:transform .2s ease, box-shadow .2s ease;

  /* ボタンを下端に寄せるための縦レイアウト */
  display:flex; flex-direction:column;
}
.catalog-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.08); }

.img-wrap{ position:relative; aspect-ratio:16/9; background:#f3f4f6; }
.img-wrap img{ width:100%; height:100%; object-fit:cover; }
.donation-badge{
  position:absolute; top:.75rem; left:.75rem;
  font-size:.9rem; font-weight:700; color:#fff;
  padding:.4rem .6rem; border-radius:.6rem;
  backdrop-filter:saturate(150%) blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.badge-green{ background:linear-gradient(135deg,var(--accent-green),#10b981); }
.badge-pink{  background:linear-gradient(135deg,var(--accent-pink),#ef5aa4); }

.card-body{
  padding:1rem 1rem 1.2rem;
  display:flex; flex-direction:column; flex:1 1 auto;
}
.title{
  margin:0 0 .35rem; font-size:1.05rem;
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.title .jp{ font-weight:800; color:#111827; }
.title .en{ font-weight:600; color:var(--muted); font-size:.95em; }
.desc{ margin:.35rem 0 0; color:#374151; line-height:1.7; font-size:.95rem; }

.actions{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem;
  margin-top:auto; /* ← 下端へ */
}
/* カタログのボタンは縮ませず1行確保（高さは .btn--lg に委譲） */
.actions .btn{
  flex:0 0 auto;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis;
}

/* =========================================
   Button System (Unified)
========================================= */
.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; font-weight:700; text-decoration:none; cursor:pointer; user-select:none;
  border-radius:var(--btn-radius); border:1px solid transparent;
  line-height:1.2; white-space:normal; text-align:center; vertical-align:middle;
  padding:.7rem 1.2rem; font-size:1rem;
  transition:transform .04s ease, opacity .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-sizing:border-box; /* height に padding を含める */
}
.btn:focus{ outline:none; }
.btn:focus-visible{ box-shadow:0 0 0 3px var(--ring); }
.btn:active{ transform:translateY(1px); }
.btn[disabled], .btn.is-disabled{ opacity:.55; cursor:not-allowed; pointer-events:none; }

/* Variants */
.btn--primary{
  background:linear-gradient(135deg,var(--accent),#3b82f6);
  color:#fff; border-color:transparent; box-shadow:var(--btn-shadow);
}
.btn--primary:hover{ opacity:.95; }
.btn--primary:active{ opacity:.9; }

.btn--ghost{
  background:transparent; color:var(--brand); border:1px solid var(--btn-border);
}
.btn--ghost:hover{ background:rgba(17,24,39,.04); }

.btn--outline{
  background:transparent; color:var(--brand); border-color:#3b82f6;
}
.btn--outline:hover{ background:rgba(59,130,246,.08); }

.btn--subtle{ background:#eef2ff; color:#1e293b; border-color:transparent; }
.btn--subtle:hover{ background:#e0e7ff; }
.btn--danger{
  background:linear-gradient(135deg,#f87171,#ef4444);
  color:#fff; border-color:transparent; box-shadow:0 6px 18px rgba(239,68,68,.25);
}
.btn--danger:hover{ opacity:.95; }

/* Sizes */
.btn--sm{ font-size:.95rem; padding:.55rem .9rem; border-radius:.7rem; }
.btn--md{ /* default */ }
.btn--lg{
  font-size:1.05rem;
  height:var(--btn-h-pc);       /* 外側高さ（padding込み） */
  min-height:0;                 /* min-heightを無効化 */
  padding:.8rem 1.2rem;         /* 統一パディング */
  border-radius:1rem;
}

@media (max-width:640px){
  .btn--lg{ height:var(--btn-h-sp); }
}

/* Helpers */
.btn--block{ display:flex; width:100%; }
.btn--full{ width:100%; }
.btn .btn__icon{ display:inline-flex; align-items:center; justify-content:center; line-height:0; flex:0 0 auto; }
.btn .btn__icon--left{ margin-right:.35rem; }
.btn .btn__icon--right{ margin-left:.35rem; }

/* =========================================
   About
========================================= */
#about{
  padding:clamp(2rem,3vw,3rem) 1rem;
}
#about .about-wrap{
  max-width:980px;
  margin:0 auto;
  background:var(--card);
  border-radius:1.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  border:1px solid rgba(17,24,39,.06);
  padding:clamp(1.5rem,3vw,2.5rem);
  padding-bottom:1rem;
}
#about .about-head{
  text-align:center;
  margin-bottom:1.5rem;
}
#about h1.about-title{
  margin:0 0 .75rem;
  font-size:clamp(1.4rem,3vw,1.8rem);
  font-weight:800;
  color:var(--brand);
  line-height:1.6;
  letter-spacing:.02em;
}
#about h2.about-sub{
  margin:0 0 .25rem;
  font-size:clamp(1.4rem,2.2vw,1.6rem);
  color:var(--brand);
  letter-spacing:.02em;
  opacity:.9;
}
#about .about-lead{
  margin:.5rem auto 0;
  max-width:700px;
  color:var(--text);
  line-height:1.8;
  font-size:.95rem;
}

/* Aboutセクション内の注釈（※行） */
#about .about-note{
  font-size: 0.85rem;
  color: var(--text-subtle, #6b7280);
  line-height: 1.6;
  margin-top: 0.5rem;
  display: block;
}

/* スマホ（～480px）での行間最適化 */
@media (max-width: 480px){
  #about .about-note{
    line-height: 1.45;   /* 少し詰めて読みやすく */
    font-size: 0.83rem;  /* スマホでは気持ち小さく */
    margin-top: 0.4rem;
  }

  #about .about-lead{
    line-height: 1.75;   /* 本文も少し読みやすく最適化 */
  }
}

/* =========================================
   Donation
========================================= */
#donation{ padding:clamp(2rem,3vw,3rem) 1rem; }
#donation .donation-wrap{
  max-width:980px; margin:0 auto; background:var(--card);
  border-radius:1.5rem; box-shadow:0 10px 30px rgba(0,0,0,.06);
  border:1px solid rgba(17,24,39,.06);
  padding:clamp(1.5rem,3vw,2.5rem);
}
#donation .donation-head{ text-align:center; margin-bottom:1.5rem; }
#donation h2{
  margin:0 0 .25rem; font-size:clamp(1.6rem,2.8vw,2rem);
  color:var(--brand); letter-spacing:.02em;
}
#donation .donation-lead{ margin:0 auto; max-width:700px; color:var(--text); line-height:1.8; }

/* Steps */
#donation .donation-steps{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,2vw,1rem); margin:1.2rem 0 1.6rem; padding:0; list-style:none;
}
#donation .step{
  background:#fff; border-radius:1rem; padding:1rem; text-align:center;
  border:1px solid rgba(17,24,39,.06);
}
#donation .step-icon{
  width:64px; height:64px; margin:0 auto .5rem;
  display:grid; place-items:center; color:var(--accent);
  background:rgba(96,165,250,.12); border-radius:999px;
}
#donation .step h3{ margin:.4rem 0 .25rem; font-size:1rem; color:var(--brand); }
#donation .step p{ margin:0; color:var(--muted); font-size:.95rem; }

/* Box */
#donation .donation-box{
  background:#fff; border:1px solid rgba(17,24,39,.08);
  border-radius:1rem; padding:1.2rem; margin:.6rem 0 1rem;
}
#donation .donation-box h3{ margin:.2rem 0 .6rem; font-size:1.1rem; color:var(--brand); }
#donation .donation-note{ margin:.4rem 0 1rem; color:var(--text); line-height:1.7; }

/* CTA row: equal height / center */
#donation .donation-cta{
  display:flex; gap:.75rem; align-items:stretch; flex-wrap:wrap; margin-top:.75rem;
}
#donation .donation-cta .btn{
  flex:1 1 280px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--btn-h-pc); padding:.8rem 1.2rem; white-space:normal; text-align:center;
}
#donation .donation-cta .btn > *{ line-height:1; display:inline-flex; align-items:center; }

@media (max-width:900px){
  #donation .donation-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  #donation .donation-cta .btn{ flex:1 0 100%; height:var(--btn-h-sp); }
}
@media (max-width:480px){
  #donation .donation-steps{ grid-template-columns:1fr; }
  #donation .donation-lead{ font-size:.98rem; }
  #donation .step p{ font-size:.98rem; line-height:1.65; }
}

#donation .donation-bullets{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text, #1a1a1a);
}
#donation .donation-bullets li{
  margin: .35rem 0;
}

/* =========================================
   Footer
========================================= */
.site-footer {
  background: #F8FAFC;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
  padding: 2rem 1rem;
  color: #1a1a1a;
  font-size: 0.95rem;
}

.footer-inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 1100px;
  margin: 0 auto;
}

.footer-brand .brand-name {
  font-weight: bold;
  font-size: 1.1rem;
  color: #111827;
  margin-bottom: 0.3rem;
}

.footer-brand .brand-desc {
  color: #6b7280;
  line-height: 1.6;
}

.footer-nav h3,
.footer-info h3 {
  font-size: 1rem;
  margin-bottom: 0.8rem;
  color: #111827;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li {
  margin-bottom: 0.5rem;
}

.footer-nav a {
  color: #60A5FA;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #60A5FA;
}

.footer-nav a:visited {
  color: #60A5FA;
  text-decoration: none;
}

.footer-info p {
  margin: 0.3rem 0;
  line-height: 1.5;
}

.footer-info a {
  color: #60A5FA;
  text-decoration: none;
}

.footer-info a:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  margin-top: 2rem;
  padding-top: 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
}



.ppd-card {
  display: inline-block;
  width: fit-content;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  max-width: 100%;
  background: #F8FAFC;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15,23,42,.07);
  padding: 16px;
  border: 1px solid rgba(17,24,39,.06);
}

.ppd-fixed-top-right {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
}

.ppd-kv {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ppd-kv b {
  font-size: 1rem;
}

.ppd-kv small {
  color: #6b7280;
}

.ppd-big {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
}

.ppd-note {
  font-size: 0.8rem;
  color: #4B5563;
  margin-top: 4px;
}

.ppd-button-wrapper {
  text-align: center;
  margin-top: 16px;
}

.ppd-more-button {
  display: inline-block;
  padding: 8px 16px;
  font-size: 0.85rem;
  background-color: #2563EB;
  color: #fff;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background-color 0.2s ease;
  white-space: nowrap;
  max-width: 100%;
}

.ppd-more-button:hover {
  background-color: #1E40AF;
}

.ppd-amount-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ppd-inline-button {
  padding: 5px 20px;
  font-size: 0.8rem;
  border-radius: 6px;
  line-height: 1;
  height: auto;
  margin: 0;
}


@media (max-width: 600px) {
  .ppd-fixed-top-right {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 8px 16px;
    box-sizing: border-box;
  }

  .ppd-card {
    width: 100%;
    border-radius: 0;
    text-align: center;
  }

  .ppd-kv {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
  }

  .ppd-kv b {
    font-size: 0.9rem;
  }

  .ppd-big {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  .ppd-note {
    font-size: 0.75rem;
    text-align: center;
  }

  .ppd-more-button {
    font-size: 0.8rem;
    padding: 6px 12px;
  }

  .ppd-amount-row {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

}