@charset "utf-8";

/*--------------------------------------------------
PC,SP共通のRESETとベースレイアウト
複数LPにまたがるスタイルもここに記述する
--------------------------------------------------*/


/* RESET
--------------------------------------------------*/
/*@acab/reset.css*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

html {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	box-sizing: border-box;
}
body { background: none; }
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
li { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
form, input, textarea {
	margin: 0;
	padding: 0;
}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	*font-size: 100%;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	border: 0;
	vertical-align: bottom;
}
a {
	color: #0068b7;
	text-decoration: none;
}
a:hover { text-decoration: underline; }
.taC { text-align: center; }
.mt0 { margin-top: 0!important; }
.mb0 { margin-bottom: 0!important; }
.mb5p { margin-bottom: 5%; }
.mb8p { margin-bottom: 8%; }





/* BASIC LAYOUT
-----------------------------------------*/
main.lpWrapper {
	width: 100%;
	max-width: 750px;
	margin: 0 auto 5%;
	padding-bottom: 3.3%;
	box-sizing: border-box;
	box-shadow: 0 0 22px 0 rgba(0,0,0,.1);
	text-align: center;
}
main.lpWrapper img {
	width: 100%;
	height: auto;
}
main.lpWrapper p {
	margin: 0;
	padding: 0;
}
@media screen and (max-width: 749px){
	main.lpWrapper { box-shadow: none; }
}


/* Bot Loading
-----------------------------------------*/
@keyframes loading {
	0% {
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg)
	}
	100% {
		-webkit-transform: rotateY(360deg);
		transform: rotateY(360deg)
	}
}
.botLoading {
	width: 100vw;
	height: 100vh;
	background: #fff;
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	justify-content: center;
	align-items: center;
	font-size: 0;
	line-height: 1;
}
.botLoadingCnt {
	display: inline-block;
	height: auto;
	text-align: center;
	margin-top: -100px;
}
.botLoadingCnt img {
	width: 400px !important;
	position: static;
	animation-name: loading;
	animation-duration: 1.6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.botLoadingCnt span {
	display: block;
	font-size: 18px!important;
	margin-top: 35px;
	color: #333;
	font-weight: bold!important;
	line-height: 1.6;
}
@media screen and (max-width: 749px){
	.botLoadingCnt img { width: 60vw !important; }
	.botLoadingCnt span { font-size: 4vw !important; }
}



/* FOOTER
-----------------------------------------*/
#lpFooter .infoTtl {
	border: 2px solid #aaa;
	border-radius: 5px;
	width: 98%;
	max-width: 1051px;
	height: 70px;
	position: relative;
	z-index: 11;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: .2s all;
	margin: 50px auto 30px;
	font-size: 26px;
}
#lpFooter .infoTtl:before,
#lpFooter .infoTtl:after {
	content: '';
	position: absolute;
	box-sizing: border-box;
}
#lpFooter .infoTtl:before {
	width: 40px;
	height: 41px;
	right: 20px;
	top: 50%;
	margin-top: -21px;
	border-radius: 5px;
	border: #bc7157 2px solid;
}
#lpFooter .infoTtl:after {
	width: 0;
	height: 0;
	right: 30px;
	top: 50%;
	margin-top: -6px;
	border-style: solid;
	border-width: 15px 10px 0 10px;
	border-color: #bc7157 transparent transparent transparent;
	transition: .1s all;
}
#lpFooter .infoTtl.act:after { transform: scale(1, -1); }
#lpFooter .infoTtl:hover { background: rgba(0,0,0,.04); }
#lpFooter .infoTtl:hover:before,
#lpFooter .infoTtl.act:before {
	background: #fff;
}
#lpFooter .infoTtl + .infoArea { display: none; }
#lpFooter .infoTtl.act + .infoArea { display: flex; }
#lpFooter .infoArea {
	width: 98%;
	max-width: 1000px;
	box-sizing: border-box;
	margin: 0 auto 60px;
	justify-content: space-between;
}
#lpFooter .infoBox { width: 48%; }
#lpFooter .infoSttl {
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 8px 12px 6px;
	background: #bc7157;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
