/* SEO E-E-A-T メタ情報バー (全社共通) */
.seo-meta-bar {
  background: #f8f9fb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #4b5563;
}
.seo-meta-bar__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
}
@media (max-width: 820px) {
  .seo-meta-bar__inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.seo-meta-bar__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.seo-meta-bar__author img {
  border-radius: 50%;
  border: 1px solid #d1d5db;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: cover;
}
.seo-meta-bar__author-info {
  display: flex;
  flex-direction: column;
}
.seo-meta-bar__author-info strong {
  font-size: 13px;
  color: #1f2937;
  font-weight: 700;
}
.seo-meta-bar__author-info strong a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #6b7280;
}
.seo-meta-bar__author-info strong a:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}
.seo-meta-bar__author-info span {
  font-size: 11.5px;
  color: #6b7280;
}
.seo-meta-bar__dates {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;
  color: #6b7280;
  white-space: nowrap;
}
.seo-meta-bar__label {
  font-weight: 700;
  color: #4b5563;
}
.seo-meta-bar__policy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11.5px;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .seo-meta-bar__policy {
    align-items: flex-start;
  }
}
.seo-meta-bar__policy a {
  color: #1d4ed8;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.seo-meta-bar__policy a:hover {
  color: #1e3a8a;
}
.seo-meta-bar__pr {
  color: #9ca3af;
  font-size: 10.5px;
  margin-top: 2px;
}

/* ========== 横スクロールヒント (全社共通・スマホのみ表示) ========== */
.g-scroll-hint {
  display: none;
  font-size: 11.5px;
  color: var(--co-primary, #c8102e);
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
}
@media (max-width: 760px) {
  .g-scroll-hint { display: block; }
}

/* ========== スマホ横はみ出し防止 (全社共通) ========== */
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  /* g-feat 系: PC2列 → スマホ1列、grid item の min-width:0 強制 */
  .g-feat__grid {
    grid-template-columns: 1fr !important;
  }
  .g-feat__grid > *,
  .g-feat__body,
  .g-feat__side {
    min-width: 0;
    max-width: 100%;
  }
  .g-feat__body img,
  .g-feat__body table,
  .g-feat__side img { max-width: 100%; height: auto; }

  /* よくある2列以上のgrid: スマホで1列強制 (PC崩さない) */
  .g-strategy--row,
  .g-strategy--cols,
  .g-feat-grid,
  .g-cols-2,
  .g-cols-3,
  .g-course-grid,
  .g-pc-yt-pair {
    grid-template-columns: 1fr !important;
  }
  /* 共通 grid item の min-width 解除 (テーブルは除外: min-width:720px等を保持) */
  .ex-container > * > *:not(table):not(.g-spec-table-wrap):not(.g-table-wrap) { min-width: 0; }
  /* g-rank ラベル: 長文時の枠崩れ修正 (height固定→min-height + 上下padding) */
  .g-rank {
    height: auto !important;
    min-height: 22px;
    padding: 3px 6px !important;
    text-align: center;
    line-height: 1.35;
    white-space: normal;
    font-size: 10.5px !important;
  }
  /* 多列の比較テーブル: スマホで詰め込み (横スクロール解消) */
  .g-compare-table {
    min-width: 0 !important;
    font-size: 11px !important;
    table-layout: auto;
  }
  .g-compare-table th,
  .g-compare-table td {
    padding: 8px 5px !important;
    font-size: 11px !important;
    line-height: 1.45;
    vertical-align: middle;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .g-compare-table th {
    font-size: 10.5px !important;
  }
  /* テーブル wrap は overflow-x で内部スクロール許可、外側は overflow:hidden */
  .g-spec-table-wrap,
  .g-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* ========== 上に戻るボタン (全社共通・Hubトンマナ準拠) ========== */
.g-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--ex-ink, #1a1f2e);
  background: var(--ex-ink, #1a1f2e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 4px 14px rgba(26, 31, 46, 0.18);
  padding: 0;
}
.g-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.g-to-top:hover {
  background: var(--co-primary, #c8102e);
  border-color: var(--co-primary, #c8102e);
  box-shadow: 0 6px 18px rgba(200, 16, 46, 0.28);
}
.g-to-top:active { transform: translateY(1px); }
.g-to-top:focus-visible {
  outline: 2px solid var(--co-primary, #c8102e);
  outline-offset: 2px;
}
.g-to-top svg { display: block; }
@media (max-width: 640px) {
  .g-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}