/* フォントスタイル */
/* 大きさを決める */
html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}
 
body {
  font-size: 13px;
  font-size: 1.3rem;
  background:#FFFFCC url(../img/common/bg.gif) top center repeat-y; 
  /* sets the default sizing to make sure nothing is actually 10px */
}

/* bodyにフォントスタイル適用 あと色々適用しておく */
body {
  font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  /* デフォルトフォントに　'Noto Sans Japanese' ,　を使いたいけれど、重さが気になるので今はやめておく。 */
  font-weight:400;
  line-height:150%;
}

h2 {
	font-size:20px;
	font-size:2.0rem;
	font-weight:bold;
	color:#F60;
}
h3 {
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	color:#F60;
	margin-bottom:16px;
	margin-bottom:1.6rem;
}
h4 {
	font-size:14px;
	font-size:1.4rem;
	font-weight:bold;
	margin-bottom:8px;
	margin-bottom:0.8rem;
}
p {
	margin-bottom:10px;
	margin-bottom:1rem;
}
img {
  border:0px; /* 画像にリンクを貼った時に枠をつけない */
  margin:0;
  padding:0;
}


/* リンクテキストのスタイルを決める */
/* link visited hover active の順 */
a:link {
  color:#171C61;
  text-decoration:none;
}
a:visited {
  color:#0066CC;
  text-decoration:none;
}
a:hover {
  color:#FF0000;
  text-decoration:underline;
}
a:active {
  color:#FF0000;
  text-decoration:none;
}


/* ページレイアウト */

/* 全体 */
div#wrapper {
  width:100%;
  height:100%;
  text-align:center;
}
div#main {
  width:100%;
  max-width:984px;
  margin-left:auto;
  margin-right:auto;
  padding:20px 0;
  text-align:left;
  background-color:#FFF;
}


/* 上段 --------------------------------------------------------------------------------- */

/* デバイスの横幅に応じてブレイクポイントを設定しdivの表示・非表示を選ぶ */

/* 599px以下　スマホを想定 */ 
@media screen and (max-width : 599px){
	/* タブレット用、PC用のdivを非表示 */
	div#upTablet,
	div#up,
	ul#dropmenu,
	div.sp-thumbnails, /* sp-thumbnailsはsliderproのサムネイル部分 */
	div#linkmap,       /* ページ下のリンクマップ */
	div#snssection,    /* SNSボタン部分 */
	div#bottomRight {  /* 下部 bottom_right 部分 */
		display:none;
	}
	
	/* meammenuのCSSをインポート */
	@import url('meanmenu.css');
	
	div#upMobile { width:100%; }
	div#upMoTab { width:100%; }

	/* topLinkに関する設定 */
	#wrapper #main div#upMobTab {
		display:block;
		width:100%;
		max-width:599px;
		margin:0 auto 6px;
	}
	#wrapper #main div#upMobTab ul#topList_tablet {
		list-style-type: none;
		width:100%;
		margin:0 auto;
		padding: 0;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li {
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#access_tab {
		width: 15%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#kengaku_tab {
		width: 20%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#seikyu_tab {
		width: 30%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#syukuhaku_tab {
		width: 15%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#kyujin_tab {
		width: 20%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li a {
		display:block;
		margin: 0 2px;
		padding: 6px 0;
		color: #333;
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1;
		text-decoration: none;
	}
	
	#wrapper #main div#upMobTab ul#topList_tablet > li:hover > a {  background-color: rgba(229, 0, 1, 0.85 ); color:#FFF; }
	
	/* お知らせ表示設定 */
	
	#wrapper #main div#upMobTab div#upMobOsirase {
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}	

    /* slider-proのレイアウトに関する設定 */
    div#slider1 {
	    margin-bottom:12px;
    }
}

/* 600px-979pxまで　タブレットなどを想定 */ 
@media screen and (min-width : 600px) and (max-width : 979px) {
	/* スマホ用、PC用のdivを非表示 */
	div#upMobile,
	div#up,
	ul#dropmenu,
	div.sp-thumbnails { /* sp-thumbnailsはsliderproのサムネイル部分 */
		display:none;
	}
	
	/* meammenuのCSSをインポート */
	@import url('meanmenu.css');
	
	div#upTablet { width:100%; }

	/* topLinkに関する設定 */
	#wrapper #main div#upMobTab {
		display:block;
		width:100%;
		max-width:979px;
		margin:0 auto 6px;
	}
	#wrapper #main div#upMobTab ul#topList_tablet {
		list-style-type: none;
		width:90%;
		margin:0 auto;
		padding: 0;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li {
		position: relative;
		float: left;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#access_tab {
		width: 15%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#kengaku_tab {
		width: 20%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#seikyu_tab {
		width: 30%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#syukuhaku_tab {
		width: 15%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li#kyujin_tab {
		width: 19%;
	}
	#wrapper #main div#upMobTab ul#topList_tablet li a {
		display:block;
		margin: 0 2px;
		padding: 6px 0;
		color: #333;
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1;
		text-decoration: none;
	}
	
	#wrapper #main div#upMobTab ul#topList_tablet > li:hover > a {  background-color: rgba(229, 0, 1, 0.85 ); color:#FFF; }
	
	/* お知らせ表示設定 */
	
	#wrapper #main div#upMobTab div#upMobOsirase {
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	
    /* slider-proのレイアウトに関する設定 */
    div#slider1 {
	    margin-bottom:12px;
    }
}

