/* 02 Small Rhythm — design.css */

html, body { overflow-x: hidden; }

/* ==========================================================================
   Design base styles
   ========================================================================== */
body {
  --black: #341103;
  --black-sub: #5f504b;
  --white: #ffffff;
  --bg: #f5f5f5;
  --muted: #766c69;
  --border: rgba(52, 17, 3, .18);
  --bg-light: rgba(255, 255, 255, .42);
  --green: #e76746;
  --green-bg: rgba(255, 255, 255, .42);
  --coral-soft: #f08b71;
  --glass: rgba(255, 255, 255, .44);
  background:
    radial-gradient(circle at 108% 18%, rgba(240, 139, 113, .46), rgba(240, 139, 113, 0) 34vw),
    radial-gradient(circle at -14% 74%, rgba(231, 103, 70, .22), rgba(231, 103, 70, 0) 32vw),
    var(--bg);
  color: var(--black);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 88% 8%, rgba(240, 139, 113, .28), rgba(240, 139, 113, 0) 32%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}

.container,
.header-inner,
.footer-inner {
  max-width: 1180px;
}

.site-header {
  position: fixed;
  width: 100%;
  background: rgba(245, 245, 245, .64);
  border-bottom: 1px solid rgba(52, 17, 3, .12);
  backdrop-filter: blur(22px);
}

.header-inner {
  height: 78px;
}

.header-logo {
  color: var(--black);
  font-weight: 700;
  letter-spacing: .12em;
}

.header-nav ul {
  gap: 10px;
}

.header-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  color: var(--black-sub);
  font-size: 13px;
  letter-spacing: .06em;
}

.header-nav a:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, .56);
  color: var(--black);
}

.header-nav > ul > li:last-child > a {
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

.header-nav .dropdown-menu {
  border-color: var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(20px);
  box-shadow: none;
}

.hero {
  height: auto;
  min-height: 88svh;
  padding: 120px 48px 72px;
  align-items: stretch;
  background: transparent;
}

.hero-slides {
  inset: 120px 48px 72px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--black);
}

.hero-slide img {
  opacity: .62;
  filter: saturate(.88) contrast(.96);
}

.hero-overlay {
  inset: 120px 48px 72px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(52, 17, 3, .66), rgba(52, 17, 3, .16) 56%, rgba(52, 17, 3, 0)),
    radial-gradient(circle at 94% 24%, rgba(240, 139, 113, .45), rgba(240, 139, 113, 0) 34%);
}

.hero-content {
  width: min(1180px, calc(100vw - 96px));
  margin: 0 auto;
  padding: 0 0 64px;
  align-self: flex-end;
}

