@charset "UTF-8";
@import "base.css";
@import "fonts.css";

/*==========================================================================*/
/*//////////////////////////////////////////////////////////////////////////*/
/*//////                                                              //////*/
/*//////  Copyright (C) 2009 株式会社フリーセル All Rights Reserved.  //////*/
/*//////                                                              //////*/
/*//////////////////////////////////////////////////////////////////////////*/
/*                                                                          */
/*    base.css   スタイルの初期設定を行うため、変更しないで下さい。      */
/*    fonts.css  フォントの初期設定を行うため、変更しないで下さい。      */
/*                                                                          */
/*==========================================================================*/

/*==========================================================================*/
/*                           Common-Setting                                 */
/*==========================================================================*/

/* Tag
------------------------------------------------------------------------*/

/* 基本タグのフォントサイズを指定（12px -> 120% or 1.2em ） */
h1,h2,h3,h4,h5,h6,input,button,textarea,select,p,blockquote,table,pre,address,caption,ul,ol,dl {
	font-size: 1.4em;
	line-height: 1.8;
}

#index h1,#index h2,#index h3,#index h4,#index h5,#index h6,#index input,#index button,#index textarea,#index select,#index p,#index blockquote,#index table,#index pre,#index address,#index caption,#index ul,#index ol,#index dl {
	font-size: 1.6em;
}

#contact input,#contact button,#contact textarea,#contact select,#contact blockquote,#contact table,#contact pre,#contact address,#contact caption,#contact ul,#contact ol,#contact dl {
	font-size: 1.2em;
	line-height: 1.8;
}
	
h1 {} /* Header内で設定 */
#main h2 { line-height: .1; margin: 10px 25px; }
#index h2 { line-height: .1; margin: 0; }
h2 {
	height: 30px;
	text-indent: -9999em;
	margin-bottom: 10px;
}

#index h2 { margin-bottom: 0; }

h3 {
	height: 30px;
	text-indent: -9999em;
}

h4 {
	font-size: 1.6em;
	border-bottom: 2px dotted #DCDCDC;
	color: #009FF7;
	font-weight: bold;
	margin-bottom: 10px;
	}

a { color: #028eaf; text-decoration: underline; }
a:hover,
a:active { color: #de91a2; }
a:visited {
}


/* Innner-Contents
------------------------------------------------------------------------*/

#main p { padding: .5em 1em; }

.section { padding: .5em 25px 1em; }
.section .section { padding: .5em .5em 1em; }
#index .section { padding: 0; }
#index .section02 { padding: 0 90px 0; }
.section03 { padding: 0 10px 0; }

.image_l { float: left; margin: 0 16px 8px 0; }
.image_r { float: right; margin: 0 0 8px 16px; }

.case {
	margin: 10px 20px;
	background: url(../images/arrow_h.jpg) center center no-repeat;
}
.case-narrow {
	margin: 10px 40px;
	background: url(../images/arrow_h.jpg) center center no-repeat;
}
.case-noimg { margin: 10px 20px; }

.case img,
.case-narrow img,
.case-noimg img { display: block; }

#main ul li {	
	background: url(../images/li_bg.png) 0 6px no-repeat;
	padding-left: 25px;
	line-height: 2.0;
	list-style: none;
	}

#main ul.totop { clear: both; padding-bottom: 20px; }
#main ul.totop li { list-style: none; background-image: none;}
#main ul.totop li a {
	display: block;
	width: 180px;
	height: 25px;
	float: right;
	line-height: 1.0;
	background: url(../images/to_top.png) 0 0 no-repeat;
	text-indent: -9999em;
	outline: none;
}
#main ul.totop li a:hover { background-position: bottom; }

.center { text-align: center; }
.right { text-align: right; }

#main table {
  color: #666;
  width: 840px;
  margin-left: 30px;
  border: 1px solid #ABDFFF;
  }

#main table th,
#main table td {
  padding: 4px 12px;
  border: 1px solid #ABDFFF;
	line-height: 1.8;
  }

#main table th {
  color: #267DB8;
  width: 150px;
  background: #EEF9FF;
  }
	
#main .faq_q {
  border: 1px solid #CCCCCC;
  border-bottom: none;
  background: url(../images/faq_q.jpg) 5px 20px no-repeat;
  padding: 20px 0 25px 70px;
	color: #738E00;
  }
  
