@charset "UTF-8";

/* ***************************************************
* CSS file For for
	FileName: examples.css
■目次 ==========================================
■[00]:01
■[00]:02
■[00]:03
■[00]:共通
**************************************************** */

/*-----------------------------------------------------------
■[00]:01
------------------------------------------------------------*/

h4.small {
	width: 376px;
	margin: 0 0 5px;
	padding: 0px 0 10px 20px;
	background: url(/img/common/h4_bar.gif) no-repeat 0 1px;
	font-size: 14px;
	color: #040000;
	font-weight: bold;
	clear: both;
}

div.examples_image{position: relative; height: 220px;}
div.examples_image img{position: absolute; top: 0px; right:0px}
div.examples_image p.examples2{
	background: url(/img/examples/image1.gif) no-repeat top right;
	width: 376px;
	height: 120px;
}


p.Item01,p.Item02,p.Item03 { position: relative; }
p.Item01 img,p.Item02 img,p.Item03 img { position: absolute; top: 0px; right:12px }
p.Item01 { height: 112px;}
p.Item02 { height: 110px;}
p.Item03 { height: 90px;}


div.Page_link2{
	width: 400px;
}
div.Page_link2 a {
	color: #0069b7;
	border-bottom: 1px #d27a51 solid;
	text-decoration: none;
	font-size: 10px;
	font-weight: bold;
	padding: 3px 2px 2px 2px;
	line-height: 24px;
}

div.Page_link2 a:link { color: #0069b7; text-decoration: none; }
div.Page_link2 a:visited { color: #0069b7; text-decoration: none; }
div.Page_link2 a:hover {color: #fff; text-decoration: none; background-color: #0069b7; }



div.Waku_benefits {
	background: url(/img/examples/bg_benefits.gif) no-repeat left bottom;
	width: 616px;
	height: 182px;
}

div.Waku_benefits div.benefits{
	width: 461px;
	float: left;
}
div.Waku_benefits div.benefits p{
	padding: 10px 15px;
	line-height: 22px;
}

div.Waku_benefits div.point{
	float: left;
}


/*-----------------------------------------------------------
■[00]:02
------------------------------------------------------------*/
div.Waku_benefits2 {
	width: 616px;
	height: 284px;
}

div.Waku_benefits2 div.benefits2{
	width: 500x;
}
div.Waku_benefits2 div.benefits2 p.text{
	padding: 10px 15px;
	font-weight: bold;
	line-height: 22px;
	background: url(/img/examples/bg_benefits.gif) no-repeat left bottom;
}


/*-----------------------------------------------------------
■[00]:03
------------------------------------------------------------*/
div.Waku_benefits3 {
	width: 616px;
}

div.Waku_benefits3 div.benefits3{
	width: 500x;
}

div.Waku_benefits3 div.benefits3 p{
	padding: 10px 15px;
	line-height: 22px;
	background: url(/img/examples/bg_benefits.gif) no-repeat left bottom;
}

div.Waku_benefits3 div.benefits3 p span{
	display: block;
	margin: 0 0 10px;
	font-weight: bold;
}


/*-----------------------------------------------------------
■[00]:04
------------------------------------------------------------*/
p.Img3D{
	margin: 0 0 15px;
}

p.Img3D img{
	vertical-align: top;
}

/*-----------------------------------------------------------
■[00]:05
------------------------------------------------------------*/
div.ImgSokutei{
	padding: 12px 23px 0px;
	background: url(/img/examples/red_frame_bg.gif) repeat-y left bottom;
	text-align: center;
}

div.ImgSokutei img.right{
	margin: 0 0 0 64px;
}

p.Copy_Sokutei{
	margin: 20px 0;
}

div.ContentCase{
	margin: 0 0 10px;
}

div.ContentCase p{
	background-color: #e3e3e3;
	font-weight: bold;
	padding: 3px 0 3px 7px;
	margin: 0 0 5px;
}

div.ContentCase dl dt{
	background: url(/img/examples/red_dotted.gif) repeat-x left bottom;
	padding: 5px 0;
}

div.ContentCase dl dd{
	padding: 5px 0 15px;
}

div.ContentCase dl dt span.Case1{
	display: block;
	background: url(/img/examples/list_case1.gif) no-repeat left center;
	padding: 0 0 0 55px;
	color: #e71f19;
	font-weight: bold;
}

div.ContentCase dl dt span.Case2{
	display: block;
	background: url(/img/examples/list_case2.gif) no-repeat left center;
	padding: 0 0 0 55px;
	color: #e71f19;
	font-weight: bold;
}

/*-----------------------------------------------------------
■[00]:06
------------------------------------------------------------*/
p.exttl{
	background: url(/img/examples/ttl_bg.gif) repeat-x left center;
	line-height: 23px;
	font-weight: bold;
}

div.bgLineBox{
	width: 616px;
	background: url(/img/examples/bg_benefits.gif) no-repeat left bottom;
	border-top: 4px solid #f9c8c6;
}

div.bgLineBoxMini{
	width: 306px;
	background: url(/img/examples/bg_box_mini.gif) no-repeat left bottom;
	border-top: 4px solid #f9c8c6;
	height: 240px;
	margin : 6px 0px 6px 0px;
}

div.bgLineBox p{ font-weight: bold; padding: 10px 15px 5px 15px;}
div.bgLineBoxMini p{ font-weight: bold; padding: 10px 15px 5px 15px;}

div.bgLineBox div{ width: 100%; text-align: center;  }
div.bgLineBoxMini div{ width: 100%; text-align: center;  }

div.bgLineBox div img{ margin-bottom : 15px; }

/*-----------------------------------------------------------
■[00]:共通
------------------------------------------------------------*/
p.pt5{ padding-top: 5px; }

}