@charset "UTF-8";

/*----◇◇◇　総合DMページ　◇◇◇---*/

/*======================================================
	◆全体
======================================================*/
html,body{
	height:100%;
}
.sougou {
	overflow:hidden;
	width: 100%;
	position:relative;
	min-height: 100%;
}
.sougou .colorB{
	color:#2F3279;
}
.sougou .colorR{
	color:#FF0000;
}
/*======================================================
	◆ヘッダー
======================================================*/
header .logo{
}
	header .logo img{
		width:50%;
	}
		.btn-color-yri {
			background-color:#4255B8;	/*#2f3279;**/
			color:#fff;
			width:60px;
		}
		ul.search-link {
		}
			ul.search-link li a {
				padding:0.8em 0.8em;
				color: #2f3279;	/*rgba(255, 255, 255, 0.8);*/
				-webkit-transition: 0.5s;
				-o-transition: 0.5s;
				transition: 0.5s;
			}
				ul.search-link li a:hover {
					color: #5b5fbd;	/*rgba(255, 255, 255, 1.0);*/
					text-decoration:none;
				}
				.btn-default:focus,
				.btn-default.focus {
				  color: #333333;
				  background-color: #e6e6e6;
				  border-color: #8c8c8c;
				}
				.btn-default:hover {
				  color: #333333;
				  background-color: #e6e6e6;
				  border-color: #adadad;
				}
				.dropdown-menu {
				  position: absolute;
				  top: 100%;
				  left: 0;
				  z-index: 1000;
				  display: none;
				  float: left;
				  min-width: 160px;
				  padding: 0;
				  margin: 2px 0 0;
				  list-style: none;
				  font-size: 14px;
				  text-align: left;
				  background-color: #ffffff;
				  border: 1px solid #cccccc;
				  border: 1px solid rgba(0, 0, 0, 0.15);
				  border-radius: 4px;
				  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
				  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
				  -webkit-background-clip: padding-box;
				          background-clip: padding-box;
				}
				.dropdown-menu > li > a {
				  display: block;
				  padding: 3px 20px;
				  clear: both;
				  font-weight: normal;
				  line-height: 1.42857143;
				  color: #333333;
				  white-space: nowrap;
				}
				.dropdown-menu > li > a:hover,
				.dropdown-menu > li > a:focus {
				  text-decoration: none;
				  color: #262626;
				  background-color: #f5f5f5;
				}
				.dropdown-menu > .active > a,
				.dropdown-menu > .active > a:hover,
				.dropdown-menu > .active > a:focus {
				  color: #ffffff;
				  text-decoration: none;
				  outline: 0;
				  background-color: #337ab7;
				}

@media screen and (max-width: 991.98px) { /*タブレット用*/
	header .logo img{
		width:70%;
	}
}

	
@media screen and (max-width: 575.98px) { /*スマホ用*/
header .logo{
	text-align:center;
}
	header .logo img{
		width:60%;
	}
}

/*======================================================
	◆上部テキスト
======================================================*/
.Toptxt{
	margin:0 10%;
	padding:20px 10px 10px 10px;
	border:5px double #9798bc;
}
	.Toptxt p{
		font-size:120%;
		font-weight:bold;
	}
@media screen and (max-width: 991.98px) { /*タブレット用*/
	.Toptxt{
		margin:0 5%;
	}
}
@media screen and (max-width: 575.98px) { /*スマホ用*/
	.Toptxt{
		margin:0;
	}
}

/*----スクロールして表示されるテキスト---*/
#scrollDiv {
	display: none;  /* 最初は表示させません */
	position: fixed;
	top:0;
	margin:0 auto;
	width:100%; 
	padding:10px 10px 0 10px; 
	background:rgba(169,206,236,0.8);
	text-align:center;
	font-size:80%;
	z-index: 10000;
}

/*======================================================
	◆上部フレーム
======================================================*/
#TopFrame{
	padding:0 5%;
}
	.TopFrameL{
		width:65%;
		float:left;
		position:relative;
	}
	.TopFrameR{
		width:33%;
		float:right;
		margin-left:2%;
	}
		#TopFrame a{
			display:block;
			color:#000000;
		}
		#TopFrame a:hover{
			text-decoration: none;
		}
			#TopFrame .TopFrame01,
			#TopFrame .TopFrame02,
			#TopFrame .TopFrame03,
			#TopFrame .TopFrame04{
			}
				#TopFrame .TopFrame01 img,
				#TopFrame .TopFrame02 img,
				#TopFrame .TopFrame03 img,
				#TopFrame .TopFrame04 img{
					transition: .3s ease-in-out;
					vertical-align: bottom;
				}
				/*#TopFrame .TopFrame01:hover img,
				#TopFrame .TopFrame02:hover img,
				#TopFrame .TopFrame03:hover img,
				#TopFrame .TopFrame04:hover img{
					filter: grayscale(100%);
				}*/
