@charset "UTF-8";

/* ==========================================================================
   1. Variables (フォントと色の再定義)
   ========================================================================== */
:root {
  /* メインカラー */
  --brand-color: #21abe6;
  --brand-hover: #1a89b8;
  
  /* テキストカラー */
  --text-main: #2f3a42;   /* 真っ黒より少しだけネイビーに寄せると優しくなります */
  --text-sub: #68737d;    /* 補足用 */
  
  /* ★ 修正：見やすくて優しいフォント設定 ★ */
  /* Apple、Windows、Androidのそれぞれで「一番綺麗に見えるゴシック体」を優先順位順に並べています */
  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", sans-serif;
  
  /* 背景・境界線 */
  --bg-white: #ffffff;
  --bg-light-gray: #f8f9f9;
  --border-light: #edf0f2;
}

/* ==========================================================================
   2. Base Settings (基本の文字設定)
   ========================================================================== */
body {
  background-color: var(--bg-white);
  color: var(--text-main);
  font-family: var(--font-base); /* 優しいゴシック体を適用 */
  font-size: 15px;               /* 15px〜16pxが読みやすさの黄金比 */
  line-height: 1.7;              /* 行間を少し広め(1.7)にすると、目が疲れにくくなります */
  -webkit-font-smoothing: antialiased; /* 文字の縁を滑らかにする（Mac/iPhone用） */
  letter-spacing: 0.03em;        /* ほんの少しだけ字間を広げると、圧迫感が消えます */
}

/* 見出しも少しだけ太くして、安心感を出す */
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0;
  color: var(--text-main);
}

a {
  color: var(--brand-color);
  text-decoration: none; /* ★ 全てのリンクからデフォルトの下線を消す */
  transition: all 0.2s ease; /* 変化をなめらかにする */
}

a:hover {
  text-decoration: none; /* ★ ホバーしても下線は出さない（色や動きで魅せる） */
}

/* ==========================================================================
   3. Layout Container (共通の横幅)
   ========================================================================== */
.container {
  max-width: 1100px; /* 前のコードに基づき、バランスの良い1100pxを採用 */
  margin: 0 auto;
  padding: 0 20px;   /* スマホ時の左右余白 */
}

/* サイトのメイン領域の最小高さ（フッターを下に押し下げる） */
main {
  display: block;
  min-height: 60vh;
}

/* ==========================================================================
   4. Header (スリム・左寄せ・アイコン特化)
   ========================================================================== */
.header {
  height: auto !important; 
  min-height: 0 !important;
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding: 8px 0 !important; /* ★上下の隙間（好みに合わせて調整） */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ロゴを左端にピタッと寄せる */
.header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* ★左寄せ */
  max-width: 1100px; /* サイト全体の幅に合わせる */
  margin: 0 auto;
  padding: 0 20px;
}

.logo {
  line-height: 0;
  display: flex !important;
  align-items: center;
}

.logo a {
  display: flex;
  align-items: center;
  text-decoration: none !important;
}

/* ロゴ画像：高さを固定 */
.logo img {
  max-height: 32px !important; /* ★ここの数値がヘッダーの厚みになります */
  width: auto;
  display: block;
}

/* ★ロゴの横のテキストを「絶対に」消す設定★ */
.logo span, 
.logo-text, 
.header [aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
}

/* リンクをホバーしたとき */
.logo a:hover {
  opacity: 0.7;
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
  .header {
    padding: 6px 0 !important;
  }
  .logo img {
    max-height: 26px !important;
  }
}
/* ==========================================================================
   5. Hero Area (検索バー背景)
   ========================================================================== */
.hero {
  /* 背景画像の設定 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(/hc/theming_assets/01KK1TD884MV8JVTXE3JB4ZFMH);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  padding: 60px 0; /* 上下の余白 */
  text-align: center;
  color: var(--bg-white);
}

.hero-inner {
  max-width: 700px; /* 検索窓が広がりすぎないように制限 */
  margin: 0 auto;
}

/* ヒーロー内のキャッチコピー */
.hero-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 25px;
  text-shadow: none !important;
}

.hero-copy {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.1em;
}

/* ==========================================================================
   6. Search Bar (中央の大きな検索窓)
   ========================================================================== */
.search-full {
  position: relative;
  width: 100%;
}

.search-full input[type="search"] {
  width: 100%;
  height: 60px;
  padding: 0 30px 0 60px; /* 左側に虫眼鏡アイコンのスペース */
  border-radius: 30px;    /* 今っぽい丸い形 */
  border: none;
  font-size: 18px;
  font-family: var(--font-base);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* ふわっと浮き上がらせる */
  outline: none;
  transition: box-shadow 0.2s ease;
}

.search-full input[type="search"]:focus {
  box-shadow: 0 8px 25px rgba(33, 171, 230, 0.3); /* フォーカス時に青く光る */
}

/* 検索窓の中の虫眼鏡アイコン（疑似要素で作成） */
.search-full::before {
  content: "🔍"; /* 絵文字、またはアイコンフォント */
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  z-index: 1;
  opacity: 0.6;
}

/* スマホ表示の調整 */
@media screen and (max-width: 767px) {
  .header {
    height: 64px;
  }
  .logo-text {
    font-size: 16px;
  }
  .hero {
    padding: 40px 0;
  }
  .hero-title {
    font-size: 20px;
  }
  .search-full input[type="search"] {
    height: 50px;
    font-size: 16px;
  }

  /* 🛠 ここから追記：検索窓全体の横幅を絞って中央寄せにする */
  .search,
  .search-container,
  .search-full {
    width: 90% !important;        /* 左右に計10%の余白を作る */
    max-width: 340px !important;   /* スマホで広がりすぎないように制限 */
    margin-left: auto !important;  /* センター配置 */
    margin-right: auto !important; /* センター配置 */
  }
  .search form,
  .search-container form {
    width: 100% !important;
  }
  /* 🛠 ここまで */
}

/* ==========================================================================
   7. Category Grid (文字だけ反応・ポチ消し版)
   ========================================================================== */
.category-tree-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 40px auto;
  width: 100%;
}

/* タイル本体：カーソルをデフォルト（矢印）に戻す */
.category-tree-item {
  background-color: var(--bg-light-gray);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  cursor: default !important; /* ★ タイル上では指マークにしない */
}

/* タイル全体のホバー：背景をわずかに明るくする程度に留める */
.category-tree-item:hover {
  background-color: #fbfcfc; 
  border-color: #d1d5d7;
}

/* カテゴリタイトルの親（ここでバーの位置を制御） */
.category-tree-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  /* 以前の gap は消して、バーとの間隔はバー側の margin で調整します */
  position: relative; 
  padding-left: 15px; /* ★ バーを表示するための余白を確保 */
}

/* ★ カテゴリ名の横の青い縦バー ★ */
.category-tree-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 垂直中央 */
  width: 4px;                  /* バーの太さ */
  height: 18px;                /* バーの長さ（文字の高さに合わせる） */
  background-color: var(--brand-color); /* TVerブルー */
  border-radius: 2px;          /* 少し角を丸くして柔らかく */
}

/* カテゴリタイトルのリンク */
.category-tree-title a {
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer !important;
  transition: all 0.3s ease;
}

/* ホバー時に文字だけが右に動く（バーは動かさない） */
.category-tree-item:hover .category-tree-title a {
  color: var(--brand-color);
  transform: translateX(5px);
}

/* --- セクションリスト（中身）の修正 --- */
.category-tree-sub-list {
  list-style: none !important; /* ★ 黒ポチを消去 */
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}

.category-tree-sub-item {
  margin-bottom: 8px;
  padding-left: 0 !important; /* ポチ用の余白をリセット */
  list-style-type: none !important; /* 念押しでポチ消去 */
}

.category-tree-sub-item a {
  font-size: 14px;
  color: var(--text-sub);
  text-decoration: none;
  display: inline-block; /* blockから変更して、文字の長さ分だけ反応するように */
  padding: 2px 0;
  cursor: pointer !important; /* ★ 指マーク */
  transition: all 0.2s ease;
}

/* リストの文字ホバー時：青くなって少し動く */
.category-tree-sub-item a:hover {
  color: var(--brand-color);
  padding-left: 8px;
}

/* 「もっと見る」も文字だけ反応 */
.category-tree-see-all {
  margin-top: auto;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sub);
  cursor: pointer !important;
  transition: all 0.2s;
}

.category-tree-see-all:hover {
  color: var(--brand-color);
  text-decoration: underline;
}

/* スマホ表示：指マークの概念がないので、タップしやすい余白を維持 */
@media screen and (max-width: 767px) {
  .category-tree-sub-item a {
    display: block; /* スマホは誤操作防止のため、広めに反応させてOK */
    padding: 8px 0;
  }
}

/* ==========================================================================
   8. Section Title (見出しのデザイン：お知らせ・目的から探す 共通)
   ========================================================================== */
.section-ttl {
  text-align: center;
  margin: 60px 0 30px;
  font-size: 22px;
  font-weight: 700;
  position: relative;
  padding-bottom: 15px;
}

/* タイトルの下の青いライン */
.section-ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background-color: var(--brand-color);
  border-radius: 2px;
}

/* ==========================================================================
   9. Header Keywords (よく見られているトピックス - チップホバー版)
   ========================================================================== */
.header-keyword {
  max-width: 800px;
  margin: 30px auto 0;
  padding: 12px 20px;
  background-color: rgba(255, 255, 255, 0.1); /* 背景はより控えめに */
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px; /* 全体の間隔を少し詰める */
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1); /* ほんの少しだけ枠線 */
}

/* ラベルテキスト */
.keyword-ttl {
  font-size: 14px;
  font-weight: 700;
  color: var(--bg-white);
  margin-right: 15px;
  opacity: 0.9;
}

