.home-hero {
  --hero-object-position-sp: 50% 48%;
  --hero-object-position-pc: 50% 50%;
  border-bottom: var(--border-default);
}
.hero-inner { position: relative; isolation: isolate; display: grid; padding-top: 210px; }
.hero-media { position: absolute; z-index: -2; top: var(--space-3); right: calc(-1 * var(--page-padding-sp)); left: calc(-1 * var(--page-padding-sp)); height: 420px; overflow: hidden; background: var(--image-bg); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-object-position-sp); }
.hero-media::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(to bottom, transparent, var(--color-bg) 88%); }
.hero-copy { padding-top: var(--space-6); }
.hero-copy h1 { font-size: var(--hero-font-sp); line-height: 1.5; letter-spacing: -.045em; }
.hero-copy h1 span { display: block; }
.hero-lead { margin-top: var(--space-5); font-size: var(--font-size-base); line-height: var(--line-height-body); }
.desktop-break { display: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: var(--button-height); padding: var(--space-3) var(--button-padding-x); border-radius: var(--button-radius); font-weight: var(--font-weight-bold); text-align: center; }
.button-primary { background: var(--color-accent); color: var(--color-on-accent); font-size: var(--font-size-base); }
.button-primary:hover { background: var(--color-accent-hover); }
.hero-copy .button { width: 100%; margin-top: var(--space-5); }
.hero-points { display: grid; gap: var(--space-3); margin-block: var(--space-6); }
.hero-points li { display: grid; grid-template-columns: var(--icon-size) minmax(0,1fr); align-items: center; gap: var(--space-3); padding: var(--space-3); border: var(--border-default); border-radius: var(--radius-md); background: var(--color-bg); }
.hero-points img { width: var(--icon-size); height: var(--icon-size); object-fit: contain; }
.hero-points strong,.hero-points small { display: block; }
.hero-points strong { font-size: var(--font-size-sm); line-height: var(--line-height-heading); }
.hero-points small { margin-top: var(--space-1); color: var(--color-text-sub); font-size: var(--font-size-xs); }

.home-categories { margin-top: var(--space-section-small); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-heading h2 { position: relative; padding-bottom: var(--space-3); font-size: var(--font-size-xl); }
.section-heading h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: var(--section-rule-width); height: 3px; background: var(--color-accent); }
.section-heading p { color: var(--color-text-sub); font-size: var(--font-size-sm); }
.section-kicker { margin-bottom: var(--space-1); color: var(--color-accent); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .08em; }
.category-grid { display: grid; gap: var(--space-5); }
.category-card { min-width: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-lg); transition: box-shadow var(--transition-fast); }
.category-card:hover { box-shadow: var(--shadow-card-hover); }
.image-media { position: relative; overflow: hidden; background: var(--image-bg); }
.category-image { aspect-ratio: 1.95; }
.category-image img { width: 100%; height: 100%; object-fit: cover; }
.category-grid .category-card:first-child .category-image img { object-position: center 60%; }
.category-grid .category-card:nth-child(2) .category-image img { object-position: center top; }
.category-copy { position: relative; padding: var(--space-4) var(--space-9) var(--space-5) var(--space-5); }
.category-copy h3 { margin-bottom: var(--space-2); font-size: var(--font-size-lg); }
.category-copy p { color: var(--color-text-sub); font-size: var(--font-size-sm); }
.circle-arrow { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--font-size-lg); }
.category-copy .circle-arrow { position: absolute; top: 50%; right: var(--space-4); transform: translateY(-50%); }

