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

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

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

* html .iepngfix {
  behavior: url(../js/iepngfix.htc);
}


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

.under h3{
	font-size:160%;
	font-weight:bold;
	color:#665D52;
	padding:0 0 14px 20px;
	margin-bottom:15px;
	background:url(../images/under_h3_1.gif) 0 100% no-repeat;
}
.under h3.short{ background:url(../images/under_h3_3.gif) 0 100% no-repeat;}
.under h3.long{ background:url(../images/under_h3_2.gif) 0 100% no-repeat;}

h4 {
	font-size: 140%;
	padding: 10px 0 10px 30px;
	margin: 0 0 15px;
}
.under h4{
	padding:4px 0 10px 30px;
	font-weight:bold;
	margin: 0 0 10px;
	background:url(../images/under_h4_1.gif) 0 100% no-repeat;
}
.under h4.short{ background:url(../images/under_h4_2.gif) 0 100% no-repeat;}

.under h5{
	font-weight:bold;
	padding:7px 0 7px 9px;
	margin-bottom:15px;
	border:1px solid #E6E2D5;
	background-color:#F4F2EC;
}


a { color: #665d52; }
a:hover,
a:active { color: #665d52; text-decoration: none; }
a:visited {}
/*a:focus{outline:none;}*/


ul {
}
li {
}

dl {
}
dt {
}
dd {
}

p { margin: 0 0 1em; }

.section { padding: .5em 1em 1em; }
.section .section { padding: .5em .5em 1em; }

/*.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; }

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

hr { display: none; }
img { vertical-align: top; }


/*---- clear ----*/
.clear{
clear:both;
height:0px;
font-size:0px;
line-height:0;
margin:0;
padding:0;
}


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

html {
	background: none;
}

body {
	background: url(../images/body_bg.gif) 0 0;
	color: #665d52;
	text-align: center;
	padding: 0;
	margin: 0;
}

#wrapper {
	width: 950px;
	text-align: left;
	margin: 0 auto;
}

#wrapper-inner {

}


#main {
	background: url(../images/main_bg.png) 0 0 repeat-y;
	width: 950px;
	padding: 4px 0 20px;
	margin: 0 auto;
}

*html #main { width: 950px; }

h1 {
	position: absolute;
	top: 10px;
	left: 2px;
	font-size: 100%;
	line-height: 1.5;
}

p.toph1 {
	position: absolute;
	top: 10px;
	left: 2px;
	font-size: 100%;
	line-height: 1.5;
}


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

#header {
	position: relative;
	background: url(../images/header_bg.png) 0 0 no-repeat;
	width: 950px;
	height: 168px;
	padding: 0;
	margin: 0;
}

#header p { position: absolute; padding: 0; margin: 0; }
#header p#logo { top: 52px; left: 11px; }
#header p.link-ec { top: 67px; right: 40px; }

#header ul { position: absolute; top: 123px; left: 148px; background: url(../images/g_navi_bg.gif) 0 0 repeat-x; width: 800px; height: 43px; }
#header ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#header ul { display: inline-block; }
/* Hides from IE-mac \*/
* html #header ul { height: 1%; }
#header ul { display: block; }
/* End hide from IE-mac */
#header ul li { float: left; height: 43px; font-size: 0; line-height: 0; margin: 0 1px 0 0; }


/*==========================================================================*/
/*                               main-image                                 */
/*==========================================================================*/

#main-image { position: relative; background: url(../images/main_image_bg.png) 0 100% no-repeat; width: 946px; height: 332px; margin: 0 auto; }
#main-image h2 { position: absolute; top: 4px; left: 8px; width: 930px; height: 320px; padding: 0; margin: 0; border-bottom: solid 4px #fff; }
#main-image h2 img { position: absolute; top: 0; left: 0; width: 930px; height: 320px; padding: 0; margin: 0; }

