/*-----------------------------------------------
	#flowdesign
-----------------------------------------------*/

#flowdesign {
	margin: 0;
	padding: 0;
}

/*-----------------------------------------------
	#main
-----------------------------------------------*/

#main {
	margin: 0 auto 90px auto;
	padding: 0;
	background-color: #000000;
	}
@media screen and (max-width: 991px) {
	#main {
		margin: 0 auto 30px auto;
	}
}

#main h2 {
	font-family: 'Noto Sans Japanese', serif;
	font-size:348%;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 1.6em;
	text-align: center;
}
@media screen and (max-width: 1280px) {
	#main h2 {
		font-size:168%;
	}
}

@media screen and (max-width: 991px) {
	#main h2 {
		font-size:144%;
		text-align: center;
	}
}
@media screen and (max-width: 680px) {
	#main h2 {
		font-size:114%;
		text-align: center;
	}
}

#main .mainarea {
	margin: 0 auto;
	padding: 90px 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
    justify-content:center;
	align-items: center;
}
@media screen and (max-width: 680px) {
	#main .mainarea {
		flex-flow: column wrap;
		margin: 0 auto;
		padding: 60px 0;
	}
}

/*-----------------------------------------------
	#service
-----------------------------------------------*/

#service {
	margin: 0 auto;
	padding: 0;
	}
@media screen and (max-width: 680px) {
	#service {
		margin: 0 auto;
		padding: 0;
	}
}

#service h2 {
	font-size:468%;
	font-weight: 500;
	font-family: "WDXL Lubrifont JP N", sans-serif;
	line-height: 1.14em;
	text-align: left;
	color: #000000;
	letter-spacing: 3px;
	margin-bottom: 30px;
	border-bottom: 1px solid #000000;
}
#service h2 span.sno {
	color: #FFFFFF;
	background-color: #CCCCCC;
	margin: 0 15px 0 0;
	padding: 0 15px;
}
@media screen and (max-width: 1140px) {
	#service h2 {
		font-size:368%;
	}
}
@media screen and (max-width: 680px) {
	#service h2 {
		font-size:128%;
	}
}

#service h3 {
	font-size:468%;
	font-weight: 500;
	font-family: "WDXL Lubrifont JP N", sans-serif;
	line-height: 1.14em;
	text-align: left;
	color: #000000;
	letter-spacing: 3px;
}
@media screen and (max-width: 1140px) {
	#service h3 {
		font-size:368%;
	}
}
@media screen and (max-width: 680px) {
	#service h3 {
		font-size:128%;
	}
}
#service h3 {
background: -moz-linear-gradient(to bottom,#1C2354,#7E63AA 30%,#DEA1FF); 
background: -webkit-linear-gradient(to bottom,#1C2354,#7E63AA 30%,#DEA1FF); 
background: linear-gradient(to bottom,#1C2354,#7E63AA 30%,#DEA1FF); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  animation: huerotator 5s infinite alternate;
}

@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

#service p {
	font-family: "IBM Plex Sans JP", sans-serif;
	font-size:144%;
	font-weight: 500;
	text-align: left;
	color: #000000;
	line-height: 1.8em;
	letter-spacing: 1px;
}
@media screen and (max-width: 1140px) {
	#service p {
		font-size:128%;
	}
}
@media screen and (max-width: 680px) {
	#service p {
		font-size: 88%;
		line-height: 1.6em;
	}
}

#service .servicearea {
	margin: 0 auto;
	padding: 0;
}
#service .servicearea article {
	margin: 0 auto 90px auto;
	padding: 0;
}

@media screen and (max-width: 680px) {
	#service .servicearea {
		margin: 0 auto;
		padding: 0;
	}
	#service .servicearea article {
		margin: 0 0 30px 0;
		padding: 0;
	}
}

#service .servicearea article.no1area {
	display: flex;
    justify-content: center;
	align-items: center;
	padding: 0 30px;
}
#service .servicearea article .no1txt {
	flex: 1;
}
#service .servicearea article .no1txts {
	padding: 0 0 0 0;
}
#service .servicearea article .no1data {
	/*background-color: #CCCCCC;*/
	flex: 1;
}
#service .servicearea article .no1ul {
	display: flex;
	justify-content: center;
	list-style: none;
	flex-wrap: wrap;
	gap:10px;
}
#service .servicearea article .no1ul li {
	margin: 0 auto;
	width: 12%;
}
@media screen and (max-width: 1280px) {
	#service .servicearea article .no1ul li {
		width: 18%;
	}
}

