@charset "Shift_JIS";

/* 共通部分 */
*{
    margin:0px;
    padding:0px;
}

html {
    height: 100%;
}

body {
    height: 100%;
    overflow-y:visible;
    width:778px;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
    color:#FFF;
    background-image: url("../images/bg_01.jpg");
    background-position: center;
    font-family: "ＭＳ Ｐゴシック", Osaka, Verdana, Arial, Helvetica, sans-serif;
}

img {
    border:0px;
    margin:none;
    margin:0px;
}

div#container {
    position:relative;
    width;778px;
    height:100%;
    padding:0;
    min-height: 100%;
    background-image: url("../images/bg_02.gif");
    background-position: center;
}

body > #container {
    height: auto;
}

div#main {
    width:778px;
    padding-bottom:75px;
    _height: 50%;
    overflow:auto;
    _overflow:visible;
}

.button {
    width:150px;
}

/***************************************************
ヘッダー部分（2種類有り）
・トップページ　：top_header
・その他のページ：others_header
****************************************************/

#top_header {
  background: #FFF;
  padding-bottom:10px;
}

#top_header .top   {
  background-image: url(../images/header_image_1.jpg);
  width: 778px;
  height: 58px;
}
#top_header .menu  {
  width: 778px;
  height: 44px;
}
#top_header .image {
  width: 778px;
  height: 123px;

}


/***************************************************
幅全体のコンテンツ
****************************************************/

#full {
  width: 776px;
  padding-top:   10px;
  text-align: center;
}

#full .content {
  width: 754px;
  margin: 0 auto 20px auto;
  text-align: center;
  color:#676767;
}

#full .content .title {
  background-image: url(../images/banner_full.jpg);
  text-align:left;
  width: 754px;
  height: 24px;
  line-height: 24px;
  vertical-align:middle;
  text-indent: 20px;
  font-weight:bold;
  margin-bottom:10px;
  color:#676767;

}

#full .content .caption {
  text-align:left;
  line-height: 18px;
  padding:0 5px 0px 5px;
  margin-bottom:10px;
  color:#676767;
}

#full .content .faq {
  margin-bottom:20px;
}

#full .content .faq .outline {
  background-image: url(../images/point_arrow_3.jpg);
  background-position:5px;
  background-repeat:no-repeat;
  width: 754px;
  height: 15px;
  line-height: 15px;
  vertical-align:middle;
  text-indent: 23px;
  background-repeat:no-repeat;
  margin-bottom:5px;
  text-align:left;
}

#full .content .faq .detail {
  width: 754px;
  height: 15px;
  line-height: 15px;
  vertical-align:middle;
  text-indent: 23px;
  background-repeat:no-repeat;
  margin-bottom:5px;
  text-align:left;
}

#full .content .qanda {
  padding-bottom:5px;
  margin-bottom:15px;
  border-bottom:dotted 1px #ccc;
}

#full .content .qanda .question {
  background-image: url(../images/question.jpg);
  background-position:5px 0;
  background-repeat:no-repeat;
  width: 734px;
  height: 18px;
  line-height: 18px;
  vertical-align:bottom;
  text-indent: 28px;
  background-repeat:no-repeat;
  margin:0 10px 10px 10px;
  text-align:left;
}

#full .content .qanda .answer {
  background-image: url(../images/answer.jpg);
  background-position:5px 0;
  background-repeat:no-repeat;
  width: 734px;
  line-height: 20px;
  vertical-align:bottom;
  text-indent: 28px;
  background-repeat:no-repeat;
  margin:0 10px 10px 10px;
  text-align:left;
  overflow-auto;
}


#full .content .text {
  width: 632px;
  padding:10px 25px 10px 25px;
  text-align: left;

}

.line {
  margin:15px 0 0 0;
}

.banner {
  margin:10px 0 0 0;
}


/***************************************************
幅半分のコンテンツ
****************************************************/

#harf {
  width: 388px;
  padding-top:   10px;
  text-align: center;
  float: left;
}

#harf .content {
  width: 366px;
  margin: 0 auto 20px auto;
  text-align: center;
  color:#777777;
}

#harf .content .title {
  background-image: url(../images/banner_harf.jpg);
  text-align:left;
  width: 366px;
  height: 24px;
  line-height: 24px;
  vertical-align:middle;
  text-indent: 20px;
  font-weight:bold;
  margin-bottom:10px;
  color:#676767;
}

#harf .content .caption {
  text-align:left;
  line-height: 18px;
  padding:0 5px 0px 5px;
  margin-bottom:10px;
}

#harf .content .sub .title {
  background-image: url(../images/point_arrow_2.jpg);
  background-position:3px;
  background-repeat:no-repeat;
  width: 366px;
  height: 15px;
  line-height: 15px;
  vertical-align:middle;
  text-indent: 23px;
  font-weight:bold;
  background-repeat:no-repeat;
  margin-bottom:5px;
}