.home-comparison { margin-top: var(--space-section-small); padding-block: var(--space-section-small); background: var(--color-surface-warm); }
.comparison-heading { align-items: flex-end; }
.comparison-feature { display: grid; overflow: hidden; border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-card); }
.comparison-image { min-height: 260px; }
.comparison-image img { width: 100%; height: 100%; object-fit: cover; }
.comparison-copy { padding: var(--space-5); }
.comparison-lead { color: var(--color-text-sub); }
.comparison-flow { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-accent-soft); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-align: center; }
.comparison-flow span { margin-inline: var(--space-1); color: var(--color-accent); }
.comparison-data { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.comparison-data article { padding: var(--space-4); border: var(--border-default); border-radius: var(--radius-md); }
.comparison-data h3 { font-size: var(--font-size-md); }
.comparison-data dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.comparison-data dt { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.comparison-data dd { margin: 0; font-weight: var(--font-weight-bold); }
.comparison-data article > p { margin-top: var(--space-3); color: var(--color-text-sub); font-size: var(--font-size-xs); }
.comparison-button { width: 100%; margin-top: var(--space-5); }

.home-service { margin-top: var(--space-section-small); }
.service-panel { display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg); }
.service-panel h2 { font-size: var(--font-size-xl); }
.service-panel div > p:last-child { margin-top: var(--space-2); color: var(--color-text-sub); font-size: var(--font-size-sm); }
.service-button { border: 1px solid var(--color-accent); color: var(--color-link); }
.service-button:hover { background: var(--color-accent); color: var(--color-on-accent); }

.home-features { display: grid; gap: var(--space-5); margin-block: var(--space-section-small) var(--space-5); }
.feature-card { min-width: 0; overflow: hidden; border: var(--border-default); border-radius: var(--radius-lg); }
.feature-card a { position: relative; display: grid; gap: var(--space-5); height: 100%; padding: var(--space-4); }
.feature-method a { grid-template-columns: minmax(0,1fr); }
.feature-image { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.feature-image img { width: 100%; height: 100%; object-fit: cover; }
.feature-copy { min-width: 0; padding-bottom: var(--space-8); }
.topic-label { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--color-link); color: var(--color-on-accent); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.feature-copy h2 { margin-top: var(--space-2); font-size: var(--font-size-lg); }
.feature-copy p { margin-top: var(--space-3); color: var(--color-text-sub); font-size: var(--font-size-sm); }
.feature-card a:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.outline-arrow { border: 1px solid var(--color-accent); background: var(--color-bg); color: var(--color-link); }
.feature-card .circle-arrow { position: absolute; right: var(--space-4); bottom: var(--space-4); }
.feature-about a { grid-template-columns: minmax(0,1fr) 100px; gap: var(--space-3); }
.feature-about h2 { text-wrap: balance; }
.about-mochi { align-self: end; width: 100%; border-radius: var(--radius-image); }

@media (min-width: 768px) {
  .hero-inner { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); padding-block: var(--space-5) var(--space-6); padding-top: var(--space-5); }
  .hero-media { position: relative; z-index: 0; grid-column: 2; grid-row: 1 / 3; inset: auto; height: 100%; min-height: 500px; border-radius: var(--radius-lg); }
  .hero-media::after { display: none; }
  .hero-media img { object-position: var(--hero-object-position-pc); }
  .hero-copy { grid-column: 1; grid-row: 1; padding-block: var(--space-5) 0; }
  .hero-copy h1 { font-size: var(--hero-font-tablet); }
  .hero-copy .button { width: auto; max-width: 390px; }
  .hero-points { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 0; }
  .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .section-heading { align-items: center; }
  .comparison-image { min-height: 420px; }
  .comparison-data { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .service-panel { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--space-4); width: 80%; margin-inline: auto; padding: var(--space-7); }
  .home-features { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-method a { grid-template-columns: 38% minmax(0,1fr); }
  .feature-image { height: 100%; min-height: 260px; aspect-ratio: auto; }
  .feature-about a { grid-template-columns: minmax(0,1fr) 30%; }
}

@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: .91fr 1.09fr; }
  .hero-copy h1 { font-size: var(--hero-font-desktop-small); }
  .hero-media { align-self: start; height: auto; min-height: 0; aspect-ratio: 5 / 4; }
  .hero-media img { height: 100%; }
  .hero-points { grid-template-columns: repeat(3,minmax(0,1fr)); align-self: start; }
  .hero-points li { grid-template-columns: 1fr; align-content: start; text-align: center; }
  .home-categories { margin-top: var(--space-6); }
  .home-comparison { margin-top: var(--space-8); padding-block: var(--space-section); }
  .comparison-feature { grid-template-columns: .95fr 1.05fr; }
  .comparison-copy { padding: var(--space-7); }
  .comparison-data { gap: var(--space-2); }
  .comparison-data article { padding: var(--space-3); }
  .home-features { margin-top: var(--space-7); }
  .feature-about .feature-copy { position: relative; z-index: 1; }
  .feature-about h2 { margin-right: -40px; padding-right: var(--space-4); }
  .about-mochi { margin-bottom: var(--space-5); }
}

@media (min-width: 1280px) {
  .hero-copy h1 { font-size: var(--hero-font-pc); }
  .hero-lead { font-size: var(--font-size-md); }
  .desktop-break { display: initial; }
  .hero-copy { padding-top: var(--space-7); }
  .category-copy p { font-size: var(--font-size-base); }
}

@media (max-width: 419px) {
  .hero-copy h1 span { display: inline; }
  .hero-copy h1 span + span::before { content: ' '; }
  .comparison-flow { text-align: left; }
}