@charset "UTF-8";

/**********************************************************************************************/
/***** Off-Campus Server (small) **************************************************************/
/**********************************************************************************************/

html {
	font-size: 100%;
}

:root {
	--main-color: #287085;
	--sub-color: #3b719e;
  --kosenHP-color: #4859b1;

	--color-1: white; /*white*/
	--color-2: black; /**black*/
	--color-3: red; /*red*/
	--color-4: pink; /*pink*/
	--color-5: #f8f8f8; /*lightgray*/
	--color-6: #6080aa; /* blue*/
	--color-7: #d7d7d7; /*darkgray*/
  --color-8: #f7e695; /*yellow*/

  --color-white: white;
	--color-lightgray: #f8f8f8;
  --color-mediumgray: #ccc;
	--color-darkgray: #d7d7d7;
  --color-lightblack: #494949;
	--color-black: black;

	--color-red: red;
	--color-pink: pink;
	--color-blue: #6080aa;
  --color-yellow: #f7e695;
}

body {
	font-family: arial, sans-serif;
	line-height: 1.7;
	text-align: center;
	background-color: var(--color-lightgray);
}

/**********************************************************************************************/
/***** Definition of css property *************************************************************/
/**********************************************************************************************/

a {
    text-decoration: none;
}

ul li{
  list-style-type: none;
}


img {
    max-width: 100%;
}

img {
  /*width: 1500px;
	height: 200px;*/
  width: auto;
	height: 200px;
	object-position: left;
	object-fit: cover;
}

/**********************************************************************************************/
/***** Definition of functional margin ********************************************************/
/**********************************************************************************************/

/***** main-margin : 標準的な余白設定 *****/
/***** NOT Common to all CSS files *****/
/***** medium, smallで共通 *****/

.main-margin {
	margin : 0;
  padding: .8em 1em 1.2em 1em;
	background-color: var(--color-white);
  text-align: left;
}

.main-margin h1 {
  font-size: 150%;
}

.main-margin h2 {
  font-size: 120%;
}

/***** wide-margin : 限定的な余白設定 *****/
/***** NOT Common to all CSS files *****/
/***** medium, smallで共通 *****/

.wide-margin {
	margin: 0;
  padding: .8em 1em 1.2em 1em;
	background-color: var(--color-white);
  text-align: left;
}

.wide-margin h1 {
  font-size: 150%;
}

.wide-margin h2 {
  font-size: 120%;
}

/**********************************************************************************************/
/***** Definition of decoration ***************************************************************/
/**********************************************************************************************/

/***** 表題の飾り *****/
/***** Common to all CSS files *****/

.deco-line {
  position: relative;
  margin: 0 -0.5em;
  margin-bottom: .8em;
  padding: .5em;
  border-bottom: 4px solid var(--color-mediumgray);
}

.deco-line::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  width: 20%;
  height: 4px;
  background-color: var(--main-color);
  content: '';
}

.kosenHP-color {
  /* カスタムプロパティ (--main-color) の値を上書き */
  --main-color: var(--kosenHP-color);
}

/***** 見出しの飾り *****/

.deco-box {
  width: 16em;
  margin: 0 -0.2em;
  margin-bottom: .6em;
  padding: .4em .6em;
  border-bottom: solid 3px var(--color-darkgray);
  border-left: solid 5px var(--main-color);
  background: var(--color-lightgray);
  color: var(--color-lightblack);
}

/***** 国際標準逐次刊行物番号の表示 *****/

.issn {
  margin-top: -4.34em;   /* deco-lineにフィットする適切な数字 */
  font-size: 100%;    /* 妥当な文字の大きさ */
  text-align: right;
}

/**********************************************************************************************/
/***** Definition of path *********************************************************************/
/**********************************************************************************************/

/***** path : 記事の構造を示すナビゲーションシステム *****/
/***** NOT Common to all CSS files *****/
/***** medium, smallで共通 *****/

.path {
  padding: .2em 0;
  background-color: var(--color-mediumgray);
  font-weight: 500;
  text-align: left;
}

.path a {
  padding: 0 1.2em;
  color: var(--main-color);
}

.mg-main {
  margin: 0 0; /* fit main-margin */
}

.mg-wide {
  margin: 0 0; /* fit wide-margin */
}

/**********************************************************************************************/
/***** Definition of table ********************************************************************/
/**********************************************************************************************/

/***** 開館時間 *****/
/***** Implementation in: 'gakunai.html', 'gakugai.html' *****/

.OpeningHours {
  padding-top: 1.0em;
	text-align: center;
	font-size: 100%;
  width: 40%;
}

.OpeningHours th {
  background-color: var(--color-lightgray);
  font-weight: normal;
  padding: 5px;
  width: 20%;
}

.OpeningHours td {
  padding: 5px;
  width: 8%;
}

.OpeningHours td:nth-child(3) {
  padding: 5px;
  width: 4%;
}

/***** 電子図書館の書籍一覧 *****/
/***** Common to all CSS files *****/
/***** Implementation in: 'e-lib.html' *****/

.e-lib {
  width: 100%;
  font-size: 100%;
	text-align: left;
}

.e-lib th, .e-lib td {
  padding: .4em 1em;
  border: 1px solid var(--color-mediumgray);
}

.e-lib th:nth-child(1) {
  width: 7%;
}

.e-lib td:nth-child(1) {
  width: 7%;
  font-weight: bold;
}

.e-lib th:nth-child(2), .e-lib td:nth-child(2) {
  width: 75%;
}

.e-lib th:nth-child(3) {
  width: 18%;
}