#lpFooter .infoSsttl {
	display: block;
	margin: 0 0 .5em;
	padding: 0;
	color: #bc7157;
	font-size: 18px;
	font-weight: bold;
}
#lpFooter dd { margin: 0 0 30px 0; }
#lpFooter dd p {
	font-size: 14px;
	line-height: 1.65em;
	font-feature-settings: 'palt';
	letter-spacing: -0.04em;
	color: #111;
}
#lpFooter dd p + p { margin-top: 30px; }
#lpFooter .infoImg {
	margin-top: 14px;
	display: block;
}
#lpFooter .infoSsl {
	display: table;
	margin-top: 8px;
}
#lpFooter .infoSslImg {
	display: table-cell;
	vertical-align: middle;
}
#lpFooter .infoSslTxt {
	display: table-cell;
	font-size: 14px;
	vertical-align: top;
	line-height: 1.65em;
	padding: 0 0 0 8px;
}
#lpFooter .infoBox a {
	color: #2452b9;
	text-decoration: underline;
	font-size: inherit;
}
#lpFooter .infoClose { display: none; }
#footerLinks {
	margin: 0 auto;
	padding: 20px 0;
	width: 100%;
	background-color: #fff;
	border-top: 1px solid #555;
	font-size: 10px;
	color: #666;
}
#footerLinks small { font-size: 10px; }
#footerLinks #footer_inner {
	width: 98%;
	max-width: 980px;
	margin: 0 auto;
}
#footerLinks #footer_inner a {
	color: #666;
	font-size: 12px;
	text-decoration: none;
}
#footerLinks #footer_inner a:hover {
	color: #999;
	text-decoration: underline;
}
#footerLinks #footer_inner ul {
	display: flex;
	margin: 0;
	padding: 0;
}
#footerLinks #footer_inner ul li {
	margin: 0 15px 0 0;
	padding: 0;
}
@media screen and (max-width: 749px){
	#lpFooter .infoTtl {
		width: 94vw;
		height: 10vw;
		margin: 10vw auto 5vw;
		font-size: 5.1vw;
	}
	#lpFooter .infoTtl:before {
		width: calc(40vw/7.5);
		height: calc(40vw/7.5);
		right: calc(18vw/7.5);
		border-radius: calc(5vw/7.5);
		margin-top: calc(-20vw/7.5);
	}
	#lpFooter .infoTtl:after {
		right: calc(28vw/7.5);
		margin-top: calc(-6vw/7.5);
		border-style: solid;
		border-width: 2vw 1.34vw 0 1.34vw;
		border-color: #bc7157 transparent transparent transparent;
	}
	#lpFooter .infoArea {
		width: 94vw;
		box-sizing: border-box;
		margin: 0 auto 5vw;
		flex-wrap: wrap;
	}
	#lpFooter .infoBox { width: 94vw; }
	#lpFooter .infoSttl { font-size: 4vw; }
	#lpFooter .infoSsttl { font-size: 3.33vw; }
	#lpFooter .infoClose {
		display: block;
		margin: 0 auto 5vw;
		padding: 2vw 0;
		cursor: pointer;
		width: 60vw;
		border: 2px solid #aaa;
		border-radius: 5px;
		text-align: center;
		font-size: 4vw;
	}
	#lpFooter dd p { font-size: 3.0vw; font-weight: normal; }
	#lpFooter .infoSslTxt { font-size: 3.0vw; }
	#footerLinks {
		margin: 0 0 0 0;
		padding: 0 0 3vw;
		width: 100%;
		border-top: none;
		font-size: 3vw;
	}
	#footerLinks #footer_inner { width: 100%; }
	#footerLinks .copyright { text-align: center; }
	#footerLinks .copyright small { font-size: 2.5vw; }	
	#footerLinks #footer_inner ul {
		display: block;
		margin: 0;
		padding: 0;
	}
	#footerLinks #footer_inner ul li {
		display: block;
		box-sizing: border-box;
		margin: 0 0 0 0;
		padding: 0;
		background: #2f2f2f;
	}
	#footerLinks #footer_inner ul li + li { border-top: solid 1px #111; }
	#footerLinks #footer_inner ul li a {
		display: block;
		position: relative;
		margin: 0;
		padding: 1.8vw 3.3vw;
		text-decoration: none;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #f1f1f1;
		font-size: 2.9vw;
		font-weight: normal;
	}
	#footerLinks #footer_inner ul li a:before {
		content: '';
		position: absolute;
		top: calc(50% - 1.25vw);
		right: 5vw;
		width: 2.5vw;
		height: 2.5vw;
		border-right: 2px #f1f1f1 solid;
		border-top: 2px #f1f1f1 solid;
		transform: rotate(45deg);
	}
	#footerLinks #footer_inner ul li a:hover {
		text-decoration: none;
		color: #fff;
	}
	
}








































