@charset "shift_jis";


/* ------------------------
     Font-size Adjustment
---------------------------
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 123.1%
17px = 131%
18px = 138.5%
19px = 146.5%
20px = 153.9%
21px = 161.6%
22px = 167%
23px = 174%
24px = 182%
25px = 189%
26px = 197%
---------------------------*/

/*---------------------
        LAYOUT
-----------------------*/

.contentsArea{
	 width:620px;
	 float:left;
 }
 
	@media screen and (max-width: 767px) {
		.contentsArea{
			 width:auto;
			 margin:0px 10px;
		 }
	}

.bannerArea{
	 width:160px;
	 float:right;
 }

	@media screen and (max-width: 767px) {
		.bannerArea{
		 	width:100%;
		 }
	}



/*---------------------
       CONTENTS
-----------------------*/

/* SLIDER */

.sliderBlock{
	 width:784px;
	 margin:0px auto 10px;
	 background:url(../img2/bg_slider.jpg) ;
	 padding:8px;
	 overflow:hidden;
 }
 
	@media screen and (max-width: 767px) {
		.sliderBlock{
			 width:auto;
			 background:url(../img2/bg_slider.jpg) ;
				 -moz-background-size:2px;
				 -webkit-background-size:2px;
			 background-size:2px;
			 margin:0px 10px 15px;
			 padding:5px;
		 }
	}


/* 60DAYS FREE BANNER */

.bana60free{
	clear:both;
 	width:800px;
 	margin:0 auto 20px;
}
 
	@media screen and (max-width: 767px) {
		.bana60free{
			 clear:both;
			 width:auto;
			 margin:0 10px 5px;
			}
	}

/* CUSTOMER VOICE TOP BANNER*/

.topVoiceBnr{
	display:none;
}

	@media screen and (max-width: 767px) {
		.topVoiceBnr{
			 display: block;
			 width:auto;
			 margin:0 10px 20px;
			}
	}



/*---------------------
      　区切り
-----------------------*/

hr{
  border-top:none;
  margin:0px 0px 25px 0px;
}

	@media screen and (max-width: 767px) {
		hr{
			border-top:1px dotted #CCCCCC;
			margin:0px 0px 20px 0px;
		}
	}


/*---------------------
       新着情報
-----------------------*/

.informationBlock{
  margin:0px 0px 0px -20px;
}

	@media screen and (max-width: 767px) {
		.informationBlock{
  		margin:0;
		}
	}

.informationBox{
  width:300px;
  float:left;
  margin:0px 0px 0px 20px;
}

	@media screen and (max-width: 767px) {
		.informationBox{
			width:auto;
			float:none;
			margin:0px 0px 25px 0px;
		}
	}

.informationBox .hl02{
  background:url(../img2/bg_hl01.jpg) left top repeat-y;
  margin:0px 0px 8px 0px;
  padding:3px 10px 3px 12px;
  font-size:138.5%;
}

	@media screen and (max-width: 767px) {
		.informationBox .hl02{
			font-size:16px;
		}
	}

.informationBox .hl02 span{
  font-size:61%;
  padding:0px 0px 0px 5px;
}

	@media screen and (max-width: 767px) {
		.informationBox .hl02 span{
			display:none;
		}
	}

.informationBox dl{
 border-top:1px dotted #BBBBBB;
 padding:8px 0px 0px 0px;
 }

	@media screen and (max-width: 767px) {
		.informationBox dl{
			 border-top:1px dotted #CCCCCC;
		 }
	}

.informationBox dt{
	 margin:0px 0px 3px 0px;
 }

	@media screen and (max-width: 767px) {
		.informationBox dt{
			 font-weight:bold;
		}
	}
 
 .informationBox dt span{
  background:#CC0000;
  padding:0px 4px;
  margin:0px 0px 0px 5px;
  color:#FFFFFF;
  font-size:77%;
  line-height:1.0;
}

	@media screen and (max-width: 767px) {
		.informationBox dt span{
			padding:1px 4px;
			font-size:10px;
		}
	}

.informationBox dd{
 border-bottom:1px dotted #BBBBBB;
 margin:0px 0px 8px 0px;
 padding:0px 0px 8px 0px;
 line-height:1.3;
 }

	@media screen and (max-width: 767px) {
		.informationBox dd{
			 border-bottom:1px dotted #CCCCCC;
		}
	}

.informationBox dd a:link{
  text-decoration:none;
 }

.informationBox dd a:hover{
  text-decoration:underline;
 }

/* 一覧を見る */