/* 980px-　タブレット横置きやPCなどを想定 */
@media screen and (min-width : 980px) {
	/* スマホ用、タブレット用のdivを非表示 */
	div#upTablet,
	div#upMobile,
	div#upMobTab { display:none; }
	
	div#up { width:100%; }
	  div#logo { width:260px; float:left; }
	    div#logo img { width:260px; }
	  div#upText { max-width:50%; float:right; text-align:left; margin-bottom:14px; }
	    div#upText p { font-size:11px; font-size:1.1rem; line-height:1.3; color:#333; }
	  div#tel { width:250px; height:41px; float:right; text-align:right; margin-bottom:6px; }
	    div#tel img { width:250px; }
	  div#topLink { width:440px; float:right; text-align:right; }
	    div#topLink ul { }
	    div#topLink li { display:block; font-size:1.2rem; margin:0; padding:0 4px; border-left: 1px solid #999; float:right; }
	    div#topLink li#kyujin { border-right: 1px solid #999; }
		div#topLink a:link { color:#0000FF; text-decoration:none; }
		div#topLink a:visited { color:#0066CC; text-decoration:none; }
		div#topLink a:hover { color:#FF0000; text-decoration:underline; }
		div#topLink a:active { color:#FF0000; text-decoration:none; }
	  div#upOsirase { width:440px; float:right; text-align:right; margin-top:1rem; }

/* プルダウンリストを作る */
/* スマホ・タブレットではmeanmenu.cssが適用される */
#wrapper #main nav { display:block; width:984px; margin:0 auto 6px; }
#dropmenu {
  list-style-type: none;
  width:100%;
  padding: 0;
}
#dropmenu li {
  position: relative;
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a {
  display:block;
  margin: 0 2px;
  padding: 10px 0;
  color: #333;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  border:#333 1px solid;
}
#dropmenu li ul {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
#dropmenu li ul li {
  overflow: hidden;
  width: 100%;
  height: 0;
  color: #fff;
  transition: .2s;
}
#dropmenu li ul li a {
  padding: 12px 15px;
  background-color: rgba(229, 0, 1, 0.85 );
  color:#FFF;
  text-align: left;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: normal;
}
#dropmenu > li:hover > a {  background-color: rgba(229, 0, 1, 0.85 ); color:#FFF; }
#dropmenu > li:hover li:hover > a { background-color: rgba(229, 0, 1, 0.85 ); color:#FFF; }
#dropmenu li:hover > ul > li {
  overflow: visible;
  height: 38px;
}
#dropmenu li ul li ul {
  top: 0;
  left: 100%;
}
#dropmenu li:last-child ul li ul {
  left: -100%;
  width: 100%;
}
#dropmenu li ul li ul li a { background-color: rgba(229, 0, 1, 0.85 ); color:#FFF; }
#dropmenu li:hover ul li ul li:hover > a { background-color: (229, 0, 1, 0.85 ); color:#FFF; }
#dropmenu li ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: -20px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #FFF;
}
#dropmenu li:last-child ul li ul:before {
  position: absolute;
  content: "";
  top: 13px;
  left: 200%;
  margin-left: -20px;
  border: 5px solid transparent;
  border-right-color: #FFF;
}

/* slider-proのレイアウトに関する設定 */
div#slider1 {
	margin-bottom:24px;
	overflow:hidden;
}

}


/* パンくずリスト ----------------------------------------------------------------------- */
div#path ul {
	display:block;
	width:100%;
}
div#path ul li {
	display:block;
	list-style:none;
	float:left;
	padding:2px;
	margin-right:1rem;
	margin-bottom:1rem;
}
div#path ul li.path_link:before {
  font-family: FontAwesome;
  content: '\f0da'; /* アイコンのunicode */
  margin-right:1rem;
}

	
/* 中段 --------------------------------------------------------------------------------- */

/* 新着情報・リンク・バナー部はスマホとそれ以外で切り分け */

/* まず共通の設定 */

