@charset "UTF-8";
/* CSS Document */
/* 20221129 作成　ver.1.0.0 */
/*-------------------
請求書　連携可能なシステム　Slack連携
/seikyu/function/cooperation/slack.asp
-------------------*/
#seikyu #slack {
  font-size: 14.4px; }

.contents {
  width: 90%;
  max-width: 64em;
  margin: auto;
  overflow: hidden; }

#seikyu #slack a {
  /*color: #2684E2;*/
  text-decoration: none; }

#seikyu #slack a:hover {
  opacity: 0.85;
  cursor: pointer; }

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width: 48em) {
  #seikyu #slack {
    font-size: 16px; } }
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
/* ノートPC以上のサイズ 1200px(16×75em)~ lgサイズ */
#seikyu #slack {
  box-sizing: border-box; }

.lp2022 #breadcrumbs ol {
  line-height: 1.2; }

#btn_Pagetop {
  z-index: 100; }

#btn_Pagetop a::after {
  left: 11px; }

/*-----------------
 *メインビジュアル
-----------------*/
#seikyu .main-v {
  padding-top: 64px;
  padding-bottom: 80px;
  width: 100%;
  height: auto;
  /*min-height: 24em;*/
  position: relative;
  overflow: hidden;
  background: #3ebf57;
  background: linear-gradient(160deg, rgba(62, 191, 87, 0.15) 0%, rgba(177, 56, 191, 0.15) 100%); }

#seikyu .main-v .contents {
  max-width: 1164px !important; }

#seikyu h1 {
  margin: 0 auto 24px;
  font-size: 1.8em;
  line-height: 1.5em;
  font-weight: bold;
  text-align: center; }

#seikyu h1 span {
  font-size: 0.8em;
  white-space: nowrap; }

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width: 64em) {
  #seikyu .main-v {
    padding: 72px 0 115px;
    background: #3ebf57;
    background: linear-gradient(114deg, rgba(62, 191, 87, 0.15) 0%, rgba(177, 56, 191, 0.15) 100%); }

  #seikyu h1 {
    margin-top: 80px; } }
#seikyu .main-v .contents {
  padding-top: 144px; }
  #seikyu .main-v .contents h1 {
    margin-bottom: 32px; }
    #seikyu .main-v .contents h1 .small {
      font-size: 17.6px;
      font-weight: 700; }
    #seikyu .main-v .contents h1 .large {
      font-size: 32px; }
    #seikyu .main-v .contents h1 .color1 {
      color: #297F3A; }
  #seikyu .main-v .contents .btn-area .comment {
    white-space: nowrap;
    text-align: center; }
  #seikyu .main-v .contents .btn-area a.btn-org {
    width: 95%;
    margin: auto; }

@media screen and (min-width: 75em) {
  #seikyu .main-v .contents h1 .small {
    font-size: 32px;
    padding-bottom: 18px;
    display: inline-block; }
  #seikyu .main-v .contents h1 .large {
    font-size: 50px;
    padding-bottom: 18px;
    display: inline-block; } }
#seikyu .main-v .contents {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap; }
  #seikyu .main-v .contents .catch {
    flex-basis: 100%;
    order: 1;
    margin-bottom: 40px; }
    #seikyu .main-v .contents .catch .btn-area a {
      display: flex;
      align-items: center;
      width: 100%;
      height: 59px; }
  #seikyu .main-v .contents .mainv_wi, #seikyu .main-v .contents .mainv_slack {
    width: 49.8%; }
  #seikyu .main-v .contents .mainv_wi {
    order: 2; }
  #seikyu .main-v .contents .mainv_slack {
    order: 3; }

@media screen and (min-width: 48em) {
  #seikyu .main-v .contents {
    justify-content: space-between; }
    #seikyu .main-v .contents .catch .btn-area a {
      width: 512px;
      height: 67px; }
    #seikyu .main-v .contents .mainv_wi, #seikyu .main-v .contents .mainv_slack {
      flex-basis: 49.8%;
      width: auto; }
    #seikyu .main-v .contents .mainv_wi {
      order: 2; }
    #seikyu .main-v .contents .mainv_slack {
      order: 3; } }
@media screen and (min-width: 64em) {
  #seikyu .main-v {
    padding-bottom: 80px; }
    #seikyu .main-v .contents {
      padding-top: 0;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: center; }
      #seikyu .main-v .contents .catch {
        order: 2;
        margin-bottom: 0; }
      #seikyu .main-v .contents .mainv_wi {
        order: 1; } }
