.mobile{
	display: none !important;
}
.hidden{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.m10{
    margin:10px !important;
}
.m20{
    margin:20px !important;
}
.mt20{
    margin-top:20px;
}
.mt50{
    margin-top:50px !important;
}
.mb50{
    margin-bottom:50px;
}
.mt20{
    margin-top:20px;
}
.mb30{
	margin-bottom:30px !important;
}
.mb50{
	margin-bottom:50px !important;
}
.mb100{
	margin-bottom:100px !important;
}
.ml100{
    margin-left:100px;
}
.mr100{
    margin-right: 100px;
}
.pb50{
    padding-bottom:50px !important;
}
.pb100{
    padding-bottom:100px !important;
}
.pt10{
	padding-top:1px !important;
}
.w220{
    width:220px !important;
    margin:auto;
}
.mb-150{
	margin-bottom:-150px;
}
.sectionFirst{
    margin-top:var(--header-height);
}
.sectionSecond{
    margin-top:calc(var(--header-height) + 50px);
}
.posr{
	position: relative !important;
}
div#headerWrapper0{
    width:100%;
    min-width: var(--min-width);
    background:#efefef;
    height: calc(100px + 8px);
    position: fixed;
    top:0;
    z-index: 1000;
    box-shadow: 0 3px 9px rgba(0,0,0,0.35);
}
div#headerWrapper{
    width:100%;
    min-width: var(--min-width);
    background:#fff;
    height: 100px;
    box-shadow: 0 3px 9px rgba(0,0,0,0.35);
    border-bottom:8px solid var(--main-color);
}
div#header{
    width:100%;
    min-width: var(--min-width);
    max-width: var(--max-width);
    height: 100px;
    margin:auto;
    /*overflow: hidden;*/
    position: relative;
    box-sizing: border-box;
    padding:0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div#header h1{
    margin-top:0px;
    margin-left:10px;
    float: left;
}
h1 img{
    width:304.5px;
    height: 44px;
    display: block;
    margin:auto;
    margin-bottom:5px;
}




a h1{
    color:var(--main-color);
}
div#header h1 a{
    width:100%;
    height: 100%;
    display: block;
}
ul.nav{
    width:860px;
	height: var(--header-height);
    display: flex;
    justify-content: space-between;
	color:var(--main-color);
	align-items: center;
	font-size: 15px; /* 適切なサイズに調整 */
}
ul.nav a{
	color:var(--main-color);
	display: block;
	width:100%;
	height: 100%;
}

ul.nav > li{
    text-align: center;
    cursor: pointer;
	line-height: 54px;
	width:calc((100% / 5) - 10px);
}
ul.nav > li span{
	width:100%;
	height: 100%;
	display: block;
	position: relative;
}
ul.nav > li span::after{
    content: "";
    width:0;
    height: 2px;
    background:var(--main-color);
    position: absolute;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    transition: all 0.2s;
}
ul.nav > li:hover span::after,
ul.nav > li.active span::after{
    content: "";
    width:100%;
    height: 3px;
    background:var(--main-color);
    position: absolute;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    transition: all 0.2s;
}
ul.nav div{
    position: absolute;
    width:100%;
	height: 70px;
	min-width: var(--min-width);
    margin:auto;
	left:0;
	right:0;
	top:68px;
	display: none;
	padding-bottom:10px;
	padding-top:30px;
}
ul.nav ul.child{
	width:100%;
    min-width: var(--min-width);
	display: flex;
	justify-content: space-around;
	align-items: center;
	background:var(--main-color);
	height: 70px;
	margin:10px auto;
	padding-bottom:10px;
}
ul.nav ul.child li{
    line-height: 40px;
	border-radius: 40px;
	padding:0 20px;
}
ul.nav  > li:hover div{
    display: block;
}
ul.nav ul.child li:hover,
ul.nav ul.child li.active{
    background:var(--white-color);
}
ul.nav ul.child li a{
    color:var(--white-color);
}
ul.nav ul.child li:hover a,
ul.nav ul.child li.active a{
    color:var(--main-color);
}

@media screen and (max-width: 1293px) {
	h1 img{
    width: 250px;
    height: auto;
}
  ul.nav{
    width:825px;

}

  } 
  
@media screen and (max-width: 1205px) {
	h1 img{
    width: 235px;
    height: auto;
     }
    ul.nav{
      width:800px;
     }

    ul.nav > li span{
      	font-size:15px;
      }

  } 




a.scsk img{
	width:100px;
}
div.top{
    width:100%;
    min-width:var(--min-width);
    margin-top:var(--header-height);
    margin-top:109px;
}
div.topWrapper {
    width:100%;
    min-width:var(--min-width);
    margin:auto;
    margin-top:var(--header-height);
    height: 50vh;
    position: relative;
    /*padding-top:30px;*/
    margin-bottom: 20px;
    box-shadow:0 0 30px rgba(0,0,0,0.3)
}
div.slides{
    width:100%;
    height:100% ;
    position: relative;
    overflow: hidden;
}

