@charset "UTF-8";
#page_wrapper {
	&.res {
		width:100%;
		max-width:2000px;
		padding:0;
		overflow:clip;
	}
	#page_10th {
		background-color:#F9F8F2;
		.contents {
			width:calc(100% - 100px);
			max-width:1160px;
			margin:0 auto;
			position:relative;
			.penon {
				pointer-events:none;
			}
		}
		h2 {
			max-width:1160px;
			margin:0 auto min(7.2vw,90px);
		}
		p {
			line-height:2;
			color:#756656;
		}
		#mv {
			.message {
				font-size:min(3.00vw,2.1em);
				padding:3em 0 1em;
				letter-spacing:.075em;
				p {
					font-weight:600;
					&:not(:last-child) {
						margin-bottom:1.2em;
					}
				}
			}
		}
	}
	#pagemenu {
		.contents {
			padding:min(20vw,250px) 0;
		}
		ul {
			display:grid;
			grid-template-columns:repeat(2,1fr);
			grid-gap:min(4vw,50px) 5%;
			li {
				list-style:none;
			}
		}
		.obj1 {
			width:18%;
			position:absolute;
			top:0;
			right:-10%;
		}
		.obj2 {
			width:20%;
			position:absolute;
			bottom:0;
			left:-15%;
		}
	}
	#history {
		.contents {
			padding:min(8vw,100px) 0 min(16vw,200px);
			max-width:1400px;
		}
		.history {
			position:relative;
			.obj {
				position:absolute;
				width:100%;
				left:0;
				&.obj1 {
					top:0:
				}
				&.obj2 {
					top:7.4%;
				}
				&.obj3 {
					top:23.2%;
				}
				&.obj4 {
					top:21.2%;
				}
				&.obj5 {
					top:35%;
				}
				&.obj6 {
					top:45%;
				}
				&.obj7 {
					top:59%;
				}
				&.obj8 {
					top:72%;
				}
				&.obj9 {
					top:79.5%;
				}
				&.obj10 {
					bottom:0;
				}
			}
		}
	}
	#brand {
		.contents {
			padding:min(8vw,100px) 0 min(16vw,200px);
			display:grid;
			justify-items:center;
			p {
				font-size:min(3.04vw,2.1em);
				letter-spacing:.075em;
				font-weight:600;
			}
		}
	}
	#food {
		.contents {
			padding:min(8vw,100px) 0 min(16vw,200px);
			display:grid;
			justify-items:center;
			h2 {
				img {
					width:110%;
					max-width:110%;
					margin:0 -5%;
				}
			}
			p {
				font-size:min(3.04vw,2.1em);
				letter-spacing:.075em;
				font-weight:600;
				&:not(:last-child) {
					margin-bottom:1.2em;
				}
			}
		}
	}
	#campaign {
		.contents {
			padding:min(8vw,100px) 0 min(16vw,200px);
			display:grid;
			justify-items:center;
			h2 {
				img {
					width:120%;
					max-width:120%;
					margin:0 -10% min(20vw,250px);
				}
			}
			.campaign {
				margin:0 auto min(24vw,300px);
				background-color:#FFFFFF;
				position:relative;
				&.campaign3 {
					margin-bottom:min(7.2vw,90px);
				}
				&.campaign2 {
					.campaign_inner {
						p {
							margin:1em 0;
						}
						a {
							display:block;
							max-width:780px;
							margin:0 auto;
						}
					}
				}
				&::before,&::after {
					content:'';
					display:block;
					background-color:#F9F8F2;
					width:5%;
					aspect-ratio:1;
					border-radius:50%;
					position:absolute;
					top:0;
					left:0;
					transform:translate(-50%,-50%);
				}
				&::after {
					left:auto;
					right:0;
					transform:translate(50%,-50%);
				}
				.campaign_inner {
					padding:min(7.2vw,90px) 10% min(6vw,75px);
					display:grid;
					justify-items:center;
					&::before,&::after {
						content:'';
						display:block;
						background-color:#F9F8F2;
						width:5%;
						aspect-ratio:1;
						border-radius:50%;
						position:absolute;
						bottom:0;
						left:0;
						transform:translate(-50%,50%);
					}
					&::after {
						left:auto;
						right:0;
						transform:translate(50%,50%);
					}
					h3 {
						position:relative;
						margin-bottom:min(4vw,50px);
						img {
							position:relative;
							z-index:1;
						}
						.num {
							display:block;
							width:30%;
							position:absolute;
							top:max(-15.2vw,-190px);
							left:50%;
							transform:translateX(-50%);
							&::before {
								content:'';
								display:block;
								aspect-ratio:1;
								border-radius:50%;
								width:160%;
								background-color:#FFFFFF;
								position:absolute;
								left:50%;
								top:50%;
								transform:translate(-50%,-33%);
								z-index:-1;
							}
						}
					}
					& > p {
						font-size:min(2.50vw,1.77em);
						font-weight:600;
						margin-bottom:1.5em;
					}
					dl {
						display:grid;
						justify-items:center;
						font-size:min(2.32vw,1.61em);
						&:not(:last-child) {
							margin-bottom:min(4.8vw,60px);
						}
						dt {
							font-weight:600;
							color:#756656;
							background-color:#F4DC78;
							padding:.4em 1.5em;
							border-radius:2em;
							margin-bottom:.66em;
							line-height:1.3;
							text-align:center;
						}
						dd {
							&:not(:last-child) {
								margin-bottom:2em;
							}
							p {
								font-size:.83em;
								font-weight:600;
							}
							a {
								display:grid;
								font-weight:600;
								grid-template-columns:repeat(2,auto);
								align-items:center;
								justify-content:space-between;
								width:10.2em;
								margin-left:auto;
								margin-top:.5em;
								&::before {
									content:'';
									width:.8em;
									height:1em;
									background-color:#60ABB1;
									clip-path:polygon(0 0,100% 50%,0 100%);
								}
								&:has(img) {
									width:auto;
									&::before {
										content:none;
									}
								}
							}
						}
					}
					.photo {
						display:grid;
						grid-template-columns:repeat(2,1fr);
						grid-column-gap:3%;
						&.photo1 {
							grid-template-columns:1fr;
						}
					}
				}
				&.campaign3 {
					.campaign_inner {
						& > p {
							font-size:min(1.92vw,1.33em);
							margin-bottom:2.5em;
						}
						dl {
							dt {
								&:last-child {
									margin-bottom:2em;
								}
							}
							dd {
/* 								margin-bottom:2.5em; */
							}
						}
					}
				}
			}
			.gotop {
				font-size:1em;
				color:#60553E;
				font-weight:600;
				display:grid;
				width:18em;
				height:3em;
				background-color:#FFFFFF;
				border:2px solid #60553E;
				display:grid;
				grid-template-columns:repeat(2,auto);
				grid-column-gap:.33em;
				align-items:center;
				justify-content:center;
				position:relative;
				&::after {
					content:'';
					width:.9em;
					height:.8em;
					background-color:#60553E;
					clip-path:polygon(50% 0,100% 100%,0 100%);
				}
				&::before {
					content:'';
					display:block;
					width:calc(100% + 4px);
					height:calc(100% + 4px);
					position:absolute;
					z-index:0;
					pointer-events:none;
					border-right:2px solid #60553E;
					border-bottom:2px solid #60553E;
					position:absolute;
					top:2px;
					left:2px;
				}
			}
		}
	}
}


