/* ボディ */
.body_container {
  width: 95%;
  margin: 60px auto;
  max-width: 1440px;
}

/* セクションタイトル */
.section-title {
  background-color: #2196F3;
  color: white;
  padding: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 4rem 0;
}

/* QGIS・Tableauカード */
.custom-card {
  border-radius: 20px;
  border: 2px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.1s ease, border 0.1s ease;
}

/* ホバー時の枠線とシャドウの変化 */
.custom-card:hover {
  border: 8px solid #005bac;  /* 青い枠線 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.card-image {
  max-height: 180px;  /* 最大高さを設定 */
  overflow: hidden;
  position: relative;
}

.card-image img {
  width: 100%;
  max-height: 100%;  /* 高さの最大値を100%に設定 */
  object-fit: cover;  /* 画像が枠内で切り抜かれるように */
  object-position: center;  /* 画像の中心を基準に配置 */
}

/* .card-content を相対配置にして、矢印を絶対配置に */
.card-content {
  padding: 1rem;
  font-size: 0.95rem;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向の中央揃え */
  align-items: center; /* 水平方向の中央揃え */
  height: 100%;
  position: relative; /* 親要素を相対位置に */
}

.card-item {
  margin-left: 0 !important;
}

/* 矢印アイコンの位置を右下に */
.arrow-icon {
  position: absolute;
  right: 10px;  /* 右端から10px */
  bottom: 10px; /* 下端から10px */
}

/* テキストリンクの下線とカラーを変更 */
.card-content a {
  color: #333;  /* 通常時の文字色（黒） */
  font-weight: 300;  /* 文字を細くする */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid transparent;  /* 通常時の下線（透明） */
  transition: border-color 0.3s, color 0.3s;
}

/* ホバー時 */
/* .card-content a:hover {
  color: #005bac;
  border-bottom: 2px solid #005bac;
  text-decoration: none;
} */

.link-arrow {
  font-size: 1.2rem;
  margin-left: 8px;
}

/* 近日公開用カードスタイル */
.coming-soon {
  background-color: #f9f9f9;
  color: #888;
  text-align: left;
  padding: 1.2rem;
  border: 2px dashed #ccc;
}

.coming-soon .card-content p:first-child {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* PDF一覧のスタイル */
.pdf_container ul {
  padding-left: 0;
}

.pdf_container li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 1em;
}

.pdf_container li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: black;
}

/* PDFアイコン */
.pdf-icon {
  color: red;
  margin-left: 5px;
  vertical-align: middle;
}

.basic_container {
  margin-bottom: 4rem;
}

.basic_container ul {
  list-style-type: disc !important;
}


/* 無効（準備中）のPDFリンク */
/* .disabled {
  color: #aaa;
  pointer-events: none;
} */

/* デジタル庁風ホバー：カード枠線、下線、矢印色の変更 */
.custom-card {
  border: 1px solid #e0e0e0;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.custom-card:hover {
  border: 4px solid #005bac;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* テキストリンクの下線・カラー変化 */
.card-content a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, color 0.3s;
}

/* ホバー時：太め青下線 + 色強調 */
/* .custom-card:hover .card-content a {
  border-bottom: 2px solid #005bac;
  color: #005bac;
} */

/* 2枚横並び用：.multi-image が付いた card-image に対応 */
.card-image.multi-image {
  display: flex;
  justify-content: center;
  gap: 4px;  /* 画像間の隙間 */
  padding: 4px;
}

.card-image.multi-image img {
  max-width: 215px;
  height: auto;
  object-fit: cover;
}


/* SVG矢印のスタイル（.link-arrow span にSVGが入ってる想定） */
.link-arrow svg {
  width: 20px;
  height: 20px;
  margin-left: 8px;
  transition: stroke 0.3s;
  stroke: #ffffff;
}

/* ホバー時に矢印だけ青に変化 */
.custom-card:hover .arrow-icon svg {
  stroke: #005bac;
}

/* カードの高さを統一 */
.card_container .custom-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card_container .custom-card .card-image {
  flex-shrink: 0;
}

.card_container .custom-card .card-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 140px;  /* カードの最小高さを設定 */
}

.card_container .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央寄せ */
  gap: 45px;               /* カード間に隙間（任意） */
  margin-left: 0;
}


/* カード全体にリンク機能を持たせるため、リンクのように表示 */
.custom-card a {
  display: block;
  height: 100%;
}

h5 {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;  /* 下線を細くする */
  text-underline-offset: 2px;  /* 文字と下線の間に隙間を追加 */
  color: #000000;  /* 文字の色 */
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.5px;  /* 文字間の隙間を追加 */
}

.custom-card:hover h5 {
  text-decoration-color: #005bac;     /* 下線の色を青に変更 */
  text-decoration-thickness: 1.5px;   /* 下線を太くする */
  color: #005bac;                     /* 文字の色を青に変更 */
}

h6 {
  font-weight: 500;
}

/* Tableauカードだけ文字を上下中央にする */
.tableau-card .card-content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* PDFリスト：リストマークのズレ調整と文字色統一 */
.pdf_container ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-left: 1em;
  margin: 0;
}

/* 各リストアイテム内のリンクを黒にして全体クリック可能に */
.pdf_container li a {
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.6;
}

/* ホバー時のリンク装飾（任意で調整） */
.pdf_container li a:hover {
  text-decoration: underline;
  color: #005bac;
}

/* PDFアイコンの見た目統一 */
.pdf_container li a i.material-icons {
  color: red;
  margin-left: 5px;
  vertical-align: middle;
  font-size: 18px;
}

/* 無効リンク（準備中）のスタイル */
.pdf_container .disabled a {
  color: #aaa;
  pointer-events: none;
  text-decoration: none;
}

.pdf_container {
  margin-left: 8%;
}

.tableau_container {
  margin: 0 auto;
  max-width: 800px;
}

html {
  scroll-behavior: smooth;
}

.section {
  padding: 0;
}

/*・「この記事は、QGIS3.40で執筆しています。QGISの基本操作（レイヤの追加やスタイルの設定など）ができることを前提としています。」の箇所 */
.Msoimage001 {
  font-size: 15px;
  font-weight: 400;
  border: 1px solid #333;
  background: #f2f2f2;
  width: 60%;
}

/*QGIS_manual_03の※東京駅は中央線として属性が入力されていないため、このまま処理をすると東京駅が除外されてしまいます。 */
.Msoimage028 {
  font-size: 15px;
  font-weight: 400;
  border: 1px solid #333;
  background: #f2f2f2;
  width: 71%;
}

.MsoNormal {
  font-size: 15px;
  font-weight: 400;
}

.MsoListParagraph{
  font-weight: 400px;
}

.light {
  font-weight: 400 !important;
}

.ev-h1 {
  font-weight: bold !important;
}

h1 {
  font-size: 27px;
  font-weight: bold;
}

h2 {
  font-size: 22px;
  font-weight: bold;
}

/* 目次のスクロール */
@media (max-height: 800px) {
  .toc-container {
    height: 480px;
    max-height: 480px;
  }

  .toc-scrl {
    overflow-y: scroll;
    height: 450px;
  }
}

/* 目次のフォント */
.parent_chapter{
  font-size: 15.5px;
  
}

.child_chapter{
  font-size: 13px;
  
}