@charset "utf-8";

/*********************
* base tags
*********************/

* {
	margin: 0;
	padding: 0;
}

html, body {
	margin: 0 auto;
}

body {
	line-height: 135%;
	text-align: center;
	background-color: #eeeeee;
}

body, h1, h2, h3, h4, h5, h6, pre, li, dt, dd, th, td, p {
	font: 13px "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	/*for IE6*/
	_font-size:small;
	line-height: 135%;
}

/*for IE7*/
*+html body div, *+html body h1, *+html body h2, *+html body h3, *+html body h4, *+html body h5, *+html body h6,
*+html body pre, *+html body li, *+html body dt, *+html body dd, *+html body th, *+html body td, *+html body p {
font-size:small;
}

/*for IE8*/
html>/**/body div, html>/**/body h1, html>/**/body h2, html>/**/body h3, html>/**/body h4, html>/**/body h5, html>/**/body h6,
html>/**/body pre, html>/**/body li, html>/**/body dt, html>/**/body dd, html>/**/body th, html>/**/body td, html>/**/body p {
font-size/*\**/:small\9;
}

/*********************
* main structure
*********************/

#container {
	margin: 0 auto;
	width: 1200px;
	text-align: left;
	background-color: #FFFFFF;
}

#header {
	height: 68px;
	background-image:url(../images/common/header_background.jpg);
	background-repeat: repeat-x;
	background-position: top left;
}

#contents {
	background-color: #d8e3ff;
}

#footer {
}

/*********************
* common tags
*********************/
.align_left {
	text-align: left;
}

.align_center {
	text-align: center;
}

.align_right {
	text-align: right;
}

.clearfix {
	min-height: 1px;
}

.clearfix:after {
	content: ".";  /* 新しい要素を作る */
	display: block;  /* ブロックレベル要素に */
	clear: both;
	height: 0;
	visibility: hidden;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

img {
	border: 0;
}

p {
	padding-bottom: 10px;
}

table {
	font-size:inherit;
	font:100%;
}

.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12 { font-size:93%; }
.text13 { font-size:100%; }
.text14 { font-size:108%; }
.text15 { font-size:116%; }
.text16 { font-size:123.1%; }
.text17 { font-size:131%; }
.text18 { font-size:138.5%; }
.text19 { font-size:146.5%; }
.text20 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%; }

h1,h2,h3,h4,h5,h6 { font-weight: bold; }

/*********************
* main contents
*********************/
h1 {
	margin: 2px 5px;
}

#header ul.menu {
	float: left;
	height: 68px;
}

#header ul.menu li {
	float: left;
	list-style-type: none;
}

#header ul.menu li a {
	display: block;
	width: 150px;
	height: 68px;
	text-indent: -9999px;
	background-image:url(../images/top/menu.jpg);
	background-repeat: no-repeat;
}

#header ul.menu li#m1 a { background-position: 0 0; }
#header ul.menu li#m2 a { background-position: -150px 0; }
#header ul.menu li#m3 a { background-position: -300px 0; }
#header ul.menu li#m4 a { background-position: -450px 0; }

#header ul.menu li#m1 a:hover { background-position: 0 -68px; }
#header ul.menu li#m2 a:hover { background-position: -150px -68px; }
#header ul.menu li#m3 a:hover { background-position: -300px -68px; }
#header ul.menu li#m4 a:hover { background-position: -450px -68px; }

#contents #contents_inner {
	width: 1000px;
	margin: 0 auto;
	padding: 20px 0;
	background-color: #FFFFFF;
}

/*********************
* TOP
*********************/
#top .flash {
	height: 420px;
}

#top .flash .fl_left {
	float: left;
	width: 532px;
}

#top .flash .fl_right {
	float: left;
	width: 648px;
	height: 355px;
	background-image:url(../images/top/title-right.jpg);
	background-repeat: no-repeat;
	padding: 65px 0 0 20px;
}

#top .flash .fl_right a:hover img {
	filter: alpha(opacity=55);
	-moz-opacity:0.55;
	opacity:0.55;
}

#top h2 {
	margin: 10px 0 0 20px;
}

