@charset "utf-8";

/* -----------------------------------------------------------
    TOP
-------------------------------------------------------------- */
#main{
	margin: 0;
}
.header.active #top .mv-area::before{
	z-index: 1 !important;
}


/* -----------------------------------------------------------
    h1
-------------------------------------------------------------- */
.h1-area {
	position: absolute;
	top: 840px;
	right: 15px;
	background: none;
    z-index: 4;
}
.h1-area h1{
	width: auto;
	font-size: 1.2rem;
    margin: 0 0 0 auto;
	text-align: right;
}

@media screen and (max-width: 768px){

	/* h1 */
	.h1-area{
		position: absolute;
		left: 20px;
		background: none;
		z-index: -1;
		padding: 0 20px 0 0;
        margin: 0 auto;
		top: auto;
		width: 95%;
		top: 2px;
	}
	.h1-area h1{
		width: auto;
		font-size: 1rem;
		margin: 0 auto;
		padding: 0;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}

}



/*    mv-area
-------------------------------------------------------------- */
.mv-area {
    position: relative;
	/*
    background: url("../img/top-mv.jpg") no-repeat center top / auto 730px;
    min-height: 730px;
	*/
	margin: 0 auto 90px;
	width: 100%;
	background: url("../img/top-mv-bg.png") no-repeat right top / cover;
}

.mv-area .main-img {
	background: url("../img/top-mv.png") no-repeat center top / auto 730px;
	min-height: 730px;
	transition: 0.3s;
}

@media screen and (min-width: 1700px){
	
	.mv-area .main-img {
		background-position: right top;
	}
	
}


.mv-area .txt-area{
	position: absolute;
	bottom: -40px;
	z-index: 1;
	white-space: nowrap;
}

.mv-area .catch{
    font-weight: bold;
	font-size: 12.8rem;
    padding: 0 0 0 30px;
	position: relative;
}

.mv-area .bg-white{
    padding: 0px 30px;
	/*
    background: rgba( 255, 255, 255, .9 );
	*/
}

.mv-area .catch-copy {
    font-weight: bold;
    font-size: 10rem;
    position: relative;
}

.mv-area .catch-copy .sub {
    font: 900 13.6rem / 1.3 'Lato', sans-serif;
    color: var(--blue);
}
.mv-area .catch-copy .share {
	font: 900 13.6rem / 1.3 'Lato', sans-serif;
    color: var(--lightblue);
}

.mv-area .txt-area .section-catch{
	font-size: 5.6rem;
    left: 5px;
    position: relative;
}


@keyframes anime {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    33% {
        opacity: 1;
    }
    45% {
        opacity: 0;
        transform: scale(1.1) ;
    }
    100% { opacity: 0 }
}



/*--------- SVGアニメーション ---------*/
#home-anim{
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 0;
	height: 750px;
}
#home {
	clip-path: url(#cache);
}
#gray {
	fill: none;
	opacity: 0.2;
	stroke: #005DAB;
	stroke-width: 3;
	stroke-miterlimit:10;
	stroke-dasharray: 200;
	stroke-dashoffset: 800;
	animation: draw 4s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;    
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
 }
    }

@keyframes show {
	0% {
		opacity: 0.2;
	}
	50% {
		opacity: 0.4;
	}
	100% {
		opacity: 0.2;
	}
}


@media screen and (max-width: 768px){

	/*    mv-area
	-------------------------------------------------------------- */
	.mv-area {
		background: none;
		width: 100%;
		min-height: inherit;
		margin: 0 auto;
	}
	
    .mv-wrap {
		height: 100%;
		display: block;
		padding: 0 0 50px;
	}
	.mv-area {
		position: relative;
		margin: 0;
		padding: 0;
	}
	
	.mv-area .main-img {
		background: none;
		min-height: inherit;
		text-align: center;
	}
	.mv-area .main-img img {
		max-width: 100%;
	}
	
	.mv-area .txt-area {
        transform: none;
        width: 100%;
		bottom: -80px;
        text-align: left;
	}
	
	.mv-area .catch-copy {
		font-weight: bold;
		font-size: 3.0rem;
		position: relative;
	}
	
	.mv-area .bg-white {
		padding: 0px 5px;
		background: rgba( 255, 255, 255, .9 );
	}
	
	.mv-area .catch-copy .sub,.mv-area .catch-copy .share {
    font: 800 3.2rem / 1.4 'Lato', sans-serif;
	}
	
	.mv-area .txt-area .section-catch {
    font-size: 1.8rem;
	left: 2px;
	top: -1px;
    line-height: 1;
	}
	
	.mv-area .catch {
    font-size: 4.0rem;
	padding: 8px 0;
	}
	.mv-area .catch span{
    padding: 0px 5px;
    background: rgba( 255, 255, 255, .9 );
	}
	
	.mv-area .sp-img {
		display: block;
		width: 100%;
		text-align: center;
	}
	.mv-area .sp-img img {
		max-width: 100%;
	}
	
}