@media screen and (min-width: 75em) {
  #seikyu .main-v {
    padding-bottom: 115px; }
    #seikyu .main-v .contents {
      padding-top: 50px;
      align-items: flex-end; }
      #seikyu .main-v .contents .mainv_wi, #seikyu .main-v .contents .mainv_slack {
        flex-basis: 200px;
        margin-bottom: 67px; } }
/*-----------------
 *各section　上下の余白設定
-----------------*/
section {
  width: 100%;
  padding: 64px 0; }
  section .contents {
    padding-top: 0;
    padding-bottom: 0; }
    section .contents img {
      width: 100%; }

@media screen and (min-width: 48em) {
  section {
    padding: 80px 0; } }
@media screen and (min-width: 75em) {
  section .pctab-only {
    display: block !important; } }
#seikyu #slack .addtx {
  padding: 16px 0 64px 0;
  font-size: 14.4px; }
  #seikyu #slack .addtx p {
    line-height: 1.5; }
  #seikyu #slack .addtx a {
    text-decoration: underline !important; }
  #seikyu #slack .addtx a:after {
    content: url("/web/jp/seikyu/function/cooperation/images/ic_blank.svg");
    margin-left: 6px; }

@media screen and (min-width: 48em) {
  .addtx {
    padding: 16px 0 78px 0; } }
/*-----------------
 *各section　h2
-----------------*/
section h2 {
  font-size: 20.8px;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 32px; }

@media screen and (min-width: 48em) {
  section h2 {
    font-size: 24px; } }
/*-----------------
 *btn
-----------------*/
.btn-area a {
  justify-content: center;
  border-radius: 6px;
  font-size: 17.6px;
  width: 100%;
  position: relative;
  font-weight: 700;
  text-align: center; }
  .btn-area a:after {
    position: absolute;
    top: 50%;
    right: 2em;
    transform: translateY(-50%) translateX(0%); }
  .btn-area a.btn-org {
    background-color: #FF7800;
    color: #fff !important; }
    .btn-area a.btn-org:after {
      content: "＞"; }
  .btn-area a.btn-org-line {
    border: #FF7800 2px solid;
    background-color: #FFF;
    color: #FF7800 !important; }
    .btn-area a.btn-org-line:after {
      content: url("/web/jp/seikyu/function/cooperation/images/ic_dl.png"); }
  .btn-area a.btn-gre {
    background-color: #40A83E;
    color: #fff !important; }
    .btn-area a.btn-gre:after {
      content: "＞"; }

a[class^=btn]:hover {
  opacity: 0.85;
  cursor: pointer;
  text-decoration: none; }

@media screen and (min-width: 48em) {
  .btn-area a {
    font-size: 20.8px;
    position: relative; } }
/*-----------------
 *section リアルタイム
-----------------*/
section#sec-realtime .contents {
  padding: 64px 1em;
  border: solid 8px #297F3A;
  border-radius: 24px;
  position: relative;
  z-index: 1; }
  section#sec-realtime .contents:after {
    content: "";
    border: solid #611F69;
    border-width: 8px 8px 8px 0;
    border-radius: 0 24px 24px 0;
    display: block;
    position: absolute;
    z-index: 2;
    top: -8px;
    right: -8px;
    width: calc(50% + 8px);
    height: calc(100% + 16px); }

@media screen and (min-width: 48em) {
  section#sec-realtime .contents .pctab-only {
    display: block !important; } }
@media screen and (min-width: 64em) {
  section#sec-realtime .contents {
    padding: 64px 40px 16px; } }
