/* CSS Document */

/*==================================================

top-contents
=================================================*/

#top-image {
	width: 100%;
	height: 100vh;
	min-height: 980px;
	position: relative;
	overflow: hidden;
	background-color: #e6eff6;
}
#top-image .top-title {
   width: 100%;
	max-width: 6.5em;
	position: absolute;
	font-size: clamp(5rem, 14vw, 18rem);
	font-family: senobi-gothic, sans-serif;
	font-weight: 400;
	text-align: center;
   line-height: 1.3;
	letter-spacing: -.2em;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -70%);
	z-index: 6;
}
#top-image .top-title span {
	display: block;
	font-size: 60%;
	font-weight: 500;
	letter-spacing: -.25em;
}
#top-image .tile {
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url("../../images/bg_tile_bg.png");
	background-position: center top;
	background-repeat: repeat-y;
	background-size: 100% auto;
	z-index: 2;
}
#top-image .bg-text {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: -5px;
	z-index: 1;
}
#top-image .roll-items {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
}
#top-image .roll-items > div {
	position: absolute;
	z-index: 1;
}
#top-image .roll-items > div.large {
	width: 45%;
	max-width: 531px;
}
#top-image .roll-items > #it1 {
	top: 0;
	left: 0;
	transform: translate(0, 0);
	z-index: 11;
}
#top-image .roll-items > #it2 {
	top: 0;
	right: -5%;
	transform: translate(0, 0);
	z-index: 9;
}
#top-image .roll-items > #it3 {
	bottom: -3%;
	left: 32%;
	transform: translate(0, 0);
	z-index: 10;
}

#top-image .roll-items > div.small {
	width: 23.31%;
	max-width: 341px;
}
#top-image #it-wrap1 {
	width: 90%;
	max-width: 1400px;
	height: 90%;
	max-height: 980px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
}
#top-image #it-wrap3 {
	z-index: 1;
}
#top-image img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@keyframes float-it1 {
	0%, 100% { transform: translate(0, 0); }
	50%       { transform: translate(0, -20px); }
}

@keyframes float-it2 {
	0%, 100% { transform: translate(0, -5%); }
	50%       { transform: translate(0, calc(-5% - 20px)); }
}

@keyframes float-it3 {
	0%, 100% { transform: translate(0, 0); }
	50%       { transform: translate(0, -20px); }
}

#top-image .roll-items > #it1 {
	animation: float-it1 4s ease-in-out infinite;
}

#top-image .roll-items > #it2 {
	animation: float-it2 4s ease-in-out infinite;
	animation-delay: -1.5s;
}

#top-image .roll-items > #it3 {
	animation: float-it3 4s ease-in-out infinite;
	animation-delay: -3s;
}
#it1 .pururun { animation-delay: 0s; }
#it2 .pururun { animation-delay: -2.5s; }
#it3 .pururun { animation-delay: -5s; }

.top-title {
	color: #000;
	font-family: "Roboto Condensed", sans-serif;
	font-size: clamp(2.4rem, 8vw, 10rem);
	line-height: 1.2;
	font-weight: 300;
}
.top-title span {
	display: block;
	font-size: clamp(1.4rem, 40%, 40%);
	font-weight: 500;
}

.top-icon {
	width: 99%;
	height: 100vh;
	min-height: 980px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
}
.top-icon .icon-base {
	width: 28%;
	max-width: 304px;
	position: absolute;
	right: 2%;
	bottom: 4%;
	z-index: 1;
}
.top-icon .icon-base a {
	display: block;
	position: relative;
	z-index: 2;
}
.top-icon .icon-base a:hover {
	opacity: 1;
}
.top-icon .icon-base .icon-person {
	width: 100%;
	position: absolute;
	top: -20%;
	left: 0;
	z-index: 1;
}

#advantage {
	width: 90%;
	position: relative;
	text-align: center;
	margin: min(4%, 40px) auto 0;
	padding: min(6%, 60px) 0 min(10%, 80px);
}
#advantage h1 {
	position: relative;
	font-size: clamp(3.2rem, 6vw, 6rem);
	font-family: senobi-gothic, sans-serif;
	font-weight: 500;
	text-align: center;
   line-height: 1.3;
	letter-spacing: -.3em;
	z-index: 2;
}
#advantage h1 strong {
	font-size: 130%;
	font-weight: 500;
}
#advantage p {
	position: relative;
	font-size: clamp(1.8rem, 2.8vw, 2.8rem);
	line-height: 1.8;
	margin-top: 2em;
	z-index: 2;
}
#advantage p span {
	display: inline-block;
}
#advantage .button {
	text-align: center;
}
#advantage .object {
   width: 40%;
   max-width: 360px;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 1;
   animation: rotate 18s linear infinite;
   transform-origin: center center;
}