.e-lib td:nth-child(3) {
  width: 18%;
  font-weight: bold;
}

.e-lib thead {
  background: var(--main-color);
  color: var(--color-white);
}

.e-lib a, .e-lib a:visited {
  color: var(--color-black);
}

.e-lib a:hover {
  color: var(--main-color);
}

/***** 蔵書構成 *****/
/***** Common to all CSS files *****/
/***** Implementation in: 'kousei.html' *****/

.library-collection {
  width: 96%;
  padding-top: .4em;
	font-size: 100%;
  text-align: center;
}

.library-collection th, .library-collection td {
  width: 8%;
  padding: .4em;
}

.library-collection thead {
  background: var(--main-color);
  color: var(--color-white);
}

.library-collection tbody th {
  background-color: var(--color-lightgray);
  font-weight: bold;
}

/***** 視聴覚資料 *****/
/***** Common to all CSS files *****/
/***** Implementation in: 'kousei.html' *****/

.audio-visual-materials {
	width: 50%;
	font-size: 100%;
  text-align: center;
}

.audio-visual-materials th {
  width: 10%;
  padding: .4em;
  background: var(--color-lightgray);
  font-weight: normal;
}

.audio-visual-materials td {
  width: 10%;
  padding: .4em;
}

/***** 古書 *****/
/***** Common to all CSS files *****/
/***** Implementation in: 'kosyo.html' *****/

.antique-books {
  width: 100%;
  font-size: 100%;
	text-align: left;
}

.antique-books th, .antique-books td {
  padding: .4em 1em;
  border: 1px solid var(--color-mediumgray);
}

.antique-books th:nth-child(1) {
  width: 20%;
}

.antique-books td:nth-child(1) {
  width: 20%;
  font-weight: bold;
}

.antique-books th:nth-child(2), .antique-books td:nth-child(2) {
  width: 80%;
}

.antique-books tbody td:nth-child(1)::after {
  content: " |||| 古書";
}

.antique-books thead {
  background: var(--main-color);
  color: var(--color-white);
}

/**********************************************************************************************/
/***** Definition of list *********************************************************************/
/**********************************************************************************************/

/***** お知らせ *****/
/***** Implementation in: 'index.html' *****/

ul.news-list li {
  display: flex;

  width: calc(100% - 5px);
  height: auto;
  padding: 20px 10px;

  border-bottom: 1px solid var(--color-black);
  vertical-align: middle;
}

ul.news-list h1 { /*2025/10/17追加　お知らせ用のh1*/
  position: relative;
  margin-bottom: 10px;
  padding-left: .5em;
  padding-bottom: 1px;
  padding-top: .5em;
  border-bottom: 4px solid var(--color-mediumgray);
  font-size: 170%;
  text-align: left;
}

ul.news-list h1::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: var(--main-color);
}

ul.news-list a {
  display: block;
  color: var(--color-black);
}

ul.news-list a:hover {
  color: var(--sub-color);
}

ul.news-list .date {
  padding: 0 .1em;
}

ul.news-list .date::after {
  display: inline-block;
  min-width: 5em;
  padding: .4em;
  margin: 0 .5em;

  line-height: 1;
  text-align: center;
  vertical-align: middle;

  background: var(--color-lightgray);
  content: "お知らせ";
}

ul.news-list .request .date::after {
  background: var(--color-yellow);
  content: "リクエスト図書";
}

ul.news-list .special .date::after {
  background: var(--color-pink);
  content: "重要連絡";
}

ul.news-list .new {
  border-bottom: 2px solid var(--main-color);
  color:  var(--main-color);
  font-weight: bold;
  width: 40px;
  text-align: center;
  margin-bottom: -10px;
}

/***** お知らせ一覧 *****/
/***** Implementation in: 'info.html' *****/

ul.Announcements li {
  width: 95%;
  height: auto;

  padding: 0.25rem 1rem;
  margin-bottom: 10px;

  color: #494949;
  background: var(--color-lightgray);

  border-left: solid 5px var(--main-color);
  border-bottom: solid 3px #d7d7d7;

  font-weight: bold;
  font-size: 120%;
}

/***** 図書情報センターだより *****/
/***** Implementation in: 'dayori.html' *****/

ul.dayori-list li {
  width: calc(100% - 5em);
  height: auto;
  padding: 10px 0;
  
  border-bottom: 1px solid var(--color-black);
}

ul.dayori-list a {
  display: block;
  color: var(--color-black);
}

ul.dayori-list a:hover {
  color: var(--main-color);
}

ul.dayori-list .title {
  margin-left: 1em;
  font-weight: normal;
  font-size: 100%
}

ul.dayori-list .name {
  margin-left: 1em;
  font-weight: bold;
  font-size: 100%
}

/***** 研究報告・研究紀要 *****/
/***** Implementation in: 'kiyou.html' *****/

ul.ResearchReport li {
  width: 95%;
  height: auto;

  padding: 0.25rem 1rem;
  margin-bottom: 10px;

  color: #494949;
  background: var(--color-lightgray);

  border-left: solid 5px var(--main-color);
  border-bottom: solid 3px #d7d7d7;

  font-weight: bold;
  font-size: 120%;
}

/***** 研究報告 *****/
/***** Implementation in: 'houkoku / 01.html' *****/

ul.report li {
  width: calc(100% - 5em);
  height: auto;
  padding: 10px 0;
  
  border-bottom: 1px solid var(--color-black);
}

ul.report a {
  display: block;
  color: var(--color-black);
}

ul.report a:hover {
  color: var(--main-color);
}

