/* 共通 */
html {
	scroll-behavior: smooth;
}

body {
	font-family: "Figtree", "Noto Sans JP", sans-serif;
	overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	letter-spacing: 0.15em;
}

h1 {
	font-size: 22px;
}

h2 {
	font-size: 22px;
}

h3 {
	font-size: 20px;
}

p {
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.1em;
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
	color: #fff;
	
	@media screen and (max-width:840px) {
		display: block;
	}
	
	li {
		font-size: 14px;
		letter-spacing: 0.15em;
		
		@media screen and (max-width:840px) {
			margin: 0 0 12px;
		}
	}
}

.l-container {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.heading-main {
	letter-spacing: 0.15em;
}

br.pc {
	display: block;
	
	@media screen and (max-width:600px) {
		display: none;
	}
}

br.sp {
	display: none;
	
	@media screen and (max-width:600px) {
		display: block;
	}
}

.btn-main {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	letter-spacing: 0.15em;
	padding: 1em 1.3em;
	border: solid 1px #1D5995;
	color: #1D5995;
	transition: all 0.3s;
	
	@media screen and (max-width:600px) {
		padding: 1.4em;
	}
	
	&:after {
		content: "";
		display: inline-block;
		width: 40px;
		height: 5px;
		background: no-repeat center/contain url(../img/arrow.svg);
	}
	
	&:hover {
		background: #1D5995;
		color: #fff;
		
		&:after {
			filter: brightness(0) invert(1);
		}
	}
	
	&.wh {
		background: #fff;
		color: #1D5995;
		border: none;
		padding: 1.4em 1.5em;
		
		&:hover {
			background: #1D5995;
			color: #fff;
		}
	}
}

.sns-instagram {
	width: 18px;
	height: 18px;
}

.slick-list,
.slick-track {
	height: 100%;
	
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.slick-dots {
	bottom: 4px;
	
	li {
		margin: 0;
		
		button {
			
			&:before {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.8);
			}
		}
		
		&.slick-active {
			button {
				&:before {
					background: rgba(255, 255, 255, 1);
				}
			}
		}
	}
}


/* header */
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 200;
	
	.inner {
		//display: flex;
		//justify-content: space-between;
		padding: 36px 20px;
		
		@media screen and (max-width:600px) {
			padding: 20px;
		}
		
		.header-logo {
			position: fixed;
			max-width: 260px;
			width: 30%;
			height: auto;
			display: inline-block;
			
			@media screen and (max-width:600px) {
				width: 160px;
			}
			
			img {
				width: 100%;
				height: auto;
			}
		}
	}
	
	.nav-pc {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 32px;
		
		@media screen and (max-width:840px) {
			display: none;
		}
	}
	
	.hum-menu {
		display: none; 
		position: absolute;
		top: 40px;
		right: 40px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		background: no-repeat center/contain url(../img/sp-menu.svg);
		z-index: 100;
		
		@media screen and (max-width:840px) {
			display: block;
		}
		
		@media screen and (max-width:600px) {
			top: 28px;
			right: 20px;
			width: 36px;
			height: 36px;
		}
		
		&.close {
			background: no-repeat center/contain url(../img/sp-menu-close.svg);
		}
	}
	
	.nav-sp {
		display: none;
		max-width: 500px;
		width: 100%;
		height: 100dvh;
		padding: 80px 40px;
		position: fixed;
		top: -36px;
		right: -20px;
		background: #1D5995;
		
		@media screen and (max-width:600px) {
			max-width: 100%;
			width: 100vw;
			top: 0;
			right: 0;
		}
		
		@media screen and (max-width:600px) {
			padding: 100px 40px;
		}
		
		.logo-wrp {
			
			.logo-mark {
				display: block;
				max-width: 160px;
				width: 60%;
				margin: 0 auto 40px;
				
				@media screen and (max-width:600px) {
					width: 88px;
					margin: 0 auto 22px;
				}
			}
			
			.logo-text {
				display: block;
				max-width: 200px;
				width: 80%;
				margin: 0 auto;
				
				@media screen and (max-width:600px) {
					width: 180px;
				}
			}
		}
		
		nav {
			margin: 40px auto 0;
			text-align: center;
			
			@media screen and (max-width:600px) {
				margin: 56px auto 0;
			}
			
			ul {
				
				li {
					font-size: 16px;
					margin: 0 0 1em;
					
					@media screen and (max-width:600px) {
						margin: 0 0 1.5em;
					}
				}
			}
		}
		
		.copyright {
			font-size: 12px;
			font-weight: 100;
			letter-spacing: 0.15em;
			color: #fff;
			text-align: center;
			margin: 80px 0 0;
			
			@media screen and (max-width:600px) {
				font-size: 10px;
				margin: 120px 0 0;
			}
		}
	}
}