/*----吹き出しポップ---*/
				.TopFrameL .txtPop {
					display: none;
				    position: absolute;
					margin-top:30%;
				    padding: 10px 10px 0 10px;
				    font-size: 12px;
					font-weight:bold;
					text-align:left;
				    line-height: 1.6em;
				    color: #ffffff;
					border: 1px solid #b2771f;
				    border-radius: 5px;
				    background: #b2771f;
				    width:80%;
				}
					.TopFrameL .txtPop::before {
						content: '';
						position: absolute;
						display: block;
						width: 0;
						height: 0;
						left: 20px;
						top: -15px;
						border-right: 15px solid transparent;
						border-bottom: 15px solid #b2771f;
						border-left: 15px solid transparent;
					}
					.TopFrameL .txtPop::after{
						content: '';
						position: absolute;
						display: block;
						width: 0;
						height: 0;
						left: 20px;
						top: -14px;
						border-right: 15px solid transparent;
						border-bottom: 15px solid #b2771f;
						border-left: 15px solid transparent;
					}
						.TopFrameL a:hover .TopFrame01 .txtPop{
							    display: inline-block;
							    top: 60px;
							    left: 40px;
							}
						.TopFrameL a:hover .TopFrame02 .txtPop{
							    display: inline-block;
							    top: 0px;
							    left: 40px;
							}
						.TopFrameL a:hover .TopFrame03 .txtPop{
							    display: inline-block;
							    top: 35px;
							    left: 40px;
							}
						.TopFrameL a:hover .TopFrame04 .txtPop{
							    display: inline-block;
							    top: 10px;
							    left: 30px;
							}
					.TopFrameL .txtPop h2{
					    font-size: 16px;
						font-weight:bold;
					}

/*----お知らせ---*/
	.NewsBox{
		background:#006633;
		/*background-image: url('../../img/sougou/woodboard.jpg');*/
		/*background-position: center bottom;*/
		/*background-repeat: repeat-y;*/
		box-shadow: inset 0 0 0 3px rgba(85,46,12,0.7), -5px 5px 5px rgba(0, 0, 0, 0.5);
		border:3px double #b2771f;
		border-radius: 5px;
		height:180px;
		overflow-x: hidden;
	}
	.NewsBox.slidein.is-animated {
	  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}
	 
	@keyframes slideIn {
	  0% {
	    transform: translateX(180px);
	    opacity: 0;
	  }
	  100% {
	    transform: translateX(0);
	  }
	  40%,100% {
	    opacity: 1;
	  }
	}
		.News{
			margin:10px 10px 30px 10px;
		}
			.News dl{
				color:#ffffff;
				text-align:left;
			}
			.News dl dt{
				font-weight:normal;
			}
@media screen and (max-width: 991.98px) { /*タブレット用*/
	#TopFrame{
		padding:0 5%;
	}
		.TopFrameL{
			width:100%;
			float:none;
		}
		.TopFrameR{
			width:100%;
			float:none;
		}
	.NewsBox{
		margin:20px 0;
	}
}
@media screen and (max-width: 575.98px) { /*スマホ用*/
	#TopFrame{
		padding:0;
	}
		.TopFrameL{
			width:100%;
			float:none;
		}
		.TopFrameR{
			width:100%;
			float:none;
		}
	.NewsBox{
		margin:20px 10px;
	}
}