div.slides img{
    object-position: center center;
    width:100%;
    height:100%;
    object-fit: cover;
    z-index: 1
}
div.slides div{
    width:100%;
    height:100%;
}
div.slides div p{
    position: absolute;
    text-align: center;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    z-index: 2;
    width:100%;
    height: 2em;
    line-height: 2em;
    font-size:min(2.5vw,48px);
    font-weight: bold;
    background-color:rgba(255,255,255,0.3);
	background-position: center top 30px;
	background-repeat:no-repeat;
	padding-bottom:20px;
	padding-top:140px;
    color:#fff;
    text-shadow: 3px 3px 9px rgba(0,0,0,0.5);
	background-size:300px;
}
div.slides div p.servista{
	background-image:url("../images/logo_dataspider2.png");
}
div.slides div p.erp{
	background-image:url("../images/log_sap.svg")
}
div.slides div p.cloud{
	background-image:url("../images/logo_dataspidercloud2.png")
}
div.slides div p.square{
	background-image:url("../images/logo_square.png");
	background-size:150px;
}
div.slides div p.hulft{
	background-image:url("../images/logo_hulft.png")
}
/*slick*/
button.slick-prev {
	background: url("../images/arrow_prev.svg") no-repeat;
	background-size: 30px;
	left: 10px;
}
button.slick-prev:hover {
	background-image: url(../images/arrow_prev_on.svg) !important;
}
button.slick-next {
	background: url("../images/arrow_next.svg") no-repeat;
	background-size: 30px;
	right: 10px;
}
button.slick-next:hover {
	background-image: url(../images/arrow_next_on.svg) !important;
}
button.slick-arrow {
	text-indent: -9999px;
	position: absolute;
	width: 30px;
	height: 30px;
	z-index: 1;
	border: none;
	cursor: pointer;
}
button.slick-arrow{
    top:285px;
}
ul.slick-dots {
	width: 100%;
	height: 20px;
	text-align: center;
	overflow: hidden;
	position: absolute;
	bottom: 10px;
}
ul.slick-dots li {
	text-indent: -9999px;
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: var(--lightgreen-color);
	border-radius: 10px;
	margin: 5px;
}
li.slick-active {
	background-color: var(--main-color) !important;
}
/*end of slick*/
section.bg{
    width: 100%;
    min-width: var(--min-width);
    overflow: hidden;
    position: relative;
}
section.bg::before{
    content: "";
    width:calc(100vw - 5vw);
    width:calc(100vw);
    height: calc(100% - 150px);
    position: absolute;
    top:150px;
}
div.wrapper{
    width: 100%;
    min-width: var(--min-width);
    overflow: hidden;
    position: relative;
    padding-top:90px;
}
div.wrapper2{
    width: 100%;
    overflow: hidden;
    position: relative;
}
div.wrapper.brown{
    margin-top:100px;
    overflow: visible !important;
}
div.inner{
    width:var(--min-width);
    margin:auto;
    box-sizing: border-box;
    padding:30px 10px;
    background-color:#fff;
    display: flex;
    justify-content: space-between;
    position: relative;
    border-top:8px solid var(--main-color);
}
div.inner.noflex{
    display:block !important;
}
div.inner.tri_left{
    background-image:url("../images/tri_left.svg");
    background-size:25px;
    background-repeat: no-repeat;
    background-position: left top;
}
div.inner.tri_right{
    background-image:url("../images/tri_right.svg");
    background-size:25px;
    background-repeat: no-repeat;
    background-position: right top;
}
div.inner2 p,
div.inner3 p,
div.inner4 p{
    text-align:justify;
}
div.inner2 dl dd{
    color:var(--main-color);
    font-size:22px;
    font-weight:bold;
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
}
div#footerWrapper {
    width:100%;
    min-width:var(--min-width);
    margin-top:200px;
    background-color:var(--main-color);
    padding:50px 0;
    box-shadow: 0 -3px 9px rgba(0,0,0,0.35);
	background-image: linear-gradient(330deg, rgba(225, 225, 225, 0.05) 0%, rgba(225, 225, 225, 0.05) 33.333%,rgba(114, 114, 114, 0.05) 33.333%, rgba(114, 114, 114, 0.05) 66.666%,rgba(52, 52, 52, 0.05) 66.666%, rgba(52, 52, 52, 0.05) 99.999%),linear-gradient(66deg, rgba(181, 181, 181, 0.05) 0%, rgba(181, 181, 181, 0.05) 33.333%,rgba(27, 27, 27, 0.05) 33.333%, rgba(27, 27, 27, 0.05) 66.666%,rgba(251, 251, 251, 0.05) 66.666%, rgba(251, 251, 251, 0.05) 99.999%),linear-gradient(225deg, rgba(98, 98, 98, 0.05) 0%, rgba(98, 98, 98, 0.05) 33.333%,rgba(222, 222, 222, 0.05) 33.333%, rgba(222, 222, 222, 0.05) 66.666%,rgba(228, 228, 228, 0.05) 66.666%, rgba(228, 228, 228, 0.05) 99.999%),linear-gradient(90deg, rgb(26,39,146),rgb(40, 160, 253));
}
div#footer{
    width:var(--min-width);
    text-align: center;
    margin:auto;
    color:#fff;
}
div#footer h1{
    font-size:36px;
}
div#footer p.address{
    text-align:center;
    margin:20px auto;
}
div#footer h1 a{
    color:#fff;
}
div#footer h1 img{
    margin-bottom:20px;
	width:300px;
	height: auto;
}
div#footer > ul{
    margin:50px 10px;
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    display: flex;
    justify-content: space-between;
    padding:30px 0;
}
div#footer ul a{
    color:#fff;
}
div#footer > ul ul{
	text-align: left;
	margin-top:10px;
	font-size:16px;
	position: relative;
	left:60px
}
div#footer > ul ul li{
	list-style: disc;
}
div#footer p.copy{
    font-size:12px;
}
p.totop{
    width:50px;
    height: 50px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image:url("../images/totop.svg");
    background-size:50px;
    background-position: center top;
    position: fixed;
    right:20px;
    top:calc(50vh - 25px);
	display: none;
}
p.totop a{
    display: block;
    width:100%;
    height: 100%;
}
p.totop:hover{
    background-position: center bottom;
}
p.pankuzu {
    width:var(--min-width);
    margin:30px auto 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
	font-size:16px;
	padding-left:10px;
}
p.pankuzu span.next{
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent var(--main-color);
    margin:0 20px
}
p.pankuzu span.current{
    border-bottom:2px solid var(--main-color);
}
.w50 {
    width:calc((var(--min-width) / 2) - 20px) !important;
    margin:60px auto 30px !important;
}
h2.top {
    font-size:48px;
    
    color:var(--main-color);
    text-align: center;
    margin:100px auto 50px;
    font-weight: bold;
}
div.division {
    width:100%;
    display: flex;
    overflow: hidden;
    align-items: center;
}
div.division div{
    width:50%;
}
div.division div.left,
div.division div.right{
    height: 360px;
    margin-top:100px;
}
img.leftImg,
img.rightImg{
    width:480px;
    height: 360px;
    object-fit: cover;
    border-radius: 9px;
    position: absolute;
    top:-30px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
img.leftImg{
    right:30px;
}
img.rightImg{
    left:30px;
}
div.division div.left{
    float: left;
    position: relative;
}
div.division div.right{
    float: right;
    position: relative;
}
div.division div.orange{
    background-image: radial-gradient(circle at 11% 62%, rgba(205, 205, 205,0.04) 0%, rgba(205, 205, 205,0.04) 50%,rgba(149, 149, 149,0.04) 50%, rgba(149, 149, 149,0.04) 100%),radial-gradient(circle at 78% 10%, rgba(49, 49, 49,0.04) 0%, rgba(49, 49, 49,0.04) 50%,rgba(254, 254, 254,0.04) 50%, rgba(254, 254, 254,0.04) 100%),radial-gradient(circle at 92% 43%, rgba(34, 34, 34,0.04) 0%, rgba(34, 34, 34,0.04) 50%,rgba(206, 206, 206,0.04) 50%, rgba(206, 206, 206,0.04) 100%),linear-gradient(329deg, rgb(241, 77, 33),rgb(218, 227, 61));
}
div.division div.blue{
    background-image: radial-gradient(circle at 17% 77%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(197, 197, 197,0.04) 50%, rgba(197, 197, 197,0.04) 100%),radial-gradient(circle at 26% 17%, rgba(64, 64, 64,0.04) 0%, rgba(64, 64, 64,0.04) 50%,rgba(244, 244, 244,0.04) 50%, rgba(244, 244, 244,0.04) 100%),radial-gradient(circle at 44% 60%, rgba(177, 177, 177,0.04) 0%, rgba(177, 177, 177,0.04) 50%,rgba(187, 187, 187,0.04) 50%, rgba(187, 187, 187,0.04) 100%),linear-gradient(19deg, rgb(28, 117, 250),rgb(34, 2, 159));
}
div.division div.green{
    background-image: radial-gradient(circle at 97% 32%, rgba(131, 131, 131,0.05) 0%, rgba(131, 131, 131,0.05) 50%,rgba(20, 20, 20,0.05) 50%, rgba(20, 20, 20,0.05) 100%),radial-gradient(circle at 61% 40%, rgba(35, 35, 35,0.05) 0%, rgba(35, 35, 35,0.05) 50%,rgba(239, 239, 239,0.05) 50%, rgba(239, 239, 239,0.05) 100%),radial-gradient(circle at 47% 73%, rgba(122, 122, 122,0.05) 0%, rgba(122, 122, 122,0.05) 50%,rgba(5, 5, 5,0.05) 50%, rgba(5, 5, 5,0.05) 100%),linear-gradient(90deg, rgb(0, 209, 117),rgb(205, 241, 44));
}
div.division div.red{
    background-image: radial-gradient(circle at 79% 30%, rgba(230, 230, 230,0.04) 0%, rgba(230, 230, 230,0.04) 50%,rgba(12, 12, 12,0.04) 50%, rgba(12, 12, 12,0.04) 100%),radial-gradient(circle at 53% 89%, rgba(210, 210, 210,0.04) 0%, rgba(210, 210, 210,0.04) 50%,rgba(24, 24, 24,0.04) 50%, rgba(24, 24, 24,0.04) 100%),radial-gradient(circle at 92% 89%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(205, 205, 205,0.04) 50%, rgba(205, 205, 205,0.04) 100%),radial-gradient(circle at 21% 13%, rgba(124, 124, 124,0.04) 0%, rgba(124, 124, 124,0.04) 50%,rgba(243, 243, 243,0.04) 50%, rgba(243, 243, 243,0.04) 100%),radial-gradient(circle at 77% 0%, rgba(16, 16, 16,0.04) 0%, rgba(16, 16, 16,0.04) 50%,rgba(130, 130, 130,0.04) 50%, rgba(130, 130, 130,0.04) 100%),linear-gradient(90deg, rgb(247, 101, 31),rgb(249, 105, 208));
}
img.divPicLeft,
img.divPicRight{
    width:327px;
    height: 293px;
    object-fit: cover;
    position: absolute;
}
img.divPicLeft{
    top:-120px;
    right:385px;
}
img.divPicRight{
    top:-120px;
    left:385px;
}
div.white{
    position: relative;
}
div.divChild{
    width:600px !important;
    position: absolute;
    text-align: center;
}
div.divChild ul{
    text-align: left;
	padding:20px;
	border-radius: 8px;
	color:#fff;
	font-weight: bold;
	font-size:18px;
}
div.division:nth-child(1) ul{
    background:#13C170;
	margin-left:60px;
}
div.division:nth-child(2) ul{
    background:#DB6ABA;
	margin-right:60px;
}
div.division:nth-child(3) ul{
    background:#2240B5;
	margin-left:60px;
}
div.division:nth-child(4) ul{
    background:var(--orange-color);
	margin-right:60px;
}
div.division:nth-child(1) a.todetail{
    background-color:#13C170;
}
div.division:nth-child(2) a.todetail{
    background-color:#DB6ABA;
}
div.division:nth-child(3) a.todetail{
    background-color:#2240B5;
}
div.division:nth-child(4) a.todetail{
    background-color:var(--orange-color) !important;
}
div.division:nth-child(1) a.todetail:hover,
div.division:nth-child(2) a.todetail:hover,
div.division:nth-child(3) a.todetail:hover,
div.division:nth-child(4) a.todetail:hover{
    opacity: 0.8 !important;
}

div.division:nth-child(1) h4.green{
    color:#13C170;
    border-color:#13C170;
}

div.division:nth-child(2) h4.green{
    color:#DB6ABA;
    border-color:#DB6ABA;
}
div.division:nth-child(3) h4.green{
    color:#2240B5;
    border-color:#2240B5;
}

div.division:nth-child(4) h4.green{
    color:var(--orange-color);
	border-color:var(--orange-color);
}
div.divChild li{
    background-size:20px;
    min-height: 40px;
    margin-bottom:0.5em;
}
.anime div.divChild{
    opacity: 0;
    transform: scale(0.8);
    transition-delay:1s;
}
.isActv div.divChild{
    opacity: 1;
    transform: scale(1);
    transition: all .5s;
    transition-delay:1s;
}
div.right div.divChild{
    top:0;
    left:30px;
    bottom:0;
    margin:auto;
}
div.left div.divChild{
    top:0;
    bottom:0;
    right:30px;
    margin:auto;
    align-items: center;
}
div.divChild h4{
    font-size:32px;
    font-weight: bold;
    margin-top:20px;
    margin-bottom: 50px;
    text-align: left;
    padding-left: 50px;
    backgroun-size:30px;
}
div.divChild h4.orange{
    color:var(--orange-color);
    border-bottom:4px solid var(--orange-color);
}

div.divChild h4.green{
    color:var(--main-color);
    border-bottom:4px solid var(--main-color);
	font-family:Verdana, Geneva, "sans-serif"
}
div.divChild h4.red{
    color:var(--red-color);
    border-bottom:4px solid var(--red-color);
}
div.divChild h4.brown{
    color:var(--brown-color);
    border-bottom:4px solid var(--brown-color);
}
div.divChild p{
    font-size:18px;
    text-align: justify;
    line-height: 2em;
}
a.todetail {
    width:200px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color:var(--main-color);
    background-image:url("../images/arrow_fast.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size:14px;
    color:#fff;
    display: block;
    position: absolute;
    left:0;
    right:0;
    bottom:10px;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
    margin:auto;
	border-radius: 45px;
}
a.todetail:hover {
    background-color:var(--button-green-color);
}
div.resale {
    width:var(--min-width);
    margin:-140px auto auto auto;
    background:#fff;
    box-sizing: border-box;
    padding:50px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
div.second {
    width:var(--min-width);
    margin:40px auto auto auto;
    background:#fff;
    box-sizing: border-box;
    padding:50px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
div.resale h3{
    text-align: center;
    font-size:46px;
    
    color:var(--main-color);
    font-weight: bold;
}
div.resale h3 + p{
    width:640px;
    margin:50px auto;
    
    font-size:20px;
}
div.news{
    width:calc(33% - 30px);
    margin-bottom:10px;
    position: relative;
    padding:10px;
    background:url("../images/brown.png");
    box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
}
div.news img{
    width:calc(100%);
    height: 200px;
    object-fit: cover;
}
div.news p.date{
    font-size:14px;
    width:100px;
    height: 2em;
    line-height: 2em;
    position: absolute;
    top:20px;
    left:0;
    text-align: center;
    background:var(--orange-color);
    color:#fff;
}
div.news p.title{
    margin-top:10px;
    
    font-size:16px;
}
ul.notice{
	margin:0 100px 50px;
}
ul.notice li{
	list-style: disc;
}
ul.news {
	margin:50px auto;
}
ul.news li{
	display: flex;
	justify-content: flex-start;
	padding-bottom:5px;
	border-bottom: 1px solid #ccc;
	width:100%;
	margin-bottom: 10px
}
ul.news span.date{
	color:var(--main-color);
	font-size:14px;
	padding-right: 20px;
}
ul.news li a{
	position: relative;
	margin-left:15px;
}
ul.news li a::before{
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	border-color: transparent transparent transparent #ccc;
	left:-15px;
	top:5px
}
div.pointWrapper {
	display: flex;
	justify-content: space-between;
	margin-top:30px;
	margin-bottom: 30px;
}
div.point{
	width:calc(25% - 15px);
	background-repeat:no-repeat;
	background-position: center top 120px;
	background-size:80px;
	border:4px solid var(--red-color);
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
div.point h4{
	width:100%;
	height: 45px;
	line-height: 45px;
	background-color:var(--red-color);
	font-size:18px;
	font-weight: bold;
	color:#fff;
	text-align: center;
	padding-top:60px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-repeat: no-repeat;
	background-position: center top 13px;
	background-size:50px;
}
div.pointWrapper div.point:nth-child(1){
	background-image:url("../images/point01.svg");
	background-size:70px;
}
div.pointWrapper div.point:nth-child(2){
	background-image:url("../images/point02.svg");
	background-size:70px;
}
div.pointWrapper div.point:nth-child(3){
	background-image:url("../images/point03.svg");
	background-size:90px;
}
div.pointWrapper div.point:nth-child(4){
	background-image:url("../images/point04.svg");
	background-size:65px;
}
div.pointWrapper div.point:nth-child(1) h4{
	background-image:url("../images/num01.svg");
}
div.pointWrapper div.point:nth-child(2) h4{
	background-image:url("../images/num02.svg");
}
div.pointWrapper div.point:nth-child(3) h4{
	background-image:url("../images/num03.svg");
}
div.pointWrapper div.point:nth-child(4) h4{
	background-image:url("../images/num04.svg");
}
div.point p{
	padding:20px;
	padding-top:100px;
	font-weight: bold;
	text-align: justify;
}
div.point li{
	padding-left:20px;
	background:url("../images/icon_point.svg") no-repeat left top 5px;
	background-size:15px;
	margin-bottom:15px;
}

div.serviceWrapper {
	display: flex;
	justify-content: space-between;
	margin-top:50px;
	padding:10px 0;
}
div.serviceWrapper a{
	display: block;
	width:calc(50% - 30px);
}
dl.service{
	background-color:#ccc;
	width:calc(100%);
	height: 100px;
	overflow: hidden;
	border-radius: 100px;
	background-image:url("../images/arrow_fast.svg");
	background-size:50px;
	background-repeat:no-repeat;
	background-position:  right 20px center;
	position: relative;
}
dl.service::after{
	content: "";
	width:50px;
	height: 37px;
	background:url("../images/arrow_fast.svg") no-repeat;
	background-size:50px;
	position: absolute;
	top:0;
	bottom:0;
	right:20px;
	margin:auto;
}
dl.service dt{
	height:50px;
	line-height: 50px;
	text-align: center;
	background:var(--green-color);
	color:#fff;
}
dl.service:hover dt{
	background:var(--orange-color);
}
dl.service:hover dd{
	color:#fff;
}
dl.service:hover{
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
}
div.serviceWrapper dl.serevice:last-child dt{
	background:var(--orange-color);
}
dl.service dd{
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-weight: bold;
	font-size:20px;
}
h4.case {
	font-size:20px;
	color:var(--main-color);
	font-weight: bold;
	border-bottom: 2px solid var(--main-color);
	margin-top:20px;
	margin-bottom:20px;
	text-indent: 30px;
	position: relative;
}
h4.case::before{
	content: "";
	width:20px;
	height: 20px;
	border-radius: 20px;
	background:var(--main-color);
	position: absolute;
	left:0;
	top:4px;
}
img.case{
	width:100%;
	height: auto;
}
div.caseWrapper{
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px;
}
dl.case{
	width:calc(100% / 3);
	box-sizing: border-box;
	margin-top:20px;
}
dl.case dt{
	text-align: center;
	font-size:20px;
	font-weight: bold;
	padding:15px 0;
	color:#fff;
	position: relative;
}
dl.case dd{
	padding:15px 15px 15px 40px;
	text-align: justify;
}
div.caseWrapper dl:nth-child(1) dt{
	background:var(--green-color);
}
div.caseWrapper dl:nth-child(1) dt::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 20px;
	border-color: transparent transparent transparent var(--green-color);
	position: absolute;
	top:0;
	bottom:0;
	right:-20px;
	margin:auto;
	z-index: 1;
}
div.caseWrapper dl:nth-child(2) dt{
	background:var(--main-color);
}
div.caseWrapper dl:nth-child(2) dt::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 20px;
	border-color: transparent transparent transparent var(--main-color);
	position: absolute;
	top:0;
	bottom:0;
	right:-20px;
	margin:auto;
	z-index: 1;
}
div.caseWrapper dl:nth-child(1){
	background:var(--lightgreen-color);
}
div.caseWrapper dl:nth-child(2){
	background:var(--lightmain-color);
}
div.caseWrapper dl:nth-child(3){
	background:var(--lightred-color);
}
div.caseWrapper dl:nth-child(3) dt{
	background:var(--red-color);
}
div.caseWrapper dl:nth-child(1) dd{
	background:var(--lightgreen-color);
}
div.caseWrapper dl:nth-child(2) dd{
	background:var(--lightmain-color);
}
div.caseWrapper dl:nth-child(3) dd{
	background:var(--lightred-color);
}
dl.case li{
	margin-bottom:20px;
}
div.dlWrapper {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top:50px;
}
div.dlWrapper a{
	display: block;
	width:300px;
	height: 225px;
	margin-bottom:100px;
}
div.card {
    width:300px;
    height: 225px;
    cursor: pointer;
    position: relative;
    --offset-multiplier: 4px;
    -webkit-transition: -webkit-transform 0.6s ease;
    transition: -webkit-transform 0.6s ease;
    transition: transform 0.6s ease;
    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
    --translate: 0;
    -webkit-transform: translate(var(--translate), var(--translate));
    transform: translate(var(--translate), var(--translate));
    margin-bottom:20px;
}
div.card img{
    width:300px;
    height: 225px;
    object-fit: cover;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}
div.card:hover {
    --offset-multiplier: 6px;
}
div.card:hover {
    --translate: calc(-1px * (var(--cards) - 1));
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
div.card div.child {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1), 0px -4px 8px rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    -webkit-transition: inherit;
    transition: inherit;
    --translate: calc(var(--offset) * var(--offset-multiplier));
    -webkit-transform: translate(var(--translate), var(--translate));
    transform: translate(var(--translate), var(--translate));
    z-index: 5;
}
div.card div.child:nth-child(1) {
    --offset: 0;
    z-index: 4;
}
div.card div.child:nth-child(2) {
    --offset: 1;
    z-index: 3;
}
div.card div.child:nth-child(3) {
    --offset: 2;
    z-index: 2;
}
div.card div.child:nth-child(4) {
    --offset: 3;
    z-index: 1;
}
div.card div.child:nth-child(5) {
    --offset: 4;
    z-index: 0;
}
div.card p.date{
    position: absolute;
    z-index: 13;
    width:100px;
    height: 20px;
    line-height: 20px;
    background:#00cddc;
    top:20px;
    left:20px;
    text-align: center;
    color:#fff;
    font-size:14px;
}
div.card p.newMark{
    display: block;
    width:38px;
    height: 14px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background:url("../images/icon_new.svg") no-repeat;
    background-size:38px;
    position: absolute;
    top:10px;
    left:10px;
    z-index: 10;
}
div.card h3{
    position: absolute;
    z-index: 12;
    left:0;
    right:0;
    bottom:10px;
    padding:10px;
    padding-bottom:25px;
    width:270px;
    height: 2.5em;
    margin:auto;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap;*/
    background:#00cddc;
    color:#fff;
}
div.inquiry {
	width:640px;
	background:var(--main-color);
	border-radius: 8px;
	box-sizing: bord;
	padding:10px;
	color:#fff;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
}
a.inquiry{
	display: block;
	width:640px;
	margin:100px auto;
}
a:hover div.inquiry{
	background:var(--green-color);
}
div.inner2{
	width:100%;
	heigh:100%;
	text-align: center;
	border:2px solid #fff;
	box-sizing: border-box;
	border-radius: 6px;
}
div.inquiry h3{
	font-size:28px;
	font-weight: bold;
	margin:10px ;
	border-bottom:2px solid #fff;
}
div.inquiry ul{
	margin:10px;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
div.inquiry ul li{
	width:30%;
	margin-bottom:10px;
	position: relative;
}
div.inquiry ul li::before{
	content: "";
	width:18px;
	height: 18px;
	border-radius: 18px;
	position: absolute;
	background:#fff;
	top:2px;
	left:15px
}
div.inquiry p{
	font-size:24px;
	text-align: center;
	margin-bottom: 20px;
}
h2.second {
	margin-top:var(--header-height);
	width:100%;
	min-width:var(--min-width);
	height: 80px;
	line-height: 80px;
	font-size:36px;
	background-image: linear-gradient(135deg, rgb(62, 62, 62),rgb(179, 179, 179)),linear-gradient(135deg, rgba(84, 137, 228,0.5) 0%, rgba(84, 137, 228,0.5) 51%,rgba(69, 113, 204,0.5) 51%, rgba(69, 113, 204,0.5) 58%,rgba(54, 88, 180,0.5) 58%, rgba(54, 88, 180,0.5) 61%,rgba(38, 64, 157,0.5) 61%, rgba(38, 64, 157,0.5) 63%,rgba(23, 39, 133,0.5) 63%, rgba(23, 39, 133,0.5) 75%,rgba(8, 15, 109,0.5) 75%, rgba(8, 15, 109,0.5) 100%),linear-gradient(90deg, rgb(84, 137, 228) 0%, rgb(84, 137, 228) 51%,rgb(69, 113, 204) 51%, rgb(69, 113, 204) 58%,rgb(54, 88, 180) 58%, rgb(54, 88, 180) 61%,rgb(38, 64, 157) 61%, rgb(38, 64, 157) 63%,rgb(23, 39, 133) 63%, rgb(23, 39, 133) 75%,rgb(8, 15, 109) 75%, rgb(8, 15, 109) 100%); background-blend-mode:overlay, overlay, normal;
	color:#fff;
}
h2.second span{
	display: block;
	width:var(--min-width);
	margin:20px auto;
	position: relative;
	text-indent: 50px;
	font-family: Arial, Helvetica, "sans-serif"
}
h2.second span::before{
	content: "";
	width:5px;
	height: 40px;
	background:#fff;
	position: absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:10px;
}
p.general {
	margin:10px 70px;
	text-align: justify;
	overflow: hidden;
}
p.general.logo{
	background-repeat: no-repeat;
	background-position: left top 20px;
	background-size:200px;
	border-top:2px solid var(--main-color);
	border-bottom:2px solid var(--main-color);
	padding:20px 0;
	padding-left:250px;
}
p.general.nologo{
	border-top:2px solid var(--main-color);
	border-bottom:2px solid var(--main-color);
	padding:20px 0;
}
p.general.dataspider{
	background-image:url("../images/logo_dataspider2.png");
}
p.general.sap{
	background-image:url("../images/log_sap.svg");
}
p.general.cloud{
	background-image:url("../images/logo_dataspidercloud2.png");
}
p.general.hulft{
	background-image:url("../images/logo_hulft.png");
}
p.general.hulftsquare{
	background-image:url("../images/logo_hulftsquare.png");
	background-size:150px;
}
p.general.service{
	background-image:url("../images/logo_service.svg");
	background-size:100px;
	background-position: left 50px center;
}
p.general.download{
	background-image:url("../images/logo_download.svg");
	background-size:70px;
	background-position: left 50px center;
	padding-top:30px;
	padding-bottom: 30px
}
h3.general{
	margin:50px auto 25px;
	font-size:24px;
	line-height: 2em;
	text-indent: 50px;
	border-radius: 2em;
	color:#fff;
	background-image: radial-gradient(circle at 17% 77%, rgba(17, 17, 17,0.04) 0%, rgba(17, 17, 17,0.04) 50%,rgba(197, 197, 197,0.04) 50%, rgba(197, 197, 197,0.04) 100%),radial-gradient(circle at 26% 17%, rgba(64, 64, 64,0.04) 0%, rgba(64, 64, 64,0.04) 50%,rgba(244, 244, 244,0.04) 50%, rgba(244, 244, 244,0.04) 100%),radial-gradient(circle at 44% 60%, rgba(177, 177, 177,0.04) 0%, rgba(177, 177, 177,0.04) 50%,rgba(187, 187, 187,0.04) 50%, rgba(187, 187, 187,0.04) 100%),linear-gradient(19deg, rgb(28, 117, 250),rgb(34, 2, 159));
	position: relative;
}
h3.general::before{
	content:"";
	width:20px;
	height: 20px;
	border-radius: 20px;
	position: absolute;
	background:#fff;
	top:0;
	bottom:0;
	left:15px;
	margin:auto;
}
h4.general{
	margin-left:50px;
	font-size:20px;
	font-weight: bold;
	color:var(--main-color);
	border-bottom:2px solid var(--main-color);
	margin:25px 50px;
	position: relative;
	padding-left:30px;
}
h4.general::before{
	content: "";
	width:20px;
	height: 20px;
	border-radius: 18px;
	background:var(--main-color);
	position: absolute;
	left:0;
	top:4px;
}
dl.general{
	margin-top:20px;
	margin-bottom:30px;
}
dl.general img,
p.general img{
	max-width: 90%;
	text-align: center;
	margin:auto;
	display: block;
}
dl.general img.w75,
p.general img.w75{
	max-width: 75%;
}
dl.general dt{
	font-weight: bold;
	text-align: center;
	margin-bottom:10px;
}
dl.general dd.large img{
	max-width: 100%;
}
dl.general dd iframe{
	width:calc(100% - 100px);
	margin:0 50px;
	height: 450px;
}
div.ds05 {
	width:calc(100% - 100px);
	margin:25px 50px;
	display: flex;
	justify-content: space-between;
	background:url("../images/ds05.svg") center center no-repeat;
}
div.ds05 ul{
	width:480px;
	height: 520px;
	position: relative;
	transform: scale(0.9)
}
div.ds05 ul.before{
	background:url("../images/ds05_b.svg") center center no-repeat;
}
div.ds05 ul.after{
	background:url("../images/ds05_a.svg") center center no-repeat;
}
div.ds05 ul li{
	width:150px;
	height: 150px;
	border-radius: 150px;
	background:var(--main-color);
	display: flex;
	justify-content: space-around;
	align-items: center;
	color:#fff;
	position: absolute;
}
div.ds05 ul li:nth-child(1){
	top:0;
	left:0;
	right:0;
	margin:auto;
}
div.ds05 ul li:nth-child(2){
	top:90px;
	right:0;
}
div.ds05 ul li:nth-child(3){
	bottom:90px;
	right:0;
}
div.ds05 ul li:nth-child(4){
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
div.ds05 ul li:nth-child(5){
	bottom:90px;
	left:0;
}
div.ds05 ul li:nth-child(6){
	top:90px;
}
div.ds06 {
	margin:50px 50px;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background:url("../images/ds06.svg") no-repeat left 270px top;
	background-size:400px;
	padding-top:400px;
	height: 580px;
	position: relative;
}
div.ds06 div.type{
	width:calc(33% - 25px);
	float: left;
	font-size:16px;
	position: absolute;
}
div.type h4{
	font-size:20px;
	font-weight: bold;
	position: relative;
	margin-left:25px;
}
div.type h4::before{
	content: "";
	width:20px;
	height: 20px;
	border-radius: 20px;
	position: absolute;
	left:-25px;
	top:3px;
}
div.type1{
	top:0;
	left:0;
}
div.type2{
	top:400px;
	left:350px
}
div.type3{
	top:0px;
	right:0
}
div.type4{
	top:400px;
	left:0
}
div.type5{
	top:780px;
	left:0px
}
div.type6{
	top:780px;
	left:350px
}
div.type7{
	top:880px;
	left:350px
}
div.type8{
	top:780px;
	right:0
}
div.type1 h4::before{
	background:#e37a1f;
}
div.type2 h4::before{
	background:#cc3680;
}
div.type3 h4::before{
	background:#71206f;
}
div.type4 h4::before{
	background:#eac03a;
}
div.type5 h4::before{
	background:#898989;
}
div.type6 h4::before{
	background:#009245;
}
div.type7 h4::before{
	background:#103f83;
}
div.type8 h4::before{
	background:#3ABEFF;
}
div.type9 h4::before{
	background:#103f83;
}
div.type > ul{
	margin-left:20px;
}
div.type ul li{
	list-style: disc;
}
div.type ul ul{
	margin-left:20px;
}
div.type ul ul li{
	list-style: circle;
}
div.type ul ul div{
	padding:5px;
	margin:5px;
	margin-left:-25px;
	padding-left:20px;
	border:5px solid var(--lightblue-color);
	border-radius: 8px;
}
ol.notice{
	margin:0 70px;
	font-size:16px;
}
ol.notice li{
	position: relative;
}
ol.notice li::before{
	content: "※";
	position: absolute;
	left:-40px
}
div.ds07 {
	width:300px;
	height: 300px;
	border-radius: 300px;
	background-color:var(--orange-color);
	background-repeat:no-repeat;
	background-position: center top 40px;
	background-image:url("../images/icon_crown.svg");
	background-size:60px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin:auto;
	color:#fff;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
	position: relative;
}
div.ds07::after{
	content: "";
	width:280px;
	height: 280px;
	border-radius: 290px;
	position: absolute;
	border:3px dashed #fff;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
div.ds07 span.small{
	font-size:24px;
	display: block;
}
div.ds07 span.verysmall{
	font-size:14px;
	display: block;
}
div.ds07 span.large{
	font-size:42px;
	font-weight: bold;
}
div.feature {
	margin:0 70px;
}
div.feature h5{
	background:var(--orange-color);
	padding:10px 20px;
	border-radius: 100px;
	color:#fff;
	font-weight: bold;
	font-size:20px;
	margin-bottom:15px;
}
div.feature p{
	margin:0 0 30px 50px;
}
dl.support {
	margin:0 70px 20px;
	border:2px solid var(--orange-color);
	border-radius: 4px;
}
dl.support dt{
	padding:10px;
	background:var(--orange-color);
}
dl.support dd{
	padding:10px;
}
dl.support li{
	margin-left:30px;
	list-style: disc;
}
ul.hulft {
	margin:10px 70px;
	text-align: justify;
}
ul.hulft li{
	position: relative;
	margin-left:30px;
}
ul.hulft li::before{
	content: "";
	width:10px;
	height:	10px;
	border-radius:20px;
	border:3px solid var(--main-color);
	position: absolute;
	left:-25px;
	top:3px;
}
div.h3Wrapper{
	width:100%;
	height: 64px;
	color:#fff;
	overflow: hidden;
	border-radius: 6px;
	margin:50px auto;
}
div.h3Wrapper h3{
	width:20%;
	height: 64px;
	line-height: 64px;
	font-size:21px;
	text-indent: 20px;
	float: left;
	position: relative;
	background:#8cc63f;
}
div.h3Wrapper h3::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 64px 32px 0 0;
	position: absolute;
	top:0;
	right:-32px;
	border-color: #8cc63f transparent transparent transparent;
}
div.h3Wrapper span.title{
	display: block;
	width:calc(80% - 15px);
	height: 64px;
	line-height: 64px;
	padding-right: 15px;
	text-indent: 50px;
	text-align: left;
	float: right;
	background:#22b573;
	font-size:24px;
}
div.customer {
	margin:40px 70px 20px;
	box-sizing: border-box;
	position: relative;
	padding:40px 30px 30px;
	border-radius: 6px;
	border:4px solid var(--main-color);
}
div.customer h5{
	font-size:18px;
	width:290px;
	height: 40px;
	background:var(--main-color);
	line-height:40px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	border-radius:40px;
	border:4px solid var(--main-color);
	position: absolute;
	top:-25px;
	left:-20px;
}
div.customer p,
div.customer ol{
	font-size:20px;
}
div.customer ol{
	margin-left:30px;
}
div.customer ul li{
	background:url("../images/check.svg") left top no-repeat;
	background-size:20px;
	padding-left:30px;
	margin-top:10px;
}
div.certification{
	border:2px dashed var(--red-color);
	padding:20px;
	border-radius: 12px;
}
div.certification.noborder{
	border:none;
	padding:20px;
	border-radius: 12px;
}
p.strong{
	font-size:24px;
	line-height: 81px;
	background:url("../images/gold.png") left center no-repeat;
	padding-left:100px;
	margin-left:70px;
}
p.strong.nomark{
	background: none;
	line-height: 1.5em;
	margin-top:20px;
}
p.strong.nomark span.small{
	font-size:16px;
}
ul.careplus {
	margin:10px 70px;
}
ul.careplus li{
	background:url("../images/check.svg") left center no-repeat;
	background-size:20px;
	padding-left:30px;
	margin-bottom:20px;
}
div.batchWrapper {
	margin:20px 40px;
	display: flex;
	justify-content: space-between;
}
div.batch{
	width:calc(20% - 10px);
	box-sizing: border-box;
	padding:10px 5px;
	background:var(--main-color);
	border-radius: 4px;
	position: relative;
}
div.batch::before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	margin:auto;
}
div.batch:first-child::before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--main-color);
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	margin:auto;
}
div.batch::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent var(--main-color);
	position: absolute;
	top:0;
	bottom:0;
	right:-8px;
	margin:auto;
}
div.batch:last-child::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent #fff;
	position: absolute;
	top:0;
	bottom:0;
	right:-8px;
	margin:auto;
}
div.batch h5{
	text-align: center;
	line-height: 1.25em;
	color:#fff;
	font-size:17px;
	font-weight: bold;
	margin-bottom: 20px;
}
div.batch ul{
	margin:0 10px;
}
div.batch li{
	background:#fff;
	padding:5px;
	margin-bottom:10px;
	height: 80px;
	display: flex;
	align-items: center;
	font-size:16px;
	text-align: center;
	color:var(--main-color);
}
div.batch li span{
	text-align: center;
	display: block;
	width:100%;
}
p.part{
	text-align: center;
	background:var(--blue1-color);
	line-height: 2em;
	color:#fff;
	width:calc(100% - 140px);
	margin:30px auto;
	position: relative;
}
p.part::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 30px 30px;
	border-color: transparent transparent transparent var(--blue1-color);
	position: absolute;
	top:0;
	bottom:0;
	right:-30px;
	margin:auto;
}
p.part::before{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 30px 30px;
	border-color: transparent transparent transparent var(--blue1-color);
	position: absolute;
	top:0;
	bottom:0;
	left:-29px;
	margin:auto;
	transform: rotate(180deg);
}
table.service {
	margin:20px 70px;
}
table.service td{
	padding:15px 10px;
	font-size:16px;
	border:3px solid #fff;
	background:#efefef;
}
table.service tr td:first-child{
	width:10%
}
table.service tr td:nth-child(2){
	width:22%
}
table.service tr.head td{
	background:var(--main-color);
	color:#fff;
	text-align: center;
	font-weight: bold;
}
div.careplusWrapper {
	margin:20px 70px;
	display: flex;
	flex-direction:row-reverse;
	justify-content: space-between;
}
div.careplus{
	width:calc(33% - 25px);
	box-sizing: border-box;
	border:3px solid var(--main-color);
	border-radius: 4px;
	font-size:16px;
	position: relative;
}
div.careplus:nth-child(1)::after{
	content: "";
	background:url("../images/careplus_arrow.svg") center center no-repeat;
	background-size:40px;
	position: absolute;
	width:65px;
	height: 44px;
	top:0;
	bottom:0;
	left:-57px;
	margin:auto;
}
div.careplus:nth-child(2)::after{
	content: "";
	background:url("../images/careplus_arrow.svg") center center no-repeat;
	background-size:40px;
	position: absolute;
	width:65px;
	height: 44px;
	top:0;
	bottom:0;
	left:-57px;
	margin:auto;
}
div.careplus h4{
	background:var(--main-color);
	text-align: center;
	height: 80px;
	color:#fff;
	line-height: 80px;
	font-size:22px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
div.careplus ul{
	margin:20px;
	background-repeat:no-repeat;
	background-position: center top;
	padding-top:150px;
	background-size:200px;
}
div.careplus ul.c1{
	background-image:url("../images/careplus1.svg")
}
div.careplus ul.c2{
	background-image:url("../images/careplus2.svg");
}
div.careplus ul.c3{
	background-image:url("../images/careplus3.svg")
}
div.careplus ul li{
	background:url("../images/check.svg") left top 4px no-repeat;
	background-size:18px;
	padding-left:22px;
}
p.dss {
	text-align: center;
	padding-top:70px;
	margin:10px;
	font-weight: bold;
	background:url("../images/logo_dataspider2.png") center top 10px no-repeat;
	background-size:200px;
	color:var(--main-color);
	background-color:#efefef;
	border:2px solid var(--main-color);
	border-radius: 4px;
	font-size:18px;
}
dl.general2{
	margin:40px 70px 20px;
	box-sizing: border-box;
	position: relative;
	padding:40px 30px 30px;
	border-radius: 6px;
	border:4px solid var(--main-color);
}
dl.general2 > dt{
	font-size:18px;
	width:200px;
	height: 40px;
	background:#fff;
	line-height:40px;
	font-weight:bold;
	color:var(--main-color);
	text-align:center;
	border:4px solid var(--main-color);
	border-radius:40px;
	position: absolute;
	top:-25px;
	left:-20px;
}
dl.hulft{
	display: flex;
	justify-content: space-between;
}
dl.hulft dt,
dl.hulft dd{
}
dl.hulft h5{
	text-align: center;
	padding:10px 0;
	font-weight: bold;
	color:#fff;
	position: relative;
	margin-bottom:20px;
}
dl.hulft dt h5{
	background:var(--main-color)
}
dl.hulft dt h5::after{
	content: "";
	background:url("../images/arrow_hulft.svg") center center no-repeat;
	width:30px;
	height: 30px;
	background-size:20px;
	position: absolute;
	right:-28px;
	top:0;
	bottom:0;
	margin: auto;
}
dl.hulft dd h5{
	background:var(--orange-color);
}
dl.general2 dd > p{
	font-size:20px;
	margin:20px 0 0;
	text-align: center;
	font-weight: bold;
	color:#fff;
	background-color:var(--orange-color);
	background-image:url("../images/tip.svg");
	background-repeat: no-repeat;
	background-position: left 20px center;
	background-size:40px;
	padding-top:15px;
	padding-bottom: 15px;
}
div.hulft {
	position: relative;
	box-sizing: border-box;
	padding:10px;
	border-top-left-radius: 8px;
	padding-top:50px;
}
div.hulft.navy{
	border:2px solid var(--main-color)
}
div.hulft.orange{
	border:2px solid var(--orange-color)
}
div.hulft h6{
	text-align: center;
	border-radius: 30px;
	margin-bottom: 10px;
	width:200px;
	line-height: 2em;
	border-radius: 0;
	border-bottom-right-radius: 8px;
	position: absolute;
	top:0;
	left:0;
	color:#fff;
}
div.hulft.navy h6{
	background:var(--main-color);
}
div.hulft.orange h6{
	background:var(--orange-color);
}
p.newMark{
	width:38px;
	height: 14px;
	display: inline-block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background:url("../images/icon_new.svg") no-repeat;
	margin:0 10px;
}


div#service2 {
	padding-top:100px;
	margin-top:-100px;
}

