@charset "UTF-8";

/* --- 全体の背景・テキスト --- */
body {
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* 全体の背景色 */
  color: #304040; /* 全体の文字色 */
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", sans-serif;
  font-size: 80%; /* 全体の文字サイズ */
  overflow-x: hidden;
}

/* --- ページ遷移設定 --- */
body{
  -webkit-animation: fadeIn 0.6s ease;
  animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

/* --- 全体のリンクテキスト --- */
  a:not(.link-btn):not(.pdf-btn):link { color: #0000ff; }
  a:not(.link-btn):not(.pdf-btn):visited { color: #000090; }
  a:not(.link-btn):not(.pdf-btn):hover { color: #ff8000; }
  /* a:not(.link-btn):not(.pdf-btn):active { color: #ff0000; }*/
  a:not(.link-btn):not(.pdf-btn) {
  text-decoration: none;  
  transition: 0.3s;
  position: relative;
  display: inline-block;
}

a:not(.link-btn):not(.pdf-btn):not(.thumbnail)::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  background-color: #ff8000;
  transition: .3s;
  transform: translateX(-50%);
}

a:not(.link-btn):not(.pdf-btn):hover::after{
  width: 100%;
}

/* --- 英語・日本語ボタン --- */
.link-btn {
  display: inline-block;
  max-width: 180px;
  text-align: left;
  vertical-align: top;
  border: 2px solid #9ec34b;
  font-size: 70%;
  color: #9ec34b;
  text-decoration: none;
  font-weight: bold;
  padding: 1px 8px;
  border-radius: 4px;
  transition: .4s;
}

.link-btn:hover {
  background-color: #9ec34b;
  border-color: #cbe585;
  color: #FFF;
}

/* --- pdfボタン --- */
.pdf-btn {
  display: inline-block;
  max-width: 180px;
  text-align: left;
  border: 2px solid #55acec;
  font-size: 70%;
  color: #55acec;
  text-decoration: none;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 4px;
  transition: .4s;
}

.pdf-btn:hover {
  background-color: #55acec;
  border-color: #a7dcdc;
  color: #FFF;
}

/* --- thumbnail --- */
.trim{
  width: 80px;
  height: 60px;
  object-fit: cover; 
}

.thumbnail:hover{
  position: relative;
  top: 1px;
  left: 1px;
}


/* --- コンテナ --- */
#header div.container {
	width: 780px; /* コンテナの幅  */
	margin: 0 auto; /* センタリング */
}

/* --- ▼ヘッダ内の設定開始 --- */

/* --- ヘッダ --- */
#header{
  margin-bottom: 20px; /* ヘッダの下マージン */
  padding: 10px 0; /* ヘッダのパディング（上下、左右） */
  background-color: #f9f9f9; /* ヘッダの背景色 */
  border-top: 3px #c0c0c0 solid; /* ヘッダの上境界線 */
  border-bottom: 1px #c0c0c0 solid; /* ヘッダの下境界線 */
}

/* --- サイトタイトル --- */
#header h1.siteTitle {
  margin: 0 0 3px; /* サイトタイトルのマージン（上、左右、下） */
  font-size: 190%; /* サイトタイトルの文字サイズ */
}

/* --- キャッチフレーズ --- */
#header p.catch {
  margin: 0 0 0px; /* キャッチフレーズのマージン（上、左右、下） */
}
#header p.catch strong {
  font-weight: normal; /* 文字の太さ（ノーマル） */
}

/* --- オープニングエリア（トップページ） --- */
#header div.opening {
  margin-bottom: 2px; /* オープニングエリアの下マージン */
}

/* --- ロゴの回転 --- */
@keyframes roll {
  0% { transform: perspective(500px) rotateY(0deg); }
  5%{  transform: perspective(500px) rotateY(90deg); }
  15%{ transform: perspective(500px) rotateY(180deg) ;}
  40%{ transform: perspective(500px) rotateY(270deg); }
  100%{transform: perspective(500px) rotateY(360deg); }
}
.rolling:hover{
  animation: roll 2s;
}    

