@charset "UTF-8";
/* -----------------------------------------
/natto/product/tare-tappuri/
----------------------------------------- */
/* 変数 */
:root {
	--color-tappuri-yellow: #FBCF00;
	--color-tappuri-red: #D92734;
}

/* ------------------------------------------------------------
オーバーライド
------------------------------------------------------------ */

/* h2 */
.cp-tare-tappuri-h2 {
	padding-bottom: 26px;
}
.cp-tare-tappuri-h2 .cp-heading-title {
	font-family: 'Zen Maru Gothic', sasn-serif;
	font-weight: 700;
	line-height: 1.6;
}

.cp-tare-tappuri-h2::after {
	width: 86px;
	height: 6px;
	background: var(--color-tappuri-yellow);
}

/* イメージセット */
.cp-imageset_title .large {
	font-size: 22px;
}
.cp-imageset a.cp-imageset_inner {
	color: inherit;
}
.cp-imageset a.cp-imageset_inner .inline {
	background-image: linear-gradient(to top, #333 4px, transparent 4px);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 10px;
  transition: background .3s ease-out;
  cursor: pointer;
}

.cp-imageset a.cp-imageset_inner:hover .inline {
	background-size: 100% 10px;
}

.cp-imageset a.cp-imageset_inner .cp-imageset_image {
	border-radius: 20px;
	overflow: hidden;
	transition: opacity .3s ease-out;
}

.cp-imageset a.cp-imageset_inner:hover .cp-imageset_image {
	opacity: .6;
}

/* ボタン */
.cp-tare-tappuri-button .cp-button_inner {
	background-color: #B98541;
	border-color: #B98541;
}

.cp-tare-tappuri-button .cp-button_inner:hover {
	background-color: #fff;
	color: #B98541;
}

.cp-tare-tappuri-button .cp-button_inner:hover::before {
	background-image: url(/natto/product/tare-tappuri/img/ico_arrow-brown.svg);
}

/* ------------------------------------------------------------
汎用
------------------------------------------------------------ */

/* 背景エリア */
.cp-tare-tappuri-bg {
	/* background: linear-gradient( to right, var(--color-tappuri-yellow) 50%, var(--color-tappuri-red) 50%); */
	background-color: #FBCF00;
}

/* 白地カード */
.cp-tare-tappuri-card {
	position: relative;
	background: #fff;
	border-radius: 20px;
}

/* たれ装飾 */
.cp-tare-tappuri-deco-yellow,
.cp-tare-tappuri-deco-yellow2,
.cp-tare-tappuri-deco-red {
	position: relative;
}
.cp-tare-tappuri-deco-yellow::before {
	position: absolute;
	top: 0;
	left: 60px;
	display: block;
	content: '';
	width: 220px;
	aspect-ratio: 220 / 117;
	background: url(/natto/product/tare-tappuri/img/deco_tare_yellow.svg) no-repeat 0 0 / contain;
}
.cp-tare-tappuri-deco-yellow2::before {
	position: absolute;
	top: 0;
	right: 20px;
	display: block;
	content: '';
	width: 220px;
	aspect-ratio: 220 / 117;
	background: url(/natto/product/tare-tappuri/img/deco_tare_yellow2.svg) no-repeat 0 0 / contain;
}
.cp-tare-tappuri-deco-red::before {
	position: absolute;
	top: 0;
	right: 20px;
	display: block;
	content: '';
	width: 220px;
	aspect-ratio: 220 / 117;
	background: url(/natto/product/tare-tappuri/img/deco_tare_red.svg) no-repeat 0 0 / contain;
}

@media (max-width: 767px) {
	.cp-tare-tappuri-deco-yellow::before {
		left: 10px;
		width: 120px;
	}
	.cp-tare-tappuri-deco-yellow2::before {
		right: 10px;
		width: 120px;
	}
	.cp-tare-tappuri-deco-red::before {
		right: 10px;
		width: 120px;
	}
}

/* 丸ゴ */
.cp-tare-tappuri-marugo {
	font-family: 'Zen Maru Gothic', sasn-serif;
	font-weight: 700;
}

/* ------------------------------------------------------------
MV
------------------------------------------------------------ */
.cp-tare-tappuri-mv {
	position: relative;
	background-image: linear-gradient(rgba(252, 120, 50, 1) 0%, rgba(217, 39, 52, 0) 100%);
}
@media (min-width: 960px) {
	.cp-tare-tappuri-mv {
		background-image: none;
	}
	.cp-tare-tappuri-mv::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		display: block;
		content: '';
		width: 50vw;
		background: linear-gradient( to bottom, rgba(252, 120, 50, 1) 0%, rgba(217, 39, 52, 0) 100% );
	}
}