@keyframes rotate {
   from { transform: translate(-50%, 0) rotate(0deg); }
   to   { transform: translate(-50%, 0) rotate(-360deg); }
}

#business {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #5ec2ff, #7375e0);
}
#business .js-wave {
	height: 80px;
}
#business .inner {
	width: 90%;
	max-width: 1200px;
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0 auto;
	padding: min(12%, 120px) 0;
	z-index: 3;
}
#business .inner .txt {
	width: 45%;
}
#business .inner .txt p {
	margin: 1.5em 0;
}
#business .inner .txt .button {
	max-width: 420px;
	margin: 0;
}
#business .inner .photo {
	width: 50%;
}

#about {
	width: 100%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #ffc350, #ff9e9c);
	margin-top: min(12%, 120px);
}
#about .js-wave {
	height: 120px;
}
#about .inner {
	width: 90%;
	max-width: 1280px;
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0 0 min(10%, 120px);
	z-index: 2;
}
#about .inner li {
	width: 30%;
	max-width: 380px;
}
#about .inner li img {
	display: block;
	border-radius: clamp(10px, 3vw, 40px);
	overflow: hidden;
	transition: filter 0.3s ease;
}
#about .inner li a {
	display: block;
	width: 100%;
	position: relative;
	padding-bottom: min(8%, 80px);
}
#about .inner li a::after {
	content: " ";
	display: block;
	position: relative;
	width: 55px;
	height: 55px;
	background-color: #fff;
	background-image: url("../../images/arrow.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 45%;
	border: 3px solid #FFF;
	border-radius: 50%;
	margin: 1.5em auto 0;
	transition: border 0.3s;
	z-index: 1;
}

#about .inner li .top-title {
	text-align: center;
	font-size: clamp(2.4rem, 5vw, 6.5rem);
	line-height: 1.4;
	margin-top: .3em;
}
#about .inner li .top-title span {
	font-size: clamp(1.4rem, 40%, 40%);
}
@media (hover: hover) {
	
	#about .inner li a:hover {
		opacity: 1;
	}
	#about .inner li a:hover img {
		filter: brightness(1.15);
	}
	#about .inner li a:hover::after {
		border-color: #000;
		background-color: #ffde00;
	}
}

#recruit {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: min(4%, 40px) 0 min(10%, 60px);
}
#recruit .inner {
	width: 90%;
	max-width: 1280px;
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	background: linear-gradient(90deg, #a4f172, #17bec8);
	border-radius: clamp(10px, 3vw, 40px);
	margin: -5em auto 0;
	padding: min(12%, 120px) 8% min(10%, 100px);
	z-index: 2;
}
#recruit .inner li {
	width: 30%;
	max-width: 278px;
	text-align: center;
}
#recruit .inner li .photo {
	display: block;
	max-width: 278px;
	margin: 0 auto;
}
#recruit .inner li img {
	transition: filter 0.3s ease;
	margin: 0 auto;
}
#recruit .inner li a {
	display: block;
	width: 100%;
	position: relative;
	padding-bottom: min(8%, 80px);
}

#recruit .top-title {
	position: relative;
	text-align: center;
	margin-top: .3em;
	z-index: 3;
}
#recruit .inner li a h2 {
	font-size: clamp(1.8rem, 2.4vw, 2.4rem);
	color: #000;
	margin-top: 1em;
}
#recruit .inner li a p.more {
	width: 100%;
	max-width: 278px;
	font-size: clamp(1.4rem, 2vw, 2rem);
	color: #FFF;
	background-color: #000;
	border: 3px solid #000;
	border-radius: 60px;
	transition: border 0.3s, color 0.3s;
	margin: .7em auto 0;
	padding: .5em 1em;
}


@media (hover: hover) {
	
	#recruit .inner li a:hover {
		opacity: 1;
	}
	#recruit .inner li a:hover img {
		filter: brightness(1.15);
	}
	#recruit .inner li a:hover p.more {
		color: #000;
		background-color: #ffde00;
	}
}