.hero-catch {
  max-width: 760px;
  font-size: clamp(42px, 5.2vw, 74px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: .04em;
  color: var(--white);
}

.hero-name {
  max-width: 680px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .18em;
}

.hero-dots {
  right: calc(48px + 24px);
  bottom: calc(72px + 24px);
}

.hero-dot {
  background: rgba(255, 255, 255, .42);
}

.hero-dot.active {
  background: var(--coral-soft);
}

.gradient-band {
  height: 0;
}

.section-about,
.section-detail,
.section-profile,
.section-activity,
.section-contact,
.section-services-intro {
  padding: clamp(72px, 7vw, 110px) 0;
  background: transparent;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section-head.centered {
  display: block;
  text-align: left;
}

.section-en {
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
}

.section-title {
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: .04em;
}

.section-subtitle {
  color: var(--muted);
}

.about-body,
.detail-lead,
.detail-body {
  color: var(--black-sub);
}

.about-body p,
.detail-lead,
.detail-body,
.approach-desc,
.profile-bio,
.activity-card-desc,
.section-detail-link,
.activity-card-link {
  line-height: 1.95;
  font-weight: 500;
}

.activity-card-link {
  font-size: 16px;
}

.about-quote,
.yohaku-closing {
  border-left: 0;
  border-radius: 10px;
  background: var(--glass);
  padding: 28px 32px;
  color: var(--black);
  backdrop-filter: blur(20px);
}

.detail-rule {
  width: 100%;
  height: 1px;
  background: var(--border);
}

.services-grid,
.activity-grid,
.achievements-grid {
  gap: 24px;
}

.service-card,
.activity-card {
  border-color: var(--border);
  border-radius: 10px;
  background: var(--glass);
  box-shadow: none;
  backdrop-filter: blur(20px);
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}

.service-card {
  min-height: 360px;
  padding: 36px;
}

.service-card:hover,
.activity-card:hover {
  border-color: var(--coral-soft);
  background: rgba(255, 255, 255, .66);
  box-shadow: none;
  transform: translateY(-4px);
}

.service-card-num,
.service-card-link,
.activity-card-label,
.activity-card-link,
.approach-num,
.achievements-title,
.achievement-list li::before {
  color: var(--green);
}

.service-card-link,
.activity-card-link,
.section-detail-link {
  border-bottom-color: var(--green);
}

.approach-item,
.achievement-cat,
.activity-card-stats {
  border-color: var(--border);
}

.photo-strip {
  gap: 16px;
}

.photo-strip-item,
.profile-photo-wrap {
  overflow: hidden;
  border-radius: 10px;
  background: var(--glass);
}

.profile-layout {
  grid-template-columns: 300px 1fr;
}

.section-contact {
  margin-top: clamp(40px, 6vw, 80px);
  background: var(--black);
}

.section-contact .section-head {
  display: block;
  text-align: center;
}

.sns-btn {
  border-radius: 999px;
}

.site-footer {
  background: var(--black);
}

.footer-logo {
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
}

.footer-copy {
  font-size: 15px;
  color: rgba(255,255,255,.45);
}

@media (max-width: 768px) {
  .container,
  .header-inner,
  .footer-inner {
    padding-inline: 20px;
  }

  .site-header {
    position: sticky;
  }

  .hero {
    min-height: 70svh;
    padding: 20px;
  }

  .hero-slides,
  .hero-overlay {
    inset: 20px;
  }

  .hero-content {
    width: 100%;
    padding: 0 20px 34px;
  }

  .hero-catch {
    font-size: clamp(30px, 9vw, 42px);
  }

  .hero-dots {
    right: 36px;
    bottom: 36px;
  }

  .section-head {
    display: block;
  }

  .services-grid,
  .activity-grid,
  .achievements-grid {
    grid-template-columns: 1fr;
  }

  .profile-layout {
    grid-template-columns: 1fr;
  }
}

/* Round 2: calmer header, section-specific circles, readable headings */
body {
  background: var(--bg);
}

body::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}

.site-header {
  background: rgba(245, 245, 245, .78);
}

.header-nav a {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  color: var(--black-sub);
  font-size: 14px;
  transition: color .25s ease;
}

.header-nav a:hover {
  border-color: transparent;
  background: transparent;
  color: var(--green);
}

.header-nav > ul > li:last-child > a {
  min-height: 34px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  padding: 0 15px;
}

.header-nav > ul > li:last-child > a:hover {
  background: var(--green);
  color: var(--white);
}

.header-nav .dropdown-menu {
  min-width: 170px;
  border-radius: 8px;
  padding: 14px 0;
}

.header-nav .dropdown-menu a {
  display: block;
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 20px;
  color: var(--black-sub);
}

.header-nav .dropdown-menu a:hover {
  background: rgba(231, 103, 70, .08);
  color: var(--green);
}

.hero {
  min-height: 78svh;
  padding: 96px 48px 54px;
}

.hero-slides {
  inset: 96px 48px 54px;
  border: 0;
  border-radius: 0;
}

.hero-overlay {
  inset: 96px 48px 54px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(52, 17, 3, .7), rgba(52, 17, 3, .22) 55%, rgba(52, 17, 3, .02)),
    radial-gradient(circle at 88% 18%, rgba(240, 139, 113, .32), rgba(240, 139, 113, 0) 32%);
}

.hero-slide img {
  opacity: .7;
}

.hero-content {
  padding-bottom: 44px;
}

.hero-catch {
  font-size: clamp(38px, 4.6vw, 62px);
  line-height: 1.38;
}

.section-about,
.section-detail,
.section-profile,
.section-activity,
.section-services-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-about::before,
.section-detail::before,
.section-profile::before,
.section-activity::before,
.section-services-intro::before,
.section-about::after,
.section-detail::after,
.section-profile::after,
.section-activity::after,
.section-services-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.section-about::before {
  width: min(62vw, 720px);
  aspect-ratio: 1;
  right: -22vw;
  bottom: -22vw;
  background: radial-gradient(circle, rgba(240, 139, 113, .52), rgba(240, 139, 113, 0) 68%);
}

