@charset "utf-8";

/*------------------------------------------------------------
	index
------------------------------------------------------------*/
/*--fadeInUp---*/
.fadeInUp {
	opacity: 0;
	-webkit-transform: translate(0px, 100px);
	transform: translate(0px, 100px);
	-webkit-transition: opacity 2s cubic-bezier(0.18, 1.01, 0.29, 1.04), -webkit-transform 2s cubic-bezier(0.18, 1.01, 0.29, 1.04);
	transition: opacity 2s cubic-bezier(0.18, 1.01, 0.29, 1.04), -webkit-transform 2s cubic-bezier(0.18, 1.01, 0.29, 1.04);
	transition: opacity 2s cubic-bezier(0.18, 1.01, 0.29, 1.04), transform 2s cubic-bezier(0.18, 1.01, 0.29, 1.04);
	transition: opacity 2s cubic-bezier(0.18, 1.01, 0.29, 1.04), transform 2s cubic-bezier(0.18, 1.01, 0.29, 1.04), -webkit-transform 2s cubic-bezier(0.18, 1.01, 0.29, 1.04);
}

.fadeInUp.on {
	-webkit-transform: translate(0px, 0px);
	transform: translate(0px, 0px);
	opacity: 1;
}

#main {
	max-width: inherit;
}

#main .headLine01 {
	margin-bottom: 45px;
}

#main .bgSec {
	padding: 39px 0 260px;
	position: relative;
	background: url("../img/service/main_bg01.jpg") no-repeat right top;
	background-size: 1199px auto;
	overflow: hidden;
}

#main .bgSec:after {
	position: absolute;
	left: 0;
	bottom: 0;
	background: url("../img/service/main_bg02.png") no-repeat left top;
	background-size: 1055px auto;
	width: 1055px;
	height: 1853px;
	content: "";
	z-index: 10;
}

#main .bgSec .listUl li {
	margin-bottom: 33px;
	padding: 82px 0 87px;
	position: relative;
}

#main .bgSec .listUl li:after {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #2FC8DF;
	content: "";
	left: 50%;
	max-width: 830px;
	transform: translateX(-47.5%) skew(-16deg);
}

#main .bgSec .listUl .list01 .photo {
	position: absolute;
	left: 0;
	top: 25px;
	width: 47.7%;
	z-index: 10;
	mix-blend-mode: multiply;
}

#main .bgSec .listUl li .inner {
	margin: 0 auto;
	max-width: 660px;
	color: #fff;
	position: relative;
	z-index: 15;
}

#main .bgSec .listUl li .ttlBox {
	margin: 0 50px 25px 63px;
	display: flex;
	justify-content: space-between;
}

#main .bgSec .listUl li .ttlBox .ttl {
	margin-bottom: 25px;
	font-size: 4.2rem;
	line-height: 1;
	font-family: 'futura-oblique';
	letter-spacing: -1.5px;
}

#main .bgSec .listUl li .ttlBox .lBox {
	margin-top: 12px;
}

#main .bgSec .listUl li .ttlBox .lBox .btn span {
	padding: 6px 15px;
	display: inline-block;
	color: #fff;
	font-size: 2.4rem;
	border: 4px solid #fff;
}

#main .bgSec .listUl li .ttlBox .rBox {
	width: 274px;
	position: relative;
}

#main .bgSec .listUl li .ttlBox .rBox a {
	display: block;
	color: #fff;
}

#main .bgSec .listUl li .ttlBox .rBox a .btn {
	margin-top: 58px;
	padding: 14px 10px 0;
	width: 153px;
	height: 153px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	border: 2px solid #fff;
	border-radius: 50%;
}

#main .bgSec .listUl li .ttlBox .rBox a .addition {
	margin-left: -27px;
}

#main .bgSec .listUl li .ttlBox .rBox a .addition_butu {
	margin-left: -57px;
}

#main .bgSec .listUl li .ttlBox .rBox a .btn span {
	display: inline-block;
	width: 69px;
	padding-top: 15px;
	font-size: 1.6rem;
	text-align: center;
	font-family: 'futura-demi';
	background: url("../img/common/arrow02.png") no-repeat center top;
	background-size: 69px auto;
}

