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

/*---------- lower-header ----------*/
#lower-header {
	background-image: url("../img/side-title-5.jpg");
	@include md {
		background-position: center right 40%!important;
	}
}

/*---------- point　----------*/
#point {
	background-image: url("../img/point-back.jpg");
	.row {
		@include md {
			width: 80%;
			margin: 0 auto!important;
		}
		@include sm {
			width: 100%;
		}
	}
	.point-box {
		display: block!important;
		padding: 0 0.5rem!important;
		margin: 0 0.5rem;
		@include md {
			margin: 1rem!important;
			width: auto!important;
			height: auto!important;
		}
		@include xs {
			width: 80%!important;
			margin: 1rem auto!important;
		}
		dl {
			margin-bottom: 0.5rem;
			margin-top: -2rem;
			dt {
				font-size: 20px;
				font-size: 2rem;
			}
			dd {
				font-size: 14px;
				font-size: 1.4rem;
				font-weight: normal;
			}
		}
	}
}

/*---------- product　----------*/
#product {
	.blog-box {
		border: solid 1px #0084e0;
		.blog-img {
			overflow: hidden;
			position: relative;
			height: 200px;
			margin: 1.5rem;
			img {
				height: 100%;
				position: absolute;
				top: 50%;
				transform: translateY(-50%) ;
				-webkit-transform: translateY(-50%);
			}
		}
		p {
			font-size: 12px;
			font-size: 1.2rem;
			margin-left: 1.5rem;
			margin-bottom: 0;
		}
		h5 {
			font-size: 16px;
			font-size: 1.6rem;
			margin-left: 1.5rem;
			margin-bottom: 3rem;
		}
	}
}


/*---------- qanda　----------*/
#qanda {
}