/* !reserve
---------------------------------------------------------- */
.top-head .inner {
	background-color: rgba(255,255,255,0.20) !important;
}


@keyframes topCatchCopyAnimate1 {
  0% { 
	  opacity: 0;
	}
  100% {
	  opacity: 1;
	}
}
@keyframes topTitleAnimate1 {
  0% { 
	  opacity: 0;
		width: 0%;
	}
  100% {
	  opacity: 1;
	  width: 100%;
	}
}
@keyframes topTitleTextAnimate1 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 20px;
	}
}

@keyframes topTitleTextAnimate2 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 60px;
	}
}

@keyframes topTitleTextAnimate3 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 100px;
	}
}

@keyframes topTitleTextAnimate4 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 140px;
	}
}
@keyframes topTitleTextAnimate5 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 180px;
	}
}
@keyframes topTitleTextAnimate6 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 220px;
	}
}
@keyframes topTitleTextAnimate7 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 260px;
	}
}
@keyframes topTitleTextAnimate8 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 300px;
	}
}
@keyframes topTitleTextAnimate9 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 340px;
	}
}
@keyframes topTitleTextAnimate10 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 380px;
	}
}


@keyframes topTitleTextAnimate1sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 10px;
	}
}

@keyframes topTitleTextAnimate2sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 40px;
	}
}

@keyframes topTitleTextAnimate3sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 70px;
	}
}

@keyframes topTitleTextAnimate4sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 100px;
	}
}
@keyframes topTitleTextAnimate5sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 130px;
	}
}
@keyframes topTitleTextAnimate6sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 160px;
	}
}
@keyframes topTitleTextAnimate7sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 190px;
	}
}
@keyframes topTitleTextAnimate8sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 220px;
	}
}
@keyframes topTitleTextAnimate9sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 250px;
	}
}
@keyframes topTitleTextAnimate10sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 280px;
	}
}



@keyframes topBackAnimate1 {
  0% { 
	  opacity: 0;
		width: 0%;
	}
  100% {
	  opacity: 1;
	  width: 50%;
	}
}
@keyframes topBackAnimate1Tb {
  0% { 
	  opacity: 0;
		width: 0%;
	}
  100% {
	  opacity: 1;
	  width: 65%;
	}
}

@keyframes topTextAnimate1 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/*
@keyframes topTitleTextAnimate1 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 20px;
	}
}

@keyframes topTitleTextAnimate2 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 60px;
	}
}

@keyframes topTitleTextAnimate3 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 100px;
	}
}

@keyframes topTitleTextAnimate4 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 140px;
	}
}

@keyframes topTitleTextAnimate5 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 180px;
	}
}

@keyframes topTitleTextAnimate6 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 220px;
	}
}

@keyframes topTitleTextAnimate7 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 260px;
	}
}

@keyframes topTitleTextAnimate8 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 300px;
	}
}

@keyframes topTitleTextAnimate9 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 340px;
	}
}

@keyframes topTitleTextAnimate10 {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 380px;
	}
}

@keyframes topTitleTextAnimate1sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 10px;
	}
}

@keyframes topTitleTextAnimate2sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 35px;
	}
}

@keyframes topTitleTextAnimate3sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 60px;
	}
}

@keyframes topTitleTextAnimate4sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 85px;
	}
}

@keyframes topTitleTextAnimate5sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 110px;
	}
}

@keyframes topTitleTextAnimate6sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 135px;
	}
}

@keyframes topTitleTextAnimate7sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 160px;
	}
}

@keyframes topTitleTextAnimate8sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 185px;
	}
}

@keyframes topTitleTextAnimate9sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 210px;
	}
}

@keyframes topTitleTextAnimate10sp {
  0% { 
	  opacity: 0;
	  left: 0px;
	}
  100% { 
	  opacity: 1;
	  left: 235px;
	}
}



@keyframes topCatchCopyAnimate1 {
  0% { 
	  opacity: 0;
	}
  100% {
	  opacity: 1;
	}
}


@keyframes topTextAnimate1 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
*/


.aboutWide {
	width: 100%;
	position: relative;
}


#about .topImg div.topTitle {
	width: 0%;
	padding: 16px 8px;
	/*background-color: #f2f2f2;
	animation: topTitleAnimate1 0.7s ease 0s forwards;*/
}

#about .topImg div.topTitle p.topTitleText {
	font-size: 2.2em;
	font-weight: 400;
	height: 32px;
	position: relative;
}

#about .topImg div.topTitle p.topTitleText span {
	position: absolute;
	top: 8px;
	left: 0px;
	opacity: 0;
}

#about .topImg div.topTitle p.topTitleText span:nth-child(1) {
	animation: topTitleTextAnimate1 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(2) {
	animation: topTitleTextAnimate2 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(3) {
	animation: topTitleTextAnimate3 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(4) {
	animation: topTitleTextAnimate4 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(5) {
	animation: topTitleTextAnimate5 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(6) {
	animation: topTitleTextAnimate6 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(7) {
	animation: topTitleTextAnimate7 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(8) {
	animation: topTitleTextAnimate8 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(9) {
	animation: topTitleTextAnimate9 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(10) {
	animation: topTitleTextAnimate10 1.0s ease-out 0s forwards;
}





#about .topImg div.aboutTopImgText {
	position: absolute;
	display: block;
	top: 440px;
	left: 40px;
	padding: 16px;
	width: 0%;
	height: 300px;
	opacity: 0;
	background-color: rgba(255,255,255,0.70);
	animation: topBackAnimate1 0.7s ease 0s forwards;
}


#about .topImg div.aboutTopImgText p.topCatchCopyText, #about .topImg p.aboutTopImgText1, #about .topImg p.aboutTopImgText2, #about .topImg p.aboutTopImgText3, #about .topImg p.aboutTopImgText4, #about .topImg p.aboutTopImgText5 {
	font-size: 1.1em;
	line-height: 2.0em;	
	opacity: 0;
}


#about .topImg div.aboutTopImgText p.topCatchCopyText {
	font-size: 2.0em;
	font-weight: 600;
	line-height: 2.0em;
	letter-spacing: 4px;
	opacity: 0;
	animation: topCatchCopyAnimate1 2s ease 1s forwards;
}


#about .topImg p.aboutTopImgText1 {
	animation: topTextAnimate1 0.5s ease 2.0s forwards;
}
#about .topImg p.aboutTopImgText2 {
	animation: topTextAnimate1 0.5s ease 2.5s forwards;
}
#about .topImg p.aboutTopImgText3 {
	animation: topTextAnimate1 0.5s ease 3.0s forwards;
}
#about .topImg p.aboutTopImgText4 {
	animation: topTextAnimate1 0.5s ease 3.5s forwards;
}
#about .topImg p.aboutTopImgText5 {
	animation: topTextAnimate1 0.5s ease 4.0s forwards;
}


