@charset "utf-8";

/*重要*/
.important {
    border: 1px solid rgba(200, 34, 54, 0.6) !important;
    /* border-radius: 0; */
    padding: 0 6px;
    background: #c82236;
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-size: 0.8em;
    min-width: 100% !important;
    line-height: 1.6;
    border-radius: 100px;
}
/*障害・メンテナンス*/
.category .maintenance {
    color: #d54e13;
    border: 1px solid rgba(213, 78, 19, 0.3);
    margin: 0;
    background: rgba(213, 78, 19, 0.05);
}
/*情報セキュリティ*/
.category .security {
    color: #0abe80;
    border: 1px solid rgba(10, 190, 128, 0.8);
    background: rgba(10, 190, 128, 0.05);
}
/*ニュース*/
.category .news {
    color: #c58ed8;
    border-radius: 100px;
    border: 1px solid rgba(197, 142, 216, 0.8);
	background:rgba(197, 142, 216, 0.05);
}
/*イベント情報*/
.category .event {
    color: #ebba45;
    border: 1px solid rgba(237, 204, 126, 0.8);
    background: rgba(237, 204, 126, 0.1);
}
/*緊急情報*/
.category .emergency {
    background: rgb(159 17 34);
    border: 1px solid rgb(159 17 34);
    color: #fff;
    min-width: inherit;
}



/*+++++++++++++++++++++++++++++++++++
レスポンシブPC版
++++++++++++++++++++++++++++++++++++*/
.news_top .tabbox {
    display: none;
}
	
.news_maintenance .tabbox,
.news_maintenance li:not(.maintenance) {
    display: none;
}
.news_security .tabbox,
.news_security li:not(.security) {
    display: none;
}
.news_news .tabbox,
.news_news li:not(.news) {
    display: none;
}	
.news_event .tabbox,
.news_event li:not(.event) {
    display: none;
}		

/*++++++++++++++
news 全頁共通
++++++++++++++*/
iframe {
    width: 100%;
    overflow: hidden;
}

iframe body {
    background: none;
}
.tabbox {
    display:flex;

    position: relative;
    gap: 0;
}
.tabbox:before {
    content:"";
    position: absolute;
}

.tabbox a.select {border-bottom: none;background: #fff;width: auto;}
.tabbox a.select:before {
    content:"";
    background: #fff;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.newsbox {
    padding: 0;
    box-sizing: border-box;
    overflow-y: hidden;
    width: 100%;
}

.newsbox > ul {
    padding: 0;
    margin: 0;
}
.newsbox > ul > li{
    margin: 0;
    border-bottom: 1px solid rgba(112, 112, 112, 0.2);
    list-style-type: none;
}
.newsbox > ul > li:last-child {border:none;}

/*緊急情報*/
.emergencybox {
    border: 2px solid rgb(159 17 34 / 60%) !important;
    border-radius: 5px;
    padding: 0 20px 0;
    display: block;
    background: rgba(200, 34, 54, 0.1);
    margin: 0 0 10px;	
}
.emergencybox li.emergency dt {
	margin:0;
}
.emergencybox ul li.emergency a:before {
	right:-10px;
	color: rgba(200, 34, 54, 14);
}

/*+++++++++++++++++++++++++++++++++++
NEWS記事　日付タイトル（トップページ・詳細）
++++++++++++++++++++++++++++++++++++*/
dl.news-title{
    align-items: center;
    justify-content: left;
    display: flex;
}
dl.news-title dt {
    display: flex;
    align-items: center;
    margin: 0 30px 0 0;
}
dl.news-title dt b{
    font-size: 0.85em;
    font-weight: 400;
    letter-spacing: -0.5px;
    padding: 0 10px 0 0;
    color: #666;
}
dl.news-title dd{
    display: flex;
    align-items: center;
    margin: 0;
}
dl.news-title dd p {
    padding: 0;
    font-weight: 500;
    font-size: 0.9em;
    letter-spacing: 0;
}

.newsbox ul li a {
    padding: 12px 0;
    display: block;
    position: relative;
}
.newsbox > ul > li a p {
	color: var(--main-001);
	text-decoration: underline;
	font-size: 0.8em;
}
.newsbox > ul > li a:hover p {
    text-decoration:none;
}
.newsbox > ul > li a:hover:before {
    content:"\f054";
    color: var(--main-001);
}
.newsbox ul li a:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    color: var(--main-001);
    font-style: normal;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 2%;
    display: flex;
    align-items: center;
    font-size: 0.8em;
}
/*+++++++++++++++++++++++++++++++++++
NEWS記事　日付タイトル（ニュース一覧・詳細）
++++++++++++++++++++++++++++++++++++*/
.news dl.news-title dt {
}
.news dl.news-title dd {
}

