:root {
  --color-accent: #f97316;
  --color-text: #27272a;
  --color-surface-dark: #27272a;
  --color-surface-light: #fafaf9;
}

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

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: YuGothic, "Yu Gothic", sans-serif;
  color: var(--color-text);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

a:hover {
  text-decoration: none;
  opacity: 0.85;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

strong {
  font-weight: bold;
}

small {
  font-size: inherit;
}

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

/* ===== Layout ===== */
.container {
  box-sizing: content-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.panel {
  box-sizing: border-box;
  max-width: 1100px;
  margin: 60px auto;
  padding: clamp(24px, 4vw, 60px);
  border-radius: 8px;
  background: var(--color-surface-light);
  text-align: center;
}

.panel-spaced {
  margin: 60px auto 80px;
}

/* ===== Header ===== */
.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 12px;
  background: #fff;

  .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 16px 20px 0;
  }

  .logo {
    width: 120px;
    transition: 0.3s;

    img {
      width: 100%;
    }

    &:hover {
      opacity: 0.7;
    }
  }
}

/* ===== Hamburger ===== */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;

  span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-surface-dark);
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
  }

  &[aria-expanded="true"] {
    span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    span:nth-child(2) {
      opacity: 0;
    }
    span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }
  }
}

/* ===== Navigation ===== */
.site-nav {
  display: none;
  width: 100%;
  padding: 16px 0 8px;

  &.is-open {
    display: block;
  }

  .wrap {
    display: flex;
    flex-direction: column;
  }

  .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .item {
    width: 100%;
    padding: 0;
    color: var(--color-surface-dark);
    font-size: 14px;
    font-weight: bold;
    text-align: center;

    a {
      display: block;
      padding: 12px 0;
      color: var(--color-surface-dark);
      border-bottom: 1px solid #e5e5e5;

      &::after {
        display: none;
      }

      &:hover {
        opacity: 0.7;
      }
    }

    &:last-child a {
      border-bottom: none;
    }
  }
}

/* ===== Tablet+ (768px〜): Desktop nav ===== */
@media (min-width: 768px) {
  .site-header {
    .inner {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px 50px 0;
    }

    .logo {
      width: 160px;
      margin-bottom: 12px;
    }
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    width: auto;
    padding: 0;
    align-items: flex-end;

    &.is-open {
      display: flex;
    }

    .menu {
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }

    .item {
      width: auto;
      padding: 0 0 0 20px;
      font-size: 12px;
      text-align: left;

      &:first-child {
        padding: 0;
      }

      a {
        position: relative;
        padding: 0 0 5px;
        border-bottom: 1px solid transparent;

        &::after {
          content: "";
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 0;
          height: 1px;
          background: var(--color-surface-dark);
          transition: 0.3s;
        }

        &:hover {
          opacity: 1;

          &::after {
            width: 100%;
          }
        }
      }

      &:last-child a {
        border-bottom: 1px solid transparent;
      }
    }
  }
}

/* ===== Headings ===== */
.title-display {
  font-size: clamp(22px, 2vw + 14px, 28px);
  line-height: 1.5;

  .highlight {
    color: var(--color-accent);
    font-size: clamp(28px, 3vw + 14px, 42px);
  }

  .small {
    font-size: clamp(18px, 1.5vw + 12px, 24px);
  }
}

.section-title {
  position: relative;
  margin-bottom: clamp(40px, 5vw, 60px);
  font-size: clamp(24px, 2.5vw + 12px, 36px);
  line-height: 1.5;
  text-align: center;

  &::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 65px;
    height: 3px;
    transform: translateX(-50%);
    background: var(--color-accent);
  }

  &.inverted {
    color: #fff;

    &::after {
      background: var(--color-accent);
    }
  }
}

.block-title {
  margin: 20px 0;
  font-size: clamp(18px, 1.5vw + 10px, 24px);
  text-align: center;
}

/* ===== Buttons ===== */
.btn {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 410px;
  min-height: 60px;
  padding: 10px 45px 10px 20px;
  transition: 0.3s;
  border-radius: 100vh;
  background: var(--color-surface-dark);
  box-shadow: rgba(39, 39, 42, 0.2) 0 0 6px;
  color: #fff;
  font-size: clamp(16px, 1.5vw + 10px, 20px);
  font-weight: bold;
  cursor: pointer;

  &::after {
    content: "";
    position: absolute;
    right: 24px;
    width: 20px;
    height: 20px;
    transition: 0.3s;
    background: url("images/ico_arrow.svg") center center / contain no-repeat;
  }

  &:hover {
    opacity: 1;

    &::after {
      right: 15px;
    }
  }
}