/*
#about .topImgBox {
	width: 100%;
	max-width: 1344px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-bottom: 0px;
}


#about .topImgBox div.topTitle {
	width: 0%;
	padding: 16px 8px;
}

#about .topImgBox div.topTitle p.topTitleText {
	font-size: 2.2em;
	font-weight: 400;
	height: 32px;
	position: relative;
}

#about .topImgBox div.topTitle p.topTitleText span {
	position: absolute;
	top: 8px;
	left: 0px;
	opacity: 0;
}

#about .topImgBox div.topTitle p.topTitleText span:nth-child(1) {
	animation: topTitleTextAnimate1 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(2) {
	animation: topTitleTextAnimate2 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(3) {
	animation: topTitleTextAnimate3 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(4) {
	animation: topTitleTextAnimate4 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(5) {
	animation: topTitleTextAnimate5 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(6) {
	animation: topTitleTextAnimate6 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(7) {
	animation: topTitleTextAnimate7 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(8) {
	animation: topTitleTextAnimate8 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(9) {
	animation: topTitleTextAnimate9 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(10) {
	animation: topTitleTextAnimate10 1.0s ease 0s forwards;
}


#about .topImgBox div.topCatchCopy {
	position: absolute;
	top: 160px;
	left: 64px;
}

#about .topImgBox div.topCatchCopy p.topCatchCopyText {
	font-size: 2.6em;
	font-weight: 600;
	height: 32px;
	letter-spacing: 4px;
	opacity: 0;
	animation: topCatchCopyAnimate1 2s ease 0s forwards;
}


#about .topImgBox .topImgText {
	position: absolute;
	top: 240px;
	left: 96px;
}

#about .topImgBox .topImgText p {
	font-size: 1.2em;
	line-height: 2.0em;
	letter-spacing: 1px;
	opacity: 0;
}

#about .topImgBox .topImgText p:nth-child(1) {
	animation: topTextAnimate1 1.0s ease 0.5s forwards;
}
#about .topImgBox .topImgText p:nth-child(2) {
	animation: topTextAnimate1 1.0s ease 1.0s forwards;
}
#about .topImgBox .topImgText p:nth-child(3) {
	animation: topTextAnimate1 1.0s ease 1.5s forwards;
}
#about .topImgBox .topImgText p:nth-child(4) {
	animation: topTextAnimate1 1.0s ease 2.0s forwards;
}
#about .topImgBox .topImgText p:nth-child(5) {
	animation: topTextAnimate1 1.0s ease 2.5s forwards;
}

*/

.aboutBox {
	width: 100%;
	margin-bottom: 88px;
}

.Rgrid-contents {
	display: block;
    zoom: 1; /* float解除 for IE6/7  */
}
.Rgrid-contents:after, .Rgrid-contents:before {
    content: "";
    clear: both;
    display: block;
}

.aboutBox .img {
	padding-top: 32px;
	margin-bottom: 32px;
}
/*
#personnel .aboutLeft {
	width: 50%;
	float: left;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
#personnel .aboutRight {
	width: 44%;
	float: right;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-top: 12%;
	padding-left: 0px;
	padding-right: 0px;
}
*/

#personnel .aboutLeft {
	width: 84%;
	float: none;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

#whatOdelic .aboutLeft {
	width: 50%;
	float: left;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0px;
	padding-left: 16px;
	padding-right: 32px;
}
/*#personnel .aboutRight {
	width: 38%;
	float: right;
	position: relative;
	padding-left: 8px;
	padding-right: 16px;
}*/
#whatOdelic .aboutRight {
	width: 44%;
	float: right;
	position: relative;
	padding-top: 0px;
	padding-left: 8px;
	padding-right: 16px;
}

#personnel h3 {
	font-size: 2.0em;
	line-height: 1.2em;
	letter-spacing: 2px;
	font-weight: normal;
	margin-bottom: 24px;
	display: block;
	text-align: center;
}
#personnel h3.sp {
	display: none;
}
#personnel .aboutLeft div {
	margin-bottom: 24px;
}
#personnel .aboutLeft div p {
	font-size: 1.0em;
	color: #555555;
	line-height: 2em;
	font-weight: normal;
	display: block;
	width: 100%;
}
#personnel .aboutLeft div p span.img {
	display: block;
	width: 40%;
	float: right;
	margin-left: 16px;
	padding-top: 0px;
}
#personnel .aboutLeft div p span.img img {
	width: 100%;
	height: auto;	
}
#personnel .aboutLeft .imgSp {
	display: none;
}
/*
#personnel .aboutLeft p {
	font-size: 1.0em;
	color: #555555;
	line-height: 2em;
	font-weight: normal;
	margin-bottom: 24px;
}
*/
/*#personnel .aboutLeft p:nth-of-type(2) {
	width: 55%;
	float: left;
}*/


/*#personnel .aboutLeft .personnelImgSp {
	display: none;
}
#personnel .aboutLeft .personnelImg {
	display: block;
	width: 40%;
	float: right;
	padding-top: 5%;
}

#personnel .aboutLeft .personnelImg img {
	width: 100%;
	height: auto;
}*/





/*#personnel .aboutRight .img img {
	width: 100%;
	height: auto;
}*/

#personnel .r-contents-sub {
	transition: 1s;	
	opacity: 0;
	padding-top: 100px;
	
}
#personnel .r-contents-sub.animated {
	opacity: 1;
	padding-top: 0px;
	
}



#whatOdelic {
	max-width: none;
	background-color: #F1F1F1;
	padding-top: 64px;
	padding-bottom: 64px;
	transition: 1s;	
	opacity: 0;
	margin-top: 100px;
}

#whatOdelic.animated {
	opacity: 1;
	margin-top: 0px;
}

#whatOdelic h3 {
	font-size: 2.8rem;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
	display: block;
}
#whatOdelic h3.sp {
	display: none;
}

#whatOdelic .aboutLeft h4 {
	font-size: 1.8rem;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
}
#whatOdelic .aboutLeft p {
	font-size: 1.3rem;
	line-height: 2em;
	font-weight: normal;
	margin-bottom: 24px;
	padding-left: 0px;
}



#list .listTitle {
	width: 100%;
	margin-bottom: 40px;
	position: relative;
}

/*#list .listTitle:before {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 0%;
  display: block;
}

#list .listTitle:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 280px;
  background: -moz-linear-gradient(left, rgba(255,255,255,0.40) 30%, rgba(255,255,255,0.90));
  background: -webkit-linear-gradient(left, rgba(255,255,255,0.40) 30%, rgba(255,255,255,0.90));
  background:linear-gradient(to right, rgba(255,255,255,0.40) 30%, rgba(255,255,255,0.90));
	z-index: 1;
}


#list .listTitle img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	opacity: 1.0;
}

#list .Rgrid-contents .listTitle h3 {
	position: absolute;
	letter-spacing: 3px;
	font-size: 2.4em;
	z-index: 10
}

#list .Rgrid-contents:nth-child(1) .listTitle h3 {
	top: 120px;
	right: 120px;
}*/

/*#request .Rgrid-contents {
	width: 100%;
	padding-right: 16px !important;
	display: flex;
	justify-content: space-between;
}

#request .Rgrid-contents h3 {
	font-size: 2.6rem;
	line-height: 48px;
	letter-spacing: 2px;
	font-weight: normal;
	margin-bottom: 32px;
	margin-top: -5px;
}

#request .last .Rgrid-contents {
	display: block;
}
#request .last .Rgrid-contents h3 {
	text-align: center;
}
#request .last .Rgrid-contents h3::before {
	content: '――　';
	display: inline-block;
	letter-spacing: 0px;
}
#request .last .Rgrid-contents h3::after {
	content: '　――　';
	display: inline-block;
	letter-spacing: 0px;
}

#request .r-contents-sub {
	margin-bottom: 80px;
	transition: 1s;	
	opacity: 0;
	padding-top: 100px;
}

#request .r-contents-sub.animated {
	opacity: 1;
	padding-top: 0px;
	
}

#request .long-area {
	display: block;
	background: #ffffff
}

#request .text p {
	font-size: 1.3rem;
	line-height: 2em;
	padding-left: 32px;
	padding-right: 32px;
}
#request .last p {
	font-size: 1.4rem;
	line-height: 2em;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}*/