/* リンク部の背景画像 */
div#middle div#middleRightLink a#next_month {
	background-image:url(../img/common/back_oso.gif);
	}
div#middle div#middleRightLink a#special {
	background-image:url(../img/common/back_kara.gif);
	}
div#middle div#middleRightLink a#exhibition {
	background-image:url(../img/common/back_chor.gif);
	}
div#middle div#middleRightLink a#ganbaru {
	background-image:url(../img/common/back_ichi.gif);
	}
div#middle div#middleRightLink a#tools {
	background-image:url(../img/common/back_jusi.gif);
	}
div#middle div#middleRightLink a#activities {
	background-image:url(../img/common/back_todo.gif);
	}

/* リンク部のhover、active時の背景画像 */
div#middle div#middleRightLink a#next_month:hover,
div#middle div#middleRightLink a#next_month:active {
	background-image:url(../img/common/back_oso_over.gif);
	}
div#middle div#middleRightLink a#special:hover,
div#middle div#middleRightLink a#special:active {
	background-image:url(../img/common/back_kara_over.gif);
	}
div#middle div#middleRightLink a#exhibition:hover,
div#middle div#middleRightLink a#exhibition:active {
	background-image:url(../img/common/back_chor_over.gif);
	}
div#middle div#middleRightLink a#ganbaru:hover,
div#middle div#middleRightLink a#ganbaru:active {
	background-image:url(../img/common/back_ichi_over.gif);
	}
div#middle div#middleRightLink a#tools:hover,
div#middle div#middleRightLink a#tools:active {
	background-image:url(../img/common/back_jusi_over.gif);
	}
div#middle div#middleRightLink a#activities:hover,
div#middle div#middleRightLink a#activities:active {
	background-image:url(../img/common/back_todo_over.gif);
	}

/* リンク部のテキスト */
div#middle div#middleRightLink a:link {
	color:#FFF;
	text-decoration:none;
	}
div#middle div#middleRightLink a:visited {
	color:#FFF;
	text-decoration:none;
	}
div#middle div#middleRightLink a:hover,
div#middle div#middleRightLink a:active {
	color:#eb383a;
	text-decoration:none;
	}

div.section {
	width:96%;
	max-width:709px;
	background-image:url(../img/common/background.jpg);
	border:0px;
	border-radius:10px;
	padding:2% 2% 1% 2%;
	margin-bottom:30px;
	margin-bottom:3rem;
}
div.section div.inner {
	width:98%;
	max-width:695px;
	background-color:#FFC;
	border-width:0px;
	border-radius:5px;
	margin-bottom:1%;
	padding:1%;
}

@media screen and (max-width : 599px) {
		div#middle { width:100%; margin-left:auto; margin-right:auto; text-align:center; }

		  /* 中段右側のリンクバナー */
		  div#middle div#middleRightLink { width:100%; }
		    div#middle div#middleRightLink a {
				display:block;
				width:100%;
			    height:35px;
				padding-top:20px;
				font-size:20px;
				font-size:2.0rem;
				font-weight:bold;
				text-decoration:none;
				margin:0 auto 8px;
				border-radius:2px;
				background-repeat:repeat;
			}
			
		      div#middle div#middleRightLink a:link {
				  color:#FFF;
				  text-decoration:none;
			  }
		      div#middle div#middleRightLink a:visited {
				  color:#FFF;
				  /* color:#E9545D; */
				  text-decoration:none;
			  }
		      div#middle div#middleRightLink a:hover,
		      div#middle div#middleRightLink a:active {
				  color:#eb383a;
				  text-decoration:none;
			  }
			  
		/* 中段左側のメインコンテンツ */
		  div#middle div#middleLeftMain {
			  width:100%;
			  max-width:599px;
			  text-align:left;
			  }
}



@media screen and (min-width : 600px) {
		div#middle { width:100%; max-width:980px; margin-left:auto; margin-right:auto; text-align:center; }

		  /* 中段右側のリンクバナー */
		  div#middle div#middleRightLink { width:20%; max-width:192px; float:right; }
		    div#middle div#middleRightLink a {
				display:block;
				width:100%;
			    height:48px;
				font-size:18px;
				font-size:1.8rem;
				font-weight:bold;
				text-decoration:none;
				margin:0 auto 8px;
				padding-top:37px;
				border-radius:4px;
				background-repeat:repeat;
			}
		    div#middle div#middleRightLink a#ganbaru {
				padding-top:28px;
				padding-bottom:17px;
			}
			  
		  /* 中段左側のメインコンテンツ */
		  div#middle div#middleLeftMain {
			  width:77%;
			  max-width:739px;
			  text-align:left;
			  float:right;
			  margin-right:3%;
			  }
}
	    /* cntBottomは15年より。ページ下部の問い合わせリンク部。 */
        div#ContBottom { width:732px; text-align:right; padding:10px 0; }
			
		/* ページ下のリンクマップ */
		div#linkmap {
			width:100%;
			margin-top:8px;
			margin-bottom:8px;
			padding-top:8px;
			border-top:#666 1px dashed;
		}
			div#linkmap div.column {
				width:25%;
				float:left;
			}
				div#linkmap div.column div.block {
					width:95%;
					color:#333;
					line-height:120%;
					margin:0 auto 1em;
				}
				div#linkmap div.column div.block h3 {
					font-size:12px;
					font-size:1.2rem;
				}
				div#linkmap div.column div.block ul {
					margin-left:1rem;
				}
					div#linkmap div.column div.block ul li {
						list-style:none;
					}
					
