/* ============================================
   ゆうつむぎデザイン — Design System & Styles
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Brand Colors */
  --color-pink: #e8607e;
  --color-pink-light: #f0c3ce;
  --color-pink-pale: #fdf3f4;
  --color-pink-bg: #fbe9ea;
  --color-green: #7cb544;
  --color-green-light: #cfe4b4;
  --color-green-pale: #e9f3d9;
  --color-green-bg: #e9f3d9;
  --color-yellow: #f0b428;
  --color-yellow-light: #f2dc9e;
  --color-yellow-pale: #fdf0cd;
  --color-yellow-bg: #fdf0cd;
  --color-blue: #5b9bd5;
  --color-blue-light: #c3d9ee;
  --color-blue-pale: #d3e2ef;

  /* Neutrals */
  --color-text: #433d3c;
  --color-text-light: #5c5654;
  --color-text-muted: #9a9490;
  --color-border: #e9e2df;
  --color-bg: #FFFFFF;
  --color-bg-warm: #fdfbf4;
  --color-bg-cream: #F5F0E8;

  /* Typography */
  --font-body: 'Noto Sans JP', sans-serif;
  --font-heading: 'Zen Kaku Gothic Antique', 'Noto Sans JP', sans-serif;
  --font-display: 'Aboreto', serif;
  --font-number: 'Outfit', sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1200px;
  --container-narrow: 800px;
  --header-height: 70px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.10);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--color-pink);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-green);
}

ul, ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font-family: inherit;
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.4;
}

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.text-center { text-align: center; }
.text-pink { color: var(--color-pink); }
.text-green { color: var(--color-green); }
.text-muted { color: var(--color-text-light); }
.br-sp { display: none; }
@media (max-width: 768px) { .br-sp { display: inline; } }

/* Section spacing */
.section {
  padding: var(--space-3xl) 0;
}

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

/* Section label */
.section-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-pink);
  margin-bottom: 0.5rem;
}

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

.section-label--yellow {
  color: var(--color-yellow);
}

.section-label--blue {
  color: var(--color-blue);
}

/* Section title */
.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.section-title--display {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: .5rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  white-space: nowrap;
  background: transparent;
  border: none;
}

.btn--pink {
  background: var(--color-pink);
  color: #fff;
}

.btn--pink:hover {
  background: #d14e6c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--green {
  background: var(--color-green);
  color: #fff;
}

.btn--green:hover {
  background: #6aa038;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--yellow {
  background: var(--color-yellow);
  color: #fff;
}

.btn--yellow:hover {
  background: #d9a020;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--blue {
  background: var(--color-blue);
  color: #fff;
}

.btn--blue:hover {
  background: #4a89c5;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--color-pink);
  color: var(--color-pink);
}

.btn--outline:hover {
  background: var(--color-pink);
  color: #fff;
  transform: translateY(-2px);
}

.btn--outline-green {
  background: transparent;
  border: 2px solid var(--color-green);
  color: var(--color-green);
}

.btn--outline-green:hover {
  background: var(--color-green);
  color: #fff;
  transform: translateY(-2px);
}

.btn--outline-gray {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline-gray:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}

.btn--sm {
  padding: 0.6rem 1.4rem;
  font-size: 0.85rem;
}

.btn--lg {
  padding: 1rem 2.5rem;
  font-size: 1.05rem;
}

.btn--icon::before {
  font-size: 1.1em;
}

/* --- Header --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  height: var(--header-height);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 100%;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo__img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.site-logo__text {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-pink);
  letter-spacing: 0.14em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-nav li {
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--color-pink);
}

.site-nav .current-menu-item a,
.site-nav .current_page_item a {
  color: var(--color-pink);
}

/* Dropdown submenu (desktop) */
.has-submenu {
  position: relative;
}

.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  flex-direction: column;
  z-index: 100;
}

.has-submenu:hover .submenu {
  display: flex;
}

.has-submenu .submenu li {
  list-style: none;
}

.has-submenu .submenu a {
  padding: 0.6rem 1.2rem;
  font-size: 13px;
  white-space: nowrap;
}

.has-submenu .submenu a:hover {
  background: var(--color-bg);
}

/* Submenu (mobile) */
.has-submenu-mobile .submenu-mobile {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}

.has-submenu-mobile .submenu-mobile li {
  border-bottom: none;
}

.has-submenu-mobile .submenu-mobile a {
  padding: 0.6rem 0;
  font-size: 0.875rem;
  color: var(--color-text-light, #666);
}

.header-cta {
  margin-left: 1rem;
}

.header-cta .btn {
  padding: 15px 28px;
  font-size: 0.9375rem;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid #e77084;
  border-radius: 3px;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #e77084;
  border-radius: 2px;
  transition: all var(--transition-base);
}

.hamburger.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Nav Overlay */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 360px;
  height: 100vh;
  background: #fff;
  z-index: 999;
  padding: calc(var(--header-height) + 2rem) 2rem 2rem;
  transition: right var(--transition-base);
  overflow-y: auto;
}

.mobile-nav.is-open {
  right: 0;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.mobile-nav li {
  width: 100%;
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav a {
  display: block;
  padding: 1rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
}

.mobile-nav .btn {
  margin-top: 1.5rem;
  width: 100%;
  text-align: center;
  color: #fff;
}

/* Body offset for fixed header */
body {
  padding-top: var(--header-height);
}

/* --- Footer --- */
.site-footer {
  width: 100%;
  background: #FEFAFA;
  padding: var(--space-xl) 0 0;
}

.site-footer__inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 60px;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: var(--space-xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-logo__img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.footer-logo--pill {
  background: #fff;
  padding: 0.6rem 1.2rem;
}

.footer-logo__text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-pink);
}

.footer-brand__tagline {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 2px;
}

.footer-brand__info {
  font-size: 1rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

.footer-brand__info a {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

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

.footer-nav-group h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.footer-nav-group ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav-group a {
  font-size: 1rem;
  color: var(--color-text-light);
}

.footer-nav-group a:hover {
  color: var(--color-pink);
}

.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding: 1.2rem 0;
  text-align: center;
}

.footer-bottom__text {
  font-size: 0.75rem;
}

.footer-bottom__pill {
  display: inline-block;
  background: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
}

/* --- Page Header --- */
.page-header {
  background: #fdf3f4;
  padding: 80px 64px;
  text-align: center;
}

.page-header--green {
  background: var(--color-green-pale);
}

.page-header--yellow {
  background: var(--color-yellow-pale);
}

.page-header--blue {
  background: var(--color-blue-pale);
}

.page-header__label {
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e77084;
  margin-bottom: 12px;
  display: block;
}

.page-header__title {
  font-size: 42px;
  font-weight: 700;
  color: #373737;
  margin-bottom: 12px;
}

.page-header__desc {
  font-size: 16px;
  color: var(--color-text-light);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.76;
}

.page-header__desc--pink {
  color: #e77084;
  font-size: 16px;
  line-height: 1.76;
  font-weight: 500;
}

/* --- Hero (TOP) --- */
.hero {
  position: relative;
  padding: var(--space-xl) 0 var(--space-2xl);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

.hero__logo-img {
  width: 140px;
  margin: 0 auto 1.5rem;
}

.hero__title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 2rem;
  color: var(--color-text);
}

.hero__cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero full-width variant */
.hero--full {
  padding: 0;
  position: relative;
}

.hero--full .hero__bg {
  position: relative;
  width: 100%;
}

.hero--full .hero__bg-img {
  width: 100%;
  height: auto;
  display: block;
}

.hero--full .hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-bottom: clamp(2rem, 6vw, 4rem);
  display: flex;
  justify-content: center;
}

.btn--hero-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(110px, 16vw, 160px);
  height: clamp(110px, 16vw, 160px);
  border-radius: 50%;
  background: var(--color-pink);
  color: #fff;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 4px 20px rgba(232, 96, 126, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.btn--hero-circle:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 28px rgba(232, 96, 126, 0.45);
  color: #fff;
}

/* Hero decorative elements */
.hero__deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero__photos {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.hero__photo {
  width: 280px;
  height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- News / Blog Pickup Section --- */
.news-section {
  padding: var(--space-xl) 0;
}

.news-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.news-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.2rem;
}

.news-section__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-pink);
  border-radius: 50%;
}

.news-link {
  font-size: 0.85rem;
  color: var(--color-pink);
}

/* News outer card */
.news-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 5px rgba(165, 165, 165, 0.3);
  /* padding: 4rem clamp(1.5rem, 6vw, 4.5rem); */
}

/* Pickup card */
.pickup-card {
  display: flex;
  align-items: center;
  gap: 4rem;
  margin-bottom: 5.125rem;
}

.pickup-card__img {
  width: 423px;
  min-width: 300px;
  height: 281px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #eeedeb;
  flex-shrink: 0;
}

.pickup-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pickup-card__img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-pink-pale);
}

.pickup-card__body {
  display: flex;
  flex-direction: column;
}

.pickup-card__badge {
  display: inline-block;
  background: #e77084;
  color: #fff;
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.3rem;
  width: fit-content;
}

.pickup-card__meta {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-bottom: 1.1875rem;
}

.pickup-card__cat {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  color: #7f7f7f;
  background: #fff;
  border: 1px solid #dadada;
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
}

.pickup-card__date {
  font-family: var(--font-number);
  font-size: 0.8125rem;
  color: #7f7f7f;
}

.pickup-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: #383633;
  line-height: 1.5;
  margin-bottom: 0.9375rem;
}

.pickup-card__excerpt {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #373737;
  line-height: 1.8;
}

.pickup-card__more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: #383633;
  text-decoration: none;
  margin-top: 1.1875rem;
}

.pickup-card__more:hover {
  opacity: 0.7;
}

.pickup-card__more svg {
  flex-shrink: 0;
}

/* News list */
.news-list {
  display: flex;
  flex-direction: column;
}

.news-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.625rem;
  border-top: 1px solid #e5e4e2;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.news-list__item:hover {
  background: rgba(0, 0, 0, 0.02);
}

.news-list__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.news-list__date {
  font-family: var(--font-number);
  font-size: 0.8125rem;
  color: #a3a19c;
  white-space: nowrap;
}

.news-list__cat {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.news-list__cat--pink {
  background: #fff;
  border: 1px solid #a5a5a5;
  color: #7f7f7f;
}

.news-list__cat--green {
  background: #f7f9eb;
  color: #72b94e;
}

.news-list__cat--yellow {
  background: #f7f9eb;
  color: #f8c743;
}

.news-list__cat--blue {
  background: #e8f0f8;
  color: #5b9bd5;
}

.news-list__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: #383633;
}

.news-list__arrow {
  font-weight: 700;
  font-size: 0.875rem;
  color: #e77084;
  flex-shrink: 0;
}

