@charset "UTF-8";
/* CSS Document */

/*   all parts   */
.image_part {
	width:100%;
	height:auto;

}

/*   maintitle_area   */
#maintitle_area {
	background-image: url(/company/images/main.jpg);
}

/*#maintitle_area #mainlogo_block{
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;

	width:100%;
	padding:0 1vw;
	
	margin:0 0 25px 0;
}*/

@media (min-width: 1200px) {
#maintitle_area #mainlogo_block {
	margin:0 auto 25px auto;
	width:1200px;
}
}

#maintitle_area #mainlogo_block .pro_logo_box{
	width:100%;

	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	align-content: flex-end;
	align-items: flex-end;
	
	opacity: 0;
	animation-delay:0.1s;
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
	
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;

}

#maintitle_area #mainlogo_block .pro_logo_box .logoimg_part{
	font-size:36px;
	font-weight:700;
	line-height:1;
	color:#000;
	letter-spacing: 0.1em; 
	text-align:left;
	
}



/*#maintitle_area #main_copy{
	width:100%;
	padding:0 1vw;
	
	margin:0;
}*/

@media (min-width: 1200px) {
#maintitle_area #main_copy {
	margin:0 auto;
	width:1200px;
}
}

#maintitle_area #main_copy p{
	width:75%;
	padding:0;
	margin:0;

	font-size:15px;
	font-weight:300;
	line-height:30px;
	color:#000;
	letter-spacing: 0.08em; 
	text-align:left;

/*
	text-shadow:2px 2px 4px #000000,-2px -2px 4px #000000;
*/

	opacity: 0;
	animation-delay:0.5s;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode:forwards;
	
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;

}



/*   innerlink_area   */
#innerlink_area {
	position:relative;
	width:100%;
	padding:0 5vw;
	margin:90px 0 0 0;
	background-color: rgba(255,255,255,1.0);
	
	perspective: 500px;
}

@media (min-width: 1200px) {
#innerlink_area {
	padding:0;
}
}

#innerlink_area .innerlink_block{
	position: relative;
	
	width:100%;
	height:100%;
	
	padding:50px 0;
	border:solid 1px #ccc;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
	
	transition: all 0.5s ease-in-out;
	opacity: 0;
	transform-origin: 50% 0%;
	transform:translateY(-30px) rotateX(10deg) scaleY(0.1);
}

@media (min-width: 1200px) {
#innerlink_area .innerlink_block  {
	margin:0 auto;
	width:1100px;
}
}

#innerlink_area.show .innerlink_block{
	opacity: 1;
	transform:translateY(0) rotateX(0);
}

#innerlink_area .innerlink_title_box{
	position:relative;
	
	width:100%;
	height:100%;
	
	margin:0 0 40px 0;
}

#innerlink_area .innerlink_title_box h2{
	font-size:28px;
	font-weight:500;
	line-height:1.4;
	color:#000;
	letter-spacing: 0.2em;
	text-align:center;
}


#innerlink_area .innerlink_block .innerlink_box{
	width:100%;
	
	list-style: none;
	padding:0;
	margin:0;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	justify-content:center;
}


#innerlink_area .innerlink_block .innerlink_box li{
	margin:0;
	padding:0 15px;
	
	position:relative;
}

#innerlink_area .innerlink_block .innerlink_box li::after{
	content: "|";
	color: #ccc;
	display:block;
	font-size:14px;
	font-weight:300;
	
	position:absolute;
	right:0;
	top:10px;

}

#innerlink_area .innerlink_block .innerlink_box li:last-child::after{
	content: "";


}

#innerlink_area .innerlink_block .innerlink_box li a{
	font-size:14px;
	font-weight:300;
	line-height:1.2;
	color:#000;
	letter-spacing: 0.05em;
	text-align:center;
	
	display:block;
	padding:10px 40px 15px 40px;
	margin:0;
	
	border:none 1px;
	
}

#innerlink_area .innerlink_block .innerlink_box li a:hover{
	color: rgba(232,52,26,1.0);
	text-decoration:none;
}

#innerlink_area .innerlink_block .innerlink_box li a.active{
	border-bottom:solid 4px #000;
}

/*   detail_area   */
/*.detail_area {
	width:100%;
	margin:0;
	padding:50px 1vw;
	
	position:relative;
	background-color: rgba(255,255,255,1.0);
	
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
	
	perspective: 500px;
}*/