/*    news-area
-------------------------------------------------------------- */
.news-area {
	/*width: 900px;*/
    /*margin: -114px auto 0 0;*/
    padding: 40px 0 0 10px;
    /*background: #fff;*/
	background: linear-gradient(90deg, #fff 0%, #fff 80%, #d3dce3 20%, #d3dce3 100%);
	/*
    position: relative;
	*/
}

.news-area .inner {
    width: 900px;
	position: relative;
	display: contents;
}
.news-area .inner .fs-box{
	display: flex;
    width: 1176px;
    justify-content: space-evenly;
}
.news-area .title-area {
    flex-wrap: wrap;
    align-items: flex-start;
}

.news-area .title-area .txt-block {
    display: block;
    width: 100%;
}

.news-area .title-area .title-block {
    padding: 0;
    border-right: none;
}

.news-area .title-area .section-title {
	position: relative;
    font: 500 3.2rem / 1.4 'Lato', sans-serif;
    letter-spacing: .05em;
}

.news-area .title-area .ja {
    display: block;
    font: 500 1.6rem / 1.2 'Noto Sans JP', serif;
	padding: 0 0 0 7px;
}

.news-area .title-area .ja::before {
    content: "";
    display: inline-block;
    background: url(../img/icon-section-title.svg) center/cover,no-repeat;
    width: 15px;
    height: 6px;
    position: relative;
    left: -5px;
    top: -2px;
}

.news-area .news-more{
	padding: 10px 0 0px 70px;
}

.news-area .news-more a{
	font-size: 1.5rem;
}
.news-area .news-more a::before{
	display: inline-block;
	content: "\f105";
	font-family: 'FontAwesome';
	padding: 0 8px 0 0;
	color: #0E6EB8;
}

.news-area .news-list {
	width: calc(100% - 290px);
}
.news-area .news-list li{
	display: flex;
	align-items: center;
	margin: 20px 0 0;
}
.news-area .news-list li:first-child{
	margin: 0;
}
.news-area .news-list li:nth-of-type(n+3){
	display: none;
}
.news-area .date{
	font-family: 'Lato';
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1;
	margin: 3px 25px 0 0;
	width: 100px;
	letter-spacing: .05em;
}
.news-area .cate{
	display: inline-block;
	font-size: 1.3rem;
	line-height: 1;
	text-align: center;
	padding: 5px;
	margin: 2px 20px 0 0;
	border: #ddd solid 1px;
	width: 110px;
	background: #fff;
}
.news-area .title {
	line-height: 1.5;
	font-weight: 400;
}
.news-area .news-list a{
	display: block;
	padding: 0 0 0 15px;
}
.news-area .news-list a:hover {
   color: #0E6EB8;
	transition: 0.3s;
}

@media screen and (max-width: 768px){

    .news-area{
		display: block;
		margin: 0;
		padding: 50px 20px 40px;
    	width: 100%;
		background: linear-gradient(90deg, #fff 0%, #fff 60%, #D8DEE6 40%, #EFF3F9 100%);
		position: relative;
	}
	.news-area .inner .fs-box{
		display: block;
	}
    
    .news-area .title-area .section-title {
    }

	.news-area .title-area .ja {
	    display: block;
	}
    
    .news-area .title-area .title-block {
        padding: 0 0 30px;
    }
    
	.news-area .news-list{
		width: auto;
	}
	.news-area .news-list li{
		display: block;
		margin: 20px 0 0;
	}
	.news-area .news-list a{
		width: 100%;

		overflow: inherit;
		text-overflow: inherit;
		white-space: inherit;
	}
	.news-area .date{
		margin: 0 8px 0 0;
		width: auto;
	}
	.news-area .cate{
		padding: 3px 10px;
		margin: 0 5px 0 0;
		width: auto;
	}
	.news-area .title {
		width: 100%;
		line-height: 1.6;
		margin: 6px 0 0;
	}
	.news-area .news-more{
		text-align: right;
		margin: 0 0 0 auto;
		position: absolute;
		top: 90px;
		right: 20px;
	}

}

/* --------------------------------------------------------------
	about-area
-------------------------------------------------------------- */

.business-area {
    padding: 100px 0 0px;
    position: relative;
    height: 900px;
    background: linear-gradient(90deg, #fff 0%, #fff 80%, #d3dce3 20%, #d3dce3 100%);
}

.business-area .inner{
	display: flex;
    flex-wrap: wrap;
    /*align-items: center;*/
    justify-content: space-between;
}

.business-area .txt-block {
    width: 485px;
	padding: 30px 0 0;
}

.business-area .section-catch {
    padding: 0 0 40px;
}

.business-area .section-title {
    position: relative;
    font: 500 5.8rem / 1.4 'Lato', sans-serif;
    letter-spacing: .05em;
}

.business-area .section-title::after {
   	background-image: url(../img/decoration.png);
    content: "";
    background-position: left center;
    background-repeat: no-repeat;
	background-size: 100% 1px;
    width: 300px;
    height: 95px;
    position: absolute;
    left: 280px;
    right: 0px;
	z-index: 5;
}

.business-area .ja {
    padding: 0px 0 0 25px;
    display: block;
    font: 500 1.8rem / 1.2 'Noto Sans JP', serif;
	position: relative;
}

.business-area .ja::before {
    content: "";
    display: inline-block;
    background: url(../img/icon-section-title.svg) center/cover,no-repeat;
    width: 15px;
    height: 6px;
    position: absolute;
    left: 0;
    top: 10px;
}

.business-area .sec-copy {
    font-size: 1.8rem;
    font-weight: 500;
	color: #00A1E0;
}

.business-area .sec-logo{
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
}

.business-area .sec-copy::after {
   	background-image: url(../img/copy-bg.png);
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    width: 240px;
    height: 75px;
    position: absolute;
    left: 0;
    right: 0;
}

.business-area .sec-catch {
    font-size: 3.2rem;
    font-weight: bold;
    margin: 30px 0;
    line-height: 1.4;
}

.business-area .sec-logo img{
	padding: 0 35px;
}

.business-area .sec-txt:not(:last-child) {
    margin: 0 0 15px;
}

.business-area .btn-more{
	padding: 40px 0 0;
	text-align: left;
}

.business-area .img-box{
	display: flex;
}

.business-area .img-box img{
    width: 100%;
    height: auto;
}

.business-area .scroll {
    transition: all .3s;
    opacity: 1;
    animation: scrolltxt 20s linear infinite;
    position: absolute;
    bottom: -230px;
    left: 50%;
    display: flex;
    transform: translate(-50%, 0%);
    white-space: nowrap;
}

.business-area .scroll p {
    font-family: 'Lato', sans-serif,"Josefin Sans", sans-serif;
    font-size: 20.0rem;
    font-weight: 900;
    color: #D8DEE6;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    line-height: 1;
    padding: 0 0 0 50px;
}

@keyframes scrolltxt{
	0% {
		transform: translate(-40%, 0%);
	}

	100% {
		transform: translate(-60%, 0%);
	}
	
}

@media screen and (max-width: 768px){

    .business-area {
        padding: 0px 20px;
        text-align: left;
        height: auto;
		background: none;
		position: relative;
    }
	.business-area::before{
		content: "";
		padding: 100px 0;
		display: block;
		width: 100%;
		top: -5px;
		left: 0;
		height: 200px;
		position: absolute;
		z-index: -1;
		background: linear-gradient(90deg, #fff 0%, #fff 60%, #D8DEE6 60%, #EFF3F9 100%);
	}
	
	.business-area .business-img{
		margin: 0 0 30px;
	}
	.business-area .business-img img{
		width: 100%;
		height: 240px;
		object-fit: cover;
	}
	.business-area .txt-block {
		width: 100%;
	}
	
	.business-area .section-catch {
		padding: 0 0 0px;
		margin: -30px 0 0;
		position: relative;
		z-index: -1;
	}
	
	.business-area .section-title {
		font-size: 4.0rem;
		letter-spacing: .03em;
	}
	.business-area .section-title::after {
		width: 100%;
		height: 95px;
		position: absolute;
		left: 187px;
		top: -15px;
	}
	
	.business-area .ja {
		padding: 0px 0 30px 22px;
		font-size: 1.7rem;
	}
	.business-area .ja::before {
	}
	.business-area .sec-logo {
    	display: block;
	}
	
	.business-area .sec-logo p{
    	width: 150px;
	}
	
	.business-area .sec-logo img {
    	padding: 0 0 15px 0px;
}
	
	.business-area .sec-catch {
    	font-size: 2.2rem;
		margin: 30px 0 20px 0;
	}
	
	.business-area .sec-catch::after {
		display: none;
	}
	
	.business-area .sec-txt {
		display: none;
	}
	.business-area .btn-more {
		padding: 10px 0 0;
	}
	
	.business-area .img-box {
	    display: block;
		padding: 70px 0 0;
		position: relative;
		z-index: -2;
}
	.business-area .scroll {
		bottom: auto;
		top: 650px;
		z-index: -1;
	}
		.business-area .scroll p {
		font-size: 10.0rem;
	}
	
}

/* --------------------------------------------------------------
	client-area
-------------------------------------------------------------- */

.client-area{
	display: flex;
    align-items: center;
    gap: 0 70px;
    padding: 330px 0 100px;
}

.client-area .client-block{
	padding: 0 0px 0 0;
	text-align: center;
}

.client-area .client-title{
	font-size: 2.0rem;
    font-weight: bold;
    display: inline-block;
    line-height: 1.3;
}

.client-area .client-title .client-en {
    position: absolute;
    font-size: 8rem;
    font-weight: 800;
    font-family: var(--lato);
    color: #EFF3F9;
    top: 60%;
    left: -10px;
    line-height: 1;
    z-index: -1;
}

.client-area .client-title-sub{
	color: #888888;
    font-weight: 500;
    margin: 20px 0 0px;
    font-size: 1.2rem;
    line-height: 1.2;
}

.client-area .img-block{
	flex-basis: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0px 30px;
    position: relative;
}

.client-area .client-txt{
	width: 800px;
}

.client-area .client-txt img{
	display: block;
    width: 100%;
}

@media screen and (max-width: 768px){
	.client-area {
    display: block;
	width: 100%;
    padding: 0;
	margin: 40px 0 80px;
}
	.client-area .client-block {
    padding: 0 20px 30px;
    text-align: left;
}
	.client-area .client-title .client-en {
        font-size: 6rem;
    top: -10px;
    left: auto;
    right: 0px;
}
	.client-area .client-title-sub {
    margin: 10px 0 0px;
}
	.client-area .img-block {
		display: none;
}
	.client-area .scroll {
    transition: all .3s;
    opacity: 1;
    animation: scrolltxt 10s linear infinite;
    position: absolute;
    left: 10%;
    display: flex;
    transform: translate(-50%, 0%);
    white-space: nowrap;
}
	.client-area .scroll p {
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    line-height: 1;
    padding: 0 0 0 50px;
}
	.client-area .client-txt {
    width: 600px;
}
	
	.client-area .client-txt img {
    margin: 0 0;
}
	client-area .client-area .client-txt img {
    display: block;
    width: 100%;
}
}

/* --------------------------------------------------------------
	service-area
-------------------------------------------------------------- */

.scene-area{
    padding: 120px 0 0;
    background-color: #EFF3F9;
	/*
	min-height: 1750px;
	*/
	position: relative;
}

.scene-area::before{
	content: "";
    display: inline-block;
    background: url(../img/bg-decoration.png) center/cover,no-repeat;
    width: 2868px;
    height: 789px;
    position: absolute;
    left: 0;
    top: 76px;
}

.scene-area::after{
	content: "";
    display: inline-block;
    background: url(../img/bg-decoration-01.png) center/cover,no-repeat;
    width: 111px;
    height: 172px;
    position: relative;
    left: 90px;
    top: -300px;
}

.scene-area .scene-title-area{
	display: flex;
    align-items: center;
    gap: 0 50px;
}

.scene-area .section-title {
    position: relative;
    font: 500 5.8rem / 1 'Lato', sans-serif;
    letter-spacing: .05em;
	padding: 0 100px 0 0;
}

.scene-area .ja {
    padding: 10px 0 0 25px;
    display: block;
    font: 500 1.8rem / 1 'Noto Sans JP', serif;
	position: relative;
}

.scene-area .ja::before {
    content: "";
    display: inline-block;
    background: url(../img/icon-section-title.svg) center/cover,no-repeat;
    width: 15px;
    height: 6px;
    position: absolute;
    left: 0;
    top: 18px;
}

.scene-area .scene-title-area .txt{
	font-size: 1.8rem;
    line-height: 2;
}

.scene-area .case-box{
	position: relative;
	display: flex;
	padding: 50px 0 0;
}

.scene-area .service-img{
	/*
    width: 1065px;
	flex-shrink: 0;
	*/
	position: absolute;
	top: 0;
	width: 65%;
    height: 770px;
}

.scene-area .service-img::before {
    content: "";
    display: inline-block;
    background: url(../img/bg-decoration-02.png) center/cover,no-repeat;
    width: 272px;
    height: 107px;
    position: relative;
    left: 90%;
    top: 30px;
}

.scene-area .service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scene-area .case-box .right-box{
    padding: 100px 60px 220px 100px;
    background-color: #fff;
	width: auto;
	margin: 180px 0 0 auto;
	/*
    margin: -500px 0 0 auto;
	*/
    position: relative;
	display: flex;
	transition: all 0.5s;
}

.scene-area .case-box .right-box:hover{
	border-radius: 100px 0 0 0;
	transform: translateY(-8px);
}

.scene-area .case-box .right-box a{
	display: flex;
}

.scene-area .case-box.factory .txt-box .sec-copy {
    font-size: 2.0rem;
    font-weight: 500;
    color: #00A1E0;
}

.scene-area .case-box.factory .txt-box .sec-copy::after{
    background-image: url(../img/salesforce-logo.svg);
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    width: 114px;
    height: 80px;
    position: absolute;
    left: 365px;
    top: -15px;
    right: 0px;
}

.scene-area .case-box.factory .txt-box .sec-catch {
    font-size: 3.2rem;
    font-weight: bold;
    margin: 30px 0;
    line-height: 1.4;
}

.scene-area .case-box.factory .txt-box .txt{
	width: 500px;
	
}

.scene-area .case-box.factory .txt-box .txt:not(:last-child) {
    margin: 0 0 15px;
}

.scene-area .bluearrow_btn {
    margin: 180px 0 0 60px;
    width: 60px;
    height: 60px;
    background-color: #0E6EB8;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.scene-area .bluearrow_btn .arrow {
    padding: 4px 13px;
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

/*icon*/
.icon {
	/*
    position: absolute;
    top: 980px;
	left: 0;
    right: 0;
	*/
    width: 1200px;
    margin: -130px auto 0 auto;
    display: flex;
    z-index: 3;
	position: relative;
}
.icon.list_02{
	/*
    top: 1315px;
	*/
	margin: 0 auto -50px;
}
.icon ul {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.icon ul li.blue01 {
    background-color: #00A1E0;
}

.icon ul li.blue02 {
    background-color: #0E6EB8;
}

.icon ul li {
    text-align: center;
    width: 320px;
    min-height: 290px;
    padding-bottom: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	transition: all 0.5s;
	overflow: hidden;
    position: relative;
}
.icon ul li:hover{
	border-radius: 50px;
    transform: translateY(-4px);
}

.icon ul li .icon_pic {
    margin: 50px auto 30px;
    width: 140px;
    /*height: 100px;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.icon ul li .icon_wrap .icon_pic span {
    display: block;
    z-index: 5;
    content: "";
    padding: 30px 30px;
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: center top;
}

.icon ul li.crm .icon_wrap .icon_pic span {
    background-image: url(../img/icon-crm.svg);
}

.icon ul li.e-commerce .icon_wrap .icon_pic span {
    background-image: url(../img/icon-e-commerce.svg);
}

.icon ul li.ipaas .icon_wrap .icon_pic span {
    background-image: url(../img/icon-ipaas.svg);
}

.icon ul li.bi .icon_wrap .icon_pic span {
    background-image: url(../img/icon-bi.svg);
}

.icon ul li.marketing .icon_wrap .icon_pic span {
    background-image: url(../img/icon-marketing.svg);
}

.icon ul li.solutions .icon_wrap .icon_pic span {
    background-image: url(../img/icon-solutions.svg);
}

.icon ul li .icon_cap {
    font: 500 1.6rem / 1 'Lato', sans-serif;
	color: #fff;
    letter-spacing: 0.1em;
}

.icon ul li .copy {
    margin: 30px 0 0;
    font-size: 2.0rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.icon ul li .txt {
    margin: 10px 0 20px;
    font-size: 1.4rem;
    color: #fff;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.icon ul li .btn_img{
	left: 126px;
    position: relative;
}

.icon ul li.ipaas .btn_img{
	top: 25px;
}

@media screen and (max-width: 768px){
    .scene-area{
        padding: 50px 0px;
    }
	
	.scene-area::before {
		position: absolute;
		left: -1000px;
		top: 76px;
	}
    .scene-area .inner{
        padding: 0 20px;
        margin: 0 0 40px;
		display: block;
    }
	
	.scene-area .section-title {
		font-size: 4.0rem;
		letter-spacing: .03em;
	}
	.scene-area .ja {
		font-size: 1.7rem;
	}
	.scene-area .ja::before {
	}

	.scene-area .case-box.factory .txt-box {
		width: 100%;
	}

		.scene-area .case-box.factory .txt-box .sec-copy {
		font-size: 1.6rem;
	}
		.scene-area .case-box.factory .txt-box .sec-catch {
		font-size: 2.2rem;
		margin: 20px 0;
	}
		.scene-area .case-box.factory .txt-box .txt {
		width: 100%;
	}
	.scene-area .scene-title-area .txt {
		font-size: 1.6rem;
		padding: 30px 0 0;
	}

	.scene-area .case-box .right-box a {
		display: block;
	}

	.scene-area .bluearrow_btn {
		margin: 10px 0 0 auto;
		width: 50px;
		height: 50px;
	}

	.scene-area .case-box.factory .txt-box .sec-copy::after {
		display: none;
	}

	.scene-area .case-box.factory .txt-box .sec-img {
	   display: flex;
		width: 80px;
		position: absolute;
		left: 220px;
		top: -15px;
	}	

	.scene-area .case-box .bg-box{
		padding: 150px 0 0;
	}

	.scene-area .service-img{
		position: static;
		top: 0;
		width: 100%;
		height: 350px;
	}

	.scene-area .service-img::before {
		position: absolute;
		left: 250px;
		top: -310px;
		
		width: 150px;
		height: 80px;
		
		background-repeat: no-repeat;
		background-size: contain;
	}

	.scene-area .case-box {
		display: block;
		padding: 0 0 0;
	}
    
    .scene-area .case-box .left-box{
        display: none;
    }
    /* .scene-area .case-box .right-box{
        width: 100%;
        padding: 0;
    } */
	
	
	.scene-area .case-box .right-box{
        width: calc(100% - 20px);
        padding: 50px 20px 20px 30px;
        margin: -100px 0 0 auto;
    }
	
	.scene-area .case-box .right-box:hover{
		border-radius: 0px 0 0 0px;
		transform: none;
	}
    .scene-area .case-box .right-box .box-ttl{
        font-size: 2.4rem;
    }
    .scene-area .case-box .right-box .scene-list{
        gap: 40px 0;
        margin: 20px 0 0;
    }
    .scene-area .case-box.other .right-box .scene-list {
        margin: 0 0 30px;
    }
    .scene-area .case-box .right-box .scene-list .scene-item{
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 3px 20px 5px rgba(0,0,0,.1);
    }
    .scene-area .case-box .right-box .scene-list .scene-item .img{
        width: 120px;
    }
    .scene-area .case-box .right-box .scene-list .scene-item .list-ttl{
        position: unset;
        width: calc(100% - 140px);
        background-color: #fff;
        color: #333;
        padding: 0;
    }
    .scene-area .case-box .right-box .scene-list .scene-item .txt{
       padding: 0;
    }
    .scene-area .grad-trigger:checked ~ .more-contents{
        margin: 10px 0 0;
        padding: 0px 20px 20px !important;
    }
    .scene-area .case-box.factory .fs-box{
        flex-wrap: wrap;
        margin: 50px 0 0;
    }
    .scene-area .case-box.factory .fs-box .txt-box{
        width: 100%;
        /* order: 3; */
    }
    .scene-area .case-box.factory .fs-box .img{
        /* order: 2; */
        display: none;
    }
	
	/*icon*/
	.icon {
		position: static;
		width: calc(100% - 20px);
		margin: 0 0 0 auto;
	}

	.icon.list_02{
		margin: 0 0 0 auto;
	}

	.icon ul {
		display: block;
		width: 100%;
	}

	.icon ul li {
			width: 100%;
		min-height: auto;
		text-align: left;
		padding-bottom: 0;
		position: relative;
	}

	.icon ul li .icon_pic {
		margin: 0;
		height: 45px;
		/*
		width: 130px;
		*/
		width: 90px;
	}

	.icon ul li .icon_wrap{
			display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: 95px;
	}

	.icon ul li .icon_wrap .icon_pic span {
		/*padding: 17px 17px;*/
	}

	.icon ul li .icon_wrap .icon_pic span {
		width: 35px;
		height: 35px;
		background-size: contain;
		padding: 0;
	}
	
	.icon ul li .icon_cap {
		font: 500 1rem / 1 'Lato', sans-serif;
		text-align: center;
		margin: 5px 0 0;
		
		display: none;
	}

	.icon ul li .copy {
		margin: 20px 0 0;
		font-size: 2rem;
		line-height: 1.4;
		letter-spacing: 0;
	}

	/*
	.icon ul li.marketing .copy {
		font-size: 1.4rem;
	}
	*/
	
	.icon ul li .txt {
		margin: 5px 0 20px;
		padding: 0 40px 0 0;
		font-size: 1.1rem;
		font-weight: 500;
	}

	.icon ul li .btn_img,
	.icon ul li.ipaas .btn_img{
		left: auto;
		top: auto;
		right: 10px;
		/*
		top: 50%;
		transform: translateY(-50%);
		*/
		bottom: 10px;
		position: absolute;
		padding: 0 0 0 0;
		margin: 0 0 0 auto;
	}
	.icon ul li .btn_img img{
		width: 20px;
	}
	/*
	.icon ul li.bi .btn_img {
		left: 0;
		top: 25px;
		}
	.icon ul li .btn_img img {
		width: 90%;
	}
	*/
	.icon ul li:hover{
		border-radius: 0px;
		transform: none;
	}
	
	.scene-area::after{
		display: none;
	}

}

/*スクロール*/
.copy-area{
	padding: 80px 0 100px;
}

.copy-area .scroll {
    transition: all .3s;
    opacity: 1;
    animation: scrolltxt 10s linear infinite;
    position: relative;
    /*bottom: -250px;*/
    left: 20%;
    display: flex;
    transform: translate(-50%, 0%);
    white-space: nowrap;
}

.copy-area .scroll.copy {
    transition: all .3s;
    opacity: 1;
    animation: scrolltxt1 10s linear infinite;
    position: relative;
    right: 0%;
    display: flex;
    transform: translate(-50%, 0%);
    white-space: nowrap;
}

.copy-area .scroll .scroll-copy {
    font-family: 'Lato', sans-serif,"Josefin Sans", sans-serif;
    font-size: 10.0rem;
    font-weight: 900;
    color: #657684;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
    padding: 0 0 0 30px;
}

.copy-area .scroll .scroll-txt {
    font-family: 'Lato', sans-serif,"Josefin Sans", sans-serif;
    font-size: 10.0rem;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px #657684;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    line-height: 1;
    padding: 0 0 0 30px;
}

@media screen and (max-width: 768px){
	
	.copy-area{
		padding: 30px 0 40px;
	}
	
	.copy-area .scroll {
		animation: scrolltxt 2s linear infinite;
	}

	.copy-area .scroll.copy {
		animation: scrolltxt1 5s linear infinite;
	}

	.copy-area .scroll .scroll-copy {
		font-size: 5.0rem;
	}

	.copy-area .scroll .scroll-txt {
		font-size: 5.0rem;
	}
	
}

@keyframes scrolltxt1{
0% {
    transform: translate(-60%, 0%);
}

100% {
    transform: translate(-40%, 0%);
}
	
}

/* -----------------------------
	company-area
-------------------------------- */

#top .company-area {
	display: flex;
	justify-content: space-between;
	padding: 0 0 100px;
}

#top .company-area:before {
        content: "Cloudin";
    display: block;
    position: absolute;
    text-align: center;
    margin: 45px 0 0;
    bottom: 10;
    left: 0;
    right: 0;
    font-size: 18rem;
    font-family: var(--lato);
    color: rgba( 255, 255, 255, .7 );
    z-index: 2;
    letter-spacing: .3rem;
    white-space: nowrap;
}

#top .company-area > section::after {
	content: "";
	width: 100%;
	height: 100%;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

#top .company-area .company-box::after {
	    background: #657684;
}

#top .company-area .recruit-box::after {
	background: #D8DEE6;
}

#top .company-area > section  {
	padding: 160px 70px 100px 70px;
	display: block;
	width: 50%;
	position: relative;
	z-index: 1;
}

#top .company-area > section .ttl-l .btn_img img{
	width: 100%;
}