@media screen and (max-width: 680px) {
	#service .servicearea article.no1area {
		flex-flow: column wrap;
		padding: 0;
	}
	#service .servicearea article .no1txt {
		margin: 0 0 15px 0;
	}
	#service .servicearea article .no1txts {
		padding: 0;
	}
	#service .servicearea article .no1data {
		padding: 0;
	}
	#service .servicearea article .no1ul {
		display: flex;
		justify-content: center;
		list-style: none;
		flex-wrap: wrap;
	}
	#service .servicearea article .no1ul li {
		margin: 0;
		width: 20%;
	}
}

/*-----------------------------------------------
	logo move
-----------------------------------------------*/

.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
 
.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
  margin-top: 5px;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

.jouge {
	animation: jouge 1.5s ease-in-out infinite alternate;
	animation-timing-function: ease-in-out;
}
@keyframes jouge {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 15px);
  }
}

.yokoyoko {
	animation: yokoyoko 1.5s ease-in-out infinite alternate;
	animation-timing-function: ease-in-out;
}
@keyframes yokoyoko {
  0% {
    transform: translate(0px, 0);
  }
  100% {
    transform: translate(15px, 0);
  }
}

.yurayura {
	animation: yurayura 5s ease-in-out infinite alternate;
	transform: rotate(15deg);
}
@keyframes yurayura {
  50% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

.jump {
	animation: jump 1s ease-in-out infinite alternate;
}
@keyframes jump{
  0%   { transform:translate(0%, 20px) rotateX(30deg); }
  100% { transform:translate(0%, 0%); }
}

.gakugaku {
  animation: gakugaku 3s linear infinite;
}
@keyframes gakugaku {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-8deg);
  }
  20% {
    transform: rotateZ(5deg);
  }
  25% {
    transform: rotateZ(-3deg);
  }
  30% {
    transform: rotateZ(1deg);
  }
  35% {
    transform: rotateZ(-2deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.kaiten {
	animation: kaiten 4s ease-in-out infinite alternate;
	animation-timing-function: linear;
	animation-direction: normal;
}
@keyframes kaiten {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#02 {
	margin: 0 auto 90px auto;
	padding: 0;
}

#service .servicearea article.no2area {
	margin: 0 auto 90px auto;
	padding: 0;
}
#service .servicearea article .no2txt {
	margin: 0 auto 60px auto;
	padding: 0;
	max-width: 991px;
	/*max-height: 320px;*/
}
#service .servicearea article .no2txts {
	margin: 0 auto;

}
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
#service .servicearea article .no2data {
	overflow: hidden;
	display: flex;
}
#service .servicearea article .no2ul {
	display: flex;
	list-style: none;
	white-space: nowrap;
	justify-content: center;
	align-items: center;
}
#service .servicearea article .no2uls {
	animation: infinity-scroll-left 30s linear infinite both;
}
#service .servicearea article .no2ul li {
	/*width: calc(100vw / 10);*/
	margin-right: 30px; 
}
#service .servicearea article .no2ul li>img {
	width: 100%;
}
#service .servicearea article .no2ul li.card {
  position: relative;
	/*width: calc(100vw / 15);*/
	/*width: 150px;*/
	width: 240px;
	height: 270px;
	display: block;
	/*perspective: 500px;*/
	/*background-color: #CC0000;*/
	
}
#service .servicearea article .no2ul li.card div {
  position: absolute;
  top: 0;
  left: 0;
  transition: .7s;
  backface-visibility: hidden;
}
#service .servicearea article .no2ul li.card img {
  width: 100%;
}
#service .servicearea article .no2ul li.card .ura {
  transform: rotateY(-180deg);
}
#service .servicearea article .no2ul li.card:hover .omote {
  transform: rotateY(180deg);
}
#service .servicearea article .no2ul li.card:hover .ura {
  transform: rotateY(0);
}
#service .servicearea article .no2ul li.card .omote.yoko {
	width: 240px;
	top:50px;
}
#service .servicearea article .no2ul li.card .ura.yoko {
	width: 240px;
	top:50px;
}
#service .servicearea article .no2ul li.card .omote.tate {
	width: 160px;
	left: 40px;
}
#service .servicearea article .no2ul li.card .ura.tate {
	width: 160px;
	left: 40px;
}

@media screen and (max-width: 1140px) {
	#service .servicearea article.no2area {
		margin: 0 auto 30px auto;
		padding: 0;
	}
	#service .servicearea article .no2txt {
		padding: 0 30px;
		margin: 0 auto 30px auto;
		max-height: auto;
	}
	#service .servicearea article .no2txts {
		margin: 0 0 30px 0;
	}
	#service .servicearea article .no2ul li {
		margin-right: 15px; 
	}
	#service .servicearea article .no2ul li.card {
		position: relative;
		width: 115px;
		height: 120px;
		/*background-color: #CC0000;*/
	}
	#service .servicearea article .no2ul li.card .omote.yoko {
		width: 110px;
		top:25px;
	}
	#service .servicearea article .no2ul li.card .ura.yoko {
		width: 110px;
		top:25px;
	}
	#service .servicearea article .no2ul li.card .omote.tate {
		width: 70px;
		left: 30px;
	}
	#service .servicearea article .no2ul li.card .ura.tate {
		width: 70px;
		left: 30px;
	}
}