#top .problem {
	position: relative;
	width: 881px;
	height: 683px;
	margin: 0 0 20px 55px;
	background-image:url(../images/top/problem.jpg);
	background-repeat: no-repeat;
}

#top .problem .p1 {
	position: absolute;
	width: 500px;
	top: 130px;
	left: 30px;
}

#top .problem .p2 {
	position: absolute;
	width: 500px;
	top: 305px;
	left: 340px;
}

#top .problem .p3 {
	position: absolute;
	width: 500px;
	top: 515px;
	left: 30px;
}

#top .points {
	margin: 10px 0;
}

#top .points div {
	float: left;
	width: 477px;
	height: 293px;
	background-repeat: no-repeat;
	margin: 0 0 20px 15px;
}

#top .points .p1 { background-image:url(../images/top/point1.jpg); }
#top .points .p2 { background-image:url(../images/top/point2.jpg); }
#top .points .p3 { background-image:url(../images/top/point3.jpg); }
#top .points .p4 { background-image:url(../images/top/point4.jpg); }
#top .points .p5 { background-image:url(../images/top/point5.jpg); }
#top .points .p6 { background-image:url(../images/top/point6.jpg); }

#top .points div p {
	padding: 100px 0 0 30px;
	width: 225px;
}

#top .popular {
	position: relative;
	width: 957px;
	height: 387px;
	margin: 20px 0 30px 20px;
	background-image:url(../images/top/002.jpg);
}

#top .popular p {
	position: absolute;
	top: 110px;
	left: 470px;
	width: 480px;
	height: 200px;
}

#top .try {
	margin: 10px 0;
}

#top .try .float_left {
	width: 500px;
}

#top .try .float_right {
	width: 485px;
}

#top .try .float_right a:hover img {
	filter: alpha(opacity=55);
	-moz-opacity:0.55;
	opacity:0.55;
}

/*********************
* ポイント
*********************/
#point .points {
}

#point .points div {
	position: relative;
	width: 1000px;
	margin: 10px 0 20px 0;
	background-repeat: no-repeat;
}

#point .points div p {
	position: absolute;
}

#point .points div p.mes {
	width: 480px;
	top: 30px;
	left: 500px;
}

#point .point1 {
	background-image:url(../images/point/002.jpg);
	height: 1701px;
}

#point .point2 {
	background-image:url(../images/point/003.jpg);
	height: 870px;
}

#point .point2 p.mes2 {
	width: 550px;
	top: 220px;
	left: 400px;
}

#point .point3 {
	background-image:url(../images/point/004.jpg);
	height: 1218px;
}

#point .point3 p.mes2 {
	width: 500px;
	top: 210px;
	left: 450px;
}

#point .point4 {
	background-image:url(../images/point/005.jpg);
	height: 886px;
}

#point .point4 p.mes2 {
	width: 500px;
	top: 220px;
	left: 450px;
}

#point .point5 {
	background-image:url(../images/point/006.jpg);
	height: 1097px;
}

#point .point5 p.mes2 {
	width: 500px;
	top: 220px;
	left: 450px;
}

#point .point6 {
	background-image:url(../images/point/007.jpg);
	height: 608px;
}

#point .point6 p.mes2 {
	width: 350px;
	top: 220px;
	left: 20px;
}

/*********************
* ポイント
*********************/
#price .show_price {
	position: relative;
	width: 1000px;
	height: 1730px;
	background-image:url(../images/price/001.jpg);
	background-repeat: no-repeat;
	margin-bottom: 20px;
}

#price .show_price p {
	position: absolute;
}

#price .show_price p strong {
	color: #0000FF;
}

#price .show_price p.mes1 {
	width: 480px;
	top: 250px;
	left: 500px;
}

#price .show_price p.mes2 {
	width: 550px;
	top: 650px;
	left: 300px;
}

#price .show_price p.mes3 {
	width: 500px;
	top: 1170px;
	left: 420px;
}

#price ul.options {
	margin: 10px 0 0 40px;
}

#price ul.options li {
	float: left;
	list-style-type: none;
	margin: 0 0 20px 20px;
}

/*********************
* dream weaver対策（本番で消すこと）
*********************/
/*
.clearfix {
	overflow: hidden;
}
*/