@media (min-width: 1200px) {
.detail_area{
	width:1200px;
	margin:0 auto;
	padding:50px 5vw;
}
}


.detail_area h2{
	font-size:28px;
	font-weight:500;
	line-height:1.4;
	color:#000;
	letter-spacing: 0.08em;
	text-align:center;
	
	width:100%;
	
	display:block;
	margin:0 0 60px 0;
	padding:00;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	align-items: center;
	justify-content: center;
	
	transition: all 0.5s ease-in-out;
	opacity: 0;
	transform-origin: 50% 0%;
	transform:translateY(-30px) rotateX(-100deg);
}

.detail_area h2::before,
.detail_area h2::after{
	content:"";
	flex-grow: 1;
	border-bottom: 1px solid #ccc;
}

.detail_area.show h2,
.show .detail_area h2{
	opacity: 1;
	transform:translateY(0) rotateX(0);
}

	/* 左側の線 */
.detail_area h2::before{
	margin-right: 20px;
	padding-left: 20px;
}

	/* 右側の線 */
.detail_area h2::after{
	margin-left: 20px;
	padding-right: 20px;
}

.detail_area h3{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:#000;
	letter-spacing: 0.05em;
}
.detail_area p + h3 {
	margin:3rem 0 0 0;
}


.detail_area p{
	font-size:14px;
	font-weight:300;
	line-height:1.8;
	color:#000;
	letter-spacing: 0.05em;
	
	margin:0 0 1rem 0;
}

.detail_area ul.detail_list_part {
	list-style: none;
	padding:0;
	margin:0 0 1rem 0;
}
.detail_area ul.detail_list_part li { 
	padding-left: 1em; 
	text-indent: -1.2em;
	
	font-size:14px;
	font-weight:300;
	line-height:1.4;
	color:#000;
	letter-spacing: 0em;
	
	margin:0 0 0.5rem 0;
}
.detail_area ul.detail_list_part li:before {
	content: "● ";
	color: #000;
}

.detail_area ul.detail_list_part li a {
	border-bottom:dotted 1px #000;
	color:#000;
}

.detail_area ul.detail_list_part li a:hover {
	color:#000;
}


.detail_area .detail_all_block{
	width:100%;
	margin:0 0 1vw 0;
	
	transform-origin: 0% 50%;
	
	transform:translateX(-20vw) translateY(0) rotateY(10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
	opacity: 0;
}

.detail_area .detail_left_block{
	width:60%;
	transform-origin: 0% 50%;
	
	transform:translateX(-20vw) translateY(0) rotateY(10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
	opacity: 0;
}

.detail_area .detail_right_block{
	width:35%;
	transform-origin: 100% 50%;
	
	transform:translateX(20vw) translateY(0) rotateY(-10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
	opacity: 0;
}


.show .detail_all_block,
.show .detail_half_block,
.show .detail_3wey_block,
.show .detail_left_block,
.show .detail_right_block,
.show .processor_block{
	transform:translateY(0) rotateX(0);
	opacity: 1;
}


/*   detail03   */
#detail03 {
	background-image: url(images/philosophy.jpg);
	background-repeat: no-repeat;
	background-size:auto 40%;
	background-position:bottom right;
	background-color: rgba(255,255,255,1.0);
}

#detail03 .detail_area {
	background-color: transparent;
}

#detail03 .detail_area .mini1 {
	width:70%
}

#detail03 .detail_area .mini2 {
	width:60%
}

