@charset "utf-8";

#summary h3 { text-align: right; color: #FF0000; }
.title { height: 85px; }
.title h2 { bottom: 0; top:auto; }

#voice h4 { color: #554326; font-size: 22px; /*width: 370px; height: 49px; overflow: hidden;text-indent: -10000px;*/ }
#voice h5 { color: #e06a66; font-size: 18px; line-height: 20px; margin: 20px 0 10px;  }
#voice h5 span { width: 80px; height: 20px; font-size: 13px; padding: 2px 0 0 23px; color: #ffffff;
	background: url(../images/voice.svg) left center no-repeat; display: inline-block; }
/*#voice li:first-child h4 { background: url(../images/point1.jpg?v2) left center no-repeat; background-size: contain; }
#voice li:last-child h4 { background: url(../images/point2.jpg) left center no-repeat; background-size: contain; }
#voice li h4 { background-size: contain; }*/

/*#mechanism {}

#mechanism p { margin-bottom: 30px; }
.leaf { margin-bottom: 30px; }
.leaf li { background: url("../images/icon_leaf.png") left top 5px no-repeat;
			background-size: 14px auto; padding-left: 2em; }*/
#mechanism .note { padding-left: 6em; margin-bottom: 0; margin-top: 1em; }

/*#ecofriendly {

}
#ecofriendly .cflex { 
	display: flex; 
	justify-content: space-between; 
}
#ecofriendly .img {
	width: 300px;
	text-align: right;
}
#voice .cflex {
	display: flex;
	justify-content: space-between;
}
#voice .cflex li {
	width: 360px;
}
*/
#ecofriendly .txtBox {
	width: 435px;
}
#ecofriendly p {
	margin-bottom: 20px;
}
#ecofriendly .txtBox strong { font-weight: bold; font-size: 20px; text-decoration: underline; padding-bottom: 10px; }

.data_bt { position: relative; margin-bottom: 50px; }

.data_bt .txtBox.f-left { /*width: 380px;*/ padding-bottom: 25px; }

.caption_0 .jb-caption div.jb-caption-desc {
	color: #FFFFFF;
}
.caption_1 .jb-caption div.jb-caption-desc {
	color: #FFFFFF;
}
.caption_2 .jb-caption div.jb-caption-desc {
	color: #FFFFFF;
}
.caption_3 .jb-caption div.jb-caption-desc {
	color: #FFFFFF;
}
.caption_4 .jb-caption div.jb-caption-desc {
	color: #FFFFFF;
}
.caption_5 .jb-caption div.jb-caption-desc {
	color: #FFFFFF;
}

.drawing_main { position: relative; }
.drawing_main ul li { position: absolute; }
.drawing_main ul li a { width: 60px; height: 48px; border-radius: 30px; background: #3e3a39; color: #ffffff;
	text-align: center; display: block; line-height: 18px; font-size: 12px; padding-top: 12px;
	transition:0.3s; }
