@charset "UTF-8";
/* KV ======================================== */
#mainImage {
	background-color:#000046;
}
.imgSwitch img {
	width:100%;
}
#t_news {
	/*background-color:#e2f1f4;*/
	background-color:#e2f1f4;
}
.carousel .slide_i li a:hover img {
	opacity:.85;
}
.carousel .slide_s {
	text-align:center;
	width:100%;
	position:absolute;
	left:0; bottom:-32px;
	background-color: #fff;
}
.carousel .slide_s li {
	width:10px;
	height:10px;
	margin:0 5px;
	background-color:#ADB5D3;
	border-radius:50%;
	display:inline-block;
	cursor:pointer;
}
.carousel .slide_s li.on {
	background-color:#000046;
}
article{
	/*background-color:#E5EBF5;*/
	background-color: #fff;
}

/* NEWS ======================================== */
#news {
	margin: 80px auto 0;
	padding: 0 0 64px 0;
}
#news .title{
	padding: 0;
	margin: 0 0 20px 64px;
	font-size: 24px;
	font-weight: bold;
	color:#000046;
}
#news .box{
	width: 100%;
	max-width: 700px;
	padding: 0;
	margin: 0 auto;
}
#news ul{
	display: flex;
	width: 100%;
	padding: 0;
	margin: 0 0 24px 0;
}
#news ul:last-child{
	margin: 0;
}
#news ul li{
	font-size: 16px;
	padding: 0;
	margin: 0;
	display: flex;
	color: #212121;
}
#news ul li:nth-child(1){
	width: 100%;
	max-width: 140px;
}
#news ul li:nth-child(2){
	width: 100%;
}
#news ul li div:nth-child(1){
	width: 100%;
	max-width: 78px;
}
#news ul li div:nth-child(2){
	width: 100%;
	max-width: 160px;
}
#news ul li:nth-child(1) div{
	max-width: none;
	white-space: nowrap;
}
#news ul li a{
	text-decoration: none;
	color: #212121;
}
#news ul li a:hover{
	text-decoration: underline;
}


@media screen and (max-width:767px){
	#news {
		margin: 48px auto 0;
		padding: 0 16px 36px;
	}
	#news .title{
		padding: 0;
		margin: 0 0 20px 0;
		font-size: 18px;
		font-weight: bold;
		color:#000046;
	}
	#news .box{
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#news ul{
		display: block;
		padding: 0 ;
		margin: 0 0 24px 0;
	}
	#news ul:last-child{
		margin: 0;
	}
	#news ul li{
		font-size: 14px;
		padding: 0;
		margin: 0;
		display: flex;
	}
	#news ul li:nth-child(1){
		width: 100%;
		max-width: 100%;
		margin: 0 0 8px 0;
	}
	#news ul li:nth-child(2){
		width: 100%;
		margin: 0 0 12px 0;
		line-height: 1.6;
	}
	#news ul li div:nth-child(1){
		width: 100%;
		max-width: 60px;
	}
	#news ul li:nth-child(1) div{
		max-width: none;
		white-space: nowrap;
	}
	#news ul li:last-child{
		margin: 0;
	}
}

/* 製品情報 ======================================== */
#products {
	margin: 0 auto;
	padding: 64px 64px 96px;
	background-color: #F9F9F9;
}
#products .title{
	padding: 0;
	margin: 0 0 60px 0;
	font-size: 24px;
	font-weight: bold;
	color:#000046;
}
#products .box{
	width: 100%;
	max-width: 940px;
	padding: 0;
	margin: 0 auto;
}
#products ul{
	width:100%;
	margin:0 auto;
	padding:0;
	display: flex;
}
#products ul a{
	display:block;
	text-decoration:none;
}
#products ul a:hover{
	opacity:.75;
}
#products ul li{
	width:100%;
	max-width: 440px;
	position: relative;
	margin:0;
	box-shadow: none;
}
#products ul li:first-child{
	margin-right:6.2%;
}
#products ul li .img_area{
	position: relative;
	width:100%;
}
#products ul li .img_area img{
	width:100%;
	vertical-align:top;
}
#products ul li .text_area{
	background-color:#000046;
	position:relative;
	padding: 22px;
}
#products ul li .text_area .title{
	width: 100%;
	position:relative;
	padding:0;
	margin: 0 0 16px 0;
}
#products ul li .text_area .title:before {
	content:"";
	width:12px;
	height:12px;
	position:absolute;
	right:0;
	margin-top:16px;
	border-top: 2px solid #BEBEBE;
	border-right: 2px solid #BEBEBE;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#products ul li .text_area .title p{
	color:#fff;
	font-size: 28px;
	font-weight: bold;
	padding:0;
	margin: 0;
}
#products ul li .text_area p{
	color:#fff;
	font-size:16px;
	line-height:1.6;
	font-weight: bold;
	padding:0;
	margin: 0;
}





