@charset "utf-8";

/*---------------------------------------------------------------
学術ライブラリ（academic）
---------------------------------------------------------------*/

/*---------------------------------------------------------------
タイトル上絞り込み要素
---------------------------------------------------------------*/
.academic_badges {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.academic_badge {
  background-color: #fff;
  border: solid 1px #ff9f00;
  padding: 5px 12px 3px;
  border-radius: 100vmax;
  color: #ff9f00;
  font-size: 12px;
  font-weight: 600;
}

.academic_badge:hover {
  background-color: #ff9f00;
  color: #fff;
}

/*---------------------------------------------------------------
記事タイトル
---------------------------------------------------------------*/
.academic_content h1 {
  background-color: #003595;
  color: #fff;
  padding: 2rem;
  font-size: 2.8rem;
  line-height: 3.6rem;
  margin-bottom: 0.5rem;
}

/*---------------------------------------------------------------
最終更新日
---------------------------------------------------------------*/
.academic_modified {
  font-size: 14px;
  text-align: right;
}

/*---------------------------------------------------------------
論文情報
---------------------------------------------------------------*/
.academic_meta {
  margin: 2rem 0 3rem;
}

.academic_meta_key {
  font-size: 1.4rem;
  font-weight: 600;
  border-bottom: solid 1px #003595;
  margin-bottom: 0.5rem;
}

.academic_meta_val {
  margin-bottom: 1rem;
  font-size: 14px;
  line-height: 1.8;
}

/*---------------------------------------------------------------
原典リンク
---------------------------------------------------------------*/
.academic_links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
  margin-bottom: 3rem;
}

.academic_link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #003595;
  border: solid 2px #003595;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.0;
  width: calc((100% - 20px) / 2);
  max-width: 240px;
  padding: 14px 0 12px;
  position: relative;
}

.academic_link::after {
  font-family: icons;
  content: '\e901';
  font-size: 1rem;
  line-height: 1;
  color: #fff;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.academic_link:hover {
  background-color: #fff;
  color: #003595;
  opacity: 1.0;
}

.academic_link:hover::after {
  color: #003595;
}

.academic_link .academic_link_icon-off,
.academic_link .academic_link_icon-on {
  display: inline-block;
  height: 20px;
}

.academic_link .academic_link_icon-on,
.academic_link:hover .academic_link_icon-off {
  display: none;
}

.academic_link:hover .academic_link_icon-on {
  display: inline-block;
  opacity: 1.0;
}

/*---------------------------------------------------------------
概要
---------------------------------------------------------------*/
.academic_section_ttl {
  font-size: 2.4rem;
  line-height: 3.2rem;
  border-bottom: solid 3px #003595;
  border-left: solid 10px #003595;
  padding: 0.5rem 0 0.5rem 1rem;
  margin-bottom: 2rem;
}

.academic_summary {
  margin-bottom: 3rem;
  font-size: 14px;
  line-height: 1.8;
}

/*---------------------------------------------------------------
主なトピック
---------------------------------------------------------------*/
.academic_section {
  margin-bottom: 3rem;
}

.academic_topics li {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  line-height: 1.8;
  padding-left: 16px;
  text-indent: -16px;
}

.academic_topics li::before {
  content: "●";
  color: #003595;
  margin-right: 0.7rem;
}

/*---------------------------------------------------------------
分類・キーワード
---------------------------------------------------------------*/
.academic_terms {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 3rem;
}

.academic_terms .academic_badge {
  border-color: #003595;
  color: #003595;
}

.academic_terms .academic_badge:hover {
  background-color: #003595;
  color: #fff;
  opacity: 1.0;
}

/*---------------------------------------------------------------
本文（エディタ入力部分）
---------------------------------------------------------------*/
.academic_body h2 {
  font-size: 2.4rem;
  line-height: 3.2rem;
  border-bottom: solid 3px #003595;
  border-left: solid 10px #003595;
  padding: 0.5rem 0 0.5rem 1rem;
  margin-bottom: 1rem;
}

.academic_body h3 {
  font-size: 2rem;
  border-bottom: solid 1px #003595;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.academic_body h4 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.academic_body h4:before {
  content: "●";
  color: #003595;
  margin-right: 0.5rem;
}

.academic_body p {
  font-size: 1.6rem;
  line-height: 2.6rem;
  margin-bottom: 16px;
}

.academic_body ul {
  margin: 2rem 0;
}

