/****************
- index.css
- トップページ 訪問者別ナビゲーション (2023delete)
- トップページ クイックリンクエリア(news下)
- index.html
- index_nav.php
****************/


/* ==================== */
/* nav#index-nav-quick */
/* -- */

#index-nav-quick {
	margin-bottom: 13px;
	margin-top: 34px;
	display: flex;
}
	@media screen and (max-width: 549px) {
		#index-nav-quick {
			display:block;
		}
	}
	/*　トピックス・学内向けサービス コンテンツ領域領域サイズ*/
	#q-topic{
		flex: 3;
		margin-right: 5px;
	}
	#q-service{
		flex:7;
		margin-left: 5px;
	}

	/* h2 */
	#index-nav-quick section h2{
		margin: 13px 21px;
		padding: 13px;
		color: #fff;
		text-align: center;

		border-bottom:1px #fff solid;
		position: relative;
	}
		#index-nav-quick section h2::before{
			position: absolute;
			content: " ";
			height:5px;
			left: 50%;
			bottom: -4px; 
			transform: translateY(-50%) translateX(-50%);
		}
		#q-topic h2::before{
			width: 160px;
			background: #ffbc27;
		}
		#q-service h2::before{
			width: 320px;
			background: #53f0c9;
		}

	/* quick-area */
	#index-nav-quick section .q-area {
		padding: 21px;
	}


/**  ----- 学内向けサービス 詳細  -----   */

  @media screen and (min-width: 550px) {
	/* 鳥取，米子サービスを横並び */
	#q-area-service {
		display: flex;
	}
	#q-area-service div.link-service-wrapper{
		flex:1;
		margin: 0px 13px 13px 13px;
	}
  }
  @media screen and (max-width: 549px) {
	/* 縦並び */
	#q-area-service {
		display:block;
	}
	#q-area-service div.link-service-wrapper{
		margin-bottom:34px;
	}
  }

  #q-area-service > div.link-service-wrapper{
	text-align: center;
  }
  #q-area-service > div.link-service-wrapper h3 {
	text-align: center;
	color:#fff;
  }


  #q-service ul.link-service li {
	margin: 21px 0px;
	height: 80px;
	width: 100%;
	position: relative;
  }
	/** バナー aタグ */
	  ul.link-service a{
		display: block;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0);
	}
		ul.link-service a:hover{
			background-color: rgba(0, 0, 0, 0.4);
		}

	ul.link-service a p{
		position: absolute;
		top: 50%;
	   	left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		width:90%;
		text-align: center;
		color:#000000;
  	}
  	.link-service a:visited p{
		color:#000000;
  	}

	p.banner-photo-sname{
		font-weight: bold;
		text-shadow: 
		-1px -1px 0 #fff,  /* 左上 */
		1px -1px 0 #fff,   /* 右上 */
		-1px 1px 0 #fff,   /* 左下 */
		1px 1px 0 #fff,    /* 右下 */
		-1px 0px 0 #fff,   /* 左 */
		1px 0px 0 #fff,    /* 右 */
		0px -1px 0 #fff,   /* 上 */
		0px 1px 0 #fff;    /* 下 */
	  }


/* 学外ネットワークアクセス時css */
li.banner-type-access-limit div {
	display: block;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	position: relative;
}

li.banner-type-access-limit div::after{
	position: absolute;
	content: '学内アクセス限定';
	font-weight: bold;
	color:#d1474c;
	font-size: 1.2rem;
	top: 50%;
	   left: 0; /* 左上から */
	transform: translate(15%, -110%);

	text-shadow: 
		-1px -1px 0 #fff,  /* 左上 */
		1px -1px 0 #fff,   /* 右上 */
		-1px 1px 0 #fff,   /* 左下 */
		1px 1px 0 #fff,    /* 右下 */
		-1px 0px 0 #fff,   /* 左 */
		1px 0px 0 #fff,    /* 右 */
		0px -1px 0 #fff,   /* 上 */
		0px 1px 0 #fff;    /* 下 */
}
li.banner-type-access-limit div p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	width:90%;
	text-align: center;

	/** バナーが写真のものしかないため，class指定せず指定 */
	font-weight: bold;
	text-shadow: 
	0px 0px 5px rgba(255, 255, 255, 0.9),  /* 中央ぼかし */
	0px 0px 8px rgba(255, 255, 255, 0.6),  /* ぼかしを広げる */
	0px 0px 13px rgba(255, 255, 255, 0.4); /* さらに広くぼかす */

}





/* 写真タイプ */
.banner-type-photo {
	border: 1px #fff solid;
}
  #banner-t-print {
	background:url(/img/service-photo.jpg) no-repeat;
	background-position:center center;			
	background-size:cover;
  }
  #banner-y-print {
	background:url(/img/service-photo-yprint.jpg) no-repeat;
	background-position:center center;
	background-size:cover;
  }
  #banner-cabinet {
	background:url(/img/service-photo-cabinet.jpg) no-repeat;
	background-position:center center;
	background-size:cover;			
  }
  #banner-specimen {
	background:url(/img/service-photo-specimen.jpg) no-repeat;
	background-position:center center;
	background-size:cover;
  }

