@charset "UTF-8";

/* =========================================================
   【0】リセット・全体設定
========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

/* =========================================================
   【0】全体設定・共通パーツ
========================================================= */
/* ページ内ジャンプを「スゥッ」と滑らかにする設定（全体適用） */
html {
  scroll-behavior: smooth;
}

/* 図書館ページ全体の背景を淡い赤系に */
body.library {
  background-color: #fbeaea; /* 淡い赤系（ピンク寄り） */
  color: #333;               /* 文字は落ち着いた濃いグレー */
}

/* 共通セクション */
.library section {
  margin: 40px 0;
  padding: 20px;
  background: #f8dcdc;
  border-radius: 8px;
}
.library h2 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  border-left: 4px solid #b22222;
  padding-left: 8px;
}
.library section a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
.library section a:hover {
  text-decoration: underline;
}

/* =========================================================
   【共通コンポーネント】（複数ページで使い回すパーツ）
========================================================= */

/* --- 1. ページ上部のイントロダクション（説明枠） --- */
.guidance-intro, .database-intro, .magazines-intro, .repository-intro {
  background-color: #fff; 
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border-left: 4px solid #b22222; 
}
.guidance-intro p, .database-intro p, .magazines-intro p, .repository-intro p {
  margin: 0 0 10px;
  line-height: 1.6;
}
.guidance-intro p:last-child, .database-intro p:last-child, .magazines-intro p:last-child, .repository-intro p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .guidance-intro, .database-intro, .magazines-intro, .repository-intro {
    padding: 15px;
  }
}

/* --- 2. 各コンテンツのセクションとブロック --- */
.guide-section, .database-section, .magazines-section, .repository-section {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  scroll-margin-top: 70px; 
}
/* ※利用案内だけ背景が白なので個別指定を残す */
.guide-section {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 40px;
}

.guide-block, .database-block, .magazines-block, .repository-block {
  margin-bottom: 35px;
}

/* --- 3. 共通の見出し類 --- */
.section-title {
  font-size: 1.5rem;
  color: #333;
  border-bottom: 3px solid #b22222; 
  padding-bottom: 10px;
  margin-top: 0;
  margin-bottom: 25px;
}
.block-title {
  font-size: 1.25rem;
  color: #b22222;
  border-left: 5px solid #b22222;
  padding-left: 10px;
  margin-bottom: 15px;
}
.sub-title {
  font-size: 1.0rem;
  color: #b22222;
  padding-left: 10px;
  margin-top: 15px;
}

/* --- 4. 赤い丸の箇条書きリスト --- */
.guide-list, .database-list, .magazines-list {
  list-style-type: none;
  padding: 0;
  margin: 15px 0 20px 0;
}
.guide-list li, .database-list li, .magazines-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 12px;
  line-height: 1.6;
  color: #333;
}
/* 最後の項目の下の余白をなくす */
.guide-list li:last-child, .database-list li:last-child, .magazines-list li:last-child {
  margin-bottom: 0;
}
/* CSSの疑似要素で「赤い丸」を作る */
.guide-list li::before, .database-list li::before, .magazines-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  background-color: #b22222;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(178, 34, 34, 0.3);
}
.database-block .database-list,
.magazines-block .magazines-list {
  padding-left: 1.5em;
}
/* --- 5. バナー画像リンク（OPAC・リポジトリ） --- */
.opac-link, .repository-link {
  text-align: center; 
  margin: 40px 0;     
}
.opac-link .banner-img, .repository-link .banner-img {
  max-width: 100%;    
  width: 400px;       
  height: auto;       
  border-radius: 8px; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
  transition: opacity 0.3s ease, transform 0.3s ease; 
}
.opac-link a:hover .banner-img, .repository-link a:hover .banner-img {
  opacity: 0.85;             
  transform: translateY(2px); 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

/* --- 6. 行データカード（開館時間・配架先など） --- */
.hours-card, .shelving-card {
  background: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(178, 34, 34, 0.05);
}
.hours-row, .shelving-row {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5e6e6;
}
.hours-row:last-child, .shelving-row:last-child {
  border-bottom: none; 
}
.day-label, .period-label {
  font-weight: bold;
  color: #b22222;
  background: #fff0f0;
  padding: 3px 12px;
  border-radius: 15px;
  font-size: 0.85rem;
}
@media (max-width: 768px) {
  .hours-container, .shelving-container {
    max-width: 100%; 
  }
  .hours-row, .shelving-row {
    padding: 15px 0; 
  }
}

/* 強調文字の共通化 */
.database-block strong, .magazines-block strong {
  color: #b22222;
  font-weight: bold;
}

/* =========================================================
   【1】トップページ専用（OPAC・お知らせ等）
========================================================= */
/* OPAC検索タブ */
.tabs {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap; 
  justify-content: space-between;
}
.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tab_item {
  flex: 1 1;
  text-align: center;
  padding: 10px 0;
  cursor: pointer;
  background: #eee;
  border: 1px solid #ccc;
  transition: background 0.3s, color 0.3s;
  font-size: 0.9rem;
  border-radius: 10px 10px 0px 0px;
}
.tab_item:hover {
  background: #ddd;
}
#tab1:checked + .tab_item, #tab2:checked + .tab_item, #tab3:checked + .tab_item,
#tab4:checked + .tab_item, #tab5:checked + .tab_item, #tab6:checked + .tab_item {
  background: #b22222;
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #8b0000;
}

