/* ==========================================================================
   Media Base — メディア個別記事（md_article / prn_release）用の最小共通CSS
   --------------------------------------------------------------------------
   media.css（約 105KB・アーカイブ／ポータル用）のうち、個別記事で実際に使われる
   ルールだけを切り出したもの。2026-09-18 に記事 10 本（自動ニュース 8・PR Newswire 2）
   をモバイル／デスクトップでスクロール込みのカバレッジ計測をしたところ、media.css は
   2,435 / 102,306 バイト（2.4%）しか使われておらず、interviews.css は 0% だった。
   個別記事では media.css / interviews.css の代わりに本ファイルを読み込む。
   出典の行番号は当時の media.css。ここを編集したら media.css 側も同じに揃えること。
   ========================================================================== */

/* media.css 7-45: .page-media 基本 */
.page-media .site-header,
.page-media .floating-nav,
.page-media .back-to-top,
.page-media .portal-footer {
  margin-top: 0;
}

.page-media .site-main {
  padding: 0;
  margin: 0;
}

.page-media {
  padding-top: var(--header-height);
  background: var(--md-color-bg, #f8fafc);
  overflow-x: hidden;
}

/* 独自HTML構造用のリセット（get_header()を使わない場合） */
.page-media .media-portal,
.page-media #md-main-content,
.tag-archive .md-archive {
  margin: 0;
  padding: 0;
}

/* グローバル幅制御 — 子要素の横はみ出し防止 */
.page-media *,
.page-media *::before,
.page-media *::after {
  box-sizing: border-box;
}

.page-media img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================

/* media.css 102-136: メディア用 CSS 変数 */
:root {
  --md-color-primary: #667bee;
  --md-color-primary-hover: #4955e2;
  --md-color-text: #111827;
  --md-color-text-muted: #6b7280;
  --md-color-text-light: #9ca3af;
  --md-color-bg: #f8fafc;
  --md-color-bg-alt: #f1f5f9;
  --md-color-bg-card: #ffffff;
  --md-color-bg-dark: #0f172a;
  --md-color-bg-darker: #020617;
  --md-color-border: #e2e8f0;
  --md-color-accent-green: #13b66a;
  --md-color-accent-note: #41c9b4;
  --md-color-accent-x: #1d9bf0;
  --md-gradient-accent: linear-gradient(90deg, #63b9f7, #9a8df8, #f175c7);
  --md-gradient-accent-light: linear-gradient(90deg, rgba(99, 185, 247, 0.15), rgba(154, 141, 248, 0.15), rgba(241, 117, 199, 0.15));
  --md-radius-sm: 6px;
  --md-radius-md: 10px;
  --md-radius-lg: 12px;
  --md-space-xs: 4px;
  --md-space-sm: 8px;
  --md-space-md: 16px;
  --md-space-lg: 24px;
  --md-space-xl: 32px;
  --md-space-2xl: 48px;
  --md-space-3xl: 64px;
  --md-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --md-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --md-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --md-transition: 0.3s ease;
  --md-container: 1440px;
  --md-section-pad: var(--md-space-3xl);
  --md-section-pad-mobile: var(--md-space-xl);
}

/* media.css 3250-3256: モバイル時の上下余白（portal-header と bottom-nav の分） */
@media (max-width: 768px) {
  .page-media {
    padding-top: 56px; /* portal-headerのモバイル高さ分 */
    padding-bottom: 72px; /* bottom-nav分 */
  }
}

/* media.css 4795-4839: トップに戻るボタン */
/* ==========================================================================
   トップに戻るボタン
   ========================================================================== */
.md-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--md-color-border);
  background: var(--md-color-surface);
  color: var(--md-color-text);
  box-shadow: var(--md-shadow-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s, background 0.15s;
  z-index: 900;
}

.md-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.md-back-to-top:hover {
  background: var(--md-color-primary);
  color: #fff;
  border-color: var(--md-color-primary);
}

@media (max-width: 640px) {
  .md-back-to-top {
    bottom: 80px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}