/*
.cp-tare-tappuri-mv::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: block;
	content: '';
	width: 50vw;
	background: linear-gradient( to bottom, rgba(251, 207, 0, 1) 0%, rgba(251, 207, 0, 0) 100% );
}
*/

.cp-tare-tappuri-mv h1 {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin-inline: auto;
}

.cp-tare-tappuri-mv img {
	position: relative;
	z-index: 1;
	width: 100%;
}

.cp-tare-tappuri-mv .cp-tare-tappuri-mv-logo {
	position: absolute;
	z-index: 2;
	top: min(30px, calc(30/1440*100%));
	left: min(30px, calc(30/1440*100%));
	width: min(100px, calc(100/1440*100%));
}

@media screen and (max-width: 959px) {
	.cp-tare-tappuri-mv .cp-tare-tappuri-mv-logo {
		top: max(15px, calc(15/375*100%));
		left: max(15px, calc(15/375*100%));
		width: max(60px, calc(60/375*100%));
	}
}

/* ------------------------------------------------------------
イントロエリア
------------------------------------------------------------ */
.cp-tare-tappuri-intro {
	padding-top: 80px;
	padding-bottom: 150px;
}

.cp-tare-tappuri-intro .inner_container {
	padding-inline: 20px;
}

.cp-tare-tappuri-intro-card {
	position: relative;
	padding: 80px 15px 250px;
	margin-inline: auto;
	max-width: 980px;
}