/* リスト */
.header-keyword ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 5px; /* キーワード同士の間隔 */
  align-items: center;
}

/* 区切り線（｜）を廃止して、独立した「チップ」に見えるようにします */
.header-keyword li:not(:last-child)::after {
  content: none !important; /* 区切り線は不要になるので消します */
}

/* ★ キーワードリンク：ホバーでふわっと色をつける ★ */
.header-keyword li a {
  color: var(--bg-white) !important;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: transparent;
  transition: all 0.3s ease; /* 少しゆっくり変化させると優しくなります */
  display: inline-block;
}

/* ★ ホバー時のアクション：濃すぎない「透ける」背景色 ★ */
.header-keyword li a:hover {
  /* 1. 半透明の白にする場合（画像に馴染みます） */
  background-color: rgba(255, 255, 255, 0.2) !important; 
  
  color: #fff !important;
  /* 影や移動は無しにして、色の変化だけで魅せます */
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
  .header-keyword {
    margin: 20px 15px 0;   /* 左右に少し余白を持たせて浮かす */
    padding: 12px 10px;    /* 内側の余白を少し詰める */
    border-radius: 12px;   /* 角丸を少し控えめにして面積を稼ぐ */
    flex-direction: column; /* 「よく見られている〜」と「リスト」を縦に並べる */
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.15); /* 視認性を少し上げる */
  }
  
  .keyword-ttl {
    width: 100%;
    text-align: center;    /* タイトルを中央に */
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 12px;       /* 少し小さくして上品に */
    opacity: 0.8;
  }

  .header-keyword ul {
    justify-content: center; /* ★ これでチップ全体を中央に寄せます */
    gap: 6px 8px;           /* 縦と横の隙間を個別に設定 (縦6px, 横8px) */
  }

  .header-keyword li a {
    font-size: 13px;        /* 文字を13pxに（スマホの標準） */
    padding: 5px 12px;      /* 押しやすさを保ちつつ、横幅を取りすぎないサイズ */
    background-color: rgba(255, 255, 255, 0.1); /* 最初から薄く色をつけて「ボタン感」を出す */
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}
/* ==========================================================================
   10. Mobile Adjustments (スマホ用一括調整)
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* カテゴリタイルのスマホ表示 */
  .category-tree-grid {
    grid-template-columns: 1fr !important; /* 1列に強制 */
    gap: 16px;
  }

  .category-tree-item {
    padding: 20px;
  }

  /* よく見られているトピックスのスマホ表示 */
  .header-keyword {
    margin: 20px 10px 0;
    padding: 15px;
  }
  
  .keyword-ttl {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
  }
}

/* ==========================================================================
   11. Service Notice Box (お知らせバナー)
   ========================================================================== */
.news-section {
  background-color: #ffffff !important; /* ここで白にする */
  padding: 30px 0 !important;           /* 上下の余白 */
  width: 100% !important;               /* 画面端まで白く */
  margin: 0 !important;
}

.service-notice-box {
  max-width: 800px;         /* 検索窓より少し広めに設定して安定感を出す */
  margin: 40px auto 20px;  /* 上に40px、下に20pxの余白 */
  background-color: #f0faff; /* 非常に淡いTVerブルー（清潔感） */
  border: 1px solid var(--brand-color); /* 枠線はTVerブルー */
  border-radius: 8px;
  transition: all 0.2s ease;
}

.service-notice-box:hover {
  background-color: #e1f5ff; /* ホバーでわずかに濃く */
  transform: translateY(-1px); /* ほんの少しだけ浮かす */
  box-shadow: 0 4px 12px rgba(33, 171, 230, 0.1);
}

.service-notice-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  text-decoration: none;
  color: var(--brand-color); /* 文字をTVerブルーに */
  font-weight: 700;
  gap: 12px;
}

.service-notice-link:hover {
  text-decoration: none; /* バナー全体がリンクなので下線は不要 */
}

/* 📢 絵文字やテキストの調整 */
.notice-text {
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

/* 右側の矢印アイコン（fontawesome用） */
.service-notice-link i {
  font-size: 14px;
  transition: transform 0.2s ease;
}

.service-notice-link:hover i {
  transform: translateX(4px); /* ホバー時に矢印を右にピョコッと動かす */
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
  .service-notice-box {
    margin: 30px 15px 15px;
    border-radius: 12px;
  }
  
  .service-notice-link {
    padding: 12px 15px;
  }
  
  .notice-text {
    font-size: 13px; /* スマホでは少し小さくして1行に収まりやすく */
  }
}

/* ==========================================================================
   12. News List (最終解決：絶対に細く・中央にする)
   ========================================================================== */

/* 親要素のリスト */
ul.whats-new-articles {
  max-width: 850px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--border-light) !important;
}

/* 各行の枠 */
li.whats-new-item {
  border-bottom: 1px solid var(--border-light) !important;
  position: relative !important;
  background-color: #fff !important;
  display: block !important;
  margin: 0 !important; /* 余計な隙間を排除 */
}

/* リンクエリア：ここを徹底的に絞る */
li.whats-new-item a {
  display: flex !important;
  align-items: center !important;    /* 縦方向の中央揃え */
  justify-content: flex-start !important;
  padding: 8px 15px !important;      /* 上下を8px（お好みで6px）に固定 */
  min-height: 0 !important;          /* Zendesk標準の最小高さをリセット */
  height: 44px !important;           /* ★高さを数値で固定するのが一番確実です */
  line-height: 1 !important;         /* 文字の上下余白をリセット */
  color: var(--text-main) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

/* ホバー時のアクション */
li.whats-new-item:hover {
  background-color: #f0faff !important;
}

li.whats-new-item:hover a {
  padding-left: 30px !important;     /* 右にスライド */
  color: var(--brand-color) !important;
}

/* 左端の青ライン演出 */
li.whats-new-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--brand-color);
  transform: scaleY(0);
  transition: transform 0.3s ease;
  z-index: 10;
}

li.whats-new-item:hover::before {
  transform: scaleY(1);
}

