/* ============================================================
   wp-utage-shell.css
   WordPress側だけで使用する「UTAGE会員サイット外枠再現用」CSS。
   UTAGE側にはこのCSSを一切使わない（UTAGE会員サイト機能が
   ヘッダー・グローバルメニュー・本物のフッターを自動出力するため）。

   正本にした情報源：オーナー提供の実際のUTAGE会員ページ
   スクリーンショット（2026-08-05提供）。
   基準ページ：https://utage-system.com/members/JfLMelJopTFJ/page/r7UkRU5pgcCh
   （このセッションの環境からは直接アクセスできず、CSSの数値を
   直接計測することはできなかった。下記の値はスクリーンショットの
   目視に基づく近似値であり、【要確認】と明記した項目は
   オーナーによる実測・現物確認が必要）。

   確認できたこと（スクリーンショットで目視確認）：
   - ヘッダー：全幅の帯。背景は左が青系（#639ae9系）→右が紫系の
     グラデーション。ブランド名は白・太字の文字のみで左寄せ。
     ロゴ画像は確認できず（テキストロゴのみと思われる）。
   - ヘッダー内にグローバルメニューの項目は確認できなかった
     （【要確認】：このページではメニュー非表示設定になっている可能性、
     または画面外にある可能性。UTAGE公式マニュアルでは
     ヘッダーメニューを「利用する／利用しない」で切り替えられる
     仕組みがあることのみ確認済み）。
   - モバイルヘッダー：同じグラデーション。ブランド名は幅に収まらない場合
     省略記号（…）で切り詰められる。ハンバーガーメニューの有無は
     提供された画像の範囲では確認できなかった（【要確認】）。
   - 本物のフッター：非常に簡素。白背景、装飾なし。左に
     グレーの小さい文字でサイト名「UTAGE＆DRMマーケティング完全攻略ガイド」、
     右に青いテキストリンク「トップへ戻る」。モバイルでは幅に応じて折り返る。
   - 本文開始位置：ヘッダー帯の直後、余白を挟んでH1が始まる
     （パンくずやサブヘッダーの類は確認できなかった）。
   - ページ全体の背景色：白（#ffffff）。

   確認できなかったこと（【要確認】、オーナーによる実測が必要）：
   - ヘッダーの正確な高さ（px）。本CSSでは56px（モバイル48px）を暫定値として使用
   - グラデーションの正確なカラーコード・角度。本CSSでは
     #639ae9 → #8b6fd8 の左→右グラデーションを近似値として使用
   - グローバルメニューの実際の項目・文字サイズ・余白（このページでは非表示のため）
   - モバイル用ハンバーガーメニューの有無・動作
   - フッターの正確なフォントサイズ・余白（px単位）
   ============================================================ */

:root {
  --utage-shell-gradient-start: #639ae9;
  --utage-shell-gradient-end: #8b6fd8;
  /* 2026-08-07：オーナー提供の実機スクリーンショットに合わせ、ヘッダー高を
     約21%増やした（56px→68px、モバイル48px→58px）。グラデーションの色は
     既存のUTAGEサイト共通ヘッダーのものを維持し、新しい色は発明していない。 */
  --utage-shell-header-height: 68px;
  --utage-shell-header-height-mobile: 58px;
  --utage-shell-footer-text: #666666;
  --utage-shell-footer-link: #4a7fd4;
  /* 2026-08-07：記事コンテナ（.utage-article-shell）とページ背景を視覚的に
     分離するため、ページ背景をわずかなグレーへ変更した（カードUI化や
     過剰なグレー背景ではなく、本物のUTAGE記事ページにある「白い記事枠＋
     やや沈んだ背景」の関係を再現するための最小限の変更）。 */
  --utage-shell-page-bg: #f4f5f7;
  --utage-shell-max-width: 1200px;
}

html,
body.utage-shell-page {
  background-color: var(--utage-shell-page-bg);
  margin: 0;
  /* 2026-08-06追加・同日再改訂：ヘッダー・パンくず・フッター（WordPress外枠）も
     記事本文と同じフォント指定にする（rules/shared-design-system.md3-1章）。
     記事本文（.utage-v15/.utage-article）は自分自身のfont-family指定を持つため
     ここでは上書きされない。プラットフォーム標準フォントを優先する順番
     （assets/shared-article.cssの--font-familyと同一）。 */
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, 'Noto Sans JP', sans-serif;
}

/* ========== ヘッダー（UTAGE会員サイト風・再現） ========== */
.utage-shell-header {
  display: flex;
  align-items: center;
  height: var(--utage-shell-header-height);
  padding: 0 20px;
  background: linear-gradient(90deg, var(--utage-shell-gradient-start) 0%, var(--utage-shell-gradient-end) 100%);
}

/* 注：この左→右のグラデーションはUTAGE会員サイト機能が生成する
   実際の外枠を再現するためのものであり、rules/design.mdの
   「青紫グラデーションを使用しない」という禁止は記事本文デザイン
   （このプロジェクトが新規に作るコンテンツ）に適用されるルールである。
   UTAGE自体の既存の外枠を模写するこのファイルには適用しない。 */

.utage-shell-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--utage-shell-max-width);
  margin: 0 auto;
}

