@charset "utf-8";

/* ==================================================================
	iso.css
	
=================================================================== */

/* --------------------------------
   □ 共通
-------------------------------- */

/*
   □ sub-visual
-------------------------------- */
.company_index{
	background-image: url("../../images/company/index/accent.jpg");
}
.company_iso{
	background-image: url("../../images/company/iso/accent.jpg");
}
.company_philosophy{
	background-image: url("../../images/company/philosophy/accent.jpg");
}

/* ==================================
   □ companyの共通
================================== */

/* --------------------------------
   □ title
-------------------------------- */

h2.title{
	position: relative;
	height: 60px;
	padding: 15px 0 15px 25px;
	font-size: 250%;
}

h2.title:before{
	content: "";
	width: 2px;
	height: 60px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #0a3d9a;
}

h3.title{
	color: #0a3d9a;
	font-size: 190%;
	padding-bottom: 15px;
	border-bottom: 1px solid #CED8EB;
	margin-bottom: 25px;
}

/* --------------------------------
   □ table
-------------------------------- */
table.tableStyle{
	font-size: 160%;
}

table.tableStyle tr.first{
	border-top: 1px solid #d6d6d6;
}

table.tableStyle tr{
	border-bottom: 1px solid #d6d6d6;
}

table.tableStyle tr th{
	width: 30%;
	vertical-align: middle;
	text-align: center;
	background-color: #f7f7f7;
}

table.tableStyle tr td{
	padding: 22px 30px 22px 50px;
	line-height: 1.8125;
}

/* ==================================
   □ index
================================== */
.company h3.era{
	position: relative;
	text-align: center;
	z-index: 0;
}
.company h3.era:before{
	position: absolute;
	content: "";
	width: 245px;
	height: 2px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #0a3d9a;
	z-index: -1;
}
.company h3.era span{
	background-color: #FFF;
	padding: 0 22px;
	font-size: 90%;
}

.company ul.action li dl dt{
	width: 22.74%;
	font-weight: 700;
	font-size: 160%;
	display: inline-block;
	float: left;
}

.company ul.action li dl dd{
	font-size: 160%;
}

.company table.action{
	font-size: 160%;
}

.company table.action tr th{
	position: relative;
	border-right: 2px solid #abbcda;
	width: 174px;
	font-weight: 700;
	color: #0a3d9a;
}

.company table.action tr{
	border: none;
}

.company table.action tr.last th,
.company table.action tr.borderNone th{
	border-right: none;
}

.company table.action tr th:after{
	position: absolute;
	content: "";
	width: 12px;
	height: 12px;
	background-color: #abbcda;
	border-radius: 12px;
	top: 17px;
	right: -7px;
}

.company table.action tr.first th:before{
	position: absolute;
	content: "";
	background-color: #FFF;
	width: 2px;
	height: 20px;
	margin: 17px 0;
	top: -20px;
	right: -2px;
}

.company table.action tr.last th:before{
	position: absolute;
	content: "";
	background-color: #abbcda;
	width: 2px;
	height: 20px;
	margin: 17px 0;
	top: -20px;
	right: -1px;
}

.company table.action tr td{
	padding-left: 37px;
}

.company p.image{
	margin-top: 52px;
	margin-bottom: 60px;
}

.company ul.access{
	float: left;
	display: inline-block;
}

.company ul.access li{
	position: relative;
	font-size: 160%;
	line-height: 1.75;
	padding-left: 20px;
}

.company ul.access li:before{
	position: absolute;
	content: "";
	background-color: #0a3d9a;
	border-radius: 8px;
	width: 8px;
	height: 8px;
	top: 9px;
	left: 0;
}

.company iframe{
	margin-bottom: 23px;
}

.company p.buttonStyle{
	float: right;
	display: inline-block;
}

.company p.buttonStyle a{
	padding: 15px 33px;
	background-color: #0a3d9a;
	display: inline-block;
	overflow: hidden;
}

.company p.buttonStyle a span{
	position: relative;
	font-weight: 700;
	color: #FFF;
	padding-right: 20px;
}

.company p.buttonStyle a span:after{
	position: absolute;
	content:"";
	width: 14px;
	height: 13px;
	background-image: url("../../images/icon/link_blank.png");
	right: 0;
	top: 4px;
}

/* ==================================
   □ iso
================================== */
.iso section{
	margin-bottom: 25px;
}

.iso ul.list{
	width: 95%;
}