#main .faq_a {
  border: 1px solid #CCCCCC;
  border-top: 1px dotted #CCCCCC;
  background: url(../images/faq_a.jpg) 5px 10px no-repeat;
  padding: 10px 10px 10px 70px;
  margin: 0 0 20px 0;
	margin-left: 0;
  }


/*==========================================================================*/
/*                            Container                                     */
/*==========================================================================*/

body {
  background: url(../images/body_bg.jpg) top repeat-x #FFFFFF;
	color: #333;
	text-align: center;
}

#index { background: url(../images/index_body_bg.jpg) top repeat-x #FFFFFF; }

#container {
	width: 100%;
	margin: 0 auto;
	background: url(../images/container_bg.jpg) bottom repeat-x;
}

#wrapper {
	width: 950px;
	margin: 0 auto;
  background: url(../images/wrapper_bg.jpg) bottom no-repeat;
}

#main {
	width: 950px;
	margin: 0 auto;
	text-align: left;
  background: url(../images/main_bg.jpg) 0 0 repeat-y;
  float: right;
}

#main #index_main {
	width: 950px;
	height: 175px;
	margin: 0;
	padding: 0;
	background: url(../images/main.jpg) 0 0 no-repeat;
	}

#index #main #index_main {
	width: 950px;
	height: 355px;
	margin: 0;
	padding: 0;
	background: url(../images/index_main.jpg) 0 0 no-repeat;
	}
	
#main #index_main #main_cashback {
	width: 137px;
	height: 25px;
	margin: 0;
	padding: 0;
	line-height: 1.0;
	position: relative;
	top: 33px;
	left: 400px;
	}
	
#main #index_main #main_cashback a {
	width: 137px;
	height: 25px;
	margin: 0;
	padding: 0;
	display: block;
	line-height: 1.0;
	text-indent: -9999px;
	background: url(../images/main_cashback.jpg) 0 0 no-repeat;
	}
	
#main #index_main #main_cashback a:hover { background: url(../images/main_cashback.jpg) 0 -25px no-repeat; }
	
#index #main #index_main #main_cashback {
	position: relative;
	top: 244px;
	left: 439px;
	}
	

#index #main #index_main #main_contact {
	width: 458px;
	height: 60px;
	margin: 0;
	padding: 0;
	line-height: 1.0;
	position: relative;
	top: 255px;
	left: 15px;
	}
	
#index #main #index_main #main_contact a {
	width: 458px;
	height: 60px;
	margin: 0;
	padding: 0;
	display: block;
	text-indent: -9999px;
	background: url(../images/main_contact.jpg) 0 0 no-repeat;
	}
	
#index #main #index_main #main_contact a:hover { background: url(../images/main_contact.jpg) 0 -60px no-repeat; }


/*==========================================================================*/
/*                               Header                                     */
/*==========================================================================*/

#header {
	width: 950px;
	height: 67px;
	margin: 0 auto;
	text-align: left;
  background: url(../images/header_bg.jpg) 0 0 no-repeat;
}
#header h1 { float: left; }
#header h1 a {
  display: block;
	width: 430px;
	height: 67px;
  background: url(../images/h1.jpg) 0 0 no-repeat;
	text-indent: -9999em;
}
#header #header02 {
	float: right;
	padding: 0;
	margin: 0;
}
#header #header02 a {
	display: block;
	width: 470px;
	height: 67px;
  background: url(../images/header_tel.jpg) 0 0 no-repeat;
	text-indent: -9999em;
	outline: none;
}
#header #header02 a:hover { background-position: bottom; }

/*==========================================================================*/
/*                              Footer                                      */
/*==========================================================================*/

#footer {
	height: 50px;
	color: #fff;
	clear: both;
	text-align: center;
  background: url(../images/footer_bg.jpg) 0 repeat-x;
}
#footer address {
	width: 390px;
	margin: 0 auto 0;
	padding-top: 20px;
	height: 20px;
}


/*==========================================================================*/
/*                             gnavi                                  */
/*==========================================================================*/

#gnavi {
}
#gnavi ul {
	margin: 0 0 0 25px;
}
#gnavi ul li {
	display: block;
	float: left;
	height: 37px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#gnavi ul li a {
	display: block;
	height: 37px;
	text-align: left;
	text-indent: -9999em;
	background: url(../images/gnavi.jpg) 0 0 no-repeat;
}

