@charset "UTF-8";

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

style.css

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

/* パンくず
------------------------------------------- */
#breadcrumb {
  margin: 0 0 20px;
}
#breadcrumb ul {
  text-align: right;
}
#breadcrumb ul li {
  float: right;
  font-size: 85%;
  margin-left: 20px;
}
#breadcrumb ul li a {
  padding-left: 25px;
  line-height: 20px;
  background: url(../img/common/bc_bg.png) no-repeat left center;
}

/* ページトップ
------------------------------------------- */
.p_lead {
  margin: 0 0 30px;
}
.basic_lead { background-color: #3bb2c6;}
.logo_lead { background-color: #fba92b;}
.trade_lead { background-color: #56be8e;}
.total_lead { background-color: #3b97c6;}

.p_lead .comp {
  display: table-cell;
  height: 102px;
  padding: 0 30px;
  vertical-align: middle;
  width: 710px;
  background-image: url();
  background-position: 613px center;
  background-repeat: no-repeat;
}
.p_lead .comp_ttl {
  color: #fff;
  line-height: 1.4;
  font-size: 139%;
  font-weight: bold;
}
.p_lead .comp_ttl span {
  font-size: 123.1%;
}

/* 価格
------------------------------------------- */
.price {
  font-size: 146.5%;
  font-weight: bold;
}
.price .number {
  font-size: 123.1%;
  color: #fd409e;
}
.price .unit {
  font-size: 77%;
}
.price .tax {
  font-size: 69%;
  font-weight: normal;
}

/* 上下ラインボックス（お問い合わせ）
------------------------------------------- */
.pinch {
  border-top: 1px solid #9acdd6;
  border-bottom: 1px solid #9acdd6;
  background: #f9f9f9;
}
.contact_box {
  margin: 0 0 60px;
}
.contact_ttl {
  margin: 0 0 10px;
  line-height: 1.4;
  font-size: 139%;
  font-weight: bold;
  text-align: center;
}
.contact_list li {
  float: left;
  padding: 10px 0 0;
}
.contact_list .free {
  margin: 0 27px 0 0;
  width: 224px;
}
.contact_list .usual {
  padding: 0;
  width: 186px;
}
.contact_list .contact_btn {
  float: right;
  width: 215px;
}
.contact_list .contact_btn a {
  background: #2e90a1;
}

/* ベタ塗り
------------------------------------------- */
.clip {
  margin: 0 0 20px;
  text-align: center;
}
.fill {
  padding: 30px;
  margin: 0 0 30px;
  background: #f9f9f9;
}

/* 完了までの流れ（簡易）
------------------------------------------- */
.order_flow {
  color: #3bb2c6;
  font-weight: bold;
}
.order_flow li {
  padding: 0 0 0 30px;
  margin: 0 0 10px;
  line-height: 22px;
}
.order_flow .flow1 { background: url(../img/service/flow1.png) no-repeat left center;}
.order_flow .flow2 { background: url(../img/service/flow2.png) no-repeat left center;}
.order_flow .flow3 { background: url(../img/service/flow3.png) no-repeat left center;}
.order_flow .flow4 { background: url(../img/service/flow4.png) no-repeat left center;}
.order_flow .flow5 { background: url(../img/service/flow5.png) no-repeat left center;}
.order_flow .flow6 { background: url(../img/service/flow6.png) no-repeat left center;}
.order_flow .flow7 { background: url(../img/service/flow7.png) no-repeat left center;}
.order_flow .flow8 { background: url(../img/service/flow8.png) no-repeat left center;}
.order_flow .flow9 { background: url(../img/service/flow9.png) no-repeat left center;}
.order_flow .flow10 { background: url(../img/service/flow10.png) no-repeat left center;}

/* 完了までの流れ（詳細）
------------------------------------------- */
#step .step_box {
  padding: 0 0 14px;
  margin: 0 0 6px;
  background: url(../img/service/step_arrow.png) no-repeat 98px bottom;
}
#step .step_box.last_box {
  margin: 0 0 20px;
  background: none;
}
#step .step_ex {
  float: left;
  width: 210px;
  height: 56px;
  border: 3px solid #3bb2c6;
  background-color: #3bb2c6;
  background-repeat: no-repeat;
}
#step .step_name {
  padding: 0 0 0 75px;
  color: #fff;
  font-weight: bold;
  font-size: 116%;
}
#step .adjust {
  display: table-cell;
  vertical-align: middle;
  height: 56px;
}
#step .step_desc {
  float: left;
  width: 488px;
  font-size: 93%;
  border: 3px solid #fff;
}
#step .step_txt {
  padding: 0 0 0 16px;
}
#step #step01 .step_ex { background-image: url(../img/service/step1.png);}
#step #step02 .step_ex { background-image: url(../img/service/step2.png);}
#step #step03 .step_ex { background-image: url(../img/service/step3.png);}
#step #step04 .step_ex { background-image: url(../img/service/step4.png);}
#step #step05 .step_ex { background-image: url(../img/service/step5.png);}
#step #step06 .step_ex { background-image: url(../img/service/step6.png);}
#step #step07 .step_ex { background-image: url(../img/service/step7.png);}
#step #step08 .step_ex { background-image: url(../img/service/step8.png);}

