@charset "utf-8";

/* RESPONSIVE */
/* -------------------------------------------------- */
@media screen and (min-width: 1024px) {
/* PCここから */
.sp {
	display: none;
}

.tablet {
	display: none;
}

/* -------------------------------------------------- */
/* スライダー */
/* -------------------------------------------------- */
#slider {
	height: 100vh;
	margin-bottom: 100px;
	position: relative;
	overflow: hidden;
}

/*
#slider:after {
	content: "";
	width: 100%;
	height: 100%;
	background: #446a75;
	background: #000;
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 0;
}
*/

#sliderTxt {
	position: absolute;
	top: 50%;
	left: 10%;
	margin-top: -230px;
	z-index: 9000;
	color: #FFFFFF;
}

#sliderTxt h1 {
	position: relative;
	top: 400px;
	line-height: 1.2;
	letter-spacing: 0.1em;
}

#sliderCopy {
	font-size: 11rem;
	font-weight: 700;
	line-height: 1;
	opacity: 0.8;
}

#sliderJob {
	padding-top: 80px;
	letter-spacing: 0.52em;
}

.sliderName:before {
	content: "";
	width: 40px;
	height: 1px;
	margin: 0 20px 0 10px;
	background: #FFFFFF;
	display: inline-block;
	vertical-align: middle;
}

/* -------------------------------------------------- */
/* スクロールバー */
/* -------------------------------------------------- */
.scrollDown:after {
	content: "";
	position: absolute;
	top: -180px;
	left: 50%;
	margin-left: -1px;
	width: 1px;
	height: 160px;
	background: #0095da;
	-webkit-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
	/* Safari 4+ */
	-moz-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
	/* Fx 5+ */
	-o-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
	/* Opera 12+ */
	animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
	/* IE 10+, Fx 29+ */
}

@-webkit-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}
@-moz-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}
@-o-keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}
@keyframes elasticus {
  0% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  50% {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  50.1% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    -webkit-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
  }
}

/* -------------------------------------------------- */
/* チルチルミチルのしごと */
/* -------------------------------------------------- */
#topService {
	position: relative;
}

#topTit1:before {
	content: "Service";
}

#topIllust {
	width: 800px;
	height: 330px;
	margin: 0 auto 20px;
	position: relative;
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    -ms-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -ms-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    -ms-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

#illust1 {
	position: absolute;
	top: 20px;
	left: 330px;
	z-index: 1;
	opacity: 0;
}

#illust1.active {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	opacity: 1;
}

#illust2 {
	position: absolute;
	top: 65px;
	left: 410px;
	z-index: 2;
	opacity: 0;
}

#illust2.active {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	opacity: 1;
}

#illust3 {
	position: absolute;
	top: 60px;
	left: 200px;
	z-index: 3;
	opacity: 0;
}

#illust3.active {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	opacity: 1;
}

#illust4 {
	position: absolute;
	top: 120px;
	left: 320px;
	z-index: 4;
	opacity: 0;
}

#illust4.active {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
	opacity: 1;
}

#illust5 {
	/* display: none; */
}



#serviceLink {
	padding-bottom: 100px;
	text-align: center;
}






/* -------------------------------------------------- */
/* サービス */
/* -------------------------------------------------- */
#serviceDetail {
	padding-bottom: 100px;
}

.serviceLink {
	width: 100%;
	overflow: hidden;
	position: relative;
	display: block;
	background: #f9f8f4;
}

.leftPhoto {
	width: 50%;
	float: right;
	transform:skewX(-10deg);
	z-index: 2;
	position: relative;
	display: table;
}

.rightPhoto {
	width: 50%;
	float: left;
	transform:skewX(10deg);
	z-index: 2;
	position: relative;
	display: table;
}

.serviceBox {
	height: 340px;
	width: 100%;
	padding: 50px;
	display: table-cell;
	vertical-align: middle;
	background: #f9f8f4;
}

.leftPhoto h3
{
	transform:skewX(10deg);
}

.leftPhoto .serviceTxt
{
	transform:skewX(10deg);
	padding-left: 0.8em;
}

.rightPhoto h3
{
	transform:skewX(-10deg);
	padding-left: 0.4em;
}

.rightPhoto .serviceTxt
{
	transform:skewX(-10deg);
}

a.serviceLink:hover {
	color: #333;
}

a.serviceLink:after {
	transition: all 0.3s ease-in-out 0s;
}

a.serviceLink:hover:after {
	transform:scale(1.15);
}

#s1:after {
	background: url(../../img/top/top_service1.webp) center center no-repeat #f9f8f4;
	-webkit-background-size: cover;
	background-size: cover;
	content: "";
	width: 53%;
	height: 340px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#s2:after {
	background: url(../../img/top/top_service2.webp) center center no-repeat #f9f8f4;
	-webkit-background-size: cover;
	background-size: cover;
	content: "";
	width: 53%;
	height: 340px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

