@charset "utf-8";
/*******************************************************
mescius -http://www.mescius.jp/
Copyright(c)
by mescius GC
*******************************************************/
/*** Form normalizing style  ***/
/* Base for label styling */

img:not(.header-logo):not(.h2--img):not(.h3--img):not(.no--bgc):not(.card--learn-more__img):not(.footer-logo):not(.service-img):not(.sort--img):not(.section--movie-thumb):not(.block--case-parter_img):not(.partner--img) {
    height: auto;
}

.main-visual {
	display: flex;
	width: 80%;
	object-fit: contain;
	margin: 5rem auto 3rem;
}

.wrap--2col-btn {
	display: flex;
	flex-wrap: wrap;
}

.section--movie {
	position: relative;
	display: flex;
    max-width: 800px;
    width: 75%;
	height: fit-content;
    margin: 50px auto 50px;
}

.section--movie::after {
	position: absolute;
    bottom: 0px;
    right: 0px;
    display: flex;
    font-family: "Font Awesome 5 Free";
    font-size: calc(100vw * 0.65 / 3 * 2 * 0.15);
	font-size: clamp(3em, 10vw, 100px);
    color: rgba(255, 255, 255, 0.8);
    content: "\f144";
    text-decoration: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 3;
}

.section--movie:hover::after, .section--movie:active::after {
    background: rgba(0, 0, 0, 0);
}

.section--movie-thumb {	width: 100%;}

.section--img {
	display: flex;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

.section--two-col {
	display: flex;
	flex-wrap: wrap;
}

.text--width-img {
	width: 60%;
}

.img--with-text {
	width: 50%;
	max-width: 320px;
	min-width: 250px;
	margin: 0 auto 2rem;
}
.bl-topBanner {
	margin: 4.5rem auto 5rem;
	text-align: center;
}
	.bl-topBanner a {
		position: relative;
		display: inline-block;
		overflow: hidden;
		border: solid 1px #eff3f5;
		transition: ease .3s;
	}
	.bl-topBanner a:hover, .bl-topBanner a:active {
		opacity: 1;
		/* border: solid 1px #3A9FBA; */
	}
	.bl-topBanner .bl-topBanner-img {
		padding: 0!important;
		border: 0!important;
	}
/* TOP Banner */
.bl-topBanner a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -130%;
	background:#fff;
	opacity: 0.2;
	width:100%;
	height: 100%;
	transform: skewX(-25deg);
  }

  /*hoverした時のアニメーション*/
  .bl-topBanner a:hover::before {
	animation: skewanime 1s forwards;/*アニメーションの名前と速度を定義*/
  }

  @keyframes skewanime {
	100% {
	  left:120%;/*画面の見えていない左から右へ移動する終了地点*/
	}
  }

/* Icon */
.ico-database {
	padding-left: 2.7rem;
	background: url(../../imgs/how-to-use/ico-database-solid.svg) no-repeat left center;
	background-size: 28px;
}
.ico-display {
	padding-left: 2.8rem;
	background: url(../../imgs/how-to-use/ico-display-solid.svg) no-repeat left center;
	background-size: 32px;
}
.ico-table {
	padding-left: 2.8rem;
	background: url(../../imgs/how-to-use/ico-table-solid.svg) no-repeat left center;
	background-size: 34px;
}
.ico-file {
	padding-left: 2.8rem;
	background: url(../../imgs/how-to-use/ico-file-solid.svg) no-repeat left center;
	background-size: 28px;
}
.ico-chart {
	padding-left: 2.8rem;
	background: url(../../imgs/how-to-use/ico-chart-simple-solid.svg) no-repeat left center;
	background-size: 32px;
}
.ico-code {
	padding-left: 3rem;
	background: url(../../imgs/how-to-use/ico-code-solid.svg) no-repeat left center;
	background-size: 36px;
}
.ico-network {
	padding-left: 3.2rem;
	background: url(../../imgs/how-to-use/ico-network-wired-solid.svg) no-repeat left center;
	background-size: 40px;
}
.ico-users {
	padding-left: 3.3rem;
	background: url(../../imgs/how-to-use/ico-users-gear-solid.svg) no-repeat left center;
	background-size: 40px;
}


@media only screen and (max-width : 640px) {
	.main-visual {
		width: 100%;
		margin: 2.5rem auto 1.5rem;
		}

	.case--two-culumns {
		flex-direction: column;
		align-items: center;
	}

	.case--column-left, .case--column-right {
		width: 100%;
		margin-bottom: 1.5rem;
		}

	.block--case-parter_wrap {
		flex-direction: column;
		}

	.block--case-parter_img {
		margin: 0 0 2rem;
		}

	.block--case-parter_p {
		width: 100%;
		}

	.bl-topBanner {
		margin: 1rem auto 3rem;
	}
}