@charset "utf-8";
/*Google Font*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

/*slide.cssの読み込み*/
@import url(slide.css);

/*inview.cssの読み込み*/
@import url(inview.css);

/*flex.cssの読み込み*/
@import url(flex.css);

/*全端末（PC・タブレット・スマホ）共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body,
html {
  width: 100%;
  height: 100%;
}
body {
  margin: 0px;
  padding: 0px;
  color: #333; /*全体の文字色*/
  font-family: "Noto Sans JP", sans-serif, "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "MS PGothic"; /*フォント種類*/
  font-size: 14px; /*文字サイズ*/
  line-height: 2; /*行間*/
  background: #fff; /*背景色*/
  -webkit-text-size-adjust: none;
}
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd,
form,
figure,
form,
input,
textarea {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style-type: none;
}
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
table {
  border-collapse: collapse;
  font-size: 100%;
  border-spacing: 0;
}
iframe {
  width: 100%;
}

/*リンク（全般.ブックマーク）設定
---------------------------------------------------------------------------*/
a {
  color: #333; /*リンクテキストの色*/
  transition: 0.4s; /*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
  text-decoration: none; /*リンク（下線を消す）*/
}
a:hover {
  color: #6d5d01; /*マウスオン時の文字色*29acef/
  text-decoration: none; /*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

a.anchor {
  display: block; /*ブックマーク上部の空き調整*/
  padding-top: 100px;
  margin-top: -80px;
}
/*==========================================================================
   バックグラウンド form
----------------------------------------------------------------------------*/
.bgset {
  /*width: 100%;        /*最初が前面、次が背面*/
  /*height: auto;*/
  background-image: url("../images/bg_snail.png"), url("../images/bg_washi.png");
  background-size: 20% auto cover;
  background-position: right 10% top 15%, center;
  background-repeat: no-repeat, repeat;
}

/*container。サイト全体を囲むブロック
---------------------------------------------------------------------------*/
#container {
  max-width: 1500px; /*最大幅。これ以上幅が広くならないように。*/
  margin: 0 auto;
}

/*contentsブロック。mainとsubを囲むブロック。
---------------------------------------------------------------------------*/
#contents {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: auto;
}
/*contentsの中にあるinner----------------------------------------------------*/
#contents .inner {
  overflow: hidden;
  max-width: 1050px;
  padding: 135px 2% 0 0 !important; /*上,右,下,左へのブロック内の余白*/
  margin: 0 15% 0 15%;
}
/*contentsの中にあるtop用inner*/
#contents .topinner {
  overflow: hidden;
  max-width: 1050px;
 padding: 10px 2% 0 0 !important; /*上,右,下,左へのブロック内の余白*/
  margin: 0 15% 0 15%;
}
#contents .subinner {
  overflow: hidden;
  max-width: 950px;
  /*padding: 10px 10px 0 0; /*上下、左右へのブロック内の余白*/
  margin: 15px 50px 40px 100px;
}

/*header
「top: -80px」の「80」の数字は、headerのheight(高さ)に合わせる。
---------------------------------------------------------------------------*/
/*アニメーションフレーム*/
@keyframes header {
  0% {
    opacity: 0;
    top: -100px;
  }
  100% {
    opacity: 1;
    top: 0px;
  }
}
/*headerブロック (背景form)*/
.visible {
  position: fixed; /*固定表示*/
  left: 0px;
  top: 0px;
  z-index: 2;
  width: 100%; /*幅*/
  height: 100px; /*高さ*/
}
header {
  position: fixed; /*固定表示*/
  left: 0px;
  top: 0px;
  z-index: 2;
  width: 100%; /*幅*/
  height: 100px; /*高さ*/
  background: #fff; /*背景色*/
  box-shadow: 0px 0px 30px 30px #fff;
}

/*headerブロック（トップページへの追加設定）*/
.home header {
  animation-name: header; /*上で設定しているキーフレーム（keyframes）の名前*/
  animation-delay: 5s; /*アニメーションを遅れて開始させる。「s」は秒の事。*/
  animation-duration: 0.2s; /*アニメーションの実行時間。「s」は秒の事。*/
  animation-fill-mode: both; /*アニメーションの待機中は最初のフレームを、アニメーションの完了後は最後のフレームを維持する。*/
  animation-timing-function: ease-in-out;
  background: #fff; /*背景色（古いブラウザ用）*/
  background: rgba(
    255,
    255,
    255,
    0.9
  ); /*背景色。255,255,255は白の事で0.9は色が90%出た状態の事。*/
  box-shadow: none;
}
/*ロゴ画像*/
header #logo img {
  width: 180px; /*画像の幅*/
  position: absolute;
  left: 3%; /*ヘッダーブロックに対して左から3%の場所に配置*/
  bottom: 15px; /*ヘッダーブロックに対して下から15pxの場所に配置*/
}

