@charset "utf-8";

/*==================================================
font-family
==================================================*/
/*----------ゴシック----------*/
#language-pc a,
#hamburger-language-sp a {
  font-family: 'Segoe UI', 'Helvetica Neue', 'Helvetica', 'Arial', 'BIZ UDGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  font-weight: 400;
}

/*----------明朝----------*/
#navi-pc,
#navi-sp,
#include-footer h1 {
  font-family: 'Cambria', 'Times New Roman', 'BIZ UDMincho', 'Hiragino Mincho ProN', 'Hiragino Sans', serif;
  font-weight: 400;
}

/*==================================================
PC用ヘッダー（ロゴと言語選択）
==================================================*/
#include-header-navi-pc {
  position: sticky;
  top: -90px;/*#header-container-pcの分（90px）をsticky外にする*/
  z-index: 99;
}

#header-container-pc {
  width: 100%;
  height: 90px;/*この高さの分がsticlyで画面の外になる*/
  background: #465f70;
}

#header-pc {
  display: flex;
  position: relative;
  top: 20px;
  width: calc(100% - 70px);
  margin: 0 auto;
}

#logo-pc {
  a {
  display: inline-block;
  width: 100%;
  height: 100%;
  }
  img {
  width: 270px;
  height: 45px;
  }
}

#language-pc {
 display: flex;
 position: absolute;
 top: 0;
 right: 0;
 height: auto;
 font-size: 0.85rem;
 align-items: center;
 a {
  position: relative;/*疑似要素の基準位置*/
  text-decoration: none;
  color: #fcfcfa;
 }
 a:before {
 content: "";
 position: absolute; /*子要素として疑似要素を固定*/
 left: 0; /*長さはテキストの両端まで*/
 right: 0; /*長さはテキストの両端まで*/
 bottom: -3px;  /*線の上下位置*/
 width: 100%; /*線の長さ*/
 height: 1px; /*線の太さ*/
 background-color: #fcfcfa;
 transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
 transform-origin: center; /*中央を起点にアニメーション*/
 transition: 0.3s ease-out; /*アニメーションの時間*/
}
 a:hover:before {
  transform: scale(1); /*ホバー時に等倍へ拡大*/
 }
}

/*==================================================
PC版グローバルナビ
==================================================*/
#navi-pc {
  width: 100%;
  height: 60px;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background-color: rgb(235 234 228 / 0.85);
}

#navi-pc ul {
  display: flex;
  width: calc(100% - 10px);
  height: 60px;
  justify-content: flex-end;
  align-items: center;
  list-style-type: none;
  font-size: 1.05rem;
  li {
  position: relative;
 }
  a {
  display: flex;
  width: 100%;
  justify-content: center;
  text-decoration: none;
  color: #333;
 }
}

#navi-pc ul li+li {
  position: relative;
  display: inline-block;
}

#navi-pc ul li+li:before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 1em;
  margin: auto;
  border-left: 1px solid #333;
}

#navi-pc ul li a:after {
  position: absolute;
  bottom: 0;/*テキストからの距離*/
  content: '';
  width: 85%;/*hover時に表示*/
  height: 1px;
  background: rgb(51 51 51 / 0.6);
  transform: scale(0, 1);
  transition: 0.5s ease-out;
}

#navi-pc ul li a:hover:after {
  transform: scale(1, 1);/*transform後の下線*/
}

.navi-text-pc {
  margin: 0 25px;
}

/*==================================================
SP版ロゴとハンバーガーメニュー
==================================================*/
#header-container-sp {
  width: 100%;
  height: 100px;
}

#header-sp {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(100% - 50px);
  margin: 0 auto;
  padding-top: 35px;
}

/*imgのサイズに合わせてaにキーボードフォーカスさせる*/
#logo-sp a, 
#hamburger-menu-logo a,
#logo-sp img,
#hamburger-menu-logo img {
  display: inline-block;
  width: 270px;
  height: 45px;
}