/* footer */
footer {
	padding: 80px 0 40px;
	background: no-repeat center/cover url(../img/footer-cover.jpg);
	
	@media screen and (max-width:600px) {
		padding: 40px 0 24px;	
	}
	
	.footer-upper {
		display: flex;
		justify-content: space-between;
		margin: 0 0 256px;
		
		@media screen and (max-width:840px) {
			margin: 0 0 40px;
		}
		
		.footer-logo {
			display: block;
			max-width: 348px;
			width: 50%;
			height: auto;
			object-fit: contain;
			
			img {
				width: 100%;
				height: auto;
			}
		}
		
		.page-top {
			display: flex;
			flex-wrap: wrap;
			align-items: end;
			gap: 12px;
			
			@media screen and (max-width:600px) {
				justify-content: end;
				gap: 8px;
			}
			
			p {
				color: #fff;
				font-size: 13px;
				line-height: 1;
				letter-spacing: 0.15em;
				
				@media screen and (max-width:600px) {
					order: 2;	
					width: 100%;
					text-align: right;
					font-size: 10px;
				}
			}
			
			&:after {
				content: "";
				display: inline-block;
				width: 6px;
				height: 25px;
				background: no-repeat center/contain url(../img/arrow-wh.svg);
				
				@media screen and (max-width:600px) {
					order: 1;	
				}
			}
		}
	}
	
	.footer-lower {
		display: flex;
		align-items: end;
		justify-content: space-between;
		
		@media screen and (max-width:600px) {
			display: block;	
		}
		
		.nav-list {
			color: #fff;
			
			@media screen and (max-width:840px) {
				margin: 0 0 120px;
			}
			
			@media screen and (max-width:600px) {
				margin: 0 0 190px;
			}
		}
		
		.copyright {
			font-size: 11px;
			font-weight: 200;
			letter-spacing: 0.15em;
			color: #fff;
			
			@media screen and (max-width:600px) {
				text-align: right;
				font-size: 10px;	
			}
		}
	}
}

/* スクロール */
.scroll {
	position: absolute;
	left: 50%;
	bottom: 50px;
	transform: translateX(-50%);
	
	span {
		font-size: 13px;
		font-weight: 100;
		letter-spacing: 0.15em;
		color: #fff;
	}
}
.scroll::before {
	animation: scroll 4s infinite;
	background-color: #fff;
	bottom: -50px;
	content: "";
	height: 40px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	width: 1px;
}

@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	51% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}


/* top */
.top-mv {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	max-height: 800px;
	
	.top-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 180px;
		height: auto;
		z-index: 100;
		
		@media screen and (max-width:600px) {
			width: 135px;
		}
	}
	
	.top-slide {
		width: 100%;
		height: 100%;
	}
}

