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

$bright-color: #b20404;
$dark-color: #602121;

#ul-top {
	background-image: url("../img/ul-top-menu.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    height: 176px;
	@include md {
		background-image: url("../img/ul-top-menu-s.jpg");
	}
}

#menu {
	h2 {
		color: #fff;
		span {
			color: #fff;
		}
	}
	.anchor {
		margin: 4rem auto 6rem;
		ul {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			li {
				padding: 0 2rem;
				font-size: 17px;
				font-size: 1.7rem;
				@include md {
					padding: 0 1.5rem;
				}
				@include sm {
					padding: 0 1rem;
					margin-bottom: 2rem;
				}
				a {
					color: #333;
					transition: 0.3s;
					padding: 0 1rem 0.5rem;
					position: relative;
					&::after{
						position: absolute;
						bottom: 0px;
						left: 0;
						content: "";
						width: 100%;
						height: 1px;
						background: $bright-color;
						transform: scale(0, 1);
						transform-origin: center top;
						transition: transform 0.3s;
					}
					&:hover {
						color: $bright-color;
					}
					&:hover::after{
						transform: scale(1, 1);
					}
				}
			}
		}
	}
}

.menu-list {
	.list-bg {
		background: #f7f1e8;
		margin-top: 13rem;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding-right: calc(50vw - 50%);
		padding-left: calc(50vw - 50%);
		&:nth-child(odd) {
			.menu-img {
				order: 1;
			}
			.menu-text {
				order: 2;
			}
		}
		&:nth-child(even) {
			.menu-img {
				order: 2;
				@include sm {
					order: 1;
				}
			}
			.menu-text {
				order: 1;
				@include sm {
					order: 2;
				}
			}
		}
	}
	.container {
		width: 90%;
		margin: 0 auto;
		@include md {
			width: 95%;
		}
		@include sm {
			width: 90%;
		}
		@include xs {
			width: 100%;
		}
	}
	.menu-img {
		img {
			margin-top: -8rem;
			margin-bottom: 3rem;
			@include lg {
				margin-top: -6rem;
			}
			@include md {
				margin-top: -4rem;
			}
			@include sm {
				margin-top: -6rem;
				margin-bottom: 0;
			}
			@include sm {
				margin-top: -4rem;
			}
		}
	}
	.menu-text {
		line-height: 2.2;
		@include lg {
			line-height: 1.8;
		}
		@include sm {
			margin-bottom: 2rem;
			line-height: 1.6;
		}
		@include xs {
			margin-bottom: 2rem;
			line-height: 1.4;
			font-size: 14px;
			font-size: 1.4rem;;
		}
	}
}

.menu-list2 {
	margin-top: 8rem;
	@include md {
		margin-top: 6rem;
	}
	@include xs {
		margin-top: 4rem;
	}
	ul {
		li {
			margin-bottom: 6rem;
			@include sm {
				margin-bottom: 3rem;
			}
			@include xs {
				margin-bottom: 1.5rem;
			}
		}
	}
	dl {
		dt {
			font-weight: 400;
			font-size: 23px;
			font-size: 2.3rem;
			padding-left: 0.5rem;
			border-left: solid 5px $bright-color;
			@include sm {
				font-size: 20px;
				font-size: 2rem;
			}
		}
		dd {
			padding: 1rem;
			text-align: justify;
			@include lg {
				line-height: 1.5;
			}
			@include md {
				padding-top: 0.5rem;
			}
			@include sm {
				font-size: 14px;
				font-size: 1.4rem;
			}
		}
	}
}

.headline {
	.container {
		display: flex;
		@include sm {
			display: block;
		}
	}
	.title-box {
		background-color: #000;
		width: 305px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		@include sm {
			width: inherit;
			background-color: #fff;
			margin-bottom: 2rem;
		}
		h2 {
			position: relative;
			padding-bottom: 2.5rem;
			margin-bottom: 0;
			@include sm {
				color: #333!important;
			}
			span {
				@include sm {
					color: $dark-color!important;
				}
			}
			&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					display: inline-block;
					width: 62px;
					height: 1px;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					background-color: $bright-color;
			}
		}
	}
	img {
		width: 100%;
	}
}

.in-page {
	display: block;
    padding-top: 86px;
    margin-top: -86px;
}


//daifuku
#daifuku {
	margin-bottom: 6rem;
	.title-box {
		background-color: #000;
		width: 165px;
		height: 165px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 4rem;
		@include md {
			width: 145px;
			height: 145px;
		}
		@include sm {
			width: 130px;
			height: 130px;
		}
		h2 {
			position: relative;
			padding-bottom: 2.5rem;
			&::before {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				display: inline-block;
				width: 62px;
				height: 1px;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				background-color: $bright-color;
			}
		}
	}
}

//baked
#baked {
	margin-bottom: 12rem;
}

//saomono
#saomono {
	margin-bottom: 12rem;
}

//monaka
#monaka {
	margin-bottom: 12rem;
}

//kintsuba
#kintsuba {
	margin-bottom: 12rem;
	@include md {
		h2 {
			font-size: 2.4rem;
			span {
				font-size: 1.6rem;
			}
		}
	}
}

//gift
#gift {
	margin-bottom: 12rem;
	@include md {
		h2 {
			font-size: 2.4rem;
			span {
				font-size: 1.6rem;
			}
		}
	}
}