@charset "UTF-8";






/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---------------------------------------------------------------
お知らせ
---------------------------------------------------------------
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

#main.info .contentsArea .headerBox .upperBox { padding: 0; margin-bottom: 17px; }
#main.info .contentsBox { display: flex; justify-content: flex-end; position: relative; }
#main.info .contentsBox:before { content: ""; display: block; height: 100%; }
#main.info .contentsBox .infoListBox { flex: 0 0 300px; position: absolute; top: 0; bottom: 0; left: 0; }
#main.info .contentsBox .infoListBox > .inner { width: 300px; height: 100%; box-sizing: border-box; overflow: auto; }
#main.info .contentsBox .infoListBox ul { height: 100%; max-height: 100%; overflow: auto; }
#main.info .contentsBox .infoListBox ul li { border-bottom: 1px dotted #CCC; }
#main.info .contentsBox .infoListBox ul li input[type="checkbox"] { display: none; }
#main.info .contentsBox .infoListBox ul li label { display: block; margin-right: 0 !important; padding: 20px; text-decoration: none !important; transition: background-color ease 0.3s; }
#main.info .contentsBox .infoListBox ul li label:hover,
#main.info .contentsBox .infoListBox ul li label.active { background-color: #DFECF3; }
#main.info .contentsBox .infoListBox ul li label span.dateOuter {}
#main.info .contentsBox .infoListBox ul li label span.date { display: inline-block; font-size: 11px; }
#main.info .contentsBox .infoListBox ul li label span.label { display: inline-block; margin-left: 5px; font-size: 11px; line-height: 1; }
#main.info .contentsBox .infoListBox ul li label span.label.important { background-color: #F30; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; }
#main.info .contentsBox .infoListBox ul li label span.label.new { background-color: #FF6565; color: #FFF; font-weight: bold; font-size: 10px; font-family: system-ui; padding: 3px 5px; vertical-align: text-bottom; }
#main.info .contentsBox .infoListBox ul li label span.ttl { display: block; font-size: 14px; }
#main.info .contentsBox .infoListBox ul li label span.mark { display: none; }
#main.info > .inner > .contentsArea > .contentsBox:before { content: none !important; }
#main.info .contentsBox .infoDetailBoxOuter { flex: 0 0 calc(100% - 300px); position: relative; }
#main.info .contentsBox .infoDetailBoxOuter:after { content: ""; display: block; width: 20px; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.03) 100%); }
#main.info .contentsBox .infoDetailBox { visibility: hidden; opacity: 0; position: absolute; top: 0; bottom: 0; left: 300px; width: calc(100vw - 408px); z-index: 1; transition: all ease 0.6s; }
#main.info .contentsBox .infoDetailBox > .inner { height: 100%; /*padding: 40px;*/ box-sizing: border-box; overflow: hidden; }
#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox { visibility: visible; opacity: 1; padding: 40px; box-sizing: border-box; }
#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox h3 { font-size: 1.3em; font-family: system-ui; margin-bottom: 15px; }
#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox .infoDetailOuter { height: calc(100% - 34px); padding: 20px; background: #FFF; border: 1px solid #DDD; box-sizing: border-box; }
#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox .infoDetailOuter .infoDetailArea { height: 100%; overflow: auto; box-sizing: border-box; display: flex; }
#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox .infoDetailOuter .infoDetailArea .infoImg { margin-right: 40px; min-width: 32%; }
#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox .infoDetailOuter .infoDetailArea .infoImg img { width: 100%; max-width: 100%; }