#main-image p.toph2 { position: absolute; top: 4px; left: 8px; width: 930px; height: 320px; padding: 0; margin: 0; border-bottom: solid 4px #fff; }
#main-image p.toph2 img { position: absolute; top: 0; left: 0; width: 930px; height: 320px; padding: 0; margin: 0; }


/*==========================================================================*/
/*                               under-title                                 */
/*==========================================================================*/

#under-title { position: relative; background: url(../images/main_image_bg.png) 0 100% no-repeat; width: 946px; height: 152px; margin: 0 auto; }
#under-title h2 { position: absolute; top: 4px; left: 8px; width: 930px; height: 140px; padding: 0; margin: 0; border-bottom: solid 4px #fff; }
#under-title h2 img { position: absolute; top: 0; left: 0; width: 930px; height: 140px; padding: 0; margin: 0; }


/*==========================================================================*/
/*                               g-navi                                 */
/*==========================================================================*/

#g-navi { background: url(../images/g_navi_bg.jpg) 0 0 no-repeat; width: 938px; height: 47px; margin: 0 auto 11px; }
*html #g-navi { width: 938px; height: 47px; margin: 0 0 11px 7px; }
#g-navi ul { height: 40px; padding: 3px 0 0 4px; }
#g-navi ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#g-navi ul { display: inline-block; }
/* Hides from IE-mac \*/
* html #g-navi ul { height: 1%; }
#g-navi ul { display: block; }
/* End hide from IE-mac */
#g-navi ul li { float: left; height: 40px; margin: 0 1px 0 0; }


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

#footer {
	clear: both;
	background: url(../images/footer_bg.gif) 0 18px repeat-x;
}

#footer div {
	position: relative;
	background: url(../images/footer_inner_bg.gif) 0 0 no-repeat;
	width: 950px;
	min-height: 65px; height: auto !important; height: 65px;
	text-align: left;
	padding: 0;
	margin: 0 auto;
}

#footer p { position: absolute; font-size: 120%; top: 15px; left: 2px; }
#footer p strong { color: #f27a96; }
#footer p span { color: #f27a96; font-weight:bold; }
#footer address { position: absolute; top: 30px; right: 0; font-size: 100%; line-height:1.5; }

#accessTag {
	display: none;
}


/*==========================================================================*/
/*                            Navigation                                    */
/*==========================================================================*/

#navi {
	float: left;
	width: 240px;
	padding: 0 0 15px 11px;
}

#navi dl { background: url(../images/s_navi_ca_bg.gif) 0 0 repeat-y; width: 240px; padding: 0 0 5px; margin: 0 0 5px; }
#navi dl dt { width: 240px; }
#navi dl dd { background: url(../images/s_navi_line_01.gif) 0 100% no-repeat #fff; width: 230px; padding: 0 0 1px; margin: 0 0 0 5px; }
#navi dl dd.btm { background: none; padding: 0; }
#navi dl dd a { display: block; background: url(../images/icon_a_01.gif) 11px 11px no-repeat #fff; text-decoration: none; padding: 10px 0 10px 30px; }
* html #navi dl dd a { width: 230px; }
#navi dl dd a:hover { background: url(../images/icon_a_02.gif) 11px 11px no-repeat #f48fa7; color: #fff; }
#navi dl dd a span { display: block; }

#navi ul { background: url(../images/s_navi_bg.gif) 0 0 repeat-y; width: 240px; padding: 5px 0; margin: 0 0 12px; }
#navi ul li { background: url(../images/s_navi_line_02.gif) 0 100% no-repeat #fff; width: 228px; padding: 0 0 1px; margin: 0 0 0 5px; border-left: solid 1px #e6e2d5; border-right: solid 1px #e6e2d5; }
*html #navi ul li { width: 230px; }
#navi ul li.top { border-top: solid 1px #e6e2d5; }
#navi ul li.btm { background: none; padding: 0; border-bottom: solid 1px #e6e2d5; }
#navi ul li a { display: block; background: url(../images/icon_a_03.gif) 11px 11px no-repeat #fff; text-decoration: none; padding: 10px 0 10px 30px; }
* html #navi dl dd a { width: 230px; }
#navi ul li a:hover { background: url(../images/icon_a_04.gif) 11px 11px no-repeat #a28370; color: #fff; }
#navi .s-bn-box { background: url(../images/line_01.gif) 0 0 repeat-x; width: 230px; padding: 14px 0 0; margin: 0 0 0 5px; }
#navi .s-bn-box p { margin: 0 0 5px; }


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