/*----------ハンバーガーメニューのボタン----------*/
#hamburger-button-container {
  position: relative;
  width: 35px;
  height: 25px;
}

.hamburger-button-primary {
  position: relative;
  display: inline-block;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
}

.hamburger-button-secondary {
  position: fixed;
  width: 35px; /*キーボードフォーカス用に実体を持たせるため必ず数値を入れる*/
  height: 25px; /*キーボードフォーカス用に実体を持たせるため必ず数値を入れる*/
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
  z-index: 999;
}

.hamburger-button-line {
  position: absolute;
  top: 0;
  right: 0;
  width: 35px;
  height: 2px;
  background-color: #333333;
  -webkit-transition: inherit;
          transition: inherit;
}

.hamburger-button-line:before,
.hamburger-button-line:after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: inherit;
  content: '';
  -webkit-transition: inherit;
          transition: inherit;
}

.hamburger-button-line:before {
  top: 10px;
}

.hamburger-button-line:after {
  top: 20px;
}

.hamburger-button-secondary[aria-expanded="true"] .hamburger-button-line {
  background-color: transparent;
}

.hamburger-button-secondary[aria-expanded="true"] .hamburger-button-line:before,
.hamburger-button-secondary[aria-expanded="true"] .hamburger-button-line:after {
  top: 10px;
  background-color: #ebeae4;
}

.hamburger-button-secondary[aria-expanded="true"] .hamburger-button-line:before {
  -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
          transform: rotate(40deg);
}

.hamburger-button-secondary[aria-expanded="true"] .hamburger-button-line:after {
  -webkit-transform: rotate(-40deg);
      -ms-transform: rotate(-40deg);
          transform: rotate(-40deg);
}

/*----------アクセシビリティ対応「メニューを開閉する」テキストの部分----------*/
.hamburger-visually-hidden {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%); 
  margin: -1px;
}

/*----------ハンバーガーメニューリスト大枠----------*/
#navi-sp {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  visibility: hidden;/*#hamburger-menu-container展開前はhidden*/
}

#hamburger-menu-container {
  position: relative;
  height: 0;
  transition: .5s;
  list-style:none;
  background-color: #465f70;
  width: 100%;
  overflow: auto;
  font-size: 1.05rem;
}

#hamburger-menu-container.open {
  visibility: visible;
}

/*----------ハンバーガーメニュー展開後----------*/
#hamburger-menu-logo-container {
  width: calc(100% - 50px);
  height: 80px;
  margin: 0 auto;
  padding-top: 35px;
}

.hamburger-menu-li {
  border-bottom: 1px solid #999;
  width: 85%;
  margin: 0 auto;
  a {
  display: block;
  text-decoration: none;
  color: #fcfcfa;
  padding: 2em 1em;
 }
}

.hamburger-menu-li:hover {
  border-bottom: 1px solid #fcfcfa;
  transition: .5s;
}

/*----------SP版言語選択----------*/
#hamburger-language-sp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  font-size: 0.95rem;
  a {
  position: relative; /*疑似要素の基準位置*/
  color: #fcfcfa;
  text-decoration: none;
 } 
 a:before {
  content: ""; /*疑似要素の中身は空（記述は必須）*/
  position: absolute; /*子要素として疑似要素を固定*/
  left: 0; /*長さはテキストの両端まで*/
  right: 0; /*長さはテキストの両端まで*/
  bottom: -3px;  /*線の上下位置*/
  width: 100%; /*線の長さ*/
  height: 1px; /*線の太さ*/
  background-color: #fcfcfa; /*線の色*/
  transform: scale(0, 1); /*横方向に0状態から全体まで線を入れる*/
  transform-origin: center; /*中央を起点にアニメーション*/
  transition: 0.3s ease-out; /*アニメーションの時間*/
}
 a:hover:before {
  transform: scale(1); /*ホバー時に等倍へ拡大*/
}
}