/*colSub 非表示時対応*/
#colMain.menuClose #main.info .contentsBox .infoDetailBox { width: calc(100vw - 340px); }
@media screen and (max-width: 780px) {
 	body.Info { overflow: hidden; }
  #main.info { padding: 17px 10px 10px; }
  #main.info .contentsArea .headerBox .upperBox { margin-bottom: 17px !important; }
  #main.info .contentsArea .headerBox .upperBox h2 { font-size: 1.2em; }
  #main.info .contentsBox { display: block; height: 100%; overflow: hidden; }
	#main.info .contentsBox .infoListBox { height: 100%; max-width: 100%; overflow-y: auto; }
	#main.info .contentsBox .infoListBox > .inner { width: 100%; height: auto; }
	#main.info .contentsBox .infoDetailBox { opacity: 0; height: 0; max-height: 0; position: static; width: 100% !important; }
	/*#main.info .contentsBox .infoDetailBox > .inner { padding: 20px; }*/
	#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox { height: auto; max-height: none; opacity: 1; }
  #main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox h3 { font-size: 1em; margin-bottom: 10px; }
	#main.info .contentsBox .infoListBox ul li label { position: relative; padding: 10px 20px; }
	#main.info .contentsBox .infoListBox ul li label span.dateOuter { margin-right: 20px; }
	#main.info .contentsBox .infoListBox ul li label span.ttl { margin-right: 20px; font-size: 12px; }
	#main.info .contentsBox .infoListBox ul li input[type="checkbox"] label span.mark { display: block; position: absolute; top: 50%; margin-left: 3px; margin-top: 0; width: 15px; height: 1px; right: 15px; background-color: currentColor; }
	#main.info .contentsBox .infoListBox ul li input[type="checkbox"] label span.mark:before { content: ""; position: absolute; width: 15px; height: 1px; background-color: currentColor; }
	#main.info .contentsBox .infoListBox ul li input[type="checkbox"] label span.mark:after { content: ""; position: absolute; left: 6px; width: 8px; height: 8px; border-bottom: solid 1px currentColor; border-right: solid 1px currentColor; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
	#main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked label span.mark { position: absolute; top: 50%; margin-left: 3px; margin-top: 0; width: 15px; height: 1px; right: 15px; background-color: currentColor; }
  #main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox { padding: 10px; }
  #main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox .infoDetailOuter { padding: 10px; }
  #main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox .infoDetailOuter .infoDetailArea { display: block; max-height: 300px; }
  #main.info .contentsBox .infoListBox ul li input[type="checkbox"]:checked + label + .infoDetailBox .infoDetailOuter .infoDetailArea .infoImg { margin-right: 0; margin-bottom: 20px; width: 100%; max-width: 100%; }
}



/*-------------------------------------------------------------
ダッシュボード - モーダル表示
-------------------------------------------------------------*/
.modalOuter .modalWindow .infoDetailBox { height: 100%; overflow: hidden; box-sizing: border-box; }
/*.modalOuter .modalWindow .infoDetailBox .inner { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; grid-template-areas: "col1" "col2"; }
.modalOuter .modalWindow .infoDetailBox .inner .ttl { grid-area: col1; }
.modalOuter .modalWindow .infoDetailBox .inner .infoDetailOuter { grid-area: col2; }*/
.modalOuter .modalWindow .infoDetailBox .inner { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -ms-grid-rows: auto 0 1fr; grid-template-rows: auto 1fr; gap: 0; grid-template-areas: "col1" "col2"; height: 100%; overflow: hidden; box-sizing: border-box; }
.modalOuter .modalWindow .infoDetailBox .inner .ttl { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: col1; }
.modalOuter .modalWindow .infoDetailBox .inner .infoDetailOuter { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: col2; padding: 20px; background-color: #F5F6FA; overflow: auto; box-sizing: border-box; background: #FFF; border: 1px solid #DDD }
.modalOuter .modalWindow .infoDetailBox .inner .ttl h3 { font-size: 1.3em; font-family: system-ui; margin-bottom: 15px; }
.modalOuter .modalWindow .infoDetailBox .inner .infoDetailArea { height: 100%; overflow: auto; display: flex; box-sizing: border-box; }
.modalOuter .modalWindow .infoDetailBox .inner .infoDetailArea .infoImg { margin-right: 40px; min-width: 32%; }
.modalOuter .modalWindow .infoDetailBox .inner .infoDetailArea .infoImg img { width: 100%; max-width: 100%; height: auto; }