#products .joint_dev{
	display: flex!important;
	width:100%;
	margin:60px auto 0;
	padding:0;
	border: 1px solid #DBDBDB;
	background-color: #fff;
}
#products a{
	display:block;
	text-decoration:none;
}
#products a:hover{
	opacity:.75;
}
#products .joint_dev .img_area{
	width:100%;
	max-width: 174px;
	margin:0;
	padding:0;
}
#products .joint_dev .img_area img{
	width:100%;
}
#products .joint_dev .text_area{
	width: 100%;
	position:relative;
	padding: 16px 24px;
}

#products .joint_dev .text_area .title:before {
	content:"";
	width:12px;
	height:12px;
	position:absolute;
	right:24px;
	top:8px;
	margin-top:16px;
	border-top: 2px solid #BEBEBE;
	border-right: 2px solid #BEBEBE;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#products .joint_dev .text_area .title{
	color:#000046;
	font-size: 28px;
	font-weight: bold;
	padding:0;
	margin: 0 0 16px 0;
}
#products .joint_dev .text_area p{
	color:#727272;
	font-size:16px;
	line-height:1.6;
	font-weight: bold;
	padding:0;
	margin: 0;
}



@media screen and (max-width:767px){
	#products {
		margin: 0 auto;
		padding: 32px 16px 24px;
	}
	#products .title{
		padding: 0;
		margin: 0 0 24px 0;
		font-size: 18px;
		font-weight: bold;
		color:#000046;
	}
	#products .box{
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#products ul{
		display: block;
		padding: 0 ;
		margin: 0 0 24px 0;
	}
	#products ul li{
		width:100%;
		max-width: 100%;
		position: relative;
		margin:0 0 24px 0;
		box-shadow: none;
	}
	#products ul li:first-child{
		margin-right:0;
	}
	#products ul li .text_area{
		background-color:#000046;
		position:relative;
		padding: 8px 16px;
	}
	#products ul li .text_area .title{
		width: 100%;
		position:relative;
		padding:0;
		margin: 0 0 8px 0;
	}
	#products ul li .text_area .title:before {
		content:"";
		width:10px;
		height:10px;
		position:absolute;
		right:0;
		margin-top:8px;
		border-top: 2px solid #BEBEBE;
		border-right: 2px solid #BEBEBE;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#products ul li .text_area .title p{
		color:#fff;
		font-size: 18px;
		font-weight: bold;
		padding:0;
		margin: 0;
	}
	#products ul li .text_area p{
		color:#fff;
		font-size:14px;
		line-height:1.6;
		font-weight: bold;
		padding:0 0 8px 0;
		margin: 0;
	}




	#products .joint_dev{
		display: block!important;
		margin:24px auto 0;
		padding:0;
		border: 1px solid #DBDBDB;
		background-color: #fff;
	}
	#products a{
		display:block;
		text-decoration:none;
	}
	#products a:hover{
		opacity:.75;
	}
	#products .joint_dev .img_area{
		width:100%;
		max-width: 60%;
		margin:0 auto;
		padding:16px 0;
	}
	#products .joint_dev .img_area img{
		width:100%;
	}
	#products .joint_dev .text_area{
		width: 100%;
		position:relative;
		padding: 0;
	}

	#products .joint_dev .text_area .title:before {
		content:"";
		width:10px;
		height:10px;
		position:absolute;
		right:16px;
		top:0;
		margin-top:0;
		border-top: 2px solid #BEBEBE;
		border-right: 2px solid #BEBEBE;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#products .joint_dev .text_area .title{
		color:#000046;
		font-size: 18px;
		font-weight: bold;
		padding: 0 16px;
		margin: 0 0 16px 0;
	}
	#products .joint_dev .text_area p{
		color:#727272;
		font-size:14px;
		line-height:1.4;
		font-weight: bold;
		padding: 0 16px 16px;
		margin: 0;
	}
}

