/* --------------------------------------------------
 *　グローバルメニュー English
 * --------------------------------------------------
base.css
*/

/* --------------------------------------------------
 *　index
 * --------------------------------------------------
 */


.english-index .front-box p,
.english-index .page-title h1 {
	font-family: 'Fanwood Text', sans-serif;
}

.english-index .page-title {
	text-align: left;
	margin-top: 12.5%;
}

.english-index .front-box {
	margin-left: .5em;
	margin-right: .5em;
	position: relative;
	z-index: 99;
}

.english-index .front-box p {
	text-align: left;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	font-size: 1.5em;
}

.english-index .main-image {
	position: relative;
	top: -15px;
}

.english-index .main-image img {
	max-width: 590px;
	width: 100%;
	height: auto;
	margin: 0;
}


/* --------------------------------------------------
 *　page
 * --------------------------------------------------
 */

.page.english .content-box {
	float: left;
	width: 100%;
	margin: 0 -300px 0 30px;

}

.page.english .side-box {
	float: right;
	width: 260px;
	margin-right: 5px;
	margin-top: -10px;
	border: none;
	box-shadow: none;


}


.page.english .side-box>ul>li a {
	width: 237px;
	height: 70px;
	border: 1px solid #BFBFBF;
	border-radius: 5px;
	background: url(/english/common/img/en/side/menu-g.jpg) left bottom repeat-x;
	display: table;
	margin-bottom: .75em;
	text-decoration: none;
	color: #000000;
	position: relative;
	padding: .05em;
	box-sizing: border-box;
	overflow: hidden;
}

.page.english .side-box>ul>li a img {
	position: absolute;
	left: 22px;
	top: 9px;
	width: 50px;
	height: 51px;
	/*	

		position: relative;
		top: 8px;
		left: 5px;
	*/

}

.page.english .side-box>ul>li a span {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 1;
	letter-spacing: .05em;
	position: relative;
	left: 86px;
}

.page.english .side-box>ul>li:first-of-type a {
	height: 42px;
	color: #EE5859;
}

.page.english .side-box>ul>li:last-child a {
	height: 42px;
	margin-bottom: 0;
	/*	margin-top: 1em;
	*/
}

.page.english .side-box>ul>li a.hover,
.page.english .side-box>ul>li a:hover {
	background: url(/english/common/img/en/side/menu-o.jpg) left bottom repeat-x;
}