/*headerアイコン（facebookやtwitterなどのアイコンブロック）
---------------------------------------------------------------------------*/
/*アイコンを囲むブロック全体の設定*/
header .icon {
  position: absolute;
  right: 3%; /*ヘッダーブロックに対して右から3%の場所に配置*/
  bottom: 10px; /*ヘッダーブロックに対して下から10pxの場所に配置*/
}
/*アイコン１個あたりの設定*/
header .icon li {
  display: inline; /*横並びにさせる指定*/
}
/*アイコン画像の設定*/
header .icon img {
  width: 40px; /*画像の幅*/
  margin-left: 5px; /*画像同士の余白*/
}


/*GoogleMAP設定
---------------------------------------------------------------------------*/
iframe {
  width: 100%;
}
/*inner
---------------------------------------------------------------------------*/
/*.inner {
  max-width: 1000px; /*サイトの最大幅*/
  /*margin: 0 12% 0 13%;
  padding-left: 1% !important;
  padding-right: 1% !important;
}*/
/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック*/
#menubar {
  overflow: hidden;
  clear: both;
  position: absolute;
  left: 260px; /*ヘッダーブロックに対して左から260pxの場所に配置*/
  bottom: 10px; /*ヘッダーブロックに対して下から10pxの場所に配置*/
  z-index: 20;
}
/*メニュー１個あたりの設定*/
#menubar li {
  overflow: hidden;
  float: left; /*左に回り込み*/
  text-align: center; /*文字をセンタリング*/
  padding: 0px 10px; /*上下、左右へのメニュー内の余白*/
}
#menubar li a {
  display: block;
  text-decoration: none;
  padding-top: 3px; /*下のブロックの「border-bottom」と「bottom」の数字と合わせる。*/
}
/*下線のアニメーション設定*/
#menubar li::after {
  transition: 0.3s; /*0.3秒かけてアニメーションを実行する。*/
  content: "";
  display: block;
  border-bottom: 3px solid #6d5d01; /*下線の幅、線種、色。上のブロックの「padding-top」と、下の行の「bottom」の数字と合わせる。*/
  position: relative;
  left: 0px;
  bottom: -3px; /*bottomの数字は上のブロックの「padding-top」と、上の行の「border-bottom」の数字と合わせる。※マイナス記号は残したまま。*/
}
/*マウスオン時、現在表示中(current)、共通設定*/
#menubar li:hover::after,
#menubar li.current::after {
  bottom: 0px;
}
/*スマホ用メニューを表示させない*/
#menubar-s {
  display: none;
}
/*３本バーアイコンを表示させない*/
#menubar_hdr {
  display: none;
}

/*mainブロック
---------------------------------------------------------------------------*/
/*mainブロック*/
/*#main {
  overflow: hidden;
  width: 75%; /*幅
  max-width: 1050px;
  /*float: right; 右に回り込み
  margin: auto;
}
/*トップページのmainブロックの指定
.home #main {
  width: 100%;
  float: none;
}
/*１カラム時のmainブロックの指定
.c1 #main {
  width: 80%;
  margin: auto;
}
/*h2タグ*/

h2.headline {
  clear: both;
  margin-bottom: 30px;
  font-size: 2.4rem; /*文字サイズ 2408*/
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/
  padding: 0 20px 10px; /*上、左右、下へのタグ内の余白*/
  letter-spacing: -0.05em; /*文字間隔を少し狭く*/
  line-height: 1.2; /*行間を少し狭くする*/
}