/*======================================================
	◆本棚
======================================================*/
#BookShelf{
	margin-top:-2px;
	padding-bottom:80px;
	width: 100%;
	background-image: url('../../img/sougou/BookShelf_back_bottom.png');
	background-position: center bottom;
	background-repeat: repeat-y;
}
	#BookShelf .BSbox{
		padding-top:50px;
		width: 100%;
		background-image: url('../../img/sougou/BookShelf_back.png');
		background-position: center top;
		background-repeat: no-repeat;
	}
			#BookShelf .BSbox h2{
				margin:20px auto 10px auto;
				width:160px;
				height:30px;
				font-size:12px;
				font-weight:bold;
				color:#D6B08F;
			}
				#BookShelf .MrBook{
					position:relative;
					cursor:pointer;
					display:inline-block;
					box-shadow: 10px 0px 15px #333333;
				}
					#BookShelf .MrBook img{
						width:160px;
					}
					#BookShelf .MrBook h3{
						position: absolute;
						top: 50%;
						left: 50%;
						-ms-transform: translate(-50%,-50%);
						-webkit-transform: translate(-50%,-50%);
						transform: translate(-50%,-50%);
						color:#ffff;
						font-size:18px;
						font-weight: bold;
						opacity: 0.6;
						width:100%;
					}
						#BookShelf .MrBook .txtPop {
							display: none;
						    position: absolute;
							margin-top:30%;
						    padding: 10px;
						    font-size: 12px;
							font-weight:bold;
							text-align:left;
						    line-height: 1.6em;
						    color: #000000;
							border: 1px solid #2F3279;
						    border-radius: 5px;
						    background: #ffffff;
						    width:100%;
						}
							#BookShelf .MrBook .txtPop::before {
								content: '';
								position: absolute;
								display: block;
								width: 0;
								height: 0;
								left: 20px;
								top: -15px;
								border-right: 15px solid transparent;
								border-bottom: 15px solid #2F3279;
								border-left: 15px solid transparent;
							}
							#BookShelf .MrBook .txtPop::after{
								content: '';
								position: absolute;
								display: block;
								width: 0;
								height: 0;
								left: 20px;
								top: -14px;
								border-right: 15px solid transparent;
								border-bottom: 15px solid #ffffff;
								border-left: 15px solid transparent;
							}
						#BookShelf .MrBook:hover .txtPop{
						    display: inline-block;
						    top: 0px;
						    left: 25px;
						}
							#BookShelf .MrBook .txtPop div{
							    margin-bottom:5px;
							}

@media screen and (max-width: 991.98px) { /*タブレット用*/
	#BookShelf .BSbox{
		padding-top:0;
		width: 100%;
		background-image: url('../../img/sougou/BookShelfMD_back.png');
		background-position:center top;
	}
			#BookShelf .BSbox .MrBox{
			}
				#BookShelf .BSbox h2{
					padding-top:60px;
					padding-bottom:25px;
				}
					#BookShelf .MrBook img{
						width:150px;
					}
}
@media screen and (max-width: 575.98px) { /*スマホ用*/
	#BookShelf{
		margin:-1px 0 0 0;
		padding-bottom:100px;
		width: 100%;
		background-image: url('../../img/sougou/BookShelf_back_bottom.png');
		background-position: center bottom;
	}
		#BookShelf .BSbox{
			background-image:none;
		}
			#BookShelf .BSbox .container {
				margin:0;
				padding:0;
			}
				#BookShelf .BSbox .MrBox{
					width: 100%;
					background-image: url('../../img/sougou/BookShelfSM_back.png');
					background-position:center top;
					height:280px;
				}
				#BookShelf .BSbox h2{
					margin-top:0;
					width:100%;
					padding-top:70px;
					font-size:14px;
					height:auto;
				}
				#BookShelf .BSbox h3{
					font-size:20px;
				}
					#BookShelf .MrBook{
					}
						#BookShelf .MrBook img{
							width:120px;
						}
							#BookShelf .MrBook .txtPop {
								margin-top:15%;
							    width:170%;
							}
							#BookShelf .MrBook:hover .txtPop{
							    left: 5%;
							}
}
/*======================================================
	◆フッター
======================================================*/
footer{
	height:auto;
	position: absolute;
	bottom: 0;
}
	footer#footer{
		background:#1D2A56;
		color:#8E95AB;
		padding-top:10px;
		padding-bottom:10px;
		text-align:center;
		position: absolute;
		bottom: 0;
	}