#request {
	padding-bottom: 24px;
	padding-top: 24px;
}

#request .requestPc {
	display: block;
}
#request .requestSp {
	display: none;
}

#request .requestPc h3 {
	width: 0%;
	font-size: 2.4em;
	font-weight: 600;
	text-align: center;
	letter-spacing: -40px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 64px;
	padding-bottom: 12px;
	border-bottom: 0px solid #A4A4A4;
	transition: 0.5s;	
	opacity: 0;
}

#request .requestPc.animated h3 {
	width: 56%;
	opacity: 1;
	letter-spacing: 2px;
	border-bottom: 2px solid #A4A4A4;	
}
	
#request .requestPc p {
	font-family: 'UD新ゴNT L';
	transform: rotate(0.00deg);
	font-size: 1.6em;
	line-height: 2em;
	text-align: center;
	letter-spacing: 2px;
	margin-bottom: 48px;
	font-weight: normal;
}

#request .requestPc.animated p span:nth-child(2), #request  .requestPc.animated p span:nth-of-type(4){
	position: relative;
	width: 100%;
	transition: 0.5s 2.2s;
	opacity: 0;
}
#request .requestPc.animated p span:nth-child(2), #request  .requestPc.animated p span:nth-of-type(4){
	opacity: 1;
}

#request .requestPc p span:nth-child(2)::after, #request .requestPc p span:nth-of-type(4)::after {
	content: '';
	position: absolute;
	display: block;
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 42px;
	top: 0px;
	left: 0%;
	transition: 0.5s 2.2s;
	
}


#request  .requestPc.animated p span:nth-child(2)::after, #request  .requestPc.animated p span:nth-of-type(4)::after {
	width: 0%;
	left: 100%;
}


#request .requestPc p:nth-of-type(1) span:nth-of-type(1) {
	transition: 0.5s 0.5s;		
	font-size: 1.6em;
	opacity: 0;	
}
#request .requestPc p:nth-of-type(2) span:nth-of-type(1) {
	transition: 0.5s 0.8s;		
	font-size: 1.6em;
	opacity: 0;	
}
#request .requestPc p:nth-of-type(2) span:nth-of-type(3) {
	transition: 0.5s 1.1s;	
	font-size: 1.6em;
	opacity: 0;		
}
#request .requestPc p:nth-of-type(3) span:nth-of-type(1) {
	transition: 0.5s 1.4s;	
	font-size: 1.6em;
	opacity: 0;		
}
#request .requestPc p:nth-of-type(3) span:nth-of-type(3) {
	transition: 0.5s 1.7s;	
	font-size: 1.6em;
	opacity: 0;		
}



#request  .requestPc.animated p:nth-of-type(1) span:nth-of-type(1), #request  .requestPc.animated p:nth-of-type(2) span:nth-of-type(1), #request  .requestPc.animated p:nth-of-type(2) span:nth-of-type(3), #request  .requestPc.animated p:nth-of-type(3) span:nth-of-type(1), #request  .requestPc.animated p:nth-of-type(3) span:nth-of-type(3) {
	font-size: 1.6em;	
	opacity: 1;
}







#numbers ul.number {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 176px;
	transition: 1s;
	opacity: 0;
	zoom: 1; /* float解除 for IE6/7  */
}
#numbers ul.number:after, #numbers ul.number:before {
    content: "";
    clear: both;
    display: block;
}
#numbers ul.number:nth-of-type(1) {
	padding-top: 88px;	
}

#numbers ul.number.animated {
	opacity: 1;	
	padding-top: 88px;
} 
#numbers ul.number:nth-of-type(1).animated {
	opacity: 1;	
	padding-top: 0px;
}
	
#numbers ul.number li {
	width: 25%;
	margin-left: 37.5%;
	margin-right: 37.5%;
	float: left;
}
#numbers ul.number li img {
	width: 100%;
	height: auto;
}

#numbers ul.number li:nth-child(1) {
	transition: 0.5s 0.5s;
	margin-left: 0%;
	margin-right: 0%;
	position: absolute;
	left: 20%;
	opacity: 0;
	z-index: -5;
}
#numbers ul.number li:nth-child(3) {
	transition: 0.5s 0.5s;
	margin-left: 0%;
	margin-right: 0%;
	position: absolute;
	right: 20%;
	opacity: 0;
	z-index: -5;
}
#numbers ul.number.animated li:nth-child(1) {
	left: 5%;
	opacity: 1;
} 
#numbers ul.number.animated li:nth-child(3) {
	right: 5%;
	opacity: 1;
} 
		
	/*transition: 1s;	
	opacity: 0;*/


/*ul.number li:nth-child(1)::after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	content: '';
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 100%;
}

ul.number li:nth-child(1).scrollAction::after  {
	transition: 1s;
	height: 100%;
	top: 0%;
}
ul.number li:nth-child(1).scrollAction.animated::after  {
	height: 0%;
	top: 100%;
}

ul.number li:nth-child(2)::after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	content: '';
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 100%;
}

ul.number li:nth-child(2).scrollAction::after  {
	transition: 1s;
	height: 100%;
	top: 0%;
}
ul.number li:nth-child(2).scrollAction.animated::after  {
	height: 0%;
	top: 100%;
}

ul.number li:nth-child(3)::after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	content: '';
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 100%;
}

ul.number li:nth-child(3).scrollAction::after  {
	transition: 1s;
	height: 100%;
	top: 0%;
}
ul.number li:nth-child(3).scrollAction.animated::after  {
	height: 0%;
	top: 100%;
}*/




/*
ul.number2 {
	display: flex;
}
	
ul.number2 li {
	width: calc(50% - 40px);
	margin-left: auto;
	margin-right: auto;
}
ul.number2 li img {
	width: 100%;
	height: auto;
}

ul.number2 li::after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	content: '';
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 100%;
}

ul.number2 li.scrollAction::after  {
	transition: 1s;
	width: 100%;
	left: 0;
}
ul.number2 li.scrollAction.animated::after  {
	width: 0%;
	left: 100%;
}


ul.number3 {
	display: flex;
}
	
ul.number3 li {
	width: calc(50% - 40px);
	margin-left: auto;
	margin-right: auto;
}
ul.number3 li img {
	width: 100%;
	height: auto;
}

ul.number3 li::after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	content: '';
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 100%;
}

ul.number3 li.scrollAction::after  {
	transition: 1s;
	width: 100%;
	left: 0;
}
ul.number3 li.scrollAction.animated::after  {
	width: 0%;
	left: 100%;
}
*/


#plan h4 {
	font-size: 2.0rem;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 48px;
}
.flowchartWrap {
		width: 100%;
	zoom: 1; /* float解除 for IE6/7  */
}
.flowchartWrap:after, .flowchartWrap:before {
    content: "";
    clear: both;
    display: block;
}

.flowchart {
	width: 100%;
	margin-bottom: 40px;
}

.flowchartBox {
	position: relative;
	width: 100%;
	height: 160px;
	background-color: #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px;
	zoom: 1; /* float解除 for IE6/7  */
}
.flowchartBox:after, .flowchartBox:before {
    content: "";
    clear: both;
    display: block;
}


.flowchartBox::after {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	content: '';
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 100%;	
	transition: 1s;
}

