@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;


#ul-header {
	background-image: url("../img/company-header.jpg");
}


//policy------------------------------
#policy {
	.bg-blue {
		position: relative;
		background: linear-gradient(90deg, #fff 0%, #fff 10%, $color-main 10%, $color-main 100%);
		height: 220px;
		margin-bottom: 8rem;
		@include md {
			height: 180px;
		}
		@include sm {
			height: 150px;
		}
		@include xs {
			height: 170px;
		}
		img {
			position: absolute;
			left: 0;
			top : -2rem;
			width: 90%;
			height: 220px;
			@include md {
				height: 180px;
			}
			@include sm {
				height: 150px;
			}
			@include xs {
				height: 170px;
			}
		}
		p {
			color: #fff;
			font-size: 22px;
			font-size: 2.2rem;
			font-weight: bold;
			line-height: 2;
			letter-spacing: 0.1em;
			text-align : center;
			position: absolute;
			width: 100%;
			z-index: 2;
			top: 40%;
			left: 50%;
			transform: translateY(-50%) translateX(-50%);
			-webkit-transform: translateY(-50%) translateX(-50%);		
			@include md {
			}
			@include sm {
				font-size: 18px;
				font-size: 1.8rem;
				top: 38%;
			}
			@include xs {
				line-height: 1.5;
			}
				
		}
	}
}


//about------------------------------
#about {
	margin-bottom: 8rem;
	@include sm {
		margin-bottom: 6rem;
	}
	.container {
		img {
			width: 75%;
			@include md {
				width: 85%;
			}
			@include sm {
				width: 95%;
			}
			@include xs {
				width: 100%;
			}
		}
		.gaikan {
			text-align : center;
			margin-bottom: 6rem
		}
		dl {
			display: flex;
			flex-wrap: wrap;
			width: 75%;
			margin: 0 auto;
			@include md {
				width: 85%;
			}
			@include sm {
				width: 95%;
			}
			@include xs {
				width: 100%;
			}
			dt {
				border-bottom: solid 1px #929292;
				width: 20%;
				font-weight: 500;
				padding: 0 0 1.5rem 2rem;
				margin-bottom: 1.5rem;
				color: $color-main;
				@include xs {
					padding-left: 1rem;
					width: 30%;
				}
			}
			dd {
				border-bottom: solid 1px #929292;
				width: 80%;
				padding: 0 0 1.5rem 2rem;
				margin-bottom: 1.5rem;
				@include xs {
					width: 70%;
				}
			}
		}	
	}

}