/*雲型に表示する画像、雲形にマスキングするSVG*/
img.kumo-img, svg.kumo-img-mask-hide {
	width: 100%;
	max-width: none;
	height: auto;
	vertical-align: top;
}

img.round-img, svg.round-img-mask-hide {
	width: 100%;
	max-width: none;
	height: auto;
	vertical-align: top;
}

/* 採用情報に表示する画像、マスキングするSVG*/
img.recruit-img, svg.recruit-img-mask-hide {
	width: 100%;
	max-width: none;
	height: auto;
	vertical-align: top;
}

/*雲型のマスク（非表示状態）*/
.kumo-img-mask-hide {
	-webkit-mask-image: url("/asset/img/top/feature_item_img_mask-kumo-pc.svg");
	mask-image: url("/asset/img/top/feature_item_img_mask-kumo-pc.svg");
	/* -webkit-mask-size: 100% 100%; */
	/* mask-size: 100% 100%; */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: 0% 0%;
	mask-size: 0% 0%;
	transform: translate3d(0, 0%, 0);
	will-change: mask-size,transform;
}

/*雲型のマスク（表示状態）*/
.kumo-img-mask-show {
	
	/* transition: transform 2300ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1); */
	/* transition: transform 2300ms cubic-bezier(0.19, 1, 0.22, 1), mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1); */
	transition: transform 800ms cubic-bezier(0.42, 1.0, 0.58, 1.0), -webkit-mask-size 800ms cubic-bezier(0.42, 1.0, 0.58, 1.0);
	transform: translate3d(0, 0%, 0);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transition-delay: 300ms;
}

/*丸型のマスク（非表示状態）*/
.round-img-mask-hide {
	-webkit-mask-image: url("/asset/img/top/img-point-filter.svg");
	mask-image: url("/asset/img/top/img-point-filter.svg");
	/* -webkit-mask-size: 100% 100%; */
	/* mask-size: 100% 100%; */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: 0% 0%;
	mask-size: 0% 0%;
	transform: translate3d(0, 0%, 0);
	will-change: mask-size,transform;
}

/*雲型のマスク（表示状態）*/
.round-img-mask-show {
	
	/* transition: transform 2300ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1); */
	/* transition: transform 2300ms cubic-bezier(0.19, 1, 0.22, 1), mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1); */
	/* transition: transform 2150ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask-size 2150ms cubic-bezier(0.19, 1, 0.22, 1); */
	transition: transform 800ms cubic-bezier(0.42, 1.0, 0.58, 1.0), -webkit-mask-size 800ms cubic-bezier(0.42, 1.0, 0.58, 1.0);
	transform: translate3d(0, 0%, 0);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transition-delay: 300ms;
}


/*採用情報のマスク（非表示状態）*/
.recruit-img-mask-hide {
	-webkit-mask-image: url("/asset/img/recruit/img-recruit-mask-circle.svg");
	mask-image: url("/asset/img/recruit/img-recruit-mask-circle.svg");
	/* -webkit-mask-size: 100% 100%; */
	/* mask-size: 100% 100%; */
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: 0% 0%;
	mask-size: 0% 0%;
	transform: translate3d(0, 0%, 0);
	will-change: mask-size,transform;
}

/*採用情報のマスク（表示状態）*/
.recruit-img-mask-show {
	
	/* transition: transform 2300ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1); */
	/* transition: transform 2300ms cubic-bezier(0.19, 1, 0.22, 1), mask-size 2300ms cubic-bezier(0.19, 1, 0.22, 1); */
	/* transition: transform 2150ms cubic-bezier(0.19, 1, 0.22, 1), -webkit-mask-size 2150ms cubic-bezier(0.19, 1, 0.22, 1); */
	transition: transform 1150ms cubic-bezier(0.42, 1.0, 0.58, 1.0), -webkit-mask-size 1150ms cubic-bezier(0.42, 1.0, 0.58, 1.0);
	transform: translate3d(0, 0%, 0);
	-webkit-mask-size: 200% 200%;
	mask-size: 200% 200%;
	transition-delay: 300ms;
}


/*対話によるシステム開発で企業の未来を晴れやかに*/
.about-01-img {
	animation: fuwafuwa1-vertical 6000ms ease-in-out infinite; 
	width: 170%;
	top: 5rem;
	right: 0;
	filter: drop-shadow(0px 6px 15px rgba(0,0,0,0.101961));
	position: absolute;
}