ul.report .title {
  margin-left: 1em;
  font-weight: normal;
  font-size: 100%
}

ul.report .name {
  margin-left: 1em;
  font-weight: bold;
  font-size: 100%
}

.list{
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-left: 5px;
  text-align: left;
}

.list .item a{
  display: flex;
  text-decoration: none;
  color: var(--color-black);
  border-bottom: 1px solid var(--color-black);
  padding: 10px 10px;
}

.list .item .title{
  margin: 0;
}

.list .item a:hover .title{
  color: var(--color-red);
}

/***** 研究報告・研究紀要-表 *****/
/***** Implementation in: 'researcher' *****/
.research-output {
	padding-top: 1.0em;
	font-size: 100%;
  width: 96%;
}

.research-output thead {
  background: var(--kosenHP-color); /*edit: 2025/11/28*/
  color: var(--color-white);
}

.research-output th {
  padding: 5px;
  width: 8%;
  text-align: center;
}

.research-output td { /*2025/10/14編集*/
  padding: 5px;
  width: 15%;
  text-align: center;
  font-weight: bold;
}

.research-output td:nth-child(1) { /*2025/10/14追加*/
  background-color: var(--color-lightgray);
}

.research-output td:nth-child(3) { /*2025/10/14追加*/
  width: 70%;
  background-color: var(--color-lightgray);
  text-align: left;
}

/**********************************************************************************************/
/**********************************************************************************************/

.figure{
  width: 350px;
  height: auto;
}

/**********************************************************************************************/
/***** 文字の指定 ************************************************************************/
/**********************************************************************************************/

.fs-100 {
  font-size: 100%;
}

.fs-110 {
  font-size: 110%;
}

.fs-120 {
  font-size: 120%;
}

.fs-150 {
  font-size: 150%;
}

.ls-21 {
  letter-spacing: 0.21em;
}

.ls-42 {
  letter-spacing: 0.42em;
}

/**********************************************************************************************/
/***** Definition of basic margin *************************************************************/
/**********************************************************************************************/

/***** margin-top (px) *****/

.mgt-5 {
  margin-top: 5px;
}

.mgt-10 {
  margin-top: 10px;
}

.mgt-15 {
  margin-top: 15px;
}

.mgt-20 {
  margin-top: 20px;
}

.mgt-30 {
  margin-top: 30px;
}

.mgt-40 {
  margin-top: 40px;
}

/***** margin-top (em) *****/

.mgt-05e {
  margin-top: 0.5em;
}

.mgt-08e {
  margin-top: 0.8em;
}

.mgt-1e {
  margin-top: 1em;
}

.mgt-2e {
  margin-top: 2em;
}

.mgt-3e {
  margin-top: 3em;
}

.mgt-4e {
  margin-top: 4em;
}

/***** margin-right *****/

.mgr-10 {
  margin-right: 10px;
}

.mgr-20 {
  margin-right: 20px;
}

.mgr-30 {
  margin-right: 30px;
}

/***** margin-bottom *****/

.mgb-10 {
  margin-bottom: 10px;
}

.mgb-20 {
  margin-bottom: 20px;
}

.mgb-30 {
  margin-bottom: 30px;
}

.mgb-60 {
  margin-bottom: 60px;
}

/***** margin-left px *****/

.mgl-10 {
  margin-left: 10px;
}

.mgl-20 {
  margin-left: 20px;
}

.mgl-30 {
  margin-left: 30px;
}

.mgl-60 {
  margin-left: 60px;
}

/***** margin-left em *****/

.mgl-05e {
  margin-left: .5em;
}

.mgl-08e {
  margin-left: .8em;
}

.mgl-1e {
  margin-left: 1em;
}

.mgl-2e {
  margin-left: 2em;
}

.mgl-3e {
  margin-left: 3em;
}

.mgl-4e {
  margin-left: 4em;
}

/***** mg-main, mg-wideなどは、下節「Definition of path」を参照 *****/

/**********************************************************************************************/
/**********************************************************************************************/

.top-slide{
  width: auto;
  height: auto;
  padding: 11px;
  background-color: #FFFFFF;
  box-shadow: 0 3px 18px -4px rgba(0, 0, 0, 0.8);

}

.article{
  margin: auto;
  padding-right: 1em;
  text-align: left;
}

/**********************************************************************************************/
/***** Definition of Announcement *************************************************************/
/**********************************************************************************************/

/***** 各年度お知らせ *****/
/***** Common to all CSS files *****/
/***** Implementation in: 'archive / info_R06.html' *****/

/* NEWの表示 */

.news::before {
  padding: .3em 0;
  border-bottom: 2px solid var(--main-color);
  color: var(--main-color);
  font-weight: bold;
  content: "NEW";
}

.news li {
  padding: 1em 1.5em;
  border-bottom: 1px solid var(--color-black);
}

ul.news .date {
  padding-right: .1em;
}

.news .date::after {
  display: inline-block;
  min-width: 5em;
  padding: .4em;
  margin: 0 .5em;

  line-height: 1;
  text-align: center;
  vertical-align: middle;

  background: var(--color-lightgray);
  content: "お知らせ";
}

ul.news .request .date::after {
  background: var(--color-yellow);
  content: "リクエスト図書";
}

ul.news .special .date::after {
  background: var(--color-pink);
  content: "重要連絡";
}

.news h2 {
  display: inline-block;
  font-size: 100%;
}

.news .text {
  padding-top: .8em;
}

/**********************************************************************************************/
/***** Definition of Index ********************************************************************/
/**********************************************************************************************/

.calendar {
	height: 510px;
	margin-top: 50px;
	margin-right: 10%;
}