div.hs_top {
	width:940px;
	margin:20px auto 0;
}
ul.hs_top{
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	margin-bottom:20px;
}
ul.hs_top li{
	width:calc(50% - 20px);
	box-sizing: border-box;
	padding:20px;
	padding-left:100px;
	background-color:var(--blue-color);
	color:#fff;
	align-items: center;
	display: flex;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: left 20px center;
}
ul.hs_top li.icon01{
	background-image:url("../images/hs_icon01.svg");
}
ul.hs_top li.icon02{
	background-image:url("../images/hs_icon02.svg");
}
ul.hs_top li.icon03{
	background-image:url("../images/hs_icon03.svg");
}
ul.hs_top li.icon04{
	background-image:url("../images/hs_icon04.svg");
}



div.hc_trans {
	width:940px;
	margin:20px auto;
}
div.hc_trans_top,
div.hc_trans_bottom{
	display: flex;
	justify-content: space-between;
	gap:20px;
}
div.hc_trans_top > div,
div.hc_trans_bottom > div{
	background-color:#ccc;
	box-sizing: border-box;
	padding:20px;
	width:calc(100% - 10px);
	border-radius: 4px;
	position: relative;
	margin-bottom:120px;
}
div.hc_trans_bottom > div{
	margin-bottom: 0;
	margin-top:120px;
}
div.hc_trans_top h4,
div.hc_trans_bottom h4{
	text-align: center;
	font-weight: bold;
}
div.hc_trans_top > div::after{
	content: "";
	background:url("../images/trans_blue_pc.svg");
	background-size:94px;
	width:94px;
	height:100px;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:-110px;
}
div.hc_trans_bottom > div::after{
	content: "";
	background:url("../images/trans_blue_pc.svg");
	background-size:94px;
	width:94px;
	height:100px;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	top:-110px;
}
div.hc_trans_mid{
	width:940px;
	margin:0 auto;
	border:10px solid var(--blue-color);
	border-radius: 24px;
	box-sizing: border-box;
	padding:30px;
}
div.hc_trans_mid h4{
	text-align: center;
}
div.hc_trans_mid_flex{
	display: flex;
	flex-wrap: wrap;
	gap:20px;
	margin-top:20px;
}
div.hc_trans_mid_flex > div{
	width:calc(50% - 10px);
	box-sizing: border-box;
	padding:20px;
	border-radius: 8px;
	margin-top:10px;
}
div.hc_trans_mid_flex > div h5{
	text-align: center;
	color:#fff;
	font-size: 20px;
	font-weight: bold;
}
div.hc_trans_mid_flex > div ul{
	margin:20px 10px 0 10px;
	padding-left:110px;
	background-repeat: no-repeat;
	background-position: left top 10px;
	min-height: 6em;
	background-size:60px;
}
div.hc_trans_mid_flex > div ul li{
	list-style: disc;
	color:#fff;
}
div.hc_trans_mid_flex > div.mid01{
	background-color:#F89C1C;
}
div.hc_trans_mid_flex > div.mid02{
	background-color:#6E84C1;
}
div.hc_trans_mid_flex > div.mid03{
	background-color:#B0B35B;
}
div.hc_trans_mid_flex > div.mid04{
	background-color:#57AAAA;
}
div.hc_trans_mid_flex > div.mid05{
	background-color:#939598;
}
div.hc_trans_mid_flex > div.mid06{
	background-color:#BF7B9A;
}
div.hc_trans_mid_flex > div.mid01 ul{
	background-image:url("../images/icon_mid01.svg");
}
div.hc_trans_mid_flex > div.mid02 ul{
	background-image:url("../images/icon_mid02.svg");
}
div.hc_trans_mid_flex > div.mid03 ul{
	background-image:url("../images/icon_mid03.svg");
}
div.hc_trans_mid_flex > div.mid04 ul{
	background-image:url("../images/icon_mid04.svg");
}
div.hc_trans_mid_flex > div.mid05 ul{
	background-image:url("../images/icon_mid05.svg")
}
div.hc_trans_mid_flex > div.mid06 ul{
	background-image:url("../images/icon_mid06.svg")
}
div.mid07{
	color:#fff;
	box-sizing: border-box;
	padding:20px;
	margin-top:20px;
	border-radius: 8px;
	padding-left:90px;
	background:url("../images/icon_mid07.svg") no-repeat left 30px center;
	background-size:60px;
	background-color:#7D9AA9;
	text-indent: 30px
}
div.hc_trans_top p,
div.hc_trans_bottom p {
	text-align: center;
	margin:20px auto 0;
}

