@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-main: #4e629e;



//main-img------------------------------
#main-img {
	position: relative;
	background-image: url("../img/top-main.jpg");
	background-position: center;
	background-size: cover;
	height: 700px;
	@include lg {
		height: 650px;
	}
	@include md {
		height: 600px;
	}
	@include sm {
		height: 500px;
	}
	@include xs {
		height: 450px;
	}
	.container {
		img {
			position: absolute;
			width: 250px;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			@include sm {
				top: 26%;
				width: 225px;
			}
		}
		div {
			position: absolute;
			color: #fff;
			text-align: center;
			bottom: 10%;
			left: 50%;
			transform: translateX(-50%);
			-webkit-transform: translateX(-50%);
			@include sm {
				display: block;
				width: 100%;
			}
			p {
				font-size: 30px;
				font-size: 3rem;
				font-weight: bold;
				line-height: 1.7;
				@include sm {
					font-size: 27px;
					font-size: 2.7rem;
				}
				@include xs {
					font-size: 24px;
					font-size: 2.4rem;
				}
			}
			h3 {
				font-size: 18px;
				font-size: 1.8rem;
				font-weight: bold;
				letter-spacing: 0.3em;
				span {
					font-size: 75%;
				}
			}
		}

	}
}

//explanation------------------------------
#explanation {
	padding: 3rem;
	text-align: center;
	@include xs {
		text-align: justify;
	}
	h4 {
		font-size: 26px;
		font-size: 2.6rem;
		font-weight: bold;
		margin-bottom: 3rem;
		line-height: 1.7;
		@include sm {
			font-size: 25px;
			font-size: 2.5rem;
		}
		@include xs {
			font-size: 24px;
			font-size: 2.4rem;
		}
		span {
			color: $color-main;
		}
	}
	p {
	}
}
//repair------------------------------
#repair {
	padding: 4rem;
	text-align: center;
	background-color: #dfe9f6;
	@include xs {
	text-align: justify;
	}
		h4 {
		font-size: 26px;
		font-size: 2.6rem;
		font-weight: bold;
		margin-bottom: 1rem;
		line-height: 1.7;
		@include sm {
			font-size: 25px;
			font-size: 2.5rem;
		}
		@include xs {
			font-size: 24px;
			font-size: 2.4rem;
		}
		span {
			color: $color-main;
		}
	}
	p {
		padding-bottom: 3rem;
		@include md {
			padding-bottom: 0;
		}
		@include xs {
			padding-bottom: 1rem;
		}
	}
	img {
		height: 340px;
		@include xs {
			height: auto;
		}
	}
	.repair-img {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
//inside------------------------------
#inside {
	.inside-contents {
		display: flex;
		text-align: center;
		justify-content: center;
		flex-wrap: wrap;
		&>div {
			width: 50%;
			@include sm {
				width: 100%;
			}

			h2 {
				font-size: 30px;
				font-size: 3rem;
				font-weight: bold;
				line-height: 1.2;
				margin-bottom: 6rem;
				color: #333;
				@include lg {
					margin-bottom: 5rem;
				}
				@include md {
					margin-bottom: 4rem;
				}
				@include xs {
					margin-bottom: 3rem;
					font-size: 25px;
					font-size: 2.5rem;
				}
				span {
					font-size: 18px;
					font-size: 1.8rem;
					color: #333;
					@include xs {
						font-size: 16px;
						font-size: 1.6rem;
					}
				}
			}
			p {
				margin-bottom: 7rem;
				@include xl {
					margin-bottom: 6rem;
				}
				@include lg {
					margin-bottom: 5rem;
				}
				@include md {
					margin-bottom: 4rem;
				}
				@include xs {
					margin-bottom: 3rem;
				}
			}
			div {
				display: inline-block;
				border: solid 1px $color-main;
				padding: 1rem 3em;
				color: #fff;
				background-color: $color-main;
				transition: 0.3s;
				&:after {
					content: "＞";
					margin-left: 1em;
				}
			}

		}
		.products {
			a {
				display: block;
				position: relative;
				overflow: hidden;
				z-index: 1;
				padding: 9rem 0;
				@include xl {
					padding: 8rem 0;
				}
				@include lg {
					padding: 6.5rem 0;
				}
				@include md {
					padding: 5rem 0;
				}
				@include xs {
					padding: 4rem 0;
				}
				color: rgba(51,51,51,0.8);
				&::after {
					position: absolute;
					content: '';
					width: 100%;
					height: 100%;
					background: url("../img/top-products.jpg") no-repeat;
					background-size: cover;
					background-position: center center;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto;
					z-index: -1;
					transition: all .5s ease-out;
				}
				&:hover {
					&:after{
					opacity: 0.8;
					transform: scale(1.1);
					}
					div {
						color: $color-main;
						background-color: #fff;
					}
				}
			}
		}
		.service {
			a {
				display: block;
				position: relative;
				overflow: hidden;
				z-index: 1;
				padding: 9rem 0;
				@include xl {
					padding: 8rem 0;
				}
				@include lg {
					padding: 6.5rem 0;
				}
				@include md {
					padding: 5rem 0;
				}
				@include xs {
					padding: 4rem 0;
				}
				color: rgba(51,51,51,0.8);
				&::after {
					position: absolute;
					content: '';
					width: 100%;
					height: 100%;
					background: url("../img/top-service.jpg") no-repeat;
					background-size: cover;
					background-position: center center;
					left: 0;
					top: 0;
					bottom: 0;
					right: 0;
					margin: auto;
					z-index: -1;
					transition: all .5s ease-out;
				}
				&:hover {
					&:after{
					opacity: 0.8;
					transform: scale(1.1);
					}
					div {
						color: $color-main;
						background-color: #fff;
					}
				}
			}
		}
	}
}
//advantage------------------------------
#advantage {
	padding: 8rem 0;
	h4 {
		position: relative;
		font-size: 26px;
		font-size: 2.6rem;
		font-weight: bold;
		text-align: center;
		letter-spacing: 0.08em;
		margin-bottom: 8rem;
		@include xs {
			font-size: 24px;
			font-size: 2.4rem;
		}
		span {
			color: $color-main;
		}
		.expansion {
			font-size: 150%
		}
		&:after {
			content: "";
			position: absolute;
			top: 6rem;
			width: 40px;
			margin: auto;
			right: 0;
			left: 0;
			height: 0;
			border-top: 15px solid $color-main;
			border-right: 20px solid transparent;
			border-left: 20px solid transparent;
		}
	}
	.row {
		&>div {
			@include sm {
				margin-bottom: 5rem;
			}
		}
	}
	.advantage-box {
		border: solid 1px $color-main;
		padding-top: 8rem;
		position: relative;
		height: 100%;
		@include md {
			padding-top: 7rem;
		}
		@include sm {
			padding-top: 3rem;
		}
		@include xs {
			padding-top: 4rem;
		}
		img {
			width: 90px;
			position: absolute;
			top: -2.5rem;
			left: 1.5rem;
			@include md {
				top: -2.75rem;
				width: 80px;
			}
			@include sm {
				width: 70px;
			}
			@include xs {
				top: -2.5rem;
				width: 65px;
			}
		}
		dl {
			letter-spacing: 0.05em;
			margin-bottom: 6rem;
			@include lg {
				margin-bottom: 5rem;
			}
			@include md {
				margin-bottom: 4rem;
			}
			@include sm {
				margin-bottom: 3.5rem;
			}
			dt {
				font-size: 25px;
				font-size: 2.5rem;
				text-align: center;
				line-height: 1.4;
				margin-bottom: 2rem;
				padding: 0 3rem;
				@include lg {
					font-size: 24px;
					font-size: 2.4rem;
					padding: 0 2rem;
				}
				@include md {
					font-size: 20px;
					font-size: 2rem;
					padding: 0 1rem;
				}
				@include sm {
					font-size: 22px;
					font-size: 2.2rem;

				}
			}
			dd {
				text-align: justify;
				font-feature-settings: "palt";
				padding: 0 3.3rem;
				@include md {
					padding: 0 2rem;
				}
				@include sm {
					padding: 0 3rem;
				}
			}
		}
	}
}