.miniIcon {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.comment {
  margin-top: 50px;
  width: 90%;
  line-height: 35px;
  border: solid 2px var(--main-color);
  border-radius: 10px;
  text-align: center;
}

.archive {
  padding: .6em;
  background-color: var(--color-lightgray);
  color: black;
}

.archive:hover {
  background-color: var(--main-color);
  color: white;
}

/**********************************************************************************************/
/***** Definition of Important Announcement ***************************************************/
/**********************************************************************************************/

.top-news {
  position: relative;
  width: 90%;
  margin: auto;
  padding: 20px 0 20px 0;
}

.top-news p {
  background: var(--sub-color);
  padding: 20px 0 20px 0;
  color: var(--color-white);
  font-weight: bold;
}

/**********************************************************************************************/
/***** Definition of Search Box ***************************************************************/
/**********************************************************************************************/

.search { 
  position: relative;
  height: 9em;
  background-color: var(--main-color);
}

.search-box { 
  padding: .8em 0;
  color: var(--color-white);
  font-weight: bold;
	font-size: 150%;
  text-align: center;
}

.search .search_container {
  position: absolute;
  top: 2.7em;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
  box-sizing: border-box;
  border: 2px solid white;
  padding: 3px 10px;
  border-radius: 3px;
  height: 3.3em;
  width: 60%;
  overflow: hidden;
  background-color: var(--color-white);
}

.search .search_container input[type="text"] {
  border: none;
  height: 3.0em;
}

.search .search_container input[type="text"]:focus {
  outline: 0;
}

.search .search_container input[type="submit"] {
  cursor: pointer;
  font-family: FontAwesome;
  border: none;
  background: #3879D9;
  color: #fff;
  position: absolute;
  width: 3.5em;
  height: 3.7em;
  right:0px;
  top: -5px;
  outline : none;
}

/**********************************************************************************************/
/***** Definition of Header *******************************************************************/
/**********************************************************************************************/

.page-header {
	margin: 0 auto;
	background-color: var(--color-white);
}

.logo{ /*2025/10/14追加*/
  width: auto;
  height: 60px;
  /* --- ロゴの位置調整のための追加CSS --- */
  display: block;      /* ブロック要素として振る舞わせる */
  margin-left: 40px;   /* 左端から20pxの余白（マージン）を設ける */
  margin-right: auto;  /* 右側のマージンを自動調整し、要素を左に寄せる */
}

/**********************************************************************************************/
/***** Definition of Global Navigation ********************************************************/
/**********************************************************************************************/

ul.main-nav {
	background-color: var(--main-color);
	text-align: center;
}

ul.main-nav li {
   width: 25%;
   display: inline-block;
   list-style-type: none;
   position: relative;
   border-left: 1px solid var(--color-white);
   border-right: 1px solid var(--color-white);
}

ul.main-nav li + li {
   border-left: 0;
   border-right: 1px solid var(--color-white);
}

ul.main-nav a {
   background-color: var(--main-color);
   color: white;
   line-height: 60px;
   text-align: center;
   text-decoration: none;
   font-weight: bold;
   display: block;
}

ul.main-nav a:hover {
   background-color: var(--sub-color);
   color: white;
}

ul.main-nav li:hover ul {
   display: block;
}

ul.main-nav ul {
   margin: 0px;
   padding: 0px;
   display: none;
   position: absolute;
   z-index: 10000;
   height: 40px;
}

ul.main-nav ul li {
   width: 100%;
   border-left: 2px solid var(--color-darkgray);
   border-right: 2px solid var(--color-darkgray);
   border-bottom: 2px solid var(--color-darkgray);
}

ul.main-nav ul li a {
   line-height: 40px;
   text-align: left;
   font-weight: normal;
   background-color: var(--color-white);
   color: var(--color-black)
}

ul.main-nav ul li a:hover {
   background-color: var(--sub-color);
   color: var(--color-white);
}

/**********************************************************************************************/
/***** Definition of Footer *******************************************************************/
/**********************************************************************************************/

.foot-wrap {
    background-color: var(--main-color);
    color: var(--color-white);
    text-align: center;
    padding-top: 10px;
}

.foot-wrap .menu-left, .menu-center, .menu-right {
    display: block;
    /*vertical-align: top;*/
    width: 195px;
    margin: auto;
    padding-bottom: 20px;
}

.foot-wrap ul {
    list-style: none;
    padding: 0;
    line-height:35px;
}

.foot-wrap h3 {
    border-bottom: 2px solid var(--color-white);
    padding: 5px;
}

.foot-wrap a {
    text-decoration: none;
    color: var(--color-white);
}

.foot-wrap a:hover {
  color: rgb(255, 255, 255);
  text-decoration: underline;
}

.foot-wrap .cmark {
    display: block;
    padding: 10px;
    border-top: 1px solid var(--color-white);
    width: 80%;
    margin: 0 auto;
    color: var(--color-white);
}

.foot-wrap .cmark .adress, .tel, .fax, .mail {
    display: block;
    /*vertical-align: top;*/
    margin: 10px auto;
    padding: 0 10px 0 10px;
}

/**********************************************************************************************/
/***** Definition of outdated class ***********************************************************/
/**********************************************************************************************/

.mm {
	background-color: var(--color-white);
	padding-top: 10px;
	padding-bottom: 20px;
}

.p-title {
  padding-bottom: .5em;
  text-align: left;
}

.p-title h1 {
  position: relative;
  margin-bottom: 10px;
  padding-left: .5em;
  padding-bottom: .5em;
  padding-top: .5em;
  border-bottom: 4px solid #ccc;
  font-size: 120%;
}

.p-title h1::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: var(--main-color);
}

