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


/* contents==========================

	1.for contents style
	
*/
/* 1.for contents style ==============================================*/

/* ----------------------------------------------------
メディアクエリ設定 All
---------------------------------------------------- */
/*メニューアクティブ*/
.lineup .lineup-menu > a, .lineup .lineup-menu > a:hover, .demo .demo-menu a, .demo .demo-menu a:hover,.pdf-demo .demo-menu a, .pdf-demo .demo-menu a:hover,
.system .system-menu > a, .system .system-menu > a:hover{
  box-shadow: 0 -3px #b40200 inset;
}
.bg-title { background: url(/product/svf/img/bg_title.jpg) center bottom / cover no-repeat; }
.breadcrumb li { color: #fff;}
.breadcrumb li a { color: #fff; background: url(/common/img/arrow_white.png) right 5px center / 4px auto no-repeat;}
#jump01, #jump02, #jump03, #jump04, #jump05, #function, #function02, #function03,#adress,#insurance,
#estimate,#invoice_ja,#order,#stock,#sales,#ledger,#insured,#salary,#delivery,#shipment,#invoice,#reportcard,#analyze,
#a01,#a02,#wdp{
  margin-top: -70px; padding-top: 70px;
}
#wdp .tit-linetop{ margin-top: 30px; }
.ma{ margin: 0 auto; }


/* 
.index
----------------------------------- */
.index .bg-title::before { padding: 175px 0; }
.pickup h2{
  font-size: 22px;font-size: 2.2rem;
  text-align: center;
  margin-bottom: 30px;
}
.pickup{ margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }
.slider .slick-slide{ margin: 0 15px; }
.slider .slick-slide img{
  max-width: none;
  width: 100%;
  margin-bottom: 20px;
}
.slider .slick-slide p{
  background: url(/common/img/arrow_red.png) right center / 6px auto no-repeat;
  padding-right: 15px;
  line-height: 1.6;
}
.slider .slick-slide a{
  font-size: 14px;font-size: 1.4rem;
  color: #3a3a3a;
  display: block;
  -webkit-transition: all .3s;
  transition: all .3s;
 }
.slider .slick-slide a:hover{ opacity: .7; }
.index .news{ display: flex; margin: 50px calc(50% - 50vw); }
.index .news h2{
  width: 210px;
  font-size: 30px;font-size: 3.0rem;
  background: url(/common/img/arrow_red.png) right 25px center / 6px auto no-repeat;
  padding: 0 55px 0 0;
  display: flex;
	align-items: center;
	font-weight: 100;
	margin: 0 0 0 20px;
}
.index .news-list{ max-width: 1200px; flex: 1; }
.index .news-list a{
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0 20px;
  transition:0.3s;
}
.index .news-list a:hover{
  background: #fff;
  box-sizing: content-box;
  box-shadow:0px 0px 12px 5px rgba(0, 0, 0, 0.1) ;
  position: relative;
  z-index: 100;
}
.index .news-list dl{
  overflow: hidden;
  font-size: 14px;font-size: 1.4rem;
  padding: 15px 0;
  line-height: 2;
  border-top: 1px solid #f4f4f4;
}
.index .news-list a:last-of-type dl{ border-bottom: 1px solid #f4f4f4; }
.index .news-list a:hover dl,.index .news-list a:hover + a dl{
  border-color: transparent;
}
.index .news-list a:hover + a:last-of-type dl{ border-bottom: 1px solid #f4f4f4; }
.index .news-list dt{
  float: left;
  position: relative;
  width: 8em;
}
.index .news-list dd{
  color: #1b1b1b;
  text-decoration: none;
  background: url(/common/img/arrow_red.png) right center / 6px auto no-repeat;
  padding-right: 20px;
  padding-left: 8em;
}
.index .about{
  padding: 0;
  margin: 0 calc(50% - 50vw);
  display: flex;
  flex-wrap: wrap;
}
.index .about > div{ width: 50%; }
.index .about a{ color: #fff;  position: relative; transition:.3s; text-decoration: none;}
.about a:hover{ background: rgba(255,255,255,0.2); }
.index .about-box div::before,.index .about .case::before{
  content: "";
  display: block;
  height: 100%; width: 101%;
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
  transition:.3s;
}
.index .about-box div:hover::before,.index .about .case:hover::before{
  transform: scale(1.1);
}
.index .about .about-box{
  display: flex;
  height: 50%;
  flex-direction: column;
}
.index .about .about-box div{ position: relative; overflow: hidden; }
.index .about .about-box a{
  display: block;
  text-align: center;
}
.index .about .outline a{
  padding: 7% 0 21%;
  font-size: 2vw;
}
.index .about .outline::before{ background:#787878 url(/product/svf/img/bg_about.jpg) center bottom / auto 100%  no-repeat; }
.index .about .blog a{
  padding: 10% 55% 10% 0;
  font-size: 2.5vw;
  line-height: 1.2;
}
.index .about .blog::before{ background:#000 url(/product/svf/img/bg_blog.jpg) center bottom / cover  no-repeat; }

.index .about .blog a span{ font-size: 1.8vw;}
.index .about .case{ display: flex; position: relative; overflow: hidden; }
.index .about .case a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 40px; font-size: 4.0rem;
}
.index .about .case::before{ background:#787878 url(/product/svf/img/bg_case.jpg) center center / cover  no-repeat; }
.index .type h2,.index .video h2{
  text-align: center;
  font-size: 22px;font-size: 2.2rem;
  margin-top: 60px;
  font-weight: bold;
}
.index .type ul,.index .video ul{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
}
.index .type ul li{ 
  display: flex;
  width: 20%;
  border: 1px solid #e7e7e7;
  margin-left: -1px;
}
.index .type ul li a{
  display: flex;
  width: 100%; height: 100%;
  justify-content: center;
  padding: 60px 0 20px;
  background: url(/product/svf/img/ico_mf.png) center bottom 48px no-repeat;
}
.index .type .ico-wh a{ background-image: url(/product/svf/img/ico_wh.png);}
.index .type .ico-ret a{ background-image: url(/product/svf/img/ico_ret.png);}
.index .type .ico-dep a{ background-image: url(/product/svf/img/ico_dep.png);}
.index .type .ico-edu a{ background-image: url(/product/svf/img/ico_edu.png);}
.index .type ul li a:hover,.index .video li a:hover{ opacity: .7; transition: .3s; }
.index .video ul{ justify-content: center; }
.index .video li{ margin: 0 1px; }
.index .utility-links{ 
  display: flex;
  justify-content: space-between;
  margin: 100px auto 0 auto;
}
.index .utility-links dt{ font-weight: bold; padding: 6px 0 28px 47px; }
.index .utility-links dl:nth-child(1) dt { background:url(/common/img/icon_partner.png) no-repeat; }
.index .utility-links dl:nth-child(2) dt { background:url(/common/img/icon_know.png) no-repeat; }
.index .utility-links dl:nth-child(3) dt { background:url(/common/img/icon_support.png) no-repeat; }
.index .utility-links dl:nth-child(4) dt { background:url(/common/img/icon_customer.png) no-repeat; }
.index .utility-links dd {
  margin: 0 0 0 10px;
  font-size: 13px; font-size: 1.3rem;  
}
.index .utility-links dd a {
  padding: 10px 0 0 20px;
  display: block;
  background: url(/common/img/arrow_red.png) no-repeat 0 12px;
  background-size: 6px auto;
  color: #000000;
}
.index .utility-links dd a:hover { text-decoration: underline; }

/* 
.lineup
----------------------------------- */
.lineup .lead, .document .lead { line-height: 1.8; margin-bottom: 50px; }
.lineup-area {
  margin: 0 calc(50% - 50vw);
  padding: 80px calc(50vw - 50%);
  background: #f4f4f4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.lineup-area .lineup-list { width: calc(250/1200*100%); }
.lineup-area .lineup-list h2 {
  font-weight: bold;
  display: inline-block;
  font-size: 22px;
  font-size: 2.2rem;
  padding-right: 23px;
  background: url(/common/img/arrow_red.png) right center / 6px auto no-repeat;
  margin-bottom: 40px;
}
.lineup-area .lineup-list li { margin-bottom: 10px; }
.lineup-area .lineup-list button {
  border: none;
  background: none;
  cursor: pointer;
  color: #1b1b1b;
  width: 100%;
  font-size: 14px;
  font-size: 1.4rem;
  padding: 15px 15px 15px 40px;
  border-radius: 3px;
  text-align: left;
}
.lineup-area .lineup-list li:not(.all) button { background: url(/common/img/arrow_red.png) 20px center / 6px auto no-repeat; }
.lineup-area .lineup-list li.all button { background: url(/img/ico_all_on.png) 15px center no-repeat; }
.lineup-area .lineup-list button.mixitup-control-active {
  color: #af010b;
  font-weight: bold;
  background-color: rgba(255,255,255,0.5) !important;
}
.lineup-area .lineup-list button:hover { background-color: rgba(255,255,255,0.5) !important; }
.lineup-area .lineup-box {
 width: calc(900/1200*100%);
  line-height: 1.8;
  display: flex;
  flex-wrap: wrap;
}
.lineup-area .lineup-box > section {
  width: calc(100% / 3);
  border-left: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  align-items: flex-start;
  font-size: 13px;
  font-size: 1.3rem;
}
.lineup-area .lineup-box > section a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 30px 40px 30px 30px;
  transition: 0.3s;
  justify-content: center;
  background: #fff url(/common/img/arrow_red.png) right 20px center / 6px auto no-repeat;
}
.lineup-area .lineup-box > section a:hover {
  box-shadow: 0px 0px 12px 5px #dddddd;
  position: relative;
  z-index: 100;
}
.lineup-area .lineup-box h3 {
  font-weight: bold;
  text-align: center;
  color: #2147a8;
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.lineup-img { max-width: 700px; margin: 50px auto; }
.lineup-img dt {
  font-weight: bold;
  font-size: 24px;
  font-size: 2.4rem;
  margin-bottom: 15px;
}
.lineup .guide {
  margin: 0 calc(50% - 50vw);
  padding: 50px calc(50vw - 50%);
  text-align: center;
  background: #f4f4f4;
}
.lineup .guide p {
  line-height: 1.8;
  font-size: 20px;
  font-size: 2.0rem;
  margin-bottom: 15px;
}
.lineup .guide a:hover { opacity: .7; transition: .3s; }
.contact .btn-red-l a { margin: 0 auto; }
.lineup-detail .lead dt, .document .lead dt {
  font-size: 24px; font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 30px;
}
.lineup-detail .lead dt span, .document .lead dt span {
  display: table;
  background: #cd2b1e;
  color: #fff;
  font-weight: bold;
  font-size: 18px; font-size: 1.8rem;
  padding: 5px 15px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.lineup-detail .lead p, .box-area .box-txt > p, .box-area .box-txt > figure { margin-bottom: 30px; }
.box-area { margin-bottom: 60px; }
.box-area > .box-img { text-align: center; margin-top: 30px; }
.box-img-r, .box-img-l {
  display: flex;
  margin-bottom: 60px;
  flex-wrap: wrap;
}
.box-img-l { flex-direction: row-reverse; } 
.box-img-r .box-img { margin-left: 40px; }
.box-img-l .box-img { margin-right: 40px; }
.box-txt { flex: 1; line-height: 1.8; }
.box-img-r > section, .box-img-l > section, .box-area > section {
  margin-bottom: 40px !important;
}
.box-img-r p+p, .box-img-l p+p { margin-top: 30px; }
.box-txt h4 { font-weight: bold; margin-bottom: 5px; }
.case { overflow: hidden; }
.case h2 span {
  padding-left: 30px;
  font-size: 18px; font-size: 1.8rem;
}
.case ul {
  float: left;
  line-height: 1.5;
  margin-right: 50px;
}
.case ul li {
  background: url(/common/img/arrow_red.png) left center / 6px auto no-repeat;
  padding-left: 15px;
  margin-bottom: 10px;
}
.lineup-detail table {
  width: 100%;
  line-height: 1.6;
  margin-top: 60px;
}
.lineup-detail table th {
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  background: #dadada;
  border: 1px solid #c5c5c5;
  vertical-align: middle;
}
.lineup-detail table td {
  padding: 10px 15px;
  text-align: center;
  background: #f7f7f7;
  vertical-align: middle;
  border: 1px solid #c5c5c5;
}
.lineup-detail table tr:nth-of-type(even) td { background: #fcfcfc; }
.etc { display: flex; justify-content: space-between; }
.etc > section { width: calc(575/1200*100%); }
.etc div+div { margin-top: 10px; }
/**designer-box*/
.designer-box .box-area ul { display: flex; justify-content: center; }
.designer-box .box-area li { margin: 0 10px; }
/* w-designer-box*/
.holdout dt { font-weight: bold; }
.holdout p { margin-bottom: 10px; }
.w-designer-box table td:first-of-type { text-align: left; }
/* report-box*/
.report-box table { margin-top: 0 !important; }
.report-box table td { text-align: left; }
.report-box table td a { text-decoration: underline; }
/* java-box*/
.java-box .coad { overflow: hidden; }
.java-box .coad .box-area { float: left; margin: 0 50px 30px 0; }
.java-box .coad li::before { content: "・" }
/* pdf-box*/
.pdf-box table { margin-bottom: 10px; }
.pdf-box table td { text-align: left; }
/* net-box*/
.net-box .between { display: flex; justify-content: space-between; }
.net-box .between table { margin: 0 0 60px; }
.net-box .between table td { text-align: left; }
.net-box .between > table { width: 55%; }
.net-box .between div table { width: 100%;margin-bottom: 10px;}
.net-box .between div { width: 40%;}
/* frame-box*/
.frame-box .lead p { margin-bottom: 0;}
/* solution-box*/
.solution-box figure { margin-top: 30px;}

/* system*/
/* 
system
---------------------------------------------------- */
.system .note-box { line-height: 1.8; }
.system .note-box li{
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #E8E8E8;
  text-indent: -1em;
  padding-left: 1em;
}
.system .note-box li:nth-of-type(1){ display: flex; align-items: center; }
.system .note-box li a{ text-decoration: underline; }
.system .note-box li div{ width: calc(400/1200*100%); margin-left: 30px; }
.system .note-box li div a{ line-height: 1.3; text-decoration: none; }
.system .note-box li p{ flex: 1;}
.system-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.system-list > div{ width: 48%; line-height: 1.8;}
.system-list li{
  background: url(/common/img/arrow_red.png) left 7px / 6px auto no-repeat;
  padding-left: 15px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.system-list a{ color: #3a3a3a; display: inline-block; }
.system-list a:hover{ text-decoration: underline; }
.system-list p,.system-list p a{
  font-size: 20px;font-size: 2.0rem;
  font-weight: bold;
}
.system-list p:not(.link){ display: flex; align-items: center; }
.system-list p:not(.link)::after{
  border-top: 1px solid #e6e6e6;
  content: "";
  flex-grow: 1;
  margin: 0  0 0 15px;
}
.system-list ul{ margin-bottom: 30px; font-size: 0; }
.system-list ul li{
  font-size: 14px;font-size: 1.4rem;
  display: inline-block;
  margin-right: 30px;
}
.system .note{
  line-height: 1.8;
  border: 1px solid #e6e6e6;
  padding: 30px;
  font-size: 12px;font-size: 1.2rem;
}
.system .note > p{ color: #ce2a29; }
.system .note dl{ display: flex; margin-top: 15px; }
.system .note dt{ margin-right: 20px; }
.system .system-box > section{ padding-bottom: 70px; }
.system .system-box > section:last-of-type{ padding-bottom: 0; }
.system .system-box > section h3{ padding-top: 70px; margin-top: -70px; }
.system .system-box > section p{
  margin-bottom: 15px;
  line-height: 1.8;
}
.system .system-box > section > section{ margin-top: 50px; }
.system .system-box > section > section h4{
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 18px;font-size: 1.8rem;
}
.system .system-box > section > section .row-tbl{ margin-bottom: 15px; }
.system .row-tbl dt{ font-weight: bold; }
.system .row-tbl dd{ font-size: 12px;font-size: 1.2rem; }
.system .row-tbl dd li{
  padding-left: 20px;
  position: relative;
  line-height: 1.3;
  margin-bottom: 10px;
}
.system .row-tbl dd li::before{
  content: "■";
  font-size: 10px;font-size: 1.0rem;
  vertical-align: middle;
  position: absolute;
  top:2px;
  left: 0;
}
.system .system-box ol{ counter-reset: li 0; margin: 30px 0 0; }
.system .system-box ol li{
  padding-left: 30px;
  position: relative;
  font-size: 12px;font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
.system .system-box ol li a{ text-decoration: underline; color: #2968da; }
.system .system-box ol li a:hover{ text-decoration: none; }
.system .system-box ol li::before{
  content: "※" counter(li, decimal);
  counter-increment: li 1;
  position: absolute;
  top: 0;
  left: 0;
}
.system .system-box .note{ padding-bottom: 15px; }
.system .system-box .btn-black-s,.system .system-box .note{
  margin-top: 30px;
}
.system .system-btn{
  border-top: 3px solid #b40200;
  padding-top: 60px;
  margin-top: 80px;
}
.system .system-btn p{ line-height: 1.8; margin-bottom: 50px; }
.system .system-btn ul{ overflow: hidden; }
.system .system-btn li{
  float: left;
  margin-right: 15px;
  max-width: 400px;
  width: 100%;
}
.system .system-btn .ico-window span{ background:url(/common/img/ico_window_w.png) right center /8px auto no-repeat; }
.system #page3{
  border-top: 3px solid #b40200;
  padding-top: 70px;
  margin-top: 70px;
}

/* 
.example
----------------------------------- */
.example h2+p {margin-bottom: 50px;line-height: 1.8;}
.example .client-box .page-menu {margin-bottom: 80px;}
.example .key-box .note {margin-bottom: 30px;}
.example .key-box .note li {
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.5;
  margin-bottom: 10px;
}
.example .key-box .note li ul {margin: 10px 0 0 10px;}
/* 
.document
----------------------------------- */
.document .doc-menu {display: flex;justify-content: space-between;}
.document .doc-list {width: calc(380/1200*100%);line-height: 1.5;}
.document .doc-list .btn-black-s {margin-bottom: 15px;}
.document .note-box {
  margin: 50px auto 0;
  border: 2px solid #CD2B1E;
  padding: 20px;
  line-height: 1.8;
  width: 80%;
}
.document .sample, .document .sample-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.document .sample section {width: calc(580/1200*100%);margin-bottom: 15px;}
.document .sample h2+p {line-height: 1.8;margin-bottom: 20px;}
.document .sample-list ul li {width: calc(380/1200*100%);}
.document .sample-list ul li a {
  display: flex;
  width: 100%;
  justify-content: center;
}
.document .sample-img {width: 100% !important;margin-bottom: 20px;}
.document .sample-img ul {display: flex;flex-wrap: wrap;}
.document .sample-img li {width: 50%;}
/* 
.sf
----------------------------------- */
.sf .lead {line-height: 1.8;}
.sf h2+p, .sf table+p {line-height: 1.8;margin-bottom: 30px;}
.sf table {
  width: 80%;
  margin: 0 auto;
  line-height: 1.6;
}
.sf table th {
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  background: #dadada;
  border: 1px solid #c5c5c5;
  vertical-align: middle;
}
.sf table td {
  padding: 15px;
  vertical-align: middle;
  border: 1px solid #c5c5c5;
}
.sf-about th {width: 20%;}
.sf-about td[colspan] {text-align: center;}
.sf-operation {margin-bottom: 30px !important;}
.sf-operation+p {width: 80%;margin: 0 auto 30px;}
.sf .btn-black-s a {margin: 0 auto;}
/* 
.shipmentstop
----------------------------------- */
.stopshipment h2+p {
  text-align: center;
  line-height: 1.8;
  margin-bottom: 30px;
}
.stopshipment h2+p a {text-decoration: underline;}
.stopshipment .btn-black-s a {margin: 0 auto;}
.stopshipment h3 {margin-top: 50px;}
.stopshipment h3+p {line-height: 1.8;margin-bottom: 30px;}
.stopshipment table {
  width: 100%;
  text-align: left;
  border: 1px solid #fff;
  line-height: 1.8;
}
.stopshipment table th {
  text-align: center;
  font-weight: bold;
  border: 1px solid #fff;
  background: #e3e3e3;
  padding: 10px 0;
  vertical-align: middle;
}
.stopshipment table td {
  border: 1px solid #fff;
  background: #fcfcfc;
  padding: 10px 20px;
  vertical-align: middle;
}
.stopshipment table tr:nth-of-type(odd) td {background: #f7f7f7;}
.stopshipment .policy .col2 p {
  margin-bottom: 10px;
  font-size: 12px; font-size: 1.2rem;
  line-height: 1.5;
}
.stopshipment .policy .col2 ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}.stopshipment .policy li {width: 48%;}
.stopshipment .policy th {width: 25%;}
.stopshipment .end h3 {
  font-size: 22px;
  font-size: 2.2rem;
  margin: 50px 0 15px;
  text-align: center;
}
.stopshipment .end table {max-width: 840px;margin: 0 auto;}
.stopshipment .end th:first-of-type {width: 75%;}
/* 
.demo
----------------------------------- */
.demo .lead {
  line-height: 1.8;
  font-size: 30px; font-size: 3.0rem;
  font-weight: bold;
}
.demo .pdf-create{ display: flex; line-height: 1.8; align-items: center; }
.demo .pdf-create div{ margin-left: 30px; }
.demo .pdf-create p{ flex: 1;}
.demo .pdf-create a:hover,
.demo .video a:hover,.login-btn li a:hover{ opacity: .7; transition: .3s; }
.demo .video-txt{ line-height: 1.8; }
.demo .video h3{ margin-top: 50px;}
.demo .video h3 span{ font-weight: bold; font-size: 28px; font-size: 2.8rem; }
.demo .video ol{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  counter-reset: video 0;  
}
.demo .video ol li{
  line-height: 1.5;
  width: calc(380/1200*100%);
  position: relative;
  margin-bottom: 10px;
  min-height: 5em;
  counter-increment: video 1;
  background: #f1f1f1 url(/product/svf/demo/img/ico_play.png) right 20px top 10px no-repeat;
}
.demo .video ol li span{
  position: absolute;
  right: 20px; bottom: 10px;
  font-size: 10px; font-size: 1.0rem;
}
.demo .video ol li a{
  display: flex;
  width: 100%; height: 100%;
  align-items: center;
  border-radius: 3px;
  position: relative;
  padding:10px 80px 10px 0;
}
.demo .video ol li a::before{
  content: counter(video) "."; 
  margin:0 15px 0 20px;
  font-weight: bold;
}
.demo .video .btn-black-s a{ margin: 50px auto 0; }
.video-popup {
  position: relative;
  padding: 40px 16px 20px;
  width: auto;
  max-width: 1000px;
  margin: 20px auto;
}
.video-popup video {width: 100%;height: auto;}
.mfp-close {color: #000 !important;font-size: 35px !important;}

.pdf-demo .lead p{ line-height: 1.8; margin-bottom: 30px; }
.pdf-demo .lead ul{ margin-right: -15px; }
.pdf-demo .lead ul li{
  width: calc(180/1200*100%);
  display: inline-block;
  margin:0  15px 10px 0;
}
.pdf-demo .lead ul li a{
  display: block;
  text-align: center;
  padding: 10px 0;
  background: #e6e6e6;
  position: relative;
}
.pdf-demo .lead ul li a::before{
  content: "";
  position: absolute;
  display: block;
  right: 10px; top: 0; bottom: 0;
  margin: auto;
  width: 6px; height: 6px;
  border-top: 2px solid #B40200;
  border-right: 2px solid #B40200;
  transform: rotate(135deg);
}
.pdf-demo .lead ul li a:hover,.demo-list section:hover{ opacity: .7; transition: .3s; }
.demo-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.demo-list section{ width: 48%; margin-top: 0 !important; }
.demo-list .demo-box{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.demo-list .demo-box dl{ 
  flex: 1;
  line-height: 1.8;
  background: url(/common/img/arrow_red.png) right center / 7px auto no-repeat;
  padding-right: 30px;
}
.demo-list .demo-box dt{ margin-bottom: 10px; }
.demo-list .demo-box dt span{
  background: #e6e6e6;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
  padding: 2px 5px;
  font-size: 12px;font-size: 1.2rem;
}
.demo-list .demo-box figure{ margin-right: 15px;}
.pdf-demo .row-tbl+p{ margin-top: 30px; line-height: 1.8; }
.login-info{
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 1.8;
  margin-bottom: 40px;
  flex-direction: row-reverse;
}
.login-info figure{ margin-right: 30px; }
.login-txt{ font-size: 18px;font-size: 1.8rem;}
.login-txt a{ text-decoration: underline; }
.login-txt ul{ margin-top: 30px; list-style: disc; }
.login-txt ul li{ margin: 0 0 10px 30px; }
.login-txt ul li em,.login-btn li em{ font-weight: bold; color: #ffa200; }
.login-btn{
  display: flex;
  line-height: 1.8;
  font-size: 14px;font-size: 1.4rem;
  justify-content: center;
}
.login-btn li{ margin: 0 10px; }
.login-btn li p{ margin-top: 10px;} 
.login-btn li p a{ background: url(/common/img/arrow_red.png) left center / 6px auto no-repeat; padding-left: 18px;}

/* 
.what
----------------------------------- */
.what .intro-box{
  line-height: 1.8;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin-bottom: 60px;
}
.what .intro-txt{ flex: 1; }
.what .intro-txt li{ 
  font-size: 30px; font-size: 3.0rem;
  line-height: 1.5;
}
.what .intro-txt li strong{ 
  font-weight: bold; 
  font-size: 60px; font-size: 6.0rem;
  color: #3253A4;
  padding-left: 15px;
}
.what .intro-txt p{
  font-size: 18px; font-size: 1.8rem;
  margin: 30px 0;
}
.what .intro-box figure{ margin-right: 50px; width: calc(365/1200*100%); }
.what .intro-box figcaption p{ display: flex; font-size: 12px; font-size: 1.2rem; margin-top: 5px;}
.what .intro-box figcaption p span{ width: 3em; flex-shrink: 0; }

.what .anniversary{
  text-align: center;
  font-size: 40px; font-size: 4.0rem;
  font-weight: bold;
  border-top: 3px solid #3253A4;
  border-bottom: 3px solid #3253A4;
}
.what .anniversary span{  
  background: url(/product/svf/outline/img/ico_anniversary.png) left center no-repeat;
  padding:25px 0 25px 80px;
  font-weight: bold;
  display: inline-block;
}
.what .anniversary strong{ font-weight: bold; color: #DD2328; }
.what .intro > ul{
  display: flex;
 justify-content: space-between;
}
.what .intro > ul li{
  width: calc(580/1200*100%);
  text-align: center;
  margin: 50px 0 0;
}
.what .intro > ul li a{
  display: block;
  font-size: 22px; font-size: 2.2rem;
  padding: 40px 0 40px 30px;
  background: #4EAC00 url(/product/svf/outline/img/ico_form.png) left 20px center no-repeat;
  color: #fff;
  position: relative;
}
.what .intro > ul li:nth-of-type(2) a{ background: #009DD0 url(/product/svf/outline/img/ico_svf.png) left 20px center no-repeat; }
.what .intro > ul li a::before{
  content: "";
  position: absolute;
  display: block;
  width: 10px; height: 10px;
  left: 0; right: 0; bottom: 10px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(135deg);
}
.what .intro > ul li a:hover{ opacity: .7; transition: .3s; }
.what .content > section h2{
  text-align: center;
  background: #4EAC00;
  color: #fff;
  font-weight: bold;
  margin: 80px 0 0;
  font-size: 30px; font-size: 3.0rem;
}
.what .content > section h2 span{
  background: url(/product/svf/outline/img/ico_form.png) left center no-repeat;
  display: inline-block;
  padding: 30px 0 30px 80px;
}
.what .content > section section{ counter-increment: number 1; }
.what .content > section section h3{
  text-align: center;
  margin: 80px 0 0;
  font-size: 24px; font-size: 2.4rem;
  font-weight: bold;
  color: #4BAB01;
}
.what .content > section section h3 span{ 
  position: relative;
  display: inline-block;
  margin-bottom: 40px;
  padding:0 30px 20px 90px;
  border-bottom: 1px solid #4CAC00;
}
.what .content > section section h3 span::before{
  content: counter(number) " ";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 30px; top: -15px;
  color: #fff;
  width: 50px; height: 50px;
  background: #FF9900;
  border-radius: 50%;
}
.what .content > section section p{ line-height: 1.8; margin-bottom: 30px; }
.what .contact h2{
  background: none !important;
  text-align: left !important;
  color: #333 !important;
  margin-bottom: 40px !important; 
}
.what .can-box h2{ background: #019DD0 !important; }
.what .can-box h2 span{ background-image:url(/product/svf/outline/img/ico_svf.png)  !important;}
.what .can-box h3{ color: #019DD0 !important; }
.what .can-box h3 span{ border-color: #019DD0 !important; }
.can-img{
  margin: 50px auto 0;
  max-width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.can-img figure{ width: calc(463/900*100%) ;}
.can-img ul{ width: calc(300/900*100%) ;}
.can-img ul li{ margin: 10px 0;}
.can-box .type,.what .link-list{ text-align: center;}
.can-box .type li{ 
  display: inline-block; 
  width: calc(350/1200*100%); 
  margin: 0 10px 15px;
}
.what .link-list li{ 
  display: inline-block;
  width: calc(400/1200*100%);
  margin: 80px 10px 0;
}
/*All END*/



/* ----------------------------------------------------
メディアクエリ設定 (tablet and PC) 769px～ 
---------------------------------------------------- */
@media only screen and (min-width: 769px) {
  .sp-only { display: none; }

  /*lineup menu*/
  .localnavi{ position: relative; overflow:inherit; }
/*  .local-menu li:hover .second { 
    opacity: 1;
    
    max-height: 9999px;
  }
*/ 
  .localnavi .second{
    position: absolute;
    overflow: hidden;
    max-height: 0;
    top: 70px; left: 0; right: 0;
    width: 100%;
    padding:0 30px 0;
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
    opacity: 0;
    z-index: 999;
    transition: .3s;
  }
  .localnavi .active .second { 
    opacity: 1 !important;
    max-height: 9999px !important;
  }
  .localnavi .second-box{
    display: flex; flex-direction: row-reverse;
    border-bottom: 1px dotted #e4e4e4;
    margin-top: 15px;
  }
  .localnavi .second-box:last-of-type{ border-bottom: none; }
  .localnavi .second-list{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -20px;
    padding: 15px 0;
  }
  .localnavi .second-list-box{
    width: 25%;
    padding-right: 30px;
    line-height: 1.3;
    font-size: 14px; font-size: 1.4rem;
    margin-bottom: 20px;
    overflow: auto;
  }
  .localnavi .second-list-box p{ font-weight: bold;  margin-bottom: 10px; }
  .localnavi .second-list-box li{ margin-bottom: 8px; position: relative; }
  .localnavi .second-list-box li::before{
    content: "";
    display: block;
    position: absolute;
    left: 0; top: 8px;
    width: 7px; height: 2px;
    background: #b40100;
  }
  .localnavi .second-list-box p a{ font-weight: bold; }
  .localnavi .second-list-box a{ display: inline-block; height: auto; }
  .localnavi .second-list-box a:hover{ box-shadow: none; text-decoration: underline; }
  .localnavi .logo{
    margin: 0 35px 15px 0;
    padding:0 35px 0 0;
    width: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 3px solid #3252a3;
  }
  .localnavi .second-box:nth-of-type(2) .logo{ border-color: #07abe1; }
  .localnavi .second-box:nth-of-type(3) .logo{ border-color: #0099a5; }
  .close-btn{
    position: absolute;
    top: 15px; right: 30px;
    font-size: 40px;font-size: 4.0rem;
    cursor: pointer;
  }
  .close{ opacity: 0 !important; max-height: 0 !important;}
  /*.active .sectond{ opacity: 1 !important; max-height: 9999px !important; }*/
/*(tablet and PC) 769px～  END*/
}

/* ----------------------------------------------------
メディアクエリ設定 (tablet　smartPhone)  0～960px
---------------------------------------------------- */
@media only screen and (max-width: 960px) {
/*0～960px*/

}

 /* ----------------------------------------------------
メディアクエリ設定 (tablet　only)  769～960px
---------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 960px) {
/*769～960px*/
}

/* ----------------------------------------------------
メディアクエリ設定 (smartPhone only)   0～768px
---------------------------------------------------- */
@media screen and (max-width: 768px) {
  #jump01, #jump02, #jump03, #jump04, #jump05, #function, #function02, #function03,#adress,#insurance,
  #estimate,#invoice_ja,#order,#stock,#sales,#ledger,#insured,#salary,#delivery,#shipment,#invoice,#reportcard,#analyze,#a01,#a02,#wdp{
    margin-top: 0px; padding-top: 0px;
  }
  #wdp .tit-linetop{ margin-top: 40px; }
  .index .localnavi {display: none;}
  .index .bg-title::before {padding: 50px 0;}
  .index h1{ width: 25%; }
  .index .pickup h2{
    font-size: 18px;font-size: 1.8rem;
    margin-bottom: 15px;
    }
  .index .slider .slick-slide{ margin: 0 5px; }
  .index .slider .slick-slide img{ margin-bottom: 10px; }
  .index .slider .slick-slide a{ font-size: 12px;font-size: 1.2rem; }
  .index .slider .slick-arrow{ display: none !important; }

  .index .news{
    width: 100%;
    margin: 15px 0 30px 0;
    display: block;
  }
  .index .news h2{
    margin: 0 0 15px;
    padding: 0;
    display: inherit;
    width: 100%;
    background: none;
    font-size: 18px;font-size: 1.8rem;
    font-weight: normal;
  }
  .index .news-list dl{
    margin: 0 -20px;
    padding: 20px;
    position: relative;
    line-height: 1.6;
  }
  .index .news-list dt{
    float: none;
    width: 150px;
    color: #b40200;
    font-weight: bold;
    font-size: 12px;font: 1.2rem;
    margin-bottom: 5px;
  }
  .index .news-list dd{
    float: none; width: 100%;
    padding-left: 0; 
  }
  .index .news-list a{ margin: 0 -20px; }
  .index .news-list a:hover{ box-shadow: none; }
  
  .index .about > div{ width: 100% }
  .index .about .about-box{
    flex-direction: row;
    height: auto;
  }
  .index .about .about-box div{ width: 50%; }
  .index .about .outline a{
    padding: 10% 0 35%;
    font-size: 12px; font-size: 1.2rem;
  }
  .index .about .blog a{
    padding: 20% 50% 20% 0;
    font-size: 12px; font-size: 1.2rem;
    line-height: 1.2;
  }
  .index .about .blog::before{ background-position: -40px bottom;}
  .index .about .blog a span{ font-size: 10px; font-size: 1.0rem;}
  .index .about .case a{
    padding: 50px 0;
    font-size: 14px; font-size: 1.4rem;
  }
  .index .type h2,.index .video h2{
    font-size: 18px;font-size: 1.8rem;
    margin-top: 40px;
  }
  .index .type ul,.index .video ul{ margin-top: 20px; }
  .index .type ul{ justify-content: center; }
  .index .type ul li{ width: 33%; margin-top: -1px;}
  .index .video li{ width: 49%; }
  .index .utility-links{ 
    display:block;
    margin: 40px 8px 0 8px;
    text-align: left;
  }
  .index .utility-links dl { margin-bottom: 30px; }
  .index .utility-links dl dt { padding: 6px 0 15px 47px; }


  /* 
    .lineup
    ----------------------------------- */
  .lineup .lead {margin-bottom: 30px;}
  .lineup-area {padding: 40px 10px;}
  .lineup-area .lineup-list {width: 100%;margin-bottom: 10px;}
  .lineup-area .lineup-list h2 {
    text-align: center;
    background: none;
    font-size: 18px;
    font-size: 1.8rem;
    padding: 0;
    margin-bottom: 20px;
    display: block;
  }
  .sp-select {
    width: 100%;
    padding: 20px 0;
    font-weight: bold;
    background: #fff;
    text-align: center;
    position: relative;
  }
  .sp-select::before {
    content: "";
    background: url(/common/img/arrow_red.png) left center / contain no-repeat;
    width: 8px;
    height: 12px;
    display: block;
    transform: rotate(90deg);
    position: absolute;
    right: 15px;
    top: calc(50% - 5px);
  }
  .select-box {width: 100%;background: #fff;}
  .product-menu button {
    background: none !important;
    padding: 10px 15px;
    margin-bottom: 0;
    width: 100%;
    text-align: left;
  }
  .lineup-area .lineup-box {width: 100%;display: block;}
  .lineup-area .lineup-box > section {
    width: calc(100% + 20px);
    border-right: none;
    border-color: #e5e5e5;
    margin-left: -10px;
  }
  .lineup-area .lineup-box > section a {
    background-color: transparent;
    padding: 15px 30px 15px 15px;
    background-position: right 15px center;
  }
  .lineup-area .lineup-box > section a:hover {box-shadow: none;}
  .lineup-area .lineup-box h3 {text-align: left;margin-bottom: 5px;}
  .lineup-img dt {font-size: 18px;font-size: 1.8rem;}
  .lineup .guide {padding: 30px 10px;}
  .lineup .guide p {font-size: 16px;font-size: 1.6rem;}
  .lineup-detail .lead dt {
    font-size: 16px;
    font-size: 1.6rem;
    margin-bottom: 15px;
    display: block;
  }
  .lineup-detail .lead dt span {
    display: table;
    margin: 0 0 5px;
    font-size: 14px;
    font-size: 1.4rem;
    padding: 3px 10px;
  }
  .lineup-detail .lead p, .box-area .box-txt > p {margin-bottom: 15px;}
  .box-area {margin-bottom: 30px}
  .box-img-r .box-img, .box-img-l .box-img, .box-area .box-img {margin: 15px 0 0 0;}
  .box-img-r, .box-img-l {display: block;margin-bottom: 30px;}
  .box-txt h4 {margin-top: 20px;}
  .box-img-r > section, .box-img-l > section, .box-area > section {margin-bottom: 0 !important;}
  .box-img-r p+p, .box-img-l p+p {margin-top: 15px;}
  .etc {display: block;}
  .etc > section {width: 100%;}
  .case h2 {margin-top: 0;}
  .case h2 span {
    font-size: 12px;
    font-size: 1.2rem;
    padding-left: 15px;
  }
  .case ul {margin-right: 0;float: none;}
  /*designer-box*/
  .designer-box .box-area ul {display: block;}
  .designer-box .box-area li {margin: 0 0 10px;}
  /* w-designer-box*/
  .lineup-detail table {
    margin-top: 30px;
    font-size: 12px;
    font-size: 1.2rem;
  }
  .lineup-detail table th, .lineup-detail table td {padding: 10px;}
  /* java-box*/
  .java-box .coad .box-area {float: none;margin: 0 0 20px 0;}
  /* net-box*/
  .net-box .between {display: block;}
  .net-box .between table {margin-bottom: 15px;}
  .net-box .between table, .net-box .between div {width: 100%;}
  .net-box .between div {margin-bottom: 30px;}
  .example .key-box .note {margin-bottom: 15px;}
  .example .key-box .note li ul {margin-left: 0;}
  
  /* system*/
  .system .note-box{ margin-bottom: 30px;}
  .system .note-box li{ 
    padding-bottom: 15px;
    margin-bottom: 15px;
    font-size: 12px;font-size: 1.2rem;
  }
  .system .note-box li:nth-of-type(1){ display: block; }
  .system .note-box li div{ width: 100%; margin:10px 0 0 0px; }
  .system-list{ display: block; }
  .system-list > div{ width: 100%; }
  .system-list p,.system-list p a{ font-size: 14px;font-size: 1.4rem; }
  .system-list ul{ margin-bottom: 20px; width: 100%; }
  .system-list ul li{
    font-size: 12px;font-size: 1.2rem;
    margin-right: 20px;
    font-feature-settings: "pkna"
  }
  .system .row-tbl dd li{ padding-left: 15px; }
  .system .note{ padding: 15px; margin-top: 30px; }
  .system .note dl{ display: block; margin: 10px 0 0; }
  .system .system-box > section{ padding-bottom: 0; }
  .system .system-box > section h3{ padding-top: 40px; margin-top: 0; }
  .system .system-box ol{ margin: 15px 0 0; }
  .system .system-box .note{ padding-bottom: 0; }
  .system .system-box .btn-black-s,.system .system-box .note{ margin-top: 15px; }

  /* 
    .example
    ----------------------------------- */
  .example h2+p {margin-bottom: 30px;}
  .example .client-box .page-menu {margin-bottom: 40px;}
  /* 
    .document
    ----------------------------------- */
  .document .doc-menu {display: block;}
  .document .doc-list {width: 100%;margin-bottom: 30px;}
  .document .doc-list .btn-black-s {margin-bottom: 10px;}
  .document .note-box {
    margin-top: 0;
    width: 90%;
    padding: 15px;
  }
  .document .sample section, .document .sample-list ul li {width: 100%;margin-bottom: 30px;}
  .document .sample-list ul li {margin-bottom: 10px;}
  .document .sample-img li {width: 100%;}
  /* 
    .sf
    ----------------------------------- */
  .sf h2+p, .sf table+p {margin-bottom: 15px !important;}
  .sf table, .sf-operation+p {width: 100%;}
  .sf table {font-size: 12px;font-size: 1.2rem;}
  .sf table th {padding: 10px 0;}.sf table td {padding: 10px;}
  /* 
    .shipmentstop
    ----------------------------------- */
  .stopshipment h2+p {text-align: left;margin-bottom: 15px;}
  .stopshipment h2+p br {display: none;}
  .stopshipment .btn-black-s a {
    margin: 25px auto 40px;
    font-size: 12px;
    font-size: 1.2rem;
  }
  .stopshipment table th {padding: 5px 0;}
  .stopshipment table td {
    padding: 5px 10px;
    width: 50%;
    vertical-align: middle;
  }
  .stopshipment h3 {margin-top: 40px;}
  .stopshipment h3+p {margin-bottom: 15px;}
  .stopshipment .policy li {width: 100%;margin-bottom: 30px;}
  .stopshipment .end h3 {
    font-size: 14px;
    font-size: 1.4rem;
    margin: 25px 0 10px;
  }
  .stopshipment .end th:first-of-type {width: 55%;}
  
  /* 
  .demo
  ----------------------------------- */
  .demo .lead { font-size: 16px; font-size: 1.6rem; }
  .demo .pdf-create{ display: block; }
  .demo .pdf-create div{ margin: 10px 0 0; text-align: center; }
  .demo .video h3{ margin-top: 40px;}
  .demo .video h3 span{ font-size: 20px; font-size: 2.0rem; }
  .demo .video ol li{ width: 100%;  min-height: 5.5em; }
  .demo .video .btn-black-s a{ margin: 15px auto 0; }
	.video-popup{	max-width: 100%; }
  .pdf-demo .lead p{ margin-bottom: 15px; }
  .pdf-demo .lead ul{ margin-right: -2%; }
  .pdf-demo .lead ul li{
    width: 46%;
    margin-right: 2%;
    font-size: 12px; font-size: 1.2rem;
  }
  .demo-list .demo-box dl{ padding-right: 20px; }
  .demo-list section{ width: 100%; margin-top: 15px; }
  .demo-list .demo-box dt{ margin-bottom: 5px; }
  .demo-list .demo-box dt span{ margin-bottom: 5px; }
  .pdf-demo .row-tbl+p{ margin-top: 0px; }
  .login-info{
    flex-direction: column-reverse;
    margin-bottom: 15px;
    align-items: center;
  }
  .login-info figure{ margin: 0 0 10px; }
  .login-txt{ font-size: 14px;font-size: 1.4rem;}
  .login-txt ul{ margin-top: 20px; }
  .login-txt ul li{ margin-left: 20px; }
  .login-btn{ display: block; }
  .login-btn li{ margin: 0;}
  .login-btn li:last-of-type{ text-align: center; margin-top: 30px; }
  .login-btn li p{ margin-top: 5px;} 
  
    /* 
  .what
  ----------------------------------- */
  .what .intro-box{flex-direction: column-reverse; margin-bottom: 30px;}
  .what .intro-txt li{
    font-size: 24px; font-size: 2.4rem;
    text-align: center;
    font-weight: bold;
  }
  .what .intro-txt li strong{ font-size: 40px; font-size: 4.0rem; }
  .what .intro-txt p{
    font-size: 16px; font-size: 1.6rem;
    margin: 15px 0;
  }
  .what .intro-box figure{ width: 60%; margin: 0 auto 15px; }
  .what .anniversary{ font-size: 18px; font-size: 1.8rem;}
  .what .anniversary span{ background-size: 40px auto; padding: 30px 0 30px 60px; }
  .what .intro > ul li{ text-align: left; margin-top: 30px; }
  .what .intro > ul li a{
    background-size: 30px auto !important;
    background-position: 10px center !important;
    font-size: 12px; font-size: 1.2rem;
    padding: 20px 0 20px 50px;
  }
  .what .intro > ul li a::before{ width: 6px; height: 6px; bottom: 5px; }
  .what .content > section h2{
    margin-top: 40px;
    font-size: 18px; font-size: 1.8em;
  }
  .what .content > section h2 span{
    background-size: 40px auto !important;
    padding: 20px 0 20px 60px;
  }
  .what .content > section section h3{
    font-size: 16px; font-size: 1.6rem;
    margin-top: 30px;
    line-height: 1.5;
    text-align: left;
  }
  .what .content > section section h3 span{
    margin-bottom: 15px;
    display: block;
    padding: 0 20px 15px 40px;
    width: 100%;
  }
  .what .content > section section h3 span::before{
    width: 30px; height: 30px;
    left: 0; top: 0 ;
  }
  .what .content > section section p{ margin-bottom: 20px; }
  .can-img{ display: block; }
  .can-img figure{ width: 100%; margin-bottom: 15px;}
  .can-img ul{ width: 100%; }
  .can-box .type{ margin:0 -1% 40px 0;}
  .can-box .type li{ width: 48%; margin:0 1% 10px 0;}
  .what .link-list li{ display: block; width: 100%; margin: 0 0 10px;}
/*smartPhone END*/
}