/* ==========================================================================
   2代目社長のための社葬セミナー LP
   ========================================================================== */

:root {
  --font-serif: 'Shippori Mincho', serif;
  --font-sans: 'Zen Kaku Gothic New', sans-serif;
  --font-display: 'Cormorant Garamond', serif;

  --ink: #3B342A;
  --ink-soft: #5B5346;
  --ink-mute: #6B6152;
  --ink-faint: #8A8072;
  --gold: #9A7C38;
  --gold-strong: #C6A24E;
  --gold-deep: #A58133;
  --hairline: rgba(59, 52, 42, .1);

  --bg-canvas: #ECE5D8;
  --bg-cream: #F8F2E7;
  --bg-cream-light: #FCF8F0;
  --bg-who: #F1E9DA;
  --bg-gains: #EAE0CC;
  --bg-outline: #EFE7D6;
  --bg-footer: #3B342A;

  --pink-a: #F0D2D3;
  --pink-b: #DDA9AC;
  --green-a: #D6E0C4;
  --green-b: #A9BC8B;
  --gold-a: #E7D3A2;
  --gold-b: #C6A24E;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-canvas);
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* -----------------------------------------------------------------------
   Frame
   ----------------------------------------------------------------------- */

.lp-frame {
  background: var(--bg-cream);
  overflow: hidden;
}

.section { position: relative; overflow: hidden; }

.section__inner { position: relative; z-index: 1; }

.eyebrow {
  text-align: center;
  font-size: 11px;
  letter-spacing: .28em;
  color: var(--gold);
  font-weight: 700;
  margin: 0;
}

.section__title {
  font-family: var(--font-serif);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  line-height: 1.55;
}

.section__subtitle {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
  margin: 0 0 26px;
}

.tag {
  font-size: 12px;
  background: var(--bg-cream-light);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 7px 13px;
  border-radius: 999px;
  list-style: none;
}

/* decorative blurred blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}
.blob--gold  { background: radial-gradient(circle at 40% 40%, rgba(196,168,90,.32), transparent 68%); }
.blob--green { background: radial-gradient(circle at 40% 40%, rgba(150,175,120,.30), transparent 68%); }
.blob--pink  { background: radial-gradient(circle at 40% 40%, rgba(224,150,155,.34), transparent 68%); }

/* -----------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */

.hero {
  padding: 52px 28px 44px;
}
.blob--hero-1 { top: -30px; right: -40px; width: 220px; height: 220px; }
.blob--hero-2 { bottom: 20px; left: -60px; width: 210px; height: 210px; }
.blob--hero-3 { bottom: -40px; right: -30px; width: 180px; height: 180px; }

.hero__date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: .08em;
  color: var(--gold);
  margin: 0;
}

.hero__title-row {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}

.hero__bar {
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-strong), rgba(198,162,78,0));
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--ink);
  font-size: 34px;
  line-height: 1.4;
  margin: 0;
  letter-spacing: .02em;
}

.hero__subtitle {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--gold);
}

.hero__lead {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}