#s3:after {
	background: url(../../img/top/top_service3.webp) center center no-repeat #f9f8f4;
	-webkit-background-size: cover;
	background-size: cover;
	content: "";
	width: 53%;
	height: 340px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#s4:after {
	background: url(../../img/top/top_service4.webp) center center no-repeat #f9f8f4;
	-webkit-background-size: cover;
	background-size: cover;
	content: "";
	width: 53%;
	height: 340px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.serviceLink .leftPhoto:before {
	content: "";
	display: block;
	width: 0;
	height: 340px;
	background: rgba(0,149,218,0.1);
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s ease-in-out 0s;
}

.serviceLink .rightPhoto:before {
	content: "";
	display: block;
	width: 0;
	height: 340px;
	background: rgba(0,149,218,0.1);
	z-index: 3;
	position: absolute;
	top: 0;
	right: 0;
	transition: all 0.3s ease-in-out 0s;
}


.serviceLink:hover .leftPhoto:before,
.serviceLink:hover .rightPhoto:before {
	width: 120%;
}

/* -------------------------------------------------- */
/* ブログ */
/* -------------------------------------------------- */
#topTit3:before {
	content: "News";
}

#blogWrap {
	padding-bottom: 100px;
	position: relative;
}

.blog {
	width: 490px;
	height: 140px;
	margin: 0 20px 20px 0;
	display: table;
	float: left;
}

.blog a:hover {
	opacity: 0.7;
}

.blog:nth-child(2n) {
	margin-right: 0;
}

.blogImg {
	width: 212px;
	height: 140px;
	display: table-cell;
	vertical-align: middle;
	overflow: hidden;
}

.blogTxt {
	width: 300px;
	height: 140px;
	padding: 0 12px;
	background: #f6f6f3;
	display: table-cell;
	vertical-align: middle;
}

.blogDate {
	padding-right: 10px;
	color: #888888;
	font-size:1.2rem;
	display: inline-block;
}

.blogCat {
	display: inline-block;
}

.blogCat li {
	padding: 0 10px;
	margin-right: 3px;
	background: #FFF;
	border: 1px #0095da solid;
	font-size: 1rem;
	color: #0095da;
	border-radius: 10px;
	display: inline-block;
	vertical-align: middle;
}

.blogTit {
	padding: 10px 0;
	line-height: 1.2em;
	font-size: 1.3rem;
}

.blogInfoWrap {
	text-align: right;
}

.blogInfo {
	display: inline-block;
}

.count {
	display: inline-block;
	vertical-align: middle;
	padding-right: 10px
}

.count:before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 12px;
	padding-right: 5px;
	background: url(../../img/common/heart.png) 0 0 no-repeat;
}

.user {
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: 30px;
	border-radius: 30px;
	background: #EEE;
	overflow: hidden;
}

.user img {
	width: 100%;
	height: auto;
}

#blogBtn {
	padding-top: 10px;
	text-align: center;
}

/* -------------------------------------------------- */
/* バナーエリア */
/* -------------------------------------------------- */
#bnrArea {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 100px;
}

#bnrArea li {
	padding-bottom: 10px;
}

#bnrArea li a:hover {
	opacity: 0.7;
}

/* -------------------------------------------------- */
/* インスタグラム */
/* -------------------------------------------------- */
#igIcon {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 10px;
}

/* ボタンカスタマイズ */
/* ------------------------ */
.sp-previous-arrow::before, .sp-previous-arrow::after, .sp-next-arrow::before, .sp-next-arrow::after {
	display: none;
}

#instagram .sp-horizontal .sp-next-arrow {
	width: 35px;
	height: 35px;
	right: 0;
	border: 1px #0095da solid;
	background:  url(../../img/common/icon1.png) center center no-repeat #FFF;
	position: relative;
	display: inline-block;
	transition: all 0.3s ease-in-out 0s;
}

#instagram .sp-horizontal .sp-previous-arrow {
	width: 35px;
	height: 35px;
	left: 0;
	margin-right: 5px;
	border: 1px #0095da solid;
	background:  url(../../img/common/icon3.png) center center no-repeat #FFF;
	position: relative;
	display: inline-block;
	transition: all 0.3s ease-in-out 0s;
}


#instagram .sp-horizontal .sp-next-arrow:hover {
	background:  url(../../img/common/icon2.png) center center no-repeat #0095da;
}

#instagram .sp-horizontal .sp-previous-arrow:hover {
	background:  url(../../img/common/icon4.png) center center no-repeat #0095da;
}

#instagram .sp-horizontal .sp-arrows {
	width: auto;
	top: -50px;
	right: 50%;
	left: inherit;
	margin: 0 -500px 0 0;
}


/* -------------------------------------------------- */
/* 採用情報 */
/* -------------------------------------------------- */
#recruit {
	width: 100%;
	height: 550px;
	background: url(../../img/top/top_recruit_bg2.webp) center center no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}

#recruitIn {
	position: absolute;
	top: 160px;
	left: 50%;
	margin-left: -500px;
	color: #FFF;
}

#recruitIn h3 {
	font-size: 2rem;
	font-weight: 500;
}

#subTit {
	font-size: 2.8rem;
	font-weight: 500;
	padding-bottom: 10px;
}

#recruitLink {
	padding: 20px 0 0;
	width: 700px;
}