.section-about::after {
  width: min(22vw, 280px);
  aspect-ratio: 1;
  left: 8vw;
  top: 14%;
  background: radial-gradient(circle, rgba(231, 103, 70, .16), rgba(231, 103, 70, 0) 70%);
}

#method::before {
  width: min(44vw, 520px);
  aspect-ratio: 1;
  left: -18vw;
  top: 6%;
  background: radial-gradient(circle, rgba(231, 103, 70, .28), rgba(231, 103, 70, 0) 70%);
}

#method::after {
  width: min(28vw, 340px);
  aspect-ratio: 1;
  right: 8vw;
  bottom: 8%;
  background: radial-gradient(circle, rgba(240, 139, 113, .22), rgba(240, 139, 113, 0) 72%);
}

.section-services-intro::before {
  width: min(58vw, 680px);
  aspect-ratio: 1;
  right: -16vw;
  top: -12vw;
  background: radial-gradient(circle, rgba(240, 139, 113, .45), rgba(240, 139, 113, 0) 70%);
}

.section-services-intro::after {
  width: min(32vw, 380px);
  aspect-ratio: 1;
  left: -10vw;
  bottom: -12vw;
  background: radial-gradient(circle, rgba(231, 103, 70, .18), rgba(231, 103, 70, 0) 72%);
}

#kaname::before {
  width: min(42vw, 520px);
  aspect-ratio: 1;
  left: 56vw;
  top: 12%;
  background: radial-gradient(circle, rgba(240, 139, 113, .34), rgba(240, 139, 113, 0) 70%);
}

#yohaku::before {
  width: min(52vw, 640px);
  aspect-ratio: 1;
  left: -16vw;
  bottom: -18vw;
  background: radial-gradient(circle, rgba(231, 103, 70, .28), rgba(231, 103, 70, 0) 72%);
}

.section-profile::before {
  width: min(46vw, 560px);
  aspect-ratio: 1;
  right: -16vw;
  top: 18%;
  background: radial-gradient(circle, rgba(240, 139, 113, .3), rgba(240, 139, 113, 0) 72%);
}

.section-activity::before {
  width: min(38vw, 460px);
  aspect-ratio: 1;
  left: -12vw;
  top: -10vw;
  background: radial-gradient(circle, rgba(231, 103, 70, .2), rgba(231, 103, 70, 0) 72%);
}

.section-head {
  display: block;
  max-width: 760px;
}

.section-head.centered {
  max-width: 760px;
}

.section-title {
  max-width: 760px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.52;
  overflow-wrap: anywhere;
}

#about .section-head {
  margin-left: auto;
}

#about .section-title {
  font-size: clamp(30px, 3.5vw, 48px);
}

.section-services-intro .section-title,
#kaname .section-title,
#yohaku .section-title,
#profile .section-title,
#activity .section-title {
  font-size: clamp(30px, 3vw, 42px);
}

.service-card {
  min-height: 300px;
  justify-content: flex-start;
}

.service-card > div {
  width: 220px !important;
  margin-bottom: 8px;
}

.service-card-ja {
  color: var(--black);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .hero {
    min-height: 60svh;
    padding: 0;
  }

  .hero-slides,
  .hero-overlay {
    inset: 0;
  }

  .hero-content {
    padding: 0 20px 36px;
  }

  .section-title {
    overflow-wrap: normal;
    word-break: auto-phrase;
  }
}

/* Round 3: restore original hero and make background circles bolder */
.hero {
  height: 82vh;
  min-height: 620px;
  padding: 0;
  align-items: flex-end;
}

.hero-slides {
  inset: 0;
  border: 0;
  border-radius: 0;
}

.hero-slide img {
  opacity: .75;
  filter: none;
  object-position: center 20%;
}

.hero-overlay {
  inset: 0;
  border-radius: 0;
  background: linear-gradient(to top, rgba(24, 24, 27, .45) 0%, transparent 60%);
}

.hero-content {
  width: auto;
  margin: 0;
  padding: 0 64px 64px;
  align-self: auto;
}

.hero-catch {
  max-width: 760px;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 500;
  line-height: 1.5;
}

.hero-name {
  max-width: none;
  font-size: 15px;
}

.hero-dots {
  right: 48px;
  bottom: 24px;
}

.section-about,
.section-detail,
.section-profile,
.section-activity,
.section-services-intro {
  overflow: visible;
}