.top-about {
	position: relative;
	margin: 140px 0;
	
	@media screen and (max-width:600px) {
		margin: 48px 0 90px;	
	}
	
	.inner {
		width: fit-content;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "a b e" "a c e" "a d e";
			
		@media screen and (max-width:840px) {
			grid-template-columns: 1fr;
			grid-template-areas: "b" "a" "c" "e" "d";
			padding: 0 20px;
		}
	}
	
	.container-a {
		grid-area: a;
		margin: 0 0 0 -40px;
		max-width: 420px;
		width: 30vw;
		
		@media screen and (max-width:840px) {
			margin: 0 0 80px -40px;
			width: 40vw;
		}
		
		@media screen and (max-width:600px) {
			margin: 0 0 54px -20px;
			width: 70%;
		}
	}
	
	.container-b {
		grid-area: b;
		width: fit-content;
		white-space: nowrap;
		margin: 0 0 40px;
		
		.top-about-message {
			line-height: 1.7;
			
			@media screen and (max-width:600px) {
				margin: 0 0 40px;	
			}
		}
	}
	
	.container-c {
		grid-area: c;
		width: fit-content;
		white-space: nowrap;
		margin: 0 0 80px;
		
		@media screen and (max-width:600px) {
			width: auto;
			white-space: normal;
			margin: 0 0 40px;
		}
	}
	
	.container-d {
		grid-area: d;
		width: fit-content;
		white-space: nowrap;
	}
	
	.container-e {
		grid-area: e;
		margin: auto 0 0;
		max-width: 460px;
		width: 30vw;
		
		@media screen and (max-width:840px) {
			margin: 0 0 80px auto;
			width: 50vw;
		}
		
		@media screen and (max-width:600px) {
			margin: 0 -20px 54px auto;
			width: 70vw;
		}
	}
	
	h2 {
		margin: 0 0 3.2em;
	}
	
	p {
		margin: 0 0 2em;
		line-height: 3.2;
		
		@media screen and (max-width:600px) {
			line-height: 2;
		}
	}
	
	.btn-main {
		margin: 80px 0 0;
		
		@media screen and (max-width:600px) {
			margin: 24px 0 0;	
		}
	}
	
	.about-image1 {
		height: auto;
		aspect-ratio: 3/4;
		object-fit: cover;
	}
	
	.about-image2 {
		height: auto;
		aspect-ratio: 4/3;
		object-fit: cover;
	}
}

.top-flavor {
	padding: 80px 0 67px;
	background: #FAFAF5;
	overflow: hidden;
	
	h2 {
		text-align: center;
		margin: 0 0 56px;
		
		@media screen and (max-width:840px) {
			text-align: left;
		}
		
		@media screen and (max-width:600px) {
			margin: 0 0 24px;
		}
	}
	
	.top-flavor-list {
		position: relative;
		display: flex;
		gap: 32px;
		justify-content: space-between;
		
		@media screen and (max-width:840px) {
			width: calc(100% + 20px);
		}
		
		.flavor-item {
			flex: 1;
			
			@media screen and (max-width:840px) {
				padding: 0 15px 0 0;
			}
			
			.flavor-image {
				position: relative;
				margin: 0 0 20px;
				
				.hover-img {
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
					z-index: 1;
					transition: opacity 0.5s;
				}
				
				&:hover {
					.hover-img {
						opacity: 1;
					}
				}
				
				img {
					width: 100%;
					height: auto;
					aspect-ratio: 1/1;
					object-fit: cover;
				}
			}
			
			h3 {
				font-size: 16px;
				margin: 0 0 0.5em;
			}
			
			p {
				font-size: 12px;
				font-weight: 300;
				
				@media screen and (max-width:600px) {
					font-size: 10px;
				}
			}
		}
		
		.slick-arrow {
			width: 32px;
			height: 32px;
			background: no-repeat center/contain url(../img/slick-arrow.svg);
			text-indent: -9999px;
			
			@media screen and (max-width:600px) {
				width: 10px;
				height: 20px;
			}
		}
		
		.slick-prev {
			position: absolute;
			top: -60px;
			right: 60px;
			left: auto;
			
			@media screen and (max-width:600px) {
				top: -40px;
			}
		}
		
		.slick-next {
			position: absolute;
			top: -76px;
			right: 0;
			left: auto;
			transform: scaleX(-1);
			
			@media screen and (max-width:600px) {
				top: -50px;
				right: 20px;
			}
		}
	}
}