.flowchartBox.animated::after {
	width: 0%;
	left: 100%;
}


.flowchartBox .lastX {
	display: block;
	position: absolute;
	right: 0;
	top: 0px;
	width: 40px;
	height: 160px;
	text-align: right;
}
.flowchartBox .lastY {
	display: none;
}
.flowchartBox .lastX img, .flowchartBox .lastY img {
	height: 100%;
	width: auto;;	
}

.flowchart h5 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 5px;
	text-align: left;
}
.flowchart h5::before {
	content: "■ ";
}

	.flowchartBox ul {
		width: 100%;
		height: 145px;
		color: #FFFFFF;
		display:flex;
		flex-diretion: row;
		margin-bottom: 0px;
		position: relative;
	zoom: 1; /* float解除 for IE6/7  */
}
.flowchartBox ul:after, .flowchartBox ul:before {
    content: "";
    clear: both;
    display: block;
}	

.flowchartBox ul.orange {
		/*background-color: #FF6600;*/
		background-color: #d5f6f9;
		/*background-color: #00DBDB;*/
	
}
.flowchartBox ul.red {
		/*background-color: #C30000;*/
		background-color: #5fa4f0;
		/*background-color: #6CB0F8;*/
	
}
	.flowchartBox ul li {
		display: block;
		vertical-align: middle;
		font-size: 13px;
		line-height: 1.6em;
		color: #333333;
	}
	.flowchartBox ul.orange li {
		padding-top: 5%;
		padding-left: 30px;
		padding-right: 45px;		
	}
	.flowchartBox ul.red li {
		padding-top: 2%;
		padding-left: 50px;
		padding-right: 80px;		
	}
	/*.flowchartBox ul.red li:first-child {
		padding-top: 6%;	
		padding-left: 15px;
		padding-right: 15px;	
	}*/
	.flowchartBox ul li.img {
		width: 160px;
		padding-top: 17px;
		padding-left: 0%;
		padding-right: 0px;
		margin-right: 40px;
		text-align: center;
	}
	.flowchartBox ul li.img img {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		border: 1px solid #FFFFFF;
	}
	.flowchartBox ul li.white {
		width: 3px;
		padding: 0px;
		margin-left: auto;
		background-color: #FFFFFF;
	}




	.flowchartBox ul li.arrowX {
		display: block;
		width: 21px;
		padding: 0px;
	}
	.flowchartBox ul li.arrowX img {
		width: 100%;
		height: auto;
	}

	.flowchartBox ul li.arrowY, .flowchartBox ul li.arrowYlast {
		display: none;
	}

.flowchartBox ul li span {
	display: inline-block;
	background: #FFFFFF;
	color: #222222;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 0px;
	margin-bottom: 10px;
	
}

#plan p.flowchartText {
	width: 72%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.3rem;
	line-height: 2em;
	margin-bottom: 48px;
	transition: 1s;	
	opacity: 0;
	padding-top: 100px;
}
#plan p.flowchartText.animated {
	opacity: 1;
	padding-top: 0px;	
}


#plan ul.planPhoto {
	width: 88%;
	margin-left: auto;
	margin-right: auto;
	transition: 1s;	
	opacity: 0;
	padding-top: 100px;
	zoom: 1; /* float解除 for IE6/7  */
}
#plan ul.planPhoto:after, #plan ul.planPhoto:before {
    content: "";
    clear: both;
    display: block;
}
#plan ul.planPhoto.animated {
	opacity: 1;
	padding-top: 0px;	
}


#plan ul.planPhoto li {
	width: 50%;
	padding: 0% 2%;
	margin-bottom: 32px;
	float: left;
}
#plan ul.planPhoto li img {
	width: 100%;
	height: auto;
	margin-bottom: 8px;
}

#plan ul.planPhoto li p {
	text-align: center;
}


#system {
	transition: 1s;	
	opacity: 0;
	padding-top: 100px;
	
}
#system.animated {
	opacity: 1;
	padding-top: 0px;
	
}

#system .Rgrid-contents {
	width: 100%;
	padding-right: 16px !important;
	display: flex;
	justify-content: space-between;
}

#system .Rgrid-contents h3 {
	font-size: 2.0rem;
	line-height: 1.4em;
	letter-spacing: 2px;
	font-weight: normal;
	margin-bottom: 32px;
	margin-top: 0px;
	padding-left: 0px;
}

#system .r-contents-sub {
	padding-top: 0px;
}


#system .long-area {
	display: block;
	background: #ffffff
}

#system .text h4 {
	font-size: 1.8rem;
	margin-bottom: 16px;	
}

#system .text p {
	font-size: 1.3rem;
	line-height: 1.9em;
	padding-left: 8px;
	padding-right: 32px;
	margin-bottom: 24px;
}

#system .text .img {
	display: block;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 48px;
	margin-bottom: 48px;
}
#system .text .imgSp {
	display: none;
}
#system .text .img img {
	width: 100%;
	height: auto;	
}






.r-contents-sub h3.business {
	width: 56%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 48px;
	padding-bottom: 4px;
	font-size: 2.8em;
	line-height: 1.2em;
	font-weight: 600;
	letter-spacing: 5px;
	text-align: center;
	border-bottom: 1px solid #949494;
}
.businessBox {
	width: 100%;
	margin-bottom: 132px;
}

.imgSp {
	display: none;
}

#workInfo, #workFeature .Rgrid-contents, #workVision .Rgrid-contents, #workProjects .Rgrid-contents {
	transition: 1s;	
	opacity: 0;	
	padding-top: 100px;	
}
#workInfo.animated, #workFeature .Rgrid-contents.animated, #workVision .Rgrid-contents.animated, #workProjects .Rgrid-contents.animated {
	opacity: 1;	
	padding-top: 0px;
}


#workInfo .Rgrid-contents, #workFeature .Rgrid-contents, #workProjects .Rgrid-contents {
	display: flex;
}
#workInfo .Rgrid-contents .businessRight, #workFeature .Rgrid-contents .businessRight {
	width: 56%;
	position: relative;
	padding-top: 40px;
	padding-left: 16px;
	padding-right: 32px;
}

#workFeature .Rgrid-contents:nth-of-type(1) .businessRight {
	padding-top: 0px;	
}

#workInfo .Rgrid-contents .businessLeft, #workFeature .Rgrid-contents .businessLeft {
	width: 44%;
	position: relative;
	padding-left: 8px;
	padding-right: 16px;
}

#workInfo .workInfoGarallyBox {
	width: 100%;
	padding-left: 8px;
	padding-right: 16px;
	margin-top: 80px;
}
#workInfo .workInfoGarally {
	width: 64%;
	margin-left: auto;
	margin-right: auto;
}

#workProjects .Rgrid-contents {
	margin-bottom: 80px;	
}

#workInfo .Rgrid-contents .businessRight {
	width: 56%;
	position: relative;
	padding-top: 40px;
	padding-left: 16px;
	padding-right: 32px;
}

#workInfo .Rgrid-contents .businessLeft {
	width: 44%;
	position: relative;
	padding-left: 8px;
	padding-right: 16px;
}

#workProjects .Rgrid-contents.reverse .businessRight {
	width: 44%;
	position: relative;
	padding-left: 8px;
	padding-right: 16px;
	padding-top: 0px;
}

#workProjects .Rgrid-contents.reverse .businessLeft {
	width: 56%;
	position: relative;
	padding-top: 40px;
	padding-left: 16px;
	padding-right: 32px;
}






