@charset "Shift_JIS";
/* CSS Document */
/* ==================================================
臨時情報・障害情報ページ用css
================================================== */

/* 臨時情報************* */
.rinji {background: #ffce21;margin-bottom: 1.3rem;}
.rinji h2.alerttag {background: #e2af20;}
.rinji h2.alerttag span {
  font-size: 1.7rem;
  position: relative;
  padding-left: 2.5rem;
  letter-spacing: 1px;
}
.rinji h2.alerttag span::before {
  content: '';
  display: inline-block;
  background: url(/img/top/alertIcon.png) no-repeat;
  background-size: 23px;
  width: 23px;
  height: 23px;
  position: absolute;
  left: -6px;
  top: 2px;
}
.oshirase {background: #f2f2f2; margin-bottom: 1.5rem;}
.oshirase h2.alerttag {background: #019077;}
.oshirase h2.alerttag span {
  color: #fff;
  font-size: 1.7rem;
  position: relative;
  padding-left: 2.5rem;
  letter-spacing: 1px;
}
.oshirase h2.alerttag span::before {
	content: '';
	display: inline-block;
	vertical-align: top;
	background: url(/img/top/alertIcon2.png) no-repeat;
	background-size: 23px;
	width: 23px;
	height: 23px;
	position: absolute;
	left: -6px;
	top: 1px;
}
.info-alertBox {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
}
.info-alertBox a.alertlink {
  color: #333;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  position: relative;
  line-height: 1;
}
.info-alertBox a.alertlink::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg);
  margin-top: -5px;
}
.info-alertBox h2.alerttag {
	border-radius: 3px;
	display: inline-block;
	font-weight: 500;
	padding: 8px 0;
	width: 11%;
	text-align: center;
	line-height: 1;
}
.info-alertBox .alertdetail {
	display: inline-block;
	vertical-align: top;
	font-size: 1.7rem;
	margin-left: 1.1rem;
	width: 87%;
	padding-top: 0.2rem;
	padding-right: 1%;
}
.alertdetail h3 { font-weight: normal; margin-bottom: 0.7rem;}
.alertdetail p {font-size: 1.6rem; margin-bottom: 0.8rem;}
.info-alertBox .alertdetail a.alertlink {display: block; line-height: 165%; padding-right: 1%;}
.info-alertBox .alertdetail a:link, .oshirase .alertdetail a:link {color: #333 !important;}
.info-alertBox .alertdetail a:hover, .oshirase .alertdetai a:hover {color: #006ebc; }
.info-alertBox .alertdetail span.newicon {color: red;font-weight: 500;}
.info-alertBox .alertdetail span.newicon img {vertical-align: middle;}
.rinjidetail a {display: block;}

/*その他のご案内*/
.Guidance {background: #f2f2f2;margin-bottom: 1.5rem;}
.Guidance-box{
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 0;
}
.Guidance h2.Guidance-tag {
	background: #019077;
	border-radius: 3px;
	display: inline-block;
    font-weight: 500;
    padding: 8px 0;
    width: 11%;
    text-align: center;
    line-height: 1
}
.Guidance h2.Guidance-tag span{
	color: #fff;
    font-size: 1.7rem;
    position: relative;
    padding-left: 2rem;
    letter-spacing: 1px;
}
.Guidance h2.Guidance-tag span::before {
	content: '';
	display: inline-block;
	vertical-align: top;
	background: url(/img/top/alertIcon2.png) no-repeat;
	background-size: 23px;
	width: 23px;
	height: 23px;
	position: absolute;
	left: -17px;
	top: 1px;
}
.Guidance .pointbox {display: flex; flex-wrap: wrap;}
.Guidance .pointbox figure{margin-right: 1rem;}
.Guidance .pointbox p{font-weight: 500;}
.Guidance .Guidance-detail{
	display: inline-block;
    vertical-align: top;
    font-size: 1.7rem;
    margin-left: 1.1rem;
    width: 87%;
    padding-top: 0.2rem;
    padding-right: 1%;
}
.Guidance .Guidance-detail ul{margin-bottom: .5rem;}


/* 障害情報：table************* */
.sysmainte-wrap table.table_gray {width: 100%;}
.sysmainte-wrap table.table_gray th {width: 9em !important;}


/* ----------------------------------------------------------
SP・TB調整用
------------------------------------------------------------- */
@media screen and (max-width: 1280px) {	
	.info-alertBox,.Guidance-box{ margin: 0 2% !important; max-width: 100%;}
	.info-alertBox h2.alerttag { width: 135px;margin-bottom: .8rem;}
	.Guidance h2.Guidance-tag{width: 135px;margin-bottom: .8rem;}
	.info-alertBox .alertdetail {width: 100%; margin-left: 0; padding-top: 0;}
	.Guidance .Guidance-detail{width: 100%;margin-left: 0;padding-top: 0;}
	.info-alertBox a.alertlink::after {right: -6px;}
}
@media screen and (min-width: 1px) and (max-width: 767px) {
 /* .rinji .alerttag span, .oshirase .alerttag span {font-size: 1.4rem;padding-left: 21px;}*/
  .rinji .alerttag span::before, .oshirase .alerttag span::before {
    background-size: 17px;
    width: 17px;
    height: 17px;
  }
  .rinji .alerttag span::before, .oshirase .alerttag span::before {top: 2px;}
	.info-alertBox a.alertlink::after {width: 8px;  height: 8px;}
	.info-alertBox h2.alerttag { width: 110px;  padding: 6px 0; margin-bottom: .5rem;font-size: 0;}
	.rinji h2.alerttag span, .oshirase h2.alerttag span {font-size: 1.5rem; padding-left: 2.2rem;}
	.rinji h2.alerttag span::before{background-size: 18px; width: 18px; height: 18px; left: -3px; top: 3px;}
	.oshirase h2.alerttag span::before {background-size: 18px; width: 18px; height: 18px; left: -3px; top: 2px;}
	.rinji .alerttag span::before, .oshirase .alerttag span::before {top: 2px;}
	.info-alertBox{ margin: 0 5%; max-width: 100%;}
	.info-alertBox .alertdetail {
		font-size: 1.4rem;
		width: 99%;
		line-height: 152%;
		padding-right: 1%;
		margin-left: 0rem;
	}
	.info-alertBox .alertdetail a.alertlink {padding-right: 2%;}
	.info-alertBox a.alertlink::after {right: -1%;}
	.alertdetail h3 { margin-bottom: 0.5rem;}
	.alertdetail p {font-size: 1.35rem; }
	.Guidance h2.Guidance-tag{
		width: 110px;
		padding: 6px 0;
		margin-bottom: .5rem;
		font-size: 0;
	}
	.Guidance h2.Guidance-tag span{font-size: 1.5rem; padding-left: 1.5rem;}
	.Guidance h2.Guidance-tag span::before{
		background-size: 18px;
		width: 18px;
		height: 18px;
		left: -13px;
		top: 2px;
	}
	.Guidance .Guidance-detail {
		font-size: 1.4rem; 
		width: 99%;
		margin-left: 0;}	
}