.iso ul.list li.number{
	position: relative;
	font-size: 160%;
	margin-bottom: 30px;
	padding-left: 30px;
}

.iso ul.list li.number span{
	position: absolute;
	font-weight: 700;
	font-size: 156.25%;
	color: #0a3d9a;
	top: -7px;
	left: 0;
}

.iso p.note{
	text-align: right;
	font-size: 130%;
}

.iso ul.list li.number ul.listStyle li{
	position: relative;
	padding-left: 20px;
}

.iso ul.list li.number ul.listStyle li:before{
	position: absolute;
	left: 0;
	top: 5px;
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 8px;
	background-color: #0a3d9a;
}

.iso ul.textImg{
	overflow: hidden;
}

.iso ul.textImg li{
	font-size: 160%;
	display: inline-block;
}

.iso ul.textImg li.left{
	float: left;
}

.iso ul.textImg li.right{
	float: right;
}

/* ==================================
   □ philosophy
================================== */

.philosophy section.gratitude,
.philosophy section.love,
.philosophy section.gratification{
	position: relative;
	height: 204px;
	width: 730px;
	text-align: center;
	border-radius: 10px;
	border: 3px solid #deeaff;
	margin: 80px 0 95px 0;
}

.philosophy section.gratification{
	margin-bottom: 45px;
}
.philosophy h3.philosophy{
	position: absolute;
	background-color: #FFF;
	text-align: center;
	font-size: 470%;
	width: 348px;
	left: 0;
	right: 0;
	top: -50px;
	margin: 0 auto;
}
.philosophy h3.philosophy strong{
	display: inline-block;
	width: 348px;
	position: relative;
	z-index: 0;
}
.philosophy h3.philosophy strong:before{
	position: absolute;
	content: "";
	width: 240px;
	height: 14px;
	background-color: #deeaff;
	left: 0;
	right: 0;
	bottom: 5px;
	margin: 0 auto;
	z-index: -1;
}
.philosophy h3.philosophy span.english{
	display: block;
	color: #0a3d9a;
	font-size: 38.29%;
}
.philosophy h3.philosophy span.red{
	color: #d23131;
}
.philosophy h3.philosophy span.pink{
	color: #d2316e;
}
.philosophy h3.philosophy span.orange{
	color: #d27931;
}

.philosophy dl.titleText{
	margin-top: 60px;
}

.philosophy dl.titleText dt{
	color: #0a3d9a;
	font-size: 250%;
	font-weight: 700;
	margin-bottom: 20px;
}
.philosophy dl.titleText dd{
	font-size: 160%;
}



/* --------------------------------
   □ reason
-------------------------------- */

@media screen and
(max-width: 1029px) {
		
	table.tableStyle tr td{
		padding: 22px 0 22px 20px;
	}
	
	.company table.action tr th{
		width: 30%;
	}
	.company table.action tr td{
		padding-left: 25px;
	}
	
	.company p.buttonStyle{
		float: none;
		text-align: center;
		margin-top: 30px;
	}
	
	.philosophy section.gratitude,
	.philosophy section.love,
	.philosophy section.gratification{
		height: 230px;
		width: 80%;
		margin: 80px auto 90px auto;
	}
	
}

@media only screen and
(max-width : 767px) {
	
	table.tableStyle tr td{
		padding: 22px 20px 22px 20px;
	}
	
	.company table.action tr th{
		width: 30%;
	}
	.company table.action tr td{
		padding-left: 25px;
	}
	
	.company p.buttonStyle{
		float: none;
		text-align: center;
		margin-top: 30px;
	}

	.philosophy h3.philosophy {
		text-align: center;
		font-size: 300%;
		width: 80%;
		margin-left:-40%;
		left: 50%;
		right:inherit;
		top: -1.2em;
	}
	
	.philosophy h3.philosophy strong{
		width: auto;
		margin:0 auto;
	}
	
	.philosophy h3.philosophy strong:before {
		width: 120%;
		height: 14px;
		background-color: #deeaff;
		left: -10%;
		right: 0;
		bottom: 5px;
		margin: 0 auto;
		z-index: -1;
	}	
		
	.philosophy section.gratitude,
	.philosophy section.love,
	.philosophy section.gratification{
		height: 300px;
		width: 100%;
		margin: 60px 0 70px 0;
		padding: 30px;
	}
	
	.philosophy dl.titleText{
		margin-top: 50px;
	}
	
}