/* 日付：落ち着いたグレーに */
.item-date {
  font-size: 13px !important;
  color: #999999 !important; /* ★ 明るめのグレーに変更 */
  min-width: 100px !important;
  margin: 0 15px 0 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 記事タイトル：TVerブルーに変更 */
.item-title {
  flex: 1;
  font-size: 14.5px;
  font-weight: 500;
  color: #00A1E9 !important; /* ★ TVerブルーに変更 */
  line-height: 1.5 !important;
  text-align: left;
  
  /* 2行制限の維持 */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* ホバー時に色が変わりすぎないように調整（お好みで） */
li.whats-new-item:hover .item-title {
  color: #0081bb !important; /* ホバー時は少しだけ濃い青に */
  text-decoration: underline; /* リンクであることを強調 */
}

/* スマホ表示時の微調整 */
@media screen and (max-width: 767px) {
  
  /* リンクエリア：固定高さを解除して、中身の2行分をしっかり表示 */
  .whats-new-articles .whats-new-item a {
    height: auto !important;          /* ★ 固定高さをキャンセル */
    min-height: 50px !important;      /* ★ 指で押しやすい最低限の高さだけ確保 */
    padding: 12px 15px !important;    /* ★ 上下の余白で「ゆとり」を作る */
    align-items: flex-start !important; /* ★ 2行の時、日付とタイトルの「頭」を揃える */
  }

  /* 日付の調整：タイトルと高さを合わせる */
  .item-date {
    font-size: 11px !important;
    min-width: 75px !important;
    margin-top: 3px !important;       /* タイトルの1行目と中心が合うように微調整 */
    line-height: 1.5 !important;      /* タイトル側の行間に合わせる */
  }

  /* タイトルの調整 */
  .item-title {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    white-space: normal !important;   /* 改行を許可 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* 2行まで表示 */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   13. News List Footer (白抜き→グレー・ワイド楕円ボタン)
   ========================================================================== */

/* ボタンを囲むコンテナ：中央寄せ */
.whats-new-more {
  text-align: center !important;
  margin: 40px auto 0 !important; /* 少し離して安定感を出す */
  display: block !important;
  width: 100% !important;
}

/* 「もっと見る」ボタン本体 */
.whats-new-more a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* ★ 初期状態：白抜き（枠線あり） */
  background-color: #ffffff !important; 
  color: #666666 !important;
  border: 1px solid #dcdcdc !important; /* 薄いグレーの枠線 */
  
  /* ★ 形状：さらにワイドな楕円 */
  padding: 10px 64px !important;       /* 左右を 64px に広げてワイドに */
  border-radius: 50px !important;
  
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* ★ ホバー時：背景をグレーに変更 */
.whats-new-more a:hover {
  background-color: #f2f2f2 !important; /* 薄いグレー */
  border-color: #f2f2f2 !important;
  color: #333333 !important;
  text-decoration: none !important;
}

/* 中の <i> アイコンを非表示にして CSSで「＞」を付ける（確実な制御のため） */
.whats-new-more a i {
  display: none !important;
}

/* テキストの後に「＞」を追加 */
.whats-new-more a::after {
  content: "＞" !important;
  margin-left: 8px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}
/* ==========================================================================
   14. Extra Fix (トピックスのリンクの下線を消す)
   ========================================================================== */
.header-keyword li a {
  text-decoration: none !important;
  border-bottom: none !important; /* もし線が残っていたらこれで消えます */
}

.header-keyword li a:hover {
  color: var(--brand-color) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   13. Footer (最下部エリア)
   ========================================================================== */
.footer {
  background-color: #1f2b3e; /* ★ TVer公式サイトに近い深い紺色 */
  color: #ffffff;
  padding: 60px 0 30px;
  margin-top: 80px; /* 前のコンテンツとの間隔 */
}

/* フッター内のレイアウト */
.foot-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 60px; /* 列同士の間隔をゆったり取る */
}

/* 各メニューブロック（会社情報・サービス・お問い合わせ） */
.ft-menu-item {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
}

/* フッター内の見出し */
.ft-list-title, .ft-ttl {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* 控えめな区切り線 */
  position: relative;
}

/* お問い合わせ用（中央揃え・青ライン）の特殊スタイル */
.item-center .ft-ttl {
  text-align: center;
  border-bottom: none;
}

.item-center .ft-ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background-color: var(--brand-color); /* 青いアクセントライン */
}

/* リストのデザイン */
.foot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.foot-list li {
  margin-bottom: 12px;
}

.foot-list a {
  color: rgba(255, 255, 255, 0.7) !important; /* 少し透けさせて上品に */
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.foot-list a:hover {
  color: var(--brand-color) !important; /* ホバーでTVerブルーに */
  text-decoration: underline !important;
}

/* お問い合わせボタン（紺背景に映えるデザイン） */
.item-center .btn_ao_b {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-color);
  color: #fff !important;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  margin: 20px auto 0;
  text-decoration: none;
  transition: background-color 0.2s;
}

.item-center .btn_ao_b:hover {
  background-color: var(--brand-hover);
}

/* コピーライト */
.cmark {
  display: block;
  text-align: center;
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
  .foot-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
  }
  
  .ft-list-title::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   14. Article Page (記事詳細・本文の装飾)
   ========================================================================== */

/* 記事タイトルのエリア */
.article-header h1 {
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 25px;
  color: var(--text-main);
  font-weight: 700;
}

/* 記事本文のコンテナ */
.article-body {
  font-size: 16px;       /* 読みやすい黄金サイズ */
  line-height: 1.8;      /* 行間を広げて「詰まってる感」を解消 */
  color: #333;           /* 本文は少しだけ濃くして視認性アップ */
  letter-spacing: 0.03em;
}

/* ==========================================================================
   TVerオリジナル：記事本文の見出し（階層・サイズ完全最適化版）
   ========================================================================== */

/* 1. 【大見出し：デバイス名】しっかり大きく、窮屈さをなくす */
.article-body h2 {
  font-size: 21px !important;     /* 👈 20px から 21px にアップして主役感アップ */
  font-weight: 700 !important;
  color: #004098 !important;     /* 深みのあるディープブルー */
  
  background-color: #f0f7ff !important; 
  background: #f0f7ff !important;
  border: none !important;
  padding: 14px 20px !important;
  border-radius: 12px !important; 
  
  margin-top: 48px !important;    /* 上のコンテンツとの余白を少し広げて見やすく */
  margin-bottom: 24px !important;
}

/* 2. 【中見出し：手順のタイトル】リンクと間違われない濃いグレー ＋ 縦線 */
.article-body h3 {
  font-size: 18px !important;     /* 👈 見出し2と4の間に綺麗に収まる 18px */
  font-weight: 700 !important;
  color: #222222 !important;     /* よりクッキリしたチャコール */
  
  border-left: 4px solid #00A1E9 !important; /* TVerブルーの左縦線 */
  border-bottom: none !important;
  padding-left: 10px !important;
  
  margin-top: 36px !important;
  margin-bottom: 18px !important;
}

/* 3. 【小見出し：具体的な方法など】本文より確実に大きく、見出しらしく自立させる */
.article-body h4 {
  font-size: 16px !important;     /* 👈 本文（15px前後）より確実に大きく設定！ */
  font-weight: 700 !important;
  
  /* 👈 リンクと誤解されるお邪魔な「下線」を完全に廃止 */
  border-bottom: none !important; 
  background: none !important;
  
  color: #444444 !important;     /* 本文よりワントーン濃いグレーでメリハリを */
  padding-left: 0 !important;
  
  margin-top: 26px !important;
  margin-bottom: 12px !important;
}


/* 強調文字 */
.article-body strong, 
.article-body b {
  color: var(--text-main);
  background: linear-gradient(transparent 70%, #e1f5ff 70%); /* 薄い青のマーカー線 */
}

/* 画像の調整 */
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin: 20px 0;
}

/* --- 記事下のアンケート（投票）エリア --- */
.article-votes {
  margin-top: 60px;
  padding: 40px 20px;
  background-color: #f8f9fa; /* 背景は白でスッキリ */
  border-top: 1px solid var(--border-light); /* 上に細い線を入れて区切る */
  border-bottom: 1px solid var(--border-light); /* 下にも線を入れる */
  text-align: center;
}

/* 「この記事は役に立ちましたか？」のテキスト */
.article-votes-question {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 25px;
  color: var(--text-main); /* 文字色はメインカラーで落ち着かせる */
}

/* ボタンを包むエリア */
.article-votes-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* 「はい」「いいえ」ボタン本体 */
.article-vote {
  /* 基本は白背景に青枠 */
  border: 1px solid var(--brand-color) !important;
  background-color: #fff !important;
  color: var(--brand-color) !important;
  
  padding: 8px 35px !important; /* 横長にして押しやすく */
  border-radius: 4px !important;  /* 角丸を少し控えめにしてシャープに */
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: all 0.2s ease !important;
  
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ホバーした時に色が反転する */
.article-vote:hover {
  background-color: var(--brand-color) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(33, 171, 230, 0.2);
}

/* 投票済み・感謝メッセージの状態 */
#article-votes-label {
  font-size: 14px;
  color: var(--brand-color);
  font-weight: 700;
}

/* ==========================================================================
   15. Article Feedback Form (「いいえ」後のフォーム)
   ========================================================================== */
/* フォーム全体のコンテナ（グレーの箱を白く、角丸にする） */
.article-votes-item-submission,
[data-article-vote-down-form] {
  margin-top: 25px !important;
  padding: 24px !important;
  background-color: #f8f9fa !important; /* 薄いグレー/白 */
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  text-align: left !important;
  display: block !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

/* 「改善点をお聞かせください」のタイトル */
.article-votes-item-submission-title {
  display: block !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--text-main) !important;
  margin-bottom: 12px !important;
}

/* 入力エリア (textarea) をモダンに */
.article-votes-item-submission textarea {
  width: 100% !important;
  min-height: 100px !important;
  padding: 12px !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
  outline: none !important;
  appearance: none !important;
}

/* 入力中（クリックした時）の枠線 */
.article-votes-item-submission textarea:focus {
  border-color: var(--brand-color) !important;
  box-shadow: 0 0 0 3px rgba(33, 171, 230, 0.1) !important;
}

/* ボタンエリア（右寄せ） */
.article-votes-item-submission-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 15px !important;
  margin-top: 15px !important;
}

/* 送信ボタン (Submit) */
input[type="submit"].article-votes-item-submission-button,
.article-votes-item-submission-button {
  background-color: var(--brand-color) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: opacity 0.2s !important;
}

/* キャンセルリンク */
.article-votes-item-submission-cancel {
  color: var(--text-sub) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

.article-votes-item-submission-cancel:hover {
  text-decoration: underline !important;
  color: var(--text-main) !important;
}

/* ==========================================================================
   16. Custom Feedback Form (背景白・送信ボタン対応版)
   ========================================================================== */

/* フォーム全体を包む枠（背景を白、枠線を細く） */
.feedback-mini-form {
  margin-top: 25px;
  padding: 30px 20px;
  background-color: #f8f9fa !important; /* ★ 真っ白に修正 */
  border: 1px solid var(--border-light);
  border-radius: 12px;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

/* 選択肢ボタンの装飾 */
.feedback-btn {
  background-color: #fff !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-sub) !important;
  padding: 10px 18px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 5px; /* ボタン同士がくっつかないよう少し余白 */
}

/* ボタン選択時 */
.feedback-btn:hover,
.feedback-btn.is-active {
  background-color: #f0faff !important;
  border-color: var(--brand-color) !important;
  color: var(--brand-color) !important;
  font-weight: 700 !important;
}

/* ★ 送信ボタンの装飾 ★ */
.feedback-submit-btn {
  display: block;
  width: 200px;
  margin: 25px auto 0; /* 中央寄せ */
  background-color: var(--brand-color) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 30px !important; /* TVerらしい丸み */
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: opacity 0.2s;
}

.feedback-submit-btn:hover {
  opacity: 0.8;
}

/* 送信ボタンが無効（選択前）のときの見た目 */
.feedback-submit-btn:disabled {
  background-color: #ccc !important;
  cursor: not-allowed;
}

/* 自由記述の枠（デフォルトを大きく） */
.feedback-textarea {
  width: 100% !important;
  min-height: 140px !important; /* ★ 高さをしっかり確保 */
  padding: 15px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-light) !important;
  margin: 15px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  outline: none !important;
  resize: vertical !important; /* ユーザーが自分で広げることも可能に */
}

/* フィードバック送信ボタン（1行で表示） */
.feedback-submit-btn {
  display: block !important;
  width: 100% !important;     /* 横幅いっぱい、または適度な固定幅 */
  max-width: 320px !important; /* あまり広がりすぎないように制限 */
  margin: 10px auto 0 !important;
  white-space: nowrap !important; /* ★ 1行に強制 */
  background-color: var(--brand-color) !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 20px !important;
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  cursor: pointer;
  transition: opacity 0.2s;
}

.feedback-submit-btn:hover {
  opacity: 0.8;
}

/* スマホでの調整 */
@media screen and (max-width: 767px) {
  .feedback-textarea {
    min-height: 120px !important;
  }
  .feedback-submit-btn {
    width: 100% !important;
    max-width: none !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   17. Link Visibility (リンクの視認性向上)
   ========================================================================== */

/* --- 記事本文内のリンク --- */
.article-body a {
  color: var(--brand-color);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(33, 171, 230, 0.3); /* 最初から薄く下線を表示 */
  transition: all 0.2s ease;
  padding: 0 2px;
}

.article-body a:hover {
  color: var(--brand-hover);
  background-color: rgba(33, 171, 230, 0.05); /* ほんのり背景色をつける */
  border-bottom: 2px solid var(--brand-color);  /* ホバーで線を太くくっきり */
  text-decoration: none;
}

/* --- サイドバー（この記事セクションの記事） --- */
.sidebar-item a {
  position: relative;
  display: block;
  padding: 10px 12px;
  color: var(--text-sub);
  border-radius: 6px;
  transition: background-color 0.2s, color 0.2s;
}

.sidebar-item a:hover {
  background-color: #f0faff !important; /* TVerブルーの極薄塗りつぶし */
  color: var(--brand-color) !important;
  padding-left: 18px; /* ★ 少し右にスライドさせる動きで「ボタン感」を出す */
}

/* 現在表示中の記事のスタイル */
.sidebar-item.is-current a {
  background-color: #f0faff !important;
  color: var(--brand-color) !important;
  font-weight: 700;
  border-left: 4px solid var(--brand-color); /* 左側にアクセントバー */
  border-radius: 0 6px 6px 0;
}

/* --- パンくずリスト --- */
.breadcrumbs li a {
  color: var(--text-sub);
  transition: color 0.2s;
}

.breadcrumbs li a:hover {
  color: var(--brand-color);
  text-decoration: underline; /* パンくずは王道の下線が一番わかりやすい */
}

/* --- 関連記事 / 最近見た記事（フッター付近） --- */
.footer-extra-column li a {
  display: inline-block;
  padding: 5px 0;
  color: var(--brand-color);
  font-weight: 500;
  transition: transform 0.2s;
}

.footer-extra-column li a:hover {
  transform: translateX(5px); /* 右にシュッと動かす */
  text-decoration: underline;
}

/* ==========================================================================
   18. Category & Section List (記事一覧ページの装飾)
   ========================================================================== */

/* 記事リストのコンテナ */
.article-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
}

/* 各記事の項目 */
.article-list-item {
  border-bottom: 1px solid var(--border-light);
  transition: all 0.2s ease;
}

.article-list-item:first-child {
  border-top: 1px solid var(--border-light);
}

/* 記事タイトル（リンク） */
.article-list-item a {
  display: block;
  padding: 15px 10px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  position: relative;
  transition: all 0.3s ease;
}

/* ホバー時の挙動：お知らせリストと統一 */
.article-list-item a:hover {
  background-color: #fbfcfc;
  color: var(--brand-color);
  padding-left: 20px; /* 少し右にスライド */
}

/* ホバー時に左側に青い縦ラインを出す */
.article-list-item a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: var(--brand-color);
  transition: width 0.2s ease;
}

.article-list-item a:hover::before {
  width: 4px; /* ホバーした時だけ青い棒が出る */
}

/* 「もっと見る」リンクの装飾 */
.see-all-articles {
  display: inline-block;
  margin-top: 15px;
  color: var(--brand-color);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.see-all-articles:hover {
  text-decoration: underline;
}

/* ==========================================================================
   19. Article Page Layout (サイドメニューの2カラム化)
   ========================================================================== */

/* 画面全体のレイアウト：PCサイズで横並びにする */
.article-page-layout {
  display: flex;
  gap: 40px; /* メニューと本文の間のゆとり */
  margin-top: 30px;
  align-items: flex-start;
}

/* 左側：サイドバー（メニュー） */
.article-sidebar {
  flex: 0 0 280px; /* 幅を280pxで固定 */
  position: sticky;
  top: 20px; /* スクロールしても追いかけてくるように設定 */
}

/* 右側：記事本文エリア */
.article-main-content {
  flex: 1; /* 残りの幅をすべて使う */
  min-width: 0; /* 文字のはみ出し防止 */
}

/* サイドバー内のタイトル装飾（統一感アップ） */
.sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 4px solid var(--brand-color);
}

.sidebar-list {
  list-style: none !important;
  padding: 0 !important;
  margin-bottom: 40px;
}

/* メニュー項目（リンク） */
.sidebar-item a {
  display: block;
  padding: 10px 12px;
  color: var(--text-sub);
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
  line-height: 1.4;
  transition: all 0.2s ease;
}

/* ホバー時と現在表示中の記事 */
.sidebar-item a:hover,
.sidebar-item.is-current a {
  background-color: #f0faff !important;
  color: var(--brand-color) !important;
  font-weight: 700;
}

/* 「カテゴリ一覧」セクションの隙間調整 */
.mt-40 {
  margin-top: 40px !important;
}

/* --- スマホ表示の時は縦並びに戻す --- */
@media screen and (max-width: 991px) {
  /* 1. 全体の並び順を「逆転」させる */
  .article-page-layout {
    display: flex !important;
    flex-direction: column-reverse !important; /* ★ これで上下が入れ替わります */
    gap: 0 !important;
  }

  /* 2. 記事本文エリア（これを上に持ってくる） */
  .article-main-content {
    width: 100% !important;
    margin-bottom: 50px; /* 本文が終わった後の余白 */
  }

  /* 3. サイドバー（メニュー：これを下に持ってくる） */
  .article-sidebar {
    width: 100% !important;
    border-top: 1px solid var(--border-light); /* 本文との境目に線を引く */
    padding-top: 30px;
    margin-top: 20px;
  }

  /* 4. スマホでは「検索窓」の下の余白を少し詰める */
  .sub-nav {
    margin: 20px 0 10px 0 !important;
  }
}

/* ==========================================================================
   20. Article Sub-Nav (検索バーの配置・余白最適化)
   ========================================================================== */

/* 1. パンくずリストを非表示 */
.sub-nav .breadcrumbs {
  display: none !important;
}

/* 2. サブナビ全体の配置：ヘッダーとの間に余白を作り、右に寄せる */
.sub-nav {
  display: flex !important;
  justify-content: flex-end !important; /* 右端に寄せる */
  margin: 30px 0 20px 0 !important;     /* 上に30pxの余白、下に20px */
  width: 100% !important;
  padding: 0 !important;
}

/* 3. 検索コンテナ：横幅をしっかり確保 */
.sub-nav .search-container {
  flex: 0 0 350px !important; /* 横幅 350px（お好みで調整してください） */
  max-width: 100% !important;
}

/* 4. 検索入力欄（input）の微調整 */
.sub-nav .search input[type="search"] {
  height: 42px !important;     /* 高さを出して押しやすく */
  border: 1px solid var(--border-light) !important;
  border-radius: 30px !important;
  padding: 0 20px 0 45px !important; /* 左のアイコン用スペース */
  font-size: 14px !important;
  background-color: #fff !important; /* 清潔感のある白 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important; /* ほんの少し影をつけて浮かせる */
  transition: all 0.3s ease !important;
}

/* フォーカス時（クリックした時） */
.sub-nav .search input[type="search"]:focus {
  border-color: var(--brand-color) !important;
  box-shadow: 0 4px 12px rgba(33, 171, 230, 0.15) !important;
  outline: none !important;
}

/* 検索窓の中の虫眼鏡アイコンの位置調整（必要であれば） */
.sub-nav .search::before {
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--text-sub) !important;
}

/* スマホ表示：中央寄せに切り替え */
@media screen and (max-width: 767px) {
  .sub-nav {
    justify-content: center !important;
    margin: 20px 0 !important;
    padding: 0 15px !important;
  }
  .sub-nav .search-container {
    flex: 1 !important;
  }
}

/* ==========================================================================
   21. Article Meta (更新日の色・ポチ消去)
   ========================================================================== */

/* リスト全体のスタイルリセット */
.article-meta ul.meta-group {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 25px 0 !important; /* 下に余白を作って本文と離す */
  display: flex !important;
  align-items: center;
}

/* 更新日のテキストデザイン */
.article-meta .meta-data {
  list-style-type: none !important;
  display: inline-block !important;
  
  /* 色：主張しすぎない上品なブルーグレー */
  color: #8899a6 !important; 
  
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* 強引に入り込む「・」や「リストマーカー」を完全に消去 */
.article-meta .meta-group li::before,
.article-meta .meta-group li + li::before,
.article-meta .meta-data::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

/* 「更新日:」という文字だけ少しだけ濃くして読みやすくする場合 */
.article-meta .meta-data {
  display: flex;
  gap: 4px;
}
/* ==========================================================================
   22. Article Footer Extras (関連記事・履歴の横並び)
   ========================================================================== */

/* 1. 全体を横並びにするコンテナ */
.article-footer-extras {
  display: flex;
  gap: 30px; /* 左右のコラムの間の余白 */
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--border-light); /* 区切り線 */
}

/* 2. 各カラム（関連記事 / 最近見た記事） */
.footer-extra-column {
  flex: 1; /* 均等に50%ずつ広がる */
  min-width: 0;
}

/* 3. 各コラムの見出し */
.footer-extra-column h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 15px;
}

/* 4. リストの装飾（ポチを消す） */
.footer-extra-column ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-extra-column li {
  list-style-type: none !important;
  border-bottom: 1px solid #f0f0f0;
}

.footer-extra-column li:last-child {
  border-bottom: none;
}

/* 5. 記事タイトルのリンク */
.footer-extra-column li a {
  display: block;
  padding: 10px 0;
  font-size: 14px;
  color: var(--brand-color); /* TVerブルー */
  text-decoration: none;
  transition: all 0.2s ease;
}

/* 6. ホバー時のアクション：少し右に動かす */
.footer-extra-column li a:hover {
  color: var(--brand-hover);
  padding-left: 8px; /* シュッと右に動く */
  text-decoration: underline;
}

/* 7. 強固に残る「・」を徹底排除 */
.footer-extra-column li::before {
  content: none !important;
  display: none !important;
}

/* --- スマホ表示：1カラム（縦並び）に切り替え --- */
@media screen and (max-width: 767px) {
  .article-footer-extras {
    flex-direction: column;
    gap: 40px;
  }
}

/* ==========================================================================
   23. Category Page Layout (2カラム・サイドメニュー化)
   ========================================================================== */

/* 1. 全体を横並びにする親コンテナ */
.category-page-layout {
  display: flex !important;
  gap: 40px !important;
  margin-top: 30px;
  align-items: flex-start;
}

/* 2. 左側サイドバー（メニュー） */
.category-sidebar {
  flex: 0 0 280px !important; /* 幅を280pxで固定 */
  position: sticky;
  top: 20px;
}

/* 3. 右側メインコンテンツ */
.category-main-content {
  flex: 1 !important; /* 残りの幅をすべて使う */
  min-width: 0;
}

/* 4. メニュー内の現在地の装飾 (is-active) */
.sidebar-item.is-active > a.category-link {
  background-color: #f0faff !important;
  color: var(--brand-color) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--brand-color);
  border-radius: 0 6px 6px 0;
}