/* --- ▲ヘッダ内の設定終了 --- */


/* --- ▼コンテンツ内の設定開始 --- */

/* --- コンテンツ --- */
#content {
  margin-bottom: 10px; /* コンテンツの下マージン */
}


/* --- ▼メインカラム内の設定開始 --- */

/* --- メインカラム --- */
#main {
  float: right; 
  width: 100%;
  max-width: -webkit-calc(100% - 235px);
  max-width: calc(100% - 235px);
}

/* --- ページタイトル（下層ページ） --- */
#main h1.pageTitle {
  margin: 0 5px 15px 5px; /* ページタイトルのマージン（上右下左） */
  padding: 8px 10px; /* ページタイトルのパディング（上下、左右） */
  background-color: #e0e0e0; /* ページタイトルの背景色 */
  font-size: 160%; /* ページタイトルの文字サイズ */
}

/* --- セクション（共通設定） --- */
#main div.section {
  margin: 0 5px 1em 5px; /* セクションのマージン（上右下左） */
}

/* --- 標準セクション --- */
/* 見出し */
#main div.normal h2 {
  margin: 0 0 0.4em; /* 見出しのマージン（上、左右、下） */
  padding: 5px 8px; /* 見出しのパディング（上下、左右） */
  background-color: #e0e0e0; /* 見出しの背景色 */
  font-size: 130%; /* 見出しの文字サイズ */
}
/* 段落 */
#main div.normal p {
  margin: 0 5px 1em; /* 段落のマージン（上、左右、下） */
  line-height: 160%; /* 行の高さ */
}

/* --- 強調セクション --- */
#main div.emphasis {
  padding: 1.1em 15px 0; /* セクションのパディング（上、左右、下） */
  border: 1px #c0c0c0 solid; /* セクションの境界線 */
}
 /* 見出し */
#main div.emphasis h2 {
  margin: 0 0 0.8em; /* 見出しのマージン（上、左右、下） */
  font-size: 130%; /* 見出しの文字サイズ */
  color: #ff8060; /* 見出しの文字色 */
}
 /* 段落 */
#main div.emphasis p {
  margin: 0 0 1em; /* 段落のマージン（上、左右、下） */
  line-height: 150%; /* 行の高さ */
}

/* --- 新着情報（トップページ） --- */
#main div.update dl {
  width: auto; /* 新着情報の幅（メインカラムの幅から30px引いた値）***630 */
  margin: 0 auto; /* センタリング */
}
/* 日付エリア */
#main div.update dt {
  width: 6.7em; /* 日付エリアの幅 */
  float: left;
  padding: 7px 0 6px 3px; /* 日付エリアのパディング（上右下左） */
  line-height: 120%; /* 行の高さ */
}
/* 本文エリア */
#main div.update dd {
  margin: 0;
  padding: 7px 3px 6px 6.6em; /* 本文エリアのパディング（上右下左） */
  border-bottom: 1px #c0c0c0 dotted; /* 本文エリア下境界線 */
  line-height: 120%; /* 行の高さ */
}

/* --- ▲メインカラム内の設定終了 --- */


/* --- ▼サイドバー内の設定開始 --- */

/* --- サイドバー --- */
#side_nav {
  float: left;
  width: 235px; /* サイドバーの幅 */
  /* ついてくるサイドバー */
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
}

/* --- セクション（共通設定） --- */
.nav div.section {
  margin: 0 5px 10px 10px; /* ページタイトルのマージン（上右下左） */
}
/* 見出し */
.nav div.section h2 {
  margin: 0 0 0.7em; /* 見出しのマージン（上、左右、下） */
  padding: 5px 8px; /* 見出しのパディング（上下、左右） */
  font-size: 120%; /* 見出しの文字サイズ */
}
/* 段落 */
.nav div.section p {
  margin: 0 10px 0.7em; /* 段落のマージン（上、左右、下） */
  line-height: 115%; /* 行の高さ */
}