/*いらないものは作りません。*/
.about-02-img {
	animation: fuwafuwa1-vertical 6000ms ease-in-out infinite; 
	width: 125%;
	top: 10rem;
	right: -10rem;
	filter: drop-shadow(0px 6px 15px rgba(0,0,0,0.101961));
	position: absolute;
}

/*業務管理システム開発*/
.service-01-img {
	width: 100%;
}

/*WEBサービス開発*/
.service-02-img {
	width: 100%;
}

/*インフラ*/
.service-03-img {
	width: 100%;
}

/*システム保守*/
.service-04-img {
	width: 100%;
}



/* 上下にふわふわアニメーション */
.fuwafuwa1-vertical {
	animation-name: fuwafuwa1-vertical-keyframe;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
}
/* 上下にふわふわアニメーション */
.fuwafuwa2-vertical {
	animation-name: fuwafuwa1-vertical-keyframe;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 2.5s;
}
/* 上下にふわふわアニメーション */
.fuwafuwa3-vertical {
	animation-name: fuwafuwa1-vertical-keyframe;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 3.5s;
}

@keyframes fuwafuwa1-vertical-keyframe {
	0% {
		transform: translate(0,0px);
	}

	100% {
		transform: translate(0,-20px)
	}
}

/* 左右にふわふわアニメーション */
.fuwafuwa1-horizontal {
	animation-name: fuwafuwa1-horizontal-keyframe;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
}
.fuwafuwa2-horizontal {
	animation-name: fuwafuwa1-horizontal-keyframe;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 2.5s;
}
.fuwafuwa3-horizontal {
	animation-name: fuwafuwa1-horizontal-keyframe;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 3.5s;
}
.fuwafuwa4-horizontal {
	animation-name: fuwafuwa1-horizontal-keyframe;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 3.5s;
}
@keyframes fuwafuwa1-horizontal-keyframe {
	0% {
		transform: translate(0,0px);
	}

	100% {
		transform: translate(-15px,0)
	}
}

/* お問い合わせのぼよよん */
.boyon {
	animation: .8s boing-anim linear;
	opacity: 1;
}
@keyframes boing-anim{
	10% { transform: scale(1.1, 0.9); } /*少し縮む*/
	40% { transform: scale(1.2, 0.80); } /*縮む*/
	50% { transform: scale(0.85, 1.15); } /*反動で縦長*/
	60%{ transform: scale(1.1, 0.9); } /*また反動で縮む*/
	70% { transform: scale(0.95, 1.08); } /*反動が小さく*/
	90%{ transform: scale(0.98, 1.02); } /*最後の震え*/
	100% { transform: scale(1,1); } /*元に戻る*/
}

/* 紙がヒラヒラ上下にアニメーション */
.paper {
	animation: hirahira 4s infinite ease-in-out alternate;
}
/* 紙がヒラヒラ上下にアニメーション */
.paper2 {
	animation: hirahira 5s infinite ease-in-out alternate;
}
/* 紙がヒラヒラ上下にアニメーション */
.paper3 {
	animation: hirahira 7s infinite ease-in-out alternate;
}
/* 紙がヒラヒラ上下にアニメーション */
.paper4 {
	animation: hirahira 6s infinite ease-in-out alternate;
}
@keyframes hirahira {
	0% {
		transform:translate(-10px, 0) rotate(-45deg);
	}
	50% {
		transform:translate(0, 50px) rotate(0deg);
	}
	100% {
		transform:translate(10px, 0) rotate(45deg);
	}
}