.page.english .side-box>ul>li:first-of-type a span,
.page.english .side-box>ul>li:last-child a span {
	position: static;
	left: auto;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.page.english .content-box {
		float: none;
		width: 100%;
		margin: 0 0 0 0;
		padding: 0;
	}

	.page.english .side-box {
		float: none;
		width: 100%;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		margin-top: 0;
	}

	.page.english .content-box .main-contents {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}

	.english .side-box>ul {}

	.english .side-box>ul li {
		display: inline-block;
	}

	.page.english .side-box>ul>li a {}

	.page.english .side-box>ul>li:first-of-type,
	.page.english .side-box>ul>li:last-child {
		display: block;
	}

	.page.english .side-box>ul>li:first-of-type a,
	.page.english .side-box>ul>li:last-child a {
		max-width: 722px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
}

@media screen and (max-width: 737px) {
	.page.english .content-box {
		float: none;
		width: 100%;
		margin: 0 0 0 0;
		padding: 0;
	}

	.page.english .side-box {
		float: none;
		width: 100%;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
	}

	.page.english .main-contents {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	}

	.english .side-box>ul li {
		display: block;
	}

	.page.english .side-box>ul>li a {
		width: 100%;
		height: 70px;
		border-width: 1px 0;
		border-radius: 0;
		display: block;
		margin-bottom: 0;
	}

	.page.english .side-box>ul>li a {
		width: 100%;
		height: 70px;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		border-radius: 0;
		display: table;
		margin-bottom: 0;
		text-decoration: none;
		color: #000000;
		position: relative;
		padding: .05em;
		box-sizing: border-box;
		overflow: hidden;
	}

	.page.english .side-box>ul>li a span br {
		display: none;
	}

	.page.english .side-box>ul>li a img {}

	.page.english .side-box>ul>li a span {
		position: relative;
		left: 86px;
	}

	.page.english .side-box>ul>li:first-of-type a,
	.page.english .side-box>ul>li:last-child a {
		width: 100%;
		height: 50px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.page.english .side-box>ul>li:last-child a {
		margin-top: 0;
		border-bottom: 1px solid #BFBFBF;
	}
}

@media screen and (max-width: 359px) {
	.page.english .side-box>ul>li a img {
		display: none;
	}

	.page.english .side-box>ul>li a span {
		position: relative;
		left: 8px;
	}
}


/* --------------------------------------------------
 *　page title
 * --------------------------------------------------
 */

.english-page .page-title {

	width: 99.9%;
	box-sizing: border-box;

	border: 1px solid #cccccc;
	margin: 5px 0 0;
	padding: 0;

	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	clear: both;
	background-position: left 65%;
	background-repeat: no-repeat;
	/*  background:url(/english/common/img/en/title/akabako.png) left 65% no-repeat;*/
	background-size: cover;
	min-height: 50px;

}


.english-page.company-creed .page-title,
.english-page.company-profile .page-title,
.english-page.president-message .page-title,
.english-page.company-creed .page-title,
.english-page.company-profile .page-title,
.english-page.comapany-creed .page-title,
.english-page.comapany-profile .page-title {
	background-image: url(/english/common/img/en/title/company.png);
}

.english-page.products .page-title {
	background-image: url(/english/common/img/en/title/akabako.png);
}

.english-page.history .page-title {
	background-image: url(/english/common/img/en/title/history.png);
}

.english-page.csr .page-title {
	background-image: url(/english/common/img/en/title/csr.png);
}

.english-page.commitment .page-title {
	background-image: url(/english/common/img/en/title/commitment.png);
}



.english-page .page-title h1 {
	text-align: left;
	line-height: 1.5;
	margin: 0;
	padding: 0 8px;
	color: #333;
	font-size: 1.1em;
	font-weight: bold;
	position: relative;
	top: 15px;

}



@media screen and (max-width: 640px) {
	.english-page .page-title h1 {
		font-size: 1.0em;
	}

}

@media screen and (max-width: 320px) {
	.english-page.csr .page-title h1 {
		margin: -10px 0 0;
	}

}

.english-page .local-menu ul {
	text-align: left;
	margin-top: .75em;
}


.english-page .local-menu ul li {
	display: inline-block;
	text-align: left;
	margin-right: .75em;
	margin-bottom: .75em;
	font-size: .8em;
}

.english-page .local-menu ul li:last-child {
	margin-right: 0;
}

.english-page .local-menu ul li a:before {

	margin: -.25em 0 0;
	content: "";
	display: inline-block;
	background: url(/english/common/img/icon/mark_b.jpg) no-repeat left center;
	width: 9px;
	height: 15px;
	background-size: 9px auto;
	box-sizing: border-box;
	vertical-align: middle;

}

.english-page .local-menu ul li a {
	font-weight: bold;
	text-decoration: none;
}

#Location {
	margin-top: -72px;
	padding-top: 72px;
}


/* --------------------------------------------------
 *　localtitle
 * --------------------------------------------------
 */

.english-page .page-body {
	margin-bottom: 5em;
}

/*

*/

.english-page .page-body h1:before {

	margin: 0 0 0;
	padding: 0;
	content: "";
	display: inline-block;
	background: url(/english/common/img/icon/mark_1.png) no-repeat 0 100%;
	width: 9px;
	height: 15px;
	background-size: 9px auto;
	box-sizing: border-box;


}


.english-page .page-body h1 {

	border-bottom: 1px solid #FF0000;
	max-width: 585px;
	width: 100%;
	text-align: left;
	font-size: 1.2em;

	padding-bottom: .25em;
	box-sizing: border-box;
	margin-bottom: 2em;
	line-height: 1.5;

	text-indent: -1em;
	padding-left: 1em;
}




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

	.english-page .page-header,
	.english-page .page-body {
		padding-left: .5em;
		padding-right: .5em;
	}


}

/* --------------------------------------------------
 *　Company profile
 * --------------------------------------------------
 */
.english-page.company-profile .page-body h1#Location:before,
.english-page.comapany-profile .page-body h1#Location:before {

	margin: 0 0 0;
	padding: 0;
	content: "";
	display: inline-block;
	background: url(/english/common/img/icon/mark_2.png) no-repeat left center;
	width: 9px;
	height: 15px;
	background-size: 9px auto;
	box-sizing: border-box;
	vertical-align: top;


}

.english-page.company-profile .page-body h1#Location,
.english-page.comapany-profile .page-body h1#Location {
	border-bottom: 1px solid #CCC;
	max-width: 585px;
	width: 100%;
	text-align: left;
	font-size: 1.2em;

	padding-bottom: .25em;
	box-sizing: border-box;
	margin-bottom: 2em;

}

