@charset "utf-8";
#contents_image img {
	height: 197px;
}
.content_title {
	color:#007CFF;
	margin-bottom:0;
	font-size:19px;
}
.content_title:first-letter {
	font-size: 29px;
}
.dl a.button {
	background:url(../image/download.png) no-repeat;
	width:257px;
	height:130px;
}
.dl a.button.hover {
	background-image:url(../image/download_on.png);
}

.point {
	background-image: url(/image/point_ice.png);
}

#explanation_dd {
	position:relative;
	margin: 24px 80px 96px 80px;
	padding:15px 230px 15px 30px;;
	font-size: 16px;
	line-height:18px;
	
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
	
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000033+0,005483+100 */
	background: rgb(0,0,51); /* Old browsers */
	background: -moz-linear-gradient(top, rgb(0,0,51) 0%, rgb(0,84,131) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,51)), color-stop(100%,rgb(0,84,131))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgb(0,0,51) 0%,rgb(0,84,131) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgb(0,0,51) 0%,rgb(0,84,131) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgb(0,0,51) 0%,rgb(0,84,131) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgb(0,0,51) 0%,rgb(0,84,131) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000033', endColorstr='#005483',GradientType=0 ); /* IE6-9 */
}
#explanation_dd .title {
	padding: 0 0 12px 0;
	color: #0FF;
	font-weight: bold;
}
#explanation_dd .detail {
	margin:0;
	color: #FFF;
}
#explanation_dd .detail p:first-child {
	margin-bottom:6px;
}
#explanation_dd img {
	position:absolute;
	top:16px;
	right:16px;
	width:222px;
	height:137px;
}
#explanation {
	margin:0 32px;
}

#explanation>div {
	display:table;
	margin:0 0 56px 0;
}
#explanation>div>* {
	display:table-cell;
	vertical-align:top;
}
#explanation .image, #explanation .image2 {
	white-space: nowrap;
}
#explanation .text {
	padding-left:8px;
}
#explanation .title {
	color:#007CFF;
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 4px;
}
#explanation>div a  {
	color:#007CFF;
}
#explanation .image img:first-child {
	width:322px;
	height:124px;
	padding-right:8px;
}
#explanation.image2 img:first-child {
	width:204px;
	height:73px;
	padding-right:8px;
}
#explanation .detail_img {
	padding-left:8px;
}

img[src$="arrow.png"] {
	width:43px;
	height:111px;
}
img[src$="ice_benefit_04_img.png"] {
	width:221px;
	height:135px;
}
img[src$="ice_benefit_05_img.png"] {
	width:221px;
	height:146px;
}
img[src$="ice_benefit_06_img.png"] {
	width:221px;
	height:136px;
}

.add_detail li {
	display:table;
}
.add_detail li>span {
	display:table-cell;
}
.add_detail li>span:first-child {
	white-space: nowrap;
	padding-right:4px;
}

@media screen and (max-width: 928px) {
	#contents_image img {
		height:auto;
	}
	#explanation {
		margin:0 auto;
		width:680px;
	}

	#explanation .title {
		line-height:18px;
	}
	#explanation .text {
		padding:0;
	}
	#explanation .detail_img {
		padding:8px 0 0 0;
	}
	#explanation>div {
		display:block;
	}
	#explanation>div>* {
		display:block;
	}
	img[src$="arrow.png"] {
		display:none;
	}
	#explanation .title>br {
		display:none;
	}
	#explanation .image img:first-child, #explanation .image2 img:first-child {
		padding:0;
	}
}

@media screen and (max-width: 840px) {
	#explanation_dd {
		margin: 15px 50px 56px 50px;
	}
}

@media screen and (max-width: 760px) {
	#explanation {
		margin:0 40px;
		width:auto;
	}
	#explanation_dd {
		padding-right:30px;
	}
	#explanation_dd img {
		filter:alpha(opacity=25);
		-moz-opacity:0.25;
		opacity:0.25;
		width:178px;
		height:110px;
		bottom: -32px;
		top: inherit;
	}
}

@media screen and (max-width: 640px) {
	#explanation_dd, #explanation {
		margin-left: 20px;
		margin-right: 20px;
	}
}


@media screen and (max-width: 378px) {
	#explanation .image img:first-child {
		width:100%;
		height:auto;
	}
}

@media screen and (max-width: 277px) {
	img[src$="ice_benefit_04_img.png"] {
		width:100%;
		height:auto;
	}
	img[src$="ice_benefit_05_img.png"] {
		width:100%;
		height:auto;
	}
	img[src$="ice_benefit_06_img.png"] {
		width:100%;
		height:auto;
	}
}
@media screen and (max-width: 257px) {
	#explanation .image2 img:first-child {
		width:100%;
		height:auto;
	}
}