body,
form input{
	font:16px/1.5 "メイリオ", "Meiryo", ryumin,Helvetica, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	-webkit-text-size-adjust: 100%;
}
.openbtn1{
	background:#fff;
	cursor: pointer;
    width: 50px;
    height:50px;
    position: absolute;
    top:15px;
    right:15px;
    transform: scale(0.88) !important;
}

/*ボタン内側*/
.openbtn1 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
	background: var(--main-color);
  	width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
	top:15px;	
}

.openbtn1 span:nth-of-type(2) {
	top:23px;
}

.openbtn1 span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
.desktop{
	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:-120px;
}
.sectionFirst{
    margin-top:var(--header-height);
}
.sectionSecond{
    margin-top:calc(var(--header-height) + 50px);
}
.posr{
	position: relative !important;
}
div#headerWrapper0{
    width:100%;
    min-width: 100%;
    background:#efefef;
    height: calc(80px + 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: 100%;
    background:#fff;
    height: 80px;
    box-shadow: 0 3px 9px rgba(0,0,0,0.35);
    border-bottom:8px solid var(--main-color);
}
div#header{
    width:100%;
    min-width: 100%;
    max-width: 100%;
    height: 80px;
    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:0px;
    float: left;
}
h1 img{
    width:208px;
    height: 30px;
    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:100%;
	color:var(--main-color);
	position: absolute;
	top:88px;
	right:0;
	background:#fff;
	box-shadow: 0 3px 9px rgba(0,0,0,0.35);
	
	display: none;
}
ul.nav li{
	width:100%;
	position: relative;
}
ul.nav li::before{	
	content: "";
	width:2px;
	height: 20px;
	background:var(--main-color);
	position: absolute;
	top:0;
	left:7px;
	bottom:0;
	margin:auto;
}
ul.nav li > a,
ul.nav li span{
	display: block;
	width:100%;
	height: 45px;
	border-bottom:1px solid var(--main-color);
	line-height: 45px;
	text-indent: 20px;
}
ul.nav li span.down{
	background-color:#efefef;
	background-image:url("../images/arrow_down.svg");
	background-repeat: no-repeat;
	background-size:12px;
	background-position: right 20px center;
}
ul.child a{
	text-indent: 50px !important;
	font-size:14px;
	display: block;
}
a.scsk img{
	width:50px;
	position: absolute;
	top:0;
	bottom:0;
	right:65px;
	margin:auto;
}
div.top{
    width:100%;
    min-width:100%;
    margin-top:88px;
}
div.topWrapper {
    width:100%;
    min-width:100%;
    margin:auto;
    margin-top:88px;
    height: 40vh;
    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;
    height: 2em;
    line-height: 1.25em;
    font-size:min(4.5vw,48px);
    font-weight: bold;
    background-color:rgba(255,255,255,0.3);
	background-position: center top 20px;
	background-repeat:no-repeat;
	padding-bottom:20px;
	padding-top:80px;
	padding-left:10px;
	padding-right: 10px;
    color:#fff;
    text-shadow: 3px 3px 9px rgba(0,0,0,0.5);
	background-size:150px;
}
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.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: 100%;
    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: 100%;
    overflow: hidden;
    position: relative;
    padding-top:10px;
}
div.wrapper2{
    width: 100%;
    overflow: hidden;
    position: relative;
}
div.wrapper.brown{
    margin-top:10px;
    overflow: visible !important;
}
div.inner{
    width:100%;
    margin:auto;
    box-sizing: border-box;
    padding:10px 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:100%;
    margin-top:50px;
    background-color:var(--main-color);
    padding:20px 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:100%;
    text-align: center;
    margin:auto;
    color:#fff;
}
div#footer h1{
}
div#footer p.address{
    text-align:center;
    margin:20px auto;
}
div#footer h1 a{
    color:#fff;
}
div#footer h1 img{
    margin-bottom:20px;
	width:200px;
	height: auto;
}
div#footer > ul{
	display: none;
}
div#footer p.copy{
    font-size:12px;
}
p.totop{
    width:40px;
    height: 40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image:url("../images/totop.svg");
    background-size:40px;
    background-position: center top;
    position: fixed;
    right:10px;
    bottom:20px;
	display: none;
}
p.totop a{
    display: block;
    width:100%;
    height: 100%;
}
p.totop:hover{
    background-position: center bottom;
}
p.pankuzu {
    width:calc(100% - 20px);
    margin:10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
	font-size:16px;
	
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	overflow: auto;
	white-space: nowrap;
	padding-bottom:10px;
}
p.pankuzu span.next{
    display: block;
    height:0;
    border-style: solid;
    border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent var(--main-color);
    margin:0 10px;
	align-items: center;
}
p.pankuzu span.current{
    border-bottom:2px solid var(--main-color);
}
.w50 {
    width:calc((100% / 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%;
}
div.division div{
	margin-top:50px;
}
div.division div.left,
div.division div.right{
    /*margin-top:140px;*/
}
img.leftImg,
img.rightImg{
	width:100%;
    height: auto;
    object-fit: cover;
    border-radius: 9px;
    position: absolute;
    top:-30px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
	display: none;
}
img.leftImg{
    right:30px;
}
img.rightImg{
    left:30px;
}
div.division div.left{
    position: relative;
}
div.division div.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;
	display: none;
}
img.divPicLeft{
    /*top:-120px*/;
    /*right:385px;*/
}
img.divPicRight{
    /*top:-120px*/;
    /*left:385px;*/
}
div.white{
    position: relative;
}
div.divChild{
    text-align: center;
	margin:10px;
}
div.divChild ul{
    text-align: left;
	padding:15px 15px 5px; 
	border-radius: 8px;
	color:#fff;
	font-weight: bold;
	font-size:18px;
	margin:10px;
}
div.division:nth-child(1) ul{
    background:var(--orange-color);
}
div.division:nth-child(2) ul{
    background:#DB6ABA;
}
div.division:nth-child(3) ul{
    background:#2240B5;
}
div.division:nth-child(4) ul{
    background:#13C170;
}
div.division:nth-child(1) a.todetail{
    background-color:var(--orange-color) !important;
}
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:#13C170;
}
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:var(--orange-color);
	border-color:var(--orange-color);
	background:url("../images/logo_hulft.png") center top no-repeat;
	background-size:150px;
	padding-top:50px;
	margin-top:140px;
}
div.division:nth-child(2) h4.green{
    color:#DB6ABA;
    border-color:#DB6ABA;
	background:url("../images/logo_dataspider2.png") center top no-repeat;
	background-size:150px;
	padding-top:50px;
}
div.division:nth-child(3) h4.green{
    color:#2240B5;
    border-color:#2240B5;
	background:url("../images/log_sap.svg") center top no-repeat;
	background-size:150px;
	padding-top:60px;
}
div.division:nth-child(4) h4.green{
    color:#13C170;
    border-color:#13C170;
	background:url("../images/logo_dataspidercloud2.png") center top no-repeat;
	background-size:150px;
	padding-top:50px;
}
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:22px;
    font-weight: bold;
    margin-top:20px;
    margin-bottom: 10px;
    text-align: left;
    padding-left: 50px;
    background:url("../images/h3_leaf.svg") right center no-repeat;
    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;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
    margin:auto;
	margin-top:20px;
	border-radius: 45px;
}
a.todetail:hover {
    background-color:var(--button-green-color);
}
div.resale {
    margin:10px ;
    background:#fff;
    box-sizing: border-box;
    padding:20px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
div.second {
    margin:10px ;
    background:#fff;
    box-sizing: border-box;
    padding:10px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
}
div.resale h3{
    text-align: center;
    font-size:24px;
    
    color:var(--main-color);
    font-weight: bold;
}
div.resale h3 + p{
    margin:20px auto;
    
    font-size:18px;
}
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;
	font-size:16px;
}
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 {
	margin-top:30px;
	margin-bottom: 30px;
}
div.point{
	width:calc(100%);
	background-repeat:no-repeat;
	background-position: center top 65px;
	background-size:80px;
	margin:auto;
	margin-bottom:10px;
}
div.point h4{
	width:100%;
	height: 45px;
	line-height: 45px;
	background-color:var(--red-color);
	font-size:18px;
	font-weight: bold;
	color:#fff;
	box-sizing: border-box;
	text-align: center;
	text-indent: -60px;
	padding-left:60px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background-repeat: no-repeat;
	background-position: left 10px top 8px;
	background-size:30px;
}
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;
	border:4px solid var(--red-color);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	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 {
	margin-top:10px;
	padding:10px 0;
}
div.serviceWrapper a{
	display: block;
	width:calc(100% - 10px);
	margin-bottom:10px;
}
dl.service{
	background-color:#ccc;
	width:calc(100%);
	height: 100px;
	overflow: hidden;
	border-radius: 100px;
	background-image:url("../images/arrow_fast.svg");
	background-size:30px;
	background-repeat:no-repeat;
	background-position:  right 20px center;
	position: relative;
}
dl.service::after{
	content: "";
	width:30px;
	height: 37px;
	background-image:url("../images/arrow_fast.svg");
	background-repeat:no-repeat;
	background-position: center center;
	background-size:30px;
	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{
}
dl.case{
	width:calc(100%);
	box-sizing: border-box;
	margin-top:20px;
	position: relative
}
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)::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color:var(--green-color) transparent transparent transparent ;
	position: absolute;
	right:0;
	left:0;
	bottom:20px;
	margin:auto;
	z-index: 100;
}
div.caseWrapper dl:nth-child(2) dt{
	background:var(--main-color);
}
div.caseWrapper dl:nth-child(2)::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color:var(--main-color) transparent transparent transparent ;
	position: absolute;
	bottom:20px;
	right:0;
	left:0;
	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 {
	padding-bottom: 5px;
}
div.dlWrapper a{
	display: block;
	width:300px;
	height: 225px;
	margin:auto;
	margin-bottom:50px;
}
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 {
	background:var(--main-color);
	border-radius: 8px;
	margin:0 10px;
	box-sizing: bord;
	padding:10px;
	color:#fff;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.35);
}
a.inquiry{
	display: block;
	margin:20px 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:20px 10px 10px;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
div.inquiry ul li{
	width:30%;
	margin-bottom:10px;
	position: relative;
	font-size:14px;
}
div.inquiry p{
	font-size:20px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
}
h2.second {
	margin-top:80px;
	width:100%;
	min-width:100%;
	font-size:18px;
	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;
	padding:10px 0
}
h2.second span{
	display: block;
	width:100%;
	margin:10px auto;
	box-sizing: border-box;
	position: relative;
	padding-left: 30px;
	padding-right: 10px;
	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;
	text-align: justify;
}
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-top:85px;
}
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");
	padding-top:105px;
}
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:140px;
}
p.general.service{
	background-image:url("../images/logo_service.svg");
	padding-top:105px;
	background-position: center top 10px;
	background-size:80px
}
p.general.download{
	background-image:url("../images/logo_download.svg");
	background-size:70px;
	background-position: center top 10px;
	padding-top:90px;
	padding-bottom: 30px
}
h3.general{
	margin:10px;
	font-size:18px;
	line-height: 1.25em;
	border-radius: 2em;
	padding:10px 0;
	padding-left: 50px;
	padding-right: 10px;
	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:10px;
	font-size:20px;
	font-weight: bold;
	color:var(--main-color);
	border-bottom:2px solid var(--main-color);
	margin:20px 10px;
	position: relative;
	padding-left:25px;
}
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:10px;
	margin-bottom:20px;
}
dl.general img,
p.general img{
	max-width: 100%;
	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% - 20px);
	margin:10px;
	height: 250px;
}
div.ds05 {
	display: none;
}
img.servista01{
	width:100%;
	height: auto;
	margin:10px auto;
}
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:10px;
	background:url("../images/ds06.svg") no-repeat center top;
	background-size:300px;
	padding-top:300px;
	position: relative;
}
div.ds06 div.type{
	font-size:16px;
}
div.type h4{
	font-size:20px;
	font-weight: bold;
	position: relative;
	margin-left:25px;
	margin-top:20px;
}
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.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:10px 10px 10px 40px;
	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 10px;
}
div.feature h5{
	background:var(--orange-color);
	padding:10px 20px;
	border-radius: 100px;
	color:#fff;
	font-weight: bold;
	font-size:18px;
	margin-bottom:15px;
}
div.feature p{
	margin:10px;
}
dl.support {
	margin:10px;
	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;
	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: 45px;
	color:#fff;
	overflow: hidden;
	border-radius: 6px;
	margin:10px auto;
}
div.h3Wrapper h3{
	width:30%;
	height: 45px;
	line-height: 45px;
	font-size:12px;
	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(70% - 15px);
	height: 45px;
	line-height: 45px;
	padding-right: 15px;
	text-indent: 50px;
	text-align: left;
	float: right;
	background:#22b573;
	font-size:18px;
}
div.customer {
	margin:10px;
	box-sizing: border-box;
	position: relative;
	padding:40px 30px 30px;
	border-radius: 6px;
	border:4px solid var(--main-color);
	margin-top:25px;
}
div.customer h5{
	font-size:18px;
	width:auto;
	min-width: 233px;
	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:-10px;
}
div.customer p,
div.customer ol{
}
div.customer ol{
	margin-left:20px;
}
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:10px;
	border-radius: 12px;
}
div.certification.noborder{
	border:none;
	padding:20px;
	border-radius: 12px;
}
p.strong{
	font-size:20px;
	background:url("../images/gold.png") center top no-repeat;
	padding-top:100px;
}
p.strong.nomark{
	background: none;
	line-height: 1.5em;
	margin-top:20px;
	padding:0;
}
p.strong.nomark span.small{
	font-size:16px;
}
ul.careplus {
	margin:10px;
}
ul.careplus li{
	background:url("../images/check.svg") left center no-repeat;
	background-size:20px;
	padding-left:30px;
	margin-bottom:20px;
}
div.batchWrapper {

}
div.batch{
	width:calc(100% - 10px);
	box-sizing: border-box;
	padding:10px 5px;
	background:var(--main-color);
	border-radius: 4px;
	position: relative;
	margin:auto;
	margin-bottom: 20px;
}
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 8px 0 8px;
	border-color:  var(--main-color) transparent transparent transparent ;
	position: absolute;
	bottom:-8px;
	right:0;
	left:0;
	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:16px;
	font-weight: bold;
	margin-bottom: 20px;
}
div.batch ul{
	margin:10px;
}
div.batch li{
	background:#fff;
	padding:5px;
	margin-bottom:10px;
	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% - 20px);
	margin:10px;
	margin-bottom: 30px;
	position: relative;
}
table.service {
	margin:10px;
}
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:10px;
}
div.careplus{
	width:calc(100% - 20px);
	box-sizing: border-box;
	border:3px solid var(--main-color);
	border-radius: 4px;
	font-size:16px;
	position: relative;
	margin:auto;
	margin-bottom: 55px;
}
div.careplus:nth-child(1)::after,
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;
	bottom:-50px;
	left:0;
	right:0;
	margin:auto;
	transform: rotate(90deg)
}
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:10px;
	margin-top:30px;
	box-sizing: border-box;
	position: relative;
	padding:40px 10px 10px;
	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:-10px;
}
dl.hulft{
	display: flex;
	justify-content: space-between;
	flex-flow: column;
}
dl.hulft dt{
	margin-bottom:40px;
}
dl.hulft dt,
dl.hulft dd{
	position: relative;
}
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::after{
	content: "";
	background:url("../images/arrow_hulft.svg") center center no-repeat;
	width:30px;
	height: 30px;
	background-size:20px;
	position: absolute;
	right:0;
	left:0;
	bottom:-33px;
	margin: auto;
	transform: rotate(90deg)
}
dl.hulft dd h5{
	background:var(--orange-color);
}
dl.general2 dd > p{
	font-size:16px;
	margin:10px 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: center top 10px;
	background-size:40px;
	padding-top:60px;
	padding-bottom: 15px;
}
dl.general2 img{
	width:100%;
	height: auto;
}
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;
	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;
}
.hs_top {
	margin:20px auto 0;
}
ul.hs_top{
	display: flex;
	gap:10px;
	flex-direction: column;
	margin-bottom:20px;
	align-items: center;
}
ul.hs_top li{
	width:calc(100% - 20px);
	box-sizing: border-box;
	padding:20px;
	padding-left:80px;
	background-color:var(--blue-color);
	color:#fff;
	align-items: center;
	display: flex;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-position: left 20px center;
	background-size:40px;
}
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:100%;
	margin:20px auto;
}
div.hc_trans_top,
div.hc_trans_bottom{
	display: flex;
	gap:10px;
}
div.hc_trans_top > div{
	background-color:#ccc;
	box-sizing: border-box;
	padding:10px;
	width:calc(50% - 10px);
	border-radius: 4px;
	position: relative;
	margin-bottom:60px;
}