/*==================================================
言語選択の区切り線（PC版、SP版共通）
==================================================*/
#language-separate:after {
  content: '';
  display: flex;
  width: 1px;
  height: 1em;
  margin: 0 1em;
  background-color: #fcfcfa;
}

/*==================================================
Font Awesomeアイコン
==================================================*/
/*----------PC版、SP版共通----------*/
.fa-circle-info::before,/*利用案内*/
.fa-magnifying-glass::before,/*資料を探す*/
.fa-book-open::before,/*図書・映像・音声資料*/
.fa-box-archive::before,/*アーカイブズ資料*/
.fa-file-signature::before,/*各種申請*/
.fa-globe::before/*言語選択*/ {
  display: inline-block;
  min-width: 20px;
  margin-right: 0.5em;
}

.fa-circle-info:hover,
.fa-magnifying-glass:hover,
.fa-book-open:hover,
.fa-box-archive:hover,
.fa-file-signature:hover {
  transition-duration: 0.5s;
}

/*----------言語選択（PC版、SP版共通）----------*/
.fa-globe::before {
  font-size: 1.3rem;
  color: #fcfcfa;
}

/*==================================================
フッター
==================================================*/
#include-footer{
  width: 100%;
  height: auto;
  background-color: #ebeae4;
  h1 {
  font-size: 1.1rem;
  margin-bottom: 0.7em;
 }
}

.footer-container {
  display: flex;
  width: 95%;
  margin: 0 auto;
}

.footer-containts1,
.footer-containts2 {
  width: 50%;
  margin: 4em 3em;
  vertical-align: top;
}

.footer-group {
  margin-bottom: 3em;
  ul li {
    display: inline-block;
    margin-right: 1em;
    word-break: keep-all;
  }
}

.footer-group:last-child {
  margin-bottom: 0;
}

.footer-group ul li:last-child {
 margin-right: 0;
}

/*----------フッターのロゴとアイコン---------*/
#logo-footer {
 display: block;
 width: fit-content;
 img {
  width: 270px;
  height: 100%;
 }
}

.icon-facebook,
.icon-twitter,
.icon-youtube {
  display: inline-block;
  img {
  width: 35px;
  height: 35px;
  }
}

.icon-twitter {
  margin: 0 1em;
}

/*----------コピーライト----------*/
#copyright {
font-size: 0.85rem;
padding: 2em 1em;
text-align: center;
}

/*==================================================
メディアクエリ（1081px以上）
==================================================*/
@media screen and (min-width: 1081px) {
  /*SP版ヘッダーとナビは非表示*/
 #include-header-navi-sp {
  display: none;
 }
}

/*==================================================
メディアクエリ（1080px以下）
==================================================*/
@media screen and (max-width: 1080px) {
 #include-header-navi-pc/*PC版ヘッダーとナビは非表示*/ {
  display: none;
 }

/*----------フッター----------*/
.footer-container {
  display: block;
  padding: 1em 0;
}

.footer-containts1,
.footer-containts2 {
  width: 90%;
  margin: 3em auto;
  word-break: inherit;
}

.footer-group ul li {
  display: block;
  margin-right: 0;
}
}

/*==================================================
メディアクエリ（768px以下）
==================================================*/
@media screen and (max-width: 768px) {
/*----------SP版ロゴとハンバーガーメニュー----------*/
#logo-sp a, 
#hamburger-menu-logo a,
#logo-sp img,
#hamburger-menu-logo img {
  width: 240px;
  height: 36px;
}

/*----------フッター----------*/
footer/*ページ先頭へ戻るボタンのfloat:rightを解除*/ {
  clear: both;
}

#logo-footer {
 img {
  width: 230px;
 }
}
}

/*==================================================
メディアクエリ（印刷時の設定）
==================================================*/
@media print {
  #include-header-navi-pc,
  #include-header-navi-sp,
  #include-footer{
    display: none;
  }
}