/* --- Concept Section --- */
.concept-section {
  background: radial-gradient(120% 120% at 50% 0%, #fbdfe5, #fceef0 55%, #fdf6f5 100%);
  padding: var(--space-3xl) clamp(1rem, 4vw, 3rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: clamp(60px, 14vw, 220px);
  margin: 0 clamp(0.5rem, 2vw, 2rem);
}

.concept-section__title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #e08698;
  margin-bottom: 1.5rem;
}

.concept-section__lead {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2;
  margin-bottom: 1.5rem;
}

.concept-section__text {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 2;
  max-width: 600px;
  margin: 0 auto 2rem;
}

/* --- Service Cards (TOP) --- */
.service-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.service-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.service-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.service-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover .service-card__img img {
  transform: scale(1.05);
}

.service-card__body {
  padding: 1.2rem 1rem;
}

.service-card__label {
  font-size: 0.7rem;
  color: var(--color-pink);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.service-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.service-card__desc {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

.service-card__separator {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.5rem;
  color: var(--color-pink-light);
}

.service-card__separator--pink { color: var(--color-pink-light); }
.service-card__separator--green { color: var(--color-green-light); }
.service-card__separator--blue { color: var(--color-blue-light); }
.service-card__separator--yellow { color: var(--color-yellow-light); }

.service-card__link {
  font-size: 0.8rem;
  color: var(--color-pink);
  font-weight: 500;
}

.service-card__link--pink { color: var(--color-pink); }
.service-card__link--green { color: var(--color-green); }
.service-card__link--blue { color: var(--color-blue); }
.service-card__link--yellow { color: var(--color-yellow); }

/* Service card color border variants */
.service-card--pink { border-top: 3px solid var(--color-pink); }
.service-card--green { border-top: 3px solid var(--color-green); }
.service-card--blue { border-top: 3px solid var(--color-blue); }
.service-card--yellow { border-top: 3px solid var(--color-yellow); }

/* --- Works Grid --- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.works-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base);
}

.works-card:hover {
  transform: translateY(-4px);
}

.works-card__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}

.works-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.works-card:hover .works-card__img img {
  transform: scale(1.05);
}

.works-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding: 0 12px;
}

.works-card__cat {
  font-size: 0.7rem;
  color: var(--color-pink);
  border: 1px solid var(--color-pink-light);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}

.works-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.works-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.4rem;
  padding: 0 12px 12px;
  color: var(--color-text);
}

/* --- Instagram Grid --- */
.insta-section {
  padding: var(--space-xl) 0;
}

.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.insta-grid__item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.insta-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.insta-grid__item:hover img {
  transform: scale(1.08);
}

/* --- FAQ Section --- */
.faq-section {
  padding: var(--space-xl) 0;
}

.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.faq-tab {
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-light);
  background: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.faq-tab:hover {
  border-color: var(--color-pink-light);
  color: var(--color-pink);
}

.faq-tab.is-active {
  border-color: var(--color-pink);
  color: var(--color-pink);
  background: var(--color-pink-pale);
}

.faq-group__label {
  display: inline-block;
  background: var(--color-pink);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

.faq-group__label--green { background: var(--color-green); }
.faq-group__label--yellow { background: var(--color-yellow); }
.faq-group__label--blue { background: var(--color-blue); }

.faq-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.95rem;
  gap: 1rem;
  transition: background var(--transition-fast);
}

.faq-item__question:hover {
  background: var(--color-pink-pale);
}

.faq-item__question::before {
  content: "Q";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-pink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.faq-item__icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.faq-item__icon::before {
  top: 50%;
  left: 3px;
  right: 3px;
  height: 2px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 2px;
  transform: translateX(-50%);
}

.faq-item.is-open .faq-item__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base), padding var(--transition-base);
}

.faq-item__answer-inner {
  padding: 0 1.5rem 1rem 4rem;
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

.faq-item__answer-inner::before {
  content: "A";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-pink-light);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  margin-right: 0.75rem;
  vertical-align: middle;
}

.faq-item.is-open .faq-item__answer {
  max-height: 500px;
}

/* --- Contact CTA Section --- */
.contact-cta {
  padding: var(--space-xl) 0 var(--space-2xl);
  text-align: center;
}

.contact-cta__title {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: var(--color-pink);
  margin-bottom: 0.5rem;
}

.contact-cta__lead {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.contact-cta__text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.contact-cta__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Service List Page --- */

/* Page Header */
.svc-page-header {
  background: linear-gradient(180deg, rgba(243, 202, 209, 0.3) 0%, #fdf3f4 100%);
  padding: 80px 64px;
  text-align: center;
}

.svc-page-header__label {
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: 700;
  color: #e77084;
  letter-spacing: 0.05em;
}

.svc-page-header__title {
  font-size: 42px;
  font-weight: 700;
  color: #373737;
  margin: 14px 0;
}

.svc-page-header__desc {
  font-size: 16px;
  font-weight: 500;
  color: #e77084;
  line-height: 1.76;
}

/* Service Sections */
.svc-section {
  padding: 0 64px;
  overflow: hidden;
}

.svc-section--01 {
  background: linear-gradient(180deg, #fdf3f4 0%, #f7f9eb 100%);
}

.svc-section--02 {
  background: linear-gradient(180deg, #f7f9eb 0%, #f4f8fb 100%);
}

.svc-section--03 {
  background: linear-gradient(180deg, #f4f8fb 0%, #fffcef 100%);
}

.svc-section--04 {
  background: linear-gradient(180deg, #fffcef 0%, #fefefe 100%);
}

.svc-section__inner {
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1192px;
  margin: 0 auto;
}

.svc-section__inner--reverse {
  flex-direction: row;
}

.svc-section__img {
  flex-shrink: 0;
  width: 49%;
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
}

.svc-section__img img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.svc-section__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}

.svc-section__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.svc-section__num {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
}

.svc-section__num--pink { color: #e77084; }
.svc-section__num--green { color: #72b94e; }
.svc-section__num--blue { color: #629acc; }
.svc-section__num--yellow { color: #f8c743; }

.svc-section__label {
  font-size: 15px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 20px;
}

.svc-section__label--pink { color: #e77084; }
.svc-section__label--green { color: #72b94e; }
.svc-section__label--blue { color: #629acc; background: #f4f8fb; }
.svc-section__label--yellow { color: #f8c743; background: #fffcef; }

.svc-section__title {
  font-size: 28px;
  font-weight: 700;
  color: #373737;
  line-height: 1.4;
}

.svc-section__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.svc-section__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #848484;
}

.svc-section__list li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dadada;
  flex-shrink: 0;
}

.svc-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 213px;
  height: 42px;
  border-radius: 80px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.svc-section__btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
  color: #fff;
}

.svc-section__btn--pink { background: #e77084; }
.svc-section__btn--green { background: #72b94e; }
.svc-section__btn--blue { background: #629acc; }
.svc-section__btn--yellow { background: #f8c743; }

/* Wave Dividers */
.svc-wave {
  position: relative;
  text-align: center;
  z-index: 1;
  pointer-events: none;
  line-height: 0;
  font-size: 0;
  margin: 0;
}

.svc-wave img {
  width: 100%;
  max-width: 580px;
  height: auto;
  display: block;
  vertical-align: top;
  margin: 0 auto;
}

/* セクション間の接続色 */
.svc-wave--01 { background: #f7f9eb; }
.svc-wave--02 { background: #f4f8fb; }
.svc-wave--03 { background: #fffcef; }
.svc-wave--04 { background: #fefefe; }

/* 偶数波線を水平反転（交互レイアウトに合わせる） */
.svc-wave--02 img,
.svc-wave--04 img {
  transform: scaleX(-1);
}

/* CTA Bar */
.svc-cta {
  background: #fff;
  padding: 52px 64px;
}

.svc-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 950px;
  margin: 0 auto;
}

.svc-cta__text {
  font-size: 26px;
  font-weight: 700;
  color: #e77084;
}

/* --- Service Detail Hero --- */
.service-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: var(--space-xl) 0;
}

.service-hero__label {
  display: inline-block;
  border: 2px solid var(--color-green);
  color: var(--color-green);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.8rem;
}

.service-hero__title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.service-hero__subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

.service-hero__desc {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.service-hero__hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.service-hero__hashtag {
  font-size: 0.8rem;
  color: var(--color-pink);
  font-weight: 500;
}

.service-hero__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.service-hero__img {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.service-hero__img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* --- Recommend Cards --- */
.recommend-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.recommend-card {
  background: #fff;
  border: 2px solid var(--color-yellow-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
}

.recommend-card__icon {
  font-size: 2rem;
  color: var(--color-yellow);
  margin-bottom: 1rem;
}

.recommend-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.recommend-card__text {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* --- Flow Steps --- */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  text-align: center;
}

.flow-step {
  position: relative;
}

.flow-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-green);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.flow-step__num--pink { background: var(--color-pink); }
.flow-step__num--yellow { background: var(--color-yellow); }
.flow-step__num--blue { background: var(--color-blue); }

.flow-step--card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  box-shadow: var(--shadow-sm);
}

.flow-step__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.flow-step__text {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* --- Event Grid --- */
.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.event-card {
  text-align: center;
}

.event-card__img {
  aspect-ratio: 3/2;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.event-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__title {
  font-size: 0.95rem;
  font-weight: 600;
}

/* --- About Page (Pink Theme) --- */

/* About Hero */
.about-hero {
  background: linear-gradient(90deg, #fdf3f4 0%, #fff 50%, #fdf3f4 100%);
  padding: 80px 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.about-hero__label {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 14px;
  color: #e77084;
}

.about-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 42px;
  color: #373737;
}

.about-hero__desc {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: #e77084;
  text-align: center;
  line-height: 1.76;
  max-width: 640px;
}

.about-hero__desc p {
  margin: 0;
}

/* About Concept */
.about-concept {
  background: linear-gradient(90deg, #fdf3f4 2.4%, #fff 49%, #fdf3f4 100%);
  padding: 30px 64px;
  display: flex;
  justify-content: center;
}

.about-concept__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 49px;
  max-width: 712px;
  text-align: center;
}

.about-concept__title {
  font-family: var(--font-display);
  font-size: 64px;
  color: #e77084;
  font-weight: 400;
}

.about-concept__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  max-width: 638px;
}

.about-concept__lead {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  color: #373737;
  line-height: 1.68;
}

.about-concept__lead p {
  margin: 0;
}

.text-pink-bold {
  color: #e77084;
  font-weight: 700;
}

.about-concept__text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  color: #373737;
  line-height: 1.78;
}

.about-concept__text p {
  margin: 0;
}

/* About Profile */
.about-profile {
  background: linear-gradient(90deg, #fdf4f5 0%, #fff 50%, #fdf4f5 100%);
  padding: 80px 64px;
}

.about-profile__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-profile__img-wrap {
  width: 538px;
  flex-shrink: 0;
  border-radius: 300px 300px 0 0;
  overflow: hidden;
  background: #eee;
}

.about-profile__img {
  width: 100%;
  aspect-ratio: 538 / 1157;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

.about-profile__card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 18.5px #ffd9df;
  padding: 32px 51px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 612px;
}

.about-profile__label {
  font-family: var(--font-display);
  font-size: 64px;
  color: #e77084;
  font-weight: 400;
}

.about-profile__greeting {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  color: #e77084;
  line-height: 1.5;
}

.about-profile__greeting p {
  margin: 0;
}

.about-profile__text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 16px;
  color: #373737;
  line-height: 1.78;
}

.about-profile__text p {
  margin: 0 0 1em;
}

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

.about-profile__links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.about-profile__link-btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  color: #373737;
  background: #fff;
  border: 1px solid #dadada;
  border-radius: 30px;
  padding: 12px 20px;
  box-shadow: 0 2px 2px rgba(218, 218, 218, 0.5);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.about-profile__link-btn:hover {
  background: #f9f9f9;
}

/* About Overview */
.about-overview {
  background: #fff;
  padding: 80px 64px;
}

.about-overview__inner {
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.about-overview__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.about-overview__label {
  font-family: var(--font-number);
  font-weight: 700;
  font-size: 13px;
  color: #e77084;
}

.about-overview__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  color: #373737;
}

.about-overview__table {
  width: 100%;
}

.about-overview__row {
  display: flex;
  gap: 24px;
  padding: 20px 8px;
  border-top: 1px solid #e3e3e3;
  font-family: var(--font-heading);
}

.about-overview__th {
  width: 180px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 15px;
  color: #e77084;
  line-height: 1.6;
}

.about-overview__td {
  flex: 1;
  font-weight: 700;
  font-size: 16px;
  color: #848484;
  line-height: 1.7;
}

/* About CTA */
.about-cta {
  background: #fff;
  padding: 52px 64px;
}

.about-cta__inner {
  max-width: 950px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about-cta__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  color: #e77084;
  margin-bottom: 8px;
}

.about-cta__desc {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 20px;
  color: #525252;
}

.about-cta__desc p {
  margin: 0;
  line-height: 1.5;
}

.about-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e77084;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 55px;
  border-radius: 30px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}

.about-cta__btn:hover {
  opacity: 0.85;
}

.about-cta__btn svg {
  flex-shrink: 0;
}

/* --- Blog List --- */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  padding: var(--space-lg) 0 var(--space-xl);
}

.blog-main {
  min-width: 0;
}

/* Blog Search */
.blog-search {
  margin-bottom: 1.5rem;
}

.blog-search__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid #e3e3e3;
  border-radius: 50px;
  padding: 0.5rem 0.625rem 0.5rem 1.5rem;
  background: #fff;
  height: 56px;
  gap: 0.75rem;
}

.blog-search__icon {
  flex-shrink: 0;
}

.blog-search__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.9375rem;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text);
  background: transparent;
  min-width: 0;
}

.blog-search__input::placeholder {
  color: #a5a5a5;
}

.blog-search__btn {
  flex-shrink: 0;
  padding: 0.5rem 2rem;
  background: var(--color-pink);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: opacity var(--transition-fast);
  height: 40px;
}

.blog-search__btn:hover {
  opacity: 0.85;
}

.blog-search__hint {
  display: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: #a5a5a5;
  margin-top: 0.5rem;
}

/* Blog Filter Row */
.blog-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1;
}

.blog-filter {
  padding: 0.65rem 1.2rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-heading);
  border: 1px solid #e3e3e3;
  border-radius: var(--radius-full);
  color: #7f7f7f;
  background: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

.blog-filter:hover {
  opacity: 0.7;
}

.blog-filter--pink { color: var(--color-pink); }
.blog-filter--green { color: var(--color-green); }
.blog-filter--blue { color: var(--color-blue); }
.blog-filter--yellow { color: var(--color-yellow); }

.blog-filter.is-active {
  border-color: var(--color-pink);
  color: var(--color-pink);
  background: var(--color-pink-pale);
}

/* Blog Sort */
.blog-sort {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.9rem;
  flex-shrink: 0;
  padding-top: 0.65rem;
}

.blog-sort__label {
  color: #a5a5a5;
  font-family: var(--font-heading);
}

.blog-sort__value {
  color: var(--color-pink);
  font-weight: 700;
  font-family: var(--font-heading);
}

/* Blog Tags (gray background) */
.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.blog-tag {
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  background: #f7f7f7;
  color: #848484;
  text-decoration: none;
  transition: all var(--transition-fast);
  border: none;
}

.blog-tag:hover,
.blog-tag.is-active {
  background: #eee;
  color: var(--color-pink);
}

/* Blog post list items */
.blog-post-item {
  display: flex;
  gap: 1.4rem;
  padding: 1.4rem 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-fast);
}

.blog-post-item + .blog-post-item {
  border-top: 1px solid #e3e3e3;
}

.blog-post-item:hover {
  opacity: 0.7;
}

.blog-post-item__img {
  width: 200px;
  height: 130px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: #eee;
}

.blog-post-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-item__noimg {
  width: 100%;
  height: 100%;
  background: #eee;
}

.blog-post-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-post-item__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-post-item__cat {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-full);
  border: 1px solid #dadada;
  color: #858585;
  background: #fff;
}

.blog-post-item__cat--pink {
  background: var(--color-pink-pale);
  color: var(--color-pink);
  border-color: transparent;
}

.blog-post-item__cat--green {
  background: #f7f9eb;
  color: var(--color-green);
  border-color: transparent;
}

.blog-post-item__cat--blue {
  background: #e8f0f7;
  color: var(--color-blue);
  border-color: transparent;
}

.blog-post-item__cat--yellow {
  background: #fffcef;
  color: var(--color-yellow);
  border-color: transparent;
}

.blog-post-item__cat--gray {
  background: #fff;
  color: #858585;
  border: 1px solid #dadada;
}

.blog-post-item__date {
  font-family: var(--font-number);
  font-size: 0.8rem;
  color: #a5a5a5;
}

.blog-post-item__title {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text);
}

.blog-post-item__excerpt {
  font-size: 0.875rem;
  font-family: var(--font-heading);
  font-weight: 500;
  color: #848484;
  line-height: 1.72;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sidebar */
.blog-sidebar {
  min-width: 0;
}

.sidebar__section {
  margin-bottom: 2rem;
}

.sidebar__title {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-pink);
  margin-bottom: 0.875rem;
}

.sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sidebar__tag {
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 0.35rem 0.75rem;
  border: 1px solid #e3e3e3;
  border-radius: var(--radius-full);
  color: #848484;
  background: #fff;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.sidebar__tag:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}

.sidebar__archive-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.125rem;
  text-decoration: none;
  color: inherit;
}

.sidebar__archive-item + .sidebar__archive-item {
  border-top: 1px solid var(--color-border);
}

.sidebar__archive-label {
  font-family: var(--font-number);
  font-weight: 500;
  font-size: 0.875rem;
  color: #848484;
}

.sidebar__archive-count {
  font-family: var(--font-number);
  font-weight: 400;
  font-size: 0.8rem;
  color: #a5a5a5;
}

.sidebar__recommend-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-fast);
}

.sidebar__recommend-item:hover {
  opacity: 0.7;
}

.sidebar__recommend-item + .sidebar__recommend-item {
  border-top: 1px solid var(--color-border);
}

.sidebar__recommend-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.sidebar__recommend-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar__recommend-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sidebar__recommend-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #373737;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar__recommend-date {
  font-family: var(--font-number);
  font-size: 12px;
  color: #a5a5a5;
}

/* --- Single Post --- */
.single-post {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

.single-post__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.single-post__title {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.5;
  text-align: center;
}

.single-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  justify-content: center;
}

.single-post__tag {
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-heading);
  color: #373737;
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid #dadada;
  border-radius: var(--radius-full);
}

.single-post__thumbnail {
  margin-bottom: 40px;
  border-radius: 14px;
  overflow: hidden;
}

.single-post__thumbnail img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.single-post__body {
  max-width: 760px;
  margin: 0 auto;
}

.single-post__intro {
  font-size: 18px;
  line-height: 1.9;
  color: #373737;
  margin-bottom: 26px;
}

.single-post__sections h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 700;
  color: #373737;
  margin: 26px 0 20px;
}

.single-post__sections h2::before {
  content: "";
  display: block;
  width: 5px;
  height: 24px;
  background: var(--color-pink);
  border-radius: 2px;
  flex-shrink: 0;
}

.single-post__sections h2:first-child {
  margin-top: 0;
}

.single-post__section-img {
  margin: 24px 0;
}

.single-post__section-img img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 14px;
}

.single-post__sections p {
  font-size: 16px;
  line-height: 1.92;
  color: #818181;
  margin-bottom: 24px;
}

.single-post__content {
  font-size: 16px;
  line-height: 1.92;
}

.single-post__content h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 700;
  color: #373737;
  margin: 26px 0 20px;
}

.single-post__content h2::before {
  content: "";
  display: block;
  width: 5px;
  height: 24px;
  background: var(--color-pink);
  border-radius: 2px;
  flex-shrink: 0;
}

.single-post__content h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 24px 0 16px;
}

.single-post__content p {
  font-size: 16px;
  line-height: 1.92;
  color: #818181;
  margin-bottom: 24px;
}

.single-post__content ul,
.single-post__content ol {
  margin: 8px 0 24px;
  padding-left: 0;
}

.single-post__content ul {
  list-style: none;
}

.single-post__content ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 15px;
  line-height: 1.8;
  color: #818181;
}

.single-post__content ul li::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  background: var(--color-pink);
  flex-shrink: 0;
}

.single-post__content ol {
  list-style: decimal;
  padding-left: 1.5rem;
}

.single-post__content ol li {
  margin-bottom: 0.5rem;
  font-size: 15px;
  line-height: 1.8;
  color: #818181;
}

.single-post__content blockquote {
  border-left: 4px solid var(--color-pink);
  padding: 22px 26px;
  margin: 24px 0;
  background: var(--color-pink-pale);
  border-radius: 0 12px 12px 0;
  font-size: 17px;
  line-height: 1.8;
  font-style: normal;
  color: #373737;
}

.single-post__content img {
  border-radius: 14px;
  margin: 24px 0;
}

.single-post__quote {
  border-left: 4px solid var(--color-pink);
  padding: 22px 26px;
  margin: 24px 0;
  background: var(--color-pink-pale);
  border-radius: 0 12px 12px 0;
  font-size: 17px;
  line-height: 1.8;
  color: #373737;
}

.single-post__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 48px 0;
}

.single-post__nav-prev,
.single-post__nav-next {
  font-size: 15px;
  font-weight: 700;
  color: #818181;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.single-post__nav-prev:hover,
.single-post__nav-next:hover {
  color: var(--color-pink);
}

.single-post__nav--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.single-post__nav-back {
  display: inline-block;
  padding: 12px 32px;
  border: 1.4px solid #e2e2e2;
  border-radius: 24px;
  color: #373737;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.single-post__nav-back:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}

/* --- Single Works --- */
.single-works {
  max-width: 1040px;
  margin: 0 auto;
  padding: 60px 24px 0;
}

.single-works__meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.single-works__title {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 16px;
}

.single-works__tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.single-works__tag {
  font-size: 14px;
  color: var(--color-text-light);
}

.single-works__hero {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 48px;
}

.single-works__hero img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.single-works__body {
  max-width: 760px;
  margin: 0 auto;
}

.single-works__intro {
  font-size: 18px;
  line-height: 1.9;
  margin-bottom: 40px;
}

.single-works__content h2 {
  font-size: 22px;
  font-weight: 700;
  padding-left: 16px;
  border-left: 4px solid var(--color-pink);
  margin: 48px 0 20px;
}

.single-works__content h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 36px 0 16px;
}

.single-works__content p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 24px;
}

.single-works__content ul,
.single-works__content ol {
  margin: 1rem 0 1.5rem 1.5rem;
  font-size: 16px;
  line-height: 1.9;
}

.single-works__content ul {
  list-style: disc;
}

.single-works__content ol {
  list-style: decimal;
}

.single-works__content li {
  margin-bottom: 0.5rem;
}

.single-works__content img {
  border-radius: 14px;
  margin: 32px 0;
}

.single-works__content blockquote {
  border-left: 4px solid var(--color-pink);
  padding: 24px 28px;
  margin: 32px 0;
  background: var(--color-pink-pale);
  border-radius: 0 14px 14px 0;
  font-size: 16px;
  line-height: 1.9;
}

.single-works__sections h2 {
  font-size: 22px;
  font-weight: 700;
  padding-left: 16px;
  border-left: 4px solid var(--color-pink);
  margin: 48px 0 20px;
}

.single-works__sections h2:first-child {
  margin-top: 0;
}

.single-works__section-img {
  margin: 24px 0;
}

.single-works__section-img img {
  width: 100%;
  border-radius: 14px;
}

.single-works__sections p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 24px;
}

.single-works__data {
  list-style: none;
  margin: 40px 0;
  padding: 0;
}

.single-works__data-item {
  font-size: 15px;
  line-height: 1.8;
  color: #373737;
  padding: 4px 0;
}

.single-works__quote {
  border-left: 4px solid var(--color-pink);
  padding: 24px 28px;
  margin: 40px 0;
  background: var(--color-pink-pale);
  border-radius: 0 14px 14px 0;
  font-size: 16px;
  line-height: 1.9;
}

.single-works__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0 0 50px;
}

.single-works__nav-prev,
.single-works__nav-next {
  font-size: 15px;
  font-weight: 700;
  color: #818181;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.single-works__nav-prev:hover,
.single-works__nav-next:hover {
  color: var(--color-pink);
}

.single-works__nav--disabled {
  opacity: 0.3;
  pointer-events: none;
}

.single-works__nav-back {
  display: inline-block;
  padding: 12px 32px;
  border: 1.4px solid #e2e2e2;
  border-radius: 24px;
  color: #373737;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.single-works__nav-back:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}

/* Share buttons */
.share-section {
  margin: 3rem 0 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
}

.share-section__title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
  text-align: center;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.share-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-light);
  background: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.share-btn svg {
  flex-shrink: 0;
}

.share-btn:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
}

/* Related posts */
.related-posts {
  margin-top: 3rem;
}

.related-posts__title {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 3.5rem;
}

.related-posts__label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-pink);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.3rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 50px;
}

/* --- Contact Page --- */
.contact-section {
  background: var(--color-pink-pale);
  padding: 0 0 80px;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 333px;
  gap: 22px;
  align-items: start;
}

.contact-form {
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 20px;
  padding: 40px 35px;
}

.contact-form__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 24px;
}

/* Contact Form 7 */
.wpcf7-form-control-wrap {
  display: block;
}

.wpcf7-form .form-group {
  margin-bottom: 24px;
}

.wpcf7-form .form-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.wpcf7-form .form-label__required {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  background: #df3030;
  color: #fff;
  padding: 2px 9px;
  border-radius: 11px;
  line-height: 1;
  height: 16px;
}

.wpcf7-form .form-label__optional {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  background: #a5a5a5;
  color: #fff;
  padding: 2px 9px;
  border-radius: 11px;
  line-height: 1;
  height: 16px;
}

.wpcf7-form .form-input,
.wpcf7-form .form-textarea,
.wpcf7-form .form-select {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1.5px solid #dbdbdb;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  background: #fff;
  outline: none;
  transition: border-color var(--transition-fast);
  box-sizing: border-box;
}

