@charset "utf-8";

html {
  padding: 0;
  margin: 0;
  font-size: 100%;
}

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100vh;
  color: #333;
  font-family: 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', 'BIZ UDGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-weight: 400;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100%;
  background-color: #fcfcfa;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

a {
  color: #0666cc;
}

a:hover {
  color: #465f70;
}

/*buttonのブラウザ特有のスタイルを無効にする*/
/*ページ先頭に戻る、ハンバーガーメニューでbutton使用中*/
button {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
}

/*==================================================
font-family
==================================================*/
/*----------ゴシック----------*/
h1#info-temporary-title,
h4 {
  font-family: 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', 'BIZ UDGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-weight: 400;
}

/*----------明朝----------*/
h1.main-title,
h1.main-title-long,
#about-title,
.h2-contents-title,
.h3-subtitle {
  font-family: 'Cambria', 'Times New Roman', 'BIZ UDMincho', 'Hiragino Mincho ProN', serif;
  font-weight: 400;
}

/*==================================================
見出し
==================================================*/
/*----------h1----------*/
h1.main-title,
h1.main-title-long {
  font-size: 2rem;
  margin: 0 auto;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/*----------h1疑似要素----------*/
h1.main-title:after,
h1.main-title-long:after {
  border-top: 1px solid #999;
  content: "";
  width: 90%;
  margin-left: 0.5em;
}

/*----------トップページ「資料閲覧室について」----------*/
h1#about-title {
  font-size: 1.3rem;
  margin: 0 auto;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}

/*----------h2----------*/
.h2-contents-title {
  font-size: 1.5rem;
  border-left: 7px solid #465f70;
  padding-left: 0.7em;
  margin-bottom: 1em;
  text-align: left;
}

/*----------h3----------*/
.h3-subtitle {
  font-size: 1.25rem;
  margin: 0.5em 0;
}

/*----------h4（「アーカイブズ資料」のPDFボタン）----------*/
h4 {
  display: inline-block;
  font-size: 1rem;
}

/*==================================================
ページの基本構造
==================================================*/
main {
	width: 85%;
  margin: 120px auto 150px auto;
}

/*----------イントロダクションとアナウンス----------*/
/*----------
・introduction：各ページの説明文
・announce：黄色い背景。注意喚起用
----------*/
section.introduction-announce-container,
section.introduction-container,
section.announce-container {
  width: calc(100% - 200px);
  margin: 3em auto 4em auto;
}

.introduction {
  width: auto;
  max-width: 100%;
  text-align: justify;
  margin-bottom: 1em;
  a {
    word-wrap: break-word;
  }
}

.announce {
  width: auto;
  max-width: 100%;
  border: 1px solid #999;
  background-color: #ffffc2;
  padding: 1em;
}

/*h2タイトル以下、h3タイトル以下のイントロダクション*/
.introduction-sub {
  width: 100%;
  margin: 3em 0;
}

/*h2タイトル以下のアナウンスの枠（「アーカイブズ資料」で使用中）*/
section.announce-sub-container {
  width: 100%;
  margin: 3em auto;
}

/*----------メインコンテンツ----------*/
section.main-contents-container {
  width: calc(100% - 200px);
  margin: 3em auto;
}

/*h2タイトル以下のコンテンツを囲む*/
section.h2-container {
  margin-bottom: 5em;
}

/*h3タイトル以下のコンテンツを囲む*/
section.h3-container {
  margin-bottom: 4em;
}

/*==================================================
スクロールダウン
==================================================*/
#scroll-container {
  width: 100%;
  height: auto;
}

#scroll {
  position: absolute;
  right: 18px;
  bottom: 130px;
  writing-mode: vertical-rl;
  z-index: 9999;
  color: #333;
  height: 130px;
  z-index: -99;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);/*Chrome, Safari*/
  /*-ms-transform: scale(0.8);/*IE*/
  -moz-transform: scale(0.8);/*firefox*/
}

#scroll::before {
  animation: scroll 3.5s infinite;
  background-color: #333;
  bottom: -160px;
  content: "";
  height: 160px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 2;
  }
  
  #scroll::after {
  background-color: #ccc;
  bottom: -160px;
  content: "";
  height: 160px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}

/*アニメーション*/
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*==================================================
アイキャッチ画像
==================================================*/
/*※アイキャッチ画像位置を基準に臨時のお知らせを表示する*/
#eyecatch-temporary-container {
position: relative;
}

#eyecatch-temporary-container::before {
content: "";
display: block;
margin: 80px 0;
}

#eyecatch {
  display: block;
  width: calc(100% - 130px);
  margin: 0 auto;
  height: calc((100vh - 150px) - 160px);
  min-height: 340px;
  overflow: hidden;
  background-position: center;
  filter: drop-shadow(0 0 1rem #ebeae4);
  img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
 }
}

