@charset "utf-8";



/****************************/
/********** Header **********/
/****************************/

header {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  color: #FFFFFF;
}
header #header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
  text-align: center;
  position: relative;
  z-index: 8888;
}
header #header #title {
  margin: 0 auto;
  padding: 0;
  text-align: left;
  flex-grow: 1;
}
header #header #title small {
  font-size: 1.5rem;
  font-weight: 500;
}
header #header #title h1 {
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
  padding: 0;
}
header #header #title h1 a {
  font-family: 'Hiragino Kaku Gothic ProN';
  font-size: 3.6rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  line-height: 60%;
}
header #header #title h1 a:before {
  content: url("../images/logo.png");
  margin: -4px 16px 0 0;
  float: left;
}
header #header #title h1 span {
  font-size: 1.6rem;
  font-weight: 800;
}
header #header #title h1 span:before {
  content: "\A";
  white-space: pre;
}
header #header .language {
  position: absolute;
  bottom: 20px;
  right: 0;
}
header #header .language a {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 6px 30px;
  border-radius: 20px;
  color: #FFFFFF;
  background-color: #0C93AB;
  text-decoration: none;
}
header #header .language a:hover {
  background-color: #4BC9DF;
}
header #header .inquiry {
  position: absolute;
/*  bottom: 100px; 各ページの右肩に「一般向け」ボタン追加する際に、ボタン間の隙間の調整が必要な為、100pxから60pxに変更した。*/
  bottom: 60px;
  right: 0;
}
header #header .inquiry a {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 6px 30px;
  border-radius: 20px;
  color: #FFFFFF;
  background-color: #0C93AB;
  text-decoration: none;
}
header #header .inquiry a:hover {
  background-color: #4BC9DF;
}

header #header .public {  /* 一般向けボタン */
  position: absolute;
  bottom: 100px;          /*bottomの値によりボタンの間隔を調整*/
  right: 0;
}
header #header .public a {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 6px 30px;
  border-radius: 20px;
  color: #FFFFFF;
  background-color: #0C93AB;
  text-decoration: none;
}
header #header .public a:hover {
  background-color: #4BC9DF;
}
header #header .facebook-btn {/* facebookの「いいね！」ボタン */
  position: absolute;
  bottom: 18px;
  left: 635px; /*シェアボタンの表示が切れる問題の対処*/
  /*right: 180px; 元々のボタンの位置設定*/
}
/*シェアボタンの表示が切れる問題の対処。(2021/02/02) 参照URL:https://developers.facebook.com/support/bugs/3491401550953551/*/
.wp-share-buttons__item .fb_iframe_widget span,
.wp-share-buttons__item .fb_iframe_widget iframe {
  width: 150px !important;
}
 /*シェアボタンの表示が切れる問題の対処。参照URL:https://developers.facebook.com/support/bugs/3491401550953551/
.fb-like span,
.fb-like iframe {
  width: 200px !important;
}*/

header #header .youtube-channel {  /* 「YouTubeチャンネル」ボタン */
  position: absolute;
  bottom: 60px; /*bottom,rightの値によりボタンの間隔を調整*/
  left: 650px;
  /*right: 180px; 元々のボタンの位置設定*/
}
header #header .youtube-channel a {
  font-size: 1.5rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 5px;
  color: #FFFFFF;
  background-color: #B22222; /*ボタンの色：暗めの赤に設定*/
  text-decoration: none;
}
header #header .youtube-channel a:hover {
  background-color: red; /*マウスホバー時の色：赤に設定*/
}

/********************************/
/********** Global Nav **********/
/********************************/

#global-nav nav {
  margin: 0 auto;
  padding: 20px 0;
  position: relative;
  z-index: 9999;
  width: 100%;
  text-align: center;
  background-color: #04295D;
  border-top: 1px solid #085F85;
  border-bottom: 1px solid #085F85;
}
#global-nav nav ul {
  margin: 0 auto;
  padding: 0;
  display: table;
  table-layout: fixed;
  width: 1000px;
}
#global-nav nav ul li {
  display: table-cell;
  vertical-align: middle;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 100%;
  color: #FFFFFF;
  position: relative;
  border-right: 1px solid #FFFFFF;
}
#global-nav nav ul li:first-child a:before {
  font-family: 'Font Awesome 5 Free';
  content: "\f015";
  margin: 0 10px 0 0;
  font-size: 1.6rem;
  font-weight: 800;
}
#global-nav nav ul li:last-child {
  border-right: none;
}
#global-nav nav ul li a {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 100%;
  color: #FFFFFF;
  text-decoration: none;
}
#global-nav nav ul li a:hover,
#global-nav nav ul li.current a {
  color: #4BC9DF;
}



/*********************************/
/********** Information **********/
/*********************************/

.information {
  margin: 0 auto;
  padding: 0;
  width: 1000px;
  height: 400px; /* informationの高さが足りなくなったため、増やした。*/
  /*height: 360px;*/ /*こちらが元々のinfomationのheightの値。*/
  position: relative;
}
.information ul {
  position: absolute;
  bottom: 20px;
  /*width: 60%;*/
  max-width: 100%;
}
.information ul li {
  margin: 10px 0;
  padding: 8px 16px;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 800;
  background-color: #FFFFFF;
  color: #000000;
}
.information ul li span {
  color: #0C93AB;
  font-weight: 800;
  margin: 0 20px 0 0;
}
.information ul li a {
  text-decoration: none;
  font-weight: 800;
}



/****************************/
/********** Footer **********/
/****************************/

