/* ========================================
   やさしく学ぶマネー勉強会 LP
   基準幅 640px / スマホファースト
   ======================================== */

:root {
  --max-w: 40rem; /* 640px */
  --pink: #fa576f;
  --pink-border: #ffdad5;
  --pink-border-light: #fee4e7;
  --pink-footer-border: #e5887c;
  --brown: #654842;
  --green: #72c07b;
  --bg-pink: #fdf5f4;
  --bg-cream: #fffaf6;
  --bg-answer: #fef6f5;
  --bg-footer: #fef7f5;
  --bg-footer-inner: #fef6f5;
  --gray-map: #d9d9d9;
  --font-maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --space-section: clamp(2rem, 6.25vw, 3.75rem);
  --space-inline: clamp(1.25rem, 4.6875vw, 1.875rem);
  --radius-card: 3.125rem;
  --radius-pill: 6.25rem;
  --cta-h: clamp(4.5rem, 15.78vw, 6.3125rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: clamp(14px, 2.5vw, 16px);
}

.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;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--brown);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--cta-h);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.page {
  max-width: var(--max-w);
  margin: 0 auto;
  overflow-x: hidden;
}

/* ---------- FV ---------- */
.fv {
  background: var(--bg-pink);
}

.fv__hero-visual {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.fv__hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 共通カード・バッジ ---------- */
.welcome,
.overview {
  background: linear-gradient(180deg, var(--bg-pink) 66.8%, #fff 100%);
  padding: var(--space-section) var(--space-inline);
}

.card {
  position: relative;
  background: #fff;
  border: 5px solid var(--pink-border);
  border-radius: var(--radius-card);
  padding: clamp(3.5rem, 10vw, 4.06rem) var(--space-inline) var(--space-inline);
}

.badge {
  position: relative;
  background: var(--pink);
  border-radius: var(--radius-pill);
  text-align: center;
  padding: 0.55rem 1.25rem;
}

.badge--floating {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: min(21.375rem, 88%);
  z-index: 2;
}

.badge--floating::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.85rem;
  transform: translateX(-50%);
  border-left: 1.4rem solid transparent;
  border-right: 1.4rem solid transparent;
  border-top: 1.1rem solid var(--pink);
}

.badge__text {
  margin: 0;
  color: #fff;
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: clamp(1.25rem, 4.5vw, 1.81rem);
  white-space: nowrap;
}

.welcome .badge__text {
  font-size: clamp(1rem, 3.6vw, 1.4rem);
}

/* ---------- 初心者歓迎 ---------- */
.check-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.check-list li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 700;
  font-size: clamp(1.1rem, 4.1vw, 1.5rem);
  line-height: 1.5;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--green);
}

.welcome__highlight {
  border-top: 5px dashed var(--pink-border);
  padding-top: 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
}

.welcome__highlight p {
  margin: 0;
  color: var(--pink);
  font-weight: 700;
  font-size: clamp(1.25rem, 4.8vw, 1.9rem);
  line-height: 1.5;
}

.welcome__body {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 2.5vw, 0.75rem);
}

.welcome__beginner {
  flex-shrink: 0;
  width: clamp(2.5rem, 10vw, 4rem);
  height: auto;
}

.welcome__desc {
  flex: 1;
  margin: 0;
  font-size: clamp(1rem, 4.1vw, 1.4rem);
  text-align: justify;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 2px;
}

/* ---------- 開催概要 ---------- */
.overview {
  padding-top: 0;
  background: transparent;
}

.welcome .card {
  margin-bottom: clamp(2rem, 9.4vw, 3.75rem);
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-list__item {
  margin-bottom: clamp(0.75rem, 3vw, 1.25rem);
}

.info-list__item:last-child {
  margin-bottom: 0;
}

.info-list__label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.35rem;
  font-weight: 700;
  font-size: clamp(1rem, 4.4vw, 1.75rem);
  line-height: 1.4;
}

.info-list__label img {
  flex-shrink: 0;
  width: 2.125rem;
  height: 2.125rem;
  margin-top: 0.15rem;
}

.info-list__value {
  margin: 0 0 0 calc(2.125rem + 0.65rem);
  font-size: clamp(1rem, 5vw, 1.7rem);
  font-weight: 500;
  line-height: 1.5;
}

.info-list__value p {
  margin: 0;
}

.info-list__venue {
  font-weight: 600;
  font-size: clamp(1.1rem, 5.2vw, 2rem);
}

.info-list__venue-sub {
  font-weight: 600;
  font-size: clamp(1rem, 4.2vw, 1.5rem);
}