#workFeature .Rgrid-contents {
	margin-bottom: 80px;	
}

#workFeature .Rgrid-contents.reverse .businessRight, #workProjects .Rgrid-contents .businessRight {
	width: 44%;
	position: relative;
	padding-left: 8px;
	padding-right: 16px;
	padding-top: 0px;
}

#workProjects .Rgrid-contents .businessRight {
	padding-top: 40px;	
}

#workFeature .Rgrid-contents.reverse .businessLeft, #workProjects .Rgrid-contents .businessLeft {
	width: 56%;
	position: relative;
	padding-top: 40px;
	padding-left: 16px;
	padding-right: 32px;
}

#workProjects .Rgrid-contents .businessLeft {
	padding-top: 0px;
}

#workFeature .Rgrid-contents .businessRight h4, #workFeature .Rgrid-contents.reverse .businessLeft h4, #workInfo .Rgrid-contents .businessRight h4, #workProjects .Rgrid-contents .businessRight h4 {
	font-size: 2.2em;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
	padding-left: 16px;
}

#workProjects .Rgrid-contents .businessRight h4 {
	font-size: 1.8em;	
}


#workFeature .Rgrid-contents .businessRight p, #workFeature .Rgrid-contents.reverse .businessLeft p, #workInfo .Rgrid-contents .businessRight p, #workProjects .Rgrid-contents .businessRight p {
	font-size: 1.3rem;
	line-height: 2em;
	font-weight: normal;
	margin-bottom: 24px;
	padding-left: 16px;
}




#workVision .Rgrid-contents {
	display: block;
	position: relative;
	margin-bottom: 80px;
	z-index: 1;
}

#workVision .Rgrid-contents h4 {
	font-size: 2.2em;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
	display: block;
	position: relative;
	z-index: 5;
}
#workVision .Rgrid-contents .spImg {
	display: none
}
#workVision .Rgrid-contents.reverse h4 {
	text-align: right;
}

#workVision .Rgrid-contents .workVisionText {
	background-color: rgba(189,176,123,0.60);
	position: absolute;
	width: 88%;
	padding-top: 64px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 48px;
	top: 1.4em;
	left: 4%;
	
}

#workVision .Rgrid-contents.reverse .workVisionText {
	margin-left: auto;
	right: 4%;
}

#workVision .Rgrid-contents .workVisionText p {
	font-size: 0.9em;
	line-height: 2.2em;
	width: 48%;
	margin-right: auto;
	margin-left: 0px;
	color: #333333;
}

#workVision .Rgrid-contents.reverse .workVisionText p {
	margin-left: auto;
	margin-right: 0px;
}

#workVision .Rgrid-contents .workVisionImg {
	width: 50%;
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 8px;
	position: relative;
	z-index: 10;
}

#workVision .Rgrid-contents.reverse .workVisionImg {
	margin-left: 0px;
	margin-right: auto;
	margin-bottom: 0px;
}


.Rgrid-contents .businessLeft .img img, .Rgrid-contents .businessRight .img img {
	width: 100%;
	height: auto;
}


#workProjects .video video {
	width: 100%;
	height: auto;
}



@media all and (min-width: 1344px) {
	
}

@media all and (max-width: 1087px) {

#about .topImg div.aboutTopImgText {
	position: absolute;
	display: block;
	top: 260px;
	left: 40px;
	padding: 16px;
	width: 0%;
	height: 200px;
	opacity: 0;
	background-color: rgba(255,255,255,0.70);
	animation: topBackAnimate1Tb 0.7s ease 0s forwards;
}

#about .topImg div.aboutTopImgText p.topCatchCopyText, #about .topImg p.aboutTopImgText1, #about .topImg p.aboutTopImgText2, #about .topImg p.aboutTopImgText3, #about .topImg p.aboutTopImgText4, #about .topImg p.aboutTopImgText5 {
	font-size: 0.8em;
	line-height: 2.0em;	
	opacity: 0;
}
#about .topImg div.aboutTopImgText p.topCatchCopyText {
	font-size: 1.4em;
	font-weight: 600;
	line-height: 2.0em;
	letter-spacing: 4px;
	opacity: 0;
	animation: topCatchCopyAnimate1 2s ease 1s forwards;
}	
	
/*	
#about .topImgBox div.topCatchCopy {
	left: 32px;
}

#about .topImgBox div.topCatchCopy p.topCatchCopyText {
	font-size: 2.0em;
}

#about .topImgBox .topImgText {
	left: 48px;
}

#about .topImgBox .topImgText p {
	font-size: 1.1em;
}	
*/	
#request .requestPc h3 {
	font-size: 2.0em;
}	
	
#request  .requestPc.animated h3 {
	width: 72%;
}
.aboutBox {
	width: 100%;
	margin-bottom: 24px;
}	
	
#request .requestPc p {
	font-family: 'UD新ゴNT L';
	transform: rotate(0.00deg);
	font-size: 1.1em;
	line-height: 2em;
	text-align: center;
	letter-spacing: 1px;
	margin-bottom: 12px;
	font-weight: normal;
}	
	
#personnel .aboutLeft {
	width: 100%;
}	
	
#personnel .aboutLeft p {
	font-size: 0.9em;
}	
	
#whatOdelic .aboutRight {
	padding-top: 40px;
}	
	
#personnel .aboutLeft, #whatOdelic .aboutLeft  {
	width: 100%;
	float: none;
	position: relative;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

#personnel .aboutRight, #whatOdelic .aboutRight  {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	float: none;
	position: relative;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 24px;
}
/*
#personnel h3, #whatOdelic h3 {
	display: none;
}
	*/
#personnel h3.sp, #whatOdelic h3.sp {
	font-size: 2.2rem;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
	display: block;
}

#personnel .aboutLeft h4 {
	font-size: 1.8rem;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
	text-align: center;
}

#personnel .aboutLeft p, #whatOdelic .aboutLeft p  {
	font-size: 1.3rem;
	line-height: 2em;
	font-weight: normal;
	margin-bottom: 24px;
	padding-left: 16px;
	padding-right: 16px;
}
	
	
	
	
	
#numbers ul.number.animated {
	padding-top: 48px;
} 	
	
	
	.flowchartBox ul li {
		display: block;
		vertical-align: middle;
		font-size: 12px;
		line-height: 1.6em;
	}	
	
	.flowchartBox ul.orange li {
		padding-top: 9%;
		padding-left: 15px;
		padding-right: 10px;		
	}
	.flowchartBox ul.red li {
		padding-top: 2.5%;
		padding-left: 25px;
		padding-right: 20px;		
	}
	
	.flowchartBox ul li.img {
		width: 130px;
		padding-top: 27px;
		padding-left: 0%;
		padding-right: 0px;
		margin-right: 10px;
		text-align: center;
	}
	.flowchartBox ul li.white {
		width: 3px;
		padding: 0px;
		margin-left: auto;
		background-color: #FFFFFF;
	}	
	.flowchartBox ul li.arrowX {
		display: block;
		width: 21px;
		padding: 0px;
	}		
	
#system .long-area {
	margin-bottom: 0px;
}
	
	
.r-contents-sub h3.business {
	width: 72%;
	font-size: 2.2em;
}	
	
#workInfo .Rgrid-contents .businessRight, #workFeature .Rgrid-contents .businessRight {
	padding-top: 0px;
	padding-right: 0px;
}	
	