footer {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  text-align: center;
  background-color: #04295D;
  color: #FFFFFF;
}
footer #pagetop {
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 100%;
}
footer #pagetop a {
  position: absolute;
  top: -20px;
  left: -50%;
  right: -50%;
  z-index: 7777;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  background-color: #0C93AB;
  color: #FFFFFF;
  text-align: center;
  font-size: 1.8rem;
  text-decoration: none;
}
footer #pagetop a:hover {
  background-color: #4BC9DF;
}
footer #copyright {
  text-align: center;
  font-size: 1.3rem;
  color: #FFFFFF;
  margin: 0 auto;
  padding: 0;
  width: 1000px;
}



/**************************/
/********** Main **********/
/**************************/

main {
  display: block;
  margin: 0 auto;
  padding: 0;
  flex: 1;
  width: 100%;
}



/*****************************/
/********** Content **********/
/*****************************/

.content {
  margin: 0 auto;
  padding: 20px 0;
  text-align: left;
  width: 1000px;
}



/**************************/
/********** Home **********/
/**************************/

.home {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 100%;
  background-color: #011F41;
  position: relative;
  background-image: url("../images/main-image.jpg");
  background-repeat: no-repeat;
  background-position: center top;
}

.home #section01 {
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  background: linear-gradient( to bottom, rgba(12,148,172,0.8), #0C94AC 30%);
  color: #FFFFFF;
}
.home #section01 h2 {
  font-size: 3.2rem;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  border-bottom: 1px solid #FFFFFF;
  margin: 0 auto;
  padding: 0 0 10px 0;
}

.home #section02 {
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  background-color: #FFFFFF;
}
.home #section02 h2 {
  font-size: 3.6rem;
  font-weight: 500;
  color: #0C93AB;
  text-align: center;
  border-bottom: 1px solid #0C93AB;
  margin: 0 auto;
  padding: 0 0 10px 0;
}
.home #section02 .news {
}
.home #section02 .news dl {
  display: flex;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px dotted #CCCCCC;
  width: 100%;
}
.home #section02 .news dl dt {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.home #section02 .news dl dt span {
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 20px;
  text-align: center;
  width: 120px;
  margin: 0 20px;
}
.home #section02 .news dl dt span.cat-event {
  background-color: #FA5118;
  color: #FFFFFF;
}
.home #section02 .news dl dt span.cat-press {
  background-color: #55A850;
  color: #FFFFFF;
}
.home #section02 .news dl dt span.cat-topics {
  background-color: #996699;
  color: #FFFFFF;
}
.home #section02 .news dl dt span.cat-award {
  background-color: #3366CC;
  color: #FFFFFF;
}
.home #section02 .news dl dd {
  margin: 0;
  padding: 0;
}
.home #section02 .news .archives {
  margin: 30px auto;
  padding: 0;
  text-align: center;
}
.home #section02 .news .archives:after {
  font-family: 'Font Awesome 5 Free';
  content: "\f0da";
  margin: 0 0 0 10px;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0C93AB;
}

.home #section03 {
  clear: both;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  background-color: #EEEEEE;
}
.home #section03 ul {
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.home #section03 ul li {
  text-align: center;
  width: 31.6%;
  margin: 1.3% 2.6% 1.3% 0;
}
.home #section03 ul li:nth-child(3n) {
  margin-right: 0;
}



/***************************/
/********** Pages **********/
/***************************/

.page {
  margin: 0 auto;
  padding: 0;
  text-align: center;
  width: 100%;
  background-color: #011F41;
  position: relative;
}
.page main {
  background-color: #FFFFFF;
  padding-bottom: 40px;
}
.page .page-title {
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  background-color: #0C94AC;
}
.page .page-title h2 {
  margin: 0 auto;
  padding: 0;
  text-align: left;
  width: 1000px;
  color: #FFFFFF;
}

.page .read {
  font-family: "Noto Sans";
  font-size: 2.1rem;
  font-weight: 700;
  margin: 30px 0;
}

.page .document-list {
  margin: 20px auto;
  padding: 0;
}
.page .document-list dl {
  display: flex;
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px dotted #CCCCCC;
  width: 100%;
}
.page .document-list dl dt {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.page .document-list dl dt span {
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 20px;
  text-align: center;
  width: 120px;
  margin: 0 20px;
}
.page .document-list dl dt span.cat-event {
  background-color: #FA5118;
  color: #FFFFFF;
}
.page .document-list dl dt span.cat-press {
  background-color: #55A850;
  color: #FFFFFF;
}
.page .document-list dl dt span.cat-topics {
  background-color: #996699;
  color: #FFFFFF;
}
.page .document-list dl dt span.cat-award {
  background-color: #3366CC;
  color: #FFFFFF;
}
.page .document-list dl dd {
  margin: 0;
  padding: 0;
}

.page .greeting {
  display: flex;
}
.page .greeting p:first-child {
  margin-top: 0;
}

.page .folder-wrapper {
  margin: 0 0 20px 0;
  border: 1px solid #0C93AB;
  padding: 20px;
  position: relative;
}
.page .folder-wrapper-2 {       /*.folder-wrapperの上下paddingを狭くするため追加。ここから*/
  margin: 0 0 20px 0;
  border: 1px solid #0C93AB;
  padding: 3px 20px 3px 20px;   /*上下paddingを20pxから3pxにする。*/
  position: relative;
}                               /*.folder-wrapperの上下paddingを狭くするため追加。ここまで*/
.page .folder-wrapper .headline em {
  font-family: 'Hiragino Kaku Gothic ProN';
  font-size: 2.0rem;
  font-weight: 700;
}
/*IE11 Hack*/
@media all and (-ms-high-contrast:none) {
  .page .folder-wrapper .headline em {
    font-family: Arial, "メイリオ", Meiryo, sans-serif;
  }
}
.page form {
  margin: 50px auto;
  font-size: 2rem;
}
/*****************************/
/* Page Topへ戻るボタンの為、追加 */
/*****************************/
#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #3f98ef;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #3f98ef;
}