.info-list__address {
  font-size: clamp(0.85rem, 3.5vw, 1.4rem) !important;
  font-weight: 500 !important;
}

/* ---------- セクション見出し ---------- */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 2rem);
  color: var(--brown);
}

.section-title__icon {
  width: clamp(1.75rem, 5.5vw, 2.375rem);
  height: auto;
  flex-shrink: 0;
}

/* ---------- セミナー内容 ---------- */
.curriculum {
  padding: clamp(2rem, 6.25vw, 2.5rem) var(--space-inline);
}

.steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.steps__item {
  background: var(--bg-cream);
  border-radius: var(--radius-card);
  padding: var(--space-inline);
  text-align: center;
}

.steps__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: left;
  margin-bottom: 0.5rem;
}

.steps__num {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(4rem, 13vw, 5.2rem);
  height: clamp(4rem, 13vw, 5.2rem);
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-maru);
  font-weight: 700;
  line-height: 1;
}

.steps__num small {
  font-size: 0.35em;
  letter-spacing: 0.02em;
}

.steps__num {
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
}

.steps__head h3 {
  margin: 0;
  flex: 1;
  font-size: clamp(1.15rem, 5.3vw, 2.125rem);
  line-height: 1.5;
}

.steps__icon {
  display: block;
  margin: 0.5rem auto 1rem;
  width: clamp(5rem, 20vw, 7.9rem);
}

.steps__item > p {
  margin: 0;
  text-align: left;
  font-size: clamp(0.9rem, 3.75vw, 1.5rem);
  line-height: 1.5;
}

.curriculum__note {
  margin: 0;
  font-size: clamp(0.9rem, 3.75vw, 1.5rem);
  text-align: left;
  line-height: 1.5;
}

.curriculum__note strong {
  color: var(--pink);
  font-weight: 900;
}

/* ---------- 会場アクセス ---------- */
.access {
  background: var(--bg-footer);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: clamp(1.5rem, 4.7vw, 1.875rem) var(--space-inline) clamp(2rem, 6.25vw, 2.5rem);
}

.access.deco-st2 {
  border-radius: 0;
}

.card--access {
  border-color: var(--pink-border-light);
  padding: var(--space-inline);
}

.access__map {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 350;
  max-height: 21.875rem;
  margin: 1rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--gray-map);
}

.access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.btn-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: min(18.75rem, 100%);
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  background: var(--brown);
  color: #fff;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.9rem, 3.1vw, 1.25rem);
}

.btn-map::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-0.1em);
}

/* ---------- 講師紹介 ---------- */
.lecturer {
  background: var(--bg-footer);
  padding: clamp(2.5rem, 8vw, 4rem) var(--space-inline) var(--space-section);
}

.lecturer__photo-wrap {
  position: relative;
  margin-bottom: 2rem;
}

.lecturer__photo {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  object-fit: cover;
  object-position: center top;
  aspect-ratio: 580 / 500;
}

.lecturer__badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -88%);
  background: #fff;
  border: 3px solid var(--pink);
  border-radius: var(--radius-pill);
  padding: 0.35rem 2rem;
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 2rem);
  color: var(--pink);
  white-space: nowrap;
}

.lecturer__name {
  margin: 0 0 1rem;
  text-align: center;
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: clamp(1.35rem, 5vw, 2rem);
}

.lecturer__bio,
.lecturer__detail p {
  margin: 0;
  font-size: clamp(0.9rem, 3.75vw, 1.5rem);
  text-align: justify;
  line-height: 1.5;
}

.lecturer__bio {
  margin-bottom: 1.25rem;
}

.lecturer__detail {
  margin-bottom: 1rem;
}

.lecturer__detail h3 {
  margin: 0 0 0.25rem;
  font-weight: 900;
  font-size: clamp(0.9rem, 3.75vw, 1.5rem);
}

.lecturer__books {
  border: none;
  padding: var(--space-inline) var(--space-inline) 1.25rem;
  text-align: center;
}

.lecturer__books h3 {
  margin: 0 0 1rem;
  font-family: var(--font-maru);
  font-size: clamp(1.35rem, 5vw, 2rem);
}

.lecturer__book-img {
  width: min(15.375rem, 70%);
}