.utage-shell-brand {
  min-width: 0;
  flex-shrink: 1;
  font-weight: bold;
  font-size: 19px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.utage-shell-brand:hover {
  opacity: 0.9;
}

/* グローバルメニュー（WordPress側のメニュー機能で管理する。
   基準ページでは実際の項目を確認できなかったため、
   このメニュー自体をヘッダーに表示するかどうかはオーナー確認後に決める。
   表示する場合の見た目は以下の想定値（要確認）。 */
.utage-shell-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.utage-shell-menu a {
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

.utage-shell-menu a:hover {
  opacity: 0.85;
}

/* モバイル用ハンバーガー切り替え（<input type="checkbox">＋<label>方式。
   <details>は非[open]時にブラウザ標準で強制非表示になり、
   デスクトップでCSSから戻せないため使わない） */
.utage-shell-nav-toggle-checkbox {
  display: none;
}

.utage-shell-nav-toggle-label {
  display: none;
  font-size: 22px;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  padding: 4px 8px;
}

@media (max-width: 768px) {
  .utage-shell-header {
    height: var(--utage-shell-header-height-mobile);
    padding: 0 16px;
  }

  .utage-shell-brand {
    max-width: 70%;
    font-size: 16px;
  }

  .utage-shell-nav-toggle-label {
    display: inline-block;
  }

  .utage-shell-menu {
    display: none;
    position: absolute;
    top: var(--utage-shell-header-height-mobile);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    background: var(--utage-shell-gradient-end);
    padding: 16px;
    z-index: 20;
  }

  .utage-shell-header {
    position: relative;
  }

  .utage-shell-nav-toggle-checkbox:checked ~ .utage-shell-header-inner .utage-shell-menu {
    display: flex;
  }
}

/* ========== 本文開始位置 ==========
   ヘッダー帯の直後、記事本文（.utage-article）が始まる前の余白。
   基準ページ自体にパンくずは確認できなかったが、独自ドメイン側だけ
   「島にならないための内部リンク」としてパンくずを追加する
   （下記.utage-shell-breadcrumb。2026-08-05追加）。 */
.utage-shell-content-spacer {
  height: 24px;
}

/* ========== パンくず（WordPress側のみ。個別記事・アーカイブで使用） ==========
   「使い方・設定 ＞ 記事名」の形式。「使い方・設定」はhome_url('/')
   （独自ドメインのトップ）へリンクする。「ホーム」「総合トップ」
   「独自ドメイン名」という表記は使わない。独自ドメインのトップページ
   自体（front-page.php）には表示しない。 */
.utage-shell-breadcrumb {
  max-width: var(--utage-shell-max-width);
  margin: 0 auto;
  padding: 0 20px 16px;
  font-size: 13px;
  color: var(--utage-shell-footer-text);
}

.utage-shell-breadcrumb a {
  color: var(--utage-shell-footer-text);
  text-decoration: none;
}

.utage-shell-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.utage-shell-breadcrumb-sep {
  margin: 0 6px;
}

.utage-shell-breadcrumb-current {
  color: var(--color-text);
}

/* ========== 本物のフッター（UTAGE会員サイト風・再現） ==========
   記事内の見た目用フッター（assets/shared-article.cssの.article-footer-box
   相当）とは別物。ページの最後、実際のUTAGE自動フッターの位置に置く。

   2026-08-05再改訂：記事数の増加に対応できるよう2段構造にした。
   1. .utage-shell-footer-nav … フッターナビゲーション（3グループ）。
      本文と横幅を揃えるため、ヘッダーの--utage-shell-max-width（1200px）
      ではなく、記事本文の最大幅（--content-max-width、shared-article.css
      で定義・880px）に合わせる。フッターが本文より目立たないようにする。
   2. .utage-shell-footer-bottom … 下段バー（サイト名＋総合トップへ戻る）。
      旧バージョンの.utage-shell-footer-inner相当だが、幅も
      --content-max-widthへ統一し、ナビゲーション部分と揃える。 */
.utage-shell-footer {
  background: var(--utage-shell-page-bg);
}

/* ---- 1. フッターナビゲーション（使い方・設定／主な機能／導入を検討している方） ---- */
.utage-shell-footer-nav {
  border-top: 1px solid #eeeeee;
  padding: 32px 20px;
}

.utage-shell-footer-nav-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: var(--content-max-width, 880px);
  margin: 0 auto;
}

.utage-shell-footer-group h3 {
  margin: 0 0 12px;
  padding-bottom: 6px;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
}

.utage-shell-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.utage-shell-footer-list li {
  margin: 0 0 8px;
}

.utage-shell-footer-list a {
  font-size: 13px;
  color: var(--utage-shell-footer-text);
  text-decoration: none;
}

.utage-shell-footer-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ---- 2. 下段バー（記事トップに戻る／ブランド名／総合トップへ戻る） ----
   2026-08-11改訂：3分割の最下部ナビ。左＝現在の記事最上部(#article-top)への
   純アンカー（JS不使用）、中央＝ブランド名、右＝ブランド総合トップ。 */
.utage-shell-footer-bottom {
  border-top: 1px solid #e6e8ec;
  padding: 18px 20px 22px;
}

.utage-shell-footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: var(--content-max-width, 880px);
  margin: 0 auto;
  font-size: 13px;
}

.utage-shell-footer-sitename {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  color: var(--utage-shell-footer-text);
  font-weight: 700;
}

.utage-shell-footer-backtop,
.utage-shell-footer-toplink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--utage-shell-footer-link);
  text-decoration: none;
  font-weight: 600;
}
.utage-shell-footer-backtop::before { content: "\2190"; } /* ← */
.utage-shell-footer-toplink::after { content: "\2192"; }  /* → */
.utage-shell-footer-backtop:hover,
.utage-shell-footer-toplink:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
  .utage-shell-footer-nav-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .utage-shell-footer-bottom-inner { font-size: 12.5px; gap: 8px 12px; }
  .utage-shell-footer-sitename { order: 3; flex-basis: 100%; text-align: center; }
}