/* CSS Document */
/* ベース（style.cssより） */ :root {
	--max: 1300px;
	/* フォントサイズ (1300pxで最大値になる設定) */
	--fs14: 14px;
	--fs15: clamp(14px, 1.154dvw, 15px);
	--fs16: clamp(14px, 1.231dvw, 16px);
	--fs18: clamp(15px, 1.385dvw, 18px);
	--fs20: clamp(16px, 1.538dvw, 20px);
	--fs22: clamp(16px, 1.692dvw, 22px);
	--fs24: clamp(18px, 1.846dvw, 24px);
	--fs25: clamp(18px, 1.923dvw, 25px);
	--fs26: clamp(18px, 2.000dvw, 26px);
	--fs28: clamp(20px, 2.154dvw, 28px);
	--fs29: clamp(21px, 2.256dvw, 29px);
	--fs30: clamp(22px, 2.308dvw, 30px);
	--fs32: clamp(22px, 2.462dvw, 32px);
	--fs34: clamp(22px, 2.615dvw, 34px);
	--fs35: clamp(23px, 2.692dvw, 35px);
	--fs36: clamp(24px, 2.769dvw, 36px);
	--fs38: clamp(24px, 2.923dvw, 38px);
	--fs40: clamp(30px, 3.077dvw, 40px);
	--fs44: clamp(30px, 3.385dvw, 44px);
	--fs48: clamp(30px, 3.692dvw, 48px);
	--fs50: clamp(32px, 3.846dvw, 50px);
	--fs53: clamp(32px, 4.077dvw, 53px);
	--fs60: clamp(36px, 4.615dvw, 60px);
	--fs70: clamp(42px, 5.385dvw, 70px);
	--fs78: clamp(44px, 6.000dvw, 78px);
	--fs80: clamp(50px, 6.154dvw, 80px);
	/*色*/
	--white: white;
	--gray: #999999;
	--black: #1a1a1a;
	--red: #ab1a28;
	--gray-border: #b3b3b3;
	--gray-usui: #f2f2f2;
	--honten-1f-red: #ad3522;
	--honten-2f-pink: #c04b51;
	--amyu-green: #8ea300;
	--mujyakikko-blue: #094d7a;
	/*フォント*/
	--joly-text: "Joly Text", serif;
	--zen-old-mincho: "Zen Old Mincho", serif;
	--zen-kaku-gothic-new: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
	--ZenKakuGothicNew: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}
html {
	/* font-size: 20px; */
	font-size: clamp(16px, calc(3.0769vw + 0.6155px), 20px);
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}
html.is-no-smooth {
	scroll-behavior: auto !important;
}
#card .card-inner .item h3 {
	font-size: var(--fs30);
}
#concept .text p, .btn-pc, .btn-sp, #recipe .item .text p, .link-box {
	font-family: var(--ZenKakuGothicNew);
}
#shirokuma, #takeout {
	max-width: var(--max);
}
.wrapper *, .wrapper *::before, .wrapper *::after {
	margin: 0;
	box-sizing: border-box;
	transition: all 0.3s;
}
.max-width {
	max-width: var(--max);
}
a {
	display: block;
	text-decoration: none;
}
a:hover {
	cursor: pointer;
}
.top-img a:hover {
	background: var(--white);
}
.red {
	color: var(--red);
}
.gray {
	color: var(--gray);
}
.en {
	font-size: var(--fs26);
	white-space: nowrap;
	font-family: var(--joly-text);
}
.shop-card-btn {
	width: min(300px, 70%);
	max-height: 3rem;
	aspect-ratio: 5 / 1;
	background-color: var(--black);
	border-radius: 35px;
	color: var(--white);
	text-decoration: none;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	transition: all 0.3s;
}
.shop-card-btn:hover {
	background: #AB1A28;
}
.shop-card-label {
	display: inline-block;
	color: var(--white);
	padding: 0.5rem 2rem 0.5rem 1rem;
	line-height: 1em;
	position: relative;
	clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}
.rabel1 {
	background: var(--honten-1f-red);
}
.rabel2 {
	background: var(--honten-2f-pink);
}
.rabel3 {
	background: var(--amyu-green);
}
.rabel4 {
	background: var(--mujyakikko-blue);
}
#firstview {
	width: 96.99%;
	padding-top: 6rem;
	margin: 0 auto 5rem;
	aspect-ratio: 1861/853;
	display: flex;
	justify-content: space-between;
	picture {
		width: 32.7%;
		height: 100%;
		border: none;
		border-radius: 10px;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}
