@charset "utf-8";
/* CSS Document */

.text_right {
	padding: 100px 0px 50px 0px;
}
img.main_2_img, img.main_3_img, img.main_4_img {
	top: 50%;
	transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
img.main_2_img, img.main_4_img {
	right: -30%;	
}
img.main_3_img {
	left: -32.5%;
    position: absolute;
}
section#main_2 {
	background: #f9f9f9;
}
section#main_3 {
	background: #675bc6;
}
section#main_4 {
	background: #111;
}
section#main_2 .text_left, section#main_3 .text_right, section#main_4 .text_left {
	width: 62.5%;
    z-index: 1;
	position: relative;
}
.text_left, .text_right {
	padding: 80px 0px 80px 0px;
}
section#main_2 .text_left {
	color: #222;
}
section#main_3 .text_right {
	color: #fff;
}
section#main_2, section#main_3, section#main_4 {
    padding: 0;
}
span.deco01 {
	line-height: 1.6;
    font-size: 1.5em;
	word-break: break-all;
}
.main_inner02 img {
	width: 70%;
}
section#main_1.m-image {
   display: block;
   width: 100%;
   height: 100%;
	position: relative;
	overflow: hidden;
	background: none;
}
section#main_1.m-image:before {
	content: '';
   display: block;
	position: absolute;
   width: 100%;
   height: 100%;
	background: /*#ffdb00*/url(../img/bg_iconit-lite.jpg)center center;
	background-size: cover;
	background-repeat: no-repeat;
	  /*-webkit-animation: zoom 10s 1;
   animation: zoom 10s 1;
   animation-fill-mode: forwards;*/
}
@keyframes zoom {
   0% {
      transform: scale(1.25);
   }
   100% {
      transform: scale(1);
   }
}
.main_inner h1 {
	font-size: 4em;
	line-height: 1.25;
	letter-spacing: 0.025em;
	z-index: 1;
    position: relative;
    text-shadow: 2px 2px 8px rgb(0 0 0 / 50%);
	/*display: flex;*/
  	overflow: hidden;
}
.main_inner .catch-lite {
  	overflow: hidden;
}
.main_inner .catch-lite span.anime-catch {
	display: inline-block;
	transform: translate(0, 105%);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.main_inner .catch-lite.-visible span.anime-catch {
	transform: translate(0, 0);
}

.catch-lite span.anime-catch:nth-child(2) {
  transition-delay: 0.06s;
}
.catch-lite span.anime-catch:nth-child(3) {
  transition-delay: 0.12s;
}
.catch-lite span.anime-catch:nth-child(4) {
  transition-delay: 0.18s;
}
.catch-lite span.anime-catch:nth-child(5) {
  transition-delay: 0.24s;
}
.catch-lite span.anime-catch:nth-child(6) {
  transition-delay: 0.30s;
}
.catch-lite span.anime-catch:nth-child(7) {
  transition-delay: 0.36s;
}
.catch-lite span.anime-catch:nth-child(8) {
  transition-delay: 0.42s;
}
.catch-lite span.anime-catch:nth-child(9) {
  transition-delay: 0.48s;
}
.catch-lite span.anime-catch:nth-child(10) {
  transition-delay: 0.54s;
}
.catch-lite span.anime-catch:nth-child(11) {
  transition-delay: 0.6s;
}
.catch-lite span.anime-catch:nth-child(12) {
  transition-delay: 0.66s;
}
.catch-lite span.anime-catch:nth-child(13) {
  transition-delay: 0.72s;
}
.catch-lite span.anime-catch:nth-child(14) {
  transition-delay: 0.78s;
}
img.toplogo02 {
	padding: 4.25% 0 0 0;
	z-index: 1;
    position: relative;
	width: 45%;
	filter: drop-shadow(2px 2px 8px rgba(0,0,0, 0.5));
}
ul.download {
	z-index: 1;
    position: relative;
	padding: 4.25% 0 0;
}
ul.download li {
	width: 20%;
}
a:hover {
    color: #fff;
    opacity: 0.6;
    text-decoration: none;
}
ul.download li img {
	filter: drop-shadow(0px 2px 4px rgba(0,0,0, 0.5));
	transition: 0.4s;
}
ul.download li a:hover img {
	filter: drop-shadow(0px 0px 0px rgba(0,0,0, 0));
}
#main_1 .main_inner {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.75) 100%);
	position: relative;
}
/*#main_1 .main_inner::after {
	content: '';
    position: absolute;
    background: url(../img/iconit-lite_image01.png);
    background-size: 30%;
    background-repeat: no-repeat;
    transform: rotateZ(-20deg);
    display: inline-block;
    width: 1400px;
    height: 1400px;
    top: -40%;
    left: 75%;
    z-index: 0;
	opacity: 0.85;
	-ms-filter: blur(2px);
  	filter: blur(2px);
}*/
.sub-catch {
	position: absolute;
    right: -1.25em;
    bottom: -2em;
    border-radius: 1000px;
    font-size: 3.5em;
    font-weight: 900;
    background: #fac800;
    padding: 1.5em 1.5em 0.5em 0.75em;
    height: 5em;
    width: 5em;
    color: #111;
    text-shadow: #fff 2px 2px 0, #fff -2px -2px 0, #fff -2px 2px 0, #fff 2px -2px 0, #fff 0px 2px 0, #fff 0 -2px 0, #fff -2px 0 0, #fff 2px 0 0;
}
#canvas-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}
#canvas-container {
	position: absolute;
    width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0.8;
}
.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}
.fadeUpTrigger{
    opacity: 0;
}
#main_1 .main_inner {
	padding: calc(3.25% + 64px + 16px) 0 4%;
}
.link-dataranking, .link-lite {
	z-index: 1;
	position: relative;
}

/* スマホ */
@media (max-width: 600px) {
.text_left {
	padding: 15% 0 15% 10% !important;	
}
.text_right {
	padding: 15% 10% 15% 0 !important;
}
span.deco01 {
	font-size: 1.1em;
	line-height: 1.5;
}
img.main_3_img {
    margin-left: 0;
    margin-bottom: 0;
}
.main_inner h1 {
	font-size: 2.25em;
}
section#main_1 {
	padding: 0;		
}
ul.download li {
	width: 45%;
}
img.toplogo02 {
	width: 75%;
	padding: 7.5% 0 0 0;
}
ul.download {
	padding: 7.5% 0 0;	
}
#main_1 .main_inner {
	padding: calc(6.5% + 54px) 0 6.5%;
}
}

/* tablet */
@media (min-width: 601px) and (max-width: 800px) {

}
@media (max-width: 800px) {

}

/* tabletとPC */
@media (min-width: 601px) {
.main_inner02 {
	padding: 2% 20%;
	max-width: 100%;
}
.main_inner02 img {
	width: auto;
	height: 90%;
}
img.main_2_img, img.main_4_img {
	left: 60%;
}
img.main_3_img {
	left: auto;
	right: 60%;
}
header#page #logo {
	margin: 8px 2%;	
}
}


/* PC */
@media (min-width: 801px) {
	span.deco01 {
		margin-top: 5%;
}
}