/*==================================================
臨時のお知らせ（通常コメントアウト）
==================================================*/
/*※アイキャッチ画像位置を基準に臨時のお知らせを表示する*/
section#info-temporary {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

#info-temporary-background {
  margin: 0 auto;
 background-color: #fcfcfa;
 border: 3px solid #b0411a;
 padding: 2em 1.5em;
}

h1#info-temporary-title {
  padding-bottom: 1em;
  text-align: center;
  font-size: 1.2rem;
  span {
  background-color: #b0411a;
  color: #fcfcfa;
  padding: 0.2em 0.5em;
 }
}

#info-temporary-text {
  width: calc(100% - 60px);
  margin: 0 auto;
  p {
  margin-bottom: 1em;
 }
}

/*==================================================
ページ先頭に戻るボタン
==================================================*/
.button-backtotop {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0;
  bottom: 0;
  width: 55px;
  height: 55px;
  background: #465f70;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: .3s;
  color: #fff;/*代替テキストの色*/
  img {
    width: 15px;
    height: 15px;
  }
}

/*スクロール後に.button-backtotopクラスに付与*/
.is-active {
  opacity: 1;
  visibility: visible;
}

/*==================================================
マージン調整用
==================================================*/
/*----------トップページ「所蔵資料」位置調整に使用中----------*/
.article-offset {
  margin-top: 6em;
}

/*----------上下にマージン----------*/
.margin-small {
  margin: 1em 0;
}

.margin-medium {
  margin: 2em 0;
}

/*----------topのみマージン----------*/
.margin-top-small {
  margin-top: 1em;
}

.margin-top-medium  {
  margin-top: 2em;
}

.margin-top-large  {
  margin-top: 3em;
}

/*----------bottomのみマージン----------*/
.margin-bottom-small {
  margin-bottom: 1em;
}

.margin-bottom-medium {
  margin-bottom: 2em;
}

/*==================================================
テキストを赤にする
==================================================*/
.color-red {
  color: #b0411a;
}

/*==================================================
サムネイル画像とテキスト（リスト）
==================================================*/
/*----------画像とテキストの枠----------*/
.thumbnail-text-container {
  display: flex;
}

/*----------テキスト----------*/
.thumbnail-text-container .text {
  position: relative;
  height: fit-content;
  padding: 1.5em;
  margin-left: 3em;
  width: 100%;
  background-color: rgb(235 234 228 / 0.6);
}

/*テキストの疑似要素（ドッグイヤー部分）*/
.thumbnail-text-container .text::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 19px;
  height: 19px;
  border: 12px solid #ccc;
  border-right-color: #fcfcfa;
  border-bottom-color: #fcfcfa;
  box-sizing: border-box;
  }

/*----------リスト----------*/
.thumbnail-text-container .text .list {
  margin-left: 1em;
}

/*----------画像----------*/
.thumbnail {
  width: 100%;
  max-width: 300px;
  min-width: 280px;
  height: 100%;
  border: 1px solid #999;
  padding: 10px;
  background-color: #fff;
  img {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border: 1px solid #ccc;
  }
 }

/*----------キャプション----------*/
figcaption {
  text-align: center;
  font-size: 0.95rem;
  margin-top: 0.5em;
}

/*==================================================
テキスト（リスト）のみ
==================================================*/
.ol-list li,
.ul-list li {
  margin-bottom: 1em;
  margin-left: 1.5em;
 }

.ol-list li:last-child,
.ul-list li:last-child {
  margin-bottom: 0;
}

/*----------リストの入れ子----------*/
.ol-list-nest li,
.ul-list-nest li {
  margin: 0.5em 0 0.5em 1em;
}

.ol-list-nest li:last-child,
.ul-list-nest li:last-child {
  margin-bottom: 0;
}

/*----------リストスタイルなし----------*/
 .list-text {
  list-style-type: none;
}

/*==================================================
ボタン
==================================================*/
/*----------
・button-container：ボタンが1つの場合
・button-flex-container：ボタンが2つ並びの場合
----------*/
.button-container {
  margin: 1em 1em 1em 0;
}

.button-flex-container {
  display: flex;
  margin: 1em 1em 1em 0;
}

/*----------
・button-download：ダウンロードボタン
・button-link：「〇〇はこちら」ボタン
----------*/
.button-download,
.button-link {
  text-align: center;
  background: #fff;
  font-size: 0.95rem;
}

.button-download {
  width: 250px;
  margin-right: 2em;
}
 
.button-link {
  width: 290px;
}

.button-link a,
.button-download a {
  display: block;
  border: 1px solid #999;
  text-decoration: none;
  color: #333;
  padding: 1em;
}

.button-download:hover,
.button-link:hover {
  background-color: #465f70;
  transition-duration: 0.2s;
  a:hover {
   color: #fff;
   border: 1px solid #465f70;
 }
}

/*==================================================
テーブル
==================================================*/
/*----------レファレンスページで使用中----------*/
.reference-table {
  margin-top: 2em;
}