/* 特徴
------------------------------------------- */
#character .chara_box {
  background: #f7fafb url(../img/service/solution.png) no-repeat scroll 620px 70px;
  border: 3px solid #d9d9d9;
  border-radius: 3px;
  margin: 0 0 30px;
  position: relative;
}
#character .chara_box .ribbon {
  left: 18px;
  position: absolute;
  top: -3px;
}
#character .chara_box .inner {
  padding: 15px 20px 10px 60px;
}
#character .chara_box .ttl {
  padding: 0 0 5px;
  margin: 0 0 10px;
  font-size: 139%;
  font-weight: bold;
  background: url(../img/common/dotted_cle3.png) repeat-x left bottom;
}
#character .chara_box .inner .txt {
  margin: 0 0 15px;
}
#character .chara_box .inner .txt p {
  margin: 0 0 10px;
}

/* 特典
------------------------------------------- */
#favor .and {
  margin: 0 0 10px;
}
#favor .ttl {
  margin: 0 0 17px;
  position: relative;
}
#favor .ttl .favor_txt {
  left: 505px;
  position: absolute;
  top: -4px;
}
.favor_box {;
  border: 1px dashed #7fc5ed;
  background: #f5fcff;
  margin: 0 0 25px;
}
.favor_box .inner {
  padding: 20px 20px 10px;
}
.favor_box .favor_left {
  float: left;
}
.favor_box .favor_right {
  float: right;
}
.favor_box .txt {
  width: 395px;
}
.favor_box .illust {
  width: 214px;
}
.favor_box .txt .ttl {
  margin: 0 0 15px;
  padding: 0 0 15px;
  background: url(../img/common/dotted_cle3.png) repeat-x left bottom;
}
.favor_box .txt .favor_h {
  float: left;
  margin: 0 10px 0 0;
  width: 44px;
}
.favor_box .favor_copy {
  float: left;
  font-size: 139%;
  font-weight: bold;
  line-height: 1.4;
  width: 340px;
  padding: 5px 0 0;
}
.favor_box .txt p {
  margin: 0 0 10px;
  font-size: 93%;
}
#favor .col2 {
  float: left;
  margin: 0 20px 25px 0;
  width: 343px;
}
#favor .col2 .txt {
  width: 100%;
}
#favor .col2 .txt .favor_copy {
  padding: 8px 0 0;
  font-size: 116%;
  width: 240px;
}
#favor .col2 .txt .ttl {
  background: none;
  margin: 0;
  padding: 0;
}
#favor #favor01 .illust {
  padding: 25px 15px 0 0;
}
#favor #favor02 .illust {
  padding: 55px 15px 0 20px;
}
#favor #favor03 .illust {
  padding: 25px 10px 15px 0;
}
#favor #favor04 .illust {
  padding: 30px 0 10px 15px;
}
#favor #favor05 .illust {
  padding: 67px 20px 0 0;
}

.layout .desc {
  float: left;
  width: 420px;
}
.layout .desc p {
  margin: 0 0 10px;
}
.layout .insert {
  float: right;
  width: 260px;
}