/* ストーリー ======================================== */
#story {
	position: relative;
	margin: 0 auto;
	padding: 88px 64px 96px;
	background-color: #fff;
}
#story .title{
	padding: 0;
	margin: 0;
	font-size: 24px;
	font-weight: bold;
	color:#000046;
}
#story .box{
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0 auto;
}
#story ul{
	width:100%;
	padding:0;
	margin: 0;
}
#story ul li{
	position: relative;
	width:100%;
	padding:0;
	margin:0;
	height: 450px;
}
#story ul li{
	margin:0 0 72px 0;
}
#story ul li:last-child{
	margin:0 0 0 0;
}
#story ul li .img_area{
	position: absolute;
	width:100%;
}
#story ul li .img_area img{
	width:100%;
}
.btn_story {
	position: absolute;
	display:table;
	width:100%;
	max-width: 252px;
	height: 56px;
}
.btn_story a {
	line-height:150%;
	font-weight:normal;
	color:#212121;
	text-align:center;
	text-decoration:none;
	background-color:#fff;
	display:table-cell;
	padding:12px 30px;
	vertical-align:middle;
	position:relative;
	border: 1px solid #707070;
	border-radius:4px;
	cursor:pointer;
}
.btn_story a:before {
	content:"";
	width:11px;
	height:11px;
	position:absolute;
	right:18px;
	margin-top:5px;
	border-top: 2px solid #BEBEBE;
	border-right: 2px solid #BEBEBE;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.size_pic01{
	max-width:708px;
	top:0;
	right:0;
	z-index: 1;
}
.size_title01{
	max-width:520px;
	top:80px;
	left:0;
	z-index: 2;
}
.size_btn01{
	bottom:54px;
	left:42px;
	z-index: 2;
}
.size_pic02{
	max-width:708px;
	top:0;
	left:0;
	z-index: 1;
}
.size_title02{
	max-width:520px;
	top:75px;
	right:-14px;
	z-index: 2;
}
.size_btn02{
	bottom:54px;
	right:56px;
	z-index: 2;
}
.size_pic03{
	max-width:708px;
	top:0;
	right:0;
	z-index: 1;
}
.size_title03{
	max-width:520px;
	top:80px;
	left:0;
	z-index: 2;
}
.size_btn03{
	bottom:54px;
	left:42px;
	z-index: 2;
}
#story ul a{
	display:block;
	text-decoration:none;
}
#story ul a:hover{
	opacity:.75;
}