/* 現在選択中のカテゴリ内にあるセクションリスト (サブメニュー) */
.sidebar-sub-list {
  list-style: none !important;
  padding: 5px 0 10px 25px !important; /* 少し右にずらす */
  margin: 0 !important;
}

.sidebar-sub-list li a {
  display: block;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text-sub);
  text-decoration: none;
}

.sidebar-sub-list li a:hover {
  color: var(--brand-color);
  text-decoration: underline;
}

/* --- スマホ表示：本文を上に、メニューを下に逆転 --- */
@media screen and (max-width: 991px) {
  .category-page-layout {
    flex-direction: column-reverse !important;
    gap: 0 !important;
  }
  .category-sidebar, .category-main-content {
    width: 100% !important;
    flex: none !important;
  }
  .category-sidebar {
    margin-top: 50px;
    border-top: 1px solid var(--border-light);
    padding-top: 30px;
  }
}

/* ==========================================================================
   24. Section & Article List Style (右側コンテンツの装飾)
   ========================================================================== */

/* セクションごとのグループ */
.section-group {
  margin-bottom: 50px;
}

/* セクションの見出しバー（TVerブルーの棒付き） */
.section-title-bar {
  font-size: 18px;
  font-weight: 700;
  padding-left: 15px;
  border-left: 5px solid var(--brand-color);
  margin-bottom: 20px;
}