.section-about {
  background:
    radial-gradient(circle at 98% -8%, rgba(240, 139, 113, .42), rgba(240, 139, 113, 0) 34vw),
    radial-gradient(circle at 86% 82%, rgba(231, 103, 70, .22), rgba(231, 103, 70, 0) 24vw);
}

#method {
  background:
    radial-gradient(circle at -10% 12%, rgba(231, 103, 70, .25), rgba(231, 103, 70, 0) 28vw),
    radial-gradient(circle at 88% 36%, rgba(240, 139, 113, .22), rgba(240, 139, 113, 0) 20vw),
    radial-gradient(circle at 44% 104%, rgba(231, 103, 70, .12), rgba(231, 103, 70, 0) 18vw);
}

.section-services-intro {
  background:
    radial-gradient(circle at 100% -12%, rgba(240, 139, 113, .48), rgba(240, 139, 113, 0) 36vw),
    radial-gradient(circle at -8% 76%, rgba(231, 103, 70, .24), rgba(231, 103, 70, 0) 28vw),
    radial-gradient(circle at 62% 40%, rgba(240, 139, 113, .11), rgba(240, 139, 113, 0) 18vw);
}

#kaname {
  background:
    radial-gradient(circle at 112% 4%, rgba(240, 139, 113, .4), rgba(240, 139, 113, 0) 32vw),
    radial-gradient(circle at 16% 92%, rgba(231, 103, 70, .2), rgba(231, 103, 70, 0) 24vw);
}

#yohaku {
  background:
    radial-gradient(circle at -12% 16%, rgba(231, 103, 70, .3), rgba(231, 103, 70, 0) 34vw),
    radial-gradient(circle at 92% 94%, rgba(240, 139, 113, .28), rgba(240, 139, 113, 0) 26vw),
    radial-gradient(circle at 54% 8%, rgba(240, 139, 113, .1), rgba(240, 139, 113, 0) 18vw);
}

.section-profile {
  background:
    radial-gradient(circle at 96% 22%, rgba(240, 139, 113, .34), rgba(240, 139, 113, 0) 30vw),
    radial-gradient(circle at 8% 92%, rgba(231, 103, 70, .16), rgba(231, 103, 70, 0) 20vw);
}

.section-activity {
  background:
    radial-gradient(circle at -10% -8%, rgba(231, 103, 70, .24), rgba(231, 103, 70, 0) 26vw),
    radial-gradient(circle at 104% 72%, rgba(240, 139, 113, .36), rgba(240, 139, 113, 0) 34vw);
}

.section-about::before {
  width: min(86vw, 1040px);
  right: -34vw;
  bottom: -34vw;
  opacity: .95;
}

.section-about::after {
  width: min(34vw, 420px);
  left: -8vw;
  top: -8vw;
  background: radial-gradient(circle, rgba(231, 103, 70, .2), rgba(231, 103, 70, 0) 72%);
}

#method::before {
  width: min(70vw, 860px);
  left: -34vw;
  top: -18vw;
  background: radial-gradient(circle, rgba(231, 103, 70, .32), rgba(231, 103, 70, 0) 72%);
}

#method::after {
  width: min(42vw, 520px);
  right: -12vw;
  bottom: -18vw;
}

.section-services-intro::before {
  width: min(82vw, 980px);
  right: -32vw;
  top: -30vw;
}

.section-services-intro::after {
  width: min(48vw, 600px);
  left: -20vw;
  bottom: -22vw;
}

#kaname::before {
  width: min(64vw, 780px);
  left: auto;
  right: -24vw;
  top: -14vw;
}

#kaname::after {
  width: min(34vw, 420px);
  aspect-ratio: 1;
  left: -12vw;
  bottom: 6%;
  background: radial-gradient(circle, rgba(231, 103, 70, .16), rgba(231, 103, 70, 0) 72%);
}

#yohaku::before {
  width: min(76vw, 900px);
  left: -34vw;
  bottom: -26vw;
}

#yohaku::after {
  width: min(34vw, 420px);
  aspect-ratio: 1;
  right: -10vw;
  top: 8%;
  background: radial-gradient(circle, rgba(240, 139, 113, .22), rgba(240, 139, 113, 0) 72%);
}

