@charset "utf-8";
/*============================================

flow.css

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

/* リード文
------------------------------------------- */
.flow_lead {
  font-size: 1.4rem;
  margin: 1em 0;
}
.flow_lead.caution {
  background: url(../img/flow/flow_ico_caution.png) no-repeat 0 0 ;
  color: #ff6f64;
  font-size: 1.2rem;
  font-weight: bold;
  padding-left: 25px;
}

/* 流れ
------------------------------------------- */
.flow_block {
  border-radius: 6px;
  border: #ccc 3px solid;
  margin-top: 40px;
  position: relative;
}
.flow_block:before {
  background: url(../img/flow/flow_block_arw.png) no-repeat 50% 0;
  content: "";
  display: block;
  position: absolute;
  top: -43px;
  left: 318px;
  width: 74px;
  height: 40px;
}
.flow_block:first-of-type {
  margin-top: 0;
}
.flow_block:first-of-type:before {
  height: 0;
}
.flow_block_ttl {
  background: #f3f3f3;
  color: #4ea6cb;
  font-size: 1.7rem;
  padding: 15px;
}
.campaign_atc {
  color: #f9527e;
  font-size: 1.4rem;
}
.flow_inner {
  padding: 15px 15px 30px 15px;
}
.flow_txt,
.flow_img {
  box-sizing: border-box;
  display: table-cell;
}
.flow_txt {
  font-size: 1.4rem;
  vertical-align: top;
}
.flow_txt a { text-decoration: underline; }
.flow_img {
  padding-left: 30px;
  text-align: center;
  vertical-align: middle;
  width: 238px;
}
#motion .flow_inner {
  display: table;
  width: 100%;
}
#motion .flow_txt {
  width: 60%;
}
#motion .flow_img {
  width: 40%;
}
.flow_img.npb {
  vertical-align: bottom;
}
.flow_img.npb img {
  margin-bottom: -30px;
}
.flow_img_notice {
  background: url(../img/flow/flow_block_notice.png) no-repeat 50% 100%;
  color: #e4597a;
}
.flow_block_note {
  font-size: 85%;
  padding-top: .5em;
}
.mt1 { margin-top: 1em; }




/* ご注意ください
------------------------------------------- */
.flow_caution_block {
  border-bottom: #ff6f64 1px solid;
  border-right: #ff6f64 1px solid;
  border-top: #ff6f64 1px solid;
  margin: 40px 0;
}
.flow_caution_ttl {
  background: #ff6f64;
  color: #fff;
  display: table-cell;
  font-size: 1.5rem;
  padding: 0 20px;
  vertical-align: middle;
  width: 7em;
}
.exc_ico {
  background: url(../img/i_essential.png) no-repeat 50% 0;
  display: inline-block;
  padding-top: 30px;
}
.flow_caution_body {
  background: #f6f6f6;
  display: table-cell;
  padding: 20px;
  vertical-align: top;
}


/* ボタン
------------------------------------------- */
.flow_anchor{
  margin: 30px 0;
}
.flow_anchor_price,
.flow_anchor_order {
  float: left;
  font-size: 1.6rem;
  text-align: center;
  width: 345px;
}
.flow_anchor_price {
  margin-right: 20px;
}
.flow_anchor_price a,
.flow_anchor_order a {
  display: block!important;
  padding: 10px 0!important;
}
.flow_anchor_price span {
  background-position: 100% 50%;
  background-repeat: no-repeat;
  padding-right: 30px;
}


/* お見積り
------------------------------------------- */
.flow_estimation {
  background: #3bc69a url(../img/flow/arw_estimation.png) no-repeat 670px 50%;
  color: #fff!important;
  display: block;
  padding: 15px 30px;
}
.est_ico {
  background: url(../img/flow/ico_estimation.png) no-repeat 0 50%;
  display: block;
  padding: 10px 0 10px 70px;
}
.flow_estimation_ttl {
  display: block;
  font-size: 1.9rem;
}
.flow_estimation_note {
  display: block;
  font-size: 1rem;
}