.p-title h1.kosenHP-color::after { /*edit: 2025/11/28*/
  background-color: var(--kosenHP-color);
}

.s-title {
  padding-top: 1.0em;
  padding-bottom: .5em;
  padding-left: 1em;
  text-align: left;
}

.s-title h1 {
  width: 300px;
  padding: 0.5em;
  margin-bottom: 5px;
  color: #494949;
  background: var(--color-lightgray);
  border-left: solid 5px var(--main-color);
  border-bottom: solid 3px #d7d7d7;
  font-size: 120%;
}

.s-title h1.kosenHP-color { /*edit: 2025/11/28*/
  border-left: solid 5px var(--kosenHP-color);
}

.s-title h2 {
  width: calc(100% - 1em);
  padding: 0.5em;
  padding-bottom: 0;
  padding-top: 0;
  margin-bottom: -0.25em;
  color: #494949;
  background: var(--color-lightgray);
  border-left: solid 5px var(--main-color);
  border-bottom: solid 3px #d7d7d7;
  font-size: 120%;
}

/**********************************************************************************************/

.table1 {
	padding-top: 1.0em;
	text-align: center;
	font-size: 100%;
}
.table1 thead {
    background: var(--main-color);
    color: var(--color-white);
}
.table1 th,.table1 td {
    border: 1px solid #ccc; padding: 1px;
}

.table1 td:nth-child(1) {
    background-color: var(--color-lightgray);
}

/**********************************************************************************************/

.table2 { width: 90%;
	padding-top: 1.0em;
	text-align: center;
	font-size: 75%;
}
.table2 thead {
    background: var(--main-color);
    color: var(--color-white);
}
.table2 th,.table2 td {
    border: 1px solid #ccc; padding: 1px;
}
.table2 td:nth-child(1) {
  background-color: var(--color-lightgray);
}

/**********************************************************************************************/

.table3 {padding-top: 1.0em;
	text-align: center;
}

.table3 thead {
    background: var(--main-color);
    color: var(--color-white);
}

.table3 td {
  vertical-align: top;
  text-align: left;
}

.table3 th,.table3 td {
    border: 1px solid #ccc; padding: 1px;
}

/**********************************************************************************************/

.table4 {
	padding-top: 1.0em;
}

.table4 thead {
    background: var(--main-color);
    color: var(--color-white);
}

.table4 th{
    border: 1px solid #ccc; padding: 2px;
    text-align: center;
}

.table4 td {
    border: 1px solid #ccc; padding: 2px;
    text-align: left;
}