#recruitLink li {
	/* margin-right: 20px; */
	display: inline-block;
}
#recruitLink li:nth-child(odd) {
	margin-right: 15px;
}
#recruitLink li:nth-child(n + 3) {
	margin-top: 15px;
}
/* PCここまで */
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Tabletここから */
	.pc {
		display: none;
	}

	.tablet {
		display: none !important;
	}

	.sp {
		display: block;
	}


	body {
	-webkit-text-size-adjust: 100%;
	}

	p, li, dt, dd {
		/*Androidブラウザフォントバグ対策*/
		 max-height: 999999px;
	}

	#container {
		min-width: auto;
		display: inline-block;
	}

	main {
		width: 100%;
	}

	/* -------------------------------------------------- */
	/* スライダー */
	/* -------------------------------------------------- */
	#slider {
		height: 100vh;
		margin-bottom: 120px;
		position: relative;
	}

	#slider:after {
		content: none;
	}

	#sliderTxt {
		position: absolute;
		top: 360px;
		left: 25px;
		margin-top: -230px;
		z-index: 9000;
		color: #FFFFFF;
	}

	#sliderTxt h1 {
		position: relative;
		top: 240px;
		line-height: 1.3;
		letter-spacing: 0.1em;
	}

	#sliderCopy {
		font-size: 6rem;
		font-weight: 700;
		line-height: 1;
	}

	#sliderJob {
		padding-top: 70px;
		letter-spacing: 0.52em;
	}

	.sliderName:before {
		content: "";
		width: 40px;
		height: 1px;
		margin: 0 20px 0 0;
		background: #FFFFFF;
		display: inline-block;
		vertical-align: middle;
	}

	/* -------------------------------------------------- */
	/* スクロールバー */
	/* -------------------------------------------------- */
	.scrollDown:after {
		content: "";
		position: absolute;
		top: -200px;
		left: 50%;
		margin-left: -1px;
		width: 1px;
		height: 160px;
		background: #0095da;
		-webkit-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
		/* Safari 4+ */
		-moz-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
		/* Fx 5+ */
		-o-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
		/* Opera 12+ */
		animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
		/* IE 10+, Fx 29+ */

	}

	@-webkit-keyframes elasticus {
	  0% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	  50% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  50.1% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  100% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	}
	@-moz-keyframes elasticus {
	  0% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	  50% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  50.1% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  100% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	}
	@-o-keyframes elasticus {
	  0% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	  50% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  50.1% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  100% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	}
	@keyframes elasticus {
	  0% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	  50% {
	    -webkit-transform-origin: 0% 0%;
	    -ms-transform-origin: 0% 0%;
	    -moz-transform-origin: 0% 0%;
	    -o-transform-origin: 0% 0%;
	    transform-origin: 0% 0%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  50.1% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 1);
	    -ms-transform: scale(1, 1);
	    -moz-transform: scale(1, 1);
	    -o-transform: scale(1, 1);
	    transform: scale(1, 1);
	  }
	  100% {
	    -webkit-transform-origin: 0% 100%;
	    -ms-transform-origin: 0% 100%;
	    -moz-transform-origin: 0% 100%;
	    -o-transform-origin: 0% 100%;
	    transform-origin: 0% 100%;
	    -webkit-transform: scale(1, 0);
	    -ms-transform: scale(1, 0);
	    -moz-transform: scale(1, 0);
	    -o-transform: scale(1, 0);
	    transform: scale(1, 0);
	  }
	}

	/* -------------------------------------------------- */
	/* チルチルミチルのしごと */
	/* -------------------------------------------------- */
	#topService {
		width: 100%;
		position: relative;
	}

	#topTit1:before {
		content: "Service";
	}

	#topIllust {
		width: 100%;
		height: 480px;
		margin: 0 auto 20px;
		position: relative;
	}

	#topIllust li img {
		width: 100%;
	}

	@keyframes bounceIn {
	  0%, 20%, 40%, 60%, 80%, 100% {
	    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	  }

	  0% {
	    opacity: 0;
	    -webkit-transform: scale3d(.3, .3, .3);
	    -ms-transform: scale3d(.3, .3, .3);
	    transform: scale3d(.3, .3, .3);
	  }

	  20% {
	    -webkit-transform: scale3d(1.1, 1.1, 1.1);
	    -ms-transform: scale3d(1.1, 1.1, 1.1);
	    transform: scale3d(1.1, 1.1, 1.1);
	  }

	  40% {
	    -webkit-transform: scale3d(.9, .9, .9);
	    -ms-transform: scale3d(.9, .9, .9);
	    transform: scale3d(.9, .9, .9);
	  }

	  60% {
	    opacity: 1;
	    -webkit-transform: scale3d(1.03, 1.03, 1.03);
	    -ms-transform: scale3d(1.03, 1.03, 1.03);
	    transform: scale3d(1.03, 1.03, 1.03);
	  }

	  80% {
	    -webkit-transform: scale3d(.97, .97, .97);
	    -ms-transform: scale3d(.97, .97, .97);
	    transform: scale3d(.97, .97, .97);
	  }

	  100% {
	    opacity: 1;
	    -webkit-transform: scale3d(1, 1, 1);
	    -ms-transform: scale3d(1, 1, 1);
	    transform: scale3d(1, 1, 1);
	  }
	}

	.bounceIn {
	  -webkit-animation-name: bounceIn;
	  animation-name: bounceIn;
	  -webkit-animation-duration: .75s;
	  animation-duration: .75s;
	}

	#illust1 {
		width: 22%;
		position: absolute;
		top: 20px;
		left: 38%;
		z-index: 1;
		opacity: 0;
	}

	#illust1.active {
		-webkit-animation-name: bounceIn;
		animation-name: bounceIn;
		-webkit-animation-duration: .75s;
		animation-duration: .75s;
		opacity: 1;
	}

	#illust2 {
		width: 35%;
		position: absolute;
		top: 80px;
		left: 49%;
		z-index: 2;
		opacity: 0;
	}

	#illust2.active {
		-webkit-animation-name: bounceIn;
		animation-name: bounceIn;
		-webkit-animation-duration: .75s;
		animation-duration: .75s;
		opacity: 1;
	}

	#illust3 {
		width: 34%;
		position: absolute;
		top: 60px;
		left: 13%;
		z-index: 3;
		opacity: 0;
	}

	#illust3.active {
		-webkit-animation-name: bounceIn;
		animation-name: bounceIn;
		-webkit-animation-duration: .75s;
		animation-duration: .75s;
		opacity: 1;
	}

	#illust4 {
		width: 33%;
		position: absolute;
		top: 200px;
		left: 38%;
		z-index: 4;
		opacity: 0;
	}

	#illust4.active {
		-webkit-animation-name: bounceIn;
		animation-name: bounceIn;
		-webkit-animation-duration: .75s;
		animation-duration: .75s;
		opacity: 1;
	}

	#illust5 {
		position: absolute;
		/* top: 120px;
		left: 120px;
		z-index: 4;
		opacity: 0; */
	}

	#illust5.active {
		/* -webkit-animation-name: bounceIn;
		animation-name: bounceIn;
		-webkit-animation-duration: .75s;
		animation-duration: .75s;
		opacity: 1; */
	}

	#illust5 img {
		width: 100%;
	}

	#serviceLink {
		width: 90%;
	  margin: 0 auto;
		padding-bottom: 80px;
		text-align: center;
	}

	/* -------------------------------------------------- */
	/* サービス */
	/* -------------------------------------------------- */
	#serviceDetail {
		padding-bottom: 40px;
	}

	.serviceLink {
		width: 100%;
		padding-top: 220px;
		margin-bottom: 40px;
		overflow: hidden;
		position: relative;
		display: block;
		background: #f9f8f4;
	}

	.leftPhoto {
		width: 100%;
		float: none;
		transform:skewX(0deg);
		z-index: 2;
		position: relative;
		display: table;
	}

	.rightPhoto {
		width: 100%;
		float: none;
		transform:skewX(0deg);
		z-index: 2;
		position: relative;
		display: table;
	}

	.serviceBox {
		height: auto;
		width: 100%;
		padding: 20px 5%;
		display: table-cell;
		vertical-align: middle;
		background: #f9f8f4;
	}

	.leftPhoto h3
	{
		transform:skewX(0deg);
	}

	.leftPhoto .serviceTxt
	{
		transform:skewX(0deg);
		padding-left: 0;
		font-size: 1.8rem;
	}

	.rightPhoto h3
	{
		transform:skewX(0deg);
		padding-left: 0;
		font-size: 2.3rem;
	}

	.rightPhoto .serviceTxt
	{
		transform:skewX(0deg);
		font-size: 1.8rem;
	}

	a.serviceLink:after {

	}

	#s1:after {
		background: url(../../img/top/top_service1.webp) center center no-repeat #f9f8f4;
		-webkit-background-size: cover;
		background-size: cover;
		content: "";
		width: 100%;
		height: 220px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#s2:after {
		background: url(../../img/top/top_service2.webp) center center no-repeat #f9f8f4;
		-webkit-background-size: cover;
		background-size: cover;
		content: "";
		width: 100%;
		height: 220px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}

	#s3:after {
		background: url(../../img/top/top_service3.webp) center center no-repeat #f9f8f4;
		-webkit-background-size: cover;
		background-size: cover;
		content: "";
		width: 100%;
		height: 220px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	#s4:after {
		background: url(../../img/top/top_service4.webp) center center no-repeat #f9f8f4;
		-webkit-background-size: cover;
		background-size: cover;
		content: "";
		width: 100%;
		height: 220px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
	}

	.serviceLink .leftPhoto:before {
		content: "";
		display: block;
		width: 0;
		height: 220px;
		background: rgba(0,149,218,0.1);
		z-index: 3;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 0.3s ease-in-out 0s;
	}

	.serviceLink .rightPhoto:before {
		content: "";
		display: block;
		width: 0;
		height: 340px;
		background: rgba(0,149,218,0.1);
		z-index: 3;
		position: absolute;
		top: 0;
		right: 0;
		transition: all 0.3s ease-in-out 0s;
	}

	/* -------------------------------------------------- */
	/* ブログ */
	/* -------------------------------------------------- */
	#topTit3:before {
		content: "News";
	}

	#blogWrap {
		width: 100%;
		margin: 0;
		padding-bottom: 80px;
		position: relative;
	}

	.blog {
		width: 90%;
	  height: auto;
	  margin: 0 auto 5px;
	  display: table;
	  float: none;
	  background: #f6f6f3;
	}

	.blog a {
		position: relative;
		display: flex; /* 子要素をflexboxで揃える */
		justify-content: center; /* 子要素をflexboxにより中央に配置する */
	}

	.blog:nth-child(2n) {
		margin: 0 auto 5px;
	}

	.blogImg {
		width: 20%;
		height: auto;
		vertical-align: middle;
		overflow: hidden;
		background: #f6f6f3;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.blogImg img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		font-family: 'object-fit: cover;';
	}

	.blogTxt {
		width: 80%;
	  height: auto;
	  padding: 5px 2%;
	  background: #f6f6f3;
	  vertical-align: middle;
	}

	.blogDate {
		padding-right: 10px;
		color: #888888;
		font-size:1.4rem;
		display: inline-block;
	}

	.blogCat {
		display: inline-block;
		font-size: 1.6rem;
	}

	.blogCat li {
		padding: 0 10px;
		margin-right: 3px;
		background: #FFF;
		border: 1px #0095da solid;
		font-size: 1rem;
		color: #0095da;
		border-radius: 10px;
		display: inline-block;
		vertical-align: middle;
	}

	.blogTit {
		padding: 10px 0;
		line-height: 1.2em;
		font-size: 1.4rem;
	}

	.blogInfoWrap {
		text-align: right;
	}

	.blogInfo {
		display: inline-block;
	}

	.count {
		display: inline-block;
		vertical-align: middle;
		padding-right: 10px
	}

	.count:before {
		content: "";
		display: inline-block;
		width: 14px;
		height: 12px;
		padding-right: 5px;
		background: url(../../img/common/heart_sp.png) 0 0 no-repeat;
		background-size: contain;
	}

	.user {
		display: inline-block;
		vertical-align: middle;
		width: 30px;
		height: 30px;
		border-radius: 30px;
		background: #EEE;
		overflow: hidden;
	}

	.user img {
		width: 100%;
		height: auto;
	}

	#blogBtn {
		width: 90%;
		margin: 0 auto;
		padding-top: 10px;
		text-align: center;
	}

	/* -------------------------------------------------- */
	/* バナーエリア */
	/* -------------------------------------------------- */
	#bnrArea {
		width: 100%;
		margin: 0;
		padding-bottom: 80px;
	}

	#bnrArea ul {
		width: 90%;
		margin: 0 auto;
	}

	#bnrArea li {
		padding-bottom: 10px;
	}

	#bnrArea li a img {
		width: 100%;
	}


	/* -------------------------------------------------- */
	/* インスタグラム */
	/* -------------------------------------------------- */
	#igIcon {
		width: 1000px;
		margin: 0 auto;
		padding-bottom: 10px;
	}

	/* ボタンカスタマイズ */
	/* ------------------------ */
	.sp-previous-arrow::before, .sp-previous-arrow::after, .sp-next-arrow::before, .sp-next-arrow::after {
		display: none;
	}

	#instagram .sp-horizontal .sp-next-arrow {
		width: 35px;
		height: 35px;
		right: 0;
		border: 1px #0095da solid;
		background:  url(../../img/common/icon1.png) center center no-repeat #FFF;
		position: relative;
		display: inline-block;
		transition: all 0.3s ease-in-out 0s;
	}

	#instagram .sp-horizontal .sp-previous-arrow {
		width: 35px;
		height: 35px;
		left: 0;
		margin-right: 5px;
		border: 1px #0095da solid;
		background:  url(../../img/common/icon3.png) center center no-repeat #FFF;
		position: relative;
		display: inline-block;
		transition: all 0.3s ease-in-out 0s;
	}

	#instagram .sp-horizontal .sp-arrows {
		width: auto;
		top: -50px;
		right: 50%;
		left: inherit;
		margin: 0 -500px 0 0;
	}


	/* -------------------------------------------------- */
	/* 採用情報 */
	/* -------------------------------------------------- */
	#recruit {
		width: 100%;
		/* height: 375px; */
		padding-bottom: 20px;
		background: url(../../img/top/top_recruit_bg2.jpg) center center no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		position: relative;
	}

	#recruitIn {
		width: 90%;
		padding-top: 40px;
	  position: static;
	  top: 0;
	  left: 0;
	  margin: 0 auto;
	  color: #FFF;
	}

	#recruitIn h3 {
		font-size: 1.8rem;
		font-weight: 500;
	}

	#recruitIn p {
		font-size: 1.8rem;
		font-weight: 500;
	}

	#recruitIn #subTit {
		font-size: 2.8rem;
		font-weight: 500;
		padding-bottom: 10px;
	}

	#recruitLink {
		padding: 20px 0 0;
	}

	#recruitLink li {
		margin: 0 0 20px 0;
		display: block;
	}
	/* Tabletここまで */
}