.academic_body ul li {
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.academic_body ul li:before {
  content: "●";
  color: #003595;
}

.academic_body ol {
  margin: 2rem 0 2rem 2rem;
}

.academic_body ol li {
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.academic_body a {
  text-decoration: underline;
  color: #0000ff;
  font-weight: 600;
}

.academic_body table {
  border: solid 1px #666666;
  width: 100%;
  margin: 1rem 0;
  font-size: 1.6rem;
}

.academic_body table tr {
  border-bottom: solid 1px #666666;
}

.academic_body table tr:first-of-type {
  background-color: #003595;
}

.academic_body table tr:first-of-type td {
  color: #fff;
  border-right: solid 1px #fff;
}

.academic_body table tr:first-of-type td:last-of-type {
  border-right: solid 1px #003595;
}

.academic_body table tr:last-of-type {
  border-bottom: none;
}

.academic_body table tr td {
  border-right: solid 1px #666666;
  padding: 1rem;
}

.academic_body table tr td:last-of-type {
  border-bottom: none;
}

/*---------------------------------------------------------------
一覧に戻るボタン
---------------------------------------------------------------*/
.academic_back {
  margin: 3rem auto;
}

.academic_back a {
  display: block;
  background-color: #fff;
  color: #003595;
  border: solid 2px #003595;
  padding: 1rem 3rem 0.8rem;
  width: fit-content;
  margin: 0 auto;
  font-size: 1.6rem;
  font-weight: 600;
  min-width: 250px;
  text-align: center;
  border-radius: 10px;
}

.academic_back a::after {
  font-family: icons;
  content: '\e901';
  font-size: 1rem;
  line-height: 1;
  color: #003595;
  position: relative;
  left: 8px;
  top: -1px;
}

.academic_back a:hover {
  background-color: #003595;
  color: #fff;
}

.academic_back a:hover::after {
  color: #fff;
}

/*---------------------------------------------------------------
サイドバー
---------------------------------------------------------------*/
.academic_side .academic_side_widget:first-of-type {
  margin-bottom: 2rem;
}

.academic_side .academic_side_widget h3 {
  background-color: #003595;
  color: #fff;
  padding: 1rem;
  font-size: 16px;
}

.academic_side .academic_side_widget ul {
  border: solid 1px #333;
}

.academic_side .academic_side_widget ul li {
  border-bottom: solid 1px #333;
  font-size: 1.4rem;
  line-height: 2rem;
  text-indent: -1rem;
  padding: 1rem 1rem 1rem 2rem;
}

.academic_side .academic_side_widget ul li::before {
  font-family: icons;
  content: '\e901';
  font-size: 1rem;
  line-height: 1;
  color: #003595;
  position: relative;
  left: 0;
  top: -1px;
  margin-right: 0.5rem;
}

.academic_side .academic_side_widget ul li:last-of-type {
  border-bottom: none;
}

/*===============================================================
一覧ページ（archive-academic.php / facet-academic.php）
　設計書: /docs/design/academic-library-archive.md
　配色は詳細ページと共通： 紺 #003595 ／ 橙 #ff9f00 ／ 罫 #ccc
===============================================================*/

/*---------------------------------------------------------------
レイアウト
　PCは base.css の float（.main 左／.side 右）をそのまま使う。
　SPはこのラッパーを flex にして、絞り込みを結果の上へ回す。
---------------------------------------------------------------*/
.academic_archive::after {
  content: '';
  display: block;
  clear: both;
}

/* 読み上げ用（視覚的に隠す） */
.academic_visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*---------------------------------------------------------------
見出し・リード文
---------------------------------------------------------------*/
.academic_list_lead {
  font-size: 1.4rem;
  line-height: 1.8;
}

.academic_list_note {
  border: solid 2px #cc0000;
  border-radius: 8px;
  padding: 20px;
  font-size: 12px;
  color: #cc0000;
  margin: 1rem 0 3rem;
}

/*---------------------------------------------------------------
選択中の条件（チップ）
---------------------------------------------------------------*/
.academic_chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background-color: #f4f6fa;
  border: solid 1px #c2cfe5;
  padding: 10px 12px;
  margin-bottom: 1.5rem;
}

.academic_chips_ttl {
  font-size: 1.2rem;
  font-weight: 600;
  color: #003595;
}

.academic_chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #003595;
  color: #fff;
  border-radius: 100vmax;
  font-size: 1.2rem;
  line-height: 1;
  padding: 6px 12px 5px;
}