.english-page.company-profile .page-body table.outline,
.english-page.comapany-profile .page-body table.outline {

	border-spacing: 5px 10px;
	border-collapse: separate;
	margin-bottom: 5em;

}

.english-page.company-profile .page-body table.outline th,
.english-page.comapany-profile .page-body table.outline th {
	border: 1px solid #999999;
	background-color: #E6E6E6;
	font-weight: bold;
	padding: 15px 8px;
	text-align: center;
	width: 24%;
	margin: 0 auto;
	box-sizing: border-box;
}

.english-page.company-profile .page-body table.outline td,
.english-page.comapany-profile .page-body table.outline td {
	margin-left: 5px;
	border-bottom: 1px solid #CCCCCC;
	text-align: left;
	padding: 15px 8px;
	width: 70%;
}


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

	.english-page.company-profile .page-body table.outline th,
	.english-page.comapany-profile .page-body table.outline th {

		width: 100%;
		display: block;
		padding: 10px 8px;
	}

	.english-page.company-profile .page-body table.outline td,
	.english-page.comapany-profile .page-body table.outline td {

		width: 100%;
		display: block;
		border-bottom: 0;
	}

	.english-page.company-profile .page-body table.outline tr:last-of-type td,
	.english-page.comapany-profile .page-body table.outline tr:last-of-type td {
		border-bottom: 1px solid #CCCCCC;
	}


}

.english-page.company-profile .page-body table.location,
.english-page.comapany-profile .page-body table.location {

	border-spacing: 0;
	border-collapse: collapse;
	/*	margin-top: 2em;*/



}

.english-page.company-profile .page-body table.location th,
.english-page.comapany-profile .page-body table.location th {
	border: solid #999999;
	border-width: 0 1px 1px;
	background-color: #E6E6E6;
	font-weight: bold;
	padding: 15px 8px;
	text-align: center;
	width: 24%;
	margin: 0 auto;
	box-sizing: border-box;

}

.english-page.company-profile .page-body table.location tr:first-of-type th,
.english-page.comapany-profile .page-body table.location tr:first-of-type th {
	border-top: 1px solid #999999;
}

.english-page.company-profile .page-body table.location td,
.english-page.comapany-profile .page-body table.location td {
	margin-left: 5px;
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	text-align: left;
	padding: 15px 8px;
	width: 70%;
}

.english-page.company-profile div.page-body table.location tr:first-of-type td,
.english-page.comapany-profile div.page-body table.location tr:first-of-type td {
	border-top: 1px solid #999999;
}



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


	.english-page.company-profile .page-body table.location th,
	.english-page.comapany-profile .page-body table.location th {

		width: 100%;
		display: block;
		padding: 10px 8px;
		border-top: 1px solid #999999;
	}

	.english-page.company-profile .page-body table.location td,
	.english-page.comapany-profile .page-body table.location td {
		width: 100%;
		display: block;
		padding: 15px 8px;
		border-bottom: 0;
	}

	.english-page.company-profile div.page-body table.location tr:first-of-type td,
	.english-page.comapany-profile div.page-body table.location tr:first-of-type td {
		border-top: 0;
	}

	.english-page.company-profile div.page-body table.location tr:last-of-type td,
	.english-page.comapany-profile div.page-body table.location tr:last-of-type td {
		border-bottom: 1px solid #999999;
	}



}



.english-page.company-profile .page-body table a:link {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
}

.english-page.company-profile .page-body table a:visited {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
}

.english-page.company-profile .page-body table a:hover {
	color: #FF0000;
	text-decoration: underline;
}

.english-page.company-profile .page-body table a:active {
	color: #FF0000;
	text-decoration: underline;
}

.english-page.company-profile .page-body table a:focus {
	color: #FF0000;
	text-decoration: underline;
}

.english-page.comapany-profile .page-body table a:link {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
}

.english-page.comapany-profile .page-body table a:visited {
	color: #FF0000;
	text-decoration: none;
	font-weight: bold;
}

.english-page.comapany-profile .page-body table a:hover {
	color: #FF0000;
	text-decoration: underline;
}

.english-page.comapany-profile .page-body table a:active {
	color: #FF0000;
	text-decoration: underline;
}

.english-page.comapany-profile .page-body table a:focus {
	color: #FF0000;
	text-decoration: underline;
}