.wpcf7-form .form-input::placeholder,
.wpcf7-form .form-textarea::placeholder {
  color: #a5a5a5;
}

.wpcf7-form .form-input:focus,
.wpcf7-form .form-textarea:focus,
.wpcf7-form .form-select:focus {
  border-color: var(--color-pink);
}

.wpcf7-form .form-textarea {
  height: 150px;
  min-height: 150px;
  padding: 16px;
  resize: vertical;
}

.wpcf7-form .form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23a5a5a5' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  color: #a5a5a5;
}

.wpcf7-form .form-select.wpcf7-validates-as-required:valid {
  color: var(--color-text);
}

.wpcf7-form .form-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  margin-bottom: 24px;
}

.wpcf7-form .form-checkbox-wrap .wpcf7-form-control-wrap {
  display: inline-flex;
  flex-shrink: 0;
}

.wpcf7-form .form-checkbox-wrap .wpcf7-acceptance {
  display: inline-flex;
  align-items: center;
}

.wpcf7-form .form-checkbox-wrap .wpcf7-acceptance .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.wpcf7-form .form-checkbox-wrap .wpcf7-acceptance input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border: 1.5px solid #dbdbdb;
  border-radius: 5px;
  accent-color: var(--color-pink);
  cursor: pointer;
}

.wpcf7-form .form-checkbox-wrap .form-checkbox__text {
  color: #848484;
  font-family: var(--font-heading);
  font-weight: 500;
}

.wpcf7-form .form-checkbox-wrap .form-checkbox__link {
  color: #2389e9;
  text-decoration: none;
}

.wpcf7-form .form-checkbox-wrap .form-checkbox__link:hover {
  text-decoration: underline;
}

.wpcf7-form .form-submit {
  width: 100%;
  height: 58px;
  padding: 0;
  background: #ab1313;
  color: #fff;
  border: none;
  border-radius: 11px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.wpcf7-form .form-submit:hover {
  background: #8e1010;
}

.wpcf7-not-valid-tip {
  font-size: 13px;
  color: #df3030;
  margin-top: 6px;
  font-family: var(--font-heading);
}

.wpcf7-not-valid {
  border-color: #df3030 !important;
}

.wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-family: var(--font-heading);
}

.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--color-green);
  color: var(--color-green);
  background: #f7f9eb;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
  border-color: #df3030;
  color: #df3030;
  background: #fdf3f3;
}

.wpcf7 .ajax-loader {
  display: none;
}

/* Contact sidebar */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-sidebar__item {
  padding: 26px 24px;
  border-radius: 16px;
}

.contact-sidebar__icon {
  flex-shrink: 0;
}

.contact-sidebar__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-pink);
  margin-bottom: 10px;
}

.contact-sidebar__value {
  font-family: var(--font-number);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 10px;
}

.contact-sidebar__value a {
  color: var(--color-text);
  text-decoration: none;
}

.contact-sidebar__value a:hover {
  color: var(--color-pink);
}

.contact-sidebar__text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: #848484;
  line-height: 1.68;
}

.contact-sidebar__item--hours {
  padding: 24px;
}

.contact-sidebar__hours-label {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

.contact-sidebar__hours-value {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: #848484;
  line-height: 1.5;
}

/* --- Pagination --- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-md) 0;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  font-family: var(--font-number);
  font-size: 0.9rem;
  font-weight: 400;
  color: #848484;
  border: 1px solid #e3e3e3;
  background: #fff;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.pagination a:hover {
  border-color: var(--color-pink);
  color: var(--color-pink);
  background: #fff;
}

.pagination .current {
  background: var(--color-pink);
  color: #fff;
  border-color: var(--color-pink);
}

.pagination .dots {
  border: none;
  background: transparent;
}

/* --- Info Box (Program Details) --- */
.info-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}

.info-box__row {
  display: flex;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-border);
}

.info-box__row:last-child {
  border-bottom: none;
}

.info-box__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-green);
  min-width: 100px;
  flex-shrink: 0;
}

.info-box__value {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* --- Mission Cards --- */
.mission-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mission-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: var(--color-green-pale);
}

.mission-card:nth-child(even) {
  direction: rtl;
  background: #fff;
}

.mission-card:nth-child(even) > * {
  direction: ltr;
}

.mission-card__img {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.mission-card__img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.mission-card__num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-green);
  font-weight: 300;
  margin-bottom: 0.3rem;
}

.mission-card__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.mission-card__text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* --- Design Service Items --- */
.design-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.design-item {
  text-align: center;
}

.design-item__img {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.8rem;
  box-shadow: var(--shadow-sm);
}

.design-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-item__title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.design-item__text {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

/* --- Design Service Hero --- */
.design-service-hero {
  background: linear-gradient(135deg, var(--color-pink) 0%, #e8607e 50%, #f0849a 100%);
  padding: var(--space-2xl) 0;
  text-align: center;
}

/* --- Worry Cards --- */
.worry-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.worry-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  border: 1px solid var(--color-border);
}

.worry-card__icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.worry-card__icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 0 auto;
}

.worry-card__text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* --- Support Content (student) --- */
.support-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.support-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--color-border);
}

.support-card__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
}

.support-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.support-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.support-card__text {
  font-size: 0.8rem;
  color: var(--color-text-light);
  line-height: 1.7;
}

/* --- Check List --- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.check-list__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.check-list__item::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--color-green);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* --- City Stats --- */
.city-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin: 1.5rem 0;
}

.city-stat {
  text-align: center;
}

.city-stat__label {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-bottom: 0.2rem;
}

.city-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-green);
}

.city-stat__unit {
  font-size: 0.8rem;
  font-weight: 400;
}

/* --- Coordinator Card --- */
.coordinator-card {
  background: #fff;
  border: 2px solid var(--color-green-light);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  max-width: 500px;
  margin: 2rem auto;
}

.coordinator-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.coordinator-card__text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  line-height: 1.8;
}

/* --- Scroll Animation --- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Category Tabs --- */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

/* Uses .faq-tab styles */

/* --- Application Form Section --- */
.apply-form {
  background: var(--color-green-pale);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  margin: var(--space-xl) 0;
}

.apply-form__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* --- CTA Banner --- */
.cta-banner {
  background: var(--color-green-pale);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  margin: var(--space-xl) 0;
}

.cta-banner--pink {
  background: var(--color-pink-pale);
}

.cta-banner--yellow {
  background: var(--color-yellow-pale);
}

.cta-banner__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-green);
  margin-bottom: 0.5rem;
}

.cta-banner--pink .cta-banner__title {
  color: var(--color-pink);
}

.cta-banner--yellow .cta-banner__title {
  color: var(--color-yellow);
}

.cta-banner__text {
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-bottom: 1.2rem;
  line-height: 1.7;
}

/* --- WordPress Defaults --- */
.wp-block-image {
  margin: 1.5rem 0;
}

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

.alignleft {
  float: left;
  margin-right: 1.5rem;
}

.alignright {
  float: right;
  margin-left: 1.5rem;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Program (地域おこし協力隊プログラム) Page --- */

/* Program Header / Hero */
.program-header {
  background: #ebf9f0;
  padding: 60px 64px;
  text-align: center;
}

.program-header__label {
  display: block;
  font-family: var(--font-number);
  font-size: 15px;
  font-weight: 700;
  color: #4eb993;
  margin-bottom: 16px;
}

.program-header__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: #373737;
  margin-bottom: 16px;
}

.program-header__desc {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  color: #4eb993;
  line-height: 1.5;
}

/* Program Towada (ABOUT) */
.program-towada {
  background: #fff;
  padding: 60px 0 40px;
}

.program-towada__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.program-towada__img {
  flex-shrink: 0;
  width: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
}

.program-towada__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.program-towada__body {
  flex: 1;
}

.program-towada__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 900;
  color: #4eb993;
  margin-bottom: 16px;
}

.program-towada__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: #373737;
  margin-bottom: 16px;
}

.program-towada__text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.8;
  margin-bottom: 16px;
}

.program-towada__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.program-towada__stat {
  flex: 1;
  min-width: 0;
  padding: 16px 14px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.program-towada__stat--green-r {
  background: linear-gradient(to right, #cbf9e9, #fff);
}

.program-towada__stat--green-l {
  background: linear-gradient(to left, #fff, #cbf9e9);
}

.program-towada__stat--blue-r {
  background: linear-gradient(to right, #e4fbfb, #fff);
}

.program-towada__stat-label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: #a5a5a5;
  line-height: 1;
}

.program-towada__stat-value {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #373737;
  line-height: 1;
  white-space: nowrap;
}

/* Program Missions */
.program-missions {
  background: #fff;
  padding: 60px 0;
}

.program-mission {
  padding: 40px 0;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.program-mission__img {
  flex-shrink: 0;
  width: 380px;
  border-radius: 18px;
  overflow: hidden;
  background: #eee;
  aspect-ratio: 316 / 247;
}

.program-mission__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.program-mission__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.program-mission__num {
  display: block;
  font-family: var(--font-number);
  font-size: 2.25rem;
  font-weight: 700;
  color: #4eb993;
  padding: 4px 14px;
}

.program-mission__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #373737;
}

.program-mission__text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.82;
}

.program-mission__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #4eb993;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
  max-width: 283px;
}

.program-mission__btn:hover {
  background: #3fa880;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.program-mission__btn img {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* Program CTA */
.program-cta {
  padding: 20px 0 94px;
}

.program-cta .container {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.program-cta__title {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 700;
  color: #e77084;
  margin-bottom: 0;
}

.program-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 228px;
  height: 53px;
  padding: 15px 28px;
  font-size: 1.125rem;
  border-radius: var(--radius-xl);
}

.program-cta__btn img {
  width: 20px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Design Service (デザイン制作) Page --- */

/* DS Hero */
.ds-hero {
  background: var(--color-pink-pale);
  padding: 60px 64px 72px;
}

.ds-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

.ds-hero__body {
  flex: 0 0 591px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ds-hero__badge {
  display: inline-block;
  background: #fff;
  color: var(--color-pink);
  font-family: var(--font-number);
  font-size: 2rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 8px;
  align-self: flex-start;
}

.ds-hero__title {
  font-family: var(--font-heading);
  font-size: 2.625rem;
  font-weight: 700;
  color: #373737;
}

.ds-hero__subtitle {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #373737;
}

.ds-hero__desc {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.84;
  max-width: 494px;
}

.ds-hero__tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-hero__tag {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.5;
}

.ds-hero__img {
  flex-shrink: 0;
  width: 588px;
  height: 351px;
  border-radius: 24px;
  overflow: hidden;
  background: #eee;
}

.ds-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* DS Worry Cards */
.ds-worry {
  background: #fff;
  padding: 80px 64px;
}

.ds-worry__heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: #373737;
  text-align: center;
  margin-bottom: 34px;
}

.ds-worry__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.ds-worry__card {
  background: #fff;
  border: 1px solid var(--color-pink);
  border-radius: 18px;
  box-shadow: 0 8px 0 0 var(--color-pink);
  padding: 32px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ds-worry__card-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--color-pink-pale);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-worry__card-icon img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.ds-worry__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.56;
}

.ds-worry__card-text {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: #808080;
  line-height: 1.72;
}

/* DS Important Section */
.ds-important {
  position: relative;
  padding: 80px 0;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-important__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.ds-important__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.ds-important__img {
  flex-shrink: 0;
  width: 548px;
  border-radius: 10px;
  overflow: hidden;
}

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

.ds-important__body {
  flex: 1;
}

.ds-important__title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-pink);
  line-height: 1.84;
  margin-bottom: 1rem;
}

.ds-important__text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.84;
}

/* DS Products Grid */
.ds-products {
  background: var(--color-pink-pale);
  padding: 80px 64px;
}

.ds-products__heading {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  color: #373737;
  text-align: center;
  margin-bottom: 34px;
}

.ds-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1196px;
  margin: 0 auto;
}

.ds-products__card {
  background: #fff;
  border: 1px solid #ffd3d3;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ds-products__card-img {
  width: 273px;
  height: 180px;
  border-radius: 5px;
  overflow: hidden;
  background: #eee;
}

.ds-products__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-products__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #373737;
  line-height: 1.5;
}

.ds-products__card-text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 400;
  color: #373737;
  line-height: 1.72;
}

/* DS Flow Steps */
.ds-flow {
  background: #fff;
  padding: 80px 64px 40px;
}

.ds-flow__heading {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  color: #373737;
  text-align: center;
  margin-bottom: 30px;
}

.ds-flow__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1140px;
  margin: 0 auto;
}

.ds-flow__step {
  flex: 0 0 190px;
  background: var(--color-pink-pale);
  border-radius: 16px;
  padding: 26px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ds-flow__step-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-pink);
  line-height: 1;
}

.ds-flow__step-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #373737;
  line-height: 1.3;
}

.ds-flow__step-text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 400;
  color: #808080;
  line-height: 1.68;
}

.ds-flow__arrow {
  flex-shrink: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-flow__arrow img {
  display: block;
}

.ds-flow__arrow--end {
  width: 13px;
}

.ds-flow__note {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  color: #7f7f7f;
  text-align: center;
  margin-top: 30px;
}

/* DS CTA */
.ds-cta {
  padding: 60px 64px;
}

.ds-cta__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-pink);
  margin-bottom: 16px;
}

.ds-cta__text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.76;
  max-width: 832px;
  margin: 0 auto 16px;
}

.ds-cta__btn {
  padding: 17px 34px;
  font-size: 1.25rem;
  gap: 20px;
}

/* ============================
   Event Support Page (ev-)
   ============================ */

/* EV Hero */
.ev-hero {
  background: #FFFCEF;
  padding: 60px 64px 72px;
}

.ev-hero__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.ev-hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ev-hero__badge {
  display: inline-block;
  background: #fff;
  color: var(--color-yellow);
  font-family: var(--font-number);
  font-size: 2.25rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 8px;
  align-self: flex-start;
  line-height: 1;
}

.ev-hero__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: #373737;
}

.ev-hero__subtitle {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #373737;
  line-height: 1.4;
}

.ev-hero__desc {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.84;
}

.ev-hero__buttons {
  display: flex;
  gap: 14px;
  padding-top: 10px;
}

.ev-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: 30px;
  padding: 15px 28px;
  text-decoration: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  cursor: pointer;
}

.ev-hero__btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.ev-hero__btn--filled {
  background: var(--color-yellow);
  color: #fff;
  min-width: 205px;
}

.ev-hero__btn--filled:hover {
  color: #fff;
}

.ev-hero__btn--filled svg {
  flex-shrink: 0;
}

.ev-hero__btn--outline {
  background: #fff;
  color: var(--color-yellow);
  border: 1.4px solid var(--color-yellow);
  min-width: 223px;
}

.ev-hero__btn--outline:hover {
  color: var(--color-yellow);
}

.ev-hero__img {
  flex-shrink: 0;
  width: 587px;
  height: 420px;
  border-radius: 40px;
  overflow: hidden;
  background: #eee;
}

.ev-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* EV Recommend Cards */
.ev-recommend {
  background: #fff;
  padding: 80px 64px;
}

.ev-recommend__heading {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  color: #373737;
  text-align: center;
  margin-bottom: 34px;
}

.ev-recommend__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1230px;
  margin: 0 auto;
}

.ev-recommend__card {
  background: #fff;
  border: 2px solid var(--color-yellow);
  border-radius: 18px;
  box-shadow: 0 8px 0 0 var(--color-yellow);
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ev-recommend__card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFCEF;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ev-recommend__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #373737;
  line-height: 1.52;
}

.ev-recommend__card-text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #808080;
  line-height: 1.74;
}

/* EV Events Grid */
.ev-events {
  background: #FFFCEF;
  padding: 30px 64px;
}

.ev-events__heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: #373737;
  text-align: center;
  margin-bottom: 28px;
}

.ev-events__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29px;
  max-width: 848px;
  margin: 0 auto;
}

.ev-events__card {
  background: #fff;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ev-events__card-img {
  width: 100%;
  height: 138px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: #eee;
}

.ev-events__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-events__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #373737;
  padding-bottom: 12px;
}

/* EV Flow Steps */
.ev-flow {
  background: #fff;
  padding: 80px 64px;
}

.ev-flow__heading {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  color: #373737;
  text-align: center;
  margin-bottom: 30px;
}

.ev-flow__steps {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.ev-flow__step {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 26px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ev-flow__step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-yellow);
  color: #fff;
  font-family: var(--font-number);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 8px 20px;
  min-width: 86px;
}

.ev-flow__step-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #373737;
  line-height: 1.3;
}

.ev-flow__step-text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #808080;
  line-height: 1.68;
}

.ev-flow__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a3a3a3;
  font-size: 1.125rem;
  font-weight: 700;
}

/* EV CTA */
.ev-cta {
  padding: 48px 64px;
}

.ev-cta__inner {
  display: flex;
  align-items: center;
  gap: 36px;
  max-width: 891px;
  margin: 0 auto;
  background: #fff;
}

.ev-cta__img {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-cta__img img {
  width: 198px;
  height: 120px;
  object-fit: cover;
}

.ev-cta__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ev-cta__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-yellow);
}

.ev-cta__text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.76;
}

.ev-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--color-yellow);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 30px;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.ev-cta__btn:hover {
  color: #fff;
  opacity: 0.85;
  transform: translateY(-2px);
}

.ev-cta__btn svg {
  flex-shrink: 0;
}

/* ============================ FAQ Page (faq-) ============================ */

/* Hero */
.faq-hero {
  background: #FFF8F9;
  padding: 56px 20px 48px;
  text-align: center;
}

.faq-hero__label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-pink);
  margin-bottom: 8px;
}

.faq-hero__title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  color: #373737;
  margin-bottom: 16px;
}

.faq-hero__desc {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-pink);
}

/* Body */
.faq-body {
  background: #fff;
  padding: 48px 20px 64px;
}

.faq-body__inner {
  max-width: 840px;
  margin: 0 auto;
}

