@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;
  }
}
//ブレイクポイントを指定------ここまで

// 固定色
$main-blue: #003685;
$main-yellow: #bf9a0e;
$sub-blue: #d6dfeb;

#header-img{
	background: url("../img/02-header.jpg") center / cover no-repeat ;
}

#service-contents{
	margin:7rem 0 10rem;
	h2{
		line-height: 1.75rem;
		border-bottom: 1px solid #B3B3B3;
		display: inline-block;
		padding-bottom: 3.5rem;
		margin-bottom: 3rem;
		@include md{
			padding-bottom: 2.5rem;
			margin-bottom: 2rem;
		}
	}
	h2,p{text-align: justify;}
	.link-box{margin-top: 2rem;}
	.service01{
		padding-top: 5rem;
		margin-top: -5rem;
		margin-bottom: 10rem;
		@include md{margin-bottom: 0;}
		.row{
			bottom: -4rem;
    		position: relative;
		}
		.grid-container{
			background: #F0F0F0;
			padding: 13rem 0 7rem;
			@include xs{padding: 10rem 4rem 5rem;}
			.grid{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				grid-template-rows: auto;
				gap: 50px;
				margin: 0 auto;
				@include lg{gap: 30px;}
				@include md{grid-template-columns: repeat(2, 1fr);}
				@include xs{grid-template-columns: repeat(1, 1fr);}
				.card{
					background: #F0F0F0;
					border-style: none;
					img{border-radius: 7px;}
					dt{
						font-size: 2rem;
						margin: 1rem 0 0.5rem;
					}
				}
			}
		}
	}
	.service02{
		padding-top: 10rem;
		margin-top: -10rem;
		margin-bottom: 10rem;
		@include md{margin-bottom: 5rem;}
	}
	.service03-1{
		padding-top: 10rem;
		margin-top: -10rem;
	}
	.service03-1,.service03-2,.service03-3{margin-bottom: 5rem;}
	.service-explain{
		position: relative;
		padding-top: 2rem;
		@include lg{margin-bottom: 5rem;}
		@include md{margin-bottom: 3rem;}
		.decoration{
			position: absolute;
			height: 100px;
			top: 0;
			right: -5rem;
			z-index: 1;
			@include md{right: 1rem;}
			@include sm{height: 80px;}
		}
	}
}