/* ロゴデザイン
------------------------------------------- */
#logo .flow_caution_block {
  margin-top: 20px;
}
/* flow_rec */
.img_ico { background: url(../img/flow/ico_image.png) no-repeat 0 50%; padding-top: 3px!important; padding-bottom: 3px!important; }
.flow_rec_lead { margin: 30px auto; }
.flow_rec_body {
  float: left;
  width: 435px;  
}
.flow_rec_body p {
  font-size: 1.4rem;
  margin: 1em 0;
}
.flow_rec_pic {
  float: right;
  width: 228px;  
}
.flow_rec_list {
  margin-top: 20px;
}
.flow_rec_list li {
  float: left;
  margin: 0 18px 18px 0;
  width: 164px;
}
.flow_rec_list li:nth-of-type(4n) { margin-right: 0; }
.flow_rec_list li img {
  width: 162px;
  height: auto;
}
/* btn */
.flow_rec_more {
  font-size: 1.6rem;
  margin: 20px auto;
  text-align: center;
  width: 30em;
}
.flow_rec_more a {
  background: #5fba3b;
  color: #fff;
  display: block;
  padding: 13px 70px 13px 40px;  
}
.flow_rec_more a span {
  display: inline-block;
  padding: 0 0 0 27px;
  position: relative;  
}
.flow_rec_more a span::after {
  background: url(../../../_common/pc/img/arw_wc_cut.png) no-repeat scroll 100% 50%;
  content: "";
  height: 15px;
  position: absolute;
  right: -30px;
  top: 4px;
  width: 15px;
}


/* 名刺
------------------------------------------- */
#namecard .flow_anchor_price span {
  background-image: url(../../../namecard/pc/img/flow/namecard_c_arw16.png);
}


/* 封筒
------------------------------------------- */
#envelope .flow_anchor_price span {
  background-image: url(../../../envelope/pc/img/flow/envelope_c_arw16.png);
}

/* WEB
------------------------------------------- */
#web .flow_anchor_price span {
  background-image: url(../../../web/pc/img/flow/web_c_arw16.png);
}


/* パンフレット
------------------------------------------- */
#pamphlet .flow_anchor_price span {
  background-image: url(../../../pamphlet/pc/img/flow/pamphlet_c_arw16.png);
}

/* ショップカード
------------------------------------------- */
#shopcard .flow_anchor_price span {
  background-image: url(../../../shopcard/pc/img/flow/shopcard_c_arw16.png);
}


/* ポケットホルダー
------------------------------------------- */
#folder .flow_anchor_price span {
  background-image: url(../../../folder/pc/img/flow/folder_c_arw16.png);
}

/* モーションロゴ
------------------------------------------- */
#motion .flow_anchor_price span {
  background-image: url(../../../motion/pc/img/flow/motion_c_arw16.png);
}


.flow_tab {
  margin-bottom: 2rem;
  border-bottom: 2px solid #6bbf2e;
}
.flow_tab li {
  float: left;
  font-size: 1.6rem;
  text-align: center;
  width: 49%;
}
.flow_tab li a {
  color: #6bbf5e;
  border-radius: 3px 3px 0 0;
  border-left: 2px solid #6bbf2e;
  border-right: 2px solid #6bbf2e;
  border-top: 2px solid #6bbf2e;
  display: block;
  padding: 1em 0;
}
.flow_tab .active a {
  color: #fff;
  background-color: #6bbf2e;
}
.flow_tab li .tab_arw {
  display: inline-block;
  padding-right: 1.6em;
  background-image: url(../../../motion/pc/img/flow/default_arw.png);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: auto 15px;
}
.flow_tab .active .tab_arw {
  background-image: url(../../../motion/pc/img/flow/active_arw.png);
}
.flow_tab {
  padding: 0 10px;
}
.flow_tab li:last-child {
  float: right;
}
.flow_tab_box {
  display: none;
}

/* リンク
------------------------------------------- */
.flow_link {
  transition: all .3s;
  display: inline-block;
  padding: .2em .5em;
  text-decoration: none !important;
  font-weight: bold;
  color: #e86e56 !important;
  background-color: transparent;
}
.flow_link:hover {
  background-color: rgba(232, 110, 86, 0.1);
}