/*======================================================
	◆本見開き　モーダルウィンドウ
======================================================*/
.sougouModal{
	overflow: hidden; /*  clearfix */
	margin:2%;
	padding:5% 2%;
	background-image: url('../../img/sougou/sougouModalBox.png');
	background-position: center center;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
	.sougouModal .sougouModalBox{
	    display: block;
		width:100%;
	}
		.sougouModal .sougouModalBox .sougouModalBoxL{
			float:left;
			width:50%;
			padding:4% 8% 4% 4%;
		}
			.sougouModal .sougouModalBox .sougouModalBoxL h2{
				font-size:20px;
				line-height: 2.0;
			}
		.sougouModal .sougouModalBox .sougouModalBoxR{
			float:right;
			width:50%;
			padding:4% 5% 4% 4%;
		}
			.sougouModal .sougouModalBox .sougouModalBoxR h1{
				font-size: 20px;
				padding-bottom:5px;
				font-size:20px;
				font-weight:bold;
				color:#2F3279;
				border-bottom:1px solid #2F3279;
			}
			.sougouModal .sougouModalBox .sougouModalBoxR .date{
				text-align:right;
				padding-bottom:10px;
			}
			.sougouModal .sougouModalBox .sougouModalBoxR .sougouModalBox_txt{
				font-size: 18px;
			}

/*  ボタン01 */
			.sougouModal .sougouModalBox .sougouModalBox_button01{
				font-size: 20px;
				margin-top:40px;
			}
				.sougouModal .sougouModalBox .sougouModalBox_button01 a{
				    background: #EAEAF1;
				    border-radius: 3px;
				    position: relative;
				    display: flex;
				    justify-content: space-around;
				    align-items: center;
				    margin: 0 auto;
				    /*max-width: 280px;*/
				    padding: 10px 5px;
				    color: #2F3279;
				    transition: 0.3s ease-in-out;
				    font-weight: 500;
				    border:2px solid #2F3279;
				}
				.sougouModal .sougouModalBox .sougouModalBox_button01 a:hover {
				    background: #2F3279;
				    color: #ffffff;
				}
				.sougouModal .sougouModalBox .sougouModalBox_button01 a:after {
				    content: '';
				    width: 5px;
				    height: 5px;
				    border-top: 3px solid #2F3279;
				    border-right: 3px solid #2F3279;
				    transform: rotate(45deg) translateY(-50%);
				    position: absolute;
				    top: 50%;
				    right: 15px;
				    border-radius: 1px;
				    transition: 0.3s ease-in-out;
				}
				.sougouModal .sougouModalBox .sougouModalBox_button01 a:hover:after {
				    border-color: #ffffff;
				}
/*  ボタン02 */
			.sougouModal .sougouModalBox .sougouModalBox_button02{
				font-size: 20px;
				margin-top:25px;
			}
				.sougouModal .sougouModalBox .sougouModalBox_button02 a{
				    background: #2F3279;
				    border-radius: 3px;
				    position: relative;
				    display: flex;
				    justify-content: space-around;
				    align-items: center;
				    margin: 0 auto;
				    max-width: 280px;
				    padding: 10px 25px;
				    color: #ffffff;
				    transition: 0.3s ease-in-out;
				    font-weight: 500;
				}
				.sougouModal .sougouModalBox .sougouModalBox_button02 a:hover {
				    background: #EAEAF1;
				    color: #2F3279;
				}
				.sougouModal .sougouModalBox .sougouModalBox_button02 a:after {
				    content: '';
				    width: 5px;
				    height: 5px;
				    border-top: 3px solid #EAEAF1;
				    border-right: 3px solid #EAEAF1;
				    transform: rotate(45deg) translateY(-50%);
				    position: absolute;
				    top: 50%;
				    right: 20px;
				    border-radius: 1px;
				    transition: 0.3s ease-in-out;
				}
				.sougouModal .sougouModalBox .sougouModalBox_button02 a:hover:after {
				    border-color: #2F3279;
				}

/*  付箋 */
			.fusen{
			    position: relative;
				z-index: 0;
			    margin:30px 0;
			    padding:10px 25px;
			}
			.fusen a {
				font-weight:bold;
				padding:10px 20px;
			    position: relative;
background: linear-gradient(to right, #a9ceec 0%, #9dc1df 0.5%, #9dc1df 13%, #a9ceec 16%);/*グラデーションで折り目っぽく*/
			}
			.fusen a::after {/*BOXを微妙に斜めにして配置、シャドウで立体感を出す*/
				content: "";
				display: block;
				position: absolute;
				z-index: -1;
				margin: auto;
				background: rgba(0, 0, 0, .5);
				box-shadow: 0 5px 5px rgb(0 0 0 / 30%);
				transform: rotate(1deg);
				top: 6%;
				right: .5%;
				left: 2%;
				bottom: 8%;
			}
			.fusen a:hover::after {/*BOXを微妙に斜めにして配置、シャドウで立体感を出す*/
				box-shadow: 0 5px 5px rgb(0 0 0 / 50%);
			}
			/*モーダルを閉じるボタンの指定*/
			.modal-close{
				position: absolute;
				display: flex;
			    align-items: center;
			    justify-content: center;
				top: 50px;
				right: 96px;
				width: 40px;
				height: 35px;
				padding-bottom:10px;
				font-size: 40px;
				color: #2F3279;
				border:1px solid #2F3279;
				cursor: pointer;
			}

@media screen and (max-width: 575.98px) { /*スマホ用*/
		.sougouModal .sougouModalBox .sougouModalBoxL{
			padding:8% 10% 4% 4%;
		}
			.sougouModal .sougouModalBox .sougouModalBoxL h2{
				font-size:18px;
				line-height: 1.6;
			}
}