/* Base */
html, body { height: 100%; }
body { margin: 0; font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, -apple-system, sans-serif; color: #180707; line-height: 2.4; font-size: 14px; background-color: #EAEAEC; }
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; padding-left: 80px; }
.header .container { padding-left: 80px; }
a { color: inherit; text-decoration: none; }

/* Header */
.header { height: 64px; display: flex; align-items: center; }
.header-inner { display: flex; align-items: center; justify-content: flex-start; }
.brand { position: fixed; top: 12px; left: 80px; z-index: 1000; }
.brand img { height: 40px; width: auto; display: block; }

/* Hero */
.hero { position: relative; min-height: calc(100vh - 56px); display: flex; align-items: center; padding-bottom: 72px; }
.hero-inner { display: grid; grid-template-columns: 1fr 320px; gap: 80px; align-items: center; }
.hero-copy h1 { font-size: 32px; letter-spacing: 0.04em; margin: 0 0 12px; }
.hero-copy p { margin: 0; font-size: 14px; color: rgba(24,7,7,0.85); }
.hero-mark { 
  width: 160px; 
  height: 160px; 
  background: #FF3702; 
  justify-self: center; 
  box-shadow: 0 10px 24px rgba(0,0,0,0.08); 
  will-change: transform, box-shadow, clip-path; 
  transition: box-shadow 0.25s ease;
  animation: morphShape 18s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes morphShape {
  0% { 
    clip-path: circle(50% at 50% 50%);
  }
  20% {
    clip-path: circle(50% at 50% 50%);
  }
  25% {
    clip-path: polygon(50% 35%, 32% 68%, 68% 68%);
  }
  28% {
    clip-path: polygon(50% 30%, 28% 72%, 72% 72%);
  }
  31% {
    clip-path: polygon(50% 25%, 25% 75%, 75% 75%);
  }
  34% {
    clip-path: polygon(50% 20%, 22% 80%, 78% 80%);
  }
  37% {
    clip-path: polygon(50% 16%, 20% 84%, 80% 84%);
  }
  40% {
    clip-path: polygon(50% 13.4%, 19.3% 86.6%, 80.7% 86.6%);
  }
  43% {
    clip-path: polygon(48% 16%, 18% 84%, 78% 86%);
  }
  46% {
    clip-path: polygon(45% 20%, 17% 82%, 75% 85%);
  }
  49% {
    clip-path: polygon(40% 25%, 16% 80%, 70% 82%);
  }
  52% {
    clip-path: polygon(35% 30%, 15% 78%, 65% 80%);
  }
  55% {
    clip-path: polygon(30% 32%, 15% 75%, 60% 78%);
  }
  58% {
    clip-path: polygon(28% 30%, 18% 70%, 58% 75%);
  }
  61% {
    clip-path: polygon(26% 28%, 22% 65%, 56% 72%);
  }
  64% {
    clip-path: polygon(25% 25%, 25% 75%, 75% 75%, 75% 25%);
  }
  66% {
    clip-path: polygon(22% 22%, 22% 78%, 78% 78%, 78% 22%);
  }
  68% {
    clip-path: polygon(20% 20%, 20% 80%, 80% 80%, 80% 20%);
  }
  70% {
    clip-path: polygon(18% 18%, 18% 82%, 82% 82%, 82% 18%);
  }
  72% {
    clip-path: polygon(16% 16%, 16% 84%, 84% 84%, 84% 16%);
  }
  74% {
    clip-path: polygon(15% 15%, 15% 85%, 85% 85%, 85% 15%);
  }
  76% {
    clip-path: polygon(18% 18%, 18% 82%, 82% 82%, 82% 18%);
  }
  78% {
    clip-path: polygon(22% 22%, 22% 78%, 78% 78%, 78% 22%);
  }
  80% {
    clip-path: polygon(26% 26%, 26% 74%, 74% 74%, 74% 26%);
  }
  82% {
    clip-path: polygon(30% 30%, 30% 70%, 70% 70%, 70% 30%);
  }
  84% {
    clip-path: polygon(35% 35%, 35% 65%, 65% 65%, 65% 35%);
  }
  86% {
    clip-path: polygon(40% 40%, 40% 60%, 60% 60%, 60% 40%);
  }
  88% {
    clip-path: polygon(45% 45%, 45% 55%, 55% 55%, 55% 45%);
  }
  90% {
    clip-path: circle(47% at 50% 50%);
  }
  92% {
    clip-path: circle(48% at 50% 50%);
  }
  94% {
    clip-path: circle(49% at 50% 50%);
  }
  96% {
    clip-path: circle(49.5% at 50% 50%);
  }
  98% {
    clip-path: circle(49.8% at 50% 50%);
  }
  100% { 
    clip-path: circle(50% at 50% 50%);
  }
}
.scroll-indicator { display: none; }
/* sentinel no longer used */
.arrow-pin-sentinel { display: none; }

/* Sections */
.section-inner { padding: 56px 0; text-align: center; }
.section-title { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; position: relative; }
.section-title .dot { width: 12px; height: 12px; border-radius: 9999px; background: #FF3702; position: static; transform: none; }
.section-title h2 { font-size: 24px; letter-spacing: 0.04em; margin: 0; }
.service-list { list-style: none; padding: 0; margin: 12px 0; display: inline-block; text-align: center; }
.service-list li { margin: 8px 0; padding: 0; }
.service-list li::before { content: none; }
/* Services section layout per image: left-aligned title with red dot and dotted list */
.services .section-inner { text-align: left; }
.services .section-title { display: flex; align-items: center; gap: 8px; }
.services .service-list { display: block; text-align: left; margin: 16px 0 0 0; }
.services .service-list li { position: relative; padding-left: 1.4em; margin: 14px 0; }
.services .service-list li::before { content: '・'; position: absolute; left: 0; top: 0; }
/* Company section aligns to same left edge */
.company .section-inner { text-align: left; }
.company .section-title { display: flex; align-items: center; gap: 8px; }
.company-table { margin-top: 16px; border-collapse: collapse; width: 100%; max-width: 500px; }
.company-table th, .company-table td { padding: 12px 16px; text-align: left; font-size: 14px; border-bottom: 1px solid rgba(24,7,7,0.1); }
.company-table th { font-weight: 500; color: #180707; width: 40%; }
.company-table td { color: #180707; }

/* Contact section aligns to same left edge */
.contact .section-inner { text-align: left; }
.contact .section-title { display: flex; align-items: center; gap: 8px; }
.contact .contact-mail { margin-top: 16px; }
.note { margin-top: 12px; font-size: 14px; color: rgba(24,7,7,0.6); }
.contact-mail a { text-decoration: underline; font-weight: 500; }

/* Footer */
.footer { text-align: center; color: rgba(24,7,7,0.6); font-size: 12px; padding: 24px 0 32px; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Line-by-line reveal */
.line-reveal { display: block; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.line-reveal.is-visible { opacity: 1; transform: none; }

/* Mobile-specific shape morphing animation with safer coordinates */
@keyframes morphShapeMobile {
  0% { 
    clip-path: circle(45% at 50% 50%);
  }
  20% {
    clip-path: circle(45% at 50% 50%);
  }
  25% {
    clip-path: polygon(50% 40%, 37% 63%, 63% 63%);
  }
  28% {
    clip-path: polygon(50% 35%, 33% 67%, 67% 67%);
  }
  31% {
    clip-path: polygon(50% 30%, 30% 70%, 70% 70%);
  }
  34% {
    clip-path: polygon(50% 25%, 27% 75%, 73% 75%);
  }
  37% {
    clip-path: polygon(50% 22%, 25% 78%, 75% 78%);
  }
  40% {
    clip-path: polygon(50% 20%, 23% 80%, 77% 80%);
  }
  43% {
    clip-path: polygon(48% 22%, 22% 78%, 74% 80%);
  }
  46% {
    clip-path: polygon(45% 25%, 20% 75%, 70% 78%);
  }
  49% {
    clip-path: polygon(40% 30%, 20% 70%, 65% 75%);
  }
  52% {
    clip-path: polygon(35% 35%, 20% 65%, 60% 72%);
  }
  55% {
    clip-path: polygon(32% 37%, 22% 63%, 58% 70%);
  }
  58% {
    clip-path: polygon(30% 35%, 25% 60%, 55% 67%);
  }
  61% {
    clip-path: polygon(28% 33%, 27% 58%, 53% 65%);
  }
  64% {
    clip-path: polygon(30% 30%, 30% 70%, 70% 70%, 70% 30%);
  }
  66% {
    clip-path: polygon(28% 28%, 28% 72%, 72% 72%, 72% 28%);
  }
  68% {
    clip-path: polygon(25% 25%, 25% 75%, 75% 75%, 75% 25%);
  }
  70% {
    clip-path: polygon(23% 23%, 23% 77%, 77% 77%, 77% 23%);
  }
  72% {
    clip-path: polygon(22% 22%, 22% 78%, 78% 78%, 78% 22%);
  }
  74% {
    clip-path: polygon(20% 20%, 20% 80%, 80% 80%, 80% 20%);
  }
  76% {
    clip-path: polygon(23% 23%, 23% 77%, 77% 77%, 77% 23%);
  }
  78% {
    clip-path: polygon(26% 26%, 26% 74%, 74% 74%, 74% 26%);
  }
  80% {
    clip-path: polygon(30% 30%, 30% 70%, 70% 70%, 70% 30%);
  }
  82% {
    clip-path: polygon(33% 33%, 33% 67%, 67% 67%, 67% 33%);
  }
  84% {
    clip-path: polygon(36% 36%, 36% 64%, 64% 64%, 64% 36%);
  }
  86% {
    clip-path: polygon(40% 40%, 40% 60%, 60% 60%, 60% 40%);
  }
  88% {
    clip-path: polygon(42% 42%, 42% 58%, 58% 58%, 58% 42%);
  }
  90% {
    clip-path: circle(42% at 50% 50%);
  }
  92% {
    clip-path: circle(43% at 50% 50%);
  }
  94% {
    clip-path: circle(44% at 50% 50%);
  }
  96% {
    clip-path: circle(44.5% at 50% 50%);
  }
  98% {
    clip-path: circle(44.8% at 50% 50%);
  }
  100% { 
    clip-path: circle(45% at 50% 50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  /* Preserve 80px left margin on mobile */
  .container { padding-left: 40px; padding-right: 24px; }
  /* Ensure left spacing specifically for the selected sections */
  .services .container, .company .container, .contact .container { padding-left: 40px; padding-right: 24px; }
  .hero-inner { grid-template-columns: 1fr; gap: 64px; }
  .hero { min-height: calc(100vh - 64px); padding-bottom: 0; }
  .hero-mark { 
    width: 120px; 
    height: 120px; 
    animation: morphShapeMobile 18s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; 
  }
  /* Header logo 40px from left edge on smartphones */
  .header .container { padding-left: 40px; padding-right: 24px; }
  .brand { left: 40px; }
  /* Slightly tighter vertical rhythm on mobile */
  .section-inner { padding: 40px 0; }
  /* Hero text centered on mobile; use safe side paddings instead of 80px */
  .hero .container { padding-left: 24px; padding-right: 24px; margin: 0 auto; }
  .hero-inner { justify-items: center; text-align: center; align-content: center; }
  .hero-copy { text-align: center; }
  .hero-copy .lines { text-align: left; }
}
/* Ensure services appear below the bottom arrow and offset for header */
.services { padding-top: 80px; scroll-margin-top: 72px; }