@charset "utf-8";
/* CSS Document */

/*サービスの概要 *****************************************************************/
#service .summary .cont-wrap {
	justify-content: space-between; align-items: center; max-width: 880px; }
#service .summary .image-area { width: 88px; }
#service .summary .text-area { width: calc(94% - 88px); }

@media (max-width: 768px) {
	#service .summary .cont-wrap { flex-direction: column; max-width: 520px; padding-top: 40px; }
	#service .summary .image-area { margin-bottom: 40px; }
	#service .summary .text-area { width: 100%; }
}





/*サービスの詳細 *****************************************************************/
.service-detail .cont-wrap { max-width: 1040px; padding-top: 0; margin-bottom: 136px; }
.service-detail .service-item { margin-top: 88px; position: relative; }

.service-detail .item-wrapper {
	flex-direction: column; justify-content: center; width: 72%; min-height: 296px; padding: 48px 176px 40px 64px; border-radius: var(--border-radius-s); background: var(--color-be); }
.service-detail .item-wrapper::before {
	content: ""; display: block; width: 104px; height: 104px; background: #aaa; position: absolute; top: -8px; left: -8px; z-index: -1; }

.service-detail .number {
	width: 104px; height: 104px; padding: 5px 16px; background: var(--color-font-reg); color: #fff; font-style: italic; font-weight: 500; font-size: var(--font-size-07); letter-spacing: .1em; position: absolute; left: -8px; top: -8px; clip-path: polygon(0 0, 0 100%, 100% 0); z-index: 5; }
.service-detail .deco {
	color: var(--color-be); font-size: 7rem; font-style: italic; line-height: 1; letter-spacing: .1em; position: absolute; bottom: -8px; right: -4%; z-index: -1; }

.service-detail .main-area h2 { margin-bottom: 24px; }
.service-detail .main-area h2 span {
	display: block; margin-bottom: 12px; font-size: var(--font-size-reg); }
.service-detail .image-area {
	gap: 0 2.4%; width: calc(28% + 112px); position: absolute; top: -16px; right: 0; }
.service-detail .image-box {
	width: 48.8%; aspect-ratio: 2 / 3; background: #999; position: relative; }
.service-detail .image-box .bg-img { z-index: 5; }
.service-detail #service01 .image01 .bg-img {
	background-image: url("images/service-1-1.webp"); }
.service-detail #service01 .image02 .bg-img {
	background-image: url("images/service-1-2.webp"); background-position: left top; }

.service-detail #service02 .image01 .bg-img {
	background-image: url("images/service-2-1.webp"); }
.service-detail #service02 .image02 .bg-img {
	background-image: url("images/service-2-2.webp"); background-position:  75% top; }

.service-detail #service03 .image01 .bg-img {
	background-image: url("images/service-3-1.webp"); }
.service-detail #service03 .image02 .bg-img {
	background-image: url("images/service-3-2.webp"); }

@media (max-width: 834px) {
	.service-detail .item-wrapper { padding-top: 48px; padding-bottom: 40px; }
	.service-detail .image-area { top: 50%; translate: 0 -50%; }
}
@media (max-width: 767px) {
	.service-detail .item-wrapper { padding-right: 144px; padding-left: 48px; }

}
@media (max-width: 600px) {
	.service-detail .cont-wrap { width: 93%; margin-right: 0; padding-top: 80px; }
	.service-detail .item-wrapper {
		align-items: center; width: 100%; padding-right: 14%; padding-left: 8%; }
	.service-detail .main-area { max-width: 400px; margin-bottom: 32px; }
	.service-detail .main-area h2 { text-align: right; }
	.service-detail .image-area { width: 100%; max-width: 400px; position: relative; translate: none; }
	.service-detail .deco { display: none; }
}
@media (max-width: 520px) {
	
}