#workFeature .Rgrid-contents.reverse .businessLeft, #workProjects .Rgrid-contents .businessLeft {
	padding-top: 0px;
	padding-left: 0px;
}
	
#workFeature .Rgrid-contents .businessRight h4, #workFeature .Rgrid-contents.reverse .businessLeft h4, #workInfo .Rgrid-contents .businessRight h4, #workProjects .Rgrid-contents .businessRight h4 {
	font-size: 1.5em;
}	
	
#workFeature .Rgrid-contents:nth-of-type(4) {
  margin-bottom: 0px;
}	
	
	
#workVision .Rgrid-contents h4 {
	font-size: 1.8em;
}



#workVision .Rgrid-contents .workVisionText {
	background-color: rgba(189,176,123,0.60);
	position: absolute;
	width: 88%;
	padding-top: 64px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 48px;
	top: 1.4em;
	left: 4%;
	
}

#workVision .Rgrid-contents.reverse .workVisionText {
	margin-left: auto;
	right: 4%;
}

#workVision .Rgrid-contents .workVisionText p {
	font-size: 0.9em;
	line-height: 2.2em;
	width: 48%;
	margin-right: auto;
	margin-left: 0px;
	color: #333333;
}

#workVision .Rgrid-contents.reverse .workVisionText p {
	margin-left: auto;
	margin-right: 0px;
}

#workVision .Rgrid-contents .workVisionImg {
	margin-bottom: 280px;
}

#workVision .Rgrid-contents.reverse .workVisionImg {
	margin-bottom: 340px;
}
	
#workProjects .businessRight h4 br.sp {
	display: inline-block !important;
}	
	
#workProjects .Rgrid-contents .businessRight {
  padding-top: 0px;
}		
	
	
	
	
} /* @media all and (max-width: 1087px) {  */


@media all and (max-width: 805px) {

		
	#top ul.topMenu li {
		width: calc(100% - 8px);
	}	
	#system .text .img {
		display: none;
	}	
#system .text .imgSp {
	display: block;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 48px;
	margin-bottom: 48px;
}
#system .text .imgSp img {
	width: 100%;
	height: auto;	
}
	
	
}/*  @media all and (max-width: 805px) {  */


@media all and (max-width: 735px) {
	
	#top ul.topMenu li {
		width: calc(100% - 8px);
	}

	#about .topImg {
		margin-bottom: 40px;
	}	
	
#about .topImg div.topTitle {
	padding: 8px 8px;
}

#about .topImg div.topTitle p.topTitleText {
	font-size: 1.4em;
	font-weight: 400;
	height: 24px;
}	
#about .topImg div.topTitle p.topTitleText span {
	top: 4px;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(1) {
	animation: topTitleTextAnimate1sp 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(2) {
	animation: topTitleTextAnimate2sp 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(3) {
	animation: topTitleTextAnimate3sp 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(4) {
	animation: topTitleTextAnimate4sp 1.0s ease-out 0s forwards;
}	
#about .topImg div.topTitle p.topTitleText span:nth-child(5) {
	animation: topTitleTextAnimate5sp 1.0s ease-out 0s forwards;
}	
#about .topImg div.topTitle p.topTitleText span:nth-child(6) {
	animation: topTitleTextAnimate6sp 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(7) {
	animation: topTitleTextAnimate7sp 1.0s ease-out 0s forwards;
}
#about .topImg div.topTitle p.topTitleText span:nth-child(8) {
	animation: topTitleTextAnimate8sp 1.0s ease-out 0s forwards;
}

#about .topImg div.aboutTopImgText {
	position: relative;
	display: block;
	top: auto;
	left: auto;
	padding: 16px;
	width: 100%;
	height: auto;
	opacity: 1;
	background-color: rgba(255,255,255,0.70);
	animation: none;
}	
#about .topImg div.aboutTopImgText p.topCatchCopyText {
	font-size: 2.0em;
	text-align: center;
}
#about .topImg p.aboutTopImgText1, #about .topImg p.aboutTopImgText2, #about .topImg p.aboutTopImgText3, #about .topImg p.aboutTopImgText4, #about .topImg p.aboutTopImgText5 {
	font-size: 1.0em;
	line-height: 1.8em;	
}	
	
	
/*
#about .topImgBox {
	margin-bottom: 80px;
}	
	
#about .topImgBox div.topTitle p.topTitleText {
	font-size: 1.4em;
	font-weight: 400;
}

#about .topImgBox div.topTitle p.topTitleText span:nth-child(1) {
	animation: topTitleTextAnimate1sp 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(2) {
	animation: topTitleTextAnimate2sp 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(3) {
	animation: topTitleTextAnimate3sp 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(4) {
	animation: topTitleTextAnimate4sp 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(5) {
	animation: topTitleTextAnimate5sp 1.0s ease 0s forwards;
}
#about .topImgBox div.topTitle p.topTitleText span:nth-child(6) {
	animation: topTitleTextAnimate6sp 1.0s ease 0s forwards;
}	
#about .topImgBox div.topTitle p.topTitleText span:nth-child(7) {
	animation: topTitleTextAnimate7sp 1.0s ease 0s forwards;
}	
#about .topImgBox div.topTitle p.topTitleText span:nth-child(8) {
	animation: topTitleTextAnimate8sp 1.0s ease 0s forwards;
}	
#about .topImgBox div.topTitle p.topTitleText span:nth-child(9) {
	animation: topTitleTextAnimate9sp 1.0s ease 0s forwards;
}	
#about .topImgBox div.topTitle p.topTitleText span:nth-child(10) {
	animation: topTitleTextAnimate10sp 1.0s ease 0s forwards;
}	
	
#about .topImgBox div.topCatchCopy {
	position: relative;
	top: 0px;
	left: 0px;
}

#about .topImgBox div.topCatchCopy p.topCatchCopyText {
	font-size: 1.6em;
	line-height: 1.6em;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	height: auto;
	margin-bottom: 32px;
	opacity: 0;
	animation: topCatchCopyAnimate1 2s ease 0s forwards;
}


#about .topImgBox .topImgText {
	position: relative;
	top: 0px;
	left: 0px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

#about .topImgBox .topImgText p {
	font-size: 0.9em;
	line-height: 2.0em;
	letter-spacing: 0px;
	opacity: 0;
}

#about .topImgBox .topImgText p:nth-child(1) {
	animation: topTextAnimate1 1.0s ease 0.5s forwards;
}
#about .topImgBox .topImgText p:nth-child(2) {
	animation: topTextAnimate1 1.0s ease 1.0s forwards;
}
#about .topImgBox .topImgText p:nth-child(3) {
	animation: topTextAnimate1 1.0s ease 1.5s forwards;
}
#about .topImgBox .topImgText p:nth-child(4) {
	animation: topTextAnimate1 1.0s ease 2.0s forwards;
}
#about .topImgBox .topImgText p:nth-child(5) {
	animation: topTextAnimate1 1.0s ease 2.5s forwards;
}	
*/	
	
	
#request .requestPc {
	display: none;
}
#request .requestSp {
	display: block;
}	