.section-title-bar a {
  color: var(--text-main);
  text-decoration: none;
}

/* 記事リスト（黒ポチを消して、ホバーで青くする） */
.article-flat-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.article-flat-item {
  border-bottom: 1px solid #f0f0f0;
}

.article-flat-link {
  display: block;
  padding: 15px 10px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 15px;
  transition: all 0.2s;
}

.article-flat-link:hover {
  background-color: #fbfcfc;
  color: var(--brand-color);
  padding-left: 20px;
}

/* 「すべて見る」リンク */
.see-all-wrapper {
  margin-top: 15px;
  text-align: right;
}

.see-all-link {
  color: var(--brand-color);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
}

/* ==========================================================================
   25. Section Page Layout (セクションページの2カラム・サイドメニュー化)
   ========================================================================== */

/* 1. 全体を横並びにする親コンテナ */
.section-page-layout {
  display: flex !important;
  gap: 40px !important;
  margin-top: 30px;
  align-items: flex-start;
}

/* 2. 左側サイドバー（メニュー） */
.section-sidebar {
  flex: 0 0 280px !important; /* 幅を280pxで固定 */
  position: sticky;
  top: 20px;
}

/* 3. 右側メインコンテンツ */
.section-main-content {
  flex: 1 !important; /* 残りの幅をすべて使う */
  min-width: 0;
}

/* 4. メニュー内の「現在のセクション」ハイライト */
.sidebar-item.is-current a {
  background-color: #f0faff !important;
  color: var(--brand-color) !important;
  font-weight: 700 !important;
  border-left: 4px solid var(--brand-color);
  border-radius: 0 6px 6px 0;
}

/* --- スマホ表示：本文を上に、メニューを下に逆転 --- */
@media screen and (max-width: 991px) {
  .section-page-layout {
    flex-direction: column-reverse !important;
    gap: 0 !important;
  }
  .section-sidebar, .section-main-content {
    width: 100% !important;
    flex: none !important;
  }
  .section-sidebar {
    margin-top: 50px;
    border-top: 1px solid var(--border-light);
    padding-top: 30px;
  }
}

/* ==========================================================================
   26. Search Results Layout (検索結果ページのレイアウト)
   ========================================================================== */

/* 1. 全体を横並びにする親コンテナ */
.search-results {
  display: flex !important;
  gap: 40px !important;
  margin-top: 30px;
  align-items: flex-start;
}

/* 2. 左側：サイドバー（標準のフィルタエリア） */
.search-results-sidebar {
  flex: 0 0 280px !important;
  position: sticky;
  top: 20px;
}

/* 3. 右側：メインコンテンツ */
.search-results-column {
  flex: 1 !important;
  min-width: 0;
}