main {
	width: 100%;
	#concept {
		width: min(1300px, min(1300px, 80%));
		margin: 0 auto 7.5rem;
		display: flex;
		justify-content: space-between;
		.text {
			width: 100%;
			.red-rabel {
				width: fit-content;
				padding: 0;
				font-size: var(--fs30);
				font-family: var(--joly-text);
				color: var(--red);
				font-weight: 700;
				line-height: 2.4rem;
				letter-spacing: 0;
			}
			h2 {
				font-size: var(--fs44);
				font-family: var(--ZenOldMincho);
				font-weight: 700;
				letter-spacing: 0;
				line-height: 1.2;
				margin-bottom: 2rem;
			}
			h3 {
				font-size: var(--fs30);
				font-weight: 700;
				font-family: var(--ZenOldMincho);
				margin-bottom: 2rem;
				position: relative;
			}
			p {
				font-size: var(--fs26);
				font-family: var(--ZenOldMincho);
				text-align: justify;
				margin: 0;
			}
		}
	}
	#shirokuma {
		width: min(1300px, min(1300px, 80%));
		margin: 0 auto;
		hgroup {
			height: 10rem;
			text-align: center;
			h3 {
				font-size: var(--fs40);
				font-weight: 700;
				font-family: var(--ZenOldMincho);
				line-height: 1.3;
			}
			h4 {
				font-size: 1.2rem;
				font-weight: 700;
			}
		}
		.img-box {
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			picture {
				width: 32.5%;
				height: 100%;
				aspect-ratio: 1;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		.magic {
			padding: 3.5rem 0 4rem;
			h3 {
				font-size: var(--fs30);
				font-weight: 700;
				font-family: var(--ZenOldMincho);
				text-align: center;
				margin-bottom: 3rem;
			}
			p {
				font-size: var(--fs20);
				font-family: var(--ZenKakuGothicNew);
			}
		}
		.shirokuma-card {
			display: flex;
			justify-content: space-between;
			margin-bottom: 4.5rem;
			.item {
				width: 48%;
				border-radius: 20px;
				border: 2px solid var(--gray-border);
				padding: 1.5rem 2rem 0;
				display: flex;
				flex-direction: column;
				h3 {
					/* font-size: var(--fs29); */
					font-size: var(--fs26);
					font-family: var(--ZenOldMincho);
					text-align: center;
					white-space: nowrap;
					br {
						display: none;
					}
				}
				.border {
					width: 100%;
					height: 0.1rem;
					background: var(--gray-border);
					margin: 0.75rem 0;
				}
				p {
					font-size: var(--fs20);
					font-family: var(--ZenKakuGothicNew);
					margin-bottom: 1.5rem;
				}
				img {
					display: block;
					width: 100%;
					aspect-ratio: 630/404;
					margin: auto 0 1.5rem;
				}
			}
		}
		.shop-link {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 3rem 1rem;
			border-radius: 20px;
			background: var(--gray-usui);
			column-gap: 1rem;
			h3 {
				display: flex;
				align-items: center;
				height: 2rem;
				line-height: 2rem;
				font-size: var(--fs30);
				font-family: var(--ZenOldMincho);
				text-align: center;
				white-space: nowrap;
				column-gap: 0.5rem;
				img {
					display: block;
					width: 1.25rem;
					aspect-ratio: 52/61;
				}
			}
			.border {
				width: 0.1rem;
				height: -webkit-fill-available;
				margin: 0 2rem;
				background: var(--gray-border);
			}
			.link-box {
				display: flex;
				flex-direction: column;
				row-gap: 0.4rem;
				a {
					width: 21rem;
					font-size: var(--fs20);
					line-height: 1.5rem;
					background: var(--white);
					white-space: nowrap;
					margin: 0;
					padding: 0.1rem 1rem;
					border-radius: 50px;
					display: flex;
					justify-content: space-between;
					color: var(--black);
					text-decoration: none;
					img {
						width: 14px;
						aspect-ratio: 27/28;
					}
				}
			}
		}
	}
	#takeout {
		width: min(1300px, min(1300px, 80%));
		margin: 0 auto 7.5rem;
		hgroup {
			height: 16rem;
			text-align: center;
			padding-top: 7rem;
			h3 {
				font-size: var(--fs40);
				font-weight: 700;
				font-family: var(--ZenOldMincho);
				line-height: 1.3;
			}
			h4 {
				font-size: 1.2rem;
				font-weight: 700;
			}
		}
		.img-box {
			aspect-ratio: 1302/421;
			display: flex;
			justify-content: space-between;
			img {
				display: block;
				width: 49.5%;
				height: 100%;
			}
		}
		.text-box {
			padding: 3rem 0;
			text-align: center;
			h3 {
				font-size: var(--fs30);
				font-family: var(--zen-old-mincho);
				font-weight: bold;
				margin-bottom: 1.5rem;
				br {
					display: none;
				}
			}
			p {
				font-size: var(--fs20);
				font-family: var(--zen-kaku-gothic-new);
				text-align: left;
			}
		}
		.shop-link {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 3rem 1rem;
			border-radius: 20px;
			background: var(--gray-usui);
			h3 {
				display: flex;
				align-items: center;
				height: 2rem;
				line-height: 2rem;
				font-size: var(--fs30);
				font-family: var(--ZenOldMincho);
				text-align: center;
				white-space: nowrap;
				img {
					display: block;
					width: 1.25rem;
					aspect-ratio: 52/61;
				}
			}
			.border {
				width: 0.1rem;
				height: 5rem;
				margin: 0 2rem;
				background: var(--gray-border);
			}
			.link-box {
				/*padding: 0 0 1rem;*/
				a {
					width: 21rem;
					font-size: var(--fs20);
					line-height: 1.5rem;
					background: var(--white);
					white-space: nowrap;
					margin: 0.4rem 0;
					padding: 0.1rem 1rem;
					border-radius: 50px;
					display: flex;
					justify-content: space-between;
					color: var(--black);
					text-decoration: none;
					img {
						width: 14px;
						aspect-ratio: 27/28;
					}
				}
			}
		}
		.shop-link {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 3rem 1rem;
			border-radius: 20px;
			background: var(--gray-usui);
			h3 {
				display: flex;
				align-items: center;
				height: 2rem;
				line-height: 2rem;
				font-size: var(--fs30);
				font-family: var(--ZenOldMincho);
				text-align: center;
				white-space: nowrap;
				column-gap: 0.5rem;
				img {
					display: block;
					width: 1.25rem;
					aspect-ratio: 52/61;
				}
			}
			.border {
				width: 0.1rem;
				height: -webkit-fill-available;
				margin: 0 2rem;
				background: var(--gray-border);
			}
			.link-box {
				display: flex;
				flex-direction: column;
				row-gap: 0.5rem;
				position: relative;
				small {
					position: absolute;
					bottom: -1.5rem;
					white-space: nowrap;
				}
				a {
					width: 21rem;
					font-size: var(--fs20);
					line-height: 1.5rem;
					background: var(--white);
					white-space: nowrap;
					margin: 0;
					padding: 0.1rem 1rem;
					border-radius: 50px;
					display: flex;
					justify-content: space-between;
					color: var(--black);
					text-decoration: none;
					img {
						width: 14px;
						aspect-ratio: 27/28;
					}
				}
			}
		}
	}
	.shirokuma2 {
		width: 100%;
		margin-bottom: 7.5rem;
		hgroup {
			width: min(1300px, min(1300px, 80%));
			margin: 0 auto;
			height: 10rem;
			text-align: center;
			padding: 0 0 3rem;
			h2 {
				font-size: var(--fs30);
				font-family: var(--ZenOldMincho);
				font-weight: bold;
				margin-bottom: 0.5rem;
			}
			h3 {
				font-size: var(--fs40);
				font-family: var(--ZenOldMincho);
				font-weight: 700;
				br {
					display: none;
				}
			}
		}
		.img-box {
			width: min(1300px, min(1300px, 80%));
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			img {
				display: block;
				width: 32.5%;
				height: auto;
				aspect-ratio: 1;
			}
		}
		p {
			display: block;
			width: min(1300px, 80%);
			margin: 0 auto;
			font-size: var(--fs20);
			font-family: var(--ZenKakuGothicNew);
			padding: 3rem 0;
		}
	}
	#shop-list-box {
		width: 100%;
		height: auto;
		background: var(--gray-usui);
		padding: 4rem 0 5rem;
		position: relative;
		.position {
			font-size: var(--fs38);
			font-family: var(--zen-old-mincho);
			text-align: center;
			position: relative;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.shop-list-ul {
			width: min(1300px, 80%);
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.shop-list {
				width: 48%;
				padding: 2rem;
				background: var(--white);
				margin-bottom: 1.5rem;
				h2 {
					font-size: var(--fs26);
					font-family: var(--ZenOldMincho);
					font-weight: bold;
					margin-bottom: 1rem;
				}
				h3 {
					font-size: var(--fs30);
					font-family: var(--ZenOldMincho);
					font-weight: 700;
					text-align: left;
					line-height: 1.2;
					white-space: nowrap;
					margin-bottom: 1rem;
				}
				.shop-card-btn {
					width: min(300px, 50%) !important;
					aspect-ratio: 6/1;
					margin: 2rem auto 0;
				}
			}
		}
	}
}
@media screen and (max-width:1440px) {
	main {
		#firstview {
			padding-top: 4.5rem;
		}
		#concept {
			.text {
				padding-right: 2rem;
			}
		}
		#shirokuma {
			.shirokuma-card {
				flex-direction: column;
				.item {
					width: 100%;
					margin-bottom: 1.5rem;
				}
			}
		}
	}
}
@media screen and (max-width:1025px) {
	main {
		#firstview {
			width: 96%;
			aspect-ratio: 1025/1686;
			padding-top: 0.5rem;
			margin: 0 auto 5rem;
			flex-direction: column;
			row-gap: 1%;
			picture {
				width: 100%;
				height: auto;
				aspect-ratio: 757/416;
			}
		}
		#concept {
			width: 100%;
			flex-direction: column;
			margin: 0 auto 5rem;
			.text {
				width: min(1300px, 80%);
				margin: 0 auto;
				padding-right: 0;
			}
		}
		#shirokuma {
			width: 100%;
			hgroup {
				height: 8.5rem;
			}
			.img-box {
				width: 100%;
				picture {
					width: 32%;
					height: 100%;
					aspect-ratio: 1;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
			}
			.magic {
				width: min(1300px, 80%);
				margin: 0 auto;
				padding: 1.5rem 0;
				h3 {
					font-size: var(--fs30);
					font-weight: 700;
					font-family: var(--ZenOldMincho);
					text-align: center;
					margin-bottom: 1.5rem;
				}
			}
			.shirokuma-card {
				width: 90%;
				margin: 0 auto;
				.item {
					h3 {
						font-size: var(--fs29);
					}
				}
			}
			.shop-link {
				width: min(1300px, 80%);
				margin: 0 auto;
				flex-direction: column;
				padding: 1.5rem 1rem;
				.border {
					width: 100%;
					height: 0.1rem;
					background: var(--gray-border);
					margin: 0.75rem 0;
				}
			}
		}
		#takeout {
			width: 100%;
			margin: 0 auto 6rem;
			hgroup {
				width: 100%;
				height: 12rem;
				padding-top: 5rem;
				h3 {
					min-width: 323px;
					font-size: var(--fs40);
					font-weight: 700;
					font-family: var(--ZenOldMincho);
				}
				h4 {
					font-size: 1.2rem;
					font-weight: 700;
					white-space: nowrap;
				}
			}
			.img-box {
				aspect-ratio: 1302/421;
				display: flex;
				justify-content: space-between;
				img {
					display: block;
					width: 49.5%;
					height: 100%;
				}
			}
			.text-box {
				width: min(1300px, 80%);
				margin: 0 auto;
				text-align: left;
			}
			.shop-link {
				width: min(1300px, 80%);
				margin: 0 auto;
				flex-direction: column;
				padding: 1.5rem 1rem 0;
			}
			.shop-link {
				width: min(1300px, 80%);
				margin: 0 auto;
				flex-direction: column;
				padding: 1.5rem 1.5rem 0;
				.border {
					width: 100%;
					height: 0.1rem;
					margin: 0.75rem 0;
				}
				.link-box {
					padding: 0 0 1rem;
					a {
						width: 21rem;
						font-size: var(--fs20);
						line-height: 1.5rem;
						font-family: var(--ZenKakuGothicNew);
						color: var(--black);
						background: var(--white);
						white-space: nowrap;
						/*margin: 0.4rem auto;*/
						padding: 0.1rem 1rem;
						border-radius: 50px;
						display: flex;
						justify-content: space-between;
						text-decoration: none;
						img {
							width: 14px;
							aspect-ratio: 27/28;
						}
					}
					small {
						bottom: 0;
						position: relative;
						display: block;
						width: 21rem;
						margin: 0 auto;
						font-size: var(--fs20);
						font-family: var(--ZenKakuGothicNew);
					}
				}
			}
		}
		.shirokuma2 {
			width: 100%;
			margin-bottom: 6.5rem;
			hgroup {
				width: 100%;
				height: 7.5rem;
				h3 {
					display: block;
					line-height: 1.4 !important;
					br {
						display: block;
					}
				}
			}
			.img-box {
				width: 100%;
				img {
					width: 32.8%;
				}
			}
			p {
				display: block;
				width: min(1300px, 80%);
				margin: 0 auto;
				font-size: var(--fs20);
				font-family: var(--ZenKakuGothicNew);
				padding: 2rem 0;
			}
			.shop-card-btn {
				width: min(300px, min(1300px, 80%)) !important;
				aspect-ratio: 6 / 1;
			}
		}
		#shop-list-box {
			width: 100%;
			background: var(--gray-usui);
			position: relative;
			.shop-list-ul {
				width: min(1300px, 80%);
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.shop-list {
					width: 48%;
					padding: 1.5rem 1rem;
					.shop-card-btn {
						width: min(300px, min(1300px, 80%)) !important;
						aspect-ratio: 6 / 1;
					}
				}
			}
		}
	}
}
@media screen and (max-width:900px) {
	main {
		& #shop-list-box {
			.shop-list-ul {
				flex-direction: column;
				.shop-list {
					width: 100%;
					padding: 2rem;
					img{width:100%;}
				}
			}
		}
	}
}
@media screen and (max-width:767px) {
	main {
		& #takeout {
			& .shop-link {
				& .link-box {
					small {
						white-space: normal;
					}
				}
			}
		}
		& #shop-list-box {
			& .shop-list-ul {
				& .shop-list {
					padding: 1.5rem;
					h3 {
						white-space: normal;
					}
				}
			}
		}
		& #shirokuma {
			hgroup {
				height: 7.5rem;
			}
			
			& .magic {
				h3 {
					text-align: left;
				}
			}
			.shop-link {
				padding: 1rem;
			}
		}
		#firstview {
			width: 96%;
			height: auto;
			aspect-ratio: 787/593;
			margin:auto auto 4rem;
			row-gap: 2.5%;
			picture {
				width: 100%;
				height: auto;
				overflow: hidden;
				img {
					position: static;
					top: auto;
					left: auto;
					transform: none;
					width: auto;
					min-width: 0;
					height: 100%;
				}
			}
		}
		.shirokuma2{
			margin-bottom:5rem;
		}
	}
}
@media screen and (max-width:725px) {
	main #history .item .top h3 {
		font-size: 5dvw;
	}
	main #history .item .top h3 img {
		margin-left: 2dvw;
	}
}
@media screen and (max-width:631px) {
	html {
		font-size: clamp(16px, calc(3.0769vw + 0.6155px), 20px);
	}
	main{
		& .shirokuma2 {
			hgroup {
				height: auto;
				width:80%;
				margin: auto;
				padding: 0;
				h2{margin:0;}
				h3{
					margin:1rem auto 2rem;
					span{display:inline-block;}
				}
			}
		}
		& #shop-list-box {
			.position {
				width:100%;
			}
		}
	}
}
@media screen and (max-width:500px) {
	main {
		#concept {
			flex-direction: column;
			.text {
				padding-right: 0;
				.red-rabel {
					font-size: 1.41rem;
				}
				h2 {
					font-size: 2rem;
					br {
						display: block;
					}
				}
				h3 {
					font-size: 1.5rem;
					letter-spacing: 0;
				}
			}
		}
	}
}
@media screen and (max-width:490px) {
	main {
		#shirokuma {
			.shirokuma-card {
				.item {
					h3 {
						line-height: 1.4;
						br {
							display: block;
						}
					}
				}
			}
			.shop-link {
				width: 90%;
				.link-box {
					width: fit-content;
					a {
						width: 280px;
						font-size: var(--fs16);
						padding: 0.1rem 0.75rem;
						img {
							width: 10px;
						}
					}
				}
			}
		}
		#takeout {
			.shop-link {
				width: 90%;
				position: relative;
				.link-box {
					width: fit-content;
					margin: 0 auto;
					a {
						width: 100%;
						font-size: var(--fs16);
						padding: 0.1rem 0.75rem;
						white-space: normal;
					}
					small {
						width: 100%;
					}
				}
			}
		}
	}
}
@media screen and (max-width:441px) {
	main {
		#concept {
			margin: 0 auto 5rem;
		}
		#recipe .recipe-inner .map {
			aspect-ratio: 1025/778;
		}
		#recipe .item {
			width: 90%;
		}
	}
}
@media screen and (max-width:400px) {
	main {
	& #shop-list-box {
		& .shop-list-ul {
			& .shop-list {
				padding: 1.5rem;
				.shop-card-btn {
					margin: 1.5rem auto 0;
				}
			}
		}
	}
	}
}