﻿/*-- 

	Blog Ele

====================================================== --*/
#Blog br.clear + br.clear{
	display:none;
}
/*-- Blog --*/
/*-- ------------------------------------------------- --*/
#Blog .contents{
	background:url(../../images/blog/bg_top.png) no-repeat center 30px;
	padding:130px 0px 0px;
}


#Blog .on ~ section .pager{
	display:block;
}
#Blog .pager{
	display:none;
	width:100%;
	position:fixed;
	top:63px;
	height:62px;
	background:white;
	border-top:1px solid #e7e7e7;
	border-bottom:1px solid #e7e7e7;
	left:0px;
	z-index:5000;
}

#Blog .pager nav{
	width:993px;
	margin:0px auto;
	text-align:center;
	position:relative;
}
#Blog .pager nav a{
	position:absolute;
	top:19px;
	line-height:24px;
	font-size:13px;
	display:block;
	color:rgba(0,0,0,0);
	text-decoration:none;
	overflow:hidden;
	width:1px;
	white-space:nowrap;
	transition:color 300ms ease;
}
#Blog .pager nav a span{
	visibility:hidden;
}
#Blog .pager nav a:hover{
	color:#000;
	width:auto;
}
#Blog .pager nav a:hover span{
	visibility:visible;
}
#Blog .pager nav a:hover ~ p{
	display:none;
}
#Blog .pager nav a.prev{
	left:0px;
	background:url(../../images/blog/mark_prev.png) no-repeat left center;
	padding:0px 0px 0px 20px;
}
#Blog .pager nav a.next{
	right:0px;
	background:url(../../images/blog/mark_next.png) no-repeat right center;
	padding:0px 20px 0px 0px;
	text-align:right;
}
#Blog .pager nav p{
	font-size:13px;
	line-height:24px;
	padding:19px 0px;
	margin:0px;
	color:#000;
}

#Blog article{
	width:993px;
	margin:0px auto;
}
#Blog article p{
	font-size:13px;
	margin:0px 0px 15px;
	line-height:24px;
	color:#000;
}
#Blog article p.date{
	margin:0px 0px 5px;
}
#Blog article h1{
	color:#000;
	font-weight:normal;
	font-size:25px;
	line-height:1.4em;
	margin:0px 0px 50px;
}
#Blog article h2{
	margin:0px 40px 15px;
	line-height:1.6em;
	font-size:17px;
	font-weight:normal;
	color:#000;
}

#Blog article .blockA{
}
#Blog article .blockA .img{
	text-align:center;
	margin:50px 0px 30px;
}

#Blog article .blockA p{
	margin:0px 40px 50px;
}


#Blog article .blockB{
}
#Blog article .blockB .img{
	text-align:center;
	width:993px;
	margin:0px 0px 15px;
}
#Blog article .blockB .img02{
	text-align:center;
	width:489px;
	float:left;
	margin:0px 0px 35px;
}
#Blog article .blockB .img03{
	text-align:center;
	width:489px;
	float:right;
	margin:0px 0px 35px;
}
#Blog article .blockB .img04{
	text-align:center;
	width:489px;
	float:left;
	margin:0px 0px 50px;
}
#Blog article .blockB .img05{
	text-align:center;
	width:489px;
	float:right;
	margin:0px 0px 50px;
}
#Blog article .blockB > p{
	margin:0px 40px 50px;
}
#Blog article .blockB div p{
	margin:0px;
}
#Blog article .blockB div img{
	max-width:100%;
}
#Blog article .blockB .text02{
	float:right;
	width:400px;
	margin:0px 50px 50px 0px;
}
#Blog article .blockB .text03{
	float:left;
	width:400px;
	margin:0px 0px 50px 50px;
}

#Blog article .blockB .img06{
	text-align:center;
	width:489px;
	float:left;
	margin:0px 0px 50px;
}
#Blog article .blockB .img07{
	text-align:center;
	width:489px;
	float:right;
	margin:0px 0px 50px;
}
#Blog article .blockB .img06 p,
#Blog article .blockB .img07 p{
	margin:20px 40px 0px;
	text-align:left;
}



#Blog .articleList{
	margin:-345px 0px 0px 0px;
	padding:395px 0px 100px;
	background:url(../img/slash_gray_f6.png) no-repeat center top, url(../img/bg_gray_f6.png) no-repeat 0px 621px;
	background-size:auto auto,100% 100%;
}
@media screen and (min-width: 1700px){
	#Blog .contents{
		background-size:100% auto;
	}
}

#Blog .categoryNavi{
	width:489px;
	margin:0px auto;
}
#Blog .categoryNavi a{
	text-align:center;
	padding-left:0px;
	background-position:370px 50%;
}