.top-shopping {
	position: relative;
	margin: 108px 0 96px;
	
	@media screen and (max-width:600px) {
		margin: 51px 0 56px;
	}
	
	.shopping-container {
		display: flex;
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
		padding: 0 20px;
		
		@media screen and (max-width:840px) {
			display: block;
			padding: 0 40px 160px;
		}
		
		@media screen and (max-width:600px) {
			padding: 0 20px 120px;	
		}
		
		h2 {
			margin: 0 0 37px;
		}
		
		p {
			line-height: 2;
		}
		
		.shopping-btn {
			margin: 60px 0 0;
			
			@media screen and (max-width:840px) {
				position: absolute;
				left: 20px;
				bottom: 0;
			}
			
			a {
				display: inline-flex;
				align-items: center;
				background: #1D5995;
				border: solid 1px #1D5995;
				padding: 30px 50px 30px 40px;
				color: #fff;
				box-sizing: border-box;
				
				@media screen and (max-width:600px) {
					padding: 20px 27px;
				}
				
				&:hover {
					transition: all 0.3s;
					color: #1D5995;
					background: #fff;
					
					
					&:before {
						background: no-repeat center/contain url(../img/icon-shopping-bl.svg);
					}
					
					&:after {
						background: no-repeat center/contain url(../img/arrow.svg);
					}
				}
				
				p {
					line-height: 1.5;
					font-size: 13px;
					
					@media screen and (max-width:600px) {
						font-size: 10px;
					}
				}
				
				span {
					display: block;
					font-size: 1.5em;
					letter-spacing: 0.15em;
				}
				
				&:before {
					content: "";
					display: inline-block;
					width: 2em;
					height: 2em;
					margin: 0 1em 0 0;
					background: no-repeat center/contain url(../img/icon-shopping.svg);
				}
				
				&:after {
					content: "";
					display: inline-block;
					width: 2.5em;
					height: 1em;
					margin: 0 0 0 1em;
					background: no-repeat center/contain url(../img/arrow-wh2.svg);
				}
			}
		}
		
		.text-box {
			flex-basis: 50%;
			flex-shrink: 0;
		}
		
		.img-box {
			position: relative;
			width: 67%;
			margin: 0 0 0 -17%;
			z-index: -1;
			
			@media screen and (max-width:840px) {
				margin: 40px 0 0 auto;
			}
			
			@media screen and (max-width:600px) {
				width: 80%;
				margin: 26px -20px 0 auto;
			}
			
			img {
				width: 100%;
				height: 90%;
				object-fit: cover;
			}
		}
	}
}

.landscape {
	width: 100%;
	height: 35vw;
	max-height: 540px;
	min-height: 140px;
	object-fit: cover;
	object-position: bottom;
}

.top-howto {
	padding: 80px 0;
	
	h2 {
		text-align: center;
		margin: 0 0 72px;
	}
	
	.top-step-list {
		display: flex;
		gap: 32px;
		justify-content: space-between;
		padding: 0 32px;
		
		@media screen and (max-width:840px) {
			display: block;
			max-width: 520px;
			width: 80%;
			margin: 0 auto;
		}
		
		@media screen and (max-width:600px) {
			width: 90%;	
		}
		
		.step-item {
			position: relative;
			flex: 1;
			padding: 0 32px;
			
			@media screen and (max-width:840px) {
				margin: 0 0 80px;
			}
			
			@media screen and (max-width:600px) {
				padding: 0;	
			}
			
			&:after {
				content: "";
				position: absolute;
				top: 50%;
				right: -32px;
				display: block;
				width: 32px;
				height: 6px;
				background: no-repeat center/contain url(../img/arrow.svg);
				
				@media screen and (max-width:840px) {
					transform: rotate(90deg);
					top: auto;
					bottom: -40px;
					right: 50%;
				}
			}
			
			&:last-child {
				&:after {
					content: none;
				}
			}
			
			.step-heading {
				font-size: 16px;
				font-weight: 300;
				color: #1D5995;
				margin: 0 0 12px;
			}
			
			.step-image {
				display: block;
				width: 195px;
				height: auto;
				aspect-ratio: 1/1;
				object-fit: contain;
				margin: 0 auto 14px;
			}
			
			p {
				font-size: 13px;
				line-height: 1.6;
				
				@media screen and (max-width:600px) {
					font-size: 12px;
					line-height: 1.8;	
				}
			}
		}
	}
}


