/*	関連企画
============================== */

/*	h2
============================== */
.titleArea { background: none;}
.titleArea h2 {
	margin: 0 auto;
	background-position: center top;
    background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	background-image: url(../img/top_h2_contents.png); 
	}

@media all and (min-width: 768px) {
	.titleArea { height: 110px; padding-top: 40px}
	.titleArea h2 { width:500px; height: 62px; }
}

@media all and (max-width: 767px) {
	.titleArea { height: 85px; padding-top: 25px}
	.titleArea h2 { width:90%; height: 50px; }
}

/*	contents
============================== */

ul.listArea {display: flex;
	flex-wrap: wrap;
	justify-content: left;
}
ul.listArea li { vertical-align: top; line-height: 1.5em; }

ul.listArea h3 { padding: 10px 0 3px; font-size: 1.1em; color: #dc097b; text-align: center;}
ul.listArea .date {color: #185baa; padding-bottom:3px; font-size: 0.9em;}
ul.listArea .txt {font-size: 0.9em;}

ul.listArea li figure span {
	display: block;
	position: relative;
	background-size: 100%;
	background-position: center center;
	height: 0;
    padding: 56.26% 0 0;
}
ul.listArea li figure span img {
	display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
ul.listArea li figure {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

.listArea a:hover figure { opacity:0.8;}

ul.listArea li h4 { background-color: #e4031e; color:#fff; text-align: center; font-size: 1.1em; padding: 0.2em 0;}

@media all and (min-width: 768px) {
	ul.listArea li { width:calc((100% - 24*2px)/3); padding-bottom: 40px;}
	ul.listArea li:nth-child(3n-1) {margin: 0 24px; }
}

@media all and (max-width: 767px) {
	ul.listArea li {width:46%; margin: 0 2%; padding-bottom: 25px;}
	.listArea h3 { padding: 8px 0 3px; font-size: 1.0em;}
	ul.listArea .date {font-size: 0.8em; line-height: 1.5em;}
	ul.listArea .txt {font-size: 0.8em; line-height: 1.5em;}
}