#request .requestSp h3 {
	width: 0%;
	font-size: 1.4em;
	font-weight: 600;
	text-align: center;
	letter-spacing: -28px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	padding-bottom: 12px;
	border-bottom: 0px solid #A4A4A4;
	transition: 0.5s;	
	opacity: 0;
}	
#request .requestSp.animated h3 {	
	width: 96%;
	opacity: 1;
	letter-spacing: 0px;
	border-bottom: 2px solid #A4A4A4;
}	
	
	
#request .requestSp p {
	font-family: 'UD新ゴNT L', sans-serif;
	transform: rotate(0.00deg);
	font-size: 0.9em;
	line-height: 3.4em;
	text-align: left;
	letter-spacing: 0px;
	margin-bottom: 0px;
	font-weight: normal;	
	opacity: 0;		
}
#request .requestSp p span {
	font-size: 1.8em;
}
	
	
#request .requestSp p:nth-of-type(1) {
	transition: 1s 0.5s;
}	
#request .requestSp.animated p:nth-of-type(1) {
	opacity: 1;		
}	
	
#request .requestSp p:nth-of-type(2) {
	transition: 1s 1.5s;
}	
#request .requestSp.animated p:nth-of-type(2) {
	opacity: 1;		
}
		
#request .requestSp p:nth-of-type(3) {
	transition: 1s 2.0s;
}	
#request .requestSp.animated p:nth-of-type(3) {
	opacity: 1;		
}
		
#request .requestSp p:nth-of-type(4) {
	transition: 1s 3.0s;
}	
#request .requestSp.animated p:nth-of-type(4) {
	opacity: 1;		
}	
	
#request .requestSp p:nth-of-type(5) {
	transition: 1s 3.5s;
}	
#request .requestSp.animated p:nth-of-type(5) {
	opacity: 1;		
}
	
/*#request .animated p span:nth-child(2), #request .animated p span:nth-of-type(4){
	position: relative;
	width: 100%;
	transition: 0.5s 3s;
	opacity: 0;
}
#request .animated p span:nth-child(2), #request .animated p span:nth-of-type(4){
	opacity: 1;
}

#request p span:nth-child(2)::after, #request p span:nth-of-type(4)::after {
	content: '';
	position: absolute;
	display: block;
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 42px;
	top: 0px;
	left: 0%;
	transition: 0.5s 3s;
	
}


#request .animated p span:nth-child(2)::after, #request .animated p span:nth-of-type(4)::after {
	width: 0%;
	left: 100%;
}


#request p:nth-of-type(1) span:nth-of-type(1) {
	transition: 0.5s 0.5s;		
	font-size: 1.3em;
	opacity: 0;	
}
#request p:nth-of-type(2) span:nth-of-type(1) {
	transition: 0.5s 1s;		
	font-size: 1.3em;
	opacity: 0;	
}
#request p:nth-of-type(2) span:nth-of-type(3) {
	transition: 0.5s 1.5s;	
	font-size: 1.3em;
	opacity: 0;		
}
#request p:nth-of-type(3) span:nth-of-type(1) {
	transition: 0.5s 2s;	
	font-size: 1.3em;
	opacity: 0;		
}
#request p:nth-of-type(3) span:nth-of-type(3) {
	transition: 0.5s 2.5s;	
	font-size: 1.3em;
	opacity: 0;		
}



#request .animated p:nth-of-type(1) span:nth-of-type(1), #request .animated p:nth-of-type(2) span:nth-of-type(1), #request .animated p:nth-of-type(2) span:nth-of-type(3), #request .animated p:nth-of-type(3) span:nth-of-type(1), #request .animated p:nth-of-type(3) span:nth-of-type(3) {
	font-size: 1.6em;	
	opacity: 1;
}	*/
	
	
	
	
	
	
	
	
	
#personnel .aboutLeft, #whatOdelic .aboutLeft  {
	width: 100%;
	float: none;
	position: relative;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

#personnel .aboutRight, #whatOdelic .aboutRight  {
	width: 100%;
	float: none;
	position: relative;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 24px;
}

#personnel h3, #whatOdelic h3 {
	display: none;
}
#personnel h3.sp, #whatOdelic h3.sp {
	font-size: 2.2rem;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
	display: block;
}

#personnel .aboutLeft h4 {
	font-size: 1.8rem;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 24px;
	text-align: center;
}

#personnel .aboutLeft p, #whatOdelic .aboutLeft p  {
	font-size: 1.3rem;
	line-height: 2em;
	font-weight: normal;
	margin-bottom: 24px;
	padding-left: 16px;
	padding-right: 16px;
}
	
#personnel .aboutLeft div {
	margin-bottom: 24px;
}
#personnel .aboutLeft div p {
	font-size: 1.0em;
	color: #555555;
	line-height: 2em;
	font-weight: normal;
	display: block;
	width: 100%;
}
#personnel .aboutLeft div p span.img {
	display: none;
}
#personnel .aboutLeft .imgSp {
	display: block;
}
#personnel .aboutLeft .imgSp img {
	width: 100%;
	height: auto;	
}	
	
	
	
/*#personnel .aboutLeft p:nth-of-type(2) {
	width: 100%;
	float: none;
}


#personnel .aboutLeft .personnelImgSp {
	display: block;
	width: 100%;
	margin-bottom: 32px;
}
#personnel .aboutLeft .personnelImgSp img {
	width: 100%;
	height: auto;
}	
	
#personnel .aboutLeft .personnelImg {
	display: none;
}*/

	
	

/*#request .last p {
	font-size: 1.4rem;
	line-height: 2em;
	width: 88%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}*/	
	

	
	
	
	
	
	
#numbers ul.number {
	padding-top: 0px;
	transition: 1s;
	opacity: 0;
	width: 84%;
}
#numbers ul.number:nth-of-type(1) {
	padding-top: 88px;	
}

#numbers ul.number.animated {
	opacity: 1;	
	padding-top: 0px;
} 
#numbers ul.number:nth-of-type(1).animated {
	opacity: 1;	
	padding-top: 0px;
}
	
#numbers ul.number li {
	width: 96%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 24px;
	float: none;
}
#numbers ul.number li img {
	width: 100%;
	height: auto;
}

#numbers ul.number li:nth-child(1) {
	transition: 0s;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	left: auto;
	opacity: 0;
	z-index: -5;
}
#numbers ul.number li:nth-child(3) {
	transition: 0s;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	right: auto;
	opacity: 0;
	z-index: -5;
}
#numbers ul.number.animated li:nth-child(1) {
	left: auto;
	opacity: 1;
} 
#numbers ul.number.animated li:nth-child(3) {
	right: auto;
	opacity: 1;
} 	
	

	
.flowchart h5 {
	margin-bottom: 25px;
}
	
.flowchart {
	width: 100%;
	margin-bottom: 40px;
}

.flowchartBox {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	background-color: #FFFFFF;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
	overflow: hidden;
}	

.flowchartBox::after {
	position: absolute;
	display: block;
	top: 0%;
	left: 0;
	content: '';
	background-color: #ffffff;
	z-index: 10;
	width: 100%;
	height: 100%;	
	transition: 1s;
}