/* OPACコンテンツ表示切り替え */
.tab_content {
  display: none;
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  background: #fff;
}
#tab1:checked ~ #tab1_content, #tab2:checked ~ #tab2_content, #tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content, #tab5:checked ~ #tab5_content, #tab6:checked ~ #tab6_content {
  display: block;
}

/* 検索フォーム */
.tab_content form {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: nowrap;
}
.tab_content input[type="text"] {
  flex: 1;              
  min-width: 0;          
  padding: 8px;
  font-size: 1rem;
}
.tab_content button {
  flex: 0 0 auto;         
  padding: 8px 16px;
  background: #b22222;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  white-space: nowrap;   
}
.tab_content button:hover {
  background: #8b0000;
}

/* 検索リンク群 */
.search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  margin-top: 10px;
}
.search-links a {
  color: #b22222;
  text-decoration: none;
  font-weight: bold;
}
.search-links a:hover {
  text-decoration: underline;
}

/* スマホ対応（OPAC検索） */
@media (max-width: 768px) {
  .tab_item {
    flex: 1 1 33%; 
    font-size: 0.8rem;
    padding: 8px 0;
    border-radius: 0;
  }
  .tab_content form {
    flex-wrap: wrap;     
  }
  .tab_content input[type="text"] {
    flex: 1 1 100%;      
  }
  .tab_content button {
    flex: 1 1 auto;      
    width: auto;         
    align-self: flex-start;
  }
  .search-links {
    justify-content: center;
    text-align: center;
  }
}

/* トップページ専用：ポータルリンクグリッド（カード型レイアウト） */
.portal-link-grid {
  display: grid;
  /* ↓ 魔法の1行：280px以上のカードを置けるだけ横に並べる！ */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

/* カード本体の基本スタイル */
.portal-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 2px solid #f8dcdc; /* 図書館テーマの淡い赤 */
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: #333 !important; /* aタグの文字色上書きを防ぐ */
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(178, 34, 34, 0.05); /* ほんのり赤い影 */
}

/* マウスを乗せた時のフワッと浮き上がるアクション */
.portal-card:hover {
  background: #fffafa;
  border-color: #b22222; /* 枠線を濃い赤に */
  transform: translateY(-4px); /* 少し上に浮かす */
  box-shadow: 0 8px 15px rgba(178, 34, 34, 0.15); /* 影を濃くする */
}

/* アイコン部分 */
.portal-card .card-icon {
  font-size: 2.5rem;
  margin-right: 15px;
  flex-shrink: 0;
}

/* カード内の見出し（h2） */
.portal-card .card-content h2 {
  font-size: 1.15rem;
  margin: 0 0 5px 0;
  border: none; /* 全体設定のH2の左線を消す */
  padding: 0;
  color: #b22222;
}

/* カード内の説明文（p） */
.portal-card .card-content p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

/* スマホ対応（余白を少し詰める） */
@media (max-width: 768px) {
  .portal-link-grid {
    grid-template-columns: 1fr; /* スマホは1列に強制 */
    gap: 15px;
  }
  .portal-card {
    padding: 15px;
  }
  .portal-card .card-icon {
    font-size: 2rem;
  }
}

/* =========================================================
   【2】利用案内ページ専用
========================================================= */
/* 切り替えタブ */
.guide-tabs {
  display: flex;
  margin-bottom: 30px;
  border-bottom: 3px solid #b22222; 
}
.tab-link {
  flex: 1; 
  text-align: center;
  padding: 12px 10px;
  background: #eee;
  color: #555;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px 8px 0 0; 
  margin-right: 4px; 
  transition: background 0.3s, color 0.3s;
}
.tab-link:last-child {
  margin-right: 0;
}
a.tab-link:hover {
  background: #ddd;
  color: #333;
}
.tab-link.active {
  background: #b22222;
  color: #fff;
  cursor: default; 
}
@media (max-width: 768px) {
  .tab-link {
    font-size: 0.85rem;
    padding: 10px 5px;
  }
}

