@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-color: #8C2126;
$sub-color: #C79E82;
//全体のカラー設定（一括）----ここまで

//top-img
#header-img + div{
	margin-bottom: 8rem;
	p{
		text-align: justify;
	}
}

//merit-----------------------------------------------ここから
#merit{
	margin-bottom: 8rem;
	@include md {
		margin-bottom: 6rem;
	}
	@include sm {
		margin-bottom: 4rem;
	}
	ul{
		margin-top: 4rem;
		@include md {
			margin-top: 2rem;
		}
		li{
			padding-top: 0.75rem;
			padding-bottom: 0.75rem;
			dl{
				border-radius: 1rem;
				background-color: #fff;
				padding: 2rem;
				margin-bottom: 1.5rem;
				height: 100%;
				@include md {
					padding: 2rem 2.5rem;
				}
				@include sm {
					padding: 1.5rem;
				}
				dt{
					img{
						padding: 2rem 4rem 3rem;
						width: 100%;
						@include sm {
							padding: 0rem 0rem 3rem;
						}
					}
				}
				dd{
					h4{
						font-size: 20px;
						font-size: 2rem;
						font-weight: 600;
						margin-bottom: 1rem;
					}
					p{
						text-align: justify;
						margin: 0;
						line-height: 3rem;
						@include sm {
							line-height: inherit;
						}
					}
				}
			}
		}
	}
}


//type------------------------------------------------ここから
#type{
	margin-bottom: 8rem;
	@include md {
		margin-bottom: 6rem;
	}
	@include sm {
		margin-bottom: 4rem;
	}
	dl{
		margin-top: 4rem;
		align-items: flex-start;
		@include md {
			margin-top: 2rem;
		}
		dt{
			img{
				border-radius: 1rem;
				min-height: 187px;
			}
		}
		dd{
			@include lg {
				padding-left: 2rem;
			}
			@include xs {
				padding:1.5rem;
			}
			h4{
				font-size: 20px;
				font-size: 2rem;
				font-weight: 600;
				margin-bottom: 1rem;
			}
			p{
				text-align: justify;
				margin: 0;
				line-height: 3rem;
			}
		}
	}
}


//method----------------------------------------------ここから
#method{
	padding-bottom: 10rem;
	@include md {
		padding-bottom: 8rem;
	}
	@include sm {
		padding-bottom: 6rem;
	}
	ul{
		margin-top: 4rem;
		@include md {
			margin-top: 2rem;
		}
		li{
			dl{
				dt{
					img{
						border-radius: 1rem;
						width: 100%;
					}
				}
				dd{
					margin-top: 3rem;
					@include xs {
						margin-top: 2rem;
					}
					h4{
						font-size: 20px;
						font-size: 2rem;
						font-weight: 600;
						margin-bottom: 1rem;
					}
					p{
						text-align: justify;
						margin: 0;
						line-height: 3rem;
					}
				}
			}
			&:first-child{
				padding-right: calc(var(--bs-gutter-x)* 1.5);
				padding-left: calc(var(--bs-gutter-x)* 0.5);
				@include xs {
					padding:1rem;
				}
			}
			&:last-child{
				padding-right: calc(var(--bs-gutter-x)* 0.5);
				padding-left: calc(var(--bs-gutter-x)* 1.5);
				@include xs {
					padding:1rem;
				}
			}
		}
	}
}