/* ===== Hero ===== */
.hero {
  position: relative;
  height: auto;
  padding-bottom: 100px;
  background: none;

  &::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 15%;
    background: var(--color-surface-dark);
    clip-path: polygon(
      0% 18%,
      1% 18.9%,
      2% 19.8%,
      3% 20.8%,
      4% 21.8%,
      5% 23%,
      6% 24.3%,
      7% 25.6%,
      8% 27.1%,
      9% 28.5%,
      10% 30%,
      11% 31.4%,
      12% 32.9%,
      13% 34.2%,
      14% 35.6%,
      15% 37%,
      16% 38.4%,
      17% 39.8%,
      18% 41.2%,
      19% 42.6%,
      20% 44%,
      21% 45.5%,
      22% 46.9%,
      23% 48.4%,
      24% 49.7%,
      25% 51%,
      26% 52.2%,
      27% 53.2%,
      28% 54.2%,
      29% 55.1%,
      30% 56%,
      31% 56.9%,
      32% 57.6%,
      33% 58.3%,
      34% 58.8%,
      35% 59%,
      36% 59%,
      37% 58.7%,
      38% 58.3%,
      39% 57.7%,
      40% 57%,
      41% 56.3%,
      42% 55.6%,
      43% 54.8%,
      44% 53.9%,
      45% 53%,
      46% 52%,
      47% 51%,
      48% 50%,
      49% 49%,
      50% 48%,
      51% 47.1%,
      52% 46.3%,
      53% 45.6%,
      54% 44.8%,
      55% 44%,
      56% 43.2%,
      57% 42.3%,
      58% 41.5%,
      59% 40.7%,
      60% 40%,
      61% 39.4%,
      62% 38.9%,
      63% 38.5%,
      64% 38.2%,
      65% 38%,
      66% 37.8%,
      67% 37.8%,
      68% 37.8%,
      69% 37.8%,
      70% 38%,
      71% 38.2%,
      72% 38.6%,
      73% 39%,
      74% 39.4%,
      75% 40%,
      76% 40.6%,
      77% 41.4%,
      78% 42.2%,
      79% 43%,
      80% 44%,
      81% 45%,
      82% 46.1%,
      83% 47.3%,
      84% 48.6%,
      85% 50%,
      86% 51.5%,
      87% 53%,
      88% 54.6%,
      89% 56.3%,
      90% 58%,
      91% 59.8%,
      92% 61.6%,
      93% 63.6%,
      94% 65.7%,
      95% 68%,
      96% 70.5%,
      97% 73.2%,
      98% 76.1%,
      99% 79%,
      100% 82%,
      100% 100%,
      0% 100%
    );
  }

  .content {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 100px;
    gap: 32px 0;
  }

  .copy {
    z-index: 2;
  }

  .lead {
    max-width: 600px;
    margin: 32px auto 0;
    font-size: 16px;
  }

  .actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    gap: 16px 0;
  }

  .visual {
    position: relative;
    max-width: 500px;
    width: 100%;

    img {
      position: relative;
      top: 0;
      width: 100%;
      height: auto;
    }
  }
}

@media (min-width: 768px) {
  .hero {
    padding-bottom: 130px;

    &::after {
      height: 20%;
    }

    .content {
      padding-top: 180px;
    }
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-bottom: 160px;
    background: url("images/img_mv_back.png") right -1020px top 323px / auto 793px no-repeat;

    &::after {
      height: 25%;
    }

    .content {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      text-align: left;
      padding-top: 190px;
      gap: 0 40px;
    }

    .copy {
      flex: 0 1 600px;
    }

    .lead {
      margin: 32px 0 0;
    }

    .actions {
      align-items: flex-start;
      margin-top: 64px;
    }

    .visual {
      flex: 0 1 582px;
      max-width: none;
      right: 0;
    }
  }
}

/* ===== Cases (事例) ===== */
.cases {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 300px;
    background: var(--color-surface-dark);
  }

  .lead {
    color: #fff;
    font-size: 16px;
    text-align: center;
  }
}

/* ===== Card Grid (共有コンポーネント) ===== */
.card-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 72px 0 0;
  gap: 40px;

  .card {
    position: relative;
    width: auto;
    padding: 0 0 20px;
    border-radius: 8px;
    background: var(--color-surface-light);
    letter-spacing: 0;

    .thumb {
      width: 100%;
      height: 200px;
      border-radius: 8px 8px 0 0;
      object-fit: cover;
    }

    .name {
      margin: 16px 20px 0;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }

    .desc {
      padding: 24px 20px 24px;
      color: var(--color-text);
      font-size: 14px;
      line-height: 1.75;
    }

    &.placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      background: #e5e5e5;
      color: #a3a3a3;
      font-size: 18px;
      font-weight: bold;
    }
  }
}

/* ===== Products (プロダクト紹介) ===== */
.products {
  position: relative;
  margin-top: 80px;

  .lead {
    font-size: 16px;
    text-align: center;
  }
}

/* ===== CTA ===== */
.cta {
  box-sizing: border-box;
  width: auto;
  max-width: 1100px;
  margin: 40px auto 0;
  padding: clamp(24px, 4vw, 60px);
  border-radius: 8px;
  background: var(--color-surface-light);
  text-align: center;

  .actions {
    display: flex;
    justify-content: center;
    gap: 0 40px;
    margin: 40px auto 0;
  }
}