div.hc_trans_top p span,
div.hc_trans_bottom p span{
	display: block;
	margin-top:5px;
	font-size: 16px;
}
div.hc_trans_top div.saas{
	display: flex;
	justify-content: space-between;
}
div.publiccloud {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
div.publiccloud.base {
	align-items: baseline;
}
div.tate{
	width:calc(50% - 10px);
	position: relative;
}
div.tate::before{
	content: "";
	background:url("../images/tate_bg.svg") left center no-repeat;
	width:120px;
	height: 150px;
	position: absolute;
	top:0;
	bottom:0;
	margin:auto;
	left:-60px;
}

div.operation {
	display: flex;
	gap:30px;
	align-items: center;
	width: 940px;
	margin:20px auto;
}
div.op1{
	flex-basis:16%;
	position: relative;
}
div.op1::after{
	content: "";
	position: absolute;
	margin:auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 20px;
	border-color: transparent transparent transparent var(--orange-color);
	top:0;
	bottom:0;
	right:-25px;
}
div.op2{
	flex-basis: 84%;
	display: flex;
	gap:10px;
	justify-content: space-between;
}
div.op2 div.column1 > div{
	flex-basis: 17%;
}
div.op2 div.column2 > div{
	flex-basis: 33%;
}
div.op2 div.column3 > div{
	flex-basis: 50%;
}
div.op2 div h4{
	text-align: center;
	background:red;
	color:#fff;
	font-size:16px;
	line-height: 2em;
	border-radius: 6px;
}
div.op2 div.column1 h4{
	background-color:#57AAAA;
}
div.op2 div.column2 h4{
	background-color:#6E84C1;
}
div.op2 div.column3 h4{
	background-color:#BF7B9A;
}
div.op2 > div > div{
	display: flex;
	justify-content: space-between;
	gap:10px;
}
div.op2 > div > div > p{
	border:2px solid #ccc;
	padding:10px;
	margin-top:10px;
	border-radius: 6px;
}
div.op1 p,
div.op2 p{
	text-align: center;
	min-height: 100px;
}
div.op1 p span,
div.op2 p span{
	font-weight: bold;
	display: block;
	font-size:16px;
	margin-bottom:10px;
}
div.op1 p span{
	color:var(--orange-color);
}
div.op1 p {
    border: 3px solid var(--orange-color);
    border-radius: 8px;
    padding: 10px;
    height: 145px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
div.op1 p img{
	width:80%;
}
div.op2 div.column3 div:first-child img{
	width:30% !important;
}

div.connector{
	width:940px;
	margin:20px auto;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	background-image:url("../images/hs_pic06.svg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:420px;
}
div.connector > div{
	width:33%;
	display: flex;
	flex-direction: column;
	gap:20px;
}
div.connect{
	width:100%;
	border-radius: 6px;
}
div.connect h5.connect{
	font-size:18px;
	text-align: center;
	color:#fff;
	font-weight: bold;
	line-height: 2em;
}
div.connect ul{
	margin:20px 20px 20px 40px;
	display: flex;
	flex-wrap: wrap;
	gap:10px;
}
div.connect ul li{
	width:calc(50% - 10px);
	list-style: disc;
	font-size:16px;
}
div.connect ul.noflex li{
	width: 100%;
	list-style: disc;
	font-size:16px;
}
div.connect.green h5{
	background-color:#B4B857;
}
div.connect.pink h5{
	background-color:#C47C9A;
}
div.connect.bluegreen h5{
	background-color:#58AAAA;
}
div.connect.orange h5{
	background-color:#F69F1E;
}
div.connect.blue h5{
	background-color:#7382BB;
}
div.connect.yellow h5{
	background-color:#F6BD26;
}
div.connect.green{
	border:2px solid #B4B857;
}
div.connect.pink{
	border:2px solid #C47C9A;
}
div.connect.bluegreen{
	border:2px solid #58AAAA;
}
div.connect.orange{
	border:2px solid #F69F1E;
}
div.connect.blue{
	border:2px solid #7382BB;
}
div.connect.yellow{
	border:2px solid #F6BD26;
}
.right-align {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: normal;
    font-size: 11pt;
    padding-right: 63px;
}

.my-container {
    position: relative;
    max-width: 900px; 
    margin: 0 auto; /* 自動で中央寄せ */
}

.my-rounded-box {
    border: 2px solid #cccccc;
    border-radius: 10px;
    padding: 35px 20px 23px 20px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background-color: white;
}


.my-title-box-yellow {
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    background-color: #FE871A;
    padding: 5px 10px;
    font-weight: bold;
    position: absolute;
    top: -10px;
    left: 10px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.my-title-box-blue {
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    background-color: #2683C6;
    padding: 5px 10px;
    font-weight: bold;
    position: absolute;
    top: -10px;
    left: 10px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-title-box-yellow-tag {
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    background-color: #FE871A;
    padding: 5px 30px 5px 10px ;
    font-weight: bold;
    position: absolute;
    top: -10px;
    left: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-title-box-blue-tag {
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    background-color: #2683C6;
    padding: 5px 30px 5px 10px ;
    font-weight: bold;
    position: absolute;
    top: -10px;
    left: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-title-box-gray-tag {
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    background-color: #7A8C8E;
    padding: 5px 30px 5px 10px ;
    font-weight: bold;
    position: absolute;
    top: -10px;
    left: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.my-title-box-yellow-tag::before,
.my-title-box-blue-tag::before,
.my-title-box-gray-tag::before {
  content: "";
  width: 20px;
  height: 20px; 
  background: linear-gradient(-45deg, #FFF 48%, #000 48%, #000 52%, #fff 52%); 
  border-top: 1px solid #000; 
  border-left: 1px solid #000; 
  box-shadow: -1px -1px 2px #ccc; 
  display: inline-block;
  position: absolute;
  bottom: -1px; 
  right: -1px; 
}

.my-rounded-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.my-rounded-box li {
    padding: 2px 0;
}

.my-rounded-box li:last-child {
    border-bottom: none;
}

.highlight {
    font-weight: bold;
}

.soap-adapter {
  margin:-11px 18px 5px 5px ;
  position: absolute;
  top: -10px;
  right: -2px;
  background-color: #f4cccc;
  padding: 5px;
  border-radius: 5px;
  color: #000000;
  border: 2px solid #ED7F7F;
  font-weight: bold;
}


.bulk-adapter {
  margin:-11px 18px 5px 5px ;
  position: absolute;
  top: -10px;
  right: -2px;
  background-color: #cfe2f3;
  padding: 5px;
  border-radius: 5px;
  color: #000000;
  border: 2px solid #2E75B6;
  font-weight: bold;
}

.metadata-adapter {
  margin:-11px 18px 5px 5px ;
  position: absolute;
  top: -10px;
  right: -2px;
  background-color: #fff2cc;
  padding: 5px;
  border-radius: 5px;
  color: #000000;
  border: 2px solid #FFC000;
  font-weight: bold;
}

.feature-title-steelblue,
.feature-title-lightblue,
.feature-title-paleyellow,
.feature-title-red {
  margin: 15px 70px;
  padding: 8px 19px;
  font-weight: bold;
  margin-bottom: 8px;
  width: 202px;
}

.feature-title-steelblue {
	border-left: 7px solid #192E4F;
	background-color: #D1D9E6;
	color: #192E4F;
  }

  .feature-title-red {
	border-left: 7px solid #A33A3A;
	background-color: #E9D5D5;
	color: #A33A3A;
  }
  
.feature-title-royalblue {
  margin: 15px 70px;
  padding: 8px 19px;
  font-weight: bold;
  margin-bottom: 8px;
  width: fit-content;
}

.feature-title-royalblue {
	border-left: 7px solid #4472C4;
	background-color: #E9EFF7;
	color: #4472C4;
  }

.feature-title-lightblue {
	border-left: 7px solid #459ab2;
	background-color: #e9f5f9;
	color: #192E4F;
  }

.feature-title-paleyellow {
	border-left: 7px solid #eeee2b;
	background-color: #f9f9e0;
	}
  
  
  .dataspidar-section {
	  display: flex; 
	  flex-wrap: wrap; 
	  align-items: center; 
	  padding: 40px;
	  margin: 35px auto;
	  max-width: 1100px;
	  background-color: #f8f9faec;
	  border-radius: 11px;
	  box-shadow: 0 0 20px rgba(0,0,0,0.3);
	  overflow: hidden;
	  width: var(--min-width);
	  }
	.dataspidar-section img {
	  width: 44%; 
	  height: auto;
	  border-radius: 5px ; 
	  object-fit: cover;
	  margin-right: 40px; 
	}
	.content {
	  width: 52%; 
	}
	.content p b {
	  font-size: 1.3em;  
	}
	.dataspidar-section h2 {
	  margin-bottom: 10px;
	  font-size: 1.8em; 
	  color: #333;
	}
	.dataspidar-section p {
	  margin-bottom: 10px;
	  line-height: 1.4;
	  color: #555;
	  font-size: 15.3px;
	}
	.btn {
	  display: inline-block;
	  padding: 15px 30px;
	  background-color: #007bff;

	  text-decoration: none;
	  border-radius: 8px;
	  transition: background-color 0.3s ease;
	  font-weight: bold;
	  display: block;  
	  margin: 0 auto; 
	  width: fit-content; 
	  margin-top: 20px;
	  }
	a.btn:link
	  {
	  color: #ffffff;
	}
	.no-visited-style:visited {
 	 color: #ffffff;
 	 text-decoration: underline; /* デフォルトのテキスト装飾を適用 */
	}

	.btn:hover {
	  background-color: #0056b3;
	}
	/* レスポンシブ対応 */
	@media screen and (max-width: 1078px) {
	  .dataspidar-section {
		flex-direction: column;
	  }
	  .dataspidar-section img {
		width: 40%;
		border-radius: 5px; 
		margin-right: 0;
		margin-bottom: 20px;
	  }
	  .content {
		width: 100%;
	  }
	  .dataspidar-section h2{
		  font-size: 1.5em;
	  }
	}
@media (min-width: 769px) and (max-width: 1078px) {
	.dataspidar-section {{
      margin: 35px auto auto auto;
      }
}