/* --------------------------------------------------
 *　Company creed、President message
 * --------------------------------------------------
 */
.english-page.president-message .page-body .first,
.english-page.company-creed .page-body .first,
.english-page.comapany-creed .page-body .first {
	float: left;
	margin: 0 3.5% 0 0;


}

.english-page.president-message .page-body .first img,
.english-page.company-creed .page-body .first img,
.english-page.comapany-creed .page-body .first img {


	max-width: 192px;
	width: 100%;
	height: auto;

	margin-bottom: 0;
}

.english-page.president-message .page-body .second,
.english-page.company-creed .page-body .second,
.english-page.comapany-creed .page-body .second {

	text-align: left;
}

.english-page.president-message .page-body .second p,
.english-page.company-creed .page-body .second p,
.english-page.comapany-creed .page-body .second p {
	text-align: justify;

}


.english-page.president-message .page-body .second h2 {
	font-size: 1.35em;
	text-align: center;
	margin: 75px auto 50px;
	letter-spacing: .1em;
	line-height: 1.5;
}

.english-page.president-message .page-body .second h2:before {
	content: "『";

}

.english-page.president-message .page-body .second h2:after {
	content: "』";

}



.english-page.president-message .page-body .second p:last-child {
	text-align: right;
	margin-left: 1em;
}

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

	.english-page.president-message .page-body .first,
	.english-page.company-creed .page-body .first,
	.english-page.comapany-creed .page-body .first {
		float: none;
		width: 100%;
		margin: 0 auto;

	}

	.english-page.president-message .page-body .second,
	.english-page.company-creed .page-body .second,
	.english-page.comapany-creed .page-body .second {
		float: none;
		width: 99%;
		/*
	padding-left: .5%;
	padding-right: .5%;*/
		text-align: left;
		margin: 35px auto 0;
	}


}


/* --------------------------------------------------
 *　Products
 * --------------------------------------------------
 */
.english-page.products .page-body .first {
	margin: 5% 0;
}

.english-page.products .page-body .first p {
	text-align: left;
}

.english-page.products .page-body .second {
	margin: 0 auto;
	text-align: center;
}

.english-page.products .page-body .second img {
	max-width: 590px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/*
.english-page.products .page-body .second ul{
	margin: 0 .25% 1% .25%;	
	text-align: left;
}
.english-page.products .page-body .second ul li{
	display: inline-block;
	vertical-align: bottom;
	margin: 0;
	padding: 0;
}
.english-page.products .page-body .second ul li img{
	max-width: 65px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}
*/
/* --------------------------------------------------
 *　History
 * --------------------------------------------------
 */


.english-page.history .page-body img {
	width: 100%;
	height: auto;
	margin: 0;

}

.english-page.history .page-body .first {
	margin: 5% 0;
}

.english-page.history .page-body .first p {
	text-align: justify;
}

.english-page.history .page-body .second {
	margin: 50px auto 0;
	text-align: center;
}


.historybox dl dt span {
	font-size: .7em;
	font-weight: normal;
}

.historybox dl dt:nth-of-type(5),
.historybox dl dt:nth-of-type(3),
.historybox dl dt:nth-of-type(1) {
	float: left;
	text-align: left;
	padding-right: 1em;
	padding-bottom: 1em;
}

.historybox dl dt:nth-of-type(6),
.historybox dl dt:nth-of-type(4),
.historybox dl dt:nth-of-type(2) {
	float: right;
	text-align: left;
	padding-left: 1em;
	padding-bottom: 1em;
}


.historybox dl dd {
	text-align: justify;
	padding-bottom: .5em;
}

.historybox dl dd p {
	line-height: 1.5;
}

.historybox dl dd p strong {
	font-weight: normal;
	padding: 1em 0;
	font-size: 1.5em;
	line-height: 1.5;
	display: block;
}


.historybox dl dt img {
	max-width: 200px;
}

.historybox dl dt img.factoryfinishedin1928 {
	max-width: 248px;
}

.historybox dl dt img.postersaround1950 {
	max-width: 353px;
}



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


	.historybox dl dt:nth-of-type(5),
	.historybox dl dt:nth-of-type(3),
	.historybox dl dt:nth-of-type(1) {
		float: none;
		text-align: center;
		margin: 2em auto 0;
		padding-right: 0;
		padding-left: 0;
	}

	.historybox dl dt:nth-of-type(6),
	.historybox dl dt:nth-of-type(4),
	.historybox dl dt:nth-of-type(2) {
		float: none;
		text-align: center;
		margin: 2em auto 0;
		padding-right: 0;
		padding-left: 0;
	}

}