#detail03 .detail_area .mini3 {
	width:40%
}
@media (min-width: 1200px) {
#detail03 .detail_area .mini1 {
	width:80%
}
#detail03 .detail_area .mini2 {
	width:80%
}
#detail03 .detail_area .mini3 {
	width:45%
}
}
/*   detail_name_block   */
.detail_area .detail_name_block {
	width:100%;
	margin:60px 0 0 0;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: flex-end;
	
	transform-origin: 100% 50%;
	
	transform:translateX(20vw) translateY(0) rotateY(-10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
	opacity: 0;
}

.show .detail_name_block{
	transform:translateY(0) rotateX(0);
	opacity: 1;
}


.detail_area .detail_name_block .com_name_box {
	display:inline-block;
	padding:5px 0 0 0;
	
	font-size:14px;
	font-weight:400;
	line-height:1.2;
	color:#000;
	letter-spacing: 0.05em;
}

.detail_area .detail_name_block .com_ceoname_box {
	display:inline-block;
	padding:0 0 0 30px;
	
}

.detail_area .detail_name_block .com_ceoname_box p {
	display:inline-block;
	
	font-size:14px;
	font-weight:400;
	line-height:1.2;
	color:#000;
	letter-spacing: 0.05em;
}

.detail_area .detail_name_block .com_ceoname_box .name_part {
	width:130px;
	height:auto;
	margin:0 0 0 20px;
	vertical-align:middle;
}


/*   com_area   */
.com_area .detail_all_block .table_normal{
	width:100%;
	
	border-top:solid 1px #dadada;
	border-collapse: collapse;
}

.com_area .detail_all_block .table_normal th,
.com_area .detail_all_block .table_normal td{
	padding:20px;
	border-bottom:solid 1px #dadada;
	
	font-size:14px;
	font-weight:300;
	line-height:1.6;
	color:#000;
	letter-spacing: 0.05em;
	text-align:left;
	vertical-align:top;
}

.com_area .detail_all_block .table_normal th a,
.com_area .detail_all_block .table_normal td a{
	color:#000;
	border-bottom:dotted 1px #000;
}

.com_area .detail_all_block .table_normal th{
	border-right:solid 1px #dadada;
	width:260px;
}

.com_area .detail_all_block .table_normal tr:nth-child(even){
	background-color: rgba(255,255,255,1.0);
}

.com_area .detail_all_block .table_normal td dl{
	margin:15px 0 0 0;
}

.com_area .detail_all_block .table_normal td dl:first-child{
	margin:0;
}

.com_area .detail_all_block .table_normal td dd.strong{
	margin:10px 0 0 0;
	font-weight:500;
}

/*   history_area   */
.history_area {

}

.history_area .table_normal{
	width:100%;
	
	border-collapse: collapse;
	border-spacing: 0;
}

.history_area .table_normal th,
.history_area .table_normal td{
	padding:0;
}

.history_area .table_normal th{
	width:85px;
	vertical-align:top;
}

.history_area .table_normal tr:nth-of-type(odd){
	background-color: rgba(246,246,246,1.0);
}

.history_area .year_block{
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	color:#000;
	letter-spacing: 0.1em;
	
	width:80px;
	padding:15px 0 0 25px;
}

.history_area dl{
	padding:0 25px 0 0;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

.history_area dl dt{
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:500;
	line-height:1.5;
	color:#000;
	letter-spacing: 0.1em;
	text-align:left;
	
	padding:15px 0 0 0;
	
	width:35px;
}

.history_area dl dt:last-of-type{
	padding:15px 0 15px 0;
}

.history_area dl dd{
	font-size:14px;
	font-weight:300;
	line-height:1.5;
	color:#000;
	letter-spacing: 0.05em;
	
	padding:15px 0 0 15px;
	width:calc(100% - 35px);
	
	position:relative;
	
	border-left: 1px #d2d2d2 solid;
}

.history_area dl dd:last-of-type{
	padding:15px 0 15px 15px;
}

.history_area dl dd:before{
	content: '';
	width: 8px;
	height: 8px;
	background: #e8341a;
	position: absolute;
	left: -4px;
	top: 24px;
	border-radius: 100%;
}

.history_area dl dd ul{
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	margin:0 25px;
}

.history_area dl dd ul li{
	padding:5px 50px 0 0;
}

/*   map_block   */
.mapname_block {
	width:50%;
	
	transform-origin: 0% 50%;
	
	transform:translateX(-20vw) translateY(0) rotateY(10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	opacity: 0;
}


.mapname_block p img{
	width:50%;
	height:auto;
}


.map_block {
	position: relative;
	width: 65%;
	padding-top: 25%; /* = height ÷ width × 100 */
	
	transform-origin: 100% 50%;
	
	transform:translateX(20vw) translateY(0) rotateY(-10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.0s;
	opacity: 0;
}
.map_block iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map_line_block {
	width:100%;
	border-bottom:solid 1px #dbdbdb;
	
	padding:30px 0 0 0;
	margin:0 0 30px 0;

}

.show .mapname_block,
.show .map_block{
	transform:translateY(0) rotateX(0);
	opacity: 1;
}


/*   processor_area   */
#processor_area {
	position:relative;
	
	min-height:300px;
	background-color: rgba(255,255,255,1.0);
}

#processor_area .processor_bg_block{
	position:absolute;
	
	width:100%;
	height:100%;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	align-items: flex-start;
	align-content: flex-start;
}

#processor_area .processor_bg_block img{
	width:216px;
	height:350px;
}

#processor_area .processor_title_box{
	position:absolute;
	
	width:100%;
	height:100%;
}