.asterisk {
  vertical-align: top;
}

/*----------画像利用申請ページで使用中----------*/
.application-table-image {
  width: auto;
  border-collapse: collapse;
  margin-bottom: 2em;
  text-align: center;
  background-color: #fff;
  th, td {
  padding: 0.5em 1em;
  border: 1px solid #999;
 }
}

.application-table-image th {
  background-color:#ebeae4;
  font-weight: 400;
}

/*==================================================
アドレス
==================================================*/
address {
  font-style: normal;
}

/*==================================================
Font Awesomeアイコン
==================================================*/
/*----------右矢印----------*/ 
.fa-chevron-right {
  margin-left: 1em;
 }

/*----------ダウンロード----------*/
 .fa-circle-down {
  margin-left : 0.5em;
 }

/*----------エクスクラメーションマーク----------*/
 .fa-triangle-exclamation { 
  margin-right : 0.5em;
 }

/*==================================================
PDFアイコン
==================================================*/
.pdf-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  vertical-align: text-bottom
}

/*==================================================
メディアクエリ（1280px以下）
==================================================*/
@media screen and (max-width: 1280px) {
/*----------サムネイル画像とテキストの枠----------*/
.thumbnail-text-container {
  display: block;
}

/*----------テキスト----------*/
.thumbnail-text-container .text {
  margin-left: 0;
  width: auto;
}

/*----------画像----------*/
.thumbnail {
  max-width: 280px;
  margin: 2em auto;
}
}

/*==================================================
メディアクエリ（1080px以下）
==================================================*/
@media screen and (max-width: 1080px) {
/*----------アイキャッチ画像のmargin----------*/
#eyecatch-temporary-container::before {
  display: none;
}

/*----------h1----------*/
h1.main-title,
h1.main-title-long {
  font-size: 1.8rem;
}

/*----------アイキャッチ画像----------*/
#eyecatch {
  width: calc(100% - 80px);
  height: calc((100vh - 100px) - 90px);
  margin: 50px auto;
  min-height: 300px;
}

/*----------臨時のお知らせ----------*/
section#info-temporary {
  width: calc(100% - 80px);
}

#info-temporary-background {
	width: initial;
}

#info-temporary-text {
  width: initial;
}

/*----------スクロールダウン----------*/
#scroll {
  right: 7px;
  font-size: 0.9rem;
}

/*----------ページの基本構造----------*/
main {
  margin: 60px auto 140px auto;
}

/*----------イントロダクション、アナウンスの枠----------*/
section.introduction-announce-container,
section.introduction-container,
section.announce-container,
section.main-contents-container {
  width: 95%;
}

/*----------通常のお知らせ、重要なお知らせ共通----------*/
.update-date {
  width: 100%;
  margin: 0.5em 0
 }

/*----------通常のお知らせ----------*/
.update-container {
  display: block;
  width: auto;
}

.update-text {
  width: 100%;
}

/*----------重要なお知らせ----------*/
.update-important-container {
  display: block;
  div {
  display: block;
  width: 100%;
 }
}

.update-important-text {
  width: 100%;
}

.update-important-tag {
  margin: 0.5em 0;
}

/*----------ボタン----------*/
 .button-container,
 .button-flex-container {
  margin: 1em 0;
 }
}

/*==================================================
メディアクエリ（768px以下）
==================================================*/
@media screen and (max-width: 768px) {
/*----------h1----------*/
h1.main-title-long {
  display: block;
  font-size: 1.6rem;
  white-space: initial;
}

/*h1.main-title-longの場合、疑似要素は非表示にする*/
h1.main-title-long:after {
  display: none;
}

/*----------臨時のお知らせ----------*/
#temporary {
  width: calc(100% - 40px);
}

/*----------見出し----------*/
h1.main-title {
  font-size: 1.6rem;
}

.h2-contents-title {
  font-size: 1.25rem;
}

.h3-subtitle {
  font-size: 1.2rem;
}

/*----------イントロダクション、アナウンスの枠----------*/
section.introduction-announce-container,
section.introduction-container,
section.announce-container,
section.main-contents-container {
  width: 100%;
}

/*----------ボタン----------*/
.button-flex-container {
  display: block;
}

.button-download {
  margin-right: 0;
  margin-bottom: 1.5em;
}

/*----------サムネイル画像とテキスト----------*/
.thumbnail {
  width: auto;
  min-width: auto;
}

.thumbnail-text-container .text {
  padding: 1.5em;
}


/*----------ページ先頭に戻るボタン----------*/
/*フッターの上に固定する*/
.button-backtotop {
  position: relative;
  float: right;
}
}

/*==================================================
メディアクエリ（590px以下）
==================================================*/
@media screen and (max-width: 590px) {
.button-download {
 width: 90%;
}

.button-link {
 width: 100%;
}
}

/*==================================================
メディアクエリ（印刷時）
==================================================*/
@media print {
  #scroll-container {
    display: none;
  }
}