.drawing_main ul li a.l1 { line-height: 60px; height: 60px; padding-top: 0; }
.drawing_main ul li a:hover { color: #ff7bac; }
.drawing_main ul li a.blue:hover { color: #3fa9f5; }
.drawing_main ul li a.yellow:hover { color: #fcee21; }


.icchityu { background: url(../images/icon_chityunetsu.svg) left center no-repeat; padding-left: 50px; font-size: 32px; font-weight: normal; margin-bottom: 20px;font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; line-height: 1.2; min-height: 46px; }
.ickuki { background: url(../images/icon_kukinetsu.svg) left center no-repeat; padding-left: 50px; font-size: 32px; font-weight: normal; margin-bottom: 20px;font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; line-height: 1.2; min-height: 46px; }
.ioil { background: url(../images/icon_oil.svg) left center no-repeat; padding-left: 50px; font-size: 32px; font-weight: normal; margin-bottom: 20px;font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; line-height: 1.2; min-height: 46px; }
.role { margin-bottom: 50px; }
.system { margin-bottom: 50px; }

#links .pagenav a { display: inline-block; width: auto; min-width: 220px; }

.c_yellow {
	color: #fff68e;
}
.c_blue {
	color: #244d97;
}
.fw_bold{ 
	font-weight: bold;
 }

.l_number { padding: 20px; border: dashed 3px #ade1ff; }
.l_number li { text-indent: -1em; padding-left: 1em; counter-increment: number; }
.l_number li::before { content:counter(number) ". "; }


.fs_130 {
	font-size: 130%;
}


#travel {
	position: relative;
}
h3.h3_2 { 
	font-size: 30px;
	font-family: 'Lato', sans-serif;
	text-align: center; 
	color: #34b8e6;
	margin-bottom: 0;
}
.bluewrap {
	position: relative;
	background: #def4ff;
	padding: 25px;
}
.bluewrapinner {
	border: dashed 2px #34b8e6;
	padding: 35px 15px;
	background: #FFFFFF;
	position: relative;
}
.bgsblue { 
	background: #def4ff; 
	position: relative;
}
.trf_rot3 { transform: rotate(3deg); }

.trf_rot3 img { 
	transform: rotate(-3deg);
}

.trf_rot3_re { transform: rotate(-3deg); }

.trf_rot3_re img { 
	transform: rotate(3deg);
}
#travel .cflex {
	position: relative;
}
#travel .bluewrapinner p {
	padding: 0 1em;
}
#travel .bluewrapinner .obj1 {
	position: absolute;
	z-index: 10;
	top: -30px;
	right: -20px;
}
#travel .bluewrapinner .obj2 {
	position: absolute;
	z-index: 10;
	bottom: 0px;
	left: -30px;
}
#travel h3.h3_2 { 
	position: relative;
	z-index: 20;
	margin-bottom: -22px;
}
#exp-area {
	width: 100%;
	text-align: center;
}


/*------------------------------------------------------------------------------*/

@media only screen and (min-width: 960px) {

/*	#mechanism .cflex { display: flex; justify-content: space-between; }
	#mechanism .txt { width: 420px; }
	#mechanism .img { width: 210px; }
	#mechanism .leaf { width: 320px; }

	#ecofriendly .cflex { display: flex; justify-content: space-between; }
	#ecofriendly .txt {
		width: 380px;
	}*/
/*	#ecofriendly .img {
		width: 300px;
		text-align: right;
	}*/
	#voice .cflex {
		display: flex;
		justify-content: space-between;
	}
	#voice .cflex li {
		width: 360px;
	}
	/*.data_bt .abimg { position: absolute; right: 0; bottom: 100px; }*/
	.abimg { text-align: center; }
	.data_bt::after { content: ""; display: block; visibility: hidden; clear: both; }
	#data .data_bt { height: auto; }

.drawing_main ul li:first-child { top:50px; left: -50px; }
.drawing_main ul li:nth-child(2) { top:70px; left: 170px; }
.drawing_main ul li:nth-child(3) { top:140px; left: 45px; }
.drawing_main ul li:nth-child(4) { top:65px; right: 290px; }

.flexlr { display: flex; justify-content: space-between; align-items: center; }
.flexlr .rolein { width: 480px; }
.flexlr .abimg { width: 400px; }

.fs_130 {
	font-size: 130%;
}
.cflex { display: flex; }
#travel .cflex {
	justify-content: space-between;
	margin-bottom: 30px;
	position: relative;
}

#drawing .flexlr .rolein { width: auto; }

.for_sp {
	display: none;
}

#exp-area {
	width: 100%;
}