.academic_chip:hover {
  background-color: #ff9f00;
  opacity: 1.0;
}

.academic_chip_x {
  font-size: 1.4rem;
  line-height: 1;
}

.academic_chips_clear {
  font-size: 1.2rem;
  color: #003595;
  text-decoration: underline;
  margin-left: auto;
}

/*---------------------------------------------------------------
件数・並び替え
---------------------------------------------------------------*/
.academic_result_top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: solid 2px #003595;
  padding-bottom: 8px;
  margin-bottom: 1.5rem;
}

.academic_result_count {
  font-size: 1.3rem;
}

.academic_sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 1.2rem;
}

.academic_sort_ttl {
  color: #666;
}

.academic_sort_item {
  border: solid 1px #003595;
  color: #003595;
  background-color: #fff;
  padding: 4px 10px 3px;
  line-height: 1;
}

.academic_sort_item:hover {
  background-color: #003595;
  color: #fff;
  opacity: 1.0;
}

.academic_sort_item.is-current {
  background-color: #003595;
  color: #fff;
  font-weight: 600;
}

/*---------------------------------------------------------------
結果カード
---------------------------------------------------------------*/
/* カードはどこを押しても記事へ飛ぶ。
   バッジ・タグは別リンクのため <a> を入れ子にできない。そこでタイトルのリンクに
   カード全面を覆う疑似要素を敷き（stretched link）、バッジ・タグだけをその上に出す。
   リンクは1つのままなのでスクリーンリーダーでの読み上げも増えない。 */
.academic_card {
  border: solid 1px #ccc;
  border-left: solid 5px #003595;
  padding: 16px 18px;
  margin-bottom: 14px;
  position: relative;
}

.academic_card:hover {
  background-color: #f4f6fa;
  border-color: #003595;
  border-left-color: #003595;
}

.academic_card:hover .academic_card_ttl a {
  text-decoration: underline;
}

.academic_card_ttl a::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 覆いより手前に出して、個別リンクとして機能させる */
.academic_card .academic_badges,
.academic_card .academic_card_tags {
  position: relative;
  z-index: 1;
}

.academic_card .academic_badges {
  margin-bottom: 8px;
}

.academic_card_ttl {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 6px;
}

.academic_card_ttl a {
  color: #003595;
}

.academic_card_ttl a:hover {
  text-decoration: underline;
  opacity: 1.0;
}

.academic_card_meta {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 8px;
}

.academic_card_summary {
  font-size: 1.4rem;
  line-height: 1.8;
  margin-bottom: 10px;
}

.academic_card_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.academic_card_tag {
  font-size: 1.1rem;
  line-height: 1;
  color: #003595;
  border: solid 1px #c2cfe5;
  border-radius: 100vmax;
  padding: 5px 10px 4px;
}

.academic_card_tag:hover {
  background-color: #003595;
  color: #fff;
  opacity: 1.0;
}

/*---------------------------------------------------------------
結果なし
---------------------------------------------------------------*/
.academic_empty {
  border: solid 1px #ccc;
  padding: 30px 20px;
  text-align: center;
  font-size: 1.4rem;
  line-height: 2;
}

.academic_empty a {
  color: #003595;
  text-decoration: underline;
}

/*---------------------------------------------------------------
ページャ
　基本の見た目は base.css の .pagination に載せ、色だけ揃える
---------------------------------------------------------------*/
.academic_archive .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.academic_archive .pagination .page-numbers {
  border: solid 1px #003595;
  background-color: #fff;
  color: #003595;
  font-size: 1.3rem;
  line-height: 1;
  padding: 9px 12px 8px;
}

.academic_archive .pagination .page-numbers:hover {
  background-color: #003595;
  color: #fff;
  opacity: 1.0;
}

.academic_archive .pagination .page-numbers.current {
  background-color: #003595;
  color: #fff;
  font-weight: 600;
}

/*---------------------------------------------------------------
絞り込みパネル
---------------------------------------------------------------*/
.academic_facet_root {
  border: solid 1px #003595;
}