@media screen and (max-width: 767px) {
	/* SPここから */
		.pc {
			display: none;
		}

		.tablet {
			display: none;
		}

		.sp {
			display: block;
		}

		body {
		-webkit-text-size-adjust: 100%;
		}

		p, li, dt, dd {
			/*Androidブラウザフォントバグ対策*/
			 max-height: 999999px;
		}

		#container {
			min-width: auto;
		}

		main {
			width: 100%;
		}

		html, body, #container {
			height: 100%;
		}

		/* -------------------------------------------------- */
		/* スライダー */
		/* -------------------------------------------------- */
		#slider {
			height: 100%;
			margin-bottom: 80px;
			position: relative;
		}

		#slider:after {
			content: none;
		}

		#sliderTxt {
			width: 100%;
			height: 100%;
		  position: absolute;
		  top: 0;
		  left: 0;
		  z-index: 9000;
		  color: #FFFFFF;
		}

		#sliderTxt h1 {
			position: absolute;
			right: 20px;
			bottom: 130px;
			line-height: 1.3;
			letter-spacing: 0.1em;
			text-align: right;
		}

		#sliderCopy {
			position: absolute;
			top: 105px;
		  left: 20px;
			font-size: 5rem;
			font-weight: 700;
			line-height: 1;
			margin-top: -40px;
		}

		#sliderJob {
			letter-spacing: 0.52em;
		  text-align: right;
		  position: absolute;
		  bottom: 80px;
			right: 15px;
		}

		.sliderName:before {
			content: "";
			width: 40px;
			height: 1px;
			margin: 0 20px 0 0;
			background: #FFFFFF;
			display: inline-block;
			vertical-align: middle;
		}

		/* -------------------------------------------------- */
		/* スクロールバー */
		/* -------------------------------------------------- */
		.scrollDown:after {
			content: "";
			position: absolute;
			top: -130px;
			left: 50%;
			margin-left: -1px;
			width: 1px;
			height: 100px;
			background: #0095da;
			-webkit-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
			/* Safari 4+ */
			-moz-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
			/* Fx 5+ */
			-o-animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
			/* Opera 12+ */
			animation: elasticus 2.4s cubic-bezier(1, 0, 0, 1) infinite;
			/* IE 10+, Fx 29+ */

		}

		@-webkit-keyframes elasticus {
		  0% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		  50% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  50.1% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  100% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		}
		@-moz-keyframes elasticus {
		  0% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		  50% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  50.1% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  100% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		}
		@-o-keyframes elasticus {
		  0% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		  50% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  50.1% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  100% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		}
		@keyframes elasticus {
		  0% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		  50% {
		    -webkit-transform-origin: 0% 0%;
		    -ms-transform-origin: 0% 0%;
		    -moz-transform-origin: 0% 0%;
		    -o-transform-origin: 0% 0%;
		    transform-origin: 0% 0%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  50.1% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    transform: scale(1, 1);
		  }
		  100% {
		    -webkit-transform-origin: 0% 100%;
		    -ms-transform-origin: 0% 100%;
		    -moz-transform-origin: 0% 100%;
		    -o-transform-origin: 0% 100%;
		    transform-origin: 0% 100%;
		    -webkit-transform: scale(1, 0);
		    -ms-transform: scale(1, 0);
		    -moz-transform: scale(1, 0);
		    -o-transform: scale(1, 0);
		    transform: scale(1, 0);
		  }
		}

		/* -------------------------------------------------- */
		/* チルチルミチルのしごと */
		/* -------------------------------------------------- */
		#topService {
			width: 100%;
			position: relative;
		}

		#topService .txt1 {
			width: 90%;
			margin: 0 auto;
		}

		#topTit1:before {
			content: "Service";
		}

		#topIllust {
			width: 100%;
			height: 240px;
			margin: 0 auto 70px;
			position: relative;
		}

		#topIllust li img {
			width: 100%;
		}

		@keyframes bounceIn {
		  0%, 20%, 40%, 60%, 80%, 100% {
		    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		  }

		  0% {
		    opacity: 0;
		    -webkit-transform: scale3d(.3, .3, .3);
		    -ms-transform: scale3d(.3, .3, .3);
		    transform: scale3d(.3, .3, .3);
		  }

		  20% {
		    -webkit-transform: scale3d(1.1, 1.1, 1.1);
		    -ms-transform: scale3d(1.1, 1.1, 1.1);
		    transform: scale3d(1.1, 1.1, 1.1);
		  }

		  40% {
		    -webkit-transform: scale3d(.9, .9, .9);
		    -ms-transform: scale3d(.9, .9, .9);
		    transform: scale3d(.9, .9, .9);
		  }

		  60% {
		    opacity: 1;
		    -webkit-transform: scale3d(1.03, 1.03, 1.03);
		    -ms-transform: scale3d(1.03, 1.03, 1.03);
		    transform: scale3d(1.03, 1.03, 1.03);
		  }

		  80% {
		    -webkit-transform: scale3d(.97, .97, .97);
		    -ms-transform: scale3d(.97, .97, .97);
		    transform: scale3d(.97, .97, .97);
		  }

		  100% {
		    opacity: 1;
		    -webkit-transform: scale3d(1, 1, 1);
		    -ms-transform: scale3d(1, 1, 1);
		    transform: scale3d(1, 1, 1);
		  }
		}

		.bounceIn {
		  -webkit-animation-name: bounceIn;
		  animation-name: bounceIn;
		  -webkit-animation-duration: .75s;
		  animation-duration: .75s;
		}

		#illust1 {
			width: 31%;
			position: absolute;
			top: 20px;
			left: 31%;
			z-index: 1;
			opacity: 0;
		}

		#illust1.active {
			-webkit-animation-name: bounceIn;
			animation-name: bounceIn;
			-webkit-animation-duration: .75s;
			animation-duration: .75s;
			opacity: 1;
		}

		#illust2 {
			width: 47%;
			position: absolute;
			top: 50px;
			left: 46%;
			z-index: 2;
			opacity: 0;
		}

		#illust2.active {
			-webkit-animation-name: bounceIn;
			animation-name: bounceIn;
			-webkit-animation-duration: .75s;
			animation-duration: .75s;
			opacity: 1;
		}

		#illust3 {
			width: 43%;
			position: absolute;
			top: 55px;
			left: 5%;
			z-index: 3;
			opacity: 0;
		}

		#illust3.active {
			-webkit-animation-name: bounceIn;
			animation-name: bounceIn;
			-webkit-animation-duration: .75s;
			animation-duration: .75s;
			opacity: 1;
		}

		#illust4 {
			width: 47%;
			position: absolute;
			top: 120px;
			left: 33%;
			z-index: 4;
			opacity: 0;
		}

		#illust4.active {
			-webkit-animation-name: bounceIn;
			animation-name: bounceIn;
			-webkit-animation-duration: .75s;
			animation-duration: .75s;
			opacity: 1;
		}

		#illust5 {
			position: absolute;
			/* top: 120px;
			left: 120px;
			z-index: 4;
			opacity: 0; */
		}

		#illust5.active {
			/* -webkit-animation-name: bounceIn;
			animation-name: bounceIn;
			-webkit-animation-duration: .75s;
			animation-duration: .75s;
			opacity: 1; */
		}

		#illust5 img {
			width: 100%;
		}



		#serviceLink {
			width: 90%;
			margin: 0 auto;
			padding-bottom: 80px;
			text-align: center;
		}


		/* -------------------------------------------------- */
		/* サービス */
		/* -------------------------------------------------- */
		#serviceDetail {
			padding-bottom: 40px;
		}

		.serviceLink {
			width: 100%;
			padding-top: 160px;
			margin-bottom: 40px;
			overflow: hidden;
			position: relative;
			display: block;
			background: #f9f8f4;
		}

		.leftPhoto {
			width: 100%;
			float: none;
			transform:skewX(0deg);
			z-index: 2;
			position: relative;
			display: table;
		}

		.rightPhoto {
			width: 100%;
			float: none;
			transform:skewX(0deg);
			z-index: 2;
			position: relative;
			display: table;
		}

		.serviceBox {
			height: auto;
			width: 100%;
			padding: 20px 5%;
			display: table-cell;
			vertical-align: middle;
			background: #f9f8f4;
		}

		.leftPhoto h3
		{
			transform:skewX(0deg);
		}

		.leftPhoto .serviceTxt
		{
			transform:skewX(0deg);
			padding-left: 0;
		}

		.rightPhoto h3
		{
			transform:skewX(0deg);
			padding-left: 0;
		}

		.rightPhoto .serviceTxt
		{
			transform:skewX(0deg);
		}

		a.serviceLink:after {
			
		}

		#s1:after {
			background: url(../../img/top/top_service1.webp) center center no-repeat #f9f8f4;
			-webkit-background-size: cover;
			background-size: cover;
			content: "";
			width: 100%;
			height: 160px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		#s2:after {
			background: url(../../img/top/top_service2.webp) center center no-repeat #f9f8f4;
			-webkit-background-size: cover;
			background-size: cover;
			content: "";
			width: 100%;
			height: 160px;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
		}

		#s3:after {
			background: url(../../img/top/top_service3.webp) center center no-repeat #f9f8f4;
			-webkit-background-size: cover;
			background-size: cover;
			content: "";
			width: 100%;
			height: 160px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

		#s4:after {
			background: url(../../img/top/top_service4.webp) center center no-repeat #f9f8f4;
			-webkit-background-size: cover;
			background-size: cover;
			content: "";
			width: 100%;
			height: 160px;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
		}

		.serviceLink .leftPhoto:before {
			content: "";
			display: block;
			width: 0;
			height: 340px;
			background: rgba(0,149,218,0.1);
			z-index: 3;
			position: absolute;
			top: 0;
			left: 0;
			transition: all 0.3s ease-in-out 0s;
		}

		.serviceLink .rightPhoto:before {
			content: "";
			display: block;
			width: 0;
			height: 340px;
			background: rgba(0,149,218,0.1);
			z-index: 3;
			position: absolute;
			top: 0;
			right: 0;
			transition: all 0.3s ease-in-out 0s;
		}

		/* -------------------------------------------------- */
		/* ブログ */
		/* -------------------------------------------------- */
		#topTit3:before {
			content: "News";
		}

		#blogWrap {
			width: 100%;
			margin: 0;
			padding-bottom: 80px;
			position: relative;
		}

		.blog {
			width: 90%;
			height: auto;
			margin: 0 auto 5px;
			float: none;
			background-color: #f6f6f3;
		}

		.blog a {
			position: relative;
			display: flex; /* 子要素をflexboxで揃える */
		    justify-content: center; /* 子要素をflexboxにより中央に配置する */
		}

		.blog:nth-child(2n) {
			margin: 0 auto 5px;
		}

		.blogImg {
			width: 30%;
			height: 100%;
		/*	padding-left: 2%;*/
			vertical-align: middle;
			overflow: hidden;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}

		.blogImg img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			font-family: 'object-fit: cover;';
		}

		.blogTxt {
			width: 70%;
		  height: auto;
		  padding: 3px 2% 0;
		  background: #f6f6f3;
		  vertical-align: middle;
		}

		.blogDate {
			padding-right: 10px;
			color: #888888;
			font-size:1.2rem;
			display: inline-block;
		}

		.blogCat {
			display: inline-block;
		}

		.blogCat li {
			padding: 0 10px;
			margin-right: 3px;
			background: #FFF;
			border: 1px #0095da solid;
			font-size: 1rem;
			color: #0095da;
			border-radius: 10px;
			display: inline-block;
			vertical-align: middle;
		}

		.blogTit {
			padding: 5px 0 0;
			line-height: 1.1em;
			font-size: 1.2rem;
		}

		@media screen and (max-width:374px){
			.blogTit {
				font-size: 3.2vw;
			}
		}

		.count {
			width: 30%;
			display: inline-block;
			vertical-align: middle;
			padding: 0px 5px;
			position: absolute;
			left: 0px;
			bottom: 0px;
			background: rgba(0,0,0,0.5);
			color: #FFF;
			font-size: 10px;
			text-align: right;
		}

		.count:before {
			content: "";
			display: inline-block;
			vertical-align: middle;
			width: 10px;
			height: 8px;
			padding-right: 2px;
			background: url(../../img/common/heart_sp.png) 0 0 no-repeat;
			background-size: contain;
		}

		.user {
			display: inline-block;
			vertical-align: middle;
			width: 20px;
			height: 20px;
			border-radius: 30px;
			background: #EEE;
			overflow: hidden;
			position: absolute;
			top: 3px;
			right: 5px;
		}

		.user img {
			width: 100%;
			height: auto;
		}

		#blogBtn {
			width: 90%;
			margin: 0 auto;
			padding-top: 10px;
			text-align: center;
		}

		/* -------------------------------------------------- */
		/* バナーエリア */
		/* -------------------------------------------------- */
		#bnrArea {
			width: 100%;
			margin: 0;
			padding-bottom: 70px;
		}

		#bnrArea ul {
			width: 90%;
			margin: 0 auto;
		}

		#bnrArea li {
			padding-bottom: 10px;
		}

		#bnrArea li a img {
			width: 100%;
		}

		/* -------------------------------------------------- */
		/* インスタグラム */
		/* -------------------------------------------------- */
		#igIcon {
			width: 1000px;
			margin: 0 auto;
			padding-bottom: 10px;
		}

		/* ボタンカスタマイズ */
		/* ------------------------ */
		.sp-previous-arrow::before, .sp-previous-arrow::after, .sp-next-arrow::before, .sp-next-arrow::after {
			display: none;
		}

		#instagram .sp-horizontal .sp-next-arrow {
			width: 35px;
			height: 35px;
			right: 0;
			border: 1px #0095da solid;
			background:  url(../../img/common/icon1.png) center center no-repeat #FFF;
			position: relative;
			display: inline-block;
			transition: all 0.3s ease-in-out 0s;
		}

		#instagram .sp-horizontal .sp-previous-arrow {
			width: 35px;
			height: 35px;
			left: 0;
			margin-right: 5px;
			border: 1px #0095da solid;
			background:  url(../../img/common/icon3.png) center center no-repeat #FFF;
			position: relative;
			display: inline-block;
			transition: all 0.3s ease-in-out 0s;
		}

		#instagram .sp-horizontal .sp-arrows {
			width: auto;
			top: -50px;
			right: 50%;
			left: inherit;
			margin: 0 -500px 0 0;
		}


		/* -------------------------------------------------- */
		/* 採用情報 */
		/* -------------------------------------------------- */
		#recruit {
			width: 100%;
			/* height: 477px; */
			padding-bottom: 20px;
			background: url(../../img/top/top_recruit_bg_sp2.jpg) center center no-repeat;
			-webkit-background-size: cover;
			background-size: cover;
			position: relative;
		}

		#recruitIn {
			width: 90%;
			padding-top: 40px;
		  position: static;
		  top: 0;
		  left: 0;
		  margin: 0 auto;
		  color: #FFF;
		}

		#recruitIn h3 {
			font-size: 1.6rem;
			font-weight: 500;
		}

		#recruitIn p {
			font-size: 1.6rem;
			font-weight: 500;
		}

		#recruitIn #subTit {
			font-size: 2.8rem;
			font-weight: 500;
			padding-bottom: 10px;
		}

		#recruitLink {
			padding: 20px 0 0;
		}

		#recruitLink li {
			margin: 0 0 20px 0;
			display: block;
		}

	/* SPここまで */
}