#content {
	float: right;
	width: 670px;
	padding: 0 10px 0 0;
}

* html #content { width: 680px; }


/* index
------------------------------------------------------------------------*/
.top h2 { background: none; padding: 0; margin: 0; border: none; }
.top h3 { background: none; padding: 0; margin: 0 0 15px; border: none; }
.top h4 { background: none; padding: 0; margin: 0 0 10px; border: none; }

.top-section01 { width: 670px; margin: 0 0 18px; }
*html .top-section01 { width: 671px; }
.top-section01 ul { margin: 0 0 0 -1px; }
.top-section01 ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.top-section01 ul { display: inline-block; }
/* Hides from IE-mac \*/
* html .top-section01 ul { height: 1%; }
.top-section01 ul { display: block; }
/* End hide from IE-mac */
.top-section01 ul li { float: left; padding: 0 0 0 1px; }

.top-section02 { background: url(../images/top_section02_bg.jpg) 0 0 no-repeat; }

.top-section02 h3 { width: 417px; height: 64px; padding: 0; margin: 0 0 10px; }
.top-section02 p.toph3 { width: 417px; height: 64px; padding: 0; margin: 0 0 10px; }

.top-section02 h4 { width: auto; color: #f3849d; font-weight: bold; margin: 1.5em 0 1em 10px; }
.top-section02 p.toph4 { width: auto; color: #f3849d; font-weight: bold; margin: 1.5em 0 1em 10px; }

.top-section02 div {}

.top-section02 div p { font-size: 120%; line-height: 1.5; margin: 0 0 1em 10px; }

.top-section02 div.top-popularity { float: right; background: url(../images/top_popularity_bg.gif) 0 0 repeat-y; width: 231px; margin: 0 0 0 10px; border: solid 2px #fcc; }
*html .top-section02 div.top-popularity { width: 235px; margin-left: 5px; }
.top-section02 div.top-popularity p { font-size: 120%; line-height: 1.3; margin: 0 0 10px 10px; }
.top-section02 div.top-popularity h3 { width: 231px; height: 39px; margin: 0; }

.bn-box { background-position: 0 0; background-repeat: no-repeat; width: 660px; }
*html .bn-box { width: 670px; }

.bn-box1 { background-image: url(../images/bn_box_1_bg.gif); height: 186px; padding: 9px 0 0 10px; margin: 0 0 12px; }
*html .bn-box1 { height: 195px; }
.bn-box2 { background-image: url(../images/bn_box_2_bg.gif); height: 97px; padding: 25px 0 0 10px; }
*html .bn-box1 { height: 122px; }

.bn-box ul {}
.bn-box ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.bn-box ul { display: inline-block; }
/* Hides from IE-mac \*/
* html .bn-box ul { height: 1%; }
.bn-box ul { display: block; }
/* End hide from IE-mac */
.bn-box ul li { float: left; margin: 0 2px 2px 0; }


/* under
------------------------------------------------------------------------*/

/* common */

p.topic-path { padding: 6px 0 5px 9px; margin-bottom:20px; background-color:#F4F2EC;}

.conBox {
	line-height: 1.5;
	margin: 0 0 20px;
}
.conBox.btm{ margin-bottom:0;}
.conBox.btm10{ margin-bottom:10px;}

.conBox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.conBox { display: inline-block; }
/* Hides from IE-mac \*/
* html .conBox { height: 1%; }
.conBox { display: block; }
/* End hide from IE-mac */

.conBox p{ padding:0 10px 0 10px;}
.conBox p.imgR{ float:right; border:2px solid #E6E2D5; padding:5px; margin-left:20px;}
.conBox p.imgR.bno{ border:0; padding-right:30px;}

.conBox ul { padding: 0 10px 5px; } 
.conBox ul li {
	background: url(../images/icon_m_01.gif) 0 5px no-repeat;
	padding-left: 10px;
	margin: 0 0 5px;
}

.under .link-box1{ width:485px; padding-left:10px; margin-bottom:25px;}
.under .link-box1.btm{ margin-bottom:0;}
.under .link-box1 p.txt{ color:#F2849D; font-weight:bold; padding-top:35px;}

.under .link-box1 img{ float:right;}

.under .link-box1:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.under .link-box1 { display: inline-block; }
/* Hides from IE-mac \*/
* html .under .link-box1 { height: 1%; }
.under .link-box1 { display: block; }
/* End hide from IE-mac */

.under .page-top{ text-align:right; margin-bottom:0;}

.under p.sttl{ color:#F2849D; font-weight:bold;}

.under .bnTxt-box{ padding:8px 0 10px 75px;}
.under .bnTxt-box p{ width:186px; float:left;}
.under .bnTxt-box p.pr{ margin-right:140px;}

.under .bnTxt-box:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.under .bnTxt-box { display: inline-block; }
/* Hides from IE-mac \*/
* html .under .bnTxt-box { height: 1%; }
.under .bnTxt-box { display: block; }
/* End hide from IE-mac */

table {
	font-size: 120%;
	line-height: 1.5;
	border-top: solid 1px;
	border-left: solid 1px;
	border-color: #E6E2D5;
	border-collapse: collapse;
	background:#FFF;
	margin-left:9px;
}

table th ,
table td {
	text-align: left;
	vertical-align: top;
	padding: 7px 7px;
	border-right: solid 1px;
	border-bottom: solid 1px;
	border-color: #E6E2D5;	
}

table th { color:#665D52; background: #F4F2EC; font-weight: bold; vertical-align: middle; }


.item-Box { padding: 0 0 35px; }
.item-Box:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.item-Box { display: inline-block; }
/* Hides from IE-mac \*/
* html .item-Box { height: 1%; }
.item-Box { display: block; }
/* End hide from IE-mac */
.item-Box h4 {
	padding:2px 0 10px 30px;
	font-weight:bold;
	margin: 0 0 10px;
	background:url(../images/under_h4_2.gif) 0 100% no-repeat;
}
.item-Box dl { width: 228px; float: left; }
.item-Box dl dt { margin: 0 0 5px;  border:2px solid #E6E2D5; padding:5px;}
.item-Box div { width: 422px; float: right; }
.item-Box table { width: 422px; margin: 0; }
.item-Box table th { width: 15%; }
.item-Box table td span.off { color: #C00; font-size: 120%; font-weight: bold; }
.item-Box table td span.line { text-decoration:line-through; }
.item-Box table td ul li{ background:url(../images/icon_m_01.gif) 3px 6px no-repeat; padding-left:14px;}

ul.lo-nav { background: url(../images/line_01.gif) 0 100% repeat-x; padding: 0 0 20px; margin: 0 0 30px 10px; }
ul.lo-nav:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
ul.lo-nav { display: inline-block; }
/* Hides from IE-mac \*/
* html ul.lo-nav { height: 1%; }
ul.lo-nav { display: block; }
/* End hide from IE-mac */
ul.lo-nav li {
	background: url(../images/icon_a_01.gif) 0 2px no-repeat;
	width: 305px;
	float: left;
	padding-left: 15px;
	margin: 0 0 10px 10px;
	display: inline;
}

/*----- 02 sticking -------------------------------------------------------*/

.under .conBox .l-box{ width:228px; float:left; padding:0 10px 0 10px;}
.under .conBox .l-box p{ border:2px solid #E6E2D5; padding:5px;}
.under .conBox .r-box{ width:412px; float:left;}


/*----- 03 mainte -------------------------------------------------------*/

.under .mainte .mainte-box{ margin-bottom:20px; background:url(../images/mainte_07.gif) 0 0 repeat-y;}
.under .mainte .mainte-box dl{ width:325px; float:left; margin-right:20px; min-height:155px; border-bottom:1px solid #E6E2D5;}
*html .under .mainte .mainte-box dl { height: 155px; }
.under .mainte .mainte-box dl.dlr{ margin-right:0;}
.under .mainte .mainte-box dl dd{ padding:10px 10px 0 15px;}

.under .mainte .mainte-box:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.under .mainte .mainte-box { display: inline-block; }
/* Hides from IE-mac \*/
* html .mainte .under .mainte-box { height: 1%; }
.under .mainte { display: block; }
/* End hide from IE-mac */


/*----- 04 popular -------------------------------------------------------*/

.under .popular h4{
	padding:2px 0 10px 30px;
	font-weight:bold;
	margin: 0 0 10px;
}
.under .popular h4.rank1{background:url(../images/under_h4_3.gif) 0 100% no-repeat;}
.under .popular h4.rank1 span{ color:#FF6600;}

.under .popular h4.rank2{background:url(../images/under_h4_4.gif) 0 100% no-repeat;}
.under .popular h4.rank2 span{ color:#666;}
.under .popular h4.rank2.long{background:url(../images/under_h4_4_a.gif) 0 100% no-repeat;}

.under .popular h4.rank3{background:url(../images/under_h4_5.gif) 0 100% no-repeat;}
.under .popular h4.rank3 span{ color:#996600;}


/*----- 09 faq -------------------------------------------------------*/

.under .faq-box dl{
	margin-bottom:20px;
	background: url(../images/s_navi_line_01.gif) 0 100% repeat-x #fff;
}
.under .faq-box dl.btm{ background:none;}

.under .faq-box dl dt{ margin-bottom:10px;}
.under .faq-box dl dd{
	padding:9px 0 15px 40px;
	background:url(../images/faq_08.gif) 0 0 no-repeat;
}

/*----- 10 voice -------------------------------------------------------*/

.under .voiceBox { padding: 0 0 20px; }

.under .voiceBox dl {
	background: url(../images/voice_bg.gif);
	padding: 15px 20px 15px 40px;
	margin: 0 10px 25px 0;
}

.under .voiceBox dl dt { margin: 0 0 10px; }

/*----- 11 order -------------------------------------------------------*/

.order .conBox table { margin: 0 0 10px 10px; width: auto; }
.order .conBox table th.center { text-align: center; }
.order .conBox table td.center { text-align: center; }
.order .conBox table td.right { text-align: right; }
.order table td { vertical-align: middle; }

.order .conBox .bold { font-weight: bold; }
.order .conBox p.bold { color:#F3819B; margin: 0 0 5px; }

.order .conBox dl { margin-left: 10px; }
.order .conBox dl dt { font-weight: bold; }
.order .conBox dl dd { margin: 0 0 10px; }

/*----- 12 inquiry -----------------------------------------------------*/

.inquiry .conBox p span { color: #c00; }
.inquiry table { width: 660px; margin-bottom: 30px; }
.inquiry table th { width: 30%; vertical-align: middle; }
.inquiry table th ,
.inquiry table td {}
.inquiry table textarea { width: 420px; }

.inquiry table input { max-width: 400px; }
.inquiry table input { width: 300px; }
.inquiry table ol input { width: auto; }

.inquiry select { font-size: 12px; }

span#fmail_title_default,
span#fmail_title_confirm,
span#fmail_title_error,
span#fmail_title_thanks {
	width: 670px;
	height: 100px;
}

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

.company table { width: 660px; margin-bottom: 40px; }
.company table th { width: 24%; }