/* about */
.about-header {
	
	.cover {
		text-align: center;
		padding: 240px 0 150px;
		background: linear-gradient(rgba(29,89,149,0.2), rgba(29,89,149,0.2)), no-repeat center/cover url(../img/about-cover.jpg);
		
		@media screen and (max-width:600px) {
			padding: 195px 0 178px;
		}
		
		.main-heading {
			display: inline-block;
			text-align: center;
			color: #fff;
			font-size: 36px;
			font-weight: 300;
			letter-spacing: 0.2em;
			line-height: 1;
			margin: 0 0 12px;
			
			@media screen and (max-width:600px) {
				font-size: 28px;
			}
			
			&:after {
				content: "";
				display: block;
				width: 30%;
				height: 1px;
				border-top: solid 1px #fff;
				margin: 16px auto 0;
			}
		}
		
		.sub-heading {
			font-size: 16px;
			letter-spacing: 0.1em;
			color: #fff;
			
			@media screen and (max-width:600px) {
				font-size: 13px;
			}
		}
	}
	
	.message {
		margin: 48px 0 0;
		padding: 0 20px;
		text-align: center;
		
		h2 {
			font-size: 28px;
			font-weight: 300;
			color: #1D5995;
			margin: 0 0 53px;
			
			@media screen and (max-width:600px) {
				font-size: 22px;
				line-height: 1.7;
				margin: 0 0 46px;	
			}
		}
		
		p {
			font-size: 16px;
			line-height: 2.1;
			
			@media screen and (max-width:600px) {
				font-size: 14px;	
			}
		}
	}
}