.moreLink{
  float:right;
  background:url(../img2/pc/arrow_more.jpg) left top no-repeat;
  padding:0px 0px 0px 18px;
  font-size:93%;
 }

	@media screen and (max-width: 767px) {
		.moreLink{
			float:none;
			background: none;
			padding: 0;
			text-align:center;
			font-size:12px;
		 }
	}

	@media screen and (max-width: 767px) {
		.moreLink span{
			background:url(../img2/pc/arrow_more.jpg) left 4px no-repeat;
			background-size:10px;
			 -moz-background-size:10px;
			 -webkit-background-size:10px;
			padding:0px 0px 0px 16px;
		 }
	}

.moreLink a:link{
  text-decoration:none;
	color:#444444;
 }

	@media screen and (max-width: 767px) {
		.moreLink a:link{
			background:#EEEEEE;
			display:block;
			padding:10px 10px;
		}
	}

.moreLink a:hover{
  text-decoration:underline;
	color:#0085B2;
 }

	@media screen and (max-width: 767px) {
		.moreLink a:hover{
			background:#DDDDDD;
			display:block;
			padding:10px 10px;
			text-decoration:none;
			color:#444444;
		 }
	}


/*---------------------
   サイドバナーエリア
-----------------------*/

.bannerArea{
 
}

.bannerBlock{
  overflow:hidden;
 	margin:0px 0px 35px 0px;
}

	@media screen and (max-width: 767px) {
		.bannerBlock{
		 width:300px;
		 margin:0 auto 20px;
		}
	}

.bannerArea h3{
 font-size:131%;
 background:url(../img2/pc/bg_sideTit.jpg) left bottom no-repeat;
 margin:0px 0px 10px 0px;
 padding:0px 0px 5px 0px;
}

	@media screen and (max-width: 767px) {
		.bannerArea h3{
		 background:#2555A1;
		 margin:0px 0px 15px 0px;
		 padding:5px 10px;
		 color:#FFFFFF;
		 font-size:14px;
		 text-align:center;
		}
	}


.bannerArea ul.bnr00{
 margin-bottom: 20px;
}

	@media screen and (max-width: 767px) {
		.bannerArea ul.bnr00{
		  display:none;
			margin-bottom: 0;
		}
	}

.bannerBlock ul.bnr01{

 }

	@media screen and (max-width: 767px) {
		.bannerBlock ul.bnr01{
			 overflow:hidden;
			 margin:0px 0px 0px -10px;
		 }
	}

.bannerBlock ul.bnr01 li{
  margin:0px 0px 10px 0px;
 }

	@media screen and (max-width: 767px) {
		.bannerBlock ul.bnr01 li{
			 width:142px;
			 float:left;
			 margin:0px 0px 10px 10px; 
		}
	}

.bannerBlock ul.bnr01 li p{
  font-size:77%;
  margin:3px 0px 0px 0px;
 }

	@media screen and (max-width: 767px) {
		.bannerBlock ul.bnr01 li p{
			font-size:8px;
		 }
	}

.bannerBlock ul.bnr01 li img{
  width:160px;
  /*height:86px;*/
 }

	@media screen and (max-width: 767px) {
		.bannerBlock ul.bnr01 li img{
			width:142px;
			height:76px;
		 }
	}

.bannerBlock .moreLink2{
  background:url(../img2/pc/arrow_more.jpg) left top no-repeat;
  padding:0px 0px 0px 15px;
  float:left;
 }

	@media screen and (max-width: 767px) {
		.bannerBlock .moreLink2{
			background:url(../img2/sp/arrow_more.jpg) left 3px no-repeat;
			 -moz-background-size:10px;
			 -webkit-background-size:10px;
			background-size:10px;
			padding:0px 0px 0px 15px;
			float:left;
		 }
	}

.bannerBlock ul.bnr02{
  border:1px dotted #BBBBBB;
  margin:10px 0px;
}

	@media screen and (max-width: 767px) {
		.bannerBlock ul.bnr02{
			display:none;
		}
	}

	.bannerBlock ul.bnr02 li{
		font-size:85%;
		border-top:1px dotted #BBBBBB;
	}

  .bannerBlock ul.bnr01 ul.bnr02 li{
    margin:0px 0px 0px 0px;
    }

  .bannerBlock ul.bnr02 li:first-child{
    border-top:none;
  }

	.bannerBlock ul.bnr02 li a:link{
		display:block;
		padding:5px 10px 5px 12px;
		background:url(../img2/pc/arrow_sideLink.png) 5px 8px no-repeat;
	}

	.bannerBlock ul.bnr02 li a:hover{
		display:block;
		padding:5px 10px 5px 12px;
		background:#EEEEEE url(../img2/pc/arrow_sideLink.png) 5px 8px no-repeat;
	}


.bannerBlock ul.bnr03Pc li{
  margin:0px 0px 5px 0px;
}

.bannerBlock ul.bnr03Sp{
  margin:0px 0px 0px -10px;
}

.bannerBlock ul.bnr03Sp li{
  float:left;
  margin:0px 0px 0px 10px;
}