.academic_facet_root_ttl {
  background-color: #003595;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 1rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

/* 開閉マーカーを消して自前の▼に差し替える */
.academic_facet_root_ttl::-webkit-details-marker,
.academic_facet_group_ttl::-webkit-details-marker,
.academic_facet_more_ttl::-webkit-details-marker {
  display: none;
}

.academic_facet_root_ttl::after,
.academic_facet_group_ttl::after {
  content: '＋';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
}

.academic_facet_root[open] > .academic_facet_root_ttl::after,
.academic_facet_group[open] > .academic_facet_group_ttl::after {
  content: '－';
}

.academic_facet_body {
  padding: 12px 10px;
}

/* 検索窓 */
.academic_facet_search {
  display: flex;
  margin-bottom: 14px;
}

.academic_facet_search_input {
  flex: 1;
  min-width: 0;
  border: solid 1px #999;
  border-right: none;
  font-size: 1.3rem;
  padding: 8px;
}

.academic_facet_search_btn {
  background-color: #003595;
  color: #fff;
  border: solid 1px #003595;
  font-size: 1.2rem;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.academic_facet_search_btn:hover {
  background-color: #ff9f00;
  border-color: #ff9f00;
}

/* 軸 */
.academic_facet_group {
  border-top: solid 1px #ccc;
}

.academic_facet_group:last-of-type {
  border-bottom: solid 1px #ccc;
}

.academic_facet_group_ttl {
  font-size: 1.3rem;
  font-weight: 600;
  color: #003595;
  padding: 10px 24px 10px 2px;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.academic_facet_fieldset {
  border: none;
  padding: 0 0 10px;
  margin: 0;
}

.academic_facet_item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 1.2rem;
  line-height: 1.5;
  padding: 4px 2px;
  cursor: pointer;
}

.academic_facet_item:hover {
  background-color: #f4f6fa;
}

.academic_facet_item input {
  margin-top: 2px;
  flex: none;
}

.academic_facet_label {
  flex: 1;
}

.academic_facet_count {
  color: #999;
  font-size: 1.1rem;
}

.academic_facet_count::before {
  content: '(';
}

.academic_facet_count::after {
  content: ')';
}

/* 学術タグの「すべて表示」 */
.academic_facet_more_ttl {
  font-size: 1.2rem;
  color: #003595;
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
  padding: 6px 2px;
}

/* ボタン */
.academic_facet_actions {
  margin-top: 14px;
  text-align: center;
}

.academic_facet_submit {
  display: block;
  width: 100%;
  background-color: #003595;
  color: #fff;
  border: solid 2px #003595;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 10px 0 9px;
  cursor: pointer;
}

.academic_facet_submit:hover {
  background-color: #fff;
  color: #003595;
}

.academic_facet_clear {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.2rem;
  color: #003595;
  text-decoration: underline;
}

/*---------------------------------------------------------------
一覧ページのSP対応
　**ブレークポイントは 667px**（この幅以下で basesp.css が読み込まれ、
　base.css の PC 用レイアウト（.main 715px / .side 240px の float）が外れる）。
　下の 767px のブロックは詳細ページ用の見た目調整で、レイアウトは変えていないため別扱い。
---------------------------------------------------------------*/
@media screen and (max-width: 667px) {

  /* 絞り込みを結果の上へ回す（PCは base.css の float のまま） */
  .academic_archive {
    display: flex;
    flex-direction: column;
  }

  .academic_archive .academic_facet {
    order: -1;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .academic_result_top {
    align-items: flex-start;
    flex-direction: column;
  }

  .academic_chips_clear {
    margin-left: 0;
  }

  /* basesp.css が .pagination を display:none にしているため戻す */
  .academic_archive .pagination {
    display: flex;
  }

  /* SPの左右余白。
     ※ 767px 側に置いてはいけない。668〜767px では base.css の .content{width:1000px} が
     　 生きており、body * { box-sizing: border-box } と相まって内側が 1000px − 左右4% に縮む。
     　 すると .main(715px) + .side(240px) = 955px が収まらず float が落ちてカラム落ちする。 */
  .content {
    padding: 0 4%;
  }
}

@media screen and (max-width: 767px) {
  .academic_body table {
    overflow-x: scroll;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  .academic_body table::-webkit-scrollbar {
    height: 2px;
  }

  .academic_body table::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
  }

  .academic_body table tr td {
    white-space: nowrap;
  }

  .academic_content h1 {
    font-size: 2rem;
    line-height: 2.8rem;
  }

  .academic_links {
    flex-direction: column;
  }

  .academic_link {
    width: 100%;
  }
}