@charset "UTF-8";

.box-contents {
	width: calc(100% / 3);
	display: table-cell;
}

.box-contents:hover {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.box-contents a {
	text-decoration: none;
	color: #FFFFFF;
}

.box-contents dt {
	text-align: center;
	font-size: 2.4rem;
	background-image: url(../common/img/corner01.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 26px auto;
	padding: 20px 20px 10px;
	font-weight: bold;
}

.box-contents dd {
	padding: 0 30px 20px;
}

.box-contents dd.box-contenta-img {
	padding: 0;
}

.box-contents:nth-child(1) dt,
.box-contents:nth-child(1) dd {
	background-color: rgba(45, 40, 127, 0.8);
}

.box-contents:nth-child(2) dt,
.box-contents:nth-child(2) dd {
	background-color: rgba(141, 0, 72, 0.8);
}

.box-contents:nth-child(3) dt,
.box-contents:nth-child(3) dd {
	background-color: rgba(0, 98, 23, 0.8);
}

main h2 {
	font-size: 2.4rem;
	text-align: center;
	padding: 50px 0 20px;
	background: none;
}

.box-topics {
	display: table;
	width: 475px;
	margin: 0 10px 10px 0;
	float: left;
}

.box-topics a {
	display: block;
	text-decoration: none;
	padding: 10px 0;
}

.box-topics:nth-child(even) {
	margin: 0 0 10px 0;
}

.box-topics-ttl {
	display: table-cell;
	vertical-align: middle;
	width: 110px;
	height: 100px;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.4;
	font-weight: bold;
}

.box-topics-text {
	display: table-cell;
	vertical-align: middle;
	padding: 0 20px 0 20px;
}

a .box-topics-text {
	color: #262626;
}

a:hover .box-topics-text {
	text-decoration: underline;
}

.box-topics-green { background-color: #e5efe7; }
.box-topics-purple { background-color: #eae9f2; }
.box-topics-red { background-color: #f3e5ec; }

.box-topics-green a .box-topics-ttl {
	border-right: #006217 1px solid;
	color: #006217;
}
.box-topics-purple a .box-topics-ttl {
	border-right: #2D287F 1px solid;
	color: #2D287F;
}
.box-topics-red a .box-topics-ttl {
	border-right: #8D0048 1px solid;
	color: #8D0048;
}


@media screen and (max-width: 768px) {

  #header-index h1 picture img{
    width: 80%;
  }
  
	.box-contents {
		width: 100%;
		display: block;
		margin: 30px 0 0 0;
	}

	main h2 {
		font-size: 2.6rem;
	}

	.box-topics {
		display: block;
		width: 100%;
		margin: 0 10px 10px 0;
		float: none;
	}

}

@media screen and (max-width: 640px) {
  #header-index h1 picture img{
    width: 90%;
  }
}