#03 {
	padding: 0;
	margin: 0 auto;overflow: hidden;
}
#service .servicearea article.no3area {
	width: 100vw;
	height: auto;
	display: flex;
    justify-content: center;
	align-items: center;
	background-size: cover;
	background-position: center center;
	background-repeat:no-repeat;
	background-attachment: fixed;
	gap:30px;
	margin: 0 auto 90px auto;
	padding: 30px;
	/*background-image: url("../img/slide01.jpg");*/
}
#service .servicearea article .no3data {
	flex: 3;
}
#service .servicearea article .no3txt {
	flex: 2;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 60px;
}
#service .servicearea article .no3txts {
	padding: 0;
}
@media screen and (max-width: 1140px) {
	#service .servicearea article .no3txt {
		padding: 35px;
	}
}
@media screen and (max-width: 991px) {
	#03 {
		height: auto;
	}
	#service .servicearea article.no3area {
		flex-flow: column wrap;
		margin: 0 auto 30px auto;
		padding: 30px 0;
		background-attachment:scroll;
	}
	#service .servicearea article .no3data {
		margin: 0 auto;
		padding: 0 15px;
	}
	#service .servicearea article .no3txt {
		padding: 30px;
	}
}

#service .servicearea article.no4area {
	margin: 0 auto 90px auto;
	padding: 0 30px;
}
#service .servicearea article .no4txt {
	max-width: 991px;
	margin: 0 auto;
	padding: 0;
}
#service .servicearea article .no4txts {
	padding: 0 ;
}
#service .servicearea article .no4data {
	padding: 30px 0 0 0;
}
@media screen and (max-width: 991px) {
	#service .servicearea article.no4area {
		margin: 0 auto 30px auto;
		padding: 0;
	}
	#service .servicearea article .no4data {
		margin: 0 auto;
		padding: 0 ;
	}
	#service .servicearea article .no4txt {
		margin: 0 0 15px 0;
		padding: 0 30px;
	}
}

#service .servicearea article.no5area {
	margin: 0 auto 90px auto;
}
#service .servicearea article .no5txt {
	display: flex;
    justify-content: center;
	align-items: center;
	margin: 0 auto;
	padding: 0 30px;
	max-width: 1980px;
}
#service .servicearea article .no5txts {
	flex: 1;
}
#service .servicearea article .no5data {
	flex: 1;
}
#service .servicearea article .no5ul {
	display: flex;
	justify-content: center;
	list-style: none;
	flex-wrap: wrap;
	gap:1%;
}
#service .servicearea article .no5ul li {
	width: 32%;
	margin: 0 0 0.8% 0;
}
#service .servicearea article .no5ul li img {
	width: 100%;
}
@media screen and (max-width: 991px) {
	#service .servicearea article.no5area {
		margin: 0 auto 30px auto;
	}
	#service .servicearea article .no5txt {
		flex-flow: column wrap;
	}
	#service .servicearea article .no5txts {
		margin: 0 0 30px 0;
	}
	#service .servicearea article .no5data {
		margin: 0 0 15px 0;
	}
	#service .servicearea article .no5ul {
		
	}
}

#service .servicearea article.no6area {
	margin: 0 auto 90px auto;
	padding: 0 30px;
}
#service .servicearea article .no6txt {
	max-width: 991px;
	margin: 0 auto 30px auto;
	padding: 0;
}
#service .servicearea article .no6txts {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap:10px;
}
#service .servicearea article .no6txtsdata {
	flex: 2;
}
#service .servicearea article .no6txtsimg {
	flex: 1;
}
#service .servicearea article .no6data {
	padding: 30px 0 0 0;
}
@media screen and (max-width: 680px) {
	#service .servicearea article.no6area {
		margin: 0 auto 30px auto;
		padding: 0;
	}
	#service .servicearea article .no6txt {
		margin: 0 0 30px 0;
		padding: 0 30px;
	}
	#service .servicearea article .no6txts {
		flex-flow: column wrap;
	}
	#service .servicearea article .no6txtsdata {
		margin: 0 0 15px 0;
	}
	#service .servicearea article .no6data {
		margin: 0 auto;
		padding: 0 10px;
	}
}