/* ===== About Page ===== */

/* 社名セクション(SVGビジュアル+本文+CTA) */
.about-name {
  /* SVGが呼吸できる、たっぷり余白(120px相当) */
  padding-block: clamp(5rem, 10vw, 8rem);
}

.about-name__title {
  font-family: var(--font-sans-jp);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-strong);
  margin-bottom: clamp(3rem, 6vw, 5rem);
  letter-spacing: -0.01em;
}

/* Society for us. SVG ヒーロー */
.about-name__visual {
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  width: 90%;
  max-width: 600px;
  display: block;
  text-align: center;
}

.about-name__visual img {
  width: 100%;
  height: auto;
  display: block;
}

.about-name__visual-caption {
  margin-top: var(--space-sm);
  font-family: var(--font-sans-jp);
  font-size: var(--text-small);
  color: var(--color-text-soft);
  letter-spacing: 0.04em;
}

/* 本文 */
.about-name__derivation {
  display: grid;
  gap: var(--space-md);
  font-family: var(--font-sans-jp);
  font-size: var(--text-lead);
  color: var(--color-text);
  line-height: 2;
  max-width: var(--max-width-text);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
}

.about-name__derivation strong {
  color: var(--color-navy);
  font-weight: 700;
}

/* CTA */
.about-name__cta {
  max-width: var(--max-width-text);
  margin: var(--space-lg) auto 0;
}

/* 旧 .about-name__logo クラス(他箇所で参照されている場合のフォールバック) */
.about-name__logo {
  margin: 0 0 var(--space-lg);
  max-width: 480px;
}
.about-name__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 事業構造図 */
.structure-diagram {
  padding-block: var(--space-xl);
  background-color: var(--color-bg-soft);
  position: relative;
  overflow: hidden;
}

.structure-diagram__grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .structure-diagram__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.structure-block {
  padding: var(--space-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}

.structure-block--core {
  border-color: var(--color-navy);
  border-width: 1px;
  border-top-width: 3px;
}

.structure-block--tech {
  grid-column: 1 / -1;
  background-color: var(--color-bg);
  border-style: dashed;
}

.structure-block__axis {
  font-family: var(--font-sans-en);
  font-size: var(--text-xsmall);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 0.5rem;
}

.structure-block__title {
  font-family: var(--font-sans-jp);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-bottom: var(--space-sm);
}

.structure-block__pillar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
  margin-bottom: 0.5rem;
}

.structure-block__pillar-name {
  font-family: var(--font-sans-en);

  font-size: 1.2rem;
  color: var(--color-navy);
  font-weight: 500;
}

.structure-block__pillar-role {
  font-size: var(--text-xsmall);
  color: var(--color-text-soft);
  font-family: var(--font-sans-en);
  letter-spacing: var(--tracking-wide);
}

.structure-block__sublist {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-border);
  display: grid;
  gap: 0.5rem;
  font-size: var(--text-small);
  color: var(--color-text-soft);
}

.structure-block__sublist-label {
  font-family: var(--font-sans-en);
  letter-spacing: var(--tracking-wide);
  color: var(--color-blue);
  font-size: var(--text-xsmall);
  text-transform: uppercase;
  margin-right: 0.5em;
}