#top .company-area > section .ttl-l .en {
	position: relative;
    font: 500 5.8rem / 1 'Lato', sans-serif;
    letter-spacing: .05em;
	text-align: center;
    margin: -33px 0 15px;
}

#top .company-area > section .ttl-l .jp {
	display: block;
    font: 500 1.8rem / 1 'Noto Sans JP', serif;
	text-align: center;
}
#top .company-area > section .ttl-l .jp::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    position: relative;
    left: -10px;
    top: -2px;
}

#top .company-area > section .ttl-l .jp::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    position: relative;
    right: -10px;
    top: -2px;
}

#top .company-area > section.company-box .ttl-l .jp::before,#top .company-area > section.company-box .ttl-l .jp::after{
    background: url(../img/icon-section-01.svg) center/cover,no-repeat;
}

#top .company-area > section.recruit-box .ttl-l .jp::before,#top .company-area > section.recruit-box .ttl-l .jp::after{
    background: url(../img/icon-section-02.svg) center/cover,no-repeat;
}

#top .company-area > section .ttl-l .copy {
	font-size: 2.0rem;
    text-align: center;
    font-weight: 500;
    margin: 30px 0 40px;
}

#top .company-box {
	color: #fff;
}

#top .company-box .ttl-l .btn-more a {
	color: #fff;
	border: 1px solid #fff;
}

