@charset "utf-8";
/* CSS Document */

#news{ margin: 5.5rem auto 7.5rem;}
#news .inner{ display: flex;}
#news .inner .title{ flex-basis: 240px; margin-bottom: 0;}
#news .inner .post-wrap{ flex-basis: calc(100% - 240px);}
#news .post-wrap dl:first-of-type{ border-top: 1px solid #c7c7c7;}
#news .post-wrap dl{ display: flex; padding: 35px 0; border-bottom: 1px solid #c7c7c7;}
#news .post-wrap dl dt{ flex-basis: 8em;}
#news .post-wrap dl dd{ flex-basis: calc(100% - 8em);}
#news .post-wrap a.exlink{ color: #d80c18; text-decoration: underline; text-underline-offset: 0.3em;}
#news .post-wrap a.exlink::after{ content: ''; display: inline-block; width: 11px; height: 11px; margin: 0 0.3rem 0 0.3rem; background: url("../img/common/ic_exlink_red.svg") no-repeat right center/100% auto;}
#news .post-wrap details{ display: 100%;}
#news .post-wrap details summary { position: relative; padding-right: 40px; cursor: pointer;list-style: none;}
#news .post-wrap details summary::-webkit-details-marker { display: none;}
#news .post-wrap details summary::after { content: '＋'; position: absolute; top: 0; right: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; line-height: 1;}
#news .post-wrap details[open] summary::after { content: 'ー';}
#news .post-wrap dl dt .post-date,
#news .post-wrap dl dd p{ font-size: 16px; line-height: 1.8em;}
#news .post-wrap dl dd .post-tit{ font-weight: bold;}
#news .post-wrap dl dd .post-txt{ padding-right: 40px; margin-top: 0.5em;}
#news .red{ color: #d80c18;}
#news .page-nav{ display: flex; justify-content: center; gap: 10px; margin-top: 7.5rem;}
#news .page-nav a{ display: flex; width: min(10vw,40px); height: min(10vw,40px); font-size: min(4vw,16px); line-height: 1em; font-weight: 500; border: 2px solid #333; border-radius: 6px; justify-content: center; align-items: center;}
#news .page-nav a:hover,
#news .page-nav a.current{ background: #333; color: white;}
#news .post-wrap dl.noTxt details{ pointer-events: none;}
#news .post-wrap dl.noTxt details summary{ padding: 0;}
#news .post-wrap dl.noTxt details summary::after{ content: none;}

/* --- Responsive --- */
@media only screen and (max-width: 1000px) and (min-width: 667px){

}

@media only screen and (max-width: 666px){
	#news .inner,
	#news .post-wrap dl{ display: block; padding: 20px 0;}
	#news .post-wrap dl dd .post-txt{ padding-right: 0;}
}

/* --- Responsive --- */
@media only screen and (max-width: 666px){
  
}