.subpage main {
	width: 1000px;
  max-width: 100%;
	margin:0 auto;
	background-color:#f0e7d8;
}

#topics .img_main {
	width:100%;
}


#header_page #header_page_inner {
	padding: 160px 0 0 0;
}

#topics .lead h3 {
	font-size:24px;
	font-weight:bold;
	text-align:center;
}

#topics .lead p {
	font-size:16px;
	line-height: 1.8;
}


.navigator ul.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  margin-bottom: -20px;
  margin-bottom: -2em !important;
  padding: 0;
}

.navigator ul.list li {
	width: calc(100% / 3);
	flex: 0 0 calc(100% / 3);
	position: relative;
	margin: 0;
	padding: 40px 0 80px;
	text-align: center;
}

.navigator ul.list li p.caption{
	margin:10px auto 6px;
  font-size:18px;
	font-weight:bold;
	color:#000;
}

.navigator ul.list li p{
  font-size:13px;
	color:#808080;
}

.navigator ul.list li img{
  width: 223px;
}

.contents {
	padding: 0 0 20px 0;
	margin-bottom: 40px;
}


.contents .box {
	margin:30px 40px;
	background-color:#4d4136;
	padding:20px 20px 60px 20px;
}

.contents .box ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  margin-bottom: -20px;
  margin-bottom: -2em !important;
  padding: 0;
}

.contents .box ul li{
	width: calc(100% / 5);
	flex: 0 0 calc(100% / 5);
}

.contents .box ul li img{
  width: 157px;
}

.contents .box .pct {
	width: 250px;
	margin:0 20px 20px 0;
	display: inline-block;
	vertical-align: top;
}

.contents .box .pct img {
  width: 250px;
}

.contents .box dl {
	width: 600px;
	display:inline-block;
	color:#fff;
}

.contents .box dt {
	font-size:36px;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
.contents .box dt span{
	display:block;
	font-size:24px;
	line-height:1.4;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

.contents .box dd.name {
	font-size:14px;
	margin:10px 0;
}

.contents .box dd {
	font-size:14px;
	line-height:1.5;
}

.contents .box dd.name::before {
	content: "";
	color:#fff;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill%3D%22%23fff%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2220%22%20viewBox%3D%220%200%2014%2020%22%3E%3Cpath%20d%3D%22M6.98%2C13h.039A2.984%2C2.984%2C0%2C0%2C0%2C10%2C10.02V2.98a3%2C3%2C0%2C0%2C0-6%2C0v7.04A2.984%2C2.984%2C0%2C0%2C0%2C6.98%2C13ZM6%2C2.98a1%2C1%2C0%2C0%2C1%2C2%2C0v7.04a.982.982%2C0%2C0%2C1-.981.98H6.98A.982.982%2C0%2C0%2C1%2C6%2C10.02ZM12%2C10A5%2C5%2C0%2C0%2C1%2C2%2C10H0a7.006%2C7.006%2C0%2C0%2C0%2C6%2C6.92V20H8V16.92A7.006%2C7.006%2C0%2C0%2C0%2C14%2C10Z%22%2F%3E%3C%2Fsvg%3E');
  margin-right: 5px;
  transform: translateY(2px);
}

.soon {
	font-size:24px;
	font-weight:bold;
	margin:40px auto 60px;
	text-align:center;
	line-height:1.5;
	text-decoration:underline;
}



/* Width 1024px- */
@media screen and (min-width: 1024px) {
}

/* Width -560px */
@media screen and (max-width: 560px) {

}
/* Br */
@media screen and (min-width: 680px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 680px){   
  .pc { display:none; }
  .sp { display:block; }

	#header_page #header_page_inner {
		padding: 60px 0 0 0;
	}

	.navigator ul.list li img {
	    width: 100%;
	}

	.contents .box {
    margin: 20px;
		padding: 10px 10px 30px 10px;
	}

	.contents .box .pct {
		width:100%;
		text-align:center;
	}

	.contents .box ul {
		margin:20px 0 !important;
	}

	.contents .box ul li {
	    width: calc(100% / 3);
			padding:2px 0;
	    flex: 0 0 calc(100% / 3);
	}

	.contents .box ul li img {
		width:100%;
	}

	.contents .box dl {
		width: 100%;
	}




}