#service.renewal {

	& .-in {
		width: min(90%, 1100px);
		margin: 0 auto;
	}

	& .-in-fit {
		width: fit-content;
		max-width: 90%;
		margin: 0 auto;
	}

	& section {
		padding: 80px 0;

		@media (max-width: 834px) {
			padding: 60px 0;
		}
		@media (max-width: 480px) {
			padding: 40px 0;
		}
	}

	& h3 {
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-bold);
	}

	& h3.common {
		line-height: 1.5;
		text-align: center;
		padding-bottom: 18px;
		position: relative;

		&::after {
			content: '';
			width: 30px;
			height: 2px;
			background-color: #000;
			position: absolute;
			left: 50%;
			bottom: 0;
	    transform: translateX(-50%);
		}
	}

	& #byType-nav {
		background-color: var(--theme-green);
		color: #fff;
		padding: 40px 0;

	& .speech-bubble {
	  background-color: #fff;
	  padding: 8px 30px;
	  border-radius: 2em;
	  color: var(--theme-green);
		font-weight: var(--font-weight-bold);
		text-align: center;
	  line-height: 1.4;
	  position: relative;

			&::after {
				content: '';
				width: 20px;
				height: 10px;
				background-color: #fff;
				position: absolute;
				bottom: -9px;
				left: 50%;
		    transform: translateX(-50%);
				clip-path: polygon(0 0, 100% 0, 50% 100%);
			}
		}

		& .-in {
			max-width: 990px;
			margin: 40px auto 0;
			display: flex;
			justify-content: center;

			@media (max-width: 768px) {
				margin: 20px auto 0;
	      flex-direction: column;
	      gap: 10px;
  		}

			> div {
				width: 33.3%;
				text-align: center;
				border-right: 1px solid #71816C;

				@media (max-width: 768px) {
					width: 100%;
		      border-right: none;
	  		}

				&:first-child {
					border-left: 1px solid #71816C;
					@media (max-width: 1024px) {
			      border-left: none;
		  		}
				}
				&:last-child {
					@media (max-width: 1024px) {
			      border-right: none;
		  		}
				}

				& a {
					display: block;
					max-width: 80%;
					margin: 0 auto;
					color: #fff;
					text-decoration: none;

				  @media (max-width: 768px) {
				  	max-width: 100%;
				  	padding-bottom: 5px;
				  	border-bottom: 1px solid #71816C;
				  }

					&::after {
						content: '';
						display: block;
						margin: 1em auto 0;
						width: 10px;
						height: 6px;
				    background-image: url('../images/service_renewal_needs_arrow.svg');
				    background-position: center;
				    background-size: contain;

					  @media (max-width: 768px) {
					  	content: none;
					  }
					}

					&:hover {
						opacity: .8;
					}

					& br {
					  @media (max-width: 768px) {
					  	display: none;
					  }
					  @media (max-width: 480px) {
					  	display: block;
					  }
					}
				}
			}
		}
	}/* byType-nav */


	& #byType {

		& .type-in-header {
			display: flex;
			justify-content: space-between;
			padding: 40px 0 0;

		  @media (max-width: 834px) {
				flex-direction: column;
				gap: 30px;
				padding: 30px 0 0;
		  }
		  @media (max-width: 480px) {
				padding: 20px 0 0;
		  }

			& .txt {
				width: 42%;

			  @media (max-width: 834px) {
					width: 100%;
			  }

				& header {
					font-weight: var(--font-weight-bold);
					position: relative;
					padding-bottom: 25px;
					margin-bottom: 20px;
					line-height: 1.4;

					&::after {
						content: '';
						width: 30px;
						height: 2px;
						background-color: #7D7D7D;
						position: absolute;
						left: 0;
						bottom: 0;
					}

					& .en {
						font-size: var(--font-size-xl);
						font-weight: var(--font-weight-bold);
						color: #7D7D7D;
						margin-bottom: 10px;
					}

					& h2 {
						font-size: 32px;
						font-weight: var(--font-weight-bold);
					}

					& ul.tag {
						margin-top: 20px;

						& li {
							display: inline-block;
							color: var(--theme-green);
							margin-right: 12px;

							&::before {
								content: '#';
							}
						}
					}
				}
			}

			& .img {
				width: 50%;

			  @media (max-width: 834px) {
					width: min(100%, 480px);
					margin: 0 auto;
					text-align: center;
			  }

				& img {
					border-radius: 10px;
				}
			}
		}/* type-in-header */

		& .type-in-issues {
			margin-top: 80px;

		  @media (max-width: 1024px) {
				margin-top: 60px;
		  }

			& .issues {
				margin: 30px auto 0;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 15px 1%;

				& > div {
					width: 24.25%;
					padding: 25px 0 15px;
					border-radius: 10px;
					border: 1px solid var(--theme-green);

				  @media (max-width: 1024px) {
				  	padding: 15px 0 10px;
						width: 49.5%;
				  }

				  @media (max-width: 480px) {
						width: 100%;
				  }

					& h4 {
						font-size: var(--font-size-xl);
						font-weight: var(--font-weight-black);
						text-align: center;
						position: relative;
						color: var(--theme-green);
					}

					& ul.-in-fit {
						max-width: 86%;
						margin: 10px auto 0;

						& li {
							list-style: none;
							padding-left: 1.2em;
							line-height: 1.3;
							margin: 10px 0;

							&::before {
								content: '・';
								font-weight: 900;
								margin-left: -1.2em;
								margin-right: .2em;
							}
						}
					}
				}
			}
		}/* type-in-issues */


		& .type-in-proposals {
			margin-top: 30px;
			padding-top: 48px;
			position: relative;

			&::before {
				position: absolute;
				content: '';
			  height: 18px;
			  width: 48px;
			  top: 0;
			  left: 50%;
			  transform: translateX(-50%);
			  background-color: var(--theme-green);
			  clip-path: polygon(0 0, 100% 0, 50% 100%);
			}

			& h3 {
				color: var(--theme-green);
				font-weight: var(--font-weight-black);
				padding: 0 0 0 36px;
				position: relative;

				&::before {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translatey(-50%);
					content: '';
					display: inline-block;
					width: 24px;
					height: 24px;
			    background-image: url('../images/service_renewal_bytype_proposals.svg');
			    background-position: center;
			    background-size: contain;
				}
			}

			& ul {
				margin: 30px auto 0;

				& li {
					font-size: var(--font-size-xl);
					font-weight: var(--font-weight-medium);
					list-style: none;
					position: relative;
					padding-left: 50px;
					line-height: 1.4;
					margin: 15px 0;

					&::before {
						position: absolute;
						top: 0;
						left: 0;
						content: '';
						display: inline-block;
						width: 30px;
						height: 30px;
				    background-image: url('../images/service_renewal_bytype_point.svg');
				    background-position: center;
				    background-size: contain;
					}
				}
			}

			& .txt {
				max-width: 860px;
				margin: 60px auto 0;
			}
		}/* type-in-proposals */

		.case {
			background-color: #F5F2EA;

			& .data-area {
				width: 42%;

			  @media (max-width: 1024px) {
					width: 100%;
			  }

			  & .data {
			  	margin-top: 20px;
			  	display: flex;
			  	flex-direction: column;
			  	gap: 20px;

				  @media (max-width: 1024px) {
						flex-direction: row;
						gap: 40px;
				  }

				  @media (max-width: 834px) {
			  		flex-direction: column;
						gap: 20px;
				  }

					& .theme {
						width: fit-content;
						white-space: nowrap;
						background-color: #fff;
						border-radius: 5px;
						padding: 10px 30px;
						font-size: var(--font-size-l);
						font-weight: var(--font-weight-bold);

						& .title {
							font-size: var(--font-size-xs);
							font-weight: var(--font-weight-medium);
							padding-bottom: 5px;
							margin-bottom: 10px;
							border-bottom: 1px solid #ddd;
						}
					}
			  }
			}

			& .pers-area {
				width: 58%;

			  @media (max-width: 1024px) {
					width: 100%;
			  }

				& > div {
				  width: fit-content;
				  margin: auto;
				}
			}

			& .before {
				max-width: 1200px;
				background-color: #EFEBE4;
				border-radius: 20px 20px 0 0;
				background-image: url(../images/service_renewal_before.svg);
				background-repeat: no-repeat;
				background-position: top 40px right 7%;
				background-size: 200px 38px;
				padding: 60px 0;

			  @media (max-width: 1024px) {
			  	padding: 40px 0 100px;
					background-position: bottom 40px left 7%;
			  }
			  @media (max-width: 834px) {
			  	padding: 30px 0 80px;
			  	background-size: 138px 26px;
			  	background-position: bottom 30px left 10%;
			  }

				& .before-in {
					width: 86%;
					margin: 0 auto;
					display: flex;
					gap: 20px;

				  @media (max-width: 1024px) {
				  	flex-direction: column;
				  }

					& h3 {
						font-weight: var(--font-weight-black);
						color: #6f5934;
					}
				}
			}

			& .after {
				max-width: 1200px;
				background-color: #fff;
				border-radius: 0 0 20px 20px;
				padding: 60px 0 80px;
				background-image: url(../images/service_renewal_after.svg);
				background-repeat: no-repeat;
				background-position: top 60px left 7%;
				background-size: 180px 40px;
				padding: 140px 0 80px;
				position: relative;

			  @media (max-width: 1024px) {
			  	padding: 100px 0 40px;
					background-position: top 40px left 7%;
					background-size: 172px 38px;
			  }
			  @media (max-width: 834px) {
			  	background-size: 118px 26px;
			  	background-position: top 30px left 10%;
			  	padding: 80px 0 30px;
			  }

				& .after-in {
					width: 86%;
					margin: 0 auto;
					display: flex;
					gap: 20px;

				  @media (max-width: 1024px) {
				  	flex-direction: column-reverse;
				  }

					& .pers-area > div {
						display: none;

					  @media (max-width: 1024px) {
					  	display: block;
					  }
					}

					& .outline {
						margin-top: 30px;

						& .title {
							font-weight: var(--font-weight-bold);
						}

						& table {
							margin-top: 10px;
					    font-size: var(--font-size-s);

							& th {
								border: none;
						    background-color: transparent;
						    font-weight: normal;
						    white-space: nowrap;
							}
							& td {
								border: none;
							  border-left: 1px solid #707070;
							}
							& tr:not(:last-child) th,
							& tr:not(:last-child) td {
							    border-bottom: 1px solid #707070;
							}
						}
					}
				}
			}
		}/* case */

		& .case1 .after-out {
			position: relative;

		  @media (max-width: 1024px) {
		  	display: none;
		  }

			& .pers {
				z-index: 1;
				width:  calc( 50% + 80px);
				position: absolute;
				top: 120px;
				right: 0;
				height: 400px;
				background-image:url(../images/service_renewal_case1_after.webp);
				background-repeat: no-repeat;
				background-position: left top;
				background-size: contain;
			}
		}

		& .case2 .before {
			padding: 60px 0 0;

		  @media (max-width: 1024px) {
		  	padding: 40px 0 20px;
		  }

			& .pers-area > div {
				margin-top: -30px;

			  @media (max-width: 834px) {
			  	margin-top: 0;
			  }
			}
		}
		& .case2 .after-out {
			position: relative;

		  @media (max-width: 1024px) {
		  	display: none;
		  }

			& .pers {
				z-index: 1;
				width:  calc( 50% + 30px);
				position: absolute;
				top: 60px;
				right: 0;
				height: 600px;
				background-image:url(../images/service_renewal_case2_after.webp);
				background-repeat: no-repeat;
				background-position: left top;
				background-size: contain;
			}
		}

		.cta {
			padding: 0 0 80px;

			@media (max-width: 834px) {
				padding: 0 0 60px;
			}
			@media (max-width: 480px) {
				padding: 0 0 40px;
			}

			.cta-in {
			  width: min(90%, 696px);
			  margin: 0 auto;
			  display: flex;
			  justify-content: center;
			  gap: 4.4%;

			  @media (max-width: 834px) {
			      flex-direction: column;
			      gap: 20px;
			  }

			  > div {
			    width: min(47.8%, 333px);
			    margin: auto;

			    @media (max-width: 834px) {
			      width: min(100%, 333px);
			    }

			      & a {
			        width: 100%;
			        display: block;
			        border-radius: 50px;
			        text-decoration: none;
			        padding: 28px;
			        font-weight: 700;
			        line-height: 1.4;

			        .contact & {
			          background-color: #e1d8c1;
			          color: #000;

			          & div:before {
			            width: 24px;
			            height: 16px;
			            background-image: url(/images/gnav_contact.svg);
			          }

			          & div:after {
			            background-image: url(/images/comp_jump.svg);
			          }
			        }

			        .estimate & {
			          background-color: #3a4d32;
			          color: #fff;

			          & div:before {
			            width: 18px;
			            height: 24px;
			            background-image: url(/images/gnav_estimate.svg);
			          }

			          & div:after {
			            background-image: url(/images/comp_jump_white.svg);
			          }
			        }

			        .link & {
			          background-color: #fff;
			          color: #000;

			          & div:after {
			            background-image: url(/images/comp_jump.svg);
			          }
			        }

			      &:hover {
			        opacity: .9;
			      }

			      > div {
			        display: flex;
			        justify-content: center;
			        align-items: center;
			        width: fit-content;
			        margin: auto;

			        &:before {
			          margin-right: 10px;
			          content: '';
			          background-size: contain;
			          background-position: center;
			          background-repeat: no-repeat;
			        }

			        &:after {
			          margin-left: 10px;
			          content: '';
			          width: 12px;
			          height: 6px;
			          background-size: contain;
			          background-position: center;
			          background-repeat: no-repeat;
			        }
			      }
			    }
			  }
			}
		}
	}/* #byType */

	& #contractor {
		background-image: url(../images/service_renewal_contractor_bg.webp);
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		color: #fff;

		& .contractor-in {
			padding: 40px 0 0;

		  @media (max-width: 834px) {
				padding: 30px 0 0;
		  }
		  @media (max-width: 480px) {
				padding: 20px 0 0;
		  }

			& h2 {
				text-align: center;
				font-size: 28px;
				line-height: 1.5;

				.en {
					font-size: 20px;
					margin-bottom: 10px;
				}
			}

			& .lead {
				width: min(90%, 900px);
				margin: 40px auto 0;
				text-align: left;
			}

			& .check-point {
				background-color: #fff;
				padding: 40px 0;
				border-radius: 10px;
				color: #000;
				margin-top: 80px;

				& h3 {
					font-weight: var(--font-weight-black);
					color: var(--theme-green);
					padding-left: 36px;
					position: relative;

					&::before {
						position: absolute;
						top: 6px;
						left: 0;
						content: '';
						display: inline-block;
						width: 24px;
						height: 24px;
				    background-image: url('../images/service_renewal_bytype_contractor.svg');
				    background-position: center;
				    background-size: contain;
					}
				}

				& ul {
					width: 80%;
					margin: 30px auto 0;

					& li {
						font-size: var(--font-size-l);
						list-style: none;
						position: relative;
						padding-left: 50px;
						line-height: 1.4;
						margin: 15px 0;

						&::before {
							position: absolute;
							top: 0;
							left: 0;
							content: '';
							display: inline-block;
							width: 30px;
							height: 30px;
					    background-image: url('../images/service_renewal_bytype_point.svg');
					    background-position: center;
					    background-size: contain;
						}
					}
				}
			}
		}

		& .features {
			padding: 120px 0 60px;

			@media (max-width: 834px) {
				padding: 80px 0 40px;
			}
			@media (max-width: 480px) {
				padding: 60px 0 30px;
			}

			& h3 {
				&::after {
					background-color: #fff;
				}
			}

			& .features-in {
				margin-top: calc(60px + 30px);
				padding-left: 30px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 70px 5%;

		    @media (max-width: 834px) {
		    	margin-top: calc(40px + 25px);
		    	padding-left: 25px;
		      gap: 40px 8%;
		    }
		    @media (max-width: 480px) {
		    	margin-top: calc(30px + 20px);
		    	padding-left: 20px;
		      gap: 30px 0;
		    }

				& .num {
					width: 30%;
					padding: 40px 0;
					background-color: #fff;
					border-radius: 20px;
					color: #000;
					position: relative;

			    @media (max-width: 834px) {
			      width: 46%;
			      padding: 30px 0;
			    }
			    @media (max-width: 480px) {
			      width: 100%;
			      padding: 20px 0;
			    }

					&::before {
						content: '';
						width: 77px;
						height: 77px;
						position: absolute;
						top: -30px;
						left: -30px;
						background-image: url(../images/service_renewal_feature_01.svg);
						background-size: cover;
					
				    @media (max-width: 834px) {
							width: 66px;
							height: 66px;
							top: -25px;
							left: -25px;
				    }
				    @media (max-width: 480px) {
							top: -20px;
							left: -10px;
				    }

					}

					& .-in {
						width: 80%;
						margin: 0 auto;
						line-height: 1.6;

						& h4 {
							text-align: center;
							font-size: var(--font-size-xl);
							font-weight: var(--font-weight-bold);
							color: var(--theme-green);
							margin-bottom: 20px;
						}
					}
				}

				& .num.num-2::before {
					background-image: url(../images/service_renewal_feature_02.svg);
				}
				& .num.num-3::before {
					background-image: url(../images/service_renewal_feature_03.svg);
				}
				& .num.num-4::before {
					background-image: url(../images/service_renewal_feature_04.svg);
				}
				& .num.num-5::before {
					background-image: url(../images/service_renewal_feature_05.svg);
				}
				& .num.num-6::before {
					background-image: url(../images/service_renewal_feature_06.svg);
				}
			}
		}
	}/* #contractor */

	& #gallery {
		width: min(90%, 1320px);

		& .slick-prev,
		& .slick-next {
			z-index: 3!important;
			width: 40px;
			height: 40px;
			background-color: #fff;
			border-radius: 50%;

			&::before {
				font-family: "Font Awesome 5 Free";
				font-weight: 900;
				color: #000;
				font-size: 12px;
			}
		}

		& .slick-prev {
			left: -15px;

			&::before {
				content: '\f053';
			}
		}

		& .slick-next {
			right: -15px;

			&::before {
				content: '\f054';
			}
		}

		& .slick-dots {
    		bottom: -40px;
		}

		& .tmp-gallery-archive {
			margin-top: 60px;
			flex-wrap: nowrap;
			flex-direction: row;

	    @media (max-width: 834px) {
				margin-top: 40px;
	    }
	    @media (max-width: 480px) {
				margin-top: 30px;
	    }

			& .interview_tag {
				display: none;
			}

			& a {
				margin: 0;
				padding: 0 10px;
			}
		}
	}/* #gallery */

	& #list-of-service {
		background-color: #71816C;

		& h3 {
			color: #fff;

			&::after {
				background-color: #fff;
			}
		}

		& .list-of-service-in {
			max-width: 1068px;
			margin-top: 60px;
			display: flex;
			flex-wrap: wrap;
			gap: 20px;

	    @media (max-width: 834px) {
	    	margin-top: 40px;
	    }
	    @media (max-width: 480px) {
	    	margin-top: 30px;
	    }

			& > div {
				width: calc((100% - 20px * 3) / 4 );
				background-color: #fff;
				border-radius: 10px;
				font-size: var(--font-size-s);
				line-height: 1.6;
				padding: 40px 0;

		    @media (max-width: 834px) {
		    	width: calc((100% - 20px * 2) / 3 );
		    }
		    @media (max-width: 600px) {
		    	width: calc((100% - 20px * 1) / 2 );
		    }

				& h4 {
					font-size: var(--font-size-l);
					font-weight: var(--font-weight-bold);
					color: var(--theme-green);
					text-align: center;
					line-height: 1.4;
					padding: 20px 0;
				}

				& .-in {
					width: 80%;
				}
			}
		}

	}/* #list-of-service */


	& #flow {

		& .lead {
			margin-top: 30px;

	    @media (max-width: 768px) {
	    	& br {
	    		display: none;
	    	}
	    }
	  }

	  & .flow-in {
	  	overflow-x: auto;
	  	margin-top: 40px;

	    @media (max-width: 480px) {
	    	margin-top: 30px;
	    }

	  	& .overflow {
	  		width: 100%;

		    @media (max-width: 768px) {
			  	width: 150%;
		    }
		    @media (max-width: 600px) {
			  	width: 200%;
		    }
		    @media (max-width: 480px) {
			  	width: 250%;
		    }
	  	}
	  }
	}/* #flow */


	& #faq {
		background-color: #F4F4F4;

		& .faq-in {
			margin-top: 60px;

	    @media (max-width: 834px) {
	    	margin-top: 40px;
	    }
	    @media (max-width: 480px) {
	    	margin-top: 30px;
	    }
		}
	}

}/* #service.renewal */