@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');

* {
	vertical-align: top;
}

/* スムーススクロール */
html {
	scroll-behavior: smooth;
}

/* たまごリピートのアドコード引き継ぎタグの空白 */
.sourceview {
	display: none;
}

/* コンテンツ要素はここから ----------------------------------------*/
body {
	font-family: YuGothic, 'Yu Gothic Medium', 'Yu Gothic', Meiryo, sans-serif;
}

img {
	vertical-align: top;
	width: 100%;
	display: block;
}

.container {
	margin: 0 auto;
	width: 100%;
	background-color: #fff;
	overflow: hidden;
	padding: 0 0 40px 0;
}

@media screen and (min-width: 750px) {
	.container {
		width: 600px;
		box-shadow: 0 0 20px #fbd7d6;
	}

	.base_bg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: -11;
		background-image: url(../img/body_bg01.jpg);
		background-repeat: repeat;
		background-position: center top;
	}
}

/* ヘッダー ----------------------------------------*/
header {}

/* オファー ----------------------------------------*/
.offer .cta_top01 {
	position: relative;
	z-index: 10;
}

.offer .cta_top01 .coupon {
	position: absolute;
	z-index: 20;
	right: 0;
	left: 0;
	margin: 3.5% 0 0 0;
}

.offer .cta_top01 .coupon img {
	animation: ball 0.6s alternate infinite;
	-webkit-animation: ball 0.6s alternate infinite;
	-moz-animation: ball 0.6s alternate infinite;
}

@keyframes ball {
	0% {
		transform: translate(0%, 0%) rotateX(25deg);
	}

	100% {
		transform: translate(0%, -20px);
	}
}

@-webkit-keyframes ball {
	0% {
		-webkit-transform: translate(0%, 0%) rotateX(25deg);
	}

	100% {
		-webkit-transform: translate(0%, -20px);
	}
}

@-moz-keyframes ball {
	0% {
		-moz-transform: translate(0%, 0%) rotateX(25deg);
	}

	100% {
		-moz-transform: translate(0%, -20px);
	}
}

.offer .cta_bottom {
	position: relative;
	z-index: 10;
}

.offer .cta_bottom .purchase {
	position: absolute;
	z-index: 40;
	top: 0;
	right: 0;
	left: 0;
}

.offer .cta_bottom .purchase:hover {
	animation: flash 1s infinite;
}

.offer .cta_bottom .purchase img {
	animation: beating 3s infinite;
}

.offer .cta_bottom .purchase img:hover {
	animation-play-state: paused;
}

/* アップセルオファー */
.offer .us-cta_bottom {
	position: relative;
	z-index: 10;
	margin: 30px auto 0;
	height: 150px;
}

.offer .us-cta_bottom .purchase {
	position: absolute;
	z-index: 40;
	top: 0;
	right: 0;
	left: 0;
}

.offer .us-cta_bottom .purchase:hover {
	animation: flash 1s infinite;
}

.offer .us-cta_bottom .purchase img {
	animation: beating 3s infinite;
}

.offer .us-cta_bottom .purchase img:hover {
	animation-play-state: paused;
}

@media screen and (min-width: 750px) {
	.offer .us-cta_bottom {
		margin: 4vw auto 0;
		height: 170px;
	}
}

/* ボタンアニメーション */
@keyframes flash {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

@keyframes beating {

	0%,
	100% {
		transform: scale(0.9, 0.9);
	}

	20% {
		transform: scale(1.2, 1.2);
	}

	95% {
		transform: scale(1, 1);
	}
}

@media (min-width: 750px) {
	@keyframes beating {

		0%,
		100% {
			transform: scale(0.8, 0.8);
		}

		20% {
			transform: scale(1, 1);
		}

		95% {
			transform: scale(0.9, 0.9);
		}
	}
}

/* 成分表 */
table.iteminfo {
	width: 92%;
	margin: 0 auto;
	font-size: 11px;
	line-height: 130%;
	border: 1px #888888 solid;
	text-align: left;
}

table.iteminfo tr {}

table.iteminfo th {
	width: 24%;
	font-weight: 600;
	padding: 16px 0 16px 16px;
	background-color: #f5f5f5;
	border: 1px #888888 solid;
}

table.iteminfo td {
	width: 76%;
	padding: 16px;
	border: 1px #888888 solid;
}

/* 追従ボタン */
.follow-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgb(255 255 255 / 0.5);
	text-align: center;
	z-index: 30;
}

.close-btn {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 0;
	right: 0;
	background-color: rgb(0 0 0 / 0.5);
	border: none;
	font-size: 30px;
	line-height: 1em;
	color: #fff;
	cursor: pointer;
}

@media screen and (min-width: 750px) {
	.follow-banner {
		width: 600px;
		left: 50%;
		transform: translateX(-50%);
	}
}

/*----------------------------
フッター設定
----------------------------*/
.J-footer {
	/* background: #5b6f3a; */
	background: #fbfbf5;
	color: #5b5b5b;
	line-height: 1.8;
	padding: 6rem 0 8rem 0;
	font-size: 0.85rem;
}

.J-footer-logo {
	margin-bottom: 20px;
	margin: 0 auto;
	text-align: center;
}

.J-footer_info {
	margin-bottom: 1rem;
	padding: 1rem 2rem;
}

.J-footer_info p {
	text-align: center;
}

.J-footer_link {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin: 0 auto 20px;
	width: 70%;
}

.J-footer_link a:link,
.J-footer_link a:visited,
.J-footer_link a:hover {
	color: #5b5b5b;
	text-decoration: none;
}

.J-footer_copyright {
	text-align: center;
	font-size: 12px;
}

.J-footer-logo-img {
	margin: 0 auto;
	width: 200px;
}

@media screen and (min-width:768px) {
	.J-footer_info {
		width: 70%;
		margin: 0 auto;
		margin-bottom: 3em;
	}

	.J-footer_info p {
		text-align: center;
	}

	.J-footer_link {
		width: 100%;
	}
}

/* ---------------------------------------------
アップセル　スライダー
--------------------------------------------- */
.slide_area {
	position: relative;
	padding: 0 0 70px;
	background: url(../img/us_c1_04b.jpg) no-repeat;
	background-image: 100%;
}

.slide_area .swiper-slide {
	padding: 0;
}

/* 左右のアイコン */
.slide_area .swiper-button-next,
.slide_area .swiper-button-prev {
	top: auto;
	bottom: 9.75%;
	width: min(calc((70 / 750) * 100vw), 70px);
	height: min(calc((9 / 750) * 100vw), 9px);
	background: url(../img/slide_arrow.png) no-repeat;
	background-size: contain;
}

.slide_area .swiper-button-prev {
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.slide_area .swiper-button-next:after,
.slide_area .swiper-button-prev:after {
	content: none;
}

.slide_area .swiper-button-next {
	right: 27%;
}

.slide_area .swiper-button-prev {
	left: 27%;
}

/* ページネーション */
.slide_area .swiper-pagination {
	bottom: 9%;
}

.slide_area .swiper-pagination-bullet {
	opacity: 1;
	background-color: #fff;
	width: min(calc((12 / 750) * 100vw), 12px);
	height: min(calc((12 / 750) * 100vw), 12px);
	margin: 0 min(calc((8 / 750) * 100vw), 8px);
}

.slide_area .swiper-pagination-bullet-active {
	background-color: #c4433d;
}