@charset "utf-8";

/* =========================================================

Menu  :
	1.BROWSER-RESET
	2.BASE-SET
	3.WIRE-FRAME
	4.CUSTOM STYLE
	5.PART STYLE
	6.FORM STYLE
	7.TABLE STYLE
	8.COMMON STYLE

========================================================= */

/* 1.BROWSER-RESET
--------------------------------------------------------- */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
p,
blockquote,
th,
td { 
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
}

input,
textarea {
	margin: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 100%;
}

fieldset,
img {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

caption,
th {
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
	line-height: 1;
}

abbr,
acronym {
	border: 0;
}

a {
/* \*/
	overflow: hidden;
/* */
}

/* 2.BASE-SET
--------------------------------------------------------- */

/* FONT-LIB */

body,
input,
select,
textarea {
	font-family: Osaka, "ＭＳ Ｐゴシック", Arial, Sans-serif;
	font-size: 13px;
}

* html body {
	font-size: small; /* for IE6 */
}

*:first-child+html body {
	font-size: small; /* for IE7 */
}

* html table {
	font-size: 100%; /* for IE6 table */
}

.px10 {
	font-size: 77%;
}

.px11,
.xs {
	font-size: 85%;
}

.px12,
.s {
	font-size: 93%;
}

.px13,
.m {
	font-size: 100%;
}

.px14 {
	font-size: 108%;
}

.px15,
.l {
	font-size: 116%;
}

.px16,
.xl {
	font-size: 123%;
}

.px17 {
	font-size: 131%;
}

.px18 {
	font-size: 138%;
}

.px19 {
	font-size: 146%;
}

.px20 {
	font-size: 153%;
}

.px21 {
	font-size: 161%;
}

.px22 {
	font-size: 167%;
}

.px23 {
	font-size: 174%;
}

.px24 {
	font-size: 182%;
}

.px25 {
	font-size: 189%;
}

.px26 {
	font-size: 197%;
}

/* CLEAR-FIX */

.clfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

*:first-child+html .clfix {
	display: inline-block;
	min-height: 1%;
}

/* Hides from IE6/IE Mac \*/
* html .clfix {
	height: 1%;
}

.clfix {
	display: block;
}
/* End hide from IE6/IE Mac */

/* 3.WIRE-FRAME
--------------------------------------------------------- */

html {
	overflow-y: scroll; /* CSS3 */
}

/* 4.CUSTOM STYLE
--------------------------------------------------------- */

body {
	background: url("../img/bg_body.png") repeat-x #c4f3ff;
	color: #333;
	font-size: 12px;
	line-height: 1.5;
}

/* 5.PART STYLE
--------------------------------------------------------- */

#page {
	background: url("../img/bg_page_sraku.jpg") no-repeat 50% 0;
}

#pageInbox {
	margin: 0 auto;
	position: relative;
	width: 950px;
}

/* ===== #header ===== */

#logoSpace {
	border-bottom: 1px solid #ccc;
	height: 22px;
	overflow: hidden;
	padding: 12px 0 10px;
}

#logo {
	float: left;
}

#logo a {
	background: url("../img/logo_gnavi.png") no-repeat;
	display: block;
	height: 21px;
	overflow: hidden;
	text-indent: -9999px;
	width: 74px;
}

#socialmedia {
	float: right;
}

#topicpath {
	font-weight: bold;
}

#topicpath li {
	background: url("../img/icn_topicpath.png") no-repeat 0 50%;
	display: block;
	float: left;
	margin-left: 8px;
	padding: 3px 0 2px 15px;
}

#topicpath li.fst {
	background: none;
	margin-left: 0;
	padding-left: 0;
}

#titArea {
	height: 575px;
	margin-top: 10px;
	width: 100%;
}

h1,
#titArea p.benefits,
#titArea ol.benefits,
#titArea dl.period {
	display: none;
}

.btnAreaH {
	left: 44px;
	position: absolute;
	top: 511px;
	width: 700px;
}

.btnAreaH .btn {
	display: block;
	height: 89px;
	margin: 0 auto;
	width: 540px;
}

.btnAreaH .btn a {
	background: url("../img/header_btn_sraku.jpg") no-repeat;
	display: block;
	height: 89px;
	margin: 0;
	overflow: hidden;
	text-indent: -9999px;
	width: 540px;
}

.btnAreaH .btn a:hover {
	background-position: 0 -89px;
}

.btnAreaH p {
	text-align: center;
}

.btnAreaH p.notes {
	font-weight: bold;
}

/* ===== #content ===== */

#content {
	margin-top: 10px;
}

#aboutPointcard,
#aboutPoint {
	background-color: #fff;
}

.box {
	background-color: #fff;
	margin: 0 auto;
	width: 930px;
}

h2 {
	overflow: hidden;
	text-indent: -9999px;
}

#flow,
#outline {
	background: url("../img/bg_w950btm.png") no-repeat 0 100%;
	padding-bottom: 13px;
	width: 950px;
}

/* --- #flow --- */

#flow h2 {
	background: url("../img/h2_flow.png") no-repeat;
	height: 77px;
}

#flow_step1,
#flow_step2,
#flow_step3 {
	overflow: hidden;
	margin: 0 auto;
	padding-bottom: 20px;
	width: 870px;
}