/*+++++++++++++++++++++++++++++++++++
NEWS記事　日付タイトル（詳細デザイン）
++++++++++++++++++++++++++++++++++++*/
dl.news-title.single {
    margin: 0 0 20px;
    display: block;
}
dl.news-title.single dt {
    width: 100%;
}
dl.news-title.single dd {
	font-size: 1.8em;
	letter-spacing: 0;
	font-weight: 600;
	position: relative;
	padding: 5px 0 20px;
	width: 100%;
}
dl.news-title.single dd:after {
    content: "";
    position: absolute;
    width: 100%;
    background: #ccc;
    left: 0;
    bottom: 5px;
    height: 1px;
}
dl.news-title.single dd:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--main-opa-001);
    bottom: 2px;
    left: 0;
}


/*カテゴリ*/
.category {
    position: relative;
    padding: 0;
    display: flex;
    margin: 0 10px 0 0;
}

.category > div {
    margin: 0 5px 0 0;
    line-height: 1.2;
    padding: 5px 10px;
    font-size: 0.8em;
    min-width: 135px;
    border-radius: 100px;
    text-align: center;
    font-weight: 600;
    border: 1px solid rgba(112, 112, 112, 0.6);
    box-sizing: border-box;
}

/*ニュース*/
.category .news {
    color: #c58ed8;
    border-radius: 100px;
}
/*イベント情報*/
.category .event {
    color: #ebba45;
}

/*+++++++++++++++++++++++++++++++++++
レスポンシブタブレット版（一部）
++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width: 1023px) {

/*+++++++++++++++++++++++++++++++++++
NEWS記事　日付タイトル（トップページ・詳細）
++++++++++++++++++++++++++++++++++++*/
dl.news-title {
    display: block;
}   
}
	
/*+++++++++++++++++++++++++++++++++++
レスポンシブスマホ版
++++++++++++++++++++++++++++++++++++*/
@media screen and (max-width: 767px) {
/*重要*/
.important {width: 38px;box-sizing: border-box;margin: 0 10px 0 0;padding: 3px !important;}
.news_top .tabbox {
    display: none;
}
    
.news_maintenance .tabbox,
.news_maintenance li:not(.maintenance) {
    display: none;
}
.news_security .tabbox,
.news_security li:not(.security) {
    display: none;
}
.news_news .tabbox,
.news_news li:not(.news) {
    display: none;
}	
.news_event .tabbox,
.news_event li:not(.event) {
    display: none;
}		
 

/*++++++++++++++
news 全頁共通
++++++++++++++*/
iframe {
    width: 100%;
    height: 335px;
    padding: 0 0 50px;
    overflow: hidden;
}

iframe body {
    background: none;
}

.tabbox:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 1px;
    background: none;
    bottom: 0;
    z-index: 0;
}


.tabbox a.select {background: #fff;}
.tabbox a.select:before {
    content:"";
    background: #fff;
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.newsbox {
    padding: 0;
}

.newsbox > ul {border-top: 1px solid #ccc;}
.newsbox > ul > li{
    padding: 15px 0;
}

.newsbox > ul > li > dl{
    align-items: center;
    justify-content: left;
    overflow:hidden;
    position: relative;
    display: block;
}
.newsbox > ul > li dt {
    margin: 0 0 5px;
    width: auto;
}
.newsbox > ul > li dt b{
    font-size: 0.8em;
    margin: 0;
    letter-spacing: 0;
}
.newsbox > ul > li dd.category {
    clear: inherit;
    padding: 1px 0 0;
    margin: 0;
} 
.newsbox > ul > li dd{
	width: 95%;
}
dl.news-title dd p {width: 100%;}
.newsbox > ul > li a {
    letter-spacing: 1px;
    padding: 0;
    display: block;
}

/*カテゴリ*/
.category {display: flex;width: auto;}

.category > div {margin: 0 10px 0 0;font-size: 0.7em;letter-spacing: 0;min-width: 100px;}

.newsbox > ul > li a:before {
    right: 0;
}    
/*+++++++++++++++++++++++++++++++++++
NEWS記事　日付タイトル（トップページ・詳細）
++++++++++++++++++++++++++++++++++++*/
dl.news-title {
    display: block;
}   
/*+++++++++++++++++++++++++++++++++++
NEWS記事　日付タイトル（ニュース一覧・詳細）
++++++++++++++++++++++++++++++++++++*/
.news dl.news-title dt {
	width: auto;
}
.news dl.news-title dd {
	width: auto;
} 
	
/*+++++++++++++++++++++++++++++++++++
NEWS記事　日付タイトル（詳細デザイン）
++++++++++++++++++++++++++++++++++++*/
dl.news-title.single {
    margin: 0 0 20px;
}
dl.news-title.single dd {
	font-size: 1.1em;
}
dl.news-title.single dd:after {
    content: "";
    position: absolute;
    width: 100%;
    background: var(--main-001);
    left: 0;
    bottom: 5px;
    height: 1px;
}
dl.news-title.single dd:before {
    content:"";
    position: absolute;
    width: 100%;
    height: 3px;
    background: var(--main-opa-001);
    bottom: 2px;
    left: 0;
}


}