/* オファー
-----------------------------------------*/
.offerBox { position: relative; }
.offerBox > img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 9;
}
.offerBox > a {
	position: absolute;
	z-index: 10;
}
.offerBox > a img { transition: .2s all; }
.offerBox > a:hover img {
	transform: scale(1.03);
	filter:brightness(1.25);
	transition: .03s all; 
}





/* 以下複数LPにまたがるスタイル
-----------------------------------------*/

/* 汎用重なりコンテンツ用
-----------------------------------------*/
.ovElemWrap { position: relative; }
.ovElemWrap > img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 9;
}
.ovElemWrap > .ovElem {
	position: absolute;
	z-index: 10;
}
.ovElemWrap video { width: 100%; }
.ovElemWrap video::-webkit-media-controls-fullscreen-button { display: none; }
.ovElemWrap video::-webkit-media-controls-play-button {}
.ovElemWrap video::-webkit-media-controls-timeline {}
.ovElemWrap video::-webkit-media-controls-current-time-display{}
.ovElemWrap video::-webkit-media-controls-time-remaining-display {}
.ovElemWrap video::-webkit-media-controls-mute-button {}
.ovElemWrap video::-webkit-media-controls-toggle-closed-captions-button {}
.ovElemWrap video::-webkit-media-controls-volume-slider {}


