@charset "utf-8";

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


/* RESET
--------------------------------------------------*/
main address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
main li { list-style: none; }
main caption, th { text-align: left; }
main h1, h2, h3, h4, h5, h6 { font-weight: normal; }
main sup { vertical-align: text-top; }
main sub { vertical-align: text-bottom; }
main form, input, textarea {
	margin: 0;
	padding: 0;
}
main input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	*font-size: 100%;
}
main table {
	border-collapse: collapse;
	border-spacing: 0;
}
main img {
	border: 0;
	vertical-align: bottom;
}
main p{
	margin: 0;
	padding: 0;
	line-height: 1;
}
main a {
	color: #0068b7;
	text-decoration: none;
}
main a:hover { text-decoration: underline; }

/**/
main .taC { text-align: center; }
main .mb5p { margin-bottom: 5% !important; }
main .mt0 { margin-top: 0!important; }
main .mb0 { margin-bottom: 0!important; }
main .mtb5p { margin-top: 5%; margin-bottom: 5%; }
main .mtm4p { margin-top: -4%;}
main .mtm6p { margin-top: -6%; position: relative; z-index: 25; }
main .mtm8p { margin-top: -8%;}
main .mt5p { margin-top: 5%!important; }
main .mb8p { margin-bottom: 8%!important; }
main .pb3p { padding-bottom: 3%!important; }



/* OFFER
-----------------------------------------*/
main .offerBox { position: relative; }
main .offerBox > img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 9;
}
main .offerBox > a {
	position: absolute;
	z-index: 10;
}
main .offerBox > a img { transition: .2s all; }
main .offerBox > a:not(.noHovAction):hover img {
	transform: scale(1.03);
	filter: brightness(1.1);
	transition: .03s all; 
}


/* 以下複数LPにまたがるスタイル
-----------------------------------------*/
/*発送方法に関するおしらせ*/
main .shippingOuter { margin: 5% 0 0 !important; }

/*成分表*/
main .mainLpCompositionList {
	margin: 5% 0;
	padding: 5% 3%;
	background: #56808d;
	color: white;
	font-size: 110%;
	text-align: center;
}
main .mainLpCompositionList dt {
	margin-bottom: 2.5%;
	font-size: 160%;
}
main .mainLpCompositionList dd {
	margin: 0;
	padding: 3% 2% 4%;
	background: white;
	color: #333;
	font-size: 130%;
	font-weight: normal;
}
main .mainLpCompositionList dd + dt { margin-top: 10%; }
main .mainLpCompositionList dd .CompositionText {
	text-align: left;
	height: auto;
	max-height: 4000px;
	-webkit-transition: 1.5s;
	-o-transition: 1.5s;
	transition: 1.5s;
	overflow: hidden;
}
main .mainLpCompositionList dd .CompositionText p{
	line-height: 1.5;
}
main .mainLpCompositionList dd .textExcerpt {
	max-height: 5.3em;
	min-height: 5em;
}
main .mainLpCompositionList dd .textExcerpt p {
	margin-top: 0;
	margin-bottom: 0;
}
main .mainLpCompositionList .textMoreBt { display: none; }
main .mainLpCompositionList dd .textExcerpt + .textMoreBt {
	margin-top: 5%;
	font-size: 120%;
	text-align: center;
	display: inline-block;
	position: relative;
	padding-right: 6%;
	cursor: pointer;
}
main .mainLpCompositionList dd .textExcerpt + .textMoreBt::after {
	content: '';
	width: 13%;
	height: 50%;
	background: url("../img/ico_triangle.png") no-repeat;
	background-size: 100%;
	right: 0;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	display: block;
	position: absolute;
}
@media screen and (max-width: 750px) {
	main .mainLpCompositionList dt { font-size: 3.5vw; }
	main .mainLpCompositionList dd { font-size: 3.5vw; }
}


/* BOT LOADINGS V2 
-----------------------------------------*/
@-webkit-keyframes loading {
	0% {
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg)
	}
	100% {
		-webkit-transform: rotateY(360deg);
		transform: rotateY(360deg)
	}
}
@keyframes loading {
	0% {
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg)
	}
	100% {
		-webkit-transform: rotateY(360deg);
		transform: rotateY(360deg)
	}
}
.botLoadingV2 {
	width: 100vw;
	height: 100vh;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	font-size: 0;
	line-height: 1;
}
.botLoadingV2Cnt {
	display: block;
	width: 100%;
    max-width: 500px;
	margin: 0 auto;
	margin-top: 0;
	text-align: center;
}
.botLoadingV2Cnt p {
	text-align: center;
	margin: 0 auto;
	font-size: 18px;
	color: #333;
	font-weight: bold;
}
.botLoadingV2Cnt p img{
	width: 100%;
}
.botLoadingV2Cnt p + p { margin: 4% auto 0; }

/* BOT LOADINGS V2 Logo.ver
-----------------------------------------*/
.botLoadingV2.logo,
.botLoadingV2.logoTxt {
    display: flex;
    z-index: 99999;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
}
.botLoadingV2.logo .botLoadingV2Cnt,
.botLoadingV2.logoTxt .botLoadingV2Cnt {
    display: inline-block;
    height: auto;
    text-align: center;
    margin-top: -100px;
}
.botLoadingV2.logoTxt .botLoadingV2Cnt{
	max-width: 500px;
}
.botLoadingV2.logo .botLoadingV2Cnt img,
.botLoadingV2.logoTxt .botLoadingV2Cnt img {
	position: static;
	-webkit-animation-name: loading;
	animation-name: loading;
	-webkit-animation-duration: 2.6s;
	animation-duration: 2.6s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;		
}
.botLoadingV2.logo .botLoadingV2Cnt img {
    width: 300px;
}
.botLoadingV2.logoTxt .botLoadingV2Cnt img{
	width: 340px;
}
.botLoadingV2.logo .botLoadingV2Cnt span {
    font-size: 18px;
}
.botLoadingV2.logo .botLoadingV2Cnt span {
    display: block;
    margin-top: 35px;
    color: #333;
    font-weight: bold !important;
    line-height: 1.6;
}
@media screen and (max-width: 750px) {
	.botLoadingV2Cnt {
		margin-top: 5%;
	}
	.botLoadingV2Cnt p {
		width: 80vw;
		font-size: 4vw!important;
		color: #333;
		font-weight: bold;
	}
	.botLoadingV2Cnt img { width: 100%; }
	.botLoadingV2.logo .botLoadingV2Cnt img {
		width: 60vw !important;
	}
	.botLoadingV2.logoTxt .botLoadingV2Cnt img {
		width: 74.2vw !important;
	}
	.botLoadingV2.logo .botLoadingV2Cnt span {
		font-size: 4vw !important;
	}
}