div.hc_trans_bottom > div{
	background-color:#ccc;
	box-sizing: border-box;
	padding:10px;
	width:calc(50% - 10px);
	border-radius: 4px;
	position: relative;
	margin-top:60px;
}
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:47px;
	width:47px;
	height:50px;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:-55px;
}
div.hc_trans_bottom > div::after{
	content: "";
	background:url("../images/trans_blue_pc.svg");
	background-size:47px;
	width:47px;
	height:50px;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	top:-55px;
}
div.hc_trans_mid{
	width:100%;
	margin:0 auto;
	border:5px solid var(--blue-color);
	border-radius: 24px;
	box-sizing: border-box;
	padding:15px;
}
div.hc_trans_mid h4{
	text-align: center;
}
div.hc_trans_mid h4 img{
	width:200px;
	height: auto;
}
div.hc_trans_mid_flex{
	display: flex;
	flex-wrap: wrap;
	gap:10px;
	margin-top:20px;
}
div.hc_trans_mid_flex > div{
	width:calc(100% - 10px);
	box-sizing: border-box;
	padding:10px;
	border-radius: 8px;
	margin-top:10px;
}
div.hc_trans_mid_flex > div h5{
	text-align: center;
	color:#fff;
	font-size: 18px;
	font-weight: bold;
}
div.hc_trans_mid_flex > div ul{
	margin:10px 10px 0 10px;
	padding-left:90px;
	background-repeat: no-repeat;
	background-position: left top 10px;
	min-height: 6em;
	background-size:50px;
}
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;
	padding:10px;
	margin-top:20px;
	border-radius: 8px;
	padding-left:100px;
	background:url("../images/icon_mid07.svg") no-repeat left 30px center;
	background-size:60px;
	background-color:#7D9AA9;
}
div.hc_trans_top p,
div.hc_trans_bottom p{
	text-align: center;
	margin:20px auto 0;
	width:calc(50% - 10px);
}
div.hc_trans_top p.wide{
	width:100%;
}
div.hc_trans_top p span,
div.hc_trans_bottom p span{
	display: block;
	margin-top:5px;
	font-size: 14px;
}
div.hc_trans_top div.saas{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
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;
	background-size:35%;;
	width:120px;
	height: 150px;
	position: absolute;
	top:0;
	bottom:0;
	margin:auto;
	left:-30%;
}
div.operation {
	display: flex;
	flex-direction: column;
	gap:30px;
	align-items: center;
	width: 100%;
	margin:20px auto;
}
div.op1{
	position: relative;
}
div.op1::after{
	content: "";
	position: absolute;
	margin:auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: var(--orange-color) transparent transparent transparent;
	right:0;
	left:0;
	bottom:-25px;
}
div.op2{
	display: flex;
	gap:10px;
	justify-content: space-between;
	flex-direction: column;
}
div.op2 div.column1 > div{
}
div.op2 div.column2 > div{
}
div.op2 div.column3 > div{
}
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: center;;
	gap:10px;
}
div.op2 > div > div > p{
	border:2px solid #ccc;
	padding:10px;
	margin-top:10px;
	border-radius: 6px;
	width:calc(33% - 10px);
}
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{
	margin:20px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image:url("../images/hs_pic06.svg");
	background-repeat:no-repeat;
	background-position: center top -50px;
	background-size:400px;
	padding-top:300px
}
div.connector > div{
	width:calc(100% - 20px);
	display: flex;
	flex-direction: column;
	gap:20px;
	margin-bottom: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:5px;
}
div.connect ul li{
	width:calc(50% - 10px);
	list-style: disc;
	font-size:14px;
}
div.connect ul.noflex li{
	width:100%;
	list-style: disc;
	font-size:14px;
}
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;
}