/*h2タグ内のspanタグ（小文字）*/
h2.headline span {
  display: block;
  font-size: 0.8rem; /*文字サイズ 2408*/
  font-weight: 500;
  letter-spacing: 0.1em; /*文字間隔を少し広くとる指定*/
  padding-left: 3px; /*左に空ける余白*/
  padding-bottom: 10px; /*下に空ける余白*/
}
/*h2 Exhibition,event.html 2408移動
----------------------------------------------*/
h2.secondline {
  padding-bottom: 10px;
  font-size: 1.8rem;
  font-weight: 500;
  background-image: repeating-linear-gradient(
    90deg,
    #b4a983 0,
    #b4a983 2px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0) 4px
  );
  background-size: 4px 4px;
  background-repeat: repeat-x;
  background-position: center bottom;
  line-height: 1.5; /*行間を少し狭く*/
}
/*h3タグ*/
h3 {
  clear: both;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/
  padding-left: 7px; /*左に空ける余白*/
  font-weight: 600;
  font-size: 1.7rem; /*文字サイズ*/
  position: relative;
}
/*h4タグ*/
h4 {
  clear: both;
  margin-bottom: 15px;
  margin-left: 15px;
  padding-left: 5px; /*左に空ける余白*/
  font-size: 20px; /*文字サイズ*/

}
/*h4タグの左のアクセントライン*/
h4::first-letter {
  border-left: 5px solid #6d5d01; /*左側の線の幅、線種、色*/
  padding-left: 10px; /*ラインと文字との間の余白*/
}

/*段落(p)タグ*/
#contents p {
  padding: 0 20px 20px; /*上、左右、下への余白*/
}
/*他。微調整。*/
#contents p + p {
  margin-top: -5px;
}
#contents h2 + p,
#contents h3 + p {
  margin-top: -10px;
}
#contents section + section {
  clear: both;
  padding-top: 40px;
}
.fl + .fr {
  clear: none !important;
  padding-top: 0 !important;
}

/*subブロック
---------------------------------------------------------------------------*/
/*subブロック*/
#sub {
  width: 20%; /*幅*/
  float: left; /*左に回り込み*/
}
/*１カラム時のsubブロック。非表示にする指定*/
.c1 #sub {
  display: none;
}
/*h2タグ*/
#sub h2 {
  border: 1px solid #000; /*枠線の幅、線種、色*/
  text-align: center; /*文字をセンタリング*/
}

/*サブメニュー
---------------------------------------------------------------------------*/
/*メニュー全体のブロック*/
.submenu {
  margin-bottom: 20px; /*下に空けるスペース*/
}
/*メニュー１個あたりの指定*/
.submenu a {
  display: block;
  text-decoration: none;
  text-align: center; /*文字をセンタリング*/
  padding: 5px; /*メニュー内の余白*/
  border-bottom: 1px solid #000; /*下線の幅、線種、色*/
}

/*=========================================================================
  footerブロック
===========================================================================*/
footer {
  clear: both;
  margin: 0;
  padding-top: 30px;
  text-align: center;
  font-size: 14px;
}
footer .navi {
  padding: 14px 0 8px 0;
  margin: 0;
  color: #333;
}
footer .navi a:hover {
  font-weight: 500;
  color: #6d3b01;
}
footer .copy {
  padding-top: 2px;
  font-size: 0.9em;
  color: #555;
}

/*listブロック（index2.htmlで使用）
---------------------------------------------------------------------------*/
/*listブロック*/
.list {
  overflow: hidden;
  padding: 1px 10px; /*上下、左右へのブロック内の余白*/
  border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/
}
/*画像*/
.list figure img {
  float: right; /*左に回り込み*/
  width: 15%; /*画像の幅*/
  border-radius: 50%; /*丸くする指定。10pxなどにすると角が丸い四角形になります。完全な四角形がいいならこの１行削除。*/
}
/*画像にtextブロックが続いた場合*/
figure + .text {
  float: right; /*textブロックを右に回り込み*/
  width: 83%; /*ブロック幅*/
}
/*h4見出し*/
.list h4 {
  font-size: 20px; /*文字サイズを少し大きく*/
  font-weight: bold;
}
/*段落(p)タグ*/
.list p {
  padding: 0 !important;
  line-height: 1.5; /*行間を少し狭く*/
}
/*=======================================================================
   time(更新日)
=========================================================================*/
time {
  display: block;
  width: 100%;
  /*padding: 2px 16px 16px 40px;*/
  background-position: left 14px center;
  background-repeat: no-repeat;
  /*background-size: 16px 16px;*/
  overflow-wrap: break-word;
  background-image: url(../images/clock.png);
  font-size: small;
  padding-left: 36px; /*左に空ける余白*/
}
/*NEWSブロック
---------------------------------------------------------------------------*/
/*見出設定*/
.news dt {
  clear: both;
  /*letter-spacing: 0.1em; /*文字間隔を少し広くとる指定*/
  font-size: 1.2rem; /*文字サイズ*/
  font-weight: 600; /*太字にする*/
  /*color: #555;*/
  padding: 10px 10px 10px; /*上、左右、下への余白*/
}
/*記事設定*/
.news dd {
  overflow: hidden;
  border-bottom: 1px solid #ccc; /*下線の幅、線種、色*/
  padding: 0px 20px 5px; /*上、左右、下への余白*/
}
/*右に回り込みの小さな画像*/
.news dd .img {
  width: auto; /*画像の幅*/
  float: right; /*右に回り込み*/
  margin-left: 30px;
}

