@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-b: #5e3819;
$color-y: #daa020;
$color-bg: #f4eee8;


#ul-header {
	background-image: url("../img/vending-header.jpg");
	@include lg {
		background-position: right 30% center;
	}
	@include md{
		background-position: right 22% center;
	}
	@include sm {
		background-position: right 18% center;
	}
	@include xs {
		background-position: right 15% center;
	}
}

section {
	margin-bottom: 10rem;
	@include md {
		margin-bottom: 8rem;
	}
	@include xs {
		margin-bottom: 6rem;
	}
	.key-img {
		position: relative;
		background-image: url("../img/vending-tsuyama-1.jpg");
		background-size: cover;
		background-position: center;
		height: 460px;
		@include lg {
			height: 400px;
		}
		@include md {
			height: 300px;
		}
		@include sm {
			height: 250px;
		}
		@include xs {
			height: 200px;
		}
		h3 {
			position: absolute;
			bottom: 0;
			background-color: #fff;
			z-index: 1;
			margin: 0 0 2rem 2rem;
			padding: 0.5rem 1em;
			color: $color-b;
			font-size: 32px;
			font-size: 3.2rem;
			@include md {
				font-size: 28px;
				font-size: 2.8rem;
			}
			@include sm {
				font-size: 24px;
				font-size: 2.4rem;
				margin: 0 0 1rem 1rem;
				padding: 0.5rem 0.5em;
			}
			@include xs {
				font-size: 16px;
				font-size: 1.6rem;
			}
		}
	}
	dl {
		margin-bottom: 2rem;
		dt {
			display: flex;
   			align-items: center;
			font-size: 28px;
			font-size: 2.8rem;
			color: $color-y;
			padding-bottom: 1rem;
			border-bottom: solid 1px rgba(94,56,25,0.7);
			@include md {
				font-size: 24px;
				font-size: 2.4rem;
			}
			@include xs {
				font-size: 20px;
				font-size: 2rem;
				padding-bottom: 0.5rem;
			}
			span {
				font-size: 70%;
			}
		}
		dd {
			margin-top: 1rem;
			span {
				display: inline-block;
				font-size: 22px;
				font-size: 2.2rem;
				font-weight: bold;
				color: $color-y;
				margin-top: 0.3rem;
			}
		}
	}
	ul {
		margin-bottom: 1.5rem;
		li {
			&::before {
				content: "";
				font-family: "Font Awesome 5 Free";
				content: "\f0da";
				font-weight: 900;
				padding: 0 0.5rem;
				color: $color-y;

			}
		}
	}
	.img-bg {
		background-color: $color-bg;
		padding: 1.5rem 6rem ;
		border-radius: 15px;
		text-align: center;
		@include md {
			padding:  1.5rem 4rem;
		}
		@include sm {
			margin: 0 auto 2rem;
			width: 75%;
			padding: 1.5rem 10rem;
		}
		@include xs {
			padding: 1.5rem 6rem;
		}
	}
	.info {
		width: 83%;
		margin: 4rem auto 0;
		@include lg {
			width: 85%;
		}
		@include md {
			width: 90%;
		}
		@include sm {
			width: 85%;
		}
		@include xs {
			width: 90%;
		}
		.row {
			margin-bottom: 6rem;
		}
		h4 {
			font-family: 'Oleo Script', cursive;
			font-size: 32px;
			font-size: 3.2rem;
			color: $color-b;
			letter-spacing: 0.08em;
			margin-bottom: 1rem;
			@include sm {
				font-size: 30px;
				font-size: 3rem;
			}
			@include xs {
				font-size: 28px;
				font-size: 2.8rem;
			}
		}
		table {
			width: 100%;
			margin-bottom: 4rem;
			tr {
				border-top: solid 1px #bababa;
				border-bottom: solid 1px #bababa;
				th {
					width: 25%;
					font-size: 18px;
					font-size: 1.8rem;
					font-weight: 500;
					vertical-align: top;
					padding: 1em 0;
					@include lg {
						padding: 1.5rem 0;
					}
					@include md {
						padding: 1rem 0;
						font-size: 16px;
						font-size: 1.6rem;
					}
					@include xs {
						width: 20%;
					}
				}
				td {
					width: 75%;
					padding: 1em 0;
					@include lg {
						padding: 1.5rem 0;
					}
					@include md {
						padding: 1rem 0;
						font-size: 14px;
						font-size: 1.4rem;
					}
					@include xs {
						width: 80%;
					}
				}
			}
		}
		iframe {
			height: 245px;
			@include xs {
				height: 200px;
			}
		}
	}
}

//preface
#preface {
	.container {
		div {
			width: 55%;
			margin: 0 auto;
			@include lg {
				width: 66%;
			}
			@include md {
				width: 78%;
			}
			@include xs {
				width: 90%;
			}
			h2 {
				font-size: 25px;
				font-size: 2.5rem;
				font-weight: bold;
				text-align: center;
				color: $color-b;
				margin-bottom: 1.5rem;
			}
			p {
				text-align: justify;
			}
		}
		.link-box {
			margin-top: 2rem;
		}
	}
}

//tsuyama
#tsuyama {
	.key-img {
		background-image: url("../img/vending-tsuyama-1.jpg");
	}
}

//soja
#soja {
	.key-img {
		background-image: url("../img/vending-soja-1.jpg");
	}
}