#exp-area  ul {
	/* display: inline-block; */
  width: 100%;
}
#exp-area ul li {
  /* display: inline-block; */
	display: inline-flex;
  width: 360px;
}
#exp-area ul li img {
  width: 360px;
  height: auto;
  /* margin: 0 auto 20px; */
}
#exp-area ul li:nth-child(2) img {
  margin: 0 0 20px 20px;
}
#exp-area ul li:nth-child(3) {
	display: flex;
  margin: 0 auto 20px;
}
#voice {
	position: relative;
	clear: both;
}
#voice .review-pic {
	display: block;
	width: 380px;
	float: left;
}
#voice .review-txt {
	display: block;
	width: 380px;
	float: right;
}

}

/*------------------------------------------------------------------------------*/

@media only print {

	#voice .cflex {
		display: flex;
		justify-content: space-between;
	}
	#voice .cflex li {
		width: 360px;
	}	
.flexlr { display: flex; justify-content: space-between; align-items: center; }
.flexlr .rolein { width: 480px; }
.flexlr .abimg { width: 400px; }


}

/*------------------------------------------------------------------------------*/

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

	section {
		overflow: hidden;
	}

	#pagePath .title h1{
		font-size: 1.8rem;
		line-height: 0.8rem;
	}

	/* #summary h2 {
		font-size: 1.4rem;
		margin-bottom: 1.6rem;
		line-height: 1.5rem;
	} */

	#summary p {
		padding: 10px 10px 10px 5px;
	}
	
	.title { height: auto; }
	.for_pc { display: none; }
	.for_sp { display: block; }

	#data .data_bt .txtBox .system {
		padding-left: 10px;
		/* margin-bottom: 10px; */
	}

	.system dd {
		margin-left: 7.5rem;
	}
	#data .data_bt .txtBox h3 {
		margin-left: 10px;
	}

	/* #data .data_bt .txtBox #exp-area {
		padding: 0 10px;
	} */
	
	#voice .review-pic {
		margin-bottom: 15px;
	}
	#voice .review-pic img {
		display: flex;
		width: 320px;
		margin: 0 auto 5px;
		clear: both;
	}
	#voice .review-pic p {
		margin-left: 35px;
		line-height: 1.4rem;
	}
	#voice .review-txt {
		padding: 0 10px;
	}
/*	#voice ul { display: flex; justify-content: space-between; }
	#voice li { width: 48%; }*/
	#voice li h4 { /*width: 100%; height: 16.129vw; overflow: hidden; text-indent: -10000px;*/ }
	/*#voice li h4 { background-size: contain; }*/
	#voice li:first-child { margin-bottom: 4vw; }
	/*#mechanism .txt { margin-bottom: 30px; } */
	#mechanism .img { text-align: center; width: 50%; margin-left: auto; margin-right: auto; }
	/*#ecofriendly .img { text-align: center; width: 50%; margin-left: auto; margin-right: auto; }*/
	#mechanism .imgBox img { width: 200px; }

	.drawing_main { margin-bottom: 10vw; }
	.drawing_main ul li a { /*width: 14vw;*/ /*height: 11vw;*/ width: 11vw; height: 8vw; padding-top: 3vw; font-size: 2vw; /*font-size: 3vw;*/ border-radius: 50%;
		/*line-height: 4vw;*/ line-height: 3vw; }
	.drawing_main ul li a.l1 { /*line-height: 14vw; height: 14vw;*/line-height: 11vw; height: 11vw; padding-top: 0; }
	.drawing_main ul li:first-child { top:6vw; left: 0vw; }
	.drawing_main ul li:nth-child(2) { top:7vw; left: 28vw; }
	.drawing_main ul li:nth-child(3) { top:17vw; left: 16vw; }
	.drawing_main ul li:nth-child(4) { top:6vw; left: 52vw; }

	.data_bt .abimg { width: 70%; }
	.data_bt .abimg img { width: 100%; }



#links .pagenav {
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;

}
#links .pagenav .prev{
	margin-bottom: 20px;
}

#exp-area h3 {
	margin: 10px 0 15px 0;
}

#exp-area p {
	padding: 0 10px;
}

}

/*------------------------------------------------------------------------------*/