/* Tabs (overrides for FAQ page) */
.faq-body .faq-tabs {
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.faq-body .faq-tab {
  padding: 8px 20px;
  font-size: 0.9rem;
  border-radius: 20px;
}

.faq-tab--pink { color: var(--color-pink); }
.faq-tab--pink.is-active {
  border-color: var(--color-pink);
  color: var(--color-pink);
  background: var(--color-pink-pale);
}

.faq-tab--green { color: #72B94E; }
.faq-tab--green:hover { border-color: #72B94E; }
.faq-tab--green.is-active {
  border-color: #72B94E;
  color: #72B94E;
  background: #f2f9ee;
}

.faq-tab--blue { color: #629ACC; }
.faq-tab--blue:hover { border-color: #629ACC; }
.faq-tab--blue.is-active {
  border-color: #629ACC;
  color: #629ACC;
  background: #eef5fb;
}

.faq-tab--yellow { color: #F8C743; }
.faq-tab--yellow:hover { border-color: #F8C743; }
.faq-tab--yellow.is-active {
  border-color: #F8C743;
  color: #F8C743;
  background: #FFFCEF;
}

/* Group */
.faq-group {
  margin-bottom: 40px;
}

.faq-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.faq-body .faq-group__label {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 20px;
  margin-bottom: 0;
}

.faq-group__label--cyan { background: #37D4D4; }

.faq-group__suffix {
  font-size: 0.9rem;
  font-weight: 500;
  color: #808080;
}

.faq-group__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* FAQ items (overrides for new page) */
.faq-body .faq-item {
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  margin-bottom: 0;
  overflow: hidden;
  transition: background 0.25s ease;
}

.faq-body .faq-item__question {
  padding: 16px 20px;
  gap: 12px;
}

.faq-body .faq-item__question::before {
  display: none;
}

.faq-item__q-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.faq-item__q-label {
  font-family: var(--font-number);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.faq-item__q-text {
  font-size: 0.95rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.6;
}

.faq-item__toggle {
  font-size: 1.2rem;
  font-weight: 700;
  color: #AAAAAA;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  line-height: 1;
}

/* Per-category Q/A colors */
.faq-group--green .faq-item__q-label { color: #72B94E; }
.faq-group--green .faq-item__a-label { color: #72B94E; }
.faq-group--cyan .faq-item__q-label { color: #37D4D4; }
.faq-group--cyan .faq-item__a-label { color: #37D4D4; }
.faq-group--blue .faq-item__q-label { color: #629ACC; }
.faq-group--blue .faq-item__a-label { color: #629ACC; }
.faq-group--pink .faq-item__q-label { color: var(--color-pink); }
.faq-group--pink .faq-item__a-label { color: var(--color-pink); }
.faq-group--yellow .faq-item__q-label { color: #F8C743; }
.faq-group--yellow .faq-item__a-label { color: #F8C743; }

/* Open state backgrounds */
.faq-group--green .faq-item.is-open { background: #f2f9ee; }
.faq-group--cyan .faq-item.is-open { background: #eefbfb; }
.faq-group--blue .faq-item.is-open { background: #eef5fb; }
.faq-group--pink .faq-item.is-open { background: #FFF5F7; }
.faq-group--yellow .faq-item.is-open { background: #FFFCEF; }

/* Answer area */
.faq-body .faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-body .faq-item.is-open .faq-item__answer {
  max-height: 500px;
}

.faq-body .faq-item__answer-inner {
  padding: 16px 20px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.faq-body .faq-item__answer-inner::before {
  display: none;
}

.faq-item__a-label {
  font-family: var(--font-number);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
}

.faq-item__a-text {
  font-size: 0.9rem;
  font-weight: 400;
  color: #808080;
  line-height: 1.8;
}

.faq-item__a-text p {
  margin: 0;
}

/* CTA */
.faq-cta {
  background: #fff;
  border-radius: 16px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.06);
  padding: 48px 32px;
  text-align: center;
  margin-top: 24px;
}

.faq-cta__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #373737;
  margin-bottom: 12px;
}

.faq-cta__text {
  font-size: 0.9rem;
  font-weight: 400;
  color: #808080;
  line-height: 1.8;
  margin-bottom: 24px;
}

.faq-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-pink);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 60px;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.faq-cta__btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.faq-cta__btn svg {
  flex-shrink: 0;
}

/* --- Responsive Breakpoints --- */
@media (max-width: 1024px) {
  .site-nav {
    display: none;
  }

  .header-cta {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .mobile-nav {
    display: block;
  }

  .mobile-nav-overlay {
    display: block;
  }

  .service-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .recommend-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .worry-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .pickup-card {
    gap: 2rem;
  }

  .pickup-card__img {
    width: 340px;
    min-width: 260px;
    height: 226px;
  }

  .site-footer__inner {
    padding: 0 32px;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .svc-section {
    padding: 48px 32px;
  }

  .svc-section__inner {
    gap: 32px;
  }

  .svc-section__title {
    font-size: 24px;
  }

  .svc-page-header {
    padding: 60px 32px;
  }

  .svc-page-header__title {
    font-size: 34px;
  }

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

  .blog-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-sort {
    padding-top: 0;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-section {
    padding: 40px 0 60px;
  }

  .contact-form {
    padding: 28px 20px;
  }

  .insta-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Program page */
  .program-header {
    padding: 60px 32px;
  }

  .program-header__title {
    font-size: 2rem;
  }

  .program-towada {
    padding: 40px 0 30px;
  }

  .program-towada__inner {
    gap: 30px;
  }

  .program-towada__img {
    width: 300px;
  }

  .program-mission {
    gap: 30px;
  }

  .program-mission__img {
    width: 300px;
  }

  /* Design service */
  .ds-hero {
    padding: 48px 32px;
  }

  .ds-hero__body {
    flex: 1;
  }

  .ds-hero__img {
    width: 420px;
    height: 260px;
  }

  .ds-worry,
  .ds-products,
  .ds-flow {
    padding: 60px 32px;
  }

  .ds-worry__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .ds-important__inner {
    padding: 0 32px;
  }

  .ds-important__img {
    width: 400px;
  }

  /* Event support */
  .ev-hero {
    padding: 48px 32px;
  }

  .ev-hero__img {
    width: 420px;
    height: 300px;
  }

  .ev-recommend,
  .ev-events,
  .ev-flow {
    padding: 60px 32px;
  }

  .ev-recommend__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .ev-cta {
    padding: 40px 32px;
  }

  /* FAQ page */
  .faq-hero {
    padding: 48px 32px 40px;
  }

  .faq-body {
    padding: 40px 32px 56px;
  }

  .faq-cta {
    padding: 40px 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
  }

  .section {
    padding: 0;
  }

  .container {
    padding: 0;
  }

  .site-logo__text {
    font-size: 15px;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .section-title--display {
    font-size: 2rem;
  }

  /* Hero */
  .hero__title {
    font-size: 1.4rem;
  }

  .hero__photos {
    flex-direction: column;
    align-items: center;
  }

  .hero__photo {
    width: 100%;
    max-width: 400px;
  }

  /* Design service hero */
  .design-service-hero {
    padding: var(--space-xl) 0;
  }

  /* Service cards */
  .service-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* Works */
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Service list */
  .svc-section {
    padding: 0 20px 30px;
  }

  .svc-section__inner,
  .svc-section__inner--reverse {
    flex-direction: column;
    gap: 21px;
    align-items: center;
  }

  .svc-section__inner--reverse .svc-section__img {
    order: -1;
  }

  .svc-section__img {
    width: 100%;
    max-width: 330px;
  }

  .svc-section__img img {
    height: 282px;
    aspect-ratio: auto;
  }

  .svc-section__body {
    width: 100%;
    max-width: 330px;
    text-align: left;
    align-items: flex-start;
  }

  .svc-section__meta {
    justify-content: center;
  }

  .svc-section__title {
    font-size: 16px;
  }

  .svc-section__num {
    font-size: 48px;
  }

  .svc-wave {
    display: none;
  }

  .svc-page-header {
    padding: 48px 0;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .svc-page-header__title {
    font-size: 20px;
  }

  .svc-page-header__desc {
    font-size: 16px;
  }

  .svc-cta {
    padding: 20px 0 40px;
  }

  .svc-cta__inner {
    flex-direction: column;
    gap: 24px;
    text-align: left;
    align-items: center;
  }

  .svc-cta__text {
    font-size: 20px;
    width: 100%;
    text-align: center;
  }

  /* Service hero */
  .service-hero {
    grid-template-columns: 1fr;
  }

  /* Mission cards */
  .mission-card {
    grid-template-columns: 1fr;
  }

  .mission-card:nth-child(even) {
    direction: ltr;
  }

  /* Design grid */
  .design-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Event grid */
  .event-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Flow steps */
  .flow-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About Profile */
  .about-profile__inner {
    flex-direction: column;
  }

  .about-profile__img-wrap {
    width: 100%;
    max-width: 400px;
    border-radius: 200px 200px 0 0;
  }

  .about-profile__card {
    max-width: 100%;
    padding: 24px 28px;
    gap: 28px;
  }

  .about-profile__label {
    font-size: 48px;
    text-align: center;
  }

  .about-profile__greeting {
    font-size: 20px;
    text-align: center;
  }

  /* About Hero / Concept / Overview responsive */
  .about-hero {
    padding: 40px 20px;
    gap: 14px;
  }

  .about-hero__title {
    font-size: 20px;
  }

  .about-hero__desc {
    font-size: 16px;
  }

  .about-concept {
    padding: 30px 20px;
  }

  .about-concept__inner {
    gap: 38px;
  }

  .about-concept__title {
    font-size: 51px;
  }

  .about-concept__lead {
    font-size: 16px;
    letter-spacing: -1.12px;
  }

  .about-concept__text {
    font-size: 15px;
  }

  .about-concept__body {
    gap: 37px;
  }

  .about-profile {
    padding: 20px 15px;
  }

  .about-profile__img-wrap {
    width: 300px;
    border-radius: 150px 150px 0 0;
    object-fit: cover;
  }

  .about-profile__img {
    aspect-ratio: 277 / 379;
  }

  .about-profile__card {
    width: 100%;
    max-width: 339px;
    padding: 32px 28px;
    gap: 26px;
  }

  .about-profile__links {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .about-overview {
    padding: 40px 20px;
  }

  .about-overview__th {
    width: auto;
    flex-shrink: 0;
  }

  .about-cta {
    padding: 0 20px 52px;
  }

  .about-cta__inner {
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
  }

  .about-cta__title {
    font-size: 20px;
  }

  .about-cta__desc {
    font-size: 16px;
  }

  /* News card */
  .news-card {
    padding: 2rem 1.5rem;
  }

  /* Pickup card */
  .pickup-card {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .pickup-card__img {
    width: 100%;
    min-width: auto;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .pickup-card__badge {
    font-size: 1rem;
  }

  .pickup-card__title {
    font-size: 1.25rem;
  }

  .news-list__left {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .news-list__item {
    padding: 1rem;
  }

  /* Footer */
  .site-footer {
    background: #f7f9eb;
    padding: 0;
  }

  .site-footer__inner {
    padding: 42px 20px 0;
  }

  .footer-main {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 28px;
  }

  .footer-brand {
    order: 1;
    align-items: flex-start;
    gap: 5px;
  }

  .footer-logo {
    justify-content: flex-start;
  }

  .footer-logo--pill {
    border-radius: 7px;
    padding: 4px 18px 3px;
  }

  .footer-logo__img {
    width: 34px;
    height: 33px;
  }

  .footer-logo__text {
    font-size: 16px;
    letter-spacing: 2.24px;
  }

  .footer-brand__tagline {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.75px;
  }

  .footer-brand__info {
    font-size: 14px;
    letter-spacing: 0.7px;
    line-height: 28px;
  }

  .footer-nav-group h4 {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .footer-nav-group ul {
    gap: 0;
  }

  .footer-nav-group a {
    font-size: 14px;
  }

  .footer-bottom {
    background: #f7f9eb;
    border-top: none;
    padding: 22px 42px;
  }

  .footer-bottom__pill {
    border-radius: 20px;
    padding: 7px 20px;
  }

  .footer-bottom__text {
    font-size: 12px;
    color: #7f7f7f;
  }

  /* Blog search */
  .blog-search {
    text-align: center;
  }

  .blog-search__inner {
    max-width: 300px;
    margin: 0 auto;
    border-radius: 5px;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem;
    height: 48px;
  }

  .blog-search__btn {
    padding: 0 25px;
    font-size: 1rem;
  }

  .blog-search__hint {
    display: block;
    font-size: 0.9375rem;
    font-family: var(--font-heading);
    font-weight: 500;
    color: #a5a5a5;
    margin-top: 0.5rem;
    text-align: left;
  }

  /* Blog container */
  .blog-layout {
    padding: 40px 20px;
  }

  /* Blog filters */
  .blog-filter-row {
    margin-bottom: 0;
  }

  .blog-filters {
    gap: 10px;
    justify-content: center;
  }

  .blog-filter {
    padding: 4px 17px;
    font-size: 0.875rem;
  }

  .blog-sort {
    font-size: 15px;
  }

  /* Blog tags */
  .blog-tag {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Blog post item */
  .blog-post-item {
    gap: 10px;
    padding: 10px 0;
  }

  .blog-post-item__img {
    width: 100px;
    height: 60px;
    border-radius: 12px;
  }

  .blog-post-item__body {
    gap: 5px;
  }

  .blog-post-item__title {
    font-size: 14px;
  }

  .blog-post-item__excerpt {
    font-size: 13px;
  }

  .blog-post-item__cat {
    font-size: 12px;
    padding: 6px 13px;
    border-radius: 20px;
  }

  .blog-post-item__date {
    font-size: 13px;
  }

  /* Pagination */
  .pagination {
    gap: 10px;
    padding-top: 16px;
  }

  .pagination a,
  .pagination span {
    width: 44px;
    height: 44px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* Sidebar */
  .blog-sidebar {
    padding-top: 0;
  }

  .sidebar__section {
    padding: 0;
    border-radius: 16px;
  }

  .sidebar__title {
    font-size: 20px;
  }

  .sidebar__tags {
    gap: 8px;
  }

  .sidebar__tag {
    font-size: 12px;
    padding: 7px 12px;
    border-radius: 20px;
  }

  .sidebar__archive-label {
    font-size: 14px;
  }

  .sidebar__archive-count {
    font-size: 13px;
  }


  /* Related grid */
  .related-grid {
    grid-template-columns: 1fr;
  }


  .single-works__title {
    font-size: 24px;
  }

  .single-works__hero img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .single-works__intro {
    font-size: 16px;
  }

  .single-works__content h2,
  .single-works__sections h2 {
    font-size: 20px;
    margin: 32px 0 16px;
  }

  .single-works__content p {
    font-size: 15px;
  }

  .single-works__nav {
    flex-wrap: wrap;
    gap: 16px;
  }

  .single-works__nav-back {
    order: -1;
    width: 75%;
    text-align: center;
  }

  /* Recommend cards */
  .recommend-cards {
    grid-template-columns: 1fr;
  }

  /* Support cards */
  .support-cards {
    grid-template-columns: 1fr;
  }

  /* Contact CTA */
  .contact-cta__title {
    font-size: 1.5rem;
  }

  .concept-section__title {
    font-size: 2rem;
  }

  /* City stats */
  .city-stats {
    gap: 1.5rem;
  }

  /* Worry cards */
  .worry-cards {
    grid-template-columns: 1fr 1fr;
  }

  /* Program page */
  .program-header {
    padding: 40px 20px;
  }

  .program-header__title {
    font-size: 1.25rem;
  }

  .program-header__desc {
    font-size: 0.875rem;
  }

  .program-towada {
    padding: 0 0 25px;
  }

  .program-towada__inner {
    flex-direction: column;
    gap: 0;
  }

  .program-towada__img {
    width: 100%;
    border-radius: 0;
  }

  .program-towada__body {
    padding: 16px 20px 0;
  }

  .program-towada__title {
    font-size: 1.5rem;
  }

  .program-towada__stat {
    flex: none;
    width: 100%;
  }

  .program-missions {
    padding: 30px 0;
  }

  .program-mission {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
  }

  .program-mission--reverse .program-mission__img {
    order: -1;
  }

  .program-mission__img {
    width: 100%;
    max-width: 316px;
  }

  .program-mission__body {
    width: 100%;
    max-width: 316px;
  }

  .program-mission__num {
    font-size: 2.25rem;
    padding: 0 14px;
  }

  .program-mission__title {
    font-size: 1.5rem;
  }

  .program-mission__body {
    align-items: center;
    text-align: center;
  }

  .program-cta {
    padding: 4px 0 60px;
  }

  .program-cta .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .program-cta__title {
    font-size: 1.125rem;
  }

  /* Design service */
  .ds-hero {
    padding: 40px 20px;
  }

  .ds-hero__inner {
    flex-direction: column;
    gap: 20px;
  }

  .ds-hero__body {
    flex: none;
    width: 100%;
    gap: 12px;
  }

  .ds-hero__badge {
    font-size: 2rem;
    padding: 0 16px;
  }

  .ds-hero__title {
    font-size: 1.25rem;
  }

  .ds-hero__subtitle {
    font-size: 1.25rem;
  }

  .ds-hero__desc {
    font-size: 0.9375rem;
  }

  .ds-hero__img {
    width: 100%;
    height: 175px;
    aspect-ratio: auto;
    border-radius: 16px;
    order: -1;
  }

  .ds-worry,
  .ds-products,
  .ds-flow {
    padding: 48px 20px;
  }

  .ds-worry__heading {
    font-size: 1.5rem;
  }

  .ds-worry__cards {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .ds-worry__card {
    max-width: 287px;
    width: 100%;
    box-shadow: 0 8px 0 0 var(--color-pink);
  }

  .ds-important {
    padding: 48px 0;
  }

  .ds-important__inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 1.5rem;
    align-items: center;
  }

  .ds-important__img {
    width: 100%;
    max-width: 358px;
    border-radius: 10px;
  }

  .ds-important__body {
    text-align: center;
  }

  .ds-important__title {
    font-size: 1.5rem;
  }

  .ds-important__text {
    font-size: 1rem;
    text-align: left;
  }

  .ds-products__heading {
    font-size: 1.5rem;
  }

  .ds-products__grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .ds-products__card {
    max-width: 327px;
    width: 100%;
  }

  .ds-products__card-img {
    width: 100%;
    height: 180px;
  }

  .ds-flow__heading {
    font-size: 1.5rem;
  }

  .ds-flow__steps {
    flex-direction: column;
    gap: 19px;
    align-items: center;
  }

  .ds-flow__step {
    flex: none;
    width: 100%;
    max-width: 343px;
  }

  .ds-flow__step-num {
    font-size: 2.5rem;
  }

  .ds-flow__step-title {
    font-size: 1.25rem;
  }

  .ds-flow__step-text {
    font-size: 0.9375rem;
  }

  .ds-flow__arrow {
    display: none;
  }

  .ds-cta {
    padding: 0 20px 60px;
  }

  .ds-cta__title {
    font-size: 1.625rem;
  }

  .ds-cta__text {
    font-size: 0.9375rem;
  }

  .ds-cta__btn {
    padding: 17px 24px;
    font-size: 1rem;
    gap: 12px;
    width: 100%;
    max-width: 303px;
    border-radius: 30px;
  }

  /* Event support */
  /* --- Event Support SP --- */
  .ev-hero {
    padding: 20px;
  }

  .ev-hero__inner {
    flex-direction: column;
    gap: 15px;
  }

  .ev-hero__img {
    order: -1;
    width: 100%;
    height: 175px;
    aspect-ratio: auto;
    border-radius: 40px;
  }

  .ev-hero__body {
    gap: 18px;
  }

  .ev-hero__badge {
    font-size: 2.25rem;
  }

  .ev-hero__title {
    font-size: 1.5rem;
  }

  .ev-hero__subtitle {
    font-size: 1.5rem;
    line-height: 1.4;
  }

  .ev-hero__buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .ev-hero__btn {
    flex: none;
  }

  .ev-recommend {
    padding: 20px;
  }

  .ev-events,
  .ev-flow {
    padding: 30px 20px;
  }

  .ev-recommend__heading {
    font-size: 1.875rem;
  }

  .ev-recommend__cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ev-recommend__card {
    max-width: 300px;
    margin: 0 auto;
    box-shadow: 0 8px 0 0 var(--color-yellow);
  }

  .ev-events__heading {
    font-size: 1.3125rem;
    text-align: center;
  }

  .ev-events__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .ev-events__card-title {
    font-size: 1.125rem;
  }

  .ev-flow__heading {
    font-size: 1.875rem;
  }

  .ev-flow__steps {
    flex-direction: column;
    gap: 0;
    max-width: 308px;
    margin: 0 auto;
  }

  .ev-flow__step {
    width: 100%;
  }

  .ev-flow__arrow {
    transform: rotate(90deg);
  }

  .ev-cta {
    padding: 0 16px 48px;
  }

  .ev-cta__inner {
    flex-direction: column;
    gap: 36px;
    text-align: center;
  }

  .ev-cta__img {
    width: 200px;
  }

  .ev-cta__body {
    align-items: center;
  }

  .ev-cta__title {
    font-size: 1.25rem;
  }

  .ev-cta__btn {
    padding: 10px 16px;
    font-size: 1rem;
    align-self: center;
  }

  /* FAQ page */
  .faq-hero {
    padding: 40px 16px 32px;
  }

  .faq-hero__label {
    font-size: 1.6rem;
  }

  .faq-hero__title {
    font-size: 1.8rem;
  }

  .faq-hero__desc {
    font-size: 0.9rem;
  }

  .faq-body {
    padding: 32px 16px 48px;
  }

  .faq-body .faq-tabs {
    gap: 8px;
    margin-bottom: 32px;
  }

  .faq-body .faq-tab {
    padding: 6px 14px;
    font-size: 0.8rem;
  }

  .faq-group {
    margin-bottom: 32px;
  }

  .faq-body .faq-item__question {
    padding: 14px 16px;
  }

  .faq-item__q-text {
    font-size: 0.88rem;
  }

  .faq-body .faq-item__answer-inner {
    padding: 14px 16px 14px;
  }

  .faq-cta {
    padding: 32px 20px;
  }

  .faq-cta__title {
    font-size: 1.2rem;
  }

  .faq-cta__btn {
    padding: 14px 24px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .service-cards {
    grid-template-columns: 1fr;
  }

  .works-grid {
    grid-template-columns: 1fr;
  }

  .worry-cards {
    grid-template-columns: 1fr;
  }

  .flow-steps {
    grid-template-columns: 1fr;
  }

  .event-grid {
    grid-template-columns: 1fr;
  }

  .insta-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero__logo-img {
    width: 100px;
  }

  .hero__title {
    font-size: 1.2rem;
  }

  .contact-cta__buttons {
    flex-direction: column;
    align-items: center;
  }
}

/* --- Thanks Page --- */
.thanks-box {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
}

.thanks-box__icon {
  margin-bottom: var(--space-md);
}

.thanks-box__message {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 2;
  margin-bottom: var(--space-md);
}

.thanks-box__note {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.9;
  margin-bottom: var(--space-lg);
}

.thanks-box__actions {
  margin-top: var(--space-md);
}

/* --- Otameshi Page --- */
:root {
  --color-cyan: #37d4d4;
  --color-cyan-light: #5ee4e4;
  --color-cyan-bg: #eef9f9;
  --color-cyan-pale: #e4fbfb;
  --color-cyan-faint: #faffff;
}

.ota-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 30px;
  padding: 12px 34px;
  text-decoration: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  cursor: pointer;
  border: none;
}

.ota-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.ota-btn--primary {
  background: var(--color-cyan);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.ota-btn--primary:hover { color: #fff; }

.ota-btn--outline {
  background: #fff;
  color: var(--color-cyan);
  border: 2px solid var(--color-cyan);
  border-radius: 5px;
  padding: 16px 18px;
}

.ota-btn--outline:hover { color: var(--color-cyan); }

.ota-btn--full { width: 100%; border-radius: 28px; }

/* Hero */
.ota-hero {
  background: var(--color-cyan-bg);
  padding: 72px 64px;
}

.ota-hero__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1194px;
  margin: 0 auto;
  gap: 40px;
}

.ota-hero__body {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ota-hero__label {
  display: inline-block;
  font-family: var(--font-number);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-cyan);
  background: #fff;
  padding: 7px 16px;
  border-radius: 8px;
  align-self: flex-start;
}

.ota-hero__title {
  font-size: 40px;
  font-weight: 700;
  color: #373737;
}

.ota-hero__desc {
  font-size: 16px;
  font-weight: 500;
  color: #373737;
  line-height: 1.78;
}

.ota-hero__desc p { margin-bottom: 0; }
.ota-hero__desc p + p { margin-top: 1.5em; }

.ota-hero__buttons {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}

.ota-hero__img {
  flex-shrink: 0;
  width: 489px;
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
}

.ota-hero__img img {
  width: 100%;
  height: 435px;
  object-fit: cover;
  display: block;
}

/* About */
.ota-about {
  background: #fff;
  padding: 64px;
}

.ota-about__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1026px;
  margin: 0 auto;
}

.ota-about__img {
  flex-shrink: 0;
  width: 474px;
  border-radius: 16px;
  overflow: hidden;
}

.ota-about__img img {
  width: 100%;
  height: 377px;
  object-fit: cover;
  display: block;
}

.ota-about__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ota-about__label {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-cyan);
}

.ota-about__title {
  font-size: 28px;
  font-weight: 700;
  color: #373737;
}

.ota-about__text {
  font-size: 16px;
  font-weight: 500;
  color: #373737;
  line-height: 1.8;
}

.ota-about__stats {
  display: flex;
  /* justify-content: space-between; */
  gap: 7px;
}

.ota-about__stat {
  background: linear-gradient(90deg, var(--color-cyan-pale) 0%, #fff 100%);
  padding: 16px 14px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ota-about__stat-label {
  font-size: 12px;
  font-weight: 700;
  color: #a5a5a5;
}

.ota-about__stat-value {
  font-size: 17px;
  font-weight: 700;
  color: #373737;
}

/* Recruit */
.ota-recruit {
  background: var(--color-cyan-faint);
  padding: 80px 64px;
}

.ota-recruit__inner {
  max-width: 993px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ota-recruit__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ota-recruit__badge {
  display: inline-flex;
  align-items: center;
  background: var(--color-cyan);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 3px 19px;
  border-radius: 4px;
  width: fit-content;
}

.ota-recruit__content {
  font-size: 18px;
  font-weight: 500;
  color: #373737;
  line-height: 1.7;
}

.ota-recruit__content p { margin-bottom: 0; }

/* Theme Cards */
.ota-themes {
  padding: 80px 64px;
  text-align: center;
}

.ota-themes__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-bottom: 24px;
}

.ota-themes__label {
  font-family: var(--font-number);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-cyan);
}

.ota-themes__title {
  font-size: 30px;
  font-weight: 700;
  color: #373737;
}

.ota-themes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1198px;
  margin: 0 auto;
}

.ota-theme-card {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.ota-theme-card__head {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 75px;
  justify-content: center;
}

.ota-theme-card__num {
  font-family: var(--font-number);
  font-size: 32px;
  font-weight: 900;
  color: var(--color-cyan);
}

.ota-theme-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #373737;
}

.ota-theme-card__img {
  border-radius: 8px;
  overflow: hidden;
}

.ota-theme-card__img img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.ota-theme-card__desc {
  font-size: 16px;
  font-weight: 500;
  color: #373737;
  line-height: 1.6;
}

/* Flow */
.ota-flow {
  background: var(--color-cyan-bg);
  padding: 80px 64px;
  text-align: center;
}

.ota-flow__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin-bottom: 30px;
}

.ota-flow__label {
  font-family: var(--font-number);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-cyan);
}

.ota-flow__title {
  font-size: 30px;
  font-weight: 700;
  color: #373737;
}

.ota-flow__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1078px;
  margin: 0 auto;
}

.ota-flow__step {
  background: #fff;
  border: 2px solid var(--color-cyan);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 217px;
  height: 300px;
  text-align: center;
}

.ota-flow__step-num {
  font-family: var(--font-number);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-cyan);
}

.ota-flow__step-num--light { color: var(--color-cyan-light); }
.ota-flow__step--last { border-color: var(--color-cyan-light); }

.ota-flow__step-title {
  font-size: 17px;
  font-weight: 700;
  color: #373737;
  line-height: 1.5;
}

.ota-flow__step-img {
  width: 160px;
  height: 96px;
}

.ota-flow__step-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ota-flow__step-text {
  font-size: 15px;
  font-weight: 500;
  color: #373737;
  line-height: 1.64;
  text-align: left;
}

.ota-flow__arrow {
  flex-shrink: 0;
}

.ota-flow__arrow--start,
.ota-flow__arrow--end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Coordinator */
.ota-coordinator { padding: 80px 64px; }

.ota-coordinator__card {
  max-width: 966px;
  margin: 0 auto;
  background: #fff;
  border: 5px solid var(--color-cyan);
  border-radius: 30px;
  padding: 30px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
}

.ota-coordinator__title {
  font-size: 32px;
  font-weight: 700;
  color: #373737;
}

.ota-coordinator__content {
  display: flex;
  align-items: center;
  gap: 40px;
}

.ota-coordinator__photo {
  flex-shrink: 0;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
}

.ota-coordinator__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ota-coordinator__text {
  font-size: 20px;
  font-weight: 500;
  color: #373737;
  line-height: 1.64;
}

/* Apply Form */
.ota-apply {
  background: var(--color-cyan-bg);
  padding: 80px 64px;
}

.ota-apply__inner {
  max-width: 1186px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.ota-apply__title {
  font-size: 32px;
  font-weight: 700;
  color: #373737;
}

.ota-apply__layout {
  display: flex;
  gap: 40px;
  width: 100%;
  align-items: flex-start;
}

.ota-apply__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ota-apply__top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
}

.ota-apply__mission {
  flex: 1;
  max-width: 666px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ota-apply__form-label {
  font-size: 16px;
  font-weight: 700;
  color: #373737;
}

.ota-apply__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ota-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
  color: #373737;
  cursor: pointer;
}

.ota-checkbox input { display: none; }

.ota-checkbox__box {
  width: 22px;
  height: 22px;
  border: 1.5px solid #a5a5a5;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
}

.ota-checkbox input:checked + .ota-checkbox__box {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
}

.ota-checkbox input:checked + .ota-checkbox__box::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ota-apply__textarea {
  width: 100%;
  min-height: 120px;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 16px;
  font-family: var(--font-body);
  resize: vertical;
}

.ota-apply__textarea::placeholder { color: #a5a5a5; }

.ota-apply__fields {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 660px;
}

.ota-apply__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ota-apply__field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #373737;
}

.ota-apply__required {
  background: #df3030;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 11px;
}

.ota-apply__optional {
  background: #a5a5a5;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 11px;
}

.ota-apply__input {
  height: 52px;
  background: #fff;
  border: 1.5px solid #dbdbdb;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 16px;
  font-family: var(--font-body);
}

.ota-apply__input::placeholder { color: #a5a5a5; }

.ota-apply__sidebar {
  width: 353px;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid var(--color-cyan-light);
  border-radius: 18px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 100px;
}

.ota-apply__sidebar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-cyan);
  text-align: center;
}

.ota-apply__sidebar-text {
  font-size: 14px;
  font-weight: 500;
  color: #373737;
  line-height: 1.72;
}

.ota-apply__note {
  font-size: 20px;
  font-weight: 500;
  color: #7f7f7f;
  line-height: 1.7;
  max-width: 905px;
}

/* FAQ */
.ota-faq { padding: 80px 64px; }

.ota-faq__inner {
  max-width: 1197px;
  margin: 0 auto;
}

.ota-faq__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 33px;
}

.ota-faq__label {
  font-family: var(--font-number);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-cyan);
  letter-spacing: 0.06em;
  display: block;
}

.ota-faq__title {
  font-size: 30px;
  font-weight: 700;
  color: #383633;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ota-faq__title::before {
  content: "";
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--color-cyan);
}

.ota-faq__link {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  font-weight: 700;
  color: #383633;
  text-decoration: none;
}

.ota-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ota-faq-item {
  background: #fff;
  border: 1px solid #e5e4e2;
  border-radius: 14px;
  overflow: hidden;
}

.ota-faq-item.is-open { background: var(--color-cyan-bg); }

.ota-faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
}

.ota-faq-item.is-open .ota-faq-item__question {
  background: var(--color-cyan-bg);
}

.ota-faq-item__q-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ota-faq-item__q-label {
  font-family: var(--font-number);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-cyan);
}

.ota-faq-item__q-text {
  font-size: 16px;
  font-weight: 700;
  color: #373737;
}

.ota-faq-item__toggle {
  font-size: 18px;
  color: #a3a19c;
  flex-shrink: 0;
}

.ota-faq-item__answer {
  display: none;
  padding: 16px 24px 22px;
  background: #fff;
}

.ota-faq-item.is-open .ota-faq-item__answer { display: block; }

.ota-faq-item__a-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ota-faq-item__a-label {
  font-family: var(--font-number);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-cyan);
  flex-shrink: 0;
}

.ota-faq-item__a-text {
  font-size: 16px;
  font-weight: 700;
  color: #373737;
  line-height: 1.8;
}

/* Recruit label text (non-badge style for お申し込み方法) */
.ota-recruit__label-text {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-cyan);
  padding: 12px 24px;
  width: fit-content;
}

/* Apply CTA card */
.ota-apply__cta-card {
  background: #fff;
  border: 2px solid var(--color-cyan-light, #5ee4e4);
  border-radius: 18px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
  width: 353px;
  flex-shrink: 0;
}

.ota-apply__cta-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-cyan);
  text-align: center;
  width: 100%;
}

.ota-apply__cta-text {
  font-size: 13px;
  font-weight: 500;
  color: #373737;
  line-height: 1.72;
}

.ota-apply__footer-note {
  font-size: 20px;
  font-weight: 500;
  color: #7f7f7f;
  line-height: 1.7;
  text-align: center;
  margin-top: 21px;
  max-width: 905px;
}

/* --- Otameshi CF7 Form Override --- */

/* CF7 wrapper */
.ota-apply__mission .wpcf7 {
  width: 100%;
}

.ota-apply__mission .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Checkbox container — vertical card layout */
.ota-apply__checkboxes .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.ota-apply__checkboxes .wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ota-apply__checkboxes .wpcf7-list-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0;
  cursor: pointer;
  transition: border-color 0.2s;
}

.ota-apply__checkboxes .wpcf7-list-item:hover {
  border-color: var(--color-cyan);
}

.ota-apply__checkboxes .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  color: #373737;
}

.ota-apply__checkboxes .wpcf7-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1.5px solid #a5a5a5;
  border-radius: 6px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  margin: 0;
}

.ota-apply__checkboxes .wpcf7-list-item input[type="checkbox"]:checked {
  background: var(--color-cyan);
  border-color: var(--color-cyan);
}

.ota-apply__checkboxes .wpcf7-list-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Textarea */
.ota-apply__mission .wpcf7-textarea {
  width: 100%;
  min-height: 120px;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 16px;
  font-family: var(--font-body);
  resize: vertical;
  box-sizing: border-box;
  outline: none;
}

.ota-apply__mission .wpcf7-textarea::placeholder {
  color: #a5a5a5;
}

.ota-apply__mission .wpcf7-textarea:focus {
  border-color: var(--color-cyan);
}

/* Text / Email / Tel inputs */
.ota-apply__fields .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.ota-apply__fields .wpcf7-text,
.ota-apply__fields .wpcf7-email,
.ota-apply__fields .wpcf7-tel {
  width: 100%;
  height: 52px;
  background: #fff;
  border: 1.5px solid #dbdbdb;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 16px;
  font-family: var(--font-body);
  box-sizing: border-box;
  outline: none;
}

.ota-apply__fields .wpcf7-text::placeholder,
.ota-apply__fields .wpcf7-email::placeholder,
.ota-apply__fields .wpcf7-tel::placeholder {
  color: #a5a5a5;
}

.ota-apply__fields .wpcf7-text:focus,
.ota-apply__fields .wpcf7-email:focus,
.ota-apply__fields .wpcf7-tel:focus {
  border-color: var(--color-cyan);
}

/* Submit button */
.ota-apply__mission .wpcf7-submit {
  background: var(--color-cyan);
  border: none;
  border-radius: 28px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-heading);
  padding: 16px 26px;
  width: 100%;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 30px;
}

.ota-apply__mission .wpcf7-submit:hover {
  background: var(--color-cyan-light);
}

/* CF7 spinner */
.ota-apply__mission .wpcf7-spinner {
  display: none;
}

/* Validation */
.ota-apply__mission .wpcf7-not-valid {
  border-color: #df3030 !important;
}

.ota-apply__mission .wpcf7-not-valid-tip {
  font-size: 13px;
  color: #df3030;
  margin-top: 6px;
}

.ota-apply__mission .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
}

.ota-apply__mission .wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--color-cyan);
  color: var(--color-cyan);
  background: var(--color-cyan-faint);
}

/* --- Otameshi Responsive — 1024px --- */
@media (max-width: 1024px) {
  .ota-hero {
    padding: 60px 32px;
  }

  .ota-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .ota-hero__body {
    max-width: 100%;
    align-items: center;
    text-align: center;
    padding: 20px 0 0;
    order: 2;
  }

  .ota-hero__img {
    width: 400px;
    border-radius: 0;
    order: 1;
  }

  .ota-hero__title {
    font-size: 32px;
  }

  .ota-about {
    padding: 48px 32px;
  }

  .ota-about__inner {
    gap: 28px;
  }

  .ota-about__img {
    width: 380px;
  }

  .ota-recruit {
    padding: 60px 32px;
  }

  .ota-themes {
    padding: 60px 32px;
  }

  .ota-themes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ota-theme-card__img img {
    height: 231px;
  }

  .ota-flow {
    padding: 60px 32px;
  }

  .ota-flow__step {
    width: auto;
    flex: 1;
    padding: 20px 16px;
  }

  .ota-coordinator {
    padding: 60px 32px;
  }

  .ota-coordinator__card {
    padding: 30px 32px;
  }

  .ota-apply {
    padding: 60px 32px;
  }

  .ota-apply__top {
    flex-direction: column;
    gap: 24px;
  }

  .ota-apply__mission {
    max-width: 100%;
  }

  .ota-apply__cta-card {
    width: 100%;
  }

  .ota-apply__fields {
    max-width: 100%;
  }

  .ota-faq {
    padding: 60px 32px;
  }
}

/* --- Otameshi Responsive — 768px --- */
@media (max-width: 768px) {
  .ota-hero {
    padding: 20px 0;
  }

  .ota-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .ota-hero__body {
    max-width: 100%;
    align-items: center;
    text-align: center;
    padding: 20px 0 0;
    order: 2;
  }

  .ota-hero__img {
    width: 329px;
    border-radius: 0;
    order: 1;
  }

  .ota-hero__img img {
    height: 175px;
  }

  .ota-hero__title {
    font-size: 24px;
    text-align: left;
  }

  .ota-hero__desc {
    text-align: left;
  }

  .ota-hero__buttons {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .ota-hero__buttons .ota-btn {
    width: 275px;
  }

  .ota-about {
    padding: 0 0 20px;
  }

  .ota-about__inner {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .ota-about__img {
    width: 100%;
    border-radius: 0;
  }

  .ota-about__img img {
    width: 100%;
    height: auto;
  }

  .ota-about__body {
    /* padding: 0 25px; */
  }

  .ota-about__title {
    font-size: 20px;
  }

  .ota-about__text {
    font-size: 15px;
  }

  .ota-about__stats {
    flex-direction: row;
    gap: 8px;
  }

  .ota-about__stat {
    width: auto;
    flex: 1;
  }

  .ota-recruit {
    padding: 40px 25px;
  }

  .ota-recruit__content {
    font-size: 16px;
  }

  .ota-recruit__label-text {
    font-size: 18px;
    color: var(--color-cyan);
    background: #fff;
    padding: 12px 24px;
  }

  .ota-themes {
    padding: 80px 20px;
  }

  .ota-themes__grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
  }

  .ota-theme-card {
    width: 290px;
  }

  .ota-flow {
    padding: 80px 20px;
  }

  .ota-flow__steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .ota-flow__step {
    width: 100%;
    max-width: 329px;
  }

  .ota-flow__arrow {
    padding: 4px 0;
    transform: rotate(90deg);
  }

  .ota-flow__step-text {
    text-align: center;
  }

  .ota-coordinator {
    padding: 40px 23px;
  }

  .ota-coordinator__card {
    padding: 30px 20px;
    gap: 17px;
  }

  .ota-coordinator__title {
    font-size: 24px;
  }

  .ota-coordinator__content {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .ota-coordinator__photo {
    width: 187px;
    height: 187px;
  }

  .ota-coordinator__text {
    font-size: 15px;
    text-align: left;
  }

  .ota-apply {
    padding: 30px 20px;
  }

  .ota-apply__title {
    font-size: 20px;
  }

  .ota-apply__inner {
    gap: 21px;
  }

  .ota-apply__form {
    gap: 30px;
  }

  .ota-apply__top {
    flex-direction: column;
    gap: 30px;
  }

  .ota-apply__mission {
    max-width: 100%;
  }

  .ota-apply__cta-card {
    width: 100%;
    gap: 15px;
  }

  .ota-apply__cta-text {
    font-size: 13px;
  }

  .ota-apply__fields {
    max-width: 100%;
  }

  .ota-checkbox span:last-child {
    font-size: 14px;
  }

  .ota-apply__textarea {
    min-height: 170px;
    font-size: 14px;
  }

  .ota-apply__textarea::placeholder {
    font-size: 14px;
  }

  .ota-apply__form-label {
    font-size: 15px;
  }

  .ota-apply__footer-note {
    font-size: 15px;
  }

  .ota-apply__mission .ota-apply__form-label,
  .ota-apply__mission .ota-apply__field-label {
    font-size: 15px;
  }

  .ota-apply__checkboxes .wpcf7-list-item label {
    font-size: 14px;
  }

  .ota-apply__mission .wpcf7-textarea {
    min-height: 170px;
    font-size: 14px;
  }

  .ota-apply__fields .wpcf7-text,
  .ota-apply__fields .wpcf7-email,
  .ota-apply__fields .wpcf7-tel {
    font-size: 14px;
  }

  .ota-apply__mission .wpcf7-submit {
    margin-top: 20px;
  }

  .ota-faq {
    padding: 40px 22px;
  }

  .ota-faq__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 21px;
  }

  .ota-faq__title {
    font-size: 20px;
  }

  .ota-faq__title::before {
    width: 15px;
    height: 15px;
  }

  .ota-faq__link {
    font-size: 15px;
    align-self: flex-end;
  }

  .ota-faq-item__question {
    padding: 10px 24px;
  }

  .ota-faq-item__a-text {
    font-size: 14px;
  }
}

/* ============================================
   PC-TOP Figma Faithful Reproduction
   ============================================ */

/* --- Shared New Components --- */
.container--wide {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--narrow-lg {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.btn--round {
  border-radius: var(--radius-full);
}

.btn--outline-pink {
  background: #fff;
  border: 1px solid #e77084;
  color: #383660;
}

.btn--outline-pink:hover {
  background: #e77084;
  color: #fff;
  transform: translateY(-2px);
}

.btn__arrow {
  width: 26px;
  height: 26px;
}

.btn__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

.btn__chevron::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #e77084;
  border-right: 2px solid #e77084;
  transform: rotate(45deg);
  margin-left: -2px;
}

/* Section Header Pattern */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.section-header__left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.section-header__left .section-label {
  font-family: var(--font-number);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e77084;
  margin-bottom: 0;
  display: block;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: #383633;
  margin-top: 0.3rem;
}

.section-heading__dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e77084;
  flex-shrink: 0;
}

.section-heading__dot--lg {
  width: 21px;
  height: 21px;
}

.section-link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #383633;
  white-space: nowrap;
  text-decoration: none;
}

.section-link:hover {
  color: #e77084;
}

.section-link__icon {
  width: 26px;
  height: 26px;
}

/* --- Scroll Line (SVG mask) --- */
.front-page {
  position: relative;
  margin-top: calc(-1 * var(--header-height));
  isolation: isolate;
}

.scroll-line-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  overflow: visible;
}

.scroll-line-wrap svg {
  display: block;
  overflow: visible;
}

@media (max-width: 768px) {
  .scroll-line-wrap {
    display: none;
  }
}

#sl-visible-path {
  stroke-width: 0.21vw;
}

#sl-mask-path {
  stroke-width: 0.97vw;
}


@media (prefers-reduced-motion: reduce) {
  #sl-mask-path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* --- Hero FV Section --- */
.hero-fv {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 0;
  background-color: #FCFCF8;
}

.hero-fv__parts {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 100vh;
  height: 145svh;
  max-height: 1300px;
  z-index: 1;
}

.hero-fv__line {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero-fv__line--pink {
  width: 17.5vw;
  left: 31.06%;
  top: -0.2vw;
  transform: rotate(32deg);
  transform-origin: top left;
}

.hero-fv__line--blue {
  width: 20.7vw;
  left: 54.72%;
  top: 9.17vw;
  transform: rotate(-29.38deg);
  transform-origin: top left;
}

.hero-fv__line--yellow {
  width: 53.47vw;
  left: 15.45%;
  top: 29.51vw;
}

.hero-fv__line--green {
  width: 81.04vw;
  left: 4.47%;
  top: 18.4vw;
}

.hero-fv__photo {
  position: absolute;
  z-index: 2;
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.hero-fv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-fv__photo--tl {
  width: 19.58vw;
  left: 2.47%;
  top: 5%;
}

.hero-fv__photo--tr {
  width: 22.85vw;
  left: 77.97%;
  top: 5%;
}

.hero-fv__photo--ml {
  width: 22.22vw;
  left: -5.96%;
  top: 25%;
}

.hero-fv__photo--mr {
  width: 25.42vw;
  left: 83.43%;
  top: 26%;
}

.hero-fv__photo--bl {
  width: 20.42vw;
  height: 13.96vw;
  left: 3.47%;
  top: 45%;
}

.hero-fv__photo--br {
  width: 19.44vw;
  left: 75.97%;
  top: 43%;
}

.hero-fv__center {
  position: absolute;
  left: 50%;
  top: 11%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  width: 100%;
  max-width: 720px;
  padding: 0 1rem;
  box-sizing: border-box;
}

.hero-fv__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.7rem;
}

.hero-fv__logo-img {
  width: 12.78vw;
  object-fit: contain;
}

.hero-fv__logo-text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: #66635e;
  letter-spacing: 0.74em;
  margin-top: 0.3rem;
}

.hero-fv__catchcopy-img {
  max-width: 38.61vw;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.hero-fv__cta {
  margin-top: 4.5rem;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 1500px) {
  .hero-fv__photo--tl { width: 282px; }
  .hero-fv__photo--tr { width: 329px; }
  .hero-fv__photo--ml { width: 320px; }
  .hero-fv__photo--mr { width: 366px; }
  .hero-fv__photo--bl { width: 294px; height: 201px; }
  .hero-fv__photo--br { width: 280px; }

  .hero-fv__logo-img { width: 184px; }
  .hero-fv__catchcopy-img { max-width: 556px; }

  .hero-fv__line--pink { width: 252px; top: 43px; }
  .hero-fv__line--blue { width: 298px; top: 179px; }
  .hero-fv__line--yellow { width: 770px; top: 425px; }
  .hero-fv__line--green { width: 1167px; top: 265px; }
}

/* Hero FV Entrance Animation */
.hero-fv--animate .hero-fv__photo {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
}

.hero-fv--animate .hero-fv__photo.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.hero-fv--animate .hero-fv__center {
  opacity: 0;
  transform: translateX(-50%) translateY(15px);
}

.hero-fv--animate .hero-fv__center.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

@media (max-width: 768px) {
  .hero-fv--animate .hero-fv__photo {
    transform: none;
  }
  .hero-fv--animate .hero-fv__photo.is-visible {
    transform: none;
    transition: opacity 1.2s ease-out;
  }
  .hero-fv--animate .hero-fv__center {
    transform: translateX(-50%);
  }
  .hero-fv--animate .hero-fv__center.is-visible {
    transform: translateX(-50%);
    transition: opacity 1.4s ease-out;
  }
  /* SP: マスクアニメーション有効（PCと同じ） */
}

@media (prefers-reduced-motion: reduce) {
  .hero-fv--animate .hero-fv__photo,
  .hero-fv--animate .hero-fv__center {
    opacity: 1 !important;
    transition: none !important;
  }
  .hero-fv--animate .hero-fv__photo {
    transform: none !important;
  }
  .hero-fv--animate .hero-fv__center {
    transform: translateX(-50%) !important;
  }
}

/* --- News Card Section --- */
.section--news {
  padding: 3rem 0 4rem;
}

.news-card {
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 2px 5px rgba(165,165,165,0.3);
  overflow: hidden;
}

.news-card__inner {
  padding: 3.5rem 7.5rem;
}

.news-card__pickup {
  display: flex;
  gap: 4rem;
  align-items: center;
  margin-bottom: 3rem;
}

.news-card__pickup-img {
  width: 423px;
  height: 281px;
  flex-shrink: 0;
  border-radius: 30px;
  overflow: hidden;
  background: #eeedeb;
}

.news-card__pickup-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__pickup-placeholder {
  width: 100%;
  height: 100%;
  background: #eeedeb;
}

.news-card__pickup-body {
  flex: 1;
}

.news-card__badge {
  display: inline-block;
  background: #e77084;
  color: #fff;
  font-family: var(--font-number);
  font-size: 16px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 30px;
  margin-bottom: 1.2rem;
}

.news-card__pickup-meta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.2rem;
}

.news-card__cat-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: #7f7f7f;
  border: 1px solid #dadada;
  border-radius: 20px;
  padding: 5px 12px;
  background: #fff;
}

.news-card__date {
  font-family: var(--font-number);
  font-size: 13px;
  color: #7f7f7f;
}

.news-card__pickup-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: #383633;
  line-height: 1.5;
  margin-bottom: 0.9rem;
}

.news-card__pickup-excerpt {
  font-family: var(--font-heading);
  font-size: 16px;
  color: #373737;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #e77084;
  text-decoration: none;
}

.news-card__more svg {
  flex-shrink: 0;
}

.news-card__list {
  border-top: 1px solid #e5e4e2;
}

.news-card__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.6rem;
  border-top: 1px solid #e5e4e2;
  text-decoration: none;
  transition: background var(--transition-fast);
}

.news-card__list-item:first-child {
  border-top: none;
}

.news-card__list-item:hover {
  background: #fdf3f4;
}

.news-card__list-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.news-card__list-date {
  font-family: var(--font-number);
  font-size: 14px;
  color: #a3a19c;
}

.news-card__list-cat {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #a5a5a5;
  color: #7f7f7f;
  background: #fff;
}

.news-card__list-cat--green {
  background: #f7f9eb;
  border-color: #f7f9eb;
  color: #72b94e;
}

.news-card__list-cat--yellow {
  background: #fffcef;
  border-color: #fffcef;
  color: #f8c743;
}

.news-card__list-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: #383633;
}

.news-card__list-arrow {
  font-size: 14px;
  color: #e77084;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Concept Section (New) --- */
.section--concept {
  position: relative;
  padding: 7rem 2rem;
  text-align: center;
  background: #fff;
}

.concept-bg {
  position: absolute;
  inset: 40px 40px;
  background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #FFEBED 100%);
  border-radius: 361.5px;
  z-index: 0;
  overflow: hidden;
}

.concept-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.concept-title {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 400;
  color: #e77084;
  line-height: 1;
  margin-bottom: 2.5rem;
  letter-spacing: 0;
}

.concept-catchcopy {
  max-width: 516px;
  margin: 0 auto 2.5rem;
}

.concept-catchcopy img {
  width: 100%;
  height: auto;
}

.concept-text {
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 500;
  color: #373737;
  line-height: 2.32;
  text-align: center;
  margin-bottom: 2.5rem;
}

/* --- Service Cards (New) --- */
.section--services {
  padding: 4rem 0 4rem;
  position: relative;
  background: #fff;
}

.section--services > .container--wide {
  position: relative;
  z-index: 2;
}

.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 2rem;
}

.svc-card {
  background: #fffffe;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0,0,0,0.05);
  text-align: center;
  padding: 30px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
}

.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
}

.svc-card--pink { border: 1px solid #e77084; }
.svc-card--green { border: 1px solid #72b94e; }
.svc-card--blue { border: 1px solid #629acc; }
.svc-card--yellow { border: 1px solid #f8c743; }

.svc-card__img {
  height: 131px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.svc-card__img img {
  max-height: 131px;
  width: auto;
  object-fit: contain;
}

.svc-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.svc-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #383633;
}

.svc-card__sep {
  width: 59px;
  height: auto;
}

.svc-card__desc {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: #373737;
  line-height: 1.78;
  text-align: center;
}

.svc-card__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #383633;
}

.svc-card__link svg {
  flex-shrink: 0;
}

/* --- Works Section (New) --- */
.section--works {
  position: relative;
  padding: 4rem 0 8rem;
  background: #FEFAFA;
}

.section--works > .container--wide {
  position: relative;
  z-index: 2;
}

.works-grid-new {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.works-card-new {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition-base);
}

.works-card-new:hover {
  transform: translateY(-4px);
}

/* ============================================
   Student Support Page (生徒・学生向けサポート)
   ============================================ */

/* --- Hero --- */
.stu-hero {
  background: #f4f8fb;
  padding: 60px 64px 72px;
  overflow: hidden;
}

.stu-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
}

.stu-hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.stu-hero__label {
  display: inline-block;
  background: #fff;
  color: #629acc;
  font-family: var(--font-number);
  font-size: 32px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 8px;
  align-self: flex-start;
}

.stu-hero__title {
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 700;
  color: #373737;
  line-height: 1.3;
}

.stu-hero__subtitle {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #373737;
}

.stu-hero__desc {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: #373737;
  line-height: 1.84;
}

.stu-hero__hashtags {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stu-hero__hashtag {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: #629acc;
  line-height: 1.5;
}

.stu-hero__img {
  flex-shrink: 0;
  width: 560px;
  height: 336px;
  border-radius: 40px;
  overflow: hidden;
}

.stu-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- こんな学校におすすめです --- */
.stu-recommend {
  padding: 70px 64px 80px;
  overflow: hidden;
}

.stu-recommend__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 48px 52px;
  border-radius: 24px;
}

.stu-recommend__title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: #373737;
  text-align: center;
}

.stu-recommend__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 990px;
}

.stu-recommend__ill--left {
  width: 197px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
}

.stu-recommend__ill--left img {
  width: 100%;
  height: auto;
}

.stu-recommend__ill--right {
  width: 127px;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
}

.stu-recommend__ill--right img {
  width: 100%;
  height: auto;
}

.stu-recommend__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stu-recommend__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stu-recommend__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.stu-recommend__item span {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  color: #373737;
}

/* --- サポート内容 --- */
.stu-support {
  background: #fff;
  padding: 80px 64px;
  overflow: hidden;
}

.stu-support__inner {
  max-width: 832px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}

.stu-support__heading {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  color: #373737;
}

.stu-support__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 20px;
  width: 100%;
}

.stu-support__card {
  background: #f4f8fb;
  border-radius: 18px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.stu-support__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #629acc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.stu-support__icon--light {
  background: #84b0d7;
}

.stu-support__icon img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

.stu-support__icon--light .stu-support__icon-img {
  position: absolute;
  max-width: 58%;
  max-height: 68%;
}

.stu-support__icon-img--left {
  left: 0;
  top: 16%;
}

.stu-support__icon-img--right {
  left: 46%;
  top: 18%;
}

.stu-support__card-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #373737;
  text-align: center;
  line-height: 1.52;
}

.stu-support__card-text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  color: #808080;
  line-height: 1.74;
  text-align: left;
}

/* --- サポートの流れ --- */
.stu-flow {
  background: #f4f8fb;
  padding: 80px 64px;
  overflow: hidden;
}

.stu-flow__inner {
  max-width: 1192px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.stu-flow__title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: #373737;
}

.stu-flow__steps {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.stu-flow__step {
  flex: 1 1 0;
  background: #fff;
  border-radius: 16px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 220px;
}

.stu-flow__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #629acc;
  color: #fff;
  padding: 8px 31px;
  border-radius: 20px;
}

.stu-flow__badge img {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
}

.stu-flow__badge span {
  font-family: var(--font-number);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.stu-flow__arrow {
  font-size: 18px;
  font-weight: 700;
  color: #629acc;
  flex-shrink: 0;
}

.stu-flow__step-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #373737;
  text-align: center;
}

.stu-flow__step-text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 400;
  color: #373737;
  line-height: 1.68;
  text-align: left;
}