#harf .content .sub .caption {
  text-align:left;
  line-height: 18px;
  padding:0 5px 0px 23px;
  margin-bottom:10px;
}

#harf .content .sub .caption2 {
  background-image: url(../images/point_arrow_3.jpg);
  background-position:25px;
  background-repeat:no-repeat;
  width: 366px;
  height: 15px;
  line-height: 15px;
  vertical-align:middle;
  text-indent: 43px;
  font-weight:bold;
  background-repeat:no-repeat;
  margin-bottom:5px;
  text-align:left;
}

#harf .content .text {
  width: 316px;
  padding:10px 25px 10px 25px;
  text-align: left;

}

.line {
  margin:15px 0 0 0;
}

.banner {
  margin:10px 0 0 0;
}

/***************************************************
フッター部分
****************************************************/

#footer {
  height:50px;
  width: 778px;
  background: #4E4E4E;
  position:absolute;
  bottom:0px;
}

#footer .copyright {
  position:absolute;
  right:15px;
  top:10px;
  color:#FFF;
}













/***************************************************
ご利用までの流れ
****************************************************/
#harf .content .flow {
  width:366px;
  font-size:12px;
  margin-bottom: 10px;
  overflow:auto;
  background-image: url(../images/flow_down.jpg);
  background-position:bottom;
  background-repeat:no-repeat;
}

#harf .content .step {
  width:346px;
  font-size:12px;
  margin:0 10px 10px 10px;
  overflow:auto;
}

#harf .content .flow .step .left {

  background-position:5px 1px;
  background-repeat:no-repeat;
  width: 70px;
  line-height: 16px;
  vertical-align:middle;
  font-weight:bold;
  background-repeat:no-repeat;
  float:left;
text-align:left;
}

#harf .content .flow .step .right {
  float:left;
  width:256px;
  line-height: 16px;
text-align:left;
}






/***************************************************
ニュースリリース
****************************************************/
#harf .content .release {
  width:366px;
  font-size:12px;
  margin-bottom: 10px;
}
#harf .content .release .white { 
  background: #FFF;
}
#harf .content .release .gray  { 
  background: #F4F4F4;
}

#harf .content .date {
  width: 100px;
  height: 22px;
  padding-left: 10px;
  border-right: dashed 1px #949494;
  text-align: left;
}

#harf .content .description {
  padding-left:25px;
  background-image: url(../images/point_arrow.jpg);
  background-position:10px 41%;
  _background-position:10px 45%;
  background-repeat:no-repeat;
  text-align: left;
}


/***************************************************
料金体系
****************************************************/
#harf .content .charge {
  width:366px;
  font-size:12px;
  margin-bottom: 10px;
  border-collapse: collapse; 
}

#harf .content .charge th {
  background: #72B831;
  border: solid 1px #ccc;
  padding: 5px;
  color: #eee;
}

#harf .content .charge td {
  border: solid 1px #ccc;
  padding: 5px 50px; 5px 5px;
  text-align:center;
  text-align:right;
}


#harf .content .charge .white { 
  background: #FFF;
}
#harf .content .charge .gray  { 
  background: #F4F4F4;
}


/***************************************************
申し込み
****************************************************/
#full .content .trial {
  width:734px;
  font-size:12px;
  border-collapse: collapse;
  margin:10px auto 10px auto;
}

#full .content .trial th {
  width: 244px;
  background: #72B831;
  border:solid 1px #FFF;
  padding-left:10px;
  text-align:left;
  color: #eee;
  padding: 5px;
}

#full .content .trial td {
  width: 480px;
  padding:5px 0 5px 10px;
  text-align: left;
  padding: 5px;
}

#full .content .kiyaku {
  line-height:18px;
  padding:10px;
  border:solid 1px #ccc;
  width:534px;
  height:250px;
  overflow:scroll;
  text-align:left;
  margin:20px auto 20px auto;
}

#full .content form .text_150 {
  width: 150px;
}

#full .content form .text_300 {
  width: 300px;
}

#full .content form .text_450 {
  width: 450px;
}

#full .content form .textarea_450_200 {
  width: 450px;
  height: 200px;
}


#full .content .description input {
  width: 200px;
  font-size:12px;
  padding:1px;
}

#full .content .description textarea {
  width: 300px;
  height: 100px;
  font-size:12px;
  padding:2px;
}

#full .content .button {
  margin-top: 20px;
}

.faq a:link    { color:#676767 }
.faq a:visited { color:#676767 }
.faq a:active  { color:#676767 }
.faq a:hover   { color:#EE8911 }