/*===============================================*/

/*  top.css */

/*===============================================*/


/*section News
---------------------------*/	
section.news {
	margin:0px auto 0px;
	padding:150px 0px 50px;
	width:100%;
	position:relative;
	z-index:150;
}

div.nWrap {
	margin:0px auto 50px;
	padding:0px;
	width:960px;
}

div.nWrap dl{
	margin:0px auto 10px auto;
	padding:0px 0px 10px 5px;
	width:100%;
	clear:both;
	overflow:hidden;
	border-bottom: 1px dotted #dadada; 
}
div.nWrap dl:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
	
div.nWrap dt{
	padding-left:30px;
	width:20%;
	float:left;
	box-sizing: border-box;
}

div.nWrap dd{
	width:75%;
	float:right;
}






/*section contArea
---------------------------*/

section.contArea {
	margin:0px auto 0px;
	padding:0px 0px;
	width:100%;
	height:1000px;
	position:relative;
	background: url(../images/top/kazari_mdlimg.png) no-repeat center 235px;
}

div.btnArea {
	margin:0px auto 0px;
	padding:0px 0px;
	width:960px;
	height:auto;
	position:relative;
}

div.btnArea .d1 {
  position: absolute;
  top: 0px;
  left: 320px;
  z-index: 11;
}

div.btnArea .d2 {
  position: absolute;
  top: 235px;
  left: 85px;
  z-index: 10;
}

div.btnArea .d3 {
  position: absolute;
  top: 235px;
  right: 85px;
  z-index: 10;
}

div.btnArea .d4 {
  position: absolute;
  top: 467px;
  right: 320px;
  z-index: 10;
  height:auto;
}


div.btnArea .diamond {
  width: 318px;
  height: 318px;
  margin: 66px auto;
  overflow:hidden;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all .5s ease;
}

div.btnArea .diamond img {
  max-width: 450px;
  margin: -66px 0 0 -66px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/**/
div.btnArea .diamondTxt {
  position: absolute;
  top: 0;
  left: 0;
  width: 318px;
  height: 318px;
  z-index: 1;
}

div.btnArea .diamondTxt h2 {
	width: 318px;
	height: 318px;
	line-height:450px;
	color: #fff;
	font-size: 20px;
	text-align:center;
	font-style: italic;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

div.btnArea .diamondTxt h2 span {font-size: 30px;}
div.btnArea .diamondTxt p {
	position: absolute;
	top: 69%;
	left: 68%;
	color: #fff;
	font-size:10px;
	font-style: italic;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


/**/
div.btnArea .diamondTxt2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 318px;
  height: 318px;
  background: #f92f00;
  -webkit-transform: translate(-318px, 0x);
  -ms-transform: translate(-318px, 0x);
  transform: translate(-318px, 0px);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 1;
}

div.btnArea .diamondTxt2 h2 {
	width: 318px;
	height: 318px;
	line-height:318px;
	color: #fff;
	font-size: 20px;
	text-align:center;
	font-style: italic;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: all .8s ease;
	opacity:0;
}

div.btnArea a:hover .diamondTxt2 h2 {
	opacity:1;
}

div.btnArea .diamondTxt2 h2 span {font-size: 30px;}
div.btnArea .diamondTxt2 p {
	position: absolute;
	top: 13%;
	left: 45%;
	color: #fff;
	font-size:10px;
	font-style: italic;
}

div.btnArea .diamond:hover {
  box-shadow: 0px 0px 10px #4a4a4a;
}

div.btnArea a:hover .diamondTxt2 {
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
  opacity:1;
}






/*===============================================*/

/*  for tablet     画面の横幅が600px-958pxまで */

/*===============================================*/


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

/*section News
---------------------------*/	
section.news {padding:100px 0px 50px;}
div.nWrap {width:90%;}	
div.nWrap dt{padding-left:0px;width:100%;float:none;}
div.nWrap dd{width:100%;float:none;}



/*section contArea
---------------------------*/

section.contArea {height:1100px;padding:0px 0px;background: url(../images/top/kazari_mdlimgsp.png) no-repeat center 135px;}
div.btnArea {width:100%;height:auto;}
div.btnArea .d1,div.btnArea .d2,div.btnArea .d3,div.btnArea .d4{position: relative; z-index:100; top:0; left:0; right:0;}
div.btnArea .d4{}
div.btnArea .diamond { width: 212px; height: 212px; margin: 44px auto;}
div.btnArea .diamond img {max-width: 300px;margin: -44px 0 0 -44px;}

/**/
div.btnArea .diamondTxt {width: 212px;height: 212px;}
div.btnArea .diamondTxt h2 {width: 212px;height: 212px;line-height:300px;}

/**/
div.btnArea .diamondTxt2 {
  width: 212px;
  height: 212px;
  -webkit-transform: translate(-212px, 0x);
  -ms-transform: translate(-212px, 0x);
  transform: translate(-212px, 0px);
}

div.btnArea .diamondTxt2 h2 {width: 212px;height: 212px;line-height:212px;}

}
/*===============================================*/





/*===============================================*/

/*  for SP   画面の横幅が600px以下 */

/*===============================================*/

@media screen and (max-width: 599px){
	
/*section News
---------------------------*/	
section.news {padding:50px 0px;}


/*section contArea
---------------------------*/
div.btnArea .diamondTxt h2,div.btnArea .diamondTxt2 h2 {font-size: 16px;}
div.btnArea .diamondTxt h2 span ,div.btnArea .diamondTxt2 h2 span{font-size: 24px;}



}
/*===============================================*/