#processor_area .processor_title_box h2{
	font-size:24px;
	font-weight:500;
	line-height:1.4;
	color:#fff;
	letter-spacing: 0.05em;
	
	display:inline-block;
	padding:30px 0 0 15px;
	
}

#processor_area .processor_block{
	position: relative;
	top:0;
	
	width:100%;
	height:100%;
	
	padding:50px 0 25px 220px;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
}

#processor_area .processor_block .processor_copy_box{
	font-size:14px;
	font-weight:300;
	line-height:1.8;
	color:#000;
	letter-spacing: 0.05em;
	
	padding:0 20px;
	margin:0 0 1rem 0;
	
	width:100%;
}

#processor_area .processor_block .processor_box{
	width:50%;
	
	padding:0 20px;
}

#processor_area .processor_block .processor_box:nth-of-type(2){
	padding-left:60px;
}

#processor_area .processor_block .processor_box ul.detail_list_part {
	list-style: none;
	padding:0;
	margin:0 0 1rem 0;
}
#processor_area .processor_block .processor_box ul.detail_list_part li { 
	padding-left: 1em; 
	text-indent: -1.2em;
	
	font-size:14px;
	font-weight:300;
	line-height:1.4;
	color:#000;
	letter-spacing: 0em;
	
	margin:0 0 0.5rem 0;
}
#processor_area .processor_block .processor_box ul.detail_list_part li:before {
	content: "● ";
	color: #000;
}



/*------------------------------
SmartPhone---768breakPoint
================================*/
@media screen and (max-width: 768px) {
/*#responsive base*/

/*   all parts   */

#maintitle_area #mainlogo_block{
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;

		width:100%;
		padding:0 1vw;
	
	margin:0 0 8vw 0;
}

#maintitle_area #mainlogo_block .pro_logo_box{
		width:100%;
	padding:72vw 0.2rem 0 0.2rem;

		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:nowrap;
		-ms-flex-wrap:nowrap;
		flex-wrap:nowrap;
		
		align-content: flex-end;
		align-items: flex-end;
		
		opacity: 0;
		animation-delay:0.1s;
		animation-duration: 0.5s;
		animation-timing-function: ease-in-out;
		animation-fill-mode:forwards;
		
		-webkit-animation-name: fadeInUp;
		-moz-animation-name: fadeInUp;
		-o-animation-name: fadeInUp;
		animation-name: fadeInUp;

}

#maintitle_area #mainlogo_block .pro_logo_box .logoimg_part{
	font-size:0.24rem;
		font-weight:700;
		line-height:1;
		color:#000;
		letter-spacing: 0.1em; 
		text-align:left;
	
}



#maintitle_area #main_copy{
		width:100%;
		padding:0 1vw;
		
		margin:0;
}

#maintitle_area #main_copy p{
	width:100%;
	padding:0 0.2rem;
	margin:0;

	font-size:0.16rem;
		font-weight:300;
	line-height:0.25rem;
		color:#000;
		letter-spacing: 0.08em; 
		text-align:left;

/*
	text-shadow:2px 2px 4px #000000,-2px -2px 4px #000000;
*/

		opacity: 0;
		animation-delay:0.5s;
		animation-duration: 1.0s;
		animation-timing-function: ease-in-out;
		animation-fill-mode:forwards;
		
		-webkit-animation-name: fadeInUp;
		-moz-animation-name: fadeInUp;
		-o-animation-name: fadeInUp;
		animation-name: fadeInUp;


}



/*   innerlink_area   */
#innerlink_area {
		position:relative;
		width:100%;
		padding:0 1vw;
		margin:0;
		background-color: rgba(255,255,255,1.0);
		
		perspective: 500px;
		
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	justify-content: center;

}



#innerlink_area .innerlink_block{
		position: relative;
		
		width:calc(100vw - 4vw);
		height:100%;
	
	padding:2vw 0;
		border:solid 1px #ccc;
		
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		
		justify-content: space-between;
		
		transition: all 0.5s ease-in-out;
		opacity: 0;
		transform-origin: 50% 0%;
		transform:translateY(-30px) rotateX(10deg) scaleY(0.1);
}

