@charset "utf-8";
/*=================================
top
@media only screen and (max-width: 720px)
@media print
clearfix
================================ */

/* layout */
#main {
	width: 100%;
}

/* common */
.productArea > .inner,
.pickUpArea > .inner,
.newsArea > .inner {
	width: 970px;
	margin: 0 auto;
	padding: 50px 0 80px;
}
.pickUpArea {
	background-color: #e3f1fc;
}
.productArea .heading,
.pickUpArea .heading,
.newsArea .heading {
	padding-top: 30px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	text-align: center;
}
.productArea .heading + *,
.pickUpArea .heading + *,
.newsArea .heading + * {
	margin-top: 2em;
}

/* heading */
.productArea .heading {
	background-image: url(/img/index_h01.png);
}
.pickUpArea .heading {
	background-image: url(/img/index_h02.png);
}
.newsArea .heading {
	padding-bottom: 1em;
	background-image: url(/img/index_h03.png);
	border-bottom: solid 1px #cccccc;
}

/* mainImageArea */
.mainImageArea ul li {
	width: 100%;
	height: 355px;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
.mainImageArea ul li img {
	display: none;
}

/* productArea */
.productBlock {
	position: relative;
	height: 242px;
	margin-top: 2em;
}
.productBlock .bgType01,
.productBlock .bgType02,
.productBlock .bgType03,
.productBlock .bgType04,
.productBlock .bgType05 {
	display: table;
}
.productBlock .bgType01 > a,
.productBlock .bgType02 > a,
.productBlock .bgType03 > a,
.productBlock .bgType04 > a,
.productBlock .bgType05 > a {
	position: relative;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.productBlock .bgType01 > a {
	width: 242px;
	height: 242px;
	background-repeat: no-repeat;
	background-position: 0 0;
	transition-property: opacity;
	transition-duration: 0.2s;
}
.productBlock .bgType01 > a > span {
	display: block;
	font-size: 25px;
	font-size: 2.5rem;
	font-weight: bold;
}
.productBlock .bgType01 > a > span:after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background: url(/common/img/blank02.gif) no-repeat 0 0;
	border: none;
	vertical-align: middle;
}
.productBlock .bgType02 > a,
.productBlock .bgType03 > a,
.productBlock .bgType04 > a,
.productBlock .bgType05 > a {
	width: 242px;
	height: 242px;
	background-repeat: no-repeat;
	background-position: 0 0;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	transition-property: opacity;
	transition-duration: 0.2s;
}
.productBlock .bgType01 > a:hover,
.productBlock .bgType02 > a:hover,
.productBlock .bgType03 > a:hover,
.productBlock .bgType04 > a:hover,
.productBlock .bgType05 > a:hover {
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
	text-decoration: none;
}
.productBlock .bgType01 > a:after,
.productBlock .bgType02 > a:after,
.productBlock .bgType03 > a:after,
.productBlock .bgType04 > a:after,
.productBlock .bgType05 > a:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	display: inline-block;
	width: 0;
	height: 0;
	border-top: solid 10px transparent;
	border-right: solid 10px #0166b3;
	border-bottom: solid 10px #0166b3;
	border-left: solid 10px transparent;
}
.productBlock .bgType01 {
	position: absolute;
	top: 0;
	left: 0;
}
.productBlock .bgType02 {
	position: absolute;
	top: 0;
	left: 243px;
}
.productBlock .bgType04 {
	position: absolute;
	top: 0px;
	left: 486px;
}
.productBlock .bgType05 {
	position: absolute;
	top: 0px;
	left: 729px;
}
.productBlock .bgType01 > a {
	background-image: url(/img/index_bg01.jpg);
	background-size:242px auto;
	color: #fff;
	padding:0 10px;
}
.productBlock .bgType02 > a {
	background-image: url(/img/index_bg02.jpg);
	color: #333;
}
.productBlock .bgType04 > a {
	background-image: url(/img/index_bg04.jpg);
	color: #fff;
}
.productBlock .bgType05 > a {
	background-image: url(/img/index_bg05.jpg);
	color: #333;
}

/* pickUpArea */
.pickUpArea a {
	color: #333;
}
.pickUpArea .text {
	position: relative;
	padding: 0.8em;
	background-color: #fff;
	font-weight: bold;
	font-size: 18px;
	font-size: 1.8rem;
	text-align: center;
}
.pickUpArea .text:before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	display: inline-block;
	width: 0;
	height: 0;
	border-top: solid 10px transparent;
	border-right: solid 10px #0166b3;
	border-bottom: solid 10px #0166b3;
	border-left: solid 10px transparent;
}
.pickUpArea a[target="_blank"] .text:after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	background: url(/common/img/blank01.gif) no-repeat 0 0;
	border: none;
	vertical-align: middle;
}

@media only screen and (max-width: 720px){
	
	.productArea > .inner {
		width: auto;
		margin: 0 auto;
		padding: 20px 0 0;
	}
	.pickUpArea > .inner,
	.newsArea > .inner {
		width: auto;
		margin: 0 auto;
		padding: 20px 10px;
	}
	.productArea .heading + *,
	.pickUpArea .heading + *,
	.newsArea .heading + * {
		margin-top: 15px !important;
	}
	
	/* mainImageArea */
	.mainImageArea ul li {
		width: 100%;
		height: auto;
	}
	.mainImageArea ul li img.spElement {
		display: block;
	}
	
	/* productArea */
	.productBlock {
		height: auto;
	}
	.productBlock .bgType01,
	.productBlock .bgType02,
	.productBlock .bgType03,
	.productBlock .bgType04,
	.productBlock .bgType05 {
		position: static;
	}
	/*.productBlock .bgType01 {
		width: 100%;
		height: 100%;
	}*/
	.productBlock .bgType01,
	.productBlock .bgType02,
	.productBlock .bgType03,
	.productBlock .bgType04,
	.productBlock .bgType05 {
		float: left;
		display: table;
		width: 50%;
		height: auto;
	}
	.productBlock .bgType01 > a,
	.productBlock .bgType02 > a,
	.productBlock .bgType03 > a,
	.productBlock .bgType04 > a,
	.productBlock .bgType05 > a {
		display: table-cell;
		width: 100%;
		height: 150px;
		/*height: 100%;*/
		background-size: cover;
		line-height: 1.2;
	}
	.productBlock .bgType01 > a {
		padding: 3em 10px;
	}
	.productBlock .bgType02 > a,
	.productBlock .bgType03 > a,
	.productBlock .bgType04 > a,
	.productBlock .bgType05 > a {
		padding: 3em 10px;
		font-size: 1.6rem;
	}
	.productBlock .bgType01 > a > span {
		font-size: 2rem;
	}
	.productBlock .bgType01 > a:after,
	.productBlock .bgType02 > a:after,
	.productBlock .bgType03 > a:after,
	.productBlock .bgType04 > a:after,
	.productBlock .bgType05 > a:after {
		border-top: solid 5px transparent;
		border-right: solid 5px #0166b3;
		border-bottom: solid 5px #0166b3;
		border-left: solid 5px transparent;
	}
	
	/* pickUpArea */
	.pickUpArea .text {
		padding: 8px;
		font-size: 1.4rem;
	}
	.pickUpArea .text:before {
		border-top: solid 5px transparent;
		border-right: solid 5px #0166b3;
		border-bottom: solid 5px #0166b3;
		border-left: solid 5px transparent;
	}
	.pickUpArea .oneColumn {
		margin-top: 15px;
	}
	
}


@media print{
}


/* clearfix
-------------------------------- */
.productBlock:after {
	content : "";
	display : block;
	clear : both;
}