.table4 td:nth-child(1) {
    background-color: var(--color-lightgray);
}
@media screen and (min-width: 790px)/*medium部*/{
  /***** 研究報告 *****/
  /***** Implementation in: 'houkoku / 01.html' *****/
  .list{
    margin: 0;
    padding: 0;
    padding-left: 5px;
    text-align: left;
    width: -webkit-calc(100% - 5em);
  }
  
  .list .item a:hover .title{
    color: var(--main-color);
  }


  /**********************************************************************************************/
  /***** Definition of Index ********************************************************************/
  /**********************************************************************************************/

  .calendar {
    height: 510px;
    margin: auto;
    margin-top: 50px;
  }

  .comment {
    margin-top: 50px;
    text-align: center;
    line-height: 35px;
    border: solid 2px var(--main-color);
    border-radius: 10px;
  }

  /**********************************************************************************************/
  /***** Definition of Important Announcement ***************************************************/
  /**********************************************************************************************/

  .top-news {
    position: relative;
    width: 80%;
    margin: auto;
    padding: 20px 0 20px 0;
  }

  /**********************************************************************************************/
  /***** Definition of Header *******************************************************************/
  /**********************************************************************************************/

  .logo{ /*2025/10/14追加*/
    width: auto;
    height: 60px;
    /* --- ロゴの位置調整のための追加CSS --- */
    display: block;      /* ブロック要素として振る舞わせる */
    margin-left: 80px;   /* 左端から100pxの余白（マージン）を設ける */
    margin-right: auto;  /* 右側のマージンを自動調整し、要素を左に寄せる */
  }

  /**********************************************************************************************/
  /***** Definition of Global Navigation ********************************************************/
  /**********************************************************************************************/

  ul.main-nav ul li a {
    padding-left: 3px;
    line-height: 40px;
    text-align: left;
    font-weight: normal;
    background-color: var(--color-white);
    color: var(--color-black)
  }

  /**********************************************************************************************/
  /***** Definition of Footer *******************************************************************/
  /**********************************************************************************************/

  .foot-wrap {
      background-color: var(--main-color);
      color: var(--color-white);
      text-align: center;
  }

  .foot-wrap .menu-left, .menu-center, .menu-right {
      display: inline-block;
      vertical-align: top;
      width: 25%;
      margin: 20px auto;
  }

  .foot-wrap .cmark .adress, .tel, .fax, .mail {
      display: inline-block;
      vertical-align: top;
      margin: 10px auto;
      padding: 0 10px 0 10px;
  }

  /**********************************************************************************************/
  /***** Definition of outdated class ***********************************************************/
  /**********************************************************************************************/

  .mm {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-white);
    padding: 10px;
    padding-bottom: 20px;
  }

  .s-title {
    padding-top: 1.0em;
    padding-bottom: .5em;
    padding-left: 5em;
    text-align: left;
  }

  .s-title h2 {
    width: calc(100% - 5em);
    padding: 0.5em;
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: -0.25em;
    color: #494949;
    background: var(--color-lightgray);
    border-left: solid 5px var(--main-color);
    border-bottom: solid 3px #d7d7d7;
    font-size: 120%;
  }

  /**********************************************************************************************/
  .table3 th {
    width: 200px;
  }

  .table3 td {
    width: 220px;
    vertical-align: top;
    text-align: left;
  }

  /**********************************************************************************************/


  .table4 th{
      border: 1px solid #ccc; padding: 2px;
      text-align: center;
      width: auto;
  }

  .table4 td {
      border: 1px solid #ccc; padding: 2px;
      text-align: left;
      width: auto;
  }
}
@media screen and (min-width:1020px)/*medium-wide部*/{

  /**********************************************************************************************/
  /***** Definition of css property *************************************************************/
  /**********************************************************************************************/

  a {
      text-decoration: none;
      /*color: var(--color-2);*/
  }

  /**********************************************************************************************/
  /***** Definition of functional margin ********************************************************/
  /**********************************************************************************************/

  /***** main-margin : 標準的な余白設定 *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .main-margin {
    width: 80%;
    margin: 0 auto;
    padding: .8em 2em 1.2em 2em;
    background-color: var(--color-white);
    text-align: left;
  }

  /***** wide-margin : 限定的な余白設定 *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .wide-margin {
    width: 42%;
    margin: 0 auto;
    padding: .8em 2em 1.2em 2em;
    background-color: var(--color-white);
    text-align: left;
  }

  /**********************************************************************************************/
  /***** Definition of path *********************************************************************/
  /**********************************************************************************************/

  /***** path : 記事の構造を示すナビゲーションシステム *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .mg-main {
    margin: 0 10%; /* fit main-margin */
  }

  .mg-wide {
    margin: 0 29%; /* fit wide-margin */
  }

  /**********************************************************************************************/
  /***** Definition of list *********************************************************************/
  /**********************************************************************************************/

  /***** 研究報告 *****/
  /***** Implementation in: 'houkoku / 01.html' *****/

  .list{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    text-align: left;
    width: -webkit-calc(100% - 5em);
  }

  .list .item a{
    display: flex;
    text-decoration: none;
    color: var(--color-2);
    border-bottom: 1px solid var(--color-2);
    padding: 10px 10px;
  }

  .list .item a:hover .title{
    color: var(--main-color);
  }

  /**********************************************************************************************/
  /***** Definition of Index ********************************************************************/
  /**********************************************************************************************/

  .calendar {
    height: 520px;
    width: 450px;
    margin: auto;
    margin-top: 50px;
  }

  .comment {
    margin-top: 50px;
    text-align: center;
    line-height: 35px;
    border: solid 2px var(--main-color);
    border-radius: 10px;
  }

  /**********************************************************************************************/
  /***** Definition of Important Announcement ***************************************************/
  /**********************************************************************************************/

  .top-news {
    position: relative;
    width: 70%;
    margin: auto;
    padding: 20px 0 20px 0;
  }

  /**********************************************************************************************/
  /***** Definition of Search Box ***************************************************************/
  /**********************************************************************************************/

  .search .search_container {
    position: absolute;
    top: 3em;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
    box-sizing: border-box;
    border: 2px solid white;
    padding: 3px 10px;
    border-radius: 3px;
    height: 3.3em;
    width: 60%;
    overflow: hidden;
    background-color: var(--color-white);
  }

  /**********************************************************************************************/
  /***** Definition of Header *******************************************************************/
  /**********************************************************************************************/

  .logo{ /*2025/10/14追加*/
    width: auto;
    height: 80px;
    /* --- ロゴの位置調整のための追加CSS --- */
    display: block;      /* ブロック要素として振る舞わせる */
    margin-left: 80px;   /* 左端から100pxの余白（マージン）を設ける */
    margin-right: auto;  /* 右側のマージンを自動調整し、要素を左に寄せる */
  }

  /**********************************************************************************************/
  /***** Definition of Global Navigation ********************************************************/
  /**********************************************************************************************/

  ul.main-nav li {
    width: 200px;
    display: inline-block;
    list-style-type: none;
    position: relative;
    border-left: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
  }

  ul.main-nav ul {
    margin: 0px;
    padding-left: 0px;
    display: none;
    position: absolute;
    z-index: 10000;
    height: 40px;
  }

  ul.main-nav ul li {
    width: 199px;
    border-left: 2px solid var(--color-darkgray);
    border-right: 2px solid var(--color-darkgray);
    border-bottom: 2px solid var(--color-darkgray);
  }

  ul.main-nav ul li a {
    padding-left: 3px;
    line-height: 40px;
    text-align: left;
    font-weight: normal;
    background-color: var(--color-white);
    color: var(--color-black)
  }

  /**********************************************************************************************/
  /***** Definition of Footer *******************************************************************/
  /**********************************************************************************************/

  .foot-wrap {
      background-color: var(--main-color);
      color: var(--color-white);
      text-align: center;
  }

  .foot-wrap .menu-left, .menu-center, .menu-right {
      display: inline-block;
      vertical-align: top;
      width: 25%;
      margin: 20px auto;
  }

  .foot-wrap .cmark .adress, .tel, .fax, .mail {
      display: inline-block;
      vertical-align: top;
      margin: 10px auto;
      padding: 0 10px 0 10px;
  }

  /**********************************************************************************************/
  /***** Definition of outdated class ***********************************************************/
  /**********************************************************************************************/

  .mm {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-white);
    padding: 10px;
    padding-bottom: 20px;
  }

  .s-title {
    padding-top: 1.0em;
    padding-bottom: .5em;
    padding-left: 5em;
    text-align: left;
  }

  .s-title h2 {
    width: calc(100% - 5em);
    padding: 0.5em;
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: -0.25em;
    color: #494949;
    background: var(--color-lightgray);
    border-left: solid 5px var(--main-color);
    border-bottom: solid 3px #d7d7d7;
    font-size: 120%;
  }

  .table1 {
    padding-top: 1.0em;
    text-align: center;
  }

  /**********************************************************************************************/

  .table2 {padding-top: 1.0em;
    text-align: center;
  }

  /**********************************************************************************************/

  .table3 th {
    width: 200px;
  }

  .table3 td {
    width: 220px;
    vertical-align: top;
    text-align: left;
  }

  /**********************************************************************************************/

}
@media screen and (min-width:1350px)/*wide部*/{

  /**********************************************************************************************/
  /***** Definition of css property *************************************************************/
  /**********************************************************************************************/

  img {
      max-width: 100%;
      height: auto;
  }

  /**********************************************************************************************/

  .sl{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-white);
    padding: 10px;
    padding-bottom: 20px;
  }

  .main {
    display: flex;
    margin: 2em 5%;
  }


  .main-width {
    width : 80%;
  }

  /**********************************************************************************************/

  /*
  img {
    width: 1500px;
    height: 200px;
    object-position: left;
    object-fit: cover;
  }
  */

  /**********************************************************************************************/
  /***** Definition of functional margin ********************************************************/
  /**********************************************************************************************/

  /***** main-margin : 標準的な余白設定 *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .main-margin {
    width: 80%;
    margin: 0 auto;
    padding: .8em 2em 1.2em 2em;
    background-color: var(--color-white);
    text-align: left;
  }

  /***** wide-margin : 限定的な余白設定 *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .wide-margin {
    width: 42%;
    margin: 0 auto;
    padding: .8em 2em 1.2em 2em;
    background-color: var(--color-white);
    text-align: left;
  }

  /**********************************************************************************************/
  /***** Definition of path *********************************************************************/
  /**********************************************************************************************/

  /***** path : 記事の構造を示すナビゲーションシステム *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .mg-main {
    margin: 0 10%; /* fit main-margin */
  }

  .mg-wide {
    margin: 0 29%; /* fit wide-margin */
  }

  /**********************************************************************************************/
  /***** Definition of list *********************************************************************/
  /**********************************************************************************************/

  /***** お知らせ *****/
  /***** Implementation in: 'index.html' *****/

  /*
  ul.news-list li:nth-of-type(1)::before {
    padding: .3em 0;
    border-bottom: 2px solid var(--main-color);
    color: var(--main-color);
    font-weight: bold;
    content: "NEW";
  }
  */

  /***** 研究報告 *****/
  /***** Implementation in: 'houkoku / 01.html' *****/

  .list{
    margin: 0;
    padding: 0;
    padding-left: 5px;
    text-align: left;
    width: calc(100% - 5px);
  }

  .list .item a:hover .title{
    color: var(--main-color);
  }

  .s-title .list{
    width: calc(100% - 5em + 5px);
  }

  /**********************************************************************************************/
  /**********************************************************************************************/

  figcaption{
    text-align: left;
  }

  /**********************************************************************************************/
  /**********************************************************************************************/

  .articl{
    margin: auto;
    padding-right: 5em;
    text-align: left;
  }

  /**********************************************************************************************/
  /***** Definition of Index ********************************************************************/
  /**********************************************************************************************/

  .calendar {
    height: 520px;
    width: 450px;
  }

  .miniIcon {
    text-align: center;
    display: flex;
    flex-direction: column;
    padding-left: 3em;
  }

  .comment {
    margin-top: 50px;
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
    line-height: 35px;
    border: solid 2px var(--main-color);
    border-radius: 10px;
  }

  /**********************************************************************************************/
  /***** Definition of Important Announcement ***************************************************/
  /**********************************************************************************************/

  .top-news {
      position: relative;
      width: 70%;
      margin: auto;
      padding: 20px 0 20px 0;
  }

  /**********************************************************************************************/
  /***** Definition of Search Box ***************************************************************/
  /**********************************************************************************************/

  .search .search_container {
    position: absolute;
    top: 3em;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
    box-sizing: border-box;
    border: 2px solid white;
    padding: 3px 10px;
    border-radius: 3px;
    height: 3.3em;
    width: 60%;
    overflow: hidden;
    background-color: var(--color-white);
  }

  /**********************************************************************************************/
  /***** Definition of Header *******************************************************************/
  /**********************************************************************************************/

  .logo{ /*2025/10/14追加*/
    width: auto;
    height: 90px;
    /* --- ロゴの位置調整のための追加CSS --- */
    display: block;      /* ブロック要素として振る舞わせる */
    margin-left: 100px;   /* 左端から100pxの余白（マージン）を設ける */
    margin-right: auto;  /* 右側のマージンを自動調整し、要素を左に寄せる */
  }

  /**********************************************************************************************/
  /***** Definition of Global Navigation ********************************************************/
  /**********************************************************************************************/

  ul.main-nav li {
    width: 200px;
    display: inline-block;
    list-style-type: none;
    position: relative;
    border-left: 1px solid var(--color-white);
    border-right: 1px solid var(--color-white);
  }

  ul.main-nav ul {
    margin: 0px;
    padding-left: 0px;
    display: none;
    position: absolute;
    z-index: 10000;
    height: 40px;
  }

  ul.main-nav ul li {
    width: 199px;
    border-left: 2px solid var(--color-darkgray);
    border-right: 2px solid var(--color-darkgray);
    border-bottom: 2px solid var(--color-darkgray);
  }

  ul.main-nav ul li a {
    padding-left: 3px;
    line-height: 40px;
    text-align: left;
    font-weight: normal;
    background-color: var(--color-white);
    color: var(--color-black)
  }

  /**********************************************************************************************/
  /***** Definition of Footer *******************************************************************/
  /**********************************************************************************************/

  .foot-wrap {
    background-color: var(--main-color);
    text-align: center;
  }

  .foot-wrap .menu-left, .foot-wrap .menu-center, .foot-wrap .menu-right {
    display: inline-block;
    width: 25%;
    margin: 20px auto;
    color: var(--color-white);

    vertical-align: top;
  }

  .foot-wrap a {
      color: var(--color-white);
  }

  .foot-wrap .cmark {
      display: block;
      padding: 10px;
      border-top: 1px solid var(--color-white);
      width: 76.5%;
      margin: 0 auto;
      color: var(--color-white);
  }

  .foot-wrap .cmark .adress, .tel, .fax, .mail {
      display: inline-block;
      vertical-align: top;
      margin: 10px auto;
      padding: 0 10px;
  }

  /**********************************************************************************************/
  /***** Definition of outdated class ***********************************************************/
  /**********************************************************************************************/

  .mm {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-white);
    padding: 10px;
    padding-bottom: 20px;
  }

  .p-title h1 {
    position: relative;
    margin-bottom: 10px;
    padding-left: .5em;
    padding-bottom: .5em;
    padding-top: .5em;
    border-bottom: 4px solid #ccc;
    font-size: 150%;
  }

  .s-title {
    padding-top: 1.0em;
    padding-bottom: .5em;
    padding-left: 5em;
    text-align: left;
  }

  .s-title h2 {
    width: calc(100% - 5em);
    padding: 0.5em;
    padding-bottom: 0;
    padding-top: 0;
    margin-bottom: -0.25em;
    color: #494949;
    background: var(--color-lightgray);
    border-left: solid 5px var(--main-color);
    border-bottom: solid 3px var(--color-darkgray);
    font-size: 120%;
  }

  .table1 {
    padding-top: 1.0em;
    text-align: center;
  }

  /**********************************************************************************************/

  .table2 {padding-top: 1.0em;
    text-align: center;
  }

  /**********************************************************************************************/

  .table3 th {
    width: 200px;
  }

  .table3 td {
    width: 220px;
    vertical-align: top;
    text-align: left;
  }

  /**********************************************************************************************/

}
@media print/*print部*/{

  html {
    font-size: 80%;
  }

  /**********************************************************************************************/
  /***** Definition of css property *************************************************************/
  /**********************************************************************************************/

  a {
    text-decoration: none;
  }

  .figure {
    width: 350px;
    height: auto;
  }

  /**********************************************************************************************/
  /***** Definition of functional margin ********************************************************/
  /**********************************************************************************************/

  /***** main-margin : 標準的な余白設定 *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .main-margin {
    width: 80%;
    margin: 0 auto;
    padding: .8em 2em 1.2em 2em;
    background-color: var(--color-white);
    text-align: left;
  }

  /***** wide-margin : 限定的な余白設定 *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .wide-margin {
    width: 42%;
    margin: 0 auto;
    padding: .8em 2em 1.2em 2em;
    background-color: var(--color-white);
    text-align: left;
  }

  /**********************************************************************************************/
  /***** Definition of path *********************************************************************/
  /**********************************************************************************************/

  /***** path : 記事の構造を示すナビゲーションシステム *****/
  /***** NOT Common to all CSS files *****/
  /***** print, wide, medium-wideで共通 *****/

  .mg-main {
    margin: 0 10%; /* fit main-margin */
  }

  .mg-wide {
    margin: 0 29%; /* fit wide-margin */
  }

  /**********************************************************************************************/
  /***** Definition of list *********************************************************************/
  /**********************************************************************************************/

  /***** 研究報告 *****/
  /***** Implementation in: 'houkoku / 01.html' *****/

  .list{
    margin: 0;
    padding: 0;
    padding-left: 5px;
    text-align: left;
  }

  /**********************************************************************************************/
  /**********************************************************************************************/

  .picmargin{
    padding-top: -5em;
  }

  /**********************************************************************************************/
  /***** Definition of Search Box ***************************************************************/
  /**********************************************************************************************/

  .search .search_container {
    position: absolute;
    top: 3em;
    right: 0;
    bottom: 0;
    left: 0;

    margin: auto;
    box-sizing: border-box;
    border: 2px solid white;
    padding: 3px 10px;
    border-radius: 3px;
    height: 3.3em;
    width: 60%;
    overflow: hidden;
    background-color: var(--color-white);
  }

  /**********************************************************************************************/
  /***** Definition of Header *******************************************************************/
  /**********************************************************************************************/

  .logo{
    width: auto;
    height: 70px;
  }

  /**********************************************************************************************/
  /***** Definition of Footer *******************************************************************/
  /**********************************************************************************************/

  .foot-wrap .menu-left, .menu-center, .menu-right {
      display: inline-block;
      vertical-align: top;
      width: 25%;
      margin: 20px auto;
  }

  /**********************************************************************************************/
  /***** Definition of outdated class ***********************************************************/
  /**********************************************************************************************/

  .mm {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--color-white);
    padding: 10px;
    padding-bottom: 20px;
  }

  /**********************************************************************************************/

}