/*NEWSブロック内のアイコン（INFORMATION,EVENT,INFOなどのアイコン）
---------------------------------------------------------------------------*/
/*アイコン共通*/
.noteicon {
  display: inline-block;
  /*background: #eee; /*背景色*/
  /*border: 1px solid #ccc; /*枠線の幅、線種、色*/
  border-radius: 5%;
  font-size: 1rem; /*文字サイズ*/
  padding: 3px 10px; /*上下、左右へのアイコン内の余白*/
  margin:0 0 0 30px;/*左に空けるスペース。見出との間の余白*/
}
/*リンク設定した場合*/
.news .icon a {
  text-decoration: none;
  display: block;
  color: #fff; /*文字色*/
}
/*EVENT*/
.news .icon.event {
  border: none; /*枠線を消す設定*/
  background: #ff2508; /*背景色*/
  color: #fff; /*文字色*/
}
/*EXHIB*/
.news .icon.exhibi {
  border: none; /*枠線を消す設定*/
  background: #879d4e; /*背景色リーフG 初期値#27c208*/
  color: #000; /*文字色*/
}

/*INFO*/
.news .icon.info {
  border: none; /*枠線を消す設定*/
  background: #0846ff; /*背景色*/
  color: #fff; /*文字色*/
}

/*SHOP*/
.news .icon.shop {
  border: none; /*枠線を消す設定*/
  background: #bc747d; /*背景色*/
  color: #fff; /*文字色*/
}

/*注意喚起*/
.news .icon.imp {
  border: 1px solid red; /*枠線レッド*/
  background: none; /*背景色なし*/
  color: #000; /*文字色ブラック*/
}
/*終了アナウンス*/
.news .icon.cl {
  border: 1px solid #000; /*枠線ブラック*/
  background: none; /*背景色:黒茶*/
  color: #000; /*文字色ブラック*/
}

/*ダウンロード*/
.news .icon.dl {
  border: none; /*枠線ブラック*/
  background: #7e9c2d; /*背景色:グリーン*/
  color: #fff; /*文字色ホワイト*/
}

/*EVENT、NEWSをリンク設定した場合*/
.news .icon.event a,
.news .icon.info a,
.news .icon.news a,
news .icon.exhibi a {
  color: #fff; /*文字色*/
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
  border: 0px solid #ccc; /*テーブルの枠線の幅 0に変更、線種、色#000→#ccc*/
  /*-border-bottom: none;	/*下線だけ消す*/
  text-align: left; /*文字を左寄せ*/
  font-size: large; /*文字サイズ(大） 変更*/
  font-weight: bold; /*太字に*/
  padding: 10px; /*ボックス内の余白*/
  /*-background: #eee;	/*背景色*/
}
/*テーブルの見出し（※tamidashi）*/
.ta1 th.tamidashi {
  width: auto;
  text-align: left; /*左よせ*/
  /*background: #eee; /*背景色*/
}
/*ta1設定*/
.ta1 {
  table-layout: fixed;
  width: 100%;
  margin: 0 auto 30px;
}
.ta1,
.ta1 td,
.ta1 th {
  word-break: break-all;
  border: 1px solid #ccc; /*テーブルの枠線の幅、線種、色#000→#ccc*/
  padding: 10px; /*ボックス内の余白*/
}
/*ta1の左側ボックス*/
.ta1 th {
  font-size: medium;
  color: #555;
  width: 200px; /*幅*/
  text-align: left; /*センタリング*/
}

