@charset "utf-8";

/*==================================================

▼ layout.css

==================================================*/
.d-flex {
	display: flex;
}

.justify-content-start {
	justify-content: flex-start;
}

.justify-content-end {
	justify-content: flex-end;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-between {
	justify-content: space-between;
}

.justify-content-around {
	justify-content: space-around;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

.flex-row {
	flex-direction: row;
}

.flex-col {
	flex-direction: column;
}

@media screen and (min-width: 768px) {
	.d-pc-flex {
		display: flex;
	}

	.justify-content-pc-start {
		justify-content: flex-start;
	}

	.justify-content-pc-end {
		justify-content: flex-end;
	}

	.justify-content-pc-center {
		justify-content: center;
	}

	.justify-content-pc-between {
		justify-content: space-evenly;
	}

	.justify-content-pc-around {
		justify-content: space-around;
	}

	.flex-pc-wrap {
		flex-wrap: wrap;
	}

	.flex-pc-nowrap {
		flex-wrap: nowrap;
	}

	.flex-pc-wrap-reverse {
		flex-wrap: wrap-reverse;
	}

	.flex-pc-row {
		flex-direction: row;
	}

	.flex-pc-col {
		flex-direction: column;
	}
}


/* 基本
==================================================================*/
body {
	margin: 0 auto;
	font: 13px/1.231 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	/* for IE6/7 */
	*font-size: small;
	/* for IE Quirks Mode */
	*font: x-small;
	color: #333;
	line-height: 1.7;
}

#wrap {
	/*	width:960px;*/
	width: 100%;
	margin: 0 auto;
	padding: 0 0 30px 0;
	text-align: center;
}

a:hover img {
	filter: brightness(106%) contrast(103%) opacity(88%);
	/*
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
*/

}

h2 {
	position: absolute;
}

.pc {
	display: block;
}

.sp {
	display: none;
}


/* inner
==================================================================*/
#wasadoreHeaderInner {
	position: relative;
	width: 760px;
	margin: 0 auto;
}

/* kv
==================================================================*/
#wasadre_kv {
	position: relative;
}

#wasadre_kv img {
	width: 100%;
}

.kv_ttl {
	width: 528px;
	position: absolute;
	top: 17px;
	left: 135px;
}


/* content
==================================================================*/
#wasadre_cont {
	background: url("../img/wasabidressing/base.jpg") repeat-y;
	margin-top: -600px;
}

/* sec01
==================================================================*/
.sec01 {
	position: relative;
	margin-top: -46px;
	height: 490px;
}

