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

#commonOutlineBox { font-size: 14px; background: #fff; box-sizing: border-box; padding: 10px;}
#commonOutlineBox dl { display: flex; flex-wrap:wrap; justify-content: flex-start; margin: 0 0 20px 0;}
#commonOutlineBox dl dt { flex-grow: 0; flex-shrink:1; flex-basis:9em; text-align: left; display: block;border-bottom: #ccc solid 1px; box-shadow: inset -1px 0 0 rgba(0,0,0,0.2); }
#commonOutlineBox dl dd { flex-grow:0; flex-shrink:1; flex-basis:calc(50% - 9em); text-align: left; display: block;border-bottom: #ccc solid 1px;}
#commonOutlineBox dl dt > span { display: block; box-sizing: border-box;  padding: 1em 0.5em;}
#commonOutlineBox dl dd > span { display: block; box-sizing: border-box;  padding: 1em 0.5em; max-width: calc(100% - 5px)}

#commonOutlineBox p.caption { display: block; font-size: 12px;}

#commonInfoBox { position: relative; width: 100%; max-width: 960px; margin: 40px auto 40px auto; padding: 0 0 0 260px; border: #ccc solid 1px; box-sizing: border-box;}
#commonInfoBox h3 { position: absolute; left: 0; top:0; width:260px;}
#commonInfoBox ul {  height: 90px; overflow: scroll; overflow-x:hidden; padding: 10px; box-sizing: border-box;}
#commonInfoBox ul li { font-size: 14px; margin: 0 0 0.5em 0; display: block; padding: 0 0 0 5.5em; position: relative;}
#commonInfoBox ul li a { color: #bb3614; text-decoration: none;}
#commonInfoBox ul li time { display: block; position: absolute; left: 0; top:0; font-size: 80%;}

#commonEventBnr { width: 100%; max-width: 1000px; margin: 0 auto 40px auto; box-sizing: border-box; padding: 0 20px;}
#commonEventBnr .bnrLink { display: block;}
#commonEventBnr .bnrLink img { width: 100%;}
#commonEventBnr .bnrTextLink { display: block; text-align: center; background: #009cac; color: #fff; text-decoration: none; padding: 0.5em 0; font-size: 16px; font-weight: bold; line-height: 1;}


@media screen and (max-width:767px){
	#commonInfoBox ul li a:hover { color: #ccc; text-decoration: none;}	
	#commonEventBnr .bnrTextLink:hover { background: #ccc; color: #fff; text-decoration: none;}
}

@media screen and (max-width:767px){
	#commonInfoBox { padding: 0; }
	#commonInfoBox h3 { position: static; width: 100%; text-align:center; background: #009cac;}
	#commonInfoBox h3 img { display: none;}
	#commonInfoBox h3::before { content: 'MIHAMA VOICE'; display: block; text-align: center; font-size: 6vw; color: #fff; line-height: 1; padding: 0.5em 0;}
	#commonInfoBox ul { width:100%; height: 300px; }
	
	#commonOutlineBox dl { font-size: 14px;}
  #commonOutlineBox dl dt { flex-grow: 0; flex-shrink:1; flex-basis:100%; background: #f1f1f1; font-weight: bold; box-shadow: none;}
  #commonOutlineBox dl dd { flex-grow:0; flex-shrink:1; flex-basis:100%; margin: 0 0 10px 0; }
  #commonOutlineBox dl dt > span { border-right:none;}
  #commonOutlineBox dl dd > span { max-width: 100%; border-bottom: none; }
  #commonOutlineBox p.caption { font-size: 12px; }
}