/*右に回り込みの小さな画像*/
.ta1 img {
  width: 170px; /*画像の幅*/
  float: left; /*right左に回り込み*/
}
/*--table（ta2）--------------*/
.ta2 {
  table-layout: fixed;
  width: 80%;
  margin: 0 auto 30px;
}
.ta2,
.ta2 td,
.ta2 th {
  word-break: break-all;
  vertical-align: top;
  text-align: center; /*センタリング*/
  border: 1px solid #646262; /*テーブルの枠線の幅、線種、色#000→#ccc*/
  padding: 5px; /*ボックス内の余白*/
}
/*ta2の左側ボックス*/
.ta2 th {
  font-size: medium;
  width: 20px; /*幅*/
}

/*右に回り込みの画像-170*/
.ta2 img {
  width: 170px; /*画像の幅*/
  float: right; /*左に回り込み*/
}

/*----------ta5--------------*/
/*ta5設定*/
.ta5 {
  table-layout: fixed;
  width: 100%;
  margin: 0 auto 30px;
}
.ta5,
.ta5 td,
.ta5 th {
  /*word-break: break-all;*/
  vertical-align: bottom;
  border-top: 1px solid #ccc; /*テーブルの枠線の幅、線種、色#000→#ccc*/
  padding: 10px; /*ボックス内の余白*/
}
/*ta5の左側ボックス*/
.ta5 td {
  /*-font-size:medium;-*/
  width: 33%; /*幅*/
  text-align: center; /*センタリング*/
}

/*右に回り込みの小さな画像*/
/*.ta5 img {
	width: 170px;	画像の幅
	float:left;	    左に回り込み
}*/

/*btnの設定
---------------------------------------------------------------------------*/
p.btn {
  margin: 0;
}

/*ボタンを囲むブロック*/
.btn {
  text-align: center; /*内容をセンタリング*/
}

/*ボタン*/
.btn a,
.btn input {
  display: inline-block;
  text-decoration: none;
  border: none;
  font-size: 1em;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.2は色が20%出た状態。*/
  background: linear-gradient(
    150deg,
    #a29276,
    #635741
  ); /*背景グラデーション。#logoと合わせています。*/
  letter-spacing: 0.1em; /*文字間隔を少し広くする指定*/
  color: #fff; /*文字色*/
  transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
  padding: 1em 2em; /*余白*/
  margin: 0 auto 30px; /*ボタンの外側に空けるスペース。上、左右、下への順番。*/
}

/*ボタンのマウスオン時*/
.btn a:hover,
.btn input:hover {
  cursor: pointer; /*inputタグを使う場合に「手」のマークになるように。リンクと同じ表示になるようにという事です。*/
  opacity: 0.8; /*冒頭のリンクテキストのhoverと合わせました*/
  transform: scale(1.02); /*実寸の102%に拡大*/
}

/*checkブロック。赤い注意書きブロックです。
---------------------------------------------------------------------------*/
p.check {
  background: #ff0000;
  color: #fff;
  padding: 10px 25px !important;
  margin-bottom: 20px;
}
p.check a {
  color: #fff;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
@keyframes scroll {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
  display: none;
}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
  display: block;
  text-decoration: none;
  text-align: center;
  z-index: 100;
  position: fixed;
  animation-name: scroll;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  width: 40px; /*ボタンの幅*/
  line-height: 40px; /*ボタンの高さ*/
  bottom: 20px; /*ウィンドウの下から20pxの場所に配置*/
  right: 3%; /*ウィンドウの右から3%の場所に配置*/
  background: #555; /*背景色*/
  color: #fff; /*文字色*/
  border-radius: 50%; /*円形にする指定*/
}
/*マウスオン時の背景色*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
  background: #cfcece;
  color: #000;
}

/*トップページのNEWアイコン
---------------------------------------------------------------------------*/
.newicon {
  background: #f00; /*背景色*/
  color: #fff; /*文字色*/
  font-size: 70%; /*文字サイズ*/
  line-height: 1.5;
  padding: 2px 5px;
  border-radius: 2px;
  margin: 0px 5px;
  vertical-align: text-top;
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
  list-style: disc;
  padding: 0 20px 20px 45px;
}
ol {
  padding: 0 20px 20px 45px;
}

/*その他
---------------------------------------------------------------------------*/
.look {
  background: #222;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #333;
  color: #fff;
}
.mb15,
.mb1em {
  margin-bottom: 15px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}