#news {
	width: 90%;
	max-width: 1000px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center; 
	margin: 0 auto;
	padding: 0 0 min(12%, 180px);
}
#news h1 {
	width: 240px;
	text-align: center;
	font-size: clamp(2.4rem, 5vw, 5rem);
	font-weight: 400;
	line-height: 1.4;
	background-image: url("../../images/circle_bg.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: 2em .5em;
}
#news h1 span {
	
}
#news .txt {
	flex: .92;
}
#news .txt dl {
	width: 100%;
	display: table;
	border-bottom: 1px solid #CCC;
}
#news .txt dl dt {
	display: table-cell;
	width: 6em;
	padding: .5em 0;
}
#news .txt dl dd {
	display: table-cell;
	padding: .8em 1em;
}
#news .txt dl dd a {
	color: #23c2c0;
}

#contents img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@media only screen and (min-width:1px) and (max-width: 900px) {
	#top-image .roll-items > #it3 {
		left: 26%;
	}	
}
@media only screen and (min-width:1px) and (max-width: 768px) {
	
	#top-image {
		height: 90svh;
		min-height: 560px;
		max-height: 860px;
		margin-top: 60px;
	}
	.top-icon {
		height: 90svh;
		min-height: 560px;
		max-height: 860px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
	}
	#top-image .tile {
		background-size: 140% auto;
	}
	#top-image .roll-items > div.small {
		width: 40%;
	}
	#top-image .roll-items > #it1 {
		min-width: 240px;
		max-width: 280px;
		left: -5%;
	}
	#top-image .roll-items > #it2 {
		min-width: 240px;
		max-width: 280px;
		top: 5%;
		right: -15%;
	}
	#top-image .roll-items > #it3 {
		min-width: 240px;
		max-width: 280px;
		bottom: -5%;
		left: 15%;
	}
	
	.top-title {
		text-align: center;
		font-weight: 400;
	}
	#business .js-wave {
		height: 40px;
	}
	#business .inner {
		max-width: 480px;
		flex-direction: column;
	}
	#business .inner .txt {
		width: 100%;
	}
	#business .inner .txt .button {
		max-width: 300px;
		margin: 0 auto;
	}
	#business .inner .photo {
		width: 100%;
		margin: 2em auto 0;
	}
	
	#about {
		width: 100%;
	}
	#about .js-wave {
		height: 40px;
	}
	#about .inner {
		width: 80%;
		max-width: 480px;
		flex-direction: column;
	}
	#about .inner li {
		width: 100%;
		max-width: 100%;
	}
	#about .inner li img {
		width: 30%;
		margin-right: 2em;
	}
	#about .inner li a {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center; 
	}
	
	#about .inner li a::after {
		content: " ";
		display: block;
		position: absolute;
		width: 40px;
		height: 40px;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
		margin: 0;
		z-index: 1;
	}
	#about .inner li .top-title {
		flex: 1;
		font-size: clamp(2.4rem, 8vw, 10rem);
		line-height: 1.2;
		text-align: left;
		padding-right: 55px;
	}
	
	
	#recruit .inner {
		width: 90%;
		max-width: 1280px;
		position: relative;
		flex-direction: column;
		align-items: center;
		padding: min(8%, 80px) 0 min(8%, 80px);
		margin-top: 1em;
	}
	#recruit .inner li {
		width: 90%;
		max-width: 480px;
	}
	
	#recruit .inner li a {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center; 
		padding-bottom: min(10%, 60px);
	}
	#recruit .inner li:nth-last-of-type(1) a {
		padding-bottom: 0;
	}
	#recruit .inner li a .photo {
		width: 40%;
		padding-right: 5%;
	}
	#recruit .inner li a .txt {
		width: 55%;
	}
	#recruit .top-title {
		position: relative;
		text-align: center;
		margin-top: .3em;
		z-index: 3;
	}
	#recruit .inner li a h2 {
		color: #000;
		margin-top: 0;
	}
	
	#news {
		flex-direction: column;
	}
	#news h1 {
		width: 100%;
		text-align: center;
		display: flex;
		flex-flow: row-reverse wrap;
		justify-content: center;
		align-items: center; 
		background-color: #e6e9ec;
		background-image: none;
		border-radius: clamp(10px, 3vw, 40px);
		padding: .4em 1em;
	}
	#news h1 span {
		display: inline-block;
		margin: 0 1em;
	}
	#news .txt {
		width: 100%;
		flex: 1;
		margin-top: 1em;
	}
	
}

@media only screen and (min-width:1px) and (max-width: 568px) {
	

}
	
@media only screen and (min-width:1px) and (max-width: 480px) {
	
	#top-image .items > #it2 {
		right: -20%;
	}
}