#main .bgSec .listUl li .ttlBox .rBox .logo {
	position: absolute;
	right: 0;
	top: 0;
	width: 186px;
}



#main .bgSec .listUl li .inner>p {
	line-height: 1.6;
}

#main .bgSec .listUl li:nth-child(2) {
	z-index: 11;
}

#main .bgSec .listUl li:nth-child(2) .ttlBox, #main .bgSec .listUl li:nth-child(2) .ttlBox .rBox a {
	color: #5DB31E;
}

#main .bgSec .listUl li:nth-child(2) .ttlBox .lBox .btn span, #main .bgSec .listUl li:nth-child(2) .ttlBox .rBox a .btn {
	color: #5DB31E;
	border-color: #5DB31E;
}

#main .bgSec .listUl li:nth-child(2) .ttlBox .rBox a .btn span {
	background-image: url("../img/common/arrow03.png");
}

#main .bgSec .listUl li:nth-child(2) .inner>p {
	color: #555;
}

#main .bgSec .listUl li:nth-child(2):after {
	opacity: 0.9;
	background-color: #F4F4F4;
}

#main .bgSec .listUl li:nth-child(3):after {
	opacity: 0.9;
	background-color: #8e7cc3;
}

#main .bgSec .listUl li:nth-child(4) {
	margin-bottom: 45px;
	padding: 115px 0 110px;
	z-index: 11;
}

#main .bgSec .listUl li:nth-child(4):after {
	opacity: 0.88;
	background-color: #5DB31E;
	z-index: 2;
}

#main .bgSec .listUl .list03 .photo {
	position: absolute;
	right: 0;
	top: -185px;
	width: 46.5%;
	z-index: 1;
}

#main .bgSec .listUl .list04 .photo {
	position: absolute;
	left: 0;
	top: -430px;
	width: 36%;
	z-index: 10;
}

#main .bgSec .listUl li:nth-child(5) {
	margin-bottom: 45px;
	padding: 60px 0 67px;
	z-index: 12;
}

#main .bgSec .listUl li:nth-child(5) .ttlBox .ttl {
	margin-bottom: 30px;
	font-size: 6rem;
}

#main .bgSec .listUl li:nth-child(5) .inner>p {
	margin: 0 20px 0 63px;
	font-size: 1.8rem;
	line-height: 1.75;
}

#main .bgSec .listUl li:nth-child(5):after {
	opacity: 0.9;
	background-color: #6AC4D1;
}

#main .bgSec .listUl li:nth-child(6) {
	padding: 90px 0 100px;
	z-index: 13;
}

#main .bgSec .listUl li:nth-child(6) .ttlBox {
	margin-bottom: 33px;
}

#main .bgSec .listUl li:nth-child(6) .lBox {
	margin-top: -5px;
}

#main .bgSec .listUl li:nth-child(6) .inner>p {
	margin: 0 35px;
}

#main .bgSec .listUl li:nth-child(6):after {
	opacity: 0.9;
	background-color: #e3ab07;
}

#main .bgSec .listUl li:nth-child(6) {
	padding: 90px 0 100px;
	z-index: 13;
}

#main .bgSec .listUl li:nth-child(7) .ttlBox {
	margin-bottom: 33px;
}

#main .bgSec .listUl li:nth-child(7) .lBox {
	margin-top: -5px;
}

#main .bgSec .listUl li:nth-child(7) .inner>p {
	margin: 0 35px;
}

#main .bgSec .listUl li:nth-child(7):after {
	opacity: 0.9;
	background-color: #ff0000;
}

#main .bgSec .listUl li.list08:after {
	opacity: 0.9;
	background-color: #32376c;
}

#main .bgSec .listUl li.list05:after {
	opacity: 0.9;
	background-color: #4A4A4A;
}

#main .bgSec .listUl li.list10:after {
	opacity: 0.9;
	background-color: #3D85C6;
}

#main .bgSec .listUl .list05 .photo {
	position: absolute;
	right: 0;
	top: 10px;
	width: 34.2%;
	z-index: 10;
}

.pageTop {
	margin-top: -120px;
	position: relative;
	z-index: 11;
}