table.t_aws {
	max-width: 100%;
	margin: 15px 5%; 
	border: 1px solid #333;
	border-collapse: collapse;
}

table.t_aws th,
table.t_aws td {
	width: auto;
	display: table-cell;
	padding: 5px;
	border: 1px solid #333;
	box-sizing: border-box;
}

table.t_aws th {
	background-color: #deeaf6;
	text-align: left;
}

div.arrow_blue {
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #2f70e1;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}
div.arrow_skyblue {
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #9DC3E6;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}
div.arrow_orange {
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #ED7D31;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}
div.arrow_lightblue {
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #00B0F0;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}
div.arrow_cerulean {
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #2991A9;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}
div.arrow_yellow {
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #FFC000;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}
div.arrow_purple{
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #7030A0;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}
div.arrow_green{
    background-image: url(../images/yabg2.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    background-color: #00B050;
    padding: 15px;
    color: #fff;
    margin: 0 20px 20px 20px;
    font-weight: 700;
}

.right-align {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: normal;
    font-size: 11pt;
    padding-right: 63px;
}

.my-container {
    width: 100%;
    margin: 5px 10px;
}

.my-title-box-yellow,
.my-title-box-blue,
.my-title-box-yellow-tag,
.my-title-box-blue-tag,
.my-title-box-gray-tag {
    font-size: 14px;
    padding: 3px 8px;
    top: -5px;
    left: 5px;
}

.my-title-box-yellow-tag::before,
.my-title-box-blue-tag::before,
.my-title-box-gray-tag::before {
  width: 15px; /* サイズ調整 */
  height: 15px;
}

.my-rounded-box {
    padding: 25px 15px 15px 15px;
    margin-top: 15px;
}

.highlight {
    font-weight: bold;
}
.my-container {
    position: relative;
    width: 100%;
    max-width: 800px; 
    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;
}



 .dataspidar-section {
		flex-direction: column;
		 margin: 10px;
        background: #fff;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	  }
	  .dataspidar-section img {
		width: 100%;
		border-radius: 15px 15px 15px 15px; 
		margin-right: 0;
		margin-bottom: 20px;
	  }
	  .content {
		width: 100%;
	  }
	  .dataspidar-section h2{
		  font-size: 1.5em;
	  }

 .dataspidar-section p {
        margin-bottom: 20px;
	  }



.feature-title-steelblue,
.feature-title-lightblue,
.feature-title-paleyellow,
.feature-title-red {
  margin: 15px;
  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;
  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-royalblue li {
  margin: 0 40px;
  }
  
  .feature-title-lightblue {
	border-left: 7px solid #459ab2;
	background-color: #e9f5f9;
	color: #192E4F;
  }

.feature-title-paleyellow {
	border-left: 7px solid #eeee2b;
	background-color: #f9f9e0;
	}