@media (max-width: 768px) {
  .hero {
    height: 48svh;
    min-height: 300px;
  }

  .hero-slide img {
    object-position: center 25%;
  }

  .hero-content {
    padding: 0 20px 36px;
  }

  .hero-dots {
    right: 20px;
    bottom: 24px;
  }
}

/* Round 5: remove hard section background seams */
.section-about,
#method,
.section-services-intro,
#kaname,
#yohaku,
.section-profile,
.section-activity {
  background: transparent;
}

.section-about::before,
.section-detail::before,
.section-profile::before,
.section-activity::before,
.section-services-intro::before,
.section-about::after,
.section-detail::after,
.section-profile::after,
.section-activity::after,
.section-services-intro::after {
  filter: blur(2px);
}

.section-about::before {
  right: -30vw;
  bottom: -42vw;
}

.section-about::after {
  top: auto;
  left: -12vw;
  bottom: -8vw;
}

#method::before {
  left: -28vw;
  top: -28vw;
}

#method::after {
  right: -16vw;
  bottom: -24vw;
}

.section-services-intro::before {
  top: -36vw;
  right: -28vw;
}

.section-services-intro::after {
  left: -18vw;
  bottom: -28vw;
}

#kaname::before {
  top: -24vw;
  right: -28vw;
}

#kaname::after {
  bottom: -18vw;
}

#yohaku::before {
  left: -32vw;
  bottom: -34vw;
}

#yohaku::after {
  top: -12vw;
  right: -14vw;
}

.section-profile::before {
  right: -18vw;
  top: -10vw;
}

.section-activity::before {
  top: -20vw;
}

/* Round 6: keep contact compact and centered */
.section-contact {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: 96px 0;
  background: var(--black);
}

.section-contact .container {
  max-width: 920px;
}

.section-contact .section-head {
  display: block;
  max-width: none;
  margin-bottom: 42px;
  text-align: center;
}

.section-contact .section-en {
  color: var(--green);
}

.section-contact .section-title {
  max-width: none;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.45;
  color: var(--white);
  overflow-wrap: normal;
}

.contact-lead {
  max-width: 620px;
  margin: 0 auto 42px;
  text-align: center;
}

.contact-sns {
  gap: 14px;
}

/* Round 4: restore calmer header spacing */
.header-logo {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .18em;
}

.header-nav ul {
  gap: 30px;
}

.header-nav a {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .1em;
  padding-inline: 0;
}

.hero-name {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  letter-spacing: .18em;
}

.header-nav > ul > li:last-child > a {
  padding-inline: 16px;
  letter-spacing: .08em;
}

.header-nav .dropdown-menu a {
  letter-spacing: .08em;
}

/* ドロップダウン：透過なし・完全不透明 */
.header-nav .dropdown-menu {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

/* ==========================================================================
   Round 2 design tests
   Solid circles with soft edges + black-line structure variants
   ========================================================================== */

body {
  --r2-brown: #341103;
  --r2-coral: #e76746;
  --r2-coral-soft: #f08b71;
  --r2-violet: #9b5de5;
  --r2-violet-soft: #c6a8ff;
  --r2-mint: #8fd9cf;
  --r2-cream: #f5f5f5;
  --r2-line: rgba(52, 17, 3, .28);
  --green: var(--r2-coral);
  --coral-soft: var(--r2-coral-soft);
  background: var(--r2-cream);
}

body::before {
  background: none;
}

/* Restore the calmer original-style header for all tests. */
.site-header {
  position: sticky;
  width: 100%;
  background: rgba(250, 250, 250, .92);
  border-bottom: 1px solid #e4e4e7;
  backdrop-filter: none;
  overflow: visible;
}

.header-inner {
  height: 72px;
}

.header-logo {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .18em;
}

.header-nav ul {
  gap: 36px;
}

.header-nav a {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: .1em;
}

.header-nav a:hover {
  background: transparent;
  color: var(--black);
}

.header-nav > ul > li:last-child > a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  background: var(--r2-brown);
  padding: 0 16px;
  color: #fff;
}

.header-nav .dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: var(--muted);
}

.header-nav .dropdown-menu a:hover {
  background: #13111a;
  color: #ffffff;
}

.section-about,
.section-detail,
.section-profile,
.section-activity,
.section-services-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.section-about::before,
.section-detail::before,
.section-profile::before,
.section-activity::before,
.section-services-intro::before,
.section-about::after,
.section-detail::after,
.section-profile::after,
.section-activity::after,
.section-services-intro::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.service-card,
.activity-card,
.about-quote,
.yohaku-closing {
  background: rgba(255, 255, 255, .58);
  backdrop-filter: none;
}



