@charset "utf-8";
/*------------------------------------------------------------
	service_detail
------------------------------------------------------------*/
#container {
		overflow: hidden;
}
#main {
		padding-bottom: 94px;
}
#main .top-sec {
		margin-bottom: 194px;
		position: relative;
}
#main .top-sec .head-line07 {
		position: absolute;
		top: 77px;
		right: calc(50% + 88px);
		z-index: 3;
}
/* 20220520 ito */
@media all and (min-width: 897px) and (max-width: 1280px) {
		#main .top-sec .head-line07 {
				right: auto;
				left: 0;
		}
}
/* //20220520 ito */
#main .top-sec .top-box {
		margin: -32px 0 183px;
		position: relative;
}
#main .top-sec .top-box:before {
		position: absolute;
		right: 0;
		bottom: -133px;
		left: calc(50% - 105px);
		top: 0;
		content: "";
		background: #F8FAFC;
		z-index: -1;
		opacity: 0;
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
		transition: opacity 0.4s linear, transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
#main .top-sec .top-box.on:before {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
}
#main .top-sec .top-box .photo-box {
		float: right;
		height: 450px;
		width: calc(50% + 336px);
		border-radius: 20px 0 0 20px;
		background: url("../img/service/detail_photo01.png") center center;
		background-size: cover;
}
#main .top-sec .top-box .text-box {
		float: left;
		position: absolute;
		left: 0;
		bottom: -74px;
		box-sizing: border-box;
		width: calc(50% - 336px);
}
#main .top-sec .top-box .info-box {
		width: 460px;
		padding: 55px 50px 10px;
		background: #fff;
		margin: 0 -368px 0 auto;
}
#main .top-sec .content {
		width: 820px;
}
#main .top-sec .content p {
		margin-bottom: 90px;
		line-height: 2.1;
}
#main .top-sec .content .top-txt {
		margin: 0 0 90px;
}
#main .top-sec .info-sec {
		margin: 0 23px;
}
#main .top-sec h5 {
		margin-bottom: 21px;
		padding-left: 17px;
		border-left: 1px solid #333;
}
#main .top-sec h5 .num {
		margin-bottom: -1px;
		display: block;
		font-size: 1rem;
}
#main .top-sec h5 .jp {
		display: block;
		font-size: 1.8rem;
}
#main .top-sec .info-sec p {
		margin: 0 18px 72px;
		line-height: 1.7;
}
#main .top-sec h6 {
		margin: 0 18px 30px;
		font-size: 1.6rem;
}
#main .top-sec .txt-list {
		margin: 0 0 93px 20px;
		display: flex;
		justify-content: flex-start;
}
#main .top-sec .txt-list > li {
		width: 33%;
}
#main .top-sec .txt-list > li:nth-child(2n) {
		width: 40%;
}
#main .top-sec .txt-list > li:nth-child(3n) {
		width: 27%;
}
#main .top-sec .txt-list > li > p {
		margin: 0;
		font-size: 1.4rem;
		font-weight: 500;
}
#main .top-sec .txt-list > li ul {
		padding-left: 10px;
		line-height: 1.7;
}
#main .top-sec .content p .info-span {
		display: block;
		margin-top: 30px;
}
#main .top-sec .content p a {
		color: #F69602;
		text-decoration: underline;
}
#main .top-sec .content p a:hover {
		opacity: 0.7;
}
#main .bg-box {
		position: relative;
}
#main .bg-box:before {
		position: absolute;
		right: 51.5%;
		left: 0;
		top: 354px;
		height: 497px;
		content: "";
		background: #FAFAFA;
		z-index: -2;
}
#main .bg-box:after {
		position: absolute;
		right: 40.7%;
		top: 660px;
		width: 309px;
		height: 274px;
		content: "";
		background: #F8FAFC;
		mix-blend-mode: multiply;
		z-index: -1;
}
#main .actual {
		margin-bottom: 125px;
		padding: 66px 0 122px;
		position: relative;
		background: #F8FAFC;
}
#main .actual .head-line07 {
		position: absolute;
		top: -130px;
		right: calc(50% - 640px);
}
/* 20220520 ito */
@media all and (min-width: 897px) and (max-width: 1280px) {
		#main .actual .head-line07 {
				left: auto;
				right: 0;
				font-size: 13rem;
		}
}
/* //20220520 ito */
#main .actual .head-line09 .info:before {
		bottom: 6px;
}
#main .actual .list-ul {
		margin: -25px -30px 0;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
}
#main .actual .list-ul > li {
		margin: 15px 15px 0 0;
		width: calc(33.3% - 10px);
		padding: 15px 15px 30px;
		background: #fff;
		box-sizing: border-box;
		border-radius: 20px;
}
#main .actual .list-ul > li:nth-child(3n) {
		margin-right: 0;
}
/* 20220520 ito */
@media all and (min-width: 897px) and (max-width: 1280px) {
		#main .actual .list-ul > li {
				margin: 25px 27px 0 0;
				width: 31%;
		}
}
/* //20220520 ito */
#main .actual .list-ul > li:nth-child(3n) {
		margin-right: 0;
}
#main .actual .list-ul li .top {
		margin-bottom: 13px;
		font-weight: 500;
		font-size: 1.4rem;
}
#main .actual .list-ul li .info-list {
		margin: 0 -20px 14px 0;
		display: flex;
}
#main .actual .list-ul li .info-list li {
		display: flex;
		align-items: flex-start;
}
#main .actual .list-ul li .info-list li:nth-child(1) {
		margin-right: 10px;
		max-width: 130px;
}
#main .actual .list-ul li .info-list li:nth-child(2) {
		flex: 1;
		margin: 0;
}
#main .actual .list-ul li .category {
		display: inline-block;
		vertical-align: middle;
		margin-right: 2px;
		color: #fff;
		min-width: 50px;
		font-size: 11px;
		font-weight: 500;
		padding: 2px;
		text-align: center;
		background: #29ABE2;
		box-sizing: border-box;
		border-radius: 4px;
		white-space: nowrap
}
#main .actual .list-ul li .txt-span {
		font-size: 12px;
		font-weight: 500;
		display: inline-block;
		vertical-align: middle;
}
#main .actual .list-ul li .txt-span:first-child {
		width: 50px;
		white-space: nowrap;
}
#main .actual .list-ul li .info-list li:nth-child(2) .txt-span:last-child {}
#main .actual .list-ul li .datail-txt {
		line-height: 1.7;
		font-size: 13px;
		flex: 1;
}
@media all and (min-width: 897px) {
		#main .com-link-list li .com-more {
				padding-right: 13px;
		}
		#main .com-link-list li .com-more .circle {
				right: -42px;
		}
		#main .com-link-list li:last-child .com-more {
				padding-right: 3px;
		}
		#main .com-link-list li:last-child .com-more .circle {
				right: -62px;
		}
		#main .com-link-list li:first-child .txt-span {
				padding-left: 5px;
				text-align: left;
		}
		#main .com-link-list li .com-more .circle::after {
				margin-top: 1px;
				right: 51px;
				border-bottom-color: transparent;
		}
		#main .com-link-list li:last-child .com-more .circle::after {
				right: 62px;
		}
		#main .service-sec .r-box .photo-list li .pho img {
				-webkit-transition: all 0.3s ease-in-out;
				transition: all 0.3s ease-in-out;
		}
		#main .service-sec .r-box .photo-list li a:hover img {
				-webkit-transform: scale(1.2);
				transform: scale(1.2);
		}
}
@media all and (max-width: 896px) {
		#main {
				padding-bottom: 94px;
		}
		#main .top-sec {
				margin-bottom: 100px;
				position: relative;
		}
		#main .top-sec .head-line07 {
				position: absolute;
				top: -27px;
				right: auto;
				z-index: 3;
		}
		#main .top-sec .top-box {
				padding-top: 30px;
				margin: 0 20px;
		}
		#main .top-sec .top-box .photo-box img {
				width: 100%;
		}
		#main .top-sec .top-box:before {
				display: none;
		}
		#main .top-sec .top-box .photo-box {
				float: none;
				height: auto;
				width: auto;
				border-radius: 10px;
				background: none;
				z-index: 4;
				position: relative;
				margin-bottom: 38px;
		}
		#main .top-sec .top-box .text-box {
				float: none;
				left: 0;
				bottom: -30px;
				box-sizing: border-box;
				width: 77.5%;
				z-index: 6;
		}
		#main .top-sec .top-box .info-box {
				width: auto;
				padding: 20px 5px 10px 0;
				margin: 0;
		}
		#main .top-sec .content {
				width: auto;
		}
		#main .top-sec .content p {
				margin-bottom: 60px;
		}
		#main .top-sec .content .top-txt {
				margin: 0 0 90px;
		}
		#main .top-sec .info-sec {
				margin: 0;
		}
		#main .top-sec h5 {
				margin: 0 -10px 21px 0;
				padding-left: 17px;
				border-left: 1px solid #333;
		}
		#main .top-sec .info-sec p {
				margin: 0 18px 32px;
				line-height: 1.7;
		}
		#main .top-sec h6 {
				margin: 0 18px 24px;
		}
		#main .top-sec .txt-list {
				margin: 0 0 170px 20px;
				display: block;
		}
		#main .top-sec .txt-list > li {
				width: 100%;
				margin-bottom: 27px;
		}
		#main .top-sec .txt-list > li:nth-child(2n) {
				width: 100%;
		}
		#main .top-sec .txt-list > li:nth-child(3n) {
				width: 100%;
		}
		#main .top-sec .txt-list > li:last-child {
				margin-bottom: 0;
		}
		#main .top-sec .txt-list > li > p {
				margin: 0;
				font-size: 1.4rem;
				font-weight: 500;
		}
		#main .top-sec .txt-list > li ul {
				padding-left: 10px;
				line-height: 1.7;
		}
		#main .top-sec .content p .info-span {
				margin-top: 20px;
		}
		#main .com-link {
				padding-top: 40px;
		}
		#main .bg-box:before {
				right: auto;
				left: 0;
				top: 1110px;
				width: 65%;
				height: 305px;
				border-radius: 0 10px 10px 0;
		}
		#main .bg-box:after {
				position: absolute;
				right: 0;
				top: 1320px;
				width: 69%;
				height: 274px;
		}
		#main .actual {
				margin-top: 270px;
				margin-bottom: 40px;
				padding: 66px 0 62px;
		}
		#main .actual .head-line07 {
				position: absolute;
				top: -195px;
				right: -107px;
		}
		#main .actual .head-line09 {
				margin-top: -160px;
				margin-bottom: 70px;
		}
		#main .actual .head-line09 .info:before {
				bottom: 3px;
		}
		#main .actual .list-ul {
				margin: 0 8px 0;
				display: block;
		}
		#main .actual .list-ul > li {
				margin: 0 0 27px;
				width: 100%;
				padding: 25px 20px 34px;
				background: #fff;
				box-sizing: border-box;
				border-radius: 20px;
		}
		#main .actual .list-ul > li:last-child {
				margin-bottom: 0;
		}
}
@media all and (max-width: 374px) {
		#main .top-sec .top-box .info-box .head-line08 .jp {
				font-size: 1.6rem;
		}
}
.service_bnr {
		max-width: 560px;
		margin: 0 0 60px;
}
.service_bnr img {
		width: 100%;
		height: auto;
}
.mgnb20 {
		margin-bottom: 20px !important;
}