.flowchartBox.animated::after {
	height: 0%;
	top: 100%;
	width: 100%;
	left: 0%;
}
	
	
.flowchartBox ul {
		width: 96%;
	height: auto;
		color: #FFFFFF;
		display:flex;
		flex-direction: column;
	margin-left: auto;
	margin-right: auto;
		margin-bottom: 0px;
}
	.flowchartBox ul li {
		display: block;
		width: 100% !important;
		text-align: center;
		font-size: 14px;
		line-height: 1.6em;
		float: none;
	}
	.flowchartBox ul.orange li {
		padding-top: 6%;
		padding-left: 2%;
		padding-right: 2%;		
	}
	.flowchartBox ul.red li {
		padding-top: 2.5%;
		padding-left: 2%;
		padding-right: 2%;		
	}
	

	.flowchartBox ul.orange li {
		padding-top: 15%;
		padding-bottom: 10%;
		padding-left: 2%;
		padding-right: 2%;		
	}
	.flowchartBox ul.red li {
		padding-top: 15%;
		padding-bottom: 10%;
		padding-left: 2%;
		padding-right: 2%;		
	}	
	
	.flowchartBox ul li.img {
		width: 80% !important;
		padding-top: 20px;
		padding-left: 0%;
		padding-right: 0%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.flowchartBox ul li.spLast {
		padding-bottom: 30%;		
	}
	.flowchartBox ul li.arrowY {
		display: block;
		width: 100%;
		padding: 0px;
	}
	.flowchartBox ul li.arrowY img {
		width: 100%;
		height: auto;
	}

	.flowchartBox ul li.arrowX {
		display: none;
	}	
.flowchartBox .lastY {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto;
	padding-bottom: 0px;
}
.flowchartBox .lastX {
	display: none;
}
	.flowchartBox .lastY img {
		width: 100%;
		height: auto;
	}
	.flowchartBox ul li.white {
		height: 10px;
		width: auto;
		padding: 0px;
		margin-left: auto;
		background-color: #FFFFFF;
	}	
	
.flowchart h4 {
	font-size: 20px;
	margin-bottom: 10px;
	text-align: center;
}		
	
	#plan p.flowchartText {
		width: 90%;
	}	
#plan ul.planPhoto li {
	width: 100%;
	padding: 0% 2%;
	margin-bottom: 32px;
	float: none;
}	
	
	#system .text .img {
		display: none;
	}	
#system .text .imgSp {
	display: block;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 48px;
	margin-bottom: 48px;
}
#system .text .imgSp img {
	width: 100%;
	height: auto;	
}	
#system .Rgrid-contents h3 {
	padding-left: 8px;
}	
	
	
.r-contents-sub h3.business {
	width: 88%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 48px;
	padding-bottom: 4px;
	font-size: 1.8em;
	line-height: 1.2em;
	font-weight: 600;
	letter-spacing: 5px;
	text-align: center;
	border-bottom: 1px solid #949494;
}	
	
#business #workProjects .r-contents-sub h3.business	{
	font-size: 1.8em;	
}

	
#workInfo .Rgrid-contents .businessRight, #workFeature .Rgrid-contents .businessRight {
	width: 100%;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

#workInfo .Rgrid-contents .businessLeft, #workFeature .Rgrid-contents .businessLeft {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}	

	
#workFeature .Rgrid-contents .businessRight h4, #workFeature .Rgrid-contents.reverse .businessLeft h4, #workInfo .Rgrid-contents .businessRight h4, #workProjects .Rgrid-contents .businessRight h4 {
	font-size: 1.3em;
	padding-top: 24px;
}
#workFeature .Rgrid-contents.reverse .businessLeft h4 {
	padding-top: 0px;		
}


#workFeature .Rgrid-contents .businessRight h4, #workFeature .Rgrid-contents.reverse .businessLeft h4, #workInfo .Rgrid-contents .businessRight h4, #workProjects .Rgrid-contents .businessRight h4 {
	padding-left: 0px;
}	
	
#workFeature .Rgrid-contents .businessRight p, #workFeature .Rgrid-contents.reverse .businessLeft p, #workInfo .Rgrid-contents .businessRight p, #workProjects .Rgrid-contents .businessRight p {
	font-size: 1.3rem;
	padding-left: 0px;
}	
	
#workInfo .workInfoGarallyBox {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 0px;
}
#workInfo .workInfoGarally {
	width: 100%;
}	
	
.imgSp {
	width: 100%;
	margin-bottom: 16px;
	display: block;
}	
	.imgSp img {
		width: 100%;
		height: auto;
	}	

#workFeature .Rgrid-contents {
	margin-bottom: 48px;	
}
	
#workFeature .Rgrid-contents.reverse .businessRight, #workProjects .Rgrid-contents .businessRight {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
}

#workFeature .Rgrid-contents.reverse .businessLeft, #workProjects .Rgrid-contents .businessLeft {
	width: 100%;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
}	
	
#workFeature .Rgrid-contents.reverse .businessRight .img, #workFeature .Rgrid-contents .businessRight .img, #workFeature .Rgrid-contents.reverse .businessLeft .img, #workFeature .Rgrid-contents .businessLeft .img {
	display: none;
}
	

	
	
#workVision.businessBox {
  margin-bottom: 120px;
}	
	
#workVision .Rgrid-contents {
	display: block;
	position: relative;
	margin-bottom: 80px;
	z-index: 1;
}

	#workVision .Rgrid-contents.global {
		margin-bottom: 0px;
	}	
	
#workVision .Rgrid-contents h4 {
	font-size: 1.1em;
	line-height: 1.6em;
	text-align: center;
}

#workVision .Rgrid-contents.reverse h4 {
	text-align: center;
}
	#workVision .Rgrid-contents:nth-of-type(5) h4 {
		padding-top: 0.5em;
	}
	
	
#workVision .Rgrid-contents .workVisionText {
	background-color: rgba(189,176,123,0.60);
	position: static;
	/*width: 88%;*/
	width: 100%;
	padding-top: 48px;
	padding-left: 32px;
	padding-right: 32px;
	padding-bottom: 48px;
	top: 0;
	left: 0;
	
}
#workVision .Rgrid-contents:nth-of-type(5) .workVisionText {
	top: 1.2em;		
}
	
	
#workVision .Rgrid-contents.reverse .workVisionText {	
	right: -10px;
}

#workVision .Rgrid-contents .workVisionText p {
	font-size: 0.9em;
	line-height: 2.2em;
	width: 100%;
	margin-right: auto;
	margin-left: 0px;
	color: #333333;
}

#workVision .Rgrid-contents.reverse .workVisionText p {
	margin-left: auto;
	margin-right: 0px;
}
#workVision .Rgrid-contents .spImg {
	display: block;
}	
#workVision .Rgrid-contents .spImg img {
	width: 100%;
	height: auto;
}
	
#workVision .Rgrid-contents .workVisionImg {
	display: none;
}
	
/*
#workVision .Rgrid-contents .workVisionImg {
	width: 90%;
	margin-left: auto;
	margin-right: 0px;
	padding-top: 480px;
	position: relative;
	z-index: 10;
}

#workVision .Rgrid-contents:nth-of-type(2) .workVisionImg {
	padding-top: 500px;	
	margin-left: 0px;
	margin-right: auto;	
}	
#workVision .Rgrid-contents:nth-of-type(3) .workVisionImg {
	padding-top: 540px;	
}

#workVision .Rgrid-contents:nth-of-type(4) .workVisionImg {
	padding-top: 660px;	
	margin-left: 0px;
	margin-right: auto;	
}
#workVision .Rgrid-contents:nth-of-type(5) .workVisionImg {
	padding-top: 580px;	
}
	
#workVision .Rgrid-contents.reverse .workVisionImg {
	margin-left: 0px;
	margin-right: auto;
}
	
#workVision .Rgrid-contents .workVisionImg {
	margin-bottom: 100px;
}

#workVision .Rgrid-contents.reverse .workVisionImg {
	margin-bottom: 100px;
}
		
#workVision .Rgrid-contents.global .workVisionImg {
	margin-bottom: 40px;
}	
*/	
	
	
}/* @media all and (max-width: 735px) {  */