/* 02: Small rhythm circles */
body {
  background:
    radial-gradient(circle at 8% 18%, rgba(155,93,229,.18) 0 74px, transparent 92px),
    radial-gradient(circle at 86% 10%, rgba(231,103,70,.18) 0 118px, transparent 142px),
    radial-gradient(circle at 72% 72%, rgba(143,217,207,.18) 0 82px, transparent 104px),
    var(--r2-cream);
}

.section-about::before,
#method::before,
.section-services-intro::before,
#kaname::before,
#yohaku::before,
.section-profile::before,
.section-activity::before {
  width: 420px;
  aspect-ratio: 1;
  right: -110px;
  top: 18%;
  background:
    radial-gradient(circle at 25% 28%, rgba(155,93,229,.26) 0 44px, transparent 46px),
    radial-gradient(circle at 70% 32%, rgba(231,103,70,.23) 0 76px, transparent 78px),
    radial-gradient(circle at 48% 72%, rgba(143,217,207,.22) 0 54px, transparent 56px);
}

.section-about::after,
#method::after,
.section-services-intro::after,
#kaname::after,
#yohaku::after {
  width: 300px;
  aspect-ratio: 1;
  left: -80px;
  bottom: 8%;
  background:
    radial-gradient(circle at 30% 70%, rgba(231,103,70,.2) 0 42px, transparent 44px),
    radial-gradient(circle at 68% 34%, rgba(155,93,229,.22) 0 64px, transparent 66px);
}

/* overflow: hidden が html にあると position:fixed が壊れるため clip に変更 */
html { overflow-x: clip; }

/* ヘッダー固定 */
.site-header { position: fixed; width: 100%; top: 0; }

/* ── 文字・アクセント・ヘッダー・背景丸まとめて上書き ── */
body {
  --black:      #13111a;
  --black-sub:  #2a2733;
  --green:      #7c6ab0;
  --coral-soft: #c6a8ff;
  color: #13111a;
  /* body背景の静的な丸は削除（div要素で代替） */
  background: #ffffff;
}

/* ヘッダーナビ文字を黒に */
.header-nav a { color: #111111; }
.header-nav a:hover { color: var(--green); }

/* Contact ボタン背景を黒に */
.header-nav > ul > li:last-child > a {
  background: #111111;
  color: #ffffff;
}
.header-nav > ul > li:last-child > a:hover {
  background: var(--green);
}

/* コンテンツをフローティング丸の上に */
main, .site-header, footer { position: relative; z-index: 1; }

/* ── 浮遊する背景の丸 ── */
.bg-circles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.bg-circle {
  position: absolute;
  border-radius: 50%;
}
.bg-circle-purple {
  width: 220px; height: 220px;
  left: calc(8% - 110px);
  top: calc(28% - 110px);
  background: rgba(155,93,229,.22);
  filter: blur(36px);
  animation: bcf-a 9s ease-in-out infinite;
}
.bg-circle-yellow {
  width: 320px; height: 320px;
  left: calc(86% - 160px);
  top: calc(10% - 160px);
  background: rgba(245,205,50,.26);
  filter: blur(68px);
  animation: bcf-b 12s ease-in-out infinite 2s;
}
.bg-circle-mint {
  width: 260px; height: 260px;
  left: calc(72% - 130px);
  top: calc(72% - 130px);
  background: rgba(143,217,207,.24);
  filter: blur(50px);
  animation: bcf-c 10s ease-in-out infinite 4s;
}
.bg-circle-coral {
  width: 300px; height: 300px;
  left: calc(14% - 150px);
  top: calc(82% - 150px);
  background: rgba(245,205,50,.18);
  filter: blur(60px);
  animation: bcf-d 11s ease-in-out infinite 1s;
}
.bg-circle-lavender {
  width: 240px; height: 240px;
  left: calc(88% - 120px);
  top: calc(88% - 120px);
  background: rgba(155,93,229,.16);
  filter: blur(48px);
  animation: bcf-a 9s ease-in-out infinite 3s;
}

/* 浮遊アニメーション（design_13と同じ系統） */
@keyframes bcf-a {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(14px,-20px) scale(1.04); }
}
@keyframes bcf-b {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-16px,14px) scale(0.97); }
}
@keyframes bcf-c {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(12px,16px) scale(1.03); }
}
@keyframes bcf-d {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-10px,-16px) scale(0.98); }
}

