/* #mainImg
================================================ */
#contact #mainImg { background: url("../img/contact/bg_cv01_sp.png") no-repeat top center/cover; margin-top: 0; padding-top: 50px; }

#contact #mainImg .inner { position: static; }

#contact #mainImg .inner:before { display: none; }

@media all and (min-width: 600px) { #contact #mainImg { background: url("../img/contact/bg_cv01_pc.png") no-repeat top center/cover; margin-top: 95px; padding-top: 0; }
  #contact #mainImg .inner:before { display: none; } }



/*  #software
================================================== */
#software .inner { padding-top: 43px; }

#software .tit { margin-bottom: 26px; }

#software .list .item { /* a{ color: $clr_blue; } */ }

#software .list .item .itemlink { display: block; padding: 14px 20px 23px; border: 1px solid #016cb1; text-decoration: none; position: relative; }

#software .list .item .itemlink:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

#software .list .item .itemlink:after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 14px; border-top: 1px solid; }

#software .list .item + .item { margin-top: 10px; }

#software .list .item .subTit { margin-bottom: 16px; position: relative; z-index: 1; }

#software .list .item .txt { position: relative; z-index: 1; }

@media all and (min-width: 600px) {
  #software .inner { padding-top: 35px; margin-bottom: 30px; }
  #software .tit { margin-bottom: 35px; }
  #software .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  #software .list .item { width: calc(100% - 10px); }
  #software .list .item .itemlink { box-sizing: border-box; padding: 29px 35px 27px; }
  #software .list .item .itemlink:hover { border-color: #016cb1; }
  #software .list .item .itemlink:hover .subTit { color: #ffe156; }
  #software .list .item .itemlink:hover:before { color: #ffe156; /* background-color: $clr_blue; -webkit-transform: rotateX(0); transform: rotateX(0); */ }
  #software .list .item .itemlink:after { width: 30px; }
  #software .list .item .itemlink:hover:before { border-top: 1px solid #fff; }
  #software .list .item + .item { margin-top: 0; }
  #software .list .item:nth-child(even) { margin-left: 20px; }
  #software .list .item:nth-child(n+3) { margin-top: 20px; }
  #software .list .item .subTit { margin-bottom: 13px; } 
}

/*  #product
================================================== */
#product .inner { padding-top: 43px; }

#product .tit { margin-bottom: 26px; }

#product .subTit { margin-bottom: 19px; }

#product .content + .content { margin-top: 28px; }

#product .img { margin-bottom: 19px; }

#product .table { margin-bottom: 0; }

#product .table .list { margin-bottom: 0; }

#product .table .list .item a { color: #016cb1; }

#product .areaSelect { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }

#product .areaSelect .selectBox { width: calc(73.5% - 5px); cursor: pointer; }

#product .areaSelect .selectBox .select { position: relative; }

#product .areaSelect .selectBox .select:before { content: ""; display: block; position: absolute; top: 16px; right: 14px; width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #333 transparent transparent transparent; }

#product .areaSelect .selectBox .select select { width: 100%; padding: 10px 15px 9px; border: 1px solid  #e2e2e2; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: transparent; }

#product .areaSelect .btn { width: calc(26.5% - 5px); background: #016cb1; cursor: pointer; text-align: center; }

#product .areaSelect .btn input { width: 100%; padding: 10px 0 11px; color: #fff; font-weight: 700; cursor: pointer; }

@media all and (min-width: 600px) { #product .inner { padding-top: 35px; }
  #product .tit { margin-bottom: 35px; }
  #product .subTit { margin-bottom: 16px; }
  #product .content + .content { margin-top: 54px; }
  #product .box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  #product .img { width: calc(34.8% - 15px); box-sizing: border-box; margin-bottom: 0; }
  #product .areaTxt { width: calc(65.2% - 15px); box-sizing: border-box; margin-top: -6px; }
  #product .areaSelect { width: 420px; }
  #product .areaSelect .selectBox { width: calc(77.5% - 5px); }
  #product .areaSelect .selectBox .select:before { top: 15px; }
  #product .areaSelect .selectBox .select select { border: 1px solid  #e2e2e2; padding: 7px 15px 6px; }
  #product .areaSelect .btn { width: calc(22.5% - 5px); }
  #product .areaSelect .btn input { padding: 7px 0 8px; } }

/*  #contract
================================================== */
#contract .inner { padding-top: 41px; }

#contract .tit { margin-bottom: 26px; }

#contract .subTit { margin-bottom: 19px; }

#contract .content + .content { margin-top: 30px; }

#contract .img { margin-bottom: 19px; }

#contract .table { margin-bottom: 0; }

#contract .table .list { margin-bottom: 0; }

#contract .areaSelect { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; }

#contract .areaSelect .selectBox { width: calc(73.5% - 5px); cursor: pointer; }

#contract .areaSelect .selectBox .select { position: relative; }

#contract .areaSelect .selectBox .select:before { content: ""; display: block; position: absolute; top: 16px; right: 14px; width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #333 transparent transparent transparent; }

#contract .areaSelect .selectBox .select select { width: 100%; padding: 10px 15px 9px; border: 1px solid  #e2e2e2; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: transparent; }

#contract .areaSelect .btn { width: calc(26.5% - 5px); background: #016cb1; cursor: pointer; text-align: center; }

#contract .areaSelect .btn input { width: 100%; padding: 10px 0 11px; color: #fff; font-weight: 700; cursor: pointer; }

@media all and (min-width: 600px) { #contract .inner { padding-top: 91px; }
  #contract .tit { margin-bottom: 35px; }
  #contract .subTit { margin-bottom: 16px; }
  #contract .content + .content { margin-top: 54px; }
  #contract .box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  #contract .img { width: calc(34.8% - 15px); box-sizing: border-box; margin-bottom: 0; }
  #contract .areaTxt { width: calc(65.2% - 15px); box-sizing: border-box; margin-top: -6px; }
  #contract .areaSelect { width: 420px; }
  #contract .areaSelect .selectBox { width: calc(77.5% - 5px); }
  #contract .areaSelect .selectBox .select:before { top: 15px; }
  #contract .areaSelect .selectBox .select select { border: 1px solid  #e2e2e2; padding: 7px 15px 6px; }
  #contract .areaSelect .btn { width: calc(22.5% - 5px); }
  #contract .areaSelect .btn input { padding: 7px 0 8px; } }

/*  #security
================================================== */
#security .inner { padding-top: 41px; padding-bottom: 22px; }

#security .tit { margin-bottom: 27px; }

#security .list .item { /* a{ color: $clr_blue; } */ }

#security .list .item .itemlink { display: block; padding: 14px 20px 23px; border: 1px solid #016cb1; text-decoration: none; position: relative; }

#security .list .item .itemlink:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

#security .list .item .itemlink:after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 14px; border-top: 1px solid; }

#security .list .item + .item { margin-top: 10px; }

#security .list .item .subTit { margin-bottom: 16px; position: relative; z-index: 1; }

#security .list .item .txt { position: relative; z-index: 1; }

@media all and (min-width: 600px) { #security .inner { padding-top: 91px; padding-bottom: 8px; }
  #security .tit { margin-bottom: 35px; }
  #security .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  #security .list .item { width: calc(50% - 10px); }
  #security .list .item .itemlink { box-sizing: border-box; padding: 29px 35px 27px; }
  #security .list .item .itemlink:hover { border-color: #016cb1; }
  #security .list .item .itemlink:hover .subTit { color: #ffe156; }
  #security .list .item .itemlink:hover:before { color: #ffe156; /* background-color: $clr_blue; -webkit-transform: rotateX(0); transform: rotateX(0); */ }
  #security .list .item .itemlink:after { width: 30px; }
  #security .list .item .itemlink:hover:before { border-top: 1px solid #fff; }
  #security .list .item + .item { margin-top: 0; }
  #security .list .item:nth-child(even) { margin-left: 20px; }
  #security .list .item:nth-child(n+3) { margin-top: 20px; }
  #security .list .item .subTit { margin-bottom: 13px; } }


/*  #other
================================================== */
#other .inner { padding-top: 41px; padding-bottom: 22px; }

#other .tit { margin-bottom: 27px; }

#other .list .item { /* a{ color: $clr_blue; } */ }

#other .list .item .itemlink { display: block; padding: 14px 20px 23px; border: 1px solid #016cb1; text-decoration: none; position: relative; }

#other .list .item .itemlink:before { -webkit-transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 750ms cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; height: 100%; padding-bottom: 1px; position: absolute; content: ''; top: -1px; left: 0; background-color: transparent; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); }

#other .list .item .itemlink:after { position: absolute; top: 50%; right: 0; content: ""; display: block; width: 14px; border-top: 1px solid; }

#other .list .item + .item { margin-top: 10px; }

#other .list .item .subTit { margin-bottom: 16px; position: relative; z-index: 1; }

#other .list .item .txt { position: relative; z-index: 1; }

@media all and (min-width: 600px) { #other .inner { padding-top: 91px; padding-bottom: 8px; }
  #other .tit { margin-bottom: 35px; }
  #other .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
  #other .list .item { width: calc(50% - 10px); }
  #other .list .item .itemlink { box-sizing: border-box; padding: 29px 35px 27px; }
  #other .list .item .itemlink:hover { border-color: #016cb1; }
  #other .list .item .itemlink:hover .subTit { color: #ffe156; }
  #other .list .item .itemlink:hover:before { color: #ffe156; /* background-color: $clr_blue; -webkit-transform: rotateX(0); transform: rotateX(0); */ }
  #other .list .item .itemlink:after { width: 30px; }
  #other .list .item .itemlink:hover:before { border-top: 1px solid #fff; }
  #other .list .item + .item { margin-top: 0; }
  #other .list .item:nth-child(even) { margin-left: 20px; }
  #other .list .item:nth-child(n+3) { margin-top: 20px; }
  #other .list .item .subTit { margin-bottom: 13px; } }