@media screen and (max-width:767px){
	#story {
		margin: 0 auto;
		padding: 32px 16px 24px;
	}
	#story .title{
		padding: 0;
		margin: 0 0 24px 0;
		font-size: 18px;
		font-weight: bold;
		color:#000046;
	}
	#story .box{
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#story ul{
		display: block;
		padding: 0 ;
		margin: 0 0 24px 0;
	}
	#story ul li{
		width:100%;
		max-width: 100%;
		height: auto;
		position: relative;
		margin:0 auto 24px!important;
		box-shadow: none;
	}
	#story ul li:first-child{
		margin-right:0;
	}
	#story ul li .img_area{
		position: relative;
		width:100%;
	}
	#story ul li .img_area img{
		width:100%;
	}
	#story .story_lead_text{
		margin: 0;
		color:#000;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.4;
		text-align: left;
	}
	#story .story_lead_text span{
		display: inline;
		margin-top: 0;
		font-size: 13px;
		line-height: 1.6;
	}
	.btn_story {
		position: relative;
		display:table;
		width:100%;
		max-width: 100%;
		height: 48px;
		margin: 0 auto;
	}
	.btn_story a {
		line-height:150%;
		font-weight:normal;
		color:#212121;
		text-align:center;
		text-decoration:none;
		background-color:#fff;
		display:table-cell;
		padding:8px 24px;
		vertical-align:middle;
		position:relative;
		border: 1px solid #707070;
		border-radius:4px;
		cursor:pointer;
		font-size: 14px;
	}
	.btn_story a:before {
		content:"";
		width:11px;
		height:11px;
		position:absolute;
		right:18px;
		margin-top:5px;
		border-top: 2px solid #BEBEBE;
		border-right: 2px solid #BEBEBE;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.size_pic01{
		max-width:100%;
		top:0;
		right:0;
		z-index: 1;
	}
	.size_title01{
		max-width:240px;
		top:0;
		left:0;
		z-index: 2;
		margin: 12px 0 16px;
	}
	.size_btn01{
		bottom:16px;
		left:0;
		z-index: 2;
	}
	.size_pic02{
		max-width:100%;
		top:0;
		left:0;
		z-index: 1;
	}
	.size_title02{
		max-width:240px;
		top:0;
		left:0;
		z-index: 2;
		margin: 12px 0 16px;
	}
	.size_btn02{
		bottom:16px;
		right:0;
		z-index: 2;
	}
	.size_pic03{
		max-width:100%;
		top:0;
		right:0;
		z-index: 1;
	}
	.size_title03{
		max-width:240px;
		top:0;
		left:0;
		z-index: 2;
		margin: 12px 0 16px;
	}
	.size_btn03{
		bottom:16px;
		left:0;
		z-index: 2;
	}
	#story ul a{
		display:block;
		text-decoration:none;
	}
	#story ul a:hover{
		opacity:.75;
	}
}
/* 会社情報 ======================================== */
#company {
	margin: 0 auto;
	padding: 64px 64px 120px;
}
#company .title{
	padding: 0;
	margin: 0 0 60px 0;
	font-size: 24px;
	font-weight: bold;
	color:#000046;
}
#company .box{
	width: 100%;
	max-width: 1074px;
	padding: 0;
	margin: 0 auto;
}
#company ul{
	width:100%;
	margin:0 auto;
	padding:0;
	display: flex;
}
#company ul a{
	display:block;
	text-decoration:none;
}
#company ul a:hover{
	opacity:.75;
}
#company ul li{
	width:100%;
	max-width: 340px;
	position: relative;
	margin:0;
	box-shadow: none;
	margin-right:2.4%;
}
#company ul li:last-child{
	margin-right:0;
}
#company ul li .img_area{
	position: relative;
	width:100%;
}
#company ul li .img_area img{
	width:100%;
	vertical-align:top;
}
#company ul li .text_area{
	position:relative;
	padding: 20px 0 8px;
}
#company ul li .text_area .title{
	width: 100%;
	position:relative;
	padding:0;
	margin: 0 0 4px 0;
}
#company ul li .text_area .title:before {
	content:"";
	width:10px;
	height:10px;
	position:absolute;
	right:12px;
	margin-top:6px;
	border-top: 2px solid #BEBEBE;
	border-right: 2px solid #BEBEBE;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

#company ul li .text_area .title p{
	color:#000046;
	font-size: 16px;
	font-weight: bold;
	padding:0;
	margin: 0;
}
#company ul li .text_area p{
	color:#212121;
	font-size:16px;
	line-height:1.6;
	font-weight: normal;
	padding:0;
	margin: 0;
}
@media screen and (max-width:767px){
	#company {
		margin: 0 auto;
		padding: 8px 16px 24px;
	}
	#company .title{
		padding: 0;
		margin: 0 0 24px 0;
		font-size: 18px;
		font-weight: bold;
		color:#000046;
	}
	#company .box{
		width: 100%;
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
	}
	#company ul{
		display: block;
		padding: 0 ;
		margin: 0 0 24px 0;
	}
	#company ul li{
		width:100%;
		max-width: 100%;
		position: relative;
		margin:0 0 32px 0;
		box-shadow: none;
	}
	#company ul li{
		margin-right:0;
	}
	#company ul li .text_area{
		background-color:#fff;
		position:relative;
		padding: 8px;
	}
	#procompany ul li .text_area .title{
		width: 100%;
		position:relative;
		padding:0;
		margin: 0 0 4px 0;
	}
	#company ul li .text_area .title:before {
		content:"";
		width:8px;
		height:8px;
		position:absolute;
		right:0;
		margin-top:8px;
		border-top: 2px solid #BEBEBE;
		border-right: 2px solid #BEBEBE;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#company ul li .text_area .title p{
		color:#000046;
		font-size: 16px;
		font-weight: bold;
		padding:0;
		margin: 0;
	}
	#company ul li .text_area p{
		color:#212121;
		font-size:14px;
		line-height:1.6;
		font-weight: normal;
		padding:0 0 8px 0;
		margin: 0;
	}
}

.sliderArea img{
	width: 100%;
	max-width: 1200px;
}