/* --- CTA --- */
.stu-cta {
  padding: 48px 64px;
  overflow: hidden;
}

.stu-cta__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 39px;
}

.stu-cta__ill {
  width: 200px;
  flex-shrink: 0;
}

.stu-cta__ill img {
  width: 156px;
  height: auto;
  margin: 0 auto;
}

.stu-cta__body {
  max-width: 618px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stu-cta__title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: #629acc;
  white-space: nowrap;
}

.stu-cta__text {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  color: #373737;
  line-height: 1.76;
}

.stu-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #629acc;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 30px;
  text-decoration: none;
  transition: opacity var(--transition-fast);
  align-self: flex-start;
}

.stu-cta__btn:hover {
  opacity: 0.85;
}

.stu-cta__btn img {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* --- Student Support Responsive --- */
@media (max-width: 1024px) {
  .stu-hero {
    padding: 48px 32px 56px;
  }

  .stu-hero__inner {
    flex-direction: column;
    gap: 32px;
  }

  .stu-hero__img {
    width: 100%;
    height: 280px;
  }

  .stu-hero__label {
    font-size: 26px;
  }

  .stu-hero__title {
    font-size: 30px;
  }

  .stu-recommend {
    padding: 48px 32px 56px;
  }

  .stu-recommend__content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .stu-recommend__list {
    order: -1;
    width: 100%;
  }

  .stu-recommend__ill--left,
  .stu-recommend__ill--right {
    width: 140px;
  }

  .stu-recommend__item span {
    font-size: 16px;
  }

  .stu-support {
    padding: 56px 32px;
  }

  .stu-flow {
    padding: 56px 32px;
  }

  .stu-flow__steps {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .stu-flow__step {
    min-height: auto;
    width: 100%;
    max-width: 343px;
  }

  .stu-flow__arrow {
    transform: rotate(90deg) !important;
  }

  .stu-flow__title {
    font-size: 28px;
  }

  .stu-cta {
    padding: 40px 32px;
  }

  .stu-cta__inner {
    flex-direction: column;
    text-align: center;
  }

  .stu-cta__body {
    align-items: center;
  }

  .stu-cta__btn {
    align-self: center;
  }
}

@media (max-width: 768px) {
  .stu-hero {
    padding: 20px 22px;
  }

  .stu-hero__inner {
    gap: 20px;
  }

  .stu-hero__img {
    order: -1;
    height: 175px;
    border-radius: 0;
  }

  .stu-hero__label {
    font-size: 32px;
    padding: 0 16px;
  }

  .stu-hero__title {
    font-size: 20px;
  }

  .stu-hero__subtitle {
    font-size: 20px;
  }

  .stu-hero__desc {
    font-size: 15px;
  }

  .stu-hero__hashtag {
    font-size: 15px;
  }

  .stu-recommend {
    padding: 20px 10px;
  }

  .stu-recommend__inner {
    padding: 20px 10px;
  }

  .stu-recommend__title {
    font-size: 24px;
  }

  .stu-recommend__content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }

  .stu-recommend__list {
    order: -1;
    width: 100%;
    gap: 8px;
  }

  .stu-recommend__ill--left {
    width: 131px;
  }

  .stu-recommend__ill--right {
    width: 110px;
  }

  .stu-recommend__item span {
    font-size: 16px;
  }

  .stu-support {
    padding: 40px 22px;
  }

  .stu-support__heading {
    font-size: 24px;
  }

  .stu-support__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .stu-flow {
    padding: 50px 12px;
  }

  .stu-flow__title {
    font-size: 32px;
  }

  .stu-flow__step {
    width: 320px;
    max-width: 100%;
    padding: 20px 18px;
  }

  .stu-flow__arrow {
    transform: rotate(90deg) !important;
  }

  .stu-cta {
    padding: 0 20px;
  }

  .stu-cta__inner {
    text-align: left;
  }

  .stu-cta__body {
    align-items: flex-start;
    margin-bottom: 50px;
    gap: 25px;
  }

  .stu-cta__ill {
    width: 143px;
  }

  .stu-cta__ill img {
    width: 143px;
  }

  .stu-cta__title {
    font-size: 20px;
    white-space: normal;
  }

  .stu-cta__text {
    font-size: 15px;
  }

  .stu-cta__btn {
    font-size: 16px;
    padding: 16px 32px;
    gap: 16px;
    align-self: center;
  }
}

.works-card-new__img {
  height: 170px;
  overflow: hidden;
  background: #eee;
}

.works-card-new__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.works-card-new__placeholder {
  width: 100%;
  height: 100%;
  background: #eee;
}

.works-card-new__body {
  padding: 16px 18px 20px;
  background: #fff;
}

.works-card-new__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.works-card-new__cat {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid #a5a5a5;
  color: #818181;
  background: #fff;
}

.works-card-new__cat--yellow {
  background: #fffcef;
  border-color: #fffcef;
  color: #f8c743;
}

.works-card-new__cat--green {
  background: #f7f9eb;
  border-color: #f7f9eb;
  color: #72b94e;
}

.works-card-new__date {
  font-family: var(--font-number);
  font-size: 13px;
  color: #a5a5a5;
}

.works-card-new__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #373737;
  line-height: 1.5;
}