/* ===== Contact Form ===== */
.contact-form {
  max-width: 480px;
  margin: 40px auto 0;
  text-align: left;

  .form-field {
    margin-bottom: 24px;
  }

  label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
  }

  input,
  textarea {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e4e4e7;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.2s, outline-color 0.2s;

    &:focus {
      outline: 2px solid var(--color-accent);
      border-color: var(--color-accent);
    }
  }

  textarea {
    resize: vertical;
  }

  .form-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }

  button[disabled] {
    opacity: .6;
    cursor: not-allowed;
  }

  .form-error {
    color: #dc2626;
    font-size: 14px;
    margin-bottom: 16px;
  }
}

.form-success {
  max-width: 480px;
  margin: 40px auto 0;
  padding: 40px 24px;
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
}

/* ===== Strengths (pivopの強み) ===== */
.strengths {
  margin-top: 120px;
  padding: 80px 0;
  background: var(--color-surface-light);

  .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .card {
    width: auto;
    padding: 40px;
    border-radius: 8px;
    background: #fff;

    .name {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: var(--color-accent);
    }

    .tagline {
      margin-top: 16px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      color: var(--color-text);
    }

    .detail {
      margin-top: 20px;
      font-size: 14px;
      line-height: 1.75;
      color: var(--color-text);
    }
  }
}

/* ===== Contact (ヒアリング→ご提案) ===== */
.contact {
  background: #fff;

  .process {
    margin-top: 80px;

    .flow {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;

      .step {
        position: relative;
        background: #fff;
        border-radius: 12px;
        padding: clamp(24px, 4vw, 60px) clamp(24px, 4vw, 60px) clamp(24px, 4vw, 60px) calc(clamp(24px, 4vw, 60px) + 72px); /* 左 = panel余白 + 72px アイコン領域 */

        &:nth-child(n+2) {
          margin-top: 64px;

          /* 2段シェブロン（∨∨）をカード幅の中央に配置 */
          &::before,
          &::after {
            content: "";
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 20px;
            height: 20px;
            border-right: 3px solid var(--color-accent);
            border-bottom: 3px solid var(--color-accent);
            transform: rotate(45deg);
          }

          &::before { top: -46px; }
          &::after  { top: -32px; }
        }
      }

      .block-title {
        margin: 0 0 24px -72px; /* アイコン列と左揃え */
        text-align: left;
      }

      .topics {
        display: contents;
      }

      .topic {
        position: relative;
        width: auto;
        padding: 0 0 24px;
        border-radius: 0;
        background: transparent;

        &:last-child {
          padding-bottom: 0;
        }

        .name {
          padding-bottom: 8px;
          color: var(--color-text);
          font-size: 18px;
          font-weight: bold;
          text-align: left;
        }

        .points {
          padding-left: 20px;
          list-style: disc;
          text-align: left;

          li {
            padding-top: 10px;
            font-size: 15px;

            &:first-child {
              padding-top: 0;
            }
          }
        }
      }

      .icon {
        position: absolute;
        top: 0;
        left: -72px;
        width: 52px;
        height: 52px;
        transform: none;
        border-radius: 50%;
        background: center / 60% no-repeat var(--color-accent);

        &.is-workflow  { background-image: url("images/ico_flow.svg"); }
        &.is-challenge { background-image: url("images/ico_pain.svg"); }
        &.is-vision    { background-image: url("images/ico_goal.svg"); }
        &.is-proposal  { background-image: url("images/ico_idea.svg"); }
      }

      .proposal {
        position: relative;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        text-align: left;

        p {
          font-size: 15px;
          line-height: 1.8;
        }
      }
    }
  }
}

/* ===== Company (会社概要) ===== */
.company {
  padding: 80px 0;
  background: var(--color-surface-light);

  .info-list {
    max-width: 600px;
    margin: 0 auto;
  }

  .info-row {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    border-bottom: 1px solid #e4e4e7;
    gap: 4px;

    &:first-child {
      border-top: 1px solid #e4e4e7;
    }

    dt {
      font-size: 12px;
      font-weight: bold;
      color: #71717a;
    }

    dd {
      font-size: 15px;
      line-height: 1.6;
    }
  }
}

@media (min-width: 768px) {
  .company .info-row {
    flex-direction: row;
    align-items: baseline;
    gap: 0;

    dt {
      flex: 0 0 120px;
      font-size: 14px;
    }

    dd {
      flex: 1;
    }
  }
}

/* ===== Footer ===== */
.site-footer {

  .body {
    margin: clamp(40px, 6vw, 80px) 0 0;
    padding: 40px 0;
    background: var(--color-surface-dark);
  }

  .inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
  }

  .logo {
    width: 160px;
    margin: 0 auto 16px;

    img {
      width: 100%;
    }
  }

  address {
    color: #fff;
    font-size: 13px;
    font-style: normal;
    line-height: 1.8;
  }

  small {
    display: block;
    padding: 5px 0;
    background: var(--color-surface-dark);
    color: #fff;
    font-size: 12px;
    text-align: center;
  }
}

/* ===== Utility ===== */
@media (max-width: 767px) {
  .sp-hide { display: none; }
}

/* ===== Responsive: Tablet+ (768px〜) ===== */
@media (min-width: 768px) {
  .cases::before {
    height: 380px;
  }

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

  .contact .process .flow {
    max-width: 600px;
    margin: 0 auto;
  }
}