/* ---------- FAQ ---------- */
.faq {
  padding: clamp(2rem, 6.25vw, 2.5rem) var(--space-inline);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faq__item {
  border-radius: 1.85rem;
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.15rem 3rem 1.15rem 1.5rem;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1rem, 4.7vw, 1.875rem);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__mark {
  flex-shrink: 0;
}

.faq__toggle {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.faq__toggle::before {
  width: 0.22rem;
  height: 1.4rem;
}

.faq__toggle::after {
  width: 1.4rem;
  height: 0.22rem;
}

.faq__item[open] .faq__toggle::before {
  display: none;
}

.faq__q {
  position: relative;
}

.faq__a {
  padding: 1.15rem 1.5rem;
  background: var(--bg-answer);
  font-size: clamp(0.95rem, 4.1vw, 1.625rem);
  text-align: justify;
  line-height: 1.5;
}

.faq__a p {
  margin: 0 0 0.5em;
}

.faq__a p:last-child {
  margin-bottom: 0;
}

/* ---------- フッター ---------- */
.footer {
  background: var(--bg-footer-inner);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  padding: clamp(2rem, 6.25vw, 2.5rem) var(--space-inline) clamp(5rem, 18vw, 9rem);
}

.footer__block {
  margin-bottom: 2rem;
}

.footer__block h2 {
  margin: 0 0 1rem;
  text-align: center;
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.7vw, 1.875rem);
}

.footer__scroll {
  height: 18.75rem;
  overflow-y: auto;
  padding: var(--space-inline);
  border: 1px solid var(--pink-footer-border);
  font-size: clamp(0.8rem, 3.1vw, 1.25rem);
  line-height: 1.5;
  text-align: justify;
}

.footer__scroll p,
.footer__scroll ol {
  margin: 0 0 0.75em;
}

.footer__scroll ol {
  padding-left: 1.5em;
}

.footer__scroll--policy,
.footer__scroll--privacy {
  height: 18.75rem;
}

.policy-list--disc {
  list-style: disc;
}

.policy-list {
  margin: 0 0 0.75em;
  padding-left: 1.5em;
}

.policy-list li {
  margin-bottom: 0.35em;
}

.footer__scroll--policy p strong {
  font-weight: 700;
}

.footer__lead {
  font-size: clamp(0.95rem, 4.1vw, 1.625rem);
  text-align: justify;
  margin: 0 0 1.25rem;
}

.organizer-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.9rem, 3.75vw, 1.5rem);
}

.organizer-table th,
.organizer-table td {
  border-top: 1px solid var(--pink-footer-border);
  padding: 0.9rem 0;
  vertical-align: top;
  text-align: left;
  line-height: 1.5;
}

.organizer-table th {
  width: 6.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.footer__disclaimer {
  margin: 0 0 1.25rem;
  font-size: clamp(0.9rem, 3.75vw, 1.5rem);
  font-weight: 400;
  color: #9a8a86;
  line-height: 1.6;
  text-align: justify;
}

.footer__copy {
  margin: 0;
  color: var(--pink);
  font-size: clamp(0.8rem, 3.1vw, 1.25rem);
  text-align: center;
}

/* ---------- 固定CTA ---------- */
@keyframes cta-shine {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }

  100% {
    transform: translateX(220%) skewX(-20deg);
  }
}

@keyframes cta-glow {
  0%,
  100% {
    box-shadow:
      0 -4px 20px rgba(101, 72, 66, 0.15),
      0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    box-shadow:
      0 -6px 28px rgba(250, 87, 111, 0.45),
      0 0 18px rgba(255, 255, 255, 0.35);
  }
}

.cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  max-width: var(--max-w);
  min-height: var(--cta-h);
  padding: 1rem 2rem;
  background: var(--pink);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-maru);
  font-weight: 700;
  font-size: clamp(1rem, 4.3vw, 1.625rem);
  line-height: 1.5;
  overflow: hidden;
  isolation: isolate;
  animation: cta-glow 2.4s ease-in-out infinite;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.15) 42%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.15) 58%,
    transparent 65%
  );
  animation: cta-shine 2.8s ease-in-out infinite;
  pointer-events: none;
}

.cta > span {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cta {
    animation: none;
    box-shadow: 0 -4px 20px rgba(101, 72, 66, 0.15);
  }

  .cta::before {
    animation: none;
    opacity: 0;
  }
}

.cta__icon {
  flex-shrink: 0;
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: #fff;
}

.cta__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 35%;
  box-sizing: border-box;
  width: 0.45em;
  height: 0.45em;
  border-right: 2.5px solid var(--pink);
  border-bottom: 2.5px solid var(--pink);
  transform: translate(calc(-50% + 0.08em), -50%) rotate(-45deg);
}

@media (min-width: 640px) {
  html {
    font-size: 16px;
  }
}