.p0 {
  padding: 0 !important;
}
.clear {
  clear: both;
}
.color1,
.color1 a {
  color: #29acef !important;
}
.pr {
  font-size: 10px;
}
.fss13 {
  font-size: 13px;
}
.fss14 {
  font-size: 14px;
}
.wl {
  width: 96%;
}
.ws {
  width: 50%;
}
.c {
  text-align: center;
}
.r {
  text-align: right;
}
.l {
  text-align: left;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
/*.hei_280 {
  height: 280px;
}*/
.w25 {
  width: 25%;
}
.w30 {
  width: 30%;
}
.w45 {
  width: 45%;
}
.w70 {
  width: 70%;
  margin: auto;
}
.w85 {
  width: 85%;
  margin: auto;
}
.w90 {
  width: 95%;
  margin: auto;
}
.darkbrown {
  color: #3f0505;
}
.col_555 {
  color: #555;
}
.chapter2 {
  font-size: 1.4rem; /*文字サイズ*/
  color: #555;
  font-weight: 600;
}
.chapter2 + time {
  margin-top: -25px;
}
.chapter6 {
  font-size: 0.9rem; /*文字サイズ*/
  color: #555;
  line-height: 1.5rem;
  letter-spacing: -0.05rem;
  font-weight: 500;
}
.chapter3 {
  font-size: 1rem;
  color: #555;
  line-height: 1.5rem;
  letter-spacing: -0.05rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.chapter4 {
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
}
.chapter5 {
  font-size: 1.2em;
  font-style: italic;
}
.narrow_line {
  line-height: 1.5;
}
.box200 {
  border: 1px solid#ccc;
  padding: 1.5em;
}
.fc_category1 {
  color: #363738f5; /*カテゴリ文字色*/
}
.fc_category2 {
  color: #55d33c; /*カテゴリ文字色*/
}
.fc_caution {
  color: #8d3f48; /*カテゴリ文字色*/
}
.big50 {
  font-size: 50px;
}
.mini1 {
  font-size: 11px;
  display: inline-block;
  line-height: 1.5;
}
.dn {
  display: none;
}
.sh {
  display: none;
}
.border1 {
  border: 1px solid #ccc;
}
#sh-sub {
  display: none;
}

/*画面を横向きにした場合の高さが900px以下の場合の設定。
※小さな端末用メニューを２列にします。
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height: 900px) {
  /*メインメニュー
---------------------------------------------------------------------------*/
  /*メニュー１個あたりの設定*/
  #menubar-s li a {
    float: left; /*左に回り込み*/
    width: 44%; /*幅*/
    line-height: 1.2; /*行間*/
  }
}

