@charset "utf-8";

#mainContent .accordion {
	border: none;
	border-radius: 0;
}

#mainContent .accordion .hash-contents-list {
	height: 240px;
	border: none;
	font-size: 0px;
	letter-spacing: 0.2em;
	text-align: center;
}
	#mainContent .accordion article + .hash-contents-list { margin-top: 20px;}
	#mainContent .accordion .hash-contents-list-4 { letter-spacing: 0;}

.accordion > .hash-contents-list > .list-row {
	height: 260px;
	margin: 0;
	vertical-align: middle;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: #fff;
}
	.accordion > .hash-contents-list > .list-row-0 { background-image: url(../images/slide1_h2.jpg);}
	.accordion > .hash-contents-list > .list-row-1 { background-image: url(../images/slide2_h2.jpg);}
	.accordion > .hash-contents-list > .list-row-2 { background-image: url(../images/slide3_h2.jpg);}
	.accordion > .hash-contents-list > .list-row-3 { background-image: url(../images/slide4_h2.jpg);}
	.accordion > .hash-contents-list > .list-row-4 { background-image: url(../images/slide5_h2.jpg);}
    .accordion > .hash-contents-list > .list-row-5 { background-image: url(../images/slide6_h2.jpg);}

.accordion > .hash-contents-list > .list-row a {
	position: relative;
	display: block;
	height: 240px;
	padding: 0;
	background-color: rgba(0,0,0,0);
	text-decoration: none;
	color: #fff;

	line-height: 240px;
}

.accordion > .hash-contents-list > .list-row a:hover,
.accordion > .hash-contents-list > .list-row.active a {
	background-color: rgba(0,0,0,0);
}

.accordion > .hash-contents-list > .list-row a:before {
	display: block;
	content: "";
	position: absolute;
	top: 159px;
	left: 90%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
}
	.accordion > .hash-contents-list > .list-row-0 a:before { background: #45c12b;}
	.accordion > .hash-contents-list > .list-row-1 a:before { background: #01ddff;}
	.accordion > .hash-contents-list > .list-row-2 a:before { background: #ffbb3c;}
	.accordion > .hash-contents-list > .list-row-3 a:before { background: #8993e8;}
	.accordion > .hash-contents-list > .list-row-4 a:before { background: #ff5577;}
    .accordion > .hash-contents-list > .list-row-5 a:before { background: #d2d2ff;}

.accordion > .hash-contents-list > .list-row a:after {
	display: block;
	content: "";
	position: absolute;
	top: 165px;
	left: 90%;
	width: 16px;
	height: 16px;
	margin-left: -9px;
	border-bottom: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
	.accordion > .hash-contents-list > .list-row.active a:after {
		top: 173px;
		border-top: 3px solid #fff;
		border-left: 3px solid #fff;
		border-bottom: none;
		border-right: none;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

/* h2 added title */
h2.sustainable {
  color: #78b1a8;
  font-size: 24px;
  letter-spacing: 0.22em;
  font-weight: 500;
  text-align: center;
  margin: 20px 0px;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
}

@media screen and (max-width: 768px) {
	#mainContent .accordion .hash-contents-list,
	.accordion > .hash-contents-list > .list-row,
	.accordion > .hash-contents-list > .list-row a {
		height: 90px;
		line-height: 90px;/*
		letter-spacing: -0.1em;*/
		font-size: 17px;
		font-weight: bold;
	}

	.accordion > .hash-contents-list > .list-row a:before {
		top: auto;
		bottom: 0;
		left: 50%;
		width: 25px;
		height: 25px;
		margin-left: -12.5px;
	}

	.accordion > .hash-contents-list > .list-row a:after {
		top: auto;
		bottom: 10px;
		left: 50%;
		width: 10px;
		height: 10px;
		margin-left: -6px;
		border-bottom: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.accordion > .hash-contents-list > .list-row.active a:after {
		top: auto;
		bottom: 5px;
		border-top: 2px solid #fff;
		border-left: 2px solid #fff;
		border-bottom: none;
		border-right: none;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}

/* article */
#mainContent article {
	margin: 0 0 20px;
	padding: 30px 40px;
	background: #f3f3f3
}

@media screen and (max-width: 768px) {
	#mainContent article {
		padding: 15px;
	}
}

#mainContent article h2 {
	display: none;
}

#mainContent article > .articleBody > p {
	font-size: 16px;
}

#mainContent article dl {
	margin-top: 30px;
	padding: 30px 40px;
	background: #fff;
}
	#mainContent article dl + dl { margin-top: 10px;}

@media screen and (max-width: 768px) {
	#mainContent article > .articleBody > p {
		font-size: 18px;
		font-weight: bold;
	}

	#mainContent article dl {
		padding: 15px;
	}
}

#mainContent article dl dt {
	position: relative;
	padding-left: 1.2em;
	font-size: 16px;
	font-weight: bold;
}
	#mainContent article dl dd + dt,
	#mainContent article dl dt + dt {
		margin-top: 1.0em;
	}

@media screen and (max-width: 768px) {
		#mainContent article dl dd + dt,
		#mainContent article dl dt + dt {
			margin-top: 0.5em;
		}
}

#mainContent article dl dt:before {
	display: block;
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 1.0em;
	height: 1.0em;
	background: #000;
}
    #mainContent article#slide1 dl dt:before { background: #107ec3;}
	#mainContent article#slide2 dl dt:before { background: #ff6347;}
	#mainContent article#slide3 dl dt:before { background: #5bac34;}
	#mainContent article#slide4 dl dt:before { background: #e99313;}
	#mainContent article#slide5 dl dt:before { background: #ff5577;}
	#mainContent article#slide6 dl dt:before { background: #d2d2ff;}

#mainContent article dl dt.headDt {
	font-size: 20px;
	padding-left: 0;
}
	#mainContent article dl dt.headDt:before { display: none;}

#mainContent article dl dd {
	padding-top: 1.0em;
	padding-left: 1.2em;
}

@media screen and (max-width: 768px) {
	#mainContent article dl dd {
		padding-top: 0.5em;
	}
}

/* .ph */
#mainContent article .ph {
	display: table;
	margin-top: 20px;
}

#mainContent article .ph li {
	display: table-cell;
	width: 33.333%;
}

#mainContent article .ph li + li {
	padding-left: 1px;
}

#mainContent article .ph li img {
	width: 100%;
}

@media screen and (max-width: 768px) {
	#mainContent article .ph {
		display: block;
		margin-top: 20px;
		padding-bottom: 15px;
	}

	#mainContent article .ph li {
		display: block;
		width: 100%;
		padding: 0 15px;
	}

	#mainContent article .ph li + li {
		padding-left: 15px;
		padding-top: 10px;
	}
}