.about-features {
	margin: 153px 0 0;
	
	@media screen and (max-width:600px) {
		margin: 80px 0 0;	
	}
	
	.features-item {
		display: flex;
		justify-content: space-between;
		
		@media screen and (max-width:840px) {
			display: block;
			max-width: 600px;
			width: 100%;
			margin: 0 auto;
		}
		
		.features-heading {
			display: inline-block;
			font-weight: 500;
			font-size: 14px;
			color: #1D5995;
			border-bottom: solid 1px #1D5995;
			margin: 0 0 53px;
			
			@media screen and (max-width:600px) {
				font-size: 11px;
				margin: 0 0 32px;	
			}
		}
		
		h3 {
			width: fit-content;
			margin: 0 0 50px;
			line-height: 1.7;
		}
		
		p {
			width: fit-content;
			margin: 0 0 40px;
			line-height: 2.8;
			
			@media screen and (max-width:600px) {
				font-size: 13px;
				line-height: 2;
				margin: 0 0 24px;	
			}
		}
		
		img {
			position: relative;
			display: block;
			height: auto;
			object-fit: cover;
		}
		
		.text-box {
			white-space: nowrap;
			flex-grow: 0;
			flex-shrink: 0;
			min-width: fit-content;
			
			@media screen and (max-width:600px) {
				white-space: normal;
				min-width: auto;	
			}
		}
		
		.img-box {
			flex-grow: 0;
			flex-shrink: 1;
			min-width: 0;
		}
		
		&.item01 {
			//width: 90%;
			margin: 0 auto 88px;
			
			@media screen and (max-width:600px) {
				margin: 0 auto 135px;	
			}
			
			.img-box {
				flex-basis: 40%;
				
				@media screen and (max-width:840px) {
					max-width: 600px;
					margin: 0 0 0 -20px;
				}
				
				img:nth-child(1) {
					width: 85%;
					aspect-ratio: 4/3;
					z-index: 2;
				}
				
				img:nth-child(2) {
					width: 50%;
					aspect-ratio: 4/3;
					margin: -40px 0 0 auto;
					z-index: 1;
				}
			}
			
			.text-box {
				flex-basis: 50%;
				
				@media screen and (max-width:600px) {
					margin: 60px 0 0;	
				}
				
				img {
					max-width: 360px;
					width: 70%;
					aspect-ratio: 4/3;
					margin: 20% 0 0 auto;
					
					@media screen and (max-width:600px) {
						margin: 60px -20px 0 auto;	
					}
				}
			}
		}
		
		&.item02 {
			max-width: 1100px;
			margin: 0 0 155px auto;
			
			@media screen and (max-width:840px) {
				max-width: 600px;
				margin: 0 auto 155px;
			}
			
			@media screen and (max-width:600px) {
				margin: 0 auto 135px;	
			}
			
			.text-box {
				flex-basis: 40%;
			}
			
			.img-box {
				flex-basis: 50%;
				
				img:nth-child(1) {
					width: 85%;
					aspect-ratio: 4/3;
					margin: 30% 0 0 auto;
					
					@media screen and (max-width:600px) {
						margin: 56px 0 0 auto;	
					}
				}
				
				img:nth-child(2) {
					width: 45%;
					aspect-ratio: 3/2;
					margin: -5vw 0 0 -50%;
					z-index: -1;
					
					@media screen and (max-width:840px) {
						margin: 40px 0 0 -20px;
					}
					
					@media screen and (max-width:600px) {
						width: 60%;	
					}
				}
			}
		}
		
		&.item03 {
			position: relative;
			margin: 0 auto 88px;
			justify-content: start;
			
			@media screen and (max-width:840px) {
			}
			
			.img-box {
				width: 40%;
				order: 1;
				
				@media screen and (max-width:840px) {
					width: 100%;
				}
				
				img:nth-child(1) {
					width: 80%;
					aspect-ratio: 3/4;
					margin: 80px 0 0;
					
					@media screen and (max-width:840px) {
						max-width: 400px;
						margin: 80px 0 0 -20px;
					}
				}
				
				img:nth-child(2) {
					position: absolute;
					top: -10%;
					right: 0;
					width: 15%;
					aspect-ratio: 3/4;
					margin: -40px 0 0 auto;
					z-index: 1;
					
					@media screen and (max-width:840px) {
						position: relative;
						width: 40%;
					}
					
					@media screen and (max-width:600px) {
						width: 55%;
					}
				}
			}
			
			.text-box {
				width: 40%;
				order: 2;
				
				@media screen and (max-width:840px) {
					width: 100%;
				}
				
				img {
					width: 70%;
					aspect-ratio: 4/3;
					margin: 120px 0 0 auto;
				}
			}
		}
	}
	
	.statement {
		width: 95%;
		display: flex;
		align-items: end;
		justify-content: space-between;
		margin: 0;
		
		@media screen and (max-width:840px) {
			display: block;
			max-width: 600px;
			width: 100%;
			margin: 0 auto;
		}
		
		.message {
			width: 60%;
			font-size: 12px;
			line-height: 2.5;
			letter-spacing: 0.15em;
			color: #1D5995;
			
			@media screen and (max-width:840px) {
				width: 100%;
			}
			
			@media screen and (max-width:600px) {
				margin: 0 0 40px;
				font-size: 11px;
				line-height: 2.2;
			}
		}
		
		img {
			display: block;
			width: 25%;
			aspect-ratio: 3/4;
			margin: -10% 0 0;
			
			@media screen and (max-width:840px) {
				width: 40%;
				margin: 80px -20px 0 auto;
			}
			
			@media screen and (max-width:600px) {
				width: 70%;
				margin: 40px -20px 0 auto;
			}
		}
	}
}