#innerlink_area.show .innerlink_block{
	opacity: 1;
	transform:translateY(0) rotateX(0);
}

#innerlink_area .innerlink_title_box{
	position:relative;
	
	width:100%;
	height:100%;
	
	margin:0 0 40px 0;
}

#innerlink_area .innerlink_title_box h2{
	font-size:28px;
	font-weight:500;
	line-height:1.4;
	color:#000;
	letter-spacing: 0.2em;
	text-align:center;
}


#innerlink_area .innerlink_block .innerlink_box{
		width:100%;
		
		list-style: none;
		padding:0;
		margin:0;
		
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
		
	justify-content:flex-start;
}


#innerlink_area .innerlink_block .innerlink_box li{
		margin:0;
	padding:0 0.1rem;
	
		position:relative;
}

#innerlink_area .innerlink_block .innerlink_box li::after{
		content: "|";
		color: #ccc;
		display:block;
	font-size:0.14rem;
		font-weight:300;
	
		position:absolute;
		right:0;
	top:10px;

}

#innerlink_area .innerlink_block .innerlink_box li:last-child::after{
		content: "";


}

#innerlink_area .innerlink_block .innerlink_box li a{
	font-size:0.14rem;
		font-weight:300;
		line-height:1.2;
		color:#000;
		letter-spacing: 0.05em;
		text-align:center;
	
		display:block;
	padding:10px 1vw 15px 1vw;
	margin:0;
	
	border:none 1px;
	
}

#innerlink_area .innerlink_block .innerlink_box li a:hover{
		color: rgba(232,52,26,1.0);
		text-decoration:none;
}

#innerlink_area .innerlink_block .innerlink_box li a.active{
		border-bottom:solid 4px #000;
}

/*   detail_area   */
.detail_area {
		width:100%;
		margin:0;
	padding:40px 0.1rem;
		
		position:relative;
		background-color: rgba(255,255,255,1.0);
		
		
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		
		justify-content: space-between;
		
		perspective: 500px;

}

.detail_area h2{
	font-size:0.20rem;
		font-weight:500;
		line-height:1.4;
		color:#000;
		letter-spacing: 0.08em;
		text-align:center;
		
		width:100%;
		
		display:block;
	margin:0 0 7vw 0;
		padding:0;
	
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		
		align-items: center;
		justify-content: center;
		
		transition: all 0.5s ease-in-out;
		opacity: 0;
		transform-origin: 50% 0%;
		transform:translateY(-30px) rotateX(-100deg);
}

.detail_area h2::before,
.detail_area h2::after{
		content:"";
		flex-grow: 1;
		border-bottom: 1px solid #ccc;
}

.detail_area.show h2,
.show .detail_area h2{
		opacity: 1;
		transform:translateY(0) rotateX(0);
}

	/* 左側の線 */
.detail_area h2::before{
		margin-right: 20px;
		padding-left: 20px;
}

	/* 右側の線 */
.detail_area h2::after{
		margin-left: 20px;
		padding-right: 20px;
}

.detail_area h3{
	font-size:16px;
	font-weight:500;
	line-height:1.4;
	color:#000;
	letter-spacing: 0.05em;
}
.detail_area p + h3 {
	margin:0.3rem 0 0 0;
}


.detail_area p{
	font-size:0.14rem;
		font-weight:300;
		line-height:1.8;
		color:#000;
		letter-spacing: 0.05em;
	
	margin:0 0 0.1rem 0;
}

.detail_area ul.detail_list_part {
	list-style: none;
	padding:0;
	margin:0 0 1rem 0;
}
.detail_area ul.detail_list_part li { 
	padding-left: 1em; 
	text-indent: -1.2em;
	
	font-size:14px;
	font-weight:300;
	line-height:1.4;
	color:#000;
	letter-spacing: 0em;
	
	margin:0 0 0.5rem 0;
}
.detail_area ul.detail_list_part li:before {
	content: "● ";
	color: #000;
}

.detail_area ul.detail_list_part li a {
	border-bottom:dotted 1px #000;
	color:#000;
}

.detail_area ul.detail_list_part li a:hover {
	color:#000;
}