.cp-tare-tappuri-intro-card-decos {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.cp-tare-tappuri-intro-card-decos .deco-item {
	position: absolute;
}

.cp-tare-tappuri-intro-card-decos .deco-item img {
	width: 100%;
}

.cp-tare-tappuri-intro-card-decos .deco1 {
	top: -380px;
	right: 50%;
	width: 223px;
	transform: translateX(max(-325px, calc(-325/1153*100vw)));
}

.cp-tare-tappuri-intro-card-decos .deco2 {
	right: 50%;
	bottom: -36px;
	width: 295px;
	transform: translateX(max(-20px, calc(-20/1153*100vw)));
}

.cp-tare-tappuri-intro-card-decos .deco3 {
	bottom: -38.6px;
	left: 50%;
	width: 245px;
	transform: translateX(min(52px, calc(52/1153*100vw)));
}

.cp-tare-tappuri-intro-card-decos .deco4 {
	bottom: 151px;
	left: 50%;
	width: 269px;
	transform: translateX(min(283px, calc(283/1153*100vw)));
}

.cp-tare-tappuri-intro-lead {
	color: #360808;
	font-size: 32px;
	line-height: 1.4;
	text-align: center;
}

@media (max-width: 767px) {
	.cp-tare-tappuri-intro {
		padding-top: 40px;
		padding-bottom: 130px;
	}

	.cp-tare-tappuri-intro-card {
		padding: 80px 15px;
	}

	.cp-tare-tappuri-intro-card-decos .deco1 {
		top: -351px;
		width: 117px;
		transform: translateX(-108px);
	}

	.cp-tare-tappuri-intro-card-decos .deco2 {
		bottom: -70px;
		width: 157px;
		transform: translateX(-9px);
	}

	.cp-tare-tappuri-intro-card-decos .deco3 {
		bottom: -63px;
		width: 129px;
		transform: translateX(15px);
	}

	.cp-tare-tappuri-intro-card-decos .deco4 {
		bottom: 209px;
		width: 141px;
		transform: translateX(91.8px);
	}

	.cp-tare-tappuri-intro-lead {
		font-size: 24px;
	}
}

/* ------------------------------------------------------------
美味しさの秘密
------------------------------------------------------------ */
.cp-tare-tappuri-secret .inner_container {
	padding-top: 120px;
	padding-bottom: 120px;
}

@media (max-width: 767px) {
	.cp-tare-tappuri-secret .inner_container {
		padding-top: 80px;
		padding-bottom: 60px;
	}
}

/* ------------------------------------------------------------
楽しみ方のご紹介
------------------------------------------------------------ */
.cp-tare-tappuri-fun {
	padding-top: 120px;
	padding-bottom: 100px;
}

.cp-tare-tappuri-fun .cp-tare-tappuri-card {
	padding: 100px 77px;
	margin-bottom: 90px;
}

.cp-tare-tappuri-fun-gird {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px 79px;
}

.cp-tare-tappuri-fun-item-image {
	position: relative;
	display: block;
	aspect-ratio: 92 / 80;
}

.cp-tare-tappuri-fun-item-image img {
	position: absolute;
	left: 0;
	bottom: 0;
}

.cp-tare-tappuri-fun-item-image.cp-tare-tappuri-fun-item-image-oshitare img {
	width: 109.347826087%;
	max-width: none;
}

.cp-tare-tappuri-fun-item-title {
	font-size: 32px;
	line-height: 1.4;
}

.cp-tare-tappuri-fun-item-title > p::before {
	display: inline;
	color: #B98541;
	content: '“';
}

.cp-tare-tappuri-fun-item-title > p::after {
	display: inline;
	color: #B98541;
	content: '”';
}

.cp-tare-tappuri-fun-item-title > p > em {
	color: #946C4B;
	font-style: normal;
}

.cp-tare-tappuri-fun-choikake {
	max-width: 900px;
	margin-inline: auto;
}

@media (max-width: 767px) {
	.cp-tare-tappuri-fun {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.cp-tare-tappuri-fun .cp-tare-tappuri-card {
		padding: 80px 25px 60px;
		margin-bottom: 50px;
		width: calc(100vw - 30px);
	}

	.cp-tare-tappuri-fun-gird {
		display: flex;
		flex-direction: column;
		gap: 40px;
		max-width: 460px;
		margin-inline: auto;
	}

	.cp-tare-tappuri-fun-item-title {
		font-size: 24px;
	}

	.cp-tare-tappuri-fun-item-image.cp-tare-tappuri-fun-item-image-oshitare {
		aspect-ratio: 295 / 299;
	}

	.cp-tare-tappuri-fun-choikake {
		max-width: 900px;
		margin-inline: auto;
	}
}

@media (min-width: 1280px) {
	.cp-tare-tappuri-fun {
		padding-inline: 0;
	}
}


/* ------------------------------------------------------------
レシピ
------------------------------------------------------------ */
/* 枠 */
.cp-tare-tappuri-recipe-yellow {
	position: relative;
	margin-top: 110px;
	padding: 1px 60.5px 80px;
	background: rgba(251, 207, 0, .2);
	border-radius: 20px;
}

.cp-tare-tappuri-recipe-yellow.cp-tare-tappuri-deco-yellow::before {
	left: 100px;
}

.cp-tare-tappuri-recipe-red {
	position: relative;
	margin-top: 130px;
	padding: 1px 60.5px 80px;
	background: rgba(217, 39, 52, .05);
	border-radius: 20px;
}

.cp-tare-tappuri-recipe-red.cp-tare-tappuri-deco-red::before {
	right: 100px;
}

/* サムネ付きリンク */
.cp-tare-tappuri-recipe-yellow .cp-imageset a.cp-imageset_inner .inline {
	background-image: linear-gradient(to top, var(--color-tappuri-yellow) 4px, transparent 4px);
}

.cp-tare-tappuri-recipe-red .cp-imageset a.cp-imageset_inner .inline {
	background-image: linear-gradient(to top, var(--color-tappuri-red) 4px, transparent 4px);
}

/* ボタン */
.cp-tare-tappuri-recipe-button .cp-button_inner {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	border-radius: 80px;
}

.cp-tare-tappuri-recipe-yellow .cp-tare-tappuri-recipe-button .cp-button_inner {
	color: #333;
	background-color: var(--color-tappuri-yellow);
	border-color: var(--color-tappuri-yellow);
}

.cp-tare-tappuri-recipe-yellow .cp-tare-tappuri-recipe-button .cp-button_inner:hover {
	background-color: #fff;
	border-color: var(--color-tappuri-yellow);
}

.cp-tare-tappuri-recipe-yellow .cp-tare-tappuri-recipe-button .cp-button_inner::before {
	background-image: url(/natto/product/tare-tappuri/img/ico_arrow-black.svg);
}

/* 小見出し */
.cp-tare-tappuri-recipe-h3 {
	margin-top: -51px;
	max-width: 200px;
	margin-inline: auto;
}

.cp-tare-tappuri-recipe-h3 img {
	width: 100%;
}

/* イチオシレシピ */
.cp-tare-tappuri-recipe-pickup {
	max-width: 680px;
}

@media (max-width: 767px) {
	.cp-tare-tappuri-recipe-yellow {
		margin-top: 90px;
		padding: 1px 15px 60px;
	}

	.cp-tare-tappuri-recipe-yellow.cp-tare-tappuri-deco-yellow::before {
		left: 20px;
		width: 80px;
	}

	.cp-tare-tappuri-recipe-red {
		margin-top: 100px;
		padding: 1px 15px 60px;
	}

	.cp-tare-tappuri-recipe-red.cp-tare-tappuri-deco-red::before {
		right: 20px;
		width: 80px;
	}

	.cp-tare-tappuri-recipe-h3 {
		margin-top: -40px;
		max-width: 140px;
	}
}

/* ------------------------------------------------------------
動画スライダー
------------------------------------------------------------ */
.cp-tare-tappuri-movie .cp-tare-tappuri-card {
	padding: 140px 77px 120px;
	background: var(--color-tappuri-yellow);
}

.cp-tare-tappuri-movie .cp-tare-tappuri-card::before {
	position: absolute;
	top: -70px;
	left: 60px;
	z-index: 2;
	display: block;
	content: '';
	width: 362px;
	aspect-ratio: 362 / 247;
	background: url(/natto/product/tare-tappuri/img/bg_movie_02.png) no-repeat 0 0 / 100% auto;
}

.cp-tare-tappuri-movie .cp-tare-tappuri-card::after {
	position: absolute;
	top: 6px;
	right: 6px;
	bottom: 6px;
	left: 6px;
	display: block;
	content: '';
	background: #fff url(/natto/product/tare-tappuri/img/bg_movie_01.png) no-repeat 100% 0 / 300px auto;
	border-radius: 14px;
}

.cp-tare-tappuri-movie .cp-tare-tappuri-card .cp-content {
	position: relative;
	z-index: 3;
}

.cp-tare-tappuri-youtube-short {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

.cp-tare-tappuri-youtube-short_tag {
	position: relative;
	width: max-content;
	padding: 6px 10px 5px;
	margin-inline: auto;
	margin-bottom: 20px;
	background: #D92734;
	border-radius: 4px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
}

.cp-tare-tappuri-youtube-short_tag::after {
	position: absolute;
	bottom: -8px;
	left: calc(50% - 6px);
	display: block;
	content: '';
	width: 12px;
	height: 8px;
	background: #D92734;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.cp-tare-tappuri-videos_item:not(.is-active) .cp-tare-tappuri-youtube-short_tag {
	display: none;
}

.cp-tare-tappuri-videos_item::before {
	display: block;
	content: '';
}

.cp-tare-tappuri-youtube-short_title {
	order: 2;
	margin-top: 15px;
	font-weight: bold;
	text-align: center;
}

.cp-tare-tappuri-youtube-short_title .large {
	font-size: 115%;
}

.cp-tare-tappuri-youtube-short_contents {
	order: 1;
	aspect-ratio: 9 / 16;
}

.cp-tare-tappuri-youtube-short_contents iframe {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 20px;
}

.cp-tare-tappuri-videos {
	position: relative;
	margin-inline: auto;
}
.cp-tare-tappuri-videos:not(.is-initialized) .cp-tare-tappuri-videos_wrapper {
	display: block;
}
.cp-tare-tappuri-videos:not(.is-initialized) .cp-tare-tappuri-videos_inner {
	max-width: none;
}
.cp-tare-tappuri-videos:not(.is-initialized) .cp-tare-tappuri-videos_item {
	opacity: 1;
	transition: none;
}
.cp-tare-tappuri-videos:not(.is-initialized) .cp-tare-tappuri-videos_content {
	max-width: 600px;
	margin: auto;
	align-items: center;
}
.cp-tare-tappuri-videos:not(.is-initialized) .cp-tare-tappuri-videos_controllers {
	display: none;
}
.cp-tare-tappuri-videos:not(.is-initialized) .cp-tare-tappuri-videos_prev,
.cp-tare-tappuri-videos:not(.is-initialized) .cp-tare-tappuri-videos_next {
	display: none;
}
.cp-tare-tappuri-videos_inner {
	position: relative;
	max-width: 860px;
}
.cp-tare-tappuri-videos_item {
	position: relative;
	/* width: 28%; */
	height: 100%;
	box-sizing: content-box;
}
.cp-tare-tappuri-videos_content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 37px;
}
.cp-tare-tappuri-videos_copy {
	font-size: 32px;
	font-weight: bold;
}
.cp-tare-tappuri-videos_button {
	margin: 14px 0 0;
	width: 100%;
	max-width: 270px;
}
.cp-tare-tappuri-videos_controllers {
	position: static;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto 0;
}
.cp-tare-tappuri-videos_arrow-prev,
.cp-tare-tappuri-videos_arrow-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: #333;
	border-radius: 50%;
	transition: background .3s;
}
.cp-tare-tappuri-videos_arrow-prev:hover,
.cp-tare-tappuri-videos_arrow-next:hover {
	background: #D92734;
}
.cp-tare-tappuri-videos_arrow-prev i {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url(/natto/product/tare-tappuri/img/ico_arrow2-white-l.svg) no-repeat 0 0;
	background-size: cover;
}
.cp-tare-tappuri-videos_arrow-next i {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: url(/natto/product/tare-tappuri/img/ico_arrow2-white-r.svg) no-repeat 0 0;
	background-size: cover;
}
.cp-tare-tappuri-videos_pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 20px;
}
.cp-tare-tappuri-videos_bullet {
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 8px;
	border-radius: 50%;
	background: #aaa;
	cursor: pointer;
}
.cp-tare-tappuri-videos_bullet.is-active {
	background: #D92734;
}
@media (max-width: 767px) {
	.cp-tare-tappuri-movie .cp-tare-tappuri-card {
		padding: 120px 25px 60px;
		width: calc(100vw - 30px);
	}
	.cp-tare-tappuri-movie .cp-tare-tappuri-card::before {
		top: -22px;
		left: -2vw;
		width: 52vw;
	}
	.cp-tare-tappuri-movie .cp-tare-tappuri-card::after {
		top: 4px;
		right: 4px;
		bottom: 4px;
		left: 4px;
		background-size: auto 100px;
		border-radius: 16px;
	}
	.cp-tare-tappuri-videos_inner {
		max-width: 90%;
		margin-inline: auto;
	}
	.cp-tare-tappuri-videos:not(.is-fade) .cp-tare-tappuri-videos_item .cp-tare-tappuri-youtube-short_title {
		opacity: 0;
		transition: opacity 0.3s ease 0.3s;
	}
	.cp-tare-tappuri-videos:not(.is-fade) .cp-tare-tappuri-videos_item.is-active .cp-tare-tappuri-youtube-short_title {
		opacity: 1;
	}
	.cp-tare-tappuri-videos_prev, .cp-tare-tappuri-videos_next {
		display: none;
	}
	.cp-tare-tappuri-videos_pagination {
		padding: 4px 15px;
		margin-inline: auto;
		width: max-content;
		background: #f3f3f3;
		border-radius: 30px;
	}
}
@media (min-width: 768px), print {
	.cp-tare-tappuri-videos:not(.is-fade) .cp-tare-tappuri-videos_item {
		opacity: 0.7;
		transition: opacity 0.3s ease 0.3s;
	}
	.cp-tare-tappuri-videos:not(.is-fade) .cp-tare-tappuri-videos_item.is-active {
		opacity: 1;
	}
	.cp-tare-tappuri-videos_inner {
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	.cp-tare-tappuri-videos_content {
		margin: 0 100px;
		padding: 20px;
	}
	.cp-tare-tappuri-videos_copy {
		font-size: 44px;
	}
	.cp-tare-tappuri-videos_controllers {
		margin-top: 40px;
	}
	.cp-tare-tappuri-videos_arrow-prev,
	.cp-tare-tappuri-videos_arrow-next {
		display: none;
	}
	.cp-tare-tappuri-videos_button {
		margin-top: 35px;
		max-width: 312px;
	}
	.cp-tare-tappuri-videos_prev {
		position: absolute;
		top: calc((100% - 90px ) / 2);
		left: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: #333;
		border-radius: 50%;
		font-size: 27px;
		color: #fff;
		text-align: center;
		transform: translateY(-50%);
		cursor: pointer;
		transition: background .3s;
	}
	.cp-tare-tappuri-videos_prev i {
		content: "";
		display: block;
		width: 26px;
		height: 26px;
		background: url(/natto/product/tare-tappuri/img/ico_arrow2-white-l.svg) no-repeat 0 0;
		background-size: cover;
		mix-blend-mode: lighten;
	}
	.cp-tare-tappuri-videos_next {
		position: absolute;
		top: calc((100% - 90px ) / 2);
		right: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: #333;
		border-radius: 50%;
		font-size: 27px;
		color: #fff;
		text-align: center;
		transform: translateY(-50%);
		cursor: pointer;
		transition: background .3s;
	}
	.cp-tare-tappuri-videos_next i {
		content: "";
		display: block;
		width: 26px;
		height: 26px;
		background: url(/natto/product/tare-tappuri/img/ico_arrow2-white-r.svg) no-repeat 0 0;
		background-size: cover;
	}
	.cp-tare-tappuri-videos_prev:hover,
	.cp-tare-tappuri-videos_next:hover {
		background: #D92734;
	}
}
.cp-tare-tappuri-videos-fade {
	padding: 0;
}

.js-slider .swiper-slide {
	max-width: 100% !important; /* stylelint-disable-line declaration-no-important,font-family-no-missing-generic-family-keyword */
	width: 100% !important; /* stylelint-disable-line declaration-no-important,font-family-no-missing-generic-family-keyword */
}