/* --- Instagram Section (New) --- */
.section--instagram {
  position: relative;
  padding: 0;
}

.section--instagram__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -4rem;
  height: calc(100% + 4rem);
  background: #F7F9EB;
  z-index: 0;
}

.section--instagram > .container--wide {
  position: relative;
  z-index: 2;
}

.btn--follow {
  padding: .5rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  gap: 0.9rem;
  color: #e77084;
}

.insta-grid-new {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.insta-grid-new__item {
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: #eeedeb;
}

.insta-grid-new__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.insta-grid-new__item:hover img {
  transform: scale(1.08);
}

/* --- FAQ Section (New) --- */
.section--faq {
  padding: 4rem 0 0;
  background: #fff;
}

.faq-list-new {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item-new {
  border: 1px solid #e5e4e2;
  border-radius: 14px;
  overflow: hidden;
  background: #fffffe;
}

.faq-item-new__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1.5rem;
  cursor: pointer;
  background: #fff;
  transition: background var(--transition-fast);
}

.faq-item-new__question:hover {
  background: #fdf3f4;
}

.faq-item-new__question--open,
.faq-item-new.is-open .faq-item-new__question {
  background: #fdf3f4;
}

.faq-item-new__q-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.faq-item-new__q-label {
  font-family: var(--font-number);
  font-size: 20px;
  font-weight: 800;
  color: #e77084;
}

.faq-item-new__q-text {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #373737;
}

.faq-item-new__toggle {
  font-size: 18px;
  font-weight: 700;
  color: #e77084;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.faq-item-new__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.faq-item-new.is-open .faq-item-new__answer {
  max-height: 300px;
}

.faq-item-new__a-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 1.5rem 1.4rem;
  background: #fff;
}

