/* Reset */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* ── Scroll Reveal ── */
.reveal {
  opacity:0;
  transform:translateY(60px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity:1;
  transform:translateY(0);
}
.reveal-left {
  opacity:0;
  transform:translateX(-50px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.is-visible {
  opacity:1;
  transform:translateX(0);
}
.reveal-right {
  opacity:0;
  transform:translateX(50px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.is-visible {
  opacity:1;
  transform:translateX(0);
}
.reveal-scale {
  opacity:0;
  transform:scale(0.9);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.is-visible {
  opacity:1;
  transform:scale(1);
}
.count-up {
  font-weight:800;
  color:#23B253;
}
body {
  font-family:'Inter','Noto Sans JP',sans-serif;
  color:#000; background:#fff;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
button { border:none; cursor:pointer; font-family:inherit; background:none; }
.green { color:#23b253; }
[id] { scroll-margin-top:80px; }
.inner { max-width:1280px; margin:0 auto; }
.sp-only { display:none; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Header ── */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(24px, 5vw, 64px); background:transparent;
  position:sticky; top:0; z-index:100;
  transition:background 0.3s ease, box-shadow 0.3s ease;
}
.header.is-scrolled {
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,0.08);
}
.logo-img { width:101px; }

/* Hamburger (SP only) */
.hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; background:none; border:none; cursor:pointer;
  padding:6px; z-index:210;
}
.hamburger span {
  display:block; width:100%; height:2px; background:#333;
  transition:transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Nav — PC: inline, SP: slide panel */
.header-nav {
  display:flex; align-items:center; gap:28px;
}
.header-nav a {
  font-size:14px; font-weight:500; color:#333;
  letter-spacing:-0.08px; line-height:1.45;
  transition:color 0.2s;
  position:relative;
}
.header-nav a:not(.btn-green-gradient)::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background:#23B253;
  transition:width 0.25s ease;
}
.header-nav a:not(.btn-green-gradient):hover::after { width:100%; }
.header-nav a:hover { color:#23B253; }
.header-nav .btn-green-gradient {
  text-align:center; color:#fff; border-radius:10px;
  padding:10px 20px; font-size:14px;
}

/* Overlay (SP only) */
.menu-overlay {
  display:none;
}
.btn-green-gradient {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; background:linear-gradient(to right,#80e780,#44d5bd);
  color:#fff; font-size:16px; font-weight:500; border-radius:12px;
  letter-spacing:-0.08px; line-height:1.45; white-space:nowrap;
}

/* ── Hero ── */
.hero { position:relative; width:100%; }
.hero-bg-img { width:100%; display:block; }
.hero-buttons {
  position:absolute; bottom:10%; left:clamp(24px, 5vw, 64px);
  display:flex; gap:16px;
}
.btn-orange {
  display:inline-flex; align-items:center; justify-content:center;
  width:215px; height:66px; background:#ff8d0c; color:#fff;
  font-size:18px; font-weight:900; border-radius:12px;
  box-shadow:0 4px 20px rgba(140,76,0,0.6);
  letter-spacing:-0.09px; line-height:1.45; transition:transform 0.2s;
}
.btn-orange:hover { transform:translateY(-2px); }
.btn-white-border {
  display:inline-flex; align-items:center; justify-content:center;
  width:215px; height:66px; background:#fff; color:#000;
  font-size:18px; font-weight:500; border-radius:12px;
  border:2px solid rgba(0,0,0,0.15);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  letter-spacing:-0.09px; line-height:1.45; transition:transform 0.2s;
}
.btn-white-border:hover { transform:translateY(-2px); }

/* ── Section Title ── */
.section-title {
  text-align:center;
  padding:40px clamp(24px, 5vw, 64px) 20px;
}
.section-title h2 {
  font-size:36px; font-weight:700; letter-spacing:-0.72px; line-height:1.2;
}
.solution-title h2 {
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.solution-logo {
  width:160px; height:auto; border-radius:12px;
}

/* ── Chatbot Section ── */
.chatbot-section {
  background:rgba(35,178,83,0.05);
  padding:56px 0 56px clamp(24px,5vw,64px);
}
.chatbot-card {
  width:100%;
  background:#fff; border-radius:20px 0 0 20px;
  box-shadow:0 2px 20px rgba(0,0,0,0.06);
  overflow:hidden;
  margin-left:auto; margin-right:0;
}
.chatbot-card-inner {
  width:90%;
  margin-left:auto; margin-right:0;
  display:flex; align-items:center;
}
.chatbot-text {
  flex:1.5; padding:64px 20px 64px 10px;
  min-width:0;
}
.chatbot-example {
  display:flex; align-items:center; gap:14px;
  margin-bottom:2px;
}
.chatbot-example-label {
  background:#fff; color:#23B253; font-size:13px; font-weight:700;
  padding:3px 12px; border-radius:5px; flex-shrink:0;
  border:2px solid #23B253;
}
.chatbot-example p {
  font-size:22px; font-weight:700; line-height:1.45; margin:0;
}
.chatbot-line {
  display:block; width:65%; height:28px; margin-bottom:28px;
}
.chatbot-text h3 {
  font-size:38px; font-weight:800; line-height:1.3;
  letter-spacing:-0.76px; margin-bottom:22px;
}
.chatbot-desc {
  font-size:15px; font-weight:500; color:rgba(0,0,0,0.55);
  line-height:1.8; letter-spacing:0.02em;
}
.chatbot-phone-area {
  flex-shrink:0; width:420px;
  display:flex; align-items:center; justify-content:flex-end;
  padding:24px 36px 24px 0;
}
.chatbot-phone-img {
  width:100%; max-width:380px; height:auto; display:block;
}

/* ── Problem ── */
.problem-section {
  background:rgba(35,178,83,0.05);
  padding:80px clamp(24px, 5vw, 64px);
}
.problem-inner {
  max-width:1174px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:24px;
}
.problem-label {
  font-size:24px; font-weight:500; text-align:center;
  letter-spacing:-0.12px; line-height:1.4;
}
.problem-title {
  font-weight:700; text-align:center; letter-spacing:-0.72px; line-height:1.2;
}
.problem-title .gray { color:#525252; font-size:30px; }
.problem-title .green { color:#23b253; font-size:36px; }
.problem-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  padding:20px 0; width:100%;
}
.problem-card {
  background:#fff; border-radius:4px; padding:32px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.problem-card h3 {
  font-size:22px; font-weight:600; line-height:1.2;
  letter-spacing:-0.44px; margin-bottom:8px;
}
.problem-card h3 .green { color:#23b253; font-size:inherit; }
.problem-card p {
  font-size:16px; font-weight:500; line-height:1.45; letter-spacing:-0.08px;
}
.poc-note { font-size:10px; color:#373737; font-weight:500; line-height:1.5; margin-bottom:4px; }
.problem-card p.small-body { font-size:15px; letter-spacing:-0.075px; }

/* ── Arrow ── */
.arrow-divider {
  display:flex; justify-content:center;
}
.arrow-divider img { width:250px; transform:rotate(180deg); }

/* ── Feature Image ── */
.feature-image { padding:0; }
.feature-image img { width:100%; }

/* ── Hero 3 ── */
.hero3 { width:100%; }
.hero3 img { width:100%; display:block; }

/* ── Usecase Section ── */
.usecase-section { padding:0 clamp(24px, 5vw, 64px) 40px; }
.usecase-lead {
  text-align:center; font-size:18px; font-weight:500;
  color:rgba(0,0,0,0.55); line-height:1.6; max-width:720px;
  margin:0 auto 48px; letter-spacing:-0.09px;
}
.usecase-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  max-width:960px; margin:0 auto;
}
.usecase-card {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:12px;
}
.usecase-icon { width:120px; height:120px; }
.usecase-card h4 {
  font-size:18px; font-weight:700; color:#23b253;
}
.usecase-card p {
  font-size:15px; font-weight:500; color:#555;
  line-height:1.6; letter-spacing:-0.08px;
}

/* ── CTA Green ── */
.cta-green {
  background:#f4fbf6; display:flex; gap:40px;
  justify-content:center; align-items:center; flex-wrap:wrap;
  padding:50px clamp(24px, 5vw, 64px);
}

/* ── Pill buttons ── */
.btn-green-pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:20px 75px; background:#23b253; color:#fff;
  font-size:18px; font-weight:700; border-radius:10000px;
  box-shadow:0 14px 40px rgba(35,178,83,0.2);
  letter-spacing:-0.09px; line-height:1.45; white-space:nowrap; transition:transform 0.2s;
}
.btn-green-pill:hover { transform:translateY(-2px); }
.btn-green-outline-pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:20px 75px; background:#fff; color:#23b253;
  font-size:18px; font-weight:700; border-radius:10000px;
  border:2px solid #23b253;
  box-shadow:0 14px 40px rgba(35,178,83,0.2);
  letter-spacing:-0.09px; line-height:1.45; white-space:nowrap; transition:transform 0.2s;
}
.btn-green-outline-pill:hover { transform:translateY(-2px); }
.btn-orange-pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:20px 75px; background:#ff8d0c; color:#fff;
  font-size:18px; font-weight:700; border-radius:10000px;
  box-shadow:0 14px 40px rgba(255,141,12,0.2);
  letter-spacing:-0.09px; line-height:1.45; white-space:nowrap; transition:transform 0.2s;
}
.btn-orange-pill:hover { transform:translateY(-2px); }

/* ── Flow Steps ── */
.flow-steps {
  display:flex; flex-direction:column; align-items:center;
  gap:0; max-width:1112px; margin:0 auto;
  padding:0 clamp(24px, 5vw, 84px) 80px;
}
.flow-step {
  display:flex; align-items:center; width:100%;
  border:1px solid rgba(0,0,0,0.1); border-radius:16px;
  overflow:hidden; background:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.02), 0 6px 12px rgba(0,0,0,0.03);
}
.flow-step-number {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:71px; width:71px; align-self:stretch;
  background:#23b253; color:#fff;
  font-family:'Inter','Noto Sans JP',sans-serif; font-weight:600;
  text-align:center; line-height:1.05;
  border-radius:16px 0 0 16px;
}
.flow-step-number .step-label { font-size:10px; display:block; }
.flow-step-number .step-num { font-size:19px; display:block; }
.flow-step-body {
  flex:1; padding:24px;
}
.flow-step-body h4 {
  font-size:19px; font-weight:600; color:#23b253;
  line-height:1.45; letter-spacing:-0.38px; margin-bottom:8px;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.flow-step-body p {
  font-size:14px; font-weight:500; color:rgba(0,0,0,0.55);
  line-height:1.4; letter-spacing:-0.07px;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.flow-step-body p .accent { color:#f5a623; font-weight:600; }
.flow-arrow {
  color:#23b253; font-size:24px; line-height:1;
  padding:6px 0; text-align:center;
}

/* ── Cases ── */
.cases-section {
  position:relative; width:100%;
  display:flex; flex-direction:column; gap:16px;
  align-items:center; justify-content:center;
  padding:60px clamp(24px, 5vw, 64px) 20px;
  background:#f4fbf6;
}
.cases-section > .cases-bg {
  position:absolute; inset:0; width:100%;
  object-fit:cover; object-position:center 60%; pointer-events:none;
}
.cases-content {
  position:relative; z-index:1;
  text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center;
}
.cases-content h2 { font-weight:700; letter-spacing:-0.72px; line-height:1.2; }
.cases-content h2 .big { font-size:36px; color:#23b253; }
.cases-content h2 .small { font-size:26px; }
.cases-content > p {
  font-size:20px; font-weight:500; color:rgba(0,0,0,0.55);
  letter-spacing:-0.1px; line-height:1.45;
}

/* ── Cases Carousel ── */
.cases-carousel-wrap {
  position:relative; z-index:1; width:100%;
  overflow:hidden; padding:20px 0 40px;
}
.cases-carousel {
  width:100%; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.cases-carousel::-webkit-scrollbar { display:none; }
.cases-carousel.is-dragging { cursor:grabbing; }
.cases-track {
  display:flex; gap:24px;
  animation:carousel-scroll 30s linear infinite;
  width:max-content;
}
.cases-track:hover { animation-play-state:paused; }
.cases-carousel.is-dragging .cases-track,
.cases-carousel.is-touched .cases-track {
  animation-play-state:paused;
}
@keyframes carousel-scroll {
  0% { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.carousel-card {
  flex-shrink:0; width:340px;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
  transition:transform 0.2s, box-shadow 0.2s;
}
.carousel-card:hover {
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(35,178,83,0.12), 0 4px 12px rgba(0,0,0,0.06);
}
.carousel-card-img {
  width:100%; height:200px; object-fit:contain;
  background:#fff; padding:16px; box-sizing:border-box;
}
lottie-player.carousel-card-img {
  display:block; width:100%; height:200px;
  background:#fff; padding:0; box-sizing:border-box;
}
.carousel-card h3 {
  font-size:18px; font-weight:700; line-height:1.4;
  letter-spacing:-0.36px; padding:16px 20px 8px;
}
.carousel-card p {
  font-size:14px; font-weight:500; color:rgba(0,0,0,0.6);
  line-height:1.6; letter-spacing:-0.07px; padding:0 20px 20px;
}

/* ── CTA Orange ── */
.cta-orange-section { position:relative; width:100%; }
.cta-orange-section > img.cta-bg { width:100%; display:block; }
.cta-orange-overlay {
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:25px;
}

/* ── Training ── */
.training-section { position:relative; width:100%; }
.training-section > .training-bg { width:100%; display:block; }
.training-buttons {
  position:absolute; bottom:12%; left:0; right:0;
  display:flex; gap:50px; justify-content:center;
}

/* ── Q&A ── */
.qa-section {
  background:#f4fbf6;
  display:flex; flex-direction:column; gap:48px;
  align-items:center; justify-content:center;
  padding:60px clamp(24px, 5vw, 64px);
}
.qa-header { text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.qa-header h2 { font-size:36px; font-weight:700; letter-spacing:-0.72px; line-height:1.2; }
.qa-header p { font-size:20px; font-weight:500; color:rgba(0,0,0,0.55); letter-spacing:-0.1px; line-height:1.45; }
.qa-list { display:flex; flex-direction:column; gap:8px; max-width:1180px; width:100%; }
.qa-item { background:#fff; border:1px solid #23b253; border-radius:10px; overflow:hidden; transition:box-shadow 0.3s; }
.qa-item.open { box-shadow:0 4px 16px rgba(35,178,83,0.12); }
.qa-summary {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:18px 24px; text-align:left;
  font-size:16px; font-weight:600; color:#23b253;
  line-height:1.5; font-feature-settings:'vpal' 1;
  transition:background 0.2s;
}
.qa-summary:hover { background:rgba(35,178,83,0.03); }
.qa-item.open .qa-summary { border-bottom:1px solid rgba(35,178,83,0.15); }
.qa-text { flex:1; }
.qa-icon { width:15px; height:15px; position:relative; flex-shrink:0; margin-left:16px; }
.qa-icon::before, .qa-icon::after { content:''; position:absolute; background:#23b253; border-radius:1px; }
.qa-icon::before { width:15px; height:2px; top:50%; left:0; transform:translateY(-50%); }
.qa-icon::after { width:2px; height:15px; left:50%; top:0; transform:translateX(-50%); transition:transform 0.3s ease; }
.qa-item.open .qa-icon::after { transform:translateX(-50%) scaleY(0); }
.qa-body { height:0; overflow:hidden; transition:height 0.35s cubic-bezier(0.4,0,0.2,1); }
.qa-body-inner { padding:16px 24px 20px; font-size:15px; font-weight:500; color:#333; line-height:1.7; font-feature-settings:'vpal' 1; }
.qa-body-inner::before { content:'A. '; font-weight:700; color:#23b253; }

/* ── Contact ── */
.contact-section {
  display:flex; flex-direction:column; gap:48px;
  align-items:center; padding:60px clamp(24px, 5vw, 64px);
}
.contact-header { text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.contact-header h2 { font-size:36px; font-weight:700; letter-spacing:-0.72px; line-height:1.2; }
.contact-header p { font-size:20px; font-weight:500; color:rgba(0,0,0,0.55); letter-spacing:-0.1px; line-height:1.45; }
.form-wrap { max-width:720px; width:100%; }

/* ── Contact Form ── */
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label {
  font-size:14px; font-weight:600; color:#333;
  display:flex; align-items:center; gap:6px;
}
.required {
  font-size:11px; font-weight:700; color:#fff; background:#ff8d0c;
  padding:1px 6px; border-radius:3px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:14px 16px; font-size:16px;
  font-family:'Inter','Noto Sans JP',sans-serif;
  border:1.5px solid #ddd; border-radius:10px;
  background:#fff; color:#222; transition:border-color 0.2s;
  box-sizing:border-box;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:#23b253;
  box-shadow:0 0 0 3px rgba(35,178,83,0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:#bbb; }
.form-group select { appearance:none; cursor:pointer;
  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 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.form-group textarea { resize:vertical; min-height:140px; }
.form-submit { text-align:center; padding-top:8px; }
.btn-submit { width:100%; max-width:400px; cursor:pointer; }
.btn-submit:disabled { opacity:0.6; cursor:not-allowed; }
.form-status {
  text-align:center; font-size:15px; font-weight:600;
  margin-top:8px; min-height:24px;
}
.form-status.success { color:#23b253; }
.form-status.error { color:#e74c3c; }

/* ── Representatives ── */
.representatives { display:flex; justify-content:center; padding:60px 0; gap:0; }
.rep-card { width:341px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.rep-photo { width:167px; height:160px; object-fit:cover; }
.rep-name { font-size:20px; font-weight:700; line-height:1.7; letter-spacing:-0.5px; }
.rep-title { font-size:10px; font-weight:500; line-height:1.7; letter-spacing:-0.5px; }

/* ── Company Overview ── */
.company-overview {
  max-width:1280px; margin:0 auto;
  padding:48px clamp(24px, 5vw, 64px);
}
.company-overview-inner {
  display:flex; align-items:center; gap:0;
}
.company-overview-left {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:48px 64px;
}
.company-overview-logo { width:157px; max-width:100%; height:auto; object-fit:contain; }
.company-table {
  width:100%; max-width:512px; border-collapse:collapse;
  font-family:'Inter','Noto Sans JP',sans-serif;
}
.company-table tr { border-bottom:1px solid #23b253; }
.company-table th, .company-table td {
  padding:14px 0; font-size:16px; font-weight:700;
  letter-spacing:-0.4px; line-height:1.1; vertical-align:middle;
}
.company-table th {
  width:40%; text-align:center; color:#000;
}
.company-table td {
  width:60%; color:#23b253;
}
.company-overview-right {
  flex:1; padding:0 64px;
}
/* ── Footer ── */
.footer { background:#f4fbf6; padding:0 clamp(24px, 5vw, 64px) 0; }
.footer-inner { display:flex; gap:120px; border-top:1px solid rgba(0,0,0,0.1); padding-top:80px; max-width:1152px; margin:0 auto; }
.footer-brand { flex:1; display:flex; flex-direction:column; gap:56px; min-width:0; }
.footer-brand h4 { font-size:24px; font-weight:600; letter-spacing:-0.48px; line-height:1.45; }
.footer-brand-desc { font-size:16px; font-weight:500; color:rgba(0,0,0,0.55); letter-spacing:-0.08px; line-height:1.45; }
.social-links { display:flex; gap:24px; }
.social-links img { width:24px; height:24px; }
.footer-nav { display:flex; gap:40px; flex-shrink:0; }
.footer-col { display:flex; flex-direction:column; gap:8px; width:130px; }
.footer-col h5 { font-size:16px; font-weight:600; padding-bottom:16px; letter-spacing:-0.08px; line-height:1.45; }
.footer-col a { font-size:16px; font-weight:500; color:rgba(0,0,0,0.55); letter-spacing:-0.08px; line-height:1.45; transition:color 0.2s; }
.footer-col a:hover { color:#000; }
.footer-bottom { text-align:center; padding:40px 0; margin-top:60px; border-top:1px solid rgba(0,0,0,0.1); max-width:1152px; margin-left:auto; margin-right:auto; }
.footer-bottom p { font-size:13px; color:rgba(0,0,0,0.4); letter-spacing:-0.02px; }