@charset "UTF-8";
/*==================================================
#
==================================================*/
.tab_box{
  max-width: 1060px;
  width: 100%;
  margin: 0 auto;
}
/*タブ切り替え全体のスタイル*/
.tabs {
  background-color: #fff;
}
.boderbox{
  border: 1px solid #000;
}
/*タブのスタイル*/
.tab_item {
  width: 50%;
  padding: 1em 0;
  border-bottom: 3px solid #004ea2;
  background-color: #d9d9d9;
  border-radius: 15px 15px 0 0;
  font-size: 1.6em;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  cursor:pointer;
  opacity: 0.75;
  border-bottom:2px solid #565656;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #004ea2;
  color: #fff;
}
.tabs input:checked + .tab_item span.bb2{
  border-bottom:2px solid #fff;
}
.tabs input:checked + .tab_item span.bb2::before{
  content:"▶";
  margin: 0 0.2em 0 0;
}
.flow-unit:first-child {
    border-radius: 0px 0px 0 0;
}
.flow-ttl__circle.typ2{
    background: #1b982a;
}
.flow-tel-btn__02 span.cell{
    font-size: 1rem;
    display: inline-block;
}
.flow-tel-btn__02{
  background: none;
  padding: 0 0 0 0;
  margin: 10px 0;
}
.flow-tel-btn__02::before {
  content: url(/assets/img/new_customer/flow/ico-free.svg);
}
a span.flow-web-btn__01:hover{
  color: #000;
}
.m-btn.-cta-o {
    width: 100%;
}
.flow-unit:last-child {
    padding: 60px 80px 40px 80px;
}
br.sp{
  display: none;
}
@media (max-width: 767px){
    .tab_box{
    width: 90%;
    }
    .flow-unit:last-child {
        padding: 40px 20px 40px 20px;
    }
    br.sp{
    display: block;
    }
    .tabs input:checked + .tab_item span.bb2::before{
    display: none;
    }
}
.flow-contents {
        margin-top: 12px;
        padding-top: 49px;
}
.m-section-header p.m-section-header__txt{
          max-width: 1060px;
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 767px) {
    .flow-contents {
        margin-top: 8px;
        padding-top: 43px;
    }
    .m-section-header p.m-section-header__txt{
        width: 90%;
        .pc_br{
        display:none;
        }
    }
}