@media (max-width: 1024px) {
	
	#page_wrapper {
		#page_10th {
			.contents {
				width:calc(100% - 60px);
			}
		}
	}
	
}


@media (max-width: 768px) {
	
	#page_wrapper {
		#page_10th {
			.contents {
				width:84%;
			}
			h2 {
				margin:0 auto 5vw;
			}
			#mv {
				.message {
					font-size:3.2vw;
					padding:3em 0 1em;
					margin-right:-1em;
				}
			}
		}
		#pagemenu {
			.contents {
				padding:10vw 0;
			}
			ul {
				grid-gap:4vw;
				li {
					list-style:none;
				}
			}
			.obj1 {
				display:none;
			}
			.obj2 {
				display:none;
			}
		}
		#history {
			.contents {
				padding:8vw 0 16vw;
			}
			.history {
				.obj {
					&.obj2 {
						top:13.6%;
					}
					&.obj3 {
						top:21.6%;
					}
					&.obj4 {
						top:32.7%;
					}
					&.obj5 {
						top:38.8%;
					}
					&.obj6 {
						top:51%;
					}
					&.obj7 {
						top:61%;
					}
					&.obj8 {
						top:73%;
					}
				}
			}
		}
		#brand {
			.contents {
				padding:5vw 0 15vw;
				p {
					font-size:3.3vw;
				}
			}
		}
		#food {
			.contents {
				padding:5vw 0 15vw;
				h2 {
					img {
						width:100%;
						max-width:100%;
						margin:0;
					}
				}
				p {
					font-size:3.3vw;
					margin-right:-1em;
				}
			}
		}
		#campaign {
			.contents {
				padding:5vw 0 15vw;
				h2 {
					img {
						width:100%;
						max-width:100%;
						margin:0 0 13vw;
					}
				}
				.campaign {
					margin:0 auto 25vw;
					&.campaign3 {
						margin-bottom:8vw;
					}
					.campaign_inner {
						padding:8vw 10% 6vw;
						h3 {
							margin-bottom:3vw;
							.num {
								width:45%;
								top:-19vw;
								&::before {
									width:150%;
									transform:translate(-50%,-28%);
								}
							}
						}
						& > p {
							font-size:3.2vw;
						}
						dl {
							font-size:3.6vw;
							&:not(:last-child) {
								margin-bottom:6vw;
							}
							dd {
								p {
									font-size:.76em;
									margin:0 -.5em;
								}
								a {
									font-size:.9em;
								}
							}
						}
						.photo {
							max-width:96%;
							margin:0 auto;
							grid-template-columns:1fr;
							grid-row-gap:4vw;
						}
					}
					&.campaign3 {
						.campaign_inner {
							& > p {
								font-size:3vw;
								margin:0 -.5em 2em;
							}
							dl {
								dt {
									&:last-child {
										margin-bottom:2em;
									}
								}
								dd {
/* 									margin-bottom:2em; */
								}
							}
						}
					}
				}
				.gotop {
					font-size:1.2em;
					border-width:1px;
					&::before {
						border-right-width:1px;
						border-bottom-width:1px;
						
					}
				}
			}
		}
	}
	
}