.faq-item-new__a-label {
  font-family: var(--font-number);
  font-size: 20px;
  font-weight: 800;
  color: #e77084;
  flex-shrink: 0;
}

.faq-item-new__a-text {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #373737;
  line-height: 1.8;
}

/* --- Contact CTA (New) --- */
.section--contact-cta {
  padding: 4rem 0 5rem;
  text-align: center;
}

.home .section--contact-cta {
  padding-bottom: 26rem;
}

.contact-cta-new__title {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 400;
  color: #e77084;
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.contact-cta-new__lead {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 500;
  color: #383633;
  margin-bottom: 1.5rem;
}

.contact-cta-new__text {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: #373737;
  line-height: 1.84;
  margin-bottom: 2rem;
}

.contact-cta-new__buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================
   Responsive for New Sections
   ============================================ */
@media (max-width: 1024px) {

  .concept-title {
    font-size: 64px;
  }

  .concept-text {
    font-size: 18px;
  }

  .svc-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-card__inner {
    padding: 2.5rem 3rem;
  }

  .news-card__pickup {
    gap: 2rem;
  }

  .news-card__pickup-img {
    width: 300px;
    height: 200px;
  }

  .contact-cta-new__title {
    font-size: 64px;
  }

  .contact-cta-new__lead {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  /* --- Hero FV Tablet Layout --- */
  .hero-fv__parts {
    height: 100vh;
    height: 58svh;
    max-height: 960px;
  }

  .hero-fv__photo {
    border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }

  .hero-fv__photo--tl {
    width: 19.58vw;
    left: 2.47%;
    top: 5%;
  }

  .hero-fv__photo--tr {
    width: 26vw;
    left: 72%;
    top: 4%;
  }

  .hero-fv__photo--ml {
    width: 24vw;
    left: 0%;
    top: 30%;
  }

  .hero-fv__photo--mr {
    width: 25.42vw;
    left: 83.43%;
    top: 25%;
  }

  .hero-fv__photo--bl {
    width: 28vw;
    height: 20vw;
    left: 2%;
    top: 58%;
  }

  .hero-fv__photo--br {
    width: 24vw;
    left: 72%;
    top: 58%;
  }

  .hero-fv__center {
    top: 18%;
  }

  .hero-fv__logo {
    margin-bottom: 1.8rem;
  }

  .hero-fv__logo-img {
    width: 14vw;
  }

  .hero-fv__catchcopy-img {
    max-width: 50vw;
  }

  .hero-fv__cta {
    margin-top: 2.5rem;
  }

  .hero-fv__line {
    opacity: 0.6;
  }

  .hero-fv__line path {
    vector-effect: non-scaling-stroke;
  }

  .hero-fv__line--pink {
    width: 22vw;
    left: 20%;
    top: 1%;
    transform: rotate(30deg);
    transform-origin: top left;
  }

  .hero-fv__line--blue {
    width: 22vw;
    left: 58%;
    top: 5%;
    transform: rotate(-30deg);
    transform-origin: top left;
  }

  .hero-fv__line--yellow {
    width: 40vw;
    left: 58%;
    top: 35%;
    transform: rotate(-120deg);
    transform-origin: top left;
  }

  .hero-fv__line--green {
    width: 80vw;
    left: -5%;
    top: 30%;
    transform: rotate(-104deg) scaleY(-1);
    transform-origin: center center;
  }

  .hero-fv__logo-text {
    font-size: 11px;
  }

  .hero-fv__cta .btn {
    font-size: 0.85rem;
    padding: 0.7rem 1.5rem;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .section-heading {
    font-size: 21px;
  }

  .news-card__inner {
    padding: 0;
  }

  .news-card__pickup {
    flex-direction: column;
    gap: 1.5rem;
  }

  .news-card__pickup-img {
    width: 100%;
    height: 200px;
  }

  .news-card__pickup-title {
    font-size: 20px;
  }

  .concept-title {
    font-size: 48px;
  }

  .concept-text {
    font-size: 16px;
    padding: 0 20px;
  }

  .faq-item-new__q-text {
    font-size: 14px;
  }

  .concept-catchcopy {
    max-width: 90%;
  }

  .svc-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .svc-card {
    padding: 20px 16px;
  }

  .svc-card__title {
    font-size: 16px;
  }

  .svc-card__desc {
    font-size: 14px;
  }

  .works-grid-new {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .insta-grid-new {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-cta-new__title {
    font-size: 40px;
  }

  .contact-cta-new__lead {
    font-size: 20px;
  }

  .contact-cta-new__text {
    font-size: 15px;
  }

  .section--services {
    background: #fdf3f4;
  }
}

@media (max-width: 480px) {
  .home .section--contact-cta {
    padding-bottom: 2rem;
  }

  .section--concept {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .concept-content {
    max-width: 100%;
  }

  .concept-bg {
    inset: 20px 10px;
  }

  /* --- Hero FV SP Layout --- */
  .hero-fv__parts {
    height: 135vw;
    max-height: none;
    padding-top: 6vw;
  }

  .hero-fv__photo {
    border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }

  .hero-fv__photo--tl {
    width: 32vw;
    left: 36%;
    top: 6%;
  }

  .hero-fv__photo--tr {
    width: 34vw;
    height: 24vw;
    left: 63%;
    top: 23%;
  }

  .hero-fv__photo--ml {
    display: block;
    width: 31vw;
    height: 24vw;
    left: 5%;
    top: 20%;
  }

  .hero-fv__photo--mr {
    display: block;
    width: 33vw;
    height: 25vw;
    left: 64%;
    top: 62%;
  }

  .hero-fv__photo--bl {
    width: 32vw;
    height: 22vw;
    left: 0%;
    top: 61%;
  }

  .hero-fv__photo--br {
    width: 30vw;
    height: 20vw;
    left: 32%;
    top: 68%;
  }

  .hero-fv__center {
    top: 28%;
  }

  .hero-fv__logo {
    margin-bottom: 1.5rem;
  }

  .hero-fv__logo-img {
    width: 14.5vw;
  }

  .hero-fv__logo-text {
    font-size: 9px;
    letter-spacing: 0.37em;
  }

  .hero-fv__catchcopy-img {
    max-width: 60vw;
  }

  .hero-fv__cta {
    margin-top: 39vw;
  }

  .hero-fv__cta .btn {
    font-size: 14px;
    padding: 14px 24px;
    border-radius: 15px;
    white-space: normal;
    line-height: 1.35;
    border: 2px solid #fff;
    box-shadow: 0 0 8px rgba(181,181,181,0.75);
    max-width: 78vw;
  }

  .hero-fv__line {
    opacity: 0.6;
  }

  /* SP: viewBoxスケーリングで線が潰れるのを防止 */
  .hero-fv__line path {
    vector-effect: non-scaling-stroke;
  }

  /* 線を写真同士を繋ぐように配置 */
  .hero-fv__line--pink {
    width: 20vw;
    left: 28%;
    top: 1%;
    transform: rotate(28.5deg);
    transform-origin: top left;
  }

  .hero-fv__line--blue {
    width: 19vw;
    left: 65%;
    top: 13%;
    transform: rotate(-34deg);
    transform-origin: top left;
  }

  .hero-fv__line--yellow {
    width: 34vw;
    left: 89%;
    top: 68%;
    transform: rotate(-137deg);
  }

  .hero-fv__line--green {
    width: 100vw;
    left: -4%;
    top: 38%;
    transform: rotate(-127deg) scaleY(-1);
    transform-origin: center center;
  }

  .svc-cards {
    grid-template-columns: 1fr;
  }

  .works-grid-new {
    grid-template-columns: 1fr;
  }

  .insta-grid-new {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-cta-new__buttons {
    flex-direction: column;
    align-items: center;
  }

  .news-card__list-left {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* SP専用改行 */
.sp-br { display: none; }
@media (max-width: 480px) {
  .sp-br { display: inline; }
}

/* Otameshi Responsive */
@media (max-width: 1024px) {
  .ota-hero__inner { flex-direction: column; }
  .ota-hero__img { width: 100%; }
  .ota-hero__img img { height: auto; aspect-ratio: 16/10; }
  .ota-hero__title { font-size: 32px; }
  .ota-hero, .ota-about, .ota-recruit, .ota-themes,
  .ota-flow, .ota-coordinator, .ota-apply, .ota-faq { padding: 48px 32px; }
  .ota-about__inner { flex-direction: column; }
  .ota-about__img { width: 100%; }
  .ota-about__img img { height: auto; aspect-ratio: 16/10; }
  .ota-themes__grid { grid-template-columns: repeat(2, 1fr); }
  .ota-flow__steps { flex-wrap: wrap; gap: 16px; }
  .ota-flow__arrow { display: none; }
  .ota-flow__step { width: calc(50% - 8px); }
  .ota-coordinator__card { padding: 30px; }
  .ota-coordinator__content { flex-direction: column; text-align: center; }
  .ota-coordinator__photo { width: 180px; height: 180px; }
  .ota-apply__layout { flex-direction: column; }
  .ota-apply__sidebar { width: 100%; position: static; }
}

@media (max-width: 768px) {
  .ota-hero, .ota-about, .ota-recruit, .ota-themes,
  .ota-flow, .ota-coordinator, .ota-apply, .ota-faq { padding: 40px 20px; }
  .ota-hero__title { font-size: 26px; text-align: left; align-self: flex-start; }
  .ota-hero__label { font-size: 2rem; padding: 0 16px; }
  .ota-btn--outline { padding: 11px 18px; }
  .ota-hero__buttons { flex-direction: column; align-items: center; }
  .ota-about__title { font-size: 22px; }
  .ota-about__stats { flex-direction: column; gap: 8px; }
  .ota-themes__grid { grid-template-columns: 1fr; }
  .ota-themes__title { font-size: 24px; }
  .ota-flow__step { width: 100%; }
  .ota-flow__title { font-size: 24px; }
  .ota-coordinator__title { font-size: 24px; }
  .ota-coordinator__text { font-size: 16px; }
  .ota-apply__title { font-size: 24px; }
  .ota-recruit__badge { font-size: 16px; padding: 3px 16px; }
  .ota-recruit__content { font-size: 15px; }
  .ota-apply__note { font-size: 16px; }
  .ota-faq__header { flex-direction: column; gap: 16px; align-items: flex-start; }
  .ota-faq__title { font-size: 24px; }
}

/* ============================================
   Works Archive Page (活動実績一覧)
   ============================================ */

/* --- Works Archive Section --- */
.works-archive {
  padding: 56px 64px 36px;
}

.works-archive .container {
  max-width: 1312px;
  padding: 0;
}

/* --- Works Filter Tags --- */
.works-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.works-filter__tag {
  padding: 11px 20px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #e3e3e3;
  border-radius: 20px;
  color: #373737;
  background: #fff;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1;
}

.works-filter__tag:hover {
  border-color: var(--color-pink-light);
}

.works-filter__tag.is-active {
  border-color: var(--color-pink);
  color: var(--color-pink);
  background: var(--color-pink-pale);
}

.works-filter__tag--pink {
  color: #e77084;
}

.works-filter__tag--pink.is-active {
  border-color: #e77084;
  color: #e77084;
  background: #fdf3f4;
}

.works-filter__tag--green {
  color: #72b94e;
}

.works-filter__tag--green.is-active {
  border-color: #72b94e;
  color: #72b94e;
  background: #f7f9eb;
}

.works-filter__tag--blue {
  color: #629acc;
}

.works-filter__tag--blue.is-active {
  border-color: #629acc;
  color: #629acc;
  background: #e8f0f8;
}

.works-filter__tag--yellow {
  color: #f8c743;
}

.works-filter__tag--yellow.is-active {
  border-color: #f8c743;
  color: #f8c743;
  background: #fffcef;
}

/* --- Works Card category color variants --- */
.works-card-new__cat--pink {
  background: #fdf3f4;
  border-color: #fdf3f4;
  color: #e77084;
}

.works-card-new__cat--blue {
  background: #e8f0f8;
  border-color: #e8f0f8;
  color: #629acc;
}

/* --- Works Pagination (square style) --- */
.works-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px 0 0;
}

.works-pagination a,
.works-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e3e3e3;
  font-family: var(--font-number);
  font-size: 15px;
  font-weight: 400;
  color: #848484;
  background: #fff;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.works-pagination a:hover {
  border-color: var(--color-pink-light);
  color: var(--color-pink);
}

.works-pagination .current {
  background: #e77084;
  border-color: #e77084;
  color: #fff;
}

.works-pagination .prev,
.works-pagination .next {
  font-size: 18px;
  color: #c0c0c0;
}

/* --- Works Archive Responsive --- */
@media (max-width: 768px) {
  .page-header {
    padding: 48px 20px;
  }

  .page-header__title {
    font-size: 20px;
  }

  .page-header__desc,
  .page-header__desc--pink {
    font-size: 15px;
    line-height: 1.5;
  }

  .works-archive {
    padding: 24px 20px;
  }

  .works-archive .works-grid-new {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .works-filter {
    gap: 8px;
  }

  .works-filter__tag {
    font-size: 13px;
    padding: 9px 16px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .page-header {
    padding: 60px 32px;
  }

  .works-archive {
    padding: 40px 32px;
  }

  .works-archive .works-grid-new {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   Chiiki Support Page (cs-)
   ============================================ */

/* CS Hero */
.cs-hero {
  background: #f7f9eb;
  padding: 72px 64px;
  text-align: center;
}

.cs-hero__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.cs-hero__label {
  display: inline-block;
  color: #72b94e;
  font-family: var(--font-number);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.cs-hero__title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: #373737;
  line-height: 1.3;
}

.cs-hero__desc {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: #72b94e;
  line-height: 1.9;
}

/* CS About */
.cs-about {
  background: #fff;
  padding: 80px 64px;
}

.cs-about__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-about__img {
  flex-shrink: 0;
  width: 432px;
  border-radius: 16px;
  overflow: hidden;
}

.cs-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-about__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cs-about__label {
  display: inline-block;
  color: #72b94e;
  font-family: var(--font-number);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.cs-about__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #373737;
}

.cs-about__text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #373737;
  line-height: 1.84;
}

.cs-about__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #72b94e;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.cs-about__btn:hover {
  color: #fff;
  opacity: 0.85;
  transform: translateY(-2px);
}

.cs-about__btn img {
  flex-shrink: 0;
}

/* CS Recommend */
.cs-recommend {
  background: #f7f9eb;
  padding: 80px 64px;
}

.cs-recommend__header {
  text-align: center;
  margin-bottom: 40px;
}

.cs-recommend__label {
  display: inline-block;
  color: #72b94e;
  font-family: var(--font-number);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.cs-recommend__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #373737;
  margin-top: 8px;
}

.cs-recommend__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-recommend__card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cs-recommend__card-icon {
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cs-recommend__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-recommend__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #72b94e;
  line-height: 1.5;
}

.cs-recommend__card-text {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  line-height: 1.7;
}

/* CS Flow */
.cs-flow {
  background: #f7f9eb;
  padding: 0 64px 80px;
}

.cs-flow__header {
  text-align: center;
  margin-bottom: 40px;
}

.cs-flow__label {
  display: inline-block;
  color: #72b94e;
  font-family: var(--font-number);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.cs-flow__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #373737;
  margin-top: 8px;
}

.cs-flow__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}

.cs-flow__step {
  flex: 1;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cs-flow__step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #72b94e;
  color: #fff;
  font-family: var(--font-number);
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 18px;
}

.cs-flow__step-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: #373737;
  line-height: 1.4;
}

.cs-flow__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CS Programs */
.cs-programs {
  background: linear-gradient(180deg, #fff 0%, #f7f9eb 100%);
  padding: 80px 64px;
}

.cs-programs__header {
  text-align: center;
  margin-bottom: 40px;
}

.cs-programs__label {
  display: inline-block;
  color: #72b94e;
  font-family: var(--font-number);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.cs-programs__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #373737;
  margin-top: 8px;
}

.cs-programs__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.cs-programs__card {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.cs-programs__card-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  position: relative;
}

.cs-programs__card-badge {
  background: #E8F5E0;
  color: var(--color-green);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: 30%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}

.cs-programs__card-icon {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-programs__card:last-child .cs-programs__card-icon {
  width: 160px;
}

.cs-programs__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cs-programs__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #373737;
}

.cs-programs__card-text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #37373B;
  line-height: 1.7;
}

.cs-programs__card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 12px 0px;
  border-radius: 30px;
  text-decoration: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  width: 100%;
  max-width: 300px;
}

.cs-programs__card-btn:hover {
  color: #fff;
  opacity: 0.85;
  transform: translateY(-2px);
}

.cs-programs__card-btn--cyan {
  background: #37d4d4;
}

.cs-programs__card-btn--green {
  background: #4eb993;
}

.cs-programs__card-btn img {
  flex-shrink: 0;
}

/* CS CTA */
.cs-cta {
  background: #fff;
  padding: 60px 64px 80px;
}

.cs-cta__title {
  font-family: var(--font-heading);
  font-size: 1.625rem;
  font-weight: 700;
  color: #72b94e;
  margin-bottom: 12px;
}

.cs-cta__text {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: #373737;
  margin-bottom: 24px;
}

.cs-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #72b94e;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(114, 185, 78, 0.3);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.cs-cta__btn:hover {
  color: #fff;
  opacity: 0.85;
  transform: translateY(-2px);
}

.cs-cta__btn img {
  flex-shrink: 0;
}

/* CS Responsive — 1024px */
@media (max-width: 1024px) {
  .cs-hero {
    padding: 60px 32px;
  }

  .cs-about {
    padding: 60px 32px;
  }

  .cs-about__inner {
    gap: 32px;
  }

  .cs-about__img {
    width: 350px;
  }

  .cs-recommend,
  .cs-flow {
    padding-left: 32px;
    padding-right: 32px;
  }

  .cs-programs {
    padding: 60px 32px;
  }

  .cs-cta {
    padding: 48px 32px 60px;
  }
}

/* CS Responsive — 768px */
@media (max-width: 768px) {
  .cs-hero {
    padding: 40px 20px;
  }

  .cs-hero__title {
    font-size: 1.25rem;
  }

  .cs-hero__desc {
    font-size: 0.875rem;
  }

  .cs-about {
    padding: 40px 0;
  }

  .cs-about__inner {
    flex-direction: column;
    gap: 24px;
    align-items: center;
  }

  .cs-about__img {
    width: 100%;
    max-width: 330px;
    border-radius: 16px;
  }

  .cs-about__body {
    padding: 0 20px;
    align-items: center;
    text-align: center;
  }

  .cs-about__title {
    font-size: 1.5rem;
  }

  .cs-about__btn {
    align-self: center;
    border-radius: 15px;
    font-size: 1rem;
    padding: 12px 24px;
  }

  .cs-recommend {
    padding: 48px 20px;
  }

  .cs-recommend__title {
    font-size: 1.5rem;
  }

  .cs-recommend__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }

  .cs-recommend__card {
    max-width: 330px;
    width: 100%;
    padding: 32px 10px;
  }

  .cs-flow {
    padding: 0 20px 48px;
  }

  .cs-flow__title {
    font-size: 1.25rem;
  }

  .cs-flow__steps {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }

  .cs-flow__step {
    flex: none;
    width: 100%;
    max-width: 330px;
  }

  .cs-flow__arrow {
    transform: rotate(90deg);
  }

  .cs-programs {
    padding: 48px 20px;
  }

  .cs-programs__title {
    font-size: 1.25rem;
  }

  .cs-programs__cards {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }

  .cs-programs__card {
    max-width: 330px;
    width: 100%;
    padding: 32px 10px;
  }

  .cs-programs__card-btn {
    font-size: 1rem;
  }

  .cs-cta {
    padding: 48px 20px 60px;
  }

  .cs-cta__title {
    font-size: 1.25rem;
  }

  .cs-cta__btn {
    padding: 14px 32px;
    font-size: 1rem;
    width: 100%;
    max-width: 240px;
  }
}

/* --- スクロール線: セクション内コンテンツは線の前面、背景は線の背面 --- */
.section--news > .container--wide,
.section--faq > .container--narrow-lg,
.section--contact-cta > .container {
  position: relative;
  z-index: 2;
}

/* コンセプト: 背景は線の背面、コンテンツは線の前面 */
.section--concept .concept-bg {
  z-index: 0;
}
.section--concept .concept-content {
  z-index: 2;
}

/* --- Share Buttons SP --- */
@media (max-width: 768px) {
  .share-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .share-btn {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    gap: 0.3rem;
  }

  .share-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* --- 404 Error Page --- */
.error-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdf3f4;
  padding: 80px 20px;
}

.error-404__inner {
  text-align: center;
  max-width: 500px;
}

.error-404__number {
  font-family: var(--font-display);
  font-size: 6rem;
  font-weight: 400;
  color: var(--color-pink);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
}

.error-404__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #373737;
  margin-bottom: 1rem;
}

.error-404__text {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #808080;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.error-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-pink);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 30px;
  text-decoration: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.error-404__btn:hover {
  color: #fff;
  opacity: 0.85;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .error-404 {
    padding: 60px 20px;
  }

  .error-404__number {
    font-size: 4rem;
  }

  .error-404__title {
    font-size: 1.25rem;
  }
}

/* --- Single Post Responsive --- */
@media (max-width: 768px) {
  .single-post {
    padding: 40px 10px 0;
  }

  .single-post__title {
    font-size: 24px;
  }

  .single-post__thumbnail img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .single-post__sections h2 {
    font-size: 18px;
  }

  .single-post__section-img img {
    height: auto;
  }

  .single-post__content h2 {
    font-size: 18px;
  }

  .single-post__nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .single-post__nav-back {
    order: -1;
    width: 100%;
    text-align: center;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Single Works Responsive --- */
@media (max-width: 768px) {
  .single-works {
    padding: 40px 10px 0;
  }

  .single-works__title {
    font-size: 24px;
  }

  .single-works__hero img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .single-works__sections h2 {
    font-size: 18px;
  }

  .single-works__section-img img {
    height: auto;
  }

  .single-works__content h2 {
    font-size: 18px;
  }

  .single-works__nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }

  .single-works__nav-back {
    order: -1;
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   Inner Page Animations
   ============================================ */

/* --- @keyframes --- */
@keyframes yuumi-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes yuumi-fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes yuumi-fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yuumi-fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes yuumi-scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes yuumi-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes yuumi-softPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.04); }
}

@keyframes yuumi-sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(1.5deg); }
  75%      { transform: rotate(-1.5deg); }
}

@keyframes yuumi-lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --- Page Header Entrance Animations (inner pages only) --- */
body:not(.home) .page-header,
body:not(.home) .svc-page-header,
body:not(.home) .about-hero,
body:not(.home) .faq-hero {
  position: relative;
  overflow: hidden;
}

body:not(.home) .page-header__label,
body:not(.home) .svc-page-header__label,
body:not(.home) .about-hero__label,
body:not(.home) .faq-hero__label {
  animation: yuumi-fadeInDown 0.6s ease both;
  animation-delay: 0.15s;
}

body:not(.home) .page-header__title,
body:not(.home) .svc-page-header__title,
body:not(.home) .about-hero__title,
body:not(.home) .faq-hero__title {
  animation: yuumi-fadeInUp 0.6s ease both;
  animation-delay: 0.35s;
  position: relative;
}

/* Decorative underline for title */
body:not(.home) .page-header__title::after,
body:not(.home) .svc-page-header__title::after,
body:not(.home) .about-hero__title::after,
body:not(.home) .faq-hero__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: #e77084;
  border-radius: 2px;
  margin: 14px auto 0;
  transform-origin: center;
  animation: yuumi-lineGrow 0.5s ease both;
  animation-delay: 0.7s;
}

body:not(.home) .page-header__desc,
body:not(.home) .page-header__desc--pink,
body:not(.home) .svc-page-header__desc,
body:not(.home) .about-hero__desc,
body:not(.home) .faq-hero__desc {
  animation: yuumi-fadeInUp 0.6s ease both;
  animation-delay: 0.55s;
}

/* --- Decorative floating dots on page headers --- */
body:not(.home) .page-header::before,
body:not(.home) .svc-page-header::before,
body:not(.home) .about-hero::before,
body:not(.home) .faq-hero::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(231, 112, 132, 0.25);
  top: 24%;
  left: 12%;
  animation: yuumi-float 3.5s ease-in-out infinite;
  pointer-events: none;
}