/* 下段 --------------------------------------------------------------------------------- */

		  	/* SNSアイコンが並ぶ　スマホでは非表示 */
			div#snssection {
				width:100%;
				margin-bottom:8px;
			}
				div#snssection div.snswrap {
					float:left;
					width:120px;
					margin-left:5px;
				}
					div#snssection div.snswrap div#snstwitter,
					div#snssection div.snswrap div#snsfacebook,
					div#snssection div.snswrap div#snsgoogle,
					div#snssection div.snswrap div#snshatena {
						float:left;
						width:58px;
						border:#999 1px solid;
					}
						div#snssection div.snswrap div img {
							vertical-align:bottom;
						}
					
					div#snssection div.snswrap div.snscount{
						position:relative;
						float:left;
						width:48px;
						height:24px;
						text-align:center;
						color:#666;
						border:#999 1px solid;
						margin-left:6px
					}
					div#snssection div.snswrap div.snscount:before {
						border:6px solid transparent;
						border-right-color:#999;
						border-left-width:0;
						width:0;
						left:-7px;
						content:"";
						display:block;
						top:6px;
						position:absolute;
					}

					div#snssection div.snswrap div.snscount:after {
						border:6px solid transparent;
						border-right-color:#fff;
						border-left-width:0;
						width:0;
						left:-6px;
						content:"";
						display:block;
						top:6px;
						position:absolute;
					}
			div#snssection div#bottomnavi {
				font-size:10px;
				font-size:1rem;
				float:right;
				width:140px;
			}

		div#bottom {
			position:relative;
			width:100%;
			height:75px;
			margin-bottom:12px;
		}
		  div#bottomLeft {
			  position:absolute;
			  bottom:0;
			  left:0;
			  width:89%;
		  }
			div#bottomLeft img {
				width:100%;
				max-width:600px;
				height:auto;
			}
  
		  div#bottomRight {
			  position:absolute;
			  bottom:0;
			  right:0;
			  width:11%;
		  }				
			div#bottomRight img {
				width:100%;
				max-width:104px;
				height:auto;
			}


/* float関連 */		  
.flLeft { float:left; }
.flRight { float:right; }

/* clearfix clearBothはできるだけ使わない方向 */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

.clearBoth { clear:both; }

/* 文字の修飾色々 */
.pink { color:#E4007F; }
.red {color:#E50012; }
.blue {color:#0a6eb8; }
.navy { color:#1d2088; }
.orange { color:#EA5514; }
.glay666 {color:#666666; }
.glay999 {color:#999999; }
.underLine { text-decoration:underline; }
.strike { text-decoration:line-through; }
.strong { font-weight:bold; }
.normal { font-weight:normal; }
.size15 { font-size:20px; font-size:2.0rem; }
.size14 { font-size:19px; font-size:1.9rem; }
.size13 { font-size:18px; font-size:1.8rem; }
.size12 { font-size:17px; font-size:1.7rem; }
.size11 { font-size:15px; font-size:1.5rem; }
.size10 { font-size:13px; font-size:1.3rem; }
.size9 { font-size:12px; font-size:1.2rem; }
.size8 { font-size:11px; font-size:1.1rem; }
.noborder { border:none; }

/* 明朝体の指定は、できるだけ mincho クラスを使うこと。 */
.mincho { font-family: Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "メイリオ", Meiryo, serif; }

.ind1 { padding-left:1em; text-indent:-1em; } /* 1文字分インデント */

/* SNS icon用の記述 主にリンク用にアンカーへ適用する */
.twitter { display:block; width:20px; height:20px; text-indent:-9999px; background:url(../pics/common/snsicons.png) 0 0 no-repeat; overflow:hidden; }

.example5 {} /* lightbox用の記述 ここでスタイルを設定しない */
.rollover-fade1 {} /* crossfade rollover用の記述 ここでスタイルを設定しない */
.rollover-fade2 {} /* crossfade rollover用の記述 ここでスタイルを設定しない */