/* --------------------------------------------------
 *　Csr
 * --------------------------------------------------
 */


.english-page.csr .page-body img {
	width: 100%;
	height: auto;
	margin: 0;

}

.english-page.csr .page-body .first {
	margin: 5% 0;
}

.english-page.csr .page-body .first p {
	text-align: left;
	/*	text-align: justify;*/
}

.english-page.csr .page-body .second {
	margin-top: -12%;
}

.csr-box h2 {
	width: 100%;
	height: 27px;
	border-radius: 5px;

	text-align: left;
	position: relative;
}

.csr-box h2 strong {

	padding: 0;
	position: absolute;
	top: 5px;
	left: 10px;
	font-size: .6em;
	font-family: 'Fanwood Text', sans-serif;
}

.csr-box:nth-of-type(1) h2 {

	background: -webkit-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 70%);
	background: -o-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 70%);
	background: -ms-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 70%);
	background: -moz-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 70%);
	background: linear-gradient(92deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 70%);


}

.csr-box:nth-of-type(1) h2 strong {

	color: #006945;
}

.csr-box:nth-of-type(2) h2 {

	background: -webkit-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 70%);
	background: -o-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 70%);
	background: -ms-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 70%);
	background: -moz-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 70%);
	background: linear-gradient(to right, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 70%);

}

.csr-box:nth-of-type(2) h2 strong {

	color: #FE4E7F;
}

.csr-box:nth-of-type(3) h2 {

	background: -webkit-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 70%);
	background: -o-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 70%);
	background: -ms-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 70%);
	background: -moz-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 70%);
	background: linear-gradient(91deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 70%);

}

.csr-box:nth-of-type(3) h2 strong {

	color: #E97739;
}

.csr-box:nth-of-type(4) h2 {

	background: -webkit-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 70%);
	background: -o-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 70%);
	background: -ms-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 70%);
	background: -moz-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 70%);
	background: linear-gradient(91deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 70%);

}

.csr-box:nth-of-type(4) h2 strong {

	color: #012BB1;
}






.csr-box dl {
	margin-top: 2em;

}

.csr-box dl dt:before {

	content: "";
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 21px;
	margin-right: .35em;
	position: relative;
	top: -2px;

}

.csr-box dl dt:nth-of-type(1):before {
	background-image: url(/english/common/img/en/csr/g/01.jpg);
}

.csr-box dl dt:nth-of-type(2):before {
	background-image: url(/english/common/img/en/csr/g/02.jpg);
}

.csr-box dl dt {
	text-align: left;
	color: #1A7959;
	font-size: 1.2em;
	text-indent: -1em;
	padding-left: 1em;
	font-weight: normal;
}

.csr-box dl dd {
	margin-top: .75em;
	margin-left: .5em;
}

.csr-box dl dd p {
	text-align: left;
	font-size: 1em;
}

.csr-box dl dd:nth-of-type(1) .csr-box-image {
	float: right;
	margin-left: .75em;

}

.csr-box dl dd:nth-of-type(1) .csr-box-image img {
	max-width: 214px;
	width: 100%;
	height: auto;

}


.csr-box dl dd:nth-of-type(2)>p {
	text-align: left;
	font-size: 1em;
}

.csr-box dl dd:nth-of-type(2)>ul {
	text-align: left;
	text-indent: -1em;
	padding-left: 1em;
}

.csr-box dl dd:nth-of-type(2)>ul li:before {
	content: "■"
}


.csr-box:nth-of-type(2)>ul,
.csr-box:nth-of-type(3)>ul,
.csr-box:nth-of-type(4)>ul {
	margin-top: 1.5em;
}

.csr-box:nth-of-type(2)>ul li,
.csr-box:nth-of-type(3)>ul li,
.csr-box:nth-of-type(4)>ul li {
	text-align: left;
	text-indent: -1.7em;
	padding-left: 1.7em;
	margin-bottom: 1.5em;
}




.csr-box>ul li:before {

	content: "";
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 21px;
	margin-right: .35em;
	position: relative;
	top: -2px;

}

.csr-box:nth-of-type(2)>ul li:nth-of-type(1):before {
	background-image: url(/english/common/img/en/csr/p/01.jpg);
}

.csr-box:nth-of-type(2)>ul li:nth-of-type(2):before {
	background-image: url(/english/common/img/en/csr/p/02.jpg);
}