.hero__facts {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.hero__fact {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}
.hero__fact dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--gold);
  width: 44px;
  flex-shrink: 0;
}
.hero__fact dd {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0;
}
.hero__fact-divider {
  height: 1px;
  background: var(--hairline);
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */

.cta {
  display: block;
  text-align: center;
  background: linear-gradient(180deg, var(--gold-strong), var(--gold-deep));
  color: #FFF9EC;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover,
.cta:focus-visible { transform: translateY(-2px); }
.cta:active { transform: translateY(0); }

.cta--hero {
  margin: 26px auto 0;
  padding: 17px 20px;
  font-size: 16px;
  box-shadow: 0 16px 30px -14px rgba(150,110,40,.75);
}

.cta--apply {
  margin: 0 auto 24px;
  max-width: 320px;
  padding: 18px 20px;
  font-size: 16.5px;
  box-shadow: 0 18px 34px -14px rgba(150,110,40,.8);
}

/* -----------------------------------------------------------------------
   共感リード
   ----------------------------------------------------------------------- */

.lead {
  padding: 40px 26px;
  background: var(--bg-cream-light);
  text-align: center;
}
.lead__headline {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}
.lead__body {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
}

/* -----------------------------------------------------------------------
   こんな方へ
   ----------------------------------------------------------------------- */

.who { padding: 46px 24px; background: var(--bg-who); }
.blob--who { top: -30px; right: -40px; width: 180px; height: 180px; }

.who__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.who__card {
  position: relative;
  overflow: hidden;
  background: var(--bg-cream-light);
  border: 1px solid rgba(59,52,42,.07);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 16px 30px -24px rgba(90,70,40,.5);
}

.blob--card {
  top: -24px;
  right: -24px;
  width: 96px;
  height: 96px;
  filter: blur(2px);
}
.who__card .blob--pink  { background: radial-gradient(circle at 40% 40%, rgba(224,150,155,.5), transparent 70%); }
.who__card .blob--green { background: radial-gradient(circle at 40% 40%, rgba(150,175,120,.5), transparent 70%); }
.who__card .blob--gold  { background: radial-gradient(circle at 40% 40%, rgba(196,168,90,.5), transparent 70%); }

.who__num {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  margin: 0;
}
.who__num--pink { color: #C79A5A; }
.who__num--green { color: #8AA06A; }
.who__num--gold { color: #C79A5A; }

.who__title {
  position: relative;
  font-family: var(--font-serif);
  font-size: 17px;
  margin: 4px 0 8px;
  color: var(--ink);
}
.who__text {
  position: relative;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* -----------------------------------------------------------------------
   3つの見えない不安
   ----------------------------------------------------------------------- */

.worries { padding: 48px 24px; background: var(--bg-cream); }

.worries__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.worries__row {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--bg-cream-light);
  border: 1px solid rgba(59,52,42,.06);
  border-radius: 16px;
  padding: 16px 18px;
}

.worries__circle {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: #FFF;
  font-weight: 600;
}
.worries__circle--pink  { background: radial-gradient(circle at 40% 35%, var(--pink-a), var(--pink-b)); }
.worries__circle--green { background: radial-gradient(circle at 40% 35%, var(--green-a), var(--green-b)); }
.worries__circle--gold  { background: radial-gradient(circle at 40% 35%, var(--gold-a), var(--gold-b)); }

.worries__text {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
}

.worries__gift {
  margin-top: 20px;
  border: 1.5px solid rgba(184,151,74,.55);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(252,246,232,.6));
  padding: 20px 18px;
  text-align: center;
  box-shadow: 0 14px 30px -22px rgba(150,110,40,.5);
}
.worries__gift-label {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 10px;
}
.worries__gift-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.worries__gift-text {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.worries__gift-text strong { color: var(--gold); font-weight: 700; }

/* -----------------------------------------------------------------------
   得られる安心
   ----------------------------------------------------------------------- */

.gains { padding: 48px 24px; background: var(--bg-gains); }

.gains .section__title { margin: 10px 0 24px; font-size: 22px; }

.gains__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gains__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.gains__row p {
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: #453F34;
}
.gains__row strong { font-weight: 700; color: var(--ink); }

.gains__check {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-strong), var(--gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF9EC;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 16px -8px rgba(150,110,40,.7);
}

.gains__closing {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
  text-align: center;
}

.gains__themes {
  margin-top: 26px;
  border-top: 1px solid rgba(59,52,42,.12);
  padding-top: 20px;
}
.gains__themes-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold);
  font-weight: 700;
  margin: 0 0 12px;
}
.gains__tags {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* -----------------------------------------------------------------------
   主催者紹介
   ----------------------------------------------------------------------- */

.partnership { padding: 48px 24px; background: var(--bg-cream); }

.partnership__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.partnership__card {
  background: var(--bg-cream-light);
  border-radius: 18px;
  padding: 20px 20px 20px 22px;
  border-left: 4px solid;
  box-shadow: 0 14px 28px -22px rgba(90,70,40,.5);
}
.partnership__card--pink { border-left-color: var(--pink-b); }
.partnership__card--green { border-left-color: var(--green-b); }

.partnership__card-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}
.partnership__card-text {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
}

.speaker {
  margin-top: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.45));
  border: 1px solid rgba(184,151,74,.4);
  border-radius: 18px;
  padding: 18px;
}

.speaker__photo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, #EFE3CE, #EFE3CE 6px, #E7D9BF 6px, #E7D9BF 12px);
  border: 1px solid rgba(59,52,42,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 8px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.3;
  object-fit: cover;
}

.speaker__info p { margin: 0; }
.speaker__label {
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--gold);
  font-weight: 700;
}
.speaker__name {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  margin-top: 3px !important;
}
.speaker__role {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 3px !important;
}