/* パンフレット（PDF）リンク */
.leaflet-link {
  margin: 30px 0;
  text-align: center; 
}
.pdf-icon {
  color: #b22222; 
  margin-right: 12px; 
  flex-shrink: 0; 
}
.leaflet-link .text {
  font-size: 1rem;
  line-height: 1.4;
  text-align: left; 
}
.leaflet-link .filetype {
  font-size: 0.85rem;
  color: #666;
  font-weight: normal;
  margin-left: 4px;
}
@media (max-width: 768px) {
  .leaflet-link a {
    width: 100%; 
    padding: 12px 15px;
  }
  .leaflet-link .text {
    font-size: 0.95rem; 
  }
}

/* 目的別アンカーリスト */
.quick-anchor-box {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 25px 30px;
  margin: 40px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  border-top: 5px solid #b22222; 
}
.quick-anchor-box .anchor-title {
  font-size: 1.3rem;
  color: #333;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  border-left: none; 
  padding-left: 0;
}
.anchor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 15px; 
}
.library section .anchor-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  background-color: #f9f9f9; 
  padding: 14px 20px;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95rem;
  border: 1px solid #eee;
  transition: all 0.3s ease;
}
.anchor-list li a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #b22222; 
  border-bottom: 2px solid #b22222;
  transform: rotate(45deg); 
  transition: transform 0.3s;
}
.library section .anchor-list li a:hover {
  background-color: #fffafa;
  border-color: #b22222; 
  color: #b22222; 
  box-shadow: 0 2px 5px rgba(178, 34, 34, 0.1);
}
.anchor-list li a:hover::after {
  transform: rotate(45deg) translate(2px, 2px);
}
@media (max-width: 768px) {
  .quick-anchor-box {
    padding: 20px 15px;
  }
  .anchor-list {
    grid-template-columns: 1fr; 
    gap: 10px;
  }
  .anchor-list li a {
    padding: 12px 15px;
  }
}

/* コンテンツ各セクション・テーブル */
.table-caption {
  font-size: 1rem;
  color: #333;
  margin-top: 20px;
  margin-bottom: 10px;
}
.table-scroll {
  width: 100%;
  overflow-x: auto; 
  -webkit-overflow-scrolling: touch; 
  margin-bottom: 20px;
}

.limit-table th:nth-child(1) {
  width: 50%; /* 1列目（利用者区分）は全体の半分に */
}
.limit-table th:nth-child(2),
.limit-table th:nth-child(3) {
  width: 25%; /* 2列目（冊数）と3列目（期間）は25%ずつで均等に */
}
.limit-table td.user-type {
  font-weight: bold;
  background-color: #fcfcfc;
  text-align: left;
}
.limit-table tbody tr:hover td {
  background-color: #fffafa;
}
@media (max-width: 768px) {
  .guide-section {
    padding: 20px 15px;
  }
}

/* 時間の数字 */
.time-value {
  font-weight: 600;
  font-family: 'Verdana', sans-serif; 
  color: #333; /* 濃いグレーで読みやすく */
}

/* タイトル部分 */
.guide-list li .list-title {
  display: block; /* これを入れることで、後ろの文字が自動的に改行されます */
  font-weight: bold;
  color: #333;
  margin-bottom: 4px; /* 説明文との間に少しだけ隙間をあける */
}

/* 説明文部分 */
.guide-list li .list-text {
  display: block;
  font-size: 0.95rem; /* タイトルより少し文字を小さくしてメリハリをつける */
  color: #555; /* 色を少し薄くして読みやすく */
  line-height: 1.5;
}

/* 機能制限などの注記テキスト（区切り線付き） */
.guide-note-staff {
  font-size: 0.95rem;
  color: #b22222; /* 図書館カラーの赤で少し目立たせる */
  font-weight: bold;
  margin: 25px 0 10px 0; /* 上に少し広めの余白を取る */
  padding-top: 15px;
  border-top: 2px dashed #f5e6e6; /* 薄いピンクグレーの点線で優しく区切る */
}

/* 「こんなサービスも」アピールセクション（詳細版） */
.extra-services-section {
  background-color: #fff4f4; /* 薄いピンク背景 */
  padding: 40px 20px;
  margin: 50px 0;
  border-radius: 12px;
}

.extra-services-title {
  text-align: center;
  font-size: 1.4rem;
  color: #b22222;
  margin-top: 0;
  margin-bottom: 30px;
  font-weight: bold;
}

/* カードを縦に並べて、幅が広がりすぎないように中央寄せ */
.service-detail-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  max-width: 800px;
  margin: 0 auto; /* 中央揃え */
}

/* 白いカード本体 */
.service-detail-card {
  background-color: #ffffff;
  padding: 25px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(178, 34, 34, 0.05);
  border-top: 4px solid #f5c6c6; /* 上部に優しい赤のアクセントライン */
}