.csr-box:nth-of-type(2)>ul li:nth-of-type(3):before {
	background-image: url(/english/common/img/en/csr/p/03.jpg);
}

.csr-box:nth-of-type(3)>ul li:nth-of-type(1):before {
	background-image: url(/english/common/img/en/csr/o/01.jpg);
}

.csr-box:nth-of-type(3)>ul li:nth-of-type(2):before {
	background-image: url(/english/common/img/en/csr/o/02.jpg);
}

.csr-box:nth-of-type(4)>ul li:nth-of-type(1):before {
	background-image: url(/english/common/img/en/csr/b/01.jpg);
}

.csr-box:nth-of-type(4)>ul li:nth-of-type(2):before {
	background-image: url(/english/common/img/en/csr/b/02.jpg);
}


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

	.csr-box:nth-of-type(1) h2 {

		background: -webkit-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 100%);
		background: -o-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 100%);
		background: -ms-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 100%);
		background: -moz-linear-gradient(358deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 100%);
		background: linear-gradient(92deg, rgb(169, 219, 168) 0%, rgb(255, 255, 255) 100%);
	}


	.csr-box:nth-of-type(2) h2 {

		background: -webkit-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 100%);
		background: -o-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 100%);
		background: -ms-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 100%);
		background: -moz-linear-gradient(left, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 100%);
		background: linear-gradient(to right, rgb(247, 218, 222) 0%, rgb(255, 255, 255) 100%);

	}

	.csr-box:nth-of-type(3) h2 {

		background: -webkit-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 100%);
		background: -o-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 100%);
		background: -ms-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 100%);
		background: -moz-linear-gradient(359deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 100%);
		background: linear-gradient(91deg, rgb(246, 243, 200) 0%, rgb(251, 249, 228) 100%);


	}

	.csr-box:nth-of-type(4) h2 {

		background: -webkit-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 100%);
		background: -o-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 100%);
		background: -ms-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 100%);
		background: -moz-linear-gradient(359deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 100%);
		background: linear-gradient(91deg, rgb(205, 228, 234) 0%, rgb(236, 246, 248) 100%);

	}

	.csr-box dl dd:nth-of-type(1) .csr-box-image {
		float: none;
		margin: 0 auto;
		text-align: center;

	}

}


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

	.csr-box:nth-of-type(3) h2 {

		padding-bottom: 18%;
	}


}


/* --------------------------------------------------
 *　commitment commitmentindex
 * --------------------------------------------------
 */

/*.english-page.commitmentindex{
	
}*/
.english-page.commitmentindex .first p {
	text-align: justify;
	line-height: 1.5;
}

.english-page.commitmentindex .first ul {

	display: table;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 30px 0;

	margin: 65px auto 0;
	text-align: center;

}

.english-page.commitmentindex .first ul li {
	display: table-cell;

	width: 50%;
	max-width: 200px;
	box-sizing: border-box;
}

.english-page.commitmentindex .first ul li span {

	font-size: .9em;
	text-align: left;
	margin-top: .5em;
	display: block;
}

.english-page.commitmentindex .first ul li img {
	max-width: 200px;
	height: auto;
	width: 100%;
}

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

	.english-page.commitmentindex .first ul li {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: center;
	}

	.english-page.commitmentindex .first ul li:first-of-type {
		margin-bottom: 2em;
	}

}

/* --------------------------------------------------
 *　commitment raw-materials,packaging,soap-culture
 * --------------------------------------------------
 */
.english-page.soap-culture .first p,
.english-page.packaging .first p,
.english-page.raw-materials .first p {
	text-align: justify;
	line-height: 1.5;
}

.english-page.soap-culture .first ul,
.english-page.packaging .first ul,
.english-page.raw-materials .first ul {

	display: table;
	table-layout: fixed;
	/*	
  border-collapse:separate;
  border-spacing: 30px 0;
*/
	margin: 65px auto 0;
	text-align: center;

}

.english-page.soap-culture .first ul li,
.english-page.packaging .first ul li,
.english-page.raw-materials .first ul li {
	display: table-cell;

	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
}

.english-page.packaging .first ul li span,
.english-page.raw-materials .first ul li span {

	font-size: .9em;
	text-align: center;
	margin: .5em auto;
	display: block;
}

.english-page.packaging .first ul li img,
.english-page.raw-materials .first ul li img {
	max-width: 400px;
	height: auto;
	width: 100%;
}