#gnavi ul li.gnavi01 a { background-position: -25px 0; width:190px }
#gnavi ul li.gnavi02 a { background-position: -215px 0; width:160px; }
#gnavi ul li.gnavi03 a { background-position: -375px 0; width:230px; }
#gnavi ul li.gnavi04 a { background-position: -605px 0; width:150px; }
#gnavi ul li.gnavi05 a { background-position: -755px 0; width:172px; }

#gnavi ul li.gnavi01 a:hover { background-position: -25px -37px; }
#gnavi ul li.gnavi02 a:hover { background-position: -215px -37px; }
#gnavi ul li.gnavi03 a:hover { background-position: -375px -37px; }
#gnavi ul li.gnavi04 a:hover { background-position: -605px -37px; }
#gnavi ul li.gnavi05 a:hover { background-position: -755px -37px; }


/*==========================================================================*/
/*                             Contents                                     */
/*==========================================================================*/

.p_red {
	color: #F40000;
	font-weight: bold;
	}
	
.bg_yellow {
	border: 3px solid #FFE18D;
	background: #FFF6DE;
	}
	
.p_100 { font-size: 100%; }	
.p_200 { font-size: 200%; }

.b_gray { border: 3px solid #DCDCDC; }

.b_gray dl {
	border-top: 2px dotted #CCCCCC;
	margin: 0 1em;
	}

#main table .t_300 { width: 300px; }
#main table .t_230 { width: 230px; }


	
#main #bn_cashback,
#main #bn_case02 {
	float: left;
	width: 620px;
	height: 70px;
	margin: 0;
	padding: 0 150px;
	line-height: 1.0;
	}
#main #bn_cashback a,
#main #bn_case02 a {
	width: 620px;
	height: 70px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
	}
	
#main #bn_cashback a { background: url(../images/bn_cashback.jpg) 0 0 no-repeat; }
#main #bn_case02 a { background: url(../images/bn_case.jpg) 0 0 no-repeat; }

#main #bn_cashback a:hover { background: url(../images/bn_cashback.jpg) 0 -70px no-repeat; }
#main #bn_case02 a:hover { background: url(../images/bn_case.jpg) 0 -70px no-repeat; }


/* index
------------------------------------------------------------------------*/

#index h2#h2-01 { background: url(../images/index_h2-01.jpg) 0 0 no-repeat; }
#index h3#h3-01 { background: url(../images/index_h3-01.jpg) 0 0 no-repeat; }

#index h2 {	height: 50px; }
#index h3 {	height: 40px; margin-left: 10px; }

#index .section p {
	margin: 0;
	padding: 0;
	}
#main #bn_model {
	float: left;
	width: 550px;
	height: 90px;
	margin: 0;
	padding: 0;
	}
#main #bn_model a {
	width: 550px;
	height: 90px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
	background: url(../images/bn_model.jpg) 0 0 no-repeat;
	}
#main #bn_model a:hover { background: url(../images/bn_model.jpg) 0 -90px no-repeat; }

#main #bn_cost,
#main #bn_case {
	float: right;
	width: 190px;
	height: 45px;
	margin: 20px 0 0 0;
	padding: 0;
	line-height: 1.0;
	}
#main #bn_cost a,
#main #bn_case a {
	width: 190px;
	height: 45px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
	background: url(../images/bn_cost.jpg) 0 0 no-repeat;
	}
#main #bn_cost a:hover,
#main #bn_case a:hover { background: url(../images/bn_cost.jpg) 0 -45px no-repeat; }

#main #bn_contact {
	width: 620px;
	height: 90px;
	margin: 10px 0 20px 120px;
	padding: 0;
	clear: both;
	}
#main #bn_contact a {
	width: 620px;
	height: 90px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
	background: url(../images/bn_contact.jpg) 0 0 no-repeat;
	}
#main #bn_contact a:hover { background: url(../images/bn_contact.jpg) 0 -90px no-repeat; }

#main #bn_contact02 {
	width: 620px;
	height: 90px;
	margin: 10px 0 20px 0;
	padding: 0;
	float: left;
	}
#main #bn_contact02 a {
	width: 620px;
	height: 90px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
	background: url(../images/bn_contact.jpg) 0 0 no-repeat;
	}