/*-----------------
 *section スピードアップ
-----------------*/
section#sec-speedup {
  background-color: #EDF5ED; }
  section#sec-speedup .contents {
    overflow: visible; }
  section#sec-speedup h2 {
    position: relative;
    padding-top: 78px; }
    section#sec-speedup h2 .dotcircle {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateY(0%) translateX(-50%);
      display: inline-block;
      margin: auto;
      padding: 15px;
      color: #297F3A;
      border: dotted 2px #297F3A;
      border-radius: 64px;
      text-align: center;
      font-size: 16px;
      background-color: #fff; }
      section#sec-speedup h2 .dotcircle:before {
        content: "";
        position: absolute;
        display: block;
        width: 12px;
        height: 13px;
        border-right: dotted 2px #297F3A;
        top: 57px;
        left: calc(50% + -4px);
        transform: translateY(-50%) translateX(0%) rotate(45deg);
        background-color: #fff; }
      section#sec-speedup h2 .dotcircle:after {
        content: "";
        display: block;
        width: 12px;
        height: 13px;
        border-left: dotted 2px #297F3A;
        left: calc(50% + -8px);
        transform: translateY(-50%) translateX(0%) rotate(-45deg);
        background-color: #fff;
        position: absolute;
        top: 56px; }
  section#sec-speedup .pctab-only {
    position: relative; }
    section#sec-speedup .pctab-only img.tx {
      width: 37%;
      position: absolute;
      right: -6%;
      top: 70px; }
  section#sec-speedup .sptab-only {
    display: block !important; }
  section#sec-speedup .relation.btn-area {
    padding: 64px 0 0 0;
    text-align: center; }
    section#sec-speedup .relation.btn-area h3 {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 16px; }
    section#sec-speedup .relation.btn-area p.tx {
      font-size: 14.4px;
      line-height: 1.5;
      margin-bottom: 24px; }
    section#sec-speedup .relation.btn-area a.btn-org-line {
      position: relative;
      height: 73px;
      display: flex;
      align-items: center; }

@media screen and (min-width: 64em) {
  section#sec-speedup .sptab-only {
    display: none !important; }
  section#sec-speedup .relation.btn-area p.tx {
    font-size: 16px; }
  section#sec-speedup .relation.btn-area a.btn-org-line {
    width: 512px;
    margin: auto; }
    section#sec-speedup .relation.btn-area a.btn-org-line:after {
      right: 1em; } }
/*-----------------
 *section コストが削減
-----------------*/
section#sec-dx h2 {
  width: 90%;
  max-width: 64em;
  margin: auto auto 45px; }

/*-----------------
 *section 大幅削減が可能に
-----------------*/
#sec-possible .container{
/*  display:flex;
  flex-direction: column;*/
	width: 100%;
}
#sec-possible h2 {
	width: 90%;
	max-width: 64em;
	margin: auto auto 45px;
	color: #555555;
}
#sec-possible img {
	width: 100%;
}
@media screen and (max-width: 767px) {
	.possible_pc {
		display: none !important;
	}
}
@media screen and (min-width: 48em) {
	#sec-possible h2 {
		font-size: 31px;
	}
	.possible_sp {
		display: none !important;
	}
}
.btn-sec {
	width: 90%;
	max-width: 32em;
	margin: auto;
	text-align: center;
	position: relative;
}
.btn-sec a {
	padding: 20px;
	background-color: #FF3333;
	border-radius: 6px;
	color: #fff;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.3em;
	display: block;
	position: relative;
}
p.possible_btn {
	text-align: center;
	font-weight: bold;
}
.possible_btn.pc_only {
	display: none;
}
@media screen and (min-width: 48em) {
	.possible_btn.pc_only {
		display: block;
		margin-top: 60px;
	}
}
.possible_btn.sp_only {
	display: block;
	line-height: 1.4em;
	margin-top: 30px;
}
@media screen and (min-width: 48em) {
	.possible_btn.sp_only {
		display: none;
	}
}

/*-----------------
 *section コストが削減
-----------------*/
section#sec-demand {
  background-color: #113618;
  position: relative; }
  section#sec-demand .contents {
    position: relative;
    overflow: visible; }
    section#sec-demand .contents h2 {
      color: #fff;
      line-height: 1.75 !important;
      margin-bottom: 40px !important; }
    section#sec-demand .contents:before {
      content: url("/web/jp/seikyu/function/cooperation/images/demandbg2.png");
      position: absolute;
      top: -33px;
      right: 50%;
      transform: translateY(0%) translateX(50%);
      mix-blend-mode: overlay;
      opacity: 0.75;
      z-index: 1; }
    section#sec-demand .contents:after {
      content: url("/web/jp/seikyu/function/cooperation/images/demandbg.png");
      position: absolute;
      bottom: 0;
      left: 33px;
      transform: translateY(-50%) translateX(0%);
      mix-blend-mode: overlay;
      opacity: 0.75;
      z-index: 1; }
    section#sec-demand .contents .btn-area, section#sec-demand .contents img {
      position: relative;
      z-index: 2; }
    section#sec-demand .contents .btn-area {
      display: flex;
      flex-direction: column;
      align-items: center; }
      section#sec-demand .contents .btn-area a {
        height: 67px;
        margin-bottom: 24px;
        display: flex;
        justify-content: center;
        align-items: center; }
      section#sec-demand .contents .btn-area .btn-gre {
        margin-bottom: 64px; }
        section#sec-demand .contents .btn-area .btn-gre:after {
          right: 1em; }