.txtboxwa {
	padding: 6px 0px 6px 10px;
	border: solid 2px;
	font-size: 2rem !important;
	margin: 20px 0 -20px 0px !important;
	width: 639px;
}

.txtboxga {
	padding: 6px 0px 6px 10px;
	border: solid 2px;
	font-size: 2rem !important;
	margin: 20px 0 -20px 0px !important;
	width: 639px;
}

.txtboxwb {
	padding: 6px 0px 6px 10px;
	border: solid 2px;
	font-size: 1.8rem !important;
	margin: 20px 0 -20px 64px !important;
	width: 574px;
}

.rayer {
	z-index: 14;
}

.mb80 {
	margin-bottom: 80px !important;
}

@media all and (min-width: 897px) {
	#main .bgSec .listUl li .ttlBox .rBox a:hover {
		opacity: 0.7;
	}

	#main .bgSec .listUl li.list10 .ttlBox .rBox .logo {
		right: -50px;
	}
}

@media all and (max-width: 896px) {
	.mainImg {
		margin-bottom: 62px;
	}

	#main {
		margin: 0;
	}

	#main .headLine01 {
		margin-bottom: 24px;
	}

	#main .headLine01 .en {
		font-size: 6rem;
		line-height: 0.85;
	}

	#main .spTxt {
		margin-bottom: 57px;
		font-size: 1.2rem;
		line-height: 1.4;
		text-align: center;
	}

	#main .spTxt span {
		margin-bottom: 13px;
		display: block;
		color: #2FC8DF;
		font-size: 2.4rem;
	}

	#main .comBtn {
		margin-bottom: 10px;
	}

	#main .bgSec {
		padding: 30px 0 35px;
		background-position: center bottom 10px;
		background-image: url("../img/service/sp_main_bg01.jpg");
		background-size: 100% auto;
	}

	#main .bgSec:after {
		display: none;
	}

	#main .bgSec .listUl li .photo {
		max-width: 484px;
	}

	#main .bgSec .listUl .list01 .photo {
		top: 25px;
		width: 120%;
	}

	#main .bgSec .listUl .list03 .photo {
		top: -3%;
		width: 118.5%;
	}

	#main .bgSec .listUl .list04 .photo {
		top: 40%;
		width: 97.6%;
		z-index: 10;
	}

	#main .bgSec .listUl .list05 .photo {
		top: 150px;
		width: 112%;
	}

	#main .bgSec .listUl li {
		margin-bottom: 25px;
		padding: 40px 16%;
	}

	#main .bgSec .listUl .list01:before {
		position: absolute;
		top: -30px;
		right: 0;
		width: 267px;
		height: 285px;
		background-image: url("../img/service/sp_main_bg02.png");
		background-size: 267px auto;
		content: "";
		z-index: 11;
	}

	#main .bgSec .listUl li:after {
		width: 77%;
		transform: translateX(-50%);
		z-index: 11;
	}

	#main .bgSec .listUl li .ttlBox {
		margin: 0 0 30px;
	}

	#main .bgSec .listUl li .ttlBox .ttl {
		margin-bottom: 12px;
		font-size: 2.1rem;
	}

	#main .bgSec .listUl li .ttlBox .lBox {
		margin: 0 -10px 0 0;
	}

	#main .bgSec .listUl li .ttlBox .lBox .btn span {
		padding: 3px 5px;
		font-size: 1.2rem;
		border-width: 2px;
	}

	#main .bgSec .listUl li .ttlBox .rBox {
		width: 138px;
	}

	#main .bgSec .listUl li .ttlBox .rBox a .btn {
		margin-top: 29px;
		padding: 12px 6px 0;
		width: 77px;
		height: 77px;
		border-width: 1px;
	}

	#main .bgSec .listUl li .ttlBox .rBox a .addition {
		margin-left: 0;
	}

	#main .bgSec .listUl li .ttlBox .rBox a .addition_butu {
		margin-left: 0;
	}

	#main .bgSec .listUl li .ttlBox .rBox a .btn span {
		width: 32px;
		padding-top: 8px;
		font-size: 0.8rem;
		background-size: 32px auto;
	}

	#main .bgSec .listUl li .ttlBox .rBox .logo {
		width: 93px;
	}

	#main .bgSec .listUl li .inner>p {
		line-height: 1.7;
	}

	#main .bgSec .listUl li:nth-child(2) .inner>p {
		margin-left: 0;
	}

	#main .bgSec .listUl li:nth-child(2):after {
		opacity: 1;
	}

	#main .bgSec .listUl li:nth-child(3):after {
		opacity: 1;
	}

	#main .bgSec .listUl li:nth-child(4) {
		margin-bottom: 25px;
		padding: 40px 16%;
	}

	#main .bgSec .listUl li:nth-child(5) {
		margin-bottom: 30px;
		padding: 40px 16% 50px;
	}

	#main .bgSec .listUl li:nth-child(5) .ttlBox {
		margin-bottom: 45px;
	}

	#main .bgSec .listUl li:nth-child(5) .ttlBox .ttl {
		margin-bottom: 20px;
		font-size: 2.1rem;
	}

	#main .bgSec .listUl li:nth-child(5) .inner>p {
		margin: 0 10px 0 0;
		font-size: 1.4rem;
		line-height: 1.7;
	}

	#main .bgSec .listUl li:nth-child(5):after {
		opacity: 1;
	}

	#main .bgSec .listUl li:nth-child(6) {
		padding: 40px 16% 55px;
	}

	#main .bgSec .listUl li:nth-child(6) .ttlBox .lBox {
		margin-right: -15px;
	}

	#main .bgSec .listUl li:nth-child(6) .ttlBox .ttl {
		margin-bottom: 20px;
	}

	#main .bgSec .listUl li:nth-child(6) .inner>p {
		margin: 0;
	}

	#main .bgSec .listUl li:nth-child(6):after {
		opacity: 1;
	}

	#main .bgSec .listUl li:nth-child(7) {
		padding: 40px 16% 45px;
	}

	#main .bgSec .listUl li:nth-child(7) .ttlBox .lBox {
		margin-right: -15px;
	}

	#main .bgSec .listUl li:nth-child(7) .ttlBox .ttl {
		margin-bottom: 20px;
	}

	#main .bgSec .listUl li:nth-child(7) .inner>p {
		margin: 0;
	}

	#main .bgSec .listUl li:nth-child(7):after {
		opacity: 1;
	}

	#main .bgSec .listUl li:nth-child(8) {
		padding: 40px 16% 45px;
	}

	#main .bgSec .listUl li:nth-child(8) .ttlBox .lBox {
		margin-right: -15px;
	}

	#main .bgSec .listUl li:nth-child(8) .ttlBox .ttl {
		margin-bottom: 20px;
	}

	#main .bgSec .listUl li:nth-child(8) .inner>p {
		margin: 0;
	}

	#main .bgSec .listUl li:nth-child(8):after {
		opacity: 1;
	}

	#main .bgSec .listUl li.list10 {
		padding: 40px 16% 45px;
	}

	#main .bgSec .listUl li.list10 .ttlBox .lBox {
		margin-right: -15px;
	}

	#main .bgSec .listUl li.list10 .ttlBox .ttl {
		margin-bottom: 20px;
	}

	#main .bgSec .listUl li.list10 .inner>p {
		margin: 0;
	}

	#main .bgSec .listUl li.list10:after {
		opacity: 1;
	}

	#main .bgSec .listUl li.list05 {
		padding: 40px 16% 35px;
		margin-bottom: 190px;
	}

	#main .bgSec .listUl li.list05 .ttlBox .lBox {
		margin-right: -15px;
	}

	#main .bgSec .listUl li.list05 .ttlBox .ttl {
		margin-bottom: 20px;
	}

	#main .bgSec .listUl li.list05 .inner>p {
		margin: 0;
	}

	#main .bgSec .listUl li.list05:after {
		opacity: 1;
	}





	.pageTop {
		margin-top: 0;
	}

	.txtboxwa {
		width: 90%;
		padding: 10px;
		font-size: 1.4rem !important;
	}

	.txtboxga {
		width: 90%;
		padding: 10px;
		font-size: 1.4rem !important;
	}

	.txtboxwb {
		width: 90%;
		padding: 10px;
		font-size: 1.4rem !important;
		margin: 20px auto -30px !important;
	}
}