.about-hiramine {
	margin: 136px auto 102px;
	
	@media screen and (max-width:600px) {
		margin: 100px auto;
	}
	
	.inner {
		padding: 136px 20px 110px;
		background: linear-gradient(rgba(29,89,149,0.2), rgba(29,89,149,0.2)), no-repeat center/cover url(../img/about-hiramine-cover.jpg);
		text-align: center;
		color: #fff;
		
		p {
			font-size: 15px;
			line-height: 2;
			margin: 0 0 40px;
			
			@media screen and (max-width:600px) {
				font-size: 12px;
			}
		}
	}
}

/* modal */
.modal-open {
	
	&:hover {
		cursor: pointer;
	}
}

.modal {
	display: none;
	height: 100svh;
	position: fixed;
	top: 0;
	width: 100%;
	background: rgba(0,0,0,0.4);
	z-index: 200;
}

.modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 840px;
	width: 80%;
	//height: 80%;
	background: #FAFAF5;
	
	@media screen and (max-width:840px) {
		height: 80%;
	}
	
	@media screen and (max-width:600px) {
		width: 90%;
		height: 95svh;
	}
}

.modal-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 35px;
	height: 35px;
	background: no-repeat center/contain url(../img/modal-close.svg);
	z-index: 10;
	
	&:hover {
		cursor: pointer;
	}
}

.flavor-modal {
	
	.flavor-modal-slide {
		opacity: 0;
		
		&.slick-initialized {
			opacity: 1;
			transition: all 0.2s;
		}
	}
	
	.inner {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		padding: 40px;
		
		@media screen and (max-width:840px) {
			display: block;
			height: 95%;
			overflow-y: scroll;
		}
		
		@media screen and (max-width:600px) {
			padding: 40px 20px;
		}
		
		.img-box {
			width: 45%;
			aspect-ratio: 4/5;
			min-height: 100%;
			overflow: hidden;
			margin: 0;
			
			@media screen and (max-width:840px) {
				aspect-ratio: 4/3;
				width: 100%;
				min-height: auto;
				margin: 0 0 40px;
			}
			
			@media screen and (max-width:600px) {
				aspect-ratio: 1/1;
				margin: 0 0 24px;
			}
		}
		
		.text-box {
			width: 50%;
			
			@media screen and (max-width:840px) {
				width: 100%;
			}
			
			.name {
				color: #1D5995;
				margin: 0 0 12px;
				
				@media screen and (max-width:600px) {
					font-size: 18px;
				}
				
				span {
					font-size: 0.6em;
					margin: 0 0 0 10px;
				}
			}
			
			.taste{
				color: #1D5995;
				font-size: 12px;
				font-weight: 300;
				margin: 0 0 38px;
				
				@media screen and (max-width:600px) {
					margin: 0 0 32px;	
				}
			}
			
			.flavor-detail {
				
				.copy {
					margin: 0 0 24px;
					letter-spacing: 0.1em;
					line-height: 1.6;
					
					@media screen and (max-width:600px) {
						margin: 0 0 20px;
						font-size: 15px;
					}
				}
				
				.description {
					font-size: 13px;
					line-height: 1.7;
					letter-spacing: 0.1em;
					
					@media screen and (max-width:600px) {
						font-size: 12px;	
					}
				}
			}
			
			.flavor-contents {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 23px;
				margin: 32px 0 0;
				
				.item {
					width: 28%;
					text-align: center;
					
					img {
						display: block;
						width: 100%;
						height: 64px;
						object-fit: contain;
						margin: 0 auto 12px;
					}
					
					p {
						font-size: 11px;
						font-weight: 300;
						white-space: nowrap;
						
						@media screen and (max-width:600px) {
							font-size: 10px;
							white-space: normal;	
						}
					}
				}
			}
		}
	}
}