body:not(.home) .page-header::after,
body:not(.home) .svc-page-header::after,
body:not(.home) .about-hero::after,
body:not(.home) .faq-hero::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(114, 185, 78, 0.25);
  bottom: 18%;
  right: 15%;
  animation: yuumi-float 4s ease-in-out infinite 1s;
  pointer-events: none;
}

/* --- Scroll Fade-in Variants --- */
.fade-in--left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in--right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in--up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in--scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in--left.is-visible,
.fade-in--right.is-visible,
.fade-in--up.is-visible,
.fade-in--scale.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Stagger Items (grid children) --- */
.stagger-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--stagger-index, 0) * 0.1s);
}

.stagger-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Hover Enhancements (inner pages) --- */
body:not(.home) .works-card-new {
  transition: transform var(--transition-base), box-shadow 0.3s ease;
}

body:not(.home) .works-card-new:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(231, 112, 132, 0.18);
}

body:not(.home) .blog-post-item {
  transition: background 0.3s ease, transform 0.3s ease;
}

body:not(.home) .blog-post-item:hover {
  opacity: 1;
  transform: translateX(4px);
  background: rgba(231, 112, 132, 0.04);
}

/* CTA button sway */
body:not(.home) .svc-cta__btn,
body:not(.home) .about-cta__btn,
body:not(.home) .faq-cta__btn,
body:not(.home) .stu-cta__btn,
body:not(.home) .ev-cta__btn,
body:not(.home) .ds-cta__btn {
  animation: yuumi-sway 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* --- 404 Page Special Effects --- */
.error-404 {
  position: relative;
  overflow: hidden;
}

.error-404__number {
  animation: yuumi-softPulse 3s ease-in-out infinite;
}

.error-404__title {
  animation: yuumi-fadeInUp 0.6s ease both;
  animation-delay: 0.2s;
}

.error-404__text {
  animation: yuumi-fadeInUp 0.6s ease both;
  animation-delay: 0.4s;
}

.error-404__btn {
  animation: yuumi-fadeInUp 0.6s ease both;
  animation-delay: 0.6s;
}

/* 404 decorative floating circles */
.error-404::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(231, 112, 132, 0.08) 0%, transparent 70%);
  top: 15%;
  left: 8%;
  animation: yuumi-float 5s ease-in-out infinite;
  pointer-events: none;
}

.error-404::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 185, 78, 0.08) 0%, transparent 70%);
  bottom: 20%;
  right: 10%;
  animation: yuumi-float 4s ease-in-out infinite 1.5s;
  pointer-events: none;
}

/* --- Reduced Motion: disable all inner page animations --- */
@media (prefers-reduced-motion: reduce) {
  body:not(.home) .page-header__label,
  body:not(.home) .svc-page-header__label,
  body:not(.home) .about-hero__label,
  body:not(.home) .faq-hero__label,
  body:not(.home) .page-header__title,
  body:not(.home) .svc-page-header__title,
  body:not(.home) .about-hero__title,
  body:not(.home) .faq-hero__title,
  body:not(.home) .page-header__title::after,
  body:not(.home) .svc-page-header__title::after,
  body:not(.home) .about-hero__title::after,
  body:not(.home) .faq-hero__title::after,
  body:not(.home) .page-header__desc,
  body:not(.home) .page-header__desc--pink,
  body:not(.home) .svc-page-header__desc,
  body:not(.home) .about-hero__desc,
  body:not(.home) .faq-hero__desc,
  .error-404__number,
  .error-404__title,
  .error-404__text,
  .error-404__btn {
    animation: none !important;
  }

  body:not(.home) .page-header::before,
  body:not(.home) .page-header::after,
  body:not(.home) .svc-page-header::before,
  body:not(.home) .svc-page-header::after,
  body:not(.home) .about-hero::before,
  body:not(.home) .about-hero::after,
  body:not(.home) .faq-hero::before,
  body:not(.home) .faq-hero::after,
  .error-404::before,
  .error-404::after {
    animation: none !important;
    display: none;
  }

  .fade-in--left,
  .fade-in--right,
  .fade-in--up,
  .fade-in--scale,
  .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body:not(.home) .svc-cta__btn,
  body:not(.home) .about-cta__btn,
  body:not(.home) .faq-cta__btn,
  body:not(.home) .stu-cta__btn,
  body:not(.home) .ev-cta__btn,
  body:not(.home) .ds-cta__btn {
    animation: none !important;
  }
}

/* ── Utility: SP / PC display toggle ── */
.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}