@charset "UTF-8";

/*
	override
---------------------------------- */
main {
	background-color: #fff;
}
body .vinegar-drink-main {
	margin-top: 0;
}

@media screen and (min-width:769px) {
	body .vinegar-drink-main {
		margin-top: 0;
	}
}

main img {
	width: 100%;
}

/*
	base
---------------------------------- */
.vinegarcare-sticky-area {
	position: relative;
	overflow: hidden;
}

.vinegarcare-sticky-area_item {
	position: fixed;
	top: 0;
	right: 0;
	display: inline-block;
	height: 100%;
	width: 100%;
	max-width: 153px;
	background: url(/vinegar-drink/vinegarcare/images/bg_text.svg) no-repeat;
	background-size: cover;
	z-index: 0;
	opacity: 1;
}

.vinegarcare-sticky-area_item.is-hidden {
	display: none;
	opacity: 0;
	z-index: -10;
}

.js-sticky-hidden-area {
	position: relative;
	padding-top: 60px;
	background-color: #fff;
	z-index: 1;
}
@media screen and (max-width:767px) {
	.vinegarcare-sticky-area_item {
		min-height: 800px;
		background-size: contain;
	}
}
@media screen and (min-width:768px) {
	.js-sticky-hidden-area {
		padding-top: 130px;
	}

	.vinegarcare-sticky-area_item {
		top: 67px;
		max-height: 970px;
		max-width: 191px;
	}
}


/*
	ECセット
---------------------------------- */
.vinegarcare-ecset .cp-ecset_header {
	background-color: #EF6A84;
}



/*
	お酢セット
---------------------------------- */
.vinegarcare-conductor .cp-heading-secondary {
	position: relative;
	color: #333;
	font-family: "M PLUS Rounded 1c", serif;
	font-weight: 700;
	font-size: 24px;
	text-align: center;
	margin-bottom: 60px;
}

.vinegarcare-conductor .cp-heading-title::after {
	content: '';
	display: block;
	width: 76px;
	height: 4px;
	margin: 16px auto 0;
	background: none;
	border-top: 4px dotted var(--key-color);
	border-radius: 0;
}

@media (min-width: 768px), print {
	.vinegarcare-conductor .cp-heading-secondary {
		margin-bottom: 80px;
		font-size: 36px;
	}

	.vinegarcare-conductor .cp-heading-title::after {
		width: 114px;
		height: 5px;
		margin-top: 23px;
		border-top: 5px dotted var(--key-color);
	}
}

/*
	h2
---------------------------------- */
.vinegarcare-secondary {
	margin-bottom: 40px;
}

.vinegarcare-secondary .cp-heading-title {
	color: #BE004A;
	font-family: "M PLUS Rounded 1c", serif;
	font-weight: 700;
	font-size: 28px;
}

.vinegarcare-secondary span {
	display: block;
	font-size: 20px;
	margin-bottom: 24px;
}

@media (min-width: 768px), print {
	.vinegarcare-secondary {
		margin-bottom: 70px;
	}

	.vinegarcare-secondary .cp-heading-title {
		font-size: 50px;
	}

	.vinegarcare-secondary span {
		font-size: 30px;
		margin-bottom: 10px;
	}
}

/*
	h3
---------------------------------- */
.vinegarcare-tertiary.cp-heading-tertiary {
	padding-bottom: 30px;
}
.vinegarcare-tertiary.cp-heading-tertiary .cp-heading-title {
	position: relative;
	display: inline-block;
	font-family: "M PLUS Rounded 1c", serif;
	color: #BE004A;
	font-size: 24px;
}
.vinegarcare-tertiary.cp-heading-tertiary::after {
	display: none;
}
.vinegarcare-tertiary.cp-heading-tertiary .cp-heading-title::before,
.vinegarcare-tertiary.cp-heading-tertiary .cp-heading-title::after {
	content: "";
    display: block;
    position: absolute;
	top: 5px;
    width: 2px;
    height: 30px;
	background-color: #BE004A;
    border-radius: 2px;
}
.vinegarcare-tertiary.cp-heading-tertiary .cp-heading-title::before {
    left: -20px;
    transform: rotate(-15deg);
}
.vinegarcare-tertiary.cp-heading-tertiary .cp-heading-title::after {
    right: -20px;
    transform: rotate(15deg);
}