/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
  /*header
---------------------------------------------------------------------------*/
  header {
    border-bottom: 1px solid #000; /*下線の幅、線種、色*/
    box-shadow: none;
  }
  /*ロゴ画像*/
  header #logo img {
    top: 10px; /*ヘッダーブロックに対して上から10pxの場所に配置*/
    left: 10px; /*ヘッダーブロックに対して左から10pxの場所に配置*/
  }

  /*headerアイコン（facebookやtwitterなどのアイコンブロック）
---------------------------------------------------------------------------*/
  /*アイコンを囲むブロック全体の設定*/
  header .icon {
    right: auto;
    left: 0px; /*ヘッダーブロックに対して左から0pxの場所に配置*/
    bottom: 0px; /*ヘッダーブロックに対して下から0pxの場所に配置*/
  }
  /*.flex-box { 2408
    display: flex;
  }*/
  /*inner
---------------------------------------------------------------------------*/
  .inner {
    padding-left: 2% !important;
    padding-right: 2% !important;
  }
  /*メインメニュー
---------------------------------------------------------------------------*/
  /*アニメーションのフレーム設定。全100コマアニメーションだと思って下さい。
透明(opacity: 0;)から色をつける(opacity: 1;)までの指定。*/
  @keyframes menubar {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  /*スマホ用メニューブロック*/
  #menubar-s {
    display: block;
    overflow: hidden;
    position: fixed;
    z-index: 3;
    top: 81px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /*背景色*/
    animation-name: menubar; /*上のkeyframesの名前*/
    animation-duration: 0.5s; /*アニメーションの実行時間。0.5秒。*/
    animation-fill-mode: both; /*待機中は最初のキーフレームを、完了後は最後のキーフレームを維持*/
  }
  /*メニュー１個あたりの設定*/
  #menubar-s li a {
    display: block;
    text-decoration: none;
    padding: 10px 3%; /*メニュー内の余白。上下、左右。*/
    border-bottom: 1px solid #fff; /*下の線の幅、線種、色*/
    color: #fff; /*文字色*/
    font-size: 16px; /*文字サイズ*/
  }
  /*説明表記（飾り文字）*/
  #menubar-s li a span {
    display: block;
    font-size: 10px; /*文字サイズ*/
  }
  /*PC用メニューを非表示にする*/
  #menubar {
    display: none;
  }

  /*３本バーアイコン設定
---------------------------------------------------------------------------*/
  /*３本バーブロック*/
  #menubar_hdr {
    display: block;
    position: fixed;
    z-index: 50;
    top: 13px; /*上から10pxの場所に配置*/
    right: 10px; /*右から10pxの場所に配置*/
  }
  /*アイコン共通設定*/
  #menubar_hdr.close,
  #menubar_hdr.open {
    width: 50px; /*幅*/
    height: 50px; /*高さ*/
  }
  /*三本バーアイコン*/
  #menubar_hdr.close {
    background: url(../images/icon_menu.png) no-repeat center top/50px; /*背景画像の読み込み、画像の上半分（３本マーク）を表示。幅は50px。*/
  }
  /*閉じるアイコン*/
  #menubar_hdr.open {
    background: url(../images/icon_menu.png) no-repeat center bottom/50px; /*背景画像の読み込み、画像の下半分（×マーク）を表示。幅は50px。*/
  }

  /*contentsブロック。mainとsubを囲むブロック。
---------------------------------------------------------------------------*/
  #contents {
    padding: 100px 3% 0; /*上、左右、下へのコンテンツ内の余白*/
  }

  /*main,subコンテンツ
---------------------------------------------------------------------------*/
  #main,
  #sub {
    float: none;
    width: auto;
    clear: both;
  }
  #main {
    padding-bottom: 20px;
  }

  /*listブロック（index2.htmlで使用）
---------------------------------------------------------------------------*/
  .fl.w48,
  .fr.w48 {
    float: none;
    width: auto;
  }
  .fl + .fr {
    padding-top: 30px !important;
  }

  /*その他
---------------------------------------------------------------------------*/
  body.s-n #sub,
  body.s-n #footermenu,
  .m-n {
    display: none;
  }
  .big1 {
    font-size: 24px;
  }
  .sh {
    display: block;
  }
  .pc {
    display: none;
  }
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
  /*全体の設定
---------------------------------------------------------------------------*/
  body {
    font-size: 11px; /*文字サイズ*/
    line-height: 1.5; /*行間*/
  }

  /*トップページのSVGロゴアニメーション設定
---------------------------------------------------------------------------*/
  #svg-logo {
    width: 80%; /*画像の幅*/
    left: 10%; /*左から10%の場所に配置*/
  }

  /*mainブロック
---------------------------------------------------------------------------*/
  /*h2タグ*/
  #main h2 {
    font-size: 24px;
    margin-bottom: 20px;
    padding: 0 10px 5px;
  }
  /*h3タグ*/
  #main h3 {
    font-size: 14px;
  }
  /*段落(p)タグ*/
  #main p {
    padding: 0 10px 20px; /*上、左右、下への余白*/
  }
  /*他。微調整。*/
  #main section + section {
    padding-top: 20px;
  }

  /*NEWSブロック
---------------------------------------------------------------------------*/
  /*右に回り込みの小さな画像*/
  .news dd .img {
    width: 50px; /*画像の幅*/
  }

  /*listブロック（index2.htmlで使用）
---------------------------------------------------------------------------*/
  /*listブロック*/
  .list {
    padding: 10x; /*ブロック内の余白*/
  }

  /*テーブル（ta1）
---------------------------------------------------------------------------*/
  /*テーブル１行目に入った見出し部分（※caption）*/
  .ta1 caption {
    padding: 5px; /*ボックス内の余白*/
  }
  /*ta1設定*/
  .ta1,
  .ta1 td,
  .ta1 th {
    padding: 5px; /*ボックス内の余白*/
  }
  /*ta1の左側ボックス*/
  .ta1 th {
    width: 150px;
  }

  /*ul.disc,olタグ
---------------------------------------------------------------------------*/
  ul.disc {
    list-style: disc;
    padding: 0 10px 20px 30px;
  }
  ol {
    padding: 0 10px 20px 30px;
  }

  /*その他
---------------------------------------------------------------------------*/
  .ws,
  .wl {
    width: 94%;
  }
  .big1 {
    font-size: 16px;
  }
}