.sec01::before {
	content: "";
	position: absolute;
	background: url("../img/wasabidressing/leaf1.png") no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	width: 370px;
	height: 480px;
	top: 455px;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.sec01::after {
	content: "";
	position: absolute;
	background: url("../img/wasabidressing/wasabi1.png") no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	width: 416px;
	height: 250px;
	top: 374px;
	right: 18px;
	z-index: 1;
	pointer-events: none;
}

.sec01 h2 {
	top: 210px;
	right: 62px;
}

.sec01 h2 img {
	width: 440px;
}

.bottle {
	position: relative;
	width: 143px;
	margin-left: 96px;
	padding-top: 65px;
}

.bottle a img {
	width: 168px;
}

.mutenka {
	width: 98px;
	position: absolute;
	top: 60px;
	left: 114px;
	z-index: -1;
}

.btn {
	position: relative;
	width: 100%;
	height: 100%;
	left: -70px;
	bottom: 128px;
	z-index: 2;
}

.btn img {
	width: 100px;
}

.fadeUp {
	animation-name: fadeUpAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(100px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeUpTrigger {
	opacity: 0;
}


/* sec02
==================================================================*/
.sec02 {
	background: url("../img/wasabidressing/green.png");
	-webkit-background-size: cover;
	background-size: cover;
	height: 2050px;
	position: relative;
}

.sec02::after {
	content: "";
	position: absolute;
	background: url("../img/wasabidressing/2505wasadre2.png") no-repeat;
	background-size: contain;
	width: 370px;
	height: 577px;
	top: 1700px;
	right: 0;
}

.sec02 h2 {
	top: 94px;
	right: 32px;
}

.sec02 h2 img {
	width: 432px;
}

.sec02 ul {
	flex-direction: row-reverse;
	position: relative;
}

.sec02 ul li {
	position: absolute;
}

.dish01 {
	top: 300px;
}

.dish01 img {
	width: 405px;
}

.dish02 {
	top: 386px;
	left: 0;
}

.dish02 img {
	width: 379px;
}

.dish03 {
	top: 827px;
}

.dish03 img {
	width: 365px;
}

.dish04 {
	top: 932px;
	left: 20px;
}

.dish04 img {
	width: 400px;
}

.dish05 {
	top: 1292px;
}

.dish05 img {
	width: 352px;
}

.dish06 {
	top: 1520px;
	left: 0;
}

.dish06 img {
	width: 480px;
}

.img01 {
	position: absolute;
	top: 790px;
	left: 0;
}

.img01 img {
	width: 270px;
}

.img02 {
	position: absolute;
	top: 1266px;
	left: 23px;
}

.img02 img {
	width: 390px;
}

.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.fadeInTrigger {
	opacity: 0;
}


/* sec03
==================================================================*/
.sec03 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 54px 20px 50px;
}

.sec03 h2 {
	left: 44px;
}

.sec03 h2 img {
	width: 602px;
}

.lineup {
	margin: 0 auto;
	padding-top: 156px;
}

.sec03 ul {
	display: flex;
	gap: 16px;
}

.lineup01 {
	width: 680px;
	justify-content: center;
	margin-bottom: 60px;
}

.lineup_bottle {
	width: 102px;
}

.lineup01 li {
	width: 148px;
	/* margin: 0 16px; */
}

.lineup01 li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 405px;
}

.lineup02 li,
.lineup03 li {
	width: 148px;
	margin: 0;
}

.limited {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lineup03 {
	width: fit-content;
	margin-bottom: 14px;
	justify-content: center;
}

.lineup_txt {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
}

.lineup_btn {
	width: 102px;
	margin-top: 16px;
}

.lineup02_txt,
.lineup03_txt {
	margin-top: 18px;
}

.lineup02_txt {
	height: 98px;
}

.lineup03_txt {
	height: 56px;
}

/*==================================================

▼ 767px以下

==================================================*/
@media screen and (max-width: 767px) {


	/* 基本
==================================================================*/
	body {
		margin: 0 auto;
		font: 13px/1.231 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
		/* for IE6/7 */
		*font-size: small;
		/* for IE Quirks Mode */
		*font: x-small;
		color: #333;
		line-height: 1.7;
	}

	#wrap {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	img {
		max-width: 100%;
	}


	/* inner
==================================================================*/
	#wasadoreHeaderInner {
		width: 100%;
	}

	/* kv
==================================================================*/
	.kv_ttl {
		width: 84vw;
		top: 6.7vw;
		left: 8vw;
	}

	/* content
==================================================================*/
	#wasadre_cont {
		margin-top: -174vw;
	}

	/* sec01
==================================================================*/
	.sec01 {
		margin-top: -6.4vw;
		padding: 0 6.4vw 5.6vw;
		height: 184vw;
	}

	.sec01::before {
		background: url("../img/wasabidressing/leaf1_sp.png") no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		width: 34.7vw;
		height: 66.4vw;
		top: 140.8vw;
	}

	.sec01::after {
		background: url("../img/wasabidressing/wasabi1_sp.png") no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		width: 44vw;
		height: 42.7vw;
		top: 160vw;
		right: 0;
	}

	.sec01 h2 {
		width: 87.2vw;
		top: 42vw;
		right: 0;
	}

	.sec01 h2 img {
		width: 100%;
	}

	.bottle {
		width: 44.8vw;
		margin-left: 24vw;
		padding-top: 86.4vw;
	}

	.bottle a img {
		width: 34.7vw;
	}

	.mutenka {
		width: 29.07vw;
		top: 98.14vw;
		left: 31.2vw;
	}

	.btn {
		left: 0vw;
		bottom: 2.8vw;
	}

	.btn img {
		width: 28.8vw;
	}

	/* sec02
==================================================================*/
	.sec02 {
		height: 478vw;
	}

	.sec02::after {
		background: url("../img/wasabidressing/leaf2_sp.png") no-repeat;
		-webkit-background-size: cover;
		background-size: cover;
		width: 35.5vw;
		height: 38.4vw;
		top: 455.2vw;
		right: 0;
	}

	.sec02 h2 {
		top: 13.87vw;
		right: 6.4vw;
		left: 6.4vw;
	}

	.sec02 h2 img {
		width: 100%;
	}

	.sec02 ul {
		flex-direction: column;
	}

	.dish01 img,
	.dish02 img,
	.dish03 img,
	.dish04 img,
	.dish05 img,
	.dish06 img {
		width: 100%;
	}

	.dish01 {
		top: 59.74vw;
		right: 0;
		width: 74.14vw;
	}

	.dish02 {
		top: 129.34vw;
		width: 73.87vw;
	}

	.dish03 {
		top: 198.94vw;
		right: 0;
		width: 69.87vw;
	}

	.dish04 {
		top: 261.34vw;
		left: 0;
		width: 74.67vw;
	}

	.dish05 {
		top: 330.7vw;
		right: 0;
		width: 71.74vw;
	}

	.dish06 {
		top: 397.87vw;
		left: 0.26vw;
		width: 79.47vw;
	}

	.img03 {
		position: absolute;
		top: 63.47vw;
		left: 0;
		width: 37.07vw;
	}

	.img04 {
		position: absolute;
		top: 150.4vw;
		right: 0;
		width: 40.54vw;
	}

	.img05 {
		position: absolute;
		top: 281.87vw;
		right: 0;
		width: 35.2vw;
	}

	.img06 {
		position: absolute;
		top: 345.07vw;
		left: 0;
		width: 43.47vw;
	}

	/* sec03
==================================================================*/
	.sec03 {
		padding: 9.07vw 6.4vw 10.67vw;
	}

	.sec03 h2 {
		left: 0.5333vw;
		right: 6.4vw;
	}

	.sec03 ul {
		gap: 8.6vw 0;
	}

	.sec03 h2 img {
		width: 100%;
	}

	.lineup {
		padding-top: 27.8vw;
	}

	.lineup01 li,
	.lineup02 li,
	.lineup03 li {
		width: 30.9vw;
	}

	.lineup01 li a {
		height: auto;
	}

	.lineup01 li a.h-355 {
		height: 94.66vw;
	}

	.lineup01 li a.h-363 {
		height: 96.8vw;
	}

	.lineup_bottle {
		width: 24vw;
	}

	.lineup_txt {
		font-size: 3.4vw;
	}

	.lineup_btn {
		width: 28vw;
		margin-top: 4vw;
	}

	.lineup01 {
		width: 100%;
		flex-wrap: wrap;
		margin-bottom: 5.54vw;
	}

	.lineup01 li,
	.lineup02 li {
		margin: 0 6vw;
	}

	.lineup01 li:first-child {
		margin: 0 27vw;
	}

	.lineup02 {
		justify-content: center;
	}

	.lineup02 li:first-child {
		margin: 0 6vw;
	}

	.limited {
		margin-top: 14.94vw;
		position: relative;
	}

	.limited::before {
		content: "";
		position: absolute;
		background-color: #006e36;
		width: 71.47vw;
		height: 2px;
		top: -7vw;
		left: 8vw;
	}

	.lineup03 {
		width: 100%;
		margin-bottom: 4.3vw;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.lineup02_txt,
	.lineup03_txt {
		margin-top: 0;
	}

	.lineup02_txt {
		height: 18vw;
	}

	.lineup03_txt {
		height: 12vw;
	}

	/*==================================================*/
}

/* @media 767px以下　end */
/*==================================================

▲ 767px以下　ここまで

==================================================*/