/* 4. 「続きを読む」ボタンの装飾 (search-results-more) */
.search-results-more {
  display: inline-flex !important; /* 中央揃えしやすくするためflexに変更 */
  align-items: center !important;
  margin-top: 15px !important;
  padding: 8px 24px !important;
  background-color: rgba(0, 161, 233, 0.1) !important; /* TVerブルー(0.1) */
  color: #00A1E9 !important;                          /* TVerブルー */
  border-radius: 30px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.search-results-more:hover {
  background-color: #00A1E9 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ★ 擬似要素で「＞」を追加 */
.search-results-more::after {
  content: " ＞" !important;
  font-size: 11px !important;
  margin-left: 6px !important;
  font-weight: bold !important;
  /* ホバー時に文字色が白に変わる際、ここも連動するようにinheritにする */
  color: inherit !important; 
}

/* --- スマホ表示：逆転レイアウト --- */
@media screen and (max-width: 991px) {
  .search-results {
    flex-direction: column-reverse !important;
    gap: 0 !important;
  }
  .search-results-sidebar, 
  .search-results-column {
    width: 100% !important;
    flex: none !important;
  }
  .search-results-sidebar {
    margin-top: 40px;
    border-top: 1px solid var(--border-light);
    padding-top: 30px;
  }
}

/* ==========================================================================
   27. Search Result Item (検索結果のリスト装飾)
   ========================================================================== */

/* フィルタの見出し */
.sidenav-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  margin-bottom: 12px !important;
  padding-left: 12px !important;
  border-left: 4px solid var(--brand-color) !important;
}

/* フィルタの項目 */
.sidenav-item {
  display: block !important;
  padding: 10px 12px !important;
  color: var(--text-sub) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
}

.sidenav-item:hover,
.sidenav-item.current {
  background-color: #f0faff !important;
  color: var(--brand-color) !important;
  font-weight: 700 !important;
}

/* 検索結果のリスト項目 */
.search-result-list-item {
  padding: 30px 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  list-style: none !important;
}

/* タイトルの青い「・」や黒ポチが出ないようにする */
.search-result-list-item::before {
  content: none !important;
}

.search-results-list {
  padding: 0 !important;
}

/* ==========================================================================
   28. Search Sidebar Mobile Toggle Clean (不要なアイコンの消去)
   ========================================================================== */

/* 1. フィルターエリア内のトグルボタン（×ボタンやハンバーガー）を非表示にする */
.collapsible-sidebar-toggle,
.collapsible-sidebar-toggle-icon,
.x-icon,
.chevron-icon {
  display: none !important;
}

/* 2. ボタンを消したことによって、枠線や背景が残る場合もリセット */
.collapsible-sidebar {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 3. 「フィルターを表示」的なボタンがもし他にあればそれも隠す */
.search-results-sidebar button[aria-expanded] {
  display: none !important;
}

/* 4. サイドバー内の各セクションの余白を調整（ボタンを消した分を詰める） */
.filters-in-section {
  margin-bottom: 30px !important;
}

/* ==========================================================================
   29. Search Sidebar Clean (不要なボタンとポチの消去)
   ========================================================================= */

/* 1. 「他のカテゴリを表示」などのグレーの四角いボタンを消去 */
.see-all-filters,
.search-results-sidebar button {
  display: none !important;
}

/* 2. メニューリンクの横にある「・」を徹底的に消去 */
.multibrand-filter-list,
.multibrand-filter-list li,
.multibrand-filter-list li::before,
.sidenav-item::before {
  list-style: none !important;
  content: none !important;
  display: block !important; /* ポチを消してブロック要素として整列 */
}

/* 3. 親要素のリスト自体の余白もリセット */
.multibrand-filter-list {
  padding: 0 !important;
  margin: 0 !important;
}

/* 4. リンク（sidenav-item）自体のスタイルを再調整（ポチが消えた分スッキリ） */
.sidenav-item {
  position: relative !important;
  padding: 10px 15px !important;
  border-radius: 6px !important;
  margin-bottom: 2px !important;
}

/* 5. 数字（件数）の横の「・」や余計な記号も隠す（もしあれば） */
.doc-count {
  font-size: 12px !important;
  color: #8899a6 !important;
  margin-left: 5px !important;
}

/* ==========================================================================
   30. Search Result Body & Layout (本文の3行制限とボタン配置)
   ========================================================================== */

/* 1. 記事タイトルのサイズ調整 */
.search-result-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

/* 2. 本文を3行で省略表示にする（クランプ機能） */
.search-results-description {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important; /* ★ 3行に制限 */
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  color: var(--text-sub) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 15px !important;
}

/* 3. 「続きを読む」ボタンを右下に配置するための親要素調整 */
.search-result-list-item article {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 4. ボタンを右寄せにする */
.search-results-more {
  align-self: flex-end !important; /* ★ 右下に寄せる */
  margin-top: 5px !important;
  padding: 8px 20px !important;
}

/* --- パンくずリスト（カテゴリ ＞ セクション）の調整 --- */

/* ==========================================================================
   Search Results Breadcrumbs (左揃え維持・丸ぽち削除・＞を綺麗に復活)
   ========================================================================== */

/* 1. 外枠と全体の左揃え */
.search-result-list-item ul.meta-group {
  padding: 0 !important;
  margin: 0 0 8px 0 !important; 
  list-style: none !important;
}

ol.search-result-breadcrumbs {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

/* 2. 元々の「◦」や「＞」を一度すべて完全にリセット */
ol.search-result-breadcrumbs li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

ol.search-result-breadcrumbs li::before {
  content: none !important;
  display: none !important;
}

/* 3. ★ 2番目以降の階層の前にだけ「 ＞ 」を新しく挿入する */
ol.search-result-breadcrumbs li + li::before {
  content: "＞" !important;
  display: inline-block !important;
  color: #cccccc !important;   /* 矢印は少し薄めのグレーに */
  font-size: 11px !important;   /* 少し小さめにして上品に */
  margin: 0 8px !important;    /* ★「＞」の左右に程よい隙間を空ける */
}

/* 4. 各階層のテキストリンクの調整 */
ol.search-result-breadcrumbs a {
  display: inline-block !important;
  color: #999999 !important; 
  font-size: 13px !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   31. Link Type Styling (遷移リンクと目次リンクの使い分け)
   ========================================================================== */

/* 1. ページ内リンクの基本設定 */
.article-body a[href^="#"] {
  display: inline-block !important;
  color: #444 !important; /* 文字色は読みやすく少し濃いめに */
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 2px 4px !important;
  transition: all 0.2s ease !important;
}

/* 2. 標準の記号「●」：色を薄く、サイズを最小限に */
.article-body a[href^="#"]::before {
  content: "●" !important;
  font-size: 6px !important;    /* ★ 8px → 6px に縮小 */
  color: #d1d1d1 !important;   /* ★ 明るいグレーに変更 */
  margin-right: 12px !important; /* 文字との間隔を少し広げてスッキリ */
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;         /* 中心を微調整 */
}

/* 3. 箇条書き(li)の中にある時は、CSS側の「●」を消す（重複防止） */
.article-body li a[href^="#"]::before {
  display: none !important;
}

/* 4. ホバー時：文字が青くなり、背景がふわっと色づく */
.article-body a[href^="#"]:hover {
  color: var(--brand-color) !important;
  background-color: rgba(0, 161, 233, 0.05) !important;
  border-radius: 4px !important;
  padding-left: 8px !important; /* ほんの少し右に動く */
}
/* ==========================================================================
   32. Pagination Style (ページネーションのボタン化)
   ========================================================================== */

/* 1. 外側の枠：中央寄せ */
.pagination-wrapper {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin: 30px 0 !important; /* 上下の余白も少しスリムに */
}

/* 2. 親リスト：横並び */
.pagination {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 8px !important; /* ボタン同士の間隔を少し詰める */
  border: none !important;
}

/* 3. 各項目(li) */
.pagination li {
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

/* 4. 数字のページ番号を非表示 */
.pagination-page {
  display: none !important;
}

/* 5. ボタン本体 (aタグ)：サイズをコンパクトに凝縮 */
.pagination li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* サイズ：高さを50px→36pxへ、幅をスリムに */
  min-width: 40px !important; 
  height: 36px !important;    /* ★ここを小さくしました */
  padding: 0 15px !important; /* ★横の余白もスリムに */
  
  /* 枠線と角丸：線も少し細く(1.2px) */
  border: 1.2px solid #00a1e9 !important;
  border-radius: 6px !important; /* ★角丸もサイズに合わせて調整 */
  background-color: #ffffff !important;
  
  /* 文字：18px→14pxへ */
  color: #00a1e9 !important;
  font-size: 14px !important;  /* ★文字も小さく上品に */
  font-weight: 700 !important; /* 太さは維持して視認性を確保 */
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

/* ホバー時 */
.pagination li a:hover {
  background-color: #f0faff !important; /* 触れた時にほんのり青く */
  border-color: #0081bb !important;
}

/* 不要な要素の徹底排除 */
.pagination li::before, .pagination li::after { content: none !important; }

/* ==========================================================================
   33.虫眼鏡アイコン位置修正
   ========================================================================== */

/* 検索窓と虫眼鏡を横並びにする */
.search-container {
  display: flex !important;
  align-items: center !important; /* 上下の中央を揃える */
  position: relative !important;
}

/* 虫眼鏡アイコンの位置調整 */
.search-icon {
  margin-right: -25px !important; /* 入力バーの内側に少し重ねる */
  z-index: 1 !important;          /* バーより上に表示 */
  position: relative !important;
  left: 10px !important;         /* 左側の余白調整 */
}

/* 入力バー自体の余白調整 */
.search-container form.search {
  flex: 1 !important;
  display: flex !important;
}

.search-container input[type="search"] {
  padding-left: 35px !important; /* 虫眼鏡と被らないように左側に余白を作る */
  width: 100% !important;
}

/* ==========================================================================
   Hero Section (デザインチーム修正案の反映)
   ========================================================================== */

/* 背景グラデーション：左が濃く、右が明るく */
.hero {
  /* 画像を元に色を抽出しました。
     左側（濃）：ロイヤルブルー (#004D99 → #0056B3)
     右側（明）：鮮やかなシアン・ターコイズ (#00A1E9 → #00E0F0)
  */
background: linear-gradient(to right, #0066cc 0%, #00E0F0 100%) !important;
  padding: 60px 20px !important;
}

.hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin-bottom: 30px !important;
}

/* 検索バーのカスタマイズ */
.search-wrapper {
  position: relative;
  max-width: 700px;
  margin: 0 auto 50px;
}

.search-wrapper .search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  z-index: 1;
}

.search-wrapper input[type="search"] {
  border-radius: 30px !important;
  height: 54px !important;
  padding-left: 50px !important;
  border: none !important;
  font-size: 16px !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* --- よく見られているトピックス：背景の半透明ボックス（スクショ完全再現） --- */
.popular-topics {
  /* スクショの透明感のある、綺麗なすりガラスの水色を再現 */
  background-color: rgba(255, 255, 255, 0.23) !important; 
  background: rgba(255, 255, 255, 0.23) !important;
  
  backdrop-filter: blur(8px) !important; /* 背景を少しぼかす */
  
  /* 周りの極細の白い枠線 */
  border: 1px solid rgba(255, 255, 255, 0.5) !important; 
  border-radius: 24px !important;
  
  padding: 30px 40px !important;
  margin: 40px auto !important;
  max-width: 1000px !important;
  box-shadow: none !important;
}

/* よく見られているトピックス：見出しテキスト（スクショの白文字） */
.topics-title {
  color: #ffffff !important; /* 👈 スクショ通りの白文字に */
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 25px !important;
}

/* --- グリッド配置 --- */
.topics-grid {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important; /* PCでは1列に並べる */
}

/* --- 個別のボタン：グラデーション --- */
.topic-item {
  /* 上が少し濃い、下が鮮やかな青のグラデーション */
  background: linear-gradient(180deg, #0274b3 0%, #00A1E9 100%) !important;
  flex: 1 !important;
  min-width: 120px !important;
  height: 120px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.topic-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
  opacity: 0.9 !important;
}

/* --- アイコン画像 --- */
.topic-icon-img {
  width: 42px !important;
  height: auto !important;
  margin-bottom: 12px !important;
}

/* --- ボタン内の文字 --- */
.topic-item span {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

/* --- スマホ対応：2列や3列に折り返す --- */
@media screen and (max-width: 767px) {
  .popular-topics {
    padding: 20px 15px !important;
    margin: 20px 15px !important;
  }
  .topics-grid {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .topic-item {
    flex: none !important;
    width: calc(33.33% - 7px) !important; /* 3列にする場合 */
    height: 100px !important;
  }
  .topic-icon-img {
    width: 35px !important;
  }
}


/* ==========================================================================
   Category Tree Grid (最新デザイン：ワイド形状 ＆ クリーン版)
   ========================================================================== */

/* 1. 親要素：タイルの土台（横幅を広げ、左右の余白を最適化） */
.category-tree-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;            /* タイル間の隙間を少し詰め、横幅を確保 */
  max-width: 1240px !important;    /* ワイドな画面に対応 */
  margin: 30px auto !important;
  padding: 0 10px !important;
}

/* 2. 各タイル：横長（平べったい）＆ アクション抑制 */
.category-tree-item {
  width: calc((100% - 32px) / 3) !important; 
  min-height: 180px !important;    /* 高さを抑えてスマートに */
  background-color: #ffffff !important;
  border-radius: 8px !important;   /* 少しシャープな角丸 */
  padding: 24px !important;        /* 棒線がないので左右均等な余白に */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.3s ease !important; /* transform（動き）は削除 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid transparent !important;
}

/* ホバー時は動かさず、影だけ強調 */
.category-tree-item:hover {
  transform: none !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 3. タイトル：青い棒線を削除し、文字を強調 */
.category-tree-title {
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;      /* 装飾がない分、少し太めに */
  margin-bottom: 16px !important;
  color: #333 !important;
  padding-left: 0 !important;       /* 棒線用の余白をリセット */
  position: static !important;
}

/* 青い棒線を完全に削除 */
.category-tree-title::before,
.category-tree-title::after {
  content: none !important;
  display: none !important;
}

/* 4. サブリスト（中身のリンク）：洗練されたホバー演出 */
.category-tree-sub-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 15px 0 !important;
  flex-grow: 1 !important;
}

.category-tree-sub-item a {
  color: #00A1E9 !important;        /* リンクであることを示すためブルーを維持 */
  font-size: 14px !important;
  text-decoration: none !important;
  display: block !important;
  padding: 6px 10px !important;
  margin-left: -10px !important;    /* ホバー時の背景用マージン調整 */
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

/* ホバー：薄い青の背景 ＋ 矢印出現 */
.category-tree-sub-item a:hover {
  background-color: rgba(0, 161, 233, 0.08) !important;
  padding-left: 20px !important;
  color: #0081bb !important;
}

.category-tree-sub-item a:hover::before {
  content: "›" !important;
  position: absolute !important;
  left: 8px !important;
  font-weight: bold !important;
  font-size: 16px !important;
  top: 50% !important;
  transform: translateY(-55%) !important;
}

/* 5. 「もっと見る」リンク：セレクタを強くして色を固定 */
.category-tree-item a.category-tree-see-all {
  display: inline-block !important;
  margin-top: auto !important;
  margin-left: auto !important; /* align-selfの代わりにこれで右寄せを確実にする */
  
  /* 形状と余白 */
  padding: 8px 24px !important;
  border-radius: 30px !important; 
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;

  /* ★ 色の設定：rgbaではなく16進数で指定 */
  background-color: #e6f6fd !important; /* 薄いTVerブルー */
  color: #00A1E9 !important;           /* 文字：絶対TVerブルー */
}

/* ホバー時もセレクタを強くして上書き */
.category-tree-item a.category-tree-see-all:hover {
  background-color: #00A1E9 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 161, 233, 0.2) !important;
}

/* 記号「＞」も色を継承させる */
.category-tree-item a.category-tree-see-all::after {
  content: " ＞" !important;
  font-size: 11px !important;
  margin-left: 4px !important;
  color: inherit !important; /* 親（ボタン）の文字色を強制継承 */
}

/* --------------------------------------------------------------------------
   スマホ・タブレット対応
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .category-tree-item {
    width: calc((100% - 16px) / 2) !important;
  }
}

@media (max-width: 767px) {
  .category-tree-grid {
    display: block !important;
    padding: 0 !important;
    margin: 20px 0 !important;
  }
  .category-tree-item {
    width: 90% !important;
    margin: 0 auto 16px !important;
    min-height: auto !important;
  }
}

/* ==========================================================================
  検索結果ページのメイン検索バー
   ========================================================================== */

/* 検索結果ページのメイン検索バー */
.search-results-main-search {
  margin-bottom: 40px !important;
}

/* 検索窓内の配置調整 */
.search-results-main-search .search-container {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
}

/* 虫眼鏡アイコンをバーの左側に重ねる */
.search-results-main-search .search-icon {
  position: absolute !important;
  left: 15px !important;
  z-index: 2 !important;
  color: #999 !important;
}

.search-results-main-search input[type="search"] {
  width: 100% !important;
  height: 50px !important;
  border-radius: 25px !important;
  border: 1px solid #ddd !important;
  padding-left: 45px !important; /* アイコンの分だけ左を空ける */
  font-size: 16px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

/* ==========================================================================
   Search Results Card Style (余白維持・カードデザイン)
   ========================================================================== */

/* 1. ページ全体の背景色は「body」に指定して、左右の余白を確保 */
body {
  background-color: #f9f9f9 !important;
}

/* 2. コンテンツ容器：幅を制限して中央に寄せる（これまでの設定に戻す） */
.container {
  background-color: transparent !important; /* ここは透明でOK */
  max-width: 1160px !important;            /* 標準的な幅に制限 */
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* 3. 検索結果エリアの調整 */
.search-results {
  background-color: transparent !important;
  padding: 40px 0 !important; /* 左右のpaddingを0にしてcontainerに任せる */
}

/* 4. 各記事の「白いカード」：ここはそのまま */
.search-result-list-item {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 30px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  list-style: none !important;
}

/* 5. 左サイドバー（タイプ別など）の背景調整 */
.search-results-sidebar {
  background: transparent !important;
}

/* サイドバー内の現在の選択項目（水色）をデザインに合わせる */
.sidenav-item.current {
  background-color: #e0f4ff !important;
  border-radius: 8px !important;
  color: #00A1E9 !important;
}

/* ==========================================================================
   Search Results (余白微調整・スリム版)
   ========================================================================== */

/* 1. ページ全体の開始位置（パンくずの下）の余白を詰める */
.search-results {
  padding-top: 20px !important;    /* 40px → 20px に半減 */
  padding-bottom: 20px !important;
}

/* 2. 検索バーとAI回答の間の余白 */
.search-results-main-search {
  margin-bottom: 20px !important;  /* 40px → 20px */
}


/* 4. 検索結果の見出し（"ログイン"の検索結果...）の余白 */
.search-results-subheading {
  margin-top: 10px !important;
  margin-bottom: 15px !important;  /* 下のカードとの距離を詰める */
}

/* 5. 白いカード同士の隙間 */
.search-result-list-item {
  margin-bottom: 16px !important;  /* 20px → 16px */
  padding: 24px !important;        /* カード内の余白も 30px → 24px にして少しスリムに */
}

/* 6. カード内のタイトルと説明文の間の余白 */
.search-result-title {
  margin-bottom: 4px !important;
}

/* 7. 左サイドバーの項目間隔（必要であれば） */
.sidenav-item {
  padding: 8px 12px !important;    /* 上下余白を少し詰める */
}

/* ==========================================================================
   Category Tree Grid (ワイド形状 & 洗練されたアクション)
   ========================================================================== */

/* 1. 全体幅を広げて左右の余白を抑える */
.category-tree-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;            /* 隙間を少し詰めてタイル幅を確保 */
  max-width: 1240px !important;    /* 1050pxから拡大して横幅を広く */
  margin: 30px auto !important;
  padding: 0 10px !important;      /* 左右の余白を最小限に */
}

/* 2. 各タイル：横長（平べったい）デザインへの変更 */
.category-tree-item {
  width: calc((100% - 32px) / 3) !important; 
  min-height: 180px !important;    /* 高さを抑えて平べったく */
  background-color: #ffffff !important;
  border-radius: 8px !important;
  padding: 20px 24px !important;   /* 上下パディングを詰める */
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow 0.3s ease !important; /* transform（動き）を削除 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* タイル自体のホバー：動かさず、影と枠線だけ強調 */
.category-tree-item:hover {
  transform: none !important;      /* ひょこっと動くアクションを無効化 */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid rgba(0, 161, 233, 0.3) !important;
}

/* 3. セクションリンク（中の文字）の新ホバー演出 */
.category-tree-sub-item {
  margin-bottom: 4px !important;
}

.category-tree-sub-item a {
  color: #00A1E9 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  display: block !important;
  padding: 6px 10px !important;    /* クリックエリアを広げる */
  margin-left: -10px !important;   /* padding分を左に戻す */
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

/* ホバーアクション：背景が薄い青になり、少し右にずれる */
.category-tree-sub-item a:hover {
  background-color: rgba(0, 161, 233, 0.08) !important;
  padding-left: 20px !important;   /* 右にスライド */
  color: #0081bb !important;
}

/* ホバー時に左端に小さなドットまたは矢印を表示（隠し味） */
.category-tree-sub-item a:hover::before {
  content: "›" !important;
  position: absolute !important;
  left: 8px !important;
  font-weight: bold !important;
  font-size: 16px !important;
  line-height: 1 !important;
  top: 50% !important;
  transform: translateY(-55%) !important;
}

/* 4. もっと見る：右下固定 */
.category-tree-see-all {
  text-align: right !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  color: #999 !important;
  font-size: 12px !important;
}

/* ==========================================================================
   Category Tree Grid (スマホ・SD版レスポンシブ対応)
   ========================================================================== */

/* 画面幅が 1024px 以下の時（タブレットや小さめのPC） */
@media screen and (max-width: 1024px) {
  .category-tree-item {
    /* 2列にする */
    width: calc((100% - 16px) / 2) !important;
  }
}

/* 画面幅が 767px 以下の時（スマホ・SD版） */
@media screen and (max-width: 767px) {
  .category-tree-grid {
    display: block !important; /* Flexを解除して縦並びを確実に */
    padding: 0 !important;      /* 親のpaddingはリセット */
    margin: 20px 0 !important;
  }

  .category-tree-item {
    /* ★ widthを90%前後にし、左右marginをautoにすることで確実に「浮いた感じ」にする */
    width: 90% !important; 
    max-width: 400px !important; /* 広がりすぎ防止 */
    margin: 0 auto 16px !important; /* 左右中央寄せ ＋ 下のタイルとの隙間 */
    
    min-height: auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    
    /* 影を少しはっきりさせて、グレー背景との境界を出す */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  }
}
　

/* ==========================================================================
   Global Contact Section (薄いグレーで馴染ませる最終版)
   ========================================================================== */

.global-contact-section {
  width: 100% !important;
  padding: 40px 0 !important; /* 上下の余白 */
  background-color: #ffffff !important; 
}

.search-contact-box-dark {
  /* 背景を薄いグレーに変更（サイトの背景色と調和） */
  background-color: #f8f9fa !important; 
  padding: 60px 20px !important;
  border-radius: 16px !important;
  text-align: center !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  max-width: 1160px !important;
  box-sizing: border-box !important;
  /* 影も薄くして馴染ませる */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.search-contact-text-dark {
  color: #333333 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* 青い横棒（デザインのアクセント） */
.blue-underline {
  display: block !important;
  width: 50px !important;
  height: 3px !important;
  background-color: #00A1E9 !important;
  margin: 15px auto 25px !important;
}

/* お問い合わせボタン */
.search-contact-button-dark {
  background-color: #4da6e0 !important; /* 画像の明るい水色を維持 */
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 280px !important;
  padding: 15px 0 !important;
  border-radius: 30px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.search-contact-button-dark:hover {
  background-color: #3d8fc4 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 161, 233, 0.2) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Search Results Wide Layout (サイドバー撤去にともなうワイド化)
   ========================================================================== */

/* 検索結果エリアを1カラム（縦並び）に変更 */
.search-results {
  display: block !important;
  width: 100% !important;
  max-width: 1160px !important; /* お問い合わせBOXなどの横幅と統一 */
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* 検索結果のメインコンテンツを横いっぱいに広げる */
.search-results-column,
#main-content {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}


/* ==========================================================================
   Home Hero Section Fix (インナー拡張・白隙間撃退版)
   ========================================================================== */

/* 1. 外側の余白ではなく、グラデーションエリアの「中枠」の縦幅を広げる */
.hero-inner, 
.home-banner-inner,
.hero > div { /* 青グラデーションの直下にある内側の箱をターゲットに */
  padding-top: 40px !important;    /* ★これで文字の上が自然に空きます */
  padding-bottom: 50px !important; /* ★トピックスの下にも程よい余白 */
}

/* 2. もし上の指定で動かない場合のために、タイトル単体の上マージンを安全に調整 */
.hero h1,
.hero-title,
.home-banner h1 {
  margin-top: 30px !important;    /* ヘッダーロゴとのディスタンスを確保 */
  margin-bottom: 25px !important; /* 検索窓との隙間 */
  padding-top: 0 !important;
}

/* 3. 【謎のグレーライン撃退】境界線の線を徹底的に消す */
.hero, 
section.hero-section,
.home-banner {
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0 !important; /* 先ほど外側に隙間を作ってしまった原因をゼロにリセット */
}

/* 4. グレーの線の正体が「ヘッダーの下線」だった場合のための予防 */
.header, 
header.header {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Responsive Text Break (スマホのみ特定の位置で改行)
   ========================================================================== */

/* 普段（PC）は改行を無効化して1行で表示する */
.sp-only {
  display: none !important;
}

/* 📱 スマホ（画面幅767px以下）のときだけ改行をONにする */
@media screen and (max-width: 767px) {
  .sp-only {
    display: block !important;
    content: "" !important;
    margin-top: 4px !important; /* 改行した後の行間が詰まりすぎないように微調整 */
  }
  
  /* スマホのときに文字が中央揃えになっていることを確実にする */
  .hero h1,
  .hero-title,
  .home-banner h1 {
    text-align: center !important;
  }
}

/* ==========================================================================
   AI Answer Section & Empty Hide Fix (AI回答エリアの設定 ＆ 空箱完全消去)
   ========================================================================== */

/* 1. 通常時（AI回答があるとき）のカードデザイン */
/* ※0件の時に巻き添えで消えないように、直下に要素がある場合のみ枠線を出すように補強します */
.ai-answer-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 30px !important;
}

/* ★超重要：AIの中身（Zendeskが生成する実際のコンテナなど）が存在するときだけ、白い箱（背景や枠線）を作る */
.ai-answer-section > div,
.ai-answer-section:has(*) {
  background-color: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* 2. 【最強の非表示命令】検索結果が0件（.no-search-results-textが存在する）のページでは、AIの箱ごと地球上から消し去る */
.search-results:not(:has(.search-results-list)) .ai-answer-section,
.search-results:has(.no-search-results-text) .ai-answer-section {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !impoωrtant;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ==========================================================================
   TVerオリジナル：トピックスボタン最終確定版（スクショ再現・パキッと白ボタン）
   ========================================================================== */

/* 1. 通常時：スクショ通りの、パキッと明るい馴染む白（不透明度95%） */
.popular-topics .topic-item {
  background-color: rgba(255, 255, 255, 0.95) !important; 
  background: rgba(255, 255, 255, 0.95) !important;
  
  border: none !important;                              /* 枠線はなし */
  border-radius: 16px !important;                       /* ボタン用の綺麗な角丸 */
  box-shadow: none !important;                          /* 通常時はフラット */
  transition: all 0.25s ease !important;                 /* ホバー時の変化を滑らかに */
  
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

/* ボタン内のテキスト（span）：デザインチーム純正アイコンに合わせた濃いめのグレー（または濃い青） */
.popular-topics .topic-item span {
  color: #4a4a4a !important; /* 👈 スクショの文字色に合わせた落ち着いたカラー */
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* アイコン画像：デザインチーム純正の綺麗な画像をそのまま100%発色 */
.popular-topics .topic-item .topic-icon-img {
  filter: none !important;      /* フィルターは一切なし */
  opacity: 1 !important;
  max-height: 44px !important;  /* サイズ感を固定 */
  margin-bottom: 12px !important;
}


/* 2. マウスホバー時：触ったボタンだけが完全な白（100%）に光って少し浮き上がる演出 */
.popular-topics .topic-item:hover {
  background-color: #ffffff !important; 
  background: #ffffff !important;
  transform: translateY(-3px) !important;                
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05) !important; 
}

/* ホバー時、文字色はそのままキープ */
.popular-topics .topic-item:hover span {
  color: #4a4a4a !important;
}

/* ==========================================================================
   TVerオリジナル：【完全確定版】本文内リンク文字色バグ強制修正
   ========================================================================== */

/* 📄 どんなクラスが当たっていても、本文内のリンク（こちら 等）の文字を絶対に青くする */
.article-body a,
.article-body a *,
.article-body [href^="#"],
.article-body [href^="#"] * {
  color: #00A1E9 !important;               /* 👈 文字そのものを絶対にTVerブルーにする */
  text-decoration: none !important;         /* 変なところについた下線をリセット */
}

/* 📄 下線は、リンクの文字（こちら）の下だけにピシッと綺麗に引き直す */
.article-body a,
.article-body [href^="#"] {
  border-bottom: 1px solid #00A1E9 !important; /* 👈 下線もTVerブルーで統一 */
  font-weight: 700 !important;
  display: inline !important;                /* 文章の途中で変な改行をさせない */
}


/* 🖱 マウスを乗せた（ホバーした）時の色の変化 */
.article-body a:hover,
.article-body a:hover *,
.article-body [href^="#"]:hover,
.article-body [href^="#"]:hover * {
  color: #004098 !important;                 /* ホバー時は上品なディープブルーに */
}

.article-body a:hover,
.article-body [href^="#"]:hover {
  border-bottom: 2px solid #004098 !important; /* 下線を少し太くクッキリ */
  background-color: rgba(0, 161, 233, 0.05) !important;
}

/* ==========================================================================
   TVerオリジナル：記事本文内の「注意事項」囲みボックス
   ========================================================================== */
.article-note-box {
  background-color: #fcf8f2 !important; /* 👈 警告・注意を促す、ごく薄いマイルドなベージュ・黄み */
  background: #fcf8f2 !important;
  
  border: 1px solid #f0e0cf !important; /* 枠線も少しだけ濃いベージュ */
  border-left: 5px solid #ff9900 !important; /* 👈 左端に「注意」を惹きつけるオレンジ黄色のアクセント線 */
  
  border-radius: 6px !important;
  padding: 20px !important;              /* 枠の内側の余白 */
  margin: 25px 0 !important;             /* 枠の外側（上下）の余白 */
}

/* 枠の中にある見出し（注意事項）の文字を少し締める */
.article-note-box h4,
.article-note-box .note-title {
  color: #c67a00 !important;            /* 注意事項の文字色を少し濃いオレンジ茶色に */
  margin-top: 0 !important;              /* 枠の上の余白をゼロにして綺麗に収める */
  margin-bottom: 12px !important;
  font-size: 17px !important;
}

/* ==========================================================================
   TVerオリジナル：大カテゴリ先頭アイコン完全配置CSS
   ========================================================================== */
.category-tree-title {
  display: flex !important;
  align-items: center !important; /* アイコンと文字の上下中央を揃える */
  gap: 10px !important;           /* アイコンと文字の間の隙間 */
}

.category-icon {
  width: 28px !important;         /* アイコンの表示サイズ */
  height: 28px !important;
  object-fit: contain !important; /* 縦横比を綺麗に保つ */
  flex-shrink: 0 !important;      /* スマホ等で画面が狭くなっても潰さない */
}

/* リンクテキストがアイコンの横に綺麗に並ぶように調整 */
.category-tree-title a {
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   TVerオリジナル：大カテゴリ先頭アイコン（通常時チャコール ➔ ホバー時TVerブルー）
   ========================================================================== */

/* 1. 通常時（マウスが乗っていないとき）：文字と同じ上品なチャコールグレー */
.category-icon {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  
  /* 👈 元の真っ黒なアイコンを、文字（#333）と同じチャコールグレーに優しく減色 */
  filter: brightness(0.2) !important; 
  
  /* 色の変化をフワッと滑らかにするアニメーション設定 */
  transition: filter 0.25s ease !important; 
}

/* 2. ホバー時（カード全体、またはタイトルにマウスが乗ったとき）：鮮やかなTVerブルーに変身！ */
.category-tree-item:hover .category-icon {
  /* 👈 マウスが乗ると、ブラウザが自動計算して鮮やかなTVerブルー（#00A1E9）に染め上げます！ */
  filter: invert(53%) sepia(86%) saturate(2073%) hue-rotate(173deg) brightness(97%) contrast(101%) !important;
}


/* 🔗 元々入れていた横並びを綺麗に保つ設定（こちらもそのまま残します） */
.category-tree-title {
  display: flex !important;
  align-items: center !important; 
  gap: 10px !important;           
}

.category-tree-title a {
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   TVerオリジナル：お知らせ限定日付表示（見た目の装飾のみ）
   ========================================================================== */
.custom-notice-date-box {
  gap: 20px !important;
  margin-top: 12px !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important; 
  border-bottom: 1px dotted #e0e0e0 !important;
}

.notice-date-item {
  font-size: 13px !important;
  color: #666666 !important;
}

.date-label {
  font-weight: 700 !important;
  color: #444444 !important;
  margin-right: 4px !important;
}