/* ヘッダー（アイコンとタイトル） */
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 2px dotted #eee;
  padding-bottom: 10px;
}
.card-icon {
  font-size: 1.8rem;
  margin-right: 10px;
}
.card-title {
  font-size: 1.25rem;
  color: #333;
  margin: 0;
}

/* カード内のテキストや小見出し */
.card-desc {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
.card-subtitle {
  font-size: 1.05rem;
  color: #b22222;
  border-left: 3px solid #b22222;
  padding-left: 8px;
  margin: 20px 0 10px 0;
}

/* 利用の流れ（番号付きリスト） */
.step-list {
  padding-left: 20px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.step-list li {
  margin-bottom: 8px;
}

/* チェックボックス風の枠（学生掲示板用） */
.check-box {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 6px;
  margin-top: 10px;
}
.check-box strong {
  color: #333;
  display: block;
  margin-bottom: 10px;
}

/* ボードゲームのコラム枠 */
.column-box {
  background-color: #f2f7fb; /* 知的な印象を与える薄いブルーグレー */
  border-radius: 8px;
  padding: 20px;
  margin-top: 25px;
}
.column-title {
  font-size: 1.05rem;
  color: #004080; /* 施設ページで使った濃い青でアクセント */
  margin-top: 0;
  margin-bottom: 10px;
}
.column-box p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

/* 文章内のPDFリンク */
.inline-pdf-link {
  display: inline-block;
  color: #b22222;
  font-weight: bold;
  text-decoration: none;
  background: #fff4f4;
  padding: 5px 12px;
  border-radius: 20px;
  margin-top: 10px;
  transition: all 0.3s;
}
.inline-pdf-link:hover {
  background: #b22222;
  color: #fff;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .service-detail-card {
    padding: 20px 15px;
  }
}

/* =========================================================
   【3】ガイダンス動画ページ専用
========================================================= */
.guidance-intro .update-date {
  text-align: right; 
  font-size: 0.9rem;
  color: #555;       
  font-weight: bold;
}
.video-title-wrap {
  display: flex;
  align-items: flex-start; 
  gap: 10px; 
  margin-top: 5px;
}
.play-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; 
  width: 28px;    
  height: 28px;
  background-color: #b22222; 
  border-radius: 50%; 
  transition: background-color 0.3s, transform 0.2s;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px; 
  border-color: transparent transparent transparent #ffffff; 
  margin-left: 3px; 
}
.video-card a:hover .play-icon {
  background-color: #8b0000;
  transform: scale(1.1); 
}
.full-chapter-link {
  margin-bottom: 25px;
  text-align: center; 
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}
.library section .video-card a {
  display: flex;
  flex-direction: column;
  background: #ffffff; 
  border: 2px solid transparent; 
  padding: 15px;
  border-radius: 6px;
  height: 100%;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.video-card a:hover {
  border-color: #b22222; 
  background: #fffafa;   
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.video-number {
  font-size: 0.85rem;
  color: #b22222; 
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}
.video-title {
  font-size: 0.95rem;
  margin: 0;
  font-weight: bold;
  line-height: 1.4;
  padding-top: 3px;
}
@media (max-width: 480px) {
  .video-grid {
    grid-template-columns: 1fr; 
  }
}

/* =========================================================
   【4】電子資料案内ページ専用
========================================================= */
.database-intro a {
  color: #333;
  font-weight: bold;
  text-decoration: none;
}

/* 番号付きリスト（1. 2. 3. ...） */
.number-list {
  list-style-type: decimal; /* 標準の数字を表示する */
  padding-left: 2.0em;      /* 数字を綺麗に表示するための左側の余白 */
  margin: 15px 0 20px 0;
}

.number-list li {
  margin-bottom: 12px;
  line-height: 1.6;
  color: #333;
}

/* 最後の項目の下の余白をなくす（database-listと同じ考え方） */
.number-list li:last-child {
  margin-bottom: 0;
}

/* =========================================================
   【5】雑誌新聞リストページ専用
========================================================= */
.shelving-container {
  max-width: 500px;
  margin: 20px 0;
}
.shelving-container .shelving-title{
  font-weight: bold;
}

/* 配架先 */
.shelving-value {
  font-weight: 600;
  font-family: 'Verdana', sans-serif; 
  color: #333; /* 濃いグレーで読みやすく */
  text-align: right;
}

/* =========================================================
   【6】紀要・博士論文・学術リポジトリ
========================================================= */

/* =========================================================
   【7】お知らせ
========================================================= */
.section-news-title {
  grid-area: title;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-news-text {
  grid-area: text;
  line-height: 1.6;
}