/* 下からフェードイン */
.text-fadein-from-bottom {
	animation-name: text-fadein-anim;
	animation-timing-function: ease;
	animation-duration: 0.8s;
	/*animation-iteration-count: infinite;*/
}
@keyframes text-fadein-anim {
	0% {
		opacity: 0;
		transform: translateY(100px);

	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.text-fadein-init {
	visibility: hidden;
}

.pyoko {
	animation: bounce 2s ease-in-out;
}
@keyframes bounce {
	5%  { transform: scale(1.1, .8); }
	10% { transform: scale(.8, 1.1) translateY(-5px); }
	15% { transform: scale(1, 1); }
}

.title span {
	display: block;
	transform: translate(0, 105%);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

.page-title {
  display: flex;
  overflow: hidden;
}

.page-title span {
  display: block;
  transform: translate(0, 105%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}

.page-title.-visible span {
  transform: translate(0, 0);
}

.page-title span:nth-child(2) {
  transition-delay: 0.06s;
}
.page-title span:nth-child(3) {
  transition-delay: 0.12s;
}
.page-title span:nth-child(4) {
  transition-delay: 0.18s;
}
.page-title span:nth-child(5) {
  transition-delay: 0.24s;
}
.page-title span:nth-child(6) {
  transition-delay: 0.30s;
}
.page-title span:nth-child(7) {
  transition-delay: 0.36s;
}
.page-title span:nth-child(8) {
  transition-delay: 0.42s;
}
.page-title span:nth-child(9) {
  transition-delay: 0.48s;
}
.page-title span:nth-child(10) {
  transition-delay: 0.54s;
}
.page-title span:nth-child(11) {
  transition-delay: 0.6s;
}
.page-title span:nth-child(12) {
  transition-delay: 0.66s;
}
.page-title span:nth-child(13) {
  transition-delay: 0.72s;
}
.page-title span:nth-child(14) {
  transition-delay: 0.78s;
}


/* 横スクロールさせない */
body {
	overflow-x: hidden;
}

/* >> CLOUDロゴ */
.l-header--bar .l-header--logo .logo-color,
.l-header--bar .l-header--logo .logo-white {
	position: absolute;
	left: 1.5rem;
	width: auto;
	height: auto;
}

/* メニューオープン時 - CLOUDロゴを表示 */
.l-header--sp.is-open .l-header--bar .l-header--left {
	z-index: 50;
}

/* メニューオープン時 - CLOUDロゴは常に白 */
.l-header--sp.is-open .l-header--bar .l-header--logo .logo-color {
	display: block;
	transition: opacity 500ms;
	opacity: 0;
}
.l-header--sp.is-open .l-header--bar .l-header--logo .logo-white {
	display: block;
	transition: opacity 500ms;
	opacity: 1;
}
/* << CLOUDロゴ */


/* >> メニュー開閉CSS */
.l-header--inner {
	background: none;
}

.is-open .l-header--inner {
	left: 0;
	width: 100%;
}

/* 丸の拡大 */
.circle-bg {
    position: fixed;
	z-index:3;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background: #0B41A0;
	right: 1.2rem;
    top: 1.2rem;

    transition: transform 300ms ;
	transform: scale(0);
}
.circle-bg.circleactive {
	transition: transform 1000ms ;
	transform: scale(60);
}

.l-header {
	z-index: 1010; 
}

.l-header--nav--unit {
    position: fixed;
    z-index: 1020; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-bottom: 16rem;
}
/* << メニュー開閉CSS */


/* >> 採用情報 */
.jindo_heart_wrapper {
	position:absolute;
	top:10%;
	right:62%;
}
.jindo_heart_box {
	position: relative;
}
.jindo_heart_img {
	position:absolute;
	width:4vw;
	height:auto;
}
/* << 採用情報 */


/* >> お問い合わせはこちら */
.btn-follow {
	z-index: 1100;
}
/* << お問い合わせはこちら */


/* >> TOPページ - 事業内容 */
.service-item .service-img {
	-webkit-mask-image: url("/asset/img/top/img-point-filter.svg");
	mask-image: url("/asset/img/top/img-point-filter.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 50% 50%;
	mask-position: 50% 50%;
	-webkit-mask-size: 0% 0%;
	mask-size: 0% 0%;
	transform: translate3d(0, 0%, 0);
	will-change: mask-size,transform;
}
.service-unit-show > .service-item .service-img {
	transition: transform 800ms cubic-bezier(0.42, 1.0, 0.58, 1.0), -webkit-mask-size 800ms cubic-bezier(0.42, 1.0, 0.58, 1.0);
	transform: translate3d(0, 0%, 0);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.service-unit-show > .service-item:nth-child(1) .service-img {
	transition-delay: 0ms;
}
.service-unit-show > .service-item:nth-child(2) .service-img {
	transition-delay: 300ms;
}
.service-unit-show > .service-item:nth-child(3) .service-img {
	transition-delay: 600ms;
}
.service-unit-show > .service-item:nth-child(4) .service-img {
	transition-delay: 900ms;
}
/* << TOPページ - 事業内容 */