/* --- 標準セクション（グレー） --- */
.nav div.normal {
  border: 1px #c0c0c0 solid; /* セクションの境界線 */
}
/* 見出し */
.nav div.normal h2 {
  background-color: #e0e0e0; /* 見出しの背景色 */
}

/* --- 強調セクション1（水色） --- */
.nav div.emphasis {
  border: 1px #92c2dc solid; /* セクションの境界線 */
}
/* 見出し */
.nav div.emphasis h2 {
  background-color: #a7dcfc; /* 見出しの背景色 */
}

/* --- 強調セクション2（グリーン） --- */
.nav div.strong {
  border: 1px #8aab43 solid; /* セクションの境界線 */
}
/* 見出し */
.nav div.strong h2 {
  background-color: #9acd32; /* 見出しの背景色 */
}

/* --- ▲サイドバー内の設定終了 --- */


/* --- 罫線 --- */
#content hr.clear {
  clear: right; /* 右フロートのクリア */
  width: 100%;
  margin: 0;
  visibility: hidden; /* 非表示 */
}

/* --- ▲コンテンツ内の設定終了 --- */


/* --- ▼フッタ内の設定開始 --- */

/* --- フッタ --- */
#footer {
  padding: 15px 0 20px; /* フッタのパディング（上、左右、下） */
  background-color: #e9e9e9; /* フッタの背景色 */
  border-top: 1px #c0c0c0 solid; /* フッタの上境界線 */
  text-align: center;
  width: auto;
}

/* --- ▲フッタ内の設定終了 --- */


/* --- ▼その他の設定開始 --- */

/* --- clearfix --- */
.clearFix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearFix {
  min-height: 1px;
}

/* --- ▲その他の設定終了 --- */

 /* ↓レイアウト */
 #nav-drawer {
  display: table;
  width: 100%;
}
#drawer-left {
 display: table-cell;
}
#drawer-right {
  display: table-cell;
}
#drawer-right h2{
  font-size: 25px;
}
#drawer-right h3{
  font-size: 18px;
}

/*  ======================== */
/*  レスポンシブデザイン       */
/*  ======================== */

#menu_header {
  display:none;/*PC時は非表示*/
  /* ついてくる */
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1000;
}

/* ↓レイアウト全体領域 */
#content {
  display: table;
  width: 100%;
}
/* ▽サイドカラムの装飾 */
#side_nav {
 display: table-cell;
}
/* ▼メインカラムの装飾 */
#main {
  display: table-cell;
}


/* ==================================== */
/* ▼横幅820px以下の場合に適用されるCSS */	
/* ==================================== */

@media (max-width: 820px) {
  #side_nav {
    display:none;/*モバイル時は非表示*/
  }
  #header {
    display:none;/*モバイル時は非表示*/
  }
  #menu_header {
    display:block;/*モバイル時は表示*/
  }

  #main {
    float: center; 
    max-width: 100%;
  }

  .nav div.section {
    margin: 2px 5px 10px 5px; /* マージン（上右下左） */
  }

  #main h1.pageTitle {
    margin: 5px 5px 15px 5px; /* ページタイトルのマージン（上右下左） */
  }    
}

/* slick slider の設定 */
#slider-wrapper{
  /* 最小横幅 - サイドバー幅(235px) - sectionのマージン(10px) -emphasisのpadding(30px)*/ 
  width: -webkit-calc(820px - 235px - 10px - 30px);
  width: calc(820px - 235px - 10px - 30px);
  margin: 0 auto; /* センタリング */
}

@media (max-width: 600px) {
  #drawer-right h2{
    font-size: 15px;
  }
  #drawer-right h3{
    font-size: 13px;
  }
  .minilogo{
    height: 16px;
  }
  #slider-wrapper{
    width: -webkit-calc(380px - 10px - 30px);
    width: calc(380px - 10px - 30px);
  }
}

@media (max-width: 400px) {
  #slider-wrapper{
    width: 170px;
  }
}