#main #bn_contact02 a:hover { background: url(../images/bn_contact.jpg) 0 -90px no-repeat; }

#main #bn_company {
	float: right;
	width: 300px;
	height: 45px;
	margin: 30px 0 0 0;
	padding: 0;
	}
#main #bn_company a {
	width: 300px;
	height: 45px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	display: block;
	background: url(../images/bn_company.jpg) 0 0 no-repeat;
	}
#main #bn_company a:hover { background: url(../images/bn_company.jpg) 0 -45px no-repeat; }

#main #h2_bg {
	margin: 20px 15px 20px 15px;
	background: url(../images/h2_bg.jpg) 0 bottom no-repeat;
	}
	
#main #h2_bg .text_box { padding: 0 10px 10px; }


#main #h2_bg .image_l {
	margin: 0;
	width: 510px;
	}
#main #h2_bg .image_r {
	margin: 0;
	padding: 0;
	width: 350px;
	}
#main #h2_bg .image_r p { padding: 0; margin: 0; }

#main .bg_phone { background: url(../images/bg_phone.jpg) 95% bottom no-repeat; }

#main .bg_phone p { width: 725px; }

/* cost
------------------------------------------------------------------------*/

#cost h2#h2-01 { background: url(../images/cost_h2-01.jpg) 0 0 no-repeat; }
#cost h2#h2-02 { background: url(../images/cost_h2-02.jpg) 0 0 no-repeat; }

#cost h3#h3-01 { background: url(../images/cost_h3-01.jpg) 0 0 no-repeat; height: 50px; }
#cost h3#h3-02 { background: url(../images/cost_h3-02.jpg) 0 0 no-repeat; }
#cost h3#h3-03 { background: url(../images/cost_h3-03.jpg) 0 0 no-repeat; }
#cost h3#h3-04 { background: url(../images/cost_h3-04.jpg) 0 0 no-repeat; }
#cost h3#h3-05 { background: url(../images/cost_h3-05.jpg) 0 0 no-repeat; height: 50px; }
#cost h3#h3-06 { background: url(../images/cost_h3-06.jpg) 0 0 no-repeat; }
#cost h3#h3-07 { background: url(../images/cost_h3-07.jpg) 0 0 no-repeat; }
#cost h3#h3-08 { background: url(../images/cost_h3-08.jpg) 0 0 no-repeat; }
#cost h3#h3-09 { background: url(../images/cost_h3-09.jpg) 0 0 no-repeat; height: 50px; }
#cost h3#h3-10 { background: url(../images/cost_h3-10.jpg) 0 0 no-repeat; }
#cost h3#h3-11 { background: url(../images/cost_h3-11.jpg) 0 0 no-repeat; }
#cost h3#h3-12 { background: url(../images/cost_h3-12.jpg) 0 0 no-repeat; }
#cost h3#h3-13 { background: url(../images/cost_h3-13.jpg) 0 0 no-repeat; height: 50px; }
#cost h3#h3-14 { background: url(../images/cost_h3-14.jpg) 0 0 no-repeat; }
#cost h3#h3-15 { background: url(../images/cost_h3-15.jpg) 0 0 no-repeat; }

/* otoku
------------------------------------------------------------------------*/

#otoku h2#h2-01 { background: url(../images/otoku_h2-01.jpg) 0 0 no-repeat; }

#otoku h3#h3-01 { background: url(../images/otoku_h3-01.jpg) 0 0 no-repeat; }
#otoku h3#h3-02 { background: url(../images/otoku_h3-02.jpg) 0 0 no-repeat; }
#otoku h3#h3-03 { background: url(../images/otoku_h3-03.jpg) 0 0 no-repeat; }

#otoku #main .bg_yellow {
	width: 850px;
	margin-left: 25px;
	margin-bottom: 20px;
	}
	
	
#otoku .th01 {
	width: 168px;
	background: #004889;
	color: #FFFFFF;
	}

#otoku .th02 {
	width: 140px;
	background: #004889;
	color: #FFFFFF;
	}


#otoku th { width: 168px; font-size: 70%; }
#otoku td { text-align: center; }

#otoku .softbank {
	width: 168px;
	background: #FFFEE1;
	}
	

/* cashback
------------------------------------------------------------------------*/