#top .company-box .ttl-l .btn-more a::after {
	color: #fff;
}

#top .company-box .btn-more a::before {
	background: #fff;
}

#top .company-box .ttl-l .btn-more a:hover,#top .company-box .ttl-l .btn-more a:hover::after {
	color: #657684;
}

@media screen and (max-width: 768px){

	#top .company-area {
		display: block;
		padding: 0 0 50px;
		margin: 0 0px 0 0;
	}
	
	#top .company-area:before {
		display: none;
	}
	

	#top .company-area > section {
		width: 100%;
	}
	
	#top .company-area > section .ttl-l .jp {
		font-size: 1.7rem;
	}
	
	#top .company-area .company-box {
		padding: 40px 20px 80px;
		position: relative;
	}
	
	#top .company-area .recruit-box {
		padding: 80px 20px 40px;
		position: relative;
	}
	#top .company-area .recruit-box:before {
        content: "Cloudin";
		display: block;
		position: absolute;
		text-align: center;
		margin: 0;
		top: -60px;
		left: 0;
		right: 0;
		font-size: 10rem;
		font-family: var(--lato);
		color: rgba( 255, 255, 255, .7 );
		z-index: 2;
		letter-spacing: .3rem;
		white-space: nowrap;
		z-index: 1;
	}
	
	#top .company-area > section .ttl-l .copy {
		margin: 30px 0 30px;
		font-size: 1.7rem;
	}
	/*
	#top .company-area:before {
		margin: 450px 0 0;
		left: 0;
		right: 0;
		font-size: 10rem;
	}
	*/
	
}