#flow h3 {
	background: url("../img/h3_sraku.png") no-repeat;
	height: 33px;
	margin-bottom: 20px;
	text-indent: -9999px;
	overflow: hidden;
}

#flow_step2 h3 {
	background-position: 0 -33px;
}

#flow_step3 h3 {
	background-position: 0 -66px;
}

#flow ol {
	margin-left: -35px;
	padding: 0 10px;
	width: 885px;
}

#flow ol li {
	background: url("../img/bg_flow_arrow.png") no-repeat 10px 30px;
	display: block;
	float: left;
	padding-left: 35px;
	width: 260px;
}

#flow_step3 ol li.w555 {
	width: 555px;
}

#flow dt.descriptionImg {
	display: block;
	height: 160px;
	margin-bottom: 5px;
}

#flow dt.txt {
	text-indent: -1.1em;
	padding-left: -1.1em;
	margin-left: 1.1em;
}

#flow dd.lnk {
	text-align: right;
}

#flow dd a {
	background: url("../img/icon_arrow.png") no-repeat 0 50%;
	padding-left: 13px;
}

#flow dd.attention {
	color: #f00;
	font-size: 85%;
	text-indent: -1em;
	padding-left: -1em;
	margin-left: 2.1em;
}

/*#flow dd.wLink p {
	display: block;
	float: left;
	font-size: 85%;
	padding-right: 5px;
}*/

/* --- #aboutPointcard, #aboutPoint --- */

.box2area {
	background: url("../img/bg_box2area.png") no-repeat 10px 100%;
	margin-top: 20px;
	padding-bottom: 13px;
	position: relative;
	zoom: 1;
}

.box2areaInbox {
	background: url("../img/bg_box2area.png") no-repeat 10px 0;
	padding: 13px 10px 0 10px;
}

#aboutPointcard,
#aboutPoint {
	display: inline;
	height: auto !important;
	height: 135px;
	min-height: 135px;
	padding: 3px 20px;
	position: relative;
	width: 410px;
}

#aboutPointcard {
	background: url("../img/bg_aboutpointcard.png") no-repeat 240px 100% #fff;
}

#aboutPoint {
	background: url("../img/bg_aboutpoint.png") no-repeat 270px 100% #fff;
}

#aboutPointcard dt,
#aboutPoint dt {
	background: url("../img/what_dt.png") no-repeat;
	height: 20px;
	margin-bottom: 10px;
	overflow: hidden;
	text-indent: -9999px;
}

#aboutPoint dt {
	background-position: 0 -20px;
}

#aboutPointcard dd,
#aboutPoint dd {
	width: 210px;
}

#aboutPointcard dd.lnk,
#aboutPoint dd.lnk {
	position: absolute;
	text-align: right;
	bottom: 0;
}

#aboutPointcard dd.lnk a,
#aboutPoint dd.lnk a {
	background: url("../img/icon_arrow.png") no-repeat 0 50%;
	padding-left: 13px;
}

#aboutPointcard {
	float: left;
}

#aboutPoint {
	float: right;
}

/* --- #outline --- */

#outline {
	line-height: 1.8;
	margin-top: 10px;
}

#outline h2 {
	background: url("../img/h2_outline.png") no-repeat;
	height: 77px;
}

#outline dl {
	margin: 0 auto;
	width: 890px;
}

#outline dl dt {
	font-weight: bold;
	padding-top: 1em;
}

#outline dl.fst dt {
	padding-top: 0;
}

dd.li_number p {
	text-indent: -1.1em;
	padding-left: -1.1em;
	margin-left: 1.1em;
}

dd.li_number div.li_asterisk p {
	text-indent: -1em;
	padding-left: -2.1em;
	margin-left: 2.1em;
}

dd.li_dot p {
	text-indent: -0.6em;
	padding-left: -0.6em;
	margin-left: 0.6em;
}

dd.li_asterisk p {
	text-indent: -1em;
	padding-left: -1em;
	margin-left: 1em;
}

/* --- #content .btn --- */

.btnArea01,
.btnArea02 {
	margin-top: 20px;
}

.btnArea01 {
	background: url("../img/bg_btnarea01.png") no-repeat 50% 100%;
}

p.toOutline {
	text-align: center;
}

.btn a {
	background: url("../img/content_btn_sraku.jpg") no-repeat;
	display: block;
	height: 89px;
	margin: 8px auto 0;
	overflow: hidden;
	text-indent: -9999px;
	width: 540px;
}

.btn a:hover {
	background-position: 0 -89px;
}

/* ===== #footer ===== */

#footer {
	margin-top: 30px;
}

#footer .toPagetop {
	text-align: right;
}

#footer .toPagetop a {
	background: url("../img/icon_totop.png") no-repeat 0 40%;
	font-weight: normal;
	padding-left: 10px;
}

#footer address {
	border-top: 1px solid #ccc;
	margin-top: 13px;
	padding: 10px 0;
	text-align: center;
}

/* 8.COMMON STYLE
--------------------------------------------------------- */

a {
	font-weight: bold;
	text-decoration: none;
}

a:link {
	color: #1f579f;
}

a:visited {
	color: #1f579f;
}

a:hover {
	color: #c00;
}