/* BTN ANIM
-----------------------------------------*/
@-webkit-keyframes scaleAnim1 {
	0% {
		-webkit-transform: scale(.9);
		transform: scale(.9);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
.pulsebtn { animation: scaleAnim1 0.9s ease 0s infinite alternate; }


/* 欠品_日付自動取得 01
-----------------------------------------*/
.bnrOOS.jsTimer01 { position: relative; }
.bnrOOS.jsTimer01 > img {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
}
.bnrOOS.jsTimer01 > img + img { display: none; }
.bnrOOS.jsTimer01.lastPeriod > img { display: none; }
.bnrOOS.jsTimer01.lastPeriod > img + img { display: block; }
.bnrOOS.jsTimer01 > p {
	position: absolute;
	top: 66.5%;
	left: 11%;
	z-index: 11;
	text-align: left;
	line-height: 1.1;
	font-size: 37px;
	color: #362e2b;
	font-family: YuMincho, 'Yu Mincho', serif;
}
@media screen and (max-width: 749px){
	.bnrOOS.jsTimer01 > p { font-size: 5.1vw; }
}



/* 成分表 アコーディオン
-----------------------------------------*/
.ingredientsOuter {
	width: 100%;
	margin: 3% auto 0;
	background: #e6e6e6;
	padding: 0 3% 3%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.ingredientsOuter .ingTtl {
	display: block;
	color: #333;
	text-align: center;
	font-weight: bold;
	padding: 4% 0 3.3%;
	line-height: 1.1;
	font-size: 28px;
}
.ingredientsOuter div {
	padding: 4%;
	background: white;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.ingredientsOuter p.ingTex {
	overflow: hidden;
	max-height: 5.2em;
	height: auto;
	font-size: 22px;
	line-height: 1.45;
	transition: 3s;
	text-align: left;
}
.ingredientsOuter p.ingTex.texOpen {
	height: auto;
	max-height: 4000px;
	transition: 3s;
}
.ingredientsOuter p.ingSwitch {
	text-align: center;
	margin: 6% 0 2%;
	display: block;
	cursor: pointer;
}
.ingredientsOuter p.ingSwitch span {
	position: relative;
	color: #333;
	font-size: 26px;
	font-weight: bold;
	padding-right: 1.2em;
}
.ingredientsOuter p.ingSwitch span:after {
	position: absolute;
	top: 50%;
	margin-top: -8px;
	right: 0;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 12px 0 12px;
	border-color: #333 transparent transparent transparent;
}
@media screen and (max-width: 749px){
	.ingredientsOuter .ingTtl { font-size: 4.5vw; }
	.ingredientsOuter p.ingTex { font-size: 2.73vw; }
	.ingredientsOuter p.ingSwitch span { font-size: 4vw; }
	.ingredientsOuter p.ingSwitch span:after {
		margin-top: -1.3vw;
		border-width: 2.66vw 1.6vw 0 1.6vw;
	}
}



/* 100日間返金保証_保証書コンテンツ
-----------------------------------------*/
.g100GualanteeArea {
	width: 100%;
	margin: 0 auto 5%;
	text-align: center;
	font-size: 0;
}
.g100GualanteeArea .accoOuter .accoCont { display: none; }
.g100GualanteeArea .accoOuter .accoCont.open {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	float: none;
	background: none;
	border: none;
}
.g100GualanteeArea .accoOuter .accoSwitch { cursor: pointer; }
.g100GualanteeArea .accoOuter .accoSwitch img { text-align: center; margin: 0 auto;}
.g100GualanteeArea .accoOuter .accoSwitch img + img { display: none; }
.g100GualanteeArea .accoOuter .accoCont.open + .accoSwitch img { display: none; }
.g100GualanteeArea .accoOuter .accoCont.open + .accoSwitch img + img { display: block;}
.g100GualanteeSecretArea{
	position: relative;
	width: 100%;
}
.g100GualanteeSecretArea:before {
	content: '';
	background: #fff;
	width: 100%;
	height: 24%;
	z-index: 4;
	position: absolute;
	bottom: 0;
	left: 0;
}
.g100MovBox {
	display: inline-block;
	width: 42%;
	height: 26.5%;
	position: absolute;
	bottom: 0;
	left: 6.6%;
	z-index: 5;
	overflow: hidden;
}
.g100GualanteeSecretArea video {
	width: 180%;
	display: block;
	margin-left: -80%;
	object-fit: cover;
}
.g100GualanteeSecretArea .g100MovBox + .g100MovBox {
	left: inherit;
	right: 6.6%;
}
.g100GualanteeSecretArea .g100MovBox + .g100MovBox video { margin-left: -30%; }


/* インスタ スライダー
-----------------------------------------*/
.instaSliderArea {
	position: relative;
	z-index: 10;
}
.instaSliderArea > img {
	position: relative;
	top: 0;
	left: 0;
}
.instaSliderArea > .sliderWrap {
	position: absolute;
	width: 100%;
	bottom: 14%;
	left: 0;
}
div#container._spView .instaSlider .slick-slide { width: 36.66vw; }
.instaSliderArea .slick-current img ,
.instaSliderArea .slick-active img {
	border: none;
}
.instaSliderArea + .tvMediaScrollArea {
	position: relative;
	z-index: 11;
	margin-top: -7%;
}
@media screen and (max-width: 749px){
	.instaSlider .slick-slide { width: 36.66vw; }
}



/* ニュースメディア スクロール コンテンツ
-----------------------------------------*/
@keyframes scrollAnim{
	0%   { transform: translateY(0); }
	100% { transform: translateY(-100%); }
}
.tvMediaScrollArea { margin: 5% 0; }
.tvMediaScrollArea .ovElemWrap.tvMedia02 > .ovElem {
	width: 86.6%;
	top: 10%;
	left: 6.7%;
	height: 79%;
	overflow: hidden;
}
.tvMediaScrollArea .ovElemWrap.tvMedia02 > .ovElem p {
	animation: scrollAnim 100s linear infinite;
	animation-delay: 3s;
}



/* howtouse Mov
-----------------------------------------*/
.howtoUseMov { position: relative; }
.howtoUseMov > img {
	position: relative;
	z-index: 10;
	top: 0;
	left: 0;
}
.howtoUseMov > video {
	position: absolute;
	top: 51%;
	left: 6.5%;
	z-index: 11;
	width: 87%;
}
.howtoUseMov > video::-webkit-media-controls-fullscreen-button { display: none; }
.howtoUseMov > video::-webkit-media-controls-play-button {}
.howtoUseMov > video::-webkit-media-controls-timeline {}
.howtoUseMov > video::-webkit-media-controls-current-time-display{}
.howtoUseMov > video::-webkit-media-controls-time-remaining-display {}
.howtoUseMov > video::-webkit-media-controls-mute-button {}
.howtoUseMov > video::-webkit-media-controls-toggle-closed-captions-button {}
.howtoUseMov > video::-webkit-media-controls-volume-slider {}