/*-- articleListPage --*/
/*-- ------------------------------------------------- --*/
#Blog .articleListPage{
}
#Blog .articleListPage02 h2,
#Blog .articleListPage h2{
	width:993px;
	margin:0px auto 33px;
	color:#000;
	font-weight:normal;
	font-size:25px;
	line-height:50px;
	padding:18px 0px 5px;
}
#Blog .articleListPage ul{
	width:993px;
	overflow:hidden;
	margin:0px auto 100px;
}
#Blog .articleListPage ul li{
	float:left;
	width:237px;
	margin:0px 15px 13px 0px;
}
#Blog .articleListPage ul li a{
	display:block;
	text-decoration:none;
	color:#000;
	height:215px;
	font-size:13px;
	line-height:24px;
	transition:opacity 300ms ease;
}
#Blog .articleListPage ul li a:hover{
	opacity:0.75;
}
#Blog .articleListPage ul li a span.img{
	display:block;
	width:237px;
	height:133px;
	overflow:hidden;
	position:relative;
	background: no-repeat center center;
}
#Blog .articleListPage ul li a span.img img{
	min-height:133px;
	min-width:237px;
}
/*
#Blog .articleListPage ul li a span.img img{
	position:absolute;
	left:-100%;
	right:-100%;
	top:-100%;
	bottom:-100%;
	min-height:133px;
	min-width:237px;
	margin:auto;
}
*/
#Blog .articleListPage ul li a span.text{
	display:block;
	color:#666;
	font-size:11px;
	margin:10px 0px 0px;
}
#Blog .articleListPage ul li a strong{
	font-weight:normal;
}

#Blog .articleListPage ul li:nth-of-type(4n){
	margin-right:0px;
}
#Blog .articleListPage ul li:nth-of-type(4n + 1){
	clear:both;
}
#Blog .articleListPage ul li:last-of-type{
}

/*-- press release --*/
/*-- ------------------------------------------------- --*/
#Blog .articleListPage02{
	width:993px;
	margin:0px auto 100px;
}
#Blog .articleListPage02 *{
	line-height:24px;
	color:#000;
}
#Blog .articleListPage02 dt{
	font-size:11px;
	font-weight:normal;
}
#Blog .articleListPage02 dd{
	padding:0px 0px 10px 95px;
	margin:-24px 0px 10px;
	font-size:13px;
	border-bottom:1px dotted #000;
}
#Blog .articleListPage02 dd a{
}

/*-- Modal --*/
/*-- ------------------------------------------------- --*/
#Modal .modal{
	width:766px;
	margin:0px auto;
	overflow:hidden;
	text-align:left;
}
#Modal .modal .photo{
	float:left;
	width:295px;
}
#Modal .modal .photo img{
	margin:0px auto 10px;
	display:block;
}
#Modal .modal .photo p{
	font-weight:bold;
	margin:0px 0px 10px;
	padding:0px 0px 7px;
}
#Modal .modal h1{
	font-weight:normal;
	font-size:17px;
	line-height:24px;
	margin:0px 0px 24px;
}
#Modal .modal h1.ex{
	margin:0px 40px 24px 0px;
}
#Modal .modal p{
	font-size:13px;
	line-height:24px;
	margin:0px 0px 24px;
}
#Modal .modal p strong{
	font-size:17px;
}
#Modal .modal p:last-child{
	margin-bottom:0px;
}

#Modal .modal .photo + .text{
	width:430px;
	float:right;
	margin-right:12px;
}
#Modal .modal .text p{
}


#Modal .modal .list{
	position:absolute;
	right:0px;
	top:0px;
	font-size:13px;
	line-height:24px;
}
#Modal .modal .list a{
	color:#333;
	text-decoration:none;
	background:url(../../images/blog/mark_next.png) no-repeat right center;
	padding:0px 30px 0px 0px;
}

#Modal .modal .list a:hover{
	text-decoration:underline;
	
}


#Modal .modal > img,
#Modal .modal p > img{
	max-width:100%;
	height:auto !important;
}

#Modal .modal p > img.telimg{
	height:43px !important;
}


#Modal .modal .voicePhoto{
  height:639px;
  display:block;
  margin:0px auto;
  text-align:center;
  overflow:hidden;
  width:736px;
}
#Modal .modal .voiceText{
  position:absolute;
  right:65px;
  top:30px;
  width:330px;
}
#Modal .modal .voiceText p{
  font-size:13px;
  line-height:24px;
  margin:0px 0px 24px;
}

@media screen and (max-width: 768px){
	#Modal .modal .voicePhoto {
		/*height: 100%;*/
	}
	#Recruiting #cboxWrapper #cboxContent {
		/*height: 100vw !important;*/
	}
	#Modal .modal {
		width: 100%;
	}
	#Modal .modal .voicePhoto {
		width: 100%;
	}
	#Modal .modal .voicePhoto img {
		width: 100%;
	}
}