.detail_area .detail_all_block{
	width:100%;
	margin:0 0 1vw 0;
	
	transform-origin: 0% 50%;
	
	transform:translateX(-20vw) translateY(0) rotateY(10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
	opacity: 0;
}

.detail_area .detail_left_block{
	width:60%;
	transform-origin: 0% 50%;
	
	transform:translateX(-20vw) translateY(0) rotateY(10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
	opacity: 0;
}

.detail_area .detail_right_block{
	width:35%;
	transform-origin: 100% 50%;
	
	transform:translateX(20vw) translateY(0) rotateY(-10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
	opacity: 0;
}


.show .detail_all_block,
.show .detail_half_block,
.show .detail_3wey_block,
.show .detail_left_block,
.show .detail_right_block,
.show .processor_block{
	transform:translateY(0) rotateX(0);
	opacity: 1;
}


/*   detail03   */
#detail03 {
		background-image: url(images/philosophy.jpg);
		background-repeat: no-repeat;
	background-size: 300vw;
		background-position:bottom right;
		background-color: rgba(255,255,255,1.0);
	padding:0 0 40vw 0;
}

#detail03 .detail_area {
	background-color: transparent;
}

#detail03 .detail_area .mini1 {
	width:100%
}

#detail03 .detail_area .mini2 {
	width:100%
}

#detail03 .detail_area .mini3 {
	width:100%
}

/*   detail_name_block   */
.detail_area .detail_name_block {
		width:100%;
	margin:7vw 0 0 0;
	
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
		
		justify-content: flex-end;
		
		transform-origin: 100% 50%;
		
		transform:translateX(20vw) translateY(0) rotateY(-10deg);
		transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s;
		opacity: 0;
}

.show .detail_name_block{
		transform:translateY(0) rotateX(0);
		opacity: 1;
}


.detail_area .detail_name_block .com_name_box {
		display:inline-block;
		padding:5px 0 0 0;
		
		font-size:14px;
		font-weight:400;
		line-height:1.2;
		color:#000;
		letter-spacing: 0.05em;
}

.detail_area .detail_name_block .com_ceoname_box {
		display:inline-block;
		padding:0 0 0 30px;
	
}

.detail_area .detail_name_block .com_ceoname_box p {
	display:inline-block;
	
	font-size:14px;
	font-weight:400;
	line-height:1.2;
	color:#000;
	letter-spacing: 0.05em;
}

.detail_area .detail_name_block .com_ceoname_box .name_part {
	width:130px;
	height:auto;
	margin:0 0 0 20px;
	vertical-align:middle;
}


/*   com_area   */
.com_area .detail_all_block .table_normal{
		width:100%;
		
		border-top:solid 1px #dadada;
		border-collapse: collapse;
}

.com_area .detail_all_block .table_normal th,
.com_area .detail_all_block .table_normal td{
	padding:0.1rem;
		border-bottom:solid 1px #dadada;
	
	font-size:0.14rem;
		font-weight:300;
		line-height:1.6;
		color:#000;
		letter-spacing: 0.05em;
		text-align:left;
		vertical-align:top;
	
	display:block;
}

.com_area .detail_all_block .table_normal th a,
.com_area .detail_all_block .table_normal td a{
		color:#000;
		border-bottom:dotted 1px #000;
}

.com_area .detail_all_block .table_normal th{
	border-right:none 1px #dadada;
	width:100%;
	background-color: rgba(255,255,255,1.0);
}

.com_area .detail_all_block .table_normal td{
	padding-bottom:0.3rem;
}

.com_area .detail_all_block .table_normal tr:nth-child(even){
	background-color: rgba(255,255,255,1.0);
}

.com_area .detail_all_block .table_normal td dl{
	margin:15px 0 0 0;
}

.com_area .detail_all_block .table_normal td dl:first-child{
	margin:0;
}

.com_area .detail_all_block .table_normal td dd.strong{
	margin:10px 0 0 0;
	font-weight:500;
}


	
/*   history_area   */
.history_area {

}

.history_area .table_normal{
	width:100%;
	
	border-collapse: collapse;
	border-spacing: 0;
}

.history_area .table_normal th,
.history_area .table_normal td{
	padding:0;
}

.history_area .table_normal th{
	width:50px;
	vertical-align:top;
}

.history_area .table_normal tr:nth-of-type(odd){
	background-color: rgba(246,246,246,1.0);
}

.history_area .year_block{
		font-family: 'Roboto', sans-serif;
	font-size:0.15rem;
		font-weight:500;
		line-height:1.5;
		color:#000;
	letter-spacing: 0.05em;
	text-align:left;
	
	width:auto;
	padding:0.15rem 0 0 0.05rem;
}