/**animation**/
.animation {
	opacity: 0;
	transition-duration: 1.5s;
	transition-timing-function:cubic-bezier(0.190, 1.000, 0.220, 1.000);
	filter:blur(2);
	&.fade-left {
		transform: translateX(-100px);
	}
	&.fade-right {
		transform: translateX(100px);
	}
	&.fade-up {
		transform: translateY(100px);
	}
	&.delay-1 {
		transition-delay: .33s;
	}
	&.delay-2 {
		transition-delay: .66s;
	}
	&.delay-0 {
		transition-delay: .16s;
	}
	&.delay-3 {
		transition-delay: .49s;
	}
	&:hover {
		&.delay-1 {
			transition-delay: 0s;
		}
		&.delay-2 {
			transition-delay: 0s;
		}
		&.delay-0 {
			transition-delay: 0s;
		}
		&.delay-3 {
			transition-delay: 0s;
		}
	}
}
.animation {
	&.show {
		opacity: 1;
		filter:blur(0);
		&.fade-left {
			transform: translate(0,0);
		}
		&.fade-right {
			transform: translate(0,0);
		}
		&.fade-up {
			transform: translate(0,0);
		}
	}
}



@media (max-width: 768px) {
	
	.animation {
		&.fade-left {
			transform: translateX(-50px);
		}
		&.fade-right {
			transform: translateX(50px);
		}
		&.fade-up {
			transform: translateY(50px);
		}
	}
	
}