.partnership__closing {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
  text-align: center;
}

/* -----------------------------------------------------------------------
   開催概要
   ----------------------------------------------------------------------- */

.outline { padding: 48px 24px; background: var(--bg-outline); }
.outline .section__title { margin: 10px 0 24px; font-size: 23px; }

.outline__table {
  margin: 0;
  background: var(--bg-cream-light);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(59,52,42,.07);
}

.outline__row {
  display: flex;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid rgba(59,52,42,.08);
}
.outline__row--last { border-bottom: none; }

.outline__row dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
  width: 52px;
  flex-shrink: 0;
  padding-top: 2px;
}
.outline__row dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
}
.outline__row .muted { color: var(--ink-faint); }

.map-placeholder {
  margin-top: 16px;
  height: 150px;
  border-radius: 16px;
  background: repeating-linear-gradient(45deg, #E7DCC5, #E7DCC5 10px, #EFE7D6 10px, #EFE7D6 20px);
  border: 1px solid rgba(59,52,42,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.map-placeholder__label {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .1em;
}
.map-placeholder__address {
  font-size: 12px;
  color: var(--ink-soft);
}

/* -----------------------------------------------------------------------
   申込 + QR
   ----------------------------------------------------------------------- */

.apply {
  padding: 52px 26px 44px;
  background: var(--bg-cream);
  text-align: center;
}
.blob--apply-1 { top: -40px; left: -40px; width: 190px; height: 190px; }
.blob--apply-2 { bottom: -40px; right: -40px; width: 200px; height: 200px; }

.apply__title {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 8px;
  color: var(--ink);
}
.apply__text {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 260px;
  margin: 0 auto 22px;
}
.or-divider span { flex: 1; height: 1px; background: rgba(59,52,42,.15); }
.or-divider p {
  margin: 0;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .1em;
}

.qr-placeholder {
  width: 164px;
  height: 164px;
  margin: 0 auto;
  border: 2px dashed rgba(184,151,74,.6);
  border-radius: 16px;
  background: rgba(252,248,240,.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.qr-placeholder__label {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .16em;
}
.qr-placeholder__note {
  font-size: 10.5px;
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.5;
}

.apply__note {
  margin: 16px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.7;
}

/* -----------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------- */

.site-footer {
  padding: 30px 24px;
  background: var(--bg-footer);
  text-align: center;
}
.site-footer p { margin: 0; }
.site-footer__tagline {
  font-family: var(--font-serif);
  font-size: 14px;
  color: #D9B96A;
  letter-spacing: .03em;
}
.site-footer__org {
  font-size: 12px;
  color: #CBBFA6;
  margin-top: 10px !important;
}
.site-footer__meta {
  font-size: 11px;
  color: #8C8267;
  margin-top: 8px !important;
  letter-spacing: .06em;
}

/* -----------------------------------------------------------------------
   Wider screens — center the mobile layout as a framed card
   ----------------------------------------------------------------------- */

@media (min-width: 560px) {
  body {
    padding: 48px 24px;
  }
  .lp-frame {
    max-width: 460px;
    margin: 0 auto;
    border-radius: 34px;
    box-shadow: 0 40px 90px -40px rgba(70,54,32,.6);
    border: 1px solid rgba(255,255,255,.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}