.history_area dl{
	padding:0 0.05rem 0 0;
	
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
}

.history_area dl dt{
		font-family: 'Roboto', sans-serif;
	font-size:0.15rem;
		font-weight:500;
		line-height:1.5;
		color:#000;
	letter-spacing: 0.05em;
	text-align:left;
	
	padding:0.15rem 0 0 0;
	
		width:25px;
}

.history_area dl dt:last-of-type{
	padding:0.15rem 0 0.15rem 0;
}

.history_area dl dd{
	font-size:0.13rem;
		font-weight:300;
		line-height:1.5;
		color:#000;
		letter-spacing: 0.05em;
	
	padding:0.15rem 0 0 0.15rem;
	width:calc(100% - 25px);
	
		position:relative;
		
		border-left: 1px #d2d2d2 solid;
}

.history_area dl dd:last-of-type{
	padding:0.15rem 0 0.15rem 0.1rem;
}

.history_area dl dd:before{
		content: '';
		width: 8px;
		height: 8px;
		background: #e8341a;
		position: absolute;
		left: -4px;
	top: 0.22rem;
		border-radius: 100%;
}

.history_area dl dd ul{
		display:-webkit-box;
		display: -webkit-flex;
		display:-ms-flexbox;
		display: flex;
		-webkit-flex-wrap:wrap;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap;
	
	margin:0 0 0 20px;
}

.history_area dl dd ul li{
	padding:5px 0 0 0;
}

/*   map_block   */
.mapname_block {
	width:100%;
	
	transform-origin: 0% 50%;
	
	transform:translateX(-20vw) translateY(0) rotateY(10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
	opacity: 0;
}
.mapname_block p img{
	width:50%;
	height:auto;
}


.map_block {
	position: relative;
	width: 100%;
	padding-top: 50%; /* = height ÷ width × 100 */
	
	transform-origin: 100% 50%;
	
	transform:translateX(20vw) translateY(0) rotateY(-10deg);
	transition: all 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.0s;
	opacity: 0;
}
.map_block iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map_line_block {
	width:100%;
	border-bottom:solid 1px #dbdbdb;
	
	padding:30px 0 0 0;
	margin:0 0 30px 0;

}

.show .mapname_block,
.show .map_block{
	transform:translateY(0) rotateX(0);
	opacity: 1;
}


/*   processor_area   */
#processor_area {
	position:relative;
	
	min-height:300px;
	background-color: rgba(255,255,255,1.0);
}

#processor_area .processor_bg_block{
	position:absolute;
	
	width:100%;
	height:100%;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	align-items: flex-start;
	align-content: flex-start;
}

#processor_area .processor_bg_block img{
	width:216px;
	height:350px;
}

#processor_area .processor_title_box{
	position:absolute;
	
	width:100%;
	height:100%;
}

#processor_area .processor_title_box h2{
	font-size:24px;
	font-weight:500;
	line-height:1.4;
	color:#fff;
	letter-spacing: 0.05em;
	
	display:inline-block;
	padding:30px 0 0 15px;
	
}

#processor_area .processor_block{
	position: relative;
	top:0;
	
	width:100%;
	height:100%;
	
	padding:50px 0 25px 220px;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
}

#processor_area .processor_block .processor_copy_box{
	font-size:14px;
	font-weight:300;
	line-height:1.8;
	color:#000;
	letter-spacing: 0.05em;
	
	padding:0 20px;
	margin:0 0 1rem 0;
	
	width:100%;
}

#processor_area .processor_block .processor_box{
	width:50%;
	
	padding:0 20px;
}

#processor_area .processor_block .processor_box:nth-of-type(2){
	padding-left:60px;
}

#processor_area .processor_block .processor_box ul.detail_list_part {
	list-style: none;
	padding:0;
	margin:0 0 1rem 0;
}
#processor_area .processor_block .processor_box ul.detail_list_part li { 
	padding-left: 1em; 
	text-indent: -1.2em;
	
	font-size:14px;
	font-weight:300;
	line-height:1.4;
	color:#000;
	letter-spacing: 0em;
	
	margin:0 0 0.5rem 0;
}
#processor_area .processor_block .processor_box ul.detail_list_part li:before {
	content: "● ";
	color: #000;
}

}