@media (min-width: 768px), print {
	.vinegarcare-tertiary .vinegarcare-tertiary_titlelead {
		font-size: 22px;
	}

	.vinegarcare-tertiary .cp-heading-title {
		font-size: 32px;
	}
}

/*
	KV
---------------------------------- */
.vinegarcare-kv {
	position: relative;
	padding-bottom: calc(600 / 375 * 100%);
    background: #fff;
    overflow: initial;
	z-index: 1;
}

.vinegarcare-kv_image {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	z-index: 0;
	opacity: 0;
	transition: all .8s ease-in;
}

.vinegarcare-kv_image.is-active {
	opacity: 1;
}

.vinegarcare-kv_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vinegarcare-kv_title {
	position: absolute;
    top: 0px;
    left: 0;
    width: calc(300px / 375px * 100%);
	z-index: 4;
	opacity: 0;
	transition: all 1.2s .6s ease-in;
}

.vinegarcare-kv_title.is-active {
	opacity: 1;
}

.vinegarcare-kv_content {
	position: absolute;
	bottom: -42px;
	width: 100%;
	padding-inline: 15px;
	display: flex;
	align-items: center;
	z-index: 2;
}

.vinegarcare-kv_product_text {
	font-weight: 700;
	color: #fff;
	font-size: 15px;
	margin-bottom: 14px;
	opacity: 0;
	transition: all 0.7s 1.4s ease-in;
}

.vinegarcare-kv_product_text i {
	position: relative;
	display: inline-block;
}

.vinegarcare-kv_product_text i::after {
		content: '';
		position: absolute;
		top: -22px;
		right: -11px;
		display: inline-block;
		width: 10px;
		height: 8px;
		background: url(../images/img_kv_figure01.svg) no-repeat 0 0;
		background-size: cover;

}

.vinegarcare-kv_product_text.is-active {
	opacity: 1;
}

.vinegarcare-kv_product_image {
	display: flex;
	gap: 0 9px;
	z-index: 0;
}

.vinegarcare-kv_product_image .img-content {
	flex: 0 0 47px;
	width: 47px;
}

.vinegarcare-kv_product_title {
	flex-basis: calc(161 / 335 * 100%);
	opacity: 0;
	transition: all 1s 2.5s ease-in;
}

.vinegarcare-kv_product_title.is-active {
	opacity: 1;
}

@media (max-width: 767px), print {
	.vinegarcare-kv_product {
		margin-right: 15px;
	}
}

@media (min-width: 768px), print {
	.vinegarcare-kv {
		padding-bottom: 800px;
		max-height: 800px;
	}

	.vinegarcare-kv_title {
		position: absolute;
		top: 30px;
		left: 50%;
		width: 100%;
		max-width: calc(676px + 50%);
		padding-right: 50%;
		transform: translateX(-50%);
	}

	.vinegarcare-kv_content {
		bottom: -95px;
		left: 50%;
		max-width: 1400px;
		padding-inline: 15px;
		transform: translateX(-50%);
	}

	.vinegarcare-kv_product_text {
		font-size: 19px;
		margin-bottom: 30px;
	}

	.vinegarcare-kv_product_image {
		display: flex;
		gap: 0 19px;
	}

	.vinegarcare-kv_product_image .img-content {
		flex: 0 0 100px;
		width: 100px;
	}

	.vinegarcare-kv_product_title {
		flex-basis: 306px;
		width: 306px;
	}
}

/*
	リード
---------------------------------- */
.vinegarcare-leadarea {
	position: relative;
	text-align: center;
	z-index: 1;
	padding-top: 60px;
}

.vinegarcare-leadarea_text .cp-text {
	line-height: 2;
}