@media screen and (min-width: 48em) {
  section#sec-demand .contents:before {
    top: 65px;
    left: 0; }
  section#sec-demand .contents:after {
    bottom: 0px;
    right: 0; }
  section#sec-demand .contents .btn-area a {
    font-size: 20.8px !important; }
  section#sec-demand .contents .btn-area a.btn-gre:after {
    right: 2em; } }
@media screen and (min-width: 64em) {
  section#sec-demand .contents {
    display: flex;
    align-items: center; }
    section#sec-demand .contents h2 {
      text-align: left;
      font-size: 20px; }
    section#sec-demand .contents .btn-area a {
      font-size: 16.8px !important; }
    section#sec-demand .contents img {
      width: auto;
      margin-left: 1.6rem; } }
@media screen and (min-width: 75em) {
  section#sec-demand .contents .btn-area {
    flex-basis: 452px; }
  section#sec-demand .contents:before {
    top: 0;
    left: -870px; }
  section#sec-demand .contents:after {
    bottom: -180px;
    left: 840px; }
  section#sec-demand .contents .btn-area a {
    font-size: 20.8px !important; }
  section#sec-demand .contents img {
    width: auto; } }
/*-----------------
 *section コスト削減のシミュレーション例
-----------------*/
#sec-function_common {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 0 40px;}
@media screen and (min-width: 48em) {
  #sec-function_common {
    padding: 0 0 80px; } }

  #sec-function_common .contents {
    padding-top: 0 !important; }
    #sec-function_common .contents h2 {
      color: #333; }

#function_buyer + #sec-function_common {
  padding-bottom: 0 !important;
  padding-top: 0; }

.simulation_box {
  position: relative;
  height: 100%;
  background-color: #fff;
  margin: 0 15px;
  box-shadow: 0 3px 18px 0 rgba(90, 90, 90, 0.2);
  border: 1px solid #eee; }

.simulation_box dl {
  background-color: #fff;
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 3.5em 1.5em 1.5em 1.5em;
  z-index: 2;
  border-radius: 8px; }

.simulation_box dt {
  width: 200px;
  position: absolute;
  padding: 0.5em 0;
  top: -18px;
  left: -18px;
  font-size: 20px;
  font-weight: 900;
  background: #fce9ae; }

.simulation_box dt.buyer {
  background: #d7fbcd; }

.simulation_box dt::before {
  position: absolute;
  content: "";
  top: 100%;
  left: 0;
  border-top: 6px solid #c9a126;
  border-right: 8px solid #c9a126;
  border-bottom: 6px solid transparent;
  border-left: 8px solid transparent; }

.simulation_box dt.buyer::before {
  border-top: 6px solid #699e5b;
  border-right: 8px solid #699e5b; }

.simulation_box dd {
  line-height: 1.8em; }

.simulation_box dd img {
  width: 100%; }

.bg-grey{
	background: #f0f0f0;
}

.simulation_wrap img {
	width: 100%;
}

.drawer-dropdown-menu li.drawer-menu-buyer > a, .drawer-dropdown-menu li.drawer-menu-seller > a, .drawer-dropdown-menu li.drawer-menu-account > span,
.drawer-dropdown.open a {
  box-sizing: content-box !important; }

/*IE11*/
/*==================================*/
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, #seikyu .main-v .contents .mainv_wi, #seikyu .main-v .contents .mainv_slack {
    flex-basis: 300px !important;
    width: auto !important;
    height: auto !important; }

  *::-ms-backdrop, #seikyu .main-v .contents h1 {
    padding-bottom: 0 !important; } }

/*-----------------
 *footer　bootstrapの不要なマージン,
ホバー時のアンダーライン調整
-----------------*/
.footer_list p{
  margin-bottom: 0;
}

.footer_list a:hover{
    text-decoration: none;
}