/* セクション装飾円もすべて浮遊 */
.section-about::before          { animation: bcf-a  7s ease-in-out infinite; }
.section-about::after           { animation: bcf-d  9s ease-in-out infinite 1s; }
#method::before                 { animation: bcf-b  8s ease-in-out infinite 2s; }
#method::after                  { animation: bcf-c  6s ease-in-out infinite 3.5s; }
.section-services-intro::before { animation: bcf-a 10s ease-in-out infinite 0.5s; }
.section-services-intro::after  { animation: bcf-d  7s ease-in-out infinite 4s; }
#kaname::before                 { animation: bcf-b  9s ease-in-out infinite 1.5s; }
#kaname::after                  { animation: bcf-c  8s ease-in-out infinite 5s; }
#yohaku::before                 { animation: bcf-d 10s ease-in-out infinite 2s; }
#yohaku::after                  { animation: bcf-a  7s ease-in-out infinite 3s; }
.section-profile::before        { animation: bcf-b  9s ease-in-out infinite 0.8s; }
.section-activity::before       { animation: bcf-c  8s ease-in-out infinite 4.5s; }

/* ── Yellow Sunshine バリアント：背景は白のみ（丸はdiv要素で管理） ── */
body {
  background: #ffffff;
}

.section-about::before,
#method::before,
.section-services-intro::before,
#kaname::before,
#yohaku::before,
.section-profile::before,
.section-activity::before {
  background:
    radial-gradient(circle at 25% 28%, rgba(155,93,229,.28) 0 44px, transparent 46px),
    radial-gradient(circle at 70% 32%, rgba(245,205,50,.32) 0 76px, transparent 78px),
    radial-gradient(circle at 48% 72%, rgba(143,217,207,.24) 0 54px, transparent 56px);
}

.section-about::after,
#method::after,
.section-services-intro::after,
#kaname::after,
#yohaku::after {
  background:
    radial-gradient(circle at 30% 70%, rgba(245,205,50,.26) 0 42px, transparent 44px),
    radial-gradient(circle at 68% 34%, rgba(155,93,229,.24) 0 64px, transparent 66px);
}

/* ── Intro Screen ── */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 60px;
  animation: intro-out 1s cubic-bezier(.4,0,.2,1) 5.2s forwards;
  pointer-events: none;
}

#intro-screen.hidden {
  display: none;
}

.intro-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}


.intro-text-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.intro-catch,
.intro-sub,
.intro-name {
  width: 100%;
  text-align: center;
}

.intro-sub {
  font-family: var(--font-en);
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 400;
  letter-spacing: .28em;
  color: var(--muted);
  opacity: 0;
  animation: intro-in 1.2s cubic-bezier(.22,.8,.36,1) .4s forwards;
}

.intro-name {
  font-family: var(--font-ja);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--muted);
  opacity: 0;
  animation: intro-in 1s cubic-bezier(.22,.8,.36,1) 1.6s forwards;
}

.intro-catch {
  font-family: var(--font-ja);
  font-size: clamp(28px, 4.5vw, 52px);
  font-weight: 500;
  color: var(--black);
  letter-spacing: .06em;
  line-height: 1.6;
  text-align: center;
  hanging-punctuation: allow-end;
  opacity: 0;
  animation: intro-in 1.4s cubic-bezier(.22,.8,.36,1) .6s forwards;
}

.intro-paws {
  display: flex;
  align-items: center;
  gap: 16px;
}

.intro-paw {
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: intro-paw-in .45s cubic-bezier(.22,.8,.36,1) var(--d) forwards;
}

.paw-l {
  rotate: 72deg;
  margin-top: 8px;
}

.paw-r {
  rotate: 108deg;
  margin-top: -8px;
}