/* アイコンの場合 */
/*
  #banner-y-print-icon {
	background-image: url(/img/xxxx.svg);
	background-repeat: no-repeat;
	background-position: left 13px center;
	background-size: 100px 100px;
	padding-left: 0px;
	border:1px #2d2d2d solid;
	background-color: #eee;
  }
*/





/**  ----- トピックス 詳細  -----   */
#link-topic {
	display: flex;
	flex-wrap: wrap;
}

#link-topic ol{ /* トピックスは重みづけが存在する*/
	margin:5px;
	padding:8px 13px;
	color:rgb(34, 34, 34); /*default*/
	height:100%;
	border-left: solid 12px #ffbc27;/*左側の線*/
  	background:rgb(245, 245, 245);/*背景色*/
}

/*  トピックス aタグ  */
#link-topic a{
	display: block;
	height: 100%;
	width: 100%;
	color:rgb(34, 34, 34);
	}
	#link-topic a:visited {
		color:rgb(34, 34, 34);
	}

	/* hover処理 */
	#link-topic ol:hover {
		background:rgb(191, 191, 191);
	  	border-left: solid 12px rgb(194, 142, 32);/*左側の線*/
	}

	/* 別サイト アイコン */
	#link-topic span.exlink{
		position: relative;
		padding-left: 1.2rem;
	}
	#link-topic span.exlink::before{
		position: absolute;
		content: "";
		background-color: #000;
		display: inline-block;
		height: 1rem;
		width: 1rem;
		-webkit-mask: url(/img/exlink_blue.svg);
		mask: url(/img/exlink_blue.svg);
		-webkit-mask-size: cover;
		mask-size: cover;
		vertical-align: middle;
		transform: translate(-110%, 20%);
	}








/* ==================== */
/* section.news */
/* -- */


@media screen and (max-width:549px){

	.sp-slides-container {
		margin-top:100px;
	}
}






#NewsContents {
	padding: 13px;
	margin-bottom:13px;
	background: #eee;
}

@media screen and (max-width:549px){

	#NewsContents {
		margin:13px 21px 13px 21px;
		display: block;
		padding: 8px;
		font-size: 12px;
	}
}

	/** News */
	#NewsContents #NC_index{
		width:80px;
		padding: 8px;
		border-right:1px solid #d1474c;
		text-align:center;
	}
	
	/* コンテンツ */

	#NewsContents #NC_content {
		padding: 8px 8px 8px 21px;
		flex: 1;
	}

		#NewsContents #NC_content li{
			line-height:2.0rem;
		}

		#NC_content ul li {
			display: flex;
			align-items: flex-start;
			}
			#NewsContents #NC_content ul li span.ndata{
				width: 130px;
				text-align: right;
				flex-shrink: 0;
				margin-right:10px;
			}
			#NC_content ul li span.ntitle{
			 	flex-grow: 1;
			}

		#NewsContents #NC_content a,
		#NewsContents #NC_content a:visited {
			color: #0044cc;					
		}

		#NewsContents #NC_content a:hover {
			text-decoration: underline;
		}

		#NewsContents #NC_content a.exlink {
			position: relative;
			padding-left: 21px;
		}

		/*
		#NewsContents #NC_content a.exlink::after {
			display: inline-block;
			position: absolute;
			width:16px;
			height:16px;
			background-image: url(/../img/exlink.svg);
			background-size: contain;
			left:3px;
			top:5%;
			content:"";
		}*/
		@media screen and (min-width: 550px) {
			#NewsContents #NC_content a.exlink::after {
			  width: 1.2em;
			  height: 1.2em;
			  left:0px;
			}


		  }
		@media screen and (max-width:549px){
			#NewsContents #NC_content li{
				line-height:1.0rem;
			}
		}
		#NewsContents #NC_content a.exlink::after {
			display: inline-block;
			position: absolute;
			top: 2px;
			background-image: url(/../img/exlink_blue.svg);
			background-size: contain;
			border-bottom: none;
			content: "";
		  }



	/* link:news.html */
	#NewsContents #NC_updatelink {
		text-align:right;
	}
		#NewsContents #NC_updatelink a, #NewsContents #NC_updatelink a:visited{
			color: #0044cc;
			text-decoration: none;
		}

		#NewsContents #NC_updatelink a::after{
			content: "\0bb";
		}

		#NewsContents #NC_updatelink a:hover {
			text-decoration: underline;
		}

			

		@media screen and (max-width:549px){

			#NewsContents #NC_index{
				padding: 0px;
				border: none;
				text-align: left;
				color:#d1474c;
				margin-bottom:5px;
			}
			#NewsContents #NC_content{
				padding: 0px;
			}

			#NewsContents #NC_updatelink {
				margin-top: 8px;
				margin-bottom: 8px;
			}

			#NewsContents #NC_content a.exlink::after {
				width:12px;
				height:12px;
				left:3px;
				top:3px;
		
			}
		}