#cashback h2#h2-01 { background: url(../images/cashback_h2-01.jpg) 0 0 no-repeat; }

/* case
------------------------------------------------------------------------*/

#case h2#h2-01 { background: url(../images/case_h2-01.jpg) 0 0 no-repeat; }

#case #main .bg_yellow { margin-bottom: 20px; }


/* model
------------------------------------------------------------------------*/

#model h2#h2-01 { background: url(../images/model_h2-01.jpg) 0 0 no-repeat; }

#model h3#h3-01 { background: url(../images/model_h3-01.jpg) 0 0 no-repeat; }
#model h3#h3-02 { background: url(../images/model_h3-02.jpg) 0 0 no-repeat; }
#model h3#h3-03 { background: url(../images/model_h3-03.jpg) 0 0 no-repeat; }
#model h3#h3-04 { background: url(../images/model_h3-04.jpg) 0 0 no-repeat; }

#model .model_box { padding: 10px 10px; }

#model .alpha {
	float: left;
	width: 250px;
	}
	
#model .alpha p {
	margin: 0;
	padding: 0;
	}
	
#model .beta {
	float: right;
	width: 590px;
	}
	


#model .b_gray dt { padding-top: 5px; }

#model #bn_model01,
#model #bn_model02,
#model #bn_model03,
#model #bn_model04 {
	width: 300px;
	height: 40px;
	margin: 0 0 10px 180px;
	padding: 0;
	}
	
#model #bn_model01 a,
#model #bn_model02 a,
#model #bn_model03 a,
#model #bn_model04 a {
	width: 300px;
	height: 40px;
	margin: 0;
	padding: 0;
	display: block;
	text-indent: -9999px;
	}
	
#model #bn_model01 a { background: url(../images/bn_model01.jpg) 0 0 no-repeat; }
#model #bn_model02 a { background: url(../images/bn_model02.jpg) 0 0 no-repeat; }
#model #bn_model03 a { background: url(../images/bn_model03.jpg) 0 0 no-repeat; }
#model #bn_model04 a { background: url(../images/bn_model04.jpg) 0 0 no-repeat; }

#model #bn_model01 a:hover { background: url(../images/bn_model01.jpg) 0 -40px no-repeat; }
#model #bn_model02 a:hover { background: url(../images/bn_model02.jpg) 0 -40px no-repeat; }
#model #bn_model03 a:hover { background: url(../images/bn_model03.jpg) 0 -40px no-repeat; }
#model #bn_model04 a:hover { background: url(../images/bn_model04.jpg) 0 -40px no-repeat; }

/* company
------------------------------------------------------------------------*/

#company h2#h2-01 { background: url(../images/company_h2-01.jpg) 0 0 no-repeat; }
#company h2#h2-02 { background: url(../images/company_h2-02.jpg) 0 0 no-repeat; }

#company h3#h3-01 { background: url(../images/company_h3-01.jpg) 0 0 no-repeat; }
#company h3#h3-02 { background: url(../images/company_h3-02.jpg) 0 0 no-repeat; }
#company h3#h3-03 { background: url(../images/company_h3-03.jpg) 0 0 no-repeat; }
#company h3#h3-04 { background: url(../images/company_h3-04.jpg) 0 0 no-repeat; }
#company h3#h3-05 { background: url(../images/company_h3-05.jpg) 0 0 no-repeat; }
#company h3#h3-06 { background: url(../images/company_h3-06.jpg) 0 0 no-repeat; }
#company h3#h3-07 { background: url(../images/company_h3-07.jpg) 0 0 no-repeat; }
#company h3#h3-08 { background: url(../images/company_h3-08.jpg) 0 0 no-repeat; }

#company table {
	width: 700px;
	margin-left: 100px;
	}
	
/* contact
------------------------------------------------------------------------*/

#contact h2#h2-01 { background: url(../images/contact_h2-01.jpg) 0 0 no-repeat; }

#contact .b_gray {
	padding: 10px;
	margin-bottom: 10px;
	width: 600px;
	margin-left: 155px;
	}
	
#contact #mailform th { width: 250px; }

#contact #mailform td,
#contact #mailform td input { font-size: 100%; }

#contact tr table {
	border: none;
	width: 500px;
	margin-left: 0;
	}
	
#contact tr table th,
#contact tr table td { border: none; }