@media (max-width: 767px) {
	.vinegarcare-leadarea_text .cp-text {
		padding-inline: 15px;
	}

	.vinegarcare-leadarea_text {
		width: 100%;
		overflow: hidden;
	}

	.vinegarcare-leadarea_text::after {
		content: '';
		display: inline-block;
		width: 100%;
		min-width: 445px;
		height: 100%;
		aspect-ratio: 445 / 459;
		background: url(../images/img_ill_sp.png) no-repeat 0 0;
		background-size: cover;
		overflow: hidden;
		margin-left: -45px;
	}
}

@media (min-width: 768px), print {
	.vinegarcare-leadarea {
		padding-top: 130px;
	}
	.vinegarcare-leadarea_text {
		display: inline-block;
		margin-bottom: 90px;
	}
	.vinegarcare-leadarea_text .ill01 {
		position: relative;
	}
	.vinegarcare-leadarea_text .ill01::after {
		content: '';
		display: inline-block;
		position: absolute;
		top: -170%;
		right: 100%;
		width:  441px;
		height: 441px;
		aspect-ratio: 1 / 1;
		background: url(../images/img_ill01.png) no-repeat 0 0;
		background-size: contain;
	}
	.vinegarcare-leadarea_text .ill02 {
		position: relative;
	}
	.vinegarcare-leadarea_text .ill02::after {
		content: '';
		display: inline-block;
		position: absolute;
		top: -200%;
		left: calc(100% + 80px);
		width:  441px;
		height: 441px;
		aspect-ratio: 1 / 1;
		background: url(../images/img_ill02.png) no-repeat 0 0;
		background-size: contain;
	}
	.vinegarcare-leadarea_text .ill03 {
		position: relative;
	}
	.vinegarcare-leadarea_text .ill03::after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 30%;
		right: 140%;
		width:  441px;
		height: 441px;
		aspect-ratio: 1 / 1;
		background: url(../images/img_ill03.png) no-repeat 0 0;
		background-size: contain;
	}
}

/*
	おいしいビネガーケア紹介
---------------------------------- */
.vinegarcare-informations {
	position: relative;
	padding: 132px 0 0;
	margin-bottom: 0;
}

.vinegarcare-informations::before {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 154px;
	height: 132px;
	background: url(../images/img_infomation_01.png) no-repeat 0 0;
	background-size: contain;
	transform: translateX(-50%);
}

.vinegarcare-information {
	position: relative;
	z-index: 2;
}

.vinegarcare-information_content {
	margin: 0 auto 30px;
}

.vinegarcare-information_tag {
	width: 100%;
	max-width: 294px;
	margin: 0 auto 10px;
}

.vinegarcare-information_title {
	font-size: 36px;
	font-weight: 700;
	text-align: center;
	line-height: 1.2;
}

.vinegarcare-information_subtitle {
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	line-height: 1.4;
	color: #fff;
	margin-bottom: 20px;
}

.vinegarcare-information_text {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.8;
	color: #fff;
}

.vinegarcare-information_note {
	color: #fff;
	font-size: 12px;
}

.vinegarcare-information_inner {
	padding-top: 70px;
	padding-bottom: 40px;
}

.vinegarcare-information_image {
	margin-bottom: 30px;
}

.vinegarcare-information_comment-box {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 10px;
	margin-bottom: 30px;
}

.vinegarcare-information_comment-box_image {
	flex: 0 0 100px;
	width: 100px;
}

.vinegarcare-information_comment-box_text {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
}

