/* ============================================
   page-article.css
   p- 接頭辞：お知らせ・利用規約・特定商取引法など静的ドキュメントページ共通
   クラス名はページ種別に依存しない汎用設計
   ============================================ */


/* ============================================
   p-page-header（パンくず + ページ見出しバナー）
   ============================================ */
.p-page-header {
  background: var(--color-bg-blue-light);
  padding: 3.5rem var(--section-px) min(7.81vw, 6.25rem);
  margin-top: -1.5rem;
}

.p-page-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: min(6.25vw, 5rem);
}

.p-page-header__title {
  font-family: var(--font-round);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-text);
  line-height: var(--leading-tight);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.p-page-header__category {
  font-weight: 800;
  font-size: 28px;
}


/* ============================================
   p-page-main（本文エリア）
   ============================================ */
.p-page-main {
  padding: var(--section-py) var(--section-px);
  background: var(--color-white);
}

.p-page-main__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-text-light);
}

/* 日付（お知らせ記事用） */
.p-page-main__date {
  display: block;
  font-family: var(--font-en);
  font-size: var(--text-sm);
  margin-bottom: 0.75rem;
}

/* ページ・記事タイトル（id="page-main-title"）*/
#page-main-title {
  font-family: var(--font-round);
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text);
  line-height: var(--leading-tight);
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

/* 本文：クラス不要・タグセレクターで直接スタイリング */
.p-page-main__body {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-loose);
}

.p-page-main__body p {
  margin-bottom: 1.5rem;

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

/* h3：セクション見出し（border-left アクセント） */
.p-page-main__body h3 {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  padding-left: 0.75rem;
  border-left: 4px solid var(--color-primary);
  margin: 2rem 0 1rem;
}

/* 本文最初の見出しはmargin-topなし */
.p-page-main__body > :is(h2, h3):first-child {
  margin-top: 0;
}

.p-page-main__body ul,
.p-page-main__body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.p-page-main__body li {
  margin-bottom: 0.5rem;
}

/* リンク：下線 + ホバー */
.p-page-main__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.25s ease;

  &:hover {
    opacity: 0.6;
  }
}

/* target="_blank" リンク：外部リンクアイコン（SVG mask / currentColor）テキスト前に表示 */
.p-page-main__body a[target="_blank"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='2.39655' width='11.1034' height='11.1034' stroke='black'/%3E%3Cpath d='M0.93103 0.5H13.5V13.069' stroke='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='2.39655' width='11.1034' height='11.1034' stroke='black'/%3E%3Cpath d='M0.93103 0.5H13.5V13.069' stroke='black'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  margin-right: 6px;
  vertical-align: middle;
}

.p-page-main__body small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-sub);
}

.p-page-main__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
}

.p-page-main__body th {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  text-align: left;
  padding: 0.875rem 1.25rem;
  width: 25%;

  &:not(:last-child) {
    border-right: 1px solid var(--color-bg-gray);
  }
}

.p-page-main__body tr {
  &:not(:last-child) {
    border-bottom: 1px solid var(--color-text-muted);
  }
}

.p-page-main__body td {
  background: var(--color-bg-gray-light);
  padding: 0.875rem 1.25rem;

  &:not(:last-child) {
    border-right: 1px solid var(--color-text-muted);
  }
}


/* ============================================
   SP（〜768px）
   ============================================ */
@media (max-width: 768px) {
  .p-page-header {
    padding: 2.75rem var(--section-px) 2.5rem;
  }

  .p-page-header__inner {
    max-width: none;
  }

  .p-page-header__category {
    font-size: 16px;
  }

  #page-main-title {
    font-size: 20px;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .p-page-main__body table {
    display: block;
    overflow-x: auto;
  }

  .p-page-main__body th {
    min-width: 100px;
    padding: .8rem 1rem;
  }

  .p-page-main__body td {
    padding: .8rem 1rem;
  }
}