@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------------------------------
 ヘッダー
----------------------------------------------------------------------------------------------*/
header .header_top{ width:100%; background-color:#FFF; border-top:4px solid #a88f5b;}
header .logo{ width:250px;  float:left; }
header .logo a { display: block; padding:20px; }
header .language{ float:right; }
header .language ul{ display: table; padding: 16px;}
header .language ul li{ display: table-cell; padding: 0 4px;}
header .language ul li a{ background-color: #f7f7f7; border-radius: 4px; padding: 8px 16px; font-size:12px; color:#999;}
header .language ul li a:hover{ background-color: #a88f5b; text-decoration: none; color: #FFF;}
header .language ul li a.active{ background-color: #a88f5b; color: #FFF; }
header .top_nav{ float:right; }
header .top_nav ul{ display: table; }
header .top_nav ul li{ display: table-cell; padding :24px 0; }
header .top_nav ul li a{ display: block; font-size:12px; line-height:1; padding-right:16px; padding-left:16px; }
header .top_nav ul li a:hover{ text-decoration: none; }

@media screen and (max-width: 640px) {
  header .logo{ width:100%;  float:none; text-align:center;}
  header .logo a { padding:16px 0; }
  header .logo img{ width:160px; }
  header .language { border-bottom:1px solid #ddd; width:100%;}
  header .language ul{ text-align: center; display: block;}
  header .language ul li{ display: inline-block; }
}


/*----------------------------------------------------------------------------------------------
 フッター
----------------------------------------------------------------------------------------------*/
.footer{ background-color: #bf1a20;}
.footer ul.footer_inner{ width:1120px; margin-right:-20px; padding: 40px 0;}
.footer ul.footer_inner li{ width:260px; margin-right:20px; float:left;}
.footer ul.footer_inner li:last-child{ margin-right:0; }
.footer ul.footer_inner li ul.footer_nav li{ display: block; padding: 0; font-size:1.2rem; margin-bottom: 8px; width:100%;}
.footer ul.footer_inner li ul.footer_nav li.ttl{ font-size:1.4rem; width: 100%; border-bottom:1px solid #ccc; padding-bottom:8px; text-align: center; font-weight: bold; margin-bottom:16px;}
.footer ul.footer_inner li ul.footer_nav li.ttl a:hover{ text-decoration:none; opacity: 0.9;}

.footer_bottom{ background-color: #bf1a20; padding:8px 0; position: relative;}
.footer_bottom ul{ text-align: center; padding-bottom: 24px;}
.footer_bottom ul li{ display: inline-block; }
.footer_bottom ul li a{ color:#FFF; padding:8px 16px;}
.footer_bottom .copy{ font-size:1.1rem; text-align: center; color:#FFF;}

@media screen and (max-width: 640px) {
  .footer ul.footer_inner{ display: none; }
  .footer_bottom{ padding:8px 0; }
  .footer_bottom ul{ padding-bottom: 16px;}
  .footer_bottom ul li a{ padding:8px;}
}

/*----------------------------------------------------------------------------------------------
 トップへ戻る
----------------------------------------------------------------------------------------------*/
#btnReturnTop{ background-color: #bf1a20; top: -50px; color: #fff; font-size: 14px; right: 30px; text-align: center; position: absolute;}
.footer_bottom a#btnReturnTop{ padding:10px; display: block; }

@media screen and (max-width: 640px) {
  #btnReturnTop{ top: -34px; right:8px; }
  .footer_bottom a#btnReturnTop{ padding:8px; }
}

/*----------------------------------------------------------------------------------------------
 パンくずリスト
----------------------------------------------------------------------------------------------*/
.topic_path{ padding:16px 0; }
.breadcrumb ul{ width:1100px; margin:0 auto;}
.breadcrumb ul li{ display:inline; font-size:80%; padding-right:5px; color:#333;}
.breadcrumb ul li:after{ content:">"; padding-left: 8px;}
.breadcrumb ul li:last-child{ padding:0;}
.breadcrumb ul li:last-child:after{ content:"";}
.breadcrumb ul li a{ color:#a88f5b;}
@media screen and (max-width: 640px) {
  .topic_path{ padding:16px 0; }
  .breadcrumb ul{ width:94%; }
}
/*----------------------------------------------------------------------------------------------
 ページ送り
----------------------------------------------------------------------------------------------*/
.pagenav{ padding:40px 0 16px; position:relative; text-align:center;}
.pagenav p{ text-align:center; font-size:1.4rem; margin-bottom:8px;}
.pagenav ul{ display:inline-block; margin:0 5px;}
.pagenav ul li{ display:inline-block; float:left; border-radius: 5px; margin-right:5px; }
.pagenav ul li a,.pagenav ul li span{ display:block; padding:6px 13px; text-decoration:none; transition:0.2s; }
.pagenav ul li a:hover{ background:#a88f5b; color:#FFF; border-radius: 5px;}
.pagenav ul li.active{ border:none; background-color:#a88f5b; color:#FFF;}
.pagenav .btn{ background:#fff; color:#444; padding:0;}
.pagenav .prev.disabled{ display:none;}
.pagenav .next.disabled{ display:none;}
.pagenav .btn:hover{ background:#e8e8e8;color:#fff;}

/*----------------------------------------------------------------------------------------------
 コンテンツカラム分け
----------------------------------------------------------------------------------------------*/
.container{ width:100%; overflow: hidden;}
.container_inner{ margin: 32px 0; }
.block{ width:1100px; margin:0 auto;}
.side{ width:250px; float:left;}
.side + .main{ width:720px; float:right;}
.one_column{ width:900px; margin:0 auto;}

@media screen and (max-width: 640px) {
  .container_inner{ margin: 0 0 24px; }
  .block{ width:92%; margin:0 auto;}
  .one_column{ width:94%; margin:0 auto;}
}

/*----------------------------------------------------------------------------------------------
 TOP
----------------------------------------------------------------------------------------------*/
.mainvisual{
  width:100%;
  height:560px;
  /*background: url("../img/bk_type04.png") center center #a88f5b;*/
  position: relative;
  background: url("../img/mainvisual_bk1.jpg") center center no-repeat;
  background-size:cover;
}

.mainvisual_inner {
  position: absolute;
  top: 50%;
  z-index: 11;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.mainvisual_inner img{ width:900px; }


@media screen and (max-width: 640px) {
  .mainvisual{ height: 240px;}
  .inner img{ width: 90%; }
  }

.top_service{ padding:24px 0; }
.top_service .top_service_wrap{ width:1132px; margin-right:-32px;}
.top_service .top_service_wrap .top_service_inner{ width:534px; float:left; margin-right:32px; text-align: center;}
.top_service .top_service_wrap .top_service_inner:last-child{ margin-right:0; }
.top_service .top_service_wrap .top_service_inner .img_area{ position: relative; width:534px; color:#FFF; }
.top_service .top_service_wrap .top_service_inner h3.ttl_type02{ width:100%; position: absolute; top:170px; font-size:32px;}
.top_service .top_service_wrap .top_service_inner .desc{ position: absolute; top:250px; font-size:18px; padding:0 56px;}

.top_service_nav ul { text-align:center; padding: 24px 0;}
.top_service_nav ul li{ display: inline-block;}
.top_service_nav ul li::after{ content:"｜"; padding: 0 4px;}
.top_service_nav ul li:last-child::after{ content:none; }

.top_select{ padding: 16px 0 40px; background: url("../img/bk_type05.png");}
.top_select_inner{ margin:40px 0 0; }
.top_select_inner ul{ display:inline-block; width:100%;}
.top_select_inner ul li{ display:inline-block; padding: 3.2rem; width:32%; height:350px; min-width: 350px; margin-right:1.6rem; background-color: #f8f8f8; margin-bottom:1.6rem; vertical-align: top; text-align:center; border-radius: 50%;}
.top_select_inner ul li:nth-child(3n){ margin-right:0;}
.top_select_inner ul li .img{ width:100%; text-align: center;}
.top_select_inner ul li .img img{ width:90px;}

.news_wrap{ margin:0 auto 40px; }
/*.news{ padding: 40px 40px 0;}*/
.news ul li{ width:100%; display: table; padding:1.6rem 0; border-bottom: 1px solid #ddd;}
.news ul li p{ display: table-cell; }
.news ul li p.date{ width:180px; }
.news ul li p.date span.label{ margin: 0 16px; }

.bana ul{ display: inline-block; width:100%; margin-bottom:80px; }
.bana ul li{ display: inline-block; width:23.5%; margin-right: 1.6rem; margin-bottom: 1.6rem;}
.bana ul li:nth-child(4){ margin-right:0; }
.bana ul li img{ border:1px solid #ddd; }

.card_wrap{ background-color:#f8f8f8; }
.card_wrap ul{ display: flex; flex-wrap: wrap; padding:40px 0; }
.card_wrap ul li{ width: calc(33.333% - 19px); margin:0 24px 24px 0; display: block;}
.card_wrap ul li:nth-child(3n){ margin-right:0; }
.card_wrap ul li p{ font-size:12px; }

.top_recomennd_bana{ padding-bottom:48px;}
.top_recomennd_bana ul{ width:1122px; margin-right:-22px; }
.top_recomennd_bana ul li{ width:352px; margin-right:22px; float:left;}
.top_recomennd_bana ul li img{ margin-bottom:8px; }

@media screen and (max-width: 640px) {
  .news{ padding:0; }
  .news_wrap{ width:100%; margin:0; background-color: #FFF;}
  .news ul li p{ display: block; }
  .news ul li p.date{ margin-bottom:8px; }

  .card_wrap{ width:90%; margin:0 auto 20px;}
  .card_wrap ul li{ width:100%; margin-right:0; }
}

@media screen and (max-width: 640px) {
  .top_service{ padding:0; }
  .top_service .top_service_wrap{ width:100%; margin-right:0;}
  .top_service .top_service_wrap .top_service_inner{ width:100%; float:none; margin-right:0; ;}
  .top_service .top_service_wrap .top_service_inner .img_area{ width:100%;}
  .top_service .top_service_wrap .top_service_inner h3.ttl_type02{ top:90px; font-size:22px;}
  .top_service .top_service_wrap .top_service_inner .desc{ top:150px; font-size:14px; padding:0 24px;}

  .top_select{ padding: 16px 0 ; }
  .top_select_inner { margin:0; }
  .top_select_inner ul{ text-align:center; }
  /*.top_select_inner ul li{ width:340px; margin-right:0; height:340px;}*/

  .bana ul{ display: inline-block; width:100%; margin-bottom:40px; border-top:1px solid #eee; padding-top:40px; text-align:center;}
  .bana ul li{ width:300px; margin-right: 0; margin-bottom:16px; }

  .top_recomennd_bana{ padding: 24px 0; }
  .top_recomennd_bana ul{ width:90%; margin:0 auto;}
  .top_recomennd_bana ul li{ width:100%; margin-right:0px; margin-bottom:16px; float:none;}
  .top_recomennd_bana ul li:last-child{ margin-bottom:0; }
  .top_recomennd_bana ul li img{ margin-bottom:4px; }
}

/*----------------------------------------------------------------------------------------------
 コンテンツ共通
----------------------------------------------------------------------------------------------*/
.ttl_top{ font-size: 34px; font-weight:bold; word-break: break-all; text-align: center; padding:3.2rem 0 1.8rem;}
.ttl_top span.sub_ttl{ font-size:1.6rem; display: block; color:#a88f5b; }
.page_ttl_wrap{ position: relative; padding: 32px; background: -webkit-linear-gradient(#a88f5b, #fa5d58 , #a88f5b); text-align:center; color:#FFF; text-shadow: 2px 4px 3px rgba(0,0,0,0.3);}

.ttl_type01{ font-size: 4.0rem; font-weight:bold; word-break: break-all;}
.ttl_type01 span.sub_ttl{ font-size:1.4rem; display: block; }
.ttl_type02{ font-size: 2.2rem; font-weight:bold; word-break: break-all; padding:1.6rem 0;}
.ttl_type03{ font-size: 2.4rem; font-weight:bold; word-break: break-all; border-bottom:2px solid #a88f5b; padding-bottom:0.2rem; margin-bottom:3.2rem;}
.ttl_type04{ font-size: 2.2rem; font-weight:bold; word-break: break-all; background-color:#f2f2f2; margin-bottom: 16px; padding:16px;}
.ttl_sub{ font-size:1.8rem; text-align:center; margin-bottom: 2.4rem; }

@media screen and (max-width: 640px) {
  .page_ttl_wrap{ padding:24px 0; }
  .ttl_top{ font-size: 2.4rem;}
  .ttl_type01{ font-size: 2.4rem; font-weight:bold; word-break: break-all; padding: 0 16px;}
  .ttl_type01 span.sub_ttl{ font-size:1rem; }
  .ttl_type02{ font-size: 2.0rem; line-height:1.4;}
  .ttl_type03{ font-size: 2.0rem; }
  .ttl_type04{ font-size: 1.8rem; margin-bottom:1.6rem; padding:10px;}
  .ttl_sub{ font-size:1.6rem;}

  .subpage_sp_main{ padding-bottom: 24px; margin: 0 calc(50% - 50vw); width: 100vw;}
}

.column2{}
.column2 .column{ width:48%;}
.column2 .column:first-child{ float:left;}
.column2 .column:last-child{ float:right;}

/*----------------------------------------------------------------------------------------------
 サブページ各事業一覧（物流サービス・システム開発）
----------------------------------------------------------------------------------------------*/
.service_ttl { font-size: 2.8rem; border-bottom: solid 3px #e6e6e6; position: relative; margin-bottom: 24px; font-weight: bold;}
.service_ttl:after { position: absolute; content: " "; display: block; border-bottom: solid 3px #a88f5b; bottom: -3px; width: 20%;}
.service_main_wrap{ margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #ddd; }
.service_main_wrap .desc{ float:left; width:560px; margin-right:40px; }
.service_main_wrap .img{ float:left; width:500px; }
.service_desc{ margin-bottom: 40px; font-size:16px;}
.service_block ul { width: 1124px; margin-right:-24px; }
.service_block ul li { width:350px; float:left; margin: 0 24px 24px 0; }
.service_block ul li a:hover{ text-decoration: none; }
.service_block ul li .service_inner{ width:100%; height:230px; display: table; text-align: center; }
.service_block ul li:nth-child(3n){ margin-right: 0;  }
.service_block ul li .service_inner.logi_ser_pic1{ background:url("../img/logi_ser_pic1.jpg") center center; background-size:cover;}
.service_block ul li .service_inner.logi_ser_pic2{ background:url("../img/logi_ser_pic2.jpg") center center; background-size:cover;}
.service_block ul li .service_inner.logi_ser_pic3{ background:url("../img/logi_ser_pic3.jpg") center center; background-size:cover;}
.service_block ul li .service_inner.logi_ser_pic4{ background:url("../img/logi_ser_pic4.jpg") center center; background-size:cover;}
.service_block ul li .service_inner.logi_ser_pic5{ background:url("../img/logi_ser_pic5.jpg") center center; background-size:cover;}
.service_block ul li .service_inner.sys_ser_pic1{ height:auto;}
/*.service_block ul li .service_inner.sys_ser_pic2{ background:url("../img/sys_ser_pic2.jpg") center center; background-size:cover;}
.service_block ul li .service_inner.sys_ser_pic3{ background:url("../img/sys_ser_pic3.jpg") center center; background-size:cover;}*/
.service_block ul li .service_inner h3.service_inner_ttl{ font-size: 24px; font-weight:bold; display: table-cell; color:#FFF; vertical-align: middle; text-shadow: 3px 3px 3px #333;}
.service_block ul li .service_inner h3.service_inner_ttl:after{
  font-family: "Font Awesome 5 Free";
  content: '\f054';
  font-weight: 900;
  padding-left: 16px;
 }
.service_inner_desc{ padding: 16px; border:1px solid #ddd;}

@media screen and (max-width: 640px) {
  .service_desc{ font-size:14px;}
}

/******************************************
　サービス 詳細ページ
*******************************************/
@media screen and (min-width: 641px) {
  .content_detail .box {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 40px;
  }

  .content_detail .text {
    padding: 24px;
    border-top: 1px solid #a88f5b;
  }

  .content_detail h3 {
    font-size: 26px;
    font-weight: bold;
    padding-bottom:16px;
    line-height:1.4;
    margin: 0;
  }

  .content_detail .pict {
    width: 50%;
    max-width:550px;
    min-width:550px;
    margin-left: 3%;
  }

  .content_detail .pict img {
    width: 100%;
    height:auto;
  }

  .content_detail .box:nth-child(even) {
    flex-direction: row-reverse;
  }
  /*.content_detail .box:nth-child(even) .text {
    text-align: right;
  }*/
  .content_detail .box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 3%;
  }
}

.attention_wrap{ background-color: #f2f2f2; padding:24px;  margin-bottom:40px; }
.attention_wrap .ttl{ font-weight: bold; margin-bottom:8px;}
.attention_wrap .ttl i{ color: #a88f5b; }
.attention_wrap .desc{ font-size:12px; }
.attention_wrap .desc ul li{ margin-bottom:8px; }
.attention_wrap .desc ul li:last-child{ margin-bottom:0; }

@media screen and (max-width: 640px) {
  .content_detail{ margin-bottom: 40px; }
  .content_detail .box {
    flex-direction: column;
    padding-top:24px;
  }
  .content_detail .box:nth-child(1){
    padding-top:0;
  }
  .content_detail .box:nth-child(even) {
    flex-direction: column;
    padding-top:24px;
  }
  .content_detail .text {
    border-top: 1px solid #a88f5b;
    padding: 16px 0;
  }
  .content_detail h3 {
    font-size: 20px;
    font-weight: bold;
    padding-bottom:8px;
    margin: 0;
    line-height: 1.4
  }
  /*.content_detail .box:nth-child(even) .text {
    text-align: center;
  }*/
  .content_detail .pict {
    width:100%;
    margin-left: 0;
    text-align: center;
  }
  .content_detail .box:nth-child(even) .pict {
    margin-left: 0;
    margin-right: 0%;
  }
  .content_detail .pict img {
    width:100%;
    height:auto;
  }
}

.service_merit{ padding:48px 0 56px; background: url("../img/bk_type05.png"); margin: 0 calc(50% - 50vw); width: 100vw;}
.service_merit h3{ font-size: 34px; font-weight: bold; padding-bottom: 48px; text-align: center;}
.service_merit ul{ width:1122px; margin-right:-22px; }
.service_merit ul li{ width:352px; margin-right:22px; float:left; position: relative; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box;}
.service_merit ul li .merit_badge{ width:80px; max-height:80px; background-color: #a88f5b; position: absolute; border-radius: 50%; top:-20px; left:-10px; color:#FFF; text-align: center; padding:16px 0; font-weight: bold;}
.service_merit ul li .merit_badge span.point{ line-height: 1.1; letter-spacing: 0.4px; display: block; padding: 6px 0 3px;}
.service_merit ul li .merit_badge span.no{ display: block; font-size: 28px; margin-top:-8px;}
.service_merit ul li .body{ padding:24px; box-sizing: border-box;}
.service_merit ul li .body .desc{ margin-left:60px; }
.service_merit ul li .img{ background-color: #CCC; }

.service_wrap .content_detail_ttl{ font-size: 2.6rem; font-weight: bold; margin-bottom: 1.6rem; line-height: 1.4; border-top: 2px solid #a88f5b; padding-top: 2.4rem;}

@media screen and (max-width: 640px) {
  .service_main_wrap{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
  .service_main_wrap .desc{ float:none; width:100%; margin-bottom: 24px; padding-bottom:16px; border-bottom: solid 3px #e6e6e6;}
  .service_ttl { font-size: 1.86rem; padding-bottom: 8px; margin-bottom: 16px; }
  .service_block ul { width: 100%; }
  .service_block ul li { width:100%; height:auto; float: none;}
  .service_block ul li a:hover{ text-decoration: none; }
  .service_block ul li .service_inner{ width:100%; height:180px; display: table; text-align: center;}
  .service_block ul li:nth-child(3n){ margin-right: 0;  }
  .service_block ul li .service_inner h3.service_inner_ttl{ font-size: 24px; font-weight:bold; display: table-cell; color:#FFF; vertical-align: middle; text-shadow: 3px 3px 3px #333;}
  /*.service_inner_desc{ padding:16px 0; border-bottom:1px solid #ddd;}*/

  .service_merit{ padding:32px 0 16px; }
  .service_merit h3{ font-size: 24px; padding-bottom: 36px;}
  .service_merit ul{ width: 90%; margin:0 auto;}
  .service_merit ul li{ width:100%; margin-right:0; float:none; margin-bottom:32px;}
  .service_merit ul li .merit_badge{ width:68px; max-height:68px; top:-16px; left:-8px; padding:10px 0; }
  .service_merit ul li .merit_badge span.point{ font-size:12px;}
  .service_merit ul li .merit_badge span.no{ margin-top:-6px; font-size:24px;}
  .service_merit ul li .body{ padding:16px; }

}




/*----------------------------------------------------------------------------------------------
 ご利用料金
----------------------------------------------------------------------------------------------*/
.price_desc_wrap{ width:100%; display: table;}
.price_desc_wrap .price_desc,
.price_desc_wrap .price_img{ display: table-cell; }
.price_desc_wrap .price_desc{ padding-right:40px;}
.price_desc_wrap .price_img{ width:400px; }
.price_subttl{ font-weight:bold; font-size: 2.0rem; }

/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 56px;
  margin-bottom:80px;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #a88f5b;
  background-color: #f2f2f2;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 16px;
  clear: both;
  overflow: hidden;
}


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

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #a88f5b;
  color: #fff;
}
@media screen and (max-width: 640px) {
  .price_desc_wrap .price_desc,
  .price_desc_wrap .price_img{ display: block; }
  .price_desc_wrap .price_desc{ padding-right:0; margin-bottom:2.4rem;}
  .price_desc_wrap .price_img{ width:100%; }
  .price_subttl{ font-weight:bold; font-size: 2.0rem; }
  .tab_content{ padding:24px 0; }
  .tab_item { font-size:1.4rem;}
}

/*----------------------------------------------------------------------------------------------
 問い合わせ
----------------------------------------------------------------------------------------------*/
.contact_tel_wrap{ border:1px solid #ddd; border-radius: 5px; padding:24px 40px; margin-bottom:16px; }
.contact_tel{ font-size:3.6rem; font-weight:bold; }
.contact_tel span.day{ font-size:1.6rem; margin-left:16px;}

@media screen and (max-width: 640px) {
  .contact_tel_wrap{ line-height:1.1; text-align: center; padding:24px;}
  .contact_tel{ font-size:2.6rem;}
  .contact_tel span.day{ font-size:1.2rem; margin-left:0;}
  .contact_tel a:hover{ text-decoration:none; }
}

/*----------------------------------------------------------------------------------------------
 サービスフロー
----------------------------------------------------------------------------------------------*/
.logi_flow_wrap{ background-color: #f8f8f8; padding:40px; }
.logi_flow_wrap ul li{ width:100%; position: relative; margin-bottom:100px; padding:24px;background-color: #FFF; border: 3px solid #ddd;}
.logi_flow_wrap ul li::after{
  font-family: "Font Awesome 5 Free";
  content: '\f309';
  font-weight: 900;
  padding-right:8px;
  display: block;
  font-size: 80px;
  color: #ccc;
  padding-left:55px;
  position: absolute;
  bottom:-120px;
}
.logi_flow_wrap ul li:last-child{ margin-bottom:0; }
.logi_flow_wrap ul li:last-child:after{ content:none; }
.logi_flow{ /*display: table; */width:100%;}
.logi_flow .step_wrap,
.logi_flow .detail,
.logi_flow .img{ display: table-cell; vertical-align: middle;}
.logi_flow .step_wrap{ width:175px; border-right: 1px solid #e4e0e0;}
.logi_flow .step_wrap .step_tag{ width:150px; height:150px; border-radius:50%; position: relative; font-weight:bold; color:#FFF;display: inline-block;}
.logi_flow .step_wrap .step_tag span.step{ position: absolute; top:24px; left:30px; font-size: 3.4rem; }
.logi_flow .step_wrap .step_tag span.no{ position: absolute; top:58px; left:57px; font-size: 4.8rem;}
.logi_flow .detail{ vertical-align: top; padding:0 24px;}
.logi_flow .detail .ttl{ font-weight: bold; font-size:2.6rem;}
.logi_flow .detail .desc{ margin-bottom:16px; line-height:1.6; }
.logi_flow .detail .desc p{ margin-bottom:1.6rem; }
.logi_flow .detail .desc .link:before{
  font-family: "Font Awesome 5 Free";
  content: '\f138';
  font-weight: 900;
  padding-right:8px;
 }
.logi_flow .detail .desc .link{ margin-bottom:0; }
.logi_flow .detail .desc .link a{ text-decoration:underline;}
.logi_flow .detail .desc .link a:hover{ text-decoration:none; }
.logi_flow .img{ width:160px; text-align: right;}
.logi_flow_wrap ul li.client { border-color: #37b396; }
.logi_flow_wrap ul li.client .step_tag{ background-color: #37b396; }
.logi_flow_wrap ul li.own .step_tag{ background-color: #a88f5b; }
.logi_flow_wrap ul li.own{ border-color: #a88f5b; }
.logi_flow_wrap .mark_wrap{ margin-bottom:16px; font-size:1.4rem; line-height: 2.0;}
.logi_flow_wrap .mark{ width:50px; height:24px; display: inline-block; }
.logi_flow_wrap .mark.client{ background-color: #37b396; }
.logi_flow_wrap .mark.own{ background-color: #a88f5b; }

@media screen and (max-width: 640px) {
  .logi_flow_wrap{ padding:0; background-color:#FFF;}
  .logi_flow .step_wrap,
  .logi_flow .detail,
  .logi_flow .img{ display: inline-block; padding:0; text-align: center;}
  .logi_flow .step_wrap{ width:100%; border-right: none; margin-bottom: 1.6rem;}
  .logi_flow .img{ width:100%; }
  .logi_flow .step_wrap .step_tag{ width:100px; height:100px; border-radius:50%; position: relative; font-weight:bold; color:#FFF; }
  .logi_flow .step_wrap .step_tag span.step{ position: absolute; top:18px; left:24px; font-size: 2.0rem; }
  .logi_flow .step_wrap .step_tag span.no{ position: absolute; top:40px; left:38px; font-size: 3.2rem;}
  .logi_flow .detail .desc{ text-align: left; }
  .logi_flow_wrap ul li::after{ padding-left:16px; }

}
/*----------------------------------------------------------------------------------------------
　オンラインショップ制作
----------------------------------------------------------------------------------------------*/
.ec_kinou{ margin-bottom:40px; }
.ec_kinou ul li{ width:49%; float:left; margin-right:2%; display: table; margin-bottom:15px;}
.ec_kinou ul li:nth-child(2n){ margin-right:0;}
.ec_kinou ul li div.img{ width:150px; background-color: #f2f2f2; display: table-cell; box-sizing: border-box; vertical-align: middle; font-size: 6.0rem;text-align: center; color: #000;}
.ec_kinou ul li div.text{ display: table-cell; padding:15px; border-top:1px solid #e6e6e6;  border-right:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
.ec_kinou ul li .ttl{ color:#CC0000; font-weight:bold; font-size:18px; margin-bottom:7px;}

.ec_screen{ margin-bottom:80px;}
.ec_screen .ttl{ font-size:20px; font-weight:bold;}
.ec_screen ul{ width:100%; display: table; }
.ec_screen ul li{ width:33.3%; display: table-cell; box-sizing:border-box; }
.ec_screen ul li .inner{ margin-right:20px;}
.ec_screen .img{ margin-bottom:10px; }
.ec_screen .desc{ font-size:1.4rem; line-height:1.5; padding-top:16px;}

@media screen and (max-width: 640px) {
  .ec_kinou{ margin-bottom:0; }
  .ec_kinou ul li{ display: block; margin-right:0; width:100%; }
  .ec_kinou ul li div.img{ width:100px;}
  .ec_kinou ul li .ttl{ font-size:1.8rem; line-height:1.4;}

  .ec_screen{ margin-bottom:40px;}
  .ec_screen ul li{ width:100%; display: block; box-sizing:border-box; margin-bottom:20px; background-color: #f8f8f8; padding: 16px;}

}

/*----------------------------------------------------------------------------------------------
　その他
----------------------------------------------------------------------------------------------*/
.map i{ color:#a88f5b; }

.news_detail{ background-color: #f8f8f8; padding:40px;}
.news_detail a{ color:#a88f5b; text-decoration: underline; }
.news_detail a:hover{ text-decoration: none; }

/*メーデル東京センター*/
.center ul { display: inline-block; width:100%; margin:0 0 40px;}
.center ul li{ display: inline-block; width:32%; margin-right:1.6rem; margin-bottom:1.6rem; vertical-align: top;}
.center ul li:nth-child(3n) { margin-right:0;}
.center ul li .desc{ padding:8px 0 16px; font-size:1.4rem; line-height:1.6;}
@media screen and (max-width: 640px) {
  .center ul li{ width:46.5%; margin-right:0.8em;}
  .center ul li:nth-child(2n) { margin-right:0;}
  .center ul li:nth-child(3n) { margin-right:0.8rem;}
}

/* megamenu wrap */
.menu-mobile{ -webkit-tap-highlight-color:rgba(0,0,0,0);}

table.recruit a{ text-decoration:underline; }
table.recruit a:hover{ text-decoration:none; }


/*----------------------------------------------------------------------------------------------
 SDGs
----------------------------------------------------------------------------------------------*/
.sdgs_wrap{ margin-bottom:40px; }
.sdgs{ width:100%; display: table; }
.sdgs_wrap .img{ width:300px; display: table-cell;}
.sdgs_wrap .desc{ display: table-cell; padding-left:24px;}
.sdgs_subttl{ font-size:22px; font-weight:bold; margin-bottom:8px; }

@media screen and (max-width: 640px) {
  .sdgs_wrap .img{ display: block; width:100%; margin-bottom:16px;}
  .sdgs_wrap .desc{ display: block; width:100%; padding-left:0;}
  .sdgs_subttl{ font-size:16px; }
}

/*----------------------------------------------------------------------------------------------
 会社案内
----------------------------------------------------------------------------------------------*/
.topmessage_wrap{ margin-bottom:40px; }
.topmessage{ width:100%; display: table; }
.topmessage_wrap .img{ width:400px; height:400px; outline:1px solid #ddd; display: table-cell;}
.topmessage_wrap .desc{ display: table-cell; padding-right:24px;}
.topmessage_subttl{ font-size:22px; font-weight:bold; margin-bottom:8px; }

@media screen and (max-width: 640px) {
  .topmessage_wrap .img{ display: block; width:100%; margin-bottom:16px;}
  .topmessage_wrap .desc{ display: block; width:100%; padding-right:0;}
  .topmessage_subttl{ font-size:16px; }
}

/*----------------------------------------------------------------------------------------------
 利益商材ページ
----------------------------------------------------------------------------------------------*/
.order_ttl_type1 {
    font-size: 28px;
    padding: 16px;
    background-color: #f2f2f2;
    margin-bottom: 24px;
    font-weight: bold;
}
.order_ttl_type2{ font-size: 20px; font-weight:bold;}
.delivery{ font-size:30px; font-weight: bold; }

.buy_select { margin-bottom:32px; }
.buy_select ul{ width:1140px; margin-right:-32px; margin-bottom:16px;}
.buy_select ul li{ width:534px; float:left; margin-right:32px; border:3px double #ddd; padding:24px; box-sizing: border-box;}
.buy_select ul li .ttl{ text-align:center; font-weight:bold; font-size:28px; margin-bottom:16px; border-bottom:3px double #ddd;}
.buy_select ul li .ttl img{ width:22px; margin:3px 12px 0 0 ; }
.buy_select ul li .buy_body{ display: table; width:100%; margin-bottom:16px; height: 142px;}
.buy_select ul li .buy_body .buy_l,
.buy_select ul li .buy_body .buy_r{ display: table-cell; vertical-align: top;}
.buy_select ul li .buy_body .buy_l { padding-right:16px;}
.buy_select ul li .buy_body .buy_l .sub_ttl{ font-size:22px; font-weight:bold; text-align:left; color:#df488c; margin-bottom: 8px;}
.buy_select ul li .buy_body .buy_r .img{ width:120px;}
.buy_select ul li .buy_body .buy_select_btn{ text-align:center; padding-top:8px; }
.buy_merit ul{ width:100%; display: table; margin-bottom:24px;}
.buy_merit ul li{ display: table-cell; width:33%; padding:16px; border-right: 1px dotted #ddd;}
.buy_merit ul li:first-child{ border-left: 1px dotted #ddd;}
.buy_merit ul li i{ font-size:60px; }
.buy_merit ul li .merit_ttl{ font-size: 22px; font-weight: bold; color: #df488c; padding: 16px 0 8px; text-align: center;}
.buy_merit ul li .merit_desc{ text-align: left; }
.buy_deli{ display: table; width:100%; margin-bottom:32px;}
.buy_deli_l,
.buy_deli_r{ display: table-cell; vertical-align: top;}
.buy_deli_l{ width:500px; padding-right:32px;}

.buy_feature{ padding:20px 0; background: url("../img/buy_bk1.jpg") center top; background-size:cover;}
.buy_feature .sub_ttl{ font-size:20px; font-weight:bold; text-align:left; color:#df488c; margin-bottom: 8px; text-align: center;}
.buy_feature ul{ width:1032px; margin-right:-24px; margin-bottom:16px;}
.buy_feature ul li{ width:488px; float:left; margin-right:24px; padding:24px; box-sizing: border-box; background-color: #FFF; border-radius: 8px; position: relative; box-shadow: 2px 2px 4px #534f4f;}
.buy_feature ul li .ttl{ text-align:center; font-weight:bold; font-size:24px; margin-bottom:8px; border-bottom:3px double #ddd;}
.buy_feature ul li .buy_body{ display: table; width:100%; margin-bottom:16px;}
/*.buy_feature ul li .tag{ position: absolute; width:140px; height:40px; outline:1px solid #FF0000; top:-8px; left:-8px; }*/
.order_item{ margin-bottom:32px; }
.order_item table.table_type02 th{ width:200px; }

@media screen and (max-width: 640px) {
    .order_ttl_type1{ font-size:22px; }
    .order_ttl_type2{ font-size: 18px;}
    .buy_select ul{ width:100%; margin-right:0; margin-bottom:0;}
    .buy_select ul li{ width:100%; float:none; margin-right:0; margin-bottom:16px;}
    .buy_select ul li .ttl{ font-size:22px;}
    .buy_select ul li .buy_body{ height: auto; }
    .buy_select ul li .buy_body .buy_l .sub_ttl{ font-size:16px; margin-bottom:4px;}
    .buy_select ul li .buy_body .buy_l p{ font-size: 1.4rem;}
    .buy_select ul li .buy_body .buy_r .img{ width:120px; }
    .buy_merit ul li{ display: block; width:100%; border-right: none; padding:0; margin-bottom:24px;}
    .buy_merit ul li:first-child{ border-left:none;}
    .buy_merit ul li i{ font-size:60px; }
    .buy_merit ul li .merit_ttl{ font-size: 20px; padding:10px 0;}
    .buy_deli{ margin-bottom:0;}
    .buy_deli_l,
    .buy_deli_r{ display: block; width:100%; padding-right:0; margin-bottom:40px;}
    .buy_feature ul{ width:100%; margin-right:0; margin-bottom:0;}
    .buy_feature ul li{ width:100%; float:none; margin-right:0; margin-bottom:24px;}
    .buy_feature ul li:last-child{ margin-bottom:0; }
    .buy_feature ul li .ttl{ font-size:22px;}
    .buy_feature ul li .buy_body{ height: auto; }
    .order_item table.table_type02 th{ width:100%; }
}

.main_txt_wrap{ text-align: center; margin-bottom:40px; border-bottom:1px dashed #ddd; padding: 24px; border-top: 1px dashed #ddd; }
.main_txt_wrap .main_txt{ font-size:54px; font-weight:bold; margin-bottom:8px; line-height:1.4;}
.main_txt_wrap .sub_txt{ font-size:16px; }
.main_txt .strong{ color: #df488c; font-size:160%; margin-left:4px; margin-right:4px;}
.main_txt_wrap .small{ font-size:30px; font-weight: bold; margin-bottom:16px;}

.flow_wrap{ 
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f2f2f2;
  padding:40px 0;
  margin-bottom: 40px;
}
.flow{ background-color:#FFF; margin-bottom:16px;}
.flow_ttl{ background-color: #df488c; color:#FFF; padding:16px 24px; font-size:28px; border-radius: 8px 8px 0 0;}
.flow div{ float:left; padding:24px; box-sizing: border-box;}
.flow div.step{ width:15%;}
.flow div.body{ width:55%;}
.flow div.body p.desc{ font-size:16px; padding:8px 0 8px;}
.flow div.img{ width:30%; text-align: center}
.flow .flow_step{ font-size:24px; border-bottom:1px solid #ddd; padding-bottom:8px; font-weight:normal; font-weight: bold; margin-bottom: 8px;}
.flow .flow_price{ background-color:#f2f2f2; padding:16px; width: 100%;}

.block_two { display: table; width:100%;}
.block_two .block_inner{ display: table-cell; width:50%; vertical-align: top;}
.block_two .block_inner:nth-child(1){ padding-right:16px; }
.block_two .block_inner:nth-child(2){ padding-left:16px; }
.block_two .block_inner.waku{ border:3px double #ddd; padding:24px; box-sizing: border-box;}
.block_two .block_inner.waku .ttl{ font-size:24px; margin-bottom:24px; line-height:1.4; font-weight:bold;}

@media screen and (max-width: 640px) {
    .delivery{ font-size:24px;}
    .main_txt_wrap{ padding:0; padding:0;}
    .main_txt{ font-size:24px; padding-bottom:24px; padding:16px 0;}
    .main_txt .strong{ color: #df488c; font-size:140%; margin-left:4px; margin-right:4px;}
    .main_txt_wrap .main_txt{ font-size:26px; }
    .main_txt_wrap .small{ font-size:14px; }
    .main_txt_wrap .sub_txt{ font-size:14px; }

    .flow div.step{ width:20%;}
    .flow div.step img{ min-width:50px; }
    .flow div.body{ width:80%;}
    .flow div.body p.desc{ font-size:14px; padding:10px 0; line-height:1.4;}
    .flow div.img{ width:100%; padding:0 24px 24px;}
    .flow .flow_step{ font-size:20px;}
    .flow_ttl{ font-size:20px; padding:16px;}

    .block_two { display: table; width:100%;}
    .block_two .block_inner{ width:100%; display: block;}
    .block_two .block_inner:nth-child(1){ padding-right:0; margin-bottom:16px;}
    .block_two .block_inner:nth-child(2){ padding-left:0; }
    .block_two .block_inner.waku{ padding:16px; }
    .block_two .block_inner.waku .ttl{ font-size:18px; margin-bottom:16px;}
}

.orderlp.lp_subcontact{ 
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  padding:32px 0;
}
/*.lp_subcontact{ background-color: #333; padding:24px 0 16px; }*/
.orderlp .subcontact_wrap{ display: table; width:100%; }
.orderlp .subcontact_box{ display: table-cell; text-align:center; color:#FFF; vertical-align: top; width: 50%;}
.orderlp .subcontact_box .main{ color:#FFF; margin-right: 40px; font-size:22px;}
.orderlp .subcontact_box .ttl{ font-size:24px; font-weight:bold;}
.orderlp .subcontact_box .ttl i{ font-size:30px; margin-right:10px;}
.orderlp .subcontact_box .desc{ font-size:16px; margin-bottom:24px;}
.orderlp .subcontact_box .tel a{ font-size: 40px; font-weight:bold; color:#FFF;}
.orderlp .subcontact_box a.btn{ padding:16px; font-size:24px; border-radius: 5px; }
@media screen and (max-width: 640px) {
  .orderlp.lp_subcontact{ padding:24px 0; }
  .orderlp .subcontact_wrap{ display: block; width:100%; }
  .orderlp .subcontact_box{ display: block; width:100%; vertical-align: top;}
  .orderlp .subcontact_box .main{ margin-bottom:16px; font-size:14px; margin-right: 0;}
  .orderlp .subcontact_box .ttl{ font-size:18px; }
  .orderlp .subcontact_box .ttl i{ font-size:24px;}
  .orderlp .subcontact_box .desc{ font-size:14px; margin-bottom:24px;}
  .orderlp .subcontact_box .tel{ margin-bottom:16px; }
  .orderlp .subcontact_box .tel a{ font-size: 22px;}
  .orderlp .subcontact_box a.btn{ padding:10px; font-size:20px;}
}

/*----------------------------------------------------------------------------------------------
 TOPイベントバナー
----------------------------------------------------------------------------------------------*/
.top_event{ padding:36px 0; }
.top_event ul{ width:1132px; margin-right:-32px;}
.top_event ul li { width:534px; float:left; margin-right:32px; margin-bottom:16px; text-align: center;}
.top_event ul li:last-child{ margin-right:0; }

@media screen and (max-width: 640px) {
  .top_event{ padding:16px 0; }
  .top_event ul{ width:100%;}
  .top_event ul li{ width:100%; float:none; margin-right:0; margin-bottom:8px;}
  .top_event ul li:last-child{ margin-bottom:0; }
}

/*----------------------------------------------------------------------------------------------
 その他
----------------------------------------------------------------------------------------------*/
.marker {
    background: linear-gradient(transparent 16%, #ffff00 0%);
}

.box6{ padding:40px 0; }
.box6 ul{ margin-right:-40px; overflow: hidden;}
.box6 ul li{ width:20%; float:left; padding-right:40px;}
.box6 ul li .img{ margin-bottom:24px; width:100%; height:180px;}
.box6 ul li h3.ttl{ font-size:18px; text-align:center; font-weight:bold; }
@media screen and (max-width: 640px) {
  .box6{ padding:32px 0 0; }
  .box6 ul{ margin-right:0; overflow: hidden;}
  .box6 ul li{ width:auto; float:none; padding-right:0; margin:0; position: relative; /*line-height:72px; */margin:16px 0 24px 0;}
  .box6 ul li .img{ margin-bottom:0; width:72px; height:72px; position: absolute; top:0;}
  .box6 ul li h3.ttl{ font-size:16px; text-align:left; padding-left:80px; font-size: 16px;}
  .box6 ul li .desc{ margin-left: 80px; line-height:1.4;}
}