/* product01 */
.product01 {
	background-image: linear-gradient(#F496A8, #ef6a84 100%);
}
.product01 .vinegarcare-information_title {
	color: #C7E4F4;
}

/* product02 */
.product02 {
	background-image: linear-gradient(#9DD4D6, #75c3c5 100%);
}
.product02 .vinegarcare-information_title {
	color: #F9F3B5;
}

/* product03 */
.product03 {
	background-image: linear-gradient(#F0B8D0, #ea9abd 100%);
}
.product03 .vinegarcare-information_title {
	color: #E1DE00;
}

@media (max-width: 767px) {
	.vinegarcare-information_content {
		width: 100%;
		max-width: 312px;
		margin: 0 auto 30px;
	}
}
@media (min-width: 768px), print {
	.vinegarcare-informations {
		padding: 231px 0 0;
	}

	.vinegarcare-informations::before {
		width: 267px;
		height: 231px;
	}

	.vinegarcare-information_inner {
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(2, auto);
		padding: 70px 0 80px;
	}

	.vinegarcare-information_content {
		grid-area: 1 / 2 / 2 / 3;
	}

	.vinegarcare-information_image {
		grid-area: 1 / 1 / 3 / 2;
		min-width: 330px;
		max-width: 550px;
	}

	.vinegarcare-information_tag {
		max-width: 435px;
		margin: 0 0 15px 0;
	}

	.vinegarcare-information_title {
		font-size: 65px;
		text-align: left;
	}

	.vinegarcare-information_subtitle {
		font-size: 35px;
		text-align: left;
	}

	.vinegarcare-information_text {
		font-size: 18px;
	}

	.vinegarcare-information_comment {
		grid-area: 2 / 2 / 3 / 3;
	}

	.vinegarcare-information_comment-box {
		gap: 0 20px;
		margin-bottom: 22px;
	}

	.vinegarcare-information_comment-box_image {
		flex: 0 0 190px;
		width: 190px;
	}

	.vinegarcare-information_comment-box_text {
		font-size: 28px;
	}

	/* product02 */
	.product02 .vinegarcare-information_image { grid-area: 1 / 2 / 3 / 3; }
	.product02 .vinegarcare-information_content { grid-area: 1 / 1 / 2 / 2; }
	.product02 .vinegarcare-information_comment { grid-area: 2 / 1 / 3 / 2; }
}

@media screen and (max-width: 1000px) and (min-width: 768px) {
	.vinegarcare-information_content {
		width: 100%;
		max-width: 80%;
	}
}

/*
	あたらしい健康美容習慣
---------------------------------- */
.vinegarcare-osusume {
	padding-top: 80px;
	padding-bottom: 60px;
	background-color: #f1cacd4d;
	margin-bottom: 0!important;
}

.vinegarcare-osusume .cp-text {
	line-height: 2;
}

.vinegarcare-osusume .cp-imageset {
	padding: 0 25px;
}

.vinegarcare-osusume .cp-imageset_image {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.vinegarcare-osusume .cp-imageset_image figcaption {
	margin-top: -20px;
	display: inline-block;
	font-family: "M PLUS Rounded 1c", serif;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	background-color: #F06A83;
	padding-inline: 24px;
	border-radius: 20px;
	line-height: 41px;
	z-index: 1;
}

.vinegarcare-osusume .cp-imageset_text {
	text-align: center;
}

.vinegarcare-osusume_bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 15px;
	margin-top: 20px;
}

.vinegarcare-osusume_bottom img {
	width: 50px;
}

.vinegarcare-osusume_bottom p {
	font-family: "M PLUS Rounded 1c", serif;
	font-size: 20px;
	font-weight: 600;
	color: #BE004A;
}

@media (max-width: 767px) {
	.vinegarcare-osusume .cp-text + .cp-text {
		margin-top: 28px;
	}
}

@media (min-width: 768px), print {
	.vinegarcare-osusume {
		padding-top: 125px;
		padding-bottom: 88px;
	}
}

/*
	レシピ
---------------------------------- */
.vinegarcare-recipe a {
	color: #333;
	transition: color .2s ease-in;
}

.vinegarcare-recipe a:hover {
	color: #BE004A;
}

.vinegarcare-recipe .cp-imageset_image {
	position: relative;
	padding-top: 20px;
}

.vinegarcare-recipe .cp-imageset_image::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: calc(50% - 20px);
	width: 40px;
	height: 40px;
	z-index: 1;
}

.vinegarcare-recipe .cp-imageset_image.icon01::before {
	background: url(../images/icon_recipe01.png) no-repeat 0 0;
	background-size: contain;
}

.vinegarcare-recipe .cp-imageset_image.icon02::before {
	background: url(../images/icon_recipe02.png) no-repeat 0 0;
	background-size: contain;
}

.vinegarcare-recipe .cp-imageset_image.icon03::before {
	background: url(../images/icon_recipe03.png) no-repeat 0 0;
	background-size: contain;
}

.vinegarcare-recipe .cp-imageset_image img {
	border-radius: 10px;
}

@media (max-width: 767px) {
	.vinegarcare-recipe .cp-grid.cp-grid-3up {
		display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
		gap: 20px;
	}

	.vinegarcare-recipe .cp-grid.cp-grid-3up .cp-grid_item {
		flex-basis: calc(50% - 10px);
	}

	.vinegarcare-recipe .cp-grid.cp-grid-3up .cp-grid_item + .cp-grid_item {
		margin-top: 0;
	}
}

@media (min-width: 768px), print {
	.vinegarcare-recipe .cp-imageset_image {
		padding-top: 40px;
	}

	.vinegarcare-recipe .cp-imageset_image::before {
		left: calc(50% - 40px);
		width: 80px;
		height: 80px;
	}
}


/*
	商品紹介
---------------------------------- */
.vinegarcare-products .cp-attentionlist-item:last-child::before {
    content: "＊";
}

.vinegarcare-product {
	border-top: 2px dotted #C9C9C9;
	padding: 30px 0 40px;
}

.vinegarcare-product:last-of-type {
	border-bottom: 2px dotted #C9C9C9;
}

.vinegarcare-product_inner {
	display: grid;
	grid-template-columns: 75px 3fr;
	grid-template-rows: repeat(2, auto);
	gap: 30px 20px;
}

.vinegarcare-product_image {
	grid-area: 1 / 1 / 2 / 2;
	margin-left: 15px;
}

.vinegarcare-product_content {
	grid-area: 1 / 2 / 2 / 3;
}

.vinegarcare-product_button {
	grid-area: 2 / 1 / 3 / 3;
	width: 100%;
}

.vinegarcare-product_text {
	font-size: 12px;
}

.vinegarcare-product_title {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 30px;
}

.vinegarcare-product_title span {
	display: block;
	font-size: 16px;
}

.vinegarcare-product_button .cp-button-border .cp-button_inner {
	border-color: #BE004A;
	color: #BE004A;
	text-align: left;
}

.vinegarcare-product_button .cp-button_inner::before {
	mask-position: center center;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-image: url(/assets/img/cms_parts/ico_arrow-white.svg);
	background: #BE004A;
}


@media (min-width: 768px), print {
	.vinegarcare-products {
		margin-bottom: 20px;
	}

	.vinegarcare-product {
		border-top: 2px dotted #C9C9C9;
		padding: 40px 0 50px;
	}

	.vinegarcare-product_inner {
		grid-template-columns: 313px 3fr;
	}

	.vinegarcare-product_image {
		grid-area: 1 / 1 / 3 / 2;
		margin: 0 auto;
	}

	.vinegarcare-product_image img {
		width: 92px;
	}

	.vinegarcare-product_content {
		grid-area: 1 / 2 / 2 / 3;
	}

	.vinegarcare-product_button {
		grid-area: 2 / 2 / 3 / 3;
	}

	.vinegarcare-product_text {
		font-size: 16px;
	}

	.vinegarcare-product_title {
		font-size: 28px;
		margin-bottom: 11px;
	}

	.vinegarcare-product_title span {
		display: inline-block;
		font-size: 18px;
		padding-left: 15px;
	}

	.vinegarcare-product_button .cp-button-border .cp-button_inner:hover {
		background-color: #BE004A;
		color: #fff;
	}
}

/* ----------
	fadein animation
---------- */

.js-fadeinitem,
.js-fadein {
	opacity: 0;
}
.js-fadein.is-anime {
	animation: fadeUpItem .7s ease-out forwards;
}
.js-fadein.js-delayin.is-anime {
	animation-delay: .2s;
}
.js-fadeinitem:nth-of-type(odd).is-anime {
	animation: fadeDownItem 1s ease-out forwards;
}
.js-fadeinitem:nth-of-type(even).is-anime {
	animation: fadeUpItem 1s ease-out forwards;
}

@keyframes fadeUpItem {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

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

@keyframes fadeDownItem {
	from {
		opacity: 0;
		transform: translateY(-40px);
	}

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