/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
body { font-family: 'Noto Sans JP', sans-serif; color: #272b33; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* ===== Layout ===== */
.container { width: 1240px; margin: 0 auto; }

/* ===== Tokens ===== */
:root {
  --main:       #1a1395;
  --main-dark:  #141f4e;
  --main-light: #452294;
  --sub:        #743fe7;
  --black:      #272b33;
  --white:      #ffffff;
  --danger:     #c70036;
  --key:        #eae711;
  --grad-page:  linear-gradient(180deg, #e0e6f3 0%, #f3f6fd 100%);
  --grad-dark:  linear-gradient(180deg, rgb(20,31,78) 0%, rgba(20,31,78,0) 50%),
                linear-gradient(180deg, rgba(116,63,231,0) 80%, rgb(116,63,231) 100%),
                linear-gradient(270deg, rgb(69,34,148) 0%, rgb(26,19,149) 100%);
}

/* ===== Color helpers ===== */
.accent        { color: var(--sub); }
.accent-yellow { color: var(--key); }

/* ===== Section title ===== */
.section-title { font-size: 56px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--black); }
.section-title.white { color: var(--white); }

/* ===== Buttons ===== */
.btn-yellow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 320px; height: 64px;
  background: var(--key); color: var(--main);
  font-size: 16px; font-weight: 700; border-radius: 8px; white-space: nowrap;
}
.btn-gradient {
  display: inline-flex; align-items: center; justify-content: center;
  width: 320px; height: 64px;
  background: linear-gradient(90deg, var(--main) 0%, var(--sub) 100%);
  color: var(--white); font-family: inherit; font-size: 16px; font-weight: 700;
  border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: opacity .2s;
}
.btn-gradient:hover { opacity: .85; }

/* ===== Header ===== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background-image: var(--grad-dark);
}
.header-inner { display: flex; align-items: center; padding: 24px 64px; }
.header-logo img { width: 142px; height: 40px; object-fit: contain; }
.header-nav { display: flex; align-items: center; margin-left: auto; gap: 0; }
.header-nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 16px;
  color: var(--white); font-size: 16px; font-weight: 700; white-space: nowrap; border-radius: 8px;
  transition: background .15s;
}
.header-nav-link:hover { background: rgba(255,255,255,.1); }
.header-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 64px; width: 192px; margin-left: 24px;
  background: var(--white); color: var(--main);
  font-size: 16px; font-weight: 700; border-radius: 8px; white-space: nowrap; flex-shrink: 0;
}

/* ===== First View ===== */
.first-view {
  padding-top: 112px; min-height: 1024px;
  background-image: var(--grad-dark);
  border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; overflow: hidden;
}
.fv-container {
  width: 1240px; margin: 0 auto; padding: 64px 0;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.fv-text { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.fv-sub { font-size: 40px; font-weight: 700; line-height: 1.25; color: var(--white); white-space: nowrap; }
.fv-title { font-size: 64px; font-weight: 700; line-height: 1.25; color: var(--white); text-align: center; }
.fv-title-accent { color: var(--key); }
.fv-image-area { position: relative; width: 100%; height: 414px; display: flex; align-items: flex-start; justify-content: center; }
.fv-screenshot { position: relative; width: 935px; height: 526px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 16px rgba(39,43,51,.1); flex-shrink: 0; }
.fv-screenshot img { width: 100%; height: 100%; object-fit: cover; }
.fv-sub-image { position: absolute; right: 0; top: 72px; width: 432px; height: 208px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 16px rgba(39,43,51,.1); }
.fv-sub-image img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Clients ===== */
.clients {
  background: var(--white); padding: 112px 32px 64px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.clients-title { font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--black); white-space: nowrap; }
.clients-list {
  display: flex; align-items: center; gap: 64px;
  font-size: 40px; font-weight: 700; line-height: 1.25; color: var(--black); overflow: hidden;
}

/* ===== Summary ===== */
.summary { padding: 128px 0; background: var(--white); }
.summary-inner { display: flex; align-items: center; gap: 64px; }
.summary-text { flex: 1; display: flex; flex-direction: column; gap: 48px; }
.summary-title { display: flex; flex-direction: column; gap: 16px; font-size: 40px; font-weight: 700; line-height: 1.25; color: var(--black); }
.summary-body { font-size: 18px; font-weight: 400; line-height: 2rem; color: var(--black); }
.summary-image {
  flex: 1; border-radius: 16px; overflow: hidden; aspect-ratio: 588/558;
  background-image: linear-gradient(180deg, var(--sub) 0%, rgba(116,63,231,0) 20%),
                    linear-gradient(270deg, var(--main-light) 0%, var(--main) 100%);
  padding: 64px 0 0 64px;
}
.summary-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px 0 0 0; }

/* ===== Problem ===== */
.problem {
  padding: 128px 0;
  background: var(--white);
}
.problem .container { display: flex; flex-direction: column; gap: 64px; }
.problem .section-title { color: var(--black); font-size: 40px; }
.problem-cols { display: flex; gap: 32px; }
.problem-card {
  flex: 1; background: var(--main-dark); border-radius: 16px;
  padding: 32px 24px; display: flex; flex-direction: column; gap: 32px;
}
.problem-card-title { font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--white); text-align: center; white-space: nowrap; }
.problem-list { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.problem-list li { display: flex; align-items: center; gap: 8px; }
.problem-list li img { width: 24px; height: 24px; flex-shrink: 0; }
.problem-list li span { font-size: 16px; font-weight: 700; line-height: 1; color: var(--white); }

/* ===== Solution ===== */
.solution { padding: 251px 0 128px; background: var(--grad-page); border-radius: 32px 32px 0 0; }
.solution .container { display: flex; flex-direction: column; gap: 128px; }
.solution-title { font-weight: 700; text-align: center; color: var(--black); white-space: nowrap; }
.solution-title-sub { display: block; font-size: 32px; line-height: 1.25; }
.solution-title-main { display: block; font-size: 56px; line-height: 1.25; }
.solution-section { display: flex; align-items: center; gap: 64px; overflow: hidden; }
.solution-text { flex: 1; display: flex; flex-direction: column; gap: 48px; color: var(--black); }
.solution-section-title { font-size: 32px; font-weight: 700; line-height: 1.25; }
.solution-body { font-size: 16px; font-weight: 400; line-height: 2rem; }
.solution-image { flex: 1; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; }
.solution-image img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Function ===== */
.function {
  padding: 128px 0; border-radius: 32px;
  background-image: var(--grad-dark);
}
.function .container { display: flex; flex-direction: column; gap: 64px; }
.function-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }

.function-card {
  background: var(--white); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.function-card--wide {
  grid-column: 1 / -1;
  flex-direction: row; align-items: center;
}
.function-card-image {
  height: 286px; background: var(--grad-page);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.function-card-text { padding: 32px; display: flex; flex-direction: column; gap: 32px; color: var(--black); flex: 1; }
.function-card-text--wide { gap: 32px; }
.function-card-title { font-size: 24px; font-weight: 700; line-height: 1.25; }
.function-card-title--wide { font-size: 32px; }
.function-card-body { font-size: 16px; font-weight: 400; line-height: 2rem; }

/* Function illustrations */
.func-illust-dnd { position: relative; width: 180px; height: 200px; display: flex; align-items: center; justify-content: center; }
.func-dnd-droparea {
  width: 184px; height: 136px; border: 2px dashed var(--sub);
  background: rgba(116,63,231,.1); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.func-dnd-doc {
  width: 120px; height: 160px; background: var(--white); border-radius: 8px;
  box-shadow: 0 0 16px rgba(39,43,51,.1); padding: 24px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.func-dnd-cursor {
  position: absolute; right: 10px; bottom: 20px;
  font-size: 24px; color: var(--sub); transform: rotate(90deg);
}
.func-doc-line { height: 4px; background: rgba(39,43,51,.3); border-radius: 2px; width: 100%; }
.func-doc-line--short { width: 68px; }

.func-illust-types { position: relative; width: 220px; height: 200px; display: flex; align-items: center; justify-content: center; }
.func-type-badge {
  position: absolute; width: 80px; height: 80px; border-radius: 9999px;
  background: var(--white); display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: var(--sub); box-shadow: 0 0 16px rgba(39,43,51,.1);
}
.func-type-badge--url  { left: 20px;  top: 60px; }
.func-type-badge--text { left: 70px;  top: 10px; }
.func-type-badge--file { left: 120px; top: 60px; }
.func-type-url-bar {
  position: absolute; bottom: 20px; left: 20px;
  background: linear-gradient(90deg, var(--main-light), var(--main));
  color: var(--white); font-size: 14px; font-weight: 700;
  padding: 8px; border-radius: 8px; white-space: nowrap;
}

.func-illust-guides { display: flex; flex-direction: column; gap: 12px; padding: 24px; width: 100%; }
.func-guide-item {
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border-radius: 8px; padding: 8px;
  box-shadow: 0 0 16px rgba(39,43,51,.1);
}
.func-guide-item img { width: 24px; height: 24px; flex-shrink: 0; }
.func-guide-item span { font-size: 14px; font-weight: 700; color: var(--main-dark); }

.func-illust-ai { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; width: 100%; }
.func-ai-doc {
  flex: 1; background: var(--white); border-radius: 8px;
  box-shadow: 0 0 16px rgba(39,43,51,.1); padding: 16px 14px;
  display: flex; flex-direction: column; gap: 10px; position: relative;
}
.func-ai-doc .func-doc-line { height: 3px; }
.func-ai-doc .func-doc-line--short { width: 44px; }
.func-ai-label {
  display: block; font-size: 14px; font-weight: 700; color: var(--main-dark); white-space: nowrap;
  margin-bottom: 4px;
}
.func-ai-label--after { color: var(--main); font-size: 18px; margin-top: 4px; }
.func-ai-badge {
  width: 52px; height: 52px; border-radius: 9999px; background: var(--sub);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--white); flex-shrink: 0;
}

/* Lawyers */
.function-lawyers { display: flex; gap: 16px; padding: 32px; flex-shrink: 0; }
.function-lawyer { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.function-lawyer-photo { width: 200px; height: 200px; border-radius: 16px; overflow: hidden; }
.function-lawyer-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.function-lawyer-name { font-size: 18px; font-weight: 500; color: var(--black); white-space: nowrap; }

/* ===== Use Case ===== */
.usecase { padding: 128px 0; background: var(--white); }
.usecase .container { display: flex; flex-direction: column; gap: 64px; }

.usecase-cols { display: flex; gap: 32px; height: 448px; }
.usecase-col-card {
  flex: 1; background: var(--grad-page); border-radius: 32px;
  padding: 32px 24px; display: flex; flex-direction: column; gap: 32px;
}
.usecase-col-title { font-size: 32px; font-weight: 700; line-height: 1.25; color: var(--black); text-align: center; }
.usecase-list { list-style: none; display: flex; flex-direction: column; gap: 24px; }
.usecase-list li { display: flex; align-items: center; gap: 8px; }
.usecase-list li img { width: 24px; height: 24px; flex-shrink: 0; }
.usecase-list li span { font-size: 18px; font-weight: 700; line-height: 1; color: var(--black); white-space: nowrap; }

.usecase-scenes { display: flex; flex-wrap: wrap; gap: 64px; justify-content: center; }
.usecase-scene { width: 370px; display: flex; flex-direction: column; gap: 32px; }
.usecase-scene-image { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; }
.usecase-scene-image img { width: 100%; height: 100%; object-fit: cover; }
.usecase-scene-title { font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--black); white-space: nowrap; }
.usecase-scene-body { font-size: 18px; font-weight: 400; line-height: 2rem; color: var(--black); }

/* ===== Lower sections wrapper ===== */
.lower-sections { background: var(--grad-page); border-radius: 32px; overflow: hidden; }

/* ===== Testimonials ===== */
.testimonials { padding: 128px 0; }
.testimonials .container { display: flex; flex-direction: column; gap: 64px; }
.testimonial-list { display: flex; flex-direction: column; gap: 32px; }
.testimonial-card { background: var(--white); border-radius: 16px; padding: 32px; display: flex; gap: 32px; align-items: flex-start; }
.testimonial-image { width: 320px; height: 180px; border-radius: 16px; overflow: hidden; flex-shrink: 0; }
.testimonial-image img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-body { flex: 1; display: flex; flex-direction: column; gap: 32px; color: var(--black); }
.testimonial-head { display: flex; flex-direction: column; gap: 16px; }
.testimonial-title { font-size: 24px; font-weight: 700; line-height: 1.25; }
.testimonial-meta { display: flex; gap: 16px; font-size: 18px; font-weight: 500; line-height: 1; }
.testimonial-text { font-size: 18px; font-weight: 400; line-height: 2rem; }

/* ===== CTA Form ===== */
.cta-form { padding: 128px 0; background-image: var(--grad-dark); border-radius: 32px; }
.cta-form-inner { display: flex; flex-direction: column; align-items: center; gap: 64px; }
.form-card {
  background: var(--white); border-radius: 16px; padding: 128px 64px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
.form-control { display: flex; flex-direction: column; gap: 16px; width: 880px; }
.form-title-row { display: flex; align-items: center; gap: 16px; }
.form-label { font-size: 18px; font-weight: 700; line-height: 1; color: var(--black); white-space: nowrap; }
.required-badge {
  display: inline-flex; align-items: center; padding: 4px 8px;
  background: var(--danger); color: var(--white);
  font-size: 14px; font-weight: 700; line-height: 1; border-radius: 9999px; white-space: nowrap;
}
.form-input {
  width: 100%; height: 56px; border: 1px solid rgba(39,43,51,.3); border-radius: 8px;
  padding: 0 16px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--black);
  background: var(--white); outline: none; transition: border-color .2s;
}
.form-input::placeholder { color: rgba(39,43,51,.3); }
.form-input:focus { border-color: var(--sub); }

/* ===== FAQ ===== */
.faq { padding: 128px 0; }
.faq .container { display: flex; flex-direction: column; gap: 64px; }
.faq-list { display: flex; flex-direction: column; gap: 32px; }
.faq-item { background: var(--white); border-radius: 16px; overflow: hidden; }
.faq-question {
  width: 100%; display: flex; align-items: center; gap: 24px; padding: 24px;
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq-icon { width: 32px; height: 32px; flex-shrink: 0; }
.faq-question-text { flex: 1; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--black); }
.faq-toggle-icon { width: 24px; height: 24px; flex-shrink: 0; }
.faq-answer { display: none; padding: 0 24px 24px; font-size: 18px; font-weight: 400; line-height: 2rem; color: var(--black); }
.faq-item.open .faq-answer { display: block; }

/* ===== Footer ===== */
.footer {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; padding: 128px 16px; background: var(--white);
  font-size: 16px; font-weight: 500; color: var(--black);
}
.footer-nav { display: flex; gap: 32px; }
.footer-nav a { color: var(--black); white-space: nowrap; }
.footer-nav a:hover { text-decoration: underline; }
.footer-copy { white-space: nowrap; }

/* ===== Responsive (SP: ≤ 767px) ===== */
@media (max-width: 767px) {

  /* Layout */
  .container { width: 100%; padding: 0 16px; }

  /* Section title */
  .section-title { font-size: 32px; }

  /* Buttons */
  .btn-yellow, .btn-gradient { width: 100%; max-width: 320px; }

  /* ===== Header ===== */
  .header-inner { padding: 20px 16px; }
  .header-nav { display: none; }

  /* ===== First View ===== */
  .first-view { padding-top: 80px; min-height: 600px; border-radius: 0 0 24px 24px; }
  .fv-container { width: 100%; padding: 64px 16px 0; gap: 32px; }
  .fv-text { gap: 24px; }
  .fv-sub { font-size: 18px; white-space: normal; text-align: center; }
  .fv-title { font-size: 32px; }
  .fv-image-area { height: 238px; width: 100%; }
  .fv-screenshot { width: 317px; height: 238px; border-radius: 12px; }
  .fv-sub-image { right: 0; top: 56px; width: 242px; height: 116px; border-radius: 12px; }

  /* ===== Summary ===== */
  .summary { padding: 64px 0; }
  .summary-inner { flex-direction: column; gap: 32px; }
  .summary-title { font-size: 24px; }
  .summary-title p:not(:first-child) { font-size: 32px; }
  .summary-body { font-size: 18px; }
  .summary-image { flex: none; width: 100%; padding: 32px 0 0 32px; }

  /* ===== Problem ===== */
  .problem { padding: 64px 0; }
  .problem .section-title { font-size: 32px; white-space: normal; }
  .problem-cols { flex-direction: column; gap: 16px; }
  .problem-card-title { font-size: 24px; }

  /* ===== Solution ===== */
  .solution { padding: 64px 0; border-radius: 32px 32px 0 0; }
  .solution .container { gap: 32px; }
  .solution-title-sub { font-size: 24px; }
  .solution-title-main { font-size: 32px; }
  .solution-section { flex-direction: column; gap: 24px; }
  .solution-section .solution-image { order: -1; flex: none; width: 100%; }
  .solution-text { flex: none; width: 100%; gap: 24px; }
  .solution-section-title { font-size: 24px; }

  /* ===== Function ===== */
  .function { padding: 64px 0; border-radius: 32px; }
  .function-grid { grid-template-columns: 1fr; gap: 16px; }
  .function-card--wide { grid-column: 1; flex-direction: column; }
  .function-card-title--wide { font-size: 24px; }
  .function-lawyers { padding: 16px; justify-content: center; flex-wrap: wrap; }
  .function-lawyer-photo { width: 140px; height: 140px; }
  .function-card-image { height: 220px; }

  /* ===== Use Case ===== */
  .usecase { padding: 64px 0; }
  .usecase-cols { flex-direction: column; height: auto; gap: 16px; }
  .usecase-col-card { padding: 24px 16px; }
  .usecase-list li span { font-size: 16px; }
  .usecase-scenes { flex-direction: column; gap: 40px; }
  .usecase-scene { width: 100%; }
  .usecase-scene-title { font-size: 20px; white-space: normal; }
  .usecase-scene-body { font-size: 16px; }

  /* ===== Testimonials ===== */
  .testimonials { padding: 64px 0; }
  .testimonial-card { flex-direction: column; }
  .testimonial-image { width: 100%; height: 200px; }
  .testimonial-title { font-size: 20px; }
  .testimonial-text { font-size: 16px; }

  /* ===== CTA Form ===== */
  .cta-form { padding: 64px 0; border-radius: 24px; }
  .cta-form-inner { gap: 40px; }
  .form-card { padding: 40px 24px; gap: 24px; }
  .form-control { width: 100%; }

  /* ===== FAQ ===== */
  .faq { padding: 64px 0; }
  .faq-question { gap: 16px; padding: 20px 16px; }
  .faq-question-text { font-size: 18px; }
  .faq-answer { padding: 0 16px 20px; font-size: 16px; }

  /* ===== Lower sections wrapper ===== */
  .lower-sections { border-radius: 24px; }

  /* ===== Footer ===== */
  .footer { padding: 64px 16px; }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 16px; }
}

/* ===== Legal Pages (terms / privacy) ===== */
.legal-head {
  padding-top: 112px;
  background: linear-gradient(to left, var(--main-light), var(--main));
  border-radius: 0 0 32px 32px;
}
.legal-head-inner {
  width: 840px; margin: 0 auto;
  padding: 64px 0;
}
.legal-head-title {
  font-size: 56px; font-weight: 700; line-height: 1.25; color: var(--white);
}
.legal-content {
  width: 840px; margin: 0 auto;
  padding: 128px 0;
  display: flex; flex-direction: column; gap: 64px;
}
.legal-section { display: flex; flex-direction: column; gap: 32px; }
.legal-h {
  font-size: 32px; font-weight: 700; line-height: 1.25;
  color: var(--sub);
}
.legal-body {
  font-size: 16px; font-weight: 400; line-height: 2rem; color: var(--black);
}
.legal-ol, .legal-ul {
  font-size: 16px; font-weight: 400; line-height: 2rem; color: var(--black);
  padding-left: 0; list-style-position: outside;
}
.legal-ol { list-style-type: decimal; padding-left: 1.5em; }
.legal-ul { list-style-type: disc; padding-left: 1.5em; }
.legal-ol li, .legal-ul li { margin-bottom: 0; }
.legal-ol ol { list-style-type: decimal; padding-left: 3em; }
.legal-address { font-style: normal; font-size: 16px; line-height: 2rem; color: var(--black); }

@media (max-width: 767px) {
  .legal-head-inner { width: 100%; padding: 48px 16px; }
  .legal-head-title { font-size: 40px; }
  .legal-content { width: 100%; padding: 64px 16px; gap: 48px; }
  .legal-h { font-size: 24px; }
}