/*---------------------------------------
	outlet
----------------------------------------*/

#outlet .section__ttl {
	line-height:1.6em;
}

#outlet .theme {
	max-width:800px !important;
	margin-left:auto;
	margin-right:auto;
}

#outlet .theme + .theme {
	margin-top:1.25em;
}

.sdgs-wrap {
	text-rendering: optimizespeed;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-align-content: flex-start;
	-ms-flex-line-pack: start;
	align-content: flex-start;
}

.sdgs_box,
.sdgs_box_none {
	position:relative;
	width:24%;
	margin:0 auto 40px;
	padding:18px 18px 190px 18px;
	transition: .5s;
}
.sdgs_box:hover {
    box-shadow: 0 0 20px rgba(32, 30, 28, .05);
}

.sdgs_box h1{
	margin-bottom:0.5em;
	font-size: 2.0rem;
	line-height: 1.6;
	font-weight:bold;
	border-bottom:#999 1px solid;
	display: flex;
	align-items: center;
	height:3.5em;
}
.sdgs_box p{
	margin-top:12px;
	font-size: .938em;
}

.sdgs-goal {
	width:100%;
	max-width:243px;
	position: absolute;
	bottom:12px;
	margin-top:12px;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	gap:5px;
}
.sdgs-main {
	width:100%;
	max-width:300px;
	height:auto;
}

.outlet-link-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  justify-content: center;
  gap: 0px min(3.1vw, 40px);

  max-width: 800px;
  margin: 50px auto 0px;
}
.outlet-link-guide li {
  border: 1px solid;
  transition: background-color 0.25s ease;
}
.outlet-link-guide li a {
  display: block;
  text-align: center;
  font-weight: bold;
  padding: 12px 10%;
  transition: color 0.25s ease;
}  
.outlet-link-guide li:hover {
  background-color: #333;
}
.outlet-link-guide li:hover a {
  color: #fff;
}

/*---------------------------------------
	outlet
----------------------------------------*/
.outlet {
}

@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 767px) {

	.sdgs_box h1{
		font-size: 1.4rem;
		height:5em;
	}
	.sdgs_box p{
		font-size: .8em;
	}

	#outlet .section__ttl {
		font-size:2.0rem;
	}
	.sdgs-goal {
		max-width:330px;
		justify-content: center;
	}

	.sdgs_box,
	.sdgs_box_none {
		width:48%;
		padding:8px 8px 110px;
	}
	.sdgs-main {
		width:110px;
		height:auto;
	}
	.sdgs-sub {
		width:40px;
		height:auto;
	}

}