@keyframes intro-in {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes intro-paw-in {
  from { opacity: 0; translate: 0 8px; scale: .7; }
  to   { opacity: 1; translate: 0 0;   scale: 1; }
}

@keyframes intro-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Hero テキスト登場アニメーション ── */
@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-catch {
  opacity: 0;
  animation: hero-in .9s cubic-bezier(.22,.8,.36,1) 5.8s forwards;
}

.hero-name {
  opacity: 0;
  animation: hero-in .9s cubic-bezier(.22,.8,.36,1) 6.2s forwards;
}

/* ── 最終確定：Aboutコンセプト本文サイズ ── */
.about-body p {
  font-size: 17px;
}

/* ── 句読点ズレ補正：「、」「。」分だけ左にオフセット ── */
.hero-catch,
.intro-catch {
  padding-left: 0.5em;
}

/* ── 最終確定：ヘッダー固定・透過 ── */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200 !important;
  background: rgba(255, 255, 255, .08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .58) !important;
  border-bottom-color: rgba(0, 0, 0, .06) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .06) !important;
}

main {
  padding-top: 72px;
}

/* ── Hero 肉球ドット（歩行形） ── */
.hero-dots {
  gap: 14px !important;
  align-items: center !important;
}

.hero-dot {
  width: 14px !important;
  height: 14px !important;
  border-radius: 0;
  background: none;
  color: rgba(255,255,255,.35);
  transition: color .2s;
  padding: 0;
}

.hero-dot.active {
  color: rgba(255,255,255,.9);
  background: none !important;
}

.hero-dot svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 歩行方向：奇数＝左足、偶数＝右足 */
.hero-dot:nth-child(odd)  { rotate: 72deg;  margin-top: 5px; }
.hero-dot:nth-child(even) { rotate: 108deg; margin-top: -5px; }

/* ── 最終確定：ヘッダーサイズ ── */
.header-logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .18em;
}

.header-nav a {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .1em;
}

/* ── イントロ：丸がこっちに向かってくるアニメーション ── */
@keyframes meteor-approach {
  0%   { transform: translate(-50%, -50%) scale(0.08); opacity: 0; }
  12%  { opacity: 0.75; }
  75%  { opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(3.2);  opacity: 0; }
}

/* ── 足跡：小さく・少し下に ── */
.intro-paws {
  gap: 14px !important;
  margin-top: 28px !important;
}

.intro-paw {
  width: 14px !important;
  height: 14px !important;
}

/* ── プログラムカードタイトル ── */
.service-card-ja {
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════
   フォントサイズ統一（5段階スケール）
   Hero 52px / 見出し 32px / 小見出し 20px / 本文 16px / 補足 13px
   ════════════════════════════════════════ */

/* 小見出し：20px に統一 */
.detail-lead,
.about-quote,
.approach-title,
.activity-card-name,
.section-subtitle { font-size: 20px !important; }

/* About本文 */
.about-body p { font-size: 17px !important; font-weight: 500 !important; line-height: 2 !important; }

/* 本文：16px に統一 */
.detail-body,
.approach-desc,
.service-card-desc,
.hero-name,
.profile-bio,
.section-contact p { font-size: 16px !important; }

/* 補足・ラベル：13px に統一 */
.section-en,
.service-card-num,
.service-card-link,
.activity-card-label,
.activity-card-link,
.activity-card-stats span { font-size: 13px !important; }

.footer-logo { font-size: 15px !important; letter-spacing: .22em !important; }
.footer-copy { font-size: 13px !important; }

/* ── Hero テキスト左揃え ── */
.hero-content { text-align: left !important; }
.hero-catch   { padding-left: 0 !important; }

/* ── サブページ：ページヒーロー ── */
.page-hero {
  padding: 140px 0 64px;
  text-align: center;
}
.page-hero .section-en {
  display: block;
  margin-bottom: 32px;
}
.page-hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.page-hero-logo img {
  max-width: 280px;
  width: 60%;
  height: auto;
}
.section-detail-link {
  font-size: 19px;
}

.page-hero-sub {
  font-size: 16px !important;
  color: rgba(255,255,255,.55);
  letter-spacing: .08em;
}

.sp-br { display: none; }

/* ── モバイル：フォントサイズ 90% 縮小 ── */
@media (max-width: 768px) {
  .sp-br { display: inline; }

  .hero-catch { font-size: 32px !important; line-height: 1.35 !important; }

  .section-title { font-size: 22px !important; }

  .detail-lead,
  .about-quote,
  .approach-title,
  .activity-card-name { font-size: 18px !important; }

  .section-subtitle { font-size: 14px !important; letter-spacing: 0.04em !important; }

  .about-body p { font-size: 15px !important; }

  .detail-body,
  .approach-desc,
  .service-card-desc,
  .hero-name,
  .profile-bio,
  .section-contact p { font-size: 14px !important; }
}