/* =========================
   about.css — 会社情報ページ専用
   ========================= */

/* ベース：index/style.css のトーンに合わせて極力シンプル */
.about .hero-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 0 8px;
  text-align: center;                 /* 会社情報（タイトル）左右センター */
}

.about .hero-title {
  margin: 12px 0 18px;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  display: inline-block;              /* 文字幅分だけ下線 */
  letter-spacing: 0.05em;             /* 文字の間隔を少し広げる */
  border-bottom: 3px solid #f2de41;   /* 文字幅分のボーダーボトム */
  padding-bottom: 6px;                /* 下線との間隔 */
}

/* 目立つリンク */
.about-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.about-cta__link {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.about-cta__link:focus-visible {
  outline: 2px solid #0099ff;
  outline-offset: 2px;
}

/* セクション */
.company-section {
  max-width: 780px;
  margin: 24px auto;
}

.section-title {
  font-size: clamp(1.2rem, 1.6vw, 1.3rem);
  margin-bottom: 12px;
  text-align: left;
  margin-left: 24px;
}

/* 会社概要テーブル：沿革の列幅と統一（PC 180px / SP 120px） */
.company-grid {
  margin-left: 8px;
  --label-col: 180px;
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  gap: 8px 20px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
}
.company-grid dt {
  color: #6b6b6b;
  text-align: left;
}
.company-grid dd {
  margin: 0;
}
.company-desc-list {
  margin: 0;
  padding-left: 1.2em;
  list-style: disc;
}

/* 沿革（マーカーなし・年月と説明の2列／折返しは説明の行頭にそろえる） */
.history-list {
  margin-left: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px 16px;
}
.history-item {
  display: grid;
  grid-template-columns: var(--label-col, 180px) 1fr;
  column-gap: 20px;
  align-items: start;
  padding: 6px 0;              /* ← li行間 広め */
  line-height: 1.7;            /* ← 行間を少し広げる */
}
.history-item .date {
  color: #6b6b6b;
  white-space: nowrap;
}
.history-item .desc {
  text-align: left;
}

/* 主な制作番組（マーカーは内側・左に少しマージン） */
.works-list {
  list-style: disc inside;
  margin: 0 0 0 8px;           /* ← 左に少しマージン */
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  line-height: 1.7;            /* ← 行間を少し広げる */
}

/* Mobile (<=640px) 調整 */
@media (max-width: 640px) {
  /* 会社概要：dt と dd を行替え（1カラム化）*/
  .company-grid {
  margin-left: 0;
    --label-col: 120px;
    grid-template-columns: 1fr;    /* ← 1カラム（行替え） */
    row-gap: 10px;
  }

  .company-grid dt {
    /* モバイルのみ項目名にアンダーライン（色指定・上下の間隔） */
    text-decoration-line: underline;
    text-decoration-color: #f2de41;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;    /* ← 少し上下の間隔 */
    margin-top: 6px;
  }
  .company-grid dd {
    padding-left: 0;
  }

  /* 沿革は列のままでもOKだが、視認性向上のため同幅維持 */
  .history-item {
    grid-template-columns: var(--label-col) 1fr;
  }
  /* モバイル：箇条書きのマーカー右側の空白を狭く（カスタムマーカー） */
  .works-list,
  .company-desc-list {
    list-style: none;              /* 既定のマーカーを消す */
    padding-left: 0;
    margin-left: 8px;              /* 既存レイアウトに合わせて少し右へ */
  }
  .works-list li,
  .company-desc-list li {
    position: relative;
    padding-left: 12px;            /* ← マーカーと本文の最小スペース */
    line-height: 1.7;
  }
  .works-list li::before,
  .company-desc-list li::before {
    content: "";
    position: absolute;
    left: 0.1em;               /* ← マーカー位置 */
    top: 0.68em;                   /* ベースラインに近づける */
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;      /* テキスト色に追従 */
  }
  .works-list{
    margin: 0;
    padding:0;
  }
}

/* アクセシビリティ用（画面には表示しないがスクリーンリーダーに伝える） */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}